/* =========================================================
   winner.css — "3MT 2025 — Awarded"
   ========================================================= */

/* ---------- Theme tokens (light/dark) ---------- */
:root{
  --win-panel:#ffffff;
  --win-text:#101318;
  --win-muted:#5b6470;
  --win-shadow:0 10px 28px rgba(0,0,0,.12);
  --win-shadow-strong:0 18px 44px rgba(0,0,0,.18);
}
html[data-theme="dark"]{
  --win-panel:#15181e;
  --win-text:#e8ecf2;
  --win-muted:#a0a8b3;
  --win-shadow:0 14px 36px rgba(0,0,0,.55);
  --win-shadow-strong:0 24px 60px rgba(0,0,0,.72);
}

/* ---------- Banner: ảnh + caption nổi ---------- */
.w-banner.tight{ position:relative; margin:0 0 16px; isolation:isolate; }
.w-banner.tight img{
  width:100%;
  max-height:clamp(300px,42vh,520px);
  aspect-ratio:21/8; object-fit:cover; object-position:center 45%;
  border-radius:20px; box-shadow:var(--win-shadow); display:block;
  filter:saturate(1.12) contrast(1.06) brightness(1.02);
  transform-origin:50% 45%;
  animation:kenburns 16s ease-in-out infinite alternate;
  will-change:transform,filter;
}
.w-banner.tight::after{
  content:""; position:absolute; inset:0; border-radius:20px; pointer-events:none;
  background:
    radial-gradient(80% 120% at 50% 10%, rgba(0,0,0,.08), rgba(0,0,0,0) 60%),
    linear-gradient(180deg, rgba(0,0,0,0) 52%, rgba(0,0,0,.36) 100%);
  mix-blend-mode:multiply;
}
.w-caption{
  position:absolute; left:16px; bottom:12px;
  color:#fff; font-size:.95rem; opacity:.95; font-weight:600; letter-spacing:.2px;
  background:rgba(0,0,0,.35); padding:6px 10px; border-radius:10px;
  backdrop-filter:blur(4px); box-shadow:0 8px 20px rgba(0,0,0,.18);
}
@keyframes kenburns{ from{transform:scale(1.02) translateY(-1%);} to{transform:scale(1.08) translateY(1%);} }

/* ---------- Lưới winners ---------- */
.winner-grid{
  position:relative; z-index:1;
  display:grid; gap:18px; grid-template-columns:repeat(3,1fr); align-items:stretch;
}
@media (max-width:960px){ .winner-grid{ grid-template-columns:1fr; } }

