/* v4 brand tokens for LP002/LP004; LP001/LP003 use their original CSS with color-only token update. */
/* =========================================================
NAKAJP Landing Page Base
Shared brand palette based on nakajp.vn visual system.
========================================================= */
:root{
  --njp-ink:#211D19;
  --njp-sumi:#3B3028;
  --njp-brown:#6B4F3A;
  --njp-wood:#8A6543;
  --njp-gold:#B8944D;
  --njp-gold-soft:#E8D7A8;
  --njp-ivory:#FCFAF6;
  --njp-paper:#FFFDF8;
  --njp-stone:#D9D0C3;
  --njp-mist:#EEE8DD;
  --njp-muted:#635A50;
  --njp-line:rgba(37,33,29,.13);
  --njp-warn:#9E4B3F;
  --njp-zalo:#0068FF;
  --njp-shadow:0 22px 60px rgba(37,33,29,.10);
  --njp-radius:22px;
  --njp-radius-sm:14px;
  --njp-max:1180px;
  --njp-font:"Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --njp-serif:"Playfair Display",Georgia,serif;
  --njp-trans:220ms ease;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--njp-font);
  color:var(--njp-ink);
  background:var(--njp-ivory);
  line-height:1.72;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
button,input,select,textarea{font:inherit}
.container{width:min(var(--njp-max),calc(100% - 40px));margin-inline:auto}
.section{padding:76px 0}
.section--paper{background:var(--njp-paper)}
.section--dark{background:var(--njp-sumi);color:var(--njp-paper)}
.section--soft{background:linear-gradient(180deg,var(--njp-ivory),#fffaf2)}
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  margin:0 0 14px;
  color:var(--njp-wood);
  font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
}
.eyebrow:before{content:"";width:34px;height:1px;background:var(--njp-gold)}
h1,h2,h3{margin:0 0 18px;line-height:1.08;color:inherit}
h1,h2{font-family:var(--njp-serif);font-weight:700;letter-spacing:-.02em}
h1{font-size:clamp(29px,4.0vw,50px)}
h2{font-size:clamp(24px,2.8vw,38px)}
h3{font-size:clamp(17px,1.55vw,22px)}
p{margin:0 0 18px}
.lead{font-size:clamp(15px,1.35vw,17px);color:var(--njp-muted);line-height:1.75}
.section--dark .lead,.section--dark .muted{color:rgba(255,253,248,.76)}
.muted{color:var(--njp-muted)}
.grid{display:grid;gap:24px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{
  background:rgba(255,253,248,.86);
  border:1px solid var(--njp-line);
  border-radius:var(--njp-radius);
  padding:24px;
  box-shadow:0 12px 40px rgba(37,33,29,.055);
}
.card--flat{box-shadow:none}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:14px 24px;border-radius:999px;border:1px solid transparent;
  background:var(--njp-brown);color:#fff;text-decoration:none;font-weight:800;
  letter-spacing:.01em;cursor:pointer;transition:transform var(--njp-trans),background var(--njp-trans),box-shadow var(--njp-trans),border-color var(--njp-trans);
}
.btn:hover{transform:translateY(-2px);background:var(--njp-wood);box-shadow:0 14px 30px rgba(107,79,58,.16)}
.btn--gold:hover{background:#C9A65F;color:var(--njp-sumi)}
.btn--ghost:hover{background:#FFF8EA;color:var(--njp-brown);border-color:var(--njp-gold)}
.btn--gold{background:var(--njp-gold);color:var(--njp-sumi)}
.btn--ghost{background:transparent;color:var(--njp-sumi);border-color:var(--njp-stone)}
.section--dark .btn--ghost{color:var(--njp-paper);border-color:rgba(255,255,255,.3)}
.btn-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.njp-note{font-size:13px;color:var(--njp-muted)}
.brand-divider{height:1px;background:linear-gradient(90deg,transparent,var(--njp-gold),transparent);opacity:.7;margin:30px 0}
@media (max-width:900px){
  .section{padding:56px 0}
  h1{font-size:clamp(30px,8vw,42px)}
  h2{font-size:clamp(24px,6.4vw,34px)}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .container{width:min(100% - 28px,var(--njp-max))}
  .btn{width:100%}
  .btn-row{width:100%}
}
/* NAKAJP mobile H1 base adjustment — 2026-06-11 */
@media (max-width: 900px){
  h1{
    font-size: clamp(28px, 7.4vw, 38px);
    line-height: 1.12;
  }
}


/* NAKAJP CSS safety patch — 2026-06-12
   Fixes: desktop mobile-sticky leakage, visible raw Zalo overlay text,
   floating widgets overlapping mobile sticky CTA. */
.mobile-sticky,
.mobile-sticky-cta {
  display: none !important;
}

@media (max-width: 980px) {
  .mobile-sticky.is-visible,
  .mobile-sticky-cta.is-visible {
    display: flex !important;
  }
}

@media (min-width: 981px) {
  .mobile-sticky,
  .mobile-sticky-cta {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

.zalo-track-overlay {
  position: fixed !important;
  right: 24px !important;
  bottom: 24px !important;
  width: 60px !important;
  height: 60px !important;
  z-index: 10001 !important;
  border-radius: 999px !important;
  display: block !important;
  overflow: hidden !important;
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
  background: transparent !important;
  text-decoration: none !important;
  text-indent: -9999px !important;
  white-space: nowrap !important;
}

.zalo-track-overlay:focus-visible {
  outline: 3px solid rgba(140, 103, 75, .45) !important;
  outline-offset: 4px !important;
}

@media (max-width: 980px) {
  .zalo-track-overlay,
  .zalo-chat-widget {
    right: 16px !important;
    bottom: 92px !important;
  }
}