/*
 * style-b52club-vin.css — Override palette + component riêng cho b52club-vin.com.co
 * Extends lib.css (luôn load SAU lib.css).
 * Palette: nền tối anthracite, brand vàng đồng, accent olive.
 * R-41: màu trích từ mainsite B52CLUB (gold #c8a030, olive #3d6b1a, dark #16161c).
 *
 * MAP biến lib.css → giá trị b52club:
 *   --bg        #16161c   (anthracite tối — tông b52club mainsite)
 *   --panel     #1e1e26   (panel card)
 *   --panel2    #252530   (panel2 — tab on, header nav bg)
 *   --line      #2e2e3a   (viền)
 *   --line-soft rgba(200,160,48,.08)
 *   --ink       #e8e2d0   (kem — body text trên nền anthracite)
 *   --mut       #9a9080   (muted text)
 *   --brand     #c8a030   (vàng đồng — CTA, link chủ đạo)
 *   --brand2    #a07820   (gold đậm — hover, accent)
 *   --on        #1a1200   (chữ tối trên nền vàng — tương phản cao)
 *   --heading   #f5e8a0   (vàng nhạt — heading trên nền tối)
 *   --brand-grad linear-gradient(135deg,#e0b840,#a07820)
 *   --glow      0 0 0 1px rgba(200,160,48,.35),0 8px 26px -8px rgba(200,160,48,.45)
 *   --panel-grad linear-gradient(160deg,#22202e,#181820)
 *   --panel-grad2 linear-gradient(160deg,#252530,#1a1a24)
 *
 * MÃ GIAO DIỆN: h3-center-sticky / lf--1 / blogA / archiveB / pageA
 */

