/*=====================================================================
  kieu.css - Giao dien dung chung
  Khong thu vien ngoai. Font Titillium Web tai tu Google Fonts, NHUNG
  luon co ngan xep font he thong lam duong lui: mang cua nguoi choi
  chan Google Fonts thi trang van doc duoc binh thuong, chi khac mat
  chu. Chon font nay de KHOP voi hub IslePilot (sinhviendino.islepilot.eu)
  - hai ben phai trong nhu mot trang duy nhat.
=====================================================================*/

:root{
  --nen:#070b09; --nen2:#0d1512; --nen3:#131f1a; --nen4:#1a2b24;
  --vien:#1e2f28; --vien2:#2a4038;
  --chu:#eaf3ef; --chu-mo:#8fa8a0; --chu-mo2:#5f7a72;
  --nhan:#34d399; --nhan2:#6ee7b7; --nhan-dam:#10b981; --nhan-toi:#065f46;
  --do:#f87171; --vang:#fbbf24; --tim:#c4b5fd; --lam:#7dd3fc;
  --font:'Titillium Web','Segoe UI',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
  --mono:ui-monospace,Consolas,'Courier New',monospace;
  --r:16px; --r-nho:10px;
  --quang:0 0 0 1px rgba(52,211,153,.14), 0 8px 30px -8px rgba(16,185,129,.35);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;color:var(--chu);font-family:var(--font);line-height:1.65;
  -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(900px 480px at 50% -140px, rgba(16,185,129,.16), transparent 70%),
    radial-gradient(700px 400px at 90% 340px, rgba(16,185,129,.07), transparent 70%),
    var(--nen);
  background-attachment:fixed;
}
img{max-width:100%}
a{color:var(--nhan2);text-decoration:none}
a:hover{color:var(--nhan);text-decoration:underline}
.khung{max-width:940px;margin:0 auto;padding:0 20px}

/*--- thanh dieu huong ---*/
nav.dinh{position:sticky;top:0;z-index:50;background:rgba(7,11,9,.82);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--vien)}
nav.dinh .khung{display:flex;align-items:center;gap:5px;height:62px;
  overflow-x:auto;scrollbar-width:none}
nav.dinh .khung::-webkit-scrollbar{display:none}
nav.dinh .hieu{font-weight:800;font-size:17px;letter-spacing:-.4px;
  margin-right:16px;white-space:nowrap;color:var(--chu);display:flex;
  align-items:center;gap:8px}
nav.dinh .hieu:hover{text-decoration:none;color:var(--chu)}
nav.dinh .hieu .bieu{font-size:20px;filter:drop-shadow(0 0 8px rgba(52,211,153,.5))}
nav.dinh a.muc{padding:8px 14px;border-radius:999px;font-size:14.5px;
  font-weight:500;color:var(--chu-mo);white-space:nowrap;
  transition:background .16s,color .16s}
nav.dinh a.muc:hover{background:var(--nen3);color:var(--chu);text-decoration:none}
nav.dinh a.muc[aria-current=page]{
  background:linear-gradient(180deg,rgba(52,211,153,.18),rgba(52,211,153,.08));
  color:var(--nhan2);box-shadow:inset 0 0 0 1px rgba(52,211,153,.22)}

/*--- tieu de trang ---*/
.dau{padding:58px 0 46px;position:relative;overflow:hidden}
.dau::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--vien2) 22%,var(--vien2) 78%,transparent)}
.nhan-nho{display:inline-flex;align-items:center;gap:7px;padding:5px 13px;
  border-radius:999px;font-size:12.5px;font-weight:600;letter-spacing:.4px;
  color:var(--nhan2);background:rgba(52,211,153,.09);
  box-shadow:inset 0 0 0 1px rgba(52,211,153,.2);margin-bottom:16px}
h1{margin:0 0 10px;font-size:clamp(32px,6.4vw,54px);font-weight:800;
  letter-spacing:-1.4px;line-height:1.08;
  background:linear-gradient(170deg,#ffffff 25%,#a7d9c6 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.phu{color:var(--chu-mo);margin:0;font-size:17px}

h2{font-size:24px;font-weight:700;margin:46px 0 16px;letter-spacing:-.5px;
  display:flex;align-items:center;gap:11px}
h2::before{content:"";width:4px;height:21px;border-radius:3px;
  background:linear-gradient(180deg,var(--nhan2),var(--nhan-dam));
  box-shadow:0 0 12px rgba(52,211,153,.55)}
h3{font-size:17px;font-weight:700;margin:22px 0 8px;letter-spacing:-.2px}

/*--- the ---*/
.the{position:relative;background:linear-gradient(180deg,var(--nen2),rgba(13,21,18,.6));
  border:1px solid var(--vien);border-radius:var(--r);padding:24px;margin:18px 0;
  overflow:hidden;transition:border-color .18s,transform .18s}
/* vach gradient o mep tren - dau hieu nhan dien cua ca trang */
.the::before{content:"";position:absolute;top:0;left:22px;width:74px;height:2px;
  background:linear-gradient(90deg,var(--nhan),transparent);border-radius:2px}
.the.noi:hover{border-color:var(--vien2);transform:translateY(-2px)}
.luoi{display:grid;gap:16px}
.luoi.c2{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.luoi.c3{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}

/*--- o icon ---*/
.o-icon{width:48px;height:48px;border-radius:14px;display:flex;
  align-items:center;justify-content:center;font-size:23px;margin-bottom:14px;
  background:linear-gradient(160deg,rgba(52,211,153,.22),rgba(6,95,70,.32));
  box-shadow:var(--quang)}

/*--- trang thai ---*/
.trangthai{display:flex;flex-wrap:wrap;gap:12px 30px;align-items:center;
  justify-content:center;margin-top:30px}
.cham{display:inline-block;width:9px;height:9px;border-radius:50%;
  background:var(--chu-mo);margin-right:9px;vertical-align:middle}
.cham.song{background:var(--nhan);box-shadow:0 0 0 4px rgba(52,211,153,.18);
  animation:tho 2.4s ease-in-out infinite}
.cham.tat{background:var(--do);box-shadow:0 0 0 4px rgba(248,113,113,.18)}
@keyframes tho{0%,100%{box-shadow:0 0 0 4px rgba(52,211,153,.18)}
               50%{box-shadow:0 0 0 8px rgba(52,211,153,.05)}}
@media(prefers-reduced-motion:reduce){.cham.song{animation:none}}
.oso{text-align:center;min-width:82px}
.oso b{display:block;font-size:30px;font-weight:800;letter-spacing:-1px;
  background:linear-gradient(180deg,#fff,#9fd3c0);-webkit-background-clip:text;
  background-clip:text;color:transparent;line-height:1.15}
.oso span{font-size:11px;color:var(--chu-mo2);text-transform:uppercase;
  letter-spacing:1px;font-weight:600}

/*--- o IP ---*/
.ip{display:flex;gap:11px;margin:30px auto 0;max-width:460px}
.ip code{flex:1;background:rgba(0,0,0,.4);border:1px solid var(--vien2);
  border-radius:12px;padding:14px 16px;font-size:20px;text-align:center;
  font-family:var(--mono);letter-spacing:.5px;color:var(--nhan2)}

/*--- nut ---*/
/* Bo tron han (vien thuoc) cho khop voi hub IslePilot - hai ben phai
   cung mot kieu nut, khong thi di qua lai thay lech ngay. */
.nut{background:linear-gradient(180deg,var(--nhan2),var(--nhan-dam));color:#04150e;
  border:0;border-radius:999px;padding:13px 24px;font-size:14.5px;font-weight:700;
  cursor:pointer;font-family:inherit;white-space:nowrap;
  box-shadow:0 6px 20px -6px rgba(16,185,129,.6);transition:filter .16s,transform .12s}
.nut:hover{filter:brightness(1.1)}
.nut:active{transform:translateY(1px)}
.nut:disabled{opacity:.45;cursor:not-allowed}
.nut.phu{background:var(--nen3);color:var(--chu);box-shadow:inset 0 0 0 1px var(--vien2)}
.nut.phu:hover{background:var(--nen4)}
.nut.xong{background:linear-gradient(180deg,#fcd34d,var(--vang))}

/*--- bang ---*/
table{width:100%;border-collapse:collapse;font-size:15px}
th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:1px;
  font-weight:700;color:var(--chu-mo2);padding:0 12px 10px 0;
  border-bottom:1px solid var(--vien)}
td{padding:11px 12px 11px 0;border-bottom:1px solid var(--vien);vertical-align:top}
tbody tr{transition:background .14s}
tbody tr:hover{background:rgba(52,211,153,.035)}
tr:last-child td{border-bottom:0}
.cuon{overflow-x:auto}

/*--- do hiem ---*/
.hiem{display:inline-block;padding:3px 11px;border-radius:999px;font-size:12px;
  font-weight:700;letter-spacing:.3px;white-space:nowrap}
.hiem.thuong{background:rgba(143,168,160,.14);color:#b7cac4;
  box-shadow:inset 0 0 0 1px rgba(143,168,160,.2)}
.hiem.hiem2{background:rgba(125,211,252,.12);color:var(--lam);
  box-shadow:inset 0 0 0 1px rgba(125,211,252,.24)}
.hiem.qui{background:rgba(196,181,253,.12);color:var(--tim);
  box-shadow:inset 0 0 0 1px rgba(196,181,253,.26)}
.hiem.huyen{background:linear-gradient(120deg,rgba(251,191,36,.18),rgba(251,191,36,.06));
  color:var(--vang);box-shadow:inset 0 0 0 1px rgba(251,191,36,.36),
  0 0 16px -4px rgba(251,191,36,.4)}

/*--- hop nhac ---*/
.canh{border-left:3px solid var(--vang);background:rgba(251,191,36,.06);
  padding:15px 18px;border-radius:0 12px 12px 0;margin:18px 0;font-size:15px}
.canh.xanh{border-left-color:var(--nhan);background:rgba(52,211,153,.06)}
.canh.do{border-left-color:var(--do);background:rgba(248,113,113,.07)}

/*--- details ---*/
details{border:1px solid var(--vien);border-radius:12px;padding:0 18px;margin:10px 0;
  background:var(--nen2);transition:border-color .18s}
details:hover{border-color:var(--vien2)}
details[open]{padding-bottom:6px}
summary{cursor:pointer;padding:14px 0;font-weight:600;font-size:15.5px}
summary::marker{color:var(--nhan)}
details p{color:var(--chu-mo);font-size:15px}
details p:last-child{margin-bottom:14px}

/*--- buoc ---*/
ol.buoc{counter-reset:b;list-style:none;padding:0;margin:0}
ol.buoc li{counter-increment:b;position:relative;padding:0 0 20px 46px;
  border-left:1px solid var(--vien);margin-left:15px}
ol.buoc li:last-child{border-left-color:transparent;padding-bottom:0}
ol.buoc li::before{content:counter(b);position:absolute;left:-15px;top:-2px;
  width:30px;height:30px;border-radius:50%;
  background:linear-gradient(160deg,var(--nen4),var(--nen2));
  box-shadow:inset 0 0 0 1px var(--vien2);color:var(--nhan2);
  font-size:13.5px;font-weight:800;display:flex;align-items:center;
  justify-content:center}

/*--- chan trang ---*/
footer{margin-top:64px;padding:30px 0 46px;border-top:1px solid var(--vien);
  color:var(--chu-mo2);font-size:13px;text-align:center}
footer a{color:var(--chu-mo);text-decoration:underline}

.mo{color:var(--chu-mo)}
.nho{font-size:13.5px}
.giua{text-align:center}
.gia{font-size:26px;font-weight:800;letter-spacing:-.8px;color:var(--nhan2)}
@media(max-width:540px){
  .ip{flex-direction:column}
  .dau{padding:40px 0 34px}
  h2{font-size:21px}
}

/*=====================================================================
  Bang xep hang
=====================================================================*/
.thanh-loc{position:sticky;top:62px;z-index:40;padding:14px 0 12px;margin:0 -20px;
  padding-left:20px;padding-right:20px;background:rgba(7,11,9,.9);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--vien)}

/*--- hang tab ---*/
.the-tab{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.the-tab::-webkit-scrollbar{display:none}
.the-tab .tab{flex:0 0 auto;border:0;cursor:pointer;font-family:inherit;
  padding:8px 15px;border-radius:999px;font-size:14px;font-weight:600;
  color:var(--chu-mo);background:var(--nen2);
  box-shadow:inset 0 0 0 1px var(--vien);white-space:nowrap;
  transition:background .16s,color .16s}
.the-tab .tab:hover{background:var(--nen3);color:var(--chu)}
.the-tab .tab.chon{color:#04150e;background:linear-gradient(180deg,var(--nhan2),var(--nhan-dam));
  box-shadow:0 5px 16px -6px rgba(16,185,129,.7)}
/* dau ~ = so lieu suy doan, khong phai do truc tiep */
.the-tab .tab .dau-suy{font-style:normal;font-weight:800;opacity:.55;margin-left:5px;
  font-size:13px}

/*--- hang bo loc ---*/
.hang-loc{display:flex;flex-wrap:wrap;gap:10px;margin-top:11px}
.o-loc{display:flex;align-items:center;gap:8px;background:var(--nen2);
  border:1px solid var(--vien);border-radius:11px;padding:6px 12px;flex:0 1 auto}
.o-loc.lon{flex:1 1 200px}
.o-loc>span{font-size:11px;text-transform:uppercase;letter-spacing:.9px;
  font-weight:700;color:var(--chu-mo2);white-space:nowrap}
.o-loc select,.o-loc input{background:transparent;border:0;color:var(--chu);
  font-family:inherit;font-size:14.5px;padding:5px 0;min-width:0;width:100%;
  outline:none}
.o-loc select option,.o-loc select optgroup{background:var(--nen2);color:var(--chu)}
.o-loc:focus-within{border-color:var(--vien2);box-shadow:0 0 0 3px rgba(52,211,153,.1)}

/*--- danh sach xep hang ---*/
ol.bxh{list-style:none;margin:16px 0 0;padding:0;counter-reset:none}
ol.bxh .dong{display:flex;align-items:center;gap:13px;padding:11px 14px;
  border:1px solid var(--vien);border-radius:13px;margin-bottom:7px;cursor:pointer;
  background:linear-gradient(180deg,var(--nen2),rgba(13,21,18,.55));
  transition:border-color .16s,transform .14s,background .16s}
ol.bxh .dong:hover{border-color:var(--vien2);transform:translateX(2px);
  background:var(--nen3)}
ol.bxh .hang{flex:0 0 34px;text-align:center;font-weight:800;font-size:15px;
  color:var(--chu-mo2);font-variant-numeric:tabular-nums}
ol.bxh .top1 .hang,ol.bxh .top2 .hang,ol.bxh .top3 .hang{font-size:19px}
ol.bxh .top1{border-color:rgba(251,191,36,.4);
  box-shadow:0 0 26px -10px rgba(251,191,36,.55)}
ol.bxh .top1 .hang{color:var(--vang)}
ol.bxh .top2{border-color:rgba(203,213,225,.3)}
ol.bxh .top2 .hang{color:#cbd5e1}
ol.bxh .top3{border-color:rgba(217,150,90,.3)}
ol.bxh .top3 .hang{color:#d9965a}

.av{flex:0 0 38px;width:38px;height:38px;border-radius:12px;display:flex;
  align-items:center;justify-content:center;font-size:13px;font-weight:800;
  letter-spacing:.5px;color:#04150e;
  background:linear-gradient(160deg,hsl(var(--h,150) 62% 68%),hsl(var(--h,150) 55% 44%));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.av.to{width:54px;height:54px;flex-basis:54px;border-radius:16px;font-size:18px}

ol.bxh .ten{flex:1 1 auto;min-width:0;font-weight:600;font-size:15.5px;
  display:flex;flex-direction:column;gap:1px}
ol.bxh .ten,ol.bxh .ten .phu-so{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
ol.bxh .ten .phu-so{font-size:12px;font-weight:500;color:var(--chu-mo2);
  letter-spacing:.2px}
ol.bxh .gt{flex:0 0 auto;text-align:right;font-size:21px;font-weight:800;
  letter-spacing:-.6px;color:var(--nhan2);font-variant-numeric:tabular-nums;
  display:flex;flex-direction:column;line-height:1.15}
ol.bxh .gt i{font-style:normal;font-size:10.5px;font-weight:600;letter-spacing:1px;
  text-transform:uppercase;color:var(--chu-mo2)}

/*--- ho so nguoi choi ---*/
.man-che{position:fixed;inset:0;z-index:80;background:rgba(3,6,5,.72);
  backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;
  padding:20px;overflow-y:auto}
.man-che .hop{position:relative;width:100%;max-width:600px;max-height:88vh;
  overflow-y:auto;background:var(--nen2);border:1px solid var(--vien2);
  border-radius:var(--r);padding:24px}
.man-che .dong-lai{position:absolute;top:14px;right:14px;width:32px;height:32px;
  border:0;border-radius:10px;cursor:pointer;font-family:inherit;font-size:14px;
  color:var(--chu-mo);background:var(--nen3)}
.man-che .dong-lai:hover{background:var(--nen4);color:var(--chu)}
.dinh-hs{display:flex;align-items:center;gap:14px;margin-bottom:18px;padding-right:34px}
.luoi-so{display:grid;grid-template-columns:repeat(auto-fit,minmax(92px,1fr));
  gap:12px;padding:16px 0;border-top:1px solid var(--vien);
  border-bottom:1px solid var(--vien)}
.luoi-so .oso b{font-size:20px}
.man-che h4{font-size:13px;text-transform:uppercase;letter-spacing:1px;
  color:var(--chu-mo2);margin:20px 0 8px}

@media(max-width:540px){
  .thanh-loc{top:0}
  ol.bxh .dong{gap:10px;padding:10px}
  ol.bxh .hang{flex-basis:24px}
  .av{flex-basis:32px;width:32px;height:32px;font-size:12px}
  ol.bxh .gt{font-size:18px}
  ol.bxh .ten{font-size:14.5px}
}

/*--- ho so: vien loai + dong killfeed ---*/
.vien-loai{display:flex;flex-wrap:wrap;gap:7px}
.vien{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;
  border-radius:999px;font-size:13px;background:var(--nen3);
  box-shadow:inset 0 0 0 1px var(--vien)}
.vien b{color:var(--nhan2);font-variant-numeric:tabular-nums}
ul.dong-kf{list-style:none;margin:0;padding:0;font-size:14px}
ul.dong-kf li{display:flex;align-items:center;gap:7px;padding:8px 0;
  border-bottom:1px solid var(--vien)}
ul.dong-kf li:last-child{border-bottom:0}
ul.dong-kf .thang{color:var(--nhan2)}
ul.dong-kf .thua{color:var(--do)}
ul.dong-kf .khi{margin-left:auto;font-size:12px;color:var(--chu-mo2);
  white-space:nowrap}
ol.bxh .dong:focus-visible{outline:2px solid var(--nhan);outline-offset:2px}

/*=====================================================================
  Killfeed
=====================================================================*/
ul.kf{list-style:none;margin:16px 0 0;padding:0}
ul.kf .kf-d{display:flex;align-items:center;gap:12px;padding:10px 14px;
  border:1px solid var(--vien);border-radius:13px;margin-bottom:7px;
  background:linear-gradient(180deg,var(--nen2),rgba(13,21,18,.55))}
ul.kf .kf-d.mt{border-style:dashed;opacity:.86}
/* vach sang o mep trai cho tran vua xay ra */
ul.kf .kf-d.moi{border-color:var(--vien2);box-shadow:-3px 0 0 0 var(--nhan)}
ul.kf .ben{display:flex;flex-direction:column;min-width:0;flex:1 1 0}
ul.kf .ben b{font-size:15px;font-weight:600;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
ul.kf .ben.nan{text-align:right;align-items:flex-end}
ul.kf .mui{flex:0 0 auto;font-size:15px;color:var(--do);opacity:.85}
ul.kf .kf-d.mt .mui{color:var(--chu-mo2)}
ul.kf .av.mt-av{background:linear-gradient(160deg,#3d4a46,#22302b);color:var(--chu-mo)}
ul.kf .khi{flex:0 0 auto;display:flex;flex-direction:column;text-align:right;
  font-size:12px;color:var(--chu-mo2);white-space:nowrap;min-width:96px}
ul.kf .khi i{font-style:normal;font-size:10.5px;opacity:.6}
@media(max-width:600px){
  ul.kf .kf-d{flex-wrap:wrap;gap:8px}
  ul.kf .khi{width:100%;flex-direction:row;justify-content:space-between;
    min-width:0;order:9}
  ul.kf .av{flex-basis:30px;width:30px;height:30px;font-size:11px}
}

/*=====================================================================
  Danh sach ban
=====================================================================*/
ol.bxh.ban .dong{cursor:default}
ol.bxh.ban .dong:hover{transform:none;background:var(--nen2)}
ol.bxh .ly-do{flex:1 1 0;min-width:0;display:flex;flex-direction:column;
  font-size:14px;color:var(--chu-mo)}
ol.bxh .ly-do i{font-style:normal;font-size:11.5px;color:var(--chu-mo2)}
ol.bxh .han{flex:0 0 auto;font-size:12px;font-weight:700;padding:4px 11px;
  border-radius:999px;white-space:nowrap;background:rgba(251,191,36,.12);
  color:var(--vang);box-shadow:inset 0 0 0 1px rgba(251,191,36,.3)}
ol.bxh .han.vv{background:rgba(248,113,113,.12);color:var(--do);
  box-shadow:inset 0 0 0 1px rgba(248,113,113,.3)}
@media(max-width:600px){
  ol.bxh.ban .dong{flex-wrap:wrap}
  ol.bxh .ly-do{flex-basis:100%;order:9}
}

/*=====================================================================
  Ban do
=====================================================================*/
.nhom-nut{display:flex;gap:5px}
.nut-lop{border:0;cursor:pointer;font-family:inherit;font-size:13px;
  font-weight:600;padding:6px 11px;border-radius:9px;color:var(--chu-mo);
  background:var(--nen3);box-shadow:inset 0 0 0 1px var(--vien);
  transition:background .15s,color .15s}
.nut-lop:hover{background:var(--nen4);color:var(--chu)}
.nut-lop.chon{color:#04150e;background:linear-gradient(180deg,var(--nhan2),var(--nhan-dam));
  box-shadow:none}

.khung-bd{position:relative;margin:16px 0;border:1px solid var(--vien);
  border-radius:var(--r);overflow:hidden;background:#05100c;
  aspect-ratio:1/1;max-height:76vh;cursor:grab;touch-action:none}
.khung-bd.dang-keo{cursor:grabbing}
#lop-anh{position:absolute;inset:0;transform-origin:0 0;will-change:transform}
#lop-anh img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;pointer-events:none;-webkit-user-drag:none}
#i-water{mix-blend-mode:screen;opacity:.85}
#i-land{opacity:.55}
.dang-tai{position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;z-index:3;color:var(--chu-mo);font-size:14px;
  background:var(--nen2)}
.dang-tai.hong{color:var(--do)}
.toa-do{position:absolute;right:10px;bottom:10px;z-index:4;font-family:var(--mono);
  font-size:11.5px;color:var(--nhan2);background:rgba(0,0,0,.55);
  padding:5px 10px;border-radius:8px;pointer-events:none}

#cham-nguoi{position:absolute;inset:0;pointer-events:none}
.cham-nc{position:absolute;transform:translate(-50%,-50%);display:flex;
  flex-direction:column;align-items:center;gap:2px}
.cham-nc i{width:9px;height:9px;border-radius:50%;background:var(--nhan);
  box-shadow:0 0 0 2px rgba(4,21,14,.8), 0 0 10px rgba(52,211,153,.9)}
.cham-nc b{font-size:9.5px;font-weight:700;color:var(--chu);
  background:rgba(4,21,14,.75);padding:1px 5px;border-radius:5px;
  white-space:nowrap}

/*=====================================================================
  Trang Garage - cua vao panel IslePilot
=====================================================================*/
.tt-panel{display:flex;align-items:flex-start;gap:4px;flex-wrap:wrap;
  margin-top:24px;padding:12px 16px;border-radius:12px;font-size:14.5px;
  line-height:1.55;background:var(--nen2);border:1px solid var(--vien)}
.tt-panel .cham{margin-top:7px;flex:0 0 auto}
.tt-panel.tt-on{border-color:rgba(52,211,153,.3);background:rgba(52,211,153,.06)}
.tt-panel.tt-cham{border-color:rgba(251,191,36,.35);background:rgba(251,191,36,.07)}
.tt-panel.tt-hong{border-color:rgba(248,113,113,.35);background:rgba(248,113,113,.07)}

/* The muc: ca the la mot lien ket, khong chi rieng chu */
a.the-muc-1{display:block;text-decoration:none;color:inherit}
a.the-muc-1:hover{text-decoration:none;color:inherit}
a.the-muc-1 h3{margin:0 0 6px;display:flex;align-items:center;gap:8px;
  flex-wrap:wrap}
a.the-muc-1 p{margin-bottom:0}
a.the-muc-1 .mui-ra{color:var(--chu-mo2);font-size:13px;font-weight:400}
.nhan-cho{margin-left:auto;font-size:11px;font-weight:700;letter-spacing:.4px;
  padding:2px 9px;border-radius:999px;white-space:nowrap;
  background:rgba(251,191,36,.14);color:var(--vang);
  box-shadow:inset 0 0 0 1px rgba(251,191,36,.28)}
.nhan-cho.hong{background:rgba(248,113,113,.14);color:var(--do);
  box-shadow:inset 0 0 0 1px rgba(248,113,113,.3)}
.nhan-cho.nhanh{background:rgba(52,211,153,.13);color:var(--nhan2);
  box-shadow:inset 0 0 0 1px rgba(52,211,153,.26)}

/*=====================================================================
  Trang "Dino cua toi"
=====================================================================*/
.luoi-dino{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:12px;margin:4px 0 20px}
.o-dino{background:var(--nen3);border-radius:12px;padding:11px 14px;
  box-shadow:inset 0 0 0 1px var(--vien)}
.o-dino span{display:block;font-size:11px;text-transform:uppercase;
  letter-spacing:.9px;font-weight:700;color:var(--chu-mo2)}
.o-dino b{font-size:17px;font-weight:700;letter-spacing:-.3px}

.chi-so{margin:14px 0}
.ten-cs{display:flex;justify-content:space-between;align-items:baseline;
  font-size:13.5px;margin-bottom:6px;color:var(--chu-mo)}
.ten-cs b{color:var(--chu);font-variant-numeric:tabular-nums;font-size:13px}
/* rnh = ranh: mang chua thanh do */
.rnh{height:9px;border-radius:999px;background:rgba(0,0,0,.42);overflow:hidden;
  box-shadow:inset 0 0 0 1px var(--vien)}
.rnh i{display:block;height:100%;border-radius:999px;
  transition:width .45s cubic-bezier(.4,0,.2,1)}
.rnh i.tt   {background:linear-gradient(90deg,var(--nhan-dam),var(--nhan2))}
.rnh i.mau  {background:linear-gradient(90deg,#b91c1c,#f87171)}
.rnh i.doi  {background:linear-gradient(90deg,#b45309,#fbbf24)}
.rnh i.khat {background:linear-gradient(90deg,#0369a1,#7dd3fc)}
.rnh i.prime{background:linear-gradient(90deg,#7c3aed,#c4b5fd)}
@media(prefers-reduced-motion:reduce){.rnh i{transition:none}}
.dinh-hs .nut.phu{padding:8px 14px;font-size:13px}

/*--- trang "cua toi": bang giao dich + nhan ---*/
.cong{color:var(--nhan2);font-weight:700;font-variant-numeric:tabular-nums}
.tru{color:var(--do);font-weight:700;font-variant-numeric:tabular-nums}
.xong-nv{color:var(--nhan2);font-weight:700;font-size:12px}

/*=====================================================================
  BATTLEPASS + NHIEM VU
---------------------------------------------------------------------
  Dung lai bo cuc cua IslePilot (xem bat.html luu ngay 25/08/2026):
  mot DAI NGANG cuon duoc, cot trai dinh tai cho ghi ten hai nhanh,
  moi cap la mot cot gom the Free o tren va the VIP o duoi.

  Hai animation lay nguyen ten cua ho de sau nay doi chieu de:
    bp-rise    - the tro len khi hien ra, do tre tang dan theo cap
    bp-shimmer - vet sang chay qua thanh XP

  CA HAI DEU TAT khi may bao prefers-reduced-motion. Nguoi bi say
  chuyen dong ma gap 100 the cung bay len mot luc thi rat kho chiu.
=====================================================================*/
@keyframes bp-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes bp-shimmer{to{background-position:200% 0}}

.bp-dau{position:relative;overflow:hidden;border:1px solid var(--vien);
  border-radius:var(--r);background:var(--nen2);padding:22px}
/* Quang sang goc phai - cua ho la bg-primary/15 blur-3xl */
.bp-dau::after{content:"";position:absolute;right:-64px;top:-64px;
  width:224px;height:224px;border-radius:50%;pointer-events:none;
  background:rgba(52,211,153,.15);filter:blur(48px)}
.bp-hang{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:24px}
.bp-cap-to{display:flex;align-items:baseline;gap:8px}
.bp-cap-to b{font-size:60px;font-weight:900;line-height:1.05;
  font-variant-numeric:tabular-nums;
  background:linear-gradient(135deg,var(--nhan2),rgba(52,211,153,.45));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.bp-cap-to span{font-size:14px;font-weight:600;color:var(--chu-mo)}
.bp-xp{flex:1;min-width:224px}
.bp-xp-nhan{display:flex;justify-content:space-between;align-items:flex-end;
  font-size:12.5px}
.bp-xp-nhan b{font-weight:600}
.bp-xp-nhan span{font-variant-numeric:tabular-nums;color:var(--chu-mo)}
.bp-rnh{margin-top:8px;height:14px;border-radius:999px;background:var(--nen4);
  box-shadow:inset 0 0 0 1px var(--vien2);overflow:hidden}
.bp-rnh i{position:relative;display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,rgba(52,211,153,.7),var(--nhan));
  box-shadow:0 0 14px rgba(52,211,153,.4);transition:width .5s;overflow:hidden}
.bp-rnh i::after{content:"";position:absolute;inset:0;
  background-image:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.35) 50%,transparent 60%);
  background-size:200% 100%;animation:bp-shimmer 2.4s ease-in-out infinite}

/* Bang bao nhanh VIP - cua ho dung mau ho phach */
.bp-vip{position:relative;overflow:hidden;margin-top:16px;padding:18px;
  border:1px solid rgba(251,191,36,.3);border-radius:var(--r);
  background:linear-gradient(135deg,rgba(251,191,36,.1),transparent 60%)}
.bp-vip h4{margin:0 0 4px;font-size:15px;color:var(--vang)}
.bp-vip p{margin:0;font-size:13.5px;color:var(--chu-mo)}

/* Dai phan thuong */
.bp-dai{display:flex;overflow-x:auto;padding:8px 0 12px;
  scroll-snap-type:x proximity;
  scrollbar-width:thin;scrollbar-color:rgba(52,211,153,.4) transparent}
.bp-dai::-webkit-scrollbar{height:8px}
.bp-dai::-webkit-scrollbar-track{background:rgba(30,47,40,.4);border-radius:999px}
.bp-dai::-webkit-scrollbar-thumb{background:rgba(52,211,153,.4);border-radius:999px}
.bp-dai::-webkit-scrollbar-thumb:hover{background:rgba(52,211,153,.6)}

/* Cot ten hai nhanh - dinh tai cho khi cuon ngang */
.bp-ten{position:sticky;left:0;z-index:2;display:flex;flex-direction:column;
  gap:8px;flex-shrink:0;padding-right:6px;background:var(--nen)}
.bp-ten .bp-dem{height:36px}
.bp-ten .bp-o{display:flex;height:112px;align-items:center}
.bp-nhan-free,.bp-nhan-vip{border-radius:8px;padding:4px 8px;font-size:10px;
  font-weight:700;text-transform:uppercase;letter-spacing:1.5px;white-space:nowrap}
.bp-nhan-free{background:var(--nen4);color:var(--chu-mo)}
.bp-nhan-vip{color:var(--vang);box-shadow:inset 0 0 0 1px rgba(251,191,36,.3);
  background:linear-gradient(90deg,rgba(251,191,36,.2),rgba(217,119,6,.2))}

.bp-cot{display:flex;flex-direction:column;gap:8px;flex-shrink:0;
  width:160px;margin-left:12px;scroll-snap-align:center;
  animation:bp-rise .45s cubic-bezier(.16,1,.3,1) backwards}
.bp-cot:first-of-type{margin-left:16px}
/* So cap, hai ben la duong noi - cho nguoi ta thay day la mot DAI lien tuc */
.bp-so{display:flex;height:36px;align-items:center}
.bp-so i{flex:1;height:2px;background:var(--vien2)}
.bp-so.qua i{background:rgba(52,211,153,.6)}
.bp-so b{display:flex;width:36px;height:36px;align-items:center;justify-content:center;
  border-radius:10px;font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;
  background:var(--nen4);color:var(--chu-mo)}
.bp-so.qua b{background:var(--nhan);color:#052e20}
.bp-o{position:relative;display:flex;height:112px;width:160px;flex-direction:column;
  align-items:center;justify-content:center;gap:8px;padding:0 10px;
  border:1px solid var(--vien);border-radius:12px;text-align:center;
  font-size:12.5px;line-height:1.35;color:var(--chu-mo);transition:all .2s}
.bp-o.mo{border-color:rgba(52,211,153,.4);background:rgba(52,211,153,.06)}
.bp-o.mo b{color:var(--nhan2)}
.bp-o.vip{border-color:rgba(251,191,36,.28)}
.bp-o.vip.mo{border-color:rgba(251,191,36,.5);background:rgba(251,191,36,.07)}
.bp-o.vip.mo b{color:var(--vang)}
.bp-o b{font-size:15px;font-weight:700;color:var(--chu)}
.bp-o .bp-moc{font-size:11px;font-weight:600;color:var(--chu-mo2)}
.bp-tick{position:absolute;right:-6px;top:-6px;display:flex;width:20px;height:20px;
  align-items:center;justify-content:center;border-radius:50%;
  background:var(--nhan-dam);color:#fff;font-size:11px;font-weight:700}

/*--- The nhiem vu ---*/
.nv-luoi{display:grid;gap:12px}
.nv{position:relative;overflow:hidden;display:flex;gap:14px;padding:16px;
  border:1px solid var(--vien);border-radius:var(--r);background:var(--nen2);
  animation:bp-rise .45s cubic-bezier(.16,1,.3,1) backwards}
.nv.xong{border-color:rgba(52,211,153,.4);background:rgba(52,211,153,.05)}
.nv-icon{flex-shrink:0;display:flex;width:44px;height:44px;align-items:center;
  justify-content:center;border-radius:12px;background:var(--nen4);font-size:20px}
.nv.xong .nv-icon{background:rgba(52,211,153,.16)}
.nv-than{flex:1;min-width:0}
.nv-dau{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.nv-dau h4{margin:0;font-size:15.5px}
.nv-mo{margin:4px 0 0;font-size:13px;color:var(--chu-mo)}
.nv-rnh{margin-top:10px;height:8px;border-radius:999px;background:var(--nen4);overflow:hidden}
.nv-rnh i{display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,rgba(52,211,153,.7),var(--nhan));transition:width .5s}
.nv-chan{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px;
  font-size:12px;font-variant-numeric:tabular-nums}
.the-nho{border-radius:999px;padding:3px 10px;font-size:11.5px;font-weight:600;
  background:var(--nen4);color:var(--chu-mo)}
.the-nho.xanh{background:rgba(52,211,153,.14);color:var(--nhan2)}
.the-nho.vang{background:rgba(251,191,36,.14);color:var(--vang)}
.the-nho.tim{background:rgba(196,181,253,.14);color:var(--tim)}

@media(prefers-reduced-motion:reduce){
  .bp-cot,.nv{animation:none}
  .bp-rnh i::after{animation:none}
}
@media(max-width:540px){
  .bp-cap-to b{font-size:44px}
  .bp-cot,.bp-o{width:132px}
}

/*=====================================================================
  HE MAU DO HIEM - kieu cac trang game
---------------------------------------------------------------------
  Truoc day moi cap battlepass deu mot mau xanh nhu nhau, nen cap 50
  nhin y het cap 51. Mat het cam giac "co gang len co cai dang doi".

  Bon bac, mau lay theo quy uoc quen thuoc cua game ban sung / gacha:
    hiem-1  xam   - thuong
    hiem-2  lam   - moc 5
    hiem-3  tim   - moc 10
    hiem-4  vang  - moc 25/50/75/100, co them vet sang chay qua

  Chi to bang VIEN va NEN, khong doi chu, de van doc duoc tren nen toi.
=====================================================================*/
@keyframes hiem-sang{
  0%,100%{box-shadow:0 0 0 1px rgba(251,191,36,.4), 0 0 18px -6px rgba(251,191,36,.5)}
  50%    {box-shadow:0 0 0 1px rgba(251,191,36,.7), 0 0 26px -4px rgba(251,191,36,.8)}
}
.bp-o.hiem-1{border-color:var(--vien)}
.bp-o.hiem-2{border-color:rgba(125,211,252,.34);
  background:linear-gradient(180deg,rgba(125,211,252,.07),transparent)}
.bp-o.hiem-2 b{color:var(--lam)}
.bp-o.hiem-3{border-color:rgba(196,181,253,.36);
  background:linear-gradient(180deg,rgba(196,181,253,.08),transparent)}
.bp-o.hiem-3 b{color:var(--tim)}
.bp-o.hiem-4{border-color:rgba(251,191,36,.5);
  background:linear-gradient(180deg,rgba(251,191,36,.12),transparent)}
.bp-o.hiem-4 b{color:var(--vang)}
/* Chi cap DA DAT moi nhap nhay - chua dat ma nhay thi thanh quang cao */
.bp-o.hiem-4.mo{animation:hiem-sang 2.6s ease-in-out infinite}
.bp-so.moc-4 b{box-shadow:0 0 0 1px rgba(251,191,36,.45)}

/* Vach mau ben trai the nhiem vu - nhin phat biet quest nao dang gia */
.nv{border-left-width:3px}
.nv.hiem-2{border-left-color:var(--lam)}
.nv.hiem-3{border-left-color:var(--tim)}
.nv.hiem-4{border-left-color:var(--vang)}

/* Vien sang chay quanh the khi ro chuot - hieu ung quen thuoc cua
   cac trang ban skin. Dung mask de chi to VIEN chu khong to ca nen. */
.the.noi:hover{border-color:transparent;
  background:
    linear-gradient(180deg,var(--nen2),rgba(13,21,18,.6)) padding-box,
    linear-gradient(135deg,rgba(52,211,153,.55),rgba(125,211,252,.3),rgba(52,211,153,.1)) border-box;
  box-shadow:0 12px 34px -18px rgba(16,185,129,.55)}
.nv:hover{transform:translateY(-2px);transition:transform .18s}

/* Luoi mo phia sau phan dau trang - dau hieu thi giac cua cac trang
   game, nhung de rat mo de khong lam kho doc chu. */
.dau{position:relative}
.dau::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;
  background-image:
    linear-gradient(rgba(52,211,153,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(52,211,153,.05) 1px, transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(70% 60% at 50% 0%, #000, transparent);
  mask-image:radial-gradient(70% 60% at 50% 0%, #000, transparent)}

@media(prefers-reduced-motion:reduce){
  .bp-o.hiem-4.mo{animation:none}
  .nv:hover,.the.noi:hover{transform:none}
}

/*=====================================================================
  BUC TRAO GIAI + NEN DONG - lam trang co khong khi cua kenh game
---------------------------------------------------------------------
  LAM HOAN TOAN BANG CSS. Ba trang bang xep hang / killfeed / trang chu
  deu do JS khac nhau ve ra; sua JS thi phai sua ba cho va de vo mot
  cho ma khong ai phat hien. Bam vao class co san (.top1 .top2 .top3)
  thi khong the lam hong du lieu.
=====================================================================*/
@keyframes bxh-quet{ to{ transform:translateX(260%) } }
@keyframes nen-troi{
  0%,100%{ transform:translate3d(0,0,0) scale(1) }
  50%    { transform:translate3d(-3%,2%,0) scale(1.06) }
}

/* Huy chuong dat TREN so thu tu, khong thay the - van phai doc duoc
   hang may khi nhin nhanh. */
ol.bxh .top1 .hang::before,
ol.bxh .top2 .hang::before,
ol.bxh .top3 .hang::before{
  display:block;font-size:16px;line-height:1;margin-bottom:1px}
ol.bxh .top1 .hang::before{content:"\1F947"}
ol.bxh .top2 .hang::before{content:"\1F948"}
ol.bxh .top3 .hang::before{content:"\1F949"}

ol.bxh .top1,ol.bxh .top2,ol.bxh .top3{padding:15px 14px}
ol.bxh .top1 .gt{font-size:25px}
ol.bxh .top1{position:relative;overflow:hidden;
  background:linear-gradient(180deg,rgba(251,191,36,.09),rgba(13,21,18,.55))}
/* Vet sang quet ngang o hang nhat. Cham (5,5s) va rat mo - de nhanh
   thi ca danh sach nhay giat, nhin moi mat. */
ol.bxh .top1::after{content:"";position:absolute;top:0;left:-40%;width:34%;height:100%;
  pointer-events:none;transform:translateX(0);
  background:linear-gradient(100deg,transparent,rgba(251,191,36,.14),transparent);
  animation:bxh-quet 5.5s ease-in-out infinite}
ol.bxh .top2{background:linear-gradient(180deg,rgba(203,213,225,.06),rgba(13,21,18,.55))}
ol.bxh .top3{background:linear-gradient(180deg,rgba(217,150,90,.06),rgba(13,21,18,.55))}

/* Hai quang sang troi cham sau tieu de trang. Dat z-index:-1 va
   pointer-events:none nen khong bao gio che mat chu hay chan bam nut. */
.dau::before{content:"";position:absolute;inset:-20% -10% auto -10%;height:130%;
  z-index:-1;pointer-events:none;
  background:
    radial-gradient(38% 60% at 22% 20%, rgba(52,211,153,.18), transparent 70%),
    radial-gradient(34% 55% at 78% 32%, rgba(125,211,252,.12), transparent 70%);
  animation:nen-troi 18s ease-in-out infinite}

/* O so lieu: cho con so ra dang so cua bang dieu khien game */
.oso b{font-variant-numeric:tabular-nums;letter-spacing:-.5px}
.trangthai .oso{transition:transform .18s}
.trangthai .oso:hover{transform:translateY(-2px)}

@media(prefers-reduced-motion:reduce){
  ol.bxh .top1::after,.dau::before{animation:none}
  .trangthai .oso:hover{transform:none}
}