/* Lesson picker (sidebar card + flyout) and the 📚 Thư viện bài học page: library.js. Every class is lb-. */
:root { --lb-bim: #17917c; --lb-bim-soft: #daf4ee; --lb-work: #3569b8; --lb-work-soft: #e2ecfa; --lb-life: #c7761a; --lb-life-soft: #fdefdc;
  --lb-other: #6b7f99; --lb-other-soft: #e8eef5; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --lb-bim: #45c9b1; --lb-bim-soft: #173d3a; --lb-work: #7fa9ec; --lb-work-soft: #1c2c46; --lb-life: #e9a857; --lb-life-soft: #3a2a14;
  --lb-other: #a3bac4; --lb-other-soft: #1d313b; } }
:root[data-theme="dark"] {
  --lb-bim: #45c9b1; --lb-bim-soft: #173d3a; --lb-work: #7fa9ec; --lb-work-soft: #1c2c46; --lb-life: #e9a857; --lb-life-soft: #3a2a14;
  --lb-other: #a3bac4; --lb-other-soft: #1d313b; }
.lb-bim { --cc: var(--lb-bim); --cc-soft: var(--lb-bim-soft); } .lb-work { --cc: var(--lb-work); --cc-soft: var(--lb-work-soft); }
.lb-life { --cc: var(--lb-life); --cc-soft: var(--lb-life-soft); } .lb-other { --cc: var(--lb-other); --cc-soft: var(--lb-other-soft); }

.lb-bar { display: block; height: 6px; border-radius: 6px; background: var(--line); overflow: hidden; flex: 1; }
.lb-bar i { display: block; height: 100%; background: var(--accent-2); border-radius: 6px; }
.lb-tag { display: inline-block; font-size: .68rem; font-weight: 800; border-radius: 999px; padding: 1px 8px; background: var(--cc-soft); color: var(--cc);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.lb-search { display: flex; align-items: center; gap: 8px; background: var(--panel-2); border: 1.5px solid transparent; border-radius: 12px; padding: 0 10px; }
.lb-search:focus-within { border-color: var(--accent); background: var(--panel); }
.lb-search input { border: 0; background: transparent; font: inherit; font-weight: 700; color: var(--ink); padding: 9px 0; width: 100%; min-width: 0; outline: none; }
.lb-search svg.ic { margin: 0; }
mark { background: var(--hov-fill); color: inherit; border-radius: 3px; }

/* sidebar card (S2): progress ring, series or category, title on two lines, ⌄; click / Ctrl+K = flyout */
.lb-pick { display: grid; grid-template-columns: 42px minmax(0, 1fr) 16px; gap: 10px; align-items: center; width: 100%; text-align: left; font: inherit;
  color: var(--ink); cursor: pointer; background: var(--panel); border: 1.5px solid transparent; border-radius: 14px; padding: 9px 10px; }
.lb-pick:hover, .lb-pick.open { background: var(--hov-fill); border-color: var(--hov-line); }
.lb-pick:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 2px; }
.lb-pick-body { display: grid; gap: 1px; min-width: 0; }
.lb-pick small { font-size: .66rem; font-weight: 900; color: var(--cc); text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-pick b { color: var(--navy); font-weight: 900; font-size: .88rem; line-height: 1.22; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lb-chev { color: var(--ink-3); display: grid; }
.lb-chev svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.lb-pick.open .lb-chev svg { transform: rotate(180deg); }
.lb-pick .lb-ring .fg { stroke: var(--cc); }
@media (min-width: 761px) {
  .side-min .lb-pick { grid-template-columns: 1fr; justify-items: center; padding: 6px 0; }
  .side-min .lb-pick-body, .side-min .lb-chev { display: none; }
}

/* flyout: fixed next to the card, so the sidebar's scroll never clips it */
.lb-fly { position: fixed; z-index: 60; max-height: min(520px, calc(100vh - 24px)); display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 2px 4px rgba(31,58,104,.06), 0 16px 40px rgba(31,58,104,.18); }
.lb-fly.lb-arrow::before { content: ""; position: absolute; left: -7px; top: 22px; width: 12px; height: 12px; background: var(--panel);
  border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); transform: rotate(45deg); }
.lb-fly-head { display: grid; gap: 8px; padding: 12px 12px 8px; border-bottom: 1px solid var(--line); }
.lb-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.lb-chips:empty { display: none; }
.lb-chip { border: 1.5px solid var(--line); background: var(--panel); color: var(--ink-2); font: inherit; font-size: .76rem; font-weight: 800;
  border-radius: 999px; padding: 3px 10px; cursor: pointer; }
.lb-chip:hover { background: var(--hov-fill); border-color: var(--hov-line); }
.lb-chip.on { border-color: var(--sel-line); background: var(--sel-fill); color: var(--sel-ink); }
.lb-chip .n, .lb-seg .n { color: var(--ink-3); font-weight: 700; margin-left: 4px; }
.lb-list { overflow-y: auto; padding: 2px 6px 8px; flex: 1; min-height: 0; scrollbar-width: thin; }
.lb-grp { display: flex; justify-content: space-between; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); font-weight: 800; padding: 10px 8px 4px; }
.lb-row { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 12px; cursor: pointer; border: 1.5px solid transparent; }
.lb-row:hover, .lb-row.kb { background: var(--hov-fill); }
.lb-row.cur { border-color: var(--sel-line); background: var(--sel-fill); }
.lb-tt { flex: 1; min-width: 0; display: grid; }
.lb-tt b { color: var(--navy); font-weight: 800; font-size: .86rem; line-height: 1.25; }
.lb-tt small { color: var(--ink-3); font-weight: 700; font-size: .72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-meta { color: var(--ink-3); font-size: .7rem; font-weight: 700; white-space: nowrap; }
.lb-empty { color: var(--ink-3); padding: 18px 8px; text-align: center; font-weight: 700; }
.lb-fly-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 10px; border-top: 1px solid var(--line); }
.lb-fly-foot kbd { font: inherit; font-size: .72rem; font-weight: 800; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; padding: 0 4px; }
.lb-ring { flex: none; display: block; }
.lb-ring circle { fill: none; }
.lb-ring .bg { stroke: var(--line); } .lb-ring .fg { stroke: var(--accent); stroke-linecap: round; }
.lb-ring.done .fg { stroke: var(--ok); }
.lb-ring .tick { fill: none; stroke: var(--ok); stroke-linecap: round; stroke-linejoin: round; }
.lb-ring text { fill: var(--navy); font-family: "Nunito", "Segoe UI", sans-serif; font-weight: 900; }

/* 📚 Thư viện bài học: option 4 = "Tiếp tục học" band + small tiles per category */
.lb-hero { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; gap: 22px; align-items: center; margin: 6px 0 22px;
  background: linear-gradient(120deg, var(--accent-soft), var(--panel) 70%); border: 1.5px solid var(--line); border-radius: 24px; padding: 18px 24px; box-shadow: var(--shadow); }
.lb-koala { width: 112px; height: auto; display: block; }
.lb-hero-body { min-width: 0; }
.lb-hero-body small { color: var(--accent); font-weight: 900; font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; }
.lb-hero-body h2 { margin: 4px 0 6px; font-size: 1.35rem; line-height: 1.2; text-wrap: balance; }
.lb-hero-body h2::before { display: none; }
.lb-hero-body .mbar { height: 10px; max-width: 440px; }
.lb-hero-meta { display: flex; gap: 6px 16px; flex-wrap: wrap; color: var(--ink-2); font-weight: 700; font-size: .84rem; margin-top: 6px; }
.lb-hero-meta .bad { color: var(--bad); }
.lb-hero-act { display: grid; gap: 8px; }
.lb-hero-act .lb-go { padding: 12px 22px; font-size: 1rem; border-radius: 14px; font-weight: 800; }
.lb-tools { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 4px 0 8px; }
.lb-tools .lb-search { flex: 1 1 260px; background: var(--panel); border-color: var(--line); }
.lb-tools .lb-search:focus-within { border-color: var(--accent); }
.lb-seg { display: inline-flex; flex-wrap: wrap; background: var(--panel); border: 1.5px solid var(--line); border-radius: 12px; padding: 3px; gap: 2px; }
.lb-seg button { border: 0; background: transparent; font: inherit; font-weight: 800; font-size: .82rem; color: var(--ink-2); padding: 6px 12px; border-radius: 9px; cursor: pointer; }
.lb-seg button:hover { background: var(--hov-fill); }
.lb-seg button.on { background: var(--sel-fill); color: var(--sel-ink); box-shadow: inset 0 0 0 1.5px var(--sel-line); }
.lb-cat-h { display: flex; align-items: center; gap: 10px; margin: 22px 0 12px; color: var(--navy); font-size: 1.05rem; }
.lb-cat-h b { font-weight: 900; }
.lb-cat-h > i { flex: 1; height: 1.5px; background: var(--line); }
.lb-cat-ico { width: 30px; height: 30px; border-radius: 9px; background: var(--cc-soft); display: grid; place-items: center; }
.lb-cat-ico svg.ic { width: 21px; height: 21px; margin: 0; }
.lb-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.lb-tile { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 10px; align-items: center; background: var(--panel); border: 1.5px solid transparent;
  border-radius: 16px; padding: 12px 14px; cursor: pointer; box-shadow: var(--shadow); }
.lb-tile:hover { border-color: var(--hov-line); }
.lb-tile:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 2px; }
.lb-tile.cur { border-color: var(--sel-line); background: var(--sel-fill); }
.lb-tile .lb-ring .fg { stroke: var(--cc); }
.lb-tile .lb-ring.done .fg, .lb-pick .lb-ring.done .fg { stroke: var(--ok); }
.lb-tile-tt { min-width: 0; display: grid; }
.lb-tile-tt small { color: var(--cc); font-size: .7rem; font-weight: 900; }
.lb-tile-tt b { color: var(--navy); font-weight: 800; font-size: .9rem; line-height: 1.28; }
.lb-tile-ft { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 6px; color: var(--ink-3); font-weight: 700; font-size: .74rem; }
.lb-tile-ft em { font-style: normal; color: var(--bad); }
@media (max-width: 760px) { .lb-hero { grid-template-columns: minmax(0, 1fr); } .lb-koala { display: none; } }
@media (prefers-reduced-motion: reduce) { .lb-chev svg { transition: none; } }