:root {
  --pri: #1f55c0; --pri-d: #17418f; --pri-l: #e4edfc; --acc: #d62839; --acc-d: #b01e2d;
  --bg: #f2f5fb; --card: #fff; --txt: #1b2733; --mut: #64748b; --line: #dde4ea;
  --ok: #15803d; --ok-l: #dcfce7; --warn: #b45309; --warn-l: #fef3c7; --bad: #c81e2f; --bad-l: #fde8ea;
  --side: #0f2a5c; --r: 10px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 15px/1.5 var(--font); color: var(--txt); background: var(--bg); }
h1, h2, h3 { line-height: 1.25; margin: 0; }
h1 { font-size: 22px; } h2 { font-size: 18px; } h3 { font-size: 16px; }
a { color: var(--pri); }
.boot { padding: 40px 20px; text-align: center; color: var(--mut); }
.muted { color: var(--mut); } .small { font-size: 13px; }
.right { margin-left: auto; }
.hide { display: none !important; }

/* Form */
label { display: block; font-weight: 600; font-size: 14px; margin: 0 0 4px; }
input[type=text], input[type=password], input[type=email], input[type=search], input[type=file], select, textarea {
  width: 100%; min-height: 44px; padding: 9px 12px; font: inherit; font-size: 16px; color: inherit;
  border: 1px solid #c3ced8; border-radius: 8px; background: #fff;
}
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible { outline: 3px solid #8fb2f0; outline-offset: 1px; }
.field { margin-bottom: 14px; }
.hint { font-size: 13px; color: var(--mut); margin-top: 4px; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.row > .field { flex: 1 1 180px; margin-bottom: 0; }
.pw { position: relative; } .pw input { padding-right: 70px; }
.pw button { position: absolute; right: 4px; top: 4px; min-height: 36px; padding: 0 10px; border: 0; background: none; color: var(--pri); font-weight: 600; cursor: pointer; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 8px 16px;
  font: inherit; font-weight: 600; border-radius: 8px; border: 1px solid #b6c4cf; background: #fff; color: var(--txt);
  cursor: pointer; text-decoration: none; white-space: nowrap;
}
.btn:hover { background: #f1f5f8; }
.btn.pri { background: var(--pri); border-color: var(--pri); color: #fff; } .btn.pri:hover { background: var(--pri-d); }
.btn.bad { color: var(--bad); border-color: #eaa9b0; } .btn.bad:hover { background: var(--bad-l); }
.btn.sm { min-height: 36px; padding: 4px 12px; font-size: 14px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btns { display: flex; gap: 8px; flex-wrap: wrap; }

/* Cards, badges */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; }
.card + .card { margin-top: 12px; }
.dot h3 { border-left: 4px solid var(--acc); padding-left: 10px; }
.badge { display: inline-block; padding: 2px 10px; border-radius: 99px; font-size: 13px; font-weight: 600; background: #e5eaee; color: #475569; white-space: nowrap; }
.badge.green { background: var(--ok-l); color: var(--ok); } .badge.amber { background: var(--warn-l); color: var(--warn); } .badge.red { background: var(--bad-l); color: var(--bad); } .badge.blue { background: var(--pri-l); color: var(--pri-d); }
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.chip { padding: 6px 12px; border-radius: 8px; background: #eef2f5; font-size: 14px; }
.chip b { font-size: 18px; margin-right: 4px; }
.chip.red { background: var(--bad-l); color: var(--bad); } .chip.green { background: var(--ok-l); } .chip.amber { background: var(--warn-l); } .chip.gray { background: #e5eaee; }
.alert { padding: 10px 14px; border-radius: 8px; margin: 10px 0; font-size: 14px; }
.alert.err { background: var(--bad-l); color: #7f1d1d; } .alert.warn { background: var(--warn-l); color: #78350f; } .alert.ok { background: var(--ok-l); color: #14532d; }
.alert ul { margin: 4px 0 0; padding-left: 20px; } .alert p { margin: 0; }

/* Login / center card */
.center { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.auth { width: 100%; max-width: 400px; }
.auth h1 { color: var(--pri-d); text-align: center; margin-bottom: 4px; }
.auth h1::after { content: ''; display: block; width: 56px; height: 4px; border-radius: 2px; background: var(--acc); margin: 8px auto 0; }
.auth .sub { text-align: center; color: var(--mut); margin-bottom: 18px; }
.auth .links { text-align: center; margin-top: 14px; }

/* Shell: sidebar on desktop, bottom bar on mobile */
.shell { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 100vh; }
.side { background: var(--side); color: #dbe6fb; padding: 18px 12px; position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 6px; }
.side .brand { color: #fff; font-weight: 700; font-size: 16px; padding: 4px 10px 12px; margin-bottom: 8px; line-height: 1.3; border-bottom: 3px solid var(--acc); }
.side .who { margin-top: auto; padding: 10px; font-size: 13px; color: #a9bde6; word-break: break-all; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 8px; color: #dbe6fb; text-decoration: none; font-weight: 600; min-height: 44px; }
.nav a:hover { background: rgba(255,255,255,.08); }
.nav a.on { background: var(--pri); color: #fff; box-shadow: inset 4px 0 0 var(--acc); }
.nav svg { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.main { padding: 24px 28px 40px; max-width: 1180px; width: 100%; }
.head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.head h1 { margin-right: auto; }
.toolbar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; align-items: flex-end; }
.toolbar .field { flex: 1 1 200px; margin: 0; }

/* Parent layout */
.ptop { background: var(--side); border-bottom: 3px solid var(--acc); color: #fff; padding: 10px 16px; display: flex; align-items: center; gap: 12px; position: sticky; top: 0; z-index: 10; }
.ptop b { font-size: 16px; margin-right: auto; line-height: 1.3; }
.ptop a { color: #fff; font-weight: 600; text-decoration: none; padding: 8px 10px; border-radius: 8px; }
.ptop a:hover { background: rgba(255,255,255,.12); }
.pshell { min-height: 100vh; display: flex; flex-direction: column; }
.pshell .ptop { order: 0; } .pshell .ptabs { order: 1; } .pshell .pmain { order: 2; width: 100%; flex: 1; }
.pmain { max-width: 760px; margin: 0 auto; padding: 18px 16px 40px; }
/* Thanh tab phụ huynh: tab ngang trên máy tính, thanh icon dưới đáy trên điện thoại */
.ptabs { display: flex; justify-content: center; gap: 4px; background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: 51px; z-index: 9; padding: 0 8px; }
.ptabs a { display: flex; align-items: center; gap: 8px; padding: 12px 18px; color: var(--mut); text-decoration: none; font-weight: 600; border-bottom: 3px solid transparent; min-height: 48px; }
.ptabs a:hover { color: var(--pri-d); background: var(--pri-l); }
.ptabs a.on { color: var(--pri-d); border-bottom-color: var(--acc); }
.ptabs svg { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Tables */
.tw { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: #fff; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; }
th, td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; }
th { background: #eaf0fa; font-size: 13px; text-transform: none; color: #3b4a58; white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: center; }
.grid th, .grid td { white-space: nowrap; } .grid td.num { min-width: 64px; }
.grid th:first-child, .grid td:first-child { position: sticky; left: 0; background: #fff; z-index: 1; box-shadow: 1px 0 0 var(--line); }
.grid th:first-child { background: #eaf0fa; }
.pager { display: flex; gap: 10px; align-items: center; justify-content: center; margin-top: 14px; color: var(--mut); }

/* Góp ý, Info, Phản hồi */
.stars { display: flex; gap: 6px; }
.star { border: 0; background: none; font-size: 40px; line-height: 1; padding: 2px 4px; cursor: pointer; color: #cbd5e1; min-height: 48px; min-width: 48px; border-radius: 8px; }
.star:hover { background: var(--pri-l); }
.star.on { color: #f59e0b; }
.sao-label { margin-top: 4px; font-weight: 600; }
.stars-ro { color: #f59e0b; letter-spacing: 1px; white-space: nowrap; }
textarea { width: 100%; padding: 10px 12px; font: inherit; font-size: 16px; border: 1px solid #c3ced8; border-radius: 8px; background: #fff; resize: vertical; }
.check { display: flex; align-items: center; gap: 10px; font-weight: 600; cursor: pointer; min-height: 44px; }
.check input { width: 22px; height: 22px; accent-color: var(--acc); flex: none; }
.callback { background: #fff5f6; border: 1px solid #f3c1c7; border-radius: 10px; padding: 4px 12px 12px; }
.fb + .fb { margin-top: 10px; }
.irow { display: flex; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.irow:last-child { border-bottom: 0; }
.irow .k { flex: 0 0 150px; color: var(--mut); font-size: 14px; padding-top: 1px; }
.irow .v { flex: 1; min-width: 0; word-break: break-word; }
.info-school { border-left: 5px solid var(--acc); }
.clip { max-width: 360px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-wrap; }
.nav a em.cnt { margin-left: auto; font-style: normal; background: var(--acc); color: #fff; border-radius: 99px; font-size: 12px; padding: 1px 8px; font-weight: 700; }

/* Chọn học sinh (phụ huynh nhiều con) */
.kids { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.kid { display: flex; align-items: center; gap: 14px; padding: 16px; background: #fff; border: 1px solid var(--line); border-left: 5px solid var(--acc); border-radius: var(--r); text-decoration: none; color: var(--txt); min-height: 72px; }
.kid:hover { border-color: var(--pri); border-left-color: var(--acc); background: var(--pri-l); }
.kid .av { width: 44px; height: 44px; flex: none; border-radius: 50%; background: var(--pri); color: #fff; font-weight: 700; font-size: 20px; display: flex; align-items: center; justify-content: center; }
.kid .nm { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.kid .nm b { font-size: 17px; color: var(--pri-d); }
.kid .nm small { color: var(--mut); font-size: 13px; }
.kid .go { font-size: 28px; color: var(--acc); line-height: 1; }
/* Nhiều email trong form học sinh */
.erow { display: flex; gap: 8px; margin-bottom: 8px; }
.erow input { flex: 1; }
.erow .btn { min-height: 44px; }

/* Score cards (parent) */
.dot { margin-bottom: 14px; } .dot h3 { margin-bottom: 8px; }
.score { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); gap: 12px; }
.score:last-child { border-bottom: 0; }
.score b { font-size: 18px; color: var(--pri-d); }
.pills { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.pill { padding: 8px 14px; border-radius: 99px; border: 1px solid #b6c4cf; background: #fff; font: inherit; font-weight: 600; cursor: pointer; min-height: 40px; }
.pill.on { background: var(--pri); border-color: var(--pri); color: #fff; }

/* Grade-period cards */
.dots { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.dots .card + .card { margin-top: 0; }
.dots h3 { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; }
.dots .meta { color: var(--mut); font-size: 14px; margin-bottom: 12px; min-height: 42px; }
.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.stat b { display: block; font-size: 28px; color: var(--pri-d); }
.stat span { color: var(--mut); font-size: 14px; }

/* Modal */
.ov { position: fixed; inset: 0; background: rgba(15,30,40,.5); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 16px; }
.modal { background: #fff; border-radius: 12px; width: 100%; max-width: 560px; max-height: calc(100vh - 32px); display: flex; flex-direction: column; box-shadow: 0 20px 50px rgba(0,0,0,.3); }
.modal.wide { max-width: 860px; }
.modal header { display: flex; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.modal header h2 { margin-right: auto; }
.modal .x { border: 0; background: none; font-size: 26px; line-height: 1; padding: 4px 10px; cursor: pointer; color: var(--mut); min-height: 40px; }
.modal .body { padding: 16px 18px; overflow-y: auto; }
.modal footer { padding: 12px 18px; border-top: 1px solid var(--line); display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }

#toasts { position: fixed; left: 50%; transform: translateX(-50%); bottom: 24px; z-index: 80; display: flex; flex-direction: column; gap: 8px; width: calc(100% - 32px); max-width: 420px; pointer-events: none; }
.toast { background: #12295c; color: #fff; padding: 12px 16px; border-radius: 10px; box-shadow: 0 6px 20px rgba(0,0,0,.25); font-size: 15px; }
.toast.err { background: #b01e2d; } .toast.ok { background: #166534; }
.spin { display: inline-block; width: 18px; height: 18px; border: 3px solid #cddcf6; border-top-color: var(--pri); border-radius: 50%; animation: sp .8s linear infinite; vertical-align: -3px; margin-right: 8px; }
@keyframes sp { to { transform: rotate(360deg); } }
.loading { padding: 40px; text-align: center; color: var(--mut); }
.empty { padding: 32px 16px; text-align: center; color: var(--mut); }

/* ---------- Mobile ---------- */
@media (max-width: 860px) {
  .shell { display: block; }
  .side { position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; top: auto; height: auto; padding: 0 0 env(safe-area-inset-bottom); flex-direction: row; border-top: 1px solid rgba(255,255,255,.15); }
  .side .brand, .side .who { display: none; }
  .nav { flex-direction: row; width: 100%; gap: 0; }
  .nav a { flex: 1; flex-direction: column; gap: 2px; padding: 7px 2px 6px; border-radius: 0; font-size: 11px; text-align: center; min-height: 54px; }
  .nav a.on { background: rgba(255,255,255,.14); color: #fff; box-shadow: inset 0 3px 0 var(--acc); }
  .main { padding: 16px 14px calc(84px + env(safe-area-inset-bottom)); }
  .nav a { position: relative; }
  .nav a em.cnt { position: absolute; top: 3px; left: 55%; margin: 0; font-size: 10px; padding: 0 5px; }
  .pshell .ptabs { order: 3; position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 30; padding: 0 0 env(safe-area-inset-bottom); border-top: 1px solid var(--line); border-bottom: 0; gap: 0; box-shadow: 0 -2px 10px rgba(15,42,92,.08); }
  .ptabs a { flex: 1; flex-direction: column; gap: 2px; padding: 7px 2px 6px; font-size: 11px; text-align: center; min-height: 56px; border-bottom: 0; border-top: 3px solid transparent; justify-content: center; }
  .pshell .ptabs { background: var(--side); border-top: 1px solid rgba(255,255,255,.15); box-shadow: none; }
  .ptabs a { color: #dbe6fb; } .ptabs a:hover { color: #fff; background: rgba(255,255,255,.08); }
  .ptabs a.on { color: #fff; border-top-color: var(--acc); background: rgba(255,255,255,.14); }
  .pmain { padding-bottom: calc(86px + env(safe-area-inset-bottom)); }
  .irow { flex-direction: column; gap: 2px; } .irow .k { flex: none; }
  .clip { max-width: none; text-align: left; }
  .star { font-size: 36px; }
  h1 { font-size: 20px; }
  .head .btn { flex: 1 1 auto; }
  .modal-ov, .ov { align-items: flex-end; padding: 0; }
  .modal, .modal.wide { max-width: none; border-radius: 16px 16px 0 0; max-height: 92vh; }
  .modal footer .btn { flex: 1 1 auto; }
  #toasts { bottom: calc(76px + env(safe-area-inset-bottom)); }

  /* Danh sách dạng thẻ trên điện thoại */
  table.tbl, table.tbl tbody, table.tbl tr, table.tbl td { display: block; width: 100%; }
  table.tbl thead { display: none; }
  table.tbl tr { border-bottom: 1px solid var(--line); padding: 10px 12px; }
  table.tbl tr:last-child { border-bottom: 0; }
  table.tbl td { border: 0; padding: 3px 0; display: flex; gap: 12px; justify-content: space-between; align-items: flex-start; text-align: right; }
  table.tbl td::before { content: attr(data-label); color: var(--mut); font-size: 13px; font-weight: 600; text-align: left; flex: none; padding-top: 2px; }
  table.tbl td.act { justify-content: flex-start; flex-wrap: wrap; padding-top: 8px; }
  table.tbl td.act::before { display: none; }
}
@media print { .side, .ptop, .ptabs, .btns, .toolbar { display: none !important; } .shell { display: block; } }
.erows { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0 12px; }
.erows .field { margin-bottom: 10px; }
a[href^="tel:"] { white-space: nowrap; }

/* v10: vai trò, bộ phận, chuyển xử lý */
body.ro .wr { display: none !important; }
.chk { display: flex; align-items: center; gap: 10px; padding: 9px 4px; min-height: 44px; cursor: pointer; border-bottom: 1px solid var(--line, #e3e8f2); }
.chk input { width: 20px; height: 20px; flex: none; }
.chklist { max-height: 260px; overflow: auto; border: 1px solid var(--line, #e3e8f2); border-radius: 8px; padding: 2px 10px; }
.crow { padding: 8px 0; border-bottom: 1px solid var(--line, #e3e8f2); }
.crow:last-child { border-bottom: 0; }
.card.flat { box-shadow: none; background: #f6f8fd; }
.pill.tag { display: inline-flex; align-items: center; gap: 6px; cursor: default; }
.pill.tag .x { border: 0; background: none; cursor: pointer; font-size: 15px; color: inherit; min-width: 28px; min-height: 28px; }

/* v11: Tổng quan trực quan */
.dash .card { margin: 0; }
.dash > * + * { margin-top: 14px; }
.hero { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 18px 20px; border-radius: 14px; color: #fff; background: linear-gradient(120deg, var(--side) 0%, var(--pri) 70%, #3b78e0 100%); position: relative; overflow: hidden; }
.hero::after { content: ""; position: absolute; right: -40px; top: -40px; width: 180px; height: 180px; border-radius: 50%; background: rgba(214,40,57,.35); }
.hero > div { margin-right: auto; position: relative; z-index: 1; }
.hero h1 { font-size: 22px; } .hero p { margin: 4px 0 0; color: #dbe6fb; font-size: 14px; }
.live { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; background: rgba(255,255,255,.16); padding: 4px 12px; border-radius: 99px; }
.live i { width: 8px; height: 8px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 0 rgba(74,222,128,.7); animation: pulse 2s infinite; }
.live.off i { background: #fbbf24; animation: none; }
@keyframes pulse { 70% { box-shadow: 0 0 0 7px rgba(74,222,128,0); } 100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); } }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.kpi { display: flex; flex-direction: column; gap: 2px; padding: 16px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); border-left: 5px solid var(--pri); color: inherit; text-decoration: none; transition: transform .12s, box-shadow .12s; }
a.kpi:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(15,42,92,.12); }
.kpi .kl { color: var(--mut); font-size: 13px; font-weight: 600; }
.kpi .kv { font-size: 32px; line-height: 1.15; color: var(--pri-d); }
.kpi .ks { color: var(--mut); font-size: 13px; }
.kpi.amber { border-left-color: #f59e0b; } .kpi.amber .kv { color: var(--warn); }
.kpi.red { border-left-color: var(--acc); background: #fff7f8; } .kpi.red .kv { color: var(--acc-d); }
.kpi.ok { border-left-color: #16a34a; } .kpi.ok .kv { color: var(--ok); }
.kpi.blue { border-left-color: var(--pri); }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.dash h3 { margin-bottom: 10px; }
.dist { display: flex; flex-direction: column; gap: 9px; }
.drow, .trow { display: grid; grid-template-columns: 38px minmax(0, 1fr) 84px; align-items: center; gap: 10px; font-size: 14px; }
.trow { grid-template-columns: minmax(64px, 120px) minmax(0, 1fr) auto; }
.grid2 > .card, .dash .card { min-width: 0; }
.ds { color: #d97706; font-weight: 700; } .tn { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dn { color: var(--mut); font-size: 13px; text-align: right; white-space: nowrap; }
.dbar { height: 12px; background: #eaeff6; border-radius: 99px; overflow: hidden; display: flex; }
.dbar i { display: block; height: 100%; min-width: 0; transition: width .5s; }
.dbar i.s5 { background: #16a34a; } .dbar i.s4 { background: #65a30d; } .dbar i.s3 { background: #f59e0b; } .dbar i.s2 { background: #ea580c; } .dbar i.s1 { background: var(--acc); }
.dbar i.wait { background: #f59e0b; } .dbar i.done { background: #16a34a; }
.sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin: 0 4px 0 0; vertical-align: -1px; } .sw.wait { background: #f59e0b; } .sw.done { background: #16a34a; margin-left: 10px; }
.chart { width: 100%; height: auto; display: block; }
.chart .axis { stroke: var(--line); } .chart .bar { fill: #7fa3e8; } .chart .bar.today { fill: var(--pri); }
.chart text { font-family: var(--font); } .chart .val { font-size: 12px; font-weight: 700; fill: var(--pri-d); } .chart .lbl { font-size: 11px; fill: var(--mut); }
.recent { display: flex; flex-direction: column; }
.ritem { display: flex; align-items: center; gap: 10px; padding: 9px 4px; border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; }
.ritem:last-child { border-bottom: 0; } .ritem:hover { background: var(--pri-l); }
.rbody { flex: 1; min-width: 0; } .rtext { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.mini div { background: #f4f7fc; border-radius: 10px; padding: 10px 12px; } .mini b { display: block; font-size: 24px; color: var(--pri-d); } .mini span { color: var(--mut); font-size: 13px; }
.card.publisher { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; background: linear-gradient(180deg, #fff, #f2f6fe); }
.pubname { font-size: 22px; letter-spacing: .5px; color: var(--pri-d); } .pubname::first-letter { color: var(--acc); }

/* v11: giao diện phụ huynh trên máy tính dùng sidebar như tài khoản nhà trường */
.ptabs .brand, .ptabs .who { display: none; }
@media (min-width: 861px) {
  .pshell { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 100vh; }
  .pshell .ptop { display: none; }
  .pshell .ptabs { grid-column: 1; grid-row: 1; position: sticky; top: 0; height: 100vh; flex-direction: column; justify-content: flex-start; align-items: stretch; gap: 2px; background: var(--side); border: 0; padding: 18px 12px; z-index: 5; }
  .pshell .ptabs .brand { display: block; color: #fff; font-weight: 700; font-size: 16px; padding: 4px 10px 12px; margin-bottom: 8px; line-height: 1.3; border-bottom: 3px solid var(--acc); }
  .pshell .ptabs .who { display: block; margin-top: auto; padding: 10px; font-size: 13px; color: #a9bde6; word-break: break-all; }
  .pshell .ptabs a { color: #dbe6fb; border-radius: 8px; border-bottom: 0; padding: 10px; min-height: 44px; }
  .pshell .ptabs a:hover { background: rgba(255,255,255,.08); color: #fff; }
  .pshell .ptabs a.on { background: var(--pri); color: #fff; box-shadow: inset 4px 0 0 var(--acc); }
  .pshell .pmain { grid-column: 2; grid-row: 1; max-width: 960px; margin: 0; padding: 24px 28px 40px; }
}
@media (max-width: 860px) {
  .grid2 { grid-template-columns: 1fr; }
  .hero { padding: 14px 16px; } .hero h1 { font-size: 19px; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kpi { padding: 12px; } .kpi .kv { font-size: 26px; }
  .nav a { font-size: 10px; } .nav a span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) { .live i { animation: none; } .dbar i, a.kpi { transition: none; } }

/* v13: Thông báo, banner, Home phụ huynh */
.ttl { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .ttl h1 { font-size: 21px; }
a.tb { display: flex; gap: 12px; padding: 12px; margin-bottom: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; color: inherit; text-decoration: none; transition: box-shadow .12s, transform .12s; }
a.tb:hover { box-shadow: 0 6px 16px rgba(15,42,92,.1); transform: translateY(-1px); }
a.tb.new { border-left: 5px solid var(--acc); background: #fffafa; }
.tth { width: 84px; height: 84px; flex: none; border-radius: 10px; object-fit: cover; background: var(--pri-l); }
.tth.ph { display: flex; align-items: center; justify-content: center; color: var(--pri); } .tth.ph svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tbody { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; }
.tprev { color: #3b4a5a; font-size: 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
.tcontent { white-space: pre-wrap; word-break: break-word; line-height: 1.65; }
.gal { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; margin-top: 14px; }
.gal .g { border: 0; padding: 0; background: #eef2f8; border-radius: 10px; overflow: hidden; cursor: zoom-in; aspect-ratio: 4/3; }
.gal .g img { width: 100%; height: 100%; object-fit: cover; display: block; }
img.lb { display: block; max-width: 100%; max-height: 70vh; margin: 0 auto; border-radius: 8px; }
.files { display: flex; flex-direction: column; gap: 6px; }
a.file { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; color: inherit; text-decoration: none; background: #f8faff; }
a.file:hover { background: var(--pri-l); } a.file svg { width: 22px; height: 22px; flex: none; fill: none; stroke: var(--pri); stroke-width: 1.7; } a.file span { flex: 1; min-width: 0; word-break: break-all; font-weight: 600; }
.thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.th { position: relative; width: 84px; height: 84px; border-radius: 8px; overflow: hidden; background: #eef2f8; } .th img { width: 100%; height: 100%; object-fit: cover; display: block; } .th.off img { opacity: .25; }
.th button { position: absolute; top: 3px; right: 3px; width: 26px; height: 26px; border: 0; border-radius: 50%; background: rgba(15,42,92,.85); color: #fff; font-size: 16px; line-height: 1; cursor: pointer; }
.flist { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; } .fr { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; } .fr span { flex: 1; min-width: 0; word-break: break-all; font-size: 14px; } .fr.off span { text-decoration: line-through; opacity: .5; }
.radios { display: flex; gap: 18px; flex-wrap: wrap; } .chk.slim { min-height: 36px; padding: 4px 4px; border-bottom: 0; }
.chklist.cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0 10px; }
.blist { display: flex; flex-direction: column; gap: 10px; }
.brow { display: flex; gap: 12px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; align-items: flex-start; }
.brow img { width: 150px; aspect-ratio: 3/1; object-fit: cover; border-radius: 8px; flex: none; background: #eef2f8; } .bctl { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.banner { position: relative; border-radius: 14px; overflow: hidden; background: #dfe8f8; width: 100%; height: 160px; transition: height .3s; }
.banner .sl { position: absolute; inset: 0; opacity: 0; transition: opacity .6s; display: block; pointer-events: none; } .banner .sl.on { opacity: 1; pointer-events: auto; }
.banner img { width: 100%; height: 100%; object-fit: contain; display: block; }
.bdots { position: absolute; left: 0; right: 0; bottom: 8px; display: flex; justify-content: center; gap: 6px; }
.bdots button { width: 9px; height: 9px; padding: 0; border-radius: 50%; border: 0; background: rgba(255,255,255,.6); cursor: pointer; box-shadow: 0 0 0 1px rgba(15,42,92,.25); } .bdots button.on { background: #fff; width: 22px; border-radius: 6px; }
.kv.sm { font-size: 22px; line-height: 1.4; }
.kids { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
a.kid2 { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 12px; background: linear-gradient(135deg, var(--pri-l), #fff); border: 1px solid #c9d9f5; color: inherit; text-decoration: none; } a.kid2:hover { border-color: var(--pri); } a.kid2 b { color: var(--pri-d); } a.kid2 .go { color: var(--acc-d); font-weight: 600; font-size: 13px; margin-top: 4px; }
.rth { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; flex: none; }
.ptabs a { position: relative; }
.ptabs a em.cnt { margin-left: auto; font-style: normal; background: var(--acc); color: #fff; border-radius: 99px; font-size: 12px; padding: 1px 8px; font-weight: 700; }
@media (max-width: 860px) {
  .ptabs a em.cnt { position: absolute; top: 3px; left: 55%; margin: 0; font-size: 10px; padding: 0 5px; }
  .nav { overflow-x: auto; scrollbar-width: none; } .nav::-webkit-scrollbar { display: none; }
  .nav a { flex: 1 0 auto; min-width: 58px; }
  .tth { width: 64px; height: 64px; } .brow { flex-direction: column; } .brow img { width: 100%; }
  .banner { border-radius: 10px; }
}

/* v14 */
.publogo { max-width: 200px; max-height: 80px; width: auto; height: auto; object-fit: contain; display: block; margin: 4px 0; }
.pubcontact { margin-top: 6px; font-size: 15px; }
.article .tcontent { margin: 0 0 12px; }
.article .inl { display: block; border: 0; padding: 0; background: none; margin: 4px 0 14px; cursor: zoom-in; max-width: 100%; }
.article .inl img { display: block; max-width: 100%; height: auto; border-radius: 10px; }
.bed { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.bed textarea.bt { min-height: 70px; resize: none; overflow: hidden; }
.bimg { position: relative; align-self: flex-start; max-width: 100%; }
.bimg img { display: block; max-width: 100%; max-height: 260px; border-radius: 8px; border: 1px solid var(--line); }
.bimg button { position: absolute; top: 6px; right: 6px; width: 30px; height: 30px; border-radius: 50%; border: 0; background: rgba(15,23,42,.75); color: #fff; font-size: 18px; line-height: 1; cursor: pointer; }
/* Trang Nhân sự: chữ nhỏ gọn hơn */
.nsx { font-size: 14px; }
.nsx h1 { font-size: 20px; } .nsx h2 { font-size: 17px; } .nsx h3 { font-size: 15px; }
.nsx th, .nsx td { padding: 6px 10px; font-size: 13px; }
.nsx .small, .nsx .muted.small { font-size: 12px; }
.nsx .btn.sm { font-size: 12.5px; padding: 4px 9px; min-height: 32px; }
.nsx .badge { font-size: 11.5px; }
.nsx .card { padding: 10px 14px; }

/* v15: gọn hơn */
a.tb { padding: 8px 12px; margin-bottom: 6px; align-items: center; gap: 10px; border-radius: 10px; }
.tth, .tth.ph { width: 34px; height: 34px; border-radius: 8px; }
.tth.ph svg { width: 20px; height: 20px; }
a.tb .tbody { min-width: 0; } a.tb .ttl { font-size: 15px; } a.tb .muted.small { font-size: 12px; margin-top: 1px; }
.article .inl { max-width: min(100%, 380px); margin: 4px auto 14px; } .article .inl img { max-height: 300px; width: auto; margin: 0 auto; }
.bimg img { max-width: min(100%, 220px); max-height: 150px; }

.chip.btn-chip { border: 2px solid transparent; font: inherit; font-size: 14px; cursor: pointer; color: inherit; min-height: 40px; }
.chip.btn-chip:hover { filter: brightness(.96); } .chip.btn-chip.on { border-color: var(--pri); box-shadow: 0 0 0 2px var(--pri-l); font-weight: 700; }

.nhom { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 8px; }
.nhom .ng { font-size: 12px; padding: 2px 8px; border-radius: 99px; background: #e5eaee; color: #475569; white-space: nowrap; }
.nhom .ng.ok { background: var(--ok-l); color: var(--ok); font-weight: 600; } .nhom .ng.part { background: var(--warn-l); color: var(--warn); }

/* v19: thương hiệu, công tắc công bố, thẻ đợt điểm */
.brand .bn { display: block; color: #fbbf24; font-size: 20px; letter-spacing: .2px; line-height: 1.2; }
.brand small { display: block; color: #fff; font-size: 12px; font-weight: 400; margin-top: 2px; opacity: .92; }
a.kycard { display: block; color: inherit; text-decoration: none; transition: box-shadow .12s, transform .12s; }
a.kycard:hover { box-shadow: 0 6px 18px rgba(15,42,92,.12); transform: translateY(-1px); }
a.kycard .go { color: var(--pri); font-weight: 700; font-size: 14px; }
.sw { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 600; font-size: 13px; user-select: none; }
.sw input { position: absolute; opacity: 0; width: 0; height: 0; }
.sw i { position: relative; width: 40px; height: 22px; border-radius: 99px; background: #cbd5e1; transition: background .15s; flex: none; }
.sw i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .15s; }
.sw input:checked + i { background: #16a34a; } .sw input:checked + i::after { transform: translateX(18px); }
.sw input:focus-visible + i { outline: 3px solid var(--pri-l); outline-offset: 2px; }
.sw .swt { min-width: 74px; color: var(--mut); } .sw input:checked ~ .swt { color: var(--ok); }

/* v20: đăng nhập, bánh răng trên header phụ huynh (di động) */
.lbrand { background: var(--side); border-bottom: 4px solid var(--acc); border-radius: 14px; padding: 20px 16px; text-align: center; margin-bottom: 18px; }
.lbrand b { display: block; color: #fbbf24; font-size: 30px; line-height: 1.15; letter-spacing: .3px; }
.lbrand small { display: block; color: #fff; font-size: 15px; margin-top: 4px; }
.ptop .pgear { display: flex; padding: 6px; line-height: 0; }
.ptop .pgear svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ptop .pgear.on { background: rgba(255,255,255,.18); }
@media (max-width: 860px) { .ptabs a.tab-cd { display: none; } }

/* v26: góp ý công khai trên Home phụ huynh */
.khen { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.khen-i { background: linear-gradient(135deg, #fff8e1, #fff); border: 1px solid #f3dfa0; border-radius: 12px; padding: 12px 14px; }
.khen-i p { margin: 6px 0 4px; white-space: pre-wrap; overflow-wrap: anywhere; }

/* v27: khoảng cách các khối trên Home phụ huynh */
.home > .card { margin-top: 14px; }

/* v29: danh sách thông báo mới trên Home phụ huynh gọn hơn */
.recent.compact .ritem { padding: 5px 4px; font-size: 14px; }
.home .head h3 { font-size: 15px; }

/* v30: đơn vị phát hành */
.publisher .publink { display: inline-flex; line-height: 0; }
.publisher a.pubname { font-weight: 700; font-size: 17px; color: var(--pri-d); text-decoration: none; }
.publisher a.pubname:hover { text-decoration: underline; }

/* v32: thời khóa biểu */
.tkb-wrap { overflow-x: auto; }
table.tkb { width: 100%; border-collapse: collapse; table-layout: fixed; background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
table.tkb th { background: var(--pri-l); color: var(--pri-d); font-size: 13px; padding: 8px 4px; border: 1px solid var(--line); }
table.tkb th.today { background: var(--pri); color: #fff; }
table.tkb td { border: 1px solid var(--line); padding: 6px 5px; vertical-align: top; font-size: 13px; text-align: center; background: #fff; overflow-wrap: anywhere; }
table.tkb td b { display: block; line-height: 1.25; }
table.tkb td small { display: block; color: var(--mut); font-size: 11px; margin-top: 2px; line-height: 1.2; }
table.tkb td.tk-t, table.tkb th.tk-t { width: 74px; background: #f4f7fd; color: var(--pri-d); }
table.tkb td.tk-t small { color: var(--mut); }
table.tkb tr.buoi td { background: #eef3fb; color: var(--pri-d); font-weight: 700; font-size: 12px; padding: 3px; text-align: left; }
table.tkb td.tk-c.done { background: #dcfce7; }
table.tkb td.tk-c.now { background: #fff; box-shadow: inset 0 0 0 2px #16a34a; }
.tk-legend { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; color: var(--mut); font-size: 13px; margin: 10px 0 0; }
.tk-legend i { width: 14px; height: 14px; border-radius: 4px; border: 1px solid var(--line); display: inline-block; margin-left: 8px; }
.tk-legend .lg-done { background: #dcfce7; } .tk-legend .lg-now { background: #fff; box-shadow: inset 0 0 0 2px #16a34a; } .tk-legend .lg-todo { background: #fff; }
.tabsbar { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 10px; }
.tabbtn { border: 1px solid var(--line); background: #fff; border-radius: 99px; padding: 6px 14px; font-weight: 600; color: var(--mut); cursor: pointer; }
.tabbtn.on { background: var(--pri); border-color: var(--pri); color: #fff; }
.kg { display: grid; gap: 6px; } .kg-r { display: grid; grid-template-columns: 54px 1fr 18px 1fr; gap: 8px; align-items: center; }
.ptabs a .sm { display: none; }
@media (max-width: 860px) {
  .ptabs a .lg { display: none; } .ptabs a .sm { display: inline; }
  table.tkb th { font-size: 11px; padding: 6px 2px; } table.tkb td { font-size: 11px; padding: 4px 2px; } table.tkb td small { font-size: 9px; }
  table.tkb td.tk-t, table.tkb th.tk-t { width: 44px; }
}
:root {
  --pri: #1f55c0; --pri-d: #17418f; --pri-l: #e4edfc; --acc: #d62839; --acc-d: #b01e2d;
  --bg: #f2f5fb; --card: #fff; --txt: #1b2733; --mut: #64748b; --line: #dde4ea;
  --ok: #15803d; --ok-l: #dcfce7; --warn: #b45309; --warn-l: #fef3c7; --bad: #c81e2f; --bad-l: #fde8ea;
  --side: #0f2a5c; --r: 10px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 15px/1.5 var(--font); color: var(--txt); background: var(--bg); }
h1, h2, h3 { line-height: 1.25; margin: 0; }
h1 { font-size: 22px; } h2 { font-size: 18px; } h3 { font-size: 16px; }
a { color: var(--pri); }
.boot { padding: 40px 20px; text-align: center; color: var(--mut); }
.muted { color: var(--mut); } .small { font-size: 13px; }
.right { margin-left: auto; }
.hide { display: none !important; }

/* Form */
label { display: block; font-weight: 600; font-size: 14px; margin: 0 0 4px; }
input[type=text], input[type=password], input[type=email], input[type=search], input[type=file], select, textarea {
  width: 100%; min-height: 44px; padding: 9px 12px; font: inherit; font-size: 16px; color: inherit;
  border: 1px solid #c3ced8; border-radius: 8px; background: #fff;
}
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible { outline: 3px solid #8fb2f0; outline-offset: 1px; }
.field { margin-bottom: 14px; }
.hint { font-size: 13px; color: var(--mut); margin-top: 4px; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.row > .field { flex: 1 1 180px; margin-bottom: 0; }
.pw { position: relative; } .pw input { padding-right: 70px; }
.pw button { position: absolute; right: 4px; top: 4px; min-height: 36px; padding: 0 10px; border: 0; background: none; color: var(--pri); font-weight: 600; cursor: pointer; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 8px 16px;
  font: inherit; font-weight: 600; border-radius: 8px; border: 1px solid #b6c4cf; background: #fff; color: var(--txt);
  cursor: pointer; text-decoration: none; white-space: nowrap;
}
.btn:hover { background: #f1f5f8; }
.btn.pri { background: var(--pri); border-color: var(--pri); color: #fff; } .btn.pri:hover { background: var(--pri-d); }
.btn.bad { color: var(--bad); border-color: #eaa9b0; } .btn.bad:hover { background: var(--bad-l); }
.btn.sm { min-height: 36px; padding: 4px 12px; font-size: 14px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btns { display: flex; gap: 8px; flex-wrap: wrap; }

/* Cards, badges */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; }
.card + .card { margin-top: 12px; }
.dot h3 { border-left: 4px solid var(--acc); padding-left: 10px; }
.badge { display: inline-block; padding: 2px 10px; border-radius: 99px; font-size: 13px; font-weight: 600; background: #e5eaee; color: #475569; white-space: nowrap; }
.badge.green { background: var(--ok-l); color: var(--ok); } .badge.amber { background: var(--warn-l); color: var(--warn); } .badge.red { background: var(--bad-l); color: var(--bad); } .badge.blue { background: var(--pri-l); color: var(--pri-d); }
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.chip { padding: 6px 12px; border-radius: 8px; background: #eef2f5; font-size: 14px; }
.chip b { font-size: 18px; margin-right: 4px; }
.chip.red { background: var(--bad-l); color: var(--bad); } .chip.green { background: var(--ok-l); } .chip.amber { background: var(--warn-l); } .chip.gray { background: #e5eaee; }
.alert { padding: 10px 14px; border-radius: 8px; margin: 10px 0; font-size: 14px; }
.alert.err { background: var(--bad-l); color: #7f1d1d; } .alert.warn { background: var(--warn-l); color: #78350f; } .alert.ok { background: var(--ok-l); color: #14532d; }
.alert ul { margin: 4px 0 0; padding-left: 20px; } .alert p { margin: 0; }

/* Login / center card */
.center { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.auth { width: 100%; max-width: 400px; }
.auth h1 { color: var(--pri-d); text-align: center; margin-bottom: 4px; }
.auth h1::after { content: ''; display: block; width: 56px; height: 4px; border-radius: 2px; background: var(--acc); margin: 8px auto 0; }
.auth .sub { text-align: center; color: var(--mut); margin-bottom: 18px; }
.auth .links { text-align: center; margin-top: 14px; }

/* Shell: sidebar on desktop, bottom bar on mobile */
.shell { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 100vh; }
.side { background: var(--side); color: #dbe6fb; padding: 18px 12px; position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 6px; }
.side .brand { color: #fff; font-weight: 700; font-size: 16px; padding: 4px 10px 12px; margin-bottom: 8px; line-height: 1.3; border-bottom: 3px solid var(--acc); }
.side .who { margin-top: auto; padding: 10px; font-size: 13px; color: #a9bde6; word-break: break-all; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 8px; color: #dbe6fb; text-decoration: none; font-weight: 600; min-height: 44px; }
.nav a:hover { background: rgba(255,255,255,.08); }
.nav a.on { background: var(--pri); color: #fff; box-shadow: inset 4px 0 0 var(--acc); }
.nav svg { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.main { padding: 24px 28px 40px; max-width: 1180px; width: 100%; }
.head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.head h1 { margin-right: auto; }
.toolbar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; align-items: flex-end; }
.toolbar .field { flex: 1 1 200px; margin: 0; }

/* Parent layout */
.ptop { background: var(--side); border-bottom: 3px solid var(--acc); color: #fff; padding: 10px 16px; display: flex; align-items: center; gap: 12px; position: sticky; top: 0; z-index: 10; }
.ptop b { font-size: 16px; margin-right: auto; line-height: 1.3; }
.ptop a { color: #fff; font-weight: 600; text-decoration: none; padding: 8px 10px; border-radius: 8px; }
.ptop a:hover { background: rgba(255,255,255,.12); }
.pshell { min-height: 100vh; display: flex; flex-direction: column; }
.pshell .ptop { order: 0; } .pshell .ptabs { order: 1; } .pshell .pmain { order: 2; width: 100%; flex: 1; }
.pmain { max-width: 760px; margin: 0 auto; padding: 18px 16px 40px; }
/* Thanh tab phụ huynh: tab ngang trên máy tính, thanh icon dưới đáy trên điện thoại */
.ptabs { display: flex; justify-content: center; gap: 4px; background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: 51px; z-index: 9; padding: 0 8px; }
.ptabs a { display: flex; align-items: center; gap: 8px; padding: 12px 18px; color: var(--mut); text-decoration: none; font-weight: 600; border-bottom: 3px solid transparent; min-height: 48px; }
.ptabs a:hover { color: var(--pri-d); background: var(--pri-l); }
.ptabs a.on { color: var(--pri-d); border-bottom-color: var(--acc); }
.ptabs svg { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Tables */
.tw { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: #fff; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; }
th, td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; }
th { background: #eaf0fa; font-size: 13px; text-transform: none; color: #3b4a58; white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: center; }
.grid th, .grid td { white-space: nowrap; } .grid td.num { min-width: 64px; }
.grid th:first-child, .grid td:first-child { position: sticky; left: 0; background: #fff; z-index: 1; box-shadow: 1px 0 0 var(--line); }
.grid th:first-child { background: #eaf0fa; }
.pager { display: flex; gap: 10px; align-items: center; justify-content: center; margin-top: 14px; color: var(--mut); }

/* Góp ý, Info, Phản hồi */
.stars { display: flex; gap: 6px; }
.star { border: 0; background: none; font-size: 40px; line-height: 1; padding: 2px 4px; cursor: pointer; color: #cbd5e1; min-height: 48px; min-width: 48px; border-radius: 8px; }
.star:hover { background: var(--pri-l); }
.star.on { color: #f59e0b; }
.sao-label { margin-top: 4px; font-weight: 600; }
.stars-ro { color: #f59e0b; letter-spacing: 1px; white-space: nowrap; }
textarea { width: 100%; padding: 10px 12px; font: inherit; font-size: 16px; border: 1px solid #c3ced8; border-radius: 8px; background: #fff; resize: vertical; }
.check { display: flex; align-items: center; gap: 10px; font-weight: 600; cursor: pointer; min-height: 44px; }
.check input { width: 22px; height: 22px; accent-color: var(--acc); flex: none; }
.callback { background: #fff5f6; border: 1px solid #f3c1c7; border-radius: 10px; padding: 4px 12px 12px; }
.fb + .fb { margin-top: 10px; }
.irow { display: flex; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.irow:last-child { border-bottom: 0; }
.irow .k { flex: 0 0 150px; color: var(--mut); font-size: 14px; padding-top: 1px; }
.irow .v { flex: 1; min-width: 0; word-break: break-word; }
.info-school { border-left: 5px solid var(--acc); }
.clip { max-width: 360px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-wrap; }
.nav a em.cnt { margin-left: auto; font-style: normal; background: var(--acc); color: #fff; border-radius: 99px; font-size: 12px; padding: 1px 8px; font-weight: 700; }

/* Chọn học sinh (phụ huynh nhiều con) */
.kids { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.kid { display: flex; align-items: center; gap: 14px; padding: 16px; background: #fff; border: 1px solid var(--line); border-left: 5px solid var(--acc); border-radius: var(--r); text-decoration: none; color: var(--txt); min-height: 72px; }
.kid:hover { border-color: var(--pri); border-left-color: var(--acc); background: var(--pri-l); }
.kid .av { width: 44px; height: 44px; flex: none; border-radius: 50%; background: var(--pri); color: #fff; font-weight: 700; font-size: 20px; display: flex; align-items: center; justify-content: center; }
.kid .nm { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.kid .nm b { font-size: 17px; color: var(--pri-d); }
.kid .nm small { color: var(--mut); font-size: 13px; }
.kid .go { font-size: 28px; color: var(--acc); line-height: 1; }
/* Nhiều email trong form học sinh */
.erow { display: flex; gap: 8px; margin-bottom: 8px; }
.erow input { flex: 1; }
.erow .btn { min-height: 44px; }

/* Score cards (parent) */
.dot { margin-bottom: 14px; } .dot h3 { margin-bottom: 8px; }
.score { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); gap: 12px; }
.score:last-child { border-bottom: 0; }
.score b { font-size: 18px; color: var(--pri-d); }
.pills { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.pill { padding: 8px 14px; border-radius: 99px; border: 1px solid #b6c4cf; background: #fff; font: inherit; font-weight: 600; cursor: pointer; min-height: 40px; }
.pill.on { background: var(--pri); border-color: var(--pri); color: #fff; }

/* Grade-period cards */
.dots { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.dots .card + .card { margin-top: 0; }
.dots h3 { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; }
.dots .meta { color: var(--mut); font-size: 14px; margin-bottom: 12px; min-height: 42px; }
.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.stat b { display: block; font-size: 28px; color: var(--pri-d); }
.stat span { color: var(--mut); font-size: 14px; }

/* Modal */
.ov { position: fixed; inset: 0; background: rgba(15,30,40,.5); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 16px; }
.modal { background: #fff; border-radius: 12px; width: 100%; max-width: 560px; max-height: calc(100vh - 32px); display: flex; flex-direction: column; box-shadow: 0 20px 50px rgba(0,0,0,.3); }
.modal.wide { max-width: 860px; }
.modal header { display: flex; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.modal header h2 { margin-right: auto; }
.modal .x { border: 0; background: none; font-size: 26px; line-height: 1; padding: 4px 10px; cursor: pointer; color: var(--mut); min-height: 40px; }
.modal .body { padding: 16px 18px; overflow-y: auto; }
.modal footer { padding: 12px 18px; border-top: 1px solid var(--line); display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }

#toasts { position: fixed; left: 50%; transform: translateX(-50%); bottom: 24px; z-index: 80; display: flex; flex-direction: column; gap: 8px; width: calc(100% - 32px); max-width: 420px; pointer-events: none; }
.toast { background: #12295c; color: #fff; padding: 12px 16px; border-radius: 10px; box-shadow: 0 6px 20px rgba(0,0,0,.25); font-size: 15px; }
.toast.err { background: #b01e2d; } .toast.ok { background: #166534; }
.spin { display: inline-block; width: 18px; height: 18px; border: 3px solid #cddcf6; border-top-color: var(--pri); border-radius: 50%; animation: sp .8s linear infinite; vertical-align: -3px; margin-right: 8px; }
@keyframes sp { to { transform: rotate(360deg); } }
.loading { padding: 40px; text-align: center; color: var(--mut); }
.empty { padding: 32px 16px; text-align: center; color: var(--mut); }

/* ---------- Mobile ---------- */
@media (max-width: 860px) {
  .shell { display: block; }
  .side { position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; top: auto; height: auto; padding: 0 0 env(safe-area-inset-bottom); flex-direction: row; border-top: 1px solid rgba(255,255,255,.15); }
  .side .brand, .side .who { display: none; }
  .nav { flex-direction: row; width: 100%; gap: 0; }
  .nav a { flex: 1; flex-direction: column; gap: 2px; padding: 7px 2px 6px; border-radius: 0; font-size: 11px; text-align: center; min-height: 54px; }
  .nav a.on { background: rgba(255,255,255,.14); color: #fff; box-shadow: inset 0 3px 0 var(--acc); }
  .main { padding: 16px 14px calc(84px + env(safe-area-inset-bottom)); }
  .nav a { position: relative; }
  .nav a em.cnt { position: absolute; top: 3px; left: 55%; margin: 0; font-size: 10px; padding: 0 5px; }
  .pshell .ptabs { order: 3; position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 30; padding: 0 0 env(safe-area-inset-bottom); border-top: 1px solid var(--line); border-bottom: 0; gap: 0; box-shadow: 0 -2px 10px rgba(15,42,92,.08); }
  .ptabs a { flex: 1; flex-direction: column; gap: 2px; padding: 7px 2px 6px; font-size: 11px; text-align: center; min-height: 56px; border-bottom: 0; border-top: 3px solid transparent; justify-content: center; }
  .pshell .ptabs { background: var(--side); border-top: 1px solid rgba(255,255,255,.15); box-shadow: none; }
  .ptabs a { color: #dbe6fb; } .ptabs a:hover { color: #fff; background: rgba(255,255,255,.08); }
  .ptabs a.on { color: #fff; border-top-color: var(--acc); background: rgba(255,255,255,.14); }
  .pmain { padding-bottom: calc(86px + env(safe-area-inset-bottom)); }
  .irow { flex-direction: column; gap: 2px; } .irow .k { flex: none; }
  .clip { max-width: none; text-align: left; }
  .star { font-size: 36px; }
  h1 { font-size: 20px; }
  .head .btn { flex: 1 1 auto; }
  .modal-ov, .ov { align-items: flex-end; padding: 0; }
  .modal, .modal.wide { max-width: none; border-radius: 16px 16px 0 0; max-height: 92vh; }
  .modal footer .btn { flex: 1 1 auto; }
  #toasts { bottom: calc(76px + env(safe-area-inset-bottom)); }

  /* Danh sách dạng thẻ trên điện thoại */
  table.tbl, table.tbl tbody, table.tbl tr, table.tbl td { display: block; width: 100%; }
  table.tbl thead { display: none; }
  table.tbl tr { border-bottom: 1px solid var(--line); padding: 10px 12px; }
  table.tbl tr:last-child { border-bottom: 0; }
  table.tbl td { border: 0; padding: 3px 0; display: flex; gap: 12px; justify-content: space-between; align-items: flex-start; text-align: right; }
  table.tbl td::before { content: attr(data-label); color: var(--mut); font-size: 13px; font-weight: 600; text-align: left; flex: none; padding-top: 2px; }
  table.tbl td.act { justify-content: flex-start; flex-wrap: wrap; padding-top: 8px; }
  table.tbl td.act::before { display: none; }
}
@media print { .side, .ptop, .ptabs, .btns, .toolbar { display: none !important; } .shell { display: block; } }
.erows { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0 12px; }
.erows .field { margin-bottom: 10px; }
a[href^="tel:"] { white-space: nowrap; }

/* v10: vai trò, bộ phận, chuyển xử lý */
body.ro .wr { display: none !important; }
.chk { display: flex; align-items: center; gap: 10px; padding: 9px 4px; min-height: 44px; cursor: pointer; border-bottom: 1px solid var(--line, #e3e8f2); }
.chk input { width: 20px; height: 20px; flex: none; }
.chklist { max-height: 260px; overflow: auto; border: 1px solid var(--line, #e3e8f2); border-radius: 8px; padding: 2px 10px; }
.crow { padding: 8px 0; border-bottom: 1px solid var(--line, #e3e8f2); }
.crow:last-child { border-bottom: 0; }
.card.flat { box-shadow: none; background: #f6f8fd; }
.pill.tag { display: inline-flex; align-items: center; gap: 6px; cursor: default; }
.pill.tag .x { border: 0; background: none; cursor: pointer; font-size: 15px; color: inherit; min-width: 28px; min-height: 28px; }

/* v11: Tổng quan trực quan */
.dash .card { margin: 0; }
.dash > * + * { margin-top: 14px; }
.hero { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 18px 20px; border-radius: 14px; color: #fff; background: linear-gradient(120deg, var(--side) 0%, var(--pri) 70%, #3b78e0 100%); position: relative; overflow: hidden; }
.hero::after { content: ""; position: absolute; right: -40px; top: -40px; width: 180px; height: 180px; border-radius: 50%; background: rgba(214,40,57,.35); }
.hero > div { margin-right: auto; position: relative; z-index: 1; }
.hero h1 { font-size: 22px; } .hero p { margin: 4px 0 0; color: #dbe6fb; font-size: 14px; }
.live { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; background: rgba(255,255,255,.16); padding: 4px 12px; border-radius: 99px; }
.live i { width: 8px; height: 8px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 0 rgba(74,222,128,.7); animation: pulse 2s infinite; }
.live.off i { background: #fbbf24; animation: none; }
@keyframes pulse { 70% { box-shadow: 0 0 0 7px rgba(74,222,128,0); } 100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); } }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.kpi { display: flex; flex-direction: column; gap: 2px; padding: 16px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); border-left: 5px solid var(--pri); color: inherit; text-decoration: none; transition: transform .12s, box-shadow .12s; }
a.kpi:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(15,42,92,.12); }
.kpi .kl { color: var(--mut); font-size: 13px; font-weight: 600; }
.kpi .kv { font-size: 32px; line-height: 1.15; color: var(--pri-d); }
.kpi .ks { color: var(--mut); font-size: 13px; }
.kpi.amber { border-left-color: #f59e0b; } .kpi.amber .kv { color: var(--warn); }
.kpi.red { border-left-color: var(--acc); background: #fff7f8; } .kpi.red .kv { color: var(--acc-d); }
.kpi.ok { border-left-color: #16a34a; } .kpi.ok .kv { color: var(--ok); }
.kpi.blue { border-left-color: var(--pri); }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.dash h3 { margin-bottom: 10px; }
.dist { display: flex; flex-direction: column; gap: 9px; }
.drow, .trow { display: grid; grid-template-columns: 38px minmax(0, 1fr) 84px; align-items: center; gap: 10px; font-size: 14px; }
.trow { grid-template-columns: minmax(64px, 120px) minmax(0, 1fr) auto; }
.grid2 > .card, .dash .card { min-width: 0; }
.ds { color: #d97706; font-weight: 700; } .tn { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dn { color: var(--mut); font-size: 13px; text-align: right; white-space: nowrap; }
.dbar { height: 12px; background: #eaeff6; border-radius: 99px; overflow: hidden; display: flex; }
.dbar i { display: block; height: 100%; min-width: 0; transition: width .5s; }
.dbar i.s5 { background: #16a34a; } .dbar i.s4 { background: #65a30d; } .dbar i.s3 { background: #f59e0b; } .dbar i.s2 { background: #ea580c; } .dbar i.s1 { background: var(--acc); }
.dbar i.wait { background: #f59e0b; } .dbar i.done { background: #16a34a; }
.sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin: 0 4px 0 0; vertical-align: -1px; } .sw.wait { background: #f59e0b; } .sw.done { background: #16a34a; margin-left: 10px; }
.chart { width: 100%; height: auto; display: block; }
.chart .axis { stroke: var(--line); } .chart .bar { fill: #7fa3e8; } .chart .bar.today { fill: var(--pri); }
.chart text { font-family: var(--font); } .chart .val { font-size: 12px; font-weight: 700; fill: var(--pri-d); } .chart .lbl { font-size: 11px; fill: var(--mut); }
.recent { display: flex; flex-direction: column; }
.ritem { display: flex; align-items: center; gap: 10px; padding: 9px 4px; border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; }
.ritem:last-child { border-bottom: 0; } .ritem:hover { background: var(--pri-l); }
.rbody { flex: 1; min-width: 0; } .rtext { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.mini div { background: #f4f7fc; border-radius: 10px; padding: 10px 12px; } .mini b { display: block; font-size: 24px; color: var(--pri-d); } .mini span { color: var(--mut); font-size: 13px; }
.card.publisher { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; background: linear-gradient(180deg, #fff, #f2f6fe); }
.pubname { font-size: 22px; letter-spacing: .5px; color: var(--pri-d); } .pubname::first-letter { color: var(--acc); }

/* v11: giao diện phụ huynh trên máy tính dùng sidebar như tài khoản nhà trường */
.ptabs .brand, .ptabs .who { display: none; }
@media (min-width: 861px) {
  .pshell { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 100vh; }
  .pshell .ptop { display: none; }
  .pshell .ptabs { grid-column: 1; grid-row: 1; position: sticky; top: 0; height: 100vh; flex-direction: column; justify-content: flex-start; align-items: stretch; gap: 2px; background: var(--side); border: 0; padding: 18px 12px; z-index: 5; }
  .pshell .ptabs .brand { display: block; color: #fff; font-weight: 700; font-size: 16px; padding: 4px 10px 12px; margin-bottom: 8px; line-height: 1.3; border-bottom: 3px solid var(--acc); }
  .pshell .ptabs .who { display: block; margin-top: auto; padding: 10px; font-size: 13px; color: #a9bde6; word-break: break-all; }
  .pshell .ptabs a { color: #dbe6fb; border-radius: 8px; border-bottom: 0; padding: 10px; min-height: 44px; }
  .pshell .ptabs a:hover { background: rgba(255,255,255,.08); color: #fff; }
  .pshell .ptabs a.on { background: var(--pri); color: #fff; box-shadow: inset 4px 0 0 var(--acc); }
  .pshell .pmain { grid-column: 2; grid-row: 1; max-width: 960px; margin: 0; padding: 24px 28px 40px; }
}
@media (max-width: 860px) {
  .grid2 { grid-template-columns: 1fr; }
  .hero { padding: 14px 16px; } .hero h1 { font-size: 19px; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kpi { padding: 12px; } .kpi .kv { font-size: 26px; }
  .nav a { font-size: 10px; } .nav a span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) { .live i { animation: none; } .dbar i, a.kpi { transition: none; } }

/* v13: Thông báo, banner, Home phụ huynh */
.ttl { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .ttl h1 { font-size: 21px; }
a.tb { display: flex; gap: 12px; padding: 12px; margin-bottom: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; color: inherit; text-decoration: none; transition: box-shadow .12s, transform .12s; }
a.tb:hover { box-shadow: 0 6px 16px rgba(15,42,92,.1); transform: translateY(-1px); }
a.tb.new { border-left: 5px solid var(--acc); background: #fffafa; }
.tth { width: 84px; height: 84px; flex: none; border-radius: 10px; object-fit: cover; background: var(--pri-l); }
.tth.ph { display: flex; align-items: center; justify-content: center; color: var(--pri); } .tth.ph svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tbody { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; }
.tprev { color: #3b4a5a; font-size: 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
.tcontent { white-space: pre-wrap; word-break: break-word; line-height: 1.65; }
.gal { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; margin-top: 14px; }
.gal .g { border: 0; padding: 0; background: #eef2f8; border-radius: 10px; overflow: hidden; cursor: zoom-in; aspect-ratio: 4/3; }
.gal .g img { width: 100%; height: 100%; object-fit: cover; display: block; }
img.lb { display: block; max-width: 100%; max-height: 70vh; margin: 0 auto; border-radius: 8px; }
.files { display: flex; flex-direction: column; gap: 6px; }
a.file { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; color: inherit; text-decoration: none; background: #f8faff; }
a.file:hover { background: var(--pri-l); } a.file svg { width: 22px; height: 22px; flex: none; fill: none; stroke: var(--pri); stroke-width: 1.7; } a.file span { flex: 1; min-width: 0; word-break: break-all; font-weight: 600; }
.thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.th { position: relative; width: 84px; height: 84px; border-radius: 8px; overflow: hidden; background: #eef2f8; } .th img { width: 100%; height: 100%; object-fit: cover; display: block; } .th.off img { opacity: .25; }
.th button { position: absolute; top: 3px; right: 3px; width: 26px; height: 26px; border: 0; border-radius: 50%; background: rgba(15,42,92,.85); color: #fff; font-size: 16px; line-height: 1; cursor: pointer; }
.flist { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; } .fr { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; } .fr span { flex: 1; min-width: 0; word-break: break-all; font-size: 14px; } .fr.off span { text-decoration: line-through; opacity: .5; }
.radios { display: flex; gap: 18px; flex-wrap: wrap; } .chk.slim { min-height: 36px; padding: 4px 4px; border-bottom: 0; }
.chklist.cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0 10px; }
.blist { display: flex; flex-direction: column; gap: 10px; }
.brow { display: flex; gap: 12px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; align-items: flex-start; }
.brow img { width: 150px; aspect-ratio: 3/1; object-fit: cover; border-radius: 8px; flex: none; background: #eef2f8; } .bctl { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.banner { position: relative; border-radius: 14px; overflow: hidden; background: #dfe8f8; width: 100%; height: 160px; transition: height .3s; }
.banner .sl { position: absolute; inset: 0; opacity: 0; transition: opacity .6s; display: block; pointer-events: none; } .banner .sl.on { opacity: 1; pointer-events: auto; }
.banner img { width: 100%; height: 100%; object-fit: contain; display: block; }
.bdots { position: absolute; left: 0; right: 0; bottom: 8px; display: flex; justify-content: center; gap: 6px; }
.bdots button { width: 9px; height: 9px; padding: 0; border-radius: 50%; border: 0; background: rgba(255,255,255,.6); cursor: pointer; box-shadow: 0 0 0 1px rgba(15,42,92,.25); } .bdots button.on { background: #fff; width: 22px; border-radius: 6px; }
.kv.sm { font-size: 22px; line-height: 1.4; }
.kids { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
a.kid2 { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 12px; background: linear-gradient(135deg, var(--pri-l), #fff); border: 1px solid #c9d9f5; color: inherit; text-decoration: none; } a.kid2:hover { border-color: var(--pri); } a.kid2 b { color: var(--pri-d); } a.kid2 .go { color: var(--acc-d); font-weight: 600; font-size: 13px; margin-top: 4px; }
.rth { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; flex: none; }
.ptabs a { position: relative; }
.ptabs a em.cnt { margin-left: auto; font-style: normal; background: var(--acc); color: #fff; border-radius: 99px; font-size: 12px; padding: 1px 8px; font-weight: 700; }
@media (max-width: 860px) {
  .ptabs a em.cnt { position: absolute; top: 3px; left: 55%; margin: 0; font-size: 10px; padding: 0 5px; }
  .nav { overflow-x: auto; scrollbar-width: none; } .nav::-webkit-scrollbar { display: none; }
  .nav a { flex: 1 0 auto; min-width: 58px; }
  .tth { width: 64px; height: 64px; } .brow { flex-direction: column; } .brow img { width: 100%; }
  .banner { border-radius: 10px; }
}

/* v14 */
.publogo { max-width: 200px; max-height: 80px; width: auto; height: auto; object-fit: contain; display: block; margin: 4px 0; }
.pubcontact { margin-top: 6px; font-size: 15px; }
.article .tcontent { margin: 0 0 12px; }
.article .inl { display: block; border: 0; padding: 0; background: none; margin: 4px 0 14px; cursor: zoom-in; max-width: 100%; }
.article .inl img { display: block; max-width: 100%; height: auto; border-radius: 10px; }
.bed { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.bed textarea.bt { min-height: 70px; resize: none; overflow: hidden; }
.bimg { position: relative; align-self: flex-start; max-width: 100%; }
.bimg img { display: block; max-width: 100%; max-height: 260px; border-radius: 8px; border: 1px solid var(--line); }
.bimg button { position: absolute; top: 6px; right: 6px; width: 30px; height: 30px; border-radius: 50%; border: 0; background: rgba(15,23,42,.75); color: #fff; font-size: 18px; line-height: 1; cursor: pointer; }
/* Trang Nhân sự: chữ nhỏ gọn hơn */
.nsx { font-size: 14px; }
.nsx h1 { font-size: 20px; } .nsx h2 { font-size: 17px; } .nsx h3 { font-size: 15px; }
.nsx th, .nsx td { padding: 6px 10px; font-size: 13px; }
.nsx .small, .nsx .muted.small { font-size: 12px; }
.nsx .btn.sm { font-size: 12.5px; padding: 4px 9px; min-height: 32px; }
.nsx .badge { font-size: 11.5px; }
.nsx .card { padding: 10px 14px; }

/* v15: gọn hơn */
a.tb { padding: 8px 12px; margin-bottom: 6px; align-items: center; gap: 10px; border-radius: 10px; }
.tth, .tth.ph { width: 34px; height: 34px; border-radius: 8px; }
.tth.ph svg { width: 20px; height: 20px; }
a.tb .tbody { min-width: 0; } a.tb .ttl { font-size: 15px; } a.tb .muted.small { font-size: 12px; margin-top: 1px; }
.article .inl { max-width: min(100%, 380px); margin: 4px auto 14px; } .article .inl img { max-height: 300px; width: auto; margin: 0 auto; }
.bimg img { max-width: min(100%, 220px); max-height: 150px; }

.chip.btn-chip { border: 2px solid transparent; font: inherit; font-size: 14px; cursor: pointer; color: inherit; min-height: 40px; }
.chip.btn-chip:hover { filter: brightness(.96); } .chip.btn-chip.on { border-color: var(--pri); box-shadow: 0 0 0 2px var(--pri-l); font-weight: 700; }

.nhom { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 8px; }
.nhom .ng { font-size: 12px; padding: 2px 8px; border-radius: 99px; background: #e5eaee; color: #475569; white-space: nowrap; }
.nhom .ng.ok { background: var(--ok-l); color: var(--ok); font-weight: 600; } .nhom .ng.part { background: var(--warn-l); color: var(--warn); }

/* v19: thương hiệu, công tắc công bố, thẻ đợt điểm */
.brand .bn { display: block; color: #fbbf24; font-size: 20px; letter-spacing: .2px; line-height: 1.2; }
.brand small { display: block; color: #fff; font-size: 12px; font-weight: 400; margin-top: 2px; opacity: .92; }
a.kycard { display: block; color: inherit; text-decoration: none; transition: box-shadow .12s, transform .12s; }
a.kycard:hover { box-shadow: 0 6px 18px rgba(15,42,92,.12); transform: translateY(-1px); }
a.kycard .go { color: var(--pri); font-weight: 700; font-size: 14px; }
.sw { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 600; font-size: 13px; user-select: none; }
.sw input { position: absolute; opacity: 0; width: 0; height: 0; }
.sw i { position: relative; width: 40px; height: 22px; border-radius: 99px; background: #cbd5e1; transition: background .15s; flex: none; }
.sw i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .15s; }
.sw input:checked + i { background: #16a34a; } .sw input:checked + i::after { transform: translateX(18px); }
.sw input:focus-visible + i { outline: 3px solid var(--pri-l); outline-offset: 2px; }
.sw .swt { min-width: 74px; color: var(--mut); } .sw input:checked ~ .swt { color: var(--ok); }

/* v20: đăng nhập, bánh răng trên header phụ huynh (di động) */
.lbrand { background: var(--side); border-bottom: 4px solid var(--acc); border-radius: 14px; padding: 20px 16px; text-align: center; margin-bottom: 18px; }
.lbrand b { display: block; color: #fbbf24; font-size: 30px; line-height: 1.15; letter-spacing: .3px; }
.lbrand small { display: block; color: #fff; font-size: 15px; margin-top: 4px; }
.ptop .pgear { display: flex; padding: 6px; line-height: 0; }
.ptop .pgear svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ptop .pgear.on { background: rgba(255,255,255,.18); }
@media (max-width: 860px) { .ptabs a.tab-cd { display: none; } }

/* v26: góp ý công khai trên Home phụ huynh */
.khen { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.khen-i { background: linear-gradient(135deg, #fff8e1, #fff); border: 1px solid #f3dfa0; border-radius: 12px; padding: 12px 14px; }
.khen-i p { margin: 6px 0 4px; white-space: pre-wrap; overflow-wrap: anywhere; }

/* v27: khoảng cách các khối trên Home phụ huynh */
.home > .card { margin-top: 14px; }

/* v29: danh sách thông báo mới trên Home phụ huynh gọn hơn */
.recent.compact .ritem { padding: 5px 4px; font-size: 14px; }
.home .head h3 { font-size: 15px; }

/* v30: đơn vị phát hành */
.publisher .publink { display: inline-flex; line-height: 0; }
.publisher a.pubname { font-weight: 700; font-size: 17px; color: var(--pri-d); text-decoration: none; }
.publisher a.pubname:hover { text-decoration: underline; }

/* v32: thời khóa biểu */
.tkb-wrap { overflow-x: auto; }
table.tkb { width: 100%; border-collapse: collapse; table-layout: fixed; background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
table.tkb th { background: var(--pri-l); color: var(--pri-d); font-size: 13px; padding: 8px 4px; border: 1px solid var(--line); }
table.tkb th.today { background: var(--pri); color: #fff; }
table.tkb td { border: 1px solid var(--line); padding: 6px 5px; vertical-align: top; font-size: 13px; text-align: center; background: #fff; overflow-wrap: anywhere; }
table.tkb td b { display: block; line-height: 1.25; }
table.tkb td small { display: block; color: var(--mut); font-size: 11px; margin-top: 2px; line-height: 1.2; }
table.tkb td.tk-t, table.tkb th.tk-t { width: 74px; background: #f4f7fd; color: var(--pri-d); }
table.tkb td.tk-t small { color: var(--mut); }
table.tkb tr.buoi td { background: #eef3fb; color: var(--pri-d); font-weight: 700; font-size: 12px; padding: 3px; text-align: left; }
table.tkb td.tk-c.done { background: #dcfce7; }
table.tkb td.tk-c.now { background: #fff; box-shadow: inset 0 0 0 2px #16a34a; }
.tk-legend { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; color: var(--mut); font-size: 13px; margin: 10px 0 0; }
.tk-legend i { width: 14px; height: 14px; border-radius: 4px; border: 1px solid var(--line); display: inline-block; margin-left: 8px; }
.tk-legend .lg-done { background: #dcfce7; } .tk-legend .lg-now { background: #fff; box-shadow: inset 0 0 0 2px #16a34a; } .tk-legend .lg-todo { background: #fff; }
.tabsbar { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 10px; }
.tabbtn { border: 1px solid var(--line); background: #fff; border-radius: 99px; padding: 6px 14px; font-weight: 600; color: var(--mut); cursor: pointer; }
.tabbtn.on { background: var(--pri); border-color: var(--pri); color: #fff; }
.kg { display: grid; gap: 6px; } .kg-r { display: grid; grid-template-columns: 54px 1fr 18px 1fr; gap: 8px; align-items: center; }
.ptabs a .sm { display: none; }
@media (max-width: 860px) {
  .ptabs a .lg { display: none; } .ptabs a .sm { display: inline; }
  table.tkb th { font-size: 11px; padding: 6px 2px; } table.tkb td { font-size: 11px; padding: 4px 2px; } table.tkb td small { font-size: 9px; }
  table.tkb td.tk-t, table.tkb th.tk-t { width: 44px; }
}

/* v33: tiết đang học màu vàng, đồng phục theo thứ */
table.tkb td.tk-c.now { background: #fde68a; box-shadow: none; }
.tk-legend .lg-now { background: #fde68a; box-shadow: none; }
.uni { margin-top: 14px; }
.uni-g { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.uni-d { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; padding: 8px 4px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.uni-d.today { border-color: var(--acc); background: #fffbeb; box-shadow: 0 0 0 2px #fde68a; }
.uni-d b { color: var(--pri-d); font-size: 13px; }
.uni-d span { font-size: 12px; line-height: 1.25; }
.uni-i { display: flex; gap: 2px; justify-content: center; }
.uni-ic { width: 34px; height: 34px; display: inline-block; } .uni-ic svg { width: 100%; height: 100%; }
@media (max-width: 860px) { .uni-d { padding: 6px 2px; } .uni-d b { font-size: 11px; } .uni-d span { font-size: 10px; } .uni-ic { width: 26px; height: 26px; } }