/* ============================================================ HỌC ONLINE — Thư viện lớp CSS & bộ token màu (đợt LÀM ĐẸP) ------------------------------------------------------------ TỆP NÀY LÀM GÌ Là tầng trình bày duy nhất của cả hai vỏ giao diện. Không tệp nào khác được phép khai báo màu — trang chỉ dùng lại lớp có sẵn ở đây, hoặc dùng biến --token khi buộc phải đặt style nội tuyến. PHỤ THUỘC Không phụ thuộc tệp nào. Nạp trước mọi script, trong . Không tải phông ngoài, không CDN, không ảnh mạng — bản demo phải chạy được khi máy trình chiếu mất mạng (§9 quy tắc 5). Mọi hình trang trí trong tệp này vẽ bằng gradient/SVG nội tuyến, không có một url(http…) nào. BỐN QUYẾT ĐỊNH THIẾT KẾ CỦA ĐỢT NÀY 1) SIDEBAR VỎ QUẢN TRỊ ĐỔI TỪ NAVY TỐI SANG NỀN SÁNG (#f7f9fc). Khách yêu cầu "tươi sáng, chuyên nghiệp hơn". Đây là đổi BỀ MẶT, không đổi thương hiệu: bộ token --accent/--green/--amber/--danger giữ nguyên từng mã màu. Muốn quay lại nền tối thì chỉ đổi bốn biến --sidebar / --sidebar-soft / --sidebar-line / --sidebar-text. 2) THANG KHOẢNG CÁCH --k1..--k6 = 4/8/12/16/24/32. Mọi padding, gap, margin đều lấy từ thang này. Số lẻ tuỳ hứng (7px, 9px, 13px…) là thứ làm giao diện trông "máy sinh" — bỏ hết. 3) BIỂU TƯỢNG LÀ SVG NỘI TUYẾN, KHÔNG CÒN EMOJI. Lớp .ic ăn màu theo chữ cha (currentColor) và KHÔNG bị CSS ép kích thước — cỡ do IC.ve(ten, co) truyền vào, để một biểu tượng dùng được ở nút 16px lẫn thẻ chỉ số 22px. 4) HIỆU ỨNG LÀ LỚP PHỦ, KHÔNG PHẢI ĐIỀU KIỆN ĐỌC ĐƯỢC. Trạng thái ẩn ban đầu (.hien-dan) chỉ có hiệu lực khi motion.js đã gắn . Tắt motion.js đi thì mọi chữ, mọi số vẫn hiện đầy đủ — không giấu nội dung sau hiệu ứng. BỐ CỤC TỆP §A token · §B nền tảng · §C khung–sidebar–thanh trên §D thư viện chung (thẻ, bảng, nút, form, hộp thoại…) §E phần riêng học trực tuyến (thẻ khoá, học bài, phòng thi, xếp hạng) §F mô-đun trang trí mới (băng chuyền, chữ chạy, hiện dần, hình vẽ) §G vỏ quản trị · §H vỏ học viên · §I màn hẹp · §J giảm chuyển động §K chân trang vỏ hs · §L in giấy · §M tổng kết khoá & giấy chứng nhận §N in giấy chứng nhận ============================================================ */ /* ═══════════════════ §A · TOKEN ═══════════════════ */ :root{ /* thương hiệu — giữ nguyên bảng màu FOXAI khách đã duyệt */ --accent:#1f74c4; --accent-hover:#1a64ac; --accent-soft:#e7f1fb; --accent-ink:#155b9c; --navy:#143a5c; /* nền & bề mặt */ --bg:#eef3f9; --surface:#fff; --surface-soft:#f5f8fc; --border:#e3eaf3; --border2:#ccd8e6; /* sidebar — nền sáng (xem quyết định 1 ở đầu tệp) */ --sidebar:#f7f9fc; --sidebar-soft:#eaf1f9; --sidebar-line:#e3eaf3; --sidebar-text:#3c5168; --sidebar-mut:#8397ad; /* trạng thái */ --green:#1f9d57; --green-soft:#e6f6ed; --green-ink:#157a41; --amber:#e0901a; --amber-soft:#fcf1dd; --amber-ink:#9a6510; --danger:#df4a3e; --danger-soft:#fbe7e5; --danger-ink:#b23227; /* chữ */ --text:#15273b; --text2:#3c5168; --muted:#6b8099; /* AI */ --ai1:#7c5cf0; --ai2:#a78bfa; --ai-soft:rgba(167,139,250,.16); --ai-ink:#5b3fc4; /* thang khoảng cách — dùng ở khắp nơi, không đặt số lẻ nữa */ --k1:4px; --k2:8px; --k3:12px; --k4:16px; --k5:24px; --k6:32px; /* hình khối */ --r:12px; --r-sm:8px; --r-lg:16px; --sh:0 1px 2px rgba(20,58,92,.05), 0 4px 14px rgba(20,58,92,.06); --sh-md:0 2px 6px rgba(20,58,92,.07), 0 10px 26px rgba(20,58,92,.09); --sh-lg:0 12px 40px rgba(14,44,71,.18); /* chuyển động — 150–400ms cho tương tác, tối đa 900ms cho hiệu ứng vào màn */ --nh:.15s cubic-bezier(.4,0,.2,1); --nh2:.24s cubic-bezier(.4,0,.2,1); --nang:.18s cubic-bezier(.2,.7,.3,1); --font:'Inter','Be Vietnam Pro',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; --mono:'JetBrains Mono','Cascadia Mono',Consolas,monospace; } /* ═══════════════════ §B · NỀN TẢNG ═══════════════════ */ *{box-sizing:border-box} html,body{margin:0;padding:0} body{font-family:var(--font);background:var(--bg);color:var(--text); font-size:13.5px;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} button,input,select,textarea{font-family:inherit} ::-webkit-scrollbar{width:9px;height:9px} ::-webkit-scrollbar-thumb{background:var(--border2);border-radius:6px} ::-webkit-scrollbar-thumb:hover{background:#aebdd0} ::selection{background:rgba(31,116,196,.18)} /* ---------- Biểu tượng nội tuyến ---------- .ic bọc mọi do IC.ve() sinh ra, và cũng bọc các mà core.js / pages đang dùng làm ô chứa biểu tượng. CỐ Ý KHÔNG đặt width/height ở đây: cỡ đến từ thuộc tính trên thẻ , nhờ vậy một biểu tượng dùng lại được ở nút 16px lẫn thẻ chỉ số 22px. Các thành phần nào cần ô chứa cố định thì đặt riêng bằng bộ chọn con trực tiếp (.nav-p>.ic, .bh-muc>.ic, .hh>.ic) để không đụng vào svg lồng bên trong. */ .ic{flex:none;flex-shrink:0} svg.ic{display:inline-block;vertical-align:-.16em;flex:0 0 auto;flex-shrink:0; color:inherit;pointer-events:none} /* Biểu tượng đứng cạnh chữ trong nút / tiêu đề: hạ nhẹ cho thẳng hàng chân chữ */ .btn svg.ic,.tb-btn svg.ic,.chip svg.ic{vertical-align:-.18em} /* ═══════════════════ §C · KHUNG ═══════════════════ */ .app{display:grid;grid-template-columns:264px 1fr;min-height:100vh} .main{display:flex;flex-direction:column;min-width:0} .sp{flex:1} /* ---------- SIDEBAR (nền sáng) ---------- */ .sidebar{background:var(--sidebar);border-right:1px solid var(--sidebar-line); display:flex;flex-direction:column;position:sticky;top:0;height:100vh} .brand{padding:var(--k3) var(--k4);border-bottom:1px solid var(--sidebar-line); display:flex;gap:var(--k3);align-items:center;flex:none} /* Logo FOXAI — dùng CHUNG cho cả hai vỏ (index.html và admin.html). Tệp gốc media/logos/foxai.jpg là ảnh VUÔNG, nhưng chữ hiệu chỉ nằm ở dải giữa, trên dưới toàn lề trắng. Để nguyên khung vuông thì chữ hiệu bé tí, còn quanh nó là một ô trắng thô nổi cộm trên sidebar. Nên khung ở đây RỘNG HƠN CAO và object-fit:cover cắt bớt lề trắng trên dưới — chữ hiệu to lên, khối thương hiệu gọn lại. Nền ảnh vốn trắng nên hoà được vào sidebar sáng #f7f9fc (vỏ Quản trị) và thanh trên nền trắng (vỏ Học viên); bo góc để mép không thành khối chữ nhật cứng. background:#fff giữ nền đúng trong lúc ảnh chưa tải. */ .brand-logo{width:58px;height:28px;flex:none;display:block;border-radius:var(--r-sm); object-fit:cover;object-position:center;background:#fff} .brand b{color:var(--navy);font-size:12.5px;display:block;letter-spacing:.4px;line-height:1.25;font-weight:800} .brand span{font-size:10.5px;color:var(--muted);display:block;margin-top:2px} .nav{padding:var(--k2) var(--k2) var(--k5);overflow-y:auto;flex:1} .nav-group{margin:var(--k3) 0 var(--k1);padding:0 10px;font-size:9.5px;letter-spacing:1.1px; text-transform:uppercase;color:var(--muted);font-weight:800} /* mục cha */ .nav-p{display:flex;align-items:center;gap:var(--k2);padding:var(--k2) 10px;border-radius:var(--r-sm); cursor:pointer;color:var(--sidebar-text);font-size:13px;font-weight:600;user-select:none; transition:background var(--nh),color var(--nh)} .nav-p:hover{background:var(--sidebar-soft);color:var(--accent-ink)} .nav-p.open{color:var(--text)} .nav-p>.ic{width:19px;height:19px;display:inline-flex;align-items:center;justify-content:center; flex:none;color:var(--muted)} .nav-p:hover>.ic,.nav-p.open>.ic{color:var(--accent)} .nav-p .no{font-family:var(--mono);font-size:10.5px;color:var(--sidebar-mut);flex:none} .nav-p .ar{margin-left:auto;font-size:9px;opacity:.55;transition:transform var(--nh2); display:inline-flex;align-items:center} .nav-p.open .ar{transform:rotate(90deg)} /* mục con */ .nav-c{overflow:hidden;max-height:0;transition:max-height var(--nh2)} .nav-c.open{max-height:1400px} .nav-c a{display:flex;align-items:center;gap:var(--k2);padding:7px 10px 7px 34px;border-radius:var(--r-sm); color:var(--sidebar-text);text-decoration:none;font-size:12.5px;cursor:pointer;margin-bottom:1px; position:relative;transition:background var(--nh),color var(--nh)} .nav-c a:hover{background:var(--sidebar-soft);color:var(--accent-ink)} /* mục đang mở: nền nhạt thương hiệu + vạch chỉ báo bên trái */ .nav-c a.on{background:var(--accent-soft);color:var(--accent-ink);font-weight:700} .nav-c a.on::before{content:"";position:absolute;left:0;top:5px;bottom:5px;width:3px; border-radius:0 3px 3px 0;background:var(--accent)} .nav-c a .no{font-family:var(--mono);font-size:10px;color:var(--sidebar-mut);flex:none;min-width:22px} .nav-c a.on .no{color:var(--accent)} /* nhãn nhỏ cạnh mục menu */ .tag{font-size:8.5px;font-weight:800;padding:2px 6px;border-radius:5px;letter-spacing:.4px;flex:none} .tag-ai{background:var(--ai-soft);color:var(--ai-ink)} .tag-new{background:var(--green-soft);color:var(--green-ink)} .tag-core{background:var(--accent-soft);color:var(--accent-ink)} .tag-sp{background:var(--amber-soft);color:var(--amber-ink)} .nav-c a .bdg,.nav-p .bdg{margin-left:auto;background:var(--danger);color:#fff;border-radius:20px; padding:0 6px;font-size:9.5px;font-weight:800;line-height:16px;flex:none} .side-foot{padding:10px var(--k4);border-top:1px solid var(--sidebar-line);font-size:9.5px; color:var(--muted);flex:none;line-height:1.6} /* ---------- THANH TRÊN CÙNG ---------- */ .topbar{background:var(--surface);border-bottom:1px solid var(--border);padding:0 var(--k5);height:56px; display:flex;align-items:center;gap:var(--k3);position:sticky;top:0;z-index:30} .crumb{font-size:10px;color:var(--muted);font-weight:700;letter-spacing:.6px;text-transform:uppercase} .topbar h1{font-size:16px;margin:1px 0 0;font-weight:700;letter-spacing:-.2px} .tb-btn{border:1px solid var(--border);background:var(--surface);height:33px;padding:0 var(--k3); border-radius:var(--r-sm);cursor:pointer;font-size:12px;font-weight:600;color:var(--text2); display:inline-flex;align-items:center;gap:6px;transition:background var(--nh),border-color var(--nh),color var(--nh)} .tb-btn:hover{background:var(--accent-soft);border-color:#c4ddf5;color:var(--accent-ink)} /* hộp chọn trên thanh trên cùng: đổi vai (vỏ qt) và đổi học viên (vỏ hs). Ô nhập mặc định rộng 100%, trong thanh ngang thì phải co lại theo nội dung. */ .tb-sel{width:auto!important;height:33px;padding:0 var(--k2);font-size:12px;font-weight:600;color:var(--text2)} .who{display:flex;align-items:center;gap:var(--k2)} .who .av{width:32px;height:32px;border-radius:50%;background:var(--accent-soft);color:var(--accent-ink); display:grid;place-items:center;font-weight:800;font-size:11.5px;flex:none} .who b{font-size:12.5px;display:block;line-height:1.25} .who span{font-size:10.5px;color:var(--muted)} .page{padding:var(--k5) var(--k5) 80px;max-width:1600px;width:100%} /* ═══════════════════ §D · THƯ VIỆN CHUNG ═══════════════════ */ /* ---------- LƯỚI ---------- */ .grid{display:grid;gap:var(--k3)} .g5{grid-template-columns:repeat(5,1fr)} .g4{grid-template-columns:repeat(4,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g2{grid-template-columns:repeat(2,1fr)} .g23{grid-template-columns:2fr 1fr} .g32{grid-template-columns:1fr 2fr} @media(max-width:1400px){.g5{grid-template-columns:repeat(3,1fr)}} @media(max-width:1200px){.g4{grid-template-columns:repeat(2,1fr)}.g3,.g23,.g32{grid-template-columns:1fr}} .stack{display:flex;flex-direction:column;gap:var(--k3)} /* ---------- THẺ ---------- */ .card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--sh)} .card-h{padding:var(--k3) var(--k4);border-bottom:1px solid var(--border);display:flex;align-items:center; gap:var(--k2);flex-wrap:wrap} .card-h h3{margin:0;font-size:13px;font-weight:700;display:flex;align-items:center;gap:6px} .card-h h3 svg.ic{color:var(--accent)} .card-h .hint{font-size:11px;color:var(--muted);font-weight:400} .card-h .sp{min-width:20px} .card-b{padding:var(--k4)} .card-b.tight{padding:0} /* ---------- THẺ CHỈ SỐ ---------- Nhãn nhỏ IN HOA giãn chữ · số lớn đậm · dòng phụ giải nghĩa. Viền mảnh, bóng rất nhẹ, vạch màu bên trái phân loại tốt/cảnh báo/xấu. */ .kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--r); padding:var(--k3) var(--k4);box-shadow:var(--sh);position:relative;overflow:hidden} .kpi::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent)} .kpi.good::after{background:var(--green)} .kpi.warn::after{background:var(--amber)} .kpi.bad::after{background:var(--danger)} .kpi.ai::after{background:linear-gradient(var(--ai1),var(--ai2))} .kpi .lb{font-size:10px;color:var(--muted);font-weight:800;text-transform:uppercase;letter-spacing:.7px; display:flex;align-items:center;gap:6px;min-height:18px;line-height:1.35} .kpi .lb svg.ic{color:var(--accent);opacity:.9} .kpi.good .lb svg.ic{color:var(--green)} .kpi.warn .lb svg.ic{color:var(--amber)} .kpi.bad .lb svg.ic{color:var(--danger)} .kpi.ai .lb svg.ic{color:var(--ai1)} .kpi .vl{font-size:23px;font-weight:800;margin-top:6px;letter-spacing:-.6px;font-family:var(--mono); line-height:1.12;font-variant-numeric:tabular-nums;color:var(--text)} .kpi .vl.txt{font-family:var(--font);font-size:15.5px;letter-spacing:-.2px} .kpi .cur{font-size:10.5px;color:var(--muted);font-weight:600;margin-left:3px;font-family:var(--font)} .kpi .ft{font-size:10.8px;color:var(--muted);margin-top:var(--k1);line-height:1.5} .kpi .ft b{color:var(--text2)} /* ---------- BẢNG ---------- Hàng cao 44px · tiêu đề dính khi cuộn · kẻ ngang rất nhạt · KHÔNG kẻ dọc · số căn phải phông đều nét · hàng sáng lên khi rê chuột. */ .tw{overflow-x:auto} table{width:100%;border-collapse:collapse;font-size:12.5px} th{text-align:left;padding:0 var(--k3);height:36px;background:var(--surface-soft); border-bottom:1px solid var(--border);font-size:10px;text-transform:uppercase;letter-spacing:.6px; color:var(--text2);font-weight:800;white-space:nowrap;position:sticky;top:0;z-index:3} td{padding:6px var(--k3);height:44px;border-bottom:1px solid #eff4f9;vertical-align:middle} tbody tr{transition:background var(--nh)} tbody tr:hover{background:var(--surface-soft)} tbody tr:last-child td{border-bottom:0} .num{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap;font-size:12px} .mono{font-family:var(--mono);font-size:11.5px;font-variant-numeric:tabular-nums} tfoot td{background:var(--surface-soft);font-weight:800;border-top:2px solid var(--border2)} .sub2{font-size:10.5px;color:var(--muted);display:block;font-weight:400} /* cột sắp xếp được — trang gắn onclick, mũi tên do trang chèn vào .sx */ th.sort{cursor:pointer;user-select:none} th.sort:hover{color:var(--accent-ink);background:var(--accent-soft)} th .sx{font-size:9px;margin-left:3px;color:var(--accent)} /* hàng bảng bấm được */ tbody tr.clk{cursor:pointer} tbody tr.clk:hover{background:var(--accent-soft)} .lnk{color:var(--accent);cursor:pointer;font-weight:600;text-decoration:none} .lnk:hover{text-decoration:underline} /* ---------- CHIP TRẠNG THÁI ---------- Nền nhạt + chữ đậm cùng tông. KHÔNG đổ bóng, không viền đậm. */ .chip{display:inline-flex;align-items:center;gap:var(--k1);padding:2px var(--k2);border-radius:20px; font-size:10.5px;font-weight:700;white-space:nowrap;line-height:1.6} .chip svg.ic{opacity:.85} .c-green{background:var(--green-soft);color:var(--green-ink)} .c-red{background:var(--danger-soft);color:var(--danger-ink)} .c-amber{background:var(--amber-soft);color:var(--amber-ink)} .c-blue{background:var(--accent-soft);color:var(--accent-ink)} .c-ai{background:var(--ai-soft);color:var(--ai-ink)} .c-gray{background:var(--surface-soft);color:var(--text2);border:1px solid var(--border)} /* ---------- NÚT & Ô NHẬP ---------- */ .btn{border:1px solid var(--border);background:var(--surface);padding:7px var(--k3);border-radius:var(--r-sm); cursor:pointer;font-size:12px;font-weight:600;color:var(--text);display:inline-flex;align-items:center; gap:6px;line-height:1.5; transition:background var(--nh),border-color var(--nh),color var(--nh),box-shadow var(--nh)} .btn:hover{background:var(--surface-soft);border-color:var(--border2)} .btn:active{transform:translateY(1px)} .btn.pri{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 2px 8px rgba(31,116,196,.24)} .btn.pri:hover{background:var(--accent-hover);border-color:var(--accent-hover);box-shadow:0 4px 12px rgba(31,116,196,.3)} .btn.ok{background:var(--green);border-color:var(--green);color:#fff} .btn.ok:hover{background:var(--green-ink);border-color:var(--green-ink)} .btn.ai{background:linear-gradient(135deg,var(--ai1),var(--ai2));border:0;color:#fff} .btn.sm{padding:var(--k1) var(--k2);font-size:11px} .btn.lg{padding:10px var(--k5);font-size:13.5px;border-radius:var(--r)} .btn.dgr{background:var(--danger);border-color:var(--danger);color:#fff} .btn.dgr:hover{background:#c33d32;border-color:#c33d32} .btn:disabled{opacity:.42;cursor:not-allowed} .btn:disabled:active{transform:none} select,input,textarea{border:1px solid var(--border2);border-radius:var(--r-sm);padding:7px 10px; font-size:12.5px;background:var(--surface);color:var(--text);width:100%;transition:border-color var(--nh)} select:hover,input:hover,textarea:hover{border-color:#b7c6d8} select:focus,input:focus,textarea:focus{outline:2px solid rgba(31,116,196,.28);outline-offset:-1px;border-color:var(--accent)} label.f{display:block;font-size:10px;font-weight:800;color:var(--text2);margin-bottom:var(--k1); text-transform:uppercase;letter-spacing:.5px} .row{display:flex;gap:var(--k2);align-items:flex-end;flex-wrap:wrap} .row>div{flex:1;min-width:140px} /* ---------- THANH TIẾN ĐỘ ---------- */ .bar{height:7px;background:#e6ecf3;border-radius:20px;overflow:hidden} .bar>i{display:block;height:100%;border-radius:20px;background:var(--accent);transition:width .45s cubic-bezier(.2,.7,.3,1)} .bar>i.good{background:var(--green)} .bar>i.warn{background:var(--amber)} .bar>i.bad{background:var(--danger)} .bar.day{height:10px} /* ---------- CẢNH BÁO ---------- */ .alert{display:flex;gap:10px;padding:10px var(--k3);border-radius:var(--r-sm);font-size:12px; align-items:flex-start;margin-bottom:var(--k2);line-height:1.6} .alert:last-child{margin-bottom:0} .alert .ai-ic{font-size:14px;line-height:1.25;flex:none;display:inline-flex;align-items:center; justify-content:center;min-width:17px} .alert .ai-ic svg{width:17px;height:17px;display:block} .alert b{display:block;margin-bottom:1px} .a-red{background:var(--danger-soft);border:1px solid #f3c9c4;color:var(--danger-ink)} .a-amber{background:var(--amber-soft);border:1px solid #f2ddb8;color:var(--amber-ink)} .a-blue{background:var(--accent-soft);border:1px solid #c4ddf5;color:var(--accent-ink)} .a-green{background:var(--green-soft);border:1px solid #b8e3ca;color:var(--green-ink)} .a-ai{background:var(--ai-soft);border:1px solid #d6c9fb;color:var(--ai-ink)} /* ---------- LINH TINH ---------- */ .note{font-size:11px;color:var(--muted);padding:var(--k2) var(--k3);background:var(--surface-soft); border-radius:var(--r-sm);border:1px dashed var(--border2);line-height:1.65} .tabs{display:flex;gap:2px;border-bottom:1px solid var(--border);padding:0 var(--k4);overflow-x:auto} .tabs button{border:0;background:none;padding:10px var(--k3);cursor:pointer;font-size:12.5px;font-weight:600; color:var(--text2);border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap; transition:color var(--nh),border-color var(--nh)} .tabs button:hover{color:var(--accent)} .tabs button.on{color:var(--accent);border-bottom-color:var(--accent)} .flow{display:flex;align-items:center;gap:var(--k2);flex-wrap:wrap} .flow .step{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm); padding:var(--k2) 10px;text-align:center;flex:1;min-width:105px} .flow .step b{display:block;font-size:12px} .flow .step span{font-size:10.5px;color:var(--muted)} .flow .ar{color:var(--border2);font-size:15px;font-weight:700;display:inline-flex;align-items:center} .legend{display:flex;gap:var(--k3);flex-wrap:wrap;font-size:11px;color:var(--text2)} .legend i{width:9px;height:9px;border-radius:3px;display:inline-block;margin-right:5px} /* ---------- TRẠNG THÁI RỖNG ---------- .big giờ chứa hình ART.manTrong() thay cho emoji cỡ lớn. Vẫn để font-size 34px để bản dự phòng (chữ / ký tự) không bị bé tí. */ .empty{text-align:center;padding:var(--k6) var(--k5);color:var(--muted)} .empty .big{font-size:34px;margin:0 auto var(--k3);line-height:1;opacity:.92; display:flex;align-items:center;justify-content:center;max-width:230px} .empty .big svg{width:100%;height:auto;max-width:200px;display:block} .empty b{display:block;color:var(--text2);font-size:13.5px;margin-bottom:var(--k1);font-weight:700} .empty p{margin:0 auto var(--k3);max-width:420px;line-height:1.7;font-size:12px;color:var(--muted)} /* ---------- TOAST ---------- UI.toast() tự tạo hộp chứa #toastHop nếu chưa có. Thông báo xếp chồng ở góc phải trên, tự tắt sau 2,8 giây — xem assets/ui.js. */ .toast-hop{position:fixed;right:18px;top:var(--k4);z-index:400;display:flex;flex-direction:column; gap:var(--k2);width:min(390px,86vw);pointer-events:none} .toast{background:var(--navy);color:#fff;padding:11px var(--k4);border-radius:var(--r-sm);font-size:12.5px; box-shadow:var(--sh-lg);line-height:1.55;display:flex;gap:10px;align-items:flex-start;cursor:pointer; border-left:4px solid var(--accent);pointer-events:auto;animation:toastVao .22s cubic-bezier(.2,.7,.3,1)} .toast b{color:#8fd3ff} .toast .tt-ic{font-size:14px;flex:none;line-height:1.3;display:inline-flex;align-items:center;min-width:17px} .toast .tt-ic svg{width:17px;height:17px;display:block} .toast .tt-nd{flex:1;min-width:0;word-wrap:break-word} .toast.ok{border-left-color:var(--green)} .toast.ok .tt-ic{color:#7ee0a8} .toast.canhBao{border-left-color:var(--amber)} .toast.canhBao .tt-ic{color:#f5c473} .toast.loi{border-left-color:var(--danger)} .toast.loi .tt-ic{color:#f79a90} .toast.tat{animation:toastRa .24s ease forwards} @keyframes toastVao{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}} @keyframes toastRa{to{opacity:0;transform:translateX(28px)}} /* ---------- HỘP THOẠI ---------- Hiện lên 160ms, nền sau mờ dần — đủ để mắt bắt kịp, không đủ để sốt ruột. */ .ovl{position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(14,44,71,.45);z-index:300;display:flex; align-items:flex-start;justify-content:center;padding:44px var(--k4);overflow-y:auto; opacity:0;transition:opacity .16s ease;backdrop-filter:blur(1.5px)} .ovl.on{opacity:1} .mdl{background:var(--surface);border-radius:var(--r);box-shadow:0 24px 70px rgba(14,44,71,.34); width:100%;max-width:620px;transform:translateY(-10px) scale(.99); transition:transform .16s cubic-bezier(.2,.7,.3,1)} .mdl.wide{max-width:1080px} .ovl.on .mdl{transform:none} .mdl-h{padding:var(--k3) var(--k5);border-bottom:1px solid var(--border);display:flex;align-items:center; gap:var(--k2);flex-wrap:wrap} .mdl-h h3{margin:0;font-size:14.5px;font-weight:700;display:flex;align-items:center;gap:7px} .mdl-h h3 svg.ic{color:var(--accent)} .mdl-x{margin-left:auto;background:var(--surface-soft);border:1px solid var(--border);width:28px;height:28px; border-radius:7px;cursor:pointer;font-size:13px;color:var(--text2);display:inline-flex; align-items:center;justify-content:center;transition:background var(--nh),color var(--nh),border-color var(--nh)} .mdl-x:hover{background:var(--danger-soft);border-color:#f3c9c4;color:var(--danger-ink)} .mdl-b{padding:var(--k4) var(--k5);max-height:calc(100vh - 210px);overflow-y:auto} .mdl-f{padding:var(--k3) var(--k5);border-top:1px solid var(--border);display:flex;gap:var(--k2); justify-content:flex-end;background:var(--surface-soft);border-radius:0 0 var(--r) var(--r)} /* bảng trong hộp thoại cuộn theo thân hộp, tiêu đề dính vào mép thân */ .mdl-b th{top:0} /* ---------- FORM ---------- */ .frm{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--k3)} .frm-sep{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:var(--muted); border-bottom:1px solid var(--border);padding-bottom:5px;margin-top:var(--k1)} .f-hint{font-size:10.5px;color:var(--muted);margin-top:3px;line-height:1.5} .f-sfx{font-size:10.5px;color:var(--muted);margin-left:var(--k1)} .f-static{padding:7px 0;font-size:13px;font-weight:600} .f-err{background:var(--danger-soft);border:1px solid #f3c9c4;color:var(--danger-ink); padding:var(--k2) var(--k3);border-radius:var(--r-sm);font-size:12px;margin-bottom:var(--k3);font-weight:600} @media(max-width:640px){.frm>div{grid-column:1/-1!important}} /* ---------- THANH LỌC ---------- */ .fbar{display:flex;gap:var(--k2);align-items:flex-end;flex-wrap:wrap;background:var(--surface); border:1px solid var(--border);border-radius:var(--r);padding:var(--k3);margin-bottom:var(--k3);box-shadow:var(--sh)} .fb-i{flex:0 1 auto} .fb-i label.f{margin-bottom:3px} .fbar .btn{margin-bottom:0} .fb-sp{flex:1} .fb-cnt{font-size:11px;color:var(--muted);padding-bottom:var(--k2);font-weight:600;font-variant-numeric:tabular-nums} /* ════════════════════════════════════════════════════════════ §E · TỪ ĐÂY XUỐNG LÀ PHẦN RIÊNG CỦA HỌC TRỰC TUYẾN (đặc tả §8) ════════════════════════════════════════════════════════════ */ /* ---------- THẺ KHOÁ HỌC ---------- Bìa là SVG do ART.biaKhoa() sinh từ mã khoá (mỗi khoá một hình cố định), phủ kín đầu thẻ. Lớp phủ chuyển màu .bia-phu / ::after kéo chân bìa tối xuống để nhãn và tên khối đọc được trên mọi bố cục bìa. */ .kh-luoi{display:grid;grid-template-columns:repeat(auto-fill,minmax(246px,1fr));gap:var(--k4)} .kh-the{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);overflow:hidden; box-shadow:var(--sh);display:flex;flex-direction:column;cursor:pointer; transition:transform var(--nang),box-shadow var(--nang),border-color var(--nang)} .kh-the:hover{transform:translateY(-3px);box-shadow:var(--sh-md);border-color:#cfe0f2} .kh-bia{height:130px;position:relative;flex:none;overflow:hidden;background:var(--accent); display:grid;place-items:center;font-size:46px;line-height:1} /* CHỈ tấm bìa do ART.biaKhoa() sinh ra mới phủ kín ô. Viết `.kh-bia svg` trống trơn là mọi biểu tượng IC.ve() nằm lọt trong bìa — chip trạng thái ở .kh-nhan chẳng hạn — cũng bị kéo ra 100% ô bìa, dấu tích 13px phồng thành 77px che kín hình. Neo vào .art-bia là đúng một tấm bìa. */ .kh-bia>.art-bia,.kh-bia>svg.art{width:100%;height:100%;display:block;object-fit:cover} /* Biểu tượng trong nhãn trên bìa giữ đúng cỡ đã ghi ở thuộc tính width/height. */ .kh-bia svg.ic{width:auto;height:auto;object-fit:fill} .kh-bia::after{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(180deg,rgba(255,255,255,.10) 0,rgba(255,255,255,0) 38%,rgba(8,30,52,.34) 100%)} .kh-bia>span{position:relative;z-index:1;filter:drop-shadow(0 3px 6px rgba(0,0,0,.25))} .kh-bia .kh-nhan{position:absolute;top:var(--k2);left:var(--k2);z-index:2} .kh-bia .kh-khoi{position:absolute;top:var(--k2);right:var(--k2);z-index:2;background:rgba(255,255,255,.92); color:var(--navy);font-size:10px;font-weight:800;border-radius:20px;padding:2px var(--k2); box-shadow:0 1px 4px rgba(8,30,52,.18)} .kh-than{padding:var(--k3) var(--k4);flex:1;display:flex;flex-direction:column;gap:6px;min-width:0} .kh-than h4{margin:0;font-size:13.5px;font-weight:700;line-height:1.4;color:var(--text)} .kh-gv{font-size:11px;color:var(--muted);display:flex;align-items:center;gap:5px} .kh-mt{font-size:11.5px;color:var(--text2);line-height:1.6;display:-webkit-box;-webkit-line-clamp:2; -webkit-box-orient:vertical;overflow:hidden} .kh-so{display:flex;gap:var(--k3);font-size:10.5px;color:var(--muted);font-weight:600;flex-wrap:wrap} .kh-so span{display:inline-flex;align-items:center;gap:4px} .kh-gia{margin-top:auto;padding-top:var(--k2);border-top:1px solid var(--border);display:flex; align-items:baseline;gap:var(--k2);flex-wrap:wrap} .kh-gia b{font-size:15px;font-weight:800;color:var(--danger-ink);font-family:var(--mono);letter-spacing:-.3px} .kh-gia s{font-size:11px;color:var(--muted);font-family:var(--mono)} .kh-gia b.mienPhi{color:var(--green-ink);font-family:var(--font);font-size:13.5px} .kh-gia .sp{flex:1} /* ---------- KHUNG BÌA DÙNG LẠI ĐƯỢC ---------- .bia-khoa dùng cho mọi chỗ cần một tấm bìa khoá học ngoài .kh-the (đầu trang chi tiết khoá, tấm băng chuyền, thẻ khoá trong danh sách nhỏ). .bia-phu là lớp phủ chuyển màu đặt CHỒNG LÊN bìa để chữ trắng nổi rõ. */ .bia-khoa{position:relative;overflow:hidden;border-radius:var(--r);background:var(--accent-soft); height:130px;flex:none;display:block} /* Neo vào .art-bia chứ không phải mọi hậu duệ — cùng lý do đã ghi ở .kh-bia: luật hậu duệ sẽ kéo cả biểu tượng IC.ve() lồng bên trong phình ra bằng cả tấm bìa. */ .bia-khoa>.art-bia,.bia-khoa>svg.art{width:100%;height:100%;display:block;object-fit:cover} .bia-khoa svg.ic{width:auto;height:auto;object-fit:fill} .bia-khoa.cao{height:190px} .bia-khoa.thap{height:96px} .bia-phu{position:absolute;inset:0;pointer-events:none;z-index:1; background:linear-gradient(180deg,rgba(8,30,52,0) 34%,rgba(8,30,52,.62) 100%)} .bia-phu.day{background:linear-gradient(120deg,rgba(8,30,52,.66),rgba(8,30,52,.14) 62%)} .bia-khoa>*:not(svg):not(.bia-phu){position:relative;z-index:2} /* ---------- BỐ CỤC TRANG HỌC BÀI ---------- Trái là màn học (video / tài liệu / bài tập), phải là cây bài học dính theo cuộn để học viên luôn thấy mình đang ở đâu trong khoá. */ .hoc-khung{display:grid;grid-template-columns:minmax(0,1fr) 328px;gap:var(--k4);align-items:start} .hoc-trai{min-width:0;display:flex;flex-direction:column;gap:var(--k3)} .hoc-phai{position:sticky;top:70px;display:flex;flex-direction:column;gap:var(--k3); max-height:calc(100vh - 88px);overflow-y:auto} .hoc-dieu{display:flex;gap:var(--k2);align-items:center;flex-wrap:wrap} .hoc-dieu .sp{flex:1} /* ---------- TRÌNH PHÁT VIDEO MÔ PHỎNG ---------- Không nhúng video ngoài. Màn hình là khối màu + hình vẽ, thanh thời gian chạy bằng setInterval trong trang. Nhãn "Bản mô phỏng" luôn hiện — không được để khách hiểu nhầm là đã nối kho video thật. */ .vp{background:var(--surface);border:1px solid var(--border);border-radius:var(--r); box-shadow:var(--sh);overflow:hidden} .vp-man{aspect-ratio:16/9;background:linear-gradient(140deg,#0e2c47,var(--navy) 55%,#1d5a94); display:grid;place-items:center;position:relative;color:#fff;text-align:center;padding:var(--k5);cursor:pointer} .vp-man .bieuTuong{font-size:56px;line-height:1;filter:drop-shadow(0 6px 14px rgba(0,0,0,.35)); display:flex;align-items:center;justify-content:center} .vp-man .bieuTuong svg{width:88px;height:88px;display:block;opacity:.92} .vp-man .ten{margin-top:var(--k3);font-size:15px;font-weight:700;max-width:80%} .vp-man .phu{margin-top:var(--k1);font-size:11.5px;color:rgba(255,255,255,.62)} .vp-man .moPhong{position:absolute;top:10px;left:10px;background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.24);color:rgba(255,255,255,.88);font-size:10px;font-weight:700; border-radius:20px;padding:3px 10px;letter-spacing:.2px;display:inline-flex;align-items:center;gap:5px} .vp-man .to{position:absolute;width:72px;height:72px;border-radius:50%;background:rgba(255,255,255,.16); border:2px solid rgba(255,255,255,.55);display:grid;place-items:center;font-size:26px; backdrop-filter:blur(2px);transition:transform var(--nh),background var(--nh),opacity var(--nh)} .vp-man .to svg{width:30px;height:30px} .vp-man:hover .to{background:rgba(255,255,255,.28);transform:scale(1.07)} .vp-man.dangChay .to{opacity:0} .vp-dk{display:flex;align-items:center;gap:var(--k3);padding:10px var(--k3);background:var(--surface); border-top:1px solid var(--border)} .vp-nut{width:36px;height:36px;border-radius:50%;border:0;background:var(--accent);color:#fff; font-size:14px;cursor:pointer;flex:none;display:grid;place-items:center; transition:background var(--nh),transform var(--nh)} .vp-nut:hover{background:var(--accent-hover);transform:scale(1.07)} .vp-nut.phu{background:var(--surface-soft);color:var(--text2);border:1px solid var(--border); width:32px;height:32px;font-size:12px} .vp-nut.phu:hover{background:var(--accent-soft);color:var(--accent-ink)} .vp-thanh{flex:1;height:8px;background:#e6ecf3;border-radius:20px;cursor:pointer;position:relative;min-width:60px} .vp-thanh>i{display:block;height:100%;border-radius:20px;background:var(--accent);width:0;transition:width .25s linear} .vp-thanh>i::after{content:"";position:absolute;top:50%;right:0;transform:translate(50%,-50%);width:13px;height:13px; border-radius:50%;background:#fff;border:3px solid var(--accent);box-shadow:var(--sh)} .vp-thanh.xong>i{background:var(--green)} .vp-thanh.xong>i::after{border-color:var(--green)} .vp-tg{font-family:var(--mono);font-size:11.5px;color:var(--text2);font-variant-numeric:tabular-nums; white-space:nowrap;flex:none;font-weight:600} .vp-ghi{padding:var(--k2) var(--k3);border-top:1px dashed var(--border2);background:var(--surface-soft); font-size:10.8px;color:var(--muted);line-height:1.6} /* ---------- CÂY CHUYÊN ĐỀ / BÀI HỌC ---------- */ .cd-muc{display:flex;align-items:center;gap:var(--k2);padding:var(--k2) var(--k3);background:var(--surface-soft); border-top:1px solid var(--border);font-size:12px;font-weight:700;cursor:pointer;user-select:none; color:var(--text);transition:background var(--nh),color var(--nh)} .cd-muc:first-child{border-top:0} .cd-muc:hover{background:var(--accent-soft);color:var(--accent-ink)} .cd-muc .stt{font-family:var(--mono);font-size:10.5px;color:var(--muted);flex:none} .cd-muc .dem{margin-left:auto;font-size:10px;font-weight:700;color:var(--muted);flex:none} .cd-muc .ar{font-size:9px;color:var(--muted);transition:transform var(--nh2);flex:none; display:inline-flex;align-items:center} .cd-muc.mo .ar{transform:rotate(90deg)} .cd-ds{overflow:hidden;max-height:0;transition:max-height var(--nh2)} .cd-ds.mo{max-height:2000px} .bh-muc{display:flex;align-items:center;gap:var(--k2);padding:var(--k2) var(--k3) var(--k2) 28px; font-size:12.5px;cursor:pointer;border-top:1px solid #eff4f9;color:var(--text2);position:relative; transition:background var(--nh),color var(--nh)} .bh-muc:hover{background:var(--accent-soft);color:var(--accent-ink)} .bh-muc>.ic{width:17px;height:17px;display:inline-flex;align-items:center;justify-content:center; flex:none;font-size:12px;color:var(--muted)} .bh-muc .ten{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .bh-muc .tl{font-family:var(--mono);font-size:10.5px;color:var(--muted);flex:none} .bh-muc.xong{color:var(--green-ink)} .bh-muc.xong>.ic{color:var(--green)} .bh-muc.dang{background:var(--accent-soft);color:var(--accent-ink);font-weight:700} .bh-muc.dang>.ic{color:var(--accent)} .bh-muc.dang::before{content:"";position:absolute;left:0;top:3px;bottom:3px;width:3px; border-radius:0 3px 3px 0;background:var(--accent)} .bh-muc.khoa{opacity:.5;cursor:not-allowed} .bh-muc.khoa:hover{background:none;color:var(--text2)} /* ---------- VÒNG TIẾN ĐỘ (SVG) ---------- Trang vẽ 2 vòng tròn SVG: .ray là rãnh, .tien là phần đã học. Phần trăm đặt bằng stroke-dasharray / stroke-dashoffset trong JS; motion.js kéo từ 0 lên giá trị thật khi vào màn (data-vong). */ .vong{position:relative;width:112px;height:112px;flex:none} .vong svg{width:100%;height:100%;display:block;transform:rotate(-90deg)} .vong circle{fill:none;stroke-linecap:round} .vong .ray{stroke:#e6ecf3;stroke-width:9} .vong .tien{stroke:var(--accent);stroke-width:9;transition:stroke-dashoffset .8s cubic-bezier(.2,.7,.3,1)} .vong.good .tien{stroke:var(--green)} .vong.warn .tien{stroke:var(--amber)} .vong.bad .tien{stroke:var(--danger)} .vong-so{position:absolute;inset:0;display:grid;place-content:center;text-align:center;line-height:1.15} .vong-so b{font-family:var(--mono);font-size:23px;font-weight:800;letter-spacing:-.8px;display:block; color:var(--text);font-variant-numeric:tabular-nums} .vong-so span{font-size:9.5px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.5px} .vong.nho{width:62px;height:62px} .vong.nho .ray,.vong.nho .tien{stroke-width:7} .vong.nho .vong-so b{font-size:14px;letter-spacing:-.4px} .vong.nho .vong-so span{display:none} /* ---------- THẺ CÂU HỎI ---------- */ .ch-the{background:var(--surface);border:1px solid var(--border);border-radius:var(--r); padding:var(--k4) var(--k5);box-shadow:var(--sh);margin-bottom:var(--k3)} .ch-the:last-child{margin-bottom:0} .ch-dau{display:flex;align-items:center;gap:var(--k2);flex-wrap:wrap;margin-bottom:var(--k2)} .ch-stt{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:var(--accent-ink); background:var(--accent-soft);border-radius:20px;padding:3px 10px} .ch-nd{font-size:14px;line-height:1.75;font-weight:600;margin:0 0 var(--k3);color:var(--text)} .ch-nd .mono{font-size:13.5px} .ch-lc{display:flex;gap:10px;align-items:flex-start;border:1.5px solid var(--border);border-radius:var(--r-sm); padding:var(--k2) var(--k3);margin-bottom:6px;cursor:pointer;background:var(--surface);font-size:13px; line-height:1.6;user-select:none;transition:border-color var(--nh),background var(--nh)} .ch-lc:last-child{margin-bottom:0} .ch-lc:hover{border-color:var(--accent);background:var(--accent-soft)} .ch-lc .kh{width:23px;height:23px;border-radius:50%;background:var(--surface-soft);border:1px solid var(--border2); display:grid;place-items:center;font-weight:800;font-size:11.5px;flex:none;color:var(--text2); transition:background var(--nh),border-color var(--nh),color var(--nh)} .ch-lc .lc-nd{flex:1;min-width:0} .ch-lc.chon{border-color:var(--accent);background:var(--accent-soft)} .ch-lc.chon .kh{background:var(--accent);border-color:var(--accent);color:#fff} .ch-lc.dung{border-color:var(--green);background:var(--green-soft);color:var(--green-ink);font-weight:600} .ch-lc.dung .kh{background:var(--green);border-color:var(--green);color:#fff} .ch-lc.sai{border-color:var(--danger);background:var(--danger-soft);color:var(--danger-ink);font-weight:600} .ch-lc.sai .kh{background:var(--danger);border-color:var(--danger);color:#fff} .ch-lc.dung:hover,.ch-lc.sai:hover{background:inherit} .ch-dien{max-width:280px;margin-top:2px} .ch-giai{margin-top:var(--k3);padding:10px var(--k3);border-radius:var(--r-sm);background:var(--accent-soft); border:1px solid #c4ddf5;font-size:12px;line-height:1.7;color:var(--accent-ink)} .ch-giai b{display:block;margin-bottom:2px} /* ---------- PHÒNG THI: THANH ĐẦU + LƯỚI SỐ CÂU ---------- */ .thi-dau{position:sticky;top:66px;z-index:25;background:linear-gradient(120deg,var(--navy),#1b4f7d); color:#fff;border-radius:var(--r);padding:var(--k3) var(--k4);display:flex;align-items:center; gap:var(--k4);flex-wrap:wrap;box-shadow:var(--sh-lg);margin-bottom:var(--k3)} .thi-dau b{font-size:13.5px} .thi-dau .phu{font-size:11px;color:rgba(255,255,255,.66);display:block;margin-top:1px} .thi-dau .sp{flex:1;min-width:10px} .thi-dh{font-family:var(--mono);font-size:22px;font-weight:800;letter-spacing:-.5px;line-height:1.2; background:rgba(255,255,255,.13);padding:var(--k1) var(--k3);border-radius:var(--r-sm); font-variant-numeric:tabular-nums} .thi-dh.sapHet{background:var(--amber);color:#fff} .thi-dh.gap{background:var(--danger);color:#fff;animation:nhapNhay 1s infinite} @keyframes nhapNhay{0%,100%{opacity:1}50%{opacity:.5}} .thi-luoi-cau{display:grid;grid-template-columns:repeat(auto-fill,minmax(38px,1fr));gap:6px} .thi-o{height:34px;border:1px solid var(--border2);border-radius:var(--r-sm);background:var(--surface); font-family:var(--mono);font-size:12px;font-weight:700;color:var(--text2);cursor:pointer; display:grid;place-items:center;padding:0;transition:background var(--nh),border-color var(--nh),color var(--nh)} .thi-o:hover{border-color:var(--accent);color:var(--accent-ink);background:var(--accent-soft)} .thi-o.daLam{background:var(--accent);border-color:var(--accent);color:#fff} .thi-o.daLam:hover{background:var(--accent-hover);color:#fff} .thi-o.hienTai{outline:2px solid var(--amber);outline-offset:1px} .thi-o.dung{background:var(--green);border-color:var(--green);color:#fff} .thi-o.sai{background:var(--danger);border-color:var(--danger);color:#fff} /* ---------- BẢNG XẾP HẠNG ---------- */ .bxh{display:flex;flex-direction:column;gap:6px} .bxh-hang{display:flex;align-items:center;gap:var(--k3);padding:var(--k2) var(--k3); border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface);font-size:12.5px; transition:transform var(--nang),box-shadow var(--nang)} .bxh-hang .hang{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-weight:800; font-size:12px;font-family:var(--mono);background:var(--surface-soft);color:var(--text2); border:1px solid var(--border);flex:none} .bxh-hang .hang svg{width:20px;height:20px;display:block} .bxh-hang .ten{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600} .bxh-hang .ten span{display:block;font-size:10.5px;color:var(--muted);font-weight:400} .bxh-hang .diem{font-family:var(--mono);font-weight:800;font-size:14px;flex:none;letter-spacing:-.3px; font-variant-numeric:tabular-nums} /* Ba hạng đầu: huy chương vẽ SVG (ART/IC) đặt trong ô .hang. Vàng dùng --amber, bạc dùng --muted, đồng dùng --amber-ink — không đặt màu kim loại mới, bộ token đã đủ ba sắc độ để phân biệt. */ .bxh-hang.huy1{background:linear-gradient(90deg,var(--amber-soft),var(--surface) 60%);border-color:#f2ddb8} .bxh-hang.huy1 .hang{background:var(--amber);border-color:var(--amber);color:#fff;box-shadow:0 2px 8px rgba(224,144,26,.4)} .bxh-hang.huy1 .diem{color:var(--amber-ink)} .bxh-hang.huy2{background:linear-gradient(90deg,var(--surface-soft),var(--surface) 60%);border-color:var(--border2)} .bxh-hang.huy2 .hang{background:var(--muted);border-color:var(--muted);color:#fff} .bxh-hang.huy3{background:linear-gradient(90deg,var(--amber-soft),var(--surface) 45%);border-color:#f2ddb8} .bxh-hang.huy3 .hang{background:var(--amber-ink);border-color:var(--amber-ink);color:#fff} /* hàng của chính mình: phát sáng nhẹ, KHÔNG nhấp nháy (§3.3 quy tắc 4) */ .bxh-hang.toi{border-color:var(--accent); box-shadow:0 0 0 1px var(--accent) inset,0 0 0 4px rgba(31,116,196,.12)} .bxh-hang.toi .ten::after{content:" — bạn";color:var(--accent);font-weight:700} /* Huy chương độc lập — dùng khi cần đặt huy chương ngoài ô .hang (thẻ thành tích, bảng tổng kết). Chỉ đặt MÀU CHỮ để SVG một nét của IC/ART ăn theo currentColor, không vẽ lại hình bằng CSS. */ .huy-vang,.huy-bac,.huy-dong{display:inline-flex;align-items:center;justify-content:center;flex:none; line-height:0;filter:drop-shadow(0 2px 4px rgba(20,58,92,.22))} .huy-vang{color:var(--amber)} .huy-bac{color:var(--muted)} .huy-dong{color:var(--amber-ink)} .huy-vang svg,.huy-bac svg,.huy-dong svg{display:block} /* ---------- BIỂU ĐỒ RADAR (SVG viết tay) ---------- */ .radar{display:block;width:100%;max-width:340px;margin:0 auto;overflow:visible} .radar .luoi{fill:none;stroke:var(--border2);stroke-width:1} .radar .luoi.mo{stroke:var(--border)} .radar .truc{stroke:var(--border2);stroke-width:1} .radar .vung{fill:rgba(31,116,196,.20);stroke:var(--accent);stroke-width:2;stroke-linejoin:round} .radar .vung2{fill:rgba(31,157,87,.16);stroke:var(--green);stroke-width:2;stroke-dasharray:4 3;stroke-linejoin:round} .radar .diem{fill:var(--accent)} .radar .nhan{font-size:10px;fill:var(--text2);font-weight:700;font-family:var(--font)} .radar .moc{font-size:8.5px;fill:var(--muted);font-family:var(--mono)} /* ---------- VÙNG KÉO–THẢ TỆP ---------- Bấm vào vùng thì gọi UI.tep(); kéo tệp thả vào thì gọi UI.docTep(). Lớp .keoVao do trang gắn/gỡ trong dragenter / dragleave. */ .tep-keo{border:2px dashed var(--border2);border-radius:var(--r);background:var(--surface-soft); padding:var(--k5) var(--k4);text-align:center;cursor:pointer;color:var(--muted); transition:border-color var(--nh),background var(--nh),color var(--nh)} .tep-keo:hover,.tep-keo.keoVao{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-ink)} .tep-keo .bieuTuong{font-size:32px;line-height:1;margin-bottom:var(--k2);opacity:.8; display:flex;align-items:center;justify-content:center} .tep-keo .bieuTuong svg{width:42px;height:42px;display:block} .tep-keo b{display:block;font-size:13px;color:var(--text2);margin-bottom:3px} .tep-keo:hover b,.tep-keo.keoVao b{color:var(--accent-ink)} .tep-keo small{font-size:10.8px;line-height:1.6;display:block} .tep-hang{display:flex;align-items:center;gap:10px;padding:var(--k2) var(--k3);border:1px solid var(--border); border-radius:var(--r-sm);background:var(--surface);margin-top:var(--k2);font-size:12.5px} .tep-hang .bieuTuong{font-size:20px;flex:none;display:inline-flex;align-items:center;color:var(--accent)} .tep-hang .bieuTuong svg{width:20px;height:20px;display:block} .tep-hang .ten{flex:1;min-width:0;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .tep-hang .co{font-family:var(--mono);font-size:11px;color:var(--muted);flex:none;font-variant-numeric:tabular-nums} .tep-hang.quaLon{border-color:#f2ddb8;background:var(--amber-soft)} /* ---------- MA TRẬN PHÂN QUYỀN ---------- Số cột do trang đặt nội tuyến, ví dụ:
*/ .quyen-luoi{display:grid;gap:1px;background:var(--border);border:1px solid var(--border); border-radius:var(--r-sm);overflow:hidden;min-width:560px} .quyen-o{background:var(--surface);padding:7px var(--k3);font-size:12px;display:flex;align-items:center; gap:6px;min-height:34px} .quyen-o.dau{background:var(--surface-soft);font-size:9.5px;text-transform:uppercase;letter-spacing:.6px; font-weight:800;color:var(--text2);justify-content:center;text-align:center;position:sticky;top:0;z-index:2} .quyen-o.nhom{background:var(--accent-soft);color:var(--accent-ink);font-weight:800;font-size:10.5px; text-transform:uppercase;letter-spacing:.5px} .quyen-o.giua{justify-content:center} .quyen-o .ma{font-family:var(--mono);font-size:10.5px;color:var(--muted);margin-left:auto} .quyen-o.co{color:var(--green);font-weight:800;font-size:14px} .quyen-o.khong{color:var(--border2);font-size:14px} .quyen-o input[type=checkbox]{width:15px;height:15px;cursor:pointer;accent-color:var(--accent)} .quyen-o.doc{cursor:not-allowed;opacity:.62} /* ---------- MẢNH GHÉP DÙNG CHUNG CHO TRANG HỌC ---------- */ /* Dải thống kê ngang trong thẻ (số bài, số giờ, điểm trung bình…) */ .so-day{display:flex;gap:0;border:1px solid var(--border);border-radius:var(--r-sm);overflow:hidden; background:var(--surface)} .so-day>div{flex:1;padding:var(--k2) var(--k3);border-left:1px solid var(--border);text-align:center;min-width:0} .so-day>div:first-child{border-left:0} .so-day b{display:block;font-family:var(--mono);font-size:17px;font-weight:800;letter-spacing:-.4px; font-variant-numeric:tabular-nums} .so-day span{font-size:10px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.4px} /* Chuỗi ngày học liên tục — mỗi ô một ngày */ .chuoi{display:flex;gap:3px;flex-wrap:wrap} .chuoi i{width:13px;height:13px;border-radius:3px;background:#e6ecf3;display:block} .chuoi i.m1{background:rgba(31,116,196,.26)} .chuoi i.m2{background:rgba(31,116,196,.55)} .chuoi i.m3{background:var(--accent)} .chuoi i.m4{background:var(--accent-ink)} /* Huy hiệu thành tích — .hh>.ic là ô tròn chứa hình, KHÔNG phải svg.ic bên trong */ .hh{display:inline-flex;flex-direction:column;align-items:center;gap:var(--k1);width:78px;text-align:center; transition:transform var(--nang)} .hh>.ic{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-size:20px; background:var(--amber-soft);border:2px solid var(--amber);color:var(--amber-ink)} .hh>.ic svg{width:22px;height:22px;display:block} .hh.mo>.ic{background:var(--surface-soft);border-color:var(--border2);color:var(--muted);filter:grayscale(1);opacity:.5} .hh span{font-size:10px;color:var(--text2);font-weight:700;line-height:1.35} /* ════════════════════════════════════════════════════════════ §F · MÔ-ĐUN TRANG TRÍ MỚI (đi cùng icon.js / art.js / motion.js) ------------------------------------------------------------ Nguyên tắc xuyên suốt: hiệu ứng là LỚP PHỦ. Trạng thái ẩn ban đầu chỉ có hiệu lực khi motion.js đã gắn . Không có JS thì nội dung hiện bình thường — không giấu nội dung. ════════════════════════════════════════════════════════════ */ /* ---------- BĂNG CHUYỀN ---------- .bang-chuyen khung ngoài (cắt tràn) .bc-khung đường ray trượt ngang, MO.bangChuyen() đặt translateX .bc-tam một tấm, rộng đúng 100% khung .bc-cham một chấm điều hướng (thêm .on cho tấm đang xem) .bc-nut nút lùi/tiến (.trai / .phai) Dải chấm bọc trong .bc-chams; quy tắc :has() bên dưới cũng bắt được trường hợp motion.js bọc bằng thẻ khác — chấm luôn nằm đúng chỗ. */ .bang-chuyen{position:relative;overflow:hidden;border-radius:var(--r-lg);background:var(--surface); box-shadow:var(--sh);border:1px solid var(--border)} .bc-khung{display:flex;transition:transform .5s cubic-bezier(.4,0,.2,1);will-change:transform} .bc-tam{flex:0 0 100%;min-width:100%;position:relative;display:block;min-height:150px} .bc-tam>svg{width:100%;height:100%;display:block;object-fit:cover} .bc-chams{position:absolute;left:0;right:0;bottom:10px;z-index:4; display:flex;align-items:center;justify-content:center;gap:6px;pointer-events:none} /* Viết rời thành quy tắc riêng: trình duyệt cũ không hiểu :has() sẽ bỏ CẢ quy tắc chứa nó — gộp chung là mất luôn .bc-chams ở trên. */ .bang-chuyen :has(>.bc-cham){position:absolute;left:0;right:0;bottom:10px;z-index:4; display:flex;align-items:center;justify-content:center;gap:6px;pointer-events:none} .bc-cham{width:8px;height:8px;padding:0;border:0;border-radius:20px;cursor:pointer;pointer-events:auto; background:rgba(255,255,255,.55);box-shadow:0 1px 3px rgba(8,30,52,.3); transition:width var(--nh),background var(--nh)} .bc-cham:hover{background:rgba(255,255,255,.85)} .bc-cham.on{width:22px;background:#fff} .bc-nut{position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:32px;height:32px; border-radius:50%;border:0;cursor:pointer;background:rgba(255,255,255,.86);color:var(--navy); display:grid;place-items:center;box-shadow:0 2px 8px rgba(8,30,52,.24); transition:background var(--nh),transform var(--nh)} .bc-nut:hover{background:#fff;transform:translateY(-50%) scale(1.08)} .bc-nut.trai{left:10px} .bc-nut.phai{right:10px} /* ---------- CHỮ CHẠY ---------- MO.chuChay() nhân đôi nội dung .cc-day rồi để CSS kéo đúng nửa đường, nên vòng lặp liền mạch. Không có JS — hoặc người dùng xin ít chuyển động — thì chữ đứng yên ở mép trái, vẫn đọc được đoạn đầu. */ .chu-chay{overflow:hidden;white-space:nowrap;position:relative; background:var(--accent-soft);color:var(--accent-ink);border:1px solid #cfe2f6; border-radius:20px;padding:7px 0;font-size:12px;font-weight:600} .chu-chay::before,.chu-chay::after{content:"";position:absolute;top:0;bottom:0;width:36px;z-index:2;pointer-events:none} .chu-chay::before{left:0;background:linear-gradient(90deg,var(--accent-soft),rgba(231,241,251,0))} .chu-chay::after{right:0;background:linear-gradient(270deg,var(--accent-soft),rgba(231,241,251,0))} /* Khoảng cách giữa hai mẩu tin đặt bằng padding-right TRÊN TỪNG MẨU, không đặt bằng `gap` của dải. Lý do là phép trượt: mo-truot / ccChay kéo đúng translateX(-50%), nên nửa sau BẮT BUỘC rộng bằng nửa đầu. Với `gap` thì bản sao (một thẻ span duy nhất) chỉ ăn MỘT khoảng cách còn bản gốc ăn N-1 khoảng — hai nửa lệch nhau, mỗi vòng lặp chữ nhảy một nhịp. Padding nằm trong từng mẩu thì nhân đôi kiểu gì cũng cân. */ .cc-day{display:inline-flex;align-items:center;will-change:transform} /* Không có hiệu ứng (tắt motion.js, hoặc prefers-reduced-motion): chữ đứng yên ở mép trái. TUYỆT ĐỐI không dùng padding-left:100% ở đây — .chu-chay cắt tràn, đẩy 100% là cả dải tin biến mất khỏi màn. Chỉ thụt vào một nhịp cho khỏi nằm dưới dải mờ ::before. */ html:not(.co-hieu-ung) .cc-day{padding-left:var(--k5)} html.co-hieu-ung .cc-day{animation:ccChay 30s linear infinite} .chu-chay:hover .cc-day{animation-play-state:paused} .cc-day>span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;padding-right:var(--k6)} /* Bản sao do MO.chuChay() chèn: bọc lại nguyên chùm mẩu tin trong MỘT thẻ span, nên phải trả lại đúng bộ áo cho các mẩu bên trong. Thiếu luật này thì nửa sau mất hết khoảng cách biểu tượng — cùng một dòng chữ mà hai nửa nhìn khác nhau, và bề rộng lệch làm vòng lặp giật. */ .cc-day>.mo-ban-sao{padding-right:0;gap:0} .cc-day>.mo-ban-sao>span{display:inline-flex;align-items:center;gap:6px; white-space:nowrap;padding-right:var(--k6)} @keyframes ccChay{from{transform:translateX(0)}to{transform:translateX(-50%)}} /* ---------- HIỆN DẦN KHI CUỘN TỚI ---------- QUAN TRỌNG: chỉ ẩn khi motion.js đã bật cờ .co-hieu-ung trên . Không có JS → không có cờ → nội dung hiện bình thường ngay từ đầu. */ html.co-hieu-ung .hien-dan{opacity:0;transform:translateY(10px)} html.co-hieu-ung .hien-dan.vao, html.co-hieu-ung .hien-dan.hien, html.co-hieu-ung .hien-dan.mo-hien{opacity:1;transform:none; transition:opacity .5s ease,transform .5s cubic-bezier(.2,.7,.3,1)} /* ---------- HÌNH TRANG TRÍ ---------- Cả ba lớp chỉ lo KHUNG CHỨA; hình do ART.* sinh ra dưới dạng SVG nội tuyến. */ .linh-vat{display:inline-flex;align-items:flex-end;justify-content:center;flex:none;line-height:0} .linh-vat svg{width:100%;height:auto;display:block;max-width:120px} .linh-vat.nho svg{max-width:72px} .linh-vat.to svg{max-width:168px} .song-ngan{display:block;width:100%;line-height:0;overflow:hidden;pointer-events:none;color:var(--surface)} .song-ngan svg{display:block;width:100%;height:auto} .song-ngan.lat svg{transform:scaleY(-1)} .hoa-van{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;opacity:.5} .hoa-van svg{width:100%;height:100%;display:block} /* Bản hoa văn thuần CSS, dùng khi không tiện chèn SVG: chấm bi mờ lặp vô hạn */ .hoa-van.cham{opacity:1;background-image:radial-gradient(circle at 1px 1px,rgba(31,116,196,.16) 1px,transparent 0); background-size:20px 20px} .hoa-van.luoi{opacity:1;background-image: linear-gradient(rgba(31,116,196,.08) 1px,transparent 1px), linear-gradient(90deg,rgba(31,116,196,.08) 1px,transparent 1px); background-size:26px 26px} /* ---------- SỐ ĐẾM & BIỂU ĐỒ TỰ VẼ (kích hoạt bằng data-*) ---------- Chỉ khai báo CHUYỂN TIẾP, không khai báo trạng thái ẩn: tắt motion.js thì cột vẫn đủ chiều cao, đường vẫn liền nét, số vẫn là số thật. */ [data-dem]{font-variant-numeric:tabular-nums} html.co-hieu-ung [data-ve-cot]{transition:height .7s cubic-bezier(.2,.7,.3,1),y .7s cubic-bezier(.2,.7,.3,1)} html.co-hieu-ung [data-ve-net]{transition:stroke-dashoffset .9s cubic-bezier(.2,.7,.3,1)} /* ---------- CẦU NỐI VỚI art.js VÀ motion.js ---------- art.js đặt KÍCH THƯỚC bằng style nội tuyến ngay trên thẻ , nên ở đây chỉ chỉnh MÀU và CHỖ ĐỨNG, không tranh chấp width/height. motion.js chèn bảng kiểu riêng ở ĐẦU — tức đứng TRƯỚC tệp này — nên mọi luật dưới đây thắng khi cùng độ ưu tiên: motion.js lo hành vi, styles.css lo bộ áo. Hai mô-đun dùng tên lớp riêng (art-* / mo-*), phần này nối chúng vào đúng bảng màu FOXAI. */ .art{max-width:100%} .art-bia{border-radius:inherit} .art-hoavan{position:absolute;inset:0;z-index:0;pointer-events:none} .art-linhvat{flex:none} .art-mantrong{opacity:.95} .art-song{display:block;width:100%} .art-vong{flex:none} /* art.js đã đặt sẵn stroke-dashoffset đúng giá trị thật; chuyển tiếp này chỉ để vòng chạy mượt khi phần trăm đổi mà motion.js không tham gia. */ .art-vong-net{transition:stroke-dashoffset .8s cubic-bezier(.2,.7,.3,1)} .art-vong-so{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.5px} /* chữ chạy do MO.chuChay() dựng — mặc cùng bộ áo với .chu-chay */ .mo-chu-chay{background:var(--accent-soft);color:var(--accent-ink);border:1px solid #cfe2f6; border-radius:20px;padding:7px 0;font-size:12px;font-weight:600} .mo-chu-chay-doan{display:inline-flex;align-items:center;gap:6px} .mo-chu-chay-doan svg.ic{color:var(--accent)} /* băng chuyền do MO.bangChuyen() dựng */ .mo-bang-chuyen{color:var(--accent);border-radius:var(--r-lg)} .mo-bang-chuyen .mo-bc-khung{border:1px solid var(--border);background:var(--surface);box-shadow:var(--sh)} .mo-bang-chuyen .mo-bc-tam{min-height:150px} .mo-bang-chuyen .mo-bc-cham button{background:var(--border2);opacity:1; box-shadow:0 1px 2px rgba(20,58,92,.12)} .mo-bang-chuyen .mo-bc-cham button:hover{background:#aebdd0} .mo-bang-chuyen .mo-bc-cham button.dang{background:var(--accent)} .mo-bang-chuyen .mo-bc-nut{background:rgba(255,255,255,.92);color:var(--navy); border-color:rgba(20,58,92,.12);box-shadow:0 2px 8px rgba(8,30,52,.2)} .mo-bang-chuyen .mo-bc-nut:hover{background:#fff} /* ════════════════════════════════════════════════════════════ §G · VỎ QUẢN TRỊ — sáng sủa, chuyên nghiệp Chất "chuyên nghiệp" đến từ kỷ luật chứ không phải trang trí: thang khoảng cách đều, bảng dày thông tin, chuyển động điềm đạm. ════════════════════════════════════════════════════════════ */ [data-shell="qt"] .page{padding:var(--k5) var(--k5) 80px} [data-shell="qt"] .grid{gap:var(--k3)} /* Bảng: tiêu đề dính khi cuộn. Cho .tw một trần chiều cao để nó thành vùng cuộn dọc thật — không có vùng cuộn thì position:sticky vô nghĩa. */ [data-shell="qt"] .tw{max-height:calc(100vh - 190px);overflow-y:auto} [data-shell="qt"] .mdl .tw{max-height:none} [data-shell="qt"] th{box-shadow:0 1px 0 var(--border)} /* Biểu đồ điềm đạm hơn vỏ học viên: vẽ ra nhanh, không nảy. --mo-dai là biến motion.js đọc để định thời — đặt ở đây là chỉnh nhịp cho cả vỏ mà không phải sửa một dòng JavaScript nào. */ [data-shell="qt"]{--mo-dai:300ms} html.co-hieu-ung[data-shell="qt"] [data-ve-cot]{transition-duration:.3s;transition-timing-function:ease-out} html.co-hieu-ung[data-shell="qt"] [data-ve-net]{transition-duration:.36s;transition-timing-function:ease-out} [data-shell="qt"] .vong .tien{transition-duration:.32s} [data-shell="qt"] .bang-chuyen{border-radius:var(--r)} /* ════════════════════════════════════════════════════════════ §H · VỎ HỌC VIÊN — tươi, sinh động, cho học sinh tiểu học ------------------------------------------------------------ Chỉ đổi GIÁ TRỊ token trên thẻ rồi cho thanh điều hướng nằm ngang. Không thêm màu ngoài họ token — core.js dựng menu y hệt cho cả hai vỏ, CSS lo phần còn lại. Bo tròn to hơn, nền trời chuyển sắc, chữ to hơn cho dễ đọc. ════════════════════════════════════════════════════════════ */ [data-shell="hs"]{ --r:18px; --r-sm:12px; --r-lg:22px; --bg:#f4f8fd; --mo-dai:760ms; /* nhịp vẽ biểu đồ của motion.js — thong thả hơn vỏ qt */ --sh:0 1px 2px rgba(20,58,92,.04), 0 6px 18px rgba(20,58,92,.07); --sh-md:0 6px 14px rgba(20,58,92,.09), 0 18px 40px rgba(20,58,92,.12); } [data-shell="hs"] body{ font-size:14.5px; background-color:var(--bg); /* nền trời chuyển sắc nhạt + hoa văn chấm bi mờ — vẽ hoàn toàn bằng gradient, không một tệp ảnh nào (§3.3 quy tắc 1). CỐ Ý KHÔNG dùng background-attachment:fixed: nền dán cứng đẩy cả trang sang một tầng vẽ riêng, cuộn trang là Chrome vẽ lệch phần dính (thanh điều hướng nhảy chỗ). Nền cuộn theo trang vẫn đúng ý đồ — dải trời chỉ ở đầu trang, chấm bi lặp xuống hết chiều dài. */ background-image: radial-gradient(circle at 1px 1px,rgba(31,116,196,.075) 1px,transparent 0), linear-gradient(180deg,#e6f0fb 0,rgba(230,240,251,0) 460px); background-size:22px 22px,100% 760px; background-repeat:repeat,no-repeat; } /* khung: một cột, thanh điều hướng nằm trên */ [data-shell="hs"] .app{grid-template-columns:1fr} [data-shell="hs"] .sidebar{background:var(--surface);border-right:0;border-bottom:1px solid var(--border); flex-direction:row;align-items:center;gap:var(--k2);height:auto;padding:0 var(--k5);z-index:40; box-shadow:0 2px 14px rgba(20,58,92,.06)} [data-shell="hs"] .brand{border-bottom:0;padding:var(--k3) var(--k4) var(--k3) 0;margin-right:var(--k1)} [data-shell="hs"] .brand b{font-size:13px} [data-shell="hs"] .brand-logo{border-radius:10px} [data-shell="hs"] .side-foot{display:none} [data-shell="hs"] .nav-group{display:none} /* menu ngang dạng viên thuốc — dùng lại .nav-p và .nav-c a */ [data-shell="hs"] .nav{display:flex;align-items:center;gap:var(--k1);padding:0;flex:1; overflow-x:auto;overflow-y:hidden;scrollbar-width:none} [data-shell="hs"] .nav::-webkit-scrollbar{height:0} [data-shell="hs"] .nav-c{display:flex;align-items:center;gap:var(--k1);max-height:none;overflow:visible} [data-shell="hs"] .nav-p, [data-shell="hs"] .nav-c a{padding:var(--k2) var(--k4);border-radius:22px;color:var(--text2);font-size:13.5px; font-weight:600;white-space:nowrap;margin-bottom:0;background:none} [data-shell="hs"] .nav-p:hover, [data-shell="hs"] .nav-c a:hover{background:var(--accent-soft);color:var(--accent-ink)} [data-shell="hs"] .nav-c a.on, [data-shell="hs"] .nav-p.on{background:var(--accent);color:#fff;font-weight:700; box-shadow:0 4px 12px rgba(31,116,196,.32)} [data-shell="hs"] .nav-c a.on>.ic, [data-shell="hs"] .nav-p.on>.ic{color:#fff} [data-shell="hs"] .nav-c a.on::before{display:none} [data-shell="hs"] .nav-p .ar{display:none} [data-shell="hs"] .nav-c a .no, [data-shell="hs"] .nav-p .no{display:none} /* thanh trên cùng nhẹ hơn, chữ tiêu đề to hơn */ [data-shell="hs"] .topbar{background:transparent;border-bottom:0;height:auto;padding:var(--k4) var(--k5) 0; position:static} [data-shell="hs"] .topbar h1{font-size:21px;letter-spacing:-.4px} [data-shell="hs"] .crumb{font-size:11px;text-transform:none;letter-spacing:0} [data-shell="hs"] .page{padding:var(--k4) var(--k5) 80px} /* bề mặt thân thiện hơn: viền mảnh, bo to, chữ dễ đọc, thẻ NHẤC LÊN khi rê chuột */ [data-shell="hs"] .card{transition:transform var(--nang),box-shadow var(--nang)} [data-shell="hs"] .card:hover{transform:translateY(-3px);box-shadow:var(--sh-md)} /* trừ cây bài học dính theo cuộn — nhấc lên ở đó chỉ làm rung mắt */ [data-shell="hs"] .hoc-phai .card:hover{transform:none;box-shadow:var(--sh)} [data-shell="hs"] .card-h h3{font-size:14.5px} [data-shell="hs"] .card-b{padding:var(--k4)} [data-shell="hs"] .kpi{padding:var(--k4);border-radius:var(--r); transition:transform var(--nang),box-shadow var(--nang)} [data-shell="hs"] .kpi:hover{transform:translateY(-3px);box-shadow:var(--sh-md)} [data-shell="hs"] .kpi .vl{font-size:26px} [data-shell="hs"] .kpi .lb{font-size:11.5px;text-transform:none;letter-spacing:0;color:var(--text2);font-weight:700} [data-shell="hs"] .btn{padding:var(--k2) var(--k4);font-size:13px;border-radius:var(--r-sm)} [data-shell="hs"] .btn.sm{padding:var(--k1) var(--k3);font-size:12px} [data-shell="hs"] .chip{font-size:11px;padding:3px 10px} [data-shell="hs"] table{font-size:13px} [data-shell="hs"] .kh-bia{height:132px;font-size:50px} [data-shell="hs"] .kh-than h4{font-size:14.5px} [data-shell="hs"] .hh:hover{transform:translateY(-3px)} [data-shell="hs"] .bxh-hang:hover{transform:translateX(2px)} [data-shell="hs"] .thi-dau{top:var(--k3)} [data-shell="hs"] .hoc-phai{top:var(--k4);max-height:calc(100vh - 32px)} [data-shell="hs"] .empty{padding:var(--k6) var(--k5) 44px} /* dải chào đầu trang chủ học viên — nền chuyển sắc + chỗ đứng cho linh vật */ .hs-chao{position:relative;overflow:hidden;color:#fff;border-radius:var(--r-lg); background:linear-gradient(120deg,var(--navy),#1d5a94 58%,var(--accent)); padding:var(--k5) var(--k6);display:flex;align-items:center;gap:var(--k5);flex-wrap:wrap; box-shadow:var(--sh-lg);margin-bottom:var(--k4)} .hs-chao>*{position:relative;z-index:1} .hs-chao .hoa-van{z-index:0;opacity:.22} .hs-chao .em{font-size:42px;line-height:1;flex:none;display:flex;align-items:flex-end} .hs-chao .em svg{width:104px;height:auto;display:block} .hs-chao h2{margin:0;font-size:20px;font-weight:800;letter-spacing:-.3px} .hs-chao p{margin:var(--k1) 0 0;font-size:13px;color:rgba(255,255,255,.82);line-height:1.65;max-width:560px} .hs-chao .sp{flex:1;min-width:10px} .hs-chao .btn{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.3);color:#fff} .hs-chao .btn:hover{background:rgba(255,255,255,.28);border-color:rgba(255,255,255,.45)} .hs-tieu{font-size:16px;font-weight:800;letter-spacing:-.2px;margin:var(--k5) 0 var(--k3);display:flex; align-items:center;gap:var(--k2)} .hs-tieu::before{content:"";width:4px;height:18px;border-radius:3px;background:var(--accent);flex:none} .hs-tieu .sp{flex:1} .hs-tieu span.hint{font-size:11.5px;font-weight:400;color:var(--muted)} .hs-tieu svg.ic{color:var(--accent)} /* ═══════════════════ §I · MÀN HẸP ═══════════════════ */ @media(max-width:1100px){ .hoc-khung{grid-template-columns:1fr} .hoc-phai{position:static;max-height:none;overflow:visible} [data-shell="qt"] .tw{max-height:none;overflow-y:visible} } @media(max-width:900px){ .app{grid-template-columns:1fr} .sidebar{position:sticky;top:0;height:auto;max-height:46vh;z-index:45;border-right:0; border-bottom:1px solid var(--sidebar-line)} .nav{padding:6px var(--k2) var(--k3)} .page{padding:var(--k4) var(--k3) 70px} .topbar{padding:var(--k2) var(--k3);height:auto;min-height:52px;flex-wrap:wrap;gap:var(--k2)} .who span{display:none} .grid{gap:var(--k3)} .g2,.g4,.g5{grid-template-columns:1fr} .kh-luoi{grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:var(--k3)} .kh-bia{height:118px} .thi-dau{top:0;padding:10px var(--k3);gap:10px} .thi-dh{font-size:18px;padding:3px 10px} .vong{width:92px;height:92px} .vong-so b{font-size:19px} .so-day{flex-wrap:wrap} .so-day>div{flex:1 0 50%;border-top:1px solid var(--border)} .quyen-luoi{min-width:480px} .mdl-b{max-height:calc(100vh - 170px);padding:var(--k4)} .mdl-h,.mdl-f{padding:var(--k3) var(--k4)} .ovl{padding:var(--k5) 10px} .toast-hop{right:10px;left:10px;width:auto} .bc-tam{min-height:120px} .bc-nut{width:28px;height:28px} [data-shell="qt"] .page{padding:var(--k4) var(--k3) 70px} [data-shell="hs"] .sidebar{padding:0 var(--k3);overflow:hidden} [data-shell="hs"] .brand{padding-right:10px} [data-shell="hs"] .brand span{display:none} [data-shell="hs"] .topbar{padding:var(--k3) var(--k4) 0} [data-shell="hs"] .page{padding:var(--k3) var(--k4) 70px} [data-shell="hs"] .topbar h1{font-size:18px} .hs-chao{padding:var(--k4) var(--k5);gap:var(--k3)} .hs-chao .em{font-size:34px} .hs-chao .em svg{width:76px} .hs-chao h2{font-size:17px} .hs-chao p{font-size:12.5px} } @media(max-width:620px){ .kh-luoi{grid-template-columns:1fr} .fbar{padding:10px var(--k3);gap:var(--k2)} .fb-i{flex:1 1 100%} .card-h{padding:11px var(--k3)} .card-b{padding:var(--k3)} .ch-the{padding:var(--k3) var(--k4)} .ch-nd{font-size:13.5px} .thi-luoi-cau{grid-template-columns:repeat(auto-fill,minmax(34px,1fr))} .bxh-hang{gap:var(--k2);padding:7px 10px} .radar{max-width:100%} .kpi .vl{font-size:21px} .hs-tieu{font-size:15px} .linh-vat svg{max-width:92px} td{padding:6px var(--k2)} th{padding:0 var(--k2)} } /* ═══════════════════ §J · GIẢM CHUYỂN ĐỘNG ═══════════════════ Người dùng bật "giảm chuyển động" trong hệ điều hành thì tắt sạch mọi hoạt ảnh và chuyển tiếp. Nội dung phải hiện NGAY và ĐỦ — nhất là .hien-dan, vốn ẩn sẵn chờ JS gỡ ra. */ @media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation-duration:.001ms!important;animation-iteration-count:1!important; transition-duration:.001ms!important;transition-delay:0s!important;scroll-behavior:auto!important} html.co-hieu-ung .hien-dan, html.co-hieu-ung [data-hien-dan]{opacity:1!important;transform:none!important} html.co-hieu-ung [data-ve-cot],html.co-hieu-ung .mo-vong-net{transform:none!important} html.co-hieu-ung .cc-day,.mo-chu-chay-day{animation:none!important;transform:none!important;padding-left:0!important} .thi-dh.gap{animation:none!important} .kh-the:hover,[data-shell="hs"] .card:hover,[data-shell="hs"] .kpi:hover, [data-shell="hs"] .hh:hover,[data-shell="hs"] .bxh-hang:hover{transform:none!important} .vp-man:hover .to,.vp-nut:hover{transform:none!important} .bc-nut:hover,.mo-bc-nut:hover{transform:translateY(-50%)!important} } /* ═══════════════════ §K · CHÂN TRANG VỎ HỌC VIÊN ═══════════════════ Ô #hsChan nằm dưới .page ở index.html, core.js đổ nội dung vào. Chỗ duy nhất hiện hai thiết lập emailHoTro / dienThoaiHoTro cho phụ huynh đọc — .side-foot đã bị ẩn ở vỏ hs (xem quy tắc ở §H). */ .hs-chan{display:none} [data-shell="hs"] .hs-chan{display:flex;flex-wrap:wrap;gap:6px var(--k5);align-items:center; justify-content:center;text-align:center;padding:var(--k4) var(--k5) var(--k5); border-top:1px solid var(--border);margin:6px var(--k5) 0; font-size:11.5px;color:var(--muted);line-height:1.7} [data-shell="hs"] .hs-chan b{color:var(--text2);font-weight:700} /* ═══════════════════ §L · IN GIẤY ═══════════════════ */ @media print{ .sidebar,.topbar,.fbar,.toast-hop,.ovl,.hs-chan, .bc-nut,.bc-chams,.chu-chay,.mo-bc-nut,.mo-bc-cham,.mo-chu-chay{display:none!important} .app{grid-template-columns:1fr} .page{padding:0} .card{break-inside:avoid;box-shadow:none} .tw,[data-shell="qt"] .tw{max-height:none!important;overflow:visible!important} th{position:static} body{background:#fff} body,[data-shell="hs"] body{background-image:none!important} html.co-hieu-ung .hien-dan, html.co-hieu-ung [data-hien-dan]{opacity:1!important;transform:none!important} html.co-hieu-ung [data-ve-cot]{transform:none!important} html.co-hieu-ung [data-ve-net]{stroke-dashoffset:0!important} html.co-hieu-ung .mo-vong-net{stroke-dashoffset:var(--mo-dich,0)!important} .hoa-van,.art-hoavan,.song-ngan{display:none!important} } /* ════════════════════════════════════════════════════════════ §M · TỔNG KẾT KHOÁ · XẾP LOẠI · GIẤY CHỨNG NHẬN (đặc tả 03-DAC-TA-THI-CUOI-KHOA §5) ------------------------------------------------------------ BỐN CỤM Ở ĐÂY M1 .tk-* bảng phân tích điểm tổng kết — bày CẢ PHÉP TÍNH M2 .xl-* chip xếp loại bốn mức M3 .cn-* khung bọc tờ giấy chứng nhận trên màn M4 .thi-ck-chan khối chặn khi chưa đủ điều kiện dự thi cuối khoá VÌ SAO BẢNG PHÂN TÍCH LÀ MỘT LƯỚI CỨNG, KHÔNG PHẢI Đặc tả §7 điều 1 nói thẳng: màn này cố tình bày cả phép tính ra để khách cộng tay kiểm lại. Muốn cộng tay được thì bốn cột số phải thẳng cột nhau tuyệt đối, dấu × và dấu = phải nằm đúng một đường dọc. Nên mỗi .tk-hang là một lưới có ĐÚNG một bộ cột cố định tính bằng px; hàng nào cũng lưới ấy nên các cột tự khớp nhau mà không cần
. Số dùng phông đều nét (--mono) và tabular-nums để chữ số 1 rộng đúng bằng chữ số 8 — cột số so le là cột số khó soát. ════════════════════════════════════════════════════════════ */ /* ---------- M1 · BẢNG PHÂN TÍCH ĐIỂM TỔNG KẾT ---------- */ .tk-bang{border:1px solid var(--border);border-radius:var(--r);background:var(--surface); box-shadow:var(--sh);overflow-x:auto;font-variant-numeric:tabular-nums} .tk-hang{display:grid; grid-template-columns:minmax(150px,1fr) 74px 18px 86px 18px 92px; align-items:baseline;gap:0 var(--k2);min-width:470px; padding:10px var(--k4);border-top:1px solid var(--border)} .tk-hang:first-child{border-top:0} .tk-bang .tk-hang:nth-of-type(even){background:var(--surface-soft)} /* Hàng đầu bảng: nhãn cột IN HOA nhỏ, không có số */ .tk-hang.tk-dau{padding-top:var(--k2);padding-bottom:var(--k2);background:var(--surface-soft); border-bottom:1px solid var(--border);font-size:9.5px;font-weight:800;letter-spacing:.7px; text-transform:uppercase;color:var(--muted)} .tk-hang.tk-dau>*{font-family:var(--font)!important;font-size:9.5px!important;font-weight:800!important; color:var(--muted)!important} .tk-nhan{min-width:0;font-size:12.5px;font-weight:600;color:var(--text)} .tk-nhan small{display:block;font-size:10.5px;font-weight:400;color:var(--muted);line-height:1.45; margin-top:1px} .tk-diem{text-align:right;font-family:var(--mono);font-size:14px;font-weight:800;color:var(--text); letter-spacing:-.3px} .tk-dau-toan{text-align:center;color:var(--muted);font-weight:700;font-size:12px} .tk-trong{text-align:right;font-family:var(--mono);font-size:12.5px;font-weight:700;color:var(--text2)} .tk-tich{text-align:right;font-family:var(--mono);font-size:14px;font-weight:800;color:var(--accent-ink); letter-spacing:-.3px} /* Hàng cộng cuối: nổi hẳn lên, đây là con số khách soi kỹ nhất */ .tk-hang.tk-tong{border-top:2px solid var(--border2);background:var(--accent-soft); padding-top:var(--k3);padding-bottom:var(--k3);align-items:center} .tk-hang.tk-tong .tk-nhan{font-size:13px;font-weight:800;color:var(--navy)} .tk-hang.tk-tong .tk-tich{font-size:22px;color:var(--navy);line-height:1.1} .tk-hang.tk-tong .tk-diem,.tk-hang.tk-tong .tk-trong,.tk-hang.tk-tong .tk-dau-toan{color:var(--accent-ink)} /* Dòng chú thích dưới bảng: nhắc rằng chỉ làm tròn một lần ở bước cuối */ .tk-ghi{font-size:11px;color:var(--muted);line-height:1.6;padding:var(--k2) var(--k4) var(--k3)} .tk-ghi b{color:var(--text2)} /* ---------- M2 · CHIP XẾP LOẠI (4 mức của đặc tả §3) ---------- Đứng một mình cũng chạy, ghép thêm .chip cũng không đá nhau. Giỏi xanh lá · Khá xanh dương · Trung bình vàng · Chưa đạt đỏ. */ .xl-gioi,.xl-kha,.xl-tb,.xl-chuadat{display:inline-flex;align-items:center;gap:var(--k1); padding:3px 10px;border-radius:20px;font-size:11px;font-weight:800;line-height:1.6; white-space:nowrap;border:1px solid transparent;letter-spacing:.1px} .xl-gioi svg.ic,.xl-kha svg.ic,.xl-tb svg.ic,.xl-chuadat svg.ic{opacity:.9} .xl-gioi{background:var(--green-soft);color:var(--green-ink);border-color:rgba(31,157,87,.28)} .xl-kha{background:var(--accent-soft);color:var(--accent-ink);border-color:rgba(31,116,196,.26)} .xl-tb{background:var(--amber-soft);color:var(--amber-ink);border-color:rgba(224,144,26,.32)} .xl-chuadat{background:var(--danger-soft);color:var(--danger-ink);border-color:rgba(223,74,62,.28)} /* Bản to đặt cạnh vòng tròn điểm ở đầu màn Kết quả tổng kết */ .xl-to{font-size:15px;padding:6px 16px;border-radius:22px;letter-spacing:.3px} /* ---------- M3 · GIẤY CHỨNG NHẬN TRÊN MÀN ---------- .cn-khung là cái bàn trải giấy (nền dịu, bóng đổ), .cn-giay là tờ giấy. Tờ giấy giữ đúng tỉ lệ A4 ngang nhờ chính SVG bên trong — ART.giayChungNhan() trả về viewBox 297×210 kèm height:auto, nên không cần ép aspect-ratio ở đây. */ .cn-khung{background:linear-gradient(180deg,var(--surface-soft),var(--surface)); border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--k5);box-shadow:var(--sh-md)} .cn-giay{max-width:920px;margin:0 auto;background:#fff;border:1px solid var(--border2); border-radius:4px;box-shadow:0 10px 34px rgba(14,44,71,.16);overflow:hidden} .cn-giay>svg,.cn-giay>svg.art-giay-cn{display:block;width:100%;height:auto;max-width:100%} /* Hàng nút In / Tải về nằm dưới tờ giấy — bị ẩn khi in (xem §N) */ .cn-cong-cu{display:flex;flex-wrap:wrap;gap:var(--k2);align-items:center;justify-content:center; margin-top:var(--k4)} .cn-cong-cu .hint{font-size:11px;color:var(--muted)} /* Dải mã chứng nhận đặt trên đầu khung cho dễ đọc, dễ đối chiếu */ .cn-ma{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:12px; font-weight:800;letter-spacing:.6px;color:var(--navy);background:var(--surface); border:1px solid var(--border2);border-radius:20px;padding:3px 12px} /* ---------- M4 · CHẶN DỰ THI CUỐI KHOÁ ---------- Đặc tả §3: chưa đủ tiến độ thì chặn, và phải nói rõ đang bao nhiêu, cần bao nhiêu, còn thiếu mấy bài. Khối này là chỗ bày ba con số đó, nên nó KHÔNG phải hộp báo lỗi màu đỏ — màu hổ phách "chưa tới lúc", kèm thanh tiến độ để học viên thấy mình còn cách đích bao xa. */ .thi-ck-chan{display:flex;gap:var(--k4);align-items:flex-start; border:1px solid var(--amber);background:var(--amber-soft);border-radius:var(--r); padding:var(--k4) var(--k5)} .thi-ck-chan>.ck-bt{width:38px;height:38px;border-radius:11px;flex:none;display:grid;place-items:center; background:var(--surface);color:var(--amber-ink);box-shadow:var(--sh)} .thi-ck-chan .ck-than{flex:1;min-width:0} .thi-ck-chan h4{margin:0 0 var(--k1);font-size:13.5px;font-weight:800;color:var(--amber-ink)} .thi-ck-chan p{margin:0;font-size:12px;color:var(--text2);line-height:1.6} .thi-ck-chan p b{color:var(--amber-ink);font-weight:800} .ck-so{display:flex;flex-wrap:wrap;gap:var(--k2) var(--k5);margin:var(--k3) 0 var(--k2)} .ck-so>div{min-width:76px} .ck-so .lb{font-size:9.5px;font-weight:800;letter-spacing:.7px;text-transform:uppercase; color:var(--amber-ink);opacity:.85} .ck-so .vl{font-family:var(--mono);font-size:18px;font-weight:800;color:var(--text); letter-spacing:-.4px;line-height:1.2;font-variant-numeric:tabular-nums} .ck-thanh{height:8px;border-radius:6px;background:var(--surface);overflow:hidden; border:1px solid rgba(224,144,26,.35);margin-bottom:var(--k3)} .ck-thanh>i{display:block;height:100%;border-radius:6px;background:var(--amber)} /* Vạch mốc "cần đạt" cắm trên thanh, để thấy mình còn thiếu bao nhiêu */ .ck-thanh{position:relative} .ck-thanh>u{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--amber-ink); border-radius:2px;text-decoration:none} .thi-ck-chan .btn-goc{margin-top:var(--k1)} /* ════════════════════════════════════════════════════════════ §N · IN GIẤY CHỨNG NHẬN ------------------------------------------------------------ YÊU CẦU: bấm "In giấy chứng nhận" thì máy in ra ĐÚNG một tờ A4 NẰM NGANG chỉ có tờ giấy, không sidebar, không thanh trên, không nút bấm, không lề thừa. CÁCH LÀM — BA LỚP, LỚP SAU CHẶT HƠN LỚP TRƯỚC N1. Khổ giấy: @page có tên `giay-cn` gán riêng cho .cn-giay bằng thuộc tính `page`. Cố ý KHÔNG viết @page{size:landscape} trơn: @page trơn là toàn cục, nó sẽ xoay ngang cả các bản in báo cáo ở §L vốn phải nằm dọc. @page có tên chỉ ăn vào đúng hộp mang thuộc tính page ấy. N2. Lớp thô — luôn có tác dụng ở mọi trình duyệt: khi mang lớp `in-cn`, ẩn thẳng những thành phần vỏ đã biết tên và gỡ viền/nền/bóng của thẻ bọc. N3. Lớp tinh — dùng :has() (Chrome/Edge/Safari đời mới): ẩn MỌI phần tử không chứa và không thuộc tờ giấy. Nhờ vậy dù trang bọc tờ giấy sâu bao nhiêu tầng thẻ, bản in vẫn chỉ còn tờ giấy. Trình duyệt không hiểu :has() thì bỏ qua nguyên luật này và rơi về N2 — vẫn ra bản in dùng được. CÁCH GỌI TỪ TRANG (nút "In giấy chứng nhận"): var g = document.documentElement; g.classList.add('in-cn'); window.onafterprint = function(){ g.classList.remove('in-cn'); }; window.print(); Không có lớp `in-cn` thì bấm Ctrl+P vẫn in được cả trang như cũ. ════════════════════════════════════════════════════════════ */ @page giay-cn{size:297mm 210mm;margin:0} @media print{ /* N1 — tờ giấy tự khai khổ ngang, không lề */ .cn-giay{page:giay-cn;max-width:none;width:100%;margin:0;border:0;border-radius:0; box-shadow:none;break-inside:avoid;page-break-inside:avoid} .cn-giay>svg,.cn-giay>svg.art-giay-cn{width:100%;height:auto} .cn-khung{border:0;background:none;box-shadow:none;padding:0;margin:0;break-inside:avoid} .cn-cong-cu,.cn-ma{display:none!important} /* N2 — lớp thô: gỡ vỏ giao diện khi đang ở chế độ in chứng nhận */ html.in-cn .sidebar,html.in-cn .topbar,html.in-cn .fbar,html.in-cn .hs-chan, html.in-cn .toast-hop,html.in-cn .ovl,html.in-cn .btn,html.in-cn .tb-btn, html.in-cn .card-h,html.in-cn .hs-tieu,html.in-cn .tk-bang,html.in-cn .thi-ck-chan{display:none!important} html.in-cn,html.in-cn body{margin:0!important;padding:0!important;background:#fff!important} html.in-cn .app{display:block!important;grid-template-columns:1fr!important;min-height:0!important} html.in-cn .main,html.in-cn .page{display:block!important;padding:0!important;margin:0!important} html.in-cn .card{border:0!important;box-shadow:none!important;background:none!important; border-radius:0!important} html.in-cn .card-b{padding:0!important} /* N3 — lớp tinh: chỉ chừa lại đúng nhánh cây có tờ giấy. Luật này bị bỏ nguyên khối ở trình duyệt chưa có :has(). */ html.in-cn body *:not(:has(.cn-giay)):not(.cn-giay):not(.cn-giay *){display:none!important} html.in-cn body :has(.cn-giay){display:block!important;margin:0!important;padding:0!important; border:0!important;border-radius:0!important;box-shadow:none!important;background:#fff!important; max-width:none!important;width:auto!important;height:auto!important; min-height:0!important;overflow:visible!important} html.in-cn body:has(.cn-giay){display:block!important;background:#fff!important} } /* ═══════════ THANH TOÁN HỌC PHÍ (đặc tả 05) ═══════════ Khối thông tin chuyển khoản: mỗi dòng một thông tin, nhãn trái — giá trị phải — nút sao chép. Hai dòng quan trọng nhất (số tiền và nội dung CK) được đánh dấu .manh: chuyển sai nội dung là kế toán không dò ra đơn. */ .ck-khoi{border:1px solid var(--border);border-radius:var(--r);overflow:hidden;background:var(--surface-soft)} .ck-dong{display:flex;align-items:center;gap:12px;padding:10px 13px;border-bottom:1px solid var(--border)} .ck-dong:last-child{border-bottom:0} .ck-nhan{flex:none;width:150px;font-size:11.5px;color:var(--muted);font-weight:600} .ck-gt{flex:1;min-width:0;font-size:14px;font-weight:700;color:var(--text); font-family:var(--mono);word-break:break-all;line-height:1.45} .ck-dong.manh{background:var(--accent-soft)} .ck-dong.manh .ck-gt{color:var(--accent-ink);font-size:16px} .ck-dong .btn{flex:none} /* Mã QR động bên trái, thông tin chữ bên phải. Giữ cả hai chứ không bỏ phần chữ đi: máy quét đôi khi không đọc được màn hình chói, và kế toán vẫn cần đọc được số tài khoản bằng mắt để đối chiếu. */ .ck-hai-cot{display:grid;grid-template-columns:232px 1fr;gap:16px;align-items:start} .qr-khoi{border:1px solid var(--border);border-radius:var(--r);background:#fff; padding:14px;text-align:center} .qr-anh{width:100%;max-width:196px;margin:0 auto;line-height:0} .qr-anh svg{width:100%;height:auto;display:block} .qr-chu{margin-top:10px;font-size:11.5px;color:var(--muted);line-height:1.5} .qr-chu b{display:block;font-size:13px;color:var(--text);margin-bottom:3px} @media (max-width:820px){ .ck-hai-cot{grid-template-columns:1fr} .ck-nhan{width:112px} } /* Thẻ tóm tắt đơn — ba ô ngang, số tiền nổi bật nhất */ .don-tom{display:grid;grid-template-columns:2fr 1fr 1fr;gap:16px} .don-tom .f{margin-bottom:3px} .don-tien{color:var(--accent-ink);font-size:19px} @media(max-width:760px){.don-tom{grid-template-columns:1fr}} /* Phiếu thu — khổ hẹp, in được */ .phieu-thu{max-width:520px;margin:0 auto} .pt-dau{text-align:center;padding-bottom:12px;border-bottom:2px solid var(--border2); font-size:12.5px;color:var(--text2);line-height:1.7} @media print{ body *{visibility:hidden} .phieu-thu,.phieu-thu *{visibility:visible} .phieu-thu{position:absolute;left:0;top:0;width:100%} .phieu-thu .btn{display:none} }