.bg-gioithieu {
    background: radial-gradient(408.65% 54.54% at 50% 45.46%, #FAFBFF 0%, #E9F1FE 100%);
    padding-bottom: 30px;
}
.td-introduce {
    padding: 50px 0;
    min-height: 580px;
}
.introduce-content .title p {
    font-weight: 700;
    font-size: 35px;
    color: #3271D7;
    margin-bottom: 10px;
}
.introduce-content .title .dess {
    font-size: 14px;
    color: #000000;
    text-align: justify;
    margin: 50px 0;
}
.introduce-content {
    display: flex;
    align-items: center;
}
.introduce-content .title {
    width: 40%;
    margin-right: 20px;
}
.introduce-content  .m-right {
    width: 59%;
    background-image: url(../images/gioithieu/bn-right.png);
    background-repeat: no-repeat;
    background-size: cover;
    margin-left: 10px;
}



.step-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    position: relative;
}

/* Khối 1 - bên trái, thấp nhất */
.step-1 {
    width: 33.333%;
    height: 200px;
    margin-top: 200px;
}

/* Khối 2 - ở giữa */
.step-2 {
    width: 33.333%;
    height: 300px;
    margin-top: 100px;
}

/* Khối 3 - bên phải, cao nhất */
.step-3 {
    width: 33.333%;
    height: 400px;
    margin-top: 0;
}

.stat-card {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding: 24px 5px;
    border-radius: 12px;
    max-width: 260px;
    color: #0040a8; /* Tông màu xanh chủ đạo */
}

/* Biểu tượng */
.stat-icon {
    color: #0052cc;
    margin-bottom: 12px;
}

/* Cụm con số và label nằm cùng hàng */
.stat-header {
    display: flex;
    align-items: baseline; /* Căn lề chân chữ cho đẹp */
    gap: 8px;
    margin-bottom: 12px;
}

.stat-header .number {
    font-size: 36px;
    font-weight: 800;
    color: #0040a8;
    line-height: 1;
}

.stat-header .label {
    font-size: 14px;
    font-weight: 700;
    color: #0040a8;
}

/* Dòng mô tả bên dưới */
.stat-description {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    color: #0040a8;
}

.img-line {
    position: absolute;
    bottom: -65px;
    right: 0;
    width: 100%;
}

.td-vision {
    background: #ffffff;
    padding: 90px 0 40px  0;
}
.td-vision .title h3 {
    color: #3271D7;
    font-size: 35px;
    font-weight: 700;
    text-align: center;
    padding-bottom: 50px;
}

/* 1. Thẻ container chính */
.timeline-card {
    background-color: #eaf2fa; /* Màu xanh cực nhạt của thẻ */
    border-radius: 20px;
    padding: 20px 40px 20px 35px; /* Thừa lề trái nhiều để nhường chỗ cho cái ghim */
    box-shadow: 0px 4px 5.1px 0px #CAE3FD;
    width: 100%;
    /*max-width: 800px; !* Chiều rộng tối đa của thẻ *!*/
    position: relative; /* Quan trọng để định vị cái ghim */
    margin-bottom: 30px;
}

/* 2. Container của cái ghim (dùng để định vị) */
.pin-wrapper {
    position: absolute;
    top: -6px; /* Cách mép trên thẻ 20px */
    left: -77px; /* Đẩy ra ngoài lề trái thẻ 45px */
    width: 97px;
    height: 97px;
    z-index: 10; /* Nằm trên thẻ */
}

