/* ════════════════════════════════════════════════════════════════ NBRE · base.css — :root tokens, reset, .btn/.eyebrow, overlays, loader Tách từ styles.css. THỨ TỰ NỐI (cascade) trong index.html: base → layout → components → estate-detail → editorial → detail-modules → overlays → theme-light. KHỐI light-theme override nằm CUỐI theme-light.css — đừng đảo thứ tự . ════════════════════════════════════════════════════════════════ */ /* ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ NAM BÁ SƠN — Private Real Estate Aesthetic: nocturnal · quiet luxury · midnight ink + champagne gold ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */ :root { /* ══ NBRE DESIGN LANGUAGE v1.0 — 4 MÀU KHOÁ (NGUỒN DUY NHẤT) ══════════ Đổi tông cả website = sửa 4 dòng này. Màu khác PHẢI suy ra từ đây bằng color-mix(); không thêm hex mới, không gradient vàng, không glow. */ --nbre-black: #0a0a0a; /* Rich Black — nền chính (85%), sâu hơn */ --nbre-ivory: #f5f2ec; /* Warm Ivory — chữ / nền sáng */ --nbre-champagne: #d4c4ac; /* Soft Champagne — accent LẠNH, lì (matte). Thay đồng cháy #b08a52: sắc cam quá nhiều → "nóng", rẻ tiền. */ --nbre-stone: #8e8e93; /* Platinum Grey — chữ phụ, icon, metadata */ --nbre-bronze: var(--nbre-champagne); /* alias cũ — mọi nơi tự đổi theo champagne */ /* ── token ngữ nghĩa (nền TỐI = mặc định) ── */ --ink: var(--nbre-black); --ink-2: color-mix(in srgb, var(--nbre-ivory) 5%, var(--nbre-black)); /* card */ --ink-3: color-mix(in srgb, var(--nbre-ivory) 9%, var(--nbre-black)); /* raised */ --line: color-mix(in srgb, var(--nbre-champagne) 15%, transparent); /* hairline mảnh, mờ */ --gold: var(--nbre-bronze); --gold-soft: color-mix(in srgb, var(--nbre-bronze) 74%, var(--nbre-ivory)); --gold-bright: color-mix(in srgb, var(--nbre-bronze) 42%, var(--nbre-ivory)); --cyan: var(--nbre-stone); /* accent xanh cũ → gom về Stone (chỉ 4 màu) */ --text: var(--nbre-ivory); --muted: var(--nbre-stone); /* 70% Stone trên nền Rich Black chỉ 3.5:1 — chân trang & footnote (câu chữ thật) đọc mệt. Nâng lên 86% → 4.5:1, vẫn chìm hơn --muted (6.1:1) nên phân cấp còn nguyên. */ --muted-2: color-mix(in srgb, var(--nbre-stone) 86%, var(--nbre-black)); --on-accent: var(--nbre-black); /* chữ nằm TRÊN nền bronze */ /* Màu CHỨC NĂNG (chỉ dùng cho phản hồi form: hợp lệ / lỗi) — không dùng trang trí. */ --state-ok: #6fc488; --state-err: #d98c84; /* ══ TYPOGRAPHY — KHOÁ 2026-07-12 ════════════════════════════════════ ĐÚNG 2 BỘ CHỮ, không hơn. Mọi cỡ chữ PHẢI lấy từ thang --fs-* dưới đây; cấm đặt font-size rời rạc trong component (trước có 82 cỡ khác nhau rải trong 261 khai báo → chữ "giật nhịp" y như khoảng cách dọc trước khi có --sec-y). GỐC REM = 16px (KHÔNG có html{font-size:62.5%} — đừng nhân 10). */ /* Bộ chữ 1 — TIÊU ĐỀ & SỐ: Playfair Display. Tương phản thanh-đậm cao, chất editorial. CÓ ĐỦ DẤU TIẾNG VIỆT (đã kiểm subset) — đây là lý do không đổi sang PP Editorial New / TWK Lausanne: font thương mại thường thiếu dấu. */ --serif: "Playfair Display", Georgia, serif; /* Bộ chữ 2 — GIAO DIỆN & BODY: menu, form, nhãn, metadata. */ --sans: "Be Vietnam Pro", system-ui, sans-serif; /* THANG CỠ CHỮ. ⚠️ HIỆU CHỈNH 2026-07-12 (user: "nhiều chỗ chữ quá to → không cân xứng, không sang"). Quiet luxury = tiêu đề VỪA PHẢI + nhiều khoảng trắng; chữ to là ngôn ngữ landing page bán hàng. Đã hạ CÁC BẬC TIÊU ĐỀ ~20%, GIỮ NGUYÊN body/nhãn (16px vẫn là cỡ đọc đúng — hạ nữa là khó đọc, không phải sang). Muốn to/nhỏ lại toàn web: CHỈ sửa các dòng dưới đây. */ --fs-3xs: 0.58rem; /* 9.3px — nhãn siêu nhỏ (chú thích trên map) */ --fs-2xs: 0.62rem; /* 9.9px — nhãn nhỏ */ --fs-xs: 0.72rem; /* 11.5px — EYEBROW, nhãn, metadata (hay dùng nhất) */ --fs-sm: 0.82rem; /* 13.1px — nút, chữ phụ */ --fs-md: 0.92rem; /* 14.7px — chữ phụ lớn */ --fs-base: 1rem; /* 16px — BODY (giữ) */ --fs-lg: 1.12rem; /* 17.9px — lede, chữ dẫn (was 1.2) */ --fs-xl: 1.3rem; /* 20.8px — h3 / tên thẻ (was 1.5) */ --fs-2xl: 1.5rem; /* 24px — dấu × đóng, tít nhỏ (was 1.8) */ --fs-3xl: 1.7rem; /* 27.2px — số liệu lớn (was 2) */ --fs-4xl: 2.6rem; /* 41.6px — SỐ RẤT LỚN: tổng điểm (was 3.2) */ /* 5 bậc CO GIÃN (fluid) — tự thở theo màn, không cần media query */ --fs-lede: clamp(0.95rem, 1.2vw, 1.02rem); /* chữ dẫn dưới tít */ --fs-h3: clamp(1.15rem, 1.7vw, 1.4rem); /* tít khối nhỏ / modal */ --fs-h2: clamp(1.5rem, 2vw, 1.9rem); /* tít khối phụ */ --fs-h1: clamp(1.75rem, 2.7vw, 2.4rem); /* TÍT SECTION (was →3rem) */ --fs-display: clamp(2rem, 3.2vw, 3rem); /* HERO — 46px@1440 (was 60) */ /* LEADING — ⚠️ RÀNG BUỘC TIẾNG VIỆT: Playfair xếp dấu RẤT cao (ỗ, ề, ậ). Leading dưới 1.2 là dấu bị cắt cụt / cắm vào dòng trên. ĐỪNG hạ các số này. */ --lh-display: 1.22; /* hero — SÀN, không xuống thấp hơn */ --lh-title: 1.28; /* tít section, h3 */ --lh-body: 1.6; /* body */ --lh-ui: 1.4; /* nhãn, nút, metadata */ /* TRACKING — chữ HOA giãn rộng là chữ ký của NBRE (bảng đồng khắc chữ). 3 bậc; trước đây có 8 giá trị (.16/.2/.26/.28/.3/.34/.4/.42) chênh nhau từng 0.02em — mắt không phân biệt nổi, chỉ làm hệ thống không khoá được. */ --ls-eyebrow: 0.42em; /* EYEBROW HOA — giãn rộng nhất */ --ls-wide: 0.28em; /* nhãn HOA nhỏ, chức danh */ --ls-ui: 0.16em; /* nút, menu, nhãn thường */ --ls-title: -0.015em; /* tiêu đề serif cỡ lớn — siết nhẹ cho đặc chữ */ /* ══ DESIGN TOKENS — nền chung cho Component Library ═════════════════ Website · CRM · App · Proposal dùng CHUNG bộ token này. Component không được đặt số rời rạc: mọi khoảng cách/bo góc/chuyển động đều lấy từ đây. */ /* Spacing — ⚠️ GỐC REM LÀ 16px, nên px THẬT = rem × 16 (ghi chú cũ ghi nhầm theo gốc 10px — sai 1.6 lần). Giá trị đã căn bằng mắt trên trang thật nên GIỮ NGUYÊN; chỉ ghi lại px đúng để người sau khỏi tính nhầm. */ --sp-1: 0.4rem; /* 6.4px */ --sp-2: 0.8rem; /* 12.8px */ --sp-3: 1.2rem; /* 19.2px */ --sp-4: 1.6rem; /* 25.6px */ --sp-5: 2.4rem; /* 38.4px */ --sp-6: 3.2rem; /* 51.2px */ --sp-7: 4.8rem; /* 76.8px */ --sp-8: 6.4rem; /* 102.4px */ --sp-9: 9.6rem; /* 153.6px — nhịp giữa các section (khoảng trắng +30–40%) */ /* Radius — luxury = gần vuông. Không bo tròn kiểu app tiêu dùng. */ --r-0: 0; --r-1: 2px; /* mặc định: nút, input, thẻ */ --r-2: 4px; --r-pill: 999px; /* CHỈ cho chip/pill nhỏ */ /* Motion — Apple-like: chậm, chỉ fade/opacity/scale rất nhẹ */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-1: 0.25s; /* micro (hover) */ --dur-2: 0.45s; /* chuyển trạng thái */ --dur-3: 0.9s; /* vào màn (reveal) */ /* Elevation — KHÔNG shadow phô trương. Độ nổi tạo bằng ÁNH SÁNG (bề mặt sáng hơn) + hairline, không phải bóng đổ dày. */ --e-0: none; --e-1: 0 1px 0 0 var(--line); --e-2: 0 18px 40px -28px rgba(0, 0, 0, 0.7); /* Grid — 12 cột, một grid duy nhất cho toàn site */ --cols: 12; --gap: clamp(1.2rem, 2vw, 2rem); /* NHỊP DỌC GIỮA CÁC SECTION — một con số duy nhất cho cả trang. Trước đây mỗi section tự đặt clamp riêng (99 / 108 / 90 / 72px) → trang "giật nhịp". Nay mọi section dùng --sec-y; khoảng thở cũng tăng ~30–40% ("Luxury is not decoration. Luxury is restraint."). */ --sec-y: clamp(var(--sp-8), 13vh, var(--sp-9)); /* ── master content column ─────────────────────────────── every section aligns to ONE centred column of this width. --pad-x = a gutter that grows to centre content inside --shell on wide screens, but never drops below --gutter on small ones. Apply `padding-inline: var(--pad-x)` instead of ad-hoc clamps. */ --shell: 1240px; --gutter: clamp(1.4rem, 5vw, 3.2rem); --pad-x: max(var(--gutter), calc((100% - var(--shell)) / 2)); /* KHOẢNG HỞ DƯỚI NAV cho các liên kết neo (#contact, #estates…). Nav là position:fixed nhưng trước đây KHÔNG có scroll-padding → bấm menu là đầu khối chui xuống gầm nav (tiêu đề form + 2 ô đầu bị che, chữ lòi qua nền nav trong suốt = "lộn xộn"). Đo thật: nav cao 98px ở 1440, 75px ở khổ nhỏ; cộng ~24px thở. Đổi chiều cao nav thì chỉ sửa con số này. */ --nav-clear: clamp(96px, 8.6vw, 126px); } /* ══ CHỮ NHỎ TRÊN ĐIỆN THOẠI — NỚI 3 BẬC DƯỚI CÙNG ═════════════════════════ Chủ đối chiếu shynhsuperluxury.vn: chữ nhỏ nhất bên đó 14px, bên mình 9,9px (dòng phường/quận trên thẻ, dòng chân trang). Trên màn 27" thì 9,9px là "tinh tế"; cầm điện thoại thì là chữ phải nheo mắt — mà >90% khách xem bằng điện thoại. Chỉ nới 3 bậc NHỎ NHẤT, không đụng thang chữ chính (tít, giá, body vẫn nguyên) ⇒ tỷ lệ giữa các bậc không vỡ, mà bậc đáy hết cực đoan. Vẫn dưới cỡ body 16px — chữ phụ vẫn là chữ phụ. ⚠️ KHỐI NÀY PHẢI NẰM SAU DẤU } ĐÓNG :root Ở TRÊN. Đặt nó vào GIỮA :root thì phần token còn lại (--shell, --gutter, --pad-x, --nav-clear…) rơi ra ngoài mọi selector và bị trình duyệt VỨT IM LẶNG — chân trang mất sạch lề, dính sát mép trái. Đã trả giá đúng lỗi này trong phiên; CSS không báo lỗi, chỉ mất token. */ @media (max-width: 760px) { :root { --fs-3xs: 0.68rem; /* 9.3 → 10.9px */ --fs-2xs: 0.75rem; /* 9.9 → 12.0px */ --fs-xs: 0.82rem; /* 11.5 → 13.1px */ } } /* ⚠️ ĐÃ GỠ @font-face "NBRE Display" (2026-07-12, khoá typography). Bộ chữ tự dựng từ hình học logo (brand-font-source/) — token --display có ĐÚNG 0 chỗ dùng, và user đã bác nó ở hero (đọc ra chất futuristic/kỹ thuật). Font vẫn còn ở brand-font-source/ cho poster/proposal chữ HOA ngắn. ĐỪNG nạp lại vào web nếu chưa hỏi user. */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: var(--nav-clear); } body { background: var(--ink); color: var(--text); font-family: var(--sans); font-weight: 300; line-height: var(--lh-body); -webkit-font-smoothing: antialiased; overflow-x: hidden; } ::selection { background: var(--gold); color: var(--ink); } a { color: inherit; text-decoration: none; } em { font-style: italic; } /* refined keyboard focus — champagne hairline, never a default blue box */ :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 1px solid var(--gold); outline-offset: 3px; border-radius: 2px; } /* honour reduced-motion: keep the design, drop the movement */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } [data-rise], .reveal, .hero__line > span { opacity: 1 !important; transform: none !important; } } /* ── shared bits ─────────────────────────────────────────── */ .eyebrow { font-size: var(--fs-xs); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--muted); font-weight: 500; margin-bottom: 1.4rem; display: block; } /* ĐÃ BỎ 04/08 — gạch ngang 34px trước mọi eyebrow (chủ: "nhìn không chuyên nghiệp"). Nó là mô-típ trang trí lặp ở MỌI tiêu đề trên trang; các nhà xa xỉ (Rolex, Patek) để chữ đứng một mình, không kèm hoa văn dẫn. Thêm một nét vào mọi chỗ là thêm tiếng ồn, không phải thêm sang. ⚠️ Cùng lúc đổi `display: flex` → `block`: flex vốn chỉ để xếp gạch cạnh chữ, giữ lại thì dòng eyebrow dài không xuống dòng được như chữ thường. */ .eyebrow--dark { color: var(--muted); } /* Trên điện thoại, eyebrow dài ("NGHIÊN CỨU · THẨM ĐỊNH · TƯ VẤN ĐẦU TƯ") xuống dòng lệch: dòng trên đầy, dòng dưới còn trơ "ĐẦU TƯ". Hai chữ mồ côi ngay dưới logo là thứ đầu tiên khách nhìn thấy. `balance` chia đều số chữ cho các dòng; giãn chữ bớt một nấc để dòng vào gọn. Không đụng tới NỘI DUNG dòng chữ — chủ đang cân nhắc riêng phần chữ nghĩa. */ @media (max-width: 560px) { .eyebrow { text-wrap: balance; letter-spacing: 0.16em; } } .btn { display: inline-flex; align-items: center; gap: 0.6em; font-size: var(--fs-sm); letter-spacing: var(--ls-ui); text-transform: uppercase; font-weight: 500; padding: 1.05em 2.1em; border-radius: 2px; transition: all 0.5s var(--ease); position: relative; overflow: hidden; background: transparent; /* reset nền mặc định của