/* s14 — Năm câu hỏi pháp lý mở */
.s14 h2 { font-size: 60px; }
.s14-lead { font-size: 26px; margin-top: 12px; max-width: 1400px; }
.s14-lead b { font-weight: 600; }
.s14-heads { position: absolute; top: 196px; left: 0; width: 1680px; height: 24px; }
.s14-heads span { position: absolute; white-space: nowrap; font: 600 15px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink3); }
.s14-heads span i { font-style: normal; letter-spacing: .04em; text-transform: none; color: var(--ink4); margin-left: 10px; }
.s14-heads span:nth-child(2) { color: var(--gold); }

.s14-dia { position: absolute; top: 232px; left: 0; width: 1680px; height: 500px; }
.s14-svg { position: absolute; inset: 0; overflow: visible; pointer-events: none; }
.s14-ln { fill: none; stroke-width: 2; opacity: 0; transition: opacity .5s var(--ease-out), stroke-width .3s; }
.s14-ln.ev { stroke: var(--green); }
.s14-ln.ev.k-demo { stroke: var(--amber); stroke-dasharray: 5 5; }
.s14-ln.ev.k-concept { stroke: var(--cyan); }
.s14-ln.law { stroke: var(--gold); }
.s14-ln.law.draft { stroke: var(--amber); }
.s14-ln.vis { opacity: .16; }
.s14-ln.on { opacity: .95; stroke-width: 2.6; filter: drop-shadow(0 0 6px currentColor); }
.s14-dot { opacity: 0; transition: opacity .4s; }
.s14-dot.ev { fill: var(--green); } .s14-dot.law { fill: var(--gold); }
.s14-dot.vis { opacity: .3; } .s14-dot.on { opacity: 1; }

