/* Giao diện tươi sáng cho học sinh tiểu học */
:root {
  --nen-1: #bfe9ff;
  --nen-2: #fff3c4;
  --the: #ffffff;
  --chu: #2b2d42;
  --chu-phu: #6b7280;
  --vien: #e3e8f2;
  --chinh: #7c4dff;        /* tím */
  --chinh-dam: #5b2fd6;
  --chinh-nhat: #efe8ff;
  --cam: #ff8a00;
  --cam-dam: #d96f00;
  --hong: #ff4f9a;
  --dung: #22c55e;
  --dung-dam: #15803d;
  --dung-nhat: #dcfce7;
  --sai: #ff4d4f;
  --sai-dam: #c81e1e;
  --sai-nhat: #ffe1e1;
  --vang: #ffb800;
  --vang-nhat: #fff4cc;
  /* 4 màu đáp án */
  --a: #ff5c6c;  --a-dam: #d63447;
  --b: #2f9bff;  --b-dam: #1a72c9;
  --c: #ffb703;  --c-dam: #d18f00;
  --d: #2fcf7a;  --d-dam: #1e9d5a;
  --bong: 0 8px 0 rgba(43, 45, 66, .08), 0 14px 30px rgba(43, 45, 66, .10);
  --font-tieu-de: "Baloo 2", "Nunito", system-ui, sans-serif;
  --font-chu: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-chu);
  font-size: 17px;
  color: var(--chu);
  line-height: 1.5;
  background-color: var(--nen-1);
  background-image:
    radial-gradient(rgba(255, 255, 255, .65) 2px, transparent 2.5px),
    linear-gradient(180deg, var(--nen-1) 0%, #d9f2ff 45%, var(--nen-2) 100%);
  background-size: 26px 26px, 100% 100%;
  background-attachment: fixed;
}

