/* ══ VỎ STUDIO — bảng màu + bộ chữ của bản thiết kế «Studio OpenCADs» ════════
   Nguồn: docs/design/studio-2026/Studio OpenCADs.dc.html (bản CEO gửi).
   Trang duy nhất đang mặc bộ này trước 11/09 là `ban-ve.html`; các màn còn lại
   của người phát hành vẫn là bản sáng cũ, nên đi từ Studio sang bản vẽ là đổi
   hẳn một thế giới. Tệp này là MỘT nguồn màu cho cả khu — sửa ở đây, bảy màn
   đổi theo; không màn nào được khai lại màu của riêng nó.

   ★ VÌ SAO TỐI, TRONG KHI HIẾN PHÁP GHI «KHÔNG ÉP DARK MODE»
   Luật ấy viết cho bề mặt KHÁCH đọc bản vẽ — nền sáng, tương phản cao. Khu này
   không phải chỗ đọc bản vẽ: đây là bàn làm việc của người dựng tool, và chính
   CEO đã vẽ nó tối. Chợ, trang chủ, sàn sự kiện KHÔNG dùng tệp này.

   ★ TÊN BIẾN GIỮ NGUYÊN, CHỈ ĐỔI GIÁ TRỊ
   Bảy màn đang dùng hai họ tên biến khác nhau (họ `--ink/--bg/--orange` và họ
   `--ink/--surface/--brand`). Đổi tên là phải sửa vài nghìn chỗ dùng; đổi giá
   trị thì không sửa chỗ nào. Cả hai họ khai ở đây, trỏ về cùng một bảng màu.

   ★ MỘT BIẾN KHÔNG THỂ DÙNG CHUNG: `--bg`
   Không phải hai nghĩa mà là BA, và không chia theo họ tên biến — chia theo
   từng màn. Đo ngày 11/09:
       studio · dang-tool   `--bg` = nền TRANG
       tool · quan-ly-tool  `--bg` = nền THẺ,  `--bg-2` = nền trang
       connect · ket-noi    `--bg` = nền TRANG, `--bg-2` = ô chìm
   Khai một giá trị chung là chắc chắn lật ngược một phần. Nên nền trang có
   tên RIÊNG, không lệch nghĩa được: `--nen`. Màn nào hiểu `--bg` khác thì tự
   khai lại đúng một dòng bí danh trong `:root` của nó.

   Bẫy đã sập một lần khi dựng tệp này: gán nhầm `--bg:var(--surface)` cho
   `connect.html` thì thẻ và nền trang thành CÙNG màu — cả trang phẳng lì,
   không thẻ nào còn nhìn thấy. Trên nền sáng lỗi ấy vô hình (thẻ trắng viền
   xám trên trang trắng vốn là thiết kế đúng), nên chỉ ảnh chụp mới bắt được.

   ★ ĐỘ TƯƠNG PHẢN đã đo trên nền thẻ #16181B (ngưỡng AA cho chữ thường = 4,5):
     --ink   #F3F4F5 → 14,5:1   --ink-2 #A7ADB4 → 7,4:1   --ink-3 #8B9299 → 5,2:1
     --brand #EF5B25 →  5,3:1   --ok    #2FA37B → 5,6:1   --bad   #E05252 → 4,7:1
   Bản thiết kế còn một mức mờ hơn (#6F767E, 3,2:1). Nó CHỈ được dùng cho nhãn
   mono viết hoa cỡ 10px — chữ trang trí, không mang tin. Không nâng nó lên
   --ink-3, vì làm thế là hạ chữ thường của cả khu xuống dưới AA.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  color-scheme: dark;

  /* ── nền, theo chiều sâu: ngoài → khung → thẻ → thẻ nổi ───────────────── */
  --page:#08090A;          /* mép ngoài cửa sổ */
  --nen:#0E0F11;           /* nền TRANG — tên không lệch nghĩa được */
  --bg:var(--nen);         /* mặc định; màn hiểu khác thì tự khai lại */
  --side:#101113;          /* thanh trên và thanh bên */
  --sunk:#131417;          /* rãnh chìm, ô nhập */
  --surface:#16181B;       /* thẻ */
  --surface-2:#191B1E;     /* thẻ nổi, hàng đang trỏ */

  /* ── chữ ──────────────────────────────────────────────────────────────── */
  --ink:#F3F4F5;
  --ink-2:#A7ADB4;
  --ink-3:#8B9299;
  --ink-4:#6F767E;         /* CHỈ cho nhãn mono viết hoa 10px */

  /* ── đường kẻ ─────────────────────────────────────────────────────────── */
  --line:rgba(255,255,255,.09);
  --hair:rgba(255,255,255,.055);
  --hairline:rgba(255,255,255,.09);   /* (họ tên cũ) = --line */

  /* ── cam: màu của HÀNH ĐỘNG, không phải màu trang trí ─────────────────── */
  --brand:#EF5B25;
  --brand-600:#FF6B35;
  --brand-soft:rgba(239,91,37,.15);
  --brand-on:#FF8A5C;      /* chữ cam đặt trên nền cam mờ */
  --orange:#EF5B25;        /* (họ tên cũ) */
  --orange-600:#FF6B35;
  --orange-050:rgba(239,91,37,.15);

  /* ── trạng thái ───────────────────────────────────────────────────────── */
  --ok:#2FA37B;   --ok-on:#8FD3BB;  --ok-050:rgba(47,163,123,.15);
  --warn:#D9A62E;
  --bad:#E05252;  --bad-on:#FFB0B0;
  --err:#E05252;                       /* (họ tên cũ) */
  --luc:#2FA37B;  --luc-050:rgba(47,163,123,.15);   /* (họ tên cũ) */
  --blue:#5B9BFF;

  /* ── «nhấn đặc»: bản đảo của nút đen chữ trắng ────────────────────────────
     Bảy màn dùng chung một thành ngữ `background:var(--ink); color:#fff` cho
     nút đặc, chip đang chọn, mốc đã xong. Trên nền tối `--ink` là gần trắng,
     nên chữ trắng biến mất — đúng kiểu lỗi mà một lần đổi nền sinh ra hàng
     loạt. Cặp biến này thay thành ngữ ấy: vẫn là một mảng đặc nổi bật nhất
     màn, chỉ đảo chiều. KHÔNG dùng cam ở đây — cam là màu của MỘT hành động
     chính mỗi màn; rải cam lên mọi chip là mất luôn tín hiệu ấy. */
  --solid:#EDEFF1;
  --on-solid:#0E0F11;

  /* Ảnh đại diện — đúng dải màu bản thiết kế dùng ở góc phải thanh trên. */
  --av:linear-gradient(140deg,#F0813A,#C43C1B);
  /* …và ảnh đại diện lúc CHƯA đăng nhập, do `taikhoan.js` tô bằng style nội
     tuyến (CSS không đè được). Nó đọc hai biến này; trang nào không khai thì
     giữ nguyên đĩa sáng cũ, nên khai ở đây KHÔNG chạm tới mặt tiền công khai. */
  --ava-nen:#22262B;
  --ava-chu:#A7ADB4;

  /* Hộp lệnh / hộp mã: chìm hơn thân trang một bậc, như cửa sổ dòng lệnh. */
  --code:#08090A;

  /* ── bóng: trên nền tối, bóng đen phải SÂU hơn mới nhìn thấy ──────────── */
  --sh-1:0 1px 2px rgba(0,0,0,.5);
  --sh-2:0 10px 30px rgba(0,0,0,.55);
  --sh-3:0 30px 80px rgba(0,0,0,.68);

  /* ── chữ: đúng hai bộ của bản thiết kế ────────────────────────────────── */
  --sans:Geist,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

/* Nền sau cùng của cửa sổ. Phải là NỀN TRANG, không phải `--page`: khi thân
   trang ngắn hơn màn hình, phần dưới lộ ra chính lớp này — đặt sai thì có một
   đường nối màu ngay dưới chân trang. `--page` chỉ dành cho màn tự vẽ khung
   thiết bị (dang-tool), và màn ấy tự đặt lấy trên `body`. */
html{background:var(--nen)}
body{background:var(--bg);color:var(--ink);font-family:var(--sans)}

/* Thanh cuộn theo đúng bản thiết kế — mảnh, trôi trên nền, không có máng. */
/* ★ V1 kế hoạch bề ngang (18/09): thanh cuộn hẹp CHỈ cho khung cuộn BÊN TRONG.
   Khai ở cấp gốc thì nó thu cả thanh cuộn của TRANG còn 10px ⇒ bảy màn vỏ Studio
   có khung nhìn 1894 px trong khi 48 màn khác 1889 ⇒ mọi phép căn giữa lệch 2,5 px
   giữa hai nhóm. Dấu cách sau `body` là phần tử HẬU DUỆ — thanh cuộn của tài liệu
   không khớp selector này nên giữ bề rộng hệ điều hành như mọi trang. */
body ::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:rgba(140,146,152,.35);border-radius:8px;
  border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:rgba(160,166,172,.5);background-clip:content-box}
::-webkit-scrollbar-track{background:transparent}

/* Ô nhập trên nền tối: trình duyệt vẽ nền sáng mặc định nếu không nói gì. */
input,textarea,select{color-scheme:dark}

/* Ảnh do người dùng nộp thường có nền trắng và trên nền tối chúng loé lên.
   Bo góc để chúng đọc thành «vật thể» chứ không phải lỗ thủng trên trang.
   KHÔNG giảm sáng và KHÔNG thêm viền: giảm sáng là nói dối về ảnh của họ, còn
   viền thì đè lên ảnh bìa vốn đã có khung riêng. */
img[src]:not([data-nen="1"]){border-radius:8px}