/* brq.css — GENERATED FILE. DO NOT EDIT BY HAND.
 *
 * The .brq-* rules lifted out of book.tansinh.info's style.css by
 * extract-brq.py. brq.js injects its OWN css at runtime (brqRecCss) but only
 * the INTERACTIVE additions — hover, focus, cursor, the blue student variant.
 * The BASE rules that give a badge its pill shape, padding and colour live in
 * the book's stylesheet, so without this file the buttons render as bare
 * squarish boxes.
 *
 * ⚠️ HOW I GOT THIS WRONG THE FIRST TIME: I compared class NAMES and saw
 * ".brq-need" mentioned inside brq.js, so I concluded it was covered. It is
 * mentioned only as ".brq-need.brq-act{...}" — a modifier, not the base rule.
 * COMPARE RULES, NOT NAMES.
 *
 * Load this BEFORE brq.js runs, so the runtime <style> still wins where the
 * two overlap — the same order the book app has.
 *
 * Source : /var/www/sites/book/current/style.css
 * Taken  : 2026-08-17 15:01:46
 */
/* ===== Student requirements — G1 "Polished" timeline (inside reader content) ===== */ .t-head{display:flex;align-items:center;gap:10px;margin-bottom:16px;}
.t-head .ic{width:30px;height:30px;border-radius:9px;background:var(--gold-bg, rgba(212,160,74,0.1));color:var(--gold, #d4a04a);display:grid;place-items:center;font-size:.85rem;}
.t-head .ttl{font-family:'Crimson Pro',Georgia,serif;font-weight:700;font-size:1.15rem;color:#3a2e1a;}
.t-head .badge{margin-left:auto;font-size:.7rem;font-weight:700;color:var(--gold, #d4a04a);background:var(--gold-bg, rgba(212,160,74,0.1));padding:3px 11px;border-radius:20px;}
.g1-box{background:var(--paper, #ffffff);border:1px solid #ece0c4;border-radius:16px;padding:20px 22px 12px;margin-bottom:4px;box-shadow:0 3px 16px rgba(58,46,26,.05);}
.g1-list{position:relative;padding-left:4px;}
.g1-item{position:relative;display:flex;gap:16px;align-items:flex-start;padding:4px 10px 22px 4px;border-radius:12px;transition:background .18s;}
.g1-item:hover{background:#fdf8ec;}
.g1-item:last-child{padding-bottom:8px;}
.g1-item::before{content:'';position:absolute;left:21px;top:42px;bottom:-4px;width:3px;border-radius:3px;background:linear-gradient(180deg,var(--gold, #d4a04a),var(--gold-light, #f0d68a));}
.g1-item:last-child::before{display:none;}
.g1-dot{position:relative;z-index:1;flex-shrink:0;width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#dcae57,#bd8c30);color:#fff;font-weight:700;font-size:.92rem;display:grid;place-items:center;box-shadow:0 0 0 5px var(--paper, #ffffff),0 0 0 6.5px #eedfb9,0 4px 10px rgba(192,138,48,.32);}
.g1-text{font-size:.97rem;color:var(--ink, #1a1a2e);line-height:1.55;padding-top:7px;}
.g1-text p{margin:0;}
.g1-text p + p{margin-top:6px;}
.rq-divider{height:0;border-top:1px dashed #e0d3ac;margin:18px 0 22px;}
/* ===== Yêu cầu cho GV Breakout — collapsible bar above the lesson title ===== Expanded on load, auto-collapses after 5s (BRQ_AUTO_COLLAPSE_MS in script.js). Collapsed it still shows the first requirement, so it stays informative. */ .brq{margin:0 0 16px;}
.brq-bar{display:flex;align-items:center;gap:10px;width:100%;background:#f0fdf6;border:1px solid #c9e9d8;border-radius:12px;padding:9px 14px;cursor:pointer;text-align:left;font-family:inherit;transition:background .15s,border-color .15s;}
.brq-bar:hover{background:#e8faf1;border-color:#a3d9bd;}
.brq-bar:focus-visible{outline:2px solid #10b981;outline-offset:2px;}
.brq.is-open .brq-bar{border-radius:12px 12px 0 0;border-bottom-color:transparent;}
.brq-ic{flex:0 0 26px;width:26px;height:26px;border-radius:8px;background:#dcf5e8;color:#0f9d6e;display:grid;place-items:center;font-size:.82rem;}
.brq-ttl{font-family:'Crimson Pro',Georgia,serif;font-weight:700;font-size:1.02rem;color:#14532d;white-space:nowrap;}
.brq-prev{flex:1;min-width:0;font-size:.86rem;color:#4b7a63;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.brq.is-open .brq-prev{display:none;}
.brq-cnt{margin-left:auto;flex:0 0 auto;font-size:.7rem;font-weight:700;color:#0f9d6e;background:#dcf5e8;padding:3px 11px;border-radius:20px;white-space:nowrap;}
.brq.is-open .brq-cnt{margin-left:auto;}
.brq-chev{flex:0 0 auto;color:#0f9d6e;font-size:.78rem;transition:transform .2s;}
.brq.is-open .brq-chev{transform:rotate(180deg);}
.brq-body{display:none;background:#f6fdf9;border:1px solid #c9e9d8;border-top:none;border-radius:0 0 12px 12px;padding:8px 16px 10px;}
.brq.is-open .brq-body{display:block;}
.brq .g1-item{padding:5px 8px 16px 2px;}
.brq .g1-item:last-child{padding-bottom:6px;}
.brq .g1-item:hover{background:#eefaf3;}
.brq .g1-item::before{left:16px;top:36px;background:linear-gradient(180deg,#10b981,#6ee7b7);}
.brq .g1-dot{width:30px;height:30px;font-size:.84rem;background:linear-gradient(135deg,#34d399,#059669);box-shadow:0 0 0 4px #f6fdf9,0 0 0 5.5px #cdeadb;}
.brq .g1-text{padding-top:4px;font-size:.94rem;}
.brq-needs{display:flex;flex-wrap:wrap;gap:5px;margin-top:5px;}
.brq-need{display:inline-flex;align-items:center;gap:5px;font-size:.7rem;font-weight:700;color:#0b6b4d;background:#dcf5e8;border:1px solid #b6e6cf;padding:2px 9px;border-radius:20px;}
.brq-need i{font-size:.66rem;}