/* ============================================
   PREMIUM STREAMFIELD BLOCKS CSS
   Glassmorphism • Gradients • Animations
   ============================================ */

:root {
    /* ========== Gradient Presets ========== */
    --gradient-purple: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);
    --gradient-blue: linear-gradient(135deg, #0ea5e9 0%, #06b6d4 100%);
    --gradient-green: linear-gradient(135deg, #10b981 0%, #34d399 100%);
    --gradient-dark: linear-gradient(135deg, #1f2937 0%, #374151 100%);
    --gradient-aurora: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #312e81 100%);

    /* ========== NEW: Modern Gradient Presets ========== */
    --gradient-aurora-btn: linear-gradient(135deg, #7c3aed 0%, #a855f7 50%, #ec4899 100%);
    --gradient-ocean: linear-gradient(135deg, #0ea5e9 0%, #06b6d4 50%, #14b8a6 100%);
    --gradient-emerald: linear-gradient(135deg, #059669 0%, #10b981 50%, #34d399 100%);
    --gradient-rose: linear-gradient(135deg, #e11d48 0%, #f43f5e 50%, #fb7185 100%);
    --gradient-sunset: linear-gradient(135deg, #f97316 0%, #fb923c 50%, #fbbf24 100%);
    --gradient-midnight: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 50%, #60a5fa 100%);
    --gradient-badge: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);

    /* ========== Colors ========== */
    --premium-primary: #6366f1;
    --premium-secondary: #ec4899;
    --premium-accent: #06b6d4;
    --premium-success: #10b981;
    --premium-warning: #f59e0b;
    --premium-danger: #ef4444;

    /* ========== Glass Effect ========== */
    --glass-bg: rgba(255, 255, 255, 0.7);
    --glass-border: rgba(255, 255, 255, 0.3);
    --glass-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);

    /* ========== Shadows ========== */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.1);
    --shadow-glow-purple: 0 8px 25px rgba(99, 102, 241, 0.35);
    --shadow-glow-blue: 0 8px 25px rgba(14, 165, 233, 0.35);

    /* ========== NEW: Glow Shadows ========== */
    --shadow-glow-aurora: 0 4px 20px rgba(168, 85, 247, 0.4);
    --shadow-glow-ocean: 0 4px 20px rgba(6, 182, 212, 0.4);
    --shadow-glow-emerald: 0 4px 20px rgba(16, 185, 129, 0.4);
    --shadow-glow-rose: 0 4px 20px rgba(244, 63, 94, 0.4);
    --shadow-glow-sunset: 0 4px 20px rgba(249, 115, 22, 0.4);
    --shadow-glow-midnight: 0 4px 20px rgba(59, 130, 246, 0.4);

    /* ========== NEW: Card Background Gradients ========== */
    --card-bg-aurora: linear-gradient(135deg, rgba(124, 58, 237, 0.3) 0%, rgba(236, 72, 153, 0.2) 50%, rgba(59, 130, 246, 0.2) 100%);
    --card-bg-ocean: linear-gradient(135deg, rgba(6, 182, 212, 0.2) 0%, rgba(20, 184, 166, 0.15) 100%);
    --card-bg-emerald: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(52, 211, 153, 0.1) 100%);
    --card-bg-rose: linear-gradient(135deg, rgba(244, 63, 94, 0.15) 0%, rgba(251, 113, 133, 0.1) 100%);
    --card-bg-sunset: linear-gradient(135deg, rgba(249, 115, 22, 0.15) 0%, rgba(251, 191, 36, 0.1) 100%);
    --card-bg-midnight: linear-gradient(135deg, rgba(15, 23, 42, 0.9) 0%, rgba(30, 41, 59, 0.9) 100%);

    /* ========== Block Spacing (NEW) ========== */
    --block-spacing: 2rem;
    --block-padding: 2rem;
    --block-radius: 1rem;

    /* ========== Testimonial Grid ========== */
    --testimonial-grid-gap: 1.5rem;
    --testimonial-card-min-width-mobile: 280px;
    --testimonial-card-max-width-mobile: 340px;

    /* ========== Text Colors (Shared) ========== */
    --text-muted: #9ca3af;
    --border-color-light: #e5e7eb;

    /* ========== Z-Index (Block-level) ========== */
    --z-index-hover-card: 10;
    --z-index-badge: 20;

    /* ========== Background Colors (Shared) ========== */
    --bg-tertiary: #f3f4f6;
    --bg-muted: #d1d5db;
}


/* ============================================
   📦 BASE CMS BLOCK STYLES
   Consistent spacing for all blocks
   ============================================ */

:where(.cms-block) {
    margin-top: 0;
    margin-bottom: var(--block-spacing);
}

:where(.cms-block:last-child) {
    margin-bottom: 0;
}

/* ============================================
   📦 UNIFIED BLOCK SPACING RESET
   Khi blocks nằm trong wrapper contexts đã quản lý spacing,
   bỏ margin riêng để tránh spacing chồng chất.
   Áp dụng: Menu, Product tabs, Legal content, Blog/Docs prose
   ============================================ */
.menu-premium-content .testimonial-grid-block,
.menu-premium-content .cms-block,
.menu-premium-content .video-block,
.menu-premium-content .stats-counter-block,
.menu-premium-content .hero-block,
.menu-premium-content .cta-block,
.menu-premium-content .pricing-table-block,
.menu-premium-content .timeline-block,
.menu-premium-content .tabs-block,
.menu-premium-content .accordion-block,
.menu-premium-content .comparison-block,
.menu-premium-content .quote-block,
.menu-premium-content .image-gallery-block,
.menu-premium-content .columns-block,
.menu-premium-content .features-list-block,
.menu-premium-content .features-list,
.menu-premium-content .enhanced-image,
.menu-premium-content .image-block,
.menu-premium-content .document-download-block,
.menu-premium-content .code-block,
.menu-premium-content .alert,
.menu-premium-content .feature-block {
    margin: 0 !important;
}

/* ============================================
   � SHARED CAROUSEL CARD — Unified scroll animation
   1 rule cho tất cả block dùng chung testimonial-carousel.js engine.
   GPU-optimized transition, overshoot bounce easing.
   Từng block vẫn giữ transition riêng cho non-carousel mode.
   ============================================ */
[data-carousel="true"]>.testimonial-block,
[data-carousel="true"]>.stat-item,
[data-carousel="true"]>.pricing-plan,
[data-carousel="true"]>.feature-item {
    will-change: transform;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* ============================================
   �🎯 CALL TO ACTION BLOCK - Premium Styles
   ============================================ */

.cta-block {
    border-radius: 20px;
    padding: 2.5rem;
    margin: 0;
    margin-bottom: var(--block-spacing);
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    /* Đảm bảo background bo tròn theo border */
    background-clip: padding-box;
    -webkit-background-clip: padding-box;
    /* Căn giữa nội dung */
    text-align: center;
}

/* Solid variants */
.cta-block--solid-white {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 20px;
    overflow: hidden;
}

.cta-block--solid-light {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    overflow: hidden;
}

.cta-block--solid-dark {
    background: var(--gradient-dark);
    color: #ffffff;
    border-radius: 20px;
    overflow: hidden;
}

/* Gradient variants */
.cta-block--gradient-purple {
    background: var(--gradient-purple);
    color: #ffffff;
    box-shadow: var(--shadow-glow-purple);
    border-radius: 20px;
    overflow: hidden;
}

.cta-block--gradient-blue {
    background: var(--gradient-blue);
    color: #ffffff;
    box-shadow: var(--shadow-glow-blue);
    border-radius: 20px;
    overflow: hidden;
}

.cta-block--gradient-dark {
    background: var(--gradient-aurora);
    color: #ffffff;
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    /* Đảm bảo background bo tròn theo border */
    background-clip: padding-box;
    -webkit-background-clip: padding-box;
}

/* Animated gradient border for dark variant */
.cta-block--gradient-dark::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 20px;
    padding: 2px;
    background: linear-gradient(135deg, #6366f1, #ec4899, #06b6d4, #6366f1);
    background-size: 300% 300%;
    animation: gradient-rotate 4s linear infinite;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    /* Đảm bảo border bo tròn theo border-radius của parent */
    border-radius: inherit;
    pointer-events: none;
}

/* ============================================
   6 COMBO GRADIENT - ĐỒNG BỘ VỚI BANNER
   3-stop gradient, chữ trắng (trừ sunset), nút trắng + brand
   ============================================ */

/* 1. Primary - Aurora Purple-Pink */
.cta-block--primary {
    background: linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #ec4899 100%);
    color: #ffffff;
    box-shadow: var(--shadow-glow-purple);
    border-radius: 20px;
    overflow: hidden;
}

/* 2. Ocean - Cyan-Teal */
.cta-block--ocean {
    background: var(--gradient-ocean);
    color: #ffffff;
    box-shadow: var(--shadow-glow-ocean);
    border-radius: 20px;
    overflow: hidden;
}

/* 3. Sunset - Orange-Amber (chữ tối để tương phản) */
.cta-block--sunset {
    background: var(--gradient-sunset);
    color: #78350f;
    box-shadow: var(--shadow-glow-sunset);
    border-radius: 20px;
    overflow: hidden;
}

.cta-block--sunset .cta-block__title,
.cta-block--sunset .cta-block__text {
    color: #78350f;
}

/* 4. Emerald - Green */
.cta-block--emerald {
    background: var(--gradient-emerald);
    color: #ffffff;
    box-shadow: var(--shadow-glow-emerald);
    border-radius: 20px;
    overflow: hidden;
}

/* 5. Midnight - Blue */
.cta-block--midnight {
    background: var(--gradient-midnight);
    color: #ffffff;
    box-shadow: var(--shadow-glow-midnight);
    border-radius: 20px;
    overflow: hidden;
}

/* 6. Rose - Pink-Red */
.cta-block--rose {
    background: var(--gradient-rose);
    color: #ffffff;
    box-shadow: var(--shadow-glow-rose);
    border-radius: 20px;
    overflow: hidden;
}

/* ============================================
   7 CARD-STYLE VARIANTS — ĐỒNG BỘ Testimonial/CARD_STYLE_CHOICES
   card, glassmorphism, gradient, aurora, minimal, bordered, highlighted
   ============================================ */

/* 7. Card - Nền trắng, text tối */
.cta-block--card {
    background: #ffffff;
    border: 1px solid var(--border-color-light);
    color: var(--text-color);
    border-radius: 20px;
    overflow: hidden;
}

.cta-block--card .cta-block__title,
.cta-block--card .cta-block__text {
    color: var(--text-color);
}

.cta-block--card .cta-block__text {
    color: var(--text-muted);
}

/* 8. Glassmorphism - Glass blur */
.cta-block--glassmorphism {
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    color: var(--text-color);
    border-radius: 20px;
    overflow: hidden;
}

.cta-block--glassmorphism .cta-block__title,
.cta-block--glassmorphism .cta-block__text {
    color: var(--text-color);
}

.cta-block--glassmorphism .cta-block__text {
    color: var(--text-muted);
}

/* 9. Gradient Purple */
.cta-block--gradient {
    background: var(--gradient-purple);
    color: #ffffff;
    box-shadow: var(--shadow-glow-purple);
    border-radius: 20px;
    overflow: hidden;
}

/* 10. Aurora Gradient */
.cta-block--aurora {
    background: var(--card-bg-aurora);
    backdrop-filter: blur(15px);
    color: #ffffff;
    border-radius: 20px;
    overflow: hidden;
}

/* 11. Minimal - Nền sáng, đơn giản */
.cta-block--minimal {
    background: var(--bg-primary);
    color: var(--text-color);
    box-shadow: none;
    border-radius: 20px;
    overflow: hidden;
}

.cta-block--minimal .cta-block__title,
.cta-block--minimal .cta-block__text {
    color: var(--text-color);
}

.cta-block--minimal .cta-block__text {
    color: var(--text-muted);
}

/* 12. Bordered - Viền nổi bật */
.cta-block--bordered {
    background: #ffffff;
    border: 2px solid var(--premium-primary);
    color: var(--text-color);
    border-radius: 20px;
    overflow: hidden;
}

.cta-block--bordered .cta-block__title,
.cta-block--bordered .cta-block__text {
    color: var(--text-color);
}

.cta-block--bordered .cta-block__text {
    color: var(--text-muted);
}

/* 13. Highlighted - Gradient Blue */
.cta-block--highlighted {
    background: var(--gradient-blue);
    color: #ffffff;
    box-shadow: var(--shadow-glow-blue);
    border-radius: 20px;
    overflow: hidden;
}

/* Image background variant - HIGH SPECIFICITY */
/* ⚠️ Khi container có cả cta-block--image VÀ cta-block--{style} (để kế thừa text color), */
/* cần override gradient background từ style class để ảnh hiển thị đúng */
.cms-block.cta-block.cta-block--image {
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-color: #1f2937 !important;
    /* Fallback if image fails */
    min-height: 280px;
    display: flex;
    align-items: center;
    position: relative;
    border-radius: 20px !important;
    overflow: hidden !important;
}

/* Override: Tắt gradient từ style class khi image mode */
/* .cta-block--{style} dùng shorthand `background: gradient` → set background-image = gradient */
/* Nhưng inline style="background-image: url(...)" thắng vì inline > stylesheet */
/* Chỉ cần tắt box-shadow từ gradient style */
.cta-block--image.cta-block--primary,
.cta-block--image.cta-block--ocean,
.cta-block--image.cta-block--sunset,
.cta-block--image.cta-block--emerald,
.cta-block--image.cta-block--midnight,
.cta-block--image.cta-block--rose,
.cta-block--image.cta-block--card,
.cta-block--image.cta-block--glassmorphism,
.cta-block--image.cta-block--gradient,
.cta-block--image.cta-block--aurora,
.cta-block--image.cta-block--minimal,
.cta-block--image.cta-block--bordered,
.cta-block--image.cta-block--highlighted {
    box-shadow: none !important;
}

/* Image mode: card-style text override → chữ trắng trên ảnh nền */
.cta-block--image.cta-block--card .cta-block__title,
.cta-block--image.cta-block--card .cta-block__text,
.cta-block--image.cta-block--glassmorphism .cta-block__title,
.cta-block--image.cta-block--glassmorphism .cta-block__text,
.cta-block--image.cta-block--minimal .cta-block__title,
.cta-block--image.cta-block--minimal .cta-block__text,
.cta-block--image.cta-block--bordered .cta-block__title,
.cta-block--image.cta-block--bordered .cta-block__text {
    color: #ffffff;
}

/* Text khi image mode: kế thừa color từ style class (GIỐNG gradient mode) */
/* Không override color → sunset có chữ tối, các style khác có chữ trắng */
/* text-shadow giúp text nổi trên ảnh + overlay */
.cta-block--image .cta-block__title,
.cta-block--image .cta-block__text {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Sunset overlay: xử lý trong template (rgba trắng thay vì đen) */
/* KHÔNG dùng CSS !important → tôn trọng user chọn "Không overlay" */

/* Sunset trên ảnh: text-shadow sáng (chữ tối trên nền sáng cần bóng sáng) */
.cta-block--image.cta-block--sunset .cta-block__title,
.cta-block--image.cta-block--sunset .cta-block__text {
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.5);
}

.cta-block--image .cta-block__overlay {
    position: absolute;
    inset: 0;
    border-radius: 20px;
    z-index: 1;
}

.cta-block--image .cta-block__content {
    position: relative;
    z-index: 10;
    width: 100%;
    padding: 0;
    /* Reset padding as parent has it */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Image mode alignment - override default center */
.cta-block--image .cta-block__content--center {
    text-align: center;
    align-items: center;
}

.cta-block--image .cta-block__content--left {
    text-align: left;
    align-items: flex-start;
}

/* (text color cho image mode đã được set ở phần override bên trên với !important) */

/* Button styles trong image mode - ĐỒNG BỘ với Banner: nền trắng, màu chữ theo style */
/* Sử dụng !important để đảm bảo không bị override bởi CSS khác */
.cta-block--image .cms-button--primary {
    background: var(--gradient-purple) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3) !important;
}

.cta-block--image .cms-button--primary:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(99, 102, 241, 0.4) !important;
}

.cta-block--image .cms-button--ocean {
    background: var(--gradient-ocean) !important;
    color: #ffffff !important;
    box-shadow: var(--shadow-glow-ocean) !important;
}

.cta-block--image .cms-button--ocean:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 30px rgba(6, 182, 212, 0.5) !important;
}

.cta-block--image .cms-button--emerald {
    background: var(--gradient-emerald) !important;
    color: #ffffff !important;
    box-shadow: var(--shadow-glow-emerald) !important;
}

.cta-block--image .cms-button--emerald:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 30px rgba(16, 185, 129, 0.5) !important;
}

.cta-block--image .cms-button--rose {
    background: var(--gradient-rose) !important;
    color: #ffffff !important;
    box-shadow: var(--shadow-glow-rose) !important;
}

.cta-block--image .cms-button--rose:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 30px rgba(244, 63, 94, 0.5) !important;
}

.cta-block--image .cms-button--sunset {
    background: var(--gradient-sunset) !important;
    color: #1f2937 !important;
    box-shadow: var(--shadow-glow-sunset) !important;
}

.cta-block--image .cms-button--sunset:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 30px rgba(249, 115, 22, 0.5) !important;
}

.cta-block--image .cms-button--midnight {
    background: var(--gradient-midnight) !important;
    color: #ffffff !important;
    box-shadow: var(--shadow-glow-midnight) !important;
}

.cta-block--image .cms-button--midnight:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 30px rgba(59, 130, 246, 0.5) !important;
}

/* Image mode: Card-style button variants */
.cta-block--image .cms-button--card,
.cta-block--image .cms-button--glassmorphism,
.cta-block--image .cms-button--minimal,
.cta-block--image .cms-button--bordered {
    background: var(--gradient-purple) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3) !important;
}

.cta-block--image .cms-button--card:hover,
.cta-block--image .cms-button--glassmorphism:hover,
.cta-block--image .cms-button--minimal:hover,
.cta-block--image .cms-button--bordered:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(99, 102, 241, 0.4) !important;
}

.cta-block--image .cms-button--gradient,
.cta-block--image .cms-button--aurora {
    background: var(--gradient-purple) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3) !important;
}

.cta-block--image .cms-button--gradient:hover,
.cta-block--image .cms-button--aurora:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(99, 102, 241, 0.4) !important;
}

.cta-block--image .cms-button--highlighted {
    background: var(--gradient-blue) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(14, 165, 233, 0.3) !important;
}

.cta-block--image .cms-button--highlighted:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(14, 165, 233, 0.4) !important;
}

@keyframes gradient-rotate {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* CTA inner elements */
.cta-block__content {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* CTA content alignment */
.cta-block__content--center {
    text-align: center;
    align-items: center;
}

.cta-block__content--left {
    text-align: left;
    align-items: flex-start;
}

.cta-block__title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    position: relative;
    width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
}

/* Title alignment */
.cta-block__content--center .cta-block__title,
.cta-block__content--center .cta-block__title p,
.cta-block__content--center .cta-block__title * {
    text-align: center !important;
}

.cta-block__content--left .cta-block__title,
.cta-block__content--left .cta-block__title p,
.cta-block__content--left .cta-block__title * {
    text-align: left !important;
}

.cta-block__text {
    font-size: 1rem;
    opacity: 0.9;
    margin-bottom: var(--component-margin-bottom-sm);
    line-height: 1.7;
    position: relative;
    width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
}

/* Text alignment */
.cta-block__content--center .cta-block__text,
.cta-block__content--center .cta-block__text p,
.cta-block__content--center .cta-block__text * {
    text-align: center !important;
}

.cta-block__content--left .cta-block__text,
.cta-block__content--left .cta-block__text p,
.cta-block__content--left .cta-block__text * {
    text-align: left !important;
}

/* Button alignment */
.cta-block__content--center .cms-button {
    margin: 0 auto;
    display: inline-flex;
}

.cta-block__content--left .cms-button {
    margin: 0;
    display: inline-flex;
}

/* Đảm bảo button style trong image mode không bị override bởi alignment rules */
.cta-block--image .cta-block__content--center .cms-button,
.cta-block--image .cta-block__content--left .cms-button {
    /* Chỉ set margin và display, không override background/color */
    display: inline-flex;
}

/* CTA Button styles */
.cms-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1.75rem;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.9375rem;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
    border: none;
    position: relative;
}

.cms-button--primary {
    background: var(--gradient-purple);
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
}

.cms-button--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(99, 102, 241, 0.4);
}

.cms-button--secondary {
    background: #f1f5f9;
    color: #475569;
}

.cms-button--secondary:hover {
    background: #e2e8f0;
}

.cms-button--success {
    background: linear-gradient(135deg, #10b981, #34d399);
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
}

.cms-button--danger {
    background: linear-gradient(135deg, #ef4444, #f87171);
    color: #ffffff;
}

.cms-button--warning {
    background: linear-gradient(135deg, #f59e0b, #fbbf24);
    color: #1f2937;
}

.cms-button--info {
    background: var(--gradient-blue);
    color: #ffffff;
}

.cms-button--dark {
    background: linear-gradient(135deg, #1f2937, #374151);
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(31, 41, 55, 0.3);
}

.cms-button--dark:hover {
    background: linear-gradient(135deg, #111827, #1f2937);
    box-shadow: 0 8px 25px rgba(31, 41, 55, 0.4);
}

/* ========== NEW: Modern Gradient Button Styles ========== */

.cms-button--ocean {
    background: var(--gradient-ocean);
    color: #ffffff;
    box-shadow: var(--shadow-glow-ocean);
}

.cms-button--ocean:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(6, 182, 212, 0.5);
}

.cms-button--emerald {
    background: var(--gradient-emerald);
    color: #ffffff;
    box-shadow: var(--shadow-glow-emerald);
}

.cms-button--emerald:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(16, 185, 129, 0.5);
}

.cms-button--rose {
    background: var(--gradient-rose);
    color: #ffffff;
    box-shadow: var(--shadow-glow-rose);
}

.cms-button--rose:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(244, 63, 94, 0.5);
}

.cms-button--sunset {
    background: var(--gradient-sunset);
    color: #1f2937;
    box-shadow: var(--shadow-glow-sunset);
}

.cms-button--sunset:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(249, 115, 22, 0.5);
}

.cms-button--midnight {
    background: var(--gradient-midnight);
    color: #ffffff;
    box-shadow: var(--shadow-glow-midnight);
}

.cms-button--midnight:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(59, 130, 246, 0.5);
}

.cms-button--glass {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

.cms-button--glass:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
}

/* ========== Card-style CTA Button Variants — đồng bộ Testimonial ========== */

/* Card, Glassmorphism, Minimal, Bordered: nền sáng → button gradient nổi bật */
.cms-button--card,
.cms-button--glassmorphism,
.cms-button--minimal,
.cms-button--bordered {
    background: var(--gradient-purple);
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
}

.cms-button--card:hover,
.cms-button--glassmorphism:hover,
.cms-button--minimal:hover,
.cms-button--bordered:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(99, 102, 241, 0.4);
}

/* Gradient, Aurora: nền tối/gradient → button trắng */
.cms-button--gradient,
.cms-button--aurora {
    background: #ffffff;
    color: #1f2937;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
}

.cms-button--gradient:hover,
.cms-button--aurora:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(99, 102, 241, 0.4);
}

