.tnp-iq{--p:#4f46e5;--p2:#6366f1;--c:#06b6d4;--ink:#0f172a;--mu:#64748b;--bd:#e2e8f0;--soft:#f8fafc;--ok:#16a34a;--bad:#e11d48;max-width:820px;margin:0 auto;color:var(--ink);font-size:16px;line-height:1.5}
.tnp-iq *,.tnp-iq *:before,.tnp-iq *:after{box-sizing:border-box}
.tnp-iq img{max-width:100%;height:auto;display:block;margin:0}
.tnp-iq button{font:inherit;text-transform:none;letter-spacing:normal;margin:0;min-height:0;line-height:1.3}
.tnp-card{background:#fff;border:1px solid var(--bd);border-radius:22px;padding:28px;box-shadow:0 24px 48px -32px rgba(15,23,42,.25)}
.tnp-card h2,.tnp-card h3,.tnp-card h4{color:var(--ink);margin:0 0 12px;font-weight:800;letter-spacing:-.01em}
.tnp-card p{color:var(--mu);margin:0 0 14px}

/* Nút */
.tnp-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 26px;border:0;border-radius:99px;background:linear-gradient(90deg,var(--p),var(--p2));color:#fff!important;font-weight:700;font-size:16px;cursor:pointer;text-decoration:none!important;box-shadow:0 10px 22px -10px rgba(79,70,229,.7);transition:transform .15s,opacity .15s}
.tnp-btn:disabled{opacity:.45;cursor:default;transform:none;box-shadow:none}
.tnp-btn-ghost{background:#fff;color:var(--p)!important;border:1.5px solid #c7d2fe;box-shadow:none}
.tnp-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:8px}

/* Màn hình bắt đầu / tuổi */
.tnp-msg,.tnp-age{text-align:center;padding:40px 28px}
.tnp-msg-icon{font-size:44px;line-height:1;margin-bottom:12px}
.tnp-msg p,.tnp-age p{max-width:560px;margin-left:auto;margin-right:auto}
.tnp-spin{width:40px;height:40px;margin:0 auto 14px;border:4px solid #e0e7ff;border-top-color:var(--p);border-radius:50%;animation:tnpSpin .8s linear infinite}
@keyframes tnpSpin{to{transform:rotate(360deg)}}
.tnp-note{background:#fff7ed;color:#9a3412;border-radius:12px;padding:12px 14px;margin-bottom:18px;font-size:15px}
.tnp-age-field{display:inline-flex;align-items:center;gap:10px;margin:6px 0 18px}
.tnp-age-field input{width:130px;height:56px;border:2px solid #c7d2fe;border-radius:14px;font-size:24px;font-weight:700;text-align:center;color:var(--ink);background:#fff;margin:0;padding:0 8px;box-shadow:none}
.tnp-age-field input:focus{border-color:var(--p);outline:0}
.tnp-age-field span{font-weight:600;color:var(--mu)}
.tnp-err{color:var(--bad);font-size:14px;margin:-6px 0 12px}

/* Thanh trên cùng */
.tnp-top{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:14px;color:var(--mu);margin-bottom:10px}
.tnp-count b{color:var(--ink)}
.tnp-timer{font-weight:700;color:var(--ink);background:#eef2ff;border-radius:99px;padding:5px 12px;font-variant-numeric:tabular-nums}
.tnp-timer.is-low{background:#ffe4e6;color:var(--bad)}
.tnp-bar{height:6px;background:#eef2ff;border-radius:99px;overflow:hidden}
.tnp-bar span{display:block;height:100%;background:linear-gradient(90deg,var(--p),var(--c));border-radius:99px;transition:width .3s}

/* Đề bài */
.tnp-qtitle{font-size:22px!important;margin:22px 0 14px!important;line-height:1.35!important}
.tnp-qtitle span{color:#64748b;margin-right:4px}
.tnp-qbody{background:var(--soft);border:1px solid var(--bd);border-radius:14px;padding:14px 18px;margin:0 0 18px;color:var(--ink);font-size:16px;line-height:1.65}
.tnp-grid{display:grid;grid-template-columns:repeat(var(--cols,3),1fr);gap:12px;max-width:calc(var(--cols,3) * 132px);margin:0 auto 24px}
.tnp-cell{aspect-ratio:1/1;background:var(--soft);border:1px solid var(--bd);border-radius:10px;display:flex;align-items:center;justify-content:center;padding:12%;overflow:hidden}
.tnp-cell img{width:100%;height:100%;object-fit:contain}
.tnp-missing{border:2px dashed #cbd5e1;color:#cbd5e1;font-size:28px;font-weight:700}
.tnp-qimg{max-width:420px;margin:0 auto 22px}
.tnp-qimg.is-main{max-width:560px}
.tnp-qimg img{margin:0 auto;border-radius:12px;max-height:60vh;width:auto}

/* Hiệu ứng rê chuột chỉ trên thiết bị có chuột (tránh viền "dính" sau khi chạm trên điện thoại) */
@media (hover:hover){.tnp-opt:hover{border-color:#a5b4fc}.tnp-btn:hover{transform:translateY(-1px)}}

/* Đáp án */
.tnp-opts{display:grid;gap:12px;margin:0 auto}
.tnp-opt{position:relative;display:flex;align-items:center;gap:12px;background:#fff;border:2px solid var(--bd);border-radius:14px;cursor:pointer;color:var(--ink);text-align:left;-webkit-tap-highlight-color:transparent;transition:border-color .15s,box-shadow .15s,background .15s}
.tnp-opt:focus-visible{outline:3px solid #a5b4fc;outline-offset:2px}
.tnp-opt.is-selected{border-color:var(--p);background:#f5f6ff;box-shadow:0 0 0 4px rgba(79,70,229,.12)}
.tnp-opt-key{flex:0 0 30px;height:30px;border-radius:9px;background:#f1f5f9;color:#475569;font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center}
.tnp-opt.is-selected .tnp-opt-key{background:var(--p);color:#fff}
.tnp-opt-text{font-weight:600;font-size:16px;line-height:1.4}
.tnp-opt-img{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:1/1;background:var(--soft);border-radius:8px;padding:12%}
.tnp-opt-img img{width:100%;height:100%;object-fit:contain}
/* Thẻ có ảnh: lưới 2–4 cột */
.tnp-opts.is-cards{grid-template-columns:repeat(var(--cols,4),1fr);max-width:calc(var(--cols,4) * 140px)}
.tnp-opts.is-cards .tnp-opt{flex-direction:column;padding:28px 8px 8px;text-align:center}
.tnp-opts.is-cards .tnp-opt-key{position:absolute;top:6px;left:8px;flex:none;width:24px;height:22px;font-size:12px;border-radius:6px}
.tnp-opts.is-cards .tnp-opt-text{font-size:14px}
/* Chỉ có chữ: danh sách, 1–2 cột */
.tnp-opts.is-list{grid-template-columns:1fr;max-width:640px}
.tnp-opts.is-list.is-2col{grid-template-columns:1fr 1fr}
.tnp-opts.is-list .tnp-opt{padding:14px 16px;min-height:58px}

/* Điều hướng */
.tnp-nav{display:flex;justify-content:space-between;gap:12px;margin-top:18px}
.tnp-dots{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:24px}
.tnp-dot{flex:0 0 auto;width:32px;height:32px;border-radius:8px;border:1px solid var(--bd);background:#fff;color:var(--mu);font-size:12px;font-weight:600;cursor:pointer;padding:0}
.tnp-dot.is-done{background:#eef2ff;border-color:#c7d2fe;color:var(--p)}
.tnp-dot.is-current{background:var(--p);border-color:var(--p);color:#fff}

/* Kết quả */
.tnp-result-top{display:grid;grid-template-columns:220px 1fr;gap:26px;align-items:center}
.tnp-score{background:linear-gradient(135deg,var(--p),var(--c));color:#fff;border-radius:20px;padding:24px 16px;text-align:center}
.tnp-score span{display:block;font-size:13px;opacity:.85}
.tnp-score b{display:block;font-size:64px;line-height:1.05;font-weight:800}
.tnp-score em{display:inline-block;font-style:normal;font-weight:700;background:rgba(255,255,255,.2);border-radius:99px;padding:3px 12px;font-size:14px;margin-top:4px}
.tnp-pct{font-size:20px;color:var(--ink)!important;font-weight:600}
.tnp-pct b,.tnp-result-text b{color:var(--p)}
.tnp-section{border-top:1px solid var(--bd);margin-top:26px;padding-top:22px}
.tnp-section h4{font-size:18px;margin:0 0 12px}
.tnp-section h5{font-size:15px;margin:0 0 8px;color:var(--ink);font-weight:700}
.tnp-bell{width:100%;height:auto;display:block;font-size:13px;fill:#64748b}
.tnp-two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.tnp-box{background:var(--soft);border-radius:14px;padding:16px 18px}
.tnp-box ul{margin:0;padding-left:18px;color:var(--mu);font-size:15px}
.tnp-box li{margin:0 0 6px}
.tnp-focus{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:18px}
.tnp-focus div{border:1px solid var(--bd);border-radius:14px;padding:14px 16px}
.tnp-focus span{display:block;font-size:13px;color:var(--mu)}
.tnp-focus b{display:block;font-size:17px;margin:2px 0 6px}
.tnp-focus p{font-size:14px;margin:0}
.tnp-cats{display:grid;grid-template-columns:1fr 1fr;gap:18px 26px}
.tnp-cat-head{display:flex;justify-content:space-between;align-items:center;font-size:15px;font-weight:600;margin-bottom:8px}
.tnp-cat p{font-size:13.5px;margin:8px 0 0}
.tnp-lvl{font-size:12px;border-radius:99px;padding:2px 10px}
.tnp-lvl-4{background:#dcfce7;color:#15803d}.tnp-lvl-3{background:#e0e7ff;color:#4338ca}.tnp-lvl-2{background:#fef9c3;color:#a16207}.tnp-lvl-1{background:#ffe4e6;color:#be123c}
.tnp-levels{width:100%;border-collapse:collapse;font-size:15px;margin:0}
.tnp-levels th{text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--mu);padding:8px 12px;border:0;border-bottom:1px solid var(--bd)}
.tnp-levels td{padding:10px 12px;border:0;border-bottom:1px solid var(--bd)}
.tnp-levels tr.is-you td{background:#eef2ff;font-weight:700;color:var(--p)}
.tnp-levels em{font-style:normal;font-size:12px;background:var(--p);color:#fff;border-radius:99px;padding:2px 8px;margin-left:6px}
.tnp-disclaimer{font-size:13px;text-align:center;margin-top:22px!important}

/* Kết quả test tính cách */
.tnp-score-eq{background:linear-gradient(135deg,#ec4899,#f59e0b)}
.tnp-score-mbti{background:linear-gradient(135deg,#7c3aed,#06b6d4)}
.tnp-score-holland{background:linear-gradient(135deg,#059669,#06b6d4)}
.tnp-score-disc.tnp-disc-D{background:linear-gradient(135deg,#dc2626,#f97316)}
.tnp-score-disc.tnp-disc-I{background:linear-gradient(135deg,#f59e0b,#eab308)}
.tnp-score-disc.tnp-disc-S{background:linear-gradient(135deg,#16a34a,#10b981)}
.tnp-score-disc.tnp-disc-C{background:linear-gradient(135deg,#2563eb,#4f46e5)}
.tnp-score-mbti b,.tnp-score-holland b,.tnp-score-disc b{letter-spacing:.04em}
.tnp-pct small{font-size:14px;color:var(--mu);font-weight:500}
.tnp-meter{height:10px;border-radius:99px;background:#fdf2f8;overflow:hidden;margin-top:10px}
.tnp-meter span{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#ec4899,#f59e0b)}
.tnp-meter-lbl{display:flex;justify-content:space-between;font-size:12px;color:var(--mu);margin-top:4px}
.tnp-traits{display:grid;grid-template-columns:1fr 1fr;gap:16px 26px}
.tnp-traits-disc .tnp-trait-D .tnp-bar span{background:#ef4444}
.tnp-traits-disc .tnp-trait-I .tnp-bar span{background:#f59e0b}
.tnp-traits-disc .tnp-trait-S .tnp-bar span{background:#10b981}
.tnp-traits-disc .tnp-trait-C .tnp-bar span{background:#3b82f6}
.tnp-tip{background:#f0f9ff;border-radius:12px;padding:12px 14px;color:#0c4a6e!important}
.tnp-axis{margin-bottom:16px}
.tnp-axis-title{font-size:13px;color:var(--mu);margin-bottom:4px}
.tnp-axis-row{display:flex;justify-content:space-between;gap:10px;font-size:14px;color:var(--mu);margin-bottom:6px}
.tnp-axis-row .is-pick{color:var(--ink);font-weight:700}
.tnp-axis-row b{display:inline-flex;width:22px;height:22px;border-radius:6px;background:#eef2ff;color:var(--p);align-items:center;justify-content:center;font-size:12px}
.tnp-axis-row .is-pick b{background:var(--p);color:#fff}
.tnp-axis-bar{height:10px;border-radius:99px;background:#cffafe;overflow:hidden}
.tnp-axis-bar span{display:block;height:100%;background:#7c3aed;border-radius:99px 0 0 99px}
.tnp-chips{display:flex;flex-wrap:wrap;gap:8px}
.tnp-chips span{background:#eef2ff;color:#3730a3;border-radius:99px;padding:5px 12px;font-size:13.5px;font-weight:600}
.tnp-hcards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.tnp-hcard{border:1px solid var(--bd);border-radius:16px;padding:16px}
.tnp-hcard-head{display:flex;gap:12px;align-items:center;margin-bottom:8px}
.tnp-hcard-head b{display:block;font-size:15px;color:var(--ink)}
.tnp-hcard-head small{color:var(--mu);font-size:12.5px}
.tnp-hletter{flex:0 0 40px;height:40px;border-radius:12px;background:linear-gradient(135deg,#059669,#06b6d4);color:#fff;font-weight:800;font-size:20px;display:flex;align-items:center;justify-content:center}
.tnp-hcard p{font-size:14px}
.tnp-hcard .tnp-chips span{background:#ecfdf5;color:#065f46;font-size:12.5px}

/* Chọn nhiều đáp án: ô vuông, đáp án đã chọn hiện dấu ✓ */
.tnp-opts.is-multi .tnp-opt-key{border-radius:6px}
.tnp-opts.is-multi .tnp-opt.is-selected .tnp-opt-key{font-size:0}
.tnp-opts.is-multi .tnp-opt.is-selected .tnp-opt-key:after{content:"✓";font-size:15px}
.tnp-multi-hint{margin:8px 0 0!important;font-size:13px;color:var(--mu);text-align:center}

/* Dải câu: tất cả câu trên một trang */
.tnp-litems{margin-top:14px}
.tnp-litem{padding:20px 0;border-bottom:1px solid var(--bd);scroll-margin-top:90px}
.tnp-litem:last-child{border-bottom:0}
.tnp-list .tnp-qtitle{margin:0 0 12px!important;font-size:18px!important}
.tnp-list .tnp-qtitle span{display:block;font-size:14px;color:var(--ink);margin:0 0 4px}
.tnp-list .tnp-opts.is-list{max-width:none;gap:2px}
.tnp-list .tnp-opts.is-list .tnp-opt{min-height:0;padding:9px 10px;border:0;background:transparent;border-radius:10px;align-items:flex-start;box-shadow:none}
.tnp-list .tnp-opts.is-list .tnp-opt.is-selected{background:#f5f6ff}
.tnp-list .tnp-opts.is-list .tnp-opt-key{flex:0 0 22px;width:22px;height:22px;margin-top:1px;border-radius:50%;border:2px solid #cbd5e1;background:#fff;font-size:0;color:transparent}
.tnp-list .tnp-opts.is-list.is-multi .tnp-opt-key{border-radius:6px}
.tnp-list .tnp-opts.is-list .tnp-opt.is-selected .tnp-opt-key{border-color:var(--p);background:var(--p);box-shadow:inset 0 0 0 3px #fff}
.tnp-list .tnp-opts.is-list.is-multi .tnp-opt.is-selected .tnp-opt-key{box-shadow:none;color:#fff}
.tnp-list .tnp-opts.is-list.is-multi .tnp-opt.is-selected .tnp-opt-key:after{font-size:13px}
.tnp-list .tnp-opts.is-list .tnp-opt-text{font-weight:400;font-size:15px}
.tnp-list .tnp-opts.is-list .tnp-opt-text:before{content:attr(data-l) ". ";font-weight:600}
.tnp-list .tnp-multi-hint{text-align:left}
.tnp-list .tnp-qimg img{max-height:42vh}
.tnp-litem.is-missing .tnp-qtitle span{color:var(--bad)}
.tnp-litem.is-missing .tnp-opts{box-shadow:0 0 0 2px #fecdd3;border-radius:14px}
.tnp-litem-foot{display:flex;justify-content:flex-end;margin-top:10px}
.tnp-flag{display:inline-flex;align-items:center;gap:8px;background:none;border:0;padding:4px 0;color:var(--mu);font-size:14px;cursor:pointer}
.tnp-flag i{width:22px;height:22px;border-radius:50%;border:2px solid #c7d2fe;display:inline-block;transition:background .15s,border-color .15s}
.tnp-flag[aria-pressed="true"]{color:#b45309}
.tnp-flag[aria-pressed="true"] i{background:#f59e0b;border-color:#f59e0b;box-shadow:inset 0 0 0 3px #fff}
.tnp-litem.is-flagged{background:linear-gradient(90deg,#fffbeb,transparent 60%)}
.tnp-lnav{position:sticky;bottom:0;z-index:5;align-items:center;background:rgba(255,255,255,.96);border-top:1px solid var(--bd);margin:0 -28px -28px;padding:14px 28px;border-radius:0 0 22px 22px;backdrop-filter:blur(6px)}
.tnp-lstat{font-size:14px;color:var(--mu)}
.tnp-lstat b{color:var(--ink)}
.tnp-lstat a{color:#b45309}

/* Tự co ảnh cho vừa màn hình (quiz.js đặt --qimg-h / --opt-h) */
.tnp-quiz.is-fit .tnp-qimg img{max-height:var(--qimg-h,60vh)}
.tnp-quiz.is-fit[style*="--opt-h"] .tnp-opt-img{aspect-ratio:auto;height:var(--opt-h);padding:5px}
.tnp-quiz.is-fit .tnp-qimg{margin-bottom:16px}
.tnp-quiz.is-fit .tnp-opts.is-cards .tnp-opt{padding:5px}
.tnp-quiz.is-fit .tnp-opts.is-cards .tnp-opt-key{z-index:1;background:rgba(241,245,249,.92)}
.tnp-quiz.is-fit .tnp-opts.is-cards .tnp-opt.is-selected .tnp-opt-key{background:var(--p)}
.tnp-modal-body .tnp-quiz .tnp-dots{margin-top:14px}
@media (max-width:600px){
	.tnp-quiz.is-fit .tnp-qimg img{max-height:var(--qimg-h,42vh)}
	.tnp-iq{font-size:15px}
	.tnp-card{padding:18px 14px;border-radius:16px}
	.tnp-msg,.tnp-age{padding:30px 18px}
	.tnp-top{font-size:13px}
	.tnp-qtitle{font-size:18px!important;margin:16px 0 12px!important}
	.tnp-qbody{font-size:15px;padding:12px 14px}
	.tnp-grid{gap:8px}
	.tnp-qimg img{max-height:45vh}
	.tnp-opts{gap:8px}
	.tnp-opts.is-cards{max-width:none}
	.tnp-opts.is-cards .tnp-opt{padding:24px 5px 5px;border-radius:12px}
	.tnp-opts.is-cards .tnp-opt-key{top:4px;left:5px}
	.tnp-opts.is-cards .tnp-opt-text{font-size:13px}
	.tnp-opts.is-list.is-2col{grid-template-columns:1fr}
	.tnp-opts.is-list .tnp-opt{padding:12px 14px;min-height:54px}
	.tnp-opt-text{font-size:15px}
	/* Nút điều hướng dính đáy màn hình để bấm bằng ngón cái */
	.tnp-nav{position:sticky;bottom:0;z-index:5;margin:18px -14px -18px;padding:12px 14px calc(12px + env(safe-area-inset-bottom));background:rgba(255,255,255,.96);border-top:1px solid var(--bd);border-radius:0 0 16px 16px;backdrop-filter:blur(6px)}
	.tnp-nav .tnp-btn{flex:1;padding:13px 10px;font-size:15px}
	.tnp-lnav{margin:0 -14px -18px;padding:10px 14px calc(10px + env(safe-area-inset-bottom))}
	.tnp-lnav .tnp-btn{flex:0 0 auto;padding:12px 22px}
	.tnp-list .tnp-qtitle{font-size:16px!important}
	.tnp-litem{padding:16px 0}
	.tnp-dots{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;padding:2px 2px 6px;margin:16px 0 0;scrollbar-width:none}
	.tnp-dots::-webkit-scrollbar{display:none}
	/* Vừa một màn hình: JS đặt --qimg-h / --opt-h khi cả câu cao hơn màn hình */
	.tnp-quiz.is-fit .tnp-qtitle{margin:12px 0 10px!important;font-size:17px!important}
	.tnp-quiz.is-fit .tnp-qimg{margin-bottom:12px}
	.tnp-quiz.is-fit .tnp-opt-img{padding:8%}
	.tnp-quiz.is-fit .tnp-nav{margin-top:12px}
	.tnp-result-top{grid-template-columns:1fr}
	.tnp-cats,.tnp-two,.tnp-focus,.tnp-traits,.tnp-hcards{grid-template-columns:1fr}
	.tnp-score b{font-size:56px}
	.tnp-pct{font-size:18px}
}