/* style-sunwin-win.css — per-site override cho sunwin-win.com.co
   Palette: NAVY #070b14 + GOLD #f5b300 (khac go88 dung dark navy chung)
   Moi component dung design/library/lib.css (khong viet lai cau truc).
   ============================================================ */

/* PALETTE NAVY + GOLD
   FIX: dat ca :root + body.lib + .lib de dam bao
   --panel-grad translucent thang tren nen duc cua lib.css (:root).
   Component .card/.acc/.tbl dung var(--panel-grad) tu :root → phai override :root
   hoac set truc tiep tung selector. Chon override :root + bat buoc tren body.lib.
   ============================================================ */

/* LOP 1: Override :root — thang tat ca component dung var() tu :root */
:root {
  --bg:          #070b14;
  --bg-2:        #0c1322;
  --panel:       rgba(17,26,46,.82);
  --panel-grad:  linear-gradient(160deg,rgba(19,33,58,.86),rgba(12,19,34,.86));
  --panel-grad2: linear-gradient(180deg,rgba(17,26,46,.82),rgba(7,11,20,.88));
  --panel2:      rgba(12,19,34,.70);
  --line:        #1e2c48;
  --line-soft:   rgba(30,44,72,.55);
  --ink:         #e6ebf5;
  --heading:     #f0f4ff;
  --mut:         #7a8fb5;
  --brand:       #f5b300;
  --brand2:      #2563eb;
  --brand-grad:  linear-gradient(135deg,#f5b300,#d49000);
  --glow:        0 0 0 1px rgba(245,179,0,.35), 0 8px 26px -8px rgba(245,179,0,.45);
  --on:          #07090f;
}

/* LOP 2: .lib + body.lib — dam bao khong bi ghi de nguoc lai */
.lib,
body.lib {
  --bg:          #070b14;
  --bg-2:        #0c1322;
  --panel:       rgba(17,26,46,.82);
  --panel-grad:  linear-gradient(160deg,rgba(19,33,58,.86),rgba(12,19,34,.86));
  --panel-grad2: linear-gradient(180deg,rgba(17,26,46,.82),rgba(7,11,20,.88));
  --panel2:      rgba(12,19,34,.70);
  --line:        #1e2c48;
  --line-soft:   rgba(30,44,72,.55);
  --ink:         #e6ebf5;
  --heading:     #f0f4ff;
  --mut:         #7a8fb5;
  --brand:       #f5b300;
  --brand2:      #2563eb;
  --brand-grad:  linear-gradient(135deg,#f5b300,#d49000);
  --glow:        0 0 0 1px rgba(245,179,0,.35), 0 8px 26px -8px rgba(245,179,0,.45);
  --on:          #07090f;
}

/* NEN BG.WEBP + 1 LOP DIM DUY NHAT (Bruce): moi block trong suot 100%,
   bg lo DEU qua dung 1 lop toi phu len — het loang lo tung block */
html {
  background-color: #070b14;
  background-image:
    /* L1 (tren): dim NHE, dam dan xuong day — chu noi ma nen van lo */
    linear-gradient(rgba(7,11,20,.14), rgba(7,11,20,.30)),
    /* L2: GLOW AM tu sinh (den san khau cam→ho phach), lan xuong ~80% */
    radial-gradient(130% 90% at 50% 0%,
      rgba(245,150,45,.42) 0%,
      rgba(190,95,35,.20) 30%,
      rgba(30,20,12,.06) 56%,
      rgba(7,11,20,0)     80%),
    /* L3: xanh navy nhe vung giua cho chieu sau */
    radial-gradient(1100px 900px at 50% 42%, rgba(37,99,235,.09), transparent 66%),
    /* L4 (day): anh nen that — giu tia sang + dom cua bg goc */
    url('/assets/home/bg.webp');
  background-size: cover, 100% 100%, cover, cover;
  background-position: center top, center top, center center, center top;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
/* CONTENT BLOCK TRONG SUOT 100% — dong deu, bg lo qua lop dim tren */
:root, .lib, body.lib {
  --panel:       transparent !important;
  --panel-grad:  transparent !important;
  --panel-grad2: transparent !important;
  --panel2:      transparent !important;
}
/* Drawer overlay van can nen dac de doc (khong theo lop trong suot) */
.drawer { background: #0c1322 !important; }
/* HERO: lib.css .hero con 2 radial-glow + ::after → lam block hero am mau khac.
   Ep trong suot 100% + tat ::after de HERO dong deu nhu moi block (Bruce) */
.hero { background: transparent !important; }
.hero::after { display: none !important; }

/* KHOI DIV CHE (Bruce desktop): card/acc con border+radius+shadow tao khoi vien.
   Ep SEAMLESS — chi con noi dung noi tren nen dim duy nhat, khong khoi che nao. */
.card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
/* Accordion: bo khoi vien, giu 1 gach phan cach nhe de van doc duoc muc */
.acc details {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  border-bottom: 1px solid var(--line-soft) !important;
}
.acc details[open] { box-shadow: none !important; }
/* Bang so sanh: cell trong suot, chi giu duong ke mong */
.tbl, .tbl th, .tbl td {
  background: transparent !important;
}

/* ============================================================
   SURFACE PASS 2 (tong hop 3 agent) — triet het khoi che con sot
   ma --panel:transparent KHONG cham toi (border/shadow/nen-cung)
   ============================================================ */
/* Bang so sanh: bo vien ngoai + bong + bo goc, giu ke ngang mong */
.tbl { border: none !important; border-radius: 0 !important; box-shadow: none !important; }
.tbl th, .tbl td {
  border-left: none !important; border-right: none !important;
  border-bottom: 1px solid var(--line-soft) !important;
}
/* H2: bo thanh nen vang-mo + bo goc, giu gach trai vang nhan dien */
.h2 { background: none !important; border-radius: 0 !important; }
/* TAB app: bo nut-khoi → kieu gach chan; active = chu vang + gach vang */
.tabs { border: none !important; box-shadow: none !important; }
.tabs .tab {
  background: transparent !important; border: none !important;
  border-radius: 0 !important; box-shadow: none !important;
  border-bottom: 2px solid transparent !important;
}
.tabs .tab.on {
  background: transparent !important; box-shadow: none !important;
  color: var(--brand) !important; border-bottom: 2px solid var(--brand) !important;
}
/* FOOTER: khoi dac lon nhat trang → trong suot, giu 1 gach tren nhan biet het noi dung */
.lf { background: transparent !important; box-shadow: none !important;
      border-top: 1px solid var(--line-soft) !important; }
/* HEADER: giu nen blur nhan dien, bo bong do tao mep khoi */
.lh, .lh.sticky { box-shadow: none !important; }
/* ANH: bo box-shadow (canh noi = cam giac khoi), giu bo goc mem */
.hero img, .b7-main section img, .read img, .card img { box-shadow: none !important; }

/* ============================================================
   CHU DOC DUOC KHONG CAN SCRIM — text-shadow bam glyph (KHONG phai khoi che)
   → cho phep dim rat nhe ma chu van ro o vung glow sang
   ============================================================ */
.lib h1, .lib h2, .lib h3, .lib .h1, .lib .h2, .lib .h3 {
  text-shadow: 0 1px 2px rgba(0,0,0,.6), 0 0 14px rgba(0,0,0,.45);
}
.lib p, .lib li, .lib .sapo, .lib summary, .lib td, .lib th {
  text-shadow: 0 1px 2px rgba(0,0,0,.5);
}

/* ============================================================
   MARQUEE TU CUON VO TAN (Bruce): Kho Game + Chuyen muc noi bat.
   Track nhan doi item; MOI item co margin-right (ke ca cai cuoi)
   → dich translateX(-50%) = dung 1 ban copy → LOOP LIEN MACH, 0 giat.
   Di chuot vao → dung lai de xem. prefers-reduced-motion → tat, cuon tay.
   ============================================================ */
.mq {
  overflow: hidden; width: 100%; padding: 6px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
}
.mq-track {
  display: flex; width: max-content; will-change: transform;
  animation: mq-run var(--mq-dur, 30s) linear infinite;
}
.mq-track > * { margin-right: 12px !important; flex: 0 0 auto; }
.mq:hover .mq-track { animation-play-state: paused; }
@keyframes mq-run { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .mq-track { animation: none; }
  .mq { overflow-x: auto; }
}
/* Body trong suot de html bg lo xuyen len */
body.lib {
  background: transparent;
  color: var(--ink);
}
/* Mobile: doi fixed → scroll (tranh giat iOS) */
@media (max-width: 768px) {
  html { background-attachment: scroll; }
}

/* NUT PHU (.btn khong co .btn-main): vien + chu GOLD ro tren nen navy */
/* Selector .lib a.btn thang rule lib.css .lib a{color:var(--ink)} */
.lib a.btn:not(.btn-main) {
  border: 1.5px solid #f5b300;
  color: #f5b300;
  background: rgba(245,179,0,.10);
}
.lib a.btn:not(.btn-main):hover {
  border-color: #ffd25a;
  color: #ffd25a;
  background: rgba(245,179,0,.20);
}

/* NUT CHINH (.btn-main): gradient navy xanh, chu TRANG (contrast AA) */
.btn-main {
  background: linear-gradient(180deg, #3b63e0, #161a72);
  color: #ffffff !important;
  border: none;
  box-shadow: 0 6px 18px -6px rgba(37,99,235,.5);
}
.btn-main:hover {
  background: linear-gradient(180deg, #5277e8, #1e26a0);
  box-shadow: 0 0 0 1px rgba(37,99,235,.55), 0 12px 30px -8px rgba(37,99,235,.6);
}

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

/* HEADER rows-3 */
/* HEADER FROSTED-TRONG (Bruce): lib.css co .lh.sticky nen navy .85 dang DE LEN
   → header duc + tao BAC voi glow ngay duoi. Override ca .lh + .lh.sticky
   xuong ~.30 + blur manh → glow bg xuyen qua header, het bac, van doc duoc nho blur+text-shadow */
.lh, .lh.sticky {
  background: rgba(7,11,20,.30) !important;
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
}
/* topbar hang 1: rat nhe de glow lo */
.lh-topbar {
  background: rgba(0,0,0,.14) !important;
  color: var(--mut);
}
.lh-topbar a { color: var(--brand); }
.lh-topbar a:hover { color: #ffd040; }

/* lh-main hang 2 */
.lh .lh-main { padding: 10px 16px; }

/* lh-nav hang 3 */
.lh-nav {
  justify-content: center;
  flex-wrap: nowrap;
  gap: 24px;
}
.lh-nav a { white-space: nowrap; }

/* rail sticky: top offset = topbar(29) + lh-main(70) + lh-nav(42) = ~141px */
.rail { top: 142px; }

/* LAYOUT 3-6-3 (b7grid) */
/* .b7grid = alias .lay-363: 3fr main 6fr rail 3fr */
.b7grid {
  display: grid;
  grid-template-columns: 3fr 6fr 3fr;
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 16px;
  align-items: start;
}
.b7grid .rail {
  position: sticky;
  top: 142px;
  align-self: start;
}
@media (max-width: 1024px) {
  .b7grid {
    grid-template-columns: 1fr;
  }
  .b7grid .rail {
    position: static;
  }
  /* Rail order: main len truoc, 2 rail tut xuong sau */
  .b7grid > main   { order: 0; }
  .b7grid > aside  { order: 1; }
}

/* MOBILE <=640px */
@media (max-width: 640px) {
  /* 1. An topbar hang 1 (giu header gon) */
  .lh .lh-topbar {
    display: none;
  }
  /* 2. An nav hang 3 */
  .lh .lh-nav {
    display: none !important;
  }
  /* 3. An CTA desktop trong hang 2 */
  .lh .lh-main > .cta {
    display: none !important;
  }
  /* 4. Hang 2: logo trai burger phai */
  .lh .lh-main {
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    padding: 10px 16px !important;
  }
  .lh .lh-main > .lh-sp { display: none; }
  .lh .lh-main .logo {
    order: 0 !important;
    flex: 0 0 auto !important;
  }
  .lh .lh-main .burger {
    order: 9 !important;
    display: flex !important;
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
  }

  /* Typography */
  .h1 { font-size: 20px; letter-spacing: 0; }
  .h2 { font-size: 17px; }
  .h1, .h2, h1, h2, h3 {
    word-break: break-word;
    overflow-wrap: break-word;
  }

  /* Layout */
  .wrap, .lay, section { overflow-x: clip; }
  .grid-3 { grid-template-columns: repeat(2, 1fr) !important; }

  /* CTA buttons */
  .hero .btn, .cta-block .btn { width: 100% !important; justify-content: center; }
  .sticky-cta .btn { font-size: 13px; padding: 12px 8px; }

  /* Read content */
  .read img, .read figure, .read table { max-width: 100%; }

  /* Table mobile: min-width de wrapper overflow-x:auto co the scroll (thay vi ep co chu) */
  .tbl { min-width: 560px; }

  body { overflow-x: hidden; }
}

/* TAB CHU MAU: tab thuong sang, tab active dam tren nen gold */
.lib .tabs .tab     { color: var(--ink); }   /* #e6ebf5 — sang, doc ro tren nen navy */
.lib .tabs .tab.on  { color: var(--on);  }   /* #07090f — dam, doc ro tren nen gold */

/* ============================================================
   FIX: DRAWER nen translucent (drawer dung var(--panel) tu :root, gio da override)
   Them selector cu the de chac chan tren ca mobile:
   ============================================================ */
.drawer {
  background: rgba(7,11,20,.97);
}

/* FIX: .lib nen body trong suot de bg.webp lo xuyen */
.lib {
  background: transparent !important;
}