/* เพิ่มจากของเดิมได้เลย */
:root{
  --blue:#7BBDE8; --white:#fff; --ink:#123; --muted:#6b7; --shadow:0 6px 20px rgba(0,0,0,.08);
}
*{box-sizing:border-box} html,body{margin:0}
body{
  font-family:'Sarabun',system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial;
  background:var(--white); color:var(--ink);
  -webkit-tap-highlight-color: transparent;
}

/* ปุ่มใช้ฟอนต์เดียวกับ content + state ปิดเป็นสีเทา */
.btn{
  font-family: inherit;
  display:inline-block; padding:12px 16px; border-radius:12px; border:1px solid rgba(0,0,0,.05);
  text-decoration:none; font-weight:700; box-shadow:var(--shadow); transition:background .25s, color .25s, opacity .25s;
}
.btn.primary{background:var(--blue); color:#003;}
.btn.ghost{background:#f3f9ff}
.btn.full{display:block; width:100%; text-align:center}
.btn[disabled]{background:#ccc !important; color:#666 !important; cursor:not-allowed; box-shadow:none;}

/* หน้าแรก/ทั่วไป */
header.hero{padding:18px; display:flex; flex-direction:column; gap:14px; align-items:center}
.logo{height:72px}
.brand h1{margin:6px 0 4px; font-size:22px; text-align:center}
.brand .sub{margin:0; color:#456; text-align:center}
.copy{padding:24px; text-align:center; color:#678}

/* Top bar + การ์ด */
.topbar{position:sticky; top:0; background:#f7fbff; padding:10px 14px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid #e6f1fb}
.card{margin:20px auto; padding:16px; border-radius:16px; max-width:640px; background:#fff; box-shadow:var(--shadow)}
.quiz-form .q{margin-top:0; font-size:20px}

/* พื้นที่แตะ choice ให้ใหญ่ขึ้นสำหรับมือถือ */
.choices{display:flex; flex-direction:column; gap:12px}
.choice{display:flex; align-items:center; gap:12px}
.choice input{
  appearance:none; width:22px; height:22px; outline:2px solid var(--blue); border-radius:50%;
  position:relative; flex:0 0 22px;
}
.choice input:checked{background:var(--blue)}
.pill{display:inline-block; background:#eef6ff; padding:12px 14px; border-radius:999px; line-height:1.25}

/* ปุ่มนำทาง */
.nav{display:flex; justify-content:space-between; gap:10px; margin-top:16px}
.fields label{display:block; margin:10px 0}
.fields input{width:100%; padding:12px; border:1px solid #dce9f7; border-radius:12px}

/* Themed select (จังหวัด) ให้เข้ากับฟ้า/ขาว */
.fields select.themed-select{
  width:100%;
  padding:12px;
  border:1px solid #dce9f7;           /* กรอบอ่อนโทนฟ้า */
  border-radius:12px;
  background:#f7fbff;                 /* พื้นหลังโทนขาวอมฟ้า */
  color:#123;                          /* ตัวหนังสือเข้มอ่านง่าย */
  font-family: inherit;                /* ฟอนต์เดียวกับ content */
  appearance:none;                     /* ซ่อน native arrow บางเบราว์เซอร์ */
  background-image: linear-gradient(45deg, transparent 50%, #7BBDE8 50%),
                    linear-gradient(135deg, #7BBDE8 50%, transparent 50%),
                    linear-gradient(to right, #dce9f7, #dce9f7);
  background-position: calc(100% - 20px) calc(50% - 5px),
                       calc(100% - 15px) calc(50% - 5px),
                       calc(100% - 40px) 50%;
  background-size: 5px 5px, 5px 5px, 1px 65%;
  background-repeat: no-repeat;
}
.fields select.themed-select:focus{
  outline: none;
  border-color:#7BBDE8;
  box-shadow: 0 0 0 3px rgba(123,189,232,.25);
}



/* ------------------------------------------------------------
   Q10 Contact form UI (เพศ/อายุ/ที่อยู่/จังหวัด-อำเภอ-ตำบล-zip)
------------------------------------------------------------ */
.fields.contact-fields{
  display:grid;
  grid-template-columns: 1fr;
  gap:12px;
}
@media (min-width:720px){
  .fields.contact-fields{
    grid-template-columns: 1fr 1fr;
    gap:14px;
  }
  .fields.contact-fields .span-2{ grid-column: 1 / -1; }
}
.fields.contact-fields label,
.fields.contact-fields .field{
  margin:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.fields.contact-fields .label{
  font-weight:600;
}
..fields.contact-fields input{
  width:100%;
  padding:12px 14px;
  border:1px solid #dce9f7;
  border-radius:14px;
  background:#fff;
}
.fields.contact-fields select.themed-select{
  width:100%;
  padding:12px 14px;
  border:1px solid #dce9f7;
  border-radius:14px;
  background:#f7fbff;
}
.fields.contact-fields input:focus,
.fields.contact-fields select.themed-select:focus{
  outline:none;
  border-color:#7BBDE8;
  box-shadow: 0 0 0 3px rgba(123,189,232,.22);
}

/* Radio แบบ pill (เพศ) */
.radio-group{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.radio-pill{
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid #dce9f7;
  background:#f7fbff;
  cursor:pointer;
  user-select:none;
}
.radio-pill input{
  appearance:none;
  width:18px;
  height:18px;
  border-radius:50%;
  outline:2px solid #7BBDE8;
  outline-offset:2px;
  margin:0;
}
.radio-pill input:checked{
  background:#7BBDE8;
}
.radio-pill:has(input:checked){
  border-color:#7BBDE8;
  box-shadow: 0 0 0 3px rgba(123,189,232,.18);
  background:#eef6ff;
}

/* หน้า EDU */
.edu-card{margin:16px auto; padding:12px; max-width:720px;}
.edu-img{
  width:100%;
  border-radius:16px;
  display:block;
  box-shadow:var(--shadow);
  margin-bottom:12px;
  /* กันภาพสูงจนปุ่มต้องเลื่อนลงในมือถือ */
  max-height:85vh;
  object-fit:contain;
}

@media (max-width: 520px){
  .edu-card{margin:10px auto; padding:10px;}
  .edu-img{max-height:85vh;}
}

/* Ads แบบจุด */
.ad-box{position:relative; max-width:520px; margin:16px auto}
.ad-box img{width:100%; border-radius:16px; object-fit:cover; display:none}
.ad-box img.active{display:block}
.dots{display:flex; justify-content:center; gap:10px; margin-top:10px}
.dot{width:12px; height:12px; border-radius:50%; background:#ccc; cursor:pointer; transition:.2s; touch-action:manipulation}
.dot.active{background:#7BBDE8}

/* เพิ่ม hit-area ขณะใช้งานจอสัมผัส */
@media (pointer:coarse){
  .pill{padding:14px 16px}
  .choice input{width:26px; height:26px; flex-basis:26px}
  .dot{width:14px; height:14px}
}

/* ช่อง province แบบค้นหา (datalist) ให้เข้ากับธีม */
.province-input{
  width:100%;
  padding:12px;
  border:1px solid #dce9f7;
  border-radius:12px;
  background:#f7fbff;
  color:#123;
  font-family:inherit;
}
.province-input:focus{
  outline:none;
  border-color:#7BBDE8;
  box-shadow:0 0 0 3px rgba(123,189,232,.25);
}

/* ซ่อนช่อง honeypot ป้องกันโผล่มา */
.hp {
  display:none !important;
  position:absolute !important;
  left:-9999px !important;
}

/* ให้ input/select/textarea/button ใช้ฟอนต์เดียวกับเนื้อหา */
input, select, textarea, button { font-family: inherit; }

/* ช่องกรอกในฟอร์ม (รวม province-input) */
.fields input,
.fields select,
.province-input {
  font-family: inherit;
  font-size: 16px;            /* กัน iOS ซูมตอนโฟกัส */
}


/* --- Q10 validation highlight --- */
.invalid{
  border-color:#d52b2b !important;
  box-shadow:0 0 0 3px rgba(213,43,43,.15);
}
.fields label .field-error{
  display:block;
  margin-top:6px;
  font-size:.85rem;
  color:#d52b2b;
}
.readonly{
  background:rgba(0,0,0,.04);
}