/* tokens-subset.css — design tokens my.ahappy.net (stem-tutor consent UI)
 * Chép subset từ thpt-stack/frontend/styles/tokens.css (chuẩn-prep, architect chốt).
 * navy #1B2B4B primary + amber #E88C3A accent · Lora + Plus Jakarta Sans.
 * @import Google Fonts hợp CSP mẫu-40-prep (style-src fonts.googleapis.com,
 * font-src fonts.gstatic.com).
 */
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap');

:root {
  /* Colors */
  --color-bg:             #F7F5F0;
  --color-surface:        #FFFFFF;
  --color-surface-raised: #FDFCF9;
  --color-primary:        #1B2B4B;
  --color-primary-hover:  #243863;
  --color-primary-dark:   #111E35;
  --color-accent:         #E88C3A;
  --color-accent-hover:   #CF7A2D;
  --color-accent-soft:    #FDF3E3;
  --color-text:           #1A1A1A;
  --color-text-muted:     #6B6B6B;
  --color-border:         #E2DDD5;
  --color-border-light:   #EDE9E3;
  --color-success:        #2D6A4F;
  --color-success-soft:   #D8F3DC;
  --color-danger:         #C1440E;
  --color-danger-soft:    #FDEEE8;
  --color-warn:           #B45309;
  --color-warn-soft:      #FEF3C7;

  /* Typography */
  --font-display: 'Lora', Georgia, serif;
  --font-body:    'Plus Jakarta Sans', system-ui, sans-serif;
  --text-sm:   13px;
  --text-base: 15px;
  --text-md:   17px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  32px;
  --leading-normal:  1.6;
  --leading-relaxed: 1.8;

  /* Spacing */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --space-12: 48px; --space-16: 64px;

  /* Radius + shadow */
  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-full: 9999px;
  --shadow-sm: 0 1px 4px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.10);
}

/* Base layout — dùng chung mọi trang */
* { box-sizing: border-box; }
body {
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: var(--leading-normal);
  margin: 0;
}
h1, h2, h3 { font-family: var(--font-display); color: var(--color-primary); }
a { color: var(--color-primary); }
a:hover { color: var(--color-accent); }

.page { max-width: 720px; margin: 0 auto; padding: var(--space-6) var(--space-5); }

/* Header */
.site-header {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface); border-bottom: 1px solid var(--color-border);
}
.site-header img { width: 32px; height: 32px; }
.site-header .brand { font-family: var(--font-display); font-weight: 600;
  font-size: var(--text-lg); color: var(--color-primary); }
.site-header .tagline { color: var(--color-text-muted); font-size: var(--text-sm); }
.site-header .nav { margin-left: auto; display: flex; gap: var(--space-4);
  align-items: center; font-size: var(--text-sm); }

/* Footer */
.site-footer {
  border-top: 1px solid var(--color-border); margin-top: var(--space-12);
  padding: var(--space-6) var(--space-5); color: var(--color-text-muted);
  font-size: var(--text-sm); text-align: center;
}
.site-footer a { color: var(--color-text-muted); }

/* Card + button */
.card { background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); padding: var(--space-5); margin-bottom: var(--space-4); }
.btn { font-family: var(--font-body); font-size: var(--text-base); font-weight: 600;
  padding: var(--space-2) var(--space-5); border-radius: var(--radius-md);
  border: none; cursor: pointer; }
.btn-primary { background: var(--color-primary); color: #fff; }
.btn-primary:hover { background: var(--color-primary-hover); }
.btn-danger { background: var(--color-surface); color: var(--color-danger);
  border: 1px solid var(--color-danger); }
.btn-danger:hover { background: var(--color-danger-soft); }

/* Status pills */
.pill { display: inline-block; padding: 2px var(--space-3); border-radius: var(--radius-full);
  font-size: var(--text-sm); font-weight: 600; }
.pill-open { background: var(--color-success-soft); color: var(--color-success); }
.pill-closed { background: var(--color-warn-soft); color: var(--color-warn); }
.pill-revoked { background: var(--color-danger-soft); color: var(--color-danger); }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: var(--space-3); border-bottom: 1px solid var(--color-border-light); }
th { font-size: var(--text-sm); color: var(--color-text-muted); font-weight: 600; }

/* Mobile breakpoint 640px (như prep) */
@media (max-width: 640px) {
  .page { padding: var(--space-4) var(--space-4); }
  .site-header { flex-wrap: wrap; }
  .site-header .nav { width: 100%; margin-left: 0; margin-top: var(--space-2); }
  table, thead, tbody, th, td, tr { display: block; }
  thead { display: none; }
  td { border: none; padding: var(--space-1) 0; }
  .card { padding: var(--space-4); }
}

/* ══ PORTAL HEADER (B2-A.2) ══════════════════════════════════════════════════
   Thay .site-header/.nav cũ: `.nav` là flex ngang nên <details> (block) bị ĐÈ
   LÊN NHAU. Class cũ GIỮ NGUYÊN ở trên (không xoá) phòng nơi khác còn dùng.
   Không emoji: emoji render khác nhau giữa Windows/Android/iOS/Linux.          */
