:root {
      --teal-900: #0b3d3c;
      --teal-700: #0f5c58;
      --teal-600: #137a72;
      --teal-500: #1a9b8f;
      --teal-100: #e3f3f0;
      --coral-600: #ec6a52;
      --coral-500: #f0836b;
      --coral-100: #fdebe6;
      --ink: #1e2a2a;
      --ink-soft: #5b6b6a;
      --line: #dfe8e6;
      --bg: #f6f9f8;
      --white: #fff;
      --danger: #d64545;
      --radius: 16px;
    }

    * {
      box-sizing: border-box;
      -webkit-tap-highlight-color: transparent;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      font-family: 'Sarabun', sans-serif;
      background: var(--bg);
      color: var(--ink);
      padding-bottom: 96px;
      /* เผื่อพื้นที่ sticky CTA ด้านล่างบนมือถือ */
    }

    h1,
    h2,
    .brand,
    .btn,
    label.title {
      font-family: 'Kanit', sans-serif;
    }

    
    .align-center{text-align:center;}

    /* ---- progress bar ---- */
    .progress-rail {
      position: sticky;
      top: 0;
      height: 4px;
      background: var(--teal-100);
      z-index: 50;
    }

    .progress-fill {
      height: 100%;
      width: 0%;
      background: var(--coral-600);
      transition: width .1s linear;
    }

    header.hero {
      background: linear-gradient(135deg, var(--teal-700), var(--teal-500));
      color: #fff;
      padding: 26px 20px 60px;
      position: relative;
      overflow: hidden;
    }

    header.hero::after {
      content: "";
      position: absolute;
      right: -50px;
      top: -70px;
      width: 220px;
      height: 220px;
      border-radius: 50%;
      background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .18), transparent 70%);
    }

    .hero-inner {
      position: relative;
      z-index: 1;
      max-width: 560px;
      margin: 0 auto;
      align-items: center;
      display: flex;
      flex-direction: column;
      gap: 8px;
      
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      font-weight: 600;
      opacity: .9;
      margin-bottom: 10px;
    }

    .brand .dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--coral-500);
      display: inline-block;
    }

    .school-badge {
      display: inline-block;
      background: rgba(255, 255, 255, .16);
      border: 1px solid rgba(255, 255, 255, .3);
      padding: 5px 12px;
      border-radius: 100px;
      font-size: 12.5px;
      margin-bottom: 10px;
      text-align: center;

    }

    header.hero h1 {
      font-size: 22px;
      margin: 0 0 6px;
      line-height: 1.4;
    }

    header.hero p {
      margin: 0;
      font-size: 13.5px;
      opacity: .92;
      max-width: 48ch;
    }

    main {
      max-width: 560px;
      margin: -38px auto 0;
      padding: 0 16px 20px;
      position: relative;
      z-index: 2;
    }

    .step-card {
      background: var(--white);
      border-radius: var(--radius);
      border: 1px solid var(--line);
      padding: 20px 18px;
      margin-bottom: 16px;
      box-shadow: 0 12px 28px -20px rgba(11, 61, 60, .25);
    }

    .step-head {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 16px;
    }

    .step-num {
      width: 26px;
      height: 26px;
      border-radius: 50%;
      background: var(--teal-600);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12.5px;
      font-weight: 700;
      font-family: 'Kanit', sans-serif;
      flex-shrink: 0;
    }

    label.title {
      font-size: 15px;
      font-weight: 600;
      color: var(--teal-900);
    }

    .subtext {
      font-size: 12.5px;
      color: var(--ink-soft);
      margin: 2px 0 0 36px;
    }

    /* ---- toggle buttons: เพศ ---- */
    .toggle-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    .toggle-btn {
      position: relative;
      border: 1.5px solid var(--line);
      border-radius: 12px;
      padding: 16px 10px;
      text-align: center;
      cursor: pointer;
      background: var(--white);
      transition: border-color .15s, background .15s;
    }

    .toggle-btn input {
      position: absolute;
      opacity: 0;
      inset: 0;
      margin: 0;
      cursor: pointer;
    }

    .toggle-btn .ic {
      font-size: 22px;
      display: block;
      margin-bottom: 6px;
    }

    .toggle-btn .lb {
      font-size: 13.5px;
      font-weight: 600;
      color: var(--ink);
    }

    .toggle-btn:has(input:checked) {
      border-color: var(--teal-600);
      background: var(--teal-100);
    }

    .toggle-btn:has(input:checked) .lb {
      color: var(--teal-900);
    }

    /* ---- age chips ---- */
    .chip-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .chip {
      position: relative;
      border: 1.5px solid var(--line);
      border-radius: 10px;
      min-width: 46px;
      padding: 10px 6px;
      text-align: center;
      cursor: pointer;
      background: var(--white);
      font-size: 13.5px;
      font-weight: 600;
      color: var(--ink);
    }

    .chip input {
      position: absolute;
      opacity: 0;
      inset: 0;
      margin: 0;
      cursor: pointer;
    }

    .chip:has(input:checked) {
      border-color: var(--coral-600);
      background: var(--coral-100);
      color: var(--coral-600);
    }

    /* ---- select / input ---- */
    select,
    input[type=text],
    textarea {
      width: 100%;
      font-family: 'Sarabun', sans-serif;
      font-size: 14.5px;
      padding: 12px 13px;
      border-radius: 10px;
      border: 1.5px solid var(--line);
      background: var(--white);
      color: var(--ink);
      outline: none;
      transition: border-color .15s ease, box-shadow .15s ease;
    }

    select:focus,
    input:focus,
    textarea:focus {
      border-color: var(--teal-500);
      box-shadow: 0 0 0 4px rgba(26, 155, 143, .14);
    }

    select:disabled {
      background: #f2f5f4;
      color: #9aa9a8;
    }

    .field-group {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-bottom: 12px;
    }

    .field-group label.small-label {
      font-size: 12.8px;
      font-weight: 500;
      color: var(--teal-900);
    }

    .field-group:last-child {
      margin-bottom: 0;
    }

    /* ---- people type cards ---- */
    .people-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    .people-card {
      position: relative;
      border: 1.5px solid var(--line);
      border-radius: 12px;
      padding: 14px 10px;
      text-align: center;
      cursor: pointer;
      background: var(--white);
    }

    .people-card input {
      position: absolute;
      opacity: 0;
      inset: 0;
      margin: 0;
      cursor: pointer;
    }

    .people-card .ic {
      font-size: 20px;
      display: block;
      margin-bottom: 5px;
    }

    .people-card .lb {
      font-size: 13px;
      font-weight: 600;
    }

    .people-card:has(input:checked) {
      border-color: var(--teal-600);
      background: var(--teal-100);
    }

    /* ---- factor toggle cards ---- */
    .fac-card {
      position: relative;
      display: flex;
      align-items: flex-start;
      gap: 12px;
      border: 1.5px solid var(--line);
      border-radius: 12px;
      padding: 13px 14px;
      margin-bottom: 10px;
      cursor: pointer;
    }

    .fac-card:last-of-type {
      margin-bottom: 0;
    }

    .fac-card input[type=checkbox] {
      width: 20px;
      height: 20px;
      margin-top: 1px;
      accent-color: var(--teal-600);
      flex-shrink: 0;
      cursor: pointer;
    }

    .fac-card .lb {
      font-size: 13.8px;
      line-height: 1.45;
    }

    .fac-card:has(input:checked) {
      border-color: var(--teal-600);
      background: var(--teal-100);
    }

    .fac-sub {
      margin: -2px 0 10px 32px;
      padding: 12px 14px;
      background: var(--coral-100);
      border-radius: 10px;
      display: none;
    }

    .fac-sub .form-radio {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 13.3px;
      margin-bottom: 8px;
    }

    .fac-sub .form-radio:last-of-type {
      margin-bottom: 8px;
    }

    .fac-sub input[type=radio] {
      width: 17px;
      height: 17px;
      accent-color: var(--coral-600);
    }

    .errmsg {
      font-size: 12.5px;
      color: var(--danger);
      margin-top: 6px;
      display: none;
    }

    .errmsg.show {
      display: block;
    }

    /* ---- honeypot: ซ่อนจริงจากผู้ใช้ แต่บอทที่ auto-fill ยังมองเห็น field นี้ ---- */
    .hp-field {
      position: absolute;
      left: -9999px;
      top: -9999px;
      opacity: 0;
      height: 0;
      overflow: hidden;
    }

    .turnstile-wrap {
      display: flex;
      justify-content: center;
      padding: 6px 0 2px;
    }

    /* ---- sticky CTA ---- */
    .cta-bar {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 60;
      background: rgba(255, 255, 255, .96);
      backdrop-filter: blur(6px);
      border-top: 1px solid var(--line);
      padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    }

    .cta-inner {
      max-width: 560px;
      margin: 0 auto;
    }

    .btn-submit {
      width: 100%;
      font-size: 15.5px;
      font-weight: 600;
      padding: 14px 20px;
      border-radius: 12px;
      border: none;
      cursor: pointer;
      color: #fff;
      background: var(--coral-600);
      box-shadow: 0 10px 22px -10px rgba(236, 106, 82, .65);
      transition: transform .12s ease, background .15s ease;
    }

    .btn-submit:hover {
      background: #e15a41;
    }

    .btn-submit:active {
      transform: translateY(1px);
    }

    .notfound-wrap {
      max-width: 420px;
      margin: 70px auto;
      text-align: center;
      padding: 0 20px;
    }

    .notfound-wrap .ic {
      font-size: 44px;
      margin-bottom: 14px;
    }

    .notfound-wrap h1 {
      font-size: 18px;
      color: var(--teal-900);
      margin: 0 0 8px;
    }

    .notfound-wrap p {
      color: var(--ink-soft);
      font-size: 13.8px;
      margin: 0;
    }

    @media (min-width:600px) {
      .cta-bar {
        position: static;
        background: none;
        border: none;
        backdrop-filter: none;
        padding: 20px 0 0;
      }

      body {
        padding-bottom: 0;
      }

      .btn-submit {
        width: auto;
        padding: 14px 40px;
      }

      .cta-inner {
        display: flex;
        justify-content: center;
      }
    }
    

    @media (prefers-reduced-motion:reduce) {
      * {
        transition: none !important;
        scroll-behavior: auto !important;
      }
    }

    .identity-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
    .identity-grid .full{grid-column:1 / -1;}
    .field-label{display:block;font-weight:600;margin-bottom:6px;color:#1e2a2a;}
    .text-input{width:100%;padding:12px 14px;border:1.5px solid #dfe8e6;border-radius:10px;font-family:'Sarabun',sans-serif;font-size:16px;background:#fff;color:#1e2a2a;outline:none;}
    .text-input:focus{border-color:#1a9b8f;box-shadow:0 0 0 3px rgba(26,155,143,.12);}
    .anonymous-option{display:flex;align-items:center;gap:9px;margin-top:14px;padding:11px 13px;border:1px solid #dfe8e6;border-radius:10px;background:#f6f9f8;cursor:pointer;}
    .anonymous-option input{width:18px;height:18px;accent-color:#137a72;}
    #identityFields[hidden]{display:none !important;}
    @media (max-width:640px){.identity-grid{grid-template-columns:1fr;}.identity-grid .full{grid-column:auto;}}