/* CLINIC-SCOPE: shared */
/* Header nhận diện chung. Hành chính nằm trong popover top-layer, không đổi layout màn.
   Giữ các ID DOM của module; bối cảnh và cảnh báo nghiệp vụ không đưa vào popup. */
.kb-ident { container-type:inline-size; display:flex; flex:0 0 auto; flex-direction:column; margin-bottom:0; padding:0!important; gap:0!important; min-height:0!important; background:var(--surface-2); border:0!important; border-top:var(--kb-ident-vien-tren, 2px solid var(--brand))!important; border-bottom:1px solid var(--line-brand)!important; border-radius:0!important; box-shadow:none; }
/* Ngay dưới thanh header bàn làm việc (.wd-hdr, đã cùng màu brand): bỏ viền trên 2px — viền chỉ có ở cột phải nên
   thanh xanh trông dày hơn 2px ở nửa phải, tạo bậc nhấp nhô tại mép cột danh sách (user báo 27/10). */
.wd-hdr + .ws-body { --kb-ident-vien-tren: 0 solid transparent; }
.kb-ident .kb-hd-row { display:flex; align-items:center; flex-wrap:wrap; gap:4px 12px; min-height:36px; padding:4px 10px; }
.kb-ident .kb-id-side { flex:0 0 auto; min-width:0; padding:0!important; background:transparent; border:0; }
.kb-makcb-wrap { position:relative; display:flex; align-items:center; gap:8px; min-width:0; }
.kb-makcb-wrap>label { flex:none; margin:0; font-size:var(--fs-sm); color:var(--muted); font-weight:var(--fw-semibold); white-space:nowrap; }
.kb-ident .kb-makcb,.kb-ident .kb-idbox { width:150px!important; height:28px!important; min-width:0; padding:0 28px 0 8px!important; border:1px solid var(--line-2)!important; border-radius:var(--radius-sm)!important; background:var(--surface); color:var(--text); font:var(--fw-semibold) var(--fs-base) var(--font-mono); }
.kb-makcb::placeholder,.kb-idbox::placeholder { font-size:var(--fs-xs); font-weight:var(--fw-normal); }
.kb-makcb:focus-visible,.kb-idbox:focus-visible { outline:2px solid var(--focus-bd); outline-offset:1px; }
.kb-ident span.kb-makcb,.kb-ident span.kb-idbox { display:inline-flex; align-items:center; border-color:transparent!important; background:transparent; padding-right:0!important; }
/* Căn giữa dọc bằng top/bottom:0 + flex, KHÔNG dùng transform: partCss/button.css (@layer clinic-buttons)
   ép transform:none!important lên .kb-makcb-ico nên translateY(-50%) bị vô hiệu -> icon tụt xuống ~7px.
   PHẢI để display:flex!important: FontAwesome (.fa-solid{display:var(--fa-display,inline-block);line-height:1})
   cùng specificity (0,1,0) nhưng nạp SAU benhnhan-head.css nên thắng tie -> icon về inline-block (thực tế
   --fa-display=block) làm align-items vô hiệu, glyph dồn lên đỉnh hộp cao 30px -> icon lệch lên trên. */
