/* =========================================================
   9LISTENING — 9ls-chrome.css
   Header + Footer dùng TOÀN SITE (thay Flatsome).
   ---------------------------------------------------------
   Tự chứa: khai token + reset tối thiểu riêng cho vùng chrome,
   dùng namespace .nls-*  (KHÔNG đụng .header/.nav/.footer của
   Flatsome) nên đứng vững cạnh Flatsome mà không cần gỡ theme.
   Load trên mọi trang qua inc/9ls-assets.php.
   ========================================================= */

.nls-chrome{
  --c-cream:#FBFAF6; --c-paper:#fff; --c-ink:#1A1816; --c-ink2:#312D29;
  --c-muted:#6B6258; --c-frame:#D8D0C4; --c-accent:#E8590C; --c-accent-dark:#B54708;
  --c-yellow:#FFE34A;
  --c-sans:'Manrope','Noto Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
}

/* ---------- HEADER ---------- */
.nls-header{
  position:sticky;top:0;z-index:1000;
  background:rgba(251,250,246,.92);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--c-frame);
  font-family:var(--c-sans);
}
.nls-header *,.nls-footer *{box-sizing:border-box}
.nls-header-in{
  width:min(1180px,calc(100% - 48px));margin-inline:auto;
  min-height:68px;display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.nls-logo{display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:var(--c-ink);font-weight:800;font-size:20px;letter-spacing:-.01em;line-height:1}
.nls-logo .nls-bars{display:flex;align-items:flex-end;gap:2.5px;height:20px}
.nls-logo .nls-bars i{display:block;width:3.5px;border-radius:99px;background:var(--c-accent)}
.nls-logo .nls-bars i:nth-child(1){height:34%}.nls-logo .nls-bars i:nth-child(2){height:62%}
.nls-logo .nls-bars i:nth-child(3){height:100%}.nls-logo .nls-bars i:nth-child(4){height:52%}.nls-logo .nls-bars i:nth-child(5){height:76%}
.nls-logo .nls-nine{color:var(--c-accent)}

.nls-nav{display:flex;align-items:center;gap:22px}
.nls-nav>a{font-weight:600;font-size:14px;color:var(--c-ink2);text-decoration:none;line-height:1}
.nls-nav>a:hover{color:var(--c-accent-dark)}

/* nút CTA + nút primary trong chrome */
.nls-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--c-sans);font-weight:700;font-size:14px;line-height:1;border-radius:11px;padding:11px 18px;text-decoration:none;border:1.5px solid transparent;cursor:pointer;transition:background .15s,transform .12s,border-color .15s}
.nls-btn:active{transform:translateY(1px)}
.nls-btn-primary{background:linear-gradient(135deg,#E8590C,#B54708);color:#fff;box-shadow:0 8px 20px rgba(232,89,12,.28)}
.nls-btn-primary:hover{background:linear-gradient(135deg,#B54708,#8F3806)}

/* tiện ích thương mại: giỏ + tài khoản */
.nls-tools{display:flex;align-items:center;gap:14px}
.nls-icon{position:relative;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:11px;border:1.5px solid var(--c-frame);background:var(--c-paper);color:var(--c-ink);text-decoration:none;transition:border-color .15s,color .15s}
.nls-icon:hover{border-color:var(--c-accent);color:var(--c-accent-dark)}
.nls-icon svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.nls-cart-count{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;padding:0 5px;border-radius:99px;background:var(--c-accent);color:#fff;font-size:11px;font-weight:800;line-height:18px;text-align:center;font-family:var(--c-sans)}
.nls-cart-count[data-count="0"]{display:none}

.nls-menu-toggle{display:none;background:var(--c-paper);border:1.5px solid var(--c-frame);border-radius:10px;font-size:20px;line-height:1;padding:7px 12px;cursor:pointer;color:var(--c-ink)}

/* ---------- FOOTER ---------- */
.nls-footer{background:var(--c-ink);color:#CFC8BE;padding:34px 0;font-family:var(--c-sans);font-size:13.5px}
.nls-footer-in{width:min(1180px,calc(100% - 48px));margin-inline:auto;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.nls-footer-in>span{font-weight:500}
.nls-footer nav a{color:#EFEAE2;text-decoration:none;margin-left:18px;font-weight:600}
.nls-footer nav a:first-child{margin-left:0}
.nls-footer nav a:hover{color:var(--c-yellow)}

/* ---------- MOBILE ---------- */
@media (max-width:820px){
  .nls-header-in{width:min(100% - 28px,1180px)}
  .nls-nav{
    display:none;position:absolute;top:68px;left:0;right:0;
    background:var(--c-cream);border-bottom:1px solid var(--c-frame);
    flex-direction:column;align-items:flex-start;gap:16px;padding:20px 24px;
  }
  .nls-nav.nls-open{display:flex}
  .nls-menu-toggle{display:inline-flex;align-items:center}
  .nls-footer-in{flex-direction:column;align-items:flex-start}
  .nls-footer nav a{margin:0 16px 0 0}
}

@media (prefers-reduced-motion:reduce){
  .nls-btn,.nls-icon{transition:none}
}


/* ---------- STICKY FOOTER (ngăn khoảng trống/đen dưới footer) ---------- */
html.nls-chrome-html{background:#FBFAF6}
body.nls-chrome{background:#FBFAF6;margin:0}
body.nls-chrome{min-height:100vh;display:flex;flex-direction:column}
body.nls-chrome .nls-header{flex:0 0 auto}
body.nls-chrome .nls-site-content{flex:1 0 auto}
body.nls-chrome .nls-footer{flex:0 0 auto;margin-top:auto}