:root {
  /* === NỀN & PANEL === */
  --bg:           #16161c;
  --panel:        #1e1e26;
  --panel2:       #252530;
  --line:         #2e2e3a;
  --line-soft:    rgba(200, 160, 48, .08);

  /* === CHỮ === */
  --ink:          #e8e2d0;
  --mut:          #9a9080;
  --heading:      #f5e8a0;

  /* === BRAND GOLD (b52club) === */
  --brand:        #c8a030;
  --brand2:       #a07820;
  --on:           #1a1200;
  --brand-grad:   linear-gradient(135deg, #e0b840, #a07820);
  --glow:         0 0 0 1px rgba(200,160,48,.35), 0 8px 26px -8px rgba(200,160,48,.45);

  /* === ACCENT OLIVE (secondary) === */
  --accent-olive: #3d6b1a;
  --accent-olive2: #5a9a28;

  /* === PANEL GRADIENT (anthracite) === */
  --panel-grad:   linear-gradient(160deg, #22202e, #181820);
  --panel-grad2:  linear-gradient(160deg, #252530, #1a1a24);

  /* === SHADOW === */
  --shadow:       0 6px 18px -8px rgba(0, 0, 0, .75);
  --shadow-lg:    0 16px 40px -14px rgba(0, 0, 0, .85);

  /* === OK / WARN === */
  --ok:           #3d6b1a;
  --warn:         #e0b840;
}

/* ── NỀN TRANG: anthracite tối + radial-gradient vàng ấm nhẹ ở đỉnh ── */
.lib {
  background:
    radial-gradient(900px 420px at 60% -80px, rgba(200,160,48,.06), transparent 60%),
    radial-gradient(600px 300px at 0% 0, rgba(61,107,26,.04), transparent 50%),
    var(--bg);
}

/* ── NÚT CTA: nền gradient vàng đồng, chữ tối ── */
.btn-main {
  background: var(--brand-grad);
  color: var(--on);
  border-color: transparent;
  box-shadow: 0 6px 18px -6px rgba(200,160,48,.5);
}

.btn-main:hover {
  background: linear-gradient(135deg, #f0cc50, #b08828);
  box-shadow: 0 0 0 1px rgba(200,160,48,.55), 0 12px 30px -8px rgba(200,160,48,.6);
  transform: translateY(-2px);
}

/* lib.css: .lib a.btn-main chữ = --on (đậm trên nền vàng) */
.lib a.btn-main,
.lib a.btn-main:hover {
  color: var(--on);
}

/* btn outline hover: chữ brand gold + nền gold nhạt */
.lib a.btn:not(.btn-main):hover {
  color: var(--brand);
  background: rgba(200,160,48,.10);
}

/* ── H2 BORDER: brand gold ── */
.h2 {
  border-left-color: var(--brand);
  background: linear-gradient(90deg, rgba(200,160,48,.10), transparent 40%);
}

/* ── HEADING ── */
.h1 {
  text-shadow: 0 2px 12px rgba(0,0,0,.6);
  color: var(--heading);
}

.hero .h1 {
  text-shadow: 0 2px 18px rgba(0,0,0,.7), 0 0 30px rgba(200,160,48,.18);
}

/* ── HERO: tông gold ── */
.hero {
  background:
    radial-gradient(900px 360px at 70% -60px, rgba(200,160,48,.12), transparent 60%),
    radial-gradient(500px 300px at 0% 120%, rgba(61,107,26,.07), transparent 55%),
    var(--panel-grad2);
}

/* ── CARD HOVER: viền gold ── */
.card:hover {
  border-color: rgba(200,160,48,.4);
}

.box:hover {
  border-color: rgba(200,160,48,.35);
}

.gcard:hover {
  border-color: rgba(200,160,48,.5);
  box-shadow: var(--glow);
}

/* ── TABS: on = gold ── */
.tabs .tab.on {
  background: var(--brand-grad);
  color: var(--on);
  box-shadow: 0 6px 16px -6px rgba(200,160,48,.5);
}

.tabs .tab:hover {
  border-color: var(--brand);
  color: var(--brand);
}

/* ── ACCORDION / FAQ ── */
.acc details[open],
.faq details[open] {
  border-color: rgba(200,160,48,.4);
}

.acc summary::after,
.acc details[open] summary::after,
.faq summary::after,
.faq details[open] summary::after {
  color: var(--brand);
}

/* ── STEPS: số màu gold ── */
.steps li::before {
  background: var(--brand-grad);
  color: var(--on);
  box-shadow: 0 4px 12px -4px rgba(200,160,48,.6);
}

/* ── TOC ── */
.toc a:hover {
  color: var(--brand);
}

/* ── PAGER ── */
.pager a:hover {
  border-color: var(--brand);
  color: var(--brand);
  background: rgba(200,160,48,.06);
}

/* ── FILTER CHIP ── */
.filter .chip:hover {
  border-color: var(--brand);
  color: var(--brand);
}

/* ── FOOTER LF--1: 1 cột, nền tối anthracite ── */
.lf {
  background: linear-gradient(180deg, #1e1e28, #121218);
  text-align: center;
}

/* Footer 1 cột (lf--1): giữ nội dung trong wrap, canh giữa */
.lf.lf--1 .lf-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 32px 16px 0;
  max-width: 720px;
  margin: 0 auto;
}

.lf.lf--1 .lf-logo {
  display: inline-block;
}

.lf.lf--1 .lf-bio {
  color: var(--mut);
  font-size: 14px;
  line-height: 1.7;
  max-width: 560px;
}

.lf.lf--1 .lf-cert {
  color: var(--mut);
  font-size: 13px;
}

/* Payment badges */
.lf-payment {
  text-align: center;
}

.lf-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--mut);
  margin-bottom: 8px;
}

.pay-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  align-items: center;
}

.pay-tag {
  display: inline-block;
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 11px;
  color: var(--mut);
}

.pay-note {
  color: var(--mut);
  font-size: 12px;
  margin-top: 6px;
}

/* R-fix Bruce review 2026-07-15 (#5): khoá cứng size icon thanh toán footer —
   .lib img{height:auto!important} (lib.css) đè height khai báo, icon vỡ ra to.
   Cùng specificity (class+type) + load SAU lib.css => rule này thắng. */
.pay-icons img {
  width: 48px !important;
  height: 28px !important;
  object-fit: contain !important;
}

/* R-fix (#5): payment icon inline trong accordion "Giao dịch" (block-section) —
   cùng lý do trên, khoá size vuông nhỏ gọn, không cho .lib img phá layout. */
.pay-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  margin: 12px 0;
}
.pay-inline img {
  width: 40px !important;
  height: 40px !important;
  object-fit: contain !important;
  flex: 0 0 auto;
}

