/* TAIWAN88 Portal — cổng game web. Bảng màu xanh sáng. */
:root{
  --xanh:#0e9fe0; --xanh-dam:#0a7fb8; --xanh-nhat:#e8f6fd; --xanh-vien:#bde3f5;
  --cam:#ff7a18; --cam-dam:#e8620a; --vang:#ffc107; --do:#e53935; --luc:#22a565;
  --nen:#eef7fc; --the:#ffffff; --chu:#14313f; --chu-mo:#6a8797;
  --bong:0 2px 10px rgba(14,80,120,.10); --bo:10px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--nen);color:var(--chu);font:14px/1.5 -apple-system,"Segoe UI",Roboto,Arial,sans-serif}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:1300px;margin:0 auto;padding:0 12px}
.hide{display:none !important}

/* ── 1. Thanh trên ─────────────────────────────── */
.topbar{background:#fff;border-bottom:1px solid #dceef8}
.topbar .wrap{display:flex;align-items:center;gap:18px;min-height:76px}
.logo{display:flex;flex-direction:column;line-height:1}
.logo b{font-size:30px;color:var(--xanh);letter-spacing:.5px}
.logo b i{color:var(--cam);font-style:normal}
.logo small{font-size:10px;color:var(--chu-mo);letter-spacing:2.4px;margin-top:4px}
.tienich{display:flex;gap:6px;margin-left:auto}
.tienich a{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:6px 12px;border-radius:8px;font-size:12px;color:var(--chu-mo)}
.tienich a:hover{background:var(--xanh-nhat);color:var(--xanh-dam)}
.tienich svg{width:26px;height:26px}
.tienich .badge{position:absolute;top:-2px;right:2px;background:var(--do);color:#fff;
  font-size:10px;font-weight:700;padding:1px 5px;border-radius:9px}
.dongho{font-size:12px;color:var(--chu-mo);text-align:right;min-width:150px}
.dongho .co{margin-left:5px}

/* khối tài khoản */
.taikhoan{display:flex;align-items:center;gap:8px}
.taikhoan input{width:132px;height:36px;padding:0 10px;border:1px solid #cfe4ef;border-radius:6px;font-size:13px}
.taikhoan input:focus{outline:none;border-color:var(--xanh)}
.btn{border:0;border-radius:6px;height:36px;padding:0 16px;font-size:13px;font-weight:700;
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap}
.btn-xanh{background:var(--xanh);color:#fff}
.btn-xanh:hover{background:var(--xanh-dam)}
.btn-cam{background:var(--cam);color:#fff}
.btn-cam:hover{background:var(--cam-dam)}
.btn-vien{background:#fff;color:var(--xanh);border:1px solid var(--xanh)}
.btn-luc{background:var(--luc);color:#fff}
.btn-xam{background:#eef3f6;color:var(--chu)}
.btn:disabled{opacity:.55;cursor:not-allowed}
.badan{display:flex;align-items:center;gap:10px}
.badan .ten{font-weight:700}
.badan .sodu{color:var(--cam);font-weight:800}
.lammoi{background:none;border:0;cursor:pointer;color:var(--xanh);font-size:16px;padding:2px}

/* ── 2. Điều hướng ─────────────────────────────── */
.nav{background:linear-gradient(180deg,#12a9e8,#0b8ac6);position:sticky;top:0;z-index:60;box-shadow:0 2px 8px rgba(6,70,105,.25)}
.nav .wrap{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
.nav .wrap::-webkit-scrollbar{display:none}
.nav a{position:relative;display:flex;align-items:center;gap:7px;padding:13px 15px;color:#dff2fb;
  font-size:13px;font-weight:700;white-space:nowrap;border-bottom:3px solid transparent}
.nav a:hover{color:#fff;background:rgba(255,255,255,.10)}
.nav a.on{color:#fff;border-bottom-color:var(--vang)}
.nav svg{width:20px;height:20px}
.nav .hot{position:absolute;top:4px;left:26px;background:var(--do);color:#fff;font-size:9px;
  padding:0 4px;border-radius:6px;line-height:14px}

/* ── 3. Banner ─────────────────────────────────── */
.banner{position:relative;margin:14px 0;border-radius:14px;overflow:hidden;box-shadow:var(--bong)}
.slide{display:none;min-height:270px;padding:36px 44px;color:#fff;position:relative}
.slide.on{display:flex;flex-direction:column;justify-content:center}
.slide h2{margin:0 0 8px;font-size:40px;line-height:1.1;text-shadow:0 3px 10px rgba(0,0,0,.22)}
.slide p{margin:0 0 18px;font-size:16px;opacity:.95;max-width:560px}
.slide .to{font-size:56px;font-weight:900;color:var(--vang);text-shadow:0 4px 12px rgba(0,0,0,.28)}
.slide{background:#0a1c34}
.s1{background:linear-gradient(90deg,rgba(8,20,40,.96) 0%,rgba(8,20,40,.55) 38%,rgba(8,20,40,0) 62%),url(/portal/img/s1.jpg);background-size:cover;background-position:center right}
.s2{background:linear-gradient(90deg,rgba(8,20,40,.96) 0%,rgba(8,20,40,.55) 38%,rgba(8,20,40,0) 62%),url(/portal/img/s2.jpg);background-size:cover;background-position:center right}
.s3{background:linear-gradient(90deg,rgba(8,20,40,.96) 0%,rgba(8,20,40,.55) 38%,rgba(8,20,40,0) 62%),url(/portal/img/s3.jpg);background-size:cover;background-position:center right}
.cham{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);display:flex;gap:7px}
.cham i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.5);cursor:pointer}
.cham i.on{background:#fff;width:22px;border-radius:5px}

/* ── 4. Tin chạy ───────────────────────────────── */
.tinchay{display:flex;align-items:center;gap:12px;background:#0a6fa8;color:#e6f6ff;
  border-radius:var(--bo);padding:9px 14px;font-size:13px;overflow:hidden}
.tinchay b{color:var(--vang);white-space:nowrap;display:flex;align-items:center;gap:6px}
.tinchay .chay{flex:1;overflow:hidden;white-space:nowrap}
.tinchay .chay span{display:inline-block;padding-left:100%;animation:chay 34s linear infinite}
@keyframes chay{to{transform:translateX(-100%)}}

/* ── 5. Lối tắt ────────────────────────────────── */
.loitat{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:14px 0}
.loitat a{background:var(--the);border-radius:var(--bo);padding:14px;display:flex;align-items:center;
  gap:12px;box-shadow:var(--bong);font-weight:700}
.loitat .ic{width:42px;height:42px;border-radius:10px;display:grid;place-items:center;color:#fff;flex:none}
.loitat small{display:block;font-weight:400;color:var(--chu-mo);font-size:11px;margin-top:2px}

/* ── 6. Sảnh game ──────────────────────────────── */
.khoi{background:var(--the);border-radius:14px;box-shadow:var(--bong);margin:14px 0;overflow:hidden}
.khoi-dau{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid #e8f3f9}
.khoi-dau h3{margin:0;font-size:17px;display:flex;align-items:center;gap:8px}
.khoi-dau h3:before{content:"";width:4px;height:18px;background:var(--xanh);border-radius:2px}
.khoi-dau .phai{margin-left:auto;display:flex;gap:8px}
.tabs{display:flex;gap:6px;padding:12px 18px 0;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{border:1px solid var(--xanh-vien);background:#fff;color:var(--chu);border-radius:20px;
  padding:8px 16px;font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap}
.tabs button.on{background:var(--xanh);color:#fff;border-color:var(--xanh)}
.luoi{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;padding:18px}
.o-game{cursor:pointer;text-align:center}
.o-game .anh{position:relative;border-radius:12px;overflow:hidden;aspect-ratio:1;background:linear-gradient(150deg,#1a2b3c,#0e5f8a);
  display:grid;place-items:center;box-shadow:0 3px 8px rgba(10,60,90,.18);transition:transform .15s}
.o-game:hover .anh{transform:translateY(-4px)}
.o-game .anh img{width:100%;height:100%;object-fit:cover}
.o-game .chuto{color:#fff;font-weight:900;font-size:26px;letter-spacing:1px;text-shadow:0 2px 6px rgba(0,0,0,.4)}
.o-game .ten{font-size:12px;margin-top:7px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.o-game .nhan{position:absolute;top:6px;left:6px;background:var(--do);color:#fff;font-size:10px;
  font-weight:700;padding:1px 6px;border-radius:8px}
.o-game .jack{position:absolute;bottom:0;left:0;right:0;background:rgba(0,0,0,.55);color:var(--vang);
  font-size:11px;font-weight:800;padding:3px}

/* ── 7. Khuyến mãi ─────────────────────────────── */
.km{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:18px}
.km-o{border:1px solid #e6f2f8;border-radius:12px;padding:16px;text-align:center;cursor:pointer;transition:.15s}
.km-o:hover{border-color:var(--xanh);box-shadow:var(--bong)}
.km-o .so{font-size:26px;font-weight:900;color:var(--cam);margin:6px 0}
.km-o h4{margin:0;font-size:14px}
.km-o p{margin:6px 0 0;font-size:12px;color:var(--chu-mo);min-height:32px}

/* ── 8. Cột phải cố định ───────────────────────── */
.cotphai{position:fixed;right:10px;top:50%;transform:translateY(-50%);z-index:70;
  background:#fff;border-radius:12px;box-shadow:0 4px 16px rgba(10,70,105,.18);padding:6px;width:74px}
.cotphai a{display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 2px;
  font-size:10px;color:var(--chu-mo);border-radius:8px;text-align:center}
.cotphai a:hover{background:var(--xanh-nhat);color:var(--xanh-dam)}
.cotphai svg{width:24px;height:24px}
.cotphai .vach{height:1px;background:#eaf3f8;margin:2px 6px}

/* ── 9. Chân trang ─────────────────────────────── */
.chan{background:#0c3f5c;color:#a9cfe3;margin-top:24px;padding:26px 0 60px;font-size:13px}
.chan .cot{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:26px}
.chan h5{color:#fff;margin:0 0 10px;font-size:14px}
.chan a{display:block;padding:3px 0}
.chan a:hover{color:#fff}
.chan .dong{border-top:1px solid rgba(255,255,255,.12);margin-top:20px;padding-top:14px;font-size:12px;opacity:.8}

/* ── 10. Hộp thoại ─────────────────────────────── */
.phu{position:fixed;inset:0;background:rgba(6,32,48,.55);z-index:100;display:none;
  align-items:center;justify-content:center;padding:16px}
.phu.mo{display:flex}
.hop{background:#fff;border-radius:14px;width:100%;max-width:440px;max-height:90vh;overflow:auto;
  box-shadow:0 16px 50px rgba(0,0,0,.3)}
.hop.to{max-width:720px}
.hop-dau{display:flex;align-items:center;padding:15px 18px;border-bottom:1px solid #eaf3f8}
.hop-dau h3{margin:0;font-size:17px}
.hop-dau .dong-x{margin-left:auto;background:none;border:0;font-size:24px;line-height:1;
  cursor:pointer;color:var(--chu-mo)}
.hop-than{padding:18px}
.o-nhap{margin-bottom:13px}
.o-nhap label{display:block;font-size:12px;font-weight:700;margin-bottom:5px;color:var(--chu-mo)}
.o-nhap input,.o-nhap select{width:100%;height:42px;padding:0 12px;border:1px solid #d6e8f2;
  border-radius:8px;font-size:14px}
.o-nhap input:focus,.o-nhap select:focus{outline:none;border-color:var(--xanh)}
.o-nhap .goi{font-size:11px;color:var(--chu-mo);margin-top:4px}
.bao{padding:10px 12px;border-radius:8px;font-size:13px;margin-bottom:12px;display:none}
.bao.loi{display:block;background:#fdecea;color:#c62828}
.bao.ok{display:block;background:#e8f5e9;color:#2e7d32}
.mucchon{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.mucchon button{border:1px solid #d6e8f2;background:#fff;border-radius:8px;padding:10px 4px;
  font-weight:700;cursor:pointer;font-size:13px}
.mucchon button.on{background:var(--xanh);color:#fff;border-color:var(--xanh)}
.hang{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px dashed #e8f3f9;font-size:13px}
.hang b{font-weight:800}

/* ── Điện thoại ────────────────────────────────── */
@media(max-width:1024px){
  .luoi{grid-template-columns:repeat(4,1fr)}
  .km{grid-template-columns:repeat(2,1fr)}
  .chan .cot{grid-template-columns:1fr 1fr}
  .cotphai{display:none}
}
@media(max-width:640px){
  .topbar .wrap{flex-wrap:wrap;gap:10px;padding:10px 12px;min-height:0}
  .tienich{order:3;width:100%;margin-left:0;justify-content:space-between;gap:0;
    border-top:1px solid #eef6fa;padding-top:8px}
  .tienich a{padding:4px 6px}
  .dongho{display:none}
  .taikhoan{margin-left:auto}
  .taikhoan input{display:none}
  .logo b{font-size:24px}
  .luoi{grid-template-columns:repeat(3,1fr);gap:10px;padding:12px}
  .loitat{grid-template-columns:repeat(2,1fr)}
  .slide{min-height:190px;padding:22px}
  .slide h2{font-size:26px}
  .slide .to{font-size:38px}
  .km{grid-template-columns:1fr}
  .chan .cot{grid-template-columns:1fr}
  .thanhduoi{display:flex !important}
}
/* thanh dưới cho điện thoại */
.thanhduoi{display:none;position:fixed;bottom:0;left:0;right:0;background:#fff;z-index:80;
  border-top:1px solid #e2eef5;box-shadow:0 -2px 10px rgba(10,70,105,.12)}
.thanhduoi a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:8px 0;font-size:10px;color:var(--chu-mo)}
.thanhduoi a.on{color:var(--xanh)}
.thanhduoi svg{width:22px;height:22px}

/* ── Sảnh nhà cung cấp + khung chơi game ──────── */
.thanhloc{display:flex;gap:10px;align-items:center;padding:0 18px 12px;flex-wrap:wrap}
.thanhloc input{flex:1;min-width:180px;height:38px;padding:0 12px;border:1px solid #d6e8f2;border-radius:20px;font-size:13px}
.thanhloc input:focus{outline:none;border-color:var(--xanh)}
.thanhloc .dem{font-size:12px;color:var(--chu-mo);white-space:nowrap}
.o-game .anh.that{background:#0d1b26}
.o-game .anh.that img{object-fit:contain;background:#0d1b26}
.dangtai{padding:40px;text-align:center;color:var(--chu-mo);grid-column:1/-1}
.themnua{grid-column:1/-1;display:flex;justify-content:center;padding:6px 0 2px}

/* khung chơi game toàn màn hình */
.choi{position:fixed;inset:0;z-index:200;background:#05161f;display:none;flex-direction:column}
.choi.mo{display:flex}
.choi-dau{display:flex;align-items:center;gap:12px;padding:8px 12px;background:#0a2b3d;color:#fff;flex:none}
.choi-dau .ten{font-weight:700;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.choi-dau .sd{margin-left:auto;font-size:13px;color:var(--vang);font-weight:800;white-space:nowrap}
.choi iframe{flex:1;width:100%;border:0;background:#000}

/* ── header đã đăng nhập: tên + 3 ví ── */
.tk-ten{display:flex;align-items:center;gap:3px;font-weight:700;color:var(--chu);white-space:nowrap}
.tk-ten:hover{color:var(--xanh)}
.vi3{display:flex;align-items:center;gap:10px;margin:0 4px}
.vi-o{display:flex;flex-direction:column;line-height:1.1;font-size:11px}
.vi-o i{color:var(--chu-mo);font-style:normal;font-size:10px}
.vi-o b{color:var(--cam);font-weight:800;font-size:13px}
.vi-o:nth-child(2) b{color:#7c4dff}
.vi-o:nth-child(3) b{color:#22a565}
@media(max-width:900px){ .vi3{gap:7px} .vi-o b{font-size:12px} .tk-ten .ten{max-width:80px;overflow:hidden;text-overflow:ellipsis} }