/* Đơn giản – dễ nhìn – dễ bấm: nền trắng, chữ to, một màu nhấn, nút lớn. */
:root {
  --nen: #f6f7fb;
  --the: #ffffff;
  --vien: #dfe3ec;
  --chu: #1e2430;
  --chu-nhat: #5b6475;
  --nhan: #4b2e83;
  --nhan-dam: #3a2266;
  --nhan-nhat: #efeaf8;
  --dung: #1f7a4d;
  --dung-nhat: #e4f4eb;
  --sai: #c62828;
  --sai-nhat: #fdecec;
  --phong: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--nen); color: var(--chu); font: 400 18px/1.6 var(--phong); }
a { color: var(--nhan); }
:focus-visible { outline: 3px solid var(--nhan); outline-offset: 2px; }
main { max-width: 720px; margin: 0 auto; padding: 0 16px 48px; outline: none; }

/* Đầu trang */
.dau-trang {
  max-width: 720px; margin: 0 auto; padding: 14px 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.ten-web { font-weight: 800; font-size: 20px; color: var(--nhan); text-decoration: none; }
.hoc-sinh { font-size: 15px; color: var(--chu-nhat); }
.hoc-sinh b { color: var(--chu); }
.hoc-sinh a { margin-left: 6px; }

h1 { font-size: 28px; line-height: 1.25; margin: 12px 0 8px; font-weight: 800; }
h2 { font-size: 18px; margin: 28px 0 10px; font-weight: 800; color: var(--nhan); }
h2 { margin-top: 32px; }
h3.mach { font-size: 15px; font-weight: 600; color: var(--chu-nhat); margin: 18px 0 8px; }
.loi-nhap:empty { display: none; }
.phu { color: var(--chu-nhat); margin: 0 0 18px; font-size: 16px; }
.quay-lai { display: inline-block; margin: 6px 0 0; font-size: 16px; text-decoration: none; }

/* Khối trắng */
.khoi { background: var(--the); border: 1px solid var(--vien); border-radius: 14px; padding: 18px; }

/* Nút */
.nut {
  appearance: none; border: 0; cursor: pointer; text-decoration: none; text-align: center;
  display: inline-block; font: 600 18px var(--phong); border-radius: 12px; padding: 14px 22px; min-height: 52px;
}
.nut-chinh { background: var(--nhan); color: #fff; }
.nut-chinh:hover { background: var(--nhan-dam); }
.nut-phu { background: var(--the); color: var(--nhan); border: 2px solid var(--nhan); }
.nut-rong { width: 100%; }

/* Nhập tên */
.truong { margin-bottom: 16px; }
.truong label { display: block; font-weight: 600; margin-bottom: 6px; }
.truong input {
  width: 100%; font: 400 20px var(--phong); padding: 12px 14px; border-radius: 12px;
  border: 2px solid var(--vien); background: #fff; color: var(--chu);
}
.truong input:focus { border-color: var(--nhan); outline: none; }
.loi-nhap { color: var(--sai); font-size: 15px; margin: 6px 0 0; min-height: 1em; }
.ghi-chu { font-size: 14px; color: var(--chu-nhat); margin: 14px 0 0; }

/* Chọn bài */
.the-de { display: flex; flex-direction: column; gap: 12px; }
.the-de p { margin: 0; color: var(--chu-nhat); font-size: 16px; }
.the-de strong { display: block; color: var(--chu); font-size: 20px; }
.ds-bai { list-style: none; margin: 0; padding: 0; background: var(--the); border: 1px solid var(--vien); border-radius: 14px; overflow: hidden; }
.ds-bai li + li { border-top: 1px solid var(--vien); }
.ds-bai a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px; min-height: 56px; color: var(--chu); text-decoration: none;
}
.ds-bai a:hover { background: var(--nhan-nhat); }
.ds-bai .dem { font-size: 14px; color: var(--chu-nhat); white-space: nowrap; }
.ds-bai a::after { content: "›"; font-size: 26px; line-height: 1; color: var(--nhan); margin-left: 4px; }

/* Chọn mức độ + hai loại đề */
h2.buoc { color: var(--chu); font-size: 18px; margin: 24px 0 10px; }
.chon-muc { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (min-width: 560px) { .chon-muc { grid-template-columns: repeat(4, 1fr); } }
.muc {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 64px;
  font: 400 14px var(--phong); color: var(--chu-nhat); background: var(--the); cursor: pointer;
  border: 2px solid var(--vien); border-top: 6px solid var(--mau-muc); border-radius: 12px; padding: 8px;
}
.muc b { font-size: 19px; color: var(--chu); }
.muc[aria-checked="true"] { border-color: var(--mau-muc); background: var(--nen-muc); }
.muc-NB { --mau-muc: #2e9e5b; --nen-muc: #e6f6ec; }
.muc-TH { --mau-muc: #d9a400; --nen-muc: #fdf5d8; }
.muc-VD { --mau-muc: #e8731a; --nen-muc: #fdeede; }
.muc-VDC { --mau-muc: #c62828; --nen-muc: #fdeaea; }
.hai-de { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hai-de .nut { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.hai-de small { font-weight: 400; font-size: 14px; opacity: .85; }

/* Câu hỏi */
.cau { background: var(--the); border: 1px solid var(--vien); border-radius: 14px; padding: 16px; margin: 14px 0; }
.cau-dau { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.cau-so { font-weight: 800; color: var(--nhan); font-size: 16px; }
.nhan-cham { font-weight: 800; font-size: 15px; padding: 2px 12px; border-radius: 99px; }
.nhan-cham.dung { background: var(--dung-nhat); color: var(--dung); }
.nhan-cham.sai { background: var(--sai-nhat); color: var(--sai); }
.cau .de { margin: 0 0 12px; font-size: 19px; }
.cau .loai { font-size: 13px; color: var(--chu-nhat); }

.phuong-an { display: grid; gap: 10px; }
.pa {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; text-align: left; cursor: pointer;
  font: 400 19px var(--phong); color: var(--chu); background: #fff;
  border: 2px solid var(--vien); border-radius: 12px; padding: 10px 14px;
}
.pa:hover { border-color: var(--nhan); }
.pa .chu-cai {
  flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 800; font-size: 16px; color: var(--nhan); border: 2px solid var(--nhan);
}
.pa[aria-checked="true"] { border-color: var(--nhan); background: var(--nhan-nhat); }
.pa[aria-checked="true"] .chu-cai { background: var(--nhan); color: #fff; }
.da-nop .pa { cursor: default; }
.pa.la-dung { border-color: var(--dung); background: var(--dung-nhat); }
.pa.la-dung .chu-cai { background: var(--dung); border-color: var(--dung); color: #fff; }
.pa.chon-sai { border-color: var(--sai); background: var(--sai-nhat); }
.pa.chon-sai .chu-cai { background: var(--sai); border-color: var(--sai); color: #fff; }

.y-ds { display: grid; gap: 10px; }
.y-ds .y { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--vien); }
.y-ds .y:first-child { border-top: 0; }
.y-ds .noi-dung b { color: var(--nhan); margin-right: 4px; }
.nut-ds { display: flex; gap: 8px; flex: none; }
.nut-ds button {
  font: 800 17px var(--phong); width: 52px; height: 48px; cursor: pointer;
  border: 2px solid var(--vien); border-radius: 10px; background: #fff; color: var(--chu);
}
.nut-ds button[aria-pressed="true"] { background: var(--nhan); border-color: var(--nhan); color: #fff; }
.nut-ds button.la-dung { background: var(--dung); border-color: var(--dung); color: #fff; }
.nut-ds button.chon-sai { background: var(--sai); border-color: var(--sai); color: #fff; }

.o-tra-loi input {
  font: 600 22px var(--phong); width: 100%; max-width: 240px; padding: 12px 14px; border-radius: 12px;
  border: 2px solid var(--vien); background: #fff; color: var(--chu);
}
.o-tra-loi input:focus { border-color: var(--nhan); outline: none; }
.o-tra-loi input.la-dung { border-color: var(--dung); background: var(--dung-nhat); }
.o-tra-loi input.chon-sai { border-color: var(--sai); background: var(--sai-nhat); }
.o-tra-loi .goi-y { display: block; font-size: 14px; color: var(--chu-nhat); margin-top: 6px; }

.loi-giai { margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: var(--nhan-nhat); font-size: 17px; }
.loi-giai b { color: var(--nhan); }

/* Thanh nộp bài */
.thanh-nop {
  position: sticky; bottom: 0; z-index: 5; margin: 18px -16px 0; padding: 10px 16px;
  background: rgba(246,247,251,.96); border-top: 1px solid var(--vien);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.thanh-nop .tien-do { font-size: 15px; color: var(--chu-nhat); }
.dong-ho { font-weight: 800; font-size: 22px; font-variant-numeric: tabular-nums; color: var(--nhan); }
.dong-ho.gap { color: var(--sai); }

/* Kết quả */
.ket-qua { text-align: center; }
.ket-qua .diem { font-size: 64px; font-weight: 800; line-height: 1.1; color: var(--nhan); margin: 4px 0; }
.ket-qua .diem small { font-size: 26px; color: var(--chu-nhat); font-weight: 600; }
.ket-qua .chi-tiet { margin: 0 0 12px; color: var(--chu-nhat); }
.trang-thai-gui { font-size: 15px; margin: 0 0 14px; }
.trang-thai-gui.ok { color: var(--dung); }
.trang-thai-gui.chua { color: var(--sai); }
.hanh-dong { display: grid; gap: 10px; }
@media (min-width: 520px) { .hanh-dong { grid-template-columns: 1fr 1fr; } }

.thong-bao { background: #fff7e0; border: 1px solid #f0dca0; border-radius: 12px; padding: 10px 14px; font-size: 16px; }
.katex { font-size: 1.08em; }
.pa .katex, .y-ds .katex { font-size: 1.15em; }
.katex .mfrac { font-size: 1.15em; }
.katex-error { color: var(--sai); }