/* ═══════════════════════════════════════════════════════════════
   CÔNG THÀNH CHIẾN 2005 — TIÊN HIỆP HUYỀN THIÊN
   Ngọc Bích · Tím Huyền · Bạc Ngọc Trai · Cõi Tiên
   ═══════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700;800;900&display=swap');

/* ─── BẢO BÍCH MÀU SẮC — CÕNG THIÊN ─────────────────────────── */
:root {
  /* Ngọc Bích — tinh hoa cõi tiên */
  --jade:       #2ee8a8;
  --jade-l:     #90f5d5;
  --jade-d:     #12956a;
  --jade-glow:  rgba(46,232,168,0.45);
  --jade-soft:  rgba(46,232,168,0.10);

  /* Tím Huyền — khí tông bí ẩn */
  --purple:     #9b6ef0;
  --purple-l:   #c8b0ff;
  --purple-d:   #5a3498;
  --purple-glow:rgba(155,110,240,0.40);

  /* Bạc Ngọc Trai — ánh sáng thiên đình */
  --pearl:      #e8e2ff;
  --silver:     rgba(220,210,255,0.80);
  --silver-dim: rgba(180,165,220,0.55);

  /* Vàng Tiên — kim quang */
  --gold:       #f0d060;
  --gold-glow:  rgba(240,208,96,0.35);

  /* Nền — Huyền Không Tím Thẫm */
  --void:       #06030f;
  --panel:      rgba(14, 6, 28, 0.82);
  --panel-nav:  rgba(8, 3, 18, 0.92);
  --border:     rgba(46,232,168,0.20);
  --border2:    rgba(155,110,240,0.22);
  --border-s:   rgba(220,210,255,0.18);

  /* Text */
  --t:    #f0ecff;           /* Trắng ngà tím — text chính */
  --t-s:  #d0f5e8;           /* Xanh ngọc nhạt — subtitle */
  --t-m:  rgba(200,185,240,0.75);  /* Tím bạc mờ */
  --t-d:  rgba(150,130,190,0.55);  /* Rất mờ */
  --fn:   'Be Vietnam Pro','Segoe UI',sans-serif;

  /* Tương thích PHP cũ */
  --vltk-gold:        #f0d060;
  --vltk-gold-light:  #f5e090;
  --vltk-gold-dark:   #c8a820;
  --vltk-red:         #e05090;
  --vltk-red-light:   #ff80b8;
  --vltk-text:        #f0ecff;
  --vltk-text-muted:  #c8b0ff;
  --vltk-border:      rgba(46,232,168,0.20);
  --vltk-panel-bg:    rgba(14,6,28,0.82);
  --c1:   #2ee8a8;
  --c1-l: #90f5d5;
  --c1-d: #12956a;
  --c1-glow: rgba(46,232,168,0.45);
}

/* ─── RESET ─────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html,body { width:100%; overflow-x:hidden; }

/* ─── BODY — Cõi Huyền Không ────────────────────────────────── */
body {
  font-family: var(--fn);
  font-size: 14px;
  color: var(--t);
  line-height: 1.72;
  background: var(--void) url('../images/background.png') no-repeat center top;
  background-attachment: fixed;
  background-size: 100% auto;
}

/* Lớp tím huyền mờ nhẹ trên nền — cảm giác cõi tiên */
body::before {
  content:'';
  position:fixed; inset:0;
  background:
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(100,50,200,0.08) 0%, transparent 70%),
    radial-gradient(ellipse 40% 30% at 20% 60%, rgba(46,232,168,0.04) 0%, transparent 60%);
  pointer-events:none; z-index:0;
}

