/* ==========================================================================
   SHB Star 2026 – CSS tùy chỉnh (nạp SAU các file gốc của FE)
   Chỉ chứa phần chỉnh khi ghép dữ liệu thật; KHÔNG sửa file gốc star-*.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   Wall of Inspiration – ảnh avatar khớp khung sao (avtframe.png 400x380)
   Dùng mask ngôi sao (wall-avatar-mask.svg) thay clip-path polygon để mép ảnh
   nằm gọn trong viền vàng, không lộ góc ảnh chữ nhật ra ngoài khung.
   -------------------------------------------------------------------------- */
.star-wall__avatar-clip {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
  /* Mask sinh TRỰC TIẾP từ vùng rỗng của avtframe.png (script GD, xem docs) nên
     hình sao của ảnh trùng khít viền vàng — không dùng polygon ước lượng nữa */
  -webkit-mask-image: url("../images/wall-avatar-mask-frame.png");
  mask-image: url("../images/wall-avatar-mask-frame.png");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-position: center;
  mask-position: center;
  background: var(--pr-40, #f7a072);
}

.star-wall__avatar-img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Khuôn mặt thường ở phần trên ảnh -> lấy nhiều phần trên để mặt rơi vào thân ngôi sao */
  object-position: center 20%;
  /* Bỏ clip-path của file gốc: hình dạng đã do mask ở phần tử cha đảm nhiệm */
  clip-path: none;
}

.star-wall__avatar-frame {
  z-index: 1;
}

/* --------------------------------------------------------------------------
   Bảng xếp hạng – bục giải dạng carousel
   File gốc dựng .star-podium__grid là flex cố định 3 cột (Nhất/Nhì/Ba). Thực tế
   mỗi vòng có thể có tới 5 giải (thêm Khuyến khích, Triển vọng) nên chuyển sang
   swiper: hiển thị 3 thẻ/màn lớn, kéo xem các giải còn lại.
   -------------------------------------------------------------------------- */
.star-podium__carousel {
  position: relative;
  margin-bottom: 64px;
}

.star-podium__swiper {
  width: 100%;
  overflow: hidden;
}

.star-podium__swiper .swiper-slide {
  height: auto;
}

/* Thẻ gốc dùng flex:1 để chia đều cột; trong slide thì chiếm trọn bề rộng slide */
.star-podium__swiper .star-podium__card {
  flex: 0 0 auto;
  width: 100%;
  /* cqw ở dưới đo theo bề rộng thẻ, không theo viewport */
  container-type: inline-size;
}

