/* Token dùng chung của TinhTienSo — màu thương hiệu và vài hằng số bố cục.
 *
 * Trước đây ba stylesheet mỗi file khai báo một bộ token riêng cho cùng những
 * màu này (--login-brand-red, --tts-red, --public-red...), và bên cạnh đó còn
 * viết thẳng mã hex ở 166 chỗ. Đỏ, xanh, vàng thì cả ba file trùng giá trị,
 * riêng màu mực thì mỗi nơi một sắc: #22356b, #23334e, #24334e.
 *
 * File này phải được nạp TRƯỚC login.css, navigation.css và public-pages.css
 * (xem views/index.ejs) vì ba file đó định nghĩa token cục bộ dựa trên đây.
 */
:root {
  /* --- Màu thương hiệu --- */
  --tts-do: #b91e23;
  --tts-do-dam: #a11b24;   /* trạng thái hover của nút đỏ */
  --tts-vang: #f8d114;
  --tts-xanh: #146db1;
  --tts-xanh-diu: #365f8c; /* xanh dịu cho liên kết và nút phụ ở trang công khai */
  --tts-navy: #22356b;     /* xanh đậm của logo, dùng cho nền tối */

  /* --- Chữ --- */
  --tts-muc: #23334e;      /* tiêu đề, chữ đậm */
  --tts-muc-nhat: #64748b; /* chữ phụ, mô tả */

  /* --- Nền, viền --- */
  --tts-trang: #ffffff;
  --tts-nen: #f4f6fa;
  --tts-vien: #e4e9f0;

  /* --- Bố cục --- */
  /* Widget chat Jivosite là position:fixed neo góc dưới trái với z-index
     2147483647 (lớn nhất có thể) nên không xếp lớp đè lại được; vùng nó chiếm
     là 85x85px. Cả sidebar quản trị lẫn footer trang công khai đều chừa chỗ
     theo biến này. Đổi vị trí widget sang phải trong bảng điều khiển Jivosite
     thì hạ về 20px là lấy lại được khoảng trống. */
  --tts-cho-widget-chat: 92px;
}

/* sweetalert2 dựng hộp thoại ngoài cây React nên không nhận class của app.
   Trước đây màu nút truyền qua confirmButtonColor bằng mã hex viết thẳng trong
   JS — tách ra đây để nút theo đúng bảng màu này. */
.swal2-styled.swal2-confirm {
  background-color: var(--tts-xanh);
}

.swal2-styled.swal2-confirm:focus {
  box-shadow: 0 0 0 3px rgba(20, 109, 177, 0.4);
}