/* ═══════════════════════════════════════════════════════════════════
   KMA SS — bảng giờ.
   Nền sương xám, mực xanh đá dịu, một sắc đất dành riêng cho vạch giờ.
   Chữ: Be Vietnam Pro (giao diện) + JetBrains Mono (giờ, mã, tiền).
   Hiệu ứng chỉ dùng transform/opacity để chạy mượt trên máy yếu.
   ═══════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════
   Hướng thiết kế

   Thứ đặc trưng nhất của app này là cái lưới tiết học: 12 vạch, cứng nhắc,
   lặp lại mỗi ngày suốt bốn năm. Nên toàn bộ ngôn ngữ thị giác lấy từ đó —
   mọi thứ nằm trên một thang 4px, các khối ngăn nhau bằng đúng loại đường kẻ
   mà lưới dùng, và bo góc nhỏ vì lưới không có góc tròn.

   Màu chính là xanh ultramarine, không phải xám xanh nhạt như bản trước.
   Màu tín hiệu đỏ đất chỉ dùng cho vạch giờ hiện tại và cảnh báo — nó có
   nghĩa "ngay bây giờ", nên không được đem đi trang trí chỗ khác.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --paper:      #F1F3F7;
  --surface:    #FFFFFF;
  --surface-2:  #F7F8FB;
  --surface-3:  #EAEDF3;
  --ink:        #141A24;
  --ink-2:      #3A4353;
  --muted:      #646E80;
  --faint:      #939CAB;
  --rule:       #E3E7EE;
  --rule-2:     #C7CEDA;
  --accent:     #2F3FD4;
  --accent-2:   #2431AC;
  --accent-soft:#E7E9FB;
  --on-accent:  #FFFFFF;
  --signal:     #D4453F;
  --positive:   #10796A;
  --positive-soft:#E2F1ED;
  --warn-bg:    #FBF0DA;
  --warn-ink:   #7A5411;
  --err-bg:     #FBE9E8;
  --err-ink:    #A3312C;

  --shadow-1: 0 1px 2px rgba(20, 26, 36, .06);
  --shadow-2: 0 4px 14px rgba(20, 26, 36, .10);
  --shadow-3: 0 18px 44px rgba(20, 26, 36, .20);

  /* Lưới không bo góc, nên mọi thứ khác cũng bo rất ít. */
  --r-sm: 5px;
  --r-md: 8px;
  --r-lg: 12px;

  --font: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --display: 'Bricolage Grotesque', 'Be Vietnam Pro', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;

  --row-h: 58px;
  --tap: 40px;
  --topbar-h: 54px;
  --dur: .16s;
  --ease: cubic-bezier(.2, .7, .3, 1);
}

[data-mode="dark"] {
  --paper:      #0E1219;
  --surface:    #161B24;
  --surface-2:  #1B212C;
  --surface-3:  #232B38;
  --ink:        #E6EAF1;
  --ink-2:      #C3CAD6;
  --muted:      #8A94A4;
  --faint:      #697384;
  --rule:       #242C38;
  --rule-2:     #35404F;
  --accent:     #8B95F5;
  --accent-2:   #A5ADF8;
  --accent-soft:#1D2440;
  --on-accent:  #0E1219;
  --signal:     #F0716A;
  --positive:   #4FB8A4;
  --positive-soft:#12281F;
  --warn-bg:    #2C2415;
  --warn-ink:   #E4C079;
  --err-bg:     #2C1917;
  --err-ink:    #F09A94;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-2: 0 4px 14px rgba(0, 0, 0, .5);
  --shadow-3: 0 18px 44px rgba(0, 0, 0, .65);
}

:root[data-motion="off"] *,
:root[data-motion="off"] *::before,
:root[data-motion="off"] *::after { animation: none !important; transition: none !important; }

/* ── nền tảng ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -.02em; }
h1, h2 { font-family: var(--display); font-weight: 700; }
p { margin: 0; }

button, input, select, textarea { font: inherit; color: inherit; }
button { -webkit-tap-highlight-color: transparent; }

svg { width: 18px; height: 18px; fill: none; stroke: currentColor;
      stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 5px; }

[hidden] { display: none !important; }

/* Chỉ hiện ở khổ hẹp; cặp đôi với .hide-sm. */
.only-sm { display: none; }

.eyebrow {
  display: block;
  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--faint);
}
.sub { color: var(--muted); font-size: 13px; }
.mono { font-family: var(--mono); }

.card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
}

