/* ============================================================
 * quiz.css — 4 Reasons Risk Test Pop-up (brand: navy/green/light)
 * ============================================================ */
.quiz-popup-overlay{position:fixed;inset:0;z-index:99999;background:rgba(15,23,42,.45);backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;padding:16px;font-family:'Kanit',ui-sans-serif,system-ui,sans-serif}
.quiz-popup-overlay.show{display:flex}
.quiz-popup{position:relative;width:100%;max-width:880px;max-height:92vh;background:#FFFFFF;border-radius:20px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 24px 80px rgba(0,0,0,.30);animation:quizIn .25s ease}
@keyframes quizIn{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.quiz-close{position:absolute;top:10px;right:12px;z-index:5;width:34px;height:34px;border:none;border-radius:50%;background:#F1F5F9;color:#475569;font-size:15px;cursor:pointer;line-height:1;transition:.15s}
.quiz-close:hover{background:#E2E8F0;color:#0F172A}
.quiz-scroll{flex:1;overflow-y:auto;padding:28px 24px 20px;-webkit-overflow-scrolling:touch}
.quiz-foot{border-top:1px solid #EEF2F7;background:#FFFFFF;padding:14px 24px}

/* header */
.quiz-head{text-align:center;margin-bottom:22px}
.q-badge{display:inline-block;background:rgba(0,55,129,.08);color:#003781;font-size:11px;font-weight:700;letter-spacing:.4px;padding:5px 14px;border-radius:999px;margin-bottom:10px;border:1px solid rgba(0,55,129,.15)}
.q-title{font-size:26px;font-weight:700;color:#0F172A;margin:0 0 6px;line-height:1.25;letter-spacing:-.2px;text-shadow:0 1px 2px rgba(255,255,255,.85),0 2px 8px rgba(255,255,255,.5)}
.q-title-orange{color:#F97316}
.q-sub{font-size:14.5px;color:#334155;margin:0;text-shadow:0 1px 2px rgba(255,255,255,.9)}

/* cards — ทุกใบเต็มภาพ (เหมือนการ์ด ④) + veil สีเข้มโทน + ข้อความขาว */
.q-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.q-card{position:relative;border-radius:18px;padding:0;overflow:hidden;display:flex;transition:.18s;box-shadow:0 4px 14px rgba(15,23,42,.07);cursor:pointer}
.q-card:hover{box-shadow:0 12px 30px rgba(15,23,42,.13);transform:translateY(-2px)}
.q-card-blue{background:#93BFEE}
.q-card-red{background:#E8A3AE}
.q-card-orange{background:#E8B583}
.q-card-green{background:#7FB98A}
.q-card-txt{position:relative;z-index:2;width:100%;padding:18px 18px 16px;display:flex;flex-direction:column;min-height:216px}
.q-card-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:1}
.q-card-veil{position:absolute;inset:0;z-index:1;pointer-events:none}
.q-card-blue .q-card-veil{background:linear-gradient(100deg,rgba(11,37,84,.70) 0%,rgba(11,37,84,.46) 48%,rgba(11,37,84,.12) 100%)}
.q-card-red .q-card-veil{background:linear-gradient(100deg,rgba(94,16,34,.78) 0%,rgba(94,16,34,.52) 48%,rgba(94,16,34,.14) 100%)}
.q-card-orange .q-card-veil{background:linear-gradient(100deg,rgba(64,34,8,.70) 0%,rgba(64,34,8,.46) 48%,rgba(64,34,8,.12) 100%)}
.q-card-green .q-card-veil{background:linear-gradient(100deg,rgba(6,78,59,.64) 0%,rgba(6,78,59,.40) 48%,rgba(6,78,59,.10) 100%)}
.q-num{width:30px;height:30px;border-radius:50%;color:#fff;font-size:15px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;margin-bottom:9px;box-shadow:0 2px 6px rgba(15,23,42,.25)}
.q-card-title{font-size:15.5px;font-weight:700;line-height:1.4;margin:0 0 6px;color:#FFFFFF;text-shadow:0 1px 4px rgba(0,0,0,.35)}
.q-card-sub{font-size:12.5px;line-height:1.55;margin:0 0 12px;flex:1;color:#F1F5F9;text-shadow:0 1px 3px rgba(0,0,0,.3)}
.q-checks{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.q-check{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:#FFFFFF;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.5);padding:3px 10px;border-radius:999px;font-weight:500}
.q-check .lucide{width:12px;height:12px}
.q-btn{border:none;cursor:pointer;font-family:inherit;font-weight:700;font-size:14px;padding:11px 18px;border-radius:12px;transition:.15s;display:inline-flex;align-items:center;justify-content:center;gap:6px;text-decoration:none;line-height:1.2}
.q-btn-card{width:auto;align-self:flex-start;color:#fff;font-size:13px;padding:9px 18px;border-radius:999px;box-shadow:0 4px 12px rgba(15,23,42,.18)}
.q-btn-card:hover{filter:brightness(1.08)}
.q-arrow{font-size:15px;line-height:1;margin-left:2px;font-weight:600}

/* footer — ลายเส้นไปบรรจบข้อความ */
.q-foot-txt{text-align:center;margin-top:20px}
.q-foot-script{display:flex;align-items:center;gap:14px;font-style:italic;font-weight:600;font-size:14.5px;color:#334155;text-shadow:0 1px 2px rgba(255,255,255,.9)}
.q-foot-script::before,.q-foot-script::after{content:"";flex:1;height:1.5px;background:linear-gradient(90deg,transparent,#94A3B8 55%,#CBD5E1);border-radius:2px}
.q-foot-script::after{background:linear-gradient(270deg,transparent,#94A3B8 55%,#CBD5E1)}
.q-foot-small{font-size:11.5px;color:#6B7280;margin-top:3px;text-shadow:0 1px 2px rgba(255,255,255,.8)}
.q-heart{color:#EF4444}

/* wizard */
.q-progress{height:6px;background:#E2E8F0;border-radius:999px;overflow:hidden;margin:2px 0 10px}
.q-progress-bar{height:100%;background:linear-gradient(90deg,#003781,#1D4ED8);border-radius:999px;transition:width .25s}
.q-step-meta{font-size:11.5px;color:#94A3B8;margin-bottom:6px}
.q-q{font-size:18px;font-weight:700;color:#0F172A;margin:0 0 6px;line-height:1.4;text-shadow:0 1px 2px rgba(255,255,255,.9)}
.q-hint{font-size:12.5px;color:#475569;margin:0 0 14px;text-shadow:0 1px 2px rgba(255,255,255,.7)}
.q-opts{display:flex;flex-direction:column;gap:9px}
.q-opt{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1.5px solid #E2E8F0;border-radius:12px;padding:12px 14px;cursor:pointer;transition:.14s;background:#fff}
.q-opt:hover{border-color:#94A3B8}
.q-opt.on{border-color:#003781;background:#F0F6FF}
.q-opt-t{font-size:14px;color:#1E293B;line-height:1.4}
.q-opt-box{width:22px;height:22px;border-radius:7px;border:2px solid #CBD5E1;display:inline-flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0}
.q-opt.on .q-opt-box{background:#003781;border-color:#003781}
.q-opt-box .lucide{width:14px;height:14px}
.q-radio{width:12px;height:12px;border-radius:50%;background:transparent}
.q-opt.on .q-radio{background:#fff}
.q-scale{display:flex;gap:8px;margin:6px 0 10px}
.q-scale-btn{flex:1;padding:14px 0;border:2px solid #E2E8F0;background:#fff;border-radius:12px;font-size:17px;font-weight:700;color:#64748B;cursor:pointer;transition:.14s;font-family:inherit}
.q-scale-btn:hover{border-color:#94A3B8}
.q-scale-btn.sel{border-color:#003781;background:#003781;color:#fff}
.q-scale-labels{display:flex;gap:8px}
.q-scale-labels span{flex:1;text-align:center;font-size:10.5px;color:#94A3B8;line-height:1.3}
.q-scale-values{min-height:24px;text-align:center;font-size:13px;font-weight:600;color:#003781;margin-top:8px}
.q-input{width:100%;border:1.5px solid #E2E8F0;border-radius:12px;padding:13px 14px;font-size:16px;font-family:inherit;color:#0F172A;outline:none;transition:.14s;box-sizing:border-box}
.q-input:focus{border-color:#003781;box-shadow:0 0 0 3px rgba(0,55,129,.12)}
.q-input{margin-bottom:10px}

/* nav */
.q-nav{display:flex;align-items:center;justify-content:space-between;gap:12px}
.q-btn-ghost{background:transparent;border:1.5px solid #E2E8F0;color:#475569;font-size:13.5px}
.q-btn-ghost:hover{border-color:#94A3B8;color:#0F172A}
.q-btn-main{background:#003781;color:#fff;font-size:14.5px;min-width:150px}
.q-btn-main:hover{filter:brightness(1.1)}

/* loading */
.q-loading{display:flex;flex-direction:column;align-items:center;gap:10px;color:#64748B;font-size:14px}
.q-spin{width:36px;height:36px;border:4px solid #E2E8F0;border-top-color:#003781;border-radius:50%;animation:qspin .8s linear infinite}
@keyframes qspin{to{transform:rotate(360deg)}}

/* result */
.q-toprisk{color:#fff;border-radius:16px;padding:20px 22px;margin-bottom:18px}
.q-toprisk-label{font-size:12px;opacity:.85;margin-bottom:4px}
.q-toprisk-value{font-size:22px;font-weight:700;line-height:1.3}
.q-scores{display:grid;gap:12px;margin-bottom:18px}
.q-score-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:4px}
.q-score-name{font-size:13.5px;font-weight:600;color:#0F172A}
.q-score-val{font-size:13.5px;font-weight:800}
.q-score-bar{height:8px;background:#E2E8F0;border-radius:999px;overflow:hidden}
.q-score-bar span{display:block;height:100%;border-radius:999px;transition:width .6s}
.q-score-txt{font-size:11.5px;font-weight:600;margin-top:3px}
.q-sec-t{font-size:14px;font-weight:700;color:#003781;margin:14px 0 8px}
.q-ev{background:#F8FAFC;border:1px solid #EEF2F7;border-radius:14px;padding:14px 16px;margin-bottom:6px}
.q-ev-line{font-size:13px;color:#334155;line-height:2;font-weight:500}
.q-recs{display:grid;gap:10px}
.q-rec{border:1px solid #E2E8F0;border-radius:14px;padding:14px;background:#fff}
.q-rec-top{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.q-logo{width:24px;height:24px;border-radius:6px;color:#fff;font-size:8px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;text-align:center;line-height:1}
.q-rec-badge{font-size:10.5px;font-weight:700;color:#00A000;background:#F0FDF4;border:1px solid #BBF7D0;padding:2px 8px;border-radius:999px}
.q-rec-title{font-size:14px;font-weight:700;color:#0F172A;margin-bottom:2px}
.q-rec-co{font-size:12px;color:#64748B;margin-bottom:10px}
.q-rec-btns{display:flex;gap:8px}
.q-btn-outline{flex:1;text-align:center;border:1.5px solid #003781;color:#003781;border-radius:10px;padding:9px 0;font-size:13px;font-weight:700;text-decoration:none;transition:.14s;cursor:pointer}
.q-btn-outline:hover{background:#EFF6FF}
.q-btn-solid{flex:1;text-align:center;color:#fff;border-radius:10px;padding:9px 0;font-size:13px;font-weight:700;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;transition:.14s;border:none;cursor:pointer;font-family:inherit}
.q-btn-solid:hover{filter:brightness(1.08)}
.q-calc{background:#FFFBEB;border:1px solid #FDE68A;border-radius:14px;padding:14px 16px;margin-top:4px}
.q-calc .q-sec-t{color:#92400E;margin-top:0}
.q-calc-line{font-size:12.5px;color:#78350F;line-height:1.9}
.q-calc-result{font-size:19px;font-weight:800;color:#B45309;margin:8px 0 2px}
.q-calc-note{font-size:11px;color:#A16207;opacity:.85}
.q-cta{display:flex;gap:10px;margin:16px 0 8px}
.q-cta2{text-align:center;font-size:13px}
.q-link{background:none;border:none;color:#003781;font-size:13px;font-weight:600;cursor:pointer;text-decoration:none;font-family:inherit;padding:0}
.q-link:hover{text-decoration:underline}
.q-contact{margin-top:16px;border-top:1px dashed #E2E8F0;padding-top:14px;text-align:center}
.q-consent{display:block;font-size:12px;color:#64748B;text-align:left;margin:8px 2px 12px;line-height:1.5}
.q-consent input{margin-right:6px}

/* ปุ่มลอยเปิดแบบทดสอบ (ทั้งเว็บ) */
.quiz-float{position:fixed;bottom:24px;left:24px;z-index:9990;display:inline-flex;align-items:center;gap:8px;background:#003781;color:#fff;border:none;border-radius:999px;padding:12px 20px;font-family:'Kanit',ui-sans-serif,system-ui,sans-serif;font-size:13px;font-weight:700;cursor:pointer;box-shadow:0 10px 28px rgba(0,55,129,.35);transition:.2s}
.quiz-float:hover{background:#00265A;transform:translateY(-2px)}
@media (max-width:640px){
  .quiz-float{left:16px;bottom:16px;padding:10px 14px;font-size:12px;gap:6px}
}

/* ปุ่มลอย */
/* mobile — ป๊อปอัปเป็นกล่องลอย ไม่เต็มจอ (ต้องรู้ว่าเป็น popup) */
@media (max-width:640px){
  .quiz-popup-overlay{padding:14px}
  .quiz-popup{max-width:100%;max-height:88dvh;height:auto;border-radius:18px}
  .quiz-scroll{padding:20px 16px 16px}
  .quiz-foot{padding:12px 16px}
  .q-cards{grid-template-columns:1fr}
  .q-title{font-size:19px}
  .q-card-txt{min-height:0;padding:14px 14px 12px;width:100%}
  .q-card-img{width:100%}
  .q-btn-main{min-width:0;flex:1}
  .q-nav .q-btn-ghost{flex:1}
}