/* ─── LINKS ──────────────────────────────────────────────────── */
a { color:var(--jade-l); text-decoration:none; transition:color .2s,text-shadow .2s; }
a:hover { color:#fff; text-shadow:0 0 12px var(--jade-glow); }

/* ─── WRAPPER ────────────────────────────────────────────────── */
.vltk-wrapper { max-width:1200px; margin:0 auto; position:relative; z-index:1; }

/* ═══════════════════════════════════════════════════════════════
   HEADER — Thiên Đình Môn Quan
═══════════════════════════════════════════════════════════════ */
.vltk-header-top {
  position:sticky; top:0; z-index:1000;
  background: rgba(5,2,12,0.94);
  border-bottom: 1px solid rgba(155,110,240,0.25);
  box-shadow: 0 4px 30px rgba(0,0,0,0.75), 0 0 40px rgba(100,50,200,0.08);
}
/* Đường ngọc bích + tím lưu quang dưới header */
.vltk-header-top::after {
  content:'';
  position:absolute; bottom:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,
    transparent 3%,
    var(--purple-d) 15%,
    var(--jade-d) 30%,
    var(--jade) 50%,
    var(--jade-d) 70%,
    var(--purple-d) 85%,
    transparent 97%);
  opacity:0.65;
}

.MenuTop {
  display:flex; align-items:center; justify-content:space-between;
  height:66px; max-width:1200px; margin:0 auto; padding:0 24px;
}
.MenuSubLeft,.MenuSubRight { display:flex; gap:2px; align-items:center; }

.MenuSubChild { position:relative; }
.MenuSubChieldText {
  display:block; font-size:12.5px; font-weight:800;
  color:var(--t-m); letter-spacing:1px; text-transform:uppercase;
  padding:8px 14px; border-radius:3px; transition:all .22s;
  border-bottom:2px solid transparent;
}
.MenuSubChild:hover .MenuSubChieldText {
  color:var(--jade-l);
  background:var(--jade-soft);
  border-bottom-color:var(--jade);
  text-shadow:0 0 12px var(--jade-glow);
}

/* Dropdown */
.MenuSubChildSubMenu {
  position:absolute; top:calc(100% + 4px); left:0; min-width:205px;
  background:rgba(5,2,14,0.98);
  border:1px solid var(--border);
  border-top:2px solid var(--jade);
  border-radius:0 0 6px 6px;
  box-shadow:0 20px 50px rgba(0,0,0,0.80), 0 0 25px rgba(46,232,168,0.06);
  padding:4px 0; opacity:0; visibility:hidden; transform:translateY(7px);
  transition:all .22s cubic-bezier(.4,0,.2,1); z-index:999;
}
.MenuSubChild:hover .MenuSubChildSubMenu { opacity:1; visibility:visible; transform:translateY(0); }

.MenuSubChildSubMenuChild {
  display:flex; align-items:center; gap:8px;
  padding:10px 16px; font-size:13px; font-weight:600;
  color:var(--t-m); border-bottom:1px solid rgba(46,232,168,0.05);
  transition:all .18s;
}
.MenuSubChildSubMenuChild::before { content:'›'; color:var(--jade-d); transition:color .18s; font-size:16px; }
.MenuSubChildSubMenuChild:last-child { border-bottom:none; }
.MenuSubChildSubMenuChild:hover {
  color:var(--jade-l); background:var(--jade-soft); padding-left:20px;
  text-shadow:0 0 8px var(--jade-glow);
}
.MenuSubChildSubMenuChild:hover::before { color:var(--jade); }

/* Logo */
.LogoMenuTop { position:absolute; left:50%; transform:translateX(-50%); top:0; height: 110px; z-index:1001; display: flex; justify-content: center; align-items: center; } .LogoMenuTop img { max-width: 320px; max-height: 110px; width: auto; height: auto; object-fit: contain; filter:drop-shadow(0 0 12px rgba(46,232,168,0.22)) drop-shadow(0 6px 18px rgba(0,0,0,0.75)); transition:filter .3s, transform .3s; } .LogoMenuTop img:hover { transform:scale(1.05); filter:drop-shadow(0 0 26px rgba(46,232,168,0.50)) drop-shadow(0 8px 22px rgba(0,0,0,0.80)); }

