/* =========================================================
   SMART FARM IOT — QUIZ
   Mobile First / Thai First
   ========================================================= */

body.quiz-page{
  background:#03100f;
  color:#f2f3ef;
}

.quiz-page .site-header{
  position:fixed;
  background:rgba(2,14,13,.92);
  border-bottom-color:rgba(186,162,116,.16);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

.quiz-main{
  min-height:100vh;
  overflow:hidden;
  background:
    radial-gradient(circle at 10% 0%,rgba(73,132,84,.17),transparent 30rem),
    radial-gradient(circle at 100% 40%,rgba(186,162,116,.06),transparent 24rem),
    linear-gradient(180deg,#041311 0%,#020b0b 52%,#020808 100%);
}

.quiz-page-shell{
  padding:92px 0 54px;
}

.quiz-container{
  width:calc(100% - 24px);
  max-width:980px;
}

/* =========================================================
   HERO
   ========================================================= */

.quiz-hero{
  padding:18px 16px;
  border:1px solid rgba(143,179,106,.22);
  border-radius:16px;
  background:
    radial-gradient(circle at 100% 0%,rgba(87,145,94,.14),transparent 48%),
    linear-gradient(145deg,rgba(13,53,39,.72),rgba(5,22,20,.88));
}

.quiz-kicker{
  display:inline-flex;
  min-height:28px;
  align-items:center;
  padding:0 10px;
  border:1px solid rgba(143,179,106,.34);
  border-radius:999px;
  color:#a9d27d;
  font-size:11px;
  font-weight:600;
}

.quiz-hero h1{
  margin:10px 0 0;
  color:#eee1be;
  font-size:26px;
  font-weight:500;
  line-height:1.28;
}

.quiz-hero h1 em{
  color:#9bc272;
  font-style:normal;
}

.quiz-hero p{
  margin:8px 0 0;
  color:#acb9b4;
  font-size:14px;
  line-height:1.65;
}

.quiz-hero__stats{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:7px;
  margin-top:14px;
}

.quiz-hero__stats>div{
  min-width:0;
  padding:10px 6px;
  border:1px solid rgba(255,255,255,.06);
  border-radius:10px;
  background:rgba(255,255,255,.018);
  text-align:center;
}

.quiz-hero__stats strong{
  display:block;
  color:#e4d6ad;
  font-size:20px;
  font-weight:500;
}

.quiz-hero__stats span{
  display:block;
  margin-top:2px;
  color:#788b84;
  font-size:10px;
}

/* =========================================================
   MAIN PANEL
   ========================================================= */

.quiz-panel{
  margin-top:12px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.075);
  border-radius:16px;
  background:rgba(3,15,14,.94);
  box-shadow:0 20px 70px rgba(0,0,0,.22);
}

.quiz-panel__top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:14px 14px 11px;
  border-bottom:1px solid rgba(255,255,255,.055);
}

.quiz-section-label{
  display:block;
  color:#81948d;
  font-size:10px;
  font-weight:600;
  letter-spacing:.6px;
}

.quiz-panel__top h2{
  margin:3px 0 0;
  color:#e3e7e3;
  font-size:16px;
  font-weight:500;
  line-height:1.4;
}

.quiz-state-badge{
  flex:0 0 auto;
  padding:5px 8px;
  border:1px solid rgba(186,162,116,.24);
  border-radius:999px;
  background:rgba(186,162,116,.05);
  color:#c5af72;
  font-size:10px;
  white-space:nowrap;
}

.quiz-progress-block{
  padding:11px 14px 12px;
  border-bottom:1px solid rgba(255,255,255,.045);
}

.quiz-progress__meta{
  display:flex;
  justify-content:space-between;
  gap:10px;
  color:#71847d;
  font-size:11px;
}

.quiz-progress__meta strong{
  color:#bca970;
  font-weight:500;
}

.quiz-progress{
  height:7px;
  margin-top:7px;
  overflow:hidden;
  border-radius:999px;
  background:#0b1a19;
}

.quiz-progress span{
  display:block;
  width:0;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,#548c43,#8aba64);
  transition:width .28s ease;
}

.quiz-dots{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  margin-top:9px;
}

.quiz-dot{
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.075);
  border-radius:7px;
  background:#081616;
  color:#697a74;
  font-size:9px;
}

.quiz-dot.is-current{
  border-color:rgba(186,162,116,.48);
  color:#d6c28d;
}

.quiz-dot.is-correct{
  border-color:rgba(122,196,90,.35);
  background:rgba(122,196,90,.07);
  color:#91cc73;
}

