/* ══════════════════════════════════════════════════════════
       แถบเลื่อนระดับการศึกษา — 3 ระดับ
       ใช้ <input type="range"> ตัวจริง จึงเลื่อนด้วยลูกศรซ้าย/ขวาได้
       และมีช่องซ่อนเก็บ "ข้อความไทย" ไว้ส่งแทนตัวเลข 0/1/2
       ══════════════════════════════════════════════════════════ */
.edu-wrap {
      padding: 18px 16px 12px;
      border: 1px solid var(--border);
      border-radius: 14px;
      background: #fbfdff;
    }
.edu-track {
      padding: 0 11px;
    }
.edu-slider {
      display: block;
      width: 100%;
      height: 26px;
      padding: 0;
      border: 0;
      outline: none;
      background: transparent;
      -webkit-appearance: none;
      appearance: none;
      cursor: pointer;
    }
.edu-slider::-webkit-slider-runnable-track {
      height: 8px;
      border-radius: 99px;
      background: linear-gradient(
        90deg,
        var(--blue) 0%,
        var(--blue) var(--p, 50%),
        #dbe7f1 var(--p, 50%),
        #dbe7f1 100%
      );
    }
.edu-slider::-moz-range-track {
      height: 8px;
      border-radius: 99px;
      background: #dbe7f1;
    }
.edu-slider::-moz-range-progress {
      height: 8px;
      border-radius: 99px;
      background: var(--blue);
    }
.edu-slider::-webkit-slider-thumb {
      width: 26px;
      height: 26px;
      margin-top: -9px;
      border: 4px solid var(--blue);
      border-radius: 50%;
      background: #ffffff;
      box-shadow: 0 4px 12px rgba(15, 108, 187, 0.4);
      cursor: grab;
      transition: transform 0.18s ease, box-shadow 0.18s ease;
      -webkit-appearance: none;
      appearance: none;
    }
.edu-slider::-moz-range-thumb {
      width: 22px;
      height: 22px;
      border: 4px solid var(--blue);
      border-radius: 50%;
      background: #ffffff;
      box-shadow: 0 4px 12px rgba(15, 108, 187, 0.4);
      cursor: grab;
    }
.edu-slider:active::-webkit-slider-thumb {
      transform: scale(1.14);
      box-shadow: 0 0 0 8px rgba(15, 108, 187, 0.16);
      cursor: grabbing;
    }
.edu-slider:focus-visible::-webkit-slider-thumb {
      box-shadow: 0 0 0 8px rgba(15, 108, 187, 0.22);
    }
.edu-slider:focus-visible::-moz-range-thumb {
      box-shadow: 0 0 0 8px rgba(15, 108, 187, 0.22);
    }
.edu-labels {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      margin-top: 10px;
      gap: 4px;
    }
.edu-labels span {
      color: var(--muted);
      font-size: 0.78rem;
      font-weight: 500;
      line-height: 1.45;
      text-align: center;
      cursor: pointer;
      transition: 0.2s ease;
      -webkit-user-select: none;
      user-select: none;
    }
.edu-labels span:first-child {
      text-align: left;
    }
.edu-labels span:last-child {
      text-align: right;
    }
.edu-labels span:hover {
      color: var(--blue);
    }
.edu-labels span.on {
      color: var(--navy);
      font-weight: 700;
    }
.edu-note {
      margin: 10px 0 0;
      color: var(--muted);
      font-size: 0.72rem;
      line-height: 1.6;
    }
.consent {
      display: flex;
      align-items: flex-start;
      gap: 9px;
      margin: 20px 0;
      color: var(--muted);
      font-size: 0.76rem;
      line-height: 1.65;
      cursor: pointer;
    }
.consent input {
      width: auto;
      margin-top: 4px;
      accent-color: var(--blue);
    }
.policy-link {
      color: var(--blue);
      font-weight: 600;
    }
.submit-button {
      width: 100%;
      padding: 14px 20px;
      border: 0;
      border-radius: 12px;
      cursor: pointer;
      color: var(--white);
      background: var(--blue);
      box-shadow: 0 10px 22px rgba(15, 108, 187, 0.26);
      font-family: inherit;
      font-size: 0.95rem;
      font-weight: 600;
      transition: 0.2s ease;
    }
.submit-button:hover {
      background: var(--blue-dark);
      transform: translateY(-2px);
    }
.submit-button:disabled {
      cursor: wait;
      opacity: 0.75;
      transform: none;
    }
/* กล่องแจ้งเตือนในหน้า — ไม่ใช้ alert() เพราะถูกบล็อกเมื่อฝังใน iframe ของ Google Sites */
.form-error {
      display: none;
      margin: 14px 0 0;
      padding: 12px 14px;
      border: 1px solid #f3c2c2;
      border-radius: 11px;
      color: #9b2c2c;
      background: #fdf2f2;
      font-size: 0.8rem;
      line-height: 1.65;
    }
.form-error.on {
      display: block;
    }
.form-error a {
      color: #9b2c2c;
      font-weight: 700;
      text-decoration: underline;
    }
