/** * Bộ biến giao diện dùng chung cho toàn site — nguồn duy nhất của sự thật. * * Trước file này mỗi trang tự khai một bảng màu riêng: sáu sắc đỏ, chín sắc * chữ, tám nền nhạt và mười hai màu viền khác nhau, phần lớn lệch nhau vài * điểm và không ai phân biệt được bằng mắt. Nay mọi trang lấy màu, cỡ chữ, * bề rộng mạch nội dung, bo góc và đổ bóng từ đây. * * Cách dùng: mỗi trang vẫn giữ bảng biến riêng của mình ở đầu tệp CSS, nhưng * giá trị trỏ về biến trong file này thay vì viết thẳng mã màu: * * .ak-dl { * --ak-do: var(--ak-mau-do); * } * * Nhờ vậy đổi màu chủ đạo của cả site chỉ phải sửa một dòng ở đây, còn tên * biến trong từng trang thì giữ nguyên nên không phải rà lại hàng nghìn dòng. * * Đặt tên bằng tiếng Việt không dấu, tiền tố `--ak-` rồi tới nhóm: `mau` cho * màu, `co` cho cỡ chữ, `dong` cho chiều cao dòng, `dam` cho độ đậm, `cach` * cho khoảng cách, `goc` cho bo góc, `bong` cho đổ bóng, `rong` cho bề rộng, * `nut` cho nút bấm. Tên đầy đủ không trùng với biến cục bộ nào đang có, đã * đối chiếu toàn bộ 19 tệp CSS trước khi đặt. * * Không đặt quy tắc trang trí nào trong file này ngoài `:root`, để nó không * bao giờ đè lên giao diện của Flatsome hay của một trang cụ thể. * * @package Flatsome\Child */ :root { /* ------------------------------------------------------------------ Thang đỏ — đúng bốn bậc ------------------------------------------------------------------ Đỏ là màu thương hiệu duy nhất. Bốn bậc dưới đây là toàn bộ sắc đỏ được phép có mặt trên site; mọi sắc đỏ cũ (#ed1c24, #e02424, #e31937, #9e1c20, #ff8f85) đã bị xoá. Chia việc theo vai, không theo cảm tính: --ak-mau-do nhấn hình học: vạch dưới tiêu đề, chấm đầu dòng, biểu tượng nhỏ, vòng tiêu điểm, quầng bóng, nền mờ. Không bao giờ có chữ nằm trên nó. Trên nền trắng đo được 4,17:1, đạt mức 3:1 dành cho hình và viền thành phần. --ak-mau-do-dam mọi chỗ có chữ dính tới đỏ: nền nút đặc, nhãn giảm giá, chữ đỏ trên nền trắng. Trên nền trắng đo được 5,82:1, đạt AA cho chữ thường. Đây là lý do nút không dùng #f32020: chữ nút là 14–16px nên 4,17:1 không đủ. --ak-mau-do-tham rê chuột và nhấn trên nền đỏ đặc. 7,79:1. --ak-mau-do-mo nền nhạt thay cho khối đỏ đặc, giữ tỉ lệ đỏ dưới 10% khung nhìn. */ --ak-mau-do: #f32020; --ak-mau-do-dam: #c9151b; --ak-mau-do-tham: #a5111a; --ak-mau-do-mo: rgba(243, 32, 32, .08); /* Đỏ pha loãng đậm hơn một bậc, dùng cho nền nhãn trên khối tối. */ --ak-mau-do-mo-2: rgba(243, 32, 32, .18); /* ------------------------------------------------------------------ Đỏ của logo — KHÔNG dùng cho giao diện ------------------------------------------------------------------ Chữ A trong logo A Khoa là #e62327. Sắc này **không** thuộc thang bốn bậc ở trên và không được phép dùng cho bất cứ thành phần giao diện nào. Vì sao tách riêng. Logo là tài sản nhận diện có trước, đã in trên biển hiệu và ấn phẩm, nên web phải theo logo chứ không nắn logo theo web. Ghi ra đây để lần sau không ai lấy màu từ logo rồi thêm một sắc đỏ thứ năm — đúng cái mớ sáu sắc đỏ mà file này sinh ra để dẹp. Đo trên nền trắng: #e62327 được 4,53:1, còn --ak-mau-do-dam được 5,82:1. Nên chữ đỏ trong giao diện vẫn dùng --ak-mau-do-dam. Ngày 10/09/2026 thanh đầu trang đổi sang nền sáng chính là để logo hiện đúng hai màu gốc của nó, không phải lọc đảo màu nữa. */ --ak-mau-do-logo: #e62327; /* ------------------------------------------------------------------ Ba màu nhấn của bản mẫu khách chọn — khoá theo trang ------------------------------------------------------------------ Ba hướng màu này đến từ ba bản mẫu khác nhau khách đã duyệt, nên giữ lại. Điều kiện: mỗi màu chỉ được sống trong đúng trang của nó và không bao giờ đứng cạnh đỏ trong cùng một khung nhìn. Xem mục 7 của biên bản đồng bộ tone màu. be — bộ trang bán hàng dựng theo mẫu Là Nhà vàng đồng — trang catalogue, dựng theo mẫu Doric navy — trang xưởng sản xuất */ --ak-mau-cam: #f1be87; --ak-mau-cam-dam: #ab8760; --ak-mau-vang: #c9a04a; /* Bậc vàng đậm đã hạ sáng từ #9a7a2f (4,04:1) xuống #856a20 (5,15:1) để chữ 13px và viền nút của trang catalogue đạt ngưỡng. */ --ak-mau-vang-dam: #856a20; --ak-mau-vang-sang: #e0bd72; --ak-mau-vang-nhat: #f6efe1; --ak-mau-kem: #faf6ef; --ak-mau-navy: #163150; --ak-mau-navy-dam: #102540; /* Màu trạng thái. Xanh đã hạ sáng từ #0f9d58 xuống để chữ 13px đạt 5,43:1 trên nền trắng; bản cũ chỉ được 3,51:1. */ --ak-mau-tot: #0b7a3f; /* ------------------------------------------------------------------ Thang đen và xám — dẫn xuất từ #000, trung tính ------------------------------------------------------------------ Bảng cũ ngả xanh (#626973, #e3e7ec, #f6f7f9). Đỏ là màu nóng, đặt cạnh xám lạnh thì hai bên vênh nhau thấy rõ. Thang dưới đây trung tính nên đỏ ngồi lên không bị lệch. */ /* Đen tuyệt đối. Chỉ dùng cho khối tối tràn viền, đầu trang dính, chân trang và lớp phủ ảnh — không bao giờ cho chữ trên nền trắng. */ --ak-mau-den: #000000; /* Chữ tiêu đề. 18,91:1 trên trắng. Không dùng #000 cho chữ: đen tuyệt đối trên nền trắng gây chói và mỏi mắt. */ --ak-mau-muc: #0f1114; /* Chữ nội dung dài. 13,44:1 trên trắng. */ --ak-mau-chu: #2b2f36; /* Chữ phụ: mô tả, chú thích, nhãn, gợi ý trong ô nhập. 4,99:1 trên trắng và 4,66:1 trên nền khối nhạt, đủ AA cho chữ thường. */ --ak-mau-mo: #6b7076; /* Chữ và biểu tượng đã vô hiệu. 2,75:1 — cố ý dưới ngưỡng, WCAG miễn trừ thành phần vô hiệu. Không dùng cho chữ còn đọc được. */ --ak-mau-mo-nhat: #9a9ca0; --ak-mau-trang: #ffffff; /* ------------------------------------------------------------------ Màu nền ------------------------------------------------------------------ */ --ak-mau-nen: #f7f7f8; --ak-mau-nen-2: #efeff1; /* Nền ô ảnh sản phẩm, nhạt hơn nền khối để ảnh nền trắng vẫn nổi. */ --ak-mau-nen-anh: #fafafa; /* Nền ấm, khoá theo trang xưởng sản xuất và trang catalogue. */ --ak-mau-nen-am: #f9f5f1; /* Khối tối. Neo về #000 đúng như thang màu: dải kêu gọi liên hệ, chân trang, khối điểm nhấn đều là khối tràn viền. */ --ak-mau-toi: var(--ak-mau-den); --ak-mau-toi-mo: var(--ak-mau-den); /* Bậc sáng hơn một nấc, chỉ dùng làm điểm dừng giữa của dải chuyển màu bên trong khối tối, hoặc làm mặt nổi của thẻ nằm trên nền đen. */ --ak-mau-toi-2: #17191d; /* ------------------------------------------------------------------ Màu viền ------------------------------------------------------------------ */ /* Viền trang trí: vạch chia, mép thẻ ở trạng thái nghỉ. 1,27:1 — là hình trang trí nên không thuộc diện phải đạt 3:1. */ --ak-mau-vien: #e4e4e7; --ak-mau-vien-nhat: #efeff1; --ak-mau-vien-dam: #c9c9ce; /* Viền của thành phần điều khiển: ô nhập, ô chọn, nút viền. Đây là thứ duy nhất cho người dùng biết ranh giới ô nên phải đạt 3:1 — đo được 3,36:1 trên nền trắng. Xám nhạt #c9c9ce chỉ được 1,65:1, không đủ. */ --ak-mau-vien-o: #8c8c8c; /* Viền ấm, đi cùng nền ấm, khoá theo trang. */ --ak-mau-vien-am: #e8e0d8; /* ------------------------------------------------------------------ Lớp phủ trung tính ------------------------------------------------------------------ Dẫn xuất thẳng từ #000 và #fff nên không mang sắc nào, đặt lên ảnh hay lên khối màu đều không làm lệch tone. */ --ak-mau-den-mo-1: rgba(0, 0, 0, .05); --ak-mau-den-mo-2: rgba(0, 0, 0, .12); --ak-mau-den-mo-25: rgba(0, 0, 0, .30); --ak-mau-den-mo-3: rgba(0, 0, 0, .55); --ak-mau-den-mo-4: rgba(0, 0, 0, .95); /* Lớp phủ của đầu trang khi nó trong suốt đè lên băng ảnh. Ảnh bìa mỗi trang một khác, có trang rất sáng, nên phải có lớp đen mờ này thì chữ trắng của menu mới đủ tương phản. Tính theo trường hợp xấu nhất là ảnh trắng tinh: hàng menu nằm ở khoảng 72% chiều cao, ở đó độ mờ .55 cho 4,74:1; thanh trên cùng còn chồng thêm lớp .3 của nó nên đạt 10,9:1. */ --ak-phu-dau-trang: linear-gradient(to bottom, rgba(0, 0, 0, .75) 0%, rgba(0, 0, 0, .62) 80%, rgba(0, 0, 0, 0) 100%); --ak-mau-trang-mo-05: rgba(255, 255, 255, .08); --ak-mau-trang-mo-1: rgba(255, 255, 255, .14); --ak-mau-trang-mo-2: rgba(255, 255, 255, .66); /* ------------------------------------------------------------------ Chữ trên nền tối ------------------------------------------------------------------ Bốn nấc, đi từ rõ nhất tới mờ nhất. Trước đây 50 chỗ chữ trắng mờ dùng **17 mức mờ khác nhau** cho cùng một việc, từ .4 đến .94, và không ai phân biệt được .66 với .68 hay .72 với .74. --ak-chu-nen-toi-1 chữ chính: tiêu đề, số liệu, nội dung phải đọc kỹ --ak-chu-nen-toi-2 chữ phụ: mô tả dưới tiêu đề, đoạn dẫn --ak-chu-nen-toi-3 chữ thứ ba: nhãn, chú thích, đơn vị --ak-chu-nen-toi-4 chữ gợi ý trong ô nhập và chữ chờ, không mang nội dung bắt buộc phải đọc Ba nấc đầu đều vượt 7:1 trên nền tối của site nên đạt mức AAA. Nấc thứ tư khoảng 5:1, chỉ đạt AA, nên chỉ dùng cho chữ mà bỏ qua cũng không sao. */ --ak-chu-nen-toi-1: var(--ak-mau-trang); --ak-chu-nen-toi-2: rgba(255, 255, 255, .80); --ak-chu-nen-toi-3: rgba(255, 255, 255, .64); --ak-chu-nen-toi-4: rgba(255, 255, 255, .48); /* ------------------------------------------------------------------ Cỡ chữ ------------------------------------------------------------------ */ --ak-co-hero: 48px; --ak-co-h1: 40px; --ak-co-h2: 32px; --ak-co-h3: 24px; --ak-co-h4: 20px; --ak-co-h5: 18px; --ak-co-chu: 16px; /* Nấc trung gian giữa chữ thường và chữ nhỏ. Thêm ngày 09/09/2026: thang cũ nhảy thẳng 16px xuống 14px, nên 37 chỗ cần một cỡ ở giữa đã phải ghi thẳng `15px`. Đừng nhầm với `--ak-nut-co` cũng bằng 15px: biến đó co xuống 14px ở màn hẹp vì là cỡ chữ của nút, dùng cho chữ thường là sai. */ --ak-co-vua: 15px; --ak-co-nho: 14px; --ak-co-vua-nho: 13px; --ak-co-be: 12px; --ak-co-vi: 10px; /* ------------------------------------------------------------------ Cỡ chữ co giãn, chỉ dùng cho tiêu đề lớn ------------------------------------------------------------------ Bốn biến này co dần theo bề rộng màn hình thay vì nhảy bậc ở hai điểm ngắt. Chúng dùng đúng cặp số đầu và cuối của bốn nấc cố định ở trên: `--ak-co-h2-co` bắt đầu từ 22px đúng bằng `--ak-co-h2` ở màn 549px, và dừng ở 32px đúng bằng nó ở màn rộng. Nghĩa là ở hai đầu, dùng bản co giãn hay bản cố định đều ra cùng một cỡ, chỉ khác đoạn giữa. Chỉ tiêu đề từ cỡ h3 trở lên mới được dùng. Chữ nhỏ dùng thang cố định, vì cỡ chữ đọc mà trôi theo bề rộng cửa sổ thì mỗi máy một khác, không còn kiểm soát được độ dài dòng. Xem QĐ về đồng bộ chữ. ------------------------------------------------------------------ */ --ak-co-hero-co: clamp(30px, 5vw, 48px); --ak-co-h1-co: clamp(26px, 3.6vw, 40px); --ak-co-h2-co: clamp(22px, 2.8vw, 32px); --ak-co-h3-co: clamp(19px, 2vw, 24px); /* ------------------------------------------------------------------ Chiều cao dòng và độ đậm ------------------------------------------------------------------ */ /* Sáu nấc, đi từ khít nhất tới thoáng nhất: --ak-dong-khong nút, nhãn, biểu tượng: một dòng, không cần chỗ thở --ak-dong-sit tiêu đề rất lớn, chữ to thì khoảng dòng phải bóp lại --ak-dong-chat tiêu đề thường --ak-dong-vua chữ giao diện, thẻ hàng, nhãn nhiều dòng --ak-dong-thoang đoạn văn trong trang --ak-dong-doc cột đọc dài: bài viết, trang chính sách */ --ak-dong-khong: 1; --ak-dong-sit: 1.15; --ak-dong-chat: 1.25; --ak-dong-vua: 1.45; --ak-dong-thoang: 1.62; --ak-dong-doc: 1.75; /* Sáu nấc độ đậm. Hai nấc 400 và 300 thêm ngày 09/09/2026: trước đó thang bắt đầu từ 500, trong khi 400 mới là độ đậm phổ biến nhất trên trang — 1.203 phần tử dùng nó vì đó là chữ thân bài. Thiếu nấc đó thì mọi chỗ chữ thường đều phải ghi thẳng số. */ --ak-dam-mong: 300; --ak-dam-nhe: 400; --ak-dam-thuong: 500; --ak-dam-vua: 600; --ak-dam-manh: 700; --ak-dam-rat: 800; /* ------------------------------------------------------------------ Giãn chữ ------------------------------------------------------------------ Luôn dùng `em` chứ không dùng `px`: giãn chữ phải nở theo cỡ chữ, một khoảng 0,24px hợp lý ở cỡ 24px thì quá rộng ở cỡ 10px. Bản trước có 40 giá trị khác nhau, lẫn cả `em` lẫn `px`, gồm những cặp không thể phân biệt như `.14px` và `.16px`. --ak-gian-sit tiêu đề lớn, chữ to thì các chữ cái tự trông rời rạc --ak-gian-khong mặc định, chữ thân bài --ak-gian-nhe chữ nhỏ, để dễ đọc hơn một chút --ak-gian-vua chữ in hoa cỡ nhỏ: nhãn, nút, đầu cột --ak-gian-rong nhãn in hoa rất nhỏ, dùng như một nét trang trí */ --ak-gian-sit: -.02em; --ak-gian-khong: 0; --ak-gian-nhe: .02em; /* Bậc thêm 10/09/2026 cho hàng menu đầu trang: .06em quá thưa ở cỡ 14px in hoa, .02em thì chữ dính nhau. Đặt tên theo lối --ak-co-vua-nho đã có. */ --ak-gian-vua-nhe: .04em; --ak-gian-vua: .06em; --ak-gian-rong: .12em; /* ------------------------------------------------------------------ Mạch nội dung ------------------------------------------------------------------ */ /* Bề mặt bán hàng dựng theo mẫu Là Nhà: trang chủ, danh mục, chi tiết hàng. */ --ak-rong-rong: 1520px; --ak-le-rong: 40px; /* Bề mặt nội dung dựng theo mẫu Kosmos: giới thiệu, dự án, tin tức, liên hệ. */ --ak-rong-max: 1200px; --ak-le: 24px; /* Cột đọc của bài viết và trang chính sách. */ --ak-rong-doc: 860px; /* Hai bậc thêm ngày 09/09/2026 khi đồng bộ khoảng cách, nhóm B. Ba bậc trên không đủ: khảo sát 20 bề rộng viết cứng thì không cái nào nằm trong 2px của một bậc nào, tức là thang đang thiếu chứ không phải các trang làm sai. Hai bậc dưới đây bắt đúng hai cụm có sẵn, quy về là không dịch điểm ảnh nào. --ak-rong-vua mạch hẹp hơn Kosmos một bậc: trang chính sách, khối sản phẩm ở trang giới thiệu. --ak-rong-hep cột chữ của dải mở đầu: câu dẫn hero, đoạn dẫn dự án. */ --ak-rong-vua: 1120px; --ak-rong-hep: 780px; /* Đệm hai bên ở màn hẹp, dùng chung cho mọi bề mặt. */ --ak-le-sm: 16px; /* ------------------------------------------------------------------ Thang khoảng cách ------------------------------------------------------------------ */ --ak-cach-1: 4px; --ak-cach-2: 8px; --ak-cach-3: 12px; --ak-cach-4: 16px; --ak-cach-5: 24px; --ak-cach-6: 32px; --ak-cach-7: 40px; --ak-cach-8: 56px; --ak-cach-9: 72px; /* ------------------------------------------------------------------ Bo góc ------------------------------------------------------------------ */ /* Bề mặt bán hàng cố ý giữ góc gần vuông, đúng mẫu Là Nhà. Xem QĐ-20. */ --ak-goc-sac: 2px; --ak-goc-nho: 8px; --ak-goc-vua: 12px; --ak-goc-to: 16px; --ak-goc-lon: 24px; --ak-goc-tron: 999px; /* ------------------------------------------------------------------ Đổ bóng ------------------------------------------------------------------ */ /* Bóng luôn trung tính: dẫn xuất thẳng từ #000 nên không nhuộm màu cho thứ nằm dưới nó. Bản cũ dùng rgba(20, 23, 28, …) hơi ngả xanh. */ --ak-bong-1: 0 1px 2px rgba(0, 0, 0, .05), 0 10px 28px rgba(0, 0, 0, .07); --ak-bong-2: 0 4px 12px rgba(0, 0, 0, .08), 0 20px 40px rgba(0, 0, 0, .10); /* Quầng đỏ duy nhất của cả site: dưới nút chính, và chỉ lúc rê chuột. */ --ak-bong-do: 0 8px 22px rgba(243, 32, 32, .28); /* ------------------------------------------------------------------ Nút bấm ------------------------------------------------------------------ */ --ak-nut-dem: 12px 26px; --ak-nut-dem-nho: 8px 18px; --ak-nut-dem-to: 16px 34px; --ak-nut-co: 15px; --ak-nut-co-nho: 14px; --ak-nut-dam: 600; /* Nút hành động chính của cả site là viên thuốc. Ngoại lệ duy nhất là ba trang bán hàng dựng theo mẫu Là Nhà, ở đó nút dùng `--ak-goc-sac`. */ --ak-nut-goc: var(--ak-goc-tron); /* ------------------------------------------------------------------ Ô nhập của biểu mẫu ------------------------------------------------------------------ */ --ak-o-dem: 12px 16px; --ak-o-goc: 10px; --ak-o-cao: 46px; --ak-o-co: 15px; /* ------------------------------------------------------------------ Chuyển động và vòng tiêu điểm ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ Đường cong ------------------------------------------------------------------ Cả site chỉ có hai đường cong. Trước đây đếm được tám: `ease`, `ease-in`, `ease-out`, `ease-in-out`, `linear` và ba `cubic-bezier` khác nhau, nên hai khối cạnh nhau chuyển động không cùng nhịp. `ease` mặc định của trình duyệt vào nhanh ra chậm đối xứng, nhìn hơi máy móc. Hai đường cong dưới đây đều giảm tốc ở cuối, tức là chuyển động bật ra dứt khoát rồi đậu lại nhẹ, giống cách vật thật dừng. */ /* Tương tác do người dùng gây ra: rê chuột, nhấn, đổi màu, nhấc thẻ. */ --ak-cong: cubic-bezier(.2, .7, .3, 1); /* Chuyển động tự chạy: khối hiện dần khi cuộn, ảnh phóng trong khung. Thoải hơn --ak-cong một chút vì quãng đường dài hơn. */ --ak-cong-vao: cubic-bezier(.22, .61, .36, 1); /* ------------------------------------------------------------------ Thời gian ------------------------------------------------------------------ Năm mốc, chọn theo việc chứ không theo cảm tính. Quy tắc chung: quãng đường càng dài thì thời gian càng lâu, nên đổi màu nhanh nhất còn khối trồi lên nửa màn hình thì chậm nhất. Bản cũ có 29 mốc rải từ 90ms tới 1,4s. */ /* Đổi màu, đổi viền, hiện mờ: không dời chỗ nên phải gần như tức thì. */ --ak-chuyen-nhanh: .18s var(--ak-cong); /* Nhấc thẻ, đổ bóng, nhích biểu tượng: dời vài pixel. */ --ak-chuyen: .25s var(--ak-cong); /* Mở đóng: khối xổ, lớp phủ, ngăn kéo. */ --ak-chuyen-cham: .4s var(--ak-cong); /* Ảnh phóng trong khung: quãng ngắn nhưng diện tích lớn, đi nhanh thì thành giật. */ --ak-chuyen-anh: .5s var(--ak-cong-vao); /* Khối hiện dần khi cuộn tới. */ --ak-chuyen-vao: .7s var(--ak-cong-vao); /* ------------------------------------------------------------------ Quãng đường ------------------------------------------------------------------ */ /* Nhấc thẻ khi rê chuột. Trước đây có -1px, -2px, -3px, -4px, -5px. */ --ak-nhac: -3px; /* Nhấc nút và biểu tượng, nhẹ hơn thẻ một bậc. */ --ak-nhac-nho: -2px; /* Ảnh phóng trong khung. Trước đây có 1.04, 1.05, 1.06. */ --ak-phong: 1.05; /* Mũi tên nhích sang ngang khi rê chuột vào liên kết. */ --ak-day: 4px; /* Quãng khối trồi lên lúc hiện dần, và quãng trượt ngang. */ --ak-vao-xa: 24px; --ak-vao-ngang: 32px; /* Bậc trễ giữa các con trong một lưới nối đuôi nhau vào. */ --ak-vao-tre: .09s; /* Vòng sáng quanh thành phần đang có tiêu điểm. Đỏ ở độ mờ thấp, không phải viền đỏ đặc. Vì một quầng mờ không thể tự nó đạt 3:1 trên nền trắng, viền của chính thành phần đổi sang --ak-mau-do cùng lúc — đó mới là thứ mang đủ tương phản (4,17:1). */ --ak-vong-tieu-diem: 0 0 0 3px rgba(243, 32, 32, .18); /* ------------------------------------------------------------------ Trạng thái tương tác — khai một lần, dùng lại khắp nơi ------------------------------------------------------------------ Đủ năm trạng thái nghỉ, rê chuột, nhấn, tiêu điểm, vô hiệu cho sáu thành phần. Mọi trạng thái đổi trong `--ak-chuyen`. Quy tắc một khung nhìn chỉ một nút đỏ đặc nằm ở tầng bố cục, không phải ở đây: trang nào cũng chỉ đặt `--ak-nut-chinh-*` cho đúng một nút, nút thứ hai lấy `--ak-nut-vien-*`. */ /* Nút chính, nền đặc. Chữ trắng 14–16px nên nền phải là bậc đỏ đậm để đạt 5,82:1; #f32020 chỉ được 4,17:1, không đủ cho cỡ chữ này. */ --ak-nut-chinh-nen: var(--ak-mau-do-dam); --ak-nut-chinh-nen-re: var(--ak-mau-do-tham); --ak-nut-chinh-nen-nhan: var(--ak-mau-do-tham); --ak-nut-chinh-chu: var(--ak-mau-trang); /* Nút phụ, khối tối. Chữ trắng trên #000 là 21:1. */ --ak-nut-phu-nen: var(--ak-mau-den); --ak-nut-phu-nen-re: var(--ak-mau-toi-2); --ak-nut-phu-chu: var(--ak-mau-trang); /* Nút viền — đây là nút thứ hai của mọi khung nhìn. Lúc nghỉ hoàn toàn trung tính, chỉ ngả đỏ khi rê chuột, và cũng chỉ ngả tới nền mờ chứ không thành khối đỏ đặc. */ --ak-nut-vien-nen: transparent; --ak-nut-vien-vien: var(--ak-mau-vien-o); --ak-nut-vien-chu: var(--ak-mau-muc); --ak-nut-vien-nen-re: var(--ak-mau-do-mo); --ak-nut-vien-vien-re: var(--ak-mau-do-dam); --ak-nut-vien-chu-re: var(--ak-mau-do-dam); /* Liên kết văn bản. Chữ đỏ trên nền trắng chỉ được dùng bậc đỏ đậm. */ --ak-lk-chu: var(--ak-mau-do-dam); --ak-lk-chu-re: var(--ak-mau-do-tham); /* Ô nhập. Viền lúc nghỉ phải đạt 3:1 vì nó là thứ duy nhất chỉ ra ranh giới ô. */ --ak-o-nen: var(--ak-mau-trang); --ak-o-vien: var(--ak-mau-vien-o); --ak-o-vien-re: var(--ak-mau-mo); --ak-o-vien-tieu-diem: var(--ak-mau-do); --ak-o-chu: var(--ak-mau-muc); --ak-o-goi-y: var(--ak-mau-mo); /* Thẻ. Lúc nghỉ không bao giờ viền đỏ. */ --ak-the-nen: var(--ak-mau-trang); --ak-the-vien: var(--ak-mau-vien); --ak-the-vien-re: var(--ak-mau-vien-dam); --ak-the-bong-re: var(--ak-bong-1); /* Trạng thái đang chọn: đây là chỗ đỏ được phép làm nền. */ --ak-chon-nen: var(--ak-mau-do-mo); --ak-chon-vien: var(--ak-mau-do); --ak-chon-chu: var(--ak-mau-do-dam); /* Vô hiệu. Miễn trừ tương phản theo WCAG 1.4.3. */ --ak-vo-hieu-nen: var(--ak-mau-nen-2); --ak-vo-hieu-chu: var(--ak-mau-mo-nhat); --ak-vo-hieu-vien: var(--ak-mau-vien); --ak-vo-hieu-mo: .55; } /* * Ba mốc màn hình dùng chung cho cả site, trùng với mốc của Flatsome để lưới * cột và bảng kiểu của mình không đá nhau: dưới 550px là điện thoại, 550 tới * 849px là máy tính bảng, từ 850px trở lên là máy để bàn. * * Chỉ đổi giá trị biến chứ không đặt quy tắc trang trí, nên mọi mạch nội dung * đang dùng `var(--ak-le)` tự thu đệm lại theo, không phải viết lại từng trang. * * ------------------------------------------------------------------------ * QUY ƯỚC ĐIỂM NGẮT — chốt ngày 09/09/2026, đợt đồng bộ khoảng cách, nhóm C * ------------------------------------------------------------------------ * * Biến CSS **không dùng được trong `@media`**, nên không có cách nào khai * `--ak-ngat-bang` rồi viết `@media (max-width: var(--ak-ngat-bang))`. Vì vậy * bộ điểm ngắt phải viết thẳng số ở từng file, và quy ước nằm ở đây. * * Hai mốc bắt buộc, đúng bằng hai mốc mà chính khối này đang dùng: * * max-width: 849px máy tính bảng * max-width: 549px điện thoại * * Bố cục của trang **phải** lật ở đúng hai con số đó. Trước đợt này có 13 file * lật ở 860px và 560px, lệch 11px so với khối trên, nên tồn tại hai dải màn * hình mà bố cục đã là điện thoại còn lề vẫn là của máy tính bảng. Đã gộp hết. * * Ba mốc phụ, chỉ dùng khi thật sự cần thêm một nấc: * * max-width: 479px điện thoại rất nhỏ * max-width: 767px điện thoại nằm ngang * max-width: 1024px máy tính xách tay * * Cần một mốc ngoài sáu con số trên thì ghi lý do ngay tại chỗ dùng. Cặp * `max-width: N` và `min-width: N + 1` là cách viết đúng, không phải lệch. */ @media (max-width: 849px) { :root { --ak-co-hero: 36px; --ak-co-h1: 32px; --ak-co-h2: 26px; --ak-co-h3: 21px; --ak-co-h4: 18px; --ak-le: 20px; --ak-le-rong: 24px; } } @media (max-width: 549px) { :root { --ak-co-hero: 30px; --ak-co-h1: 26px; --ak-co-h2: 22px; --ak-co-h3: 19px; --ak-co-h4: 17px; --ak-le: var(--ak-le-sm); --ak-le-rong: var(--ak-le-sm); --ak-nut-dem: var(--ak-nut-dem-nho); --ak-nut-co: var(--ak-nut-co-nho); } }