/* Trust badges */
.lf-badges {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

/* Nav links footer */
.lf-nav-links {
  text-align: center;
}

.lf-nav-links p {
  line-height: 2;
}

/* R-fix Bruce review 2026-07-15 (#7): footer nav links — lib.css ".lf a{display:block}"
   làm dấu " · " phân cách rơi thành dòng riêng (khoảng trống xấu). Ép lại inline-block
   để link + dấu chấm chảy chung dòng, canh giữa, spacing đều qua padding ngang. */
.lf.lf--1 .lf-nav-links a {
  display: inline-block;
  color: var(--mut);
  font-size: 14px;
  padding: 3px 8px;
}

.lf.lf--1 .lf-nav-links a:hover {
  color: var(--brand);
}

.lf .lf-bottom {
  margin-top: 24px;
}

.lf h4 {
  color: var(--brand);
}

.lf a:hover {
  color: var(--brand);
}

.small {
  font-size: 13px;
  line-height: 1.9;
}

/* ── HEADER: h3-center-sticky — logo GIỮA tuyệt đối ── */
/* Desktop (≥641px): dùng position:relative + logo center flex + burger/cta absolute */
@media (min-width: 641px) {
  .lh.rows-1.a-center .lh-main {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    min-height: 64px;
  }

  /* Logo: center tuyệt đối */
  .lh.rows-1.a-center .lh-main .logo {
    position: static;
    margin: 0 auto;
    flex-shrink: 0;
    order: 0;
  }

  /* Ẩn spacer desktop — không cần khi dùng justify-content:center */
  .lh.rows-1.a-center .lh-main .lh-sp {
    display: none;
  }

  /* Burger: absolute trái */
  .lh.rows-1.a-center .lh-main .burger {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    order: 0;
  }

  /* CTA wrap: absolute phải */
  .lh.rows-1.a-center .lh-main .lh-cta-wrap {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    flex-shrink: 0;
  }
}

/* Logo center class (header) */
.lh-logo-center {
  display: flex;
  align-items: center;
}

/* Burger icon */
.lh .burger {
  color: var(--brand);
  font-size: 22px;
}

/* ── HEADER NAV (hàng 2 rows-1 → thực ra rows-1 chỉ có 1 hàng,
   nav nằm bên dưới lh-main qua lh-nav) ── */
.lh nav a:hover,
.lh-nav a:hover {
  color: var(--brand);
}

.lh nav a::after,
.lh-nav a::after {
  background: var(--brand);
}

/* R-fix Bruce review 2026-07-15 (#1): menu chữ HOA — nav ngang desktop + drawer mobile */
.lh-nav a,
.dr-nav .dr-link {
  text-transform: uppercase;
  letter-spacing: .02em;
}

/* ── DRAWER ── */
.drawer {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(2px);
}

/* Inner panel của drawer (nội dung cuộn) */
.drawer > * {
  /* Drawer panel: nền panel, trượt từ trái */
}

/* Override drawer từ lib.css nếu có: đảm bảo nền anthracite */
.dr-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}

.dr-close {
  font-size: 22px;
  cursor: pointer;
  color: var(--mut);
  padding: 4px 8px;
  line-height: 1;
}

.dr-close:hover {
  color: var(--ink);
}

.dr-nav {
  background: var(--panel);
  padding: 8px 0;
  position: fixed;
  top: 0;
  left: 0;
  width: min(280px, 80vw);
  height: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.dr-link {
  display: block;
  padding: 12px 20px;
  color: var(--ink);
  border-bottom: 1px solid var(--line-soft);
  font-size: 15px;
}

.dr-link:hover {
  color: var(--brand);
  background: rgba(200,160,48,.06);
}

.dr-cta {
  padding: 14px 20px;
  margin-top: auto;
}

/* ── READ AREA ── */
.read h3 {
  color: var(--brand);
}

/* ── CTA-BLOCK: tông gold ── */
.cta-block {
  background:
    radial-gradient(400px 120px at 50% -20px, rgba(200,160,48,.10), transparent),
    var(--panel-grad2);
  border-color: rgba(200,160,48,.25);
}

/* ── AUTHOR box ── */
.author {
  border-left-color: var(--brand);
}

.author .role {
  color: var(--brand);
}

/* ── TABLE ── */
.tbl th {
  color: var(--brand);
}

.tbl .rank,
.tbl .star {
  color: var(--brand);
}

/* ── TRUST BADGES ── */
.trust span::before {
  color: var(--brand);
}

/* ── REVIEW STARS ── */
.rv-role,
.rv-stars {
  color: var(--brand);
}

/* ── SCROLLBAR ── */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}

