/* iTomato — Hệ Thống Anh Ngữ
 *
 * Người dùng chính là trẻ 6-11 tuổi, cầm điện thoại của bố mẹ, ngón tay ngắn,
 * mắt chưa quen chữ nhỏ. Nên: chữ 17px trở lên, ô bấm cao tối thiểu 44px, một
 * cột, không có menu thả xuống.
 *
 * color-scheme: light có chủ ý. Trình duyệt tự đảo màu ban đêm sẽ biến ô ĐÚNG
 * màu xanh và ô SAI màu đỏ thành hai sắc xám gần nhau — đúng cái phân biệt duy
 * nhất mà đứa trẻ cần nhìn ra.
 */

:root {
  color-scheme: light;
  --do: #c8102e;          /* đỏ cà chua — màu hiệu */
  --do-nhat: #fdecee;
  --xanh: #157f3d;
  --xanh-nhat: #e8f6ec;
  --vang: #8a6100;
  --vang-nhat: #fff6e0;
  --muc: #1b1b1b;
  --muc-mo: #5c5c5c;
  --vien: #d8d8d8;
  --nen: #fbfbfb;
  --nen-the: #fff;
  --nen-mo: #f0f0f0;      /* nền chú thích, đủ tách khỏi thẻ trắng */
  --bo-goc: 12px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--nen);
  color: var(--muc);
  font: 17px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}

/* ── Thanh trên ─────────────────────────────────────────────────────────── */