/* 3. Phần thân cái ghim (màu xanh đậm, hình giọt nước nằm ngang) */
.pin-body {
    width: 100%;
    height: 100%;
    background: radial-gradient(109.51% 109.49% at 79.99% 92.3%, #322B80 0%, #2A3D8F 29%, #166AB5 87%, #1176BF 100%);
    /* Tạo hình giọt nước: 3 góc bo tròn, 1 góc (dưới-trái) nhọn */
    border-radius: 50% 50% 50% 10px;
    /* Xoay góc nhọn về phía card */
    transform: rotate(-100deg);
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Đổ bóng đậm hơn cho ghim */
}

/* 4. Vòng tròn trắng bên trong cái ghim (chứa năm) */
.pin-content {
    width: 75%; /* Nhỏ hơn thân ghim */
    height: 75%;
    background-color: white;
    border-radius: 50%; /* Vòng tròn hoàn hảo */
    display: flex;
    justify-content: center;
    align-items: center;
    /* Xoay ngược lại 135deg để chữ nằm thẳng */
    transform: rotate(100deg);
    border: 3px solid #1a519e; /* Viền xanh bên trong */
}

/* 5. Chữ số năm 2020 */
.pin-year {
    font-size: 18px;
    font-weight: 800; /* Đậm */
    color: #1a519e; /* Màu xanh đậm */
    letter-spacing: -1px; /* Thu hẹp khoảng cách chữ một chút */
}

/* 6. Danh sách các sự kiện */
.timeline-list {
    list-style: none; /* Bỏ bullet mặc định */
    padding-left: 20px;
}

/* 7. Từng dòng sự kiện */
.timeline-item {
    font-size: 14px;
    line-height: 1.6; /* Khoảng cách dòng thoáng */
    color: #111; /* Màu chữ gần đen */
    margin-bottom: 18px; /* Khoảng cách giữa các dòng */
    padding-left: 25px; /* Chừa chỗ cho dấu chấm vuông */
    position: relative; /* Định vị dấu chấm */
    font-weight: 500; /* Hơi đậm một chút */
}

/* Dòng cuối cùng không cần margin-bottom */
.timeline-item:last-child {
    margin-bottom: 0;
}

/* 8. Tạo dấu chấm vuông màu xanh đầu dòng */
.timeline-item::before {
    content: ''; /* Cần thiết để pseudo-element hiển thị */
    position: absolute;
    left: 0;
    top: 7px; /* Căn chỉnh theo chiều cao dòng */
    width: 9px;
    height: 9px;
    background-color: #1a519e; /* Màu xanh đậm */
    border-radius: 2px; /* Bo góc nhẹ để thành hình vuông mềm mại */
}

.pin2year {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.td-mission {
    background: #ffffff;
    padding: 20px;
    border-radius: 23px;
    margin-top: 30px;
    margin-bottom: 30px;
}
.td-mission .title {
    display: flex;
    align-items: center;
}
.td-mission .title h3 {
    color: #3271D7;
    font-size: 35px;
    font-weight: 700;
    padding-left: 30px;
}

.container-sr {
    display: flex;
    gap: 20px; /* Khoảng cách giữa các block */
    padding: 20px;
}

/* Thiết lập cơ bản cho mỗi block dịch vụ */
.service-block {
    flex: 1; /* Chia đều chiều rộng */
    background-color: #ffffff; /* Màu nền mặc định khi không hover */
    padding: 30px 20px;
    text-align: center;

    /* QUAN TRỌNG: Hiệu ứng chuyển đổi mượt mà */
    transition: all 0.4s ease;
}

/* Vùng chứa icon */
.icon-wrap {
    width: 60px;
    height: 60px;
    margin: 0 auto 30px auto; /* Căn giữa */
}

.icon-wrap img {
    max-width: 100%;
    height: auto;

    /* Hiệu ứng chuyển đổi cho icon (để đổi màu icon) */
    transition: filter 0.4s ease;
}

/* Tiêu đề */
.service-block h3 {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 15px;
    color: #333; /* Màu chữ mặc định */
    line-height: 1.4;
    height: 100px;
    height: 35px;
}

/* Văn bản */
.service-block p {
    font-size: 14px;
    line-height: 1.6;
    color: #666; /* Màu chữ mặc định */
    text-align: justify;
}


/* ======================================================= */
/* PHẦN QUAN TRỌNG: HIỆU ỨNG KHI DI CHUỘT VÀO (HOVER) */
/* ======================================================= */

/* 1. Đổi màu nền của cả block sang xanh dương đậm */
.service-block:hover {
    background-color: #0c4ea3; /* Màu xanh dương trong ảnh bạn cung cấp */
}

/* 2. Đổi màu chữ tiêu đề và văn bản sang màu trắng */
.service-block:hover h3,
.service-block:hover p {
    color: #ffffff;
}

/* 3. Đổi màu icon sang trắng (dùng filter) */
/* (Phần này hoạt động tốt với icon đen/màu. Nếu icon bạn có viền, filter này sẽ chuyển viền đó sang trắng) */
.service-block:hover .icon-wrap img {
    filter: brightness(0) invert(1);
}

.td-core-value {
    background-image: url(../images/gioithieu/banner2.png);
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 900px;
    padding: 50px 0;
}
.td-core-value .title h3 {
    color: #3271D7;
    font-size: 35px;
    font-weight: 700;
    text-align: center;
}
.td-core-value .title  img {
    display: block;
    margin: 20px auto;
}

.td-core-value .content-left {
    width: 60%;
    padding: 20px 0;
}





.left-item {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 20px;
    background: #fff;
    border-radius: 16px;
    transition: all .35s ease;
    margin-bottom: 20px;
    border: 1px solid #0444A8;
}

.left-item:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 30px rgba(0, 80, 200, 0.15);
    cursor: pointer;
}

.left-item .icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 50%;
    background: linear-gradient(180deg, #1F6BE2 0%, #053AA3 100%) !important;

    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    animation: pulse 2.5s infinite;
    transition: all .35s ease;
}

.left-item .icon img {
    width: 25px;
    height: 25px;
    object-fit: contain;
    position: relative;
    z-index: 2;
}
.left-item span {
    color: #0444A8;
    font-size: 14px;
    font-weight: 600;
}

.left-item .icon::before {
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 2px solid rgba(29,111,255,.25);
    animation: ripple 2.5s infinite;
}

.left-item:hover .icon {
    transform: rotate(10deg) scale(1.1);
}

.left-item:hover .icon img {
    transform: scale(1.15);
    transition: .35s;
}

@keyframes pulse {
    0%,100%{
        box-shadow: 0 0 0 0 rgba(29,111,255,.35);
    }
    50%{
        box-shadow: 0 0 0 12px rgba(29,111,255,0);
    }
}

@keyframes ripple {
    0%{
        transform: scale(.9);
        opacity: 1;
    }
    100%{
        transform: scale(1.4);
        opacity: 0;
    }
}

.left-item .box-txt h4  {
    color: #0444A8;
    font-weight: 700;
    font-size: 16px;
}
.left-item .box-txt p {
    font-size: 13px;
    color: #000000;
    margin-bottom: 0;
}

/* css mobile ------------------------------------------------------------------------------------------- */
@media only screen and (max-width: 768px), (max-width: 1023px) {
    .bg-gioithieu .home-banner {
        background: #ffffff;
    }
    .td-introduce {
        padding: 20px  0;
    }
    .introduce-content {
        flex-direction: column;
    }
    .introduce-content .title {
        width: 100%;
        margin-right: 0px;
    }
    .introduce-content .title p {
        font-size: 18px;
        line-height: 30px;
    }
    .introduce-content .title .dess {
        margin: 20px 0;
    }
    .introduce-content .m-right {
        width: 100%;
    }
    .step-wrapper {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .step-1,
    .step-2
    {
        width: 45%;
        margin-top: 0;
        height: auto;
    }
    .step-3 {
        width: 100%;
        height: auto;
    }
    .img-line {
        display: none;
    }
    .stat-card  {
        padding: 5px;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        justify-content: center;
        margin: auto;
    }
    .stat-header {
        flex-direction: column;
        align-items: center;
    }
    .td-vision {
        padding: 20px 0;
    }
    .td-vision .title h3 {
        padding-bottom: 0;
    }
    .timeline-card {
        padding: 10px 5px 10px 40px;
    }
    .pin-wrapper {
        width: 60px;
        height: 60px;
        left: -13px;
    }
    .pin-year {
        font-size: 12px;
    }
    .td-mission {
        padding: 10px 0;
    }

    .container-sr {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    .service-block {
        width: 100%;
        padding: 25px 5px;
    }

    .service-block h3 {
        font-size: 15px;
        height: auto;
        min-height: 42px;
    }

    .service-block p {
        font-size: 14px;
    }
    .td-mission .title h3  {
        font-size: 18px;
        line-height: 30px;
    }
    .td-core-value {
        padding: 20px 0;
    }
    .td-core-value .title h3 {
        font-size: 18px;
        line-height: 30px;
    }
    .td-core-value .content-left {
        width: 100%;
    }
}