/* ==========================================================================
   bao-gia.css — Biểu mẫu nhận yêu cầu báo giá
   ========================================================================== */

.bao-gia {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 28px;
  margin-top: 36px;
  padding: 28px;
  background: var(--c-surface-cream);
  border: 1px solid var(--c-line-gold);
  border-radius: var(--radius-lg);
  scroll-margin-top: calc(var(--header-h) + 20px);
}

.bao-gia__tieu-de {
  margin: 0 0 6px;
  font-size: var(--fs-h2);
  font-weight: 800;
  color: var(--c-green-800);
}

.bao-gia__mo-ta {
  margin: 0 0 20px;
  color: var(--c-body);
  font-size: var(--fs-body-sm);
}

.bao-gia__hang {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.bao-gia__o {
  display: block;
  margin-bottom: 14px;
}

.bao-gia__nhan {
  display: block;
  margin-bottom: 6px;
  font-size: var(--fs-meta);
  font-weight: 600;
  color: var(--c-ink);
}

.bao-gia__nhan abbr {
  color: var(--c-red);
  text-decoration: none;
}

.bao-gia__o input,
.bao-gia__o textarea {
  width: 100%;
  padding: 11px 14px;
  font: inherit;
  font-size: var(--fs-body-sm);
  color: var(--c-ink);
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-sm);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.bao-gia__o textarea {
  resize: vertical;
  min-height: 84px;
}

.bao-gia__o input:focus,
.bao-gia__o textarea:focus {
  outline: none;
  border-color: var(--c-green-600);
  box-shadow: 0 0 0 3px rgba(47, 125, 59, 0.16);
}

.bao-gia__o input[readonly] {
  background: var(--c-surface-soft);
  color: var(--c-muted);
}

/* Ô đánh dấu sai: viền đỏ để khách thấy ngay phải sửa chỗ nào. */
.bao-gia__o.co-loi input,
.bao-gia__o.co-loi textarea {
  border-color: var(--c-red);
  box-shadow: 0 0 0 3px rgba(224, 38, 28, 0.12);
}

.bao-gia__gui {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 4px;
}

.bao-gia__nhan-tin {
  margin: 0;
  font-size: var(--fs-body-sm);
  font-weight: 600;
}

.bao-gia__nhan-tin.la-thanh-cong {
  color: var(--c-green-700);
}

.bao-gia__nhan-tin.la-loi {
  color: var(--c-red);
}

/* Cột bên: liên hệ trực tiếp cho khách không muốn điền biểu mẫu. */
.bao-gia__ben {
  align-self: start;
  padding: 20px;
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-md);
}

.bao-gia__ben-tieu-de {
  margin: 0 0 14px;
  font-weight: 700;
  color: var(--c-heading);
}

.bao-gia__ben .nut {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 46px;
  margin-bottom: 10px;
  padding: 0 16px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: var(--fs-body-sm);
  text-decoration: none;
}

.bao-gia__ben .nut--goi {
  background: var(--c-green-700);
  color: var(--c-on-dark);
}

.bao-gia__ben .nut--goi:hover,
.bao-gia__ben .nut--goi:focus-visible {
  background: var(--c-green-900);
}

.bao-gia__ben .nut--zalo {
  background: var(--c-bg);
  color: var(--c-green-800);
  border: 1px solid var(--c-green-600);
}

.bao-gia__ben .nut--zalo:hover,
.bao-gia__ben .nut--zalo:focus-visible {
  background: var(--c-surface-green);
}

.bao-gia__ghi-chu {
  margin: 12px 0 0;
  font-size: var(--fs-meta);
  color: var(--c-muted);
  line-height: 1.55;
}

/* Ô bẫy bot: giấu khỏi mắt người nhưng vẫn nằm trong luồng của trình duyệt. */
.an-voi-nguoi-doc {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 860px) {
  .bao-gia {
    grid-template-columns: minmax(0, 1fr);
    padding: 22px 18px;
  }

  .bao-gia__hang {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
}