@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;600;700;800&display=swap');

/* app.css — khung khu vực ĐÃ ĐĂNG NHẬP (v40). Cặp với server/app-chrome.ts.
 *
 * TỰ CHỨA có chủ đích: portal tài khoản không nạp styles.css (nó chỉ có <style> nội tuyến),
 * còn portal cộng đồng thì có. File này phải render GIỐNG NHAU ở cả hai — nên nó tự khai
 * biến của mình, và mọi phần tử trong thanh tự đặt màu/cỡ chữ/gạch chân thay vì thừa kế.
 *
 * KHÔNG style phần tử trần (a, body, img, .card, .btn, .badge): nó dùng chung trang với CSS
 * nội tuyến của account-pages.ts và với styles.css toàn site, đụng vào là đổi cả hai nơi.
 */

:root {
  --app-bar-h: 56px;
  /* Bề ngang khu vực đăng nhập. PHẢI bằng `--wrap` của styles.css, vì thanh app đứng ngay trên
     <main class="wrap"> của portal cộng đồng và portal khoá học — lệch một chút là logo và
     tiêu đề trang không thẳng hàng, và mắt bắt được ngay dù không đo. Khai lại ở đây chứ không
     đọc var(--wrap): portal tài khoản KHÔNG nạp styles.css (xem đầu file), nên đọc biến của
     nó là rơi về giá trị dự phòng và ba khu vực lại lệch nhau. Đổi số này thì đổi cả hai chỗ. */
  --app-wrap: 1140px;
  --app-ink: #1f2937;
  --app-muted: #6b7280;
  --app-line: #e5dfc8;
  --app-accent: #c2410c;
}

/* z-index 100: PHẢI cao hơn .nav marketing (z-index 50, styles.css). Trang portal không phát
   ra markup .nav nữa, nhưng luật của nó vẫn nằm trong cascade — chọn trùng 50 là mời rắc rối. */
