/* ============================================================
   DA Global Sourcing - Wood Buying Leads listing page
   Adapted from the reference layout on daglobalsourcing.com/buying-leads
   ============================================================ */
:root{
  --brand-navy:#143a63;
  --brand-navy-2:#0f2c4d;
  --brand-blue:#1e5aa8;
  --brand-gold:#f2b705;
  --brand-gold-2:#d99a00;
  --brand-ink:#1a2230;
}

/* ===================== 1) HERO ===================== */
.lh{
  background:
    linear-gradient(90deg, #0f2c4d 0%, rgba(15,44,77,.92) 45%, rgba(15,44,77,.5) 100%),
    url('/assets/img/go-chau-phi/okan-1.jpeg') right center / cover no-repeat;
  background-color: var(--brand-navy-2);
  color:#fff; padding:64px 0;
}
@media (max-width:991px){
  .lh{
    background:
      linear-gradient(0deg, rgba(15,44,77,.9), rgba(15,44,77,.9)),
      url('/assets/img/go-chau-phi/okan-1.jpeg') center / cover no-repeat;
    background-color: var(--brand-navy-2);
  }
}
.lh__grid{ display:grid; grid-template-columns:minmax(0,1fr); }
.lh__content{ max-width:660px; }
.lh__badge{ display:inline-flex; align-items:center; gap:8px; color:var(--brand-gold); font-size:13px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; margin-bottom:14px; }
.lh__badge i{ font-size:16px; }
.lh__title{ color:#fff; font-size:clamp(30px,4.5vw,44px); font-weight:800; line-height:1.12; margin:0 0 14px; }
.lh__title .hl{ color:var(--brand-gold); }
.lh__sub{ font-size:17px; line-height:1.55; color:#d5e2f1; max-width:560px; margin:0 0 24px; }
.lh__slogan{ font-size:15px; color:#ffd451; font-style:italic; margin:10px 0 0; }
.lh__slogan + .lh__ctas{ margin-top:20px; }
.lh__ctas{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:24px; }
.lh-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; font-size:14px; font-weight:800; letter-spacing:.4px; padding:12px 22px; border-radius:8px; border:0; text-decoration:none; cursor:pointer; transition:filter .16s ease, background .16s ease; }
.lh-btn--gold{ background:var(--brand-gold); color:#14223a; }
.lh-btn--gold:hover{ filter:brightness(.95); color:#14223a; }
.lh-btn--ghost{ background:transparent; border:1.5px solid rgba(255,255,255,.85); color:#fff; padding:10.5px 20px; }
.lh-btn--ghost:hover{ background:rgba(255,255,255,.14); color:#fff; }
.lh-trust{ display:flex; flex-wrap:wrap; gap:30px; margin-top:26px; }
.lh-trust__item{ display:flex; align-items:center; gap:10px; }
.lh-trust__item i{ font-size:26px; color:var(--brand-gold); }
.lh-trust__item span{ font-size:13px; line-height:1.35; color:#e8eef7; font-weight:600; }

/* ===================== 2) MAIN LAYOUT ===================== */
.leads-section{ padding:44px 0 10px; }
.leads-wrap{ display:grid; grid-template-columns:300px 1fr; gap:28px; align-items:start; }

/* ===================== 2a) FILTER SIDEBAR ===================== */
.lf{ background:#fff; border:1px solid #e3e9f2; border-radius:12px; padding:18px; align-self:start; position:sticky; top:90px; }
.lf__heading{ font-size:15px; font-weight:800; color:var(--brand-navy); margin:0 0 4px; }
.lf-group__head{ display:flex; align-items:center; justify-content:space-between; width:100%; background:none; border:none; border-top:1px solid #edf1f7; padding:12px 0; font-size:13px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; color:var(--brand-navy); cursor:pointer; text-align:left; }
.lf-group:first-of-type .lf-group__head{ border-top:none; }
.lf-group__head i{ color:#97a4b8; font-size:13px; transition:transform .18s ease; }
.lf-group__body{ padding-bottom:12px; }
.lf-group.is-collapsed .lf-group__body{ display:none; }
.lf-group.is-collapsed .lf-group__head i{ transform:rotate(180deg); }
.lf-search{ width:100%; padding:9px 12px; border:1px solid #d7dfeb; border-radius:8px; margin-bottom:10px; font-size:14px; color:var(--brand-ink); }
.lf-search::placeholder{ color:#97a4b8; }
.lf-search:focus{ outline:none; border-color:var(--brand-navy); box-shadow:0 0 0 3px rgba(20,58,99,.12); }
.lf-list{ max-height:340px; overflow:auto; scrollbar-width:thin; }
.lf-list--tall{ max-height:300px; }
.lf-item{ display:flex; align-items:center; gap:8px; font-size:14px; color:#33465f; padding:4px 0; cursor:pointer; margin:0; }
.lf-item:hover span{ color:var(--brand-navy); }
.lf-check{ width:15px; height:15px; flex:none; accent-color:var(--brand-navy); cursor:pointer; }
.lf-count{ margin-left:auto; color:#97a4b8; font-size:12.5px; font-style:normal; }
.lf-link{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:5px 2px; color:#33465f; border-radius:6px; text-decoration:none; font-size:14px; cursor:pointer; }
.lf-link:hover{ background:#f2f6fb; color:var(--brand-navy); }
.lf-link.is-active{ color:var(--brand-navy); font-weight:700; }
.lf-actions{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:14px; }
.lf-apply, .lf-reset{ font-size:13px; font-weight:800; letter-spacing:.3px; padding:11px; border-radius:8px; cursor:pointer; transition:background .16s ease, color .16s ease; }
.lf-apply{ background:var(--brand-navy); color:#fff; border:none; }
.lf-apply:hover{ background:var(--brand-navy-2); }
.lf-reset{ background:#fff; color:var(--brand-navy); border:1px solid var(--brand-navy); }
.lf-reset:hover{ background:#f2f6fb; }

/* ===================== 2b) MAIN COLUMN ===================== */
.leads-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.leads-head__title{ font-size:20px; font-weight:800; color:var(--brand-navy); margin:0; }
.leads-sort{ display:flex; align-items:center; gap:8px; font-size:14px; font-weight:600; color:#55637a; margin:0; }
.leads-sort select{ padding:8px 12px; border:1px solid #d7dfeb; border-radius:8px; font-size:14px; color:var(--brand-ink); background:#fff; cursor:pointer; }
.leads-sort select:focus{ outline:none; border-color:var(--brand-navy); }
.lead-list{ display:flex; flex-direction:column; gap:12px; }
.lead-row{ position:relative; display:grid; grid-template-columns:120px 1fr 150px; gap:14px; align-items:center; background:#fff; border:1px solid #e3e9f2; border-radius:12px; padding:13px 14px; transition:transform .18s ease, box-shadow .18s ease; }
.lead-row.is-hidden{ display:none; }
.lead-row:hover{ transform:translateY(-1px); box-shadow:0 6px 16px rgba(20,58,99,.08); }
.lead-row__media{ display:block; width:120px; height:88px; border-radius:10px; overflow:hidden; background:#eef3fa; }
.lead-row__media img{ display:block; width:100%; height:100%; object-fit:cover; }
.lead-row__body{ min-width:0; }
.lead-row__title{ font-size:17px; font-weight:800; line-height:1.25; margin:0; }
.lead-row__title a{ color:var(--brand-navy); text-decoration:none; }
.lead-row__title a:hover{ color:var(--brand-blue); text-decoration:underline; }
.lead-row__new{ display:inline-block; vertical-align:2px; margin-left:8px; background:#e6f6ec; color:#1d8a4a; font-size:11px; font-weight:700; letter-spacing:.2px; padding:2px 8px; border-radius:6px; white-space:nowrap; }
.lead-facts{ display:flex; flex-wrap:wrap; gap:10px 14px; margin-top:6px; }
.lead-fact{ flex:1 1 auto; min-width:70px; max-width:110px; }
.lead-fact span{ display:block; font-size:11.5px; color:#8a97ab; }
.lead-fact b{ display:block; font-size:13px; color:#22314a; font-weight:700; line-height:1.35; }
.lead-row__aside{ display:flex; flex-direction:column; justify-content:center; align-items:flex-start; padding:0 0 0 14px; border-left:1px solid #edf1f7; align-self:stretch; }
.lead-row__posted span{ display:block; font-size:11.5px; color:#8a97ab; margin-bottom:2px; }
.lead-row__posted b{ color:var(--brand-navy); font-size:13.5px; font-weight:800; }
.lead-row__btn{ display:inline-flex; align-items:center; gap:7px; margin-top:10px; padding:8px 14px; border-radius:8px; background:var(--brand-gold); color:#14223a; font-size:13px; font-weight:700; text-decoration:none; white-space:nowrap; transition:filter .16s ease; }
.lead-row__btn:hover{ filter:brightness(.95); color:#14223a; }
.lead-row__btn i{ font-size:13px; }
.leads-pagerbar{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-top:18px; }
.leads-count{ font-size:13.5px; color:#66748a; margin:0; }
.leads-empty{ background:#fff; border:1px dashed #d7dfeb; border-radius:12px; padding:44px 20px; text-align:center; color:#55637a; font-size:15px; }

/* ===================== 3) TRUST ROW ===================== */
.leads-trust{ background:#fff; border-top:1px solid #e9eef5; margin-top:44px; }
.leads-trust__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; padding:34px 0; }
.lt-item{ display:flex; align-items:flex-start; gap:12px; }
.lt-icon{ width:46px; height:46px; flex:none; border-radius:50%; background:#eef3fa; color:var(--brand-navy); display:grid; place-items:center; font-size:20px; }
.lt-item b{ display:block; font-size:15px; color:var(--brand-navy); margin-bottom:3px; }
.lt-item p{ font-size:13.5px; color:#66748a; line-height:1.45; margin:0; }

/* ===================== 4) BOTTOM CTA ===================== */
.leads-cta{ padding-top:34px; }
.leads-cta__inner{ display:flex; align-items:center; gap:18px; background:var(--brand-navy); color:#fff; padding:22px 28px; border-radius:14px; margin:6px auto 56px; }
.leads-cta__icon{ font-size:26px; color:var(--brand-gold); flex:none; }
.leads-cta__text b{ display:block; font-size:17px; color:#fff; }
.leads-cta__text p{ margin:0; font-size:13.5px; color:#c9d6e6; }
.leads-cta__contact{ display:flex; flex-wrap:wrap; gap:4px 16px; margin-top:8px; font-size:13px; color:#e8eef7; }
.leads-cta__contact a{ color:#e8eef7; text-decoration:none; }
.leads-cta__contact a:hover{ color:var(--brand-gold); }
.leads-cta__inner .lh-btn{ margin-left:auto; flex:none; }
@media (max-width:767px){ .leads-cta__contact{ justify-content:center; } }

/* ===================== RESPONSIVE ===================== */
@media (min-width:1160px){ .lead-fact{ flex:1 1 0; min-width:0; } }
.lf-toggle{ display:none; }
@media (max-width:991px){
  .leads-wrap{ grid-template-columns:1fr; }
  .leads-trust__grid{ grid-template-columns:1fr 1fr; }
  .lf{ display:none; position:static; }
  .lf.lf--open{ display:block; }
  .lf-toggle{
    display:flex; align-items:center; justify-content:center; gap:8px;
    width:100%; margin-bottom:14px; padding:11px; border-radius:8px;
    border:1.5px solid var(--brand-navy); background:#fff; color:var(--brand-navy);
    font-size:14px; font-weight:700; cursor:pointer;
  }
}
@media (max-width:767px){
  .leads-cta__inner{ flex-direction:column; text-align:center; padding:24px 20px; }
  .leads-cta__inner .lh-btn{ margin-left:0; width:100%; }
}
@media (max-width:560px){
  .lh__title{ font-size:30px; }
  .lh__ctas{ flex-direction:column; align-items:stretch; }
  .lh-trust{ gap:18px; }
  .lead-row{ grid-template-columns:1fr; gap:12px; align-items:stretch; }
  .lead-row__media{ width:100%; height:150px; }
  .lead-facts{ display:grid; grid-template-columns:1fr 1fr; gap:8px 14px; }
  .lead-fact{ max-width:none; }
  .lead-row__aside{ flex-direction:row; align-items:center; justify-content:space-between; gap:12px; padding:10px 0 0; border-left:none; border-top:1px solid #edf1f7; align-self:auto; }
  .lead-row__btn{ margin-top:0; }
  .leads-trust__grid{ grid-template-columns:1fr; }
}

/* ===================== 5) LEAD DETAIL + OFFER FORM (kho lead mới) ===================== */
.lead-row.is-paged{ display:none; }
.lead-detail{ max-width:920px; }
.lead-body table.lead-spec{ width:100%; border-collapse:collapse; margin:1rem 0; }
.lead-body table.lead-spec th, .lead-body table.lead-spec td{ text-align:left; padding:.5rem .7rem; border-bottom:1px solid #e3e9f2; font-size:.95rem; }
.lead-body .lead-cites{ background:#fff7e0; border-left:4px solid var(--brand-gold); padding:.7rem 1rem; border-radius:6px; }
.lead-body .lead-note{ background:#f2f6fb; padding:.8rem 1rem; border-radius:8px; }
.lead-standing{ display:flex; gap:8px; align-items:center; color:#1d8a4a; background:#e6f6ec; padding:.6rem 1rem; border-radius:8px; font-size:.92rem; margin:1rem 0; }
.lead-gallery{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; margin:1rem 0 1.6rem; }
.lead-gallery img{ width:100%; height:130px; object-fit:cover; border-radius:10px; display:block; }
.lh-btn--wa{ background:#25d366; color:#fff; margin-left:6px; }
.lh-btn--wa:hover{ filter:brightness(.95); color:#fff; }
.offer__card{ max-width:920px; background:#fff; border:1px solid #e3e9f2; border-radius:14px; padding:24px; box-shadow:0 6px 18px rgba(20,58,99,.06); }
.offer__head{ display:flex; gap:14px; align-items:flex-start; margin-bottom:16px; }
.offer__head i{ font-size:28px; color:var(--brand-navy); }
.offer__head h2{ margin:0 0 4px; font-size:1.35rem; }
.offer__head p{ margin:0; color:#66748a; font-size:.95rem; }
.offer form.intake{ max-width:none; }
.hp{ position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }
.form-status{ margin:0; font-size:.95rem; }
.form-status.is-ok{ color:#1d8a4a; font-weight:600; }
.form-status.is-err{ color:#b42318; }
.cf-turnstile{ min-height:65px; }
@media (max-width:767px){ .lh-btn--wa{ margin:8px 0 0; } .offer__card{ padding:18px; } }
.leads-pager{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.leads-pager a, .leads-pager span{ min-width:36px; text-align:center; padding:7px 10px; border-radius:8px; border:1px solid #d7dfeb; font-size:13.5px; color:var(--brand-navy); text-decoration:none; background:#fff; }
.leads-pager a:hover{ background:#f2f6fb; }
.leads-pager .is-current{ background:var(--brand-navy); color:#fff; border-color:var(--brand-navy); font-weight:700; }
.lead-detail .article-hero-img{ width:100%; max-height:500px; object-fit:cover; }

/* ===================== 6) FORM THEO NHU CẦU + BỘ CHỌN ===================== */
.form-next{ font-size:.88rem; color:#4b5a70; background:#f2f6fb; border-radius:8px; padding:.7rem .9rem; }
.chooser__opts{ border:0; padding:0; margin:0 0 1rem; display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:6px 14px; }
.chooser__opts legend{ font-weight:700; color:var(--brand-navy); margin-bottom:.5rem; }
.chooser__opt{ display:flex; gap:8px; align-items:center; font-size:.95rem; padding:.45rem .6rem; border:1px solid #e3e9f2; border-radius:8px; cursor:pointer; }
.chooser__opt:has(input:checked){ border-color:var(--brand-navy); background:#f2f6fb; font-weight:600; }