/* Rich-text content blocks — ONE source of truth for how editor output looks.
 *
 * Loaded in two places so "what you build is what readers get":
 *   • public pages  → partials/content-blocks.blade.php (<link>, @once)
 *   • TinyMCE       → partials/tinymce-full.blade.php via content_css
 *
 * Editor-only rules are scoped with `.mce-content-body` (TinyMCE's iframe body);
 * public-only rules with `.rt-table-wrap` (the wrapper content-enhance.blade.php
 * adds around every table at render time, so wide tables scroll inside a rounded
 * card instead of stretching the page).
 */

:root {
  --rt-line: #E7EAF0;        /* card border / header divider          */
  --rt-line-soft: #F0F2F6;   /* row separator                          */
  --rt-head-bg: #F7F9FC;     /* table header fill                      */
  --rt-head-ink: #667085;    /* table header label                     */
  --rt-surface: #FFFFFF;     /* table card fill                        */
  --rt-row-hover: #FAFBFD;
  /* Elevation. Light mode reads depth from a grey drop shadow; on the near-black
     page that shadow is invisible, so dark mode uses a deeper black shadow plus a
     1px light inset ring to draw the edge. */
  --rt-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 10px 24px -6px rgba(16, 24, 40, .12);
  --rt-shadow-sm: 0 1px 2px rgba(16, 24, 40, .05), 0 6px 16px -6px rgba(16, 24, 40, .10);
}
html.dark-mode {
  /* The page and its cards are #0D0D0D. The first take used #0F131C for the
     table surface — measured 1.046 against that backdrop, i.e. the block melted
     into the page and no drop shadow could rescue it (a black shadow has nothing
     to darken). Dark UI shows depth by making the raised surface LIGHTER, so the
     panel tones below sit a clear step above the page and the shadow only adds
     the finishing edge. */
  --rt-line: #333F5E;
  --rt-line-soft: #2A3348;
  --rt-head-bg: #212A3D;
  --rt-head-ink: #A9B4C8;
  --rt-surface: #1A2130;
  --rt-row-hover: #222B3D;
  --rt-shadow: 0 2px 6px rgba(0, 0, 0, .55), 0 14px 30px -8px rgba(0, 0, 0, .65), inset 0 1px 0 rgba(255, 255, 255, .05);
  --rt-shadow-sm: 0 2px 5px rgba(0, 0, 0, .45), 0 10px 22px -8px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .05);
}

/* ─────────────────────────── Tables ─────────────────────────── */

/* Public: JS wraps <table> in .rt-table-wrap. The wrapper (not the table)
   owns the border/radius/scroll so the rounded corners actually clip. */
.rt-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--rt-line);
  border-radius: 14px;
  background: var(--rt-surface);
  /* Two layers: a tight one that draws the edge, a wide soft one that lifts the
     card off the page. A single flat shadow left the block looking pasted on. */
  box-shadow: var(--rt-shadow);
  margin: 0 0 1.35rem;
}

.rt-table-wrap > table {
  width: 100%;
  /* Below this the columns squeeze into unreadable slivers — scroll instead
     (same call GitHub makes for markdown tables). */
  min-width: 30rem;
  margin: 0;
  border: 0;
  border-collapse: collapse;
  border-spacing: 0;
  background: transparent;
  font-size: .95em;
}
/* Kill the grid look (`border="1"` on pasted/legacy tables and the theme's own
   td/th borders): keep horizontal rules only. */
.rt-table-wrap > table th,
.rt-table-wrap > table td {
  border: 0;
  border-bottom: 1px solid var(--rt-line-soft);
  padding: .85rem 1.15rem;
  text-align: left;
  vertical-align: top;
  line-height: 1.65;
}
.rt-table-wrap > table thead th {
  background: var(--rt-head-bg);
  font-weight: 600;
  font-size: .8em;
  letter-spacing: .045em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--rt-line);
}
/* Column separators: only BETWEEN columns (`+` skips the first cell of every
   row), so the card keeps clean outer edges instead of the old full grid. */
.rt-table-wrap > table th + th,
.rt-table-wrap > table td + td,
.rt-table-wrap > table td + th,
.rt-table-wrap > table th + td { border-left: 1px solid var(--rt-line); }

/* The header label colour needs !important: the pages that render editor output
   paint body text with a 3-class rule (`.blog-details .post-content :is(p, li,
   span:not([class*="token"]), td, th, …)`, same shape in content-enhance), which
   outscores anything reasonable here. `:not([style*="color"])` keeps the escape
   hatch those rules were designed around — a colour picked in the editor for
   that cell is inline, so it still wins. */
.rt-table-wrap > table.rt-table thead th:not([style*="color"]) {
  color: var(--rt-head-ink) !important;
}

/* A leading label column (first cell of each row) reads better semi-bold. */
.rt-table-wrap > table tbody th { font-weight: 600; }
.rt-table-wrap > table tbody tr:last-child > * { border-bottom: 0; }
.rt-table-wrap > table tbody tr:hover > * { background: var(--rt-row-hover); }
/* Long cell text wraps instead of forcing an endless scroll (project rule:
   never truncate dynamic content). */
.rt-table-wrap > table th,
.rt-table-wrap > table td { overflow-wrap: anywhere; }

/* Editor: no wrapper exists there, so round the corner cells instead. */
.mce-content-body table {
  width: 100%;
  border: 1px solid var(--rt-line);
  border-radius: 14px;
  border-collapse: separate;
  border-spacing: 0;
  margin: 0 0 1.35rem;
  font-size: .95em;
  box-shadow: var(--rt-shadow);
}
.mce-content-body table th,
.mce-content-body table td {
  border: 0;
  border-bottom: 1px solid var(--rt-line-soft);
  padding: .8rem 1.1rem;
  text-align: left;
  vertical-align: top;
}
.mce-content-body table thead th {
  background: var(--rt-head-bg);
  color: var(--rt-head-ink);
  font-weight: 600;
  font-size: .8em;
  letter-spacing: .045em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--rt-line);
}
.mce-content-body table th + th,
.mce-content-body table td + td,
.mce-content-body table td + th,
.mce-content-body table th + td { border-left: 1px solid var(--rt-line); }
.mce-content-body table tr:last-child > * { border-bottom: 0; }
.mce-content-body table tr:first-child > *:first-child { border-top-left-radius: 14px; }
.mce-content-body table tr:first-child > *:last-child { border-top-right-radius: 14px; }
.mce-content-body table tr:last-child > *:first-child { border-bottom-left-radius: 14px; }
.mce-content-body table tr:last-child > *:last-child { border-bottom-right-radius: 14px; }

/* ──────────────────── Callout / card / columns ────────────────────
   Colour is carried by two custom properties so one rule set serves every
   variant, and dark mode only has to re-point the properties. */

.rt-callout,
.rt-card,
.rt-cols {
  --rt-bg: #F1F5F9;
  --rt-accent: #94A3B8;
  --rt-soft: #E2E8F0;
}

.rt-callout {
  background: var(--rt-bg);
  /* Thin ring on all sides + the thick accent edge: the ring is what separates
     the tinted block from the page when the tint alone is too close to it. */
  border: 1px solid var(--rt-soft);
  border-left: 4px solid var(--rt-accent);
  border-radius: 12px;
  padding: 1rem 1.15rem;
  margin: 0 0 1.35rem;
  box-shadow: var(--rt-shadow-sm);
}
.rt-card {
  background: var(--rt-bg);
  border: 1px solid var(--rt-soft);
  border-radius: 14px;
  padding: 1.1rem 1.25rem;
  margin: 0 0 1.35rem;
  box-shadow: var(--rt-shadow);
}
.rt-callout > :first-child,
.rt-card > :first-child { margin-top: 0; }
.rt-callout > :last-child,
.rt-card > :last-child { margin-bottom: 0; }

