/* =============================================================================
   Kris-soicau — skeleton.css
   Hiệu ứng skeleton shimmer khi tải dữ liệu động. Tôn trọng reduced-motion.
   ========================================================================== */

.scp-skeleton,
.scp-skeleton--row,
.scp-skeleton--num,
.scp-skeleton--card {
  position: relative;
  overflow: hidden;
  background: var(--scp-surface-2);
  border-radius: var(--scp-r-sm);
}

.scp-skeleton::after,
.scp-skeleton--row::after,
.scp-skeleton--num::after,
.scp-skeleton--card::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    90deg,
    transparent 0,
    color-mix(in srgb, var(--scp-surface) 70%, transparent) 50%,
    transparent 100%
  );
  animation: scp-shimmer 1.2s var(--scp-ease) infinite;
}

.scp-skeleton--row { height: 14px; margin: 8px 0; }
.scp-skeleton--row.is-short { width: 40%; }
.scp-skeleton--num {
  display: inline-block;
  width: 56px;
  height: 24px;
  margin: 3px;
  vertical-align: middle;
}
.scp-skeleton--card { height: 320px; width: 100%; }

/* Skeleton dạng lưới KQXS: placeholder header đài + số gọn trong ô */
.scp-skeleton--head { height: 15px; width: 70%; margin: 2px auto; }
.scp-kq-grid--skeleton .scp-skeleton--num { width: 42px; height: 20px; margin: 2px; }
.scp-kq-grid--skeleton { margin-bottom: var(--scp-sp-4); }

@keyframes scp-shimmer {
  100% { transform: translateX(100%); }
}

/* Ẩn skeleton khi dữ liệu đã nạp */
.scp-is-loaded .scp-skeleton,
.scp-is-loaded .scp-skeleton--row,
.scp-is-loaded .scp-skeleton--num,
.scp-is-loaded .scp-skeleton--card { display: none; }

@media (prefers-reduced-motion: reduce) {
  .scp-skeleton::after,
  .scp-skeleton--row::after,
  .scp-skeleton--num::after,
  .scp-skeleton--card::after { animation: none; }
}