/* ═══════════════════════════════════════════════════════════════
   LAYOUT
═══════════════════════════════════════════════════════════════ */
.ContentBody {
  position:relative; z-index:1;
  width:100%; max-width:1200px; margin:0 auto; padding:0 10px;
  display:flex; flex-direction:column; gap:16px;
  min-height:1039px; height:auto !important;
}
.main-layout-grid { display:grid; grid-template-columns:272px 1fr 272px; gap:14px; }
.col-left,.col-center,.col-right { display:flex; flex-direction:column; gap:14px; }

/* ═══════════════════════════════════════════════════════════════
   PANEL — Thần Ngọc Kết Giới (Huyền Tím + Ngọc Bích)
═══════════════════════════════════════════════════════════════ */
.vltk-panel {
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:6px;
  box-shadow:
    0 8px 36px rgba(0,0,0,0.60),
    0 0 0 1px rgba(155,110,240,0.08) inset,
    inset 0 1px 0 rgba(220,210,255,0.06);
  position:relative; overflow:hidden;
  transition:border-color .28s,box-shadow .28s;
}
.vltk-panel:hover {
  border-color:rgba(46,232,168,0.32);
  box-shadow:0 8px 36px rgba(0,0,0,0.65), 0 0 30px rgba(46,232,168,0.06), inset 0 1px 0 rgba(220,210,255,0.08);
}

/* Đường tiên khí trên đỉnh panel */
.vltk-panel::before {
  content:'';
  position:absolute; top:0; left:5%; right:5%; height:1px;
  background:linear-gradient(90deg,
    transparent 0%,
    var(--purple-d) 20%,
    var(--jade-d) 40%,
    var(--jade) 50%,
    var(--jade-d) 60%,
    var(--purple-d) 80%,
    transparent 100%);
  opacity:0.70;
}

/* ─── Panel Header — Thiên Đình Tiêu Đề ─── */
.vltk-panel-header {
  padding:11px 18px;
  background:linear-gradient(135deg,
    rgba(46,232,168,0.10) 0%,
    rgba(155,110,240,0.08) 50%,
    rgba(46,232,168,0.10) 100%);
  border-bottom:1px solid rgba(46,232,168,0.15);
  font-family:var(--fn); font-size:11px; font-weight:900;
  color:var(--jade-l); letter-spacing:3px; text-transform:uppercase;
  text-align:center;
  text-shadow:0 0 18px var(--jade-glow), 0 1px 2px rgba(0,0,0,0.9);
  display:flex; align-items:center; justify-content:center; gap:10px;
}
.vltk-panel-header::before,
.vltk-panel-header::after {
  content:''; flex:1; height:1px;
  background:linear-gradient(90deg, transparent, rgba(46,232,168,0.40));
}
.vltk-panel-header::after { background:linear-gradient(270deg, transparent, rgba(46,232,168,0.40)); }

.vltk-panel-content { padding:14px; }

/* ═══════════════════════════════════════════════════════════════
   BUTTONS — Tiên Kiếm Lệnh Bài
═══════════════════════════════════════════════════════════════ */
.vltk-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:5px;
  width:100%; padding:10px 16px; border-radius:3px;
  font-family:var(--fn); font-size:12px; font-weight:900;
  letter-spacing:1.5px; text-transform:uppercase; cursor:pointer; transition:all .22s;
  text-decoration:none;
  background:linear-gradient(150deg, rgba(46,232,168,0.18) 0%, rgba(18,80,60,0.30) 100%);
  border:1px solid rgba(46,232,168,0.35);
  color:#ffffff !important;
  text-shadow:0 0 8px var(--jade-glow),0 1px 2px rgba(0,0,0,0.7);
  box-shadow:0 3px 14px rgba(0,0,0,0.50), 0 0 0 0 transparent;
  position:relative; overflow:hidden;
}
.vltk-btn::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(150deg, rgba(46,232,168,0.10), transparent 60%);
  opacity:0; transition:opacity .22s;
}
.vltk-btn:hover {
  background:linear-gradient(150deg, rgba(46,232,168,0.28), rgba(18,100,75,0.40) 100%);
  border-color:var(--jade);
  box-shadow:0 4px 20px rgba(0,0,0,0.60), 0 0 28px var(--jade-glow);
  transform:translateY(-2px); color:#fff !important;
}
.vltk-btn:hover::before { opacity:1; }
.vltk-btn:active { transform:translateY(0); }