.quiz-dot.is-wrong{
  border-color:rgba(206,102,79,.34);
  background:rgba(206,102,79,.06);
  color:#d98c79;
}

/* =========================================================
   QUESTION
   ========================================================= */

.quiz-stage{
  padding:13px;
}

.quiz-question-card{
  padding:14px;
  border:1px solid rgba(255,255,255,.055);
  border-radius:13px;
  background:linear-gradient(145deg,rgba(255,255,255,.018),rgba(255,255,255,.008));
}

.question-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.question-meta span{
  display:inline-flex;
  min-height:25px;
  align-items:center;
  padding:0 8px;
  border-radius:999px;
  background:rgba(75,156,204,.07);
  color:#80b0cc;
  font-size:10px;
}

.question-meta b{
  color:#695e43;
  font-size:12px;
  font-weight:500;
}

.quiz-question-card h3{
  margin:11px 0 0;
  color:#e8e9e5;
  font-size:18px;
  font-weight:500;
  line-height:1.55;
}

.quiz-options{
  display:grid;
  gap:8px;
  margin-top:14px;
}

.quiz-option{
  position:relative;
  width:100%;
  display:grid;
  grid-template-columns:34px minmax(0,1fr) 20px;
  align-items:center;
  gap:9px;
  min-height:58px;
  padding:9px 10px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:11px;
  background:#071514;
  color:#c9d0cc;
  text-align:left;
  cursor:pointer;
  transition:border-color .18s ease,background .18s ease,transform .18s ease;
  touch-action:manipulation;
}

.quiz-option:hover{
  border-color:rgba(143,179,106,.24);
}

.quiz-option:active{
  transform:scale(.995);
}

.quiz-option:focus-visible{
  outline:2px solid #baa274;
  outline-offset:2px;
}

.quiz-option__letter{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.08);
  border-radius:9px;
  color:#90835f;
  font-size:12px;
  font-weight:600;
}

.quiz-option__label{
  min-width:0;
  font-size:14px;
  line-height:1.45;
}

.quiz-option__mark{
  color:#587069;
  font-size:15px;
  text-align:center;
}

.quiz-option.is-selected{
  border-color:rgba(186,162,116,.48);
  background:rgba(186,162,116,.05);
}

.quiz-option.is-selected .quiz-option__letter{
  border-color:rgba(186,162,116,.45);
  background:rgba(186,162,116,.08);
  color:#ddc789;
}

.quiz-option.is-correct{
  border-color:rgba(122,196,90,.45);
  background:rgba(122,196,90,.075);
}

.quiz-option.is-correct .quiz-option__letter,
.quiz-option.is-correct .quiz-option__mark{
  color:#91d174;
}

.quiz-option.is-wrong{
  border-color:rgba(206,102,79,.42);
  background:rgba(206,102,79,.065);
}

.quiz-option.is-wrong .quiz-option__letter,
.quiz-option.is-wrong .quiz-option__mark{
  color:#dd8e79;
}

.quiz-option:disabled{
  cursor:default;
}

/* =========================================================
   FEEDBACK
   ========================================================= */

.quiz-feedback{
  grid-template-columns:38px minmax(0,1fr);
  gap:10px;
  margin-top:12px;
  padding:11px;
  border:1px solid rgba(255,255,255,.065);
  border-radius:11px;
  background:#071413;
}

.quiz-feedback:not([hidden]){
  display:grid;
}

.quiz-feedback.is-correct{
  border-color:rgba(122,196,90,.25);
  background:rgba(122,196,90,.04);
}

.quiz-feedback.is-wrong{
  border-color:rgba(206,102,79,.24);
  background:rgba(206,102,79,.035);
}

.quiz-feedback__icon{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#0b1d19;
  color:#8fcc72;
  font-size:18px;
}

.quiz-feedback.is-wrong .quiz-feedback__icon{
  color:#db8874;
}

.quiz-feedback strong{
  display:block;
  color:#dce2de;
  font-size:13px;
  font-weight:500;
}

.quiz-feedback p{
  margin:4px 0 0;
  color:#879891;
  font-size:12px;
  line-height:1.6;
}

/* =========================================================
   CONTROLS
   ========================================================= */

.quiz-controls{
  display:grid;
  grid-template-columns:1fr;
  gap:7px;
  margin-top:13px;
}

.quiz-button{
  min-height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:9px 12px;
  border:1px solid transparent;
  border-radius:10px;
  font-family:inherit;
  font-size:13px;
  text-decoration:none;
  cursor:pointer;
  touch-action:manipulation;
  transition:border-color .18s ease,background .18s ease,opacity .18s ease;
}

