/* Phông tự lưu: Be Vietnam Pro 400/500/600/700 — SIL Open Font License 1.1, giấy phép ở /phong/OFL-bevietnampro.txt. Ba phân hệ vietnamese + latin-ext + latin; trình duyệt tự tải đúng tệp theo unicode-range. Thư mục /phong/ chỉ có Be Vietnam Pro. Không gọi máy chủ ngoài. */ @font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:400;font-display:swap;src:url(/phong/be-vietnam-pro-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:"Be Vietnam Pro";font-style:normal;font-weight:400;font-display:swap;src:url(/phong/be-vietnam-pro-400-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:400;font-display:swap;src:url(/phong/be-vietnam-pro-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:"Be Vietnam Pro";font-style:normal;font-weight:500;font-display:swap;src:url(/phong/be-vietnam-pro-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:"Be Vietnam Pro";font-style:normal;font-weight:500;font-display:swap;src:url(/phong/be-vietnam-pro-500-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:500;font-display:swap;src:url(/phong/be-vietnam-pro-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:"Be Vietnam Pro";font-style:normal;font-weight:600;font-display:swap;src:url(/phong/be-vietnam-pro-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:"Be Vietnam Pro";font-style:normal;font-weight:600;font-display:swap;src:url(/phong/be-vietnam-pro-600-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:600;font-display:swap;src:url(/phong/be-vietnam-pro-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:"Be Vietnam Pro";font-style:normal;font-weight:700;font-display:swap;src:url(/phong/be-vietnam-pro-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:"Be Vietnam Pro";font-style:normal;font-weight:700;font-display:swap;src:url(/phong/be-vietnam-pro-700-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:700;font-display:swap;src:url(/phong/be-vietnam-pro-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} /* ── Sàn skill — hệ màu Apple + logo "Bình minh" (bộ nhận diện chung như www.vuduykien.com) ── Nền trắng, MỘT màu nhấn Action Blue, một họ chữ Be Vietnam Pro. Bố cục kiểu "Danh mục tra cứu". Màu chỉ nằm trong khối TOKEN dưới đây; phần còn lại chỉ dùng var(--…). Chế độ sáng/tối: THEO HỆ ĐIỀU HÀNH (@media prefers-color-scheme trong khối token) + nút đổi `.doi-gd` ở thanh trên; `public/giao-dien.js` đặt data-theme="dark"|"light" ở khi người dùng chọn tay. CSP của sàn là style-src 'self': KHÔNG dùng thuộc tính style="" trong HTML, mọi kiểu nằm ở tệp này. */ /* BAT-DAU-TOKEN */ /* ============================================================================= Token của sàn skill (skill.vuduykien.com): HỆ MÀU APPLE + logo "Bình minh". Cấu tạo: PHẦN 1 = bộ nhận diện chung, cùng tên biến với www.vuduykien.com — KHÔNG sửa tay ở đây; PHẦN 2 (cuối khối) = lớp riêng sàn skill: (a) bí danh 6 tên màu cũ của style.css (--the --mem --mo --luc --luc-dam --luc-nen) và các tên phông (--td --nd --nh --ma) trỏ sang token Apple; (b) token cho cụm giá ưu đãi và khối lệnh. KHÔNG có màu HEX mới. ============================================================================= */ /* ============================================================================= PHẦN 1 — Bộ nhận diện chung: HỆ MÀU APPLE, nền trắng. TS.BS. Vũ Duy Kiên. Chỉ lấy MÀU và nguyên tắc "một màu nhấn"; KHÔNG dùng phông SF Pro, logo hay hình của Apple. Nhãn: [Apple] = giá trị lấy theo bảng màu Apple · [đề xuất] = giá trị tự đặt vì bảng màu Apple không có / không đạt AA. TÊN BIẾN giữ nguyên như www đang dùng. Chỉ HEX phẳng để đo được tương phản. Cách dùng: sáng (mặc định) · data-theme="dark" cho chế độ tối · không ghim data-theme thì theo hệ điều hành. ============================================================================= */ :root { color-scheme: light; /* --- Nền --- */ --nen: #FFFFFF; /* [Apple] canvas — nền trang */ --mat: #FFFFFF; /* [Apple] canvas — thẻ, ô nhập, menu */ --mat-2: #F5F5F7; /* [Apple] canvas-parchment — dải xen kẽ, chip, hộp trích dẫn, nền thanh tiến độ, chân trang */ --mat-3: #FAFAFC; /* [Apple] surface-pearl — nền nút phụ (MỚI) */ /* --- Chữ --- */ --chu: #1D1D1F; /* [Apple] ink — chữ chính, tiêu đề */ --chu-2: #333333; /* [Apple] ink-muted-80 — chữ phụ, mô tả */ --chu-3: #6E6E73; /* [đề xuất] chú thích, ngày. Apple ghi ink-muted-48 #7A7A7A = 4,29:1 → KHÔNG đạt AA; #6E6E73 = 5,07:1 */ /* --- Viền --- */ --vien: #E0E0E0; /* [Apple] hairline — kẻ trang trí, viền thẻ 1px */ --vien-nhat: #F0F0F0; /* [Apple] divider-soft — vòng mờ quanh nút phụ (MỚI) */ --vien-dam: #86868B; /* [đề xuất] viền ô nhập/nút viền ≥ 3:1 (Apple không nêu) */ /* --- MỘT màu nhấn: Action Blue --- */ --nhan: #0066CC; /* [Apple] primary — liên kết, mục đang chọn, số thứ tự, thanh tiến độ đầy */ --nhan-dam: #0052A3; /* [đề xuất] chữ trên nền nhạt, liên kết khi di chuột (Apple đổi trạng thái bằng scale, không đổi HEX) */ --nhan-nhat: #E8F1FB; /* [đề xuất] nền mục menu đang chọn, nhãn nhạt */ --nut: #0066CC; /* [Apple] primary — nền nút chính */ --nut-hover: #0052A3; /* [đề xuất] */ --tren-nut: #FFFFFF; /* [Apple] on-primary — chữ trên nút chính */ --tren-nhan: #FFFFFF; /* chữ/biểu tượng đặt trên nền --nhan (ở chế độ tối là đen: #2997FF + chữ trắng chỉ 2,9:1) */ --focus: #0071E3; /* [Apple] primary-focus — viền focus 2px, cách 3px */ /* --- Màu phụ (CHỈ trang trí/biểu tượng/số liệu, không làm nút) — [đề xuất]: tệp Apple không có màu thứ hai --- */ --vang: #945E18; /* [đề xuất] một con số nổi bật (giá) */ --qua-do: #C8372B; /* [đề xuất] hộp quà — DUY NHẤT dùng cho "quà/tài liệu miễn phí" */ /* --- Trạng thái — [đề xuất]: tệp Apple ghi "chưa có trạng thái lỗi/hợp lệ" --- */ --ok: #1F6D3A; --ok-nen: #EAF3EA; --canh-bao: #7A4B00; --canh-bao-nen: #FFF3D6; --loi: #B3261E; --loi-nen: #FBE9E7; /* --- Chữ: giữ Be Vietnam Pro (SF Pro là phông riêng của Apple, không dùng); Literata chỉ tiêu đề bài viết dài trên www --- */ --font-chu: "Be Vietnam Pro", "BVP Du Phong", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --font-bai: "Literata", "Literata Du Phong", Georgia, "Times New Roman", serif; --font-tieu-de: var(--font-chu); --font-ma: ui-monospace, "Cascadia Mono", Consolas, Menlo, "Liberation Mono", monospace; /* khối lệnh, tên tệp, mã SHA, số tài khoản */ --dam-bai: 600; /* độ đậm tiêu đề bài: 600 với Literata, 700 với Be Vietnam Pro */ /* Thang chữ (rem, gốc 16px) */ --cs-nhan: 0.8125rem; /* 13 nhãn viết hoa ngắn */ --cs-nho: 0.875rem; /* 14 chú thích, ngày, nhãn nút nhỏ */ --cs-than: 1.0625rem; /* 17 chữ thân */ --cs-lon: 1.1875rem; /* 19 đoạn mở, tiêu đề thẻ */ --cs-h3: 1.1875rem; /* 19 */ --cs-h2: clamp(1.375rem, 1.1rem + 1.1vw, 1.75rem); /* 22→28 */ --cs-h1: clamp(1.875rem, 1.3rem + 2.4vw, 2.75rem); /* 30→44 */ --cs-ma: 0.875rem; /* 14 chữ đơn cách */ --dong-than: 1.7; --dong-tieu-de: 1.22; /* không dưới 1,15 với chữ có dấu */ /* Khoảng cách — lưới 4px */ --k1: 4px; --k2: 8px; --k3: 12px; --k4: 16px; --k5: 24px; --k6: 32px; --k7: 48px; --k8: 64px; --k9: 96px; --muc: clamp(48px, 7vw, 80px); /* khoảng giữa các mục lớn */ --le: clamp(16px, 4.5vw, 32px); /* lề ngang trang */ --khung: 1120px; /* bề rộng nội dung tối đa */ --doc: 680px; /* cột đọc bài */ /* Bo góc (giữ 8/12/16; Apple dùng 8/11/18/pill — chỉ đổi màu, không đổi hình thước) */ --r-s: 8px; /* ô nhập, nút nhỏ, ảnh nhỏ */ --r-m: 12px; /* nút, thẻ */ --r-l: 16px; /* khung lớn */ --r-tron: 999px; /* nhãn, chip */ /* Bóng: mặc định KHÔNG bóng; chỉ cho lớp nổi (menu, hộp thoại) */ --bong-noi: 0 8px 24px rgb(0 0 0 / 0.12); --bong-san-pham: rgba(0, 0, 0, 0.22) 3px 5px 30px 0; /* [Apple] DUY NHẤT một bóng — chỉ cho ảnh sản phẩm/bìa sách đặt trên nền; không cho thẻ, nút, chữ (MỚI) */ --tap: 44px; /* vùng bấm tối thiểu */ --nhanh: 150ms; /* --- Logo "Bình minh". Ô và nét trong ô CỐ ĐỊNH ở cả sáng lẫn tối --- */ --logo-o: #0066CC; /* [Apple] nền ô logo */ --logo-net: #FFFFFF; /* thân (khối đường cong) trong ô */ --logo-net-2: #D4E6F9; /* [đề xuất] ba tia trong ô — sắc nhạt (4,37:1 trên ô) */ --logo-1: #0066CC; /* bản trần (không ô): thân */ --logo-2: #003A73; /* [đề xuất] bản trần: ba tia (sắc đậm) */ --logo-chu: var(--chu); /* chữ tên trong logo ngang */ --vang-logo: #FFCB5C; /* CHỈ để tương thích tên cũ (biến thể chấm vàng), KHÔNG dùng trong bản chính */ /* --- Riêng www --- */ --dau-cao: 64px; /* chiều cao đầu trang dính */ --anh-loc: none; /* minh họa giấy không chói ở nền tối */ --bong-cuon: rgb(0 0 0 / 0.16); /* bóng mép bảng cuộn ngang */ --phu-anh: rgb(0 0 0 / 0.72); /* lớp phủ tối trên ảnh (nút phát video) — không đổi theo sáng/tối */ --tren-anh: #FFFFFF; /* hình/chữ trên lớp phủ ảnh */ /* --- Mã QR luôn đen trên trắng, ở cả chế độ tối --- */ --nen-qr: #FFFFFF; --chu-qr: #000000; /* --- Menu trái kiểu app (Góc học viên, khóa học) --- */ --menu-rong: 264px; --menu-muc-cao: 44px; --menu-muc-bo: 8px; --menu-icon: 22px; /* biểu tượng nét 2px */ --menu-nen: var(--mat); --menu-vien: var(--vien); --menu-chon-nen: var(--nhan-nhat); --menu-chon-chu: var(--nhan-dam); --menu-dem-nen: var(--nut); /* huy hiệu đếm: nút xanh + chữ trắng ở cả sáng lẫn tối */ --menu-dem-chu: var(--tren-nut); /* --- Bảng tiến độ (Góc học viên) --- */ --tien-do-cao: 8px; /* thanh trong thẻ tiến độ */ --tien-do-cao-nho: 6px; /* thanh trong hàng buổi */ --tien-do-nen: var(--mat-2); --tien-do-day: var(--nhan); --tien-do-so: 1.25rem; /* 3 số lớn, đậm 700 */ --tien-do-nhan: 0.875rem; /* nhãn dưới số */ } /* ---- Chế độ tối: đen Apple (nền #000000, thẻ #1D1D1F, dải #272729) ---- */ :root[data-theme="dark"] { color-scheme: dark; --nen: #000000; /* [Apple] surface-black */ --mat: #1D1D1F; /* [Apple] ink dùng làm mặt thẻ tối */ --mat-2: #272729; /* [Apple] surface-tile-1 */ --mat-3: #2A2A2C; /* [Apple] surface-tile-2 */ --chu: #FFFFFF; /* [Apple] body-on-dark */ --chu-2: #CCCCCC; /* [Apple] body-muted */ --chu-3: #A1A1A6; /* [đề xuất] 5,80:1 trên #272729 */ --vien: #3A3A3C; /* [đề xuất] Apple không nêu viền tối */ --vien-nhat: #2A2A2C; --vien-dam: #86868B; /* [đề xuất] 4,65:1 trên #1D1D1F */ --nhan: #2997FF; /* [Apple] primary-on-dark */ --nhan-dam: #8EC5FF; /* [đề xuất] */ --nhan-nhat: #0A2540; /* [đề xuất] */ --nut: #0066CC; /* [Apple] "Action Blue vẫn dùng được trên nền tối" */ --nut-hover: #0071E3; /* [Apple] primary-focus, sáng hơn khi di chuột */ --tren-nut: #FFFFFF; --tren-nhan: #000000; --focus: #2997FF; --vang: #F5B93B; --qua-do: #D13F33; --ok: #7FD29A; --ok-nen: #17291D; --canh-bao: #F5D38A; --canh-bao-nen: #33290F; --loi: #FF9F8A; --loi-nen: #3A1E1A; --logo-1: #2997FF; --logo-2: #FFFFFF; --bong-noi: 0 8px 24px rgb(0 0 0 / 0.6); --anh-loc: brightness(0.88) saturate(0.95); --bong-cuon: rgb(255 255 255 / 0.14); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --nen: #000000; --mat: #1D1D1F; --mat-2: #272729; --mat-3: #2A2A2C; --chu: #FFFFFF; --chu-2: #CCCCCC; --chu-3: #A1A1A6; --vien: #3A3A3C; --vien-nhat: #2A2A2C; --vien-dam: #86868B; --nhan: #2997FF; --nhan-dam: #8EC5FF; --nhan-nhat: #0A2540; --nut: #0066CC; --nut-hover: #0071E3; --tren-nut: #FFFFFF; --tren-nhan: #000000; --focus: #2997FF; --vang: #F5B93B; --qua-do: #D13F33; --ok: #7FD29A; --ok-nen: #17291D; --canh-bao: #F5D38A; --canh-bao-nen: #33290F; --loi: #FF9F8A; --loi-nen: #3A1E1A; --logo-1: #2997FF; --logo-2: #FFFFFF; --bong-noi: 0 8px 24px rgb(0 0 0 / 0.6); --anh-loc: brightness(0.88) saturate(0.95); --bong-cuon: rgb(255 255 255 / 0.14); } } /* ---- Tên cũ — BÍ DANH để mã chưa đổi tên vẫn chạy đúng ở sáng và tối (trỏ bằng var() nên tự theo chế độ) ---- */ :root { /* tên cũ của www */ --vang-nhan: var(--vang); --cb-nen: var(--canh-bao-nen); --cb-chu: var(--canh-bao); --cb-vien: var(--canh-bao); --ok-chu: var(--ok); --canh-bao-chu: var(--canh-bao); --loi-chu: var(--loi); --r: var(--r-m); --r-nho: var(--r-s); --bo-nho: var(--r-s); --bo-vua: var(--r-m); --bo-lon: var(--r-l); --chu-tieu-de: var(--font-chu); /* tên cũ (bộ "Ấm học thuật") */ --mau-nen: var(--nen); --mau-nen-2: var(--mat); --mau-nen-mem: var(--mat-2); --mau-chu: var(--chu); --mau-chu-mo: var(--chu-2); --mau-chu-nhat: var(--chu-3); --chu-noi-dung: var(--font-chu); --khoang-xs: var(--k2); --khoang-sm: var(--k3); --khoang-md: var(--k4); --khoang-lg: var(--k5); --khoang-xl: var(--k6); --khoang-xxl: var(--k7); --khoang-section: var(--muc); --bo-tron: var(--r-tron); } /* ---- Lớp bí danh theo vai trò kiểu shadcn/ui (cặp nền / chữ-trên-nó) — ánh xạ sang biến ở trên ---- */ :root { --background: var(--nen); --foreground: var(--chu); --card: var(--mat); --card-foreground: var(--chu); --primary: var(--nut); --primary-foreground: var(--tren-nut); --secondary: var(--mat-2); --secondary-foreground: var(--chu); --muted: var(--mat-2); --muted-foreground: var(--chu-2); --accent: var(--nhan-nhat); --accent-foreground: var(--nhan-dam); --destructive: var(--loi); --destructive-foreground: #FFFFFF; --border: var(--vien); --input: var(--vien-dam); --ring: var(--focus); --radius: 12px; } /* ---- Logo nội tuyến: SVG logo-ngang / bieu-tuong-o / bieu-tuong đặt thẳng trong trang đọc các biến --lg-* ở dưới (giá trị dự phòng nằm trong chính tệp SVG). Lớp trong SVG: bản có ô = lg-*, bản trần/một màu/nền tối = lt-* (khác tên để hai loại đặt chung một trang không đè nhau). Mỗi trang chỉ nên nhúng MỘT bản của mỗi loại, hoặc dùng /. ---- */ :root { --lg-o: var(--logo-o); --lg-n: var(--logo-net); --lg-n2: var(--logo-net-2); --lg-1: var(--logo-1); --lg-2: var(--logo-2); --lg-chu: var(--chu); } /* ---- Tôn trọng "giảm chuyển động" ---- */ @media (prefers-reduced-motion: reduce) { :root { --nhanh: 0ms; } } /* ============================================================================= PHẦN 2 — LỚP RIÊNG SÀN SKILL. Chỉ trỏ var() sang token ở trên → tự theo sáng/tối. Không HEX mới. ============================================================================= */ :root { /* (a) Bí danh tên cũ của public/style.css (18 tên màu: 12 tên đã trùng tên www nên không cần bí danh — --nen --chu --vien --vien-dam --vang --vang-nhan --cb-chu --cb-nen --ok-chu --ok-nen --loi-chu --loi-nen; còn 6 tên dưới đây) */ --the: var(--mat); /* thẻ, ô nhập, bảng, hộp mua (#FFFFFF → Apple canvas / thẻ tối #1D1D1F) */ --mem: var(--mat-2); /* dải phụ, chip, đầu bảng, hộp nhỏ (#F1ECDF → parchment #F5F5F7 / tối #272729) */ --mo: var(--chu-3); /* chữ phụ, mô tả, nhãn (#5C554A → #6E6E73 5,07:1 / tối #A1A1A6) */ --luc: var(--nhan-dam); /* màu khi di chuột trên liên kết (#0B6B63 → #0052A3 / tối #8EC5FF) — KHÔNG dùng làm nền nút */ --luc-dam: var(--nhan); /* liên kết, tab đang chọn, viền chọn, chấm (#08534D → #0066CC / tối #2997FF) — KHÔNG làm nền có chữ trắng */ --luc-nen: var(--nhan-nhat); /* nền mục lọc đang chọn, nhãn nhạt, số bước (#E3EFEC → #E8F1FB / tối #0A2540) */ /* phông: một họ Be Vietnam Pro (bỏ Literata và Barlow Condensed — xem HUONG-DAN-AP.md mục 5) */ --td: var(--font-chu); --nd: var(--font-chu); --nh: var(--font-chu); --ma: var(--font-ma); /* (b) TOKEN MỚI — cụm giá ưu đãi (mọi giá trị là màu đã khóa; đo AA trong do-kiem.txt) */ --gia-moi: var(--chu); /* giá đang bán (ưu đãi): chữ chính, đậm 700, cỡ lớn */ --gia-cu: var(--chu-3); /* giá niêm yết gạch: chữ phụ (5,07:1 trên trắng, 4,66:1 trên #F5F5F7) — KHÔNG làm mờ thêm bằng opacity */ --nhan-giam-nen: var(--canh-bao-nen); /* nhãn −20%/−10%: nền vàng nhạt (KHÔNG đỏ; đỏ chỉ cho hộp quà miễn phí và lỗi) */ --nhan-giam-chu: var(--canh-bao); /* chữ nhãn % */ --han-uu-dai-chu: var(--chu-2); /* dòng "Ưu đãi mở bán đến hết dd/mm/yyyy" */ --dong-uu-dai-nen: var(--mat-2); /* dải thông báo ưu đãi đầu danh sách */ --dong-uu-dai-chu: var(--chu); /* (b) khối lệnh (pre.lenh): trước #2D2B27 nền / #F8F5EE chữ */ --lenh-nen: #1D1D1F; /* = ink [Apple] — cố định ở cả sáng lẫn tối */ --lenh-chu: #F5F5F7; /* = parchment [Apple] — 15,46:1 trên --lenh-nen */ } :root[data-theme="dark"] { --lenh-nen: #272729; } /* trên thẻ tối #1D1D1F; chữ #F5F5F7 trên #272729 = 13,69:1 */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --lenh-nen: #272729; } } /* HET-TOKEN */ *{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}} body{margin:0;background:var(--nen);color:var(--chu);font:400 16px/1.55 var(--nd);overflow-wrap:break-word} [hidden],.an{display:none!important} a{color:var(--luc-dam);text-underline-offset:3px} a:hover{color:var(--luc)} :focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:4px} [id]{scroll-margin-top:16px} .bo-qua{position:absolute;left:-999px;top:0;background:var(--chu);color:var(--nen);padding:12px 16px;z-index:20} .bo-qua:focus{left:8px;top:8px;color:var(--nen)} .an-mat{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .khung{max-width:1200px;margin:0 auto;padding:0 20px} h1{font:700 clamp(26px,3vw,32px)/1.2 var(--td);margin:0;text-wrap:balance} h2{font:700 24px/1.25 var(--td);margin:0} h3{font:600 17px/1.35 var(--nd);margin:0} h4{font:600 16px/1.4 var(--nd);margin:16px 0 6px} .nhan{font:600 13px/1.2 var(--nh);letter-spacing:.06em;text-transform:uppercase;color:var(--mo);margin:0} .nho{color:var(--mo)} code{font-family:var(--ma);font-size:1em;background:var(--mem);padding:1px 5px;border-radius:4px;overflow-wrap:anywhere} pre code,.bang-ma code{background:none;padding:0} .loi{color:var(--loi-chu);margin:8px 0;font-weight:500} .loi:empty{display:none} /* Dải bản thử / chưa mở bán */ .dai-thu{background:var(--cb-nen);color:var(--cb-chu);font-size:14px;line-height:1.5;text-align:center;padding:6px 16px} /* Thanh trên: ngọc lục đậm, có ô tìm */ .dau{background:var(--nen);color:var(--chu);border-bottom:1px solid var(--vien)} .dau .khung{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px 28px;align-items:center;padding-top:10px;padding-bottom:10px} .logo{display:inline-flex;align-items:center;gap:10px;min-height:44px;color:var(--chu);text-decoration:none} .logo svg{flex:none;width:36px;height:36px} .logo span{display:flex;flex-direction:column;justify-content:center} .logo b{font:700 20px/1.1 var(--td)} .logo small{font:600 13px/1.2 var(--nh);letter-spacing:.06em;text-transform:uppercase;color:var(--chu-3);margin-top:3px} .logo:hover{color:var(--chu);text-decoration:underline} .tim{display:flex;max-width:520px;width:100%;justify-self:center} .tim input{flex:1;min-width:0;height:44px;border:1.5px solid var(--vien-dam);border-right:0;border-radius:10px 0 0 10px;padding:0 14px;font:400 16px var(--nd);color:var(--chu);background:var(--mat)} .tim input::placeholder{color:var(--mo);opacity:1} .tim button{height:44px;padding:0 16px;border:1.5px solid var(--nut);border-radius:0 10px 10px 0;background:var(--nut);color:var(--tren-nut);font:600 16px var(--nd);cursor:pointer} .tim button:hover{background:var(--nut-hover);border-color:var(--nut-hover)} .dau .phu{display:flex;gap:4px} .dau .phu a{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;color:var(--chu);text-decoration:none;font-weight:500;border-radius:8px} .dau .phu a:hover{background:var(--mat-2)} .dau.gon .khung{grid-template-columns:auto minmax(0,1fr)} .dau .buoc-hien{font:600 13px/1.2 var(--nh);letter-spacing:.06em;text-transform:uppercase;color:var(--chu-2)} /* Nhóm bên phải thanh trên = liên kết trợ giúp (hoặc nhãn bước) + nút đổi chế độ sáng/tối */ .dau-phai{display:flex;align-items:center;justify-self:end;gap:8px} .doi-gd{display:none;flex:none;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:1.5px solid var(--vien-dam);border-radius:10px;background:var(--the);color:var(--chu);cursor:pointer} .co-gd .doi-gd{display:inline-flex} .doi-gd svg{width:22px;height:22px} .doi-gd:hover{background:var(--mem)} .doi-gd[aria-pressed="true"]{border-color:var(--luc-dam);color:var(--luc-dam)} /* ≤ 860px thanh trên xếp 2 hàng: hàng 1 = logo + liên kết trợ giúp; hàng 2 = ô tìm + nút đổi chế độ (cột 3 rộng 44px). Trên 860px: một hàng logo | ô tìm | liên kết + nút. */ @media (max-width:860px){ .dau:not(.gon) .khung{grid-template-columns:minmax(0,1fr) auto 44px;column-gap:0} .dau:not(.gon) .logo{margin-right:12px} .dau:not(.gon) .dau-phai{display:contents} .dau:not(.gon) .phu{grid-column:2/4;grid-row:1;justify-self:end} .dau:not(.gon) .doi-gd{grid-column:3;grid-row:2} .tim{grid-column:1/3;grid-row:2;max-width:none;margin-right:8px} } /* Dải tab mục */ .dai-tab{background:var(--the);border-bottom:1px solid var(--vien)} .dai-tab .khung{display:flex;flex-wrap:wrap;align-items:stretch;gap:0 4px} .dai-tab .nhom-tab{display:flex;flex-wrap:wrap;align-items:stretch;gap:0 4px} .tab{appearance:none;background:none;border:0;border-bottom:3px solid transparent;min-height:48px;padding:0 14px;font:600 16px/1.2 var(--nd);color:var(--mo);cursor:pointer;display:inline-flex;align-items:center;gap:8px;text-decoration:none} .tab:hover{color:var(--chu)} .tab[aria-pressed="true"],.tab[aria-current="page"]{color:var(--luc-dam);border-bottom-color:var(--luc-dam)} .dem{font:600 13px/1 var(--nd);padding:4px 8px;border-radius:999px;background:var(--mem);color:var(--chu)} .dem:empty{display:none} .dem.cho{background:var(--cb-nen);color:var(--cb-chu)} .dai-tab .dan-cach{margin-left:auto} /* Lời giới thiệu gọn */ .gioi-thieu{padding:24px 0 20px} .gioi-thieu .khung{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:24px 40px;align-items:center} .gioi-thieu p.dan{margin:10px 0 0;color:var(--mo);max-width:680px} .gioi-thieu p.dan b{color:var(--chu);font-weight:600} .tac-gia{display:flex;align-items:center;gap:12px;background:var(--the);border:1px solid var(--vien);border-radius:12px;padding:14px 16px} .tac-gia i{flex:none;width:44px;height:44px;border-radius:50%;background:var(--luc-nen);color:var(--luc-dam);display:grid;place-items:center;font:700 17px/1 var(--td);font-style:normal} .tac-gia p{margin:0;line-height:1.4;color:var(--mo)} .tac-gia b{color:var(--chu);font-weight:600;display:block} .mien-tru{margin:0;padding:10px 14px;background:var(--mem);border-left:3px solid var(--vien-dam);border-radius:0 8px 8px 0;color:var(--chu)} .mien-tru.cach{margin:12px 0} /* Hai cột: lọc + danh sách */ .hai-cot{display:grid;grid-template-columns:240px minmax(0,1fr);gap:28px;align-items:start;padding-top:8px} .hai-cot>*,.sp-than>*,.hai-khoi>*{min-width:0} .loc-cot{position:sticky;top:12px;display:grid;gap:18px;padding-top:16px} .loc-cot .nhom-loc{display:grid;gap:4px;margin-top:8px} .loc-nut{appearance:none;display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%;min-height:44px;padding:0 12px;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--chu);font:500 16px/1.2 var(--nd);text-align:left;cursor:pointer} .loc-nut:hover{background:var(--the);border-color:var(--vien)} .loc-nut[aria-pressed="true"]{background:var(--luc-nen);color:var(--luc-dam);font-weight:600;border-color:var(--luc-dam)} .loc-nut span{font:600 13px/1 var(--nd);color:var(--mo)} .loc-nut[aria-pressed="true"] span{color:var(--luc-dam)} .chu-giai{margin:8px 0 0;padding:0;list-style:none;display:grid;gap:8px;color:var(--mo)} .hop-nho{background:var(--the);border:1px solid var(--vien);border-radius:12px;padding:14px} .hop-nho h2{font:600 17px/1.35 var(--nd);margin-top:6px} .hop-nho p{margin:6px 0 10px;color:var(--mo)} .hop-nho .nut{width:100%} .cot-chinh{padding-top:16px} .dau-ds{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px 16px;margin-bottom:10px} .dau-ds p{margin:0;color:var(--mo)} .ds{background:var(--the);border:1px solid var(--vien);border-radius:12px;overflow:hidden} .ds .dang-tai{margin:0;padding:18px 16px;color:var(--mo)} .hang{display:grid;grid-template-columns:34px minmax(0,1fr) 76px 136px auto;gap:6px 16px;align-items:center;padding:14px 16px;border-bottom:1px solid var(--vien);transition:background .12s} .hang:last-child{border-bottom:0} .hang:hover{background:var(--mat-3)} .hang .stt{font:600 14px/1 var(--ma);color:var(--mo)} .hang h3 a{color:var(--chu);text-decoration:none} .hang h3 a:hover{color:var(--luc-dam);text-decoration:underline} .hang p{margin:2px 0 0;color:var(--mo)} .nt{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px} .the-nt{font:500 13px/1 var(--nd);padding:5px 8px;border-radius:6px;background:var(--luc-nen);color:var(--luc-dam)} .the-nt.phu{background:var(--mem);color:var(--chu)} .pb{font:500 14px/1.2 var(--ma);color:var(--mo)} .gia{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:baseline;gap:2px 6px;font:700 18px/1.2 var(--nd);color:var(--chu);white-space:nowrap;text-align:right;font-variant-numeric:tabular-nums} .nut{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:8px 16px;border-radius:10px;font:600 16px/1.3 var(--nd);text-align:center;text-decoration:none;border:1.5px solid transparent;cursor:pointer;transition:background .15s,border-color .15s,color .15s} .nut.vien{border-color:var(--vien-dam);color:var(--luc-dam);background:var(--the)} .nut.vien:hover{border-color:var(--luc-dam);background:var(--luc-nen);color:var(--luc-dam)} .nut.chinh{background:var(--nut);color:var(--tren-nut)} .nut.chinh:hover{background:var(--nut-hover);color:var(--tren-nut)} .nut.luc{background:var(--nut);color:var(--tren-nut)} .nut.luc:hover{background:var(--nut-hover);color:var(--tren-nut)} .nut.lon{width:100%;min-height:48px} .nut[disabled],.nut[aria-disabled="true"]{background:var(--mem);color:var(--mo);border-color:var(--vien);cursor:not-allowed} .cho-hang .gia,.hang .gia.chua-gia{color:var(--mo);font-weight:500} .sap-co{font:600 13px/1 var(--nd);padding:6px 10px;border-radius:999px;background:var(--cb-nen);color:var(--cb-chu);white-space:nowrap} .ghi{margin:14px 0 0;color:var(--mo)} .khoi{padding-top:44px} .khoi>.nhan{margin-bottom:6px} .khoi>p.ghi{margin:6px 0 14px} .khoi>h2.cach{margin-bottom:12px} /* Bảng */ .bang{width:100%;border-collapse:separate;border-spacing:0;background:var(--the);border:1px solid var(--vien);border-radius:12px;overflow:hidden} .bang th{font:600 13px/1.25 var(--nh);letter-spacing:.06em;text-transform:uppercase;color:var(--mo);text-align:left;padding:10px 14px;background:var(--mem);border-bottom:1px solid var(--vien-dam);vertical-align:bottom} .bang td{padding:12px 14px;border-bottom:1px solid var(--vien);vertical-align:top} .bang tr:last-child td{border-bottom:0} .bang td.so,.bang th.so{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums} .bang td.giua,.bang th.giua{text-align:center} .bang tbody th{vertical-align:top;border-bottom:1px solid var(--vien);padding-top:15px;white-space:nowrap} .bang tbody tr:last-child th{border-bottom:0} .bang td b{font-weight:600} .bang .nut{white-space:nowrap} .bang .nho{color:var(--mo)} .bang td a:not(.nut):not(.ma){color:var(--chu);text-decoration:none} .bang td a:not(.nut):not(.ma):hover{color:var(--luc-dam);text-decoration:underline} .bang caption{text-align:left;color:var(--mo);padding:0 0 8px} .gom{margin:0;padding-left:22px} .cham{display:inline-block;width:14px;height:14px;border-radius:50%;border:2px solid var(--luc-dam);vertical-align:middle} .cham.day{background:var(--luc-dam)} .cham.nua{background:linear-gradient(90deg,var(--luc-dam) 50%,transparent 50%)} .cham.rong{border-color:var(--vien-dam);border-style:dashed} .chu-thich{display:flex;flex-wrap:wrap;gap:6px 20px;margin:12px 0 0;padding:0;list-style:none;color:var(--mo)} .chu-thich li{display:inline-flex;align-items:center;gap:8px} .ma{font:500 16px/1.4 var(--ma);overflow-wrap:anywhere} a.ma{white-space:nowrap} .trang-thai{display:inline-block;font:600 14px/1.2 var(--nd);padding:5px 10px;border-radius:999px;white-space:nowrap} .tt-chay-day-du{background:var(--ok-nen);color:var(--ok-chu)} .tt-chi-huong-dan{background:var(--cb-nen);color:var(--cb-chu)} .tt-chua-kiem{background:var(--mem);color:var(--chu)} .hai-khoi{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:28px;align-items:start} .hoi details{background:var(--the);border:1px solid var(--vien);border-radius:10px;padding:0 16px;margin-bottom:8px} .hoi summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:52px;padding:10px 0;font-weight:600} .hoi summary::-webkit-details-marker{display:none} .hoi summary::after{content:"+";font:400 22px/1 var(--nd);color:var(--luc-dam);flex:none} .hoi details[open] summary::after{content:"–"} .hoi summary:hover{color:var(--luc-dam)} .hoi details p{margin:0 0 14px;color:var(--mo)} .hoi .xem-them{margin:12px 0 0} .buoc{margin:10px 0 0;padding:0;list-style:none;counter-reset:b;background:var(--the);border:1px solid var(--vien);border-radius:12px} .buoc li{counter-increment:b;position:relative;padding:14px 16px 14px 56px;border-bottom:1px solid var(--vien)} .buoc li:last-child{border-bottom:0} .buoc li::before{content:counter(b);position:absolute;left:16px;top:14px;width:28px;height:28px;border-radius:50%;background:var(--luc-nen);color:var(--luc-dam);display:grid;place-items:center;font:600 14px/1 var(--nd)} .buoc b{display:block;font-weight:600} .buoc span{color:var(--mo)} .chan{margin-top:56px;background:var(--mat-2);border-top:1px solid var(--vien);padding:28px 0 36px} .chan .khung{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr)) minmax(0,1.4fr);gap:24px} .chan .ten{font:600 19px/1.3 var(--td);margin:0 0 2px} .chan p{margin:0 0 6px;color:var(--mo)} .chan ul{list-style:none;margin:6px 0 0;padding:0} .chan li a{display:inline-flex;align-items:center;min-height:44px} .chan.gon .khung{grid-template-columns:1fr} /* ===== Trang sản phẩm ===== */ .duong-dan{padding:10px 0 0;color:var(--mo)} .duong-dan a{display:inline-flex;align-items:center;min-height:44px} .sp-dau{padding:4px 0 16px} .sp-dau p.dan{margin:8px 0 0;color:var(--mo);max-width:760px;font-size:17px} .neo{background:var(--the);border-top:1px solid var(--vien);border-bottom:1px solid var(--vien)} .neo .khung{display:flex;flex-wrap:wrap;gap:0 4px} .neo a{display:inline-flex;align-items:center;min-height:48px;padding:0 14px;font-weight:600;color:var(--mo);text-decoration:none;border-bottom:3px solid transparent} .neo a:hover{color:var(--luc-dam);border-bottom-color:var(--luc-dam)} .sp-than{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:36px;align-items:start;padding-top:8px} .sp-than section{padding-top:28px} .sp-than section h2{margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid var(--vien-dam)} .sp-than section>p{margin:0 0 10px} .sp-than section>h3{margin:18px 0 8px} .viec{margin:0;padding:0 0 0 22px} .viec li{margin-bottom:6px} .viec li::marker{color:var(--luc-dam);font-weight:600} .cap{margin:14px 0 0;display:grid;grid-template-columns:140px minmax(0,1fr);background:var(--the);border:1px solid var(--vien);border-radius:12px;overflow:hidden} .cap dt,.cap dd{margin:0;padding:12px 14px;border-bottom:1px solid var(--vien)} .cap dt{font:600 13px/1.7 var(--nh);letter-spacing:.06em;text-transform:uppercase;color:var(--mo);background:var(--mem)} .cap dt:last-of-type,.cap dd:last-of-type{border-bottom:0} pre.lenh{margin:0;background:var(--lenh-nen);color:var(--lenh-chu);border-radius:12px;padding:16px 18px;font:400 16px/1.6 var(--ma);white-space:pre-wrap;overflow-wrap:anywhere} pre.lenh:focus-visible{outline-offset:2px} pre.lenh.dai{max-height:420px;overflow:auto} .cuon{overflow-x:auto;border-radius:12px} .cuon .bang{min-width:640px} .cot-ben{position:sticky;top:12px;display:grid;gap:16px;padding-top:28px} .cot-ben.mo-form{position:static} .mua{background:var(--the);border:1px solid var(--vien-dam);border-radius:12px;padding:18px} .mua .gia-lon{font:700 32px/1.1 var(--td);margin:4px 0 12px;font-variant-numeric:tabular-nums} .mua .gia-le{margin:-6px 0 12px;color:var(--mo)} .mua .nut{width:100%;min-height:48px} .mua p{margin:10px 0 0;color:var(--mo)} .mua p.loi,.dat-mua p.loi{color:var(--loi-chu)} .mua .gia-le s{text-decoration-thickness:1.5px} .ho-so{background:var(--the);border:1px solid var(--vien);border-radius:12px;padding:6px 18px 10px} .ho-so h2{font:600 13px/1.2 var(--nh);letter-spacing:.06em;text-transform:uppercase;color:var(--mo);padding:14px 0 10px;border-bottom:1px solid var(--vien-dam)} .ho-so dl{margin:0} .ho-so dl div{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--vien)} .ho-so dl div:last-child{border-bottom:0} .ho-so dt{color:var(--mo);flex:none} .ho-so dd{margin:0;text-align:right;font-weight:500;overflow-wrap:anywhere} .nhat-ky{margin:0;padding:0;list-style:none} .nhat-ky li{padding:10px 0;border-bottom:1px solid var(--vien);display:grid;grid-template-columns:170px minmax(0,1fr);gap:4px 16px} .thanh-mua{display:none} /* Ô đặt mua (mở ra trong thẻ giá) */ .dat-mua{margin-top:14px;padding-top:4px;border-top:1px solid var(--vien)} .dat-mua label{display:block;margin:12px 0 4px;font-weight:500} .dat-mua input[type=text],.dat-mua input[type=email],.dat-mua input[type=tel]{width:100%;min-height:44px;padding:8px 12px;border:1.5px solid var(--vien-dam);border-radius:10px;background:var(--mat);color:var(--chu);font:400 16px var(--nd)} .dat-mua input:focus-visible{outline-offset:1px} .dat-mua .tich{display:flex;gap:10px;align-items:flex-start;font-weight:400;margin:14px 0 0} .dat-mua .tich input{width:22px;height:22px;margin:1px 0 0;flex:none;accent-color:var(--luc-dam)} .dat-mua .nut{margin-top:14px} .thong-bao-du-lieu{margin:14px 0 0;background:var(--mem);border-radius:10px;padding:0 12px} .thong-bao-du-lieu summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-weight:600;color:var(--luc-dam)} .thong-bao-du-lieu p{margin:0 0 10px;color:var(--chu)} .cach-tren{margin-top:12px} /* ===== Trang bài (hướng dẫn cài, bằng chứng, hỏi đáp, dữ liệu, lỗi) ===== */ .bai{max-width:880px;padding-top:28px} .bai>h1+p{margin-top:10px} .bai h2{margin:32px 0 10px;padding-bottom:8px;border-bottom:1px solid var(--vien-dam)} .bai h2.tron{border-bottom:0;padding-bottom:0} .bai p{margin:0 0 10px} .bai ul,.bai ol{margin:0 0 10px;padding-left:22px} .bai li{margin-bottom:6px} .bai .chu-giai{padding-left:0} .bai .mien-tru{margin:14px 0} .bai details{background:var(--the);border:1px solid var(--vien);border-radius:10px;padding:0 16px;margin-bottom:8px} .bai details>summary{cursor:pointer;min-height:48px;display:flex;align-items:center;font-weight:600} .bai details .bang{margin:0 0 14px} .buoc-thuong{margin:0 0 10px;padding-left:22px} .buoc-thuong li{margin-bottom:10px} .buoc-thuong li::marker{color:var(--luc-dam);font-weight:600} .tab-danh-sach{display:none} .co-js .tab-danh-sach{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px} .tab-nut{min-height:44px;padding:8px 16px;border-radius:10px;border:1.5px solid var(--vien-dam);background:var(--the);color:var(--chu);font:600 16px/1.3 var(--nd);cursor:pointer} .tab-nut:hover{border-color:var(--luc-dam);background:var(--luc-nen)} .tab-nut[aria-selected="true"]{background:var(--nut);border-color:var(--nut);color:var(--tren-nut)} .bang-tab{border-top:1px solid var(--vien);padding-top:4px;margin-top:12px} .co-js .bang-tab{border-top:0;margin-top:0} .bang-tab[hidden]{display:none} .lenh-hop{margin:10px 0 14px} .lenh-dau{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:0 0 6px;color:var(--mo)} .the-chung{background:var(--the);border:1px solid var(--vien);border-radius:12px;padding:18px;margin:16px 0} .the-chung h3{font:600 19px/1.3 var(--td);margin:0 0 8px} dl.chung{margin:0} dl.chung>div{display:grid;grid-template-columns:1fr;gap:2px;padding:10px 0;border-bottom:1px solid var(--vien)} dl.chung dt{color:var(--mo)} dl.chung dd{margin:0;overflow-wrap:anywhere} code.sha{background:none;padding:0;overflow-wrap:anywhere;word-break:break-all} .hoi-dap h2{font:600 20px/1.3 var(--td)} /* ===== Trang thanh toán, tải về ===== */ .hep{max-width:640px;padding-top:28px} .hep h1{margin:0 0 6px} .hep h2{font:600 20px/1.3 var(--td);margin:28px 0 8px} .hep p{margin:0 0 10px} .hep details{background:var(--the);border:1px solid var(--vien);border-radius:10px;padding:0 16px;margin-bottom:8px} .hep details>summary{cursor:pointer;min-height:48px;display:flex;align-items:center;font-weight:600} .hep details pre.lenh{margin-bottom:12px} .hep .mien-tru{margin-top:20px} .hop{background:var(--the);border:1px solid var(--vien);border-radius:12px;padding:6px 18px} .dong{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--vien)} .dong:last-child{border-bottom:0} .dong span{color:var(--mo);flex:none} .dong b{text-align:right;font-weight:600;overflow-wrap:anywhere} .canh-bao{background:var(--cb-nen);color:var(--cb-chu);border-left:3px solid var(--cb-chu);border-radius:0 8px 8px 0;padding:12px 14px;margin:14px 0} .qr{display:block;width:100%;max-width:300px;margin:14px auto;background:var(--nen-qr);border:1px solid var(--vien);border-radius:12px;padding:10px} .dang-cho{display:flex;align-items:center;gap:10px;color:var(--cb-chu);font-weight:500;margin:16px 0} .dang-cho::before{content:"";flex:none;width:12px;height:12px;border-radius:50%;background:var(--cb-chu);animation:nhap 1.2s infinite} @keyframes nhap{50%{opacity:.25}} .xong{display:inline-block;background:var(--ok-nen);color:var(--ok-chu);font-weight:600;padding:6px 12px;border-radius:999px;margin:0 0 10px} .skill-con{padding:14px 0;border-bottom:1px solid var(--vien)} .skill-con:last-child{border-bottom:0} .skill-con h3{margin:0 0 8px} .trang-loi{text-align:center;padding:56px 0 24px} .trang-loi .so{font:600 15px/1.2 var(--nh);letter-spacing:.06em;text-transform:uppercase;color:var(--mo);margin:0 0 8px} .trang-loi p{margin:10px auto;max-width:520px;color:var(--mo)} .trang-loi .nut{margin-top:10px} @media (min-width:720px){dl.chung>div{grid-template-columns:200px 1fr;gap:12px}} @media (max-width:980px){ .hai-cot,.sp-than,.hai-khoi,.gioi-thieu .khung{grid-template-columns:1fr} .loc-cot,.cot-ben{position:static} .loc-cot .nhom-loc{display:flex;flex-wrap:wrap;gap:8px} .loc-nut{width:auto;border-color:var(--vien-dam);border-radius:999px;gap:8px} .loc-cot .an-hep{display:none} .loc-cot{display:contents} .hai-cot>.cot-chinh{order:2;padding-top:0} .loc-cot>.khoi-loc{padding-top:14px} #mien-phi{order:3} .hai-cot{gap:18px} .cot-ben{order:-1;padding-top:16px} .chan .khung{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:640px){ .khung{padding:0 16px} .dai-thu{font-size:16px} .dau.gon .khung{column-gap:12px} .dau .phu a{padding:0 6px} .tab{padding:0 8px} .trang-chu .tab{flex:1;justify-content:center} .trang-chu .dai-tab .nhom-tab{flex:1} .trang-chu .dai-tab a.tab{display:none} .dai-tab .dan-cach{margin-left:0} .hang{grid-template-columns:minmax(0,1fr) auto;padding:14px} .hang .stt,.hang .pb{display:none} .hang .than{grid-column:1/-1} .hang .gia{text-align:left;align-self:center;justify-content:flex-start} /* Bảng gói → thẻ xếp dọc */ .bang.xep thead{position:absolute;left:-9999px} .bang.xep,.bang.xep tbody,.bang.xep tr,.bang.xep td{display:block} .bang.xep tr{padding:12px 14px;border-bottom:1px solid var(--vien)} .bang.xep tr:last-child{border-bottom:0} .bang.xep td{padding:3px 0;border:0;text-align:left!important;white-space:normal!important} .bang.xep td[data-nhan]::before{content:attr(data-nhan) ": ";font:600 13px/1.6 var(--nh);letter-spacing:.06em;text-transform:uppercase;color:var(--mo)} .bang.xep .nut{width:100%;margin-top:8px} /* Bảng hồ sơ kiểm: ẩn cột giống nhau, giữ 4 cột nền tảng */ .bang.kiem .an-dt{display:none} .bang.kiem th,.bang.kiem td{padding:10px 6px} .bang.kiem th:first-child,.bang.kiem td:first-child{padding-left:12px} .bang.kiem th.giua{width:52px;letter-spacing:.04em} .cap{grid-template-columns:1fr} .cap dt{border-bottom:0;padding-bottom:4px} .cap dd{padding-top:4px} .nhat-ky li{grid-template-columns:1fr} .neo a{padding:0 8px} .chan .khung{grid-template-columns:1fr} .thanh-mua{display:flex;position:sticky;bottom:0;z-index:9;background:var(--the);border-top:1px solid var(--vien-dam);padding:10px 16px;align-items:center;justify-content:space-between;gap:12px} .thanh-mua .gia{font-size:22px} .lenh-dau{flex-wrap:wrap} } /* Khối "Giới hạn" của skill (đặt trên mô tả, trước giá/nút) và dòng "Chưa có giá" — chỉ dùng biến màu có sẵn */ .gioi-han{margin:20px 0 0;padding:14px 18px;background:var(--cb-nen);border-left:3px solid var(--vang);border-radius:0 8px 8px 0;color:var(--chu)} .gioi-han h2{margin:0 0 6px} .gioi-han ul{margin:8px 0 0;padding:0 0 0 20px} .gioi-han li{margin-bottom:8px} .mua .gia-lon.chua-gia{font-size:24px;color:var(--mo)} /* Cụm giá ưu đãi theo hệ Apple — giá niêm yết gạch (--gia-cu) + giá ưu đãi (--gia-moi) + nhãn % (vàng nhạt, không đỏ) + hạn ưu đãi. Tên lớp giữ nguyên như chung.js. */ .gia-cu{display:block;font:500 13px/1.3 var(--nd);color:var(--gia-cu);font-variant-numeric:tabular-nums} .gia-cu s{text-decoration-thickness:1.5px} .gia .gia-cu{flex:0 0 100%} .gia-moi{font-weight:700;color:var(--gia-moi)} .nhan-giam{display:inline-block;font:600 12px/1 var(--nd);padding:4px 8px;border-radius:999px;background:var(--nhan-giam-nen);color:var(--nhan-giam-chu);vertical-align:middle;margin-left:6px;white-space:nowrap} .gia .nhan-giam{margin-left:0} .mua .gia-lon .gia-cu{font-size:16px;margin-bottom:2px} .mua .gia-lon .nhan-giam{font-size:14px;vertical-align:.4em;margin-left:8px} .han-uu-dai{margin:-6px 0 12px;color:var(--han-uu-dai-chu);font-weight:500} .dong-uu-dai{margin:10px 0 0;padding:8px 12px;border-radius:8px;background:var(--dong-uu-dai-nen);color:var(--dong-uu-dai-chu);font-weight:500} .bang .gia-cu{font-size:13px} .hop .han-uu-dai{margin:6px 0 0} .dong b .gia-cu{text-align:right} .dong b .gia-moi{color:var(--gia-moi)} .thanh-mua .gia{justify-content:flex-start;text-align:left} /* Logo "Bình minh" nội tuyến (SVG bieu-tuong-o.svg đã bỏ