:root { --color-locked: #95a5a6; --color-unlocked: #f1c40f; --color-passed: #2ecc71; --color-failed: #e74c3c; --color-bg: #eaf6ff; --color-primary: #2d7dd2; --color-accent: #ff8c42; --radius: 18px; } * { box-sizing: border-box; } body { margin: 0; /* Font hệ thống chuẩn chỉnh, chuyên nghiệp — dùng chung cho cả trang học sinh (index.php) và trang giáo viên (giaovien.php, đặt thêm class="teacher-app" trên nhưng không cần override font vì đã dùng chung font này). Vì hầu hết input/button/textarea trong style.css đã khai báo font-family: inherit nên toàn bộ giao diện (kể cả .feedback-box) tự động dùng đúng font này. */ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background: linear-gradient(180deg, #cdeffd 0%, #eaf6ff 45%, #fff8e7 100%); color: #24324a; min-height: 100vh; } header { background: linear-gradient(90deg, var(--color-primary), #57b0ff); color: #fff; padding: 18px 24px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.12); } header h1 { margin: 0; font-size: 1.5rem; display: flex; align-items: center; gap: 10px; } .student-box { display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.18); padding: 8px 14px; border-radius: 999px; } .student-box input { border: none; border-radius: 999px; padding: 8px 14px; font-size: 1rem; font-family: inherit; outline: none; width: 160px; } nav.tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 10px 24px 0; max-width: 1200px; margin: 0 auto; border-bottom: 1px solid rgba(45,125,210,0.15); } nav.tabs button, nav.tabs .tab-link-btn { border: none; background: transparent; color: #5a6c85; padding: 12px 20px; border-radius: 10px 10px 0 0; font-weight: 700; font-size: 0.95rem; cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; gap: 7px; line-height: 1; border-bottom: 3px solid transparent; transition: background 0.15s, color 0.15s, border-color 0.15s; } nav.tabs button:hover { background: rgba(45,125,210,0.08); color: var(--color-primary); } nav.tabs button.active { background: #ffffffee; color: var(--color-primary); border-bottom-color: var(--color-primary); } nav.tabs .tab-link-btn { text-decoration: none; } main { padding: 20px 24px 60px; max-width: 1200px; margin: 0 auto; } .panel { background: #ffffffee; border-radius: var(--radius); box-shadow: 0 8px 24px rgba(30,80,150,0.12); padding: 20px; } .hidden { display: none !important; } /* --------------------------------------------------------------- LỘ TRÌNH HỌC TẬP (roadmap) — thay cho bản đồ vẽ trên canvas với các mũi tên cong. Bố cục dạng danh sách theo học kỳ, chuyên nghiệp và có tổ chức: mỗi thẻ chủ đề tự nêu rõ "cần hoàn thành trước" bằng chữ/nhãn thay vì vẽ đường nối, nên không cần mũi tên mà vẫn thể hiện đầy đủ thứ tự tiên quyết. ------------------------------------------------------------- */ .map-intro { margin-bottom: 18px; } .map-title-row { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; } .map-title { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 1.3rem; font-weight: 700; color: #0f172a; letter-spacing: -0.01em; } .map-info-btn { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid #cbd5e1; background: #f8fafc; color: #64748b; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 0.72rem; font-weight: 700; line-height: 1; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .map-info-btn:hover { background: #2563eb; border-color: #2563eb; color: #ffffff; } .map-subtitle { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 0.9rem; color: #64748b; } .map-legend { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 24px; padding-bottom: 18px; border-bottom: 1px solid #e2e8f0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } .map-legend-item { display: inline-flex; align-items: center; gap: 7px; font-size: 0.83rem; font-weight: 600; color: #475569; } .map-legend-dot { width: 9px; height: 9px; border-radius: 3px; display: inline-block; } .map-error-box { margin: 0 0 20px; padding: 14px 18px; background: #fef2f2; border: 1px solid #fecaca; border-radius: 10px; color: #b91c1c; font-weight: 600; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; text-align: left; } .roadmap { display: flex; flex-direction: column; gap: 36px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } .roadmap-term-header { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid #e2e8f0; } .roadmap-term-title { margin: 0; font-size: 1.02rem; font-weight: 700; color: #0f172a; } .roadmap-term-caption { font-size: 0.82rem; font-weight: 600; color: #64748b; } .roadmap-list { display: flex; flex-direction: column; gap: 10px; } .topic-card { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 14px 16px; border: 1px solid #e2e8f0; border-radius: 12px; background: #ffffff; cursor: pointer; font-family: inherit; transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease; } .topic-card:hover { border-color: #94a3b8; box-shadow: 0 2px 10px rgba(15, 23, 42, 0.08); transform: translateY(-1px); } .topic-card.status-locked { cursor: not-allowed; background: #f8fafc; } .topic-card.status-locked:hover { border-color: #e2e8f0; box-shadow: none; transform: none; } .topic-card-status { flex-shrink: 0; width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.05rem; font-weight: 700; color: #ffffff; } .topic-card.status-locked .topic-card-status { background: #94a3b8; } .topic-card.status-unlocked .topic-card-status { background: #2563eb; } .topic-card.status-passed .topic-card-status { background: #16a34a; } .topic-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .topic-card-name { font-size: 0.94rem; font-weight: 700; color: #0f172a; line-height: 1.4; } .topic-card.status-locked .topic-card-name { color: #64748b; } .topic-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 0.78rem; color: #64748b; font-weight: 600; } .topic-card-req-label { color: #94a3b8; font-weight: 600; } .topic-card-plain-meta { color: #64748b; } .topic-card-level-badge { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px; color: #ffffff; font-weight: 700; font-size: 0.72rem; } .topic-card-chevron { flex-shrink: 0; font-size: 1.15rem; color: #cbd5e1; } @media (max-width: 640px) { .topic-card { padding: 12px; gap: 10px; } .topic-card-status { width: 32px; height: 32px; font-size: 0.95rem; } } /* Popup giải thích "vì sao chủ đề không mở toàn bộ" — style chuyên nghiệp, trung tính, tách biệt hoàn toàn với các modal viền vàng kiểu trẻ em còn lại trong ứng dụng. */ .info-modal { position: relative; max-width: 520px; background: #ffffff; border: 1px solid #e2e8f0; border-radius: 16px; box-shadow: 0 24px 60px rgba(15, 23, 42, 0.25); padding: 32px 28px 24px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } .info-modal-close { position: absolute; top: 16px; right: 16px; width: 30px; height: 30px; border: none; background: #f1f5f9; color: #64748b; border-radius: 50%; font-size: 1.1rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s ease, color 0.15s ease; } .info-modal-close:hover { background: #e2e8f0; color: #0f172a; } .info-modal-header { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 22px; padding-right: 24px; } .info-modal-icon { flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px; background: #eff6ff; color: #2563eb; font-weight: 700; font-style: italic; font-size: 1.15rem; display: flex; align-items: center; justify-content: center; } .info-modal-title { margin: 0 0 4px; font-size: 1.1rem; font-weight: 700; color: #0f172a; letter-spacing: -0.01em; } .info-modal-subtitle { margin: 0; font-size: 0.85rem; color: #64748b; } .info-modal-list { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-direction: column; gap: 18px; } .info-modal-item { display: flex; gap: 14px; } .info-modal-item-icon { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: #f1f5f9; color: #2563eb; font-weight: 700; font-size: 0.8rem; display: flex; align-items: center; justify-content: center; } .info-modal-item-body h3 { margin: 0 0 4px; font-size: 0.92rem; font-weight: 700; color: #0f172a; } .info-modal-item-body p { margin: 0; font-size: 0.85rem; line-height: 1.55; color: #475569; } .info-modal .modal-actions { justify-content: flex-end; border-top: 1px solid #e2e8f0; padding-top: 18px; margin: 0; } @media (max-width: 480px) { .info-modal { padding: 24px 18px 18px; } .info-modal-header { padding-right: 18px; } } .toast { position: fixed; top: 20px; right: 20px; background: var(--color-primary); color: #fff; padding: 14px 20px; border-radius: 12px; box-shadow: 0 6px 18px rgba(0,0,0,0.2); font-weight: 700; z-index: 999; max-width: 320px; animation: fadein 0.25s ease-out; } @keyframes fadein { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } /* Modal */ .overlay { position: fixed; inset: 0; background: rgba(20, 40, 70, 0.55); display: flex; align-items: center; justify-content: center; z-index: 500; padding: 16px; } .modal { background: #fffef6; border-radius: 24px; max-width: 560px; width: 100%; max-height: 90vh; overflow-y: auto; padding: 26px; box-shadow: 0 20px 50px rgba(0,0,0,0.3); border: 6px solid var(--color-accent); } .modal h2 { margin-top: 0; color: var(--color-primary); font-size: 1.3rem; } .progress-pill { display: inline-block; background: var(--color-primary); color: #fff; font-weight: 700; border-radius: 999px; padding: 4px 14px; font-size: 0.9rem; margin-bottom: 12px; } .question-text { font-size: 1.25rem; font-weight: 700; margin: 12px 0 18px; line-height: 1.4; } .exercise-area.locked { pointer-events: none; opacity: 0.85; } .options-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } @media (max-width: 480px) { .options-grid { grid-template-columns: 1fr; } } .option-btn { font-family: inherit; font-size: 1.05rem; font-weight: 600; padding: 14px 12px; border: 3px solid #cfe3f7; background: #f4faff; border-radius: 14px; cursor: pointer; transition: transform 0.1s, background 0.2s, border-color 0.2s; text-align: center; } .option-btn:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--color-primary); } .option-btn:disabled { cursor: default; opacity: 0.85; } .option-btn.correct { background: #d7f7e1; border-color: var(--color-passed); } .option-btn.wrong { background: #fde0de; border-color: var(--color-failed); } /* Matching (ghép nối) exercise */ .matching-wrap { display: flex; gap: 20px; margin: 10px 0; position: relative; } /* Lớp SVG vẽ đường nối + mũi tên giữa 2 ô đã ghép, nằm dưới các ô để không che nội dung; các cột chữ được đẩy lên trên bằng z-index. */ .matching-lines { position: absolute; top: 0; left: 0; z-index: 0; pointer-events: none; overflow: visible; } .matching-col { flex: 1; display: flex; flex-direction: column; gap: 10px; position: relative; z-index: 1; } .matching-item { font-family: inherit; font-size: 1rem; font-weight: 600; padding: 12px; border: 3px solid #cfe3f7; background: #f4faff; border-radius: 12px; cursor: pointer; text-align: center; transition: transform 0.1s, background 0.2s, border-color 0.2s; } .matching-item:hover:not(:disabled) { transform: translateY(-2px); } .matching-item.active { border-color: var(--color-accent); background: #fff3e6; } .matching-item.matched { border-color: var(--color-passed); background: #e6faec; cursor: default; } .matching-check-btn { display: block; margin: 14px auto 0; } /* Canvas-based exercises (visual comparison / click-the-shape) */ .exercise-canvas { display: block; margin: 10px auto 0; max-width: 100%; border-radius: 14px; border: 3px solid #cfe3f7; background: #fff; cursor: pointer; } /* Khung bọc canvas hình học (Chủ đề 2: nhiều góc cạnh nhau...) — cho phép cuộn NGANG khi canvas rộng hơn khung hiển thị, thay vì bóp hình quá nhỏ khiến khó đọc số đo. Canvas vẫn hiện đủ, học sinh chỉ cuộn nếu cần. */ .exercise-canvas-frame { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 10px auto 0; border-radius: 14px; } .exercise-canvas-frame .exercise-canvas { margin: 0; } /* Canvas "rộng" (nhiều góc) không bị ép co lại theo max-width:100% của khung modal — giữ đúng kích thước vẽ để chữ số đo không bị nhỏ xíu. */ .exercise-canvas.is-wide { max-width: none; } .exercise-hint { text-align: center; color: #5a6c85; font-weight: 600; font-size: 0.9rem; margin-top: 8px; } .feedback-box { margin-top: 16px; padding: 14px 16px; border-radius: 14px; font-weight: 600; line-height: 1.4; display: none; /* Lời giải thích AI chi tiết trả về nhiều dòng (từng bước một dòng); pre-line giữ nguyên các dòng đó mà vẫn tự xuống dòng khi quá dài. */ white-space: pre-line; /* font-family kế thừa từ body (đã là font hệ thống chuẩn chỉnh). */ } .feedback-box.show { display: block; } .feedback-box.ok { background: #d7f7e1; color: #1c7a41; } .feedback-box.bad { background: #fde0de; color: #a3251b; } .feedback-box.loading { background: #f4faff; color: #24324a; } /* Nút "Vẫn khó hiểu? Nhờ AI giải thích chi tiết hơn" — chỉ xuất hiện khi giáo viên đã bật AI cho đúng node/lớp/học sinh/loại lượt làm bài này (xem submitAnswer()/askAiExplainMore() ở index.php). Đặt trong chính feedback-box (dưới dòng giải thích rule-based) nên kế thừa white-space: pre-line của nó, cần display:block để tự xuống dòng riêng. */ .ai-explain-btn { display: block; margin-top: 12px; font-family: inherit; font-size: 0.9rem; font-weight: 700; color: var(--color-primary); background: #fff; border: 2px solid var(--color-primary); border-radius: 999px; padding: 8px 16px; cursor: pointer; white-space: normal; transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease; } .ai-explain-btn:hover:not(:disabled) { background: var(--color-primary); color: #fff; transform: translateY(-1px); } .ai-explain-btn:disabled { opacity: 0.6; cursor: default; } /* Thanh tiến trình hiển thị khi đang chờ AI soạn lời giải thích chi tiết */ .ai-loading { display: flex; flex-direction: column; gap: 10px; } .ai-loading-text { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--color-primary); } .ai-loading-emoji { animation: ai-loading-bounce 1s ease-in-out infinite; display: inline-block; } @keyframes ai-loading-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } .ai-progress-track { width: 100%; height: 10px; border-radius: 999px; background: #e3edf7; overflow: hidden; position: relative; } .ai-progress-fill { position: absolute; top: 0; left: -40%; height: 100%; width: 40%; border-radius: 999px; background: linear-gradient(90deg, var(--color-primary), var(--color-accent)); animation: ai-progress-slide 1.1s ease-in-out infinite; } @keyframes ai-progress-slide { 0% { left: -40%; } 100% { left: 100%; } } .modal-actions { display: flex; justify-content: space-between; margin-top: 20px; gap: 10px; } .btn { font-family: inherit; border: none; border-radius: 999px; padding: 12px 22px; font-weight: 700; font-size: 1rem; cursor: pointer; } .btn-primary { background: var(--color-primary); color: #fff; } .btn-primary:disabled { background: #b7cee6; cursor: not-allowed; } .btn-ghost { background: #eee; color: #555; } .summary-box { text-align: center; padding: 10px 0; } /* Sub-node popup: shows a node's small parts as a grid of gently rotating badges instead of cluttering the canvas. */ .subnode-modal { border-color: var(--color-primary); max-width: 620px; } .subnode-modal-desc { margin: 0 0 6px; color: #5a6c85; font-weight: 600; font-size: 0.95rem; } .subnode-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 14px; margin: 14px 0 6px; } .subnode-card { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 12px 8px 14px; border-radius: 18px; cursor: pointer; background: #f4faff; border: 2px solid transparent; transition: transform 0.15s ease, background 0.2s ease, border-color 0.2s ease; } .subnode-card:hover { transform: translateY(-3px); background: #eaf4ff; border-color: rgba(45,125,210,0.35); } .subnode-card.done { background: #eafcf1; } .subnode-card.done:hover { border-color: rgba(46,204,113,0.4); } .subnode-card.synth-card { background: #fff7e0; } .subnode-card.synth-card:hover { border-color: rgba(241,196,15,0.5); } .subnode-card.synth-card.done { background: #eafcf1; } .subnode-card.locked { cursor: not-allowed; opacity: 0.55; } .subnode-card.locked:hover { transform: none; background: #f4faff; border-color: transparent; } .subnode-icon-wrap { position: relative; width: 58px; height: 58px; display: flex; align-items: center; justify-content: center; } .subnode-icon-wrap::before { content: ''; position: absolute; inset: -7px; border-radius: 50%; border: 3px dashed rgba(241,196,15,0.55); animation: subnode-spin 8s linear infinite; } .subnode-card.done .subnode-icon-wrap::before { border-color: rgba(46,204,113,0.55); animation-duration: 18s; } @keyframes subnode-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .subnode-icon { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; font-weight: 800; color: #fff; background: linear-gradient(145deg, #ffe27a, var(--color-unlocked)); box-shadow: 0 6px 14px rgba(241,196,15,0.45); } .subnode-card.done .subnode-icon { background: linear-gradient(145deg, #8cefb2, var(--color-passed)); box-shadow: 0 6px 14px rgba(46,204,113,0.45); } .subnode-name { font-size: 0.86rem; font-weight: 800; color: #24324a; } .subnode-status { font-size: 0.74rem; font-weight: 700; color: var(--color-primary); line-height: 1.3; } .subnode-card.done .subnode-status { color: #1c7a41; } .summary-box .big-emoji { font-size: 3rem; margin-bottom: 6px; } /* Practice-vs-challenge choice popup, shown when a sub-node card is clicked */ .choice-modal { max-width: 440px; } .choice-options { display: flex; flex-direction: column; gap: 12px; margin: 16px 0 4px; } .choice-option { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; border-radius: 16px; border: 2px solid transparent; background: #f4faff; cursor: pointer; text-align: left; transition: transform 0.15s ease, background 0.2s ease, border-color 0.2s ease; font-family: inherit; } .choice-option:hover { transform: translateY(-2px); } .choice-option--challenge:hover { background: #fff8e1; border-color: rgba(241,196,15,0.55); } .choice-option--practice:hover { background: #eafcf1; border-color: rgba(46,204,113,0.45); } .choice-option--relaxed:hover { background: #eafcf1; border-color: rgba(46,204,113,0.45); } .choice-option--timed:hover { background: #fdeee9; border-color: rgba(231,76,60,0.45); } .quiz-timer { display: inline-block; margin-left: 8px; padding: 2px 10px; border-radius: 999px; background: #fdeee9; color: #c0392b; font-size: 0.75rem; font-weight: 800; font-variant-numeric: tabular-nums; } .quiz-timer.danger { background: #e74c3c; color: #fff; } /* Level select cards ("Vàng / Bạc / Đồng") */ .choice-option--level { border-left: 6px solid var(--level-color, #f1c40f); justify-content: space-between; } .level-achieved-tag { margin-left: auto; background: #eafcf1; color: #1c7a41; font-weight: 800; font-size: 0.75rem; padding: 3px 10px; border-radius: 999px; white-space: nowrap; } /* Teacher: pass-level configuration editor */ .level-config-panel { margin: 26px 0; padding: 18px; border-radius: 16px; background: #f4faff; border: 2px solid #dceafc; } .level-config-panel h3 { margin: 0 0 6px; color: var(--color-primary); } .level-config-toolbar { display: flex; align-items: center; gap: 10px; margin: 10px 0 16px; } .level-config-toolbar select { font-family: inherit; font-size: 0.95rem; padding: 8px 12px; border-radius: 10px; border: 2px solid #cfe3f7; min-width: 260px; } .level-config-row { display: grid; grid-template-columns: 90px 1.4fr 1fr 1fr 1fr 40px; gap: 10px; align-items: center; background: #fff; border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; border: 2px solid #e3edf7; } .level-config-row input[type="text"], .level-config-row input[type="number"] { font-family: inherit; font-size: 0.9rem; padding: 7px 9px; border-radius: 8px; border: 2px solid #cfe3f7; width: 100%; box-sizing: border-box; } .level-config-row input[type="color"] { width: 46px; height: 34px; border-radius: 8px; border: 2px solid #cfe3f7; padding: 2px; cursor: pointer; } .level-config-row .lc-field { display: flex; flex-direction: column; gap: 3px; } .level-config-row .lc-field label { font-size: 0.68rem; font-weight: 700; color: #5a6c85; } .level-config-row .lc-remove { background: #fde0de; color: #a3251b; border: none; border-radius: 8px; width: 34px; height: 34px; cursor: pointer; font-weight: 800; } @media (max-width: 760px) { .level-config-row { grid-template-columns: 1fr 1fr; } } .practice-tally { display: flex; gap: 14px; justify-content: center; margin: 4px 0 10px; font-weight: 700; font-size: 0.9rem; } .practice-tally .tally-ok { color: #1c7a41; } .practice-tally .tally-bad { color: #c0392b; } .choice-option-icon { font-size: 1.9rem; flex: 0 0 auto; } .choice-option-text { display: flex; flex-direction: column; gap: 2px; } .choice-option-title { font-size: 1rem; font-weight: 800; color: #24324a; } .choice-option-desc { font-size: 0.8rem; font-weight: 600; color: #5a6c85; } .practice-pill { display: inline-block; margin-left: 8px; padding: 2px 10px; border-radius: 999px; background: #eafcf1; color: #1c7a41; font-size: 0.75rem; font-weight: 800; } /* Dashboard */ table { width: 100%; border-collapse: collapse; margin-bottom: 26px; font-size: 0.95rem; } table caption { text-align: left; font-weight: 700; color: var(--color-primary); font-size: 1.1rem; margin-bottom: 10px; } th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid #e3edf7; } th { background: #f0f7ff; color: var(--color-primary); } tbody tr:hover { background: #f7fbff; } td code { font-family: "SFMono-Regular", Consolas, monospace; font-size: 0.82rem; font-weight: 700; background: #eef3fa; color: #3d5a80; padding: 2px 8px; border-radius: 6px; } .col-switch { width: 110px; text-align: center; } .status-legend { display: flex; flex-wrap: wrap; gap: 10px 20px; margin: -6px 0 18px; } .status-legend .legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 0.82rem; font-weight: 700; color: #5a6c85; } .status-legend .status-dot { width: 8px; height: 8px; border-radius: 50%; } .bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .bar-label { width: 190px; font-weight: 700; flex-shrink: 0; font-size: 0.9rem; } .bar-track { flex: 1; background: #eef3fa; border-radius: 999px; height: 18px; overflow: hidden; } .bar-fill { height: 100%; border-radius: 999px; background: var(--color-accent); transition: width 0.4s; } .bar-count { width: 34px; text-align: right; font-weight: 700; } .status-tag { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 10px; border-radius: 999px; font-size: 0.8rem; font-weight: 700; line-height: 1.4; white-space: nowrap; } .status-tag .status-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; } .status-tag.status-locked { background: #eef1f6; color: #64748b; } .status-tag.status-locked .status-dot { background: #94a3b8; } .status-tag.status-unlocked { background: #fff6e0; color: #a06c00; } .status-tag.status-unlocked .status-dot { background: #f1c40f; } .status-tag.status-passed { background: #eafcf1; color: #1c7a41; } .status-tag.status-passed .status-dot { background: #2ecc71; } .status-tag.status-failed { background: #fde0de; color: #a3251b; } .status-tag.status-failed .status-dot { background: #e74c3c; } /* ---- Lịch sử của em (student history) ---- */ .history-summary { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 22px; } .history-stat-card { flex: 1 1 120px; background: linear-gradient(160deg, #f0f7ff 0%, #eaf6ff 100%); border: 2px solid #d8ecfb; border-radius: 16px; padding: 14px 10px; text-align: center; } .history-stat-num { font-size: 1.6rem; font-weight: 800; color: var(--color-primary); } .history-stat-label { font-size: 0.8rem; font-weight: 700; color: #5a6c85; margin-top: 2px; } .history-error-stats { background: #fffdf5; border: 2px solid #ffe6b3; border-radius: 16px; padding: 16px 18px; } .history-list { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; } .history-pagination { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 16px; } .history-page-btn { border: 2px solid #e3ecf7; background: #fff; color: var(--color-primary); font-weight: 800; font-size: 0.85rem; padding: 7px 16px; border-radius: 999px; cursor: pointer; transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s; } .history-page-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(30,80,150,0.12); border-color: var(--color-primary); } .history-page-btn:disabled { opacity: 0.4; cursor: not-allowed; } .history-page-info { font-size: 0.85rem; font-weight: 700; color: #5a6c85; white-space: nowrap; } .history-card { background: #fff; border: 2px solid #e3ecf7; border-radius: 16px; padding: 14px 16px; cursor: pointer; transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s; } .history-card:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(30,80,150,0.12); border-color: var(--color-primary); } .history-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; } .history-mode { font-weight: 800; color: #24324a; } .history-badge { padding: 3px 12px; border-radius: 999px; font-size: 0.78rem; font-weight: 800; white-space: nowrap; } .history-badge--pass { background: #eafcf1; color: #1c7a41; } .history-badge--fail { background: #fdeee9; color: #b3401f; } .history-badge--practice { background: #eef3fa; color: #3d5a80; } .history-node-name { font-weight: 700; color: var(--color-primary); margin-bottom: 8px; } .history-card-bottom { display: flex; gap: 16px; flex-wrap: wrap; font-size: 0.85rem; font-weight: 600; color: #5a6c85; } .history-detail-modal { max-width: 640px; } .history-detail-list { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; } .history-answer-row { border-radius: 14px; border: 2px solid #e3ecf7; padding: 12px 14px; } .history-answer--ok { border-color: #bbe8cc; background: #f3fdf6; } .history-answer--bad { border-color: #f6c9bb; background: #fff6f3; } .history-answer-head { display: flex; justify-content: space-between; font-weight: 800; margin-bottom: 6px; font-size: 0.85rem; color: #5a6c85; } .history-answer-prompt { font-weight: 700; color: #24324a; margin-bottom: 6px; } .history-answer-line { font-size: 0.9rem; margin-bottom: 3px; } .history-answer-tag { display: inline-block; margin-top: 4px; font-size: 0.8rem; font-weight: 700; color: #b3401f; background: #fdeee9; padding: 2px 10px; border-radius: 999px; } .history-answer-feedback { margin-top: 6px; font-size: 0.85rem; color: #3d5a80; font-style: italic; } /* ---- Footer: khối thông tin đề tài, tách bạch với nội dung chính bằng viền gradient trên + nền kính mờ, thay vì 1 dòng chữ đơn điệu. ---- */ .site-footer { position: relative; z-index: 1; margin-top: 48px; padding: 34px 24px 28px; text-align: center; background: linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0.85)); border-top: 3px solid transparent; border-image: linear-gradient(90deg, var(--color-primary), var(--color-accent)) 1; backdrop-filter: blur(6px); } .site-footer-inner { max-width: 720px; margin: 0 auto; } .site-footer-badge { display: inline-block; margin-bottom: 12px; padding: 5px 16px; border-radius: 999px; background: rgba(45,125,210,0.12); color: var(--color-primary); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; } .site-footer-desc { margin: 0; color: #4a5b74; font-size: 0.92rem; line-height: 1.7; } .site-footer-desc strong { color: #24324a; font-weight: 700; } .site-footer-divider { width: 52px; height: 3px; margin: 18px auto; border-radius: 999px; background: linear-gradient(90deg, var(--color-primary), var(--color-accent)); } .site-footer-meta { margin: 0; color: #8a9bb3; font-size: 0.78rem; font-weight: 500; } @media (max-width: 600px) { .site-footer { padding: 28px 18px 22px; } .site-footer-desc { font-size: 0.86rem; } } /* ---- Teacher dashboard: one tab per function ---- */ .tab-panel { margin-bottom: 24px; } .panel-desc { margin: -6px 0 16px; color: #5a6c85; font-weight: 600; font-size: 0.92rem; } /* ---- Class & student management ---- */ .classes-layout { display: grid; grid-template-columns: 260px 1fr; gap: 20px; align-items: start; } @media (max-width: 760px) { .classes-layout { grid-template-columns: 1fr; } } .classes-sidebar h3 { margin: 0 0 10px; color: var(--color-primary); font-size: 1rem; } .class-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; max-height: 480px; overflow-y: auto; } .class-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px; border-radius: 12px; border: 2px solid #e3edf7; background: #f4faff; cursor: pointer; font-family: inherit; font-weight: 700; text-align: left; transition: transform 0.1s, border-color 0.15s, background 0.15s; } .class-item:hover { transform: translateY(-1px); border-color: var(--color-primary); } .class-item.active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; } .class-item .class-item-count { font-size: 0.75rem; font-weight: 800; padding: 2px 9px; border-radius: 999px; background: rgba(45,125,210,0.12); color: var(--color-primary); flex-shrink: 0; } .class-item.active .class-item-count { background: rgba(255,255,255,0.25); color: #fff; } .inline-form { display: flex; gap: 8px; } .inline-form input[type="text"] { flex: 1; min-width: 0; font-family: inherit; font-size: 0.9rem; padding: 9px 12px; border-radius: 10px; border: 2px solid #cfe3f7; } .classes-main-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; } .classes-main-header h3 { margin: 0; color: var(--color-primary); } .classes-main-actions { display: flex; flex-wrap: wrap; gap: 8px; } .username-chip { display: inline-block; font-family: "SFMono-Regular", Consolas, monospace; font-weight: 700; background: #eef3fa; color: #3d5a80; padding: 3px 10px; border-radius: 8px; font-size: 0.88rem; } .row-actions { display: flex; flex-wrap: wrap; gap: 6px; } .row-actions button { font-family: inherit; border: none; border-radius: 8px; padding: 6px 10px; font-size: 0.8rem; font-weight: 700; cursor: pointer; background: #eef3fa; color: var(--color-primary); } .row-actions button.danger { background: #fde0de; color: #a3251b; } .row-actions button:hover { transform: translateY(-1px); } /* Nút icon con mắt "Chi tiết" trong bảng quản lý học sinh */ .btn-icon-eye { font-family: inherit; border: none; border-radius: 8px; padding: 6px 10px; font-size: 1rem; cursor: pointer; background: #eef3fa; color: var(--color-primary); line-height: 1; } .btn-icon-eye:hover { transform: translateY(-1px); background: #dceafc; } .form-field { margin-bottom: 14px; } .form-field label { display: block; font-weight: 700; font-size: 0.88rem; margin-bottom: 6px; color: #24324a; } .form-field input[type="text"], .form-field input[type="password"], .form-field textarea, .form-field select { width: 100%; box-sizing: border-box; font-family: inherit; font-size: 0.95rem; padding: 10px 12px; border-radius: 10px; border: 2px solid #cfe3f7; } .form-field textarea { resize: vertical; line-height: 1.5; min-height: 120px; } .form-field { width: 100%; } #bulkStudentNames { width: 100%; display: block; min-height: 200px; } .form-field-hint { display: block; margin-top: 5px; font-size: 0.78rem; font-weight: 600; color: #5a6c85; } .username-edit-row { display: flex; gap: 8px; align-items: center; } .username-edit-row input { flex: 1; } .password-note { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: #fffdf5; border: 2px solid #ffe6b3; font-size: 0.85rem; font-weight: 700; color: #7a5a00; } /* ---- Teacher login page ---- */ .login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; } .login-card { width: 100%; max-width: 380px; background: #ffffffee; border-radius: var(--radius); box-shadow: 0 12px 32px rgba(30,80,150,0.18); padding: 32px 28px; text-align: center; } .login-card .login-icon { font-size: 2.4rem; margin-bottom: 6px; } .login-card h1 { margin: 0 0 6px; font-size: 1.3rem; color: var(--color-primary); } .login-card p.login-sub { margin: 0 0 22px; color: #5a6c85; font-size: 0.9rem; font-weight: 600; } .login-card .form-field { text-align: left; } .login-card .btn-primary { width: 100%; padding: 12px; font-size: 1rem; margin-top: 6px; } .login-error { background: #fde0de; color: #a3251b; border-radius: 10px; padding: 10px 14px; font-weight: 700; font-size: 0.88rem; margin-bottom: 16px; text-align: left; } /* ---- Student login modal (index.php: "Đăng nhập" popup) ---- */ #welcomeText { font-weight: 700; color: #fff; } .login-modal { max-width: 380px; } .login-field { margin-bottom: 14px; } .login-field label { display: block; font-weight: 700; margin-bottom: 6px; font-size: 0.9rem; } .login-field input { width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 10px; border: 2px solid #cfe3f7; font-family: inherit; font-size: 1rem; } .login-field input:focus { outline: none; border-color: var(--color-primary); } /* ---- Toggle switch (dùng cho công tắc mở/khóa node) ---- */ .switch { position: relative; display: inline-flex; align-items: center; cursor: pointer; } .switch input { position: absolute; opacity: 0; width: 0; height: 0; } .switch-track { width: 44px; height: 24px; border-radius: 999px; background: #cbd5e1; display: inline-block; position: relative; transition: background 0.2s; flex-shrink: 0; } .switch-thumb { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.25); transition: transform 0.2s; } .switch input:checked + .switch-track { background: var(--color-primary); } .switch input:checked + .switch-track .switch-thumb { transform: translateX(20px); } .switch input:disabled + .switch-track { opacity: 0.55; cursor: not-allowed; } .switch input:focus-visible + .switch-track { outline: 2px solid var(--color-primary); outline-offset: 2px; } /* ---- Pagination ---- */ .pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 14px 0 18px; } .pagination:empty { margin: 0; } .pagination-info { font-size: 0.82rem; font-weight: 700; color: #5a6c85; } .pagination-controls { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } .page-btn { font-family: inherit; border: 1px solid #d9e6f5; background: #fff; color: #3d5a80; font-weight: 700; font-size: 0.85rem; min-width: 34px; height: 34px; padding: 0 10px; border-radius: 8px; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; } .page-btn:hover:not(:disabled) { background: rgba(45,125,210,0.08); border-color: var(--color-primary); } .page-btn.active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; } .page-btn:disabled { opacity: 0.4; cursor: not-allowed; } .page-btn.page-nav { padding: 0 14px; } .page-ellipsis { color: #94a5bc; font-weight: 700; padding: 0 4px; } .header-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .header-link, .logout-link { color: #fff; text-decoration: none; font-weight: 700; font-size: 0.9rem; background: rgba(255,255,255,0.18); padding: 8px 16px; border-radius: 999px; white-space: nowrap; border: none; font-family: inherit; cursor: pointer; display: inline-flex; align-items: center; } .header-link:hover, .logout-link:hover { background: rgba(255,255,255,0.3); } /* ---- Tab "Lỗi thường gặp": bộ lọc theo lớp / học sinh ---- */ .error-filter-bar { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 18px; background: #f4faff; border: 2px solid #dceafc; border-radius: 16px; padding: 14px 16px; margin-bottom: 16px; } .error-filter-group { display: flex; flex-direction: column; gap: 8px; min-width: 220px; flex: 1 1 260px; } .error-filter-label { font-weight: 800; font-size: 0.85rem; color: var(--color-primary); } .filter-chip-list { display: flex; flex-wrap: wrap; gap: 8px; } .filter-chip { font-family: inherit; font-size: 0.85rem; font-weight: 700; color: #24324a; background: #fff; border: 2px solid #cfe3f7; border-radius: 999px; padding: 6px 14px; cursor: pointer; transition: transform 0.1s, background 0.15s, border-color 0.15s, color 0.15s; } .filter-chip:hover { transform: translateY(-1px); border-color: var(--color-primary); } .filter-chip.active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; } .filter-chip-count { display: inline-block; margin-left: 4px; font-size: 0.72rem; font-weight: 800; opacity: 0.8; } /* Khung chọn nhiều Node/Lớp/Học sinh trong "Tùy chỉnh nâng cao theo Node -> Lớp -> Học sinh" (giaovien.php) — giới hạn chiều cao + cho cuộn dọc vì danh sách node/học sinh có thể rất dài. */ .ai-rule-chip-list { max-height: 160px; overflow-y: auto; padding: 10px; background: #f7fafd; border: 1px solid #e1ecf7; border-radius: 12px; } .filter-select { font-family: inherit; font-size: 0.85rem; font-weight: 700; color: #24324a; background: #fff; border: 2px solid #cfe3f7; border-radius: 999px; padding: 6px 14px; cursor: pointer; } .filter-select:hover { border-color: var(--color-primary); } /* Thanh lỗi giờ có thể bấm được để xem chi tiết theo học sinh. */ .bar-track { cursor: pointer; transition: box-shadow 0.15s; } .bar-track:hover, .bar-track:focus-visible { box-shadow: 0 0 0 3px rgba(45,125,210,0.25); outline: none; } /* ---- Chi tiết % số câu mỗi học sinh làm sai vì 1 dạng lỗi (popup) ---- */ /* Hiển thị dạng popup (overlay + modal) thay vì bảng nằm cố định trong trang, để giáo viên xem được ngay mà không cần kéo trang xuống dù danh sách lỗi phía trên dài bao nhiêu. */ .error-breakdown-modal { max-width: 900px; width: 96vw; } .error-breakdown-modal .subnode-modal-desc { margin-bottom: 14px; } .error-chart-scroll { overflow-x: auto; overflow-y: hidden; padding-bottom: 10px; } .error-chart-row { /* Căn các cột theo MÉP TRÊN (không phải flex-end/mép dưới): mỗi cột có chiều cao khác nhau tùy tên học sinh xuống 1 hay 2 dòng, nên nếu căn theo mép dưới thì cột có tên ngắn (1 dòng) sẽ bị đẩy tụt xuống để bằng mép dưới với cột tên dài (2 dòng), kéo theo cả khung cột (.error-chart-track) của nó lệch xuống thấp hơn — khiến các cột trông như có "gốc" (đáy cột) không thẳng hàng. Căn theo mép trên + .error-chart-value có min-height cố định giúp mọi khung cột luôn bắt đầu ở cùng 1 vị trí, nhờ đó đáy cột (gốc biểu đồ) luôn bằng nhau bất kể tên học sinh dài ngắn ra sao. */ display: inline-flex; align-items: flex-start; gap: 18px; min-width: 100%; padding: 0 4px; } .error-chart-col { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 74px; flex-shrink: 0; } .error-chart-value { font-size: 0.78rem; font-weight: 800; color: #a3251b; min-height: 1.2em; display: flex; align-items: flex-end; } .error-chart-track { width: 36px; height: 160px; background: #eef3fa; border-radius: 8px 8px 3px 3px; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; } .error-chart-bar { width: 100%; background: linear-gradient(180deg, #ff8c78, var(--color-failed)); border-radius: 6px 6px 0 0; transition: height 0.35s ease; } .error-chart-count { font-size: 0.72rem; font-weight: 700; color: #5a6c85; white-space: nowrap; } .error-chart-name { font-size: 0.78rem; font-weight: 800; color: #24324a; text-align: center; line-height: 1.25; word-break: break-word; } /* ---- Tab "Thử thách" (challenges) ---- */ .challenge-modal { max-width: 720px; } .challenge-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .challenge-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; margin: 4px 0 14px; } @media (max-width: 620px) { .challenge-grid-2, .challenge-grid-3 { grid-template-columns: 1fr; } } .challenge-type-options { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; } .challenge-type-options .choice-option { width: 100%; } .choice-option input[type="radio"] { width: 18px; height: 18px; accent-color: var(--color-primary); flex-shrink: 0; margin: 0; } .choice-option.selected { border-color: var(--color-primary); background: #eaf4ff; } /* ---- Tab "🤖 AI (Grok)" + nút "Phân tích bằng AI" ---- */ .ai-settings-form .lc-field { display: flex; flex-direction: column; gap: 6px; } .ai-settings-form .lc-field label { font-size: 0.85rem; font-weight: 700; color: #5a6c85; } .ai-settings-form .lc-field input[type="text"], .ai-settings-form .lc-field input[type="password"] { font-family: inherit; font-size: 0.98rem; padding: 12px 14px; border-radius: 10px; border: 2px solid #cfe3f7; width: 100%; box-sizing: border-box; background: #fff; } .ai-settings-form .lc-field input[type="text"]:focus, .ai-settings-form .lc-field input[type="password"]:focus { outline: none; border-color: var(--color-primary); } .ai-toggle-row { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; cursor: pointer; font-weight: 600; font-size: 0.92rem; line-height: 1.4; } .ai-toggle-row input[type="checkbox"] { width: 20px; height: 20px; margin-top: 1px; accent-color: var(--color-primary); flex-shrink: 0; cursor: pointer; } .ai-insight-box { margin-top: 16px; padding-top: 14px; border-top: 2px dashed #dceafc; } .ai-insight-meta { margin: 12px 0 0; font-size: 0.85rem; font-weight: 700; color: var(--color-primary); line-height: 1.6; } .ai-insight-text { margin-top: 8px; padding: 16px 18px; border-radius: 14px; background: #f4faff; border: 2px solid #cfe3f7; font-weight: 600; line-height: 1.65; max-height: 640px; overflow-y: auto; } .ai-insight-text p { margin: 0 0 14px; } .ai-insight-text p:last-child { margin-bottom: 0; } .ai-insight-text strong { display: block; margin: 4px 0 6px; color: var(--color-primary); font-size: 1.02rem; } /* Popup "👨‍👩‍👧 Hướng dẫn dành cho phụ huynh" — dựa trên .info-modal (chuyên nghiệp, trung tính) nhưng rộng hơn và tông ấm hơn (hồng cam) để phân biệt với các popup thông tin/kỹ thuật khác, phù hợp nội dung gửi phụ huynh. */ .parent-guidance-modal { max-width: 680px; } .parent-guidance-modal .info-modal-icon { background: #fff1f2; color: #e11d48; } .parent-guidance-modal .info-modal-title { color: #be123c; } .parent-guidance-text { max-height: 60vh; } .parent-guidance-text strong { color: #be123c; } /* "Mức áp dụng mặc định" — 3 lựa chọn dạng thẻ giống choice-option, chọn bằng radio ẩn để vẫn submit được như 1 form field bình thường. */ .ai-level-options { display: flex; flex-direction: column; gap: 10px; } .ai-level-option { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: 14px; border: 2px solid #e3edf7; background: #f9fcff; cursor: pointer; transition: transform 0.12s ease, background 0.15s ease, border-color 0.15s ease; } .ai-level-option:hover { transform: translateY(-1px); border-color: #cfe3f7; } .ai-level-option input[type="radio"] { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--color-primary); cursor: pointer; flex-shrink: 0; } .ai-level-option-icon { font-size: 1.3rem; flex-shrink: 0; } .ai-level-option-text { display: flex; flex-direction: column; gap: 2px; } .ai-level-option-title { font-weight: 800; color: #24324a; font-size: 0.95rem; } .ai-level-option-desc { font-size: 0.8rem; font-weight: 600; color: #5a6c85; } .ai-level-option.active { border-color: var(--color-primary); background: #eaf4ff; } .ai-level-option[data-level="detailed"].active { border-color: #2ecc71; background: #eafcf1; } .ai-level-option[data-level="off"].active { border-color: #95a5a6; background: #f1f3f5; } /* Form thêm 1 quy tắc tùy chỉnh nâng cao (Node -> Lớp -> Học sinh -> Loại -> Mức độ). 4 ô chọn Node/Lớp/Học sinh/Loại đều cao ~140px (chip list/ checkbox list) nên xếp hàng riêng (align-items: start); với đúng 3 cột, hàng 1 chứa Node/Lớp/Học sinh, hàng 2 chứa Loại/Mức độ/nút "Thêm quy tắc" theo grid auto-flow. */ .ai-rule-form { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 10px; align-items: start; } .ai-rule-form select { font-family: inherit; font-size: 0.9rem; padding: 9px 10px; border-radius: 10px; border: 2px solid #cfe3f7; width: 100%; box-sizing: border-box; background: #fff; } .ai-rule-form button { white-space: nowrap; } @media (max-width: 900px) { .ai-rule-form { grid-template-columns: 1fr; } } /* Danh sách chọn nhiều (checkbox) trong "Tùy chỉnh nâng cao" (Node / Lớp / Học sinh / Loại): TRƯỚC ĐÂY Node/Lớp/Học sinh dùng