/* ==========================================================================
   Trang con — giới thiệu, liên hệ, chính sách
   ========================================================================== */

/* ---------- Giá trị (giới thiệu) ---------- */
.bb-values__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.bb-value {
  padding: 34px 28px; border-radius: var(--bb-radius-lg); background: #fff;
  box-shadow: var(--bb-shadow); border-top: 5px solid var(--bb-red);
}
.bb-value:nth-child(2) { border-top-color: var(--bb-purple); }
.bb-value:nth-child(3) { border-top-color: var(--bb-gold); }
.bb-value__icon {
  display: grid; place-items: center; width: 58px; height: 58px; margin-bottom: 18px;
  border-radius: 18px; background: var(--bb-dough); color: var(--bb-red);
}
.bb-value__icon svg { width: 30px; height: 30px; }
.bb-value h3 { font-size: 22px; }
.bb-value p { margin-top: 10px; color: var(--bb-muted); }

/* ---------- Liên hệ ---------- */
.bb-contact__grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: 40px; align-items: start; }
.bb-contact__info { display: grid; gap: 16px; }
.bb-contact__card {
  display: flex; gap: 16px; align-items: flex-start; padding: 22px;
  border-radius: var(--bb-radius); background: #fff; box-shadow: var(--bb-shadow);
}
.bb-contact__card svg {
  flex: none; width: 48px; height: 48px; padding: 12px; border-radius: 14px;
  background: var(--bb-dough); color: var(--bb-red);
}
.bb-contact__card h3 { font-size: 17px; font-family: var(--bb-font-body); }
.bb-contact__card p { margin-top: 2px; color: var(--bb-muted); font-size: 15px; }
.bb-contact__card a { color: var(--bb-ink); font-weight: 700; }
.bb-contact__card a:hover { color: var(--bb-red); }

.bb-form {
  padding: 36px; border-radius: var(--bb-radius-lg); background: #fff; box-shadow: var(--bb-shadow-lg);
}
.bb-form h2 { font-size: 28px; }
.bb-form > p { margin-top: 6px; color: var(--bb-muted); }
.bb-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 24px; }
.bb-field { display: grid; gap: 6px; }
.bb-field--full { grid-column: 1 / -1; }
.bb-field label { font-size: 14px; font-weight: 600; }
.bb-field input,
.bb-field select,
.bb-field textarea {
  width: 100%; min-height: 50px; padding: 12px 16px;
  border: 1.5px solid var(--bb-line); border-radius: 14px; background: var(--bb-cream);
  font-size: 15px; transition: border-color .2s ease, background-color .2s ease;
}
.bb-field textarea { min-height: 120px; resize: vertical; }
.bb-field input:focus,
.bb-field select:focus,
.bb-field textarea:focus { outline: 0; border-color: var(--bb-red); background: #fff; }
.bb-form .bb-btn { margin-top: 22px; width: 100%; }
.bb-form__note { margin-top: 12px; font-size: 13px; color: var(--bb-muted); text-align: center; }
.bb-form__alert { margin-top: 18px; padding: 14px 18px; border-radius: 14px; font-weight: 600; }
.bb-form__alert--ok { background: #e7f3df; color: #33591c; }
.bb-form__alert--err { background: #fbe3df; color: #8f2a1f; }

.bb-map { margin-top: 48px; border-radius: var(--bb-radius-lg); overflow: hidden; box-shadow: var(--bb-shadow); }
.bb-map iframe { display: block; width: 100%; height: 420px; border: 0; }

/* ---------- Trang văn bản (chính sách, điều khoản) ---------- */
.bb-doc { padding-block: 64px var(--bb-section-y); }
.bb-doc__box {
  max-width: 860px; margin-inline: auto; padding: 48px 56px;
  border-radius: var(--bb-radius-lg); background: #fff; box-shadow: var(--bb-shadow);
}
.bb-doc__updated { margin-bottom: 24px; font-size: 14px; color: var(--bb-muted); }

/* ---------- 404 ---------- */
.bb-404 { padding-block: 100px; text-align: center; }
.bb-404 b { display: block; font-family: var(--bb-font-head); font-size: 120px; line-height: 1; color: var(--bb-red); }
.bb-404 h1 { margin-top: 12px; font-size: 34px; }
.bb-404 p { margin: 12px auto 28px; max-width: 520px; color: var(--bb-muted); }
.bb-search { display: flex; gap: 10px; max-width: 480px; margin: 0 auto 28px; }
.bb-search input {
  flex: 1; min-height: 50px; padding: 0 18px; border: 1.5px solid var(--bb-line);
  border-radius: 999px; background: #fff;
}