/* ============================================================
   SQL VISUAL EXPLAINER — Growth Quick Ratio (Pendo PES / Zoom)
   Bố cục: HUD + LEFT 30% (toàn bộ query) + MAIN 70%
   Vintage brutalist · flat UI · Reddit Sans + Font Awesome
   Palette gốc: #006B3F #1A8A5C #E6F5EF #004D2D #003520
   ============================================================ */

:root{
  /* ---- màu: đúng 5 màu của palette ---- */
  --green-600:#006B3F;
  --green-500:#1A8A5C;
  --mint:#E6F5EF;
  --green-800:#004D2D;
  --green-900:#003520;

  /* ---- màu dẫn xuất từ palette ---- */
  --ink:#003520;                 /* = green-900, dùng cho viền và chữ */
  --paper:#FFFFFF;               /* nền giấy cho panel dữ liệu */

  /* kênh RGB để tạo sắc độ mà không thêm màu mới */
  --ink-rgb:0,53,32;             /* = #003520 */
  --mint-rgb:230,245,239;        /* = #E6F5EF */

  /* ---- độ dày viền: tất cả 1px (flat, viền mảnh) ---- */
  --bd:1px;                      /* viền chính */
  --bd-hair:1px;                 /* đường phân cách trong bảng */
  --bd-accent:1px;               /* thanh nhấn bên trái */
  --bd-focus:1px;                /* viền đánh dấu vùng đang xét */

  /* ---- màu viền: luôn lấy từ color tokens ---- */
  --bd-line:var(--ink);                      /* viền khối, panel */
  --bd-line-soft:rgba(var(--ink-rgb),.22);   /* phân cách bên trong khối */
  --bd-line-mid:rgba(var(--ink-rgb),.45);    /* viền ô nhỏ, badge, chip */
  --bd-line-accent:var(--green-600);         /* viền nhấn theo trạng thái */
  --bd-line-dark:var(--mint);                /* viền trên nền tối */
  --bd-line-hud:var(--green-500);            /* viền điều khiển trong HUD */

  /* ---- chữ ---- */
  --font-ui:'Reddit Sans',system-ui,-apple-system,sans-serif;
  --font-code:'Reddit Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --f-xs:11px;
  --f-sm:12px;
  --f-md:13px;
  --f-lg:15px;
  --f-xl:22px;

  /* ---- kích thước khối ---- */
  --hud:54px;
}

*{box-sizing:border-box;margin:0;padding:0;border-radius:0!important;box-shadow:none!important;background-image:none!important}

html,body{height:100%}

body{
  font-family:var(--font-ui);
  background:var(--mint);
  color:var(--ink);
  font-size:var(--f-md);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  /* cột dọc: HUD cao bao nhiêu cũng được, phần còn lại dành cho .app */
  display:flex;
  flex-direction:column;
}

b,strong{font-weight:600}
em{font-style:normal;color:var(--green-600);font-weight:600;text-decoration:underline;text-decoration-thickness:var(--bd-focus);text-underline-offset:var(--bd-focus)}
code{font-family:var(--font-code);font-weight:400;font-size:max(.94em,11px)}

/* ---------------- HUD ---------------- */
.hud{
  height:var(--hud);flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:0 14px;background:var(--green-900);color:var(--mint);
  border-bottom:var(--bd) solid var(--bd-line);
}
.hud-left{display:flex;align-items:center;gap:9px;font-size:var(--f-sm);font-weight:600;letter-spacing:.07em;text-transform:uppercase;min-width:0;line-height:1.5}
.brand{white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis}
.brand i{color:var(--green-500)}
.slash{color:var(--mint);opacity:.45}
.topic{opacity:.75;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.hud-mid{display:flex;align-items:center;gap:10px;flex:1;max-width:460px}
.prog{flex:1;height:10px;border:var(--bd) solid var(--bd-line-hud);background:var(--green-900)}
.prog-fill{height:100%;width:0;background:var(--green-500);transition:width .3s}
.counter{font-size:var(--f-sm);font-weight:600;letter-spacing:.05em;white-space:nowrap}

.dots{display:flex;gap:13px}
.dot{
  width:11px;height:11px;border:var(--bd) solid var(--bd-line-hud);background:transparent;
  cursor:pointer;padding:0;position:relative;transition:background .2s,transform .15s;
}
/* vùng bấm mở rộng đúng 24x24 (chuẩn WCAG 2.2) nhưng vẫn giữ kích thước thị giác 11px.
   Khoảng cách tâm 2 chấm liền kề = 11 + 13 = 24px, và vùng bấm = 11 + 6.5x2 = 24px,
   nên hai vùng bấm chỉ chạm nhau đúng một điểm, không chồng lấn. */
.dot::after{content:'';position:absolute;inset:-6.5px}
.dot:hover{transform:scale(1.25);background:var(--green-800)}
.dot.done{background:var(--green-500)}
.dot.on{background:var(--mint);border-color:var(--bd-line-dark)}

/* trạng thái focus bàn phím: luôn nhìn thấy rõ */
:focus-visible{outline:var(--bd-focus) solid var(--green-600);outline-offset:2px}
.scene :focus-visible{outline-color:var(--green-600)}
/* trong HUD nền tối: dùng mint để viền focus nổi rõ */
.hud :focus-visible,
.btn:focus-visible,.sp:focus-visible,.dot:focus-visible{outline:var(--bd-focus) solid var(--mint);outline-offset:2px}

.hud-right{display:flex;align-items:center;gap:7px}
.speeds{display:flex;border:var(--bd) solid var(--bd-line-hud)}
.sp{
  font-family:var(--font-ui);font-size:var(--f-xs);font-weight:600;letter-spacing:.02em;
  padding:0 6px;height:24px;min-width:34px;cursor:pointer;border:0;border-right:var(--bd-hair) solid var(--bd-line-hud);
  background:transparent;color:var(--mint);transition:background .15s,color .15s;
}
.sp:last-child{border-right:0}
.sp:hover{background:var(--green-800)}
.sp.on{background:var(--mint);color:var(--green-900)}
.stepinfo{font-size:var(--f-xs);font-weight:600;letter-spacing:.04em;text-transform:uppercase;opacity:.9;white-space:nowrap;line-height:1.5}
.stepinfo b{color:var(--mint)}
.stepinfo i{vertical-align:-1px;color:var(--mint);opacity:.7}

.btn{
  font-family:'Reddit Sans',sans-serif;font-size:var(--f-sm);font-weight:600;
  width:34px;height:30px;display:grid;place-items:center;cursor:pointer;
  background:var(--mint);color:var(--green-900);border:var(--bd) solid var(--bd-line-dark);
  transition:background .15s,color .15s,transform .1s;
}
.btn:hover{background:var(--green-500);color:var(--mint);border-color:var(--bd-line-hud)}
.btn:active{transform:translateY(1px)}
.btn-play{width:42px;background:var(--green-600);border-color:var(--green-600);color:var(--mint)}
.btn-play:hover{background:var(--mint);color:var(--green-900)}

/* ---------------- APP GRID ---------------- */
.app{
  display:grid;grid-template-columns:30% 70%;
  flex:1;min-height:0;overflow:hidden;
}
.app.nocode{grid-template-columns:1fr}
.app.nocode .sidebar{display:none}

/* ---------------- SIDEBAR ---------------- */
.sidebar{
  display:flex;flex-direction:column;min-height:0;min-width:0;
  background:var(--paper);border-right:var(--bd) solid var(--bd-line);
}
.side-head{
  flex:none;display:flex;align-items:center;gap:7px;padding:6px 10px;
  background:var(--green-900);color:var(--mint);
  font-size:var(--f-xs);font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  border-bottom:var(--bd) solid var(--bd-line);
}
.side-head i{color:var(--green-500)}
.code-scroll{flex:1;min-height:0;overflow:auto;position:relative}
.code-scroll::-webkit-scrollbar{width:8px}
.code-scroll::-webkit-scrollbar-thumb{background:var(--green-500)}
.code-scroll::-webkit-scrollbar-track{background:var(--mint)}

.code{padding:6px 0;font-family:var(--font-code);font-size:clamp(11px,.85vw,12.5px);line-height:1.52;font-variant-numeric:tabular-nums}
.blk-head{
  display:flex;align-items:center;gap:6px;padding:5px 10px 4px;margin-top:6px;
  background:var(--mint);border-top:var(--bd) solid var(--bd-line);border-bottom:var(--bd-hair) solid var(--bd-line-soft);
  font-size:var(--f-xs);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--green-900);
  transition:background .25s,color .25s;
}
.blk-head:first-child{margin-top:0}
.blk-head i{color:var(--green-600)}
.blk-head.on{background:var(--green-600);color:var(--mint)}
.blk-head.on i{color:var(--mint)}

