/* ═══════════════════════════════════════════════════════════════════════════
   sb-design.css — Lớp giao diện theo mẫu trong buddymath/design/refs.
   Nạp SAU mathbuddy-kids.css. Chỉ đổi hình thức; mọi id/onclick/luồng giữ nguyên.
   Kích thước KHÔNG phóng/thu cả trang (không zoom/scale): dùng token --sb-* bên dưới
   (cột sidebar, bề rộng nội dung tối đa, lề, cỡ tiêu đề bằng clamp có chặn trên/dưới).
   Mục lục: 1 Token · 2 Khung trang · 3 Sidebar · 4 Topbar · 5 Thành phần dùng chung
            6+ Từng màn hình (Trang chủ, Hỏi đáp, Tư duy, Tiếng Anh, Lịch sử,
            Thành tích, Hồ sơ, Cài đặt, Hướng dẫn)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Token (màu lấy mẫu trực tiếp từ ảnh thiết kế) ───────────────────── */
:root{
  --sb-navy:#0F2B57;        /* tiêu đề */
  --sb-nav:#1F3F69;         /* chữ menu */
  --sb-sub:#5D7894;         /* phụ đề */
  --sb-muted:#8FA3B8;
  --sb-teal:#13A699;        /* nút chính */
  --sb-teal-2:#1FCBA6;
  --sb-quote:#09877F;
  --sb-line:#E3F0EF;
  --sb-card:#FFFFFF;
  --sb-r-lg:26px; --sb-r-md:20px; --sb-r-sm:14px;
  --sb-shadow:0 10px 28px rgba(16,76,92,.09);
  --sb-shadow-sm:0 4px 14px rgba(16,76,92,.07);
  --sb-grad-active:linear-gradient(90deg,#0DB4A0 0%,#38CFA2 55%,#6DE298 100%);
  --sb-grad-hero:linear-gradient(110deg,#1CC9A8 0%,#2FD1B3 45%,#8BE6D6 100%);
  --sb-script:'Pangolin','Baloo 2',cursive;
  /* Kích thước dùng chung — co giãn theo bề rộng nhưng có giới hạn rõ ràng */
  --sb-side-w:clamp(252px, 8vw + 150px, 284px);    /* 1024→252 · 1366→259 · 1920→284 */
  --sb-page-max:1360px;                             /* nội dung căn giữa trên màn rộng */
  --sb-gutter:clamp(14px, 1.6vw, 28px);             /* lề trong vùng nội dung */
  --sb-fs-display:clamp(26px, 1.1vw + 16px, 36px);  /* lời chào / tiêu đề banner */
  --sb-fs-title:clamp(24px, .7vw + 16px, 32px);     /* tiêu đề trang */
}

/* ── 2. Khung trang ─────────────────────────────────────────────────────── */
body:not(.role-parent){
  background:
    radial-gradient(ellipse 340px 120px at 6% 4%, rgba(255,255,255,.85), transparent 70%),
    radial-gradient(ellipse 420px 140px at 62% 0%, rgba(255,255,255,.7), transparent 70%),
    radial-gradient(ellipse 360px 130px at 96% 96%, rgba(255,255,255,.8), transparent 70%),
    linear-gradient(180deg,#C2F2F0 0%,#D9F6F5 24%,#ECFAFA 55%,#F6FDFD 100%) !important;
  background-attachment:fixed !important;
}
body:not(.role-parent) .layout{ padding:12px !important; gap:14px !important; }
@media (min-width:901px){ body:not(.role-parent) .layout{ grid-template-columns:var(--sb-side-w) minmax(0,1fr) !important; } }
body:not(.role-parent) .main-area{
  border-radius:var(--sb-r-lg) !important;
  background:linear-gradient(180deg,rgba(255,255,255,.38) 0%,rgba(255,255,255,.62) 60%,rgba(255,255,255,.8) 100%) !important;
  isolation:isolate;
  box-shadow:0 10px 30px rgba(16,76,92,.07) !important;
  border:1px solid rgba(255,255,255,.7);
}

/* Lá trang trí góc dưới phải: làm mờ viền ảnh để hoà vào nền, nằm DƯỚI nội dung (z-index -1 trong isolate) */
body:not(.role-parent) .main-area::after{
  content:""; position:absolute; right:0; bottom:0; width:170px; height:150px; z-index:-1; pointer-events:none;
  background:url(/images/design/main-leaves-r.webp) no-repeat right bottom / contain;
  -webkit-mask-image:radial-gradient(ellipse 85% 85% at 100% 100%,#000 55%,transparent 100%); mask-image:radial-gradient(ellipse 85% 85% at 100% 100%,#000 55%,transparent 100%);
}
@media (max-width:760px){ body:not(.role-parent) .main-area::after{ display:none; } }

/* ── 3. Sidebar ─────────────────────────────────────────────────────────── */
body:not(.role-parent) .sidebar{
  border-radius:var(--sb-r-lg) !important;
  background:#fff url(/images/design/side-leaves.webp) no-repeat center bottom / 100% auto !important;
  box-shadow:var(--sb-shadow) !important;
}
.sb-side-logo{ padding:16px 14px 12px !important; border-bottom:1px solid #EEF5F4 !important; }
.sb-side-logo img{ max-width:176px !important; width:78% !important; }
body:not(.role-parent) .topic-btn.nav-new{
  color:var(--sb-nav) !important; font-size:15px !important; font-weight:700 !important;
  border-radius:14px !important; padding:9px 18px !important; gap:13px !important;
}
.topic-btn.nav-new .nav-ic-em{ font-size:20px !important; width:26px !important; }
body:not(.role-parent) .topic-btn.nav-new:hover{ background:rgba(19,166,153,.08) !important; color:var(--sb-navy) !important; }
body:not(.role-parent) .topic-btn.nav-new.active{
  background:var(--sb-grad-active) !important; color:#fff !important;
  box-shadow:0 8px 18px rgba(19,166,153,.28) !important;
}
/* Chân sidebar: lá + lời nhắn viết tay (theo mẫu) */
.sb-side-foot{
  margin-top:auto; padding:18px 18px 22px 46px; min-height:84px; flex-shrink:0;
  font-family:var(--sb-script); font-size:15px; line-height:1.25; color:var(--sb-quote);
  transform:rotate(-7deg); transform-origin:left bottom; pointer-events:none; user-select:none;
}
.sb-side-foot .heart{ color:#1FB89A; }
/* Màn thấp (vd 1366×768): bỏ dòng chữ trang trí để không sát/đè mục menu cuối */
@media (max-height:820px){ .sb-side-foot{ display:none; } }
/* Cột sidebar hẹp (901–1100px): bớt lề trong nút để nhãn menu không xuống dòng */
@media (min-width:901px) and (max-width:1100px){
  body:not(.role-parent) .topic-btn.nav-new{ padding:9px 12px !important; gap:10px !important; font-size:14.5px !important; }
}

/* ── 4. Topbar (chuông + tài khoản) ─────────────────────────────────────── */
#content-topbar{ padding:14px 22px 2px !important; }
#content-topbar .notif-bell{ width:42px !important; height:42px !important; border-radius:50% !important; border:none !important; box-shadow:var(--sb-shadow-sm) !important; }
#content-topbar .user-avatar-pill{ border:none !important; box-shadow:var(--sb-shadow-sm) !important; padding:5px 14px 5px 6px !important; font-weight:800 !important; color:var(--sb-navy) !important; }

/* ── 5. Thành phần dùng chung ───────────────────────────────────────────── */
/* Tiêu đề trang (Hồ sơ, Cài đặt…): chữ Baloo đậm navy + phụ đề */
.sb-page-head{ display:flex; align-items:center; gap:16px; margin:0 0 18px; position:relative; min-height:86px; }
.sb-page-head .sb-head-ic{ width:64px; height:64px; flex-shrink:0; object-fit:contain; }
.sb-page-head .sb-head-emoji{ font-size:38px; line-height:1; flex-shrink:0; }
.sb-page-title{ font-family:'Baloo 2','Nunito',sans-serif; font-size:var(--sb-fs-title); font-weight:800; color:var(--sb-navy); line-height:1.1; margin:0; }
.sb-page-sub{ font-size:15px; font-weight:600; color:var(--sb-sub); margin-top:4px; }
.sb-page-head .sb-head-art{ position:absolute; right:10px; top:-34px; height:150px; width:auto; pointer-events:none;
  -webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,#000 62%,transparent 100%); mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,#000 62%,transparent 100%); }
/* Banner môn học (Tiếng Anh, Lịch sử, Thành tích…) */
.sb-hero{ position:relative; overflow:hidden; border-radius:var(--sb-r-lg); padding:26px 30px; min-height:150px;
  display:flex; align-items:center; gap:22px; background:var(--sb-grad-hero); box-shadow:0 10px 26px rgba(19,166,153,.20); color:#fff; }
.sb-hero.light{ background:linear-gradient(110deg,#E6FAF7 0%,#D3F6F0 50%,#BDEFE6 100%); color:var(--sb-navy); box-shadow:0 8px 22px rgba(19,166,153,.12); }
.sb-hero .sb-hero-tile{ width:96px; height:96px; border-radius:22px; background:#fff; flex-shrink:0; display:block; box-shadow:0 8px 20px rgba(10,80,70,.15); overflow:hidden; }
.sb-hero .sb-hero-tile img{ display:block; width:100%; height:100%; object-fit:cover; object-position:center top; }
/* Ảnh nhân vật dạng DỌC (vd taodang1.png 257×422, nền trắng chạm mép): hiển thị trọn bằng contain + khoảng đệm
   để góc bo không cắt tai nghe/mũ; nền ô trắng trùng nền ảnh nên không lộ viền. Ô ảnh thiết kế vuông giữ cover. */
.sb-hero .sb-hero-tile.is-portrait img{ object-fit:contain; object-position:center; padding:6% 8%; box-sizing:border-box; }
.sb-hero h2{ font-family:'Baloo 2','Nunito',sans-serif; font-size:var(--sb-fs-display); font-weight:800; line-height:1.1; margin:0; position:relative; z-index:1; }
.sb-hero.light h2{ color:var(--sb-navy); }
.sb-hero p{ font-size:16px; font-weight:700; margin:6px 0 0; opacity:.95; max-width:560px; line-height:1.45; position:relative; z-index:1; }
.sb-hero .sb-hero-art{ position:absolute; right:0; bottom:0; height:100%; width:auto; max-width:58%; object-fit:cover; object-position:right bottom; pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 26%); mask-image:linear-gradient(90deg,transparent 0%,#000 26%); }
.sb-hero > :not(.sb-hero-art){ position:relative; z-index:1; }
/* Chừa chỗ cho tranh bên phải → chữ phụ đề xuống dòng thay vì chạy đè lên tranh */
.sb-hero .sb-hero-art ~ div:last-child{ padding-right:clamp(0px, 30%, 360px); }
@media (max-width:1100px){ .sb-hero .sb-hero-art{ max-width:36%; } }
@media (max-width:760px){ .sb-hero .sb-hero-art ~ div:last-child{ padding-right:0; } }
/* Thẻ trắng chuẩn */
.sb-card{ background:var(--sb-card); border-radius:var(--sb-r-md); box-shadow:var(--sb-shadow); border:1px solid #EEF6F5; }
/* Trạng thái rỗng có mascot */
.sb-empty{ text-align:center; padding:6px 16px 10px; }
.sb-empty img{ width:240px; max-width:70%; height:auto; display:block; margin:0 auto 8px;
  -webkit-mask-image:radial-gradient(ellipse 60% 60% at 50% 50%,#000 60%,transparent 100%); mask-image:radial-gradient(ellipse 60% 60% at 50% 50%,#000 60%,transparent 100%); }
.sb-empty h3{ font-family:'Baloo 2','Nunito',sans-serif; font-size:26px; font-weight:800; color:var(--sb-navy); margin:0; }
.sb-empty p{ font-size:14.5px; font-weight:600; color:var(--sb-sub); margin:6px 0 14px; }
.sb-btn-primary{ display:inline-flex; align-items:center; gap:8px; border:none; cursor:pointer; border-radius:999px; padding:12px 26px;
  font:800 16px 'Nunito',Arial,sans-serif; color:#fff; background:linear-gradient(135deg,#1FCBA6,#13A699); box-shadow:0 8px 18px rgba(19,166,153,.30); }
.sb-btn-primary:hover{ transform:translateY(-1px); }
.sb-arrow{ width:30px; height:30px; border-radius:50%; display:grid; place-items:center; color:#fff; font-weight:900; font-size:15px; flex-shrink:0; }

/* Điện thoại/tablet: bỏ trang trí lớn để nội dung lên trước */
@media (max-width:760px){
  .sb-page-head .sb-head-art{ display:none; }
  .sb-page-title{ font-size:26px; }
  .sb-hero{ padding:18px; min-height:0; }
  .sb-hero h2{ font-size:26px; }
  .sb-hero .sb-hero-art{ max-width:46%; opacity:.9; }
  .sb-hero .sb-hero-tile{ width:64px; height:64px; border-radius:16px; }
}

/* Menu không bị co khi thiếu chỗ → chân sidebar không đè mục cuối (sidebar tự cuộn nếu cần) */
body:not(.role-parent) #student-sidebar-section{ flex:1 0 auto !important; }

/* ── 6. Trang chủ (mẫu 11-home) ─────────────────────────────────────────── */
#intro-welcome-screen{ padding:14px var(--sb-gutter) 18px !important; }
.home-wrap{ width:100%; max-width:var(--sb-page-max); margin:0 auto; }
.home-greet{ margin:0 4px 14px; padding-right:250px; }
.home-greet-title{ font-family:'Baloo 2','Nunito',sans-serif; font-size:var(--sb-fs-display); font-weight:800; color:var(--sb-navy); line-height:1.15; margin:0; }
.home-quote{ font-size:17px; font-weight:800; font-style:italic; color:var(--sb-quote); margin-top:4px; letter-spacing:.2px; }
.home-grid{ display:grid; grid-template-columns:minmax(0,1.72fr) minmax(0,1fr); gap:18px; align-items:start; }
.home-main-col{ display:flex; flex-direction:column; gap:16px; min-width:0; }
/* Banner: khung luôn đúng tỉ lệ ảnh (home-hero.webp 1388×820, đã bỏ viền in sẵn) → ảnh hiện trọn, không bị cắt mép */
.home-hero-banner{ position:relative; overflow:hidden; border-radius:var(--sb-r-lg); background:#EEF7F8; box-shadow:var(--sb-shadow);
  aspect-ratio:1388 / 820; }
.home-hero-banner img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.home-hero-banner.no-img{ min-height:150px; aspect-ratio:auto; }
.home-hero-cta{ position:absolute; left:22px; bottom:20px; display:inline-flex; align-items:center; gap:8px; padding:10px 20px; border:none; border-radius:999px; cursor:pointer;
  font:800 15px 'Nunito',Arial,sans-serif; color:#fff; background:linear-gradient(135deg,#12B8A0,#109C8E); box-shadow:0 8px 18px rgba(16,156,142,.32); }
.home-hero-cta:hover{ transform:translateY(-2px); }
.home-cats-card, .home-card{ background:#fff; border-radius:var(--sb-r-lg); box-shadow:var(--sb-shadow); border:1px solid #EEF6F5; }
.home-cats-card{ padding:16px 18px 18px; display:flex; flex-direction:column; }
.home-card-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
.home-card-title{ font-size:19px; font-weight:900; color:var(--sb-navy); }
.home-card-link{ border:none; background:none; padding:10px 6px; margin:-10px -6px; cursor:pointer; font:700 13px 'Nunito',Arial,sans-serif; color:#3E7A8C; white-space:nowrap; }
.home-card-link:hover{ color:var(--sb-teal); }
.home-card-link.is-pending{ cursor:default; opacity:.75; }
.home-cats{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.home-cat{ position:relative; border:1.5px solid transparent; border-radius:20px; padding:8px 8px 40px; cursor:pointer; text-align:center;
  display:flex; flex-direction:column; align-items:center; font-family:'Nunito',Arial,sans-serif; transition:transform .18s, box-shadow .18s; }
.home-cat:hover{ transform:translateY(-4px); box-shadow:0 14px 26px rgba(16,76,92,.14); }
.home-cat img{ width:100%; height:auto; max-height:min(128px, 15vh); object-fit:contain; display:block; }
.home-cat-emoji{ font-size:54px; line-height:1.6; }
.home-cat-title{ font-size:17.5px; font-weight:900; color:var(--sb-navy); margin-top:4px; line-height:1.2; }
.home-cat-sub{ font-size:13px; font-weight:600; color:var(--sb-muted); margin-top:3px; }
.home-cat-arrow{ position:absolute; right:14px; bottom:12px; }
.home-cat.tone-math   { background:linear-gradient(180deg,#ECFDF6,#E1F8EE); border-color:#CDEFE2; }
.home-cat.tone-english{ background:linear-gradient(180deg,#EAF7FF,#E1EFFC); border-color:#CFE3F7; }
.home-cat.tone-life   { background:linear-gradient(180deg,#F3F1FE,#EAE6FB); border-color:#DDD6F7; }
.home-cat.tone-think  { background:linear-gradient(180deg,#FEF8E6,#FDF1D5); border-color:#F5E4B8; }
.home-cat.tone-math .home-cat-arrow{ background:#2BC3A6; } .home-cat.tone-english .home-cat-arrow{ background:#4AA3F0; }
.home-cat.tone-life .home-cat-arrow{ background:#A88CEE; } .home-cat.tone-think .home-cat-arrow{ background:#F6B93F; }
.home-side-col{ display:flex; flex-direction:column; gap:16px; min-width:0; }
.home-card{ padding:16px 20px 18px; }
.home-prog-body{ display:flex; align-items:center; gap:22px; border-top:1px solid #EEF5F4; padding-top:14px; }
.home-prog-ring{ width:112px; height:112px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.home-prog-hole{ width:88px; height:88px; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center; }
#home-pct-text{ font-family:'Baloo 2',cursive; font-size:28px; font-weight:800; color:var(--sb-navy); line-height:1; }
.home-prog-label{ font-size:16.5px; font-weight:900; color:var(--sb-navy); }
.home-prog-text{ font-size:14px; font-weight:600; color:var(--sb-sub); margin:4px 0 12px; }
#home-done-strong{ color:var(--sb-teal); }
.home-prog-btn{ border:none; cursor:pointer; padding:10px 22px; border-radius:12px; font:900 14.5px 'Nunito',Arial,sans-serif; color:#fff;
  background:linear-gradient(135deg,#14B7A1,#109C8E); box-shadow:0 6px 14px rgba(16,156,142,.30); }
.home-ach-list{ display:flex; flex-direction:column; gap:10px; }
.home-ach-row{ display:flex; align-items:center; gap:14px; background:#F7FAFD; border-radius:16px; padding:8px 14px 8px 8px; }
.home-ach-ic{ width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:22px; flex-shrink:0; }
.home-ach-val{ font-family:'Baloo 2',cursive; font-size:23px; font-weight:800; color:var(--sb-navy); line-height:1; white-space:nowrap; }
.home-ach-label{ flex:1; min-width:0; font-size:13.5px; font-weight:600; color:var(--sb-muted); }
.home-ach-chev{ color:#9AAABB; font-size:20px; font-weight:700; }
/* Lời nhắn: Buddy (ảnh nền trong suốt) + câu chữ thật — cân giữa thẻ, chữ sắc nét ở mọi cỡ */
.home-motto{ cursor:pointer; display:flex; align-items:center; justify-content:center; gap:16px; padding:14px 20px;
  background:linear-gradient(135deg,#EAFBF6 0%,#D9F6EE 60%,#E8FAF5 100%) !important; transition:transform .18s, box-shadow .18s; }
.home-motto:hover{ transform:translateY(-3px); }
.home-motto img{ display:block; height:150px; width:auto; flex-shrink:0; filter:drop-shadow(0 8px 12px rgba(16,76,92,.14)); }
.home-motto-text{ margin:0; font:800 18px/1.4 'Nunito',Arial,sans-serif; color:var(--sb-navy); }
.home-motto-text b{ color:#13A699; font-weight:900; }
/* ≤1100px: 1 cột chính; tiến độ + thành tích đứng cạnh nhau, lời nhắn trải ngang bên dưới */
@media (max-width:1100px){
  .home-greet{ padding-right:0; }
  .home-grid{ grid-template-columns:minmax(0,1fr); }
  .home-side-col{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:stretch; }
  .home-motto{ grid-column:1 / -1; }
  .home-motto img{ height:130px; }
}
/* Hero + thẻ thử thách riêng cho điện thoại: mặc định ẩn ở tablet/desktop (đã có banner + cột tiến độ) */
.home-hero-m, .home-today-m{ display:none; }

/* ── Điện thoại (≤760px): thiết kế riêng, không thu nhỏ desktop ──────────────
   Thứ tự: hero xanh pastel (lời chào + mascot + CTA) → thử thách hôm nay (số liệu thật) → 4 danh mục 2 cột.
   Banner desktop (ảnh có chữ in sẵn) và cột tiến độ được thay bằng 2 khối trên, nên không còn vùng trống. */
@media (max-width:760px){
  body:not(.role-parent) #intro-welcome-screen{ padding:calc(60px + env(safe-area-inset-top)) 14px calc(20px + env(safe-area-inset-bottom)) !important; }
  .home-greet, .home-hero-banner, .home-side-col{ display:none; }
  .home-main-col{ gap:14px; }

  .home-hero-m{ display:grid; grid-template-columns:minmax(0,1fr) 116px; grid-template-areas:"text art" "cta cta"; align-items:end;
    column-gap:4px; position:relative; overflow:hidden; padding:18px 14px 14px 18px; border-radius:24px;
    background:radial-gradient(circle at 88% 18%, rgba(255,255,255,.75) 0 26px, transparent 27px),
               radial-gradient(circle at 70% 105%, #C7DEFF 0 70px, transparent 71px),
               linear-gradient(140deg,#E3F0FF 0%,#D2E6FF 52%,#E9E4FF 100%);
    border:1px solid #CFE0F7; box-shadow:0 10px 24px rgba(52,108,190,.14); }
  .hhm-text{ grid-area:text; align-self:center; padding-bottom:6px; min-width:0; position:relative; z-index:1; }
  .hhm-hi{ margin:0; font:800 22px/1.22 'Baloo 2','Nunito',sans-serif; color:#13315C; overflow-wrap:anywhere; }
  .hhm-sub{ margin:6px 0 0; font:700 14px/1.45 'Nunito',Arial,sans-serif; color:#3B5B85; }
  .hhm-cta{ grid-area:cta; position:relative; z-index:1; margin-top:10px; display:flex; justify-content:center; align-items:center; gap:8px; min-height:48px; padding:0 18px; border:none; border-radius:999px; cursor:pointer;
    font:900 15px 'Nunito',Arial,sans-serif; color:#fff; background:linear-gradient(135deg,#3D8BFD,#2563EB);
    box-shadow:0 8px 18px rgba(37,99,235,.30); -webkit-tap-highlight-color:transparent; transition:transform .15s; }
  .hhm-cta:active{ transform:scale(.97); }
  .hhm-cta:focus-visible, .htm-btn:focus-visible, .home-cat:focus-visible{ outline:3px solid #1E3A8A; outline-offset:3px; }
  .hhm-art{ grid-area:art; position:relative; align-self:stretch; min-height:132px; }
  .hhm-art img{ position:absolute; right:-6px; bottom:-14px; height:150px; width:auto; aspect-ratio:566/764; filter:drop-shadow(0 10px 14px rgba(30,64,120,.22)); }
  .hhm-deco{ position:absolute; font:900 15px 'Baloo 2',sans-serif; display:grid; place-items:center; width:30px; height:30px; border-radius:10px;
    background:#fff; box-shadow:0 4px 10px rgba(52,108,190,.16); animation:hhmFloat 4.5s ease-in-out infinite; }
  .hhm-deco.d1{ top:8px; left:-6px; color:#F5B331; }
  .hhm-deco.d2{ top:44px; right:2px; color:#22B8A0; width:26px; height:26px; animation-delay:-1.2s; }
  .hhm-deco.d3{ top:-2px; right:40px; color:#8B6CF0; width:26px; height:26px; animation-delay:-2.4s; }
  .hhm-deco.d4{ bottom:70px; left:-14px; color:#3D8BFD; font-size:12px; animation-delay:-3.1s; }

  .home-today-m{ display:grid; grid-template-columns:64px minmax(0,1fr) 44px; align-items:center; gap:12px; padding:12px 14px;
    background:#fff; border:1px solid #E1ECF8; border-radius:20px; box-shadow:0 6px 16px rgba(30,64,120,.07); }
  .htm-ring{ --p:0; width:64px; height:64px; border-radius:50%; display:grid; place-items:center;
    background:conic-gradient(#3D8BFD calc(var(--p) * 1%), #E3EEFB 0); }
  .htm-ring span{ width:50px; height:50px; border-radius:50%; background:#fff; display:grid; place-items:center;
    font:800 15px 'Baloo 2',sans-serif; color:#13315C; }
  .htm-title{ margin:0; font:900 15px 'Nunito',Arial,sans-serif; color:#13315C; }
  .htm-text{ margin:2px 0 0; font:600 13px/1.4 'Nunito',Arial,sans-serif; color:#46607F; }
  .htm-text b{ color:#2563EB; }
  .htm-meta{ margin:3px 0 0; font:700 12px 'Nunito',Arial,sans-serif; color:#7A8BA3; }
  .htm-btn{ width:44px; height:44px; padding:0; border-radius:14px; border:1.5px solid #BFD7FB; background:#EEF5FF; color:#1D4ED8;
    font:900 18px 'Nunito',Arial,sans-serif; cursor:pointer; white-space:nowrap; -webkit-tap-highlight-color:transparent; }
  .htm-btn:active{ transform:scale(.96); }

  .home-cats-card{ padding:14px 12px 12px; border-radius:22px; box-shadow:0 6px 16px rgba(30,64,120,.06); border-color:#E6EEF8; }
  .home-card-head{ margin-bottom:10px; padding:0 4px; }
  .home-card-title{ font-size:17px; }
  .home-cats{ grid-template-columns:1fr 1fr; gap:10px; }
  .home-cat{ padding:10px 8px 44px; border-radius:18px; min-height:150px; justify-content:flex-start;
    box-shadow:0 4px 10px rgba(30,64,120,.06); -webkit-tap-highlight-color:transparent; }
  .home-cat:hover{ transform:none; }
  .home-cat:active{ transform:scale(.97); box-shadow:0 2px 6px rgba(30,64,120,.08); }
  .home-cat img{ max-height:92px; height:92px; width:auto; max-width:100%; }
  .home-cat-title{ font-size:15.5px; margin-top:6px; }
  .home-cat-sub{ font-size:12px; line-height:1.3; }
  .home-cat-arrow{ width:30px; height:30px; right:10px; bottom:9px; font-size:14px; }
}
/* Màn rất hẹp (≤360px): mascot nhỏ lại, chữ không bị chật */
@media (max-width:360px){
  .home-hero-m{ grid-template-columns:minmax(0,1fr) 92px; padding-left:14px; }
  .hhm-hi{ font-size:19.5px; }
  .hhm-cta{ padding:0 14px; font-size:14px; }
  .hhm-art img{ height:126px; }
  .hhm-deco.d4{ display:none; }
  .home-today-m{ grid-template-columns:56px minmax(0,1fr) 44px; gap:10px; padding:12px; }
  .htm-ring{ width:56px; height:56px; } .htm-ring span{ width:44px; height:44px; font-size:13.5px; }
  .home-cat img{ height:78px; max-height:78px; }
  .home-cat-title{ font-size:14.5px; }
}
@keyframes hhmFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-5px); } }
@media (prefers-reduced-motion:reduce){ .hhm-deco{ animation:none; } .hhm-cta, .htm-btn, .home-cat{ transition:none; } }

/* Hamburger: 3 vạch bị co về 0px khi nút căn giữa theo trục ngang → đặt bề rộng cố định */
.menu-toggle span{ width:20px; align-self:center; }
@media (max-width:900px){ #content-topbar{ padding-top:max(8px, env(safe-area-inset-top)) !important; }
  /* Nội dung cuộn bên dưới thanh trên: nền mờ để chữ không đè lên nút menu/chuông */
  body:not(.role-parent) #content-topbar{ background:rgba(244,250,252,.86); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-radius:24px 24px 0 0; } #content-topbar .menu-toggle{ width:44px !important; height:44px !important; } }

/* ── 7. Hỏi đáp với Buddy (mẫu 09-chat) ─────────────────────────────────── */
body:not(.role-parent) #panel-buddy{
  background:linear-gradient(180deg,#CDE9F4 0%,#DDF0F7 40%,#EEF8FA 75%,#F7FBFC 100%) !important;
  border-radius:var(--sb-r-lg);
}
#panel-buddy .new-chat-btn{ top:14px !important; left:22px !important; border-radius:999px !important; padding:8px 18px !important;
  background:linear-gradient(135deg,#B57BF5,#8C5CF0) !important; box-shadow:0 6px 14px rgba(140,92,240,.30) !important; font-size:14px !important; }
#panel-buddy .messages{ padding-top:64px !important; }
#panel-buddy .welcome-wrap{ align-items:stretch; }
#panel-buddy .welcome-box{
  max-width:var(--sb-page-max); width:100%; margin:0 auto; text-align:left; padding:6px 34px 10px 72px;
  display:grid; grid-template-columns:minmax(300px,1fr) minmax(260px,1.05fr); grid-template-rows:1fr auto; column-gap:10px; align-items:center;
}
#panel-buddy .welcome-text{ grid-column:1; grid-row:1; }
#panel-buddy .welcome-title{ font-family:'Baloo 2','Nunito',sans-serif; font-size:44px; font-weight:800; font-style:italic; color:var(--sb-navy); line-height:1.08; margin-bottom:14px; }
#panel-buddy .welcome-title-2{ display:block; font-size:30px; font-style:normal; font-weight:700; }
#panel-buddy .welcome-title-2 span{ color:#15B39A; font-family:var(--sb-script); font-size:36px; font-weight:400; }
#panel-buddy .welcome-sun{ font-size:32px; font-style:normal; }
#panel-buddy .welcome-sub{ font-size:16.5px; line-height:1.75; color:#2B4466; font-weight:600; margin:0; }
#panel-buddy .welcome-sub strong{ color:#0FA48D; }
#panel-buddy .welcome-mascot{ grid-column:2; grid-row:1; width:100%; max-width:500px; height:auto; max-height:330px; object-fit:contain; margin:0 auto; animation:none; filter:none;
  -webkit-mask-image:radial-gradient(ellipse 72% 72% at 50% 50%,#000 64%,transparent 100%); mask-image:radial-gradient(ellipse 72% 72% at 50% 50%,#000 64%,transparent 100%); }
#panel-buddy .welcome-chips{ grid-column:1 / -1; grid-row:2; display:flex; flex-wrap:wrap; gap:14px; margin-top:14px; }
.welcome-chip{ display:inline-flex; align-items:center; gap:8px; padding:11px 22px; border-radius:999px; font:800 14.5px 'Nunito',Arial,sans-serif; cursor:default; user-select:none; box-shadow:0 4px 12px rgba(16,76,92,.08); }
.welcome-chip.tone-math{ background:linear-gradient(135deg,#29C7A9,#18AE98); color:#fff; }
.welcome-chip.tone-grammar{ background:#F7E9FB; color:#8A4CC0; }
.welcome-chip.tone-english{ background:#E7F1FD; color:#2463B5; }
.welcome-chip.tone-any{ background:#FFF4D8; color:#B47A08; }
/* Thanh nhập theo mẫu: thanh trắng bo tròn, nút tròn teal (camera + gửi) */
#panel-buddy .input-area{ background:rgba(255,255,255,.94) !important; border-top:none !important; border-radius:var(--sb-r-lg) var(--sb-r-lg) 0 0; padding:14px 22px 16px !important; box-shadow:0 -6px 20px rgba(16,76,92,.06); }
#panel-buddy .input-row{ align-items:center; gap:12px; }
#panel-buddy .input-box{ border-radius:999px !important; border:1.5px solid #E1ECEF !important; background:#fff !important; min-height:52px; padding:14px 22px !important; font-size:15px; box-shadow:inset 0 1px 3px rgba(16,76,92,.04); }
#panel-buddy .attach-btn, #panel-buddy .send-btn{ width:54px !important; height:54px !important; border-radius:50% !important; background:linear-gradient(135deg,#1FC5A6,#119C8E) !important; box-shadow:0 8px 16px rgba(17,156,142,.32) !important; }
#panel-buddy .send-btn:disabled{ background:#CFDCDA !important; box-shadow:none !important; }
#panel-buddy .math-open-btn, #panel-buddy .voice-btn{ width:44px !important; height:44px !important; min-height:44px !important; border-radius:50% !important; background:#EAF7F4 !important; color:#0F8F7E !important; box-shadow:none !important; border:1.5px solid #CFEDE6 !important; font-size:17px; }
@media (max-width:1100px){
  #panel-buddy .welcome-box{ grid-template-columns:1fr; padding:4px 18px; }
  #panel-buddy .welcome-mascot{ grid-column:1; grid-row:2; max-height:200px; }
  #panel-buddy .welcome-chips{ grid-row:3; }
}
@media (max-width:760px){
  #panel-buddy .welcome-box{ text-align:center; }
  #panel-buddy .welcome-title{ font-size:30px; }
  #panel-buddy .welcome-title-2{ font-size:21px; }
  #panel-buddy .welcome-title-2 span{ font-size:25px; }
  #panel-buddy .welcome-sub{ font-size:14px; line-height:1.6; }
  #panel-buddy .welcome-mascot{ max-height:150px; }
  #panel-buddy .welcome-chips{ justify-content:center; gap:8px; }
  .welcome-chip{ padding:8px 13px; font-size:12.5px; }
  #panel-buddy .input-area{ padding:10px 10px 12px !important; }
  #panel-buddy .attach-btn, #panel-buddy .send-btn{ width:44px !important; height:44px !important; }
  #panel-buddy .math-open-btn, #panel-buddy .voice-btn{ width:40px !important; height:40px !important; min-height:40px !important; }
  #panel-buddy .input-box{ min-height:44px; padding:10px 14px !important; }
}
#panel-buddy .welcome-title > .welcome-title-2{ color:var(--sb-navy); }
#panel-buddy .welcome-title .welcome-sun{ color:inherit; }
@media (max-width:760px){
  #panel-buddy .messages{ padding-top:60px !important; }
  #panel-buddy .welcome-mascot{ max-height:128px; width:auto; max-width:70%;
    -webkit-mask-image:radial-gradient(ellipse 60% 60% at 50% 50%,#000 55%,transparent 100%); mask-image:radial-gradient(ellipse 60% 60% at 50% 50%,#000 55%,transparent 100%); }
  #panel-buddy .welcome-chips{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:8px; }
  .welcome-chip{ justify-content:center; padding:8px 8px; }
}

/* ── 8. Tư duy đặt câu hỏi (mẫu 02-prompt) ──────────────────────────────── */
.pp-home{ padding:8px var(--sb-gutter) 18px; gap:14px !important; width:100%; max-width:var(--sb-page-max); margin:0 auto; box-sizing:border-box; }
.pp-hero{ position:relative; overflow:hidden; border-radius:var(--sb-r-lg); padding:18px 26px 18px; min-height:196px;
  background:linear-gradient(110deg,#D2F5EC 0%,#C1EFE6 40%,#C8F1EC 100%); box-shadow:0 8px 22px rgba(19,166,153,.14); }
.pp-hero-art{ position:absolute; right:0; top:0; height:100%; width:auto; max-width:62%; object-fit:cover; object-position:right center; pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 22%); mask-image:linear-gradient(90deg,transparent 0%,#000 22%); }
.pp-hero > :not(.pp-hero-art){ position:relative; z-index:1; }
.pp-tag{ display:inline-block; padding:5px 14px; border-radius:999px; background:#12B59E; color:#fff; font-size:12.5px; font-weight:800; }
.pp-title{ font-family:'Baloo 2','Nunito',sans-serif; font-size:var(--sb-fs-display); font-weight:800; line-height:1.08; margin:8px 0 4px; color:var(--sb-navy); }
.pp-grad{ background:linear-gradient(90deg,#0E9E8A,#0F2B57 70%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.pp-sub{ font-size:16.5px; font-weight:700; color:#1E4A63; margin:0 0 12px; }
.pp-benefits{ display:flex; flex-wrap:wrap; gap:10px; }
.pp-benefits span{ background:rgba(255,255,255,.88); border-radius:999px; padding:7px 14px; font-size:13px; font-weight:800; color:#2A4A66; box-shadow:0 3px 8px rgba(16,76,92,.06); }
.pp-tip{ position:relative; overflow:hidden; background:#FFFAEC; border:1.5px solid #F7E3A8; border-radius:var(--sb-r-md); padding:12px 20px 12px 22px; }
.pp-tip-art{ position:absolute; right:10px; top:50%; transform:translateY(-50%); height:92%; width:auto; mix-blend-mode:multiply; pointer-events:none; }
.pp-tip-title{ font-size:16px; font-weight:900; color:#C27A0A; margin-bottom:6px; }
.pp-tip-row{ font-size:14.5px; font-weight:600; color:#2D3F55; line-height:1.9; position:relative; z-index:1; padding-right:230px; }
.pp-tip-row em{ font-weight:800; color:#1F3150; }
.pp-tip-ic{ display:inline-grid; place-items:center; width:20px; height:20px; border-radius:50%; color:#fff; font-size:11px; font-weight:900; font-style:normal; margin-right:4px; }
.pp-tip-ic.bad{ background:#EF5B5B; } .pp-tip-ic.good{ background:#22B38F; }
.pp-steps-title{ font-size:17px; font-weight:900; color:var(--sb-navy); margin-top:2px; }
.pp-steps{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.pp-step{ position:relative; display:flex; gap:14px; align-items:flex-start; border-radius:var(--sb-r-md); padding:14px 44px 14px 14px; border:1.5px solid; min-height:110px; }
.pp-step-num{ width:42px; height:42px; border-radius:50%; color:#fff; font:900 18px 'Nunito',Arial,sans-serif; display:grid; place-items:center; flex-shrink:0; }
.pp-step-ic{ font-size:24px; line-height:1; margin-bottom:4px; }
.pp-step-name{ font-size:15.5px; font-weight:900; color:var(--sb-navy); }
.pp-step-desc{ font-size:12.5px; font-weight:600; color:var(--sb-sub); line-height:1.5; margin-top:2px; }
.pp-step .sb-arrow{ position:absolute; right:12px; bottom:12px; }
.pp-step.tone-1{ background:#F0FBF8; border-color:#CDEEE4; } .pp-step.tone-1 .pp-step-num, .pp-step.tone-1 .sb-arrow{ background:#22B38F; }
.pp-step.tone-2{ background:#F2F7FE; border-color:#D6E5FA; } .pp-step.tone-2 .pp-step-num, .pp-step.tone-2 .sb-arrow{ background:#3D8DEB; }
.pp-step.tone-3{ background:#FEF3F8; border-color:#F7D6E5; } .pp-step.tone-3 .pp-step-num, .pp-step.tone-3 .sb-arrow{ background:#EC5C93; }
.pp-start{ position:relative; width:78% !important; align-self:center; border-radius:999px !important; padding:14px 20px !important; font-size:17px !important; color:#fff;
  background:linear-gradient(90deg,#2BC6A9,#12A291) !important; box-shadow:0 10px 22px rgba(18,162,145,.30) !important; }
.pp-start-arrow{ position:absolute; right:26px; top:50%; transform:translateY(-50%); }
@media (max-height:760px){ .pp-hero{ min-height:170px; padding:14px 22px; } .pp-title{ font-size:32px; } .pp-step{ min-height:96px; } }
@media (max-width:900px){
  .pp-steps{ grid-template-columns:1fr; }
  .pp-step{ min-height:0; }
  .pp-tip-row{ padding-right:0; } .pp-tip-art{ display:none; }
}
@media (max-width:760px){
  .pp-home{ padding:6px 12px 14px; }
  .pp-hero{ min-height:0; padding:14px 16px; }
  .pp-hero-art{ opacity:.35; max-width:100%; }
  .pp-title{ font-size:26px; }
  .pp-sub{ font-size:14px; }
  .pp-benefits span{ font-size:12px; padding:6px 10px; }
  .pp-start{ width:100% !important; }
}

/* ── 9. Hub Tiếng Anh (mẫu 08-english) ──────────────────────────────────── */
.sb-page{ padding:6px var(--sb-gutter) 20px; display:flex; flex-direction:column; gap:20px; width:100%; max-width:var(--sb-page-max); margin:0 auto; box-sizing:border-box; }
.eng-hero{ min-height:176px; }
.eng-hero h2{ font-size:calc(var(--sb-fs-display) + 4px); }
.sb-grad{ background:linear-gradient(90deg,#0E8F7E,#0F2B57); -webkit-background-clip:text; background-clip:text; color:transparent; }
.eng-plane{ font-size:30px; }
.eng-hero p{ color:#22485E; font-size:17px; }
.eng-cards{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.eng-card{ position:relative; overflow:hidden; border:1px solid #EEF5F5; border-radius:var(--sb-r-lg); background:#fff; box-shadow:var(--sb-shadow);
  padding:18px 22px 60px; text-align:left; cursor:pointer; display:flex; flex-direction:column; font-family:'Nunito',Arial,sans-serif; transition:transform .18s, box-shadow .18s; }
.eng-card:hover{ transform:translateY(-4px); box-shadow:0 16px 30px rgba(16,76,92,.14); }
.eng-card::before{ content:""; position:absolute; left:0; bottom:0; width:170px; height:48px; border-radius:0 100% 0 0 / 0 100% 0 0; opacity:.6; }
.eng-card img{ width:100%; max-height:170px; object-fit:contain; mix-blend-mode:multiply; margin-bottom:8px; position:relative; }
.eng-card-name{ font-family:'Baloo 2','Nunito',sans-serif; font-size:24px; font-weight:800; color:var(--sb-navy); line-height:1.15; position:relative; }
.eng-card-sub{ font-size:15px; font-weight:600; color:var(--sb-muted); margin-top:4px; position:relative; }
.eng-card .sb-arrow{ position:absolute; right:20px; bottom:18px; width:42px; height:42px; font-size:19px; }
.eng-card.tone-vocab::before{ background:#D9F5EC; } .eng-card.tone-vocab .sb-arrow{ background:#26BE9F; }
.eng-card.tone-speak::before{ background:#DCEBFB; } .eng-card.tone-speak .sb-arrow{ background:#4AA3F0; }
.eng-card.tone-test::before{ background:#ECE5FB; } .eng-card.tone-test .sb-arrow{ background:#A88CEE; }
@media (max-width:900px){ .eng-cards{ grid-template-columns:1fr; } .eng-card{ padding:14px 18px 18px; flex-direction:row; align-items:center; gap:14px; text-align:left; }
  .eng-card img{ width:110px; max-height:80px; margin:0; flex-shrink:0; } .eng-card .sb-arrow{ position:static; margin-left:auto; } .eng-card-name{ font-size:19px; } }
@media (max-width:760px){ .sb-page{ padding:6px 12px 14px; gap:14px; } .eng-hero h2{ font-size:30px; } .eng-hero p{ font-size:14px; } }

/* ── 10. Lịch sử học tập (mẫu 07-history) ───────────────────────────────── */
.hist-page{ gap:16px; }
.hist-hero{ min-height:150px; }
.hist-hero .sb-hero-art{ max-width:46%; }
.hist-tabs{ display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,.9fr); gap:14px; }
.hist-filters{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-bottom:14px; }
.hist-tabs .practice-type-btn, .hist-filters .practice-type-btn{
  border-radius:999px !important; border:1.5px solid #E3EFEF !important; background:#fff !important; color:var(--sb-nav) !important;
  font:800 15px 'Nunito',Arial,sans-serif !important; padding:12px 14px !important; box-shadow:var(--sb-shadow-sm) !important; margin:0 !important; }
.hist-tabs .practice-type-btn{ font-size:16.5px !important; padding:14px !important; }
.hist-tabs .practice-type-btn.active, .hist-filters .practice-type-btn.active{
  background:linear-gradient(135deg,#22C6A7,#12A994) !important; color:#fff !important; border-color:transparent !important; box-shadow:0 8px 18px rgba(18,169,148,.26) !important; }
.hist-list{ display:flex; flex-direction:column; gap:10px; }
.hist-row{ display:flex; align-items:center; gap:14px; background:#fff; border-radius:var(--sb-r-sm); padding:12px 18px; border:1px solid #EAF3F2; box-shadow:var(--sb-shadow-sm); }
.hist-row-ic{ font-size:26px; }
.hist-row-main{ flex:1; min-width:0; }
.hist-row-title{ font-weight:900; color:var(--sb-navy); font-size:15px; }
.hist-row-date{ font-size:12.5px; color:var(--sb-sub); font-weight:600; margin-top:2px; }
.hist-row-note{ font-size:12px; color:var(--sb-muted); font-weight:600; margin-top:3px; font-style:italic; }
.hist-row-score{ text-align:center; flex-shrink:0; }
.hist-row-score b{ display:block; font-family:'Baloo 2',cursive; font-size:22px; font-weight:800; }
.hist-row-score span{ font-size:11.5px; color:var(--sb-muted); font-weight:700; }
.hist-row-score.tone-good b{ color:#1DB980; } .hist-row-score.tone-ok b{ color:#F08A2C; } .hist-row-score.tone-low b{ color:#EF5B5B; }
@media (max-width:760px){
  .hist-tabs{ grid-template-columns:1fr 1fr; gap:8px; }
  .hist-filters{ grid-template-columns:1fr 1fr; gap:8px; }
  .hist-tabs .practice-type-btn{ font-size:14px !important; padding:11px 8px !important; }
  .hist-filters .practice-type-btn{ font-size:13px !important; padding:9px 8px !important; }
  .hist-hero h2{ font-size:26px; }
}

/* ── 11. Trang overlay chung (Thành tích / Hồ sơ / Cài đặt) ─────────────── */
.app-panel{ position:absolute; inset:0; z-index:5; overflow-y:auto; padding:22px var(--sb-gutter); background:transparent; animation:fadeInUp .28s ease; }
.app-panel-inner{ max-width:var(--sb-page-max); margin:0 auto; width:100%; display:flex; flex-direction:column; gap:18px; }
.app-panel-inner > .sb-page-head{ margin-bottom:0; }
#app-generic-panel{ padding-top:58px !important; }
.ach-muted{ color:var(--sb-muted); font-size:13.5px; font-weight:600; }

/* ── 12. Thành tích (mẫu 05-achievements) ───────────────────────────────── */
.ach-hero{ min-height:140px; padding:22px 28px; }
.ach-hero .sb-hero-art{ max-width:60%; }
.ach-hero-ic{ font-size:56px; line-height:1; filter:drop-shadow(0 6px 10px rgba(180,120,0,.25)); }
.ach-hero h2{ font-size:36px; color:#0E6E68; }
.ach-hero p{ color:#2C5468; font-size:15.5px; }
.ach-stats{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.ach-stat{ position:relative; overflow:hidden; display:flex; align-items:center; gap:18px; background:#fff; border-radius:var(--sb-r-md); padding:18px 22px; box-shadow:var(--sb-shadow); border:1px solid #EEF5F5; }
.ach-stat::after{ content:""; position:absolute; right:0; bottom:0; width:150px; height:36px; border-radius:100% 0 0 0 / 100% 0 0 0; opacity:.55; }
.ach-stat-ic{ width:62px; height:62px; border-radius:50%; display:grid; place-items:center; font-size:30px; flex-shrink:0; }
.ach-stat-val{ font-family:'Baloo 2',cursive; font-size:32px; font-weight:800; color:var(--sb-navy); line-height:1; }
.ach-stat-label{ font-size:15px; font-weight:700; color:var(--sb-sub); margin-top:4px; }
.ach-stat-chev{ position:absolute; right:16px; top:14px; width:26px; height:26px; border-radius:50%; background:#F3F7FA; display:grid; place-items:center; color:var(--sb-navy); font-weight:900; }
.ach-stat.tone-star .ach-stat-ic{ background:#FFF3CF; } .ach-stat.tone-star::after{ background:#FFE7A8; }
.ach-stat.tone-fire .ach-stat-ic{ background:#FFE6DC; } .ach-stat.tone-fire::after{ background:#FFD1C2; }
.ach-stat.tone-medal .ach-stat-ic{ background:#E5EEFC; } .ach-stat.tone-medal::after{ background:#D3E2FA; }
.ach-section-title{ font-size:18px; font-weight:900; color:var(--sb-navy); position:relative; padding-bottom:12px; }
.ach-section-title::after{ content:""; position:absolute; left:4px; bottom:0; width:72px; height:5px; border-radius:3px; background:linear-gradient(90deg,#D6F2EB 0 30%,transparent 30% 44%,#5FD3B9 44% 100%); }
.ach-list{ display:flex; flex-direction:column; gap:10px; }
.ach-list .sb-empty img{ width:230px; }

/* ── 13. Hồ sơ cá nhân (mẫu 01-profile) ─────────────────────────────────── */
.prof-grid{ display:grid !important; grid-template-columns:minmax(300px,.92fr) minmax(0,1.6fr) !important; gap:18px !important; align-items:stretch !important; }
.prof-card{ padding:16px 20px 20px; }
.prof-band{ position:relative; display:flex; align-items:center; gap:16px; padding:16px 18px; border-radius:var(--sb-r-md); background:linear-gradient(120deg,#DDF6F1,#C9F0E8); overflow:hidden; margin-bottom:6px; min-height:120px; }
.prof-avatar{ width:76px; height:76px; border-radius:50%; background:linear-gradient(135deg,#1FCBA6,#109C8E); color:#fff; display:grid; place-items:center; font:900 34px 'Nunito',Arial,sans-serif; border:4px solid #fff; box-shadow:0 6px 14px rgba(16,156,142,.25); flex-shrink:0; position:relative; z-index:1; }
.prof-who{ position:relative; z-index:1; min-width:0; }
.prof-name{ font-family:'Baloo 2',cursive; font-size:25px; font-weight:800; color:var(--sb-navy); line-height:1.1; }
.prof-grade{ display:inline-block; margin-top:6px; padding:4px 12px; border-radius:999px; background:rgba(255,255,255,.85); font-size:13.5px; font-weight:800; color:#0E8F7E; }
.prof-band-art{ position:absolute; right:-6px; bottom:-8px; height:118%; width:auto; mix-blend-mode:multiply; pointer-events:none; }
.prof-row{ display:flex; align-items:center; gap:12px; padding:13px 4px; border-bottom:1px solid #EEF4F3; }
.prof-row-ic{ width:24px; text-align:center; font-size:17px; opacity:.85; }
.prof-row-label{ font-size:14.5px; font-weight:700; color:var(--sb-muted); }
.prof-row-val{ margin-left:auto; font-size:15px; font-weight:800; color:var(--sb-navy); text-align:right; overflow-wrap:anywhere; }
.prof-plan-now{ color:#0FA48D; font-size:16px; }
.prof-actions{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:18px; }
.prof-btn{ padding:12px 10px; border-radius:14px; cursor:pointer; font:800 15px 'Nunito',Arial,sans-serif; }
.prof-btn.is-pass{ border:1.5px solid #C9DBF6; background:#F6F9FF; color:#2A5BB5; }
.prof-btn.is-out{ border:1.5px solid #F7CFD3; background:#FFF3F4; color:#E04B5A; }
.prof-login{ margin-top:16px; width:100%; justify-content:center; }
.prof-plans-card{ padding:18px 20px 20px; }
.prof-plans-head{ position:relative; display:flex; align-items:center; gap:14px; min-height:84px; padding-right:220px; margin-bottom:12px; }
.prof-plans-ic{ width:54px; height:54px; border-radius:50%; background:linear-gradient(135deg,#1FC5A6,#119C8E); display:grid; place-items:center; font-size:26px; flex-shrink:0; box-shadow:0 6px 14px rgba(16,156,142,.28); }
.prof-plans-title{ font-family:'Baloo 2',cursive; font-size:28px; font-weight:800; color:var(--sb-navy); line-height:1.1; }
.prof-plans-sub{ font-size:14.5px; font-weight:600; color:#14A08E; margin-top:2px; }
.prof-plans-art{ position:absolute; right:-6px; top:-14px; height:110px; width:auto; mix-blend-mode:multiply; pointer-events:none; }
.prof-plans{ display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px !important; }
.prof-plan{ position:relative; display:flex; flex-direction:column; border-radius:var(--sb-r-md); padding:18px 16px 16px; border:1.5px solid #E7EEF3; background:linear-gradient(180deg,#FAFCFE,#F2F6FB); min-width:0; }
.prof-plan.tone-standard{ border:2px solid #23BFA4; background:#fff; }
.prof-plan.tone-premium{ border-color:#F7E2BE; background:linear-gradient(180deg,#FFFDF7,#FFF4E2); }
.prof-plan-hot{ position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:#13AE98; color:#fff; font-size:12px; font-weight:900; padding:3px 12px; border-radius:999px; }
.prof-plan-cur{ position:absolute; top:14px; right:14px; background:#FFF0D2; color:#C27A0A; font-size:12px; font-weight:800; padding:4px 10px; border-radius:999px; }
.prof-plan-ic{ width:46px; height:46px; border-radius:50%; display:grid; place-items:center; font-size:24px; background:#EEF2FB; margin-bottom:8px; }
.prof-plan.tone-standard .prof-plan-ic{ background:#DDF6F0; } .prof-plan.tone-premium .prof-plan-ic{ background:#FFEFC8; }
.prof-plan-name{ font-family:'Baloo 2',cursive; font-size:20px; font-weight:800; color:var(--sb-navy); }
.prof-plan-price{ margin:2px 0 10px; }
.prof-plan-price b{ font-family:'Baloo 2',cursive; font-size:27px; font-weight:800; color:#25385F; }
.prof-plan.tone-standard .prof-plan-price b{ color:#11A28E; } .prof-plan.tone-premium .prof-plan-price b{ color:#9C5AF0; }
.prof-plan-price span{ font-size:13px; color:var(--sb-muted); font-weight:700; }
.prof-plan-list{ list-style:none; margin:0 0 12px; padding:0; display:flex; flex-direction:column; gap:7px; flex:1; }
.prof-plan-list li{ font-size:12.8px; font-weight:600; color:#3A4F6B; padding-left:20px; position:relative; }
.prof-plan-list li::before{ content:"✓"; position:absolute; left:0; font-weight:900; color:#3C7BE0; }
.prof-plan.tone-standard .prof-plan-list li::before{ color:#13AE98; } .prof-plan.tone-premium .prof-plan-list li::before{ color:#F0A21C; }
.prof-plan-btn{ width:100%; padding:11px; border:none; border-radius:12px; cursor:pointer; font:900 14px 'Nunito',Arial,sans-serif; color:#fff; background:linear-gradient(135deg,#1FC5A6,#109C8E); box-shadow:0 6px 14px rgba(16,156,142,.25); }
.prof-plan-btn.is-free{ background:#E9EEF3; color:#5C6F86; box-shadow:none; }
@media (max-width:1099px){ .prof-grid{ grid-template-columns:1fr !important; } }
@media (max-width:760px){
  .prof-plans{ grid-template-columns:1fr; }
  .prof-plans-head{ padding-right:0; } .prof-plans-art{ display:none; }
  .prof-band-art{ height:100%; opacity:.9; }
  .prof-actions{ grid-template-columns:1fr; }
}

/* ── 14. Cài đặt (mẫu 04-settings) ──────────────────────────────────────── */
.set-head{ min-height:110px; }
.set-head .sb-head-ic{ width:74px; height:74px; mix-blend-mode:multiply; }
.set-head .sb-head-art{ right:60px; top:-26px; height:140px; }
.set-card{ padding:6px 26px; max-width:none; }
.set-row{ display:flex; align-items:center; gap:18px; padding:16px 0; border-bottom:1px solid #EEF4F3; }
.set-row:last-child{ border-bottom:none; }
.set-ic{ width:58px; height:58px; border-radius:18px; display:grid; place-items:center; font-size:28px; flex-shrink:0; }
.set-ic.tone-bell{ background:#FFF6DA; } .set-ic.tone-sound{ background:#E8F2FE; } .set-ic.tone-theme{ background:#FDEBEC; } .set-ic.tone-lang{ background:#E9EEFD; }
.set-text{ flex:1; min-width:0; }
.set-title{ font-size:18px; font-weight:900; color:var(--sb-navy); }
.set-sub{ font-size:14.5px; font-weight:600; color:var(--sb-sub); margin-top:2px; }
.sb-switch{ width:62px; height:34px; border-radius:999px; background:#D6E0DC; position:relative; cursor:pointer; transition:background .2s; flex-shrink:0; }
.sb-switch span{ position:absolute; top:4px; left:4px; width:26px; height:26px; border-radius:50%; background:#fff; box-shadow:0 2px 5px rgba(0,0,0,.2); transition:left .2s; }
.sb-switch[data-on="1"]{ background:linear-gradient(90deg,#1FC5A6,#13AE98); }
.sb-switch[data-on="1"] span{ left:32px; }
.sb-switch:focus-visible{ outline:3px solid #7FD9C6; outline-offset:2px; }
.set-theme{ display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:800; color:#0E9E86; }
.set-theme-dot{ width:30px; height:30px; border-radius:50%; background:#3ACBB0; box-shadow:0 0 0 6px #E1F7F2; }
.set-select{ min-width:240px; padding:11px 40px 11px 18px; border:1.5px solid #BFE9DC; border-radius:16px; font:800 16px 'Nunito',Arial,sans-serif; color:#0E8F7E; cursor:pointer; outline:none;
  -webkit-appearance:none; appearance:none; background:#fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' fill='none' stroke='%230E9E86' stroke-width='2' stroke-linecap='round'/></svg>") no-repeat right 14px center; }
.set-actions{ display:flex; gap:16px; flex-wrap:wrap; }
.set-btn{ padding:13px 26px; border-radius:16px; cursor:pointer; font:900 16px 'Nunito',Arial,sans-serif; background:#fff; }
.set-btn.is-guide{ border:2px solid #9FE0CF; color:#0E9E86; }
.set-btn.is-out{ border:2px solid #F7C9CE; color:#E04B5A; background:#FFF6F7; }
@media (max-width:760px){
  .set-card{ padding:4px 14px; }
  .set-row{ gap:12px; flex-wrap:wrap; }
  .set-ic{ width:46px; height:46px; font-size:22px; border-radius:14px; }
  .set-title{ font-size:16px; } .set-sub{ font-size:13px; }
  .set-select{ min-width:0; width:100%; }
  .set-actions{ flex-direction:column; } .set-btn{ width:100%; }
}
/* Hồ sơ: chừa chỗ cho tranh mascot để tên dài không đè; gói học gọn hơn để vừa 1 màn hình */
.prof-band{ padding-right:128px; }
.prof-band-art{ height:112%; max-width:150px; object-fit:contain; object-position:right bottom; }
.prof-name{ overflow-wrap:anywhere; }
.prof-plan{ padding:16px 12px 14px; }
.prof-plan-list{ gap:6px; }
.prof-plan-list li{ font-size:12.3px; padding-left:17px; line-height:1.35; }
.prof-plan-price b{ font-size:25px; }
/* Cài đặt: tranh mascot lùi trái, không chạm cụm chuông/tài khoản */
.set-head .sb-head-art{ right:190px; top:-12px; height:128px; }
@media (max-width:1100px){ .set-head .sb-head-art{ display:none; } }
.prof-band{ padding-right:104px; }
.prof-band-art{ max-width:118px; height:104%; mix-blend-mode:normal;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 30%); mask-image:linear-gradient(90deg,transparent 0%,#000 30%); }
.prof-name{ font-size:22px; overflow-wrap:normal; word-break:normal; }
.prof-grade{ white-space:nowrap; }
.prof-plans-art{ -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 25%); mask-image:linear-gradient(90deg,transparent 0%,#000 25%); mix-blend-mode:normal; }

/* ── 15. Hướng dẫn nhanh (mẫu 10-onboarding) ────────────────────────────── */
.sb-help-card.sb-guide{ width:min(680px,100%); padding:26px 30px 0; border-radius:28px; font:600 14px/1.55 'Nunito',Arial,sans-serif; color:#23395A; position:relative; overflow-x:hidden; }
.sb-guide-x{ position:absolute; top:18px; right:18px; width:40px; height:40px; border-radius:50%; border:1.5px solid #E2ECEF; background:#fff; color:var(--sb-navy); font-size:22px; cursor:pointer; box-shadow:var(--sb-shadow-sm); }
.sb-guide-kicker{ font-size:13px; font-weight:900; color:#11A08C; text-transform:uppercase; letter-spacing:.06em; }
.sb-guide-title{ font-family:'Baloo 2','Nunito',sans-serif; font-size:32px; font-weight:800; color:var(--sb-navy); margin:4px 48px 6px 0; line-height:1.15; }
.sb-guide-intro{ color:var(--sb-sub); margin:0 0 14px; font-size:14.5px; }
.sb-guide-box{ display:flex; gap:16px; align-items:flex-start; border-radius:20px; padding:14px 18px; margin-bottom:12px; border:1.5px solid; }
.sb-guide-box[hidden]{ display:none; }
.sb-guide-box.tone-plan{ background:linear-gradient(120deg,#ECFBF6,#DDF6EF); border-color:#BDEBDD; }
.sb-guide-box.tone-tips{ background:linear-gradient(120deg,#F4F1FE,#ECE7FC); border-color:#DCD3F7; }
.sb-guide-box.tone-mail{ background:linear-gradient(120deg,#FFF9EA,#FFF2D6); border-color:#F6E0AE; }
.sb-guide-ic{ width:54px; height:54px; border-radius:50%; display:grid; place-items:center; font-size:26px; flex-shrink:0; color:#fff; }
.tone-plan .sb-guide-ic{ background:linear-gradient(135deg,#25C7A8,#13A08E); }
.tone-tips .sb-guide-ic{ background:linear-gradient(135deg,#9C7BF2,#7B5BE6); }
.tone-mail .sb-guide-ic{ background:linear-gradient(135deg,#FFC94A,#F5A623); }
.sb-guide-body{ min-width:0; flex:1; overflow-wrap:anywhere; }
.sb-guide-box-title, .sb-guide-tips > b{ display:block; font-size:16.5px; font-weight:900; color:var(--sb-navy); margin-bottom:4px; }
.sb-guide-tips ul{ list-style:none; margin:4px 0 0; padding:0; }
.sb-guide-tips li{ position:relative; padding-left:24px; margin:4px 0; }
.sb-guide-tips li::before{ content:"✓"; position:absolute; left:2px; color:#7B5BE6; font-weight:900; }
.sb-guide-err{ color:#A05A00; }
.sb-guide-foot{ display:flex; align-items:flex-end; gap:12px; margin:6px -30px 0; padding:0 30px 18px 18px; background:linear-gradient(180deg,transparent,#E9FAF5 60%); }
.sb-guide-mascot{ width:120px; height:auto; flex-shrink:0; mix-blend-mode:multiply; margin-bottom:-18px; }
.sb-guide-motto{ font-family:var(--sb-script); font-size:15px; color:#0E8F7E; transform:rotate(-6deg); margin-bottom:22px; flex:1; }
.sb-guide-go{ border:none; cursor:pointer; border-radius:999px; padding:13px 24px; font:900 15px 'Nunito',Arial,sans-serif; color:#fff; background:linear-gradient(135deg,#1FC5A6,#109C8E); box-shadow:0 10px 20px rgba(16,156,142,.30); white-space:nowrap; margin-bottom:6px; }
@media (max-width:560px){
  .sb-help-card.sb-guide{ padding:20px 16px 0; }
  .sb-guide-title{ font-size:24px; }
  .sb-guide-box{ padding:12px; gap:10px; }
  .sb-guide-ic{ width:40px; height:40px; font-size:20px; }
  .sb-guide-foot{ margin:4px -16px 0; padding:0 16px 14px 8px; }
  .sb-guide-mascot{ width:76px; }
  .sb-guide-motto{ display:none; }
  .sb-guide-go{ margin-left:auto; padding:12px 18px; }
}
.sb-guide-mascot{ mix-blend-mode:normal; -webkit-mask-image:radial-gradient(ellipse 62% 62% at 50% 55%,#000 58%,transparent 100%); mask-image:radial-gradient(ellipse 62% 62% at 50% 55%,#000 58%,transparent 100%); }

/* ── 16. Màn không có mẫu riêng: đồng bộ theo cùng hệ thiết kế ──────────── */
.math-cards{ grid-template-columns:repeat(2,minmax(0,1fr)); max-width:880px; }
.eng-card-emoji{ font-size:72px; line-height:1.2; margin:6px 0 10px; position:relative; }
/* Kỹ năng sống: banner + thẻ theo tông mẫu (giữ nguyên cấu trúc để chế độ trò chuyện hoạt động) */
#panel-life_skills .ls-wrap > div:first-child{
  background:linear-gradient(110deg,#E6FAF7 0%,#D3F6F0 50%,#BDEFE6 100%) !important; color:var(--sb-navy) !important;
  box-shadow:0 8px 22px rgba(19,166,153,.12) !important; border-radius:var(--sb-r-lg) !important; }
#panel-life_skills .ls-wrap > div:first-child div[style*="font-size:24px"]{ font-size:32px !important; font-weight:800; color:var(--sb-navy); }
#panel-life_skills .ls-wrap > div:first-child div[style*="font-size:15px"]{ color:#22485E; font-weight:700 !important; opacity:1 !important; }
#panel-life_skills .ls-wrap > div:first-child img{ border-radius:20px !important; box-shadow:0 8px 20px rgba(10,80,70,.15); }
body:not(.role-parent) .subtopic-card{ border:1px solid #EEF5F5 !important; border-radius:var(--sb-r-md) !important; box-shadow:var(--sb-shadow) !important; background:#fff !important; }
body:not(.role-parent) .subtopic-card .sc-name{ color:var(--sb-navy); }
@media (max-width:900px){ .math-cards{ grid-template-columns:1fr; } .eng-card-emoji{ font-size:44px; margin:0; } }

/* ── 17. Giảm cuộn trên tablet / điện thoại (không thu chữ quá nhỏ, không ẩn nội dung) ── */
/* Hồ sơ trên tablet: thẻ thông tin xếp ngang (dải tên | các dòng) để 3 gói học lên cùng màn hình */
@media (min-width:601px) and (max-width:1099px){
  .prof-card{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); column-gap:20px; align-items:center; }
  .prof-card .prof-band{ grid-row:1 / span 4; margin:0; height:100%; }
  .prof-card .prof-row{ grid-column:2; padding:9px 4px; }
  .prof-card .prof-actions{ grid-column:1 / -1; margin-top:12px; }
  .prof-plans-head{ min-height:64px; margin-bottom:8px; }
}
/* Laptop thấp (vd 1280×720): đầu trang & gói học gọn hơn */
@media (min-width:1100px) and (max-height:740px){
  .app-panel-inner{ gap:12px; }
  .sb-page-head{ min-height:64px; }
  .sb-page-title{ font-size:28px; }
  .prof-band{ min-height:100px; padding-top:12px; padding-bottom:12px; }
  .prof-row{ padding:10px 4px; }
  .prof-plans-head{ min-height:66px; margin-bottom:6px; }
  .prof-plan{ padding-top:12px; }
  .prof-plan-ic{ width:38px; height:38px; font-size:20px; margin-bottom:4px; }
}
/* Tư duy đặt câu hỏi ở tablet ngang (vd 1024×768) */
@media (min-width:901px) and (max-width:1100px){
  .pp-hero{ min-height:160px; padding:14px 20px; }
  .pp-title{ font-size:30px; }
  .pp-step{ min-height:0; padding:12px 40px 12px 12px; }
  .pp-step-ic{ display:none; }
  .pp-home{ gap:11px !important; }
}
/* Điện thoại: gói học 2 + 1 (Premium trải ngang, danh sách 2 cột) thay vì 3 thẻ chồng dọc */
@media (max-width:760px){
  .prof-plans{ grid-template-columns:1fr 1fr !important; gap:10px !important; }
  .prof-plan{ padding:14px 10px 12px; }
  .prof-plan.tone-premium{ grid-column:1 / -1; }
  .prof-plan.tone-premium .prof-plan-list{ display:grid; grid-template-columns:1fr 1fr; column-gap:10px; }
  .prof-plan-name{ font-size:18px; } .prof-plan-price b{ font-size:22px; }
  .prof-plan-ic{ width:36px; height:36px; font-size:19px; margin-bottom:4px; }
  .prof-plan-cur{ top:10px; right:10px; }
  .prof-band{ min-height:96px; }
  .prof-row{ padding:10px 2px; }
  .ach-stats{ gap:8px; }
  .ach-stat{ flex-direction:column; align-items:flex-start; gap:8px; padding:12px; }
  .ach-stat-ic{ width:44px; height:44px; font-size:22px; }
  .ach-stat-val{ font-size:24px; }
  .ach-stat-label{ font-size:12.5px; }
  .ach-stat-chev{ top:10px; right:10px; }
  .app-panel{ padding:14px 12px; }
  #app-generic-panel{ padding-top:58px !important; }
}
/* Điện thoại thấp (vd 360×740): khoảng cách gọn hơn */
@media (max-width:420px) and (max-height:780px){
  .sb-page{ gap:10px; padding:2px 10px 10px; }
  .sb-hero{ padding:12px 14px; gap:12px; }
  .sb-hero h2{ font-size:23px; }
  .sb-hero p{ font-size:13px; margin-top:3px; }
  .sb-hero .sb-hero-tile{ width:52px; height:52px; border-radius:14px; }
  .eng-card{ padding:10px 14px; }
  .eng-card img{ width:86px; max-height:62px; }
  .eng-card-name{ font-size:17px; } .eng-card-sub{ font-size:13px; }
  .hist-page{ gap:10px; }
  .hist-tabs .practice-type-btn{ padding:9px 6px !important; }
  .hist-filters{ margin-bottom:8px; gap:6px; }
  .hist-filters .practice-type-btn{ padding:7px 6px !important; }
  .set-row{ padding:10px 0; }
  .set-actions{ gap:8px; } .set-btn{ padding:11px 16px; }
  .app-panel-inner{ gap:12px; }
  .sb-page-head{ min-height:0; }
  #panel-life_skills .ls-wrap{ gap:10px !important; padding:10px !important; }
  #life-skills-grid .subtopic-card{ padding:8px 6px 6px !important; }
  #life-skills-grid .sc-img{ font-size:26px !important; }
  .pp-home{ gap:10px !important; }
  .pp-tip{ padding:10px 12px; }
  .pp-tip-row{ font-size:13px; line-height:1.6; }
  .pp-step{ padding:10px 40px 10px 10px; gap:10px; }
  .pp-step-num{ width:34px; height:34px; font-size:15px; }
  .pp-step-ic{ display:none; }
}
@media (min-width:601px) and (max-width:1099px){
  .app-panel-inner{ gap:12px; }
  .sb-page-head{ min-height:60px; }
  .sb-page-title{ font-size:28px; }
  .prof-name{ font-size:20px; }
  .prof-band{ padding-right:92px; }
  .prof-band-art{ max-width:96px; }
  .prof-plans-head{ padding-right:0; min-height:0; }
  .prof-plans-art{ display:none; }               /* chỉ là hình trang trí */
  .prof-plan-ic{ display:none; }                 /* biểu tượng trang trí của từng gói */
  .prof-plan{ padding-top:16px; }
  .prof-plan-list{ gap:4px; }
  .prof-plan-list li{ font-size:12px; }
}
/* Thẻ hub dạng hàng (màn hẹp): ảnh | (tên / phụ đề) | mũi tên — tên và phụ đề xếp dọc, không bị ép thành cột hẹp */
@media (max-width:900px){
  .eng-card{ display:grid !important; grid-template-columns:auto minmax(0,1fr) auto; grid-template-areas:"img name arrow" "img sub arrow"; column-gap:14px; row-gap:2px; align-items:center; }
  .eng-card img, .eng-card .eng-card-emoji{ grid-area:img; }
  .eng-card-name{ grid-area:name; align-self:end; }
  .eng-card-sub{ grid-area:sub; align-self:start; margin-top:0; }
  .eng-card .sb-arrow{ grid-area:arrow; }
}
/* Điện thoại: tranh trang trí của banner không đè lên chữ */
@media (max-width:760px){
  .sb-hero .sb-hero-art{ display:none; }
  #panel-life_skills .ls-wrap > div:first-child div[style*="font-size:24px"]{ font-size:24px !important; }
  .prof-band{ padding-right:84px; }
  .prof-band-art{ max-width:84px; }
  .prof-name{ font-size:19px; }
}
@media (max-width:760px){ .eng-card img{ width:72px !important; max-height:56px !important; } .eng-card-emoji{ font-size:38px !important; } .eng-card{ column-gap:12px; } }

/* ── 18. Menu ngăn kéo (tablet dọc + điện thoại, ≤900px) — đủ mục trong 1 màn hình, có nút đóng ── */
.drawer-close{ display:none; }
@media (max-width:900px){
  body:not(.role-parent) .sidebar{
    top:0 !important; bottom:auto !important; height:var(--sb-vvh,100dvh) !important; width:min(86vw,320px) !important; max-width:none !important;
    z-index:1300 !important; border-radius:0 24px 24px 0 !important; padding-bottom:10px !important;
    overflow-y:auto !important; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
    background:#fff !important;   /* trang trí lá ở đáy không đè lên mục menu */
  }
  #sidebar-backdrop{ top:0 !important; z-index:1290 !important; }
  .drawer-close{ display:grid; place-items:center; position:absolute; top:10px; right:10px; z-index:2; width:40px; height:40px; border-radius:50%;
    border:1.5px solid #E2ECEF; background:#fff; color:var(--sb-navy); font-size:24px; line-height:1; cursor:pointer; box-shadow:var(--sb-shadow-sm); }
  .sb-side-logo{ padding:12px 56px 10px 16px !important; text-align:left !important; }
  .sb-side-logo img{ max-width:118px !important; width:auto !important; max-height:72px; }
  body:not(.role-parent) #student-sidebar-section{ flex:0 0 auto !important; padding-top:4px !important; }
  body:not(.role-parent) .sidebar .topic-btn.nav-new{ min-height:44px !important; padding:9px 16px !important; margin:1px auto !important; font-size:15px !important; }
  .sb-side-foot{ display:none; }
  body.nav-open .sb-toast, body.nav-open #auth-toast{ opacity:0; pointer-events:none; }
}
@media (max-width:900px) and (min-height:820px){ .sb-side-foot{ display:block; margin-top:auto; padding-top:10px; } }

/* ── 19. Thanh nhập chat khi khung hẹp (điện thoại dọc, tablet dọc có sidebar): ô nhập 1 hàng riêng, các nút hàng dưới; gửi nằm phải ── */
@media (max-width:480px), (min-width:761px) and (max-width:900px){
  #panel-buddy .input-row{ flex-wrap:wrap; gap:8px 10px; }
  #panel-buddy .input-row > .input-box{ order:-1; flex:1 1 100%; width:100%; }
  #panel-buddy .input-row > .send-btn{ margin-left:auto; }
  #panel-buddy .input-area{ padding:8px 10px calc(8px + env(safe-area-inset-bottom,0px)) !important; }
}
/* Bàn phím ảo: thân trang = vùng nhìn thấy thật (--sb-vvh do sb-scale.js đặt) → thanh nhập + nút gửi luôn nằm trên bàn phím */
@media (max-width:760px){ body:not(.role-parent){ height:var(--sb-vvh,100dvh) !important; } }
/* Thông báo nổi hiện ở trên (dưới thanh đầu trang) → không che thanh nhập chat / nút gửi */
.sb-toast{ top:78px !important; bottom:auto !important; max-width:calc(100vw - 32px); white-space:normal !important; text-align:center; }

/* ── 20. Desktop: mỗi màn vừa đúng 1 viewport, không cuộn ─────────────────────────────
   Nguyên tắc: nội dung chức năng giữ cỡ tự nhiên; banner/tranh trang trí co theo chỗ còn lại;
   danh sách dài chiếm phần cao còn lại và được chia trang (assets/sb-fit.js).
   Tablet/điện thoại (≤900px) giữ bố cục cuộn tự nhiên như trước. */
.prof-band-art{ bottom:0; height:100%; }
@media (min-width:901px){
  /* Banner các trang: thấp lại theo chiều cao màn (768→115px · ≥1000→150px) */
  .sb-hero, .eng-hero, .hist-hero, .ach-hero{ min-height:clamp(110px, 15vh, 150px); }
  .sb-hero{ padding:16px 28px; }
  .sb-hero .sb-hero-tile{ width:clamp(68px, 9vh, 96px); height:clamp(68px, 9vh, 96px); border-radius:20px; }
  .sb-page{ gap:clamp(12px, 1.8vh, 20px); }

  /* Lịch sử học tập: danh sách chiếm phần còn lại, 2 cột trên màn rộng, chia trang */
  #panel-score_history > .hist-page{ flex:1 1 0; min-height:0; }
  #hist-scores-section, #hist-chat-section{ flex:1 1 0; min-height:0; display:flex; flex-direction:column; }
  #score-history-list, #chat-history-list{ flex:1 1 0; min-height:0; }
  #score-history-list .sb-fit-items{ display:grid; grid-template-columns:repeat(auto-fill, minmax(380px, 1fr)); align-content:start; }

  /* Trang overlay (Thành tích/Hồ sơ/Cài đặt): cột nội dung cao đúng khung; danh sách thành tích chia trang */
  .app-panel{ display:flex; flex-direction:column; }
  .app-panel-inner{ flex:1 1 auto; min-height:0; }
  #ach-list{ flex:1 1 0; min-height:0; }
  #ach-list .sb-fit-items{ display:grid; grid-template-columns:repeat(auto-fill, minmax(380px, 1fr)); align-content:start; }
}
/* Trang chủ desktop (≥1101px): lưới 2 hàng × 3 cột, kích thước tính từ chiều cao cửa sổ thật
     Hàng 1: [Banner đúng tỉ lệ ảnh] [Tiến độ] [Thành tích]
     Hàng 2: [Chọn danh mục — rộng 2 cột]       [Lời nhắn]
   --home-a: cao hàng 1 (≈48% phần còn lại, cũng không để banner rộng quá 42% bề ngang);
   --home-b: cao hàng 2 = phần còn lại. Bề rộng banner = --home-a × tỉ lệ ảnh → không bao giờ cắt ảnh. */
@media (min-width:1101px){
  #intro-welcome-screen{
    --home-chrome:150px;   /* lề khung + lời chào + khe giữa 2 hàng */
    --home-a:clamp(180px, min(calc((100vh - var(--home-chrome)) * .48), calc((100vw - var(--sb-side-w) - 90px) * .40 / 1.6927)), 360px);
    --home-b:clamp(190px, calc(100vh - var(--home-chrome) - var(--home-a)), 380px);
    padding-top:10px !important; padding-bottom:14px !important;
  }
  .home-greet{ margin-bottom:10px; }
  .home-grid{ grid-template-columns:calc(var(--home-a) * 1.6927) minmax(0,1fr) minmax(0,1fr);
    grid-template-rows:var(--home-a) var(--home-b);
    grid-template-areas:"hero prog ach" "cats cats motto"; gap:14px; align-items:stretch; }
  .home-main-col, .home-side-col{ display:contents; }
  .home-hero-banner{ grid-area:hero; aspect-ratio:auto; width:100%; height:100%; }
  .home-prog-card{ grid-area:prog; } .home-ach-card{ grid-area:ach; }
  .home-cats-card{ grid-area:cats; } .home-motto{ grid-area:motto; }
  .home-card, .home-cats-card{ min-height:0; min-width:0; padding:14px 18px; display:flex; flex-direction:column; }
  .home-card-head{ margin-bottom:10px; }
  .home-card-title{ font-size:clamp(16px, 1.2vw, 19px); white-space:nowrap; }
  .home-card-link{ font-size:12.5px; }
  /* Tiến độ & thành tích: nội dung căn giữa theo chiều dọc thẻ */
  .home-prog-body{ flex:1; padding-top:12px; gap:16px; }
  .home-prog-ring{ width:clamp(84px, 11vh, 112px); height:clamp(84px, 11vh, 112px); }
  .home-prog-hole{ width:calc(clamp(84px, 11vh, 112px) - 22px); height:calc(clamp(84px, 11vh, 112px) - 22px); }
  #home-pct-text{ font-size:clamp(22px, 2.8vh, 28px); }
  .home-prog-text{ margin:3px 0 10px; }
  .home-ach-list{ flex:1; justify-content:space-evenly; gap:6px; }
  .home-ach-row{ gap:10px; padding:5px 10px 5px 6px; min-height:0; }
  .home-ach-ic{ width:clamp(34px, 2.7vw, 42px); height:clamp(34px, 2.7vw, 42px); font-size:18px; }
  .home-ach-val{ font-size:clamp(19px, 1.55vw, 23px); }
  .home-ach-label{ font-size:12.5px; line-height:1.3; }
  /* Danh mục: 4 thẻ cao bằng phần còn lại của hàng 2; ảnh co theo chỗ, chữ giữ cỡ */
  .home-cats{ flex:1; min-height:0; }
  .home-cat{ min-height:0; padding:8px 8px 40px; justify-content:center; }
  .home-cat img{ flex:1 1 0; min-height:0; max-height:130px; }
  /* Lời nhắn: Buddy trên, câu chữ dưới, cân giữa thẻ */
  .home-motto{ flex-direction:column; gap:8px; padding:12px 16px; text-align:center; }
  .home-motto img{ height:auto; flex:1 1 0; min-height:0; max-height:210px; max-width:100%; object-fit:contain; }
  .home-motto-text{ flex:0 0 auto; font-size:clamp(15px, 2.1vh, 19px); }
  /* Lá trang trí góc khung nội dung nằm ngay sau thẻ lời nhắn → ẩn ở trang chủ cho gọn */
  body:not(.role-parent) .main-area:has(#intro-welcome-screen)::after{ display:none; }
}
/* Hộp Hướng dẫn trên màn thấp: dùng gần hết chiều cao, bớt lề giữa các khối */
@media (min-width:561px) and (max-height:880px){
  .sb-help-card.sb-guide{ max-height:calc(100vh - 24px); max-height:calc(100dvh - 24px); padding-top:20px; }
  .sb-guide-intro{ margin-bottom:10px; }
  .sb-guide-box{ padding:10px 16px; margin-bottom:10px; }
  .sb-guide-mascot{ width:100px; }
}
/* Sidebar desktop: luôn đủ 11 mục trong 1 màn (không cuộn) — logo & khoảng đệm co theo chiều cao cửa sổ,
   cỡ chữ menu giữ 15px; hình lá ở đáy co theo chỗ trống để không nằm sau mục cuối */
@media (min-width:901px){
  .sb-side-logo{ padding:clamp(6px, 1.4vh, 16px) 14px clamp(6px, 1.1vh, 12px) !important; }
  .sb-side-logo img{ width:auto !important; max-width:min(176px, 78%) !important; max-height:calc(19vh - 24px); }
  body:not(.role-parent) .sidebar .topic-btn.nav-new{ min-height:clamp(34px, 5vh, 42px) !important; padding-top:0 !important; padding-bottom:0 !important; margin:1px auto !important; }
}
/* Cửa sổ quá thấp để lá trang trí nằm dưới mục cuối → bỏ lá, sidebar trắng gọn */
@media (min-width:901px) and (max-height:700px){ body:not(.role-parent) .sidebar{ background-image:none !important; } }
/* Desktop rất thấp (cửa sổ trình duyệt ≤720px, vd laptop 1366×768): bớt trang trí & khoảng đệm, giữ cỡ chữ */
@media (min-width:901px) and (max-height:720px){
  .pp-home{ gap:10px !important; padding-top:4px; }
  .pp-hero{ min-height:0; padding:12px 20px; }
  .pp-title{ font-size:28px; margin:6px 0 2px; }
  .pp-sub{ margin-bottom:8px; }
  .pp-tip{ padding:8px 18px; }
  .pp-tip-row{ line-height:1.65; }
  .pp-step{ min-height:0; padding:10px 40px 10px 12px; }
  .pp-step-ic{ display:none; }
  .pp-start{ padding:11px 20px !important; }
  #panel-math-home{ padding-top:8px !important; padding-bottom:8px !important; }
  .sb-help-card.sb-guide{ padding-top:16px; }
  .sb-guide-title{ font-size:26px; margin-bottom:4px; }
  .sb-guide-box{ padding:8px 14px; margin-bottom:8px; }
  .sb-guide-ic{ width:44px; height:44px; font-size:22px; }
  .sb-guide-mascot{ width:84px; }
}
/* Đang trò chuyện Kỹ năng sống trên desktop thấp: banner môn gọn lại (như điện thoại) để khung chat có chỗ */
@media (min-width:901px) and (max-height:820px){
  #panel-life_skills.ls-chatting .ls-wrap{ padding:12px 22px !important; gap:10px !important; }
  #panel-life_skills.ls-chatting .ls-wrap > div:first-child{ padding:10px 18px !important; }
  #panel-life_skills.ls-chatting .ls-wrap > div:first-child img{ width:44px !important; height:44px !important; }
  #panel-life_skills.ls-chatting .ls-wrap > div:first-child div[style*="font-size:15px"]{ display:none; }
}