/* Gold — Quản lý TK */
.vltk-btn.gold {
  background:linear-gradient(150deg, rgba(240,208,96,0.18) 0%, rgba(100,75,0,0.28) 100%);
  border-color:rgba(240,208,96,0.40); color:var(--gold) !important;
  text-shadow:0 0 8px var(--gold-glow),0 1px 2px rgba(0,0,0,0.7);
  box-shadow:0 3px 14px rgba(0,0,0,0.50);
}
.vltk-btn.gold:hover {
  background:linear-gradient(150deg, rgba(240,208,96,0.28), rgba(130,95,0,0.38) 100%);
  border-color:var(--gold); color:#fff !important;
  box-shadow:0 4px 20px rgba(0,0,0,0.60), 0 0 28px var(--gold-glow);
}

/* Đăng Ký — Ngọc Bích */
.btn-register {
  flex:1; height:46px; border-radius:3px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--fn); font-weight:900; font-size:13px; letter-spacing:1.5px;
  text-transform:uppercase; cursor:pointer; text-decoration:none; transition:all .22s;
  background:linear-gradient(150deg, rgba(18,149,106,0.85) 0%, rgba(46,232,168,0.75) 50%, rgba(18,149,106,0.85) 100%);
  border:1px solid var(--jade-l);
  color:#ffffff !important; text-shadow:0 0 8px rgba(0,0,0,0.8);
  box-shadow:0 0 10px var(--jade-glow), inset 0 0 15px rgba(255,255,255,0.3);
  position: relative; overflow: hidden;
}
.btn-register::after {
  content: ''; position: absolute; inset: 0; 
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
  transform: translateX(-100%) skewX(-15deg);
  transition: all 0.7s ease;
}
.btn-register:hover {
  background:linear-gradient(150deg, rgba(46,232,168,0.85), rgba(18,149,106,0.95));
  border-color:#fff; color:#fff !important;
  box-shadow:0 4px 20px rgba(0,0,0,0.60), 0 0 28px var(--jade), inset 0 0 15px rgba(255,255,255,0.5);
  transform:translateY(-2px);
}
.btn-register:hover::after {
  transform: translateX(200%) skewX(-15deg);
}


  flex:1; height:46px; border-radius:3px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--fn); font-weight:900; font-size:12px; letter-spacing:1.5px;
  text-transform:uppercase; cursor:pointer; text-decoration:none; transition:all .22s;
  background:linear-gradient(150deg, rgba(46,232,168,0.18), rgba(18,80,60,0.30));
  border:1px solid rgba(46,232,168,0.35);
  color:#ffffff !important; text-shadow:0 0 8px var(--jade-glow);
  box-shadow:0 3px 14px rgba(0,0,0,0.50);
}
.btn-register:hover {
  background:linear-gradient(150deg, rgba(46,232,168,0.28), rgba(18,100,75,0.40));
  border-color:var(--jade); color:#fff !important;
  box-shadow:0 4px 20px rgba(0,0,0,0.60), 0 0 28px var(--jade-glow);
  transform:translateY(-2px);
}

