/* ===== PHÔNG CHỮ TỰ LƯU TẠI MÁY CHỦ ===== Không gọi CDN lúc chạy: máy chủ có thể bị chặn ra ngoài, và trang pháp lý không nên để phông chữ tiết lộ người đọc là ai cho bên thứ ba. Inter cho giao diện, Lora cho tiêu đề và tên văn bản. Bộ vietnamese tách riêng nên máy chỉ tải 10KB khi gặp chữ có dấu. */ @font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap; src:url(/static/fonts/inter-400-vietnamese.woff2) format("woff2"); unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB} @font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap; src:url(/static/fonts/inter-400-latin.woff2) format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap; src:url(/static/fonts/inter-500-vietnamese.woff2) format("woff2"); unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB} @font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap; src:url(/static/fonts/inter-500-latin.woff2) format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap; src:url(/static/fonts/inter-600-vietnamese.woff2) format("woff2"); unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB} @font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap; src:url(/static/fonts/inter-600-latin.woff2) format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:Inter;font-style:normal;font-weight:700;font-display:swap; src:url(/static/fonts/inter-700-vietnamese.woff2) format("woff2"); unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB} @font-face{font-family:Inter;font-style:normal;font-weight:700;font-display:swap; src:url(/static/fonts/inter-700-latin.woff2) format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:Lora;font-style:normal;font-weight:600;font-display:swap; src:url(/static/fonts/lora-600-vietnamese.woff2) format("woff2"); unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB} @font-face{font-family:Lora;font-style:normal;font-weight:600;font-display:swap; src:url(/static/fonts/lora-600-latin.woff2) format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:Lora;font-style:normal;font-weight:700;font-display:swap; src:url(/static/fonts/lora-700-vietnamese.woff2) format("woff2"); unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB} @font-face{font-family:Lora;font-style:normal;font-weight:700;font-display:swap; src:url(/static/fonts/lora-700-latin.woff2) format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} /* ============================================================================= HỆ THIẾT KẾ alaw — tầng nền ============================================================================= Vì sao có tệp này: bản trước có 12 biến nhưng 119 lần viết cứng mã màu, 21 cỡ chữ, 22 khoảng cách và 12 bán kính bo góc khác nhau. Không phải "màu xấu" mà là KHÔNG CÓ HỆ THỐNG, nên càng thêm tính năng càng lệch. Khí chất: trầm tĩnh, nghiêm cẩn. Đặt cạnh một bản án in ra không bị lệch tông. Ít màu, nhiều khoảng trắng, chữ có chân cho tiêu đề và tên văn bản. Quy tắc bất di bất dịch: 1. Không viết mã màu thẳng vào quy tắc. Chỉ dùng biến ở đây. 2. Không viết cỡ chữ hay khoảng cách tùy tiện. Chỉ dùng thang bên dưới. 3. Mọi thứ bấm được phải có viền khi đi tới bằng bàn phím. ============================================================================= */ :root{ /* --- Thang chữ. Tỷ lệ 1.2, neo ở 14px cho giao diện dày thông tin --- */ --chu-2xs: 11px; /* nhãn nhỏ, chú thích phụ */ --chu-xs: 12px; /* siêu dữ liệu, ghi chú */ --chu-sm: 13px; /* chữ phụ, nút nhỏ */ --chu-md: 14px; /* chữ nền của giao diện */ --chu-lg: 16px; /* tên văn bản, tiêu đề thẻ */ --chu-xl: 19px; /* tiêu đề mục */ --chu-2xl: 23px; /* tiêu đề màn hình */ --chu-3xl: 28px; /* tiêu đề trang lớn */ --cao-dong-chat: 1.35; /* tiêu đề */ --cao-dong: 1.6; /* giao diện */ --cao-dong-doc: 1.78; /* toàn văn văn bản luật, đọc dài */ --phong-giao-dien: Inter, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --phong-van-ban: Lora, Cambria, Constantia, Georgia, "Times New Roman", serif; /* --- Thang khoảng cách, gốc 4px. Không dùng giá trị ngoài thang --- */ --kc-1: 4px; --kc-2: 8px; --kc-3: 12px; --kc-4: 16px; --kc-5: 20px; --kc-6: 24px; --kc-8: 32px; --kc-10: 40px; --kc-12: 48px; /* --- Bo góc: chỉ ba mức, và một mức tròn --- */ --goc-sm: 6px; /* nhãn, ô nhập nhỏ */ --goc-md: 10px; /* nút, thẻ, ô nhập */ --goc-lg: 14px; /* khối lớn, hộp thoại */ --goc-tron: 999px; /* --- Đổ bóng: bốn mức, dùng đúng mực navy chứ không dùng đen --- */ --bong-1: 0 1px 2px rgba(16, 32, 58, .06); --bong-2: 0 2px 8px rgba(16, 32, 58, .08); --bong-3: 0 8px 24px rgba(16, 32, 58, .12); --bong-4: 0 20px 48px rgba(16, 32, 58, .20); /* --- Chuyển động. Nhanh, không màu mè: đây là công cụ làm việc --- */ --nhanh: 120ms cubic-bezier(.2, 0, .2, 1); --vua: 200ms cubic-bezier(.2, 0, .2, 1); --cao-dinh: 60px; --dau-cot: 52px; --rong-noi-dung: 1240px; } /* ============================================================================= MÀU — khai theo VAI TRÒ, không khai theo tên màu Nhờ vậy chế độ tối chỉ cần đổi giá trị, không phải sửa một quy tắc nào. ============================================================================= */ :root, :root[data-theme="sang"]{ color-scheme: light; --muc: #14243c; /* mực chính, navy rất đậm */ --muc-nhat: #47566b; /* chữ phụ */ /* Sắc này từng là #6f7d90, chỉ đạt 3,65 trên nền chìm — dưới chuẩn AA của WCAG, mà nó lại đúng là màu của chữ 11–12px, chỗ cần tương phản nhất. Đậm lên tới #5c6875 thì thấp nhất còn 4,95, đạt AA ở mọi nền mà mắt vẫn thấy là chữ phụ. */ --muc-mo: #5c6875; /* siêu dữ liệu, chú thích */ --nen: #f7f6f3; /* nền trang, trắng ngà chứ không trắng lóa */ --nen-noi: #ffffff; /* mặt thẻ, mặt khối */ --nen-chim: #f1efea; /* khối chìm, vùng nhấn nhẹ */ --nen-mo: #eceae5; /* nền nút thứ cấp khi rê chuột */ --vien: #e0ddd6; /* viền thường */ --vien-dam: #cbc7bd; /* viền cần thấy rõ */ --nhan-manh: #14243c; /* màu hành động chính */ --nhan-manh-hover:#22375a; --tren-nhan-manh: #ffffff; --nhan-nhe: #eef1f6; /* nền của trạng thái đang chọn */ /* Bốn màu ngữ nghĩa. Không dùng vào việc trang trí. */ --tot: #1c6b45; --tot-nen: #e8f2ec; --tot-vien: #bcd9c8; --canh: #8a5a00; --canh-nen: #faf1e0; --canh-vien: #ecd9b3; --nguy: #a32118; --nguy-nen: #fbeceb; --nguy-vien: #efc7c4; --trung: #5b6b80; --trung-nen: #eef0f3; --trung-vien: #dcdfe4; --vien-tieu-diem: #2f6df6; /* viền bàn phím, cố ý khác mọi màu khác */ --danh-dau: #fff5cc; /* tô sáng đoạn được trỏ tới */ /* Chữ nằm trên nền đỏ cảnh báo. Trắng ở cả hai chế độ vì --nguy luôn là đỏ đậm. */ --tren-nguy: #ffffff; } :root[data-theme="toi"]{ color-scheme: dark; --muc: #e8e6e1; --muc-nhat: #b3b8c2; --muc-mo: #868d99; --nen: #12151a; --nen-noi: #191d24; --nen-chim: #21262f; --nen-mo: #2a303a; --vien: #2c323c; --vien-dam: #3d4551; --nhan-manh: #c9d7ef; --nhan-manh-hover:#e3ebfa; --tren-nhan-manh: #12151a; --nhan-nhe: #232b38; --tot: #6ec295; --tot-nen: #14251d; --tot-vien: #24503a; --canh: #e0b160; --canh-nen: #2a2113; --canh-vien: #55421d; --nguy: #f08d84; --nguy-nen: #2c1715; --nguy-vien: #5c2a26; --trung: #9aa5b5; --trung-nen: #212630; --trung-vien: #343b47; --vien-tieu-diem: #7aa5ff; --danh-dau: #3d3413; --bong-1: 0 1px 2px rgba(0, 0, 0, .35); --bong-2: 0 2px 8px rgba(0, 0, 0, .40); --bong-3: 0 8px 24px rgba(0, 0, 0, .50); --bong-4: 0 20px 48px rgba(0, 0, 0, .60); } /* Chưa chọn gì thì theo cài đặt của máy. Có chọn rồi thì data-theme ở trên thắng. */ @media (prefers-color-scheme: dark){ :root:not([data-theme]){ color-scheme: dark; --muc:#e8e6e1; --muc-nhat:#b3b8c2; --muc-mo:#868d99; --nen:#12151a; --nen-noi:#191d24; --nen-chim:#21262f; --nen-mo:#2a303a; --vien:#2c323c; --vien-dam:#3d4551; --nhan-manh:#c9d7ef; --nhan-manh-hover:#e3ebfa; --tren-nhan-manh:#12151a; --nhan-nhe:#232b38; --tot:#6ec295; --tot-nen:#14251d; --tot-vien:#24503a; --canh:#e0b160; --canh-nen:#2a2113; --canh-vien:#55421d; --nguy:#f08d84; --nguy-nen:#2c1715; --nguy-vien:#5c2a26; --trung:#9aa5b5; --trung-nen:#212630; --trung-vien:#343b47; --vien-tieu-diem:#7aa5ff; --danh-dau:#3d3413; --bong-1:0 1px 2px rgba(0,0,0,.35); --bong-2:0 2px 8px rgba(0,0,0,.40); --bong-3:0 8px 24px rgba(0,0,0,.50); --bong-4:0 20px 48px rgba(0,0,0,.60); } } /* ============================================================================= NỀN CHUNG ============================================================================= */ *{box-sizing:border-box} /* Thuộc tính hidden phải thắng mọi display do ta tự đặt. Thiếu dòng này thì .tl-khung{display:flex} đè lên [hidden] của trình duyệt, khiến khung trợ lý hiện thường trực dù mã JS đã đặt hidden=true. */ [hidden]{display:none !important} html,body{height:100%} body{ margin:0; font-family:var(--phong-giao-dien); font-size:var(--chu-md); line-height:var(--cao-dong); background:var(--nen); color:var(--muc); overflow:hidden; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } input,textarea,button,select{font-family:inherit;color:inherit} code{background:var(--nen-chim);padding:1px 5px;border-radius:var(--goc-sm); font-size:var(--chu-xs);font-family:ui-monospace,Consolas,monospace} /* --- Viền bàn phím. Bản trước có 0 khai báo focus-visible, người dùng bàn phím hoàn toàn không biết mình đang đứng ở đâu. --- */ :focus-visible{ outline:2px solid var(--vien-tieu-diem); outline-offset:2px; border-radius:var(--goc-sm); } :focus:not(:focus-visible){outline:none} /* --- Thanh cuộn hợp tông, không để mặc định trắng lóa giữa nền tối --- */ *{scrollbar-width:thin;scrollbar-color:var(--vien-dam) transparent} *::-webkit-scrollbar{width:10px;height:10px} *::-webkit-scrollbar-thumb{background:var(--vien-dam);border-radius:var(--goc-tron); border:3px solid transparent;background-clip:content-box} *::-webkit-scrollbar-thumb:hover{background:var(--muc-mo);background-clip:content-box} /* --- Ai tắt hiệu ứng chuyển động thì tôn trọng --- */ @media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important} } /* --- Chữ có chân dùng cho tiêu đề và tên văn bản, tạo khí chất hồ sơ pháp lý --- */ h1,h2,h3,h4,.co-chan{font-family:var(--phong-van-ban);font-weight:600; line-height:var(--cao-dong-chat);letter-spacing:-.01em}