/* =====================================================================
   Ngân hàng đề 360 — S14a, S14a2: khung chung các trang nhân sự (mon.html, giao-vien.html, quan-tri.html).
   Thanh menu bên trái xanh navy, chữ trắng; mỗi mục một biểu tượng nằm trong một ô tròn — mục đang mở thì ô tròn
   "tô vàng" như ô đáp án trên phiếu trắc nghiệm (cùng ý với logo: bốn ô A B C D, ô C tô vàng); thanh đầu trắng mảnh chỉ ghi đang ở đâu.
   S14a2: ô "Môn học" (môn đang làm việc) ở đầu thanh bên; nhóm theo việc: Ngân hàng đề, Học sinh, Ôn tập, Kiểm tra, Thống kê kết quả…
   Mọi cỡ tính bằng px: mon.css đặt cỡ chữ gốc 15px, chung.css 16px — khung vẫn y hệt nhau ở mọi trang.
   ===================================================================== */
:root {
  --kh-navy: #12283f;
  --kh-navy-2: #1c3a5c;
  --kh-vang: #e9b949;
  --kh-trang: #ffffff;
  --kh-nen: #f4f6f9;
  --kh-ke: #e1e6ee;
  --kh-chu-phu: #5b6b80;
  --kh-ben-chu: #cbd6e3;
  --kh-ben-mo: #8da2ba;
  --kh-rong: 240px;
  --kh-phong: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;
}

/* ----- thanh bên ----- */
.kh-ben {
  position: fixed; z-index: 40; top: 0; bottom: 0; left: 0; width: var(--kh-rong);
  display: flex; flex-direction: column;
  background: var(--kh-navy); color: var(--kh-ben-chu);
  font-family: var(--kh-phong); font-size: 14px; line-height: 20px; font-weight: 400;
  transform: translateX(-100%);
}
.kh-ben [hidden], .kh-ben .an { display: none !important; }
.kh-ben a, .kh-ben button, .kh-ben select, .kh-ben label { font-family: inherit; }
.kh-ben :focus-visible { outline: 2px solid var(--kh-vang); outline-offset: -2px; }

.kh-hieu { display: flex; align-items: center; gap: 12px; padding: 14px 16px 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
.kh-logo { flex: none; width: 40px; height: 40px; display: block; }
.kh-logo-nen { fill: var(--kh-navy-2); }
.kh-hieu-chu { display: flex; flex-direction: column; min-width: 0; }
.kh-ten-app { color: var(--kh-trang); font-size: 16px; line-height: 20px; font-weight: 700; letter-spacing: -0.005em; white-space: nowrap; }
.kh-truong { margin-top: 2px; color: #a9b8ca; font-size: 12px; line-height: 16px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kh-truong:empty { display: none; }
.kh-ho-tro { align-self: flex-start; margin-top: 4px; padding: 0 7px; border-radius: 999px; background: var(--kh-vang); color: var(--kh-navy); font-size: 11px; line-height: 18px; font-weight: 700; }

.kh-cuon { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 4px 10px 12px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.18) transparent; }

/* nhóm: tên nhóm là nút thu / mở; nhóm không tên (Tổng quan, Tài khoản) không có dòng tên */
.kh-nhom-tron { padding-top: 6px; }
.kh-nhom[data-nhom="cuoi"] { margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, 0.07); }
.kh-nhom-dau { display: flex; align-items: center; justify-content: space-between; width: 100%; margin: 0; padding: 12px 10px 4px;
  background: none; border: 0; border-radius: 6px; color: var(--kh-ben-mo); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.02em; text-align: left; cursor: pointer; }
.kh-nhom-dau:hover { color: var(--kh-trang); }
.kh-mui { width: 14px; height: 14px; flex: none; transition: none; }
.kh-nhom-dau[aria-expanded="false"] .kh-mui { transform: rotate(-90deg); }
.kh-ds { display: flex; flex-direction: column; gap: 1px; }

/* một mục: biểu tượng trong ô tròn + nhãn + số đếm */
.kh-muc { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 34px; margin: 0; padding: 3px 10px 3px 5px;
  background: none; border: 0; border-radius: 8px; color: var(--kh-ben-chu); font-size: 14px; line-height: 20px; font-weight: 500;
  text-align: left; text-decoration: none; cursor: pointer; }
