:root {
  --navy: #0b1f3a;
  --navy-2: #13294b;
  --navy-3: #1d3a66;
  --vang: #c9a227;
  --vang-nhat: #f3e7bf;
  --do: #8c1c2b;
  --trang: #ffffff;
  --nen: #f6f4ee;
  --chu: #1b2433;
  --chu-phu: #5b6577;
  --vien: #ddd6c4;
  --ok: #2e7d4f;
  --tb: #b7791f;
  --yeu: #b42318;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--nen);
  color: var(--chu);
}
[hidden] { display: none !important; }
h1 { font-size: 1.6rem; margin: 0 0 .5rem; color: var(--navy); }
h2 { font-size: 1.05rem; margin: 1.2rem 0 .4rem; color: var(--navy); }
.nhan { margin: 0; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--vang); font-weight: 700; }
.mo { color: var(--chu-phu); margin-top: 0; }
.phu { color: var(--chu-phu); font-size: .88rem; margin: .2rem 0 .6rem; }
.loi { color: var(--yeu); font-size: .92rem; min-height: 1em; margin: .4rem 0; white-space: pre-line; }

/* ── trang thường ── */
.trang { min-height: 100%; padding: 32px 16px; }
.the { background: var(--trang); border: 1px solid var(--vien); border-radius: 16px; padding: 28px; margin: 0 auto; box-shadow: 0 8px 30px rgba(11, 31, 58, .06); }
.the.hep { max-width: 420px; }
.the.rong { max-width: 860px; }
#man-danh-sach { max-width: 860px; margin: 0 auto; }
.dau { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin-bottom: 8px; }
.khoi { background: var(--trang); border: 1px solid var(--vien); border-radius: 14px; padding: 16px 18px; margin: 14px 0; }
.khoi > h2:first-child { margin-top: 0; }
details.khoi summary { cursor: pointer; font-weight: 600; color: var(--navy); }
.cot { display: flex; flex-direction: column; gap: 12px; }
.hang { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.hang.phai { justify-content: flex-end; }
label { display: flex; flex-direction: column; gap: 4px; font-size: .9rem; font-weight: 600; color: var(--navy); }
input, select, textarea {
  font: inherit; color: var(--chu); background: #fff;
  border: 1px solid var(--vien); border-radius: 10px; padding: 9px 11px; min-width: 0;
}
textarea { width: 100%; resize: vertical; }
.hang input, .hang select { flex: 1 1 180px; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--vang); outline-offset: 1px; }

