/* ============================================================================
 *  /hiskh — Hồ sơ khách hàng HIS (nội bộ SAIGON SMILE)
 *  Màu: tinh thần /form — nền xám rất nhạt, khối trắng, chữ đậm rõ; cam thương hiệu
 *  chỉ làm điểm nhấn (menu đang chọn, nút chính, thanh tiến độ, cột biểu đồ).
 *  Bố cục: sidebar trái cố định 248px + thanh trên (tìm nhanh, tài khoản) + vùng nội
 *  dung (tiêu đề trang → thanh lọc → khối số liệu → bảng). < 992px sidebar thành ngăn kéo.
 * ==========================================================================*/
:root{
  --bg:#f4f5f7; --panel:#ffffff; --panel-2:#f8f9fa; --track:#eef0f3; --line:#e6e8ec; --line-2:#d9dce2;
  --ink:#17191c; --ink-2:#3f444b; --muted:#6b7079; --soft:#a0a5ad;
  --accent:#ec7700; --accent-ink:#b35900; --accent-soft:#fff3e6; --accent-line:#f8c794;
  --good:#15803d; --good-soft:#e9f6ee; --bad:#c62828; --bad-soft:#fdeeee; --warn:#b45309; --warn-soft:#fdf3e2;
  --info:#2563eb; --info-soft:#ebf2fe;
  --shadow:0 1px 2px rgba(16,18,22,.04), 0 2px 8px rgba(16,18,22,.04);
  --shadow-lg:0 8px 30px rgba(16,18,22,.12);
  --r-lg:14px; --r-md:10px; --r-sm:8px;
  --side-w:272px; --ease:cubic-bezier(.22,.61,.36,1); --top-h:60px;
  --font:'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color-scheme:light;
  --bs-body-font-family:var(--font); --bs-body-color:var(--ink); --bs-body-bg:var(--bg); --bs-border-color:var(--line);
  --bs-link-color-rgb:23,25,28; --bs-link-hover-color-rgb:179,89,0;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--font); font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased}
a{color:inherit; text-decoration:none}
[hidden]{display:none !important}
.hk-num{font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.text-secondary{color:var(--muted) !important}

/* ══════════ KHUNG ỨNG DỤNG ══════════ */
.hk-side{position:fixed; inset:0 auto 0 0; width:var(--side-w); background:var(--panel); border-right:1px solid var(--line);
  display:flex; flex-direction:column; z-index:50; padding-top:env(safe-area-inset-top,0px); padding-left:env(safe-area-inset-left,0px)}
.hk-side-brand{height:var(--top-h); display:flex; align-items:center; gap:10px; padding:0 20px; border-bottom:1px solid var(--line); flex:0 0 auto}
.hk-side-brand img{height:24px; width:auto}
.hk-side-nav{flex:1; overflow-y:auto; padding:14px 12px; display:flex; flex-direction:column; gap:2px}
.hk-side-h{font-size:.68rem; font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:var(--soft); padding:16px 10px 6px}
.hk-side-h:first-child{padding-top:4px}
.hk-nav{display:flex; align-items:center; gap:11px; padding:8px 10px; border-radius:var(--r-sm); color:var(--ink-2); font-weight:500; font-size:.9rem}
.hk-nav i{font-size:1.05rem; color:var(--muted); width:20px; text-align:center}
.hk-nav:hover{background:var(--panel-2); color:var(--ink)}
.hk-nav.active{background:var(--accent-soft); color:var(--accent-ink); font-weight:600}
.hk-nav.active i{color:var(--accent)}
.hk-nav > span:first-of-type{flex:1; min-width:0}
.hk-nav-i{margin-left:auto; color:var(--soft); font-size:.85rem; line-height:1; padding:4px; margin-right:-4px; border-radius:50%}
.hk-nav-i i{font-size:.85rem; width:auto; color:inherit}
.hk-nav-i:hover,.hk-nav-i:focus{color:var(--ink-2)}
.hk-nav.active .hk-nav-i{color:var(--accent-line)}
.tooltip{--bs-tooltip-bg:var(--ink); --bs-tooltip-font-size:.78rem; --bs-tooltip-max-width:240px}
.hk-nav-n{margin-left:auto; font-size:.72rem; font-weight:600; color:var(--muted); font-variant-numeric:tabular-nums}
.hk-side-foot{border-top:1px solid var(--line); padding:12px 20px calc(14px + env(safe-area-inset-bottom,0px)); font-size:.76rem; color:var(--muted); line-height:1.45}
.hk-side-foot i{margin-right:4px}
.hk-dot{display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--good); margin-right:6px; vertical-align:1px}
.hk-dot.is-stale{background:var(--warn)}
.hk-scrim{position:fixed; inset:0; background:rgba(16,18,22,.38); z-index:45; opacity:0; visibility:hidden;
  transition:opacity .3s var(--ease), visibility 0s linear .3s; -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px)}

.hk-body{margin-left:var(--side-w); min-height:100%; display:flex; flex-direction:column; min-width:0}
.hk-top{position:sticky; top:0; z-index:40; height:calc(var(--top-h) + env(safe-area-inset-top,0px)); padding-top:env(safe-area-inset-top,0px);
  background:rgba(255,255,255,.92); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border-bottom:1px solid var(--line)}
.hk-top-in{height:var(--top-h); display:flex; align-items:center; gap:12px;
  padding-left:max(24px, env(safe-area-inset-left,0px)); padding-right:max(24px, env(safe-area-inset-right,0px))}
.hk-menu-btn{display:none !important; border:0; background:none; font-size:1.4rem; padding:4px; margin-left:-4px; color:var(--ink)}
.hk-main{flex:1; width:100%; max-width:1440px; padding-block:22px 36px;
  padding-left:max(24px, env(safe-area-inset-left,0px)); padding-right:max(24px, env(safe-area-inset-right,0px));
  display:flex; flex-direction:column; gap:18px}
.hk-foot{padding:14px 24px calc(18px + env(safe-area-inset-bottom,0px)); color:var(--soft); font-size:.75rem; border-top:1px solid var(--line)}

@media (max-width:991.98px){
  .hk-side{transform:translateX(-104%); transition:transform .34s var(--ease); box-shadow:var(--shadow-lg); will-change:transform}
  .hk-side.open{transform:none}
  .hk-side.open ~ .hk-scrim{opacity:1; visibility:visible; transition:opacity .3s var(--ease)}
  .hk-body{margin-left:0}
  .hk-menu-btn{display:block}
}
@media (max-width:575.98px){
  .hk-top-in{padding-left:max(16px, env(safe-area-inset-left,0px)); padding-right:max(16px, env(safe-area-inset-right,0px)); gap:8px}
  .hk-main{padding-left:max(16px, env(safe-area-inset-left,0px)); padding-right:max(16px, env(safe-area-inset-right,0px)); padding-top:16px; gap:14px}
}

/* Tìm nhanh trên thanh trên */
.hk-qs{position:relative; flex:1; max-width:460px}
.hk-qs i.bi-search{position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--soft); pointer-events:none}
.hk-qs input{width:100%; height:38px; border:1px solid var(--line); background:var(--panel-2); border-radius:var(--r-md);
  padding:0 54px 0 36px; font:inherit; color:var(--ink)}
.hk-qs input:focus{outline:none; background:var(--panel); border-color:var(--accent-line); box-shadow:0 0 0 3px rgba(236,119,0,.12)}
.hk-qs kbd{position:absolute; right:10px; top:50%; transform:translateY(-50%); font:inherit; font-size:.7rem; color:var(--muted);
  background:var(--panel); border:1px solid var(--line); border-radius:5px; padding:1px 6px; box-shadow:none}
.hk-qs-menu{position:absolute; top:calc(100% + 6px); left:0; right:0; background:var(--panel); border:1px solid var(--line);
  border-radius:var(--r-md); box-shadow:var(--shadow-lg); padding:6px; max-height:420px; overflow-y:auto; z-index:60}
.hk-qs-item{display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:var(--r-sm); cursor:pointer}
.hk-qs-item:hover,.hk-qs-item.on{background:var(--panel-2)}
.hk-qs-item .hk-av-sm{flex:0 0 auto}
.hk-qs-t{font-weight:600; font-size:.88rem; line-height:1.3}
.hk-qs-s{font-size:.76rem; color:var(--muted)}
.hk-qs-foot{display:block; text-align:center; font-size:.8rem; color:var(--accent-ink); padding:8px; border-top:1px solid var(--line); margin-top:4px; font-weight:500}
.hk-qs-empty{padding:14px 10px; color:var(--muted); font-size:.85rem; text-align:center}
@media (max-width:575.98px){ .hk-qs kbd{display:none} .hk-qs input{padding-right:12px} }

