/* WeldGearLab brand layer. Nap sau style.css cua child.
 * Chi override token va vai thanh phan nhan dien. Khong sua component cha.
 * Mau: nen be tong sang, chu than chi, MOT mau nhan xanh ho quang #1E6FD9 cho CTA.
 * Tuong phan (WCAG AA): chu trang tren #1E6FD9 = 4.6:1. Link chu dung #1659B8 (6.1:1 tren nen).
 */
@font-face{font-family:"Inter";src:url(../fonts/inter-latin-var.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(../fonts/barlow-condensed-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(../fonts/barlow-condensed-700.woff2) format("woff2");font-weight:700;font-display:swap}

:root{
  --wgl-accent:#1E6FD9; --wgl-accent-deep:#1659B8; --wgl-accent-light:#E6EFFB;
  --navy:#1F2328; --ink:#1F2328; --ink-soft:#3D434A; --muted:#5B6168; --line:#DCDCD6; --bg:#F7F7F4;
  --panel:#EDEDE8; --gold:var(--wgl-accent); --gold-deep:var(--wgl-accent-deep); --link:var(--wgl-accent-deep); --sale:#B3261E;
  --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --font-head:"Barlow Condensed","Arial Narrow",Arial,sans-serif;
  --fs-h2:30px; --fs-h3:23px;

  --color-primary:#1E6FD9; --color-primary-hover:#1659B8; --color-primary-dark:#1659B8;
  --color-primary-light:#E6EFFB; --color-primary-rgb:30,111,217;
  --color-accent:#1E6FD9; --color-accent-hover:#1659B8; --color-accent-light:#E6EFFB;
  --color-text:#1F2328; --color-text-secondary:#3D434A; --color-text-muted:#5B6168; --color-text-subtle:#6B7178;
  --color-bg:#F7F7F4; --color-bg-alt:#EDEDE8; --color-surface:#EDEDE8; --color-surface-raised:#FFFFFF; --color-surface-hover:#E5E5DF;
  --color-border:#DCDCD6; --color-border-subtle:#E7E7E2; --color-border-strong:#C9C9C2;
  --acms-primary-rgb:30,111,217; --acms-star-active:#1E6FD9; --acms-border:#DCDCD6;
}

body{background:var(--bg);color:var(--ink)}

/* Tieu de: Barlow Condensed, chac, de doc */
h1,h2,h3,.who-title,.cat-hero h1,.accent-h,.col-h,.cat-title,article.page h1{font-family:var(--font-head);letter-spacing:0}
h1{font-weight:700} h2,h3{font-weight:700}
article.page h1{text-transform:none;letter-spacing:0}

/* Than bai 18px cho doc gia lon tuoi (spec muc 9) */
.page-body,.guide-body,.rd-body,.single-body,.entry-content{font-size:18px;line-height:1.7}
.page-body a,.guide-body a,.rd-body a,.entry-content a{color:var(--link);text-decoration:underline;text-underline-offset:2px}

/* Logo */
.logo{display:inline-flex;flex-direction:row;align-items:center;gap:10px;font-family:var(--font-head);font-weight:700;font-size:34px;line-height:1;color:var(--ink)}
.logo .logo-mark{width:38px;height:38px;flex:none}
.logo .lm-bg{fill:var(--ink)}
.logo .lm-bead{fill:none;stroke:var(--wgl-accent);stroke-width:2.6;stroke-linecap:round}
.logo .lm-spark{fill:#F5B700}
.logo .logo-word{letter-spacing:.2px}
.logo .logo-lab{color:var(--wgl-accent)}
footer.site .logo{color:#fff}
footer.site .logo .lm-bg{fill:#fff}
footer.site .logo .lm-spark{fill:#C98F00}
footer.site .logo .logo-lab{color:#7FB0F0}

/* Thanh nav: than chi thay vi mau nhan, de nut CTA xanh noi bat */
.navbar{background:var(--ink)}
.navbar .ni > a,.navbar .right a{font-size:15px}
.navbar .ni:hover > a{box-shadow:inset 0 -3px 0 var(--wgl-accent)}

/* Nut va tap target lon */
.btn,.acms-btn,button,[type=submit]{min-height:44px}
.acms-btn{background:var(--wgl-accent);border-color:var(--wgl-accent);color:#fff}
.acms-btn:hover{background:var(--wgl-accent-deep);border-color:var(--wgl-accent-deep);color:#fff}

/* Newsletter placeholder */
.news .news-rss{display:inline-block;background:var(--wgl-accent);color:#fff;font-weight:700;padding:12px 22px;border-radius:6px;min-height:44px}
.news .news-rss:hover{background:var(--wgl-accent-deep)}

/* Bang doc duoc tren mobile: cuon ngang, cot dau dinh */
.page-body table,.rd-body table,.entry-content table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
@media (max-width:640px){
  .rd-body table th:first-child,.rd-body table td:first-child,
  .entry-content table th:first-child,.entry-content table td:first-child{position:sticky;left:0;background:var(--bg);z-index:1}
  .logo{font-size:28px}.logo .logo-mark{width:32px;height:32px}
}
.searchpill button,.m-search button{min-height:0}

/* Quick Picks (dau bai roundup) */
.wgl-quickpicks{background:#fff;border:1px solid var(--line);border-left:5px solid var(--wgl-accent);border-radius:8px;padding:18px 22px;margin:22px 0}
.wgl-quickpicks .wgl-qp-h{font-family:var(--font-head);font-weight:700;font-size:24px;margin:0 0 8px;text-transform:uppercase;letter-spacing:.5px}
.wgl-quickpicks ul{list-style:none;margin:0;padding:0}
.wgl-quickpicks li{padding:12px 0;border-top:1px solid var(--line);line-height:1.55}
.wgl-quickpicks li:first-child{border-top:0}
.wgl-qp-label{display:inline-block;background:var(--ink);color:#fff;font-size:13px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;padding:3px 9px;border-radius:4px;margin-right:6px}
.wgl-qp-cta a{display:inline-block;margin-left:6px;background:var(--wgl-accent);color:#fff!important;text-decoration:none!important;font-weight:700;font-size:15px;padding:9px 16px;border-radius:6px;min-height:40px;white-space:nowrap}
.wgl-qp-cta a:hover{background:var(--wgl-accent-deep)}
/* Bang so sanh: cuon ngang, cot ten dinh */
table.wgl-compare th{background:var(--panel)}
table.wgl-compare th:first-child,table.wgl-compare td:first-child{position:sticky;left:0;background:#fff;z-index:1;font-weight:600}
table.wgl-compare th:first-child{background:var(--panel)}
.acms-cmp .card-grid{margin:18px 0}
table.wgl-compare th,table.wgl-compare td{padding:10px 12px;vertical-align:top}
@media (max-width:760px){
  table.wgl-compare th,table.wgl-compare td{min-width:104px}
  table.wgl-compare th:first-child,table.wgl-compare td:first-child{min-width:150px}
}

/* ============================================================
 * DARK MODE theo prefers-color-scheme (spec muc 9). Thuan CSS, khong JS, khong chop.
 * Theme cha van o mode light (header.php), moi mau toi nam o day.
 * Tuong phan: chu #E8E9EA tren #15181C ~15:1, link #6EA8F5 ~7:1, nut trang tren #1E6FD9 4.6:1.
 * ============================================================ */
@media (prefers-color-scheme: dark){
  :root{
    color-scheme:dark;
    --navy:#0E1013; --ink:#E8E9EA; --ink-soft:#C3C7CC; --muted:#9AA1A8; --line:#2E333A; --bg:#15181C;
    --panel:#1E2227; --link:#6EA8F5;
    --color-text:#E8E9EA; --color-text-secondary:#C3C7CC; --color-text-muted:#9AA1A8; --color-text-subtle:#8A9198;
    --color-bg:#15181C; --color-bg-alt:#1E2227; --color-surface:#1E2227; --color-surface-raised:#22272D; --color-surface-hover:#2A3037;
    --color-border:#2E333A; --color-border-subtle:#262B31; --color-border-strong:#3A4047;
    --color-primary-light:#1B2A3F; --color-accent-light:#1B2A3F; --wgl-accent-light:#1B2A3F;
    --acms-border:#2E333A;
  }
  header.site,.mobile-search,.searchpill,.hamburger,.m-searchbtn,.navbar .submenu,.btn-loadmore,.buy-btns a.alt,
  .store-side .author-box,.variant-badge,.store-logo{background:var(--color-surface-raised);color:var(--ink);border-color:var(--line)}
  .searchpill input,.m-search input{background:transparent;color:var(--ink)}
  .navbar .submenu a{color:var(--ink)}
  .navbar .submenu a:hover{background:var(--color-surface-hover);color:#fff}
  .social a:hover{background:var(--color-surface-hover)}
  .navbar{background:#0E1013;border-bottom:1px solid var(--line)}
  /* Anh san pham giu nen trang (anh Amazon nen trang), bo goc cho gon tren nen toi */
  .prod .p-img,.acms-list__image,.acms-card__image,.acms-product-image{background:#fff;border-radius:8px}
  .logo .lm-bg{fill:#fff} .logo .lm-spark{fill:#C98F00} .logo .logo-lab{color:#6EA8F5}
  .wgl-quickpicks{background:var(--color-surface-raised)}
  .wgl-qp-label{background:#E8E9EA;color:#15181C}
  table.wgl-compare th:first-child,table.wgl-compare td:first-child{background:var(--color-surface-raised)}
  .page-body .guide-cta a.gc-btn{background:var(--color-surface-raised);color:var(--ink)}
  .ftc-bar a{color:var(--ink)}
  img{opacity:.96}
}

/* Nut trong than bai khong an mau link (Lighthouse contrast 2026-10-05) */
.buy-btns a,.page-body a.acms-btn,.rd-body a.acms-btn,.entry-content a.acms-btn,.wgl-qp-cta a{text-decoration:none!important}
.buy-btns a{color:#fff!important}
.buy-btns a.alt{color:var(--navy)!important}
:root{--good:#17704A}
@media (prefers-color-scheme: dark){:root{--good:#4CC38A} .buy-btns a{background:var(--wgl-accent)} .buy-btns a.alt{background:var(--color-surface-raised);color:var(--ink)!important;border-color:var(--line)}}
footer.site .ft-h{color:#fff;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin-bottom:12px}
footer.site .fine{color:#A3A8AE}