.nut {
  font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border-radius: 10px; padding: 9px 16px; border: 1px solid var(--navy-3); background: #fff; color: var(--navy);
}
.nut:hover { background: var(--vang-nhat); }
.nut:disabled { opacity: .5; cursor: not-allowed; }
.nut.chinh { background: var(--navy); color: #fff; border-color: var(--navy); }
.nut.chinh:hover { background: var(--navy-3); }
.nut.nhe { border-color: transparent; background: transparent; color: var(--chu-phu); }
.nut.do { background: var(--do); border-color: var(--do); color: #fff; }

.ds { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.ds li { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; border: 1px solid var(--vien); border-radius: 12px; padding: 10px 12px; }
.ds li .gio { font-weight: 700; color: var(--navy); }
.ds li .tt { font-size: .8rem; padding: 2px 8px; border-radius: 99px; background: var(--vang-nhat); color: var(--navy); margin-left: 6px; }
.ds li .tt.xong { background: #e3f1e8; color: var(--ok); }

/* ── phòng học mới, tham gia bằng mã ── */
.hanh-dong { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.hanh-dong .khoi { margin: 0; }
@media (max-width: 640px) { .hanh-dong { grid-template-columns: 1fr; } }
.nut.lon { font-size: 1.05rem; padding: 12px 22px; }
.f-tham-gia .loi { flex-basis: 100%; margin: 0; }
.ngan { border: none; border-top: 1px solid var(--vien); margin: 20px 0 4px; }
.ma-lon { font: 700 1.25rem/1.4 ui-monospace, Consolas, monospace; letter-spacing: .08em; text-align: center; }
.ds li .ma { font-family: ui-monospace, Consolas, monospace; color: var(--chu-phu); font-size: .86rem; }
.huong-dan { padding-left: 1.2rem; margin: 0; display: flex; flex-direction: column; gap: 8px; font-size: .92rem; }
.the.hep > .nut-cai { margin-top: 10px; width: 100%; }
#tb-tham-gia { margin: 14px 0; }

/* ── chuẩn bị ── */
.chuan-bi { display: grid; grid-template-columns: 1.3fr 1fr; gap: 20px; margin-top: 12px; }
@media (max-width: 720px) { .chuan-bi { grid-template-columns: 1fr; } }
.xem-truoc { position: relative; background: var(--navy); border-radius: 14px; overflow: hidden; aspect-ratio: 16/9; }
.xem-truoc video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.muc-am { position: absolute; left: 12px; right: 12px; bottom: 10px; height: 6px; background: rgba(255,255,255,.25); border-radius: 3px; overflow: hidden; }
.muc-am i { display: block; height: 100%; width: 0; background: var(--vang); transition: width .08s; }

/* ── phòng học ── */
.phong { position: fixed; inset: 0; display: flex; flex-direction: column; background: var(--navy); color: #fff; }
.thanh-tren { display: flex; align-items: center; gap: 10px; padding: 10px 16px; flex-wrap: wrap; }
.ten-lop { font-weight: 700; margin-right: auto; }
.chip { font-size: .82rem; padding: 3px 10px; border-radius: 99px; background: var(--navy-2); border: 1px solid var(--navy-3); }
.chip.tot { border-color: var(--ok); } .chip.tb { border-color: var(--tb); } .chip.yeu { border-color: var(--yeu); background: #3b1218; }
.ghi { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: #ffb4b4; }
.ghi i { width: 10px; height: 10px; border-radius: 50%; background: #ff4d4d; animation: nhap 1.2s infinite; }
@keyframes nhap { 50% { opacity: .3; } }
.giua { flex: 1; display: flex; min-height: 0; }
.san-khau { flex: 1; position: relative; display: flex; flex-direction: column; gap: 10px; padding: 8px 12px; min-width: 0; min-height: 0; }
.man-chieu { flex: 1; position: relative; min-height: 0; background: #000; border-radius: 12px; overflow: hidden; }
.man-chieu video { width: 100%; height: 100%; object-fit: contain; }
.luoi { flex: 1; display: grid; gap: 10px; min-height: 0; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); align-content: center; }
.man-chieu:not([hidden]) + .luoi { flex: 0 0 auto; display: flex; overflow-x: auto; }
.man-chieu:not([hidden]) + .luoi .o { width: 200px; flex: 0 0 auto; }
.o { position: relative; background: var(--navy-2); border-radius: 12px; overflow: hidden; aspect-ratio: 16/9; border: 3px solid transparent; }
.o.noi { border-color: var(--vang); }
.o video { width: 100%; height: 100%; object-fit: cover; }
.o.toi video { transform: scaleX(-1); }
.o .chu-cai { position: absolute; inset: 0; display: grid; place-items: center; font-size: 2.2rem; font-weight: 700; color: var(--navy); }
.o .chu-cai span { width: 72px; height: 72px; border-radius: 50%; background: var(--vang); display: grid; place-items: center; }
.nhan-o { position: absolute; left: 8px; bottom: 8px; font-size: .82rem; background: rgba(0,0,0,.55); padding: 2px 8px; border-radius: 6px; }
.cho { position: absolute; left: 0; right: 0; bottom: 14px; text-align: center; color: #c7d1e3; margin: 0; pointer-events: none; }
.ben { width: 320px; background: #fff; color: var(--chu); padding: 6px 16px 16px; overflow-y: auto; }
@media (max-width: 860px) { .ben { position: absolute; right: 0; top: 52px; bottom: 76px; z-index: 5; box-shadow: -8px 0 30px rgba(0,0,0,.3); } }
.ds-moc { padding-left: 1.2rem; font-size: .9rem; }
.thanh-duoi { display: flex; justify-content: center; gap: 8px; padding: 10px; flex-wrap: wrap; background: var(--navy-2); }
.nut.tron { flex-direction: column; gap: 0; font-size: 1.2rem; min-width: 84px; padding: 6px 10px; background: var(--navy-3); color: #fff; border-color: var(--navy-3); }
.nut.tron span { font-size: .72rem; font-weight: 600; }
.nut.tron:hover { background: #28497d; }
.nut.tron[aria-pressed="false"] { background: #4a1820; border-color: #6d2430; }
#nut-man.nut.tron[aria-pressed="false"] { background: var(--navy-3); border-color: var(--navy-3); }
#nut-man.nut.tron[aria-pressed="true"] { background: var(--vang); color: var(--navy); border-color: var(--vang); }
.nut.tron.vang { background: var(--vang); color: var(--navy); border-color: var(--vang); }
.nut.tron.do { background: var(--do); border-color: var(--do); }
.thong-bao { position: absolute; left: 50%; top: 60px; transform: translateX(-50%); background: #fff; color: var(--chu); padding: 10px 16px; border-radius: 10px; box-shadow: 0 6px 24px rgba(0,0,0,.3); max-width: min(560px, 92vw); z-index: 10; white-space: pre-line; }
.thong-bao.loi { border-left: 4px solid var(--yeu); }

dialog { border: none; border-radius: 16px; padding: 22px; max-width: min(520px, 94vw); width: 100%; }
dialog::backdrop { background: rgba(11, 31, 58, .6); }
fieldset { border: 1px solid var(--vien); border-radius: 10px; padding: 8px 12px 12px; display: flex; flex-direction: column; gap: 8px; }
legend { font-weight: 600; color: var(--navy); font-size: .9rem; }
fieldset label { flex-direction: row; align-items: center; gap: 8px; font-weight: 500; color: var(--chu); }
fieldset .ghep { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: .9rem; }

/* ── sau buổi ── */
.so-lieu { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 16px 0; }
.so-lieu div { background: var(--nen); border-radius: 12px; padding: 12px; }
.so-lieu b { display: block; font-size: 1.4rem; color: var(--navy); }
.so-lieu span { font-size: .82rem; color: var(--chu-phu); }
.tien-do { position: relative; height: 26px; background: var(--nen); border-radius: 8px; overflow: hidden; margin: 8px 0; }
.tien-do i { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--vang); transition: width .3s; }
.tien-do span { position: relative; display: block; text-align: center; font-size: .85rem; line-height: 26px; font-weight: 600; color: var(--navy); }

/* ── cảm xúc, giơ tay ── */
.bang-cam-xuc { position: absolute; bottom: 84px; left: 50%; transform: translateX(-50%); display: flex; gap: 4px; background: #fff; padding: 6px 8px; border-radius: 99px; box-shadow: 0 6px 24px rgba(0,0,0,.35); z-index: 8; }
.bang-cam-xuc button { font-size: 1.5rem; background: none; border: none; cursor: pointer; padding: 4px 6px; border-radius: 10px; }
.bang-cam-xuc button:hover { background: var(--vang-nhat); }
.bay { position: absolute; bottom: 20%; font-size: 2.4rem; pointer-events: none; animation: bay 2.5s ease-out forwards; z-index: 3; }
@keyframes bay { 0% { transform: translateY(0) scale(.6); opacity: 0; } 15% { opacity: 1; transform: translateY(-10px) scale(1.1); } 100% { transform: translateY(-140%); opacity: 0; } }
.o .tay { position: absolute; top: 6px; left: 8px; font-size: 1.6rem; }
.nut.tron[aria-pressed="true"]#nut-tay { background: var(--vang); color: var(--navy); border-color: var(--vang); }
#nut-tay[aria-pressed="false"] { background: var(--navy-3); border-color: var(--navy-3); }
/* ── phân tích ── */
.nhan-xet { white-space: pre-line; background: var(--nen); border-radius: 10px; padding: 12px; font-size: .95rem; }
.nhan-xet h3 { margin: .6rem 0 .2rem; font-size: .95rem; color: var(--navy); }
table.bang { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: .9rem; }
table.bang th, table.bang td { border-bottom: 1px solid var(--vien); padding: 6px 8px; text-align: left; vertical-align: top; }
.loi-van { white-space: pre-wrap; max-height: 320px; overflow: auto; background: var(--nen); padding: 10px; border-radius: 10px; font-size: .85rem; }