/* ==========================================================================
   Rồng Thần Chibi — Theme tu tiên dùng chung cho toàn bộ website
   Nguồn duy nhất của giao diện. Nạp SAU bootstrap.min.css để ghi đè.

   Ngôn ngữ thiết kế lấy theo linhkhichilo.quantums.io.vn:
   nền xanh đen, chữ vàng kim, khung vuông có "ngoặc góc" (corner bracket)
   thay cho bo tròn, điểm nhấn tím khói. Không dùng nút 3D kiểu hoạt hình nữa.
   ========================================================================== */

/* Font pixel FVF Fernando đã BỎ khỏi giao diện — toàn bộ chữ dùng font thường
   (Be Vietnam Pro). File .ttf vẫn nằm trong /Assets/Fonts/ nếu sau này cần dùng
   lại: bỏ comment khối dưới và đổi --disp về "FVF Fernando".
@font-face{
  font-family:"FVF Fernando";
  src:url('/Assets/Fonts/FVFFernando08.ttf') format('truetype');
  font-weight:400;
  font-display:swap;
}
*/

/* Thư pháp Khải thư (AR PL UKai) — font duy nhất có sẵn trên máy vừa mang nét
   bút lông vừa đủ dấu tiếng Việt. Bản gốc arplukai.ttf nặng 16.4 MB vì chứa
   toàn bộ chữ Hán; đây là bản đã cắt còn Latin + tiếng Việt, 17 KB.
   Chỉ dùng cho tên game, không dùng cho chữ chạy dài (nét mảnh, khó đọc cỡ nhỏ). */
@font-face{
  font-family:"UKai Viet";
  src:url('/Assets/Fonts/ukai-viet.woff2') format('woff2');
  font-weight:400;
  font-display:swap;
}

:root{
  /* nền — graphit/thép, bỏ ám xanh lục của bản tu tiên cho bớt thanh thoát */
  --bg:#0d0f13; --bg-top:#171b22; --bg-2:#08090c;
  --panel:#141920; --panel-2:#1c222c; --panel-3:#262e3a; --panel-tab:#191f27;
  --panel-line:rgba(255,90,43,.16);

  /* chữ */
  --ink:#f2f4f7; --ink-soft:#98a2b3; --ink-dim:#667085; --title:#ff8a4c;

  /* LỬA — giữ nguyên tên biến --gold* để cả site tự đổi theo, chỉ thay giá trị
     từ vàng kim sang đỏ cam. Đổi một chỗ, ~200 quy tắc CSS ăn theo. */
  --gold:#ff5a2b; --gold-2:#ffb347; --gold-d:#a3220a;
  --gold-bd:rgba(255,90,43,.38); --gold-dim:rgba(255,90,43,.13);
  /* vàng thật, chỉ dùng cho huy hiệu hạng nhất */
  --kim:#ffc93c; --kim-2:#ffe9a6;

  /* huyết dụ thay cho tím khói */
  --accent:#7f1d1d; --accent-h:#a52a2a; --accent-d:#4d0f0f; --glow:#ff4d2d;

  /* trạng thái + ngũ hành */
  --green:#6fbf5a; --green-d:#3f7a33; --green-bd:var(--gold-bd);
  --blue:#5aa8e8; --blue-d:#2179b8; --red:#e85a4a; --red-d:#a83527;
  --el-kim:#e8e4c9; --el-moc:#6fbf5a; --el-thuy:#5aa8e8; --el-hoa:#e85a4a; --el-tho:#c9963c;

  /* giấy cũ (khối tạo nhân vật) */
  --parch:#e6d7ae; --parch-ink:#3b2d16; --parch-soft:#7a5a2c;
  --wood:#3a3048; --wood-d:#241d30;

  --disp:"Be Vietnam Pro",system-ui,"Segoe UI",Arial,sans-serif;
  --body:"Be Vietnam Pro",system-ui,"Segoe UI",Arial,sans-serif;
  --brand:"UKai Viet",serif; /* riêng tên game Rồng Thần Chibi */
  --maxw:1120px;
  --hd-h:64px;

  /* thông số ngoặc góc */
  --brk:var(--gold); --brk-w:3px; --brk-arm:14px;
}

/* Ngoặc góc: 8 dải gradient đặt vào 4 góc. Dùng lại ở panel, card, nút... */
.wx,.panel,.card,.fcard,.post,.acct-bar,.modal-content,.post-item,
.recharge-method-item,.download-bg,.items .it,.stat-box{
  background-image:
    linear-gradient(var(--brk),var(--brk)),linear-gradient(var(--brk),var(--brk)),
    linear-gradient(var(--brk),var(--brk)),linear-gradient(var(--brk),var(--brk)),
    linear-gradient(var(--brk),var(--brk)),linear-gradient(var(--brk),var(--brk)),
    linear-gradient(var(--brk),var(--brk)),linear-gradient(var(--brk),var(--brk));
  background-repeat:no-repeat;
  background-size:
    var(--brk-arm) var(--brk-w),var(--brk-w) var(--brk-arm),
    var(--brk-arm) var(--brk-w),var(--brk-w) var(--brk-arm),
    var(--brk-arm) var(--brk-w),var(--brk-w) var(--brk-arm),
    var(--brk-arm) var(--brk-w),var(--brk-w) var(--brk-arm);
  background-position:0 0,0 0,100% 0,100% 0,0 100%,0 100%,100% 100%,100% 100%;
  border-radius:0;
  transition:background-size .2s,border-color .2s,background-color .2s;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:linear-gradient(180deg,var(--bg-top) 0%,var(--bg) 100%) fixed;
  color:var(--ink); font-family:var(--body); font-size:16px; line-height:1.66; -webkit-font-smoothing:antialiased}
img{max-width:100%; vertical-align:middle}
.hd .logo-i,.hero-logo,.ft .fin img,.frame img,.fcard .ic,
.items .it img,.post .pth,.post .bg-tick,.cls .thumb .spr,.cls .tick{display:block}
.pix{image-rendering:pixelated}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 20px}
h1,h2,h3,h4,h5{font-family:var(--disp); font-weight:700; margin:0; line-height:1.3;
  text-wrap:balance; color:var(--title); text-shadow:0 2px rgba(0,0,0,.5)}
a{color:var(--gold-2); text-decoration:none; transition:color .2s}
a:hover{color:var(--gold)}
hr{border-color:var(--panel-line); opacity:.7}
::selection{background:var(--gold-dim); color:var(--gold-2)}

.page-layout-color{background:none !important; animation:none !important}

/* ==========================================================================
   HEADER
   ========================================================================== */
header.top{position:fixed; inset:0 0 auto 0; z-index:1000; transition:background .25s,border-color .25s;
  background:linear-gradient(180deg,rgba(14,20,24,.92),rgba(14,20,24,.35)); border-bottom:1px solid var(--gold-dim)}
header.top.scrolled,
header.top.solid{background:rgba(14,20,24,.96); backdrop-filter:blur(8px); border-bottom-color:var(--gold-bd)}
.hd{display:flex; align-items:center; flex-wrap:nowrap; gap:10px; height:var(--hd-h); max-width:var(--maxw);
  margin:0 auto; padding:0 20px}
/* Khi chật thì phần co lại là dòng mô tả nhỏ của brand (ellipsis), không phải thanh nav */
.hd .brand{display:flex; align-items:center; gap:10px; margin-right:auto; flex:0 1 auto; min-width:0}
.hd .logo-i{width:38px;height:38px;object-fit:contain; border-radius:0; flex:0 0 auto}
.hd .who{display:flex; flex-direction:column; line-height:1.25; min-width:0}
/* KHÔNG khai font ở đây nữa. Tên game trong header là <b class="brand-chu">,
   mà .brand-chu (bên dưới) mới là chỗ định nghĩa kiểu chữ thật: Be Vietnam Pro
   800 + tô vàng chuyển sắc. Chọn tử .hd .who b nặng ký hơn .brand-chu nên nó
   đè mất, kéo cả tên game về font thư pháp UKai cỡ 19px weight 400 — nét bút
   mảnh dính vào nhau, chữ Việt có dấu càng rối, và mất luôn màu vàng gradient.
   Giờ chỉ giữ lại mấy thuộc tính bố cục không đụng tới kiểu chữ. */
.hd .who b{white-space:nowrap; line-height:1.1}
/* Tên game trên header là ảnh chữ thư pháp bản vàng kim (nền header tối).
   Dưới 28px thì các nét bút dính vào nhau, không đọc được -> giữ 30px. */
