.container-card {
        max-width: 1000px;
        margin: 2rem auto;
        /* border: 1px solid #0a1f33; */
        border-radius: 20px;
        box-sizing: border-box;
        overflow: hidden;
        background: #ffffff;
        flex-direction: column;
        box-shadow: 0 4px 12px rgba(10, 31, 51, 0.1);
      }

      .roadmap-image {
        width: 100%;
      }

      .section {
        margin: 20px 0;
      }

      .section h2 {
        font-family: 'LINE Seed Sans TH','Kanit','Prompt', sans-serif;
        font-weight: 700;
        font-size: 28px;
        text-align: center;
        margin-top: 0;
        color: #0a1f33;
      }

      #detail,
      .benefit-text {
        font-size: 20px;
        font-family: 'LINE Seed Sans TH','Kanit','Prompt', sans-serif;
        line-height: 1;
        color: #0a1f33;
      }

      #benefit h2,
      #knowledge h2 {
        text-align: left;
      }

      .section ol {
        margin: 0 0 0 1.5em;
        font-family: 'LINE Seed Sans TH','Kanit','Prompt', sans-serif;
        font-size: 20px;
        color: #0a1f33;
      }

      .forwho-list {
        display: flex;
        flex-direction: column;
        gap: 1.25rem;
        padding: 0;
        margin: 0 auto;
        align-items: center;
        max-width: 700px;
      }

      .forwho-card {
        background: #f5f8fb;
        border-radius: 16px;
        box-shadow: 0 2px 8px rgba(60, 60, 60, 0.12);
        display: flex;
        align-items: center;
        padding: 10px 20px;
        gap: 1.5rem;
        width: 600px;
        max-width: 90vw;
        min-height: 70px;
        height: 80px;

        word-break: break-word;
        white-space: normal;
      }

      .forwho-icon {
        width: 54px;
        height: 54px;
        /* border-radius: 50%; */
        /* background: #e5e6e8; */
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2rem;
        /* color: #b0b4b8; */
        flex-shrink: 0;
      }

      .forwho-card .forwho-content {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
      }

      .forwho-title {
        font-family: 'LINE Seed Sans TH','Kanit','Prompt', sans-serif;
        font-weight: 700;
        /* font-weight: bold; */
        font-size: 20px;
        color: #0a1f33;
      }

      .course-list {
        display: flex;
        justify-content: center;
        gap: 1em;
        flex-wrap: wrap;
      }

      .course-card {
        width: 280px;
        /* min-width: 220px; */
        border-radius: 30px;
        overflow: hidden;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        background: #f5f8fb;
        /* font-family: "LINE Seed Sans TH", "Sarabun", sans-serif; */
        display: flex;
        flex-direction: column;
        align-self: flex-start;
      }

      .course-card img {
        width: 100%;
        aspect-ratio: 16 / 9;
        object-fit: cover;
      }

      .title-area {
        height: 48px;
      }

      .course-title {
        /* font-family: "LINE Seed Sans TH", "Sarabun", sans-serif; */
        font-family: 'LINE Seed Sans TH','Kanit','Prompt', sans-serif;
        font-weight: 700;
        color: #0a1f33;
        font-size: 24px;
        line-height: 1;
        margin: 0;
        /* font-weight: bold; */
        position: relative;
        /* จำเป็นสำหรับ ::before */
        padding-left: 0.625rem;
        text-align: left;

        display: -webkit-box;
        /* เปิดใช้ flexbox แบบกล่อง */
        -webkit-box-orient: vertical;
        /* ตั้งให้เรียงบรรทัดเป็นแนวตั้ง */
        -webkit-line-clamp: 2;
        /* จำกัด 2 บรรทัด */
        overflow: hidden;
        /* ซ่อนที่เกิน */
        text-overflow: ellipsis;
        /* เติม … เมื่อข้อความล้น */
        max-height: calc(1.5em * 2);
      }

      .course-title::before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 2px;
        /* ความหนาเส้น */
        height: 100%;
        background-color: #66ccff;
        border-radius: 2px;
      }

      .description-area {
        height: 60px;
        padding-left: 0.625rem;
      }

      .course-description {
        /* font-family: "Sarabun", sans-serif; */
        font-family: 'LINE Seed Sans TH','Kanit','Prompt', sans-serif;
        font-size: 20px;
        text-align: left;
        color: #4b5363;
        font-weight: 400;
        line-height: 1;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        /* จำกัด 2 บรรทัด */
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        max-height: calc(1.5em * 3);
        margin: 0;
      }

      .label {
        font-size: 0.95em;
        color: #0a1f33;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 10px;
      }

      .course-detail-area {
        height: 170px;
        padding: 0.625rem;
        display: flex;
        flex-direction: column;
        gap: 0.4375rem;
      }

      .info {
        display: flex;
        flex-direction: column;
        margin-top: auto;
        gap: 0.4375rem;
      }

      .card-info {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: auto;
        padding: 0;
        color: #0a1f33;
      }

      .info-price {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 0.625rem;
      }

      .info-duration {
        display: flex;
        align-items: center;
        gap: 0.625rem;
      }

      .price-icon {
        width: 20px;
        height: 20px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
        padding: 0.15rem;
        /* background: #ffffff; */
        border-radius: 50%;
        border: 2px solid #0a1f33;
        color: #0a1f33;
      }

      .duration-text {
        /* font-family: "LINE Seed Sans TH", "Sarabun", sans-serif; */
        /* font-weight: 700; */
        font-family: 'LINE Seed Sans TH','Kanit','Prompt', sans-serif;
        font-weight: 700;
        font-size: 24px;
        display: flex;
        align-items: center;
        color: #0a1f33;
      }

      .price-text {
        /* font-family: "LINE Seed Sans TH", "Sarabun", sans-serif;
        font-weight: 700; */
        font-family: 'LINE Seed Sans TH','Kanit','Prompt', sans-serif;
        font-weight: 700;
        font-size: 24px;
        line-height: 1em;
        display: flex;
        align-items: center;
        color: #0a1f33;
      }

      .course-btn {
        width: 100%;
        height: 45px;
        background-color: #66ccff;
        color: #0a1f33;
        display: inline-flex;
        /* หรือ flex */
        align-items: center;
        justify-content: center;
        gap: 0.75rem;
        border: none;
        /* font-family: "LINE Seed Sans TH", "Sarabun", sans-serif;
        font-weight: bold; */
        font-family: 'LINE Seed Sans TH','Kanit','Prompt', sans-serif;
        font-weight: 700;
        font-size: 20px;
        cursor: pointer;
      }

      .course-btn .course-link {
        text-decoration: none;
        /* เอาเส้นใต้ลิงก์ออก */
        color: inherit;
        /* รับสีจาก .course-btn (คือ #0a1f33) */
        width: 100%;
        /* ทำให้ลิงก์เต็มพื้นที่ปุ่ม */
        height: 100%;
        display: flex;
        /* ทำให้คลิกได้ทั้งปุ่ม */
        align-items: center;
        justify-content: center;
      }

      .btn-register {
        /* font-family: "LINE Seed Sans TH", "Sarabun", sans-serif; */
        padding: 0.7em 1.5em;
        font-size: 24px;
        font-family: 'LINE Seed Sans TH','Kanit','Prompt', sans-serif;
        font-weight: 700;
        /* font-weight: 700; */
        color: #0a1f33;
        background: #66ccff;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        align-self: center;
      }
      #regis-btn-top,
      #regis-btn-bottom {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 1rem;
      }

      .all-courses-wrap {
        display: flex;
        flex-direction: column;
        gap: 2.5rem;
        /* ระยะห่างระหว่าง main กับ extra */
      }

      .main-course-wrap {
        width: 100%;
        max-width: 100%;
        margin-bottom: 2rem;
      }

      .extra-course-wrap {
        /* font-family: "LINE Seed Sans TH", "Sarabun", sans-serif; */
        font-family: 'LINE Seed Sans TH','Kanit','Prompt', sans-serif;
        font-weight: 700;
        width: 70%;
        max-width: 70%;
        padding: 20px;
        justify-content: center;
        margin: 15px auto 0;
        border-radius: 30px;
        background-color: #dde4eb;
        box-sizing: border-box;
      }

      .course-group-label {
        font-family: 'LINE Seed Sans TH','Kanit','Prompt', sans-serif;
        font-weight: 700;
        text-align: center;
        color: #0a1f33;
        font-size: 1.5rem;
        margin: 0;
        margin-bottom: 15px;
        padding: 0;
        /* letter-spacing: 0.5px; */
      }

      .extra-course-wrap .course-list {
        display: flex;
        gap: 1em;
        flex-wrap: wrap;
        justify-content: center;
      }

      .objectives-section {
        background: #f5f8fb;
        border-radius: 20px;
        padding: 2rem 0;
        text-align: center;
      }
      .objectives-section h2 {
        /* font-family: "LINE Seed Sans TH", "Sarabun", sans-serif; */
        font-family: 'LINE Seed Sans TH','Kanit','Prompt', sans-serif;
        font-weight: 700;
        font-size: 2rem;
        color: #0a1f33;
        /* font-weight: bold; */
        margin-bottom: 1.2rem;
      }

      .objective-card-grid {
        display: flex;
        flex-wrap: wrap; /* ให้ขึ้นบรรทัดใหม่เมื่อเต็ม */
        gap: 1.4rem; /* ช่องว่างระหว่างกล่อง */
        justify-content: center; /* จัดให้อยู่ตรงกลาง */
        max-width: 900px;
        margin: 0 auto;
      }

      .objective-card {
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 1px 6px rgba(0, 0, 0, 0.07);
        padding: 1rem;

        /* ปรับขนาดการ์ดสำหรับ flex-wrap */
        flex: 1 1 220px; /* ให้ขยาย/ย่อได้ มีความกว้างเริ่มต้น 220px */
        max-width: 260px; /* จำกัดความกว้างไม่ให้เกิน 260px */
        min-width: 180px; /* จำกัดความกว้างต่ำสุด */

        display: flex;
        flex-direction: column;
        align-items: center;
        /* height: 180px; */
        min-height: 120px;
        box-sizing: border-box;
      }

      .objective-icon {
        width: 50px;
        height: 50px;
        /* background: #e5e6e8; */
        /* border-radius: 8px; */
        margin-bottom: 0.8rem;
      }
      .objective-title {
        /* font-family: "LINE Seed Sans TH", "Sarabun", sans-serif; */
        /* font-weight: bold; */
        font-family: 'LINE Seed Sans TH','Kanit','Prompt', sans-serif;
        font-weight: 700;
        font-size: 20px;
        margin-bottom: 0.2rem;
        color: #0a1f33;
        text-align: center;
      }

      .career-detail {
        margin: 20px;
        display: flex;
        flex-direction: column;
        gap: 20px;
      }

      .summary-card {
        display: flex;
        align-items: center;
        justify-content: center;
        background: #fff;
        border-radius: 16px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
        padding: 2rem 1.5rem;
        gap: 1.5rem;
        max-width: 800px;
        margin: 0 auto;
        border: 2px solid #66ccff;
      }
      .summary-item {
        text-align: center;
        min-width: 110px;
        display: flex;
        flex-direction: column;
      }
      .summary-divider {
        width: 2px;
        height: 80px;
        background: #d2eafc;
        border-radius: 4px;
      }
      .summary-number {
        font-size: 48px;
        line-height: 1;
        color: #152030;
        font-family: 'LINE Seed Sans TH','Kanit','Prompt', sans-serif;
        font-weight: 700;
      }
      .summary-label {
        font-size: 22px;
        font-family: 'LINE Seed Sans TH','Kanit','Prompt', sans-serif;
        font-weight: 700;
        color: #152030;
      }
      .summary-price {
        font-size: 2rem;
        font-family: 'LINE Seed Sans TH','Kanit','Prompt', sans-serif;
        font-weight: 700;
        display: flex;
        flex-direction: column;
      }
      .discounted-price {
        color: #ea212d;
        font-size: 2rem;
        font-family: 'LINE Seed Sans TH','Kanit','Prompt', sans-serif;
        font-weight: 700;
      }
      .original-price {
        font-size: 1.15rem;
        color: #333;
        font-family: 'LINE Seed Sans TH','Kanit','Prompt', sans-serif;
      }
      .btn-outline {
        display: inline-block;
        background: #66ccff;
        color: #152030;
        font-family: 'LINE Seed Sans TH','Kanit','Prompt', sans-serif;
        font-weight: 700;
        font-size: 24px;
        border-radius: 10px;
        padding: 16px 32px;
        text-align: center;
        text-decoration: none;
        transition: background 0.2s;
      }
      .btn-outline:hover {
        background: #58c3f7;
        color: #ffffff;
      }

      .promo-container {
        border: 2px solid #66ccff;
        border-radius: 18px;
        padding: 30px 18px;
        background: #fff;
        max-width: 1300px;
        margin: 30px auto 0 auto;
        display: flex;
        flex-direction: column;
        gap: 20px;
      }

      .promo-title {
        font-size: 28px;
        text-align: center;
        margin-bottom: 10px;
        font-family: 'LINE Seed Sans TH','Kanit','Prompt', sans-serif;
        font-weight: 700;
        color: #0a1f33;
      }

      .promo-strong {
        color: #ff4848;
        /* font-weight: bold; */
        font-family: 'LINE Seed Sans TH','Kanit','Prompt', sans-serif;
        font-weight: 700;
        margin-right: 6px;
      }

      .promo-boxes {
        display: flex;
        gap: 34px;
        justify-content: center;
        flex-wrap: wrap;
      }

      .promo-box {
        background: #fff;
        border-radius: 10px;
        box-shadow: 0 4px 14px rgba(120, 180, 220, 0.07);
        padding: 20px 10px;
        min-width: 150px;
        min-height: 150px;
        text-align: center;
        font-family: 'LINE Seed Sans TH','Kanit','Prompt', sans-serif;
        font-weight: 700;
        display: flex;
        flex-direction: column;
        /* justify-content: center; */
        transition: box-shadow 0.2s;
        border: 1px solid #ededed;
      }

      .promo-box .promo-group {
        font-size: 20px;
        line-height: 1;
        color: #0a1f33;
        font-family: inherit;
      }

      .promo-box .promo-percent {
        flex: 1 1 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-family: 'LINE Seed Sans TH','Kanit','Prompt', sans-serif;
        font-weight: 700;
        font-size: 36px;
        color: #0a1f33;
        background: none;
        text-align: center;
      }

      .promo-box-highlight {
        background: #66ccff;
        color: #fff;
        border: none;
        box-shadow: 0 4px 18px rgba(60, 180, 255, 0.14);
      }

      .promo-box-highlight .promo-group {
        color: #0a1f33;
      }

      .promo-box-highlight .promo-percent {
        color: #fff;
        font-size: 40px;
        line-height: 1;
        font-family: 'LINE Seed Sans TH','Kanit','Prompt', sans-serif;
        font-weight: 700;
      }

      .promo-box-highlight .promo-highlight-label {
        font-size: 40px;
        line-height: 1;
        font-family: 'LINE Seed Sans TH','Kanit','Prompt', sans-serif;
        font-weight: 700;
        display: block;
      }

      .promo-note {
        font-family: 'LINE Seed Sans TH','Kanit','Prompt', sans-serif;
        font-size: 18px;
        margin: 0 40px;
        line-height: 1;
      }

      .promo-terms-wrapper {
        align-self: stretch;
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 0 20px;
        box-sizing: border-box;
        max-width: 960px;
        /* margin: 0 auto; */
      }

      .promo-terms-title {
        text-align: left;
        color: black;
        font-size: 24px;
        /* font-family: "LINE Seed Sans TH", sans-serif;
        font-weight: 700; */
        font-family: 'LINE Seed Sans TH','Kanit','Prompt', sans-serif;
        font-weight: 700;
        line-height: 24px;
        width: 100%;
      }

      .promo-terms-detail {
        color: black;
        font-size: 18px;
        /* font-family: "LINE Seed Sans TH", sans-serif;
        font-weight: 400; */
        font-family: 'LINE Seed Sans TH','Kanit','Prompt', sans-serif;
        font-weight: normal;
        line-height: 28px;
        word-wrap: break-word;
        padding-left: 0;
      }

      .promo-terms-detail ul {
        padding-left: 20px;
        margin: 0;
        list-style-type: disc;
      }

      .promo-terms-detail li {
        margin: 0;
        /* margin-bottom: 10px; */
      }

      .benefits-wrapper {
        display: flex;
        gap: 24px;
        margin: 20px auto;
        flex-wrap: wrap;
        justify-content: center;
      }
      .benefit-card {
        background: #f5f8fb;
        border-radius: 10px;
        box-shadow: 0 2px 8px rgba(10, 31, 51, 0.07);
        padding: 20px;
        width: 180px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
      }
      .benefit-title {
        height: 48px;
        font-family: 'LINE Seed Sans TH','Kanit','Prompt', sans-serif;
        font-weight: 700;
        font-size: 24px;
        color: #0a1f33;
        line-height: 1;
        text-align: center;
      }
      .benefit-desc {
        font-family: 'LINE Seed Sans TH','Kanit','Prompt', sans-serif;
        color: #0a1f33;
        font-size: 20px;
        line-height: 1;
        text-align: center;
      }
      .benefit-note {
        font-family: 'LINE Seed Sans TH','Kanit','Prompt', sans-serif;
        font-size: 16px;
        color: #ff5a5f;
        margin-top: 5px;
        line-height: 1;
      }

      .alumni-card {
        background: #f9f9fb;
        border-radius: 18px;
        box-shadow: 0 2px 8px rgba(10, 31, 51, 0.09);
        max-width: 500px;
        margin: 1rem auto;
        padding: 2rem 2rem 1.5rem;
      }
      .alumni-header {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 1.6rem;
        margin-bottom: 1.1rem;
        font-family: 'LINE Seed Sans TH','Kanit','Prompt', sans-serif;
        font-weight: 700;
      }
      .alumni-title {
        font-size: 28px;
        color: #0a1f33;
      }
      .alumni-benefit-list {
        font-family: 'LINE Seed Sans TH','Kanit','Prompt', sans-serif;
        margin: 0 0 1.1rem 0;
        padding-left: 1.4em;
        color: #333;
        font-size: 20px;
        line-height: 1.25;
      }
      .alumni-benefit-list .highlight {
        color: #0099cc;
        font-family: 'LINE Seed Sans TH','Kanit','Prompt', sans-serif;
        font-weight: 700;
        font-size: 22px;
      }

      .contact {
        text-align: left;
        font-family: 'LINE Seed Sans TH','Kanit','Prompt', sans-serif;
        font-weight: normal;
        font-size: 1.125rem;
        line-height: 1;
        padding: 1.5rem;
      }

      @media (max-width: 768px) {
        .course-list {
          flex-direction: column;
          align-items: center;
          justify-content: center;
          width: 100%;
          margin: 0 auto;
          padding: 0 8px;
        }

        .course-card {
          align-self: center;
        }

        .forwho-card {
          max-width: 90%;
        }

        .extra-course-wrap {
          width: 100%;
          max-width: 100%;
          margin: 15px 0 0 0;
          padding: 10px;
          border-radius: 18px;
        }

        .objective-card-grid {
          flex-direction: column;
          align-items: center;
        }
        .objective-card {
          flex: unset;
          max-width: 90%;
          min-width: unset;
          width: 100%;
          margin: 0 0.5rem;
          min-height: 140px;
        }

        .summary-card {
          flex-direction: column;
          gap: 10px;
          padding: 20px 10px;
          max-width: 99vw;
          min-width: unset;
          border-radius: 12px;
          align-items: center;
          justify-content: center;
        }

        .summary-divider {
          display: none;
        }
        .summary-item {
          min-width: 0;
          width: 100%;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
        }
        .discounted-price,
        .summary-number {
          font-size: 1.6rem;
        }
        .btn-outline {
          font-size: 20px;
          padding: 12px 0;
          border-radius: 8px;
          width: 80%;
          box-sizing: border-box;
          text-align: center;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }