<- ô vuông / tròn có sẵn từ trước
L <- chữ cái đầu, NẰM DƯỚI
<- ảnh thẻ thật, PHỦ LÊN TRÊN
Phủ lên chứ không thay thế, vì ba lýo:
· lúc ảnh chưa tải xong ô vẫn có hình, không nhấp nháy khoảng trắng
· mất mạng thì onerror gỡ thẻ , lộ lại chữ cái đầu y như cũ
· ai chưa chạy VN_Checker_AnhThe.sql thì không có nào cả, vẫn chạy đúng
Tấm thẻ người chơi là ảnh vuông nhưng phần đẹp nằm ở giữa — object-fit: cover
để nó lấp đầy ô mà không bị bóp méo. */
.anh-dai-dien, .anh-tron { position: relative; overflow: hidden; }
.anh-dai-dien > img, .anh-tron > img {
position: absolute; inset: 0;
width: 100%; height: 100%; object-fit: cover;
display: block;
}
.anh-dai-dien > .chu-dau, .anh-tron > .chu-dau {
position: relative; z-index: 0; line-height: 1;
}
/* Ô tròn trong danh sách thì bọ ảnh theo luôn */
.anh-tron > img { border-radius: 50%; }
/* Tấm thẻ bản WIDE làm nền băng rôn hồ sơ — đúng kiểu tracker.gg.
Đặt dưới cùng (z-index 0) và làm mờ đi, vì lớp phủ .bang-ho-so::after chỉ
tối ở phía dưới — để ảnh sáng nguyên là chữ tên người chơi chìm mất. */
.bang-ho-so > .nen-the {
position: absolute; inset: 0; z-index: 0;
width: 100%; height: 100%; object-fit: cover; object-position: center 30%;
opacity: 0.34;
-webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 92%);
mask-image: linear-gradient(to bottom, #000 0%, transparent 92%);
}
.bang-ho-so::after { z-index: 1; }
/* ============ BẢNG "ĐÃ GẶP" (Encounters) ============
Bản đầu để cột tự co giãn, kết quả là "1 (thắng 1 · 100%)" gãy làm ba dòng
còn huy hiệu hạng thì dính vào số trận bên cạnh. Nay cố định bề rộng cột
(đặt thẳng trên thẻ
) và đẩy phần chú thích xuống hẳn dòng dưới. */
/* KHÔNG dùng table-layout: fixed ở đây. Đã thử, và cột "Hạng" bị bóp còn
~55px nên "Chưa Xếp Hạng" cụt thành "Ch...". Để trình duyệt tự co cột theo
nội dung thì đúng hơn — be rộng ở thẻ
chỉ còn là gợi ý. */
.bang-gap td, .bang-gap th { vertical-align: middle; }
/* Cột số căn phải nằm ngay sát nhãn hạng bên trái, trông như dính vào nhau */
.bang-gap td.phai, .bang-gap th.phai { padding-left: 16px; }
/* Dòng phụ nhỏ nằm dưới con số chính */
.phu-dong {
font-size: 0.72rem; line-height: 1.35; margin-top: 2px;
white-space: nowrap;
}
.khong-xuong-dong { white-space: nowrap; }
/* Nhãn hạng trong bảng: cắt bớt tên dài thay vì đẩy cột bên cạnh */
.bang-gap .o-hang {
display: inline-flex; align-items: center; gap: 5px;
white-space: nowrap; font-size: 0.82rem;
}
/* ==========================================================================
BA TRẠNG THÁI: ĐANG TẢI · MẤT MẠNG · KHÔNG CÓ DỮ LIỆU
(mã chạy nằm ở trangthai.js, khối rỗng do hàm khungTrong() trong main.hql in ra)
========================================================================== */
/* ---- 1. Vạch chạy trên đỉnh trang ---- */
.vach-tai{
position:fixed; top:0; left:0; right:0; height:3px;
z-index:9999; pointer-events:none;
opacity:0; transition:opacity .25s;
}
.vach-tai.chay{ opacity:1 }
.vach-tai i{
display:block; height:100%; width:0;
background:linear-gradient(90deg,var(--do,#FF4655),var(--xanh,var(--xanh)));
box-shadow:0 0 10px rgba(0, 255, 200, .6);
animation:vachChay 12s cubic-bezier(.1,.6,.3,1) forwards;
}
/* Bò nhanh tới 90% rồi bò chậm dần — không bao giờ tự chạm 100%, vì trang tải
xong lúc nào là chuyện của máy chủ, đoán bừa rồi đứng im ở 100% trông tệ hơn. */
@keyframes vachChay{
0%{ width:0 } 12%{ width:38% } 30%{ width:62% }
60%{ width:80% } 100%{ width:92% }
}
.vach-tai.xong i{ width:100%; transition:width .18s ease-out; animation:none }
/* ---- 2. Dải mất mạng ---- */
.dai-mang{
position:fixed; left:50%; top:-70px; transform:translateX(-50%);
z-index:9998; display:flex; align-items:center; gap:12px;
padding:11px 18px; border-radius:0 0 10px 10px;
background:#3A1B1B; border:1px solid #C0453F; border-top:0;
color:#FFB3AE; font-size:.88rem;
box-shadow:0 8px 26px rgba(0, 0, 0, 0.45);
transition:top .3s cubic-bezier(.2,.9,.3,1.2);
/* width:max-content là bắt buộc, không phải cho đẹp.
Khối này position:fixed + left:50%, nên chỗ trống mà trình duyệt tính
cho nó chỉ là NỬA màn hình bên phải. Trên điện thoại 390px, nửa đó là
195px — chữ bị bóp thành cột dọc mỗi dòng một từ, cao 241px, che kín
cả thanh menu. max-content cho nó trải hết một dòng rồi mới bị
max-width chặn lại: đo lại còn 366 x 66px, gọn như phải thế. */
width:max-content;
max-width:calc(100vw - 24px);
}
.dai-mang.hien{ top:0 }
.dai-mang.da-ve{ background:#12301F; border-color:#2F855A; color:#9AE6B4 }
.dai-mang .dm-cham{
width:9px; height:9px; border-radius:50%; background:#F87171; flex:none;
animation:daiNhap 1.1s infinite;
}
.dai-mang.da-ve .dm-cham{ background:#48BB78; animation:none }
@keyframes daiNhap{ 0%,100%{opacity:1} 50%{opacity:.25} }
.dai-mang .dm-nut{
flex:none; padding:5px 12px; cursor:pointer;
background:transparent; border:1px solid currentColor; border-radius:4px;
color:inherit; font:inherit; font-size:.82rem;
}
.dai-mang .dm-nut:hover{ background:rgba(255, 255, 255, 0.08) }
.dai-mang.da-ve .dm-nut{ display:none }
/* ---- 3. Khối "không có dữ liệu" ---- */
.khung-trong{
display:flex; flex-direction:column; align-items:center; text-align:center;
gap:10px; padding:44px 24px;
background:var(--nen-the,#111C24); border:1px dashed var(--vien,#2B3A45);
border-radius:8px; margin:6px 0;
}
.khung-trong .kt-hinh{ font-size:2.6rem; line-height:1; opacity:.75 }
.khung-trong .kt-tieu-de{ font-size:1.02rem; font-weight:700; color:var(--chu,#E8ECF1) }
.khung-trong .kt-mo-ta{
font-size:.87rem; color:var(--chu-mo,#9BA4B0);
max-width:520px; line-height:1.75;
}
.khung-trong .nut{ margin-top:6px }
/* ---- 4. Ô xương cá lúc đang chờ dữ liệu ---- */
.xuong-ca{
background:linear-gradient(90deg,
var(--nen-mat,#16222B) 25%, #1E2C36 37%, var(--nen-mat,#16222B) 63%);
background-size:400% 100%;
animation:xuongCa 1.3s ease-in-out infinite;
border-radius:4px; height:14px; margin:8px 0;
}
@keyframes xuongCa{ 0%{background-position:100% 0} 100%{background-position:0 0} }
@media (prefers-reduced-motion: reduce){
.vach-tai i, .dai-mang .dm-cham, .xuong-ca{ animation:none }
}
/* ---- Ô chọn ngôn ngữ trên thanh điều hướng ---- */
.chon-nn{
display:inline-flex; align-items:center; gap:0;
border:1px solid var(--vien,#2B3A45); border-radius:4px; overflow:hidden;
margin-right:4px; flex:none;
}
.chon-nn .nn-nut{
padding:5px 9px; font-size:.74rem; font-weight:700; letter-spacing:.05em;
color:var(--chu-mo,#9BA4B0); text-decoration:none; line-height:1;
background:transparent; transition:background .15s, color .15s;
}
.chon-nn .nn-nut:hover{ background:rgba(255, 255, 255, 0.06); color:var(--chu,#E8ECF1) }
.chon-nn .nn-nut.active{ background:var(--do,#FF4655); color:#fff }
<- ảnh thẻ thật, PHỦ LÊN TRÊN