/* Bộ nhận diện chung với habichthuy.com: logo chữ ký và chân trang.
   Chân trang chép từ custom.css của habichthuy.com (bản làm lại 13/09/2026),
   đổi tiền tố thành hbt- để không đụng CSS riêng của từng trang, và tự đặt lại
   cỡ chữ, lề, gạch chân vì trang challenge có trang dùng Tailwind có trang không.
   Sửa chân trang thì sửa ở đây, mọi trang challenge đổi theo. */

/* Như habichthuy.com: chữ đậm nhất là 600. Các trang chỉ tải Be Vietnam Pro tới 600,
   chặn trình duyệt tự tô đậm giả khi trang xin 700, 800. */
html { font-synthesis-weight: none; }

.hbt-logo { display: inline-flex; align-items: center; line-height: 0; flex-shrink: 0; }
.hbt-logo img { display: block; height: 36px; width: auto; }
/* Chữ ký nhỏ ở đầu thẻ, cho trang thanh toán, trang cảm ơn, trang chờ */
img.hbt-logo-the { display: block; height: 34px; width: auto; max-width: none; margin: 0 auto 18px; }

.hbt-ct {
  /* Nhiều trang có sẵn luật cho thẻ footer (nền, viền trên, lề, cỡ chữ), đặt lại hết ở đây. */
  display: block; width: auto; max-width: none; margin: 0; border: 0; box-shadow: none;
  position: relative; overflow: hidden; padding: 88px 0 0; text-align: left;
  color: rgba(255,255,255,.78);
  font-family: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 16px; line-height: 1.7; font-weight: 400; letter-spacing: 0;
  background: radial-gradient(700px 380px at 90% 0%, rgba(254,232,109,.10), transparent 60%),
              radial-gradient(600px 400px at 0% 100%, rgba(185,208,239,.10), transparent 60%), #151414;
}
.hbt-ct::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.07) 1.2px, transparent 1.4px); background-size: 18px 18px;
  -webkit-mask-image: radial-gradient(ellipse 50% 70% at 85% 10%, #000 10%, transparent 70%);
  mask-image: radial-gradient(ellipse 50% 70% at 85% 10%, #000 10%, transparent 70%);
}
.hbt-ct *, .hbt-ct *::before, .hbt-ct *::after { box-sizing: border-box; }
.hbt-ct p { margin: 0; }
.hbt-ct a { text-decoration: none; font-family: inherit; margin: 0; }
.hbt-ct span { margin: 0; color: inherit; font-size: inherit; }
.hbt-ct-khung { position: relative; z-index: 1; max-width: 1140px; margin: 0 auto; padding: 0 20px; }
.hbt-ct-tren { display: grid; grid-template-columns: 1.5fr .75fr 1fr; gap: 56px; padding-bottom: 64px; }
.hbt-ct-logo { display: inline-block; line-height: 0; }
.hbt-ct-logo img { display: block; height: 46px; width: auto; opacity: .95; margin: 0 0 22px -4px; }
.hbt-ct-cau { font-size: 22px; line-height: 1.55; font-weight: 500; color: #fff; max-width: 520px; }
.hbt-ct-cau em { font-family: 'Lora', Georgia, serif; font-style: italic; font-weight: 500; color: #fee86d; }
.hbt-ct-cot { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding-top: 8px; }
.hbt-ct .hbt-ct-tieude { font-size: 12px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: rgba(255,255,255,.45); margin-bottom: 6px; }
.hbt-ct-cot a { font-size: 15.5px; color: rgba(255,255,255,.82); transition: color .2s; }
.hbt-ct-cot a:hover { color: #fee86d; }
.hbt-ct-lienhe { display: inline-flex; align-items: center; gap: 12px; }
.hbt-ct-lienhe svg { flex-shrink: 0; width: 36px; height: 36px; padding: 9px; border-radius: 12px; background: rgba(255,255,255,.08); color: #fee86d; }
.hbt-ct .hbt-ct-gio { font-size: 14px; color: rgba(255,255,255,.45); margin-top: 4px; }
.hbt-ct-duoi { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 24px; padding: 22px 0 26px; border-top: 1px solid rgba(255,255,255,.08); }
.hbt-ct-duoi p { font-size: 14px; color: rgba(255,255,255,.55); }
.hbt-ct-cs { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.hbt-ct-cs a { font-size: 14px; color: rgba(255,255,255,.6); transition: color .2s; }
.hbt-ct-cs a:hover { color: #fee86d; }
.hbt-ct .hbt-ct-luu-y { font-size: 13.5px; line-height: 1.65; color: rgba(255,255,255,.42); padding-bottom: 26px; max-width: 720px; }

/* Bản gọn cho trang chỉ có một form: chỉ giữ dải dưới, không kéo người đọc đi nơi khác. */
.hbt-ct--gon { padding-top: 0; }
.hbt-ct--gon .hbt-ct-duoi { border-top: 0; padding: 26px 0; }
.hbt-ct--gon .hbt-ct-logo img { height: 34px; margin: 0; }

@media (max-width: 991px) {
  .hbt-ct { padding-top: 64px; }
  .hbt-ct--gon { padding-top: 0; }
  .hbt-ct-tren { grid-template-columns: 1fr 1fr; gap: 40px 32px; padding-bottom: 48px; }
  .hbt-ct-gioi-thieu { grid-column: 1 / -1; }
}
@media (max-width: 576px) {
  .hbt-ct-tren { grid-template-columns: 1fr; }
  .hbt-ct-cau { font-size: 19px; }
  .hbt-ct-duoi { flex-direction: column; align-items: flex-start; }
  .hbt-logo img { height: 32px; }
}
/* Trang có thanh nút dính ở đáy màn điện thoại: chừa chỗ để thanh không che chữ cuối. */
@media (max-width: 767px) {
  .hbt-ct--chua-day { padding-bottom: 84px; }
}