/* Trắc nghiệm "Em hợp ban nào" — 37FTU */
.q-vung{padding-top:clamp(40px,7vw,80px)}
.q-tieu-de{font-family:var(--font-tieu-de);font-size:clamp(2.2rem,7vw,3.6rem);line-height:1.05;letter-spacing:-.02em}

.q-tien-do{display:flex;align-items:center;gap:14px;margin-bottom:26px}
.q-thanh{flex:1;height:8px;border-radius:99px;background:var(--vien);overflow:hidden}
.q-thanh i{display:block;height:100%;background:var(--cam);border-radius:99px;transition:width .3s ease;width:10%}
.q-tien-do span{font-size:.85rem;font-weight:700;color:var(--muc-nhat);white-space:nowrap}

.q-cau{font-size:clamp(1.4rem,4vw,2.1rem);margin-bottom:22px}
.q-dap-an{display:grid;gap:12px}
.q-dap-an button{
  text-align:left;padding:18px 20px;border-radius:var(--r-lon);border:1.5px solid var(--vien-dam);
  background:var(--trang);font-family:var(--font);font-size:1rem;font-weight:500;color:var(--muc);
  cursor:pointer;line-height:1.5;transition:all .15s ease;display:flex;gap:14px;align-items:flex-start
}
.q-dap-an button:hover{border-color:var(--cam);background:var(--cam-nhat);transform:translateX(3px)}
.q-dap-an button b{
  flex:none;width:26px;height:26px;border-radius:50%;background:var(--cam-nhat);color:var(--cam-dam);
  display:grid;place-items:center;font-size:.85rem;font-family:var(--font-tieu-de)
}
.q-dap-an button:hover b{background:var(--cam);color:#fff}
.q-quay-lai{margin-top:20px;padding:10px 18px;font-size:.9rem}

/* Kết quả */
.kq-hop{background:var(--trang);border:1px solid var(--vien);border-radius:var(--r-lon);padding:clamp(22px,4vw,36px);box-shadow:var(--bong);margin-top:12px}
.kq-ten{font-family:var(--font-tieu-de);font-size:clamp(2rem,6vw,3rem);line-height:1.05;color:var(--cam-dam)}
.kq-biet-danh{font-size:.82rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muc-nhat);margin-top:6px}
.kq-mo-ta{margin-top:16px;color:var(--muc-nhat)}
.kq-thanh{display:grid;gap:10px;margin-top:22px}
.kq-thanh .d{display:grid;grid-template-columns:130px 1fr 44px;gap:10px;align-items:center;font-size:.9rem}
.kq-thanh .t{height:10px;border-radius:99px;background:var(--cam-nhat);overflow:hidden}
.kq-thanh .t i{display:block;height:100%;background:var(--cam);border-radius:99px}
.kq-thanh .s{text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.kq-hoc{margin-top:22px;padding-top:20px;border-top:1px solid var(--vien)}
.kq-hoc b{display:block;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muc-nhat);margin-bottom:10px}
.kq-hoc ul{margin:0;padding-left:20px;color:var(--muc-nhat);font-size:.95rem}
.kq-nut{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.kq-xem-truoc{margin-top:30px;text-align:center}
.kq-xem-truoc canvas{width:min(320px,80%);height:auto;border-radius:var(--r);box-shadow:var(--bong);border:1px solid var(--vien)}
@media(max-width:560px){.kq-thanh .d{grid-template-columns:110px 1fr 40px;font-size:.85rem}}