/* K-Edu Plus – dùng chung cho trang phụ huynh và trang quản trị */
.kplus, .kplus-admin {
	--kp-ink: #152033; --kp-muted: #5b677a; --kp-line: #d6dce5; --kp-surface: #fff; --kp-sunk: #eef1f6;
	--kp-accent: #1f4fa8; --kp-accent-soft: #e3ebfa;
	--kp-good: #1e7a4c; --kp-good-soft: #dff2e7; --kp-warn: #a86200; --kp-warn-soft: #fbebd3;
	--kp-bad: #b8322a; --kp-bad-soft: #f8e4e1;
}
.kplus { color: var(--kp-ink); font-variant-numeric: tabular-nums; display: flex; flex-direction: column; gap: 16px; max-width: 920px; }
.kplus h3 { margin: 0 0 8px; font-size: 1.25em; }
.kplus h4 { margin: 14px 0 8px; font-size: 1em; }
.kplus-card { background: var(--kp-surface); border: 1px solid var(--kp-line); border-radius: 10px; padding: 18px; }
.kplus-card > summary { cursor: pointer; font-weight: 600; }
.kplus-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px 24px; }
.kplus-grid > div { min-width: 0; }
.kplus-form { display: flex; flex-direction: column; gap: 8px; max-width: 520px; margin-top: 10px; }
.kplus-form input:not([type=checkbox]), .kplus-form select { padding: 8px 10px; border: 1px solid var(--kp-line); border-radius: 8px; font: inherit; }
.kplus-check { display: flex; gap: 8px; align-items: flex-start; }
.kplus-check input { margin-top: 4px; }
.kplus-req { color: var(--kp-bad); font-size: .9em; }
.kplus-btn { display: inline-block; background: var(--kp-accent); color: #fff !important; border: 1px solid var(--kp-accent); border-radius: 8px; padding: 9px 16px; font-weight: 600; cursor: pointer; text-decoration: none; align-self: flex-start; }
.kplus-btn:hover { filter: brightness(1.08); }
.kplus-btn.kplus-ghost { background: transparent; color: var(--kp-accent) !important; }
.kplus-btn:focus-visible, .kplus-form :focus-visible { outline: 2px solid var(--kp-accent); outline-offset: 2px; }
.kplus-muted { color: var(--kp-muted); font-size: .92em; }
.kplus-big { font-size: 2em; font-weight: 700; margin: 0; line-height: 1.1; }
.kplus-row { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.kplus-bar { height: 8px; background: var(--kp-sunk); border-radius: 99px; overflow: hidden; margin: 4px 0 10px; }
.kplus-bar i { display: block; height: 100%; background: var(--kp-accent); border-radius: 99px; }
.kplus-list { list-style: none; margin: 0; padding: 0; }
.kplus-list li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--kp-line); }
.kplus-list li > span { overflow-wrap: break-word; }
.kplus-list li > span:last-child { max-width: 55%; text-align: right; }
.kplus-list li > span.kplus-pill { flex-shrink: 0; max-width: none; }
.kplus-list small { display: block; color: var(--kp-muted); font-size: .88em; }
.kplus-list li:last-child { border-bottom: 0; }
.kplus-cancel span:first-child { text-decoration: line-through; color: var(--kp-muted); }
.kplus-pill { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: .82em; font-weight: 600; white-space: nowrap; background: var(--kp-sunk); color: var(--kp-muted); }
.kplus-present { background: var(--kp-good-soft); color: var(--kp-good); }
.kplus-late { background: var(--kp-warn-soft); color: var(--kp-warn); }
.kplus-excused { background: var(--kp-accent-soft); color: var(--kp-accent); }
.kplus-absent { background: var(--kp-bad-soft); color: var(--kp-bad); }
.kplus-review { border-top: 1px solid var(--kp-line); padding-top: 10px; margin-top: 10px; }
.kplus-review p { margin: 6px 0; }
.kplus-scores { font-weight: 600; color: var(--kp-accent); }
.kplus-code { font-size: 2em; font-weight: 700; letter-spacing: .18em; font-family: ui-monospace, Menlo, Consolas, monospace; margin: 8px 0 0; user-select: all; }
.kplus-alert { border-left: 3px solid; padding: 10px 12px; border-radius: 6px; }
.kplus-ok { border-color: var(--kp-good); background: var(--kp-good-soft); }
.kplus-bad { border-color: var(--kp-bad); background: var(--kp-bad-soft); }

/* Quản trị */
.kplus-admin .kplus-lead { font-size: 14px; color: var(--kp-muted); max-width: 70ch; }
.kplus-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 16px 0 24px; max-width: 1100px; }
.kplus-tile { background: #fff; border: 1px solid var(--kp-line); border-radius: 8px; padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; }
.kplus-tile span { color: var(--kp-muted); }
.kplus-tile b { font-size: 26px; line-height: 1.2; }
.kplus-tile b.kplus-small { font-size: 18px; }
.kplus-tile em { font-style: normal; font-size: 12px; color: var(--kp-muted); }
.kplus-table { max-width: 1100px; }
.kplus-table td { vertical-align: top; }
.kplus-inline { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: flex-end; margin: 12px 0 18px; }
.kplus-inline label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; }
.kplus-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 20px; max-width: 1200px; margin-top: 16px; }
.kplus-panel { background: #fff; border: 1px solid var(--kp-line); border-radius: 8px; padding: 4px 18px 16px; min-width: 0; }
.kplus-panel label { font-weight: 600; display: block; }
.kplus-row2 { display: flex; gap: 16px; flex-wrap: wrap; }
.kplus-row2 label { display: flex; flex-direction: column; gap: 4px; }
.kplus-skills { display: flex; gap: 12px; flex-wrap: wrap; border: 1px solid var(--kp-line); border-radius: 6px; padding: 8px 12px 12px; }
.kplus-skills label { display: flex; flex-direction: column; gap: 4px; }
.kplus-skills input { width: 70px; }
.kplus-actions { display: flex; gap: 12px; align-items: center; }
.kplus-danger { color: var(--kp-bad) !important; }
.kplus-vars code { font-size: 11px; }