/* ==================================================================
   bmx-chrome.css — GLOBAL header/footer styles for Boxme Insights
   Single source of truth. Loaded on every portal page via
   Website Settings > head_html. Rules are scoped to html.bmx-chrome,
   a class added by the BMX Header web template, so standard Frappe
   pages (/login, /app, portal defaults) are never affected.
   Edit here only — never copy into a Web Page.
   ================================================================== */
html.bmx-chrome header.navbar, html.bmx-chrome nav.navbar, html.bmx-chrome .web-footer, html.bmx-chrome .page-footer, html.bmx-chrome .website-banner, html.bmx-chrome .page-header-actions-block, html.bmx-chrome .page-breadcrumbs{ display:none !important; }
html.bmx-chrome .page_content{ padding:0 !important; margin:0 !important; }
html.bmx-chrome .page-content-wrapper, html.bmx-chrome .container, html.bmx-chrome .page-container, html.bmx-chrome main.container{ max-width:100% !important; padding:0 !important; margin:0 !important; }
html.bmx-chrome body{ padding:0 !important; margin:0 !important; }
/* ============ Design tokens (color-rules.md) ============ */
html.bmx-chrome{
  --primary:#0b43ea; --primary-600:#0936c2; --primary-050:#eef3ff;
  --oms-dark:#030f26; --oms-dark-2:#0a1730; --oms-line:rgba(255,255,255,.08);
  --p1:#4285F4; --p2:#EA4335; --p3:#FBBC04; --p4:#34A853; --p5:#FF6D01; --p6:#00ACC1;
  --success:#16A34A; --danger:#DC2626;
  --page:#f6f8fb; --card:#ffffff; --line:#e6eaf1; --body:#1c2433; --muted:#5f6b7f; --faint:#8b96a8;
  --radius:14px; --topbar-h:58px;
  --font-display:'Sora',sans-serif; --font-body:'Inter',sans-serif; --font-mono:'IBM Plex Mono',monospace;
}
/* The universal reset must keep ZERO specificity (:where) so it never
   outranks a page's own class rules — a plain html.bmx-chrome * would
   wipe the padding/margins of every page block. */
:where(html.bmx-chrome) *{margin:0;padding:0;box-sizing:border-box}
html.bmx-chrome{scroll-behavior:smooth}
html.bmx-chrome body{font-family:var(--font-body);color:var(--body);background:var(--page);-webkit-font-smoothing:antialiased}
html.bmx-chrome a{color:var(--primary);text-decoration:none}
html.bmx-chrome a:hover{text-decoration:underline}
html.bmx-chrome :focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:4px}
/* ============ Top bar (header) ============ */
html.bmx-chrome .topbar{background:var(--oms-dark);border-bottom:1px solid var(--oms-line);position:relative;z-index:50}
html.bmx-chrome .topbar-in{max-width:1440px;margin:0 auto;height:var(--topbar-h);padding:0 28px;
  display:flex;align-items:center;gap:18px}
html.bmx-chrome .top-nav{margin-left:auto;display:flex;align-items:center;gap:18px}
html.bmx-chrome .top-nav a{font-size:14px;font-weight:500;color:rgba(255,255,255,.82)!important;text-decoration:none}
html.bmx-chrome .top-nav a:hover{color:#fff!important;text-decoration:none}
html.bmx-chrome .logo{display:flex;align-items:center;gap:11px;font-family:var(--font-display);font-weight:600;
  font-size:18px;letter-spacing:.01em;color:#fff!important}
html.bmx-chrome .logo-mark-img{width:30px;height:30px;object-fit:contain;flex:none}
html.bmx-chrome .logo-lockup-img{height:50px;width:auto;object-fit:contain;flex:none}
html.bmx-chrome .foot-brand-lockup{display:inline-flex;align-items:center;gap:11px;
  font-family:var(--font-display);font-weight:600;font-size:20px;color:var(--body)!important}
html.bmx-chrome .foot-brand-lockup:hover{text-decoration:none}
html.bmx-chrome .foot-brand-lockup img{width:32px;height:32px;object-fit:contain;flex:none}
html.bmx-chrome .logo small{font-weight:500;color:rgba(255,255,255,.55)!important;font-size:11.5px;font-family:var(--font-mono);margin-left:2px;letter-spacing:.08em}
/* --- language dropdown with flags --- */
html.bmx-chrome .lang-dd{position:relative}
html.bmx-chrome .lang-btn{display:flex;align-items:center;gap:9px;border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.05);color:#fff!important;border-radius:9px;padding:8px 12px;
  font:500 13.5px var(--font-body);cursor:pointer;transition:background .15s,border-color .15s}
html.bmx-chrome .lang-btn:hover{background:rgba(255,255,255,.1)}
html.bmx-chrome .lang-btn .flag{font-size:16px;line-height:1}
html.bmx-chrome .lang-btn .caret{font-size:10px;color:rgba(255,255,255,.55);margin-left:2px}
html.bmx-chrome .lang-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:196px;background:#fff;
  border:1px solid var(--line);border-radius:11px;box-shadow:0 12px 34px rgba(3,15,38,.18);
  padding:6px;list-style:none;z-index:60}
