/* Xưởng — kiểu dáng (kiểu cộng đồng/khoá học: thanh trên trắng, menu trái có icon, màu nhấn tím oải hương, thẻ trắng, tích xanh lá). */
:root {
  --nen: #f7f7f9; --the: #ffffff; --vien: #ececf1; --vien-dam: #d9d9e3;
  --muc: #1a1a1f; --nhe: #8a8a93; --nhe-dam: #5f5f6b;
  --tim: #8f92ff; --tim-dam: #6f72f0; --tim-nhat: #eeeeff; --tim-chu: #4f52d9;
  --den: #1f1f24;
  --la: #22c55e; --la-nhat: #e8f8ee;
  --do: #ef4444; --do-nhat: #fdecec;
  --cam: #b26a00; --cam-nhat: #fff4e0;
  --bong: 0 1px 2px rgba(20,20,40,.04), 0 2px 10px rgba(20,20,40,.04);
  --bo: 14px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 15px/1.6 Inter, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; color: var(--muc); background: var(--nen); }
a { color: var(--tim-chu); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 26px; line-height: 1.25; margin: 4px 0 12px; font-weight: 700; letter-spacing: -.01em; }
h2 { font-size: 18px; margin: 20px 0 8px; font-weight: 700; }
h3 { font-size: 16px; margin: 14px 0 6px; font-weight: 600; }
h4 { font-size: 14px; margin: 12px 0 6px; font-weight: 600; color: var(--nhe-dam); }
p { margin: 8px 0; }
code { font-size: 13px; background: #f1f1f5; padding: 1px 5px; border-radius: 4px; }
.nhe { color: var(--nhe); }
.mo { color: var(--nhe); }
.the-trang { background: var(--the); border: 1px solid var(--vien); border-radius: var(--bo); box-shadow: var(--bong); }

/* ---------- thanh trên (mỏng, chỉ tiêu đề + avatar) ---------- */
.tren { position: sticky; top: 0; z-index: 10; height: 52px; background: var(--the); border-bottom: 1px solid var(--vien); display: flex; align-items: center; gap: 12px; padding: 0 20px; }
.tren .dau-ten { font-weight: 600; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--nhe-dam); font-size: 14px; }
.tren .phai { display: flex; align-items: center; gap: 12px; }
.tren .mo-ben { display: none; border: 1px solid var(--vien); background: #fff; border-radius: 8px; padding: 4px 10px; font-size: 18px; cursor: pointer; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--tim-nhat); color: var(--tim-chu); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex: 0 0 auto; }
.avatar.nho { width: 28px; height: 28px; font-size: 12px; }
.ic { width: 18px; height: 18px; flex: 0 0 auto; }

/* ---------- menu trái + phần chính ---------- */
.khung { display: flex; min-height: calc(100vh - 52px); }
.ben { width: 228px; flex: 0 0 228px; background: var(--the); border-right: 1px solid var(--vien); padding: 18px 12px 14px; position: sticky; top: 52px; height: calc(100vh - 52px); display: flex; flex-direction: column; }
.ben .hieu { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 17px; color: var(--muc); text-decoration: none; padding: 0 8px; }
.ben .hieu .logo { width: 30px; height: 30px; border-radius: 8px; background: var(--tim-dam); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; }
.ben .ten-lop { font-size: 12px; color: var(--nhe); margin: 4px 8px 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ben-menu { flex: 1; overflow-y: auto; }
.ben .nhom { font-size: 11px; letter-spacing: .06em; color: var(--nhe); margin: 16px 10px 6px; font-weight: 700; text-transform: uppercase; }
.ben a:not(.hieu) { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; color: var(--nhe-dam); font-weight: 500; font-size: 15px; text-decoration: none; }
.ben a:not(.hieu):hover { background: #f3f3f7; color: var(--muc); }
.ben a.dang { background: var(--tim-nhat); color: var(--tim-chu); font-weight: 600; }
.ben-cuoi { border-top: 1px solid var(--vien); padding-top: 12px; margin-top: 10px; display: flex; align-items: center; gap: 10px; font-size: 14px; }
.ben-cuoi .ai b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ben-cuoi .ai a { color: var(--nhe-dam); font-size: 13px; }
.chinh-khu { flex: 1; min-width: 0; }
.than { max-width: 900px; margin: 0 auto; padding: 26px 28px 60px; }
.than.rong { max-width: 1240px; }
@media (max-width: 900px) {
  .ben { position: fixed; left: -260px; top: 52px; z-index: 20; transition: left .2s; box-shadow: 0 0 30px rgba(0,0,0,.15); }
  body.ben-mo .ben { left: 0; }
  .tren .mo-ben { display: inline-block; }
  .than { padding: 16px 14px 60px; }
  h1 { font-size: 22px; }
}
/* trang không đăng nhập */
.mot-cot { max-width: 440px; margin: 70px auto; padding: 0 16px; }
.mot-cot .the-trang { padding: 26px; }
.mot-cot .hieu { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 22px; color: var(--muc); text-decoration: none; }
.mot-cot .hieu .logo { width: 30px; height: 30px; border-radius: 8px; background: var(--tim-dam); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; }

/* ---------- nút, nhãn, cảnh báo ---------- */
button, .nut { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border: 1px solid var(--vien-dam); border-radius: 999px; background: #fff; color: var(--muc); font: inherit; font-weight: 600; font-size: 14px; text-decoration: none; cursor: pointer; }
button:hover, .nut:hover { background: #f5f5f8; text-decoration: none; }
button.chinh, .nut.chinh { background: var(--tim); border-color: var(--tim); color: #fff; }
button.chinh:hover, .nut.chinh:hover { background: var(--tim-dam); }
button.den, .nut.den { background: var(--den); border-color: var(--den); color: #fff; }
button.den:hover, .nut.den:hover { background: #000; }
button:disabled { opacity: .5; cursor: default; }
.nut.mo { color: var(--nhe); border-style: dashed; cursor: default; }
.nut.tron { width: 34px; height: 34px; padding: 0; justify-content: center; border-radius: 10px; }
.nhe-nut { border: none; background: none; color: var(--nhe); cursor: pointer; padding: 2px 6px; font: inherit; }
.the { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--vien); background: #f4f4f7; color: var(--nhe-dam); white-space: nowrap; }
.the.xong { background: var(--la-nhat); color: #15803d; border-color: #bfe9cc; }
.the.dang { background: var(--tim-nhat); color: var(--tim-chu); border-color: #d8d9ff; }
.the.khoa { background: #f4f4f7; color: var(--nhe); }
.the.moi { background: #fff; color: var(--nhe-dam); }
.the.canh-nhe { background: var(--cam-nhat); color: var(--cam); border-color: #f1dea6; }
.canh { color: var(--do); background: var(--do-nhat); border: 1px solid #f7c4c4; padding: 10px 12px; border-radius: 10px; }
.viec-tiep { background: var(--tim-nhat); border: 1px solid #d8d9ff; padding: 10px 12px; border-radius: 10px; }

/* ---------- form ---------- */
.mau label { display: block; margin: 12px 0; font-weight: 500; }
.mau input:not([type=checkbox]), .mau textarea, .mau select { display: block; width: 100%; padding: 10px 12px; font: inherit; border: 1px solid var(--vien-dam); border-radius: 10px; margin-top: 4px; background: #fff; }
.mau input[type=file] { border: none; padding: 6px 0; }
.mau input[type=checkbox] { margin-right: 6px; }
.mau input:focus, .mau textarea:focus { outline: 2px solid var(--tim); outline-offset: 0; border-color: var(--tim); }
.noi-dong { display: inline; }

/* ---------- trang khoá học: chào + tiến độ + nội dung ---------- */
.chao { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 6px 0 18px; }
.chao h1 { margin: 0; font-size: 30px; }
.o-tien-do { padding: 16px 18px; margin-bottom: 22px; }
.o-tien-do .dong-so { display: flex; justify-content: space-between; align-items: baseline; font-weight: 500; }
.o-tien-do .dong-so b { font-size: 18px; }
.thanh { position: relative; height: 8px; background: #ececf1; border-radius: 999px; overflow: hidden; margin-top: 10px; }
.thanh .day { height: 100%; background: var(--den); width: 0; transition: width .3s; border-radius: 999px; }
.thanh.la .day { background: var(--la); }
.thanh .nguong { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--tim-dam); }
.thanh.nho { width: 120px; height: 8px; display: inline-block; vertical-align: middle; margin: 0; }
.tieu-noi-dung { display: flex; justify-content: space-between; align-items: baseline; }
.tieu-noi-dung h2 { margin: 0; }
.muc-lon { margin: 12px 0; overflow: hidden; }
.muc-lon summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: #f7f7fa; cursor: pointer; font-weight: 700; }
.muc-lon summary::-webkit-details-marker { display: none; }
.muc-lon summary .mui { color: var(--nhe-dam); transition: transform .15s; }
.muc-lon[open] summary .mui { transform: rotate(90deg); }
.muc-lon summary .dem { margin-left: auto; font-weight: 500; color: var(--nhe-dam); font-size: 13px; }
.muc-lon summary .the { margin-left: 8px; }
.muc-lon .dong { display: flex; align-items: center; gap: 12px; padding: 11px 16px; border-top: 1px solid var(--vien); }
.muc-lon .dong .tich { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #c9c9d3; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; color: transparent; flex: 0 0 auto; }
.muc-lon .dong .tich.xong { background: var(--la); border-color: var(--la); color: #fff; }
.muc-lon .dong .tich.khoa { border-color: #dcdce4; color: var(--nhe); font-size: 11px; }
.muc-lon .dong .ruot { flex: 1; min-width: 0; }
.muc-lon .dong .ten { font-weight: 500; }
.muc-lon .dong .ten a { color: var(--muc); }
.muc-lon .dong .phu { font-size: 13px; color: var(--nhe); }
.muc-lon .dong .cuoi { flex: 0 0 auto; }
.muc-lon .dong .bia { width: 72px; height: 40px; border-radius: 6px; object-fit: cover; background: #ececf1; flex: 0 0 auto; }
.noi-quy summary { cursor: pointer; font-weight: 600; padding: 12px 16px; }
.noi-quy .ruot { padding: 0 16px 14px; font-size: 14px; }
.noi-quy ol { margin: 6px 0; padding-left: 20px; }
.noi-quy ol li { margin: 4px 0; }
.noi-quy .luu-y div { margin: 3px 0; color: var(--nhe-dam); }

/* ---------- trang phần (bài học) ---------- */
.bai-hoc { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 28px; align-items: start; }
@media (max-width: 1100px) { .bai-hoc { grid-template-columns: minmax(0, 1fr); } }
.nhan-buoi { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tim-chu); margin-top: 10px; }
.bai-hoc h1 { margin: 4px 0 14px; font-size: 26px; }
.tab-bai { display: flex; gap: 8px; margin: 18px 0 10px; }
.tab-nut { padding: 7px 16px; border-radius: 999px; border: 1px solid var(--vien-dam); background: #fff; font-weight: 600; font-size: 14px; color: var(--nhe-dam); cursor: pointer; }
.tab-nut.dang { background: var(--tim-nhat); color: var(--tim-chu); border-color: #c9caff; }
.ghi-chu-bg { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 13px; padding: 12px 0 8px; border-bottom: 1px solid var(--vien); margin-bottom: 8px; }
.cot-phai { position: sticky; top: 72px; overflow: hidden; }
.cot-dau { padding: 14px 16px; border-bottom: 1px solid var(--vien); background: #fafafc; }
.cot-dau .nhe { font-size: 13px; }
.cot-cuon { max-height: calc(100vh - 170px); overflow-y: auto; }
.cot-phai .nhom-buoi { padding: 6px 0; }
.cot-phai .ten-buoi { font-weight: 700; padding: 10px 16px 4px; font-size: 14px; }
.cot-phai ul { list-style: none; margin: 0; padding: 0; }
.cot-phai li { display: flex; align-items: flex-start; gap: 8px; padding: 9px 16px; font-size: 14px; border-top: 1px solid #f2f2f5; color: var(--nhe-dam); }
.cot-phai li .ic { margin-top: 2px; color: var(--nhe); }
.cot-phai li.xong .ic { color: var(--tim-dam); }
.cot-phai li.khoa { color: var(--nhe); }
.cot-phai li.dang { background: var(--tim-nhat); color: var(--tim-chu); font-weight: 600; }
.cot-phai li a { color: inherit; }
.video { position: relative; width: 100%; padding-top: 56.25%; background: #000; border-radius: var(--bo); overflow: hidden; }
.video iframe, .video #video { position: absolute; inset: 0; width: 100%; height: 100%; }
.luat { padding: 10px 14px; margin: 12px 0; font-size: 13px; color: var(--nhe-dam); background: var(--tim-nhat); border: 1px solid #d8d9ff; border-radius: 10px; }
.luat b { color: var(--tim-chu); }
.tien-do { margin: 14px 0; padding: 14px 16px; }
.tien-do.xong { background: var(--la-nhat); border-color: #bfe9cc; }
.tien-do .tieu { font-weight: 700; display: flex; align-items: center; gap: 8px; }
.tien-do .tich { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #c9c9d3; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; color: transparent; }
.tien-do.xong .tich { background: var(--la); border-color: var(--la); color: #fff; }
.tien-do p { margin: 8px 0 6px; }
.tien-do #nut-xong { margin-top: 4px; }
.khoi { padding: 4px 18px 8px; margin: 12px 0; }
.khoi table { border-collapse: collapse; width: 100%; margin: 8px 0; }
.khoi th, .khoi td { border: 1px solid var(--vien); padding: 6px 10px; text-align: left; vertical-align: top; }
.khoi th { background: #f7f7fa; }
blockquote { margin: 12px 0; padding: 10px 16px; border-left: 4px solid var(--tim); background: var(--tim-nhat); border-radius: 0 10px 10px 0; }
blockquote p { margin: 0; }
blockquote footer { color: var(--nhe-dam); font-size: 13px; margin-top: 4px; }
figure { margin: 12px 0; }
figure img { max-width: 100%; height: auto; border-radius: 10px; }
figcaption { color: var(--nhe); font-size: 13px; }
.anh-trong { background: #ececf1; color: var(--nhe); padding: 30px; text-align: center; border-radius: 10px; }
.ban-ghi { padding: 4px 18px 12px; margin: 12px 0; }
#ban-ghi { padding-left: 0; list-style: none; margin: 0; }
#ban-ghi li { padding: 5px 8px; border-radius: 6px; }
#ban-ghi li.dang { background: var(--tim-nhat); }
#ban-ghi a.moc { font-variant-numeric: tabular-nums; margin-right: 8px; font-weight: 600; display: inline-flex; align-items: center; gap: 3px; }
#ban-ghi a.moc .ic { width: 14px; height: 14px; }
#ban-ghi li { padding: 7px 8px; line-height: 1.7; }
.dieu-huong { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin: 20px 0; }
.ben-phai { position: sticky; top: 76px; align-self: start; }
.ben-phai h3 { margin: 0; padding: 12px 16px; border-bottom: 1px solid var(--vien); font-size: 15px; }
.ben-phai ul { list-style: none; margin: 0; padding: 6px 0; }
.ben-phai li { display: flex; align-items: center; gap: 10px; padding: 8px 16px; font-size: 14px; }
.ben-phai li.dang { background: var(--tim-nhat); }
.ben-phai li a { color: var(--muc); }
.ben-phai .tich { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #c9c9d3; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; color: transparent; flex: 0 0 auto; }
.ben-phai .tich.xong { background: var(--la); border-color: var(--la); color: #fff; }
.ben-phai .tich.khoa { color: var(--nhe); font-size: 10px; }

/* ---------- bài tập, lớp ---------- */
.lan-nop { padding: 14px 18px; margin: 12px 0; }
.lan-nop h3 { margin: 0 0 8px; display: flex; align-items: center; gap: 8px; }
.chu-nop { line-height: 1.65; }
.links, .tep { padding-left: 18px; }
.anh-nop { max-width: 240px; max-height: 240px; border-radius: 10px; border: 1px solid var(--vien); }
.hanh-dong { margin-top: 10px; display: flex; gap: 8px; align-items: center; }
.diem-may, .diem-nguoi-day { border-top: 1px dashed var(--vien); margin-top: 12px; padding-top: 10px; }
.diem-may.loi { color: var(--do); }
.diem-to { font-size: 18px; }
.diem-nguoi-day .diem-to b { color: #15803d; }
.checklist { list-style: none; padding: 0; margin: 8px 0; }
.checklist .tc { padding: 8px 10px; border-left: 4px solid var(--vien); margin: 6px 0; background: #fafafc; border-radius: 0 10px 10px 0; }
.checklist .tc.dat { border-color: var(--la); }
.checklist .tc.chua_dat { border-color: var(--do); }
.checklist .tc.khong_du { border-color: #f0c24a; }
.checklist .kq { display: inline-block; font-size: 12px; font-weight: 600; padding: 1px 8px; border-radius: 999px; background: #eee; margin-right: 6px; }
.tc.dat .kq { background: var(--la-nhat); color: #15803d; }
.tc.chua_dat .kq { background: var(--do-nhat); color: var(--do); }
.tc.khong_du .kq { background: var(--cam-nhat); color: var(--cam); }
.vi-sao { margin-top: 4px; }
.trich { margin: 6px 0 0; padding: 6px 10px; border-left: 3px solid #ccc; background: #fff; font-style: italic; color: #444; }
.viec, .checklist-de { padding-left: 20px; }
.binh-luan { border-top: 1px dashed var(--vien); margin-top: 12px; padding-top: 8px; }
.binh-luan ul { list-style: none; padding: 0; margin: 0; }
.binh-luan li { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid #f2f2f5; }
.binh-luan li .ruot { flex: 1; min-width: 0; }
.sua-bl { display: inline-block; }
.sua-bl summary { cursor: pointer; color: var(--tim-chu); font-size: 13px; }
.bang { border-collapse: collapse; width: 100%; background: var(--the); }
.bang th, .bang td { border-bottom: 1px solid var(--vien); padding: 9px 12px; text-align: left; vertical-align: middle; }
.bang th { background: #f7f7fa; font-size: 13px; color: var(--nhe-dam); font-weight: 600; }
.bang tr:last-child td { border-bottom: none; }
.the-bang { border: 1px solid var(--vien); border-radius: var(--bo); overflow: hidden; box-shadow: var(--bong); background: var(--the); }
.ds-phan { list-style: none; padding: 0; margin: 0; }
.dong { display: flex; align-items: center; gap: 12px; padding: 11px 16px; border-top: 1px solid var(--vien); }
.dong:first-child { border-top: none; }
.dong .bia { width: 72px; height: 40px; border-radius: 6px; object-fit: cover; background: #ececf1; flex: 0 0 auto; }
.dong .bia.trong { display: inline-flex; align-items: center; justify-content: center; color: var(--nhe); font-size: 16px; }
.dong .ruot { flex: 1; min-width: 0; }
.dong .ruot .ten { font-weight: 500; }
.dong .ruot .ten a { color: var(--muc); }
.dong .ruot .phu { font-size: 13px; color: var(--nhe); }
.dong .cuoi { flex: 0 0 auto; }
.the-buoi { padding: 0; margin: 12px 0; overflow: hidden; }
.the-buoi > h2 { margin: 0; padding: 12px 16px; background: #f7f7fa; font-size: 16px; display: flex; align-items: center; gap: 10px; }
.the-buoi > h2 a { color: var(--muc); }
.the-buoi > .nhe, .the-buoi > p { padding: 0 16px; }
.the-buoi > p.nhe { padding: 10px 16px; margin: 0; }

/* ---------- kết nối MCP ---------- */
.link-mcp { display: inline-block; max-width: 100%; overflow-wrap: anywhere; background: #fff; border: 1px solid var(--vien-dam); padding: 6px 10px; border-radius: 10px; font-size: 13px; }

/* ---------- bảng người dạy ---------- */
.cham-tay { border-top: 1px dashed var(--vien); margin-top: 12px; padding-top: 8px; }
.cham-tay input[type=number] { max-width: 120px; }
.ba-cot { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.ba-cot > div { padding: 12px 16px; }
.ba-cot ul { padding-left: 18px; margin: 4px 0; }
details summary { cursor: pointer; color: var(--tim-chu); }
.so-to { font-size: 26px; font-weight: 700; }
.o-so { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin: 12px 0 18px; }
.o-so > div { padding: 12px 16px; text-align: center; }
.o-so .nhe { font-size: 13px; }

/* ---------- tiến độ: từng bài tập ---------- */
.ds-bai { padding: 14px 18px; }
.ds-bai h3 { margin: 0; }
.ds-bai .phu-dau { font-size: 13px; color: var(--nhe); margin-bottom: 6px; }
.ds-bai .hang-bai { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--vien); }
.ds-bai .hang-bai .buoi { font-size: 13px; color: var(--tim-chu); font-weight: 600; }
.ds-bai .hang-bai .ten a { color: var(--muc); font-weight: 500; }
.ds-bai .hang-bai .han { font-size: 13px; color: var(--nhe); white-space: nowrap; }
.ds-bai .hang-bai .diem { font-weight: 700; white-space: nowrap; }
@media (max-width: 700px) { .ds-bai .hang-bai { grid-template-columns: 1fr auto; } .ds-bai .hang-bai .buoi { display: none; } }