/* ── nút ────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: var(--tap); padding: 0 15px;
  border: 1px solid transparent; border-radius: var(--r-sm);
  background: transparent; font-size: 13.5px; font-weight: 500;
  cursor: pointer; white-space: nowrap;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn:active { transform: scale(.97); }
.btn svg { width: 17px; height: 17px; }
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover:not(:disabled) { background: var(--accent-2); }
.btn-primary:disabled { opacity: .55; cursor: default; }
.btn-quiet { border-color: var(--rule-2); color: var(--ink-2); background: var(--surface); }
.btn-quiet:hover { background: var(--surface-3); }
.btn-danger { color: var(--err-ink); border-color: transparent; background: var(--err-bg); }
.btn-block { width: 100%; height: 44px; }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 36px; min-width: 36px; padding: 0 9px;
  border: 1px solid var(--rule-2); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink-2);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.icon-btn:hover { background: var(--surface-3); color: var(--ink); }
.icon-btn:active { transform: scale(.96); }
.icon-btn.is-wide { padding: 0 13px; font-size: 13px; font-weight: 500; }

.btn-group { display: inline-flex; }
.btn-group .icon-btn { border-radius: 0; margin-left: -1px; }
.btn-group .icon-btn:first-child { border-radius: var(--r-sm) 0 0 var(--r-sm); margin-left: 0; }
.btn-group .icon-btn:last-child  { border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.icon-btn:hover, .icon-btn:focus-visible { position: relative; z-index: 1; }

.is-loading .ico-refresh { animation: spin .8s linear infinite; transform-origin: 12px 12px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── segmented ──────────────────────────────────────────────────── */
.segmented { display: inline-flex; padding: 3px; gap: 2px; background: var(--surface-3); border-radius: 9px; }
.segmented .seg {
  border: 0; border-radius: 6px; background: transparent; color: var(--muted);
  padding: 7px 14px; font-size: 13px; font-weight: 500; cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.segmented .seg:hover { color: var(--ink); }
.segmented .seg.is-active { background: var(--surface); color: var(--ink); }
.segmented-sm .seg { padding: 6px 11px; font-size: 12.5px; }

/* ── công tắc ───────────────────────────────────────────────────── */
.switch { position: relative; display: inline-block; flex: none; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch-track { display: block; width: 44px; height: 26px; border-radius: 999px; background: var(--rule-2);
  transition: background-color var(--dur) var(--ease); }
.switch-track::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
  border-radius: 50%; background: #fff; box-shadow: var(--shadow-1);
  transition: transform var(--dur) var(--ease);
}
.switch input:checked + .switch-track { background: var(--accent); }
.switch input:checked + .switch-track::after { transform: translateX(18px); }
.switch input:focus-visible + .switch-track { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── ô nhập ─────────────────────────────────────────────────────── */
.field { margin-bottom: 14px; }
.field label { display: block; margin-bottom: 6px; font-size: 12.5px; font-weight: 500; color: var(--ink-2); }
.hint { margin-top: 5px; font-size: 11.5px; color: var(--faint); line-height: 1.45; }
input[type="text"], input[type="password"], input[type="search"], input[type="number"],
input[type="date"], select, textarea {
  width: 100%; height: 44px; padding: 0 12px;
  background: var(--surface-2); border: 1px solid var(--rule-2);
  border-radius: var(--r-sm); font-size: 15px;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
  -webkit-appearance: none; appearance: none;
}
textarea { height: auto; padding: 10px 12px; resize: vertical; min-height: 72px; line-height: 1.5; }
select { background-image: none; }
input::placeholder, textarea::placeholder { color: var(--faint); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); background: var(--surface); }
.field input.is-bad { border-color: var(--signal); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.field-row .field { margin-bottom: 14px; }

.input-wrap { position: relative; }
.input-wrap input { padding-right: 64px; }
.input-action {
  position: absolute; right: 5px; top: 5px; height: 34px; padding: 0 10px;
  border: 0; border-radius: var(--r-sm); background: transparent;
  color: var(--muted); font-size: 12.5px; font-weight: 500; cursor: pointer;
}
.input-action:hover { background: var(--surface-3); color: var(--ink); }

.form-error { margin-top: 12px; padding: 10px 12px; border-radius: var(--r-sm);
  background: var(--err-bg); color: var(--err-ink); font-size: 13px; }
.fine-print { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--rule);
  color: var(--faint); font-size: 11.5px; line-height: 1.55; }

/* ── logo ───────────────────────────────────────────────────────── */
/* Tên trang là thứ người ta phải nhận ra ngay ở mọi màn hình, nên nó không đi
   theo thang chữ của phần nội dung.
   Ba thứ làm nó khó đọc trước đây: phông đơn cách ở weight 500 (mỏng), cỡ
   13,5–15px (nhỏ), và giãn chữ âm (chữ đơn cách vốn đã hẹp, kéo lại nữa thì
   dính vào nhau). Đảo cả ba. */
.mark { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.mark img { border-radius: 8px; flex: none; }
.mark-name {
  font-family: var(--mono); font-weight: 700; font-size: 19px;
  letter-spacing: .01em; color: var(--ink); white-space: nowrap;
}
.mark-name span { color: var(--accent); }

/* Trong thanh trên cùng của ứng dụng thì nhỏ hơn một chút, nhưng vẫn đậm. */
.mark-sm { gap: 8px; }
.mark-sm .mark-name { font-size: 16px; }

/* ══════════ ĐĂNG NHẬP ══════════ */
.login-view { min-height: 100dvh; display: grid; }
.login-grid { display: grid; grid-template-columns: 1.05fr .95fr; min-height: 100dvh;
  max-width: 1160px; width: 100%; margin: 0 auto; }
.login-pitch { display: flex; flex-direction: column; justify-content: center; gap: 20px;
  padding: 56px clamp(24px, 5vw, 60px); }
.pitch-title { font-size: clamp(26px, 3.2vw, 38px); line-height: 1.18; letter-spacing: -.03em; }
.pitch-sub { max-width: 42ch; color: var(--muted); font-size: 15px; }
.pitch-list { margin: 4px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; max-width: 46ch; }
.pitch-list li { padding-left: 15px; border-left: 2px solid var(--rule-2); font-size: 13.5px; color: var(--muted); }
.pitch-list b { display: block; color: var(--ink); font-weight: 600; font-size: 13.5px; }
.login-panel {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 32px 24px 56px;
}
.login-card { width: 100%; max-width: 380px; padding: 28px; box-shadow: var(--shadow-2); }
.login-panel .credit { width: 100%; max-width: 380px; margin-top: 20px; padding-top: 0; border-top: 0; }
.login-card h2 { font-size: 20px; }
.login-card .sub { margin: 5px 0 22px; }

@media (max-width: 900px) {
  .login-grid { grid-template-columns: 1fr; }
  .login-pitch { padding: 36px 22px 0; gap: 14px; }
  .pitch-list { display: none; }
  .login-panel { padding: 20px 18px 36px; justify-content: flex-start; }
  .login-card { padding: 22px; border: 0; box-shadow: none; background: transparent; }
}

/* ══════════ KHUNG ỨNG DỤNG ══════════ */
.app-view { min-height: 100dvh; display: flex; flex-direction: column; }

.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 16px;
  height: var(--topbar-h); padding: 0 clamp(14px, 3vw, 24px);
  background: var(--surface); border-bottom: 1px solid var(--rule);
}
/* Căn giữa thật.
   `margin: 0 auto` trên một flex item chỉ căn giữa nó *giữa hai phần tử hai
   bên*, chứ không phải giữa thanh — nên bên phải rộng hơn bên trái là nav lệch
   đi đúng bằng nửa khoảng chênh. Cho hai bên cùng `flex: 1` thì chúng luôn rộng
   bằng nhau và nav nằm đúng tâm, bất kể mỗi bên chứa gì. */
.topbar > .mark { flex: 1 1 0; min-width: 0; }
.topnav { flex: 0 0 auto; }
.topbar-end { flex: 1 1 0; min-width: 0;
  display: flex; align-items: center; justify-content: flex-end; gap: 10px; }

/* Bảy mục cộng logo cộng phần bên phải cần khoảng 1150px. Dưới mức đó, thu chữ
   trong nav trước, rồi mới ẩn tên thương hiệu — thứ ít thông tin nhất. */
@media (max-width: 1180px) {
  .topnav .seg { padding: 7px 10px; font-size: 12.5px; }
}
@media (max-width: 1040px) {
  /* Trước đây ẩn hẳn tên ở đây để nhường chỗ cho nav. Giữ lại nhưng thu nhỏ:
     một biểu tượng 22px không có chữ thì không ai đoán ra đang ở trang nào. */
  .mark-sm .mark-name { font-size: 15px; }
}

.app-main { flex: 1; width: 100%; max-width: 1400px; margin: 0 auto;
  padding: 16px clamp(14px, 3vw, 24px) 64px; }
.pane { display: none; }
.pane.is-active { display: block; animation: fadeup .18s var(--ease); }
@keyframes fadeup { from { opacity: 0; transform: translateY(4px); } }

.tabbar { display: none; }

.banner { margin-bottom: 14px; padding: 11px 14px; border-radius: var(--r-md); font-size: 13px; }
.banner.warn { background: var(--warn-bg); color: var(--warn-ink); }
.banner.err  { background: var(--err-bg);  color: var(--err-ink); }

.empty { margin-top: 14px; padding: 36px 20px; text-align: center; color: var(--muted); font-size: 13.5px;
  border: 1px dashed var(--rule-2); border-radius: var(--r-lg); background: var(--surface); }

.toast-root { position: fixed; left: 0; right: 0; bottom: calc(18px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; align-items: center; gap: 8px; z-index: 200; pointer-events: none; }
.toast { padding: 10px 16px; border-radius: 999px; background: var(--ink); color: var(--paper);
  font-size: 13px; box-shadow: var(--shadow-2); animation: toastin .2s var(--ease); }
@keyframes toastin { from { opacity: 0; transform: translateY(10px); } }

/* ── thanh tuần ─────────────────────────────────────────────────── */
.weekbar { padding: 14px 16px; margin-bottom: 14px; }
.weekbar-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.weekbar-title { font-size: 19px; margin-top: 2px; }
.weekbar-tools { display: flex; align-items: center; gap: 7px; }

.daystrip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: 14px; }
.day-chip {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 8px 2px 7px; border: 1px solid var(--rule); border-radius: var(--r-md);
  background: var(--surface-2); cursor: pointer;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.day-chip:active { transform: scale(.97); }
.dc-label { font-family: var(--mono); font-size: 10.5px; color: var(--faint); letter-spacing: .05em; }
.dc-num { font-size: 16px; font-weight: 600; line-height: 1.15; }
.dc-dots { display: flex; gap: 3px; height: 5px; margin-top: 3px; }
.dc-dots i { width: 4px; height: 4px; border-radius: 50%; background: var(--accent); opacity: .5; }
.day-chip.is-today { border-color: var(--accent); background: var(--accent-soft); }
.day-chip.is-today .dc-num, .day-chip.is-today .dc-label { color: var(--accent); }
.day-chip.is-selected { box-shadow: inset 0 0 0 1.5px var(--accent); border-color: var(--accent); }
.day-chip.is-empty .dc-num { color: var(--faint); font-weight: 500; }

.upnext { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px;
  padding: 10px 12px; border-radius: var(--r-md); background: var(--surface-2);
  border: 1px solid var(--rule); font-size: 13px; }
.un-tag { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 5px; background: var(--accent); color: var(--on-accent); }
.un-name { font-weight: 600; }
.un-meta { font-family: var(--mono); color: var(--muted); font-size: 12.5px; }
.upnext.is-live .un-tag { background: var(--signal); color: #fff; }

/* ── lưới thời khóa biểu ────────────────────────────────────────── */
.tt-wrap {
  border-radius: var(--r-lg); border: 1px solid var(--rule); background: var(--surface);
  /* Cuộn dọc vẫn thuộc về trang, ngang thì nhường cho cử chỉ vuốt đổi ngày. */
  touch-action: pan-y;
}
.tt { contain: layout paint; }

.tt-head { display: grid; position: sticky; top: var(--topbar-h); z-index: 20;
  background: var(--surface); border-bottom: 1px solid var(--rule-2);
  border-radius: var(--r-lg) var(--r-lg) 0 0; }
.tt-head-cell { padding: 9px 6px; display: flex; flex-direction: column; align-items: center; gap: 1px;
  border-left: 1px solid var(--rule); }
.tt-head-cell:first-child { border-left: 0; flex-direction: row; align-items: flex-end;
  justify-content: center; padding-bottom: 9px; }
.th-day { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.th-date { font-family: var(--mono); font-size: 11px; color: var(--faint); }
.tt-head-cell.is-today { background: var(--accent-soft); }
.tt-head-cell.is-today .th-day, .tt-head-cell.is-today .th-date { color: var(--accent); }
.th-unit { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }

.tt-body { display: grid; position: relative; overflow: hidden; border-radius: 0 0 var(--r-lg) var(--r-lg); }
.tt-gutter { position: relative; border-right: 1px solid var(--rule-2); background: var(--surface-2); }
.tt-tick { position: absolute; left: 0; right: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1px; border-bottom: 1px solid var(--rule); }
.tk-num { font-family: var(--mono); font-size: 12px; font-weight: 500; color: var(--ink-2); }
.tk-time { font-family: var(--mono); font-size: 10px; color: var(--faint); }
.tt-tick.is-now .tk-num { color: var(--signal); }

.tt-col { position: relative; border-left: 1px solid var(--rule); }
.tt-col.is-today { background: color-mix(in srgb, var(--accent-soft) 45%, transparent); }
.tt-col.is-weekend { background: color-mix(in srgb, var(--surface-3) 45%, transparent); }
.tt-slot { position: absolute; left: 0; right: 0; border-bottom: 1px solid var(--rule); }
.tt-slot.is-past { background: color-mix(in srgb, var(--surface-3) 40%, transparent); }

.tt-break { position: absolute; left: 0; right: 0; border-bottom: 1px solid var(--rule);
  background: repeating-linear-gradient(135deg, transparent 0 5px,
    color-mix(in srgb, var(--rule-2) 55%, transparent) 5px 6px); }
.tt-gutter .tt-break { display: flex; align-items: center; justify-content: center; background: none;
  font-family: var(--mono); font-size: 8.5px; letter-spacing: .06em; color: var(--faint); }

.tt-now { position: absolute; left: 0; right: 0; height: 0; z-index: 15; pointer-events: none; }
.tt-now::after { content: ''; position: absolute; left: var(--gutter); right: 0; top: -1px;
  height: 2px; background: var(--signal); }
.now-chip { position: absolute; left: 4px; top: -9px; width: calc(var(--gutter) - 8px);
  text-align: center; font-family: var(--mono); font-size: 10px; font-weight: 500; line-height: 18px;
  color: #fff; background: var(--signal); border-radius: 5px; }

/* khối môn học */
.ev {
  position: absolute; overflow: hidden; display: flex; padding: 0; text-align: left;
  border-radius: var(--r-sm); background: var(--ev-bg); border: 1px solid var(--ev-line);
  cursor: pointer; -webkit-appearance: none; appearance: none;
  transition: transform var(--dur) var(--ease);
}
.ev::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--ev-key); }
.ev:hover { transform: translateY(-1px); z-index: 12; }
.ev:active { transform: scale(.985); }
.ev-in { padding: 6px 7px 6px 10px; min-width: 0; width: 100%; display: flex; flex-direction: column; gap: 2px; }
.ev-title { font-size: 12.5px; font-weight: 600; line-height: 1.25; color: var(--ev-ink);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ev-foot { margin-top: auto; display: flex; gap: 6px; align-items: baseline; min-width: 0; }
.ev-time, .ev-room { font-family: var(--mono); font-size: 10.5px; color: var(--ev-ink); opacity: .8; }
.ev-room { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev.is-short .ev-in { padding: 4px 6px 4px 9px; gap: 0; flex-direction: row; align-items: baseline; }
.ev.is-short .ev-title { -webkit-line-clamp: 1; font-size: 11.5px; }
.ev.is-short .ev-foot { margin: 0 0 0 auto; }
.ev.is-short .ev-time { display: none; }
.ev.is-narrow .ev-room, .ev.is-narrow .ev-time { font-size: 9.5px; }
.ev.is-done { opacity: .62; }
.ev.is-live { box-shadow: inset 0 0 0 1.5px var(--signal); }
.ev-flag { position: absolute; right: 4px; top: 4px; width: 5px; height: 5px; border-radius: 50%;
  background: var(--ev-key); }

/* ══════════ DANH SÁCH MÔN ══════════ */
.stat-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  margin-bottom: 12px; overflow: hidden; }
.stat { padding: 14px 16px; border-left: 1px solid var(--rule); }
.stat:first-child { border-left: 0; }
.stat-num { font-family: var(--mono); font-size: 22px; font-weight: 500; letter-spacing: -.02em; }
.stat-lab { font-size: 12px; color: var(--muted); margin-top: 1px; }

.toolbar { display: flex; gap: 10px; margin-bottom: 12px; }
.search { position: relative; flex: 1; min-width: 0; }
.search svg { position: absolute; left: 12px; top: 50%; margin-top: -9px; width: 17px; height: 17px; color: var(--faint); }
.search input { padding-left: 36px; height: var(--tap); font-size: 14px; background: var(--surface); }
.search input::-webkit-search-cancel-button { -webkit-appearance: none; }

.course-list { display: grid; gap: 10px; }
.course {
  display: flex; gap: 12px; padding: 14px 15px; text-align: left; width: 100%;
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-lg);
  cursor: pointer; contain: content;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.course:hover { border-color: var(--rule-2); }
.course:active { transform: scale(.995); }
.course-key { width: 4px; border-radius: 3px; background: var(--ev-key); flex: none; }
.course-body { flex: 1; min-width: 0; }
.course-top { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.course-name { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.course-code { font-family: var(--mono); font-size: 11px; color: var(--muted);
  background: var(--surface-3); padding: 2px 6px; border-radius: 5px; }
.badge { font-size: 10.5px; font-weight: 500; padding: 2px 7px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent); }
.course-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; }
.meta-item { font-size: 12.5px; color: var(--muted); }
.meta-item b { color: var(--ink-2); font-weight: 500; }
.meta-item .mono { font-size: 12px; }
.course-time { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--rule);
  font-size: 12.5px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 6px; }
.pill { font-family: var(--mono); font-size: 11px; padding: 2px 7px; border-radius: 5px;
  background: var(--surface-2); border: 1px solid var(--rule); color: var(--ink-2); }

/* ══════════ HỌC PHÍ ══════════ */
.money-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-bottom: 12px; }
.money-card { padding: 16px; }
.money-lab { font-size: 12.5px; color: var(--muted); }
.money-num { font-family: var(--mono); font-size: 23px; font-weight: 500; letter-spacing: -.02em; margin-top: 3px; }
.money-num small { font-size: 12px; color: var(--muted); margin-left: 3px; font-family: var(--font); }
.money-card.is-paid .money-num { color: var(--positive); }
.money-card.is-due .money-num { color: var(--signal); }
.money-card.is-clear .money-num { color: var(--positive); }

.progress { height: 8px; border-radius: 999px; background: var(--surface-3); overflow: hidden; margin: 12px 0 6px; }
.progress i { display: block; width: 100%; height: 100%; border-radius: 999px; background: var(--positive);
  transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.progress-note { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); }

.section { margin-top: 16px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.section-head h3 { font-size: 15px; }
.section-head span { font-size: 12.5px; color: var(--muted); }

.rowlist { overflow: hidden; }
.rowitem { display: flex; align-items: center; gap: 12px; padding: 13px 15px; border-top: 1px solid var(--rule); }
.rowitem:first-child { border-top: 0; }
.rowitem-main { flex: 1; min-width: 0; }
.rowitem-title { font-size: 13.5px; font-weight: 500; }
.rowitem-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.rowitem-amt { font-family: var(--mono); font-size: 14px; text-align: right; white-space: nowrap; }
.rowitem-amt.is-paid { color: var(--positive); }
.rowitem-amt.is-due { color: var(--signal); }

/* ══════════ CÀI ĐẶT ══════════ */
.settings { max-width: 640px; display: grid; gap: 12px; }
.set-block { padding: 4px 18px 8px; }
.set-block h3 { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--faint); padding: 15px 0 10px; font-weight: 500; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 13px 0; border-top: 1px solid var(--rule); }
.set-text { min-width: 0; }
.set-text b { display: block; font-weight: 500; font-size: 13.5px; }
.set-text span { display: block; margin-top: 2px; color: var(--muted); font-size: 12.5px; }
#settings-student { font-family: var(--mono); }
.keys { list-style: none; margin: 0; padding: 0 0 4px; }
.keys li { display: flex; align-items: center; gap: 7px; padding: 8px 0; border-top: 1px solid var(--rule);
  font-size: 13px; color: var(--muted); }
.keys li span { margin-left: 6px; }
kbd { font-family: var(--mono); font-size: 11px; min-width: 24px; text-align: center; padding: 3px 6px;
  border-radius: 5px; background: var(--surface-3); border: 1px solid var(--rule-2); border-bottom-width: 2px; color: var(--ink-2); }
.set-foot { color: var(--faint); font-size: 11.5px; margin-top: 12px; border-top: 1px solid var(--rule); padding: 12px 0 6px; }

/* ══════════ MODAL / SHEET ══════════ */
.overlay { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center;
  padding: 20px; background: rgba(15, 20, 26, .48); animation: fade .15s var(--ease); }
@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
@keyframes slideup { from { transform: translateY(100%); } }

.sheet { width: 100%; max-width: 420px; max-height: calc(100dvh - 40px);
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-lg);
  box-shadow: var(--shadow-3); animation: rise .18s var(--ease); overflow: hidden; }
.sheet-wide { max-width: 520px; }
.sheet-head { display: flex; align-items: flex-start; gap: 12px; padding: 16px; border-bottom: 1px solid var(--rule); flex: none; }
.sheet-key { width: 4px; align-self: stretch; border-radius: 3px; background: var(--ev-key); flex: none; }
.sheet-head h3 { font-size: 16px; line-height: 1.3; flex: 1; }
.sheet-close { flex: none; width: 32px; height: 32px; border: 0; border-radius: var(--r-sm);
  background: var(--surface-3); color: var(--muted); cursor: pointer; font-size: 19px; line-height: 1; }
.sheet-close:hover { color: var(--ink); }
.sheet-body {
  padding: 4px 16px 16px; overflow-y: auto; -webkit-overflow-scrolling: touch; flex: 1;
  overscroll-behavior: contain;   /* cuộn hết cửa sổ không kéo theo trang phía sau */
}
.sheet-foot { display: flex; gap: 10px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--rule); background: var(--surface); flex: none; }
.sheet-foot .btn { flex: 1; }