.portal-header { min-height: 72px; background: var(--color-surface);
  border-bottom: 1px solid var(--color-border); }
.portal-header__inner { max-width: 1120px; min-height: 72px; margin: 0 auto;
  padding: 0 var(--space-5); display: flex; align-items: center; gap: var(--space-3); }

/* Bọc HAI link riêng (logo → ahappy.net · tên → /hanh-trinh), tự nó không phải link */
.portal-brand { display: flex; align-items: center; gap: var(--space-3); }
.portal-brand__logo { display: flex; line-height: 0; }
/* 32px — khớp `.nav-logo img` của ahappy.net và footer front-door */
.portal-brand__mark { width: 32px; height: 32px; }
/* Cỡ wordmark ĐO THEO các cổng khác, không tự chọn (Van San 2026-08-01):
   ahappy.net `.nav-logo` = 1.15rem ≈ 18.4px · prep dùng logo ảnh, không có
   wordmark chữ. Portal từng để 24px (--text-xl) ⇒ LỚN HƠN ~30%, lệch hệ.
   --text-md 17px là bậc gần 18.4px nhất trong thang token có sẵn. */
.portal-brand__name { font-family: var(--font-display); font-size: var(--text-md);
  font-weight: 700; line-height: 1; color: var(--color-primary);
  text-decoration: none; }
.portal-brand__name:hover { text-decoration: underline; }
/* "AHappy My" là MỘT cụm tên — cùng một màu navy, không tách sắc độ (Van San
   2026-08-01: hai màu làm cụm tên trông rời). Phân biệt bằng ĐỘ ĐẬM.
   (Bản trước dùng text-muted → hai màu; bản trước nữa định dùng amber → 2.55 trượt
   cả ngưỡng text-lớn 3.0.)

   🔴 08/08: Van San báo "My không cùng font với AHappy". Đo: KHÔNG phải lỗi tải font
   — cả hai đều là Lora (`--font-display`, kế thừa từ .portal-brand__name), CSS tải
   200, CSP cho phép fonts.googleapis.com, @import có đủ wght 400+700.

   Nguyên nhân là THỊ GIÁC: ở font SERIF, khoảng cách 700 → 400 làm đổi hẳn dáng chữ
   (chân serif mảnh đi, độ tương phản nét thay đổi) nên mắt đọc thành hai font khác
   nhau. Với sans-serif thì 700/400 vẫn nhận ra cùng họ; serif thì không.

   Sửa: rút xuống 600 — vẫn nhẹ hơn wordmark 700 đủ để "AHappy" nổi lên trước, nhưng
   giữ cùng dáng chữ. KHÔNG dùng 400. */
.portal-brand__suffix { font-weight: 600; }
/* Subtitle nhỏ hơn RÕ RỆT so với wordmark — trước đây hai phần ngang vai nhau
   nên wordmark bị yếu. */
.portal-brand__subtitle { font-size: var(--text-sm); color: var(--color-text-muted);
  padding-left: var(--space-1); }

.portal-nav { margin-left: auto; display: flex; align-items: center;
  gap: var(--space-5); }
.portal-nav__link { position: relative; text-decoration: none; font-weight: 600;
  font-size: var(--text-base); color: var(--color-text); padding: var(--space-2) 0; }
.portal-nav__link:hover { color: var(--color-primary); }
/* Active = gạch amber dày, KHÔNG underline mặc định (đây là nav, không phải CTA) */
.portal-nav__link.is-active { color: var(--color-primary); }
.portal-nav__link.is-active::after { content: ""; position: absolute;
  left: 0; right: 0; bottom: -2px; height: 3px; border-radius: 2px;
  background: var(--color-accent); }

/* ── user menu ─────────────────────────────────────────────────────────────
   <details>/<summary>: 0 JS ⇒ không nới CSP. ⚠️ hành vi native khác nhau giữa
   trình duyệt — phải eyes-on Chrome Android · Safari iPhone · Chrome Windows. */
.user-menu { position: relative; }
.user-menu summary { list-style: none; }
.user-menu summary::-webkit-details-marker { display: none; }

.user-menu__trigger { min-height: 44px; padding: 6px 10px 6px 6px;
  display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  border: 1px solid transparent; border-radius: 12px; background: transparent;
  color: var(--color-text); font-family: var(--font-body);
  font-size: var(--text-base); font-weight: 600; }
.user-menu__trigger:hover,
.user-menu[open] .user-menu__trigger { background: var(--color-surface-raised);
  border-color: var(--color-border); }
.user-menu__trigger:focus-visible { outline: 2px solid var(--color-primary);
  outline-offset: 2px; }

.user-avatar { width: 34px; height: 34px; display: grid; place-items: center;
  border-radius: 50%; background: var(--color-primary); color: #fff;
  font-family: var(--font-body); font-size: 13px; font-weight: 700; }

.user-menu__chevron { color: var(--color-text-muted); flex: none; }
.user-menu[open] .user-menu__chevron { transform: rotate(180deg); }

