/* "👓 Cú Bơ chép sai đề?" (misread.js) */
.mr-items { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.mr-now { background: #F7F9FF; border-radius: 12px; padding: 8px 10px; }
.mr-now:empty { display: none; }
.mr-cam { cursor: pointer; }
.mr-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.mr-pick button { border: 2px solid #E8E1D2; background: #fff; border-radius: 12px; padding: 4px; font: inherit; font-weight: 800; cursor: pointer; }
.mr-pick button.on { border-color: var(--green); }
.mr-pick img { width: 100%; height: 120px; object-fit: cover; border-radius: 8px; display: block; }
.crop-wrap { position: relative; touch-action: none; user-select: none; -webkit-user-select: none; line-height: 0; border-radius: 10px; overflow: hidden; }
.crop-wrap img { width: 100%; display: block; pointer-events: none; }
.crop-box { position: absolute; border: 3px solid #FFB020; box-shadow: 0 0 0 9999px rgba(0, 0, 0, .45); border-radius: 4px; cursor: move; }
.crop-box i { position: absolute; width: 22px; height: 22px; background: #FFB020; border-radius: 50%; }
.crop-box i[data-h="nw"] { left: -12px; top: -12px; } .crop-box i[data-h="ne"] { right: -12px; top: -12px; }
.crop-box i[data-h="sw"] { left: -12px; bottom: -12px; } .crop-box i[data-h="se"] { right: -12px; bottom: -12px; }
.mr-keys { display: flex; flex-wrap: wrap; gap: 4px; }
.mr-keys button { min-width: 38px; padding: 6px 8px; border: 1.5px solid #E8E1D2; background: #fff; border-radius: 10px; font: inherit; font-weight: 800; cursor: pointer; }
.mr-btn { border: 1.5px dashed #E0C98F; background: #FFFBF0; color: #8A6A1F; border-radius: 999px; padding: 3px 10px; font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
.mr-row { display: flex; justify-content: flex-end; margin-top: 6px; }