.dl { display: grid; grid-template-columns: 104px 1fr; }
.dl dt { padding: 10px 0; color: var(--muted); font-size: 12.5px; border-top: 1px solid var(--rule); }
.dl dd { padding: 10px 0; margin: 0; font-size: 13px; border-top: 1px solid var(--rule); word-break: break-word; }
.dl dd.mono { font-size: 12.5px; }
.dl dt:first-of-type, .dl dd:first-of-type { border-top: 0; }

/* nhóm trường trong form thêm môn */
.form-group { margin-top: 14px; }
.form-group > .group-title { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--faint); margin-bottom: 10px; }
.meeting { border: 1px solid var(--rule); border-radius: var(--r-md); padding: 12px; margin-bottom: 10px;
  background: var(--surface-2); }
.meeting-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.meeting-head b { font-size: 13px; font-weight: 500; }
.link-btn { border: 0; background: none; color: var(--signal); font-size: 12.5px; cursor: pointer; padding: 4px 6px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  min-width: 40px; height: 38px; padding: 0 10px; border-radius: var(--r-sm);
  border: 1px solid var(--rule-2); background: var(--surface); color: var(--ink-2);
  font-size: 13px; cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.chip:active { transform: scale(.95); }
.chip.is-on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.chips-periods .chip { min-width: 0; flex: 1 0 calc(100% / 6 - 6px); font-family: var(--mono); font-size: 12.5px; }
.slot-note { margin-top: 8px; font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.add-meeting { width: 100%; height: 42px; border: 1px dashed var(--rule-2); border-radius: var(--r-md);
  background: transparent; color: var(--accent); font-size: 13px; font-weight: 500; cursor: pointer; }
.add-meeting:hover { background: var(--accent-soft); }

/* lịch chọn ngày */
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.cal-head h3 { font-size: 15px; }
.cal-nav { display: flex; gap: 6px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-dow { font-family: var(--mono); font-size: 10px; color: var(--faint); text-align: center; padding-bottom: 6px; }
.cal-day { aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  border-radius: var(--r-sm); font-size: 13.5px; cursor: pointer; border: 1px solid transparent;
  background: none; transition: background-color var(--dur) var(--ease); }
.cal-day:hover { background: var(--surface-3); }
.cal-day.is-out { color: var(--faint); opacity: .45; }
.cal-day.is-today { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.cal-day.in-week { background: var(--accent-soft); }
.cd-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--accent); opacity: 0; margin-top: 2px; }
.cal-day.has-class .cd-dot { opacity: .55; }

/* ══════════ ĐIỆN THOẠI ══════════ */
@media (max-width: 860px) {
  body { font-size: 14.5px; }
  .topbar { padding: 0 14px; }
  .mark-sm img { width: 26px; height: 26px; }
  .mark-sm .mark-name { font-size: 15.5px; }
  .topnav { display: none; }
  .hide-sm { display: none; }
  .only-sm { display: inline-flex; }
  .app-main { padding: 12px 12px calc(78px + env(safe-area-inset-bottom)); }

  .tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    display: grid; grid-template-columns: repeat(4, 1fr);
    background: var(--surface); border-top: 1px solid var(--rule);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .tabbar-btn { display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 9px 0 8px; border: 0; background: none; color: var(--faint); cursor: pointer;
    transition: color var(--dur) var(--ease); }
  .tabbar-btn svg { width: 21px; height: 21px; }
  .tabbar-btn span { font-size: 10.5px; font-weight: 500; }
  .tabbar-btn.is-active { color: var(--accent); }
  .tabbar-btn:active { transform: scale(.94); }

  .weekbar { padding: 12px; border-radius: var(--r-md); }
  .weekbar-title { font-size: 17px; }
  .weekbar-row { align-items: center; }
  .daystrip { gap: 4px; }
  .day-chip { padding: 8px 0 7px; }
  .tt-head { top: var(--topbar-h); }
  .ev-title { font-size: 13.5px; -webkit-line-clamp: 2; }
  .ev-time, .ev-room { font-size: 11.5px; }

  .stat-strip { grid-template-columns: repeat(3, 1fr); }
  .stat { padding: 12px 10px; }
  .stat-num { font-size: 19px; }
  .stat-lab { font-size: 11px; }
  .toolbar { position: sticky; top: var(--topbar-h); z-index: 15;
    padding: 8px 0; margin: -8px 0 8px; background: var(--paper); }
  .course { padding: 13px; border-radius: var(--r-md); }
  .money-grid { grid-template-columns: 1fr; gap: 8px; }
  .money-card { padding: 14px; border-radius: var(--r-md); }
  .money-num { font-size: 21px; }

  /* cửa sổ trượt lên từ đáy — quen tay trên điện thoại */
  .overlay { align-items: flex-end; padding: 0; }
  .sheet, .sheet-wide { max-width: none; width: 100%; max-height: 92dvh;
    border-radius: 18px 18px 0 0; border-bottom: 0; animation: slideup .22s var(--ease); }
  .sheet::before { content: ''; display: block; width: 38px; height: 4px; border-radius: 3px;
    background: var(--rule-2); margin: 8px auto 0; flex: none; }
  .sheet-head { padding: 12px 16px 14px; }
  .sheet-foot { padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
  .dl { grid-template-columns: 96px 1fr; }
  .chips-periods .chip { flex: 1 0 calc(100% / 4 - 6px); height: 42px; }
  .chip { height: 42px; }
}

@media (max-width: 380px) {
  .stat-strip { grid-template-columns: repeat(3, 1fr); }
  .daystrip { gap: 3px; }
  .dc-num { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ══════════ ĐIỂM & GPA ══════════ */
.gpa-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.gpa-card { padding: 16px; }
.gpa-lab { font-size: 12.5px; color: var(--muted); }
.gpa-num { font-family: var(--mono); font-size: 26px; font-weight: 500; letter-spacing: -.02em; margin-top: 2px; }
.gpa-num small { font-family: var(--font); font-size: 12px; color: var(--faint); margin-left: 4px; }
.gpa-note { font-size: 11.5px; color: var(--faint); margin-top: 3px; }
.gpa-card.is-good .gpa-num { color: var(--positive); }
.gpa-card.is-bad .gpa-num { color: var(--signal); }

.term { margin-top: 16px; }
.term-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.term-head h3 { font-size: 14.5px; }
.term-head span { font-family: var(--mono); font-size: 12px; color: var(--muted); }

.grade-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; width: 100%;
  text-align: left; background: none; border: 0; border-top: 1px solid var(--rule); cursor: pointer;
  transition: background-color var(--dur) var(--ease); }
.grade-row:first-child { border-top: 0; }
.grade-row:hover { background: var(--surface-2); }
.grade-main { flex: 1; min-width: 0; }
.grade-name { font-size: 13.5px; font-weight: 500; }
.grade-sub { font-family: var(--mono); font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.grade-score { font-family: var(--mono); font-size: 14px; color: var(--ink-2); width: 42px; text-align: right; }
.letter {
  flex: none; min-width: 40px; height: 30px; padding: 0 8px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-sm); font-family: var(--mono); font-size: 12.5px; font-weight: 500;
  background: var(--surface-3); color: var(--muted);
}
.letter.is-pass { background: var(--positive-soft); color: var(--positive); }
.letter.is-fail { background: var(--err-bg); color: var(--err-ink); }
.grade-row.is-excluded { opacity: .5; }
.grade-row.is-uncertain .grade-name::after {
  content: ' ⚠'; color: var(--warn-ink); font-size: 12px;
}

.paste-area { width: 100%; min-height: 190px; font-family: var(--mono); font-size: 12px;
  line-height: 1.55; white-space: pre; overflow-wrap: normal; overflow-x: auto; }
.steps { margin: 0 0 14px; padding-left: 20px; color: var(--muted); font-size: 13px; }
.steps li { margin-bottom: 5px; }
.steps b { color: var(--ink-2); font-weight: 500; }
.steps a { color: var(--accent); }

.preview-list { border: 1px solid var(--rule); border-radius: var(--r-md); overflow: hidden; margin-top: 6px; }
.preview-row { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-top: 1px solid var(--rule); }
.preview-row:first-child { border-top: 0; }
.preview-row.is-uncertain { background: var(--warn-bg); }
.preview-main { flex: 1; min-width: 0; }
.preview-name { font-size: 13px; font-weight: 500; }
.preview-sub { font-family: var(--mono); font-size: 11px; color: var(--muted); margin-top: 1px; }
.credit-input { width: 62px; height: 34px; padding: 0 8px; font-family: var(--mono);
  font-size: 13px; text-align: center; flex: none; }
.preview-note { font-size: 12px; color: var(--muted); margin: 10px 0 4px; }

/* ══════════ THANH CREDIT ══════════ */
.credit {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin-top: 28px; padding: 14px 0 4px;
  border-top: 1px solid var(--rule);
  font-size: 12.5px; color: var(--faint);
}
.credit-text b { font-weight: 600; color: var(--muted); }
.credit-links { display: inline-flex; gap: 6px; }
.credit-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 8px; color: var(--faint);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.credit-link svg { width: 17px; height: 17px; fill: currentColor; stroke: none; }
.credit-link:hover { background: var(--surface-3); color: var(--accent); }

@media (max-width: 860px) {
  .gpa-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .gpa-card { padding: 13px; border-radius: var(--r-md); }
  .gpa-num { font-size: 22px; }
  .grade-score { display: none; }
  .paste-area { min-height: 160px; font-size: 11.5px; }

  /* Trên điện thoại thanh credit chỉ hiện ở cuối trang Cài đặt,
     chỗ duy nhất người dùng cuộn tới hết mà không vướng thanh tab dưới. */
  .app-view .credit { display: none; }
  body[data-tab="settings"] .app-view .credit { display: flex; margin-top: 20px; }
}

/* ── bảng chọn khi nhập điểm ── */
.imp-legend { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 9px 0 11px; font-size: 12px; color: var(--muted); }
.imp-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 3px;
  margin-right: 5px; vertical-align: -1px; }
.imp-legend .k-new { background: var(--positive); }
.imp-legend .k-upd { background: var(--accent); }
.imp-legend .k-dup { background: var(--warn-ink); }
.imp-count { margin-left: auto; font-family: var(--mono); font-size: 12px; color: var(--ink-2); }

.imp-list { border: 1px solid var(--rule); border-radius: var(--r-md); overflow: hidden; }
.imp-row { display: flex; align-items: center; gap: 10px; padding: 9px 11px;
  border-top: 1px solid var(--rule); border-left: 3px solid transparent; }
.imp-row:first-child { border-top: 0; }
.imp-row.k-new { border-left-color: var(--positive); }
.imp-row.k-upd { border-left-color: var(--accent); }
.imp-row.k-dup { border-left-color: var(--warn-ink); background: var(--warn-bg); }
.imp-check { width: 20px; height: 20px; flex: none; margin: 0; accent-color: var(--accent); cursor: pointer; }
.imp-main { flex: 1; min-width: 0; cursor: pointer; }
.imp-name { font-size: 13px; font-weight: 500; }
.imp-sub { font-family: var(--mono); font-size: 11px; color: var(--muted); margin-top: 1px; }
.imp-scores { font-family: var(--mono); font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.imp-tag { flex: none; font-size: 10.5px; padding: 2px 7px; border-radius: 999px;
  background: var(--surface-3); color: var(--muted); white-space: nowrap; }
.imp-tag.k-upd { background: var(--accent-soft); color: var(--accent); }
.imp-tag.k-dup { background: color-mix(in srgb, var(--warn-ink) 18%, transparent); color: var(--warn-ink); }

/* ── chọn màu cho môn ── */
.swatches { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.swatch { width: 34px; height: 34px; border-radius: 9px; border: 2px solid transparent;
  cursor: pointer; padding: 0; transition: transform var(--dur) var(--ease); }
.swatch span { display: block; width: 100%; height: 100%; border-radius: 6px; }
.swatch:active { transform: scale(.92); }
.swatch.is-on { border-color: var(--ink); }
.swatch-auto { display: flex; align-items: center; justify-content: center;
  background: var(--surface-2); border: 1px dashed var(--rule-2); font-size: 10.5px; color: var(--muted); }
.swatch-auto.is-on { border-style: solid; border-color: var(--ink); }

@media (max-width: 860px) {
  .imp-scores { display: none; }
  .imp-row { padding: 10px; gap: 9px; }
}

/* ── điền nhanh số tín chỉ ── */
.fill-row { padding: 12px 0; border-top: 1px solid var(--rule); }
.fill-row:first-child { border-top: 0; }
.fill-row.is-done { opacity: .55; }
.fill-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.fill-name { font-size: 13.5px; font-weight: 500; flex: 1; min-width: 0; }
.fill-term { font-family: var(--mono); font-size: 11px; color: var(--faint); white-space: nowrap; }
.fill-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.fill-chips .chip { min-width: 44px; height: 38px; font-family: var(--mono); }
.fill-other { width: 62px; height: 38px; padding: 0 8px; text-align: center;
  font-family: var(--mono); font-size: 13px; }
.banner-action { display: flex; align-items: center; gap: 12px; }
.banner-action span { flex: 1; }
.banner-action .btn { height: 32px; padding: 0 12px; background: var(--surface); border-color: var(--rule-2); }

/* ── chuyển tuần / chuyển ngày ── */
@keyframes ttNext { from { opacity: .35; transform: translate3d(16px, 0, 0); } }
@keyframes ttPrev { from { opacity: .35; transform: translate3d(-16px, 0, 0); } }
.tt.slide-next { animation: ttNext .2s var(--ease); }
.tt.slide-prev { animation: ttPrev .2s var(--ease); }

/* ── khung chờ ── */
.skeleton-wrap { display: grid; gap: 8px; padding: 12px; }
.skeleton {
  border-radius: var(--r-sm);
  background: linear-gradient(90deg, var(--surface-2) 20%, var(--surface-3) 40%, var(--surface-2) 60%);
  background-size: 300% 100%;
  animation: shimmer 1.3s linear infinite;
}
@keyframes shimmer { to { background-position: -300% 0; } }

/* ── vòng quay khởi động ── */
.boot { position: fixed; inset: 0; display: grid; place-items: center; background: var(--paper); z-index: 60; }
.boot span { width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid var(--rule-2); border-top-color: var(--accent);
  animation: spin .7s linear infinite; }

/* ── cột trống ở chế độ một ngày ── */
.col-empty { position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 13px; color: var(--faint); pointer-events: none; }

@media (max-width: 860px) {
  /* Vùng chạm rộng hơn cho ngón tay. */
  .icon-btn { height: 40px; min-width: 40px; }
  .sheet-close { width: 36px; height: 36px; }
}

/* ══════════ CHAT ══════════ */
/* Khung cao cố định, chỉ vùng tin nhắn cuộn — ô nhập luôn nằm trong tầm ngón
   tay thay vì trôi theo trang. */
.chat {
  display: flex; flex-direction: column;
  /* Giá trị tạm cho lần vẽ đầu; fitChatHeight() đo lại ngay sau đó. */
  height: calc(100dvh - var(--topbar-h) - 96px);
  min-height: 280px;
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--r-lg); overflow: hidden;
}

.chat-bar { display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border-bottom: 1px solid var(--rule); background: var(--surface-2); }
.chat-rooms { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; flex: 1; }
.chat-rooms::-webkit-scrollbar { display: none; }
.room-btn { flex: none; padding: 7px 13px; border: 0; border-radius: 999px; cursor: pointer;
  background: transparent; color: var(--muted); font-size: 13px; font-weight: 500;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.room-btn:hover { color: var(--ink); }
.room-btn.is-active { background: var(--accent); color: var(--on-accent); }
.room-btn .room-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--signal); margin-left: 6px; vertical-align: 1px; }
.chat-meta { display: flex; align-items: center; gap: 8px; flex: none; }
.chat-online { font-family: var(--mono); font-size: 11px; color: var(--muted); white-space: nowrap; }
.chat-online::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--positive); margin-right: 5px; vertical-align: 1px; }

.chat-log { flex: 1; overflow-y: auto; overscroll-behavior: contain;
  padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.chat-day { align-self: center; margin: 12px 0 8px; padding: 3px 10px; border-radius: 999px;
  background: var(--surface-3); font-family: var(--mono); font-size: 10.5px; color: var(--muted); }
.chat-more { align-self: center; margin-bottom: 8px; }

.msg { display: flex; gap: 9px; padding: 3px 0; }
.msg-avatar { width: 30px; height: 30px; border-radius: 9px; flex: none;
  display: grid; place-items: center; font-size: 11.5px; font-weight: 600;
  background: var(--ev-bg); color: var(--ev-ink); }
.msg-body { min-width: 0; flex: 1; }
.msg-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 1px; }
.msg-author { font-size: 12.5px; font-weight: 600; color: var(--ev-key); }
.msg-time { font-family: var(--mono); font-size: 10.5px; color: var(--faint); }
.msg-text { font-size: 14px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg.is-mine .msg-text { color: var(--ink); }
.msg.is-gone .msg-text { color: var(--faint); font-style: italic; }
.msg-quote { border-left: 2px solid var(--rule-2); padding-left: 8px; margin-bottom: 3px;
  font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; cursor: pointer; }
.msg-quote b { color: var(--ink-2); font-weight: 500; }
/* Nối tiếp cùng người trong vài phút thì bỏ đầu, đọc như một đoạn liền. */
.msg.is-cont { padding-top: 0; }
.msg.is-cont .msg-avatar { visibility: hidden; height: 0; }
.msg.is-cont .msg-head { display: none; }
.msg-tools { display: flex; gap: 2px; align-self: flex-start; opacity: 0; flex: none;
  transition: opacity var(--dur) var(--ease); }
.msg:hover .msg-tools, .msg:focus-within .msg-tools { opacity: 1; }
.msg-tool { width: 28px; height: 28px; border: 0; border-radius: 7px; background: transparent;
  color: var(--faint); cursor: pointer; display: grid; place-items: center; }
.msg-tool:hover { background: var(--surface-3); color: var(--ink); }
.msg-tool svg { width: 15px; height: 15px; }
.msg-flash { animation: flash 1.1s var(--ease); }
@keyframes flash { from { background: var(--accent-soft); } }

.chat-reply { display: flex; align-items: center; gap: 10px; padding: 8px 14px;
  border-top: 1px solid var(--rule); background: var(--surface-2); font-size: 12.5px; color: var(--muted); }
.chat-reply span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.chat-form { padding: var(--s2); border-top: 1px solid var(--rule); background: var(--surface); }
.chat-form textarea { max-height: 132px; }
.chat-form .btn { width: 44px; height: 44px; padding: 0; }
.chat-empty { margin: auto; text-align: center; color: var(--faint); font-size: 13.5px; }

@media (max-width: 860px) {
  .chat { border-radius: var(--r-md); }
  /* Chỉ ở chế độ chat mới bỏ khoảng đệm đáy: khung chat đã tự chừa chỗ cho
     thanh tab, còn danh sách bài viết thì vẫn cần đệm để dòng cuối không bị
     thanh tab che mất. */
  body[data-tab="forum"][data-forum-mode="chat"] .app-main {
    padding-bottom: var(--s2); overflow: hidden;
  }
  .chat-log { padding: 10px; }
  .msg-tools { opacity: 1; }
  .msg-tool { width: 32px; height: 32px; }
  .tabbar-btn span { font-size: 10px; }
  .tabbar-btn svg { width: 20px; height: 20px; }
}

/* ══════════ DIỄN ĐÀN ══════════ */
/* Hai chế độ của diễn đàn — bài viết và chat — thay nhau chiếm chỗ này. */
.forum-view { min-width: 0; }
.forum-switch { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s3); }
.forum-switch .segmented { flex: 1; }
.forum-switch .seg { flex: 1; }

/* ── ảnh đại diện dùng lại ở mọi chỗ có tên người ── */
.ava { flex: none; border-radius: 10px; overflow: hidden; display: grid; place-items: center;
  background: var(--ev-bg); color: var(--ev-ink); font-weight: 600; }
.ava img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ava-30 { width: 30px; height: 30px; font-size: 11.5px; }
.ava-38 { width: 38px; height: 38px; font-size: 13px; border-radius: 12px; }
.ava-72 { width: 72px; height: 72px; font-size: 24px; border-radius: 20px; }
.admin-tag { font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 999px;
  background: var(--signal); color: #fff; letter-spacing: .02em; }

/* ── danh sách bài viết ── */
.post-list { display: grid; gap: 10px; }
.post-card { display: flex; gap: 12px; padding: 14px; width: 100%; text-align: left;
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-lg);
  cursor: pointer; contain: content;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.post-card:hover { border-color: var(--rule-2); }
.post-card:active { transform: scale(.995); }
.post-main { flex: 1; min-width: 0; }
.post-top { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 4px; }
.post-author { font-size: 12.5px; font-weight: 500; color: var(--ink-2); }
.post-dot { color: var(--faint); font-size: 11px; }
.post-when { font-family: var(--mono); font-size: 11px; color: var(--faint); }
.post-topic { font-size: 10.5px; padding: 2px 7px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent); }
.post-title { font-size: 15.5px; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; }
.post-excerpt { margin-top: 4px; font-size: 13px; color: var(--muted); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.post-foot { display: flex; align-items: center; gap: 14px; margin-top: 9px; }
.post-stat { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); }
.post-stat svg { width: 15px; height: 15px; }
.post-stat.is-on { color: var(--signal); }
.post-stat.is-on svg { fill: var(--signal); stroke: var(--signal); }
.pin-tag { font-size: 10.5px; padding: 2px 7px; border-radius: 999px;
  background: var(--warn-bg); color: var(--warn-ink); }

/* ── bài viết đầy đủ ── */
.post-full { font-size: 14.5px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.post-byline { display: flex; align-items: center; gap: 10px; padding: 10px 0 14px;
  border-bottom: 1px solid var(--rule); margin-bottom: 14px; }
.post-byline .who { flex: 1; min-width: 0; }
.post-byline .who b { display: block; font-size: 13.5px; font-weight: 600; }
.post-byline .who span { font-family: var(--mono); font-size: 11px; color: var(--faint); }
.post-actions { display: flex; gap: 8px; padding: 14px 0; border-top: 1px solid var(--rule);
  margin-top: 14px; flex-wrap: wrap; }
.comment { display: flex; gap: 10px; padding: 12px 0; border-top: 1px solid var(--rule); }
.comment-body { flex: 1; min-width: 0; }
.comment-head { display: flex; align-items: baseline; gap: 8px; }
.comment-head b { font-size: 12.5px; font-weight: 600; }
.comment-text { font-size: 13.5px; line-height: 1.5; white-space: pre-wrap;
  overflow-wrap: anywhere; margin-top: 2px; }

/* ── hồ sơ ── */
.cover { position: relative; height: 120px; margin: -4px -16px 0; background: var(--surface-3);
  background-size: cover; background-position: center; }
.cover-empty { display: grid; place-items: center; color: var(--faint); font-size: 12px; }
.profile-head { display: flex; align-items: flex-end; gap: 12px; margin: -30px 0 12px; position: relative; }
.profile-head .ava { border: 3px solid var(--surface); }
.profile-who { padding-bottom: 4px; min-width: 0; }
.profile-who b { display: block; font-size: 16px; }
.profile-who span { font-size: 12px; color: var(--muted); }
.profile-bio { font-size: 13.5px; line-height: 1.5; color: var(--ink-2); white-space: pre-wrap; }
.pick-row { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }

/* ── bảng quản trị ── */
.admin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: 8px; }
.admin-stat { padding: 10px; border-radius: var(--r-md); background: var(--surface-2);
  border: 1px solid var(--rule); }
.admin-stat b { display: block; font-family: var(--mono); font-size: 18px; font-weight: 500; }
.admin-stat span { font-size: 11px; color: var(--muted); }
.admin-user { display: flex; align-items: center; gap: 10px; padding: 11px 0;
  border-top: 1px solid var(--rule); }
.admin-user:first-child { border-top: 0; }
.admin-user .who { flex: 1; min-width: 0; }
.admin-user .who b { display: block; font-size: 13.5px; font-weight: 500; }
.admin-user .who span { font-family: var(--mono); font-size: 11px; color: var(--faint); }
.admin-user.is-muted { opacity: .6; }

@media (max-width: 860px) {
  .forum-switch { position: sticky; top: var(--topbar-h); z-index: 15;
    padding: 8px 0; margin: -8px 0 8px; background: var(--paper); }
  .post-card { padding: 12px; border-radius: var(--r-md); }
  .post-title { font-size: 15px; }
  .toolbar { flex-wrap: wrap; }
  .toolbar .chat-rooms { order: 3; width: 100%; }
  .admin-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ══════════ THÀNH PHẦN DÙNG LẠI ══════════ */
/* Thay cho các style nội tuyến rải rác trước đây: mỗi bố cục lặp lại đều có
   tên riêng, nên sửa một chỗ là đổi mọi nơi. */
.row-wrap { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.w-full { width: 100%; }
.mt-3 { margin-top: var(--s3); }
.mt-4 { margin-top: var(--s4); }

/* ô soạn tin dùng chung cho chat và bình luận */
.composer { display: flex; gap: var(--s2); align-items: flex-end; width: 100%; }
.composer textarea {
  flex: 1; min-height: 44px; height: 44px; max-height: 120px;
  padding: 11px var(--s3); resize: none; font-size: 15px; line-height: 1.4;
}
.composer .btn { flex: none; }

/* ── danh tính trên thanh trên cùng ── */
.me-chip {
  display: inline-flex; align-items: center; gap: var(--s2);
  height: 36px; padding: 3px 12px 3px 3px;
  border: 1px solid var(--rule); border-radius: 999px;
  background: var(--surface-2); cursor: pointer; max-width: 190px;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.me-chip:hover { background: var(--surface-3); border-color: var(--rule-2); }
.me-chip .ava { border-radius: 999px; }
.me-caret { width: 15px; height: 15px; flex: none; color: var(--faint); margin-left: -2px; }
.me-badge { display: none; flex: none; font-size: 9.5px; font-weight: 600; letter-spacing: .02em;
  padding: 1px 5px; border-radius: 999px; background: var(--signal); color: #fff; }
.me-chip.is-admin .me-badge { display: inline-block; }
.me-chip .me-name {
  font-size: 13px; font-weight: 500; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}

/* ══════════ THẺ HỒ SƠ ══════════ */
/* Bản trước để tên nằm cạnh ảnh đại diện, tức là đè lên ảnh bìa — chữ trắng
   trên một tấm ảnh bất kỳ thì đọc được hay không hoàn toàn do may rủi. Giờ chỉ
   ảnh đại diện tràn lên mép bìa, còn tên và mã sinh viên xuống hẳn phần nền
   đặc bên dưới, nơi tương phản luôn nằm trong tầm kiểm soát. */
/* Ảnh đại diện nằm trong dòng chảy bình thường và được kéo lên bằng lề âm, chứ
   không phải định vị tuyệt đối rồi chừa chỗ bằng một phép tính đệm. Lý do: với
   cách cũ, chiều cao ảnh bìa và vị trí ảnh đại diện là hai con số phải tự khớp
   nhau, mà chỉ cần một phép calc bị trình duyệt loại bỏ là tên rơi thẳng vào
   giữa ảnh đại diện. Ở đây tên luôn nằm sau ảnh đại diện vì dòng chảy quy định
   thế — hỏng lắm thì ảnh không đè lên bìa, chứ không bao giờ đè lên chữ.
   Ba biến dưới đây phải sửa cùng nhau, nên đặt sát nhau. */
.idcard {
  margin: 0 calc(var(--s4) * -1);
  --cover-h: 132px;
  --ava-h: 76px;
  --ava-pull: -38px;    /* bằng nửa --ava-h */
}
.idcard-cover {
  position: relative; height: var(--cover-h);
  background: var(--surface-3); background-size: cover; background-position: center;
}
.idcard-cover.is-empty { background-image: none; }

.idcard-body { padding: 0 var(--s4); }

.idcard-ava {
  position: relative;
  width: var(--ava-h); height: var(--ava-h);
  margin-top: var(--ava-pull);
}
.idcard-ava .ava {
  width: 100%; height: 100%; font-size: 24px;
  border: 4px solid var(--surface); border-radius: 24px;
}

.idcard-name { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s2); }
.idcard-name b { font-size: 18px; letter-spacing: -.01em; }
.idcard-code { font-family: var(--mono); font-size: 11.5px; color: var(--faint); margin-top: 2px; }

/* vùng bấm để đổi ảnh */
.pic-slot { position: relative; }
.pic-overlay {
  position: absolute; inset: 0; display: grid; place-items: center; gap: var(--s1);
  color: #fff; background: rgba(12, 16, 24, .5); cursor: pointer;
  opacity: 0; border: 0; padding: 0; width: 100%;
  transition: opacity var(--dur) var(--ease);
}
.pic-overlay span { font-size: 11.5px; font-weight: 500; }
.idcard-ava .pic-overlay { border-radius: 20px; inset: 4px; width: auto; }
.idcard-ava .pic-overlay span { display: none; }
.pic-slot:hover .pic-overlay, .pic-slot:focus-within .pic-overlay { opacity: 1; }

/* Máy cảm ứng không có hover, nên huy hiệu máy ảnh luôn hiện để biết bấm được. */
.pic-badge {
  position: absolute; right: var(--s2); bottom: var(--s2);
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; pointer-events: none;
  background: rgba(12, 16, 24, .55); color: #fff;
}
.idcard-ava .pic-badge { right: -1px; bottom: -1px; width: 24px; height: 24px;
  border: 2px solid var(--surface); }
.pic-badge svg { width: 14px; height: 14px; }
.pic-clear {
  position: absolute; right: var(--s2); top: var(--s2);
  height: 26px; padding: 0 var(--s2); border: 0; border-radius: 999px;
  background: rgba(12, 16, 24, .55); color: #fff; font-size: 11.5px; cursor: pointer;
}
.idcard-ava .pic-clear { right: auto; left: -4px; top: -4px; height: 22px; padding: 0 6px; font-size: 10.5px; }
@media (hover: hover) { .pic-slot:not(:hover) .pic-clear { opacity: 0; } }
.pic-clear { transition: opacity var(--dur) var(--ease); }

/* ── các nhóm trường trong hồ sơ ── */
.field-block { padding: var(--s4) 0; border-top: 1px solid var(--rule); }
.field-block:first-of-type { border-top: 0; }
.field-block > .group-title { margin-bottom: var(--s2); }
.field-inline { display: flex; align-items: center; gap: var(--s3); }
.field-inline .field-text { flex: 1; min-width: 0; }
.field-inline .field-text b { display: block; font-size: 13.5px; font-weight: 500; }
.field-inline .field-text span { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); }

/* ══════════ CỔNG VÀO DIỄN ĐÀN ══════════ */
.gate { max-width: 460px; margin: var(--s5) auto; padding: var(--s5); }
.gate-step { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--faint); }
.gate h2 { font-size: 20px; margin-top: var(--s1); }
.gate p { color: var(--muted); font-size: 13.5px; line-height: 1.55; margin-top: var(--s2); }
.gate-list { list-style: none; margin: var(--s4) 0 0; padding: 0; display: grid; gap: var(--s3); }
.gate-list li { display: flex; gap: var(--s3); font-size: 13px; color: var(--ink-2); line-height: 1.5; }
.gate-list svg { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--accent); }
.gate-agree { display: flex; gap: var(--s3); align-items: flex-start; margin-top: var(--s4);
  padding: var(--s3); border: 1px solid var(--rule-2); border-radius: var(--r-md);
  background: var(--surface-2); cursor: pointer; }
.gate-agree input { width: 20px; height: 20px; flex: none; margin: 0; accent-color: var(--accent); }
.gate-agree span { font-size: 13px; line-height: 1.5; }
.gate-actions { display: flex; gap: var(--s2); margin-top: var(--s4); }
.gate-actions .btn { flex: 1; }
.gate-dots { display: flex; gap: 5px; justify-content: center; margin-top: var(--s4); }
.gate-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--rule-2); }
.gate-dots i.is-on { background: var(--accent); width: 18px; border-radius: 3px; }

