body {
    font-family: 'Inter', sans-serif;
}

:root {
    /* Brand Palette */
    --teal-600: #0d9488;
    --primary-light: #ccfbf1;     /* Teal 100 */
    --slate-900: #0f172a;
    --slate-700: #334155;
    --slate-500: #64748b;
    --slate-200: #e2e8f0;
    --slate-50: #f8fafc;
    --transition-fast: 0.2s ease;
}

.py-section {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

.bg-slate-50 {
    background-color: var(--slate-50) !important;
}

.badge.bg-primary-light {
    background-color: var(--primary-light) !important;
    color: var(--bs-primary) !important;
    font-weight: 600;
    padding: 0.35rem 0.75rem;
    border-radius: 50px;
}

.dynamic-line-clamp {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-secondary) !important;
    transition: color var(--transition-fast);
}

.dynamic-line-clamp:hover {
    color: var(--accent-color) !important;
}

.hover-tag {
    border-color: var(--slate-200) !important;
    padding: 0.4rem 0.85rem !important;
    border-radius: 50px !important;
    transition: all var(--transition-fast);
}

.hover-tag:hover {
    background-color: var(--bs-primary) !important;
    color: white !important;
    border-color: var(--bs-primary) !important;
}

.hover-list-item {
    transition: background-color var(--transition-fast);
    cursor: pointer;
    background-color: transparent !important;
    color: var(--text-primary, var(--slate-900)) !important;
}

/* Chữ bên trong span cũng phải đổi màu theo theme */
.hover-list-item span {
    color: var(--text-primary, var(--slate-900)) !important;
}

.hover-list-item:hover {
    background-color: rgba(20, 184, 166, 0.08) !important;
}

@media (min-width: 992px) {
    .sticky-sidebar {
        position: sticky !important;
        top: 5rem !important;
        z-index: 1000;
    }
}


.card {
    border-radius: 16px !important;
    background-color: var(--card-bg, #ffffff) !important;
    border: 1px solid var(--card-border, var(--slate-200)) !important;
    color: var(--text-primary, var(--slate-900)) !important;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.card-title,
h3, h5, h6 {
    color: var(--text-primary, var(--slate-900)) !important;
}

.card-text {
    color: var(--text-secondary, var(--slate-700)) !important;
}