/* Nạp Thẻ — Tử Kim (Hồng-Tím kết hợp) */
.btn-napthe {
  flex:1; height:46px; border-radius:3px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--fn); font-weight:900; font-size:13px; letter-spacing:1.5px;
  text-transform:uppercase; cursor:pointer; text-decoration:none; transition:all .22s;
  background:linear-gradient(150deg, rgba(90,40,160,0.85) 0%, rgba(155,110,240,0.75) 50%, rgba(90,40,160,0.85) 100%);
  border:1px solid var(--purple-l);
  color:#ffffff !important; text-shadow:0 0 8px rgba(0,0,0,0.8);
  box-shadow:0 0 10px var(--purple-glow), inset 0 0 15px rgba(255,255,255,0.3);
  position: relative; overflow: hidden;
}
.btn-napthe::after {
  content: ''; position: absolute; inset: 0; 
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
  transform: translateX(-100%) skewX(-15deg);
  transition: all 0.7s ease;
}
.btn-napthe:hover {
  background:linear-gradient(150deg, rgba(155,110,240,0.85), rgba(90,40,160,0.95));
  border-color:#fff; color:#fff !important;
  box-shadow:0 4px 20px rgba(0,0,0,0.60), 0 0 28px var(--purple), inset 0 0 15px rgba(255,255,255,0.5);
  transform:translateY(-2px);
}
.btn-napthe:hover::after {
  transform: translateX(200%) skewX(-15deg);
}

.action-row { display:flex; gap:10px; }

.btn-download-big {
  background:url('../images/tai_game_cai_dat_img.png') no-repeat center center;
  background-size:cover; border-radius:6px;
  border:1px solid var(--border);
  box-shadow:0 6px 28px rgba(0,0,0,0.65);
  display:block; transition:all .28s; flex-grow:1; height:183px;
}
.btn-download-big:hover {
  transform:translateY(-3px) scale(1.015);
  border-color:rgba(46,232,168,0.40);
  box-shadow:0 14px 40px rgba(0,0,0,0.75), 0 0 32px var(--jade-glow);
}
.action-buttons-container { display:flex; gap:14px; }

/* ═══════════════════════════════════════════════════════════════
   INPUTS
═══════════════════════════════════════════════════════════════ */
.vltk-input {
  width:100%; padding:11px 14px;
  background:rgba(14,6,28,0.70);
  border:1px solid rgba(46,232,168,0.22);
  border-radius:3px; color:var(--t);
  font-family:var(--fn); font-size:14px; font-weight:500;
  outline:none; transition:all .22s;
}
.vltk-input:focus {
  border-color:var(--jade);
  background:rgba(14,6,28,0.85);
  box-shadow:0 0 0 2px rgba(46,232,168,0.12), 0 0 14px rgba(46,232,168,0.10);
}
.vltk-input::placeholder { color:var(--t-d); font-weight:400; }

.login-form-group { margin-bottom:10px; }
.login-actions { display:flex; justify-content:space-between; align-items:center; margin-top:8px; font-size:12px; }
.captcha-group { display:flex; gap:8px; align-items:center; }
.captcha-img { border:1px solid var(--border); border-radius:3px; height:38px; flex-shrink:0; }
#lblError { color:#ff80a0; font-size:13px; font-weight:700; }

/* ═══════════════════════════════════════════════════════════════
   NEWS TABS — Ngọc Giản (Thư Viện Cổ)
═══════════════════════════════════════════════════════════════ */
.news-tabs {
  display:flex;
  border-bottom:1px solid rgba(46,232,168,0.14);
  background:rgba(0,0,0,0.30);
}
.news-tab {
  flex:1; text-align:center; padding:11px 3px;
  font-family:var(--fn); font-size:10.5px; font-weight:800;
  color:var(--t-m); cursor:pointer; transition:all .22s;
  text-transform:uppercase; letter-spacing:0.8px;
  border-bottom:2px solid transparent; margin-bottom:-1px;
}
.news-tab a { color:inherit !important; display:block; width:100%; }
.news-tab:hover,.news-tab.active,.news-tab.curr {
  color:var(--jade-l);
  border-bottom-color:var(--jade);
  background:var(--jade-soft);
  text-shadow:0 0 10px var(--jade-glow);
}
.checkcon { padding:13px 14px; }

