.rk-page { max-width: 900px; margin: 0 auto; padding: 20px 16px 0; }

.rk-tabs {
  display: flex; gap: 6px; background: var(--bg-hover); border: 1.5px solid var(--border);
  border-radius: 999px; padding: 4px; margin-bottom: 12px;
}
.rk-tab {
  flex: 1; padding: 9px 0; border: none; background: transparent; border-radius: 999px;
  font-size: 12.5px; font-weight: 700; color: var(--text-2); cursor: pointer; font-family: inherit;
  transition: background .2s ease, color .2s ease;
}
.rk-tab.active { background: var(--primary); color: #fff; }

.rk-reset {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: fit-content; margin: 0 auto 16px; padding: 6px 16px;
  font-size: 12px; font-weight: 700; color: var(--text-2);
  background: var(--bg-hover); border: 1.5px dashed var(--border); border-radius: 999px;
}
.rk-reset strong { color: var(--primary); font-weight: 800; }
.rk-reset-icon { display: inline-flex; width: 13px; height: 13px; }
.rk-reset-icon svg { width: 100%; height: 100%; }

.rk-myrank { position: relative; margin-bottom: 18px; }
.rk-myrank .rk-row { border: 1.5px solid var(--primary); box-shadow: 0 3px 16px rgba(29,111,242,.14); }
.rk-myrank .rk-rank { width: auto; min-width: 30px; display: inline-flex; align-items: center; gap: 3px; }
.rk-myrank .rk-empty {
  padding: 14px 16px; border: 1.5px dashed var(--border); border-radius: var(--radius);
  font-size: 13px; color: var(--text-2); text-align: center;
}

/* Mũi tên tăng/giảm hạng so với lần xem trước — chỉ hiện trong widget "Hạng của bạn". */
.rk-rank-delta {
  display: inline-flex; align-items: center; gap: 1px;
  font-size: 10px; font-weight: 800; padding: 1px 4px; border-radius: 999px;
}
.rk-rank-delta svg { width: 9px; height: 9px; }
.rk-rank-delta.is-up   { color: #16a34a; background: rgba(34,197,94,.14); }
.rk-rank-delta.is-down { color: #dc2626; background: rgba(239,68,68,.14); }

/* Chớp pháo giấy khi lên hạng — xem celebrateRankUp() trong ranking.js. */
.rk-burst { position: absolute; top: 26px; left: 50%; width: 0; height: 0; pointer-events: none; z-index: 5; }
.rk-burst-piece {
  position: absolute; top: 0; left: 0; width: 7px; height: 7px; border-radius: 2px;
  background: var(--c); animation: rkBurstFly .9s ease-out forwards;
}
@keyframes rkBurstFly {
  0%   { transform: translate(-50%,-50%) scale(1); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.4); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .rk-burst { display: none; }
}

/* ═══════════════════════════════════════════════════════════
   PODIUM — top 3
   ═══════════════════════════════════════════════════════════ */
/* "Sân khấu" vinh danh — khung nền + viền vàng nhạt bao quanh cả 3 vị trí, tách hẳn khỏi phần
   còn lại của trang thay vì chỉ nổi trên nền trắng như trước. */
.rk-podium {
  position: relative; display: flex; align-items: flex-end; justify-content: center; gap: 24px;
  margin-bottom: 20px; padding: 40px 28px 22px;
  border-radius: 20px; border: 1.5px solid rgba(255,192,0,.22);
  background: linear-gradient(180deg, rgba(255,192,0,.12), rgba(255,192,0,.02) 65%, transparent);
}
.rk-podium:empty { display: none; }
/* Hào quang vàng mờ phía sau podium — điểm nhấn trang trí, không cạnh tranh với nội dung. */
.rk-podium::before {
  content: ''; position: absolute; top: -6px; left: 50%; transform: translateX(-50%);
  width: 260px; height: 170px; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(255,192,0,.18), transparent 72%);
}
.rk-podium-item {
  flex: 1; min-width: 0; max-width: 250px; display: flex; flex-direction: column; align-items: center;
  text-align: center; opacity: 0; animation: rkFadeUp .5s ease forwards;
}
.rk-podium-item.rank-1 { order: 2; }
.rk-podium-item.rank-2 { order: 1; }
.rk-podium-item.rank-3 { order: 3; }

.rk-podium-avatar-wrap { position: relative; margin-bottom: 8px; width: 60px; height: 60px; }
.rk-podium-item.rank-1 .rk-podium-avatar-wrap { width: 80px; height: 80px; }
.rk-podium-avatar-wrap img, .rk-podium-avatar-wrap .rk-avatar-fb {
  width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block;
  border: 3px solid #fff; box-shadow: 0 4px 14px rgba(0,0,0,.18);
}
.rk-podium-item.rank-1 .rk-podium-avatar-wrap img,
.rk-podium-item.rank-1 .rk-podium-avatar-wrap .rk-avatar-fb {
  /* Viền đôi (sáng trong + vàng đậm ngoài) mô phỏng gờ kim loại có ánh phản chiếu, thay vì 1
     vòng màu phẳng như trước. */
  box-shadow: 0 0 0 2px #fff6d8, 0 0 0 5px #ffb300, 0 6px 20px rgba(255,179,0,.55);
}
/* Vòng hào quang xoay quanh avatar hạng Nhất — "ánh đèn sân khấu" riêng cho nhà vô địch, đứng
   phía SAU avatar (z-index âm) nên chỉ lộ ra mép ngoài dạng viền sáng mờ, không che mặt. */
.rk-podium-item.rank-1 .rk-podium-avatar-wrap::before {
  content: ''; position: absolute; inset: -9px; z-index: -1; border-radius: 50%;
  background: conic-gradient(from 0deg, #ffe27a, #ffb300, #fff6df, #ffb300, #ffe27a);
  filter: blur(5px); opacity: .6;
  animation: rkHaloSpin 4.5s linear infinite;
}
@keyframes rkHaloSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .rk-podium-item.rank-1 .rk-podium-avatar-wrap::before { animation: none; }
}
.rk-podium-item.rank-2 .rk-podium-avatar-wrap img,
.rk-podium-item.rank-2 .rk-podium-avatar-wrap .rk-avatar-fb {
  box-shadow: 0 0 0 2px #f5f7fa, 0 0 0 5px #9aa8b6, 0 4px 12px rgba(0,0,0,.15);
}
.rk-podium-item.rank-3 .rk-podium-avatar-wrap img,
.rk-podium-item.rank-3 .rk-podium-avatar-wrap .rk-avatar-fb {
  box-shadow: 0 0 0 2px #f4c99e, 0 0 0 5px #a85f2e, 0 4px 12px rgba(0,0,0,.15);
}
.rk-podium-crown {
  position: absolute; top: -20px; left: 50%; transform: translateX(-50%);
  width: 24px; height: 24px;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.25));
  animation: rkCrownBob 1.8s ease-in-out infinite;
}
.rk-podium-crown svg { display: block; width: 100%; height: 100%; }

