/* Lớp trình bày mới cho phiếu VOB và VOC — nạp sau <style> nội tuyến của từng
   trang, chỉ ghi đè cách hiển thị. Không đụng câu hỏi, thứ tự, validate hay
   cách gửi dữ liệu (xem docs/superpowers/specs/2026-09-03-site2-refresh-design.md). */
.svy,.svybar{--f-navy:var(--ink);--f-green:var(--done);--f-tint:#F7F6F6;--f-line:var(--hair);--f-ink:var(--ink)}
body{background:linear-gradient(180deg,var(--sky) 0,#fff 420px) fixed}

/* ---------- thanh tiến độ theo phần ---------- */
.svybar{border-bottom:1px solid var(--hair);box-shadow:0 10px 30px -24px rgba(66,57,58,.35)}
.svybar .in2{padding:12px 26px 10px}
.svybar .tag{border-radius:99px;padding:4px 10px;border-color:var(--blue);color:var(--blue);font-weight:700}
.svybar .pg{color:var(--ink);font-family:"Sans",sans-serif;font-size:13px;font-weight:700}
.svybar .pg small{font-family:"Mono",monospace;font-weight:400;font-size:11px;color:var(--muted);margin-left:8px}
.svytrack{display:none}
.svysegs{display:flex;gap:5px;max-width:820px;margin:0 auto;padding:0 26px 12px}
/* Mỗi đoạn là một nút bấm được: về đầu phần đó để soát lại câu trả lời. Vùng
   bấm cao hơn vạch màu để ngón tay không phải nhắm vào dải 6px. */
.svysegs button{flex:1;height:18px;padding:0;border:0;background:none;cursor:pointer;
  position:relative;display:block;-webkit-tap-highlight-color:transparent}
.svysegs button:disabled{cursor:default}
.svysegs button:before{content:"";position:absolute;left:0;right:0;top:6px;height:6px;
  border-radius:99px;background:var(--hair)}
.svysegs button:after{content:"";position:absolute;left:0;top:6px;height:6px;
  width:var(--w,0%);border-radius:99px;
  background:linear-gradient(90deg,var(--blue),#DA8090);transition:width .45s var(--ease)}
.svysegs button.done:after{width:100%;background:var(--done)}
.svysegs button:not(:disabled):hover:before{background:var(--hair2)}
.svysegs button:focus-visible{outline:2px solid var(--crimson);outline-offset:3px;border-radius:4px}

/* ---------- đầu trang ---------- */
.svy{padding-top:36px}
.svy .sect{color:var(--blue)}
.svy h1{font-weight:700;letter-spacing:-.02em}
.svy h2.pg{font-weight:700;color:var(--navy);letter-spacing:-.015em}
.svy .lead{color:var(--body)}

/* ---------- lời hứa: điểm năng lực CX ---------- */
.svy .promise{border:0;border-radius:16px;padding:24px 26px;gap:20px;align-items:center;
  background:linear-gradient(110deg,#EFECEC 0%,#F3F0F1 55%,#EEEAEB 100%);box-shadow:0 18px 40px -28px rgba(66,57,58,.45)}
.svy .promise .mk{width:64px;height:64px;border-radius:50%;isolation:isolate;position:relative;
  background:conic-gradient(var(--blue) 0 68%,rgba(203,78,101,.15) 68% 100%);color:var(--blue);font-size:22px}
.svy .promise .mk:after{content:"";position:absolute;inset:7px;border-radius:50%;background:#fff;z-index:-1}
.svy .promise h4{font-family:"Serif",serif;font-size:19px;color:var(--ink)}
.svy .promise p{color:var(--body)}

/* ---------- hộp lưu ý ---------- */
.svy .notice{border:0;border-left:4px solid var(--crimson);border-radius:0 12px 12px 0;background:#FFF4F6;padding:18px 22px}
.svy .notice p{color:var(--body)}

/* ---------- câu hỏi ---------- */
.svy .q{border-top:1px solid var(--hair);padding-top:30px}
.svy .code{border-radius:6px;background:#F7F6F6;color:var(--blue)}
.svy .qtext{color:var(--ink)}
.svy .hint{color:var(--muted)}
.svy .q.bad .opts,.svy .q.bad .matrix,.svy .q.bad .stepper{outline:2px solid var(--crimson);outline-offset:6px;border-radius:12px}

/* ---------- lựa chọn ---------- */
.svy .opts{gap:8px;background:transparent;border:0}
.svy .opt{border:1px solid var(--hair);border-radius:10px;padding:13px 16px;transition:border-color .15s,background .15s,box-shadow .15s}
@media (hover:hover){.svy .opt:hover{background:#FBFAFA;border-color:#EDC1C9}}
.svy .opt input{accent-color:var(--blue)}
.svy .opt.on{background:#F7F6F6;border-color:var(--blue);box-shadow:0 0 0 1px var(--blue) inset}
.svy .opt.on span{color:var(--navy)}
.svy .grpname{border-radius:8px;border-left-color:var(--blue);color:var(--navy);background:#FBFAFA}
.svy .top1{border-radius:12px;border-color:#EDC1C9;background:#FBFAFA}
.svy input[type=text],.svy input[type=email]{border-radius:8px}
.svy input[type=text]:focus,.svy input[type=email]:focus{outline-color:var(--blue)}

/* ---------- thang và ma trận ---------- */
.svy .legend{border-radius:12px;background:#FBFAFA;border-color:#EDE9EA}
.svy .legend dt,.svy .anchor b,.svy .anchor1 b{color:var(--blue)}
.svy .matrix,.svy .stepper,.svy .scalerow{border-radius:12px;overflow:hidden;box-shadow:0 14px 34px -28px rgba(66,57,58,.4)}
.svy .mrow{border-bottom-color:#F4F2F2}
.svy .mrow.done{background:linear-gradient(90deg,var(--done) 0 4px,#FBFBFB 4px)}
.svy .dot b{border-radius:8px;border-color:var(--hair)}
@media (hover:hover){.svy .dot:hover b{border-color:var(--blue);color:var(--blue);background:#F7F6F6}}
.svy .dot input:checked + b{background:var(--blue);border-color:var(--blue)}
.svy .dot input:focus-visible + b{outline-color:var(--blue)}
.svy .msub{border-left-color:var(--blue);color:var(--navy);background:#FBFAFA}
.svy .stepbar{background:#FBFAFA}
.svy .pip{border-radius:99px}
.svy .pip.on{background:var(--done)}
.svy .pip.cur{background:var(--blue)}
.svy .steplist .k{color:var(--blue)}
.svy .steplist label.on{background:#F7F6F6;box-shadow:inset 3px 0 0 var(--blue)}
.svy .stepnav button{border-radius:8px}
.svy .stepdone b{color:#695054}
.svy .pick b{color:var(--blue)}

/* ---------- điều hướng ---------- */
.svy .svynav{border-top-color:var(--hair)}
.svy .btn{border-radius:8px;background:var(--blue);border-color:var(--blue);box-shadow:0 12px 30px -14px rgba(203,78,101,.7)}
.svy .btn:hover{opacity:1;background:#BD3750}
.svy .btn.ghost{background:transparent;color:var(--muted);border-color:var(--hair2);box-shadow:none}
.svy .btn.ghost:hover{color:var(--ink);border-color:var(--muted);background:#fff}
.svy button:focus-visible{outline-color:var(--blue)}
.svy .savenote{color:#695054}

/* ---------- kết quả: điểm trưởng thành ---------- */
.svy .score{border:0;border-radius:18px;overflow:hidden;box-shadow:0 24px 60px -34px rgba(66,57,58,.5)}
.svy .score .hd{background:var(--grad-deep);color:#fff;border-bottom:0;padding:26px 28px 22px}
.svy .score .lvlno{color:var(--glow)}
.svy .score .lvl{color:#fff;font-weight:700}
.svy .score .say{color:#E1DADB}
.svy .bars{padding:22px 28px 26px;background:#fff}
.svy .bar .tr,.svy .bar .fl{border-radius:99px}
.svy .bar .fl{background:linear-gradient(90deg,var(--crimson),#6E1F2E)}
.svy .bar.low .fl{background:linear-gradient(90deg,var(--crimson),#F08BA6)}
.svy .stats{gap:12px;background:transparent;border:0}
.svy .stat{border-radius:12px;border:1px solid var(--hair)}
.svy .stat .n{color:var(--blue)}
.svy .out{border-radius:10px}
.svy .msg{color:#695054}

@media (max-width:660px){
  .svysegs{padding:0 16px 10px;gap:4px}
  .svybar .pg small{display:none}
  .svy .promise{padding:20px}
  .svy .promise .mk{width:54px;height:54px}
}

/* ---------- chế độ nhúng (?embed=1) ---------- */
/* Trang phiếu nằm trong iframe bên CafeBiz: bỏ mọi thứ thuộc về khung site,
   bỏ nền cố định, và thả thanh tiến độ khỏi sticky vì trong khung tự giãn
   chiều cao thì không có thanh cuộn để mà dính. */
html.embed, html.embed body{background:#fff}
html.embed .nav,
html.embed .drawer,
html.embed footer{display:none !important}
html.embed body{padding-top:0 !important}
html.embed .svybar{position:static;top:auto;box-shadow:none;border-top:0}
html.embed .svy{padding-top:26px;padding-bottom:56px}
/* Khung cha cuộn thay, nên phiếu không tự mọc thanh cuộn riêng */
html.embed{overflow-x:hidden}

/* ---------- chia sẻ kết quả ---------- */
.svy .sharebox{margin:26px 0 8px;padding:22px 24px;border:1px solid var(--f-line);
  border-radius:14px;background:#fff}
.svy .sharebox h4{font-family:"Sans",sans-serif;font-size:15px;color:var(--f-ink);margin-bottom:8px}
.svy .sharebox p{font-size:14px;line-height:1.65;color:var(--muted)}
.svy .sharerow{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 4px}
.svy .sharerow .btn{font-size:14px;padding:10px 18px}
.svy .sharegt{margin-top:12px;font-size:13px}
.svy .sharegt code{font-family:"Mono",monospace;font-size:13px;background:var(--f-tint);
  border:1px solid var(--f-line);border-radius:4px;padding:2px 7px;color:var(--f-ink)}
.svy .sharemsg{margin-top:10px;font-size:13px;color:var(--crimson);word-break:break-all}
.svy .sharemsg:empty{margin:0}