/* News list — CỰC RÕ, CỰC SÁNG */
.news-list { list-style:none; display:flex; flex-direction:column; }
.news-item {
  display:flex; justify-content:space-between; align-items:center;
  padding:9px 6px; border-bottom:1px solid rgba(46,232,168,0.07);
  transition:all .18s; border-radius:3px; cursor:pointer;
}
.news-item:last-child { border-bottom:none; }
.news-item:hover { background:var(--jade-soft); padding-left:10px; }

.news-item-title {
  color:var(--t) !important;
  font-size:13px; font-weight:600; line-height:1.5;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:77%;
  transition:color .18s,text-shadow .18s; text-decoration:none;
  display:flex; align-items:center; gap:8px;
}
.news-item-title::before {
  content:''; width:5px; height:5px; border-radius:50%;
  background:var(--jade-d); border:1px solid rgba(46,232,168,0.40);
  flex-shrink:0; transition:all .18s;
}
.news-item:hover .news-item-title { color:var(--jade-l) !important; text-shadow:0 0 8px var(--jade-glow); }
.news-item:hover .news-item-title::before { background:var(--jade); box-shadow:0 0 8px var(--jade-glow); }
.news-item-date { color:var(--t-d); font-size:11px; flex-shrink:0; font-weight:500; }

