/* ==========================================================================
   TIAD — Shared design tokens (Student Web + Admin Portal)
   Change a colour here and both sites follow.
   ========================================================================== */
/* Lexend — bundled locally (shared/fonts), light weights carry the style */
@font-face { font-family: "Lexend"; font-style: normal; font-weight: 300; font-display: swap; src: url(../fonts/lexend-vietnamese-300-normal.woff2) format("woff2"); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: "Lexend"; font-style: normal; font-weight: 300; font-display: swap; src: url(../fonts/lexend-latin-ext-300-normal.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Lexend"; font-style: normal; font-weight: 300; font-display: swap; src: url(../fonts/lexend-latin-300-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Lexend"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/lexend-vietnamese-400-normal.woff2) format("woff2"); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: "Lexend"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/lexend-latin-ext-400-normal.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Lexend"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/lexend-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Lexend"; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/lexend-vietnamese-500-normal.woff2) format("woff2"); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: "Lexend"; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/lexend-latin-ext-500-normal.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Lexend"; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/lexend-latin-500-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Lexend"; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/lexend-vietnamese-600-normal.woff2) format("woff2"); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: "Lexend"; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/lexend-latin-ext-600-normal.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Lexend"; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/lexend-latin-600-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
:root {
  /* "Mono + neon" — same language as MHGIAOVU: white canvas, grey tiles, black actions, neon green highlights */
  --primary: #0E0E0E;
  --primary-600: #2A2A2A;
  --primary-50: #EFEFEF;
  --sky: #0E0E0E;
  --sky-600: #2A2A2A;
  --sky-50: #EFEFEF;

  /* Accent — neon green (highlights, progress, "good") — always with dark text */
  --accent: #5BE15B;
  --accent-600: #2FBF2F;
  --accent-50: #E3FAE3;
  --accent-100: #CDF5CD;
  --accent-ink: #1E9E46;   /* readable green for text on white */

  /* Ink */
  --ink: #0E0E0E;
  --ink-2: #3D3D3D;
  --ink-3: #8C8C8C;
  --ink-4: #C7C7C7;

  /* Surfaces */
  --page: #FFFFFF;        /* canvas */
  --surface: #F2F2F2;     /* tiles / cards */
  --tile: #E6E6E6;        /* tracks, inner blocks on tiles */
  --tile-2: #F7F7F7;
  --line: #E8E8E8;
  --line-2: #DADADA;
  --dark: #0E0E0E;
  --dark-2: #2A2A2A;

  --tint-peach: #F2F2F2;
  --tint-peach-ink: #0E0E0E;
  --tint-lilac: #F2F2F2;
  --tint-lilac-ink: #0E0E0E;
  --tint-lime: #E3FAE3;
  --tint-lime-ink: #1E9E46;
  --tint-sky: #F2F2F2;
  --tint-sky-ink: #0E0E0E;

  /* Course banners: mono + neon */
  --b-indigo: #0E0E0E;
  --b-coral: #5BE15B;
  --b-pink: #8C8C8C;
  --b-blue: #3D3D3D;
  --b-ink: #0E0E0E;
  --b-plum: #2A2A2A;

  /* Status */
  --ok: #1E9E46;
  --ok-50: #E3FAE3;
  --warn: #B07A00;
  --warn-50: #FFF4D6;
  --danger: #D93A2F;
  --danger-50: #FDECEA;

  /* Shape — softer, fewer big radii */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 30px;
  --r-pill: 999px;

  /* Type */
  --font: "Lexend", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-md: 14.5px;
  --fs-lg: 16.5px;
  --fs-xl: 20px;
  --fs-2xl: 28px;

  --ease: cubic-bezier(.22, 1, .36, 1);
  --shadow-soft: 0 24px 48px -28px rgba(0, 0, 0, .35);
}

*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
  font-family: var(--font);
  font-weight: 300;
  font-size: var(--fs-md);
  line-height: 1.55;
  color: var(--ink);
  background: var(--page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.005em;
}

h1, h2, h3, h4, h5 { font-weight: 300; letter-spacing: -0.03em; line-height: 1.2; color: var(--ink); }
strong, b { font-weight: 500; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; border: none; outline: none; background: none; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .45; }
input::placeholder, textarea::placeholder { color: var(--ink-3); }
::selection { background: var(--accent); color: var(--ink); }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, .16); border-radius: 99px; }

.ic { flex-shrink: 0; display: block; }
.katex { font-size: 1.05em; }
/* KaTeX keeps a hidden MathML copy (position:absolute). Anchor it to the formula so it never
   escapes a scrolling box and stretches the page (blank space + menu sliding away). */
.katex { position: relative; }

/* Avatar with initials fallback */
.av {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--tile);
  color: var(--ink-2);
  font-weight: 500;
}
.av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.av-ini { letter-spacing: 0; }
.av svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }