/* asset bump v124 — table-designer bỏ qua bảng có <colgroup> tự đặt (Danh mục biểu phí) */
: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:#6c7160; /* đậm hơn (cũ #8a8f7d) cho chữ phụ dễ đọc, vẫn xám-xanh nền sáng */
  --bg:#f4f7ec; --card:#ffffff; --border:#e7ead9;
  --shadow:0 2px 10px rgba(94,148,0,.08);
  --radius:14px;
}
*{box-sizing:border-box}
/* Khóa CUỘN NGANG cấp trang: cả màn hình không bị "xịt qua lại" khi có phần tử lỡ rộng hơn khung.
   Dùng overflow-x:clip (KHÔNG tạo vùng cuộn mới) nên thanh trên cùng position:sticky vẫn dính,
   và các bảng rộng vẫn tự cuộn ngang trong .table-wrap của riêng chúng. */
html,body{overflow-x:clip;max-width:100%}
/* CHỪA SẴN CHỖ cho thanh cuộn dọc ở MỌI trang → chuyển trang ngắn↔dài (vd các tab Học phí:
   Thống kê/Tài khoản nhận tiền ngắn vs Danh mục phí/Học phí dài) KHÔNG còn nhảy/giật khi thanh
   cuộn hiện rồi biến. Dự phòng cho trình duyệt cũ chưa hỗ trợ scrollbar-gutter: ép overflow-y:scroll. */
html{scrollbar-gutter:stable}
@supports not (scrollbar-gutter:stable){html{overflow-y:scroll}}
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.05)}
.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;align-items:center;gap:8px;padding:11px 20px}
.navpanel.open{display:flex}
/* "← Quay lại" (đầu hàng) + dải tab con + cụm tài khoản được kéo lên CHUNG hàng với các pill (máy tính). */
/* Bỏ margin-bottom 14px mặc định của .backbtn (làm nút bị đẩy lên lệch hàng) + canh cao bằng pill. */
.navpanel>.backbtn{margin:0 6px 0 0;align-self:center;padding:9px 13px 9px 10px}
.navpanel>.subtabs{margin-left:4px}
.navpanel>.subtabs a{margin-bottom:0}
.navpanel>.np-acct{margin-left:auto;display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end}
.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;flex:1 1 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}

/* 🔑 menu tài khoản gọn: gom "Đổi mật khẩu" + "Đăng xuất" vào một nút. */
.acctmenu{position:relative}
.acctmenu[open] .iconbtn{background:var(--green-l);border-color:var(--green)}
.acctmenu-pop{position:absolute;right:0;top:calc(100% + 8px);min-width:180px;background:#fff;
  border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);padding:6px;z-index:70;
  display:flex;flex-direction:column;gap:2px}
.acctmenu-pop a,.acctmenu-pop .acct-logout{display:flex;align-items:center;gap:8px;width:100%;
  padding:8px 10px;border-radius:8px;text-decoration:none;white-space:nowrap;font:inherit;font-weight:600;
  color:var(--ink);text-align:left;cursor:pointer}
.acctmenu-pop .acct-logout{color:var(--pink-d);background:none;border:0}
.acctmenu-pop a:hover,.acctmenu-pop .acct-logout:hover{background:var(--green-l)}

/* 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}
/* Dòng thông báo nội dung mới (khoảnh khắc / thực đơn). Chưa xem = nền mint nhạt + chấm xanh. */
.bellpick .bell-notif{align-items:flex-start}
.bellpick .bell-notif .bell-row-tx{font-weight:600;line-height:1.3}
.bellpick .bell-notif .bell-row-tx small{color:var(--muted);font-weight:500}
.bellpick .bell-notif.unseen{background:var(--green-l)}
.bellpick .bell-notif.unseen .bell-row-tx b::after{content:"";display:inline-block;width:7px;height:7px;margin-left:6px;
  border-radius:999px;background:var(--green-d);vertical-align:middle}
#bellNotifs:not(:empty){border-bottom:1px solid var(--border);margin-bottom:4px;padding-bottom:4px}
/* 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)}
/* Dải ghi chú giải thích đầu trang (vì sao mục này khác mục kia) — nhã mint, không đen */
.pagenote{display:flex;gap:10px;align-items:flex-start;background:var(--green-l);
  border:1px solid var(--border);border-left:4px solid var(--teal);border-radius:12px;
  padding:11px 14px;margin-bottom:14px;color:var(--ink);font-size:13.5px;line-height:1.55}
.pagenote .pn-ic{font-size:18px;line-height:1.3;flex:0 0 auto}
.pagenote b{color:var(--green-d)}
.pagenote .pn-body{min-width:0}
.pagenote a{color:var(--teal);font-weight:700}
/* 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:stretch;gap:0;background:linear-gradient(90deg,#fff4ec,#fdeef6);
  border:1px solid #f4d9c8;border-radius:12px;box-shadow:var(--shadow);overflow:hidden;margin-bottom:0;min-height:43px}
.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;display:flex;align-items:center}
.exec-ticker .tk-track{display:inline-flex;align-items:center;gap:10px;white-space:nowrap;
  animation:tkscroll 42s linear infinite}
.exec-ticker:hover .tk-track{animation-play-state:paused}
.exec-ticker .tk-item{font-size:13.5px;color:#5a4636;line-height:1}
.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 */
.exec-fit .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}

/* ---------- Khung cuộn cho BẢNG CÔNG (rộng hơn màn hình) ----------
   .table-wrap mặc định overflow:hidden → các ngày cuối tháng bị CẮT HẲN, không có
   thanh cuộn nào để kéo tới. Gắn thêm class "sheet-scroll" → cuộn ngang + dọc ngay
   trong khung: thanh cuộn ngang luôn nằm trong tầm mắt (không phải kéo hết trang mới
   thấy), hàng tiêu đề ngày và 2 cột STT · Giáo viên luôn dính khi cuộn. */