/* Mây và mặt trời trang trí */
body::before, body::after {
  content: "";
  position: fixed;
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
}
body::before {
  top: -70px; right: -70px; width: 220px; height: 220px;
  background: radial-gradient(circle, #ffe066 0 55%, rgba(255, 224, 102, .35) 56% 70%, transparent 71%);
  animation: xoay 30s linear infinite;
}
body::after {
  bottom: 40px; left: -60px; width: 260px; height: 90px;
  background: #fff; opacity: .8;
  box-shadow: 120px -30px 0 10px #fff, 220px 10px 0 -10px #fff;
  animation: troi 18s ease-in-out infinite alternate;
}
@keyframes xoay { to { transform: rotate(360deg); } }
@keyframes troi { to { transform: translateX(60px); } }

.khung { max-width: 800px; margin: 0 auto; padding: 16px; }
.khung-rong { max-width: 1100px; }

.the {
  background: var(--the);
  border-radius: 26px;
  box-shadow: var(--bong);
  padding: 26px;
  margin-bottom: 18px;
  border: 3px solid #fff;
  animation: bat-len .45s cubic-bezier(.2, 1.4, .4, 1) both;
}
@keyframes bat-len { from { transform: translateY(16px) scale(.97); opacity: 0; } }

h1, h2 { font-family: var(--font-tieu-de); line-height: 1.2; }
h1 { font-size: 2rem; margin: 0 0 8px; color: var(--chinh); }
h2 { font-size: 1.35rem; margin: 0 0 12px; color: var(--chinh-dam); }
.phu { color: var(--chu-phu); }
.an { display: none !important; }
a { color: var(--chinh); }

/* Linh vật */
.linh-vat {
  font-size: 4.2rem; line-height: 1; text-align: center; margin-bottom: 6px;
  animation: nhun 1.6s ease-in-out infinite;
  filter: drop-shadow(0 6px 0 rgba(0, 0, 0, .08));
}
@keyframes nhun { 50% { transform: translateY(-10px) rotate(-6deg); } }
.tieu-de-giua { text-align: center; }

/* ---------- Form ---------- */
label { display: block; font-weight: 800; margin: 16px 0 6px; color: var(--chinh-dam); }
input[type=text], input[type=password], input[type=number], input[type=email], input[type=tel], input[type=date], select {
  width: 100%;
  padding: 14px 16px;
  font-size: 1.1rem;
  font-family: inherit;
  font-weight: 700;
  color: var(--chu);
  border: 3px solid var(--vien);
  border-radius: 16px;
  background: #fbfcff;
  transition: border-color .2s, box-shadow .2s;
}
input:focus, select:focus { outline: none; border-color: var(--chinh); box-shadow: 0 0 0 5px var(--chinh-nhat); }
input::placeholder { color: #b5bccb; font-weight: 600; }

/* Nút bấm nổi kiểu 3D */
.nut {
  display: inline-block;
  padding: 13px 22px;
  font-family: var(--font-tieu-de);
  font-size: 1.15rem;
  font-weight: 700;
  border: 0;
  border-radius: 16px;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  background: var(--chinh);
  color: #fff;
  box-shadow: 0 6px 0 var(--chinh-dam);
  transition: transform .08s, box-shadow .08s, filter .2s;
}
.nut:hover { filter: brightness(1.08); }
.nut:active { transform: translateY(5px); box-shadow: 0 1px 0 var(--chinh-dam); }
.nut:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.nut-phu { background: var(--chinh-nhat); color: var(--chinh-dam); box-shadow: 0 5px 0 #d5c6ff; }
.nut-phu:active { box-shadow: 0 1px 0 #d5c6ff; }
.nut-do { background: var(--cam); box-shadow: 0 6px 0 var(--cam-dam); }
.nut-do:active { box-shadow: 0 1px 0 var(--cam-dam); }
.nut-nho { padding: 7px 14px; font-size: .95rem; border-radius: 12px; }
.nut-full { width: 100%; margin-top: 22px; font-size: 1.3rem; padding: 15px; }

.loi {
  background: var(--sai-nhat); color: var(--sai-dam); font-weight: 700;
  padding: 12px 16px; border-radius: 14px; margin-top: 12px;
}
.thong-tin { display: flex; gap: 12px; flex-wrap: wrap; margin: 18px 0; }
.thong-tin div {
  flex: 1; min-width: 130px; border-radius: 20px; padding: 14px; text-align: center;
  font-weight: 700; color: #fff;
}
.thong-tin div:nth-child(1) { background: linear-gradient(135deg, #ff7eb3, var(--hong)); }
.thong-tin div:nth-child(2) { background: linear-gradient(135deg, #5cc8ff, var(--b)); }
.thong-tin div:nth-child(3) { background: linear-gradient(135deg, #5ee8a0, var(--d)); }
.thong-tin b { display: block; font-family: var(--font-tieu-de); font-size: 2rem; line-height: 1.1; color: #fff; }

/* ---------- Làm bài ---------- */
.thanh-tren {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: linear-gradient(90deg, var(--chinh), #a35bff);
  color: #fff; box-shadow: 0 6px 0 var(--chinh-dam);
  padding: 12px 18px; border-radius: 0 0 22px 22px; margin: -16px -16px 18px;
}
.thanh-tren .phu { color: #e9ddff; }
.dong-ho {
  font-family: var(--font-tieu-de); font-variant-numeric: tabular-nums; font-weight: 800; font-size: 1.3rem;
  padding: 4px 16px; border-radius: 99px; background: var(--vang); color: #5a3d00;
  box-shadow: 0 4px 0 #d49a00;
}
.dong-ho.sap-het { background: var(--sai); color: #fff; box-shadow: 0 4px 0 var(--sai-dam); animation: nhap-nhay .8s infinite; }
@keyframes nhap-nhay { 50% { transform: scale(1.1); } }

.tien-do {
  height: 16px; background: #fff; border-radius: 99px; overflow: hidden; margin-bottom: 18px;
  border: 3px solid #fff; box-shadow: 0 4px 0 rgba(0, 0, 0, .06);
}
.tien-do div {
  height: 100%; border-radius: 99px; transition: width .4s;
  background: repeating-linear-gradient(45deg, var(--d) 0 12px, #5ee8a0 12px 24px);
  background-size: 34px 34px;
  animation: soc 1s linear infinite;
}
@keyframes soc { to { background-position: 34px 0; } }

.nhan-chu-de {
  display: inline-block; font-size: .9rem; font-weight: 800;
  background: var(--vang-nhat); color: #9a6a00; border: 2px solid #ffe08a;
  padding: 3px 12px; border-radius: 99px; margin-bottom: 10px;
}
.so-cau { color: var(--chinh); font-family: var(--font-tieu-de); font-weight: 700; font-size: 1.1rem; margin-bottom: 4px; }
.noi-dung-cau { font-family: var(--font-tieu-de); font-size: 1.45rem; font-weight: 700; margin: 0 0 18px; line-height: 1.35; }

/* 4 ô đáp án nhiều màu */
.lua-chon { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.lua-chon button {
  position: relative;
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 76px;
  text-align: left; font-family: inherit; font-size: 1.08rem; font-weight: 800; line-height: 1.3;
  padding: 14px 16px; border: 0; border-radius: 20px;
  color: #fff; cursor: pointer;
  transition: transform .12s, box-shadow .12s, opacity .25s, background .25s;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .15);
}
.lua-chon button:nth-child(1) { background: var(--a); box-shadow: 0 6px 0 var(--a-dam); }
.lua-chon button:nth-child(2) { background: var(--b); box-shadow: 0 6px 0 var(--b-dam); }
.lua-chon button:nth-child(3) { background: var(--c); box-shadow: 0 6px 0 var(--c-dam); color: #4a3200; text-shadow: none; }
.lua-chon button:nth-child(4) { background: var(--d); box-shadow: 0 6px 0 var(--d-dam); }
.lua-chon button:hover:not(:disabled) { transform: translateY(-3px) scale(1.02); }
.lua-chon button:active:not(:disabled) { transform: translateY(5px); box-shadow: none; }
.lua-chon button:disabled { cursor: default; background: #eef1f6; color: #9aa3b2; box-shadow: 0 6px 0 #dfe4ec; text-shadow: none; opacity: .8; }
.lua-chon .chu-cai {
  flex: none; width: 38px; height: 38px; border-radius: 12px;
  display: grid; place-items: center; font-family: var(--font-tieu-de); font-size: 1.2rem; font-weight: 800;
  background: rgba(255, 255, 255, .9); color: var(--chu); text-shadow: none;
}
.lua-chon button.dung { background: var(--dung); color: #fff; box-shadow: 0 6px 0 var(--dung-dam); opacity: 1; animation: nay .5s; }
.lua-chon button.sai { background: var(--sai); color: #fff; box-shadow: 0 6px 0 var(--sai-dam); opacity: 1; animation: rung .45s; }
.lua-chon button.dung::after, .lua-chon button.sai::after {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  font-size: 1.6rem;
}
.lua-chon button.dung::after { content: "✔"; }
.lua-chon button.sai::after { content: "✘"; }
@keyframes nay { 40% { transform: scale(1.06); } }
@keyframes rung { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }

/* Lời giải thích dạng bong bóng có cú 🦉 */
.giai-thich {
  position: relative; margin-top: 20px; padding: 16px 18px 16px 74px;
  border-radius: 20px; border: 3px solid; font-size: 1.05rem;
  animation: bat-len .4s cubic-bezier(.2, 1.4, .4, 1) both;
}
.giai-thich::before {
  content: ""; position: absolute; left: 14px; top: 12px; width: 2.6rem; height: 2.6rem;
  background: url("emoji/1f989.svg") center / contain no-repeat;  /* 🦉 dạng ảnh, máy nào cũng hiện */
}
/* Emoji trong chữ được emoji.js đổi thành ảnh */
img.emoji { display: inline-block; width: 1.15em; height: 1.15em; margin: 0 .05em; vertical-align: -.22em; }
.giai-thich.dung { background: var(--dung-nhat); border-color: #8be3ad; }
.giai-thich.sai { background: #fff1e0; border-color: #ffc98a; }
.giai-thich b { display: block; margin-bottom: 4px; font-family: var(--font-tieu-de); font-size: 1.25rem; }
.giai-thich.dung b { color: var(--dung-dam); }
.giai-thich.sai b { color: var(--cam-dam); }

.dieu-huong { display: flex; justify-content: space-between; gap: 12px; margin-top: 22px; }

.luoi-cau { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 8px; }
.luoi-cau button {
  aspect-ratio: 1; border: 0; border-radius: 14px;
  background: #f1f4fa; box-shadow: 0 4px 0 #dfe4ec;
  font-family: var(--font-tieu-de); font-size: 1.05rem; font-weight: 800; cursor: pointer; color: var(--chu-phu);
  transition: transform .1s;
}
.luoi-cau button:hover { transform: translateY(-2px); }
.luoi-cau button.dung { background: var(--dung); box-shadow: 0 4px 0 var(--dung-dam); color: #fff; }
.luoi-cau button.sai { background: var(--sai); box-shadow: 0 4px 0 var(--sai-dam); color: #fff; }
.luoi-cau button.hien-tai { outline: 4px solid var(--vang); outline-offset: 2px; }
.chu-thich { display: flex; gap: 16px; flex-wrap: wrap; font-size: .9rem; font-weight: 700; color: var(--chu-phu); margin-top: 12px; }
.chu-thich span::before { content: ""; display: inline-block; width: 14px; height: 14px; border-radius: 5px; margin-right: 6px; vertical-align: -2px; }
.chu-thich .cd::before { background: var(--dung); }
.chu-thich .cs::before { background: var(--sai); }
.chu-thich .cc::before { background: #f1f4fa; border: 2px solid #dfe4ec; }

/* ---------- Kết quả ---------- */
.diem-lon { text-align: center; padding: 6px 0 18px; }
.diem-lon .so {
  font-family: var(--font-tieu-de); font-size: 4.2rem; font-weight: 800; line-height: 1.05;
  background: linear-gradient(90deg, var(--hong), var(--cam), var(--vang));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: phong-to .8s cubic-bezier(.2, 1.6, .4, 1) both;
}
@keyframes phong-to { from { transform: scale(.2); opacity: 0; } }
.thanh-chu-de { margin: 12px 0; }
.thanh-chu-de .dong { display: flex; justify-content: space-between; font-weight: 700; margin-bottom: 5px; }
.thanh-chu-de .nen-thanh { height: 16px; background: #f1f4fa; border-radius: 99px; overflow: hidden; }
.thanh-chu-de .nen-thanh div { height: 100%; border-radius: 99px; transition: width .8s; }

/* ---------- Giáo viên ---------- */
.dau-trang { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.cong-cu { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.cong-cu select { width: auto; padding: 8px 12px; font-size: 1rem; }
.bang-cuon { overflow-x: auto; }
table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .98rem; }
th, td { padding: 11px 10px; border-bottom: 2px dashed var(--vien); text-align: left; white-space: nowrap; }
th { color: var(--chinh); font-weight: 800; font-size: .88rem; text-transform: uppercase; letter-spacing: .03em; }
tbody tr:hover { background: #faf7ff; }
td.so { text-align: right; font-variant-numeric: tabular-nums; }
.huy-hieu { display: inline-block; padding: 2px 12px; border-radius: 99px; font-weight: 800; }
.huy-hieu.tot { background: var(--dung-nhat); color: var(--dung-dam); }
.huy-hieu.kha { background: var(--vang-nhat); color: #9a6a00; }
.huy-hieu.kem { background: var(--sai-nhat); color: var(--sai-dam); }
.canh-bao { background: var(--vang-nhat); color: #7a5200; font-weight: 700; padding: 12px 16px; border-radius: 16px; margin-bottom: 16px; }

/* ---------- Bục vinh quang ---------- */
.buc-vinh-quang {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  align-items: end; margin-bottom: 18px;
}
.bac {
  border-radius: 22px 22px 10px 10px; color: #fff;
  text-align: center; padding: 14px 8px; min-width: 0;
  animation: moc-len .7s cubic-bezier(.2, 1.4, .4, 1) both;
}
.bac .huy-chuong { font-size: 2.6rem; line-height: 1; animation: nhun 1.4s ease-in-out infinite; }
.bac .ten { font-family: var(--font-tieu-de); font-weight: 800; font-size: 1.15rem; margin-top: 6px; overflow-wrap: anywhere; }
.bac .diem { font-family: var(--font-tieu-de); font-size: 1.7rem; font-weight: 800; }
.bac .phu { color: rgba(255, 255, 255, .85); }
.bac-1 { padding-top: 30px; padding-bottom: 44px; background: linear-gradient(180deg, #ffd43b, #ff9f1c); box-shadow: 0 8px 0 #d97f00; animation-delay: .3s; }
.bac-2 { padding-bottom: 26px; background: linear-gradient(180deg, #8ecbff, #4d8dff); box-shadow: 0 8px 0 #2f6bd6; animation-delay: .15s; }
.bac-3 { background: linear-gradient(180deg, #ffa3c8, #ff5c9a); box-shadow: 0 8px 0 #d63b78; }
@keyframes moc-len { from { transform: translateY(60px); opacity: 0; } }

.hang-cua-em { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin: 4px 0 8px; }
.hang-cua-em div {
  background: var(--vang-nhat); color: #7a5200; font-weight: 700;
  border: 3px solid #ffe08a; border-radius: 18px; padding: 10px 18px; text-align: center;
}
.hang-cua-em b { display: block; font-family: var(--font-tieu-de); font-size: 1.7rem; color: var(--cam-dam); }
.lien-ket-xep-hang { display: block; text-align: center; margin-top: 14px; font-weight: 800; font-size: 1.05rem; text-decoration: none; }
.lien-ket-xep-hang:hover { text-decoration: underline; }

/* ---------- Thi đấu trực tiếp ---------- */
.form-tao-phong { display: grid; grid-template-columns: 1.3fr 2fr 1fr auto; gap: 10px; align-items: end; }
.form-tao-phong label { margin: 0; font-size: .9rem; }
.form-tao-phong input, .form-tao-phong select { margin-top: 6px; padding: 10px 12px; font-size: 1rem; }
@media (max-width: 720px) { .form-tao-phong { grid-template-columns: 1fr; } }

.ma-pin {
  display: inline-block; margin-top: 6px;
  font-family: var(--font-tieu-de); font-size: 4rem; font-weight: 800; letter-spacing: .12em;
  font-variant-numeric: tabular-nums; line-height: 1.1;
  color: #fff; background: linear-gradient(90deg, var(--chinh), var(--hong));
  padding: 6px 28px; border-radius: 24px; box-shadow: 0 8px 0 var(--chinh-dam);
}
.huong-dan-vao { text-align: center; }
.huong-dan-vao .link { font-size: 1.25rem; font-weight: 800; color: var(--chinh); overflow-wrap: anywhere; }
.trang-thai-phong { display: inline-block; padding: 4px 14px; border-radius: 99px; font-weight: 800; background: var(--vang-nhat); color: #9a6a00; }
.trang-thai-phong.dang_choi { background: var(--dung-nhat); color: var(--dung-dam); }
.trang-thai-phong.ket_thuc { background: #f1f4fa; color: var(--chu-phu); }

.danh-sach-ten { display: flex; flex-wrap: wrap; gap: 10px; }
.danh-sach-ten span {
  color: #fff; font-weight: 800; padding: 8px 16px; border-radius: 99px;
  animation: hien-ra .4s cubic-bezier(.2, 1.6, .4, 1);
}
.danh-sach-ten span:nth-child(4n+1) { background: var(--a); }
.danh-sach-ten span:nth-child(4n+2) { background: var(--b); }
.danh-sach-ten span:nth-child(4n+3) { background: var(--c); color: #4a3200; }
.danh-sach-ten span:nth-child(4n+4) { background: var(--d); }
@keyframes hien-ra { from { transform: scale(.3); opacity: 0; } }

.bxh { display: grid; gap: 8px; }
.bxh .hang-nc {
  display: grid; grid-template-columns: 46px 1fr auto; gap: 12px; align-items: center;
  padding: 10px 14px; border-radius: 16px; background: #f6f8fc; border: 2px solid transparent;
}
.bxh .hang-nc:nth-child(1) { background: #fff6d6; border-color: #ffe08a; }
.bxh .hang-nc:nth-child(2) { background: #eaf3ff; border-color: #bcd9ff; }
.bxh .hang-nc:nth-child(3) { background: #ffeef5; border-color: #ffc4dc; }
.bxh .hang-nc.la-toi { background: var(--chinh-nhat); border-color: var(--chinh); box-shadow: 0 4px 0 #d5c6ff; }
.bxh .so-hang { font-family: var(--font-tieu-de); font-weight: 800; font-size: 1.3rem; text-align: center; }
.bxh .ten-nc { font-weight: 800; overflow-wrap: anywhere; }
.bxh .tien-do-nc { height: 8px; background: #e3e8f2; border-radius: 99px; overflow: hidden; margin-top: 5px; }
.bxh .tien-do-nc div { height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--b), var(--chinh)); transition: width .5s; }
.bxh .diem-nc { font-family: var(--font-tieu-de); font-weight: 800; font-size: 1.2rem; color: var(--chinh); font-variant-numeric: tabular-nums; }
.bxh .nut-moi-ra { margin-left: 8px; }

.dong-ho-cau { height: 16px; background: #f1f4fa; border-radius: 99px; overflow: hidden; margin-bottom: 14px; }
.dong-ho-cau div { height: 100%; border-radius: 99px; background: var(--dung); transition: width .25s linear, background .3s; }
.diem-cong {
  font-family: var(--font-tieu-de); font-size: 2.2rem; font-weight: 800; text-align: center; margin: 10px 0 4px;
  animation: phong-to .6s cubic-bezier(.2, 1.6, .4, 1) both;
}
.diem-cong.dung { color: var(--dung-dam); }
.diem-cong.sai { color: var(--sai); }
.the-diem { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.the-diem b { font-size: 1.3rem; color: var(--chinh); }
.thanh-tren .the-diem b { color: #fff; }

/* ---------- Câu hỏi có hình / âm thanh ---------- */
.minh-hoa { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 0 0 18px; }
.hinh-minh-hoa {
  font-size: 6rem; line-height: 1.15; padding: 10px 34px;
  background: linear-gradient(135deg, #fff7d6, #e8f6ff); border-radius: 28px;
  border: 4px solid #fff; box-shadow: 0 6px 0 rgba(43, 45, 66, .08);
  animation: phong-to .5s cubic-bezier(.2, 1.6, .4, 1) both;
}
.nut-nghe {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-tieu-de); font-size: 1.25rem; font-weight: 800;
  padding: 12px 26px; border: 0; border-radius: 99px; cursor: pointer;
  background: linear-gradient(90deg, var(--b), var(--chinh)); color: #fff;
  box-shadow: 0 6px 0 var(--chinh-dam);
}
.nut-nghe:active { transform: translateY(5px); box-shadow: 0 1px 0 var(--chinh-dam); }
.nut-nghe .loa { font-size: 1.8rem; line-height: 1; }
.nut-nghe.dang-doc .loa { animation: nhap-nhay .6s infinite; }
.nut-nghe.khong-doc-duoc { background: var(--vang-nhat); color: #7a5200; box-shadow: 0 6px 0 #ffe08a; }
/* Ảnh emoji (Twemoji) thay cho phông emoji của máy */
.hinh-minh-hoa .anh-emoji { display: block; width: 1em; height: 1em; }
/* Hình vẽ của đề (góc, phân số, biểu đồ…) */
.hinh-minh-hoa.so-do {
  font-size: 1rem; padding: 14px 18px; max-width: 100%;
  background: #fbfcff; border: 3px solid #e7ecf6; box-shadow: none;
}
.anh-so-do { display: block; max-width: min(400px, 100%); max-height: 270px; width: auto; height: auto; }
@media (max-width: 560px) { .anh-so-do { max-height: 220px; } }
img.anh-dap-an { width: 64px; height: 64px; display: block; pointer-events: none; }
span.anh-dap-an { font-size: 3.4rem; line-height: 1; }
.lua-chon button:disabled img.anh-dap-an { opacity: .45; filter: grayscale(.6); }
.lua-chon button.dung img.anh-dap-an, .lua-chon button.sai img.anh-dap-an { opacity: 1; filter: none; }
/* Đáp án là hình */
.lua-chon.lc-hinh button { justify-content: center; min-height: 110px; font-size: 3.6rem; line-height: 1; }
.lua-chon.lc-hinh .chu-cai { position: absolute; left: 10px; top: 10px; width: 30px; height: 30px; font-size: 1rem; }
.lua-chon.lc-hinh button.dung::after, .lua-chon.lc-hinh button.sai::after { font-size: 1.4rem; top: 22px; }

/* ---------- Chọn đề thi ---------- */
.ds-de { display: grid; gap: 14px; margin-top: 16px; }
.the-de {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px;
  padding: 16px; border-radius: 22px; background: #f8f6ff; border: 3px solid var(--chinh-nhat);
  transition: transform .15s, border-color .2s;
}
.the-de:hover { transform: translateY(-3px); border-color: #d5c6ff; }
.the-de .bieu-tuong { font-size: 2.8rem; line-height: 1; }
.the-de h3 { font-family: var(--font-tieu-de); font-size: 1.25rem; margin: 0; color: var(--chinh-dam); }
.the-de .chi-tiet { font-size: .92rem; color: var(--chu-phu); font-weight: 700; }
.the-de .nhan { display: inline-block; margin: 4px 6px 0 0; padding: 1px 10px; border-radius: 99px; font-size: .85rem; font-weight: 800; background: #fff; color: var(--chinh); }
.the-de.duoc-chon { border-color: var(--cam); background: #fff4e6; }
@media (max-width: 560px) {
  .the-de { grid-template-columns: auto 1fr; }
  .the-de .nut { grid-column: 1 / -1; }
  .hinh-minh-hoa { font-size: 4.6rem; }
  .lua-chon.lc-hinh { grid-template-columns: 1fr 1fr; }
  .lua-chon.lc-hinh button { min-height: 92px; font-size: 3rem; }
}
.tab-de { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.tab-de a {
  padding: 8px 16px; border-radius: 99px; font-weight: 800; text-decoration: none;
  background: #fff; color: var(--chinh-dam); box-shadow: 0 4px 0 #e3e8f2;
}
.tab-de a.dang-chon { background: var(--chinh); color: #fff; box-shadow: 0 4px 0 var(--chinh-dam); }

/* ---------- Tài khoản học sinh ---------- */
.nhom-o { border: 3px dashed var(--vien); border-radius: 20px; padding: 6px 18px 18px; margin: 18px 0 0; }
.nhom-o legend { font-family: var(--font-tieu-de); font-weight: 800; font-size: 1.1rem; color: var(--chinh); padding: 0 8px; }
.goi-y { font-size: .88rem; color: var(--chu-phu); margin: 6px 0 0; }
.hai-cot { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
@media (max-width: 560px) { .hai-cot { grid-template-columns: 1fr; } }

.anh-dai-dien {
  flex: none; width: 60px; height: 60px; border-radius: 20px;
  display: grid; place-items: center;
  font-family: var(--font-tieu-de); font-size: 1.9rem; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, var(--hong), var(--chinh));
  box-shadow: 0 5px 0 var(--chinh-dam);
}
.thanh-chao {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  background: var(--chinh-nhat); border-radius: 18px; padding: 12px 16px; margin-top: 16px;
}
.thanh-chao .cong-cu { gap: 8px; }
.thong-bao-ok { background: var(--dung-nhat); border-color: #8be3ad; color: var(--dung-dam); font-weight: 700; }
.mat-khau-moi {
  display: inline-block; margin-left: 6px; padding: 2px 14px; border-radius: 10px;
  font-family: ui-monospace, Consolas, monospace; font-size: 1.4rem; letter-spacing: .1em;
  background: #fff; color: var(--chu); border: 2px dashed var(--dung);
}
.luoi-thong-tin { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.luoi-thong-tin div { background: #f6f8fc; border-radius: 16px; padding: 12px 14px; }
.luoi-thong-tin span { display: block; font-size: .85rem; font-weight: 700; }
.luoi-thong-tin b { overflow-wrap: anywhere; }
.bo-loc { display: grid; grid-template-columns: 2fr 1fr 1fr auto; gap: 10px; align-items: center; }
.bo-loc input, .bo-loc select { padding: 10px 12px; font-size: 1rem; }
@media (max-width: 720px) { .bo-loc { grid-template-columns: 1fr; } }

/* ---------- Khoá học ---------- */
textarea {
  width: 100%; padding: 12px 14px; font: inherit; font-size: 1rem; font-weight: 600; color: var(--chu);
  border: 3px solid var(--vien); border-radius: 16px; background: #fbfcff; resize: vertical;
}
textarea:focus { outline: none; border-color: var(--chinh); box-shadow: 0 0 0 5px var(--chinh-nhat); }
.bieu-tuong-khoa { flex: none; font-size: 3rem; line-height: 1; }
.ds-khoa { display: grid; gap: 14px; }
.the-khoa {
  display: flex; align-items: center; gap: 16px; text-decoration: none; color: var(--chu);
  margin: 0; transition: transform .15s;
}
.the-khoa:hover { transform: translateY(-3px); }
.the-khoa h2 { margin: 0 0 4px; }
.the-khoa .phu { margin: 0 0 8px; }
.noi-dung-khoa { flex: 1; min-width: 0; }
.mui-ten { font-size: 1.6rem; color: var(--chinh); font-weight: 800; }
.dong-tien-do { display: flex; align-items: center; gap: 12px; font-weight: 800; color: var(--dung-dam); }
.dong-tien-do .nen-thanh { flex: 1; height: 14px; background: #eef1f6; border-radius: 99px; overflow: hidden; min-width: 60px; }
.dong-tien-do .nen-thanh div { height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--d), #5ee8a0); }
.dong-tien-do span { white-space: nowrap; }
.dong-tien-do.nho { font-size: .9rem; min-width: 150px; }
.dong-tien-do.nho .nen-thanh { height: 10px; }

.ds-bai { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ds-bai a {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px;
  background: #f6f8fc; border: 3px solid transparent; text-decoration: none; color: var(--chu); font-weight: 700;
}
.ds-bai a:hover { border-color: #d5c6ff; background: var(--chinh-nhat); }
.ds-bai a.da-hoc { background: var(--dung-nhat); }
.so-bai {
  flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center;
  font-family: var(--font-tieu-de); font-weight: 800; background: var(--chinh); color: #fff;
}
.ds-bai a.da-hoc .so-bai { background: var(--dung); }
.ten-bai { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.nhan-nho { font-size: .8rem; font-weight: 800; padding: 2px 10px; border-radius: 99px; background: #fff; color: var(--chinh); white-space: nowrap; }

.khung-video { position: relative; aspect-ratio: 16 / 9; margin: 16px 0; border-radius: 18px; overflow: hidden; background: #000; }
.khung-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.noi-dung-bai { font-size: 1.08rem; line-height: 1.7; margin: 16px 0; overflow-wrap: anywhere; }
.noi-dung-bai p { margin: 8px 0; }
.noi-dung-bai h3 {
  font-family: var(--font-tieu-de); font-size: 1.3rem; color: var(--chinh-dam);
  margin: 22px 0 8px; padding-bottom: 4px; border-bottom: 3px dotted var(--chinh-nhat);
}
.noi-dung-bai ul { margin: 6px 0 10px; padding-left: 4px; list-style: none; }
.noi-dung-bai li { position: relative; padding: 4px 0 4px 26px; }
.noi-dung-bai li::before { content: ""; position: absolute; left: 6px; top: 14px; width: 10px; height: 10px; border-radius: 50%; background: var(--b); }
.noi-dung-bai li:nth-child(4n+2)::before { background: var(--hong); }
.noi-dung-bai li:nth-child(4n+3)::before { background: var(--d); }
.noi-dung-bai li:nth-child(4n+4)::before { background: var(--vang); }
.hinh-bai { margin: 14px auto; max-width: 560px; text-align: center; }
.hinh-bai img { width: 100%; height: auto; background: #fff; border: 3px solid var(--vien); border-radius: 18px; }
.hinh-bai figcaption { margin-top: 6px; font-size: .95rem; color: var(--chu-phu); font-style: italic; }
.khung-meo { margin: 12px 0; padding: 12px 16px; border-radius: 16px; background: var(--vang-nhat); border-left: 6px solid var(--vang); font-weight: 600; }
.cau-hoi-nho { margin: 14px 0; padding: 14px 16px; border-radius: 18px; background: var(--chinh-nhat); border: 3px solid #d5c6ff; }
.cau-hoi-nho .q { margin: 0 0 10px; font-weight: 800; }
.lc-nho { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; }
.lc-nho button {
  padding: 10px 12px; border-radius: 14px; border: 3px solid #fff; background: #fff; cursor: pointer;
  font: inherit; font-weight: 700; color: var(--chu); text-align: left; box-shadow: 0 4px 0 #d5c6ff;
}
.lc-nho button:hover:not(:disabled) { border-color: var(--chinh); }
.lc-nho button:disabled { cursor: default; opacity: .7; }
.lc-nho button.dung { background: var(--dung); color: #fff; border-color: var(--dung); opacity: 1; box-shadow: 0 4px 0 var(--dung-dam); }
.lc-nho button.sai { background: var(--sai); color: #fff; border-color: var(--sai); opacity: 1; box-shadow: 0 4px 0 var(--sai-dam); }
.gt-nho { margin-top: 10px; padding: 10px 14px; border-radius: 12px; font-weight: 700; }
.gt-nho.dung { background: var(--dung-nhat); color: var(--dung-dam); }
.gt-nho.sai { background: #fff1e0; color: var(--cam-dam); }
.dong-da-hoc { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 22px; padding-top: 18px; border-top: 3px dashed var(--vien); }
.da-hoc-xong { font-family: var(--font-tieu-de); font-weight: 800; font-size: 1.25rem; color: var(--dung-dam); flex: 1; }

.chon-bieu-tuong { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.chon-bieu-tuong label { margin: 0; cursor: pointer; }
.chon-bieu-tuong input { position: absolute; opacity: 0; pointer-events: none; }
.chon-bieu-tuong span {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; font-size: 1.5rem;
  background: #f6f8fc; border: 3px solid transparent;
}
.chon-bieu-tuong input:checked + span { border-color: var(--chinh); background: var(--chinh-nhat); }
.chon-bieu-tuong input:focus-visible + span { outline: 3px solid var(--vang); }
.ds-bai-gv { display: grid; gap: 10px; }
.o-bai { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 16px; background: #f6f8fc; flex-wrap: wrap; }
.o-bai .cong-cu { gap: 6px; }
.o-bai .cong-cu form { display: flex; gap: 6px; }
.o-bai.dang-sua { display: block; background: var(--chinh-nhat); }
.chon-de { cursor: pointer; margin: 0; }
.chon-de input { width: 26px; height: 26px; accent-color: var(--chinh); }
.chon-tat-ca { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
.ds-chon-hs { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px; max-height: 420px; overflow-y: auto; padding: 4px; }
.ds-chon-hs label { display: flex; align-items: center; gap: 8px; margin: 0; padding: 8px 10px; border-radius: 12px; background: #f6f8fc; font-weight: 600; cursor: pointer; }
.ds-chon-hs input, .chon-tat-ca input { width: 20px; height: 20px; accent-color: var(--chinh); flex: none; }

/* ---------- Khoá học 35 tuần × tiết ---------- */
.ds-tuan { display: grid; gap: 8px; }
.tuan { border-radius: 16px; background: #f6f8fc; border: 3px solid transparent; }
.tuan > summary, .tuan-trong {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 14px; cursor: pointer; list-style: none;
}
.tuan > summary::-webkit-details-marker { display: none; }
.tuan > summary::before { content: "▸"; font-weight: 800; color: var(--chinh); transition: transform .15s; }
.tuan[open] > summary::before { transform: rotate(90deg); }
.tuan[open] { background: #fff; border-color: var(--chinh-nhat); }
.tuan .ds-bai { padding: 0 12px 12px; }
.tuan-trong { cursor: default; opacity: .6; padding: 8px 14px; }
.tuan-trong::before { content: "·"; width: 10px; }
.tuan.tuan-nay { border-color: var(--vang); box-shadow: 0 4px 0 #ffe08a; }
.tuan.xong:not(.tuan-nay) { background: #effcf4; }
.so-tuan { font-family: var(--font-tieu-de); font-weight: 800; font-size: 1.1rem; color: var(--chinh-dam); }
.ngay-tuan { font-size: .9rem; }
.tien-do-tuan { margin-left: auto; font-weight: 800; color: var(--dung-dam); font-size: .92rem; }
.so-tiet { font-size: .85rem; }
.luoi-tuan { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 6px; }
.luoi-tuan a {
  display: grid; place-items: center; gap: 0; padding: 6px 2px; border-radius: 12px; text-decoration: none;
  background: #f6f8fc; color: var(--chu-phu); border: 2px solid transparent; font-size: .85rem;
}
.luoi-tuan a b { font-size: .8rem; }
.luoi-tuan a span { font-family: var(--font-tieu-de); font-weight: 800; font-size: 1.1rem; }
.luoi-tuan a.co-bai { background: var(--chinh-nhat); color: var(--chinh-dam); }
.luoi-tuan a.tuan-nay { border-color: var(--vang); background: var(--vang-nhat); }
.luoi-tuan a.dang-chon { border-color: var(--chinh); }
.luoi-tuan a:hover { transform: translateY(-2px); }
.tuan-gv.tuan-nay { border-color: var(--vang); }
.ba-cot { display: grid; grid-template-columns: 1fr 1fr 2fr; gap: 0 14px; }
@media (max-width: 720px) { .ba-cot { grid-template-columns: 1fr 1fr; } .ba-cot .rong-2 { grid-column: 1 / -1; } }

/* ---------- Ngân hàng câu hỏi ---------- */
.nhan-muc-do { display: inline-block; padding: 2px 10px; border-radius: 99px; font-size: .82rem; font-weight: 800; white-space: nowrap; }
.nhan-muc-do.md-de { background: var(--dung-nhat); color: var(--dung-dam); }
.nhan-muc-do.md-tb { background: var(--vang-nhat); color: #9a6a00; }
.nhan-muc-do.md-kho { background: var(--sai-nhat); color: var(--sai-dam); }
.bang-thong-ke td.so a { font-weight: 800; text-decoration: none; }
.bo-loc-nh { grid-template-columns: 1.3fr 1.8fr 1fr 1fr; }
.bo-loc-nh input[type=text] { grid-column: span 2; }
.bo-loc-nh .nut { justify-self: start; }
/* Form soạn câu: các dạng câu hỏi */
.chon-loai-cau { display: flex; flex-wrap: wrap; gap: 8px; }
.chon-loai-cau input { position: absolute; opacity: 0; pointer-events: none; }
.chon-loai-cau span { display: inline-block; padding: 8px 14px; border-radius: 99px; border: 3px solid #e3e8f3;
  background: #fff; font-weight: 800; cursor: pointer; }
.chon-loai-cau input:checked + span { border-color: var(--chinh); background: var(--chinh-nhat); color: var(--chinh); }
.chon-loai-cau input:focus-visible + span { outline: 3px solid var(--chinh); }
form[data-loai="mot"] .chi-nhieu, form[data-loai="nhieu"] .chi-mot { display: none; }
.dong-ghep { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.dong-ghep input, .dong-ghep select { flex: 1; min-width: 0; }
.dong-ghep select { flex: 0 0 34%; }
.nhan-loai-cau { display: inline-block; padding: 2px 10px; border-radius: 99px; font-size: .82rem; font-weight: 800;
  background: #e6f7ff; color: #0b6aa2; white-space: nowrap; }
/* Câu hỏi gắn với bài học */
.khung-bai-hoc { background: var(--chinh-nhat); border-radius: 16px; padding: 12px 14px 4px; margin-bottom: 6px; }
.khung-bai-hoc select { background: #fff; }
.dong-cau-nh { display: flex; gap: 10px; align-items: flex-start; }
.dong-cau-nh > input { width: 22px; height: 22px; margin-top: 14px; accent-color: var(--chinh); flex: none; }
.dong-cau-nh > .o-cau-nh { flex: 1; min-width: 0; }
.bai-cua-cau { margin-top: 6px; font-size: .85rem; font-weight: 700; color: var(--chinh); overflow-wrap: anywhere; }
.bai-cua-cau.chua-gan { color: #9a6a00; }
.thanh-gan { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px;
  padding: 10px 12px; background: #f6f8fc; border-radius: 14px; }
.thanh-gan .chon-tat-ca { margin: 0; }
.thanh-gan select { flex: 1; min-width: 220px; width: auto; }
.thanh-tien-do { height: 14px; background: #f1f4fa; border-radius: 99px; overflow: hidden; }
.thanh-tien-do span { display: block; height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--chinh), #00c2a8); }
.bang-phu-bai tr.chua-co td { background: #fff8e1; }
.bang-phu-bai tr.dang-chon td { background: var(--chinh-nhat); }
.bang-phu-bai td a { font-weight: 700; text-decoration: none; }
.cau-cua-bai { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 4px; font-size: .85rem; }
.nhan-cau-bai { display: inline-block; padding: 2px 10px; border-radius: 99px; font-weight: 800; white-space: nowrap;
  background: #fff8e1; color: #9a6a00; text-decoration: none; }
.nhan-cau-bai.co { background: var(--chinh-nhat); color: var(--chinh); }
.nhan-cau-bai.them { background: #f1f4fa; color: var(--chu); }
a.nhan-cau-bai:hover { filter: brightness(.95); }
@media (max-width: 720px) { .bo-loc-nh { grid-template-columns: 1fr; } }
.ds-cau-nh { display: grid; gap: 8px; }
.o-cau-nh {
  display: block; padding: 12px 14px; border-radius: 16px; background: #f6f8fc; border: 3px solid transparent;
  text-decoration: none; color: var(--chu);
}
a.o-cau-nh:hover { border-color: #d5c6ff; background: var(--chinh-nhat); }
.nhan-cau { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.noi-dung-cau-nh { font-weight: 700; overflow-wrap: anywhere; }
.hinh-nho { font-size: 1.4rem; margin-right: 4px; }
.anh-nho { height: 46px; vertical-align: middle; margin-right: 6px; border-radius: 8px; background: #fff; }
.dap-an-nh { font-size: .9rem; margin-top: 4px; display: flex; gap: 6px 14px; flex-wrap: wrap; }
.dap-an-nh .dung { color: var(--dung-dam); font-weight: 800; }
.phan-trang { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 14px; }
.phan-trang a { min-width: 38px; text-align: center; padding: 6px 10px; border-radius: 10px; background: #f6f8fc; font-weight: 800; text-decoration: none; }
.phan-trang a.dang-chon { background: var(--chinh); color: #fff; }
.chon-muc-do { display: flex; gap: 10px; flex-wrap: wrap; }
.chon-muc-do label { margin: 0; cursor: pointer; }
.chon-muc-do input { position: absolute; opacity: 0; pointer-events: none; }
.chon-muc-do span { display: inline-block; padding: 10px 18px; border-radius: 14px; border: 3px solid var(--vien); font-weight: 800; background: #fff; }
.chon-muc-do .md-de input:checked + span { background: var(--dung-nhat); border-color: var(--dung); }
.chon-muc-do .md-tb input:checked + span { background: var(--vang-nhat); border-color: var(--vang); }
.chon-muc-do .md-kho input:checked + span { background: var(--sai-nhat); border-color: var(--sai); }
.chon-muc-do input:focus-visible + span { outline: 3px solid var(--chinh); }
.ds-o-dap-an { display: grid; gap: 8px; }
.o-dap-an { display: flex; align-items: center; gap: 10px; margin: 0; }
.o-dap-an input[type=radio] { width: 24px; height: 24px; accent-color: var(--dung); flex: none; }
.o-dap-an input[type=text] { flex: 1; }
.chu-cai-dap-an { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; font-weight: 800; background: var(--chinh-nhat); color: var(--chinh); }
.o-dap-an:has(input[type=radio]:checked) .chu-cai-dap-an { background: var(--dung); color: #fff; }
.tuy-chon-them { margin-top: 16px; padding: 12px 16px; border-radius: 16px; background: #f6f8fc; }
.tuy-chon-them summary { cursor: pointer; font-weight: 800; color: var(--chinh-dam); }
.cac-buoc { padding-left: 22px; line-height: 2.1; }
.o-tai-len { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; padding: 16px; border: 3px dashed var(--vien); border-radius: 16px; }
.o-tai-len input[type=file] { flex: 1; min-width: 220px; font: inherit; }
.ma-tran { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.o-ma-tran { display: grid; gap: 6px; padding: 12px; border-radius: 16px; border: 3px solid var(--vien); text-align: center; font-weight: 800; }
.o-ma-tran input { text-align: center; font-size: 1.4rem; padding: 8px; }
.o-ma-tran.md-de { border-color: #8be3ad; } .o-ma-tran.md-tb { border-color: #ffe08a; } .o-ma-tran.md-kho { border-color: #ffb3b3; }
.o-ma-tran.thieu { background: var(--sai-nhat); }
.o-ma-tran.thieu input { border-color: var(--sai); }
.thong-tin .o-md.md-de { background: linear-gradient(135deg, #5ee8a0, var(--dung)); }
.thong-tin .o-md.md-tb { background: linear-gradient(135deg, #ffd66b, var(--vang)); }
.thong-tin .o-md.md-kho { background: linear-gradient(135deg, #ff8a8a, var(--sai)); }
@media (max-width: 560px) { .ma-tran { grid-template-columns: 1fr; } }
/* Ma trận tạo đề theo môn */
.ma-tran-mon th.md-de { color: var(--dung-dam); } .ma-tran-mon th.md-tb { color: #9a6a00; } .ma-tran-mon th.md-kho { color: var(--sai-dam); }
.ma-tran-mon td { vertical-align: top; white-space: normal; }
.ma-tran-mon .o-so { min-width: 96px; text-align: center; }
.ma-tran-mon .o-so input { width: 84px; text-align: center; font-size: 1.15rem; padding: 6px; }
.ma-tran-mon .o-so small { display: block; margin-top: 2px; }
.ma-tran-mon .o-so.thieu input { border-color: var(--sai); background: var(--sai-nhat); }
.ma-tran-mon .o-so.thieu small { color: var(--sai-dam); font-weight: 800; }
.ma-tran-mon tr.co-chon td:first-child b { color: var(--chinh); }
.ma-tran-mon tr.co-chon { background: #faf7ff; }
.ma-tran-mon .cong-mon { font-weight: 800; font-size: 1.15rem; color: var(--chinh); }
.ma-tran-mon tfoot th, .ma-tran-mon tfoot td { border-bottom: 0; padding-top: 14px; }
.ma-tran-mon #tong-cau { font-size: 1.5rem; color: var(--chinh); text-align: right; }
.chu-de-mon summary { cursor: pointer; font-size: .85rem; color: var(--chu-phu); font-weight: 700; margin-top: 2px; }
.chu-de-mon label { display: flex; gap: 6px; align-items: center; margin: 4px 0; font-size: .88rem; font-weight: 600; }
.chu-de-mon input { width: 18px; height: 18px; accent-color: var(--chinh); }

/* ---------- Danh mục / lớp của khoá học ---------- */
.nhan-lop {
  display: inline-block; vertical-align: middle; margin-right: 4px;
  padding: 2px 10px; border-radius: 99px; font-size: .82rem; font-weight: 800; font-family: var(--font-chu);
  background: var(--vang-nhat); color: #9a6a00; border: 2px solid #ffe08a; white-space: nowrap;
}
.tieu-de-nhom { margin: 22px 6px 10px; font-size: 1.4rem; }
.nhom-danh-muc h2 { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }

/* ---------- Trang chủ: 2 phần Ôn tập / Thi đấu ---------- */
.hai-phan { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: stretch; }
.hai-phan .the { margin-bottom: 0; }
.the-phan { border-top: 8px solid; display: flex; flex-direction: column; }
.phan-on-tap { border-top-color: var(--b); }
.phan-thi-dau { border-top-color: var(--cam); }
.dau-phan { display: flex; gap: 14px; align-items: flex-start; }
.dau-phan h2 { font-size: 1.6rem; margin: 0 0 4px; }
.phan-on-tap h2 { color: var(--b-dam); }
.phan-thi-dau h2 { color: var(--cam-dam); }
.dau-phan .phu { margin: 0; }
.bieu-tuong-phan { font-size: 3.4rem; line-height: 1; flex: none; }
.the-phan .hai-cot { margin-top: auto !important; padding-top: 14px; }
.the-phan .hai-cot .nut { padding: 12px 10px; font-size: 1.05rem; }
.ds-khoa-nho { display: grid; gap: 8px; margin-top: 14px; }
.ds-khoa-nho a {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 14px; background: #f0f7ff; text-decoration: none; color: var(--chu); font-weight: 700;
}
.ds-khoa-nho a:hover { background: #e2efff; }
.ds-khoa-nho .bt { font-size: 1.5rem; }
.ds-khoa-nho .ten { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dong-tien-do .nen-thanh > span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--d), #5ee8a0); }
.ds-khoa-nho .dong-tien-do.nho { min-width: 110px; font-size: .85rem; }
@media (max-width: 720px) { .hai-phan { grid-template-columns: 1fr; } }

/* ---------- Thi đấu: chọn đáp án (chưa chấm) ---------- */
.lua-chon button.da-chon { outline: 5px solid var(--chu); outline-offset: 2px; transform: scale(1.02); }
.lua-chon button.da-chon::after { content: "✓"; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 1.6rem; }
.lua-chon.co-chon button:not(.da-chon) { opacity: .55; }
.luoi-cau button.da-lam { background: var(--b); box-shadow: 0 4px 0 var(--b-dam); color: #fff; }
.chu-thich .cl::before { background: var(--b); }
.the-thi-dau { border: 3px solid #ffd7a8; background: #fff8ef; }
/* Xem lại bài thi */
.xem-lai-cau { padding: 14px 0; border-bottom: 2px dashed var(--vien); }
.xem-lai-cau:last-child { border-bottom: 0; }
.xem-lai-cau .tieu-de-cau { font-weight: 800; margin-bottom: 8px; }
.xem-lai-cau .minh-hoa { margin: 6px 0 10px; align-items: flex-start; }
.xem-lai-cau .hinh-minh-hoa { font-size: 3rem; padding: 6px 14px; }
.xem-lai-cau .anh-so-do { max-height: 160px; }
.xem-lai-dap-an { display: grid; gap: 6px; }
.xem-lai-dap-an div { padding: 8px 12px; border-radius: 12px; background: #f6f8fc; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.xem-lai-dap-an div.dung { background: var(--dung-nhat); color: var(--dung-dam); }
.xem-lai-dap-an div.sai { background: var(--sai-nhat); color: var(--sai-dam); }
.xem-lai-dap-an img.anh-dap-an { width: 40px; height: 40px; }
.xem-lai-cau .giai-thich { margin-top: 10px; }
.loc-xem-lai { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }

/* ---------- Thanh menu học sinh ---------- */
.thanh-menu {
  position: sticky; top: 0; z-index: 20;
  max-width: 1100px; margin: 0 auto; padding: 10px 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: rgba(255, 255, 255, .92); backdrop-filter: blur(6px);
  border-radius: 0 0 22px 22px; box-shadow: 0 6px 0 rgba(43, 45, 66, .06), 0 10px 24px rgba(43, 45, 66, .08);
}
.thanh-menu .logo {
  display: flex; align-items: center; gap: 6px; text-decoration: none; white-space: nowrap;
  font-family: var(--font-tieu-de); font-weight: 800; font-size: 1.3rem; color: var(--chinh);
}
.thanh-menu .logo img.emoji { width: 1.5em; height: 1.5em; }
.menu-lien-ket { display: flex; gap: 8px; }
.menu-lien-ket a {
  display: flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 14px;
  font-family: var(--font-tieu-de); font-weight: 700; font-size: 1.02rem; text-decoration: none;
  color: var(--chinh-dam); background: var(--chinh-nhat); box-shadow: 0 4px 0 #d5c6ff;
  transition: transform .1s; max-width: 160px;
}
.menu-lien-ket a span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-lien-ket a:hover { transform: translateY(-2px); }
.menu-lien-ket a:active { transform: translateY(3px); box-shadow: 0 1px 0 #d5c6ff; }
.menu-lien-ket a.dang-o { background: var(--chinh); color: #fff; box-shadow: 0 4px 0 var(--chinh-dam); }
.bieu-tuong-menu { font-size: 1.15em; line-height: 1; }
body.dang-lam-bai .thanh-menu { display: none; }  /* ẩn khi đang làm bài / thi đấu */
.thanh-menu + .khung { padding-top: 18px; }
@media (max-width: 720px) {
  .thanh-menu { flex-direction: column; gap: 8px; padding: 8px 10px 10px; }
  .thanh-menu .logo { font-size: 1.1rem; }
  .menu-lien-ket { width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .menu-lien-ket a { flex-direction: column; gap: 2px; padding: 6px 2px; font-size: .74rem; max-width: none; text-align: center; }
  .menu-lien-ket a span:last-child { max-width: 100%; }
  .bieu-tuong-menu { font-size: 1.5em; }
}

/* ---------- Chân trang ---------- */
.chan-trang { padding: 8px 16px 84px; }  /* chừa chỗ cho nút âm thanh */
.chan-trang-noi-dung {
  max-width: 800px; margin: 0 auto;
  display: flex; align-items: center; justify-content: center; gap: 14px;
  background: rgba(255, 255, 255, .85); border: 3px solid #fff;
  border-radius: 22px; padding: 14px 20px;
  box-shadow: 0 6px 0 rgba(43, 45, 66, .06);
  font-weight: 700; color: var(--chu); text-align: left;
}
.chan-trang-icon {
  font-size: 2rem; line-height: 1; flex: none;
  width: 52px; height: 52px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--vang), var(--cam)); border-radius: 16px;
}
.chan-trang b { color: var(--chinh-dam); }
.chan-trang a { text-decoration: none; }
.ten-app-chan-trang { text-align: center; margin: 12px 0 0; font-family: var(--font-tieu-de); font-weight: 800; font-size: 1.05rem; }
.ten-app-chan-trang a { color: var(--chinh-dam); }
.ghi-nguon { text-align: center; font-size: .78rem; color: var(--chu-phu); margin: 10px 0 0; }
.chan-trang a:hover b { text-decoration: underline; }

/* ---------- Nút bật/tắt âm thanh ---------- */
.nut-am-thanh {
  position: fixed; right: 16px; bottom: 16px; z-index: 50;
  width: 54px; height: 54px; border-radius: 50%; border: 3px solid #fff;
  font-size: 1.5rem; cursor: pointer;
  background: var(--vang); box-shadow: 0 5px 0 #d49a00, 0 10px 20px rgba(0, 0, 0, .12);
  transition: transform .1s;
}
.nut-am-thanh:active { transform: translateY(4px); box-shadow: 0 1px 0 #d49a00; }

/* ---------- Pháo giấy ---------- */
.phao-giay {
  position: fixed; top: -20px; z-index: 100; pointer-events: none;
  width: 10px; height: 16px; border-radius: 3px;
  animation: roi linear forwards;
}
@keyframes roi {
  to { transform: translate3d(var(--x), 105vh, 0) rotate(var(--r)); }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .the { padding: 18px; border-radius: 22px; }
  h1 { font-size: 1.6rem; }
  .noi-dung-cau { font-size: 1.25rem; }
  .lua-chon { grid-template-columns: 1fr; }
  .lua-chon button { min-height: 62px; }
  .diem-lon .so { font-size: 3.2rem; }
  .ma-pin { font-size: 2.8rem; padding: 4px 18px; }
  .bac .huy-chuong { font-size: 2rem; }
  .bac .diem { font-size: 1.3rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .phao-giay { display: none; }
}

/* ---------- Câu chọn nhiều / kéo thả (keo_tha.js) ---------- */
.lua-chon button:nth-child(5) { background: #00b8a9; box-shadow: 0 6px 0 #00897d; }
.lua-chon button:nth-child(6) { background: #ff7ab6; box-shadow: 0 6px 0 #d94f8f; }
.kt-nhieu .lua-chon button.da-chon { outline: 5px solid var(--chu); outline-offset: 2px; }
.kt-nhieu .lua-chon button.da-chon::after { content: none; }
.kt-nhieu .lua-chon button.dung-thieu { opacity: 1; outline: 4px dashed var(--dung); outline-offset: 3px; }
.huong-dan-kt { margin: 0 0 12px; font-weight: 800; color: var(--chinh); }
.nut-kiem-tra { display: block; margin: 18px auto 0; min-width: 200px; }
.vung-kt { display: grid; gap: 10px; }
.dong-kt { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: stretch; }
.trai-kt { display: flex; align-items: center; padding: 10px 14px; border-radius: 16px; font-weight: 800;
  background: var(--chinh-nhat); color: var(--chinh); }
.o-kt { position: relative; min-height: 56px; padding: 6px; border-radius: 16px; border: 3px dashed #c9d2e3;
  background: #f8faff; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; transition: background .15s, border-color .15s; }
.o-kt.cho-tha { border-color: var(--chinh); background: #f6f1ff; cursor: pointer; }
.o-kt.tren { border-color: var(--dung); background: var(--dung-nhat); border-style: solid; }
.o-kt .nhan-o { flex: none; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center;
  background: var(--chinh); color: #fff; font-weight: 800; }
.kt-sap_xep .vung-kt { counter-reset: none; }
.nhom-kt { align-content: flex-start; min-height: 120px; }
.kt-phan_loai .vung-kt { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.ten-nhom-kt { width: 100%; font-weight: 800; text-align: center; padding: 4px 0 6px; color: var(--chu);
  border-bottom: 2px solid #e3e8f3; margin-bottom: 4px; }
.cau-dien { font-size: 1.15rem; font-weight: 700; line-height: 2.6; }
.cau-dien .o-kt { display: inline-flex; vertical-align: middle; min-width: 120px; min-height: 48px; margin: 0 4px; padding: 3px; }
.khay-kt { margin-top: 14px; padding: 12px; border-radius: 18px; background: #fff8e1; border: 3px solid #ffe08a;
  display: flex; flex-wrap: wrap; gap: 8px; min-height: 60px; align-items: center; }
.the-kt { font: inherit; font-weight: 800; padding: 10px 16px; border-radius: 14px; border: none; cursor: grab;
  background: var(--b); color: #fff; box-shadow: 0 4px 0 var(--b-dam); touch-action: none; user-select: none;
  max-width: 100%; overflow-wrap: anywhere; text-align: left; }
.the-kt:hover:not(:disabled) { transform: translateY(-2px); }
.the-kt.dang-chon { outline: 4px solid var(--vang); outline-offset: 2px; transform: scale(1.04); }
.the-kt.dang-keo { opacity: .35; }
.the-kt:disabled { cursor: default; }
.the-kt.dung { background: var(--dung); box-shadow: 0 4px 0 var(--dung-dam); }
.the-kt.sai { background: var(--sai); box-shadow: 0 4px 0 var(--sai-dam); }
.the-kt.dung::after { content: " ✔"; }
.the-kt.sai::after { content: " ✘"; }
.bong-kt { position: fixed; z-index: 1000; pointer-events: none; transform: translate(-50%, -60%) rotate(-3deg) scale(1.05);
  box-shadow: 0 12px 24px rgba(0, 0, 0, .25); }
.dap-an-kt { margin-top: 14px; padding: 12px 14px; border-radius: 16px; background: var(--dung-nhat); color: var(--dung-dam);
  font-weight: 700; overflow-wrap: anywhere; }
@media (max-width: 600px) {
  .dong-kt { grid-template-columns: 1fr; gap: 4px; }
  .the-kt { padding: 9px 12px; }
}
.the-on-tap-tiet { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin: 20px 0 6px; padding: 14px 16px;
  border-radius: 20px; background: linear-gradient(135deg, #f3edff, #e6fbf7); border: 3px solid #d9ccff; }
.the-on-tap-tiet > div:nth-child(2) { flex: 1; min-width: 200px; }
.bieu-tuong-on-tap { font-size: 2.4rem; }
.the-kt.thua { background: #eef1f6; color: #8a93a5; box-shadow: 0 4px 0 #dfe4ec; }
.lua-chon button:nth-child(n+5):disabled { background: #eef1f6; box-shadow: 0 6px 0 #dfe4ec; }
.kt-nhieu .lua-chon button.dung-thieu { background: #ecfdf3; color: var(--dung-dam); }
.xem-lai-dap-an div.tom-tat { display: block; overflow-wrap: anywhere; }

/* ---------- Tạo đề: lấy câu từ khoá học – bài học ---------- */
.chon-nguon span { font-size: 1.02rem; }
.chon-nhanh-bai { align-items: center; margin-bottom: 8px; }
.chon-nhanh-bai .tu-tuan { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; flex-wrap: wrap; }
.chon-nhanh-bai .tu-tuan input { width: 70px; padding: 6px 8px; }
.ds-bai-chon { max-height: 420px; overflow-y: auto; border: 3px solid #e3e8f3; border-radius: 16px; padding: 6px 10px; background: #fbfcff; }
.tuan-chon { padding: 6px 0; border-bottom: 2px dashed #e3e8f3; }
.tuan-chon:last-child { border-bottom: none; }
.dau-tuan { display: flex; align-items: center; gap: 8px; font-weight: 800; color: var(--chinh); margin: 0 0 4px; }
.bai-chon { display: flex; align-items: baseline; gap: 8px; margin: 2px 0 2px 26px; font-weight: 600; cursor: pointer; }
.bai-chon.khong-cau { opacity: .5; }
.dau-tuan input, .bai-chon input { width: 18px; height: 18px; accent-color: var(--chinh); flex: none; }
.loc-dang-cau { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.loc-dang-cau .chon-tat-ca { margin: 0; }

/* ---------- Trang giáo viên: bảng đề thi ---------- */
.bang-de-gv { max-height: 520px; overflow-y: auto; }
.bang-de-gv tr.de-an td { opacity: .6; }
.nhan-khoa-de { display: inline-block; margin: 2px 4px 2px 0; padding: 2px 10px; border-radius: 99px; font-size: .82rem;
  font-weight: 800; background: var(--chinh-nhat); color: var(--chinh); text-decoration: none; white-space: nowrap; }
.giai-thich-nh { margin-top: 4px; font-size: .88rem; }

/* ---------- Phòng thi đấu tự chọn câu ---------- */
.bo-cuc-tu-chon { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.bo-cuc-tu-chon > .the { margin: 0 0 18px; }
.khung-da-chon { position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow-y: auto; }
@media (max-width: 900px) { .bo-cuc-tu-chon { grid-template-columns: 1fr; } .khung-da-chon { position: static; max-height: none; } }
.loc-tu-chon { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 600px) { .loc-tu-chon { grid-template-columns: 1fr; } }
.o-tu-chon { display: flex; gap: 12px; align-items: center; }
.o-tu-chon > div { flex: 1; min-width: 0; }
.o-tu-chon > .nut { flex: none; }
.o-tu-chon.da-chon { border-color: var(--dung); background: var(--dung-nhat); }
.ds-chon { margin: 8px 0 14px; padding-left: 26px; }
.ds-chon li { padding: 6px 0; border-bottom: 2px dashed #e3e8f3; font-weight: 700; }
.ds-chon li { display: list-item; }
.ds-chon .chu-chon { display: block; overflow-wrap: anywhere; }
.ds-chon .nut-chon { display: inline-flex; gap: 4px; margin-top: 4px; }
.ds-chon .nut-chon button { border: none; border-radius: 8px; padding: 2px 9px; background: #eef1f6; font-weight: 800; cursor: pointer; }
.ds-chon .nut-chon button:hover:not(:disabled) { background: var(--chinh-nhat); color: var(--chinh); }
.ds-chon .nut-chon button:disabled { opacity: .35; cursor: default; }
.form-tao-phong .giu-thu-tu { grid-column: 1 / -1; font-size: .95rem; }