.td-china-ship {
    background: radial-gradient(408.65% 54.54% at 50% 45.46%, #FAFBFF 0%, #E9F1FE 100%);
}
.banner-top-cn img {
    width: 100%;
    height: auto;
}

.td-head-cn-ship   {
    padding: 30px 0;
}
.td-head-cn-ship .title-left h2 {
    font-weight: 700;
    font-size: 32px;
    line-height: 49px;
    color: #3E79DA;
}
.td-head-cn-ship .title-left .fee-to {
    font-family: Inter;
    font-weight: 700;
    font-size: 32px;
    line-height: 33px;
    color: red;
    margin-bottom: 0px;
    margin-left: 10px;
}
.td-head-cn-ship .td-flex-center {
    margin-bottom: 20px;
}
.td-head-cn-ship .title-left .btn-now img {
    margin-right: 10px;
}
.box-w-info {
    background: #ffffff;
    padding: 20px;
    border-radius: 10px;
    font-size: 14px;
    line-height: 28px;
}
.box-w-info strong {
    color: #0444A8;
}
.line-head {
    margin: 50px 0;
    display: flex;
    justify-content: center;
}
.td-title-page-cn {
    text-align: center;
    font-size: 35px;
}
.td-title-page-cn p {
    color: #3E79DA;
    font-weight: 700;
}
.td-title-page-cn h3 {
    font-size: 35px;
    color: #174772;
    font-weight: 700;
    animation: floatText 3s ease-in-out infinite;
}
.box-w-page {
    background: #ffffff;
    border-radius: 21px;
    padding: 20px;
    margin: 20px  0;
}
.title-box-w {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}


.fee-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 24px;
}