/* Highlighted: nền gradient-blue → button trắng */
.cms-button--highlighted {
    background: #ffffff;
    color: #0e7490;
    box-shadow: 0 4px 15px rgba(14, 165, 233, 0.3);
}

.cms-button--highlighted:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(14, 165, 233, 0.4);
}

/* ============================================
   ⚠️ ALERT BLOCK - Premium Glassmorphism
   ============================================ */

.alert {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    border-radius: 16px;
    margin: 0;
    margin-bottom: var(--block-spacing);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.alert:hover {
    transform: translateY(-2px);
}

/* Alert variants - Glassmorphism style */
.alert-info {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.08), rgba(99, 102, 241, 0.08));
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-left: 4px solid #3b82f6;
}

.alert-success {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.08), rgba(52, 211, 153, 0.08));
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-left: 4px solid #10b981;
}

.alert-warning {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.08), rgba(251, 191, 36, 0.08));
    border: 1px solid rgba(245, 158, 11, 0.2);
    border-left: 4px solid #f59e0b;
}

.alert-danger {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.08), rgba(248, 113, 113, 0.08));
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-left: 4px solid #ef4444;
}

.alert svg {
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.alert-dismiss-button {
    margin-left: auto;
    padding: 0.25rem;
    border-radius: 8px;
    background: transparent;
    border: none;
    cursor: pointer;
    opacity: 0.6;
    transition: all 0.2s;
}

.alert-dismiss-button:hover {
    opacity: 1;
    background: rgba(0, 0, 0, 0.05);
}

/* ============================================
   ⭐ FEATURE BLOCK - Premium Cards
   ============================================ */

.feature-block {
    display: flex;
    gap: 1.25rem;
    padding: 1.5rem;
    background: #ffffff;
    border: 1px solid #f1f5f9;
    border-radius: 16px;
    margin: 0;
    margin-bottom: var(--block-spacing);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.feature-block::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--gradient-purple);
    border-radius: 4px 0 0 4px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.feature-block:hover {
    transform: translateX(8px);
    border-color: #c7d2fe;
    box-shadow: var(--shadow-md);
}

.feature-block:hover::before {
    opacity: 1;
}

/* Icon wrapper - Gradient styles */
.icon-wrapper {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    font-size: 1.5rem;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.icon-wrapper--gradient-purple {
    background: var(--gradient-purple);
    color: #ffffff;
    box-shadow: 0 6px 15px rgba(99, 102, 241, 0.25);
}

.icon-wrapper--gradient-blue {
    background: var(--gradient-blue);
    color: #ffffff;
    box-shadow: 0 6px 15px rgba(14, 165, 233, 0.25);
}

.icon-wrapper--gradient-green {
    background: var(--gradient-green);
    color: #ffffff;
    box-shadow: 0 6px 15px rgba(16, 185, 129, 0.25);
}

.icon-wrapper--outline {
    background: transparent;
    border: 2px solid #e2e8f0;
    color: #6366f1;
}

.feature-block:hover .icon-wrapper {
    transform: scale(1.08) rotate(3deg);
}

.cms-block__subtitle {
    font-size: 1.0625rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 0.375rem;
}

.cms-block__text {
    font-size: 0.9375rem;
    color: #6b7280;
    line-height: 1.6;
}

/* ============================================
   ❓ FAQ BLOCK - Smooth Accordion
   ============================================ */

.faq-block {
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    margin: 0.75rem 0;
    overflow: hidden;
    background: #ffffff;
    transition: all 0.3s ease;
}

.faq-block:hover {
    border-color: #c7d2fe;
    box-shadow: var(--shadow-sm);
}

.faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    cursor: pointer;
    font-weight: 600;
    color: #1f2937;
    transition: all 0.2s ease;
}

.faq-question:hover {
    background: #f8fafc;
}

.faq-question::after {
    content: '+';
    font-size: 1.5rem;
    font-weight: 400;
    color: #6366f1;
    transition: transform 0.3s ease;
}

.faq-block.active .faq-question::after {
    transform: rotate(45deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.4s ease;
}

.faq-block.active .faq-answer {
    max-height: 500px;
}

.faq-answer-content {
    padding: 0 1.5rem 1.5rem;
    color: #6b7280;
    line-height: 1.7;
}

/* ============================================
   💻 CODE BLOCK - Modern Theme
   ============================================ */

.code-block {
    border-radius: 16px;
    overflow: hidden;
    margin: 0;
    margin-bottom: var(--block-spacing);
    box-shadow: var(--shadow-md);
}

.code-block-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: #1e293b;
    border-bottom: 1px solid #334155;
}

.code-block-lang {
    font-size: 0.75rem;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.code-block-copy {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: #94a3b8;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
}

.code-block-copy:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

.code-block pre {
    margin: 0;
    padding: 1.25rem;
    background: #0f172a;
    overflow-x: auto;
}

.code-block code {
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 0.875rem;
    line-height: 1.7;
}

/* ============================================
   🎯 HERO BLOCK - Aurora Style
   ============================================ */

.hero-block {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    margin: 0;
    margin-bottom: var(--block-spacing);
}

.hero-block--aurora-dark {
    background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #312e81 100%);
}

.hero-block--aurora-purple {
    background: linear-gradient(135deg, #1e1b4b 0%, #4c1d95 50%, #7c3aed 100%);
}

.hero-block--gradient-blue {
    background: linear-gradient(135deg, #0c4a6e 0%, #0369a1 50%, #0ea5e9 100%);
}

/* ============================================
   6 COMBO GRADIENT - ĐỒNG BỘ VỚI BANNER
   Primary, Ocean, Sunset, Emerald, Midnight, Rose
   ============================================ */

/* 1. Primary - Aurora Purple-Pink (3-stop gradient) */
.hero-block--primary {
    background: linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #ec4899 100%);
}

/* 2. Ocean - Cyan-Teal */
.hero-block--ocean {
    background: linear-gradient(135deg, #0ea5e9 0%, #06b6d4 50%, #14b8a6 100%);
}

/* 3. Sunset - Orange-Amber */
.hero-block--sunset {
    background: var(--gradient-sunset);
}

/* Override text color for sunset (dark text on light bg) */
.hero-block--sunset .hero-block__content,
.hero-block--sunset .hero-title,
.hero-block--sunset .hero-description,
.hero-block--sunset .hero-badge {
    color: #78350f;
}

.hero-block--sunset .hero-badge-dot {
    background: #78350f;
}

.hero-block--sunset .hero-cta {
    background: rgba(255, 255, 255, 0.95);
    color: #b45309;
}

.hero-block--sunset .hero-cta:hover {
    background: #fff;
}

/* 4. Emerald - Green */
.hero-block--emerald {
    background: linear-gradient(135deg, #059669 0%, #10b981 50%, #34d399 100%);
}

/* 5. Midnight - Blue */
.hero-block--midnight {
    background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 50%, #60a5fa 100%);
}

/* 6. Rose - Pink-Red */
.hero-block--rose {
    background: var(--gradient-rose);
}

/* ============================================
   7 CARD-STYLE VARIANTS — ĐỒNG BỘ Testimonial/CARD_STYLE_CHOICES
   card, glassmorphism, gradient, aurora, minimal, bordered, highlighted
   ============================================ */

/* 7. Card - Nền trắng, text tối */
.hero-block--card {
    background: #ffffff;
    border: 1px solid var(--border-color-light);
}

.hero-block--card .hero-block__content,
.hero-block--card .hero-title,
.hero-block--card .hero-description {
    color: var(--text-color);
}

.hero-block--card .hero-description {
    color: var(--text-muted);
}

.hero-block--card .hero-badge {
    color: var(--text-color);
}

.hero-block--card .hero-badge-dot {
    background: var(--premium-primary);
}

.hero-block--card .hero-title .highlight {
    background: var(--gradient-purple);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* 8. Glassmorphism - Glass blur */
.hero-block--glassmorphism {
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
}

.hero-block--glassmorphism .hero-block__content,
.hero-block--glassmorphism .hero-title,
.hero-block--glassmorphism .hero-description {
    color: var(--text-color);
}

.hero-block--glassmorphism .hero-description {
    color: var(--text-muted);
}

.hero-block--glassmorphism .hero-badge {
    color: var(--text-color);
}

.hero-block--glassmorphism .hero-badge-dot {
    background: var(--premium-primary);
}

.hero-block--glassmorphism .hero-title .highlight {
    background: var(--gradient-purple);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* 9. Gradient Purple */
.hero-block--gradient {
    background: var(--gradient-purple);
}

/* 10. Aurora Gradient */
.hero-block--aurora {
    background: var(--card-bg-aurora);
    backdrop-filter: blur(15px);
}

/* 11. Minimal - Nền sáng, đơn giản */
.hero-block--minimal {
    background: var(--bg-primary);
    box-shadow: none;
}

.hero-block--minimal .hero-block__content,
.hero-block--minimal .hero-title,
.hero-block--minimal .hero-description {
    color: var(--text-color);
}

.hero-block--minimal .hero-description {
    color: var(--text-muted);
}

.hero-block--minimal .hero-badge {
    color: var(--text-color);
}

.hero-block--minimal .hero-badge-dot {
    background: var(--premium-primary);
}

.hero-block--minimal .hero-title .highlight {
    background: var(--gradient-purple);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* 12. Bordered - Viền nổi bật */
.hero-block--bordered {
    background: #ffffff;
    border: 2px solid var(--premium-primary);
}

.hero-block--bordered .hero-block__content,
.hero-block--bordered .hero-title,
.hero-block--bordered .hero-description {
    color: var(--text-color);
}

.hero-block--bordered .hero-description {
    color: var(--text-muted);
}

.hero-block--bordered .hero-badge {
    color: var(--text-color);
}

.hero-block--bordered .hero-badge-dot {
    background: var(--premium-primary);
}

.hero-block--bordered .hero-title .highlight {
    background: var(--gradient-purple);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* 13. Highlighted - Gradient Blue */
.hero-block--highlighted {
    background: var(--gradient-blue);
}

/* Image background variant */
.hero-block--image {
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-color: #1f2937;
    display: flex;
    align-items: center;
    min-height: 500px;
}

/* Override: Tắt gradient từ style class khi image mode */
/* inline style="background-image: url(...)" thắng gradient vì inline > stylesheet */
.hero-block--image.hero-block--primary,
.hero-block--image.hero-block--ocean,
.hero-block--image.hero-block--sunset,
.hero-block--image.hero-block--emerald,
.hero-block--image.hero-block--midnight,
.hero-block--image.hero-block--rose,
.hero-block--image.hero-block--card,
.hero-block--image.hero-block--glassmorphism,
.hero-block--image.hero-block--gradient,
.hero-block--image.hero-block--aurora,
.hero-block--image.hero-block--minimal,
.hero-block--image.hero-block--bordered,
.hero-block--image.hero-block--highlighted {
    box-shadow: none !important;
}

/* Image mode: card-style text override → chữ trắng trên ảnh nền (thay vì chữ tối) */
.hero-block--image.hero-block--card .hero-block__content,
.hero-block--image.hero-block--card .hero-title,
.hero-block--image.hero-block--glassmorphism .hero-block__content,
.hero-block--image.hero-block--glassmorphism .hero-title,
.hero-block--image.hero-block--minimal .hero-block__content,
.hero-block--image.hero-block--minimal .hero-title,
.hero-block--image.hero-block--bordered .hero-block__content,
.hero-block--image.hero-block--bordered .hero-title {
    color: #ffffff;
}

.hero-block--image.hero-block--card .hero-description,
.hero-block--image.hero-block--glassmorphism .hero-description,
.hero-block--image.hero-block--minimal .hero-description,
.hero-block--image.hero-block--bordered .hero-description {
    color: rgba(255, 255, 255, 0.7);
}

.hero-block--image.hero-block--card .hero-badge,
.hero-block--image.hero-block--glassmorphism .hero-badge,
.hero-block--image.hero-block--minimal .hero-badge,
.hero-block--image.hero-block--bordered .hero-badge {
    color: rgba(255, 255, 255, 0.9);
}

.hero-block--image.hero-block--card .hero-badge-dot,
.hero-block--image.hero-block--glassmorphism .hero-badge-dot,
.hero-block--image.hero-block--minimal .hero-badge-dot,
.hero-block--image.hero-block--bordered .hero-badge-dot {
    background: #ffffff;
}

.hero-block--image.hero-block--card .hero-title .highlight,
.hero-block--image.hero-block--glassmorphism .hero-title .highlight,
.hero-block--image.hero-block--minimal .hero-title .highlight,
.hero-block--image.hero-block--bordered .hero-title .highlight {
    background: linear-gradient(135deg, #a5b4fc 0%, #f9a8d4 50%, #67e8f9 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Hero text khi image mode: kế thừa color từ style class (GIỐNG gradient mode) */
/* Không override color → sunset có chữ tối, các style khác có chữ trắng */
/* text-shadow giúp text nổi trên ảnh + overlay */
.hero-block--image .hero-title,
.hero-block--image .hero-description {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Sunset overlay: xử lý trong template (rgba trắng thay vì đen) */
/* KHÔNG dùng CSS !important → tôn trọng user chọn "Không overlay" */

/* Sunset trên ảnh: text-shadow sáng + badge điều chỉnh */
.hero-block--image.hero-block--sunset .hero-title,
.hero-block--image.hero-block--sunset .hero-description {
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.5);
}

/* Sunset trên ảnh: badge border tối hơn cho contrast trên nền sáng */
.hero-block--image.hero-block--sunset .hero-badge {
    background: rgba(120, 53, 15, 0.1);
    border-color: rgba(120, 53, 15, 0.2);
}

.hero-block--image .hero-block__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* Hero image mode - content alignment */
.hero-block--image .hero-block__content--center {
    margin: 0 auto;
}

.hero-block--image .hero-block__content--left {
    margin-left: 0;
    margin-right: auto;
}

/* Hero button styles trong image mode - đảm bảo style hoạt động giống gradient mode */
.hero-block--image .hero-cta--primary {
    background: #ffffff;
    color: #1f2937;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.35);
}

.hero-block--image .hero-cta--primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(99, 102, 241, 0.5);
}

.hero-block--image .hero-cta--ocean {
    background: #ffffff;
    color: #0e7490;
    box-shadow: 0 4px 15px rgba(14, 165, 233, 0.35);
}

.hero-block--image .hero-cta--ocean:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(14, 165, 233, 0.5);
}

.hero-block--image .hero-cta--sunset {
    background: #ffffff;
    color: #b45309;
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.4);
}

.hero-block--image .hero-cta--sunset:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(245, 158, 11, 0.5);
}

.hero-block--image .hero-cta--emerald {
    background: #ffffff;
    color: #047857;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.35);
}

.hero-block--image .hero-cta--emerald:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(16, 185, 129, 0.5);
}

.hero-block--image .hero-cta--midnight {
    background: #ffffff;
    color: #1e3a8a;
    box-shadow: 0 4px 15px rgba(30, 58, 138, 0.35);
}

.hero-block--image .hero-cta--midnight:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(30, 58, 138, 0.5);
}

.hero-block--image .hero-cta--rose {
    background: #ffffff;
    color: #b91c1c;
    box-shadow: 0 4px 15px rgba(225, 29, 72, 0.35);
}

.hero-block--image .hero-cta--rose:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(225, 29, 72, 0.5);
}

/* Image mode: Card-style CTA variants — tất cả dùng CTA trắng trên ảnh nền */
.hero-block--image .hero-cta--card,
.hero-block--image .hero-cta--glassmorphism,
.hero-block--image .hero-cta--minimal,
.hero-block--image .hero-cta--bordered {
    background: #ffffff;
    color: #1f2937;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.35);
}

.hero-block--image .hero-cta--card:hover,
.hero-block--image .hero-cta--glassmorphism:hover,
.hero-block--image .hero-cta--minimal:hover,
.hero-block--image .hero-cta--bordered:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(99, 102, 241, 0.5);
}

.hero-block--image .hero-cta--gradient,
.hero-block--image .hero-cta--aurora {
    background: #ffffff;
    color: #1f2937;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.35);
}

.hero-block--image .hero-cta--gradient:hover,
.hero-block--image .hero-cta--aurora:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(99, 102, 241, 0.5);
}

.hero-block--image .hero-cta--highlighted {
    background: #ffffff;
    color: #0e7490;
    box-shadow: 0 4px 15px rgba(14, 165, 233, 0.35);
}

.hero-block--image .hero-cta--highlighted:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(14, 165, 233, 0.5);
}

/* Aurora orbs */
.hero-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.5;
    animation: float 8s ease-in-out infinite;
}

/* Card-style variants: ẩn orbs (nền sáng, orbs không phù hợp) */
.hero-block--card .hero-orb,
.hero-block--glassmorphism .hero-orb,
.hero-block--minimal .hero-orb,
.hero-block--bordered .hero-orb {
    display: none;
}

.hero-orb--1 {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.4) 0%, transparent 70%);
    top: -150px;
    left: -100px;
}

.hero-orb--2 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(236, 72, 153, 0.3) 0%, transparent 70%);
    bottom: -100px;
    right: -50px;
    animation-delay: -4s;
}

@keyframes float {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(-20px, 20px) scale(1.05);
    }
}

/* Grid pattern overlay */
.hero-grid-pattern {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 50px 50px;
}

.hero-content {
    position: relative;
    z-index: 10;
    padding: 4rem 3rem;
    max-width: 700px;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 0.5rem 1rem;
    border-radius: 100px;
    font-size: 0.875rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: var(--component-margin-bottom-sm);
}

.hero-badge-dot {
    width: 8px;
    height: 8px;
    background: #10b981;
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
    box-shadow: 0 0 10px #10b981;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.5;
        transform: scale(1.3);
    }
}

.hero-title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    color: #ffffff;
    line-height: 1.15;
    margin-bottom: 1.25rem;
    letter-spacing: -0.02em;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
}

.hero-title .highlight {
    background: linear-gradient(135deg, #a5b4fc 0%, #f9a8d4 50%, #67e8f9 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-description {
    font-size: 1.125rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.8;
    margin-bottom: var(--component-margin-bottom-md);
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
}

.hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.75rem;
    border-radius: 12px;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    transition: all 0.3s ease;
}

/* Hero button styles - đồng bộ với Banner và CTA */
.hero-cta--primary {
    background: #ffffff;
    color: #1f2937;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.35);
}

.hero-cta--primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(99, 102, 241, 0.5);
}

.hero-cta--ocean {
    background: #ffffff;
    color: #0e7490;
    box-shadow: 0 4px 15px rgba(14, 165, 233, 0.35);
}

.hero-cta--ocean:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(14, 165, 233, 0.5);
}

.hero-cta--sunset {
    background: #ffffff;
    color: #b45309;
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.4);
}

.hero-cta--sunset:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(245, 158, 11, 0.5);
}

.hero-cta--emerald {
    background: #ffffff;
    color: #047857;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.35);
}

.hero-cta--emerald:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(16, 185, 129, 0.5);
}

.hero-cta--midnight {
    background: #ffffff;
    color: #1e3a8a;
    box-shadow: 0 4px 15px rgba(30, 58, 138, 0.35);
}

.hero-cta--midnight:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(30, 58, 138, 0.5);
}

.hero-cta--rose {
    background: #ffffff;
    color: #b91c1c;
    box-shadow: 0 4px 15px rgba(225, 29, 72, 0.35);
}

.hero-cta--rose:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(225, 29, 72, 0.5);
}

/* ========== Card-style CTA variants - đồng bộ Testimonial ========== */

/* Card, Glassmorphism, Minimal, Bordered: nền sáng → CTA gradient nổi bật */
.hero-cta--card,
.hero-cta--glassmorphism,
.hero-cta--minimal,
.hero-cta--bordered {
    background: var(--gradient-purple);
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.35);
}

.hero-cta--card:hover,
.hero-cta--glassmorphism:hover,
.hero-cta--minimal:hover,
.hero-cta--bordered:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(99, 102, 241, 0.5);
}

/* Gradient, Aurora: nền tối/gradient → CTA trắng */
.hero-cta--gradient,
.hero-cta--aurora {
    background: #ffffff;
    color: #1f2937;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.35);
}

.hero-cta--gradient:hover,
.hero-cta--aurora:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(99, 102, 241, 0.5);
}

/* Highlighted: nền gradient-blue → CTA trắng */
.hero-cta--highlighted {
    background: #ffffff;
    color: #0e7490;
    box-shadow: 0 4px 15px rgba(14, 165, 233, 0.35);
}

.hero-cta--highlighted:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(14, 165, 233, 0.5);
}

