/* 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:"Be Vietnam Pro",sans-serif;
  --njp-serif:"Be Vietnam Pro",sans-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;
  }
}

/* NAKAJP Phase 5 typography size sync — H1/H2 fixed */
:root{
  --njp-h1-size:40px;
  --njp-h2-size:32px;
}
h1,
.hero h1,
.brand-home-page h1,
.brand-hero h1,
.lp001-hero h1,
.lp003-hero h1,
.njp-hero h1,
.quote-hero h1{
  font-size:var(--njp-h1-size)!important;
  line-height:1.12!important;
}
h2,
.sec-title h2,
.workflow-title h2,
.cta-band h2,
.brand-home-page h2,
.brand-home-page .proof-copy h2,
.brand-home-page .team-intro h2,
.brand-home-page .showroom-layout h2,
.brand-home-page .spirit-layout h2,
.brand-home-page .hero-panel h2,
.njp-section-title h2,
.lp003-section h2,
.quote-section h2{
  font-size:var(--njp-h2-size)!important;
  line-height:1.18!important;
}
@media (max-width: 640px){
  h1,
  .hero h1,
  .brand-home-page h1,
  .brand-hero h1,
  .lp001-hero h1,
  .lp003-hero h1,
  .njp-hero h1,
  .quote-hero h1{
    font-size:var(--njp-h1-size)!important;
  }
  h2,
  .sec-title h2,
  .workflow-title h2,
  .cta-band h2,
  .brand-home-page h2,
  .brand-home-page .proof-copy h2,
  .brand-home-page .team-intro h2,
  .brand-home-page .showroom-layout h2,
  .brand-home-page .spirit-layout h2,
  .brand-home-page .hero-panel h2,
  .njp-section-title h2,
  .lp003-section h2,
  .quote-section h2{
    font-size:var(--njp-h2-size)!important;
  }
}


/* Font sync override — Be Vietnam Pro */
:root{
  --njp-font:"Be Vietnam Pro",sans-serif;
  --njp-serif:"Be Vietnam Pro",sans-serif;
}
html,body,button,input,select,textarea{
  font-family:var(--njp-font)!important;
}
h1,h2,h3,h4,h5,h6{
  font-family:var(--njp-font)!important;
}


/* Phase font override — all typography: Be Vietnam Pro */
:root{
  --njp-font:"Be Vietnam Pro",sans-serif;
  --njp-serif:"Be Vietnam Pro",sans-serif;
}
html,body{
  font-family:var(--njp-font)!important;
}
body,button,input,select,textarea{
  font-family:var(--njp-font)!important;
}
h1,h2,h3,h4,h5,h6,
.hero-title,.section-title,.brand-title,.proof-title{
  font-family:var(--njp-serif)!important;
}
h1{font-size:40px!important;}
h2{font-size:32px!important;}


/* Phase font readability override — headings/body unified */
:root{
  --njp-font:"Be Vietnam Pro",sans-serif;
  --njp-serif:"Be Vietnam Pro",sans-serif;
}
body,button,input,select,textarea{
  font-family:var(--njp-font)!important;
}
h1,h2,h3,h4,h5,h6,
.hero-title,.section-title,.lp-hero h1,.lp-section h2,
.njp-hero h1,.njp-section h2,.service-hero h1,.service-section h2{
  font-family:var(--njp-font)!important;
}
h1{font-size:40px!important;line-height:1.15!important;}
h2{font-size:32px!important;line-height:1.22!important;}


/* ===== Global readable casing override ===== */
h1, h2{
  text-transform:none !important;
}
.eyebrow,
.hero-eyebrow,
[class*="eyebrow"],
[class*="kicker"],
[class*="tag"]{
  text-transform:none !important;
  letter-spacing:.02em;
}


/* Phase 5.1 content polish */
.value-grid--phase51 .value-card--featured{
  border-color:rgba(143,101,56,.34);
  background:linear-gradient(180deg,#fffaf2 0%,#fff 100%);
}
.value-grid--phase51 .value-card--featured h3{
  margin-bottom:10px;
}
.quote-summary-box{
  margin:18px 0;
  padding:18px;
  border:1px solid rgba(143,101,56,.24);
  border-radius:18px;
  background:#fffaf2;
}
.quote-summary-box h3{
  margin:0 0 10px;
  font-size:20px;
  line-height:1.35;
}
.quote-summary-box ol{
  margin:0;
  padding-left:20px;
}
.quote-summary-box li{
  margin:6px 0;
  line-height:1.55;
}

/* Phase 5.3 — make home USP trio stand out without redesign */
.value-grid--usp.value-grid--phase51{
  margin-top:22px;
  margin-bottom:22px;
}
.value-grid--usp.value-grid--phase51 .value-card--featured{
  position:relative;
  border-width:2px;
  box-shadow:0 18px 42px rgba(60,38,22,.10);
}
.value-grid--usp.value-grid--phase51 .value-card--featured span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:42px;
  height:42px;
  border-radius:999px;
  background:rgba(143,101,56,.12);
  color:#7a552f;
  font-weight:900;
  margin-bottom:12px;
}
.value-grid--usp.value-grid--phase51 .value-card--featured h3{
  font-size:21px;
  line-height:1.3;
}
@media(max-width:760px){
  .value-grid--usp.value-grid--phase51 .value-card--featured h3{
    font-size:19px;
  }
}