*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--primary: #6c63ff;--primary-light: #a5a0ff;--correct: #2ecc71;--correct-bg: #d5f5e3;--wrong: #e74c3c;--wrong-bg: #fadbd8;--bg: #f0f2ff;--card-bg: #ffffff;--text: #2c3e50;--text-light: #7f8c8d;--radius: 16px;--shadow: 0 4px 20px rgba(108, 99, 255, .12)}html{font-size:18px}body{font-family:Sarabun,sans-serif;background:var(--bg);color:var(--text);min-height:100dvh;-webkit-font-smoothing:antialiased}.hidden{display:none!important}.screen{display:none;min-height:100dvh;padding:16px;overflow-y:auto}.screen.active{display:flex;flex-direction:column;align-items:center}.start-card{text-align:center;background:var(--card-bg);border-radius:var(--radius);box-shadow:var(--shadow);padding:40px 28px;max-width:440px;width:100%;margin:auto}.start-icon{font-size:4rem;margin-bottom:12px}.start-card h1{font-size:1.6rem;font-weight:700;color:var(--primary);margin-bottom:4px}.start-card h2{font-size:1.15rem;font-weight:600;color:var(--text);margin-bottom:16px}.start-desc{font-size:.95rem;color:var(--text-light);line-height:1.6;margin-bottom:24px}.name-input-group{text-align:left;margin-bottom:20px}.name-label{display:block;font-size:.9rem;font-weight:700;color:var(--text);margin-bottom:6px}.name-input{width:100%;padding:12px 16px;font-size:1.05rem;font-family:inherit;font-weight:600;border:2px solid #e0deff;border-radius:12px;background:#f8f7ff;color:var(--text);outline:none;transition:border-color .2s}.name-input:focus{border-color:var(--primary)}.name-input::placeholder{color:#b0aed0;font-weight:400}.name-error{color:var(--wrong);font-size:.85rem;font-weight:600;margin-top:10px}.btn-start{display:inline-block;background:var(--primary);color:#fff;border:none;border-radius:12px;padding:14px 40px;font-size:1.15rem;font-weight:700;font-family:inherit;cursor:pointer;transition:transform .15s,box-shadow .15s;box-shadow:0 4px 14px #6c63ff59}.btn-start:hover{transform:translateY(-2px);box-shadow:0 6px 20px #6c63ff73}.btn-start:active{transform:translateY(0)}#quiz-screen{padding-top:0}.quiz-header{position:sticky;top:0;background:var(--bg);width:100%;max-width:540px;padding:16px 0 8px;z-index:10}.progress-bar{width:100%;height:10px;background:#e0deff;border-radius:5px;overflow:hidden}.progress-fill{height:100%;background:var(--primary);border-radius:5px;transition:width .4s ease;width:0%}.progress-text{text-align:center;font-size:.85rem;color:var(--text-light);margin-top:6px;font-weight:600}.quiz-card{background:var(--card-bg);border-radius:var(--radius);box-shadow:var(--shadow);padding:24px 20px;max-width:540px;width:100%;margin-top:8px;animation:slideIn .35s ease}@keyframes slideIn{0%{opacity:0;transform:translate(40px)}to{opacity:1;transform:translate(0)}}.question-number{display:inline-block;background:var(--primary);color:#fff;font-size:.85rem;font-weight:700;padding:4px 14px;border-radius:20px;margin-bottom:14px}.question-image-container{text-align:center;margin-bottom:14px}.question-image{max-width:100%;max-height:200px;object-fit:contain;border-radius:12px}.situation{font-size:1rem;line-height:1.7;margin-bottom:12px;white-space:pre-line}.table-container{overflow-x:auto;margin-bottom:14px}.data-table{width:100%;border-collapse:collapse;font-size:.92rem;text-align:center}.data-table th{background:var(--primary);color:#fff;padding:8px 10px;font-weight:600;white-space:nowrap}.data-table th:first-child{border-radius:8px 0 0}.data-table th:last-child{border-radius:0 8px 0 0}.data-table td{padding:10px;border-bottom:1px solid #eee;font-weight:600;font-size:1rem}.data-table tr:last-child td:first-child{border-radius:0 0 0 8px}.data-table tr:last-child td:last-child{border-radius:0 0 8px}.question-text{font-size:1.05rem;font-weight:700;margin-bottom:18px;line-height:1.5;color:var(--text)}.choices{display:flex;flex-direction:column;gap:10px}.choice-btn{display:block;width:100%;text-align:left;background:#f8f7ff;border:2px solid #e0deff;border-radius:12px;padding:14px 16px;font-size:1rem;font-weight:600;font-family:inherit;color:var(--text);cursor:pointer;transition:border-color .2s,background .2s,transform .1s;line-height:1.4}.choice-btn:hover{border-color:var(--primary);background:#eeecff;transform:translateY(-1px)}.choice-btn:active{transform:translateY(0)}.choice-label{font-weight:700;color:var(--primary);margin-right:4px}.choice-btn.selected{background:#e0deff;border-color:var(--primary);box-shadow:0 0 0 2px #6c63ff40}.quiz-nav{display:flex;justify-content:space-between;gap:12px;max-width:540px;width:100%;margin-top:14px}.btn-nav{flex:1;padding:12px 10px;font-size:1rem;font-weight:700;font-family:inherit;border:2px solid #e0deff;border-radius:12px;background:var(--card-bg);color:var(--primary);cursor:pointer;transition:background .2s,border-color .2s,transform .1s}.btn-nav:hover:not(:disabled){background:#eeecff;border-color:var(--primary);transform:translateY(-1px)}.btn-nav:active:not(:disabled){transform:translateY(0)}.btn-nav:disabled{opacity:.35;cursor:default}.btn-next{background:var(--primary);color:#fff;border-color:var(--primary)}.btn-next:hover:not(:disabled){background:#5b52e6}.btn-submit{max-width:540px;width:100%;margin-top:14px;padding:16px;font-size:1.15rem;font-weight:700;font-family:inherit;border:none;border-radius:12px;background:var(--correct);color:#fff;cursor:pointer;transition:transform .15s,box-shadow .15s;box-shadow:0 4px 14px #2ecc7159}.btn-submit:hover{transform:translateY(-2px);box-shadow:0 6px 20px #2ecc7173}.btn-submit:active{transform:translateY(0)}.result-card{background:var(--card-bg);border-radius:var(--radius);box-shadow:var(--shadow);padding:32px 24px;max-width:540px;width:100%;margin:auto;text-align:center}.result-icon{font-size:4rem;margin-bottom:8px}.result-card h1{font-size:1.5rem;font-weight:700;color:var(--primary);margin-bottom:4px}.result-name{font-size:1.1rem;font-weight:600;color:var(--text);margin-bottom:16px}.score-display{margin-bottom:12px}.score-number{font-size:3.5rem;font-weight:700;color:var(--primary)}.score-total{font-size:1.5rem;color:var(--text-light);font-weight:600}.score-bar-container{width:100%;height:14px;background:#e0deff;border-radius:7px;overflow:hidden;margin-bottom:24px}.score-bar{height:100%;background:linear-gradient(90deg,var(--primary),var(--correct));border-radius:7px;transition:width 1s ease;width:0%}.result-list{display:flex;flex-direction:column;gap:10px;margin-bottom:24px;text-align:left}.result-item{padding:12px 14px;border-radius:10px;border:2px solid #eee}.result-item.correct{border-color:var(--correct);background:var(--correct-bg)}.result-item.wrong{border-color:var(--wrong);background:var(--wrong-bg)}.result-item-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}.result-item-num{font-weight:700;font-size:.9rem}.result-item-icon{font-weight:700;font-size:1.1rem}.result-item.correct .result-item-icon{color:var(--correct)}.result-item.wrong .result-item-icon{color:var(--wrong)}.result-item-detail{font-size:.85rem;line-height:1.5}.detail-correct{color:#1a7a3e;font-weight:600}.detail-wrong{color:#a93226;font-weight:600}.detail-answer{color:#1a7a3e;font-weight:700}.solution-toggle{margin-top:8px;border-top:1px dashed rgba(0,0,0,.12);padding-top:8px}.solution-toggle summary{cursor:pointer;font-size:.85rem;font-weight:700;color:var(--primary);-webkit-user-select:none;user-select:none;padding:4px 0;list-style:none}.solution-toggle summary:before{content:"▶ ";font-size:.7rem;transition:transform .2s;display:inline-block}.solution-toggle[open] summary:before{content:"▼ "}.solution-toggle summary::-webkit-details-marker{display:none}.solution-steps{list-style:none;padding:8px 0 0;margin:0;display:flex;flex-direction:column;gap:4px}.solution-steps li{font-size:.82rem;line-height:1.6;color:var(--text);padding:3px 8px;border-radius:6px;background:#ffffff80}.solution-steps li:first-child{font-weight:700;color:var(--primary);background:#6c63ff14}.solution-steps li:last-child{font-weight:700;color:#1a7a3e;background:#2ecc711a}@media(max-width:480px){html{font-size:16px}.screen{padding:10px}.quiz-card{padding:18px 14px}.start-card{padding:28px 18px}}