.process-title {
    font-size: 4rem;
    line-height: 4rem;
    display: inline-block;
    margin: 10px;
}
.odd {
    color: #808080; /* Màu xám cho phần tử lẻ */
}
.even {
    color: #ffffff; /* Màu trắng cho phần tử chẵn */
}
.step-header {
    display: flex;
    align-items: flex-start;
    margin-bottom: 1rem;
}
.step-number {
    font-size: 1.5rem;
    font-weight: bold;
    color: #808080;
    margin-right: 1rem;
}
.step-title {
    font-size: 2rem;
    font-weight: bold;
    margin: 0;
}
.step-subtitle {
    font-size: 1.2rem;
    font-weight: bold;
    color: #333;
    margin: 0;
}
 /* Màu xám cho phần tử lẻ */
 .odd_st {
    color: #333;
}

/* Màu trắng cho phần tử chẵn */
.even_st {
    color: #ffffff;
}

.step-content ul {
    list-style-type: none;
    padding-left: 0;
}
.step-content.odd li::before {
    content: "•";
    color: #333;
    font-weight: bold;
    margin-right: 0.5rem;
}
.step-content.even li::before {
    content: "•";
    color: #fff;
    font-weight: bold;
    margin-right: 0.5rem;
}
.image-container img {
    max-width: 100%;
    height: auto;
    display: block; /* Đảm bảo hình ảnh không bị lệch */
}

.row {
    display: flex; /* Đảm bảo row sử dụng flexbox */
    align-items: center; /* Căn giữa theo chiều dọc */
}
.col-md-6 {
    display: flex; /* Đảm bảo cột sử dụng flexbox */
    flex-direction: column; /* Sắp xếp nội dung trong cột theo chiều dọc */
    justify-content: center; /* Căn giữa nội dung trong cột */
}
.step-content {
    display: block; /* Loại bỏ flexbox khỏi step-content */
}
.rounded-box {
    /* width: 300px;  */
    /* height: 150px;  */
    background-color: #007bff; /* Màu nền */
    border-radius: 210px 0 0 210px; /* Bo tròn góc trên trái và dưới trái */
    color: white; /* Màu chữ */

}
/* process-nav */
.wrap-workflow-process {
    display: flex;
    background-color: #f0f0f0; /* Màu nền xám nhạt cho toàn bộ thanh nav */
    border-radius: 9999px; /* Bo tròn toàn bộ thanh nav */
    overflow: hidden; /* Ẩn phần dư thừa của các item */
    padding: 5px; /* Khoảng cách giữa các item */
    list-style: none; /* Loại bỏ dấu chấm của ul */
    margin: 0;
    transition: all 0.3s ease; /* Hiệu ứng mượt mà khi chuyển đổi */
}
/* Thêm class fixed khi cuộn qua phần tử */
.wrap-workflow-process.fixed {
    position: fixed; /* Cố định phần tử */
    top: 0; /* Đưa phần tử lên đầu màn hình */
    left: 0;
    width: 100%; /* Chiếm toàn bộ chiều rộng */
    z-index: 1000; /* Đảm bảo phần tử nằm trên các phần tử khác */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Thêm bóng đổ để nổi bật */
}

.item-process {
    display: flex;
    flex-direction: row; /* Sắp xếp nội dung theo hàng ngang */
    align-items: center; /* Căn giữa nội dung theo chiều dọc */
    gap: 5px; /* Khoảng cách giữa số và text */
    padding: 0 15px; /* Padding cho mỗi item */
    flex: 1; /* Chiều rộng đồng đều cho các item */
    text-align: center; /* Căn giữa text */
    cursor: pointer; /* Hiệu ứng con trỏ khi hover */
    background-color: #ccc; /* Màu nền mặc định (xám) */
    color: white; /* Màu chữ mặc định (trắng) */
    transition: all 0.3s ease; /* Hiệu ứng mượt mà */
}
 /* Bo tròn item đầu tiên bên trái */
 .item-process:first-child {
    border-top-left-radius: 9999px; /* Bo tròn góc trên bên trái */
    border-bottom-left-radius: 9999px; /* Bo tròn góc dưới bên trái */
}

/* Bo tròn item cuối cùng bên phải */
.item-process:last-child {
    border-top-right-radius: 9999px; /* Bo tròn góc trên bên phải */
    border-bottom-right-radius: 9999px; /* Bo tròn góc dưới bên phải */
}



.item-process:hover {
    background-color: #007bff; /* Màu nền khi hover (xanh dương) */
}

.item-process.active {
    background-color: #007bff; /* Màu nền khi active (xanh dương) */
}

/* Styles for number */
.number {
    font-weight: bold;
    font-size: 2rem; /* Kích thước số */
}

/* Styles for text */
.text {
    font-size: 0.875rem; /* Kích thước text */
    font-weight: 500; /* Độ đậm của text */
}
/* Styles for tablets (e.g., iPad) */
@media (max-width: 768px) {
    .number {
        font-size: 1.5rem; /* Giảm kích thước số trên tablet */
    }

    .text {
        font-size: 0.75rem; /* Giảm kích thước text trên tablet */
    }
}

/* Styles for mobile devices (e.g., smartphones) */
@media (max-width: 480px) {
    .number {
        font-size: 1.2rem; /* Giảm kích thước số trên mobile */
        display: none;
    }

    .text {
        font-size: 0.625rem; /* Giảm kích thước text trên mobile */
    }
    .item-process {
        justify-content: center;
    }
}
/* Responsive styles */
@media (max-width: 1200px) {
    .item-process {
        flex-direction: column; /* Sắp xếp nội dung theo cột trên màn hình nhỏ */
        gap: 2px; /* Giảm khoảng cách giữa số và text */
    }
}

/* Scroll smooth behavior */
html {
    scroll-behavior: smooth;
}

@media only screen and (max-width: 756px) {
    .rounded-box {
        background-color: #007bff;
        border-radius: 210px 0 0 0;
        color: white;

    }
}