:root{
  --ink:#0B1220; --surface:#111E33; --surface2:#16263F; --line:#223650;
  --text:#E7EEF7; --muted:#8FA1B9;
  --crit:#FF5B5B; --high:#FF9F45; --med:#F2C94C; --low:#7E8CA3; --safe:#35D6A4; --brand:#3DA5FF;
  --radius:14px;
  box-sizing:border-box; padding-top:env(safe-area-inset-top,0); padding-bottom:env(safe-area-inset-bottom,0);
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:
    radial-gradient(1100px 480px at 80% -8%, rgba(61,165,255,.18), transparent 60%),
    radial-gradient(760px 420px at -5% 2%, rgba(53,214,164,.10), transparent 55%),
    var(--ink);
  color:var(--text);
  font-family:"Be Vietnam Pro",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  line-height:1.6; -webkit-font-smoothing:antialiased;}
.wrap{max-width:820px; margin:0 auto; padding:0 20px}
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{line-height:1.18; margin:0 0 .4em}
.mono{font-variant-numeric:tabular-nums}
[hidden]{display:none !important}

/* ---------- HERO (gọn) ---------- */
header.hero{padding:40px 0 20px}
.kicker{display:inline-flex; align-items:center; gap:8px; color:var(--brand); font-weight:700;
  font-size:13px; letter-spacing:.04em; text-transform:uppercase; margin-bottom:14px}
.kicker .mark{width:22px;height:22px;flex:none}
h1{font-size:clamp(28px,5.4vw,42px); font-weight:800; letter-spacing:-.02em}
h1 .g{background:linear-gradient(92deg,var(--brand),var(--safe)); -webkit-background-clip:text;
  background-clip:text; -webkit-text-fill-color:transparent}
.sub{color:var(--muted); font-size:clamp(15px,2.2vw,18px); max-width:52ch; margin:8px 0 0}
.badge{display:inline-flex; align-items:center; gap:8px; margin-top:16px; padding:7px 13px;
  background:rgba(255,159,69,.10); border:1px solid rgba(255,159,69,.35); border-radius:99px;
  font-size:13px; color:var(--text)}
.badge b{color:var(--high)}

/* ---------- SCAN BOX (above the fold) ---------- */
.scanbox{margin-top:22px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:18px}
.scanrow{display:flex; gap:10px}
.scanrow input{flex:1}
@media(max-width:560px){ .scanrow{flex-direction:column} }
input,textarea,select{width:100%; padding:13px 14px; background:var(--ink); color:var(--text);
  border:1px solid var(--line); border-radius:10px; font:inherit}
input:focus,textarea:focus,select:focus{outline:2px solid var(--brand); border-color:var(--brand)}
button{padding:13px 18px; background:var(--brand); color:#06101f; border:0; border-radius:10px;
  font:inherit; font-weight:700; font-size:15px; cursor:pointer; white-space:nowrap}
button.ghost{background:var(--surface2); color:var(--text); border:1px solid var(--line)}
button:disabled{opacity:.6; cursor:default}
.btn-wide{width:100%; margin-top:14px}
.inline-link{display:inline-block; margin-top:12px; font-size:14px; font-weight:600}
.muted-line{color:var(--muted); font-size:12.5px; margin-top:10px}

.msg{margin-top:14px; padding:11px 13px; border-radius:10px; display:none; font-size:14px}
.msg.ok{display:block; background:rgba(53,214,164,.12); color:var(--safe); border:1px solid rgba(53,214,164,.4)}
.msg.err{display:block; background:rgba(255,91,91,.12); color:var(--crit); border:1px solid rgba(255,91,91,.4)}

/* kết quả quét */
.result{margin-top:12px}
.item{border:1px solid var(--line); border-left:3px solid var(--line); border-radius:10px;
  margin:8px 0; background:var(--surface2); padding:12px 14px}
.item.c-crit{border-left-color:var(--crit)} .item.c-high{border-left-color:var(--high)}
.item.c-med{border-left-color:var(--med)} .item.c-low{border-left-color:var(--low)}
.item .fix{color:var(--muted); font-size:13px; margin-top:5px}
.item .why{font-size:13px; margin-top:5px; opacity:.92}

/* Verification Wizard */
.stepper{display:flex; list-style:none; margin:0 0 16px; padding:0; gap:4px}
.stepper li{flex:1; display:flex; flex-direction:column; align-items:center; gap:5px;
  font-size:11.5px; color:var(--muted); text-align:center; position:relative}
