/* css/phong-than.css — [PHONG_THAN ST3b] Bảng Phong Thần
   ═══════════════════════════════════════════════════════════════════
   Quyết định Founder 2026-07-21 (PLAN_PHONG_THAN.md):
   - Trang TỐI Ở CẢ 2 THEME (Q4) — nền = ảnh bìa anhbiaphongthan + lớp phủ tối chỉnh được.
   - Khung top1/2/3 là WebP TRONG SUỐT (đã tách nền bằng pipeline dự án) → KHÔNG cần
     mix-blend-mode → transform/hover trên podium AN TOÀN (không dính bẫy stacking v13.37).
   - Badge CSS thay emoji (Q3): ấn triện chữ Hán cho tab, ô số hạng, pill VIP, mũi tên ▲▼.
   - Các giá trị vị trí khung/avatar đến từ CSS var do js/phong-than.js đặt (config Firestore
     server/phong_than_config — Admin chỉnh bằng panel ⚙ ngay trên trang).
   ═══════════════════════════════════════════════════════════════════ */

html, body { margin: 0; padding: 0; }
body {
  font-family: 'Inter', 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: #0b0714; /* tối cả 2 theme — Q4 */
  min-height: 100vh;
  min-height: 100dvh; /* rule v18.68 */
}

/* [R4] hidden thắng mọi display bên dưới */
.pt-gate[hidden], .pt-myrank[hidden], .pt-editor[hidden], .pt-edit-fab[hidden] { display: none !important; }

/* ══ LỚP NỀN ẢNH BÌA (fixed, sau nội dung) ══ */
.pt-bgfx { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.pt-bgfx img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: blur(var(--pt-bg-blur, 2px)); /* che vỡ nét ảnh gốc 438px khi phóng to (gap #2) */
  transform: scale(1.06);               /* giấu mép blur */
  opacity: 0;
  transition: opacity 0.8s ease;
}
.pt-bgfx img[data-loaded] { opacity: 1; }
.pt-bgfx-overlay {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(30, 12, 60, 0.35), transparent 60%),
    linear-gradient(180deg, rgba(8, 5, 16, calc(var(--pt-bg-overlay, 0.62) * 0.8)) 0%, rgba(8, 5, 16, var(--pt-bg-overlay, 0.62)) 55%, rgba(8, 5, 16, calc(var(--pt-bg-overlay, 0.62) + 0.12)) 100%);
}

