/* Added */
      body .source-sans-font {
        font-family: "Source Sans 3", sans-serif;
        font-optical-sizing: auto;
        font-style: normal;
      }

      body .btn-padding-gap {
        padding: 8px 20px;
        gap: 8px;
      }

      body .normal-font-size {
        font-size: 20px;
        line-height: 160%;
      }

      body .fw-400 {
        font-weight: 400;
      }

      body .fw-600 {
        font-weight: 600;
      }

      body .fw-700 {
        font-weight: 700;
      }

      body .lh-160 {
        line-height: 160%;
      }

      body .lh-140 {
        line-height: 140%;
      }

      body .fz-40 {
        font-size: 40px;
      }

      body .fz-16 {
        font-size: 16px;
      }

      body .border-1 {
        border-width: 1px;
      }

      body .black-font {
        color: #000000;
      }

      body .gap-20px {
        gap: 20px;
      }

      body .radius-29 {
        border-radius: 29px;
      }

      body .slogan {
        font-size: 56px;
        font-weight: 700;
        line-height: 120%;
        width: 628px;
      }

      body .slogan-p {
        font-size: 16px;
        font-weight: 600;
        color: #fc62a8;
        width: 444px;
      }

      body .started-btn {
        width: 207px;
        height: 48px;
        border-radius: 32px;
        font-weight: 600;
        font-size: 20px;
        line-height: 160%;
      }

      body .pp-img {
        width: 139px;
        height: 41px;
        border-radius: 39px;
      }

      body #ring-in {
        background: radial-gradient(
          circle,
          rgba(255, 255, 255, 0.58) 0%,
          rgba(255, 255, 255, 0.66) 100%
        );
      }
      body #ring-out {
        box-shadow: rgba(255, 96, 96, 0.2) 0px 20px 80px 10px,
          rgba(255, 96, 96, 0.2) 0px 5px 25px 0px,
          rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
      }

      body .imageyeah {
        width: 434px;
        height: 435px;
      }

      body .imageyeahyeah {
        width: 125%;
        height: 125%;
        top: -15px;
      }
      body .unknow1 {
        width: 206px;
        height: 58px;
        padding: 7px;
        top: 35px;
        left: -100px;
      }
      body .unknow2 {
        border-radius: 50%;
        width: 48px;
        height: 48px;
        background-color: #818181;
      }

      body .unknow2-img {
        margin: auto;
        height: 100%;
        width: 100%;
      }

      body .plus30 {
        font-size: 18px;
        font-weight: 700;
      }

      body .expertmb {
        font-size: 12px;
        font-weight: 600;
      }

      body .unknow3 {
        width: 152px;
        height: 58px;
        padding: 7px;
        border-radius: 6px;
        bottom: 60px;
        left: 500px;
      }
      body .unknow3-in {
        border-radius: 50%;
        width: 42px;
        height: 42px;
        background: #ff60a8;
      }
      body .human2-img {
        height: 100%;
        width: 100%;
      }

      body .prof {
        font-size: 12px;
      }

      body .nut-img {
        width: 50px;
        height: 50px;
        bottom: 125px;
        left: 15px;
      }

      body .sec1-cont {
        padding: 60px 20px 0 20px;
        margin-bottom: 0px;
      }

      body .ai-what {
        font-size: 40px;
        font-weight: 700;
        line-height: 140%;
      }

      body .robot-cont {
        width: 300px;
        height: 300px;
      }

      body .robot-cont img {
        width: 100%;
        height: 100%;
        z-index: -2;
        filter: 
    /* Lớp 1: Tỏa rộng nhất (120px) - mờ ảo */ drop-shadow(
            0px 0px 120px rgba(255, 127, 0, 0.5)
          )
          /* Lớp 2: Tỏa trung bình (60px) - tăng cường độ màu */
          drop-shadow(0px 0px 60px rgba(255, 127, 0, 0.4))
          /* Lớp 3: Bóng sát viền (10px) - giữ nét cho ảnh */
          drop-shadow(0px 0px 10px rgba(255, 127, 0, 0.8));
      }

      body .multilingual,
      body .seamless,
      body .always {
        position: absolute;
        width: 464px;
        height: 88px;
        border-radius: 40px;
        max-width: none;
        border: 1px solid #ededed;
        box-shadow: none;
        gap: 10px;
      }

      body .multilingual {
        left: -125%;
        top: 70%;
      }

      body .seamless {
        right: -125%;
        top: 70%;
      }

      body .always {
        right: -135%;
        top: 10%;
      }

      body .bcs {
        height: 56px;
        width: 56px;
        border-radius: 50%;
        background-color: #fff5eb;
      }

      body .ai-cont {
        margin-bottom: 0px;
      }

      body .multilingual h4,
      body .seamless h4,
      body .always h4 {
        width: 360px;
      }

      body .s3-icon-cont img {
        width: 120px;
        height: auto;
        margin: auto;
      }

      body .ft a,
      body .ft h4,
      body .ft li {
        font-family: "Source Sans 3", sans-serif;
        font-size: 20px;
      }
      body .social a {
        height: 40px;
        width: 40px;
        background-color: #404040;
      }

      body .step-cont {
        max-width: 1440px;
        margin: 0 auto;
      }

      header > * {
        flex: 1;
      }

      #head-btn {
        justify-content: flex-end;
      }

      #head-nav {
        justify-content: center;
        flex: 3;
      }
            /* Custom CSS cho các yếu tố phức tạp */
      .hero-ring {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border-radius: 50%;
        z-index: -1;
      }
      .orange-gradient-btn {
        background: linear-gradient(90deg, #ff9f43 0%, #ff6b00 100%);
      }
      .bg-blob {
        position: absolute;
        left: 25%;
        width: 120%;
        height: 100%;
        background-color: #fff5eb;
        border-radius: 80px 0 0 0;
        z-index: -2;
      }
      /* CSS cho đường kẻ nét đứt ở phần Step by Step */
      .step-connector {
        position: absolute;
        top: 40px;
        left: 10%;
        right: 10%;
        height: 2px;
        background-image: linear-gradient(
          to right,
          #e2e8f0 60%,
          rgba(255, 255, 255, 0) 0%
        );
        background-position: bottom;
        background-size: 15px 2px;
        background-repeat: repeat-x;
        z-index: 0;
      }
      /* Input focus styles */
      input:focus,
      select:focus,
      textarea:focus {
        outline: none;
        border-color: #ff8c00;
        box-shadow: 0 0 0 3px rgba(255, 140, 0, 0.1);
      }

      #ring-in::before {
        content: url("/assets/image/Ellipse\ 5.png");
        position: absolute;
        top: -6px;
        left: 0;
      }
      #ring-in::after {
        content: url("/assets/image/Ellipse\ 6.png");
        position: absolute;
        bottom: -12px;
        right: -1px;
      }

      #sec1-img-container {
        height: 675px;
      }

      body .what-aff {
        background-image: url("assets/image/what-bg.png");
        background-size: cover;
      }

      body .step-sec {
        background-image: url("assets/image/step-bg.png");
        background-size: cover;
        margin-left: 0;
        margin-right: 0;
        max-width: none;
      }

      body .step-i-cont {
        border: none;
        width: 69px;
        height: 64px;
      }

      body .step-i-cont div {
        width: 32px;
        height: 32px;
        background-color: #fb6238;
      }

      body .step1 {
        box-shadow: 0px 0px 15px 5px #3d81c23d;
      }

      body .step2 {
        box-shadow: 0px 0px 15px 5px #a6cf4a3d;
      }

      body .step3 {
        box-shadow: 0px 0px 15px 5px #ff60a83d;
      }

      body .step4 {
        box-shadow: 0px 0px 15px 5px #ff60a83d;
      }

      body .arrow {
        width: 170px;
        height: auto;
      }

      body .arrowup {
        margin-top: 25px;
      }

      body .h-earn {
        max-width: 881px;
      }

      body .aff-form input,
      body .aff-form select,
      body .aff-form textarea {
        border: none;
        border-radius: 32px;
        height: 54px;
        background-color: #f5f9fa;
        color: #737373;
        font-family: "Source Sans 3", sans-serif;
      }

      body .aff-form textarea {
        height: 160px;
        border-radius: 8px;
      }

      body .aff-form label {
        font-weight: 400;
      }

      body .submit-btn {
        background-color: #ff7f00;
        font-family: "Source Sans 3", sans-serif;
        border-radius: 32px;
      }

      body .bg-footer-bg {
        background-color: #252525;
        color: #dbdbdb;
        font-family: "Source Sans 3", sans-serif;
      }

      body .ft-cont {
        display: flex;
      }

      body .ft1 {
        flex: 3;
      }

      body .ft-cont > *:not(:first-child) {
        flex: 1;
      }
      /* ============================================================
   RESPONSIVE CHO MOBILE & TABLET (Ghi đè để không ảnh hưởng PC)
   ============================================================ */

