.wsv{--g:#0f7a55;--g2:#17a673;--p:#0d3b8e;--fg:#17202e;--mu:#667085;--li:#e3e8f0;--bad:#d92d20;font:400 16px/1.6 Sarabun,Tahoma,sans-serif;color:var(--fg);max-width:860px;margin:0 auto;text-align:left}
.wsv *{box-sizing:border-box}
.wsv-hero{display:flex;gap:16px;align-items:flex-start;background:linear-gradient(135deg,#0f7a55,#1557d6);color:#fff;border-radius:18px;padding:22px 24px;margin-bottom:16px;box-shadow:0 10px 28px rgba(15,122,85,.25)}
.wsv-hero-ic{flex:none;width:56px;height:56px;border-radius:16px;background:rgba(255,255,255,.18);display:grid;place-items:center;font-size:30px}
.wsv-hero h2{margin:0 0 6px!important;font:600 24px/1.3 Kanit,sans-serif!important;color:#fff!important;padding:0!important;border:0!important}
.wsv-hero h2::before,.wsv-hero h2::after{display:none!important}
.wsv-hero p{margin:0 0 10px;opacity:.92;font-size:15px}
.wsv-fy{display:inline-block;background:rgba(255,255,255,.18);border-radius:20px;padding:2px 12px;font:500 13px Kanit,sans-serif}
.wsv-steps{display:flex;gap:8px;list-style:none;margin:0 0 10px!important;padding:0!important}
.wsv-steps li{flex:1;display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--li);border-radius:12px;padding:8px 12px;font:500 14px Kanit,sans-serif;color:var(--mu);margin:0!important}
.wsv-steps li::marker{content:none}
.wsv-steps span{flex:none;width:26px;height:26px;border-radius:50%;background:#e8edf5;display:grid;place-items:center;font-size:13px}
.wsv-steps li.on{border-color:var(--g);color:var(--g);background:#effaf5}.wsv-steps li.on span{background:var(--g);color:#fff}
.wsv-steps li.ok span{background:var(--g2);color:#fff}.wsv-steps li.ok span{font-size:0}.wsv-steps li.ok span::after{content:"✓";font-size:13px}
.wsv-bar{height:6px;background:#e3e8f0;border-radius:6px;overflow:hidden;margin-bottom:16px}.wsv-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--g2),var(--g));transition:width .3s}
.wsv-page{background:#fff;border:1px solid var(--li);border-radius:18px;padding:22px 24px;box-shadow:0 6px 20px rgba(13,40,90,.06)}
.wsv-page h3{margin:0 0 16px!important;font:600 20px/1.35 Kanit,sans-serif!important;color:var(--p)!important}
.wsv-q{border:0;margin:0 0 18px;padding:0;display:block;min-width:0}
.wsv-q legend,.wsv-lg{display:block;font:500 16px/1.4 Kanit,sans-serif;margin-bottom:8px;padding:0}
.wsv em{color:var(--bad);font-style:normal}
.wsv-chips{display:flex;flex-wrap:wrap;gap:8px}
.wsv-chip{position:relative;cursor:pointer;margin:0}
.wsv-chip input,.wsv-scale input{position:absolute;opacity:0;width:1px;height:1px}
.wsv-chip span{display:inline-block;padding:8px 16px;border:1.5px solid var(--li);border-radius:30px;background:#fff;font-size:15px;transition:.15s}
.wsv-chip:hover span{border-color:#9ccfb9}
.wsv-chip input:checked+span{background:var(--g);border-color:var(--g);color:#fff;box-shadow:0 4px 10px rgba(15,122,85,.25)}
.wsv-chip input:focus-visible+span,.wsv-scale input:focus-visible+span{outline:3px solid #e2a72e;outline-offset:2px}
.wsv-grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.wsv select,.wsv input[type=text],.wsv textarea{width:100%;font:inherit;border:1.5px solid var(--li);border-radius:12px;padding:10px 14px;background:#fff;color:var(--fg);margin:0}
.wsv select:focus,.wsv input[type=text]:focus,.wsv textarea:focus{outline:0;border-color:var(--g);box-shadow:0 0 0 3px rgba(15,122,85,.15)}
.wsv-hint{background:#f2f7ff;border-radius:10px;padding:8px 12px;color:#41506a;font-size:14.5px;margin:-4px 0 16px}
.wsv-dim{margin:0 0 10px}
.wsv-dim h4{display:flex;align-items:center;gap:10px;margin:18px 0 10px!important;font:600 17px/1.3 Kanit,sans-serif!important;color:var(--g)!important}
.wsv-dim h4 span{width:30px;height:30px;border-radius:9px;background:#e7f6ef;display:grid;place-items:center;font-size:15px}
.wsv-rate{border:1px solid var(--li);border-radius:14px;padding:12px 14px 14px;margin:0 0 10px;transition:border-color .2s,background .2s;min-width:0}
.wsv-rate legend{float:left;width:100%;font-size:15.5px;line-height:1.5;margin-bottom:10px;padding:0}
.wsv-rate:has(input:checked){background:#fbfefc;border-color:#bfe5d4}
.wsv-scale{clear:both;display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.wsv-scale label{cursor:pointer;margin:0;position:relative}
.wsv-scale span{display:flex;flex-direction:column;align-items:center;gap:1px;padding:8px 2px 7px;border:1.5px solid var(--li);border-radius:12px;background:#fff;transition:.15s;text-align:center}
.wsv-scale i{font-style:normal;font-size:24px;line-height:1.1;filter:grayscale(1);opacity:.55;transition:.15s}
.wsv-scale b{font:600 15px Kanit,sans-serif}.wsv-scale small{font-size:11.5px;color:var(--mu);line-height:1.2}
.wsv-scale label:hover span{border-color:#9ccfb9}
.wsv-scale input:checked+span{border-color:var(--g);background:#e9f8f1;box-shadow:0 4px 12px rgba(15,122,85,.2);transform:translateY(-1px)}
.wsv-scale input:checked+span i{filter:none;opacity:1;transform:scale(1.15)}
.wsv-scale input:checked+span b,.wsv-scale input:checked+span small{color:var(--g)}
.wsv-bad{border-color:var(--bad)!important;background:#fff6f5!important;border-radius:14px}
.wsv-q.wsv-bad{padding:8px 10px;border:1.5px solid var(--bad)}
.wsv-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:20px;padding-top:16px;border-top:1px solid var(--li)}
.wsv-count{color:var(--mu);font-size:14px}
.wsv-btn{display:inline-block;border:0;border-radius:30px;background:var(--g);color:#fff!important;font:500 16px Kanit,sans-serif;padding:11px 26px;cursor:pointer;text-decoration:none!important;box-shadow:0 6px 14px rgba(15,122,85,.25);transition:.15s;min-height:0}
.wsv-btn:hover{background:#0b6646}.wsv-btn.ghost{background:#fff;color:var(--g)!important;border:1.5px solid var(--g);box-shadow:none}
.wsv-btn:disabled{opacity:.6;cursor:wait}
.wsv-note{display:block;color:var(--mu);font-size:13px;margin-top:6px}
.wsv-err{color:var(--bad);background:#fff6f5;border-radius:10px;padding:8px 12px;margin:12px 0 0}
.wsv-warn{color:var(--bad)}
.wsv-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px}
.wsv-done{background:#fff;border:1px solid var(--li);border-radius:18px;padding:36px 24px;text-align:center;box-shadow:0 6px 20px rgba(13,40,90,.06)}
.wsv-done-ic{width:72px;height:72px;margin:0 auto 12px;border-radius:50%;background:linear-gradient(135deg,var(--g2),var(--g));color:#fff;font-size:38px;display:grid;place-items:center;animation:wsvPop .4s ease}
@keyframes wsvPop{0%{transform:scale(.4);opacity:0}80%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}
.wsv-done h3{font:600 22px Kanit,sans-serif!important;color:var(--g)!important;margin:0 0 6px!important}.wsv-done p{color:var(--mu);margin:0 0 18px}
/* ผลสาธารณะ */
.wsv-res{background:#fff;border:1px solid var(--li);border-radius:18px;padding:20px 22px}
.wsv-res-top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}
.wsv-res-top h3{margin:0!important;font:600 19px Kanit,sans-serif!important;color:var(--p)!important}.wsv-res-top p{margin:2px 0 0;color:var(--mu)}
.wsv-big{text-align:center;background:#effaf5;border-radius:14px;padding:8px 16px}.wsv-big b{display:block;font:600 28px Kanit,sans-serif;color:var(--g)}.wsv-big span{font-size:13px;color:var(--mu)}
.wsv-rbar{display:grid;grid-template-columns:200px 1fr 60px;gap:10px;align-items:center;padding:6px 0;font-size:15px}
.wsv-rbar div{height:12px;background:#eef2f8;border-radius:8px;overflow:hidden}.wsv-rbar i{display:block;height:100%;background:linear-gradient(90deg,var(--g2),var(--g));border-radius:8px}
.wsv-rbar b{text-align:right;font:500 15px Kanit,sans-serif;color:var(--g)}
@media(max-width:640px){
  .wsv-hero{padding:16px;gap:12px}.wsv-hero-ic{width:44px;height:44px;font-size:24px}.wsv-hero h2{font-size:20px!important}
  .wsv-steps li{font-size:12.5px;padding:6px 8px;gap:6px;flex-direction:column;text-align:center}
  .wsv-page{padding:16px 14px;border-radius:14px}.wsv-grid2{grid-template-columns:1fr}
  .wsv-scale{gap:4px}.wsv-scale small{font-size:10.5px}.wsv-scale i{font-size:21px}
  .wsv-chip span{padding:7px 13px;font-size:14.5px}
  .wsv-nav{flex-wrap:wrap}.wsv-count{order:-1;width:100%;text-align:center}
  .wsv-rbar{grid-template-columns:1fr 54px}.wsv-rbar div{grid-column:1/-1;grid-row:2}
}
.wsv [hidden]{display:none!important}
