217 lines
14 KiB
HTML
217 lines
14 KiB
HTML
<!doctype html>
|
|
<html lang="vi">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>CASAN — Kiến trúc before → after (1 trang)</title>
|
|
<style>
|
|
:root{
|
|
--bg:#050506; --ink:#f4f5f7; --dim:#9aa0aa; --faint:#6b7079;
|
|
--hair:rgba(255,255,255,.09); --hair2:rgba(255,255,255,.05); --glass:rgba(255,255,255,.03);
|
|
--h1c:#38bdf8; --h2c:#22d3ee; --h3c:#a78bfa; --h4c:#fb7185; --h5c:#fbbf24; --h6c:#34d399; --h7c:#818cf8; --gold:#f5d182;
|
|
--font:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",system-ui,sans-serif;
|
|
--mono:"SF Mono",ui-monospace,Menlo,monospace;
|
|
}
|
|
*{box-sizing:border-box; margin:0}
|
|
html,body{height:100%}
|
|
body{
|
|
font-family:var(--font); background:var(--bg); color:var(--ink);
|
|
-webkit-font-smoothing:antialiased; letter-spacing:-.01em; overflow:hidden; position:relative;
|
|
}
|
|
body::before{
|
|
content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
|
|
background:
|
|
radial-gradient(40rem 26rem at 8% -10%, rgba(56,189,248,.11), transparent 60%),
|
|
radial-gradient(38rem 26rem at 96% -6%, rgba(167,139,250,.10), transparent 60%),
|
|
radial-gradient(46rem 34rem at 88% 108%, rgba(52,211,153,.10), transparent 60%),
|
|
radial-gradient(34rem 26rem at 0% 106%, rgba(251,113,133,.07), transparent 60%);
|
|
}
|
|
body::after{
|
|
content:""; position:fixed; inset:0; z-index:60; pointer-events:none; opacity:.03;
|
|
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
|
|
}
|
|
.deck{
|
|
position:relative; z-index:1; height:100dvh; max-width:1500px; margin:0 auto;
|
|
padding:clamp(16px,2.4vh,30px) clamp(20px,2.6vw,46px);
|
|
display:grid; grid-template-rows:auto auto 1fr auto; gap:clamp(10px,1.7vh,20px);
|
|
}
|
|
|
|
/* header */
|
|
.hd{display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap}
|
|
.brand{display:flex; align-items:center; gap:14px}
|
|
.eyebrow{display:inline-flex; align-items:center; gap:8px; border:1px solid var(--hair); background:var(--glass); border-radius:999px; padding:6px 13px; font-size:10.5px; text-transform:uppercase; letter-spacing:.22em; color:var(--dim); font-weight:600; white-space:nowrap}
|
|
.dot{width:6px;height:6px;border-radius:99px;background:var(--h6c);box-shadow:0 0 10px var(--h6c)}
|
|
.hd h1{font-size:clamp(20px,2.5vw,34px); font-weight:800; letter-spacing:-.035em; line-height:1}
|
|
.hd h1 .g{background:linear-gradient(110deg,#fff,#8fb6ff 45%,#7ff0c0);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
|
|
.lv{font-size:11px; padding:6px 13px; border-radius:99px; background:rgba(52,211,153,.1); color:var(--h6c); border:1px solid rgba(52,211,153,.3); font-weight:700; letter-spacing:.03em; white-space:nowrap}
|
|
|
|
/* stat strip */
|
|
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(8px,1vw,14px)}
|
|
.stat{border-radius:16px; padding:5px; background:var(--glass); border:1px solid var(--hair)}
|
|
.stat .c{border-radius:11px; padding:clamp(9px,1.5vh,15px) clamp(12px,1.2vw,18px); background:rgba(255,255,255,.02); box-shadow:inset 0 1px 1px rgba(255,255,255,.08)}
|
|
.stat .k{font-size:10px; text-transform:uppercase; letter-spacing:.15em; color:var(--faint); font-weight:600}
|
|
.stat .v{font-size:clamp(21px,2.5vw,31px); font-weight:800; letter-spacing:-.03em; margin-top:3px; display:flex; align-items:baseline; gap:7px; flex-wrap:wrap}
|
|
.stat .v small{font-size:12px; font-weight:600; color:var(--dim); letter-spacing:0}
|
|
.ar{color:var(--faint); font-weight:600} .up{color:var(--h6c)}
|
|
|
|
/* body split */
|
|
.body{display:grid; grid-template-columns:0.86fr 1.6fr; gap:clamp(12px,1.4vw,20px); min-height:0}
|
|
.panel{border-radius:20px; padding:6px; border:1px solid var(--hair); background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01)); min-height:0}
|
|
.panel>.in{border-radius:14px; padding:clamp(14px,1.9vh,22px); background:rgba(9,10,12,.6); box-shadow:inset 0 1px 1px rgba(255,255,255,.06); height:100%; display:flex; flex-direction:column; min-height:0}
|
|
.ptitle{font-size:11px; text-transform:uppercase; letter-spacing:.18em; color:var(--faint); font-weight:700; margin-bottom:clamp(10px,1.4vh,16px)}
|
|
|
|
/* timeline (left) */
|
|
.mile{display:flex; flex-direction:column; gap:clamp(9px,1.3vh,14px); flex:1; justify-content:space-between}
|
|
.m{position:relative; border-radius:14px; padding:clamp(11px,1.5vh,16px) 16px; border:1px solid var(--hair2); background:rgba(255,255,255,.017)}
|
|
.m.now{border-color:rgba(52,211,153,.34); background:rgba(52,211,153,.05)}
|
|
.m .step{font-size:9.5px; text-transform:uppercase; letter-spacing:.16em; color:var(--faint); font-weight:700}
|
|
.m .row1{display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-top:5px}
|
|
.m .name{font-size:clamp(14px,1.5vw,17px); font-weight:750; letter-spacing:-.02em}
|
|
.m .num{font-size:clamp(20px,2.3vw,28px); font-weight:800; letter-spacing:-.03em; line-height:1}
|
|
.m .num small{font-size:11px; color:var(--dim); font-weight:600}
|
|
.m.now .num{color:var(--h6c)}
|
|
.m p{margin-top:5px; font-size:12px; color:var(--dim); line-height:1.4}
|
|
|
|
/* right column: harness + tracks */
|
|
.rcol{display:grid; grid-template-rows:auto 1fr; gap:clamp(10px,1.4vh,16px); min-height:0}
|
|
.harness{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(7px,.8vw,11px)}
|
|
.hx{border-radius:12px; padding:clamp(9px,1.3vh,13px) clamp(9px,.9vw,13px); border:1px solid var(--hair2); background:rgba(255,255,255,.02); display:flex; align-items:center; gap:9px}
|
|
.tab{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;font-weight:800;font-size:11px;flex:none;box-shadow:0 0 12px -3px currentColor}
|
|
.hx .nm{font-size:12.5px; font-weight:700; letter-spacing:-.01em; line-height:1.1}
|
|
.hx .rl{font-size:10.5px; color:var(--faint); margin-top:1px}
|
|
.hx.span2{grid-column:span 2}
|
|
|
|
.tracks{display:grid; grid-template-columns:repeat(5,1fr); gap:clamp(7px,.8vw,11px); min-height:0}
|
|
.tk{border-radius:13px; padding:clamp(11px,1.5vh,15px) clamp(10px,.9vw,14px); border:1px solid var(--hair2); background:rgba(255,255,255,.02); display:flex; flex-direction:column}
|
|
.tk .ph{font-size:10.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:4px 9px; border-radius:99px; align-self:flex-start}
|
|
.tk .cnt{font-size:clamp(17px,1.9vw,23px); font-weight:800; letter-spacing:-.03em; margin-top:10px}
|
|
.tk .cnt small{font-size:11px; color:var(--faint); font-weight:600}
|
|
.tk .desc{font-size:11.5px; color:var(--dim); line-height:1.38; margin-top:6px; flex:1}
|
|
.tk .win{font-size:11px; font-weight:700; margin-top:8px}
|
|
|
|
/* footer honesty */
|
|
.ft{border-radius:16px; padding:5px; border:1px solid rgba(251,191,36,.22); background:linear-gradient(180deg,rgba(251,191,36,.05),rgba(255,255,255,.01))}
|
|
.ft .c{border-radius:11px; padding:clamp(11px,1.6vh,16px) clamp(16px,1.6vw,24px); background:rgba(12,11,8,.6); box-shadow:inset 0 1px 1px rgba(255,255,255,.06); display:flex; align-items:center; gap:18px; flex-wrap:wrap; justify-content:space-between}
|
|
.ft .lead{font-size:clamp(12.5px,1.3vw,15px); color:var(--dim); line-height:1.45}
|
|
.ft .lead b{color:var(--ink); font-weight:700}
|
|
.ft .flow{font-family:var(--mono); font-size:11.5px; color:var(--dim); white-space:nowrap}
|
|
.ft .flow b{color:var(--ink)} .ft .flow .g{color:var(--h6c)} .ft .flow .a{color:var(--faint)}
|
|
|
|
@media(max-width:1040px){
|
|
body{overflow:auto}
|
|
.deck{height:auto; min-height:100dvh}
|
|
.body{grid-template-columns:1fr}
|
|
.harness{grid-template-columns:repeat(2,1fr)}
|
|
.tracks{grid-template-columns:1fr 1fr}
|
|
.stats{grid-template-columns:1fr 1fr}
|
|
.hx.span2{grid-column:span 1}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="deck">
|
|
|
|
<!-- HEADER -->
|
|
<div class="hd">
|
|
<div class="brand">
|
|
<span class="eyebrow"><span class="dot"></span>CASAN · Kiến trúc bảo mật AI</span>
|
|
<h1>Từ <span class="g">5 file spec-kit → 60 script phòng thủ</span></h1>
|
|
</div>
|
|
<span class="lv">CASAN Level 4 · chứng minh bằng tấn công</span>
|
|
</div>
|
|
|
|
<!-- STAT STRIP -->
|
|
<div class="stats">
|
|
<div class="stat"><div class="c"><div class="k">Script</div><div class="v">5 <span class="ar">→</span> 37 <span class="ar">→</span> <span class="up">60</span></div></div></div>
|
|
<div class="stat"><div class="c"><div class="k">Kiểm thử đối kháng</div><div class="v">79 <span class="ar">→</span> <span class="up">175</span> <small>0 lỗi</small></div></div></div>
|
|
<div class="stat"><div class="c"><div class="k">H4 · H5 · H6 (trưởng thành)</div><div class="v">3.0 <span class="ar">→</span> <span class="up">4.0</span> <small>/ 5</small></div></div></div>
|
|
<div class="stat"><div class="c"><div class="k">Lớp yếu nhất</div><div class="v">76 <span class="ar">→</span> 79 <span class="ar">→</span> <span class="up">80</span></div></div></div>
|
|
</div>
|
|
|
|
<!-- BODY -->
|
|
<div class="body">
|
|
|
|
<!-- LEFT: 3 milestones -->
|
|
<div class="panel"><div class="in">
|
|
<div class="ptitle">Ba mốc tiến hoá</div>
|
|
<div class="mile">
|
|
<div class="m">
|
|
<div class="step">Mốc 0 · Base</div>
|
|
<div class="row1"><span class="name">Spec-kit vanilla</span><span class="num">5<small> file</small></span></div>
|
|
<p>Chỉ sinh khung dự án — chưa chặn, chưa ghi vết, chưa đo chi phí.</p>
|
|
</div>
|
|
<div class="m">
|
|
<div class="step">Mốc 1 · Lúc mang đi thi</div>
|
|
<div class="row1"><span class="name">Đủ 7 harness</span><span class="num">37<small> script</small></span></div>
|
|
<p>Hiện thực đủ 7 lớp bảo vệ. Chặn tấn công trên sân khấu — mức demo/PoC (3.0/5).</p>
|
|
</div>
|
|
<div class="m now">
|
|
<div class="step">Mốc 2 · Sau khi thi</div>
|
|
<div class="row1"><span class="name">Cứng hoá production</span><span class="num">60<small> script</small></span></div>
|
|
<p>+23 script vá đường lọt "sát production". Level 4 — không lớp nào dưới 80.</p>
|
|
</div>
|
|
</div>
|
|
</div></div>
|
|
|
|
<!-- RIGHT: harnesses + upgrade tracks -->
|
|
<div class="rcol">
|
|
|
|
<div class="panel"><div class="in">
|
|
<div class="ptitle">7 lớp phòng thủ (harness) — hiện thực từ lúc thi</div>
|
|
<div class="harness">
|
|
<div class="hx"><span class="tab" style="background:rgba(56,189,248,.15);color:var(--h1c)">H1</span><div><div class="nm">Context</div><div class="rl">ngữ cảnh</div></div></div>
|
|
<div class="hx"><span class="tab" style="background:rgba(34,211,238,.15);color:var(--h2c)">H2</span><div><div class="nm">Tool</div><div class="rl">công cụ · least-priv</div></div></div>
|
|
<div class="hx"><span class="tab" style="background:rgba(167,139,250,.15);color:var(--h3c)">H3</span><div><div class="nm">Evaluation</div><div class="rl">model · judge</div></div></div>
|
|
<div class="hx"><span class="tab" style="background:rgba(251,113,133,.15);color:var(--h4c)">H4</span><div><div class="nm">Security</div><div class="rl">injection · secret · PII</div></div></div>
|
|
<div class="hx"><span class="tab" style="background:rgba(251,191,36,.15);color:var(--h5c)">H5</span><div><div class="nm">Governance</div><div class="rl">audit ký · SoD</div></div></div>
|
|
<div class="hx"><span class="tab" style="background:rgba(52,211,153,.15);color:var(--h6c)">H6</span><div><div class="nm">AgentOps</div><div class="rl">chi phí · drift · alert</div></div></div>
|
|
<div class="hx span2"><span class="tab" style="background:rgba(129,140,248,.15);color:var(--h7c)">H7</span><div><div class="nm">Orchestration</div><div class="rl">điều phối · rollback thật</div></div></div>
|
|
</div>
|
|
</div></div>
|
|
|
|
<div class="panel"><div class="in">
|
|
<div class="ptitle">+23 script sau khi thi — 5 nhóm cứng hoá</div>
|
|
<div class="tracks">
|
|
<div class="tk">
|
|
<span class="ph" style="background:rgba(251,113,133,.14);color:var(--h4c)">Track A</span>
|
|
<div class="cnt">5 <small>file</small></div>
|
|
<div class="desc">Homoglyph · zero-width · base64 · fail-closed · telemetry ký · FP 0%.</div>
|
|
</div>
|
|
<div class="tk">
|
|
<span class="ph" style="background:rgba(34,211,238,.14);color:var(--h2c)">Track C</span>
|
|
<div class="cnt">5 <small>file</small></div>
|
|
<div class="desc">Gate hành động · supply-chain · chống rò rỉ · sandbox.</div>
|
|
</div>
|
|
<div class="tk">
|
|
<span class="ph" style="background:rgba(245,209,130,.16);color:var(--gold)">Evidence</span>
|
|
<div class="cnt">3 <small>file</small></div>
|
|
<div class="desc">Gói bằng chứng ký số — sửa 1 byte → vô hiệu.</div>
|
|
</div>
|
|
<div class="tk">
|
|
<span class="ph" style="background:rgba(251,191,36,.14);color:var(--h5c)">H5+</span>
|
|
<div class="cnt">5 <small>file</small></div>
|
|
<div class="desc">Duyệt ký-danh-tính · khoá trong két (KMS) · WORM ngoài.</div>
|
|
<div class="win" style="color:var(--h5c)">76 → 80 ↑</div>
|
|
</div>
|
|
<div class="tk">
|
|
<span class="ph" style="background:rgba(52,211,153,.14);color:var(--h6c)">H6+</span>
|
|
<div class="cnt">5 <small>file</small></div>
|
|
<div class="desc">Alert live + dead-letter · đối soát chi phí · dashboard /healthz.</div>
|
|
<div class="win" style="color:var(--h6c)">79 → 80 ↑</div>
|
|
</div>
|
|
</div>
|
|
</div></div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- FOOTER honesty -->
|
|
<div class="ft"><div class="c">
|
|
<div class="lead"><b>Trung thực:</b> mức <b>production nội bộ, chứng minh bằng tấn công</b> — chưa production hoàn chỉnh (còn IdP live · WORM store thật · cô lập kernel · billing-API). Sức mạnh = <b>phòng thủ nhiều tầng + trung thực</b>, không phải "viên đạn bạc".</div>
|
|
<div class="flow"><b>5</b> <span class="a">→</span> <b>37</b> <span class="a">→</span> <b class="g">60 script</b> <span class="a">·</span> <b class="g">175 test · 0 lỗi</b></div>
|
|
</div></div>
|
|
|
|
</div>
|
|
</body>
|
|
</html>
|