/* ==========================================================================
   BIZCA — lớp hệ thiết kế mới, nạp SAU toàn bộ CSS cũ.
   Sinh ngày 27/07/2026.

   Vì sao không viết lại markup:
   323 trang HTML và 80 file mu-plugins đang dùng tên class cũ (.btn, .card,
   .navbar...). Bộ component .bz-* viết trước đó khớp 0/323 trang nên vô hiệu.
   File này thay vào đó nối lại BIẾN của ba không gian đang chạy song song
   là --primary, --bb- và --bizca- vào bộ token. Khoảng 180 chỗ tham chiếu
   biến trong CSS cũ vì thế đổi theo mà không phải sửa một dòng markup nào.

   Đừng viết dấu sao rồi gạch chéo trong chú thích để chỉ tiền tố biến:
   chuỗi đó đóng chú thích sớm và nuốt luôn khối :root ngay bên dưới.

   Bắt buộc nạp sau bizca-tokens.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Nối biến cũ vào token
   -------------------------------------------------------------------------- */

:root {
  /* Không gian bizca.css — hệ marketing */
  --primary: var(--bz-forest-800);
  --primary-light: var(--bz-forest-600);
  --primary-dark: var(--bz-forest-900);
  --accent: var(--bz-green-500);
  --accent-light: var(--bz-green-400);
  --accent-dark: var(--bz-green-700);

  /* Brief đã chốt: bỏ nền xám lạnh #F5F7FA, chuyển tông giấy ấm. */
  --bg: var(--bz-ivory-100);
  --bg-dark: var(--bz-ivory-300);
  --white: var(--bz-bg-surface);
  --text: var(--bz-text-primary);
  --text-muted: var(--bz-text-secondary);
  --border: var(--bz-ivory-300);

  --success: var(--bz-success-500);
  --warning: var(--bz-warning-500);
  --danger: var(--bz-danger-500);
  --info: var(--bz-info-500);

  /* Đổ bóng ngả xanh rừng thay vì đen trung tính — hợp nền giấy ấm hơn. */
  --shadow-sm: 0 1px 2px rgba(15, 43, 36, 0.05);
  --shadow: 0 4px 14px rgba(15, 43, 36, 0.07);
  --shadow-md: 0 10px 28px rgba(15, 43, 36, 0.09);
  --shadow-lg: 0 18px 46px rgba(15, 43, 36, 0.13);

  /* Không gian bebuddy-style.css — khu cộng đồng BuddyPress */
  --bb-navy: var(--bz-forest-800);
  --bb-navy-dark: var(--bz-forest-900);
  --bb-gold: var(--bz-green-500);
  --bb-gold-l: var(--bz-green-400);
  --bb-gold-d: var(--bz-green-700);
  --bb-ink: var(--bz-text-primary);
  --bb-line: var(--bz-ivory-300);
  --bb-muted: var(--bz-text-secondary);
  --bb-soft: var(--bz-ivory-50);

  /* Bảng lime sót lại từ lần đổi thương hiệu dở dang. Kéo về xanh thương hiệu. */
  --bb-green: var(--bz-green-600);
  --bb-green-l: var(--bz-green-400);

  /* Không gian brand-buddyx.css — lớp đè lên theme cha BuddyX */
  --bizca-navy: var(--bz-forest-800);
  --bizca-navy-light: var(--bz-forest-600);
  --bizca-navy-dark: var(--bz-forest-900);
  --bizca-gold: var(--bz-green-500);
  --bizca-gold-light: var(--bz-green-400);
  --bizca-gold-dark: var(--bz-green-700);
  --bizca-bg: var(--bz-ivory-100);
  --bizca-text: var(--bz-text-primary);
}

/* --------------------------------------------------------------------------
   2. Chữ tiếng Việt
   Dấu thanh nằm trên và dưới cùng một chữ (ề, ộ, ữ) nên dòng phải thưa hơn
   mặc định, nếu không dấu của dòng dưới chạm chân dòng trên.
   -------------------------------------------------------------------------- */