html.bmx-chrome .lang-menu[hidden]{display:none}
html.bmx-chrome .lang-menu li{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:8px;
  font-size:14px;color:var(--body)!important;cursor:pointer}
html.bmx-chrome .lang-menu li i{font-style:normal;font-size:17px;line-height:1}
html.bmx-chrome .lang-menu li:hover{background:var(--page)}
html.bmx-chrome .lang-menu li.active{background:var(--primary-050);color:var(--primary-600)!important;font-weight:500}
html.bmx-chrome .lang-menu li .check{margin-left:auto;font-size:12px;color:var(--primary);visibility:hidden}
html.bmx-chrome .lang-menu li.active .check{visibility:visible}
/* ============ Footer (nền sáng, đồng bộ feature band) ============ */
html.bmx-chrome footer.site-footer{background:var(--card);border-top:1px solid var(--line);color:var(--muted)}
html.bmx-chrome .foot-in{max-width:1140px;margin:0 auto;padding:44px 32px 28px;display:grid;
  grid-template-columns:minmax(260px,1.2fr) 1fr 1fr;gap:36px}
html.bmx-chrome .foot-brand p{margin-top:14px;font-size:13.5px;line-height:1.65;color:var(--muted)!important;max-width:38ch}
html.bmx-chrome .foot-col h5{font:600 12px var(--font-mono);letter-spacing:.14em;color:var(--faint)!important;margin-bottom:14px}
html.bmx-chrome .foot-col a{display:block;color:var(--body)!important;font-size:13.5px;padding:5px 0}
html.bmx-chrome .foot-col a:hover{color:var(--primary)!important;text-decoration:none}
html.bmx-chrome .foot-base{border-top:1px solid var(--line)}
html.bmx-chrome .foot-base-in{max-width:1140px;margin:0 auto;padding:18px 32px;display:flex;justify-content:space-between;
  align-items:center;gap:12px;flex-wrap:wrap;font-size:12.5px;color:var(--faint)!important}
html.bmx-chrome .foot-base-in .mono{font-family:var(--font-mono);letter-spacing:.12em}
/* ============ Responsive (chrome only, from /home) ============ */
@media (max-width:960px){
  html.bmx-chrome .foot-in{grid-template-columns:1fr;gap:28px;padding:36px 24px 20px}
  html.bmx-chrome .topbar-in{padding:0 18px}
}
@media (max-width:520px){
  html.bmx-chrome .logo small{display:none}
  html.bmx-chrome .logo-lockup-img{height:40px}
}
@media (prefers-reduced-motion:reduce){
  html.bmx-chrome{scroll-behavior:auto}
}
/* ============ Shared 1152px frame ============ */
html.bmx-chrome .topbar-in, html.bmx-chrome .foot-in, html.bmx-chrome .foot-base-in{max-width:1152px;padding-left:32px;padding-right:32px}
@media (max-width:900px){
  html.bmx-chrome .topbar-in{padding-left:18px;padding-right:18px}
  html.bmx-chrome .foot-in{padding-left:24px;padding-right:24px}
}
html.bmx-chrome .lang-dd{margin-left:auto}
html.bmx-chrome .topbar-in .open-portal{font-size:14px;font-weight:600;text-decoration:none;color:#fff!important;
  background:var(--primary);padding:9px 16px;border-radius:9px;white-space:nowrap}
html.bmx-chrome .topbar-in .open-portal:hover{background:var(--primary-600);text-decoration:none}
@media (max-width:560px){
  html.bmx-chrome .topbar-in .open-portal{display:none}
}
html.bmx-chrome .top-nav a{position:relative;padding:4px 0}
html.bmx-chrome .top-nav a.is-current{color:#fff!important}
html.bmx-chrome .top-nav a.nav-new:before{content:"";position:absolute;top:2px;right:-8px;width:6px;height:6px;border-radius:50%;background:#EA4335}
html.bmx-chrome .top-nav a.is-current:after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;
  border-radius:2px;background:var(--primary)}
@media (max-width:640px){
  html.bmx-chrome .top-nav{gap:12px}
  html.bmx-chrome .top-nav a{font-size:13px}
}
/* ---- header: breathe around the logo instead of a fixed 58px bar ---- */
html.bmx-chrome .topbar-in{height:auto;min-height:var(--topbar-h);padding-top:14px;padding-bottom:14px}
@media (max-width:900px){
  html.bmx-chrome .topbar-in{padding-top:10px;padding-bottom:10px}
}
html.bmx-chrome{--primary-100:#dcebff}



/* ============ Small screens: keep the logo, wrap the nav ============ */
html.bmx-chrome .logo{flex:none;min-width:0}
@media (max-width:820px){
  html.bmx-chrome .topbar-in{flex-wrap:wrap;row-gap:10px}
  html.bmx-chrome .lang-dd{margin-left:auto}
  html.bmx-chrome .top-nav{order:3;width:100%;margin-left:0;gap:16px;
    overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  html.bmx-chrome .top-nav::-webkit-scrollbar{display:none}
  html.bmx-chrome .top-nav a{white-space:nowrap}
}