/* ═══════════════════════════════════════════════════════════
   LinkBuilder Theme — main.css v1.0.0
   Font: Inter (Google Fonts)
═══════════════════════════════════════════════════════════ */

/* ── Reset & Variables ──────────────────────────────────── */
:root {
  --g:   #16a34a;
  --gd:  #15803d;
  --gp:  #f0fdf4;
  --b:   #2563eb;
  --n0:  #ffffff;
  --n1:  #f8fafc;
  --n2:  #f1f5f9;
  --n3:  #e2e8f0;
  --n4:  #cbd5e1;
  --n5:  #94a3b8;
  --n6:  #64748b;
  --n7:  #475569;
  --n8:  #1e293b;
  --n9:  #0f172a;
  --f:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --hdr: 64px;
  --rad: 10px;
  --sh:  0 1px 4px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.05);
  --shm: 0 8px 32px rgba(0,0,0,.1), 0 20px 48px rgba(0,0,0,.07);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
  font-family: var(--f);
  font-weight: 400;
  background: var(--n1);
  color: var(--n8);
  line-height: 1.65;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
body.lb-fullwidth { background: #fff; }
a { color: var(--g); text-decoration: none; transition: color .15s; }
a:hover { color: var(--gd); }
img { max-width: 100%; height: auto; }

/* ── Shared Utilities ───────────────────────────────────── */
.lb-container  { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
.lb-btn        { display: inline-flex; align-items: center; gap: 6px; padding: 9px 20px; border-radius: var(--rad); font-size: .875rem; font-weight: 600; text-decoration: none; border: 1.5px solid transparent; transition: all .18s; cursor: pointer; white-space: nowrap; font-family: var(--f); }
.lb-btn-primary{ background: var(--g); color: #fff; border-color: var(--g); }
.lb-btn-primary:hover { background: var(--gd); color: #fff; transform: translateY(-1px); }
.lb-btn-ghost  { background: transparent; color: var(--n7); border-color: var(--n3); }
.lb-btn-ghost:hover { border-color: var(--g); color: var(--g); background: var(--gp); }

/* ══════════════════════════════════════════════════════════
   HEADER
══════════════════════════════════════════════════════════ */
.lb-header {
  position: sticky; top: 0; z-index: 200; height: var(--hdr);
  background: rgba(255,255,255,.97); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--n3);
  box-shadow: 0 1px 8px rgba(0,0,0,.06);
}
.lb-header-in {
  max-width: none; width: 100%; margin: 0; padding: 0 clamp(16px, 4vw, 56px);
  height: 100%; display: flex; align-items: center; gap: 20px;
}
.lb-brand {
  font-size: 1.15rem; font-weight: 600; color: var(--n9);
  letter-spacing: -.02em; white-space: nowrap; text-decoration: none;
}
.lb-brand strong { color: var(--g); }
.lb-brand:hover { color: var(--n9); }

/* Nav */
.lb-nav { flex: 1; display: flex; justify-content: center; min-width: 0; }
.lb-nav-list { list-style: none; display: flex; gap: 2px; flex-wrap: wrap; justify-content: center; }
.lb-nav-list li a {
  padding: 7px 13px; border-radius: 7px; font-size: .875rem; font-weight: 500;
  color: var(--n6); transition: all .15s; display: block;
}
.lb-nav-list li a:hover, .lb-nav-list li.current-menu-item a {
  color: var(--g); background: var(--gp); font-weight: 600;
}

/* Header actions */
.lb-header-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* Hamburger */
.lb-ham {
  display: none; background: none; border: none; cursor: pointer; padding: 6px;
  flex-direction: column; gap: 5px;
}
.lb-ham span {
  display: block; width: 22px; height: 2px; background: var(--n7);
  border-radius: 2px; transition: all .22s;
}
.lb-ham.open span:nth-child(1) { transform: rotate(45deg) translate(5px,5px); }
.lb-ham.open span:nth-child(2) { opacity: 0; }
.lb-ham.open span:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px); }

/* ══════════════════════════════════════════════════════════
   MAIN CONTENT
══════════════════════════════════════════════════════════ */
.lb-main {
  min-height: calc(100vh - var(--hdr) - 280px);
  padding: 40px 0 60px;
}

/* Page */
.lb-page-title, .lb-post-title {
  font-size: 1.8rem; font-weight: 600; color: var(--n9);
  letter-spacing: -.025em; margin-bottom: 24px; line-height: 1.25;
}
.lb-page-content, .lb-post-content {
  font-size: .95rem; line-height: 1.8; color: var(--n7);
}
.lb-page-content h1, .lb-page-content h2, .lb-page-content h3 {
  color: var(--n9); font-weight: 600; margin: 28px 0 12px; line-height: 1.3;
}
.lb-page-content h2 { font-size: 1.35rem; }
.lb-page-content h3 { font-size: 1.1rem; }
.lb-page-content p  { margin-bottom: 16px; }
.lb-page-content ul, .lb-page-content ol { padding-left: 24px; margin-bottom: 16px; }
.lb-page-content li { margin-bottom: 6px; }
.lb-page-content a  { color: var(--g); font-weight: 600; }
.lb-page-content a:hover { color: var(--gd); text-decoration: underline; }
.lb-page-content strong { color: var(--n9); font-weight: 600; }
.lb-page-content blockquote {
  border-left: 3px solid var(--g); padding: 12px 16px; background: var(--gp);
  border-radius: 0 8px 8px 0; font-style: italic; margin: 20px 0;
}
.lb-page-content table { width: 100%; border-collapse: collapse; margin-bottom: 20px; font-size: .9rem; }
.lb-page-content table th { background: var(--n2); font-weight: 600; padding: 10px 14px; text-align: left; border: 1px solid var(--n3); }
.lb-page-content table td { padding: 10px 14px; border: 1px solid var(--n3); }
.lb-page-content table tr:nth-child(even) td { background: var(--n1); }
.lb-page-content img { border-radius: 8px; box-shadow: var(--sh); }

/* Full-width: shortcode pages → no padding, no background */
body.lb-fullwidth .lb-main { padding: 0; min-height: 0; }

/* ══════════════════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════════════════ */
.lb-footer { background: var(--n9); color: rgba(255,255,255,.7); padding: 52px 0 0; }
.lb-footer-in { max-width: 1100px; margin: 0 auto; padding: 0 24px; display: flex; gap: 48px; flex-wrap: wrap; }
.lb-footer-brand { flex: 1; min-width: 220px; }
.lb-footer-logo  { font-size: 1.1rem; font-weight: 600; color: #fff; display: block; margin-bottom: 10px; }
.lb-footer-logo strong { color: #4ade80; }
.lb-footer-brand p { font-size: .85rem; color: rgba(255,255,255,.45); line-height: 1.65; max-width: 260px; }
.lb-footer-cols  { display: flex; gap: 40px; flex-wrap: wrap; flex: 2; }
.lb-footer-col   { min-width: 130px; }
.lb-footer-col h4 { font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: rgba(255,255,255,.4); margin-bottom: 12px; }
.lb-footer-col ul { list-style: none; }
.lb-footer-col li { margin-bottom: 8px; }
.lb-footer-col a  { color: rgba(255,255,255,.6); font-size: .85rem; transition: color .15s; }
.lb-footer-col a:hover { color: #4ade80; }

.lb-footer-bottom {
  margin-top: 40px; border-top: 1px solid rgba(255,255,255,.07);
  padding: 16px 0; font-size: .8rem; color: rgba(255,255,255,.3);
}
.lb-footer-bottom .lb-footer-in { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.lb-footer-links { display: flex; gap: 16px; }
.lb-footer-links a { color: rgba(255,255,255,.35); font-size: .8rem; }
.lb-footer-links a:hover { color: rgba(255,255,255,.7); }

/* ══════════════════════════════════════════════════════════
   BCRM PLUGIN COMPATIBILITY
   Khi trang có shortcode [bcrm_home], remove default body bg
   và pass qua hoàn toàn plugin's CSS
══════════════════════════════════════════════════════════ */
body.lb-fullwidth {
  background: #fff !important;
}
body.lb-fullwidth .lb-header,
body.lb-fullwidth .lb-footer { display: none; }

/* bcrm body styles override — plugin đã có font Inter,
   theme override lên Inter */
body.bcrm { font-family: var(--f) !important; }

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .lb-nav  { display: none; }
  .lb-ham  { display: flex; }
  .lb-nav.open {
    display: flex; flex-direction: column; position: absolute;
    top: var(--hdr); left: 0; right: 0; width: 100%; background: #fff;
    border-bottom: 1px solid var(--n3); padding: 12px 24px 20px;
    box-shadow: 0 8px 24px rgba(0,0,0,.1); z-index: 100;
  }
  .lb-nav.open .lb-nav-list { flex-direction: column; gap: 0; }
  .lb-nav.open .lb-nav-list li a { padding: 11px 4px; border-bottom: 1px solid var(--n2); }
  .lb-header { position: relative; }
  .lb-header-in { position: relative; }
}
@media (max-width: 600px) {
  .lb-header-actions .lb-btn-ghost { display: none; }
  .lb-footer-cols { gap: 24px; }
  .lb-footer-col  { min-width: 100%; }
}


/* v41 clean: full header + Inter + max bold 600, keep original xanh/đen palette */
html, body, button, input, select, textarea, a, p, div, span, li, h1, h2, h3, h4, h5, h6 {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
strong, b, h1, h2, h3, h4, h5, h6,
.lb-btn, .lb-brand, .lb-brand strong, .lb-nav-list li a,
.lb-footer-logo, .lb-footer-logo strong, .lb-footer-col h4,
.lb-page-content strong, .lb-page-content table th {
  font-weight: 600 !important;
}
.lb-header-in,
.lb-footer-in {
  max-width: none;
  width: 100%;
}
.lb-header-in {
  padding-left: clamp(16px, 4vw, 56px);
  padding-right: clamp(16px, 4vw, 56px);
}

/* v42 logo cleanup */
.lb-brand{display:inline-flex;align-items:center;line-height:1}
.lb-brand-logo{display:block;height:42px;width:auto;max-width:min(320px,42vw)}
.lb-footer-logo{display:inline-flex;align-items:center;text-decoration:none}
.lb-footer-logo-img{display:block;height:44px;width:auto;max-width:min(320px,60vw)}
@media (max-width:900px){.lb-brand-logo{height:36px;max-width:52vw}.lb-footer-logo-img{height:38px}}
@media (max-width:560px){.lb-header-in{padding-left:14px;padding-right:14px;gap:12px}.lb-brand-logo{height:32px;max-width:50vw}.lb-header-actions{gap:6px}.lb-header-actions .lb-btn{padding:8px 12px;font-size:.82rem}.lb-ham{margin-left:2px}}