/*
 * style-789club-vin.css — Override palette + component riêng cho 789club-vin.com.co
 * Extends lib.css (luôn load SAU lib.css).
 * Palette: nền tối tím-đen, brand xanh ngọc lục bảo, accent tím.
 *
 * R-41: màu trích từ mainsite 789CLUB:
 *   logo.webp pixel analysis → #3dd39f (bright teal-green), #289e74 (medium), #1c6847 (dark)
 *   nền mainsite = tím-đen sâu #0f051d
 *   accent nút mainsite = tím #4213ba
 *
 * MAP biến lib.css → giá trị 789club:
 *   --bg          #0f051d   (lib: #0b0e16)  — nền trang tím-đen sâu (mainsite)
 *   --panel       #1a0a2e   (lib: #161b27)  — nền card/panel tím tối
 *   --panel2      #22103a   (lib: #1e2536)  — nền panel2
 *   --line        #311855   (lib: #2b3346)  — viền tím nhạt
 *   --line-soft   rgba(61,211,159,.08)       — viền mờ teal
 *   --ink         #e8e0f8   (lib: #eaeefb)  — body text tím nhạt-trắng
 *   --mut         #9b88c0   (lib: #9aa5bf)  — muted text
 *   --brand       #3dd39f   (lib: #ffc83d)  — màu chủ đạo teal-xanh ngọc (từ logo)
 *   --brand2      #289e74   (lib: #e0a92a)  — brand đậm hơn
 *   --on          #04150d   (lib: #15110a)  — chữ tối trên nền brand teal
 *   --heading     #f0eaff   (lib: #fff)     — heading sáng ngọc-tím nhạt
 *   --ok          #3dd39f   (lib: #34d399)
 *   --warn        #fbbf24   (lib: #fbbf24)
 *   --brand-grad  linear-gradient(135deg,#4df0b8,#289e74)
 *   --glow        0 0 0 1px rgba(61,211,159,.35), 0 8px 26px -8px rgba(61,211,159,.45)
 *   --panel-grad  linear-gradient(160deg,#1f0a38,#130522)
 *   --panel-grad2 linear-gradient(160deg,#22103a,#180730)
 *
 * Accent tím (#4213ba) → dùng riêng cho --accent-purple (badge/highlight phụ).
 */