.privacy-text {
      margin: 12px 0 0;
      color: var(--muted);
      font-size: 0.7rem;
      line-height: 1.6;
      text-align: center;
    }
footer {
      padding: 0 0 30px;
      color: #7f919f;
      font-size: 0.76rem;
      text-align: center;
    }
.foot-links,
    .foot-contact {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 8px 20px;
    }
.foot-links {
      padding-bottom: 14px;
      border-bottom: 1px solid #dbe7ee;
      font-size: 0.82rem;
      font-weight: 600;
    }
.foot-links a:hover,
    .foot-contact a:hover {
      color: var(--blue);
    }
.foot-contact {
      margin-top: 14px;
      color: var(--blue);
      font-size: 0.84rem;
      font-weight: 600;
    }
.foot-copy {
      margin: 12px 0 0;
      font-size: 0.73rem;
    }
@media (max-width: 850px) {
      .quote-wrapper {
        grid-template-columns: 1fr;
      }

      .intro-panel,
      .form-panel {
        padding: 38px 30px;
      }
    }
@media (max-width: 540px) {
      .container {
        width: min(100% - 26px, 1100px);
      }

      .nav-contact {
        display: none;
      }

      .page-content {
        padding-top: 5px;
      }

      .quote-wrapper {
        border-radius: 22px;
      }

      .intro-panel,
      .form-panel {
        padding: 31px 21px;
      }

      .form-grid {
        grid-template-columns: 1fr;
      }

      .form-group.full {
        grid-column: auto;
      }

      .edu-labels span {
        font-size: 0.72rem;
      }
    }
@media (prefers-reduced-motion: reduce) {
      * {
        transition: none !important;
      }
    }

/* ══════════════════════════════════════════════════════════════
   กล่องวิดีโอแนะนำ · วางในพาเนลซ้ายใต้ข้อความเงื่อนไข คปภ.

   เดสก์ท็อป ≥1024px คอลัมน์ซ้ายเหลือที่ว่างใต้ข้อความนั้นราว 434–442px
   วิดีโอ 16:9 กว้างเต็มคอลัมน์จะสูง ~272px จึงลงพอดีโดยไม่ดันหน้ายาวขึ้น
   จอแคบคอลัมน์ซ้อนกัน กล่องนี้จะไหลต่อท้ายข้อความเองตามลำดับใน HTML

   พาเนลซ้ายเป็นไล่เฉดน้ำเงินเข้ม ตัวหนังสือขาว กล่องนี้จึงใช้ขอบและพื้น
   แบบโปร่งเหมือน .info-notice เพื่อให้ดูเป็นชุดเดียวกัน
   ══════════════════════════════════════════════════════════════ */
.jvid {
      position: relative;
      z-index: 1;
      margin-top: 20px;
    }
/* ป้ายนี้วางบนไล่เฉดช่วงที่สว่างที่สุดของพาเนล วัดพิกเซลจริงแล้วแม้ใช้ขาวล้วน
   ก็ได้ contrast แค่ 3.87 ไม่ผ่านเกณฑ์ 4.5 แก้ที่สีตัวอักษรไม่ได้เลย
   จึงทำเป็นเม็ดยาพื้นเข้มโปร่ง ๆ รองไว้ ตัวอักษรขาวได้ 6.08 ขึ้นไป */
.jvid-lbl {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      margin: 0 0 10px;
      padding: 5px 13px 5px 11px;
      color: #fff;
      border-radius: 999px;
      background: rgba(3, 26, 48, 0.34);
      font-size: 0.8rem;
      font-weight: 600;
      letter-spacing: 0.3px;
    }
.jvid-lbl::before {
      width: 16px;
      height: 2px;
      content: "";
      border-radius: 2px;
      background: rgba(255, 216, 106, 0.9);
    }

.jvid-frame {
      position: relative;
      overflow: hidden;
      aspect-ratio: 16 / 9;
      border: 1px solid rgba(255, 255, 255, 0.18);
      border-radius: 16px;
      background: rgba(3, 32, 58, 0.55);
      box-shadow: 0 14px 30px -16px rgba(2, 26, 48, 0.85);
    }
/* เบราว์เซอร์เก่าที่ไม่รู้จัก aspect-ratio ยังต้องได้กรอบสูงพอดี */
@supports not (aspect-ratio: 16 / 9) {
      .jvid-frame {
        height: 0;
        padding-bottom: 56.25%;
      }
    }
.jvid-frame iframe {
      position: absolute;
      inset: 0;
      display: block;
      width: 100%;
      height: 100%;
      border: 0;
    }

/* ── ภาพปก: ใช้ตอนยังไม่เลื่อนมาถึง และตอนเครื่องบล็อกการเล่นอัตโนมัติ ── */
.jvid-ph {
      position: absolute;
      inset: 0;
      display: grid;
      width: 100%;
      padding: 0;
      cursor: pointer;
      border: 0;
      background: none;
      place-items: center;
    }
