/* Hotline + "Nhận báo giá" (owner 23/10/2026: "thêm 1 nút gọi hotline nổi bật … và thêm 1 nút nhận báo giá hiện form để khách điền
   lấy lead"). site/np-cta.js places the pair: a computer / tablet — a column left of the corner buttons, its foot on the mood bar's
   line; a phone — a row over the tour bar, right-aligned with the menu button. They step aside with the rest of the page UI (intro,
   H, a popup, the floor cut, the open "Sơ đồ" sheet on a phone, the guide, a mood that loads). The form is the page's own dialog. */
#npCta{position:fixed;z-index:30;display:flex;flex-direction:column;align-items:flex-end;gap:8px;pointer-events:none;
  transition:opacity .3s ease,visibility 0s linear 0s}
#npCta.row{flex-direction:row-reverse;align-items:center}
#npCta>*{pointer-events:auto}
.np-cta-btn{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 18px 0 14px;border-radius:999px;cursor:pointer;
  font:600 13.5px/1 var(--f-body,system-ui);letter-spacing:.02em;white-space:nowrap;text-decoration:none;border:0;
  -webkit-tap-highlight-color:transparent;transition:filter .2s ease,transform .2s ease}
.np-cta-btn svg{flex:none}
.np-cta-btn:hover{filter:brightness(1.08)}
.np-cta-btn:active{transform:scale(.97)}
.np-cta-btn:focus-visible{outline:2px solid #e6cba0;outline-offset:3px}
/* hotline: the warm bronze of the brand, the one solid thing on the screen, a soft ring now and then */
.np-cta-call{position:relative;color:#1F2219;background:linear-gradient(135deg,#EBCF9E,#C39B77 92%);
  box-shadow:0 6px 18px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.45)}
.np-cta-call .n{font-variant-numeric:tabular-nums;letter-spacing:.04em}
.np-cta-call::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 0 rgba(235,207,158,.55);
  animation:npCallRing 2.8s ease-out infinite;pointer-events:none}
.np-cta-call svg{animation:npCallShake 2.8s ease-in-out infinite;transform-origin:50% 60%}
@keyframes npCallRing{0%{box-shadow:0 0 0 0 rgba(235,207,158,.55)}70%,100%{box-shadow:0 0 0 14px rgba(235,207,158,0)}}
@keyframes npCallShake{0%,62%,100%{transform:rotate(0)}66%{transform:rotate(-14deg)}72%{transform:rotate(12deg)}78%{transform:rotate(-8deg)}84%{transform:rotate(0)}}
/* quote: the page's glass with a bronze hairline */
.np-cta-quote{color:var(--accent,#F3EBDA);background:rgba(43,46,35,.62);-webkit-backdrop-filter:blur(14px) saturate(1.4);
  backdrop-filter:blur(14px) saturate(1.4);box-shadow:inset 0 0 0 1px rgba(226,192,143,.6),0 6px 18px rgba(0,0,0,.22)}
.np-cta-quote[hidden]{display:none}
@media (max-width:740px){
  .np-cta-btn{height:42px;padding:0 15px 0 12px;font-size:13px;gap:7px}
}
@media (max-width:359px){.np-cta-call .n{display:none}.np-cta-call .s{display:inline}}
.np-cta-call .s{display:none}
body:is(.intro-lock,.ui-off,.mm-x,.pop-open,.np-unit-open,.np-slice-desk,.np-slice-mobile,.np-guide-open,.np-wait,.np-mm-open,.np-quote-open) #npCta,
body:has(#pop.open) #npCta,body:has(#floors.open) #npCta,html.np-terms-open #npCta{opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .3s ease,visibility 0s linear .3s}
body:is(.intro-lock,.ui-off,.mm-x,.pop-open,.np-unit-open,.np-slice-desk,.np-slice-mobile,.np-guide-open,.np-wait,.np-mm-open,.np-quote-open) #npCta>*,
body:has(#pop.open) #npCta>*,body:has(#floors.open) #npCta>*{pointer-events:none}

/* ---- the form ---- */
#npQuote{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:16px;visibility:hidden;opacity:0;
  transition:opacity .25s ease,visibility 0s linear .25s}
#npQuote.on{visibility:visible;opacity:1;transition:opacity .25s ease}
#npQuote .q-scrim{position:absolute;inset:0;background:rgba(8,9,7,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
#npQuote .q-card{position:relative;width:min(420px,100%);max-height:calc(100% - 8px);overflow:auto;padding:26px 24px 22px;border-radius:20px;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,0) 40%),rgba(23,25,18,.96);color:var(--text,#eef2f7);
  box-shadow:0 24px 60px rgba(0,0,0,.45),inset 0 0 0 1px rgba(220,211,192,.22);transform:translateY(10px);transition:transform .25s ease}
#npQuote.on .q-card{transform:none}
#npQuote .q-x{position:absolute;top:12px;right:12px;width:34px;height:34px;border-radius:50%;border:0;background:rgba(255,255,255,.08);
  color:var(--text,#eef2f7);font:400 20px/1 system-ui;cursor:pointer}
#npQuote .q-x:hover{background:rgba(255,255,255,.16)}
#npQuote .q-kick{font:600 10.5px/1 var(--f-sub,system-ui);letter-spacing:.22em;text-transform:uppercase;color:#C39B77}
#npQuote h3{margin:8px 0 6px;font:400 26px/1.15 var(--f-head,Georgia,serif);color:var(--accent,#F3EBDA)}
#npQuote .q-sub{margin:0 0 16px;font:400 13px/1.5 var(--f-body,system-ui);color:rgba(238,242,247,.72)}
#npQuote label{display:block;margin:0 0 12px;font:600 11px/1.3 var(--f-sub,system-ui);letter-spacing:.1em;text-transform:uppercase;
  color:rgba(220,211,192,.85)}
#npQuote input,#npQuote select{display:block;width:100%;box-sizing:border-box;margin-top:6px;height:46px;padding:0 14px;border-radius:12px;
  border:1px solid rgba(220,211,192,.28);background:rgba(255,255,255,.06);color:var(--text,#eef2f7);
  font:400 16px/1.2 var(--f-body,system-ui);letter-spacing:0;text-transform:none;outline:none}   /* 16 px: no zoom on iPhone */
#npQuote select{appearance:none;-webkit-appearance:none;padding-right:38px;
  background:rgba(255,255,255,.06) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='14' height='14' fill='none' stroke='%23DCD3C0' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center}
