/* ══ TRÌNH XEM CHART ══ */
/* #nsys-live (nsys_serve.py) để z-index:99999 nên nó nổi ĐÈ lên lớp phủ chart.
   Ẩn trong lúc xem chart — chart đã có chip LIVE riêng ở thanh công cụ. */
body.nsc-open #nsys-live{display:none!important}
/* ══════════════════════════════════════════════════════════════════════════
   BẢN MÁY TÍNH — PHÓNG CHỮ

   Mọi luật dưới đây đều nằm sau '#nsChart.desk' nên bản điện thoại KHÔNG đọc tới.
   Lý do phóng: người dùng máy tính ngồi xa màn hình hơn điện thoại 2-3 lần, mà cỡ
   chữ trước nay lấy chung cho cả hai — hậu quả của việc gộp một bộ CSS.
   ══════════════════════════════════════════════════════════════════════════ */
#nsChart.desk .nsc-tk{font-size:24px}
#nsChart.desk .nsc-x{font-size:22px}
#nsChart.desk .nsc-pn{font-size:12px}
#nsChart.desk .nsc-star{font-size:14px}
#nsChart.desk .nsc-last{font-size:23px}
#nsChart.desk .nsc-chg{font-size:16px}
#nsChart.desk .nsc-kl{font-size:16px}
#nsChart.desk .nsc-day2{font-size:15px}
#nsChart.desk .nsc-buy{font-size:12px;padding:4px 9px}
#nsChart.desk .nsc-tl{font-size:12px;padding:6px 12px}
#nsChart.desk .nsc-leg{font-size:12.5px;gap:16px}
#nsChart.desk .nsc-foot2{font-size:13px;min-height:32px}
#nsChart.desk .nsc-fbrand{font-size:11.5px}
#nsChart.desk .nsc-i{font-size:13px}
#nsChart.desk .nsc-side .nsc-day{font-size:14px}
#nsChart.desk .nsc-side .nsc-h .t{font-size:13px}
#nsChart.desk .nsc-side .nsc-h .n{font-size:20px}
#nsChart.desk .nsc-side .nsc-h .note{font-size:15px}
#nsChart.desk .nsc-side .nsc-pv{font-size:15px;padding:9px 6px}
#nsChart.desk .nsc-say{font-size:15px;line-height:1.7}
#nsChart.desk .nsc-rejnote{font-size:14.5px;line-height:1.7}
#nsChart.desk .nsc-warnbox{font-size:14px}
#nsChart.desk .kn-day{font-size:14px}
#nsChart.desk .kn-st{font-size:17px}
#nsChart.desk .kn-rs{font-size:13px}
#nsChart.desk .kn-rs b{font-size:20px}
#nsChart.desk .kn-tier{font-size:12px}
#nsChart.desk .kn-trig{font-size:16px}
#nsChart.desk .kn-desc{font-size:15px;line-height:1.75}
#nsChart.desk .kn-chip{font-size:14px;padding:8px 12px}
#nsChart.desk .kn-foot{font-size:13px}
#nsChart.desk .ik{font-size:12.5px}
#nsChart.desk .nsc-msg{font-size:16px}
/* ══════════════════════════════════════════════════════════════════════════
   CỘT PHẢI BẢN MÁY TÍNH — THIẾT KẾ LẠI

   Nguyên tắc: cột này là PHẦN TIẾP NỐI của dashboard, không phải một mảnh dán vào.
   Nên mượn nguyên ngôn ngữ đã có ở trang chính:
     · tiêu đề khối = số mono VÀNG + tên SERIF + ghi chú mono canh phải  (.sec-h)
     · tên khối lấy ĐÚNG chữ của dashboard: "Thoả mãn điều kiện mua", "Watchlist"
     · bảng: hàng tiêu đề mono 9,5px giãn chữ, số canh phải, chữ số đều bề ngang
     · dải xám ấm --ink / --ink-soft / --ink-faint / --ink-dim đúng bốn cấp

   Đảo trọng số của khối điều kiện: ĐẠT thì lùi lại, THIẾU mới nổi lên. Trước đây
   mọi ô đều là nút viền đậm nên 16 ô hét cùng lúc, mắt không biết nhìn đâu — mà
   thông tin cần đọc chỉ là "thiếu cái gì".

   MỌI luật đều sau '#nsChart.desk' -> bản điện thoại không đọc tới một dòng nào.
   ══════════════════════════════════════════════════════════════════════════ */
#nsChart.desk .nsc-side{width:392px;padding:22px 22px 28px}
/* ══ ĐÃ GHIM BAR ══ phải thấy rõ là số đang ĐỨNG YÊN, nếu không người dùng tưởng
   chart chết. Viền vàng quanh vùng vẽ + nhãn ở góc. */
#nsc-pinbadge{display:none}
#nsChart.desk #nsc-pinbadge{display:block;position:absolute;left:12px;top:96px;z-index:6;
  padding:4px 10px;border:1px solid rgba(201,162,76,.45);border-radius:999px;
  background:rgba(201,162,76,.12);pointer-events:none;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;color:var(--gold,#C9A24C)}
#nsChart.desk #nsc-pinbadge[hidden]{display:none}
#nsChart.desk.pinned .nsc-stage{box-shadow:inset 0 0 0 1px rgba(201,162,76,.28)}

/* ── dòng ngữ cảnh + tiêu đề ── */
.sd-ctx,.sd-title{display:none}
#nsChart.desk .sd-ctx{display:flex;align-items:baseline;gap:10px;
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--ink-dim)}
#nsChart.desk .sd-tk{color:var(--ink-soft);letter-spacing:.14em}
#nsChart.desk .sd-st{margin-left:auto;font-size:11.5px}
#nsChart.desk .sd-title{display:block;font-family:var(--serif);font-size:25px;
  line-height:1.15;color:var(--ink);margin:7px 0 20px}

/* ── khối điều kiện: nhãn nhóm + số đếm ── */
/* Hàng tiêu đề nhóm: nhãn TRÁI (không được xuống dòng) · số PHẢI.
   Trước đây nhãn, số và ghi chú cùng chen một hàng nên "BẮT BUỘC" gãy làm hai
   dòng. Nay chỉ hai phần tử, nhãn nowrap, số canh phải — hàng luôn thẳng. */
#nsChart.desk .nsc-side .nsc-h{display:flex;align-items:baseline;
  margin:0 0 10px;padding:0;border:none}
#nsChart.desk .nsc-side .nsc-h .t{font-family:var(--mono);font-size:10.5px;
  letter-spacing:.2em;color:var(--ink-dim);white-space:nowrap}
#nsChart.desk .nsc-side .nsc-h .n{margin-left:auto;font-family:var(--mono);
  font-size:16px;color:var(--ink-soft);letter-spacing:.02em;
  font-variant-numeric:tabular-nums;white-space:nowrap}
/* Dòng "thiếu P1 · V1 · …" ẨN trên máy tính: 16 ô xanh/đỏ đã nói đủ, lặp lại bằng
   chữ chỉ làm hàng tiêu đề dài ra rồi xuống dòng — chính là chỗ "BẮT / BUỘC" gãy
   làm đôi. Bản điện thoại GIỮ dòng này vì ở đó ô nhỏ, đọc chữ nhanh hơn. */
#nsChart.desk .nsc-side .nsc-h .note{display:none}

/* ── thước đo phân đoạn: đọc số đạt bằng mắt, không phải đếm ô ── */
.sd-meter{display:none}
#nsChart.desk .sd-meter{display:flex;gap:3px;margin:0 0 11px}
#nsChart.desk .sd-meter i{flex:1;height:3px;border-radius:2px;background:#1E2025}
#nsChart.desk .sd-meter i.on{background:var(--safe,#1FC98A)}
#nsChart.desk #nsc-smeter i.on{background:var(--gold,#C9A24C)}

/* ── ô điều kiện: ĐẠT lùi lại, THIẾU nổi lên ── */
#nsChart.desk .nsc-side .nsc-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:5px;margin:0 0 8px}
#nsChart.desk .nsc-side .nsc-pv{display:flex;align-items:center;justify-content:space-between;
  gap:5px;height:31px;padding:0 9px;border-radius:5px;border:1px solid transparent;
  background:#131519;font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;
  color:var(--ink-dim);cursor:pointer;transition:background .12s,color .12s}
#nsChart.desk .nsc-side .nsc-pv:hover{background:#191C21;color:var(--ink-soft)}
#nsChart.desk .nsc-side .nsc-pv.ok{color:var(--ink-faint);background:rgba(31,201,138,.055)}
#nsChart.desk .nsc-side .nsc-pv.ok b{color:var(--safe,#1FC98A);font-weight:400}
#nsChart.desk .nsc-side .nsc-pv.no{color:#E8837B;background:rgba(245,69,58,.09);
  border-color:rgba(245,69,58,.30)}
#nsChart.desk .nsc-side .nsc-pv.no b{color:var(--danger,#F5453A);font-weight:400}
#nsChart.desk .nsc-side .nsc-pv b{font-size:10.5px}
#nsChart.desk .nsc-side .nsc-pv.md{font-weight:500}

/* ── ngăn cách giữa phần điều kiện và phần danh sách ── */
#nsChart.desk .sd-sec{margin-top:26px;padding-top:20px;border-top:1px solid var(--line-soft,#1A1B18)}
#nsChart.desk .sd-h{display:flex;align-items:baseline;gap:11px;margin-bottom:13px}
#nsChart.desk .sd-h .n{font-family:var(--mono);font-size:11px;color:var(--gold,#C9A24C)}
#nsChart.desk .sd-h .t{font-family:var(--serif);font-size:19px;color:var(--ink)}
#nsChart.desk .sd-h .meta{margin-left:auto;font-family:var(--mono);font-size:10px;
  letter-spacing:.12em;color:var(--ink-dim)}
#nsChart.desk .sd-empty{font-family:var(--mono);font-size:12px;color:#4C4F55;padding:4px 0 2px}
/* CẢNH BÁO CỔNG MUA ĐÓNG — [THÊM 01/09/2026].
   Cùng bảng màu với dải cảnh báo ở dashboard (`nv-buy-note`): viền vàng
   bên trái, nền tối ấm. Câu chữ do `nsCongMua()` quyết, ở đây chỉ là áo. */
#nsChart.desk .sd-cong{display:block;margin:0 0 11px;padding:10px 12px;
  border:1px solid #4A3D20;border-left:3px solid var(--gold,#C9A24C);
  border-radius:7px;background:#1A1710}
#nsChart.desk .sd-cong-n{display:block;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.14em;color:var(--gold,#C9A24C);margin-bottom:5px}
#nsChart.desk .sd-cong-t{display:block;font-size:12px;line-height:1.55;color:#BFBCB6}

/* ── bảng mã: hàng tiêu đề + số canh phải, chữ số đều bề ngang ── */
#nsChart.desk .sd-tb{border:1px solid var(--line-soft,#1A1B18);border-radius:7px;overflow:hidden}
/* Cột đo cho nhãn DÀI NHẤT: "KHỐI LƯỢNG" và "KÍCH HOẠT" ở mono 9,5px giãn .1em.
   Trước cấp 62px nên "KÍCH HOẠT" gãy làm hai dòng, hàng tiêu đề cao gấp đôi và cả
   bảng lệch nhịp. nowrap để lỗi này không tái diễn âm thầm. */
#nsChart.desk .sd-hd,#nsChart.desk .sd-r{display:grid;
  grid-template-columns:minmax(52px,1fr) 60px 76px 56px;
  align-items:center;gap:6px;padding:0 11px}
#nsChart.desk .sd-hd{height:30px;background:var(--panel2,#0C0D10);
  border-bottom:1px solid var(--line-soft,#1A1B18);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;color:var(--ink-dim);
  white-space:nowrap}
#nsChart.desk .sd-hd .r,#nsChart.desk .sd-r .r{text-align:right}
#nsChart.desk .sd-r{height:36px;width:100%;margin:0;border:none;
  border-bottom:1px solid rgba(26,27,24,.7);background:none;cursor:pointer;text-align:left;
  font-family:var(--mono);font-size:13px;color:var(--ink);
  font-variant-numeric:tabular-nums;transition:background .12s}
