/* Cổng giáo viên + phụ huynh (giaovien.html, phuhuynh.html) — cùng hệ màu với quanly.html / quantri.css. */
:root {
  --muc-900:#0d2b21; --muc-700:#155741; --muc-600:#1a6b52; --muc-200:#b7ddca; --muc-100:#d9ede3; --muc-50:#f0f7f3;
  --n-900:#131a17; --n-700:#384540; --n-600:#4e5c56; --n-500:#64736c; --n-300:#c2cfc9; --n-200:#dde5e0; --n-100:#eef3f0; --trang:#fff;
  --tot:#166b49; --tot-nen:#e2f2e9; --luu:#a34d2a; --luu-nen:#fbf0d8; --luu-vien:#ecd49a;
  --nguy:#a8321f; --nguy-nen:#fbe7e3; --nguy-vien:#f0c2b8;
  --font:-apple-system,BlinkMacSystemFont,'Segoe UI Variable Text','Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --r:8px; --r-lon:14px;
}
* { box-sizing:border-box; }
body { margin:0; font-family:var(--font); font-size:15px; line-height:1.55; background:var(--n-100); color:var(--n-900); }
[hidden] { display:none !important; }
h1 { font-size:20px; margin:0; line-height:1.35; color:var(--muc-900); }
h2 { font-size:17px; margin:0; line-height:1.4; color:var(--muc-900); }
h3 { font-size:14.5px; margin:0; line-height:1.4; color:var(--muc-900); }
p { margin:0; }
a { color:var(--muc-600); }
input, select { font-family:inherit; font-size:15px; color:var(--n-900); border:1px solid var(--n-300); border-radius:var(--r);
  background:var(--trang); padding:7px 11px; min-height:38px; width:100%; }
input[type=checkbox], input[type=radio] { width:17px; height:17px; min-height:0; padding:0; margin:2px 0 0; accent-color:var(--muc-600); flex:none; }
input:focus, select:focus, button:focus-visible, a:focus-visible { outline:2px solid var(--muc-200); outline-offset:1px; }
label.truong { display:flex; flex-direction:column; gap:4px; font-size:13.5px; font-weight:600; color:var(--n-700); min-width:0; }
/* Chữ nhãn + dấu (?) đi chung MỘT hàng: label.truong là flex cột nên mỗi mảnh con trực tiếp (chữ trần, span.qm) chiếm một hàng riêng. */
.truong-ten { display:block; }
.nut { font-family:inherit; font-size:14.5px; font-weight:600; line-height:1.2; height:38px; padding:0 16px; border-radius:var(--r);
  border:1px solid var(--n-300); background:var(--trang); color:var(--n-900); cursor:pointer; display:inline-flex; align-items:center;
  justify-content:center; gap:6px; text-decoration:none; white-space:nowrap; }
.nut:disabled, .nut[aria-disabled=true] { opacity:.55; cursor:not-allowed; }
.nut-chinh { background:var(--muc-600); border-color:var(--muc-600); color:var(--trang); }
.nut-nguy { background:var(--nguy); border-color:var(--nguy); color:var(--trang); }
.nut-vien-nguy { color:var(--nguy); border-color:var(--nguy-vien); }
.nut-nho { height:34px; padding:0 12px; font-size:13.5px; }
.nut-lon { padding:0 22px; }

