/* public/css/skeleton.css */

/* 1. Định nghĩa keyframes cho shimmer */
@keyframes shimmer {
  0%   { transform: translateX(0%); }
  100% { transform: translateX(100%); }
}

/* 2. Lớp base cho skeleton */
.skeleton {
  position: relative;
  overflow: hidden;
  background-color: #e2e2e2;
}

/* 3. Pseudo-element để tạo shimmer */
.skeleton::after {
  content: "";
  position: absolute;
  top: 0; left: -150%;
  width: 150%; height: 100%;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0)    0%,
    rgba(255,255,255,0.5) 50%,
    rgba(255,255,255,0)   100%
  );
  animation: shimmer 1.5s infinite;
}

/* Tuỳ biến thêm nếu muốn */
/* .skeleton.rounded { border-radius: .375rem; } */
/* .skeleton-lg { height: 3.5rem; } */