/* ==========================================================================
   Giao diện gọn (11/2026) — dùng chung web học sinh + trang quản trị, nạp SAU CÙNG.
   Thanh trên thấp, ô tìm kiếm nhỏ, logo và các nút biểu tượng (giỏ hàng, tin nhắn, thông báo) nhỏ lại,
   ảnh đại diện không kèm tên + email, tiêu đề trang và dòng mô tả gọn: nhường chỗ cho nội dung.
   Điện thoại: thanh biểu tượng bên trái chuyển xuống đáy màn hình.
   ========================================================================== */

/* ---------- thanh trên ---------- */
.topbar { padding: 12px 0 14px; gap: 4px; }
.topbar .search { flex: 0 1 300px; width: auto; height: 38px; padding: 0 14px; gap: 8px; font-size: 13.5px; background: var(--surface); border: 1px solid transparent; }
.topbar .search:hover { border-color: var(--line); }
.topbar .search:focus-within { background: #fff; border-color: var(--ink); box-shadow: none; }
.topbar .search svg { width: 16px; height: 16px; flex: none; }
.topbar .search input { font-size: 13.5px; }
.topbar .search .muted { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .search kbd { font-size: 10.5px; padding: 1px 6px; }
.topbar .icon-btn { width: 36px; height: 36px; border: 0; background: transparent; color: var(--ink-2); }
.topbar .icon-btn:hover, .topbar .icon-btn.on { background: var(--surface); color: var(--ink); }
.topbar .icon-btn svg { width: 19px; height: 19px; }
.topbar .icon-btn .dot { top: 6px; right: 6px; width: 8px; height: 8px; border-width: 1.5px; }
.topbar .icon-btn .badge { top: 0; right: -2px; min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px; border-width: 1.5px; }
.topbar .vsep { display: none; }
.topbar .me { gap: 0; margin-left: 6px; padding: 2px; border-radius: 99px; }
.topbar .me:hover { box-shadow: 0 0 0 2px var(--line); }
.topbar .me .av { width: 32px !important; height: 32px !important; }
.topbar .me > div, .topbar .me-name, .topbar .me-mail { display: none; }

/* ---------- logo + thanh bên ---------- */
.side .brand-dot { width: 36px; height: 36px; }
.side .brand-dot svg { width: 24px; height: 24px; }
.side .brand { margin-bottom: 22px; }
.side .nav-item svg { width: 20px; height: 20px; }
.side .nav-item { height: 40px; width: 40px; }
.app:not(.adm) { grid-template-columns: 72px minmax(0, 1fr); }

/* quản trị: thanh bên hẹp hơn, chữ nhỏ hơn, bỏ chữ "Quản trị" dưới logo */
.app.adm { grid-template-columns: 208px minmax(0, 1fr); }
.app.adm .side { padding: 18px 12px 16px; }
.app.adm .side .brand { margin-bottom: 18px; padding: 0 6px; }
.app.adm .side .brand-name { font-size: 19px; }
.app.adm .side .brand-name small { display: none; }
.app.adm .side .brand-dot { width: 32px; height: 32px; }
.app.adm .side .brand-dot svg { width: 21px; height: 21px; }
.app.adm .side .nav-item { height: 38px; width: 100%; padding: 0 12px; gap: 10px; font-size: 14px; border-radius: 10px; }
.app.adm .side .nav-item svg { width: 19px; height: 19px; }
.app.adm .side .side-foot .nav-item { height: 34px; font-size: 13px; }
.app.adm .side .side-foot { padding-top: 10px; }
/* tên mục đã có ở thanh bên: thanh tab không nhắc lại */
.app.adm .subnav-t { display: none; }
.app.adm .subnav { margin-bottom: 4px; }
@media (max-width: 1280px) {
  .app.adm { grid-template-columns: 72px minmax(0, 1fr); }
  .app.adm .side { padding: 18px 0 14px; }
  .app.adm .side .nav-item { width: 40px; padding: 0; }
}
html.adm-side-off .app.adm { grid-template-columns: minmax(0, 1fr); }

/* ---------- tiêu đề trang: nhỏ hơn, mô tả một dòng ---------- */
.ph { margin-bottom: 18px; gap: 12px; }
.ph-title { font-size: clamp(24px, 1.9vw, 30px); }
.ph-sub { margin-top: 4px; font-size: 13px; max-width: 72ch; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-sub:hover { white-space: normal; }
.page-sub { margin-top: 6px; font-size: var(--fs-sm); }

/* ---------- điện thoại: thanh biểu tượng chuyển xuống đáy ---------- */
@media (max-width: 720px) {
  .app:not(.adm) { grid-template-columns: minmax(0, 1fr); }
  .app:not(.adm) > .side {
    position: fixed; top: auto; bottom: 0; left: 0; right: 0; height: calc(58px + env(safe-area-inset-bottom)); width: auto;
    flex-direction: row; align-items: center; padding: 0 6px env(safe-area-inset-bottom); border-right: 0; border-top: 1px solid var(--line);
    background: rgba(255, 255, 255, .96); backdrop-filter: blur(10px); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; z-index: 60;
  }
  .app:not(.adm) > .side::-webkit-scrollbar { display: none; }
  .app:not(.adm) > .side .brand, .app:not(.adm) > .side .side-foot { display: none; }
  .app:not(.adm) > .side .nav { flex-direction: row; gap: 2px; margin: 0 auto; }
  .app:not(.adm) > .side .nav-item { width: 44px; height: 44px; flex: none; }
  .app:not(.adm) > .side .nav-item > span:not(.count) { display: none; }
  .app:not(.adm) > .main { padding: 0 14px 84px; }
  .app:not(.adm) .topbar { padding: 10px 0; }
  .app:not(.adm) .topbar .search { display: none; }
  .ph-title { font-size: 24px; }
  /* trang công khai: đầu trang chỉ giữ ảnh đại diện + nút Vào học */
  .pub-hdr .pub-actions { gap: 6px; }
  .pub-hdr .pub-actions .icon-btn { display: none; }
  /* hàng trượt ngang: cho cuộn thay vì tràn ra ngoài */
  .rail, .fo-exams, .fo-bar .seg, .er-hist, .gr-list { overflow-x: auto; scrollbar-width: none; max-width: 100%; }
  .er-hr { min-width: 0; flex-wrap: wrap; }
  .hof { grid-template-columns: minmax(0, 1fr) !important; min-width: 0; }
  .hof > * { min-width: 0; }
  .list-row { flex-wrap: wrap; row-gap: 6px; }
  .g3 { grid-template-columns: minmax(0, 1fr) !important; }
}