@media (max-width: 860px) {
  .me-chip { max-width: 150px; padding-right: var(--s2); }
  /* Đổi biến chứ không đổi thẳng chiều cao: vị trí ảnh đại diện và khoảng đệm
     của phần tên đều tính từ hai biến này. Sửa một nơi mà quên nơi kia là ảnh
     đại diện đè lên tên — đúng lỗi của bản trước. */
  .idcard { --cover-h: 108px; --ava-h: 68px; --ava-pull: -34px; }
  .gate { margin: var(--s3) 0; padding: var(--s4); }
}

/* ══════════ CHỮ CÓ ĐỊNH DẠNG ══════════ */
.rich-line { min-height: 1px; }
.rich-line.is-blank { height: .55em; }
.rich-quote {
  margin: var(--s2) 0; padding: var(--s2) var(--s3);
  border-left: 3px solid var(--rule-2); border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: var(--surface-2); color: var(--muted);
}
.rich-code {
  font-family: var(--mono); font-size: .9em; padding: 1px 5px; border-radius: 5px;
  background: var(--surface-3); color: var(--ink-2);
}
.rich-link { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }

.mention {
  display: inline; padding: 1px 5px; margin: 0 1px; border: 0; border-radius: 5px;
  font: inherit; font-weight: 500; cursor: pointer;
  background: var(--accent-soft); color: var(--accent);
  transition: background-color var(--dur) var(--ease);
}
.mention:hover { background: var(--accent); color: var(--on-accent); }