/* Tài khoản */
.hk-user{display:flex; align-items:center; gap:8px; border:0; background:none; padding:4px 6px; border-radius:var(--r-md); font:inherit; color:var(--ink); margin-left:auto}
.hk-user:hover{background:var(--panel-2)}
.hk-user-av{width:32px; height:32px; border-radius:50%; background:var(--ink); color:#fff; display:grid; place-items:center; font-weight:600; font-size:.82rem}
.hk-user-txt{text-align:left; line-height:1.2}
.hk-user-txt b{display:block; font-size:.85rem; font-weight:600; max-width:170px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.hk-user-txt span{font-size:.72rem; color:var(--muted)}
.dropdown-menu{border-color:var(--line); border-radius:var(--r-md); font-size:.88rem; padding:6px; box-shadow:var(--shadow-lg)}
.dropdown-item{border-radius:6px; padding:7px 10px}
.dropdown-item:active{background:var(--accent-soft); color:var(--accent-ink)}

/* ══════════ ĐẦU TRANG ══════════ */
.hk-crumbs{display:flex; align-items:center; gap:6px; font-size:.8rem; color:var(--muted); margin-bottom:4px; flex-wrap:wrap}
.hk-crumbs a:hover{color:var(--ink)}
.hk-crumbs i{font-size:.65rem; color:var(--soft)}
.hk-phead{display:flex; align-items:flex-end; justify-content:space-between; gap:12px 20px; flex-wrap:wrap}
.hk-phead > div:first-child{min-width:0}
.hk-h1{font-size:1.45rem; font-weight:700; letter-spacing:-.02em; line-height:1.25; margin:0; text-wrap:balance}
.hk-psub{color:var(--muted); font-size:.85rem; margin:4px 0 0}
.hk-pact{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.hk-h2{font-size:.98rem; font-weight:600; margin:0; letter-spacing:-.005em}
.hk-meta{color:var(--muted); font-size:.78rem; line-height:1.4}
.hk-link{color:var(--accent-ink); font-size:.82rem; font-weight:500; white-space:nowrap}
.hk-link:hover{text-decoration:underline}

/* ══════════ KHỐI ══════════ */
.hk-card{background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow); min-width:0}
.hk-card-h{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 18px; border-bottom:1px solid var(--line)}
.hk-card-h .hk-meta{margin-top:2px}
.hk-card-b{padding:16px 18px}
.hk-card-b.p-0{padding:0}
.hk-grid{display:grid; gap:18px; min-width:0; grid-template-columns:minmax(0,1fr)}
/* Mọi ô lưới / khối dọc được co nhỏ hơn nội dung (bảng rộng tự cuộn trong .table-responsive)
   — thiếu dòng này thì 1 bảng rộng kéo cả cột phải tràn khỏi màn hình điện thoại. */
.hk-grid > *,.hk-pane > *,.hk-prof > *,.hk-main > *{min-width:0}
.hk-pane{min-width:0}
.hk-g-2{grid-template-columns:repeat(2, minmax(0,1fr))}
.hk-g-3{grid-template-columns:repeat(3, minmax(0,1fr))}
.hk-g-main{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
@media (max-width:1199.98px){ .hk-g-3{grid-template-columns:repeat(2, minmax(0,1fr))} }
@media (max-width:991.98px){ .hk-g-main{grid-template-columns:minmax(0,1fr)} }
@media (max-width:767.98px){ .hk-g-2,.hk-g-3{grid-template-columns:minmax(0,1fr)} }

/* ══════════ NÚT & Ô NHẬP ══════════ */
.btn{font-weight:500; border-radius:var(--r-sm); font-size:.88rem}
.hk-btn{--bs-btn-bg:var(--ink); --bs-btn-color:#fff; --bs-btn-border-color:var(--ink);
  --bs-btn-hover-bg:#000; --bs-btn-hover-color:#fff; --bs-btn-hover-border-color:#000;
  --bs-btn-active-bg:#000; --bs-btn-active-color:#fff; display:inline-flex; align-items:center; justify-content:center; gap:6px}
.hk-btn-ghost{--bs-btn-bg:var(--panel); --bs-btn-border-color:var(--line-2); --bs-btn-color:var(--ink-2);
  --bs-btn-hover-bg:var(--panel-2); --bs-btn-hover-border-color:var(--line-2); --bs-btn-hover-color:var(--ink);
  --bs-btn-active-bg:var(--track); --bs-btn-disabled-bg:var(--panel); --bs-btn-disabled-border-color:var(--line);
  display:inline-flex; align-items:center; gap:6px}
.form-control,.form-select{border-color:var(--line-2); border-radius:var(--r-sm); font-size:.88rem; color:var(--ink)}
.form-control:focus,.form-select:focus{border-color:var(--accent-line); box-shadow:0 0 0 3px rgba(236,119,0,.12)}
.form-label{font-size:.74rem; font-weight:600; color:var(--muted); margin-bottom:4px; text-transform:uppercase; letter-spacing:.04em}

/* Thanh lọc */
.hk-filter{display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:12px 14px; align-items:end; padding:14px 18px}
.hk-filter .hk-f-wide{grid-column:span 2}
.hk-filter-act{display:flex; gap:8px}
.hk-filter-act .btn{height:36px}
.hk-filter .form-control,.hk-filter .form-select{height:36px}
@media (max-width:575.98px){ .hk-filter{grid-template-columns:repeat(2, minmax(0,1fr))} .hk-filter .hk-f-wide{grid-column:1 / -1} .hk-filter-act{grid-column:1 / -1} .hk-filter-act .btn{flex:1} }

/* Bộ chọn dạng nút liền (kỳ báo cáo, loại danh sách) */
.hk-seg{display:inline-flex; background:var(--track); border-radius:var(--r-md); padding:3px; gap:2px; max-width:100%; overflow-x:auto; scrollbar-width:none}
.hk-seg::-webkit-scrollbar{display:none}
.hk-seg a,.hk-seg button{border:0; background:none; font:inherit; font-size:.84rem; font-weight:500; color:var(--muted);
  padding:6px 13px; border-radius:7px; white-space:nowrap; display:inline-flex; align-items:center; gap:6px}
.hk-seg a:hover,.hk-seg button:hover{color:var(--ink)}
.hk-seg .on{background:var(--panel); color:var(--ink); box-shadow:0 1px 2px rgba(16,18,22,.1)}
.hk-seg .n{font-size:.72rem; color:var(--soft); font-variant-numeric:tabular-nums}

/* ══════════ CHỈ SỐ ══════════ */
.hk-kpis{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:14px}
.hk-kpis.k3{grid-template-columns:repeat(3, minmax(0,1fr))}
.hk-kpis.k6{grid-template-columns:repeat(3, minmax(0,1fr))}
@media (max-width:1199.98px){ .hk-kpis{grid-template-columns:repeat(2, minmax(0,1fr))} }
@media (max-width:767.98px){ .hk-kpis.k3,.hk-kpis.k6{grid-template-columns:repeat(2, minmax(0,1fr))} }
@media (max-width:420px){ .hk-kpis{gap:10px} }
/* Ô chỉ số — kiểu /crm: khung trắng, VIỀN TRÊN 3px theo tông (t-*); ô chính (.hero) nền cam rất nhạt, số màu cam */
.hk-kpi{--t:var(--line-2);
  background:var(--panel); border:1px solid var(--line); border-top:3px solid var(--t); border-radius:var(--r-lg); box-shadow:var(--shadow);
  padding:13px 16px; min-width:0; display:flex; flex-direction:column; gap:2px;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease)}
.hk-kpi:hover{transform:translateY(-2px); box-shadow:0 8px 22px rgba(16,18,22,.07)}
.hk-kpi.t-accent{--t:var(--accent)}
.hk-kpi.t-good{--t:var(--good)}
.hk-kpi.t-info{--t:var(--info)}
.hk-kpi.t-warn{--t:#e0a100}
.hk-kpi.t-bad{--t:var(--bad)}
.hk-kpi-l{font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--muted);
  display:flex; align-items:center; gap:6px; min-width:0}
.hk-kpi-l i{font-size:.85rem; color:var(--t)}
.hk-kpi-v{font-size:1.5rem; font-weight:800; letter-spacing:-.02em; line-height:1.2; margin:4px 0 0; font-variant-numeric:tabular-nums; white-space:nowrap; color:var(--ink)}
.hk-kpi-s{font-size:.75rem; color:var(--muted); display:flex; align-items:center; gap:6px; flex-wrap:wrap}
.hk-kpi-bar{height:4px; border-radius:4px; background:var(--track); overflow:hidden; margin:6px 0 4px}
.hk-kpi-bar > span{display:block; height:100%; border-radius:inherit; background:var(--t); transform-origin:left; animation:hk-grow-x .9s var(--ease) both}
.hk-kpi.hero{--t:var(--accent); background:linear-gradient(135deg, rgba(236,119,0,.11), rgba(236,119,0,.02)); border-color:#f6d3ad; border-top-color:var(--accent)}
.hk-kpi.hero .hk-kpi-v{color:var(--accent-ink)}
.hk-kpi.t-bad .hk-kpi-v.is-bad{color:var(--bad)}
.hk-kpi .is-bad{color:var(--bad)} .hk-kpi .is-good{color:var(--good)}
@media (max-width:420px){ .hk-kpi{padding:11px 12px} .hk-kpi-v{font-size:clamp(1rem, 5.6vw, 1.25rem)} }
.hk-delta{font-weight:600; font-size:.74rem; padding:1px 7px; border-radius:100px; display:inline-flex; align-items:center; gap:2px}
.hk-delta.up{color:var(--good); background:var(--good-soft)}
.hk-delta.down{color:var(--bad); background:var(--bad-soft)}
.hk-delta.flat{color:var(--muted); background:var(--track)}
.is-good{color:var(--good)} .is-bad{color:var(--bad)} .is-warn{color:var(--warn)}

/* ══════════ BIỂU ĐỒ CỘT (thực thu theo ngày) ══════════ */
.hk-chart{position:relative; height:240px; margin:6px 0 0 52px}
.hk-chart-grid{position:absolute; inset:0 0 22px 0}
.hk-chart-grid div{position:absolute; left:0; right:0; border-top:1px solid var(--line); height:0}
.hk-chart-grid div:first-child{border-top-color:var(--line-2)}
.hk-chart-grid span{position:absolute; right:calc(100% + 8px); top:-8px; font-size:.7rem; color:var(--muted); white-space:nowrap; font-variant-numeric:tabular-nums}
.hk-bars{position:absolute; inset:0 0 22px 0; display:flex; align-items:flex-end; gap:2px}
.hk-bar-c{flex:1; height:100%; display:flex; align-items:flex-end; position:relative; min-width:0; cursor:default}
.hk-bar-c > i{display:block; width:100%; max-width:28px; margin:0 auto; background:var(--accent); border-radius:4px 4px 0 0; min-height:0}
.hk-bar-c:hover > i{background:var(--accent-ink)}
.hk-bar-c > b.d{display:block}
.hk-bar-c.zero > i{height:2px !important; background:var(--line-2); border-radius:1px}
.hk-bar-c > b{display:none; position:absolute; top:calc(100% + 5px); left:50%; transform:translateX(-50%); font-size:.68rem; font-weight:400; color:var(--muted); white-space:nowrap; font-variant-numeric:tabular-nums}
.hk-tip{position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%); background:var(--ink); color:#fff; border-radius:var(--r-sm);
  padding:7px 10px; font-size:.75rem; line-height:1.4; white-space:nowrap; pointer-events:none; opacity:0; transition:opacity .1s; z-index:5; box-shadow:var(--shadow-lg)}
.hk-tip b{display:block; font-size:.85rem; font-variant-numeric:tabular-nums}
.hk-bar-c:hover .hk-tip,.hk-bar-c:focus .hk-tip{opacity:1}
.hk-bar-c:first-child .hk-tip,.hk-bar-c:nth-child(2) .hk-tip{left:0; transform:none}
.hk-bar-c:last-child .hk-tip,.hk-bar-c:nth-last-child(2) .hk-tip{left:auto; right:0; transform:none}
@media (max-width:575.98px){ .hk-chart{height:190px; margin-left:44px} }

/* Thanh ngang xếp hạng (cơ sở, nhóm dịch vụ) */
.hk-rank{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:13px}
.hk-rank li{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:5px 12px; font-size:.86rem}
.hk-rank-n{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.hk-rank-v{font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap}
.hk-rank-v small{font-weight:400; color:var(--muted); margin-left:6px}
.hk-rank .hk-bar{grid-column:1 / -1}

.hk-bar{height:6px; background:var(--track); border-radius:100px; overflow:hidden}
.hk-bar > span{display:block; height:100%; background:var(--accent); border-radius:inherit}
.hk-bar.lg{height:8px}
.hk-bar.muted > span{background:var(--soft)}

/* ══════════ BẢNG ══════════ */
.hk-table{--bs-table-bg:transparent; --bs-table-hover-bg:var(--panel-2); margin:0; font-size:.86rem; vertical-align:middle}
.hk-table > :not(caption) > * > *{padding:11px 12px; border-bottom-color:var(--line); color:var(--ink)}
.hk-table > :not(caption) > * > *:first-child{padding-left:18px}
.hk-table > :not(caption) > * > *:last-child{padding-right:18px}
.hk-table thead th{font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--muted);
  background:var(--panel-2); border-bottom:1px solid var(--line); white-space:nowrap; padding-top:9px; padding-bottom:9px}
.hk-table thead th a{display:inline-flex; align-items:center; gap:3px}
.hk-table thead th a:hover,.hk-table thead th a.on{color:var(--ink)}
.hk-table tbody tr:last-child > *{border-bottom:0}
.hk-table tfoot td{background:var(--panel-2); border-top:1px solid var(--line); border-bottom:0; font-weight:600}
.hk-table.sm > :not(caption) > * > *{padding:7px 10px}
.hk-table.sm > :not(caption) > * > *:first-child{padding-left:0}
.hk-table.sm > :not(caption) > * > *:last-child{padding-right:0}
.hk-table.sm thead th{background:transparent}
.hk-rowlink{cursor:pointer}
.hk-rowlink:hover > *{background:var(--panel-2)}
.hk-who{display:flex; align-items:center; gap:10px; min-width:180px}
.hk-who-t{font-weight:600; line-height:1.3}
.hk-who-t:hover{color:var(--accent-ink)}
.hk-av-sm{width:32px; height:32px; flex:0 0 32px; border-radius:50%; background:var(--track); color:var(--ink-2); display:grid; place-items:center; font-weight:600; font-size:.78rem}
.hk-tag{display:inline-block; font-size:.68rem; font-weight:600; color:var(--muted); background:var(--track); padding:1px 7px; border-radius:100px; vertical-align:1px; white-space:nowrap}
.hk-tag.new{color:var(--accent-ink); background:var(--accent-soft)}
.hk-pill{font-size:.72rem; font-weight:600; padding:2px 9px; border-radius:100px; white-space:nowrap; display:inline-flex; align-items:center; gap:4px}
.hk-pill.active{background:var(--good-soft); color:var(--good)}
.hk-pill.new{background:var(--info-soft); color:var(--info)}
.hk-pill.done{background:var(--track); color:var(--muted)}
.hk-pill.warn{background:var(--warn-soft); color:var(--warn)}
.hk-pill.bad{background:var(--bad-soft); color:var(--bad)}
.hk-prog{display:flex; align-items:center; gap:8px; min-width:120px}
.hk-prog .hk-bar{flex:1}
.hk-prog span{font-size:.78rem; color:var(--muted); white-space:nowrap; font-variant-numeric:tabular-nums}

/* Phân trang */
.hk-pager{display:flex; align-items:center; justify-content:space-between; gap:10px 16px; padding:12px 18px; border-top:1px solid var(--line); flex-wrap:wrap}
.hk-pages{display:flex; gap:4px; flex-wrap:wrap}
.hk-pages a,.hk-pages span{min-width:32px; height:32px; padding:0 8px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:var(--r-sm); font-size:.82rem; font-weight:500; color:var(--ink-2); border:1px solid transparent; font-variant-numeric:tabular-nums}
.hk-pages a:hover{background:var(--panel-2); border-color:var(--line)}
.hk-pages .on{background:var(--ink); color:#fff}
.hk-pages .dis{color:var(--soft)}

/* Danh sách gọn trong thẻ (dashboard) */
.hk-list{list-style:none; margin:0; padding:0}
.hk-list > li{display:flex; align-items:center; gap:12px; padding:10px 18px; border-bottom:1px solid var(--line)}
.hk-list > li:last-child{border-bottom:0}
.hk-list > li > div{min-width:0; flex:1}
.hk-list-t{font-weight:600; font-size:.86rem; line-height:1.3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block}
a.hk-list-t:hover{color:var(--accent-ink)}
.hk-list-v{font-weight:600; font-size:.86rem; white-space:nowrap; font-variant-numeric:tabular-nums; text-align:right}
.hk-rk{width:22px; flex:0 0 22px; font-size:.75rem; font-weight:600; color:var(--soft); text-align:center; font-variant-numeric:tabular-nums}

/* Khối số dư / cam kết */
.hk-hold{display:flex; flex-direction:column}
.hk-hold a{display:flex; align-items:center; gap:14px; padding:14px 18px; border-bottom:1px solid var(--line)}
.hk-hold a:last-child{border-bottom:0}
.hk-hold a:hover{background:var(--panel-2)}
.hk-hold-ic{width:38px; height:38px; flex:0 0 38px; border-radius:var(--r-md); display:grid; place-items:center; font-size:1.1rem; background:var(--track); color:var(--ink-2)}
.hk-hold-v{font-size:1.15rem; font-weight:700; font-variant-numeric:tabular-nums; line-height:1.25}
.hk-hold .bi-chevron-right{margin-left:auto; color:var(--soft)}

/* Trạng thái rỗng */
.hk-empty{padding:44px 20px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:6px; color:var(--ink-2)}
.hk-empty > i{font-size:1.9rem; color:var(--soft)}
.hk-empty .hk-meta{max-width:420px}
.hk-alert{display:flex; gap:10px; align-items:flex-start; padding:12px 16px; border-radius:var(--r-md); background:var(--warn-soft); color:#7c3d06; font-size:.85rem; border:1px solid #f5dcb5}
.hk-note-i{display:flex; gap:8px; align-items:flex-start; font-size:.78rem; color:var(--muted)}

/* ══════════ HỒ SƠ KHÁCH ══════════ */
.hk-prof{display:grid; grid-template-columns:320px minmax(0,1fr); gap:18px; align-items:start}
.hk-prof-side{position:sticky; top:calc(var(--top-h) + 18px); display:flex; flex-direction:column; gap:18px}
@media (max-width:1099.98px){ .hk-prof{grid-template-columns:minmax(0,1fr)} .hk-prof-side{position:static} }
.hk-pcard-top{padding:22px 20px 18px; text-align:center; border-bottom:1px solid var(--line)}
.hk-av{width:72px; height:72px; margin:0 auto 12px; border-radius:50%; background:var(--accent-soft); color:var(--accent-ink);
  display:grid; place-items:center; font-weight:700; font-size:1.7rem; box-shadow:inset 0 0 0 2px var(--accent-line)}
.hk-pname{font-size:1.15rem; font-weight:700; letter-spacing:-.01em; line-height:1.3; margin:0; text-wrap:balance}
.hk-ptags{display:flex; gap:6px; justify-content:center; flex-wrap:wrap; margin-top:8px}
.hk-pact2{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:16px}
.hk-pact2 .btn{justify-content:center}
.hk-dl{display:grid; grid-template-columns:minmax(96px, 38%) minmax(0,1fr); margin:0; font-size:.84rem}
.hk-dl dt{color:var(--muted); font-weight:400; padding:8px 10px 8px 18px; border-bottom:1px solid var(--line)}
.hk-dl dd{margin:0; padding:8px 18px 8px 0; border-bottom:1px solid var(--line); overflow-wrap:anywhere; font-weight:500}
.hk-dl dt:last-of-type,.hk-dl dd:last-of-type{border-bottom:0}

.hk-tabs{display:flex; gap:2px; border-bottom:1px solid var(--line); overflow-x:auto; scrollbar-width:none;
  position:sticky; top:calc(var(--top-h) + env(safe-area-inset-top,0px)); z-index:20; background:var(--bg); margin-bottom:-4px}
.hk-tabs::-webkit-scrollbar{display:none}
.hk-tab{flex:0 0 auto; padding:11px 14px 10px; font-weight:500; font-size:.88rem; color:var(--muted); border-bottom:2px solid transparent;
  margin-bottom:-1px; display:inline-flex; align-items:center; gap:7px; white-space:nowrap}
.hk-tab:hover{color:var(--ink)}
.hk-tab.active{color:var(--ink); border-bottom-color:var(--accent); font-weight:600}
.hk-tab-n{font-size:.7rem; font-weight:600; background:var(--track); color:var(--muted); border-radius:100px; padding:1px 7px; font-variant-numeric:tabular-nums}
.hk-tab.active .hk-tab-n{background:var(--accent-soft); color:var(--accent-ink)}
.hk-pane{display:flex; flex-direction:column; gap:18px}

/* Thẻ gói / thẻ tài khoản */
.hk-pks{display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap:16px; align-items:start}
.hk-pk{padding:16px 18px; display:flex; flex-direction:column; gap:12px}
.hk-pk.is-done{background:var(--panel-2); box-shadow:none}
.hk-pk-h{display:flex; justify-content:space-between; align-items:flex-start; gap:12px}
.hk-pk-h > :last-child{flex:0 0 auto; white-space:nowrap}
.hk-pk-t{font-weight:600; line-height:1.35}
.hk-big{font-size:1.15rem; font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; text-align:right}
.hk-split{display:flex; justify-content:space-between; gap:8px; font-size:.8rem; color:var(--muted)}
.hk-split b{color:var(--ink); font-weight:600}
.hk-m3{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; background:var(--panel-2); border-radius:var(--r-sm); padding:10px 12px}
.hk-pk.is-done .hk-m3{background:var(--panel)}
.hk-m3 div{display:flex; flex-direction:column; min-width:0}
.hk-m3 span{font-size:.7rem; color:var(--muted); font-weight:500}
.hk-m3 b{font-size:.92rem; font-weight:600; font-variant-numeric:tabular-nums}
.hk-m3 s{font-size:.72rem; color:var(--soft)}
.hk-det{border-top:1px solid var(--line); padding-top:10px}
.hk-det > summary{cursor:pointer; font-size:.82rem; font-weight:500; color:var(--muted); list-style:none; display:flex; align-items:center; gap:6px}
.hk-det > summary::-webkit-details-marker{display:none}
.hk-det > summary::before{content:"\F285"; font-family:"bootstrap-icons"; font-size:.7rem; transition:transform .15s}
.hk-det[open] > summary::before{transform:rotate(90deg)}
.hk-det[open] > summary{margin-bottom:6px}

/* Phiếu order */
.hk-order > summary{cursor:pointer; list-style:none; display:flex; align-items:center; gap:6px 14px; padding:13px 18px; flex-wrap:wrap}
.hk-order > summary::-webkit-details-marker{display:none}
.hk-order > summary::before{content:"\F285"; font-family:"bootstrap-icons"; font-size:.7rem; color:var(--soft); transition:transform .15s}
.hk-order[open] > summary::before{transform:rotate(90deg)}
.hk-order[open] > summary{border-bottom:1px solid var(--line)}
.hk-order-b{padding:10px 18px 14px}
.hk-order-d{font-weight:600; font-variant-numeric:tabular-nums}
.hk-order-c{color:var(--muted); font-size:.82rem; flex:1; min-width:0}
.hk-order-t{font-weight:700; font-variant-numeric:tabular-nums}

/* Dòng thời gian */
.hk-tl{list-style:none; margin:0; padding:4px 0 0 4px; display:flex; flex-direction:column}
.hk-tl > li{position:relative; padding:0 0 18px 26px; display:grid; gap:6px; grid-template-columns:minmax(0,1fr)}
.hk-tl > li::before{content:""; position:absolute; left:4px; top:9px; bottom:-9px; width:2px; background:var(--line)}
.hk-tl > li:last-child::before{display:none}
.hk-tl > li::after{content:""; position:absolute; left:0; top:4px; width:10px; height:10px; border-radius:50%; background:var(--panel); box-shadow:inset 0 0 0 2px var(--soft)}
.hk-tl > li.is-next::after{box-shadow:inset 0 0 0 3px var(--accent)}
.hk-tl-d{font-size:.8rem; font-weight:600; color:var(--muted); display:flex; align-items:center; gap:8px; font-variant-numeric:tabular-nums}
.hk-tl-b{background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md); padding:12px 16px; min-width:0}
.hk-note{margin-top:6px; font-size:.84rem; background:var(--panel-2); border-radius:var(--r-sm); padding:8px 10px; overflow-wrap:anywhere}

/* Lịch hẹn: nhóm theo ngày */
.hk-day-h{display:flex; align-items:baseline; gap:10px; padding:12px 18px; background:var(--panel-2); border-bottom:1px solid var(--line); border-top:1px solid var(--line)}
.hk-day-h:first-child{border-top:0}
.hk-day-h b{font-size:.9rem}
.hk-day-h.today b{color:var(--accent-ink)}
.hk-time{font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap}

/* Nhóm ô lọc ẩn/hiện (ngày tùy chọn) — con nằm thẳng trong lưới thanh lọc */
.d-contents{display:contents}

/* Đăng nhập */
.hk-auth{display:flex; align-items:center; justify-content:center; min-height:100%; padding-block:24px;
  padding-left:max(16px, env(safe-area-inset-left,0px)); padding-right:max(16px, env(safe-area-inset-right,0px))}
.hk-auth-card{width:100%; max-width:400px; padding:30px 28px; display:flex; flex-direction:column; gap:16px}
.hk-auth-logo{height:28px; width:auto; align-self:flex-start}
.hk-auth-card .form-label{text-transform:none; letter-spacing:0; font-size:.82rem}
.hk-auth-card .form-control{height:42px}
.hk-auth-card .hk-btn{height:44px}



/* ══════════ ĐIỆN THOẠI (≤ 575px) ══════════ */
.hk-mob{display:none}
.hk-mob-c{display:none}
@media (min-width:768px){ .hk-wcol{min-width:200px} }
@media (max-width:767.98px){
  .hk-mob{display:block}
  .hk-mob-c{display:table-cell}
  .hk-desk{display:none !important}
}
@media (max-width:575.98px){
  .hk-h1{font-size:1.25rem}
  .hk-card-h{flex-wrap:wrap; padding:12px 14px}
  .hk-card-b{padding:14px}
  .hk-list > li{padding:10px 14px}
  .hk-hold a{padding:12px 14px}
  .hk-table > :not(caption) > * > *:first-child{padding-left:14px}
  .hk-table > :not(caption) > * > *:last-child{padding-right:14px}
  .hk-table.sm > :not(caption) > * > *:first-child{padding-left:0}
  .hk-table.sm > :not(caption) > * > *:last-child{padding-right:0}
  .hk-who{min-width:0}
  .hk-table .hk-who .hk-av-sm{display:none}
  /* Tab hồ sơ: lưới 3×2 thấy hết 6 tab, không phải vuốt ngang */
  .hk-tabs{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:4px; padding:4px; border:0; border-radius:var(--r-md);
    background:var(--track); overflow:visible; margin-bottom:0}
  .hk-tab{justify-content:center; padding:8px 4px; border:0; margin:0; border-radius:8px; font-size:.8rem; gap:4px;
    min-width:0; white-space:normal; text-align:center; line-height:1.25; flex-wrap:wrap}
  .hk-tab.active{background:var(--panel); box-shadow:0 1px 3px rgba(16,18,22,.1); color:var(--accent-ink)}
  .hk-tab-n{padding:0 6px}   /* nhường chỗ cho tên + thông tin */
  .hk-seg{display:flex; flex-wrap:wrap; width:100%}
  .hk-seg a,.hk-seg button{flex:1 1 auto; justify-content:center}
  .hk-kpi-l{white-space:normal; line-height:1.3}
  /* 3 ô chỉ số: giữ 3 cột thu gọn thay vì 2+1 lẻ */
  .hk-kpis.k3{grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px}
  .hk-kpis.k3 .hk-kpi{padding:10px 10px}
  .hk-kpis.k3 .hk-kpi-v{font-size:1rem}
  .hk-kpis.k3 .hk-kpi-l i{display:none}
  .hk-kpis.k3 .hk-kpi-l{letter-spacing:.02em}
  .hk-kpis.k3 .hk-kpi-v{margin-top:6px}
  .hk-kpis.k3 .hk-kpi-l,.hk-kpis.k3 .hk-kpi-s{font-size:.7rem}
  /* Biểu đồ: chỉ giữ nhãn ngày được đánh dấu cho màn hẹp */
  .hk-bar-c > b.d{display:none}
  .hk-bar-c > b.m{display:block}
  .hk-bars{gap:1px}
  .hk-bar-c > i{border-radius:2px 2px 0 0}
  /* Thanh lọc kỳ trên dashboard */
  .hk-pact,.hk-pact form{width:100%}
  .hk-pact .form-select{flex:1 1 140px; width:auto !important}
  .hk-custom{flex-wrap:wrap; width:100%}
  .hk-custom input{flex:1 1 120px; min-width:0}
  .hk-pager{padding:10px 14px; justify-content:center}
  .hk-order > summary{padding:12px 14px}
  .hk-order-b{padding:10px 14px 12px}
  .hk-pk{padding:14px}
  .hk-m3{padding:8px 10px}
  .hk-day-h{padding:10px 14px}
  .hk-pcard-top{padding:18px 16px 16px}
  .hk-dl dt{padding-left:14px}
  .hk-dl dd{padding-right:14px}
}


/* ══════════ CHUYỂN ĐỘNG ══════════
   Nội dung luôn hiển thị đủ; hiệu ứng chỉ là lớp mượt khi tải trang / tương tác. */
@keyframes hk-rise{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}
@keyframes hk-fade{from{opacity:0} to{opacity:1}}
@keyframes hk-pop{from{opacity:0; transform:translateY(-6px) scale(.98)} to{opacity:1; transform:none}}
@keyframes hk-grow-x{from{transform:scaleX(0)} to{transform:scaleX(1)}}
@keyframes hk-grow-y{from{transform:scaleY(0)} to{transform:scaleY(1)}}
.hk-main > *{animation:hk-rise .45s var(--ease) both}
.hk-main > :nth-child(2){animation-delay:.04s} .hk-main > :nth-child(3){animation-delay:.08s}
.hk-main > :nth-child(4){animation-delay:.12s} .hk-main > :nth-child(5){animation-delay:.16s}
.hk-main > :nth-child(n+6){animation-delay:.2s}
.hk-kpis > .hk-kpi{animation:hk-rise .5s var(--ease) both}
.hk-kpis > .hk-kpi:nth-child(2){animation-delay:.05s} .hk-kpis > .hk-kpi:nth-child(3){animation-delay:.1s}
.hk-kpis > .hk-kpi:nth-child(4){animation-delay:.15s} .hk-kpis > .hk-kpi:nth-child(5){animation-delay:.2s}
.hk-kpis > .hk-kpi:nth-child(6){animation-delay:.25s}
.hk-bar > span{transform-origin:left; animation:hk-grow-x .9s var(--ease) .1s both}
.hk-bar-c > i{transform-origin:bottom; animation:hk-grow-y .7s var(--ease) .15s both}
.hk-pane:not([hidden]){animation:hk-fade .3s var(--ease)}
.hk-det[open] > :not(summary),.hk-order[open] > .hk-order-b{animation:hk-fade .25s var(--ease)}
.dropdown-menu.show,.hk-qs-menu:not([hidden]){animation:hk-pop .18s var(--ease)}
.hk-nav,.hk-tab,.hk-seg a,.hk-seg button,.btn,.hk-pages a,.hk-hold a,.hk-qs-item,.hk-user,.hk-link,.hk-who-t,.hk-list-t,
.hk-table > tbody > tr > *,.hk-card,.form-control,.form-select{transition:background-color .18s var(--ease), color .18s var(--ease),
  border-color .18s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease)}
.hk-hold a:hover .bi-chevron-right{transform:translateX(3px)}
.hk-hold .bi-chevron-right{transition:transform .2s var(--ease)}
.btn:active,.hk-bnav a:active{transform:scale(.97)}
.hk-tab{position:relative}
.hk-det > summary::before,.hk-order > summary::before{transition:transform .25s var(--ease)}

/* ══════════ THANH ĐIỀU HƯỚNG DƯỚI ĐÁY (điện thoại, máy tính bảng) ══════════ */
.hk-bnav{display:none}
@media (max-width:991.98px){
  .hk-bnav{display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); position:fixed; left:0; right:0; bottom:0; z-index:44;
    background:rgba(255,255,255,.94); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border-top:1px solid var(--line);
    padding:6px max(6px, env(safe-area-inset-right,0px)) calc(6px + env(safe-area-inset-bottom,0px)) max(6px, env(safe-area-inset-left,0px));
    box-shadow:0 -4px 20px rgba(16,18,22,.06)}
  .hk-bnav a,.hk-bnav button{border:0; background:none; font:inherit; display:flex; flex-direction:column; align-items:center; gap:3px;
    padding:4px 2px; color:var(--muted); font-size:.68rem; font-weight:500; line-height:1.2; text-align:center; min-width:0;
    transition:color .2s var(--ease), transform .15s var(--ease)}
  .hk-bnav span.ic{width:min(46px, 100%); height:28px; border-radius:14px; display:grid; place-items:center; font-size:1.15rem;
    transition:background-color .25s var(--ease), color .25s var(--ease)}
  .hk-bnav .on{color:var(--accent-ink); font-weight:600}
  .hk-bnav .on span.ic{background:var(--accent-soft); color:var(--accent)}
  .hk-bnav b{font-size:clamp(.6rem, 2.9vw, .68rem); font-weight:inherit; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%}
  .hk-body{padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important; transition:none !important; scroll-behavior:auto !important}
}