/* BeKind Design System 1.0 – Zalo Blue (anh duyệt 22/10/2026). Bộ token màu tập trung, tên token theo bản anh gửi.
   GĐ3 (22/10/2026): khai báo ở :root cho toàn Happy (nạp trong layouts/app trước các CSS khác); giữ .bk-ds để Sơ đồ GĐ1 không đổi.
   CSS các màn có giá trị dự phòng var(--bk-x,#mã) nên trang không nạp file này vẫn đúng màu.
   Thêm màu mới: cập nhật file này + documents/BEKIND-DESIGN-SYSTEM-1.0-ZALO-BLUE.md. */
:root,.bk-ds {
  /* BeKind Design System 1.0 */
  --bk-primary: #0068FF;
  --bk-primary-hover: #0056D6;
  --bk-primary-active: #0047B3;
  --bk-primary-soft: #EEF5FF;
  --bk-primary-light: #DCEBFF;

  --bk-page: #F7FAFF;
  --bk-surface: #FFFFFF;
  --bk-surface-muted: #F8FAFC;
  --bk-border: #E2E8F0;
  --bk-text: #243247;
  --bk-text-secondary: #667085;
  --bk-text-disabled: #7C8797;
  --bk-overlay: rgb(15 23 42 / 40%);

  /* Success */
  --bk-success: #087A46;
  --bk-success-bg: #E9F8F0;
  --bk-success-border: #B6E7CE;

  /* Info */
  --bk-info: #0057D9;
  --bk-info-bg: #EAF3FF;
  --bk-info-border: #BBD7FF;

  /* Warning */
  --bk-warning: #945500;
  --bk-warning-bg: #FFF4DF;
  --bk-warning-border: #F4D38A;

  /* Danger */
  --bk-danger: #B42318;
  --bk-danger-bg: #FFF0EF;
  --bk-danger-border: #F5BCB9;

  /* Pending */
  --bk-pending: #6941A5;
  --bk-pending-bg: #F3EEFF;
  --bk-pending-border: #D9C8FC;

  /* Neutral */
  --bk-neutral: #596474;
  --bk-neutral-bg: #F1F3F5;
  --bk-neutral-border: #D5DAE0;

  /* Phụ trợ (mục X, XIV) */
  --bk-focus-ring: 0 0 0 3px rgb(0 104 255 / 28%);
  --bk-touch: 44px;

  /* Nút chính (anh chốt 22/10/2026, thay nền xanh đặc vì chói): nền xanh nhạt như nút Chi tiết nhưng đậm hơn một chút, viền Primary, chữ xanh đậm.
     Chữ #0047B3: 6,81:1 trên #DCEBFF, 5,96:1 khi rê (#C7DDFF), 5,5:1 khi nhấn (#BBD7FF). Viền #0068FF. */
  --bk-button-primary-bg: #DCEBFF;
  --bk-button-primary-border: #0068FF;
  --bk-button-primary-text: #0047B3;
  --bk-button-primary-hover-bg: #C7DDFF;
  --bk-button-primary-active-bg: #BBD7FF;
}
/* Nhóm màu dùng chung: gắn class theo nhóm, thành phần đọc --tone / --tone-bg / --tone-border. */
.bk-tone-success{--tone:var(--bk-success);--tone-bg:var(--bk-success-bg);--tone-border:var(--bk-success-border)}
.bk-tone-info{--tone:var(--bk-info);--tone-bg:var(--bk-info-bg);--tone-border:var(--bk-info-border)}
.bk-tone-warning{--tone:var(--bk-warning);--tone-bg:var(--bk-warning-bg);--tone-border:var(--bk-warning-border)}
.bk-tone-danger{--tone:var(--bk-danger);--tone-bg:var(--bk-danger-bg);--tone-border:var(--bk-danger-border)}
.bk-tone-pending{--tone:var(--bk-pending);--tone-bg:var(--bk-pending-bg);--tone-border:var(--bk-pending-border)}
.bk-tone-neutral{--tone:var(--bk-neutral);--tone-bg:var(--bk-neutral-bg);--tone-border:var(--bk-neutral-border)}
/* Nhãn trạng thái / nhãn phụ dùng chung */
.bk-badge{display:inline-flex;align-items:center;gap:4px;padding:1px 7px;border:1px solid var(--tone-border);border-radius:999px;background:var(--tone-bg);color:var(--tone);font-size:11px;font-weight:500;line-height:1.5;white-space:normal;overflow-wrap:anywhere}
.bk-badge .rc-i{flex:none}
/* Cầu nối Tailwind (GĐ3): thang bekind-* của bản build Vite đổi sang xanh Zalo; nút bg-bekind-700/800 theo kiểu nút chính anh chốt.
   Đặt ở file nạp trong <head> để không nháy màu khi trang tải. */