.quiz-button--primary{
  border-color:rgba(122,196,90,.32);
  background:linear-gradient(90deg,rgba(35,84,45,.92),rgba(25,66,37,.92));
  color:#b0da95;
}

.quiz-button--secondary{
  border-color:rgba(255,255,255,.08);
  background:#081716;
  color:#8d9d97;
}

.quiz-button:disabled{
  opacity:.38;
  cursor:not-allowed;
}

.quiz-button:focus-visible{
  outline:2px solid #baa274;
  outline-offset:2px;
}

/* =========================================================
   RESULT
   ========================================================= */

.quiz-result-panel{
  padding:18px 14px;
}

.quiz-result-panel:not([hidden]){
  display:grid;
  gap:16px;
}

.result-score-ring{
  width:132px;
  height:132px;
  display:grid;
  align-content:center;
  justify-items:center;
  margin:0 auto;
  border:8px solid rgba(122,196,90,.14);
  border-radius:50%;
  background:radial-gradient(circle,rgba(122,196,90,.06),transparent 68%);
}

.result-score-ring.is-pass{
  border-color:rgba(122,196,90,.42);
}

.result-score-ring.is-review{
  border-color:rgba(186,162,116,.40);
}

.result-score-ring.is-retry{
  border-color:rgba(206,102,79,.36);
}

.result-score-ring strong{
  color:#ecdfbb;
  font-size:30px;
  font-weight:500;
}

.result-score-ring span{
  color:#788a84;
  font-size:10px;
}

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

.result-eyebrow{
  color:#82968e;
  font-size:10px;
}

.result-summary h2{
  margin:5px 0 0;
  color:#e8e4d7;
  font-size:22px;
  font-weight:500;
}

.result-summary p{
  max-width:620px;
  margin:7px auto 0;
  color:#84958f;
  font-size:13px;
  line-height:1.65;
}

.result-stats{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:7px;
  margin-top:14px;
}

.result-stats>div{
  padding:10px 6px;
  border:1px solid rgba(255,255,255,.06);
  border-radius:10px;
  background:rgba(255,255,255,.014);
}

.result-stats span{
  display:block;
  color:#687a74;
  font-size:10px;
}

.result-stats strong{
  display:block;
  margin-top:2px;
  color:#dcd6c3;
  font-size:19px;
  font-weight:500;
}

.result-review{
  display:grid;
  gap:7px;
}

.review-item{
  display:grid;
  grid-template-columns:31px minmax(0,1fr) auto;
  align-items:start;
  gap:8px;
  padding:9px;
  border:1px solid rgba(255,255,255,.055);
  border-radius:9px;
  background:rgba(255,255,255,.012);
}

.review-item__number{
  width:31px;
  height:31px;
  display:grid;
  place-items:center;
  border-radius:8px;
  background:#091817;
  color:#7d8f88;
  font-size:10px;
}

.review-item strong{
  display:block;
  color:#cfd6d2;
  font-size:12px;
  font-weight:500;
  line-height:1.45;
}

.review-item p{
  margin:3px 0 0;
  color:#687a74;
  font-size:10px;
  line-height:1.45;
}

.review-status{
  padding:3px 6px;
  border-radius:999px;
  font-size:9px;
  white-space:nowrap;
}

.review-status.is-correct{
  background:rgba(122,196,90,.07);
  color:#8ecb72;
}

.review-status.is-wrong{
  background:rgba(206,102,79,.06);
  color:#d98b77;
}

.result-actions{
  display:grid;
  gap:7px;
}

/* =========================================================
   NOTE
   ========================================================= */

.quiz-note{
  margin-top:12px;
  padding:12px 13px;
  border:1px solid rgba(186,162,116,.12);
  border-radius:12px;
  background:rgba(186,162,116,.025);
}

.quiz-note strong{
  display:block;
  color:#b8a46f;
  font-size:11px;
  font-weight:500;
}

.quiz-note p{
  margin:4px 0 0;
  color:#706f66;
  font-size:11px;
  line-height:1.6;
}

/* =========================================================
   TABLET
   ========================================================= */

