/* style-sunwin-vb.css — per-site override cho sunwin-vb.in.net
   Palette R-41: trích PIL từ mainsite thật (_provided/resourceMainsite/sunwin.tg/
   hero-main.webp, bg.webp) — GOLD-CAM ấm trên nền NÂU-ĐEN (khác navy của sunwin-win.com.co).
   --brand #e3b35d · --brand2 #a86332 · --heading #f4e4c9 (cream, AA ~15.8:1 trên --bg #120800)
   Mọi component dùng design/library/lib.css (không viết lại cấu trúc).
   ============================================================ */

.lib {
  /* Nền: nâu-đen ấm (khác navy sunwin-win.com.co) */
  --bg:          #120800;
  --bg-2:        #1a0d02;
  --panel:       #22120a;
  --panel-grad:  linear-gradient(160deg,#2a1608,#1a0d02);
  --panel-grad2: linear-gradient(180deg,#22120a,#120800);
  --line:        #3a2313;
  --line-soft:   rgba(58,35,19,.55);

  /* Chữ: cream sáng trên nền nâu-đen */
  --ink:         #f0e6d8;
  --heading:     #f4e4c9;
  --mut:         #b8a68c;

  /* Brand: GOLD-CAM chính + NÂU-CAM phụ */
  --brand:       #e3b35d;
  --brand2:      #a86332;
  --brand-grad:  linear-gradient(135deg,#e3b35d,#a86332);
  --glow:        0 0 0 1px rgba(227,179,93,.35), 0 8px 26px -8px rgba(227,179,93,.45);
  --on:          #1f0f04;
}

/* Body nền: bg.webp mainsite phủ toàn trang + fallback nâu-đen */
body.lib {
  background: #120800 url('/assets/img/bg.webp') top center / cover no-repeat fixed;
  color: var(--ink);
}
@media (max-width: 768px) {
  body.lib { background-attachment: scroll; }
}

/* NÚT PHỤ (.btn không có .btn-main): viền + chữ GOLD rõ trên nền nâu-đen */
.lib a.btn:not(.btn-main) {
  border: 1.5px solid #e3b35d;
  color: #e3b35d;
  background: rgba(227,179,93,.10);
}
.lib a.btn:not(.btn-main):hover {
  border-color: #f4cd8a;
  color: #f4cd8a;
  background: rgba(227,179,93,.20);
}

/* NÚT CHÍNH (.btn-main): gradient gold-cam, chữ NÂU ĐẬM (contrast AA) */
.btn-main {
  background: linear-gradient(135deg, #e3b35d, #a86332);
  color: #1f0f04 !important;
  border: none;
  box-shadow: 0 6px 18px -6px rgba(227,179,93,.5);
}
.btn-main:hover {
  background: linear-gradient(135deg, #f4cd8a, #a86332);
  box-shadow: 0 0 0 1px rgba(227,179,93,.55), 0 12px 30px -8px rgba(227,179,93,.6);
}

/* HEADING: màu GOLD-CAM */
.h1, .h2, .read h1, .read h2, .read h3 { color: var(--brand); }

/* FOOTER: lib.css .lf hardcode nền navy linear-gradient(180deg,#1a2030,#10141e) ->
   override nâu-đen ấm cho khớp palette site (R-41 KHÔNG navy mặc định) */
.lf { background: linear-gradient(180deg,#22120a,#120800); }

/* 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 nâu-đen ấm cho khớp --bg/--panel của site (R-41 KHÔNG navy mặc định) */
.lh.sticky { background: rgba(34,18,10,.90); }
.lh { background: var(--panel-grad2); }
.lh .lh-main { padding: 11px 16px; }
.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 nâu-đen ấm */
  .sticky-cta { background: rgba(26,13,2,.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 gold */
.lib .tabs .tab    { color: var(--ink); }
.lib .tabs .tab.on { color: var(--on);  }

/* ============================================================
   MARQUEE VÔ HẠN (S2 "Kho Game") — 2026-07-06, yêu cầu Bruce mục 4.
   Track render x2 (duplicate list, trong _render_home.py::section_strip());
   CSS chỉ dịch chuyển translateX 0 -> -50% liên tục = đúng 1 vòng list gốc.
   Dùng class riêng .marquee-wrap/.marquee-track (KHÔNG sửa .marquee trong lib.css
   để tránh ảnh hưởng trang/site khác dùng chung lib.css).
   ============================================================ */
.marquee-wrap { overflow: hidden; width: 100%; }
.marquee-track {
  display: flex;
  gap: 12px;
  width: max-content;
  animation: marquee-scroll 26s linear infinite;
}
.marquee-wrap:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (max-width: 640px) {
  .marquee-track { animation-duration: 16s; }
}

/* ============================================================
   SUBCARDS 4-THẺ "Cách tham gia" — 2026-07-06, yêu cầu Bruce mục 7.
   lib.css .subcards mặc định 3 cột desktop -> ghi đè 4 cột bằng selector
   ghép lớp (.subcards.subcards-4) có độ đặc hiệu CAO HƠN .subcards đơn.
   LƯU Ý (bug đã sửa 2026-07-06): độ đặc hiệu CAO HƠN thắng BẤT KỂ có nằm
   trong @media hay không -> PHẢI khai báo lại 2/1 cột ở đúng breakpoint
   900px/640px bằng CÙNG selector ghép lớp, nếu không rule desktop 4 cột
   sẽ đè luôn cả rule responsive của lib.css (đã test thấy vỡ ở 390px).
   ============================================================ */
.subcards.subcards-4 { grid-template-columns: repeat(4, 1fr); }
.subcards.subcards-4 .box { display: flex; flex-direction: column; height: 100%; }
.subcards.subcards-4 .subcard-img {
  aspect-ratio: 4/3;
  overflow: hidden;
  border-radius: var(--rad);
  margin-bottom: 10px;
}
@media (max-width: 900px) {
  .subcards.subcards-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .subcards.subcards-4 { grid-template-columns: 1fr; }
}

/* req 2026-07-10 (Bruce): hero 2 banner chinh hang/gia mao 2 ben sapo */
.hero-flank{display:flex;align-items:center;justify-content:center;gap:24px;flex-wrap:nowrap;max-width:1160px;margin:0 auto}
.hero-center{max-width:720px;flex:1 1 auto;text-align:center}
.hero-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px;justify-content:center}
.hero-side{flex:0 0 auto;width:220px;max-width:20vw;height:auto;border-radius:14px;box-shadow:var(--shadow);display:block}
@media(max-width:900px){
  .hero-flank{flex-wrap:wrap;gap:12px}
  .hero-center{flex:1 1 100%;order:-1}
  /* 2 banner đứng cạnh nhau (2 cột) trên mobile, không xếp dọc full-width */
  .hero-side{flex:0 0 auto;width:calc(50% - 6px);max-width:calc(50% - 6px);min-width:0}
}