/* Lesson page, "Khối màu" — the 'new' arm of the lesson experiment.
 *
 * This one is different from the other flat pages. Everywhere else the job is
 * to sell or to navigate; here the job is to be read for twenty minutes without
 * tiring anyone out. So the flat house style applies to the chrome — hard
 * edges, no shadows, stated colours — while the article itself gets ordinary
 * generous reading typography: ~68 characters a line, 1.75 leading, real space
 * between headings and the paragraphs under them.
 *
 * Prefixed .ls2- so it cannot collide with the old page's .lesson- classes,
 * whose rules ship in an inline <style> on the same document.
 */

body,.ls2-top,.ls2-body{
  --l2-ink:#0a0a0a; --l2-paper:#fff; --l2-dim:#4b5563; --l2-lab:#9aa1ab; --l2-hair:#e6e6e6;
  --l2-blue:#1a3aff; --l2-green:#0f7a4a;
  --l2-font:'Be Vietnam Pro',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --l2-pad:clamp(20px,5vw,72px);
}
.ls2-top,.ls2-body{font-family:var(--l2-font)}
.ls2-top *,.ls2-body *{box-sizing:border-box}
.ls2-in{max-width:1240px;margin:0 auto;padding-left:var(--l2-pad);padding-right:var(--l2-pad)}

