/* THU MUA XANH · lượt bố cục (26/10/2026) — giữ đủ nội dung, mỗi nhịp một ý, con số chính to nhất.
   1. Sân khấu sạch: bỏ dòng mục nhỏ phía trên tiêu đề khi trình chiếu (chương đã ở HUD, mục/bảng ở dòng Nguồn),
      nút và gợi ý điều khiển chỉ hiện khi rê chuột (body.mouse-on do js/wow.js bật).
   2. Bỏ vạch màu dọc cạnh khối và chữ tô gradient; dùng màu nhãn, khoảng trắng và cỡ chữ để nhấn.
   3. Cảnh 07 chia nhịp; cảnh 11 đưa ảnh thật thành trọng tâm; câu chốt các cảnh 06, 08, 10 to và rõ hơn. */

/* ---------- 1. sân khấu sạch ---------- */
body.present .cn .cn-hd .eyebrow { display: none; }
body.present .cn .cn-hd { top: calc(var(--u) * 6.6); }

body.present:not(.mouse-on) :is(.cn1-go, .cx-hint, .q3-tools, .q3 .cx-seg, .q3-drag, .q4-ph, .z5-all, .z5i-cmp, .z7-sc, .z7-reset, .z10-run, .q11-tools, .q11-zb, .z8-refb) { opacity: 0 !important; }
body.present :is(.cn1-go, .cx-hint, .q3-tools, .q3 .cx-seg, .q3-drag, .q4-ph, .z5-all, .z5i-cmp, .z7-sc, .z7-reset, .z10-run, .q11-tools, .q11-zb, .z8-refb) { transition-property: opacity, background-color, color, border-color, transform, box-shadow; transition-duration: .45s; }

/* ---------- 2. vạch dọc và chữ gradient ---------- */
.cn1-sub { border-left: 0; padding-left: 0; color: var(--ink2); }
.cn1-sub::before { content: ''; display: block; width: calc(var(--u) * 2.4); height: 3px; margin-bottom: calc(var(--u) * .8); border-radius: 2px; background: var(--lime); }
.q4-res { border-left: 0; padding-left: 0; }
.cn11-q, .q11 .cn11-q { border-left: 0; padding-left: 0; }
.z5-cl, .z5-cl.is-diff { box-shadow: 0 calc(var(--u) * .5) calc(var(--u) * 1.2) rgba(15, 42, 34, .14); }
.z5-cl small::before { content: ''; display: inline-block; width: .6em; height: .6em; margin-right: .45em; border-radius: 50%; background: #4E6B17; vertical-align: .05em; }
.z5-cl.is-diff small::before { background: #B4532A; }
.z7-spot { box-shadow: none; }
.z9-det { border-left: 0; box-shadow: 0 0 0 1.5px rgba(201, 174, 107, .55), 0 calc(var(--u) * 1) calc(var(--u) * 2) rgba(15, 42, 34, .12); }
.z10-ex li { box-shadow: 0 0 0 1px rgba(169, 81, 44, .35), 0 calc(var(--u) * .5) calc(var(--u) * .9) calc(var(--u) * -.4) rgba(15, 42, 34, .2); }
.z8-hn b { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--lime); }

/* ---------- 3a. cảnh 07: mỗi nhịp một ý ----------
   nhịp 0: bảng xếp hạng + khoảng cách Areca–Hapobe · nhịp 1–2: giả định của Hapobe · nhịp 3: quyết định, lý do và TCO */
body.present .z7:not(.at3) .z7-why { display: none; }
body.present .z7:not(.at1):not(.is-sim) .z7-asm { display: none; }
body.present .z7 .z7-tco { transition: opacity .6s var(--ez); }
body.present .z7:not(.at3) .z7-tco { opacity: 0; }
body.present .z7:not(.at1) .z7-ins { top: calc(var(--u) * 17); }
body.present .z7:not(.at1):not(.is-sim) .z7-dn { font-size: calc(var(--u) * 4.4); }
body.present .z7:not(.at1):not(.is-sim) .z7-dl { font-size: var(--t-md); }
.z7-dec p:not(.cx-lbl) { font-size: var(--t-lg); line-height: 1.3; }
.z7-tco { font-size: calc(var(--u) * 1.2) !important; color: var(--ink2) !important; }

/* ---------- 3b. cảnh 11: ảnh thật là trọng tâm, mô hình 3D là sơ đồ phụ ---------- */
.q11 .cn11-view { left: calc(var(--u) * 6); top: calc(var(--u) * 12.2); width: calc(var(--u) * 25); height: calc(var(--u) * 35); border-radius: calc(var(--u) * .5); }
.q11-slot, .q11-pad { left: calc(var(--u) * 33.5); top: calc(var(--u) * 12.2); width: calc(var(--u) * 27); height: calc(var(--u) * 26); }
.q11 .cn11-list { left: calc(var(--u) * 34); top: calc(var(--u) * 39.4); width: calc(var(--u) * 26); grid-template-columns: 1fr 1fr; column-gap: calc(var(--u) * 1.2); }
.q11 .cn11-hs { font-size: var(--t-sm); padding-top: calc(var(--u) * .3); padding-bottom: calc(var(--u) * .3); }
.q11 .cn11-list .cn11-hs:nth-last-child(2) { border-bottom: inherit; }
.q11-tools { left: calc(var(--u) * 34) !important; top: calc(var(--u) * 46.6) !important; gap: calc(var(--u) * 1.2); }
.q11-chip { left: calc(var(--u) * 63) !important; top: calc(var(--u) * 49.4) !important; }
.q11 .cn11-pn { left: calc(var(--u) * 63); top: calc(var(--u) * 12.2); width: calc(var(--u) * 31); gap: calc(var(--u) * 1.4); }
.q11 .cn11-pt { font-size: calc(var(--u) * 2.6); line-height: 1.05; }
.q11 .cn11-q { gap: calc(var(--u) * .35); }
.q11 .cn11-q p { font-size: var(--t-md); line-height: 1.32; }
.q11 .cn11-q .cx-lbl { display: inline-flex; align-items: center; gap: .55em; }
.q11 .cn11-q .cx-lbl::before { content: ''; width: .65em; height: .65em; border-radius: 50%; background: currentColor; }
.q11 .cn11-q.q3 p { color: var(--ink); font-weight: 600; }
.q11 .cn11-tm { font-size: var(--t-sm); }

/* ---------- 3c. câu chốt to và rõ ---------- */
/* cảnh 06: quy tắc chấm từng tiêu chí chỉ hiện khi bấm vào một bình (phần phản biện); khi trình chiếu chỉ còn bình, tổng điểm và công thức */
body.present .q6 .q6-rd { transition: opacity .4s var(--ez); }
body.present .q6:not(.is-pick) .q6-rd { opacity: 0; }
.q6-sum .q6-ar b, .q6-ar .q6-tot { font-size: calc(var(--u) * 3.2) !important; letter-spacing: -.03em; }
.z8-money, .z8-hero { top: calc(var(--u) * 28.6) !important; }
.z8-lim { top: calc(var(--u) * 46.9) !important; font-size: var(--t-md) !important; color: var(--ink2) !important; line-height: 1.35; }
.z8-lim b { color: #F0B08F !important; }
.z10-res .cn10-res { font-size: var(--t-lg) !important; }
/* cảnh 08: dòng tiền chỉ hiện khi ba ảnh đã thu gọn xong (ảnh lớn hơn ở nhịp đầu) */
body.present .q8.at1 .z8-money { transition: opacity .6s var(--ez) .8s, transform .8s var(--ez) .8s, visibility 0s; }