/* Cài đặt gọn: một nút nhỏ ở thanh trên, bảng chỉ hiện khi bấm. Không chiếm chỗ trong vùng nội dung. */
/* .sp nằm trong .top-in (header.css), nên top:100% là ngay dưới thanh trên */
.sp { position: absolute; top: calc(100% + 6px); right: clamp(14px, 3vw, 32px); z-index: 60; width: min(280px, calc(100vw - 20px)); padding: 8px 14px 10px; background: var(--flour); border: 1.5px solid var(--ink); border-radius: 14px; box-shadow: var(--shadow), 0 14px 34px rgba(42, 33, 24, .2); }
.sp[hidden] { display: none; }
.sp-h { margin: 8px 0 2px; font: 700 11px var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--wheat-d); }
.sp-h:first-child { margin-top: 2px; }
.sp-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 36px; margin: 0; font: 500 14px var(--display); color: var(--ink); cursor: pointer; }
.sp-row > span:first-child { flex: none; }

.sp-sw { appearance: none; -webkit-appearance: none; flex: none; position: relative; width: 38px; height: 22px; margin: 0; border-radius: 999px; background: #cdbfa6; border: 1.5px solid var(--ink); cursor: pointer; transition: background .15s; }
.sp-sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 13px; height: 13px; box-sizing: border-box; border-radius: 50%; background: #fff; border: 1.5px solid var(--ink); transition: transform .15s; }
.sp-sw:checked { background: var(--wheat); }
.sp-sw:checked::after { transform: translateX(16px); }

.sp-vol input[type=range] { flex: 1 1 auto; min-width: 0; width: 100%; accent-color: var(--wheat-d); cursor: pointer; }
.sp-vol output { flex: none; min-width: 3.2ch; text-align: right; font: 600 13px var(--display); font-variant-numeric: tabular-nums; color: var(--ink2); }
.sp-vol.off { opacity: .45; }
.sp-vol.off input { cursor: default; }

.sp-seg { display: inline-flex; border: 1.5px solid var(--ink); border-radius: 999px; overflow: hidden; }
.sp-seg button { font: 600 12.5px var(--display); padding: 4px 10px; background: var(--flour); color: var(--ink); border: 0; cursor: pointer; }
.sp-seg button[data-font="lexend"] { font-family: "Lexend", var(--display); }
.sp-seg button + button { border-left: 1.5px solid var(--ink); }
.sp-seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

.sp-foot { margin: 8px 0 0; padding-top: 8px; border-top: 1px solid var(--line); font: 400 12.5px var(--display); color: var(--ink2); }
.sp-foot kbd { font: 600 11px var(--display); background: #fff; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; padding: 0 5px; }

.sp input:focus-visible, .sp button:focus-visible { outline: 3px solid var(--river); outline-offset: 2px; }

/* thông báo nhỏ khi bấm phím M (tắt/bật tiếng) */
.sp-toast { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); z-index: 61; margin: 0; padding: 6px 14px; background: var(--ink); color: var(--paper); font: 600 13px var(--display); border-radius: 999px; opacity: 0; pointer-events: none; transition: opacity .2s; white-space: nowrap; }
.sp-toast.on { opacity: 1; }

/* «Giảm chuyển động» do người học chọn trong cài đặt: ưu tiên hơn cài đặt của hệ điều hành */
html[data-motion="reduce"] *, html[data-motion="reduce"] *::before, html[data-motion="reduce"] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }

@media print { .sp, .sp-toast { display: none !important; } }