.hd .who .brand-mark{height:30px; width:auto; display:block; margin-bottom:2px}
.hd .who span{font-size:11px; color:var(--ink-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.hd nav{display:flex; gap:0; flex:0 0 auto; justify-content:flex-end; flex-wrap:nowrap}
.hd nav a{font-family:var(--disp); font-weight:700; font-size:13px; color:var(--ink); padding:8px 8px;
  transition:color .2s,background .2s; white-space:nowrap; border:1px solid transparent}
.hd nav a:hover{color:var(--gold-2)}
.hd nav a.on{color:var(--gold-2); border-color:var(--gold-dim); background:var(--gold-dim)}
.hd .hcta{font-family:var(--disp); font-weight:700; font-size:14px; color:var(--ink); background:var(--accent);
  border:1px solid var(--gold-bd); padding:9px 16px; letter-spacing:.02em; white-space:nowrap; transition:background .15s,color .15s}
.hd .hcta:hover{background:var(--accent-h); color:#fff}
.hd .hghost{font-family:var(--disp); font-weight:600; font-size:14px; color:var(--gold-2); border:1px solid var(--gold-dim);
  background:rgba(20,28,32,.6); padding:9px 14px; white-space:nowrap}
.hd .hghost:hover{color:var(--gold-2); border-color:var(--gold-bd); background:var(--panel-tab)}
.burger{display:none; width:36px;height:36px;border:1px solid var(--gold-bd); background:none;
  color:var(--gold); font-size:18px; cursor:pointer; flex:0 0 auto; line-height:1}

.drawer{display:none; border-top:1px solid var(--gold-dim); background:rgba(14,20,24,.97); backdrop-filter:blur(8px);
  padding:12px 20px 18px; max-height:calc(100vh - var(--hd-h)); overflow:auto}
.drawer.open{display:block}
.drawer a{display:block; padding:11px 12px; color:var(--ink); font-family:var(--disp); font-weight:600; font-size:15px}
.drawer a:hover,.drawer a.on{background:var(--gold-dim); color:var(--gold-2)}
.drawer .sep{height:1px; background:var(--gold-dim); margin:10px 0}

/* ==========================================================================
   KHUNG TRANG NỘI DUNG
   ========================================================================== */
main.page{padding-top:calc(var(--hd-h) + 32px); padding-bottom:64px; min-height:70vh}
main.page > .wrap > .container,
main.page > .wrap > .container-fluid{max-width:100%; padding-left:0; padding-right:0}
.page-head{margin-bottom:28px; text-align:center}
.page-head h1{font-size:clamp(24px,4.4vw,34px); color:var(--title)}
.page-head h1 em{font-style:normal; color:var(--gold-2)}
.page-head p{color:var(--ink-soft); margin:8px 0 0; font-size:15px}

.acct-bar{display:flex; flex-wrap:wrap; align-items:center; gap:8px 18px; margin-bottom:24px;
  background-color:var(--panel-tab); border:1px solid var(--gold-dim); padding:13px 18px; font-size:15px;
  --brk-arm:12px; --brk-w:2px}
.acct-bar b{color:var(--gold-2); font-family:var(--disp); font-weight:700}
.acct-bar .coin{color:var(--gold-2); font-weight:600}
.acct-bar .sp{margin-left:auto}

.panel{background-color:var(--panel-2); border:1px solid var(--gold-dim); padding:24px;
  box-shadow:0 4px 24px rgba(0,0,0,.4)}

/* Form xác thực */
.auth{max-width:440px; margin:0 auto}
.auth .panel{padding:28px 26px 26px}
.auth h1{font-size:24px; text-align:center; color:var(--gold-2); margin-bottom:6px}
.auth .lead{text-align:center; color:var(--ink-soft); font-size:14.5px; margin:0 0 22px}
.auth .foot{text-align:center; margin-top:20px; color:var(--ink-soft); font-size:14.5px}

/* Ô đồng ý Chính sách bảo mật ở form đăng ký.
   align-items:flex-start chứ không center: câu chữ xuống 2 dòng trên màn hẹp,
   canh giữa thì ô tick trôi xuống lưng chừng đoạn văn trông rất lệch.
   Vùng bấm phủ cả dòng chữ vì bọc trong <label> — ô tick 16px một mình thì quá
   nhỏ so với đầu ngón tay. */
.dongy{display:flex; align-items:flex-start; gap:10px; margin:2px 0 18px;
  color:var(--ink-soft); font-size:13.5px; line-height:1.5; cursor:pointer}
.dongy input{flex:0 0 auto; width:17px; height:17px; margin:1px 0 0; accent-color:var(--gold);
  cursor:pointer}
.dongy a{color:var(--gold-2); text-decoration:underline; text-underline-offset:2px}
.dongy a:hover{color:var(--gold)}
/* Bản gọn cho ô đăng nhập ngoài trang chủ — chỗ đó chật hơn hẳn trang /Auth/Login.
   Lề dưới nhỏ vì ở đó có HAI ô tick xếp chồng (nhớ đăng nhập + đồng ý chính sách),
   để 12px như một ô thì cụm đó doãng ra trông rời rạc. */
.dongy.nho{font-size:12.5px; margin:0 0 7px}
.dongy.nho + .dongy.nho{margin-bottom:12px}
.dongy.nho input{width:15px; height:15px}

/* Dòng nhắc bảo mật ở trang nạp, và dòng phụ dưới form đăng nhập — cùng một
   vai trò: chữ nhỏ, mờ, không tranh chỗ với nút bấm chính. */
.pay-baomat{text-align:center; font-size:13px; color:var(--ink-dim); margin:0 0 14px}
.pay-baomat a{color:var(--gold-2); text-decoration:underline; text-underline-offset:2px}
.auth .foot.phu{margin-top:8px; font-size:13px}
.auth .foot.phu a{color:var(--ink-soft); text-decoration:underline; text-underline-offset:2px}
.auth .foot.phu a:hover{color:var(--gold-2)}

.fld{margin-bottom:16px}
.fld label{display:block; font-family:var(--disp); font-weight:600; font-size:11px; text-transform:uppercase; letter-spacing:.18em;
  color:var(--gold); margin-bottom:7px}
.fld input,.fld select,.fld textarea{width:100%; font-family:var(--body); font-size:15px; padding:12px 14px;
  border:1px solid var(--gold-dim); border-radius:0; background:var(--bg-2); color:var(--ink)}
.fld input::placeholder{color:var(--ink-dim)}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none; border-color:var(--gold-bd);
  box-shadow:0 0 0 2px rgba(217,173,66,.14)}
.check{display:flex; align-items:center; gap:9px; color:var(--ink-soft); font-size:14.5px; margin-bottom:16px}
.check input{width:17px;height:17px; accent-color:var(--gold); margin:0}

/* ==========================================================================
   NÚT KIỂU LOGO ANIME (Dragon Ball)
   Công thức gồm 5 lớp, thiếu lớp nào là mất chất:
     1. chữ rất đậm (800) + IN HOA + nghiêng nhẹ
     2. viền đen dày quanh từng nét chữ  -> 8 lớp text-shadow toả 8 hướng
        (KHÔNG dùng -webkit-text-stroke — xem ghi chú ngay trên .db > span)
     3. ruột chữ chuyển sắc vàng -> cam  -> background-clip:text
     4. bóng đổ cứng (không mờ) phía dưới chữ -> tạo khối nổi
     5. thân nút viền đen dày + gờ cứng bên dưới -> bấm xuống là gờ mất
   ========================================================================== */
.db{position:relative; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 26px; cursor:pointer; text-align:center; border-radius:12px;
  font-family:var(--body); font-weight:800; font-size:16px; text-transform:uppercase;
  letter-spacing:.03em; line-height:1.15; transform:skewX(-6deg);
  background:linear-gradient(180deg,#ff7a2f 0%,#e8321c 46%,#a5110a 100%);
  border:3px solid #180a02;
  box-shadow:0 5px 0 #180a02, 0 9px 18px rgba(0,0,0,.5),
    inset 0 2px 0 rgba(255,255,255,.4), inset 0 -6px 12px rgba(0,0,0,.28);
  transition:transform .12s, box-shadow .12s, filter .15s}
/* Chữ phải nằm trong 1 lớp riêng để nghiêng ngược lại cho dễ đọc */
/* Viền đen vẽ bằng 8 lớp text-shadow, KHÔNG dùng -webkit-text-stroke nữa.
   Stroke chỉ đẹp khi paint-order:stroke fill đẩy được viền xuống DƯỚI ruột
   chữ, mà paint-order cho chữ HTML thì Chromium 123 mới chạy — trình duyệt
   đóng gói Chromium cũ (Cốc Cốc...) vẫn vẽ viền ĐÈ LÊN ruột, chữ bết thành
   cục. Không dò được bằng @supports: thuộc tính này có từ lâu cho SVG nên ở
   đó feature query vẫn trả true dù chữ HTML không ăn. text-shadow thì trình
   duyệt nào cũng vẽ y hệt nhau. Hai bóng cuối là bóng khối 3D của bản gốc. */
.db > span{display:inline-block; transform:skewX(6deg); color:#ffe14d;
  text-shadow:
    -2px -2px 0 #180a02,  0 -2px 0 #180a02,  2px -2px 0 #180a02,
    -2px  0   0 #180a02,                     2px  0   0 #180a02,
    -2px  2px 0 #180a02,  0  2px 0 #180a02,  2px  2px 0 #180a02,
     0 3px 0 #7a1f00, 0 4px 0 rgba(0,0,0,.45)}
.db:hover{filter:brightness(1.07); transform:skewX(-6deg) translateY(-2px);
  box-shadow:0 7px 0 #180a02, 0 13px 24px rgba(0,0,0,.55),
    inset 0 2px 0 rgba(255,255,255,.45), inset 0 -6px 12px rgba(0,0,0,.28)}
.db:active{transform:skewX(-6deg) translateY(4px);
  box-shadow:0 1px 0 #180a02, 0 3px 8px rgba(0,0,0,.45),
    inset 0 2px 0 rgba(255,255,255,.3), inset 0 -4px 10px rgba(0,0,0,.3)}
.db.full{display:flex; width:100%}
/* Biến thể vàng kim — dùng cho nút phụ, đỡ chói khi đứng cạnh nút đỏ */
.db.vang{background:linear-gradient(180deg,#ffd76a 0%,#f0a81e 48%,#a86a06 100%)}
.db.vang > span{color:#fff6d8}
/* Biến thể nhỏ */
.db.nho{padding:9px 18px; font-size:13.5px}
.db.nho > span{text-shadow:
  -1.5px -1.5px 0 #180a02,  0 -1.5px 0 #180a02,  1.5px -1.5px 0 #180a02,
  -1.5px  0     0 #180a02,                       1.5px  0     0 #180a02,
  -1.5px  1.5px 0 #180a02,  0  1.5px 0 #180a02,  1.5px  1.5px 0 #180a02,
   0 2px 0 #7a1f00}

/* ==========================================================================
   NÚT — kiểu ngoặc góc, không còn nút 3D
   ========================================================================== */
.btn{--brk:var(--gold); --brk-w:2px; --brk-arm:9px;
  font-family:var(--disp); font-weight:700; font-size:15px; letter-spacing:.02em; cursor:pointer;
  color:var(--ink); background-color:var(--accent); border:1px solid var(--gold-bd);
  padding:12px 22px; border-radius:0; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  text-align:center; text-decoration:none; white-space:nowrap;
  background-image:
    linear-gradient(var(--brk),var(--brk)),linear-gradient(var(--brk),var(--brk)),
    linear-gradient(var(--brk),var(--brk)),linear-gradient(var(--brk),var(--brk)),
    linear-gradient(var(--brk),var(--brk)),linear-gradient(var(--brk),var(--brk)),
    linear-gradient(var(--brk),var(--brk)),linear-gradient(var(--brk),var(--brk));
  background-repeat:no-repeat;
  background-size:
    var(--brk-arm) var(--brk-w),var(--brk-w) var(--brk-arm),
    var(--brk-arm) var(--brk-w),var(--brk-w) var(--brk-arm),
    var(--brk-arm) var(--brk-w),var(--brk-w) var(--brk-arm),
    var(--brk-arm) var(--brk-w),var(--brk-w) var(--brk-arm);
  background-position:0 0,0 0,100% 0,100% 0,0 100%,0 100%,100% 100%,100% 100%;
  transition:background-size .15s,background-color .15s,border-color .15s,color .15s}
.btn:hover{--brk:var(--gold-2); --brk-arm:13px; background-color:var(--accent-h); color:#fff}
.btn:active{transform:translateY(1px); background-color:var(--accent-d)}
.btn.alt{--brk:rgba(217,173,66,.55); background-color:rgba(20,28,32,.6); color:var(--gold-2)}
.btn.alt:hover{--brk:var(--gold-2); background-color:var(--panel-tab); color:var(--gold-2)}
.btn.ghost{--brk:rgba(217,173,66,.35); background-color:transparent; color:var(--ink-soft)}
.btn.ghost:hover{--brk:var(--gold); color:var(--gold-2)}
.btn.full{display:flex; width:100%}
.btn:focus-visible{outline:2px solid var(--gold-2); outline-offset:2px}
.btn[disabled]{opacity:.5; cursor:not-allowed}

/* Thông báo */
.note{padding:11px 14px; font-size:14.5px; font-weight:600; margin-bottom:16px; border:1px solid; border-radius:0}
.note.err{background:rgba(232,90,74,.12); border-color:var(--red); color:#ff9c8c}
.note.ok{background:rgba(111,191,90,.12); border-color:var(--green); color:#a8e09a}
.note.info{background:rgba(90,168,232,.12); border-color:var(--blue); color:#a5cff2}

.custom-toast{display:none; position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:2000;
  border-radius:0; border:1px solid var(--gold-bd); padding:12px 20px; font-weight:600;
  max-width:min(520px,92vw); box-shadow:0 10px 30px rgba(0,0,0,.6)}

/* ==========================================================================
   LỚP TƯƠNG THÍCH BOOTSTRAP 5
   ========================================================================== */
.card{background-color:var(--panel-2); border:1px solid var(--gold-dim); color:var(--ink);
  box-shadow:0 4px 24px rgba(0,0,0,.4)}
.card-body{padding:22px}
.card-header,.card-footer{background:rgba(0,0,0,.28); border-color:var(--panel-line); color:var(--gold-2);
  font-family:var(--disp); font-weight:700}
.card-title{color:var(--title); font-family:var(--disp); font-weight:700}

.btn.btn-primary,.btn.btn-info,.btn.btn-secondary{background-color:var(--accent); border:1px solid var(--gold-bd); color:var(--ink)}
.btn.btn-success{background-color:var(--accent); border:1px solid var(--gold-bd); color:var(--ink)}
.btn.btn-danger,.btn.btn-warning{--brk:rgba(217,173,66,.55); background-color:rgba(20,28,32,.6);
  border:1px solid var(--gold-dim); color:var(--gold-2)}
.btn.btn-light,.btn.btn-outline-light,.btn.btn-outline-secondary{--brk:rgba(217,173,66,.35);
  background-color:transparent; border:1px solid var(--gold-dim); color:var(--ink-soft)}
.btn.btn-dark{background-color:var(--panel-tab); border:1px solid var(--gold-dim); color:var(--ink)}
.btn.btn-block,.btn.w-100{display:flex; width:100%}
.btn-menu{border-radius:0 !important}

.form-control,.form-select,.form-control:disabled{font-family:var(--body); padding:11px 14px;
  border:1px solid var(--gold-dim); border-radius:0; background:var(--bg-2); color:var(--ink)}
.form-control::placeholder{color:var(--ink-dim)}
.form-control:focus,.form-select:focus{background:var(--bg-2); color:var(--ink); border-color:var(--gold-bd);
  box-shadow:0 0 0 2px rgba(217,173,66,.14)}
.form-select option{background:var(--panel); color:var(--ink)}
.form-label,form label{color:var(--ink-soft); font-weight:600; font-size:14px}
.form-check-input{background-color:var(--bg-2); border-color:var(--gold-dim); border-radius:0}
.form-check-input:checked{background-color:var(--gold); border-color:var(--gold-d)}
.input-group-text{background:var(--panel-tab); border:1px solid var(--gold-dim); border-radius:0; color:var(--ink-soft)}

.alert{border-radius:0; border:1px solid; font-weight:600}
.alert-info,.alert-primary{background:rgba(90,168,232,.12); border-color:var(--blue); color:#a5cff2}
.alert-success{background:rgba(111,191,90,.12); border-color:var(--green); color:#a8e09a}
.alert-danger,.alert-warning{background:rgba(232,90,74,.12); border-color:var(--red); color:#ff9c8c}
.alert-secondary,.alert-light,.alert-dark{background:var(--panel); border-color:var(--panel-line); color:var(--ink-soft)}

.table{--bs-table-color:var(--ink); --bs-table-bg:transparent; --bs-table-border-color:var(--panel-line);
  --bs-table-striped-color:var(--ink); --bs-table-striped-bg:rgba(255,255,255,.025);
  --bs-table-hover-color:var(--ink); --bs-table-hover-bg:rgba(217,173,66,.07);
  color:var(--ink); border-color:var(--panel-line)}
.table > :not(caption) > * > *{background-color:transparent; color:var(--ink); border-bottom-color:var(--panel-line)}
.table thead th{color:var(--gold-2); font-family:var(--disp); font-weight:700; letter-spacing:.06em;
  background:rgba(0,0,0,.32) !important; border-bottom:1px solid var(--gold-bd) !important}
.table-responsive{border-radius:0}

.modal-content{background-color:var(--panel-2); border:1px solid var(--gold-bd); color:var(--ink);
  --brk-arm:18px; --brk-w:4px; --brk:gold}
.modal-header,.modal-footer{border-color:var(--panel-line)}
.modal-title{color:var(--title); font-family:var(--disp); font-weight:700}
.btn-close{filter:invert(1) sepia(1) saturate(4) hue-rotate(5deg)}

.badge.bg-danger{background:var(--red) !important}
.badge.bg-success{background:var(--green-d) !important}
.badge.bg-warning{background:var(--gold-d) !important; color:#1a1208 !important}
.list-group-item{background:var(--panel); border-color:var(--panel-line); color:var(--ink)}
.nav-tabs{border-bottom-color:var(--panel-line)}
.nav-tabs .nav-link{color:var(--ink-soft); border:none; font-family:var(--disp); font-weight:700; border-radius:0}
.nav-tabs .nav-link.active{color:var(--gold-2); background:var(--panel-tab); border:1px solid var(--gold-dim);
  border-bottom-color:transparent; border-radius:0}
.text-muted{color:var(--ink-dim) !important}
.bg-light:not(.badge){background:var(--panel) !important; color:var(--ink)}
.bg-white{background:var(--panel) !important; color:var(--ink)}
.border{border-color:var(--panel-line) !important}
.text-danger1{color:var(--gold-2)}
.dropdown-menu{background:var(--panel); border:1px solid var(--gold-dim); border-radius:0}
.dropdown-item{color:var(--ink)}
.dropdown-item:hover{background:var(--gold-dim); color:var(--gold-2)}
.progress{background:var(--bg-2); border:1px solid var(--gold-dim); border-radius:0}
.progress-bar{background:linear-gradient(90deg,var(--gold-d),var(--gold))}
.accordion-item,.accordion-button{background:var(--panel); color:var(--ink); border-color:var(--panel-line); border-radius:0}
.accordion-button:not(.collapsed){background:var(--gold-dim); color:var(--gold-2)}

/* ==========================================================================
   FOOTER
   ========================================================================== */
footer.ft{border-top:1px solid var(--gold-dim); background:var(--bg-2); position:relative}
/* Dải ảnh đầu footer — chạy trên MỌI trang nên sai ảnh là sai toàn site.
   Trước dùng footer.jpg: ảnh chụp game pixel khác (ba nhân vật kiếm/cung/phù
   thuỷ trong rừng), mờ 32% nhưng vẫn đọc ra được, mà lại nằm ngay trên dòng
   chữ "Rồng Thần Chibi". Đổi sang cảnh Namek — cùng tấm đang làm nền hero nên
   đầu và chân trang ăn khớp một thế giới.
   Bỏ luôn image-rendering:pixelated: tấm cũ là pixel art nên cần, tấm này là
   tranh vẽ mượt, để nearest-neighbour thì thu nhỏ ra răng cưa. */
.ft .strip{height:clamp(120px,13vw,250px); background:url('/Assets/Images/background_home.webp') center 61%/cover no-repeat;
  opacity:.32}
.ft .fin{text-align:center; padding:30px 20px; display:flex; flex-direction:column; align-items:center; gap:14px;
  margin-top:-40px; position:relative}
.ft .fin img{width:76px; image-rendering:pixelated; filter:drop-shadow(0 4px 16px rgba(92,74,114,.5))}
.ft .flinks{display:flex; gap:8px 22px; flex-wrap:wrap; justify-content:center}
.ft .flinks a{color:var(--ink-soft); font-family:var(--disp); font-weight:600; font-size:14px}
.ft .flinks a:hover{color:var(--gold-2)}
.ft small{color:var(--ink-dim)}

/* ==========================================================================
   TRANG CHỦ KIỂU CỔNG GAME (.pt-*)
   Bố cục theo dạng portal MMO Việt: thanh nav chia hai bên + logo giữa, hero
   toàn màn, menu dọc bên phải, thanh hành động đè lên đáy hero (top - nút chơi
   ngay - đăng nhập - nạp), rồi tới khối tin tức có thẻ chuyển.
   Chỉ index.php dùng khối này; các trang trong vẫn dùng Header/Footer cũ.
   ========================================================================== */
.pt-body{background:var(--bg)}
/* Thu phóng cả trang: JS đặt thẳng zoom lên thẻ <html> (xem cuối index.php),
   KHÔNG đặt lên khối bọc này.
   Lý do: thanh nav trên và menu dọc đều position:fixed. Fixed luôn neo vào
   khung nhìn, nên nếu zoom nằm ở khối bọc bên trong thì hai thứ đó đứng ngoài
   phạm vi zoom -> chúng giữ nguyên cỡ trong khi phần còn lại nhỏ đi, thành ra
   nav chen nhau và menu to lố. Đặt zoom lên <html> thì chính khung nhìn được
   tính lại, fixed cũng scale theo.
   Bên trong TUYỆT ĐỐI không dùng vw/vh: hai đơn vị này vẫn đo theo màn thật
   rồi bị nhân thêm zoom -> sai gấp đôi. */
.pt-scale{}

/* --- thanh trên --- */
.pt-top{position:fixed; inset:0 0 auto 0; z-index:1000; transition:background .25s,border-color .25s;
  background:linear-gradient(180deg,rgba(10,14,17,.85),rgba(10,14,17,0)); border-bottom:1px solid transparent}
.pt-top.solid{background:rgba(10,14,17,.96); backdrop-filter:blur(8px); border-bottom-color:var(--gold-dim)}
.pt-top-in{max-width:1180px; margin:0 auto; padding:0 20px; height:76px; display:flex; align-items:center; gap:16px}
.pt-nav{display:flex; gap:4px; flex:1 1 0; min-width:0}
.pt-nav-r{justify-content:flex-end}
/* Mục nav: gạch chân lửa vát chéo thay cho ô nền bo tròn */
.pt-nav a{position:relative; font-family:var(--disp); font-weight:600; font-size:13px; text-transform:uppercase;
  letter-spacing:.04em; color:var(--ink-soft); padding:9px 12px; white-space:nowrap; border:0;
  transition:color .2s}
.pt-nav a::after{content:""; position:absolute; left:10px; right:10px; bottom:4px; height:2px;
  background:var(--gold); transform:scaleX(0) skewX(-20deg); transform-origin:left;
  transition:transform .22s}
.pt-nav a:hover{color:var(--ink)}
.pt-nav a:hover::after{transform:scaleX(1) skewX(-20deg)}
.pt-nav a.on{color:var(--gold-2)}
.pt-nav a.on::after{transform:scaleX(1) skewX(-20deg)}
.pt-nav a.pt-me{color:var(--gold-2); border:1px solid var(--gold-bd); background:var(--accent)}
.pt-logo{flex:0 0 auto; display:flex; align-items:center; gap:10px}
.pt-logo img{height:40px; width:auto; display:block}
.pt-logo .pt-logo-mark{height:32px}
.pt-burger{display:none; width:38px; height:38px; border:1px solid var(--gold-bd); background:none;
  color:var(--gold); font-size:18px; cursor:pointer; line-height:1}
.pt-drawer{display:none; background:rgba(10,14,17,.98); border-top:1px solid var(--gold-dim); padding:10px 20px 16px}
.pt-drawer.open{display:block}
.pt-drawer a{display:block; padding:11px 12px; color:var(--ink); font-family:var(--disp); font-weight:600; font-size:15px}
.pt-drawer a:hover{background:var(--gold-dim); color:var(--gold-2)}
.pt-drawer .pt-sep{height:1px; background:var(--gold-dim); margin:8px 0}

/* --- hero --- */
/* align-items:flex-start: logo nằm ở 1/3 trên, nhân vật neo đáy — tách nhau
   theo CHIỀU DỌC nên không tranh chỗ ngang nhau như lúc hero canh giữa.
   Chiều cao do JS đặt (--hero-h): khối scale cấm dùng vh, mà để cứng 880px thì
   trên laptop 1366x768 thanh hành động rơi hẳn xuống dưới nếp gấp — người mở
   trang chỉ thấy logo, phải cuộn mới thấy nút đăng nhập và Chơi Ngay. */
.pt-hero{position:relative; min-height:var(--hero-h,760px); display:flex; align-items:flex-start; justify-content:center;
  overflow:hidden}
/* Ảnh nền do index.php gắn inline kèm ?v=filemtime (chống cache). Ở đây chỉ
   khai cách trải ảnh. 50% 38% đẩy khung lên phía trời sáng, để dải chữ thư pháp
   ĐEN không rơi trúng vách đá tối ở nửa dưới ảnh. */
.pt-hero-bg{position:absolute; inset:0; background-position:50% 38%; background-size:cover;
  background-repeat:no-repeat}
/* Ảnh nền Namek rất sáng và rất RỰC: chỉ tối nhẹ ở trên cho thanh nav đọc được,
   giữa để gần như trong veo cho bầu trời xanh lá còn ra màu, tối mạnh ở đáy để
   thanh hành động (nền tối) nối liền vào ảnh chứ không cắt ngang cụt lủn.
   Ám xanh lục thay vì xanh đen — phủ tông lạnh xanh dương lên trời xanh lá sẽ
   ra màu xám bùn. */
.pt-hero-veil{position:absolute; inset:0; background:linear-gradient(180deg,
  rgba(6,18,12,.58) 0%, rgba(6,18,12,.06) 24%, rgba(6,18,12,.10) 54%, rgba(8,14,18,.9) 100%)}
/* padding-bottom 96px là DẢI AN TOÀN, không phải khoảng thở trang trí:
   thanh hành động bên dưới kéo margin-top:-72px để quả cầu thò lên hero.
   Hero lại là min-height — cửa sổ rộng mà THẤP (zoom đẩy lên, chiều cao quy
   đổi chạm sàn 620px) thì hero co về đúng chiều cao nội dung, hàng "8 Nhân
   vật / 24/7 / Free" và bảy viên ngọc nằm sát mép đáy, quả cầu + hai tấm đè
   thẳng lên chữ (lỗi gặp trên Cốc Cốc màn 1853px). Dải 96px này bảo đảm 72px
   thò lên chỉ ăn vào khoảng trống. Hai nhánh mobile tự khai lại padding đủ
   4 cạnh nên không hưởng dải này — bên đó thanh hành động margin-top DƯƠNG,
   không đè được. */
.pt-hero-in{position:relative; z-index:3; text-align:center; padding:92px 20px 96px}

/* Cụm nút trong hero — điểm dừng của mắt giữa logo và đội hình */
.pt-hero-nut{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:20px}
/* Ba con số tin cậy, đặt ngay dưới nút, ngăn bằng vạch mảnh */
.pt-hero-so{display:flex; gap:0; justify-content:center; margin:22px auto 0; padding:0; list-style:none;
  width:fit-content; background:rgba(10,13,17,.5); border:1px solid var(--gold-dim);
  backdrop-filter:blur(6px);
  clip-path:polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%)}
.pt-hero-so li{padding:9px 26px; text-align:center; line-height:1.2}
.pt-hero-so li + li{border-left:1px solid var(--gold-dim)}
.pt-hero-so b{display:block; font-size:19px; font-weight:800; color:var(--gold-2)}
.pt-hero-so span{font-size:11.5px; color:var(--ink-soft)}
/* Quầng sáng ấm sau khối chữ. Ảnh nền có chỗ sáng chỗ tối, chữ thư pháp đen rơi
   trúng vách đá là mất hút — lớp này bảo đảm luôn có nền sáng phía sau. */
/* Neo theo ĐÁY khối chữ chứ không theo % chiều cao cha: sau khi hero đổi sang
   align-items:flex-start, mốc 46% rơi lên trên logo, bỏ dòng khẩu hiệu nằm trần
   trên ảnh nền — mà dòng đó lại đang để màu tối vì tưởng có quầng sáng đỡ. */
/* ĐỔI CHIỀU so với bản cũ: hồi ảnh nền là vách đá tối, lớp này là quầng sáng
   kem để đỡ chữ thư pháp ĐEN. Nền Namek thì ngược hẳn — trời xanh lá chói,
   quầng kem chồng lên chỉ ra một mảng vàng bùn mà chữ vẫn chìm. Nay là tấm
   che TỐI, ám lục cho ăn nền, để logo và chữ sáng nổi bật lên trên. */
.pt-hero-in::before{content:""; position:absolute; z-index:-1; left:50%; bottom:0; transform:translate(-50%,18%);
  width:920px; height:460px; pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(4,16,11,.58) 0%, rgba(4,16,11,.3) 45%,
    rgba(4,16,11,0) 74%)}
.pt-hero-mark{width:720px; height:auto; display:block; margin:0 auto 14px;
  filter:drop-shadow(0 0 22px rgba(255,255,255,.9)) drop-shadow(0 0 6px rgba(255,255,255,.75))}

/* Logo Rồng Thần Chibi — nền tối của ảnh đã được TÁCH HẲN bằng tô loang, nên KHÔNG
   dùng mask radial nữa. Chính cái mask đó là thủ phạm làm viền logo mờ nhoè.
   Khổ hạ 560 -> 470px: logo cũ nuốt gần hết khoảng giữa thanh nav và đội hình,
   không còn chỗ thở cho khẩu hiệu, cụm nút và hàng bảy viên ngọc bên dưới. */
.pt-logo-3d{position:relative; width:-moz-fit-content; width:fit-content; margin:0 auto}

/* Khối ngoài lo NHỊP THỞ (scale + xoay quanh tâm), khối trong lo GÓC NHÌN.
   Tách hai lớp vì một phần tử chỉ có một thuộc tính transform: gộp chung thì
   animation sẽ đè mất góc nghiêng do JS đặt, logo cứ giật về 0 mỗi vòng lặp. */
.pt-hero-logo{margin:0 auto 6px; line-height:0; animation:ptLogoTho 7s ease-in-out infinite}

/* CHỈ XOAY, KHÔNG DỜI CHỖ.
   --rx/--ry : con trỏ chuột hoặc cảm biến nghiêng của điện thoại
   --rs/--rz : vị trí cuộn trang
   Tất cả đều là phép quay quanh tâm nên tâm logo đứng nguyên một điểm, chỉ có
   mặt logo hướng theo người xem — đúng yêu cầu "giữ nguyên vị trí". */
.pt-hero-logo img{width:470px; max-width:100%; height:auto; display:block; margin:0 auto;
  transform:perspective(1000px)
            rotateX(calc(var(--rx,0deg) + var(--rs,0deg)))
            rotateY(var(--ry,0deg))
            rotateZ(var(--rz,0deg));
  transition:transform .45s cubic-bezier(.2,.7,.3,1); will-change:transform;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.55)) drop-shadow(0 0 30px rgba(255,140,40,.25))}
@keyframes ptLogoTho{
  0%,100%{transform:scale(1)     rotate(0deg)}
  50%    {transform:scale(1.018) rotate(-.7deg)}
}

/* Vòng TIA SÁNG kiểu Dragon Ball quay chậm sau logo. Căn giữa bằng margin âm
   chứ không bằng translate, để keyframes quay không phải chép lại phép căn. */
.pt-tia{position:absolute; left:50%; top:50%; z-index:-1; pointer-events:none;
  --tia-d:820px; width:var(--tia-d); height:var(--tia-d);
  margin:calc(var(--tia-d) / -2) 0 0 calc(var(--tia-d) / -2);
  background:repeating-conic-gradient(from 0deg,
    rgba(255,206,110,.22) 0deg 3.6deg, rgba(255,206,110,0) 3.6deg 13deg);
  -webkit-mask-image:radial-gradient(closest-side, transparent 15%, #000 33%, transparent 74%);
  mask-image:radial-gradient(closest-side, transparent 15%, #000 33%, transparent 74%);
  animation:ptTiaQuay 52s linear infinite}
@keyframes ptTiaQuay{to{transform:rotate(360deg)}}

/* --- BẢY VIÊN NGỌC RỒNG (vẽ thuần CSS) --- */
.pt-ngoc{display:flex; justify-content:center; gap:10px; margin:18px auto 0; padding:0; list-style:none}
.pt-ngoc li{position:relative; width:26px; height:26px; border-radius:50%; --ngoc-r:5px;
  background:radial-gradient(circle at 34% 27%, #fff8e2 0 7%, #ffd66a 26%, #ff9c1f 62%, #b95000 100%);
  box-shadow:0 0 14px rgba(255,150,40,.5), 0 3px 6px rgba(0,0,0,.45),
    inset -3px -4px 8px rgba(130,45,0,.5), inset 3px 3px 6px rgba(255,244,205,.55);
  animation:ptNgocNoi 3.4s ease-in-out var(--tre,0s) infinite}
/* Ngôi sao đỏ: quay ra vị trí trên vành rồi quay NGƯỢC lại đúng chừng ấy độ,
   để sao nào cũng đứng thẳng chứ không nằm nghiêng theo vành.
   --r trong style là CỜ 0/1 (có lệch ra vành hay không), còn bán kính thật nằm
   ở --ngoc-r của viên ngọc. Phải tách vậy mới đổi được cỡ ở @media: biến khai
   thẳng trong thuộc tính style luôn thắng mọi khai báo trong file CSS. */
.pt-ngoc li i{position:absolute; left:50%; top:50%; width:7px; height:7px; margin:-3.5px 0 0 -3.5px;
  background:#d81f0d;
  clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
  transform:rotate(var(--g,0deg)) translateY(calc(-1 * var(--r,0) * var(--ngoc-r,5px)))
            rotate(calc(-1 * var(--g,0deg)))}
@keyframes ptNgocNoi{0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)}}

/* --- HẠT KHÍ BAY LÊN --- */
/* z-index 1: trên ảnh nền và lớp phủ, dưới đội hình (2) và chữ hero (3) */
.pt-khi{position:absolute; inset:0; z-index:1; overflow:hidden; pointer-events:none}
.pt-khi i{position:absolute; left:var(--l); bottom:-20px; width:var(--s); height:var(--s);
  border-radius:50%; opacity:0;
  background:radial-gradient(circle at 40% 35%, #fff 0 18%, var(--c,#ffb347) 48%, rgba(255,120,40,0) 74%);
  animation:ptKhiBay var(--d,11s) linear var(--t,0s) infinite}
@keyframes ptKhiBay{
  0%  {opacity:0;   transform:translateY(0) scale(.5)}
  10% {opacity:.9}
  70% {opacity:.65}
  100%{opacity:0;   transform:translateY(-680px) scale(1.15)}
}

/* Tên game dựng bằng CHỮ (tạm thay cho file logo) — cùng công thức với nút .db:
   viền đen dày + ruột chuyển sắc vàng->đỏ + bóng cứng tạo khối. */
.pt-hero-chu{margin:0 0 6px; font-family:var(--body); font-weight:800;
  font-size:clamp(46px,7vw,104px); line-height:1.02; letter-spacing:-.01em;
  text-transform:uppercase; transform:skewX(-7deg)}
.pt-hero-chu > span{position:relative; display:inline-block;
  background:linear-gradient(180deg,#fff3b0 4%,#ffc93c 34%,#ff7a1a 62%,#e01f0d 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 5px 0 #4a0a00) drop-shadow(0 8px 16px rgba(0,0,0,.6))}
/* Lớp chữ thứ hai nằm dưới, chỉ để tạo VIỀN ĐEN — không thể vừa tô chuyển sắc
   vừa kẻ viền trên cùng một lớp vì background-clip:text nuốt mất text-stroke. */
.pt-hero-chu > span::before{content:attr(data-chu); position:absolute; inset:0; z-index:-1;
  -webkit-text-stroke:11px #180a02; color:#180a02}
/* Chữ thay cho ấn hiệu emblem đã gỡ — dùng chung cho header, chân trang
   trang chủ và header/footer của các trang trong. */
.pt-foot-chu, .brand-chu, .ft-chu{font-family:var(--body); font-weight:800; letter-spacing:-.01em;
  background:linear-gradient(180deg,#ffe9a6,#ffb347 55%,#ff5a2b);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.75)); white-space:nowrap}
.pt-foot-chu{font-size:26px; display:block}
.brand-chu{font-size:20px; line-height:1.1}
.ft-chu{font-size:24px; display:block}

.pt-logo-chu{font-family:var(--body); font-weight:800; font-size:22px; letter-spacing:-.01em;
  background:linear-gradient(180deg,#ffe9a6,#ffb347 55%,#ff5a2b);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.85)); white-space:nowrap}
/* Trước để màu nâu tối vì nằm trên quầng sáng kem. Quầng đó nay đã đổi thành
   tấm che tối cho hợp nền Namek, nên chữ phải lật sang màu SÁNG — giữ nâu là
   chìm nghỉm. Ám vàng nhạt cho ăn với logo. */
.pt-hero-sub{margin:0; font-family:var(--disp); font-weight:600; font-size:17px; letter-spacing:.2em;
  text-transform:uppercase; color:#ffeec2;
  text-shadow:0 2px 10px rgba(0,0,0,.9), 0 0 22px rgba(0,0,0,.65), 0 0 3px rgba(0,0,0,.8)}

/* nhãn 18+ */
.pt-age{position:absolute; z-index:4; top:88px; left:20px; display:flex; align-items:center; gap:8px;
  background:rgba(10,14,17,.72); border:1px solid var(--gold-dim); padding:6px 10px; max-width:250px}
.pt-age b{font-family:var(--disp); color:#ff9c8c; font-size:19px; line-height:1}
.pt-age i{font-style:normal; font-size:10px; line-height:1.35; color:var(--ink-soft)}

/* --- 2 nhân vật đứng viền khung hero ---
   position:ABSOLUTE (không phải fixed) và nằm trong .pt-hero: nhân vật là một
   phần của ảnh nền, cuộn trang thì trôi lên khuất theo hero, không bị ghim vào
   màn hình rồi lẽo đẽo bám theo. .pt-hero có overflow:hidden nên chân nhân vật
   bị cắt ở đáy hero, không tràn xuống dưới.
   z-index 2: trên ảnh nền + lớp phủ, dưới chữ hero (3) và menu dọc (6).
   pointer-events:none để không chặn click vào nút phía sau. */
/* ---- ĐỘI HÌNH RẢI QUANH LOGO ----
   Bản trước xếp hai CỘT CHÉO đều tăm tắp hai bên. Nay rải tản mát quanh khối
   chữ giữa màn: hai người chạm đất ở hai góc dưới, số còn lại lơ lửng cao thấp
   so le, cỡ to nhỏ không ai giống ai. Toạ độ ô do PHP gắn (--x là TÂM nhân vật
   theo % bề ngang hero), người thì được xóc ngẫu nhiên vào ô mỗi lần tải trang.

   Bốn biến chỉnh khổ — đổi ở @media là cả vòng co theo màn, không phải viết
   lại toạ độ từng người:
     --nv-cao : chiều cao người to nhất (người khác = --z nhân vào)
     --vong-h : chiều cao vòng, là mốc để --y tính theo %
     --nv-mo  : độ mờ chung của cả vòng
     --x-he   : hệ số NỞ NGANG, đo từ tim màn ra. Nâng lên là cả vòng dạt ra
                mép, nhường giữa cho chữ; --y-he tương tự theo chiều dọc */
.pt-vong{position:absolute; left:0; right:0; bottom:0; z-index:2;
  --nv-cao:400px; --vong-h:500px; --nv-mo:1; --x-he:1%; --y-he:1%;
  height:var(--vong-h);
  pointer-events:none; user-select:none}

/* Một người trong vòng: <span> bọc ngoài giữ chỗ và vẽ hào quang, <img> bên
   trong là nhân vật. Bắt buộc phải có lớp bọc — thẻ img không có ::before.
   left tính từ TIM màn ra hai bên nên --x-he mới bóp/nở được cả vòng; kèm
   translateX(-50%) để --x là tâm người chứ không phải mép trái. */
.pt-linh{position:absolute; display:block; line-height:0;
  left:calc(50% + (var(--x) - 50) * var(--x-he));
  bottom:calc(var(--y) * var(--y-he));
  height:calc(var(--z) * var(--nv-cao));
  /* width:max-content BẮT BUỘC. Khối absolute chỉ khai left (right:auto) thì bề
     ngang là "co vừa nội dung NHƯNG không quá chỗ trống còn lại tính từ left ra
     mép cha". Người đứng ở ô x:97% chỉ còn ~38px chỗ trống -> bị nén dẹp còn
     một vệt. max-content bỏ qua cái trần đó, lấy đúng bề ngang theo tỉ lệ ảnh,
     phần thừa cứ để .pt-hero overflow:hidden xén. */
  width:max-content;
  transform:translateX(-50%) scaleX(var(--lat,1));
  /* Hiện dần + nhô lên khi vào trang. Dùng thuộc tính translate riêng chứ không
     nhét vào transform: transform đang phải giữ phép lật mặt, gộp chung thì mỗi
     lần đổi vị trí lại phải chép lại scaleX, sai một chỗ là nhân vật quay lưng. */
  translate:0 26px; opacity:0;
  transition:opacity .55s ease var(--tre,0s),
             translate .8s cubic-bezier(.16,.84,.44,1) var(--tre,0s)}
/* Xa mờ gần rõ. Tính THẲNG từ --z chứ không dò chuỗi trong thuộc tính style:
   ba bộ chọn [style*="--z:0.78"] kiểu cũ đều hỏng vì "--z:0.6" khớp nhầm cả
   "0.66". Cách này đúng với mọi giá trị z, kể cả khi PHP in 1.00 thành "1". */
.pt-vong.vao .pt-linh{opacity:calc((.52 + var(--z) * .48) * var(--nv-mo)); translate:0 0}

/* Người lơ lửng (mọi ô trừ 2 ô chạm đất đầu mảng) bồng bềnh nhẹ cho ra dáng
   đang bay quanh logo, mỗi người lệch nhịp một chút theo --tre. */
.pt-linh:nth-child(n+3) img{animation:ptLoLung 5.4s ease-in-out var(--tre,0s) infinite}
@keyframes ptLoLung{0%,100%{translate:0 0} 50%{translate:0 -11px}}
.pt-linh img{height:100%; width:auto; display:block;
  filter:drop-shadow(0 8px 16px rgba(0,0,0,.5)) brightness(calc(.62 + var(--z) * .38));
  /* Chân tan dần ở 18% cuối: thanh hành động đè lên sẽ trông như nhân vật chìm
     vào bóng tối, thay vì bị cắt ngang một nhát phẳng lì. */
  -webkit-mask-image:linear-gradient(180deg, #000 82%, transparent 100%);
  mask-image:linear-gradient(180deg, #000 82%, transparent 100%)}

/* HÀO QUANG KHÍ — dấu hiệu Dragon Ball rõ nhất. Vầng sáng bầu dục toả sau lưng,
   màu lấy từ --hao PHP gắn theo từng nhân vật, phập phồng lệch nhịp nhờ --tre.
   z-index:-1 nằm sau ảnh của CHÍNH mắt xích đó (mỗi .pt-linh là một tầng xếp
   lớp riêng nhờ có z-index), không lọt ra sau người bên cạnh. */
.pt-linh::before{content:""; position:absolute; z-index:-1; left:50%; bottom:4%;
  width:152%; height:86%; margin-left:-76%; border-radius:50%;
  background:radial-gradient(ellipse at 50% 60%,
    color-mix(in srgb, var(--hao,#ffb347) 55%, transparent) 0%,
    color-mix(in srgb, var(--hao,#ffb347) 22%, transparent) 38%,
    transparent 70%);
  filter:blur(10px);
  animation:ptHao 3.6s ease-in-out var(--tre,0s) infinite}
@keyframes ptHao{
  0%,100%{transform:scale(1)    ; opacity:.5}
  50%    {transform:scale(1.09) ; opacity:.85}
}
/* Trình duyệt chưa có color-mix vẫn phải thấy hào quang, chỉ là màu cam chung */
@supports not (background: color-mix(in srgb, red 50%, transparent)){
  .pt-linh::before{background:radial-gradient(ellipse at 50% 60%,
    rgba(255,179,71,.5) 0%, rgba(255,179,71,.2) 38%, transparent 70%)}
}

/* Không ẩn theo bề ngang màn nữa: cả trang nằm trong khối .pt-scale, màn nhỏ
   thì mọi thứ cùng thu nhỏ theo, đội hình vẫn đứng đúng tỉ lệ hai bên. */
/* Tắt hiệu ứng chuyển động ở hệ điều hành thì hiện thẳng, không trượt không thở */
@media (prefers-reduced-motion:reduce){
  .pt-linh{transition:none; translate:0 0}
  .pt-linh img, .pt-linh::before, .pt-khi i, .pt-ngoc li, .pt-tia, .pt-hero-logo{animation:none}
  .pt-hero-logo img{transition:none}
}

/* --- menu dọc bên phải --- */
/* Menu dọc kiểu KÍNH MỜ (liquid glass)
   position:fixed -> bám theo màn hình suốt cả trang, không trôi mất theo hero.
   Hiệu ứng kính gồm 4 lớp chồng nhau, thiếu lớp nào là mất chất "kính":
     1. backdrop-filter blur+saturate : làm nhoè và tăng rực thứ nằm phía sau
     2. nền gradient trắng rất nhạt   : lớp thuỷ tinh
     3. inset trắng ở mép trên        : vệt sáng phản chiếu (specular)
     4. shadow ngoài                  : nhấc tấm kính khỏi mặt trang
   Đặt giữa theo chiều dọc; nhân vật phía sau nhìn xuyên qua kính, đúng ý đồ. */
.pt-rail{position:fixed; z-index:6; right:10px; top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; width:140px; padding:5px;
  border-radius:0; isolation:isolate;
  /* Tấm GIÁP THÉP: nền graphit đặc hơn kính, cắt vát 2 góc chéo nhau cho hợp
     tông đối kháng. Vẫn giữ backdrop-filter nhẹ để thấy nhân vật mờ phía sau. */
  clip-path:polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  background:linear-gradient(180deg, rgba(30,36,46,.82) 0%, rgba(12,15,19,.9) 100%);
  backdrop-filter:blur(8px) saturate(120%);
  -webkit-backdrop-filter:blur(8px) saturate(120%);
  border:1px solid rgba(255,90,43,.3);
  box-shadow:0 20px 44px rgba(0,0,0,.6), 0 3px 10px rgba(0,0,0,.4),
    inset 0 1px 0 rgba(255,255,255,.09);
  transition:transform .3s ease, border-color .3s ease}
/* Vệt lửa vắt ngang đỉnh tấm giáp */
.pt-rail::before{content:""; position:absolute; left:16%; right:8%; top:0; height:2px; pointer-events:none;
  background:linear-gradient(90deg, transparent, var(--gold), var(--gold-2), transparent)}
.pt-rail:hover{border-color:rgba(255,90,43,.5)}

/* --- thu gọn / mở lại thanh menu --- */
/* Lớp "san" do JS gắn sau khung hình đầu. Thiếu nó thì lần vào trang mà menu
   đang ở trạng thái đã thu, người dùng sẽ thấy menu hiện ra rồi tự trượt biến
   đi — trông như trang lỗi. Có "san" thì trạng thái ban đầu đặt xong xuôi mới
   bật hiệu ứng trượt. */
.pt-rail.san, .pt-rail-mo.san{transition:transform .38s cubic-bezier(.4,0,.2,1),
  opacity .28s ease, border-color .3s}
/* Trượt hẳn ra ngoài mép phải. Phải chép lại translateY(-50%) vì thuộc tính
   transform ghi đè trọn gói, bỏ sót là menu nhảy tụt xuống nửa màn. */
.pt-rail.dong{transform:translateY(-50%) translateX(calc(100% + 16px));
  opacity:0; pointer-events:none}

.pt-rail-dong{display:block; width:100%; margin:0 0 2px; padding:1px 4px 3px; border:0; background:none;
  color:rgba(246,238,222,.55); font-size:17px; line-height:1; text-align:right; cursor:pointer;
  transition:color .2s}
.pt-rail-dong:hover{color:var(--gold-2)}

/* Cái vẫy gọi menu trở lại: nằm nép ở mép phải, cắt vát góc trên-trái cho cùng
   dáng giáp với tấm menu. */
.pt-rail-mo{position:fixed; z-index:6; right:0; top:50%;
  transform:translateY(-50%) translateX(100%);
  width:28px; height:66px; padding:0; cursor:pointer;
  border:1px solid rgba(255,90,43,.32); border-right:0;
  border-radius:0; clip-path:polygon(11px 0, 100% 0, 100% 100%, 0 100%, 0 11px);
  background:linear-gradient(180deg, rgba(30,36,46,.86) 0%, rgba(12,15,19,.92) 100%);
  backdrop-filter:blur(8px) saturate(120%);
  -webkit-backdrop-filter:blur(8px) saturate(120%);
  box-shadow:-6px 0 20px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08);
  color:var(--gold-2); font-size:17px; line-height:1}
.pt-rail-mo.hien{transform:translateY(-50%) translateX(0)}
.pt-rail-mo:hover{border-color:rgba(255,90,43,.6); color:var(--gold)}

.pt-rail a{position:relative; display:flex; align-items:center; gap:10px; padding:10px 12px;
  font-family:var(--disp); font-weight:600; font-size:12.5px; letter-spacing:.02em; color:rgba(246,238,222,.86);
  border:0; border-radius:11px; transition:background .2s, color .2s, transform .2s}
/* Vạch ngăn mảnh giữa các mục, chừa lề hai bên cho gọn gàng */
.pt-rail a + a::after{content:""; position:absolute; left:12px; right:12px; top:-1px; height:1px;
  background:rgba(255,255,255,.07)}
.pt-rail a:hover{color:var(--gold-2); transform:translateX(-2px);
  background:linear-gradient(180deg, rgba(217,173,66,.16), rgba(217,173,66,.07));
  box-shadow:inset 0 1px 0 rgba(255,238,190,.22)}
.pt-rail a:hover::after,
.pt-rail a:hover + a::after{opacity:0}
.pt-rail a:active{transform:translateX(0) scale(.985)}
.pt-rail .i{font-size:14px; line-height:1; opacity:.92; filter:drop-shadow(0 1px 2px rgba(0,0,0,.55))}
/* Trình duyệt không hỗ trợ backdrop-filter thì cho nền đục hẳn, không thì chữ chìm */
@supports not (backdrop-filter: blur(1px)){
  .pt-rail{background:rgba(18,24,28,.94)}
}

/* --- thanh hành động --- */
.pt-actions{position:relative; z-index:5; margin-top:-72px}
/* align-items:stretch cho 4 ô cao bằng nhau — trước đó ô "Nạp Coin" cao 96px
   đứng cạnh 2 ô 154px trông hụt hẳn một khúc. */
/* gap 12 + quả cầu margin -14 => mép tấm và tâm cầu cách nhau 80px, khớp đúng
   với biến --nd của khe lõm. Đổi 3 số này phải đổi kèm nhau. */
.pt-actions-in{max-width:1120px; margin:0 auto; padding:0 20px;
  display:grid; grid-template-columns:1fr auto 1fr auto; align-items:stretch; gap:12px}
/* Bản rút gọn: chỉ còn nút Chơi Ngay - ô đăng nhập - nút Cộng Đồng.
   Gom vào giữa, ô đăng nhập cố định 400px để không bị kéo dài lê thê. */
.pt-actions-2{display:flex; justify-content:center; align-items:stretch}
.pt-actions-2 .pt-auth{flex:0 1 400px}
/* --- 2 tấm hai bên khoét lõm ôm lấy quả cầu ---
   --nr : bán kính hình tròn khoét
   --nd : khoảng cách từ mép trong của tấm tới TÂM quả cầu
   mask radial đục một lỗ tròn ngay ngoài mép -> mép tấm cong lõm vào.
   Nhưng mask cắt luôn cả đường viền, nên phải vẽ lại cung viền vàng bằng
   ::after (một vòng tròn bán kính lớn hơn lỗ 3px, bị overflow:hidden xén chỉ
   còn đúng đoạn cung nằm trong tấm). */
/* Khung CẮT VÁT hai góc chéo nhau thay cho bo tròn — dáng tấm giáp, hợp đối
   kháng hơn hẳn khung bo mềm. Vát ở góc trên-trái và dưới-phải cho lệch, tạo
   cảm giác động chứ không cân đối tĩnh tại. */
.pt-block{background:linear-gradient(160deg,rgba(28,34,44,.96),rgba(16,20,26,.96));
  border:1px solid var(--gold-bd); padding:14px 18px;
  box-shadow:0 8px 32px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06);
  display:flex; flex-direction:column; justify-content:center;
  border-radius:0; clip-path:polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
  position:relative; overflow:hidden; --nr:105px; --nd:81px}
/* Sợi lửa chạy dọc mép trên — dấu hiệu nhận biết của tông đối kháng */
.pt-block::before{content:""; position:absolute; left:18px; right:18px; top:0; height:2px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent); opacity:.85}

.pt-top10{mask-image:radial-gradient(circle var(--nr) at calc(100% + var(--nd)) 50%,
    transparent calc(var(--nr) - 1px), #000 var(--nr));
  -webkit-mask-image:radial-gradient(circle var(--nr) at calc(100% + var(--nd)) 50%,
    transparent calc(var(--nr) - 1px), #000 var(--nr))}
.pt-auth{mask-image:radial-gradient(circle var(--nr) at calc(var(--nd) * -1) 50%,
    transparent calc(var(--nr) - 1px), #000 var(--nr));
  -webkit-mask-image:radial-gradient(circle var(--nr) at calc(var(--nd) * -1) 50%,
    transparent calc(var(--nr) - 1px), #000 var(--nr))}

.pt-top10::after, .pt-auth::after{content:""; position:absolute; top:50%; pointer-events:none;
  width:calc((var(--nr) + 3px) * 2); height:calc((var(--nr) + 3px) * 2);
  margin-top:calc((var(--nr) + 3px) * -1); border-radius:50%;
  border:1px solid rgba(217,173,66,.45)}
.pt-top10::after{left:calc(100% + var(--nd) - var(--nr) - 3px)}
.pt-auth::after {left:calc((var(--nd) + var(--nr) + 3px) * -1)}

/* Nút Chơi Ngay phóng 1.5 lần (164 -> 246px), lấn thêm 41px mỗi bên.
   Dùng :has() để khi rê chuột vào nút thì các ô xung quanh dạt ra nhường chỗ,
   bỏ chuột ra thì tự thu về. CSS không có bộ chọn "phần tử đứng trước" nên
   phải bắt từ khối cha .pt-actions-in mới đẩy được ô bên TRÁI. */
.pt-top10, .pt-auth, .pt-pay{transition:transform .38s cubic-bezier(.2,.9,.25,1.15)}
/* Cầu 190 -> 285px khi phóng, lấn thêm 95px, chia đôi mỗi bên ~48px */
.pt-actions-in:has(.pt-play:hover) .pt-top10{transform:translateX(-48px)}
.pt-actions-in:has(.pt-play:hover) .pt-auth,
.pt-actions-in:has(.pt-play:hover) .pt-pay{transform:translateX(48px)}
/* Chặn thanh cuộn ngang nếu ô ngoài cùng bị đẩy quá mép màn hình.
   clip (không phải hidden) để nút phóng to vẫn tràn ra được theo chiều dọc. */
.pt-actions{overflow-x:clip}
.pt-block h3{font-family:var(--disp); font-weight:700; font-size:15px; color:var(--gold-2); margin:0 0 10px;
  text-align:center; letter-spacing:.06em}

/* top cao thủ */
/* Bộ chuyển thẻ thay cho tiêu đề <h3> cũ, vì ô này giờ xem được hai bảng.
   Giữ đúng cỡ chữ và letter-spacing của .pt-block h3 để cụm này vẫn đọc như
   một tiêu đề, chỉ là bấm được. Thẻ đang chọn tô nền lửa đặc; thẻ kia để trơ
   viền — chênh lệch phải thấy ngay, không thì không ai biết mình đang xem
   bảng nào. */
/* Dùng LẠI ngôn ngữ thẻ của .pt-tabs (khối tin): vệt lửa vát chéo trượt ra dưới
   chân thẻ đang mở, chữ hoa nhỏ, thẻ mở đậm hơn một nấc kèm quầng sáng. Bản đầu
   tô thẻ đang chọn thành khối cam đặc — nó nổi thì có nổi, nhưng là kiểu nút của
   bootstrap, không phải của site này, và cục cam đặc chọi luôn với tấm nền.
   flex:1 1 0 cho hai thẻ chia đôi đều: để auto thì "Top Cao Thủ" và "Top Tiêu
   Phí" dài ngắn khác nhau làm thanh so le. */
.pt-top-tab{display:flex; gap:0; border-bottom:1px solid var(--gold-dim); margin:0 0 11px}
.pt-top-nut{position:relative; flex:1 1 0; min-width:0; min-height:40px;
  font-family:var(--disp); font-weight:700; font-size:12.5px; text-transform:uppercase;
  letter-spacing:.05em; color:var(--ink-soft); cursor:pointer; background:none; border:0;
  padding:11px 6px; transition:color .18s, background .18s}
.pt-top-nut + .pt-top-nut{box-shadow:inset 1px 0 0 rgba(255,90,43,.14)}
.pt-top-nut::after{content:""; position:absolute; left:10px; right:10px; bottom:0; height:3px;
  background:linear-gradient(90deg,var(--gold-d),var(--gold),var(--gold-2));
  transform:scaleX(0) skewX(-24deg); transform-origin:center; transition:transform .22s}
.pt-top-nut:hover{color:var(--ink)}
.pt-top-nut.on{color:var(--gold-2); font-weight:800;
  background:linear-gradient(180deg,rgba(255,90,43,.04),rgba(255,90,43,.17));
  text-shadow:0 0 16px rgba(255,140,40,.5)}
.pt-top-nut.on::after{transform:scaleX(1) skewX(-24deg)}
.pt-top-nut:focus-visible{outline:2px solid var(--gold-2); outline-offset:-2px}

/* padding-right 36px: khe lõm khoét sâu 24px vào mép phải tấm, lề mặc định
   18px là không đủ nên chữ "Lv.xxx" bị cung tròn cắt mất. */
.pt-top10{justify-content:flex-start; padding-right:36px}
.pt-top10 ol{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr; gap:7px}
/* Mỗi hạng một khung riêng thay vì dòng chữ trơ */
.pt-top10 li{display:flex; align-items:center; gap:9px; font-size:13px; color:var(--ink); min-width:0;
  padding:7px 11px; border-radius:9px; background:rgba(255,255,255,.035);
  border:1px solid rgba(217,173,66,.14)}
.pt-top10 li.hang1{background:linear-gradient(90deg,rgba(255,201,60,.2),rgba(255,201,60,.04));
  border-color:rgba(255,201,60,.45)}
.pt-top10 li.hang2{background:linear-gradient(90deg,rgba(210,220,235,.13),rgba(210,220,235,.03));
  border-color:rgba(210,220,235,.26)}
.pt-top10 li.hang3{background:linear-gradient(90deg,rgba(205,127,72,.14),rgba(205,127,72,.03));
  border-color:rgba(205,127,72,.3)}
/* Số hạng: huy hiệu tròn, đổi màu theo vàng – bạc – đồng */
.pt-top10 li i{font-style:normal; width:21px; height:21px; flex:0 0 auto; display:grid; place-items:center;
  font-size:11px; font-weight:700; border-radius:50%; color:#2a1d05; border:0;
  box-shadow:0 1px 5px rgba(0,0,0,.35)}
.pt-top10 li.hang1 i{background:linear-gradient(180deg,var(--kim-2),var(--kim))}
.pt-top10 li.hang2 i{background:linear-gradient(180deg,#eef2f8,#aab7c6)}
.pt-top10 li.hang3 i{background:linear-gradient(180deg,#f0c09a,#c07a45)}
.pt-top10 li span{color:#fff}
.pt-top10 li span{flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pt-top10 li b{color:var(--gold-2); font-weight:600; font-size:11.5px; font-variant-numeric:tabular-nums}
.pt-loading,.pt-empty{color:var(--ink-dim); font-size:12.5px; grid-column:1/-1}
/* "Xem thêm" thành viên nang nhỏ, không còn là dòng chữ trơ trọi */
/* Là <button> (mở popup) chứ không phải <a>, nên phải tự khai font và con trỏ:
   nút không kế thừa font-family từ cha như thẻ thường. */
.pt-more{font-family:var(--body); cursor:pointer;
  display:block; width:fit-content; margin:12px auto 0; padding:5px 16px; font-size:11.5px;
  letter-spacing:.04em; color:rgba(246,238,222,.7); border-radius:999px;
  border:1px solid rgba(217,173,66,.22); background:rgba(217,173,66,.06);
  transition:color .2s, background .2s, border-color .2s}
.pt-more:hover{color:var(--gold-2); background:rgba(217,173,66,.14); border-color:rgba(217,173,66,.45)}

/* nút chơi ngay — quả cầu lửa + chữ ngọc, không còn vẽ bằng gradient nữa */
/* 190px + margin -26 + gap 12  =>  mép tấm cách tâm cầu 81px, đúng bằng --nd.
   Bán kính cầu 95, bán kính khoét 105 -> hở đều 10px quanh cầu, khoét sâu 24px. */
.pt-play{flex:0 0 auto; align-self:center; width:190px; height:190px; border-radius:50%;
  display:grid; place-items:center; position:relative; z-index:8; margin:0 -26px;
  background:url('/Assets/Images/nut-cau.png') center/contain no-repeat;
  filter:drop-shadow(0 10px 26px rgba(255,120,20,.32));
  transition:transform .38s cubic-bezier(.2,.9,.25,1.15), filter .38s ease}
/* max-height 58% là chốt chặn: chữ rộng 3:2, chỉ khoá width thì khi khung nút
   thấp mà rộng (bố cục mobile) chữ sẽ tràn ra ngoài quả cầu. */
.pt-play-chu{width:76%; max-height:58%; height:auto; object-fit:contain; display:block;
  filter:drop-shadow(0 2px 4px rgba(90,10,0,.55)) drop-shadow(0 0 10px rgba(255,90,20,.45))}
/* Phóng 1.5 lần khi rê chuột; z-index cao để nó nổi hẳn lên trên 2 ô bên cạnh */
.pt-play:hover{transform:scale(1.5); z-index:20;
  filter:drop-shadow(0 16px 40px rgba(255,120,20,.55)) brightness(1.06)}
.pt-play:active{transform:scale(1.42)}

/* Khe lõm nằm ở mép TRÁI của ô này (đối xứng với ô Top Cao Thủ), khoét sâu
   24px nên lề trái phải > 24px, không thì ô nhập và nút bị cung tròn cắt.
   Thu nhỏ chữ + nới lề đáy cho khối gọn lại ở giao diện full. */
.pt-auth{padding-left:38px; padding-right:20px}
.pt-auth .db{font-size:14.5px; padding-top:11px; padding-bottom:11px}

/* đăng nhập — ô nhập có icon, bo tròn, viền sáng lên khi gõ */
.pt-fld{display:flex; align-items:center; gap:8px; margin-bottom:8px; padding:0 11px; border-radius:10px;
  background:rgba(8,12,15,.62); border:1px solid rgba(217,173,66,.18);
  transition:border-color .2s, background .2s, box-shadow .2s}
.pt-fld:focus-within{border-color:rgba(217,173,66,.5); background:rgba(8,12,15,.8);
  box-shadow:0 0 0 3px rgba(217,173,66,.10)}
.pt-fld .i{font-size:13px; opacity:.55; flex:0 0 auto}
/* :not([type=checkbox]) BẮT BUỘC. Quy tắc này viết cho mấy ô nhập chữ trong
   .pt-fld, nhưng bộ chọn trần ".pt-auth input" vơ luôn cả ô tick đồng ý Chính
   sách bảo mật — flex-grow:1 kéo ô tick 15px phình ra thành 251px, đẩy dòng
   chữ văng sang tận mép phải. Trói lại theo loại ô thay vì đi chồng thêm độ ưu
   tiên ở chỗ khác, vì mọi ô tick thêm vào sau này cũng dính đúng lỗi đó. */
.pt-auth input:not([type=checkbox]){flex:1 1 auto; min-width:0; width:100%; font-family:var(--body); font-size:13px;
  padding:9px 0; border:0; border-radius:0; background:transparent; color:var(--ink)}
.pt-auth input::placeholder{color:rgba(240,245,240,.34)}
/* Trước là outline:none TRẦN, không bù lại gì — bấm Tab vào ô đăng nhập là
   mất dấu hoàn toàn, không biết con trỏ đang ở đâu (WCAG 2.4.7). Bỏ outline
   mặc định thì phải tự vẽ dấu thay thế. Dùng box-shadow + border nên KHÔNG
   chiếm thêm chỗ, bố cục y nguyên. */
.pt-auth input:focus{outline:none; border-color:var(--gold-bd);
  box-shadow:0 0 0 2px rgba(255,90,43,.35)}

/* Vòng focus cho các nút/liên kết chưa có. Trước đây chỉ .btn có, mà .db mới
   là kiểu nút chính của site (Tải Game, Đăng nhập, Fanpage...) — người dùng
   bàn phím đi qua toàn bộ trang chủ mà không thấy mình đang đứng ở đâu.
   outline vẽ RA NGOÀI viền nên không đẩy chữ, không đổi kích thước gì cả. */
.db:focus-visible,
.pt-nav a:focus-visible, .pt-drawer a:focus-visible, .pt-logo:focus-visible,
.pt-rail a:focus-visible, .pt-rail-dong:focus-visible, .pt-rail-mo:focus-visible,
.pt-slider-nut:focus-visible, .pt-slide:focus-visible,
.pt-more:focus-visible, .pt-tabs button:focus-visible,
.pt-foot-links a:focus-visible, .pt-auth-foot a:focus-visible,
.pt-burger:focus-visible, .pt-play:focus-visible,
.top nav a:focus-visible, .drawer a:focus-visible, .flinks a:focus-visible{
  outline:2px solid var(--gold-2); outline-offset:2px}

.pt-login{display:block; width:100%; margin-top:2px; padding:11px 14px; cursor:pointer;
  font-family:var(--disp); font-weight:600; font-size:14px; letter-spacing:.04em; color:#2a1d05; border:0; border-radius:11px;
  background:linear-gradient(180deg, #ffe9a6 0%, var(--gold) 52%, #b98a1e 100%);
  box-shadow:0 2px 0 rgba(120,86,14,.9), 0 8px 20px rgba(217,173,66,.22),
    inset 0 1px 0 rgba(255,255,255,.6);
  transition:transform .16s, box-shadow .16s, filter .16s}
.pt-login:hover{filter:brightness(1.06); transform:translateY(-1px);
  box-shadow:0 3px 0 rgba(120,86,14,.9), 0 12px 26px rgba(217,173,66,.32),
    inset 0 1px 0 rgba(255,255,255,.7)}
.pt-login:active{transform:translateY(1px);
  box-shadow:0 0 0 rgba(120,86,14,.9), 0 4px 12px rgba(217,173,66,.2), inset 0 1px 0 rgba(255,255,255,.5)}

.pt-auth-foot{display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap;
  margin:11px 0 0; font-size:11.5px; color:var(--ink-soft)}
.pt-auth-foot a{color:rgba(246,238,222,.72); transition:color .18s}
.pt-auth-foot a:hover{color:var(--gold-2)}
.pt-cham{opacity:.35}
.pt-auth-row{display:flex; gap:8px; margin-bottom:8px}
.pt-acct{margin:0 0 6px; font-size:13px; color:var(--ink)}
.pt-acct b{color:var(--gold-2)}
.pt-auth .pt-auth-row .btn{flex:1 1 0; padding:9px 10px; font-size:13px; margin:0}

/* nạp coin — cao bằng 2 ô kia (stretch), rộng bằng nút tròn cho cân hai đầu thanh.
   Dùng chung kiểu .db nên chỉ khai lại phần khung, màu sắc để .db lo. */
.pt-pay{flex:0 0 auto; flex-direction:column; gap:8px; width:132px; padding:14px 10px; border-radius:14px}
.pt-pay .i{font-size:32px; line-height:1; transform:skewX(6deg)}
.pt-pay > span:last-child{font-size:15px}
/* Nút cộng đồng dùng lại khung của nút nạp cũ */
.pt-join{width:140px}

/* --- tin tức --- */
.pt-news{padding:56px 0 64px}
.pt-news-in{max-width:1120px; margin:0 auto; padding:0 20px; display:grid; grid-template-columns:380px 1fr; gap:20px}
/* Thẻ ảnh lớn đang ẩn ($hienBaiNoiBat = false) -> chỉ còn hộp tin: thu về một
   cột 720px canh giữa, không thì hộp bị nhét vào cột 380px của lưới hai cột. */
.pt-news-in.mot-cot{grid-template-columns:minmax(0,720px); justify-content:center}
.pt-feat{display:block; position:relative; border:1px solid var(--gold-bd); overflow:hidden;
  background:var(--panel); box-shadow:0 8px 32px rgba(0,0,0,.45)}
.pt-feat img{width:100%; height:230px; object-fit:cover; display:block; image-rendering:pixelated}
.pt-feat-cap{position:absolute; inset:auto 0 0 0; padding:12px 14px; display:block;
  background:linear-gradient(180deg,transparent,rgba(10,14,17,.94)); color:var(--ink); font-size:12.5px}
.pt-feat-cap b{display:block; font-family:var(--disp); font-weight:700; font-size:16px; color:var(--gold-2); margin-bottom:3px}

/* --- SLIDER trong khung nổi bật ---
   Các slide xếp CHỒNG lên nhau (absolute) rồi mờ dần qua nhau. Chọn chồng-mờ
   chứ không trượt ngang vì trượt phải đo bề rộng bằng JS mỗi lần đổi cỡ màn;
   chồng-mờ thì khung to nhỏ ra sao cũng kệ — hợp mọi kích thước màn hình.
   Chiều cao đặt ở khung, khớp đúng ba mốc cũ của .pt-feat img (230/180/150). */
.pt-slider{position:relative; height:230px}
.pt-slider .pt-slide{position:absolute; inset:0; display:block; opacity:0;
  transition:opacity .55s ease; pointer-events:none}
.pt-slider .pt-slide.on{opacity:1; pointer-events:auto}
.pt-slider .pt-slide img{height:100%}
.pt-slider-nut{position:absolute; z-index:3; top:50%; transform:translateY(-50%);
  width:34px; height:44px; display:grid; place-items:center; cursor:pointer; padding:0;
  border:1px solid var(--gold-bd); background:rgba(8,11,15,.55); color:var(--gold-2);
  font-size:22px; line-height:1; transition:background .2s}
.pt-slider-nut:hover{background:rgba(8,11,15,.85)}
.pt-slider-nut.truoc{left:0; border-left:0}
.pt-slider-nut.sau{right:0; border-right:0}
/* Chấm đặt góc trên phải để không đè lên dải chú thích dưới đáy ảnh */
.pt-slider-cham{position:absolute; z-index:3; top:10px; right:10px; display:flex; gap:6px}
.pt-slider-cham i{width:8px; height:8px; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.4); box-shadow:0 0 0 1px rgba(0,0,0,.55);
  transition:background .2s, width .2s}
.pt-slider-cham i.on{width:18px; border-radius:4px; background:var(--gold-2)}
/* flex column + .pt-contact{margin-top:auto} để 2 nút liên hệ luôn nằm sát đáy,
   thẳng hàng với đáy ảnh tin nổi bật bên trái dù thẻ đang mở có ít bài hay nhiều. */
.pt-news-box{background:rgba(20,28,32,.7); border:1px solid var(--gold-dim); padding:0 16px 14px;
  display:flex; flex-direction:column}
.pt-tabs{display:flex; gap:0; border-bottom:1px solid var(--gold-dim); margin:0 -16px 10px}
/* flex:1 1 0 để 4 thẻ chia đều bề ngang — để auto thì chữ dài ngắn khác nhau
   làm thẻ so le (91/94/121/102px) và thừa nửa thanh bên phải. */
.pt-tabs button{position:relative; flex:1 1 0; min-width:0; font-family:var(--disp); font-weight:700;
  font-size:13.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-soft);
  cursor:pointer; background:none; border:0; padding:14px 8px; transition:color .18s, background .18s}
.pt-tabs button + button{box-shadow:inset 1px 0 0 rgba(255,90,43,.14)}
/* The dang mo: vet lua vat cheo duoi chan, khong phai vien ngang thang do */
.pt-tabs button::after{content:""; position:absolute; left:12px; right:12px; bottom:0; height:3px;
  background:linear-gradient(90deg,var(--gold-d),var(--gold),var(--gold-2));
  transform:scaleX(0) skewX(-24deg); transform-origin:center; transition:transform .22s}
.pt-tabs button:hover{color:var(--ink)}
/* Thẻ đang mở: chữ vàng ĐẬM hơn hẳn thẻ thường (700 -> 800) cộng nền lửa rõ
   hơn. Trước chỉ khác mỗi màu chữ và một vệt sáng mờ, liếc qua rất khó biết
   mình đang xem thẻ nào — nhất là trên điện thoại lúc vệt lửa dưới chân bị
   cắt bớt. */
.pt-tabs button.on{color:var(--gold-2); font-weight:800;
  background:linear-gradient(180deg,rgba(255,90,43,.04),rgba(255,90,43,.17));
  text-shadow:0 0 16px rgba(255,140,40,.5)}
.pt-tabs button.on::after{transform:scaleX(1) skewX(-24deg)}
/* --- DANH SÁCH TIN ---
   Bản cũ là ba dòng chữ trần ngăn bằng gạch đứt: không có điểm neo cho mắt,
   nhìn như bảng tính, và chỉ riêng chữ tiêu đề mới bấm được. Nay mỗi mục là
   một Ô BẤM trọn dòng, đầu dòng có viên ngọc rồng nhỏ làm dấu — nối thẳng
   với hàng bảy viên ngọc ngoài hero, nên vẫn là cùng một thế giới. */
.pt-list{display:none; list-style:none; margin:0 -6px; padding:0}
.pt-list.on{display:block}
.pt-list li + li{margin-top:2px}

.pt-list li a{position:relative; display:flex; align-items:center; gap:10px;
  padding:10px 12px 10px 10px; border-radius:9px; font-size:13.5px; color:var(--ink);
  border:1px solid transparent; transition:background .18s, border-color .18s, transform .18s}
/* Vệt lửa quét từ trái khi rê chuột — dấu hiệu "đây là thứ bấm được" */
.pt-list li a:hover{background:linear-gradient(90deg,rgba(255,90,43,.16),rgba(255,90,43,.03) 62%,transparent);
  border-color:rgba(255,90,43,.28); transform:translateX(3px)}
.pt-list li a:hover .pt-tin-chu{color:var(--gold-2)}

/* Viên ngọc rồng thu nhỏ (1 sao). Cùng công thức tô với hàng ngọc ở hero. */
.pt-tin-ngoc{position:relative; flex:0 0 auto; width:15px; height:15px; border-radius:50%;
  background:radial-gradient(circle at 34% 27%, #fff8e2 0 8%, #ffd66a 28%, #ff9c1f 64%, #b95000 100%);
  box-shadow:0 0 8px rgba(255,150,40,.4), inset -2px -2px 4px rgba(130,45,0,.45);
  transition:box-shadow .18s, transform .18s}
.pt-tin-ngoc::after{content:""; position:absolute; left:50%; top:50%; width:5px; height:5px;
  margin:-2.5px 0 0 -2.5px; background:#d81f0d;
  clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.pt-list li a:hover .pt-tin-ngoc{box-shadow:0 0 14px rgba(255,150,40,.85), inset -2px -2px 4px rgba(130,45,0,.45);
  transform:scale(1.12)}

/* Tiêu đề chiếm hết chỗ thừa, dài quá thì cắt bằng dấu ba chấm */
.pt-tin-chu{flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  transition:color .18s}

/* Ngày: đổi từ --ink-dim sang --ink-soft. Màu cũ trên nền tối chỉ đạt tương
   phản 3.6:1, dưới chuẩn 4.5:1 nên chữ mờ khó đọc. Bọc trong viên thuốc mờ
   để nó tách khỏi tiêu đề, mắt không phải dò xem chữ nào thuộc dòng nào. */
.pt-list time{flex:0 0 auto; font-size:11px; color:var(--ink-soft); letter-spacing:.02em;
  font-variant-numeric:tabular-nums; padding:3px 8px; border-radius:999px;
  background:rgba(255,255,255,.05)}

/* Mũi nhọn chỉ hướng — trượt ra khi rê chuột, thay lời "bấm vào đây" */
.pt-tin-mui{flex:0 0 auto; width:0; overflow:hidden; color:var(--gold-2); font-size:17px;
  line-height:1; opacity:0; transition:width .18s, opacity .18s}
.pt-list li a:hover .pt-tin-mui{width:11px; opacity:1}

/* Nhãn New: vát chéo cho ăn với dáng nút của site, không còn là ô chữ nhật trơ */
.pt-badge{flex:0 0 auto; font-family:var(--disp); font-weight:700; font-size:9.5px;
  text-transform:uppercase; letter-spacing:.06em; color:#fff2d8; padding:2px 8px; line-height:1.5;
  background:linear-gradient(180deg,#ff7a2f,#d0210c);
  box-shadow:0 1px 4px rgba(255,90,43,.45);
  clip-path:polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%)}

/* Màn hẹp: VẪN một dòng. Thử cho tiêu đề xuống dòng riêng rồi đặt ngày bên
   dưới thì mỗi mục đội lên 93px — ba mục chiếm gần trọn màn, phải cuộn mới
   xem hết, mà tiêu đề thực tế vẫn vừa một dòng nên chỗ đó là phí. Giữ một
   dòng thì danh sách liếc một cái là nắm hết. Bù lại: viên ngọc và ngày thu
   nhỏ để chừa chỗ cho tiêu đề, mũi nhọn bỏ đi (màn cảm ứng không có rê chuột
   nên nó chẳng bao giờ hiện). */
@media (max-width:430px){
  .pt-list li a{gap:8px; padding:10px 9px}
  .pt-tin-ngoc{width:13px; height:13px}
  .pt-tin-ngoc::after{width:4px; height:4px; margin:-2px 0 0 -2px}
  .pt-list time{font-size:10.5px; padding:2px 6px}
  .pt-tin-mui{display:none}
}
.pt-contact{display:flex; gap:10px; margin-top:auto; padding-top:14px; flex-wrap:wrap}
/* CHỈ lo bố cục — màu sắc để .db lo hết.
   Trước đây khối này còn tự đặt nền/viền/màu chữ, và đó là lý do hai nút lệch
   màu nhau: ".pt-contact a" nặng ký hơn ".db" (1 lớp + 1 thẻ so với 1 lớp) nên
   nó kéo nút Cộng Đồng về nền phẳng tối; còn nút Fanpage mang ".db.vang" (2
   lớp) thì thắng được nên vẫn vàng. Cùng một hàng mà hai kiểu khác hẳn. */
.pt-contact a{flex:1 1 160px}

/* --- chân trang --- */
.pt-foot{border-top:1px solid var(--gold-dim); background:var(--bg-2); padding:32px 0 40px}
.pt-foot-in{max-width:1120px; margin:0 auto; padding:0 20px; display:flex; flex-direction:column;
  align-items:center; gap:12px; text-align:center}
.pt-foot-logo{width:64px; height:auto; image-rendering:pixelated; opacity:.9}
.pt-foot-links{display:flex; flex-wrap:wrap; justify-content:center; gap:8px 20px}
.pt-foot-links a{font-family:var(--disp); font-weight:600; font-size:13px; color:var(--ink-soft)}
.pt-foot-links a:hover{color:var(--gold-2)}
.pt-foot small{color:var(--ink-dim); font-size:12px}
.pt-foot .pt-warn{color:#ff9c8c; opacity:.75}

/* ==========================================================================
   BẢN MOBILE (< 1150px) — bố cục riêng, KHÔNG phải bản desktop thu nhỏ
   Từ 1150px trở lên JS giữ bố cục desktop và chỉ thu phóng (zoom). Dưới mức
   đó zoom trả về 1, mọi thứ xếp lại theo chiều dọc để chữ đọc được ở cỡ thật.
   Base dùng px cố định (do cơ chế zoom), nên ở đây phải trả về vw/auto.
   ========================================================================== */
@media (max-width:1149px){
  /* --- thanh trên: gom về logo + nút menu --- */
  .pt-nav{display:none}
  /* 44x44 là cỡ ô bấm tối thiểu cho ngón tay; 38px cũ hay bấm trượt ra ngoài */
  .pt-burger{display:block; margin-left:auto; width:44px; height:44px; font-size:19px}
  .pt-logo{margin-right:auto}
  .pt-top-in{height:60px; padding:0 16px; gap:10px}

  /* --- hero: cao theo màn, chữ co theo bề ngang --- */
  /* align-items:center BẮT BUỘC phải có. Bản gốc thừa hưởng flex-start của bố
     cục desktop; đổi sang cột thì flex-start hoá ra canh TRÁI, mà .pt-hero-in
     lại co vừa nội dung (~430px) nên cả logo, nút và hàng ngọc dạt hết sang
     mép trái và đè lên phe bên trái. Màn ~650px không lộ vì lúc đó nội dung
     rộng gần bằng màn; từ 700px trở lên mới thấy lệch hẳn. */
  .pt-hero{min-height:auto; flex-direction:column; justify-content:flex-end;
    align-items:center; padding-bottom:0}
  .pt-hero-bg{background-position:50% 34%}
  /* padding-top 132px = chừa đủ chỗ cho thanh nav (60) + nhãn 18+ bên dưới nó,
     nếu để 96px thì tên game chui lên đè vào nhãn. */
  .pt-hero-in{padding:132px 16px 26px}
  .pt-hero-logo img{width:min(400px,74vw)}   /* .pt-hero-mark da bi go khoi markup */
  .pt-hero-sub{font-size:clamp(11px,3vw,15px); letter-spacing:.14em}
  .pt-hero-in::before{width:min(560px,96vw); height:230px}
  .pt-tia{--tia-d:min(640px,124vw)}
  /* Đội hình co LIÊN TỤC theo bề ngang màn bằng clamp, không nhảy bậc theo từng
     ngưỡng @media: kéo hẹp cửa sổ là nhân vật nhỏ dần theo, không giật cấp.
     Chỉ ĐƯỢC dùng vw ở đây — từ 1150px trở lên cả trang nằm trong khối zoom,
     vw đo theo màn thật rồi bị nhân thêm zoom nên sai gấp đôi. */
  .pt-vong{--nv-cao:clamp(155px, 30vw, 345px); --vong-h:clamp(225px, 50vw, 470px);
    --x-he:1.02%}
  .pt-ngoc{gap:8px; margin-top:16px}
  .pt-ngoc li{width:23px; height:23px}
  .pt-age{top:70px; left:12px; right:auto; max-width:236px}

  /* --- menu kính: thả xuống dưới hero, xếp lưới, GIỮ nguyên chất kính --- */
  .pt-rail{position:static; transform:none; width:auto; margin:16px 16px 0;
    flex-direction:row; flex-wrap:wrap; gap:4px; border-radius:18px}
  .pt-rail a{flex:1 1 30%; justify-content:center; padding:12px 8px}
  .pt-rail a + a::after{display:none}
  .pt-rail a:hover{transform:none}
  /* Thu gọn chỉ có nghĩa khi menu là tấm nổi đè lên trang. Ở khổ này nó đã tụt
     xuống nằm trong dòng chảy, thu vào mép chỉ để lại một khoảng trống vô duyên
     -> bỏ hẳn hai cái nút, và gỡ luôn trạng thái "dong" phòng khi người dùng
     thu ở máy tính rồi mở lại bằng điện thoại (trạng thái nhớ trong localStorage). */
  .pt-rail-dong, .pt-rail-mo{display:none}
  .pt-rail.dong{transform:none; opacity:1; pointer-events:auto}

  /* --- thanh hành động: xếp dọc, bỏ khoét lõm --- */
  .pt-actions{margin-top:20px; overflow-x:visible}
  .pt-actions-in, .pt-actions-2{display:flex; flex-direction:column; align-items:stretch;
    gap:12px; max-width:520px; padding:0 16px}
  .pt-actions-2 .pt-auth{flex:1 1 auto}
  .pt-block{border-radius:16px; padding:14px 16px}
  .pt-play{width:170px; height:170px; margin:0 auto 2px; order:-1; align-self:center}
  .pt-play:hover{transform:scale(1.14)}
  .pt-actions-in:has(.pt-play:hover) .pt-top10,
  .pt-actions-in:has(.pt-play:hover) .pt-auth,
  .pt-actions-in:has(.pt-play:hover) .pt-pay{transform:none}
  /* Tấm không còn nằm hai bên quả cầu -> để nguyên mask là thủng một lỗ giữa thân */
  .pt-top10, .pt-auth{mask-image:none; -webkit-mask-image:none}
  .pt-top10::after, .pt-auth::after{display:none}
  .pt-pay, .pt-join{width:auto; height:auto; padding:14px; flex-direction:row; border-radius:16px}

  /* --- tin tức: 1 cột --- */
  /* min-width:0 bắt buộc: ô lưới/flex mặc định là min-width:auto nên nó phình
     ra vừa nội dung rộng nhất (ở đây là 4 thẻ tin), kéo cả trang tràn ngang
     41px dù .pt-tabs đã có overflow-x:auto. */
  .pt-news-in > *, .pt-actions-in > *, .pt-news-box > *{min-width:0}
  .pt-news{padding:34px 0 44px}
  .pt-news-in{grid-template-columns:1fr; padding:0 16px; gap:14px}
  .pt-feat img{height:180px}
  .pt-slider{height:180px}
  .pt-foot-in{padding:0 16px}
}

/* Máy tính bảng dựng đứng: khoảng trống hai bên cột chữ chỉ còn ~200px mỗi
   bên. Cứ giữ đủ 8 người thì người ở ô ngoài rìa bé như con kiến mà vẫn thò
   vào chữ -> cắt bớt 2 ô cuối (nhỏ nhất, cao nhất) và đẩy vòng dạt thêm ra mép. */
@media (max-width:900px){
  .pt-vong{--nv-mo:.92; --x-he:1.04%}
  .pt-linh:nth-child(n+7){display:none}
  .pt-hero-logo img{width:min(360px,76vw)}
  .pt-tia{--tia-d:min(520px,130vw)}
}

/* Điện thoại: còn 4 người làm nền poster, gom bảng Top về 1 cột, tin tức 2 dòng.
   --x-he tụt xuống DƯỚI 1 là kéo vòng thu vào trong. Ngược hẳn với máy tính
   bảng, vì tới khổ này cột chữ đã rộng gần bằng màn: đẩy ra mép chỉ tổ xén mất
   nhân vật chứ chẳng chừa thêm được chỗ nào. Thà để họ nằm sau chữ — đã hạ mờ
   xuống .78 và chữ vẫn nằm lớp trên, đọc không vướng. */
@media (max-width:700px){
  .pt-vong{--nv-mo:.78; --x-he:.95%}
  .pt-linh:nth-child(n+5){display:none}
  .pt-hero-logo img{width:min(330px,84vw)}
  .pt-tia{--tia-d:min(420px,116vw)}
  .pt-ngoc{gap:7px}
  .pt-ngoc li{width:20px; height:20px}
  .pt-ngoc li{--ngoc-r:4px}
  .pt-ngoc li i{width:6px; height:6px; margin:-3px 0 0 -3px}
  /* NÉN CHIỀU DỌC CỦA HERO.
     Đo ở khổ 375x812: quả cầu "Chơi Ngay" — nút quan trọng nhất trang — bắt đầu
     ở 746px, tức thò lên khỏi nếp gấp đúng 66px, phải cuộn mới bấm được. Bóp
     từng khoảng hở một (đệm trên, các margin, lề tấm menu, thanh hành động) gom
     lại đủ kéo nó lên trọn trong màn.
     Đệm trên vẫn phải chừa cho nav (60px) + nhãn 18+ bên dưới nó — nhãn đã được
     nới bề ngang để rơi về 2 dòng nên chỉ cao tới ~106px, không cần 126px nữa.
     KHÔNG đụng tới padding của .pt-rail a: mỗi mục đang cao ~40px, hạ nữa là
     xuống dưới ngưỡng bấm bằng ngón tay. */
  .pt-hero-in{padding:108px 14px 18px}
  .pt-hero-nut{margin-top:14px}
  .pt-hero-so{margin-top:14px}
  .pt-ngoc{margin-top:10px}
  .pt-actions{margin-top:14px}
  .pt-age{top:64px; max-width:228px}
  .pt-play{width:150px; height:150px}
  .pt-rail{margin:12px 14px 0}
  .pt-rail a{flex:1 1 46%; font-size:12px}
  .pt-top10 ol{grid-template-columns:1fr; gap:5px}
  .pt-actions-in, .pt-actions-2, .pt-news-in, .pt-foot-in{padding:0 14px}
  /* Thẻ tin cuộn ngang thay vì vỡ xuống 2 hàng */
  .pt-tabs{overflow-x:auto; scrollbar-width:none}
  .pt-tabs::-webkit-scrollbar{display:none}
  .pt-tabs button{flex:0 0 auto; min-width:100px; font-size:12.5px}
  /* Khối này VỐN viết cho cấu trúc cũ, hồi <a> chỉ bọc mỗi chữ tiêu đề nằm
     trong <li> flex. Nay cả dòng đã là <a> và tự cao 45px (thừa ngưỡng ngón
     tay), nên mấy dòng nới padding ngày xưa thành ra phản tác dụng: chúng
     xoá sạch padding NGANG và nhét thêm line-height 1.45, đội mỗi dòng lên
     86px. Chỉ giữ lại đúng phần còn cần. */
  .pt-list li a{padding:10px 10px 10px 9px}
  .pt-contact a{flex:1 1 100%}
  .pt-foot-links a{display:inline-block; padding:6px 0}
  .pt-auth-foot a{display:inline-block; padding:6px 2px}
  .pt-more{padding-top:9px; padding-bottom:9px}
  .pt-feat img{height:150px}
  .pt-slider{height:150px}
  .pt-foot-links{gap:6px 14px}
}

/* Màn hẹp: 4 người là hai người trên chồng lên hai người dưới — rút còn 2 ô
   chạm đất ở hai góc, vừa đủ đóng khung cột chữ. */
@media (max-width:560px){
  .pt-vong{--nv-mo:.68; --x-he:.86%}
  .pt-linh:nth-child(n+3){display:none}
}

/* Điện thoại nhỏ (iPhone SE, Android 360px) */
@media (max-width:430px){
  /* Nâng sàn cỡ nhân vật: ở khổ này mỗi bên chỉ còn một người, để nhỏ như cũ
     thì phần lọt vào màn chỉ là một mẩu tay chân, nhìn như ảnh lỗi chứ không ra
     nhân vật. To lên mà vẫn mờ .6 và nằm dưới lớp chữ nên không cản đọc. */
  .pt-vong{--nv-mo:.6; --nv-cao:max(190px, 30vw)}
  .pt-hero-logo img{width:min(300px,86vw)}
  .pt-tia{--tia-d:min(360px,112vw)}
  .pt-hero-in{padding:102px 12px 16px}
  .pt-hero-so li{padding:8px 15px}
  .pt-hero-so b{font-size:17px}
  .pt-ngoc{gap:6px}
  .pt-ngoc li{width:17px; height:17px; --ngoc-r:3.5px}
  .pt-ngoc li i{width:5px; height:5px; margin:-2.5px 0 0 -2.5px}
  /* 205px là bề ngang vừa đủ để dòng cảnh báo rơi về ĐÚNG 2 dòng. Hẹp hơn (180)
     là vỡ thành 3 dòng, nhãn cao thêm ~14px và thò xuống đè vào logo. */
  .pt-age{max-width:205px; padding:5px 8px}
  .pt-age i{font-size:9px}
}

/* Điện thoại XOAY NGANG — cao chưa tới 560px mà bố cục mobile vẫn xếp dọc:
   nếu để nguyên khổ chữ thì riêng logo đã ăn hết màn, phải cuộn mới thấy nút.
   Nén chiều dọc lại, bỏ hàng ngọc, đội hình bám theo chiều cao màn. */
@media (max-height:560px) and (orientation:landscape) and (max-width:1149px){
  .pt-hero-in{padding:68px 16px 14px}
  .pt-hero-logo img{width:min(230px,30vw)}
  .pt-tia{--tia-d:min(300px,40vw)}
  .pt-hero-sub{font-size:11px; letter-spacing:.1em}
  .pt-hero-nut{margin-top:10px}
  .pt-hero-so{margin-top:10px}
  .pt-hero-so li{padding:6px 18px}
  .pt-ngoc{display:none}
  /* Nằm ngang thì màn thấp chứ không hẹp -> khổ nhân vật phải bám CHIỀU CAO
     màn, lấy theo vw như bản dựng đứng là nhân vật cao vống quá khung. */
  .pt-vong{--nv-cao:min(40vh,210px); --vong-h:min(58vh,290px); --nv-mo:.62; --x-he:1.06%}
  .pt-linh:nth-child(n+5){display:none}
  .pt-age{top:64px}
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
/* Font pixel rộng chữ hơn font thường nên thanh nav chật sớm -> ẩn từ 1100px */
@media (max-width:1100px){
  .hd nav{display:none}
  .burger{display:block}
  .hd .hghost{display:none}
}
@media (max-width:860px){
  .feats{grid-template-columns:1fr}
  .items{grid-template-columns:repeat(5,1fr); max-width:560px}
  .news{grid-template-columns:1fr}
  .classes{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .hd .who span{display:none}
  .hd .hcta{padding:8px 12px; font-size:13px; max-width:130px; overflow:hidden; text-overflow:ellipsis}
  main.page{padding-top:calc(var(--hd-h) + 20px)}
  .creator{padding:24px 14px 20px}
  .classes{gap:10px}
  .cls{padding:10px 6px}
  .cls .name{font-size:15px}
  .cls .role{font-size:12px}
}
@media (prefers-reduced-motion:reduce){ *{scroll-behavior:auto} .chev,.hero::after{animation:none} }

/* ==========================================================================
   GHI ĐÈ THEME CŨ TRONG bootstrap.min.css
   File bootstrap.min.css của site là bản custom, có sẵn một bộ giao diện sáng
   (nền kem #FDF8DA, chữ tối) và dùng !important ở nhiều chỗ.
   ========================================================================== */
body,.main{background-color:var(--bg) !important; color:var(--ink)}
body{background-image:linear-gradient(180deg,var(--bg-top) 0%,var(--bg) 100%) !important;
  background-attachment:fixed !important}
.main{border:none !important; box-shadow:none !important}

input:not([type=checkbox]):not([type=radio]):not([type=range]),
textarea,select{border:1px solid var(--gold-dim) !important; border-radius:0 !important}
input:not([type=checkbox]):not([type=radio]):not([type=range]):focus,
textarea:focus,select:focus{border-color:var(--gold-bd) !important}

.modal-content{border-radius:0 !important; border-width:1px}
#serverModal .modal-content{border-radius:0 !important}

.post-item{background-color:var(--panel-2); border:1px solid var(--gold-dim); color:var(--ink); --brk-arm:12px; --brk-w:2px}
.post-item .post-title{color:var(--gold-2); font-family:var(--disp); font-weight:700}
.post-item .post-title:hover{color:var(--gold)}
/* min-width:0 bắt buộc: .post-detail là ô flex bên trong .d-flex, mà ô flex mặc
   định là min-width:auto nên nó KHÔNG co xuống dưới bề rộng nội dung. Trong bài
   có bảng hay khối rộng là nó phình ra, đẩy tràn ngang cả trang trên điện thoại
   thay vì để khối đó tự cuộn trong khung của nó. Cùng cách chữa đã dùng cho
   .pt-news-in ở dòng 1197. */
.post-detail{background:rgba(0,0,0,.25); border-color:var(--panel-line); box-shadow:none; color:var(--ink); min-width:0}
/* TIÊU ĐỀ BÀI VIẾT. Khung bài chỉ bọc tên bài trong .fw-bold.text-primary của
   bootstrap = 16px, nhỉnh hơn chữ thường (15px) đúng một nấc, mà lại NHỎ HƠN
   cả thẻ h5 dùng cho tên mục trong thân bài (20px) — nhìn vào không biết đâu
   là tên bài, đâu là tên mục. Cho nó đúng vai trò tiêu đề cấp một.
   :empty ẩn đi vì có bài để title rỗng (vd slug 'tip'), không ẩn thì còn trơ
   lại một vạch kẻ ngang chẳng có chữ nào ở trên. */
.post-detail > .fw-bold.text-primary{
    /* Sàn 24px chứ không phải 21: h5 tên mục là 20px ở MỌI bề ngang, để sàn 21
       thì trên điện thoại tiêu đề bài chỉ hơn tên mục đúng 1px, nhìn như nhau. */
    font-family:var(--disp); font-weight:700; font-size:clamp(24px,3.2vw,29px);
    line-height:1.25; color:var(--gold-2); margin:2px 0 16px;
    padding-bottom:12px; border-bottom:1px solid var(--panel-line);
}
.post-detail > .fw-bold.text-primary:empty{display:none}
.post-author{color:var(--gold-2)}
.post-info,.post-date{color:var(--ink-dim) !important}
.admin-highlight{color:var(--gold)}
.comment-input{background:var(--bg-2); border:1px solid var(--gold-dim); box-shadow:none; color:var(--ink)}

.recharge-method-item{background-color:var(--panel-2); border:1px solid var(--gold-dim); --brk-arm:10px; --brk-w:2px}
.recharge-method-item.position-relative{display:flex; flex-direction:column; justify-content:center;
  line-height:1.35; height:auto !important; min-height:90px}
.recharge-method-item:hover{--brk:var(--gold-2); border-color:var(--gold-bd); background-color:var(--panel-3)}
.recharge-method-item.active{--brk:gold; --brk-arm:16px; background-color:var(--gold-dim); border-color:var(--gold-bd)}

.download-bg{background-color:var(--panel-2); border:1px solid var(--gold-dim); color:var(--ink); --brk-arm:10px; --brk-w:2px}
.download-bg.suggestion{background-color:var(--gold-dim) !important; border-color:var(--gold-bd)}
.download-icon{fill:var(--gold-2)}

.list-group-item-action,.list-group-item-action:hover{background-color:var(--panel) !important; color:var(--ink)}
.list-group-item-action:hover{background-color:var(--gold-dim) !important}
.nav-tabs .nav-link.active{background-color:var(--panel-tab) !important; color:var(--gold-2)}
.pagination{--bs-pagination-bg:var(--panel) !important; --bs-pagination-color:var(--ink-soft) !important;
  --bs-pagination-border-color:var(--panel-line) !important; --bs-pagination-hover-bg:rgba(217,173,66,.12) !important;
  --bs-pagination-active-bg:var(--gold) !important; --bs-pagination-active-border-color:var(--gold-d) !important;
  --bs-pagination-active-color:#1a1208 !important; --bs-pagination-disabled-bg:var(--bg-2) !important;
  --bs-pagination-border-radius:0 !important}
.pagination .page-item .page-link{color:var(--ink-soft) !important; border-radius:0 !important}
.pagination .page-item.active .page-link{color:#1a1208 !important}

.text-black,.text-body{color:var(--ink) !important}
.text-primary{color:var(--gold-2) !important}
.text-danger{color:#ff9c8c !important}
.text-success{color:#a8e09a !important}

/* Nội dung bài viết cũ nhúng màu chữ thẳng vào style -> trung hoà tại đây. */
[style*="color: rgb(33, 37, 41)"],
[style*="color:rgb(33,37,41)"],
[style*="color: rgb(73, 80, 87)"],
[style*="color: #212529"],
[style*="color:#212529"]{color:var(--ink) !important}

[style*="color: rgb(0, 102, 204)"],
[style*="color:rgb(0,102,204)"]{color:var(--blue) !important; background-color:transparent !important}

font[color="blue" i]{color:var(--blue) !important}
font[color="purple" i]{color:#cba6ff !important}
font[color="red" i]{color:#ff9c8c !important}
font[color="green" i]{color:#a8e09a !important}
font[color="black" i],font[color="drak" i],font[color="navy" i]{color:var(--ink) !important}

#serverModal [style*="color: rgb(33, 37, 41)"],
#serverModal [style*="color: #212529"]{color:#212529 !important}





/* ==========================================================================
   THỨ TỰ LỚP — CHỐT LẠI CHO MỌI TRÌNH DUYỆT GIỐNG NHAU

   .pt-tia (vòng tia sáng sau logo) đặt z-index:-1, mà cha nó .pt-logo-3d chỉ có
   position:relative CHỨ KHÔNG có z-index — nên nó không tạo tầng xếp lớp riêng.
   Phần tử z-index âm vì thế trượt ngược lên tận .pt-hero-in mà nằm chung tầng
   với tấm che tối .pt-hero-in::before. Hai đứa cùng z-index:-1, lúc này thứ tự
   vẽ chỉ còn phụ thuộc thứ tự trong DOM — mà thứ tự đó lại khác nhau giữa các
   bộ máy dựng trang, nên có trình duyệt tia sáng nằm trên tấm che, có trình
   duyệt tia bị tấm che nuốt mất.

   isolation:isolate ép .pt-logo-3d thành một tầng khép kín: tia sáng nằm sau
   logo, trước tấm che, ở đâu cũng vậy. Không dùng z-index vì đặt z-index lên
   .pt-logo-3d là nó lại tranh lớp với mấy khối khác trong hero.
   ========================================================================== */
.pt-logo-3d{isolation:isolate}

/* Cùng lý do: mỗi nhân vật trong đội hình có ::before vẽ vầng khí ở z-index:-1.
   Thẻ .pt-linh đã được PHP gắn z-index thẳng vào style nên vốn đã là một tầng
   riêng — thêm dòng này để nếu sau có ai bỏ z-index trong PHP đi thì vầng khí
   cũng không tuột ra sau ảnh nền. */
.pt-linh{isolation:isolate}


/* ==========================================================================
   TRANG TẢI GAME  (/Others/Downloads)

   Bản cũ dùng thẳng lưới bootstrap col-md-4: 5 thẻ chia thành hàng 3 + hàng 2
   dính lề trái, chừa một ô trống toang hoác bên phải; thẻ nào mô tả dài hai
   dòng thì cao hơn thẻ bên cạnh, mà nút lại bám theo đáy chữ nên hàng nút
   nhấp nhô mỗi cái một độ cao.

   Nay dùng flex-wrap + justify-content:center -> hàng cuối tự canh giữa, và
   nút được đẩy xuống đáy thẻ bằng margin-top:auto -> mọi nút thẳng một hàng
   bất kể mô tả dài ngắn.
   ========================================================================== */
.tai{max-width:1080px; margin:0 auto; padding:6px 0 46px}

.tai-dau{text-align:center; max-width:660px; margin:0 auto 30px}
.tai-dau h1{font-size:clamp(26px,4.4vw,40px); line-height:1.16; margin-bottom:10px;
  background:linear-gradient(180deg,#ffe9a6,#ffb347 58%,#ff5a2b);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  /* background-clip:text làm text-shadow của h1 chung bị vẽ ĐÈ lên trên mặt chữ
     (chữ trong suốt, bóng lộ ra hết) -> tắt bóng, dùng drop-shadow thay. */
  text-shadow:none; filter:drop-shadow(0 2px 0 rgba(0,0,0,.7))}
.tai-dau p{color:var(--ink-soft); margin:0; font-size:15.5px}

.tai-luoi{display:flex; flex-wrap:wrap; justify-content:center; gap:18px}

.tai-the{
  --mau:var(--gold-2);
  --brk:var(--mau); --brk-arm:16px; --brk-w:3px;
  /* flex-basis 268px: ba thẻ + hai khe = 1040px, vừa khít khung 1080 trừ lề */
  flex:1 1 268px; max-width:330px;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  position:relative; padding:30px 20px 22px;
  background-color:var(--panel-2);
  border:1px solid var(--gold-dim);
  transition:transform .2s, border-color .2s, box-shadow .2s, background-size .2s}

/* Vệt sáng mảnh trên đỉnh thẻ, ăn màu theo nền tảng */
.tai-the::before{content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background:linear-gradient(90deg, transparent, var(--mau), transparent); opacity:.85}

.tai-the:hover{transform:translateY(-4px); border-color:var(--mau);
  --brk-arm:30px;
  box-shadow:0 12px 26px rgba(0,0,0,.45), 0 0 0 1px color-mix(in srgb, var(--mau) 30%, transparent)}

/* Nhãn góc — dùng inset chứ không ride lên viền, để không bị viền cắt mất chữ */
.tai-nhan{position:absolute; top:10px; right:10px;
  font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:#12161c; background:var(--mau); padding:3px 9px; line-height:1.5;
  clip-path:polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%)}

.tai-icon{display:grid; place-items:center; width:74px; height:74px; margin-bottom:16px;
  color:var(--mau); border-radius:50%;
  background:radial-gradient(circle at 50% 50%,
    color-mix(in srgb, var(--mau) 22%, transparent) 0%,
    color-mix(in srgb, var(--mau) 8%, transparent) 55%, transparent 72%);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--mau) 28%, transparent)}
.tai-icon svg{width:38px; height:38px; display:block;
  filter:drop-shadow(0 0 8px color-mix(in srgb, var(--mau) 45%, transparent))}

.tai-the h2{font-size:19px; color:var(--ink); margin-bottom:8px; text-shadow:0 2px rgba(0,0,0,.5)}
.tai-mo-ta{color:var(--ink-soft); font-size:14.5px; line-height:1.6; margin:0}

/* Dòng cỡ file. Khi rỗng vẫn phải chiếm đúng chừng ấy chiều cao, nếu không thẻ
   có file sẽ cao hơn thẻ không có file rồi lệch nhau y như bản cũ. */
.tai-co{margin:10px 0 0; font-size:12.5px; letter-spacing:.04em; color:var(--ink-dim);
  min-height:19px; line-height:19px}
.tai-co.trong{visibility:hidden}

/* margin-top:auto = mấu chốt canh phẳng: chỗ trống thừa dồn hết lên trên nút,
   nên hàng nút của mọi thẻ đều nằm cùng một cao độ. */
.tai-nut{margin-top:auto; padding-top:18px; display:flex; flex-direction:column;
  gap:9px; width:100%}
/* Nút giãn hết bề ngang thẻ. white-space:normal ghi đè nowrap của .btn chung:
   nhãn dài như "Bản X3 · X6 · X10" gặp nowrap là đâm ngang ra khỏi thẻ. */
.tai-nut .btn{width:100%; white-space:normal; padding:12px 14px; --brk:var(--mau)}

.tai-giup{max-width:660px; margin:30px auto 0; padding:16px 20px; text-align:center;
  background:var(--panel); border:1px dashed var(--gold-dim)}
.tai-giup p{margin:0; color:var(--ink-soft); font-size:14.5px; line-height:1.7}
.tai-giup b{color:var(--gold-2)}

/* Màu riêng từng nền tảng — chỉ đổi một biến là cả viền, hình vẽ, hào quang
   và ngoặc góc của thẻ đó đổi theo. */
.tai-web{--mau:#4fd0ff}
.tai-apk{--mau:#7fd858}
.tai-ios{--mau:#d7dde6}
.tai-pc {--mau:#a68bff}
.tai-jar{--mau:#ffb347}

/* color-mix còn mới; trình duyệt cũ không hiểu thì bỏ nguyên khai báo đó, dẫn
   tới mất luôn hào quang và viền sáng. Nhánh dự phòng dựng lại bằng màu đặc
   pha sẵn qua opacity của lớp phủ. */
@supports not (background: color-mix(in srgb, red 50%, transparent)){
  .tai-icon{background:rgba(255,255,255,.07); box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
  .tai-icon svg{filter:none}
  .tai-the:hover{box-shadow:0 12px 26px rgba(0,0,0,.45)}
}

@media (max-width:700px){
  .tai{padding-bottom:34px}
  .tai-luoi{gap:14px}
  /* Một cột cho gọn ngón tay; bỏ max-width để thẻ trải hết bề ngang màn */
  .tai-the{flex:1 1 100%; max-width:none; padding:24px 18px 20px}
  .tai-icon{width:64px; height:64px; margin-bottom:12px}
  .tai-icon svg{width:32px; height:32px}
  .tai-dau{margin-bottom:22px}
}




/* ==========================================================================
   THANH HÀNH ĐỘNG KHI TẮT NẠP COIN — giữ quả cầu đúng tâm màn

   Lưới gốc là 1fr auto 1fr auto (Top | cầu | Đăng nhập | Nạp Coin). Bỏ ô Nạp
   Coin đi thì phải trả về 1fr auto 1fr, KHÔNG được rơi sang .pt-actions-2:
   lớp đó viết cho bộ ba khác, chỉ ấn định bề ngang ô đăng nhập nên hai bên
   cầu lệch nhau gần 200px.

   Chỉ áp từ 1150px trở lên: dưới ngưỡng đó @media (max-width:1149px) đã bẻ cả
   thanh thành cột dọc, ép lưới ngang vào là hỏng bố cục điện thoại.
   ========================================================================== */
@media (min-width:1150px){
  .pt-actions-in.pt-actions-3{
    display:grid; grid-template-columns:1fr auto 1fr;
    align-items:stretch; gap:12px; max-width:1120px; margin:0 auto; padding:0 20px}
}


/* ==========================================================================
   MỘT SỐ CHỖ CHỮ DỄ VỠ KHUNG

   Tên tài khoản người chơi tự đặt, có thể dài ngoằng và không có dấu cách —
   gặp ô hẹp là nó đâm thẳng ra ngoài khung thay vì xuống dòng. Ba chỗ hay
   dính nhất: bảng Top Cao Thủ, ô tài khoản ở thanh hành động, và thanh tài
   khoản ở đầu các trang con.
   ========================================================================== */
#ptTopList li span, .pt-acct b, .acct-bar b{
  overflow-wrap:anywhere; word-break:break-word; min-width:0}
#ptTopList li{min-width:0}


/* ==========================================================================
   BIẾN THỂ NÚT .db BỔ SUNG

   Trước đây các nút "tab" và nút mạng xã hội mượn .btn-success của bootstrap,
   mà bootstrap.min.css của site là bản chế riêng có sẵn theme XANH MÒNG KÉT
   (--bs-btn-bg:#0aa8a8). Nó thắng .btn.btn-success trong theme.css, nên giữa
   một trang tông lửa cam lại mọc ra mấy nút xanh lục — lạc hẳn khỏi thế giới
   Dragon Ball của site. Nay mọi nút đó chuyển sang dùng .db, và hai biến thể
   dưới đây là thứ .db còn thiếu để thay thế được trọn vẹn.
   ========================================================================== */

/* TẮT — dùng cho tab chưa được chọn. Giữ nguyên viền đen dày và gờ cứng của
   .db (vẫn là một họ), chỉ hạ thân về xám thép để cái đang chọn nổi bật hẳn.
   Không dùng opacity vì mờ cả viền đen thì nút trông như bị vô hiệu hoá. */
.db.tat{background:linear-gradient(180deg,#414b59 0%,#262e39 46%,#171c24 100%)}
.db.tat > span{color:#b9c2cf;
  text-shadow:
    -2px -2px 0 #0d1117,  0 -2px 0 #0d1117,  2px -2px 0 #0d1117,
    -2px  0   0 #0d1117,                     2px  0   0 #0d1117,
    -2px  2px 0 #0d1117,  0  2px 0 #0d1117,  2px  2px 0 #0d1117,
     0 3px 0 #05070a}
.db.tat:hover{filter:brightness(1.18)}

/* Ảnh trong nút (biểu tượng Facebook, Zalo...) phải nghiêng NGƯỢC lại đúng
   bằng độ nghiêng của thân nút, nếu không biểu tượng bị đổ xiên trông hỏng. */
.db > img{transform:skewX(6deg); flex:0 0 auto}

/* Nút .db nằm trong dòng chảy bootstrap cũ hay bị .w-100/.mb-2 nhét margin
   lung tung — khoá lại cho đều. */
.db.full + .db.full{margin-top:10px}


/* ==========================================================================
   TAB BẢNG XẾP HẠNG
   Hàng nút lọc (Top Level / Top Nạp). Dùng .db.nho nên tự thừa hưởng cả bộ
   viền đen + gờ cứng + chữ vàng viền đậm của họ nút chính.
   ========================================================================== */
.ranking-buttons{display:flex; justify-content:center; flex-wrap:wrap; gap:10px}
/* Ghi đè min-width:120px mà bootstrap gán riêng cho .btn-success — số đó tính
   cho nút chữ Latin, chữ Việt có dấu dài hơn nên để nút tự co theo nội dung. */
.ranking-buttons .db{min-width:0}
/* Trên màn cảm ứng nâng chiều cao nút lên >=44px — dưới ngưỡng đó ngón tay hay
   bấm trượt. Chỉ nới padding dọc nên chữ và bố cục không đổi chỗ. */
@media (hover:none){
  .ranking-buttons .db{padding-top:12px; padding-bottom:12px}
}


/* ==========================================================================
   POPUP BẢNG XẾP HẠNG  (bấm "Xem thêm" ở ô Top Cao Thủ ngoài trang chủ)

   Không dùng modal của bootstrap: trang chủ không nạp bootstrap, và modal đó
   kéo theo cả một bộ giao diện sáng lạc tông. Dựng riêng ~40 dòng, dùng đúng
   ngôn ngữ tấm + ngoặc góc + huy hiệu vàng/bạc/đồng của site.
   ========================================================================== */
.pt-pop{position:fixed; inset:0; z-index:1200; display:grid; place-items:center;
  padding:20px; background:rgba(4,7,10,.82); backdrop-filter:blur(3px);
  opacity:0; visibility:hidden; transition:opacity .25s, visibility .25s}
.pt-pop.mo{opacity:1; visibility:visible}

/* Khung: dùng lại đúng công thức ngoặc góc của .pt-block, thêm quầng lửa cam
   phía sau cho ra chất khí lực. max-height + overflow để màn thấp vẫn cuộn
   được nội dung bên trong thay vì tràn ra ngoài màn hình. */
.pt-pop-khung{position:relative; width:min(440px,100%); max-height:min(86vh,720px);
  display:flex; flex-direction:column;
  background:linear-gradient(160deg,rgba(28,34,44,.99),rgba(14,18,24,.99));
  border:1px solid var(--gold-bd); padding:22px 20px 18px;
  box-shadow:0 24px 70px rgba(0,0,0,.75), 0 0 60px rgba(255,90,43,.18),
    inset 0 1px 0 rgba(255,255,255,.07);
  clip-path:polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
  transform:translateY(14px) scale(.97); transition:transform .28s cubic-bezier(.2,.8,.3,1)}
.pt-pop.mo .pt-pop-khung{transform:none}

.pt-pop-dau{display:flex; align-items:center; justify-content:center; position:relative;
  margin-bottom:14px; padding-bottom:12px; border-bottom:1px solid var(--gold-dim)}
.pt-pop-dau h3{font-family:var(--disp); font-weight:800; font-size:17px; letter-spacing:.06em;
  color:var(--gold-2); margin:0; text-transform:uppercase; text-shadow:0 2px 0 rgba(0,0,0,.6)}
.pt-pop-dong{position:absolute; right:-4px; top:-6px; width:34px; height:34px; cursor:pointer;
  display:grid; place-items:center; padding:0; font-size:20px; line-height:1;
  background:transparent; border:1px solid var(--gold-dim); color:var(--ink-soft);
  transition:color .2s, border-color .2s, background .2s}
.pt-pop-dong:hover{color:var(--gold-2); border-color:var(--gold-bd); background:rgba(255,90,43,.1)}

/* Danh sách cuộn được; hàng dùng lại y hệt kiểu của ô Top Cao Thủ ngoài trang
   chủ nên hai chỗ nhìn là một hệ, không phải học lại cách đọc. */
.pt-pop-ds{list-style:none; margin:0; padding:0 4px 0 0; overflow-y:auto;
  display:grid; grid-template-columns:1fr; gap:7px}
.pt-pop-ds li{display:flex; align-items:center; gap:10px; font-size:13.5px; color:var(--ink);
  min-width:0; padding:9px 12px; border-radius:9px; background:rgba(255,255,255,.035);
  border:1px solid rgba(217,173,66,.14)}
.pt-pop-ds li.hang1{background:linear-gradient(90deg,rgba(255,201,60,.2),rgba(255,201,60,.04));
  border-color:rgba(255,201,60,.45)}
.pt-pop-ds li.hang2{background:linear-gradient(90deg,rgba(210,220,235,.13),rgba(210,220,235,.03));
  border-color:rgba(210,220,235,.26)}
.pt-pop-ds li.hang3{background:linear-gradient(90deg,rgba(205,127,72,.14),rgba(205,127,72,.03));
  border-color:rgba(205,127,72,.3)}
.pt-pop-ds li i{font-style:normal; width:23px; height:23px; flex:0 0 auto; display:grid;
  place-items:center; font-size:11.5px; font-weight:700; border-radius:50%; color:#2a1d05;
  background:rgba(255,255,255,.16); box-shadow:0 1px 5px rgba(0,0,0,.35)}
.pt-pop-ds li:not(.hang1):not(.hang2):not(.hang3) i{background:rgba(255,255,255,.14); color:var(--ink)}
.pt-pop-ds li.hang1 i{background:linear-gradient(180deg,var(--kim-2),var(--kim))}
.pt-pop-ds li.hang2 i{background:linear-gradient(180deg,#eef2f8,#aab7c6)}
.pt-pop-ds li.hang3 i{background:linear-gradient(180deg,#f0c09a,#c07a45)}
.pt-pop-ds li span{flex:1 1 auto; min-width:0; overflow-wrap:anywhere; color:#fff}
.pt-pop-ds li b{flex:0 0 auto; color:var(--gold-2); font-weight:600; font-size:12px;
  font-variant-numeric:tabular-nums}
.pt-pop-chan{margin-top:14px; padding-top:12px; border-top:1px solid var(--gold-dim)}

/* Màn thấp / điện thoại nằm ngang: khung ăn gần trọn màn, chữ nhỏ lại một nấc */
@media (max-height:560px){
  .pt-pop{padding:10px}
  .pt-pop-khung{max-height:94vh; padding:16px 14px 12px}
  .pt-pop-dau{margin-bottom:10px; padding-bottom:9px}
  .pt-pop-ds li{padding:7px 10px; font-size:12.5px}
}
@media (max-width:430px){
  .pt-pop-khung{padding:18px 15px 14px}
  .pt-pop-dau h3{font-size:15px}
}
@media (prefers-reduced-motion:reduce){
  .pt-pop, .pt-pop-khung{transition:none}
}


/* ==========================================================================
   TRUNG HOÀ MÀU NÚT CỦA BOOTSTRAP  — quét toàn site

   bootstrap.min.css của site là bản chế của một dự án khác, mang theo nguyên
   một bảng màu lạc hẳn thế giới lửa cam của Rồng Thần Chibi:

     .btn-success  xanh mòng két #078f85 + hoa văn SÓNG vẽ bằng SVG + quầng
                   sáng vàng — và tô bằng !important nên theme.css thua sạch
     .btn-primary  xanh dương #0d6efd
     .btn-info     xanh lơ  #0dcaf0

   Mấy lớp này còn rải ở trang Hồ sơ, Lịch sử GD, các trang bài viết cũ. Sửa
   từng trang thì vừa sót vừa phải đụng hàng chục file, nên chặn ngay tại đây:
   đổi luôn bộ biến --bs-btn-* để MỌI nút bootstrap còn sót lại tự mặc kiểu
   của site. Nút mới thì dùng .db, không dùng mấy lớp này nữa.
   ========================================================================== */

/* Bộ biến dùng chung: thân đỏ huyết dụ, viền vàng, chữ kem — đúng bảng màu site */
.btn-success, .btn-primary, .btn-info, .btn-secondary{
  --bs-btn-color:var(--ink);
  --bs-btn-bg:var(--accent);
  --bs-btn-border-color:var(--gold-bd);
  --bs-btn-hover-color:#fff;
  --bs-btn-hover-bg:var(--accent-h);
  --bs-btn-hover-border-color:var(--gold);
  --bs-btn-active-color:#fff;
  --bs-btn-active-bg:var(--accent-h);
  --bs-btn-active-border-color:var(--gold);
  --bs-btn-disabled-color:var(--ink-dim);
  --bs-btn-disabled-bg:var(--bg-2);
  --bs-btn-disabled-border-color:var(--panel-line);
}

/* Riêng .btn-success phải dùng !important để thắng — bản bootstrap kia tô
   !important cho từng thuộc tính một. Gỡ cả hoa văn sóng SVG (background-image)
   lẫn quầng sáng vàng: hai thứ đó là dấu vết của giao diện cũ, không thuộc về
   hệ hình nào của site. */
.btn-success{
  background-color:var(--accent) !important;
  background-image:none !important;
  box-shadow:none !important;
  color:var(--ink) !important;
  border-width:1px !important;
  border-color:var(--gold-bd) !important;
  text-shadow:0 1px 0 rgba(0,0,0,.55) !important;
  letter-spacing:.02em;
  min-width:0;
}
.btn-success:hover{
  background-color:var(--accent-h) !important;
  border-color:var(--gold) !important;
  color:#fff !important;
}