/* Phỏng vấn online 3D — /phong-van-online (Web\PhongVanController, phong-van.js).
 * Mọi lớp phủ nằm trong .pv-stage (position: relative) để đè lên cảnh 3D. */

.pvpage { --pv-navy: #1d3b72; --pv-gold: #c9a35a; --pv-ok: #16a34a; --pv-bad: #dc2626; --pv-ink: #0f172a; padding-bottom: 2rem; }
.pv-head { margin-bottom: .8rem; }
.pv-head .desc { max-width: 820px; }

/* ---------- khung cảnh ---------- */
.pv-stage { position: relative; height: clamp(480px, 78vh, 820px); background: #16181d; overflow: hidden; user-select: none; -webkit-user-select: none; }
.pv-canvas { position: absolute; inset: 0; cursor: grab; touch-action: none; }
.pv-canvas canvas { display: block; width: 100%; height: 100%; }
.pv-err { position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); color: #fff; background: rgba(220, 38, 38, .9); padding: .8rem 1.1rem; border-radius: 10px; max-width: 90%; text-align: center; margin: 0; z-index: 9; }

/* ---------- thẻ chung ---------- */
.pv-panel { position: absolute; z-index: 5; background: rgba(255, 255, 255, .94); color: var(--pv-ink); border-radius: 16px; box-shadow: 0 18px 50px rgba(0, 0, 0, .35); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.pv-btn { border: 0; border-radius: 10px; padding: .62rem 1.1rem; font-weight: 600; font-size: .95rem; cursor: pointer; transition: transform .1s, opacity .15s; }
.pv-btn:active { transform: scale(.98); }
.pv-btn:disabled { opacity: .45; cursor: not-allowed; }
.pv-btn--go { background: var(--pv-navy); color: #fff; }
.pv-btn--ghost { background: #eef2f8; color: var(--pv-navy); }
.pv-link { border: 0; background: none; padding: 0; color: var(--pv-navy); text-decoration: underline; cursor: pointer; font: inherit; }
.pv-warn { background: #fff7ed; color: #9a3412; border-radius: 10px; padding: .55rem .75rem; font-size: .85rem; margin: .6rem 0; }
.pv-msg { color: var(--pv-bad); font-size: .88rem; min-height: 1em; margin: .5rem 0; }
.pv-fine { font-size: .74rem; color: #64748b; margin: .5rem 0 0; }
.pv-ok { color: var(--pv-ok); }
.pv-bad { color: var(--pv-bad); }

/* ---------- 1) thẻ bắt đầu ---------- */
.pv-start { left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(560px, calc(100% - 24px)); max-height: calc(100% - 24px); overflow: auto; padding: 1.2rem 1.3rem; }
.pv-modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.pv-mode { display: block; margin: 0; cursor: pointer; }
.pv-mode input { position: absolute; opacity: 0; pointer-events: none; }
.pv-mode span { display: block; height: 100%; border: 2px solid #e2e8f0; border-radius: 12px; padding: .55rem .6rem; background: #fff; transition: border-color .15s, background .15s; }
.pv-mode b { display: block; font-size: .92rem; }
.pv-mode small { display: block; font-size: .72rem; color: #64748b; line-height: 1.3; margin-top: .15rem; }
.pv-mode input:checked + span { border-color: var(--pv-navy); background: #eef2fb; }
.pv-mode input:focus-visible + span { outline: 2px solid var(--pv-gold); outline-offset: 2px; }
.pv-note { font-size: .84rem; background: #eef6ff; border-radius: 10px; padding: .5rem .7rem; margin: .6rem 0 0; }
.pv-row { display: flex; align-items: center; gap: .5rem; margin: .8rem 0 .4rem; flex-wrap: wrap; }
.pv-lbl { font-weight: 600; font-size: .9rem; margin-right: .2rem; }
.pv-chip { margin: 0; cursor: pointer; }
.pv-chip input { position: absolute; opacity: 0; pointer-events: none; }
.pv-chip span { display: inline-block; padding: .35rem .95rem; border: 2px solid #e2e8f0; border-radius: 999px; font-size: .88rem; background: #fff; }
.pv-chip input:checked + span { border-color: var(--pv-navy); background: var(--pv-navy); color: #fff; }
.pv-chip input:focus-visible + span { outline: 2px solid var(--pv-gold); outline-offset: 2px; }
.pv-profile { margin: .5rem 0; font-size: .88rem; }
.pv-profile summary { cursor: pointer; font-weight: 600; }
.pv-profile summary small { font-weight: 400; color: #64748b; }
.pv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; margin-top: .55rem; }
.pv-grid input, .pv-grid select { width: 100%; min-height: 38px; border: 1px solid #cbd5e1; border-radius: 8px; padding: .35rem .55rem; font-size: .88rem; background: #fff; }
.pv-acc-wrap { margin: .7rem 0 .2rem; }
.pv-acc { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; font-size: .88rem; background: #f8fafc; border-radius: 10px; padding: .5rem .7rem; }
/* 2 thẻ: Chọn buổi phỏng vấn | Lịch sử */
.pv-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: -1px; }
.pv-tabs { display: flex; gap: .3rem; border-bottom: 2px solid #e2e8f0; margin: -.2rem 0 .85rem; }
.pv-tab { flex: 1; border: 0; background: none; padding: .55rem .4rem; margin-bottom: -2px; border-bottom: 3px solid transparent; font-weight: 600; font-size: .95rem; color: #64748b; cursor: pointer; }
.pv-tab.is-on { color: var(--pv-navy); border-bottom-color: var(--pv-navy); }
.pv-tab:focus-visible { outline: 2px solid var(--pv-gold); outline-offset: 2px; }
.pv-history { min-height: 120px; transition: opacity .15s; }
.pv-history.is-loading { opacity: .45; pointer-events: none; }
.pv-hist-empty { font-size: .9rem; color: #475569; text-align: center; padding: 1.4rem .5rem; margin: 0; }
.pv-hist-sum { font-size: .8rem; color: #64748b; margin: 0 0 .45rem; }
.pv-hist-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.pv-hist-row { width: 100%; display: grid; grid-template-columns: auto 1fr auto; gap: .6rem; align-items: center; text-align: left; border: 1px solid #e2e8f0; background: #fff; border-radius: 10px; padding: .5rem .7rem; cursor: pointer; font-size: .86rem; color: var(--pv-ink); transition: border-color .15s, background .15s; }
.pv-hist-row:hover, .pv-hist-row:focus-visible { border-color: var(--pv-navy); background: #f5f8fe; }
.pv-hist-when { color: #64748b; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pv-hist-mode { font-weight: 600; }
.pv-hist-res { white-space: nowrap; }
.pv-hist-res i { color: #64748b; }
.pv-pager { display: flex; justify-content: center; align-items: center; gap: .25rem; margin-top: .7rem; flex-wrap: wrap; }
.pv-pg { min-width: 34px; height: 34px; border: 1px solid #e2e8f0; background: #fff; border-radius: 8px; font-weight: 600; font-size: .85rem; color: var(--pv-navy); cursor: pointer; }
.pv-pg.is-on { background: var(--pv-navy); border-color: var(--pv-navy); color: #fff; }
.pv-pg:disabled { opacity: .35; cursor: default; }
.pv-pg-gap { color: #94a3b8; padding: 0 .15rem; }
@media (max-width: 480px) {
    .pv-tab { font-size: .8rem; white-space: nowrap; padding: .5rem .2rem; }
    .pv-hist-list { gap: .3rem; }
    .pv-hist-row { grid-template-columns: 1fr auto; gap: 0 .5rem; padding: .35rem .6rem; font-size: .82rem; }
    .pv-hist-when { grid-column: 1 / -1; font-size: .72rem; line-height: 1.2; }
}
.pv-start .pv-btn--go { width: 100%; padding: .78rem; font-size: 1rem; margin-top: .3rem; }

/* ---------- thẻ nhắc nhở / phụ đề / gợi ý nhìn quanh ---------- */
.pv-tip { position: absolute; z-index: 4; left: 14px; top: 14px; max-width: min(380px, calc(100% - 90px)); background: rgba(15, 23, 42, .78); color: #fff; border-left: 4px solid var(--pv-gold); border-radius: 10px; padding: .55rem .8rem; font-size: .9rem; line-height: 1.45; display: flex; gap: .5rem; animation: pvIn .35s ease; }
.pv-tip-ico { flex: none; }
.pv-cap { position: absolute; z-index: 4; left: 50%; bottom: 22px; transform: translateX(-50%); width: min(720px, calc(100% - 24px)); text-align: center; background: rgba(0, 0, 0, .66); color: #fff; border-radius: 12px; padding: .55rem .9rem; }
.pv-cap-who { font-size: .72rem; color: var(--pv-gold); text-transform: uppercase; letter-spacing: .04em; }
.pv-cap-ko { font-family: 'Noto Sans KR', system-ui, sans-serif; font-size: 1.12rem; font-weight: 700; }
.pv-cap-vi { font-size: .85rem; opacity: .85; }
.pv-look { position: absolute; z-index: 4; left: 50%; top: 14px; transform: translateX(-50%); background: rgba(0, 0, 0, .55); color: #fff; font-size: .78rem; padding: .3rem .7rem; border-radius: 999px; pointer-events: none; white-space: nowrap; }
.pv-mute { position: absolute; z-index: 6; right: 14px; top: 14px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .55); color: #fff; font-size: 1.1rem; cursor: pointer; }
@keyframes pvIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ---------- 2) hỏi–đáp ---------- */
.pv-qa { left: 50%; bottom: 16px; transform: translateX(-50%); width: min(660px, calc(100% - 24px)); padding: .9rem 1.1rem; background: rgba(255, 255, 255, .9); }
.pv-qa-top { display: flex; justify-content: space-between; gap: .5rem; font-size: .82rem; color: #475569; }
.pv-qa-num { font-weight: 700; color: var(--pv-navy); }
.pv-qa-ko { font-family: 'Noto Sans KR', system-ui, sans-serif; font-size: 1.25rem; font-weight: 700; margin: .35rem 0 .15rem; line-height: 1.4; }
.pv-qa-ko.pv-qa-listen { font-family: inherit; font-size: 1.05rem; color: #475569; }
.pv-qa-vi-btn { font-size: .8rem; }
.pv-qa-vi { font-size: .9rem; color: #334155; margin-top: .2rem; }
.pv-rec { display: flex; align-items: center; gap: .6rem; margin-top: .6rem; }
.pv-rec-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--pv-bad); animation: pvBlink 1s infinite; flex: none; }
.pv-meter { flex: 1; height: 10px; background: #e2e8f0; border-radius: 99px; overflow: hidden; }
.pv-meter i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #22c55e, #eab308 70%, #ef4444); transition: width .08s; }
.pv-rec-time { font-variant-numeric: tabular-nums; font-weight: 600; font-size: .9rem; min-width: 4.2em; text-align: right; }
.pv-qa-btns { display: flex; gap: .5rem; justify-content: flex-end; margin-top: .7rem; flex-wrap: wrap; }
.pv-qa-btns .pv-btn--ghost { font-family: 'Noto Sans KR', system-ui, sans-serif; font-size: .85rem; }
@keyframes pvBlink { 50% { opacity: .25; } }

/* ---------- 3) chờ chấm ---------- */
.pv-wait { left: 50%; top: 16px; transform: translateX(-50%); width: min(520px, calc(100% - 24px)); padding: .8rem 1rem; display: flex; gap: .8rem; align-items: center; background: rgba(15, 23, 42, .8); color: #fff; }
.pv-wait p { margin: .15rem 0 0; font-size: .85rem; opacity: .9; }
.pv-spin { width: 34px; height: 34px; border-radius: 50%; border: 4px solid rgba(255, 255, 255, .25); border-top-color: var(--pv-gold); animation: pvSpin 1s linear infinite; flex: none; }
@keyframes pvSpin { to { transform: rotate(360deg); } }

/* ---------- 4) bảng kết quả: nền mờ, bên phải, cảnh vẫn nhìn thấy ---------- */
.pv-result { right: 14px; top: 14px; bottom: 14px; width: min(460px, calc(100% - 28px)); overflow: auto; padding: 1rem 1.1rem 1.2rem; background: rgba(15, 23, 42, .74); color: #f1f5f9; animation: pvIn .4s ease; }
.pv-result h3 { font-size: 1rem; margin: 1rem 0 .4rem; color: #fff; }
.pv-res-head { display: flex; justify-content: space-between; align-items: flex-start; gap: .6rem; }
.pv-res-close { border: 0; background: rgba(255, 255, 255, .12); color: #fff; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; flex: none; }
.pv-verdict { font-size: 1.8rem; font-weight: 800; letter-spacing: .02em; line-height: 1.1; }
.pv-verdict.pass { color: #4ade80; }
.pv-verdict.fail { color: #f87171; }
.pv-verdict.none { color: #fbbf24; font-size: 1.2rem; }
.pv-score { font-size: .95rem; opacity: .9; margin-top: .2rem; }
.pv-reason { font-size: .86rem; margin: .5rem 0; opacity: .92; }
.pv-ai-note { font-size: .8rem; line-height: 1.45; background: rgba(251, 191, 36, .16); border-left: 3px solid #fbbf24; border-radius: 8px; padding: .45rem .6rem; margin: .4rem 0 .6rem; }
.pv-bars { display: grid; gap: .35rem; margin: .5rem 0; }
.pv-bar { display: grid; grid-template-columns: 7.2em 1fr 2.6em; align-items: center; gap: .45rem; font-size: .8rem; }
.pv-bar-track { height: 8px; background: rgba(255, 255, 255, .15); border-radius: 99px; overflow: hidden; }
.pv-bar-track i { display: block; height: 100%; background: var(--pv-gold); border-radius: 99px; }
.pv-summary { font-size: .88rem; line-height: 1.55; background: rgba(255, 255, 255, .08); border-radius: 10px; padding: .6rem .7rem; }
.pv-flag { background: rgba(220, 38, 38, .25); border-left: 3px solid #f87171; border-radius: 8px; padding: .45rem .6rem; font-size: .84rem; margin: .4rem 0; }
.pv-ans { background: rgba(255, 255, 255, .07); border-radius: 10px; margin: .45rem 0; }
.pv-ans summary { cursor: pointer; padding: .55rem .7rem; font-size: .86rem; list-style: none; display: flex; justify-content: space-between; gap: .5rem; }
.pv-ans summary::-webkit-details-marker { display: none; }
.pv-ans-body { padding: 0 .7rem .7rem; font-size: .84rem; line-height: 1.5; }
.pv-ans-body .ko { font-family: 'Noto Sans KR', system-ui, sans-serif; }
.pv-ans-body audio { width: 100%; height: 34px; margin: .3rem 0; }
.pv-audio-gone { font-size: .8rem; color: #64748b; background: #f1f5f9; border-radius: 8px; padding: .35rem .6rem; margin: .3rem 0; }
.pv-keep { font-size: .78rem; color: #64748b; margin: -.2rem 0 .4rem; }
.pv-ans-body ul { margin: .2rem 0 .4rem 1.1rem; padding: 0; }
.pv-k { color: #94a3b8; font-size: .76rem; text-transform: uppercase; letter-spacing: .03em; margin-top: .45rem; }
.pv-sample { background: rgba(201, 163, 90, .16); border-radius: 8px; padding: .4rem .55rem; white-space: pre-line; }
.pv-res-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1rem; }
.pv-res-actions .pv-btn--ghost { background: rgba(255, 255, 255, .14); color: #fff; }
.pv-consult { margin-top: .8rem; background: rgba(255, 255, 255, .08); border-radius: 10px; padding: .6rem .7rem; font-size: .86rem; }
.pv-consult form { display: flex; gap: .4rem; margin-top: .4rem; }
.pv-consult input { flex: 1; min-width: 0; border: 0; border-radius: 8px; padding: .45rem .6rem; font-size: .9rem; }
.pv-consult-msg { font-size: .82rem; margin-top: .35rem; }
.pv-practice { font-size: .74rem; opacity: .7; margin-top: .8rem; }

/* Đang phỏng vấn / xem kết quả: ẩn nhóm nút nổi Zalo-Messenger-Gọi (đè lên nút
   "Trả lời xong" trên điện thoại); bảng kết quả đã có form "Gọi lại cho em". */
body.pv-live .contact-fab { display: none !important; }

/* ---------- nội dung dưới khung ---------- */
.pv-info { margin-top: 1.6rem; max-width: 900px; }
.pv-info h2 { font-size: 1.25rem; margin: 1.2rem 0 .6rem; color: var(--pv-navy); }
.pv-steps { padding-left: 1.2rem; line-height: 1.7; }
.pv-faq details { border-bottom: 1px solid #e5e7eb; padding: .6rem 0; }
.pv-faq summary { cursor: pointer; font-weight: 600; }
.pv-faq p { margin: .45rem 0 0; color: #334155; }

/* ---------- điện thoại ---------- */
@media (max-width: 760px) {
    .pv-stage { height: calc(100svh - 64px); min-height: 520px; }
    .pv-head .desc { font-size: .9rem; }
    .pv-modes { grid-template-columns: 1fr; }
    .pv-grid { grid-template-columns: 1fr; }
    .pv-start { top: 12px; transform: translateX(-50%); padding: 1rem; }
    .pv-tip { font-size: .8rem; max-width: calc(100% - 70px); }
    .pv-cap-ko { font-size: 1rem; }
    .pv-qa { bottom: 10px; padding: .75rem .85rem; }
    .pv-qa-ko { font-size: 1.08rem; }
    .pv-qa-btns .pv-btn { flex: 1 1 auto; }
    .pv-result { left: 10px; right: 10px; top: auto; bottom: 10px; width: auto; height: 74%; }
    .pv-look { top: auto; bottom: 12px; }
}