/* Dedy: cửa sổ tìm bài học. Tự đủ, dùng được ở cả trang giới thiệu (biến --text, --text-2) lẫn trang bài học (biến --fg, --muted). */
.spop{--sp-surface:var(--surface,#fff);--sp-fg:var(--fg,var(--text,#121214));--sp-muted:var(--muted,var(--text-2,#5b5b60));--sp-faint:var(--faint,var(--text-3,#85858a));--sp-tile:var(--tile,#ededea);--sp-line:var(--line,rgba(18,18,20,.08));--sp-go:var(--go,#2ccb5c);--sp-mono:var(--mono,var(--font-mono,ui-monospace,monospace));
 width:min(100% - 1.5rem,41rem);max-width:none;max-height:min(78dvh,42rem);margin:11vh auto 0;padding:0;border:0;border-radius:1.75rem;background:var(--sp-surface);color:var(--sp-fg);box-shadow:inset 0 0 0 1px var(--sp-line),0 32px 70px -34px rgba(18,18,20,.4);overflow:hidden;text-align:left}
.spop[open]{display:flex;flex-direction:column;animation:spop-in .24s cubic-bezier(.2,.8,.2,1)}
.spop::backdrop{background:rgba(18,18,20,.3);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);animation:spop-fade .2s ease}
@keyframes spop-in{from{opacity:0;transform:translateY(-.75rem) scale(.98)}}
@keyframes spop-fade{from{opacity:0}}
.spop__top{display:flex;align-items:center;gap:.75rem;padding:.5rem 1rem .5rem 1.25rem;border-bottom:1px solid var(--sp-line);color:var(--sp-faint)}
.spop__top svg{flex:none;width:1.25rem;height:1.25rem}
.spop__input{flex:1;min-width:0;height:3.25rem;padding:0;border:0;background:none;color:var(--sp-fg);font:400 1.125rem/1.4 inherit;font-family:inherit;outline:0;-webkit-appearance:none;appearance:none}
.spop__input::placeholder{color:var(--sp-faint)}
.spop__input::-webkit-search-cancel-button{display:none}
.spop kbd{display:inline-grid;place-items:center;min-width:1.5rem;height:1.5rem;padding:0 .375rem;border-radius:.4375rem;background:var(--sp-tile);box-shadow:none;font:400 .6875rem/1 var(--sp-mono);color:var(--sp-muted)}
.spop__list{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:.5rem}
.spop__group{margin:.5rem .75rem .375rem;font:400 .6875rem/1.4 var(--sp-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--sp-faint)}
.spop__item{display:grid;gap:.125rem;padding:.6875rem .875rem;border-radius:1rem;color:inherit;text-decoration:none}
.spop__item[aria-selected=true]{background:var(--sp-tile)}
.spop__t{font-size:.9375rem;font-weight:600;line-height:1.4}
.spop__x{font-size:.8125rem;line-height:1.5;color:var(--sp-muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.spop mark{padding:0 .125em;border-radius:.25em;background:color-mix(in srgb,var(--sp-go) 26%,transparent);color:inherit}
.spop__none{display:grid;justify-items:center;gap:.375rem;padding:2.25rem 1rem 2rem;text-align:center}
.spop__none strong{font-size:1rem;font-weight:600}
.spop__none span{font-size:.875rem;color:var(--sp-muted)}
.spop__none p{display:flex;flex-wrap:wrap;justify-content:center;gap:.375rem;margin:.5rem 0 0}
.spop__none button{height:2rem;padding:0 .875rem;border:0;border-radius:999px;background:var(--sp-tile);color:var(--sp-fg);font:500 .8125rem inherit;font-family:inherit;cursor:pointer}
.spop__none button:hover{background:color-mix(in srgb,var(--sp-go) 22%,var(--sp-tile))}
.spop__foot{display:flex;flex-wrap:wrap;gap:.375rem 1.25rem;margin:0;padding:.75rem 1.25rem;border-top:1px solid var(--sp-line);font-size:.75rem;color:var(--sp-muted)}
.spop__foot span{display:inline-flex;align-items:center;gap:.25rem}
.spop__foot i{font-style:normal;margin-left:.25rem}
@media (max-width:40rem){.spop{margin-top:.75rem;max-height:calc(100dvh - 1.5rem);border-radius:1.5rem}.spop__foot,.spop__top kbd{display:none}.spop__input{font-size:1rem}}
@media (prefers-reduced-motion:reduce){.spop[open],.spop::backdrop{animation:none}}