.thanh {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  padding-top: max(10px, env(safe-area-inset-top));
  background: var(--do);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 10;
}
.thanh .hieu { font-weight: 700; font-size: 19px; color: #fff; text-decoration: none; }
.thanh .ten  { margin-left: auto; font-size: 15px; opacity: .9;
               max-width: 45vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thanh .ra   { color: #fff; text-decoration: underline; font-size: 15px; padding: 6px; }

main {
  max-width: 860px;
  margin: 0 auto;
  padding: 16px 16px calc(40px + env(safe-area-inset-bottom));
}
main.hep { max-width: 640px; }

h1 { font-size: 24px; margin: 4px 0 14px; line-height: 1.25; }
h2 { font-size: 20px; margin: 26px 0 10px; }
h3 { font-size: 17px; margin: 18px 0 8px; }
a  { color: #0b52a8; }

/* ── Lời nhắn ───────────────────────────────────────────────────────────── */

.nhan {
  padding: 12px 14px;
  border-radius: var(--bo-goc);
  margin: 0 0 14px;
  border-left: 5px solid;
}
.nhan-ok       { background: var(--xanh-nhat); border-color: var(--xanh); }
.nhan-dat      { background: var(--xanh-nhat); border-color: var(--xanh); font-size: 19px; }
.nhan-loi      { background: var(--do-nhat);   border-color: var(--do); }
.nhan-nhac     { background: var(--vang-nhat); border-color: var(--vang); }
.nhan-lam-lai  { background: var(--vang-nhat); border-color: var(--vang); font-size: 19px; }
/* Chờ cô chấm: CÙNG cỡ chữ với hai nhãn kia nhưng KHÔNG xanh — chưa ai kết
   luận bài này đúng, màu xanh ở đây là khen trước khi biết. */
.nhan-cho      { background: var(--vang-nhat); border-color: var(--vang); font-size: 19px; }

/* ── Chữ phụ ────────────────────────────────────────────────────────────── */

.mo      { color: var(--muc-mo); }
.phu     { color: var(--muc-mo); font-size: 15px; }
.nho-chu { font-size: 14px; color: var(--muc-mo); }
.to-chu  { font-size: 22px; }
.do      { color: var(--do); font-weight: 600; }
.cho     { color: var(--vang); font-weight: 600; }

/* ── Thẻ, biểu mẫu ──────────────────────────────────────────────────────── */

.the {
  background: var(--nen-the);
  border: 1px solid var(--vien);
  border-radius: var(--bo-goc);
  padding: 16px;
  margin: 0 0 18px;
}
.the label { display: block; margin: 0 0 12px; font-weight: 600; }
.the label.hang { display: flex; align-items: center; gap: 10px; font-weight: 400; }
.hang-ngang { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.hang-ngang label { flex: 1 1 180px; margin-bottom: 0; }

input[type=text], input[type=password], input[type=number], input[type=date],
input[type=file], select, textarea, input:not([type]) {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 11px 12px;
  font: inherit;
  color: inherit;
  background: #fff;
  border: 1px solid #b9b9b9;
  border-radius: 8px;
  min-height: 44px;
}
textarea { min-height: 120px; resize: vertical; }
input.to { font-size: 20px; letter-spacing: .06em; }
input.nho, select.nho { max-width: 140px; }
input[type=checkbox], input[type=radio] { width: 22px; height: 22px; margin: 0; }
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible {
  outline: 3px solid #0b52a8; outline-offset: 1px;
}

.nut {
  display: inline-block;
  padding: 12px 18px;
  min-height: 46px;
  font: inherit;
  font-weight: 600;
  color: var(--muc);
  background: #fff;
  border: 1px solid #b9b9b9;
  border-radius: 10px;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
}
.nut.chinh { background: var(--do); border-color: var(--do); color: #fff; }
.nut.to    { width: 100%; font-size: 19px; padding: 15px; }
.nut[disabled] { opacity: .55; cursor: default; }

/* ── Bảng ───────────────────────────────────────────────────────────────── */

.bang { width: 100%; border-collapse: collapse; margin: 0 0 14px; font-size: 16px; }
.bang th, .bang td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--vien); }
.bang th { font-size: 14px; color: var(--muc-mo); text-transform: uppercase; letter-spacing: .03em; }
.bang tr:last-child td { border-bottom: none; }

/* ── Danh sách ──────────────────────────────────────────────────────────── */

.ds-lop, .ds-bai, .ds-bai-goc { list-style: none; padding: 0; margin: 0 0 18px; }
.ds-lop li, .ds-bai-goc li {
  padding: 13px 14px;
  background: var(--nen-the);
  border: 1px solid var(--vien);
  border-radius: var(--bo-goc);
  margin-bottom: 8px;
}
.ds-lop a { font-weight: 600; text-decoration: none; }
.ds-lop .phu { margin-left: 8px; }

.the-bai {
  display: block;
  padding: 15px;
  background: var(--nen-the);
  border: 1px solid var(--vien);
  border-radius: var(--bo-goc);
  margin-bottom: 10px;
  text-decoration: none;
  color: inherit;
}
.the-bai b { display: block; font-size: 18px; margin-bottom: 3px; }

/* ── Câu hỏi ────────────────────────────────────────────────────────────── */

.ds-cau { list-style: none; padding: 0; margin: 0; counter-reset: none; }
.ds-cau > li {
  background: var(--nen-the);
  border: 1px solid var(--vien);
  border-radius: var(--bo-goc);
  padding: 14px 15px;
  margin-bottom: 12px;
}
.cau .so { font-weight: 700; color: var(--do); margin-right: 6px; }
.de, .de-bai { font-size: 18px; line-height: 2.1; }
.de-nho { font-size: 16px; margin-bottom: 6px; }

/* Ô điền nằm GIỮA câu. line-height 2.1 ở trên là để hai dòng chữ không chạm
   nhau khi ô xuống hàng — chứ không phải để cho đẹp. */
.o-nhap {
  display: inline-block;
  width: 9em;
  min-height: 40px;
  margin: 2px 3px;
  padding: 4px 8px;
  font: inherit;
  font-size: 17px;
  border: none;
  border-bottom: 2px solid var(--do);
  border-radius: 0;
  background: #fffdf6;
  vertical-align: baseline;
}
.o-nhap.rong { width: 100%; display: block; margin: 8px 0; }
.o-duoi { margin-top: 10px; }
.o-duoi .o-nhap { display: block; width: 100%; margin: 8px 0; }

.o-xem {
  display: inline-block;
  padding: 2px 9px;
  /* Đề gốc viết liền "Frank ................riding a bike" — không có dấu cách
     hai bên chỗ trống. Lề 2px là chữ trong ô dính vào chữ của đề, đọc ra
     "SheHe is good at". Đây là lề bù cho đề, không phải để cho đẹp. */
  margin: 0 5px;
  border-radius: 7px;
  font-weight: 600;
  border-bottom: 2px solid;
}
.o-xem.dung   { background: var(--xanh-nhat); color: var(--xanh);  border-color: var(--xanh); }
.o-xem.sai    { background: var(--do-nhat);   color: var(--do);    border-color: var(--do); }
.o-xem.cho-gv { background: var(--vang-nhat); color: var(--vang);  border-color: var(--vang); }
/* Chú thích nằm GIỮA câu, ngay sau ô sai. Để display:block là nó cắt câu làm
   ba dòng, em phải ghép lại trong đầu mới đọc được đề. Giữ trong dòng, bọc
   nền nhạt cho tách khỏi chữ của đề, và cấm ngắt giữa chính nó. */
.gan {
  display: inline-block;
  font-size: 14px;
  color: var(--muc-mo);
  background: var(--nen-mo);
  border-radius: 6px;
  padding: 0 6px;
  margin: 0 3px;
  white-space: nowrap;
}
.cho-co { font-size: 15px; color: var(--vang); margin-left: 6px; }

/* ── Trang chấm của cô ──────────────────────────────────────────────────── */

.cham .cau-cham { border-left: 5px solid var(--vien); }
.cau-cham.dung   { border-left-color: var(--xanh); }
.cau-cham.sai    { border-left-color: var(--do); }
.cau-cham.cho-gv { border-left-color: var(--vang); }
.bai-lam { margin: 8px 0; font-size: 17px; }
.nut-cham { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; }
.nut-cham label { display: flex; align-items: center; gap: 6px; font-size: 15px; }

/* ── Nhập CSV ───────────────────────────────────────────────────────────── */

.canh-bao, .giai-thich {
  background: var(--nen-the);
  border: 1px solid var(--vien);
  border-left: 5px solid var(--vang);
  border-radius: var(--bo-goc);
  padding: 12px 16px;
  margin: 0 0 18px;
  font-size: 15px;
}
.giai-thich { border-left-color: #0b52a8; }
.canh-bao ul { margin: 6px 0 0; padding-left: 20px; }

.thanh-tien-do {
  height: 16px;
  background: #eee;
  border-radius: 999px;
  overflow: hidden;
  margin: 10px 0 6px;
}
.thanh-tien-do .chay {
  height: 100%;
  background: var(--do);
  transition: width .3s;
}

/* ── Phiếu đăng nhập, để in ─────────────────────────────────────────────── */

.ds-phieu {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.phieu {
  border: 1px dashed #999;
  border-radius: 8px;
  padding: 12px 14px;
  background: #fff;
  break-inside: avoid;
  page-break-inside: avoid;
}
.phieu-dau  { font-size: 12px; color: var(--do); font-weight: 700; letter-spacing: .04em; }
.phieu-ten  { font-size: 18px; font-weight: 700; margin: 4px 0 1px; }
.phieu-lop  { font-size: 13px; color: var(--muc-mo); margin-bottom: 8px; }
.phieu-ma   { border-collapse: collapse; }
.phieu-ma td { padding: 3px 10px 3px 0; font-size: 14px; }
.phieu-ma .ma {
  font: 700 21px/1.2 ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  letter-spacing: .1em;
}
.phieu-chan { font-size: 11px; color: var(--muc-mo); margin-top: 8px; }

@media (min-width: 560px) {
  .ds-phieu { grid-template-columns: 1fr 1fr; }
}

@media print {
  /* Bỏ hết những gì không cắt rời phát cho học sinh được. */
  .thanh, .chi-man-hinh, .nut, script { display: none !important; }
  body { background: #fff; font-size: 12pt; }
  main { max-width: none; padding: 0; }
  .ds-phieu { grid-template-columns: 1fr 1fr; gap: 6mm; }
  .phieu { border: 1px dashed #666; }
  @page { margin: 10mm; }
}

/* Trình soạn bài viết */
.soan-cau { min-width: 0; margin: 20px 0; padding: 16px; border: 1px solid var(--vien); border-radius: 12px; }
.soan-cau legend { font-weight: 700; }
.soan-o { min-width: 0; margin: 12px 0; padding: 12px; border: 1px solid var(--vien); }
#soan-de textarea, #soan-de input:not([type=hidden]), #soan-de select { width: 100%; box-sizing: border-box; }
#soan-de label { display: block; margin-bottom: 12px; }
#soan-de textarea { font: inherit; padding: 10px; border: 1px solid var(--vien); border-radius: 8px; resize: vertical; }
.soan-hanh-dong { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0; }
.soan-cau > .nut { margin: 4px; }

.anh-de { display: block; max-width: 100%; max-height: 420px; object-fit: contain; margin: 12px 0; }

.ai-feedback { display:block; margin:8px 0; padding:10px; background:#edf5ff; border-radius:8px; font-size:16px; white-space:pre-wrap; overflow-wrap:anywhere; }
textarea.o-nhap { display:block; width:100%; box-sizing:border-box; font:inherit; margin:8px 0; }