.cl{display:flex;gap:7px;padding:1px 9px;border-left:var(--bd-accent) solid transparent;transition:background .25s,border-color .25s}
.cl .ln{color:var(--green-600);opacity:1;min-width:18px;text-align:right;font-weight:400;flex:none}
.cl .lc{white-space:pre;font-weight:400;color:var(--green-900)}
.cl.hl{background:var(--mint);border-left-color:var(--green-600)}
.cl.hl .lc{font-weight:600}
.cl.hl .ln{opacity:1;color:var(--green-800)}

.note{
  flex:none;border-top:var(--bd) solid var(--bd-line);background:var(--green-900);color:var(--mint);
  padding:7px 10px;font-size:var(--f-sm);display:flex;gap:7px;align-items:flex-start;
}
.note i{color:var(--green-500);margin-top:2px}
.note span{line-height:1.45}

/* ---------------- MAIN ---------------- */
.main{position:relative;min-width:0;height:100%;overflow:hidden}

.scene{
  position:absolute;inset:0;padding:14px 18px;
  display:flex;flex-direction:column;gap:10px;overflow:auto;
  opacity:0;transform:translateX(22px);pointer-events:none;
  transition:opacity .32s ease,transform .32s ease;
}
.scene.active{opacity:1;transform:none;pointer-events:auto}
.scene::-webkit-scrollbar,.scroll::-webkit-scrollbar{width:8px;height:8px}
.scene::-webkit-scrollbar-thumb,.scroll::-webkit-scrollbar-thumb{background:var(--green-500)}
.scene::-webkit-scrollbar-track,.scroll::-webkit-scrollbar-track{background:var(--mint)}

.scene [data-step]{opacity:0;transform:translateY(10px);transition:opacity .32s ease,transform .32s ease}
.scene.active [data-step].on{opacity:1;transform:none}

.fill{flex:1;min-height:0}
.scroll{overflow:auto;min-height:0}
/* trong panel: vùng cuộn chiếm hết khoảng trống còn lại, tránh hở đáy */
.panel>.scroll{flex:1}

/* ---------------- PANEL ---------------- */
.panel{
  background:var(--paper);border:var(--bd) solid var(--bd-line);
  display:flex;flex-direction:column;min-height:0;
}
.panel-head{
  display:flex;align-items:center;gap:7px;padding:6px 10px;
  background:var(--green-900);color:var(--mint);
  font-size:var(--f-xs);font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  border-bottom:var(--bd) solid var(--bd-line);flex:none;
}
.panel-head i{color:var(--green-500)}
.tag{margin-left:auto;background:var(--green-600);color:var(--mint);padding:1px 6px;font-size:var(--f-xs);letter-spacing:.08em}

/* ---------------- SCENE HEAD ---------------- */
.sc-head{flex:none}
.sc-head h2{
  font-size:var(--f-xl);font-weight:600;letter-spacing:-.01em;text-transform:uppercase;
  display:flex;align-items:center;gap:9px;line-height:1.25;
}
.sc-head h2 i{color:var(--green-600)}
.sc-head p{font-size:var(--f-sm);margin-top:2px;opacity:.8}

/* ---------------- GRIDS ---------------- */
.grid-model{display:grid;grid-template-columns:minmax(240px,.72fr) 1.28fr;gap:10px;min-height:0}
.grid-scan{display:grid;grid-template-columns:1fr 1fr;gap:10px;min-height:0}
.grid-class{display:grid;grid-template-columns:1.15fr .85fr;gap:10px;min-height:0}
.grid-class>.panel{overflow:hidden}
.grid-qr{display:grid;grid-template-columns:1.2fr .8fr;gap:10px;min-height:0}
.grid-scale{display:grid;grid-template-columns:1.25fr .75fr;gap:10px;min-height:0}
.grid-result{display:grid;grid-template-columns:1.25fr .75fr;gap:10px;min-height:0}
.col-right{display:flex;flex-direction:column;gap:10px;min-height:0}
.left-col{display:flex;flex-direction:column;gap:10px;min-height:0}
.left-col>.panel:first-child{flex:1}

/* ---------------- TABLE ---------------- */
.tbl{width:100%;border-collapse:collapse;font-size:var(--f-sm);font-variant-numeric:tabular-nums}
.tbl th{
  text-align:left;padding:4px 9px;background:var(--mint);color:var(--green-900);
  font-size:var(--f-xs);font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  border-bottom:var(--bd) solid var(--bd-line);position:sticky;top:0;z-index:2;
}
.tbl td{padding:5px 9px;border-bottom:var(--bd-hair) solid var(--bd-line-soft)}
.tbl tbody tr:hover{background:var(--mint)}
.tbl tr.dim td{opacity:.72}
/* bảng dữ liệu đầu vào: hàng cao hơn cho dễ đọc */
.grid-model .tbl td{padding:7px 9px}
.grid-model .tbl th{padding:6px 9px}

/* ---------------- TIMELINE ---------------- */
.tl-panel{flex:none}
.tl{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;padding:9px}
.tl-month{
  border:var(--bd) solid var(--bd-line);background:var(--paper);padding:7px 9px;
  display:flex;flex-direction:column;gap:3px;
  opacity:0;transform:translateY(8px);transition:opacity .34s,transform .34s,background .34s,color .34s;
}
.tl-month.show{opacity:1;transform:none}
.tl-month b{font-size:var(--f-md);font-weight:600}
.tl-month i{font-size:var(--f-xs);font-weight:400;letter-spacing:.08em;text-transform:uppercase;opacity:.85;font-style:normal}
.tl-month.cur{background:var(--green-600);color:var(--mint)}
.tl-month.prev{background:var(--green-800);color:var(--mint)}
.tl-month.empty{opacity:.8}

.rel{
  flex:none;display:flex;align-items:center;gap:8px;font-size:var(--f-sm);
  background:var(--green-900);color:var(--mint);border:var(--bd) solid var(--bd-line);padding:6px 10px;
}
.rel i{color:var(--green-500)}

/* ---------------- LEGEND ---------------- */
.legend{
  flex:none;padding:0 10px;border:var(--bd) solid var(--bd-line);background:var(--paper);
  max-height:0;overflow:hidden;opacity:0;
  transition:max-height .35s ease,opacity .35s ease,padding .35s ease;
}
.legend.on{max-height:210px;opacity:1;padding:9px 10px}
.legend div{display:flex;gap:7px;align-items:flex-start;font-size:var(--f-sm);line-height:1.4;margin-bottom:5px}
.legend div:last-child{margin-bottom:0}
.legend i{color:var(--green-600);margin-top:2px;font-size:10px}
.legend code{color:var(--green-800);font-weight:600}

