/* Khoa hoc (assets/course-ui.js, course.js, t-course.js): dung duoc ca trong app (app.css) va trang giao vien (teacher.css). Bien mau co gia tri lui. */
.k-muted { color: var(--muted, #6B6E8A); font-size: .92em; }
.k-md { line-height: 1.6; overflow-wrap: anywhere; }
.k-md h2 { font-size: 1.22em; margin: 1.1em 0 .4em; }
.k-md h3 { font-size: 1.08em; margin: 1em 0 .35em; }
.k-md h4 { font-size: 1em; margin: .9em 0 .3em; }
.k-md p { margin: .55em 0; }
.k-md ul, .k-md ol { margin: .4em 0 .6em; padding-left: 1.3em; }
.k-md li { margin: .2em 0; }
.k-md code { background: rgba(43,45,66,.07); border-radius: 6px; padding: 1px 6px; font-size: .92em; font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; }
.k-md blockquote { margin: .6em 0; padding: 8px 12px; border-left: 4px solid var(--teal, #1A7F75); background: rgba(26,127,117,.07); border-radius: 0 10px 10px 0; }
.k-md hr { border: 0; border-top: 1px dashed var(--line, #E5DCC8); margin: 1em 0; }
.k-md a { color: var(--blue, #2563D0); }
.k-code { position: relative; background: #1F2233; color: #F4F1EA; border-radius: 12px; padding: 12px 40px 12px 14px; overflow-x: auto; white-space: pre-wrap; font-size: .9em; line-height: 1.5; }
.k-code code { background: none; padding: 0; color: inherit; }
.k-copy { position: absolute; top: 6px; right: 6px; border: 0; background: rgba(255,255,255,.12); color: #fff; border-radius: 8px; padding: 4px 6px; cursor: pointer; font-size: 14px; }
.k-tw { overflow-x: auto; margin: .6em 0; }
.k-tw table { border-collapse: collapse; width: 100%; font-size: .94em; }
.k-tw th, .k-tw td { border: 1px solid var(--line, #E5DCC8); padding: 6px 8px; text-align: left; vertical-align: top; overflow-wrap: normal; word-break: normal; min-width: 72px; }
.k-tw th { background: rgba(43,45,66,.05); }
.k-video { position: relative; padding-top: 56.25%; border-radius: 14px; overflow: hidden; background: #000; margin: 10px 0; }
.k-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* bai luyen */
.k-prac { display: flex; flex-direction: column; gap: 14px; }
.k-sec { background: var(--card, #fff); border: 1px solid var(--line, #E5DCC8); border-radius: 16px; padding: 12px 14px; }
.k-sec-h { margin-bottom: 8px; }
.k-passage { background: rgba(43,45,66,.04); border-radius: 10px; padding: 4px 12px; margin-bottom: 10px; }
.k-q { padding: 10px 0; border-top: 1px dashed var(--line, #E5DCC8); }
.k-sec-h + .k-q, .k-passage + .k-q { border-top: 0; }
.k-qt { display: flex; gap: 8px; align-items: flex-start; }
.k-qt .k-md p:first-child { margin-top: 0; }
.k-no { flex: none; min-width: 24px; height: 24px; border-radius: 50%; background: var(--teal, #1A7F75); color: #fff; font-weight: 800; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; margin-top: 2px; }
.k-opts { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.k-opts.row { flex-direction: row; flex-wrap: wrap; }
.k-opt { display: flex; gap: 8px; align-items: flex-start; border: 1.5px solid var(--line, #E5DCC8); border-radius: 12px; padding: 8px 10px; cursor: pointer; background: #fff; }
.k-opt:has(input:checked) { border-color: var(--teal, #1A7F75); background: rgba(26,127,117,.08); }
.k-opt input { margin-top: 3px; accent-color: var(--teal, #1A7F75); }
.k-opt.sm { padding: 4px 8px; }
.k-tf4 { display: flex; gap: 8px; align-items: center; justify-content: space-between; padding: 4px 0; }
.k-tf4 > span { flex: 1; }
.k-in { width: 100%; border: 1.5px solid var(--line, #E5DCC8); border-radius: 12px; padding: 9px 12px; font: inherit; background: #fff; margin-top: 6px; box-sizing: border-box; }
.k-in:focus { outline: none; border-color: var(--teal, #1A7F75); }
.k-area { resize: vertical; min-height: 70px; }
.k-hints { margin: 6px 0; padding-left: 1.2em; color: var(--muted, #6B6E8A); }
.k-words { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.k-word { border: 1.5px solid var(--line, #E5DCC8); background: #fff; border-radius: 10px; padding: 6px 10px; font: inherit; cursor: pointer; }
.k-word:disabled { opacity: .3; }
.k-built { min-height: 40px; border: 1.5px dashed var(--teal, #1A7F75); border-radius: 12px; padding: 8px 12px; background: rgba(26,127,117,.05); }
.k-link { border: 0; background: none; color: var(--blue, #2563D0); cursor: pointer; padding: 4px 0; font: inherit; font-size: .9em; }
.k-q.ok, .k-sec.ok { background: rgba(39,130,83,.07); border-radius: 12px; }
.k-q.bad, .k-sec.bad { background: rgba(200,40,77,.06); border-radius: 12px; }
.k-q.part, .k-sec.part { background: rgba(255,209,102,.18); border-radius: 12px; }
.k-q.wait, .k-sec.wait { background: rgba(37,99,208,.06); border-radius: 12px; }
.k-q.ok, .k-q.bad, .k-q.part, .k-q.wait { padding-left: 8px; padding-right: 8px; }
.k-fb { margin-top: 8px; font-size: .94em; }
.k-fb > div { margin-top: 4px; }

/* khung khoa (app) */
.k-cover { width: 56px; height: 56px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 30px; flex: none; color: #fff; }
.k-cover.lg { width: 76px; height: 76px; font-size: 42px; border-radius: 20px; }
.k-card { display: flex; gap: 12px; align-items: center; cursor: pointer; }
.k-card .grow { min-width: 0; }
.k-card b { display: block; overflow: hidden; text-overflow: ellipsis; }
.k-price { font-weight: 900; color: var(--green, #278253); white-space: nowrap; }
.k-price.free { color: var(--teal, #1A7F75); }
.k-bar { height: 8px; border-radius: 6px; background: rgba(43,45,66,.08); overflow: hidden; margin-top: 6px; }
.k-bar i { display: block; height: 100%; background: var(--teal, #1A7F75); border-radius: 6px; }
.k-ch { margin-top: 12px; }
.k-ch h4 { margin: 0 0 6px; font-size: 1em; color: var(--ink-2, #5C5F7A); }
.k-ls { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 14px; background: var(--card, #fff); border: 1px solid var(--line, #E5DCC8); margin-bottom: 6px; cursor: pointer; }
.k-ls.locked { opacity: .6; }
.k-ls .st { flex: none; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; background: rgba(43,45,66,.07); }
.k-ls.done .st { background: var(--green, #278253); color: #fff; }
.k-ls.seen .st { background: rgba(26,127,117,.18); }
.k-ls .grow { min-width: 0; }
.k-tag { display: inline-block; font-size: 12px; font-weight: 800; border-radius: 8px; padding: 1px 7px; background: rgba(26,127,117,.12); color: var(--teal-d, #12615A); margin-left: 4px; vertical-align: 1px; }
.k-tag.or { background: rgba(255,159,28,.18); color: #A35A00; }
.k-tag.red { background: rgba(200,40,77,.12); color: var(--red, #C8284D); }
.k-tag.gold { background: rgba(255,209,102,.35); color: #8A5A00; }
.k-tag.blue { background: rgba(37,99,208,.12); color: var(--blue, #2563D0); }
.k-card .k-tag { margin: 4px 4px 0 0; }
.k-ask { border-top: 1px dashed var(--line, #E5DCC8); padding: 10px 0; }
.k-ask .q { font-weight: 800; }
.k-ask .a { margin-top: 4px; }
.k-ask .t { margin-top: 6px; background: rgba(139,92,246,.08); border-radius: 10px; padding: 8px 10px; }
.k-qr { display: block; width: 240px; max-width: 100%; margin: 8px auto; border-radius: 12px; background: #fff; }
.k-pay dt { color: var(--muted, #6B6E8A); font-size: .9em; margin-top: 8px; }
.k-pay dd { margin: 0; font-weight: 800; display: flex; gap: 8px; align-items: center; justify-content: space-between; }
.k-stars { display: flex; gap: 4px; font-size: 30px; }
.k-stars button { border: 0; background: none; cursor: pointer; font-size: inherit; padding: 0; filter: grayscale(1) opacity(.4); }
.k-stars button.on { filter: none; }
.k-sticky { position: sticky; bottom: calc(10px + var(--safe-b, 0px)); z-index: 5; }