/* NQK – nộp bài tập: giao diện chung cho /nop-bai, /giao-vien, /xem */
:root { --bg:#f4f6fb; --card:#fff; --text:#1d2433; --muted:#64708a; --line:#e2e7f1; --brand:#2456c8; --brand2:#e8efff; --ok:#16803c; --okbg:#e5f6ec; --bad:#c62828; --badbg:#fdeaea; --warn:#b26a00; --warnbg:#fff3df; --r:12px; --shadow:0 1px 3px rgba(20,30,60,.08), 0 6px 20px rgba(20,30,60,.05); }
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--bg); color:var(--text); font:16px/1.5 "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
a { color:var(--brand); }
h1 { font-size:22px; margin:0 0 4px; } h2 { font-size:18px; margin:0 0 10px; } h3 { font-size:16px; margin:0 0 8px; }
.wrap { max-width:1180px; margin:0 auto; padding:16px 14px 60px; }
.wrap.wide { max-width:1180px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); padding:16px; margin:0 0 14px; }
.muted { color:var(--muted); } .small { font-size:13px; } .center { text-align:center; } .right { text-align:right; }
.row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; } .row.sp { justify-content:space-between; } .grow { flex:1 1 auto; }
.topbar { background:#fff; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20; }
.topbar .in { max-width:1100px; margin:0 auto; padding:10px 14px; display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.brand { font-weight:700; color:var(--brand); font-size:18px; text-decoration:none; }
.nav { display:flex; gap:4px; flex-wrap:wrap; } .nav a { padding:7px 12px; border-radius:8px; text-decoration:none; color:var(--text); font-size:15px; } .nav a.on { background:var(--brand2); color:var(--brand); font-weight:600; }
.btn { appearance:none; border:1px solid var(--line); background:#fff; color:var(--text); padding:9px 16px; border-radius:10px; font:inherit; font-weight:600; cursor:pointer; text-decoration:none; display:inline-block; line-height:1.2; }
.btn:hover { border-color:#c4cde0; } .btn:disabled { opacity:.5; cursor:not-allowed; }
.btn.pri { background:var(--brand); border-color:var(--brand); color:#fff; } .btn.pri:hover { background:#1c47a8; }
.btn.bad { color:var(--bad); } .btn.sm { padding:6px 11px; font-size:14px; } .btn.block { display:block; width:100%; }
input[type=text], input[type=tel], input[type=number], input[type=datetime-local], input[type=date], input[type=search], textarea, select { font:inherit; padding:10px 12px; border:1px solid #cfd7e6; border-radius:10px; background:#fff; color:var(--text); width:100%; }
textarea { min-height:90px; resize:vertical; } input:focus, textarea:focus, select:focus { outline:2px solid #9db7f5; border-color:#7c9cf0; }
label.f { display:block; font-weight:600; font-size:14px; margin:10px 0 4px; } label.chk { display:flex; gap:8px; align-items:center; font-weight:400; font-size:15px; cursor:pointer; } label.chk input { width:18px; height:18px; }
.chip { display:inline-block; padding:2px 10px; border-radius:99px; font-size:13px; font-weight:600; background:#eef1f7; color:var(--muted); white-space:nowrap; }
.chip.ok { background:var(--okbg); color:var(--ok); } .chip.bad { background:var(--badbg); color:var(--bad); } .chip.warn { background:var(--warnbg); color:var(--warn); } .chip.blue { background:var(--brand2); color:var(--brand); }
table.t { width:100%; border-collapse:collapse; font-size:15px; } table.t th, table.t td { text-align:left; padding:9px 10px; border-bottom:1px solid var(--line); vertical-align:middle; } table.t th { font-size:13px; color:var(--muted); font-weight:600; background:#f8f9fd; }
.tw { overflow-x:auto; } td.num, th.num { text-align:right; white-space:nowrap; }
.err { background:var(--badbg); color:var(--bad); padding:10px 12px; border-radius:10px; margin:10px 0; } .okmsg { background:var(--okbg); color:var(--ok); padding:10px 12px; border-radius:10px; margin:10px 0; }
.toast { position:fixed; left:50%; bottom:24px; transform:translateX(-50%); background:#1d2433; color:#fff; padding:10px 18px; border-radius:10px; z-index:200; box-shadow:var(--shadow); max-width:90vw; }
.modal-bg { position:fixed; inset:0; background:rgba(20,28,48,.45); z-index:100; display:flex; align-items:flex-start; justify-content:center; overflow:auto; padding:24px 12px; }
.modal { background:#fff; border-radius:14px; width:100%; max-width:640px; padding:18px; box-shadow:0 20px 60px rgba(0,0,0,.25); } .modal.wide { max-width:900px; }
.stat { display:flex; gap:12px; flex-wrap:wrap; } .stat .s { flex:1 1 120px; background:#f6f8fd; border-radius:12px; padding:12px 14px; } .stat .s b { display:block; font-size:22px; } .stat .s span { font-size:13px; color:var(--muted); }
.bar { height:8px; background:#e8ecf5; border-radius:99px; overflow:hidden; } .bar i { display:block; height:100%; background:var(--brand); }
.list-item { display:flex; gap:12px; align-items:center; justify-content:space-between; padding:13px 14px; border:1px solid var(--line); border-radius:12px; background:#fff; margin:0 0 10px; cursor:pointer; }
.list-item:hover { border-color:#b7c6ea; } .list-item.off { opacity:.62; cursor:default; } .list-item .tt { font-weight:600; word-break:break-word; }
/* bài làm */
.part { margin-bottom:22px; } .part h2 { background:var(--brand2); color:var(--brand); padding:8px 12px; border-radius:10px; font-size:16px; }
.q { padding:10px 0; border-bottom:1px dashed var(--line); } .q:last-child { border-bottom:0; }
.q .qn { font-weight:700; margin-bottom:6px; }
.tf { display:grid; grid-template-columns:28px 1fr 1fr; gap:6px; align-items:center; margin:5px 0; max-width:340px; }
.opt { padding:9px 6px; text-align:center; border:1.5px solid #cfd7e6; border-radius:10px; background:#fff; cursor:pointer; font-weight:600; user-select:none; }
.opt.sel { background:var(--brand); color:#fff; border-color:var(--brand); }
.opt.right { background:var(--okbg); border-color:#7bc99a; color:var(--ok); } .opt.wrong { background:var(--badbg); border-color:#e59a9a; color:var(--bad); } .opt.key { outline:2.5px solid #7bc99a; }
.abcd { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; max-width:380px; }
.p3row { display:flex; gap:10px; align-items:center; padding:7px 0; border-bottom:1px dashed var(--line); } .p3row .qn { width:62px; font-weight:700; flex:none; }
.p2grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:10px; } .p2grid .qn { font-weight:700; font-size:14px; margin-bottom:3px; }
.sticky { position:sticky; bottom:0; background:rgba(255,255,255,.96); border-top:1px solid var(--line); padding:10px 14px; margin:0 -14px; display:flex; gap:10px; align-items:center; justify-content:space-between; flex-wrap:wrap; z-index:15; }
.mark { font-weight:700; } .mark.ok { color:var(--ok); } .mark.bad { color:var(--bad); }
/* khung xem đề/lời giải: không tải, không chọn */
.vw { position:relative; margin:10px 0; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
.vw img { width:100%; display:block; margin:0 0 8px; border:1px solid var(--line); border-radius:8px; background:#fff; pointer-events:none; -webkit-user-drag:none; user-drag:none; }
.vw .wm { position:absolute; inset:0; z-index:3; background-repeat:repeat; opacity:.55; }
@media print { .vw, .nonprint { display:none !important; } }
/* thẻ ảnh trong kho học liệu */
.thumbs { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; } .thumbs .th { border:1px solid var(--line); border-radius:10px; overflow:hidden; background:#fff; } .thumbs img { width:100%; display:block; } .thumbs .ac { display:flex; gap:4px; padding:6px; justify-content:space-between; font-size:13px; }
.drop { border:2px dashed #b9c6e6; border-radius:12px; padding:18px; text-align:center; color:var(--muted); background:#fafbff; }
.kv { display:grid; grid-template-columns:150px 1fr; gap:6px 12px; } @media (max-width:560px){ .kv { grid-template-columns:1fr; } .wrap { padding:12px 10px 60px; } }
.tag { font-size:12px; background:#eef1f7; padding:1px 8px; border-radius:99px; margin-right:4px; }
.hidden { display:none !important; }
/* chế độ tối: dùng chung nút Sáng/Tối với các trang sách (lựa chọn lưu ở localStorage "theme") */
:root[data-theme="dark"] { color-scheme:dark; --bg:#12161f; --card:#1a202c; --text:#e6eaf2; --muted:#9aa5ba; --line:#2b3446; --brand:#7fb0ff; --brand2:#1d2f52; --ok:#6bd99a; --okbg:#12301f; --bad:#ff9a9a; --badbg:#3a1a1a; --warn:#f2bb60; --warnbg:#33260f; --shadow:0 1px 3px rgba(0,0,0,.5), 0 6px 20px rgba(0,0,0,.3); }
[data-theme="dark"] .topbar, [data-theme="dark"] .modal, [data-theme="dark"] .list-item, [data-theme="dark"] .thumbs .th { background:var(--card); }
[data-theme="dark"] .btn, [data-theme="dark"] .opt, [data-theme="dark"] input[type=text], [data-theme="dark"] input[type=tel], [data-theme="dark"] input[type=number], [data-theme="dark"] input[type=datetime-local], [data-theme="dark"] input[type=date], [data-theme="dark"] input[type=search], [data-theme="dark"] textarea, [data-theme="dark"] select { background:#202838; border-color:#3a4560; color:var(--text); }
[data-theme="dark"] .btn:hover, [data-theme="dark"] .list-item:hover { border-color:#5d7cc0; }
[data-theme="dark"] .btn.pri, [data-theme="dark"] .opt.sel { background:#2d5fc4; border-color:#2d5fc4; color:#fff; }
[data-theme="dark"] .opt.right { background:var(--okbg); color:var(--ok); border-color:#3f8a5f; } [data-theme="dark"] .opt.wrong { background:var(--badbg); color:var(--bad); border-color:#a55555; }
[data-theme="dark"] .chip, [data-theme="dark"] .tag { background:#263044; color:var(--muted); }
[data-theme="dark"] .chip.ok { background:var(--okbg); color:var(--ok); } [data-theme="dark"] .chip.bad { background:var(--badbg); color:var(--bad); } [data-theme="dark"] .chip.warn { background:var(--warnbg); color:var(--warn); } [data-theme="dark"] .chip.blue { background:var(--brand2); color:var(--brand); }
[data-theme="dark"] table.t th, [data-theme="dark"] .stat .s, [data-theme="dark"] .drop { background:#202838; }
[data-theme="dark"] .bar { background:#2b3446; } [data-theme="dark"] .modal-bg { background:rgba(0,0,0,.6); }
[data-theme="dark"] .fold { background:#1f2a40; } [data-theme="dark"] .fold:hover { background:#26344f; }
[data-theme="dark"] .sticky { background:rgba(26,32,44,.96); } [data-theme="dark"] .toast { background:#e6eaf2; color:#1d2433; }
[data-theme="dark"] .part h2 { background:var(--brand2); color:var(--brand); }
/* tiêu đề chương bấm để mở/thu gọn */
.fold { display:flex; gap:8px; align-items:center; padding:9px 12px; margin:8px 0 6px; background:#eef2fb; border-radius:10px; cursor:pointer; user-select:none; }
.fold:hover { background:#e3eaf9; } .fold .arr { width:14px; color:var(--brand); font-size:13px; }