#npQuote select option{color:#1F2219}
#npQuote input:focus,#npQuote select:focus{border-color:#E2C08F;background-color:rgba(255,255,255,.09)}
#npQuote input[aria-invalid=true]{border-color:#E28B7A}
#npQuote .q-err{min-height:16px;margin:-4px 0 8px;font:500 12px/1.35 var(--f-body,system-ui);color:#F0A493}
#npQuote .q-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
#npQuote .q-go{width:100%;height:48px;margin-top:4px;border:0;border-radius:999px;cursor:pointer;color:#1F2219;
  background:linear-gradient(135deg,#EBCF9E,#C39B77 92%);font:700 14px/1 var(--f-body,system-ui);letter-spacing:.04em}
#npQuote .q-go:disabled{opacity:.6;cursor:wait}
#npQuote .q-note{margin:12px 0 0;font:400 11.5px/1.5 var(--f-body,system-ui);color:rgba(238,242,247,.55);text-align:center}
#npQuote .q-or{margin:14px 0 0;text-align:center;font:500 13px/1.4 var(--f-body,system-ui);color:rgba(238,242,247,.75)}
#npQuote .q-or a{color:#EBCF9E;font-weight:700;text-decoration:none;white-space:nowrap}
#npQuote .q-ok{padding:18px 0 6px;text-align:center}
#npQuote .q-ok .ring{width:62px;height:62px;margin:0 auto 14px;border-radius:50%;display:grid;place-items:center;color:#1F2219;
  background:linear-gradient(135deg,#EBCF9E,#C39B77 92%)}
#npQuote .q-ok b{display:block;font:400 24px/1.2 var(--f-head,Georgia,serif);color:var(--accent,#F3EBDA)}
#npQuote .q-ok span{display:block;margin-top:8px;font:400 13.5px/1.55 var(--f-body,system-ui);color:rgba(238,242,247,.78)}
@media (max-width:740px){
  #npQuote{place-items:end center;padding:0}
  #npQuote .q-card{width:100%;border-radius:20px 20px 0 0;padding:22px 18px calc(18px + env(safe-area-inset-bottom,0px));transform:translateY(24px)}
}
@media (prefers-reduced-motion:reduce){
  .np-cta-call::after,.np-cta-call svg{animation:none}
  #npQuote,#npQuote .q-card,#npCta{transition:none}
}