:root {
  /* === NỀN & PANEL (tím-đen sâu) === */
  --bg:           #0f051d;
  --panel:        #1a0a2e;
  --panel2:       #22103a;
  --line:         #311855;
  --line-soft:    rgba(61, 211, 159, .08);

  /* === CHỮ === */
  --ink:          #e8e0f8;
  --mut:          #9b88c0;
  --heading:      #f0eaff;

  /* === BRAND TEAL-XANH NGỌC === */
  --brand:        #3dd39f;
  --brand2:       #289e74;
  --on:           #04150d;
  --brand-grad:   linear-gradient(135deg, #4df0b8, #289e74);
  --glow:         0 0 0 1px rgba(61,211,159,.35), 0 8px 26px -8px rgba(61,211,159,.45);

  /* === ACCENT TÍM (nút phụ, badge, highlight đặc trưng 789club) === */
  --accent-purple:  #4213ba;
  --accent-purple2: #5a2bd4;

  /* === PANEL GRADIENT (tông tím thay navy) === */
  --panel-grad:   linear-gradient(160deg, #1f0a38, #130522);
  --panel-grad2:  linear-gradient(160deg, #22103a, #180730);

  /* === SHADOW (nền tối → shadow đậm hơn) === */
  --shadow:       0 6px 18px -8px rgba(0, 0, 0, .75);
  --shadow-lg:    0 16px 40px -14px rgba(0, 0, 0, .85);

  /* === OK / WARN === */
  --ok:           #3dd39f;
  --warn:         #fbbf24;
}

/* ── NỀN TRANG: tối tím-đen + glow xanh ngọc nhẹ ở đỉnh (dark-bg technique) ── */
/* Bài học: radial-gradient ấm ở đỉnh + block trong suốt + text-shadow + header frosted */
.lib {
  background:
    radial-gradient(900px 420px at 55% -100px, rgba(61,211,159,.07), transparent 60%),
    radial-gradient(700px 500px at 90% 10%, rgba(66,19,186,.08), transparent 55%),
    var(--bg);
}

/* ── HEADER: logo CENTER (h3-center-sticky) ── */
/* Desktop ≥641px: [nav trái | LOGO dead-center | CTA phải] cân đối thật. */
/* Mobile ≤640px: lib.css đổi thành space-between (logo trái, ☰ phải) — KHÔNG override */
@media (min-width: 641px) {
  .lh.rows-1.a-center .lh-main {
    justify-content: center;
  }
  /* BUG (Bruce 2026-07-15, LỖI 1): lib.css line 56 + a-center block gán CHUNG
     order:0;flex:1 cho CẢ nav LẪN mọi .lh-sp
     (".lh-main>nav,.lh-main>.lh-sp{flex:1}" và ".lh.a-center .lh-main>nav,.lh-main>.lh-sp
     {order:0;flex:1}"). Markup site này có 2 <span class="lh-sp"> (trước+sau logo) NÊN có
     3 khối flex:1 dồn bên trái (sp+sp+nav) chỉ đấu với 1 khối flex:1 bên phải (cta)
     => logo bị đẩy lệch phải, nav dồn trái-giữa, cta dí sát mép phải.
     FIX: vô hiệu 2 lh-sp bằng display:none (KHÔNG chỉ flex:0/width:0 — vì .lh-main có
     gap:16px, span rộng-0 vẫn ăn 2 khối gap dư ra bên trái, kéo cả nhóm nav+logo+cta
     lệch phải ~16px dù đã "0 width"). display:none loại hẳn khỏi flex layout + gap
     => CHỈ còn nav (trái) đối xứng cta (phải), mỗi bên đúng 1 khối flex:1, logo dead-center. */
  .lh.rows-1.a-center .lh-main > .lh-sp {
    display: none;
  }
  /* nav chiếm trọn vùng trái còn lại (flex:1 kế thừa lib.css), link tựa mép trái */
  .lh.rows-1.a-center .lh-main nav {
    flex: 1 1 0;
    flex-wrap: nowrap;
    white-space: nowrap;
    justify-content: flex-start;
  }
}

/* ── HEADER STICKY: nền frosted tông tím 789club (override lib default navy) ── */
.lh.sticky {
  background: rgba(15, 5, 29, .88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: rgba(61, 211, 159, .15);
}

/* ── DRAWER: nền tím-đen (override lib default panel) ── */
.drawer {
  background: linear-gradient(180deg, #1a0a2e, #0f051d);
}

/* ── DRAWER body scroll-lock (JS thêm class .drawer-open vào body) ── */
body.drawer-open {
  overflow: hidden;
}

/* ── STICKY CTA: nền tím-đen 789club thay navy ── */
@media (max-width: 640px) {
  .sticky-cta {
    background: rgba(15, 5, 29, .97);
    border-top-color: rgba(61, 211, 159, .2);
    box-shadow: 0 -8px 24px -10px rgba(61, 211, 159, .15), 0 -2px 0 rgba(61, 211, 159, .1);
  }
}

/* ── NÚT CTA — màu brand teal thay gold ── */
.btn-main {
  background: var(--brand-grad);
  color: var(--on);
  border-color: transparent;
  box-shadow: 0 6px 18px -6px rgba(61, 211, 159, .5);
}

.btn-main:hover {
  background: linear-gradient(135deg, #5fffc8, #289e74);
  box-shadow: 0 0 0 1px rgba(61,211,159,.55), 0 12px 30px -8px rgba(61,211,159,.6);
  transform: translateY(-2px);
}

/* chữ nút teal-main luôn tối (--on) */
.lib a.btn-main,
.lib a.btn-main:hover {
  color: var(--on);
}

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

/* ── H2 BORDER: brand teal ── */
.h2 {
  border-left-color: var(--brand);
  background: linear-gradient(90deg, rgba(61,211,159,.10), transparent 40%);
}

/* ── HEADING TEXT-SHADOW nhẹ (dark-bg technique) ── */
.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(61,211,159,.12);
}

/* ── HERO: tông teal ── */
.hero {
  background:
    radial-gradient(900px 360px at 65% -60px, rgba(61,211,159,.12), transparent 60%),
    radial-gradient(600px 300px at 0% 120%, rgba(66,19,186,.10), transparent 55%),
    var(--panel-grad2);
}

/* ── CARD HOVER: viền teal thay gold ── */
.card:hover {
  border-color: rgba(61,211,159,.4);
}

.box:hover {
  border-color: rgba(61,211,159,.35);
}

.gcard:hover {
  border-color: rgba(61,211,159,.5);
  box-shadow: var(--glow);
}

/* ── TABS: on = teal ── */
.tabs .tab.on {
  background: var(--brand-grad);
  color: var(--on);
  box-shadow: 0 6px 16px -6px rgba(61,211,159,.5);
}

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

/* ── ACCORDION / FAQ: viền teal khi mở ── */
.acc details[open],
.faq details[open] {
  border-color: rgba(61,211,159,.4);
}

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

/* ── STEPS: đầu số teal ── */
.steps li::before {
  background: var(--brand-grad);
  color: var(--on);
  box-shadow: 0 4px 12px -4px rgba(61,211,159,.6);
}

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

/* ── PAGER ── */
.pager a:hover {
  border-color: var(--brand);
  color: var(--brand);
  background: rgba(61,211,159,.06);
}

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

/* ── FOOTER: nền tím-đen sâu hơn ── */
.lf {
  background: linear-gradient(180deg, #120823, #08031a);
}

/* FIX LỖI 5 (Bruce 2026-07-15): logo thật (789club-logo.webp) gần-vuông (386×358) nhưng
   <img> khai width="120" height="40" (tỉ lệ 3:1 sai). Chromium tự dùng tỉ lệ ẢNH THẬT nên
   không lỗi, nhưng một số engine khác bám sát tỉ lệ khai báo trong HTML → bóp/"cắt" logo
   (Bruce thấy chỉ còn ".Club"). Ép aspect-ratio ĐÚNG bằng CSS để logo luôn hiện đủ, không
   méo, không cắt trên mọi trình duyệt — áp cho cả header/footer/drawer (cùng 1 file ảnh). */
.lh .logo img,
.lf-logo img,
.drawer .logo img {
  aspect-ratio: 386 / 358;
}

/* footer: logo kích thước gọn, luôn hiện trọn vẹn */
.lf-logo img {
  width: 92px;
  height: auto;
}

/* FIX LỖI 5: 2 nhóm link "Chuyên Mục" / "Thông Tin" dính sát nhau (h4 chỉ có
   margin-bottom, không có margin-top) → nhìn lộn xộn. Thêm khoảng cách đều trước mỗi h4. */
.lf h4 {
  color: var(--brand);
  margin-top: 24px;
}

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

/* ── HEADER NAV ── */
.lh nav a:hover {
  color: var(--brand);
}

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

.lh .logo {
  color: var(--heading);
}

.lh .burger {
  color: var(--brand);
}

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

/* ── CTA-BLOCK: tông teal ── */
.cta-block {
  background:
    radial-gradient(400px 120px at 50% -20px, rgba(61,211,159,.10), transparent),
    var(--panel-grad2);
  border-color: rgba(61,211,159,.22);
}

/* ── AUTHOR box: viền teal ── */
.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 ── */
.rv-role,
.rv-stars {
  color: var(--brand);
}

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

/* ─────────────────────────────────────────
   MOBILE RESPONSIVE — 789club-vin overrides
   Viewport ≤ 640px
   ───────────────────────────────────────── */
@media (max-width: 640px) {

  /* 1. ẨN lh-nav trên mobile (rows-1 không có lh-nav, nhưng để an toàn) */
  .lh-nav {
    display: none;
  }

  /* 2. Logo trên mobile: giữ kích thước hợp lý */
  .lh .lh-main .logo img {
    max-height: 36px;
    width: auto;
  }

  /* 3. STICKY CTA: 2 nút dính đáy */
  .sticky-cta {
    padding: 8px 10px;
    gap: 8px;
  }

  /* FIX LỖI 6 (Bruce 2026-07-15): ép rõ flex:1 fill-width — không phụ thuộc
     ngầm vào lib.css để tránh 2 nút lệch trái/chừa trống phải, "muốn fill width luôn". */
  .sticky-cta .btn {
    flex: 1 1 0;
    min-width: 0;
    font-size: 14px;
    padding: 11px 10px;
    min-height: 44px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

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

  .hero {
    overflow-x: hidden;
    max-width: 100vw;
  }

  section {
    max-width: 100vw;
    overflow-x: hidden;
  }

  /* 5. GRID-4 → 2 cột trên mobile (archiveC) */
  .grid-4 {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* 6. ARC-ROW (archive list): 1 cột */
  .arc-row {
    grid-template-columns: 1fr !important;
  }

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

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

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

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