/**
 * Filmlook.vn — Skeleton cho phần CHỮ (tiêu đề, mô tả, thẻ, danh sách).
 *
 * Cách hoạt động: chỉ dựa vào bộ chọn :empty, không cần JavaScript bật/tắt.
 *  - Trang đã prerender  → thẻ có sẵn nội dung → :empty sai → không skeleton.
 *  - Trang chưa prerender → thẻ rỗng → hiện khối xám shimmer.
 *  - Khi JS điền nội dung → thẻ hết rỗng → skeleton tự biến mất.
 * Nhờ vậy không bao giờ có cảnh chữ cũ bị thay bằng chữ mới trước mắt người dùng.
 *
 * Kích thước skeleton bám theo chính typography của thẻ (dùng em), nên chiều cao
 * khớp với nội dung thật — không gây xê dịch bố cục (layout shift) khi nội dung về.
 */

@keyframes fl-skel-sweep { to { background-position-x: -220%; } }

.skel-line:empty,
.skel-block:empty { position: relative; display: block; }

.skel-line:empty::after,
.skel-block:empty::after {
  content: "";
  display: block;
  border-radius: 6px;
  background-color: rgba(8, 8, 8, .09);
  background-image: linear-gradient(100deg, transparent 25%, rgba(255, 255, 255, .55) 48%, transparent 72%);
  background-size: 220% 100%;
  animation: fl-skel-sweep 1.15s linear infinite;
}

/* Một dòng — dùng cho eyebrow, breadcrumb, tiêu đề */
.skel-line:empty::after { height: .78em; width: 62%; }
.skel-line--short:empty::after { width: 34%; }
.skel-line--wide:empty::after  { width: 88%; }

/* Nhiều dòng — dùng cho đoạn mô tả */
.skel-block:empty::after {
  height: 4.6em;
  border-radius: 8px;
  background-image:
    linear-gradient(100deg, transparent 25%, rgba(255, 255, 255, .55) 48%, transparent 72%),
    linear-gradient(rgba(8, 8, 8, .09) 0 0);
}

/* Trên nền tối (section .contents, hero dark) */
.skel-on-dark .skel-line:empty::after,
.skel-on-dark .skel-block:empty::after,
.skel-line--dark:empty::after,
.skel-block--dark:empty::after {
  background-color: rgba(255, 255, 255, .12);
  background-image: linear-gradient(100deg, transparent 25%, rgba(255, 255, 255, .22) 48%, transparent 72%);
}

/* Thẻ tag / chip đang chờ dữ liệu */
.skel-tags:empty { display: flex; gap: 8px; }
.skel-tags:empty::after,
.skel-tags:empty::before {
  content: "";
  height: 30px; width: 92px; border-radius: 999px;
  background-color: rgba(8, 8, 8, .09);
  background-image: linear-gradient(100deg, transparent 25%, rgba(255, 255, 255, .55) 48%, transparent 72%);
  background-size: 220% 100%;
  animation: fl-skel-sweep 1.15s linear infinite;
}
.skel-tags:empty::before { width: 128px; }

/* Lưới thẻ sản phẩm/bài viết đang chờ dữ liệu */
.skel-card {
  border-radius: 2px;
  background-color: rgba(8, 8, 8, .07);
  background-image: linear-gradient(100deg, transparent 25%, rgba(255, 255, 255, .55) 48%, transparent 72%);
  background-size: 220% 100%;
  animation: fl-skel-sweep 1.15s linear infinite;
}
.skel-card--art  { aspect-ratio: 1.12; }
.skel-card--line { height: .8em; margin-top: 14px; border-radius: 6px; }
.skel-card--line.is-narrow { width: 45%; }

/* Thông báo khi không tải được dữ liệu — thay cho skeleton quay mãi */
.load-error {
  grid-column: 1 / -1;
  padding: 34px 0;
  border-top: 1px solid currentColor;
  color: #69655f;
  font-size: 14px;
  line-height: 1.7;
}
.load-error button {
  margin-left: 10px; padding: 9px 16px; border: 1px solid currentColor;
  border-radius: 999px; background: transparent; color: inherit;
  font-size: 11px; font-weight: 700; cursor: pointer;
}
.load-error button:hover { background: #080808; border-color: #080808; color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .skel-line:empty::after, .skel-block:empty::after,
  .skel-tags:empty::after, .skel-tags:empty::before,
  .skel-card { animation: none; }
}