section.content {
      padding: 200px 0;
  }

  section.content .container {
      padding: 100px 0;
      height: 35vh;
  }

  .step {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 30px;
  }

  .step .circle {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background-color: #ddd;
      display: flex;
      justify-content: center;
      align-items: center;
      color: white;
      font-weight: bold;
  }

  .step .line {
      flex-grow: 1;
      height: 4px;
      background-color: #ddd;
      margin: 0 10px;
  }

  .circle.active {
      background-color: #007bff;
  }

  .circle.success.active {
      background-color: #198754;
  }

  .circle.danger.active {
      background-color: #dc3545;
  }

  .line.active {
      background-color: #007bff;
  }

  .line.success.active {
      background-color: #198754;
  }

  .line.danger.active {
      background-color: #dc3545;
  }

  .step-label {
      text-align: center;
      margin-top: 10px;
      font-size: 14px;
  }

  @media screen and (max-width: 767px) {
      .title-header {
          margin: 25px 0;
      }

      section.content .container {
          height: 100%;
          padding: 25px 0;
      }

      section.content {
          padding: 100px 0;
      }

      .step {
          flex-direction: column;
      }

      .step .line {
          width: 4px;
          height: 40px;
          margin: 10px 0;
      }

      .step-label {
          margin-top: 5px;
      }

      .table-responsive {
          overflow-x: auto;
          /* ทำให้ตารางสามารถเลื่อนซ้ายขวาได้ถ้ามีขนาดใหญ่กว่าหน้าจอ */
      }

      .table thead {
          display: none;
          /* ซ่อนหัวตารางเพื่อใช้รูปแบบการแสดงผลแบบ card */
      }

      .table tbody,
      .table tr,
      .table td {
          display: block;
          /* แสดงผลแต่ละแถวในรูปแบบ block เพื่อจัดเรียงในแนวตั้ง */
          width: 100%;
          box-sizing: border-box;
      }

      .table td {
          position: relative;
          padding-left: 50%;
          /* เพิ่มที่ว่างสำหรับข้อความ */
          text-align: left;
          /* จัดข้อความไปทางซ้าย */
          border: none;
          /* ลบเส้นขอบระหว่าง cells */
      }

      .table td::before {
          content: attr(data-label);
          /* ใช้ attribute data-label เพื่อแสดงชื่อหัวตาราง */
          position: absolute;
          left: 0;
          width: 45%;
          padding-left: 15px;
          font-weight: bold;
          white-space: nowrap;
      }

      .table td:last-child {
          border-bottom: 1px solid #ddd;
          /* เพิ่มเส้นขอบใต้ cell สุดท้ายในแต่ละแถว */
      }
  }