/* evidence chips (left) */
.s14-ev { position: absolute; display: flex; align-items: center; gap: 12px; padding: 0 12px 0 6px; border: 1px solid var(--line); border-radius: 10px; background: rgba(8, 22, 16, .7); transition: opacity .5s var(--ease-out), border-color .4s, background .4s, transform .5s var(--ease-out); }
.s14-ev .s14-evt { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; line-height: 1.12; min-width: 0; }
.s14-ev b { font-size: 17px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.s14-ev small { flex-basis: 100%; font-size: 14.5px; color: var(--ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s14-k { font: 700 10.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: 2px 5px; border-radius: 4px; border: 1px solid currentColor; vertical-align: 1px; margin-right: 2px; }
.s14-k.demo { color: var(--amber); } .s14-k.concept { color: var(--cyan); }
.s14-back { all: unset; flex: none; font: 600 14px/1 var(--mono); color: var(--green); border: 1px solid rgba(62, 224, 143, .4); background: rgba(62, 224, 143, .08); border-radius: 7px; padding: 7px 7px; cursor: pointer; pointer-events: auto; }
.s14-back:hover { background: rgba(62, 224, 143, .22); transform: none; }
.s14-back.missing { color: var(--ink4); border-color: var(--line); background: none; cursor: default; }
.s14-ev.k-demo .s14-back:not(.missing) { color: var(--amber); border-color: rgba(255, 176, 32, .4); background: rgba(255, 176, 32, .08); }

/* legal-text chips (right) */
.s14-law { position: absolute; padding: 6px 14px 6px 16px; border: 1px solid var(--line); border-left: 3px solid rgba(242, 193, 78, .55); border-radius: 10px; background: rgba(14, 22, 12, .72); display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-content: center; line-height: 1.15; transition: opacity .5s var(--ease-out), border-color .4s, background .4s, transform .5s var(--ease-out); }
.s14-law b { font-size: 17px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.s14-law em { font: 500 13px/1.5 var(--mono); font-style: normal; color: var(--ink4); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s14-law small { grid-column: 1 / -1; font-size: 15px; color: var(--ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s14-law.is-draft { border-left-color: var(--amber); border-style: dashed; border-left-style: solid; }
.s14-law.is-draft em { color: var(--amber); font-weight: 700; }

/* question tiles (centre) */
.s14-q { position: absolute; display: flex; align-items: center; gap: 18px; padding: 0 22px 0 16px; border-radius: 16px; border: 1px solid rgba(242, 193, 78, .28); background: linear-gradient(100deg, rgba(40, 34, 14, .82), rgba(14, 26, 19, .84)); box-shadow: 0 14px 40px rgba(0, 0, 0, .35); }
.s14-q.is-draft { border-color: rgba(255, 176, 32, .38); border-style: dashed; }
.s14-qn { flex: none; width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; font: 800 26px/1 var(--font); color: #1a1405; background: var(--gold); box-shadow: 0 0 0 5px rgba(242, 193, 78, .14); }
.s14-q.is-draft .s14-qn { background: var(--amber); }
.s14-qt { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.s14-qt b { font-size: 22px; font-weight: 600; line-height: 1.18; color: var(--ink); }
.s14-qt small { font: 500 14.5px/1 var(--mono); color: var(--ink3); letter-spacing: .02em; }
.s14-dt { font-weight: 700; color: #1a1203; background: var(--amber); padding: 2px 6px; border-radius: 4px; margin-left: 6px; letter-spacing: .08em; }
.s14-q.on { border-color: var(--gold); box-shadow: 0 0 0 1px rgba(242, 193, 78, .4), 0 18px 60px rgba(242, 193, 78, .18); transform: translateX(6px); }
.s14-q.is-draft.on { border-color: var(--amber); box-shadow: 0 0 0 1px rgba(255, 176, 32, .45), 0 18px 60px rgba(255, 176, 32, .18); }
.s14-q.shown:not(.on) { opacity: .97; }

/* focus mode: everything not linked to the selected question recedes */
.s14 .s14-ev, .s14 .s14-law { opacity: .5; }
.s14.pre .s14-ev, .s14.pre .s14-law { opacity: .62; }
.s14.has-sel .s14-ev, .s14.has-sel .s14-law, .s14.voting .s14-ev, .s14.voting .s14-law { opacity: .2; }
.s14.has-sel .s14-q.shown:not(.on) { opacity: .5; }
.s14 .s14-ev.lit, .s14 .s14-law.lit { opacity: 1; background: rgba(14, 34, 24, .92); }
.s14 .s14-ev.lit { border-color: rgba(62, 224, 143, .6); transform: translateX(-4px); }
.s14 .s14-ev.lit.k-demo { border-color: rgba(255, 176, 32, .6); }
.s14 .s14-ev.lit.k-concept { border-color: rgba(76, 201, 240, .6); }
.s14 .s14-law.lit { border-color: rgba(242, 193, 78, .65); border-left-color: var(--gold); transform: translateX(4px); }
.s14 .s14-law.lit.is-draft { border-color: rgba(255, 176, 32, .7); border-left-color: var(--amber); }

/* detail strip: verbatim question */
.s14-detail { position: absolute; left: 0; right: 0; top: 750px; min-height: 128px; padding: 16px 30px 16px; border-color: rgba(242, 193, 78, .3); display: flex; flex-direction: column; gap: 8px; }
.s14-detail.is-draft { border-color: rgba(255, 176, 32, .45); }
.s14-dhead { display: flex; align-items: center; gap: 16px; }
.s14-dn { font: 700 15px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.s14-dtag .tag { font-size: 13px; padding: 5px 9px; }
.s14-hint { margin-left: auto; font-size: 15px; }
.s14-dq { margin: 0; font: italic 500 25px/1.3 var(--serif); color: var(--ink); }
.s14-dq b { font-style: italic; font-weight: 700; color: var(--gold); }
.s14-detail.is-draft .s14-dq b { color: var(--amber); }
.s14-detail.is-intro .s14-dq { color: var(--ink2); }
.s14-dnote { margin: 0; font: 500 15px/1.2 var(--mono); color: var(--ink3); }
.s14-dnote:empty { display: none; }

/* vote mode */
.s14-win { display: none; margin-left: 10px; font: 700 11.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #1a1405; background: var(--gold); padding: 5px 9px; border-radius: 6px; box-shadow: 0 6px 20px rgba(242, 193, 78, .35); }
.s14.voting .s14-q.shown { cursor: pointer; }
.s14.voting .s14-q.shown:not(.winner) .s14-qn { box-shadow: 0 0 0 5px rgba(242, 193, 78, .14), 0 0 0 9px rgba(242, 193, 78, .06); }
.s14-q.winner { border: 2px solid var(--gold); border-style: solid; background: linear-gradient(100deg, rgba(92, 72, 16, .9), rgba(30, 32, 16, .9)); box-shadow: 0 0 0 4px rgba(242, 193, 78, .18), 0 0 70px rgba(242, 193, 78, .35); opacity: 1 !important; }
.s14-q.winner .s14-win { display: inline-block; }
.s14-q.winner .s14-qn { background: var(--gold); }
.s14-detail.is-vote { border-color: var(--gold); background: linear-gradient(120deg, rgba(242, 193, 78, .14), rgba(12, 30, 22, .8)); }
.s14-detail.is-vote .s14-dq { color: var(--ink); }

/* empty slots shown before the questions are revealed */
.s14-ghost { position: absolute; border: 1px dashed rgba(242, 193, 78, .22); border-radius: 16px; display: flex; align-items: center; padding-left: 16px; }
.s14-ghost span { width: 50px; height: 50px; border-radius: 50%; border: 1px dashed rgba(242, 193, 78, .35); display: grid; place-items: center; font: 700 22px/1 var(--font); color: rgba(242, 193, 78, .45); }

/* lawmakers' finale: the vote step shows the whole network (every fact linked to every provision it touches) */
.s14.voting:not(.has-sel) .s14-ln.vis { opacity: .55; }
.s14.voting:not(.has-sel) .s14-dot.vis { opacity: .85; }
.s14.voting:not(.has-sel) .s14-ev, .s14.voting:not(.has-sel) .s14-law { opacity: .9; }
.s14.voting:not(.has-sel) .s14-q.shown { box-shadow: 0 0 0 1px rgba(242, 193, 78, .35), 0 14px 40px rgba(0, 0, 0, .35); }

/* polish pass (19/10): no truncated facts/dates, no sub-14px tags (columns widened in s14-questions.js) */
.s14-ev small { font-size: 14.5px; }
.s14-k { font-size: 13px; letter-spacing: .03em; padding: 2px 5px 1px; }
.s14-law { column-gap: 8px; }
.s14-law em { font-size: 14px; letter-spacing: -.02em; overflow: visible; color: var(--ink3); }
.s14-win { font-size: 14px; padding: 5px 10px; }
.s14-ev small { overflow: visible; text-overflow: clip; line-height: 1.2; }
.s14-win { padding: 2px 9px; line-height: 1.2; vertical-align: 1px; }
/* detail header must stay one line (voted draft question: label + DỰ THẢO tag + hint); else the strip grows into the source line */
.s14-dhead > * { white-space: nowrap; }
.s14-dn { letter-spacing: .08em; }
.s14-dtag .tag { font-size: 14px; padding: 5px 11px; letter-spacing: .05em; }
.s14-hint { font-size: 14.5px; }
.s14-k { font-size: 14px; letter-spacing: .02em; }
.s14-dtag .tag { padding: 3px 11px; line-height: 1.1; }
.s14-detail { gap: 6px; }
.s14-dtag { display: flex; }   /* was a 42px line box (inherits the slide's 30px/1.4) → strip grew into the source line */
.s14-detail { top: 744px; padding: 14px 30px 12px; }  /* Q4 has a note line: keep the strip clear of the source line */
.s14-back.missing { border: 1px dashed rgba(170, 230, 200, .3); color: var(--ink3); min-width: 55px; text-align: center; box-sizing: border-box; }