/* ========================================================= NEWSROOM DESIGN SYSTEM -- foundation/tokens.css Moi gia tri cua bo tin tuc chi duoc dinh nghia o day. File khac chi duoc dung var(--nr-*), khong viet so cung. Vi sao khai o :root chu khong khai o .nr: select2 va vai popup cua repo render node ra thang , tuc nam NGOAI .nr. Neu token khai trong .nr thi nhung node do khong thay token va roi ve gia tri rong. Viec khoanh vung de tien to nr- lo, khong can token lam thay. ========================================================= */ :root { /* ---- Khung trang ---------------------------------- */ --nr-container: 1296px; /* trang tong va hub */ /* Be rong cot doc trong bai viet -- ap cho CA chu lan anh/bang/video, mot be rong duy nhat. Do trang tham chieu sforum.cellphones 08/09/2026 @1440: anh va chu deu 841px. */ --nr-gutter: 12px; /* le hai ben -- MOBILE-FIRST, sm+ tang len 24 */ /* ---- Thang khoang cach (buoc 4px) ---------------- */ --nr-space-1: 4px; --nr-space-2: 8px; --nr-space-3: 12px; --nr-space-4: 16px; --nr-space-5: 20px; --nr-space-6: 24px; --nr-space-8: 32px; --nr-space-10: 40px; --nr-space-12: 48px; --nr-space-14: 56px; /* ---- Thang chu ------------------------------------ */ --nr-text-2xs: 11px; --nr-text-xs: 12px; --nr-text-sm: 14px; --nr-text-base: 16px; --nr-text-lg: 18px; --nr-text-xl: 20px; --nr-text-2xl: 24px; --nr-text-3xl: 30px; --nr-text-4xl: 48px; /* Mot thang H1 DUY NHAT cho ca ba trang. Do 10/09/2026: /tin-tuc 48px, hub 38px, trang bai 30px -- cung mot he thong ma ba co, mat nhan ra ngay khi chuyen trang. sforum do duoc 27,65px; minh de nhinh hon mot chut vi tieu de tieng Viet dai hon tieu de tieng Anh. */ --nr-h1: clamp(1.5rem, 2.6vw, 2.25rem); /* 24px -> 36px */ /* Diem dinh cho thanh sticky (tab chu de...). KHAC --nr-anchor-offset: bien do la khoang tru khi BAM NEO, luc do trang co the dang o dinh va header con CAO (117). Con thanh sticky chi co hieu luc SAU khi da cuon -- khi header da CO lai (95). Dung chung mot bien thi thanh sticky treo lo lung cach header 30px (do 10/09 tren hub). */ --nr-sticky-top: 103px; /* header cuon 95 + 8 */ --nr-leading-tight: 1.2; --nr-leading-snug: 1.4; --nr-leading-normal: 1.6; --nr-weight-normal: 400; --nr-weight-medium: 500; --nr-weight-semibold: 600; --nr-weight-bold: 700; /* ---- Mau ------------------------------------------ Nen trang lay dung mau body chung cua toan site, de trang tin tuc khong lech tong voi phan con lai. Doi mot dong o day neu muon mau khac. */ --nr-page-bg: #f5f6f8; /* Be mat CHIM: dung cho the nam ben trong mot .nr-panel da co nen trang. Nhat hon nen trang mot chut de the khong bi nham voi khoang trong ngoai panel. Xem ghi chu "mot tang vien" trong components/card.css. */ --nr-surface-sunken: #f8fafc; --nr-surface: #ffffff; --nr-surface-dark: #111318; --nr-border: #e4e7ec; --nr-border-strong: #cbd5e1; --nr-border-dark: #1f2937; /* vien tren nen toi -- semantic rieng, khong alias border-strong */ /* --nr-ink*: gia tri GOC, khong bao gio bi ghi de. --nr-text/-muted la bien "mau chu hien hanh", CO THE bi mat phang toi ghi de (nr-panel-dark). Component nao tu dat nen SANG phai keo mau chu ve --nr-ink, neu khong se an theo mat phang cha. Da xay ra that: the lien he nam trong tam toi -> chu trang tren nen trang, hoan toan vo hinh. */ --nr-ink: #333333; /* mau chu mac dinh toan newsroom -- user chot 11/09/2026 (truoc #101828) */ --nr-ink-muted: #667085; --nr-text: var(--nr-ink); --nr-text-muted: var(--nr-ink-muted); --nr-text-invert: #ffffff; --nr-text-muted-invert: #9aa3b2; /* chu mo tren nen toi */ --nr-primary: #ed1c24; --nr-primary-dark: #c1141b; /* Do dung lam NEN cho nut mang chu trang. #ed1c24 (mau thuong hieu trong design system) voi chu trang chi dat 4,38:1 -- duoi nguong 4,5 cua chu thuong. Ban nay dam hon ~4%, do 4,72:1, mat thuong gan nhu khong phan biet duoc. Chu do / vien do van dung --nr-primary dung spec. */ --nr-primary-btn: #e31b22; /* Do dung lam CHU/ICON NHO tren nen sang. Cung ly do voi --nr-primary-btn: #ed1c24 tren nen trang chi dat 4,38:1. Ban nay 4,72:1. Do 09/09/2026 tren v2, 5 cho dinh: eyebrow, so lieu hero, nhan chuyen muc, link "Xem tat ca", link trong CTA. Chu LON (>=18px dam / >=24px) van dung --nr-primary duoc vi nguong chi la 3:1 -- vi du so "41 diem" o the mien. */ --nr-primary-text: #e31b22; /* Do dung TREN NEN TOI. #e11d2e tren #111318 chi dat 3,91:1 -- duoi nguong 4,5 cua chu thuong. Ban nay sang hon 30% ve phia trang, do duoc 5,69:1, van doc ra la do thuong hieu. Do bang script contrast 09/09/2026. */ --nr-primary-on-dark: #ea616d; /* MOT mau nhan dien duy nhat cho icon/badge/nut mem trong bo tin tuc. Truoc 09/09/2026 co bon mau (do/xanh duong/xanh la/tim) chia theo chu de: nguoi dung doc ra la "moi khoi mot mau, nhin nhu dua sai chu de" -- mau khong mang thong tin gi ma lai canh tranh voi anh va voi mau thuong hieu. Component chi doc --tone/--tone-text, nen doi o day la doi ca trang. */ --tone: #ed1c24; /* = --nr-primary, khai truc tiep vi tokens duoc doc theo thu tu tu tren xuong */ --tone-text: #e31b22; /* = --nr-primary-text (chu/icon nho tren nen sang) */ /* Nen CHIM trung tinh cho icon tron, badge, nut mem. Truoc 09/09/2026 nhung cho nay dung color-mix(do 8-14%, trang): ra mot mang hong xam duc, nguoi dung goi la "do bam". Nen xam rat nhat de mau do chi con o CHU va ICON. */ --nr-soft: #f2f4f7; --nr-accent-blue: #0068ff; /* chi con lam mau LINK, khong con lam mau chu de */ --nr-link: #0068ff; --nr-focus: #ed1c24; /* ---- Bo goc (dung 3 bac, khong them bac thu 4) --- */ --nr-radius-sm: 8px; /* manh nho: chip, the nho */ --nr-radius-md: 12px; /* the noi dung */ --nr-radius-lg: 12px; /* mat section -- 16 -> 12 ngay 24/09/2026: nguoi dung chot bo goc chi 8-12px */ /* Bong do. TRUOC 09/09/2026 hai bien nay duoc DUNG o 4 cho (hero-link, case, cta-channel) nhung CHUA BAO GIO duoc khai bao -- var() khong giai duoc thi ca khai bao box-shadow bi bo, tuc cac the do khong he co bong. Gia tri lay tu anh design system muc 10: x0 y4 blur16 #10182814. */ --nr-shadow-sm: 0 1px 3px rgb(16 24 40 / 6%); --nr-shadow: 0 4px 16px rgb(16 24 40 / 8%); /* Lop noi cua modal: tren header site (1040) va nut lien he noi (10000), duoi menu mobile cua theme khi mo cung luc khong xay ra. Truoc 26/09/2026 .nr-modal z-index 20 -> header site de len popup. */ --nr-z-modal: 10050; --nr-control-h: 44px; /* ---- Duong vien ----------------------------------- */ --nr-line: 1px solid var(--nr-border); /* ---- Dem trong panel (MOBILE-FIRST, sm+/md+ tang len) --- */ --nr-panel-x: var(--nr-space-5); --nr-panel-y: var(--nr-space-5); /* ---- Chuyen dong ---------------------------------- */ --nr-duration: 180ms; --nr-ease: cubic-bezier(.32, .72, 0, 1); /* ---- Offset neo khi nhay #anchor -------------------- Bang chieu cao thanh header DINH cua site (header.css, .custom-header-*) o trang thai .is-scrolled (header.js bat class nay khi scrollY > 80, tuc sau MOI lan nhay neo) + 8px tho. Do that bang Playwright 05/09/2026 tren /tin-tuc va hub, cuon 800px roi do getBoundingClientRect: <= 991.98 .custom-header-mobile 109px (117 khi o dau trang) 992-1199.98 .custom-header-pc 131px (154 -- menu xuong 2 dong) >= 1200 .custom-header-pc 95px (117 khi o dau trang) Gia tri o day la MOBILE-FIRST; hai moc con lai khai o layout/responsive.css theo dung breakpoint cua header (992 / 1200 -- KHONG trung sm/md/lg cua nr, vi header la phan tu ngoai he nr, no doi o dau thi token doi o do). Token rieng, khong muon bac cua thang khoang cach. Dung o layout.css: `.nr [id] { scroll-margin-top: var(--nr-anchor-offset) }`. PHAI tinh theo header luc CHUA cuon, khong phai luc da cuon. Header site co lai khi them class .is-scrolled, va trinh duyet tinh diem cuon theo layout o thoi diem BAT DAU cuon (header con cao) roi header moi co -- nen noi dung bi keo len dung bang phan co lai. So do that 07/09/2026 (chieu cao den day header, dinh trang / sau khi cuon): 390px, 768px 117 -> 109 (co 8px) 992-1199px 154 -> 131 (co 23px) >=1200px 117 -> 95 (co 22px) Token = chieu cao o DINH trang + 8px tho. Truoc day lay chieu cao SAU khi cuon nen o >=1200px dich nam o 81px trong khi header day 95px -- tieu de section bi che 14px (do bang cach bam that 4 nut nhay tren trang cam nang). */ --nr-anchor-offset: 125px; }