/* ---------------- SCENE 2 — SCAN (khoanh vùng theo nhóm) ---------------- */
#rawList{padding:3px 0}
.rrow{
  display:grid;grid-template-columns:38px 38px 1fr 62px 58px;align-items:center;gap:5px;
  padding:2px 9px;font-size:var(--f-sm);line-height:1.25;font-variant-numeric:tabular-nums;
  border-left:var(--bd-accent) solid transparent;max-height:24px;overflow:hidden;
  transition:background .18s,border-color .2s,opacity .26s,transform .26s,
             max-height .34s ease,padding .34s ease;
}
.rrow .cid{color:var(--green-600);font-weight:600}
.rrow .rvis{font-weight:600}
.rrow .rat{text-align:right;opacity:.85}
.rrow .pbadge{
  font-size:var(--f-xs);font-weight:600;letter-spacing:.02em;white-space:nowrap;line-height:1.3;
  text-align:center;border:var(--bd) dashed var(--bd-line-mid);padding:0 2px;color:var(--green-800);
  overflow:hidden;
  transition:opacity .22s,background .22s,color .22s,border .22s;
}
.rrow .cflag{
  font-size:var(--f-xs);font-weight:600;letter-spacing:.02em;text-align:center;white-space:nowrap;line-height:1.3;
  border:var(--bd) dashed var(--bd-line-mid);padding:0 2px;opacity:0;overflow:hidden;
  transition:opacity .22s,background .22s,color .22s,border-color .22s;
}
.rrow .cflag.on{opacity:1}
.rrow .cflag.v1{border-style:solid;border-color:var(--green-600);background:var(--green-600);color:var(--mint)}
.rrow .cflag.v0{border-style:solid;border-color:rgba(var(--ink-rgb),.4);background:var(--paper);color:rgba(var(--ink-rgb),.6)}
.rrow.cursor{background:var(--green-600);color:var(--mint);border-left-color:var(--bd-line)}
.rrow.cursor .cid,.rrow.cursor .rat{color:var(--mint);opacity:.95}
.rrow.cursor .pbadge{border-style:solid;border-color:var(--bd-line-dark);color:var(--mint)}
.rrow.cursor .cflag{opacity:1;border-color:var(--bd-line-dark);background:transparent;color:var(--mint)}
.rrow.inblock{background:var(--mint);border-left-color:var(--bd-line-accent)}
.rrow.inblock .pbadge{border-style:solid;border-color:var(--green-800)}
.rrow.inblock.pcur .pbadge.p-cur{background:var(--green-600);color:var(--mint);border-color:var(--green-600)}
.rrow.inblock.pprev .pbadge.p-prev{background:var(--green-800);color:var(--mint);border-color:var(--green-800)}
.rrow.grp-start{border-top:var(--bd) solid var(--bd-line-accent)}
.rrow.grp-end{border-bottom:var(--bd) solid var(--bd-line-accent)}
.rrow.seen .rat{font-weight:600}
/* dòng đã xử lý: làm mờ chữ thường bằng màu, giữ nguyên các nhãn có nền riêng */
.rrow.done .cid,
.rrow.done .rvis,
.rrow.done .rat{color:rgba(var(--ink-rgb),.78)}
.rrow.done .rvis{color:rgba(var(--green-600),1)}
.rrow.done{background:rgba(var(--ink-rgb),.05)}
.rrow.collapsing{max-height:0;opacity:0;padding-top:0;padding-bottom:0}
.rrow.first{background:var(--mint)}
#rawList.cleared{display:none}

