/* =========================================================================
   TapEasy — Kho kiến thức (kb.css) · đi kèm kb.js
   Token: docs/DESIGN-SYSTEM.md (--mint, --coral, --text*, --fk-ov-rgb, --fk-r-*, --fk-s-*).
   Khối minh hoạ gradient (chuyên mục, đầu bài) là "đảo tối" (.fk-dark-island) → chữ trắng ở mọi theme.
   Gradient chuyên mục truyền qua biến --g1 / --g2 (kb.js đặt inline).
   ========================================================================= */
.kb-screen{ --kb-ov: var(--fk-ov-rgb, 255,255,255); --kb-k: var(--fk-line-k, 1); --kb-ink: var(--fk-ink-rgb, 255,255,255); }
.kb-topbar{ position:sticky; background:rgba(var(--fk-veil-rgb, 6,26,36), .9) !important; -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); }
html.lowfx .kb-topbar{ background:rgb(var(--fk-veil-rgb, 6,26,36)) !important; -webkit-backdrop-filter:none; backdrop-filter:none; }
.kb-logo{ font-family:var(--font-head); font-size:17px !important; font-weight:600; letter-spacing:-.01em; text-transform:none; color:var(--text) !important;
  max-width:calc(100% - 120px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:center; }
.kb-progress{ position:absolute; left:0; right:0; bottom:-1px; height:3px; pointer-events:none; opacity:0; transition:opacity .2s; }
.kb-progress i{ display:block; height:100%; width:100%; transform-origin:0 50%; transform:scaleX(0);
  background:linear-gradient(90deg, var(--mint, #33D6C9), var(--coral, #FF7A45)); transition:transform .12s linear; }
.kb-reading .kb-progress{ opacity:1; }
.kb-content{ gap:var(--fk-s-4, 16px); padding-bottom:48px; }
.kb-content [hidden]{ display:none !important; }
#kb-home-body, .kb-results{ display:flex; flex-direction:column; gap:12px; min-width:0; }
.kb-sec + .kb-rail, .kb-sec + .kb-cats, .kb-sec + .kb-list, .kb-sec + .kb-tags, .kb-sec + .kb-terms, .kb-sec + .kb-faqs{ margin-top:-2px; }

/* ---------- Hero + tìm kiếm ---------- */
.kb-hero{ position:relative; overflow:hidden; border-radius:var(--fk-r-3, 22px); padding:20px 16px 16px; color:#fff;
  background:radial-gradient(120% 90% at 0% 0%, rgba(255,255,255,.18), rgba(255,255,255,0) 55%), var(--brand-gradient, linear-gradient(135deg, #1CCFC1, #02A69E 55%, #027A74)); }
.kb-hero-ic{ position:absolute; right:-18px; top:-18px; opacity:.16; }
.kb-hero-ic .material-symbols-rounded{ font-size:132px; color:#fff; }
.kb-hero h2{ font-size:24px; line-height:1.15; font-weight:700; letter-spacing:-.02em; color:#fff; margin:0 0 6px; position:relative; }
.kb-hero p{ font-size:13px; line-height:1.5; color:rgba(255,255,255,.9); margin:0 0 14px; max-width:34em; position:relative; }
.kb-search{ position:relative; display:flex; align-items:center; gap:8px; min-height:50px; padding:0 6px 0 14px; border-radius:16px;
  background:rgba(6,26,36,.42); border:1px solid rgba(255,255,255,.28); }
.kb-search:focus-within{ border-color:#fff; box-shadow:0 0 0 3px rgba(255,255,255,.18); }
.kb-search > .material-symbols-rounded{ font-size:20px; color:rgba(255,255,255,.85); flex:none; }
.kb-search input{ flex:1; min-width:0; height:46px; font-size:16px; color:#fff; background:none; border:0; outline:none; font-family:var(--font-ui); }
.kb-search input::placeholder{ color:rgba(255,255,255,.7); }
.kb-search input::-webkit-search-cancel-button{ display:none; }
.kb-q-clear{ width:44px; height:44px; border:0; border-radius:12px; background:none; color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.kb-search--sm{ background:rgba(var(--kb-ov), calc(.06 * var(--fk-ov-k, 1))); border-color:rgba(var(--kb-ov), calc(.16 * var(--kb-k))); }
.kb-search--sm input{ color:var(--text); }
.kb-search--sm input::placeholder{ color:var(--text-dim); }
.kb-search--sm > .material-symbols-rounded{ color:var(--text-muted); }
.kb-search--sm:focus-within{ border-color:var(--mint); box-shadow:none; }

.kb-tabs button{ min-height:44px; font-size:14px; }

/* ---------- Tiêu đề khu ---------- */
.kb-sec{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin:6px 2px 0; }
.kb-sec h3, .kb-sec h2{ display:flex; align-items:center; gap:8px; font-size:17px; font-weight:600; color:var(--text); margin:0; }
.kb-sec--big h2{ font-size:21px; }
.kb-sec h3 .material-symbols-rounded, .kb-sec h2 .material-symbols-rounded{ font-size:19px; color:var(--mint); }
.kb-sec small{ font-size:12px; color:var(--text-muted); white-space:nowrap; }
.kb-count{ font-size:13px; color:var(--text-muted); margin:0 2px; }

/* ---------- Thẻ bài viết ---------- */
.kb-list{ display:flex; flex-direction:column; gap:10px; }
.kb-rail{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(240px, 80%); gap:10px; overflow-x:auto; scroll-snap-type:x mandatory;
  margin:0 -16px; padding:2px 16px 6px; scroll-padding-inline:16px; scrollbar-width:none; }
.kb-rail::-webkit-scrollbar{ display:none; }
.kb-rail .kb-card{ scroll-snap-align:start; }
.kb-card{ --g1:#1CCFC1; --g2:#027A74; position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:6px; width:100%; min-height:44px;
  padding:14px 14px 12px 18px; text-align:left; color:var(--text); cursor:pointer; overflow:hidden; font-family:var(--font-ui);
  background:var(--glass, rgba(255,255,255,.08)); border:1px solid rgba(var(--kb-ov), calc(.13 * var(--kb-k))); border-radius:18px;
  transition:transform .15s ease, border-color .15s ease; }
.kb-card::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background:linear-gradient(180deg, var(--g1), var(--g2)); }
.kb-card:active{ transform:scale(.985); }
.kb-card:focus-visible, .kb-cat:focus-visible, .kb-act:focus-visible, .kb-qbtn:focus-visible, .kb-exc:focus-visible{ outline:2px solid var(--mint); outline-offset:2px; }
.kb-card-cat{ display:flex; align-items:center; gap:5px; font-size:12px; font-weight:600; color:var(--text-muted); letter-spacing:.01em; }
.kb-card-cat .material-symbols-rounded{ font-size:15px; color:var(--mint); }
.kb-card-t{ font-family:var(--font-head); font-size:16px; line-height:1.32; font-weight:600; letter-spacing:-.01em; color:var(--text); }
.kb-card-s{ font-size:13px; line-height:1.5; color:var(--text-muted); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.kb-card-s.kb-snip{ -webkit-line-clamp:3; }
.kb-card-m{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; font-size:12px; color:var(--text-dim); margin-top:2px; }
.kb-card-m > .material-symbols-rounded{ font-size:14px; }
.kb-flag{ display:inline-flex; align-items:center; gap:3px; padding:2px 8px; border-radius:999px; font-size:12px; font-weight:600;
  background:rgba(var(--kb-ov), calc(.08 * var(--fk-ov-k, 1))); color:var(--text-muted); }
.kb-flag .material-symbols-rounded{ font-size:13px; }
.kb-flag--read{ background:rgba(var(--mint-rgb, 51,214,201), .14); color:var(--mint); }
.kb-card.is-read .kb-card-t{ opacity:.82; }
.kb-card mark, .kb-body mark{ background:rgba(var(--coral-rgb, 255,122,69), .28); color:inherit; border-radius:4px; padding:0 2px; }

/* ---------- Lưới chuyên mục (minh hoạ gradient + icon) ---------- */
.kb-cats{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
.kb-cat{ --g1:#1CCFC1; --g2:#027A74; position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-start;
  min-height:118px; padding:12px 12px 12px; border:0; border-radius:20px; text-align:left; cursor:pointer; color:#fff; font-family:var(--font-ui);
  background:radial-gradient(90% 80% at 100% 0%, rgba(255,255,255,.22), rgba(255,255,255,0) 60%), linear-gradient(140deg, var(--g1), var(--g2));
  box-shadow:0 8px 22px rgba(0,0,0,.22); animation:kbIn .5s cubic-bezier(.2,.8,.2,1) both; animation-delay:calc(var(--i, 0) * 35ms); }
.kb-cat::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(6,26,36,.62), rgba(6,26,36,.08) 62%, rgba(6,26,36,0)); pointer-events:none; }
.kb-cat-art{ position:absolute; right:-16px; top:-14px; transform:rotate(-14deg); opacity:.22; pointer-events:none; }
.kb-cat-art .material-symbols-rounded{ font-size:96px; color:#fff; }
.kb-cat-ic{ position:absolute; left:12px; top:12px; z-index:1; width:38px; height:38px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.22); border:1px solid rgba(255,255,255,.3); }
.kb-cat-ic .material-symbols-rounded{ font-size:21px; color:#fff; }
.kb-cat b{ position:relative; z-index:1; font-family:var(--font-head); font-size:15px; line-height:1.25; font-weight:700; letter-spacing:-.01em; color:#fff; }
.kb-cat small{ position:relative; z-index:1; font-size:12px; color:rgba(255,255,255,.88); margin-top:3px; }
.kb-cat:active{ transform:scale(.97); }
@keyframes kbIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }

/* ---------- Lối tắt + thẻ ---------- */
.kb-quick{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; }
.kb-qbtn{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; min-height:76px; padding:12px; border-radius:16px; cursor:pointer; text-align:left; color:var(--text);
  background:var(--glass, rgba(255,255,255,.08)); border:1px solid rgba(var(--kb-ov), calc(.13 * var(--kb-k))); font-family:var(--font-ui); }
.kb-qbtn .material-symbols-rounded{ font-size:22px; color:var(--mint); margin-bottom:4px; }
.kb-qbtn b{ font-size:13px; font-weight:600; line-height:1.25; }
.kb-qbtn small{ font-size:12px; color:var(--text-muted); }
.kb-tags{ display:flex; flex-wrap:wrap; gap:8px; }
.kb-tag{ min-height:40px; padding:0 14px; display:inline-flex; align-items:center; gap:6px; font-size:13px; cursor:pointer; }
.kb-tag small{ font-size:12px; opacity:.7; }
.kb-tag.active{ background:var(--mint); color:var(--on-mint, #061A24); border-color:var(--mint); }
.kb-ed-bar{ display:flex; flex-wrap:wrap; gap:8px; }
.kb-ed-bar .btn{ min-height:44px; }
.kb-disclaimer{ font-size:12px; line-height:1.55; color:var(--text-dim); margin:8px 2px 0; }
.kb-empty{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px; padding:28px 16px; border-radius:20px;
  background:rgba(var(--kb-ov), calc(.05 * var(--fk-ov-k, 1))); }
.kb-empty > .material-symbols-rounded{ font-size:34px; color:var(--mint); }
.kb-empty b{ font-size:15px; color:var(--text); }
.kb-empty small{ font-size:13px; color:var(--text-muted); max-width:28em; }

/* ---------- Trang chuyên mục ---------- */
.kb-cat-hero, .kb-art-hero{ --g1:#1CCFC1; --g2:#027A74; position:relative; overflow:hidden; border-radius:24px; padding:20px 18px 18px; color:#fff;
  background:radial-gradient(100% 90% at 100% 0%, rgba(255,255,255,.2), rgba(255,255,255,0) 55%), linear-gradient(145deg, var(--g1), var(--g2)); }
.kb-cat-hero::after, .kb-art-hero::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(6,26,36,.6), rgba(6,26,36,.12) 70%, rgba(6,26,36,0)); pointer-events:none; }
.kb-cat-hero > *, .kb-art-hero > *{ position:relative; z-index:1; }
.kb-cat-hero .kb-cat-art, .kb-art-hero .kb-cat-art{ position:absolute; z-index:0; right:-20px; top:-20px; }
.kb-cat-hero .kb-cat-art .material-symbols-rounded, .kb-art-hero .kb-cat-art .material-symbols-rounded{ font-size:150px; }
.kb-cat-hero .kb-cat-ic{ position:relative; left:auto; top:auto; margin-bottom:12px; }
.kb-cat-hero h2{ font-size:24px; line-height:1.2; font-weight:700; color:#fff; margin:0 0 6px; }
.kb-cat-hero p{ font-size:14px; line-height:1.55; color:rgba(255,255,255,.92); margin:0 0 8px; }
.kb-cat-hero small{ font-size:12px; color:rgba(255,255,255,.85); }

/* ---------- Trang đọc ---------- */
.kb-art{ display:flex; flex-direction:column; gap:14px; }
.kb-crumb{ display:inline-flex; align-items:center; gap:6px; min-height:36px; padding:0 12px; margin-bottom:12px; border-radius:999px; cursor:pointer;
  border:1px solid rgba(255,255,255,.35); background:rgba(255,255,255,.16); color:#fff; font-size:12.5px; font-weight:600; font-family:var(--font-ui); }
.kb-crumb .material-symbols-rounded{ font-size:16px; color:#fff; }
.kb-art-hero h1{ font-family:'Be Vietnam Pro', var(--font-head); font-size:clamp(22px, 6.2vw, 30px); line-height:1.22; font-weight:700; letter-spacing:-.015em; color:#fff; margin:0 0 10px; text-transform:none; }
.kb-lead{ font-size:15.5px; line-height:1.6; color:rgba(255,255,255,.94); margin:0 0 12px; }
.kb-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 6px; font-size:12.5px; color:rgba(255,255,255,.88); }
.kb-meta .material-symbols-rounded{ font-size:15px; color:#fff; }
.kb-actions{ display:flex; flex-wrap:wrap; gap:8px; }
.kb-act{ display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 14px; border-radius:999px; cursor:pointer; font-family:var(--font-ui);
  font-size:13px; font-weight:600; color:var(--text); background:rgba(var(--kb-ov), calc(.07 * var(--fk-ov-k, 1))); border:1px solid rgba(var(--kb-ov), calc(.16 * var(--kb-k))); }
.kb-act .material-symbols-rounded{ font-size:18px; }
.kb-act.on{ background:rgba(var(--mint-rgb, 51,214,201), .16); color:var(--mint); border-color:rgba(var(--mint-rgb, 51,214,201), .5); }
.kb-toc{ padding:14px 16px 10px; border-radius:18px; background:rgba(var(--kb-ov), calc(.05 * var(--fk-ov-k, 1))); border:1px solid rgba(var(--kb-ov), calc(.12 * var(--kb-k))); }
.kb-toc > b{ display:flex; align-items:center; gap:8px; font-size:13px; font-weight:700; color:var(--text); text-transform:uppercase; letter-spacing:.06em; margin-bottom:4px; }
.kb-toc > b .material-symbols-rounded{ font-size:18px; color:var(--mint); }
.kb-toc ol{ margin:0; padding:0 0 0 22px; }
.kb-toc li{ font-size:14px; line-height:1.4; color:var(--text-muted); }
.kb-toc li::marker{ color:var(--mint); font-weight:700; }
.kb-toc a{ display:block; padding:8px 0; min-height:36px; color:var(--text); text-decoration:none; }

/* Chữ đọc thoải mái: 16–19 px, dòng 1,72, tối đa ~68 ký tự */
.kb-body{ font-family:var(--font-ui); color:var(--text); font-size:17px; line-height:1.72; letter-spacing:.003em; max-width:68ch; word-wrap:break-word; hyphens:manual; }
.kb-body.kb-fs-0{ font-size:15.5px; } .kb-body.kb-fs-1{ font-size:17px; } .kb-body.kb-fs-2{ font-size:19px; }
.kb-body > :first-child{ margin-top:0; }
.kb-body p{ margin:0 0 .95em; }
.kb-body h2{ font-family:var(--font-head); font-size:1.24em; line-height:1.3; font-weight:700; letter-spacing:-.015em; color:var(--text); margin:1.6em 0 .55em; scroll-margin-top:72px; text-transform:none; }
.kb-body h3{ font-family:var(--font-head); font-size:1.06em; line-height:1.35; font-weight:700; color:var(--text); margin:1.3em 0 .4em; scroll-margin-top:72px; }
.kb-body ul, .kb-body ol{ margin:0 0 1em; padding-left:1.3em; }
.kb-body li{ margin:.35em 0; padding-left:.15em; }
.kb-body li::marker{ color:var(--mint); font-weight:700; }
.kb-body b{ font-weight:700; color:var(--text); }
.kb-body i{ font-style:italic; }
.kb-body code{ font-size:.88em; padding:1px 5px; border-radius:6px; background:rgba(var(--kb-ov), calc(.08 * var(--fk-ov-k, 1))); }
.kb-alink{ color:var(--mint-2, var(--mint)); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; font-weight:600; cursor:pointer; }
.kb-ex, .kb-tpl{ display:inline-flex; align-items:center; gap:4px; min-height:30px; padding:1px 9px 1px 7px; margin:1px 0; border:0; border-radius:9px; cursor:pointer;
  font:inherit; font-size:.9em; font-weight:600; line-height:1.3; vertical-align:baseline; text-align:left;
  color:var(--mint-2, var(--mint)); background:rgba(var(--mint-rgb, 51,214,201), .13); }
.kb-tpl{ color:var(--coral-2, #FFB08A); background:rgba(var(--coral-rgb, 255,122,69), .13); }
.kb-ex .material-symbols-rounded, .kb-tpl .material-symbols-rounded{ font-size:1em; }
.kb-dead{ color:var(--text-muted); }
.kb-table{ margin:1.1em 0; overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:14px; border:1px solid rgba(var(--kb-ov), calc(.14 * var(--kb-k))); }
.kb-table:focus-visible{ outline:2px solid var(--mint); outline-offset:2px; }
.kb-table table{ width:100%; border-collapse:collapse; font-size:.84em; line-height:1.5; }
.kb-table th, .kb-table td{ padding:9px 11px; text-align:left; vertical-align:top; border-bottom:1px solid rgba(var(--kb-ov), calc(.1 * var(--kb-k))); min-width:6.5em; }
.kb-table th{ font-weight:700; color:var(--text); background:rgba(var(--kb-ov), calc(.07 * var(--fk-ov-k, 1))); white-space:nowrap; }
.kb-table td{ color:var(--text); }
.kb-table tr:last-child td{ border-bottom:0; }
.kb-table td:first-child{ font-weight:600; }
.kb-box{ --bx:var(--text-muted); --bx-rgb:var(--kb-ov); margin:1.15em 0; padding:12px 14px 2px; border-radius:16px; font-size:.95em;
  background:rgba(var(--bx-rgb), .09); border:1px solid rgba(var(--bx-rgb), .35); border-left-width:4px; }
.kb-box-h{ display:flex; align-items:center; gap:8px; margin-bottom:6px; font-size:12.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--bx); }
.kb-box-h .material-symbols-rounded{ font-size:18px; color:var(--bx); }
.kb-box-h b{ color:var(--bx); }
.kb-box--ap-dung{ --bx:var(--mint); --bx-rgb:var(--mint-rgb, 51,214,201); }
.kb-box--an-toan{ --bx:var(--coral-2, #FFB08A); --bx-rgb:var(--coral-rgb, 255,122,69); }
.kb-box--meo{ --bx:var(--mint-2, #A3F0E8); --bx-rgb:var(--mint-rgb, 51,214,201); }
.kb-box--pt{ --bx:var(--coral-2, #FFB08A); --bx-rgb:var(--coral-2-rgb, 255,176,138); }
.kb-box ul, .kb-box ol{ margin-bottom:.8em; }

/* Liên kết bài tập, giáo án, nguồn, liên quan */
.kb-links h2, .kb-src h2, .kb-related h2{ display:flex; align-items:center; gap:8px; font-size:16px; font-weight:600; color:var(--text); margin:6px 0 10px; }
.kb-links h2 .material-symbols-rounded, .kb-src h2 .material-symbols-rounded, .kb-related h2 .material-symbols-rounded{ font-size:19px; color:var(--mint); }
.kb-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.kb-exc{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; min-height:52px; max-width:100%; padding:8px 12px; border-radius:14px; cursor:pointer; text-align:left;
  font-family:var(--font-ui); color:var(--text); background:rgba(var(--mint-rgb, 51,214,201), .1); border:1px solid rgba(var(--mint-rgb, 51,214,201), .3); }
.kb-exc b{ font-size:13.5px; font-weight:600; }
.kb-exc small{ font-size:12px; color:var(--text-muted); }
.kb-exc--tpl{ background:rgba(var(--coral-rgb, 255,122,69), .1); border-color:rgba(var(--coral-rgb, 255,122,69), .3); }
.kb-src{ padding:14px 16px 6px; border-radius:18px; background:rgba(var(--kb-ov), calc(.04 * var(--fk-ov-k, 1))); border:1px solid rgba(var(--kb-ov), calc(.1 * var(--kb-k))); }
.kb-src ol{ margin:0; padding-left:20px; }
.kb-src li{ font-size:12.5px; line-height:1.55; color:var(--text-muted); margin-bottom:9px; overflow-wrap:anywhere; }
.kb-src a{ color:var(--mint-2, var(--mint)); font-weight:600; white-space:nowrap; text-underline-offset:2px; }
.kb-nextprev{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.kb-nextprev button{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; min-height:68px; padding:10px 12px; border-radius:16px; cursor:pointer; text-align:left;
  font-family:var(--font-ui); color:var(--text); background:var(--glass, rgba(255,255,255,.08)); border:1px solid rgba(var(--kb-ov), calc(.13 * var(--kb-k))); }
.kb-nextprev button.nx{ align-items:flex-end; text-align:right; }
.kb-nextprev small{ display:flex; align-items:center; gap:4px; font-size:12px; color:var(--text-muted); }
.kb-nextprev small .material-symbols-rounded{ font-size:15px; }
.kb-nextprev b{ font-size:13px; line-height:1.35; font-weight:600; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* ---------- Thuật ngữ A–Z ---------- */
.kb-az{ position:sticky; top:var(--topbar-h, 56px); z-index:5; display:flex; flex-wrap:nowrap; gap:6px; overflow-x:auto; padding:8px 16px; margin:0 -16px 4px;
  scrollbar-width:none; background:rgba(var(--fk-veil-rgb, 6,26,36), .92); }
.kb-az::-webkit-scrollbar{ display:none; }
.kb-az button{ flex:none; min-width:44px; min-height:44px; padding:0; border-radius:12px; border:1px solid rgba(var(--kb-ov), calc(.14 * var(--kb-k))); cursor:pointer;
  background:rgba(var(--kb-ov), calc(.05 * var(--fk-ov-k, 1))); color:var(--text); font-weight:700; font-size:14px; font-family:var(--font-head); }
.kb-gl-group{ scroll-margin-top:120px; }
.kb-gl-group h3{ font-size:20px; font-weight:700; color:var(--mint); margin:14px 2px 4px; }
.kb-terms{ margin:0; display:flex; flex-direction:column; }
.kb-term{ padding:11px 2px; border-bottom:1px solid rgba(var(--kb-ov), calc(.09 * var(--kb-k))); }
.kb-term dt{ font-size:15px; font-weight:700; color:var(--text); line-height:1.35; }
.kb-term dt small{ font-size:12px; font-weight:500; font-style:italic; color:var(--text-muted); }
.kb-term dd{ margin:4px 0 0; font-size:14px; line-height:1.6; color:var(--text-muted); }

/* ---------- Hỏi đáp ---------- */
.kb-faqs{ display:flex; flex-direction:column; gap:8px; }
.kb-faq{ border-radius:16px; background:var(--glass, rgba(255,255,255,.08)); border:1px solid rgba(var(--kb-ov), calc(.12 * var(--kb-k))); overflow:hidden; }
.kb-faq summary{ display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:54px; padding:10px 14px; cursor:pointer; list-style:none;
  font-size:14.5px; font-weight:600; line-height:1.4; color:var(--text); }
.kb-faq summary::-webkit-details-marker{ display:none; }
.kb-faq summary .material-symbols-rounded{ flex:none; font-size:20px; color:var(--text-muted); transition:transform .2s; }
.kb-faq[open] summary .material-symbols-rounded{ transform:rotate(90deg); color:var(--mint); }
.kb-faq > div{ padding:0 14px 14px; }
.kb-faq p{ margin:0 0 8px; font-size:14.5px; line-height:1.65; color:var(--text-muted); }
.kb-faq .kb-alink{ display:inline-flex; align-items:center; gap:6px; min-height:36px; font-size:13.5px; }
.kb-faq .kb-alink .material-symbols-rounded{ font-size:17px; }

/* ---------- Điểm vào: Trang chủ (dự phòng), khu PT, chi tiết bài tập, menu ---------- */
.kb-home{ display:flex; flex-direction:column; gap:10px; }
.kb-home-h{ display:flex; align-items:center; gap:8px; }
.kb-home-h > .material-symbols-rounded{ font-size:20px; color:var(--mint); }
.kb-home-h b{ flex:1; font-size:15px; font-weight:600; color:var(--text); }
.kb-home-all{ display:inline-flex; align-items:center; gap:2px; min-height:44px; padding:0 4px 0 10px; border:0; background:none; cursor:pointer; color:var(--mint); font-size:13px; font-weight:600; }
.kb-home-all .material-symbols-rounded{ font-size:18px; }
.kb-home-a{ --g1:#1CCFC1; --g2:#027A74; position:relative; overflow:hidden; display:flex; flex-direction:column; align-items:flex-start; gap:4px; width:100%; padding:14px; border:0; border-radius:16px;
  text-align:left; cursor:pointer; color:#fff; font-family:var(--font-ui); background:linear-gradient(140deg, var(--g1), var(--g2)); }
.kb-home-a::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(6,26,36,.55), rgba(6,26,36,.1)); pointer-events:none; }
.kb-home-a > *{ position:relative; z-index:1; }
.kb-home-cat{ display:flex; align-items:center; gap:5px; font-size:12px; font-weight:600; opacity:.92; }
.kb-home-cat .material-symbols-rounded{ font-size:15px; color:#fff; }
.kb-home-a b{ font-family:var(--font-head); font-size:16px; line-height:1.3; }
.kb-home-a small{ font-size:13px; line-height:1.45; opacity:.92; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.kb-home-a i{ font-style:normal; font-size:12px; opacity:.88; }
.kb-coach{ display:flex; align-items:center; gap:12px; width:100%; min-height:68px; margin-top:4px; padding:12px 14px; border-radius:18px; cursor:pointer; text-align:left;
  font-family:var(--font-ui); color:var(--text); background:var(--glass, rgba(255,255,255,.08)); border:1px solid rgba(var(--mint-rgb, 51,214,201), .35); }
.kb-coach-ic{ flex:none; width:44px; height:44px; border-radius:14px; display:flex; align-items:center; justify-content:center; background:var(--brand-gradient, linear-gradient(135deg,#1CCFC1,#027A74)); }
.kb-coach-ic .material-symbols-rounded{ font-size:22px; color:#fff; }
.kb-coach-t{ flex:1; display:flex; flex-direction:column; gap:2px; min-width:0; }
.kb-coach-t b{ font-size:14.5px; font-weight:600; }
.kb-coach-t small{ font-size:12px; line-height:1.45; color:var(--text-muted); }
.kb-coach > .material-symbols-rounded{ color:var(--text-muted); }
.kb-exmore{ margin-top:14px; padding:12px; border-radius:16px; background:rgba(var(--mint-rgb, 51,214,201), .08); border:1px solid rgba(var(--mint-rgb, 51,214,201), .3); }
.kb-exmore-h{ display:flex; align-items:center; gap:8px; margin-bottom:4px; }
.kb-exmore-h .material-symbols-rounded{ font-size:19px; color:var(--mint); }
.kb-exmore-h b{ font-size:14px; color:var(--text); }
.kb-exmore-h small{ margin-left:auto; font-size:12px; color:var(--text-muted); }
.kb-exmore-a{ display:flex; align-items:center; gap:8px; width:100%; min-height:48px; padding:8px 4px; border:0; border-top:1px solid rgba(var(--kb-ov, 255,255,255), .08); background:none;
  cursor:pointer; text-align:left; color:var(--text); font-family:var(--font-ui); }
.kb-exmore-a span{ flex:1; font-size:13.5px; line-height:1.4; font-weight:600; }
.kb-exmore-a small{ font-size:12px; color:var(--text-muted); white-space:nowrap; }
.kb-exmore-a .material-symbols-rounded{ font-size:18px; color:var(--text-muted); }
.kb-menu-row .sub{ font-size:12px; }
.kb-share-url{ width:100%; min-height:44px; font-size:16px; margin-top:10px; padding:10px 12px; border-radius:12px; color:var(--text);
  background:rgba(var(--fk-ov-rgb, 255,255,255), .06); border:1px solid rgba(var(--fk-ov-rgb, 255,255,255), .16); }

/* ---------- Biên tập ---------- */
.kb-ed{ display:flex; flex-direction:column; gap:10px; }
.kb-ed .field label{ display:block; font-size:12.5px; color:var(--text-muted); margin-bottom:4px; }
.kb-ed input, .kb-ed textarea, .kb-ed select{ width:100%; min-height:44px; font-size:16px; font-family:var(--font-ui); color:var(--text); padding:10px 12px; border-radius:12px;
  background:rgba(var(--fk-ov-rgb, 255,255,255), calc(.06 * var(--fk-ov-k, 1))); border:1px solid rgba(var(--fk-ov-rgb, 255,255,255), calc(.16 * var(--fk-line-k, 1))); }
.kb-ed input:focus, .kb-ed textarea:focus, .kb-ed select:focus{ outline:none; border-color:var(--mint); }
.kb-ed-body{ font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important; line-height:1.55; }
.kb-ed-row{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.kb-ed-help{ font-size:12.5px; color:var(--text-muted); }
.kb-ed-help summary{ min-height:36px; display:flex; align-items:center; cursor:pointer; color:var(--mint); font-weight:600; }
.kb-ed-help code{ font-size:12px; padding:1px 4px; border-radius:5px; background:rgba(var(--fk-ov-rgb, 255,255,255), .08); }
.kb-ed-msg span{ display:block; font-size:13px; color:var(--coral-2, #FFB08A); margin:2px 0; }
.kb-ed-actions{ display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; }
.kb-ed-actions .btn{ min-height:44px; }
.kb-ed-preview{ margin-top:8px; padding:14px; border-radius:16px; border:1px dashed rgba(var(--fk-ov-rgb, 255,255,255), .25); }
.kb-drafts{ display:flex; flex-direction:column; gap:8px; }
.kb-draft{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px; border-radius:14px; background:var(--glass, rgba(255,255,255,.08));
  border:1px solid rgba(var(--kb-ov), calc(.12 * var(--kb-k))); }
.kb-draft b{ display:block; font-size:14px; color:var(--text); }
.kb-draft small{ font-size:12px; color:var(--text-muted); }
.kb-draft-a{ display:flex; gap:6px; flex:none; }
.kb-draft-a .btn{ min-height:44px; }

/* ---------- Màn rộng ---------- */
@media (min-width:640px){
  .kb-cats{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .kb-rail{ grid-auto-columns:minmax(260px, 46%); }
}
/* Vòng sửa 2 · fkLazy: khung chờ / lỗi + Thử lại khi dữ liệu kb-data-*.js đang nạp */
.kb-loading{ display:flex; flex-direction:column; gap:10px; padding:6px 0; }
.kb-loading > .small-note{ margin:0; }
.kb-state{ margin-top:16px; }
/* QU-36: ≥ 1024 px — danh sách bài thành lưới 2 cột khi khung rộng (ui-kit.css mở khung theo html[data-screen="kb"]);
   minmax 320 px → khung điện thoại 460 px vẫn 1 cột, khung ≤ 820 px đúng 2 cột. Trang đọc giữ 1 cột (dễ đọc). */
@media (min-width:1024px){
  html[data-screen="kb"] #screen-kb .kb-list{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap:12px; align-items:stretch; }
  html[data-screen="kb"] #screen-kb .kb-list > .kb-card{ height:100%; }
  html[data-screen="kb"] #screen-kb .kb-faqs{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap:10px; align-items:start; }
  html[data-screen="kb"] #screen-kb.kb-reading .kb-body{ max-width:68ch; margin-left:auto; margin-right:auto; }
}
@media (prefers-reduced-motion: reduce){
  .kb-cat{ animation:none; }
  .kb-card, .kb-progress i, .kb-faq summary .material-symbols-rounded{ transition:none; }
}