/* V9.0 — Trang Demo tương tác */
.demo-tabs{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 22px}
.demo-tab{display:flex;align-items:center;gap:10px;padding:12px 18px;border:1.5px solid #cdddf0;background:#fff;border-radius:14px;font:inherit;font-weight:700;font-size:14px;color:var(--navy);cursor:pointer;transition:.2s}
.demo-tab .dn{width:26px;height:26px;border-radius:50%;background:#e3efff;color:#1768e8;display:grid;place-items:center;font-size:12px;font-weight:800}
.demo-tab:hover{border-color:#1768e8;transform:translateY(-1px)}
.demo-tab[aria-selected=true]{background:#0b2a5c;color:#fff;border-color:#0b2a5c;box-shadow:0 10px 24px #0b2a5c33}
.demo-tab[aria-selected=true] .dn{background:#13c8ea;color:#06304a}
.demo-panel[hidden]{display:none}
.demo-intro{color:var(--muted);margin:0 0 18px;max-width:760px;font-size:15px}
.demo-note{font-size:12.5px;color:var(--muted);margin-top:14px}
/* tài liệu mẫu */
.sim-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:22px;align-items:start}
.sim-doc{position:relative;background:#fff;border:1px solid var(--line);border-radius:14px;padding:26px 28px;box-shadow:0 14px 40px #0d367012;overflow:hidden;user-select:text;outline:none;min-height:340px}
.sim-doc:focus-visible{box-shadow:0 0 0 3px #7ab3f5}
.sim-doc h3{margin:0 0 4px;color:var(--navy);font-size:18px}
.sim-doc .tag{display:inline-block;background:#fde8e8;color:#b42318;font-size:11px;font-weight:800;letter-spacing:.06em;padding:3px 9px;border-radius:99px;margin-bottom:10px}
.sim-doc p{margin:0 0 9px;font-size:13.5px;line-height:1.65;color:#2c405f}
.sim-doc table{width:100%;border-collapse:collapse;font-size:13px;margin-top:8px}
.sim-doc td,.sim-doc th{border-bottom:1px solid var(--line);padding:6px 4px;text-align:left}
.sim-doc th{color:var(--muted);font-weight:700;font-size:11.5px;text-transform:uppercase;letter-spacing:.05em}
.wm{position:absolute;inset:-40%;pointer-events:none;display:flex;flex-wrap:wrap;align-content:flex-start;gap:34px 42px;transform:rotate(-24deg);opacity:.17;color:#0b2a5c;font-size:12.5px;font-weight:700;white-space:nowrap;animation:wmDrift 18s linear infinite;z-index:2}
@keyframes wmDrift{from{translate:0 0}to{translate:-60px 30px}}
.sim-toast{position:absolute;left:50%;top:50%;translate:-50% -50%;scale:.9;background:#b42318;color:#fff;border-radius:14px;padding:14px 20px;font-weight:700;font-size:14px;text-align:center;box-shadow:0 20px 50px #b4231855;opacity:0;pointer-events:none;transition:.25s;z-index:5;max-width:80%}
.sim-toast.show{opacity:1;scale:1}
.sim-doc.flash{animation:flashRed .5s}
@keyframes flashRed{0%{box-shadow:0 0 0 0 #b4231888}100%{box-shadow:0 0 0 18px #b4231800}}
.sim-ctl{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px;box-shadow:0 14px 40px #0d367010}
.sim-ctl label{display:block;font-size:12px;font-weight:700;color:var(--muted);margin-bottom:6px}
.sim-ctl input[type=text]{width:100%;border:1px solid #cdd9e8;border-radius:9px;padding:9px 12px;font:inherit;font-size:14px;margin-bottom:14px}
.sim-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}
.sim-actions button{display:flex;align-items:center;gap:8px;padding:10px 12px;border:1px solid #cdddf0;background:#f7faff;border-radius:10px;font:inherit;font-size:13px;font-weight:600;color:var(--navy);cursor:pointer;text-align:left;transition:.2s}
.sim-actions button:hover{border-color:#e5564d;background:#fff4f3;transform:translateY(-1px)}
.sim-log{border-top:1px dashed #cdddf0;padding-top:12px}
.sim-log h4{margin:0 0 8px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#0a8ca7}
.sim-log ol{list-style:none;margin:0;padding:0;max-height:170px;overflow:auto;font-size:12.5px}
.sim-log li{display:flex;gap:8px;padding:5px 0;border-bottom:1px solid var(--line);color:#2c405f;animation:logIn .3s}
.sim-log li b{color:#b42318;flex:0 0 auto}
.sim-log li span{color:var(--muted);flex:0 0 auto;font-variant-numeric:tabular-nums}
.sim-log .empty{color:var(--muted);font-style:italic}
@keyframes logIn{from{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}
/* trước - sau */
.ba{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--line);box-shadow:0 14px 40px #0d367012;background:#fff;user-select:none;--p:50%}
.ba-layer{padding:26px 30px 30px;min-height:330px;position:relative}
.ba-layer h3{margin:6px 0 4px;color:var(--navy);font-size:18px}
.ba-layer p{margin:0 0 9px;font-size:13.5px;line-height:1.65;color:#2c405f;max-width:560px}
.ba-badges{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.ba-badges span{font-size:11.5px;font-weight:800;padding:4px 10px;border-radius:99px}
.ba-before{position:absolute;inset:0;background:#fff;clip-path:inset(0 calc(100% - var(--p)) 0 0)}
.ba-before .ba-badges span{background:#fde8e8;color:#b42318}
.ba-after{background:linear-gradient(135deg,#f3f9ff,#eaf3ff)}
.ba-after .ba-badges span{background:#dcf7ec;color:#0c7a56}
.ba-after .sens{filter:blur(5px);user-select:none}
.ba-side{position:absolute;top:14px;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:8px;z-index:4}
.ba-side.l{left:14px;background:#b42318;color:#fff}.ba-side.r{right:14px;background:#12a67a;color:#fff}
.ba-handle{position:absolute;top:0;bottom:0;left:var(--p);width:3px;background:#1768e8;translate:-50% 0;z-index:5;pointer-events:none}
.ba-handle:after{content:'\2194';position:absolute;top:50%;left:50%;translate:-50% -50%;width:40px;height:40px;border-radius:50%;background:#1768e8;color:#fff;display:grid;place-items:center;font-size:18px;box-shadow:0 6px 18px #1768e866}
.ba input[type=range]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;z-index:6;margin:0}
.ba:focus-within .ba-handle:after{outline:3px solid #7ab3f5}
.ba-cmp{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:18px}
.ba-cmp>div{border-radius:14px;padding:14px 18px;font-size:13.5px}
.ba-cmp .no{background:#fff4f3;border:1px solid #f5c9c5}.ba-cmp .yes{background:#effaf5;border:1px solid #bfe8d7}
.ba-cmp h4{margin:0 0 6px;font-size:14px}.ba-cmp ul{margin:0;padding-left:18px}.ba-cmp li{margin:3px 0}
/* kịch bản */
.sc-pick{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px}
.sc-btn{padding:14px 16px;border:1.5px solid #cdddf0;background:#fff;border-radius:14px;font:inherit;font-weight:700;font-size:14px;color:var(--navy);cursor:pointer;text-align:left;transition:.2s;display:flex;gap:10px;align-items:center}
.sc-btn i{font-style:normal;font-size:22px}
.sc-btn:hover{border-color:#1768e8;transform:translateY(-2px)}
.sc-btn[aria-pressed=true]{background:#0b2a5c;color:#fff;border-color:#0b2a5c;box-shadow:0 10px 24px #0b2a5c33}
.sc-out{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.sc-col{border-radius:16px;padding:18px 20px}
.sc-col.no{background:#fff4f3;border:1px solid #f5c9c5}.sc-col.yes{background:#effaf5;border:1px solid #bfe8d7}
.sc-col h4{margin:0 0 12px;font-size:15px}
.sc-col.no h4{color:#b42318}.sc-col.yes h4{color:#0c7a56}
.sc-col ol{margin:0;padding:0;list-style:none;counter-reset:s}
.sc-col li{position:relative;padding:0 0 12px 34px;font-size:13.8px;line-height:1.55;color:#2c405f;counter-increment:s;animation:logIn .35s both}
.sc-col li:before{content:counter(s);position:absolute;left:0;top:0;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:800;color:#fff}
.sc-col.no li:before{background:#e5564d}.sc-col.yes li:before{background:#12a67a}
.sc-col li:nth-child(2){animation-delay:.08s}.sc-col li:nth-child(3){animation-delay:.16s}.sc-col li:nth-child(4){animation-delay:.24s}
.demo-cta{margin-top:30px;background:linear-gradient(115deg,#0b3067,#0c599b);color:#fff;border-radius:20px;padding:26px 30px;display:flex;gap:20px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.demo-cta h3{margin:0 0 4px;font-size:20px}.demo-cta p{margin:0;color:#d1e6ff;font-size:14px}
@media (max-width:900px){.sim-grid,.sc-out,.ba-cmp{grid-template-columns:1fr}.sc-pick{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.sim-doc{padding:18px}.ba-layer{padding:20px 18px 24px;min-height:360px}.demo-tab{flex:1 1 100%}.sc-pick{grid-template-columns:1fr}.sim-actions{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.wm{animation:none}}

.ba-layer{padding:56px 30px 26px}
.ba-badges{margin-bottom:12px}.ba-badges.r{justify-content:flex-end}
.ba-row{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--line);font-size:14px;color:#2c405f}
.ba-row b{color:var(--navy);text-align:right}
.ba-foot{margin:12px 0 0;font-size:12.5px;color:var(--muted);max-width:none}.ba-foot.r{text-align:right}
.ba-layer h3{margin:0 0 8px}
@media (max-width:600px){.ba-row{font-size:12.5px}.ba-layer{padding:56px 16px 22px}}

.ba-foot{max-width:44%}.ba-foot.r{margin-left:auto}