/* ============================================================================
   MÀU DẢI NGÀNH ĂN VÀO NÚT BOOTSTRAP — KB17 ③
   ============================================================================

   Chủ dự án chốt đường A ngày 19/09/2026 cho câu hỏi *"cho nối `--bs-primary`
   ăn theo `--kt-mau-chinh` không?"*.

   ----------------------------------------------------------------------------
   🔴 VÌ SAO PHẢI LÀ CSS, KHÔNG ĐẶT BIẾN Ở JS LÀ XONG
   ----------------------------------------------------------------------------
   Đo `khung-1.css` (bản Hope UI đã biên dịch):

       .btn-primary { --bs-btn-bg: #3a57e8; --bs-btn-border-color: #3a57e8; … }

   Mã màu GHI CỨNG trong từng lớp nút, không đọc `--bs-primary`. Nên đặt
   `--bs-primary` ở tầng trên **không đổi một cái nút nào** — đó là lý do bản đầu
   của bản vá này vô dụng, và chỉ lộ ra khi đo tận nơi.

   Ngược lại, `.text-primary` · `.bg-primary` · `.border-primary` dựng bằng
   `rgba(var(--bs-primary-rgb), …)` nên chúng đi theo biến, và biến đó sinh ở
   `token.ts` (`bienCssCuaTrang`) vì CSS không tách được `#rrggbb` thành ba số.

   ----------------------------------------------------------------------------
   🔴 NẠP CUỐI CÙNG, VÀ ĐỘ ƯU TIÊN BẰNG NHAU LÀ ĐỦ
   ----------------------------------------------------------------------------
   `.btn-primary` ở đây đấu với `.btn-primary` của Hope UI — cùng độ ưu tiên,
   nên tệp nạp SAU thắng. Không dùng `!important`: nó sẽ chặn luôn ô «Màu nút» ở
   cột phải (`css-khoi.ts` sinh luật `.btn` cho từng khối), tức chữa một chỗ và
   phá một chỗ khác.

   🔴 CHƯA CHỌN DẢI THÌ KHÔNG ĐỔI GÌ. Mọi `var()` đều có giá trị lùi đúng bằng
   màu Hope UI gốc (`#3a57e8` · `#8A92A6`), nên trang chưa chọn ngành vẽ y hệt
   hôm qua. Đây là điều kiện để bản vá này không phải một đợt đổi giao diện
   toàn kho.

   🔴 `color-mix` cho sắc độ rê chuột / bấm giữ: Bootstrap biên dịch sẵn ba sắc
   độ đậm dần, mà ta chỉ có một mã màu. Trộn với đen theo đúng thứ tự đậm dần
   giữ lại phản hồi thị giác khi bấm. `page-render.css` đã dùng `color-mix` từ
   trước nên đây không phải phép mới trong dự án.
   ========================================================================== */

.btn-primary {
  --bs-btn-bg: var(--kt-mau-chinh, #3a57e8);
  --bs-btn-border-color: var(--kt-mau-chinh, #3a57e8);
  --bs-btn-hover-bg: color-mix(in srgb, var(--kt-mau-chinh, #3a57e8) 86%, #000);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--kt-mau-chinh, #3a57e8) 80%, #000);
  --bs-btn-active-bg: color-mix(in srgb, var(--kt-mau-chinh, #3a57e8) 78%, #000);
  --bs-btn-active-border-color: color-mix(in srgb, var(--kt-mau-chinh, #3a57e8) 72%, #000);
  --bs-btn-disabled-bg: var(--kt-mau-chinh, #3a57e8);
  --bs-btn-disabled-border-color: var(--kt-mau-chinh, #3a57e8);
}

.btn-outline-primary {
  --bs-btn-color: var(--kt-mau-chinh, #3a57e8);
  --bs-btn-border-color: var(--kt-mau-chinh, #3a57e8);
  --bs-btn-hover-bg: var(--kt-mau-chinh, #3a57e8);
  --bs-btn-hover-border-color: var(--kt-mau-chinh, #3a57e8);
  --bs-btn-active-bg: var(--kt-mau-chinh, #3a57e8);
  --bs-btn-active-border-color: var(--kt-mau-chinh, #3a57e8);
  --bs-btn-disabled-color: var(--kt-mau-chinh, #3a57e8);
  --bs-btn-disabled-border-color: var(--kt-mau-chinh, #3a57e8);
}

.btn-secondary {
  --bs-btn-bg: var(--kt-mau-phu, #8a92a6);
  --bs-btn-border-color: var(--kt-mau-phu, #8a92a6);
  --bs-btn-hover-bg: color-mix(in srgb, var(--kt-mau-phu, #8a92a6) 86%, #000);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--kt-mau-phu, #8a92a6) 80%, #000);
  --bs-btn-active-bg: color-mix(in srgb, var(--kt-mau-phu, #8a92a6) 78%, #000);
  --bs-btn-active-border-color: color-mix(in srgb, var(--kt-mau-phu, #8a92a6) 72%, #000);
  --bs-btn-disabled-bg: var(--kt-mau-phu, #8a92a6);
  --bs-btn-disabled-border-color: var(--kt-mau-phu, #8a92a6);
}

.btn-outline-secondary {
  --bs-btn-color: var(--kt-mau-phu, #8a92a6);
  --bs-btn-border-color: var(--kt-mau-phu, #8a92a6);
  --bs-btn-hover-bg: var(--kt-mau-phu, #8a92a6);
  --bs-btn-hover-border-color: var(--kt-mau-phu, #8a92a6);
  --bs-btn-active-bg: var(--kt-mau-phu, #8a92a6);
  --bs-btn-active-border-color: var(--kt-mau-phu, #8a92a6);
}