/* ============================================================================ FORELY DESIGN v2 — LỚP TINH CHỈNH UI · 29/07/2026 ---------------------------------------------------------------------------- Nạp trên MỌI trang qua forely-config.032de59f.js (khối "Design v2"). Additive. REVERT: gỡ khối inject trong forely-config.032de59f.js (hoặc xoá file này). ============================================================================ */ /* --- HEADER: dọn cụm phải --- */ .uemail{ display:none !important; } #adminLink.lout{ background:#FFFFFF !important; color:#0F172A !important; border:1px solid #CBD5E1 !important; font-weight:600 !important; } #adminLink.lout:hover{ background:#F1F5F9 !important; border-color:#0F172A !important; } #dAdmin{ color:#0F172A !important; } #dAdmin svg{ stroke:#0F172A !important; } /* --- HỆ NÚT --- */ .btn.bsignal, button.bsignal{ box-shadow:0 1px 0 #A9E01A, 0 8px 18px -8px rgba(169,224,26,.55) !important; } .btn.bpri, button.primary{ box-shadow:0 1px 2px rgba(15,23,42,.06), 0 8px 18px -10px rgba(15,23,42,.34) !important; } /* --- THẺ --- */ .card{ transition:transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s, border-color .2s !important; } .card:hover{ border-color:#CBD5E1 !important; } /* ============================================================================ INCREMENT 2 — FP pill, tiêu đề hero, ticker ============================================================================ */ .wallet{ background:#F4FBDD !important; border:1px solid #A9E01A !important; color:#0F1A00 !important; font-family:'JetBrains Mono', ui-monospace, monospace !important; font-weight:700 !important; font-size:13.5px !important; padding:6px 12px !important; border-radius:999px !important; } #fpBal{ color:#4E6B0E !important; } .hero-h1{ letter-spacing:-.03em !important; line-height:1.12 !important; font-weight:800 !important; } .hero-h1 em{ font-style:normal !important; background:linear-gradient(180deg, transparent 62%, #E9FBB2 62%) !important; padding:0 2px !important; } .fx-ticker .fxt-tk{ font-size:12.5px !important; } .fx-ticker .fxt-pc{ font-weight:600 !important; } .fx-ticker .fxt-sep{ opacity:.5 !important; } /* ============================================================================ INCREMENT 3 — bảng "đồng thuận": hết tràn ngang + thanh consensus lime ============================================================================ */ @media (min-width:761px){ .rsec .rtr{ grid-template-columns:minmax(0,2.5fr) minmax(0,1.1fr) minmax(0,1.2fr) minmax(0,1.1fr) minmax(0,1fr) auto !important; } } .rsec .rtr > span{ min-width:0 !important; } .rsec .rt-sh i{ background:#A9E01A !important; } /* ============================================================================ INCREMENT 4 — header: avatar tròn + gom EN vào drawer (CSS-only) ============================================================================ */ #acctBtn.lout{ background:#0F172A !important; border:0 !important; width:36px !important; height:36px !important; padding:0 !important; border-radius:50% !important; } #acctBtn.lout svg{ stroke:#FFFFFF !important; } #acctBtn.lout:hover{ background:#172554 !important; } #langBtn.lout{ display:none !important; } /* ============================================================================ INCREMENT 5 · 30/07 — nâng cấp hệ component (premium polish, toàn site) ============================================================================ */ /* Thẻ: viền dịu + bóng tinh, nâng nhẹ khi hover (cảm giác "chạm được", cao cấp) */ .card{ border-color:#E9EDF3 !important; box-shadow:0 1px 2px rgba(15,23,42,.05) !important; } .card:hover{ box-shadow:0 10px 24px -12px rgba(15,23,42,.18), 0 2px 6px -3px rgba(15,23,42,.06) !important; border-color:#D7DEE8 !important; } #marketList .card{ padding:15px !important; } /* Ô nhập: focus ring nhất quán (a11y + cảm giác cao cấp) */ input:not([type=checkbox]):not([type=radio]):focus, textarea:focus, select:focus{ outline:none !important; border-color:#1E40AF !important; box-shadow:0 0 0 3px rgba(30,58,138,.14) !important; } /* Stat card: số to & rõ hơn */ .pf-stat b{ font-size:18px !important; letter-spacing:-.01em !important; } /* (Thanh đồng thuận đã xử lý ở increment 3 — giữ nguyên pill lime, KHÔNG phủ bóng xám lên) */ /* ============================================================================ INCREMENT 6 · 30/07 — BỘ MÀU "SÁNG THOÁNG" (hướng ② anh duyệt) — PHẦN APP ---------------------------------------------------------------------------- Primary navy→xanh đã đổi ở tầng token (forely-tokens.8a8f6a42.css). App (index.html) KHÔNG dùng .hero → chỉ còn 2 bề mặt tối cần xử lý: tab lọc đang chọn + footer. KHÔNG đụng .hero/.footer riêng của trang marketing (mỗi trang có style riêng, hero của chúng nay là gradient navy→xanh nhờ token — xử lý sáng hẳn ở bước sau để tránh vỡ chữ). Scope footer theo inline-style để không rò sang marketing. ============================================================================ */ /* [17/08/2026] KHỐI GHI ĐÈ TOKEN THÀNH XANH DƯƠNG ĐÃ ĐƯỢC GỠ. Nó từng đặt --f-primary:#2563EB !important ở đây, trong khi forely-tokens.8a8f6a42.css vẫn khai "neo màu = navy #0F172A + lime". Hệ quả đo được: cấu trúc (logo, footer, thẻ dự đoán, ô ngành, vòng story, thẻ ĐÃ GỌI ĐÚNG) là navy, còn nút và link là xanh dương — HAI thương hiệu trên cùng một màn hình, 42 màu khác nhau trên ba tab. Giờ token là nguồn duy nhất và navy thắng. Mọi var(--indigo)/var(--f-primary) trong markup tự chuyển về navy, không cần sửa từng chỗ. */ /* Chip/tab lọc đang chọn: dùng thẳng token, không hardcode nữa */ .chipbtn.on{ background:var(--f-primary) !important; border-color:var(--f-primary) !important; color:#FFFFFF !important; } .chipbtn.on:hover{ background:var(--f-primary-hover) !important; border-color:var(--f-primary-hover) !important; } /* FOOTER app (inline navy #0F172A) → nền sáng, chữ navy. Chọn đúng footer có inline #0F172A → KHÔNG đụng footer trang marketing. */ footer[style*="#0F172A"]{ background:#F1F5F9 !important; color:#51607A !important; border-top:1px solid #E6EBF2 !important; } footer[style*="#0F172A"] a{ color:#46536B !important; } footer[style*="#0F172A"] a:hover{ color:#1D4ED8 !important; } footer[style*="#0F172A"] [style*="color:#fff"]{ color:#0F172A !important; } footer[style*="#0F172A"] [style*="#1E293B"]{ border-color:#E2E8F0 !important; } /* ============================================================================ INCREMENT 7 · 30/07 — HERO earn-banner của App (bản đăng nhập) → sáng ---------------------------------------------------------------------------- app.e09b8a1d.js render 1
(banner "Kiếm FP") TRONG #heroCTA — dùng .hero navy của forely-ui.d8ef955a.css (grep tĩnh index.html không thấy vì markup do JS tạo lúc chạy). Scope theo #heroCTA → CHỈ đụng hero app, KHÔNG đụng .hero riêng của trang marketing (giữ hero xanh đậm — hướng A). Đã preview live (đăng nhập). ============================================================================ */ #heroCTA .hero{ background:linear-gradient(160deg,#F4F7FB 0%,#FAFBFD 55%,#FFFFFF 100%) !important; color:var(--f-text-primary) !important; border:1px solid var(--f-border) !important; box-shadow:var(--f-elev-1), var(--f-elev-2) !important; } #heroCTA .hero-t{ color:var(--f-text-primary) !important; } #heroCTA .hero-sub{ color:var(--f-text-secondary) !important; opacity:1 !important; } #heroCTA .hero-sub b, #heroCTA .hero-sub strong, #heroCTA .hero b, #heroCTA .hero strong{ color:var(--f-accent-text) !important; } #heroCTA .hero::before{ background:radial-gradient(ellipse at center,rgba(15,23,42,.05),transparent 65%) !important; } /* CTA phụ: nền xám trung tính. Trước đây là xanh nhạt + chữ xanh dương — màu thứ ba trên một khối vốn đã có mực và chanh. */ #heroCTA .hb2{ background:var(--f-bg-subtle) !important; color:var(--f-text-primary) !important; border:1px solid var(--f-border) !important; box-shadow:var(--f-elev-1) !important; } #heroCTA .hb2:hover{ background:#E8EDF4 !important; } /* ============================================================================ INCREMENT 8 · 30/07 — MARKETING "SÁNG THOÁNG" (hướng A) ---------------------------------------------------------------------------- Làm SÁNG mọi dải tối KHÔNG-PHẢI-HERO trên trang marketing + nội dung tĩnh (class .fxmf/.cta-box dùng chung, phủ cả kien-thuc/*, legal/*, bao-cao, demo). HERO GIỮ NGUYÊN: KHÔNG rule nào chạm .hero → hero vẫn tối (hướng A). AN TOÀN APP: các class dưới KHÔNG có trong index.html / forely-ui / app.e09b8a1d.js (đã grep). Footer App (#0F172A inline) xử lý ở inc6; ở đây chỉ chạm .fxmf. ============================================================================ */ /* FOOTER .fxmf — KHỐI NÀY ĐÃ GỠ (14/08/2026) --------------------------------------------------------------------------- Khối này từng ép footer sang nền sáng #F1F5F9 vì footer CŨ là một mảng navy phẳng chen giữa trang marketing sáng. Lý do đó không còn: footer giờ do _footer.html sinh ra, tự chứa CSS, và được thiết kế TRÊN nền navy #0B1220. Giữ khối này lại thì footer render HAI KIỂU trên cùng một site — navy ở 228 trang, xám sáng ở 6 trang nạp file này (demo, doanh-nghiep, faq, forely-la-gi, gioi-thieu, lien-he). Đúng cái trôi dạt mà _footer.html sinh ra để chấm dứt. Tệ hơn, nó chỉ đổi màu ĐƯỢC MỘT PHẦN. Footer mới dùng .fxmf-brand chứ không phải .brand, và .blurb thì khối này chưa từng có rule. Hai phần tử đó giữ nguyên màu thiết-kế-cho-navy và rơi xuống nền sáng: thương hiệu FORELY #FFFFFF trên #F1F5F9 = 1.10:1 (gần như vô hình) blurb mô tả công ty #8FA0B8 trên #F1F5F9 = 2.43:1 (WCAG AA cần 4.5:1) Trên nền navy mà footer vốn được thiết kế cho, cả 8 phần tử đều đạt AA, thấp nhất là dòng bản quyền 4.60:1. Số đo bằng Playwright trên trang thật. Không thay bằng rule nào cả — footer tự lo phần nhìn của nó. */ /* .cta-box (chi-so, accuracy, faq, forely-la-gi, bao-cao, kien-thuc/*) → thẻ xanh nhạt */ .cta-box{ background:#EAF1FE !important; color:#0F172A !important; border:1px solid #C6D9FB !important; } .cta-box h3{ color:#0F172A !important; } .cta-box p{ color:#46536B !important; } /* nút phụ .ghost (chữ trắng/viền trắng-mờ cho nền tối) → nút sáng */ .cta-box a.ghost{ background:#fff !important; color:#1D4ED8 !important; border:1.5px solid #C6D9FB !important; } .cta-box .leadf input{ border:1px solid #C6D9FB !important; } .cta-box #leadMsg{ color:#4D7C0F !important; } /* .honesty (chi-so, accuracy) → dải trung tính sáng; nhấn lime → xanh lá đậm */ .honesty{ background:#F1F5F9 !important; color:#46536B !important; border:1px solid #E2E8F0 !important; } .honesty h2{ color:#0F172A !important; } .honesty p{ color:#46536B !important; } .honesty b, .honesty .big{ color:#4D7C0F !important; } /* ---- gioi-thieu (class riêng của trang) ---- */ .cta-section{ background:#F1F5F9 !important; color:#0F172A !important; } .cta-section h2{ color:#0F172A !important; } .cta-section p{ color:#46536B !important; } .cta-section .form-box{ border:1px solid #E2E8F0 !important; box-shadow:0 2px 4px rgba(15,23,42,.05) !important; } .combo-result{ background:#EAF1FE !important; color:#0F172A !important; border:1px solid #C6D9FB !important; } table.comp thead th{ background:#F1F5F9 !important; color:#0F172A !important; } /* (Giữ .tam-card.t1 NAVY → phễu TAM/SAM/SOM navy/xanh/lá; chữ trắng vẫn đọc rõ) */ /* .btn-secondary: mặc định → nút sáng đọc rõ; TRONG .hero (nền tối) giữ trắng */ .btn-secondary{ background:#fff !important; color:#1D4ED8 !important; border:1.5px solid #C6D9FB !important; } .btn-secondary:hover{ background:#EFF4FF !important; } .hero .btn-secondary{ background:transparent !important; color:#fff !important; border:1.5px solid rgba(255,255,255,.6) !important; } .hero .btn-secondary:hover{ background:rgba(255,255,255,.1) !important; } /* ============================================================================ INCREMENT 9 · 30/07 — ĐỒNG BỘ HERO MARKETING → gradient navy→xanh (đẹp cho user) ---------------------------------------------------------------------------- doanh-nghiep/chi-so/accuracy (+ bao-cao) hardcode .hero nền navy PHẲNG (#0F172A→#0F172A) — tối phẳng, lệch với hero gradient của gioi-thieu. Đồng bộ MỌI .hero marketing thành gradient navy→xanh (giống gioi-thieu) cho nhất quán. AN TOÀN APP: .hero của app đều nằm trong #heroCTA (renderHero, cả bản khách & đăng nhập) → inc7 (#heroCTA .hero, đặc tả cao hơn) vẫn thắng → hero app GIỮ SÁNG. Không trang nào nạp v2.css có .hero nền sáng (đã kiểm) → không làm tối nhầm. */ .hero{ background:linear-gradient(135deg,#0F172A 0%,#2563EB 100%) !important; } /* ============================================================================ INCREMENT 10 · 30/07 — LỀ 2 BÊN CHO APP (thoáng, hết tràn sát mép) ---------------------------------------------------------------------------- Màn ≥1340px: .wrap của app nở tới 1440px ≈ chạm mép (lề ~0). Thu về 1280px (box-sizing:border-box toàn site → max-width = bề rộng ngoài → lề ~80px mỗi bên ở màn 1440px) + căn giữa để luôn có lề 2 bên; căn header .hbar khớp nội dung. Scope theo #mainContent / footer .wrap / .hbar (APP) — KHÔNG đụng trang marketing (chúng dùng header .f-topbar + container .container/.wrap riêng, giữ nguyên). ============================================================================ */ @media(min-width:1340px){ #mainContent{ max-width:1280px !important; } footer .wrap{ max-width:1280px !important; } .hbar{ max-width:1280px !important; margin-left:auto !important; margin-right:auto !important; padding-left:26px !important; padding-right:26px !important; box-sizing:border-box !important; } } /* ============================================================================ TYPO v3.1 (05/08) — THANG CHỮ MẬT ĐỘ CAO CHUẨN POLYMARKET, nhích xuống thêm một nấc nhỏ theo yêu cầu founder. (thay thế v3; gốc từ các bản vá v2.1–v2.3) Sàn 12px. REVERT: xoá từ dòng "TYPO v3.1" tới hết file. ============================================================================ */ :root{ --f-size-sm:12px !important; --f-size-base:13px !important; --f-size-md:13.5px !important; --f-size-lg:14.5px !important; --f-size-xl:16px !important; --f-size-2xl:19px !important; --f-size-3xl:22px !important; } h1{ font-size:clamp(18px, 1.4vw + 11px, 22px) !important; line-height:1.25 !important; } h2{ font-size:15px !important; line-height:1.3 !important; } h3{ font-size:14px !important; } /* Ép các cỡ px cứng trong markup inline về thang mới */ [style*="font-size:19px"], [style*="font-size: 19px"]{ font-size:14.5px !important; } [style*="font-size:18px"], [style*="font-size: 18px"]{ font-size:14px !important; } [style*="font-size:17px"], [style*="font-size: 17px"]{ font-size:13.5px !important; } [style*="font-size:16px"], [style*="font-size: 16px"]{ font-size:13px !important; } /* --- MOBILE ≤600px: cùng mật độ, hạ nhẹ một nấc --- */ @media(max-width:600px){ :root{ --f-size-base:12.5px !important; --f-size-md:13px !important; --f-size-lg:13.5px !important; --f-size-xl:15px !important; --f-size-2xl:17px !important; --f-size-3xl:20px !important; } body{ line-height:1.5 !important; } h1{ font-size:clamp(16px, 4.2vw, 17.5px) !important; } h2{ font-size:14px !important; } h3{ font-size:13px !important; } [style*="font-size:19px"], [style*="font-size: 19px"]{ font-size:13.5px !important; } [style*="font-size:18px"], [style*="font-size: 18px"]{ font-size:13px !important; } [style*="font-size:17px"], [style*="font-size: 17px"]{ font-size:12.5px !important; } [style*="font-size:16px"], [style*="font-size: 16px"]{ font-size:12.5px !important; } [style*="font-size:15px"], [style*="font-size: 15px"]{ font-size:12px !important; } img, iframe{ max-width:100%; } table{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; } .btn, button[class*="btn"]{ padding-top:10px !important; padding-bottom:10px !important; } } /* Tablet 601–900px: trung gian */ @media(min-width:601px) and (max-width:900px){ :root{ --f-size-xl:15.5px !important; --f-size-2xl:18px !important; --f-size-3xl:21px !important; } h1{ font-size:clamp(17px, 2.2vw + 5px, 20px) !important; } } /* Cảm ứng: nút đủ lớn để bấm */ @media(hover:none) and (pointer:coarse){ button:not(.pill):not(.chip):not(.tag), .btn, [role="button"], input[type="submit"]{ min-height:40px; } a, button{ -webkit-tap-highlight-color:transparent; } } /* ============================================================================ LOGO HEADER (05/08) — phóng icon 2 vòng tròn lên cho khít với wordmark (yêu cầu founder: icon hơi nhỏ so với chữ FORELY). Áp mọi header dùng mark chuẩn. REVERT: xoá khối này. ============================================================================ */ a.lg > svg{ width:27px !important; height:27px !important; margin-right:3px !important; } a.logo > svg, .logo > svg{ width:27px !important; height:27px !important; vertical-align:-7px !important; } .logo-icon{ width:34px !important; height:34px !important; } /* ============================================================================ TÀI KHOẢN — SỬA LỖI "MẤT" CÁC THẺ CÀI ĐẶT (05/08) ---------------------------------------------------------------------------- NGUYÊN NHÂN: .acct-body dùng CSS multi-column (column-count:2) NHƯNG là flex item có chiều cao cố định + overflow-y:auto. Trong CSS multi-column, khi chiều cao bị giới hạn, cột mới tràn SANG NGANG → 11 thẻ xếp thành ~3 trang cột (scrollWidth 2916px / khung 980px). Người dùng chỉ thấy 2 thẻ đầu; các thẻ sau — trong đó có "Thông tin cá nhân" chứa ô SỬA TÊN HIỂN THỊ — nằm ngoài màn hình bên phải và phải cuộn ngang mới thấy (gần như không ai phát hiện, nhất là mobile). CÁCH SỬA: bỏ multi-column, dùng grid tự xuống dòng → mọi thẻ nằm trong luồng cuộn dọc bình thường. REVERT: xoá khối này. ============================================================================ */ .acct-body{ column-count:initial !important; columns:auto !important; display:grid !important; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)) !important; align-content:start !important; align-items:start !important; gap:16px !important; overflow-x:hidden !important; } .acct-body > .card{ display:block !important; width:auto !important; margin-bottom:0 !important; } @media(max-width:760px){ .acct-body{ grid-template-columns:1fr !important; } } /* ============================================================================ THẺ DỰ ĐOÁN — LỚP TRÌNH BÀY (INCREMENT 13 · 16/08, thay khối 05/08) ---------------------------------------------------------------------------- Khối "hướng Polymarket (05/08)" trước đây đã bị GỠ. Nó cố sửa thẻ bằng CSS thuần, nên phải bám vào những thứ không nên bám: thứ tự thẻ div (.orow > div:nth-child(3)) và một chuỗi màu nằm trong thuộc tính style (.orow[style*='BEF264']). Cách đó chỉ đứng vững đến lúc ai đó sửa markup — và markup đã sửa. Nó cũng ép mọi câu hỏi cao đúng 3 dòng (min-height:calc(3*1.34*15px)) nên câu ngắn để lại một mảng trống lớn. Giờ markup do marketCard() dựng đúng hình dạng cần có, nên CSS ở đây chỉ còn việc trình bày, không còn !important, không còn selector bám thứ tự. Ba quyết định đáng ghi lại: · Thanh tỷ lệ nằm DƯỚI chữ. Kiểu cũ tô nền sau chữ, nên mép màu cắt ngang giữa dòng và chữ nằm vắt qua hai nền — đó là lý do dòng "2.000 FP → 4.000 FP nếu đúng" gần như không đọc được. · Cả hàng là