.kb-makcb-ico { position:absolute; top:0; bottom:0; right:8px; display:flex!important; align-items:center!important; justify-content:center!important; color:var(--brand); cursor:pointer; font-size:var(--fs-md); }
.kb-ident .kb-id-meta,.kb-ident .kb-registered,.kb-ident .kb-admin-dob,.kb-ident .kb-addr { display:none!important; }
.kb-ident .kb-id-main { flex:1 1 240px; min-width:0; display:flex; align-items:center; gap:12px; padding:0!important; }
.kb-ident .kb-id-l1 { flex:1; display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; min-width:0; }
.kb-ident .kb-id-name { min-width:0; color:var(--text-strong); font:var(--fw-bold) var(--fs-xl)/1.2 var(--font-ui)!important; overflow-wrap:anywhere; white-space:normal; }
.kb-id-name .muted { color:var(--muted); font-size:var(--fs-lg); }
.kb-ident .kb-chips { flex:1 1 auto; min-width:0; display:flex; flex-wrap:wrap; align-items:baseline; gap:4px; color:var(--muted); font-size:var(--fs-base); }
.kb-chips .chip,.kb-admin-chip { display:inline-flex; align-items:center; gap:4px; padding:0; border:0; background:transparent; font-size:inherit; color:inherit; white-space:nowrap; }
.kb-chips>*+*::before { content:'·'; margin-right:4px; color:var(--muted); }
.kb-chips .chip i { font-size:var(--fs-xs); }
.kb-ident .kb-id-contact { display:flex; align-items:center; flex:none; margin:0; }
.kb-phone { display:flex; align-items:center; gap:5px; color:var(--muted); font-size:var(--fs-sm); white-space:nowrap; }
.kb-phone i { color:var(--brand); }
.kb-ident .kb-hd-status { flex:none; padding:2px 6px; border:0; border-radius:var(--radius-sm); font-size:var(--fs-sm); }
.kb-ident .kb-hd-status:empty { display:none; }
.kb-ident .kb-badge { display:inline-flex; align-items:center; gap:4px; margin:0; padding:0; border:0; background:transparent; color:inherit; font-size:var(--fs-sm); font-weight:var(--fw-semibold); white-space:normal; }
.hd-cho :is(.kb-hd-status,.kb-muc-trangthai) { color:var(--st-wait-text); background:var(--st-wait-bg); }
.hd-dang :is(.kb-hd-status,.kb-muc-trangthai) { color:var(--st-progress-text); background:var(--st-progress-bg); }
.hd-dakham :is(.kb-hd-status,.kb-muc-trangthai),.hd-datt :is(.kb-hd-status,.kb-muc-trangthai) { color:var(--st-done-text); background:var(--st-done-bg); }
.hd-ketthuc :is(.kb-hd-status,.kb-muc-trangthai) { color:var(--st-end-text); background:var(--st-end-bg); }
.hd-chokq :is(.kb-hd-status,.kb-muc-trangthai),.hd-info :is(.kb-hd-status,.kb-muc-trangthai) { color:var(--badge-info-text); background:var(--badge-info-bg); }
.hd-danger :is(.kb-hd-status,.kb-muc-trangthai) { color:var(--badge-danger-text); background:var(--badge-danger-bg); }
.hd-warning :is(.kb-hd-status,.kb-muc-trangthai) { color:var(--badge-warn-text); background:var(--badge-warn-bg); }
.kb-ident .kb-info-button { display:inline-flex!important; align-items:center; justify-content:center; flex:none; width:28px!important; min-width:28px; height:28px!important; margin-left:auto; padding:0!important; border:1px solid transparent!important; border-radius:var(--radius-sm); color:var(--btn-primary)!important; background:transparent!important; cursor:pointer; font-size:var(--fs-lg)!important; }
.kb-ident .kb-info-button:hover,.kb-ident .kb-info-button[aria-expanded=true] { border-color:var(--btn-primary)!important; background:var(--surface)!important; }
.kb-ident .kb-info-button:focus-visible { outline:2px solid var(--btn-primary); }
.kb-ident .kb-context-row { display:flex; flex-wrap:wrap; align-items:center; gap:4px 16px; margin:0; padding:3px 10px; border:0; border-top:1px solid var(--line); background:var(--grid-neutral-header); }
.kb-context-row:not(:has(.kb-ctx-i)):not(:has(.kb-ident-note:not(:empty))) { display:none!important; }
.kb-ident .kb-hd-ctx { display:flex; flex-wrap:wrap; gap:4px 16px; width:auto; min-width:0; }
.kb-hd-ctx:empty { display:none; }
.kb-ident .kb-ctx-i { display:flex; align-items:baseline; gap:6px; min-width:0; font-size:var(--fs-sm); line-height:1.4; }
.kb-ctx-i>i { color:var(--muted); font-style:normal; flex:none; }
.kb-ctx-i>b { color:var(--text); font-weight:var(--fw-semibold); overflow-wrap:anywhere; }
.kb-prescription .kb-ctx-i { font-size:var(--fs-base); }
.kb-prescription .kb-ctx-i>b { color:var(--brand-dark); font-weight:var(--fw-bold); }
.kb-ident .kb-ident-note { padding:0; background:transparent; border:0; font-size:var(--fs-sm); color:var(--muted); }
.kb-ident-note:empty { display:none!important; }
.kb-ident-alert { display:flex; align-items:center; gap:8px; min-width:0; padding:4px 10px; border-top:1px solid var(--badge-danger-border); background:var(--badge-danger-bg); color:var(--badge-danger-text); font-size:var(--fs-sm); }
.kb-ident-alert[data-kind=warning] { background:var(--badge-warn-bg); color:var(--badge-warn-text); border-color:var(--badge-warn-border); }
.kb-ident-alert[data-kind=info] { background:var(--badge-info-bg); color:var(--badge-info-text); border-color:var(--badge-info-border); }
.kb-ident-allergy:empty { display:none; }
.kb-ident-allergy { min-width:0; overflow-wrap:anywhere; }
.kb-ident-allergy .al { display:inline-block; font-weight:var(--fw-semibold); margin-right:6px; }
.kb-header-alert { display:flex; flex-wrap:wrap; gap:4px 8px; align-items:baseline; }
.kb-header-alert>i,.kb-header-alert>b { flex:none; }
.kb-header-alert>span { overflow-wrap:anywhere; }
/* Popover thuộc DOM của màn/modal nhưng nằm trên top layer, không bị overflow cắt. */
.kb-details { position:fixed!important; inset:auto; margin:0!important; padding:0!important; border:1px solid var(--line-2)!important; border-radius:0!important; background:var(--surface)!important; color:var(--text)!important; box-shadow:var(--shadow-lg); overflow:auto; font:var(--fs-base)/1.4 var(--font-ui); container-type:inline-size; }
.kb-details:not(:popover-open) { display:none!important; }
.kb-details::backdrop { background:transparent; pointer-events:none; }
.kb-details .kb-details-head { display:flex; align-items:center; justify-content:space-between; min-height:30px; padding:0 8px; border-bottom:1px solid var(--line); background:var(--grid-neutral-header); }
.kb-details .kb-details-tools { display:flex; align-items:center; gap:2px; }
.kb-details :is(.kb-details-close,.kb-details-cfg) { width:28px!important; height:28px!important; padding:0!important; background:transparent!important; border:0!important; color:var(--muted)!important; cursor:pointer; }
.kb-details .kb-details-body { padding:8px 10px 12px; }
:is(.kb-details,.kb-cfg-xt) h3 { margin:0 0 4px!important; color:var(--muted); font-size:var(--fs-xs)!important; font-weight:var(--fw-semibold); }
:is(.kb-details,.kb-cfg-xt-ct) dl { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:4px 16px; margin:0; }
:is(.kb-details,.kb-cfg-xt-ct) dl>div { display:flex; align-items:baseline; gap:8px; min-width:0; }
:is(.kb-details,.kb-cfg-xt-ct) dt { font-size:var(--fs-sm); color:var(--muted); font-weight:var(--fw-normal); white-space:nowrap; }
:is(.kb-details,.kb-cfg-xt-ct) dd { margin:0; font-weight:var(--fw-semibold); overflow-wrap:anywhere; }
.kb-detail-wide { grid-column:span 2; }
/* MỘT THANH (nút tuỳ chỉnh): mọi control sau Họ tên nằm trong .kb-chips theo thứ tự cấu hình.
   .kb-day-phai = khoảng đẩy các control sau nó ra mép phải (mặc định: điện thoại + trạng thái). */
