/* ===================================================================== * TRADINGAUTO — BỘ BIẾN DÙNG CHUNG * Tách ra khỏi tradingauto.css ngày 17/09/2026 * --------------------------------------------------------------------- * Tệp này là NGUỒN SỰ THẬT của màu sắc, khoảng cách, bóng đổ và bo * góc cho CẢ HAI nửa web: * * shell/app/header.php — khu vực đã đăng nhập * shell/site/header.php — trang công khai * * Trước đây khối này nằm trong tradingauto.css, mà tệp đó chỉ nạp ở * nửa đã đăng nhập. Nửa công khai nạp Bootstrap thẳng từ CDN nên * không với tới biến nào — mỗi trang tự viết màu, đo được 215 mã màu * khác nhau và 3.476 dòng CSS nội tuyến. Hai nửa nhìn như hai sản phẩm. * * ĐỔI MÀU Ở ĐÂY LÀ ĐỔI CẢ WEB. Số đo tương phản ghi kèm từng dòng * là đo thật; sửa màu thì phải đo lại. * ===================================================================== */ :root{ /* ---- Nền và bề mặt ---------------------------------------------- * Bốn bậc, từ chìm nhất lên nổi nhất: * * --ta-bg nền của cả trang, thứ mọi khối nằm lên * --ta-sunken hố chìm BÊN TRONG một khối: ô nhập, nhãn, di chuột * --ta-surface mặt khối chính * --ta-surface-2 khối nổi cao nhất: hộp thoại, dropdown, bảng * * Sửa 18/09/2026 — nền trang trước đây là #EFF1F4, chỉ chênh mặt khối * 1,07:1. Trên phần lớn màn hình thì không nhìn ra: cả trang đọc thành * một mảng trắng liền, không thấy đâu là khối đâu là nền. * * Nay là #E7EEEC — nghiêng về chính sắc của màu nhấn (teal #0F766E) * chứ không phải một xám trung tính bất kỳ. Nền mang sắc của thương * hiệu thì đọc ra là MÀU ĐƯỢC CHỌN, còn xám thuần thì đọc ra là chưa * ai chọn gì. * * Số đo so với mặt khối #F7F8FA: * #EFF1F4 (gốc) 1,07:1 #E7EEEC (nay) 1,11:1 * So với trắng #FFFFFF: * #EFF1F4 (gốc) 1,13:1 #E7EEEC (nay) 1,18:1 * * NỀN ĐẬM LÊN THÌ CHỮ XÁM TRÊN NỀN KHÓ ĐỌC ĐI, không phải dễ hơn — * chữ ở đây là chữ tối, nền tối lại thì hai bên xích gần nhau. Tôi * viết ngược điều này lần đầu, số đo bắt được. Đợt ấy nền xuống tới * #DCE2EA nên ba thứ tụt dưới 4,5:1 và đã phải kéo xuống theo: * --ta-fg-2, --ta-fg-3 (ngay dưới đây), --bs-link-color (trangcong.css) * và .sdca .punch (smartdca.php). Nền nay sáng hơn #DCE2EA nên cả bốn * chỉ dư thêm biên an toàn — GIỮ NGUYÊN, đừng nhạt lại. * ------------------------------------------------------------------ */ --ta-bg: #E7EEEC; /* nền trang, ngả sắc teal của màu nhấn */ --ta-sunken: #E0E8E6; /* khối chìm: ô nhập, thanh tiến trình */ --ta-surface: #F7F8FA; /* mặt khối chính */ --ta-surface-2: #FFFFFF; /* khối nổi cao nhất: hộp thoại, dropdown */ /* ---- Chữ --------------------------------------------------------- Số đo là cặp: trên MẶT KHỐI #F7F8FA / trên NỀN TRANG #E7EEEC. Phải đạt ở CẢ HAI — chữ mờ xuất hiện ở cả hai chỗ. Lần đầu tôi chỉ đo trên mặt khối nên --ta-fg-3 tụt xuống 4,03:1 khi nằm trên nền. Sửa 18/09/2026: --ta-fg-3 cũ là #616C7A. Đợt thử nền #DCE2EA nó tụt còn 4,09:1 nên phải kéo cả hai bậc chữ mờ xuống, giữ đúng khoảng cách nhìn thấy được giữa chúng: cũ #4E5A66 / #616C7A trên mặt khối 6,6 và 5,0 — cách nhau 1,6 nay #48525E / #565F6B trên mặt khối 7,5 và 6,1 — cách nhau 1,4 Nền chốt lại sáng hơn #DCE2EA nên hai màu này chỉ dư biên an toàn. Đừng nhạt lại: 4,03:1 của bản đầu là bài học đã trả giá một lần. */ --ta-fg: #172026; /* 15.6 / 13.4 chữ chính */ --ta-fg-2: #48525E; /* 7.5 / 6.7 chữ phụ */ --ta-fg-3: #565F6B; /* 6.1 / 5.5 nhãn, chú thích — đừng nhạt hơn */ /* ---- Màu nhấn ---------------------------------------------------- */ --ta-accent: #0F766E; /* 4.9:1 trên mặt khối */ --ta-accent-ink: #0B5D57; /* đậm hơn, dùng cho chữ nhỏ */ --ta-accent-soft: #E3F1EF; /* nền nhạt của nhãn */ --ta-accent-fg: #FFFFFF; /* ---- Màu ngữ nghĩa. LUÔN đi kèm chữ hoặc biểu tượng, không bao giờ chỉ dùng màu để truyền tin — người mù màu không đọc được. ----- */ --ta-ok: #0B6E4F; --ta-ok-soft: #E2F2EB; --ta-warn: #9A6206; --ta-warn-soft: #FBF0DC; --ta-err: #A62222; --ta-err-soft: #FAE7E7; --ta-info: #1D4ED8; --ta-info-soft: #E6ECFB; /* ---- Đường nét --------------------------------------------------- */ --ta-line: #DFE3E9; --ta-line-2: #EAEDF1; /* ---- Bo góc ------------------------------------------------------ */ --ta-r-sm: 9px; --ta-r: 13px; --ta-r-lg: 17px; --ta-r-pill: 999px; /* ---- Bóng đổ: LUÔN hai chiều, nguồn sáng trên–trái --------------- */ --e1: 3px 3px 7px rgba(163,171,185,.30), -3px -3px 7px rgba(255,255,255,.90); --e2: 6px 6px 14px rgba(163,171,185,.38), -6px -6px 14px rgba(255,255,255,.95); --e3: 10px 10px 24px rgba(163,171,185,.42), -8px -8px 20px rgba(255,255,255,.98); /* khối chìm xuống, dùng cho ô nhập */ --e-in: inset 2px 2px 5px rgba(163,171,185,.45), inset -2px -2px 5px rgba(255,255,255,.95); /* ---- Khoảng cách, thang 4px -------------------------------------- */ --ta-1: 4px; --ta-2: 8px; --ta-3: 12px; --ta-4: 16px; --ta-5: 20px; --ta-6: 24px; --ta-8: 32px; --ta-10: 40px; /* ---- Chuyển động. Skill chốt 200–300ms cho phong cách này -------- */ --ta-fast: 150ms cubic-bezier(.4,0,.2,1); --ta-base: 240ms cubic-bezier(.4,0,.2,1); /* ---- Chữ --------------------------------------------------------- */ --ta-font: "Be Vietnam Pro", "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif; --ta-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; }