@media (max-width: 1023px) {
    /* 1. Header & Navigation */
    header {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }
    #head-nav {
        display: none; /* Ẩn menu chính trên mobile, bạn có thể làm hamburger menu sau */
    }
    #head-btn {
        justify-content: center;
        width: 100%;
    }

    /* 2. Hero Section (Section 1) */
    body .sec1-cont {
        padding-top: 40px;
        grid-template-cols: 1fr; /* Chuyển sang 1 cột */
        text-align: center;
    }
    body .slogan {
        width: 100%;
        font-size: 32px; /* Thu nhỏ chữ tiêu đề */
    }
    body .slogan-p, body .slogan-p2 {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
    body .started-btn {
        margin-left: auto;
        margin-right: auto;
    }
    .sec1-cont .flex.items-center.gap-4 {
        justify-content: center;
    }

    /* Image Hero Container */
    body #sec1-img-container {
        height: auto;
        min-height: 500px;
        margin-top: 50px;
    }
    body .imageyeah {
        width: 280px; /* Thu nhỏ ảnh đại diện */
        height: 280px;
    }
    body .hero-ring {
        width: 320px !important;
        height: 320px !important;
    }
    /* Ẩn hoặc thu nhỏ các tag bay lơ lửng gây tràn màn hình */
    body .unknow1 {
        left: 8px;
        top: 36px;
    }
    body .unknow3 {
        left: auto;
        right: -10px;
        bottom: -56px;
    }
    body .bg-blob {
        left: 0;
        width: 100%;
        border-radius: 40px;
    }

    /* 4. Affiliates & Steps */
    body .fz-40 {
        font-size: 28px;
    }
    .grid.md-grid-cols-3 {
        grid-template-columns: 1fr;
    }
    body .arrow {
        display: none; /* Ẩn mũi tên trên mobile cho đỡ rối */
    }
    body .step-cont {
        flex-direction: column;
        align-items: center;
    }

    /* 5. Form & Footer */
    body .h-earn {
        font-size: 24px;
    }
    .grid.lg-grid-cols-2 {
        grid-template-columns: 1fr;
    }
    body .ft-cont {
        flex-direction: column;
        text-align: center;
    }
    body .ft-cont .ft1 {
        margin-bottom: 30px;
    }
    .social {
        justify-content: center;
    }
    .ft-cont .flex.items-center.gap-3 {
        justify-content: center;
    }
}
@media (max-width: 1023px) {
    /* Container chứa Robot và 3 thẻ */
    body .robot-cont {
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column; /* Dàn hàng dọc từ trên xuống */
        align-items: center;
        margin-bottom: 50px;
    }

    /* Tinh chỉnh ảnh Robot trên Mobile */
    body .robot-cont img {
        width: 180px; /* Thu nhỏ robot một chút để nhường chỗ cho text */
        height: auto;
        margin-bottom: 20px; /* Khoảng cách giữa robot và thẻ đầu tiên */
        position: static; /* Bỏ absolute để nó nằm trên cùng */
        z-index: 1;
    }

    /* Định dạng chung cho 3 thẻ khi hiện lên Mobile */
    body .multilingual, 
    body .seamless, 
    body .always {
        position: relative !important; /* Quan trọng: Gỡ bỏ absolute của bản PC */
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        transform: none !important;
        width: 100% !important; /* Dàn hết chiều ngang mobile */
        max-width: 100%;
        margin-bottom: 15px; /* Khoảng cách giữa các thẻ */
        display: flex !important; /* Ép hiển thị lại trên Mobile */
        box-shadow: 0 4px 15px rgba(0,0,0,0.05);
        border-radius: 20px;
    }

    /* Điều chỉnh icon bên trong thẻ */
    body .bcs {
        flex-shrink: 0; /* Không cho icon bị bóp méo */
        width: 48px;
        height: 48px;
    }

    /* Điều chỉnh font chữ trong thẻ cho gọn */
    body .robot-cont h4 {
        font-size: 15px !important;
        line-height: 1.4 !important;
        width: auto !important; /* Bỏ width cố định 360px của PC */
    }
    body p.mb-4.md\:mb-0 {
    text-align: center;
}
.mobile-m {
        margin-top: 50px;
}
}