.app-bar {
  position: sticky; top: 0; z-index: 100;
  background: #fff; border-bottom: 1px solid var(--app-line);
  font-family: 'Be Vietnam Pro', -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
/* Lề trái/phải nằm TRONG phép width, không phải padding — đúng công thức `.wrap` của
   styles.css, nên hai lớp thẳng hàng ở mọi bề ngang màn hình chứ không chỉ ở một mốc. */
.app-bar__in {
  display: flex; align-items: center; gap: 14px;
  width: min(100% - 40px, var(--app-wrap)); margin: 0 auto; min-height: var(--app-bar-h);
}
.app-bar__brand { display: flex; align-items: center; text-decoration: none; flex: none; }
.app-bar__brand img { height: 30px; width: auto; display: block; }
.app-bar__gap { flex: 1 1 auto; }
.app-bar__mail { font-size: .88rem; color: var(--app-muted); }
.app-bar__form { margin: 0; }
.app-bar__out {
  font: inherit; font-size: .88rem; font-weight: 600; color: var(--app-ink);
  padding: 7px 12px; border: 1px solid var(--app-line); border-radius: 10px;
  background: transparent; cursor: pointer; white-space: nowrap;
}
.app-bar__out:hover { background: #f5efd9; }
.app-bar__door:focus-visible, .app-bar__out:focus-visible, .app-bar__brand:focus-visible {
  outline: 2px solid var(--app-accent); outline-offset: 2px;
}

/* Điện thoại: bốn thứ KHÔNG vừa 375px. Bỏ theo thứ tự giá trị thấp dần — email trước (đã có
   ở trang Hồ sơ), rồi nhãn khu vực (ngay dưới thanh đã có dãy tab nói rõ đang ở đâu). Giữ
   lại: logo, lối nhảy, Đăng xuất — vì Đăng xuất mà tràn ra ngoài mép thì hội viên trên điện
   thoại lại KHÔNG có đường thoát, đúng cái lỗi thay đổi này sinh ra để chữa.
   Luật giấu email này THAY cho `.acc-head .muted{display:none}` của account-pages.ts — bản cũ
   khớp được chỉ vì cái span tình cờ mang class="muted"; quên chép sang là email hiện lại ở
   375px và đẩy vỡ thanh, không lỗi, không test nào đỏ.

   Lề ở đây CỐ Ý hẹp hơn `.wrap` (12px thay vì 20px), tức thanh rộng hơn nội dung 8px mỗi bên.
   Đo ở 320px: siết về 20px thì dãy cửa còn 81px cho 4 icon và chúng bắt đầu chèn lên nút Đăng
   xuất. Đổi 8px lấy nguy cơ mất đường thoát trên máy hẹp là lỗ vốn — và ở 375px trở lên mắt
   không bắt được 8px. Trên desktop hai lớp khớp nhau tuyệt đối, đó mới là chỗ lệch nhìn thấy. */
@media (max-width: 560px) {
  :root { --app-bar-h: 48px; }
  .app-bar__in { gap: 8px; width: min(100% - 24px, var(--app-wrap)); }
  .app-bar__mail { display: none; }
  .app-bar__brand img { height: 22px; }
  .app-bar__out { padding: 5px 10px; font-size: .82rem; }
}

.app-foot {
  border-top: 1px solid var(--app-line); margin-top: 48px;
  font-family: 'Be Vietnam Pro', -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
.app-foot__in {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px;
  width: min(100% - 40px, var(--app-wrap)); margin: 0 auto; padding: 18px 0;
  font-size: .86rem; color: var(--app-muted);
}
.app-foot__in a { color: var(--app-muted); text-decoration: none; }
.app-foot__in a:hover { color: var(--app-ink); text-decoration: underline; }

/* ── Tầng 1: các CỬA sang khu vực khác ─────────────────────────────────────────────────────
   Cùng một dãy trên MỌI trang portal, nên hội viên nhảy khu vực trong đúng một cú bấm. Là
   <a> hết, không nút bật/tắt: khung này cố ý không có JavaScript (xem app-chrome.ts). */
.app-bar__doors { display: flex; align-items: center; gap: 2px; min-width: 0; }
.app-bar__door {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 6px 10px; border-radius: 8px; text-decoration: none;
  font-size: .9rem; font-weight: 600; color: var(--app-muted);
}
.app-bar__door:hover { background: #f5efd9; color: var(--app-ink); }
.app-bar__door.on { color: var(--app-accent); background: #fff8f2; }

/* ── Tầng 2: điều hướng riêng của module ───────────────────────────────────────────────────
   Trong LUỒNG BÌNH THƯỜNG, không dính. Chỉ tầng 1 dính, và nó giữ nguyên --app-bar-h —
   .cm-rail và .acc-nav tính `top` theo biến đó. */
.app-sub { border-bottom: 1px solid var(--app-line); background: #fff; }
.app-sub__in { width: min(100% - 40px, var(--app-wrap)); margin: 0 auto; }
.app-sub__in .cm-tabs { margin: 0; }

/* Đầu trang khu KHOÁ HỌC (tầng 2 của module đó). */
.co-tabs { display: flex; align-items: center; gap: 14px; padding: 10px 0; min-width: 0; }
.co-tabs__out { font-size: .9rem; font-weight: 600; color: var(--app-accent); text-decoration: none; white-space: nowrap; }
.co-tabs__title { font-size: .9rem; color: var(--app-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Điện thoại: nhãn cửa ẩn đi, CHỈ còn icon — ba cửa + Đăng xuất không vừa 375px nếu mang chữ.
   Thứ tự nhường chỗ: email (đã ẩn) → nhãn cửa → không bao giờ là Đăng xuất, vì mất nó là hội
   viên trên điện thoại lại không có đường thoát (đúng lỗi mà v40 sinh ra để chữa). */
@media (max-width: 560px) {
  .app-bar__lbl { display: none; }
  .app-bar__door { padding: 6px 8px; font-size: 1rem; }
  .app-sub__in { width: min(100% - 24px, var(--app-wrap)); }
}