/* ===== Tokens (override bằng inline style --nl-*) ===== */
[data-nlcta]{
  --nl-dark:#1f2937;
  --nl-gray:#4b5563;
  --nl-brand:#f97316;
  --nl-brand2:#f6c90e;
  --nl-text:#f9fafb;
}

/* ===== CTA HERO ===== */
.nl-cta-hero{
  background: linear-gradient(135deg, var(--nl-dark), var(--nl-gray), var(--nl-brand));
  border-radius:16px; padding:28px 20px; color:var(--nl-text);
  position:relative; overflow:hidden; box-shadow:0 12px 28px rgba(0,0,0,.25);
}

/* Logo watermark (nếu có data-nlcta-logo) */
.nl-cta-hero::after{
  content:""; position:absolute; right:-40px; bottom:-40px; width:260px; height:260px;
  background-size:contain; background-repeat:no-repeat; background-position:center;
  opacity:.08; pointer-events:none; transform:rotate(-10deg);
}
/* Kích hoạt watermark khi có URL (Chromium hỗ trợ) */
.nl-cta-hero[data-nlcta-logo]:not([data-nlcta-logo=""])::after{
  /* Fallback: nếu không hiện, hãy set bằng CSS: .nl-cta-hero::after{background-image:url('...')} */
  background-image: attr(data-nlcta-logo url);
}

.nl-cta-hero__content{max-width:1100px;margin:auto;display:flex;gap:22px;align-items:center}
.nl-cta-hero__icon{
  flex:0 0 auto;color:#fff;background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.25);width:72px;height:72px;border-radius:16px;
  display:grid;place-items:center;backdrop-filter:blur(6px)
}
.nl-cta-hero__text{flex:1}
.nl-cta-hero__lead{margin:0 0 10px;font-size:16px}
.nl-cta-hero__bullets{margin:0 0 16px 18px;padding:0}
.nl-cta-hero__bullets li{margin:6px 0}
.nl-cta-hero__actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.nl-cta-btn{
  display:inline-block;padding:12px 16px;border-radius:12px;font-weight:700;text-decoration:none;
  border:1px solid transparent;transition:transform .15s ease,box-shadow .2s ease,opacity .2s ease
}
.nl-cta-btn--primary{background:var(--nl-brand);color:#fff;border-color:#d95c0d}
.nl-cta-btn--primary:hover{background:var(--nl-brand2);color:#111827}
.nl-cta-btn--light{background:rgba(255,255,255,.15);color:#fff;border-color:rgba(255,255,255,.35)}
.nl-cta-btn--light:hover{opacity:.95}

/* Zalo button styling */
.nl-cta-btn--zalo{
  background:#ffffff; color:#0b5fff;
  border-color:#cfd8ff;
}
.nl-cta-btn--zalo:hover{opacity:.95}

.nl-cta-hero__meta{margin-top:10px;font-size:14px;opacity:.9}

/* ===== CTA BAR ===== */
.nl-cta-bar{
  display:flex;gap:12px;align-items:center;justify-content:space-between;
  background:#111827;color:var(--nl-text);border:1px solid #1f2937;border-radius:12px;
  padding:12px 14px; box-shadow:0 8px 20px rgba(0,0,0,.18)
}
.nl-cta-bar__title{font-weight:700}
.nl-cta-bar__actions{display:flex;gap:8px;flex-wrap:wrap}
.nl-cta-bar__btn{
  background:var(--nl-brand);color:#111827;text-decoration:none;font-weight:800;
  padding:8px 14px;border-radius:10px;border:1px solid rgba(0,0,0,.08)
}
.nl-cta-bar__btn--call{background:var(--nl-brand); color:#111827}
.nl-cta-bar__btn--zalo{background:#fff; color:#0b5fff}
.nl-cta-bar__btn--map{background:#e5e7eb; color:#111827}
.nl-cta-bar__btn:hover{opacity:.95}

@media (max-width:768px){
  .nl-cta-hero{padding:22px 16px}
  .nl-cta-hero__content{flex-direction:row;align-items:flex-start}
  .nl-cta-hero__icon{width:58px;height:58px;border-radius:12px}
  .nl-cta-hero__lead{font-size:15px}
}
@media (max-width:520px){
  .nl-cta-hero__content{flex-direction:column;align-items:flex-start}
  .nl-cta-hero__actions{width:100%}
  .nl-cta-btn{flex:1;text-align:center}
  .nl-cta-bar{flex-wrap:wrap}
  .nl-cta-bar__actions{width:100%}
  .nl-cta-bar__btn{flex:1;text-align:center}
}