/* Tiến độ học của con (phuhuynh.html, 22/10/2026) — dùng biến màu và lớp .khung / .nut / .the của cong.css. */
.td-chon { display:flex; gap:6px; flex-wrap:wrap; }
.td-chon button { font-family:inherit; font-size:14px; font-weight:600; line-height:1.2; min-height:34px; padding:0 14px; border-radius:99px;
  border:1px solid var(--n-300); background:var(--trang); color:var(--n-700); cursor:pointer; }
.td-chon button[aria-selected=true] { background:var(--muc-600); border-color:var(--muc-600); color:var(--trang); }
.td-tuan { justify-content:space-between; }
.td-tuan b { font-size:14.5px; text-align:center; flex:1 1 auto; min-width:0; }
.td-tuan .nut { flex:none; }
.td-the-hang { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.td-luoi { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:10px; }
.td-kpi { border:1px solid var(--n-200); border-radius:var(--r); padding:12px; display:flex; flex-direction:column; gap:4px; min-width:0; background:var(--muc-50); }
.td-kpi .ten { font-size:13px; color:var(--n-600); font-weight:600; }
.td-kpi .so { font-size:20px; font-weight:800; color:var(--muc-900); line-height:1.25; overflow-wrap:anywhere; }
.td-kpi .phu { font-size:12.5px; color:var(--n-600); line-height:1.4; }
.td-thanh { height:8px; border-radius:99px; background:var(--n-200); overflow:hidden; margin-top:2px; }
.td-thanh i { display:block; height:100%; background:var(--muc-600); }
.td-bieu-do { display:flex; flex-direction:column; gap:6px; }
.td-ve { position:relative; height:150px; border-bottom:2px solid var(--n-300); }
.td-ve-cot { position:absolute; inset:0; display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:8px; padding:0 4px; }
.td-ve-cot > div { display:flex; align-items:flex-end; justify-content:center; height:100%; }
.td-thanh-cot { width:min(36px, 80%); min-height:2px; border-radius:6px 6px 0 0; background:var(--muc-200); border:1px solid var(--muc-600); border-bottom:0; }
.td-thanh-cot.dat { background:var(--muc-600); }
.td-thanh-cot.rong { border:0; min-height:0; background:none; }
.td-vach { position:absolute; left:0; right:0; border-top:2px dashed var(--luu); pointer-events:none; }
.td-vach span { position:absolute; right:0; top:-19px; font-size:12px; font-weight:600; color:var(--luu); background:var(--trang); padding:0 4px; }
.td-nhan { display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:8px; padding:0 4px; text-align:center; }
.td-nhan > div { display:flex; flex-direction:column; min-width:0; font-size:12.5px; line-height:1.35; color:var(--n-600); }
.td-nhan b { font-size:13.5px; color:var(--n-900); }
.td-nhan .hn { color:var(--muc-700); font-weight:700; }
.td-chu-giai { display:flex; gap:14px; flex-wrap:wrap; font-size:12.5px; color:var(--n-600); align-items:center; }
.td-hai-cot { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px; }
.td-hai-cot > div { display:flex; flex-direction:column; gap:8px; min-width:0; }
.td-ds { list-style:none; margin:0; padding:0; max-height:350px; overflow-y:auto; border:1px solid var(--n-200); border-radius:var(--r); }
.td-ds li { padding:9px 12px; border-bottom:1px solid var(--n-200); display:flex; flex-direction:column; gap:2px; min-width:0; overflow-wrap:anywhere; }
.td-ds li:last-child { border-bottom:0; }
.td-ds .ghi { line-height:1.4; }
.td-rong { padding:14px 12px; color:var(--n-500); font-size:14px; }
.td-zalo label.tick { align-items:center; }
dialog.hop textarea { font-family:inherit; font-size:15px; color:var(--n-900); border:1px solid var(--n-300); border-radius:var(--r); background:var(--trang);
  padding:8px 11px; width:100%; min-height:84px; resize:vertical; }
dialog.hop textarea:focus { outline:2px solid var(--muc-200); outline-offset:1px; }
@media (max-width:760px) { .td-luoi { grid-template-columns:repeat(2, minmax(0, 1fr)); } .td-hai-cot { grid-template-columns:minmax(0, 1fr); } }
@media (max-width:420px) {
  .td-ve-cot, .td-nhan { gap:3px; padding:0; }
  .td-nhan > div { font-size:11.5px; } .td-nhan b { font-size:12.5px; }
  .td-kpi .so { font-size:18px; }
}