/* Dịch bằng dich-lop-khoac.py từ bo-khoac-elementor.css. * Bám lớp thiết kế của dự án, không bám lớp của trình dựng nào. * Sửa thì sửa bảng ánh xạ trong công cụ rồi dịch lại. */ /* =================================================================== * SỬA ĐÈ THÀNH PHẦN BỘ CHUẨN - chỗ bản dựng cố ý khác bộ chuẩn. * * VÌ SAO CÓ TỆP NÀY: `thanh-phan.css` rút tự động từ `siteup-ds/`, mỗi bản DS * mới là ghi đè nguyên nên không được sửa tay ở đó. Trước tệp này, mỗi chỗ sửa * đè nằm rải trong `bo-khoac-elementor.css` hoặc `trang-con.css`, mà hai tệp * đó có việc riêng: một cái chặn Elementor, một cái lo trang con. Chỗ sửa * THÀNH PHẦN thì áp cho mọi trang, không thuộc tệp nào trong hai. * * LUẬT: mỗi mục ở đây PHẢI có một dòng tương ứng trong * `03-thiet-ke/bao-nguoc-cho-ds.md`. Tệp này là nợ kỹ thuật, không phải nhà * mới. Bên DS nhận vào bản sau thì xóa mục ở đây đi. * * Nạp SAU `thanh-phan.css` nên cùng độ nặng vẫn thắng nhờ thứ tự. * =================================================================== */ /* --- 1. Thứ tự đọc và nhịp dọc trong thẻ mẫu (Dũng báo 06/10/2026) ---- * * Bộ chuẩn để tên và giá BẰNG HỆT nhau: cùng 16px, cùng nửa đậm. Giá lại dùng * phông mono nên trông to hơn, và nó nằm cùng hàng với thứ nhẹ nhất là mã mẫu. * Mắt đọc giá trước, tên sau - ngược thứ tự đáng có, vì thứ khách chọn là MẪU * chứ không phải giá (chín mẫu thì bảy mẫu cùng một giá). * * KHÔNG hạ cỡ giá được, dù đó là cách gọn nhất. Thang chữ của dự án chỉ có * 11 / 13 / 16 / 20 / 25 / 31 / 39 / 49 / 61 (xem đầu `trang-chu.css`), mà * dưới 16 thì chỉ còn 13 - bằng hệt mã mẫu và tên ngành, giá sẽ chìm hẳn. * Nên nâng tên lên một bậc: 16 thành 20. Giá giữ 16, thành bậc hai rõ ràng. * * Dùng thẳng `--fs-2` chứ không dùng `--text-h5`: `--text-h5` đổi theo bề * rộng (16px dưới 1200, 20px từ 1200), nên tên mẫu sẽ co lại bằng giá trên * điện thoại - đúng chỗ thẻ hẹp nhất và cần phân bậc nhất. * * Cần (0,2,0) vì phải đè `.su-tpl .su-tpl__name` của `trang-chu.css`. */ .su-tpl .su-tpl__name{ font-size: var(--fs-2); line-height: var(--lh-heading); /* Tách khỏi hàng meta ở trên. Trước là 2px: mã mẫu dính vào tên nên ba dòng chữ đọc thành một khối đặc, không ra nhóm nào. */ margin-top: var(--space-2); }/* Ngành đi LIỀN tên: hai thứ này trả lời cùng một câu "đây là mẫu gì". Để sát nhau 4px thì chúng thành một cụm, tách hẳn khỏi mã mẫu ở trên và nút ở dưới. Trước là 0px - sát đến mức dính, mà dính thì không còn là nhóm, là một khối. */ .su-tpl .su-tpl__ind{ margin-top: var(--space-1); line-height: var(--lh-tight); }/* Mã mẫu là nhãn, không phải câu chữ: dòng 1.2 theo luật "nhãn và nút 1.0 đến 1.2". Trước tính ra 15.6px tức 1.2 sẵn, nhưng khai bằng số lẻ chứ không bằng thẻ, nên đổi cỡ chữ một cái là lệch theo. */ .su-tpl .su-tpl__code{ line-height: var(--lh-label) } /* Khe trong thân thẻ nay do LƯỚI ở mục 5 lo, không dùng `gap` nữa. Để lại `gap` ở đây thì nó cộng thêm vào lề của từng ô: thẻ phồng từ 422 lên 460px, đã thấy 08/10/2026. */ /* --- 2. Hàng bộ lọc tràn ngang (Dũng báo 06/10/2026) ------------------- * * `.su-chips--scroll` khai `flex-wrap:nowrap` cộng `overflow-x:auto`. Đã đo: * 10 thẻ rộng 1346px nhét trong 1200px, tràn 146px, chữ thẻ cuối bị cắt. Mới * 6 ngành; danh mục hướng tới 12 ngành nên sẽ gấp đôi. * * Cuộn ngang trên máy tính là mẫu dở: không có dấu hiệu nào cho biết còn gì ở * bên phải, và chuột không cuộn ngang được nếu không có thanh cuộn. * * Sửa: từ 768px trở lên thì cho xuống dòng. Dưới 768px giữ cuộn, vì trên cảm * ứng thì vuốt ngang là quen tay và đỡ tốn chiều cao. */ @media (min-width: 768px) {.su-chips--scroll{ flex-wrap: wrap; overflow-x: visible } } /* --- 2b. Nhóm gói giá phải nằm nguyên một dòng ------------------------- * * Cho xuống dòng xong thì lộ chuyện mới: hàng thẻ gồm HAI nhóm khác loại - * ngành và gói giá - ngăn nhau bằng một vạch dọc. Khi xuống dòng, vạch đó kẹt * giữa hàng và hai thẻ gói bị tách đôi, mỗi thẻ một dòng. Nhìn như một đống * thẻ ngang hàng nhau chứ không còn ra hai nhóm. 12 ngành thì càng rối. * * Sửa: biến vạch dọc thành một chỗ ngắt dòng chiếm trọn bề ngang, nên nhóm * gói giá luôn bắt đầu ở dòng mới và nằm liền nhau. Giữ nguyên thẻ HTML, chỉ * đổi cách hiện - bản mẫu không phải sửa gì. */ @media (min-width: 768px) {/* `!important` ở đây là bắt buộc, không phải lười: vạch dọc mang style NỘI DÒNG `width:1px;height:24px;flex:0 0 auto` do bản mẫu React xuất ra lúc rút trang. Style nội dòng thắng mọi luật trong tệp, nên không có cách nào khác ngoài `!important` - trừ khi sửa bộ sinh HTML, việc của bên bản mẫu. */ .su-chips--scroll > span:not(.su-chip){ flex: 0 0 100% !important; width: auto !important; height: 0 !important; margin: 2px 0 0 !important; background: none !important; } }/* --- 3. Vùng lọc: lệch, nhiều viền, và lo cho sau này (Dũng báo 07/10/2026) --- * * (a) CẢM GIÁC LỆCH. Đã đo: mọi khối đều bắt đầu đúng ở x=424, không lệch thật. * Cái lệch là lệch về sức nặng: ô tìm rộng 420px nằm một mình trên một dòng * rộng 1200px, bỏ trống 780px bên phải, rồi ngay dưới là hàng thẻ chiếm * trọn 1200. Hai dòng liền nhau mà một dòng đầy một dòng vơi một phần ba. * Sửa: cho ô tìm rộng bằng cột nội dung. Cả vùng lọc thành một khối chữ * nhật, không còn chỗ hụt. * * (b) VIỀN ĐẬM VÀ DÀY ĐẶC. Bộ chuẩn cho thẻ lọc viền `--border-strong`, tức * vạch đậm nhất trong thang. Một thẻ thì không sao; mười thẻ xếp cạnh nhau * thành mười đường viền kín, mắt đọc viền trước khi đọc chữ. 12 ngành thì * gấp đôi. * Sửa: thẻ CHƯA chọn bỏ viền, thay bằng nền xám nhạt - vẫn tách khỏi nền * trang, vẫn bấm được, mà không vẽ thêm đường nào. Thẻ ĐANG chọn giữ nguyên * nền vàng nên càng nổi bật hơn trước, vì giờ nó là thứ duy nhất có màu. * * (c) SAU NÀY NHIỀU BỘ LỌC. Cho xuống dòng thì 12 ngành thành hai hàng, vẫn * đọc được. Ngưỡng phải đổi cách làm là khi vượt khoảng 15 thẻ, hoặc khi * thêm họ lọc thứ ba - lúc đó hàng thẻ không còn là hình thức đúng nữa, * phải chuyển sang ô chọn hoặc bảng lọc. Chưa làm bây giờ vì làm sớm là * dựng một bộ máy cho một bài toán chưa có. */ /* Thẻ bọc ô tìm mang style nội dòng `flex:1 1 260px; max-width:420px` do bản mẫu React xuất ra, nên lại phải `!important` - cùng dạng với vạch ngăn ở mục 2b. Hai lần trong một vùng: bộ sinh HTML của bản mẫu đang gắn kích thước thẳng vào thẻ thay vì để CSS lo, đó là chỗ nên sửa tận gốc ở phiên thiết kế. */ .su-field:has(.su-input--icon){ max-width: none !important; flex: 1 1 100% !important }.su-chip:not([aria-pressed="true"]){ border-color: transparent; background: var(--surface-2); }.su-chip:not([aria-pressed="true"]):hover{ border-color: transparent; background: var(--gray-100); }/* --- 4. VÁ TẠM: breadcrumb của bộ chuẩn v1.5 (Dũng báo 07/10/2026) --------- * * KHÔNG phải sửa đè có chủ ý như ba mục trên. Đây là nợ, phải xóa khi nhận * xong bản v1.5. * * Chuyện đã xảy ra: bản v1.5 về lúc 00:11 ngày 07/10 và ghi đè thư mục * `siteup-ds/`. Trong bản đó, Breadcrumb đổi từ style nội dòng sang hai lớp * `su-bc__ol` và `su-bc__li`. Mà `thanh-phan.css` của bản dựng rút từ bản CŨ * nên không có luật nào cho hai lớp ấy. Hậu quả: trang nào RÚT LẠI sau thời * điểm đó là breadcrumb rơi về danh sách đánh số "1. Trang chủ / 2. Giới * thiệu". Tôi rút lại `/gioi-thieu/` lúc 00:37 nên chỉ trang đó hỏng; bốn * trang còn lại rút từ trước nên vẫn mang style nội dòng của bản cũ và vẫn * đúng. Tức là lỗi này NẰM CHỜ ở mọi trang, chỉ lộ ra khi rút lại. * * Chép đúng hai luật từ `siteup-ds/components.css` v1.5. */ .su-bc__ol{ display: contents }.su-bc__li{ display: inline-flex; align-items: center; gap: 4px }/* --- 5. THẺ MẪU: dựng lại theo phương án K2 (Dũng chốt 08/10/2026) --------- * * BỐN THỨ ĐỔI, và vì sao: * * (a) BỎ HẾT NÚT TRONG THẺ. Trước đây mỗi thẻ hai nút, chín thẻ thành mười tám * nút. Sáu viên than chì đặc xếp thành lưới nặng hơn chính sáu ảnh chụp * mẫu, mắt đọc hàng nút trước khi đọc mẫu. Dũng báo: "nhiều call to action * quá, rối". Nay nút "Chọn mẫu" ẩn hẳn, nút "Xem demo" rút thành một dòng * chữ kèm mũi tên. * * (b) CẢ THẺ BẤM ĐƯỢC. Liên kết "Xem demo" trải một lớp vô hình phủ kín thẻ, * nên chạm vào ảnh cũng có tác dụng - trước đó ảnh bìa là `div` chết, mà * ảnh mới là thứ ngón tay chạm vào theo bản năng. * * (c) XẾP LẠI CỤM CHỮ. Ngành lên đầu thành chip (thứ duy nhất giúp khách biết * mẫu có hợp mình không, trước đó là dòng nhỏ nhất nhạt nhất). Tên, rồi * giá. Hàng cuối cân hai đầu: trái "Xem demo", phải mã mẫu - mã lui về * đúng cấp số hiệu thay vì chiếm vị trí mạnh nhất. * * (d) data:image/svg+xml,%3Csvg%20xmlns=%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox=%22-1%20-1%2041%2030%22%3E%3Cpath%20d=%22M3.06%201.93L37.94%2014L3.06%2026.07L0.94%2019.93L18.06%2014L0.94%208.07Z%22%20fill=%22%23000%22%2F%3E%3C%2Fsvg%3ERON THƯƠNG HIỆU. Dấu chevron của chính logo SiteUp nằm trọn trong * thẻ, mờ 18%. Rê vào thì lao sang phải và tắt dần; thẻ cắt mép nên trông * như lao ra ngoài. Đây là chỗ DUY NHẤT trên thẻ mang hình riêng của * thương hiệu - trước đó thẻ đổi chữ Việt sang Anh là thành card của bất * kỳ chợ theme nào. * * Làm TOÀN BỘ bằng CSS, không sửa mã sinh trang. Vì `/mau-giao-dien/` rút lại * từ bản mẫu mỗi lần đổi nội dung; sửa vào HTML rút ra là lần sau mất sạch. */ .su-tpl{ position: relative; overflow: hidden }/* Hòa tan hai lớp bọc để sáu phần tử con cùng vào một lưới */ .su-tpl__meta, .su-tpl__meta > :first-child{ display: contents }/* Cần (0,3,0) để thắng `.su-sec .e-con.su-tpl__body` của `trang-chu.css`, nơi vẫn khai `gap` cho bản Elementor. */ .su-tpl .su-tpl__body, .su-sec .hop.su-tpl__body{ display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0 !important; position: relative; z-index: 1; /* Dem 24 thay cho 16 cua bo chuan (`--space-4`), gop y 10/10/2026: "noi dung trong container rat sat ranh gioi container". Do ra dung vay, va do duoc bang mot phep so: khe GIUA hai the la 24, con dem BEN TRONG the chi 16 - tuc trong the tho it hon khoang cach giua cac the. Cum chu vi the khong co khung, no cham mep. Them mot cho nua: khe lon nhat trong cum chu la 16 (anh xuong chip), bang dung dem ngoai, nen mat khong tach duoc "le cua the" voi "khe giua hai dong". Dem phai lon hon khe trong lon nhat. 24 la bac ke tiep cua thang 4/8/12/16/24; khong dat so ngoai thang. */ padding: var(--space-6) !important; }.su-tpl__ind{ grid-area: 1 / 1 / 2 / 3; justify-self: start }.su-tpl__name{ grid-area: 2 / 1 / 3 / 3; margin-top: var(--space-2) }.su-tpl__price{ grid-area: 3 / 1 / 4 / 3; margin-top: var(--space-1) }.su-tpl__acts{ grid-area: 4 / 1 / 5 / 2; margin-top: var(--space-3) }.su-tpl__code{ grid-area: 4 / 2 / 5 / 3; margin-top: var(--space-3); justify-self: end }/* Ngành thành chip. Màu trung tính vì bản Elementor KHÔNG có `data-hue` còn bản tĩnh thì có; để mỗi bên một màu là hai trang lệch nhau. Xem việc 57. */ .su-tpl .su-tpl__ind{ display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: var(--radius-pill); background: var(--surface-2); color: var(--text-2); font-size: var(--text-caption); font-weight: var(--fw-semibold); margin-top: 0; }/* Giá: bỏ phông mono. Mono + giãn chữ + nằm cạnh mã mẫu đọc ra một DÒNG HÓA ĐƠN, trong khi giá ở đây là lời chào. Kéo chữ "đ" sát số theo lối viết tiếng Việt `4.900.000đ`. */ /* PHẢI nhắm cả `.elementor-heading-title` bên trong, không chỉ cái vỏ. Trên trang chủ `.su-tpl__price` là VỎ widget; chữ thật nằm trong một `h3` bên trong và nó mang preset riêng, đè lên vỏ. Lần đầu tôi chỉ đổi vỏ nên trang danh mục đúng còn trang chủ vẫn mono - Dũng bắt được 09/10/2026. Đây là lần thứ ba cùng một bẫy: đo vỏ rồi tưởng đã sửa xong. */ .su-tpl .su-tpl__price, .su-tpl .su-tpl__price > :is(h1,h2,h3,h4,h5,h6,p,div,span,a){ font-family: var(--font-ui); white-space: normal; }.su-tpl .su-tpl__price small:last-of-type{ font-size: inherit; color: inherit; font-weight: inherit; margin-left: -.28em; }/* Mã mẫu: lui về cỡ chú thích */ .su-tpl .su-tpl__code{ font-size: var(--text-caption); letter-spacing: .06em }/* Hàng nút: giấu nút chính, nút phụ thành dòng chữ */ .su-tpl__acts{ display: block !important; grid-template-columns: none !important }.su-tpl__acts > :last-child{ display: none }.su-tpl__acts > :first-child, .su-tpl__acts > :first-child > a{ display: inline-flex; align-items: center; gap: 6px; height: auto; min-height: 0; padding: 0; border: 0; background: none; border-radius: 0; color: var(--text); font: var(--fw-semibold) 14px/1.2 var(--font-ui); width: auto; }/* TRẠNG THÁI RÊ. Bắt buộc phải khai, không thì hỏng: nút phụ của bộ chuẩn khi rê đổi chữ sang TRẮNG và nền sang than chì. Bỏ nền đi mà quên chữ thì còn lại chữ trắng trên nền trắng - mất hẳn chữ. Bên Elementor thì nền than chì quay lại, viên nút hiện nguyên hình, đúng thứ vừa bỏ đi. Dũng báo 09/10/2026. Dùng `--accent-text` (hổ phách 700) theo đúng luật bộ chuẩn: "chữ hoặc link vàng trên nền sáng dùng amber-700", đạt 5,6:1. */ .su-tpl__acts > :first-child:hover, .su-tpl__acts > :first-child:focus-within, .su-tpl__acts a:hover, .su-tpl__acts a:focus-visible, .su-tpl:hover .su-tpl__acts > :first-child, .su-tpl:hover .su-tpl__acts a{ background: none; border-color: transparent; color: var(--accent-text); }.su-tpl__acts a:focus-visible{ outline: 2px solid var(--text); outline-offset: 3px }/* Mũi tên, tiến 5px khi rê */ .su-tpl__acts > :first-child a::after, .su-tpl__acts > a:first-child::after{ content: ""; width: 16px; height: 16px; flex: 0 0 16px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns=%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M5%2012h14M12%205l7%207-7%207%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns=%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M5%2012h14M12%205l7%207-7%207%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat; transition: transform var(--dur) var(--ease); }.su-tpl:hover .su-tpl__acts a::after{ transform: translateX(5px) }/* Lớp phủ kín thẻ: cả thẻ thành một vùng bấm */ .su-tpl__acts a:first-of-type::before, .su-tpl__acts > :first-child > a::before{ content: ""; position: absolute; inset: 0; z-index: 2; }/* data:image/svg+xml,%3Csvg%20xmlns=%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox=%22-1%20-1%2041%2030%22%3E%3Cpath%20d=%22M3.06%201.93L37.94%2014L3.06%2026.07L0.94%2019.93L18.06%2014L0.94%208.07Z%22%20fill=%22%23000%22%2F%3E%3C%2Fsvg%3ERON. 0,80s theo mức V2 Dũng chốt. Phần mờ dần NGẮN HƠN và TRỄ hơn phần chạy, nên mắt theo được cả quãng bay thay vì thấy nó biến mất giữa chừng. * * CHỖ ĐẶT: góc trên phải của THÂN THẺ, đối diện chip ngành. Ban đầu tôi để * góc dưới phải, nhưng mã mẫu cũng ở đó - hai vật cùng một góc, xê dịch kiểu * gì cũng đè nhau vì chevron rộng 64px mà mã rộng 70px. Hàng chip thì bỏ * trống hẳn nửa phải, đặt vào đó là hết chạm, mà vẫn đúng hướng bay sang phải. */ .su-tpl__body::after{ content: ""; position: absolute; right: 20px; top: 18px; z-index: 0; width: 64px; aspect-ratio: 40 / 28; pointer-events: none; /* 18% như bản duyệt. Có lúc hạ xuống 15% khi chevron còn là khối đặc; nét viền ít mực hơn hẳn nên 15% là mờ quá, không thấy. */ background: var(--accent); opacity: .18; -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns=%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox=%22-1%20-1%2041%2030%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.5%22%20stroke-linejoin=%22miter%22%20vector-effect=%22non-scaling-stroke%22%3E%3Cpath%20vector-effect=%22non-scaling-stroke%22%20d=%22M3.06%201.93L37.94%2014L3.06%2026.07L0.94%2019.93L18.06%2014L0.94%208.07Z%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns=%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox=%22-1%20-1%2041%2030%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.5%22%20stroke-linejoin=%22miter%22%20vector-effect=%22non-scaling-stroke%22%3E%3Cpath%20vector-effect=%22non-scaling-stroke%22%20d=%22M3.06%201.93L37.94%2014L3.06%2026.07L0.94%2019.93L18.06%2014L0.94%208.07Z%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat; transition: transform .80s cubic-bezier(.16,.84,.44,1), opacity .56s cubic-bezier(.16,.84,.44,1) .24s; }.su-tpl:hover .su-tpl__body::after{ transform: translateX(150px); opacity: 0 } @media (prefers-reduced-motion: reduce) {.su-tpl__body::after{ transition: none }.su-tpl:hover .su-tpl__body::after{ transform: none; opacity: .32 } }/* --- 5b. Bản Elementor: nhắm vào CHỮ, không nhắm vào vỏ ------------------- * * Trên trang chủ, mỗi ô chữ của thẻ là một widget: `.su-tpl__name` và bạn bè * chỉ là cái VỎ, chữ thật nằm trong `.elementor-heading-title` bên trong, và * Elementor sinh cho nó một luật riêng theo mã phần tử: * .elementor-21 .elementor-element.elementor-element-tpl0gia .elementor-heading-title * Bốn lớp, tức (0,4,0). Mọi luật tôi viết cho cái vỏ đều không chạm tới chữ, * và luật tôi viết cho chữ ở mục 5 chỉ (0,3,0) nên vẫn thua. * * Hậu quả đã đo 09/10/2026: trang danh mục đúng hết, trang chủ thì tên 16px * thay vì 20, mã 13px thay vì 11, ngành 13px/400 thay vì 11px/600, giá vẫn * phông mono. Hai trang cùng một thành phần mà khác nhau bốn chỗ. * * `:not(#su)` cộng một bậc định danh thành (1,3,0), đủ thắng (0,4,0). Mã `su` * không tồn tại nên không đổi phần tử nào khớp. * * ĐÂY LÀ LẦN THỨ BA cùng một bẫy trong hai ngày: đo cái vỏ rồi tưởng đã sửa * xong. Lần sau đụng tới chữ trong thẻ ở trang chủ thì nhắm thẳng * `.elementor-heading-title` ngay từ đầu. */ .su-tpl .su-tpl__name > :is(h1,h2,h3,h4,h5,h6,p,div,span,a):not(#su){ font-size: var(--fs-2); line-height: var(--lh-heading); font-weight: var(--fw-semibold); }.su-tpl .su-tpl__price > :is(h1,h2,h3,h4,h5,h6,p,div,span,a):not(#su){ font-family: var(--font-ui) }.su-tpl .su-tpl__code > :is(h1,h2,h3,h4,h5,h6,p,div,span,a):not(#su){ font-size: var(--text-caption); letter-spacing: .06em; }.su-tpl .su-tpl__ind > :is(h1,h2,h3,h4,h5,h6,p,div,span,a):not(#su){ font-size: var(--text-caption); font-weight: var(--fw-semibold); line-height: 1; }