.fee-item .dot {
    width: 26px;
    height: 26px;
    background: linear-gradient(180deg, #1F6BE2 0%, #053AA3 100%);
    border-radius: 50%;
    flex-shrink: 0;
}

.fee-item .content h3 {
    font-weight: 700;
    font-size: 20px;
    margin-bottom: 20px;
}

.fee-item .content p {
    font-weight: 500;
    font-size: 14px;
    line-height: 26px;
    text-align: justify;
    margin-top: 10px;
}
.title-box-w {
    font-family: Inter;
    font-weight: 700;
    font-size: 24px;
    line-height: 49px;
    color: #0444A8;
}
.td-title-note {
    margin: 20px 0;
}
.td-title-note .txt-icon {
    display: flex; align-items: center;
}
.td-title-note .txt-icon h3 {
    font-family: Inter;
    font-weight: 700;
    font-size: 35px;
    line-height: 51px;
    color: #3E79DA;
    margin-right: 20px;
}
.td-title-note  p {
    font-weight: 700;
    font-size: 28px;
    line-height: 51px;
    color: #032058;
}

.transport-wrap{
    display:flex;
    align-items:center;
    gap:10px;
    margin-top: -65px;
    padding-bottom: 35px;
}

.transport-left{
    width:50%;
}

.transport-right{
    width:50%;
    text-align:center;
}

.transport-right img{
    width:100%;
    max-width:550px;
}

.transport-item{
    width: 100%;
    max-width: 720px;
    height: 70px;

    display: flex;
    align-items: center;

    padding-left: 10%;
    padding-right: 20px;

    box-shadow: 0px 1px 4px 0px #00000040;
    background: linear-gradient(270deg, #FAFCFF 0%, #DFEBFF 100%);

    font-size: 18px;
    font-weight: 700;
    color: #0444A8;

    /* Chỉ vát góc trên bên phải */
    clip-path: polygon(
            0 0,
            calc(100% - 70px) 0,
            100% 69px,
            100% 100%,
            0 100%
    );

    transition: .3s;
    margin-bottom: 20px;
}

.transport-item:hover{
    background: linear-gradient(180deg, #1F6BE2 0%, #053AA3 100%);
    color: #fff;
    transform: translateX(10px);
}



/* Hover */
.transport-item:hover{
    transform:translateX(12px);
    background:#0444A8;
    color:#fff;
}

@media (max-width:768px){

    .transport-wrap{
        flex-direction:column;
        gap:30px;
    }

    .transport-left,
    .transport-right{
        width:100%;
    }

    .transport-right{
        order:-1; /* Ảnh lên trên */
        text-align:center;
    }

    .transport-item{
        max-width:100%;
        height:56px;
        font-size:16px;
        padding:0 20px;

        clip-path: polygon(
                0 0,
                calc(100% - 25px) 0,
                100% 25px,
                100% 100%,
                0 100%
        );
    }

}

.td-interest {
    padding-top: 30px;
    background: #f7f8fb;
}
.td-interest h3 {
    color: #032058;
    font-weight: 700;
    font-size: 35px;
    line-height: 61px;
    text-align: center;
}
.td-interest .myBanner-in {
    width: 100%;
    height: auto;
}
.td-info-interest {
    padding: 20px 0;
}
.contact-price-td {
    background: #004098;
}
.contact-price-td .banner  {
    width: 100%;
}
.contact-price-td .title {
    padding-top: 40px;
    text-align: center;
    color: #ffffff;
}
.contact-price-td .title p {
    font-weight: 700;
    font-size: 30px;
    line-height: 61px;
}
.contact-price-td .title h3 {
    font-size: 35px;
    font-weight: 700;
    animation: floatText 3s ease-in-out infinite;
}
.contact-price-td .banner img {
    width: 100%;
    height: auto;
}
.td-list-pack {
    padding: 35px 0;
}
.td-list-pack .title {
    text-align: center;
    color: #0444A8;
}
.td-list-pack .title h3 {
    font-size: 35px;
    color: #0444A8;
    font-weight: 700;
}
.td-list-pack .title p {
    font-weight: 700;
    font-size: 30px;
    line-height: 41px;
}


.vec-ser img {
    position: relative;
    z-index: 10;
    display: block;
    margin: 0 auto;
}
.service-list{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap: 0px;
    margin: -10px 0 20px 0;
    background: #FFFFFF;
    box-shadow: 0px 4px 5.1px 0px #CAE3FD;
    border-radius: 30px;
}
.service-item:first-child{
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
}
.service-item:last-child{
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
}
.service-item{
    background:#fff;
    padding:20px 10px;

    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;

    transition:.3s ease;
}

.service-item:hover{
    transform:translateY(-8px);
    box-shadow:0 10px 25px rgba(0,0,0,.12);
}

.service-icon{
    width:90px;
    height:90px;
    border-radius:50%;
    background: linear-gradient(270deg, rgba(223, 235, 255, 0.8) 0%, rgba(250, 252, 255, 0.8) 100%);

    display:flex;
    align-items:center;
    justify-content:center;

    margin-bottom:20px;
}

.service-icon img{
    width:45px;
    height:45px;
    object-fit:contain;
}

.service-item h3{
    margin:0 0 12px;
    font-size: 16px;
    font-weight:700;
    color:#000000;

    min-height:56px;       /* khoảng 2 dòng */
    display:flex;
    align-items:center;
    justify-content:center;
}

.service-item p{
    margin:0;
    font-size:14px;
    line-height:1.7;
    color:#000000;

    min-height:75px;
}

/* Laptop */
@media (max-width:1200px){
    .service-list{
        grid-template-columns:repeat(3,1fr);
    }
}

/* Tablet */
@media (max-width:768px){
    .service-list{
        grid-template-columns:repeat(2,1fr);
        gap:18px;
    }

    .service-item{
        padding:24px 16px;
    }

    .service-icon{
        width:75px;
        height:75px;
    }

    .service-icon img{
        width:38px;
        height:38px;
    }

    .service-item h3{
        font-size:18px;
    }
}

/* Mobile nhỏ */
@media (max-width:480px){
    .service-list{
        grid-template-columns:1fr;
    }

    .service-item{
        padding:20px 15px;
    }

    .service-icon{
        width:65px;
        height:65px;
    }

    .service-item h3{
        font-size:17px;
    }

    .service-item p{
        font-size:14px;
    }
}

.list-prohibited {
    box-shadow: 0px 4px 5.1px 0px #CAE3FD;
    background: #ffffff;
    border-radius: 30px;
    padding: 20px;
    margin-top: -10px;
}
.list-prohibited h3 {
    font-weight: 600;
    font-size: 16px;
    line-height: 33px;
}
.list-prohibited .td-flex-center {
    margin: 30px 0;
}
.list-prohibited .td-flex-center p {
    margin-bottom: 0px;
    font-size: 14px;
    margin-left: 10px;
}

.td-procedure {
    background-image: url(../images/home/banner-5.png);
    background-color: #f0f5fe;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 80px 0 0 0;
    min-height: 500px;
}
.td-procedure .title h3 {
    font-size: 35px;
    font-weight: 700;
    color: #0444A8;
    padding: 20px 0;
}
.td-procedure .title p {
    color: #032058;
    font-size: 30px;
    font-weight: 700;
}



/*con đường--------------------------------------------*/

.td-content-road-car {
    position: relative;
    padding-top: 200px;
}

.step-car-1 {
    position: absolute;
    bottom: 12px;
    left: 130px;
}
.step-car-2 {
    position: absolute;
    bottom: 80px;
    left: 230px;
}
.step-car-2 .step-line {
    height: 390px;
}

.step-car-3 {
    position: absolute;
    bottom: 152px;
    left: 382px;
}
.step-car-3 .step-line {
    height: 120px;
}

.step-car-4 {
    position: absolute;
    bottom: 236px;
    left: 559px;
}
.step-car-4 .step-line {
    height: 270px;
}
.step-car-5 {
    position: absolute;
    bottom: 351px;
    left: 767px;
}
.step-car-5 .step-line {
    height: 100px;
}

.step-car-6 {
    position: absolute;
    bottom: 428px;
    left: 895px;
}
.step-car-6 .step-line {
    height: 280px;
}

.step-car-7 {
    position: absolute;
    bottom: 539px;
    left: 1115px;
}
.step-car-7 .step-line {
    height: 100px;
}
.step-car-7 .step-base {
    height: 32px;
    width: 50px;
}
.step-car-7 .step-base::after {
    width: 30px;
}












/* Container tổng */
.step-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 1. Hình tròn số 01 */
.step-number {
    width: 70px;
    height: 70px;
    background: linear-gradient(180deg, #1F6BE2 0%, #053AA3 100%);
    color: #ffffff;
    font-weight: bold;
    font-size: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 6px solid #e8eeff; /* Viền sáng bên ngoài */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    z-index: 2;
    margin-bottom: 12px;
}

/* 2. Card màu xanh lá chứa chữ */
.step-card {
    background-color: #003e9e;
    color: #ffffff;
    padding: 24px 20px;
    border-radius: 12px;
    text-align: center;
    position: relative;
    box-shadow: 0 8px 20px rgba(0, 62, 158, 0.2);
}

/* Mũi tên tam giác chỉ lên ở đầu Card */
.step-card::before {
    content: "";
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #003e9e;
}

/* Tiêu đề trong Card */
.step-title {
    font-size: 16px;
    line-height: 1.4;
    margin-bottom: 18px;
    font-weight: 600;
}

/* Nút "Xem chi tiết" */
.step-btn {
    background-color: #ffffff;
    color: #333333;
    border: none;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.step-btn:hover {
    background-color: #f0f0f0;
    transform: translateY(-1px);
}

/* 3. Đường kẻ dọc */
.step-line {
    width: 2px;
    height: 210px;
    background-color: #0b4bb2;
    z-index: 3;
}

/* 4. Chân đế bên dưới */
.step-base {
    width: 100px;
    height: 40px;
    background-color: #003e9e;
    border-radius: 50%;
    position: relative;
    margin-top: -20px; /* Đè lên đoạn cuối đường kẻ */
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Nhụy tròn trắng bên trong chân đế */
.step-base::after {
    content: "";
    width: 50px;
    height: 20px;
    background-color: #ffffff;
    border-radius: 50%;
}

/* Hiệu ứng xuất hiện */
.step-item {
    animation: stepFadeUp 0.8s ease forwards;
}

/* Hình tròn số nhấp nhô nhẹ */
.step-number {
    animation: numberFloat 2.5s ease-in-out infinite;
}

/* Card nổi lên xuống */
.step-card {
    animation: cardFloat 3s ease-in-out infinite;
}

/* Đường kẻ chạy từ trên xuống */
.step-line {
    transform-origin: top;
    animation: lineGrow 1s ease forwards;
}

/* Chân đế phóng to nhẹ khi xuất hiện */
.step-base {
    animation: basePop 0.8s ease 0.8s both;
}

/* Nút rung nhẹ */
.step-btn {
    animation: btnPulse 2s infinite;
}

.step-item:hover .step-card {
    transform: translateY(-8px);
    transition: .3s;
}

.step-item:hover .step-number {
    transform: scale(1.08);
    transition: .3s;
}

.step-item:hover .step-btn {
    transform: scale(1.05);
}

/* ================= KEYFRAMES ================= */

@keyframes stepFadeUp {
    from {
        opacity: 0;
        transform: translateY(60px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes numberFloat {
    0%,100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
}

@keyframes cardFloat {
    0%,100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(6px);
    }
}

@keyframes lineGrow {
    from {
        transform: scaleY(0);
    }
    to {
        transform: scaleY(1);
    }
}

@keyframes basePop {
    0% {
        opacity: 0;
        transform: scale(.4);
    }
    80% {
        transform: scale(1.08);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes btnPulse {
    0%,100% {
        box-shadow: 0 0 0 rgba(255,255,255,0);
    }
    50% {
        box-shadow: 0 0 15px rgba(255,255,255,.5);
    }
}
.td-content-road-car-mobile{
    display:none;
}



@media (max-width: 1399px) {
    .step-car-4 {
        left: 538px;
    }
    .step-car-5 {
        left: 730px;
    }
    .step-car-6 {
        left: 853px;
    }
    .step-car-6 .step-base  {
        width: 60px;
    }
    .step-car-6 .step-base::after {
        width: 30px;
    }
    .step-car-7 {
        left: 1067px;
    }
}





/* css mobile ------------------------------------------------------------------------------------------- */
@media only screen and (max-width: 768px), (max-width: 1023px) {
    .td-head-cn-ship {
        padding: 10px 0;
    }
    .td-head-cn-ship .title-left h2 {
        font-size: 18px;
        text-align: center;
        line-height: 40px;
    }
    .td-head-cn-ship .title-left .fee-to {
        font-size: 20px;
        text-align: center;
    }
    .td-head-cn-ship .btn-now {
        font-size: 18px;
    }
    .line-head {
        margin: 20px 0;
    }
    .td-title-page-cn {
        font-size: 18px;
    }
    .td-title-page-cn h3 {
        font-size: 18px;
    }
    .title-box-w {
        font-size: 16px;
        line-height: 30px;
    }
    .fee-item .content h3 {
        margin-bottom: 10px;
    }
    .td-title-note .txt-icon h3 {
        font-size: 18px;
        line-height: 30px;
    }
    .td-title-note p {
        font-size: 18px;
        line-height: 30px;
    }
    .td-title-note p br {
        display: none;
    }
    .transport-wrap {
        margin-top: 0;
        padding-bottom: 10px;
    }
    .td-interest {
        padding-top: 10px;
    }
    .td-interest h3 {

    }
    .box-td-serve .box-info {
        padding: 20px 10px 10px 60px;
    }
    .box-info .td-flex-center {
        flex-wrap: wrap;
    }
    .contact-price-td .title p {
        font-size: 18px;
        line-height: 30px;
    }
    .contact-price-td .title h3 {
        font-size: 18px;
    }
    .contact-price-td .btn-now {
        font-size: 18px;
    }
    .td-list-pack {
        padding: 20px 0;
    }
    .td-list-pack .title h3 {
        font-size: 18px;
    }
    .td-list-pack .title p {
        font-size: 16px;
        line-height: 30px;
    }
    .service-icon {
        margin-bottom: 10px;
    }
    .service-item h3 {
        min-height: 0px;
    }
    .service-item:first-child{
        border-radius: 30px;
    }
    .service-item:last-child{
        border-radius: 30px;
    }

    .td-content-road-car{
        display:none;
    }

    .td-content-road-car-mobile{
        display:block;
        padding:20px 15px;
    }

    .mobile-step{
        position:relative;
        display:flex;
        gap:16px;
        padding-bottom:35px;
    }

    .mobile-step:last-child{
        padding-bottom:0;
    }

    .mobile-step::after{
        content:"";
        position:absolute;
        left:34px;
        top:72px;
        bottom:0;
        width:2px;
        background:#0b4bb2;
    }

    .mobile-step:last-child::after{
        display:none;
    }

    .mobile-step-number{
        width:68px;
        height:68px;
        border-radius:50%;
        background:linear-gradient(180deg,#1F6BE2,#053AA3);
        color:#fff;
        font-size:22px;
        font-weight:700;
        display:flex;
        align-items:center;
        justify-content:center;
        flex-shrink:0;
        border:5px solid #E8EEFF;
    }

    .mobile-step-card{
        flex:1;
        background:#003E9E;
        border-radius:14px;
        padding:18px;
        color:#fff;
        box-shadow:0 10px 25px rgba(0,62,158,.15);
    }

    .mobile-step-card h3{
        margin:0 0 15px;
        font-size:17px;
        line-height:1.5;
    }

    .mobile-step-card button{
        border:none;
        background:#fff;
        color:#003E9E;
        padding:8px 18px;
        border-radius:25px;
        font-weight:600;
        cursor:pointer;
    }

}