.card {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 0.10rem
}

.card-header:first-child {
    border-radius: calc(0.37rem - 1px) calc(0.37rem - 1px) 0 0
}

.card-header {
    padding: 0.75rem 1.25rem;
    margin-bottom: 0;
    background-color: #fff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1)
}

.track {
    position: relative;
    background-color: #ddd;
    height: 7px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 60px;
    margin-top: 50px
}

.track .step {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    width: 14%;
    margin-top: -18px;
    text-align: center;
    position: relative
}

.track .step.active:before {
    background: lightgreen;
}

.track .step::before {
    height: 7px;
    position: absolute;
    content: "";
    width: 100%;
    left: 0;
    top: 18px
}

.track .step.active .icon {
    background: green;
    color: #fff
}

.track .icon {
    display: inline-flex;   /* THAY ĐỔI: Dùng 'inline-flex' */
    align-items: center;     /* THÊM: Căn giữa theo chiều dọc */
    justify-content: center; /* THÊM: Căn giữa theo chiều ngang */
    width: 40px;
    height: 40px;
    line-height: 1;          /* THAY ĐỔI: Reset line-height (không cần nữa) */
    position: relative;
    border-radius: 100%;
    background: #ddd;
}

.track .step.active .text {
    font-weight: 400;
    color: #000
}

.track .text {
    display: block;
    margin-top: 7px
}


/* doan time line */

ul.timeline {
    list-style-type: none;
    position: relative;
}

ul.timeline:before {
    content: ' ';
    background: #d4d9df;
    display: inline-block;
    position: absolute;
    left: 29px;
    width: 2px;
    height: 100%;
    z-index: 400;
}

ul.timeline>li {
    margin: 20px 0;
    padding-left: 50px;
    ;
}

ul.timeline>li:before {
    content: ' ';
    background: white;
    display: inline-block;
    position: absolute;
    border-radius: 50%;
    border: 3px solid #22c0e8;
    left: 20px;
    width: 20px;
    height: 20px;
    z-index: 400;
}

#searchform {

    padding: 2% 0% 2%;
}

#searchform_img {
    margin-top: 10%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 30%;
}
/* === BẮT ĐẦU: Code responsive kiểu TIMELINE === */
@media (max-width: 768px) {

    /* 1. Thiết lập .track làm container cho timeline */
    .track {
        position: relative;     /* Bắt buộc để định vị đường kẻ */
        flex-direction: column;   /* Xếp các bước theo chiều dọc */
        align-items: flex-start;/* Căn các bước về bên trái */
        height: auto;
        background-color: transparent; /* Ẩn nền xám ngang */
        margin-top: 20px;
        margin-bottom: 30px;

        /* Tạo khoảng trống bên trái cho đường kẻ và icon */
        padding-left: 40px;
    }

    /* 2. Vẽ đường kẻ timeline MÀU XÁM (nền) */
    .track::before {
        content: ' ';
        background: #ddd; /* Màu của đường kẻ chưa active */
        display: inline-block;
        position: absolute;
        left: 20px; /* (40px padding) - (4px width / 2) - (nửa icon 40px) = 0px? */
                    /* (40px padding-left của track) / 2 = 20px */
        width: 4px; /* Độ dày của đường kẻ */
        height: 100%;
        z-index: 1; /* Nằm dưới icon */
    }

    /* 3. Thiết lập từng bước (step) */
    .track .step {
        position: relative;    /* Bắt buộc để định vị icon */
        display: flex;
        flex-direction: row;   /* Xếp icon và text ngang hàng (sửa lại) */
        align-items: center;   /* Căn giữa icon và text theo chiều dọc */
        width: 100%;
        margin-top: 0;
        text-align: left;
        padding: 10px 0;       /* Khoảng cách giữa các bước */
        padding-left: 30px;    /* Khoảng cách từ icon (đã định vị) tới text */
        min-height: 60px;      /* Đảm bảo chiều cao tối thiểu cho mỗi bước */
    }

    /* 4. Vẽ đường kẻ timeline MÀU XANH (active) */
    /* Dùng ::after để vẽ đè lên ::before của .track */
    .track .step.active::after {
        content: ' ';
        background: lightgreen; /* Màu của đường kẻ ĐÃ active */
        display: inline-block;
        position: absolute;
        left: -20px; /* (step padding-left 40px) - (track padding-left 20px) = -20px? */
                     /* (20px từ lề .track) - (40px padding-left .track) = -20px */
                     /* Vị trí của line: 20px. Vị trí step: 40px. => left: -20px */
        width: 4px;  /* Phải bằng độ dày đường kẻ xám */
        height: 100%;
        top: 0;
        z-index: 1; /* Cùng cấp với đường xám (đè lên) */
    }


    /* 5. Đặt icon lên trên đường kẻ */
    .track .icon {
        position: absolute; /* Lấy icon ra khỏi dòng chảy */
        left: -40px;        /* (20px line) - (40px padding .track) = -20px? */

        left: -20px; /* Đặt icon tại (40px padding .track) / 2 = 20px */
        top: 50%;
        transform: translateY(-50%); /* Căn icon vào giữa step theo chiều dọc */
        z-index: 2;     /* Nằm TRÊN ĐƯỜNG KẺ */
        margin: 0;
    }

    /* 6. Ẩn thanh ngang cũ */
    .track .step::before {
        display: none;
    }

    /* 7. Định dạng lại text */
    .track .text {
        margin-top: 0;
    }
}
/* === KẾT THÚC: Code responsive kiểu TIMELINE === */