.stepper li+li::before{content:""; position:absolute; left:-52%; top:13px; width:100%;
  height:2px; background:var(--line)}
.stepper li.done+li::before{background:var(--low)}
.stepper .dot{width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
  background:var(--surface2); border:1px solid var(--line); font-weight:700; font-size:12.5px; position:relative; z-index:1}
.stepper li.on{color:var(--text); font-weight:600}
.stepper li.on .dot{border-color:var(--accent); color:var(--accent)}
.stepper li.done .dot{background:var(--low); border-color:var(--low); color:#06240f}
.stepper li.done .dot::after{content:"✓"}
.stepper li.done .dot{font-size:0}
.stepper li.done .dot::after{font-size:14px}

.methods{display:grid; gap:7px; margin:6px 0 14px}
/* white-space:normal + min-width:0 là BẮT BUỘC: button mặc định nowrap (dòng 66) và
   grid item mặc định min-width:auto -> chữ dài làm tràn ngang cả trang trên điện thoại. */
.method{text-align:left; background:var(--surface2); border:1px solid var(--line); color:var(--text);
  border-radius:10px; padding:11px 13px; cursor:pointer; display:block; width:100%; font:inherit;
  white-space:normal; min-width:0; font-weight:400}
.method b{display:block; font-size:14.5px}
.method span{display:block; font-size:12.5px; color:var(--muted); margin-top:2px}
.method.sel{border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent)}

.codebox{position:relative; background:var(--ink); border:1px solid var(--line); border-radius:10px;
  padding:11px 13px; margin:6px 0 10px}
.codebox code{display:block; word-break:break-all; font-size:12.5px; line-height:1.5; padding-right:4px}
.copy{margin-top:9px; width:100%; background:var(--surface2); color:var(--text);
  border:1px solid var(--line); border-radius:8px; padding:9px; font:inherit; cursor:pointer;
  white-space:normal; min-width:0}
.copy.done{border-color:var(--low); color:var(--low)}
.fold.sm summary{font-size:13.5px}
.okline{border-left:3px solid var(--low); padding-left:10px}
.retry{font-size:12.5px; color:var(--muted); margin-top:8px}

/* AI Fix Assistant */
.fixplan{margin-top:10px}
.fixplan>summary{color:var(--accent); font-weight:600}
.fsteps{margin:8px 0 0; padding-left:20px; font-size:13.5px; line-height:1.65}
.fsteps li{margin-bottom:4px}
.manual{margin-top:10px; border-left:3px solid var(--med); padding:2px 0 2px 10px; font-size:13px}
.manual ul{margin:4px 0 0; padding-left:18px}
/* KHÔNG dùng font mono: prompt là văn xuôi tiếng Việt, font mono dựng dấu sai ("đê ̉lộ"). */
.promptbox{background:var(--ink); border:1px solid var(--line); border-radius:9px; padding:11px 12px;
  font:inherit; font-size:13px; line-height:1.6; white-space:pre-wrap; word-break:break-word; margin:0;
  max-height:260px; overflow:auto}

/* Risk Model 2.0 — ba trục tách bạch, KHÔNG gộp thành một số % */
.axes{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:12px 0}
.axis{border:1px solid var(--line); border-radius:10px; padding:10px 12px; background:var(--surface2); text-align:center}
.axis .n{display:block; font-size:22px; font-weight:700; line-height:1.2}
.axis .l{font-size:12px; color:var(--muted)}
.axis.a-conf .n{color:var(--crit)} .axis.a-conf.zero .n{color:var(--muted)}
.axis.a-pot .n{color:var(--med)}  .axis.a-pot.zero .n{color:var(--muted)}
.axis.a-cov .n{color:var(--low)}
.verdict{border-radius:10px; padding:11px 14px; margin-top:10px; font-weight:600; border:1px solid var(--line)}
.verdict.v-bad{border-left:3px solid var(--crit)}
.verdict.v-partial{border-left:3px solid var(--med)}
.verdict.v-ok{border-left:3px solid var(--low)}
.sect{margin-top:16px}
.sect h4{margin:0 0 4px; font-size:14px}
.sect .hint{font-size:12.5px; color:var(--muted); margin:0 0 8px}
.gap{border:1px dashed var(--line); border-radius:10px; background:transparent;
  margin:6px 0; padding:10px 13px; font-size:14px; color:var(--muted)}