/* [แก้บั๊ก] ปุ่ม play ค้างทับวิดีโอที่กำลังเล่น
   join-video.js ซ่อนภาพปกด้วย ph.hidden = true ซึ่งพึ่งกฎ [hidden]{display:none}
   ของเบราว์เซอร์เอง แต่กฎนั้นอยู่ใน user-agent stylesheet ส่วน .jvid-ph{display:grid}
   ด้านบนเป็น author stylesheet ซึ่งมาก่อนเสมอไม่ว่าค่าความจำเพาะจะเท่าไร
   ผลคือตั้ง hidden แล้วปุ่มก็ยังโผล่อยู่ ทับหน้าคนในวิดีโอตลอดเวลา
   (.jvid-sound ด้านล่างมีกฎนี้อยู่แล้ว แต่ .jvid-ph ตกหล่นไป) */
.jvid-ph[hidden] {
      display: none;
    }
.jvid-ph img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
.jvid-ph::after {
      position: absolute;
      inset: 0;
      content: "";
      background: linear-gradient(180deg, rgba(3, 30, 56, 0.28), rgba(3, 30, 56, 0.55));
    }
.jvid-play {
      position: relative;
      z-index: 1;
      display: grid;
      width: 58px;
      height: 58px;
      color: #0b4a8f;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.95);
      box-shadow: 0 8px 20px -6px rgba(2, 26, 48, 0.7);
      font-size: 1.15rem;
      place-items: center;
      transition: transform 0.28s cubic-bezier(0.22, 0.8, 0.2, 1);
    }
.jvid-ph:hover .jvid-play {
      transform: scale(1.08);
    }
.jvid-ph:focus-visible {
      outline: 3px solid #ffd86a;
      outline-offset: -3px;
    }

/* ── ปุ่มเปิด/ปิดเสียง ──
   เล่นอัตโนมัติพร้อมเสียงทำไม่ได้ เบราว์เซอร์บล็อกไว้ทุกตัว
   จึงเริ่มด้วยปิดเสียงแล้วให้ปุ่มนี้เป็นทางเปิด — การกดปุ่มนับเป็น
   user interaction เสียงจึงมาได้ทันที
   พื้นทึบพอให้ตัวหนังสือขาวผ่านเกณฑ์ contrast บนภาพวิดีโอทุกเฟรม */
.jvid-sound {
      position: absolute;
      right: 10px;
      bottom: 10px;
      z-index: 2;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      min-height: 38px;
      padding: 0 13px;
      cursor: pointer;
      color: #fff;
      border: 1px solid rgba(255, 255, 255, 0.3);
      border-radius: 999px;
      background: rgba(3, 26, 48, 0.86);
      box-shadow: 0 6px 16px -8px rgba(2, 26, 48, 0.9);
      font-family: inherit;
      font-size: 0.82rem;
      font-weight: 600;
      transition: background 0.25s, transform 0.25s;
    }
.jvid-sound:hover {
      background: rgba(3, 26, 48, 0.96);
      transform: translateY(-1px);
    }
.jvid-sound:focus-visible {
      outline: 3px solid #ffd86a;
      outline-offset: 2px;
    }
.jvid-sound[hidden] {
      display: none;
    }

/* จอแคบ กล่องนี้ไหลต่อท้ายข้อความ คุมระยะห่างไม่ให้ชิดเกินไป */
@media (max-width: 980px) {
      .jvid {
        margin-top: 24px;
      }
    }
@media (max-width: 540px) {
      .jvid-play {
        width: 50px;
        height: 50px;
      }
      .jvid-sound {
        right: 8px;
        bottom: 8px;
        padding: 0 11px;
        font-size: 0.79rem;
      }
    }

/* ══════════════════════════════════════════════════════════════
   โหมดมืด (join) — ทับสีสว่างที่ฮาร์ดโค้ดไว้ ให้เข้ากับพื้นมืด
   ══════════════════════════════════════════════════════════════ */
[data-theme="dark"] .edu-card,
[data-theme="dark"] .choice-card { background: #0a1830; }
/* รางสไลเดอร์การศึกษา: ส่วนที่ยังไม่เลือกเป็นสีเข้ม */
[data-theme="dark"] .edu-track {
  background: linear-gradient(90deg,
    var(--blue) 0%, var(--blue) var(--p, 50%),
    #1d3358 var(--p, 50%), #1d3358 100%);
}
[data-theme="dark"] .edu-slider::-moz-range-track { background: #1d3358; }
[data-theme="dark"] .edu-slider::-webkit-slider-thumb { background: #0c1e3b; }
[data-theme="dark"] .edu-slider::-moz-range-thumb { background: #0c1e3b; }
/* กล่องแจ้งข้อผิดพลาด */
[data-theme="dark"] .form-error {
  border-color: rgba(255, 133, 133, .4);
  color: #ff9d9d;
  background: rgba(155, 44, 44, .18);
}
[data-theme="dark"] .form-error a { color: #ff9d9d; }
[data-theme="dark"] footer { color: #93aacb; }
[data-theme="dark"] .foot-links { border-bottom-color: #22365c; }