/* ============================================================
   Quản lý học sinh — bảng giao diện (thiết kế cho giáo viên dục tiểu học)
   Trẻ trung, tương phản, nhiều màu. Không dùng CDN/font ngoài.
   ============================================================ */
:root {
  --lac: #0ea5a4; --lac-dam: #0b6f74; --lac-nhat: #e6f7f7;
  --vang: #ffc93c; --vang-nhat: #fff6dc;
  --hong: #ff7a90; --hong-nhat: #ffeef1;
  --xanhla: #3fae6a; --xanhla-nhat: #e8f7ee;
  --muc: #2b3a55; --muc-2: #5b6b8c; --muc-3: #8e9bb5;
  --nen: #f5f8fc; --tem: #ffffff; --vien: #e3e9f2;
  --ben: 16px; --bong: 0 6px 20px rgba(43, 58, 85, .08);
  --no: 999px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: "Segoe UI", "Be Vietnam Pro", system-ui, -apple-system, "Noto Sans", sans-serif;
  font-size: 15.5px; line-height: 1.55; color: var(--muc); background: var(--nen);
  -webkit-text-size-adjust: 100%;
}
h1, h2, h3, h4 { margin: 0 0 .35rem; line-height: 1.25; font-weight: 800; letter-spacing: -.01em; }
h1 { font-size: 1.6rem; } h2 { font-size: 1.22rem; } h3 { font-size: 1.05rem; }
a { color: var(--lac-dam); text-decoration: none; }
a:hover { text-decoration: underline; }
small, .qhs-nho { font-size: .84rem; color: var(--muc-2); }

/* ------------------------------------------------------- khung ứng dụng */
.qhs-app { display: grid; grid-template-columns: 246px minmax(0, 1fr); min-height: 100vh; }
.qhs-public { max-width: 1180px; margin: 0 auto; padding: 18px clamp(12px, 3vw, 28px) 48px; }