#nsChart.desk .sd-r:last-child{border-bottom:none}
#nsChart.desk .sd-r:hover{background:#15171B}
#nsChart.desk .sd-r.on{background:rgba(201,162,76,.10);
  box-shadow:inset 2px 0 0 var(--gold,#C9A24C)}
#nsChart.desk .sd-tk{display:flex;align-items:center;gap:5px;letter-spacing:.06em}
#nsChart.desk .sd-star{font-style:normal;font-size:9px;color:var(--gold,#C9A24C)}
#nsChart.desk .sd-c1{font-size:13px}
#nsChart.desk .sd-c2{font-size:12.5px;color:var(--ink-soft)}
#nsChart.desk .sd-c3{font-size:12px}
/* Khối 02: KHỐI LƯỢNG là con số cần nhất khi đặt lệnh -> độ nổi cao nhất hàng. */
#nsChart.desk .sd-tb.buy .sd-c2{color:var(--ink);font-size:13px}

/* ══ BADGE CHỈ SỐ ĐÁY TRÁI ══ đối xứng với #nsys-live bên phải, cùng bộ số đo */
/* ══ TAY KÉO CHIA PANE ══ trong suốt, chỉ lộ khi rê tới. */
#nsChart .nsc-stage{position:relative}
#nsc-idxbadge{position:fixed;left:14px;bottom:14px;z-index:99998;
  display:flex;align-items:baseline;gap:8px;
  font:500 10px/1 var(--mono,ui-monospace,monospace);letter-spacing:.06em;
  background:color-mix(in srgb,var(--surf,#11141A) 88%,transparent);
  border:1px solid var(--line,#232833);border-radius:999px;padding:8px 14px;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  cursor:pointer;opacity:0;transform:translateY(6px);pointer-events:none;
  transition:opacity .22s,transform .22s}
#nsc-idxbadge.on{opacity:1;transform:none;pointer-events:auto}
/* ══ NÚT TRA MÃ ══ đáy trái, cùng góc với badge chỉ số.
   [SỬA 21/08/2026] Từ VIÊN THUỐC (33px cao, có chữ "TRA MÃ") -> NÚT TRÒN
   46px chỉ còn biểu tượng. Số cũ "bottom 14 + cao 33 + cách 8 = 55px" nay
   KHÔNG còn đúng cho bản desktop — badge `bottom:55px` giờ CHỒNG LÊN nút
   cao 46px (14+46=60 > 55). Đẩy badge lên 68px = 14 + 46 + 8, giữ nguyên
   khoảng hở 8px của thiết kế cũ. */
#nsc-seek{position:fixed;left:14px;bottom:14px;z-index:99998;
  display:flex;align-items:center;justify-content:center;
  width:46px;height:46px;padding:0;
  color:var(--chart,#D97757);
  background:color-mix(in srgb,var(--surf,#11141A) 88%,transparent);
  border:1px solid color-mix(in srgb,var(--chart,#D97757) 34%,transparent);
  border-radius:50%;cursor:pointer;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 2px 8px rgba(0,0,0,.42);
  transition:color .18s,border-color .18s,transform .12s}
#nsc-seek:hover{border-color:color-mix(in srgb,var(--chart,#D97757) 62%,transparent)}
#nsc-seek:active{background:#15171B;transform:scale(.93)}
/* Ô VUÔNG 46px, biểu tượng 24px — đủ lớn để nhận ra hình kính lúp ngay,
   và vượt xa ngưỡng vùng chạm 44px của iOS. [SỬA 21/08/2026]
   MÀU `--chart` (đất nung, sắc logo Claude) — chủ hệ: *"lấy cùng màu logo
   của claude (giống màu chart trên thanh tờ trượt), tôi thích màu đó."*
   Token ấy nghĩa là "NÚT MỞ CHART — hành động, không phải trạng thái"
   (`khung.html:80`), đúng vai nút này: nó mở trình xem chart. Quy tắc kèm
   theo — *"không bao giờ được dùng cho một con số"* — không bị vi phạm:
   đây là biểu tượng, không phải số liệu.
   Dự phòng `#D97757` sau `var()` vì `#nsc-seek` sống NGOÀI `#app`; nếu
   một ngày biến bị giới hạn phạm vi thì nút vẫn đúng màu thay vì mất màu. */
#nsc-seek .sk-i{display:block;width:24px;height:24px}
#nsc-idxbadge{bottom:68px}
/* ĐẨY LÊN TRÊN THANH TAB — bản mobile. [SỬA 21/08/2026]
   Chủ hệ: *"trên bản desktop vẫn còn nhưng không hiểu sao bản mobile bị
   mất, khôi phục lại nhưng vị trí cố định phía trên Tab Thị Trường, kể cả
   khi xem nội dung ở tab khác thì nó vẫn ở đó."*

   ĐO ĐƯỢC nguyên nhân "bị mất" — VÀ TÔI ĐÃ CHẨN ĐOÁN SAI MỘT LẦN:
   Lượt đầu chỉ tìm `nsc-seek` trong CHÍNH tệp này, thấy không có luật ẩn
   nào, nên kết luận "nút bị `.mb-tab` đè khuất" và chỉ đẩy nó lên. SAI —
   chủ hệ khởi động lại máy chủ, nút VẪN không thấy đâu. Quét RỘNG ra mới
   ra thủ phạm thật: `mobile.css` có
   `body.view-mobile #nsc-idxbadge, body.view-mobile #nsc-seek
    {display:none!important}` — ẩn HẲN, có chủ đích, từ trước. Luật ở đây
   chỉ đặt `bottom`, không đụng `display`, nên `!important` kia vẫn thắng
   và nút vẫn vô hình.
   BÀI HỌC: triệu chứng "không thấy phần tử" phải quét MỌI tệp CSS được
   nhúng, không chỉ tệp mình đang sửa — `khung.html` nhúng cả `mobile.css`
   lẫn `chart.css`.

   Nút VẪN LUÔN ĐƯỢC CHÈN (xem `nscSeekBoot` — không phân biệt
   mobile/desktop), nên phần JS chưa bao giờ là vấn đề.
   Chữa: `mobile.css` bỏ `#nsc-seek` khỏi luật ẩn (giữ badge ẩn), CỘNG với
   luật dưới đây đẩy nút lên trên thanh tab — vì mối lo ban đầu khiến nó bị
   ẩn (đè lên đường đi lại chính) là CÓ THẬT, chỉ là cách xử lý cũ hơi
   mạnh tay.

   `.mb-tab` chỉ tồn tại ở `body.view-mobile`, nên neo luật theo đúng lớp
   ấy — desktop giữ nguyên `bottom:14px` như cũ, không đụng gì.
   60px (chiều cao tab, `.mb-tab button{min-height:60px}`) + 14px (khoảng
   hở, bằng đúng `bottom` gốc) = 74px, cộng safe-area đáy để không lọt
   xuống vùng gạch home trên máy không phím cứng — cùng khuôn
   `calc(env(safe-area-inset-bottom,0px) + …)` mà `.mb-than` đã dùng.

   ⚠ CẶP RÀNG BUỘC THỨ HAI VỚI CHIỀU CAO TAB. `mobile.css:108` đã ghi một
   cặp (đệm đáy `.mb-than` 96px). Đây là cặp NỮA: đổi `min-height` của
   `.mb-tab button` mà quên dòng dưới là nút tra mã lại chui xuống dưới
   thanh tab.

   KHÔNG có luật tương ứng cho `#nsc-idxbadge`: badge VẪN ẨN trên mobile
   (`mobile.css`, `body.view-mobile #nsc-idxbadge{display:none!important}`)
   — điểm VN-Index đã có sẵn ở tab THỊ TRƯỜNG với cỡ chữ lớn hơn hẳn. Thêm
   luật đẩy badge lên ở đây sẽ là MÃ CHẾT trông như còn dùng. Nếu về sau bỏ
   ẩn badge thì mới thêm, và nhớ nó phải nằm TRÊN nút tra mã (cách ≥46px =
   chiều cao nút sau khi đổi sang nút tròn 21/08/2026). */
body.view-mobile #nsc-seek{
  bottom:calc(74px + env(safe-area-inset-bottom,0px))}
/* ── KÍNH LÚP CÒN Ở LẠI TRÊN MÀN CHART DỌC — [SỬA 25/08/2026] ──────────
   Chủ hệ: *"ở màn hình này lấy lại nút search… để khi cần đổi mã xem thì
   gần ngón cái hơn (vị trí tương ứng với chính nó ở ngoài tab)."*

   KHÔNG viết gì mới: `nscSeekBoot()` VẪN LUÔN chèn nút, `nscMoTra()` đã tự
   phân biệt hai ca (chart đang mở -> gọi thẳng `nscFind()`). Thứ duy nhất
   giấu nó đi là luật này. Nên chỉ cần nới bộ chọn.

   VẪN ẨN ở ba ca, mỗi ca một lý do khác nhau:
     · desktop         — chart desktop có ô tra ngay trên thanh công cụ
     · xoay ngang      — chart chiếm trọn màn, nút nổi giữa vùng vẽ sẽ vướng
     · ô tra đang mở   — bấm lại chính nó thì vô nghĩa

   Vị trí GIỮ NGUYÊN `bottom` của luật `body.view-mobile` ở trên, tức đúng
   chỗ nó đứng khi ở ngoài tab. Nút sẽ nổi đè lên mép dưới panel P·V·T —
   chủ hệ đã cân nhắc và chấp nhận: *"chèn pvt không sao vì nó ko quá quan
   trọng."* */
body.nsc-open #nsc-seek{display:none!important}
body.view-mobile.nsc-open #nsc-seek{display:flex!important}
body.view-mobile.nsc-open.nsc-xoay #nsc-seek,
body.view-mobile.nsc-open.nsc-ngang #nsc-seek,
body.view-mobile.nsc-open.nsc-tra #nsc-seek{display:none!important}
/* ẨN KHI MỞ SỔ LỆNH — [THÊM 21/08/2026]. Chủ hệ: *"nút tra mã đang ở vị
   trí che mất khá nhiều thông tin khi mở sổ lệnh, vậy khi mở sổ lệnh thì
   ẩn nút này đi xem hợp lý hơn."*
   CÙNG HỌ với luật `body.nsc-open` ngay trên: cả hai đều là "một lớp phủ
   đang chiếm màn hình thì nút nổi phải nhường chỗ". Cờ `mb-sheet-mo` do
   `mobile.js::mbMo`/`mbDong` bật/tắt — xem chú thích tại `mbMo`. */
body.mb-sheet-mo #nsc-seek{display:none!important}
@media print{#nsc-seek{display:none}}
#nsc-idxbadge .ib-v{font-size:13px;color:var(--ink,#F0EDE8);letter-spacing:.02em}
#nsc-idxbadge .ib-c{font-size:11px}
body.nsc-open #nsc-idxbadge{display:none!important}
@media print{#nsc-idxbadge{display:none}}
/* KHỐI 03 — mặc định chỉ hiện ~5 mã rồi phải cuộn (268px ÷ 53,6px mỗi hàng).
   Nâng lên 10 mã = 536px. Đặt bằng CSS thay vì vá nsys_report_v6.py: chiều cao đó
   được dựng lại trong JS mỗi lượt feed, vá vào chuỗi sinh HTML sẽ mong manh hơn. */
#nv-scroll{max-height:536px!important}
/* ══ KHỐI 05 · VN30 ══ */
.v30-bar{display:flex;align-items:center;gap:16px;margin-bottom:10px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--ink-dim)}
.v30-br b{font-size:13px;font-weight:500}
.v30-live{margin-left:auto;color:#4C4F55;font-size:9.5px;letter-spacing:.12em}
/* [SỬA 04/08/2026] BỎ HẲN KHUNG CUỘN LỒNG NHAU — vẫn còn ĐÚNG lý do dưới đây
   dù bảng đã đổi cách hiện (xem SỬA 12/08/2026 ngay sau).
   Safari trên iOS KHOÁ mục tiêu cuộn suốt một cử chỉ: đã bắt đầu cuộn trong bảng
   thì hết bảng là đứng, phải nhấc tay chạm ra ngoài mới đi tiếp. overscroll-behavior
   chỉ chặn THÊM, gỡ nó cũng không mở khoá được — đây là hành vi của trình duyệt,
   không phải của CSS ta đặt. KHÔNG được thêm cuộn riêng vào `.v30-tb`/`.v30-cols`
   vì đúng lý do này. */
.v30-tb{background:var(--panel);border:1px solid var(--line);border-radius:8px;
  overflow:hidden}
/* [SỬA 12/08/2026 — lần 2, đúng ý] HAI MÃ TRÊN CÙNG MỘT HÀNG — 5 CỘT THÀNH
   10 CỘT, KHÔNG PHẢI HAI BẢNG RỜI.
   Lần đầu tôi hiểu "chia đôi" thành HAI BẢNG xếp cạnh nhau (`.v30-cols`, đã
   bỏ). Đúng ý là NHÂN ĐÔI SỐ CỘT của một hàng: `.v30-hd2`/`.v30-r2` là
   khung flex bọc HAI `.v30-hd`/`.v30-row` cạnh nhau — mỗi cái vẫn giữ
   nguyên lưới 5 cột của chính nó (`grid-template-columns` bên dưới không
   đổi), chỉ là có một khung anh em đứng cạnh thay vì đứng một mình chiếm
   trọn bề ngang. 15 hàng vật lý thay vì 30 — khối THẤP đi một nửa, không
   còn "thưa" giữa một khối rộng.
   Không mở khung cuộn lồng nhau nào (đúng thứ khiến Safari khoá cử chỉ hôm
   04/08) — vẫn giữ nguyên "một mạch cuộn duy nhất". Trên mobile chồng dọc
   lại — 10 cột ép vào màn hẹp thì vỡ. */
.v30-hd2,.v30-r2{display:flex}
.v30-hd2 .v30-hd,.v30-r2 .v30-row{flex:1;min-width:0}
.v30-hd2 .v30-hd:first-child,.v30-r2 .v30-row:first-child{
  border-right:1px solid var(--line-soft)}
.v30-row-rong{visibility:hidden}
/* [SỬA 13/08/2026] PANEL SỔ LỆNH NẰM CÙNG VẾ VỚI MÃ ĐƯỢC BẤM.
   Bảng chia đôi nhưng panel vẫn bám mép trái — bấm mã cột phải thì sổ lệnh
   hiện dưới cột trái, mắt phải nhảy chéo qua bảng. `.v30-xo2` là hàng flex
   hai nửa y hệt `.v30-r2`; `.v30-xo-chua` là ô chừa cùng độ rộng, đặt trước
   hay sau tuỳ vế (xem `_v30Panel`).
   Mobile: hai vế đã chồng dọc, ô chừa thành thừa -> ẩn hẳn, không để lại
   khoảng trắng không giải thích được. */
.v30-xo2{display:flex}
.v30-xo2 > *{flex:1;min-width:0}
body.view-mobile .v30-xo2{flex-direction:column}
body.view-mobile .v30-xo-chua{display:none}
/* [SỬA 13/08/2026] CHART NHỎ trong ô chừa — liếc nhanh, không mở toàn màn hình.

   CHIỀU CAO ĐI BẰNG FLEX, KHÔNG BẰNG `height:100%`.
   `height:100%` chỉ phân giải khi CHA có chiều cao XÁC ĐỊNH. `.v30-xo-chua`
   là ô flex co giãn theo anh em, chiều cao do bố cục quyết định SAU. Cho nó
   thành hộp flex dọc rồi để `.mc-o` giãn (`flex:1`) thì cao đúng bằng anh em.

   CANVAS: chỉ neo góc TRÊN-TRÁI, kích thước do JS đặt (`_mcDo` đo hộp cha).
   KHÔNG dùng `right`/`bottom` + `width:auto`: canvas là PHẦN TỬ THAY THẾ, có
   kích thước nội tại từ bitmap, nên `width:auto` rơi về bề rộng bitmap chứ
   không giãn theo cặp `left`/`right` như div thường — chart vẽ nhỏ hơn ô và
   thừa chỗ cả hai chiều. */
.v30-xo-chua{display:flex;flex-direction:column}
.mc-o{position:relative;flex:1;min-height:240px;padding:10px 12px 14px;
  background:var(--panel2);border-top:1px solid #1C1D19;box-sizing:border-box}
.mc-cv{position:absolute;top:10px;left:12px;display:block}
/* HAI NÚT NHỎ ở góc trên phải ô chart: D/W trên, xem-chart-lớn ngay dưới.
   [SỬA 13/08/2026] Xếp DỌC theo một trục, không nằm ngang. Nằm ngang thì nút
   thứ hai lấn về phía nến; xếp dọc thì cả hai gọn trong LỀ PHẢI mà `_mcVe`
   đã chừa (PHAI=46px) và không che gì. */
.mc-nut{position:absolute;right:11px;z-index:2;
  width:21px;height:21px;padding:0;border-radius:4px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);background:var(--panel2);
  font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--ink-dim)}
.mc-nut:hover{color:var(--gold);border-color:var(--line-soft);background:#15171B}
.mc-dw{top:11px}
.mc-to{top:38px}
/* [SỬA 13/08/2026] PANEL XỔ CHIA ĐÔI — sổ lệnh trái, chart nhỏ phải.
   Panel trước đây chiếm trọn bề ngang cho một cột sổ lệnh, nửa phải là vùng
   đen không nói gì; người dùng: "tận dụng được mọi không gian đều có ý nghĩa".

   HAI HỘP PHẢI CAO BẰNG NHAU. `align-items:stretch` chỉ kéo giãn hai Ô CON
   trực tiếp (`.mc-doi-trai/phai`), còn `.sl-box` bên trong vẫn cao theo nội
   dung của nó — nên mép dưới hai hộp lệch nhau, đúng như người dùng thấy.
   Cho ô trái thành hộp flex dọc rồi để `.sl-box` giãn (`flex:1`) thì hai mép
   thẳng hàng. Bỏ `margin-bottom` inline vì nó cộng thêm một khoảng lệch nữa.

   Mobile: chồng dọc, và ẩn chart để không đẩy sổ lệnh xuống quá sâu. */
.mc-doi{display:flex;gap:14px;align-items:stretch}
.mc-doi > *{flex:1;min-width:0}
.mc-doi-trai,.mc-doi-phai{display:flex;flex-direction:column}
.mc-doi-trai .sl-box{flex:1;margin-bottom:0!important;display:flex;flex-direction:column}
/* GIÃN ĐÚNG THANG GIÁ, KHÔNG GIÃN "CON ĐẦU TIÊN" — [SỬA 14/08/2026].

   ĐÃ CẮN. Người dùng: *"panel 04: khoảng gap giữa tên cổ phiếu và sổ lệnh
   quá lớn, nhìn mất cân đối"*, kèm ảnh khoanh đỏ một dải trống.

   Đo được: `.sl-dinh` cao 82px trong khi nó chỉ chở MỘT dòng chữ — đáng lẽ
   ~35px. Dải trống nằm BÊN TRONG chính nó.

   Gốc: luật cũ khoá theo VỊ TRÍ (`> div:first-child`). Ý định của nó là kéo
   giãn THANG GIÁ để hộp trái cao bằng hộp chart bên phải — và lúc viết,
   thang giá tình cờ là con đầu tiên. Khi tôi chèn `.sl-dinh` lên trước, luật
   ấy lặng lẽ đổi mục tiêu sang một phần tử hoàn toàn khác, và `flex:1` biến
   một dòng chữ thành một khối 82px.

   Không có gì kêu: CSS không báo lỗi khi luật khớp nhầm phần tử.

   Nay ràng theo TÊN THẬT của thứ cần giãn. Thêm hay bớt phần tử phía trên
   cũng không đổi mục tiêu — vị trí là thứ thay đổi, vai trò thì không. */
.mc-doi-trai .sl-box > .sl-chia{flex:1}
.mc-doi .mc-o{border-top:none;border:1px solid #1C1D19;border-radius:6px}
/* CHIỀU CAO ỔN ĐỊNH NGAY TỪ LƯỢT DỰNG ĐẦU.

   [SỬA 13/08/2026] Người dùng: "khi mở ra là các box cố định chiều cao,
   chart cố định chiều cao, không bị thay đổi nhức mắt".

   Gốc của việc phình: lúc mở, ô sổ lệnh chưa có số nên thấp; số về thì nó
   cao lên, kéo cả hàng flex cao theo. `ResizeObserver` làm canvas bám kịp,
   nhưng bám kịp một cú nhảy vẫn là một cú nhảy. Chặn từ đầu thì hơn: đặt
   sàn chiều cao cho CẢ HÀNG, đủ chứa sổ lệnh đầy đủ, nên lượt dựng đầu đã
   đúng cỡ và không còn gì để nhảy.

   [THIẾT KẾ LẠI 13/08/2026] 268 -> 296. Thang giá nay cao 44px/hàng (gấp đôi
   hàng tham chiếu) để nó đọc ra là nhân vật chính, nên ô sổ lệnh cần thêm
   chỗ — và chart bên cạnh cao theo, đúng thứ người dùng muốn. */
.mc-doi{min-height:296px}
.mc-doi .mc-o{min-height:296px}
body.view-mobile .mc-doi{min-height:0}
body.view-mobile .mc-doi{flex-direction:column}
body.view-mobile .mc-doi-phai{display:none}
body.view-mobile .v30-hd2,body.view-mobile .v30-r2{flex-direction:column}
body.view-mobile .v30-hd2 .v30-hd:first-child,
body.view-mobile .v30-r2 .v30-row:first-child{
  border-right:none;border-bottom:1px solid var(--line-soft)}
/* [SỬA 12/08/2026] `minmax(0,...)` — KHÔNG chỉ `1fr` trần.
   `1fr` một mình có `min-width:auto` ngầm định = không co được dưới bề rộng
   NỘI DUNG của chính nó. Khi một hàng đứng MỘT MÌNH chiếm trọn bề ngang
   (bản gốc, trước 12/08), điều này vô hại — luôn thừa chỗ. Nay HAI hàng
   đứng cạnh nhau (`.v30-r2`), mỗi bên chỉ còn NỬA bề ngang cũ — nếu panel
   không đủ rộng, lưới không co được, TRÀN ra ngoài `.v30-tb`, và vì
   `.v30-tb` có `overflow:hidden`, phần tràn bị CẮT MẤT chứ không lộ ra —
   nhìn giống hệt "vẫn còn 5 cột" dù mã đã đúng, đo được đủ 10 cột. */
/* ── TỈ LỆ CỘT — [SỬA 14/08/2026] ─────────────────────────────────────────
   Người dùng: *"chỉ cần đẩy cột NSyS ra mép phải của bảng là xong không cần
   thụt vào, và cân chỉnh lại khoảng cách giữa các cột cho vn30, hiện tại nó
   chưa đều"*.

   Hai lỗi tách bạch:

   ① NSyS THỤT VÀO vì ô mang lớp `.c` (căn GIỮA) trong khi bốn cột kia `.r`.
      Nội dung ~30px nằm giữa ô 84px thì mép phải hụt ~27px so với các cột
      khác. Đã đổi ô và tiêu đề sang `.r` — cùng chuẩn bảng số đã chốt cho
      mobile: cột chữ TRÁI, cột số PHẢI.

   ② KHE KHÔNG ĐỀU. Tỉ lệ cũ `1 / 1.15 / .95 / 1.25 / .8` cho khe mực đo
      được 127 · 105 · 138 · 89 — lệch 49px. Tỉ lệ mới tính từ BỀ RỘNG CHỮ
      thật của từng cột (mã 3 ký tự · giá 6 · % 6 · KL 5 · NSyS chấm+2), nên
      bốn khe xấp xỉ 90px bằng nhau.

   Cột MÃ để CỐ ĐỊNH thay vì `fr`: nó căn TRÁI nên phần thừa của nó rơi vào
   khe đầu tiên, mà `fr` thì phần thừa ấy đổi theo bề rộng cửa sổ — khe đầu
   sẽ lệch khỏi ba khe kia mỗi lần đổi cỡ màn hình.

   BỀ RỘNG CỘT MÃ — tính từ số đo, không suy. Lần đầu tôi NỚI 52 -> 82px với
   lý lẽ "cột rộng hơn thì khe hẹp đi"; đo ra khe đầu TỆ HƠN, 121 -> 143px.
   Sai chiều, vì ô mã căn TRÁI: nới ô là đẩy cột 2 sang phải, mà cột 2 căn
   PHẢI nên mép trái chữ của nó cũng dạt theo — khe rộng thêm.

   Công thức đúng, với `w1..w5` là bề rộng cột và mực đo được
   (mã 22 · giá 43 · % 43 · KL 36 · NSyS 30):

       khe1 = (w1 - 22) + 6 + (w2 - 43)      <- cột 1 TRÁI, cột 2 PHẢI
       khe2 = w3 + 6 - 43                     <- hai cột đều PHẢI
       khe3 = w4 + 6 - 36
       khe4 = w5 + 6 - 30

   Chỗ vẽ 567px trừ 4 khe lưới 6px còn 543px cho năm cột. Đặt w1 = 36px (đủ
   mã ba ký tự) rồi giải cho bốn khe BẰNG NHAU: khe = 98px, và
   w2..w5 = 121 · 135 · 128 · 122. Quy về `fr` để co giãn theo cửa sổ. */
/* ── CÂN LẠI — [SỬA 16/09/2026] ───────────────────────────────────────────
   Chủ hệ: *"cột KL đang giãn hơi xa so với cột NSyS, nó tạo 1 khoảng trống
   nhìn thiếu cân đối… tiêu đề thì chìm không hay để ý nhưng hiển thị nội
   dung thì đập vào mắt."*

   Chẩn đoán ấy đúng và chỉ thẳng vào chỗ sai của lượt 14/08. Lượt ấy giải
   đúng công thức nhưng sai MỘT SỐ ĐO: nó lấy `KL 36px` với giả định "5 ký
   tự". Đo lại trên 1.594 mã, phiên gần nhất:

       độ dài chuỗi KL   3 ký tự 651 mã · 5 ký tự 476 · 6 ký tự 268 · 7 ký tự 181
       mực p75           41,4px   (ví dụ "72,50K")      — không phải 36
       mực cực đại       48,3px   ("175,10K")

   VÀ MỘT LỖI THỨ HAI, nặng hơn: lượt ấy giải ở bề rộng 567px, tức CÂN CHO
   DESKTOP. Cột MÃ 36px và bốn khe lưới 6px là số CỐ ĐỊNH, không co theo
   `fr` — nên cùng một bộ tỉ lệ cho khe rất khác nhau ở hai bề rộng:

       340px   khe 44,5 · 29,4 · 34,4 · 45,3   lệch 41,5%
       567px   khe 93,9 · 84,7 · 86,8 · 95,2   lệch 11,7%

   Trên desktop lệch 11,7% thì khó thấy; trên điện thoại 35–41% thì đập vào
   mắt. Đúng chỗ chủ hệ đang nhìn.

   ĐO THEO LỆCH TƯƠNG ĐỐI, KHÔNG TUYỆT ĐỐI: 10px trên khe 90px là 11% (chìm),
   cũng 10px trên khe 43px là 23% (nổi). Dò bộ `fr` cho lệch tương đối TỆ
   NHẤT trên dải 340–600px là nhỏ nhất:

       340px   khe 40,5 · 36,0 · 36,4 · 40,7   lệch 12,1%
       360px   khe 45,0 · 41,9 · 41,6 · 45,2   lệch  8,3%
       567px   khe 86,9 · 96,4 · 90,2 · 87,1   lệch 10,5%

   Khe KL→NSyS ở 360px: 50,2 -> 45,2px, và chênh với khe %→KL từ 10,7 còn
   3,6px — đúng thứ chủ hệ xin: "dịch cột KL vào gần hơn cột NSyS".

   MỘT LUẬT CHO BA NƠI. VN30 · thư mục ngành · tab Cùng ngành đều dùng
   `.v30-hd`/`.v30-row`, nên sửa ở đây là sửa cả ba — không có bản sao nào
   để trôi khỏi nhau. */
.v30-hd,.v30-row{display:grid;
  grid-template-columns:36px minmax(0,1fr) minmax(0,1.30fr) minmax(0,1.16fr) minmax(0,1fr);
  align-items:center;gap:6px;padding:0 12px}
/* Không còn cuộn trong bảng nên bỏ position:sticky — nó chỉ có tác dụng bên trong
   khung cuộn, giữ lại chỉ tạo tầng xếp lớp thừa. */
.v30-hd{height:32px;border-bottom:1px solid var(--line);background:var(--panel2)}
.v30-th{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;color:#6E6C67;
  background:none;border:none;padding:0;cursor:pointer;text-align:left}
.v30-th.r{text-align:right}.v30-th.c{text-align:center}
/* CĂN LỀ THEO LỚP `.r`/`.c`, KHÔNG THEO DANH SÁCH TÊN Ô — [SỬA 14/08/2026].
   Luật cũ chỉ căn phải cho `.v30-c`/`.v30-p`/`.v30-v` (liệt kê tên). Ô NSyS
   mang lớp `.r` nhưng tên là `.v30-n` nên KHÔNG khớp luật nào — đo được chữ
   nằm cách mép ô 45px, tức vẫn thụt vào dù đã đổi `.c` sang `.r`.
   Liệt kê tên là thứ phải nhớ cập nhật mỗi lần thêm cột; ràng theo lớp `.r`
   thì cột mới tự đúng. */
.v30-row > .r,.v30-hd > .r{text-align:right}
.v30-row > .c,.v30-hd > .c{text-align:center}

/* ── SỔ LỆNH · KHUÔN NHÃN-TRÊN-SỐ (kiểu VNDirect) ─────────────────────────
   Thêm 14/08/2026. `slVe::_kv` sinh MỘT hàng nhãn rồi MỘT hàng số, mỗi cặp
   một cột `1fr`.

   Bản trước là lưới `nhãn | số` với cột nhãn cố định 52px, và người dùng
   báo "vỡ bố cục và lên xuống dòng loạn xới": nhãn dài như `SỐ PHIÊN NẮM
   GIỮ` (~100px) không thể nằm trong 52px.

   Khuôn này không có ràng buộc ấy — nhãn được trọn bề rộng cột. Dùng CHUNG
   cho desktop lẫn mobile, nên `mobile.css` không phải ghi đè gì ngoài cỡ
   chữ. */
/* ĐỆM DỌC của mỗi nhóm ba ô — chuyển từ inline `_kv` sang đây 20/08/2026.
   Giữ NGUYÊN 7px của bản desktop: lượt sửa ấy chỉ nhắm bản mobile, và đổi
   luôn desktop là sửa thứ không ai yêu cầu. Xem `chart.js::_kv`. */
.sl-kv{padding:7px 0}
.sl-kv .kv-n{font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;
  color:#5A5954;line-height:14px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sl-kv .kv-v{font-family:var(--mono);font-size:13px;line-height:18px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ══ DẢI P·V·T TRONG SỔ LỆNH — DÙNG LẠI CHIP CỦA PANEL CHART ════════════
   Bày lại 20/08/2026. Chủ hệ, kèm ảnh panel chart: *"Đừng làm như này, làm
   giống với khi ấn vào xem chart ấy… nhưng thấp hơn 1 chút về chiều cao cho
   mỗi điều kiện."*

   Chip ở đây là `.nsc-pv` — ĐÚNG lớp panel chart dùng (`chart.css:735`),
   không phải bản chép. Nên viền, nền, màu ✓/✗ chỉ khai MỘT nơi; sửa sắc
   chip ở chart là dải này đổi theo. Dưới đây chỉ có phần KHÁC: bố cục lưới
   và chiều cao.

   BỐN CỘT là số DUY NHẤT chia hết cả 8 (bắt buộc) lẫn 12 (hỗ trợ), nên hai
   nhóm thành hai hình chữ nhật ĐẦY — 4×2 và 4×3, không ô thừa, không hàng
   cụt. Panel chart cũng bốn cột; hai nơi nay bằng nhau.

   NHÃN `MAN.`/`SUP.` XẾP CHỒNG — [SỬA 20/08/2026, LƯỢT HAI]. Chủ hệ:
   *"MAN và SUP chiếm nhiều diện tích quá… điều chỉnh về MAN. / x/8 xuống
   dòng, căn giữa số vào giữa chữ… kéo rộng được khối PVT ra."*

   `flex-direction:column` xếp `<i>` (nhãn) trên `<b>` (số); `align-items:
   center` căn NGANG cả hai theo trục dọc chung — đúng "căn giữa số vào
   giữa chữ". Cột nhãn nay chỉ rộng bằng phần tử DÀI NHẤT trong hai dòng
   (~35-40px, thường là "11/12"), thay vì "MAN. 5/8" cạnh nhau (~55-65px) —
   phần dư ~20-25px nhường cho chip. `align-items:start` ở `.sl-pvt` (grid
   cha) không đổi: khối nhãn hai dòng vẫn đứng ở ĐỈNH ô, ngang hàng chip
   đầu tiên.

   `.sl-pvt{display:grid;...}` NGAY DƯỚI ĐÂY — LƯỚI HAI CỘT (nhãn | chip)
   CHA của cả khối, KHÔNG được lẫn với `align-items:center` của `.pvt-n`
   ngay trên: đó là CON, xếp CHỮ TRÊN SỐ trong CHÍNH MỘT Ô nhãn; đây là CHA,
   đặt Ô NHÃN cạnh Ô CHIP theo hai cột. Cùng tên thuộc tính, hai tầng, hai
   nghĩa khác nhau. Dòng cha này ĐÃ BỊ XOÁ NHẦM một lần khi tôi thay
   `old_string` bao trùm cả nó lẫn `.pvt-n` nhưng `new_string` chỉ viết lại
   `.pvt-n` — `test_DAI_PVT_nhan_can_DINH_khong_can_giua` bắt được ngay,
   dù bài ấy viết cho một lý do khác (căn đỉnh, không phải "còn tồn tại hay
   không"). Một thước rộng bắt được cả lỗi nó không định canh. */
.sl-pvt{display:grid;grid-template-columns:auto minmax(0,1fr);
  column-gap:12px;row-gap:9px;align-items:start;
  padding:10px 12px;border-top:1px solid var(--line-soft)}
.sl-pvt .pvt-n{display:flex;flex-direction:column;align-items:center;
  font-family:var(--mono);white-space:nowrap}
.sl-pvt .pvt-n i{font-style:normal;font-size:9.5px;letter-spacing:.11em;
  color:#4E4D49;line-height:13px}
.sl-pvt .pvt-n b{font-weight:400;font-size:13px;line-height:16px}
/* `max-width` 310 -> 336px: cột nhãn hẹp lại ~20-25px thì chip được nhường
   đúng ngần ấy. 336 = 4 × 84 — chia hết cho bốn cột nên mỗi chip rộng đều
   không lẻ số. Vẫn CHẶN để desktop siêu rộng không kéo bốn chip thành bốn
   thanh dài — lý do gốc chưa đổi, chỉ đổi con số theo khoảng đã nhường. */
.sl-pvt .pvt-o{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:5px;max-width:336px}
/* THẤP HƠN PANEL CHART MỘT CHÚT — đúng chỗ chủ hệ yêu cầu, và là luật ghi
   đè DUY NHẤT so với chip gốc. Panel chart `padding:7px 4px` cho chip cao
   ~29px; ở đây 24px. Dải này nằm trong tờ trượt vốn đã dài, còn panel chart
   có cả cột phải để thở. */
.sl-pvt .nsc-pv{padding:0 5px;height:24px;font-size:10.5px;cursor:default}
.sl-pvt .nsc-pv b{font-size:10px}
.v30-row{height:40px;border-bottom:1px solid var(--line-soft);background:none;border-left:none;
  border-right:none;border-top:none;width:100%;cursor:pointer;text-align:left;
  font-family:var(--mono);font-size:13px;color:var(--ink)}
/* [SỬA 12/08/2026] KHÔNG CÒN DÙNG `.v30-row:last-child` — TỪNG đúng khi mọi
   `.v30-row` là con trực tiếp của `.v30-tb` (hàng cuối mới khớp). Nay mỗi
   `.v30-row` nằm trong `.v30-r2` chỉ có ĐÚNG HAI con, nên `:last-child` sẽ
   khớp nút BÊN PHẢI của MỌI hàng, không riêng hàng cuối — viền dưới biến
   mất khắp bảng. Chỉ hàng vật lý CUỐI CÙNG (`.v30-r2:last-child`) mới bỏ
   viền dưới, cho cả hai nút bên trong nó. */
.v30-r2:last-child .v30-row{border-bottom:none}
.v30-tb::-webkit-scrollbar{width:0}
.v30-row:active{background:#15171B}
.v30-tk{letter-spacing:.05em;color:var(--ink)}
/* [SỬA 12/08/2026] AN TOÀN Ở CẤP CHỮ — nếu lưới co dưới mức tự nhiên (màn
   rất hẹp), chữ CẮT GỌN bằng "…" thay vì tràn đè lên ô kế bên. Đi cùng
   `minmax(0,...)` ở trên: một bên cho PHÉP co, một bên lo chữ co ĐẸP. */
.v30-tk,.v30-c,.v30-p,.v30-v{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
.v30-c{font-variant-numeric:tabular-nums}
.v30-p{font-size:12px;font-variant-numeric:tabular-nums}
.v30-v{font-size:11.5px;color:var(--ink-dim);font-variant-numeric:tabular-nums}
.r{text-align:right}.c{text-align:center}
/* `justify-content:flex-end` chứ KHÔNG `text-align:right` — [SỬA 14/08/2026].
   Ô này là hộp FLEX (chấm + số), mà `text-align` không điều khiển vị trí con
   flex. Tôi đã đổi lớp `.c` -> `.r` rồi thêm cả luật `text-align:right`, và
   phép đo cho ra con số Y HỆT tới từng pixel — dấu hiệu rõ nhất rằng luật
   không hề có tác dụng, chứ không phải "gần đúng". Đo trước khi tin. */
.v30-n{display:flex;align-items:center;justify-content:flex-end;gap:5px}
.v30-n em{font-style:normal;font-size:11px;color:var(--ink-dim)}
.v30-dot{width:7px;height:7px;border-radius:50%;display:block;flex:none;
  border:1px solid #3A3D43;background:transparent}
.v30-dot.buy{background:var(--safe);border-color:#1FC98A}
.v30-dot.near{background:var(--gold);border-color:#C9A24C}
.v30-note{font-size:12.5px;color:var(--ink-dim);padding:14px 2px}
/* ══ THANH NGÀY THÁNG — GIỮ ĐÚNG MỘT DÒNG ══
   Đo được: thanh gốc đã chiếm 366px trong khi màn 393px chỉ còn 365px sau lề —
   tức nó ĐÃ tràn sẵn trên iPhone 360–393px, chỉ máy rộng mới thấy một dòng.
   Thêm nút lùi nữa thì chắc chắn xuống dòng, nên phải lấy lại chỗ:
     · bỏ hai dấu "/" (các ô ngày đã có viền riêng, dấu này chỉ trang trí)  −28px
     · thu ô ngày và hai nút hai bên                                        −20px
     · gap 10 -> 7, ô ngày kéo sát nhau bằng lề âm                          −24px
   Còn 324px, vừa cả máy 360px với 8px dư. */
#hdrDateRow{gap:7px!important;flex-wrap:nowrap!important}
#hdrDateRow > span{display:none!important}
#hdrDateRow #dd,#hdrDateRow #dm{width:32px!important;margin-right:-3px}
#hdrDateRow #dy{width:46px!important}
#hdrDateRow #dgo{padding:6px 11px!important}
#hdrDateRow #dnow{padding:6px 9px!important}
#nsc-dnext{width:26px!important}
#nsc-dprev:active,#nsc-dnext:active{background:#15171B!important}
/* ══════════════════════════════════════════════════════════════════════════
   LỚP PHỦ CHART TOÀN MÀN HÌNH
   [SỬA 16/08/2026 · NHÁY KHI KÉO, CHỈ Ở CHẾ ĐỘ STANDALONE]

   Người dùng: *"nếu tôi vào trực tiếp từ safari thì KHÔNG bị nháy, nhưng
   nếu vào bằng icon trên home screen thì LẠI BỊ"*. Và icon home screen là
   BẮT BUỘC — quay ngang xem chart thì nó không hiện thanh tab chiếm chỗ.

   Manh mối ấy loại được nghi can và chỉ ra hai lỗi thật:

   ① BỎ `height:100dvh`.
      `inset:0` ĐÃ ghim đủ bốn cạnh vào khung nhìn — chính xác ở MỌI chế độ.
      `height` đặt thêm sẽ GHI ĐÈ `bottom:0` bằng một độ dài mà trình duyệt
      TÍNH LẠI liên tục. Ở Safari thường `dvh` đổi theo thanh địa chỉ nên
      WebKit đi đường ấy hằng ngày; ở standalone không có thanh địa chỉ, và
      đường tính lại ấy ít được chạy hơn. Bỏ hẳn là hết một biến động.

   ② THÊM `overscroll-behavior:none`.
      Đo 16/08: TOÀN hệ có **0 chỗ** khai thuộc tính này. Kéo quá mép lớp
      phủ thì cuộn LAN xuống trang nền.
      Ở Safari thường, thanh địa chỉ HẤP THỤ phần overscroll đầu tiên —
      nên hiếm khi lan tới trang. Ở standalone KHÔNG CÓ thanh địa chỉ, nên
      nó lan thẳng: tài liệu phía sau trôi trong khi lớp phủ đứng yên, và
      mỗi khung hình là một lượt hợp thành lại.
      -> đúng thứ người dùng tả: *"nền background là tab ở ngoài"* — thanh
      tab nằm ở ĐÁY trang nền, lộ ra đúng lúc trang nền dịch.

   Đây là lần ĐẦU TIÊN trong phiên 16/08 tôi đụng `chart.css`; suốt các đợt
   trước nó không đổi một byte. Ghi ra để lần sau truy được. */
#nsChart{position:fixed;inset:0;background:var(--bg);z-index:120;display:none;
  flex-direction:column;overflow:hidden;overscroll-behavior:none;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
#nsChart.on{display:flex}
/* [THÊM 21/08/2026] FULLSCREEN GIẢ LẬP — chủ hệ: *"bổ sung nút xem full màn
   hình, kể cả khi điện thoại có để rotate màn hình hay không (giống
   youtube)."* Xoay CSS thuần (KHÔNG dùng Fullscreen API trình duyệt — iOS
   Safari chỉ chấp nhận API đó cho thẻ <video>, xem chú thích tại
   `nscPWAMeta` trong chart.js), nên hoạt động đồng nhất mọi nền tảng, kể
   cả chế độ standalone.
   width/height HOÁN ĐỔI (100vh/100vw thay vì 100vw/100vh) rồi xoay 90° quanh
   tâm — sau xoay, kích thước hiển thị đúng khớp viewport thật. `nscVW()`/
   `nscVH()` (chart.js) đã hoán đổi số đo theo đúng chiều này.
   KHÔNG áp `env(safe-area-inset-*)` ở đây: các giá trị ấy theo HƯỚNG VẬT LÝ
   thật của thiết bị, không tự xoay theo transform của nội dung bên trong —
   tính lại cho đúng bốn cạnh sau khi hoán vị trí là rủi ro cao hơn giá trị
   mang lại. Nội dung có thể tràn nhẹ vào vùng notch trên máy có tai thỏ —
   đánh đổi chấp nhận được, cùng cách nhiều ứng dụng khác xử lý fullscreen
   giả lập kiểu này.
   TÊN LỚP `.nsc-rot` — KHÔNG `.full`: tránh trùng tên với `NSC.full` cũ,
   cờ của chế độ "thu ngắn lịch sử" đã gỡ bỏ có chủ đích 16/08/2026 mà
   `tests/test_full_lichsu.py` canh riêng (xem chú thích đầy đủ tại
   `nscVW()` trong chart.js — suýt tái dùng nhầm tên đó). */
#nsChart.nsc-rot{
  width:100vh;height:100vw;
  top:50%;left:50%;right:auto;bottom:auto;
  transform:translate(-50%,-50%) rotate(90deg);
  padding:0}
/* ══ ĐẦU TRANG CHART — MỘT ĐƯỜNG CHÂN CHO MỌI CHỮ ═══════════════════════
   [SỬA 23/08/2026] Chủ hệ, nói cho CẢ tờ trượt lẫn chart: *"tên cổ phiếu,
   và Giá % thay đổi phải nằm trên cùng 1 line phần bottom… header của chart
   cũng phải theo tiêu chuẩn này, không để trên cùng 1 hàng mà bottom lệch
   nhau (trừ các biểu tượng và chip — chúng nên nằm giữa so với chiều cao
   chữ)."*

   GỐC: hàng này là `align-items:center`, nên MỖI ô con được căn giữa RIÊNG
   theo chiều cao thanh. Bốn cỡ chữ khác nhau — tên mã 18px, giá 17px, `%`
   12,5px, KL 12,5px — thành bốn đường chân khác nhau. Trong TỪNG cụm thì
   đúng (`.nsc-tkbtn` và `.nsc-px` đều đã `align-items:baseline`), nhưng hai
   cụm ấy so với nhau thì lệch.

   QUY ƯỚC, giống hệt `.mb-sheet .hd` bên `mobile.css`:
       CHỮ              -> đường chân chung (`align-items:baseline`)
       BIỂU TƯỢNG · CHIP -> `align-self:center`, căn giữa theo chiều cao chữ

   ⚠ PHẢI HAI TẦNG, không gộp được. Đặt `baseline` thẳng lên `.nsc-head` thì
   được đường chân nhưng cả nhóm chữ bị dồn lên ĐỈNH thanh — `hHead` ở `port`
   là 54px mà chữ chỉ cao ~31px, thừa 23px trống bên dưới. Đo được ngay ở
   bản đầu: nút ✕ (căn giữa) lệch tâm 11px so với tên mã. Nên:

       `.nsc-head` giữ `center`  -> căn GIỮA cả hàng trong chiều cao thanh
       `.nsc-hrow` là `baseline` -> căn đường chân GIỮA CÁC Ô trong hàng

   ⚠ `.nsc-tkbtn` và `.nsc-px` PHẢI giữ `align-items:baseline` bên trong.
   Một hộp flex có con căn giữa thì KHÔNG phơi ra đường chân của chữ — trình
   duyệt tự chế một đường chân từ mép hộp, và cả hàng lệch lại theo một kiểu
   khác. Ba tầng phải cùng `baseline` thì mới ăn nhau.

   `height` đặt inline theo `hHead` (xem `nscFrame`) nên đổi phép căn KHÔNG
   làm hàng cao lên. */
.nsc-head{display:flex;flex-direction:column;justify-content:center;
  align-items:stretch;padding:0 12px;flex:none;
  border-bottom:1px solid var(--line-soft);touch-action:pan-y}

/* ── HÀNG PHỤ: SÀN + TÊN DOANH NGHIỆP — [THÊM 11/09/2026] ───────────────
   `.nsc-head` đổi từ `row` sang `column` để chứa hai hàng. `justify-content:
   center` thay vai trò `align-items:center` cũ — vẫn căn giữa theo chiều
   cao thanh, nay là căn giữa CẢ CỤM hai hàng.

   KHÓA CHỐNG TRÀN nằm ở ba khai báo, thiếu một là hỏng:
       `.nsc-hsub` overflow:hidden      — cắt ở mép hộp
       `.nsc-dn`   min-width:0          — CHO PHÉP hộp flex co dưới nội dung
       `.nsc-dn`   text-overflow        — cắt bằng `…` thay vì cắt cụt

   `min-width:0` là chỗ người ta hay quên: mặc định hộp flex có
   `min-width:auto`, tức TỪ CHỐI co nhỏ hơn nội dung, và tên dài sẽ đẩy cả
   hàng tràn ra ngoài thay vì bị cắt. Tên dài nhất trong vũ trụ là CNN (58
   ký tự) — thử bằng nó, không thử bằng FPT.

   `nowrap` bảo đảm hàng phụ LUÔN đúng một dòng, nên chiều cao header là
   hằng số với mọi mã. Đó là điều chủ hệ đòi: *"mất sự đồng đều khi xem
   chart cổ phiếu khác nhau."* */
/* ⚠ `line-height` PHẢI RỘNG HƠN CỠ CHỮ NHIỀU — [SỬA 11/09/2026, lượt hai]
   Bản đầu tôi đặt `line-height:13px` cho chữ 11,5–12,5px, theo thói quen của
   chữ không dấu. Chủ hệ gửi ảnh: *"tên công ty không đủ chiều cao của hàng
   nên bị cắn cả trên cả dưới"* — và đúng là CẢ HAI đầu.

   Tiếng Việt xếp dấu ở HAI TẦNG: dấu mũ/trăng/móc nằm TRÊN (`Ô` `Ă` `Ơ`) và
   dấu nặng nằm DƯỚI (`ạ` `ậ`). Một chữ như "Cổ phần" cần cả hai. Hộp dòng
   bằng đúng cỡ chữ thì cắt phăng cả hai tầng, và `overflow:hidden` của
   `.nsc-hsub` không tha.

   1,4 lần cỡ chữ là mức đủ cho hai tầng dấu; đo trên chính ảnh chủ hệ gửi
   thì 13px cho chữ 12,5px hụt khoảng 5px. */
.nsc-hsub{display:flex;align-items:center;gap:6px;min-width:0;
  margin-top:1px;overflow:hidden;white-space:nowrap;line-height:16px}
.nsc-hsub .nsc-san{flex:0 0 auto;font-family:var(--mono);font-size:9px;
  letter-spacing:.1em;color:var(--ink-faint);
  border:1px solid var(--line-soft);border-radius:3px;padding:0 4px}
.nsc-hsub .nsc-dn{flex:1 1 auto;min-width:0;font-size:11.5px;
  color:var(--ink-faint);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
#nsChart.desk .nsc-hsub{line-height:18px}
#nsChart.desk .nsc-hsub .nsc-dn{font-size:12.5px}
#nsChart.desk .nsc-hsub .nsc-san{font-size:10px}
/* ⚠ `flex:0 0 auto`, KHÔNG phải `1 1 auto` — [SỬA 11/09/2026]
   Trước 11/09 `.nsc-head` là `row`, nên `flex:1 1 auto` ở đây nghĩa là "chiếm
   hết BỀ NGANG". Nay cha đổi sang `column` để chứa hàng phụ, và cùng khai
   báo ấy đổi nghĩa thành "chiếm hết CHIỀU CAO" — hàng đầu sẽ nuốt trọn thanh
   và đẩy hàng phụ ra ngoài.
   Bề ngang nay do `align-items:stretch` của cha lo, không cần `flex` nữa. */
.nsc-hrow{display:flex;align-items:baseline;gap:10px;
  flex:0 0 auto;min-width:0;flex-wrap:nowrap}
/* Nút ✕ · sao · chip nguồn (02/VN30/TRA) — biểu tượng và chip, căn GIỮA. */
.nsc-hrow>.nsc-x,.nsc-hrow .nsc-star,.nsc-hrow .nsc-pn{align-self:center}
.nsc-x{font-size:17px;line-height:1;color:var(--ink-faint);background:none;border:none;
  cursor:pointer;padding:8px;margin-left:-8px}
.nsc-tk{font-family:var(--mono);font-size:18px;letter-spacing:.04em;color:var(--ink)}
.nsc-star{font-family:var(--mono);font-size:11px;color:var(--gold);margin-left:4px}
.nsc-pn{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;color:var(--gold);
  border:1px solid #3A3428;border-radius:3px;padding:1px 5px;margin-left:5px}
/* [SỬA 16/08/2026] Cụm GIÁ đứng CẠNH TÊN MÃ, không bị đẩy ra mép phải.
   `margin-left:auto` cũ đẩy nó sang tận cùng — mắt phải quét ngang cả màn
   hình mới nối được tên với giá. Người dùng: *"đưa giá và % thay đổi sang
   gần tên cổ phiếu, chỉ số"*. Chừa `margin-right:auto` để mọi thứ SAU nó
   (nhãn thương hiệu) vẫn dạt về phải như cũ. */
.nsc-px{display:flex;align-items:baseline;gap:7px;margin-left:14px;margin-right:auto;
  min-width:0}
/* ĐIỆN THOẠI: CỤM GIÁ DẠT HẲN SANG PHẢI — [SỬA 23/08/2026].
   Chủ hệ: *"khối 5 hiện tại đang nằm lưng chừng giữa màn hình, tôi cần căn
   nó sang bên phải cho đẹp."*

   Vì sao chỉ mobile, không đổi luật 16/08 ở trên: trên MÁY TÍNH sau cụm giá
   còn `.nsc-brand` (NSyS · NAMVINI), nên `margin-right:auto` đang là thứ
   đẩy nhãn ấy ra mép. Đảo trên desktop là hai thứ chồng nhau ở góc phải.
   Bản điện thoại KHÔNG dựng `.nsc-brand` (xem `head` trong `chart.js`), nên
   mép phải trống và cụm giá dạt được tới tận nơi.

   `margin-right:0` phải ghi TƯỜNG MINH: chỉ đổi `margin-left` thì `auto`
   của luật trên còn nguyên, hai `auto` chia đôi chỗ trống và cụm giá đứng
   GIỮA — đúng cái "lưng chừng" đang phải chữa. */
#nsChart:not(.desk) .nsc-px{margin-left:auto;margin-right:0}
.nsc-last{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:17px;
  border-radius:2px;padding:0 2px;transition:background .35s;color:var(--ink)}
.nsc-last.up{background:rgba(47,169,122,.28)}.nsc-last.dn{background:rgba(208,85,74,.28)}
.nsc-chg{font-family:var(--mono);font-size:12.5px}
.nsc-kl{font-family:var(--mono);font-size:12.5px;color:var(--ink);letter-spacing:.03em}
/* [GỠ 15/08/2026] `.nsc-nav` · `.nsc-ar` · `.nsc-dots` ĐÃ XOÁ cùng cả tính
   năng chuyển mã trước/sau — xem chú thích tại `chart.js`, chỗ `nscList` cũ.
   Luật `@media(max-width:400px)` giấu chấm trên màn hẹp cũng hết lý do tồn
   tại: không còn chấm nào để giấu. */
/* Ô NGÀY ĐIỀU HƯỚNG — [SỬA 16/08/2026 · lần 2]. Bản đầu là `type=date` TRONG
   SUỐT đè lên chữ: bấm vào KHÔNG hiện gì, vì Chrome chỉ mở bộ chọn khi bấm
   đúng biểu tượng lịch — mà `opacity:0` thì không nhắm được vào nó.

   Nay là ô nhập NHÌN THẤY ĐƯỢC, cùng tông với ô ngày ở thanh đầu trang.
   Hẹp vừa đủ `DD/MM/YYYY`; trên điện thoại thu lại chút cho khỏi chen. */
/* ── Ô NGÀY: RÕ HƠN, KHÔNG CAO HƠN — [SỬA 05/09/2026] ──────────────────
   Chủ hệ: *"Ngày tháng hiển thị nhìn rõ hơn, hiện tại nhìn hơi mờ và to
   hơn 1 chút nếu không làm thay đổi kích thước của thanh."*

   RÀNG BUỘC LÀ CHIỀU CAO THANH, không phải cỡ chữ. `.nsc-bar` cao 30px cố
   định, ô này `padding:3px 0` + `font-size:11px` + viền = ~19px. Nâng chữ
   lên 12,5px và hạ đệm còn 2px thì tổng vẫn ~19px — thanh không đổi.

   `letter-spacing` .02em -> .04em: chuỗi `04/09/2026` toàn số, giãn nhẹ
   thì mắt tách nhóm nhanh hơn mà không cần thêm bề rộng (88px vẫn đủ).

   Và bỏ `--panel2` (nền tối hơn thanh) sang `--panel`: nền tối làm chữ
   trông mờ dù màu chữ vẫn là `--ink`. "Mờ" ở đây phần lớn là do TƯƠNG
   PHẢN NỀN, không phải do màu chữ. */
/* ── TO HẾT CỠ MÀ THANH KHÔNG CAO THÊM — [SỬA LẠI 05/09/2026] ──────────
   Chủ hệ: *"Ngày tháng trên thanh ngày tháng chưa điều chỉnh to hơn hay to
   hết cỡ để không nâng chiều cao thanh rồi?"*

   Lượt trước tôi mới lên 12,5px — chưa tới hạn. Tính lại cho hết:

     CHIỀU CAO  `.nsc-bar` cao 30px cố định. Ô này = line-height (~1,2×cỡ
       chữ) + đệm 2×2px + viền 2×1px. Với 14px: 16,8 + 4 + 2 = **22,8px**,
       còn dư 7px trong thanh 30px. Hạn thật ~18px, nhưng…

     BỀ RỘNG là thứ chặn trước: chuỗi `04/09/2026` = 10 ký tự, phông đều
       ~0,6em mỗi ký tự -> 6 × cỡ chữ. Ở 14px = 84px cộng đệm và giãn chữ
       -> **104px** vừa khít.

   Nên 14px là hết cỡ THỰC TẾ, không phải hết cỡ lý thuyết. Muốn to hơn
   phải cắt bớt ký tự (bỏ thế kỷ: `04/09/26`), và đó là đổi nội dung chứ
   không còn là đổi cỡ chữ. */
.nsc-dayin{width:104px;flex:none;margin-right:6px;
  font-family:var(--mono);font-size:14px;letter-spacing:.03em;text-align:center;
  color:var(--ink);background:var(--panel);font-weight:600;
  border:1px solid var(--line);border-radius:4px;padding:2px 0;line-height:1.2}
.nsc-dayin::placeholder{color:var(--ink-dim);letter-spacing:0}
.nsc-dayin:focus{outline:none;border-color:var(--gold);color:var(--ink)}
/* Nhập SAI khuôn -> viền đỏ. Im lặng nuốt một ngày người ta vừa gõ là tệ
   hơn hẳn báo sai: họ sẽ tưởng chart không có ngày ấy. */
.nsc-dayin.sai{border-color:var(--danger)}
#nsChart:not(.desk) .nsc-dayin{width:80px;font-size:10.5px}
/* Ô NGÀY CHỈ-ĐỌC trên điện thoại — [THÊM 23/08/2026].
   Chủ hệ: *"ô ngày tháng không cần là 1 ô nhập liệu nữa, chỉ đơn thuần là
   hiển thị ngày tháng của phiên thôi… xóa nó khỏi mobile nhưng giữ trên
   desktop."* `chart.js` dựng `<span class="nsc-dayin ro">` thay `<input>`.

   Giữ CHUNG lớp `.nsc-dayin` để bề rộng và phông không đổi — thanh công cụ
   không xê dịch giữa hai bản. `.ro` chỉ gỡ phần "trông như ô nhập được":
   viền, nền, và chỗ đệm của ô. */
.nsc-dayin.ro{width:auto;background:none;border:0;padding:0;margin-right:9px;
  color:var(--ink-soft);text-align:left;white-space:nowrap;align-self:center}
.nsc-day2{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--ink);
  white-space:nowrap;margin-right:4px;font-weight:500}
.nsc-day2 b{font-weight:500}
.nsc-buy{font-family:var(--mono);font-size:10px;letter-spacing:.12em;padding:3px 7px;
  border-radius:3px;color:#14110A;background:var(--mua);font-weight:500;white-space:nowrap;
  flex:none;margin-right:2px}
/* ══════════════════════════════════════════════════════════════════════════
   NÚT THU PHÓNG − / +  [THÊM 16/08/2026]
   Người dùng: *"bổ sung dấu - và dấu + lên trên trái ở vị trí gần chữ
   watermark nsysvn.com, để zoom in zoom out nếu cần."*

   Đặt trong VÙNG VẼ, góc trên-trái, cùng lối kín đáo với chữ nước: mờ khi
   không dùng, rõ khi rê tới. Bánh xe nay lo việc TRƯỢT, nên thu phóng cần
   một lối bấm được — nhưng nó là việc phụ, không được tranh chỗ với giá.

   ⚠ CHỮ NƯỚC `nsysvn.com` thật ra nằm góc DƯỚI-PHẢI (vẽ trong SVG ở
   `nscDraw`). Đặt cặp nút ở TRÊN-TRÁI theo đúng chữ người dùng viết; muốn
   dời sang cạnh chữ nước thì đổi `top`/`left` ngay dưới đây, không phải sửa
   chỗ nào khác.

   ⚠ VA CHẠM ĐÃ TRÁNH: `.nsc-leg` (dải O·H·L·C) đã chiếm `top:5px;left:8px`.
   Đặt nút ở `top:24px` để nằm NGAY DƯỚI dải ấy — cùng góc, không đè chữ.
   Dải leg cao ~14px nên 24px là khoảng hở an toàn. Ai đổi cỡ chữ của leg
   thì phải xét lại con số này. */
/* [SỬA 16/08/2026] Người dùng: *"dấu + - khó nhìn quá, bạn cho nó rõ hơn và
   nằm trong ô tròn"*. Bản đầu để `opacity:.3` và nền `--panel` — trên nền
   tối gần như biến mất. Nay: TRÒN, to hơn, nền sáng hơn nền chart, chữ đậm,
   và mờ ở mức còn ĐỌC ĐƯỢC (.72) thay vì .3. */
/* ══════════════════════════════════════════════════════════════════════════
   NÚT THU PHÓNG − / +  [SỬA 16/08/2026] — ĐÁY PHẢI VÙNG GIÁ.

   Người dùng khoanh đúng chỗ trên ảnh. Trên-trái là nơi mắt đang đọc dòng
   O·H·L·C; nút ở đó chen vào đúng thứ người ta nhìn nhiều nhất.

   `top`/`right` đặt INLINE trong `nscFrame` theo hình học thật (`g.hChart`,
   `g.R`) — chỉ chiều cao vùng giá mới biết đáy nằm đâu, mà nó đổi theo cỡ
   cửa sổ và theo tay kéo chia pane. CSS ở đây chỉ lo HÌNH THỨC. */
#nsChart .nsc-zoom{position:absolute;z-index:9;
  display:flex;gap:6px;opacity:.72;transition:opacity .15s}
#nsChart .nsc-zoom:hover{opacity:1}
#nsChart .nsc-zoom button{width:26px;height:26px;padding:0;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:17px;font-weight:500;line-height:1;
  color:var(--ink);background:var(--panel2);
  border:1px solid var(--ink-dim);cursor:pointer;
  box-shadow:0 1px 3px rgba(0,0,0,.45)}
#nsChart .nsc-zoom button:hover{color:var(--bg);background:var(--ink-soft);
  border-color:var(--ink-soft)}
#nsChart .nsc-zoom button:active{transform:scale(.92)}
/* Điện thoại KHÔNG cần: đã có chụm hai ngón, và mỗi điểm ảnh ở đó đắt hơn. */
#nsChart:not(.desk) .nsc-zoom{display:none}

/* NÚT FULLSCREEN GIẢ LẬP — FAB tròn, neo góc dưới-phải MÀN HÌNH thật, không
   phải vùng chart — [THÊM 21/08/2026]. Chủ hệ: *"đưa về gần góc dưới bên
   phải màn hình, bố trí được mà vẫn đẹp."* Cùng khuôn `.nsc-zoom` ngay
   trên (button tròn, box-shadow, border) nhưng TO HƠN (40px, không 26px)
   vì đây là mobile — ngón tay cần vùng chạm rộng hơn con trỏ chuột.
   `bottom` đặt INLINE (chart.js), tính động theo `hFoot` — không đoán,
   cùng lý do `.nsc-zoom` đã ghi ở trên: "Neo bằng HÌNH HỌC THẬT". */
#nsChart .nsc-full-fab{position:absolute;right:14px;z-index:9;
  width:40px;height:40px;padding:0;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:var(--ink);background:var(--panel2);
  border:1px solid var(--ink-dim);cursor:pointer;
  box-shadow:0 1px 4px rgba(0,0,0,.5);opacity:.85}
#nsChart .nsc-full-fab.on{color:#14110A;background:var(--gold);border-color:var(--gold)}
#nsChart .nsc-full-fab:active{transform:scale(.92)}
/* Chỉ mobile (port/land) — desktop không có khái niệm này (đã đủ rộng, có
   P·V·T bên cạnh sẵn). */
#nsChart.desk .nsc-full-fab{display:none}
/* ── BẢN DỌC: XẾP DƯỚI KÍNH LÚP — [SỬA 25/08/2026] ────────────────────
   Chủ hệ: *"đưa nút full screen về dưới nút search là gọn."*

   Từ 25/08 kính lúp ở lại trên màn chart dọc (`#nsc-seek`, `left:14px`,
   `bottom:74px+safe`). Hai nút nổi ở hai góc đối nhau là mắt phải quét cả
   màn; dồn về một cột trái thì cả hai cùng nằm trong tầm ngón cái.

   CHỈ ĐỔI TRỤC NGANG Ở ĐÂY. `bottom` vẫn do `chart.js` đặt inline — luật
   "MỘT NGUỒN cho một vị trí" ghi ở `fullFab` (23/08) đã trả giá một lần vì
   `bottom` ở JS đánh nhau với `top` ở CSS; không tái lập cửa ấy.

   `#nsChart.nsc-rot` GIỮ NGUYÊN `right:14px` của luật gốc: lúc xoay, kính
   lúp bị ẩn nên không còn gì để xếp dưới, và nút đã có chỗ đứng riêng đo
   được từ 23/08. */
#nsChart:not(.nsc-rot) .nsc-full-fab{right:auto;left:14px;
  /* CÙNG CỠ, CÙNG CỘT VỚI KÍNH LÚP — [SỬA 25/08/2026].
     Chủ hệ: *"căn cho nút full screen rồi to bằng kính lúp và thẳng hàng."*
     46px lấy NGUYÊN của `#nsc-seek` — ô 46 · biểu tượng 24, con số ấy đã
     được chọn ngày 21/08 vì vượt ngưỡng vùng chạm 44px của iOS. Hai nút
     cùng cột trái mà lệch cỡ thì mắt đọc thành "một chính một phụ".
     Biểu tượng 20px chứ không 24: hình bốn góc khung thoáng hơn hình kính
     lúp, để bằng nhau nhìn nó nặng hơn. Ghi đè cả `width`/`height` viết
     inline trong `chart.js` — CSS thắng thuộc tính trình bày của SVG. */
  width:46px;height:46px;
  /* ── MÀU LẤY NGUYÊN CỦA `#nsc-seek` — [SỬA 25/08/2026] ──────────────
     Chủ hệ: *"đưa màu của nút full screen về màu tương tự như màu của nút
     search cho nó đồng bộ."*

     Hai nút nay đứng cùng một cột, cách nhau 10px. Cùng cỡ mà khác màu thì
     mắt vẫn đọc thành "một chính một phụ" — đúng cái đã chữa ở bước cỡ,
     chỉ còn nốt vế màu.

     DÙNG TOKEN `--chart`, KHÔNG gõ hex. Ở hệ này màu LÀ thông tin, và bản
     rà 16/08 đếm được 601 hex gõ cứng trên bảng chuẩn ~14 màu. Giữ nguyên
     cả dự phòng `#D97757` sau `var()` như `#nsc-seek` đang có: hai nút
     sống ở hai cây DOM khác nhau (`body` và `#nsChart`), nên chỉ một bản
     có dự phòng là mở cửa cho hai màu khác nhau ở đúng lúc token hụt.

     `opacity:1` là dòng dễ quên nhất: luật gốc để `.85`, nên nếu chỉ chép
     `color`/`border` thì nút vẫn nhạt hơn kính lúp một tầng — giống mà
     không bằng, khó chịu hơn là khác hẳn.

     BẢN XOAY GIỮ NGUYÊN vàng: ở đó `.on` báo "đang toàn màn hình", và kính
     lúp bị ẩn nên không có gì để đồng bộ cùng. Đổi nốt là xoá mất một dấu
     hiệu trạng thái để lấy sự đồng đều mà không ai nhìn thấy. */
  color:var(--chart,#D97757);
  background:color-mix(in srgb,var(--surf,#11141A) 88%,transparent);
  border-color:color-mix(in srgb,var(--chart,#D97757) 34%,transparent);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 2px 8px rgba(0,0,0,.42);opacity:1}
#nsChart:not(.nsc-rot) .nsc-full-fab:hover{
  border-color:color-mix(in srgb,var(--chart,#D97757) 62%,transparent)}
#nsChart:not(.nsc-rot) .nsc-full-fab:active{background:#15171B;transform:scale(.93)}
#nsChart:not(.nsc-rot) .nsc-full-fab svg{width:20px;height:20px}
/* [GỠ 23/08/2026] Luật `#nsChart.nsc-rot .nsc-full-fab{bottom:auto;top:14px}`
   ĐÃ BỎ. Vị trí nút nay tính TRỌN ở `chart.js` theo `hHead`/`hBar`/`hFoot`.

   Vì sao gỡ chứ không sửa: luật ấy là NGUỒN THỨ HAI cho một vị trí mà
   `style` inline đã quyết, và hai nguồn ĐÁNH NHAU — `style` thắng lớp, nên
   `bottom:auto` chưa từng có hiệu lực; nút đứng đúng chỗ chỉ vì trình duyệt
   bỏ qua `bottom` khi `top`+`height` đã ràng đủ. Đúng do MAY, và may thì
   không tra được khi hỏng.

   Chỗ đặt cũ (góc TRÊN-PHẢI hệ trục gốc) còn chồng lên cụm giá sau khi cụm
   ấy dạt sang phải hôm nay — chủ hệ bắt được ngay lượt dùng đầu. */

/* CỤM NÚT TRÊN DẢI NGĂN HAI PANE — điện thoại, góc dưới-TRÁI khung giá.
   [THÊM 23/08/2026] Chủ hệ khoanh đỏ trên ảnh chụp thật và chỉ đúng chỗ:
   *"tôi muốn nó ở vị trí này, gần cùng vị trí với nút refresh"*, kèm *"làm
   mờ thôi, không nên làm quá rõ như hiện tại, hơi thu hút sự chú ý quá."*

   HAI THỨ TÁCH RỜI, và đây là toàn bộ ý của luật này:
       VÙNG CHẠM   44×44px — giữ nguyên ngưỡng iOS, bấm vẫn dễ
       HÌNH VẼ     17px, `opacity:.42`, không viền không nền — mắt yên
   Bản trước tôi làm 46px CÓ viền, nền và bóng đổ, tức lấy "dùng nhiều" làm
   lý do để làm NỔI. Sai chiều: thứ dùng nhiều là thứ tay đã nhớ chỗ, nên
   nó cần ĐÚNG CHỖ chứ không cần to. Cái phải nổi là chart.

   `.on` (đang bật thước) thì ô ĐẶC lại và biểu tượng thành màu nền — lúc ấy
   nổi là ĐÚNG, vì người dùng đang ở một chế độ khác và phải biết điều đó.
   [SỬA 24/08/2026] Trước là "sáng vàng" (`--gold`); nay dùng `--chart`, xem
   khối lý do ngay dưới.

   `pointer-events` chia hai tầng: khối bọc `none` để KHE HỞ giữa hai nút
   không cướp cú kéo của chart và của `#nsc-grip` (z-index 5) nằm ngay dưới;
   riêng nút thì `auto`.

   KHÔNG cần luật ghi đè cho `.nsc-rot`: cụm nằm TRONG `.nsc-stage` nên nó
   xoay theo chart và vẫn đúng dải ngăn — khác `.nsc-full-fab` neo màn hình,
   thứ đã phải viết riêng một phép dẫn hình học. */
/* ══════════════════════════════════════════════════════════════════════════
   CỤM NÚT DẢI NGĂN — THƯỚC · REFRESH.  [THIẾT KẾ LẠI 24/08/2026]
   ══════════════════════════════════════════════════════════════════════════
   Chủ hệ: *"thiết kế 2 nút này đẹp, hiện đại và tinh tế hơn, hiện tại nhìn
   2 nút này rất tệ, và tôi yêu thích màu logo của claude."*

   BẢN TRƯỚC SAI Ở ĐÂU: `opacity:.42` trên một hộp trong suốt, không hình
   dạng nào. Ý định là "khiêm tốn", nhưng mắt đọc ra "chưa làm xong" — vì
   thiếu hình dạng thì không có gì để đọc là CỐ Ý. Khiêm tốn phải đến từ
   ĐỘ TƯƠNG PHẢN THẤP, không từ việc bỏ trống.

   ── BA TẦNG, MỖI TẦNG MỘT VIỆC ────────────────────────────────────────
     hộp 44×44  trong suốt   -> VÙNG CHẠM (chuẩn tối thiểu cho ngón tay)
     ::before 30px bo góc 9  -> THỨ MẮT THẤY
     svg 17px                -> BIỂU TƯỢNG
   Tách ba tầng để thu nhỏ phần nhìn mà KHÔNG thu nhỏ phần chạm — hai thứ
   này bị gộp làm một là gốc của mọi nút "đẹp mà khó bấm".

   ── MÀU ───────────────────────────────────────────────────────────────
   `--chart` = `--s-dat` = #D97757, đúng sắc đất nung của Claude. Nó ĐÃ có
   trong bảng màu và đang dùng cho biểu tượng mở chart — nên đây là DÙNG LẠI
   một token, không phải thêm một mã màu thứ hai cho cùng một ý.

   ⚠ `--chart` KHÔNG mã hoá trạng thái tăng/giảm (khác `--safe`/`--danger`),
   và đó chính là lý do nó hợp: hai nút này là CÔNG CỤ, không phải tin tốt
   hay xấu. Dùng vàng `--gold` như bản trước thì lẫn với thương hiệu; dùng
   xanh/đỏ thì mắt đọc thành tín hiệu thị trường.

   ── BA TRẠNG THÁI ─────────────────────────────────────────────────────
     nghỉ   viền 26% · nền 9%   — thấy được mà không tranh chỗ với nến
     bật    ô ĐẶC, biểu tượng thành màu nền — đảo sáng-tối là dấu hiệu
            "đang bật" mạnh nhất mà không cần thêm một chữ nào
     bấm    thu 92% + viền đậm lên — phản hồi tức thì, không chờ mạng

   `nsc-pb-phu` (refresh) hiện/ẩn theo khung nhìn, nên nó MỜ DẦN vào thay vì
   bật cái một — thứ nhấp nháy cạnh chart làm mắt liếc theo. */
#nsChart .nsc-panebtn{position:absolute;z-index:6;display:flex;gap:2px;
  align-items:center;pointer-events:none}
#nsChart .nsc-panebtn>button{pointer-events:auto}
#nsChart .nsc-pb{position:relative;width:44px;height:44px;padding:0;border:0;
  background:none;display:flex;align-items:center;justify-content:center;
  color:var(--chart);cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:transform .12s ease}
#nsChart .nsc-pb::before{content:'';position:absolute;left:7px;top:7px;
  width:30px;height:30px;border-radius:9px;
  background:color-mix(in srgb,var(--chart) 9%,transparent);
  border:1px solid color-mix(in srgb,var(--chart) 26%,transparent);
  transition:background .16s ease,border-color .16s ease}
#nsChart .nsc-pb>svg{position:relative}
#nsChart .nsc-pb:active{transform:scale(.92)}
#nsChart .nsc-pb:active::before{
  border-color:color-mix(in srgb,var(--chart) 55%,transparent)}
#nsChart .nsc-pb.on{color:var(--bg)}
#nsChart .nsc-pb.on::before{background:var(--chart);border-color:var(--chart)}
@keyframes nsc-pb-hien{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:none}}
#nsChart .nsc-pb-phu{animation:nsc-pb-hien .18s ease-out}
@media (prefers-reduced-motion: reduce){
  #nsChart .nsc-pb,#nsChart .nsc-pb::before{transition:none}
  #nsChart .nsc-pb-phu{animation:none}
}
/* Máy tính giữ cả hai nút trong thanh công cụ — ở đó là con trỏ chuột.
   `chart.js` đã không dựng cụm ở nhánh `desk`; luật này là lớp thứ hai. */
#nsChart.desk .nsc-panebtn{display:none}

.nsc-stage{flex:none;position:relative;touch-action:none;cursor:crosshair;user-select:none;
  -webkit-user-select:none}
.nsc-stage svg{display:block;width:100%}
.nsc-leg{position:absolute;top:5px;left:8px;right:8px;z-index:2;display:flex;
  flex-wrap:nowrap;overflow:hidden;gap:0 9px;font-family:var(--mono);font-size:9.5px;
  line-height:1.5;color:var(--ink-dim);pointer-events:none;white-space:nowrap;
  text-shadow:0 0 4px #0B0C0E,0 0 4px #0B0C0E}
.nsc-leg span{flex:none}
.nsc-leg b{color:var(--ink-soft);font-weight:500}
/* DÒNG O·H·L·MA NẰM TRONG THANH CÔNG CỤ — chỉ `land`, [THÊM 23/08/2026].
   Chủ hệ: *"2 thanh [ngày tháng, S, nến…] và thanh OHL MA đang chiếm mất 2
   ô chiều cao, tìm cách giảm 1 thanh mà vẫn đủ hiển thị như hiện tại."*

   Gỡ đúng những thuộc tính của bản LỚP PHỦ: hết `absolute`, hết neo bốn
   mép, hết bóng chữ (nền thanh đã đặc nên không cần tách chữ khỏi nến).
   `flex:1` + `min-width:0` cho nó nhận phần bề ngang CÒN DƯ sau các nút và
   co lại trước — nút không bao giờ bị đẩy ra khỏi thanh.

   `margin-left:auto` đẩy cụm sang phải: nút bấm tụ bên trái đúng tầm ngón
   cái, số liệu đọc ở bên phải — cùng lối cụm giá trên đầu trang. */
.nsc-leg.inbar{position:static;flex:1 1 auto;min-width:0;margin-left:auto;
  justify-content:flex-end;text-shadow:none;gap:0 10px;padding-left:8px}
/* THANH CÔNG CỤ — hàng riêng, có đường kẻ ngăn, KHÔNG đè lên vùng vẽ. */
.nsc-bar{flex:none;display:flex;align-items:center;gap:6px;padding:0 10px;
  height:30px;border-bottom:1px solid var(--line-soft);overflow-x:auto;
  scrollbar-width:none}
.nsc-bar::-webkit-scrollbar{display:none}
/* THANH TRẠNG THÁI ĐÁY — gom mọi mẩu chữ rời rạc về một hàng căn hai đầu. */
.nsc-foot2{flex:none;display:flex;align-items:center;gap:12px;
  min-height:26px;padding:5px 12px;border-top:1px solid var(--line-soft);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;color:var(--ink-faint)}
.nsc-fsay{flex:1;min-width:0;line-height:1.4}
.nsc-fsay b{font-weight:500}
.nsc-fbrand{flex:none;color:#4C4F55;font-size:9.5px}
.nsc-tools{display:none}
.nsc-tl{font-family:var(--mono);font-size:9.5px;letter-spacing:.05em;padding:4px 7px;
  border-radius:3px;border:1px solid #2A2D33;background:rgba(11,12,14,.86);
  color:var(--ink-dim);cursor:pointer;white-space:nowrap}
.nsc-tl.on{color:#14110A;background:var(--gold);border-color:var(--gold)}
.nsc-ico{display:flex;align-items:center;padding:3px 7px;color:var(--ink-faint)}
.nsc-ico svg{display:block}
.nsc-lock{opacity:.32;pointer-events:none;letter-spacing:.12em}.nsc-lock.on{opacity:1}
/* [GỠ 21/08/2026] `.nsc-live` và `@keyframes nscBlink` ĐÃ XOÁ cùng huy hiệu
   `● LIVE` (`chart.js`, thanh công cụ). Chủ hệ bỏ hẳn chỉ báo phiên sống.
   Xoá luôn `nscBlink` vì nó CHỈ phục vụ huy hiệu ấy — đã đo, không nơi nào
   khác dùng. Luật CSS mồ côi thì không bao giờ kêu, nên gỡ là gỡ sạch. */
.nsc-ind{position:absolute;top:36px;left:10px;z-index:8;display:flex;flex-direction:column;
  gap:2px;padding:6px;border-radius:5px;border:1px solid var(--line);
  background:rgba(12,13,16,.97);box-shadow:0 8px 24px rgba(0,0,0,.6)}
.nsc-i{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10.5px;
  padding:5px 9px;border-radius:3px;border:1px solid transparent;background:none;
  color:#54575D;cursor:pointer;white-space:nowrap}
.nsc-i.on{color:var(--ink-soft);border-color:#2A2D33;background:#15171B}
.nsc-i i{width:11px;height:2px;border-radius:1px;flex:none;opacity:.35}.nsc-i.on i{opacity:1}
/* ══ BỐ CỤC DESKTOP: chart bên trái, P·V·T thành cột bên phải ══
   Màn hình máy tính là chỗ RỘNG NHẤT — trước đây nó bị xếp nhầm vào "ngang" nên
   vừa thừa diện tích vừa mất hẳn P·V·T. */
.nsc-body{flex:1;display:flex;min-height:0}
.nsc-main{flex:1;min-width:0}
.nsc-side{width:340px;flex:none;border-left:1px solid var(--line-soft);overflow-y:auto;
  /* ── BỀ RỘNG CỘT PHẢI PHẢI CỐ ĐỊNH — [SỬA 02/09/2026] ─────────────────
     Chủ hệ 02/09, kèm hai ảnh: *"chú thích S5, S6, S7… ở 2 ảnh khác nhau,
     cái thì 1 dòng cái thì 2 dòng, trong khi cùng nội dung."*

     `overflow-y:auto` chỉ dựng thanh cuộn KHI CẦN. Bấm một bar có cụm trạng
     thái thì nội dung dài thêm -> thanh cuộn hiện -> cột hẹp đi ~17px ->
     dòng `▼ S5 S6 S7 S8 ▼ S9 S10 · HL ▲ S1 2R R3 HP FTD` gãy làm hai, và
     mọi thứ dưới nó nhảy xuống.

     `scrollbar-gutter:stable` chừa sẵn chỗ cho thanh cuộn dù nó có hiện hay
     không, nên bề rộng NỘI DUNG không đổi. Khác `overflow-y:scroll` ở chỗ
     không vẽ đường ray xám khi chưa cần cuộn — nền tối này thì đường ray ấy
     rất lộ.

     SỬA Ở ĐÂY CHỨ KHÔNG BẮT DÒNG CHÚ THÍCH `nowrap`: bề rộng nhảy làm gãy
     MỌI thứ trong cột, dòng ấy chỉ là chỗ dễ thấy nhất. Chữa triệu chứng
     thì lần sau một bảng khác gãy. */
  scrollbar-gutter:stable;
  padding:14px 16px 20px;background:var(--panel2)}
.nsc-side .nsc-pvt{border-top:none;padding:0;overflow:visible}
.nsc-side .nsc-day{font-size:11px}
.nsc-side .nsc-h .t{font-size:10.5px}
.nsc-side .nsc-h .n{font-size:15px}
.nsc-side .nsc-h .note{font-size:12.5px}
.nsc-side .nsc-pv{font-size:12px;padding:9px 4px}
.nsc-side .nsc-pv.md{font-size:13px;padding:10px 4px}
.nsc-side .nsc-say{font-size:13px;line-height:1.6}
.nsc-head.desk{padding:0 18px}
.nsc-head.desk .nsc-tk{font-size:21px}
.nsc-brand{font-family:var(--mono);font-size:10px;letter-spacing:.18em;color:#4C4F55;
  margin-left:26px}
/* ══ Ô TRA MÃ — bấm vào tên mã để mở ══ */
/* [SỬA 21/08/2026] TÊN MÃ KHÔNG ĐƯỢC XUỐNG DÒNG.
   Chủ hệ: *"chart portrait vnindex hàng tiêu đề bị nhảy xuống dòng thành
   2 dòng... chỉ duy nhất vn-index bị thôi."*

   VÌ SAO CHỈ VN-INDEX: `.nsc-head` là flex `nowrap`, nên các Ô con không
   xuống dòng — nhưng CHỮ BÊN TRONG một ô thì có. `.nsc-tkbtn` không khai
   `flex-shrink` nên mặc định là 1: màn hẹp, cụm giá dài (VN-Index có bốn
   chữ số + điểm thay đổi + khối lượng) thì ô tên bị bóp lại, và CSS ngắt
   dòng ở ĐIỂM NGẮT HỢP LỆ gần nhất — dấu gạch nối của `VN-INDEX`.

   Mọi mã khác chỉ ba chữ cái liền, KHÔNG có điểm ngắt nào, nên dù bị bóp
   cũng không thể tách đôi. Đúng lý do một mình VN-INDEX dính.

   Chủ hệ đoán đúng bản chất khi đề nghị bỏ dấu `-`: nó không phải chuyện
   "ngắn hơn một ký tự" mà là BỎ ĐIỂM NGẮT. Nhưng bỏ dấu thì đổi luôn tên
   quen thuộc trên màn hình, mà `white-space:nowrap` đạt cùng kết quả —
   không còn chỗ nào để ngắt — và giữ nguyên `VN-INDEX`.

   `flex:0 0 auto` để ô tên KHÔNG bị bóp ngay từ đầu; `min-width:0` ở
   `.nsc-px` cho cụm giá nhận phần co lại thay. Ba dòng cùng một ý: tên mã
   là thứ đọc trước, nó không nhường chỗ cho ai. */
.nsc-tkbtn{display:flex;align-items:baseline;gap:5px;background:none;border:none;
  padding:4px 6px;margin-left:-6px;border-radius:4px;cursor:pointer;color:inherit;
  flex:0 0 auto}
.nsc-tk{white-space:nowrap}
.nsc-tkbtn:active{background:#15171B}
.nsc-tkbtn:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
/* [GỠ 23/08/2026] `.nsc-caret` — dấu `▾` sau tên mã đã bỏ khỏi `chart.js`
   (chủ hệ: *"dấu này thừa"*). Gỡ luôn luật, không giữ một lớp không ai
   mang: một luật CSS mồ côi là lời mời cho người sau gắn lại phần tử. */
.nsc-drift{flex:none;background:rgba(242,177,44,.13);border-bottom:1px solid rgba(242,177,44,.4);
  color:#F2B12C;font-family:var(--mono);font-size:10.5px;line-height:1.5;padding:7px 12px}
.nsc-tip{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);z-index:20;
  max-width:92%;font-family:var(--mono);font-size:10.5px;line-height:1.45;
  padding:8px 12px;border-radius:6px;border:1px solid #2E3037;
  background:rgba(12,13,16,.95);color:var(--ink-faint);cursor:pointer;
  box-shadow:0 6px 20px rgba(0,0,0,.6)}
.nsc-tip b{color:var(--gold);font-weight:500}
.nsc-find{position:absolute;inset:0;z-index:60;background:rgba(11,12,14,.98);
  touch-action:auto;display:flex;flex-direction:column;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  /* Ẩn bằng opacity, KHÔNG display:none — phần tử ẩn kiểu display:none không nhận
     được tiêu điểm, mà iOS lại đòi ô nhập phải tồn tại sẵn thì mới mở bàn phím. */
  opacity:0;pointer-events:none;transition:opacity .12s}
.nsc-find.on{opacity:1;pointer-events:auto}
/* ══ Ô TRA KHI ĐANG FULLSCREEN GIẢ LẬP — XOAY NGƯỢC VỀ HƯỚNG VẬT LÝ ══
   [THÊM 21/08/2026]

   Chủ hệ: *"nếu tắt rotate và ấn vào phím full screen để xem xoay ngang thì
   touch vào tìm mã thì lại bàn phím portrait."*

   BÀN PHÍM KHÔNG XOAY ĐƯỢC. Nó do hệ điều hành vẽ theo HƯỚNG VẬT LÝ của
   máy, không theo `transform` của nội dung web — không API nào đổi được
   điều đó. Xoay THẬT thì OS ở landscape nên bàn phím ngang; xoay GIẢ
   (`#nsChart.nsc-rot`) thì máy vẫn đứng nên bàn phím dọc, trong khi ô nhập
   nằm ngang theo chart. Lệch nhau 90° — phải nghiêng đầu mới gõ được.

   Sửa được VẾ CÒN LẠI: xoay NGƯỢC ô tra để nó dựng đứng theo đúng hướng
   vật lý, tức CÙNG hướng với bàn phím. Chart phía sau vẫn nằm ngang; chỉ
   lớp tra mã và bàn phím cùng đứng — đúng thứ mắt và tay cần lúc đang gõ.

   HÌNH HỌC: `#nsChart.nsc-rot` là hộp `100vh × 100vw` đặt ở tâm màn hình
   rồi `rotate(90deg)`, nên TÂM hộp trùng tâm màn hình vật lý. Con đặt ở
   tâm hộp cha, `rotate(-90deg)` triệt tiêu phép xoay của cha (net 0° so
   với màn hình), và lấy `100vw × 100vh` để phủ đúng màn hình thật.

   `inset:auto` bắt buộc — luật gốc `.nsc-find{inset:0}` sẽ kéo bốn cạnh
   theo khung CHA (đã hoán chiều), làm hỏng phép căn tâm bên dưới.

   `env(safe-area-inset-*)` của luật gốc nay lại ĐÚNG cho lớp này: sau khi
   xoay ngược, nó dựng đứng trong hệ vật lý — cùng hệ mà các giá trị
   safe-area được đo. Đây là chỗ DUY NHẤT trong chế độ xoay giả mà
   safe-area khớp tự nhiên, nên không cần và không được đụng tới. */
#nsChart.nsc-rot .nsc-find{
  inset:auto;left:50%;top:50%;
  width:100vw;height:100vh;
  transform:translate(-50%,-50%) rotate(-90deg)}
.nsc-fbar{display:flex;align-items:center;gap:10px;padding:12px 14px;
  border-bottom:1px solid var(--line-soft);flex:none}
#nsc-q{flex:1;min-width:0;background:var(--panel);border:1px solid var(--line);
  border-radius:5px;color:var(--ink);font-family:var(--mono);font-size:17px;
  letter-spacing:.08em;padding:11px 13px;text-transform:uppercase}
#nsc-q:focus{outline:none;border-color:var(--gold)}
/* Vị trí TRÁI/PHẢI của nút ✕ do THỨ TỰ DOM quyết (`chart.js::nscFindHTML`),
   không do luật nào ở đây. Từ 11/09/2026 nó đứng TRƯỚC `#nsc-q` — muốn đổi
   lại thì đổi ở đó, đừng thêm `order` vào luật này. */
.nsc-fx{font-size:17px;line-height:1;color:var(--ink-faint);background:none;border:none;
  cursor:pointer;padding:8px}
.nsc-flist{flex:1;min-height:0;overflow-y:auto;padding:12px 14px;
  display:flex;flex-wrap:wrap;gap:7px;align-content:flex-start}
.nsc-fi{font-family:var(--mono);font-size:14px;letter-spacing:.05em;padding:10px 14px;
  border-radius:5px;border:1px solid var(--line);background:var(--panel);
  color:var(--ink-soft);cursor:pointer}
.nsc-fi:active{background:#15171B;border-color:var(--gold);color:var(--gold)}
.nsc-fnote{width:100%;font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  color:var(--ink-dim);padding:2px 0 6px}
/* ══════════════════════════════════════════════════════════════════════
   THƯ MỤC NGÀNH — [THÊM 07/09/2026]
   Sống TRONG `.nsc-flist` (đang `display:flex;flex-wrap:wrap`), nên hai
   khối con tự đặt `width:100%` để chiếm trọn hàng thay vì xếp cạnh chip mã.
   Màu: chỉ token tầng 2 (`--safe`·`--danger`·`--mua`·`--gold`·`--ink-*`) —
   luật ① của quy chế màu cấm gõ hex ngoài tầng 1.
   ══════════════════════════════════════════════════════════════════════ */
/* ── Ô NGÀNH: TÊN LÀ MỤC TIÊU, SỐ LÀ BỐI CẢNH — [THIẾT KẾ LẠI 11/09/2026]

   Chủ hệ: *"tên ngành vẫn hơi nhỏ so với điểm số ngành nên điểm số vẫn bị
   hút ánh nhìn hơn và việc tìm ngành vẫn dễ bị lẫn."*

   ĐÚNG, VÀ LƯỢT 07/09 MỚI SỬA NỬA VIỆC. Lượt ấy hạ `%` xuống hàng chân và
   viết ở đầu khối *"nay bảng xếp CỐ ĐỊNH nên người ta tìm theo TÊN"* — nhưng
   ĐỂ NGUYÊN `%` ở 19px trong khi tên chỉ 13px, và ngay dưới còn sót nguyên
   câu cũ *"`%` là SỐ DẪN của ô — to nhất"*. Hai câu chú thích đánh nhau
   trong cùng một khối, và CSS nghe câu sai.

   ĐO LẠI BẰNG CÔNG VIỆC THẬT, không bằng cảm giác đẹp. Màn hình này tồn tại
   để **tìm một ngành đã biết tên**, lặp lại nhiều lần mỗi phiên. Trong việc
   ấy:
       TÊN  = thứ người ta đang dò          -> phải là thứ to nhất
       %    = đọc SAU khi đã tìm thấy ô     -> phải nhường
   Số to hơn nhãn thì mắt bị kéo tới số ở MỌI ô, rồi mới quay lại đọc nhãn —
   36 lần cho một lượt tìm. Đó chính là chữ "dễ bị lẫn".

   BA ĐÒN, theo đúng thứ tự sức mạnh thị giác:

   ① CỠ CHỮ ĐẢO NGƯỢC — tên 15,5px/600, `%` 12px. Tên nay lớn hơn số ~1,3
     lần thay vì nhỏ hơn ~1,5 lần. Đây là đòn mạnh nhất và rẻ nhất.
   ② MÀU: tên `--ink` (sáng nhất bảng), số phụ `--ink-dim`. `%` GIỮ xanh/đỏ
     vì màu ở hệ này LÀ thông tin — nhưng ở 12px thì vệt màu chỉ còn là dấu
     nháy bên lề, không phải cái biển.
   ③ NEO DÒNG ĐẦU — `.t` cao cố định đúng hai dòng, nên tên MỌI ô bắt đầu ở
     cùng một cao độ và chân ô cũng thẳng hàng. Mắt quét được MỘT cột tên
     liền mạch thay vì nhảy lên xuống theo ô dài ngắn. Đây là thứ biến lưới
     thành bản đồ nhớ được — đúng thứ chủ hệ cần: *"dùng 1 thời gian là tìm
     được chính xác ngành đó ở đâu."*

   VÌ SAO KHÔNG BỎ HẲN `%`: nó là lý do khối này ra đời (*"phát hiện sóng
   ngành"*). Việc cần làm là hạ cấp, không phải xoá.

   KHÔNG ĐỘNG VÀO `minmax(168px,…)`: trên điện thoại ~380px, 168×2+8 = 344
   vừa đúng HAI cột. Nới thêm là rơi xuống một cột và lưới dài gấp đôi. */
.nsc-ngl{width:100%;display:grid;gap:8px;
  grid-template-columns:repeat(auto-fill,minmax(168px,1fr))}
.nsc-ngo{display:grid;gap:7px;padding:12px 12px 11px;text-align:left;cursor:pointer;
  border:1px solid var(--line);border-radius:8px;background:var(--panel)}
/* `--surface` KHÔNG TỒN TẠI (nợ cũ) -> `--panel2`. [SỬA 07/09/2026] */
.nsc-ngo:active{background:var(--panel2);border-color:var(--chart)}
/* TÊN — thứ to nhất và sáng nhất trong ô. `height` CỐ ĐỊNH (không phải
   `min-height`) để chân mọi ô thẳng hàng; `line-clamp:2` cắt phần thừa của
   vài tên rất dài, đổi lấy một lưới không xô lệch. */
.nsc-ngo .t{
  font-size:15.5px;line-height:1.25;color:var(--ink);font-weight:600;
  letter-spacing:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;height:2.5em;
}
/* HÀNG CHÂN: số mã bên trái, `%` bên phải — hai thông tin phụ trên một
   dòng, không thứ nào tranh chỗ với tên. */
.nsc-ngo .ft{display:flex;justify-content:space-between;align-items:baseline;gap:6px}
/* `%` là SỐ PHỤ — đọc sau khi đã tìm thấy ô. Giữ màu (màu là thông tin),
   bỏ cỡ (cỡ là thứ tranh chú ý). [SỬA 11/09/2026: 19px -> 12px] */
.nsc-ngo .p{font-family:var(--mono);font-size:12px;line-height:1.15;letter-spacing:.01em}
/* SỐ PHỤ CỦA SỐ PHỤ — `%` rổ đều, chỉ hiện khi KHÁC số theo vốn hoá. Chênh
   lệch giữa hai con số là tín hiệu "sóng rộng hay vài mã lớn kéo"; xem
   `_ngO`. Phải nhỏ hơn `%` chính, nếu không hai số thành một khối. */
.nsc-ngo .p .d{display:block;font-size:9.5px;letter-spacing:.04em;line-height:1.4;
  opacity:.72}
.nsc-ngo .n{font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--ink-dim)}
.nsc-ngo .n .mua{color:var(--mua);font-weight:400}
/* THANH ĐỘ RỘNG — phần sáng là tỉ lệ mã TĂNG. Sóng ngành thật thì thanh
   gần đầy; một mã kéo trung bình thì thanh ngắn dù `%` vẫn xanh. Đây là
   thứ phân biệt hai ca ấy chỉ bằng liếc mắt. */
.nsc-ngo .br{height:2px;border-radius:2px;background:var(--danger);opacity:.5;overflow:hidden}
.nsc-ngo .br i{display:block;height:100%;background:var(--safe)}
.ln{color:var(--safe)} .xg{color:var(--danger)} .ph{color:var(--ink-faint)}
/* ── ĐẦU BẢNG MỘT NGÀNH ── */
.nsc-ngh{width:100%;display:flex;align-items:center;gap:10px;padding:0 0 8px}
.nsc-ngb{font-family:var(--mono);font-size:11px;letter-spacing:.1em;padding:6px 10px;
  border:1px solid var(--line);border-radius:5px;background:var(--panel);
  color:var(--ink-faint);cursor:pointer}
.nsc-ngb:active{border-color:var(--gold);color:var(--gold)}
.nsc-ngh .tn{font-size:13px;color:var(--ink);letter-spacing:.01em}
/* ── BẢNG MỘT NGÀNH — DÙNG NGUYÊN `.v30-hd`/`.v30-row`/`.v30-th`/`.v30-dot`
   [SỬA 07/09/2026] Bản đầu tự dựng `.nsc-ngd`/`.nsc-ngr` với lưới px riêng,
   nên khoảng cách dòng·cột và chấm NSyS lệch hẳn VN30. Nay chỉ còn ô CHỨA;
   mọi luật lưới·chiều cao·căn lề·màu chấm đều của VN30, sửa một nơi là hai
   bảng cùng đổi. `.nsc-ngw` gỡ padding ngang 12px của `.v30-hd` vì lớp phủ
   tra cứu đã có padding riêng. */
.nsc-ngw{width:100%}
.nsc-ngw .v30-hd,.nsc-ngw .v30-row{padding-left:2px;padding-right:2px}
.nsc-ngw .v30-row{width:100%;cursor:pointer}
.nsc-ngt{width:100%;display:grid;gap:0}
.nsc-pvt{flex:1;min-height:0;overflow:hidden;padding:8px 12px 14px;border-top:1px solid var(--line-soft);
  /* ── PANEL DỌC CHỈ CÒN VIỆC BÀY — [SỬA 25/08/2026] ────────────────────
     Chủ hệ: *"panel pvt vẫn còn có thể touch để xem từng điều kiện, và nó
     vẫn bị scroll nếu di không chuẩn, 2 việc này không cần thiết ở panel
     này, để ưu tiên những thao tác mới được viết."*

     `overflow-y:auto` -> `overflow:hidden`: hết cuộn, nên một cú rê hơi
     chệch không còn biến thành cuộn nửa vời.

     `touch-action:none` là vế THẬT SỰ chữa "di không chuẩn": không có nó,
     trình duyệt tự quyết cuộn NGAY TỪ nhịp chạm đầu, trước khi JS kịp phân
     xử ngang/dọc — cùng lý do `.nsc-stage` đặt nó từ lâu. Bộ kéo-đóng ở
     `mobile.js` KHÔNG mất: nó nghe `touchmove` và tự `preventDefault`,
     `touch-action` chỉ cấm trình duyệt tự ý cuộn chứ không chặn bộ nghe.

     ⚠ ĐÁNH ĐỔI ĐO ĐƯỢC: nội dung cao hơn panel sẽ bị CẮT, không cuộn tới
     được. Đã đo trước khi đổi (`do_T2/soi_giu_pvt_2508.py` ca ⑮) — xem con
     số ở đó. Nếu sau này thêm hàng điều kiện thì phải đo lại. */
  touch-action:none;
  /* ── iOS: GIỮ LÂU KHÔNG ĐƯỢC BIẾN THÀNH CHỌN CHỮ — [THÊM 25/08/2026] ──
     Chủ hệ: *"khi giữ thời gian đủ lâu thì nó sang chế độ chọn text trên
     trang web."* Từ 25/08 panel này mang cử chỉ giữ-yên 380ms
     (`chart.js::nscPvtGiuBoot`), mà Safari iOS coi giữ lâu là lệnh chọn chữ
     + bật menu ngữ cảnh — nó cướp cú chạm giữa chừng.

     `user-select` một mình KHÔNG đủ trên iOS: nó chặn bôi đen nhưng vẫn để
     menu callout hiện. Phải có cả `-webkit-touch-callout:none`.

     Lấy nguyên hai dòng `user-select` của `.nsc-stage` (đã dùng từ lâu cho
     đúng lý do này) chứ không nghĩ ra bộ mới — vùng vẽ và panel nay cùng
     mang cử chỉ giữ-yên thì phải cùng một lớp bảo vệ. */
  user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.nsc-day{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--gold)}
.nsc-h{display:flex;align-items:baseline;gap:9px;margin:9px 0 6px}
.nsc-h .t{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;color:var(--ink-dim)}
.nsc-h .n{font-family:var(--mono);font-size:13px}
.nsc-h .note{font-size:11.5px;color:var(--ink-dim);margin-left:auto;text-align:right}
/* LƯỚI 4 CỘT ĐỀU thay vì để chip tự xuống dòng.
   8 khe bắt buộc -> đúng 2 hàng · 12 khe hỗ trợ -> đúng 3 hàng, không so le. */
/* [SỬA 17/08/2026] Người dùng: *"T1|T2 đang bị dính vào T3."*

   GỐC: `1fr` có `min-width:auto`, nên ô có chữ RỘNG NHẤT (`T1|T2` — năm ký
   tự cộng dấu gạch) tự nong cột ra, ép các cột kia hẹp lại và tràn qua khe
   6px. Không phải thiếu khoảng cách — là lưới bị đẩy vỡ.

   `minmax(0,1fr)` cắt đúng chỗ ấy: cột không thể rộng hơn phần chia đều,
   nội dung dài thì tự co. **Đúng lỗi `.mb-r5` đã ghi rõ trong `mobile.css`**
   — cùng một bẫy, hai chỗ, và chỗ này sót lại.

   `min-width:0` trên chính chip vì nó là flex container: mặc định `auto`
   cũng không cho con co lại. */
.nsc-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.nsc-pv{font-family:var(--mono);font-size:11px;padding:7px 4px;border-radius:4px;border:1px solid;
  background:none;cursor:pointer;display:flex;align-items:center;gap:4px;min-width:0;
  justify-content:center}
.nsc-pv>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.nsc-pv>b{flex:0 0 auto}
.nsc-pv.ok{border-color:rgba(47,169,122,.38);color:var(--safe);background:rgba(47,169,122,.07)}
.nsc-pv.no{border-color:rgba(208,85,74,.38);color:var(--danger);background:rgba(208,85,74,.07)}
.nsc-pv.md{font-size:12px;padding:7px 9px}
.nsc-say{margin-top:11px;padding:9px 11px;border-radius:5px;background:var(--panel2);
  border:1px solid var(--line);font-size:12px;line-height:1.55;color:var(--ink-soft)}
.nsc-say[hidden]{display:none}
/* Nhãn "đang xem phiên nào" cạnh nhãn 02/03 — [THÊM 25/08/2026].
   Cùng chữ mono 11px như nhãn số hiệu khối, và dùng token `--gold` như
   chính hai nhãn ấy; không gõ hex (bản rà 16/08: 601 hex trên bảng ~14 màu). */
.nv-ngay{font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  color:var(--gold);padding:2px 8px;border-radius:4px;white-space:nowrap;
  border:1px solid color-mix(in srgb,var(--gold) 40%,transparent);
  background:color-mix(in srgb,var(--gold) 10%,transparent)}
.nv-ngay[hidden]{display:none}
/* ── CHIP ĐIỀU KIỆN KHÔNG CÒN BẤM ĐƯỢC Ở BẢN DỌC — [SỬA 25/08/2026] ────
   Chủ hệ: *"nó chỉ cần chức năng hiển thị, ko cần 2 chức năng trên."*

   `pointer-events:none` chứ KHÔNG gỡ `onclick` trong `chart.js:5506`: cùng
   một dòng HTML dựng chip cho CẢ BA bản (dọc · xoay · desktop), nên gỡ ở
   nguồn là giết luôn tính năng ở hai bản kia — nơi nó vẫn đúng và vẫn
   dùng được. Chặn ở tầng CSS thì đúng phạm vi, và `nscSay` không cần biết
   gì về chuyện này.

   Thêm một hệ quả có lợi: cú chạm nay rơi thẳng xuống panel, nên bộ lọc
   `closest('button,a,input,…')` trong `nscPvtGiuBoot` không bao giờ khớp
   chip nữa — trọn panel thành bàn rê, không còn ô chết.

   PHẠM VI, đọc từ `nscFrame`: bản desktop và bản xoay bọc panel trong
   `.nsc-side`, bản dọc thì không. Nên `:not(.desk):not(.nsc-rot)` cộng với
   việc luật này không đụng `.nsc-side` là đủ hẹp.

   GIỮ LẠI `#nsc-say`: nó vô hại khi không ai mở được, và xoá đi là phải
   đụng `nscPvtShell` — tức chạm vào đường dựng DOM chung của ba bản. */
#nsChart:not(.desk):not(.nsc-rot) .nsc-pvt .nsc-pv{pointer-events:none}
.nsc-rejnote{margin-top:10px;padding:9px 11px;border-radius:5px;font-size:12px;line-height:1.6;
  color:var(--ink-faint);background:rgba(224,79,190,.07);
  border:1px solid rgba(224,79,190,.28)}
.nsc-rejnote b{color:var(--mua);font-weight:500}
.nsc-rejnote[hidden]{display:none}
.nsc-marks{display:flex;flex-wrap:wrap;gap:5px 12px;margin-top:12px;padding-top:10px;
  border-top:1px solid var(--line-soft)}
/* ── DÒNG CHÚ THÍCH TRẠNG THÁI: LUÔN MỘT HÀNG — [SỬA 02/09/2026] ────────
   Chủ hệ 02/09: *"tôi muốn 1 hàng chứ không phải 2 hàng."*

   Chỉ áp cho CỘT PHẢI của chart trên máy tính (`.nsc-side`). Bản dọc và
   điện thoại hẹp hơn nhiều, ép một hàng ở đó là chữ tràn ra ngoài — nên
   `flex-wrap:wrap` mặc định ở trên GIỮ NGUYÊN cho chúng.

   Ba việc cộng lại để 43 ký tự vừa 293px:
     · `flex-wrap:nowrap`  cấm gãy dòng
     · khe chip 12px -> 9px
     · `white-space:nowrap` trên chip, để chữ không tự gãy bên trong

   Trước đó lượt sửa `scrollbar-gutter` làm bề rộng ỔN ĐỊNH — nhưng ổn định
   ở HAI hàng, vì cột luôn hẹp đi phần chừa cho thanh cuộn. Hai bản vá này
   đi cùng nhau: một cái chặn bề rộng nhảy, một cái làm nội dung vừa bề rộng
   đã chốt ấy. */
.nsc-side .nsc-marks{flex-wrap:nowrap;gap:5px 9px}
.nsc-side .nsc-marks .ik{white-space:nowrap;flex:none}
.ik{font-family:var(--mono);font-size:10px;color:var(--c);display:flex;align-items:center;gap:5px}
/* ══ KIẾN THỨC NSyS CỦA PHIÊN ĐANG TRỎ ══ */
.nsc-know{display:flex;flex-direction:column;gap:7px}
.kn-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.kn-day{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--ink-soft)}
.kn-st{font-family:var(--mono);font-size:13px;letter-spacing:.04em;font-weight:500}
.kn-rs{font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--ink-dim);
  margin-left:auto;white-space:nowrap}
.kn-rs b{font-size:15px;font-weight:500}
.kn-dim{color:#54575D}
.kn-tier{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em}
.kn-trig{font-size:13px;line-height:1.5;color:var(--ink)}
.kn-desc{font-size:12.5px;line-height:1.65;color:var(--ink-faint)}
.kn-chip{font-family:var(--mono);font-size:11px;line-height:1.5;color:var(--c);
  background:color-mix(in srgb,var(--c) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--c) 32%,transparent);
  border-radius:5px;padding:6px 9px}
.kn-foot{font-family:var(--mono);font-size:10.5px;color:#54575D;letter-spacing:.04em}
.nsc-warnbox{margin:10px 0;padding:10px 12px;border-radius:6px;font-size:12px;line-height:1.6;
  color:#F2B12C;background:rgba(242,177,44,.10);border:1px solid rgba(242,177,44,.35)}
.nsc-warnbox b{color:var(--ink);font-family:var(--mono);font-size:11px}
.nsc-msg{flex:1;display:flex;align-items:center;justify-content:center;font-size:13px;
  color:var(--ink-faint);padding:24px;text-align:center;line-height:1.7}
/* nút mở chart trong phần xổ */
.nsc-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  font-family:var(--mono);font-size:12px;letter-spacing:.1em;padding:11px;border-radius:6px;
  margin-top:10px;border:1px solid var(--gold);background:rgba(201,162,76,.09);
  color:var(--gold);cursor:pointer}
.nsc-btn:active{background:rgba(201,162,76,.2)}
.nsc-btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
@media(prefers-reduced-motion:reduce){#nsChart *{animation:none!important;transition:none!important}}


/* ══════════════════════════════════════════════════════════════════════════
   PANEL THÔNG TIN CƠ BẢN — [THÊM 03/09/2026]
   ══════════════════════════════════════════════════════════════════════════
   Chủ hệ: *"panel này phải không được che hết màn hình chart, vẫn nhìn thấy
   được những nến cuối cùng của màn hình chart ở dưới."*

   RÀNG BUỘC ẤY LÀ HÌNH DẠNG, không phải một lời nhắc. Ba luật dựng nên nó:

     `max-height:62%`  chừa 38% dưới cùng — nơi nến MỚI NHẤT nằm
     `right:0` + `width:min(520px,92%)`  chừa cả một dải bên TRÁI
     KHÔNG có lớp mờ phủ nền  — che bằng bóng tối cũng là che

   ⚠ KHÔNG dùng `position:fixed`. Panel gắn trong vùng gốc chart (`nscEl`),
   nên `%` tính theo chiều cao CHART. Dùng `fixed` thì trên màn hình cao,
   62% của cửa sổ lại lớn hơn cả vùng nến — đúng thứ vừa bị cấm.

   `overflow:auto` vẫn giữ làm lưới an toàn: 12 ô ở `port` hẹp có thể tràn.
   Thà cuộn còn hơn cắt mất dòng cuối. */
.nsc-cb{
  position:absolute; top:0; right:0; z-index:99997;
  width:min(520px,92%); max-height:62%; overflow:auto;
  background:color-mix(in srgb,var(--bg) 94%,transparent);
  backdrop-filter:blur(9px);
  /* ⛔ `--vach` KHÔNG TỒN TẠI — [SỬA 07/09/2026]. Tên thật là `--line`.
     Tôi gõ nhầm ngày 05/09 khi dựng panel này, và CSS không báo lỗi: biến
     thiếu thì thuộc tính bị bỏ qua, nên hai đường viền ấy KHÔNG VẼ GÌ suốt
     hai ngày. Cùng lỗi đã cắn ngày 04/09 với `--nen`, `--nen-2`. */
  border-left:1px solid var(--line);
  border-bottom:1px solid var(--line);
  border-bottom-left-radius:12px;
  box-shadow:0 14px 40px rgba(0,0,0,.5);
  padding:14px 16px 12px;
  animation:nscCbVao .16s ease-out;
}
@keyframes nscCbVao{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* ── RUỘT PANEL DÙNG LUẬT `cb-*` CỦA TỜ TRƯỢT — [SỬA 05/09/2026] ───────
   `nscCoBanVe` nay gọi `mbCoBanVe`, nên các lớp `.cb-ten` · `.cb-chip` ·
   `.cb-hero` · `.cb-nhom` · `.cb-luoi` · `.cb-o` · `.cb-quy` đã có luật ở
   `mobile.css`. Chép chúng sang đây là dựng bản thứ hai của cùng một bố
   cục — đúng thứ vừa gây ra "tàn dư xấu xí".

   Chỉ giữ ở đây phần THUỘC VỀ LỚP PHỦ CHART: vỏ, và nút đóng neo góc. */
.nsc-cb-hd{
  position:sticky;top:0;z-index:2;display:flex;justify-content:flex-end;
  padding:2px 2px 0;
}
.nsc-cb-x{
  font-size:15px;line-height:1;color:var(--ink-faint);
  background:none;border:none;cursor:pointer;padding:4px 6px;
}
.nsc-cb-x:hover{color:var(--ink)}
.nsc-cb-ten{
  flex:1;font-size:15px;line-height:1.32;font-weight:600;color:var(--ink);
}
.nsc-cb-tt{
  margin-top:14px;padding:0 12px;font-size:12.5px;line-height:1.55;
  color:var(--ink-faint);
}
.nsc-info{
  align-self:center;display:flex;align-items:center;
  background:none;border:none;cursor:pointer;
  padding:0;margin-left:6px;
  color:var(--ink-faint);opacity:.75;
  transition:opacity .12s ease,color .12s ease;
}
.nsc-info:hover{color:var(--chart);opacity:1}
.nsc-info:active{transform:scale(.92)}

/* ══ BỐN ICON CHART: MÀU LOGO CLAUDE — [THÊM 05/09/2026] ═════════════════
   Chủ hệ: *"màu thì màu logo claude"*.

   `--chart` = `--s-dat` = #D97757. Đặt màu Ở CSS, không gõ vào SVG: cả bốn
   dùng `stroke="currentColor"` nên MỘT dòng ở đây đổi cả bộ. Gõ vào SVG là
   bốn chỗ phải sửa khi đổi tông, và chắc chắn sẽ sót một.

   `opacity` .78 -> 1 khi hover: giữ được sắc Claude ở cả hai trạng thái,
   thay vì đổi sang màu khác lúc hover — cùng lối `.nsc-info` đang dùng. */
#nsc-seek, .nsc-rulebtn, .nsc-fsbtn, .nsc-info{
  color:var(--chart);
}
#nsc-seek{opacity:.86;transition:opacity .12s ease}
#nsc-seek:hover, #nsc-seek:active{opacity:1}


/* ══ HOA THỊ SỰ KIỆN — bảng ngành & VN30  [THÊM 07/09/2026] ═════════════
   Cùng hình và cùng màu với `.mb-sk-sao` của mobile: một dấu hiệu, một
   nghĩa, hai màn hình. Khác nhau là người đọc phải học hai lần. */
.nsc-sao{color:var(--chart);font-size:10px;line-height:0;margin-left:2px;
  vertical-align:super}

/* ══ MŨI TÊN ĐIỀU HƯỚNG MANG MÀU CLAUDE — [QUY TẮC TOÀN DỰ ÁN 07/09] ════
   Chủ hệ: *"ký tự < lấy màu của claude, đó nên là 1 quy tắc dùng cho toàn
   dự án."*

   Ý NGHĨA CỦA QUY TẮC: màu Claude đánh dấu thứ ĐƯA NGƯỜI DÙNG ĐI ĐÂU ĐÓ —
   nút lùi, nút chuyển phiên, mũi xổ. Chữ trong nút vẫn màu chữ thường, chỉ
   KÝ TỰ MŨI TÊN đổi màu; thế là mắt bắt được lối thoát mà không biến cả
   nút thành một khối màu.

   `:first-letter` không dùng được cho `<` vì nó nằm trong text node chung
   với chữ. Nên nơi dựng phải bọc nó: `<i class="mt">‹</i>`. */
.mt{font-style:normal;color:var(--chart);margin-right:3px}