.kh-muc:hover { background: rgba(255, 255, 255, 0.06); color: var(--kh-trang); }
.kh-icon { display: block; width: 18px; height: 18px; flex: none; }
.kh-bieu { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: var(--kh-ben-mo); }
.kh-muc:hover .kh-bieu { color: var(--kh-trang); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.35); }
.kh-muc.kh-chon { background: var(--kh-navy-2); color: var(--kh-trang); font-weight: 600; }
.kh-muc.kh-chon .kh-bieu { background: var(--kh-vang); color: var(--kh-navy); box-shadow: none; }
.kh-nhan { flex: 1 1 auto; min-width: 0; }
.kh-ngoai { width: 13px; height: 13px; flex: none; opacity: 0.6; }
.kh-dem { flex: none; min-width: 20px; padding: 0 6px; border-radius: 10px; background: var(--kh-vang); color: var(--kh-navy); font-size: 12px; line-height: 20px; font-weight: 700; text-align: center; }

/* ô "Môn học": môn đang làm việc của các mục theo môn */
.kh-mon { flex: none; padding: 10px 14px 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
.kh-mon-nhan { display: block; margin: 0 0 5px 2px; color: var(--kh-ben-mo); font-size: 12px; line-height: 16px; font-weight: 600; }
.kh-mon-chon:empty { display: none; }
.kh-chon-boc { position: relative; display: block; }
.kh-chon-icon { position: absolute; left: 10px; top: 9px; width: 16px; height: 16px; color: var(--kh-vang); pointer-events: none; }
select.kh-chon-mon { display: block; width: 100%; height: 34px; margin: 0; padding: 0 30px 0 34px; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 8px;
  background: var(--kh-navy-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23e9b949' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center;
  color: var(--kh-trang); font-size: 14px; line-height: 20px; font-weight: 600; cursor: pointer; -webkit-appearance: none; appearance: none; }
select.kh-chon-mon:hover { border-color: rgba(255, 255, 255, 0.32); }
select.kh-chon-mon option, select.kh-chon-mon optgroup { color: #12283f; background: #fff; }

/* chân thanh bên: người đang đăng nhập, nút Đăng xuất */
.kh-chan { flex: none; padding: 8px 10px 10px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.kh-nguoi { display: flex; align-items: center; gap: 10px; padding: 7px 6px 7px 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.04); }
.kh-anh { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--kh-vang); color: var(--kh-navy); font-size: 12px; line-height: 1; font-weight: 700; }
.kh-anh:empty { display: none; }
.kh-nguoi-chu { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.kh-ten { color: var(--kh-trang); font-size: 13.5px; line-height: 18px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kh-vai { color: #a9b8ca; font-size: 12px; line-height: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kh-vai:empty { display: none; }
.kh-thoat { flex: none; display: grid; place-items: center; width: 34px; height: 34px; margin: 0; padding: 0; background: none; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 8px;
  color: var(--kh-ben-chu); cursor: pointer; }
.kh-thoat .kh-icon { width: 17px; height: 17px; }
.kh-thoat:hover { background: rgba(255, 255, 255, 0.08); color: var(--kh-trang); border-color: rgba(255, 255, 255, 0.34); }
.kh-ban { padding: 6px 4px 0; color: #6f86a1; font-size: 11px; line-height: 14px; }
.kh-ban:empty { display: none; }

/* ----- thanh đầu (trắng) ----- */
.kh-dau { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 8px; min-height: 52px; margin: 0; padding: 0 20px 0 10px;
  background: var(--kh-trang); border-bottom: 1px solid var(--kh-ke); font-family: var(--kh-phong); font-size: 14px; line-height: 20px; color: var(--kh-navy); }
.kh-nut-menu { flex: none; display: grid; place-items: center; width: 36px; height: 36px; margin: 0; padding: 0; background: none; border: 0; border-radius: 8px; color: var(--kh-navy); cursor: pointer; }
.kh-nut-menu:hover { background: #eef2f7; }
.kh-nut-menu svg { width: 20px; height: 20px; display: block; }
.kh-nut-menu:focus-visible { outline: 2px solid var(--kh-navy); outline-offset: 1px; }
.kh-dau-logo { flex: none; display: none; width: 28px; height: 28px; }
.kh-dau-logo svg { width: 28px; height: 28px; display: block; }
.kh-dau-logo .kh-logo-nen { fill: var(--kh-navy); }
.kh-duong { display: flex; align-items: center; gap: 2px; min-width: 0; flex: 1 1 auto; overflow: hidden; white-space: nowrap; }
/* tên dài (môn "Hoạt động trải nghiệm, hướng nghiệp") co lại có dấu …; chỗ đang đứng co ít nhất */
.kh-dd-muc { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; margin: 0; padding: 4px 6px; background: none; border: 0; border-radius: 6px;
  color: var(--kh-chu-phu); font: inherit; font-weight: 500; white-space: nowrap; }
button.kh-dd-muc { cursor: pointer; }
button.kh-dd-muc:hover { background: #eef2f7; color: var(--kh-navy); }
.kh-dd-hien { flex-shrink: 0.25; color: var(--kh-navy); font-weight: 700; }
.kh-dd-nhom { display: flex; align-items: center; gap: 2px; flex: 0 1 auto; min-width: 0; }
.kh-dd-cach { flex: none; color: #a3afbf; }

/* liên kết "Bỏ qua menu": chỉ hiện khi được Tab tới */
.kh-bo-qua { position: fixed; z-index: 60; top: 8px; left: 8px; padding: 8px 14px; border-radius: 8px; background: var(--kh-vang); color: var(--kh-navy);
  font-family: var(--kh-phong); font-size: 14px; line-height: 20px; font-weight: 600; text-decoration: none; transform: translateY(-160%); }
.kh-bo-qua:focus { transform: none; outline: 2px solid var(--kh-navy); outline-offset: 2px; }
.kh-chua [tabindex="-1"]:focus { outline: none; }

/* ----- bố cục: bề rộng ≥ 1200px thì ghim thanh bên (còn ≥ 960px cho nội dung); hẹp hơn thì thanh bên là ngăn kéo ----- */
@media (min-width: 1200px) {
  html.kh-co:not(.kh-gon) .kh-ben { transform: none; }
  html.kh-co:not(.kh-gon) .kh-chua { padding-left: var(--kh-rong); }
  html.kh-gon .kh-dau-logo { display: block; }
  /* thông báo nổi, thanh "đã chọn n câu" canh giữa phần nội dung chứ không giữa cả màn hình */
  html.kh-co:not(.kh-gon) .thong-bao,
  html.kh-co:not(.kh-gon) #thong-bao,
  html.kh-co:not(.kh-gon) .thanh-cc { left: calc(50% + var(--kh-rong) / 2); }
}
@media (max-width: 1199.98px) {
  .kh-ben { width: min(300px, 86vw); }
  .kh-dau-logo { display: block; }
  html.kh-mo .kh-ben { transform: none; box-shadow: 0 0 40px rgba(8, 18, 32, 0.45); }
  html.kh-mo .kh-man-che { display: block; }
  html.kh-mo, html.kh-mo body { overflow: hidden; }
}
@media (max-width: 560px) {
  .kh-dau { padding-right: 12px; }
  .kh-dd-nhom { display: none; }
}
/* điện thoại xoay ngang: cả thanh bên cuộn được, chân thanh bên không chiếm hết chỗ của các mục */
@media (max-height: 560px) {
  .kh-mon { padding-top: 6px; padding-bottom: 8px; }
  .kh-ben { overflow-y: auto; }
  .kh-cuon { flex: none; overflow: visible; }
}
.kh-man-che { display: none; position: fixed; inset: 0; z-index: 39; background: rgba(8, 18, 32, 0.45); }
@media (prefers-reduced-motion: no-preference) {
  html.kh-san .kh-ben { transition: transform 0.2s ease; }
  html.kh-san .kh-chua { transition: padding-left 0.2s ease; }
}

@media print {
  .kh-ben, .kh-dau, .kh-man-che, .kh-bo-qua { display: none !important; }
  html.kh-co .kh-chua { padding-left: 0 !important; transition: none !important; }
}