/* ── ô gợi ý tên ── */
.mention-box {
  position: fixed; z-index: 300; max-height: 210px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--rule-2);
  border-radius: var(--r-md); box-shadow: var(--shadow-3); padding: var(--s1);
}
.mention-opt {
  display: flex; align-items: center; gap: var(--s2); width: 100%;
  padding: var(--s2); border: 0; border-radius: var(--r-sm); background: none;
  cursor: pointer; text-align: left; font-size: 13.5px;
}
.mention-opt.is-active, .mention-opt:hover { background: var(--surface-3); }

/* ══════════ THÔNG BÁO ══════════ */
.bell {
  position: relative; width: 36px; height: 36px; flex: none;
  display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--rule); border-radius: 999px;
  background: var(--surface-2); color: var(--ink-2);
  transition: background-color var(--dur) var(--ease);
}
.bell:hover { background: var(--surface-3); }
.bell-count {
  position: absolute; top: -3px; right: -3px; min-width: 17px; height: 17px; padding: 0 4px;
  display: grid; place-items: center; border-radius: 999px;
  background: var(--signal); color: #fff; font-size: 10.5px; font-weight: 600;
  border: 2px solid var(--surface);
}
.notif {
  display: flex; gap: var(--s3); width: 100%; padding: var(--s3) 0; text-align: left;
  background: none; border: 0; border-top: 1px solid var(--rule); cursor: pointer;
}
.notif:first-child { border-top: 0; }
.notif:hover { background: var(--surface-2); }
.notif.is-new { border-left: 3px solid var(--accent); padding-left: var(--s2); }
.notif-main { flex: 1; min-width: 0; }
.notif-head { display: flex; gap: 5px; flex-wrap: wrap; align-items: baseline; }
.notif-head b { font-size: 13.5px; font-weight: 600; }
.notif-head span { font-size: 13px; color: var(--muted); }
.notif-preview {
  font-size: 12.5px; color: var(--ink-2); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.notif-when { font-family: var(--mono); font-size: 11px; color: var(--faint); margin-top: 3px; }

/* ── tiền tố bài viết ── */
.post-prefix {
  font-size: 10.5px; font-weight: 600; padding: 2px 7px; border-radius: 5px;
  background: var(--surface-3); color: var(--ink-2);
}

@media (max-width: 860px) {
  .bell { width: 34px; height: 34px; }
  .mention-box { max-height: 170px; }
}

/* ══════════ CẮT ẢNH ══════════ */
.crop-stage {
  position: relative; width: 100%; margin-top: var(--s3);
  border-radius: var(--r-md); overflow: hidden; background: var(--surface-3);
  cursor: grab; touch-action: none;   /* kéo ảnh, không cuộn trang */
  user-select: none;
}
.crop-stage:active { cursor: grabbing; }
.crop-canvas { display: block; width: 100%; height: 100%; }
/* Khung tròn cho ảnh đại diện: thấy đúng phần sẽ hiện ra sau này. */
.crop-stage.is-round::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(12, 16, 24, .55);
  border-radius: 22%;
  margin: 6%;
}
.crop-zoom { display: flex; align-items: center; gap: var(--s3); margin-top: var(--s3); }
.crop-zoom span { color: var(--muted); font-size: 17px; width: 14px; text-align: center; }
.crop-zoom input[type="range"] {
  flex: 1; height: 4px; padding: 0; border: 0; border-radius: 999px;
  background: var(--rule-2); appearance: none; -webkit-appearance: none;
}
.crop-zoom input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent); border: 3px solid var(--surface); box-shadow: var(--shadow-1); cursor: pointer;
}
.crop-zoom input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent); border: 3px solid var(--surface); cursor: pointer;
}

