/* Scene 03 · Phân tích nguyên nhân (LỆNH 13B, 23/10/2026; rebuilt LỆNH 43 §1, 27/10/2026) — "Gốc rễ". A WebGL canvas of its own (.of-gl,
   pb-cause.js: the model building on the stage's navy, drawn opaque by its final pass) under the DOM that scene-cause03.js writes from one
   clock (NQ_CK). On screen only: the chapter line, the problem pill and its caption, the dotted axis with five dots, each with "Vì sao?"
   and its answer, the leaders to the props, the root and its subline; text on the left from x 160, the model on the right. The large root
   word clips its gradient to the text: padding on top so the hook of "Ủ" is not cut. */
#s-cause,#s-cause.active,#s-cause.active.cn-dof,#s-cause.cn-in{filter:none!important;transform:none!important}
#s-cause .c3{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;background:#070D1C}
#s-cause .c3 *{box-sizing:border-box}
#s-cause .c3 p,#s-cause .c3 h2{margin:0}
#s-cause .c3>*{position:absolute;margin:0;left:0;top:0}
#s-cause .head{z-index:6}
#s-cause .head .h1{display:none}   /* the scene has no title line: the pill says the problem */
#s-cause.cn-in [data-b]{transition-delay:.3s}   /* after 02's own text has gone (pitch-ev02.css), not over it */
#s-cause .c3 .of-gl{left:0;top:0;width:1920px;height:1080px;display:block}
#s-cause .c3-still{left:0;top:0;width:1920px;height:1080px;display:none}
#s-cause.c3-still-on .c3-still{display:block}
#s-cause.c3-still-on .c3 .of-gl{display:none}
/* the symptom, on top */
/* LỆNH 42 §B4: the one label (tokens: pitch.css); the amber edge keeps the problem's colour */
#s-cause .c3-chip{opacity:0;display:flex;align-items:center;gap:12px;padding:var(--nq-pill-pad);border-radius:999px;white-space:nowrap;
  font:var(--nq-pill-font);color:var(--nq-pill-ink);
  background:var(--nq-pill-bg);box-shadow:inset 0 0 0 1px rgba(240,166,58,.92)}
#s-cause .c3-chip span{color:#F0A63A}
#s-cause .c3-cap{opacity:0;white-space:nowrap;font-size:22px;font-weight:500;line-height:26px;color:rgba(238,244,253,.96)}
/* the axis: five asks of "why?" */
#s-cause .c3-rail{width:1920px;height:1080px;overflow:visible}
#s-cause .c3-rail .base{stroke:rgba(214,226,246,.26);stroke-width:2;stroke-dasharray:2 9;stroke-linecap:round}
#s-cause .c3-rail .fill{stroke:#F0A63A;stroke-width:3;stroke-linecap:round;opacity:0}
#s-cause .c3-rail .dot{fill:#1A2440;stroke:rgba(214,226,246,.4);stroke-width:2}
#s-cause .c3-rail .dot.on{fill:#FFC468;stroke:#FFC468}
#s-cause .c3-rail .halo{fill:rgba(240,166,58,.35);opacity:0}
/* the leader from an answer to its prop: 1 px, amber, a dot on the prop; drawn on (pathLength 1) as the answer pops */
#s-cause .c3-rail .ld{fill:none;stroke:#F0A63A;stroke-width:1;stroke-dasharray:1;stroke-dashoffset:1;opacity:0}
#s-cause .c3-rail .ldd{fill:#F0A63A;opacity:0;r:4px}
/* the answers: "Vì sao?" (20 px, light amber) over the answer (26 px, white); the dot sits at the middle of the two lines */
#s-cause .c3-why{width:max-content;white-space:nowrap}
#s-cause .c3-why small,#s-cause .c3-why b{opacity:0}
#s-cause .c3-why small{display:block;font-size:20px;font-weight:600;line-height:24px;letter-spacing:.01em;color:#FFC98A}
#s-cause .c3-why b{display:block;font-size:26px;font-weight:600;line-height:32px;color:#FFFFFF}
/* the root: the one thing to remember */
#s-cause .c3-root{opacity:0;transform-origin:0 60%}
#s-cause .c3-root small{display:block;font-size:36px;font-weight:700;letter-spacing:.06em;line-height:1.2;color:#F0A63A}
#s-cause .c3-root h2{margin:0 0 -10px!important;padding:14px 8px 10px 0;font-size:92px;font-weight:700;letter-spacing:-.01em;line-height:1.12;white-space:nowrap;
  background:linear-gradient(100deg,#E98A22 0%,#FFC468 38%,#FFF3DC 50%,#FFC468 62%,#E98A22 100%) 0 0/260% 100% no-repeat;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#FFC468;   /* (the fill is the gradient; color: its gold, for a reader) */
  filter:drop-shadow(0 0 26px rgba(240,150,40,.45))}
#s-cause .c3-root p{margin:18px 0 0 4px!important;font-size:36px;font-weight:500;line-height:1.2;white-space:nowrap;color:#D8CDBB}
#s-cause .c3-root p i{display:inline-block;width:8px;height:8px;margin:0 18px;border-radius:50%;background:#F0A63A;vertical-align:8px}
#s-cause :is(.c3-chip,.c3-cap,.c3-why,.c3-root){will-change:transform}