/* ── LAYOUT [3|6|3] HOMEPAGE ────────────────────────────────────
   Desktop: sidebar banner hai bên, cột giữa rộng.
   Tablet (≤900px): ẩn sidebar; cột giữa full width.
   Mobile (≤640px): 1 cột thẳng đứng; sidebar hiện dưới nội dung.
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  /* Ẩn sidebar (banner doc) tai tablet/mobile — noi dung chinh full width */
  .col-sidebar {
    display: none;
  }
  .sec-363 .lay-363 {
    grid-template-columns: 1fr !important;
    gap: 16px;
  }
}

/* ══════════════════════════════════════════
   MOBILE RESPONSIVE — b52club-vin overrides
   ≤ 640px
   ══════════════════════════════════════════ */
@media (max-width: 640px) {

  /* ẨN nav ngang (hàng lh-nav) trên mobile — drawer đã lo */
  .lh-nav {
    display: none;
  }

  /* Header h3-center-sticky mobile:
     Reset absolute positioning từ desktop — mobile dùng flex space-between của lib.css.
     lib.css ≤640px: justify-content:space-between, lh-sp display:none,
     logo order:0, burger order:9 (sát phải). */
  .lh.rows-1.a-center .lh-main {
    padding: 0 12px;
    position: relative;
    justify-content: space-between;
  }

  /* Reset burger về flow bình thường mobile */
  .lh.rows-1.a-center .lh-main .burger {
    position: static;
    transform: none;
    order: 9;
    flex-shrink: 0;
  }

  /* Reset lh-sp về ẩn (lib.css đã display:none, nhưng desktop ẩn nó → OK) */
  .lh.rows-1.a-center .lh-main .lh-sp {
    display: none;
  }

  /* Logo về trái (order:0 lib.css) + nhỏ hơn */
  .lh.rows-1.a-center .lh-main .logo {
    position: static;
    margin: 0;
    order: 0;
  }

  .lh.rows-1.a-center .lh-main .logo img {
    width: 96px;
    height: auto;
  }

  /* Ẩn CTA ở header mobile — reset absolute */
  .lh-cta-wrap {
    display: none;
    position: static;
    transform: none;
  }

  /* STICKY CTA: đảm bảo nút không tràn */
  .sticky-cta {
    padding: 8px 10px;
    gap: 8px;
  }

  .sticky-cta .btn {
    font-size: 14px;
    padding: 11px 10px;
    min-height: 44px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* WRAP: không tràn ngang */
  .wrap {
    padding: 0 14px;
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
  }

  /* Toàn body không tràn ngang */
  body {
    overflow-x: hidden;
  }

  /* Section không tràn ngang */
  section {
    max-width: 100vw;
    overflow-x: hidden;
  }

  /* Layout → 1 cột */
  .lay-mag,
  .lay-93,
  .lay-363,
  .lay-v2 {
    grid-template-columns: 1fr !important;
  }

  /* Archive grid → 1 cột */
  .arc-row {
    grid-template-columns: 1fr !important;
  }

  /* Related grid → 1 cột */
  .related-grid {
    grid-template-columns: 1fr !important;
  }

  /* H2 nhỏ hơn */
  .h2 {
    font-size: clamp(17px, 4.5vw, 22px);
  }

  /* Footer 1 cột mobile: đã column, thêm padding gọn */
  .lf.lf--1 .lf-inner {
    padding: 24px 14px 0;
  }

  /* TABLE: scroll ngang */
  .tbl-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Game grid homepage: 3 col → 2 col on mobile */
  .block-game-grid > div[style*="grid-template-columns"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Category slider: cards thẳng nhỏ hơn */
  .cat-track .cat-slide {
    min-width: 200px !important;
    max-width: 230px !important;
  }
}