/* Ảnh nền riêng của thẻ giải (admin tải lên) — phủ kín thẻ, nằm dưới mọi lớp chữ */
.star-podium__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* Chỉ có sẵn ảnh số 1/2/3 -> hạng 4, 5 dựng bằng chữ số, tái tạo gradient
   dọc của podium-*.svg (#FEF0E6 -> 20% -> #FEF0E6) */
.star-podium__deco--num {
  top: 20%;
  left: 0;
  right: 0;
  text-align: center;
  /* Số trong podium-*.svg là serif nghiêng nét mảnh; bộ font của trang chỉ có sans
     nên dùng serif hệ thống + nghiêng để đồng bộ thị giác với thẻ hạng 1-3 */
  font-family: "Times New Roman", "Liberation Serif", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 104cqw;
  line-height: 0.72;
  background-image: linear-gradient(180deg, #fef0e6 0%, rgba(254, 240, 230, 0.2) 48.5%, #fef0e6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  user-select: none;
}

@media (max-width: 1279.98px) {
  .star-podium__carousel {
    margin-bottom: 48px;
  }
}

/* --------------------------------------------------------------------------
   Bảng xếp hạng – danh sách cuộn được
   iOS/Android ẩn thanh cuộn (overlay), chỉ giữ cuộn mượt; không dùng vệt mờ
   báo hiệu ở đáy card.
   -------------------------------------------------------------------------- */
.star-bxh__card > .star-bxh__list {
  -webkit-overflow-scrolling: touch;
}

/* Mobile + tablet: thanh cuộn hệ thống là dạng overlay (hiện lúc kéo rồi tự ẩn)
   và CSS không ép hiện thường trực được — iOS còn không hỗ trợ ::-webkit-scrollbar.
   Nên ẩn thanh gốc và tự vẽ thanh luôn hiển thị; JS trong _ranking.blade.php
   chèn .star-bxh__scrollbar và cập nhật vị trí thumb theo scrollTop. */
@media (max-width: 1099.98px) {
  .star-bxh__card > .star-bxh__list {
    scrollbar-width: none;
  }

  .star-bxh__card > .star-bxh__list::-webkit-scrollbar {
    width: 0;
    height: 0;
  }

  .star-bxh__scrollbar {
    position: absolute;
    right: 10px;
    width: 4px;
    border-radius: 80px;
    background: var(--raw-grey);
    pointer-events: none;
  }

  .star-bxh__scrollbar > span {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    border-radius: 80px;
    background: var(--raw-grey-dark);
  }
}

/* --------------------------------------------------------------------------
   Menu điều hướng – nhảy tới section
   Header là position:fixed nên khi bấm menu, tiêu đề section bị header che.
   scroll-margin-top chừa đúng chiều cao header (JS cập nhật biến này khi header
   thu gọn lúc cuộn).
   -------------------------------------------------------------------------- */
html {
  scroll-behavior: smooth;
}

.star-wrapper section[id] {
  scroll-margin-top: calc(var(--star-header-height, 98px) + 16px);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* --------------------------------------------------------------------------
   Hero – ảnh banner dùng thẻ <img> thay cho background-image
   Bản gốc đặt height cố định (746/560/420px) + background cover: ảnh PC hiển thị
   trên mobile bị cắt trên dưới, đổi sang contain thì lại chừa khoảng trắng.
   Dùng <img> width 100% / height auto: section cao đúng tỉ lệ ảnh ở mọi thiết bị.
   -------------------------------------------------------------------------- */
.star-hero--img {
  height: auto;
  min-height: 0;
  background-image: none;
}

.star-hero__bg {
  display: block;
}

.star-hero__bg img {
  display: block;
  width: 100%;
  height: auto;
}

/* Chữ/CTA (nếu admin có nhập) đè lên ảnh ở màn rộng... */
@media (min-width: 768px) {
  .star-hero--img .star-hero__content {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
  }
}

/* ...còn màn hẹp thì xuống dưới ảnh cho khỏi đè chữ lên hình */
@media (max-width: 767.98px) {
  .star-hero--img .star-hero__inner {
    padding-top: 24px;
    padding-bottom: 8px;
  }
}

/* --------------------------------------------------------------------------
   Bảng xếp hạng – chấm phân trang
   Chấm chưa chọn dùng --pr-40 (#FBC9A6), gần trùng nền gradient ở đoạn cuối
   (#F5C9AA) nên chìm hẳn. Đổi sang trắng đục để nổi trên mọi đoạn của nền.
   -------------------------------------------------------------------------- */
.star-bxh__panel .star-bxh__dots .swiper-pagination-bullet {
  background: rgba(255, 255, 255, 0.85);
}

.star-bxh__panel .star-bxh__dots .swiper-pagination-bullet-active {
  background: var(--pr-100);
}

/* --------------------------------------------------------------------------
   Bảng xếp hạng – khoảng cách trên tiêu đề "Giải tập thể"
   Bản gốc tách khối tập thể thành section .star-team riêng (padding 64px 0) nên
   tiêu đề luôn cách phần trên. Ở đây khối này nằm trong panel của .star-bxh,
   nối thẳng sau hàng chấm -> tự chừa khoảng bằng padding cũ.
   -------------------------------------------------------------------------- */
.star-bxh__panel .star-team__title {
  margin-top: 64px;
}

@media (max-width: 1279.98px) {
  .star-bxh__panel .star-team__title {
    margin-top: 48px;
  }
}

/* --------------------------------------------------------------------------
   Bảng xếp hạng – khoảng cách đáy section
   Bản gốc để .star-bxh { padding: 64px 0 0 } vì phía dưới nó còn section
   .star-team / .star-podium tự có padding. Ở đây cả ba khối nằm chung trong
   .star-bxh (tab theo vòng) nên phải tự chừa đáy, nếu không dots dính sát
   mép nền gradient.
   -------------------------------------------------------------------------- */
.star-bxh {
  padding-bottom: 64px;
}

@media (max-width: 1279.98px) {
  .star-bxh {
    padding-bottom: 48px;
  }
}

/* --------------------------------------------------------------------------
   Footer
   Số điện thoại được bind thành link tel: (bản HTML tĩnh cũng vậy) nên phải
   khử màu link mặc định của bootstrap; CTA là phần design gốc chưa có.
   -------------------------------------------------------------------------- */
.star-footer__meta a {
  color: inherit;
  text-decoration: none;
}

.star-footer__meta a:hover,
.star-footer__meta a:focus {
  color: var(--pr-70);
  text-decoration: underline;
}

/* Mobile: 5 nhóm liên hệ xếp dọc 1 cột, row-gap 8px của bản gốc khiến tiêu đề
   nhóm sau dính sát đơn vị của nhóm trước, rất khó tách nhóm bằng mắt.
   Giãn khoảng cách và thêm đường kẻ mảnh giữa các nhóm. */
@media (max-width: 767.98px) {
  .star-footer__contacts {
    row-gap: 0;
  }

  /* Tắt subgrid của bản gốc: mobile chỉ 1 cột nên không cần căn hàng giữa các nhóm */
  .star-footer__col {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 18px 0;
  }

  .star-footer__person {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .star-footer__col + .star-footer__col {
    border-top: 1px solid rgba(255, 255, 255, 0.14);
  }

  .star-footer__col-title {
    padding-bottom: 0;
  }
}

.star-footer__cta {
  margin-left: auto;
  padding: 12px 28px;
  border-radius: 999px;
  background: var(--pr-100);
  font-family: var(--star-font-body);
  font-weight: 600;
  font-size: var(--body-size);
  line-height: var(--body-line);
  color: var(--star-white);
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.star-footer__cta:hover,
.star-footer__cta:focus {
  opacity: 0.85;
  color: var(--star-white);
  text-decoration: none;
}

@media (max-width: 767.98px) {
  /* CTA xuống dòng riêng thay vì chen cạnh logo */
  .star-footer__brand {
    flex-wrap: wrap;
  }

  .star-footer__cta {
    width: 100%;
    margin-left: 0;
    text-align: center;
  }
}