.qhs-side {
  position: sticky; top: 0; align-self: start; height: 100vh; overflow: auto;
  background: linear-gradient(180deg, #0b6f74 0%, #0e938f 55%, #12a99f 100%);
  color: #fff; padding: 18px 14px; display: flex; flex-direction: column; gap: 14px;
}
.qhs-brand { display: flex; gap: 10px; align-items: center; }
.qhs-brand__mark {
  width: 42px; height: 42px; border-radius: 14px; background: var(--vang);
  display: grid; place-items: center; font-size: 22px; box-shadow: var(--bong);
}
.qhs-brand b { display: block; font-size: 1.02rem; }
.qhs-brand small { color: #cdeceb; font-size: .76rem; }
.qhs-nav { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.qhs-nav a {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px;
  color: #eafaf9; font-weight: 600; font-size: .95rem; border: 1px solid transparent;
}
.qhs-nav a:hover { background: rgba(255, 255, 255, .14); text-decoration: none; }
.qhs-nav a.active, .qhs-nav a[aria-current="page"] { background: #fff; color: var(--lac-dam); box-shadow: var(--bong); }
.qhs-side__foot { margin-top: auto; display: grid; gap: 6px; }
.qhs-mini { color: #d7f3f2; font-size: .82rem; }

.qhs-main { min-width: 0; display: flex; flex-direction: column; }
.qhs-top {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between;
  padding: 14px clamp(14px, 3vw, 28px); background: var(--tem); border-bottom: 1px solid var(--vien);
  position: sticky; top: 0; z-index: 5;
}
.qhs-top__title { font-size: 1.06rem; }
.qhs-top__sub { display: block; color: var(--muc-2); font-size: .82rem; }
.qhs-top__act { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.qhs-body { padding: 18px clamp(14px, 3vw, 28px) 56px; display: grid; gap: 16px; align-content: start; }

.qhs-pill {
  border-radius: var(--no); padding: 6px 12px; font-size: .82rem; font-weight: 700;
  background: var(--xanhla-nhat); color: #1d6c40; border: 1px solid #bfe6cd;
}
.qhs-pill--lock { background: var(--vang-nhat); color: #8a6100; border-color: #f3dd9a; }
.qhs-lock {
  margin: 12px clamp(14px, 3vw, 28px) 0; padding: 12px 14px; border-radius: var(--ben);
  background: var(--vang-nhat); border: 1px dashed #e3c46a; color: #6f4e00; font-size: .92rem;
}

/* ------------------------------------------------------- thẻ, khối */
.qhs-card {
  background: var(--tem); border: 1px solid var(--vien); border-radius: var(--ben);
  box-shadow: var(--bong); padding: 16px;
}
.qhs-card--noi { padding: 0; overflow: hidden; }
.qhs-card__h { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.qhs-card__h h2, .qhs-card__h h3 { margin: 0; }
.qhs-lei { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.qhs-het { display: grid; gap: 16px; }

/* ------------------------------------------------------- lưới */
.qhs-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.qhs-grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.qhs-grid--3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.qhs-grid--trai { grid-template-columns: minmax(0, 1.6fr) minmax(240px, 1fr); align-items: start; }

.qhs-stat { background: var(--lac-nhat); border: 1px solid #c6ecec; border-radius: var(--ben); padding: 14px; }
.qhs-stat__so { font-size: 2rem; font-weight: 900; color: var(--lac-dam); line-height: 1.1; }
.qhs-stat__n { color: var(--muc-2); font-weight: 600; font-size: .86rem; }
.qhs-stat--vang { background: var(--vang-nhat); border-color: #f2dfa4; }
.qhs-stat--vang .qhs-stat__so { color: #9a6c00; }
.qhs-stat--hong { background: var(--hong-nhat); border-color: #ffd3da; }
.qhs-stat--hong .qhs-stat__so { color: #b3374f; }

/* ------------------------------------------------------- biểu mẫu */
.qhs-field { display: grid; gap: 4px; margin-bottom: 10px; }
.qhs-field > span { font-size: .82rem; font-weight: 700; color: var(--muc-2); }
input, select, textarea, .qhs-input {
  width: 100%; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--vien);
  background: #fff; color: var(--muc); font: inherit; font-size: .95rem;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--lac); outline-offset: 1px; border-color: transparent; }
input[readonly], textarea[readonly] { background: #f7f9fc; color: var(--muc-2); }
textarea { min-height: 84px; resize: vertical; }
input[type="file"] { padding: 8px; background: var(--lac-nhat); border-style: dashed; }
.qhs-tu { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.qhs-check { display: flex; gap: 8px; align-items: center; font-weight: 600; font-size: .9rem; }
input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--lac); }
input[type="number"] { max-width: 130px; }

/* ------------------------------------------------------- nút */
.qhs-btn, button.qhs-btn {
  display: inline-flex; align-items: center; gap: 6px; border: 0; cursor: pointer;
  background: var(--lac); color: #fff; font-weight: 700; font-size: .92rem; font-family: inherit;
  padding: 10px 16px; border-radius: 12px; box-shadow: 0 4px 12px rgba(14, 165, 164, .28);
}
.qhs-btn:hover { background: var(--lac-dam); text-decoration: none; color: #fff; }
.qhs-btn--phu { background: var(--vang); color: #5a4100; box-shadow: 0 4px 12px rgba(255, 201, 60, .35); }
.qhs-btn--phu:hover { background: #f0b52a; color: #3c2c00; }
.qhs-btn--lang { background: #eef2f8; color: var(--muc); box-shadow: none; border: 1px solid var(--vien); }
.qhs-btn--lang:hover { background: var(--lac-nhat); color: var(--lac-dam); }
.qhs-btn--hong { background: var(--hong); box-shadow: none; }
.qhs-btn--nh { padding: 6px 10px; font-size: .82rem; border-radius: 10px; }
.qhs-btn[disabled] { opacity: .55; cursor: not-allowed; }
.qhs-btn-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* ------------------------------------------------------- bảng */
.qhs-bang { width: 100%; border-collapse: collapse; font-size: .92rem; }
.qhs-bang th, .qhs-bang td { padding: 9px 10px; border-bottom: 1px solid var(--vien); vertical-align: top; }
.qhs-bang thead th {
  background: var(--lac-nhat); color: var(--lac-dam); font-weight: 800; text-align: left;
  position: sticky; top: 0; z-index: 2; white-space: nowrap;
}
.qhs-bang tbody tr:hover { background: #fbfdff; }
.qhs-bang td.qhs-so { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
.qhs-bang td.qhs-giua, .qhs-bang th.qhs-giua { text-align: center; }
.qhs-bang--ngang { display: block; overflow: auto; }
.qhs-chat { color: var(--muc-3); }

/* ------------------------------------------------------- nhãn */
.qhs-nhan, .qhs-badge {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: var(--no);
  font-size: .78rem; font-weight: 800; border: 1px solid transparent; white-space: nowrap;
}
.qhs-nhan--mo { background: var(--xanhla-nhat); color: #1d6c40; border-color: #bfe6cd; }
.qhs-nhan-- khoa { background: var(--vang-nhat); color: #8a6100; border-color: #f3dd9a; }
.qhs-nhan--dot { background: var(--hong-nhat); color: #b3374f; border-color: #ffd3da; }
.qhs-nhan--thuong { background: var(--lac-nhat); color: var(--lac-dam); border-color: #c6ecec; }
.qhs-nhan--tin { background: #eef2f8; color: var(--muc-2); border-color: var(--vien); }

.qhs-thongbao { padding: 12px 14px; border-radius: var(--ben); font-size: .92rem; border: 1px solid; }
.qhs-thongbao--ok { background: var(--xanhla-nhat); border-color: #bfe6cd; color: #17613a; }
.qhs-thongbao--tin { background: var(--lac-nhat); border-color: #c6ecec; color: var(--lac-dam); }
.qhs-thongbao--vang { background: var(--vang-nhat); border-color: #f3dd9a; color: #7d5600; }
.qhs-trong { padding: 26px 14px; text-align: center; color: var(--muc-2); background: #fbfcfe; border: 1px dashed var(--vien); border-radius: var(--ben); }

/* ------------------------------------------------------- xếp chỗ / ảnh */
.qhs-cho { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; }
.qhs-cho__o {
  border: 2px solid var(--vien); border-radius: 14px; padding: 8px; background: #fff; text-align: center;
  cursor: grab;
}
.qhs-cho__o b { display: block; font-size: .9rem; }
.qhs-cho__o span { font-size: .74rem; color: var(--muc-2); }
.qhs-cho__o:hover { border-color: var(--lac); background: var(--lac-nhat); }
button.qhs-cho__o { font: inherit; cursor: pointer; }
.qhs-cho__o--on { border-color: var(--vang); background: var(--vang-nhat); box-shadow: 0 0 0 3px #ffe9a8; }
.qhs-anh { max-width: 100%; border-radius: 12px; border: 1px solid var(--vien); display: block; }
.qhs-anh__kho { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.qhs-anh__kho figcaption { font-size: .78rem; color: var(--muc-2); }

/* ------------------------------------------------------- tiện ích */
.qhs-tab { display: flex; gap: 6px; flex-wrap: wrap; }
.qhs-tab a { padding: 7px 12px; border-radius: var(--no); background: #fff; border: 1px solid var(--vien); font-weight: 700; font-size: .86rem; }
.qhs-tab a.on { background: var(--lac); color: #fff; border-color: var(--lac); }
.qhs-li { display: grid; gap: 8px; }
.qhs-li__mon { border-left: 4px solid var(--lac); padding-left: 10px; }
.qhs-di { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px dashed var(--vien); padding: 7px 0; }
.qhs-lui { font-size: .8rem; color: var(--muc-3); }
.qhs-scroll { max-height: 420px; overflow: auto; }
.qhs-gach { height: 1px; background: var(--vien); border: 0; margin: 4px 0; }
.qhs-an { display: none; }

/* ------------------------------------------------------- in */
@media print {
  .qhs-side, .qhs-top, .qhs-lock, .qhs-btn, .qhs-btn-row, #blazor-error-ui { display: none !important; }
  .qhs-app { display: block; }
  .qhs-body { padding: 0; }
  .qhs-card { box-shadow: none; border-color: #ccc; break-inside: avoid; }
  body { background: #fff; font-size: 12.5px; }
}

@media (max-width: 900px) {
  .qhs-app { grid-template-columns: 1fr; }
  .qhs-side { position: static; height: auto; flex-direction: column; }
  /* Luoi 2 cot: moi thu nhin thay, khong phai vuot ngang de tim trang */
  .qhs-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; overflow: visible; }
  .qhs-nav a { white-space: normal; font-size: .92rem; line-height: 1.2; }
  .qhs-side__foot { display: none; }
}

/* Ô liên kết công khai: bấm là bôi đen, Ctrl+C gửi ngay (link tuyệt đối) */
.qhs-copy{width:100%;min-width:200px;font:600 .84rem/1.4 ui-monospace,Consolas,monospace;color:#0b6f74;
  background:#f4fbfb;border:1px dashed #9fd8d6;border-radius:10px;padding:7px 9px;cursor:text}
.qhs-copy:focus{outline:2px solid #0ea5a4;background:#fff}

/* Lịch sử chuyên cần theo tháng */
.qhs-bang--lich{font-size:.86rem}
.qhs-bang--lich th,.qhs-bang--lich td{text-align:center;padding:6px 4px;min-width:30px}
.qhs-bang--lich td:first-child,.qhs-bang--lich th:first-child{text-align:left;min-width:130px;position:sticky;left:0;background:#fff}
.qhs-bang--lich .qhs-o{cursor:pointer;font-size:1rem;line-height:1}
.qhs-bang--lich .qhs-o:hover{background:#eafaf9;border-radius:8px}
.qhs-bang--lich .qhs-cuoi-tuan{background:#fbfcfe;color:#9aa7bd}

/* ==================== BIỂU ĐỒ & DASHBOARD (animation, chạy cả mobile) ==================== */
@keyframes qhs-moc { from { transform: scaleY(0); opacity: 0 } to { transform: scaleY(1); opacity: 1 } }
@keyframes qhs-len { from { transform: translateY(8px); opacity: 0 } to { transform: none; opacity: 1 } }
@keyframes qhs-xoay { from { transform: rotate(-100deg) } to { transform: rotate(0) } }

.qhs-bar{display:flex;align-items:flex-end;gap:6px;min-height:96px;padding:10px 4px 4px;overflow:auto;scroll-snap-type:x proximity}
.qhs-bar--dai{min-height:130px}
.qhs-bar__cot{flex:1 0 34px;min-width:34px;height:var(--h,50%);min-height:14px;display:flex;flex-direction:column;
  justify-content:flex-end;align-items:center;gap:2px;scroll-snap-align:center;transition:height .5s cubic-bezier(.2,.8,.2,1)}
.qhs-bar__cot::before{content:"";width:100%;flex:1;min-height:10px;border-radius:9px 9px 4px 4px;
  background:linear-gradient(180deg,#37c98b,#0ea5a4);box-shadow:inset 0 -6px 10px rgba(11,111,116,.25);
  transform-origin:bottom;animation:qhs-moc .6s cubic-bezier(.2,.9,.25,1) both}
.qhs-bar__cot--vang::before{background:linear-gradient(180deg,#ffd76b,#ffb26b)}
.qhs-bar__cot i{font:800 .72rem/1 inherit;color:#0b6f74;font-style:normal}
.qhs-bar__cot b{font:700 .7rem/1.1 inherit;color:#5b6b8c;max-width:52px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.qhs-donut{position:relative;width:min(190px,60vw);aspect-ratio:1;border-radius:50%;margin:6px auto;
  background:conic-gradient(#0ea5a4 0 calc(var(--a,0) * 1%),#37c98b 0 calc((var(--a,0) + var(--b,0)) * 1%),
    #ffc93c 0 calc((var(--a,0) + var(--b,0) + var(--c,0)) * 1%),#ffb26b 0 calc((var(--a,0) + var(--b,0) + var(--c,0) + var(--d,0)) * 1%),
    #ff92a5 0 calc((var(--a,0) + var(--b,0) + var(--c,0) + var(--d,0) + var(--e,0)) * 1%),#eef3f9 0);
  box-shadow:0 8px 22px rgba(43,58,85,.14);animation:qhs-xoay .8s ease both}
.qhs-donut::after{content:"";position:absolute;inset:22%;background:#fff;border-radius:50%;box-shadow:inset 0 2px 8px rgba(43,58,85,.08)}
.qhs-donut span,.qhs-donut small{position:absolute;left:0;right:0;text-align:center;z-index:1}
.qhs-donut span{top:38%;font:900 1.5rem/1 inherit;color:#0b6f74}
.qhs-donut small{top:56%;font-size:.72rem;color:#5b6b8c}
.qhs-chu{display:flex;flex-wrap:wrap;gap:8px 12px;justify-content:center;font-size:.8rem;color:#5b6b8c}
.qhs-chu i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:4px}

/* Câu hỏi trên điện thoại: ô chạm to, một cột */
.qhs-dap{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin:10px 0}
.qhs-dap__o{display:flex;align-items:center;gap:10px;min-height:56px;padding:10px 14px;border-radius:16px;text-align:left;
  border:2px solid var(--vien,#e3e9f2);background:#fff;font:600 1rem/1.35 inherit;color:#2b3a55;cursor:pointer;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s}
.qhs-dap__o b{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:#eef3f9;color:#0b6f74}
.qhs-dap__o:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(14,165,164,.16)}
.qhs-dap__o.on{border-color:#0ea5a4;background:#eafaf9;box-shadow:0 0 0 3px rgba(14,165,164,.16)}
.qhs-dap__o.on b{background:#0ea5a4;color:#fff}
.qhs-cau{border:1px solid #e3e9f2;border-radius:14px;padding:12px;margin:10px 0;background:#fff;animation:qhs-len .45s ease both}
.qhs-cau__h{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:6px}
.qhs-cau__diem{width:74px}
.qhs-cau--dung{border-color:#9fd8d6;background:#f6fefc}
.qhs-cau--sai{border-color:#ffcdd6;background:#fff7f8}
.qhs-cau--cho{border-color:#ffe3a3;background:#fffaef}
.qhs-input--to{font-size:1.06rem;min-height:52px}
.qhs-public .qhs-grid{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
/* Mobile that su: cham >=44px, chu de doc, bang tro thanh ngang, khong dinh top bar */
@media (max-width:720px){
  html{ -webkit-text-size-adjust:100% }
  body{ font-size:.98rem }
  .qhs-btn{ min-height:44px; touch-action:manipulation; font-size:.98rem }
  input,select,textarea{ font-size:1rem }
  .qhs-top{ position:static }
  .qhs-side{ padding:12px 10px }
  .qhs-nav{ scrollbar-width:none; overscroll-behavior-x:contain }
  .qhs-nav::-webkit-scrollbar{ height:0 }
  .qhs-nav a{ min-height:44px; font-size:1rem }
  .qhs-card__h h2,.qhs-public h1{ font-size:1.12rem }
  .qhs-bang{ font-size:.86rem }
  .qhs-stat__so{ font-size:1.3rem }
  .qhs-body{ padding:12px 10px }
  .qhs-btn--nh{ min-height:40px }
  .qhs-nav a{ font-size:.95rem }
  .qhs-li{ padding:10px 8px }
  .qhs-stat a,.qhs-li a,.qhs-card a[href^="/"]{ display:inline-flex; align-items:center; min-height:44px; padding:8px 12px; background:#eff8f7; border-radius:10px }
}
@media (max-width:720px){
  .qhs-bar__cot{flex:0 0 28px;min-width:28px}
  .qhs-bar__cot b{font-size:.62rem;max-width:34px}
  .qhs-dap{grid-template-columns:1fr}
  .qhs-dap__o{min-height:60px;font-size:1.04rem}
  .qhs-donut{width:min(170px,70vw)}
}
@media print{
  .qhs-bar__cot::before,.qhs-donut,.qhs-cau{animation:none}
  .qhs-donut{box-shadow:none}
}

/* Link trong the = vung cham 44px tren mobile */
@media (max-width:720px){
  .qhs-stat a:not(.qhs-btn),.qhs-li a:not(.qhs-btn),.qhs-nho[href^="/"],.qhs-mini[href^="/"],.qhs-card a.qhs-nho{display:inline-flex;align-items:center;min-height:44px;padding:8px 12px;background:#eff8f7;border-radius:10px}
}