/*
Theme Name: LW Customize
Text Domain: lw-customize
Version: 1.0.0
*/

/* =====================================================================
   Mục "Siêu sao học viên" — hàng cuộn ngang (5 thẻ/màn hình trên desktop)
   Thêm tại đây theo quy tắc dự án (chỉ sửa CSS trong style.css).
   Dùng lại các biến màu từ frontend/css/style.css (:root).
   ===================================================================== */
.lw-stars-section { overflow: hidden; }

.lw-stars-head { text-align: center; max-width: 760px; margin: 0 auto 32px; }
.lw-stars-head .section-label { display: inline-block; margin-bottom: 12px; }
.lw-stars-intro { margin: 14px auto 0; max-width: 640px; }

/* Slider wrapper + nút điều hướng */
.lw-stars-slider { position: relative; padding: 0 8px; }

.lw-stars-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 4 * 20px) / 5); /* 5 thẻ/màn hình */
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 6px 4px 8px;
  /* Ẩn thanh cuộn — điều hướng bằng nút mũi tên (dạng slider) */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.lw-stars-track::-webkit-scrollbar { width: 0; height: 0; display: none; }

.lw-stars-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 2px solid var(--red, #E8192C);
  background: #fff;
  color: var(--red, #E8192C);
  font-size: 24px;
  line-height: 1;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(189, 30, 44, 0.18);
  transition: background .15s ease, color .15s ease, opacity .15s ease;
}
.lw-stars-nav:hover { background: var(--red, #E8192C); color: #fff; }
.lw-stars-nav:disabled { opacity: .35; cursor: default; }
.lw-stars-nav:disabled:hover { background: #fff; color: var(--red, #E8192C); }
.lw-stars-prev { left: -10px; }
.lw-stars-next { right: -10px; }

.lw-star-card {
  scroll-snap-align: start;
  background: #fff;
  border: 2px solid var(--border-dark, #c8c0b0); /* viền đậm hơn */
  border-radius: var(--radius-lg, 16px);
  padding: 22px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-shadow: 0 2px 10px rgba(26, 20, 16, 0.05);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.lw-star-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(189, 30, 44, 0.16);
  border-color: var(--red, #E8192C);
}

.lw-star-top { position: relative; margin-bottom: 14px; }
.lw-star-avatar {
  width: 76px; height: 76px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--red-light, #FDEAEC);
  background: var(--gold-light, #FDF0E8);
}
.lw-star-score {
  position: absolute;
  bottom: -8px; left: 50%;
  transform: translateX(-50%);
  background: var(--red, #E8192C);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
  padding: 5px 10px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(189, 30, 44, 0.3);
}

.lw-star-name { font-weight: 700; color: var(--text, #1a1410); font-size: 16px; margin-top: 4px; }
.lw-star-sub { color: var(--text-muted, #7a7060); font-size: 12.5px; margin-top: 3px; line-height: 1.35; }
.lw-star-ach {
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--gold-light, #FDF0E8);
  color: var(--red-dark, #BD1E2C);
  font-weight: 600;
  font-size: 12.5px;
  padding: 6px 12px;
  border-radius: 999px;
  line-height: 1.3;
}
.lw-star-ach span { font-size: 13px; }

@media (max-width: 1024px) {
  .lw-stars-track { grid-auto-columns: calc((100% - 2 * 20px) / 3); } /* 3 thẻ/màn hình */
}
@media (max-width: 640px) {
  .lw-stars-slider { padding: 0; }
  .lw-stars-track { grid-auto-columns: 78%; gap: 14px; } /* ~1.3 thẻ/màn hình */
  .lw-stars-nav { width: 38px; height: 38px; font-size: 20px; }
  .lw-stars-prev { left: 0; }
  .lw-stars-next { right: 0; }
}