/* Web mầm non Global Happy Kids — giao diện THEO LOGO GHK (chị dặn 26/10/2026 đêm: "dùng logo và màu sắc theo mầm non").
   Màu lấy từ logo: XANH DƯƠNG cá heo #314b97 · CAM chữ GHK #dc6a05. Xanh = nền / khung / chữ tiêu đề; cam = nút chính, tab đang chọn, điểm nhấn.
   (Trước đó: xanh ngọc riêng, rồi xanh ngọc + cam — thay bằng màu logo.) */
:root{
  --brand:#314b97; --brand2:#e8edf8; --brand-s:#3f5cb3; --xanh-dam:#1f3170;
  --cam:#dc6a05; --cam-nut:#c25c00; --cam-dam:#a34d00; --cam2:#fff1e2;   /* chữ trắng trên cam dùng --cam-nut (đậm hơn, dễ đọc) */
}
/* Đăng nhập: nền xanh logo, hộp trắng viền cam, logo đầy đủ */
#manDangNhap{background:radial-gradient(circle at 85% 15%,rgba(220,106,5,.35),transparent 45%),linear-gradient(150deg,#16245a,#314b97 60%,#3f5cb3)}
.login-box{border-top:5px solid var(--cam)}
.login-logo{display:block;width:100%;max-width:260px;height:auto;margin:0 auto 10px}
.login-box h2{color:var(--brand);text-align:center}
.login-box p.s{text-align:center}
/* Thanh trên: xanh logo + vạch cam, huy hiệu cá heo trong vòng trắng */
.topbar{background:linear-gradient(100deg,#16245a,#314b97 65%,#3f5cb3);border-bottom:3px solid var(--cam)}
.logo{color:#fff;display:flex;align-items:center;gap:10px}
.logo .huy-hieu{width:42px;height:42px;border-radius:50%;background:#fff;padding:3px;box-shadow:0 0 0 2px var(--cam);flex:none}
.logo .chu b{color:#ffb066}
.hbtn.active{background:var(--cam-nut);border-color:var(--cam-nut);color:#fff}
/* Tab */
.tabbar{flex-wrap:nowrap}
.tab.active{background:var(--bg);color:var(--brand);box-shadow:inset 0 3px 0 var(--cam)}
.tabbar-con{margin-top:0;padding:6px 0 8px;gap:6px}
.tabbar-con .tab{border-radius:99px;padding:6px 14px;font-size:12.5px;background:rgba(255,255,255,.12)}
.tabbar-con .tab.active{background:var(--cam-nut);color:#fff;box-shadow:none}
.subtab.active{background:var(--cam-nut);border-color:var(--cam-nut);color:#fff}
/* Nút, ô số, thẻ */
.btn{background:var(--cam-nut)}
.btn:hover{background:var(--cam-dam);filter:none}
.btn.ghost{background:#fff}
.btn.ok{background:var(--ok)}.btn.bad{background:var(--bad)}
.kpi.brand{background:linear-gradient(125deg,#1f3170,#314b97 65%,#dc6a05 150%)}
.card-h h3{color:var(--xanh-dam)}
.note{color:#22346e}
.note.y{background:var(--cam2);border-color:var(--cam);color:#7a3d00}
@media(max-width:640px){
  .topbar{padding:10px 12px 0}
  .wrap{padding:14px 12px 60px}
  .tab{padding:9px 11px;font-size:13px}
  .logo .huy-hieu{width:36px;height:36px}
}
.hs-the{display:flex;gap:6px;flex-wrap:wrap}
.tien-o{font-variant-numeric:tabular-nums}
/* Biểu đồ 12 tháng: điện thoại cuộn ngang trong khung, không đẩy cả trang */
.chart{overflow-x:auto}
/* 👥 Nhân sự: khung nhúng trang quản lý nhân sự mầm non (26/10/2026) */
.ns-khung{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}
.ns-thanh{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 12px;border-bottom:3px solid var(--cam);background:var(--brand2)}
.ns-thanh .sub{font-size:12.5px;color:var(--xanh-dam);font-weight:600}
#nsKhung{display:block;width:100%;height:calc(100vh - 185px);min-height:560px;border:0;background:#fff}
@media(max-width:640px){#nsKhung{height:calc(100vh - 160px)}}