/* Legacy styles fallback */
.hero-cta--aurora-dark,
.hero-cta--aurora-purple,
.hero-cta--gradient-blue {
    background: #ffffff;
    color: #1f2937;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.hero-cta--aurora-dark:hover,
.hero-cta--aurora-purple:hover,
.hero-cta--gradient-blue:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.hero-cta svg {
    width: 20px;
    height: 20px;
    transition: transform 0.3s;
}

.hero-cta:hover svg {
    transform: translateX(4px);
}

/* ============================================
   📱 RESPONSIVE
   ============================================ */

@media (max-width: 639px) {
    .cta-block {
        padding: var(--component-padding);
    }

    .hero-content {
        padding: 3rem 2rem;
    }

    .feature-block {
        flex-direction: column;
        text-align: center;
    }

    .feature-block:hover {
        transform: translateY(-4px);
    }

    .feature-block::before {
        width: 100%;
        height: 4px;
        bottom: auto;
        border-radius: 4px 4px 0 0;
    }

    /* New Blocks Responsive */
    .testimonial-block {
        padding: 1.5rem;
    }

    .stats-row--row,
    .stats-row--grid {
        grid-template-columns: 1fr;
    }

    .image-gallery--grid-3 .image-gallery__grid,
    .image-gallery--grid-4 .image-gallery__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================
   💬 TESTIMONIAL BLOCK - NEW
   ============================================ */

.testimonial-block {
    margin: 0;
    margin-bottom: var(--block-spacing);
    padding: 2rem;
    border-radius: var(--border-radius-xl);
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    will-change: transform;
}

/* Khi nằm trong grid wrapper → margin do wrapper quản lý */
.testimonial-grid-block .testimonial-block {
    margin: 0;
}

.testimonial-block--card {
    background: white;
    border: 1px solid var(--border-color-light);
}

.testimonial-block--glassmorphism {
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
}

.testimonial-block--gradient {
    background: var(--gradient-purple);
    color: white;
}

.testimonial-block--minimal {
    background: transparent;
    border-left: 4px solid var(--premium-primary);
    padding-left: 2rem;
    box-shadow: none;
}

.testimonial-block--bordered {
    background: white;
    border: 2px solid var(--premium-primary);
}

.testimonial-block--highlighted {
    background: var(--gradient-blue);
    color: white;
}

/* ========== NEW: Modern Card Styles ========== */

.testimonial-block--aurora {
    background: var(--card-bg-aurora);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(168, 85, 247, 0.4);
    box-shadow: 0 8px 32px rgba(124, 58, 237, 0.2);
    color: #fff;
}

.testimonial-block--ocean {
    background: var(--card-bg-ocean);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(6, 182, 212, 0.3);
    box-shadow: 0 8px 32px rgba(6, 182, 212, 0.15);
    color: #fff;
}

.testimonial-block--emerald {
    background: var(--card-bg-emerald);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(16, 185, 129, 0.3);
    box-shadow: 0 8px 32px rgba(16, 185, 129, 0.15);
    color: #fff;
}

.testimonial-block--rose {
    background: var(--card-bg-rose);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(244, 63, 94, 0.3);
    box-shadow: 0 8px 32px rgba(244, 63, 94, 0.15);
    color: #fff;
}

.testimonial-block--sunset {
    background: var(--card-bg-sunset);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(249, 115, 22, 0.3);
    box-shadow: 0 8px 32px rgba(249, 115, 22, 0.15);
    color: #fff;
}

.testimonial-block--midnight {
    background: var(--card-bg-midnight);
    border: 1px solid rgba(59, 130, 246, 0.3);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    color: #fff;
}

/* Rating Stars */
.testimonial-rating {
    font-size: var(--font-size-h3);
    line-height: 1;
    margin-bottom: 1rem;
    display: flex;
    gap: 0.25rem;
}

.star {
    display: inline-block;
}

/* Quote Content */
.testimonial-quote {
    font-size: var(--font-size-h5);
    font-style: italic;
    line-height: 1.6;
    margin-bottom: var(--component-margin-bottom-sm);
    position: relative;
    padding-left: 2.5rem;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
}

.quote-mark {
    position: absolute;
    top: -5px;
    left: 0;
    font-size: 3rem;
    font-weight: 700;
    color: var(--premium-primary);
    opacity: 0.2;
    line-height: 1;
    font-family: Georgia, serif;
    font-style: normal;
}

.testimonial-block--gradient .quote-mark,
.testimonial-block--highlighted .quote-mark {
    color: white;
    opacity: 0.3;
}

.testimonial-block--minimal .quote-mark {
    left: -2rem;
}

/* Remove double italic from richtext */
.testimonial-quote p {
    margin: 0.5em 0;
}

.testimonial-quote p:first-child {
    margin-top: 0;
}

.testimonial-quote p:last-child {
    margin-bottom: 0;
}

/* Author Section */
.testimonial-author {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.testimonial-block--gradient .testimonial-author,
.testimonial-block--highlighted .testimonial-author {
    border-top-color: rgba(255, 255, 255, 0.2);
}

.testimonial-block--minimal .testimonial-author {
    border-top: none;
    padding-top: 0;
}

/* Avatar */
.testimonial-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    /* Không border, không padding - chỉ ảnh */
    border: none;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
}

.testimonial-block--gradient .testimonial-avatar,
.testimonial-block--highlighted .testimonial-avatar {
    border: none;
}

.testimonial-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    /* Căn giữa ảnh khi crop */
    display: block;
}

/* Author Info */
.testimonial-info {
    flex: 1;
    min-width: 0;
}

.testimonial-name {
    font-weight: 600;
    margin: 0 0 0.25rem 0;
    font-size: var(--font-size-base);
    line-height: 1.4;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
}

.testimonial-title {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    margin: 0 0 0.25rem 0;
    line-height: 1.4;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
}

.testimonial-block--gradient .testimonial-title,
.testimonial-block--highlighted .testimonial-title {
    color: rgba(255, 255, 255, 0.8);
}

/* Source Citation */
.testimonial-source {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    margin: 0.5rem 0 0 0;
    font-style: italic;
    line-height: 1.4;
}

.testimonial-source a {
    color: var(--premium-primary);
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.testimonial-source a:hover {
    opacity: 0.8;
    text-decoration: underline;
}

.testimonial-block--gradient .testimonial-source,
.testimonial-block--highlighted .testimonial-source {
    color: rgba(255, 255, 255, 0.7);
}

.testimonial-block--gradient .testimonial-source a,
.testimonial-block--highlighted .testimonial-source a {
    color: white;
}

/* Hover Effects */
.testimonial-block:hover {
    transform: translateY(-3px);
    z-index: var(--z-index-hover-card);
    /* Float above siblings — prevent shadow overlap clipping */
}

.testimonial-block--minimal:hover {
    transform: translateY(-1.5px);
    z-index: var(--z-index-hover-card);
}

/* ============================================
   📇 TESTIMONIAL GRID BLOCK — Wrapper + Title
   Pattern giống stats-counter-block
   ============================================ */

.testimonial-grid-block {
    margin: 0;
    margin-bottom: var(--block-spacing);
    overflow: visible;
    /* Cho phép shadow + hover translateY không bị clip */
}

.testimonial-grid-title {
    font-size: var(--font-size-h2);
    font-weight: 700;
    text-align: center;
    margin-bottom: var(--spacing-title-content);
    color: var(--text-primary);
    transition: all var(--transition-slow);
    letter-spacing: -0.01em;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
}

/* RichText trong title - giữ nguyên màu từ editor */
.testimonial-grid-title p {
    margin: 0;
    color: inherit;
}

/* ============================================
   📇 TESTIMONIAL GRID LAYOUT
   Multiple testimonials in responsive grid
   ============================================ */

.testimonial-grid {
    display: grid;
    gap: var(--testimonial-grid-gap);
    /* margin xử lý bởi wrapper .testimonial-grid-block */
}

/* Column configurations */
.testimonial-grid--columns-1 {
    grid-template-columns: 1fr;
}

.testimonial-grid--columns-2 {
    grid-template-columns: repeat(2, 1fr);
}

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

.testimonial-grid--columns-4 {
    grid-template-columns: repeat(4, 1fr);
}

.testimonial-grid--columns-auto {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* Nested testimonial cards in grid don't need extra margin */
.testimonial-grid .testimonial-block {
    margin: 0;
}

/* ============================================
   CAROUSEL MODE: Horizontal Scroll
   Mobile: 1 card per view with scroll
   Tablet: 2 cards visible (grid layout, no scroll)
   Desktop: Full grid as configured
   ============================================ */

/* Mobile: 1 card per view with horizontal scroll (< 640px) */
@media (max-width: 639px) {
    .testimonial-grid[data-carousel="true"] {
        display: flex;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        gap: 1rem;
        /* Padding chứa shadow + translateY hover trong clip region */
        padding-top: 0.5rem;
        padding-bottom: 2.5rem;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    /* Mobile: giảm translateY để phù hợp touch UX */
    .testimonial-grid[data-carousel="true"] .testimonial-block:hover {
        transform: translateY(-2px);
    }

    .testimonial-grid[data-carousel="true"]::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }

    /* 1 card per view - container-relative (safe cho mọi layout) */
    .testimonial-grid[data-carousel="true"] .testimonial-block {
        flex: 0 0 100%;
        scroll-snap-align: center;
        min-width: 0;
        box-sizing: border-box;
    }

    /* Mobile non-carousel: single column vertical (readable) */
    .testimonial-grid--columns-2:not([data-carousel="true"]),
    .testimonial-grid--columns-3:not([data-carousel="true"]),
    .testimonial-grid--columns-4:not([data-carousel="true"]) {
        grid-template-columns: 1fr;
    }

    /* columns-auto: auto-fit minmax(280px) tự wrap 1 cột trên mobile */
}

/* Tablet: 2 cards per view with scroll if more (640px - 1023px) */
@media (min-width: 640px) and (max-width: 1023px) {
    .testimonial-grid[data-carousel="true"] {
        /* 2 cards visible, scroll for more */
        display: flex;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        gap: 1.5rem;
        /* Padding chứa shadow + translateY hover trong clip region */
        padding-top: 0.5rem;
        padding-bottom: 2.5rem;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .testimonial-grid[data-carousel="true"]::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }

    /* Default: 2 cards per view */
    .testimonial-grid[data-carousel="true"] .testimonial-block {
        flex: 0 0 calc(50% - 0.75rem);
        scroll-snap-align: start;
        min-width: 0;
        box-sizing: border-box;
    }

    /* Tablet columns-1: 1 card per view */
    .testimonial-grid[data-carousel="true"].testimonial-grid--columns-1 .testimonial-block {
        flex: 0 0 100%;
        scroll-snap-align: center;
    }

    /* Tablet: khi items ≤ visible columns → grid tĩnh, không scroll */
    .testimonial-grid[data-carousel="true"]:not(.testimonial-grid--carousel-active) {
        display: grid;
        overflow: visible;
        scroll-snap-type: none;
    }

    .testimonial-grid[data-carousel="true"]:not(.testimonial-grid--carousel-active) .testimonial-block {
        flex: none;
        min-width: unset;
        width: auto;
    }

    .testimonial-grid[data-carousel="true"]:not(.testimonial-grid--carousel-active).testimonial-grid--columns-1 {
        grid-template-columns: 1fr;
    }

    .testimonial-grid[data-carousel="true"]:not(.testimonial-grid--carousel-active).testimonial-grid--columns-2,
    .testimonial-grid[data-carousel="true"]:not(.testimonial-grid--carousel-active).testimonial-grid--columns-3,
    .testimonial-grid[data-carousel="true"]:not(.testimonial-grid--carousel-active).testimonial-grid--columns-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .testimonial-grid[data-carousel="true"]:not(.testimonial-grid--carousel-active).testimonial-grid--columns-auto {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }
}

/* Desktop: Always show full grid as configured (>= 1024px) */
@media (min-width: 1024px) {
    .testimonial-grid[data-carousel="true"] {
        /* Override carousel - use grid layout */
        display: grid;
        overflow: visible;
        scroll-snap-type: none;
    }

    .testimonial-grid[data-carousel="true"].testimonial-grid--columns-1 {
        grid-template-columns: 1fr;
    }

    .testimonial-grid[data-carousel="true"].testimonial-grid--columns-2 {
        grid-template-columns: repeat(2, 1fr);
    }

    .testimonial-grid[data-carousel="true"].testimonial-grid--columns-3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .testimonial-grid[data-carousel="true"].testimonial-grid--columns-4 {
        grid-template-columns: repeat(4, 1fr);
    }

    .testimonial-grid[data-carousel="true"].testimonial-grid--columns-auto {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }

    .testimonial-grid[data-carousel="true"] .testimonial-block {
        flex: none;
        min-width: unset;
        max-width: unset;
        width: auto;
    }

    /* Carousel Active: JS adds this class when items > visible columns
       Override grid back to flex scroll for desktop auto-scroll */
    .testimonial-grid[data-carousel="true"].testimonial-grid--carousel-active {
        display: flex !important;
        overflow-x: auto !important;
        overflow-y: hidden;
        scroll-snap-type: x proximity !important;
        -webkit-overflow-scrolling: touch;
        gap: 1.5rem;
        /* Padding chứa shadow (~40px bottom) + translateY (-3px top) trong clip region */
        padding-top: 0.75rem;
        padding-bottom: 2.75rem;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .testimonial-grid--carousel-active::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }

    /* Carousel active: card sizing based on configured columns */
    .testimonial-grid--carousel-active.testimonial-grid--columns-1 .testimonial-block {
        flex: 0 0 100%;
        scroll-snap-align: center;
        min-width: 100%;
    }

    .testimonial-grid--carousel-active.testimonial-grid--columns-2 .testimonial-block {
        flex: 0 0 calc(50% - 0.75rem);
        scroll-snap-align: start;
        min-width: calc(50% - 0.75rem);
    }

    .testimonial-grid--carousel-active.testimonial-grid--columns-3 .testimonial-block {
        flex: 0 0 calc(33.333% - 1rem);
        scroll-snap-align: start;
        min-width: calc(33.333% - 1rem);
    }

    .testimonial-grid--carousel-active.testimonial-grid--columns-4 .testimonial-block {
        flex: 0 0 calc(25% - 1.125rem);
        scroll-snap-align: start;
        min-width: calc(25% - 1.125rem);
    }

    .testimonial-grid--carousel-active.testimonial-grid--columns-auto .testimonial-block {
        flex: 0 0 280px;
        scroll-snap-align: start;
        min-width: 280px;
    }
}

/* Nested stat items in grid don't need extra margin - giống testimonial-grid */
.stats-counter-block .stat-item {
    margin: 0;
}

/* ============================================
   RESPONSIVE: Horizontal Scroll on Mobile
   Better UX - reduces vertical scroll length
   ============================================ */

/* Mobile: Non-carousel grids → single column vertical (đã xử lý phía trên trong Block 1) */
/* Removed duplicate mobile horizontal scroll rule (Bug B9) */
/* Non-carousel mobile responsive đã nằm trong @media (max-width: 639px) phía trên */

/* Tablet: 2 columns max for 3/4-column layout (640px - 1023px) */
@media (min-width: 640px) and (max-width: 1023px) {
    .testimonial-grid--columns-3 {
        grid-template-columns: repeat(2, 1fr);
    }

    .testimonial-grid--columns-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    /* columns-auto: auto-fit tự xử lý responsive — không cần override */
}

/* Desktop: Full grid as configured (>= 1024px) */
@media (min-width: 1024px) {
    /* Grid layout already defined above */
}

/* ============================================
   ACCESSIBILITY: Testimonial — prefers-reduced-motion
   Tắt tất cả animation khi user ưu tiên giảm chuyển động
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    .testimonial-block {
        transition: none !important;
        will-change: auto;
    }

    .testimonial-block:hover {
        transform: none !important;
    }

    .testimonial-grid[data-carousel="true"] {
        scroll-behavior: auto !important;
        scroll-snap-type: none !important;
    }

    .testimonial-grid-title {
        transition: none !important;
    }
}

/* Responsive: testimonial-grid-title mobile */
@media (max-width: 639px) {
    .testimonial-grid-title {
        font-size: 1.5rem;
        margin-bottom: var(--spacing-title-content);
    }

    .testimonial-grid-block {
        margin: 1.5rem 0;
    }
}


/* ============================================
   📊 STATS COUNTER BLOCK
   Pattern giống TestimonialGrid: columns + carousel
   CSS Variables: KHÔNG hard-code font-size, color, border
   Breakpoints: 639px / 640-1023px / 1024px
   ============================================ */

.stats-counter-block {
    margin: 0;
    margin-bottom: var(--block-spacing);
    overflow: visible;
    /* Cho phép shadow */
}

.stats-counter-title {
    font-size: var(--font-size-h1);
    font-weight: 800;
    text-align: center;
    margin-bottom: var(--spacing-title-content);
    color: var(--text-primary);
    transition: all var(--transition-slow);
    letter-spacing: -0.02em;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
}

/* RichText trong title - giữ nguyên màu từ editor */
.stats-counter-title p {
    margin: 0;
    color: inherit;
}

.stats-counter-title [style*="color"] {
    /* Cho phép inline style color từ RichText override */
}

/* Responsive title */
@media (max-width: 639px) {
    .stats-counter-title {
        font-size: 1.75rem;
        margin-bottom: var(--spacing-title-content);
    }
}

/* Wrapper: overflow hidden để ẩn items thừa */
.stats-row-wrapper {
    position: relative;
    overflow: hidden !important;
    /* Force ẩn ô thừa */
    margin: 0;
    padding: 10px 0;
}

/* Stats row: grid layout mặc định, chuyển flex khi carousel-active */
.stats-row {
    display: grid;
    gap: 1.25rem;
    margin: 0;
}

/* Column configurations — giống testimonial-grid */
.stats-row--columns-2 {
    grid-template-columns: repeat(2, 1fr);
}

.stats-row--columns-3 {
    grid-template-columns: repeat(3, 1fr);
}

.stats-row--columns-4 {
    grid-template-columns: repeat(4, 1fr);
}

.stats-row--columns-5 {
    grid-template-columns: repeat(5, 1fr);
}

.stats-row--columns-6 {
    grid-template-columns: repeat(6, 1fr);
}

/* Nested stat items in grid don't need extra margin */
.stats-row .stat-item {
    margin: 0;
}

/* ============================================
   STATS CAROUSEL MODE: Horizontal Scroll
   Pattern giống TestimonialGrid carousel
   Mobile: 2 items | Tablet: min(cols, 3) | Desktop: columns
   ============================================ */

/* Mobile: 2 items per view with horizontal scroll (< 640px) */
@media (max-width: 639px) {
    .stats-row[data-carousel="true"] {
        display: flex;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        gap: 1rem;
        padding-top: 0.5rem;
        padding-bottom: 2.5rem;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .stats-row[data-carousel="true"]::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }

    /* 2 items per view on mobile */
    .stats-row[data-carousel="true"] .stat-item {
        flex: 0 0 calc(50% - 0.5rem);
        scroll-snap-align: start;
        min-width: 0;
        box-sizing: border-box;
    }

    /* Mobile non-carousel: 2 columns */
    .stats-row:not([data-carousel="true"]) {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Tablet: min(cols, 3) per view (640px - 1023px) */
@media (min-width: 640px) and (max-width: 1023px) {
    .stats-row[data-carousel="true"] {
        display: flex;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        gap: 1.25rem;
        padding-top: 0.5rem;
        padding-bottom: 2.5rem;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .stats-row[data-carousel="true"]::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }

    /* Default: 3 items per view on tablet */
    .stats-row[data-carousel="true"] .stat-item {
        flex: 0 0 calc(33.333% - 0.85rem);
        scroll-snap-align: start;
        min-width: 0;
        box-sizing: border-box;
    }

    /* Tablet columns-2: 2 items per view */
    .stats-row[data-carousel="true"].stats-row--columns-2 .stat-item {
        flex: 0 0 calc(50% - 0.625rem);
        scroll-snap-align: start;
    }

    /* Tablet: khi items ≤ visible columns → grid tĩnh, không scroll */
    .stats-row[data-carousel="true"]:not(.stats-row--carousel-active) {
        display: grid;
        overflow: visible;
        scroll-snap-type: none;
    }

    .stats-row[data-carousel="true"]:not(.stats-row--carousel-active) .stat-item {
        flex: none;
        min-width: unset;
        width: auto;
    }

    /* Non-carousel tablet: max 3 columns */
    .stats-row--columns-4:not([data-carousel="true"]),
    .stats-row--columns-5:not([data-carousel="true"]),
    .stats-row--columns-6:not([data-carousel="true"]) {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Carousel-enabled nhưng static (items ≤ perView): cũng cap 3 columns */
    .stats-row[data-carousel="true"]:not(.stats-row--carousel-active).stats-row--columns-4,
    .stats-row[data-carousel="true"]:not(.stats-row--carousel-active).stats-row--columns-5,
    .stats-row[data-carousel="true"]:not(.stats-row--carousel-active).stats-row--columns-6 {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Desktop: grid as configured, carousel-active → flex scroll (>= 1024px) */
@media (min-width: 1024px) {
    .stats-row[data-carousel="true"] {
        display: grid;
        overflow: visible;
        scroll-snap-type: none;
    }

    .stats-row[data-carousel="true"] .stat-item {
        flex: none;
        min-width: unset;
        width: auto;
    }

    /* Carousel Active: JS adds this class when items > visible columns */
    .stats-row[data-carousel="true"].stats-row--carousel-active {
        display: flex !important;
        overflow-x: auto !important;
        overflow-y: hidden;
        scroll-snap-type: x proximity !important;
        -webkit-overflow-scrolling: touch;
        gap: 1.25rem;
        padding-top: 0.5rem;
        padding-bottom: 2.5rem;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .stats-row--carousel-active::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }

    /* Carousel active: card sizing based on configured columns */
    .stats-row--carousel-active.stats-row--columns-2 .stat-item {
        flex: 0 0 calc(50% - 0.625rem);
        scroll-snap-align: start;
        min-width: calc(50% - 0.625rem);
    }

    .stats-row--carousel-active.stats-row--columns-3 .stat-item {
        flex: 0 0 calc(33.333% - 0.85rem);
        scroll-snap-align: start;
        min-width: calc(33.333% - 0.85rem);
    }

    .stats-row--carousel-active.stats-row--columns-4 .stat-item {
        flex: 0 0 calc(25% - 0.94rem);
        scroll-snap-align: start;
        min-width: calc(25% - 0.94rem);
    }

    .stats-row--carousel-active.stats-row--columns-5 .stat-item {
        flex: 0 0 calc(20% - 1rem);
        scroll-snap-align: start;
        min-width: calc(20% - 1rem);
    }

    .stats-row--carousel-active.stats-row--columns-6 .stat-item {
        flex: 0 0 calc(16.667% - 1.04rem);
        scroll-snap-align: start;
        min-width: calc(16.667% - 1.04rem);
    }

    /* Enhanced hover effects on desktop */
    .stat-item:hover {
        transform: translateY(-6px) scale(1.03);
        box-shadow: var(--shadow-glow-purple), 0 12px 24px rgba(0, 0, 0, 0.1);
    }
}

.stat-item {
    /* Base stat item styling */
    text-align: center;
    padding: 2rem 1.5rem;
    background: transparent;
    border: none;
    border-radius: var(--border-radius-xl) !important;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        box-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: auto;
    overflow: hidden;
}

/* Hover effect - subtle */
.stat-item:hover {
    transform: translateY(-2px);
    z-index: var(--z-index-hover-card);
}

.stat-icon {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
    transition: transform var(--transition-slow), filter var(--transition-slow);
    display: inline-block;
    line-height: 1;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.08));
}

.stat-item:hover .stat-icon {
    transform: scale(1.15) translateY(-2px);
    filter: drop-shadow(0 4px 8px rgba(99, 102, 241, 0.2));
}

.stat-number {
    font-size: 3rem;
    font-weight: 800;
    background: var(--gradient-purple);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.5rem;
    transition: all 0.3s ease;
    display: block;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.stat-item:hover .stat-number {
    transform: scale(1.08);
    background: var(--gradient-blue);
    -webkit-background-clip: text;
    background-clip: text;
}

.stat-label {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    transition: transform var(--transition-slow);
    margin-top: 0.25rem;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
}

/* Base hover effect */
.stat-item:hover .stat-label {
    transform: translateY(-1px);
}

/* ============================================
   STAT LABEL COLOR SYNC - Match each style theme
   ============================================ */

/* Card Style - Purple label */
.stat-item--card .stat-label {
    color: #6366f1;
}

/* Glassmorphism Style - Purple label (consistent) */
.stat-item--glassmorphism .stat-label {
    color: var(--premium-primary);
}

/* Gradient Style - White label (dark bg) */
.stat-item--gradient .stat-label {
    color: rgba(255, 255, 255, 0.9);
}

/* Minimal Style - Purple label (consistent) */
.stat-item--minimal .stat-label {
    color: var(--premium-primary);
}

/* Bordered Style - Purple label (consistent) */
.stat-item--bordered .stat-label {
    color: var(--premium-primary);
}

/* Highlighted Style - White label (dark bg) */
.stat-item--highlighted .stat-label {
    color: rgba(255, 255, 255, 0.9);
}

/* 6 combo mới - White label (gradient bg) */
.stat-item--aurora .stat-label,
.stat-item--ocean .stat-label,
.stat-item--emerald .stat-label,
.stat-item--rose .stat-label,
.stat-item--midnight .stat-label {
    color: rgba(255, 255, 255, 0.9);
}

/* Sunset - Dark label (light gradient bg) */
.stat-item--sunset .stat-label {
    color: rgba(120, 53, 15, 0.9);
}

@keyframes statFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes statPulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}

@keyframes statGlow {

    0%,
    100% {
        box-shadow: var(--shadow-md);
    }

    50% {
        box-shadow: var(--shadow-glow-purple);
    }
}

.stat-item--animated {
    animation: statFadeIn 0.6s ease-out;
}

/* Stagger animation cho multiple items */
.stat-item--animated:nth-child(1) {
    animation-delay: 0s;
}

.stat-item--animated:nth-child(2) {
    animation-delay: 0.1s;
}

.stat-item--animated:nth-child(3) {
    animation-delay: 0.2s;
}

.stat-item--animated:nth-child(4) {
    animation-delay: 0.3s;
}

.stat-item--animated:nth-child(5) {
    animation-delay: 0.4s;
}

.stat-item--animated:nth-child(6) {
    animation-delay: 0.5s;
}

/* ============================================
   STAT ITEM STYLE VARIANTS - 6 Styles matching Admin
   Mỗi style có màu card + text tương ứng
   Nền card thay đổi theo style
   ============================================ */

/* Card Style (Default) - Purple theme with WHITE bg */
.stat-item--card {
    background: #ffffff;
    border: 1px solid var(--border-color-light);
    border-radius: var(--border-radius-xl);
    padding: 2rem 1.5rem;
}

.stat-item--card .stat-number {
    background: var(--gradient-purple, linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stat-item--card:hover {
    background: #f9fafb;
    border-color: #6366f1;
    transform: translateY(-2px);
}

/* Glassmorphism Style - White glass effect (consistent with Testimonial) */
.stat-item--glassmorphism {
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius-xl);
    padding: 2rem 1.5rem;
}

.stat-item--glassmorphism .stat-number {
    background: var(--gradient-purple);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stat-item--glassmorphism:hover {
    background: rgba(255, 255, 255, 0.85);
    border-color: var(--premium-primary);
    transform: translateY(-2px);
}

/* Gradient Style - Purple gradient (consistent with Testimonial) */
.stat-item--gradient {
    background: var(--gradient-purple);
    border: none;
    border-radius: var(--border-radius-xl);
    padding: 2rem 1.5rem;
    box-shadow: var(--shadow-glow-purple);
}

.stat-item--gradient .stat-number {
    background: linear-gradient(135deg, #ffffff 0%, rgba(255, 255, 255, 0.95) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stat-item--gradient:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(99, 102, 241, 0.4);
}

/* Minimal Style - Purple border-left (consistent with Testimonial) */
.cms-block.stat-item--minimal,
.stat-item--minimal {
    background: transparent;
    border: none;
    border-left: 4px solid var(--premium-primary);
    border-radius: var(--border-radius-xl) !important;
    padding: 2rem 1.5rem;
    padding-left: 2rem;
    text-align: left;
    align-items: flex-start;
    box-shadow: none;
}

.stat-item--minimal .stat-number {
    background: var(--gradient-purple);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stat-item--minimal:hover {
    background: rgba(99, 102, 241, 0.05);
    border-left-color: var(--premium-secondary);
    transform: translateX(4px);
}

/* Bordered Style - Purple border (consistent with Testimonial) */
.stat-item--bordered {
    background: white;
    border: 2px solid var(--premium-primary);
    border-radius: var(--border-radius-xl);
    padding: 2rem 1.5rem;
}

.stat-item--bordered .stat-number {
    background: var(--gradient-purple);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stat-item--bordered:hover {
    background: rgba(99, 102, 241, 0.05);
    border-color: var(--premium-secondary);
    transform: translateY(-2px);
}

/* Highlighted Style - Blue solid gradient bg */
.stat-item--highlighted {
    background: var(--gradient-blue, linear-gradient(135deg, #3b82f6 0%, #0ea5e9 50%, #06b6d4 100%));
    border: none;
    border-radius: var(--border-radius-xl);
    padding: 2rem 1.5rem;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
}

.stat-item--highlighted .stat-number {
    background: linear-gradient(135deg, #ffffff 0%, rgba(255, 255, 255, 0.95) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stat-item--highlighted:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
}

/* ============================================
   6 COMBO GRADIENT - ĐỒNG BỘ VỚI BANNER
   Aurora, Ocean, Emerald, Rose, Sunset, Midnight
   ============================================ */

/* Aurora Style - Purple-Pink gradient */
.stat-item--aurora {
    background: linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #ec4899 100%);
    border: none;
    border-radius: var(--border-radius-xl);
    padding: 2rem 1.5rem;
    box-shadow: var(--shadow-glow-purple);
    color: #ffffff;
}

.stat-item--aurora .stat-number,
.stat-item--aurora .stat-label,
.stat-item--aurora .stat-icon {
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
}

.stat-item--aurora:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(99, 102, 241, 0.5);
}

/* Ocean Style - Cyan-Teal gradient */
.stat-item--ocean {
    background: var(--gradient-ocean);
    border: none;
    border-radius: var(--border-radius-xl);
    padding: 2rem 1.5rem;
    box-shadow: var(--shadow-glow-ocean);
    color: #ffffff;
}

.stat-item--ocean .stat-number,
.stat-item--ocean .stat-label,
.stat-item--ocean .stat-icon {
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
}

.stat-item--ocean:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(6, 182, 212, 0.5);
}

/* Emerald Style - Green gradient */
.stat-item--emerald {
    background: var(--gradient-emerald);
    border: none;
    border-radius: var(--border-radius-xl);
    padding: 2rem 1.5rem;
    box-shadow: var(--shadow-glow-emerald);
    color: #ffffff;
}

.stat-item--emerald .stat-number,
.stat-item--emerald .stat-label,
.stat-item--emerald .stat-icon {
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
}

.stat-item--emerald:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(16, 185, 129, 0.5);
}

/* Rose Style - Pink-Red gradient */
.stat-item--rose {
    background: var(--gradient-rose);
    border: none;
    border-radius: var(--border-radius-xl);
    padding: 2rem 1.5rem;
    box-shadow: var(--shadow-glow-rose);
    color: #ffffff;
}

.stat-item--rose .stat-number,
.stat-item--rose .stat-label,
.stat-item--rose .stat-icon {
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
}

.stat-item--rose:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(244, 63, 94, 0.5);
}

/* Sunset Style - Orange-Amber gradient (chữ tối để tương phản) */
.stat-item--sunset {
    background: var(--gradient-sunset);
    border: none;
    border-radius: var(--border-radius-xl);
    padding: 2rem 1.5rem;
    box-shadow: var(--shadow-glow-sunset);
    color: #78350f;
}

.stat-item--sunset .stat-number,
.stat-item--sunset .stat-label,
.stat-item--sunset .stat-icon {
    color: #78350f;
    -webkit-text-fill-color: #78350f;
}

.stat-item--sunset:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(249, 115, 22, 0.5);
}

/* Midnight Style - Blue gradient */
.stat-item--midnight {
    background: var(--gradient-midnight);
    border: none;
    border-radius: var(--border-radius-xl);
    padding: 2rem 1.5rem;
    box-shadow: var(--shadow-glow-midnight);
    color: #ffffff;
}

.stat-item--midnight .stat-number,
.stat-item--midnight .stat-label,
.stat-item--midnight .stat-icon {
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
}

.stat-item--midnight:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(59, 130, 246, 0.5);
}

/* ============================================
   STATS COUNTER BLOCK STYLE VARIANTS
   Container-level - ALL transparent (no background)
   ============================================ */

.stats-counter-block--gradient,
.stats-counter-block--glassmorphism,
.stats-counter-block--highlighted,
.stats-counter-block--card,
.stats-counter-block--minimal,
.stats-counter-block--bordered,
.stats-counter-block--aurora,
.stats-counter-block--ocean,
.stats-counter-block--emerald,
.stats-counter-block--rose,
.stats-counter-block--sunset,
.stats-counter-block--midnight {
    background: transparent;
    padding: 0;
    border: none;
    border-radius: 0;
}

/* Legacy variants - keep for backwards compatibility */
.stat-item--primary {
    background: var(--gradient-purple) !important;
    color: white;
    border: none !important;
}

.stat-item--primary .stat-number {
    background: linear-gradient(135deg, #ffffff 0%, rgba(255, 255, 255, 0.9) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stat-item--primary .stat-label {
    color: rgba(255, 255, 255, 0.9);
}

.stat-item--primary:hover {
    box-shadow: var(--shadow-glow-purple);
}

.stat-item--blue {
    background: var(--gradient-blue) !important;
    color: white;
    border: none !important;
}

.stat-item--blue .stat-number {
    background: linear-gradient(135deg, #ffffff 0%, rgba(255, 255, 255, 0.9) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stat-item--blue .stat-label {
    color: rgba(255, 255, 255, 0.9);
}

.stat-item--blue:hover {
    box-shadow: var(--shadow-glow-blue);
}

.stat-item--green {
    background: var(--gradient-green) !important;
    color: white;
    border: none !important;
}

.stat-item--green .stat-number {
    background: linear-gradient(135deg, #ffffff 0%, rgba(255, 255, 255, 0.9) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stat-item--green .stat-label {
    color: rgba(255, 255, 255, 0.9);
}

.stat-item--green:hover {
    box-shadow: 0 8px 25px rgba(16, 185, 129, 0.35);
}

.stat-item--glass {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border) !important;
    box-shadow: var(--glass-shadow);
}

.stat-item--glass:hover {
    background: rgba(255, 255, 255, 0.85) !important;
    box-shadow: 0 12px 32px rgba(31, 38, 135, 0.2);
}

/* ============================================
   RESPONSIVE: Stats Counter - Pattern giống Testimonial Grid
   Breakpoints: 639px / 640-1023px / 1024px (CHUẨN)
   ============================================ */

/* Mobile (< 640px): xem phần Mobile ở trên trong STATS CAROUSEL MODE */

/* ============================================
   ACCESSIBILITY: Stats Counter — prefers-reduced-motion
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    .stat-item {
        transition: none !important;
    }

    .stat-item:hover {
        transform: none !important;
    }

    .stat-item--animated {
        animation: none !important;
    }

    .stats-row[data-carousel="true"] {
        scroll-behavior: auto !important;
        scroll-snap-type: none !important;
    }
}

/* ============================================
   💰 PRICING TABLE BLOCK - NEW
   ============================================ */

/* Pricing Table Block - Loại bỏ khung bao và đảm bảo hover không bị che */
.cms-block.pricing-table-block,
.cms-block.pricing-table-block:hover {
    padding: 0 !important;
    margin: 0 !important;
    margin-bottom: var(--block-spacing) !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: none !important;
    background-color: transparent !important;
    overflow: visible !important;
}

.pricing-table-block {
    margin: 0;
    margin-bottom: var(--block-spacing);
    /* Removed padding - cards have their own styling */
    /* Đảm bảo không có overflow che mất phần hover */
    overflow: visible;
    /* Thêm padding-top để tránh border che mất phần hover */
    padding-top: 0.5rem;
    /* Font hỗ trợ tiếng Việt cho toàn bộ block (tab, tên gói, nút "Đăng ký", v.v.) */
    font-family: var(--font-family-primary);
}

.pricing-header {
    text-align: center;
    margin-bottom: var(--component-margin-bottom-lg);
}

/* Giảm khoảng cách khi indicator đang hiển thị (carousel active) */
.pricing-table-block:has(.pricing-carousel-indicators--visible) .pricing-header {
    margin-bottom: 1rem;
}

.pricing-title {
    font-size: var(--font-size-h1);
    font-weight: 700;
    margin-bottom: 1rem;
    overflow-wrap: break-word;
    word-break: break-word;
}

.pricing-subtitle {
    font-size: var(--font-size-h5);
    color: var(--text-secondary);
    overflow-wrap: break-word;
    word-break: break-word;
}

.pricing-plans {
    display: grid;
    gap: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
    /* Đảm bảo có đủ space cho hover transform và badge */
    padding-top: 2.5rem;
    padding-bottom: 1.5rem;
    overflow: visible;
    margin-top: 0;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;

    /* CSS Variables cho carousel gap tính toán (DRY) */
    --pricing-gap-2col: 0.75rem;
    --pricing-gap-3col: 1rem;
    --pricing-gap-4col: 1.125rem;
    --pricing-gap-5col: 1.25rem;
    --pricing-gap-6col: 1.375rem;
}

/* ============================================
   GRID LAYOUT — Base grid theo count/columns
   Giống testimonial: grid tĩnh mặc định, hiện hết cards
   ============================================ */

/* Count-based grid (auto columns khi columns=auto) */
.pricing-plans--count-2 {
    grid-template-columns: repeat(2, 1fr);
}

.pricing-plans--count-3 {
    grid-template-columns: repeat(3, 1fr);
}

.pricing-plans--count-4 {
    grid-template-columns: repeat(4, 1fr);
}

.pricing-plans--count-5 {
    grid-template-columns: repeat(5, 1fr);
}

.pricing-plans--count-6 {
    grid-template-columns: repeat(6, 1fr);
}

/* Fallback count > 6: auto-fit */
.pricing-plans:not(.pricing-plans--count-2):not(.pricing-plans--count-3):not(.pricing-plans--count-4):not(.pricing-plans--count-5):not(.pricing-plans--count-6) {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* Mở rộng max-width cho 5-6 cột */
.pricing-plans--count-5,
.pricing-plans--columns-5 {
    max-width: 1400px;
}

.pricing-plans--count-6,
.pricing-plans--columns-6 {
    max-width: 1600px;
}

/* Columns-based grid (user config, đặt SAU count để override) */
.pricing-plans--columns-1 {
    grid-template-columns: 1fr;
}

.pricing-plans--columns-2 {
    grid-template-columns: repeat(2, 1fr);
}

.pricing-plans--columns-3 {
    grid-template-columns: repeat(3, 1fr);
}

.pricing-plans--columns-4 {
    grid-template-columns: repeat(4, 1fr);
}

.pricing-plans--columns-5 {
    grid-template-columns: repeat(5, 1fr);
}

.pricing-plans--columns-6 {
    grid-template-columns: repeat(6, 1fr);
}

/* ============================================
   RESPONSIVE GRID (non-carousel mode)
   Mobile: 1 cột, Tablet: max 2 cột, Desktop: theo count/columns
   Giống testimonial grid responsive
   ============================================ */
@media (max-width: 639px) {

    .pricing-plans--count-2:not([data-carousel="true"]),
    .pricing-plans--count-3:not([data-carousel="true"]),
    .pricing-plans--count-4:not([data-carousel="true"]),
    .pricing-plans--count-5:not([data-carousel="true"]),
    .pricing-plans--count-6:not([data-carousel="true"]) {
        grid-template-columns: 1fr;
    }

    /* Fallback count > 6 */
    .pricing-plans:not([data-carousel="true"]) {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 640px) and (max-width: 1023px) {

    .pricing-plans--count-3:not([data-carousel="true"]),
    .pricing-plans--count-4:not([data-carousel="true"]),
    .pricing-plans--count-5:not([data-carousel="true"]),
    .pricing-plans--count-6:not([data-carousel="true"]) {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile: responsive padding + typography giảm cho pricing card */
@media (max-width: 639px) {
    .pricing-plan {
        padding: 1.5rem;
    }

    .pricing-plan__name {
        font-size: var(--font-size-h4);
    }
}

/* ============================================
   PRICING CAROUSEL MODE
   Theo chuẩn Testimonial Grid: columns-based + carousel-active toggle
   ============================================ */

/* Carousel indicators - dots nhỏ gọn căn giữa */
/* Default ẩn: tránh khoảng trống khi grid tĩnh. JS thêm --visible khi carousel active */
.pricing-carousel-indicators {
    display: none;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: -0.5rem;
    padding: 0rem;
}

/* Chỉ hiện khi JS xác nhận carousel đang active và có overflow */
.pricing-carousel-indicators--visible {
    display: flex;
}

.pricing-carousel-indicators .indicator-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--bg-muted);
    transition: all var(--transition-slow) ease;
    cursor: pointer;
    border: 1px solid transparent;
}

.pricing-carousel-indicators .indicator-dot.active {
    width: 32px;
    border-radius: 4px;
    background: var(--premium-primary);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
}

.pricing-carousel-indicators .indicator-dot:hover {
    background: var(--text-muted);
    transform: scale(1.2);
}

.pricing-carousel-indicators .indicator-dot.active:hover {
    background: var(--premium-primary);
    transform: scale(1.05);
}

/* Ẩn indicators trên màn hình lớn khi không bật carousel */
.pricing-carousel-indicators:empty {
    display: none;
}

/* Responsive: Ẩn/hiện indicators dựa trên breakpoint và số plans */
/* Logic sẽ được xử lý bởi JS để chính xác hơn */
/* Mobile (< 640px): Luôn hiển thị khi có carousel (count > 1) */
/* Tablet (640-1023px): Chỉ hiển thị khi count > 2 */
/* Desktop (>= 1024px): Chỉ hiển thị khi count > 3 */

.pricing-plans[data-carousel="true"] {
    position: relative;
}

/* Mobile: 1 card per view with horizontal scroll (< 640px) */
@media (max-width: 639px) {
    .pricing-plans[data-carousel="true"] {
        display: flex;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        gap: 1rem;
        padding-top: 1.5rem;
        padding-bottom: 2.5rem;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .pricing-plans[data-carousel="true"]::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }

    /* Mobile: giảm hover transform cho touch UX */
    .pricing-plans[data-carousel="true"] .pricing-plan:hover {
        transform: translateY(-2px);
    }

    /* 1 card per view */
    .pricing-plans[data-carousel="true"] .pricing-plan {
        flex: 0 0 100%;
        scroll-snap-align: center;
        min-width: 0;
        box-sizing: border-box;
    }
}

/* Tablet: 2 cards per view with scroll (640px - 1023px) */
@media (min-width: 640px) and (max-width: 1023px) {
    .pricing-plans[data-carousel="true"] {
        display: flex;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        gap: 1.5rem;
        padding-top: 1.5rem;
        padding-bottom: 2.5rem;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .pricing-plans[data-carousel="true"]::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }

    /* Default: 2 cards per view */
    .pricing-plans[data-carousel="true"] .pricing-plan {
        flex: 0 0 calc(50% - 0.75rem);
        scroll-snap-align: start;
        min-width: 0;
        box-sizing: border-box;
    }

    /* Tablet columns-1: 1 card per view */
    .pricing-plans[data-carousel="true"].pricing-plans--columns-1 .pricing-plan {
        flex: 0 0 100%;
        scroll-snap-align: center;
    }

    /* Tablet: khi items ≤ visible columns → grid tĩnh, không scroll */
    .pricing-plans[data-carousel="true"]:not(.pricing-plans--carousel-active) {
        display: grid;
        overflow: visible;
        scroll-snap-type: none;
    }

    .pricing-plans[data-carousel="true"]:not(.pricing-plans--carousel-active) .pricing-plan {
        flex: none;
        min-width: unset;
        width: auto;
    }

    .pricing-plans[data-carousel="true"]:not(.pricing-plans--carousel-active).pricing-plans--columns-1 {
        grid-template-columns: 1fr;
    }

    .pricing-plans[data-carousel="true"]:not(.pricing-plans--carousel-active).pricing-plans--columns-2,
    .pricing-plans[data-carousel="true"]:not(.pricing-plans--carousel-active).pricing-plans--columns-3,
    .pricing-plans[data-carousel="true"]:not(.pricing-plans--carousel-active).pricing-plans--columns-4,
    .pricing-plans[data-carousel="true"]:not(.pricing-plans--carousel-active).pricing-plans--columns-5,
    .pricing-plans[data-carousel="true"]:not(.pricing-plans--carousel-active).pricing-plans--columns-6 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Desktop: Grid tĩnh hiện hết, carousel-active → flex scroll (>= 1024px) */
@media (min-width: 1024px) {

    /* Mặc định: grid tĩnh hiện hết cards */
    .pricing-plans[data-carousel="true"] {
        display: grid;
        overflow: visible;
        scroll-snap-type: none;
    }

    .pricing-plans[data-carousel="true"].pricing-plans--columns-1 {
        grid-template-columns: 1fr;
    }

    .pricing-plans[data-carousel="true"].pricing-plans--columns-2 {
        grid-template-columns: repeat(2, 1fr);
    }

    .pricing-plans[data-carousel="true"].pricing-plans--columns-3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .pricing-plans[data-carousel="true"].pricing-plans--columns-4 {
        grid-template-columns: repeat(4, 1fr);
    }

    .pricing-plans[data-carousel="true"].pricing-plans--columns-5 {
        grid-template-columns: repeat(5, 1fr);
    }

    .pricing-plans[data-carousel="true"].pricing-plans--columns-6 {
        grid-template-columns: repeat(6, 1fr);
    }

    .pricing-plans[data-carousel="true"] .pricing-plan {
        flex: none;
        min-width: 0;
        max-width: 100%;
        width: auto;
    }

    /* Carousel Active: JS thêm class khi items > visible columns
       Override grid → flex scroll cho desktop auto-scroll */
    .pricing-plans[data-carousel="true"].pricing-plans--carousel-active {
        display: flex !important;
        overflow-x: auto !important;
        overflow-y: hidden;
        scroll-snap-type: x proximity !important;
        -webkit-overflow-scrolling: touch;
        gap: 1.5rem;
        padding-top: 1.5rem;
        padding-bottom: 2.75rem;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .pricing-plans--carousel-active::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }

    /* Carousel active: count-based sizing (auto columns fallback) */
    .pricing-plans--carousel-active.pricing-plans--count-2 .pricing-plan {
        flex: 0 0 calc(50% - var(--pricing-gap-2col));
        scroll-snap-align: start;
        min-width: calc(50% - var(--pricing-gap-2col));
    }

    .pricing-plans--carousel-active.pricing-plans--count-3 .pricing-plan {
        flex: 0 0 calc(33.333% - var(--pricing-gap-3col));
        scroll-snap-align: start;
        min-width: calc(33.333% - var(--pricing-gap-3col));
    }

    .pricing-plans--carousel-active.pricing-plans--count-4 .pricing-plan {
        flex: 0 0 calc(25% - var(--pricing-gap-4col));
        scroll-snap-align: start;
        min-width: calc(25% - var(--pricing-gap-4col));
    }

    .pricing-plans--carousel-active.pricing-plans--count-5 .pricing-plan {
        flex: 0 0 calc(20% - var(--pricing-gap-5col));
        scroll-snap-align: start;
        min-width: calc(20% - var(--pricing-gap-5col));
    }

    .pricing-plans--carousel-active.pricing-plans--count-6 .pricing-plan {
        flex: 0 0 calc(16.666% - var(--pricing-gap-6col));
        scroll-snap-align: start;
        min-width: calc(16.666% - var(--pricing-gap-6col));
    }

    /* Carousel active: columns-based sizing (user config, overrides count) */
    .pricing-plans--carousel-active.pricing-plans--columns-1 .pricing-plan {
        flex: 0 0 100%;
        scroll-snap-align: center;
        min-width: 100%;
    }

    .pricing-plans--carousel-active.pricing-plans--columns-2 .pricing-plan {
        flex: 0 0 calc(50% - var(--pricing-gap-2col));
        scroll-snap-align: start;
        min-width: calc(50% - var(--pricing-gap-2col));
    }

    .pricing-plans--carousel-active.pricing-plans--columns-3 .pricing-plan {
        flex: 0 0 calc(33.333% - var(--pricing-gap-3col));
        scroll-snap-align: start;
        min-width: calc(33.333% - var(--pricing-gap-3col));
    }

    .pricing-plans--carousel-active.pricing-plans--columns-4 .pricing-plan {
        flex: 0 0 calc(25% - var(--pricing-gap-4col));
        scroll-snap-align: start;
        min-width: calc(25% - var(--pricing-gap-4col));
    }

    .pricing-plans--carousel-active.pricing-plans--columns-5 .pricing-plan {
        flex: 0 0 calc(20% - var(--pricing-gap-5col));
        scroll-snap-align: start;
        min-width: calc(20% - var(--pricing-gap-5col));
    }

    .pricing-plans--carousel-active.pricing-plans--columns-6 .pricing-plan {
        flex: 0 0 calc(16.666% - var(--pricing-gap-6col));
        scroll-snap-align: start;
        min-width: calc(16.666% - var(--pricing-gap-6col));
    }
}

/* Accessibility: tắt animation khi user chọn reduced motion */
/* (Merged vào block ♿ ACCESSIBILITY phía dưới) */

.pricing-plan {
    background: transparent;
    border: 1px solid var(--border-color-light);
    border-radius: var(--border-radius-xl);
    padding: 2rem;
    text-align: center;
    transition: transform var(--transition-slow) ease,
        box-shadow var(--transition-slow) ease;
    position: relative;
    /* overflow: visible cho badge (top: -12px) và hover transform */
    overflow: visible;
    min-height: auto;
    height: auto;
    /* Ngăn card bị tràn ra ngoài grid column */
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    /* Flexbox column: đảm bảo button luôn ở cuối card, dù content height khác nhau */
    display: flex;
    flex-direction: column;
}

.pricing-plan:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-lg);
    z-index: var(--z-index-hover-card);
    /* Đảm bảo hover effect hoạt động */
}

.pricing-plan--popular {
    border-color: var(--premium-primary);
    transform: scale(1.05);
    box-shadow: var(--shadow-md);
    z-index: var(--z-index-row-priority);
    /* Đảm bảo popular card không bị che */
}

.pricing-plan--popular:hover {
    transform: translateY(-10px) scale(1.05);
}

/* Carousel mode: giảm hover transform vì overflow-y: hidden */
.pricing-plans[data-carousel="true"] .pricing-plan:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.pricing-badge {
    position: absolute;
    top: -12px;
    right: 20px;
    background: var(--gradient-badge);
    color: white;
    padding: 0.25rem 1rem;
    border-radius: var(--border-radius-full);
    font-size: var(--font-size-xs);
    font-weight: 700;
    text-transform: uppercase;
    z-index: var(--z-index-badge);
    /* Đảm bảo badge luôn hiển thị trên cùng */
}

/* Carousel mode: badge + popular nằm trong padding region */
.pricing-plans[data-carousel="true"] .pricing-plan {
    padding-top: 2.75rem;
}

.pricing-plans[data-carousel="true"] .pricing-badge {
    top: 0.75rem;
}

.pricing-plans[data-carousel="true"] .pricing-plan--popular {
    transform: none;
    box-shadow: var(--shadow-md);
}

.pricing-plans[data-carousel="true"] .pricing-plan--popular:hover {
    transform: translateY(-2px);
}

/* Header & Footer containers - ngăn text tràn ra ngoài card */
.pricing-plan__header {
    overflow: hidden;
    max-width: 100%;
}

.pricing-plan__footer {
    overflow: hidden;
    max-width: 100%;
    /* Đẩy button xuống cuối card - đảm bảo đồng đều giữa các card */
    margin-top: auto;
}

.pricing-plan__name {
    font-size: var(--font-size-h3);
    font-weight: 700;
    margin-bottom: 0.25rem;
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
}

.pricing-plan__description {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    margin-bottom: 1rem;
    overflow-wrap: break-word;
    word-break: break-word;
}

.pricing-plan__price {
    margin: 1.5rem 0;
    overflow-wrap: break-word;
    word-break: break-word;
}

.price-amount {
    font-size: var(--font-size-display-md);
    font-weight: 700;
    color: var(--premium-primary);
    overflow-wrap: break-word;
    word-break: break-word;
}

.price-period {
    color: var(--text-secondary);
    font-size: var(--font-size-base);
}

.pricing-features {
    list-style: none;
    padding: 0;
    margin: 0;
    margin-bottom: var(--block-spacing);
    text-align: left;
}

.pricing-feature {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border-color-light);
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    /* Đảm bảo nội dung không bị cắt */
    min-height: auto;
}

.feature-icon {
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.feature-text {
    flex: 1;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
    /* Đảm bảo text hiển thị đầy đủ, không bị cắt */
    line-height: 1.5;
}

.pricing-feature:last-child {
    border-bottom: none;
}

.pricing-feature--excluded {
    opacity: 0.5;
}

.pricing-button {
    display: block;
    width: 100%;
    padding: 0.75rem;
    background: var(--premium-primary);
    color: white;
    border-radius: var(--border-radius-md);
    font-weight: 600;
    text-decoration: none;
    transition: all var(--transition-slow) ease;
    /* Đảm bảo font hỗ trợ tiếng Việt (Đ, ă, ư, ý) - tránh hiển thị fffff... */
    font-family: var(--font-family-primary);
    /* Ngăn text dài tràn ra ngoài button */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-sizing: border-box;
    max-width: 100%;
    text-align: center;
}

.pricing-button:hover {
    background: var(--premium-secondary);
    transform: scale(1.05);
}

.pricing-button--popular {
    background: var(--gradient-purple);
}

.pricing-button--disabled {
    cursor: not-allowed;
    pointer-events: none;
    /* Dùng gradient purple như button trong cart */
    background: var(--gradient-purple);
    color: white;
}

.pricing-button--disabled:hover {
    background: var(--gradient-purple);
    transform: none;
}

/* Pricing Tabs */
.pricing-tabs {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.pricing-tab {
    padding: 0.75rem 1.5rem;
    background: var(--bg-tertiary);
    border: 2px solid transparent;
    border-radius: var(--border-radius-md);
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-slow) ease;
    font-size: var(--font-size-base);
}

.pricing-tab:hover {
    background: var(--border-color-light);
    color: var(--text-primary);
}

.pricing-tab--active {
    background: var(--premium-primary);
    color: white;
    border-color: var(--premium-primary);
}

.pricing-tab--active:hover {
    background: var(--premium-secondary);
    border-color: var(--premium-secondary);
}

/* Pricing Plans Wrapper - cho tabs mode */
.pricing-plans-wrapper {
    position: relative;
    max-width: 100%;
}

/* Tab content container - ẩn/hiện toàn bộ tab */
.pricing-tab-content {
    display: none;
}

.pricing-tab-content--active {
    display: block;
}

/* Plans container trong tab - luôn hiển thị khi tab content active */
.pricing-plans--tab {
    display: grid;
    min-width: 0;
}

.pricing-tab-content:not(.pricing-tab-content--active) .pricing-plans--tab {
    display: none;
}

/* Indicator chỉ hiển thị trong tab content active */
.pricing-tab-content:not(.pricing-tab-content--active) .pricing-carousel-indicators {
    display: none !important;
}

/* Animation khi switch tab */
.pricing-tab-content--active {
    animation: fadeIn var(--transition-slow) ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Pricing Empty State */
.pricing-empty {
    text-align: center;
    padding: 2rem;
    color: var(--text-secondary);
}

/* ============================================
   ♿ ACCESSIBILITY: Pricing Reduced Motion
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    .pricing-plan {
        transition: none !important;
    }

    .pricing-plan:hover {
        transform: none !important;
    }

    .pricing-plan--popular:hover {
        transform: none !important;
    }

    .pricing-tab-content--active {
        animation: none !important;
    }

    .pricing-button:hover {
        transform: none !important;
    }

    .pricing-plans[data-carousel="true"] {
        scroll-behavior: auto !important;
        scroll-snap-type: none !important;
    }

    .pricing-carousel-indicators .indicator-dot {
        transition: none !important;
    }

    .pricing-tab {
        transition: none !important;
    }
}

/* ============================================
   🖼️ IMAGE GALLERY BLOCK - NEW
   ============================================ */

.image-gallery-block {
    margin: 0;
    margin-bottom: var(--block-spacing);
}

.image-gallery__grid {
    display: grid;
}

.image-gallery--grid-2 .image-gallery__grid {
    grid-template-columns: repeat(2, 1fr);
}

.image-gallery--grid-3 .image-gallery__grid {
    grid-template-columns: repeat(3, 1fr);
}

.image-gallery--grid-4 .image-gallery__grid {
    grid-template-columns: repeat(4, 1fr);
}

.image-gallery--masonry .image-gallery__grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

.image-gallery--gap-sm .image-gallery__grid {
    gap: 0.5rem;
}

.image-gallery--gap-md .image-gallery__grid {
    gap: 1rem;
}

.image-gallery--gap-lg .image-gallery__grid {
    gap: 2rem;
}

.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 0.75rem;
}

.image-gallery--ratio-1\:1 .gallery-item {
    aspect-ratio: 1 / 1;
}

.image-gallery--ratio-4\:3 .gallery-item {
    aspect-ratio: 4 / 3;
}

.image-gallery--ratio-16\:9 .gallery-item {
    aspect-ratio: 16 / 9;
}

.image-gallery--ratio-3\:4 .gallery-item {
    aspect-ratio: 3 / 4;
}

.gallery-image-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

.gallery-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.image-gallery--hover-zoom .gallery-item:hover .gallery-image {
    transform: scale(1.1);
}

.image-gallery--hover-lift .gallery-item:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
}

.gallery-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

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

.gallery-icon {
    color: white;
    font-size: 2rem;
}

.gallery-caption-overlay {
    color: white;
    padding: 1rem;
    text-align: center;
}

.gallery-caption {
    text-align: center;
    margin-top: 0.5rem;
    color: #6b7280;
    font-size: 0.875rem;
}

.gallery-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

/* ============================================
   📋 ACCORDION BLOCK - Phase 2
   ============================================ */

.accordion-block {
    margin: 0;
    margin-bottom: var(--block-spacing);
    /* Reset outer frame from .cms-block inheritance */
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
    background: transparent !important;
    border-radius: 0 !important;
}

.accordion-block:hover {
    box-shadow: none !important;
}

.accordion-heading {
    font-size: var(--font-size-h3);
    /* Mobile-first: 1.25rem */
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--spacing-tablet);
    text-align: center;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
}

/* Alignment cho accordion heading */
.accordion-heading--left {
    text-align: left;
}

.accordion-heading--center {
    text-align: center;
}

.accordion-heading--right {
    text-align: right;
}

.accordion-items {
    max-width: 900px;
    margin: 0 auto;
    width: 100%;
}

.accordion-item {
    margin-bottom: var(--spacing-mobile);
    border-radius: var(--border-radius-md);
    overflow: hidden;
    transition: all var(--transition-slow);
}

/* Accordion Styles */
.accordion-block--default .accordion-item {
    background: white;
    border: 1px solid #e5e7eb;
}

.accordion-block--bordered .accordion-item {
    background: white;
    border: 2px solid var(--premium-primary);
}

.accordion-block--minimal .accordion-item {
    background: transparent;
    border-bottom: 1px solid #e5e7eb;
    border-radius: 0;
}

.accordion-block--card .accordion-item {
    background: white;
    box-shadow: var(--shadow-md);
    border: none;
}

/* Glassmorphism Style - White glass effect (consistent with Testimonial/Stats) */
.accordion-block--glassmorphism .accordion-item {
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
}

/* Gradient Style - Purple gradient (consistent with Testimonial/Stats) */
.accordion-block--gradient .accordion-item {
    background: var(--gradient-purple);
    border: none;
}

.accordion-block--gradient .accordion-title {
    color: white;
}

.accordion-block--gradient .accordion-content-inner {
    color: rgba(255, 255, 255, 0.9);
}

.accordion-block--gradient .accordion-icon {
    color: white;
}

.accordion-block--gradient .accordion-header:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* Highlighted Style - Blue gradient (consistent with Testimonial/Stats) */
.accordion-block--highlighted .accordion-item {
    background: var(--gradient-blue);
    border: none;
}

.accordion-block--highlighted .accordion-title {
    color: white;
}

.accordion-block--highlighted .accordion-content-inner {
    color: rgba(255, 255, 255, 0.9);
}

.accordion-block--highlighted .accordion-icon {
    color: white;
}

.accordion-block--highlighted .accordion-header:hover {
    background: rgba(255, 255, 255, 0.1);
}

.accordion-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-tablet);
    padding: var(--spacing-tablet);
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: all var(--transition-slow);
    min-height: var(--touch-target-min);
    /* Touch target >= 44px */
    min-width: 0;
    /* Allow header to shrink so title can wrap on mobile */
}

.accordion-header:hover {
    background: rgba(99, 102, 241, 0.05);
}

.accordion-title {
    font-size: var(--font-size-base);
    /* Mobile-first: 1rem */
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    min-width: 0;
    flex: 1 1 auto;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
}

.accordion-icon {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    color: var(--premium-primary);
    transition: transform 0.3s ease;
}

.accordion-icon svg {
    transition: transform 0.3s ease;
}

.accordion-icon-open {
    display: none;
}

.accordion-item--open .accordion-icon-closed {
    display: none;
}

.accordion-item--open .accordion-icon-open {
    display: block;
}

.accordion-item--open .accordion-icon {
    transform: rotate(180deg);
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.accordion-item--open .accordion-content {
    max-height: 1000px;
}

.accordion-content-inner {
    padding: 0 var(--spacing-tablet) var(--spacing-tablet) var(--spacing-tablet);
    color: var(--text-secondary);
    line-height: var(--line-height-relaxed);
}

/* ============================================
   ⏱️ TIMELINE BLOCK - Phase 2
   ============================================ */

/* Timeline Block - Loại bỏ hoàn toàn khung bao của cms-block */
/* Override tất cả styling từ .cms-block để hiển thị trực tiếp trên base */
.cms-block.timeline-block,
.cms-block.timeline-block:hover {
    padding: 0 !important;
    margin: 0 !important;
    margin-bottom: var(--block-spacing) !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: none !important;
    background-color: transparent !important;
}

.timeline-heading {
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    margin-bottom: var(--component-margin-bottom-lg);
    text-align: center;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

/* Alignment cho timeline heading - class được đặt trực tiếp trên button */
/* Căn trái: text và icon ở bên trái, icon luôn ở bên phải text */
.timeline-heading-toggle.timeline-heading--left {
    justify-content: flex-start;
}

.timeline-heading-toggle.timeline-heading--left .timeline-heading-text {
    text-align: left;
    flex: 0 1 auto;
}

/* Căn giữa: text và icon ở giữa */
.timeline-heading-toggle.timeline-heading--center {
    justify-content: center;
}

.timeline-heading-toggle.timeline-heading--center .timeline-heading-text {
    text-align: center;
    flex: 0 1 auto;
}

/* Căn phải: text và icon ở bên phải, icon luôn ở bên phải text */
.timeline-heading-toggle.timeline-heading--right {
    justify-content: flex-end;
}

.timeline-heading-toggle.timeline-heading--right .timeline-heading-text {
    text-align: right;
    flex: 0 1 auto;
}

.timeline-heading-toggle {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.timeline-heading-toggle:hover {
    opacity: 0.8;
}

.timeline-heading-text {
    flex: 1;
    min-width: 0;
    text-align: inherit;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
}

.timeline-heading-icon {
    display: flex;
    align-items: center;
    color: var(--premium-primary);
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.timeline-heading-icon .timeline-heading-icon-open {
    display: none;
}

.timeline-heading-icon .timeline-heading-icon-closed {
    display: block;
}

.timeline-block--open .timeline-heading-icon .timeline-heading-icon-closed {
    display: block;
}

.timeline-block--open .timeline-heading-icon .timeline-heading-icon-open {
    display: none;
}

.timeline-block:not(.timeline-block--open) .timeline-heading-icon .timeline-heading-icon-closed {
    display: none;
}

.timeline-block:not(.timeline-block--open) .timeline-heading-icon .timeline-heading-icon-open {
    display: block;
}

.timeline-container {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
    max-height: 10000px;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.timeline-block:not(.timeline-block--open) .timeline-container {
    max-height: 0;
    margin-bottom: 0;
}

/* Vertical Timeline */
.timeline-block--vertical .timeline-line {
    position: absolute;
    left: 30px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, var(--premium-primary), var(--premium-accent));
}

.timeline-block--vertical .timeline-item {
    display: flex;
    gap: 2rem;
    margin-bottom: var(--component-margin-bottom-lg);
    padding-left: 80px;
}

.timeline-block--vertical .timeline-marker {
    position: absolute;
    left: 0;
}

/* Alternating Timeline */
.timeline-block--alternating .timeline-line {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, var(--premium-primary), var(--premium-accent));
    z-index: 0;
}

.timeline-block--alternating .timeline-item {
    display: grid;
    grid-template-columns: 1fr 60px 1fr;
    gap: 1.5rem;
    margin-bottom: var(--component-margin-bottom-lg);
    position: relative;
    align-items: start;
}

.timeline-block--alternating .timeline-item:nth-child(odd) .timeline-content {
    grid-column: 1;
    grid-row: 1;
    text-align: right;
}

.timeline-block--alternating .timeline-item:nth-child(odd) .timeline-marker {
    grid-column: 2;
    grid-row: 1;
}

.timeline-block--alternating .timeline-item:nth-child(even) .timeline-content {
    grid-column: 3;
    grid-row: 1;
    text-align: left;
}

.timeline-block--alternating .timeline-item:nth-child(even) .timeline-marker {
    grid-column: 2;
    grid-row: 1;
}

.timeline-block--alternating .timeline-marker {
    position: relative;
    left: auto;
    transform: none;
    justify-self: center;
}

/* Horizontal Timeline */
.timeline-block--horizontal .timeline-container {
    display: flex;
    overflow-x: auto;
    gap: 2rem;
    padding: 2rem 0;
}

.timeline-block--horizontal .timeline-line {
    display: none;
}

.timeline-block--horizontal .timeline-item {
    min-width: 300px;
    flex-shrink: 0;
}

/* Timeline Components */
.timeline-marker {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--gradient-purple);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-glow-purple);
    z-index: 1;
}

.timeline-icon {
    font-size: 1.5rem;
}

.timeline-dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: white;
}

.timeline-content {
    /* Loại bỏ nền riêng, hiển thị trên nền của base */
    background: none;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    transition: none;
    word-wrap: break-word;
    overflow-wrap: break-word;
    overflow: visible;
}

.timeline-content:hover {
    transform: none;
    box-shadow: none;
}

.timeline-date {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--premium-primary);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wider);
    margin-bottom: 0.25rem;
}

.timeline-title-toggle {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: all 0.2s ease;
}

.timeline-title-toggle:hover {
    opacity: 0.8;
}

.timeline-title {
    font-size: var(--font-size-h4);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-snug);
    margin: 0;
    color: #111827;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    flex: 1;
}

.timeline-toggle-icon {
    display: flex;
    align-items: center;
    color: var(--premium-primary);
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

/* Icon mặc định: hiển thị icon-closed (dấu trừ) khi mở, icon-open (dấu cộng) khi đóng */
.timeline-toggle-icon .timeline-icon-open {
    display: none;
}

.timeline-toggle-icon .timeline-icon-closed {
    display: block;
}

/* Khi mở (timeline-item--open): hiển thị icon-closed (dấu trừ) */
.timeline-item--open .timeline-toggle-icon .timeline-icon-closed {
    display: block;
}

.timeline-item--open .timeline-toggle-icon .timeline-icon-open {
    display: none;
}

/* Khi đóng (không có timeline-item--open): hiển thị icon-open (dấu cộng) */
.timeline-item:not(.timeline-item--open) .timeline-toggle-icon .timeline-icon-closed {
    display: none;
}

.timeline-item:not(.timeline-item--open) .timeline-toggle-icon .timeline-icon-open {
    display: block;
}

.timeline-description-wrapper {
    max-height: 2000px;
    overflow: hidden;
    transition: max-height 0.3s ease;
    margin-top: 0.5rem;
}

.timeline-item:not(.timeline-item--open) .timeline-description-wrapper {
    max-height: 0;
    margin-top: 0;
}

.timeline-description {
    font-size: var(--font-size-base);
    color: #6b7280;
    line-height: var(--line-height-normal);
    word-wrap: break-word;
    overflow-wrap: break-word;
    padding-top: 0.5rem;
}

/* Rich Text Styling cho Timeline Description - Kết hợp với universal-content */
.timeline-description.universal-content {
    font-size: var(--font-size-base) !important;
    color: #6b7280 !important;
    line-height: var(--line-height-normal) !important;
    font-family: inherit !important;
    /* Override universal-content font */
}

/* Override universal-content color trong timeline */
.timeline-description.universal-content * {
    color: inherit;
}

.timeline-description.universal-content p,
.timeline-description.universal-content .block-paragraph p {
    color: #6b7280 !important;
}

.timeline-description.universal-content h1,
.timeline-description.universal-content h2,
.timeline-description.universal-content h3,
.timeline-description.universal-content h4,
.timeline-description.universal-content h5,
.timeline-description.universal-content h6 {
    color: #111827 !important;
}

/* Rich Text Styling cho Timeline Description */
.timeline-description p,
.timeline-description.universal-content p {
    margin-bottom: 0.75rem;
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    color: #6b7280;
}

.timeline-description p:last-child,
.timeline-description.universal-content p:last-child {
    margin-bottom: 0;
}

.timeline-description h1,
.timeline-description h2,
.timeline-description h3,
.timeline-description h4,
.timeline-description h5,
.timeline-description h6,
.timeline-description.universal-content h1,
.timeline-description.universal-content h2,
.timeline-description.universal-content h3,
.timeline-description.universal-content h4,
.timeline-description.universal-content h5,
.timeline-description.universal-content h6 {
    font-weight: var(--font-weight-bold);
    color: #111827;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    line-height: var(--line-height-snug);
}

.timeline-description h1 {
    font-size: var(--font-size-h3);
}

.timeline-description h2 {
    font-size: var(--font-size-h4);
}

.timeline-description h3 {
    font-size: var(--font-size-h5);
}

.timeline-description h4,
.timeline-description h5,
.timeline-description h6 {
    font-size: var(--font-size-base);
}

.timeline-description ul,
.timeline-description ol,
.timeline-description.universal-content ul,
.timeline-description.universal-content ol {
    margin: 0.75rem 0;
    padding-left: 1.5rem;
    color: #6b7280;
}

.timeline-description ul {
    list-style-type: disc;
}

.timeline-description ol {
    list-style-type: decimal;
}

.timeline-description li,
.timeline-description.universal-content li {
    margin-bottom: 0.5rem;
    line-height: var(--line-height-normal);
}

.timeline-description ul ul,
.timeline-description ol ol {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.timeline-description ul ul {
    list-style-type: circle;
}

.timeline-description ol ol {
    list-style-type: lower-alpha;
}

.timeline-description strong,
.timeline-description b,
.timeline-description.universal-content strong,
.timeline-description.universal-content b {
    font-weight: var(--font-weight-semibold);
    color: #374151;
}

.timeline-description em,
.timeline-description i {
    font-style: italic;
}

.timeline-description u {
    text-decoration: underline;
}

.timeline-description a,
.timeline-description.universal-content a {
    color: var(--premium-primary, #3b82f6);
    text-decoration: underline;
    transition: color 0.2s ease;
}

.timeline-description a:hover {
    color: var(--premium-accent, #2563eb);
    text-decoration: none;
}

.timeline-description blockquote {
    border-left: 3px solid var(--premium-primary, #3b82f6);
    padding-left: 1rem;
    margin: 1rem 0;
    font-style: italic;
    color: #4b5563;
}

.timeline-description code {
    background-color: #f3f4f6;
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    font-family: var(--font-family-mono, 'Courier New', monospace);
    font-size: 0.875em;
    color: #1f2937;
}

.timeline-description pre {
    background-color: #f3f4f6;
    padding: 1rem;
    border-radius: 0.5rem;
    overflow-x: auto;
    margin: 1rem 0;
}

.timeline-description pre code {
    background-color: transparent;
    padding: 0;
}

.timeline-description hr {
    border: none;
    border-top: 1px solid #e5e7eb;
    margin: 1.5rem 0;
}

.timeline-description img {
    max-width: 100%;
    height: auto;
    border-radius: 0.5rem;
    margin: 1rem 0;
}

.timeline-description table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
}

.timeline-description table th,
.timeline-description table td {
    padding: 0.5rem;
    border: 1px solid #e5e7eb;
    text-align: left;
}

.timeline-description table th {
    background-color: #f9fafb;
    font-weight: var(--font-weight-semibold);
    color: #111827;
}

/* Wagtail RichText data-block-key elements */
.timeline-description p[data-block-key] {
    display: block !important;
    margin-bottom: 0.75rem;
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    color: #6b7280;
}

.timeline-description p[data-block-key]:empty {
    display: none !important;
    margin: 0 !important;
}

.timeline-description h1[data-block-key],
.timeline-description h2[data-block-key],
.timeline-description h3[data-block-key],
.timeline-description h4[data-block-key],
.timeline-description h5[data-block-key],
.timeline-description h6[data-block-key] {
    display: block !important;
    font-weight: var(--font-weight-bold);
    color: #111827;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

.timeline-description ul[data-block-key],
.timeline-description ol[data-block-key] {
    display: block !important;
    margin: 0.75rem 0;
    padding-left: 1.5rem;
    list-style-position: outside !important;
}

.timeline-description li[data-block-key] {
    display: list-item !important;
    margin-bottom: 0.5rem;
    list-style-position: outside !important;
}

.timeline-description strong[data-block-key],
.timeline-description b[data-block-key] {
    font-weight: var(--font-weight-semibold);
    color: #374151;
    display: inline !important;
}

.timeline-description em[data-block-key],
.timeline-description i[data-block-key] {
    font-style: italic;
    display: inline !important;
}

.timeline-description a[data-block-key] {
    color: var(--premium-primary, #3b82f6);
    text-decoration: underline;
    display: inline !important;
}

/* Wagtail block-paragraph class trong timeline */
.timeline-description .block-paragraph {
    margin-bottom: 0.75rem;
}

.timeline-description .block-paragraph:last-child {
    margin-bottom: 0;
}

.timeline-description .block-paragraph p {
    margin-bottom: 0.75rem;
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    color: #6b7280;
}

.timeline-description .block-paragraph p:last-child {
    margin-bottom: 0;
}

.timeline-description .block-paragraph h1,
.timeline-description .block-paragraph h2,
.timeline-description .block-paragraph h3,
.timeline-description .block-paragraph h4,
.timeline-description .block-paragraph h5,
.timeline-description .block-paragraph h6 {
    font-weight: var(--font-weight-bold);
    color: #111827;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

.timeline-description .block-paragraph ul,
.timeline-description .block-paragraph ol {
    margin: 0.75rem 0;
    padding-left: 1.5rem;
    color: #6b7280;
}

.timeline-description .block-paragraph li {
    margin-bottom: 0.5rem;
    line-height: var(--line-height-normal);
    color: #6b7280;
}

/* ============================================
   📑 TABS BLOCK - Phase 2
   ============================================ */

/* Tabs Block - Loại bỏ hoàn toàn khung bao của cms-block */
/* Override tất cả styling từ .cms-block để hiển thị trực tiếp trên base */
.cms-block.tabs-block,
.cms-block.tabs-block:hover {
    padding: 0 !important;
    margin: 0 !important;
    margin-bottom: var(--block-spacing) !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: none !important;
    background-color: transparent !important;
}

.tabs-block {
    margin: 0;
    margin-bottom: var(--block-spacing);
}

.tabs-heading {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: var(--component-margin-bottom-md);
    text-align: center;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
}

/* Alignment cho tabs heading */
.tabs-heading--left {
    text-align: left;
}

.tabs-heading--center {
    text-align: center;
}

.tabs-heading--right {
    text-align: right;
}

.tabs-container {
    max-width: 1000px;
    margin: 0 auto;
}

.tabs-nav {
    display: flex;
    gap: 0.5rem;
    border-bottom: 2px solid #e5e7eb;
    margin-bottom: var(--component-margin-bottom-md);
}

/* Tab Styles */
.tabs-block--default .tabs-nav {
    border-bottom: 2px solid #e5e7eb;
}

.tabs-block--default .tab-button {
    padding: 0.75rem 1.5rem;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 500;
    color: #6b7280;
}

.tabs-block--default .tab-button--active {
    color: var(--premium-primary);
    border-bottom-color: var(--premium-primary);
}

.tabs-block--pills .tabs-nav {
    border: none;
}

.tabs-block--pills .tab-button {
    padding: 0.75rem 1.5rem;
    background: #f3f4f6;
    border: none;
    border-radius: 9999px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 500;
    color: #6b7280;
}

.tabs-block--pills .tab-button--active {
    background: var(--premium-primary);
    color: white;
}

.tabs-block--underline .tabs-nav {
    border: none;
    gap: 2rem;
}

.tabs-block--underline .tab-button {
    padding: 0.75rem 0;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 500;
    color: #6b7280;
}

.tabs-block--underline .tab-button--active {
    color: #111827;
    border-bottom-color: var(--premium-primary);
}

.tabs-block--boxed .tabs-nav {
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 0.25rem;
    gap: 0;
}

.tabs-block--boxed .tab-button {
    padding: 0.75rem 1.5rem;
    background: none;
    border: none;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 500;
    color: #6b7280;
}

.tabs-block--boxed .tab-button--active {
    background: var(--premium-primary);
    color: white;
}

.tab-button {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.tab-button:hover {
    opacity: 0.8;
}

.tab-icon {
    font-size: 1.125rem;
}

.tabs-content {
    position: relative;
}

.tab-panel {
    display: none;
}

.tab-panel--active {
    display: block;
    animation: tabFadeIn 0.3s ease;
}

@keyframes tabFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   💬 QUOTE BLOCK - Phase 2
   ============================================ */

.quote-block {
    margin: 0;
    margin-bottom: var(--block-spacing);
    padding: 2rem;
}

.quote-content {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
}

/* Quote Styles */
.quote-block--default {
    background: #f9fafb;
    border-left: 4px solid var(--premium-primary);
    border-radius: 0.5rem;
}

.quote-block--highlighted {
    background: var(--gradient-purple);
    color: white;
    border-radius: 1rem;
}

.quote-block--bordered {
    background: white;
    border: 2px solid var(--premium-primary);
    border-radius: 1rem;
}

.quote-block--card {
    background: white;
    box-shadow: var(--shadow-lg);
    border-radius: 1rem;
}

.quote-block--minimal {
    background: transparent;
    padding: 1rem 0;
}

.quote-mark {
    font-size: 4rem;
    font-weight: 700;
    color: var(--premium-primary);
    opacity: 0.3;
    line-height: 1;
    margin-bottom: 1rem;
}

.quote-block--highlighted .quote-mark {
    color: white;
}

.quote-text {
    font-size: 1.25rem;
    line-height: 1.6;
    font-style: italic;
    margin-bottom: var(--component-margin-bottom-sm);
}

.quote-footer {
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    padding-top: 1rem;
}

.quote-block--highlighted .quote-footer {
    border-top-color: rgba(255, 255, 255, 0.3);
}

.quote-author {
    font-weight: 700;
    font-style: normal;
    color: #111827;
}

.quote-block--highlighted .quote-author {
    color: white;
}

.quote-author-title {
    color: #6b7280;
    margin-left: 0.5rem;
}

.quote-block--highlighted .quote-author-title {
    color: rgba(255, 255, 255, 0.8);
}

.quote-source {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: #9ca3af;
}

.quote-source a {
    color: var(--premium-primary);
    text-decoration: underline;
}

.quote-block--highlighted .quote-source {
    color: rgba(255, 255, 255, 0.7);
}

.quote-block--highlighted .quote-source a {
    color: white;
}

/* ============================================
   🎥 VIDEO BLOCK - Phase 2
   ============================================ */

/* Video Block - Loại bỏ hoàn toàn khung bao của cms-block */
/* Override tất cả styling từ .cms-block để hiển thị trực tiếp trên base */
.cms-block.video-block,
.cms-block.video-block:hover {
    padding: 0 !important;
    margin: 0 !important;
    margin-bottom: var(--block-spacing) !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: none !important;
    background-color: transparent !important;
}

.video-block {
    margin: 0;
    margin-bottom: var(--block-spacing);
    max-width: 100%;
    overflow: hidden;
}

.video-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: var(--component-margin-bottom-sm);
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
}

/* Alignment cho video title */
.video-title--left {
    text-align: left;
}

.video-title--center {
    text-align: center;
}

.video-title--right {
    text-align: right;
}

/* Video thumbnail (optional) - hiển thị trực tiếp trên nền base */
.video-thumbnail {
    margin-bottom: 1rem;
    border-radius: 1rem;
    overflow: hidden;
}

.video-thumbnail img {
    display: block;
    width: 100%;
    height: auto;
}

/* Layout Wrapper - tránh overflow ngang */
.video-layout {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

/* Full width layout */
.video-block--full .video-layout {
    flex-direction: column;
}

/* Override alignment cho full layout - chỉ khi không có class alignment cụ thể */
.video-block--full .video-title:not([class*="--left"]):not([class*="--right"]):not([class*="--center"]) {
    text-align: center;
}

.video-block--full .video-section {
    width: 100%;
}

/* Video left layout */
.video-block--video-left .video-layout {
    flex-direction: row;
}

/* Video right layout */
.video-block--video-right .video-layout {
    flex-direction: row-reverse;
}

/* Video Section - căn mép trên với nội dung bên cạnh */
.video-section {
    flex-shrink: 0;
    min-width: 0;
    align-self: flex-start;
}

/* Full width - video section chiếm 100% */
.video-block--full .video-section {
    width: 100%;
    max-width: 100%;
}

/* Left/Right layout - để inline style từ template điều khiển flex */
.video-block--video-left .video-section,
.video-block--video-right .video-section {
    /* Không set width/flex ở đây - để template inline style điều khiển */
    max-width: 100%;
    overflow: hidden;
}

.video-container {
    position: relative;
    width: 100%;
    max-width: 100%;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    /* Nền trong suốt: khi ảnh không lấp đầy (hoặc video block dùng ảnh) không lộ vạch đen */
    background: transparent;
}

/* Wrapper cho embed HTML (Wagtail iframe) - ép nội dung nằm trong container, không tràn */
.video-embed-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.video-embed-wrapper iframe,
.video-embed-wrapper object,
.video-embed-wrapper embed {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    border: 0;
}

/* Wagtail responsive-object bên trong wrapper - bỏ padding-bottom, dùng full area */
.video-container .video-embed-wrapper .responsive-object {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    padding-bottom: 0 !important;
    margin: 0 !important;
}

.video-container .video-embed-wrapper .responsive-object iframe {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

/* Full width max-width - Phù hợp với base content width */
.video-block--full .video-container {
    max-width: 100%;
    margin: 0 auto;
    width: 100%;
}

/* Aspect Ratios */
.video-container--16\:9 {
    aspect-ratio: 16 / 9;
}

.video-container--4\:3 {
    aspect-ratio: 4 / 3;
}

.video-container--1\:1 {
    aspect-ratio: 1 / 1;
}

.video-container--9\:16 {
    aspect-ratio: 9 / 16;
    max-width: 400px;
}

.video-embed {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* Ảnh trong video block - căn lề trên, nền trong suốt không làm xấu ảnh */
.video-media-image {
    display: block;
}

.video-media-image .video-media-img,
.video-media-image img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    /* Phần thiếu hiện ở dưới, mép trên thẳng với nội dung */
    object-position: top center;
    display: block;
}

.video-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    background: #f3f4f6;
    padding: 2rem;
    text-align: center;
}

.video-error p {
    color: #ef4444;
    font-weight: 600;
    margin-bottom: 1rem;
}

.video-error a {
    color: var(--premium-primary);
    text-decoration: underline;
}

.video-caption {
    margin-top: 0.75rem;
    color: #6b7280;
    line-height: 1.6;
    font-size: 0.9375rem;
}

.video-block--full .video-caption {
    text-align: center;
}

/* Content Section - căn mép trên với ảnh/video bên cạnh */
.video-content-section {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: flex-start;
    align-self: flex-start;
    padding-left: 1rem;
    overflow-wrap: break-word;
}

.video-block--video-right .video-content-section {
    padding-left: 0;
    padding-right: 1rem;
}

.video-content {
    width: 100%;
    line-height: 1.6;
    max-width: 100%;
}

.video-content h2,
.video-content h3,
.video-content h4 {
    margin-top: 0;
    margin-bottom: 1rem;
}

.video-content p {
    margin-bottom: 1rem;
}

.video-content ul,
.video-content ol {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
}

.video-content li {
    margin-bottom: 0.25rem;
}

/* Responsive - Mobile */
@media (max-width: 639px) {

    .video-block--video-left .video-layout,
    .video-block--video-right .video-layout {
        flex-direction: column;
        gap: 1.5rem;
    }

    .video-section {
        width: 100% !important;
        flex: none !important;
        max-width: 100% !important;
    }

    .video-content-section {
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .video-block--video-right .video-content-section {
        padding-right: 0 !important;
    }

    .video-title {
        font-size: 1.25rem;
    }

    /* Giữ nguyên alignment trên mobile - không override */
    .video-title--left {
        text-align: left;
    }

    .video-title--center {
        text-align: center;
    }

    .video-title--right {
        text-align: right;
    }

    .video-caption {
        text-align: center;
    }

    .video-container {
        border-radius: 0.5rem;
    }
}

/* ============================================
   ⚖️ COMPARISON BLOCK - Phase 2
   ============================================ */

/* Comparison Block - hiển thị trực tiếp trên nền base (bỏ khung bao của cms-block) */
.cms-block.comparison-block,
.cms-block.comparison-block:hover {
    padding: 0 !important;
    margin: 0 !important;
    margin-bottom: var(--block-spacing) !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: none !important;
    background-color: transparent !important;
}

.comparison-block {
    margin: 0;
    margin-bottom: var(--block-spacing);
    /* Removed padding - columns have their own styling */
}

.comparison-heading {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: var(--component-margin-bottom-md);
    text-align: center;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
}

/* Alignment cho comparison heading */
.comparison-heading--left {
    text-align: left;
}

.comparison-heading--center {
    text-align: center;
}

.comparison-heading--right {
    text-align: right;
}

.comparison-container {
    display: grid;
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.comparison-container[data-columns="2"] {
    grid-template-columns: repeat(2, 1fr);
}

.comparison-container[data-columns="3"] {
    grid-template-columns: repeat(3, 1fr);
}

.comparison-container[data-columns="4"] {
    grid-template-columns: repeat(4, 1fr);
}

/* Comparison Styles */
/* Table style - có border, background trắng */
.comparison-block--table .comparison-column {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    padding: 2rem;
}

/* Cards style - có shadow, hover effect */
.comparison-block--cards .comparison-column {
    background: white;
    border: none;
    border-radius: 1rem;
    padding: 2rem;
    box-shadow: var(--shadow-md);
    transition: transform 0.3s ease;
}

.comparison-block--cards .comparison-column:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

/* Split style - không có background riêng, có divider line giữa các columns */
.comparison-block--split .comparison-column {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 2rem;
    position: relative;
}

/* Divider line giữa các columns trong split style */
.comparison-block--split .comparison-column:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 1px;
    background: linear-gradient(to bottom, transparent, #e5e7eb 10%, #e5e7eb 90%, transparent);
}

.comparison-block--split .comparison-column-header {
    border-bottom: 1px solid #e5e7eb;
}

.comparison-block--split .comparison-feature {
    border-bottom: 1px solid #f3f4f6;
}

.comparison-column--highlight {
    border-color: var(--premium-primary) !important;
    box-shadow: var(--shadow-glow-purple);
    transform: scale(1.05);
}

/* Highlight cho split style - thêm background và border trái */
.comparison-block--split .comparison-column--highlight {
    background: rgba(99, 102, 241, 0.05) !important;
    border-left: 3px solid var(--premium-primary) !important;
    padding-left: calc(2rem - 3px);
    transform: none;
    box-shadow: none;
}

.comparison-block--split .comparison-column--highlight::after {
    background: linear-gradient(to bottom, transparent, var(--premium-primary) 10%, var(--premium-primary) 90%, transparent);
}

.comparison-column-header {
    text-align: center;
    padding-bottom: 1.5rem;
    border-bottom: 2px solid #e5e7eb;
    margin-bottom: var(--component-margin-bottom-sm);
}

.comparison-column-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
}

.comparison-column-subtitle {
    color: #6b7280;
    font-size: 0.875rem;
}

.comparison-features {
    list-style: none;
    padding: 0;
    margin: 0;
}

.comparison-feature {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid #f3f4f6;
}

.comparison-feature:last-child {
    border-bottom: none;
}

.comparison-feature--excluded {
    opacity: 0.4;
}

.comparison-feature-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    color: var(--premium-success);
}

.comparison-feature--excluded .comparison-feature-icon {
    color: #ef4444;
}

.comparison-feature-text {
    font-size: 0.9375rem;
    min-width: 0;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
}

/* ============================================
   📱 RESPONSIVE - Phase 2 Updates
   ============================================ */

/* Desktop (1024px+): Larger headings and spacing */
@media (min-width: 1024px) {
    .accordion-heading {
        font-size: var(--font-size-h2);
        /* 1.875rem = 30px */
        margin-bottom: var(--spacing-desktop);
    }

    .accordion-header {
        padding: var(--spacing-desktop);
    }

    .accordion-title {
        font-size: var(--font-size-lg);
        /* 1.125rem = 18px */
    }

    .accordion-content-inner {
        padding: 0 var(--spacing-desktop) var(--spacing-desktop) var(--spacing-desktop);
    }
}

/* Mobile (< 640px): Optimized responsive layout */
@media (max-width: 639px) {

    /* Reduce heading size */
    .timeline-heading {
        font-size: var(--font-size-h2);
        /* Responsive từ variables.css */
        margin-bottom: var(--component-margin-bottom-md);
    }

    /* Container padding */
    .timeline-container {
        padding: 0 1rem;
    }

    /* Vertical Timeline - Mobile */
    .timeline-block--vertical .timeline-line {
        left: 20px;
    }

    .timeline-block--vertical .timeline-item {
        padding-left: 60px;
        margin-bottom: var(--component-margin-bottom-md);
    }

    .timeline-block--vertical .timeline-marker {
        left: 0;
    }

    /* Alternating Timeline - Convert to vertical */
    .timeline-block--alternating .timeline-item {
        display: block;
        padding-left: 60px;
        margin-bottom: var(--component-margin-bottom-md);
        position: relative;
    }

    .timeline-block--alternating .timeline-item .timeline-content {
        text-align: left !important;
        grid-column: unset;
        grid-row: unset;
    }

    .timeline-block--alternating .timeline-marker {
        position: absolute;
        left: 0;
        transform: none;
        justify-self: unset;
    }

    .timeline-block--alternating .timeline-line {
        left: 20px;
        transform: none;
    }

    /* Horizontal Timeline - Mobile scroll */
    .timeline-block--horizontal .timeline-container {
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 1rem;
        padding: 1rem;
        margin: 0 -1rem;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .timeline-block--horizontal .timeline-container::-webkit-scrollbar {
        display: none;
    }

    .timeline-block--horizontal .timeline-item {
        min-width: calc(100vw - 3rem);
        scroll-snap-align: center;
    }

    /* Smaller markers on mobile */
    .timeline-marker {
        width: 44px;
        height: 44px;
    }

    .timeline-icon {
        font-size: 1.25rem;
    }

    /* Compact content - đã loại bỏ nền riêng */
    .timeline-content {
        padding: 0;
        background: none;
    }

    .timeline-date {
        font-size: var(--font-size-xs);
        /* 12px cho mobile */
    }

    .timeline-title {
        font-size: var(--font-size-h4);
        /* Responsive từ variables.css */
    }

    .timeline-description {
        font-size: var(--font-size-base);
        /* ✅ 16px - ĐẠT CHUẨN Material Design */
    }

    .tabs-nav {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .tab-button {
        white-space: nowrap;
    }

    .comparison-container[data-columns="2"],
    .comparison-container[data-columns="3"],
    .comparison-container[data-columns="4"] {
        grid-template-columns: 1fr !important;
    }

    .comparison-column--highlight {
        transform: none;
    }
}

/* Tablet (640px - 1023px): Optimized responsive layout */
@media (min-width: 640px) and (max-width: 1023px) {
    .timeline-heading {
        font-size: var(--font-size-h2);
        /* 30px */
        margin-bottom: 2.5rem;
    }

    .timeline-container {
        padding: 0 1.5rem;
    }

    .timeline-content {
        padding: 0;
        background: none;
    }

    .timeline-date {
        font-size: var(--font-size-sm);
        /* 14px */
    }

    .timeline-title {
        font-size: var(--font-size-h4);
        /* 20px */
    }

    .timeline-description {
        font-size: var(--font-size-base);
        /* ✅ 16px - ĐẠT CHUẨN */
    }
}

/* Desktop (≥ 1024px): Full layout */
@media (min-width: 1024px) {
    .timeline-heading {
        font-size: var(--font-size-h2);
        /* 30px */
        margin-bottom: var(--component-margin-bottom-lg);
    }

    .timeline-container {
        padding: 0 2rem;
    }

    .timeline-content {
        padding: 0;
        background: none;
    }

    .timeline-date {
        font-size: var(--font-size-sm);
        /* 14px */
    }

    .timeline-title {
        font-size: var(--font-size-h4);
        /* 20px */
    }

    .timeline-description {
        font-size: var(--font-size-base);
        /* ✅ 16px - ĐẠT CHUẨN */
    }
}

/* ============================================
   ⚠️ ALERT BLOCK - BEM Refactored
   ============================================ */

.alert-block {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-radius: var(--block-radius);
    border-left: 4px solid;
}

.alert-block--info {
    background: #eff6ff;
    border-left-color: #3b82f6;
}

.alert-block--success {
    background: #f0fdf4;
    border-left-color: #22c55e;
}

.alert-block--warning {
    background: #fffbeb;
    border-left-color: #f59e0b;
}

.alert-block--danger {
    background: #fef2f2;
    border-left-color: #ef4444;
}

.alert-block__icon {
    flex-shrink: 0;
}

.alert-block__icon svg {
    width: 1.25rem;
    height: 1.25rem;
}

.alert-block__content {
    flex: 1;
    min-width: 0;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
}

.alert-block--dismissible {
    padding-right: 3rem;
    position: relative;
}

/* Dismiss Button - Position absolute in alert-block */
.alert-block .alert-dismiss-button {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background: none;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 4px;
    transition: all 0.2s ease;
    z-index: 10;
}

.alert-block .alert-dismiss-button:hover {
    background: rgba(0, 0, 0, 0.1);
    color: #374151;
}

.alert-block .alert-dismiss-button svg {
    width: 1.25rem;
    height: 1.25rem;
    display: block;
}

/* ============================================
   💻 CODE BLOCK - BEM Refactored
   ============================================ */

.code-block {
    background: #1e1e1e;
    border-radius: var(--block-radius);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.code-block__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: #2d2d2d;
    border-bottom: 1px solid #404040;
}

.code-block__header .code-lang {
    font-size: 0.75rem;
    font-weight: 600;
    color: #9ca3af;
    text-transform: uppercase;
}

.code-block__header .copy-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    background: #404040;
    border: none;
    border-radius: 0.375rem;
    color: #e5e7eb;
    font-size: 0.75rem;
    cursor: pointer;
    transition: background 0.2s;
}

.code-block__header .copy-btn:hover {
    background: #525252;
}

.code-block__body {
    padding: 1rem;
    overflow-x: auto;
}

.code-block__body pre {
    margin: 0;
    font-family: 'Fira Code', 'Monaco', 'Menlo', monospace;
    font-size: 0.875rem;
    line-height: 1.6;
}

/* ============================================
   📥 DOCUMENT DOWNLOAD BLOCK - Simplified (Button Only)
   ============================================ */

.document-download-block {
    display: block;
    margin: 0;
    margin-bottom: var(--block-spacing);
}

/* Alignment options */
.document-download-block--left {
    text-align: left;
}

.document-download-block--center {
    text-align: center;
}

.document-download-block--right {
    text-align: right;
}

/* Button styling in this block */
.document-download-block .cms-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
}

.document-download-block .cms-button svg {
    width: 1.125rem;
    height: 1.125rem;
    flex-shrink: 0;
}

/* Responsive: Mobile */
@media (max-width: 639px) {
    .document-download-block {
        margin: 0.75rem 0;
    }

    .document-download-block .cms-button {
        padding: 0.625rem 1rem;
        font-size: 0.875rem;
    }

    .document-download-block .cms-button svg {
        width: 1rem;
        height: 1rem;
    }
}

/* ============================================
   🖼️ IMAGE BLOCK - Enhanced with Alignment & Size
   ============================================ */

.image-block {
    display: block;
    margin: 0;
    margin-bottom: var(--block-spacing);
}

/* Alignment styles */
.image-block--center {
    text-align: center;
}

.image-block--left {
    text-align: left;
}

.image-block--right {
    text-align: right;
}

.image-block--full {
    width: 100%;
    text-align: center;
}

.image-block--full .image-block__img {
    width: 100%;
    max-width: none;
}

/* Image styling - clean, no frame */
.image-block__img {
    display: inline-block;
    max-width: 100%;
    height: auto;
}

/* Link wrapper */
.image-block__link {
    display: inline-block;
    text-decoration: none;
}

.image-block__link .image-block__img:hover {
    opacity: 0.9;
}

/* Caption styling */
.image-block__caption {
    margin-top: 0.75rem;
    font-size: 0.875rem;
    color: #6b7280;
    font-style: italic;
    line-height: 1.5;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
}

.image-block--center .image-block__caption,
.image-block--full .image-block__caption {
    text-align: center;
}

.image-block--left .image-block__caption {
    text-align: left;
}

.image-block--right .image-block__caption {
    text-align: right;
}

/* Responsive */
@media (max-width: 639px) {
    .image-block {
        margin: 1rem 0;
    }

    .image-block--left,
    .image-block--right {
        text-align: center;
    }

    .image-block--left .image-block__caption,
    .image-block--right .image-block__caption {
        text-align: center;
    }
}

/* ============================================
   �️ ENHANCED IMAGE BLOCK - CSS Classes
   Thay thế inline styles để tuân thủ CSP
   ============================================ */

.enhanced-image {
    display: block;
    margin: 0;
    margin-bottom: var(--block-spacing);
}

/* Alignment */
.enhanced-image--left {
    text-align: left;
}

.enhanced-image--center {
    text-align: center;
}

.enhanced-image--right {
    text-align: right;
}

.enhanced-image--full {
    width: 100%;
    text-align: center;
}

/* Title */
.enhanced-image__title {
    margin-bottom: 0.75rem;
    font-size: var(--font-size-h4);
    font-weight: 600;
}

/* Link wrapper */
.enhanced-image__link {
    display: inline-block;
    text-decoration: none;
}

.enhanced-image__link:hover .enhanced-image-img {
    opacity: 0.9;
    transition: opacity var(--transition-base);
}

/* Image */
.enhanced-image-img {
    max-width: 100%;
    height: auto;
    display: inline-block;
}

/* Caption */
.enhanced-image__caption {
    margin-top: 0.5rem;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    font-style: italic;
    line-height: 1.5;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
}

.enhanced-image--left .enhanced-image__caption {
    text-align: left;
}

.enhanced-image--right .enhanced-image__caption {
    text-align: right;
}

.enhanced-image--center .enhanced-image__caption,
.enhanced-image--full .enhanced-image__caption {
    text-align: center;
}

/* Responsive */
@media (max-width: 639px) {
    .enhanced-image {
        margin: 1rem 0;
    }

    .enhanced-image--left,
    .enhanced-image--right {
        text-align: center;
    }

    .enhanced-image--left .enhanced-image__caption,
    .enhanced-image--right .enhanced-image__caption {
        text-align: center;
    }
}

/* ============================================
   �🛍️ PRODUCT SHOWCASE BLOCK - BEM Refactored
   ============================================ */

.product-showcase-block {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: var(--block-radius);
    padding: 1rem;
    overflow: hidden;
    max-width: 600px;
}

.product-showcase-block__layout {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

/* Mobile: Horizontal scroll (< 640px) - similar to testimonial grid */
@media (max-width: 639px) {
    .product-showcase-block__layout {
        flex-direction: column;
        width: 100%;
    }

    .product-showcase-block__image {
        width: 100%;
        max-width: 100%;
    }
}

/* Tablet & Desktop: Side by side (>= 640px) */
@media (min-width: 640px) {
    .product-showcase-block__layout {
        flex-direction: row;
    }

    .product-showcase-block__image {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

.product-showcase-block__img {
    width: 100%;
    height: auto;
    display: block;
}

.product-showcase-block__info {
    flex: 1;
}

.product-showcase-block__title {
    font-size: 0.75rem;
    font-weight: 700;
    margin-bottom: 0.125rem;
}

.product-showcase-block__description {
    font-size: 0.625rem;
    color: #6b7280;
    margin-bottom: 0.25rem;
}

.product-showcase-block__price {
    font-size: 1rem;
    font-weight: 700;
    color: var(--premium-primary);
    margin-bottom: 0.25rem;
}

.product-showcase-block__features {
    margin-bottom: var(--component-margin-bottom-sm);
}

.product-showcase-block__features-title {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.product-showcase-block__features-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.product-showcase-block__feature-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0;
}

.product-showcase-block__feature-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--premium-success);
    flex-shrink: 0;
}

/* ============================================
   📋 FEATURES LIST BLOCK - Danh sách tính năng (theo ChuanTESTIMONIAL_BLOCK_AUDIT_REPORT)
   Mỗi thẻ = 1 tính năng; nhiều thẻ xếp hàng ngang. Nơi nào gọi block đều dùng chung style này.
   ============================================ */

.features-list-block {
    margin: 0;
    margin-bottom: var(--block-spacing);
    overflow: visible;
}

.features-list-title {
    font-size: var(--font-size-h2);
    font-weight: 700;
    margin-bottom: var(--spacing-title-content, 1.5rem);
    color: var(--text-primary);
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
}

.features-list-title p {
    margin: 0;
    color: inherit;
}

.features-list-title--left {
    text-align: left;
}

.features-list-title--center {
    text-align: center;
}

.features-list-title--right {
    text-align: right;
}

.features-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-desktop, 1.5rem);
    margin: 0;
    margin-bottom: var(--block-spacing);
    list-style: none;
    padding: 0;
}

/* Số cột khi không bật carousel — giống Testimonial Grid */
.features-list.features-list--columns-1:not([data-carousel="true"]) {
    display: grid;
    grid-template-columns: 1fr;
}

.features-list.features-list--columns-2:not([data-carousel="true"]) {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.features-list.features-list--columns-3:not([data-carousel="true"]) {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.features-list.features-list--columns-4:not([data-carousel="true"]) {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.features-list:not([data-carousel="true"]) .feature-item {
    min-width: 0;
    max-width: none;
}

@media (max-width: 639px) {
    .features-list-title {
        font-size: 1.5rem;
        margin-bottom: var(--spacing-title-content, 1.25rem);
    }

    .features-list-block {
        margin: 1.5rem 0;
    }

    .features-list.features-list--columns-2:not([data-carousel="true"]),
    .features-list.features-list--columns-3:not([data-carousel="true"]),
    .features-list.features-list--columns-4:not([data-carousel="true"]) {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 640px) and (max-width: 1023px) {

    .features-list.features-list--columns-3:not([data-carousel="true"]),
    .features-list.features-list--columns-4:not([data-carousel="true"]) {
        grid-template-columns: repeat(2, 1fr);
    }
}

.features-list .feature-item {
    flex: 1 1 280px;
    min-width: 0;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: var(--spacing-tablet, 1rem);
    border-radius: 24px;
    font-size: var(--font-size-base, 1rem);
    border: none;
    transition: transform var(--transition-base, 200ms ease), box-shadow var(--transition-base, 200ms ease);
    position: relative;
    overflow: hidden;
}

/* Base (fallback) */
.features-list .feature-item {
    background: var(--block-feature-bg, #fafafa);
    color: var(--text-primary, #1f2937);
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
}

/* Orb glow — đồng bộ hiệu ứng với Hero Block (::before = orb tím, ::after = orb hồng) */
.features-list .feature-item--primary::before,
.features-list .feature-item--ocean::before,
.features-list .feature-item--emerald::before,
.features-list .feature-item--midnight::before,
.features-list .feature-item--rose::before {
    content: '';
    position: absolute;
    width: 60%;
    height: 120%;
    border-radius: 50%;
    filter: blur(50px);
    opacity: 0.45;
    top: -30%;
    left: -15%;
    pointer-events: none;
    z-index: 0;
}

.features-list .feature-item--primary::after,
.features-list .feature-item--ocean::after,
.features-list .feature-item--emerald::after,
.features-list .feature-item--midnight::after,
.features-list .feature-item--rose::after {
    content: '';
    position: absolute;
    width: 50%;
    height: 100%;
    border-radius: 50%;
    filter: blur(45px);
    opacity: 0.35;
    bottom: -25%;
    right: -10%;
    pointer-events: none;
    z-index: 0;
}

/* Orb colors per style — khớp Hero orb tông màu */
.features-list .feature-item--primary::before {
    background: radial-gradient(circle, rgba(99, 102, 241, 0.5) 0%, transparent 70%);
}

.features-list .feature-item--primary::after {
    background: radial-gradient(circle, rgba(236, 72, 153, 0.4) 0%, transparent 70%);
}

.features-list .feature-item--ocean::before {
    background: radial-gradient(circle, rgba(14, 165, 233, 0.5) 0%, transparent 70%);
}

.features-list .feature-item--ocean::after {
    background: radial-gradient(circle, rgba(20, 184, 166, 0.4) 0%, transparent 70%);
}

.features-list .feature-item--emerald::before {
    background: radial-gradient(circle, rgba(5, 150, 105, 0.5) 0%, transparent 70%);
}

.features-list .feature-item--emerald::after {
    background: radial-gradient(circle, rgba(52, 211, 153, 0.4) 0%, transparent 70%);
}

.features-list .feature-item--midnight::before {
    background: radial-gradient(circle, rgba(30, 58, 138, 0.5) 0%, transparent 70%);
}

.features-list .feature-item--midnight::after {
    background: radial-gradient(circle, rgba(96, 165, 250, 0.4) 0%, transparent 70%);
}

.features-list .feature-item--rose::before {
    background: radial-gradient(circle, rgba(190, 18, 60, 0.5) 0%, transparent 70%);
}

.features-list .feature-item--rose::after {
    background: radial-gradient(circle, rgba(251, 113, 133, 0.4) 0%, transparent 70%);
}

/* Sunset: orb sáng hơn (nền sáng) */
.features-list .feature-item--sunset::before {
    content: '';
    position: absolute;
    width: 60%;
    height: 120%;
    border-radius: 50%;
    filter: blur(50px);
    opacity: 0.4;
    top: -30%;
    left: -15%;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(circle, rgba(249, 115, 22, 0.45) 0%, transparent 70%);
}

.features-list .feature-item--sunset::after {
    content: '';
    position: absolute;
    width: 50%;
    height: 100%;
    border-radius: 50%;
    filter: blur(45px);
    opacity: 0.3;
    bottom: -25%;
    right: -10%;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(circle, rgba(251, 191, 36, 0.4) 0%, transparent 70%);
}

/* Content nổi trên orbs */
.features-list .feature-item--primary>*,
.features-list .feature-item--ocean>*,
.features-list .feature-item--sunset>*,
.features-list .feature-item--emerald>*,
.features-list .feature-item--midnight>*,
.features-list .feature-item--rose>* {
    position: relative;
    z-index: 1;
}

/* 6 style đồng bộ CTA/Banner
   Card nhỏ hơn Hero → dùng 125deg (nông hơn) + middle stop 60% (giữ màu chủ đạo lâu hơn)
   để visual khớp Hero khi render trên diện tích nhỏ */
.features-list .feature-item--primary {
    background: linear-gradient(125deg, #6366f1 0%, #a855f7 60%, #ec4899 100%);
    color: #ffffff;
    box-shadow: var(--shadow-glow-purple);
}

.features-list .feature-item--primary .feature-title,
.features-list .feature-item--primary .feature-description {
    color: #ffffff;
}

.features-list .feature-item--primary .feature-link {
    color: rgba(255, 255, 255, 0.95);
}

.features-list .feature-item--ocean {
    background: linear-gradient(125deg, #0ea5e9 0%, #06b6d4 60%, #14b8a6 100%);
    color: #ffffff;
    box-shadow: var(--shadow-glow-ocean);
}

.features-list .feature-item--ocean .feature-title,
.features-list .feature-item--ocean .feature-description {
    color: #ffffff;
}

.features-list .feature-item--ocean .feature-link {
    color: rgba(255, 255, 255, 0.95);
}

.features-list .feature-item--sunset {
    background: linear-gradient(125deg, #f97316 0%, #fb923c 60%, #fbbf24 100%);
    color: #78350f;
    box-shadow: var(--shadow-glow-sunset);
}

.features-list .feature-item--sunset .feature-title,
.features-list .feature-item--sunset .feature-description {
    color: #78350f;
}

.features-list .feature-item--sunset .feature-link {
    color: #92400e;
}

.features-list .feature-item--emerald {
    background: linear-gradient(125deg, #059669 0%, #10b981 60%, #34d399 100%);
    color: #ffffff;
    box-shadow: var(--shadow-glow-emerald);
}

.features-list .feature-item--emerald .feature-title,
.features-list .feature-item--emerald .feature-description {
    color: #ffffff;
}

.features-list .feature-item--emerald .feature-link {
    color: rgba(255, 255, 255, 0.95);
}

.features-list .feature-item--midnight {
    background: linear-gradient(125deg, #1e3a8a 0%, #3b82f6 60%, #60a5fa 100%);
    color: #ffffff;
    box-shadow: var(--shadow-glow-midnight);
}

.features-list .feature-item--midnight .feature-title,
.features-list .feature-item--midnight .feature-description {
    color: #ffffff;
}

.features-list .feature-item--midnight .feature-link {
    color: rgba(255, 255, 255, 0.95);
}

.features-list .feature-item--rose {
    background: linear-gradient(125deg, #e11d48 0%, #f43f5e 60%, #fb7185 100%);
    color: #ffffff;
    box-shadow: var(--shadow-glow-rose);
}

.features-list .feature-item--rose .feature-title,
.features-list .feature-item--rose .feature-description {
    color: #ffffff;
}

.features-list .feature-item--rose .feature-link {
    color: rgba(255, 255, 255, 0.95);
}

/* Card-style variants – đồng bộ bộ CARD_STYLE_CHOICES/Testimonial */
.features-list .feature-item--card {
    background: #ffffff;
    border: 1px solid var(--border-color-light, #e5e7eb);
    box-shadow: var(--shadow-md, 0 4px 6px rgba(0, 0, 0, 0.08));
}

.features-list .feature-item--glassmorphism {
    background: var(--glass-bg, rgba(17, 24, 39, 0.7));
    backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border, rgba(148, 163, 184, 0.4));
    box-shadow: var(--glass-shadow, 0 18px 45px rgba(15, 23, 42, 0.7));
    color: #ffffff;
}

.features-list .feature-item--glassmorphism .feature-title,
.features-list .feature-item--glassmorphism .feature-description {
    color: #ffffff;
}

.features-list .feature-item--gradient {
    background: var(--gradient-purple, linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #ec4899 100%));
    color: #ffffff;
    box-shadow: var(--shadow-glow-purple, 0 10px 40px rgba(129, 140, 248, 0.55));
}

.features-list .feature-item--gradient .feature-title,
.features-list .feature-item--gradient .feature-description {
    color: #ffffff;
}

.features-list .feature-item--gradient .feature-link {
    color: rgba(255, 255, 255, 0.95);
}

/* Aurora/Modern gradient card styles – reuse card-bg-* variables */
.features-list .feature-item--aurora {
    background: var(--card-bg-aurora);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(168, 85, 247, 0.4);
    box-shadow: 0 8px 32px rgba(124, 58, 237, 0.2);
    color: #ffffff;
}

.features-list .feature-item--aurora .feature-title,
.features-list .feature-item--aurora .feature-description {
    color: #ffffff;
}

.features-list .feature-item--aurora .feature-link {
    color: rgba(255, 255, 255, 0.95);
}

.features-list .feature-item--minimal {
    background: transparent;
    border-left: 4px solid var(--premium-primary, #6366f1);
    box-shadow: none;
}

.features-list .feature-item--bordered {
    background: #ffffff;
    border: 2px solid var(--premium-primary, #6366f1);
    box-shadow: var(--shadow-md, 0 4px 6px rgba(0, 0, 0, 0.08));
}

.features-list .feature-item--highlighted {
    background: var(--gradient-blue, linear-gradient(135deg, #2563eb 0%, #60a5fa 50%, #22d3ee 100%));
    color: #ffffff;
    box-shadow: var(--shadow-glow-ocean, 0 10px 40px rgba(56, 189, 248, 0.55));
}

.features-list .feature-item--highlighted .feature-title,
.features-list .feature-item--highlighted .feature-description {
    color: #ffffff;
}

.features-list .feature-item--highlighted .feature-link {
    color: rgba(255, 255, 255, 0.95);
}

.features-list .feature-item .feature-content {
    flex: 1;
    width: 100%;
}

.features-list .feature-item .feature-icon {
    flex-shrink: 0;
    margin-bottom: 0.5rem;
}

.features-list .feature-item .feature-title {
    font-size: var(--font-size-h4, 1.25rem);
    font-weight: var(--font-weight-semibold, 600);
    line-height: var(--line-height-snug, 1.25);
    color: var(--text-primary, #1f2937);
    margin-bottom: 0.25rem;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
}

.features-list .feature-item .feature-description {
    font-size: var(--font-size-base, 1rem);
    line-height: var(--line-height-normal, 1.5);
    color: var(--text-secondary, #6b7280);
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
}

/* Feature item standalone (single Feature block) - wrap title/description on mobile */
.feature-item .feature-title,
.feature-item .feature-description {
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
}

.features-list .feature-item .feature-link {
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--premium-primary, #6366f1);
    margin-top: 0.5rem;
    display: inline-block;
}

.features-list .feature-item .feature-link:hover {
    text-decoration: underline;
}

.features-list .feature-item:hover {
    transform: translateY(-3px);
    z-index: var(--z-index-hover-card);
}

@media (prefers-reduced-motion: reduce) {
    .features-list .feature-item {
        transition: none;
    }

    .features-list .feature-item:hover {
        transform: none;
    }
}

/* Features list carousel — giống Testimonial Grid (1,2,3,4 cột trên 1 hàng) */
@media (max-width: 639px) {
    .features-list[data-carousel="true"] {
        display: flex;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        gap: var(--spacing-desktop, 1.5rem);
        padding-top: 0.5rem;
        padding-bottom: 2.5rem;
        scrollbar-width: none;
        -ms-overflow-style: none;
        flex-wrap: nowrap;
    }

    .features-list[data-carousel="true"]::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }

    .features-list[data-carousel="true"] .feature-item {
        flex: 0 0 100%;
        scroll-snap-align: center;
        min-width: 0;
        box-sizing: border-box;
    }
}

@media (min-width: 640px) and (max-width: 1023px) {
    .features-list[data-carousel="true"] {
        display: flex;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        gap: 1.5rem;
        padding-top: 0.5rem;
        padding-bottom: 2.5rem;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .features-list[data-carousel="true"]::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }

    .features-list[data-carousel="true"] .feature-item {
        flex: 0 0 calc(50% - 0.75rem);
        scroll-snap-align: start;
        min-width: 0;
        box-sizing: border-box;
    }

    .features-list[data-carousel="true"].features-list--columns-1 .feature-item {
        flex: 0 0 100%;
        scroll-snap-align: center;
    }

    .features-list[data-carousel="true"]:not(.features-list--carousel-active) {
        display: grid;
        overflow: visible;
        scroll-snap-type: none;
    }

    .features-list[data-carousel="true"]:not(.features-list--carousel-active) .feature-item {
        flex: none;
        min-width: unset;
        width: auto;
    }

    .features-list[data-carousel="true"]:not(.features-list--carousel-active).features-list--columns-1 {
        grid-template-columns: 1fr;
    }

    .features-list[data-carousel="true"]:not(.features-list--carousel-active).features-list--columns-2,
    .features-list[data-carousel="true"]:not(.features-list--carousel-active).features-list--columns-3,
    .features-list[data-carousel="true"]:not(.features-list--carousel-active).features-list--columns-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .features-list[data-carousel="true"] {
        display: grid;
        overflow: visible;
        scroll-snap-type: none;
    }

    .features-list[data-carousel="true"].features-list--columns-1 {
        grid-template-columns: 1fr;
    }

    .features-list[data-carousel="true"].features-list--columns-2 {
        grid-template-columns: repeat(2, 1fr);
    }

    .features-list[data-carousel="true"].features-list--columns-3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .features-list[data-carousel="true"].features-list--columns-4 {
        grid-template-columns: repeat(4, 1fr);
    }

    .features-list[data-carousel="true"] .feature-item {
        flex: none;
        min-width: unset;
    }

    .features-list[data-carousel="true"].features-list--carousel-active {
        display: flex !important;
        overflow-x: auto !important;
        overflow-y: hidden;
        scroll-snap-type: x proximity !important;
        -webkit-overflow-scrolling: touch;
        gap: 1.5rem;
        padding-top: 0.75rem;
        padding-bottom: 2.75rem;
        scrollbar-width: none;
        flex-wrap: nowrap;
    }

    .features-list--carousel-active::-webkit-scrollbar {
        display: none;
    }

    .features-list--carousel-active.features-list--columns-1 .feature-item {
        flex: 0 0 100%;
        scroll-snap-align: center;
        min-width: 100%;
    }

    .features-list--carousel-active.features-list--columns-2 .feature-item {
        flex: 0 0 calc(50% - 0.75rem);
        scroll-snap-align: start;
        min-width: calc(50% - 0.75rem);
    }

    .features-list--carousel-active.features-list--columns-3 .feature-item {
        flex: 0 0 calc(33.333% - 1rem);
        scroll-snap-align: start;
        min-width: calc(33.333% - 1rem);
    }

    .features-list--carousel-active.features-list--columns-4 .feature-item {
        flex: 0 0 calc(25% - 1.125rem);
        scroll-snap-align: start;
        min-width: calc(25% - 1.125rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    .features-list[data-carousel="true"] {
        scroll-behavior: auto !important;
        scroll-snap-type: none !important;
    }
}

/* ============================================
   📐 COLUMNS BLOCK - BEM Refactored
   ============================================ */

.columns-block {
    width: 100%;
    /* Reset outer frame from .cms-block inheritance */
    padding: 0 !important;
    margin: 0 !important;
    margin-bottom: var(--spacing-desktop) !important;
    border: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
    background: transparent !important;
    border-radius: 0 !important;
}

.columns-block:hover {
    box-shadow: none !important;
}

.columns-block__grid {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
}

/* Mobile-first: single column default */
.columns-block--2-cols .columns-block__grid,
.columns-block--3-cols .columns-block__grid,
.columns-block--4-cols .columns-block__grid {
    grid-template-columns: 1fr;
}

/* Tablet+ (640px+): multi-column layout */
@media (min-width: 640px) {
    .columns-block--2-cols .columns-block__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .columns-block--3-cols .columns-block__grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .columns-block--4-cols .columns-block__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Desktop (1024px+): 4-cols full layout */
@media (min-width: 1024px) {
    .columns-block--4-cols .columns-block__grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Gap sizes using CSS variables */
.columns-block--gap-sm .columns-block__grid {
    gap: var(--grid-gap-mobile);
    /* 0.5rem = 8px */
}

.columns-block--gap-md .columns-block__grid {
    gap: var(--grid-gap-tablet);
    /* 1rem = 16px */
}

.columns-block--gap-lg .columns-block__grid {
    gap: var(--grid-gap-desktop);
    /* 1.5rem = 24px */
}

.columns-block__column {
    min-width: 0;
}

/* Reset frame styling for elements inside columns - display directly on base */
.columns-block__column,
.columns-block__column .cms-block,
.columns-block__column>*,
.columns-block__column .rich-text,
.columns-block__column .block-rich_text,
.columns-block__column>div {
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
    background: transparent !important;
    border-radius: 0 !important;
}

.columns-block__column .cms-block:hover,
.columns-block__column>*:hover {
    box-shadow: none !important;
    background: transparent !important;
}

/* ============================================
   📢 AD BLOCK - BEM Refactored
   ============================================ */

/* Reset cms-block styling inherited from cms_components.css */
.ad-block,
.ad-block:hover {
    clear: both;
    padding: 0 !important;
    margin-bottom: 1rem;
    border-radius: 0 !important;
    box-shadow: none !important;
    background-color: transparent !important;
    border: none !important;
}

.ad-block--left {
    float: left;
    margin-right: 1rem;
    margin-bottom: 1rem;
    width: var(--ad-width-percent, 33%);
}

.ad-block--right {
    float: right;
    margin-left: 1rem;
    margin-bottom: 1rem;
    width: var(--ad-width-percent, 33%);
}

.ad-block--fullwidth {
    width: 100%;
}

.ad-block--inline {
    display: block;
    width: 100%;
}

.ad-block__container {
    /* Removed wrapper styling - banner content displays directly */
    padding: 0;
    margin: 0;
}

/* Cột hẹp (≤30%): scale toàn bộ banner (CTA, title, subtitle) xuống tỷ lệ với ô quảng cáo.
   CTA dùng em trong banner_item.css → auto scale theo font-size này. */
.ad-block__container--narrow>*:not(.ad-block__label) {
    font-size: 0.875rem;
}

/* Title/subtitle trong cột hẹp: override Tailwind rem classes để scale đồng bộ */
.ad-block__container--narrow .banner-item__title,
.ad-block__container--narrow .banner-item__title * {
    font-size: 0.8125rem !important;
}

.ad-block__container--narrow .banner-item__subtitle,
.ad-block__container--narrow .banner-item__subtitle * {
    font-size: 0.6875rem !important;
}

/* Nhãn quảng cáo: CSS đã chuyển sang banner_item.css (.banner-ad-label) — DRY, 1 nguồn duy nhất.
   Giữ fallback cho .ad-block__label nếu còn cache HTML cũ. */
.ad-block__label {
    display: none;
    /* Ẩn label cũ — đã thay bằng .banner-ad-label trong banner_item.html */
}

/* Đảm bảo image/link không có margin/padding */
.ad-block__container>a>img,
.ad-block__container>a>picture {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-top: none !important;
    display: block;
    line-height: 0;
    vertical-align: top;
}

/* Container div/link reset - không ép line-height:0 vì ảnh hưởng CTA text */
.ad-block__container>.block {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Legacy .ad-block__label — hidden, replaced by .banner-ad-label */

.ad-block--empty {
    padding: 1rem;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: var(--block-radius);
}

.ad-block--empty p {
    font-size: 0.875rem;
    color: #92400e;
    margin: 0;
}

/* ============================================
   ✨ HERO BLOCK - BEM Additions
   ============================================ */

.hero-block__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* Overlay opacity modifiers — dùng CSS class thay inline style */
.hero-block__overlay--dark-20 {
    background: rgba(0, 0, 0, 0.20);
}

.hero-block__overlay--dark-40 {
    background: rgba(0, 0, 0, 0.40);
}

.hero-block__overlay--dark-60 {
    background: rgba(0, 0, 0, 0.60);
}

.hero-block__overlay--dark-80 {
    background: rgba(0, 0, 0, 0.80);
}

.hero-block__overlay--light-20 {
    background: rgba(255, 255, 255, 0.20);
}

.hero-block__overlay--light-40 {
    background: rgba(255, 255, 255, 0.40);
}

.hero-block__overlay--light-60 {
    background: rgba(255, 255, 255, 0.60);
}

.hero-block__overlay--light-80 {
    background: rgba(255, 255, 255, 0.80);
}

/* CTA overlay — tương tự hero */
.cta-block__overlay--dark-20 {
    background: rgba(0, 0, 0, 0.20);
}

.cta-block__overlay--dark-40 {
    background: rgba(0, 0, 0, 0.40);
}

.cta-block__overlay--dark-60 {
    background: rgba(0, 0, 0, 0.60);
}

.cta-block__overlay--dark-80 {
    background: rgba(0, 0, 0, 0.80);
}

.cta-block__overlay--light-20 {
    background: rgba(255, 255, 255, 0.20);
}

.cta-block__overlay--light-40 {
    background: rgba(255, 255, 255, 0.40);
}

.cta-block__overlay--light-60 {
    background: rgba(255, 255, 255, 0.60);
}

.cta-block__overlay--light-80 {
    background: rgba(255, 255, 255, 0.80);
}

.hero-block__content {
    position: relative;
    z-index: 10;
    max-width: 800px;
    margin: 0 auto;
    padding: 4rem 2rem;
}

/* Hero content alignment */
.hero-block__content--center {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.hero-block__content--left {
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    margin-left: 0;
    margin-right: auto;
}

/* Hero title và description alignment */
.hero-block__content--center .hero-title,
.hero-block__content--center .hero-title p,
.hero-block__content--center .hero-title *,
.hero-block__content--center .hero-description,
.hero-block__content--center .hero-description p,
.hero-block__content--center .hero-description * {
    text-align: center !important;
}

.hero-block__content--left .hero-title,
.hero-block__content--left .hero-title p,
.hero-block__content--left .hero-title *,
.hero-block__content--left .hero-description,
.hero-block__content--left .hero-description p,
.hero-block__content--left .hero-description * {
    text-align: left !important;
}

/* Hero badge alignment */
.hero-block__content--center .hero-badge {
    margin: 0 auto;
}

.hero-block__content--left .hero-badge {
    margin: 0;
}

/* Hero button alignment */
.hero-block__content--center .hero-cta {
    margin: 0 auto;
}

.hero-block__content--left .hero-cta {
    margin: 0;
}

/* ============================================
   MIGRATED FROM cms_components.css
   Banner CTA & Image Overlay Layouts
   ============================================ */

/* CTA Layout - Icon | Content | Button */
.banner-cta-layout__inner {
    padding: 1.25rem 1.5rem;
    min-height: 100px;
}

.banner-cta-layout__grid {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1rem 1.5rem;
    max-width: 64rem;
    margin: 0 auto;
}

.banner-cta-layout__icon {
    font-size: 2.5rem;
    line-height: 1;
    flex-shrink: 0;
}

.banner-cta-layout__content {
    flex: 1;
    min-width: 0;
    text-align: center;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
}

.banner-cta-layout__title {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 0.25rem 0;
    line-height: 1.3;
    text-align: center;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    max-width: 100%;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: optimizeLegibility !important;
    transform: none !important;
    filter: none !important;
    backface-visibility: hidden;
    isolation: isolate;
}

.banner-cta-layout__title p {
    margin: 0 0 0.25rem 0;
}

.banner-cta-layout__subtitle {
    font-size: 0.9375rem;
    opacity: 0.92;
    margin: 0;
    line-height: 1.4;
    text-align: center;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    max-width: 100%;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: optimizeLegibility !important;
    transform: none !important;
    filter: none !important;
    backface-visibility: hidden;
    isolation: isolate;
}

.banner-cta-layout__subtitle p {
    margin: 0;
}

/* Theme text colors */
.banner-cta-layout--dark .banner-cta-layout__title,
.banner-cta-layout--dark .banner-cta-layout__subtitle,
.banner-cta-layout--dark .banner-cta-layout__title p,
.banner-cta-layout--dark .banner-cta-layout__subtitle p {
    color: #fff !important;
}

.banner-cta-layout--light.banner-cta-layout .banner-cta-layout__title,
.banner-cta-layout--light .banner-cta-layout__title,
.banner-cta-layout--light .banner-cta-layout__title p {
    color: #1e293b !important;
}

.banner-cta-layout--light.banner-cta-layout .banner-cta-layout__subtitle,
.banner-cta-layout--light .banner-cta-layout__subtitle,
.banner-cta-layout--light .banner-cta-layout__subtitle p {
    color: #475569 !important;
}

.banner-cta-layout--royal .banner-cta-layout__title,
.banner-cta-layout--royal .banner-cta-layout__subtitle,
.banner-cta-layout--royal .banner-cta-layout__title p,
.banner-cta-layout--royal .banner-cta-layout__subtitle p {
    color: #F3E5AB !important;
}

.banner-cta-layout--cyber .banner-cta-layout__title,
.banner-cta-layout--cyber .banner-cta-layout__subtitle,
.banner-cta-layout--cyber .banner-cta-layout__title p,
.banner-cta-layout--cyber .banner-cta-layout__subtitle p {
    color: #FB923C !important;
}

.banner-cta-layout__button {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    min-height: 40px;
    padding: 0 1.25rem;
    font-weight: 600;
    font-size: 0.9375rem;
    border-radius: 0.5rem;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    width: fit-content;
    max-width: 100%;
    transition: box-shadow 0.2s ease, background 0.2s ease;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.banner-cta-layout__button--primary {
    background: var(--gradient-purple, linear-gradient(135deg, #6366f1 0%, #ec4899 100%));
    color: #fff;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.35);
}

.banner-cta-layout__button--primary:hover {
    box-shadow: 0 6px 24px rgba(99, 102, 241, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.banner-cta-layout__button--white {
    background: rgba(255, 255, 255, 0.95);
    color: #5b21b6;
}

.banner-cta-layout__button--white:hover {
    background: #fff;
    color: #4c1d95;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.banner-cta-layout__button--outline_white {
    background: transparent;
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.9);
}

.banner-cta-layout__button--outline_white:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: #fff;
    box-shadow: 0 4px 16px rgba(255, 255, 255, 0.2);
}

.banner-cta-layout__button--dark {
    background: #1f2937;
    color: #fff;
}

.banner-cta-layout__button--dark:hover {
    background: #111827;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.banner-cta-layout__button--primary_purple {
    background: var(--gradient-purple, linear-gradient(135deg, #6366f1 0%, #a855f7 100%));
    color: #fff;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.35);
}

.banner-cta-layout__button--primary_blue {
    background: var(--gradient-blue, linear-gradient(135deg, #0ea5e9 0%, #2563eb 100%));
    color: #fff;
    box-shadow: 0 4px 15px rgba(37, 99, 235, 0.35);
}

.banner-cta-layout__button--primary_green {
    background: var(--gradient-green, linear-gradient(135deg, #10b981 0%, #22c55e 100%));
    color: #fff;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.35);
}

.banner-cta-layout__button--primary_orange {
    background: linear-gradient(135deg, #f97316 0%, #facc15 100%);
    color: #111827;
    box-shadow: 0 4px 15px rgba(249, 115, 22, 0.35);
}

.banner-cta-layout__button--sunset_dream {
    background: #FACC15;
    color: #111827;
    box-shadow: 0 4px 15px rgba(250, 204, 21, 0.4);
}

.banner-cta-layout__button--deep_ocean {
    background: rgba(255, 255, 255, 0.95);
    color: #2563eb;
}

.banner-cta-layout__button--royal_luxury {
    background: linear-gradient(135deg, #D4AF37 0%, #AA8432 100%);
    color: #000;
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4);
}

.banner-cta-layout__button--cyber_sale {
    background: linear-gradient(135deg, #F97316 0%, #E11D48 100%);
    color: #fff;
    box-shadow: 0 4px 15px rgba(249, 115, 22, 0.4);
}

.banner-cta-layout__button--flash_sale {
    background: rgba(255, 255, 255, 0.95);
    color: #E11D48;
}

.banner-cta-layout__button--midnight_tech {
    background: linear-gradient(135deg, #3B82F6 0%, #2DD4BF 100%);
    color: #fff;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
}

.banner-cta-layout__button--soft_garden {
    background: linear-gradient(135deg, #FB7185 0%, #F472B6 100%);
    color: #fff;
    box-shadow: 0 4px 15px rgba(251, 113, 133, 0.4);
}

.banner-cta-layout__button--neon_purple {
    background: #39FF14;
    color: #000;
    box-shadow: 0 4px 15px rgba(57, 255, 20, 0.4);
}

.banner-cta-layout__button-wrapper {
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    width: 100%;
}

/* Image+Overlay Layout */
.banner-image-overlay-layout__inner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    min-height: 220px;
}

.banner-image-overlay-layout__image {
    position: absolute;
    inset: 0;
    grid-column: 1 / -1;
}

.banner-image-overlay-layout__image img,
.banner-image-overlay-layout__image picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.banner-image-overlay-layout__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.4) 45%, transparent 70%);
    grid-column: 1 / -1;
}

.banner-image-overlay-layout__content {
    position: relative;
    grid-column: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 1.5rem 2rem;
    z-index: 1;
}

.banner-image-overlay-layout__title {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
    line-height: 1.3;
    text-align: center;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    max-width: 100%;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: optimizeLegibility !important;
    transform: none !important;
    filter: none !important;
    backface-visibility: hidden;
    isolation: isolate;
}

.banner-image-overlay-layout__title p {
    margin: 0 0 0.5rem 0;
}

.banner-image-overlay-layout__subtitle {
    font-size: 1rem;
    margin: 0 0 1rem 0;
    line-height: 1.4;
    text-align: center;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    max-width: 100%;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: optimizeLegibility !important;
    transform: none !important;
    filter: none !important;
    backface-visibility: hidden;
    isolation: isolate;
}

.banner-image-overlay-layout__subtitle p {
    margin: 0 0 1rem 0;
}

.banner-image-overlay-layout--dark .banner-image-overlay-layout__title,
.banner-image-overlay-layout--dark .banner-image-overlay-layout__subtitle,
.banner-image-overlay-layout--dark .banner-image-overlay-layout__title p,
.banner-image-overlay-layout--dark .banner-image-overlay-layout__subtitle p {
    color: #fff !important;
}

.banner-image-overlay-layout--light .banner-image-overlay-layout__title,
.banner-image-overlay-layout--light .banner-image-overlay-layout__title p {
    color: #1e293b !important;
}

.banner-image-overlay-layout--light .banner-image-overlay-layout__subtitle,
.banner-image-overlay-layout--light .banner-image-overlay-layout__subtitle p {
    color: #475569 !important;
}

.banner-image-overlay-layout__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    min-height: 40px;
    padding: 0 1.25rem;
    background: #2563eb;
    color: #fff;
    font-weight: 600;
    font-size: 0.9375rem;
    border-radius: 0.5rem;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    width: fit-content;
    max-width: 100%;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.banner-image-overlay-layout__button--primary {
    background: #2563eb;
    color: #fff;
}

.banner-image-overlay-layout__button--primary:hover {
    background: #1d4ed8;
}

.banner-image-overlay-layout__button--white {
    background: rgba(255, 255, 255, 0.95);
    color: #1f2937;
}

.banner-image-overlay-layout__button--white:hover {
    background: #fff;
    color: #111827;
}

/* ============================================
   Columns Block Layout
   ============================================ */
.columns-block {
    display: grid;
    gap: var(--cms-spacing-lg, 1.5rem);
}

.columns-block--cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

.columns-block--cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

.columns-block--cols-4 {
    grid-template-columns: repeat(4, 1fr);
}

.columns-block--gap-sm {
    gap: 0.75rem;
}

.columns-block--gap-md {
    gap: 1rem;
}

.columns-block--gap-lg {
    gap: 1.5rem;
}

.columns-block__col {
    min-width: 0;
    overflow-wrap: break-word;
}

@media (max-width: 639px) {

    .columns-block--cols-2,
    .columns-block--cols-3,
    .columns-block--cols-4 {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 640px) and (max-width: 1023px) {
    .columns-block--cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .columns-block--cols-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================
   Dynamic Link Block
   ============================================ */
.block-dynamic_link {
    margin: 1.5rem 0;
}

.dynamic-link-wrapper {
    margin: 1.5rem 0;
}

.cta-block .block-dynamic_link,
.cta-block .dynamic-link-wrapper,
.product-showcase-block .block-dynamic_link,
.product-showcase-block .dynamic-link-wrapper {
    margin: 0;
}

.dynamic-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 10px;
}

.dynamic-link--primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 0.75rem 1.5rem;
}

.dynamic-link--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
}

.dynamic-link--secondary {
    background: #e2e8f0;
    color: #475569;
    padding: 0.75rem 1.5rem;
}

.dynamic-link--secondary:hover {
    background: #cbd5e1;
    transform: translateY(-2px);
}

.dynamic-link--outline {
    background: transparent;
    color: #2563eb;
    border: 2px solid #2563eb;
    padding: 0.75rem 1.5rem;
}

.dynamic-link--outline:hover {
    background: #2563eb;
    color: white;
}

.dynamic-link--link {
    color: #2563eb;
    text-decoration: underline;
    padding: 0;
    border-radius: 0;
}

.dynamic-link--link:hover {
    color: #1d4ed8;
}

.dynamic-link--success {
    background-color: #10b981;
    color: #ffffff;
    border: 2px solid #10b981;
    padding: 0.75rem 1.5rem;
}

.dynamic-link--success:hover {
    background-color: #059669;
    border-color: #059669;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(16, 185, 129, 0.3);
}

.dynamic-link--danger {
    background-color: #ef4444;
    color: #ffffff;
    border: 2px solid #ef4444;
    padding: 0.75rem 1.5rem;
}

.dynamic-link--danger:hover {
    background-color: #dc2626;
    border-color: #dc2626;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(239, 68, 68, 0.3);
}

.dynamic-link--warning {
    background-color: #f59e0b;
    color: #ffffff;
    border: 2px solid #f59e0b;
    padding: 0.75rem 1.5rem;
}

.dynamic-link--warning:hover {
    background-color: #d97706;
    border-color: #d97706;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(245, 158, 11, 0.3);
}

.dynamic-link--info {
    background-color: #3b82f6;
    color: #ffffff;
    border: 2px solid #3b82f6;
    padding: 0.75rem 1.5rem;
}

.dynamic-link--info:hover {
    background-color: #2563eb;
    border-color: #2563eb;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.3);
}

.dynamic-link__icon {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

/* ============================================
   Product Tabs Content - Edge-aligned
   ============================================ */
.product-introduction-content,
.product-specifications-content {
    padding: 0 !important;
    margin: 0;
    list-style: none !important;
}

.product-introduction-content *,
.product-specifications-content * {
    list-style: none !important;
    list-style-type: none !important;
}

.product-introduction-content ul,
.product-introduction-content ol,
.product-introduction-content li,
.product-specifications-content ul,
.product-specifications-content ol,
.product-specifications-content li {
    list-style: none !important;
    list-style-type: none !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
}

/* Block trong product tabs: edge-aligned nhưng KHÔNG override border-radius */
/* Mỗi block tự quản lý border-radius → UI nhất quán ở mọi nơi gọi block */
.product-introduction-content .cms-block,
.product-specifications-content .cms-block {
    margin-left: 0;
    margin-right: 0;
    list-style: none !important;
}

.product-detail-tabs .tab-content {
    display: none;
}

.product-detail-tabs .tab-content.active {
    display: block;
}

.trust-badges-wrapper {
    margin-top: var(--product-detail-badge-spacing, 1.5rem);
}

.product-detail-tabs {
    margin-top: var(--product-detail-badge-spacing, 1.5rem);
}

/* ============================================
   ♿ ACCESSIBILITY: Reduced Motion
   Respect user preference for less animation
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    .testimonial-block {
        transition: none !important;
    }

    .testimonial-block:hover,
    .testimonial-block--minimal:hover {
        transform: none !important;
    }

    .testimonial-grid[data-carousel="true"] {
        scroll-behavior: auto !important;
        scroll-snap-type: none !important;
    }

    /* CTA Block */
    .cta-block {
        transition: none !important;
    }

    /* Hero Block */
    .hero-block,
    .hero-cta {
        transition: none !important;
    }

    .hero-cta:hover {
        transform: none !important;
    }

    .hero-orb {
        animation: none !important;
    }

    .hero-badge-dot {
        animation: none !important;
    }

    /* Stats Counter */
    .stat-item {
        transition: none !important;
    }

    .stat-item:hover {
        transform: none !important;
    }

    /* Accordion */
    .accordion-content {
        transition: none !important;
    }

    .accordion-icon {
        transition: none !important;
    }

    /* Timeline */
    .timeline-item {
        transition: none !important;
    }

    .timeline-marker {
        transition: none !important;
    }

    .timeline-description-wrapper {
        transition: none !important;
    }

    /* Tabs */
    .tab-button {
        transition: none !important;
    }

    .tab-panel {
        animation: none !important;
        transition: none !important;
    }

    /* Comparison */
    .comparison-column {
        transition: none !important;
    }

    .comparison-column:hover {
        transform: none !important;
    }

    /* Feature Block */
    .feature-item {
        transition: none !important;
    }

    .feature-item:hover {
        transform: none !important;
    }

    /* Enhanced Image */
    .enhanced-image__link:hover .enhanced-image-img {
        transition: none !important;
    }
}