:root{
  color-scheme: light; /* ép giao diện SÁNG cho mọi điều khiển gốc (select/ngày/thanh cuộn) — tránh popup ĐEN khi máy ở chế độ Tối */
  --green:#7ab800; --green-d:#5f9400; --green-l:#eef6df;
  --pink:#e6007e; --pink-d:#c2006a;
  --lime:#c4d600; --teal:#00a39a; --orange:#f7a823;
  --ink:#3c4030; --muted:#8a8f7d;
  --bg:#f4f7ec; --card:#ffffff; --border:#e7ead9;
  --shadow:0 2px 10px rgba(94,148,0,.08);
  --radius:14px;
}
*{box-sizing:border-box}
body{margin:0;font-family:'Be Vietnam Pro',system-ui,Segoe UI,Roboto,sans-serif;color:var(--ink);background:var(--bg);font-size:15px;line-height:1.5}
h1,h2,h3{font-family:'Baloo 2','Be Vietnam Pro',sans-serif;margin:0 0 .4em}
a{color:var(--green-d);text-decoration:none}
a:hover{text-decoration:underline}

/* ---------- thanh ứng dụng 2 tầng (nav trên + ngữ cảnh dưới) ---------- */
.appbar{position:sticky;top:0;z-index:50;box-shadow:var(--shadow)}
/* tầng 1: logo + menu chính + chọn ngôn ngữ */
.topbar{display:flex;align-items:center;gap:14px;background:var(--card);border-bottom:3px solid var(--green);
  padding:8px 20px;flex-wrap:nowrap}
.brand{flex:none}
.brand img{height:44px;display:block}
/* Nút ☰ — chỉ dùng trên điện thoại (xem media query cuối file); desktop ẩn hẳn. */
.navtoggle{display:none;position:relative;flex:none;align-items:center;justify-content:center;width:42px;height:42px;
  border:1.5px solid var(--border);border-radius:12px;background:var(--green-l);cursor:pointer;padding:0}