@media (min-width:640px){
  .quiz-page-shell{
    padding:112px 0 68px;
  }

  .quiz-container{
    width:calc(100% - 40px);
  }

  .quiz-hero{
    display:grid;
    grid-template-columns:minmax(0,1fr) 320px;
    align-items:end;
    gap:24px;
    padding:24px;
  }

  .quiz-hero h1{
    font-size:34px;
  }

  .quiz-hero__stats{
    margin:0;
  }

  .quiz-panel{
    margin-top:16px;
  }

  .quiz-panel__top,
  .quiz-progress-block{
    padding-left:20px;
    padding-right:20px;
  }

  .quiz-stage{
    padding:18px 20px 20px;
  }

  .quiz-question-card{
    padding:20px;
  }

  .quiz-question-card h3{
    font-size:21px;
  }

  .quiz-options{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .quiz-controls{
    grid-template-columns:auto minmax(180px,260px);
    justify-content:space-between;
  }

  #nextQuestion{
    grid-column:2;
  }

  .quiz-result-panel{
    grid-template-columns:160px minmax(0,1fr);
    gap:22px;
    padding:26px 22px;
  }

  .result-score-ring{
    margin:0;
  }

  .result-summary{
    text-align:left;
  }

  .result-summary p{
    margin-left:0;
  }

  .result-review,
  .result-actions{
    grid-column:1 / -1;
  }

  .result-actions{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

/* =========================================================
   DESKTOP
   ========================================================= */

@media (min-width:1024px){
  .quiz-page-shell{
    padding-top:126px;
  }

  .quiz-hero{
    padding:28px 30px;
  }

  .quiz-hero h1{
    font-size:39px;
  }

  .quiz-question-card{
    padding:24px;
  }

  .quiz-question-card h3{
    font-size:22px;
  }

  .quiz-option{
    min-height:66px;
    padding:12px 13px;
  }

  .quiz-option__label{
    font-size:15px;
  }
}

/* =========================================================
   ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion:reduce){
  .quiz-progress span,
  .quiz-option,
  .quiz-button{
    transition:none;
  }
}


/* =========================================================
   QUIZ V2 — 40 QUESTIONS
   รองรับเลขข้อ 1–40 บน Mobile First
   ========================================================= */

.quiz-dots{
  display:flex;
  flex-wrap:nowrap;
  gap:5px;
  margin-top:10px;
  padding:2px 2px 6px;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-behavior:smooth;
  scroll-snap-type:x proximity;
  scrollbar-width:thin;
  scrollbar-color:rgba(186,162,116,.22) transparent;
}

.quiz-dots::-webkit-scrollbar{
  height:3px;
}

.quiz-dots::-webkit-scrollbar-track{
  background:transparent;
}

.quiz-dots::-webkit-scrollbar-thumb{
  border-radius:999px;
  background:rgba(186,162,116,.22);
}

.quiz-dot{
  flex:0 0 26px;
  width:26px;
  height:26px;
  scroll-snap-align:center;
}

.quiz-dot.is-current{
  flex-basis:30px;
  width:30px;
  border-color:rgba(186,162,116,.70);
  background:rgba(186,162,116,.09);
  color:#ead49a;
  box-shadow:0 0 0 1px rgba(186,162,116,.08);
}

.result-review{
  max-height:680px;
  overflow:auto;
  padding-right:3px;
  scrollbar-width:thin;
  scrollbar-color:rgba(143,179,106,.20) transparent;
}

.result-review::-webkit-scrollbar{
  width:4px;
}

.result-review::-webkit-scrollbar-thumb{
  border-radius:999px;
  background:rgba(143,179,106,.20);
}

@media (min-width:640px){
  .quiz-dot{
    flex-basis:28px;
    width:28px;
    height:28px;
    font-size:10px;
  }

  .quiz-dot.is-current{
    flex-basis:32px;
    width:32px;
  }

  .result-review{
    grid-template-columns:repeat(2,minmax(0,1fr));
    align-items:start;
  }
}


/* =========================================================
   QUIZ V3 — PRACTICE + EXAM
   ========================================================= */

.quiz-mode-switch{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:7px;
  margin-top:14px;
}

.quiz-mode-switch a{
  min-width:0;
  min-height:54px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:8px 10px;
  border:1px solid rgba(255,255,255,.065);
  border-radius:11px;
  background:rgba(4,20,18,.70);
  color:#8da099;
  text-decoration:none;
}

.quiz-mode-switch a strong{
  color:#d7ddd9;
  font-size:12px;
  font-weight:600;
}

.quiz-mode-switch a span{
  margin-top:2px;
  color:#768a82;
  font-size:9px;
}

.quiz-mode-switch a.is-active{
  border-color:rgba(154,194,111,.34);
  background:rgba(62,105,51,.13);
}

.quiz-mode-switch a.is-active strong{
  color:#b6d795;
}

.quiz-mode-grid{
  display:grid;
  gap:10px;
  margin-top:12px;
}

.quiz-mode-card{
  position:relative;
  overflow:hidden;
  padding:18px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:16px;
  background:
    radial-gradient(circle at 100% 0%,rgba(95,148,90,.08),transparent 48%),
    #061513;
  color:#94a69f;
  text-decoration:none;
}

.quiz-mode-card--exam{
  border-color:rgba(186,162,116,.20);
  background:
    radial-gradient(circle at 100% 0%,rgba(186,162,116,.08),transparent 48%),
    #061513;
}

.quiz-mode-card__tag{
  display:inline-flex;
  min-height:26px;
  align-items:center;
  padding:0 8px;
  border:1px solid rgba(143,179,106,.22);
  border-radius:999px;
  color:#9fc67b;
  font-size:9px;
  font-weight:700;
  letter-spacing:.8px;
}

.quiz-mode-card--exam .quiz-mode-card__tag{
  border-color:rgba(186,162,116,.25);
  color:#c7ad71;
}

.quiz-mode-card h2{
  margin:10px 0 0;
  color:#e5e8e4;
  font-size:21px;
  font-weight:520;
}

.quiz-mode-card p{
  margin:7px 0 0;
  color:#91a29c;
  font-size:13px;
  line-height:1.65;
}

.quiz-mode-card ul{
  margin:12px 0 0;
  padding-left:18px;
  color:#7d9189;
  font-size:11px;
  line-height:1.75;
}

.quiz-mode-card b{
  display:block;
  margin-top:14px;
  color:#a8ca88;
  font-size:12px;
  font-weight:600;
}

.quiz-mode-card--exam b{
  color:#d0b978;
}

.exam-security-note{
  padding:10px 14px;
  border-bottom:1px solid rgba(255,255,255,.045);
  background:rgba(65,53,25,.07);
}

.exam-security-note span{
  color:#b9a064;
  font-size:9px;
  font-weight:700;
  letter-spacing:.75px;
}

.exam-security-note p{
  margin:3px 0 0;
  color:#85938d;
  font-size:10px;
  line-height:1.55;
}

.quiz-dot{
  padding:0;
  appearance:none;
  cursor:pointer;
}

.quiz-dot.is-answered{
  border-color:rgba(91,164,202,.34);
  background:rgba(91,164,202,.07);
  color:#8bbfd8;
}

.exam-save-state{
  min-height:34px;
  display:flex;
  align-items:center;
  gap:7px;
  margin-top:11px;
  padding:7px 9px;
  border:1px solid rgba(255,255,255,.05);
  border-radius:8px;
  background:#061312;
  color:#72867e;
  font-size:10px;
}

.exam-save-state__dot{
  width:7px;
  height:7px;
  flex:0 0 7px;
  border-radius:50%;
  background:#7d8d87;
}

.exam-save-state[data-state="saving"] .exam-save-state__dot{
  background:#d1ad57;
  box-shadow:0 0 0 4px rgba(209,173,87,.08);
}

.exam-save-state[data-state="saved"] .exam-save-state__dot{
  background:#77b75b;
}

.exam-save-state[data-state="error"]{
  border-color:rgba(210,101,80,.18);
  color:#c88576;
}

.exam-save-state[data-state="error"] .exam-save-state__dot{
  background:#d36855;
}

.exam-submit-button{
  width:100%;
  min-height:60px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:9px;
  padding:8px 14px;
  border:1px solid rgba(186,162,116,.28);
  border-radius:11px;
  background:
    linear-gradient(90deg,rgba(86,72,35,.22),rgba(19,41,32,.62));
  color:#d9c58b;
  text-align:left;
  cursor:pointer;
}

.exam-submit-button:disabled{
  opacity:.42;
  cursor:not-allowed;
}

.exam-submit-button strong{
  display:block;
  font-size:13px;
  font-weight:600;
}

.exam-submit-button small{
  display:block;
  margin-top:2px;
  color:#8b927f;
  font-size:9px;
}

.exam-submit-button b{
  font-size:20px;
  font-weight:400;
}

.review-item__explanation{
  display:block;
  margin-top:5px;
  color:#71867d;
  font-size:10px;
  line-height:1.55;
}

@media (min-width:640px){
  .quiz-mode-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .quiz-mode-card{
    padding:22px;
  }

  .quiz-mode-card h2{
    font-size:23px;
  }

  .quiz-mode-card p{
    font-size:14px;
  }

  .quiz-mode-switch{
    max-width:520px;
  }

  .exam-security-note p{
    font-size:11px;
  }
}

@media (min-width:960px){
  .quiz-mode-card{
    min-height:280px;
  }

  .quiz-mode-card h2{
    font-size:26px;
  }
}