/* Token chữ theo BSC Webtrade Design System (tokens/typography.css). Nạp SAU bundle production để ghi đè. Vì sao cần: bundle production khai báo font-family là "Helvetica Neue NOT USING FIGMA" — tên rác sót lại từ export Figma, lại không có chuỗi dự phòng, nên trình duyệt không khớp được họ nào và rơi về font mặc định. Body còn bị đặt font-weight:100. */ /* Nạp Helvetica Neue thật. Bundle production đã ship sẵn ba file .ttf, nhưng khai báo thành BA HỌ RIÊNG ("Helvetica Neue Regular" / "Medium" / "Bold"), nên font-weight không tự chọn được nét — và không họ nào tên đúng "Helvetica Neue" để --font-primary khớp vào. Kết quả: trên Windows (không cài Helvetica Neue lẫn Helvetica) chuỗi dự phòng rơi xuống Arial, chữ bảng giá rộng hơn production ~4%. Khai báo lại thành MỘT họ "Helvetica Neue" ba nét, trỏ vào chính file của bundle — server.js proxy /static/media/* sang trading.bsc.com.vn rồi giữ lại trong RAM, và index.html vốn đã preload đúng ba file này. 600 (semibold) dùng chung file Bold vì bộ này không có nét semibold. */ @font-face { font-family: "Helvetica Neue"; font-style: normal; font-weight: 400; font-display: swap; src: url(/static/media/helvetica-neue-regular.ea05f611.ttf) format("truetype"); } @font-face { font-family: "Helvetica Neue"; font-style: normal; font-weight: 500; font-display: swap; src: url(/static/media/helvetica-neue-medium.bd96bc9a.ttf) format("truetype"); } @font-face { font-family: "Helvetica Neue"; font-style: normal; font-weight: 600 700; font-display: swap; src: url(/static/media/helvetica-neue-bold.0b929abb.ttf) format("truetype"); } :root { /* Chuỗi dự phòng lấy đúng design system (tokens/typography.css). Ô thứ hai là "Segoe UI" chứ không phải "Helvetica": Windows không cài Helvetica nên ô đó chỉ âm thầm rơi về Arial, trong khi bảng giá production trên Windows thực tế vẽ bằng Segoe UI. */ --font-primary: "Helvetica Neue", "Segoe UI", "Arial", system-ui, sans-serif; /* Thang cỡ chữ — 4 bậc. Bậc 10px đã bị loại khỏi thang: 12px là sàn để dấu tiếng Việt còn đọc được. */ --text-hero: 20px; --text-large: 16px; --text-medium: 14px; --text-small: 12px; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --leading-tight: 1.2; --leading-normal: 1.4; --leading-relaxed: 1.6; --tracking-tight: -0.02em; --tracking-normal: 0em; --tracking-slight: 0.02em; --tracking-wide: 0.04em; --tracking-wider: 0.08em; /* Token hình học/lớp cho Modal & Select — không đổi theo theme nên khai một lần ở gốc. --color-scrim ở đây là CỐ Ý: design system không có bản ghi đè cho light, nền mờ sau modal tối ở cả hai theme. */ --color-scrim: rgba(5, 4, 13, 0.8); --radius-md: 4px; --height-input: 32px; --height-row: 32px; /* dòng bảng (design system tokens/spacing.css) */ --z-modal: 200; /* Thang khoảng cách & chiều cao nút (tokens/spacing.css) — chỉ nhập bậc đang dùng. */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --height-btn-sm: 28px; --height-btn-md: 32px; --height-btn-lg: 40px; /* --- Bảng màu thương hiệu (logo BSC) --- đồng bộ từ design system tokens/colors.css. Ba màu của logo, KHÔNG đổi theo theme — nên khai ở :root chứ không nằm trong khối theme-dark như trước: để trong theme-dark thì ở giao diện SÁNG token biến mất, và bất kỳ chỗ nào đọc thẳng qua var() (không kèm dự phòng) mất màu — tiêu đề "Đã gửi lệnh" của modal xác nhận đã dính đúng lỗi đó. Dùng cho biểu đồ; không dùng làm accent (#2681E0 / #1E4D96). */ --color-brand-blue: #265CAB; /* chữ BSC */ --color-brand-teal: #11AF90; /* nhánh xanh ngọc của mũi tên */ --color-brand-yellow: #FCB326; /* nhánh vàng của mũi tên */ /* Xanh lá dùng chung hai theme (design system: .text-green-custom) — cũng đúng bằng màu "increase" mà pie của production dùng. */ --color-price-up-alt: #21DB77; /* --- Lãi/lỗ ĐẶT TRÊN KHỐI NỀN THƯƠNG HIỆU (bg_quickoder.png của Danh mục & Tài sản) --- Nền đó là lam-lục bão hoà, độ sáng nằm ĐÚNG GIỮA thang, nên cả màu đậm lẫn màu tươi đều chìm. Đo bằng cách vẽ lại chính ảnh nền theo đúng cover + scaleX(-1) rồi lấy vùng pixel ngay dưới dòng chữ: nền trung bình #006E9E, điểm sáng nhất #0176A1 (dòng số canh phải nên rơi vào nửa lam của ảnh sau khi lật). Tỷ lệ tương phản trên điểm SÁNG NHẤT (bản thân là trường hợp xấu nhất): lỗ #F92626 → 1.30 (gần như không đọc được — đây là lỗi anh Huy bắt được) lãi #26E07C → 2.93 (cũng dưới ngưỡng, không chỉ riêng màu đỏ) Cặp đang dùng, cũng đo trên điểm sáng nhất / nền trung bình: lỗ #FFA8A8 → 2.78 / 3.07 (gấp 2,1 lần cũ) lãi #50FF00 → 3.81 / 4.20 (gấp 1,3 lần cũ) LÃI lấy thẳng --color-price-up của design system, nhưng GHI CỨNG giá trị THEME TỐI (#50FF00) chứ không viết var(--color-price-up): khối này dùng chung một ảnh nền ở cả hai theme, mà bản light của token là #238619 — trên nền lam-lục chỉ được 1.09:1, tức mù hẳn. Token đổi theo theme còn nền thì không, nên phải neo giá trị. LỖ thì design system không có sẵn màu nào dùng được ở đây: không sắc ĐỎ nào đạt nổi 4.5 trên nền này — đẩy sáng thì mất chất đỏ và lẫn với hai dòng TRẮNG ngay trên, đẩy tối thì đỉnh cũng chỉ 2.74. Đo bằng OKLab, mỗi nấc đỏ hơn lại tụt contrast: #FFC2C2 3.35 chroma 7.0 | #FFB4B4 3.03 chroma 8.8 | #FFA8A8 2.78 chroma 10.3 Đi qua ba vòng với anh Huy (#FFC2C2 → #FFB4B4 → #FFA8A8) và chốt ở #FFA8A8: hồng quá thì không đọc ra "lỗ", nên ưu tiên giữ sắc đỏ, đổi lại 2.78 — thấp hơn sàn 3:1 một chút nhưng vẫn gấp đôi màu gốc. ---- 16/09/2026: ĐỔI SANG #FA5757, anh Huy chốt sau khi xem số đo ---- Yêu cầu: màu lỗ ở đây lấy đúng ô NHẠT của biểu đồ tỷ trọng, để hai chỗ nói cùng một màu. Ô nhạt = #F92626 trộn 22,5% về trắng = #FA5757. Đo lại trên CHÍNH pixel của bg_quickoder.png (điểm sáng nhất rgb(36,154,168) là trường hợp xấu nhất, và nền trung bình rgb(0,112,158)): #FFA8A8 1.82 / 3.00 ← bản trước #FA5757 1.05 / 1.72 ← bản này #F92626 1.17 / 1.40 ← màu gốc, chính là lỗi anh Huy bắt được lúc đầu Tức ở chỗ nền sáng nhất, màu mới còn THẤP HƠN cả màu gốc. Đã trình bày rõ con số này và anh Huy vẫn chọn ưu tiên sự đồng nhất với biểu đồ. Ghi lại đây để người sau biết đây là ĐÁNH ĐỔI CÓ Ý THỨC, không phải sơ suất — và biết cái giá của nó nếu muốn bàn lại. Muốn vừa đồng nhất vừa đọc được thì dùng cùng hàm trộn nhưng mạnh hơn: 60% → #FDA8A8 (1.81 / 2.98, ngang bản trước). Vàng (đứng giá) #F8EC0C đã đạt 4.14 nên GIỮ NGUYÊN, không đổi cho có bộ. Chỉ dùng TRONG .block-1; ngoài đó nền là #111419/#fff, màu gốc vẫn đúng. */ /* = #F92626 trộn 22,5% về trắng, ĐÚNG ô nhạt của biểu đồ tỷ trọng (xem pieColor trong quick-order.js). Viết bằng color-mix để quan hệ đó hiện ra trong mã, không phải một hex rời mà sau này không ai biết từ đâu ra. */ --color-price-down-on-brand: color-mix(in srgb, #F92626 77.5%, #fff); --color-price-up-on-brand: #50FF00; } /* Nền nhạt của vòng tròn icon trong Toast / AlertDialog và của các hộp cảnh báo (design system §TINT). Pha từ chính token màu nên tự đúng ở cả hai theme. Thang alpha là thang DUY NHẤT của hệ (8–15%), đừng tự pha thang khác khi cần nền nhạt. PHẢI đặt ở body.fss, KHÔNG đặt ở :root. Các --color-* mà chúng tham chiếu được khai trong body.fss.theme-dark / body.fss.theme-white, tức KHÔNG tồn tại trên phần tử . Đặt ở :root thì color-mix() nhận var() rỗng → cả bốn token thành giá trị KHÔNG HỢP LỆ và biến mất lặng lẽ. Đo ngày 12/09/2026: getPropertyValue('--fill-up') trả chuỗi rỗng, nền vòng tròn icon của Toast ra rgba(0,0,0,0) — tức Toast chạy suốt từ trước tới nay mà không có nền tint nào. */ body.fss { --fill-accent: color-mix(in srgb, var(--color-accent) 10%, transparent); --fill-up: color-mix(in srgb, var(--color-price-up) 10%, transparent); --fill-down: color-mix(in srgb, var(--color-price-down) 10%, transparent); --fill-warning: color-mix(in srgb, var(--color-warning) 12%, transparent); } /* Ghi đè họ chữ rác của bundle ở gốc cây, để mọi thứ kế thừa xuống. Dùng !important vì bundle đặt font-family trên nhiều selector đặc hiệu cao. */ html, body, body.fss { font-family: var(--font-primary) !important; } body.fss { font-size: var(--text-medium); font-weight: var(--font-weight-regular); line-height: var(--leading-normal); } /* Bundle đặt font-family riêng cho nhiều lớp con (ô giá dùng -apple-system, nút dùng stack khác). Ép tất cả về một họ để hai trang cùng một mặt chữ. Lặp class .fss bốn lần là cố ý: bundle có những rule kiểu `body.fss.theme-light .txt-p---400-12 { font-family: "Helvetica Neue Regular" !important }` với đặc hiệu (0,3,1). Một selector phổ quát `body.fss *` chỉ đạt (0,1,0) nên thua kể cả khi cũng !important. Lặp class là cách nâng đặc hiệu mà không phải liệt kê từng tên lớp của bundle. */ body.fss.fss.fss.fss *, body.fss.fss.fss.fss *::before, body.fss.fss.fss.fss *::after, body.fss.fss.fss.fss { font-family: var(--font-primary) !important; } /* Bundle đặt font-weight:100 cho body và một số nhãn; 100 không có trong thang. Kéo về regular, các nơi cần đậm hơn tự khai báo lại. */ body.fss, body.fss .index-title, body.fss .title { font-weight: var(--font-weight-regular); } /* Số liệu xếp cột phải thẳng hàng */ body.fss .table-cell, body.fss .wt-table, body.fss .wt-dl dd, body.fss .wt-symprice, body.fss .wt-symchange { font-variant-numeric: tabular-nums; } /* ============================================================= Token MÀU nhập từ BSC Webtrade Design System (tokens/colors.css) ------------------------------------------------------------- Chỉ nhập phần thanh chip đang cần, chép nguyên giá trị và giữ nguyên tên token gốc để đối chiếu được hai chiều. Bundle production cắm thẳng mã màu vào selector của chip nên không sửa tập trung được: mỗi lần đổi hệ màu phải đi sửa từng nơi. Ánh xạ vai trò → token gốc, đo trên bảng giá thật (không đổi pixel nào, chỉ đổi nguồn màu): nền chip #272C37 / #E4EAF2 → --color-btn-secondary-bg chữ chip #FFFFFF / #161F2C → --color-btn-secondary-fg nét khi hover #FFFFFF / #1E4D96 → --color-tab-active (dark) / --color-accent (light) chip đang chọn nét+chữ trắng → --color-tab-active (dark) nền #1E4D96, chữ trắng → --color-accent + --color-on-gradient (light) ============================================================= */ body.fss.theme-dark { --color-btn-secondary-bg: #272C37; --color-btn-secondary-fg: #FFFFFF; --color-tab-active: #FFFFFF; --color-accent: #2681E0; /* --- Token cho Modal / Select (THEME TỐI) --- đồng bộ từ design system tokens/colors.css. Modal xác nhận lệnh trước đây tự chế màu; nay đọc đúng bộ này để khớp component Modal. Phần không đổi theo theme (scrim, radius, chiều cao input, z-index) nằm ở :root bên trên. */ --color-hover: #1F2227; /* nền dòng bảng khi di chuột (.table-row:hover) */ --color-bg-primary: #05040D; /* nền trang (body.fss.theme-dark) — màn phủ như Lịch sử đặt lệnh */ --color-block: #111419; /* nền thẻ modal */ --color-table-header: #1B1F27; /* nền dải tiêu đề modal */ --color-table-row: #111419; /* nền ConfirmBox */ --color-stroke: #2B2E33; /* viền */ --color-text-title: #FFFFFF; --color-text-body: rgba(255, 255, 255, 0.70); --color-text-sub: rgba(255, 255, 255, 0.40); --color-text-disabled: rgba(255, 255, 255, 0.25); --color-bg-input: #272C37; --color-border: #3F4247; --color-warning: #FFCC00; --color-price-up: #50FF00; --color-price-down: #F92626; /* Ba mức giá trần/tham chiếu/sàn — .text-ceil-price / .text-ref-price / .text-floor-price. */ --color-price-ceil: #FF00FF; --color-price-ref: #F8EC0C; --color-price-floor: #0ABDE3; --gradient-btn-buy-start: #26E07C; /* dải mua/bán KHÔNG phân theme */ --gradient-btn-buy-end: #00B854; --gradient-btn-sell-start: #FF4444; --gradient-btn-sell-end: #C20606; --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.45); --color-on-gradient: #FFFFFF; /* Dải primary của dark, chép đúng design system. Trước đây khối này KHÔNG khai — light có mà dark thiếu — nên bất cứ ai đọc token ở dark đều rơi vào khoảng trống. Nút Đăng nhập nay đọc token nên phải có đủ hai theme. Design system cố ý đảo GIÁ TRỊ so với bản đo production (production: #265cab → #2681e0) để -start luôn là màu bên trái; không đổi góc sang 270deg, vì đổi góc thì tên token thành sai. */ --gradient-btn-primary-start: #2681E0; --gradient-btn-primary-end: #265CAB; /* Vai trò trong thanh chip. Dark giữ kiểu "viền" của production: chip đang chọn vẫn NGUYÊN NỀN như chip thường (#272C37), chỉ sáng nét và chữ lên trắng — trạng thái chọn nằm ở nét và chữ, không ở nền. (Có lúc đặt nhầm nền này thành transparent, làm chip đang chọn thủng một lỗ trên thanh; nền phải bằng đúng --color-btn-secondary-bg.) */ --chip-bg: var(--color-btn-secondary-bg); /* Chữ chip CHƯA chọn mờ hơn chip đang chọn — màu chữ mang trạng thái chọn như tab của design system (anh Huy 04/10/2026). --color-text-body (70%) chứ không --color-text-sub (40%): chip có nền đặc, chữ 40% trên #272C37 / #E4EAF2 quá mờ để đọc. */ --chip-fg: var(--color-text-body); --chip-accent: var(--color-tab-active); --chip-active-bg: var(--color-btn-secondary-bg); --chip-active-fg: var(--color-tab-active); } body.fss.theme-light, body.fss.theme-white { --color-btn-secondary-bg: #E4EAF2; --color-btn-secondary-fg: #161F2C; --color-tab-active: var(--color-accent); --color-accent: #1E4D96; --color-on-gradient: #FFFFFF; /* --- Token cho Modal / Select (THEME SÁNG) --- xem khối dark ở trên. Ở light, --color-block và --color-table-row cùng là trắng còn dải tiêu đề mới là xám, nên tiêu đề modal tách khỏi thân bằng nền, ConfirmBox tách bằng viền. */ --color-hover: #EAECF0; /* nền dòng bảng khi di chuột */ --color-bg-primary: #DBE2EB; /* nền trang (body.fss.theme-light) */ --color-block: #FFFFFF; --color-table-header: #F1F2F4; --color-table-row: #FFFFFF; --color-stroke: #DADFE6; --color-text-title: #161F2C; --color-text-body: rgba(22, 31, 44, 0.70); --color-text-sub: rgba(22, 31, 44, 0.40); --color-text-disabled: rgba(22, 31, 44, 0.25); --color-bg-input: #EEEEEE; --color-border: #DADFE6; --color-warning: #E39725; --color-price-up: #238619; --color-price-down: #D13338; /* Tham chiếu ở giao diện sáng là CAM #E39725, không phải vàng — chép đúng design system. */ --color-price-ceil: #D934C8; --color-price-ref: #E39725; --color-price-floor: #26B4E1; --gradient-btn-buy-start: #26E07C; --gradient-btn-buy-end: #00B854; --gradient-btn-sell-start: #FF4444; --gradient-btn-sell-end: #C20606; --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.16); /* Dải primary của LIGHT là LỤC LAM → LAM, đúng design system và đúng bản đo production (production light dùng dải này cho mọi CTA, đếm được 104 lần trong CSS). Có một vòng đã thử đổi thành #2681E0 → #265CAB (chép dải của dark) cho đồng bộ với nút Đăng nhập, rồi trả lại — anh Huy chốt giữ teal → blue. Nút Đăng nhập nay ĐỌC dải này (header.css .wtx-login) thay vì ghi cứng dải của dark, nên ở light nút Đăng nhập và chip đang chọn cùng lục lam → lam. */ --gradient-btn-primary-start: #17B19D; --gradient-btn-primary-end: #2B80E4; /* Chip đang chọn ở light tô bằng chính DẢI primary, không phải một màu phẳng — chip là control cấp CTA nên dùng dải CTA của theme, đó là cách design system nói "đang chọn". Nét (viền, hover) lấy điểm ĐẦU của dải — viền không nhận gradient nên phải là màu phẳng, và lấy điểm đầu thì nét với nền liền mạch. Chữ trên nền bão hoà dùng --color-on-gradient theo nguyên tắc của design system. */ --chip-bg: var(--color-btn-secondary-bg); /* Chữ chip CHƯA chọn mờ hơn chip đang chọn — màu chữ mang trạng thái chọn như tab của design system (anh Huy 04/10/2026). --color-text-body (70%) chứ không --color-text-sub (40%): chip có nền đặc, chữ 40% trên #272C37 / #E4EAF2 quá mờ để đọc. */ --chip-fg: var(--color-text-body); --chip-accent: var(--gradient-btn-primary-start); --chip-active-bg: linear-gradient(90deg, var(--gradient-btn-primary-start), var(--gradient-btn-primary-end)); --chip-active-fg: var(--color-on-gradient); }