:root {
    /* Main Theme Colors */
    --primary: #2563eb;
    --primary-light: #3b82f6;
    --primary-dark: #1d4ed8;
    --primary-gradient: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    --secondary: #f97316;
    --secondary-light: #fb923c;
    --secondary-dark: #ea580c;
    --secondary-gradient: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-light) 100%);
    /* Neutral Colors */
    --dark: #0f172a;
    --dark-secondary: #1e293b;
    --light: #f8fafc;
    --light-secondary: #f1f5f9;
    --gray: #64748b;
    --gray-light: #cbd5e1;
    --gray-dark: #475569;
    /* Status Colors */
    --success: #10b981;
    --success-light: #34d399;
    --warning: #f59e0b;
    --warning-light: #fbbf24;
    --danger: #ef4444;
    --danger-light: #f87171;
    --info: #0ea5e9;
    --info-light: #38bdf8;
    /* Spacing */
    --spacing-1: 0.25rem;
    /* 4px */
    --spacing-2: 0.5rem;
    /* 8px */
    --spacing-3: 0.75rem;
    /* 12px */
    --spacing-4: 1rem;
    /* 16px */
    --spacing-5: 1.25rem;
    /* 20px */
    --spacing-6: 1.5rem;
    /* 24px */
    --spacing-8: 2rem;
    /* 32px */
    --spacing-10: 2.5rem;
    /* 40px */
    --spacing-12: 3rem;
    /* 48px */
    --spacing-16: 4rem;
    /* 64px */
    --spacing-20: 5rem;
    /* 80px */
    --spacing-24: 6rem;
    /* 96px */
    --spacing-32: 8rem;
    /* 128px */
    /* Border Radius */
    --radius-sm: 0.125rem;
    /* 2px */
    --radius-default: 0.25rem;
    /* 4px */
    --radius-md: 0.375rem;
    /* 6px */
    --radius-lg: 0.5rem;
    /* 8px */
    --radius-xl: 0.75rem;
    /* 12px */
    --radius-2xl: 1rem;
    /* 16px */
    --radius-3xl: 1.5rem;
    /* 24px */
    --radius-full: 9999px;
    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
    /* Z-index */
    --z-0: 0;
    --z-10: 10;
    --z-20: 20;
    --z-30: 30;
    --z-40: 40;
    --z-50: 50;
    --z-100: 100;
    --z-max: 9999;
    /* Transitions */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
    /* Container Widths */
    --container-sm: 640px;
    --container-md: 768px;
    --container-lg: 1024px;
    --container-xl: 1280px;
    --container-2xl: 1536px;
    /* Custom Properties */
    --header-height: 80px;
    --header-height-sm: 64px;
    --content-width: 1200px;
    --card-hover-y: -6px;
    --blur-strength: 8px;
    --glow-strength: 40px;
    --hero-overlay-opacity: 0.7;
}

.container_roadmap {
    width: 90%;
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 0 var(--spacing-4);
}

.section_roadmap {
    padding: var(--spacing-10) 0;
    position: relative;
    overflow: hidden;
}

.section-header {
    text-align: center;
    margin-bottom: var(--spacing-16);
    position: relative;
}

.section-subtitle {
    font-size: var(--font-size-lg);
    color: var(--gray);
    max-width: 700px;
    margin: 0 auto;
}

.roadmap-timeline {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
    padding: var(--spacing-8) 0;
}

.roadmap-timeline::before {
    content: '';
    position: absolute;
    width: 4px;
    background: var(--primary-light);
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 2px;
}

.timeline-item {
    margin-bottom: var(--spacing-16);
    position: relative;
}

.timeline-icon {
    position: absolute;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--primary-gradient);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    z-index: 2;
    box-shadow: var(--shadow-lg);
    transition: all var(--transition);
}

.timeline-item:hover .timeline-icon {
    transform: translateX(-50%) scale(1.1);
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.4);
}

.timeline-content {
    width: 45%;
    padding: var(--spacing-6);
    background: var(--light);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    position: relative;
    transition: all var(--transition);
}

.timeline-content:hover {
    transform: translateY(var(--card-hover-y));
    box-shadow: var(--shadow-xl);
}

.timeline-content::after {
    content: '';
    position: absolute;
    top: 20px;
    width: 20px;
    height: 20px;
    background: var(--light);
    transform: rotate(45deg);
    box-shadow: var(--shadow);
    z-index: -1;
    transition: all var(--transition);
}

.timeline-content {
    left: 0;
}

.timeline-content::after {
    right: -10px;
}

.timeline-content.right {
    left: 55%;
}

.timeline-content.right::after {
    left: -10px;
}

.timeline-content h3 {
    color: var(--primary);
    margin-bottom: var(--spacing-3);
    transition: all var(--transition);
}

.timeline-content:hover h3 {
    text-shadow: 0 0 10px rgba(59, 130, 246, 0.3);
}

.timeline-content p {
    margin-bottom: var(--spacing-4);
    color: var(--gray-dark);
}

.timeline-content ul {
    list-style: disc;
    padding-left: var(--spacing-6);
    margin-bottom: 0;
}

.timeline-content ul li {
    margin-bottom: var(--spacing-2);
    font-size: var(--font-size-sm);
    color: var(--gray);
}

/* Tablet (landscape) - 1024px and down */
@media (max-width: 1024px) {
    .container_roadmap {
        width: 90%;
    }

    .section_roadmap {
        padding: var(--spacing-16) 0;
    }

    .roadmap-timeline {
        padding-left: var(--spacing-8);
        padding-right: var(--spacing-8);
    }

    .side-nav {
        display: none;
    }
}

/* Tablet (portrait) - 768px and down */
@media (max-width: 768px) {
    .section_roadmap {
        padding: var(--spacing-12) 0;
    }

    .section-header {
        margin-bottom: var(--spacing-12);
    }

    .roadmap-timeline::before {
        left: 20px;
    }

    .timeline-icon {
        left: 20px;
        width: 45px;
        height: 45px;
        font-size: 1.2rem;
    }

    .timeline-content,
    .timeline-content.right {
        width: calc(100% - 80px);
        left: 60px;
    }

    .timeline-content::after,
    .timeline-content.right::after {
        left: -10px;
        right: auto;
    }
}

/* Mobile - 576px and down */
@media (max-width: 576px) {
    .container_roadmap {
        width: 100%;
        padding: 0 var(--spacing-3);
    }

    .timeline-content h3 {
        font-size: 16px;
        font-weight: bold;
    }

    .timeline-content p {
        font-size: 13px;
    }

    .timeline-content ul li {
        font-size: 13px;
    }
}

/* Cycle Time */
:root {
    --brand-blue: #0A84C6;
    /* Fill stripe */
    --idle-green: #20A467;
    /* Idle */
    --react-red: #dc3545;
    /* React (yêu cầu) */
    --combo-blue: #82cfff;
    /* Fill+React gộp */
    --settle: #0dcaf0;
    /* Settle (info) */
    --decant: #ffc107;
    /* Decant (warning) */
}
/* body {
    background: #0b1f2e
} */
.chart-wrap {
    background: #0d1326;
    border: 1px solid #223147;
    border-radius: .75rem;
    padding: .5rem;
    overflow: auto
}

.svgwrap {
    min-width: 820px
}

.y-label {
    fill: #cfe6ff
}

.grid-line {
    stroke: #2a3556;
    stroke-dasharray: 3 4
}

.muted {
    color: #9fb2ff
}

.brand-logo {
    height: 34px
}