.rt-callout__title,
.rt-card__title {
  display: block;
  font-weight: 700;
  margin: 0 0 .5rem;
  line-height: 1.4;
}
/* Same fight as the table header: the pages paint body text with a 3-class
   `:is(p, li, …)` rule and the title is a <p>. !important wins it back, while
   :not([style*="color"]) still lets a colour picked in the editor through. */
.rt-callout > .rt-callout__title:not([style*="color"]),
.rt-card > .rt-card__title:not([style*="color"]) {
  color: var(--rt-accent) !important;
}

/* Light palette */
.rt-callout--gray,   .rt-card--gray,.rt-cols--gray   { --rt-bg: #F1F5F9; --rt-accent: #64748B; --rt-soft: #E2E8F0; }
.rt-callout--info,   .rt-card--info,.rt-cols--info   { --rt-bg: #EFF6FF; --rt-accent: #2563EB; --rt-soft: #D7E5FB; }
.rt-callout--tip,    .rt-card--tip,.rt-cols--tip    { --rt-bg: #ECFDF5; --rt-accent: #0B7D5E; --rt-soft: #C9EEDF; }
.rt-callout--warn,   .rt-card--warn,.rt-cols--warn   { --rt-bg: #FFFBEB; --rt-accent: #B45309; --rt-soft: #F6E3B5; }
.rt-callout--danger, .rt-card--danger,.rt-cols--danger { --rt-bg: #FEF2F2; --rt-accent: #DC2626; --rt-soft: #F8D4D4; }
.rt-callout--brand,  .rt-card--brand,.rt-cols--brand  { --rt-bg: #FDF3EA; --rt-accent: #E06004; --rt-soft: #F7DCC3; }

/* Dark palette: the same hue, dropped to a translucent tint so the block reads
   as a raised surface on the near-black page, with a lighter accent.
   ⚠️ The un-toned fallback must come FIRST: `html.dark-mode .rt-callout` and
   `html.dark-mode .rt-callout--info` score identically, so whichever is written
   last wins — with the fallback at the bottom every tone rendered grey. */
html.dark-mode .rt-callout,
html.dark-mode .rt-card,
html.dark-mode .rt-cols { --rt-bg: rgba(148, 163, 184, .18); --rt-soft: rgba(148, 163, 184, .38); }
html.dark-mode .rt-callout--gray,   html.dark-mode .rt-card--gray,html.dark-mode .rt-cols--gray   { --rt-bg: rgba(148, 163, 184, .18); --rt-accent: #94A3B8; --rt-soft: rgba(148, 163, 184, .38); }
html.dark-mode .rt-callout--info,   html.dark-mode .rt-card--info,html.dark-mode .rt-cols--info   { --rt-bg: rgba(59, 130, 246, .22);  --rt-accent: #7CB0FA; --rt-soft: rgba(59, 130, 246, .42); }
html.dark-mode .rt-callout--tip,    html.dark-mode .rt-card--tip,html.dark-mode .rt-cols--tip    { --rt-bg: rgba(45, 212, 191, .20);  --rt-accent: #4FD1AC; --rt-soft: rgba(45, 212, 191, .40); }
html.dark-mode .rt-callout--warn,   html.dark-mode .rt-card--warn,html.dark-mode .rt-cols--warn   { --rt-bg: rgba(245, 158, 11, .20);  --rt-accent: #F0B429; --rt-soft: rgba(245, 158, 11, .40); }
html.dark-mode .rt-callout--danger, html.dark-mode .rt-card--danger,html.dark-mode .rt-cols--danger { --rt-bg: rgba(239, 68, 68, .20);   --rt-accent: #F98080; --rt-soft: rgba(239, 68, 68, .40); }
html.dark-mode .rt-callout--brand,  html.dark-mode .rt-card--brand,html.dark-mode .rt-cols--brand  { --rt-bg: rgba(224, 96, 4, .24);    --rt-accent: #FB923C; --rt-soft: rgba(224, 96, 4, .44); }

/* Two-column block */
.rt-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin: 0 0 1.35rem;
}
/* Each column is its own panel — the first version left them as bare text, so
   the block was invisible on the page and there was nothing to colour. */
.rt-cols > * {
  min-width: 0;
  background: var(--rt-bg);
  border: 1px solid var(--rt-soft);
  border-radius: 12px;
  padding: .95rem 1.1rem;
  box-shadow: var(--rt-shadow-sm);
}
.rt-cols > * > :first-child { margin-top: 0; }
.rt-cols > * > :last-child { margin-bottom: 0; }
@media (max-width: 640px) {
  .rt-cols { grid-template-columns: 1fr; }
}

/* ─────────────── Default blocks from older content ───────────────
   Content written before the "Chèn khối" toolbar existed uses a plain
   <blockquote> / <pre>. They used to render flat while every new block sat on
   a shadow, so a lesson mixing old and new content looked half-finished.
   Same elevation treatment here, from the same tokens.

   Public pages tag each blockquote with .rt-quote at render time (the class is
   added by partials/content-enhance + partials/code-highlight, the way tables
   get .rt-table-wrap); inside TinyMCE the .mce-content-body scope does it. */
:root {
  --rt-quote-bg: #F7F8FC;
  --rt-quote-soft: #E4E8F2;
  --rt-quote-accent: #4E73DF;
  --rt-quote-ink: #4A4A4A;
}
html.dark-mode {
  /* Same slate tint as an un-toned callout — a raised surface, not a darker
     hole (see the dark-mode note at the top of this file). */
  --rt-quote-bg: rgba(148, 163, 184, .18);
  --rt-quote-soft: rgba(148, 163, 184, .38);
  --rt-quote-accent: #7CB0FA;
  --rt-quote-ink: #C7CCD6;
}

.rt-quote,
/* Doubled class on purpose: pages carry area rules like
   `.course-description blockquote` (0,1,1) that would otherwise outrank a single
   `.rt-quote` (0,1,0) and paint the old flat look back over this one. */
.rt-quote.rt-quote,
.mce-content-body blockquote {
  background: var(--rt-quote-bg);
  border: 1px solid var(--rt-quote-soft);
  border-left: 4px solid var(--rt-quote-accent);
  border-radius: 12px;
  padding: 1rem 1.15rem;
  margin: 0 0 1.35rem;
  box-shadow: var(--rt-shadow-sm);
  font-style: italic;
  color: var(--rt-quote-ink);
}
.rt-quote > :first-child,
.mce-content-body blockquote > :first-child { margin-top: 0; }
.rt-quote > :last-child,
.mce-content-body blockquote > :last-child { margin-bottom: 0; }

/* Code blocks. The public page paints these through Prism (see
   partials/code-highlight, which reuses --rt-shadow); this is the editor half,
   where the block is a plain dark <pre> with no highlighting. */
.mce-content-body pre {
  box-shadow: var(--rt-shadow);
  border: 1px solid rgba(255, 255, 255, .08);
}
/* Code pasted from a chat/website carries inline colours on its <span>s. The
   editor strips them on paste (partials/tinymce-full), but content saved before
   that still has them — force the dark block to stay readable regardless.
   Public pages are unaffected: Prism rebuilds the block from its text. */
.mce-content-body pre,
.mce-content-body pre :not([class*="token"]) {
  /* :not(token) so the codesample plugin's own syntax colours survive — only
     the colourless spans a paste drags in get pulled back to readable grey. */
  color: #E6E6E6 !important;
}
.mce-content-body pre * { background-color: transparent !important; }
/* …and the <pre> itself: a paste often carries `style="background:#f6f8fa"`,
   which with the forced light text would flip the block to unreadable the other
   way (measured 1.17:1 before this rule). */
.mce-content-body pre { background-color: #0D1117 !important; }
/* TinyMCE's oxide content.css ships Prism's default theme, which paints
   `text-shadow: 0 1px white` on <code> — meant for its light block. Over the dark
   block that white shadow sits under white glyphs and smears every line. */
.mce-content-body pre,
.mce-content-body pre * { text-shadow: none !important; }