/* s17 — Phụ lục: nguồn */
.s17 h2 { font-size: 46px; }
.s17-note { position: absolute; right: 0; top: 30px; text-align: right; display: flex; flex-direction: column; gap: 6px; }
.s17-note b { font: 700 16px/1 var(--mono); color: var(--green); letter-spacing: .06em; text-transform: uppercase; }
.s17-note span { font: 400 14px/1 var(--mono); color: var(--ink3); }
.s17 .cf { display: inline-block; font: 700 10.5px/1 var(--mono); font-style: normal; padding: 2px 4px; border-radius: 3px; vertical-align: 1px; letter-spacing: .04em; }
.s17 .cf.h { color: #04140b; background: var(--green); }
.s17 .cf.m { color: #1a1203; background: var(--amber); }
.s17-grid { position: absolute; left: 0; top: 108px; width: 1680px; height: 630px; display: grid; grid-template-columns: 830px 410px 400px; gap: 20px; }
.s17-g h4 { margin: 0 0 8px; font: 700 14px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); display: flex; align-items: center; gap: 8px; padding-bottom: 7px; border-bottom: 1px solid var(--line2); }
.s17-g h4 small { font-weight: 500; letter-spacing: .02em; text-transform: none; color: var(--ink3); margin-left: auto; }
.s17 .sw { width: 10px; height: 10px; border-radius: 2px; display: inline-block; flex: none; }
.s17-g ul { list-style: none; margin: 0; padding: 0; }
.s17-g li { font: 400 12px/1.32 var(--mono); color: var(--ink3); padding: 4px 0 4px; border-bottom: 1px solid rgba(170, 230, 200, .06); break-inside: avoid; }
.s17-g li b { font: 600 13.5px/1.25 var(--font); color: var(--ink); margin-right: 2px; }
.s17-g li span { color: var(--ink2); }
.s17-g li em { font-style: normal; color: var(--ink4); font-size: 11.5px; white-space: nowrap; }
.s17-vb ul { columns: 2; column-gap: 26px; }
.s17-dt { border: 1px dashed rgba(255, 176, 32, .5); border-radius: 12px; padding: 10px 12px 8px; background: rgba(255, 176, 32, .05); }
.s17-dt h4 { color: var(--amber); }
.s17-col4 { display: flex; flex-direction: column; gap: 14px; }
.s17-no { margin: 6px 0 0; font: 400 12px/1.3 var(--mono); color: var(--ink3); }
.s17-prov { position: absolute; left: 0; top: 738px; width: 1680px; }
.s17-ph { display: flex; align-items: baseline; gap: 16px; margin-bottom: 8px; }
.s17-ph b { font: 700 14px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.s17-ph span { font: 400 13px/1 var(--mono); color: var(--ink3); }
.s17-mx { display: grid; grid-template-columns: 210px repeat(var(--n, 17), 1fr); row-gap: 3px; align-items: center; }
.s17-rl { font: 500 13px/1 var(--font); color: var(--ink2); display: flex; align-items: center; gap: 8px; height: 18px; }
.s17-cl { font: 600 11.5px/1 var(--mono); color: var(--ink3); text-align: center; padding-bottom: 4px; }
.s17-cl.me { color: var(--green); }
.s17-c { height: 18px; display: grid; place-items: center; border-left: 1px solid rgba(170, 230, 200, .05); }
.s17-c i { display: block; border-radius: 50%; background: var(--c); }
.s17-c i.r0 { width: 4px; height: 4px; background: var(--ink4); opacity: .5; }
.s17-c i.r1 { width: 8px; height: 8px; opacity: .65; }
.s17-c i.r2 { width: 13px; height: 13px; opacity: .85; }
.s17-c i.r3 { width: 17px; height: 17px; box-shadow: 0 0 10px var(--c); }
.s17-art { position: absolute; left: 0; top: 884px; width: 1680px; margin: 0; font: 400 12.5px/1.35 var(--mono); color: var(--ink4); }

/* Q&A zoom: one group at projector size */
.s17-g.hot { cursor: pointer; border-radius: 12px; transition: background .3s; }
.s17-g.hot:hover { background: rgba(255, 255, 255, .03); }
.s17-hint { position: absolute; right: 0; top: 742px; font-size: 15px; }
.s17-zoom { position: absolute; inset: 96px -30px 40px; z-index: 10; background: rgba(4, 12, 9, .97); border: 1px solid var(--line2); border-radius: 22px; padding: 30px 40px; box-shadow: 0 40px 120px rgba(0, 0, 0, .7);
  opacity: 0; transform: scale(.98); pointer-events: none; transition: opacity .35s var(--ease-out), transform .45s var(--ease-out); overflow: auto; }
.s17-zoom.on { opacity: 1; transform: none; pointer-events: auto; }
.s17-zoom .x { position: absolute; right: 18px; top: 12px; font: 400 40px/1 var(--font); color: var(--ink2); background: none; border: 0; cursor: pointer; padding: 4px 12px; }
.s17-zb h4 { margin: 0 0 14px; font: 700 20px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); display: flex; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line2); }
.s17-zb h4 small { font-weight: 500; letter-spacing: .02em; text-transform: none; color: var(--ink3); margin-left: auto; font-size: 17px; }
.s17-zb .sw { width: 14px; height: 14px; }
.s17-zb ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 44px; }
.s17-zb.s17-dt ul, .s17-zb.s17-dm ul { columns: 1; }
.s17-zb li { font: 400 17px/1.35 var(--mono); color: var(--ink3); padding: 8px 0; border-bottom: 1px solid rgba(170, 230, 200, .08); break-inside: avoid; }
.s17-zb li b { font: 600 20px/1.3 var(--font); color: var(--ink); margin-right: 4px; }
.s17-zb li span { color: var(--ink2); }
.s17-zb li em { font-style: normal; color: var(--ink3); font-size: 16px; }
.s17-zb .cf { font-size: 13px; padding: 3px 6px; }
.s17-zb .s17-no { font-size: 17px; margin-top: 14px; }

/* polish pass (19/10): the 14-item research column ran ~12px past the grid into the source-map header
   ("Vals AI" row touched the s07b column label); tighten row padding so every column ends above it */
.s17-g li { padding: 3px 0 2px; }