/* ============================================================
   08b-report.css — Trang báo cáo phụ huynh
   Dùng design system 08-parent-system.css (cùng màu, card, brand)
   ============================================================ */
.report{position:fixed;inset:0;z-index:49;background:var(--p-bg);color:var(--p-ink);
  display:none;flex-direction:column;overflow:hidden}
.report.open{display:flex}

/* thanh tiêu đề — đồng bộ với modal head */
.rp-bar{flex:0 0 auto;display:flex;align-items:center;gap:14px;
  padding:16px clamp(16px,4vw,28px);background:var(--p-surface);border-bottom:1px solid var(--p-line)}
.rp-back{border:0;background:var(--p-surface-2);cursor:pointer;width:44px;height:44px;
  border-radius:var(--p-radius-sm);display:grid;place-items:center;transition:background .15s}
.rp-back:hover{background:var(--p-line)}
.rp-back svg{width:22px;height:22px;stroke:var(--p-ink)}
.rp-head{font-weight:700;font-size:19px;letter-spacing:-.01em}

.rp-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:clamp(16px,4vw,24px);max-width:720px;width:100%;margin:0 auto}

/* ---- chỉ số tổng thể ---- */
.rp-score-card{background:var(--p-surface);border-radius:var(--p-radius);padding:var(--p-pad);
  margin-bottom:16px;box-shadow:var(--p-shadow);border:1px solid var(--p-line)}
.rp-score-main{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.rp-score-ring{position:relative;width:112px;height:112px;flex:0 0 auto}
.rp-score-ring svg{width:112px;height:112px}
.rp-score-num{position:absolute;inset:0;display:grid;place-items:center;
  font-weight:700;font-size:30px;flex-direction:column;color:var(--p-ink)}
.rp-score-num span{font-size:13px;color:var(--p-ink-3);font-weight:600}
.rp-score-info{flex:1;min-width:200px}
.rp-score-label{font-weight:700;font-size:20px;color:var(--accent)}
.rp-score-desc{color:var(--p-ink-2);font-size:13.5px;margin-top:6px;line-height:1.5;font-weight:500}
.rp-factors{margin-top:18px;display:flex;flex-direction:column;gap:13px}
.rp-factor-top{display:flex;justify-content:space-between;font-weight:600;font-size:14px;
  margin-bottom:6px;color:var(--p-ink)}
.rp-factor-top b{font-weight:700}
.rp-factor-bar{height:9px;background:var(--p-surface-2);border-radius:5px;overflow:hidden}
.rp-factor-bar i{display:block;height:100%;border-radius:5px;transition:width .5s}

/* ---- scorecard thời gian ---- */
.rp-cards{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-bottom:16px}
@media(max-width:520px){.rp-cards{grid-template-columns:1fr 1fr 1fr;gap:8px}}
.rp-card{background:var(--p-surface);border-radius:var(--p-radius);padding:18px 12px;text-align:center;
  box-shadow:var(--p-shadow);border:1px solid var(--p-line)}
.rp-card-ico{width:38px;height:38px;border-radius:11px;background:var(--p-brand-soft);
  display:grid;place-items:center;margin:0 auto 8px}
.rp-card-ico svg{width:20px;height:20px;stroke:var(--p-brand)}
.rp-card-val{font-weight:700;font-size:19px;color:var(--p-ink);letter-spacing:-.01em}
.rp-card-lbl{color:var(--p-ink-3);font-size:13px;font-weight:600;margin-top:2px}

/* ---- block chung ---- */
.rp-block{background:var(--p-surface);border-radius:var(--p-radius);padding:var(--p-pad);
  margin-bottom:16px;box-shadow:var(--p-shadow);border:1px solid var(--p-line)}
.rp-block-title{font-weight:700;font-size:16px;margin-bottom:16px;color:var(--p-ink)}
.rp-empty{text-align:center;color:var(--p-ink-3);padding:20px;font-weight:600}

/* ---- chart cột ---- */
.rp-chart{width:100%;height:auto;background:var(--p-brand);border-radius:14px;padding:14px}

/* ---- chuyên mục ---- */
.rp-muc{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.rp-muc:last-child{margin-bottom:0}
.rp-muc-emoji{font-size:20px;flex:0 0 auto;width:24px;text-align:center}
.rp-muc-ten{font-weight:600;font-size:14px;flex:0 0 88px;color:var(--p-ink)}
.rp-muc-bar{flex:1;height:9px;background:var(--p-surface-2);border-radius:5px;overflow:hidden}
.rp-muc-bar i{display:block;height:100%;background:var(--p-brand);border-radius:5px}
.rp-muc-time{flex:0 0 auto;font-size:13px;color:var(--p-ink-2);font-weight:600;min-width:64px;text-align:right}

/* ---- top video ---- */
.rp-vid{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--p-line)}
.rp-vid:last-child{border-bottom:0}
.rp-vid-rank{flex:0 0 auto;width:24px;height:24px;border-radius:8px;background:var(--p-brand-soft);
  display:grid;place-items:center;font-weight:700;font-size:13px;color:var(--p-brand)}
.rp-vid-thumb{flex:0 0 auto;width:68px;height:40px;border-radius:8px;object-fit:cover;background:var(--p-surface-2)}
.rp-vid-info{flex:1;min-width:0;display:flex;flex-direction:column}
.rp-vid-info b{font-weight:700;font-size:14px;line-height:1.3;color:var(--p-ink);
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.rp-vid-info small{color:var(--p-ink-3);font-size:12.5px;margin-top:2px}
.rp-vid-time{flex:0 0 auto;font-size:13px;color:var(--p-ink-2);font-weight:600}