/* ---------- Card + viền gradient theo hạng ---------- */
.winner-card{
  position:relative; overflow:hidden; isolation:isolate;
  border-radius:18px; padding:30px 16px 14px;
  background:var(--win-panel); color:var(--win-text);
  box-shadow:var(--win-shadow);
  /* gloss nhẹ trên bề mặt */
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0) 42%),
    radial-gradient(130% 90% at 50% -12%, rgba(255,255,255,.22), rgba(255,255,255,0) 62%),
    radial-gradient(120% 85% at 50% 112%, rgba(0,0,0,.12), rgba(0,0,0,0) 52%);
  background-blend-mode:screen,screen,multiply;
  transform:translateZ(0); will-change:box-shadow,transform;
}
.winner-card::before{
  content:""; position:absolute; inset:0; border-radius:18px; padding:2px;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
}
.winner-card.gold::before{   background:linear-gradient(135deg,#f7d774,#c9a227,#f7d774); }
.winner-card.silver::before{ background:linear-gradient(135deg,#e7edf5,#a6adb6,#e7edf5); }
.winner-card.bronze::before{ background:linear-gradient(135deg,#f0be94,#b0723c,#f0be94); }

/* ---------- Badge ---------- */
.rank-badge{
  position:absolute; top:10px; left:10px; z-index:3;
  font-weight:800; font-size:.95rem; padding:6px 10px; border-radius:999px;
  background:rgba(255,255,255,.92); color:#111;
  box-shadow:0 4px 12px rgba(0,0,0,.08); backdrop-filter:blur(6px);
}
html[data-theme="dark"] .rank-badge{ background:rgba(26,28,33,.85); color:#fff; }

/* ---------- Nội dung chữ ---------- */
.winner-body{ position:relative; z-index:2; padding-top:14px; }
.winner-name{ margin:6px 0 4px; font-size:1.06rem; line-height:1.2; }
.winner-aff{ margin:0 0 8px; color:var(--win-muted); font-size:.95rem; }
.winner-card.gold   .winner-name{ color:#a27c12; }
.winner-card.silver .winner-name{ color:#6e7680; }
.winner-card.bronze .winner-name{ color:#8a5630; }
.winner-card .tags{ display:flex; gap:8px; flex-wrap:wrap; }
.winner-card .tag{ font-size:.78rem; padding:6px 10px; border-radius:999px; }

/* ---------- Đăng ký custom props cho animation ---------- */
@property --angle{  syntax:'<angle>';      initial-value:0deg;   inherits:false; }
@property --sweepX{ syntax:'<percentage>'; initial-value:-160%;  inherits:false; }

/* ---------- Hiệu ứng shine + metallic foil (trên ::after) ---------- */
.winner-card::after{
  content:""; position:absolute; z-index:1; pointer-events:none;
  top:-120%; left:-160%; width:60%; height:340%; transform:rotate(18deg);
  /* 2 nền: [0] vệt quét, [1] foil kim loại */
  background-image:
    linear-gradient(115deg, rgba(255,255,255,0) 0%, rgba(255,255,255,var(--glow,.20)) 46%, rgba(255,255,255,0) 100%),
    conic-gradient(from var(--angle,0deg) at 50% 50%,
      rgba(255,255,255,.10) 0deg, rgba(255,255,255,0) 40deg,
      rgba(255,255,255,.08) 80deg, rgba(255,255,255,0) 120deg,
      rgba(255,255,255,.10) 160deg, rgba(255,255,255,0) 200deg,
      rgba(255,255,255,.08) 260deg, rgba(255,255,255,0) 320deg,
      rgba(255,255,255,.10) 360deg);
  background-size:85% 420%, 220% 220%;
  background-position: var(--sweepX,-160%) -120%, 50% 50%;
  background-repeat:no-repeat, no-repeat;
  filter:saturate(1.25) contrast(1.05);
  mix-blend-mode:screen; opacity:1; will-change:background-position, left;
  /* chạy cả mới (sweep + foil) và fallback (left) */
  animation:
    shineX var(--dur,6s) linear infinite,
    spinFoil 14s linear infinite,
    shine  var(--dur,6s) linear infinite;
}

/* Cường độ & nhịp theo hạng */
.winner-card.rank-1::after{ --glow:.55; --dur:4.6s; }
.winner-card.rank-2::after{ --glow:.36; --dur:5.4s; }
.winner-card.rank-3::after{ --glow:.30; --dur:6.0s; }

/* Nhuộm màu foil theo huy chương */
.winner-card.gold::after{
  background-image:
    linear-gradient(115deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.46) 46%, rgba(255,255,255,0) 100%),
    conic-gradient(from var(--angle,0deg) at 50% 50%,
      #fff2bf 0deg, #c39116 30deg, #ffdb6e 60deg, #8b6510 90deg,
      #ffeab8 120deg, #b67a12 150deg, #fff2bf 180deg, #c39116 210deg,
      #ffdb6e 240deg, #8b6510 270deg, #ffeab8 300deg, #b67a12 330deg, #fff2bf 360deg);
}
.winner-card.silver::after{
  background-image:
    linear-gradient(115deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.32) 46%, rgba(255,255,255,0) 100%),
    conic-gradient(from var(--angle,0deg) at 50% 50%,
      #ffffff 0deg, #d9dfe7 40deg, #a6adb6 80deg, #eef2f8 120deg,
      #c9cfd8 180deg, #e8edf4 220deg, #a6adb6 260deg, #f6f8fb 320deg, #ffffff 360deg);
}
.winner-card.bronze::after{
  background-image:
    linear-gradient(115deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.28) 46%, rgba(255,255,255,0) 100%),
    conic-gradient(from var(--angle,0deg) at 50% 50%,
      #ffdfc1 0deg, #b0723c 45deg, #efb98d 90deg, #8f542c 135deg,
      #f3c8a2 180deg, #c27b44 225deg, #e9bd97 270deg, #844d29 315deg, #ffdfc1 360deg);
}

/* Nhịp “glow” tổng thể của card */
.winner-card{ animation:glowPulse 7s ease-in-out infinite; }
.winner-card.rank-1{ animation-duration:6s; }
@keyframes glowPulse{
  0%,100%{ box-shadow:var(--win-shadow); transform:translateY(0); }
  50%{ box-shadow:var(--win-shadow-strong); transform:translateY(-1px); }
}

/* Keyframes cho sweep + foil + fallback */
@keyframes shineX{
  0%{ --sweepX:-170%; } 52%{ --sweepX:140%; } 100%{ --sweepX:140%; }
}
@keyframes spinFoil{ to{ --angle:360deg; } }
/* Fallback cũ: di chuyển bằng left để chắc chắn thấy */
@keyframes shine{
  0%{ left:-160%; } 55%{ left:130%; } 100%{ left:130%; }
}

/* ---------- Tôn trọng Reduce Motion; có thể override bằng .force-anim ---------- */
@media (prefers-reduced-motion: reduce){
  body:not(.force-anim) .winner-card::after,
  body:not(.force-anim) .winner-card{
    animation:none !important;
  }
}

/* ---------- Trợ năng nhỏ ---------- */
.winner-grid[aria-label]{ outline:none; }
.card.winner-card:focus-within{ box-shadow:0 0 0 3px rgba(52,120,246,.2), var(--win-shadow); }
/* ===========================
   VISUAL POLISH — NO ANIMATION
   (paste at the very end of winner.css)
   =========================== */

/* ---------- Banner: ảnh đẹp, tĩnh ---------- */
.w-banner.tight{
  position: relative;
  border-radius: 22px;
  overflow: hidden;           /* bo tròn thật sự */
  box-shadow:
    0 20px 50px rgba(16,19,24,.12),
    0 2px 0 rgba(255,255,255,.6) inset;  /* edge highlight */
}
.w-banner.tight img{
  border-radius: 0;           /* đã overflow hidden */
  max-height: clamp(320px, 44vh, 560px);
  object-position: center 45%;
  /* color grade ấm + tăng “độ sâu” */
  filter:
    saturate(1.12)
    contrast(1.06)
    brightness(1.02)
    sepia(.06)
    hue-rotate(-5deg);
  animation: none !important; /* tắt Ken Burns nếu còn */
}

/* Lớp “color wash” ấm + texture hạt rất nhẹ */
.w-banner.tight::before{
  content:"";
  position:absolute; inset:0;
  background:
    /* wash ấm (ánh gỗ) */
    linear-gradient(180deg, rgba(255,188,72,.10), rgba(255,188,72,0) 40%),
    /* haze nhẹ phía xa */
    radial-gradient(140% 90% at 50% -20%, rgba(255,255,255,.14), rgba(255,255,255,0) 60%),
    /* noise giả bằng gradients lặp */
    repeating-linear-gradient(0deg, rgba(0,0,0,.02) 0 1px, transparent 1px 2px);
  mix-blend-mode: soft-light;
  pointer-events:none;
}

/* Vignette + dải tối dưới để caption nổi */
.w-banner.tight::after{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(110% 120% at 50% 10%, rgba(0,0,0,.08), rgba(0,0,0,0) 60%),
    linear-gradient(to bottom, rgba(0,0,0,0) 58%, rgba(0,0,0,.36) 100%);
  pointer-events:none;
}

.w-caption{
  background: rgba(15,18,24,.35);
  color:#fff;
  padding:8px 14px;
  border-radius:12px;
  backdrop-filter: blur(6px);
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
  font-weight:600; letter-spacing:.2px;
}

/* ---------- Cards: static, sâu & sang ---------- */

/* Bảng màu huy chương để tái sử dụng (tĩnh) */
:root{
  --gold-1:#caa21f; --gold-2:#f4da7a;
  --silver-1:#9da6b1; --silver-2:#e8edf4;
  --bronze-1:#9a5f33; --bronze-2:#f2c39a;
}

.winner-card{
  background:
    /* paper gradient rất nhẹ */
    linear-gradient(180deg,#ffffff, #fafbff 70%),
    radial-gradient(120% 100% at 50% -10%, rgba(255,255,255,.5), rgba(255,255,255,0) 60%);
  box-shadow:
    0 14px 40px rgba(16,19,24,.14),
    0 1px 0 rgba(255,255,255,.7) inset,
    0 0 0 1px rgba(16,19,24,.06) inset;
  animation: none !important;     /* tắt glowPulse nếu còn */
}

/* Tắt hoàn toàn hiệu ứng shine */
.winner-card::after{ content:none !important; animation:none !important; }

/* Viền gradient tinh tế theo hạng (giữ style viền cũ, làm mảnh hơn) */
.winner-card::before{ padding:1.5px; opacity:.9; }

/* Tô màu tên theo hạng (đậm hơn một chút) */
.winner-card.gold   .winner-name{ color: var(--gold-1);   }
.winner-card.silver .winner-name{ color: var(--silver-1); }
.winner-card.bronze .winner-name{ color: var(--bronze-1); }

/* Badge: glassy + viền mảnh */
.rank-badge{
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(16,19,24,.08);
  box-shadow:
    0 10px 20px rgba(16,19,24,.10),
    0 0 0 1px rgba(255,255,255,.8) inset;
  backdrop-filter: blur(8px);
}
html[data-theme="dark"] .rank-badge{
  background: rgba(22,24,30,.7);
  border-color: rgba(255,255,255,.06);
}

/* Tag pills: màu nền nhã theo hạng */
.winner-card .tag{
  border: 1px solid rgba(16,19,24,.06);
  background: #f6f7fb;
}
.winner-card.gold   .tag:first-child   { background: linear-gradient(180deg,var(--gold-2), #ffeeb6); color:#5d4708; }
.winner-card.silver .tag:first-child   { background: linear-gradient(180deg,var(--silver-2), #f6f8fb); color:#374151; }
.winner-card.bronze .tag:first-child   { background: linear-gradient(180deg,var(--bronze-2), #ffdfbf); color:#5a331c; }

/* Chữ phụ nhạt gọn – dễ đọc */
.winner-aff{ color:#6b7280; }

/* Dark mode cân bằng tương phản nhẹ */
html[data-theme="dark"] .winner-card{
  background: linear-gradient(180deg,#171a20,#151922 70%);
  box-shadow:
    0 16px 44px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,255,255,.05) inset;
}
html[data-theme="dark"] .winner-aff{ color:#a0a8b3; }
html[data-theme="dark"] .winner-card .tag{
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.06);
}
/* === RE-ENABLE ANIMATIONS === */

.winner-card{
  animation: glowPulse 7s ease-in-out infinite !important;
}

.winner-card::after{
  /* khôi phục pseudo-element & animation */
  content: "" !important;
  animation:
    shineX var(--dur, 2s) linear infinite,
    spinFoil 14s linear infinite,
    shine  var(--dur, 6s) linear infinite !important;
}
@property --sweepX { syntax: '<percentage>'; initial-value: -160%; inherits: false; }
@property --angle  { syntax: '<angle>';      initial-value: 0deg;  inherits: false; }
@media (prefers-reduced-motion: reduce){
  body:not(.force-anim) .winner-card::after,
  body:not(.force-anim) .winner-card{ animation: none !important; }
}

/* ======= WINNERS: LEFT BANNER + RIGHT COLUMN (NO HTML CHANGE) ======= */

/* Biến khoảng cách dễ chỉnh */
:root{ --w-gap: 22px; }

/* Dùng chính section #winners làm lưới 2 cột */
section#winners.section{
  display: grid;
  grid-template-columns: minmax(420px, 1.15fr) 1fr; /* trái rộng hơn một nhịp */
  gap: var(--w-gap);
  align-items: start;
}

/* Ảnh banner nằm cột 1, bỏ margin dưới mặc định */
section#winners .w-banner.tight{
  grid-column: 1;
  margin: 0;
  height: 100%;
  border-radius: 22px;
  position: sticky;            /* dính nhẹ khi cuộn cho sang */
  top: 16px;
}

/* Cột phải: 3 thẻ xếp dọc */
section#winners .winner-grid{
  grid-column: 2;
  display: grid;
  grid-template-columns: 1fr !important; /* ép 1 cột */
  gap: 16px;
  align-content: start;
}

/* Tăng “cảm giác cột” cho card bên phải */
section#winners .winner-card{
  border-radius: 18px;
}

/* Nhỏ màn hình: quay về bố cục dọc (ảnh trên, thẻ dưới) */
@media (max-width: 980px){
  section#winners.section{
    grid-template-columns: 1fr;
  }
  section#winners .w-banner.tight,
  section#winners .winner-grid{
    grid-column: 1 / -1;
  }
  section#winners .w-banner.tight{
    position: static; /* tắt sticky trên mobile */
  }
}
section#winners .w-banner.tight img{
  max-height: none;          /* bỏ giới hạn cũ */
  height: 100%;
  object-fit: cover;
}

/* Hover animation cho banner ảnh */
.w-banner.tight img{
  transition:
    transform .9s cubic-bezier(.2,.8,.2,1),
    filter    .9s cubic-bezier(.2,.8,.2,1);
  will-change: transform, filter;
}

.w-banner.tight:hover img{
  transform: scale(1.04) translateY(-2px);
  filter: saturate(1.15) contrast(1.08) brightness(1.03);
}

/* Thêm vệt sáng quét nhẹ khi hover */
.w-banner.tight::before{
  content:"";
  position:absolute; inset:-2% -20%;
  pointer-events:none; opacity:0; /* ẩn mặc định */
  background: linear-gradient(115deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.25) 50%,
    rgba(255,255,255,0) 100%);
  transform: rotate(8deg);
}

.w-banner.tight:hover::before{
  opacity:1;
  animation: bannerSweep 1.2s linear 1;
}

@keyframes bannerSweep{
  0%   { transform: translateX(-60%) rotate(8deg); }
  100% { transform: translateX(60%)  rotate(8deg); }
}

/* Tôn trọng Reduce Motion */
@media (prefers-reduced-motion: reduce){
  .w-banner.tight img,
  .w-banner.tight::before{ transition: none; animation: none; }
  .w-banner.tight:hover img{ transform:none; filter:none; }
}

/* ==== SCROLL REVEAL cho #winners ==== */
/* ==== SCROLL REVEAL: bật khi #winners vào viewport ==== */
#winners .w-banner.tight,
#winners .winner-card,
#winners h2{
  opacity: 0;
  transform: translateY(16px);
  filter: blur(4px);
  transition:
    opacity .72s ease,
    transform .72s ease,
    filter .72s ease;
  will-change: opacity, transform, filter;
}

/* Khi cả section vào màn hình -> hiện tất cả con */
#winners.is-in .w-banner.tight,
#winners.is-in .winner-card,
#winners.is-in h2{
  opacity: 1;
  transform: none;
  filter: none;
}

/* Nếu đã bật layout ảnh-trái thẻ-phải, KHÔNG dùng sticky lúc reveal */
section#winners .w-banner.tight{ position: static; }  /* tránh case cao độ = 0 */

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  #winners .w-banner.tight,
  #winners .winner-card,
  #winners h2{
    transition: none;
    opacity: 1; transform: none; filter: none;
  }
}