/* ===================================================================================== * TAB MA TRẬN ĐỀ (js/ma-tran-de.js) — phong cách truyện tranh siêu anh hùng: giấy chấm bi, viền mực đen dày, * bóng đổ lệch, đỏ – vàng, chữ Bangers. Khung tự có nền sáng riêng nên hiện giống nhau ở mọi giao diện của app. * (Chỉ là phong cách — không dùng logo / nhân vật có bản quyền.) * ===================================================================================== */ .mt{ --mt-muc:#15110f; --mt-do:#c8102e; --mt-do-dam:#6d0a12; --mt-do-sang:#e23636; --mt-vang:#f5b82e; --mt-vang-dam:#d99a0b; --mt-giay:#fbf5e8; --mt-xam:#ece6da; --mt-xanh:#1f5fbf; color:var(--mt-muc); font-family:'Be Vietnam Pro', system-ui, sans-serif; font-size:.86rem; } .mt *{ box-sizing:border-box; } .mt .mt-bangers{ font-family:'Bangers', 'Be Vietnam Pro', sans-serif; letter-spacing:.06em; font-weight:400; } .mt-khung{ border:3px solid var(--mt-muc); border-radius:6px; box-shadow:6px 6px 0 var(--mt-muc); background:var(--mt-giay) radial-gradient(rgba(0,0,0,.07) 1px, transparent 1.3px) 0 0/9px 9px; display:flex; flex-direction:column; min-height:72vh; overflow:hidden; } /* ── Thanh đầu: nền đỏ có tia tốc độ ── */ .mt-dau{ position:relative; display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:12px 14px; background:repeating-linear-gradient(115deg, rgba(255,255,255,.07) 0 2px, transparent 2px 22px), linear-gradient(135deg, var(--mt-do-dam), var(--mt-do) 55%, var(--mt-do-sang)); border-bottom:3px solid var(--mt-muc); color:#fff; } .mt-tieu-de{ display:flex; align-items:center; gap:10px; margin-right:auto; } .mt-tieu-de h2{ margin:0; font-size:1.7rem; line-height:1; color:#fff; text-shadow:2px 2px 0 var(--mt-muc), -1px -1px 0 var(--mt-muc), 1px -1px 0 var(--mt-muc), -1px 1px 0 var(--mt-muc); } .mt-logo{ width:40px; height:40px; border-radius:50%; flex:none; display:grid; place-items:center; color:#fff; font-size:1rem; background:radial-gradient(circle, var(--mt-xanh) 0 36%, #f3f3f3 37% 50%, var(--mt-do) 51%); border:2px solid #fff; box-shadow:0 0 0 2px var(--mt-muc), 0 0 14px rgba(255,210,80,.6); } .mt-nhom-nut{ display:flex; gap:6px; flex-wrap:wrap; } .mt-ngan{ width:2px; align-self:stretch; background:rgba(255,255,255,.45); margin:0 2px; } /* ── Nút kiểu truyện tranh ── */ .mt .mt-nut{ display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:6px 11px; min-height:34px; border:2px solid var(--mt-muc); border-radius:5px; background:#fff; color:var(--mt-muc); font:800 .74rem/1.1 'Be Vietnam Pro', sans-serif; text-transform:uppercase; letter-spacing:.02em; box-shadow:3px 3px 0 var(--mt-muc); cursor:pointer; transition:transform .08s, box-shadow .08s; white-space:nowrap; } .mt .mt-nut:hover:not(:disabled){ transform:translate(-1px,-1px); box-shadow:4px 4px 0 var(--mt-muc); } .mt .mt-nut:active:not(:disabled){ transform:translate(2px,2px); box-shadow:1px 1px 0 var(--mt-muc); } .mt .mt-nut:disabled{ opacity:.45; cursor:not-allowed; } .mt .mt-nut.vang, .mt .mt-nut.dang-chon{ background:var(--mt-vang); } .mt .mt-nut.do{ background:var(--mt-do); color:#fff; } .mt .mt-nut.den{ background:var(--mt-muc); color:var(--mt-vang); } .mt .mt-nut.nho{ min-height:28px; padding:4px 8px; font-size:.68rem; box-shadow:2px 2px 0 var(--mt-muc); } .mt .mt-nut.vuong{ width:34px; padding:0; } .mt .mt-nut.net-dut{ border-style:dashed; box-shadow:none; background:transparent; } .mt-dau .mt-nut.dang-chon{ box-shadow:3px 3px 0 var(--mt-muc), 0 0 12px rgba(245,184,46,.8); } /* ── Dải thông tin: đang mở ma trận nào, đã chọn bao nhiêu câu ── */ .mt-tin{ display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center; padding:8px 14px; border-bottom:2px dashed rgba(0,0,0,.25); font-size:.78rem; } .mt-tin b{ font-weight:800; } .mt-the{ display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border:2px solid var(--mt-muc); border-radius:20px; background:#fff; font-weight:700; font-size:.72rem; } .mt-the.m1{ background:#d8f3dc; } .mt-the.m2{ background:#dbeafe; } .mt-the.m3{ background:#ffe8b3; } .mt-the.m4{ background:#ffd0d0; } /* ── Bảng: hàng tiêu đề cột + các dòng ── */ .mt-bang{ padding:10px 14px 14px; flex:1; } .mt-luoi{ display:grid; gap:8px; align-items:stretch; grid-template-columns:44px minmax(160px,1.5fr) 128px 112px minmax(150px,1.3fr) 36px; } .mt-luoi.co-sua{ grid-template-columns:44px minmax(160px,1.5fr) 128px 112px minmax(150px,1.3fr) 36px 30px 30px; } .mt-luoi.so-luong{ grid-template-columns:44px minmax(180px,2fr) 118px repeat(4, 74px) minmax(190px,auto); } .mt-cot{ margin-bottom:10px; } .mt-cot > div{ background:var(--mt-do-dam); color:#fff; border:2px solid var(--mt-muc); border-radius:4px; text-align:center; padding:6px 4px; font-family:'Bangers','Be Vietnam Pro',sans-serif; letter-spacing:.07em; font-size:.95rem; line-height:1.05; box-shadow:2px 2px 0 var(--mt-muc); } .mt-cot small{ display:block; font-family:'Be Vietnam Pro',sans-serif; font-size:.58rem; letter-spacing:0; opacity:.8; } .mt-phan{ margin:14px 0 6px; display:flex; flex-wrap:wrap; align-items:center; gap:8px; } .mt-phan:first-child{ margin-top:0; } .mt-nhan-phan{ display:inline-block; background:var(--mt-vang); border:2px solid var(--mt-muc); padding:3px 12px; transform:skew(-10deg); box-shadow:3px 3px 0 var(--mt-muc); font-family:'Bangers','Be Vietnam Pro',sans-serif; letter-spacing:.07em; font-size:1rem; } .mt-nhan-phan > span{ display:inline-block; transform:skew(10deg); } .mt-phan .mt-dem{ margin-left:auto; font-size:.72rem; font-weight:700; opacity:.7; } .mt .mt-o-nhap{ border:2px solid var(--mt-muc); border-radius:4px; background:#fff; color:var(--mt-muc); padding:3px 7px; font:600 .78rem 'Be Vietnam Pro',sans-serif; min-height:30px; } .mt .mt-o-nhap:focus{ outline:3px solid rgba(245,184,46,.7); outline-offset:0; } .mt input.mt-o-nhap.ten-phan{ width:150px; font-weight:800; } .mt input.mt-o-nhap.so{ width:60px; text-align:center; } .mt-dong{ margin-bottom:7px; } .mt-dong > *{ min-height:38px; } .mt-stt{ display:grid; place-items:center; background:#fff; border:2px solid var(--mt-muc); border-radius:4px; font-weight:800; font-size:.9rem; } .mt .mt-o-nhanh{ display:flex; align-items:center; gap:8px; text-align:left; background:var(--mt-xam); border:2px solid var(--mt-muc); border-radius:4px; padding:4px 10px; color:var(--mt-muc); font:600 .8rem 'Be Vietnam Pro',sans-serif; cursor:pointer; min-width:0; } .mt .mt-o-nhanh:hover{ background:#fff3d1; } .mt .mt-o-nhanh .ten{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .mt .mt-o-nhanh .duong{ display:block; font-size:.64rem; font-weight:500; opacity:.6; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .mt .mt-o-nhanh.trong .ten{ opacity:.55; font-weight:500; } .mt .mt-o-nhanh > i{ color:var(--mt-do); } .mt-kieu{ display:grid; place-items:center; background:var(--mt-vang); border:2px solid var(--mt-muc); border-radius:4px; font-weight:800; font-size:.74rem; text-align:center; padding:2px 4px; } .mt .mt-chon{ appearance:auto; width:100%; border:2px solid var(--mt-muc); border-radius:4px; background:var(--mt-vang); color:var(--mt-muc); font:700 .76rem 'Be Vietnam Pro',sans-serif; padding:0 6px; cursor:pointer; } .mt .mt-chon.trang{ background:#fff; } .mt .mt-o-cau{ display:flex; align-items:center; gap:6px; min-width:0; text-align:left; background:#fff; border:2px dashed rgba(0,0,0,.35); border-radius:4px; padding:3px 8px; color:var(--mt-muc); font:500 .76rem 'Be Vietnam Pro',sans-serif; cursor:pointer; overflow:hidden; } .mt .mt-o-cau.co{ border-style:solid; border-color:var(--mt-muc); } .mt .mt-o-cau.trong{ color:rgba(0,0,0,.45); font-style:italic; } .mt .mt-o-cau .ma{ flex:none; font-weight:800; font-size:.66rem; background:var(--mt-muc); color:var(--mt-vang); border-radius:3px; padding:1px 5px; } .mt .mt-o-cau .noi{ flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .mt .mt-o-cau .noi .katex{ font-size:1em; } .mt .mt-o-cau.nhay{ animation:mt-nhay .45s ease; } @keyframes mt-nhay{ 0%{ background:#fff3b0; transform:scale(1.02); } 100%{ background:#fff; transform:none; } } .mt .mt-nut-dong{ display:grid; place-items:center; border:2px solid var(--mt-muc); border-radius:4px; background:var(--mt-do-dam); color:#fff; cursor:pointer; box-shadow:2px 2px 0 var(--mt-muc); } .mt .mt-nut-dong:hover{ background:var(--mt-do); } .mt .mt-nut-dong.nhe{ background:#fff; color:var(--mt-muc); box-shadow:none; } .mt .mt-nut-dong.nhe:hover{ background:#ffe3e3; color:var(--mt-do); } /* chế độ Chọn câu hỏi (theo số lượng) */ .mt .mt-o-so{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; } .mt .mt-o-so input{ width:100%; text-align:center; } .mt .mt-o-so small{ font-size:.6rem; font-weight:700; opacity:.65; } .mt .mt-o-so small.het{ color:var(--mt-do); opacity:1; } .mt-thao-tac{ display:flex; gap:6px; align-items:center; } .mt-ghi-chu{ font-size:.74rem; font-weight:600; } .mt-ghi-chu.vuot{ color:var(--mt-do); } /* ── Thanh dưới ── */ .mt-chan{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:10px 14px; background:#fff; border-top:3px solid var(--mt-muc); } .mt-chan .day-phai{ margin-left:auto; display:flex; gap:8px; flex-wrap:wrap; } .mt .dropdown-menu{ border:2px solid var(--mt-muc); border-radius:4px; box-shadow:4px 4px 0 var(--mt-muc); padding:4px; background:#fff; } .mt .dropdown-item{ font-weight:700; font-size:.8rem; border-radius:3px; color:var(--mt-muc); } .mt .dropdown-item:hover{ background:var(--mt-vang); color:var(--mt-muc); } .mt-bao{ margin:8px 14px 0; padding:8px 12px; border:2px solid var(--mt-muc); border-radius:4px; background:#fff; font-weight:600; font-size:.8rem; box-shadow:3px 3px 0 var(--mt-muc); } .mt-bao.loi{ background:#ffe1e1; } .mt-bao.tot{ background:#e1f7e5; } .mt-bao.canh{ background:#fff4cf; } .mt-bao ul{ margin:4px 0 0; padding-left:18px; font-weight:500; } .mt-trong-rong{ text-align:center; padding:40px 10px; font-weight:600; opacity:.6; } /* ── Hộp thoại (chọn dạng bài, chọn câu, kho, xem tất cả) ── */ .mt-modal .modal-content{ border:3px solid #15110f; border-radius:6px; box-shadow:7px 7px 0 #15110f; background:#fbf5e8; color:#15110f; } .mt-modal .modal-header{ background:repeating-linear-gradient(115deg, rgba(255,255,255,.07) 0 2px, transparent 2px 22px), linear-gradient(135deg, #6d0a12, #c8102e); color:#fff; border-bottom:3px solid #15110f; border-radius:0; } .mt-modal .modal-title{ font-family:'Bangers','Be Vietnam Pro',sans-serif; letter-spacing:.07em; font-size:1.35rem; text-shadow:2px 2px 0 #15110f; } .mt-modal .modal-body{ max-height:70vh; overflow-y:auto; } .mt-modal .modal-footer{ border-top:2px dashed rgba(0,0,0,.25); } .mt-modal .mt-cay-nut{ display:flex; align-items:center; gap:6px; padding:5px 6px; border-radius:4px; cursor:pointer; font-size:.84rem; } .mt-modal .mt-cay-nut:hover{ background:#fff3d1; } .mt-modal .mt-cay-nut.dang-chon{ background:#f5b82e; font-weight:700; } .mt-modal .mt-cay-nut .ch-caret{ width:14px; text-align:center; flex:none; opacity:.7; } .mt-modal .mt-cay-nut .ch-ten{ flex:1; min-width:0; } .mt-modal .mt-cay-nut .ch-dem{ flex:none; font-size:.7rem; font-weight:700; background:#15110f; color:#f5b82e; border-radius:10px; padding:0 7px; } .mt-modal .mt-cay-nut .ch-dem.khong{ background:#ccc; color:#555; } .mt-modal .mt-cay-nut .ch-tong{ flex:none; font-size:.68rem; font-weight:700; color:#8a8274; } .mt-modal .ch-con{ margin-left:14px; border-left:2px solid rgba(0,0,0,.15); padding-left:4px; } .mt-modal .mt-o-tim{ width:100%; border:2px solid #15110f; border-radius:4px; padding:6px 10px; font-weight:600; background:#fff; color:#15110f; margin-bottom:8px; } .mt-modal .mt-the-cau{ border:2px solid #15110f; border-radius:5px; background:#fff; padding:10px 12px; margin-bottom:10px; box-shadow:3px 3px 0 #15110f; } .mt-modal .mt-the-cau.dang-chon{ background:#fff6d6; box-shadow:3px 3px 0 #c8102e; border-color:#c8102e; } .mt-modal .mt-the-cau .dau{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-bottom:6px; font-size:.72rem; font-weight:700; } .mt-modal .mt-the-cau .dau .ma{ background:#15110f; color:#f5b82e; border-radius:3px; padding:1px 6px; } .mt-modal .mt-the-cau .lc{ display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:2px 14px; margin:4px 0 0 10px; } .mt-modal .mt-the-cau img{ max-width:100%; max-height:220px; } .mt-modal .mt-nhom-cau{ font-family:'Bangers','Be Vietnam Pro',sans-serif; letter-spacing:.07em; font-size:1.1rem; margin:12px 0 6px; } .mt-modal .mt-kho-dong{ display:flex; gap:10px; align-items:center; border:2px solid #15110f; border-radius:5px; background:#fff; padding:8px 10px; margin-bottom:8px; box-shadow:3px 3px 0 #15110f; } .mt-modal .mt-kho-dong .ten{ flex:1; min-width:0; font-weight:700; } .mt-modal .mt-kho-dong .ten small{ display:block; font-weight:500; opacity:.65; } /* ── Khung hẹp (điện thoại, hoặc màn hình có thanh menu bên chiếm chỗ): mỗi dòng xếp thành 3 hàng. * Đo theo bề rộng của CHÍNH khung (container query), không theo cả màn hình. ── */ .mt{ container-type:inline-size; } .o-stt{ grid-area:stt; } .o-nhanh{ grid-area:nhanh; } .o-kieu{ grid-area:kieu; } .o-muc{ grid-area:muc; } .o-cau{ grid-area:cau; } .o-lay{ grid-area:lay; } .o-chep{ grid-area:chep; } .o-xoa{ grid-area:xoa; } .o-loai{ grid-area:loai; } .o-tt{ grid-area:tt; } .o-m1{ grid-area:m1; } .o-m2{ grid-area:m2; } .o-m3{ grid-area:m3; } .o-m4{ grid-area:m4; } .mt-luoi.mt-dong{ grid-template-areas:"stt nhanh kieu muc cau lay"; } .mt-luoi.co-sua.mt-dong{ grid-template-areas:"stt nhanh kieu muc cau lay chep xoa"; } .mt-luoi.so-luong.mt-dong{ grid-template-areas:"stt nhanh loai m1 m2 m3 m4 tt"; } @container (max-width: 880px){ .mt-cot{ display:none !important; } .mt-luoi.mt-dong{ grid-template-columns:44px 1fr 1fr 40px; grid-template-areas:"stt nhanh nhanh nhanh" "kieu kieu muc muc" "cau cau cau lay"; gap:6px; } .mt-luoi.co-sua.mt-dong{ grid-template-columns:44px 1fr 1fr 34px 34px; grid-template-areas:"stt nhanh nhanh nhanh nhanh" "kieu kieu muc chep xoa" "cau cau cau cau lay"; } .mt-luoi.so-luong.mt-dong{ grid-template-columns:44px repeat(4, 1fr); grid-template-areas:"stt nhanh nhanh nhanh nhanh" ". loai loai loai loai" ". m1 m2 m3 m4" ". tt tt tt tt"; } .mt-luoi.so-luong .o-m1::before, .mt-luoi.so-luong .o-m2::before, .mt-luoi.so-luong .o-m3::before, .mt-luoi.so-luong .o-m4::before{ font-size:.6rem; font-weight:800; } .mt-luoi.so-luong .o-m1::before{ content:"Mức 1"; } .mt-luoi.so-luong .o-m2::before{ content:"Mức 2"; } .mt-luoi.so-luong .o-m3::before{ content:"Mức 3"; } .mt-luoi.so-luong .o-m4::before{ content:"Mức 4"; } .mt-thao-tac{ flex-wrap:wrap; } .mt-tieu-de h2{ font-size:1.35rem; } .mt-dong{ padding-bottom:9px; border-bottom:2px dashed rgba(0,0,0,.18); } .mt-dong > *{ min-height:36px; } } /* ===================================================================================== * GIAO DIỆN "TRUYỆN TRANH SIÊU ANH HÙNG" cho tab Ngân hàng câu hỏi (#pane-cauhoi) và Chấm trắc nghiệm (#pane-chamtn) * — cùng phong cách tab Ma trận đề (css/ma-tran-de.css): giấy kem chấm bi, viền mực đen dày, bóng đổ lệch, đỏ – vàng, * tiêu đề chữ Bangers. Áp bằng class "mv" trên khung tab: đổi biến màu của cả 2 giao diện app (cổ điển + HUD) và của * bộ .tg (tro-giang.css) sang nền sáng, rồi thêm viền / bóng cho nút, thẻ, ô nhập. Không đụng các tab khác. * (Chỉ là phong cách — không dùng logo / nhân vật có bản quyền.) * ===================================================================================== */ .mv{ --mv-muc:#15110f; --mv-do:#c8102e; --mv-do-dam:#6d0a12; --mv-do-sang:#e23636; --mv-vang:#f5b82e; --mv-giay:#fbf5e8; --mv-kem:#fff3d1; --mv-phu:#5d554b; /* biến của giao diện cổ điển (index.html) */ --bg:var(--mv-giay); --bg-raise:#fff; --surface:#fff; --line:var(--mv-muc); --gold:var(--mv-vang); --blue:#1f5fbf; --green:#1b8a4f; --amber:var(--mv-vang); --bs-body-color:var(--mv-muc); --bs-border-color:var(--mv-muc); --bs-secondary-color:var(--mv-phu); /* biến của giao diện HUD (css/sieu-anh-hung.css) */ --ink:var(--mv-muc); --ink-dim:rgba(21,17,15,.35); --ink-glow:rgba(245,184,46,.5); --paper:var(--mv-giay); --panel:#fff; --panel-raise:var(--mv-giay); --text:var(--mv-muc); --muted:var(--mv-phu); --hairline:rgba(21,17,15,.2); --red:var(--mv-do); --yellow:var(--mv-vang); color:var(--mv-muc); background:var(--mv-giay) radial-gradient(rgba(0,0,0,.07) 1px, transparent 1.3px) 0 0/9px 9px; border:3px solid var(--mv-muc); border-radius:6px; box-shadow:6px 6px 0 var(--mv-muc); padding:0 14px 16px; margin-bottom:12px; } .mv, .mv *{ text-shadow:none; } /* Khung giấy sáng: trình duyệt vẽ ô ngày / lịch / thanh cuộn kiểu SÁNG. Không có dòng này thì kế thừa color-scheme:dark của giao diện HUD → biểu tượng lịch màu trắng trên ô trắng, không thấy chỗ bấm chọn ngày (thầy báo 29/09/2026). */ .mv, .mv-hop .modal-content{ color-scheme:light; } .mv input[type="date"], .mv input[type="month"], .mv input[type="time"], .mv-hop input[type="date"], .mv-hop input[type="month"]{ cursor:pointer; } .mv input::-webkit-calendar-picker-indicator, .mv-hop input::-webkit-calendar-picker-indicator{ cursor:pointer; opacity:.85; } /* ── Băng tiêu đề đỏ có tia tốc độ ── */ .mv-bang{ display:flex; align-items:center; gap:12px; margin:0 -14px 14px; padding:12px 16px; background:repeating-linear-gradient(115deg, rgba(255,255,255,.07) 0 2px, transparent 2px 22px), linear-gradient(135deg, var(--mv-do-dam), var(--mv-do) 55%, var(--mv-do-sang)); border-bottom:3px solid var(--mv-muc); color:#fff; } .mv-logo{ width:42px; height:42px; border-radius:50%; flex:none; display:grid; place-items:center; color:#fff; font-size:1rem; background:radial-gradient(circle, #1f5fbf 0 36%, #f3f3f3 37% 50%, var(--mv-do) 51%); border:2px solid #fff; box-shadow:0 0 0 2px var(--mv-muc), 0 0 14px rgba(255,210,80,.6); } .mv-tieu-de{ margin:0; font-family:'Bangers','Be Vietnam Pro',sans-serif; font-weight:400; letter-spacing:.07em; font-size:1.8rem; line-height:1; color:#fff !important; text-shadow:2px 2px 0 var(--mv-muc), -1px -1px 0 var(--mv-muc), 1px -1px 0 var(--mv-muc), -1px 1px 0 var(--mv-muc) !important; } .mv-phu{ font-size:.78rem; font-weight:600; opacity:.9; margin-top:3px; } /* ── Chữ phụ, liên kết ── */ .mv .text-secondary, .mv .text-muted{ color:var(--mv-phu) !important; } .mv .text-warning{ color:#b35c00 !important; } .mv .text-success{ color:var(--green) !important; } .mv .text-danger{ color:var(--mv-do) !important; } .mv .text-info{ color:#1f5fbf !important; } .mv a{ color:var(--mv-do); } .mv hr{ border-color:var(--mv-muc); opacity:.3; } /* ── Thẻ / khung ── */ .mv .card, .mv details.card{ background:#fff !important; color:var(--mv-muc); border:2px solid var(--mv-muc) !important; border-radius:6px !important; box-shadow:4px 4px 0 var(--mv-muc) !important; backdrop-filter:none; clip-path:none; } .mv details > summary{ font-weight:800; } .mv .alert{ border:2px solid var(--mv-muc); border-radius:5px; box-shadow:3px 3px 0 var(--mv-muc); color:var(--mv-muc); } .mv .alert-warning{ background:#fff4cf; } .mv .dropdown-menu{ background:#fff; border:2px solid var(--mv-muc); border-radius:5px; box-shadow:4px 4px 0 var(--mv-muc); } .mv .dropdown-item{ color:var(--mv-muc); font-weight:700; } .mv .dropdown-item:hover, .mv .dropdown-item:focus{ background:var(--mv-vang); color:var(--mv-muc); } /* ── Nút kiểu truyện tranh (ghi đè cả giao diện cổ điển lẫn HUD) ── */ .mv .btn{ font-weight:800; border:2px solid var(--mv-muc) !important; border-radius:5px !important; box-shadow:2px 2px 0 var(--mv-muc); clip-path:none !important; filter:none !important; transition:transform .08s, box-shadow .08s; letter-spacing:normal; text-transform:none; background:#fff; color:var(--mv-muc); } .mv .btn:hover:not(:disabled){ transform:translate(-1px,-1px); box-shadow:3px 3px 0 var(--mv-muc); background:#fff7de; color:var(--mv-muc); } .mv .btn:active:not(:disabled){ transform:translate(1px,1px); box-shadow:1px 1px 0 var(--mv-muc); } .mv .btn:disabled{ opacity:.45; } .mv .btn-gold, .mv .btn-warning, .mv .btn.active, .mv .btn-group > .btn.active{ background:var(--mv-vang) !important; color:var(--mv-muc) !important; } .mv .btn-gold:hover:not(:disabled), .mv .btn-warning:hover:not(:disabled){ background:#ffc94a !important; } .mv .btn-outline-warning, .mv .btn-outline-secondary{ background:#fff; color:var(--mv-muc); } .mv .btn-outline-info{ background:#fff; color:#1f5fbf; } .mv .btn-outline-success{ background:#fff; color:var(--green); } .mv .btn-outline-danger{ background:#fff; color:var(--mv-do); } .mv .btn-outline-danger:hover:not(:disabled){ background:#ffe3e3; color:var(--mv-do); } .mv .btn-close{ filter:none !important; } /* ── Ô nhập ── */ .mv .form-control, .mv .form-select{ background-color:#fff !important; color:var(--mv-muc) !important; border:2px solid var(--mv-muc) !important; border-radius:4px !important; box-shadow:none; } .mv .form-control::placeholder{ color:#8a8274; } .mv .form-control:focus, .mv .form-select:focus{ box-shadow:0 0 0 3px rgba(245,184,46,.55) !important; } .mv .form-check-input{ border:2px solid var(--mv-muc); } .mv .form-check-input:checked{ background-color:var(--mv-do); border-color:var(--mv-muc); } .mv .form-label, .mv label{ color:var(--mv-muc); } /* ── Ngân hàng câu hỏi: cây, thẻ câu, nhãn, thống kê ── */ .mv .ch-cay b:first-child{ font-family:'Bangers','Be Vietnam Pro',sans-serif; font-weight:400; letter-spacing:.07em; font-size:1.15rem; } .mv .ch-nut:hover{ background:var(--mv-kem); } .mv .ch-nut.dang-chon{ background:var(--mv-vang); } .mv .ch-nut .ch-dem{ opacity:1; font-weight:800; background:var(--mv-muc); color:var(--mv-vang); border-radius:10px; padding:0 7px; } .mv .ch-con{ border-left:2px solid rgba(21,17,15,.2); } .mv .ch-the{ transition:transform .1s; } .mv .ch-the:hover{ transform:translate(-1px,-1px); box-shadow:5px 5px 0 var(--mv-muc) !important; } .mv .ch-the.ch-chon{ outline:3px solid var(--mv-do); outline-offset:1px; } .mv .ch-the-dau{ background:var(--mv-kem); border-bottom:2px solid var(--mv-muc); } .mv .ch-tag{ background:var(--mv-vang); color:var(--mv-muc); border:1.5px solid var(--mv-muc); font-weight:800; } .mv .ch-tag.ch-moi{ background:#fff; color:var(--mv-muc); } .mv .ch-tag.ch-duyet{ background:#1b8a4f; color:#fff; } .mv .ch-muc button{ border:1.5px solid var(--mv-muc); background:#fff; font-weight:800; } .mv .ch-muc button.dang-chon{ background:var(--mv-do); color:#fff; border-color:var(--mv-muc); } .mv .ch-muc button.goi-y{ border:1.5px dashed #1f5fbf; color:#1f5fbf; } .mv .ch-them{ border:2px solid var(--mv-muc); background:#fff; } .mv .ch-the.ch-chon .ch-them{ background:var(--mv-do); box-shadow:inset 0 0 0 3px #fff; } .mv .ch-ma{ border:1.5px solid var(--mv-muc); background:var(--mv-muc); color:var(--mv-vang); font-weight:800; opacity:1; } .mv .ch-goiy{ background:#e8f0ff; border:2px dashed #1f5fbf; color:var(--mv-muc); } .mv .ch-pill{ border:2px solid var(--mv-muc); background:#fff; font-weight:700; box-shadow:2px 2px 0 var(--mv-muc); } .mv .ch-pill b{ color:var(--mv-do); } .mv .ch-pill.dang-chon{ background:var(--mv-vang); } .mv .ch-pill.dang-chon b{ color:var(--mv-muc); } .mv .ch-thongke .ch-nhan{ font-family:'Bangers','Be Vietnam Pro',sans-serif; font-weight:400; letter-spacing:.06em; font-size:1rem; } /* nhập Word / PDF */ .mv .tw-tha{ border:3px dashed var(--mv-muc); background:#fff; } .mv .tw-tha.tw-keo{ background:var(--mv-kem); border-color:var(--mv-do); } .mv .tw-thanh{ background:#fff; border:2px solid var(--mv-muc); box-shadow:3px 3px 0 var(--mv-muc); } .mv .tw-cau{ border:2px solid var(--mv-muc); border-radius:6px; background:#fff; box-shadow:3px 3px 0 var(--mv-muc); } .mv .tw-cau.tw-canxem{ border-color:#d97706; box-shadow:3px 3px 0 #d97706; } .mv .tw-dau{ background:var(--mv-kem); border-bottom:2px solid var(--mv-muc); } .mv .tw-tieude{ color:var(--mv-do); font-family:'Bangers','Be Vietnam Pro',sans-serif; font-weight:400; letter-spacing:.06em; font-size:1.05rem; } .mv .tw-lydo{ color:#b35c00; font-weight:700; } .mv .tw-cau.tw-trung{ border-color:var(--mv-do); box-shadow:3px 3px 0 var(--mv-do); } .mv .tw-tag-trung{ color:var(--mv-do); } .mv .tw-tag-nghi{ color:#9a6700; } .mv .tw-sosanh{ border-left-color:var(--mv-do); background:var(--mv-kem); } .mv .tw-lc .tw-dung{ color:#1b8a4f; } /* ── Chấm trắc nghiệm: đổi biến của bộ .tg (tro-giang.css) sang nền giấy, thêm viền mực ── */ .mv .tg{ --tg-nen:var(--mv-giay); --tg-the:#fff; --tg-the2:var(--mv-giay); --tg-vien:var(--mv-muc); --tg-o:#fff; --tg-vien-o:var(--mv-muc); --tg-chu:var(--mv-muc); --tg-phu:var(--mv-phu); --tg-vang:#b8860b; --tg-xanh:#1b8a4f; --tg-cam:#c25e00; --tg-do:var(--mv-do); --tg-lam:#1f5fbf; color:var(--mv-muc); } .mv .tg h2, .mv .tg .tg-tieu-de{ font-family:'Bangers','Be Vietnam Pro',sans-serif; font-weight:400; letter-spacing:.07em; font-size:1.45rem; color:var(--mv-muc); } .mv .tg .tg-the, .mv .tg .tg-muc-viec, .mv .tg .tg-o-viec{ border:2px solid var(--mv-muc); border-radius:6px; box-shadow:4px 4px 0 var(--mv-muc); } .mv .tg .tg-nut{ border:2px solid var(--mv-muc); border-radius:5px; background:#fff; color:var(--mv-muc); font-weight:800; box-shadow:2px 2px 0 var(--mv-muc); } .mv .tg .tg-nut:hover:not(:disabled){ transform:translate(-1px,-1px); box-shadow:3px 3px 0 var(--mv-muc); } .mv .tg .tg-nut:active:not(:disabled){ transform:translate(1px,1px); box-shadow:1px 1px 0 var(--mv-muc); } .mv .tg .tg-nut.chinh{ background:var(--mv-vang); border-color:var(--mv-muc); color:var(--mv-muc); } .mv .tg .tg-nut.xanh{ background:#dff5e7; color:#1b6b3e; border-color:var(--mv-muc); } .mv .tg .tg-chip{ background:#f1ead9; color:var(--mv-muc); border:1.5px solid var(--mv-muc); font-weight:700; } .mv .tg .tg-chip.xanh{ background:#d8f3dc; color:#1b6b3e; } .mv .tg .tg-chip.cam{ background:#ffe8c7; color:#8a4300; } .mv .tg .tg-chip.vang{ background:#fff0bf; color:#6b4f00; } .mv .tg .tg-chip.do{ background:#ffd9d9; color:#9b0d22; } .mv .tg .tg-chip.lam{ background:#dbe8ff; color:#16458f; } .mv .tg button.tg-chip{ border:1.5px solid var(--mv-muc); } .mv .tg .tg-o, .mv .tg .tg-o-so, .mv .tg select.tg-o{ background:#fff; color:var(--mv-muc); border:2px solid var(--mv-muc); border-radius:4px; } .mv .tg .tg-bao{ border:2px solid var(--mv-muc); border-radius:5px; box-shadow:3px 3px 0 var(--mv-muc); background:#fff; color:var(--mv-muc); } .mv .tg .tg-bao.do{ background:#ffe1e1; color:#9b0d22; } .mv .tg .tg-bao.nhe{ background:var(--mv-giay); color:var(--mv-phu); } .mv .tg .ctn-tha{ border:3px dashed var(--mv-muc); background:#fff; } .mv .tg .ctn-tha:hover, .mv .tg .ctn-tha.keo{ border-color:var(--mv-do); background:var(--mv-kem); } .mv .tg .ctn-chon{ border:2px solid var(--mv-muc); } .mv .tg .ctn-chon.on{ border-color:var(--mv-do); background:var(--mv-kem); } .mv .tg .tg-tien-do{ background:#eee4cc; border:1.5px solid var(--mv-muc); } .mv .tg .tg-tien-do > div{ background:var(--mv-do); } /* Hộp thoại của 2 tab (xuất đề, xem / sửa câu) — cùng kiểu hộp tab Ma trận đề */ .mv-hop .modal-content{ border:3px solid #15110f !important; border-radius:6px !important; box-shadow:7px 7px 0 #15110f !important; background:#fbf5e8 !important; color:#15110f !important; backdrop-filter:none !important; } .mv-hop .modal-header{ background:repeating-linear-gradient(115deg, rgba(255,255,255,.07) 0 2px, transparent 2px 22px), linear-gradient(135deg, #6d0a12, #c8102e) !important; color:#fff; border-bottom:3px solid #15110f !important; border-radius:0 !important; box-shadow:none !important; } .mv-hop .modal-title{ font-family:'Bangers','Be Vietnam Pro',sans-serif !important; font-weight:400; letter-spacing:.07em; font-size:1.3rem !important; color:#fff !important; text-shadow:2px 2px 0 #15110f; } .mv-hop .modal-footer{ border-top:2px dashed rgba(0,0,0,.25) !important; } .mv-hop .text-secondary, .mv-hop .text-muted{ color:#5d554b !important; } .mv-hop .form-control, .mv-hop .form-select{ background-color:#fff !important; color:#15110f !important; border:2px solid #15110f !important; border-radius:4px !important; } .mv-hop .form-label, .mv-hop label{ color:#15110f; } .mv-hop .form-check-input, .mv .form-check-input{ background-color:#fff !important; border:2px solid #15110f !important; box-shadow:none !important; } .mv-hop .form-check-input:checked, .mv .form-check-input:checked{ background-color:#c8102e !important; border-color:#15110f !important; } .mv-hop .btn{ font-weight:800; border:2px solid #15110f !important; border-radius:5px !important; box-shadow:2px 2px 0 #15110f; clip-path:none !important; filter:none !important; background:#fff; color:#15110f; } .mv-hop .btn-gold, .mv-hop .btn-warning{ background:#f5b82e !important; color:#15110f !important; } .mv-hop .btn-outline-warning{ background:#fff !important; color:#15110f !important; } .mv-hop .btn:hover:not(:disabled){ transform:translate(-1px,-1px); box-shadow:3px 3px 0 #15110f; } /* MỌI hộp thoại (app.js apDungMarvelHop_): thân / chân hộp mang class .mv → bỏ khung riêng của .mv, giữ nền giấy chấm bi */ .mv-hop .modal-body.mv-trong-hop, .mv-hop .modal-footer.mv-trong-hop{ border:0 !important; border-radius:0; box-shadow:none !important; margin:0; } .mv-hop .modal-body.mv-trong-hop{ padding:var(--bs-modal-padding, 1rem); } .mv-hop .modal-footer.mv-trong-hop{ padding:.75rem; background:#f3ead6; } .mv-hop .modal-header{ padding:12px 16px; } .mv-hop .modal-header .btn-close{ filter:invert(1) grayscale(1) brightness(2) !important; opacity:1; background-color:transparent; } .mv-hop .modal-content{ overflow:visible !important; } .mv-hop .modal-header{ border-radius:3px 3px 0 0 !important; } .mv-hop .form-label{ font-weight:800; text-transform:uppercase; letter-spacing:.05em; font-size:11.5px; } .mv-hop .form-control:focus, .mv-hop .form-select:focus{ box-shadow:0 0 0 3px rgba(245,184,46,.6) !important; } /* Nút màu của Bootstrap trong khung giấy: giữ màu nhấn (đỏ / xanh) thay vì trắng như nút thường */ .mv .btn-danger, .mv-hop .btn-danger{ background:var(--mv-do, #c8102e) !important; color:#fff !important; } .mv .btn-success, .mv-hop .btn-success{ background:#1b8a4f !important; color:#fff !important; } .mv .btn-primary, .mv-hop .btn-primary, .mv .btn-info, .mv-hop .btn-info{ background:#1f5fbf !important; color:#fff !important; } .mv .btn-secondary, .mv-hop .btn-secondary{ background:#5d554b !important; color:#fff !important; } /* Nút chính cuối hộp (Lưu …) to, chữ Bangers */ .mv-hop .modal-footer .btn-gold.w-100{ font-family:'Bangers','Be Vietnam Pro',sans-serif !important; font-weight:400; font-size:1.35rem; letter-spacing:.07em; padding:8px 12px; box-shadow:4px 4px 0 #15110f; text-transform:uppercase; } /* ═════════════ MỌI TAB + TRANG TRA CỨU HS/PH (app.js apDungMarvel_, thầy yêu cầu 29/09/2026) ═════════════ */ /* Vàng dùng làm CHỮ trên nền giấy: tối hơn cho dễ đọc (nền nút vàng vẫn dùng --mv-vang) */ .mv{ --gold:#9a6700; --amber:#9a6700; --rose:#b3412f; --teal:#127a70; } .mv h1, .mv h2, .mv h3, .mv h4, .mv h5, .mv h6, .mv .h5, .mv .h6{ color:var(--mv-muc); } .mv .card h5, .mv .card .h5, .mv .card-title, .mv > h5, .mv .sec-title{ font-family:'Bangers','Be Vietnam Pro',sans-serif !important; font-weight:400 !important; letter-spacing:.06em; color:var(--mv-muc); text-shadow:none; } .mv.tab-pane{ padding-top:0; } /* Bootstrap: bảng, danh sách, tab con, nhóm ô nhập */ .mv .table{ --bs-table-bg:#fff; --bs-table-color:var(--mv-muc); --bs-table-border-color:rgba(21,17,15,.22); --bs-table-striped-bg:#fbf5e8; --bs-table-hover-bg:var(--mv-kem); --bs-table-hover-color:var(--mv-muc); color:var(--mv-muc); } .mv .table > :not(caption) > * > *{ color:var(--mv-muc); box-shadow:none; } .mv .table thead th:not(#kqExportArea *), .mv th:not(#kqExportArea *){ background:var(--mv-do-dam) !important; color:#fff !important; border-bottom:2px solid var(--mv-muc) !important; text-shadow:none; } .mv .table-responsive{ border:2px solid var(--mv-muc); border-radius:6px; box-shadow:3px 3px 0 var(--mv-muc); background:#fff; } .mv .table-responsive > .table{ margin-bottom:0; } .mv .list-group-item{ background:#fff; color:var(--mv-muc); border-color:rgba(21,17,15,.25); } .mv .list-group-item.active{ background:var(--mv-vang); color:var(--mv-muc); border-color:var(--mv-muc); } .mv .nav-tabs{ border-bottom:3px solid var(--mv-muc) !important; gap:6px; flex-wrap:wrap; } .mv .nav-tabs .nav-link{ border:2px solid var(--mv-muc) !important; border-bottom:none !important; border-radius:6px 6px 0 0 !important; background:#fff !important; color:var(--mv-muc) !important; font-weight:800; margin-bottom:0; box-shadow:none !important; text-shadow:none !important; opacity:1; } .mv .nav-tabs .nav-link.active{ background:var(--mv-vang) !important; color:var(--mv-muc) !important; } .mv .nav-pills .nav-link{ border:2px solid var(--mv-muc); color:var(--mv-muc); background:#fff; font-weight:800; } .mv .nav-pills .nav-link.active{ background:var(--mv-vang); color:var(--mv-muc); } .mv .input-group-text{ background:var(--mv-kem); border:2px solid var(--mv-muc); color:var(--mv-muc); font-weight:700; } .mv .progress{ background:#eee4cc; border:1.5px solid var(--mv-muc); } .mv .card-header, .mv .card-footer{ background:var(--mv-kem); border-color:var(--mv-muc); color:var(--mv-muc); font-weight:800; } .mv .badge.bg-secondary, .mv .badge.text-bg-secondary{ background:#5d554b !important; color:#fff !important; } .mv .bg-light{ background:var(--mv-giay) !important; } .mv .border, .mv .border-top, .mv .border-bottom{ border-color:rgba(21,17,15,.25) !important; } /* Thành phần riêng của app (giao diện cổ điển + HUD) */ .mv .stat-card{ background:#fff !important; border:2px solid var(--mv-muc) !important; border-radius:6px !important; box-shadow:4px 4px 0 var(--mv-muc) !important; } .mv .stat-card .lbl{ color:var(--mv-phu) !important; } .mv .stat-card .num{ color:var(--mv-muc) !important; text-shadow:none !important; } .mv .class-card .cname{ color:var(--mv-do) !important; } .mv .class-card:hover{ border-color:var(--mv-do) !important; } .mv .pill{ border:2px solid var(--mv-muc); color:var(--mv-muc); font-weight:700; background:#fff; } .mv .pill.active{ background:var(--mv-vang); color:var(--mv-muc); border-color:var(--mv-muc); } .mv .seg-btn{ border:2px solid var(--mv-muc); color:var(--mv-muc); background:#fff; font-weight:700; } .mv .seg-btn.on-comat{ background:#3dbb6d; color:#fff; } .mv .seg-btn.on-cophep{ background:var(--mv-vang); color:var(--mv-muc); } .mv .seg-btn.on-khongphep{ background:var(--mv-do); color:#fff; } .mv .seg-btn.on-muon{ background:#1f8f86; color:#fff; } .mv .seg-btn.on-online{ background:#1f5fbf; color:#fff; } .mv .bt-muc-nav{ background:#fff; border:2px solid var(--mv-muc); border-radius:6px; box-shadow:3px 3px 0 var(--mv-muc); } .mv .bt-muc{ color:var(--mv-muc); font-weight:800; } .mv .bt-muc.active{ background:var(--mv-vang); color:var(--mv-muc); box-shadow:inset 0 0 0 2px var(--mv-muc); } .mv .bt-huong-dan{ background:var(--mv-kem); border-left:4px solid var(--mv-do); color:var(--mv-muc); opacity:1; } .mv .bt-dd-nut{ border:2px solid var(--mv-muc); } .mv .bt-dd-nut.on-di{ background:#d8f3dc; color:#1b6b3e; border-color:var(--mv-muc); } .mv .bt-dd-nut.on-vang{ background:#ffd9d9; color:#9b0d22; border-color:var(--mv-muc); } .mv .dkbt-buoi, .mv .sepay-gd{ background:#fff; border:2px solid var(--mv-muc); border-radius:6px; box-shadow:3px 3px 0 var(--mv-muc); } .mv .sepay-gd{ border-left-width:6px; } .mv .sepay-tt.can{ color:#7a5200; background:#fff0bf; } .mv .sepay-tt.ok{ color:#1b6b3e; background:#d8f3dc; } .mv .sepay-tt.bo{ color:var(--mv-phu); } .mv .sepay-nd{ background:var(--mv-kem); border:1px solid rgba(21,17,15,.25); } .mv .the-mien-giam, .mv .the-mien-giam-dong{ color:#16458f; background:#dbe8ff; border-color:#16458f; } .mv .the-mien-giam.mien{ color:#1b6b3e; background:#d8f3dc; border-color:#1b6b3e; } .mv .o-anh{ color:var(--mv-phu); background:#fff; border:2px dashed var(--mv-muc); } .mv .o-anh:hover, .mv .o-anh:focus-visible{ color:var(--mv-muc); border-color:var(--mv-do); } .mv .qr-da-nhan-ok{ color:#1b6b3e; background:#e1f7e5; border:2px solid var(--mv-muc); } .mv .qr-da-nhan-cho{ color:#7a5200; background:#fff4cf; border:2px solid var(--mv-muc); } .mv .pw-eye{ background:#fff !important; border:2px solid var(--mv-muc) !important; color:var(--mv-muc) !important; } .mv .search-wrap i{ color:var(--mv-phu); } .mv .mien-giam-khung{ border:2px dashed var(--mv-muc); } .mv .dkph .dkph-ngay{ background:#fff; border:2px solid var(--mv-muc); } .mv .dkph .dkph-ngay.on{ background:var(--mv-vang); border:2px solid var(--mv-muc); } .mv .tg .ltn-thanh{ background:#fff; border:2px solid var(--mv-muc); box-shadow:3px 3px 0 var(--mv-muc); } .mv .tg .ltn-o.on{ background:var(--mv-vang); border-color:var(--mv-muc); color:var(--mv-muc); } .mv .tg .ltn-ma-de{ background:var(--mv-kem); border:2px solid var(--mv-muc); } .mv .tg .ltn-kq{ border:2px solid rgba(21,17,15,.3); } .mv .tg .ltn-kq.dung{ background:#e1f7e5; } .mv .tg .ltn-kq.sai{ background:#ffe1e1; border-color:var(--mv-do); } /* Màu chữ sáng ghi thẳng trong code (thiết kế cho nền tối) → màu đậm tương ứng trên nền giấy. Không đụng vùng dựng ảnh tải về (#kqExportArea, html2canvas) để ảnh gửi phụ huynh giữ nguyên màu. */ .mv [style*="color:#f1ecdd"]:not(#kqExportArea *), .mv [style*="color:#e3dccb"]:not(#kqExportArea *){ color:var(--mv-muc) !important; } .mv [style*="color:#a9b6ac"]:not(#kqExportArea *), .mv [style*="color:#b9ae94"]:not(#kqExportArea *), .mv [style*="color:#8a978f"]:not(#kqExportArea *), .mv [style*="color:#d9b8a8"]:not(#kqExportArea *), .mv [style*="color:#75847a"]:not(#kqExportArea *), .mv [style*="color:#aaa"]:not(#kqExportArea *){ color:var(--mv-phu) !important; } .mv [style*="color:#e0b04e"]:not(#kqExportArea *), .mv [style*="color:#ecc86b"]:not(#kqExportArea *), .mv [style*="color:#e5b959"]:not(#kqExportArea *), .mv [style*="color:var(--gold)"]:not(#kqExportArea *), .mv [style*="color:#f1d58f"]:not(#kqExportArea *){ color:#9a6700 !important; } .mv [style*="color:#d97b6c"]:not(#kqExportArea *){ color:#b3412f !important; } .mv [style*="color:#5fae70"]:not(#kqExportArea *), .mv [style*="color:#6fcf8f"]:not(#kqExportArea *), .mv [style*="color:#b9e3c1"]:not(#kqExportArea *){ color:#1b7a44 !important; } .mv [style*="color:#6fa0c9"]:not(#kqExportArea *), .mv [style*="color:#9cc3e4"]:not(#kqExportArea *){ color:#1f5fbf !important; } /* Trang tra cứu HS/PH */ .mv-man{ max-width:1240px; margin:0 auto; } /* Nền trang kết quả HS/PH: bìa truyện tranh tia nổ đỏ-vàng + chấm bi (cùng màn đăng nhập), đứng yên khi cuộn */ #studentResultScreen.mv-nen-kq{ padding:22px 16px 80px !important; margin-bottom:-40px; /* phủ luôn lề dưới 40px của body — không lộ dải nền kem ở đáy */ background: radial-gradient(rgba(0,0,0,.2) 1.2px, transparent 1.7px) 0 0/10px 10px, repeating-conic-gradient(from 0deg at 50% 30%, rgba(255,255,255,.07) 0deg 5deg, transparent 5deg 15deg), radial-gradient(circle at 50% 30%, #f5b82e 0, #e23636 28%, #9b0d1c 60%, #2a0508 100%) !important; background-attachment:fixed !important; } #studentResultScreen .mv-man{ box-shadow:8px 8px 0 var(--mv-muc); } #studentResultScreen .mv-man > .mv-bang{ padding:16px 20px; } #studentResultScreen .mv-man > .mv-bang .mv-logo{ width:58px; height:58px; } #studentResultScreen .mv-man > .mv-bang .mv-tieu-de{ font-size:2.4rem; } #studentResultScreen .mv-man > .mv-bang .mv-phu{ font-size:.92rem; } #studentResultScreen .mv-nut-thoat{ font-size:1rem; padding:6px 14px; } /* Thanh thẻ Học phí / Kết quả / Bài giảng…: nút ô truyện tranh to, có huy hiệu; thẻ đang mở = vàng nhô lên, bóng đỏ */ .mv #kqTabNav.nav-tabs{ border-bottom:none !important; gap:12px; margin-bottom:22px !important; } .mv #kqTabNav .nav-link{ display:inline-flex !important; align-items:center; gap:10px; padding:7px 16px 7px 7px !important; font-family:'Bangers','Be Vietnam Pro',sans-serif !important; font-weight:400 !important; font-size:22px !important; line-height:1 !important; letter-spacing:.06em !important; text-transform:uppercase; color:var(--mv-muc) !important; background:#fff !important; border:2px solid var(--mv-muc) !important; border-radius:8px !important; box-shadow:3px 3px 0 var(--mv-muc) !important; transition:transform .08s, box-shadow .08s; } .mv #kqTabNav .nav-link:hover{ transform:translate(-1px,-1px); box-shadow:4px 4px 0 var(--mv-muc) !important; background:#fff7de !important; } .mv #kqTabNav .nav-link.active{ background:var(--mv-vang) !important; transform:translate(-2px,-2px); box-shadow:5px 5px 0 var(--mv-do) !important; } .kq-huy{ flex:none; display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:var(--mv-do); color:#fff; font-size:14px; border:2px solid #fff; box-shadow:0 0 0 2px var(--mv-muc); text-shadow:0 1px 2px rgba(0,0,0,.75) !important; transition:transform .15s; } .mv #kqTabNav .nav-link:hover .kq-huy{ transform:rotate(-12deg) scale(1.08); } .mv #kqTabNav .nav-link.active .kq-huy{ transform:rotate(-8deg) scale(1.1); } #studentResultScreen #kqTabNav .nav-link{ font-size:26px !important; } #studentResultScreen .kq-huy{ width:40px; height:40px; font-size:16px; } /* Huy hiệu nhỏ trong thanh mục con (Bài giảng | Test | Lớp live) và tiêu đề khung */ #studentResultScreen .bt-muc .kq-huy, .kq-huy.nho{ width:30px; height:30px; font-size:12.5px; } .bt-muc:hover .kq-huy{ transform:rotate(-12deg) scale(1.08); } .bt-muc.active .kq-huy{ transform:rotate(-8deg) scale(1.1); } .kq-huy-dong{ display:inline-flex; align-items:center; gap:8px; } /* Thẻ học sinh: tên chữ Bangers như tên siêu anh hùng, mã / lớp dạng nhãn đen chữ vàng, nhận xét = ô lời dẫn truyện tranh */ .mv .kq-ten-hs{ font-family:'Bangers','Be Vietnam Pro',sans-serif !important; font-weight:400 !important; font-size:30px; letter-spacing:.06em; color:var(--mv-muc) !important; text-shadow:2px 2px 0 var(--mv-vang) !important; line-height:1.1; } .mv .kq-the-hs{ border-width:3px !important; box-shadow:6px 6px 0 var(--mv-muc) !important; background:#fff radial-gradient(rgba(200,16,46,.07) 1px, transparent 1.4px) 0 0/8px 8px !important; } .mv .kq-the-hs > .d-flex:first-child{ flex-wrap:wrap; gap:8px 12px; } /* tên dài / màn hẹp: nút Tải ảnh xuống dòng, không đè tên */ .mv .kq-the-hs > .d-flex:first-child > div{ min-width:0; } .mv .kq-ma-lop{ display:inline-block; margin-top:4px; padding:1px 9px; font-weight:800; color:var(--mv-vang) !important; background:var(--mv-muc); border-radius:3px; transform:skew(-8deg); } .mv .kq-nx{ background:var(--mv-kem) !important; border:2px solid var(--mv-muc) !important; border-left:7px solid var(--mv-do) !important; border-radius:4px !important; box-shadow:3px 3px 0 var(--mv-muc); color:var(--mv-muc); font-size:.92rem !important; line-height:1.55; } .mv .kq-nx b{ font-family:'Bangers','Be Vietnam Pro',sans-serif; font-weight:400; font-size:1.12rem; letter-spacing:.05em; color:var(--mv-do); } /* ── Thẻ Bài giảng (app.js htmlBaiGiangHocSinh_): huy hiệu sấm sét + tên Bangers + tem "Đã xem", thanh tiến độ sọc, nhãn tháng đen chữ vàng nghiêng, mỗi buổi = ô truyện tranh viền mực, nút XEM vàng chữ Bangers ── */ .mv .kq-bg{ border-width:3px !important; box-shadow:6px 6px 0 var(--mv-muc) !important; background:#fff radial-gradient(rgba(200,16,46,.07) 1px, transparent 1.4px) 0 0/8px 8px !important; } .kq-bg-bia{ display:block; width:100%; margin-bottom:14px; border:3px solid #15110f; border-radius:6px; box-shadow:4px 4px 0 #15110f; } .kq-bg .kq-hp-tem.kq-bg-tem-dung{ animation:none; color:#9a6700; background:#fff3d1; } /* chưa xem hết: tem vàng, không nhấp nháy */ .kq-bg-tien-do{ position:relative; height:22px; margin:6px 0 16px; background:#fff; border:2.5px solid #15110f; border-radius:4px; box-shadow:3px 3px 0 #15110f; overflow:hidden; } .kq-bg-tien-do > div{ height:100%; background:repeating-linear-gradient(115deg, rgba(255,255,255,.22) 0 6px, transparent 6px 14px), linear-gradient(90deg, #c8102e, #e23636 60%, #f5b82e); border-right:2.5px solid #15110f; transition:width .4s; } .kq-bg-tien-do > div[style="width:0%;"]{ border-right:0; } .kq-bg-tien-do > span{ position:absolute; inset:0; display:grid; place-items:center; font-family:'Bangers','Be Vietnam Pro',sans-serif; font-size:15px; letter-spacing:.08em; color:#fff; text-shadow:1.5px 1.5px 0 #15110f, -1px -1px 0 #15110f, 1px -1px 0 #15110f, -1px 1px 0 #15110f; } .kq-bg-thang{ display:block; width:fit-content; margin:14px 0 10px; padding:2px 12px 1px; font-family:'Bangers','Be Vietnam Pro',sans-serif; font-size:19px; letter-spacing:.08em; color:#f5b82e; background:#15110f; border-radius:3px; transform:skew(-8deg); box-shadow:3px 3px 0 #c8102e; } .kq-bg-the{ display:flex; align-items:center; gap:12px; margin-bottom:12px; padding:10px 12px; background:#fff; color:#15110f; border:2.5px solid #15110f; border-radius:6px; box-shadow:4px 4px 0 #15110f; transition:transform .1s, box-shadow .1s; } .kq-bg-the:hover{ transform:translate(-2px,-2px); box-shadow:6px 6px 0 #c8102e; } .kq-bg-the.da-xem{ background:#f3fbf4; } .kq-bg-the .kq-bg-huy{ width:40px; height:40px; font-size:16px; } .kq-bg-giua{ flex:1; min-width:0; } .kq-bg-ten{ font-family:'Bangers','Be Vietnam Pro',sans-serif; font-weight:400; font-size:21px; letter-spacing:.05em; line-height:1.15; color:#15110f; overflow-wrap:anywhere; } .kq-bg-nhan{ display:inline-block; margin-top:3px; padding:0 7px; font-size:11px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:#c8102e; border:1.5px solid currentColor; border-radius:3px; transform:rotate(-3deg); background:#fff; } .kq-bg-nhan.da{ color:#1b7a44; background:#e1f7e5; } .kq-bg-xem{ flex:none; display:inline-flex; align-items:center; gap:7px; padding:6px 14px 5px; cursor:pointer; font-family:'Bangers','Be Vietnam Pro',sans-serif; font-size:20px; letter-spacing:.08em; line-height:1; text-transform:uppercase; color:#15110f; background:#f5b82e; border:2.5px solid #15110f; border-radius:6px; box-shadow:3px 3px 0 #15110f; transition:transform .08s, box-shadow .08s, background .1s; } .kq-bg-xem i{ display:grid; place-items:center; width:26px; height:26px; font-size:11px; color:#fff; background:#c8102e; border:2px solid #15110f; border-radius:50%; padding-left:2px; } .kq-bg-xem:hover{ background:#ffd24d; transform:translate(-1px,-1px) rotate(-2deg); box-shadow:4px 4px 0 #c8102e; } .kq-bg-xem:active{ transform:translate(2px,2px); box-shadow:1px 1px 0 #15110f; } .kq-bg-xem:focus-visible{ outline:3px solid #1f5fbf; outline-offset:2px; } @media (max-width:420px){ .kq-bg-the{ gap:9px; padding:9px 10px; } .kq-bg-the .kq-bg-huy{ width:32px; height:32px; font-size:13px; } .kq-bg-ten{ font-size:18px; } .kq-bg-xem{ font-size:17px; padding:5px 10px 4px; } .kq-bg-xem i{ width:22px; height:22px; } } @media (prefers-reduced-motion: reduce){ .kq-bg-the, .kq-bg-xem, .kq-bg-tien-do > div{ transition:none; } } /* Chọn cách xếp: Theo chương / Theo tháng */ .kq-bg-che-do{ display:flex; gap:8px; margin:0 0 12px; flex-wrap:wrap; } .kq-bg-che-do button{ padding:5px 12px 4px; font-family:'Bangers','Be Vietnam Pro',sans-serif; font-size:17px; letter-spacing:.06em; color:#15110f; background:#fff; border:2.5px solid #15110f; border-radius:6px; box-shadow:2px 2px 0 #15110f; } .kq-bg-che-do button.on{ background:#15110f; color:#f5b82e; box-shadow:3px 3px 0 #c8102e; transform:translate(-1px,-1px); } /* Cây thư mục: mỗi chương / tháng là 1 "thư mục" gập–mở */ .kq-bg-nhom{ margin-bottom:12px; border:2.5px solid #15110f; border-radius:6px; background:#fff; box-shadow:4px 4px 0 #15110f; overflow:hidden; } .kq-bg-nhom > summary{ list-style:none; display:flex; align-items:center; gap:10px; padding:9px 12px; cursor:pointer; user-select:none; background:repeating-linear-gradient(115deg, rgba(255,255,255,.06) 0 2px, transparent 2px 20px), #15110f; color:#f5b82e; } .kq-bg-nhom > summary::-webkit-details-marker{ display:none; } .kq-bg-nhom > summary:focus-visible{ outline:3px solid #1f5fbf; outline-offset:-3px; } .kq-bg-thu-muc{ font-size:18px; color:#f5b82e; } .kq-bg-nhom[open] .kq-bg-thu-muc.fa-folder::before{ content:"\f07c"; } /* thư mục mở */ .kq-bg-nhom-ten{ flex:1; min-width:0; font-family:'Bangers','Be Vietnam Pro',sans-serif; font-size:19px; letter-spacing:.06em; line-height:1.2; overflow-wrap:anywhere; } .kq-bg-so{ font-family:'Be Vietnam Pro',sans-serif; font-weight:800; font-size:.85em; letter-spacing:.02em; } /* số 7 chữ Bangers trông như số 1 */ .kq-bg-nhom-dem{ flex:none; padding:0 8px; font-family:'Be Vietnam Pro',sans-serif; font-weight:800; font-size:13px; color:#15110f; background:#f5b82e; border-radius:3px; transform:skew(-8deg); } .kq-bg-nhom-dem.du{ background:#5fd18b; } .kq-bg-mui{ flex:none; color:#fff; transition:transform .2s; } .kq-bg-nhom[open] .kq-bg-mui{ transform:rotate(180deg); } .kq-bg-nhom-ds{ padding:12px 12px 2px; background:#fbf5e8 radial-gradient(rgba(0,0,0,.06) 1px, transparent 1.3px) 0 0/9px 9px; } .kq-bg-nhan-chuong{ display:inline-block; margin:3px 0 0 6px; font-size:11px; font-weight:700; color:#5d554b; } /* Lớp học live (Zoom, js/lop-live.js) — mục con "Lớp live": phòng chờ ảnh bìa khoá học 16:9 + đếm ngược + nút Vào lớp */ .kq-live-cham{ display:inline-flex; align-items:center; gap:4px; margin-left:6px; padding:0 6px; font-family:'Bangers','Be Vietnam Pro',sans-serif; font-size:13px; letter-spacing:.08em; line-height:1.4; color:#fff; background:#c8102e; border:1.5px solid #15110f; border-radius:3px; vertical-align:middle; } .kq-live-cham[hidden]{ display:none; } .kq-live-cham::before{ content:''; width:6px; height:6px; border-radius:50%; background:#fff; animation:kqLiveNhay 1.2s ease-in-out infinite; } @keyframes kqLiveNhay{ 50%{ opacity:.2; } } .kq-live-phong{ margin-bottom:14px; background:#fff; border:3px solid #15110f; border-radius:8px; box-shadow:6px 6px 0 #15110f; overflow:hidden; } .kq-live-phong.dang{ box-shadow:6px 6px 0 #c8102e; } .kq-live-bia{ position:relative; aspect-ratio:16/9; background:#15110f url(../logo.png) center/26% no-repeat; border-bottom:3px solid #15110f; } .kq-live-bia img{ display:block; width:100%; height:100%; object-fit:cover; } .kq-live-bia::after{ content:''; position:absolute; inset:45% 0 0; background:linear-gradient(transparent, rgba(10,8,6,.88)); pointer-events:none; } .kq-live-bia-tem{ position:absolute; z-index:1; left:12px; top:12px; display:inline-flex; align-items:center; gap:6px; padding:2px 11px 1px; font-family:'Bangers','Be Vietnam Pro',sans-serif; font-size:20px; letter-spacing:.08em; text-transform:uppercase; color:#15110f; background:#f5b82e; border:2.5px solid #15110f; border-radius:4px; box-shadow:3px 3px 0 #15110f; transform:rotate(-4deg); } .kq-live-bia-tem.do{ color:#fff; background:#c8102e; } .kq-live-bia-tem.do::before{ content:''; width:9px; height:9px; border-radius:50%; background:#fff; animation:kqLiveNhay 1.2s ease-in-out infinite; } .kq-live-bia-chu{ position:absolute; z-index:1; left:14px; right:14px; bottom:10px; color:#fff; text-shadow:0 2px 4px rgba(0,0,0,.6); } .kq-live-bia-ten{ font-family:'Bangers','Be Vietnam Pro',sans-serif; font-size:clamp(20px, 5vw, 30px); letter-spacing:.05em; line-height:1.1; overflow-wrap:anywhere; } .kq-live-bia-gio{ font-size:13.5px; font-weight:700; text-transform:capitalize; } .kq-live-duoi{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; padding:12px 14px; } .kq-live-dem{ font-family:'Bangers','Be Vietnam Pro',sans-serif; font-size:24px; letter-spacing:.05em; color:#15110f; font-variant-numeric:tabular-nums; } .kq-live-phong.dang .kq-live-dem{ color:#c8102e; } .kq-live-trong{ font-size:14px; font-weight:600; color:#5d554b; } a.kq-bg-xem{ text-decoration:none; } .kq-bg-xem.kq-live-khoa{ cursor:default; color:#5d554b; background:#e9e3d6; font-size:17px; } .kq-bg-xem.kq-live-khoa i{ background:#8a8173; } .kq-bg-xem.kq-live-khoa:hover{ transform:none; box-shadow:3px 3px 0 #15110f; background:#e9e3d6; } .kq-live-lich{ padding:10px 12px; background:#fff; color:#15110f; border:2.5px solid #15110f; border-radius:6px; box-shadow:4px 4px 0 #15110f; } .kq-live-lich-tieu{ margin-bottom:6px; font-family:'Bangers','Be Vietnam Pro',sans-serif; font-size:19px; letter-spacing:.05em; } .kq-live-lich-dong{ display:flex; flex-wrap:wrap; gap:4px 10px; padding:6px 0; border-top:1.5px dashed #d9cdb4; font-size:13.5px; } .kq-live-lich-ngay{ min-width:120px; font-weight:800; text-transform:capitalize; } .kq-live-lich-gio{ font-weight:700; color:#c8102e; font-variant-numeric:tabular-nums; } .kq-live-lich-ten{ flex:1 1 160px; color:#5d554b; } @media (prefers-reduced-motion: reduce){ .kq-live-cham::before, .kq-live-bia-tem.do::before{ animation:none; } } /* Tab "Lớp live" (Admin): ô chọn lớp / thứ dạng chip */ .live-dt{ display:flex; flex-direction:column; gap:6px; } .live-dt-nhom{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; } .live-chip{ display:inline-flex; align-items:center; gap:5px; padding:3px 9px; font-size:13px; border:1.5px solid #15110f; border-radius:5px; background:#fff; cursor:pointer; } .live-chip-khoa{ font-weight:700; background:#fff3d1; } .live-chip.mo{ opacity:.45; cursor:default; } .live-chip input{ margin:0; } /* Tài liệu kèm buổi: nút file (biểu tượng theo loại) — bấm là tải */ .kq-bg-tl-ds{ display:flex; flex-wrap:wrap; gap:6px; margin-top:7px; } .kq-bg-tl{ display:inline-flex; align-items:center; gap:6px; max-width:100%; padding:4px 9px; font-size:12.5px; font-weight:700; color:#15110f; text-align:left; background:#fff; border:2px solid #15110f; border-radius:5px; box-shadow:2px 2px 0 #15110f; cursor:pointer; transition:transform .08s, box-shadow .08s; } .kq-bg-tl:hover{ background:#fff3d1; transform:translate(-1px,-1px); box-shadow:3px 3px 0 #c8102e; } .kq-bg-tl:focus-visible{ outline:3px solid #1f5fbf; outline-offset:2px; } .kq-bg-tl i:first-child{ font-size:15px; flex:none; } .kq-bg-tl-ten{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .kq-bg-tl small{ flex:none; font-weight:600; color:#5d554b; } .kq-bg-tl-tai{ flex:none; font-size:11px; color:#c8102e; } .kq-bg-tl.dang-tai{ opacity:.6; cursor:progress; } /* Số bài kiểm tra đang mở em chưa nộp — trên nút mục "Test" */ .kq-bg-test-dem{ display:inline-grid; place-items:center; min-width:22px; height:22px; padding:0 6px; font-size:12px; font-weight:800; line-height:1; color:#fff; background:#c8102e; border:2px solid #15110f; border-radius:11px; } /* Bài kiểm tra đi kèm bài giảng: hiện ngay dưới bài giảng (vạch đứt đỏ ngăn với phần tài liệu) */ .kq-bg-kt{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; margin-top:9px; padding-top:8px; border-top:2px dashed #c8102e; } .kq-bg-kt-ten{ flex:1 1 140px; min-width:0; font-weight:800; font-size:14px; color:#15110f; } .kq-bg-kt .kq-bg-nhan{ margin-top:0; } .kq-bg-kt-diem{ font-size:12.5px; font-weight:700; color:#5d554b; } .kq-bg-kt-nut{ flex:none; padding:5px 12px; font-size:13px; font-weight:800; color:#15110f; cursor:pointer; background:#f5b82e; border:2.5px solid #15110f; border-radius:6px; box-shadow:2px 2px 0 #15110f; transition:transform .08s, box-shadow .08s; } .kq-bg-kt-nut:hover{ background:#ffd24d; transform:translate(-1px,-1px); box-shadow:3px 3px 0 #c8102e; } .kq-bg-kt-nut:focus-visible{ outline:3px solid #1f5fbf; outline-offset:2px; } .kq-bg-kt-nut:disabled{ opacity:.6; cursor:progress; } /* Dưới khung phát video */ .kq-bg-tl-modal:empty{ display:none; } .kq-bg-tl-modal{ padding:10px 14px 14px; background:#fbf5e8; color:#15110f; border-top:3px solid #15110f; } .kq-bg-tl-tieu-de{ font-family:'Bangers','Be Vietnam Pro',sans-serif; font-size:18px; letter-spacing:.06em; color:#c8102e; } .kq-bg-tl-modal .kq-bg-tl-ds{ margin-top:4px; } /* ── Thẻ Học phí (renderHocPhiHocSinh + thong-bao-hoc-phi.js veChiTietPhuHuynh) ── */ .mv .kq-hp{ border-width:3px !important; box-shadow:6px 6px 0 var(--mv-muc) !important; background:#fff radial-gradient(rgba(200,16,46,.07) 1px, transparent 1.4px) 0 0/8px 8px !important; } .kq-hp-dau{ display:flex; align-items:center; flex-wrap:wrap; gap:10px 12px; } .kq-hp-dau .kq-ten-hs{ margin:0; flex:0 1 auto; min-width:0; } /* co lại cạnh huy hiệu thay vì rớt xuống dòng riêng */ .kq-hp-dau .kq-huy{ width:40px; height:40px; font-size:16px; } .kq-hp-tem{ /* tem đóng dấu nghiêng */ display:inline-block; padding:3px 12px 2px; transform:rotate(-6deg); font-family:'Bangers','Be Vietnam Pro',sans-serif; font-size:20px; letter-spacing:.08em; text-transform:uppercase; border:3px solid currentColor; border-radius:4px; box-shadow:3px 3px 0 var(--mv-muc); background:#fff; } .kq-hp-tem.da{ color:#1b7a44; background:#e1f7e5; } .kq-hp-tem.chua{ color:var(--mv-do); background:#ffe8e8; animation:mvTemNhay 1.6s ease-in-out infinite; } @keyframes mvTemNhay{ 0%, 100%{ transform:rotate(-6deg) scale(1); } 50%{ transform:rotate(-6deg) scale(1.07); } } @media (prefers-reduced-motion: reduce){ .kq-hp-tem.chua{ animation:none; } } /* Chi tiết học phí: ô truyện tranh có băng tiêu đề đỏ, dòng tổng = dải vàng số to */ .mv .kq-hp-chi-tiet{ padding:0 !important; overflow:hidden; background:#fff; border:2px solid var(--mv-muc) !important; border-radius:6px !important; box-shadow:4px 4px 0 var(--mv-muc); } .mv .kq-hp-chi-tiet > :not(.kq-hp-tieu-de){ margin-left:12px; margin-right:12px; } .mv .kq-hp-chi-tiet > :last-child{ margin-bottom:10px; } .mv .kq-hp-tieu-de{ margin:0 0 8px !important; padding:7px 12px; color:#fff; border-bottom:2px solid var(--mv-muc); font-family:'Bangers','Be Vietnam Pro',sans-serif; font-weight:400 !important; font-size:1.3rem; letter-spacing:.06em; text-shadow:2px 2px 0 var(--mv-muc) !important; background:repeating-linear-gradient(115deg, rgba(255,255,255,.07) 0 2px, transparent 2px 22px), linear-gradient(135deg, var(--mv-do-dam), var(--mv-do) 55%, var(--mv-do-sang)); } .mv .kq-hp-tong, .mv .kt-tong-hang{ margin-top:10px !important; padding:6px 12px !important; border:2px solid var(--mv-muc) !important; border-radius:4px; background:var(--mv-vang); box-shadow:3px 3px 0 var(--mv-muc); color:var(--mv-muc); } .mv .kq-hp-tong > b:first-child, .mv .kt-tong-hang > span:first-child{ font-family:'Bangers','Be Vietnam Pro',sans-serif; font-weight:400; font-size:1.25rem; letter-spacing:.06em; text-transform:uppercase; } .mv .kq-hp-tong > b:last-child, .mv .kt-tong-hang > b{ font-family:'Bangers','Be Vietnam Pro',sans-serif; font-weight:400; font-size:1.7rem; letter-spacing:.04em; color:var(--mv-do) !important; text-shadow:1px 1px 0 #fff !important; } /* Hướng dẫn chọn khoản = ô lời dẫn; nhãn nhóm khoản = chữ Bangers đỏ; nút tháng / sách / combo to hơn */ .mv .kq-hp-huong-dan{ padding:8px 12px; background:var(--mv-kem); border:2px solid var(--mv-muc); border-left:7px solid var(--mv-vang); border-radius:4px; color:var(--mv-muc) !important; line-height:1.55; } .mv .kq-hp .kt-nhom-nhan{ margin-top:12px; font-family:'Bangers','Be Vietnam Pro',sans-serif; font-weight:400; font-size:1.15rem !important; letter-spacing:.05em; color:var(--mv-do) !important; } .mv .kq-hp .pill{ padding:6px 14px; font-size:13.5px; font-weight:800; border-radius:6px; box-shadow:2px 2px 0 var(--mv-muc); transition:transform .08s, box-shadow .08s; } .mv .kq-hp .pill:hover:not(:disabled){ transform:translate(-1px,-1px); box-shadow:3px 3px 0 var(--mv-muc); } .mv .kq-hp .pill.active{ transform:translate(-1px,-1px); box-shadow:3px 3px 0 var(--mv-do); } .mv .kq-hp .kt-ds-chon > .d-flex{ padding:6px 2px !important; border-bottom:1.5px dashed rgba(21,17,15,.3) !important; } /* Màn rộng (≥992px): chia 2 cột — trái: chi tiết + chọn khoản, phải: mã QR (dính khi cuộn). Điện thoại / máy tính bảng: 1 cột như cũ */ .kq-hp-luoi{ display:block; } .kq-hp-phai{ margin-top:16px; } .kq-hp-trai, .kq-hp-phai{ min-width:0; } @media (min-width:992px){ .kq-hp-luoi{ display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,380px); gap:20px 24px; align-items:start; } .kq-hp-phai{ margin-top:0; position:sticky; top:calc(var(--head, 64px) + 12px); } } /* Mã QR: khung ô truyện tranh viền mực, bóng lệch */ .mv .kq-hp .hs-qr-slot .qr-ck-img{ border:3px solid var(--mv-muc); border-radius:6px; box-shadow:6px 6px 0 var(--mv-muc); } .mv-logo-anh{ background:#15110f; padding:0; overflow:hidden; } .mv-logo-anh img{ width:100%; height:100%; object-fit:contain; } .mv-bang .mv-nut-thoat{ background:#fff !important; color:var(--mv-muc) !important; flex:none; } .mv-dang-nhap{ overflow:hidden; } #loginScreen .mv-dang-nhap{ border:3px solid #15110f !important; border-radius:6px !important; box-shadow:6px 6px 0 #15110f !important; backdrop-filter:none !important; background:#fbf5e8 radial-gradient(rgba(0,0,0,.07) 1px, transparent 1.3px) 0 0/9px 9px !important; } #loginScreen .mv-dang-nhap::before, #loginScreen .mv-dang-nhap::after{ display:none !important; } .mv-dang-nhap .card-body{ padding-top:4px !important; } .mv-dang-nhap .brand-title, .mv-dang-nhap .brand-slogan{ display:none; } #loginScreen .mv-dang-nhap a{ color:var(--mv-do) !important; font-weight:700; } /* Màn đăng nhập: nền bìa truyện tranh — tia nổ đỏ-vàng tỏa từ giữa + chấm bi in lưới (đè cả giao diện cổ điển lẫn HUD) */ #loginScreen.mv-nen-dn{ background: radial-gradient(rgba(0,0,0,.2) 1.2px, transparent 1.7px) 0 0/10px 10px, repeating-conic-gradient(from 0deg at 50% 42%, rgba(255,255,255,.08) 0deg 5deg, transparent 5deg 15deg), radial-gradient(circle at 50% 42%, #f5b82e 0, #e23636 26%, #9b0d1c 58%, #2a0508 100%) !important; background-size:10px 10px, auto, auto !important; } /* Thẻ nhân viên: giữ logo lớn làm "bìa", tên Tập đoàn chữ Bangers, khẩu hiệu dạng dải băng vàng nghiêng */ .mv-dn-nv .brand-title{ display:block !important; font-family:'Bangers','Be Vietnam Pro',sans-serif !important; font-weight:400 !important; font-size:30px !important; letter-spacing:.06em; line-height:1.05; color:var(--mv-muc) !important; text-transform:uppercase; text-shadow:2px 2px 0 var(--mv-vang) !important; margin:4px 0 6px; } .mv-dn-nv .brand-slogan{ display:table !important; margin:0 auto 18px !important; padding:3px 14px !important; transform:skew(-10deg); border-radius:0 !important; background:var(--mv-vang) !important; color:var(--mv-muc) !important; box-shadow:3px 3px 0 var(--mv-muc) !important; border:2px solid var(--mv-muc); font-style:normal !important; font-weight:800 !important; font-size:11px !important; letter-spacing:.2em !important; text-transform:uppercase; } /* Thẻ đăng nhập (NV + HS/PH) to hơn: rộng 420px (trước 360), ô nhập / nút / chữ lớn hơn */ #loginScreen .mv-dang-nhap{ max-width:420px !important; } #loginScreen .mv-dang-nhap .mv-bang{ padding:14px 18px; } #loginScreen .mv-dang-nhap .mv-logo{ width:50px; height:50px; font-size:1.2rem; } #loginScreen .mv-dang-nhap .mv-tieu-de{ font-size:2.1rem; } #loginScreen .mv-dang-nhap .mv-phu{ font-size:.86rem; } #loginScreen .mv-dang-nhap img[alt="Tập Đoàn Toán Thầy Hạnh"]{ width:128px !important; } #loginScreen .mv-dang-nhap .brand-title{ font-size:34px !important; } #loginScreen .mv-dang-nhap .form-label{ font-size:12.5px !important; } #loginScreen .mv-dang-nhap .form-control{ font-size:1.05rem; padding:.6rem .8rem; } #loginScreen .mv-dang-nhap #loginBtn, #loginScreen .mv-dang-nhap #hsLoginBtn{ font-size:1.15rem; padding:.65rem 1rem; box-shadow:4px 4px 0 var(--mv-muc); } #loginScreen .mv-dang-nhap .mv-dn-thoai{ font-size:13.5px; } #loginScreen .mv-dang-nhap a{ font-size:.95rem; } /* Tên Tập đoàn chia 2 hàng cố định: "TẬP ĐOÀN" / "TOÁN THẦY HẠNH" (không để rớt 1 chữ "HẠNH" xuống dòng) */ .brand-title .ten-td > span, .mv-cho-ten .ten-td > span{ display:block; white-space:nowrap; line-height:1.15; } /* Dòng 2 "Toán Thầy Hạnh": dãn ra để dấu mũ / dấu hỏi (Ầ, Ạ…) không bị dòng trên che (thầy báo 30/09/2026) */ .brand-title .ten-td > span + span, .mv-cho-ten .ten-td > span + span{ margin-top:.28em; } #loginScreen .mv-dn-nv img[alt="Tập Đoàn Toán Thầy Hạnh"]{ filter:drop-shadow(3px 3px 0 rgba(21,17,15,.35)) !important; } #loginScreen .mv-dang-nhap .form-label{ color:var(--mv-muc) !important; } #loginScreen .mv-dang-nhap .card-body{ background:transparent !important; } /* Thẻ tra cứu HS/PH: cùng kiểu thẻ nhân viên + ô lời thoại trắng viền mực có đuôi nhọn, nút "Xem kết quả" đỏ chữ trắng */ .mv-dn-hs .brand-title{ font-size:27px !important; } .mv-dn-thoai{ position:relative; margin:0 4px 18px; padding:8px 12px; text-align:center; font-size:12.5px; font-weight:800; line-height:1.4; color:var(--mv-muc); background:#fff; border:2px solid var(--mv-muc); border-radius:14px; box-shadow:3px 3px 0 var(--mv-muc); } .mv-dn-thoai i{ color:var(--mv-do); margin-right:6px; } .mv-dn-thoai::after{ /* đuôi bong bóng thoại chỉ lên dải khẩu hiệu */ content:''; position:absolute; top:-9px; left:50%; width:14px; height:14px; margin-left:-7px; transform:rotate(45deg); background:#fff; border-left:2px solid var(--mv-muc); border-top:2px solid var(--mv-muc); } #loginScreen .mv-dn-hs #hsLoginBtn{ background:var(--mv-do) !important; color:#fff !important; text-shadow:1px 1px 0 var(--mv-muc); } #loginScreen .mv-dn-hs #hsLoginBtn:hover:not(:disabled){ background:var(--mv-do-sang) !important; } #loginScreen #showStaffLoginLink{ color:var(--mv-phu) !important; } /* Màn hình chờ khi F5 vào lại phiên (#bootLoading): cùng nền bìa tia nổ của màn đăng nhập, huy hiệu logo có vòng răng cưa đỏ-vàng xoay, tên Tập đoàn chữ Bangers viền mực, dòng chữ trong dải băng vàng nghiêng. (Không đặt display — index.html bật/tắt.) */ #bootLoading.mv-cho{ padding:20px; background: radial-gradient(rgba(0,0,0,.2) 1.2px, transparent 1.7px) 0 0/10px 10px, repeating-conic-gradient(from 0deg at 50% 44%, rgba(255,255,255,.08) 0deg 5deg, transparent 5deg 15deg), radial-gradient(circle at 50% 44%, #f5b82e 0, #e23636 26%, #9b0d1c 58%, #2a0508 100%) !important; } .mv-cho-khung{ display:flex; flex-direction:column; align-items:center; gap:16px; text-align:center; } .mv-cho-huy-hieu{ position:relative; width:156px; height:156px; display:grid; place-items:center; } .mv-cho-vong{ position:absolute; inset:0; border-radius:50%; border:3px solid #15110f; background:repeating-conic-gradient(#f5b82e 0 16deg, #15110f 16deg 20deg, #c8102e 20deg 36deg, #15110f 36deg 40deg); -webkit-mask:radial-gradient(circle, transparent 0 61px, #000 62px); mask:radial-gradient(circle, transparent 0 61px, #000 62px); animation:mvChoXoay 1.4s linear infinite; } .mv-cho-huy-hieu img{ position:relative; width:116px; height:116px; object-fit:contain; border-radius:50%; background:#15110f; border:4px solid #fff; box-shadow:0 0 0 4px #15110f, 6px 6px 0 4px rgba(21,17,15,.6); animation:mvChoNay 1.2s ease-in-out infinite; } .mv-cho-ten{ font-family:'Bangers','Be Vietnam Pro',sans-serif; font-weight:400; font-size:clamp(26px, 7vw, 40px); line-height:1; letter-spacing:.07em; text-transform:uppercase; color:#fff; text-shadow:3px 3px 0 #15110f, -1px -1px 0 #15110f, 1px -1px 0 #15110f, -1px 1px 0 #15110f; } .mv-cho-chu{ padding:6px 16px; transform:skew(-10deg); font-weight:800; font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; color:#15110f; background:#f5b82e; border:3px solid #15110f; box-shadow:4px 4px 0 #15110f; } .mv-cho-cham i{ font-style:normal; animation:mvChoCham 1.2s infinite; } .mv-cho-cham i:nth-child(2){ animation-delay:.2s; } .mv-cho-cham i:nth-child(3){ animation-delay:.4s; } @keyframes mvChoXoay{ to{ transform:rotate(360deg); } } @keyframes mvChoNay{ 0%, 100%{ transform:scale(1); } 50%{ transform:scale(1.05); } } @keyframes mvChoCham{ 0%, 20%{ opacity:0; } 40%, 100%{ opacity:1; } } @media (prefers-reduced-motion: reduce){ .mv-cho-vong, .mv-cho-huy-hieu img, .mv-cho-cham i{ animation:none; } } /* Mạng chậm (#netCho, app.js hienDangCho_): bản nhỏ của huy hiệu chờ ở trên — tia nổ vàng lóe sáng phía sau + vòng răng cưa đỏ-vàng xoay quanh logo, nổi ở cuối màn hình thay cho dòng chữ "Mạng chậm…". Không chặn bấm vào trang. */ #netCho{ position:fixed; left:50%; bottom:64px; z-index:2000; width:68px; height:68px; margin-left:-34px; display:grid; place-items:center; pointer-events:none; animation:netChoVao .25s ease-out; } #netCho[hidden]{ display:none; } #netCho > *{ grid-area:1/1; } .net-cho-loe{ width:120px; height:120px; border-radius:50%; background:repeating-conic-gradient(rgba(255,214,90,.95) 0 9deg, transparent 9deg 30deg); -webkit-mask:radial-gradient(circle, #000 0 22%, rgba(0,0,0,.85) 40%, transparent 70%); mask:radial-gradient(circle, #000 0 22%, rgba(0,0,0,.85) 40%, transparent 70%); animation:netChoLoe 1.1s ease-out infinite; } .net-cho-vong{ width:68px; height:68px; border-radius:50%; border:2px solid #15110f; background:repeating-conic-gradient(#f5b82e 0 16deg, #15110f 16deg 20deg, #c8102e 20deg 36deg, #15110f 36deg 40deg); -webkit-mask:radial-gradient(circle, transparent 0 25px, #000 26px); mask:radial-gradient(circle, transparent 0 25px, #000 26px); box-shadow:0 0 14px rgba(245,184,46,.7); animation:mvChoXoay 1s linear infinite; } #netCho img{ width:46px; height:46px; object-fit:contain; border-radius:50%; background:#15110f; border:2px solid #fff; box-shadow:0 0 0 2px #15110f, 3px 3px 0 2px rgba(21,17,15,.55); animation:netChoNhay 1.1s ease-in-out infinite; } @keyframes netChoVao{ from{ opacity:0; transform:scale(.4); } } @keyframes netChoLoe{ 0%{ opacity:.95; transform:scale(.45) rotate(0); } 70%{ opacity:.35; } 100%{ opacity:0; transform:scale(1.15) rotate(25deg); } } @keyframes netChoNhay{ 0%, 100%{ transform:scale(1); filter:brightness(1); } 15%{ transform:scale(1.08); filter:brightness(1.6) drop-shadow(0 0 6px #ffd65a); } } @media (prefers-reduced-motion: reduce){ #netCho, .net-cho-loe, .net-cho-vong, #netCho img{ animation:none; } } /* MỌI vòng quay chờ (