/* ── công cụ dưới mỗi bình luận ── */
.comment-tools { display: flex; gap: var(--s2); margin-top: var(--s1); }
.link-btn.is-primary { color: var(--accent); font-weight: 500; }
.comment-edit {
  width: 100%; margin-top: var(--s1); min-height: 64px;
  padding: var(--s2) var(--s3); font-size: 13.5px; line-height: 1.5; resize: vertical;
}

/* ── chia trang ── */
.pager { display: flex; align-items: center; justify-content: center; gap: var(--s3);
  margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--rule); }
.pager .icon-btn { min-width: 40px; font-size: 17px; line-height: 1; }
.pager .icon-btn:disabled { opacity: .4; cursor: default; }
.pager-at { font-family: var(--mono); font-size: 12.5px; color: var(--muted); min-width: 56px; text-align: center; }
.admin-tabs { width: 100%; margin-bottom: var(--s3); }
.admin-tabs .seg { flex: 1; }

/* ── nhóm chat riêng ── */
.room-sep { width: 1px; align-self: stretch; margin: 6px 2px; background: var(--rule-2); flex: none; }
.room-btn.is-private::before { content: '# '; opacity: .5; }
.room-add { font-size: 17px; line-height: 1; padding: 7px 12px; color: var(--accent); }
.invite-code { font-family: var(--mono); letter-spacing: .12em; text-align: center;
  font-size: 15px; text-transform: uppercase; }

/* ══════════ TRANG CHÍNH ══════════ */
/* Ba màn hình gốc — giới thiệu, đăng nhập, ứng dụng — dùng chung phần khung. */
.view { min-height: 100dvh; }
.home { display: flex; flex-direction: column; background: var(--surface); }
.home-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s4) clamp(var(--s4), 5vw, 56px);
  border-bottom: 1px solid var(--rule);
}
.home-bar .mark { text-decoration: none; }
.home-main { flex: 1; width: 100%; max-width: 1160px; margin: 0 auto;
  padding: 0 clamp(var(--s4), 5vw, 56px); }

/* ── phần mở đầu ── */
/* Tiêu đề chạy hết bề ngang thay vì bị ép trong một cột hẹp: bản trước để
   hero-text ở 30ch nên dòng tiêu đề gãy làm sáu, đọc như một bài thơ. Ảnh sản
   phẩm xuống dưới và cũng chiếm hết bề ngang — lưới 5 ngày nhét vào nửa màn
   hình thì chính nó lại thành thứ chật chội mà trang này hứa sẽ không có. */
.hero { padding: clamp(56px, 9vw, 112px) 0 clamp(32px, 4vw, 48px); max-width: 24ch; }
.hero /* Chỉ hiện ở khổ hẹp; cặp đôi với .hide-sm. */
.only-sm { display: none; }