/* ── header strip ── */
.ls2-top{background:var(--l2-ink);color:#fff;padding:clamp(26px,4vw,46px) 0}
.ls2-crumb{display:flex;flex-wrap:wrap;gap:9px;align-items:center;font-size:11.5px;
  letter-spacing:.06em;font-weight:700;color:rgba(255,255,255,.6);text-transform:uppercase}
.ls2-crumb a{color:rgba(255,255,255,.9);text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.4)}
.ls2-crumb a:hover{color:#fff;border-bottom-color:#fff}
.ls2-h1{font-size:clamp(26px,3.6vw,44px);line-height:1.14;letter-spacing:-.04em;font-weight:800;
  margin:14px 0 0;color:#fff;max-width:24ch}
.ls2-prog{margin-top:22px;max-width:460px}
.ls2-prog-bar{height:6px;background:rgba(255,255,255,.22)}
.ls2-prog-bar span{display:block;height:100%;background:#fff}
.ls2-prog-t{font-size:12.5px;color:rgba(255,255,255,.72);margin-top:8px;font-weight:600}
.ls2-prog-t b{color:#fff;font-weight:800}

/* ── two columns ── */
.ls2-body{background:var(--l2-paper);padding:clamp(30px,4vw,56px) 0 clamp(48px,7vw,88px)}
.ls2-cols{display:grid;grid-template-columns:1fr;gap:clamp(30px,4vw,56px)}
@media (min-width:1040px){ .ls2-cols{grid-template-columns:minmax(0,1fr) 290px} }
.ls2-main{min-width:0}

.ls2-video{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;
  border:2px solid var(--l2-ink);margin-bottom:32px}
.ls2-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ── the article ─────────────────────────────────────────────────────────
   Everything here is about sustained reading, not about the design system. */
.ls2-prose{font-size:16.5px;line-height:1.75;color:var(--l2-ink);max-width:68ch}
.ls2-prose > *:first-child{margin-top:0}
.ls2-prose p{margin:0 0 1.15em}
.ls2-prose h1,.ls2-prose h2,.ls2-prose h3,.ls2-prose h4{
  font-weight:800;letter-spacing:-.03em;line-height:1.2;color:var(--l2-ink)}
.ls2-prose h1{font-size:clamp(24px,2.6vw,32px);margin:2em 0 .6em}
.ls2-prose h2{font-size:clamp(20px,2.2vw,26px);margin:1.9em 0 .55em;
  padding-top:.9em;border-top:2px solid var(--l2-ink)}
.ls2-prose h2:first-child{border-top:0;padding-top:0;margin-top:0}
.ls2-prose h3{font-size:18px;margin:1.6em 0 .45em}
.ls2-prose h4{font-size:16px;margin:1.4em 0 .4em}
.ls2-prose ul,.ls2-prose ol{margin:0 0 1.15em;padding-left:1.4em}
.ls2-prose li{margin-bottom:.45em}
.ls2-prose strong{font-weight:800;color:var(--l2-ink)}
.ls2-prose em{font-style:italic;color:var(--l2-dim)}
.ls2-prose a{color:var(--l2-blue);text-decoration:underline;text-underline-offset:3px}
.ls2-prose blockquote{margin:1.4em 0;padding:2px 0 2px 18px;border-left:3px solid var(--l2-ink);
  color:var(--l2-dim)}
.ls2-prose code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em;
  background:#f4f4f5;padding:2px 5px;border-radius:0}
.ls2-prose pre{background:var(--l2-ink);color:#fff;padding:16px 18px;overflow-x:auto;
  border-radius:0;margin:1.4em 0;font-size:13.5px;line-height:1.6}
.ls2-prose pre code{background:none;color:inherit;padding:0}
/* Wide content scrolls inside its own box; the page never scrolls sideways. */
.ls2-prose table{width:100%;border-collapse:collapse;margin:1.4em 0;font-size:14.5px;display:block;
  overflow-x:auto}
.ls2-prose th,.ls2-prose td{border:1px solid var(--l2-hair);padding:9px 12px;text-align:left}
.ls2-prose th{background:#fafafa;font-weight:800}
.ls2-prose img{max-width:100%;height:auto;display:block}
.ls2-prose figure{margin:1.6em 0}
.ls2-prose figcaption{font-size:12.5px;color:var(--l2-lab);margin-top:8px}
.ls2-prose .mermaid{margin:1.6em 0;overflow-x:auto}
.ls2-prose hr{border:0;border-top:2px solid var(--l2-hair);margin:2em 0}

/* ── finish + join ── */
.ls2-done{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:40px;
  padding-top:26px;border-top:2px solid var(--l2-ink)}
.ls2-btn{display:inline-block;padding:14px 26px;font-weight:800;font-size:14.5px;
  text-decoration:none;border:2px solid var(--l2-ink);background:var(--l2-ink);color:#fff;
  border-radius:0;font-family:inherit;cursor:pointer;line-height:1.2}
.ls2-btn:hover{background:#252525;border-color:#252525;color:#fff}
.ls2-btn:disabled{opacity:.55;cursor:default}
.ls2-done-n{font-size:13px;color:var(--l2-lab)}
.ls2-tick{font-size:14px;font-weight:800;color:var(--l2-green)}
.ls2-join{border:2px solid var(--l2-ink);padding:20px 22px;width:100%}
.ls2-join b{display:block;font-size:17px;font-weight:800;letter-spacing:-.03em;color:var(--l2-ink)}
.ls2-join span{display:block;font-size:14px;line-height:1.55;color:var(--l2-dim);margin:8px 0 16px;
  max-width:60ch}

/* ── prev / next ── */
.ls2-nav{display:grid;grid-template-columns:1fr;gap:0;margin-top:34px;
  border:2px solid var(--l2-ink)}
@media (min-width:640px){ .ls2-nav{grid-template-columns:1fr 1fr} }
.ls2-nav-a{display:block;padding:16px 18px;text-decoration:none;color:var(--l2-ink);
  border-right:2px solid var(--l2-ink)}
.ls2-nav-a:last-child{border-right:0}
.ls2-nav-next{text-align:right}
.ls2-nav-a span{display:block;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;color:var(--l2-lab)}
.ls2-nav-a b{display:block;font-size:15px;font-weight:800;letter-spacing:-.028em;line-height:1.3;
  margin-top:6px;color:var(--l2-ink)}
.ls2-nav-a:hover{background:var(--l2-ink)}
.ls2-nav-a:hover span{color:rgba(255,255,255,.6)}
.ls2-nav-a:hover b{color:#fff}

/* ── sidebar ── */
.ls2-side{min-width:0}
@media (min-width:1040px){ .ls2-side-in{position:sticky;top:64px;max-height:calc(100vh - 90px);
  overflow-y:auto} }
.ls2-side-in{border:2px solid var(--l2-ink);padding:14px}
.ls2-side-h{font-size:10px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;
  color:var(--l2-lab);margin-bottom:11px}
.ls2-list{list-style:none;margin:0;padding:0;counter-reset:none}
.ls2-item{display:grid;grid-template-columns:24px 1fr;gap:9px;align-items:start;padding:8px 6px;
  text-decoration:none;color:var(--l2-ink);border-top:1px solid var(--l2-hair)}
.ls2-list li:first-child .ls2-item{border-top:0}
.ls2-item-n{font-size:11px;font-weight:800;color:var(--l2-lab);text-align:center;padding-top:2px;
  font-variant-numeric:tabular-nums}
.ls2-item-t{font-size:13px;line-height:1.4;font-weight:600;color:var(--l2-ink)}
.ls2-item:hover{background:#f5f5f5}
.ls2-item.is-done .ls2-item-n{color:var(--l2-green)}
.ls2-item.is-done .ls2-item-t{color:var(--l2-dim)}
.ls2-item.is-now{background:var(--l2-ink)}
.ls2-item.is-now .ls2-item-n,.ls2-item.is-now .ls2-item-t{color:#fff}
.ls2-back{display:block;margin-top:12px;padding-top:12px;border-top:2px solid var(--l2-hair);
  font-size:12px;font-weight:700;color:var(--l2-dim);text-decoration:none}
.ls2-back:hover{color:var(--l2-ink)}

/* ── defensive ─────────────────────────────────────────────────────────────
   design-system.css styles bare a / a:hover (0,0,1 / 0,1,1), which outranks a
   plain .ls2-item (0,1,0). Prose links are the exception: there a blue
   underlined link is exactly what is wanted, so they are left alone. */
.ls2-layout a.ls2-item,.ls2-layout a.ls2-item:link,.ls2-layout a.ls2-item:visited,
.ls2-layout a.ls2-item:hover{text-decoration:none}
.ls2-layout a.ls2-item:hover .ls2-item-t{color:var(--l2-ink)}
.ls2-layout a.ls2-item.is-now .ls2-item-t,.ls2-layout a.ls2-item.is-now:hover .ls2-item-t,
.ls2-layout a.ls2-item.is-now .ls2-item-n{color:#fff}
.ls2-layout a.ls2-item.is-done .ls2-item-n{color:var(--l2-green)}
.ls2-layout a.ls2-nav-a,.ls2-layout a.ls2-nav-a:link,.ls2-layout a.ls2-nav-a:visited{
  color:var(--l2-ink);text-decoration:none}
.ls2-layout a.ls2-nav-a:hover b{color:#fff}
.ls2-layout a.ls2-nav-a:hover span{color:rgba(255,255,255,.6)}
.ls2-layout a.ls2-btn,.ls2-layout a.ls2-btn:hover{color:#fff;text-decoration:none}
.ls2-layout a.ls2-back,.ls2-layout a.ls2-back:hover{color:var(--l2-dim)}
.ls2-layout .ls2-crumb a{color:rgba(255,255,255,.9)}
.ls2-layout .ls2-crumb a:hover{color:#fff}
.ls2-layout .ls2-prose{color:var(--l2-ink)}
.ls2-layout .ls2-prose p,.ls2-layout .ls2-prose li{color:var(--l2-ink)}
.ls2-layout .ls2-join span{color:var(--l2-dim)}