.navtoggle:hover{border-color:var(--green);background:#dff3e4}
/* chấm số việc cần xử lý (thay chuông cũ) trên nút ☰ */
.navtoggle-badge{position:absolute;top:-7px;right:-7px;min-width:19px;height:19px;padding:0 4px;border-radius:999px;
  background:var(--pink-d);color:#fff;font-size:11px;font-weight:800;line-height:19px;text-align:center;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.navtoggle-ic{display:flex;flex-direction:column;gap:4px;width:20px}
.navtoggle-ic span{display:block;height:2.5px;border-radius:2px;background:var(--green-d);transition:.2s}
.appbar.menu-open .navtoggle{background:var(--green);border-color:var(--green-d)}
.appbar.menu-open .navtoggle-ic span{background:#fff}
.appbar.menu-open .navtoggle-ic span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.appbar.menu-open .navtoggle-ic span:nth-child(2){opacity:0}
.appbar.menu-open .navtoggle-ic span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
/* ===== Thanh điều hướng GOM 4 NHÓM (Bé · Phụ huynh · Giáo viên · Nhà trường) ===== */
/* tầng 1: hàng "chip" nhóm */
.groupnav{display:flex;align-items:center;gap:7px;flex:1 1 auto;min-width:0;flex-wrap:wrap}
.gchip{display:inline-flex;align-items:center;gap:6px;cursor:pointer;white-space:nowrap;position:relative;text-decoration:none;
  font-family:inherit;font-weight:700;font-size:15px;color:var(--ink);background:var(--green-l);
  border:2px solid transparent;border-radius:999px;padding:8px 16px;transition:background .15s,border-color .15s,transform .12s}
.gchip:hover{background:#dff3e4;transform:translateY(-1px)}
.gchip,.gchip:hover,.gchip:focus{text-decoration:none}
.gchip.active{background:var(--green);color:#fff;border-color:var(--green-d)}
.gchip .glab{line-height:1}
.gchip .navbadge{position:static;margin-left:2px}
/* icon dễ thương trước nhãn (phần mềm trường mầm non) */
.nico{margin-right:5px;font-size:1.05em;line-height:1;display:inline-block;vertical-align:-.05em;transition:transform .15s ease}
.gchip:hover .nico,.subtabs a:hover .nico,.npill:hover .nico{transform:scale(1.18) rotate(-7deg)}
.gchip .nico{margin-right:0}

/* tầng 2: panel bung full-width ngay dưới thanh — chứa icon-pill của nhóm đang chọn */
.navpanels{background:var(--card);border-bottom:3px solid var(--green);box-shadow:var(--shadow)}
.navpanel{display:none;flex-wrap:wrap;gap:8px;padding:11px 20px}
.navpanel.open{display:flex}
.npill{display:inline-flex;align-items:center;gap:7px;position:relative;color:var(--ink);font-weight:600;
  background:#fff;border:1.5px solid var(--border);border-radius:12px;padding:9px 14px;white-space:nowrap}
.npill:hover{background:var(--green-l);border-color:var(--green);text-decoration:none}
.npill.active{background:var(--green-l);color:var(--green-d);border-color:var(--green);box-shadow:inset 4px 0 0 var(--pink)}
.npill .navbadge{position:static;margin-left:2px}
.npill .nico{margin-right:0;font-size:1.15em}

/* mục Tài khoản (đổi mật khẩu/đăng xuất) — chỉ hiện trong menu cột trên điện thoại */
.nav-foot{display:none}

/* dải full-width ngay dưới thanh điều hướng: tab con (trái) + cụm người dùng (phải)
   nằm CÙNG MỘT HÀNG, tận dụng cả 2 lề trống của khung nội dung canh giữa;
   canh lề 20px khớp với thanh nav trên; gạch chân chạy hết bề ngang khi có tab con */
.userrow{display:flex;align-items:flex-end;justify-content:flex-end;gap:8px 24px;flex-wrap:wrap;padding:12px 20px 0;margin:0;border-bottom:2px solid var(--border)}
.userctl{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end;margin-left:auto;padding-bottom:9px}
.centre-form{margin:0}
.centre-form select{max-width:none;width:auto;padding:7px 10px;border:1px solid var(--border);border-radius:10px;background:#fff;font-family:inherit;font-weight:600;color:var(--ink)}
.who{font-weight:600;color:var(--muted);white-space:nowrap}
.who.user-name{color:var(--ink)}
/* tên + ẢNH ĐẠI DIỆN của người đang đăng nhập trên thanh trên cùng → bấm để đổi ảnh */
a.who.user-name{display:inline-flex;align-items:center;gap:8px;text-decoration:none;cursor:pointer}
a.who.user-name:hover{color:var(--green-d)}
.who .avatar.me{width:30px;height:30px;font-size:14px;margin:0;flex:none;box-shadow:0 0 0 2px #fff,0 0 0 3px var(--green-l)}
.logout{color:var(--pink-d);font-weight:600;white-space:nowrap}
/* flash luôn xuống dưới cụm điều khiển cho gọn */
.container>.flash{clear:both}

/* nút ✏️ đổi tên cơ sở (chỉ admin/chủ tịch) */
.centre-edit{position:relative}
.iconbtn{list-style:none;cursor:pointer;user-select:none;display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border:1px solid var(--border);border-radius:10px;background:#fff;line-height:1;font-size:15px}
.iconbtn::-webkit-details-marker{display:none}
.iconbtn::marker{content:""}
.iconbtn:hover{background:var(--green-l);border-color:var(--green)}
.centre-edit[open] .iconbtn{background:var(--green-l);border-color:var(--green)}
.centre-edit-pop{position:absolute;right:0;top:calc(100% + 8px);min-width:240px;background:#fff;
  border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);padding:12px;z-index:70}
.centre-edit-pop label{margin:0 0 6px;font-size:13px;color:var(--muted)}
.centre-edit-pop input{margin-bottom:10px}

/* language picker (flag dropdown) */
.flag{width:22px;height:15px;border-radius:3px;box-shadow:0 0 0 1px rgba(0,0,0,.14);display:block;flex:none}
.langpick{position:relative}
.langpick>summary{display:flex;align-items:center;gap:7px;cursor:pointer;list-style:none;white-space:nowrap;
  padding:6px 10px;border:1px solid var(--border);border-radius:10px;background:#fff;font-weight:700;font-size:13px;color:var(--ink);user-select:none}
.langpick>summary::-webkit-details-marker{display:none}
.langpick>summary::marker{content:""}
.langpick>summary:hover{border-color:var(--green)}
.langpick[open]>summary{border-color:var(--green);background:var(--green-l)}
.langpick .cv{color:var(--muted);font-size:11px;line-height:1}
.langpick .langmenu{position:absolute;right:0;top:calc(100% + 6px);min-width:152px;background:#fff;
  border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);padding:6px;z-index:60}
.langpick .langmenu a{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:9px;font-weight:600;color:var(--ink);white-space:nowrap}
.langpick .langmenu a:hover{background:var(--green-l);text-decoration:none}
.langpick .langmenu a.on{background:var(--green);color:#fff}
/* 🔔 Chuông thông báo (thay nút ☰ cũ) — góc phải thanh trên cùng, mọi kích thước màn hình */
.bellpick{position:relative;flex:none}
.bellpick>summary{position:relative;display:flex;align-items:center;justify-content:center;cursor:pointer;list-style:none;
  width:44px;height:40px;border:1px solid var(--border);border-radius:11px;background:#fff;user-select:none}
.bellpick>summary::-webkit-details-marker{display:none}
.bellpick>summary::marker{content:""}
.bellpick>summary:hover{border-color:var(--green);background:var(--green-l)}
.bellpick[open]>summary{border-color:var(--green);background:var(--green-l)}
.bellpick .bell-ic{font-size:20px;line-height:1}
.bellpick .bell-count{position:absolute;top:-7px;right:-7px;min-width:19px;height:19px;padding:0 4px;border-radius:999px;
  background:#e0245e;color:#fff;font-size:11px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 0 0 2px #fff}
.bellpick .bellmenu{position:absolute;right:0;top:calc(100% + 6px);width:290px;max-width:86vw;background:#fff;
  border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);padding:6px;z-index:60}
.bellpick .bell-head{padding:6px 10px 8px;font-weight:800;color:var(--green-d);border-bottom:1px solid var(--border);margin-bottom:4px}
.bellpick .bell-empty{padding:14px 10px;color:var(--muted);text-align:center}
.bellpick .bell-row{display:flex;align-items:center;gap:10px;padding:10px;border-radius:10px;color:var(--ink);font-weight:600}
.bellpick .bell-row:hover{background:var(--green-l);text-decoration:none}
.bellpick .bell-row-ic{font-size:18px;line-height:1;flex:none}
.bellpick .bell-row-tx{flex:1 1 auto;min-width:0}
/* Khối tài khoản (đổi mật khẩu · đăng xuất) trong chuông — CHỈ hiện trên điện thoại;
   máy tính đã có dải tài khoản (userrow) nên ẩn cho gọn. */
.bellpick .bell-account{display:none;margin-top:4px;padding-top:4px;border-top:1px solid var(--border)}
.bellpick .bell-logout{color:var(--pink-d)}
/* legacy pill switcher (login / parent portal) */
.langsw{display:flex;gap:2px;background:var(--green-l);border-radius:9px;padding:2px}
.langsw a{padding:5px 9px;border-radius:7px;font-size:12px;font-weight:700;color:var(--green-d)}
.langsw a.on{background:var(--green);color:#fff}
.langsw a:hover{text-decoration:none;background:rgba(122,184,0,.25)}
.langsw a.on:hover{background:var(--green)}

.container{max-width:1180px;margin:0 auto;padding:16px 22px 56px}
/* Trang tổng quan / báo cáo / danh sách nhiều cột: dùng TRỌN bề ngang màn hình —
   không để khoảng trắng lớn 2 bên trên màn hình rộng (≥1680px). Trang biểu mẫu giữ khung hẹp cho dễ đọc. */
.container.wide{max-width:none;padding-left:28px;padding-right:28px}
.container.full{max-width:none;padding-left:28px;padding-right:28px}
.flash{background:#eafbe6;border:1px solid #b9e6a8;color:#3a7d1e;padding:11px 16px;border-radius:12px;margin-bottom:18px;font-weight:600}

/* ---------- page head ---------- */
.pagehead{display:flex;align-items:flex-start;justify-content:space-between;gap:6px 14px;margin-bottom:12px;flex-wrap:wrap}
.pagehead h1{font-size:22px;color:var(--ink);margin-bottom:0}
.pagehead .sub{color:var(--muted)}
/* tiêu đề + phụ đề nằm CÙNG một hàng (gọn, bớt khoảng trống dọc); hẹp thì tự xuống dòng */
.pagehead>div:first-child{display:flex;align-items:baseline;gap:4px 10px;flex-wrap:wrap}
/* Giữ tiêu đề + thanh công cụ trên CÙNG một hàng (không xuống dòng) */
.pagehead--oneline{flex-wrap:nowrap;align-items:center}
.pagehead--oneline>div:first-child{align-items:center}
.pagehead--oneline h1{line-height:1.5;margin:0}
.pagehead--oneline .toolbar{flex-wrap:nowrap;align-items:center}
/* Ô chọn ngày: hiện chữ dd/m/yyyy (fmtDate) thay cho định dạng dài của trình duyệt;
   input type=date phủ trong suốt lên trên để bấm vào vẫn mở lịch chọn. */
.date-pick{position:relative;display:inline-flex;align-items:center;justify-content:center;
  background:#fff;border:1px solid var(--line,#d9d9d9);border-radius:10px;padding:8px 14px;
  font-size:15px;color:var(--ink,#333);cursor:pointer;white-space:nowrap}
.date-pick input[type=date]{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;
  border:0;opacity:0;cursor:pointer}
/* Ngày ngay trong tiêu đề "Bảng sức khỏe ngày …": cùng 1 dòng/1 cỡ chữ với tiêu đề,
   tô màu xanh + gạch chân chấm để người dùng biết bấm vào đổi ngày (input phủ trong suốt). */
.hb-datepick{position:relative;display:inline-flex;align-items:baseline;cursor:pointer;
  color:var(--green-d);border-bottom:2px dotted var(--green);line-height:1.15}
.hb-datepick input[type=date]{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;
  border:0;opacity:0;cursor:pointer}

/* ---------- màn TỔNG QUAN gọn: chỉ lời chào (mọi chức năng nằm trong menu 4 nhóm) ---------- */
.welcome-screen{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;
  max-width:560px;margin:8vh auto 0;padding:38px 30px 34px;
  background:linear-gradient(180deg,#f4faec 0%,var(--card) 46%);
  border:1px solid var(--border);border-radius:26px;box-shadow:var(--shadow)}
.welcome-screen .welcome-emoji{font-size:50px;line-height:1;filter:drop-shadow(0 4px 8px rgba(0,0,0,.08));margin-bottom:2px}
.welcome-screen .welcome-avatar{line-height:0;margin-bottom:6px}
.welcome-screen .welcome-avatar .avatar{width:86px;height:86px;font-size:34px;
  box-shadow:0 0 0 3px #fff,0 0 0 5px var(--green-l),0 6px 16px rgba(0,0,0,.10)}
.welcome-screen .welcome-greet{margin:0;color:var(--muted);font-size:16px;font-weight:600;letter-spacing:.2px}
.welcome-screen .welcome-name{font-size:29px;color:var(--green-d);font-weight:800;margin:0;line-height:1.2;text-wrap:nowrap;max-width:none;white-space:nowrap}
.welcome-screen .welcome-role{margin-top:4px;font-size:13px;font-weight:600;color:var(--green-d);
  background:var(--green-l);padding:5px 16px;border-radius:999px;line-height:1.35;text-wrap:balance;max-width:40ch}
.welcome-screen .greet-sub{display:block;color:var(--muted);font-size:14px;margin-top:9px}
.welcome-screen .welcome-wish{font-size:15.5px;color:var(--pink-d);font-weight:600;margin-top:8px;line-height:1.4;text-wrap:pretty;max-width:38ch}
.welcome-screen .welcome-hint{margin:8px 0 0;color:var(--muted);font-size:14px}
.welcome-screen .parent-switch-big{margin:16px 0 0;align-self:center}
@media(max-width:640px){
  .welcome-screen{margin-top:4vh;padding:30px 20px 30px;border-radius:20px}
  .welcome-screen .welcome-name{font-size:24px}
  .welcome-screen .welcome-emoji{font-size:44px}
  .welcome-screen .welcome-avatar .avatar{width:74px;height:74px;font-size:29px}
}
/* Lưới icon kiểu app cho ĐIỆN THOẠI ở trang Tổng quan — desktop ẩn (đã có thanh chip + panel ở header) */
.home-appgrid{display:none}
@media(max-width:860px){
  .home-appgrid{display:block;max-width:640px;margin:14px auto 0}
  /* điện thoại đã có lưới icon ngay đây → bỏ dòng gợi ý "dùng menu…" cho gọn */
  .welcome-screen{margin-top:2.5vh}
  .welcome-screen .welcome-hint{display:none}
}

/* ---------- cards / stats ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-bottom:24px}
.stat{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:18px 20px;box-shadow:var(--shadow);position:relative;overflow:hidden;text-align:center}
.stat .lbl{color:var(--muted);font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.3px}
.stat .val{font-family:'Baloo 2';font-size:30px;font-weight:700;margin-top:6px}
.stat::after{content:"";position:absolute;right:-18px;top:-18px;width:64px;height:64px;border-radius:50%;opacity:.16}
.stat.g .val{color:var(--green-d)} .stat.g::after{background:var(--green)}
.stat.p .val{color:var(--pink-d)} .stat.p::after{background:var(--pink)}
.stat.t .val{color:var(--teal)} .stat.t::after{background:var(--teal)}
.stat.o .val{color:var(--orange)} .stat.o::after{background:var(--orange)}

/* ---------- DASHBOARD ĐIỀU HÀNH (Chủ tịch HĐQT) — bố cục gọn 1 màn hình ---------- */
.exec-head{display:flex;align-items:center;justify-content:space-between;gap:8px 12px;flex-wrap:wrap;margin:2px 0 14px}
.exec-head h1{font-size:21px;margin:0;color:var(--green-d);text-wrap:balance}
.exec-head-l{display:flex;flex-direction:column;gap:3px;min-width:0}
.exec-head-sub{color:var(--muted);font-weight:600;font-size:13.5px}
.exec-head-sub .ehs-wish{color:var(--green-d)}
/* Tên kèm ảnh đại diện ngay sau lời chào */
.exec-head h1 .greet-me{display:inline-flex;align-items:center;gap:8px;vertical-align:middle}
.exec-head h1 .greet-me .avatar{width:32px;height:32px;font-size:15px;flex:none;box-shadow:0 0 0 2px #fff,0 0 0 3px var(--green-l)}
/* Thanh tài khoản dời vào đây: bỏ khung thanh trên, ép controls về bên phải lời chào (tự xuống hàng khi hẹp) */
.exec-head .userrow{flex:1 1 300px;border-bottom:0;padding:0;margin:0;width:auto}
.exec-head .userctl{padding-bottom:0}
/* Tên+ảnh đã hiện ở lời chào → bỏ bản trùng trong thanh tài khoản (giữ chọn cơ sở · 🔑 · đăng xuất) */
.exec-head .userrow .user-name{display:none}
.exec{display:flex;flex-direction:column;gap:12px}
.sm{font-size:13px}
.exec-clear{margin:0;color:var(--green-d);font-weight:600}
/* progress bar dùng chung */
.bar{height:8px;background:#eef0e3;border-radius:6px;overflow:hidden}
.bar.bar-xs{height:6px}
.bar>i{display:block;height:100%;border-radius:6px;transition:width .4s ease}
.b-teal{background:var(--teal)} .b-lime{background:var(--lime)} .b-green{background:var(--green)}
/* KPI strip */
.kpi-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.kc{display:flex;gap:12px;align-items:center;background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:13px 15px;border-left:5px solid var(--green);min-width:0}
.kc.k-green{border-left-color:var(--green)} .kc.k-teal{border-left-color:var(--teal)}
.kc.k-pink{border-left-color:var(--pink)} .kc.k-orange{border-left-color:var(--orange)}
.kc-ic{font-size:26px;line-height:1;flex:none}
.kc-b{min-width:0;flex:1}
.kc-lbl{color:var(--muted);font-weight:600;font-size:11.5px;text-transform:uppercase;letter-spacing:.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kc-val{font-family:'Baloo 2';font-size:26px;font-weight:700;line-height:1.1}
.kc-val.kc-money{font-size:18px;white-space:nowrap;letter-spacing:-.3px;font-variant-numeric:tabular-nums}
.k-green .kc-val{color:var(--green-d)} .k-teal .kc-val{color:var(--teal)}
.k-pink .kc-val{color:var(--pink-d)} .k-orange .kc-val{color:var(--orange)}
.kc-sub{color:var(--muted);font-size:11.5px;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* mini strip mỏng */
.mini-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.ms{display:flex;align-items:baseline;justify-content:center;gap:6px;background:var(--card);border:1px solid var(--border);
  border-radius:10px;box-shadow:var(--shadow);padding:7px 10px;min-width:0}
.ms-v{font-family:'Baloo 2';font-size:17px;font-weight:700;color:var(--ink)}
.ms-l{color:var(--muted);font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* board grid */
.exec-board{display:grid;gap:12px;grid-template-columns:repeat(4,1fr);
  grid-template-areas:"fee att att need" "comp comp comp enrol" "comp comp comp news"}
.exec-board .panel{margin:0;padding:13px 15px;display:flex;flex-direction:column;min-width:0;overflow:hidden}
.exec-board .panel h3{margin:0 0 9px;font-size:14px}
.area-fee{grid-area:fee} .area-att{grid-area:att} .area-need{grid-area:need}
.area-comp{grid-area:comp} .area-enrol{grid-area:enrol} .area-news{grid-area:news}
/* Báo cáo Chủ tịch (dưới bảng điều khiển, full-width) */
.exec-reports{margin-top:12px;padding:13px 15px}
.exec-reports h3{margin:0 0 9px;font-size:14px}
.rep-row{padding:9px 0;border-top:1px solid #f0ecf7}
.rep-row:first-of-type{border-top:0}
.rep-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px;color:#8a8594;margin-bottom:3px}
.rep-meta .rep-by{font-weight:600;color:#6b42c9}
.rep-body{font-size:14px;color:#333;white-space:pre-line}
.rep-more{display:inline-block;margin-top:8px;color:var(--pink-d);text-decoration:none}
/* donut */
.donut-wrap{display:flex;align-items:center;gap:14px;flex:1;flex-wrap:wrap}
.donut{width:112px;height:112px;flex:none}
.donut-pct{font-family:'Baloo 2';font-size:24px;font-weight:700;fill:var(--green-d)}
.donut-cap{font-size:9px;fill:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.donut-legend{font-size:12.5px;display:flex;flex-direction:column;gap:9px;min-width:0}
.donut-legend>div{display:flex;flex-direction:column;gap:1px}
.dl-top{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:12px}
.donut-legend .dot{width:10px;height:10px;border-radius:3px;display:inline-block;flex:none}
.donut-legend .dot-thu{background:var(--green)} .donut-legend .dot-owe{background:#e7b9cd}
.donut-legend b{font-variant-numeric:tabular-nums;font-size:14px}
/* cột (7 ngày) */
.colchart{display:flex;align-items:flex-end;gap:7px;flex:1;min-height:120px;padding-top:18px}
.cc-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0;height:100%}
.cc-track{flex:1;width:100%;display:flex;align-items:flex-end;justify-content:center}
.cc-bar{width:64%;max-width:30px;border-radius:6px 6px 0 0;position:relative;min-height:4px;transition:height .4s ease}
.cc-bar.cc-teal{background:linear-gradient(#74d2cb,var(--teal))}
.cc-bar.cc-today{background:linear-gradient(var(--lime),var(--green))}
.cc-v{position:absolute;top:-16px;left:0;right:0;text-align:center;font-size:11px;font-weight:700;color:var(--ink)}
.cc-x{font-size:11px;color:var(--muted);font-weight:600}
/* cần chú ý */
.need-list{display:flex;flex-direction:column;gap:7px}
.need-row{display:flex;align-items:center;gap:9px;background:#fff7f3;border:1px solid #f6d6c6;border-radius:10px;padding:7px 11px;color:var(--ink);font-weight:600;font-size:13px}
.need-row:hover{background:#ffeee5;border-color:var(--orange);text-decoration:none}
.need-row .nr-ic{font-size:15px;flex:none}
.need-row .nr-lbl{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.need-row .nr-n{flex:none;background:var(--pink);color:#fff;border-radius:999px;min-width:21px;height:21px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;padding:0 6px}
/* bảng so sánh cơ sở/lớp */
.comp-tbl{width:100%;border-collapse:collapse;font-size:13px}
.comp-tbl th{font-size:10.5px;text-transform:uppercase;letter-spacing:.3px;color:var(--muted);text-align:left;padding:4px 8px;border-bottom:1px solid var(--border);background:none}
.comp-tbl th.r{text-align:right}
.comp-tbl td{padding:7px 8px;border-bottom:1px solid #f1f3e8;vertical-align:middle}
.comp-tbl tbody tr:last-child td{border-bottom:0}
.comp-tbl tbody tr:hover{background:var(--green-l)}
.comp-tbl td.r{text-align:right}
.comp-tbl .cname{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:160px}
.comp-tbl .att-cell{display:flex;align-items:center;gap:8px}
.comp-tbl .att-cell .bar{flex:1;min-width:42px}
.comp-tbl .att-n{flex:none;font-variant-numeric:tabular-nums;color:var(--muted);font-size:12px}
.comp-tbl .money-c{font-variant-numeric:tabular-nums;white-space:nowrap}
.comp-tbl .money-c.owe{color:var(--orange)}
/* phễu tuyển sinh */
.funnel-row{display:flex;align-items:center;gap:9px;margin-bottom:8px}
.funnel-row:last-child{margin-bottom:0}
.funnel-row .fl-lbl{flex:none;width:104px;font-size:12.5px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.funnel-row .bar{flex:1}
.funnel-row .fl-n{flex:none;width:26px;text-align:right;font-weight:700;font-size:13px}
/* bảng tin */
.news-row{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px solid #f1f3e8;color:var(--ink)}
.news-row:last-child{border-bottom:0}
.news-row:hover{text-decoration:none;color:var(--green-d)}
.news-row .news-t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600;font-size:13px}
.news-row .news-d{flex:none;color:var(--muted);font-size:11.5px}
/* Băng chữ chạy: chương trình học / báo cáo cơ sở */
.exec-ticker{display:flex;align-items:center;gap:0;background:linear-gradient(90deg,#fff4ec,#fdeef6);
  border:1px solid #f4d9c8;border-radius:12px;box-shadow:var(--shadow);overflow:hidden;margin-bottom:12px}
.exec-ticker .tk-tag{flex:none;background:var(--orange);color:#fff;font-weight:700;font-size:12.5px;
  padding:9px 13px;white-space:nowrap;z-index:2}
.exec-ticker .tk-view{flex:1;overflow:hidden;position:relative;min-width:0}
.exec-ticker .tk-track{display:inline-flex;align-items:center;gap:10px;white-space:nowrap;padding-left:100%;
  animation:tkscroll 42s linear infinite}
.exec-ticker:hover .tk-track{animation-play-state:paused}
.exec-ticker .tk-item{font-size:13.5px;color:#5a4636}
.exec-ticker .tk-cs{color:var(--pink-d);margin-right:6px}
.exec-ticker .tk-sep{color:#d8b8a4}
@keyframes tkscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* Ô sĩ số & học phí hôm nay (4 cơ sở + tổng) */
.att-boxes{margin-bottom:12px;padding:13px 15px}
.att-boxes h3{margin:0 0 11px;font-size:14px}
.ab-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:11px}
.ab-card{background:#fbfcf7;border:1px solid var(--border);border-radius:12px;padding:11px 12px;min-width:0}
.ab-card.ab-total{background:linear-gradient(135deg,#eafaf1,#e4f6f4);border-color:#bfe8d6}
.ab-name{font-weight:700;font-size:13px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:8px}
.ab-stats{display:flex;gap:12px}
.ab-stat{display:flex;flex-direction:column;line-height:1.15}
.ab-stat .ab-ic{font-size:14px}
.ab-stat b{font-family:'Baloo 2';font-size:19px;font-weight:700;color:var(--green-d);font-variant-numeric:tabular-nums}
.ab-stat .ab-lbl{color:var(--muted);font-size:11px}
.ab-total .ab-stat b{color:var(--teal)}
.ab-fee{margin-top:9px;padding-top:8px;border-top:1px dashed #e6e0d4;font-size:12.5px;display:flex;flex-wrap:wrap;align-items:baseline;gap:5px}
.ab-fee b{font-variant-numeric:tabular-nums;color:var(--pink-d);font-size:13.5px}
.ab-fee .ab-slash{color:var(--muted)}
.ab-fee .ab-owe{color:var(--orange);font-size:11.5px;width:100%}
/* Hàng 2 cột: trẻ đặc biệt + nghỉ phép */
.exec-row2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.exec-row2 .panel{margin:0;padding:13px 15px;min-width:0;overflow:hidden}
.exec-row2 h3{margin:0 0 9px;font-size:14px;display:flex;align-items:center;gap:7px}
.cnt-badge{background:var(--pink);color:#fff;border-radius:999px;font-size:12px;min-width:20px;height:20px;
  display:inline-flex;align-items:center;justify-content:center;padding:0 6px;font-family:'Baloo 2'}
.chip-cls{background:#eaf6ef;color:var(--green-d)}
.sk-list,.lv-list{display:flex;flex-direction:column;gap:9px;max-height:340px;overflow-y:auto}
.sk-row,.lv-row{padding:8px 0;border-top:1px solid #f0ecf7}
.sk-row:first-child,.lv-row:first-child{border-top:0;padding-top:0}
.sk-head,.lv-head{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:4px}
.sk-name,.lv-name{font-weight:700;font-size:13.5px;color:var(--ink)}
.sk-tags{display:flex;flex-wrap:wrap;gap:6px}
.sk-tag{font-size:12px;border-radius:8px;padding:3px 8px;line-height:1.35}
.sk-tag.sk-al{background:#fff1f1;color:#c0392b;border:1px solid #f6d5d0}
.sk-tag.sk-hn{background:#fff8ea;color:#a06a12;border:1px solid #f2e3c0}
.lv-type{font-size:12px;background:#f0ecfb;color:#6b42c9;border-radius:8px;padding:2px 8px;font-weight:600}
.lv-cover{font-size:12.5px;color:#5a6b52;background:#f4f8ee;border-radius:8px;padding:5px 9px}
@media(max-width:720px){ .exec-row2{grid-template-columns:1fr} }
/* ===== Dashboard Chủ tịch — phong cách Power BI, dồn 1 màn hình ===== */
.exec-fit{display:flex;flex-direction:column;gap:11px}
/* Ô KPI lớn nền gradient + biểu đồ mini */
.kpi-hero{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.kh{border-radius:16px;padding:14px 17px;color:#fff;position:relative;overflow:hidden;display:flex;flex-direction:column;
  min-height:116px;box-shadow:0 6px 16px rgba(20,40,60,.13)}
.h-teal{background:linear-gradient(135deg,#0c6a6a,#0f8181)}
.h-cyan{background:linear-gradient(135deg,#12b1b1,#18caca)}
.h-amber{background:linear-gradient(135deg,#eea200,#f5b301)}
.h-orange{background:linear-gradient(135deg,#f2681a,#f6851f)}
.kh-lbl{font-size:12.5px;font-weight:600;opacity:.93;position:relative;z-index:2}
.kh-val{font-family:'Baloo 2';font-size:33px;font-weight:800;line-height:1.05;margin-top:2px;white-space:nowrap;position:relative;z-index:2}
.kh-val.kh-money{font-size:21px;letter-spacing:-.3px}
.kh-sub{font-size:11.5px;opacity:.92;margin-top:auto;position:relative;z-index:2}
.kh-spark{position:absolute;left:0;right:0;bottom:20px;width:100%;height:46px;opacity:.85;z-index:1}
.kh-sparkline{fill:none;stroke:#fff;stroke-width:2.4;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}
.kh-sparkfill{fill:rgba(255,255,255,.16);stroke:none}
.kh-delta{position:absolute;right:15px;top:14px;font-size:13px;font-weight:700;opacity:.95;z-index:2}
.kh-gauge{width:126px;height:70px;margin:2px auto 0;display:block}
.kh-gtrack{stroke:rgba(255,255,255,.28);stroke-width:12}
.kh-gfill{stroke:#fff;stroke-width:12}
.kh-gtext{fill:#fff;font-family:'Baloo 2';font-size:23px;font-weight:800}
.kh-bar{height:8px;border-radius:99px;background:rgba(255,255,255,.28);margin-top:10px;overflow:hidden;position:relative;z-index:2}
.kh-bar i{display:block;height:100%;background:#fff;border-radius:99px}
/* Ô sĩ số cơ sở — gọn hơn để tiết kiệm chiều cao */
.att-boxes{padding:10px 13px;margin:0}
.att-boxes .ab-grid{grid-template-columns:repeat(5,1fr)}
.ab-grid-cls{grid-auto-flow:column;grid-auto-columns:minmax(118px,1fr);grid-template-columns:none;overflow-x:auto}
.att-boxes .ab-name{margin-bottom:5px}
.att-boxes .ab-stats{flex-direction:column;gap:1px}
.att-boxes .ab-stat{flex-direction:row;align-items:baseline;gap:6px}
.att-boxes .ab-stat b{font-size:14.5px}
.att-boxes .ab-stat .ab-lbl{font-size:10.5px}
.att-boxes .ab-fee{margin-top:5px;padding-top:5px}
/* Bảng điều khiển lấp phần màn hình còn lại (chiều cao do JS đặt) */
.exec-board2{display:grid;gap:11px;grid-template-columns:repeat(4,1fr);grid-template-rows:minmax(0,.85fr) minmax(0,1.15fr);
  grid-template-areas:"fee att att need" "kids leave funnel news"}
.exec-board2 .panel{margin:0;padding:12px 14px;display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden}
.exec-board2 .panel h3{margin:0 0 8px;font-size:13.5px;display:flex;align-items:center;gap:7px}
.area-fee2{grid-area:fee}.area-att2{grid-area:att}.area-need2{grid-area:need}
.area-kids2{grid-area:kids}.area-leave2{grid-area:leave}.area-funnel2{grid-area:funnel}.area-news2{grid-area:news}
.scroll-fill{flex:1;min-height:0;overflow-y:auto;max-height:none}
.funnel-list{display:flex;flex-direction:column;gap:8px}
/* thanh cuộn mảnh (khi KHÔNG tự chạy — vd chạm màn hình) */
.scroll-fill{scrollbar-width:thin;scrollbar-color:#cdd6bf transparent}
.scroll-fill::-webkit-scrollbar{width:6px}
.scroll-fill::-webkit-scrollbar-thumb{background:#cdd6bf;border-radius:6px}
/* Tự cuộn dọc liên tục (marquee) khi nội dung tràn khung — rê chuột thì dừng để đọc */
.marq-host.marq-on{overflow:hidden}
.marq-track{will-change:transform}
.marq-host.marq-on .marq-track{animation:vscroll linear infinite}
.marq-host.marq-on:hover .marq-track{animation-play-state:paused}
@keyframes vscroll{from{transform:translateY(0)}to{transform:translateY(calc(-1 * var(--marq-h,50%)))}}
.news-wrap{display:flex;flex-direction:column}
.exec-board2 .colchart{min-height:0;padding-top:16px}
.exec-board2 .donut-wrap{flex-wrap:nowrap}
.exec-board2 .donut{width:98px;height:98px}
@media(max-width:999px){
  .exec-fit{display:block}
  .kpi-hero{grid-template-columns:repeat(2,1fr)}
  .exec-board2{height:auto!important;grid-template-columns:1fr 1fr;
    grid-template-areas:"fee need" "att att" "kids leave" "funnel news"}
  .exec-board2 .panel{overflow:visible}
  .scroll-fill{max-height:250px}
  .att-boxes .ab-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:600px){
  .kpi-hero{grid-template-columns:1fr 1fr}
  .exec-board2{grid-template-columns:1fr;
    grid-template-areas:"att" "fee" "kids" "leave" "funnel" "need" "news"}
  .att-boxes .ab-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:980px){
  .exec-board{grid-template-columns:repeat(2,1fr);
    grid-template-areas:"fee need" "att att" "comp comp" "enrol news"}
  .kpi-strip{grid-template-columns:repeat(2,1fr)}
  .mini-strip{grid-template-columns:repeat(3,1fr)}
  .ab-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:560px){
  .exec-board{grid-template-columns:1fr;grid-template-areas:"fee" "att" "need" "comp" "enrol" "news"}
  .kpi-strip{grid-template-columns:1fr 1fr}
  .mini-strip{grid-template-columns:repeat(2,1fr)}
  .ab-grid{grid-template-columns:repeat(2,1fr)}
  .kc-val{font-size:23px}
  /* Bảng So sánh cơ sở: tên đã ngắn (bỏ "Happy House") nên hiện ĐỦ, không cắt "...";
     nếu các cột tiền vẫn rộng hơn màn hình thì cho VUỐT NGANG thay vì cắt mất nét. */
  .exec-board .panel.area-comp{overflow:visible;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .area-comp .comp-tbl{min-width:max-content}
  .comp-tbl .cname{max-width:none;overflow:visible}
  .comp-tbl th,.comp-tbl td{padding:6px 7px}
}

.panel{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;margin-bottom:20px}
.panel h2{font-size:18px;color:var(--ink)}

/* Chi tiết 1 cơ sở (Chủ tịch bấm vào xem) — dùng lại KPI/comp-tbl/need-list của dashboard */
.cd .panel h2{margin:0 0 12px;font-size:16px}
.cd .kpi-strip,.cd .mini-strip{margin-bottom:16px}
.cd-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cd-row>.panel{margin-bottom:20px}
.cd-info{display:flex;flex-direction:column}
.cd-info .row{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:9px 0;border-bottom:1px solid #f1f3e8}
.cd-info .row:last-child{border-bottom:0}
.cd-info .k{flex:none;color:var(--muted);font-weight:600;font-size:13px}
.cd-info .v{text-align:right;font-weight:600}
@media(max-width:760px){.cd-row{grid-template-columns:1fr;gap:0}}
.grid2{display:grid;grid-template-columns:1.4fr 1fr;gap:20px}
@media(max-width:820px){.grid2{grid-template-columns:1fr}}

/* ---------- table ---------- */
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--border);vertical-align:middle}
th{font-size:12px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);background:#fbfcf6}
tbody tr:hover{background:var(--green-l)}
.table-wrap{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}

/* danh sách dạng bảng: gọn, mật độ cao, dễ quét mắt (áp dụng mọi trang) */
.table-wrap table{font-size:14px}
.table-wrap th,.table-wrap td{padding:8px 14px}
.table-wrap th{font-size:11px;letter-spacing:.3px}
.table-wrap tbody tr:nth-child(even){background:#fbfcf4}
.table-wrap tbody tr:hover{background:var(--green-l)}
.table-wrap tbody td{border-bottom:1px solid #f1f3e8}
.table-wrap .avatar{width:30px;height:30px;font-size:13px;margin-right:9px}
.table-wrap td b{font-weight:600}
/* trang Nhân sự ít cột → thu hẹp cho gọn, khỏi rời rạc */
.staff-table{max-width:1060px}
/* Họ và tên luôn hiển thị trên 1 dòng (không xuống dòng) */
.staff-table td:first-child{white-space:nowrap}
/* Tên trường/cơ sở (cột "Trường / Lớp" và "Cơ sở") cũng giữ 1 dòng */
.staff-table td.centre-cell{white-space:nowrap}
/* Chế độ "Tất cả cơ sở" có thêm cột Cơ sở → dùng hết bề ngang cho đủ chỗ */
.staff-table.allmode{max-width:none}
/* Ban giám hiệu xem đầy đủ hồ sơ: nhiều cột → dùng hết bề ngang + CUỘN NGANG (khỏi bị overflow:hidden cắt).
   rowmenu/popup dùng position:fixed nên không bị vùng cuộn này cắt. */
.table-wrap.staff-wide{max-width:none;overflow:auto;-webkit-overflow-scrolling:touch}
.staff-table.staff-wide td,.staff-table.staff-wide th{white-space:nowrap}
.staff-table.staff-wide td.centre-cell{white-space:nowrap}
/* Nhiều cột hồ sơ → cột thao tác "⋯" (Sửa/Đổi trường/Xóa…) bị đẩy khuất khỏi màn khi cuộn ngang
   (BGH than "mất hết chức năng trong 3 chấm"). GHIM cột ⋯ vào MÉP PHẢI để luôn nhìn thấy. */
.staff-table.staff-wide td.c-actions,
.staff-table.staff-wide thead th:last-child{position:sticky;right:0;background:#fff;z-index:3;
  box-shadow:-9px 0 12px -8px rgba(0,0,0,.12)}
.staff-table.staff-wide tr.staff-resigned td.c-actions{background:#fafafa}
/* Duyệt đơn giáo viên: mỗi đơn gọn trên 1 DÒNG — các cột không xuống hàng; riêng cột Lý do
   co giãn nhưng cắt … khi quá dài cho khỏi tràn ngang (table-wrap overflow:hidden). */
.reqtbl th,.reqtbl td{white-space:nowrap;vertical-align:middle}
.reqtbl td.req-reason{max-width:280px;overflow:hidden;text-overflow:ellipsis}
/* Thống kê phép: cột số canh phải, "Còn lại" tô màu (âm = đỏ). */
.reqtbl th.num,.reqtbl td.num{text-align:right;font-variant-numeric:tabular-nums}
.leave-stats td:first-child{min-width:150px}
.leave-stats .lv-ok{color:var(--green-d,#2e7d32)}
.leave-stats .lv-neg{color:#d23}
.staff-table tr.staff-resigned td{background:#fafafa;color:#9aa0a6}
.staff-table tr.staff-resigned td b{color:#9aa0a6;font-weight:600}
.staff-table tr.staff-resigned .avatar{filter:grayscale(1);opacity:.6}
/* Danh sách Bé (Học sinh / Lớp): cũng thu hẹp cho gọn — kể cả "Tất cả cơ sở", khỏi dàn hết màn hình rộng */
.table-wrap.list-narrow{max-width:1180px}
.table-wrap.list-narrow td:first-child{white-space:nowrap}
/* ----- Danh sách Bé trên ĐIỆN THOẠI: mỗi bé thành 1 THẺ (card), không còn bảng tràn ngang/cắt cột ----- */
@media(max-width:720px){
  .table-wrap.cards-mobile{border:0;background:transparent;box-shadow:none;overflow:visible}
  .table-wrap.cards-mobile table{display:block;font-size:14px}
  /* ẩn hàng tiêu đề (vẫn giữ cho trình đọc màn hình) */
  .table-wrap.cards-mobile thead{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
  .table-wrap.cards-mobile tbody{display:block}
  .table-wrap.cards-mobile tbody tr{
    display:block;position:relative;background:var(--card);border:1px solid var(--border);
    border-radius:14px;box-shadow:var(--shadow);padding:12px 14px;margin-bottom:10px}
  .table-wrap.cards-mobile tbody tr:nth-child(even),
  .table-wrap.cards-mobile tbody tr:hover{background:var(--card)}
  .table-wrap.cards-mobile tbody td{display:block;border:0;padding:3px 0;white-space:normal !important;text-align:left}
  .table-wrap.cards-mobile tbody td[data-label]::before{
    content:attr(data-label);display:inline-block;min-width:88px;vertical-align:top;
    font-size:11px;text-transform:uppercase;letter-spacing:.3px;color:var(--muted);font-weight:600}
  /* tên bé = tiêu đề thẻ (chừa chỗ bên phải cho nút ⋯) */
  .table-wrap.cards-mobile td.c-name{font-size:16px;padding:0 40px 8px 0;margin-bottom:6px;border-bottom:1px solid #f1f3e8}
  .table-wrap.cards-mobile td.c-name .avatar{width:34px;height:34px;font-size:14px}
  /* nút thao tác ⋯ ở góc trên phải thẻ */
  .table-wrap.cards-mobile td.c-actions{position:absolute;top:9px;right:10px;padding:0}
  /* Ô phụ huynh nhiều dòng (Cha/Mẹ): nhãn bên trái, các dòng tên căn thẳng cùng một mép */
  .table-wrap.cards-mobile td.pa-cell{display:flex;gap:6px;align-items:flex-start}
  .table-wrap.cards-mobile td.pa-cell::before{flex:none}
  .table-wrap.cards-mobile td.pa-cell .pa-lines{flex:1;min-width:0}
  /* STT gộp vào dòng mã số bé dưới avatar (STT 01 - Mã số) — ẩn thẻ STT riêng */
  .table-wrap.cards-mobile td.c-stt{display:none}
  .table-wrap.cards-mobile .stt-inline{display:inline}
}
/* trên desktop STT là cột riêng nên ẩn tiền tố inline */
.stt-inline{display:none}

/* ---------- badges ---------- */
.badge{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:700;white-space:nowrap}
.b-green{background:#e7f6d6;color:#4d8a13}
.b-pink{background:#ffe3f1;color:var(--pink-d)}
.b-amber{background:#fff2d6;color:#b9791a}
.b-gray{background:#eee;color:#777}
.b-teal{background:#d8f3f1;color:#0a857c}
.b-red{background:#fde0e0;color:#c0392b}
.b-purple{background:#ede4ff;color:#6b42c9}

/* chip filter (hộp thư, đánh giá theo lớp) */
.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:999px;
  background:#f1f3f5;color:#555;font-size:13px;font-weight:600;border:1px solid transparent}
.chip:hover{text-decoration:none;background:#e7eaee}
.chip.on{background:var(--green-l);color:var(--green-d);border-color:var(--green)}
.chip.chip-sys{background:#fff4e0;color:#9a5b00;border-color:#f0c987}
.assign-sel{padding:5px 8px;border-radius:8px;border:1px solid #d8dde2;background:#fff;font-size:13px;max-width:160px}

/* thống kê tiếp cận thông báo */
.annstat{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:10px 14px;border:1px solid #eef0f2;
  border-radius:12px;background:#fafbfc}
a.annstat:hover{text-decoration:none;background:#f3f6f4;border-color:var(--green-l)}
.annstat-cell{display:flex;flex-direction:column;line-height:1.25}
.annstat-cell b{font-size:18px;color:#333}
.annstat-cell small{color:#888;font-size:12px}
.ack-done{margin-top:8px;color:#0a857c;font-weight:700;font-size:13px}

/* popover nhỏ inline (nút "Nộp lại" trong Hồ sơ học tập) */
.inline-pop{position:relative}
.inline-pop>summary{list-style:none;cursor:pointer;user-select:none}
.inline-pop>summary::-webkit-details-marker{display:none}
.inline-pop .pop-body{position:absolute;right:0;top:calc(100% + 6px);z-index:60;width:240px;display:flex;flex-direction:column;gap:6px;
  background:#fff;border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);padding:12px}
.inline-pop .pop-body input{margin:0}

/* Tên ứng dụng giữa thanh trên cùng — chỉ hiện trên điện thoại (desktop dùng thanh nav ngang) */
.brand-word{display:none;font-family:'Baloo 2',system-ui,sans-serif;font-weight:700;color:var(--green-d);font-size:18px;white-space:nowrap}
/* Panel thu gọn được (Sĩ số hôm nay / Khoảnh khắc học tập) — bấm tiêu đề để xổ/thu */
.collapse-panel{padding:0;overflow:hidden}
.collapse-panel>summary{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:16px 18px;cursor:pointer;list-style:none;user-select:none}
.collapse-panel>summary::-webkit-details-marker{display:none}
.collapse-panel>summary::marker{content:""}
.collapse-panel>summary:hover{background:var(--green-l)}
.collapse-panel[open]>summary{border-bottom:1px solid var(--border)}
.cp-title{display:flex;align-items:center;gap:10px;font-family:'Baloo 2';font-weight:700;font-size:18px;color:var(--ink)}
.cp-body{padding:16px 18px}
/* thanh chọn ngày của Khoảnh khắc: hôm qua / hôm nay / chọn ngày + nút đăng */
.moment-datebar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.moment-datebar .datebar-sp{flex:1 1 auto}
.moment-datepick{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--muted);font-size:13px}
.moment-datepick input[type=date]{border:1px solid var(--border);border-radius:9px;padding:6px 8px;font:inherit;color:var(--ink)}
/* Menu "xếp dọc, bấm để xổ" trên Tổng quan (đưa mọi chức năng ra thẳng màn hình) */
.accordion-panel{border-left:4px solid var(--green-d)}
.acc-list{display:flex;flex-direction:column;gap:6px}
.acc-item{border:1px solid var(--border);border-radius:12px;overflow:hidden;background:#fff}
.acc-row{display:flex;align-items:center;gap:12px;padding:13px 14px;cursor:pointer;list-style:none;font-weight:600;color:var(--ink)}
.acc-row::-webkit-details-marker{display:none}
.acc-row:hover{background:var(--green-l);text-decoration:none}
.acc-ic{font-size:20px;flex:none;width:26px;text-align:center}
.acc-label{flex:1 1 auto}
.acc-caret{flex:none;color:var(--muted);transition:transform .2s}
details.acc-item[open]>.acc-row .acc-caret{transform:rotate(180deg)}
details.acc-item[open]>.acc-row{background:var(--green-l);border-bottom:1px solid var(--border)}
.acc-children{display:flex;flex-direction:column;padding:6px}
.acc-child{display:flex;align-items:center;gap:10px;padding:11px 12px 11px 16px;border-radius:10px;color:var(--ink);font-weight:500}
.acc-child:hover{background:var(--green-l);text-decoration:none}
.acc-child .acc-ic{font-size:17px;width:22px}
.acc-leaf.acc-logout{color:var(--pink-d)}
/* Lưới chức năng kiểu "màn hình ứng dụng" — mọi mục là 1 Ô icon, xếp tuần tự (không chia nhóm) */
/* Lưới chức năng gom 4 nhóm (Tổng quan điện thoại) */
.func-group{margin-top:16px}
.func-group:first-child{margin-top:4px}
.func-group-title{display:flex;align-items:center;gap:6px;font-weight:700;font-size:15px;color:var(--green-d);
  margin:0 2px 8px;padding-bottom:6px;border-bottom:2px solid var(--green-l)}
.func-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:4px}
.func-tile{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:16px 8px;min-height:98px;background:var(--card);border:1px solid var(--border);
  border-radius:16px;box-shadow:var(--shadow);color:var(--ink);text-align:center;text-decoration:none}
.func-tile:hover{background:var(--green-l);border-color:var(--green);text-decoration:none}
.func-tile .ft-ic{font-size:30px;line-height:1}
.func-tile .ft-label{font-size:12.5px;font-weight:600;line-height:1.25}
.func-tile.ft-logout .ft-label{color:var(--pink-d)}
.func-tile .navbadge{position:absolute;top:8px;right:8px}

/* Việc của tôi (Tổng quan giáo viên) */
.tasks-panel{border-left:4px solid var(--pink)}
/* Khoảnh khắc học tập ngay trên Tổng quan — panel giống "Việc của tôi" */
.moments-panel{border-left:4px solid var(--green)}
.mp-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.moments-panel .album-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.tasks{display:flex;flex-direction:column;gap:8px}
.taskrow{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--border);border-radius:12px;
  background:#fff;color:var(--ink);font-weight:600}
.taskrow:hover{text-decoration:none;background:var(--green-l);border-color:var(--green)}
.taskrow .tk-ic{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:17px;flex:none}
.taskrow .tk-txt{flex:1 1 auto}

/* Các thư mục / Album (như LittleLives "Các thư mục") */
.album-group{margin-bottom:26px}
.album-cls{font-size:18px;margin:0 0 12px;padding-bottom:6px;border-bottom:2px solid var(--border)}
.album-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:16px}
.album-card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--border);border-radius:14px;
  overflow:hidden;box-shadow:var(--shadow);color:var(--ink)}
.album-card:hover{text-decoration:none;transform:translateY(-2px);box-shadow:0 6px 18px rgba(94,148,0,.16);transition:.15s}
.album-cover{position:relative;aspect-ratio:4/3;background:#eef2f4;display:flex;align-items:center;justify-content:center;overflow:hidden}
.album-cover img,.album-cover video{width:100%;height:100%;object-fit:cover;display:block}
.album-cover .album-ph{font-size:40px;opacity:.5}
.album-count{position:absolute;right:8px;bottom:8px;background:rgba(0,0,0,.62);color:#fff;font-size:12px;font-weight:600;
  padding:3px 9px;border-radius:999px}
.album-body{padding:10px 12px}
.album-title{font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.album-meta{color:var(--muted);font-size:12px;margin-top:4px}
.moment-item{transition:box-shadow .3s,outline-color .3s;outline:2px solid transparent}
.moment-hl{outline-color:var(--pink);box-shadow:0 0 0 4px rgba(230,0,126,.12)}

/* Bảng sức khỏe theo lớp */
.hsum{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.hsum-chip{display:flex;align-items:center;gap:7px;min-width:0;background:var(--card);border:1px solid var(--border);border-radius:12px;
  padding:8px 14px;box-shadow:var(--shadow);font-weight:600;line-height:1.2}
.hsum-chip .hic{font-size:17px;flex:none}
.hsum-chip b{font-size:17px;color:var(--green-d);flex:none}
/* Điện thoại hẹp: xếp dọc (emoji · số · nhãn) để nhãn 2 chữ không đè lên số */
@media(max-width:560px){
  .hsum{gap:8px}
  .hsum-chip{flex-direction:column;text-align:center;gap:2px;padding:9px 6px}
  .hsum-chip b{font-size:20px}
}
.health-tbl td{vertical-align:top;font-size:13px}
.health-tbl .hb-name{display:inline-flex;align-items:center;gap:8px}
.health-tbl .hb-av{width:30px;height:30px;font-size:13px;flex:none}
.table-wrap.cards-mobile .health-tbl .hb-av{width:38px;height:38px;font-size:15px}
.health-tbl .hlog{padding:2px 0;line-height:1.35}
.health-tbl .ht{display:inline-block;min-width:38px;color:var(--muted);font-weight:600;margin-right:4px}

/* ---------- Chương trình sức khoẻ (Khám SK · Tẩy giun · Vitamin A) ---------- */
.hp-tabs{display:flex;gap:8px;margin:6px 0 16px;flex-wrap:wrap}
.hp-tab{padding:8px 16px;border-radius:999px;border:1px solid var(--border);background:var(--card);
  font-weight:600;color:var(--ink);text-decoration:none;font-size:14px}
.hp-tab.on{background:var(--green);color:#fff;border-color:var(--green)}
.hp-newbox summary{font-weight:700;cursor:pointer}
.hp-form{display:flex;flex-wrap:wrap;gap:12px;align-items:end}
.hp-form label{display:flex;flex-direction:column;gap:4px;font-size:13px;font-weight:600;color:var(--muted)}
.hp-form label input,.hp-form label select{min-width:170px}
.hp-form label.hp-wide{flex:1 1 100%}
.hp-form label.hp-wide input{width:100%}
.hp-hints{display:flex;gap:8px;flex-wrap:wrap;flex:1 1 100%}
.hp-pill{background:#eef6ef;color:var(--green-d);border-radius:999px;padding:4px 12px;font-size:12.5px;font-weight:600}
.hp-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;margin-top:14px}
.hp-card{display:flex;flex-direction:column;gap:10px}
.hp-card-title{font-weight:700;font-size:16px;color:var(--ink);text-decoration:none}
.hp-meta{font-size:12.5px;margin-top:3px}
.hp-status{display:inline-block;background:#eee;color:#777;border-radius:999px;padding:1px 9px;font-size:11.5px;font-weight:700}
.hp-status.on{background:#e7f6ec;color:var(--green-d)}
.hp-stats{display:flex;gap:8px;flex-wrap:wrap}
.hp-stat{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:5px 11px;font-size:12.5px;font-weight:600}
.hp-stat b{font-size:15px;margin-right:3px}
.hp-stat.ok b{color:var(--green-d)}.hp-stat.no b{color:#c0392b}.hp-stat.pend b{color:#b8860b}.hp-stat.done b{color:#2d6cdf}
.hp-card-foot{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto}
.hp-sec{font-size:16px;margin:18px 2px 8px}
.hp-tbl td{vertical-align:middle}
.hp-classrow td{background:#f6f8f6;font-weight:700;font-size:13px}
.hp-rec{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.hp-rec input[name=result]{flex:1;min-width:140px}
.hp-done-lbl{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:600;white-space:nowrap}
.reg-badge{display:inline-block;border-radius:999px;padding:2px 10px;font-size:12px;font-weight:700}
.reg-badge.yes{background:#e7f6ec;color:var(--green-d)}.reg-badge.no{background:#fdecef;color:#c0392b}
.reg-badge.pend{background:#f3f3f3;color:#888}
.reg-state{font-weight:700;font-size:13px}.reg-state.yes{color:var(--green-d)}.reg-state.no{color:#c0392b}

/* ---------- buttons ---------- */
.btn{display:inline-block;border:none;cursor:pointer;font-family:inherit;font-weight:600;font-size:14px;
  padding:10px 18px;border-radius:11px;background:var(--green);color:#fff;transition:.15s}
.btn:hover{background:var(--green-d);text-decoration:none}
.btn-pink{background:var(--pink)} .btn-pink:hover{background:var(--pink-d)}
.btn-ghost{background:#fff;color:var(--ink);border:1px solid var(--border)} .btn-ghost:hover{background:var(--green-l)}
.btn-sm{padding:6px 12px;font-size:13px;border-radius:9px}
.btn-danger{background:#fff;color:var(--pink-d);border:1px solid #f3c2dc} .btn-danger:hover{background:#ffe3f1}
.btn-block{width:100%;text-align:center}

/* Nút "← Quay lại" dùng chung trên mọi trang — nay NẰM CHUNG HÀNG với tiêu đề trang.
   Kỹ thuật: float trái, còn .pagehead là flex-container nên đứng SÁT BÊN PHẢI nút (float không lọt vào flex). */
.backbtn{display:inline-flex;align-items:center;gap:6px;margin:0 0 14px;padding:6px 13px 6px 10px;
  border:1px solid var(--border);border-radius:999px;background:#fff;color:var(--ink);
  font-family:inherit;font-weight:600;font-size:13px;line-height:1;transition:.15s}
.backbtn:hover{background:var(--green-l);border-color:var(--green);color:var(--green-d);text-decoration:none}
.backbtn .ic{font-size:15px;font-weight:700;line-height:1;transition:transform .15s}
.backbtn:hover .ic{transform:translateX(-2px)}
/* Nút "← Quay lại" nằm trong dải tài khoản, NGANG HÀNG với avatar:
   đẩy sát trái (margin-right:auto), phần còn lại (cơ sở/avatar/🔑/đăng xuất) dồn phải. */
.userctl>.backbtn{margin:0 auto 0 0;height:32px;padding:0 14px 0 11px}

/* ---------- forms ---------- */
.form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
label{display:block;font-weight:600;margin:12px 0 5px;color:var(--ink)}
input,select,textarea{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:10px;font-family:inherit;font-size:15px;background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px var(--green-l)}
/* Ép danh sách xổ xuống của select luôn nền TRẮNG chữ tối — chống popup ĐEN khi máy/trình duyệt ở chế độ Tối */
select{color-scheme:light}
select option{background:#fff;color:var(--ink)}
select option:checked{background:var(--green-l)}
textarea{min-height:90px;resize:vertical}
input[type=radio],input[type=checkbox]{width:auto;box-shadow:none;accent-color:var(--green);margin-right:5px;vertical-align:-1px}
/* Ô mật khẩu + nút con mắt hiện/ẩn (gắn bởi js/pw-toggle.js) */
.pw-wrap{position:relative;display:block}
.pw-wrap>input{padding-right:46px}
.pw-eye{position:absolute;top:0;right:0;width:44px;height:100%;display:flex;align-items:center;justify-content:center;padding:0;margin:0;background:none;border:none;border-radius:0 10px 10px 0;color:#9aa3ad;cursor:pointer}
.pw-eye:hover{color:var(--pink-d)}
.pw-eye.on{color:var(--green)}
.pw-eye svg{display:block}
.att-status{white-space:nowrap}
.att-status label{display:inline-flex;align-items:center;margin:0 14px 0 0;font-weight:500;cursor:pointer}
details{display:inline-block}
summary{cursor:pointer;list-style:none}
summary::-webkit-details-marker{display:none}
/* popup dùng position:fixed (toạ độ do paybox.js đặt) để không bị .table-wrap{overflow:hidden} cắt */
.paybox{position:fixed;background:#fff;border:1px solid var(--border);border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.12);padding:14px;width:230px;z-index:60;text-align:left}
.paybox label{display:block;margin:6px 0 4px;font-size:13px}
.form-actions{margin-top:18px;display:flex;gap:10px}
.toolbar{display:flex;gap:10px;align-items:center;margin-bottom:16px;flex-wrap:wrap}
.toolbar input,.toolbar select{width:auto}
/* toolbar merged into the page header row → one horizontal line, pushed right */
.pagehead .toolbar{margin:0 0 0 auto}
.inline{display:inline}
.rowacts{display:inline-flex;gap:8px;align-items:center;justify-content:flex-end}
.rowacts details.inline{display:inline-block;position:relative}

/* avatar */
.avatar{width:34px;height:34px;border-radius:50%;background:var(--green-l);color:var(--green-d);display:inline-flex;
  align-items:center;justify-content:center;font-weight:700;font-family:'Baloo 2';margin-right:8px}
.muted{color:var(--muted)}
.right{text-align:right}.center{text-align:center}
.bar{height:10px;border-radius:6px;background:#eef0e4;overflow:hidden}
.bar>i{display:block;height:100%;background:var(--green)}

/* news list */
.newslist{list-style:none;margin:0;padding:0}
.newslist li{padding:12px 0;border-bottom:1px solid var(--border)}
.newslist li:last-child{border-bottom:none}
.newslist .t{font-weight:700;color:var(--ink)}
.newslist .d{color:var(--muted);font-size:13px}

/* ---------- login ---------- */
.login-body{min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#eef6df,#fde3f0);padding:20px}
.login-card{background:#fff;border-radius:22px;box-shadow:0 18px 50px rgba(120,80,120,.18);padding:36px 34px;width:100%;max-width:400px;text-align:center}
.login-logo{height:84px;margin-bottom:8px}
.login-card h1{font-size:21px;color:var(--green-d)}
.login-card form{text-align:left;margin-top:14px}
.login-card .hint{margin-top:16px;color:var(--muted);font-size:13px;text-align:center}
.error{background:#ffe3ec;border:1px solid #f3b6cf;color:var(--pink-d);padding:10px 14px;border-radius:10px;font-weight:600;margin-bottom:6px}

.sitefooter{text-align:center;color:var(--muted);padding:24px;font-size:13px}

/* menu thao tác từng dòng (nút ⋯ gộp Sửa / Đặt lại MK / Xóa) */
.rowmenu{display:inline-block}
.rowmenu>summary{list-style:none;cursor:pointer;user-select:none;display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border:1px solid var(--border);border-radius:9px;background:#fff;color:var(--muted);
  font-size:20px;line-height:1;font-weight:700}
.rowmenu>summary::-webkit-details-marker{display:none}
.rowmenu>summary::marker{content:""}
.rowmenu>summary:hover{background:var(--green-l);border-color:var(--green);color:var(--ink)}
.rowmenu[open]>summary{background:var(--green-l);border-color:var(--green);color:var(--ink)}
/* popup dùng position:fixed (toạ độ do rowmenu.js đặt) để không bị .table-wrap{overflow:hidden} cắt */
.rowmenu .rowmenu-pop{position:fixed;min-width:184px;background:#fff;border:1px solid var(--border);
  border-radius:12px;box-shadow:0 12px 30px rgba(0,0,0,.14);padding:6px;z-index:120;text-align:left}
.rowmenu:not([open]) .rowmenu-pop{display:none}
.rowmenu .rowmenu-pop form{margin:0;display:block}
.rowmenu .rowmenu-pop a,
.rowmenu .rowmenu-pop button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  padding:9px 11px;border:none;border-radius:9px;background:none;cursor:pointer;
  font-family:inherit;font-size:14px;font-weight:600;color:var(--ink);white-space:nowrap}
.rowmenu .rowmenu-pop a:hover,
.rowmenu .rowmenu-pop button:hover{background:var(--green-l);text-decoration:none}
.rowmenu .rowmenu-pop button.danger{color:var(--pink-d)}
.rowmenu .rowmenu-pop button.danger:hover{background:#ffe3f1}
.rowmenu .rowmenu-pop .ic{font-size:15px;line-height:1;width:18px;text-align:center}

/* sub-tabs (tab con trong từng mục gộp: Lớp, Học phí) — nằm đầu vùng nội dung */
.subtabs{display:flex;gap:4px;flex-wrap:wrap;margin:0}
.subtabs a{padding:9px 15px;font-weight:600;color:var(--muted);border-bottom:3px solid transparent;border-radius:9px 9px 0 0;margin-bottom:-2px;white-space:nowrap}
.subtabs a:hover{background:var(--green-l);color:var(--ink);text-decoration:none}
.subtabs a.active{color:var(--green-d);border-bottom-color:var(--green);background:var(--green-l)}
.scope-note{display:inline-block;margin:0 0 16px;font-size:13px;color:var(--green-d);background:var(--green-l);border:1px solid #d7e8b8;padding:6px 12px;border-radius:999px;font-weight:600}

/* modal (hộp thoại, vd Chuyển lớp) */
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;z-index:200;padding:20px}
.modal-backdrop[hidden]{display:none}
.modal{background:#fff;border-radius:var(--radius);box-shadow:0 20px 50px rgba(0,0,0,.25);padding:22px 24px;max-width:420px;width:100%}
.modal h2{margin-top:0}
.modal label{display:block;margin:12px 0 4px;font-weight:600;color:var(--muted);font-size:13px}
.modal select{width:100%;padding:9px 11px;border:1px solid var(--border);border-radius:10px;background:#fff;font-family:inherit;font-size:15px;color:var(--ink)}

/* Tên giáo viên bấm được (Chủ tịch xem nhanh hồ sơ) */
.staff-name-btn{display:inline-flex;align-items:center;gap:0;border:none;background:none;padding:0;margin:0;
  font-family:inherit;font-size:inherit;color:inherit;text-align:left;cursor:pointer}
.staff-name-btn b{border-bottom:1px dashed transparent}
.staff-name-btn:hover b{border-bottom-color:var(--green,#7cb342);color:var(--green-d,#2e7d32)}
/* Hộp thoại xem nhanh thông tin giáo viên */
.modal.staff-detail{max-width:560px;position:relative}
.staff-detail .sd-x{position:absolute;top:12px;right:14px;border:none;background:none;font-size:20px;line-height:1;
  color:var(--muted);cursor:pointer;padding:4px}
.staff-detail .sd-x:hover{color:var(--ink)}
.staff-detail .sd-head{display:flex;align-items:center;gap:14px;margin-bottom:6px;padding-right:24px}
.staff-detail .sd-head h2{margin:0;font-size:20px}
.staff-detail .sd-avatar img,.staff-detail .sd-avatar .avatar{width:56px;height:56px;font-size:22px}
.staff-detail .sd-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 18px;margin:14px 0 0}
.staff-detail .sd-grid>div{min-width:0}
.staff-detail dt{font-size:12px;font-weight:600;color:var(--muted);margin-bottom:2px}
.staff-detail dd{margin:0;font-size:15px;color:var(--ink);word-break:break-word}
.staff-detail .sd-note{margin-top:14px;padding-top:12px;border-top:1px solid var(--border)}
.staff-detail dd.sd-remain{font-weight:700;color:var(--green-d,#2e7d32)}
@media(max-width:520px){.staff-detail .sd-grid{grid-template-columns:1fr}}

/* ---------- kanban tuyển sinh ---------- */
.kanban{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:900px){.kanban{grid-template-columns:1fr 1fr}}
.kcol{background:#eff3e4;border:1px solid var(--border);border-radius:14px;padding:10px;min-height:120px}
.kcol-head{display:flex;justify-content:space-between;align-items:center;font-weight:700;padding:4px 6px 10px}
.kcard{background:#fff;border:1px solid var(--border);border-radius:12px;padding:11px;margin-bottom:10px;box-shadow:var(--shadow)}
.kname{font-weight:700;font-family:'Baloo 2'}
.kmeta{font-size:12.5px;color:var(--muted);margin-top:2px}
.kactions{display:flex;gap:6px;align-items:center;margin-top:8px;flex-wrap:wrap}
.kactions select{width:auto;padding:5px 8px;font-size:12px}
.kactions form{margin:0}
.kactions .stageform{display:flex;align-items:center;gap:3px}
.kempty{text-align:center;padding:14px}
.kmeta .klabel{font-weight:600;color:var(--ink)}
.kcard[draggable]{cursor:grab}
.kcard[draggable]:active{cursor:grabbing}
.kcard.dragging{opacity:.45}
.kcol.dragover{background:#e3efd0;border-color:var(--brand,#8bc34a);border-style:dashed}

/* ---------- events ---------- */
.datebox{width:58px;height:58px;border-radius:12px;background:var(--green-l);color:var(--green-d);
  display:flex;flex-direction:column;align-items:center;justify-content:center;flex-shrink:0}
.datebox .d{font-size:22px;font-weight:700;font-family:'Baloo 2';line-height:1}
.datebox .m{font-size:11px;font-weight:600}

/* ---------- portfolio ---------- */
.pf-photo{max-width:100%;border-radius:12px;margin-top:10px;border:1px solid var(--border)}

/* ---------- parent portal ---------- */
.parent-body{background:linear-gradient(180deg,#eef6df,#f6f8f1 280px);min-height:100vh}
.parent-top{display:flex;align-items:center;gap:12px;padding:14px 22px;background:#fff;border-bottom:3px solid var(--green);box-shadow:var(--shadow)}
.parent-top span{font-family:'Baloo 2';font-weight:700;color:var(--green-d);font-size:18px}
.parent-hero{display:flex;align-items:center;gap:16px}
.avatar.big{width:64px;height:64px;font-size:26px}
/* ảnh đại diện dạng ảnh thật (object-fit) — đồng kích thước với .avatar/.avatar.big */
img.avatar{object-fit:cover;background:var(--green-l);padding:0}

/* ô chọn + chỉnh ảnh đại diện trong form */
.avfield{display:flex;align-items:center;gap:16px;margin:4px 0 14px}
.avfield-pic{cursor:pointer;flex:none;line-height:0;border-radius:50%}
.avfield-pic .avatar{margin:0;box-shadow:0 0 0 3px #fff,0 0 0 4px var(--green-l)}
.avfield-acts{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.avfield-acts .muted{font-size:12px}

/* modal cắt ảnh */
.avcrop-back{position:fixed;inset:0;background:rgba(40,28,46,.55);display:none;align-items:center;justify-content:center;z-index:1000;padding:16px}
.avcrop-back.show{display:flex}
.avcrop{background:#fff;border-radius:18px;padding:18px;width:min(380px,100%);box-shadow:0 18px 50px rgba(0,0,0,.3);text-align:center}
.avcrop-h{font-family:'Baloo 2';font-weight:700;font-size:18px;margin-bottom:12px;color:var(--green-d)}
.avcrop-stage{position:relative;width:320px;max-width:100%;aspect-ratio:1/1;margin:0 auto;border-radius:14px;overflow:hidden;background:#f3eef6;touch-action:none}
.avcrop-canvas{display:block;width:100%;height:100%;cursor:grab}
.avcrop-canvas:active{cursor:grabbing}
.avcrop-ring{position:absolute;inset:0;pointer-events:none}
.avcrop-ring::after{content:"";position:absolute;inset:8px;border-radius:50%;box-shadow:0 0 0 9999px rgba(60,40,70,.42);border:2px solid #fff}
.avcrop-zoom{display:flex;align-items:center;gap:10px;margin:14px 4px 4px}
.avcrop-zoom span{font-size:14px;opacity:.7}
.avcrop-range{flex:1;accent-color:var(--green)}
.avcrop-hint{font-size:12px;color:var(--muted);margin-bottom:14px}
.avcrop-acts{display:flex;gap:10px;justify-content:flex-end}
.moments{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.moment{border:1px solid var(--border);border-radius:12px;overflow:hidden;background:#fff}
.moment img{width:100%;display:block}
.moment .cap{font-size:13px;padding:8px}
.stars{color:#f0a500;font-size:18px;letter-spacing:1px}

/* ---------- Học phí (lưới tính theo lớp/tháng) ---------- */
.tui-toolbar{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.tui-toolbar .fld{display:flex;align-items:center;gap:8px;min-width:0}
.tui-toolbar label{margin:0;white-space:nowrap;font-weight:600}
.tui-toolbar select,.tui-toolbar input{width:auto;min-width:140px}
.tui-toolbar input.period-input{border-color:var(--pink);background:#ffe3f1;color:var(--pink-d);font-weight:700;box-shadow:0 0 0 1px var(--pink);text-align:center;letter-spacing:.5px;min-width:120px}
.tui-toolbar input.period-input:focus{box-shadow:0 0 0 3px #ffd0e6}
.tui-toolbar .fld:has(input.period-input) label{color:var(--pink-d)}
/* thanh "Tạo học phí tháng mới" trên trang danh sách lớp */
.tui-createbar{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:10px}
.tui-createbar .cb-left{display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap}
.tui-createbar .cb-title{font-family:'Baloo 2';font-weight:700;font-size:17px;align-self:center}
.tui-createbar .cb-month{display:flex;align-items:center;gap:8px}
.tui-createbar .cb-month label{margin:0;white-space:nowrap;font-weight:600;color:var(--pink-d)}
.tui-createbar #caPeriodDisp{width:auto;min-width:120px;border-color:var(--pink);background:#ffe3f1;color:var(--pink-d);font-weight:700;box-shadow:0 0 0 1px var(--pink);text-align:center;letter-spacing:.5px}
.tui-createbar #caPeriodDisp:focus{box-shadow:0 0 0 3px #ffd0e6}
/* bảng gọn + bấm cả dòng để điều hướng */
table.compact th,table.compact td{padding:8px 12px}
tr.rowlink{cursor:pointer;transition:background .12s}
tr.rowlink:hover{background:var(--green-l)}
tr.rowlink td.name{font-weight:600}
.fee-cfg{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
@media(max-width:820px){.fee-cfg{grid-template-columns:repeat(2,1fr)}}
.fee-cfg label{font-size:12px;text-transform:uppercase;letter-spacing:.3px;color:var(--muted);margin:0 0 5px}
.fee-cfg input.cfg{border-color:transparent;background:var(--bg);font-weight:800;font-size:17px;color:#1e7d46;letter-spacing:.3px}
.fee-cfg input.cfg:focus{border-color:var(--green);background:#fff}
.tui-grid{overflow-x:auto;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
.tui-grid table{min-width:1060px;width:100%}
.tui-grid th,.tui-grid td{padding:6px 5px;white-space:nowrap;text-align:center}
.tui-grid th{position:sticky;top:0;z-index:1;font-size:11px;letter-spacing:0;white-space:normal;line-height:1.15;vertical-align:bottom}
.tui-grid th.name{text-align:left}
.tui-grid td.name{white-space:normal;min-width:124px;font-weight:600;position:sticky;left:0;background:#fff;z-index:1;text-align:left;cursor:pointer}
.tui-grid td.name:hover{text-decoration:underline dotted}
.tui-grid tbody tr:hover td.name{background:var(--green-l)}
.tui-grid input{padding:5px 5px;border:1px solid transparent;border-radius:8px;font-size:12.5px;text-align:center;background:transparent;box-shadow:none;transition:.12s}
.tui-grid input:hover{background:#f3f6e8}
.tui-grid input:focus{border-color:var(--green);background:#fff;box-shadow:0 0 0 2px var(--green-l)}
.tui-grid input.cn{width:48px} .tui-grid input.cm{width:82px} .tui-grid input.cw{width:98px} .tui-grid input.nt{width:100px;text-align:left}
.tui-grid .rowtot{font-size:16.5px;font-family:'Baloo 2';font-weight:700;color:var(--pink-d);text-align:center}
.tui-grid td.name .scode{display:block;font-size:11px;font-weight:600;color:var(--muted);letter-spacing:.2px;white-space:nowrap;margin-bottom:1px}
.tui-grid .notecell{text-align:left;min-width:120px;max-width:180px}
.tui-grid .notecell .noteinput{width:100%;min-width:120px;border:1px solid transparent;border-radius:8px;padding:5px 7px;font-family:inherit;font-size:12.5px;color:var(--ink);background:transparent}
.tui-grid .notecell .noteinput::placeholder{color:var(--muted);font-style:italic}
.tui-grid .notecell .noteinput:hover{background:#f3f6e8}
.tui-grid .notecell .noteinput:focus{outline:none;border-color:var(--pink);background:#fff}
.tui-grid .notecell .noteinput:disabled{background:transparent;color:var(--muted)}
/* hộp chi tiết học phí 1 học sinh */
.modal.modal-wide{max-width:460px}
/* Phiếu thu cỡ 1/4 A4 (A6): khung giấy nhỏ gọn */
.modal.fee-slip{max-width:400px;padding:18px 20px}
.modal.fee-slip #fdTitle{text-align:center;font-size:19px}
.modal.fee-slip #fdSub{text-align:center}
.fee-detail{width:100%;border-collapse:collapse;font-size:14px}
.fee-detail td{padding:7px 4px;border-bottom:1px solid var(--border)}
.fee-detail td.r{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.fee-detail tr.zero td{color:var(--muted)}
.fee-detail tr.tot td{font-weight:700;color:var(--pink-d);font-size:16px;border-top:2px solid var(--ink);border-bottom:none;padding-top:9px}
.fd-qr{display:flex;flex-direction:column;gap:8px;align-items:center;margin-top:14px;padding:12px;border:1px dashed var(--pink);border-radius:12px;background:#fff6fb}
.fd-qr-wrap{position:relative;width:150px;height:150px}
.fd-qr-wrap img#fdQrImg{width:150px;height:150px;border-radius:8px;background:#fff;display:block}
.fd-qr-cap{font-size:12.5px;font-weight:600;color:var(--pink-d)}
.tui-grid tfoot td{font-weight:700;background:#ffe3f1;border-top:2px solid var(--pink)}
.tui-grid tfoot td.name{background:#ffe3f1}
.tui-grid tfoot .rowtot{font-size:15px}
.tui-grid tfoot #footTotal{color:var(--green-d);font-size:17px}
/* Cột "Thu tiền" (nút thao tác) luôn DÍNH bên phải — không bị khuất khi bảng rộng hơn màn hình (màn lớn/zoom). Song song với cột tên dính trái. */
.tui-grid td.tui-actcell,.tui-grid th.stick-r,.tui-grid tfoot td.stick-r{position:sticky;right:0;background:#fff;z-index:2}
.tui-grid thead th.stick-r{background:#fbfcf6;z-index:3}
.tui-grid tfoot td.stick-r{background:#ffe3f1}
.tui-grid td.tui-actcell{box-shadow:-7px 0 9px -7px rgba(0,0,0,.14)}
.tui-grid tbody tr:hover td.tui-actcell{background:var(--green-l)}
.tui-grid tr.carried td.tui-actcell{background:#f6f7f9}
.tui-savebar{position:sticky;bottom:0;background:var(--card);border:1px solid var(--border);border-top:0;
  border-radius:0 0 var(--radius) var(--radius);padding:12px 16px;display:flex;gap:12px;align-items:center;flex-wrap:wrap;box-shadow:var(--shadow)}

/* ---------- Phiếu thanh toán in ---------- */
.slips{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media(max-width:760px){.slips{grid-template-columns:1fr}}
.slip{border:1px solid var(--ink);border-radius:10px;padding:14px 16px;background:#fff;font-size:13.5px}
.slip h3{font-size:15px;text-align:center;margin:0}
.slip .school{text-align:center;font-weight:700;color:var(--green-d);font-size:12px;letter-spacing:.3px}
.slip .meta{display:flex;justify-content:space-between;color:var(--muted);font-size:12.5px;margin:4px 0 8px}
.slip table{width:100%;border-collapse:collapse;margin:6px 0}
.slip td{padding:3px 2px;border:0;border-bottom:1px dotted #cdd2bd;font-size:13px}
.slip td.r{text-align:right;white-space:nowrap}
.slip .tot td{border-top:1.5px solid var(--ink);border-bottom:0;font-weight:700;font-size:14.5px;padding-top:6px}
.slip .tot td.r{color:var(--pink-d)}
.slip .sign{display:flex;justify-content:space-between;margin-top:10px;color:var(--muted);font-size:12px}
@media print{
  .appbar,.userctl,.tui-savebar,.noprint,.flash{display:none!important}
  body{background:#fff;font-size:12px}
  .container{max-width:none;padding:0}
  .slips{grid-template-columns:repeat(2,1fr);gap:8px}
  .slip{border:1px solid #000;break-inside:avoid;page-break-inside:avoid}
}

/* ---------- GĐ1: Phụ huynh & Chăm sóc ---------- */
.navbadge{display:inline-block;min-width:18px;padding:0 5px;background:var(--pink);color:#fff;border-radius:10px;
  font-size:11px;font-weight:700;line-height:18px;text-align:center;vertical-align:middle}
.kid-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.kid-card{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:16px 18px;color:var(--ink)}
.kid-card:hover{border-color:var(--green);background:var(--green-l);text-decoration:none}
.kid-card b{font-size:17px}
.pickup-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.pickup-card{display:flex;align-items:center;gap:12px;border:1px solid var(--border);border-radius:12px;padding:10px 12px;background:#fff}
.pickup-card img{width:52px;height:52px;border-radius:50%;object-fit:cover;border:2px solid var(--green-l)}
.inlineform{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.inlineform input,.inlineform select{margin:0;width:auto}
.addbox{margin-top:10px}
.addbox>summary{display:inline-block;list-style:none;cursor:pointer}
.addbox>summary::-webkit-details-marker{display:none}
.addbox[open]>summary{margin-bottom:10px}

/* ---------- Chúc mừng sinh nhật (băng-rôn + tung hoa) ---------- */
.bday-banner{position:relative;clear:both;display:flex;align-items:center;gap:16px;
  margin:0 0 20px;padding:16px 20px;border-radius:var(--radius);overflow:hidden;
  background:linear-gradient(120deg,#fff0f7 0%,#fff6e6 50%,#eef6df 100%);
  border:1px solid #ffd0e6;box-shadow:0 4px 18px rgba(230,0,126,.12)}
.bday-banner::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 12% 20%,rgba(255,209,102,.35),transparent 22%),
            radial-gradient(circle at 88% 80%,rgba(230,0,126,.14),transparent 24%)}
.bday-cake{font-size:46px;line-height:1;flex:none;animation:bday-bounce 1.6s ease-in-out infinite;filter:drop-shadow(0 3px 4px rgba(0,0,0,.12))}
.bday-text{position:relative;min-width:0}
.bday-title{font-family:'Baloo 2','Be Vietnam Pro',sans-serif;font-weight:700;font-size:20px;color:var(--pink-d);letter-spacing:.2px}
.bday-names{margin-top:2px;font-size:16px;color:var(--ink)}
.bday-names b{color:var(--pink-d)}
.bday-wish{margin-top:4px;color:var(--muted);font-weight:500}
.bday-x{position:absolute;top:8px;right:10px;border:0;background:transparent;cursor:pointer;
  color:#c98bb0;font-size:15px;line-height:1;padding:4px;border-radius:8px}
.bday-x:hover{background:rgba(230,0,126,.10);color:var(--pink-d)}
.bday-confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:9999}
@keyframes bday-bounce{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-7px) rotate(4deg)}}
@media (prefers-reduced-motion:reduce){.bday-cake{animation:none}}

/* ---------- GĐ3: Hội thoại 2 chiều (chat) ---------- */
.chat{display:flex;flex-direction:column;gap:10px;max-height:460px;overflow:auto;padding:4px 2px 10px}
.bubble{max-width:78%;padding:8px 12px;border-radius:14px;font-size:14px;line-height:1.45}
.bubble .b-text{white-space:pre-wrap;word-break:break-word}
.bubble img{max-width:220px;border-radius:10px;display:block;margin-bottom:6px}
.bubble .b-meta{font-size:11px;color:var(--muted);margin-top:4px}
.bubble.them{align-self:flex-start;background:#f1f3e8;border:1px solid var(--border);border-bottom-left-radius:4px}
.bubble.me{align-self:flex-end;background:var(--green-l);border:1px solid #d5e8b4;border-bottom-right-radius:4px}
.bubble.me .b-meta{text-align:right}
.chat-form{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:12px;border-top:1px solid var(--border);padding-top:12px}
.chat-form input[type=text]{margin:0}

/* ---------- GĐ5: Thực đơn / Media / Đánh giá / Chấm công ---------- */
/* Thực đơn tuần */
.menu-grid{width:100%;border-collapse:collapse}
.menu-grid th,.menu-grid td{border:1px solid var(--border);padding:6px;vertical-align:top}
.menu-grid thead th{background:var(--green-l);text-align:center;font-weight:700}
.menu-grid thead th.sub{font-weight:600;font-size:13px;background:#eef7e7}
.menu-grid tbody th{background:#faf7ef;white-space:nowrap;text-align:center;font-weight:700;vertical-align:middle}
.menu-grid tbody td{min-width:108px}
.menu-grid textarea{width:100%;min-height:54px;margin:0;resize:none;overflow:hidden;font-size:13px}
/* Bỏ khung viền từng ô — ô nhập hoà vào lưới, chỉ còn đường kẻ của bảng */
.menu-grid textarea,.menu-grid input{border:0;border-radius:0;background:transparent;box-shadow:none;padding:4px 6px}
.menu-grid textarea:focus,.menu-grid input:focus{border:0;box-shadow:none;background:var(--green-l);border-radius:6px}
.menu-cell{font-size:13px;line-height:1.4;white-space:pre-line;min-height:18px}

/* Nút xanh dương (CTA "Xuất ra hình") */
.btn-blue{background:#0ea5e9;color:#fff} .btn-blue:hover{background:#0284c7}
/* Lưới soạn Chương trình học: ô icon + tên hoạt động + nút xóa dòng */
.curri-grid td.cur-iconcell{text-align:center;vertical-align:middle;width:50px}
.curri-grid input.rowicon{width:42px;margin:0 auto;text-align:center;font-size:20px;padding:4px 2px;line-height:1}
.curri-grid input.rowname{width:100%;margin:0;font-weight:600;font-size:13px}
.cur-ic{display:inline-block;font-size:17px;line-height:1;margin-right:5px;vertical-align:-2px}
.curri-grid td.rowdel{text-align:center;vertical-align:middle;width:34px}
.curri-grid .xbtn{appearance:none;border:1px solid #f3c2dc;background:#fff;color:var(--pink-d);border-radius:8px;
  width:26px;height:26px;line-height:1;cursor:pointer;font-size:13px}
.curri-grid .xbtn:hover{background:#ffe3f1}
/* Chương trình học: bố cục soạn (trái) + xem ảnh trực tiếp (phải) */
.curri-layout{display:flex;gap:18px;align-items:flex-start}
.curri-layout .curri-edit{flex:1 1 560px;min-width:0;margin-bottom:0}
.curri-preview{flex:0 0 430px;max-width:430px;background:#fff;border:1px solid var(--border);border-radius:14px;padding:14px}
.cp-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.cp-title{font-weight:800;color:var(--ink)}
.cp-theme{font-size:13px;color:#555;margin-bottom:10px}
.cp-frame{width:100%;height:auto;min-height:420px;border:1px solid var(--border);border-radius:12px;background:#f3e9ff;display:block}
.cp-frame.solo{max-width:820px}
.cp-actions{margin-top:10px}
.cp-empty{padding:26px 16px;text-align:center;color:#8a8a8a;background:#faf7ef;border:1px dashed var(--border);border-radius:12px;font-size:14px}
.cur-status{display:inline-block;margin-left:8px;font-size:12.5px;font-weight:700;padding:2px 10px;border-radius:999px;vertical-align:middle}
.cur-status.on{background:#dcfce7;color:#15803d} .cur-status.off{background:#fef3c7;color:#92400e}
@media(max-width:980px){ .curri-layout{flex-direction:column} .curri-preview{flex:1 1 auto;max-width:none;width:100%} .cp-frame{min-height:360px} }

/* Album nhiều ảnh + video */
.media-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px;margin-top:10px}
.media-gallery .pf-media{width:100%;border-radius:10px;border:1px solid var(--border);display:block;object-fit:cover;aspect-ratio:1/1}
.media-gallery video.pf-media{aspect-ratio:auto}

/* Bảng tiêu chí đánh giá */
.crit-table{width:100%;border-collapse:collapse;margin:8px 0;font-size:13px}
.crit-table td{padding:3px 6px;border-bottom:1px dashed var(--border)}
.crit-table td.right{text-align:right;color:#f0a500;white-space:nowrap}
.crit-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:5px 0;border-bottom:1px dashed var(--border)}
.crit-row select{width:auto;margin:0}
.tpl-block{margin:6px 0;padding:6px 10px;background:#faf7ef;border:1px solid var(--border);border-radius:10px}

/* Ảnh check-in điểm danh */
.cin-thumb{height:34px;width:34px;object-fit:cover;border-radius:6px;border:1px solid var(--border);vertical-align:middle}
.cin-photo input[type=file]{font-size:11px;max-width:140px}

/* Bảng công tháng (timesheet) */
table.sheet{border-collapse:collapse;font-size:12px}
table.sheet th,table.sheet td{border:1px solid var(--border);padding:3px 5px;text-align:center;min-width:22px}
table.sheet .sticky-stt{position:sticky;left:0;background:#fff;width:42px;min-width:42px;text-align:center;z-index:1}
table.sheet .sticky{position:sticky;left:42px;background:#fff;text-align:left;white-space:nowrap;font-weight:600;z-index:1}
table.sheet td.c-p{background:#e7f4d4;color:#4f7a13;font-weight:700}
table.sheet td.c-l{background:#fff2d6;color:#b9791a;font-weight:700}
table.sheet td.c-a{background:#ffe1ea;color:#c12869;font-weight:700}

/* ==================================================================
   APP PHỤ HUYNH — vỏ điện thoại: top bar + thanh tab dưới đáy + feed
   ================================================================== */
.parent-body.has-bottomnav{padding-bottom:calc(66px + env(safe-area-inset-bottom))}
.parent-main{max-width:680px}
/* Top bar gọn, dính trên */
.parent-top{position:sticky;top:0;z-index:30;gap:12px}
.parent-top .ptop-main{min-width:0;line-height:1.2}
.parent-top .ptop-name{font-family:'Baloo 2','Be Vietnam Pro',sans-serif;font-weight:700;color:var(--green-d);font-size:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.parent-top .ptop-sub{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.parent-top .ptop-switch{margin-left:auto;max-width:150px;padding:7px 10px;border:1px solid var(--border);border-radius:10px;background:#fff;font-weight:600;color:var(--ink)}

/* Thanh tab dưới đáy (5 mục) */
.bottomnav{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;background:#fff;
  border-top:1px solid var(--border);box-shadow:0 -3px 14px rgba(94,148,0,.12);padding-bottom:env(safe-area-inset-bottom)}
.bottomnav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 2px 7px;
  color:var(--muted);font-size:11px;font-weight:600;position:relative}
.bottomnav a:hover{text-decoration:none}
.bottomnav a .ic{font-size:22px;line-height:1;transition:transform .15s}
.bottomnav a.on{color:var(--green-d)}
.bottomnav a.on .ic{transform:translateY(-2px)}
.bottomnav .bdot{position:absolute;top:4px;left:calc(50% + 6px);min-width:17px;height:17px;
  background:var(--pink);color:#fff;border-radius:9px;font-size:10px;line-height:17px;text-align:center;padding:0 4px;font-weight:700;box-shadow:0 0 0 2px #fff}
.bottomnav .bdot.dot{min-width:10px;width:10px;height:10px;padding:0}

/* Lời chào nhỏ trên feed */
.feed{display:flex;flex-direction:column;gap:6px}
.feed-hi{font-family:'Baloo 2','Be Vietnam Pro',sans-serif;font-weight:700;color:var(--green-d);font-size:17px;margin:2px 2px 4px}

/* Hàng nút tắt "Tương tác dễ dàng hơn" */
.sec-title{font-weight:700;color:var(--ink);margin:14px 2px 8px;font-size:15px}
.qact{display:flex;gap:10px;overflow-x:auto;padding:2px 2px 6px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.qact::-webkit-scrollbar{display:none}
.qact a{flex:0 0 auto;width:90px;display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--ink);font-size:12px;font-weight:600;text-align:center;line-height:1.25}
.qact a:hover{text-decoration:none}
.qact .qa-ic{width:62px;height:62px;border-radius:18px;display:flex;align-items:center;justify-content:center;font-size:28px;box-shadow:var(--shadow)}

/* Carousel thẻ nổi bật (Báo cáo học tập mới) */
.carousel{display:flex;gap:12px;overflow-x:auto;padding:2px 2px 8px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.carousel::-webkit-scrollbar{display:none}
.ccard{flex:0 0 86%;max-width:560px;scroll-snap-align:start;display:flex;background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;color:var(--ink)}
.ccard:hover{text-decoration:none;border-color:var(--green)}
.ccard img,.ccard video{width:42%;min-width:120px;object-fit:cover;display:block;align-self:stretch}
.ccard .cc-body{padding:12px 14px;min-width:0}
.ccard .cc-kicker{color:var(--orange);font-weight:700;font-size:13px}
.ccard .cc-title{font-family:'Baloo 2','Be Vietnam Pro',sans-serif;font-weight:700;font-size:15px;margin:3px 0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.ccard .cc-meta{color:var(--muted);font-size:12px}

/* Dòng thời gian theo ngày */
.daygroup{margin-top:6px}
.daylabel{font-weight:700;color:var(--muted);margin:14px 4px 8px;font-size:12px;text-transform:uppercase;letter-spacing:.4px}
.fevent{display:flex;gap:12px;align-items:flex-start;background:#fff;border:1px solid var(--border);border-radius:14px;padding:12px 14px;box-shadow:var(--shadow);margin-bottom:10px}
.fevent .fic{flex:none;width:40px;height:40px;border-radius:12px;background:var(--green-l);display:flex;align-items:center;justify-content:center;font-size:20px}
.fevent .fe-main{flex:1;min-width:0}
.fevent .fe-kicker{font-size:11px;font-weight:700;color:var(--teal);text-transform:uppercase;letter-spacing:.3px}
.fevent .fe-text{font-size:14px;line-height:1.45;margin-top:2px}
.fevent .fe-photo{width:54px;height:54px;border-radius:10px;object-fit:cover;border:1px solid var(--border);flex:none}
.fevent.menu .fic{background:#fff2d6}

/* Thẻ bài đăng học tập (danh tính cô + collage ảnh + thả tim) */
.post{background:#fff;border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);overflow:hidden;margin-bottom:14px}
.post-head{display:flex;align-items:center;gap:10px;padding:12px 14px 8px}
.post-head .avatar{width:40px;height:40px;font-size:16px;flex:none}
.post-head .ph-main{flex:1;min-width:0}
.post-head .ph-name{font-weight:700;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.post-head .ph-meta{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.post-head .ph-tag{flex:none}
.post-body{padding:0 14px 10px}
.post-folder{font-size:14px;line-height:1.45}
.post-folder .ff{color:var(--muted);font-size:12.5px}
.post-text{white-space:pre-line;margin-top:6px;font-size:14px;line-height:1.5}
.collage{display:grid;gap:3px;background:var(--border)}
.collage.c1{grid-template-columns:1fr}
.collage.c2{grid-template-columns:1fr 1fr}
.collage.c3{grid-template-columns:repeat(3,1fr)}
.collage.c4{grid-template-columns:1fr 1fr}
.collage.c5{grid-template-columns:repeat(6,1fr)}
.collage.c5 .ctile:nth-child(1),.collage.c5 .ctile:nth-child(2){grid-column:span 3}
.collage.c5 .ctile:nth-child(n+3){grid-column:span 2}
.collage .ctile{position:relative;aspect-ratio:1/1;overflow:hidden;background:#000}
.collage.c1 .ctile{aspect-ratio:4/3}
.collage .ctile img,.collage .ctile video{width:100%;height:100%;object-fit:cover;display:block}
.collage .ctile.more::after{content:attr(data-extra);position:absolute;inset:0;background:rgba(0,0,0,.48);
  color:#fff;display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:700;font-family:'Baloo 2',sans-serif}
.post-actions{display:flex;align-items:center;gap:14px;padding:8px 14px 12px}
.likebtn{display:inline-flex;align-items:center;gap:6px;border:0;background:transparent;cursor:pointer;font-size:15px;font-weight:600;color:var(--muted);padding:4px 2px}
.likebtn:hover{color:var(--pink-d)}
.likebtn.liked{color:var(--pink-d)}
.likebtn span{font-size:14px}

/* Trang con phụ huynh: tiêu đề + phụ tab Học tập */
.psub-title{font-family:'Baloo 2','Be Vietnam Pro',sans-serif;font-weight:700;font-size:20px;color:var(--green-d);margin:6px 2px 12px}
.ltabs{display:flex;gap:6px;background:#fff;border:1px solid var(--border);border-radius:12px;padding:5px;margin-bottom:14px;box-shadow:var(--shadow)}
.ltabs a{flex:1;text-align:center;padding:9px 6px;border-radius:9px;color:var(--muted);font-weight:600;font-size:13.5px;white-space:nowrap}
.ltabs a:hover{text-decoration:none;background:var(--green-l)}
.ltabs a.on{background:var(--green);color:#fff}
.ltabs a.on:hover{background:var(--green-d)}

/* Danh sách "Xem thêm" (mục lớn dạng link) */
.morelist{display:flex;flex-direction:column;gap:0;background:#fff;border:1px solid var(--border);border-radius:14px;overflow:hidden;box-shadow:var(--shadow);margin-bottom:16px}
.morelist a{display:flex;align-items:center;gap:12px;padding:14px 16px;color:var(--ink);border-bottom:1px solid var(--border);font-weight:600}
.morelist a:last-child{border-bottom:0}
.morelist a:hover{text-decoration:none;background:var(--green-l)}
.morelist a .mic{font-size:20px;width:26px;text-align:center;flex:none}
.morelist a .chev{margin-left:auto;color:var(--muted);font-size:18px}
.morelist a.danger{color:var(--pink-d)}

/* ---------- GĐ7: Chấm công giáo viên bằng ảnh + Đơn từ + Bảng công ---------- */
.btn-green{background:#5bb318;color:#fff} .btn-green:hover{background:#4f9c13}
.row-actions{display:flex;gap:6px;align-items:center;justify-content:flex-end;flex-wrap:wrap}
.chips{display:flex;gap:8px;flex-wrap:wrap}
/* hộp tóm tắt công hôm nay */
.cong-summary{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;background:#fff;border:1px solid var(--border);border-radius:14px;padding:14px 18px;box-shadow:var(--shadow);margin-bottom:14px}
.cs-main{display:flex;align-items:baseline;gap:8px}
.cs-label{color:var(--muted);font-weight:600}
.cs-val{font-size:30px;font-weight:800;color:var(--green-d);font-family:'Baloo 2',sans-serif}
.cs-unit{font-size:15px;color:var(--muted);font-weight:600;margin-left:2px}
.cs-hint{color:var(--muted);font-size:13px}
.cs-leave{margin-left:auto;background:var(--green-l);border-radius:999px;padding:6px 14px;font-size:13px}
/* lưới 2 buổi */
.punch-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
.punch-card{background:#fff;border:1px solid var(--border);border-radius:14px;padding:14px 16px;box-shadow:var(--shadow)}
.pc-head{display:flex;justify-content:space-between;align-items:center;font-weight:700;font-size:16px;margin-bottom:8px;border-bottom:1px solid var(--border);padding-bottom:8px}
.pc-state{font-size:13px;font-weight:600;color:var(--muted)}
.punch-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px dashed var(--border)}
.punch-row:last-child{border-bottom:0}
.pr-info{flex:1;min-width:0}
.pr-label{font-weight:600;font-size:14px}
.pr-time{font-size:13px}
.pr-photo{width:46px;height:46px;border-radius:8px;object-fit:cover;border:1px solid var(--border)}
.punchbtn{cursor:pointer;white-space:nowrap}
.punchform{margin:0}
/* hộp phép + đơn */
.leave-info{background:#eef7ff;border:1px solid #cfe5fb;border-radius:12px;padding:10px 14px;font-size:14px}
.will-use{font-weight:700;margin-left:6px}
.halfday-toggle{display:flex;align-items:center;gap:10px;background:#fff7e8;border:1px solid #f3e0b8;border-radius:12px;padding:10px 14px;margin:10px 0;cursor:pointer;font-weight:600}
.halfday-toggle input{width:auto;margin:0;flex:none}
/* bảng công — màu bổ sung */
table.sheet td.c-h{background:#e3eefc;color:#2563a8;font-weight:700}
table.sheet td.c-b{background:#fde7e0;color:#b5502a;font-weight:700}
table.sheet td.c-r{background:#efe6fb;color:#7a45b8;font-weight:700}
table.sheet th.we{background:#faf6ef;color:var(--muted)}
.sheet-legend{margin-top:12px;line-height:1.7}

/* ====== ĐIỂM DANH chạm-chụp (lưới bé + thẻ lớp + bảng nhiệt độ) ====== */
.att-hint{margin:0 0 12px}
/* 2 nút chế độ Đến / Về (cô chọn trước, KHÔNG tự động) */
.att-mode{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 12px}
.att-mode .am-lbl{font-weight:700;color:#555}
.am-btn{flex:1 1 130px;min-width:120px;border:2px solid #d8c9e0;background:#fff;color:#555;font-size:17px;
  font-weight:800;border-radius:14px;padding:13px 10px;cursor:pointer;transition:.12s}
.am-btn:hover{border-color:#bba6cf}
.am-btn.am-in.active{border-color:#1f9d55;background:#e9f8ef;color:#1f7a45;box-shadow:0 2px 8px rgba(31,157,85,.18)}
.am-btn.am-out.active{border-color:#2c6fb0;background:#e9f2fc;color:#235a92;box-shadow:0 2px 8px rgba(44,111,176,.18)}
/* Thẻ chọn lớp */
.att-class-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.att-class-card{display:block;text-decoration:none;color:inherit;background:#fff;border:1px solid var(--line,#eadbe6);
  border-radius:14px;padding:14px 16px;box-shadow:0 1px 3px rgba(0,0,0,.05);transition:.12s;
  cursor:pointer;-webkit-tap-highlight-color:rgba(214,69,127,.18);
  -webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
/* Cả thẻ là 1 nút bấm: chạm ở đâu cũng mở lớp, không dính chọn/gạch chân chữ con */
.att-class-card *{pointer-events:none;text-decoration:none}
.att-class-card:hover,.att-class-card:focus,.att-class-card:active,.att-class-card:visited{text-decoration:none}
.att-class-card:hover{border-color:#d6457f;box-shadow:0 3px 10px rgba(214,69,127,.15);transform:translateY(-1px)}
.att-class-card:active{border-color:#d6457f;transform:translateY(0);box-shadow:0 1px 4px rgba(214,69,127,.2)}
.att-class-card .acc-name{font-size:18px;font-weight:800;color:#b53a6c}
.att-class-card .acc-teacher{color:var(--muted,#8a7e88);font-size:13px;margin:4px 0 10px}
.att-class-card .acc-count{font-size:14px;color:#7a7080}
.att-class-card .acc-count b{font-size:20px;color:#444}
.att-class-card .acc-count.done b{color:#1f9d55}
/* Lưới bé */
.att-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.att-card{position:relative;background:#fff;border:2px solid #eadbe6;border-radius:16px;overflow:hidden;
  box-shadow:0 1px 3px rgba(0,0,0,.05)}
.att-card.state-in{border-color:#9ed8b1}
.att-card.state-out{border-color:#9cc4f0}
.att-card.state-absent{border-color:#e7a9a9;background:#fff6f6}
.att-card.saving{opacity:.55}
.att-shoot{display:flex;flex-direction:column;align-items:center;gap:7px;width:100%;border:0;background:none;
  cursor:pointer;padding:14px 10px 12px;text-align:center;font:inherit}
.att-shoot:active{background:#fbeef4}
.att-thumb-wrap{width:72px;height:72px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;
  background:#f3e8f0}
.att-thumb-wrap .av{font-size:26px;font-weight:800;color:#c06a96}
.att-thumb{width:100%;height:100%;object-fit:cover}
.att-name{font-weight:700;font-size:15px;line-height:1.2}
.att-st{font-size:13px;color:#3f8f5d;font-weight:600}
.att-card.state-out .att-st{color:#2c6fb0}
.att-card.state-absent .att-st{color:#c0392b}
.att-card.state-none .att-st{color:inherit}
.att-temp{display:inline-block;margin-top:2px;font-size:12px;background:#eef7f0;color:#2f8a52;border-radius:999px;padding:2px 8px}
.att-temp.hi{background:#fde8e6;color:#c0392b;font-weight:700}
.att-absent{position:absolute;top:8px;right:8px;border:1px solid #e3c2c2;background:#fff;color:#b14b4b;
  font-size:11px;border-radius:999px;padding:3px 9px;cursor:pointer;line-height:1}
.att-absent:hover{background:#fdecec}
.att-card.state-absent .att-absent{display:none}
/* Huy hiệu góc phải theo trạng thái: đã đến = "Có mặt" (xanh lá), đã về = "Đã về" (xanh dương) */
.att-present,.att-left{position:absolute;top:8px;right:8px;font-size:11px;font-weight:700;
  border-radius:999px;padding:3px 9px;line-height:1;display:none}
.att-present{background:#e9f8ef;color:#1f7a45;border:1px solid #bfe6cd}
.att-left{background:#e9f2fc;color:#235a92;border:1px solid #bcd6f0}
.att-card.state-in .att-present{display:inline-block}
.att-card.state-out .att-left{display:inline-block}
.att-card.state-in .att-absent,.att-card.state-out .att-absent{display:none}
/* Chế độ VỀ — đổi rõ giao diện lưới bé để cô biết đang ghi GIỜ VỀ */
.att-go{display:none;margin-top:2px;font-size:12px;font-weight:700;color:#2c6fb0;
  background:#e9f2fc;border-radius:999px;padding:2px 9px}
.att-grid.mode-out .att-card.state-in .att-go{display:inline-block}
.att-grid.mode-out .att-card.state-in{border-color:#2c6fb0;box-shadow:0 2px 12px rgba(44,111,176,.20)}
.att-grid.mode-out .att-card.state-none,
.att-grid.mode-out .att-card.state-absent{opacity:.5}
/* Bảng chọn nhiệt độ */
.att-modal{position:fixed;inset:0;background:rgba(0,0,0,.42);display:flex;align-items:flex-end;justify-content:center;z-index:60}
.att-modal[hidden]{display:none}
.att-modal-box{background:#fff;border-radius:18px 18px 0 0;padding:18px 18px 22px;width:100%;max-width:440px;
  box-shadow:0 -6px 24px rgba(0,0,0,.2)}
.tm-head{font-size:17px;font-weight:700;margin-bottom:4px}
.tm-ok{color:#1f9d55;font-size:13px;margin-bottom:12px}
.temp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.temp-btn{border:1.5px solid #cfe6d6;background:#f2fbf5;color:#1f7a45;font-size:17px;font-weight:700;
  border-radius:12px;padding:14px 0;cursor:pointer}
.temp-btn:active{transform:scale(.96)}
.temp-btn.hi{border-color:#f0c4bf;background:#fdf0ee;color:#c0392b}
.tm-foot{display:flex;gap:10px;justify-content:flex-end;margin-top:14px;flex-wrap:wrap}
.dup-photo{margin-top:10px;text-align:center}
.dup-photo img{max-width:100%;max-height:46vh;border-radius:12px;border:1px solid #eadbe6}
@media(min-width:560px){.att-modal{align-items:center}.att-modal-box{border-radius:18px}}
/* Thông báo nhỏ (toast) */
.att-toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:#333;color:#fff;
  padding:11px 18px;border-radius:999px;font-size:14px;z-index:70;box-shadow:0 4px 16px rgba(0,0,0,.28);max-width:90vw}
.att-toast[hidden]{display:none}
/* Chấm công của cô (selfie) — đặt trên lưới bé */
.tc-block{background:#f7f1fb;border:1px solid #e6d8f2;border-radius:14px;padding:10px 12px;margin:0 0 16px}
.tc-title{font-weight:700;color:#7a45b8;margin-bottom:8px;font-size:14px}
.tc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:8px}
.tc-card{background:#fff;border:1.5px solid #e2d3ef;border-radius:12px;overflow:hidden}
.tc-card.self{border-color:#c79be8;box-shadow:0 1px 4px rgba(147,89,207,.12)}
.tc-card.saving{opacity:.55}
/* Media-object: avatar TRÁI, khối chữ PHẢI xếp dọc → thẻ gọn, cân đối, không tràn nửa màn hình */
.tc-shoot{display:flex;align-items:center;gap:10px;width:100%;border:0;background:none;font:inherit;
  text-align:left;padding:8px 10px;cursor:pointer}
.tc-shoot[disabled]{cursor:default}
.tc-av{flex:0 0 auto;width:40px;height:40px;border-radius:50%;overflow:hidden;display:flex;align-items:center;
  justify-content:center;background:#ead9f5;color:#8a52bf;font-weight:800;font-size:16px}
.tc-av img{width:100%;height:100%;object-fit:cover}
.tc-body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px}
.tc-name{font-weight:700;font-size:14px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tc-you{color:#7a45b8;font-weight:600;font-size:12px}
.tc-st{font-size:12px;color:#6a6a72;line-height:1.25}
.tc-hint{font-size:12px;color:#9a59cf;font-weight:600}

/* ====== ĐIỆN THOẠI (≤860px): thu gọn nav thành menu ☰ + chống tràn ngang ======
   Đặt CUỐI file để thắng các rule nền cùng độ ưu tiên (media query KHÔNG tăng specificity). */
@media(max-width:860px){
  .topbar{gap:10px;padding:7px 14px}
  .brand img{height:38px}
  .brand-word{display:block;flex:1 1 auto;text-align:center;font-size:17px}  /* tên app vào giữa thanh */
  .langpick>summary{padding:8px 9px}
  .langpick>summary .lab{display:none}            /* chỉ còn cờ + mũi tên cho gọn */
  /* ☰ hiện ở góc phải thanh trên cùng (cạnh chuông) — gom mọi chức năng vào đây cho gọn màn Tổng quan */
  .navtoggle{display:inline-flex}
  /* 4 chip nhóm + Tài khoản nằm ẩn, chỉ XỔ XUỐNG khi bấm ☰ (đặt thành hàng riêng full-width dưới thanh) */
  .topbar{flex-wrap:wrap;row-gap:8px}
  .groupnav{order:9;flex:0 0 100%;gap:6px;display:none}
  .appbar.menu-open .groupnav{display:flex}
  .gchip{flex:1 1 calc(50% - 6px);justify-content:center;font-size:14px;padding:10px 8px}
  /* các panel icon cũng chỉ hiện khi menu ☰ đang mở */
  .navpanels{display:none}
  .appbar.menu-open .navpanels{display:block}
  /* panel bung: pill xếp lưới, chạm thoải mái */
  .navpanel{padding:10px 12px;gap:8px}
  .npill{flex:1 1 44%;justify-content:flex-start;padding:12px 12px;font-size:15px}
  /* Tài khoản (đổi mật khẩu · đăng xuất) đã dời vào chuông 🔔 → bỏ khỏi menu ☰ cho gọn */
  .nav-foot{display:none}
  .bellpick .bell-account{display:block}
  /* dải ngữ cảnh + khung nội dung gọn lại */
  .userrow{padding:10px 14px 0;gap:6px 12px}
  /* Ô chọn cơ sở + tên người dùng nằm CHUNG 1 dòng (không xuống hàng); tên co lại + cắt gọn "…" nếu thiếu chỗ. */
  .userctl{gap:8px 12px;padding-bottom:8px;flex-wrap:nowrap;width:100%;min-width:0;justify-content:space-between}
  .userctl .centre-form{flex:0 0 auto;min-width:0}
  .userctl a.who.user-name{flex:0 1 auto;min-width:0;margin-left:auto;justify-content:flex-end}
  .userctl a.who.user-name>span:not(.avatar){overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:46vw}
  /* Trên điện thoại: tên trường + tên người dùng + 🔑 đổi mật khẩu + đăng xuất đã nằm trong
     menu ☰ (mục Tài khoản) và lời chào ở Tổng quan → bỏ ở dải ngữ cảnh cho gọn, đỡ lặp.
     Vẫn giữ ô chọn cơ sở (chủ tịch/admin) và nút ✏️ đổi tên cơ sở. */
  .userctl .who,
  .userctl .logout{display:none}
  /* Tổng quan: bỏ dòng "Happy House … · Hôm nay là ngày…" trên điện thoại cho gọn. */
  .greet-sub{display:none}
  .centre-form select{max-width:100%}
  .container,.container.wide{padding:14px 14px 46px;max-width:100%}
  .pagehead h1{font-size:20px}
  /* bảng rộng: VUỐT NGANG thay vì bị cắt mất cột */
  .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  /* thanh công cụ / bộ lọc tự co cho vừa */
  .toolbar{gap:8px}
  .toolbar input,.toolbar select{width:auto;flex:1 1 auto;min-width:120px}
  /* Trên điện thoại vẫn cho thấy nút "Xem với tư cách phụ huynh" (cô giáo có con học ở trường), thu gọn chỉ icon. */
  .userctl .parent-switch{display:inline-flex}
  .userctl .parent-switch span{display:none}
}

/* ── Nút chuyển đổi Giáo viên ↔ Phụ huynh (tài khoản cô giáo có con học ở trường) ── */
.parent-switch{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;
  background:#ffe3f1;color:var(--pink-d);font-weight:600;font-size:13px;white-space:nowrap;text-decoration:none;border:1px solid #f3c2dc}
.parent-switch:hover{background:#ffd0e6;text-decoration:none}
.parent-switch-big{margin-left:auto;align-self:center;white-space:nowrap}
.staff-return{display:inline-flex;align-items:center;gap:6px;margin:0 0 12px;padding:8px 14px;border-radius:12px;
  background:#fff;border:1px solid var(--border);color:var(--pink-d);font-weight:600;font-size:14px;text-decoration:none}
.staff-return:hover{background:#fff0f6;text-decoration:none}

/* ===== Đánh giá BMI tăng trưởng ===== */
.bmi-chip{display:inline-block;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:700;white-space:nowrap}
.bmi-chip.ok{background:var(--green-l);color:var(--green-d)}
.bmi-chip.low{background:#fff3d6;color:#a9750a}
.bmi-chip.high{background:#ffe1ea;color:var(--pink-d)}
/* 5 mức dinh dưỡng WHO + thấp còi */
.bmi-chip.sdd{background:#ffd5d5;color:#b3261e}
.bmi-chip.gay{background:#fff3d6;color:#a9750a}
.bmi-chip.thua{background:#ffe6cc;color:#b45309}
.bmi-chip.beo{background:#ffd9e6;color:var(--pink-d)}
.bmi-chip.stunt{background:#ece4ff;color:#5b34c9}
.bmi-chip.stunt2{background:#ddccff;color:#4321a8}
.bmi-eval{display:inline-flex;flex-wrap:wrap;gap:5px;align-items:center}
.bmi-legend{display:flex;flex-wrap:wrap;gap:6px;padding:10px 13px}
.bmi-ref-note{font-size:12px;padding:2px 13px 11px;margin:0}
.bmi-range{font-size:12px;white-space:nowrap}
details.bmi-ref{margin-top:12px;border:1px solid var(--border);border-radius:12px;background:#fbfcf8}
details.bmi-ref>summary{cursor:pointer;padding:9px 13px;font-weight:600;color:var(--ink);list-style:none}
details.bmi-ref>summary::-webkit-details-marker{display:none}
details.bmi-ref>summary::before{content:'▸ ';color:var(--muted)}
details.bmi-ref[open]>summary::before{content:'▾ '}
details.bmi-ref[open]>summary{border-bottom:1px solid var(--border)}
.bmi-ref-tbl{width:100%;border-collapse:collapse;font-size:13px}
.bmi-ref-tbl th,.bmi-ref-tbl td{padding:7px 13px;text-align:left;border-bottom:1px solid var(--border)}
.bmi-ref-tbl tr:last-child td{border-bottom:none}
.bmi-ref-tbl th{color:var(--muted);font-weight:600}