:root{--color-bekind-50:#EEF5FF;--color-bekind-100:#DCEBFF;--color-bekind-200:#BBD7FF;--color-bekind-300:#8DBDFF;--color-bekind-400:#4D95FF;--color-bekind-500:#0068FF;--color-bekind-600:#0056D6;--color-bekind-700:#0047B3;--color-bekind-800:#003A94;--color-bekind-900:#002F78;--color-bekind-950:#001D4D}
/* Nút chính (anh chốt 22/10): nền xanh nhạt, viền xanh, chữ xanh đậm; không nền xanh đặc */
.bg-bekind-700,.bg-bekind-800{background-color:var(--bk-button-primary-bg)!important;color:var(--bk-button-primary-text)!important;box-shadow:inset 0 0 0 1px var(--bk-button-primary-border)!important}
.bg-bekind-700:hover,.bg-bekind-800:hover,.hover\:bg-bekind-800:hover{background-color:var(--bk-button-primary-hover-bg)!important}
.bg-bekind-700:active,.bg-bekind-800:active{background-color:var(--bk-button-primary-active-bg)!important}
.text-bekind-700{color:var(--bk-primary-active)!important}.text-bekind-800{color:#003A94!important}
.bg-bekind-50{background-color:var(--bk-primary-soft)!important}.bg-bekind-100{background-color:var(--bk-primary-light)!important}
.border-bekind-100,.border-bekind-200{border-color:var(--bk-info-border)!important}
/* Nút chính (anh 23/10/2026): ngoài Sơ đồ phòng/giường dùng nền xanh Zalo đặc, chữ trắng. Chữ trắng trên #0068FF 4,6:1; rê #0056D6 6,1:1; nhấn #0047B3 7,8:1. */
:root{--bk-button-primary-bg:#0068FF;--bk-button-primary-border:#0068FF;--bk-button-primary-text:#FFFFFF;--bk-button-primary-hover-bg:#0056D6;--bk-button-primary-active-bg:#0047B3}
/* Sơ đồ phòng/giường giữ nút nền xanh nhạt viền xanh chữ xanh đậm (anh chốt GĐ1 22/10). */
.bk-ds{--bk-button-primary-bg:#DCEBFF;--bk-button-primary-border:#0068FF;--bk-button-primary-text:#0047B3;--bk-button-primary-hover-bg:#C7DDFF;--bk-button-primary-active-bg:#BBD7FF}
/* Thang màu ngữ nghĩa Tailwind (emerald/green, amber/yellow/orange, rose/red, sky/blue, violet/purple/indigo/fuchsia) theo 6 nhóm mục III. */
:root{
--color-emerald-50:var(--bk-success-bg);--color-emerald-100:var(--bk-success-bg);--color-emerald-200:var(--bk-success-border);--color-emerald-300:var(--bk-success-border);--color-emerald-400:#3FA874;--color-emerald-500:#18905A;--color-emerald-600:var(--bk-success);--color-emerald-700:var(--bk-success);--color-emerald-800:#066339;--color-emerald-900:#054D2C;--color-emerald-950:#033620;
--color-green-50:var(--bk-success-bg);--color-green-100:var(--bk-success-bg);--color-green-200:var(--bk-success-border);--color-green-300:var(--bk-success-border);--color-green-600:var(--bk-success);--color-green-700:var(--bk-success);--color-green-800:#066339;--color-green-900:#054D2C;
--color-amber-50:var(--bk-warning-bg);--color-amber-100:var(--bk-warning-bg);--color-amber-200:var(--bk-warning-border);--color-amber-300:var(--bk-warning-border);--color-amber-400:#E0A93B;--color-amber-500:#C77A11;--color-amber-600:var(--bk-warning);--color-amber-700:var(--bk-warning);--color-amber-800:#7A4600;--color-amber-900:#613700;--color-amber-950:#452700;
--color-yellow-50:var(--bk-warning-bg);--color-yellow-100:var(--bk-warning-bg);--color-yellow-200:var(--bk-warning-border);--color-yellow-700:var(--bk-warning);--color-yellow-800:#7A4600;
--color-orange-50:var(--bk-warning-bg);--color-orange-100:var(--bk-warning-bg);--color-orange-200:var(--bk-warning-border);--color-orange-300:var(--bk-warning-border);--color-orange-700:var(--bk-warning);--color-orange-800:#7A4600;--color-orange-900:#613700;
--color-rose-50:var(--bk-danger-bg);--color-rose-100:var(--bk-danger-bg);--color-rose-200:var(--bk-danger-border);--color-rose-300:var(--bk-danger-border);--color-rose-500:#D94841;--color-rose-600:var(--bk-danger);--color-rose-700:var(--bk-danger);--color-rose-800:#912018;--color-rose-900:#7A1A14;--color-rose-950:#55120E;
--color-red-50:var(--bk-danger-bg);--color-red-100:var(--bk-danger-bg);--color-red-200:var(--bk-danger-border);--color-red-300:var(--bk-danger-border);--color-red-600:var(--bk-danger);--color-red-700:var(--bk-danger);--color-red-800:#912018;
--color-sky-50:var(--bk-info-bg);--color-sky-100:var(--bk-info-bg);--color-sky-200:var(--bk-info-border);--color-sky-300:var(--bk-info-border);--color-sky-600:var(--bk-info);--color-sky-700:var(--bk-info);--color-sky-800:#0047B3;--color-sky-900:#003A94;
--color-blue-50:var(--bk-info-bg);--color-blue-100:var(--bk-info-bg);--color-blue-200:var(--bk-info-border);--color-blue-600:var(--bk-info);--color-blue-700:var(--bk-info);--color-blue-800:#0047B3;
--color-violet-50:var(--bk-pending-bg);--color-violet-100:var(--bk-pending-bg);--color-violet-200:var(--bk-pending-border);--color-violet-300:var(--bk-pending-border);--color-violet-600:var(--bk-pending);--color-violet-700:var(--bk-pending);--color-violet-800:#553388;--color-violet-950:#2E1C4D;
--color-purple-50:var(--bk-pending-bg);--color-purple-100:var(--bk-pending-bg);--color-purple-700:var(--bk-pending);--color-purple-800:#553388;
--color-indigo-50:var(--bk-pending-bg);--color-indigo-700:var(--bk-pending);
--color-fuchsia-400:var(--bk-warning-border);--color-fuchsia-800:var(--bk-warning)}
/* Menu trái (anh 23/10/2026): chữ đen; mục đang mở/đang chọn chỉ tô nền xanh nhạt. */
[data-shell-sidebar] [data-delivery-menu="ready"],[data-shell-sidebar] .text-bekind-700,[data-shell-sidebar] .text-bekind-800,[data-shell-sidebar] .hover\:text-bekind-700:hover{color:var(--bk-text)!important}
[data-shell-sidebar] [data-delivery-menu="ready"][aria-current="page"]{background:var(--bk-primary-light);color:var(--bk-text)!important;font-weight:700}

/* Nền Happy (anh chọn mức "Vừa" 24/10/2026): xanh đậm trên cùng, nhạt dần xuống nền sáng. Menu trái giữ nền trắng. */
[data-app-shell]{background:linear-gradient(180deg,#7FB2FF 0,#BBD7FF 180px,#E6F0FF 380px,#F7FAFF 640px) no-repeat,#F7FAFF!important}
[data-shell-header]{background:rgba(255,255,255,.35)!important;border-bottom-color:rgba(0,104,255,.18)!important}
/* Khối logo đầu menu trái (anh 24/10): nền xanh Zalo đặc như nút chính, chữ trắng; logo chỉ lấy biểu tượng (mái nhà + chữ bekind, bỏ dòng khẩu hiệu; ảnh images/bekind-icon.png cắt từ bekind-logo.png) trong ô trắng bo góc. */
[data-shell-brand]{background:#0068FF;border-bottom-color:#0068FF!important}
[data-shell-brand] .text-slate-900,[data-shell-brand] .text-slate-500{color:#fff!important}
[data-shell-brand] .text-slate-500{opacity:.85}
[data-shell-brand] img{box-sizing:border-box;padding:3px;border-radius:12px;background:#fff url('../images/bekind-icon.png') center/contain no-repeat;background-origin:content-box;object-position:-9999px -9999px;box-shadow:0 2px 8px rgba(0,40,120,.3)}