/* luyen.css — khối câu luyện trên trang Tóm tắt SGK (luyen.js chấm). Dùng biến màu của trang công khai (public-sgk.js) với giá trị dự phòng;
   --green / --red trang công khai chưa có nên khai báo ở đây (theo chế độ tối của hệ thống). */
:root { --green: #15803d; --red: #c0262d; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --green: #34c38f; --red: #ff6b6b; } }
:root[data-theme="dark"] { --green: #34c38f; --red: #ff6b6b; }
.ly { margin: 18px 0; padding: 14px 16px; border-radius: 20px; background: var(--card, #fff); box-shadow: inset 0 0 0 1px var(--sep, rgba(0, 0, 0, 0.1)); }
.ly-t { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 6px; font-size: 18px; color: var(--chinh, #1f4e9c); }
.ly-n { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 999px; background: var(--fill, rgba(120, 120, 128, 0.12)); color: var(--label-2, #6e6e73); font-size: 14.5px; font-weight: 700; font-variant-numeric: tabular-nums; transition: background 0.2s, color 0.2s; }
.ly-t.all .ly-n { background: color-mix(in srgb, var(--green, #15803d) 18%, transparent); color: var(--green, #15803d); }
.ly-p { margin: 14px 0 4px; font-size: 16px; font-weight: 700; color: var(--label-2, #6e6e73); }
.ly-q { margin: 12px 0 0; padding: 12px 0 0; border-top: 0.5px solid var(--sep, rgba(0, 0, 0, 0.1)); }
.ly-q:first-of-type, .ly-p + .ly-q { border-top: 0; padding-top: 4px; }
.ly-s { margin: 0 0 8px; }
.ly-s > b { color: var(--chinh, #1f4e9c); }
.ly-lv { display: inline-block; margin: 0 2px 0 8px; padding: 1px 9px; border-radius: 999px; background: color-mix(in srgb, var(--chinh, #1f4e9c) 10%, transparent); color: var(--chinh, #1f4e9c); font-size: 13.5px; font-weight: 600; vertical-align: 2px; white-space: nowrap; }
/* Phương án trắc nghiệm (như .cw-opt của app) */
.ly-opts { display: flex; flex-direction: column; gap: 10px; }
.ly-opt {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 54px; padding: 11px 14px; border: 0; border-radius: 17px; background: var(--fill, rgba(120, 120, 128, 0.12)); color: var(--label, #1d1d1f);
  font: inherit; text-align: left; cursor: pointer; transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1), background 0.2s, box-shadow 0.2s, opacity 0.2s;
}
.ly-opt b { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--card, #fff); font-size: 14.5px; transition: background 0.2s, color 0.2s; }
.ly-opt span { min-width: 0; }
.ly-opt:active:not(:disabled) { transform: scale(0.98); transition-duration: 0.1s; }
.ly-opt:disabled { cursor: default; }
.ly-opt.ok { background: color-mix(in srgb, var(--green, #15803d) 16%, transparent); box-shadow: inset 0 0 0 1.5px var(--green, #15803d); }
.ly-opt.ok b { background: var(--green, #15803d); color: #fff; }
.ly-opt.bad { background: color-mix(in srgb, var(--red, #c0262d) 13%, transparent); box-shadow: inset 0 0 0 1.5px var(--red, #c0262d); }
.ly-opt.bad b { background: var(--red, #c0262d); color: #fff; }
.ly-q.done .ly-opt:not(.ok):not(.bad) { opacity: 0.55; }
/* Đúng / sai từng ý */
.ly-tf { list-style: none; margin: 0; padding: 0; }
.ly-tf li { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 6px 10px; margin: 0 0 6px; border-radius: 14px; }
.ly-tf li > span:first-child { flex: 1; min-width: 0; }
.ly-tf li.ok { background: color-mix(in srgb, var(--green, #15803d) 12%, transparent); }
.ly-tf li.bad { background: color-mix(in srgb, var(--red, #c0262d) 10%, transparent); }
.ly-ds { display: inline-flex; flex: none; gap: 6px; }
.ly-ds button {
  position: relative; min-width: 62px; height: 40px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--fill, rgba(120, 120, 128, 0.12)); color: var(--label, #1d1d1f);
  font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1), background 0.2s, color 0.2s;
}
.ly-ds button::before { content: ''; position: absolute; inset: -4px; }
.ly-ds button:active:not(:disabled) { transform: scale(0.96); transition-duration: 0.1s; }
.ly-ds button.on { background: color-mix(in srgb, var(--chinh, #1f4e9c) 16%, transparent); color: var(--chinh, #1f4e9c); }
.ly-tf li.ok .ly-ds button.on { background: var(--green, #15803d); color: #fff; }
.ly-tf li.bad .ly-ds button.on { background: var(--red, #c0262d); color: #fff; }
.ly-ds button:disabled { cursor: default; }
/* Nút Kiểm tra, ô trả lời ngắn */
.ly-check { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 20px; border: 0; border-radius: 999px; background: var(--link, #d8643d); color: #fff; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1), filter 0.2s; }
.ly-check:hover:not(:disabled) { filter: brightness(1.05); }
.ly-check:active:not(:disabled) { transform: scale(0.96); transition-duration: 0.1s; }
.ly-q.done > .ly-check, .ly-q.done .ly-in .ly-check { display: none; }
.ly-tf + .ly-check { margin-top: 4px; }
.ly-in { display: flex; gap: 8px; align-items: center; }
.ly-in input { flex: 1; min-width: 0; height: 44px; padding: 0 14px; border: 0; border-radius: 12px; background: var(--card, #fff); box-shadow: inset 0 0 0 1px var(--sep, rgba(0, 0, 0, 0.1)); color: var(--label, #1d1d1f); font: inherit; font-size: 17px; }
.ly-in input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--link, #d8643d); }
.ly-in input.ok { box-shadow: inset 0 0 0 1.5px var(--green, #15803d); background: color-mix(in srgb, var(--green, #15803d) 12%, transparent); }
.ly-in input.bad { box-shadow: inset 0 0 0 1.5px var(--red, #c0262d); background: color-mix(in srgb, var(--red, #c0262d) 10%, transparent); }
/* Lời giải sau khi chấm, nút Xem lại mục */
.ly-x { margin-top: 10px; padding: 10px 14px; border-radius: 12px; background: var(--fill, rgba(120, 120, 128, 0.12)); }
.ly-x p { margin: 0 0 8px; }
.ly-x > *:last-child { margin-bottom: 0; }
.ly-r { font-weight: 700; }
.ly-q.ok .ly-r { color: var(--green, #15803d); }
.ly-q.bad .ly-r { color: var(--red, #c0262d); }
.ly-back { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; background: color-mix(in srgb, var(--link, #d8643d) 14%, transparent); color: var(--link, #d8643d); font-size: 15px; font-weight: 600; text-decoration: none; }
.ly-back:hover { text-decoration: none; filter: brightness(0.97); }
.ly-sum { margin: 14px 0 0; font-size: 17px; font-weight: 700; color: var(--chinh, #1f4e9c); }
/* Rung nhẹ khi chưa chọn đủ ý / chưa gõ trả lời */
.shake { animation: ly-shake 0.3s; }
@keyframes ly-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
@media (prefers-reduced-motion: reduce) {
  .ly-opt, .ly-ds button, .ly-check, .ly-n { transition: none; }
  .shake { animation: none; }
}
@media (max-width: 480px) {
  .ly { padding: 12px 14px; }
  .ly-tf li { flex-wrap: wrap; }
  .ly-tf li > span:first-child { flex-basis: 100%; }
  .ly-ds { margin-left: auto; }
}