.cong-dau { background:var(--trang); border-bottom:1px solid var(--n-200); }
.cong-dau-trong { max-width:960px; margin:0 auto; padding:10px 16px; display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.cong-dau .gian { flex:1 1 auto; }
.cong-ve { font-size:13.5px; color:var(--n-600); text-decoration:none; }
.cong-nguoi { font-size:13.5px; color:var(--n-600); }
main.cong { max-width:960px; margin:0 auto; padding:18px 16px 40px; display:flex; flex-direction:column; gap:14px; }
.khung { background:var(--trang); border:1px solid var(--n-200); border-radius:var(--r-lon); padding:18px; display:flex; flex-direction:column; gap:12px; min-width:0; }
.khung-hep { max-width:560px; width:100%; margin:0 auto; }
.ghi { font-size:13.5px; color:var(--n-500); }
.loi { background:var(--nguy-nen); border:1px solid var(--nguy-vien); color:var(--nguy); border-radius:var(--r); padding:8px 12px; font-size:14px; }
.ok { background:var(--tot-nen); border:1px solid var(--muc-200); color:var(--tot); border-radius:var(--r); padding:8px 12px; font-size:14px; }
.luu-y { background:var(--luu-nen); border:1px solid var(--luu-vien); border-radius:var(--r); padding:12px 14px; font-size:14px; display:flex; flex-direction:column; gap:6px; }
.luu-y h3 { color:var(--luu); }
.luu-y ul { margin:0; padding-left:20px; display:flex; flex-direction:column; gap:4px; }
.hang { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.hang .gian { flex:1 1 auto; }
.tab { display:flex; gap:6px; border-bottom:1px solid var(--n-200); }
.tab button { font:inherit; font-weight:600; font-size:14.5px; background:none; border:0; border-bottom:3px solid transparent; padding:6px 12px; line-height:1.3;
  color:var(--n-600); cursor:pointer; margin-bottom:-1px; }
.tab button[aria-selected=true] { color:var(--muc-700); border-bottom-color:var(--muc-600); }
.buoc { display:flex; gap:8px; font-size:13px; color:var(--n-500); flex-wrap:wrap; }
.buoc span[aria-current=step] { color:var(--muc-700); font-weight:700; }
.tick { display:flex; gap:9px; align-items:flex-start; font-size:14px; line-height:1.5; cursor:pointer; }
.tuy-chon { display:flex; flex-direction:column; gap:2px; }
.tuy-chon p { margin:0 0 0 26px; }
.mk-hang { display:flex; gap:8px; }
.mk-hang input { flex:1 1 auto; }
.the { display:inline-flex; align-items:center; border-radius:99px; padding:2px 10px; font-size:13px; font-weight:600; background:var(--n-100); color:var(--n-700); }
.the-tot { background:var(--tot-nen); color:var(--tot); }
.the-luu { background:var(--luu-nen); color:var(--luu); }
.the-nguy { background:var(--nguy-nen); color:var(--nguy); }
.chip-ds { display:flex; flex-wrap:wrap; gap:6px; }
.chip-ds span { background:var(--muc-50); border:1px solid var(--muc-100); color:var(--muc-700); border-radius:99px; padding:3px 10px; font-size:13px; }
.luoi-con { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:10px; }
.the-con { border:1px solid var(--n-200); border-radius:var(--r); padding:12px; display:flex; flex-direction:column; gap:8px; min-width:0; }
.the-con b { overflow-wrap:anywhere; }
.ma { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:14px; background:var(--n-100); padding:2px 7px; border-radius:6px; overflow-wrap:anywhere; }
.pin-lon { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:30px; letter-spacing:7px; text-align:center; color:var(--muc-700); font-weight:700; }
.qm { display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:50%; background:var(--n-100); color:var(--n-600);
  font-size:11.5px; font-weight:700; cursor:help; vertical-align:middle; flex:none; }
#qm-pop { position:fixed; z-index:80; max-width:300px; background:var(--n-900); color:var(--trang); font-size:13px; line-height:1.5; padding:8px 10px; border-radius:var(--r); display:none; }
dialog.hop { border:0; border-radius:var(--r-lon); padding:0; width:min(560px, calc(100vw - 24px)); max-height:calc(100vh - 24px); box-shadow:0 12px 32px rgba(13,43,33,.22); }
dialog.hop::backdrop { background:rgba(13,43,33,.45); }
.hop-trong { padding:18px; display:flex; flex-direction:column; gap:12px; max-height:calc(100vh - 24px); overflow:auto; }
.hop-chan { display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap; }
.van-ban { max-height:min(52vh, 420px); overflow:auto; border:1px solid var(--n-200); border-radius:var(--r); padding:12px 14px; font-size:14px; }
.van-ban h1 { font-size:17px; } .van-ban h2 { font-size:15px; margin-top:12px; } .van-ban p, .van-ban li { margin:6px 0; }
.van-ban table { border-collapse:collapse; width:100%; font-size:13px; display:block; overflow-x:auto; }
.van-ban th, .van-ban td { border:1px solid var(--n-200); padding:5px 8px; text-align:left; vertical-align:top; }
@media (max-width:520px) {
  main.cong { padding:12px 12px 32px; }
  .khung { padding:14px; }
  .hop-chan .nut { flex:1 1 auto; }
}

/* Đăng ký / đăng nhập bằng Zalo (cong-zalo.js, 22/10/2026) */
.zl-ma { font-size:34px; font-weight:800; letter-spacing:.28em; text-align:center; padding:14px 10px; background:var(--muc-50); border:2px dashed var(--muc-200);
  border-radius:var(--r-lon); color:var(--muc-900); font-variant-numeric:tabular-nums; word-break:break-all; user-select:all; }
.zl-buoc { margin:0; padding-left:22px; display:flex; flex-direction:column; gap:8px; font-size:14.5px; }
.zl-buoc .nut { margin-left:6px; }
.zl-email { border-top:1px solid var(--n-200); padding-top:10px; }
.zl-email summary { cursor:pointer; font-size:14px; color:var(--n-600); font-weight:600; padding:4px 0; }
.zl-email[open] summary { margin-bottom:10px; }
@media (max-width:420px) { .zl-ma { font-size:28px; letter-spacing:.2em; } }