/* CO-CHU-0311 */
/* Module sticker Lớp học AI (việc P2 t_ba0be8213665). Màu chủ đạo xanh lá #0B6CF3 trên nền sáng (YEU-CAU.md 16.11).
   Chữ trên nền xanh dùng #0957C3 (tương phản với chữ trắng 5,4:1, đạt WCAG AA; #0B6CF3 chỉ 3,7:1 nên chỉ dùng cho viền và nét); chữ đậm #1C3128. */
.rqx-st { position: relative; display: inline-block; --st-green: var(--g, #2D5BD7); --st-green-dk: var(--g-d, #1E3A8A); --st-ink: var(--ink2, #1F2937); --st-tint: var(--g-bg, #E8EFFF); }

.rqx-st-btn {
  width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--st-green); background: #fff;
  font-size: 24px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s, transform .15s;
}
.rqx-st-btn:hover, .rqx-st-btn[aria-expanded="true"] { background: var(--st-tint); }
.rqx-st-btn:focus-visible, .rqx-st-item:focus-visible { outline: 3px solid var(--st-green-dk); outline-offset: 2px; }
.rqx-st-wait { animation: rqx-st-shake .35s; }
@keyframes rqx-st-shake { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }

.rqx-st-panel {
  position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); z-index: 50;
  width: 316px; max-width: calc(100vw - 16px); box-sizing: border-box; padding: 10px 10px 8px;
  background: #fff; border: 2px solid var(--st-green); border-radius: 16px; color: var(--st-ink);
  box-shadow: 0 8px 24px rgba(28, 49, 40, .16);
}
.rqx-st-panel[hidden] { display: none; }
.rqx-st-head { font: 600 13px/1.3 system-ui, sans-serif; color: var(--st-ink); margin: 0 2px 8px; }

.rqx-st-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.rqx-st-item {
  border: 1px solid transparent; background: transparent; border-radius: 10px; cursor: pointer; padding: 0;
  height: 38px; font-size: 22px; line-height: 1; display: flex; align-items: center; justify-content: center;
}
.rqx-st-item:hover { background: var(--st-tint); border-color: var(--st-green); }
.rqx-st-item:active { transform: scale(.92); }

.rqx-st-pp { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin-top: 8px; padding-top: 8px; border-top: 1px solid #D5EBD6; }
.rqx-st-ppitem { height: 48px; }
.rqx-st-ppitem img { width: 44px; height: 44px; display: block; }
.rqx-st-hint { font: 11px/1.3 system-ui, sans-serif; color: #4A5C52; margin: 6px 2px 0; }

/* Lớp hiệu ứng trong ô bài giảng: sticker bay lên rồi mờ dần, dưới 2 giây. */
.rqx-st-layer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 40; }
.rqx-st-fly {
  position: absolute; bottom: 8%; font-size: 44px; line-height: 1; transform: translateX(-50%);
  animation-name: rqx-st-fly; animation-timing-function: ease-out; animation-fill-mode: forwards; will-change: transform, opacity;
}
.rqx-st-fly img { width: 72px; height: 72px; display: block; }
@keyframes rqx-st-fly {
  0% { transform: translate(-50%, 0) scale(.6); opacity: 0; }
  12% { transform: translate(-50%, -8%) scale(1.1); opacity: 1; }
  60% { opacity: 1; }
  100% { transform: translate(-50%, -260%) scale(1); opacity: 0; }
}

@media (max-width: 480px) {
  .rqx-st-btn { width: 44px; height: 44px; font-size: 22px; }
  .rqx-st-panel { width: 292px; }
  .rqx-st-item { height: 36px; font-size: 21px; }
  .rqx-st-ppitem img { width: 38px; height: 38px; }
  .rqx-st-fly { font-size: 36px; }
  .rqx-st-fly img { width: 58px; height: 58px; }
}
@media (prefers-reduced-motion: reduce) {
  @keyframes rqx-st-fly { 0% { opacity: 0; } 20% { opacity: 1; } 100% { opacity: 0; } }
}