.blk-tag{
  display:flex;align-items:center;gap:6px;margin:0 9px 3px 13px;padding:0 8px;
  height:22px;max-height:26px;overflow:hidden;
  border:var(--bd) dashed var(--bd-line-mid);background:var(--paper);
  font-size:var(--f-xs);font-weight:600;letter-spacing:.03em;color:var(--green-800);
  transition:background .26s,color .26s,border-color .26s,
             max-height .34s ease,padding .34s ease,margin .34s ease;
}
.blk-tag i{color:var(--green-500);flex:none}
.blk-tag .grpname{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.blk-tag .mchips{display:flex;gap:4px;flex:none}
.blk-tag .mchip{
  font-size:var(--f-xs);font-weight:600;letter-spacing:.02em;
  border:var(--bd) solid var(--bd-line-mid);padding:0 4px;background:var(--paper);color:var(--green-900);
  font-variant-numeric:tabular-nums;transition:background .24s,color .24s,border-color .24s;
}
.blk-tag .mchip.minchip,
.blk-tag .mchip.curchip{color:var(--green-600)}
.blk-tag .mchip.prevchip{color:var(--green-800)}
.blk-tag .mchip.v1{background:var(--green-600);border-color:var(--green-600);color:var(--mint)}
.blk-tag .mchip.prevchip.v1{background:var(--green-800);border-color:var(--green-800);color:var(--mint)}
.blk-tag.on{border-style:solid;border-color:var(--green-600);background:var(--mint)}
.blk-tag.done{background:var(--green-600);color:var(--mint);border-color:var(--green-600);border-style:solid}
.blk-tag.done i{color:var(--green-500)}
.blk-tag.done .mchip.v1{background:var(--green-800);border-color:var(--green-800);color:var(--mint)}
.blk-tag.done .mchip.prevchip.v1{background:var(--green-800);border-color:var(--green-800)}
.blk-tag.collapsing{max-height:0;opacity:0;margin-top:0;margin-bottom:0;padding-top:0;padding-bottom:0}

.dhead{
  display:grid;align-items:center;gap:4px;padding:3px 9px;background:var(--mint);
  font-size:var(--f-xs);font-weight:600;text-transform:uppercase;white-space:nowrap;
  border-bottom:var(--bd) solid var(--bd-line);position:sticky;top:0;z-index:2;
  grid-template-columns:56px 1fr 66px 72px;
}
.drow{
  display:grid;align-items:center;gap:4px;padding:5px 9px;font-size:12.5px;min-height:36px;
  font-variant-numeric:tabular-nums;border-left:var(--bd-accent) solid transparent;
  opacity:0;transform:translateX(-8px);
  transition:opacity .22s,transform .22s,background .22s;
  grid-template-columns:56px 1fr 66px 72px;
}
.collapse-note{
  display:none;flex:1;flex-direction:column;align-items:center;justify-content:center;gap:9px;
  padding:18px;text-align:center;border-top:var(--bd) solid var(--bd-line);
}
.collapse-note.on{display:flex}
.collapse-note i{font-size:30px;color:var(--green-600)}
.collapse-note b{font-size:var(--f-lg);font-weight:600;letter-spacing:.02em}
.collapse-note span{font-size:var(--f-sm);max-width:310px;line-height:1.5;opacity:.8}

/* chip bay từ nhóm sang bảng kết quả */
.flychip{
  position:fixed;z-index:60;pointer-events:none;
  background:var(--green-600);color:var(--mint);border:var(--bd) solid var(--bd-line);
  padding:0 7px;font-size:var(--f-xs);font-weight:600;line-height:20px;
  font-variant-numeric:tabular-nums;white-space:nowrap;
  transition:transform var(--dur-fly,.62s) cubic-bezier(.4,0,.2,1),opacity .22s ease;
}
.flychip.fly-add{background:var(--green-800)}
.flychip.land{opacity:0;transform:scale(.7);transition:transform .22s ease,opacity .22s ease}
.drow.on{opacity:1;transform:none}
.drow .dv{font-weight:600}
.drow .df{font-weight:600}
.drow .dc,.drow .dp{text-align:center;font-weight:400}
.drow.flash{background:var(--green-800);color:var(--mint)}
.drow.is-new{background:var(--green-600);color:var(--mint)}
.drow.is-rec{background:var(--green-800);color:var(--mint)}
.drow.is-drop{background:var(--green-900);color:var(--mint)}
.drow.is-ret{background:var(--mint)}
.drow.is-out{opacity:.72;text-decoration:line-through}

.cellflip{animation:cellflip .42s ease}
@keyframes cellflip{
  0%{transform:translateY(-8px) scale(.7)}
  60%{transform:translateY(0) scale(1.18)}
  100%{transform:none}
}
@keyframes pop{0%{transform:scale(.82)}60%{transform:scale(1.07)}100%{transform:none}}
.pop-in{animation:pop .38s ease}

.collapse-flash{animation:cflash .6s ease}
@keyframes cflash{
  0%{border-color:var(--bd-line)}
  40%{border-color:var(--bd-line-accent);background:var(--mint)}
  100%{border-color:var(--bd-line);background:var(--paper)}
}

.stamp{
  flex:none;margin-top:auto;display:flex;align-items:flex-start;gap:8px;padding:7px 10px;
  background:var(--green-900);color:var(--mint);font-size:var(--f-sm);font-weight:400;
  border:var(--bd) solid var(--bd-line);line-height:1.4;
  opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s;
}
.stamp.on{opacity:1;transform:none}
.stamp i{color:var(--green-500);margin-top:2px;flex:none}

/* ---------------- SCENE 3 — CLASSIFY ---------------- */
.rules{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;flex:none}
.rule{
  border:var(--bd) solid var(--bd-line);background:var(--paper);padding:6px 9px;
  font-size:var(--f-xs);font-weight:600;display:flex;align-items:center;gap:7px;line-height:1.3;
  min-width:0;
  transition:background .25s,color .25s,opacity .25s;
}
.rule span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rule i{color:var(--green-600)}
.rule.rule-1.active{background:var(--green-600);color:var(--mint)}
.rule.rule-2.active{background:var(--green-800);color:var(--mint)}
.rule.rule-3.active{background:var(--green-900);color:var(--mint)}
.rule.rule-4.active{background:var(--mint)}
.rule.active i{color:currentColor}
/* quy tắc đã qua: mờ vừa phải, không dùng opacity thấp gây khó đọc */
.rule.pass{opacity:.86;background:var(--mint)}

.chead{
  display:grid;align-items:center;gap:4px;padding:3px 9px;background:var(--mint);
  font-size:var(--f-xs);font-weight:600;text-transform:uppercase;white-space:nowrap;
  border-bottom:var(--bd) solid var(--bd-line);position:sticky;top:0;z-index:2;
  grid-template-columns:52px minmax(32px,1fr) 26px 28px minmax(96px,1.5fr) minmax(70px,1fr);
}
.crow{
  display:grid;align-items:center;gap:4px;padding:2px 9px;font-size:12px;
  font-variant-numeric:tabular-nums;border-left:var(--bd-accent) solid transparent;
  min-height:36px;
  grid-template-columns:52px minmax(32px,1fr) 26px 28px minmax(96px,1.5fr) minmax(70px,1fr);
}
.crow .cv{font-weight:600}
.crow .cf{font-weight:600}
.crow .cc,.crow .cp{text-align:center;font-weight:400}
.crow .rmatch{
  display:flex;flex-wrap:wrap;align-items:center;gap:2px 6px;
  font-size:var(--f-xs);font-weight:600;letter-spacing:0;line-height:1.4;
  padding:1px 0;text-align:left;
  opacity:0;overflow:hidden;color:var(--green-800);
  font-variant-numeric:tabular-nums;
  transition:opacity .22s,background .22s,color .22s,border-color .22s;
}
.crow .rmatch.on{opacity:1}
/* mỗi quy tắc là một chip riêng: viền nét đứt = không đúng, viền liền = đúng.
   Phải ghi kèm b.rw ở các trạng thái, nếu chỉ ghi .yes thì rule nét đứt phía trên
   có độ ưu tiên cao hơn (do có thêm selector b) và sẽ luôn thắng. */
.crow .rmatch b.rw{
  white-space:nowrap;font-weight:400;cursor:help;
  border:var(--bd) dashed var(--bd-line-mid);padding:0 3px;
}
.crow .rmatch b.rw.no{color:rgba(var(--ink-rgb),.68)}
.crow .rmatch b.rw.yes{
  color:var(--green-600);font-weight:600;
  border-style:solid;border-color:var(--bd-line-accent);
}
.crow .rmatch b.rw .sym{margin-left:3px;font-weight:600}
/* trên dòng đã tô màu: chip nằm trong ô nền tối hơn,
   viền và chữ chuyển sang mint để vẫn phân biệt được đúng / không đúng */
.crow.is-new .rmatch,
.crow.is-rec .rmatch,
.crow.is-drop .rmatch{
  background:rgba(var(--ink-rgb),.35);padding:1px 5px;
}
.crow.is-new .rmatch b.rw,
.crow.is-rec .rmatch b.rw,
.crow.is-drop .rmatch b.rw{border-color:rgba(var(--mint-rgb),.45)}
.crow.is-new .rmatch b.rw.yes,
.crow.is-rec .rmatch b.rw.yes,
.crow.is-drop .rmatch b.rw.yes{color:var(--mint);border-color:var(--mint)}
.crow.is-new .rmatch b.rw.no,
.crow.is-rec .rmatch b.rw.no,
.crow.is-drop .rmatch b.rw.no{color:var(--mint);font-weight:400;opacity:.9}
/* giữ đúng 1 dòng cao cho mỗi visitor */
#classList .crow{min-height:31px}
.crow .cs{font-weight:600;font-size:11px;letter-spacing:.04em;text-transform:uppercase}
.crow.testing{background:var(--mint)}
.crow.testing .cs::after{content:'đang xét';font-size:10px;opacity:.8;font-weight:400}
.crow.flash{background:var(--green-800);color:var(--mint)}
.crow.is-new{background:var(--green-600);color:var(--mint)}
.crow.is-rec{background:var(--green-800);color:var(--mint)}
.crow.is-drop{background:var(--green-900);color:var(--mint)}
.crow.is-ret{background:var(--mint)}
.crow.is-out{opacity:.72;text-decoration:line-through}

.mincounts{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;flex:none}
.mc{
  border:var(--bd) solid var(--bd-line);background:var(--paper);padding:6px 9px;
  display:flex;align-items:baseline;gap:8px;min-width:0;
}
.mc:nth-child(5){grid-column:span 2}
.mc b{font-size:20px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1.3;flex:none}
.mc span{
  font-size:var(--f-xs);font-weight:400;letter-spacing:.04em;text-transform:uppercase;
  line-height:1.3;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.mc-hit{animation:pop .4s ease}
.mc-new.on{background:var(--green-600);color:var(--mint)}
.mc-rec.on{background:var(--green-800);color:var(--mint)}
.mc-drop.on{background:var(--green-900);color:var(--mint)}
.mc-ret.on{background:var(--mint)}
.mc-out.on{background:var(--paper)}
/* khi ô được kích hoạt, số phải đổi sang mint nếu không sẽ trùng màu nền */
.mc-new.on b,.mc-rec.on b,.mc-drop.on b{color:var(--mint)}
.mc-ret.on b{color:var(--green-900)}
/* nhãn trên nền đậm: bỏ độ mờ để đủ tương phản */
.mc-new.on span,.mc-rec.on span,.mc-drop.on span{opacity:1}

/* ---------------- SCENE 4 — COUNTS ---------------- */
.bigcounts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;flex:none}
.bc{border:var(--bd) solid var(--bd-line);padding:11px 13px;display:flex;flex-direction:column;gap:2px;background:var(--paper)}
.bc i{font-size:var(--f-md);color:var(--green-600)}
.bc b{font-size:clamp(30px,4vw,46px);font-weight:600;line-height:1.3;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.bc span{font-size:var(--f-xs);font-weight:400;letter-spacing:.08em;text-transform:uppercase;opacity:.7}
.bc-new b{color:var(--green-600)}
.mc-rec b{color:var(--green-800)}
.bc-drop b{color:var(--green-800)}
.bc-arm{animation:pop .4s ease}

.groups{display:flex;flex-direction:column}
.grp{display:flex;align-items:center;gap:9px;padding:6px 10px;border-bottom:var(--bd-hair) solid var(--bd-line-soft);font-size:var(--f-sm)}
.grp:last-child{border-bottom:0}
.glabel{
  font-size:var(--f-xs);font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  padding:2px 7px;border:var(--bd) solid var(--bd-line);min-width:92px;text-align:center;flex:none;
}
.gitems{display:flex;flex-wrap:wrap;gap:5px}
.gitem{
  border:var(--bd) solid var(--bd-line);padding:0 6px;font-size:var(--f-xs);font-weight:600;background:var(--mint);
  opacity:0;transform:scale(.6);transition:opacity .26s,transform .26s;
}
.gitem.in{opacity:1;transform:none}
.gitem.hot{animation:pop .4s ease}
.gwhy{font-size:var(--f-xs);font-weight:400;text-transform:uppercase;letter-spacing:.05em;opacity:.8;margin-left:auto;flex:none}

/* ---------------- SCENE 5 — FORMULA ---------------- */
.formula{padding:16px;display:flex;flex-direction:column;gap:14px;flex:1;justify-content:space-around}
.f-row{display:flex;align-items:center;gap:10px;font-size:var(--f-lg)}
.f-label{font-weight:600;letter-spacing:.06em}
.f-eq{font-weight:400;opacity:.8}
.f-frac{display:inline-flex;flex-direction:column;align-items:center;padding:0 9px}
.f-num{padding:0 7px 3px;border-bottom:var(--bd) solid var(--bd-line);display:flex;gap:8px;align-items:center}
.f-den{padding-top:3px;display:flex;gap:6px}
.f-var{font-weight:400;opacity:.8;font-size:var(--f-md)}
.f-op{font-weight:600}
.f-val{
  font-weight:600;background:var(--mint);border:var(--bd) solid var(--bd-line);padding:0 8px;
  min-width:38px;text-align:center;font-variant-numeric:tabular-nums;
}
.f-val.fill{background:var(--green-600);color:var(--mint)}
.f-val.acc{background:var(--green-800);color:var(--mint);transform:scale(1.1);transition:transform .2s ease,background .2s ease}
.f-op.op-add{transition:color .2s ease,transform .2s ease}
.f-op.op-add.hot{color:var(--green-600);transform:scale(1.4)}
.fsrcs{display:flex;flex-direction:column;gap:5px;margin-left:4px}
.fsrc{
  display:inline-flex;align-items:center;gap:4px;font-style:normal;
  font-size:var(--f-xs);font-weight:600;letter-spacing:.02em;
  border:var(--bd) solid var(--bd-line);background:var(--mint);color:var(--green-800);padding:0 5px;
  opacity:0;transform:translateX(-7px);
  transition:opacity .28s ease,transform .28s ease;
}
.fsrc i{font-size:8.5px;color:var(--green-600)}
.fsrc.on{opacity:1;transform:none}
.f-out{
  font-weight:600;font-size:26px;background:var(--green-900);color:var(--mint);
  border:var(--bd) solid var(--bd-line);padding:1px 12px;font-variant-numeric:tabular-nums;
}
.branch{display:flex;flex-direction:column;flex:1;justify-content:space-around}
.br{padding:8px 10px;font-size:var(--f-sm);display:flex;align-items:center;gap:8px;border-bottom:var(--bd-hair) solid var(--bd-line-soft);line-height:1.4}
.br code{white-space:nowrap}
.br:last-child{border-bottom:0}
.br-no{opacity:.75}
.br-no i{color:var(--green-800)}
.br-yes{background:var(--mint);font-weight:600}
.br-yes i{color:var(--green-600)}
.br-note{border-top:var(--bd) solid var(--bd-line);background:var(--mint);align-items:flex-start;font-size:var(--f-sm)}
.br-note i{color:var(--green-600);margin-top:2px;flex:none}

/* ---------------- SCENE 6 — SCALE ---------------- */
.scale{padding:16px 16px 40px;position:relative;display:flex;flex-direction:column;justify-content:center;flex:1}
.scale-legend{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:var(--bd) solid var(--bd-line);margin-top:14px}
.scale-legend div{padding:8px 10px;border-right:var(--bd-hair) solid var(--bd-line-soft);font-size:var(--f-sm);line-height:1.45}
.scale-legend div:last-child{border-right:0}
.scale-legend b{display:block;font-size:var(--f-xs);font-weight:600;text-transform:uppercase;letter-spacing:.05em;margin-bottom:3px;color:var(--green-600)}
.scale-bar{display:flex;height:38px;border:var(--bd) solid var(--bd-line);overflow:hidden}
.zone{display:grid;place-items:center;font-size:var(--f-xs);font-weight:400;letter-spacing:.06em;text-transform:uppercase;transition:background .3s,color .3s}
.zone-low{flex:0 0 22.22%;background:var(--mint)}
.zone-high{flex:1;background:var(--paper)}
.zone.active{background:var(--green-600);color:var(--mint)}
.scale-ticks{position:relative;height:58px;margin-top:8px}
.stick{position:absolute;top:0;transform:translateX(-50%);text-align:center;width:56px}
.stick::before{content:'';display:block;width:var(--bd);height:9px;background:var(--green-900);margin:0 auto 3px}
.stick.edge-start{transform:none;text-align:left}
.stick.edge-start::before{margin:0 0 3px 0}
.stick.edge-end{transform:translateX(-100%);text-align:right}
.stick.edge-end::before{margin:0 0 3px auto}
.stick b{display:block;font-size:var(--f-xs);font-weight:600;font-variant-numeric:tabular-nums;line-height:1.3}
.stick i{display:block;font-size:var(--f-xs);font-weight:600;opacity:.8;font-style:normal;line-height:1.3}
.stick.lit::before{background:var(--green-600);height:13px}
.stick.lit b{color:var(--green-600)}
.stick.hot::before{background:var(--green-500);height:17px}
.stick.hot b,.stick.hot i{color:var(--green-600);opacity:1}
.scale-marker{
  position:absolute;bottom:10px;left:0;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:1px;
  transition:left var(--dur-marker,1.1s) cubic-bezier(.5,0,.2,1);
}
.scale-marker i{font-size:22px;color:var(--green-900);line-height:1}
.mktag{
  background:var(--green-900);color:var(--mint);border:var(--bd) solid var(--bd-line);
  padding:1px 8px;font-size:var(--f-xs);font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums;
}
.calc{padding:12px;display:flex;flex-direction:column;gap:9px;font-size:var(--f-md)}
.calc-row{border-left:var(--bd-accent) solid var(--bd-line-accent);padding-left:10px;font-variant-numeric:tabular-nums}
.calc-row b{color:var(--green-600)}
.score-panel{flex:none}
.score{
  font-size:clamp(42px,5.6vw,68px);font-weight:600;letter-spacing:-.03em;
  padding:6px 16px;font-variant-numeric:tabular-nums;color:var(--green-600);
}
.score.armed{animation:pop .5s ease}

/* ---------------- SCENE 7 — RESULT ---------------- */
/* bảng kết quả 5 cột: cho ô co được và số không tràn ra ngoài */
.tbl.result{table-layout:fixed;flex:1}
.tbl.result th{font-size:var(--f-xs);padding:7px 3px;text-align:center;letter-spacing:0;overflow-wrap:anywhere}
.tbl.result td{
  padding:clamp(14px,3.2vh,30px) 4px;text-align:center;font-size:clamp(24px,4.6vh,46px);font-weight:600;
  border-bottom:var(--bd) solid var(--bd-line);font-variant-numeric:tabular-nums;overflow-wrap:anywhere;
}
.tbl.result td.hl-cell{background:var(--green-600);color:var(--mint)}
.collegend{display:grid;grid-template-columns:repeat(5,1fr);border-top:var(--bd) solid var(--bd-line);margin-top:auto}
.collegend div{padding:7px;border-right:var(--bd-hair) solid var(--bd-line-soft);font-size:var(--f-xs);line-height:1.35}
.collegend div:last-child{border-right:0}
.collegend b{display:block;font-size:var(--f-xs);font-weight:600;color:var(--green-600);margin-bottom:2px;overflow-wrap:anywhere}
.refpanel{flex:none}
.refwrap{flex:none;overflow-x:auto}
.tbl.ref{font-size:var(--f-xs);min-width:352px}
.tbl.ref th,.tbl.ref td{text-align:center;padding:4px 2px;font-variant-numeric:tabular-nums;transition:background .3s,color .3s}
.tbl.ref th:first-child,.tbl.ref td:first-child{text-align:left;font-weight:600;width:108px}
.tbl.ref .hit{background:var(--green-600);color:var(--mint);font-weight:600}
.tbl.ref .hit-head{background:var(--green-600);color:var(--mint);font-weight:600}
.tbl.ref .hit-pulse{animation:hitpulse 1s ease 2}
@keyframes hitpulse{
  0%,100%{background:var(--green-600);color:var(--mint)}
  50%{background:var(--green-800);color:var(--mint);transform:scale(1.14)}
}
.insights{display:flex;flex-direction:column;flex:1;overflow:auto}
.ins{
  display:grid;grid-template-columns:138px 1fr;gap:9px;align-items:center;flex:1;
  padding:10px;border-bottom:var(--bd-hair) solid var(--bd-line-soft);font-size:var(--f-sm);
}
.ins:last-child{border-bottom:0}
.ins b{
  font-size:var(--f-xs);font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  border:var(--bd) solid var(--bd-line);padding:3px 6px;text-align:center;background:var(--mint);
}
.ins-a b{background:var(--green-600);color:var(--mint)}
.ins-b b{background:var(--green-800);color:var(--mint)}
.ins-c b{background:var(--green-900);color:var(--mint)}
.ins span{line-height:1.4}
.ins.ins-live{background:var(--mint)}
.ins.ins-live b{outline:var(--bd-focus) solid var(--bd-line-accent);outline-offset:calc(-1 * var(--bd-focus))}
.insfoot{
  flex:none;margin-top:auto;padding:7px 10px;border-top:var(--bd) solid var(--bd-line);background:var(--mint);
  font-size:var(--f-sm);display:flex;gap:7px;align-items:flex-start;line-height:1.4;
}
.insfoot i{color:var(--green-600);margin-top:2px}
.readrow{
  flex:none;display:flex;gap:9px;padding:9px 12px;background:var(--green-900);color:var(--mint);
  border:var(--bd) solid var(--bd-line);font-size:var(--f-sm);align-items:flex-start;
}
.readrow i{color:var(--green-500);margin-top:2px}
.readrow p{line-height:1.5}
.readrow b{color:var(--mint)}

/* ============ ĐỀ BÀI — tĩnh, chỉ visualize không animation ============ */
.brief{display:flex;flex-direction:column;gap:8px;flex:1;min-height:0}

.brief-hero{
  flex:none;border:var(--bd) solid var(--bd-line);background:var(--green-900);color:var(--mint);
  padding:11px 16px;
}
.brief-hero .eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:var(--f-xs);font-weight:600;letter-spacing:.16em;text-transform:uppercase;opacity:.85;
}
.brief-hero .eyebrow i{color:var(--green-500)}
.brief-hero h1{
  font-size:clamp(22px,3vw,36px);font-weight:600;line-height:1.1;letter-spacing:-.015em;margin-top:5px;
}
.brief-hero h1 em{font-style:normal;color:var(--mint);text-decoration:none}
.brief-hero .brief-sub{
  margin-top:7px;font-size:var(--f-md);opacity:.9;display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}
.brief-hero .brief-sub .sep{opacity:.75}

.brief-ask{
  flex:none;display:flex;gap:10px;align-items:flex-start;
  border:var(--bd) solid var(--bd-line);background:var(--mint);
  padding:9px 12px;font-size:var(--f-md);line-height:1.5;
}
.brief-ask i{color:var(--green-600);margin-top:2px;flex:none}
.brief-ask b{font-weight:600;color:var(--green-600)}

.brief-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:10px;min-height:0}
.brief-rows{display:flex;flex-direction:column;flex:1}
.brow{
  display:grid;grid-template-columns:18px 92px minmax(0,1fr);gap:8px;align-items:center;
  padding:5px 10px;border-bottom:var(--bd-hair) solid var(--bd-line-soft);
  font-size:var(--f-md);line-height:1.4;
}
.brow:last-child{border-bottom:0}
.brow>span:last-child{min-width:0}
/* số thứ tự của quy tắc phân loại: xét lần lượt 1 → 4 */
.bstep{
  display:grid;place-items:center;width:18px;height:18px;
  border:var(--bd) solid var(--bd-line-mid);
  font-size:var(--f-xs);font-weight:600;line-height:1;color:var(--green-800);
}
.bchip{
  font-size:var(--f-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  border:var(--bd) solid var(--bd-line);padding:3px 7px;text-align:center;
}
.chip-new{background:var(--green-600);color:var(--mint)}
.chip-rec{background:var(--green-800);color:var(--mint)}
.chip-drop{background:var(--green-900);color:var(--mint)}
.chip-ret{background:var(--mint);color:var(--green-900)}

.brief-qr{display:flex;flex-direction:column;gap:11px;padding:14px;flex:1;justify-content:center}
.brief-case{
  border:var(--bd) solid var(--bd-line);background:var(--mint);padding:8px 11px;
  font-size:var(--f-sm);display:flex;gap:8px;align-items:flex-start;line-height:1.45;
}
.brief-case i{color:var(--green-800);margin-top:2px;flex:none}

/* thang quy đổi tĩnh */
.brief-scale{padding:12px 14px;display:flex;flex-direction:column;gap:9px}
.bs-bar{display:flex;height:40px;border:var(--bd) solid var(--bd-line);overflow:hidden}
.bs-seg{
  display:flex;flex-direction:column;justify-content:center;gap:2px;padding:0 12px;
  font-size:var(--f-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;
}
.bs-seg span{font-size:var(--f-sm);font-weight:400;letter-spacing:0;text-transform:none}
.bs-low{flex:0 0 22.22%;background:var(--mint);color:var(--green-900)}
.bs-high{flex:1;background:var(--green-600);color:var(--mint)}
.bs-marks{position:relative;height:26px}
.bm{
  position:absolute;top:0;font-size:var(--f-sm);font-weight:600;white-space:nowrap;
  border:var(--bd) solid var(--bd-line);background:var(--paper);padding:2px 8px;
}
.bm-0{left:0}
.bm-1{left:22.22%;transform:translateX(-50%)}
.bm-2{right:0}
.bs-formulas{display:grid;grid-template-columns:repeat(2,1fr);gap:7px}
.bs-f{
  border:var(--bd) solid var(--bd-line);background:var(--paper);padding:8px 10px;
  display:flex;flex-direction:column;gap:4px;font-size:var(--f-sm);min-width:0;
}
.bs-f b{font-size:var(--f-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--green-600)}
.bs-f code{font-size:var(--f-md);color:var(--green-900);white-space:normal;line-height:1.4}
.bs-clamp{
  grid-column:span 2;background:var(--mint);
  flex-direction:row;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;
}
.bs-clamp code{font-size:var(--f-sm)}
.bs-clamp .sep{opacity:.75}

/* ============ TỐI ƯU · Index (chạy trên dữ liệu) ============ */
.opt-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;min-height:0}

.idx-rows{padding:2px 0}
.ir{
  display:grid;grid-template-columns:40px 42px 1fr auto;align-items:center;gap:6px;
  padding:0 9px;height:19.5px;font-size:12px;line-height:1.3;font-variant-numeric:tabular-nums;
  border-left:var(--bd-accent) solid transparent;
  transition:background .24s,border-color .24s,opacity .24s;
}
.ir .ir-id{color:var(--green-600)}
.ir .ir-v{font-weight:600}
.ir .ir-d{text-align:right}
.ir .ir-tag{
  font-size:var(--f-xs);font-weight:600;letter-spacing:.03em;white-space:nowrap;line-height:1.3;
  border:var(--bd) dashed var(--bd-line-mid);padding:0 3px;opacity:0;
  transition:opacity .24s,background .24s,color .24s,border-color .24s;
}
.ir.grp-start{border-top:var(--bd) solid var(--bd-line-accent)}
.ir.grp-end{border-bottom:var(--bd) solid var(--bd-line-accent)}
.ir.in-group{background:var(--mint);border-left-color:var(--bd-line-accent)}
.ir.inrange{background:var(--mint);color:var(--ink)}
.ir.inrange .ir-d{color:var(--ink)}
.ir.outrange{background:transparent;color:var(--green-800)}
.ir.outrange .ir-id,.ir.outrange .ir-d{color:var(--green-800)}
.ir.outrange .ir-v{font-weight:400}
.ir.skipped .ir-d{text-decoration:line-through}
.ir.minrow{border-left-color:var(--bd-line-accent)}
.ir.minrow .ir-tag{
  opacity:1;border-style:solid;border-color:var(--green-600);
  background:var(--green-600);color:var(--mint);
}

.idx-sum{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;flex:none}
.isx{
  border:var(--bd) solid var(--bd-line);background:var(--paper);padding:9px 12px;
  display:flex;flex-direction:column;gap:2px;
}
.isx b{font-size:clamp(22px,2.8vw,32px);font-weight:600;line-height:1.3;font-variant-numeric:tabular-nums;color:var(--green-800)}
.isx span{font-size:11px;font-weight:400;letter-spacing:.05em;text-transform:uppercase;opacity:.8}
.isx-min b{color:var(--green-600)}
.isx-scan b{color:var(--green-900)}
.isx-hit{animation:pop .4s ease}

/* ============ TỐI ƯU · Số lần quét ============ */
.opt-scan{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;min-height:0}

/* 3 lượt quét riêng rẽ trên bảng gốc + lượt ghép kết quả */
.passes{display:flex;flex-direction:column;flex:1;min-height:0;overflow-y:auto}
.pass{
  flex:1 1 auto;min-height:62px;display:flex;flex-direction:column;justify-content:center;gap:6px;
  padding:8px 10px;border-bottom:var(--bd-hair) solid var(--bd-line-soft);
  border-left:var(--bd-accent) solid transparent;
  transition:background .25s,border-color .25s;
}
.pass:last-child{border-bottom:0}
.pass.act{background:var(--mint);border-left-color:var(--bd-line-accent)}
.pass-hd{display:flex;align-items:center;gap:8px;font-size:var(--f-sm);line-height:1.4}
.pass-hd>span:first-child{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pass-hd>span:first-child b{font-weight:600}
.pass-c{
  font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--green-800);white-space:nowrap;flex:none;
}
.pass-c b{font-size:var(--f-md);font-variant-numeric:tabular-nums;color:var(--green-600)}
.pstrip{display:flex;flex-wrap:wrap;gap:2px}
.pcell{
  flex:0 0 calc((100% - 18px) / 10);height:25px;
  display:flex;align-items:center;justify-content:center;
  border:var(--bd) solid var(--bd-line-soft);background:var(--paper);
  font-size:12px;line-height:1.3;font-variant-numeric:tabular-nums;color:var(--green-900);
  transition:background .2s,color .2s,border-color .2s;
}
.pcell.read{border-color:var(--bd-line-mid);background:var(--mint)}
.pcell.keep{background:var(--green-600);border-color:var(--green-600);color:var(--mint);font-weight:600}

/* lượt ghép: ba kết quả của ba CTE gộp lại */
.jchips{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0}
.jchip{
  font-size:11px;font-weight:600;letter-spacing:.03em;white-space:nowrap;
  border:var(--bd) solid var(--bd-line-mid);padding:0 6px;line-height:19px;color:var(--green-800);
}
.jchip.jout{background:var(--green-600);border-color:var(--green-600);color:var(--mint)}
.jchips i{color:var(--green-500);font-size:11px}
.pass-join .pass-c b{color:var(--green-600)}

/* một lượt quét duy nhất, tích lũy theo visitor */
.acc-tbl{table-layout:fixed}
.opt-scan .panel>.scroll{overflow-x:hidden}
.acc-tbl th{white-space:normal;overflow-wrap:break-word;letter-spacing:0;padding:4px 6px;font-size:var(--f-xs);line-height:1.3}
.acc-tbl th:nth-child(1){width:19%}
.acc-tbl th:nth-child(2){width:33%}
.acc-tbl th:nth-child(3){width:25%}
.acc-tbl th:nth-child(4){width:23%}
.acc-tbl td{padding:5px 6px;transition:background .25s,color .25s}
.acc-tbl th:not(:first-child),.acc-tbl td:not(:first-child){text-align:right}
.acc-tbl td.vv{font-weight:600;transition:background .2s,color .2s}
.acc-tbl tr.hit td.vv{background:var(--green-600);color:var(--mint)}
.acc-tbl tr.arow{opacity:0;transform:translateX(-5px);transition:opacity .28s,transform .28s}
.acc-tbl tr.arow.in{opacity:1;transform:none}
.acc-tbl td.afirst{color:var(--green-800)}
.acc-tbl td.afirst.set{background:var(--mint);color:var(--green-900);font-weight:600}
.acc-tbl td.acur,.acc-tbl td.aprev{color:var(--green-800)}
.acc-tbl td.on1{background:var(--mint);color:var(--green-600);font-weight:600}
.acc-note{
  display:flex;align-items:center;gap:8px;padding:7px 9px;
  font-size:var(--f-sm);border-top:var(--bd) solid var(--bd-line);
}
.acc-note i{color:var(--green-500)}

.scan-foot{
  display:flex;align-items:center;gap:8px;flex:none;
  padding:6px 10px;background:var(--mint);border-top:var(--bd) solid var(--bd-line);
  font-size:var(--f-sm);
}
.scan-foot i{color:var(--green-500)}
.scan-foot span{flex:1;min-width:0}
.scan-foot b{
  font-size:var(--f-lg);font-weight:600;font-variant-numeric:tabular-nums;color:var(--green-800);
}
.scan-foot.bad b{color:var(--green-900)}

/* bốn kết luận rút ra từ phép so sánh */
.opt-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;flex:none}
.ofx{
  border:var(--bd) solid var(--bd-line);background:var(--paper);padding:7px 10px;
  display:flex;align-items:center;gap:9px;
}
.ofx b{
  font-size:var(--f-xl);font-weight:600;line-height:1.3;flex:none;
  font-variant-numeric:tabular-nums;color:var(--green-800);
}
.ofx span{font-size:11px;letter-spacing:.04em;line-height:1.4}
.ofx-t b{font-size:var(--f-lg)}
.ofx-t{border-color:var(--bd-line-accent);background:var(--mint)}
.ofx.on b{color:var(--green-600)}
.ofx.snap{animation:ofpulse .7s ease 2}
@keyframes ofpulse{
  0%,100%{background:var(--paper)}
  50%{background:var(--green-600);color:var(--mint)}
}