.gap.ok{border-style:solid; border-left:3px solid var(--low); color:var(--text)}
.gap .evi{font-size:12.5px; color:var(--muted); margin-top:3px; line-height:1.5}
@media(max-width:420px){ .axes{gap:6px} .axis{padding:9px 6px}
  .axis .n{font-size:19px} .axis .l{font-size:11px; line-height:1.25; display:block} }
@media(max-width:330px){ .axes{grid-template-columns:1fr}
  .axis{display:flex; align-items:baseline; gap:8px; text-align:left} }

/* CTA pulse sau khi quét */
.cta-deep{margin-top:14px}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.pulse{animation:pulse 1.5s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){ .pulse{animation:none} }

/* ---------- SECTIONS ---------- */
section{padding:30px 0; border-top:1px solid var(--line)}
h2{font-size:clamp(20px,3.4vw,26px); font-weight:800}
.lead{color:var(--muted); max-width:56ch; margin-top:2px}
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:20px; margin-top:14px}
label{display:block; font-size:13.5px; color:var(--muted); margin:12px 0 6px}
.consent{display:flex; gap:9px; align-items:flex-start; margin-top:14px; font-size:12.5px; color:var(--muted)}
.consent input{width:auto; flex:none; margin-top:3px}

/* self-check thu gọn */
details.fold{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:4px 16px; margin-top:14px}
details.fold>summary{list-style:none; cursor:pointer; padding:14px 0; font-weight:700; display:flex; justify-content:space-between; align-items:center; gap:12px}
details.fold>summary::-webkit-details-marker{display:none}
details.fold>summary::after{content:"▸"; color:var(--muted); transition:transform .2s}
details.fold[open]>summary::after{transform:rotate(90deg)}
.gauge{background:var(--ink); border:1px solid var(--line); border-radius:12px; padding:13px 15px; margin:6px 0 14px}
.gauge .score{font-size:26px; font-weight:800}
.gauge .label{font-size:12.5px; color:var(--muted)}
.bar{height:9px; border-radius:99px; background:var(--surface2); overflow:hidden; margin-top:9px}
.bar>i{display:block; height:100%; width:100%; background:var(--crit); transition:width .4s ease, background .4s ease}
@media (prefers-reduced-motion:reduce){ .bar>i{transition:none} }
.group{margin-top:16px}
.group h3{font-size:13.5px; font-weight:700; display:flex; align-items:center; gap:8px; color:var(--muted); margin:0 0 6px}
.dot{width:9px; height:9px; border-radius:3px; display:inline-block}
.chk{border:1px solid var(--line); border-left:3px solid var(--line); border-radius:9px; margin:7px 0; background:var(--surface2)}
.chk.c-crit{border-left-color:var(--crit)} .chk.c-high{border-left-color:var(--high)}
.chk.c-med{border-left-color:var(--med)} .chk.c-low{border-left-color:var(--low)}
.chk summary{list-style:none; cursor:pointer; padding:11px 13px; display:flex; gap:11px; align-items:flex-start}
.chk summary::-webkit-details-marker{display:none}
.chk input[type=checkbox]{width:19px; height:19px; margin-top:2px; accent-color:var(--safe); flex:none}
.chk .t{font-weight:500; font-size:14px}
.chk .cfix{padding:0 13px 12px 43px; color:var(--muted); font-size:13px}
.chk[open] summary .t{color:var(--safe)}

/* pricing */
.price{display:grid; gap:12px; grid-template-columns:1fr 1fr; margin-top:14px}
@media(max-width:560px){.price{grid-template-columns:1fr}}
.tier{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:18px}
.tier.pro{border-color:var(--brand)}
.tier h3{font-size:17px; font-weight:800; margin-bottom:4px}
.tier .p{font-size:14px; color:var(--brand); font-weight:700; margin-bottom:9px}
.tier ul{margin:0; padding-left:18px; color:var(--muted); font-size:13.5px}

code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12.5px}
.note{font-size:12.5px; color:var(--muted)}
footer{padding:28px 0 64px; color:var(--muted); font-size:13px; border-top:1px solid var(--line)}
.footlinks{display:flex; gap:18px; flex-wrap:wrap; margin-bottom:14px; font-weight:600}
.hp{position:absolute!important; left:-9999px!important; top:-9999px; width:1px; height:1px; opacity:0}

:focus-visible{outline:3px solid var(--brand);outline-offset:4px} .report-meta{overflow-wrap:anywhere} .toolbar{display:flex;gap:12px;flex-wrap:wrap;margin:16px 0} .toolbar select{max-width:100%} .consent-banner{border:1px solid var(--line);padding:16px;border-radius:12px;margin:16px 0} @media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important}}