/* Trình soạn bài giảng — khối kho LOPTA (C5): bộ chọn video / hình 3D và thẻ khối trên khung soạn. */
.lopta-picker { width: min(760px, 96vw); max-height: 88vh; padding: 0; border: 0; border-radius: 16px; display: flex; flex-direction: column; }
.lopta-picker:not([open]) { display: none; }
.lopta-picker__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid #e3e8f0; }
.lopta-picker__head h2 { margin: 0; font-size: 18px; }
.lopta-picker .dialog-close { position: static; }
.lopta-picker__tools { padding: 12px 20px 0; display: flex; flex-direction: column; gap: 10px; }
.lopta-picker__tabs { display: flex; gap: 4px; border-bottom: 1px solid #e3e8f0; overflow-x: auto; }
.lopta-picker__tabs button { border: 0; background: none; padding: 8px 12px; font: inherit; cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; color: #3d4a5c; }
.lopta-picker__tabs button[aria-selected="true"] { color: #2f5fe0; border-bottom-color: #2f5fe0; font-weight: 600; }
.lopta-picker__row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.lopta-picker__search { flex: 1 1 200px; min-height: 40px; padding: 8px 12px; border: 1px solid #cbd5e3; border-radius: 10px; font: inherit; }
.lopta-picker__hint { margin: 0; font-size: 13.5px; color: #5f6b80; }
.lopta-picker__body { padding: 12px 20px 20px; overflow-y: auto; }
.lopta-picker__msg { margin: 8px 0; color: #3d4a5c; }
.lopta-picker__msg.is-error { color: #b42318; }
.lopta-picker__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.lopta-pick-item { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: center; padding: 10px; border: 1px solid #e3e8f0; border-radius: 12px; }
.lopta-pick-item.is-disabled { background: #f6f8fb; }
.lopta-pick-thumb { width: 96px; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: #e8eefc; display: grid; place-items: center; color: #2f5fe0; flex: none; }
.lopta-pick-thumb img { width: 100%; height: 100%; object-fit: cover; }
.lopta-pick-text { flex: 1 1 160px; min-width: 0; display: flex; flex-direction: column; gap: 2px; overflow-wrap: anywhere; }
.lopta-pick-text span { font-size: 13.5px; color: #5f6b80; }
.lopta-pick-text .lopta-pick-why { color: #9a6200; }
.lopta-picker__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
.lopta-scene { display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1px solid #e3e8f0; border-radius: 12px; overflow-wrap: anywhere; }
.lopta-scene__thumb { aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; background: #f0f3f9; display: grid; place-items: center; font-size: 28px; color: #2f5fe0; }
.lopta-scene__thumb img { width: 100%; height: 100%; object-fit: cover; }
.lopta-block__card { display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: 12px; background: #f4f7fc; }
.lopta-block__icon { width: 56px; height: 42px; border-radius: 8px; display: grid; place-items: center; background: #e8eefc; color: #2f5fe0; font-size: 20px; flex: none; }
.lopta-block__thumb { width: 96px; max-height: 72px; object-fit: cover; border-radius: 8px; flex: none; }
.lopta-block__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.lopta-block__text span { font-size: 13.5px; color: #5f6b80; }
.lopta-block__text span.is-error { color: #b42318; }
.lopta-block__preview { margin-top: 10px; }