/* Minification failed. Returning unminified contents. (3,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (4,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (5,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (6,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (7,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (9,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (10,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (11,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (12,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (14,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (15,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (16,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (17,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (19,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (21,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (22,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (23,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (24,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (25,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (26,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (27,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (28,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (29,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (30,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (31,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (33,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (34,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (35,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (36,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (37,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (39,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (40,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (41,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (43,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (45,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (46,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (47,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (48,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (49,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (50,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (51,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (52,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (53,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (54,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (55,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (73,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (74,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (76,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (77,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (78,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (79,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (80,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (81,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (82,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (83,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (84,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (85,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (87,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (89,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (91,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (91,29): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (92,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (92,29): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (93,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (93,29): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (95,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (96,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (96,34): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (97,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (97,29): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (98,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (98,29): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (99,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (99,29): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (100,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (100,29): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (101,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (101,29): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (103,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (104,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (106,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (108,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (111,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (113,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (114,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (118,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (150,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (154,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (155,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (156,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (156,32): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (162,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (163,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (164,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (164,32): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (170,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (171,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (172,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (172,32): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (178,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (179,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (184,11): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (189,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (190,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (191,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' */ :root { --web-primary: #2C479E; --web-primary-dark: #23397F; --web-primary-900: #05174E; --web-primary-200: #C3CBE4; --web-primary-50: #F2F4FA; --web-accent: #0D9C4A; --web-accent-dark: #027A48; --web-accent-100: #D1FADF; --web-accent-50: #ECFDF3; --web-yellow: #FFD400; --web-yellow-800: #A18705; --web-yellow-50: #FCF7DD; --web-yellow-mid: #FFE14A; --web-surface-tint: #E9F1FA; --web-gray-900: #101828; --web-gray-800: #1D2939; --web-gray-700: #344054; --web-gray-600: #475467; --web-gray-200: #E4E7EC; --web-gray-400: #98A2B3; --web-gray-500: #667085; --web-gray-300: #D0D5DD; --web-gray-100: #F2F4F7; --web-gray-50: #F9FAFB; --web-white: #FFFFFF; --web-heading: var(--web-gray-900); --web-body: var(--web-gray-600); --web-border: var(--web-gray-300); --web-surface: var(--web-white); --web-lead: #262626; --web-news-title: #292E35; --web-news-body: #3E464F; --web-news-meta: #85909D; --web-rule: #E8EAED; --web-container: 1520px; --web-ecosystem-content: 1280px; --web-integration-content: 1448px; --web-contact-content: 1384px; --web-news-content: 1384px; --web-footer-content: var(--web-container); --web-container-pad: 24px; --web-gutter: 24px; --web-radius-card: 16px; --web-radius-sm: 8px; --web-radius-pill: 100px; /* THANG Z-INDEX CỦA PROJECT — biến này là token z-index ĐẦU TIÊN (03/09/2026). Trước đó mọi z-index đều gõ cứng, và thang thật chỉ có 3 bậc: 1000 .header-fixed css/layout.css ← TRẦN, gõ cứng, CỐ Ý không đổi 900 .contact-fab cụm nút liên hệ nổi (components.css mục 10) 200 .skip-link css/utilities.css 🔴 VÌ SAO PHẢI THẤP HƠN 1000, không phải chọn bừa: menu mobile là panel nằm BÊN TRONG .header-fixed, mà .header-fixed có z-index + position fixed nên nó tạo stacking context — cả panel được vẽ ở tầng 1000 như MỘT KHỐI. Để cụm nút dưới 1000 là menu tự che nó, không tốn một dòng JS nào. Cho lên 1001 thì 4 nút tròn đè lên menu điều hướng đang mở. ⚠ Sửa số này là phải đối chiếu lại cả 3 bậc trên, đừng sửa lẻ. ⚠ KHI PORT: đối chiếu thang của Bootstrap 5 (offcanvas 1045, modal 1055, tooltip 1080). 900 nằm dưới tất cả — đúng ý muốn, nhưng phải KIỂM chứ đừng cho là hiển nhiên. */ --web-z-fab: 900; --web-header-h: 85px; --web-space-2: 8px; --web-space-3: 12px; --web-space-4: 16px; --web-space-6: 24px; --web-space-8: 32px; --web-space-12: 48px; --web-space-16: 64px; --web-space-20: 80px; --web-space-section: 96px; --web-space-30: 120px; --web-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --web-font-brand: Verdana, Geneva, 'DejaVu Sans', var(--web-font), sans-serif; --web-display-lg: 48px; --web-display-lg-lh: 60px; --web-display-md: 36px; --web-display-md-lh: 44px; --web-display-xs: 24px; --web-display-xs-lh: 32px; --web-hero-title-max: 54px; --web-section-title: 36px; --web-section-title-lh: 44px; --web-text-xl: 20px; --web-text-xl-lh: 30px; --web-text-lg: 18px; --web-text-lg-lh: 28px; --web-text-md: 16px; --web-text-md-lh: 24px; --web-text-sm: 14px; --web-text-sm-lh: 20px; --web-text-xs: 12px; --web-text-xs-lh: 18px; --web-shadow-xs: 0 1px 2px 0 rgba(16, 24, 40, 0.05); --web-shadow-sm: 0 1px 3px 0 rgba(16, 24, 40, 0.10), 0 1px 2px 0 rgba(16, 24, 40, 0.06); --web-shadow-md: 0 2px 4px -2px rgba(16, 24, 40, 0.06), 0 4px 8px -2px rgba(16, 24, 40, 0.10); --web-shadow-lg: 0 4px 6px -2px rgba(16, 24, 40, 0.03), 0 12px 16px -4px rgba(16, 24, 40, 0.08); --web-btn-shadow: #4C66B8; --web-ease: 0.2s cubic-bezier(0.4, 0, 0.2, 1); --web-marquee-duration: 60s; } :root { --hero-zoom: min(1, calc((100vh - var(--web-header-h)) / 900px)); } /* --btn-row-zoom — zoom RIÊNG cho `.web-btn-row` (components.css). TÁCH khỏi `--hero-zoom` ngày 10/08/2026 sau khi ĐO được lỗi sau: `--hero-zoom` tính từ CHIỀU CAO viewport, không quan tâm trang có hero hay không. `components.css` dùng chung cho MỌI trang, nên trên trang KHÔNG có hero nút vẫn co y hệt. Đo trên trang thử (đúng bộ CSS mà trang mới nạp): nút cao 58 tụt còn 44.5 ở 1366×768 (−23.3%) và 45.5 ở 1536×785 (−21.6%). Dải hỏng = rộng >992 VÀ cao <985. Không có lý do thiết kế nào. Cách sửa: mặc định 1, CHỈ bằng `--hero-zoom` khi trang thật sự có `.hero`. - `:root:has(.hero)` = (0,2,0) thắng `:root` = (0,1,0) → thắng bằng SPECIFICITY, không bằng thứ tự dòng (bài học ghi chú nội bộ của Designer). - Tự động theo sự hiện diện của `.hero` — KHÔNG phải nhớ gắn class cho trang mới. - `:has()` vốn đã là dependency của project (lúc viết: `.logo-group-body:has(.logo-break)` mục 3.11 — đã gỡ cùng thẻ nhóm ở B119; nay còn `body:has(.header-fixed[data-nav-open])` của cụm nút nổi) nên không thêm rủi ro tương thích. - Ở ≤992px `--hero-zoom` đã về 1 nên biến này tự về 1, KHÔNG cần override riêng. ⚠ KHI PORT: bỏ `zoom` của hero thì bỏ luôn biến này VÀ `zoom` ở `.web-btn-row` (ghi chú nội bộ của Designer). 🔺 B93 (29/09/2026) — NGƯỜI DÙNG ĐẢO QUYẾT ĐỊNH TRÊN: "áp dụng giống trang chủ". Lý do: đo ở 1536×840 nút trang chủ 49px còn mọi trang khác 58px — cùng một site mà nút lệch 16–23% trên đúng laptop phổ thông, Designer thấy "trang Sản phẩm bự hơn". Nay MỌI trang dùng đúng công thức của trang chủ, nên ở BẤT KỲ viewport nào nút mọi trang cũng bằng nút trang chủ. Dòng `:root:has(.hero)` đã gỡ. Biến vẫn giữ tên riêng (không dùng thẳng `--hero-zoom`) để: (1) ngoài `.web-btn-row` còn nút dải CTA + nút trang chi tiết SP đọc nó; (2) khi port chỉ cần sửa 1 dòng này. Ở ≤992 `--hero-zoom` = 1 nên nút tự về cỡ Figma. */ :root { --btn-row-zoom: var(--hero-zoom); } @media (max-width: 1560px) { :root { --web-container-pad: 100px; --web-hero-title-max: 46px; --web-section-title: 32px; --web-section-title-lh: 40px; } } @media (max-width: 1480px) { :root { --web-container-pad: 40px; --web-hero-title-max: 40px; --web-section-title: 30px; --web-section-title-lh: 38px; } } @media (max-width: 1200px) { :root { --web-space-section: 72px; --web-hero-title-max: 36px; --web-section-title: 28px; --web-section-title-lh: 36px; } } @media (max-width: 1024px) { :root { --web-container-pad: 32px; --web-hero-title-max: 32px; } } @media (max-width: 992px) { :root { --hero-zoom: 1; } } @media (max-width: 768px) { :root { --web-container-pad: 20px; --web-space-section: 56px; --web-header-h: 77px; } }