.eyebrow { color: var(--accent); }
.hero h1 {
  font-size: clamp(34px, 5.4vw, 60px); line-height: 1.06;
  letter-spacing: -.04em; margin-top: var(--s3);
}
.hero h1 em { font-style: normal; color: var(--muted); }
.hero .lead { margin-top: var(--s4); font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.55; color: var(--muted); max-width: 46ch; }
.hero-actions { display: flex; gap: var(--s3); flex-wrap: wrap; margin-top: var(--s5); }
.btn-lg { height: 48px; padding: 0 24px; font-size: 15px; }
.btn-ghost { border-color: var(--rule-2); color: var(--ink-2); }
.btn-ghost:hover { background: var(--surface-2); }
.hero-note { margin-top: var(--s4); font-size: 12.5px; color: var(--faint); }

@media (min-width: 900px) {
  .hero { max-width: none; }
  .hero h1 { max-width: 18ch; }
}

/* Ảnh sản phẩm: dựng bằng đúng cách lưới thật được dựng — khối định vị theo
   tiết đầu và tiết cuối — nên nó không nói dối về thứ đang bán. */
.shot-wrap { --row: 30px; --gut: 40px; padding-bottom: clamp(40px, 6vw, 72px); }
.shot {
  background: var(--surface-2); border: 1px solid var(--rule);
  border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-2);
}
.shot-head {
  display: grid; grid-template-columns: var(--gut) repeat(5, 1fr);
  border-bottom: 1px solid var(--rule-2); background: var(--surface);
}
.shot-head span {
  padding: 9px 0; text-align: center; font-size: 11px; color: var(--muted);
  border-left: 1px solid var(--rule);
}
.shot-head span:first-child { border-left: 0; font-family: var(--mono); font-size: 10px; color: var(--faint); }
.shot-body {
  position: relative; display: grid; background: var(--surface);
  grid-template-columns: var(--gut) repeat(5, 1fr);
  grid-template-rows: repeat(12, var(--row));
  height: calc(var(--row) * 12);
}
.shot-gutter { grid-column: 1; grid-row: 1 / -1; background: var(--surface-2);
  border-right: 1px solid var(--rule-2); }
.shot-grid { grid-column: 2 / -1; grid-row: 1 / -1;
  background-image: repeating-linear-gradient(to bottom, transparent 0 calc(var(--row) - 1px),
    var(--rule) calc(var(--row) - 1px) var(--row)),
    repeating-linear-gradient(to right, var(--rule) 0 1px, transparent 1px calc(100% / 5)); }

.shot-ev {
  grid-row: var(--a) / calc(var(--b) + 1);
  margin: 2px 4px; padding: 5px 6px 5px 9px; position: relative; overflow: hidden;
  border-radius: 6px; min-width: 0;
  background: hsl(var(--h) 58% 95%); border: 1px solid hsl(var(--h) 40% 86%);
}
.shot-ev::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: hsl(var(--h) 42% 50%); }
.shot-ev b { display: block; font-size: 11px; font-weight: 600; line-height: 1.25;
  color: hsl(var(--h) 40% 28%); }
.shot-ev i { display: block; font-style: normal; font-family: var(--mono);
  font-size: 9.5px; margin-top: 2px; color: hsl(var(--h) 40% 28%); opacity: .75; }
.shot-ev.is-half { margin-right: 50%; }
.shot-ev.is-half.is-right { margin-right: 4px; margin-left: 50%; }

.shot-now { position: absolute; left: 0; right: 0; top: calc(var(--row) * 5.4);
  height: 2px; background: var(--signal); z-index: 2; }
.shot-now span {
  position: absolute; left: 3px; top: -9px; width: calc(var(--gut) - 6px);
  text-align: center; font-family: var(--mono); font-size: 9px; line-height: 17px;
  color: #fff; background: var(--signal); border-radius: 4px;
}

[data-mode="dark"] .shot-ev { background: hsl(var(--h) 26% 19%); border-color: hsl(var(--h) 22% 30%); }
[data-mode="dark"] .shot-ev::before { background: hsl(var(--h) 48% 60%); }
[data-mode="dark"] .shot-ev b, [data-mode="dark"] .shot-ev i { color: hsl(var(--h) 40% 86%); }

/* Chỉ biểu tượng và tên. Ảnh sản phẩm ở trên đã cho thấy công cụ làm được gì;
   lặp lại bằng một đoạn văn cho mỗi ô là bắt người ta đọc thứ họ vừa nhìn. */
.feats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(216px, 1fr));
  gap: var(--s3);
  padding: clamp(40px, 6vw, 72px) 0;
  border-top: 1px solid var(--rule);
}
.feat {
  display: flex; flex-direction: column; gap: var(--s3);
  padding: var(--s4); border: 1px solid var(--rule); border-radius: var(--r-lg);
  background: var(--surface-2);
}
.feat-ico { width: 22px; height: 22px; color: var(--accent);
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round; }
.feat h2 { font-size: 15px; letter-spacing: -.01em; line-height: 1.3; }
.feat p { margin-top: calc(var(--s1) * -1); font-size: 13px; line-height: 1.55; color: var(--muted); }

.home-foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  flex-wrap: wrap; padding: var(--s5) clamp(var(--s4), 5vw, 56px);
  border-top: 1px solid var(--rule); font-size: 13px; color: var(--faint);
}
.home-foot b { color: var(--muted); font-weight: 600; }
.foot-note { max-width: 52ch; }
.foot-by { display: inline-flex; align-items: center; gap: var(--s4); white-space: nowrap; }
.foot-by a { color: var(--muted); text-decoration: none; }
.foot-by a:hover { color: var(--accent); text-decoration: underline; }

@media (max-width: 720px) {
  .hero { padding-top: 44px; }
  .hero h1 { letter-spacing: -.03em; }
  .hero-actions .btn { flex: 1; }
  .feats { grid-template-columns: 1fr 1fr; gap: var(--s2); }
  .feat { padding: var(--s3); gap: var(--s2); }
  .feat h2 { font-size: 14px; }
  .feat p { font-size: 12.5px; }
  /* Lưới 5 ngày không nhét vừa màn hình dọc, nên cho kéo ngang trong khung
     riêng thay vì bóp nhỏ tới mức không đọc được chữ. */
  .shot-wrap { --row: 26px; --gut: 34px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .shot { min-width: 520px; }
  .home-foot { flex-direction: column; align-items: flex-start; gap: var(--s3); }
}

/* ── menu dưới ảnh đại diện ── */
.menu-list { display: grid; }
.menu-item { display: flex; align-items: center; gap: var(--s3); width: 100%;
  padding: var(--s3) 0; text-align: left; background: none; border: 0;
  border-top: 1px solid var(--rule); cursor: pointer; }
.menu-item:first-child { border-top: 0; }
.menu-item:hover { background: var(--surface-2); }
.menu-text { flex: 1; min-width: 0; }
.menu-text b { display: block; font-size: 14px; font-weight: 500; }
.menu-text span { display: block; margin-top: 2px; font-size: 12.5px; color: var(--muted); }
.menu-item.is-danger .menu-text b { color: var(--err-ink); }

/* ══════════ TRANG CHỦ ══════════ */
.dash-hello { margin-bottom: var(--s4); }
.dash-hello h2 { font-size: 22px; letter-spacing: -.02em; }
.dash-hello p { margin-top: 2px; font-size: 13px; color: var(--muted); }

.dash-card { display: block; width: 100%; text-align: left; padding: var(--s4); }
button.dash-card { cursor: pointer; transition: transform var(--dur) var(--ease); }
button.dash-card:active { transform: scale(.995); }

/* Thẻ tiết kế tiếp — thứ đáng nhìn nhất, nên nó được dùng màu của môn học. */
.dash-hero { position: relative; overflow: hidden; }
.dash-hero.is-tinted { background: var(--ev-bg); border-color: var(--ev-line); }
.dash-hero.is-tinted::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--ev-key);
}
.dash-hero.is-live { box-shadow: inset 0 0 0 1.5px var(--signal); }
.dash-eyebrow {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ev-key, var(--faint));
}
.dash-hero-name {
  font-size: 19px; font-weight: 600; line-height: 1.25; margin-top: var(--s1);
  color: var(--ev-ink, var(--ink)); letter-spacing: -.015em;
}
.dash-hero-meta { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); margin-top: var(--s2);
  font-size: 13px; color: var(--ev-ink, var(--muted)); opacity: .85; }
.dash-count {
  display: inline-block; margin-top: var(--s3); padding: 3px 10px; border-radius: 999px;
  background: var(--surface); font-family: var(--mono); font-size: 12px; color: var(--ink-2);
}
.dash-hero.is-live .dash-count { background: var(--signal); color: #fff; }

.dash-head { display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s3); margin: var(--s5) 0 var(--s2); }
.dash-head h3 { font-size: 14.5px; }
.dash-head span { font-size: 12.5px; color: var(--muted); }

.dash-row { display: flex; align-items: center; gap: var(--s3); width: 100%;
  padding: var(--s3) var(--s4); text-align: left; background: none; border: 0;
  border-top: 1px solid var(--rule); cursor: pointer; }
