/* sb-parent.css — Cổng phụ huynh theo mẫu design/refs/03-parent.png.
   Nạp SAU <style> nội tuyến của parent.html; chỉ đổi hình thức, mọi id/onclick giữ nguyên.
   Mục lục: 1 Khung · 2 Sidebar · 3 Lời chào · 4 Chưa chọn con · 5 Báo cáo · 6 AI Cố vấn · 7 Điện thoại */

/* ── 1. Khung ───────────────────────────────────────────────────────────── */
body{ background:linear-gradient(180deg,#E3F7F4 0%,#EEFAF8 45%,#F7FDFC 100%) !important; }
.header{ height:64px !important; background:linear-gradient(110deg,#17BFA0 0%,#13AE96 55%,#2AC3A6 100%) !important; }
.logo-sub{ font-size:10.5px; }
/* Cột sidebar co theo màn (768→240 · 1024→252 · 1366→279 · ≥1600→300) để vùng báo cáo không bị ép ở tablet */
@media (min-width:761px){ .layout{ grid-template-columns:clamp(240px, 8vw + 170px, 300px) minmax(0,1fr); } }
/* Vùng chính chỉ cuộn khi báo cáo thật sự dài; thanh cuộn mảnh, nằm trong vùng nội dung */
.main{ scrollbar-width:thin; scrollbar-color:#BFE3DA transparent; }

/* ── 2. Sidebar: không cuộn cả cột — danh sách con tự cuộn khi có nhiều con ── */
.sidebar{ background:#F2FBF9 !important; border-right:1px solid #DDF0EB !important; padding:16px 14px !important; gap:10px !important; overflow:hidden !important; }
#children-list{ flex:0 1 auto; min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:10px; padding:2px; scrollbar-width:thin; }
.sidebar-title{ font-size:13px !important; letter-spacing:.06em !important; color:#0E8F7E !important; display:flex; align-items:center; gap:8px; flex-shrink:0; }
.child-card{ position:relative; flex-shrink:0; border-radius:20px !important; border:2px solid #E1F2EC !important; padding:12px 34px 12px 14px !important; box-shadow:0 6px 16px rgba(16,76,92,.06) !important; }
.child-card::after{ content:"›"; position:absolute; right:14px; top:20px; font-size:22px; font-weight:700; color:#5D7894; }
.child-card.active{ border-color:#25C2A5 !important; background:#fff !important; box-shadow:0 8px 20px rgba(19,166,153,.16) !important; }
.child-card .cc-name{ font-family:'Baloo 2','Nunito',sans-serif; font-size:19px !important; font-weight:800; color:#0F2B57 !important; }
.child-card .cc-name::before{ content:""; width:44px; height:44px; border-radius:50%; flex-shrink:0;
  background:#E2F6F1 url(/images/design/parent-child.webp) center/cover no-repeat; box-shadow:0 0 0 2px #fff, 0 3px 8px rgba(16,76,92,.12); }
.child-card .cc-meta{ padding-left:52px; margin-top:-10px; }
.child-card .cc-stats{ margin-top:8px; gap:6px !important; }
.child-card .cc-stat{ background:#F4F8FA !important; border-radius:12px !important; padding:5px 10px !important; font-weight:800 !important; color:#2C4566 !important; }
.child-card .cc-stat span{ color:#0F9E89 !important; }
.link-box{ flex-shrink:0; background:#fff !important; border:1.5px solid #E1EFEC !important; border-radius:20px !important; box-shadow:0 6px 16px rgba(16,76,92,.05) !important; padding:12px 14px !important; }
.link-box .link-title{ color:#0E8F7E !important; }
.link-input{ border-radius:14px !important; border:1.5px solid #E1ECEF !important; padding-left:38px !important;
  background:#fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%235D7894' stroke-width='1.8'><rect x='3' y='5' width='18' height='14' rx='2'/><path d='m3 7 9 6 9-6'/></svg>") no-repeat 12px center !important; }
.link-btn{ border-radius:14px !important; background:linear-gradient(135deg,#1FBF9F,#109C8E) !important; box-shadow:0 8px 16px rgba(16,156,142,.25) !important; }
.side-tip{ flex-shrink:0; background:linear-gradient(180deg,#FFFAEA,#FFF3D8) !important; border:1.5px solid #F6E3B1 !important; border-radius:22px !important; padding:12px 16px 14px !important; box-shadow:none !important; position:relative; }
.side-tip img{ content:url(/images/design/parent-tip.webp); height:84px !important; filter:none !important; }
.side-tip .st-title{ font-size:17px !important; font-weight:800; color:#0E8F7E !important; }
.side-tip .st-sub{ font-size:12.5px !important; }
/* Màn hình thấp: thẻ lời nhắn gọn thành 1 hàng để không đẩy sidebar phải cuộn */
@media (max-height:800px){
  .side-tip{ display:grid; grid-template-columns:auto 1fr; column-gap:10px; align-items:center; text-align:left !important; padding:10px 12px !important; }
  .side-tip img{ grid-row:1 / span 2; height:54px !important; margin:0 !important; }
  .side-tip .st-title{ font-size:15px !important; }
  .side-tip .st-sub{ font-size:11.5px !important; }
}

/* ── 3. Lời chào (thu gọn khi đã chọn con để nhường chỗ cho báo cáo) ──────── */
.hero{ position:relative; overflow:hidden; flex-shrink:0; background:linear-gradient(110deg,#F7FFFD 0%,#ECFAF7 60%,#E2F6F2 100%) !important; border:1.5px solid #D6F0E9 !important; border-radius:24px !important; box-shadow:0 8px 22px rgba(16,76,92,.07) !important; padding:16px 210px 16px 22px !important; min-height:110px; }
.hero::after{ content:""; position:absolute; right:14px; top:50%; transform:translateY(-50%); width:170px; height:112px; pointer-events:none;
  background:url(/images/design/parent-banner.webp) right center/contain no-repeat; }
.hero-title{ font-size:28px !important; font-weight:800; color:#0F2B57 !important; }
.hero-title span{ color:#13AE96 !important; }
.hero-sub{ font-size:14.5px !important; color:#4A6582 !important; }
body.has-child .hero{ min-height:0; padding:10px 18px !important; }
body.has-child .hero::after, body.has-child .hero .hero-sub{ display:none; }
body.has-child .hero .hero-mascot{ height:44px !important; }
body.has-child .hero-title{ font-size:20px !important; }
.hero::after, .p-guide .empty-mascot, .side-tip img{
  -webkit-mask-image:radial-gradient(ellipse 62% 62% at 50% 52%,#000 55%,transparent 100%); mask-image:radial-gradient(ellipse 62% 62% at 50% 52%,#000 55%,transparent 100%); }

/* ── 4. Chưa chọn con: hướng dẫn + chọn nhanh hồ sơ ─────────────────────── */
.p-guide{ min-height:0 !important; flex:1; justify-content:center; gap:10px !important; padding:12px 8px; color:#4A6582 !important; }
.p-guide .empty-mascot{ content:url(/images/design/parent-empty.webp); height:170px !important; filter:none !important; animation:none !important; }
.pg-title{ font-family:'Baloo 2','Nunito',sans-serif; font-size:28px; font-weight:800; color:#0F2B57; line-height:1.15; }
.pg-sub{ font-size:15px; font-weight:600; color:#5D7894; max-width:520px; line-height:1.5; }
.pg-children{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin:6px 0 4px; }
.pg-child{ display:flex; align-items:center; gap:12px; min-width:250px; padding:12px 16px; border-radius:20px; border:2px solid #CFEDE4; background:#fff; cursor:pointer;
  font-family:'Nunito',Arial,sans-serif; text-align:left; box-shadow:0 8px 18px rgba(16,76,92,.08); transition:transform .16s, border-color .16s; }
.pg-child:hover{ transform:translateY(-2px); border-color:#25C2A5; }
.pg-child-ava{ width:46px; height:46px; border-radius:50%; flex-shrink:0; background:#E2F6F1 url(/images/design/parent-child.webp) center/cover no-repeat; }
.pg-child-main{ display:flex; flex-direction:column; flex:1; min-width:0; }
.pg-child-main b{ font-size:16.5px; color:#0F2B57; }
.pg-child-main small{ font-size:12.5px; font-weight:700; color:#5D7894; }
.pg-child-go{ font-size:24px; color:#13AE96; font-weight:700; }
.pg-none{ width:100%; font-size:14px; font-weight:700; color:#5D7894; }
.pg-link-btn{ border:none; cursor:pointer; padding:11px 20px; border-radius:14px; font:900 14px 'Nunito',Arial,sans-serif; color:#fff; background:linear-gradient(135deg,#1FBF9F,#109C8E); box-shadow:0 8px 16px rgba(16,156,142,.25); }
.pg-steps{ list-style:none; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; width:100%; max-width:860px; margin:10px 0 0; padding:0; text-align:left; }
.pg-steps li{ display:flex; gap:12px; align-items:flex-start; background:#fff; border:1.5px solid #E1EFEC; border-radius:18px; padding:12px 14px; box-shadow:0 4px 12px rgba(16,76,92,.05); }
.pg-steps li > span{ width:30px; height:30px; border-radius:50%; flex-shrink:0; display:grid; place-items:center; font-weight:900; color:#fff; background:#19B49C; }
.pg-steps li b{ display:block; font-size:14.5px; color:#0F2B57; margin-bottom:2px; }
.pg-steps li div{ font-size:12.5px; font-weight:600; color:#5D7894; line-height:1.45; }
@media (max-height:780px){ .p-guide .empty-mascot{ height:120px !important; } .pg-title{ font-size:24px; } }

/* ── 5. Báo cáo ─────────────────────────────────────────────────────────── */
.report-summary{ background:linear-gradient(120deg,#F3FCF9,#EAF7FF); border:1.5px solid #D3EEE6; border-radius:18px; padding:14px 18px; }
.rs-title{ font-family:'Baloo 2',cursive; font-size:17px; color:#0F2B57; margin-bottom:4px; }
.report-summary p{ font-size:14.5px; font-weight:600; color:#2C4566; line-height:1.65; margin:0; }
.report-summary b{ color:#0E8F7E; }
.rs-note{ font-size:12px; color:#7A8CA3; font-weight:600; margin-top:6px; }
.report-empty{ display:flex; align-items:center; gap:12px; background:#fff; border:1.5px dashed #CFE6DF; border-radius:18px; padding:16px 18px; color:#5D7894; font-weight:700; }
.report-empty .empty-icon{ font-size:30px; }
.report-error{ color:#C0392B; font-weight:700; padding:16px; background:#FFF4F4; border-radius:14px; }
.chart-empty{ font-size:13.5px; font-weight:600; color:#7A8CA3; padding:8px 0 4px; }
.chart-foot{ font-size:12px; font-weight:700; color:#7A8CA3; margin-top:10px; }
.act-bars{ display:flex; flex-direction:column; gap:9px; }
.act-row{ display:grid; grid-template-columns:minmax(90px,140px) 1fr 30px; align-items:center; gap:10px; font-size:13px; font-weight:700; color:#2C4566; }
.act-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.act-track{ height:12px; border-radius:8px; background:#EEF4F7; overflow:hidden; }
.act-fill{ display:block; height:100%; border-radius:8px; }
.act-row b{ text-align:right; color:#0F2B57; }
.review-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px; }
.review-list li{ display:flex; justify-content:space-between; gap:10px; padding:8px 12px; border-radius:12px; background:#FFF6EF; font-size:13.5px; font-weight:700; color:#2C4566; }
.review-list b{ color:#E0662E; }

/* ── 6. AI Cố vấn: khung chat chiếm trọn chiều cao còn lại (desktop & tablet) ── */
@media (min-width:761px){
  body.advisor-open .main{ overflow:hidden; }
  body.advisor-open .hero, body.advisor-open #empty-state{ display:none !important; }
  body.advisor-open #child-view{ flex:1; min-height:0; gap:10px !important; }
  body.advisor-open #view-advisor{ display:flex !important; flex-direction:column; flex:1; min-height:0; gap:10px; }
  body.advisor-open #advisor-assessment .assess-box{ padding:10px 16px; }
  body.advisor-open #advisor-assessment .assess-box{ display:flex; align-items:baseline; gap:10px; }
  body.advisor-open #advisor-assessment .assess-title{ flex-shrink:0; margin:0; }
  body.advisor-open #advisor-assessment .assess-text{ font-size:13px; line-height:1.5; }
  body.advisor-open .adv-note{ padding-bottom:8px; }
  body.advisor-open .advisor-card{ flex:1; min-height:0; margin-top:0; }
  body.advisor-open .advisor-messages{ flex:1; min-height:0; max-height:none; }
}
.advisor-head{ position:relative; }
.adv-stop{ margin-left:auto; border:none; cursor:pointer; padding:8px 14px; border-radius:12px; font:900 13px 'Nunito',Arial,sans-serif; color:#0E6E62; background:#fff; box-shadow:0 4px 10px rgba(0,0,0,.12); }
.adv-stop[hidden]{ display:none; }
.advisor-messages .msg-row .bubble{ max-width:min(720px,82%); line-height:1.6; }
.msg-speak{ display:block; margin-top:8px; border:1.5px solid #CFEDE4; background:#F2FBF8; color:#0E8F7E; border-radius:10px; padding:4px 10px; font:800 12px 'Nunito',Arial,sans-serif; cursor:pointer; }
.adv-divider{ align-self:center; text-align:center; font-size:12.5px; font-weight:800; color:#0E8F7E; background:#E8F8F3; border-radius:999px; padding:6px 14px; }
.adv-status{ min-height:0; padding:0 18px; font-size:13px; font-weight:800; color:#0E8F7E; }
.adv-status:not(:empty){ padding:6px 18px 0; }
.adv-status.is-error{ color:#C0392B; }
.advisor-quick{ flex-wrap:nowrap !important; overflow-x:auto; scrollbar-width:none; }
.advisor-quick::-webkit-scrollbar{ display:none; }
.advisor-quick .qp{ flex-shrink:0; white-space:nowrap; }
.adv-mic{ width:48px; height:48px; flex-shrink:0; border-radius:50%; border:2px solid #CDEEE4; background:#F2FBF8; font-size:20px; cursor:pointer; transition:transform .15s; }
.adv-mic:disabled{ opacity:.45; cursor:not-allowed; }
.adv-mic.is-listening{ background:#E03E52; border-color:#E03E52; color:#fff; animation:advPulse 1.1s ease-in-out infinite; }
@keyframes advPulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(224,62,82,.45); } 50%{ box-shadow:0 0 0 10px rgba(224,62,82,0); } }
@media (prefers-reduced-motion:reduce){ .adv-mic.is-listening{ animation:none; } }
.adv-note{ padding:0 16px 12px; font-size:11.5px; font-weight:600; color:#8A9BB0; line-height:1.45; }
.advisor-input-row{ align-items:center !important; }

@media (max-width:1000px){ .pg-steps{ grid-template-columns:1fr; max-width:520px; } }

/* ── 7. Điện thoại ──────────────────────────────────────────────────────── */
@media (max-width:820px){
  .hero{ padding-right:22px !important; }
  .hero::after{ display:none; }
}
@media (max-width:760px){
  /* Chiều cao theo vùng nhìn thấy thật (bàn phím ảo mở → co lại, ô nhập không bị che) */
  html, body{ height:var(--sb-vvh, 100dvh) !important; }
  .p-guide{ justify-content:flex-start; padding:4px 2px 8px; }
  .p-guide .empty-mascot{ height:96px !important; }
  .pg-title{ font-size:21px; }
  .pg-sub{ font-size:13.5px; }
  .pg-child{ min-width:0; width:100%; }
  .pg-steps li{ padding:10px 12px; }
  .act-row{ grid-template-columns:minmax(80px,110px) 1fr 26px; }
  .adv-mic{ width:44px; height:44px; font-size:18px; }
  .adv-note{ padding:0 10px 8px; font-size:11px; }
  .advisor-head .adv-stop{ padding:6px 10px; }
  body.parent-chat-open .advisor-head{ display:flex !important; }
  body .advisor-head .ah-sub{ display:block !important; font-size:11.5px; }   /* luôn hiện hồ sơ con đang hỏi */
  .advisor-messages .msg-row .bubble{ max-width:86%; }
}

/* ── 8. Desktop (≥1101px): mọi màn vừa 1 viewport, không cuộn ────────────────
   Báo cáo chia 3 mục (Tổng quan · Biểu đồ · Chi tiết bài làm) bằng các nút ngay hàng tab;
   chi tiết bài làm chia trang theo chiều cao còn lại (assets/sb-fit.js). Màn nhỏ hơn: xếp dọc, cuộn tự nhiên. */
.tab-sec{ display:none; }
.tab-sec.active{ background:linear-gradient(135deg,#1FCBA6,#11917A); }
@media (min-width:1101px){
  #tab-report{ display:none; }
  .tab-sec{ display:block; }
  #child-view{ flex:1 1 auto; min-height:0; gap:12px !important; }
  #view-report{ flex:1 1 0; min-height:0; }
  #view-report > .rsec{ display:none; }
  #view-report[data-sec="overview"] > .rsec[data-sec="overview"],
  #view-report[data-sec="charts"] > .rsec[data-sec="charts"],
  #view-report[data-sec="companion"] > .rsec[data-sec="companion"],
  #view-report[data-sec="details"] > .rsec[data-sec="details"]{ display:flex; flex-direction:column; gap:14px; flex:1 1 0; min-height:0; }
  .rsec[data-sec="charts"] > .charts-grid{ align-items:start; }
  .subj-fit{ flex:1 1 0; min-height:0; }
  .subj-fit .sb-fit-items{ gap:8px; }
  .subj-fit .subj-header{ margin:8px 0 0; }
  .subj-fit .sb-fit-items > .subj-header:first-child{ margin-top:0; }
}
/* Câu hỏi gợi ý cho AI Cố vấn: xuống dòng (không cuộn ngang với thanh cuộn bị ẩn) */
@media (min-width:761px){ #advisor-quick{ flex-wrap:wrap !important; overflow-x:visible; } }
@media (min-width:1101px){
  .ov-grid{ grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); align-items:start; }
  .ch-grid{ grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr); align-items:start; }
}
.donut-label{ font-size:11px; }
/* AI Cố vấn trên laptop thấp: bớt lề đầu khung & ô nhập để lời chào ban đầu hiện trọn */
@media (min-width:761px) and (max-height:880px){
  .advisor-head{ padding:10px 16px; }
  .advisor-head img{ height:32px; }
  .advisor-messages{ padding:12px 16px; gap:10px; }
  .advisor-quick{ padding-bottom:8px; }
  .advisor-input-row{ padding:8px 14px 10px; }
}
/* Desktop rất thấp (cửa sổ ≤720px): bỏ hình trang trí cột trái, gọn khoảng đệm — chữ giữ nguyên cỡ */
@media (min-width:761px) and (max-height:720px){
  .side-tip img{ display:none !important; }
  .side-tip{ padding:8px 12px !important; }
  .link-box{ padding:10px 12px !important; }
  .child-card{ padding:10px 34px 10px 12px !important; }
  .report-header{ padding:8px 14px; }
  .rh-avatar{ width:38px; height:38px; font-size:19px; }
  #child-view{ gap:10px !important; }
  .stat-card{ padding:8px 10px; }
  .stat-ico{ font-size:16px; margin:0; }
  .review-list{ gap:5px; }
  .review-list li{ padding:6px 12px; }
  .chart-card{ padding:10px 14px; }
  .advisor-messages{ padding:10px 14px; }
  .advisor-quick .qp{ padding:6px 11px; font-size:12.5px; }
  .adv-note{ font-size:11px; padding-bottom:6px; }
  body.advisor-open #advisor-assessment .assess-box{ padding:8px 14px; }
}
@media (min-width:761px) and (max-height:720px){
  .side-tip{ display:block !important; text-align:center !important; }
  .side-tip .st-sub{ margin-top:2px; }
  .sidebar .sidebar-title{ font-size:12px !important; letter-spacing:.02em !important; }
  .main{ padding-top:10px; padding-bottom:10px; }
  .tab-btn{ padding:7px 10px; }
  .report-header{ padding:6px 14px; }
  .rh-avatar{ width:34px; height:34px; font-size:17px; }
  body.advisor-open #advisor-assessment .assess-text{ line-height:1.4; }
  body.advisor-open #advisor-assessment .assess-box{ padding:6px 14px; }
  /* Phụ đề khung chat lặp lại tên con & kỳ báo cáo đã có ngay dòng trên → ẩn khi màn quá thấp */
  .advisor-head .ah-sub{ display:none; }
  .advisor-head{ padding:8px 16px; }
}
@media (min-width:761px) and (max-height:720px){
  .advisor-messages{ padding:8px 14px; }
  .advisor-input-row{ padding:6px 14px 8px; }
}

/* ── Đồng hành cùng con (hồ sơ học · hoạt động · Góc chia sẻ chỉ thống kê) ── */
.comp-grid{ grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); align-items:start; }
.comp-share{ grid-column:1 / -1; }
.comp-list{ list-style:none; margin:6px 0 0; padding:0; display:flex; flex-direction:column; gap:8px; }
.comp-list li{ display:flex; flex-direction:column; gap:2px; font-size:13.5px; font-weight:700; color:#2C4566; overflow-wrap:anywhere; }
.comp-list li small{ color:#7A8BA5; font-weight:600; }
.comp-row{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:8px 0; }
.comp-k{ font-size:12.5px; font-weight:900; color:#5A6890; margin-right:4px; }
.comp-chip{ background:#EAF7F3; color:#0E8F7E; border-radius:999px; padding:4px 10px; font-size:12.5px; font-weight:800; }
.comp-starters ul{ margin:4px 0 0; padding-left:18px; flex-basis:100%; font-size:13.5px; font-weight:600; color:#2C4566; }
.comp-alert{ background:#FFF8E1; border:2px solid #FFD36B; border-radius:14px; padding:10px 14px; font-size:13.5px; line-height:1.6; color:#5A4318; margin:8px 0; }
.comp-share p{ margin:4px 0; font-size:14px; font-weight:600; color:#2C4566; }

/* Ô mật khẩu khi liên kết tài khoản con: biểu tượng ổ khoá thay cho phong bì */
.link-input[type="password"]{ background:#fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%235D7894' stroke-width='1.8'><rect x='4' y='10' width='16' height='10' rx='2'/><path d='M8 10V7a4 4 0 0 1 8 0v3'/></svg>") no-repeat 12px center !important; }