/* NoteWise - Quiz từ vựng trong Cộng đồng (bài Loai 4). Dùng chung cho trang công khai và Cộng đồng trong ứng dụng; chỉ dùng các biến màu chung (--card, --border, --text, --ink, --accent...). */
.qz{display:block;margin:6px 0 2px;border:1px solid var(--border);border-radius:14px;background:var(--card-2,var(--card));padding:14px 14px 12px;color:var(--text)}
.qz-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:10px}
.qz-chip{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;background:var(--accent-soft);color:var(--accent);font-size:13px;font-weight:800}
.qz-meta{color:var(--muted);font-size:13px}
.qz-list{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.qz-q{margin:0;padding:0}
.qz-p{margin:0 0 8px;display:flex;gap:8px;align-items:flex-start;font-size:16px;line-height:1.4;color:var(--ink)}
.qz-p b{font-weight:800}
.qz-no{flex:none;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:var(--accent);color:#fff;font-size:13px;font-weight:800;margin-top:-1px}
.qz-sent{margin:0 0 8px;padding:8px 12px;border-left:4px solid var(--accent);background:var(--card);border-radius:0 10px 10px 0;font-size:16px;line-height:1.5;font-style:italic}
.qz-opts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.qz-o{display:flex;align-items:center;gap:10px;min-height:46px;padding:8px 12px;text-align:left;border:2px solid var(--border);border-radius:12px;background:var(--card);color:var(--text);font-size:15px;line-height:1.3;cursor:pointer;transition:border-color .12s,background .12s}
.qz-o:hover{border-color:var(--accent)}
.qz-o:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.qz-l{flex:none;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;border:2px solid var(--border);font-size:12px;font-weight:800;color:var(--muted)}
.qz-t{min-width:0;overflow-wrap:anywhere}
.qz-o[aria-checked="true"]{border-color:var(--accent);background:var(--accent-soft)}
.qz-o[aria-checked="true"] .qz-l{background:var(--accent);border-color:var(--accent);color:#fff}
.qz.done .qz-o{cursor:default}
.qz.done .qz-o:hover{border-color:var(--border)}
.qz-o.ok{border-color:var(--green);background:var(--green-soft)}
.qz-o.ok .qz-l{background:var(--green);border-color:var(--green);color:#fff}
.qz-o.bad{border-color:var(--red);background:rgba(207,58,58,.1)}
.qz-o.bad .qz-l{background:var(--red);border-color:var(--red);color:#fff}
.qz.done .qz-o:not(.ok):not(.bad){opacity:.6}
.qz-fb{margin-top:8px;padding:9px 12px;border-radius:10px;background:var(--card);border:1px solid var(--border);font-size:14px;line-height:1.5}
.qz-fb .qz-v{font-weight:800}
.qz-fb .qz-v.ok{color:var(--green)}
.qz-fb .qz-v.bad{color:var(--red)}
.qz-fb .qz-w{margin-top:3px}
.qz-fb .qz-w b{color:var(--ink)}
.qz-fb .qz-ipa{color:var(--muted);margin-left:4px}
.qz-fb .qz-ex{margin-top:3px;color:var(--muted);font-style:italic}
.qz-fb .qz-lnk{display:inline-flex;align-items:center;gap:4px;margin:6px 10px 0 0;padding:0;border:0;background:none;color:var(--accent);font-size:13px;font-weight:700;text-decoration:none;cursor:pointer}
.qz-fb .qz-lnk:hover{text-decoration:underline}
.qz-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:14px}
.qz-go,.qz-again,.qz-reg{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 20px;border:2px solid var(--accent);border-radius:12px;background:var(--accent);color:#fff;font-size:15px;font-weight:800;text-decoration:none;cursor:pointer}
.qz-go:disabled{opacity:.45;cursor:not-allowed}
.qz-go:not(:disabled):hover,.qz-reg:hover{filter:brightness(1.08)}
.qz-again{background:transparent;color:var(--accent)}
:root[data-theme="dark"] .qz-go,:root[data-theme="dark"] .qz-reg{color:#10131a}
:root[data-theme="dark"] .qz-no,:root[data-theme="dark"] .qz-o[aria-checked="true"] .qz-l{color:#10131a}
.qz-hint{color:var(--muted);font-size:13px}
.qz.done .qz-bar{display:none}
.qz-res{margin-top:14px;padding:14px;border-radius:12px;background:var(--card);border:2px solid var(--accent);text-align:center}
.qz-res[hidden]{display:none}
.qz-score{font-size:26px;font-weight:900;color:var(--ink);line-height:1.2}
.qz-score.s3{color:var(--green)}
.qz-score.s0{color:var(--red)}
.qz-msg{margin:6px 0 10px;color:var(--text)}
.qz-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center}
.qz-stat,.qz-stat0{color:var(--muted);font-size:13px}
.qz-stat0{margin:10px 0 0}
.qz.done .qz-stat0{display:none}
.qz-cta{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center;margin-top:12px;padding-top:12px;border-top:1px dashed var(--border);font-size:14px}
.qz-reg{min-height:40px;padding:0 16px;font-size:14px}
@media (max-width:560px){.qz{padding:12px 10px 10px}.qz-opts{grid-template-columns:1fr}.qz-score{font-size:22px}}
@media (prefers-reduced-motion:reduce){.qz-o{transition:none}}