.user-menu__panel { position: absolute; z-index: 50; top: calc(100% + 10px);
  right: 0; width: 224px; padding: var(--space-2);
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: 14px; box-shadow: 0 12px 30px rgba(16,24,40,.12),
  0 2px 6px rgba(16,24,40,.06); }
.user-menu__item { min-height: 42px; padding: 9px 12px; display: flex;
  align-items: center; border-radius: 9px; color: var(--color-text);
  text-decoration: none; font-size: var(--text-base); font-weight: 500; }
.user-menu__item:hover { background: var(--color-surface-raised);
  color: var(--color-primary); }
.user-menu__divider { height: 1px; margin: 6px 4px;
  background: var(--color-border-light); }

/* ── mobile ≤640px ─────────────────────────────────────────────────────────
   KHÔNG cho trigger full-width trong hàng header (làm header cao + lộn xộn).
   Ẩn tên cạnh avatar; panel fixed 16px hai bên để không tràn ở 360px.        */
@media (max-width: 640px) {
  .portal-header__inner { padding: var(--space-3) var(--space-4);
    flex-wrap: wrap; gap: var(--space-2); }
  .portal-brand__subtitle { order: 3; flex-basis: 100%; font-size: 12px;
    padding-left: 46px; margin-top: -2px; }
  .portal-nav { gap: var(--space-3); }
  .user-menu__name { display: none; }
  .user-menu__trigger { padding: 4px; }
  .user-menu__panel { position: fixed; top: 64px; left: 16px; right: 16px;
    width: auto; }
}

/* ══ PORTAL FOOTER ══════════════════════════════════════════════════════════
   NGUYÊN TẮC (Van San chốt 2026-08-01) — footer chia theo VAI TRÒ CỔNG, không
   theo đa số phiếu:
     • marketing (ahappy.net): navy đậm, neo thương hiệu, hút mắt là ĐÚNG VAI
     • ứng dụng (prep · geo · lab · my): người dùng LÀM VIỆC trong đó ⇒ chân
       trang phải LÙI VỀ SAU, không cạnh tranh chú ý với nội dung
   Khảo sát thật: prep (không set → trắng) · geo (#F4EFE3 giấy) · lab (không
   set) đều SÁNG; chỉ front-door navy. my.ahappy.net thuộc nhóm ỨNG DỤNG.

   Cấu trúc/nội dung vẫn lấy từ ahappy.net: logo Cóc · wordmark · tagline
   "© 2026 AHappy. All Rights Reserved." — tagline thì portal dùng câu RIÊNG
   ("Mỗi ngày học, một bước trưởng thành."), không mượn câu thương hiệu front-door.

   ⚠️ Nền sáng trên nền sáng dễ khiến chân trang LẪN vào nội dung — mà đây là
   nơi đặt liên kết pháp lý PDPL (Quyền riêng tư · NĐ13 · email), phải DỄ TÌM,
   đó là yêu cầu tuân thủ chứ không chỉ thẩm mỹ. Nên:
     surface #FFF trên nền trang #F7F5F0 (kem) — nhưng tỉ lệ chỉ 1.09, gần như
     không phân biệt được ⇒ BẮT BUỘC thêm border-top rõ để tách khối.
   Đo tương phản trên #FFF: navy 14.06 · text 17.40 · muted 5.33 — đều PASS AA. */
.portal-footer { margin-top: var(--space-12); background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  padding: var(--space-8) var(--space-5) var(--space-5); }
.portal-footer__inner { max-width: 1120px; margin: 0 auto; }
.portal-footer__top { display: flex; justify-content: space-between;
  align-items: flex-start; gap: var(--space-5); padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-border-light); margin-bottom: var(--space-4); }

.portal-footer__brand { display: flex; align-items: center; gap: var(--space-2);
  text-decoration: none; font-family: var(--font-display); font-size: var(--text-md);
  font-weight: 700; color: var(--color-primary); }
/* Nền sáng ⇒ KHÔNG đảo màu logo (front-door đảo vì nền navy) */
.portal-footer__brand img { width: 32px; height: 32px; }
.portal-footer__tagline { font-size: var(--text-sm); color: var(--color-text-muted);
  margin-top: var(--space-1); }

.portal-footer__links { display: flex; gap: var(--space-5); flex-wrap: wrap;
  align-items: center; }
/* Link pháp lý: --color-text (17.40) chứ KHÔNG muted — phải dễ tìm, không lùi. */
.portal-footer__links a { color: var(--color-text); text-decoration: none;
  font-size: var(--text-sm); }
.portal-footer__links a:hover { color: var(--color-primary); text-decoration: underline; }

.portal-footer__copy { font-size: var(--text-sm); color: var(--color-text-muted); }

@media (max-width: 640px) {
  .portal-footer { padding: var(--space-5) var(--space-4) var(--space-4); }
  .portal-footer__top { flex-direction: column; gap: var(--space-4); }
  .portal-footer__links { gap: var(--space-3); }
}