/* Vài tia lấp lánh quanh avatar hạng Nhất — twinkle so le nhau (delay khác nhau), tắt hẳn khi
   prefers-reduced-motion (chỉ còn đứng yên mờ, không nhấp nháy). */
.rk-podium-sparkle {
  position: absolute; width: 13px; height: 13px; color: #fff6d8; pointer-events: none;
  filter: drop-shadow(0 0 3px rgba(255,196,0,.85));
  animation: rkSparkleTwinkle 2.3s ease-in-out infinite;
}
.rk-podium-sparkle svg { display: block; width: 100%; height: 100%; }
.rk-podium-sparkle--a { top: -3px; right: -7px; }
.rk-podium-sparkle--b { bottom: 10px; left: -9px; width: 9px; height: 9px; animation-delay: 1.15s; }
@keyframes rkSparkleTwinkle {
  0%, 100% { opacity: 0; transform: scale(.35) rotate(0deg); }
  50%      { opacity: 1; transform: scale(1) rotate(18deg); }
}
@media (prefers-reduced-motion: reduce) {
  .rk-podium-sparkle { animation: none; opacity: .75; transform: none; }
}

/* Huy chương số thứ tự — gradient nhiều dải sáng/tối mô phỏng ánh kim loại thật (thay vì 2 màu
   phẳng), cộng thêm vệt sáng quét chéo lặp lại (rkMedalShine) cho cảm giác "lấp lánh" sống động. */
