/* style-789club-vb.css — per-site override cho 789club-vb.in.net
   Palette R-41: trích PIL từ mainsite THẬT (_provided/resourceMainsite/789club.lc/,
   design/brands/789club/mainsite/banner/access-btn-*.png, signup-btn-*.png, ambassador.webp).
   789Club mainsite thật = giao diện "cyberpunk" TÍM-NAVY + neon xanh/hồng (logo chrome iridescent
   trắng/lục/tím/hồng trên nền đen-tím) — KHÔNG phải gold-casino mặc định, KHÔNG navy thuần.
   Đối chiếu thêm config/brands.yaml "789club": purple #a197ff / bg #060516 (khớp hướng trích).

   --bg #0a0518 (đen-tím sâu, đo trung bình 4 góc ambassador.webp: #0a0217~#0e031d)
   --brand #9d5cff (tím-violet sáng — headings/accent, contrast 5.16:1 trên --bg)
   --brand2 #ec4899 (hồng neon — gradient end nút chính, khớp viền hồng access-btn/signup-btn)
   --heading #f3ecff (trắng ánh tím, AA ~17.4:1 trên --bg)
   Mọi component dùng design/library/lib.css (không viết lại cấu trúc).
   ============================================================ */

.lib {
  /* Nền: đen-tím sâu (cyberpunk), KHÔNG navy thuần/gold */
  --bg:          #0a0518;
  --bg-2:        #120a28;
  --panel:       #170f30;
  --panel-grad:  linear-gradient(160deg,#1c1140,#120a28);
  --panel-grad2: linear-gradient(180deg,#170f30,#0a0518);
  --line:        #2e2158;
  --line-soft:   rgba(46,33,88,.55);

  /* Chữ: trắng ánh tím sáng trên nền đen-tím */
  --ink:         #e6def5;
  --heading:     #f3ecff;
  --mut:         #a99bc4;

  /* Brand: TÍM-VIOLET chính + HỒNG NEON phụ (đúng identity cyberpunk 789Club thật) */
  --brand:       #9d5cff;
  --brand2:      #ec4899;
  --brand-grad:  linear-gradient(135deg,#9d5cff,#ec4899);
  --glow:        0 0 0 1px rgba(157,92,255,.35), 0 8px 26px -8px rgba(236,72,153,.45);
  --on:          #0a0518;
}

/* Body nền: radial glow tím/hồng trên đen-tím (không có bg.webp mainsite sẵn — dùng gradient,
   KHÔNG bịa ảnh) */
body.lib {
  background:
    radial-gradient(900px 480px at 15% -80px, rgba(157,92,255,.20), transparent 60%),
    radial-gradient(700px 420px at 100% 20%, rgba(236,72,153,.14), transparent 55%),
    #0a0518;
  color: var(--ink);
}

/* NÚT PHỤ (.btn không có .btn-main): viền + chữ TÍM rõ trên nền đen-tím */
.lib a.btn:not(.btn-main) {
  border: 1.5px solid #9d5cff;
  color: #c9adff;
  background: rgba(157,92,255,.10);
}
.lib a.btn:not(.btn-main):hover {
  border-color: #c9adff;
  color: #e6d6ff;
  background: rgba(157,92,255,.20);
}

/* NÚT CHÍNH (.btn-main): gradient tím-hồng neon, chữ ĐEN-TÍM ĐẬM (contrast AA) */
.btn-main {
  background: linear-gradient(135deg, #9d5cff, #ec4899);
  color: #0a0518 !important;
  border: none;
  box-shadow: 0 6px 18px -6px rgba(157,92,255,.5);
}
.btn-main:hover {
  background: linear-gradient(135deg, #b482ff, #f472b6);
  box-shadow: 0 0 0 1px rgba(157,92,255,.55), 0 12px 30px -8px rgba(236,72,153,.6);
}

/* HEADING: trắng ánh tím (KHÔNG dùng --brand bão hoà cho chữ nhỏ — giữ AA) */
.h1, .h2, .read h1, .read h2, .read h3 { color: var(--heading); }
.h1 strong, .h2 strong { color: var(--brand); }

/* FOOTER: lib.css .lf hardcode nền navy linear-gradient(180deg,#1a2030,#10141e) ->
   override đen-tím cyberpunk cho khớp palette site (R-41 KHÔNG navy mặc định) */
.lf { background: linear-gradient(180deg,#170f30,#0a0518); }

/* HEADER rows-2 (h2-center-sticky): hàng 1 lh-main, hàng 2 lh-nav */
/* lib.css .lh.sticky hardcode nền navy rgba(24,30,46,.85) (không dùng biến palette) ->
   override đen-tím cho khớp --bg/--panel của site (R-41 KHÔNG navy mặc định) */
.lh.sticky { background: rgba(17,10,35,.90); }
.lh { background: var(--panel-grad2); }
.lh .lh-main { padding: 11px 16px; }
.lh .logo img { border-radius: 8px; }
.lh-nav {
  justify-content: center;
  flex-wrap: nowrap;
  gap: 24px;
}
.lh-nav a { white-space: nowrap; }

/* rail sticky (dùng ở blogB/pageB nếu có sau này): top offset = lh-main(70) + lh-nav(42) = ~112px */
.rail { top: 113px; }

/* MOBILE <=640px — chỉ override AN TOÀN, không đè media query lib.css (mobile-specialist B2 sẽ pass kỹ hơn) */
@media (max-width: 640px) {
  /* lib.css .sticky-cta hardcode nền navy rgba(20,24,34,.97) -> override đen-tím */
  .sticky-cta { background: rgba(10,5,24,.97); }
  .h1 { font-size: 20px; letter-spacing: 0; }
  .h2 { font-size: 17px; }
  .h1, .h2, h1, h2, h3 { word-break: break-word; overflow-wrap: break-word; }
  .wrap, .lay, section { overflow-x: clip; }
  .hero .btn, .cta-block .btn { width: 100% !important; justify-content: center; }
  .sticky-cta .btn { font-size: 13px; padding: 12px 8px; }
  .read img, .read figure, .read table { max-width: 100%; }
  body { overflow-x: hidden; }
}

/* TAB CHỮ MÀU: tab thường sáng, tab active đậm trên nền tím-hồng */
.lib .tabs .tab    { color: var(--ink); }
.lib .tabs .tab.on { color: var(--on);  }

/* qc-final (homepage) sửa 1+2 — grid riêng cho 2 khối trang chủ, KHÔNG đụng .subcards mặc định
   lib.css (nơi khác vẫn dùng repeat(3,1fr) gốc). Dùng class riêng vì .subcards có inline-style
   base (grid-template-columns) ở _render_home.py không thể bị media query lib.css override. */

/* Kho game lưới (8 sảnh, text-only): 2 cột desktop, 1 cột mobile */
.kho-2col { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 640px) {
  .kho-2col { grid-template-columns: 1fr; }
}

/* Chuyên mục nổi bật: 1 hàng ngang 4 cột desktop, 2 cột tablet, 1 cột mobile */
.cat-row { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  .cat-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .cat-row { grid-template-columns: 1fr; }
}

/* Bruce: mở rộng CỘT GIỮA trang chủ — override .lay-363 lib.css (3fr 6fr 3fr = 50%)
   → 2.5fr 7fr 2.5fr (giữa ~58%), rails hẹp lại vẫn đủ chỗ banner dọc.
   ⚠️ PHẢI bọc trong @media(min-width:1025px): specificity .lib .lay-363 (0,2,0)
   thắng cả rule collapse mobile của lib.css @max-1024 (.lay-363 → 1fr, chỉ 0,1,0)
   → nếu để trần sẽ khiến mobile KHÔNG sập 1 cột (3 cột nén trong 390px). Chỉ áp desktop. */
@media (min-width: 1025px) {
  .lib .lay-363 { grid-template-columns: 2.5fr 7fr 2.5fr; }
}