:root {
    --primary-color: #0d6efd;
    --orange-color: #fd7e14; /* Màu cam chủ đạo */
    --orange-dark: #e66b0d;
}

body {
    font-family: 'Nunito', sans-serif;
    background-color: #f8f9fa;
}

/* Utilities */
.text-orange {
    color: var(--orange-color) !important;
}

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

.btn-primary-orange {
    background-color: var(--orange-color);
    border-color: var(--orange-color);
    color: white;
}

    .btn-primary-orange:hover {
        background-color: var(--orange-dark);
        color: white;
    }

.btn-outline-orange {
    color: var(--orange-color);
    border-color: var(--orange-color);
}

    .btn-outline-orange:hover {
        background-color: var(--orange-color);
        color: white;
    }

.hover-orange:hover {
    color: var(--orange-color) !important;
    transition: color 0.3s;
}

/* Separator trang trí tiêu đề */
.separator {
    height: 4px;
    width: 60px;
    background: var(--orange-color);
    border-radius: 2px;
}

/* Swiper Slider */
.swiper {
    width: 100%;
    height: 500px; /* Chiều cao slide */
}

.slide-bg {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    position: relative;
}

.slide-overlay {
    background: rgba(0, 0, 0, 0.4); /* Lớp phủ đen mờ để rõ chữ */
    height: 100%;
    width: 100%;
}

.animate-up {
    animation: fadeInUp 1s ease-out;
}

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

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

/* Card Đăng ký (Action Cards) */
.negative-margin-top {
    margin-top: -60px; /* Đẩy lên đè lên Slider */
    position: relative;
    z-index: 10;
}

.bg-primary-gradient {
    background: linear-gradient(135deg, #4e73df 0%, #224abe 100%);
}

.bg-orange-gradient {
    background: linear-gradient(135deg, #f6c23e 0%, #fd7e14 100%);
}

.card-hover {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

    .card-hover:hover {
        transform: translateY(-10px);
        box-shadow: 0 1rem 3rem rgba(0,0,0,.175) !important;
    }

/* Solution & Author Cards */
.solution-card {
    transition: all 0.3s;
    overflow: hidden;
}

    .solution-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) !important;
    }

    .solution-card img {
        transition: transform 0.5s;
    }

    .solution-card:hover img {
        transform: scale(1.05); /* Zoom ảnh nhẹ */
    }

.author-card {
    border-left: 4px solid var(--orange-color) !important;
    transition: background 0.3s;
}

    .author-card:hover {
        background-color: #fff8f3 !important; /* Màu cam nhạt */
    }

/* Footer Social Icons */
.social-icons .btn {
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s;
}

    .social-icons .btn:hover {
        transform: scale(1.2);
    }
/* Khắc phục lỗi menu Top Bar bị Navbar che */
.top-bar {
    position: relative; /* Bắt buộc để z-index có hiệu lực */
    z-index: 1030; /* Bootstrap sticky-top là 1020, ta đặt 1030 để nó nổi lên trên */
}

    /* Tùy chỉnh thêm để Dropdown menu đẹp hơn */
    .top-bar .dropdown-menu {
        margin-top: 8px; /* Tạo khoảng cách nhỏ với thanh topbar */
        border: none;
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); /* Đổ bóng cho nổi bật */
        z-index: 1031; /* Đảm bảo menu con luôn cao nhất */
    }
.bg-purple {
    background-color: #6f42c1 !important;
}

.bg-teal {
    background-color: #20c997 !important;
}

.bg-orange {
    background-color: #fd7e14 !important;
}