/* ═══════════════════════════════════════════════════════════════
   USER INFO
═══════════════════════════════════════════════════════════════ */
.user-info-box { display:flex; flex-direction:column; }
.user-welcome {
  display:flex; align-items:center; gap:12px;
  padding-bottom:12px; margin-bottom:12px;
  border-bottom:1px solid rgba(46,232,168,0.12);
}
.user-avatar { width:44px; height:44px; border-radius:50%; border:2px solid var(--jade-d); box-shadow:0 0 14px var(--jade-glow); object-fit:cover; }
.user-name { color:var(--jade-l); font-size:15px; font-weight:800; margin-bottom:4px; text-shadow:0 0 10px var(--jade-glow); }
.user-balance {
  display:inline-flex; align-items:center;
  background:rgba(46,232,168,0.10); border:1px solid rgba(46,232,168,0.25);
  color:var(--jade-l); padding:3px 10px; border-radius:20px; font-size:11.5px; font-weight:700;
}
.user-security { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--t-m); }
.security-bar { flex-grow:1; height:4px; background:rgba(255,255,255,0.07); border-radius:4px; overflow:hidden; }
.security-bar-fill { height:100%; border-radius:4px; }
.security-bar-fill.good { background:linear-gradient(90deg,var(--jade-d),var(--jade)); width:100%; }
.security-bar-fill.bad  { background:linear-gradient(90deg,#8b3000,#d06020); width:50%; }

/* ═══════════════════════════════════════════════════════════════
   ROLE / MÔNAPPHÁI — Bảng Tu Tiên
═══════════════════════════════════════════════════════════════ */
.role-container {
  display:flex; background:var(--panel);
  border:1px solid var(--border); border-radius:6px;
  overflow:hidden; box-shadow:0 8px 40px rgba(0,0,0,0.65); min-height:320px;
  position:relative;
}
.role-container::before {
  content:''; position:absolute; top:0; left:5%; right:5%; height:1px;
  background:linear-gradient(90deg,transparent,var(--purple-d),var(--jade-d),var(--jade),var(--jade-d),var(--purple-d),transparent);
  opacity:0.70;
}

.rNav { width:135px; flex-shrink:0; background:rgba(5,2,14,0.88); border-right:1px solid rgba(46,232,168,0.12); }
.rNav ul { list-style:none; display:flex; flex-direction:column; }
.rNav ul li a {
  display:flex; align-items:center; padding:13px 14px;
  font-size:13px; font-weight:700; color:var(--t-m);
  border-left:3px solid transparent; border-bottom:1px solid rgba(46,232,168,0.06);
  transition:all .2s;
}
.rNav ul li:last-child a { border-bottom:none; }
.rNav ul li.curr a,.rNav ul li:hover a {
  color:var(--jade-l); border-left-color:var(--jade);
  background:var(--jade-soft); text-shadow:0 0 10px var(--jade-glow);
}

.rTxt { flex:1; padding:22px 20px; position:relative; overflow:hidden; }
.faction-title {
  font-size:21px; font-weight:900; color:var(--jade-l);
  text-shadow:0 0 22px var(--jade-glow),0 2px 6px rgba(0,0,0,0.9);
  margin-bottom:8px; letter-spacing:0.5px;
  display:flex; align-items:center; gap:10px;
}
.faction-title::before { content:'⚔'; font-size:16px; color:var(--jade); opacity:0.9; }
.faction-desc {
  font-size:13px; color:var(--t-s); line-height:1.88;
  border-left:2px solid rgba(46,232,168,0.35); padding-left:12px; margin-top:8px;
}

.peo {
  position:absolute; right:-8px; bottom:0; width:185px; opacity:0.92;
  filter:drop-shadow(-3px 0 18px rgba(46,232,168,0.22));
  animation:peoFloat 3.5s ease-in-out infinite; transition:opacity .3s,filter .3s;
}
.rTxt:hover .peo { opacity:1; filter:drop-shadow(-3px 0 28px rgba(46,232,168,0.38)); }
@keyframes peoFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }

/* ═══════════════════════════════════════════════════════════════
   ACCORDION BANNER
═══════════════════════════════════════════════════════════════ */
.boxAccordin { width:100%; height:100%; }
.accordin { display:flex; width:100%; border-radius:4px; overflow:hidden; }
.accordin li {
  width:45px !important; transition:width .32s cubic-bezier(.4,0,.2,1);
  overflow:hidden; cursor:pointer; border-right:1px solid rgba(46,232,168,0.15); position:relative;
}
.accordin li img { width:610px; height:100%; object-fit:cover; position:absolute; top:0; left:0; display:block !important; opacity:1 !important; }
.accordin li.on { width:475px !important; border-right:none; }
.accordin:hover li.on:not(:hover) { width:45px !important; }
.accordin li:hover { width:475px !important; border-right:none; }
.banner-visual-spacing { height:350px; }

/* ═══════════════════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════════════════ */
.vltk-footer {
  margin-top:30px; position:relative; z-index:1;
  background:rgba(3,1,10,0.92);
  border-top:1px solid rgba(46,232,168,0.15);
  padding:28px 0 22px; text-align:center; color:var(--t-d); font-size:12px;
}
.footer-links { display:flex; justify-content:center; gap:22px; margin-bottom:12px; flex-wrap:wrap; }
.footer-links a { color:var(--t-m); text-transform:uppercase; font-size:11px; font-weight:700; letter-spacing:1px; }
.footer-links a:hover { color:var(--jade-l); text-shadow:0 0 8px var(--jade-glow); }
.vltk-footer::before {
  content:''; display:block; width:200px; height:1px; margin:0 auto 16px;
  background:linear-gradient(90deg,transparent,var(--jade-d),transparent);
}

/* ═══════════════════════════════════════════════════════════════
   FLOATING
═══════════════════════════════════════════════════════════════ */
.fix-right_ { position:fixed; left:12px; top:50%; transform:translateY(-50%); z-index:9999; }
.fix-right_ ul { list-style:none; }
.fix-right_ li { position:relative; margin-bottom:12px; display:flex; align-items:center; }
.fix-right_ li img { width:52px; height:52px; border-radius:50%; border:1px solid var(--border); box-shadow:0 4px 12px rgba(0,0,0,0.65); transition:transform .25s,box-shadow .25s,border-color .25s; cursor:pointer; }
.fix-right_ li img:hover { transform:scale(1.12); border-color:var(--jade); box-shadow:0 0 22px var(--jade-glow); }
.fix-right_ li span { position:absolute; left:62px; white-space:nowrap; background:rgba(5,2,14,0.98); color:var(--jade-l); border:1px solid var(--border); border-left:2px solid var(--jade); padding:5px 12px; border-radius:0 4px 4px 0; font-size:12px; font-weight:700; opacity:0; visibility:hidden; transform:translateX(-8px); transition:all .22s; }
.fix-right_ li:hover span { opacity:1; visibility:visible; transform:translateX(0); }

/* ═══════════════════════════════════════════════════════════════
   UTILS & RESPONSIVE
═══════════════════════════════════════════════════════════════ */
.text-center{text-align:center;}.mt-10{margin-top:10px;}.mb-10{margin-bottom:10px;}
.mt-15{margin-top:15px;}.mt-20{margin-top:20px;}.mb-20{margin-bottom:20px;}.p-0{padding:0!important;}

@media (max-width:1200px) { .main-layout-grid{grid-template-columns:1fr;padding:10px;} }
@media (max-width:768px) {
  html,body{overflow-x:hidden;}
  .MenuSubLeft,.MenuSubRight{display:none!important;}
  .LogoMenuTop{top:8px; height:80px;} .LogoMenuTop img{max-height:80px; max-width:200px;}
  .MenuTop{justify-content:center;height:108px;}
  .banner-visual-spacing{height:44vw!important;}
  .role-container{flex-direction:column;}
  .rNav{width:100%!important;border-right:none;border-bottom:1px solid rgba(46,232,168,0.15);}
  .rNav ul{flex-direction:row;overflow-x:auto;}
  .rNav ul li a{border-left:none!important;border-bottom:2px solid transparent;padding:10px 12px;white-space:nowrap;}
  .rNav ul li.curr a,.rNav ul li:hover a{border-left:none!important;border-bottom-color:var(--jade)!important;background:var(--jade-soft)!important;}
  .rTxt{padding:14px!important;}
  .peo{width:90px!important;opacity:0.2;animation:none;}
  .faction-title{font-size:17px!important;}
  .main-layout-grid{grid-template-columns:1fr;padding:8px;}
  .ContentBody{padding:0 8px;}
  .action-buttons-container{flex-direction:column;}
  .btn-download-big{height:120px;}
  .action-row{flex-direction:column;}
  .btn-register,.btn-napthe{height:44px;}
}

/* --- BUTTON T?I GAME NG?C B�CH --- */
.btn-jade-download {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 100%; height: 75px; border-radius: 6px; margin-bottom: 15px;
  background: linear-gradient(135deg, rgba(18,149,106,0.85) 0%, rgba(46,232,168,0.75) 50%, rgba(18,149,106,0.85) 100%);
  border: 2px solid var(--jade-l);
  box-shadow: 0 0 15px var(--jade-glow), inset 0 0 20px rgba(255,255,255,0.4);
  color: #fff; text-transform: uppercase; text-decoration: none;
  position: relative; overflow: hidden; cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-jade-download::before {
  content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, transparent 60%);
  opacity: 0; transform: scale(0.5); transition: all 0.5s; pointer-events: none;
}
.btn-jade-download:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 10px 25px rgba(0,0,0,0.6), 0 0 30px var(--jade), inset 0 0 25px rgba(255,255,255,0.6);
  border-color: #fff;
}
.btn-jade-download:hover::before {
  opacity: 0.3; transform: scale(1); animation: rotateLight 4s linear infinite;
}
@keyframes rotateLight { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.btn-jade-title { font-size: 20px; font-weight: 900; letter-spacing: 2px; text-shadow: 0 2px 4px rgba(0,0,0,0.8), 0 0 10px var(--jade-l); display: flex; align-items: center; gap: 10px; }

.btn-jade-sub { font-size: 12px; font-weight: 600; color: #d0f5e8; letter-spacing: 1px; margin-top: 2px; }


/* Tinh ch?nh n�t T?i Game Ng?c B�ch th�m ph?n ?o di?u */
.btn-jade-download::after {
  content: ''; position: absolute; inset: 0; 
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
  transform: translateX(-100%) skewX(-15deg);
  transition: all 0.7s ease;
}
.btn-jade-download:hover::after {
  transform: translateX(200%) skewX(-15deg);
}