.dash-row:first-child { border-top: 0; }
.dash-row:hover { background: var(--surface-2); }
.dash-row-key { width: 4px; align-self: stretch; border-radius: 3px; background: var(--ev-key); flex: none; }
.dash-row-main { flex: 1; min-width: 0; }
.dash-row-name { font-size: 13.5px; font-weight: 500; }
.dash-row-sub { font-family: var(--mono); font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.dash-row-go { color: var(--faint); font-size: 20px; line-height: 1; flex: none; }
.dash-alert.is-due .dash-row-name { color: var(--signal); }

/* Ô thống kê bấm được — mỗi con số là một lối vào chỗ của nó. */
.stat-strip button.stat { background: none; border: 0; border-left: 1px solid var(--rule);
  cursor: pointer; text-align: left; font: inherit; }
.stat-strip button.stat:first-child { border-left: 0; }
.stat-strip button.stat:hover { background: var(--surface-2); }

.dash-admin { padding: var(--s4); display: grid; gap: var(--s3); }
.dash-disk { margin-top: var(--s1); }
.dash-disk-top { font-size: 12.5px; color: var(--muted); margin-bottom: var(--s2); }
.dash-warn { font-size: 12.5px; color: var(--warn-ink); background: var(--warn-bg);
  padding: var(--s2) var(--s3); border-radius: var(--r-sm); }

@media (max-width: 860px) {
  .dash-hello h2 { font-size: 19px; }
  .dash-hero-name { font-size: 17px; }
  .dash-card { padding: var(--s3); }
  .dash-row { padding: var(--s3); }
}

/* ══════════ CÁC CHỦ ĐỀ ══════════ */
/* Chủ đề chỉ ghi đè các biến màu; toàn bộ giao diện đã dựng trên biến nên
   không luật nào khác phải sửa. `data-mode` cho biết nền sáng hay tối — thứ
   quyết định cách pha màu môn học — còn `data-theme` chỉ là cái tên. Tách hai
   thứ này ra vì "ma cà rồng" và "tối" đều là nền tối nhưng khác tông hẳn. */

/* Ma cà rồng — nền tím than, mực đỏ máu. */
[data-theme="vampire"] {
  --paper:      #0B070D;
  --surface:    #150E19;
  --surface-2:  #1D1322;
  --surface-3:  #29192F;
  --ink:        #EDE2F0;
  --ink-2:      #C9B6CF;
  --muted:      #907C98;
  --faint:      #6B5872;
  --rule:       #291B2F;
  --rule-2:     #3D2A45;
  --accent:     #C2405A;
  --accent-2:   #D9556F;
  --accent-soft:#2C1220;
  --on-accent:  #FFF2F5;
  --signal:     #E8564B;
  --positive:   #7FA88C;
  --positive-soft:#16241A;
  --warn-bg:    #2C2113;
  --warn-ink:   #DFBB78;
  --err-bg:     #2E1218;
  --err-ink:    #F2919C;
}

/* Dịu mắt — nền giấy ngả vàng, ít ánh xanh, hợp đọc lâu buổi tối. */
[data-theme="comfort"] {
  --paper:      #F3EADA;
  --surface:    #FBF5EA;
  --surface-2:  #F5EDDF;
  --surface-3:  #EBE0CD;
  --ink:        #33291D;
  --ink-2:      #52442F;
  --muted:      #7A6A52;
  --faint:      #9C8B70;
  --rule:       #E4D8C2;
  --rule-2:     #CFBFA2;
  --accent:     #8A5A2B;
  --accent-2:   #6F4720;
  --accent-soft:#EFE2CC;
  --on-accent:  #FCF7EE;
  --signal:     #B5502F;
  --positive:   #5F7A4A;
  --positive-soft:#E6EBD8;
  --warn-bg:    #F6E9C9;
  --warn-ink:   #7A5A15;
  --err-bg:     #F6E0D8;
  --err-ink:    #9C3F26;
}

/* Rừng đêm — nền xanh rêu sâu, dịu hơn đen thuần. */
[data-theme="forest"] {
  --paper:      #0A100D;
  --surface:    #111A15;
  --surface-2:  #16211B;
  --surface-3:  #1F2D25;
  --ink:        #E2EDE6;
  --ink-2:      #BFD0C6;
  --muted:      #819989;
  --faint:      #62786B;
  --rule:       #1E2B23;
  --rule-2:     #2E4137;
  --accent:     #6FB894;
  --accent-2:   #86C9A7;
  --accent-soft:#16281F;
  --on-accent:  #08120D;
  --signal:     #D98A6A;
  --positive:   #7FC79E;
  --positive-soft:#132119;
  --warn-bg:    #262112;
  --warn-ink:   #D9BE7C;
  --err-bg:     #2A1715;
  --err-ink:    #E39A8C;
}

/* Đại dương — nền xanh mực, hợp người thích tông lạnh. */
[data-theme="ocean"] {
  --paper:      #080E17;
  --surface:    #0F1724;
  --surface-2:  #141E2E;
  --surface-3:  #1D2A3D;
  --ink:        #E3EBF5;
  --ink-2:      #BECBDC;
  --muted:      #7D8FA6;
  --faint:      #5F7189;
  --rule:       #1B2637;
  --rule-2:     #2A3A50;
  --accent:     #56A8D8;
  --accent-2:   #77BEE6;
  --accent-soft:#12243A;
  --on-accent:  #05101C;
  --signal:     #E0776F;
  --positive:   #63BFA8;
  --positive-soft:#0F2521;
  --warn-bg:    #23231A;
  --warn-ink:   #DCC583;
  --err-bg:     #291619;
  --err-ink:    #EC9A99;
}

/* Sáu chủ đề không xếp vừa một hàng, nên cho xuống dòng. */
.segmented-wrap { flex-wrap: wrap; }

/* ── ủng hộ ── */
.or-line { display: flex; align-items: center; gap: var(--s3); margin: var(--s4) 0;
  font-size: 12.5px; color: var(--faint); }
.or-line::before, .or-line::after { content: ''; flex: 1; height: 1px; background: var(--rule); }
.qr-box { display: grid; place-items: center; padding: var(--s3);
  background: #fff; border: 1px solid var(--rule); border-radius: var(--r-md); }
.qr-img { width: 100%; max-width: 240px; display: block; }
.bank-info { margin-top: var(--s3); border: 1px solid var(--rule); border-radius: var(--r-md); overflow: hidden; }
.bank-row { display: flex; align-items: center; gap: var(--s3); padding: 10px var(--s3);
  border-top: 1px solid var(--rule); }
.bank-row:first-child { border-top: 0; }
.bank-label { font-size: 12.5px; color: var(--muted); width: 96px; flex: none; }
.bank-value { font-family: var(--mono); font-size: 13.5px; flex: 1; min-width: 0; }

/* ── hộp góp ý trong khu quản trị ── */
.fb-item { padding: var(--s3) 0; border-top: 1px solid var(--rule); }
.fb-item:first-of-type { border-top: 0; }
.fb-item.is-done { opacity: .55; }
.fb-head { display: flex; align-items: baseline; gap: var(--s2); flex-wrap: wrap; }
.fb-head b { font-size: 13.5px; }
.fb-body { margin-top: var(--s2); font-size: 13.5px; line-height: 1.55; }
.fb-contact { margin-top: var(--s1); font-size: 12.5px; color: var(--muted); }
.fb-contact b { font-family: var(--mono); color: var(--ink-2); font-weight: 500; }

/* ── liên kết sang trang hướng dẫn ── */
.guides-link { padding: clamp(32px, 5vw, 56px) 0; border-top: 1px solid var(--rule); }
.guides-link h2 { font-size: clamp(19px, 2.4vw, 24px); letter-spacing: -.02em; }
.guides-link p { margin-top: var(--s2); font-size: 14px; color: var(--muted); }
.guides-link ul { list-style: none; margin: var(--s4) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s2) var(--s5); }
.guides-link li { border-top: 1px solid var(--rule); }
.guides-link a { display: block; padding: var(--s3) 0; color: var(--ink-2);
  text-decoration: none; font-size: 14.5px;
  transition: color var(--dur) var(--ease); }
.guides-link a:hover { color: var(--accent); }


/* Biểu tượng thay cho một đoạn mô tả dài: người đọc quét dọc danh sách nhanh
   hơn hẳn khi mỗi mục có một hình để bám vào. */

/* Dòng ghi rõ đây là công cụ không chính thức, ở chân trang chủ. */
.dash-foot { display: flex; align-items: center; gap: var(--s3);
  margin-top: var(--s5); padding-top: var(--s3);
  border-top: 1px solid var(--rule); font-size: 12px; color: var(--faint);
  line-height: 1.5; }
.dash-crest { flex: none; opacity: .85; }

/* Huy hiệu Học viện đi kèm tên trường.
   Huy hiệu là của Học viện, không phải của trang này — nên nó luôn đứng cạnh
   chữ "Dành cho sinh viên" và không bao giờ được đặt ở vị trí thương hiệu
   (thanh trên cùng, favicon), nơi người ta sẽ hiểu đây là trang của trường. */
.school { display: flex; align-items: center; gap: var(--s3); }
.school img { flex: none; }
.school span { display: block; font-size: 12px; color: var(--faint); line-height: 1.35; }
.school b { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink-2); }

/* ── cửa sổ ủng hộ ── */
.qr-box { display: grid; place-items: center; margin-top: var(--s4); padding: var(--s3);
  background: #fff; border: 1px solid var(--rule); border-radius: var(--r-md); }
.qr-img { width: 100%; max-width: 260px; height: auto; display: block; }
.qr-hint { margin-top: var(--s2); font-size: 12.5px; color: var(--muted); text-align: center; }
.amount-input { width: 96px; height: 38px; padding: 0 10px; text-align: center;
  font-family: var(--mono); font-size: 13px; }
.donate-alt { display: block; margin-top: var(--s4); text-align: center;
  font-size: 13px; color: var(--muted); }
.donate-alt:hover { color: var(--accent); }
.foot-link { border: 0; background: none; padding: 0; cursor: pointer;
  color: var(--muted); font: inherit; text-decoration: none; }
.foot-link:hover { color: var(--accent); text-decoration: underline; }

/* ── mốc thời gian của tài khoản ── */
.acc-meta { border: 1px solid var(--rule); border-radius: var(--r-md); overflow: hidden;
  margin-top: var(--s3); }
.acc-row { display: flex; align-items: baseline; gap: var(--s3);
  padding: 9px var(--s3); border-top: 1px solid var(--rule); }
.acc-row:first-child { border-top: 0; }
.acc-label { font-size: 12.5px; color: var(--muted); flex: 1; min-width: 0; }
.acc-value { font-family: var(--mono); font-size: 12.5px; color: var(--ink-2);
  text-align: right; }
.acc-value.is-live { color: var(--positive); font-weight: 500; }

/* ── thông báo từ quản trị ── */
.lv-thuong { --lv: var(--accent); }
.lv-quan-trong { --lv: var(--warn-ink); }
.lv-khan { --lv: var(--signal); }

.notif.is-ann { border-left: 3px solid var(--lv); padding-left: var(--s2); }
.notif.is-ann .notif-preview { color: var(--ink-2); font-weight: 500; }

.ann-head { display: flex; align-items: center; gap: var(--s2); }
.ann-tag { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 5px; background: var(--lv); color: var(--on-accent); }
.ann-title { margin-top: var(--s3); font-size: 18px; line-height: 1.3; letter-spacing: -.015em; }
.ann-body { margin-top: var(--s3); font-size: 14.5px; line-height: 1.65; color: var(--ink-2); }

.chip.lv-quan-trong.is-on { background: var(--warn-bg); border-color: var(--warn-ink); color: var(--warn-ink); }
.chip.lv-khan.is-on { background: var(--err-bg); border-color: var(--signal); color: var(--err-ink); }
.post-prefix.lv-quan-trong { background: var(--warn-bg); color: var(--warn-ink); }
.post-prefix.lv-khan { background: var(--err-bg); color: var(--err-ink); }

.dash-urgent { display: block; width: 100%; text-align: left; padding: var(--s4);
  border-color: var(--signal); background: var(--err-bg); cursor: pointer; }
.dash-urgent .dash-eyebrow { color: var(--signal); }
.dash-urgent-title { margin-top: var(--s1); font-size: 17px; font-weight: 600;
  line-height: 1.3; color: var(--err-ink); }
.dash-urgent-more { margin-top: var(--s2); font-size: 12.5px; color: var(--err-ink); opacity: .8; }
.stat-note { display: block; margin-top: 2px; font-family: var(--mono); font-size: 10.5px;
  font-style: normal; color: var(--faint); }

/* ── ô thông báo neo dưới chuông ── */
.notif-panel {
  position: fixed; z-index: 240; width: min(360px, calc(100vw - 16px));
  max-height: min(70vh, 520px); display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--rule-2);
  border-radius: var(--r-lg); box-shadow: var(--shadow-3); overflow: hidden;
  animation: notifIn var(--dur) var(--ease);
}
@keyframes notifIn { from { opacity: 0; transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .notif-panel { animation: none; } }

.notif-panel-head { display: flex; align-items: center; justify-content: space-between;
  gap: var(--s3); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--rule); }
.notif-panel-head b { font-size: 14px; }
.notif-list { overflow-y: auto; padding: 0 var(--s4) var(--s2); }
.notif-list .empty { padding: var(--s5) 0; text-align: center; }

/* Biểu tượng trang thay cho ảnh người gửi ở thông báo từ quản trị. */
.notif-mark { flex: none; width: 30px; height: 30px; display: grid; place-items: center;
  border-radius: 9px; background: var(--surface-3); }
.notif-mark img { display: block; border-radius: 5px; }

.stat-note { display: block; margin-top: 2px; font-family: var(--mono); font-size: 10.5px;
  font-style: normal; color: var(--faint); }