.pt-page {
  --pt-bg-row: rgba(20, 11, 38, 0.78);
  --pt-line: rgba(180, 130, 255, 0.16);
  --pt-text: #f1eaff;
  --pt-text-dim: rgba(226, 214, 255, 0.6);
  --pt-gold: var(--accent-gold, #d4af37);
  position: relative;
  z-index: 1; /* trên lớp nền */
  max-width: 780px;
  margin: 0 auto;
  padding: 0 12px calc(84px + env(safe-area-inset-bottom, 0px));
  color: var(--pt-text);
}

/* ══ TIÊU ĐỀ tieude.webp ══ */
.pt-hero { text-align: center; padding: 16px 0 4px; }
.pt-hero-img {
  width: var(--pt-title-w, 300px);
  max-width: 92%;
  height: auto;
  filter: drop-shadow(0 0 22px rgba(212, 175, 55, 0.35)) drop-shadow(0 4px 10px rgba(0, 0, 0, 0.6));
  animation: ptTitleFloat 4.5s ease-in-out infinite alternate;
}
@keyframes ptTitleFloat { from { transform: translateY(0); } to { transform: translateY(-5px); } }
.pt-hero-sub { font-size: 0.78rem; color: var(--pt-text-dim); min-height: 1.2em; margin-top: 4px; }
.pt-refreshing { animation: ptPulse 1.1s ease-in-out infinite alternate; color: #ffd76a; }
@keyframes ptPulse { from { opacity: 0.55; } to { opacity: 1; } }

/* ══ ẤN TRIỆN (badge CSS thay emoji — Q3) ══ */
.pt-seal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 6px;
  font-family: 'Noto Serif SC', 'STKaiti', 'KaiTi', 'SimSun', serif;
  font-size: 0.85rem;
  font-weight: 700;
  color: #ffd76a;
  background: linear-gradient(160deg, rgba(212, 175, 55, 0.22), rgba(120, 60, 20, 0.25));
  border: 1px solid rgba(212, 175, 55, 0.45);
  box-shadow: inset 0 0 6px rgba(212, 175, 55, 0.18);
  flex-shrink: 0;
}
.pt-seal--inline { width: 20px; height: 20px; font-size: 0.8rem; vertical-align: -4px; }

/* Ô số hạng (bảng xếp hạng) */
.pt-rank-seal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px; height: 26px;
  padding: 0 4px;
  border-radius: 8px;
  font-weight: 800;
  font-size: 0.82rem;
  color: var(--pt-text-dim);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--pt-line);
}
.pt-rank-seal--mr {
  color: #1a0e2e;
  background: linear-gradient(180deg, #ffe9a8, var(--pt-gold));
  border-color: rgba(255, 233, 168, 0.8);
  font-size: 0.9rem;
  min-width: 30px; height: 30px;
}
/* [Fix Founder 2026-07-22 lần 4] Huy hiệu vàng/bạc/đồng cho hạng 1-3 trong bảng xếp hạng — đồng
   bộ MÀU với ruy băng podium (.pt-pod-ribbon--1/2/3) để người xem liên kết được "đây cũng chính
   là 3 người đang đứng bục vinh danh phía trên". */
.pt-rank-seal--top1 {
  color: #3a1d00;
  background: linear-gradient(180deg, #ffcb7a, #e2701d);
  border-color: rgba(255, 179, 71, 0.75);
  box-shadow: 0 0 10px rgba(255, 179, 71, 0.4);
  font-weight: 900;
}
.pt-rank-seal--top2 {
  color: #0d1830;
  background: linear-gradient(180deg, #c3ddff, #3f6fd8);
  border-color: rgba(120, 160, 255, 0.65);
  box-shadow: 0 0 10px rgba(120, 160, 255, 0.32);
  font-weight: 900;
}
.pt-rank-seal--top3 {
  color: #0a2015;
  background: linear-gradient(180deg, #a8f0c6, #1f9d63);
  border-color: rgba(110, 220, 170, 0.6);
  box-shadow: 0 0 10px rgba(110, 220, 170, 0.28);
  font-weight: 900;
}

/* [Fix 2026-07-22] VIP = ảnh vương miện CHUẨN toàn dự án (images/anh_du_an_ytt/vip.gif),
   không phải chữ "VIP" vẽ bằng CSS. Cỡ theo em (tỉ lệ chữ xung quanh) — pattern .vip-gif-icon
   (css/base.css) nhưng to hơn 1 chút cho hợp bối cảnh podium/hàng danh sách. */
.pt-vip-gif {
  display: inline-block;
  width: 1.15em;
  height: 1.15em;
  object-fit: contain;
  vertical-align: -0.22em;
  flex-shrink: 0;
  mix-blend-mode: screen; /* cố định — trang luôn nền tối cả 2 theme, xem chú thích _vipHtml() */
  filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.5));
}

/* Mũi tên thăng/giáng hạng ▲▼ (CSS triangle — Q3) */
.pt-delta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.72rem;
  font-weight: 800;
  flex-shrink: 0;
  animation: ptDeltaPop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes ptDeltaPop { from { transform: scale(0.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.pt-delta i { display: inline-block; width: 0; height: 0; }
.pt-delta--up   { color: #7dffa8; }
.pt-delta--up i   { border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 7px solid #7dffa8; filter: drop-shadow(0 0 4px rgba(125, 255, 168, 0.6)); }
.pt-delta--down { color: #ff8d8d; }
.pt-delta--down i { border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 7px solid #ff8d8d; filter: drop-shadow(0 0 4px rgba(255, 141, 141, 0.5)); }
.pt-delta--new {
  color: #1a0e2e;
  background: linear-gradient(180deg, #ffe9a8, var(--pt-gold));
  border-radius: 5px;
  padding: 1px 6px;
  font-size: 0.6rem;
  letter-spacing: 0.06em;
}

/* ══ TABS ══ */
.pt-tabs-wrap { position: relative; }
.pt-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  /* [Founder 2026-07-22] +22px 2 bên chừa chỗ cho nút mũi tên nổi — không đè lên tab đầu/cuối */
  padding: 10px 22px 8px;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
}
.pt-tabs::-webkit-scrollbar { display: none; }

/* [Founder 2026-07-22] Nút mũi tên gợi ý cuộn — làm RÕ còn tab bị che 2 bên (thay vì chỉ trông
   cậy hiệu ứng mờ mép mà Founder không nhận ra là gợi ý). Tự ẩn/hiện theo scrollLeft thật
   (js/phong-than.js _wireTabsScrollHint) — không hiện nếu không còn gì để cuộn hướng đó. */
/* [Fix Founder 2026-07-22] Founder báo khung tròn 24px×~42px cao (border-radius:50% trên box
   KHÔNG vuông → tự thành hình oval/dẹp) nằm sát-dính tab pill trông chật/xấu. Bỏ hẳn khung nền
   + viền tròn — chỉ còn mũi tên trần cỡ lớn, nổi bật bằng drop-shadow (không cần khung nền vẫn
   rõ trên mọi nền tab bên dưới), giãn cách xa tab hơn (-6px thay -2px) cho thoáng. */
.pt-tabs-nav {
  position: absolute;
  top: 0;
  bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  background: none;
  border: none;
  color: #ffd76a;
  font-size: 1.7rem;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  z-index: 5;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 7px rgba(212, 175, 55, 0.55));
  transition: transform 0.15s ease, color 0.15s ease;
}
.pt-tabs-nav:hover { transform: scale(1.15); color: #ffe9a8; }
.pt-tabs-nav[hidden] { display: none !important; } /* [R4] thắng mọi display khác */
.pt-tabs-nav--l { left: -6px; }
.pt-tabs-nav--r { right: -6px; }
.pt-tab {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--pt-line);
  background: rgba(24, 14, 44, 0.72);
  color: var(--pt-text-dim);
  border-radius: 999px;
  padding: 6px clamp(10px, 3cqi, 14px) 6px 7px;
  font-size: clamp(0.78rem, 2.9cqi, 0.86rem);
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
  min-height: 38px;
}
.pt-tab:hover { border-color: rgba(212, 175, 55, 0.4); color: var(--pt-text); }
.pt-tab.is-active {
  background: linear-gradient(180deg, rgba(212, 175, 55, 0.22), rgba(212, 175, 55, 0.07));
  border-color: rgba(212, 175, 55, 0.65);
  color: #ffe9a8;
  box-shadow: 0 0 14px rgba(212, 175, 55, 0.25);
}
.pt-tab.is-active .pt-seal { box-shadow: 0 0 10px rgba(212, 175, 55, 0.5), inset 0 0 6px rgba(212, 175, 55, 0.3); }
.pt-cat-desc { font-size: 0.78rem; color: var(--pt-text-dim); padding: 0 4px 12px; }
.pt-cat-desc b { color: #ffe9a8; font-weight: 700; }

/* ══ PODIUM TAM GIÁC ══ */
.pt-podium { margin-bottom: 14px; }
.pt-pod-row1 { display: flex; justify-content: center; }
.pt-pod-row2 {
  display: flex;
  justify-content: center;
  align-items: flex-end; /* canh ĐÁY để tên/chỉ số 2 card thẳng hàng (2 khung đã chuẩn hóa cùng canvas 640×640) */
  /* [Fix Founder 2026-07-22 lần 2] Founder báo top2/top3 "hơi bị sát vào nhau" — tăng gap. */
  gap: clamp(28px, 9cqi, 70px);
  margin-top: -6px;
}
/* [Fix Founder 2026-07-22] cursor/hover CHUYỂN sang riêng .pt-pod-ava — Founder yêu cầu chỉ
   avatar mới có thể bấm vào hồ sơ, cả thẻ không còn là vùng bấm nên bỏ cursor:pointer + hover
   lift ở đây (dễ hiểu lầm "bấm đâu trong thẻ cũng được"). */
.pt-pod {
  position: relative;
  text-align: center;
  padding-top: 14px; /* chỗ cho ruy băng */
}
/* [Fix Founder 2026-07-22 lần 6] Founder báo: chỉnh TAY cùng 1 bộ thông số % (Cỡ khung/avatar/
   Lệch...) cho cả 3 hạng nhưng top1 vẫn "khác hoàn toàn" — đúng vậy: top1 trước đây rộng 330px,
   top2/3 chỉ 265px, nên CÙNG % lại ra PIXEL khác nhau (330px luôn to hơn 265px ~24%). Thu top1
   về đúng 265×265 như top2/3 — giờ 3 khung cùng kích thước gốc, chỉnh cùng % ra cùng kết quả. */
.pt-pod--1, .pt-pod--2, .pt-pod--3 { width: min(46%, 265px); }

/* Ruy băng Đệ Nhất/Nhị/Tam */
.pt-pod-ribbon {
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  padding: 3px 16px;
  border-radius: 999px;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  white-space: nowrap;
}
.pt-pod-ribbon--1 { background: linear-gradient(180deg, #ffb347, #e2701d); box-shadow: 0 0 16px rgba(255, 179, 71, 0.55); }
.pt-pod-ribbon--2 { background: linear-gradient(180deg, #9ec9ff, #3f6fd8); box-shadow: 0 0 12px rgba(120, 160, 255, 0.45); }
.pt-pod-ribbon--3 { background: linear-gradient(180deg, #7ee2b0, #1f9d63); box-shadow: 0 0 12px rgba(110, 220, 170, 0.4); }

/* Sân khấu: khung WebP trong suốt đè LÊN avatar (avatar dưới, khung trên) */
/* [Fix Founder 2026-07-22] aspect-ratio:1/1 CHUẨN HÓA mọi khung thành ô vuông — ảnh lệch tỉ lệ
   (vd top3 hiện tại 300×198 ngang, khác top1/top2 vuông 700/512) tự "đệm" khoảng trong suốt
   trên/dưới qua object-fit:contain ở .pt-pod-frame bên dưới, KHÔNG méo ảnh gốc. Nhờ vậy 3 card
   podium LUÔN cao bằng nhau kể cả khi Admin đổi ảnh mới có tỉ lệ bất kỳ trong tương lai. */
.pt-pod-stage { position: relative; width: 100%; aspect-ratio: 1 / 1; }
.pt-pod-frame {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain; /* letterbox — không kéo méo ảnh khi tỉ lệ khác 1:1 */
  pointer-events: none;
  /* [Fix Founder 2026-07-22 lần 6] translate() % tính theo BỀ chính element (spec CSS transform)
     — luôn nhất quán bất kể ảnh to/nhỏ, không cần biết px thật. fx/fy XÊ DỊCH khung, tách biệt
     hoàn toàn avatar (ax/ay riêng ở .pt-pod-ava) — trước đây khung chỉ phóng to/nhỏ quanh tâm cố
     định, chưa dịch chuyển được. */
  transform: translate(var(--fx, 0%), var(--fy, 0%)) scale(var(--fs, 1));
  transform-origin: center;
}
.pt-pod-stage--top1 .pt-pod-frame { --fs: var(--pt-top1-fs, 1); --fx: var(--pt-top1-fx, 0%); --fy: var(--pt-top1-fy, 0%); }
.pt-pod-stage--top2 .pt-pod-frame { --fs: var(--pt-top2-fs, 1); --fx: var(--pt-top2-fx, 0%); --fy: var(--pt-top2-fy, 0%); }
.pt-pod-stage--top3 .pt-pod-frame { --fs: var(--pt-top3-fs, 1); --fx: var(--pt-top3-fx, 0%); --fy: var(--pt-top3-fy, 0%); }
.pt-pod-ava {
  position: absolute;
  z-index: 3; /* Founder chốt: avatar ĐÈ LÊN TRÊN khung (giống site tham chiếu) — khung z2 phía sau */
  cursor: pointer; /* [Fix Founder 2026-07-22] chỉ avatar là vùng bấm vào hồ sơ, xem chú thích .pt-pod */
  /* [Fix 2026-07-22] ax/ay đổi sang % của KHUNG CHA (top/left — percentage luôn theo containing
     block) thay vì % của chính avatar (translate — percentage theo box của chính element bị
     transform). Bản cũ khiến 1 đơn vị --ay dịch chuyển khác nhau tùy cỡ avatar (--ava) và tỉ lệ
     khung (vuông/ngang/dọc) — không dự đoán được khi đổi ảnh mới, slider Admin chỉnh "vô nghĩa"
     giữa 3 khung. Giờ +12% luôn = dịch xuống đúng 12% chiều cao khung, mọi ảnh mọi tỉ lệ. */
  /* [Fix Founder 2026-07-22 lần 5] GIỚI HẠN AN TOÀN bằng clamp() — Founder kéo "Lệch dọc" tới
     -24% (kèm "Cỡ khung" 140%) khiến avatar chạy lên ĐÈ VÀO ruy băng "Đệ Nhất" phía trên. Đo
     THẬT bằng Playwright: mép trên avatar chỉ còn cách đáy ruy băng 13px (viền sáng box-shadow
     18px của avatar khiến MẮT THẤY như chạm hẳn). Đây KHÔNG phải lỗi chuẩn hóa ảnh (nội dung vòng
     xoáy đã canh giữa đúng, xem BUG #3 tools/_verify_and_fix_phong_than.py) — avatar là 1 LỚP
     OVERLAY độc lập, admin có thể kéo tới bất kỳ vị trí nào bất kể ảnh nền ra sao. clamp() dưới
     đây tính theo ĐÚNG nửa cỡ avatar (var(--ava)/2) nên luôn chừa ít nhất 9% chiều cao sân khấu
     làm khoảng đệm an toàn ở CẢ 2 đầu (trên: tránh đè ruy băng; dưới: tránh tràn khỏi sân khấu),
     bất kể admin kéo "Lệch dọc"/"Cỡ avatar" tới giá trị cực đoan nào. */
  top: clamp(
    calc(9% + var(--ava, 38%) / 2),
    calc(50% + var(--ay, 0%)),
    calc(91% - var(--ava, 38%) / 2)
  );
  left: calc(50% + var(--ax, 0%));
  width: var(--ava, 38%);
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  /* [Fix 2026-07-22] overflow:visible — KHUNG TRANG BỊ (js/phong-than.js _podAvatarHtml, dùng
     đúng công thức window.getTuTienAvatarHtml) thường LỚN HƠN vòng tròn avatar (viền/họa tiết
     tràn ra ngoài) → nếu cắt ở đây, khung trang bị của user sẽ bị cụt mất phần tràn viền. Vòng
     tròn + nền tối giờ chuyển vào .pt-ava-photo (con, overflow:hidden) — xem _podAvatarHtml(). */
  overflow: visible;
}
.pt-pod-ava .pt-ava-photo {
  position: absolute; inset: 0;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 18px rgba(0, 0, 0, 0.6);
  transition: transform 0.15s ease;
}
/* [Fix Founder 2026-07-22] hover/focus scale áp cho ẢNH CON (.pt-ava-photo) — KHÔNG áp trực tiếp
   lên .pt-pod-ava vì element đó đã dùng transform:translate(-50%,-50%) để định vị tâm, hover
   thêm scale() vào cùng thuộc tính sẽ GHI ĐÈ mất phần translate định vị (mất luôn vị trí avatar). */
.pt-pod-ava:hover .pt-ava-photo, .pt-pod-ava:focus-visible .pt-ava-photo { transform: scale(1.07); }
.pt-pod-ava:focus-visible { outline: 2px solid rgba(212, 175, 55, 0.7); outline-offset: 3px; border-radius: 50%; }
/* [Fix 2026-07-22 lần 4] top1 đổi ảnh MỚI (vòng lửa đỏ) — đo lại trọng tâm ánh sáng THẬT: gần
   tâm (x=51.9%,y=43.5%) như top2/top3 vì cùng dạng vành khuyên, khác hẳn ảnh top1 CŨ (có vệt lửa
   nhọn kéo dài lên khiến trọng tâm lệch hẳn xuống ~69%). ay dương = avatar dịch XUỐNG. */
.pt-pod-stage--top1 .pt-pod-ava { --ava: var(--pt-top1-ava, 40%); --ax: var(--pt-top1-ax, 0%); --ay: var(--pt-top1-ay, -6%); }
.pt-pod-stage--top2 .pt-pod-ava { --ava: var(--pt-top2-ava, 38%); --ax: var(--pt-top2-ax, 0%); --ay: var(--pt-top2-ay, 0%); }
.pt-pod-stage--top3 .pt-pod-ava { --ava: var(--pt-top3-ava, 34%); --ax: var(--pt-top3-ax, 0%); --ay: var(--pt-top3-ay, -1%); }
.pt-pod-ava img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* [Fix Founder 2026-07-22 lần 4] ĐÃ XÓA toàn bộ CSS tên/cảnh giới/danh hiệu/tuvi của podium
   (.pt-pod-name/.pt-pod-cg/.pt-pod-titles/.pt-pod-val và biến --pt-fs/--pt-info-gap/--pt-info-scale)
   — Founder chốt thiết kế lại: podium CHỈ còn avatar+khung, không hiện thông tin cá nhân nữa.
   Thông tin (tên/VIP/Bạn/cảnh giới/danh hiệu/số liệu) giờ hiện trong bảng xếp hạng bên dưới, áp
   dụng lại đúng .pt-row/.pt-name/.pt-canhgioi/.pt-titles/.pt-val sẵn có — xem _rowHtml (js/phong-than.js). */

/* ══ BẢNG XẾP HẠNG — hiện TỪ HẠNG #1 (Founder chốt lần 4) ══ */
.pt-board { display: flex; flex-direction: column; gap: 8px; }
/* [Fix Founder 2026-07-22] cursor/hover-lift CHUYỂN sang riêng .pt-ava — chỉ avatar là vùng bấm
   vào hồ sơ, cả hàng không còn là vùng bấm (xem chú thích tương tự .pt-pod ở podium). */
.pt-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 14px;
  background: var(--pt-bg-row);
  border: 1px solid var(--pt-line);
  content-visibility: auto;               /* [R6] */
  /* [Fix Founder 2026-07-22 — sprint Phú Hào] tăng từ 64px — row giờ 2 dòng (tên+titles /
     cảnh giới+giá trị) + có thể thêm dải vật phẩm → cần rộng rãi hơn để chứa (yêu cầu Founder). */
  contain-intrinsic-size: auto 110px;
}
.pt-rank {
  flex-shrink: 0;
  /* [Fix Founder 2026-07-22 — sprint Phú Hào] đệm thêm giữa số hạng và avatar — khung trang bị
     (nếu user có) tràn ra ngoài vòng tròn avatar (overflow:visible mặc định), sát quá sẽ lem che
     mất số hạng bên trái. */
  margin-right: 8px;
}
.pt-ava {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  cursor: pointer;
  border-radius: 50%;
  transition: transform 0.15s ease;
}
.pt-ava:hover, .pt-ava:focus-visible { transform: scale(1.08); outline: none; }
.pt-ava:focus-visible { outline: 2px solid rgba(212, 175, 55, 0.7); outline-offset: 2px; }
.pt-main { flex: 1; min-width: 0; }
/* [Fix Founder 2026-07-22 — sprint Phú Hào] Bố cục lại dòng 1: tên+danh hiệu bên trái (dời từ
   dòng 2 lên), cảnh giới+giá trị bên phải (cảnh giới dời xuống cạnh số liệu thay vì chung dòng
   với danh hiệu như trước). */
.pt-row-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.pt-name-col { min-width: 0; flex: 1; }
.pt-name {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--pt-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 6px;
}
.pt-me-tag {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #0b0714;
  background: linear-gradient(180deg, #ffe9a8, var(--pt-gold));
  border-radius: 999px;
  padding: 1px 7px;
  flex-shrink: 0;
}
.pt-titles { display: flex; gap: 4px; min-width: 0; overflow: hidden; margin-top: 4px; }
.pt-title-img { height: 18px; width: auto; display: block; }
.pt-val-col { flex-shrink: 0; text-align: right; }
.pt-val { display: flex; align-items: baseline; justify-content: flex-end; gap: 5px; line-height: 1.15; }
.pt-val b { font-size: 1.08rem; color: #ffe9a8; font-weight: 800; }
.pt-val span { font-size: 0.68rem; color: var(--pt-text-dim); text-transform: uppercase; letter-spacing: 0.06em; }
.pt-canhgioi { font-size: 0.8rem; font-weight: 700; white-space: nowrap; margin-top: 4px; }
.pt-row--me { border-color: rgba(255, 233, 168, 0.8); box-shadow: inset 0 0 0 1px rgba(255, 233, 168, 0.35); }

/* [Fix Founder 2026-07-22 — sprint Phú Hào] Dải TOÀN BỘ vật phẩm trang bị — dòng 2 mới. */
.pt-items-wrap { position: relative; margin-top: 8px; }
/* [Fix Founder 2026-07-22 — bug thật phát hiện khi tự verify] KHÔNG dùng mask-image ở đây (khác
   .pt-tabs) — đã ĐO THẬT bằng Playwright: mask-image khiến .pt-items-strip tự tạo stacking
   context mới, "nhốt" mix-blend-mode:screen của <video> con lại (không blend được với nền thật
   phía sau) → hiện ô vuông ĐEN THUI cho vật phẩm dạng .webm (ảnh .webp tĩnh ít lộ hơn nhưng cùng
   lỗi). Xác nhận bằng cách tắt thử mask-image → đen biến mất ngay. Đây đúng lỗi đã ghi nhận
   trong FEATURE_PROTOCOL.md §STACKING CONTEXT TRAP (mix-blend-mode + filter/mask/transform/
   opacity trên ancestor = khóa blend mode con). Đánh đổi chấp nhận được: mất hiệu ứng mờ 2 mép
   dải cuộn — nút mũi tên vẫn đủ gợi ý còn vật phẩm ẩn, không cần thêm hiệu ứng mờ. */
.pt-items-strip {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 2px 20px;
}
.pt-items-strip::-webkit-scrollbar { display: none; }
/* [Fix Founder 2026-07-22 lần 7 — bug thật Founder chụp màn hình + tự đo lại bằng Playwright]
   Comment cũ ở đây từng khẳng định "đã verify bằng ảnh thật không lem viền đen ở cỡ nhỏ" — SAI,
   Founder chụp thực tế thấy rõ viền đen trên gần như mọi vật phẩm. Đo lại bằng A/B test 4 biến
   thể (nền cũ rgba trắng-mờ 3% vs nền radial tối `.hs-eq-media-wrap`-style, cỡ 34px vs 44px):
   ảnh gốc vật phẩm 100% OPAQUE (alpha=255 toàn bộ, xác nhận bằng Pillow trên nhiều file mẫu —
   KHÔNG có transparency thật, khác khung podium top1/2/3 đã qua pipeline feather riêng), margin
   "đen" quanh nhân vật đa số đúng (0,0,0) tuyệt đối nhưng có ~3-6% pixel viền chuyển tiếp
   đen-không-tuyệt-đối (nén WebP lossy/antialias, lum 1-24/255) — vô hại ở cỡ hiển thị LỚN
   (.hs-eq-media-wrap Hồ Sơ 116px, downscale ~5.4×) nhưng bị NÉN TRUNG BÌNH lộ rõ ở cỡ NHỎ 34px
   cũ (downscale ~18×, các pixel "gần đen" bị trung bình hoá với pixel đen tuyệt đối lân cận →
   cả mảng tối bị nhạt lên đồng đều → mix-blend-mode:screen không xoá sạch được). Nền chip cũ
   (rgba trắng-mờ 3%) cũng KHÔNG đủ tối/đặc so với pattern `.hs-eq-media-wrap` (radial gradient
   gần-đặc #1a0e2e→#080614) — 2 yếu tố cộng dồn. Fix KHÔNG đụng 415 ảnh gốc shop (rủi ro/quy mô
   lớn, ảnh hưởng Shop+Hồ Sơ dùng chung) — chỉ đổi nền chip theo ĐÚNG pattern đã proven + tăng cỡ
   vừa phải. Đã xác nhận bằng screenshot 4× thật: gần như sạch hoàn toàn, không cần xử lý ảnh. */
.pt-item-chip {
  flex: 0 0 auto;
  width: 48px; height: 48px;
  border-radius: 10px;
  background: radial-gradient(circle at center, #1a0e2e 0%, #080614 90%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.pt-item-media { width: 40px; height: 40px; object-fit: contain; display: block; mix-blend-mode: screen; }
.pt-items-nav {
  position: absolute;
  top: 0; bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  background: none;
  border: none;
  color: #ffd76a;
  font-size: 1.3rem;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 5px rgba(212, 175, 55, 0.5));
  transition: transform 0.15s ease;
}
.pt-items-nav:hover { transform: scale(1.15); }
.pt-items-nav[hidden] { display: none !important; }
.pt-items-nav--l { left: -4px; }
.pt-items-nav--r { right: -4px; }

.pt-empty {
  text-align: center;
  padding: 42px 16px;
  color: var(--pt-text-dim);
  font-size: 0.92rem;
  border: 1px dashed var(--pt-line);
  border-radius: 14px;
  background: rgba(12, 7, 24, 0.55);
}
.pt-empty b { color: #ffe9a8; }

/* ══ SKELETON ══ */
.pt-skel { pointer-events: none; }
.pt-skel-a { width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0; margin-left: 26px; }
.pt-skel-b { flex: 1; display: flex; flex-direction: column; gap: 7px; }
.pt-skel-b i { height: 11px; border-radius: 6px; width: 55%; }
.pt-skel-b i + i { width: 34%; }
.pt-skel-c { width: 58px; height: 22px; border-radius: 8px; }
.pt-skel-a, .pt-skel-b i, .pt-skel-c {
  background: linear-gradient(100deg, rgba(255,255,255,0.05) 30%, rgba(255,255,255,0.13) 50%, rgba(255,255,255,0.05) 70%);
  background-size: 220% 100%;
  animation: ptShimmer 1.3s linear infinite;
}
@keyframes ptShimmer { from { background-position: 130% 0; } to { background-position: -90% 0; } }

/* ══ VỊ TRÍ CỦA BẠN ══ */
.pt-myrank {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  display: flex;
  justify-content: center;
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, rgba(11, 7, 20, 0) 0%, rgba(11, 7, 20, 0.9) 40%, rgba(11, 7, 20, 0.98) 100%);
  pointer-events: none;
  z-index: 50;
}
.pt-mr-in {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 756px;
  background: linear-gradient(180deg, rgba(46, 26, 84, 0.97), rgba(26, 14, 46, 0.97));
  border: 1px solid rgba(212, 175, 55, 0.5);
  border-radius: 14px;
  padding: 8px 14px;
  box-shadow: 0 -4px 22px rgba(0, 0, 0, 0.45);
}
.pt-mr-txt { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.pt-mr-txt b { font-size: 0.9rem; color: #ffe9a8; }
.pt-mr-txt span { font-size: 0.72rem; color: var(--pt-text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pt-mr-cta b { color: #b9f6ca; }

/* ══ NÚT + PANEL TINH CHỈNH (Admin) ══ */
.pt-edit-fab {
  position: fixed;
  right: 14px;
  bottom: calc(74px + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(212, 175, 55, 0.55);
  background: linear-gradient(180deg, #2e1a54, #1a0e2e);
  color: #ffd76a;
  font-size: 1.15rem;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.pt-edit-fab:hover { transform: rotate(30deg) scale(1.06); box-shadow: 0 0 18px rgba(212, 175, 55, 0.35); }
.pt-editor {
  position: fixed;
  right: 10px;
  bottom: calc(124px + env(safe-area-inset-bottom, 0px));
  z-index: 70;
  width: min(330px, calc(100vw - 20px));
  max-height: min(72vh, 560px);
  overflow-y: auto;
  background: linear-gradient(180deg, rgba(30, 17, 58, 0.98), rgba(16, 9, 32, 0.98));
  border: 1px solid rgba(212, 175, 55, 0.45);
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
  font-size: 0.84rem;
}
.pte-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; color: #ffe9a8; }
.pte-x { background: none; border: none; color: var(--pt-text-dim); font-size: 1rem; cursor: pointer; }
.pte-demo-note { font-size: 0.72rem; color: #9ad8ff; background: rgba(80, 160, 255, 0.1); border: 1px solid rgba(80, 160, 255, 0.3); border-radius: 8px; padding: 6px 8px; margin-bottom: 10px; }
.pte-sec { border-top: 1px solid var(--pt-line); padding-top: 10px; margin-top: 10px; }
.pte-sec:first-of-type { border-top: none; margin-top: 0; padding-top: 0; }
.pte-sec-title { font-weight: 800; color: #ffd76a; font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 8px; }
.pte-target { display: flex; gap: 6px; margin-bottom: 10px; }
.pte-tbtn {
  flex: 1;
  border: 1px solid var(--pt-line);
  background: rgba(255, 255, 255, 0.04);
  color: var(--pt-text-dim);
  border-radius: 8px;
  padding: 6px 0;
  font-weight: 700;
  font-size: 0.78rem;
  cursor: pointer;
}
.pte-tbtn.is-on { border-color: rgba(212, 175, 55, 0.65); color: #ffe9a8; background: rgba(212, 175, 55, 0.14); }
.pte-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.pte-label { width: 108px; flex-shrink: 0; color: var(--pt-text-dim); font-size: 0.76rem; }
.pte-row input[type="range"] { flex: 1; accent-color: #d4af37; min-width: 0; }
.pte-val { width: 44px; text-align: right; color: #ffe9a8; font-size: 0.74rem; font-weight: 700; flex-shrink: 0; }
.pte-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.pte-btn {
  flex: 1 1 auto;
  border: 1px solid var(--pt-line);
  background: rgba(255, 255, 255, 0.05);
  color: var(--pt-text);
  border-radius: 9px;
  padding: 8px 10px;
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
}
.pte-btn--save { background: linear-gradient(180deg, #ffe9a8, var(--pt-gold)); color: #1a0e2e; border-color: transparent; }
.pte-btn--save:disabled { opacity: 0.45; cursor: not-allowed; }
.pte-hint { margin-top: 10px; font-size: 0.68rem; line-height: 1.5; color: var(--pt-text-dim); }
.pte-hint code { color: #ffd76a; background: rgba(212, 175, 55, 0.12); padding: 0 4px; border-radius: 4px; }

/* ══ GATE ══ */
.pt-gate {
  position: fixed; inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(6, 4, 14, 0.7);
  backdrop-filter: blur(4px);
  z-index: 90;
}
.pt-gate-box {
  max-width: 380px;
  text-align: center;
  background: linear-gradient(180deg, #241344, #140b26);
  border: 1px solid rgba(212, 175, 55, 0.4);
  border-radius: 18px;
  padding: 28px 22px;
  color: var(--pt-text, #f1eaff);
}
.pt-gate-icon { font-size: 2.2rem; margin-bottom: 8px; }
.pt-gate-box h2 { font-size: 1.02rem; margin: 0 0 8px; color: #ffe9a8; }
.pt-gate-box p { font-size: 0.84rem; color: rgba(226, 214, 255, 0.6); margin: 0 0 16px; }
.pt-gate-btn {
  display: inline-block;
  background: linear-gradient(180deg, #ffe9a8, #d4af37);
  color: #1a0e2e;
  font-weight: 800;
  font-size: 0.86rem;
  text-decoration: none;
  border-radius: 999px;
  padding: 9px 20px;
}

/* ══ Giảm chuyển động (a11y) ══ */
@media (prefers-reduced-motion: reduce) {
  .pt-hero-img, .pt-refreshing, .pt-delta { animation: none !important; }
}

/* ══ Mobile hẹp ══ */
@media (max-width: 480px) {
  /* [Fix Founder 2026-07-22 lần 6] đồng bộ top1 = top2/3 (xem chú thích ở rule desktop phía trên) */
  .pt-pod--1, .pt-pod--2, .pt-pod--3 { width: 48%; }
}
@media (max-width: 420px) {
  .pt-page { padding-left: 8px; padding-right: 8px; }
  .pt-row { padding: 8px 9px; gap: 8px; }
  .pt-titles { display: none; } /* màn hẹp: nhường chỗ tên + giá trị */
  .pt-val b { font-size: 0.9rem; }
  .pt-edit-fab { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
}