body {
  background: var(--bg);
  color: var(--text);
  line-height: 1.75;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3 {
  line-height: 1.3;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

p, li {
  line-height: 1.75;
}

p {
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   3. Bề mặt — chỗ brief nói "ấm, gần gũi", thể hiện qua bề mặt và khoảng thở
   -------------------------------------------------------------------------- */

.card,
.bizca-card,
.deal-card,
.testimonial {
  background: var(--bz-bg-surface);
  border: 1px solid var(--bz-ivory-300);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.card:hover,
.bizca-card:hover,
.deal-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--bz-forest-200);
  transform: translateY(-2px);
}

/* Vùng nền phụ: dùng giấy chìm thay cho xám xanh lạnh. */
.bg-light,
.section-alt,
.bb-soft {
  background: var(--bz-ivory-200);
}

/* --------------------------------------------------------------------------
   4. Nút
   -------------------------------------------------------------------------- */

.btn {
  border-radius: var(--radius);
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease,
    transform 0.18s ease;
}

/* Tên class còn chữ "gold" từ thương hiệu cũ nhưng giá trị đã là xanh
   thương hiệu. Đổi tên class phải sửa 182 chỗ trong markup, để lần sau. */
.btn-gold {
  background: var(--bz-green-500);
  color: var(--bz-forest-800);
}

.btn-gold:hover {
  background: var(--bz-green-400);
  color: var(--bz-forest-900);
}

.btn-navy {
  background: var(--bz-forest-800);
  color: var(--bz-base-white);
}

.btn-navy:hover {
  background: var(--bz-forest-600);
}

.btn-ghost {
  color: var(--bz-forest-800);
}

.btn-ghost:hover {
  background: var(--bz-forest-100);
}

/* --------------------------------------------------------------------------
   5. Bàn phím và trợ năng
   Kiểm kê 27/07/2026: chỉ .btn và .bb-pill có focus-visible, phần còn lại
   thừa hưởng outline mặc định của trình duyệt và bị nhiều chỗ đặt outline:none.
   -------------------------------------------------------------------------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--bz-green-500);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.bz-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  padding: 12px 20px;
  background: var(--bz-forest-800);
  color: var(--bz-base-white);
  font-weight: 600;
  border-radius: 0 0 var(--radius) 0;
}

.bz-skip-link:focus {
  left: 0;
}

/* Tôn trọng người tắt hiệu ứng chuyển động. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   6. Biểu mẫu
   -------------------------------------------------------------------------- */

input[type='text'],
input[type='email'],
input[type='tel'],
input[type='password'],
input[type='search'],
input[type='number'],
select,
textarea {
  background: var(--bz-bg-surface);
  border: 1px solid var(--bz-ivory-400);
  border-radius: var(--radius);
  color: var(--bz-text-primary);
  line-height: 1.6;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--bz-green-500);
}

::placeholder {
  color: var(--bz-text-muted);
  opacity: 1;
}

/* --------------------------------------------------------------------------
   7. Chữ nhấn trên nền sáng
   Luật đã chốt: #00BF6F chỉ dùng làm nền. Trên nền trắng nó đạt 2.2:1, trượt
   AA cho cả cỡ chữ lớn (cần 3:1). Chữ nhấn trên nền sáng phải là green/700
   #017A49 (5.4:1).

   Các chỗ nằm trên nền tối — .footer-brand h3, .footer h6, .footer ul a:hover
   — giữ nguyên green/500, đó chính là token text/accent-on-inverse.
   -------------------------------------------------------------------------- */

a:hover,
.navbar-menu a:hover,
.navbar-menu a.active,
.hero h1 .gold,
.bb-hero h1 .g,
.hero-trust .item i,
.stat-value,
.text-gold {
  color: var(--bz-text-accent);
}

.hub-card .hub-list li::before {
  color: var(--bz-text-accent);
}

/* --------------------------------------------------------------------------
   8. Cụm avatar xếp chồng

   Bản gốc đặt vòng tròn 42px chồng lên nhau -12px. Kiểu xếp này chỉ đúng khi
   trong vòng tròn là ẢNH: mất 12px rìa không sao. Ở đây trong vòng tròn là
   CHỮ ("DN", "NH", "M&A", "B2B") nên vòng sau che mất chữ của vòng trước,
   đọc ra "DN NH M&/ B2B".

   Chừa đủ chỗ cho nhãn dài nhất: "M&A" ở 12px đậm rộng khoảng 26px, vòng
   tròn 44px, nên mỗi bên chỉ được chồng tối đa 9px. Lấy 6px cho chắc.
   -------------------------------------------------------------------------- */

.bb-ava span {
  width: 44px;
  height: 44px;
  margin-left: -6px;
  font-size: 12px;
  letter-spacing: -0.02em;
  flex: 0 0 auto;
  background: linear-gradient(135deg, var(--bz-forest-700), var(--bz-forest-900));
  color: var(--bz-text-on-inverse);
  border: 3px solid var(--bz-bg-surface);
}

/* Vòng đầu không chồng lên gì cả. */
.bb-ava span:first-child {
  margin-left: 0;
}

/* Vòng sau nằm trên vòng trước, nhưng vì đã chừa đủ chỗ nên không che chữ. */
.bb-ava span:nth-child(1) { z-index: 4; }
.bb-ava span:nth-child(2) { z-index: 3; }
.bb-ava span:nth-child(3) { z-index: 2; }
.bb-ava span:nth-child(4) { z-index: 1; }

/* --------------------------------------------------------------------------
   9. Bảng và viền chung
   -------------------------------------------------------------------------- */

hr,
.divider {
  border-color: var(--bz-ivory-300);
}

table th {
  background: var(--bz-ivory-200);
  color: var(--bz-text-brand);
}

table td,
table th {
  border-color: var(--bz-ivory-300);
}