/* =========================================================
   nr-lead -- khoi form nhan tu van / goi lai dung chung
   Template: templates/frontend/modules/components/nr_lead.twig
   JS: assets/frontend/js/lead.js (data-js="nr-lead")

   Hai kieu:
     .nr-lead.nr-lead--bar  : SĐT + khu vuc tren 1 hang (trang chi nhanh)
     .nr-lead.nr-lead--card : the doc cho cot phu (trang san pham)
   Tu du: chi can tokens.css + button.css + svg-icon.css, khong can .nr
   boc ngoai (trang chi nhanh/san pham van la Bootstrap).
   ========================================================= */

.nr-lead {
  --nr-lead-pad: var(--nr-space-6);
  --nr-lead-gap: var(--nr-space-4);
  --nr-lead-cols: repeat(2, minmax(0, 1fr));
  --nr-lead-badge: 48px;
  --nr-lead-badge-font: var(--nr-text-2xl);
  --nr-lead-title-size: var(--nr-text-xl);
  --nr-lead-submit-w: auto;
  --nr-lead-submit-span: 1 / -1;

  display: grid;
  gap: var(--nr-lead-gap);
  padding: var(--nr-lead-pad);
  margin-block: var(--nr-space-6);
  background: var(--nr-surface); /* nen trang phang -- nguoi dung chot 28/09/2026, khong to do */
  border: 1px solid var(--nr-border);
  border-radius: var(--nr-radius-lg);
  box-shadow: var(--nr-shadow-sm);
  color: var(--nr-text);
  box-sizing: border-box;
}

.nr-lead-head { display: flex; align-items: center; gap: var(--nr-space-3); }

.nr-lead-badge {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--nr-lead-badge);
  height: var(--nr-lead-badge);
  border-radius: 50%;
  background: var(--nr-primary);
  color: var(--nr-text-invert);
  font-size: var(--nr-lead-badge-font);
}

.nr-lead-intro { min-width: 0; }
.nr-lead-title {
  margin: 0;
  font-size: var(--nr-lead-title-size);
  font-weight: var(--nr-weight-bold);
  line-height: 1.3;
  color: var(--nr-text);
}
.nr-lead-desc { margin: var(--nr-space-1) 0 0; font-size: var(--nr-text-sm); color: var(--nr-text-muted); }

.nr-lead-form {
  display: grid;
  grid-template-columns: var(--nr-lead-cols);
  gap: var(--nr-space-3);
  align-items: end;
}

.nr-lead-field { display: grid; gap: var(--nr-space-1); margin: 0; min-width: 0; }
.nr-lead-label { font-size: var(--nr-text-sm); font-weight: var(--nr-weight-semibold); color: var(--nr-text); }
.nr-lead-req { color: var(--nr-primary-text); }
.nr-lead-opt { font-weight: var(--nr-weight-normal); color: var(--nr-text-muted); }

.nr-lead-control {
  position: relative;
  display: flex;
  align-items: center;
  color: var(--nr-text-muted);
  font-size: var(--nr-text-lg);
}
.nr-lead-control > .nr-svg {
  position: absolute;
  left: var(--nr-space-3);
  pointer-events: none;
}

/* input.nr-lead-input (0,1,1) chu khong phai .nr-lead-input (0,1,0): css_used.css cu co
   input[type="text"] (0,1,1) dat padding-left 5px / height 40px / vien #ddd tren moi trang
   Bootstrap. Cung do uu tien + lead.css nap sau -> thang, khong can !important.
   Khong dung lai .nr-input: no nam trong filter.css (bo loc tin tuc), trang Bootstrap khong nap,
   va o nay can them le trai cho icon. */
input.nr-lead-input,
select.nr-lead-input {
  width: 100%;
  height: auto;
  min-height: var(--nr-control-h);
  padding-block: 0;
  padding-inline: calc(var(--nr-space-3) * 2 + 1em) var(--nr-space-3);
  background: var(--nr-surface);
  border: 1px solid var(--nr-border-strong);
  border-radius: var(--nr-radius-md);
  color: var(--nr-text);
  font: inherit;
  font-size: var(--nr-text-base);
  box-sizing: border-box;
}
input.nr-lead-input::placeholder { color: var(--nr-text-muted); opacity: 1; }
input.nr-lead-input:focus,
select.nr-lead-input:focus { outline: 2px solid var(--nr-focus); outline-offset: 1px; border-color: transparent; }
input.nr-lead-input[aria-invalid="true"] { border-color: var(--nr-primary); }

.nr-lead-submit { grid-column: var(--nr-lead-submit-span); width: var(--nr-lead-submit-w); min-height: var(--nr-control-h); padding-inline: var(--nr-space-5); white-space: nowrap; }
.nr-lead-submit[disabled] { opacity: .7; cursor: progress; }

/* Bay spam: an khoi mat va khoi trinh doc man hinh nhung van nam trong form */
.nr-lead-honey { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.nr-lead-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--nr-space-1) var(--nr-space-2);
  margin: 0;
  font-size: var(--nr-text-sm);
  color: var(--nr-text-muted);
}
.nr-lead-foot > .nr-svg { flex: none; color: var(--nr-success); font-size: var(--nr-text-lg); }
.nr-lead-call { color: var(--nr-primary-text); font-weight: var(--nr-weight-bold); text-decoration: none; white-space: nowrap; }
.nr-lead-msg[data-state="ok"] { color: var(--nr-success); font-weight: var(--nr-weight-semibold); }
.nr-lead-msg[data-state="error"] { color: var(--nr-primary-text); font-weight: var(--nr-weight-semibold); }

/* Kieu the doc: cot phu hep, moi o mot hang -- modifier chi doi bien */
.nr-lead.nr-lead--card {
  --nr-lead-pad: var(--nr-space-5);
  --nr-lead-cols: minmax(0, 1fr);
  --nr-lead-badge: 40px;
  --nr-lead-badge-font: var(--nr-text-xl);
  --nr-lead-title-size: var(--nr-text-lg);
  --nr-lead-submit-w: 100%;
}

@media (max-width: 600px) {
  .nr-lead {
    --nr-lead-pad: var(--nr-space-4);
    --nr-lead-cols: minmax(0, 1fr);
    --nr-lead-title-size: var(--nr-text-lg);
    --nr-lead-submit-w: 100%;
  }
}