/* ---------------- RESPONSIVE ----------------
   Mốc chính: 1250 (bớt chỗ cho progress) · 1100 (code bắt đầu chật)
   · 1000 (grid về 1 cột) · 900 (HUD bỏ progress) · 760 (HUD bỏ dots,
   sidebar xếp trên) · 640 (HUD chỉ còn nút điều khiển) */
@media (max-width:1250px){
  .hud-mid{max-width:340px}
}
/* chưa đủ chỗ cho tên thương hiệu trên 1 dòng → cho xuống dòng
   thay vì tràn đè lên khu vực tiến trình và nút điều khiển */
@media (max-width:1100px){
  .brand{white-space:normal;letter-spacing:.04em;overflow:visible;text-overflow:clip}
  .hud-left{align-items:center}
}
/* sidebar hẹp dần: code chuyển sang ngắt dòng thay vì cuộn ngang */
@media (max-width:1100px){
  .cl{padding:1px 7px}
  .cl .ln{min-width:15px}
  .cl .lc{white-space:pre-wrap;overflow-wrap:anywhere}
}
@media (max-width:1000px){
  .app{grid-template-columns:34% 66%}
  .grid-model,.grid-scan,.grid-class,.grid-qr,.grid-scale,.grid-result,.brief-grid,.opt-grid,.opt-scan{grid-template-columns:minmax(0,1fr)}
  .rules{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .scene{overflow:auto}
  /* dải 10 chấm cần ~227px: dưới 1000px không còn đủ chỗ cùng lúc với
     tên thương hiệu và các nút, nên ẩn đi và giữ thanh tiến trình + số cảnh */
  .dots{display:none}
  /* mỗi khối xếp dọc nên cần chiều cao tối thiểu để không bị bóp;
     min-width:0 để khối co theo bề ngang thay vì tràn ra ngoài */
  .grid-model>*,.grid-scan>*,.grid-class>*,.grid-qr>*,.grid-scale>*,.grid-result>*,
  .brief-grid>*,.opt-grid>*,.opt-scan>*{min-height:180px;min-width:0}
  .fill{flex:none}
}
@media (max-width:900px){
  /* giữ thanh tiến trình (co giãn được) thay vì bỏ hẳn */
  .hud-mid{flex:1;min-width:0}
}
@media (max-width:760px){
  /* dưới 760: không đủ chỗ cho 2 cột → sidebar lên trên, scene xuống dưới */
  .app{grid-template-columns:1fr;grid-template-rows:minmax(0,36%) minmax(0,64%)}
  /* cảnh tĩnh ẩn sidebar: nếu vẫn giữ 2 hàng thì scene bị nhốt ở hàng 36%
     còn hàng 64% bỏ trống → trả về 1 hàng cho scene chiếm hết chiều cao */
  .app.nocode{grid-template-rows:minmax(0,1fr)}
  .sidebar{border-right:0;border-bottom:var(--bd) solid var(--bd-line)}
  .scene{padding:12px 12px}
  .scale{padding:12px 12px 36px}
}
@media (max-width:640px){
  :root{--f-xl:19px}
  /* HUD xuống 2 hàng trên điện thoại:
     - hàng 1: tên thương hiệu (giữ nguyên như yêu cầu thiết kế)
     - hàng 2: số cảnh + tốc độ + 4 nút điều khiển
     Thanh tiến trình bị bỏ vì số cảnh đã cho biết vị trí, đổi lại đủ chỗ
     cho tên thương hiệu và bộ điều khiển tốc độ. */
  .hud{
    height:auto;flex-wrap:wrap;align-items:center;
    padding:6px 10px;gap:5px 8px;
  }
  .hud-left{order:1;flex:1 1 100%;min-width:0;font-size:var(--f-xs);letter-spacing:.05em}
  .hud-mid{order:2;flex:1 1 auto;min-width:0;max-width:none;gap:8px}
  .hud-right{order:3;flex:0 0 auto;gap:5px}
  .dots,.stepinfo,.prog{display:none}
  .counter{display:inline}
  .speeds{display:flex}
  .sp{min-width:26px;padding:0 4px}
  .btn{width:28px;height:26px}
  .btn-play{width:34px}
  .scene{padding:10px 10px}
  .brief-grid,.opt-grid,.opt-scan,.grid-model,.grid-scan,.grid-class,.grid-qr,.grid-scale,.grid-result,.opt-facts{grid-template-columns:minmax(0,1fr)}
  .rules{grid-template-columns:minmax(0,1fr)}
  .brief-hero h1{font-size:clamp(20px,7vw,26px)}
  /* 5 cột số trên màn hẹp: thu cỡ số để không tràn ngang */
  .tbl.result th{padding:6px 2px}
  .tbl.result td{font-size:clamp(18px,4.6vw,28px);padding:10px 2px;overflow-wrap:anywhere}
  .score{font-size:clamp(30px,9vw,44px)}
}

/* máy rất hẹp (≤ 340px): bỏ số cảnh để nhường chỗ cho nút điều khiển */
@media (max-width:340px){
  .counter{display:none}
  .hud{padding:5px 8px;gap:4px 6px}
}

/* ---------- ĐIỆN THOẠI NẰM NGANG (thấp + hẹp): xếp dọc làm cả hai khối
   đều không đủ chỗ, nên quay lại 2 cột như màn hình lớn ---------- */
@media (max-width:760px) and (max-height:520px){
  .app{grid-template-columns:minmax(0,32%) minmax(0,68%);grid-template-rows:minmax(0,1fr)}
  .app.nocode{grid-template-columns:minmax(0,1fr)}
  .sidebar{border-right:var(--bd) solid var(--bd-line);border-bottom:0}
}

/* ---------- ĐIỆN THOẠI (≤ 480px): các bảng nhiều cột phải tự cuộn ngang
   hoặc thu cột, không được đẩy tràn ra ngoài khung ---------- */
@media (max-width:480px){
  /* bảng tham chiếu 10 cột: giữ nguyên cỡ chữ, cho cuộn ngang trong khung */
  .refwrap{border-top:var(--bd) solid var(--bd-line)}
  /* dòng định nghĩa phân loại: màn hẹp không đủ chỗ cho 3 cột nên tách thành
     2 hàng — hàng 1 là số thứ tự + nhãn nhóm, hàng 2 là điều kiện (đủ bề ngang) */
  .brow{
    display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;
    padding:6px 8px;
  }
  .brow>span:last-child{flex:1 1 100%;align-self:flex-start}
  .bstep{order:1}
  .bchip{order:2}
  /* trục thời gian 5 tháng: cho cuộn ngang thay vì bóp chữ */
  .tl{grid-template-columns:repeat(5,minmax(86px,1fr));overflow-x:auto}
  .tl-month{padding:6px 8px}
  /* bảng gán nhãn 6 cột: thu cột cố định, cho ô "khớp quy tắc" xuống dòng */
  .chead,.crow{
    gap:3px;padding:3px 7px;
    grid-template-columns:40px minmax(24px,1fr) 24px 26px minmax(62px,1.35fr) minmax(50px,1fr);
  }
  /* chữ hoa giãn rộng hơn chữ thường ~15% → ở cột hẹp sẽ tràn sang ô bên cạnh */
  .chead{text-transform:none}
  .crow{padding:2px 7px}
  /* chip quy tắc: cho xuống dòng giữa các chip, không cắt giữa chip */
  .crow .rmatch{gap:1px 6px;padding:1px 5px}
  .crow .cs{font-size:var(--f-xs);letter-spacing:0}
  .crow.testing .cs::after{display:none}
  /* thang đo: bỏ giãn chữ và để thanh cao theo nội dung thay vì cắt nhãn */
  .scale-bar{height:auto;min-height:38px}
  .zone{padding:6px 4px;letter-spacing:0;line-height:1.35}
  /* ba bộ đếm: thu padding, cho nhãn dài tự ngắt dòng */
  .bigcounts{gap:6px}
  .bc{padding:8px 9px}
  .bc b{font-size:clamp(24px,7.4vw,34px)}
  .bc span{letter-spacing:0;overflow-wrap:anywhere}
  /* công thức: đưa nhãn nguồn xuống dòng riêng thay vì tràn sang phải */
  .formula{padding:10px;gap:11px}
  .f-row{flex-wrap:wrap;gap:7px}
  .fsrcs{flex-direction:row;flex-wrap:wrap;width:100%;margin-left:0;gap:4px}
  .f-val{min-width:32px;padding:0 6px}
  /* huy hiệu gợi ý (cur/prev) trong cảnh quét: thu lại cho vừa dòng 24px */
  .rrow{grid-template-columns:32px 32px 1fr 56px 52px;gap:4px;padding:2px 7px}
  .rrow .pbadge,.rrow .cflag{padding:0 1px;letter-spacing:0}
}

/* ---------- ĐIỆN THOẠI NHỎ (≤ 360px) ---------- */
@media (max-width:360px){
  :root{--f-md:12.5px}
  .scene{padding:8px 8px}
  /* HUD vẫn 2 hàng: giữ padding dọc, chỉ thu bề ngang */
  .hud{padding:5px 8px;gap:4px 6px}
  .sp{min-width:24px;padding:0 3px}
  .btn{width:26px;height:24px}
  .btn-play{width:31px}
  .chead,.crow{
    padding:3px 5px;
    grid-template-columns:38px minmax(20px,.8fr) 22px 24px minmax(48px,1.1fr) minmax(64px,1fr);
  }
  .crow{padding:2px 5px}
  .rrow{grid-template-columns:28px 28px 1fr 50px 46px;gap:3px;padding:2px 5px}
  .glabel{min-width:74px;letter-spacing:0;padding:2px 5px}
  .grp{gap:6px;padding:6px 7px}
  .mincounts{gap:4px}
  .mc{padding:5px 7px;gap:5px}
  .mc b{font-size:17px}
  .opt-facts{gap:6px}
  .ofx{padding:6px 8px;gap:6px}
  .hud-left{letter-spacing:.04em}
}

@media (max-height:820px){
  :root{--f-md:12.5px;--f-lg:14px;--f-xl:19px}
  .scale{padding:12px 14px 34px}
}
@media (max-height:700px){
  :root{--f-xl:17px;--hud:50px}
  .note{font-size:var(--f-xs)}
  .tbl.result td{padding:10px 4px}
  .score{font-size:clamp(34px,4.6vw,52px)}
  .mx-cell{height:20px}
  .mx-group{margin-bottom:3px}
  .pass{min-height:56px}
}
/* màn hình thấp + ngắt dòng: bỏ chiều cao tối thiểu để tránh phải cuộn dài */
@media (max-height:820px) and (min-width:1001px){
  .pass{min-height:0}
}