.rk-podium-medal {
  position: absolute; bottom: -2px; right: -4px; width: 20px; height: 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  font-size: 11px; font-weight: 800; color: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.25);
}
.rk-podium-medal::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.75) 48%, transparent 66%);
  transform: translateX(-120%); animation: rkMedalShine 3.2s ease-in-out infinite;
}
@keyframes rkMedalShine {
  0%, 55%, 100% { transform: translateX(-120%); }
  75%           { transform: translateX(120%); }
}
@media (prefers-reduced-motion: reduce) {
  .rk-podium-medal::after { animation: none; display: none; }
}
.rk-podium-item.rank-1 .rk-podium-medal {
  width: 22px; height: 22px; font-size: 12px; color: #4a2f00;
  background: linear-gradient(135deg, #fff6d8 0%, #ffd700 25%, #b8860b 50%, #ffe873 72%, #a8710a 100%);
}
.rk-podium-item.rank-2 .rk-podium-medal {
  color: #263241;
  background: linear-gradient(135deg, #ffffff 0%, #c8d1db 25%, #8d9aa6 50%, #eef2f6 72%, #9aa8b6 100%);
}
.rk-podium-item.rank-3 .rk-podium-medal {
  color: #fff;
  background: linear-gradient(135deg, #f4c99e 0%, #c17a45 25%, #8b4513 50%, #e6b088 72%, #a85f2e 100%);
}
/* Tên + huy chương tích luỹ trên CÙNG 1 DÒNG (khớp đúng cách danh sách cuộn top 4+ đang hiện —
   xem .rk-name) — 2 khái niệm khác bản chất KHÔNG nên tách khối: "Vàng/Bạc/Đồng · Tuần này"
   (rk-podium-live, bên dưới) là trạng thái đang giữ của ĐÚNG KỲ ĐANG XEM, còn huy chương ★N là
   thành tích CỦA RIÊNG người đó — thuộc về cá nhân nên đi cạnh tên, không đứng chung khu vực bục
   vinh danh định kỳ. Gộp vào 1 dòng còn tình cờ sửa bug cũ: trước đây huy chương tách 1 dòng RIÊNG
   phía dưới điểm số, chỉ hiện khi người đó CÓ huy chương — cộng thêm hẳn 1 dòng cao vào CỘT của họ
   trong lúc podium canh đáy (align-items:flex-end), khiến ai có huy chương cũ mà đứng hạng Bạc/Đồng
   kỳ này bị đẩy avatar cao gần bằng/hơn hạng Vàng không có huy chương — phá vỡ phân cấp bệ đứng
   (rk-podium-base) vốn cố tình cao khác nhau theo đúng thứ hạng. Cùng 1 dòng với tên thì có huy
   chương hay không gần như không đổi chiều cao cột (chỉ đổi CHIỀU RỘNG). */
.rk-podium-name {
  display: flex; align-items: center; justify-content: center; gap: 4px; max-width: 100%;
}
.rk-podium-name-text {
  font-size: 13px; font-weight: 700; color: var(--text); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rk-podium-item.rank-1 .rk-podium-name-text { font-size: 14.5px; }
.rk-podium-points {
  font-size: 12px; font-weight: 800; color: #8a5a00; margin-top: 4px;
  background: linear-gradient(135deg,#ffe27a,#ffc000); padding: 2px 11px; border-radius: 999px;
}
/* Huy chương không co giãn theo tên — tên dài mới là phần bị cắt "…", huy chương LUÔN hiện đủ. */
.rk-podium-item .rk-trophies { flex-shrink: 0; margin-left: 0; margin-top: 0; }

/* "Đang giữ Vàng/Bạc/Đồng — <kỳ>" trên bục vinh danh — xem renderPodiumItem() trong ranking.js.
   Màu khớp với medal số thứ tự phía trên để nhìn là liên kết được ngay giữa 2 vị trí. */
.rk-podium-live {
  display: inline-block; margin-top: 4px; padding: 2px 9px;
  font-size: 10.5px; font-weight: 800; border-radius: 999px; white-space: nowrap;
}
.rk-podium-live--gold   { background: linear-gradient(135deg, #fff6d8, #ffd700 45%, #b8860b 75%, #ffe873); color: #4a2f00; }
.rk-podium-live--silver { background: linear-gradient(135deg, #ffffff, #c8d1db 45%, #8d9aa6 75%, #eef2f6); color: #263241; }
.rk-podium-live--bronze { background: linear-gradient(135deg, #f4c99e, #c17a45 45%, #8b4513 75%, #e6b088); color: #fff; }

.rk-podium-base {
  width: 100%; margin-top: 10px; border-radius: 10px 10px 0 0;
  background: linear-gradient(180deg, rgba(255,192,0,.22), rgba(255,192,0,.04));
}
.rk-podium-item.rank-1 .rk-podium-base { height: 46px; background: linear-gradient(180deg, rgba(255,192,0,.36), rgba(255,192,0,.08)); }
.rk-podium-item.rank-2 .rk-podium-base { height: 30px; }
.rk-podium-item.rank-3 .rk-podium-base { height: 20px; }

@keyframes rkFadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes rkCrownBob {
  0%, 100% { transform: translateX(-50%) translateY(0) rotate(-6deg); }
  50%      { transform: translateX(-50%) translateY(-3px) rotate(6deg); }
}

/* ═══════════════════════════════════════════════════════════
   LIST — hạng 4 trở đi
   ═══════════════════════════════════════════════════════════ */
.rk-list { display: flex; flex-direction: column; gap: 8px; }

.rk-loading {
  padding: 24px 14px; text-align: center; font-size: 13px; color: var(--text-2);
}

.rk-row {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px;
  background: var(--bg-card); border: 1.5px solid var(--border); border-radius: 12px;
  opacity: 0; animation: rkRowIn .4s ease forwards;
}
@keyframes rkRowIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Dùng cho lúc tự động làm mới nền (25s/lần) — hiện thẳng số mới, không chạy lại hiệu ứng
   xuất hiện để tránh giật/nhấp nháy giữa chừng khi học viên đang đọc bảng. */
.rk-row.no-anim, .rk-podium-item.no-anim { opacity: 1; animation: none; }

.rk-row--me {
  background: linear-gradient(90deg, rgba(29,111,242,.09), var(--bg-card) 60%);
  border-color: var(--primary);
}
.rk-me-badge {
  font-size: 10px; font-weight: 800; color: #fff; background: var(--primary);
  padding: 2px 8px; border-radius: 999px; margin-left: 6px; vertical-align: middle;
  white-space: nowrap;
}

.rk-rank { width: 30px; flex-shrink: 0; text-align: center; font-size: 14px; font-weight: 800; color: var(--text-2); }
.rk-avatar { position: relative; flex-shrink: 0; display: inline-flex; }
.rk-avatar img, .rk-avatar-fb {
  width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
}
.rk-avatar-fb {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg,#6366f1,#8b5cf6); color: #fff;
  font-size: 15px; font-weight: 800;
}
.rk-name { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-points { font-size: 13px; font-weight: 700; color: var(--primary); white-space: nowrap; }

/* Huy chương tích luỹ (đã từng đạt hạng Nhất/Nhì/Ba bao nhiêu lần, vĩnh viễn) — cạnh tên trong
   MỌI hàng, không chỉ top 3. Chỉ hiện huy chương nào >0, xem trophyChipHtml() trong ranking.js.
   Nền pill màu (không chỉ tô màu chữ/icon) — trước đó chỉ đổi màu chữ khiến Vàng/Đồng khó phân
   biệt (cả 2 đều nâu-vàng trầm, icon lại quá nhỏ để thấy khác biệt màu rõ) — dùng cả MẢNG MÀU
   nền như nhãn "Vàng/Bạc/Đồng · kỳ" đã có, dễ nhận biết hơn hẳn ở kích thước nhỏ. */
.rk-trophies { display: inline-flex; gap: 4px; margin-left: 6px; vertical-align: middle; }
.rk-trophy {
  display: inline-flex; align-items: center; gap: 2px;
  font-size: 10px; font-weight: 800; white-space: nowrap;
  padding: 1px 6px 1px 4px; border-radius: 999px;
}
.rk-trophy svg { width: 10px; height: 10px; }
.rk-trophy--gold {
  background: linear-gradient(135deg, #fff6d8, #ffd700 45%, #b8860b 85%); color: #4a2f00;
}
.rk-trophy--silver {
  background: linear-gradient(135deg, #ffffff, #c8d1db 45%, #8d9aa6 85%); color: #263241;
}
.rk-trophy--bronze {
  background: linear-gradient(135deg, #f4c99e, #c17a45 45%, #8b4513 85%); color: #fff;
}

/* Tooltip huy chương — dựng bằng JS (xem IIFE "TOOLTIP HUY CHƯƠNG" cuối ranking.js), 1 phần tử
   DUY NHẤT gắn thẳng vào document.body (không lồng trong .rk-trophy) nên không bao giờ bị
   overflow:hidden của .rk-name cắt mất, dù đứng trong danh sách cuộn hay trên bục vinh danh.
   Màu nền đổi theo data-tip-tone — LUÔN khớp đúng gradient của icon đang trỏ vào, để chỉ liếc
   màu tooltip là biết ngay đang xem huy chương Vàng/Bạc/Đồng, không cần đọc chữ. */
.rk-trophy-tip {
  position: fixed; left: 0; top: 0; z-index: 500;
  transform: translate(-50%, calc(-100% - 14px));
  padding: 6px 12px; border-radius: 9px;
  font-size: 11.5px; font-weight: 800; white-space: nowrap;
  max-width: min(300px, calc(100vw - 24px)); width: max-content; text-align: center; line-height: 1.45;
  box-shadow: 0 10px 22px -8px rgba(0,0,0,.4);
  opacity: 0; pointer-events: none;
  transition: opacity .14s ease, transform .14s ease;
}
.rk-trophy-tip::after {
  content: ''; position: absolute; top: 100%; left: var(--arrow-x, 50%); transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: var(--tip-arrow);
}
.rk-trophy-tip.is-visible {
  opacity: 1; transform: translate(-50%, calc(-100% - 10px));
}
/* Không đủ chỗ phía TRÊN mục tiêu (huy chương nằm sát mép trên viewport — hay gặp trên mobile
   khi bục vinh danh ở ngay đầu trang) — rkShowTip() (ranking.js) tự phát hiện và lật tooltip
   xuống DƯỚI mục tiêu thay vì để nó bị đẩy che khuất/tràn ra ngoài phía trên màn hình. */
.rk-trophy-tip--below {
  transform: translate(-50%, 14px);
}
.rk-trophy-tip--below.is-visible { transform: translate(-50%, 10px); }
.rk-trophy-tip--below::after {
  top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: var(--tip-arrow);
}
.rk-trophy-tip--gold {
  --tip-arrow: #b8860b;
  background: linear-gradient(135deg, #fff6d8, #ffd700 45%, #b8860b 85%); color: #4a2f00;
}
.rk-trophy-tip--silver {
  --tip-arrow: #8d9aa6;
  background: linear-gradient(135deg, #ffffff, #c8d1db 45%, #8d9aa6 85%); color: #263241;
}
.rk-trophy-tip--bronze {
  --tip-arrow: #8b4513;
  background: linear-gradient(135deg, #f4c99e, #c17a45 45%, #8b4513 85%); color: #fff;
}
@media (prefers-reduced-motion: reduce) {
  .rk-trophy-tip { transition: none; }
}

/* ═══════════════════════════════════════════════════════════
   GỢI Ý KHOẢNG CÁCH HẠNG (trong .rk-myrank)
   ═══════════════════════════════════════════════════════════ */
.rk-gap {
  margin-top: 8px; padding: 10px 14px; text-align: center;
  font-size: 12.5px; color: var(--text-2); background: var(--bg-hover);
  border-radius: 10px;
}
.rk-gap-text { margin-bottom: 7px; }
.rk-gap strong { color: var(--primary); font-weight: 800; }
.rk-gap--top { color: #8a5a00; background: linear-gradient(135deg,#fff6df,#ffedb3); font-weight: 700; }
.rk-gap-icon { display: inline-flex; width: 14px; height: 14px; vertical-align: -3px; margin-right: 5px; }
.rk-gap-icon svg { width: 100%; height: 100%; }

/* Thanh tiến độ tới hạng kế tiếp — xem cách tính % trong renderMyRank() (ranking.js). */
.rk-progress {
  max-width: 260px; height: 6px; margin: 0 auto; border-radius: 999px;
  background: var(--border); overflow: hidden;
}
.rk-progress-fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--primary), #60a5fa);
  transition: width .6s ease;
}

/* ═══════════════════════════════════════════════════════════
   EMPTY STATE
   ═══════════════════════════════════════════════════════════ */
.rk-empty-state {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 40px 20px; text-align: center;
}
.rk-empty-state svg { color: var(--text-2); opacity: .45; }
.rk-empty-state p { font-size: 13.5px; color: var(--text-2); margin: 0; max-width: 300px; line-height: 1.5; }
.rk-empty-cta {
  margin-top: 4px; padding: 10px 22px; background: var(--primary); color: #fff;
  border: none; border-radius: 999px; font-size: 13px; font-weight: 700;
  text-decoration: none; display: inline-block;
}
.rk-empty-cta:hover { opacity: .9; }

/* ═══════════════════════════════════════════════════════════
   CHỌN LOẠI BẢNG — Điểm XP | Chuỗi ngày
   ═══════════════════════════════════════════════════════════ */
.rk-mode { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.rk-mode-btn {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 14px 16px;
  border: 1.5px solid var(--border); border-radius: 16px; background: var(--bg-card);
  font-family: inherit; text-align: left; cursor: pointer; color: var(--text);
  transition: border-color .2s ease, box-shadow .2s ease, transform .15s ease, background .2s ease;
}
.rk-mode-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px -8px rgba(15,23,42,.25); }
.rk-mode-ico {
  width: 42px; height: 42px; flex-shrink: 0; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-hover); color: var(--text-2); transition: background .2s ease, color .2s ease;
}
.rk-mode-ico svg { width: 22px; height: 22px; }
.rk-mode-btn--streak .rk-mode-ico svg { width: 26px; height: 26px; }
.rk-mode-text { display: flex; flex-direction: column; min-width: 0; }
.rk-mode-title { font-size: 15px; font-weight: 800; white-space: nowrap; }
.rk-mode-sub { font-size: 12px; color: var(--text-2); margin-top: 1px; }
.rk-mode-btn--xp.active {
  border-color: var(--primary);
  background: linear-gradient(135deg, rgba(29,111,242,.1), var(--bg-card) 70%);
  box-shadow: 0 8px 22px -10px rgba(29,111,242,.55);
}
.rk-mode-btn--xp.active .rk-mode-ico { background: linear-gradient(135deg, #3b82f6, #1d4ed8); color: #ffe27a; }
.rk-mode-btn--streak.active {
  border-color: #ff8a00;
  background: linear-gradient(135deg, rgba(255,138,0,.13), var(--bg-card) 70%);
  box-shadow: 0 8px 22px -10px rgba(255,98,0,.6);
}
.rk-mode-btn--streak.active .rk-mode-ico { background: linear-gradient(135deg, #fff1db, #ffd9b0); }
/* Nút chưa chọn: ngọn lửa xám + đứng yên cho khỏi tranh chú ý với nút đang chọn. */
.rk-mode-btn--streak:not(.active) .rk-mode-ico svg,
.rk-mode-btn--streak:not(.active) .rk-mode-ico svg path { filter: grayscale(1) opacity(.65); animation: none; }
:root[data-theme="dark"] .rk-mode-btn--streak.active .rk-mode-ico { background: rgba(255,138,0,.2); }

/* ═══════════════════════════════════════════════════════════
   CHUỖI NGÀY — thẻ "Chuỗi của bạn"
   ═══════════════════════════════════════════════════════════ */
.rk-sme {
  position: relative; overflow: hidden; padding: 22px; border-radius: 20px;
  border: 1.5px solid var(--border); background: var(--bg-card);
  box-shadow: 0 10px 30px -18px rgba(15,23,42,.35);
  animation: rkFadeUp .45s ease both;
}
.rk-sme.is-hot {
  border-color: rgba(255,138,0,.45);
  background:
    radial-gradient(circle at 12% 0%, rgba(255,179,0,.28), transparent 45%),
    linear-gradient(135deg, #fff7eb, var(--bg-card) 65%);
}
.rk-sme.is-risk {
  border-color: rgba(255,138,0,.5);
  background: linear-gradient(135deg, #fff3e6, var(--bg-card) 60%);
}
:root[data-theme="dark"] .rk-sme.is-hot {
  background:
    radial-gradient(circle at 12% 0%, rgba(255,138,0,.25), transparent 45%),
    linear-gradient(135deg, rgba(255,138,0,.12), var(--bg-card) 65%);
}
:root[data-theme="dark"] .rk-sme.is-risk { background: linear-gradient(135deg, rgba(255,138,0,.1), var(--bg-card) 60%); }
.rk-sme-top { display: flex; align-items: center; gap: 20px; }
.rk-sme-flame { position: relative; width: 84px; height: 84px; flex-shrink: 0; }
.rk-sme.is-hot .rk-sme-flame::before {
  content: ''; position: absolute; inset: 6px 4px -4px; border-radius: 50%; z-index: 0;
  background: radial-gradient(circle, rgba(255,138,0,.45), transparent 70%); filter: blur(8px);
}
@media (prefers-reduced-motion: no-preference) {
  .rk-sme.is-hot .rk-sme-flame::before { animation: rkGlowPulse 2.2s ease-in-out infinite; }
}
@keyframes rkGlowPulse { 0%,100% { opacity: .7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.12); } }
.rk-sme-flame .tts-flame { position: relative; z-index: 1; }
.rk-sme-main { flex: 1; min-width: 0; }
.rk-sme-label { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
.rk-sme-num { display: flex; align-items: baseline; gap: 8px; margin: 2px 0 10px; line-height: 1; }
.rk-sme-num > span { font-size: 46px; font-weight: 900; font-variant-numeric: tabular-nums; color: var(--text); }
.rk-sme.is-hot .rk-sme-num > span {
  background: linear-gradient(180deg, #ff9500, #e63900); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.rk-sme-num small { font-size: 16px; font-weight: 800; color: var(--text-2); }
.rk-sme-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rk-sme-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px;
  font-size: 12.5px; color: var(--text-2); background: var(--bg-hover); border: 1px solid var(--border);
}
.rk-sme-chip b { color: var(--text); font-weight: 800; }
.rk-sme-chip-ico { display: inline-flex; width: 13px; height: 13px; }
.rk-sme-chip-ico svg { width: 100%; height: 100%; }
.rk-sme-guest-text { margin: 6px 0 12px; font-size: 14px; color: var(--text-2); line-height: 1.5; }

.rk-sme-status {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 18px; padding: 13px 16px;
  border-radius: 14px; font-size: 13.5px; line-height: 1.5;
}
.rk-sme-status > svg { width: 19px; height: 19px; flex-shrink: 0; }
.rk-sme-status > span { flex: 1; min-width: 180px; }
.rk-sme-status--ok    { background: rgba(34,197,94,.12);  color: #15803d; }
.rk-sme-status--warn  { background: rgba(255,138,0,.14);  color: #c2410c; }
.rk-sme-status--start { background: rgba(29,111,242,.09); color: var(--primary); }
:root[data-theme="dark"] .rk-sme-status--ok   { color: #4ade80; }
:root[data-theme="dark"] .rk-sme-status--warn { color: #fdba74; }
@media (prefers-reduced-motion: no-preference) {
  .rk-sme-status--warn > svg { animation: rkWarnShake 2.6s ease-in-out infinite; transform-origin: 50% 40%; }
}
@keyframes rkWarnShake { 0%,80%,100% { transform: rotate(0); } 84% { transform: rotate(-14deg); } 88% { transform: rotate(12deg); } 92% { transform: rotate(-8deg); } 96% { transform: rotate(5deg); } }
.rk-sme-cta {
  display: inline-flex; align-items: center; justify-content: center; padding: 9px 18px; border: none;
  border-radius: 999px; font-family: inherit; font-size: 13px; font-weight: 800; white-space: nowrap;
  color: #fff; text-decoration: none; cursor: pointer;
  background: linear-gradient(135deg, #ffb300, #ff5a00); box-shadow: 0 6px 16px -6px rgba(255,90,0,.65);
  transition: transform .15s ease, filter .15s ease;
}
.rk-sme-cta:hover { transform: translateY(-1px); filter: brightness(1.06); }
.rk-sme-status--start .rk-sme-cta { background: linear-gradient(135deg, #3b82f6, #1d4ed8); box-shadow: 0 6px 16px -6px rgba(29,111,242,.6); }

/* Dải mốc huy hiệu */
.rk-sme-miles { margin-top: 18px; padding: 16px 16px 14px; border-radius: 16px; background: var(--bg-hover); }
.rk-sme-miles-head {
  display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px;
  margin-bottom: 16px; font-size: 13px; font-weight: 800; color: var(--text);
}
.rk-sme-miles-left { font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.rk-sme-miles-left strong { color: #ea580c; font-weight: 800; }
.rk-mtrack { display: flex; align-items: flex-start; }
.rk-mnode {
  flex: 0 0 auto; width: 64px; display: flex; flex-direction: column; align-items: center; text-align: center;
  opacity: 0; transform: translateY(8px); transition: opacity .4s ease, transform .4s ease;
}
.rk-mtrack.is-in .rk-mnode { opacity: 1; transform: none; }
.rk-mtrack.is-in .rk-mnode:nth-child(3) { transition-delay: .08s; }
.rk-mtrack.is-in .rk-mnode:nth-child(5) { transition-delay: .16s; }
.rk-mtrack.is-in .rk-mnode:nth-child(7) { transition-delay: .24s; }
.rk-mtrack.is-in .rk-mnode:nth-child(9) { transition-delay: .32s; }
.rk-mtrack.no-anim .rk-mnode, .rk-mtrack.no-anim .rk-mtrack-line-fill { transition: none; }
.rk-mnode-medal {
  position: relative; width: 44px; height: 44px; border-radius: 50%; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-card); color: var(--text-2); border: 2px dashed var(--border);
}
.rk-mnode-medal svg { width: 22px; height: 22px; }
.rk-mnode-label { margin-top: 7px; font-size: 12px; font-weight: 800; line-height: 1.3; color: var(--text-2); white-space: nowrap; }
.rk-mnode-days { font-size: 10.5px; color: var(--text-2); opacity: .75; margin-top: 1px; white-space: nowrap; }
.rk-mnode.is-earned .rk-mnode-medal { border: none; box-shadow: 0 4px 12px -4px rgba(0,0,0,.35); }
.rk-mnode.is-earned .rk-mnode-label { color: var(--text); }
.rk-mnode--bronze.is-earned  .rk-mnode-medal { background: linear-gradient(135deg,#f4c99e,#c17a45 45%,#8b4513 90%); color: #fff; }
.rk-mnode--silver.is-earned  .rk-mnode-medal { background: linear-gradient(135deg,#ffffff,#c8d1db 45%,#8d9aa6 90%); color: #263241; }
.rk-mnode--gold.is-earned    .rk-mnode-medal { background: linear-gradient(135deg,#fff6d8,#ffd700 45%,#b8860b 90%); color: #4a2f00; }
.rk-mnode--purple.is-earned  .rk-mnode-medal { background: linear-gradient(135deg,#f3e8ff,#c084fc 40%,#7e22ce 90%); color: #fff; }
.rk-mnode--diamond.is-earned .rk-mnode-medal { background: linear-gradient(135deg,#ecfeff,#67e8f9 35%,#0ea5e9 70%,#a5f3fc); color: #083344; box-shadow: 0 0 14px rgba(34,211,238,.6); }
.rk-mnode.is-earned .rk-mnode-medal::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.65) 48%, transparent 66%);
  transform: translateX(-130%);
}
@media (prefers-reduced-motion: no-preference) {
  .rk-mnode.is-earned .rk-mnode-medal::after { animation: ttsBadgeShine 3.6s ease-in-out infinite; }
}
.rk-mnode.is-next .rk-mnode-medal { border: 2px solid #ff8a00; color: #ff8a00; background: var(--bg-card); overflow: visible; }
.rk-mnode.is-next .rk-mnode-label { color: #ea580c; }
@media (prefers-reduced-motion: no-preference) {
  .rk-mnode.is-next .rk-mnode-medal { animation: rkNextRing 1.9s ease-out infinite; }
}
@keyframes rkNextRing { 0% { box-shadow: 0 0 0 0 rgba(255,138,0,.5); } 100% { box-shadow: 0 0 0 12px rgba(255,138,0,0); } }
.rk-mtrack-line {
  flex: 1; min-width: 10px; height: 5px; margin-top: 20px; border-radius: 999px;
  background: var(--border); overflow: hidden;
}
.rk-mtrack-line-fill {
  display: block; height: 100%; width: 100%; border-radius: inherit;
  background: linear-gradient(90deg, #ffb300, #ff6a00);
  transform-origin: left; transform: scaleX(0); transition: transform .9s cubic-bezier(.2,.8,.2,1) .2s;
}
.rk-mtrack.is-in .rk-mtrack-line-fill { transform: scaleX(var(--f)); }

/* ═══════════════════════════════════════════════════════════
   CHUỖI NGÀY — bục vinh danh + danh sách
   ═══════════════════════════════════════════════════════════ */
body.rk-streak-mode .rk-podium {
  border-color: rgba(255,138,0,.25);
  background: linear-gradient(180deg, rgba(255,138,0,.13), rgba(255,138,0,.02) 65%, transparent);
}
body.rk-streak-mode .rk-podium::before { background: radial-gradient(ellipse at center, rgba(255,138,0,.2), transparent 72%); }
body.rk-streak-mode .rk-podium-base { background: linear-gradient(180deg, rgba(255,138,0,.24), rgba(255,138,0,.04)); }
body.rk-streak-mode .rk-podium-item.rank-1 .rk-podium-base { background: linear-gradient(180deg, rgba(255,138,0,.38), rgba(255,138,0,.08)); }
.rk-podium-streak {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; padding: 3px 12px 3px 8px;
  border-radius: 999px; font-size: 12.5px; font-weight: 800; white-space: nowrap;
  background: var(--bg-hover); color: var(--text-2); border: 1px solid var(--border);
}
.rk-podium-streak.is-hot { background: linear-gradient(135deg, #ffe0b3, #ffb35c); color: #7a2e00; border-color: transparent; }
.rk-podium-item.rank-1 .rk-podium-streak { font-size: 13.5px; }
.rk-sv-flame { display: inline-flex; flex-shrink: 0; width: 16px; height: 16px; }
.rk-podium-name .tts-sbadge { flex-shrink: 0; }
/* Tên trên bục cho xuống tối đa 2 dòng thay vì cắt "…" sớm — MỌI cột giữ cùng chiều cao 2 dòng
   (min-height) để tên dài/ngắn/có huy hiệu hay không đều không làm lệch độ cao bục giữa các hạng. */
.rk-podium-name { min-height: 2.7em; }
.rk-podium-name-text {
  white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  line-height: 1.3; overflow-wrap: anywhere;
}
.rk-podium-item.rank-1 { flex: 1.25; max-width: 300px; }
/* Huy hiệu cạnh tên trong danh sách: desktop đặt ngay bên phải tên; mobile chuyển xuống dòng phụ
   (cạnh "Kỷ lục") để tên đủ chỗ — mỗi dòng render sẵn cả 2 chỗ, CSS chọn hiện 1. */
.rk-badge-slot { display: inline-flex; flex-shrink: 0; }
.rk-badge-slot:empty { display: none; }
.rk-badge-slot--sub { display: none; }

.rk-row--streak { padding: 12px 16px; gap: 14px; }
.rk-row--streak .rk-avatar img, .rk-row--streak .rk-avatar-fb { width: 42px; height: 42px; }
.rk-row--streak.is-idle .rk-avatar { opacity: .7; }
.rk-today-dot {
  position: absolute; right: -3px; bottom: -3px; width: 18px; height: 18px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #22c55e; color: #fff; box-shadow: 0 0 0 2.5px var(--bg-card);
}
.rk-today-dot svg { width: 10px; height: 10px; }
.rk-name-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.rk-nameline { display: flex; align-items: center; gap: 6px; min-width: 0; }
.rk-name-text { min-width: 0; font-size: 14.5px; font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-nameline .rk-me-badge, .rk-nameline .tts-sbadge { flex-shrink: 0; margin-left: 0; }
.rk-sub { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 12px; color: var(--text-2); }
.rk-sub .tts-sbadge { flex-shrink: 0; }
.rk-sub-text { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rk-sub-ok { color: #16a34a; font-weight: 700; }
:root[data-theme="dark"] .rk-sub-ok { color: #4ade80; }
.rk-streak-val {
  display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; padding: 6px 12px 6px 9px;
  border-radius: 999px; font-size: 14px; font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums;
  background: var(--bg-hover); color: var(--text-2);
}
.rk-streak-val .rk-sv-flame { width: 18px; height: 18px; }
.rk-streak-val.is-hot { background: linear-gradient(135deg, rgba(255,179,0,.2), rgba(255,90,0,.14)); color: #c2410c; }
:root[data-theme="dark"] .rk-streak-val.is-hot { color: #fdba74; }
.rk-empty-flame { display: inline-flex; width: 52px; height: 52px; opacity: .8; }

/* Tooltip huy hiệu chuỗi — 2 tông thêm (vàng/bạc/đồng đã có ở trên). */
.rk-trophy-tip--purple  { --tip-arrow: #7e22ce; background: linear-gradient(135deg,#f3e8ff,#c084fc 40%,#7e22ce 90%); color: #fff; }
.rk-trophy-tip--diamond { --tip-arrow: #0ea5e9; background: linear-gradient(135deg,#ecfeff,#67e8f9 35%,#0ea5e9 70%,#a5f3fc); color: #083344; }

@media (max-width: 640px) {
  .rk-mode { gap: 8px; }
  .rk-mode-btn { padding: 12px; gap: 10px; }
  .rk-mode-ico { width: 38px; height: 38px; }
  .rk-mode-title { font-size: 14px; }
  .rk-mode-sub { font-size: 11px; }
  .rk-sme { padding: 18px 16px; }
  .rk-sme-top { gap: 14px; }
  .rk-sme-flame { width: 64px; height: 64px; }
  .rk-sme-num > span { font-size: 38px; }
  .rk-sme-miles { padding: 14px 10px 12px; }
  .rk-mnode { width: 56px; }
  .rk-mnode-medal { width: 38px; height: 38px; }
  .rk-mnode-medal svg { width: 19px; height: 19px; }
  .rk-mnode-label { font-size: 11px; }
  .rk-mtrack-line { margin-top: 17px; min-width: 4px; }
  .rk-row--streak { padding: 11px 12px; gap: 10px; }
  .rk-row--streak .rk-avatar img, .rk-row--streak .rk-avatar-fb { width: 38px; height: 38px; }
  .rk-streak-val { font-size: 13px; padding: 5px 10px 5px 7px; }
  /* Trạng thái "đã học hôm nay" đã thể hiện qua dấu tích trên avatar + màu ngọn lửa — ẩn chữ cho tên đủ chỗ. */
  .rk-sub-status, .rk-sub-unit { display: none; }
  .rk-badge-slot--name { display: none; }
  .rk-badge-slot--sub:not(:empty) { display: inline-flex; }
  .rk-podium { gap: 8px; padding: 36px 10px 20px; }
  /* Bục vinh danh trên mobile chỉ ~110px/cột — huy hiệu cạnh tên thu về icon tròn (chạm để xem
     tooltip), nhường chỗ cho tên. */
  .rk-podium-name .tts-sbadge { padding: 3px; }
  .rk-podium-name .tts-sbadge > span { display: none; }
}
@media (max-width: 380px) {
  .rk-mode-sub { display: none; }
  .rk-mnode { width: 52px; }
  .rk-mnode-days { display: none; }
  /* Màn rất hẹp: dải mốc chỉ hiện 4 mốc (ẩn mốc thứ 5 + thanh nối trước nó) cho khỏi tràn. */
  .rk-mtrack > :nth-child(n+8) { display: none; }
  /* Bục vinh danh: nhãn số ngày thu nhỏ cho vừa cột (~95px). */
  .rk-podium-streak, .rk-podium-points { font-size: 11.5px; padding: 3px 8px 3px 6px; max-width: 100%; }
  .rk-podium-item.rank-1 .rk-podium-streak, .rk-podium-item.rank-1 .rk-podium-points { font-size: 12.5px; }
  .rk-podium-streak .rk-sv-flame { width: 13px; height: 13px; }
  .rk-podium { gap: 6px; padding: 36px 8px 20px; }
  /* Danh sách: thu gọn cột hạng/avatar/nhãn số ngày để nhường chỗ cho tên. */
  .rk-row--streak { gap: 8px; padding: 10px; }
  .rk-row--streak .rk-rank { width: 26px; font-size: 13px; }
  .rk-row--streak .rk-avatar img, .rk-row--streak .rk-avatar-fb { width: 34px; height: 34px; }
  .rk-streak-val { font-size: 12px; padding: 4px 8px 4px 6px; gap: 3px; }
  .rk-streak-val .rk-sv-flame { width: 14px; height: 14px; }
  .rk-name-text { font-size: 13.5px; }
  /* Chỗ quá hẹp chỉ còn hiện "K..." — dòng có huy hiệu thì bỏ chữ Kỷ lục (xem trong tooltip huy hiệu). */
  .rk-sub:has(.rk-badge-slot--sub .tts-sbadge) .rk-sub-text { display: none; }
}

/* Máy tính: bục vinh danh rộng hơn (trang 900px) → phóng to avatar/chữ cho cân khung, không để trống. */
@media (min-width: 641px) {
  .rk-podium-avatar-wrap { width: 76px; height: 76px; margin-bottom: 10px; }
  .rk-podium-item.rank-1 .rk-podium-avatar-wrap { width: 100px; height: 100px; }
  .rk-podium-name-text { font-size: 14.5px; }
  .rk-podium-item.rank-1 .rk-podium-name-text { font-size: 16px; }
  .rk-podium-points, .rk-podium-streak { font-size: 13.5px; padding: 4px 14px; }
  .rk-podium-item.rank-1 .rk-podium-points, .rk-podium-item.rank-1 .rk-podium-streak { font-size: 15px; }
  .rk-podium-medal { width: 24px; height: 24px; font-size: 12px; }
  .rk-podium-item.rank-1 .rk-podium-medal { width: 26px; height: 26px; font-size: 13px; }
  .rk-podium-item.rank-1 .rk-podium-base { height: 56px; }
  .rk-podium-item.rank-2 .rk-podium-base { height: 36px; }
  .rk-podium-item.rank-3 .rk-podium-base { height: 22px; }
}
/* Avatar chữ cái (không có ảnh) trên bục: canh giữa + chữ to theo khung (rule chung phía trên ép
   display:block cho cả img lẫn khối chữ nên chữ bị dính mép trên). */
.rk-podium-avatar-wrap .rk-avatar-fb { display: flex; font-size: 24px; }
.rk-podium-item.rank-1 .rk-podium-avatar-wrap .rk-avatar-fb { font-size: 32px; }
/* Tooltip dài (huy hiệu chuỗi) được xuống dòng thay vì tràn khỏi màn hình điện thoại. */
.rk-trophy-tip { white-space: normal; }

/* Tông tooltip thêm cho các phần tử không phải huy chương: trung tính (theo theme), xanh (đã học/
   tăng hạng), đỏ (giảm hạng), cam (chuỗi đang cháy / mốc sắp tới). */
.rk-trophy-tip--neutral {
  --tip-arrow: #1e293b; background: #1e293b; color: #f8fafc; font-weight: 700;
  box-shadow: 0 12px 26px -10px rgba(15,23,42,.55);
}
:root[data-theme="dark"] .rk-trophy-tip--neutral { --tip-arrow: #f1f5f9; background: #f1f5f9; color: #0f172a; }
.rk-trophy-tip--green  { --tip-arrow: #15803d; background: linear-gradient(135deg, #4ade80, #16a34a 55%, #15803d); color: #fff; }
.rk-trophy-tip--red    { --tip-arrow: #b91c1c; background: linear-gradient(135deg, #f87171, #dc2626 55%, #b91c1c); color: #fff; }
.rk-trophy-tip--orange { --tip-arrow: #ea580c; background: linear-gradient(135deg, #ffc043, #ff7a00 55%, #ea580c); color: #fff; }
/* Phần tử có tooltip: con trỏ gợi ý "có thông tin thêm". */
.rk-page [data-tip] { cursor: help; }