.kb-chips>.kb-day-phai { flex:1 0 12px; align-self:stretch; }
.kb-chips>.kb-day-phai::before,.kb-chips>.kb-day-phai~*::before { content:none; }
.kb-chips>.kb-day-phai~* { margin-left:8px; }
.kb-ident .kb-muc-trangthai { display:inline-flex; align-items:center; padding:2px 6px; border-radius:var(--radius-sm); font-size:var(--fs-sm); }
.kb-ident .kb-muc-boicanh { display:inline-flex; flex-wrap:wrap; align-items:baseline; gap:2px 16px; min-width:0; }
.kb-chips .kb-them-i { max-width:320px; }
.kb-chips .kb-them-i>b { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; overflow-wrap:normal; }
.kb-chips .kb-them-i[data-k="chandoanicd"]>b { color:var(--brand-dark); }
/* Chẩn đoán luôn đọc được đủ trên thanh: không cắt «…», dài quá thì xuống dòng. */
.kb-chips .kb-them-i:is([data-k="chandoansobo"],[data-k="chandoanicd"],[data-k="chandoanmat"]) { max-width:none; }
.kb-chips .kb-them-i:is([data-k="chandoansobo"],[data-k="chandoanicd"],[data-k="chandoanmat"])>b { overflow:visible; white-space:normal; overflow-wrap:anywhere; }
/* Khối CHẨN ĐOÁN trong bảng chi tiết: Sơ bộ / ICD-10 mỗi nguồn một dòng, nhãn cột trái thẳng hàng. */
.kb-cd-dong { display:grid; grid-template-columns:72px minmax(0,1fr); gap:8px; align-items:baseline; padding:2px 0; }
.kb-cd-nhan { font-size:var(--fs-sm); color:var(--muted); }
.kb-cd-gt { min-width:0; overflow-wrap:anywhere; white-space:pre-wrap; }
.kb-cd-gt .muted { color:var(--muted); font-style:italic; }
.kb-cd-icd { margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:2px; }
.kb-cd-icd b { color:var(--brand-dark); }
.kb-cd-tag { margin-left:4px; font-size:var(--fs-xs); color:var(--st-done-text); font-weight:var(--fw-semibold); }
/* Hộp tuỳ chỉnh thông tin hiển thị */
.kb-cfg { display:flex; flex-direction:column; gap:10px; padding:10px; border-radius:var(--radius-lg); background:var(--surface-2); }
.kb-cfg-bang { width:100%; border-collapse:collapse; font-size:var(--fs-base); }
.kb-cfg-bang th, .kb-cfg-bang td { padding:3px 8px; border-bottom:1px solid var(--line); text-align:left; }
.kb-cfg-bang thead th { color:var(--muted); font-size:var(--fs-sm); font-weight:var(--fw-semibold); background:var(--grid-neutral-header); }
.kb-cfg-bang tbody th { font-weight:var(--fw-normal); }
.kb-cfg-bang .kb-cfg-o, .kb-cfg-bang thead th:not(:first-child) { width:92px; text-align:center; color:var(--muted); }
.kb-cfg-o input { width:16px; height:16px; margin:0; accent-color:var(--brand); cursor:pointer; }
.kb-cfg-chon { display:flex; flex-wrap:wrap; align-items:center; gap:6px 16px; margin:0; padding:0; border:0; }
.kb-cfg-chon legend { float:left; width:auto; margin:0 4px 0 0; padding:0; font-size:var(--fs-sm); color:var(--muted); }
.kb-cfg-chon label { display:inline-flex; align-items:center; gap:6px; margin:0; font-weight:var(--fw-normal); cursor:pointer; }
/* Trên: bảng tick (trái) + phạm vi lưu (phải); dưới: xem trước trải hết chiều rộng. */
.kb-cfg-tren { display:grid; grid-template-columns:minmax(0,1fr) 220px; gap:16px; align-items:start; }
.kb-cfg-phai { display:flex; flex-direction:column; gap:14px; }
.kb-cfg-phai .kb-cfg-chon { flex-direction:column; align-items:flex-start; gap:6px; }
.kb-cfg-phai .kb-cfg-chon legend { float:none; margin:0 0 2px; font-weight:var(--fw-semibold); }
.kb-cfg-xt { display:flex; flex-direction:column; gap:6px; }
/* Khung nổi: danh sách thông tin (chia 2 cột), phạm vi lưu, xem trước — mỗi khối một thẻ nổi trên nền hộp. */
.kb-cfg-the { min-width:0; padding:10px 12px; border:1px solid var(--line-2); border-radius:var(--radius-lg); background:var(--surface); box-shadow:var(--shadow-sm); }
.kb-cfg-the.kb-cfg-ds>h3, .kb-cfg-the.kb-cfg-phai>h3 { margin:0 0 6px; font-size:var(--fs-sm); font-weight:var(--fw-semibold); color:var(--text-strong); }
.kb-cfg-2cot { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:0 20px; align-items:start; }
@media (max-width:900px) { .kb-cfg-2cot { grid-template-columns:1fr; } }
/* Xem trước = bản sao khối thật; control kéo thả được, khoảng đẩy phải hiện thành ô gạch đứt để kéo. */
.kb-cfg-xt-thanh .kb-chips>[data-k] { cursor:grab; border-radius:var(--radius-sm); }
.kb-cfg-xt-thanh .kb-chips>.kb-day-phai { min-height:22px; border:1px dashed var(--line-2); }
/* Xem trước: mỗi control đang bật một khung xanh nhạt (biết ngay mục nào đang hiện), bỏ dấu «·» ngăn cách. */
.kb-cfg-xt-thanh .kb-chips { gap:6px; }
.kb-cfg-xt-thanh .kb-chips>*::before { content:none; }
.kb-cfg-xt-thanh .kb-chips>.kb-day-phai~* { margin-left:0; }
.kb-cfg-xt-thanh .kb-chips>[data-k]:not(.kb-day-phai) { padding:1px 6px; border:1px solid var(--badge-info-border); }
.kb-cfg-xt-thanh .kb-chips>[data-k]:not(.kb-day-phai):not(.kb-muc-trangthai) { background:var(--badge-info-bg); }
.kb-cfg-xt-thanh .kb-chips>[data-k]:focus-visible, .kb-cfg-bang tr[data-k]:focus-visible { outline:2px solid var(--focus-bd); outline-offset:1px; }
.kb-dang-keo { opacity:.45; }
.kb-tha-vao { outline:2px dashed var(--brand); outline-offset:2px; }
.kb-cfg-bang tr[data-k] { cursor:grab; }
.kb-cfg-keo { margin-right:4px; color:var(--muted); }
.kb-cfg-co-dinh th, .kb-cfg-co-dinh td { color:var(--muted); }
.kb-cfg-khoang th { font-style:italic; }
.kb-cfg-goiy { font-size:var(--fs-xs); font-weight:var(--fw-normal); color:var(--muted); }
.kb-cfg-xt-ct { container-type:inline-size; padding:8px 10px; border:1px solid var(--line-2); background:var(--surface); }
@media (max-width:720px) { .kb-cfg-tren { grid-template-columns:1fr; } }
.kb-cfg-act { display:flex; justify-content:flex-end; gap:8px; padding-top:8px; border-top:1px solid var(--line); }
.kb-details-diagnosis { border-top:1px dashed var(--line-2); padding-top:8px; margin-top:8px; }
.kb-details-diagnosis p { margin:0; white-space:pre-wrap; overflow-wrap:anywhere; }
.kb-details-diagnosis .muted { color:var(--muted); font-style:italic; }
@container(max-width:1100px) { :is(.kb-details,.kb-cfg-xt-ct) dl { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@container(max-width:760px) { .kb-ident .kb-id-contact { display:none; } .kb-ident .kb-hd-status { max-width:220px; } :is(.kb-details,.kb-cfg-xt-ct) dl { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@container(max-width:430px) { .kb-ident .kb-hd-row { gap:4px 8px; } .kb-ident .kb-id-main { flex-basis:180px; } :is(.kb-details,.kb-cfg-xt-ct) dl { grid-template-columns:1fr; } .kb-detail-wide { grid-column:auto; } }
.kb-ident.kb-prescription .kb-hd-row>.kb-context-row { border:0; padding:0; background:transparent; flex:0 1 auto; }