.table-wrap.sheet-scroll{overflow:auto;-webkit-overflow-scrolling:touch;
  max-height:calc(100vh - 150px);scrollbar-color:#b6c0a6 #f4f6ec}
/* thanh cuộn tô rõ cho dễ thấy, dễ kéo (mặc định của Chrome mảnh và nhạt) */
.table-wrap.sheet-scroll::-webkit-scrollbar{width:14px;height:14px}
.table-wrap.sheet-scroll::-webkit-scrollbar-track{background:#f4f6ec}
.table-wrap.sheet-scroll::-webkit-scrollbar-thumb{background:#b6c0a6;border:3px solid #f4f6ec;border-radius:999px}
.table-wrap.sheet-scroll::-webkit-scrollbar-thumb:hover{background:#8e9b7c}
/* hàng tiêu đề dính đỉnh khung (giữ nguyên nền vàng nhạt của cột Thứ 7 / CN) */
.table-wrap.sheet-scroll table.sheet thead th{position:sticky;top:0;z-index:2}
.table-wrap.sheet-scroll table.sheet thead th:not(.we){background:#fbfcf6}
.table-wrap.sheet-scroll table.sheet thead th.we{background:#faf6ef}
/* 2 cột trái dính mép trái, đè lên cột ngày; góc trên trái đè cả hai chiều */
.table-wrap.sheet-scroll table.sheet thead th.sticky-stt,
.table-wrap.sheet-scroll table.sheet thead th.sticky{z-index:4}
.table-wrap.sheet-scroll table.sheet .sticky{box-shadow:9px 0 12px -8px rgba(0,0,0,.14)}
/* gợi ý "kéo ngang" đặt ngay trên bảng */
.scroll-hint{display:inline-flex;align-items:center;gap:6px;margin:0 0 8px;padding:3px 10px;
  border-radius:999px;background:#f4f6ec;color:var(--muted);font-size:12px;font-weight:600}
@media print{ .table-wrap.sheet-scroll{overflow:visible !important;max-height:none !important} .scroll-hint{display:none !important} }

/* 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:not(.allmode) 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 */
.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{transform:translateY(-2px);box-shadow:0 6px 18px rgba(94,148,0,.16);transition:.15s}
.album-link{display:flex;flex-direction:column;color:var(--ink)}
.album-link:hover{text-decoration:none}
.album-actions{display:flex;gap:8px;padding:8px 12px 12px;border-top:1px solid var(--border);margin-top:auto}
.album-actions form{flex:0 0 auto}
.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}
.btn.reg-sel{box-shadow:0 0 0 3px rgba(0,0,0,.18);font-weight:800;position:relative}
.btn.reg-sel::after{content:'';position:absolute;inset:0;border:2px solid rgba(255,255,255,.85);border-radius:inherit;pointer-events:none}
.btn.reg-dim{opacity:.5;filter:grayscale(.35);font-weight:600}

/* ---------- 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}
/* Điện thoại: bảo đảm nút nhỏ đủ VÙNG CHẠM ≥44px cho cô lớn tuổi (ngón tay). */
@media(max-width:640px){
  .btn-sm{min-height:44px;padding:10px 14px;display:inline-flex;align-items:center;justify-content:center}
}

/* Nút "loading" khi form đang gửi (submitlock.js) — spinner nhỏ, giữ màu nút. */
.btn.is-loading{position:relative;color:transparent!important;pointer-events:none;opacity:.85}
.btn.is-loading::after{content:"";position:absolute;left:50%;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;
  border:2px solid rgba(255,255,255,.55);border-top-color:#fff;border-radius:50%;animation:hh-spin .6s linear infinite}
.btn-ghost.is-loading::after,.btn-danger.is-loading::after{border-color:rgba(60,64,48,.3);border-top-color:var(--ink)}
@keyframes hh-spin{to{transform:rotate(360deg)}}

/* Snackbar (?msg thường) tự tắt ở đáy màn hình — xanh thương hiệu, KHÔNG nền đen. */
.hh-snackbar{position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom,0px));transform:translate(-50%,14px);
  display:flex;align-items:center;gap:9px;background:var(--green-d);color:#fff;padding:12px 20px;border-radius:999px;
  font-size:14.5px;font-weight:600;z-index:9998;box-shadow:0 8px 24px rgba(60,90,0,.32);max-width:92vw;
  opacity:0;transition:opacity .22s ease,transform .22s ease;cursor:pointer}
.hh-snackbar.in{opacity:1;transform:translate(-50%,0)}
.hh-snackbar .hh-snackbar-ic{font-size:17px;line-height:1;flex:none}
.hh-snackbar .hh-snackbar-tx{min-width:0}

/* Lối tắt "💬 Nhắn PH" trên mỗi dòng bé (be_hub) — nhỏ, xanh mint, có nhãn. */
.rowchat{display:inline-flex;align-items:center;gap:4px;margin-right:6px;padding:5px 11px;border-radius:999px;
  background:var(--green-l);color:var(--green-d);border:1px solid var(--green);font-size:12.5px;font-weight:700;
  white-space:nowrap;line-height:1;vertical-align:middle}
.rowchat:hover{background:#e4f2c9;text-decoration:none}
@media(max-width:640px){.rowchat{min-height:36px;padding:8px 12px}}

/* Đăng xuất chuyển sang FORM POST — nút phải TRÔNG như liên kết cũ (bell-row / nav-foot). */
.logout-form{margin:0;display:contents}
.bellpick button.bell-row{width:100%;border:0;background:none;font:inherit;cursor:pointer;text-align:left}
button.nav-logout{border:0;background:none;font:inherit;cursor:pointer;color:inherit;display:flex;align-items:center;gap:6px;padding:0}

/* Hàng "Hằng ngày" ghim đầu lưới ứng dụng — viền nhấn nhẹ mint để nổi bật trước các nhóm. */
.func-group--daily .func-group-title{color:var(--green-d)}

/* 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}
/* Khi có dải tab con NGAY SAU "← Quay lại": Quay lại + tabs dồn TRÁI, tài khoản dồn PHẢI.
   (Trang không có tab con thì backbtn giữ margin-right:auto như trên.) */
.userctl>.backbtn:has(+ .subtabs){margin-right:12px}
.userctl>.subtabs{margin-right:auto;align-self:center;margin-bottom:0}
/* Máy tính: khi panel nhóm đang mở đã CÓ SẴN Quay lại + tab con + cụm tài khoản (kéo lên chung
   hàng với pill), thì cả dải tài khoản (userrow) ẩn đi để khỏi lặp. Điện thoại ẩn panel nên vẫn
   giữ userrow như cũ. (userrow của Tổng quan nằm trong exec-head, không phải anh em của .appbar → không bị ẩn.) */
@media(min-width:861px){
  .appbar:has(.navpanel.open) ~ .userrow{display:none}
}
/* Cụm tài khoản (chọn cơ sở · đổi tên · tên+avatar · 🔑) dời LÊN thanh trên cùng, đứng ngay
   trước ô chọn ngôn ngữ + chuông. Điện thoại (<861px) ẨN bản này, vẫn dùng dải userrow phía dưới. */
.topbar-acct{display:none}
@media(min-width:861px){
  .topbar-acct{display:flex;align-items:center;gap:10px;flex:none}
  .topbar-acct a.who.user-name>span:not(.avatar){max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* Bỏ cụm tài khoản ở các dải phía dưới (userrow thường · thanh Tổng quan) để khỏi hiện 2 lần.
     Tên+avatar phải dùng selector đủ mạnh (a.who.user-name) để THẮNG rule nền cùng tên thẻ. */
  .userrow .centre-form,.userrow .centre-edit,.userrow .acctmenu,.userrow .parent-switch{display:none}
  .userrow a.who.user-name{display:none}
  .exec-head .userrow{display:none}
}

/* ---------- 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.
   LƯU Ý: rowmenu.js portal popup ra thẳng <body>, nên style KHÔNG được scope dưới .rowmenu
   (nếu không, khi tách khỏi .rowmenu popup sẽ mất sạch style → các mục đổ chồng chéo). */
.rowmenu-pop{position:fixed;min-width:184px;width:max-content;max-width:calc(100vw - 16px);
  background:#fff;border:1px solid var(--border);overflow:visible;
  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-pop form{margin:0;display:block}
.rowmenu-pop a,
.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-pop a:hover,
.rowmenu-pop button:hover{background:var(--green-l);text-decoration:none}
.rowmenu-pop button.danger{color:var(--pink-d)}
.rowmenu-pop button.danger:hover{background:#ffe3f1}
.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)}
/* Dải tab con trong thân trang kéo nút "← Quay lại" lên NGANG HÀNG với các tab. */
.subtabs-lift{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;margin:0 0 14px}
.subtabs-lift>.backbtn{margin:0 4px 0 0;align-self:center}
.subtabs-lift>.subtabs{margin:0;flex:1 1 auto}
/* Có dải này rồi → ẩn nút "← Quay lại" trùng ở dải tài khoản / panel điều hướng. */
body:has(.subtabs-lift) .userrow>.userctl>.backbtn,
body:has(.subtabs-lift) .navpanel>.backbtn{display:none}
.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(5,1fr);gap:12px}
@media(max-width:1100px){.kanban{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:minmax(220px,1fr);overflow-x:auto;padding-bottom:8px;scroll-snap-type:x proximity}.kanban .kcol{scroll-snap-align:start}}
.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}
.fee-cfg input.cfg[readonly]{color:#5b6b7a;cursor:default;opacity:.92}
.fee-cfg input.cfg[readonly]:focus{border-color:transparent;background:var(--bg)}
.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{position:relative;max-width:78%;padding:9px 13px;border-radius:16px;font-size:14px;line-height:1.45;box-shadow:0 1px 2px rgba(60,64,48,.06)}
.bubble .b-text{white-space:pre-wrap;word-break:break-word}
.bubble img{max-width:240px;border-radius:12px;display:block;margin-bottom:6px}
.bubble .b-meta{font-size:11px;color:var(--muted);margin-top:4px}
.bubble.them{align-self:flex-start;background:var(--card);border:1px solid var(--border);border-bottom-left-radius:5px}
.bubble.me{align-self:flex-end;background:linear-gradient(135deg,#8ec63f,#6fa300);border:1px solid var(--green-d);color:#fff;border-bottom-right-radius:5px}
.bubble.me .b-meta{text-align:right;color:rgba(255,255,255,.82)}
/* Thu hồi tin nhắn: nút 🗑 nhỏ cạnh bong bóng (hiện mờ, đậm khi rê chuột) */
.bubble .b-recall{position:absolute;top:50%;transform:translateY(-50%);margin:0;line-height:0}
.bubble.me .b-recall{left:-30px}
.bubble.them .b-recall{right:-30px}
.b-recall-btn{width:26px;height:26px;padding:0;border:none;border-radius:50%;background:var(--card);box-shadow:0 1px 3px rgba(0,0,0,.18);color:var(--muted);font-size:13px;cursor:pointer;opacity:.55;transition:opacity .15s,background .15s}
.bubble:hover .b-recall-btn,.b-recall-btn:hover{opacity:1}
.b-recall-btn:hover{background:#ffe3e3;color:#c0392b}
.bubble.recalled{opacity:.85}
.b-recalled{font-style:italic;color:var(--muted);opacity:.9}
.bubble.me .b-recalled{color:rgba(255,255,255,.9)}
.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}

/* ---------- Nhắn tin kiểu Zalo: danh sách hội thoại + soạn tin ---------- */
.zlist{display:flex;flex-direction:column;gap:2px}
.zconv{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;text-decoration:none;color:inherit;background:var(--card,#fff);border:1px solid var(--border);transition:background .12s}
.zconv:hover{background:var(--green-l)}
.zava{flex:0 0 44px;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;background:var(--green-l);border:1px solid var(--border)}
.zmain{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.ztop{display:flex;align-items:baseline;gap:8px}
.ztitle{font-weight:700;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ztime{flex:0 0 auto;font-size:12px;color:var(--muted)}
.zbot{display:flex;align-items:center;gap:8px}
.zlast{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;color:var(--muted)}
.zsub{color:var(--green,#5a8a2a)}
.zunread{flex:0 0 auto;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:#e23b5a;color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center}
/* Soạn tin: tab đối tượng + danh sách chọn */
.aud-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.aud-tab{cursor:pointer}
.aud-tab input{position:absolute;opacity:0;pointer-events:none}
.aud-tab span{display:inline-block;padding:8px 14px;border-radius:20px;border:1px solid var(--border);background:#fff;font-weight:600;font-size:14px}
.aud-tab.on span{background:var(--green-l);border-color:#bcd99a;color:#3f6b18}
.aud-pane .lbl{display:block;font-weight:600;margin:6px 0}
.pick-list{max-height:340px;overflow:auto;border:1px solid var(--border);border-radius:10px;padding:4px}
.pick-row{display:flex;gap:10px;align-items:flex-start;padding:8px 10px;border-radius:8px;cursor:pointer}
.pick-row:hover{background:var(--green-l)}
.pick-row input{margin-top:3px}
.pick-main{flex:1;min-width:0}

/* ---------- Khung TIN NHẮN 2 cột kiểu Zalo (messenger.ejs) ---------- */
.msgr{display:grid;grid-template-columns:64px 320px 1fr;gap:0;height:calc(100vh - 210px);min-height:480px;
  background:var(--card);border:1px solid var(--border);border-radius:18px;overflow:hidden;box-shadow:var(--shadow)}
/* Soạn tin (compose) chỉ 2 cột (picker + nội dung), không có dải rail */
.msgr.msgr--open:has(.msgr-cform){grid-template-columns:320px 1fr}
/* ── DẢI ICON DỌC kiểu Zalo (sát mép trái, chỉ icon, rê chuột hiện tên) ── */
.msgr-rail{display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 8px;background:#eaf3dc;border-right:1px solid var(--border);overflow:visible}
.mrail{position:relative;flex:none;display:flex;align-items:center;justify-content:center;width:46px;height:46px;padding:0;cursor:pointer;
  background:#fff;border:1px solid var(--border);border-radius:14px;font:inherit;color:var(--ink);transition:background .12s,border-color .12s,box-shadow .12s}
.mrail:hover{background:#eef6e0;border-color:#cfe3a8;text-decoration:none}
.mrail.on{background:var(--green);border-color:var(--green);box-shadow:0 2px 7px rgba(90,150,40,.30)}
.mrail-ic{font-size:23px;line-height:1}
/* Nút TẠO NHÓM: nền xanh nổi bật + dấu ＋ góc dưới-phải */
.mrail-group{background:var(--green);border-color:var(--green);box-shadow:0 2px 7px rgba(90,150,40,.30)}
.mrail-group:hover{background:var(--green-d);border-color:var(--green-d)}
.mrail-group .mrail-ic{filter:none}
.mrail-plus{position:absolute;right:-5px;bottom:-5px;width:20px;height:20px;border-radius:50%;background:var(--pink);color:#fff;
  font-size:15px;font-weight:800;line-height:20px;text-align:center;box-shadow:0 1px 4px rgba(0,0,0,.25)}
.mrail-new{margin-top:auto;background:var(--pink);border-color:var(--pink);box-shadow:0 2px 7px rgba(230,0,126,.28)}
.mrail-new:hover{background:var(--pink-d);border-color:var(--pink-d)}
.mrail-n{position:absolute;top:-6px;right:-6px;min-width:19px;height:19px;padding:0 5px;border-radius:999px;
  background:var(--green-d);color:#fff;font-size:11px;font-weight:800;line-height:19px;text-align:center}
.mrail-dot{position:absolute;top:-6px;right:-6px;min-width:19px;height:19px;padding:0 5px;border-radius:999px;
  background:var(--pink-d);color:#fff;font-size:11px;font-weight:800;line-height:19px;text-align:center}
.mrail[data-tip]::after{content:attr(data-tip);position:absolute;left:calc(100% + 10px);top:50%;transform:translateY(-50%) scale(.96);transform-origin:left center;
  white-space:nowrap;background:#2b3a17;color:#fff;font-size:12.5px;font-weight:600;padding:5px 11px;border-radius:9px;box-shadow:0 5px 16px rgba(0,0,0,.20);opacity:0;pointer-events:none;transition:opacity .12s,transform .12s;z-index:40}
.mrail[data-tip]::before{content:'';position:absolute;left:calc(100% + 4px);top:50%;transform:translateY(-50%);border:6px solid transparent;border-right-color:#2b3a17;opacity:0;transition:opacity .12s;z-index:40}
.mrail:hover[data-tip]::after{opacity:1;transform:translateY(-50%) scale(1)}
.mrail:hover[data-tip]::before{opacity:1}
/* tiêu đề view + các view trong cột giữa */
.msgr-side-title{font-weight:800;font-size:17px;color:var(--green-d);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msgr-view{flex:1;min-height:0;overflow:auto;padding:4px 8px 10px;display:flex;flex-direction:column;gap:2px}
/* View TẠO NHÓM: danh sách tick cuộn + chân cố định (tên nhóm + nút tạo) */
.msgr-groupform{overflow:hidden;padding:0;gap:0}
.mgf-list{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:2px;padding:4px 8px 8px}
.mgf-row{cursor:pointer}
.mgf-row input[type=checkbox]{flex:none;width:20px;height:20px;accent-color:var(--green);margin:0 2px 0 0;cursor:pointer}
.mgf-row:has(input:checked){background:#e9f6e2;box-shadow:inset 3px 0 0 var(--green)}
.mgf-foot{flex:none;border-top:1px solid var(--border);background:var(--card);padding:10px 12px;display:flex;flex-direction:column;gap:8px}
.mgf-name{height:38px;border:1px solid var(--border);border-radius:20px;padding:0 14px;background:#fff;font:inherit}
.mgf-name:focus{outline:none;border-color:var(--green)}
.mgf-btn{width:100%;padding:11px;border-radius:22px;font-weight:700}
.mgf-btn:disabled{opacity:.5;cursor:not-allowed}
/* Nút 📣 GỬI 1 TIN CHO NHIỀU PH + chân khung soạn (chọn cách gửi · ô nội dung) */
.mrail-bulk{background:#fff3d6;border-color:#f0c96a}
.mrail-bulk:hover{background:#ffe9b8;border-color:#e5b33f}
.bulk-all{background:#f3f8ea;font-weight:700}
.bulk-modes{display:flex;flex-direction:column;gap:4px}
.bulk-mode{display:flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;cursor:pointer}
.bulk-mode input[type=radio]{width:17px;height:17px;accent-color:var(--green);margin:0;cursor:pointer}
.bulk-hint{font-size:12px;margin:0;line-height:1.45}
.bulk-row{display:flex;align-items:flex-end;gap:8px}
.bulk-text{flex:1;min-width:0;border:1px solid var(--border);border-radius:14px;padding:9px 12px;background:#fff;font:inherit;resize:vertical}
.bulk-text:focus{outline:none;border-color:var(--green)}
/* Cách gửi khi chọn nhiều PH ở khung soạn tin toàn màn hình */
.cf-sep{margin:10px 0;padding:10px 12px;border:1px dashed #cfe3a8;border-radius:12px;background:#f7fbf1}
.cf-sep-lbl{display:flex;align-items:center;gap:8px;font-weight:700;cursor:pointer}
.cf-sep-lbl input[type=checkbox]{width:18px;height:18px;accent-color:var(--green);margin:0;cursor:pointer}
/* Cột trái */
.msgr-side{display:flex;flex-direction:column;min-height:0;border-right:1px solid var(--border);background:var(--green-l)}
.msgr-side-head{display:flex;align-items:center;gap:10px;padding:12px 14px 8px}
.msh-title{font-weight:800;font-size:17px;color:var(--green-d);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 2 TAB kênh: Nhà trường · Phụ huynh (segmented) */
.msgr-chtabs{flex:1;display:flex;gap:4px;background:#e7f0d8;border:1px solid #d3e3ba;border-radius:12px;padding:3px}
.mct{flex:1;display:flex;align-items:center;justify-content:center;gap:5px;height:34px;border-radius:9px;
  font-weight:700;font-size:13.5px;color:var(--green-d);text-decoration:none;white-space:nowrap;position:relative;transition:background .12s}
.mct:hover{text-decoration:none}
.mct.on{background:#fff;color:var(--green-d);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.mct-dot{min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--pink);color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center}
.msh-new{flex:none;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--pink);color:#fff;font-size:16px;text-decoration:none;box-shadow:0 2px 6px rgba(230,0,126,.3)}
.msh-new:hover{background:var(--pink-d);text-decoration:none;transform:translateY(-1px)}
.msh-new--phone{display:none}   /* máy tính đã có khung soạn nhúng sẵn bên phải → ẩn nút ✏️ */
.msgr-search{padding:12px 14px 10px}
.msgr-search input{width:100%;height:38px;border:1px solid var(--border);border-radius:20px;padding:0 14px;background:#fff;font:inherit}
.msgr-search input:focus{outline:none;border-color:var(--green)}
.msgr-view[hidden]{display:none}
.msgr-convs{flex:1;min-height:0;overflow:auto;padding:4px 8px 10px;display:flex;flex-direction:column;gap:2px}
.msgr-side-empty{padding:26px 14px;text-align:center;font-size:14px}
/* Kết quả TÌM "người mới" (chưa chat) — hiện khi gõ ô tìm, bấm vào là mở chat */
.msgr-dir-h{padding:8px 12px 4px;font-size:12px;font-weight:700;color:var(--green-d);text-transform:uppercase;letter-spacing:.03em}
.msgr-conv--dir .mc-ava{background:var(--green-l)}
.msgr-conv{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:12px;text-decoration:none;color:inherit;transition:background .12s}
.msgr-conv[hidden]{display:none}
.msgr-conv:hover{background:#fff;text-decoration:none}
.msgr-conv.on{background:#fff;box-shadow:inset 3px 0 0 var(--green)}
.mc-ava{flex:0 0 42px;width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:19px;background:#fff;border:1px solid var(--border)}
.msgr-conv.on .mc-ava{background:var(--green-l)}
.mc-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.mc-top{display:flex;align-items:baseline;gap:8px}
.mc-title{font-weight:700;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mc-time{flex:0 0 auto;font-size:11.5px;color:var(--muted)}
.mc-bot{display:flex;align-items:center;gap:8px}
.mc-last{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;color:var(--muted)}
.mc-last b{color:var(--green-d);font-weight:600}
.mc-unread{flex:0 0 auto;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--pink);color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center}
/* Nút XOÁ (ẩn) cuộc trò chuyện — ẩn mặc định, hiện khi rê chuột vào dòng */
.mc-del{flex:0 0 auto;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:15px;color:var(--muted);background:transparent;cursor:pointer;opacity:0;transition:opacity .12s,background .12s,color .12s}
.msgr-conv:hover .mc-del,.mc-del:focus{opacity:1}
.mc-del:hover{background:#ffe3e3;color:#d64545}
@media(hover:none){.mc-del{opacity:.55}}
/* Cột phải */
.msgr-main{display:flex;flex-direction:column;min-width:0;min-height:0;background:#f7f9f0}
.msgr-blank{margin:auto;text-align:center;padding:30px;display:flex;flex-direction:column;align-items:center;gap:10px;max-width:420px}
.msgr-blank .mb-ic{width:104px;height:104px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:50px;background:radial-gradient(circle at 50% 38%,#eef6df,#dcebc4);box-shadow:0 8px 22px rgba(122,184,0,.18);margin-bottom:4px}
.msgr-blank .mb-title{margin:0;font-size:21px;font-weight:800;color:var(--green-d)}
.msgr-blank p{margin:0;font-size:14.5px;line-height:1.5}
.msgr-blank .mb-btn{margin-top:14px;padding:11px 24px;font-size:15px;border-radius:24px;box-shadow:0 4px 14px rgba(230,0,126,.28)}
.msgr-head{display:flex;align-items:center;gap:12px;padding:12px 18px;background:var(--card);border-bottom:1px solid var(--border);flex:none}
.msgr-back{flex:none;display:none;width:36px;height:36px;border-radius:50%;align-items:center;justify-content:center;font-size:20px;color:var(--ink);text-decoration:none;background:var(--green-l)}
.mht-ava{flex:none;width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;background:var(--green-l);border:1px solid var(--border)}
.msgr-head-txt{min-width:0;flex:1}
.mht-title{font-weight:800;font-size:17px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mht-sub{font-size:12.5px;color:var(--muted)}
.msgr-members{margin:10px 14px 0;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:8px 12px}
.msgr-members summary{cursor:pointer;font-weight:600;font-size:13px}
.msgr-members .mm-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.msgr-assign{margin:10px 14px 0;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:9px 12px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.msgr-warn{margin:10px 14px 0;background:#fff2d6;border:1px solid #f0d59a;color:#9a6b1a;border-radius:10px;padding:8px 12px;font-size:13.5px}
.msgr-scroll{flex:1;min-height:0;overflow:auto;padding:16px 18px;display:flex;flex-direction:column;gap:10px;
  background:linear-gradient(180deg,#f7f9f0,#eef6df)}
.msgr-input{flex:none;display:flex;align-items:center;gap:8px;padding:10px 14px;background:var(--card);border-top:1px solid var(--border)}
.msgr-input input[type=text]{flex:1;min-width:0;height:42px;margin:0;border:1px solid var(--border);border-radius:22px;padding:0 16px;background:#fff;font:inherit}
.msgr-input input[type=text]:focus{outline:none;border-color:var(--green)}
.mi-photo{flex:none;width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;cursor:pointer;background:var(--green-l);border:1px solid var(--border)}
.mi-photo:hover{background:#dff3e4}
.mi-photo.has{background:var(--green);border-color:var(--green-d)}
.mi-send{flex:none;width:44px;height:44px;padding:0;border-radius:50%;font-size:18px;display:flex;align-items:center;justify-content:center}
.msgr-compose{flex:1;min-height:0;overflow:auto;padding:16px 18px}
/* Khung soạn tin NHÚNG sẵn ở cột phải trang danh sách (máy tính): vào là gõ ngay, khỏi bấm ✏️ */
.msgr-compose--embed .mce-head{font-weight:800;font-size:16px;color:var(--green-d);margin:0 0 12px}
.msgr-compose--embed .aud-tabs{margin-bottom:12px}
.msgr-compose--embed .pk-tools{padding:0 0 8px}
.msgr-compose--embed .pk-pane[data-aud="class"]{padding:0}
.msgr-compose--embed .lbl{display:block;font-weight:600;margin:2px 0 6px}
.msgr-compose--embed .pk-list{max-height:min(46vh,360px)}
/* Soạn tin: cột trái = bộ chọn người nhận (form bao cả 2 cột nhờ display:contents) */
.msgr-cform{display:contents}
.msgr-picker{background:var(--green-l)}
.msgr-picker .aud-tabs{padding:10px 12px 8px;margin:0;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.msgr-picker .aud-tabs::-webkit-scrollbar{display:none}
.msgr-picker .aud-tab{flex:0 0 auto}
.msgr-picker .aud-tab span{padding:7px 13px;font-size:13px;white-space:nowrap}
.msgr-picker .aud-tab.on span{background:var(--green);border-color:var(--green);color:#fff}
.pk-tools{padding:6px 12px 8px;display:flex;flex-direction:column;gap:6px}
.pk-search{width:100%;height:36px;border:1px solid var(--border);border-radius:18px;padding:0 14px;background:#fff;font:inherit}
.pk-search:focus{outline:none;border-color:var(--green)}
.pk-selrow{display:flex;gap:6px;flex-wrap:wrap}
.pk-sel{flex:1;min-width:120px;height:34px;border:1px solid var(--border);border-radius:9px;background:#fff;font:inherit;padding:0 8px}
.pk-pane{display:flex;flex-direction:column;min-height:0;flex:1}
.pk-pane[hidden]{display:none}          /* KHOA HỌC: mỗi lần chỉ hiện đúng 1 danh sách như Zalo */
.pk-pane[data-aud="class"]{flex:none;padding:10px 12px}
.pk-pane .lbl{display:block;font-weight:600;margin:2px 0 6px}
.msgr-picker .pk-list{flex:1;min-height:0;max-height:none;border:none;border-radius:0;margin:0;padding:2px 6px 10px;background:transparent}
.msgr-picker .pick-row{background:transparent}
.msgr-picker .pick-row:hover{background:#fff}
/* === DẢI ICON ĐỐI TƯỢNG kiểu Zalo: icon dọc bên TRÁI, rà chuột hiện tên === */
.pk-wrap{display:flex;align-items:stretch;min-height:0}
.msgr-picker .pk-wrap{flex:1;min-height:0}
.pk-body{flex:1;min-width:0;display:flex;flex-direction:column;min-height:0}
.aud-tabs.aud-rail{flex:0 0 auto;flex-direction:column;flex-wrap:nowrap;gap:8px;padding:10px 10px;margin:0;overflow:visible;border-right:1px solid var(--border)}
.aud-rail .aud-tab{position:relative;display:block}
.aud-rail .aud-tab .aud-ic{display:flex;align-items:center;justify-content:center;width:46px;height:46px;padding:0;border-radius:14px;border:1px solid var(--border);background:#fff;font-size:22px;line-height:1;transition:background .12s,border-color .12s,box-shadow .12s}
.aud-rail .aud-tab:hover .aud-ic{background:#eef6e0;border-color:#cfe3a8}
.aud-rail .aud-tab.on .aud-ic{background:var(--green);border-color:var(--green);box-shadow:0 2px 7px rgba(90,150,40,.30)}
/* Tên hiện khi rà chuột (tooltip bên phải icon) */
.aud-rail .aud-tab[data-tip]::after{content:attr(data-tip);position:absolute;left:calc(100% + 9px);top:50%;transform:translateY(-50%) scale(.96);transform-origin:left center;white-space:nowrap;background:#2b3a17;color:#fff;font-size:12.5px;font-weight:600;padding:5px 11px;border-radius:9px;box-shadow:0 5px 16px rgba(0,0,0,.20);opacity:0;pointer-events:none;transition:opacity .12s,transform .12s;z-index:40}
.aud-rail .aud-tab[data-tip]::before{content:'';position:absolute;left:calc(100% + 3px);top:50%;transform:translateY(-50%);border:6px solid transparent;border-right-color:#2b3a17;opacity:0;transition:opacity .12s;z-index:40}
.aud-rail .aud-tab:hover[data-tip]::after{opacity:1;transform:translateY(-50%) scale(1)}
.aud-rail .aud-tab:hover[data-tip]::before{opacity:1}
@media(max-width:820px){
  .aud-tabs.aud-rail{padding:8px 7px;gap:7px}
  .aud-rail .aud-tab .aud-ic{width:42px;height:42px;font-size:20px}
}
.pk-tags{display:block;margin-top:2px}
.pk-tag{display:inline-block;font-size:11px;color:var(--green-d);background:#fff;border:1px solid #d7e8b0;border-radius:999px;padding:1px 8px;margin:2px 4px 0 0}
/* Cột phải khi soạn tin: ô "Gửi tới" + nội dung */
.cf-to{display:flex;align-items:flex-start;gap:8px;flex-wrap:wrap;background:#fff;border:1px solid var(--border);border-radius:12px;padding:10px 12px;margin-bottom:14px}
.cf-to-lbl{font-weight:700;color:var(--green-d);flex:none;padding-top:2px}
.cf-chips{display:flex;flex-wrap:wrap;gap:6px;flex:1;min-width:0}
.cf-chip{display:inline-block;background:var(--green-l);border:1px solid #d7e8b0;color:var(--green-d);border-radius:999px;padding:2px 11px;font-weight:600;font-size:13px}
/* Điện thoại: danh sách = dải icon + cột giữa; mở hội thoại = chỉ khung chat */
@media(max-width:820px){
  .msgr{grid-template-columns:56px 1fr;height:calc(100vh - 168px);min-height:0;border-radius:14px}
  .msgr--open{grid-template-columns:1fr}
  .msgr--open .msgr-rail,.msgr--open .msgr-side{display:none}
  .msgr--list .msgr-main{display:none}
  .msgr-rail{padding:10px 5px;gap:7px}
  .mrail{width:46px;height:46px}
  .msh-new--phone{display:flex}   /* điện thoại: cột phải ẩn → giữ nút ✏️ để soạn tin */
  .msgr-back{display:flex}
  .msgr-side{border-right:none}
  /* Soạn tin trên điện thoại: bộ chọn hiện trước (cột trái), phần nội dung xếp dưới */
  .msgr--open:has(.msgr-cform){grid-template-columns:1fr}
  .msgr-cform .msgr-side{display:flex}
  .msgr-cform{display:flex;flex-direction:column}
  .msgr .msgr-cform .msgr-side{max-height:52vh}
}

/* Thanh cuộn TRONG khung tin nhắn: mảnh + hoà theme (bỏ thanh xám/xanh mặc định chọi màu) */
.msgr-convs,.msgr-scroll,.msgr-compose,.msgr .pk-list,.pick-list{
  scrollbar-width:thin;scrollbar-color:#cdd6bf transparent}
.msgr-convs::-webkit-scrollbar,.msgr-scroll::-webkit-scrollbar,.msgr-compose::-webkit-scrollbar,
.msgr .pk-list::-webkit-scrollbar,.pick-list::-webkit-scrollbar{width:7px;height:7px}
.msgr-convs::-webkit-scrollbar-thumb,.msgr-scroll::-webkit-scrollbar-thumb,.msgr-compose::-webkit-scrollbar-thumb,
.msgr .pk-list::-webkit-scrollbar-thumb,.pick-list::-webkit-scrollbar-thumb{background:#cdd6bf;border-radius:7px}
.msgr-convs::-webkit-scrollbar-thumb:hover,.msgr-scroll::-webkit-scrollbar-thumb:hover,.msgr-compose::-webkit-scrollbar-thumb:hover,
.msgr .pk-list::-webkit-scrollbar-thumb:hover,.pick-list::-webkit-scrollbar-thumb:hover{background:#b9c6a4}
.msgr-convs::-webkit-scrollbar-track,.msgr-scroll::-webkit-scrollbar-track,.msgr-compose::-webkit-scrollbar-track,
.msgr .pk-list::-webkit-scrollbar-track,.pick-list::-webkit-scrollbar-track{background:transparent}
/* Khung soạn tin NHÚNG: CHỈ 1 vùng cuộn = danh sách người nhận (bỏ thanh cuộn to bao ngoài) */
.msgr-compose--embed{overflow:hidden;display:flex;flex-direction:column}
.msgr-compose--embed .mce-form{flex:1;min-height:0;display:flex;flex-direction:column}
.msgr-compose--embed .pk-wrap{flex:1;min-height:0}
.msgr-compose--embed .pk-list{max-height:none;flex:1;min-height:0}

/* 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}
.cur-toggle{display:none}   /* nút gấp/mở CHỈ dùng ở khổ điện thoại (xem @media dưới) */
.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;margin-left:auto;margin-right:auto}
.cp-solo-foot{max-width:820px;margin:12px auto 0;position:relative;min-height:34px;display:flex;align-items:center;justify-content:center}
.cp-solo-foot .cp-upd{font-size:13px}
.cp-solo-foot .cp-open{position:absolute;right:0}
@media(max-width:640px){ .cp-solo-foot{flex-direction:column;gap:8px} .cp-solo-foot .cp-open{position:static} }
.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}
/* Chọn NHIỀU lớp áp dụng: nút trông như <select>, xổ ra danh sách tick */
.clspick{position:relative}
.clspick-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:var(--card);color:var(--ink);font:inherit;font-size:15px;text-align:left;cursor:pointer}
.clspick-btn:hover,.clspick-btn[aria-expanded="true"]{border-color:var(--green)}
.clspick-caret{color:var(--muted);flex:none}
.clspick-pop{position:absolute;z-index:40;top:calc(100% + 6px);left:0;right:0;max-height:340px;overflow:auto;background:var(--card);border:1px solid var(--border);border-radius:12px;box-shadow:0 12px 32px rgba(94,148,0,.18);padding:6px}
.clspick-opt{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;cursor:pointer;font-size:15px;color:var(--ink)}
.clspick-opt:hover{background:var(--green-l)}
.clspick-opt input{flex:none;width:17px;height:17px;accent-color:var(--green);margin:0}
.clspick-sep{height:1px;background:var(--border);margin:5px 8px}
.clspick-foot{display:flex;justify-content:space-between;gap:8px;padding:8px 6px 4px;border-top:1px solid var(--border);margin-top:5px;position:sticky;bottom:-6px;background:var(--card)}
.cls-many{margin:8px 0 0;padding:8px 12px;border-radius:10px;background:var(--green-l);border:1px solid var(--green);color:var(--green-d);font-size:13.5px}
@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}
  /* ĐIỆN THOẠI: lưới soạn quá rộng → đổi mỗi hoạt động thành 1 THẺ (icon · tên · xóa ở đầu thẻ, 5 ngày xếp dọc) */
  .curri-grid thead{display:none}
  .curri-grid,.curri-grid tbody{display:block}
  .curri-grid tr{display:grid;grid-template-columns:52px 1fr 82px;gap:8px;align-items:center;
    border:1px solid var(--border);border-radius:12px;padding:10px;margin-bottom:12px;background:#fff}
  .curri-grid tbody td{display:block;border:0;padding:0;min-width:0}
  .curri-grid td.cur-iconcell{grid-column:1;grid-row:1;width:auto}
  .curri-grid td:nth-child(2){grid-column:2;grid-row:1}
  .curri-grid td.rowdel{grid-column:3;grid-row:1;width:auto;display:flex;gap:6px;align-items:center}
  /* Gấp/mở từng hoạt động: hoạt động chưa có nội dung thì GẤP cho danh sách gọn, bấm ▾ để mở nhập */
  .curri-grid tr.cur-collapsed td[data-d]{display:none}
  .cur-toggle{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;
    border:1px solid var(--border);background:#faf7ef;border-radius:10px;cursor:pointer;font-size:13px;color:#5f6b52}
  .curri-grid tr.cur-collapsed .cur-toggle{transform:rotate(-90deg)}
  .curri-grid input.rowicon{width:46px;height:40px;font-size:22px;border:1px solid var(--border);border-radius:10px;background:#faf7ef}
  .curri-grid input.rowname{font-size:15px;padding:9px 10px;border:1px solid var(--border);border-radius:10px}
  .curri-grid .xbtn{width:36px;height:36px;font-size:15px}
  .curri-grid td[data-d]{grid-column:1/-1}
  .curri-grid td[data-d]::before{content:attr(data-d);display:block;font-size:12.5px;font-weight:700;color:#5f6b52;margin:0 0 3px 2px}
  .curri-grid td[data-d] textarea{font-size:14px;min-height:46px;padding:8px 10px;border:1px solid var(--border);border-radius:10px}
  .curri-grid input:focus,.curri-grid textarea:focus{border:1px solid var(--green);border-radius:10px;background:var(--green-l)}
}

/* 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)}
/* Bảng rộng trong app phụ huynh (vd Tăng trưởng 6 cột): cho cuộn ngang GỌN trong thẻ,
   KHÔNG để bảng đẩy tràn cả trang — trước đây làm mọi ô bị thu về bên trái, chừa trống bên phải */
.parent-main .pm-tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.parent-main .pm-tscroll table{margin:0}
@media(max-width:560px){
  .parent-main .panel table th,.parent-main .panel table td{padding:8px 7px}
}

/* 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}

/* Chuông thông báo trên header phụ huynh */
.parent-top .ptop-bell{position:relative;margin-left:auto;flex:0 0 auto;width:42px;height:42px;
  display:flex;align-items:center;justify-content:center;font-size:22px;text-decoration:none;border-radius:12px}
.parent-top .ptop-bell:active{background:#eef7ee}
.parent-top .ptop-bell .bdot{position:absolute;top:3px;right:2px;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}
.parent-top .ptop-bell + .ptop-switch{margin-left:0}
/* Cụm điều khiển góc phải: ngôn ngữ · chuông · đổi bé — dồn về phải, cách đều nhau */
.parent-top .ptop-actions{margin-left:auto;flex:0 0 auto;display:flex;align-items:center;gap:8px}
.parent-top .ptop-actions .ptop-switch{margin-left:0;max-width:120px}
.parent-top .ptop-lang{flex:0 0 auto}
.parent-top .ptop-lang a{padding:5px 8px;font-size:12px}
/* Chuông phụ huynh dùng lại kiểu .bellpick của app nhân sự; LUÔN hiện khối Đổi mật khẩu · Đăng xuất
   (mặc định .bell-account chỉ hiện trên điện thoại — ở cổng phụ huynh cần hiện mọi lúc). */
.parent-top .bellpick .bell-account{display:block}
.parent-top .ptop-bellpick>summary{width:42px;height:42px;border-radius:12px}
/* Thẻ danh tính phụ huynh ở đầu menu chuông (mục Tài khoản gộp vào chuông) */
.bellpick .bell-acct{display:flex;align-items:center;gap:10px;padding:8px 10px 10px;margin-bottom:4px;border-bottom:1px solid var(--border)}
.bellpick .bell-acct-av{flex:none;width:34px;height:34px;border-radius:999px;background:var(--green-l);display:flex;align-items:center;justify-content:center;font-size:18px}
.bellpick .bell-acct-info{min-width:0;line-height:1.25;display:flex;flex-direction:column}
.bellpick .bell-acct-info b{color:var(--green-d);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bellpick .bell-acct-info small{color:var(--muted);font-size:12px}
/* Chọn ngôn ngữ dạng THẢ XUỐNG (cờ ảnh SVG — hiện đúng cả Windows, nơi emoji cờ bị đổi thành VN/GB/JP).
   Chỉ hiện cờ ĐANG chọn; bấm để sổ danh sách cờ. */
.langpick{position:relative;flex:none}
.langpick>summary{display:inline-flex;align-items:center;gap:4px;cursor:pointer;list-style:none;
  padding:5px 7px;border:1px solid var(--border);border-radius:10px;background:#fff;user-select:none}
.langpick>summary::-webkit-details-marker{display:none}
.langpick>summary::marker{content:""}
.langpick>summary:hover{border-color:var(--green);background:var(--green-l)}
.langpick[open]>summary{border-color:var(--green);background:var(--green-l)}
.langpick .lang-caret{font-size:10px;color:var(--muted);line-height:1}
.langpick .langmenu{position:absolute;right:0;top:calc(100% + 6px);background:#fff;border:1px solid var(--border);
  border-radius:12px;box-shadow:var(--shadow);padding:6px;z-index:60;min-width:120px}
.langpick .langitem{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:9px;color:var(--ink);font-weight:600}
.langpick .langitem:hover{background:var(--green-l);text-decoration:none}
.langpick .langitem.on{background:var(--green-l);color:var(--green-d)}
.langpick .flagic{display:block;width:24px;height:16px;border-radius:3px;box-shadow:0 0 0 1px rgba(0,0,0,.12);object-fit:cover;flex:none}
/* trang chọn bé: nút 🔑 gọn cạnh dropdown */
.parent-top .phome-ic{flex:none;font-size:18px;text-decoration:none;padding:4px}

/* Danh sách thông báo (trang chuông) */
.notiflist{display:flex;flex-direction:column;gap:10px;margin:4px 0 18px}
.notif-item{display:flex;align-items:flex-start;gap:12px;padding:13px 14px;background:#fff;
  border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow);text-decoration:none;color:inherit}
.notif-item:active{background:#fafafa}
.notif-item .ni-ic{font-size:22px;line-height:1.2;flex:0 0 auto}
.notif-item .ni-main{min-width:0;flex:1}
.notif-item .ni-title{font-weight:700;color:var(--ink)}
.notif-item .ni-sub{font-size:13px;color:var(--muted);margin-top:2px}
.notif-item .ni-when{font-size:11.5px;color:var(--muted);white-space:nowrap;flex:0 0 auto}

/* 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;height:132px;box-sizing:border-box;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;height:100%;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:#e9efe2}
.collage .ctile.hid{display:none}   /* ảnh thứ 6 trở đi: giữ trong DOM để lightbox xem đủ, ẩn khỏi lưới */
.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}
.likebtn .lk-ic{font-size:18px;line-height:1;transition:transform .12s}
.likebtn.pop .lk-ic{animation:lkpop .32s ease}
@keyframes lkpop{0%{transform:scale(1)}40%{transform:scale(1.45)}100%{transform:scale(1)}}

/* 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,.morelist button{display:flex;align-items:center;gap:12px;padding:14px 16px;color:var(--ink);border-bottom:1px solid var(--border);font-weight:600}
.morelist button{width:100%;background:none;border-left:0;border-right:0;border-top:0;font:inherit;text-align:left;cursor:pointer}
.morelist a:last-child,.morelist button:last-child{border-bottom:0}
.morelist a:hover,.morelist button:hover{text-decoration:none;background:var(--green-l)}
.morelist a .mic,.morelist button .mic{font-size:20px;width:26px;text-align:center;flex:none}
.morelist a .chev,.morelist button .chev{margin-left:auto;color:var(--muted);font-size:18px}
.morelist a.danger,.morelist button.danger{color:var(--pink-d)}
/* nút logout (thay link GET bằng form POST) — reset nhẹ chrome mặc định, class riêng vẫn thắng nhờ :where */
:where(.logout-form) button{font:inherit;cursor:pointer;background:none;border:0;padding:0;margin:0;color:inherit}

/* ---------- 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{width:100%;height:100%;display:flex;align-items:center;justify-content:center;border-radius:50%;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;min-width:0;text-align:center;font-size:17px}  /* tên app vào giữa thanh */
  /* Cụm cờ + chuông LUÔN dính sát mép phải: margin-left:auto ghim cụm về phải kể cả khi
     tên app không nở hết (trước đây chuông bị lệch vào giữa vì chỉ dựa vào brand-word nở). */
  .langpick{margin-left:auto}
  .bellpick{margin-right:-2px}
  .langpick>summary{padding:8px 9px}
  .langpick>summary .lab{display:none}            /* chỉ còn cờ + mũi tên cho gọn */
  /* ĐIỆN THOẠI: BỎ HẲN thanh chip nhóm (Bé/Phụ huynh/Giáo viên/Nhà trường/Chat) khỏi MỌI trang.
     Mô hình "màn hình app": trang chủ = lưới ô chọn chức năng (home-appgrid, có cho CẢ Chủ tịch/Admin);
     vào chức năng nào chỉ thấy chức năng đó, muốn đổi thì "← Quay lại" → lưới ô → chọn ô khác.
     Máy tính (≥861px) vẫn giữ thanh chip + panel bung. */
  .topbar{flex-wrap:wrap;row-gap:8px}
  .groupnav{display:none}
  /* Panel icon-pill cấp 2: máy tính mới cần; điện thoại điều hướng qua lưới ô nên ẩn cho gọn. */
  .navpanels{display:none}
  /* 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ỗ. */
  /* Khi dải tab con nhiều dòng, "← Quay lại" + avatar căn LÊN TRÊN thay vì kẹt giữa cột tab. */
  .userctl{gap:8px 12px;padding-bottom:8px;flex-wrap:wrap;width:100%;min-width:0;justify-content:space-between;align-items:center}
  /* ĐIỆN THOẠI: BỎ HẲN dải tab con ngữ cảnh ở trang nội dung. Mô hình như màn hình app:
     mở ô nào chỉ xem nội dung ô đó; muốn mục khác thì "← Quay lại" → lưới ô trang chủ → chọn ô khác
     (lưới ô đã chứa ĐẦY ĐỦ mọi mục). Máy tính (≥861px) vẫn giữ dải tab con. */
  .userctl>.subtabs{display:none}
  .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,
  .userctl .acctmenu{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}

/* ── Thanh tab dưới cho GIÁO VIÊN ─────────────────────────────────────────────
   Chỉ hiện trên điện thoại (≤860px) — nơi đã ẩn chip nhóm & tab con. Máy tính giữ
   lưới ô + tab con nên ẩn thanh này. Chừa đáy để nội dung không bị thanh che. */
.teachernav{display:none}
@media(max-width:860px){
  body.has-teachernav main.container{padding-bottom:calc(72px + env(safe-area-inset-bottom))}
  .teachernav{position:fixed;left:0;right:0;bottom:0;z-index:45;display:flex;background:#fff;
    border-top:1px solid var(--border);box-shadow:0 -2px 14px rgba(22,50,79,.09);
    padding-bottom:env(safe-area-inset-bottom)}
  .teachernav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
    padding:9px 2px 8px;font-size:11px;font-weight:600;color:var(--muted);text-decoration:none;
    position:relative;min-height:56px;justify-content:center}
  .teachernav a:hover{text-decoration:none}
  .teachernav a .ic{font-size:23px;line-height:1;transition:transform .15s}
  .teachernav a.on{color:var(--green-d)}
  .teachernav a.on .ic{transform:translateY(-2px)}
  .teachernav .bdot{position:absolute;top:5px;left:calc(50% + 7px);min-width:17px;height:17px;
    padding:0 4px;border-radius:9px;background:var(--pink);color:#fff;font-size:10px;font-weight:700;
    display:flex;align-items:center;justify-content:center;line-height:1}
}

/* ===================================================================
   TÔ MÀU THẺ BÉ THEO GIỚI TÍNH  (con trai = xanh dương, con gái = hồng)
   Đặt class .g-boy / .g-girl lên phần tử bao (thẻ, hàng bảng, hero…).
   Class này khai báo biến màu → avatar & viền con tự ăn theo.
   Suy từ students.gender (Nam/Nữ); trống thì suy từ tên (lib/student-gender.js).
   =================================================================== */
.g-boy{
  --gc-bd:#3b82f6; --gc-bg:#eff6ff; --gc-ink:#1d4ed8; --gc-ring:#60a5fa; --gc-strong:#2563eb;
}
.g-girl{
  --gc-bd:#ec4899; --gc-bg:#fff1f6; --gc-ink:#be185d; --gc-ring:#f472b6; --gc-strong:#db2777;
}
/* Vòng màu quanh MỌI kiểu avatar bé (avatarTag .avatar + avatar tự vẽ .av/.pv/.fx-av/.ev-rav/.hb-av) */
.g-boy .avatar, .g-boy .av, .g-boy .pv, .g-boy .fx-av, .g-boy .ev-rav, .g-boy .hb-av, .g-boy .att-thumb-wrap,
.g-girl .avatar, .g-girl .av, .g-girl .pv, .g-girl .fx-av, .g-girl .ev-rav, .g-girl .hb-av, .g-girl .att-thumb-wrap{
  box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--gc-ring) !important;
}
/* Avatar chữ-cái (không có ảnh) nền nhạt theo giới tính cho dễ phân biệt */
.g-boy span.avatar:not(:has(img)), .g-boy .av:not(:has(img)){ background:var(--gc-strong); }
.g-girl span.avatar:not(:has(img)), .g-girl .av:not(:has(img)){ background:var(--gc-strong); }

/* --- Dạng THẺ (card/tile): nền + viền theo giới tính ---
   (ev-rcard KHÔNG đổi viền vì viền = trạng thái phiếu; chỉ tô vòng avatar) */
.att-card.g-boy, .k-person.g-boy, .fx-card.g-boy, .kid-card.g-boy, .parent-hero.g-boy,
.att-card.g-girl, .k-person.g-girl, .fx-card.g-girl, .kid-card.g-girl, .parent-hero.g-girl{
  background:var(--gc-bg); border-color:var(--gc-bd) !important;
}
.att-card.g-boy, .att-card.g-girl,
.fx-card.g-boy, .fx-card.g-girl,
.kid-card.g-boy, .kid-card.g-girl,
.k-person.g-boy, .k-person.g-girl{
  border-top:3px solid var(--gc-bd);
}
.ev-rcard.g-boy .ev-rname{ color:var(--gc-ink); }
.ev-rcard.g-girl .ev-rname{ color:var(--gc-ink); }

/* --- Dạng HÀNG BẢNG: dải màu trái + nền tint nhẹ + tên đậm màu --- */
tr.g-boy > td:first-child, tr.g-girl > td:first-child{ box-shadow:inset 4px 0 0 var(--gc-bd); }
tr.g-boy .c-name b, tr.g-boy .hb-name b, .ds-name.g-boy .ds-nm,
tr.g-girl .c-name b, tr.g-girl .hb-name b, .ds-name.g-girl .ds-nm{ color:var(--gc-ink); }
.ds-name.g-boy .ds-idx{ box-shadow:inset 3px 0 0 var(--gc-bd); }
.ds-name.g-girl .ds-idx{ box-shadow:inset 3px 0 0 var(--gc-bd); }
.stu-row.g-boy td.c-name, .stu-row.g-girl td.c-name{ background:var(--gc-bg); }

/* Chip tên bé ở thanh trên cùng của phụ huynh */
.parent-top.g-boy .ptop-name, .parent-top.g-girl .ptop-name{ color:var(--gc-ink); font-weight:700; }

/* Chấm nhỏ chú thích giới tính (dùng khi cần nhãn) */
.g-dot{display:inline-block;width:9px;height:9px;border-radius:50%;vertical-align:middle}
.g-dot.g-boy{background:#3b82f6}
.g-dot.g-girl{background:#ec4899}