/* * Design token — Libero * Nguồn: Figma "Libero - Redesign" (file MZMYhz4E7mP7UIgoXHdn0S) * page "Design system" > frame Color, Typo * page "layout" > frame Home (1600 x 9135) * Trích ngày 2026-09-03 từ panel Properties, không phải ước lượng bằng mắt. * * QUY TẮC 1: không viết thẳng mã màu hay cỡ chữ vào CSS của section. * Thiếu token nào thì thêm vào đây, đừng hardcode tại chỗ dùng. * * QUY TẮC 2: KHÔNG khai báo ở :root. * Avada đã phát --awb-color1..8 và --awb-custom_color_* ra mọi trang * (kiểm chứng 2026-09-03: --awb-color5:#ee4036). Đặt bảng màu thứ hai ở * :root là tạo hai nguồn chân lý về màu — đổi màu trong Avada Options sẽ * không ăn mà không ai hiểu vì sao. Xem avada-newsite/01-NEN-TANG-CHUNG.md. * * Vì vậy token bọc trong danh sách selector của RIÊNG các thành phần * Libero, không bao giờ ở :root. Phần còn lại của site vẫn do bảng màu * Avada điều khiển như trước. * * Từ 07/09/2026 header dùng cho mọi trang chứ không riêng trang chủ, nên * .lb-header và .lb-mmenu được thêm vào danh sách — chúng đứng NGOÀI * .lb-home ở những trang không phải trang chủ, không kế thừa được. * * ĐỐI CHIẾU với bảng màu Avada đang chạy: * --awb-color5 #ee4036 ~ --lb-group #FF3251 / --lb-group-deep #D20F12 * Hai giá trị KHÁC NHAU. Thiết kế Figma dùng #D20F12, Avada Options đang để #ee4036. * Cần chốt: đổi Avada Options cho khớp Figma, hay để trang chủ lệch tông với phần * còn lại của site. Đây là quyết định của PO, không phải của dev. */ /* * NGOẠI LỆ CÓ CHỦ Ý của QUY TẮC 2 — và vẫn giữ đúng tinh thần của nó. * * Quy tắc 2 cấm khai ở :root để khỏi có nguồn chân lý thứ hai. Hai dòng dưới * đây KHÔNG khai giá trị mới: chúng DẪN XUẤT từ chính biến mà Avada phát ra ở * :root (--awb-typography1/4-font-family). Đổi bộ chữ toàn cục trong Avada * Options là CSS của plugin đổi theo — vẫn một nguồn chân lý duy nhất, đúng như * quy tắc 2 muốn. Chuỗi phía sau chỉ là dự phòng khi biến của Avada chưa có. * * Vì sao phải ở :root: font cần cho MỌI trang. Trước 13/09/2026 hai token này * nằm trong danh sách .lb-home / .lb-header / .lb-mmenu / .lb-product, nên ở * trang Newsroom (.lb-explore) `var(--lb-font-serif)` trả về RỖNG — khai báo bị * bỏ qua, chữ lặng lẽ thừa hưởng font của thẻ cha, không có lỗi nào để lần. * Đúng cái bẫy đã làm mất 36 logo ở section Đối tác trước đây. */ :root { --lb-font-sans: var(--awb-typography4-font-family, "Google Sans Flex", "Be Vietnam Pro", system-ui, sans-serif); --lb-font-serif: var(--awb-typography1-font-family, "Source Serif 4", Georgia, "Times New Roman", serif); } /* * .lb-el — vỏ mà shortcode của Fusion Builder bọc quanh mỗi section. * * Section trang chủ được dùng lại ở nơi khác qua element "Libero · ...". Ở trang * chủ chúng nằm trong .lb-home nên thừa hưởng token; kéo vào một trang Avada thì * KHÔNG, và mọi khai báo dùng var(--lb-*) bị bỏ qua LẶNG LẼ — đo ngày 13/09/2026 * trên /kham-pha/: --lb-group, --lb-nature, --lb-serif-h2, --lb-section-pad-top * đều trả về rỗng, nên nhãn "ĐỐI TÁC" mất màu đỏ và tiêu đề tụt từ 48.8px/700 * xuống 36px/400. Không có lỗi nào để lần, vì var() rỗng chỉ làm declaration * biến mất chứ không báo gì. * * Thêm .lb-el vào danh sách là element tự mang theo token đi bất cứ đâu. */ .lb-home, .lb-header, .lb-mmenu, .lb-product, .lb-el { /* ---- Màu thương hiệu ---- */ --lb-nature: #1B1B38; /* nền footer, chữ tiêu đề */ --lb-nature-deep: #0F0F2E; /* gốc của thang trung tính */ --lb-group: #FF3251; /* đầu gradient đỏ */ --lb-group-deep: #D20F12; /* cuối gradient; nền section 4, 6, 11 */ --lb-card-red: #C8102E; /* vạch + nhãn chuyên môn thẻ giảng viên (Figma Frame 308) */ /* ---- Màu 4 đơn vị thành viên ---- */ --lb-lim: #8E32FF; /* Institute of Management */ --lb-lit: #213EFF; /* Institute of Technology */ --lb-lisa: #2CD17F; /* Institute of Sciences & Arts */ --lb-lcci: #FBAC02; /* Center for Creative Industry */ /* ---- Nền và viền ---- */ --lb-white: #FFFFFF; --lb-bg-alt: #F8F8F8; /* nền section 5, 7, 9 */ --lb-card-body: #F8F8F8; --lb-card-border: #DDDAD5; /* viền thẻ giảng viên */ /* ---- Thang trung tính: rgba trên nền deep ---- */ --lb-n8: rgba(15, 15, 46, 0.8); --lb-n5: rgba(15, 15, 46, 0.5); --lb-n2: rgba(15, 15, 46, 0.2); --lb-n1: rgba(15, 15, 46, 0.1); /* ---- Gradient ---- */ --lb-grad-hero: linear-gradient(90deg, #FFFFFF 0%, #FEF9E7 50%, #FFFFFF 100%); --lb-grad-red: linear-gradient(135deg, var(--lb-group) 0%, var(--lb-group-deep) 100%); --lb-grad-bg: linear-gradient(135deg, #FDFBF7 0%, #FDF7F9 100%); /* ========================================================= * Chữ * Hai thang modular độc lập, cùng cỡ gốc 16px. * Serif ratio 1.25 (Major Third) — tiêu đề lớn * Sans ratio 1.20 (Minor Third) — nhãn, thân bài, giao diện * Sinh bằng calc() để không phải bảo trì 18 con số rời rạc. * ========================================================= */ --lb-f-base: 1rem; /* 16px */ --lb-serif-ratio: 1.25; --lb-sans-ratio: 1.2; /* Source Serif 4 — 16 / 20 / 25 / 31.25 / 39.06 / 48.83 / 61.04 */ --lb-serif-h6: calc(var(--lb-f-base) * var(--lb-serif-ratio)); --lb-serif-h5: calc(var(--lb-serif-h6) * var(--lb-serif-ratio)); --lb-serif-h4: calc(var(--lb-serif-h5) * var(--lb-serif-ratio)); --lb-serif-h3: calc(var(--lb-serif-h4) * var(--lb-serif-ratio)); --lb-serif-h2: calc(var(--lb-serif-h3) * var(--lb-serif-ratio)); --lb-serif-h1: calc(var(--lb-serif-h2) * var(--lb-serif-ratio)); --lb-serif-sm: calc(var(--lb-f-base) / var(--lb-serif-ratio)); /* 12.8px */ --lb-serif-xs: calc(var(--lb-serif-sm) / var(--lb-serif-ratio)); /* 10.24px */ /* Google Sans Flex — 16 / 19.2 / 23.04 / 27.65 / 33.18 / 39.81 / 47.78 */ --lb-sans-h6: calc(var(--lb-f-base) * var(--lb-sans-ratio)); --lb-sans-h5: calc(var(--lb-sans-h6) * var(--lb-sans-ratio)); --lb-sans-h4: calc(var(--lb-sans-h5) * var(--lb-sans-ratio)); --lb-sans-h3: calc(var(--lb-sans-h4) * var(--lb-sans-ratio)); --lb-sans-h2: calc(var(--lb-sans-h3) * var(--lb-sans-ratio)); --lb-sans-h1: calc(var(--lb-sans-h2) * var(--lb-sans-ratio)); --lb-sans-sm: calc(var(--lb-f-base) / var(--lb-sans-ratio)); /* 13.33px */ --lb-sans-xs: calc(var(--lb-sans-sm) / var(--lb-sans-ratio)); /* 11.11px */ /* Trọng lượng theo Design system */ --lb-w-extrabold: 800; /* serif H1 */ --lb-w-bold: 700; /* serif H2, sans H1-H2 */ --lb-w-semibold: 600; /* H3 */ --lb-w-medium: 500; /* H4-H6 */ --lb-w-regular: 400; /* Font: xem khối :root ở đầu file. */ /* ========================================================= * Lưới * Artboard Figma rộng 1600px — KHÔNG phải 1440 hay 1920. * Ảnh nghiệm thu phải chụp ở đúng viewport 1600px mới so được 1:1. * ========================================================= */ --lb-frame: 1600px; --lb-container: 1200px; --lb-gutter: 200px; /* (1600 - 1200) / 2 */ --lb-frame-mobile: 440px; /* ========================================================= * Số đo thành phần — giữ NGUYÊN số lẻ của Figma. * Làm tròn 0.74 thành 1 và 22.12 thành 24 thì lưới 4 thẻ lệch 7px * ở mép phải, đủ để bước so ảnh báo lỗi. * ========================================================= */ --lb-card-teacher-w: 283px; --lb-card-teacher-h: 424.59px; --lb-card-radius: 16px; --lb-card-border-w: 0.74px; --lb-grid-gap: 22.12px; /* 4 x 283 + 3 x 22.12 = 1198.36 */ --lb-section-pad-top: 90px; /* Bo góc khác dùng trong file thiết kế */ --lb-radius-lg: 40px; --lb-radius-md: 16px; --lb-radius-sm: 8px; } /* * Khung nội dung dùng chung cho mọi section trang chủ VÀ cho header. * * Header nằm ngoài .lb-home ở những trang không phải trang chủ, nên phải kể tên * riêng — nếu chỉ để .lb-home .lb-container thì thanh header ở 508 trang kia mất * hết bề rộng khung và dính sát mép màn hình. */ /* * Nền chữ cho element đứng một mình. Cố tình KHÔNG chép width:100vw và * margin-left của .lb-home: trong một cột Avada, "tràn viền" sẽ kéo section ra * ngoài khung và làm hỏng cả hàng. */ /* * Vỏ element mang cả .lb-home lẫn .lb-el (xem fusion-elements.php), nên 52 rule * bám .lb-home trong home.css áp dụng được luôn. Chỉ phải huỷ đúng một thứ: * thủ thuật tràn viền của .lb-home. Ở template nó dùng để thoát khung 1268px * của Avada; trong một cột builder, container đã full-width sẵn nên 100vw chỉ * đẩy section ra ngoài khung và sinh cuộn ngang. * * PHẢI đủ ba class (0,3,0): home.css bọc trong .lb-scope nên rule tràn viền của nó * thành .lb-scope.lb-home — cũng (0,2,0), mà home.css nạp SAU tokens.css nên hoà * là home.css thắng. */ .lb-el.lb-scope.lb-home { width: auto; margin-left: 0; /* * PHAI go overflow-x: clip ma .lb-home dat. * * O template chi co MOT vo .lb-home boc ca trang cao 9.000px, nen khong co gi * cham toi mep cua no. Trong builder moi section co vo RIENG, cao dung bang * section — danh sach xo xuong cua o chon o Hero (cao 160px, vuot day section * 56px) bi cat mat lua chon cuoi, nguoi dung thay "chon xong thi mat noi * dung". * * .lb-home dat clip de thu thuat tran vien 100vw khong sinh cuon ngang; o day * body da co overflow-x: hidden nen bo di van an toan. */ overflow: visible; } /* * Tra lai tran vien khi container Avada co class lb-fullbleed. * * Avada chan .post-content o be rong site 1268px, nen container du dat * hundred_percent=yes cung khong vuot duoc cha. Trang chu can nen do/xam cham * mep man hinh, nen phai thoat bang 100vw dung nhu template dang lam. Dat theo * kieu chon-vao: chi container nao khai lb-fullbleed moi tran. * * body da co overflow-x:hidden nen 100vw khong sinh thanh cuon ngang. */ .lb-fullbleed .lb-el.lb-scope.lb-home { width: 100vw; margin-left: calc(50% - 50vw); } .lb-el { font-family: var(--lb-font-sans); line-height: 1.6; color: var(--lb-nature); } .lb-el *, .lb-el *::before, .lb-el *::after { box-sizing: border-box; } .lb-el a { color: inherit; text-decoration: none; } /* Chép đúng bộ reset mà .lb-home cấp cho tiêu đề — không hơn, không kém. */ .lb-el :is(h1, h2, h3, h4, h5, h6) { text-transform: none; letter-spacing: inherit; color: inherit; margin-top: 0; } .lb-el :is(p, ul, ol) { margin-top: 0; } /* * Nâng độ ưu tiên lên (0,2,0) để thắng CSS của Avada. * * Trong một cột Avada, section nằm trong .post-content, nên `.post-content h2` * và `.post-content p` — đều (0,1,1) — thắng `.lb-h2` và `.lb-eyebrow` (0,1,0). * Đo trên /kham-pha/ 13/09/2026: tiêu đề ra 36px/400 thay vì 48.83px/700, nhãn * nhỏ cách đáy 20px thay vì 10px. Trang chủ không dính vì template của plugin * không bọc .post-content, nên cùng bộ CSS lại cho kết quả khác nhau. * * KHÔNG khai lại font-size của .lb-eyebrow ở đây: cả hai trang đang cùng bị * Avada đè về 16px, nâng riêng một bên là tạo ra chênh lệch mới. */ .lb-el .lb-h2 { /* Avada .post-content h2 cung (0,1,1) nhu .lb-el :is(h1..h6) va nap SAU, nen letter-spacing: inherit o tren thua — phai khai lai o day. */ letter-spacing: inherit; font-size: var(--lb-serif-h2); font-weight: var(--lb-w-bold); line-height: 1.14; margin-bottom: 12px; } .lb-el .lb-eyebrow { margin-bottom: 10px; } /* * KHÔNG huỷ padding của .lb-section ở đây. * * Bản trước tôi để `.lb-el > .lb-section{padding-block:0}` và giao khoảng cách * cho container Avada. Cách đó hỏng khi đưa trang chủ vào builder: 11 section * mất sạch padding 90px của mình, phải gõ tay 90px vào 11 container — 11 chỗ * sửa thay cho một token. Giờ khoảng cách chỉ đến từ --lb-section-pad-top; * container Avada bọc ngoài phải để padding 0. */ .lb-home .lb-container, .lb-header .lb-container, .lb-el .lb-container { width: 100%; max-width: var(--lb-container); margin-inline: auto; padding-inline: 24px; } @media (min-width: 1600px) { .lb-home .lb-container, .lb-header .lb-container, .lb-el .lb-container { padding-inline: 0; } } /* * Container chứa ô chọn ở Hero phải nổi lên trên container phía sau. * * Avada đặt z-index: 10 cho MỌI .fusion-row. Hai container liền nhau cùng mức * 10 thì cái đứng sau trong DOM vẽ đè — danh sách xổ xuống của ô Bạn là một * cao 160px, thò 56px qua đáy section, và bị section Giảng viên phủ kín. Vỏ * .lb-home lại có nền trắng đục nên che hẳn, trông y như bị cắt mất lựa chọn. * * Ở template không có chuyện này: 11 section nằm chung một vỏ, không sinh ngữ * cảnh xếp lớp riêng cho từng section. * * Chỉ nâng container NÀO có ô chọn, không nâng tất cả — nâng tất cả thì lại * quay về hoà z-index như cũ. */ .fusion-fullwidth:has(.lb-finder), .fusion-fullwidth:has(.lb-finder) > .fusion-builder-row { position: relative; z-index: 30; }