/* ============================================================
   ui1b.css — GIAO DIỆN "1b" (01/10/2026)
   Lớp phủ lên app.css theo "Cải thiện giao diện Classic/HUONG-DAN-THIET-KE.md":
     · không trang trí: không gradient, không viền màu trên đầu thẻ, không bóng
     · màu CHỈ để báo trạng thái; bình thường là xám
     · sidebar tối, nhóm thu gọn được, không biểu tượng
     · điện thoại (< 768px): thanh tab dưới 5 mục, menu tối dạng lưới
   Để riêng một file: gỡ dòng <link> trong index.html là về giao diện cũ.
   ============================================================ */

/* ---------- Token (chế độ sáng) ---------- */
html:not([data-theme="dark"]) {
  --bg:            #F7F7F9;
  --surface:       #FFFFFF;
  --surface-2:     #FAFAFB;
  --surface-3:     #F2F2F5;
  --border:        #ECEDF0;
  --border-strong: #E3E4E8;

  --text:   #17181C;
  --text-2: #5A5E69;
  --text-3: #8A8D96;

  --primary:      #4F46E5;
  --primary-600:  #4338CA;
  --primary-soft: #EEF0FF;

  --success: #12A150;  --success-soft: #EFFBF3;
  --warning: #C2410C;  --warning-soft: #FFF4E5;
  --danger:  #D92D20;  --danger-soft:  #FEF3F2;
  --info:    #4338CA;  --info-soft:    #EEF0FF;
  --purple:  #6D28D9;  --purple-soft:  #F3EEFF;

  --sh-sm: none;
  --sh:    none;
}
:root {
  --sidebar-w: 220px;
  --ink: #17181C;
  --line-soft: #F4F4F6;
  --faint: #9A9DA6;
  --r: 10px; --r-lg: 12px;
}
[data-theme="dark"] { --line-soft: #232733; --faint: #6b7183; }

body {
  font-family: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 13.5px;
}
.num, .stat__value { font-variant-numeric: tabular-nums; }

/* ---------- Sidebar tối ---------- */
.sidebar { background: #17181C; border-right: 0; color: #C9CBD2; }
.sidebar__brand { border-bottom: 0; padding: 0 18px; }
.sidebar__logo { background: var(--primary); border-radius: 8px; width: 30px; height: 30px; }
.sidebar__title { color: #fff; font-size: 16px; font-weight: 700; }
/* Logo Classic thật (icons/logo-classic-white.png, nền trong suốt) — 01/10/2026 */
.sidebar__logoimg { display: block; height: 38px; width: auto; }
.sidebar__nav { padding: 6px 10px 14px; }
.nav__item {
  height: 34px; padding: 0 12px; gap: 8px;
  color: #C9CBD2; font-size: 14px; font-weight: 500; border-radius: 8px;
}
.nav__item:hover { background: #24252B; color: #fff; }
.nav__item.is-active, [data-theme="dark"] .nav__item.is-active { background: #2A2B33; color: #fff; font-weight: 600; }
.nav__icon { display: none; }
.nav__grp { margin-top: 2px; }
.nav__label {
  all: unset; box-sizing: border-box; cursor: pointer;
  width: 100%; height: 34px; padding: 0 12px; margin: 0;
  display: flex; align-items: center; gap: 8px;
  color: #C9CBD2; font-size: 14px; font-weight: 500; border-radius: 8px;
}
.nav__label:hover { background: #24252B; color: #fff; }
.nav__chev::after { content: '▾'; font-size: 10px; color: #6B6F7A; }
.nav__grp.is-closed .nav__chev::after { content: '▸'; }
.nav__sub .nav__item { padding-left: 24px; height: 31px; font-size: 13.5px; color: #A4A7B0; }
.nav__sub .nav__item.is-active { color: #fff; }
.nav__grp.is-closed .nav__sub { display: none; }
.nav__grp:not(.is-closed) .nav__badge--grp { display: none !important; }
.nav__badge {
  /* Hình tròn đỏ nền đặc bao quanh số (anh Dũng 02/10/2026) — 1 chữ số là tròn
     đúng 20px, 2–3 chữ số tự giãn thành viên thuốc. */
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; box-sizing: border-box;
  margin-left: auto; flex: none;
  background: #E5484D; color: #fff; font-size: 11.5px; font-weight: 700; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 2px rgba(229, 72, 77, .22);
}
.nav__badge.hidden { display: none; }
.sidebar__foot { border-top: 1px solid #24252B; }
.user-chip:hover { background: #24252B; }
.user-chip__av { background: #3A3B44; }
.user-chip__name { color: #fff; }
.user-chip__role { color: #8A8D96; }
.sidebar .icon-btn { color: #8A8D96; }
.sidebar .icon-btn:hover { background: #24252B; color: #fff; }
.sidebar__ver { color: #55575F; }
.sidebar ::-webkit-scrollbar-thumb { background: #2A2B33; border-color: #17181C; }

/* ---------- Thanh tiêu đề ---------- */
.topbar {
  background: var(--surface); backdrop-filter: none;
  padding: 0 28px; gap: 12px;
}
.topbar__title { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.topbar__sub { font-size: 12.5px; color: var(--text-3); }
.topbar__tools { display: flex; align-items: center; gap: 8px; }
.view { padding: 24px 28px; }

/* ---------- Thẻ ---------- */
.card { border-radius: 12px; box-shadow: none; }
.card__head { padding: 14px 18px; }
.card__title { font-size: 14.5px; font-weight: 600; letter-spacing: 0; }
.card__sub { font-size: 12.5px; }

/* ---------- Nút ---------- */
.btn {
  height: 34px; padding: 0 14px; border-radius: 8px;
  border-color: var(--border-strong); font-size: 13px; font-weight: 600;
  justify-content: center;
}
.btn--sm { height: 30px; padding: 0 11px; font-size: 12.5px; }
.btn--primary:hover { background: var(--primary-600); border-color: var(--primary-600); }
/* MỌI NÚT MÀU XANH (anh Dũng 30/10/2026: "nếu là nút thì button phải có màu xanh").
   Nút thường + nút ghost: nền xanh nhạt, viền và chữ xanh — nhìn là biết bấm được.
   Nút chính (primary): xanh đặc — việc chính / lựa chọn đang bật. Đỏ (danger) và cam (warning) giữ nguyên nghĩa. */
.btn:not(.btn--primary):not(.btn--danger):not(.btn--warning) {
  background: var(--primary-soft);
  border-color: color-mix(in srgb, var(--primary) 38%, transparent);
  color: var(--primary);
}
.btn:not(.btn--primary):not(.btn--danger):not(.btn--warning):hover:not(:disabled) {
  background: color-mix(in srgb, var(--primary) 16%, var(--surface));
  border-color: var(--primary);
}
[data-theme="dark"] .btn:not(.btn--primary):not(.btn--danger):not(.btn--warning) { color: #a5b4fc; }
.icon-btn { border-radius: 8px; }

/* Tab cấp trang: segmented */
.seg { background: #F2F2F5; border-radius: 9px; padding: 3px; }
[data-theme="dark"] .seg { background: var(--surface-3); }
.seg button { padding: 5px 13px; border-radius: 7px; font-size: 13px; font-weight: 500; color: var(--text-2); }
.seg button.is-active { font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.08); }

/* Ô nhập */
.input, .select, .textarea { border-color: var(--border-strong); border-radius: 8px; font-size: 13.5px; }
.input--sm { height: 34px; padding: 0 11px; font-size: 13px; }
select.input--sm { padding-right: 26px; }

/* ---------- Ô thống kê: bỏ vạch màu đầu thẻ ---------- */
.stats { gap: 12px; }
.stat { border-radius: 12px; box-shadow: none; padding: 16px 18px; }
.stat::after { display: none; }
.stat__label { font-size: 12.5px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--text-2); }
.stat__value { font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
.stat__hint { font-size: 12.5px; }
/* Chỉ ô CẢNH BÁO mới có màu chữ số */
.stat--danger .stat__value { color: var(--danger); }

/* ---------- Bảng ---------- */
.tbl th {
  background: var(--surface); color: var(--faint);
  font-size: 11.5px; font-weight: 600; letter-spacing: .04em;
  padding: 10px 14px; border-bottom: 1px solid var(--border);
}
.tbl td { padding: 11px 14px; border-bottom: 1px solid var(--line-soft); font-size: 13.5px; }
.tbl tbody tr:hover td { background: var(--surface-2); }

/* ---------- Pill / nhãn ---------- */
.tag { border-radius: 6px; font-size: 12px; font-weight: 500; padding: 3px 9px; }

/* ---------- Thông báo trong trang: nhạt, không viền đậm ---------- */
.alert { border-radius: 10px; font-size: 13px; }
.alert--info { background: var(--surface); border-color: var(--border); color: var(--text-2); }
.alert--info .alert__icon { color: var(--primary); }

/* ---------- Modal / thẻ góc ---------- */
.modal { border-radius: 14px; }
.modal__foot { border-radius: 0 0 14px 14px; }
.dm { border-left-width: 3px; box-shadow: 0 8px 24px rgba(23,24,28,.10); }
.dm:hover { border-left-color: var(--primary-600); }

/* ---------- Khung chat công việc: nút tròn nổi + popup (anh Dũng 01/10/2026) ---------- */
.tlv {
  position: fixed; right: 24px; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); top: auto; left: auto;
  z-index: 195; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; pointer-events: none;
}
.tlv > * { pointer-events: auto; }
.tlv__nut {
  position: relative; width: 66px; height: 66px; border-radius: 50%; border: 0;
  background: #12A150; color: #fff; box-shadow: 0 10px 26px rgba(18,161,80,.38);
  display: inline-flex; align-items: center; justify-content: center; font-size: 0;
}
.tlv__nut svg { width: 30px; height: 30px; }
.tlv__nut:hover { background: #0E8A44; transform: scale(1.05); }
.tlv__nut.is-sang { animation: tlvSangXanh 1.1s ease-out 3; }
@keyframes tlvSangXanh {
  0% { box-shadow: 0 0 0 0 rgba(18,161,80,.6); }
  100% { box-shadow: 0 0 0 20px rgba(18,161,80,0); }
}
.tlv__so {
  position: absolute; top: -4px; right: -4px; min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: 11px; background: #E5484D; color: #fff; font-size: 12px !important; font-weight: 700;
  display: flex; align-items: center; justify-content: center; border: 2px solid var(--surface);
}
.co-tlv .dm-host { bottom: calc(104px + env(safe-area-inset-bottom, 0px)); }
/* Chừa chỗ cuối trang cho nút chat nổi: không có khoảng này thì nút đè lên phân
   trang / nút cuối bảng (anh Dũng 02/10/2026, màn Kế toán HKD). Kéo hết trang là
   nội dung cuối nằm hẳn PHÍA TRÊN nút. */
.co-tlv .view { padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px)); }
.tlv__panel {
  width: 340px; height: min(440px, calc(100vh - 220px));
  border-radius: 14px; box-shadow: 0 16px 40px rgba(23,24,28,.16);
}
.tlv__xem { box-shadow: 0 8px 24px rgba(23,24,28,.12); border-left-width: 3px; }

/* ---------- Thanh tab dưới (điện thoại) ---------- */
.tabbar { display: none; }

@media (max-width: 900px) {
  .sidebar { box-shadow: none; }
  .topbar { padding: 0 16px; }
  .view { padding: 16px; }
}

@media (max-width: 767px) {
  :root { --header-h: 56px; }
  body { font-size: 14px; }
  .topbar__burger { display: none !important; }
  /* Thanh tiêu đề 2 tầng: tiêu đề + nút chat; hàng điều khiển (tab/lọc) xuống dưới */
  .topbar { flex-wrap: wrap; height: auto; min-height: var(--header-h); padding: 8px 16px; row-gap: 8px; }
  .topbar > div:nth-child(2) { flex: 1; min-width: 0; }
  .topbar__tools { margin-left: auto; }
  .topbar__actions { order: 3; width: 100%; margin-left: 0; overflow-x: auto; flex-wrap: nowrap; }
  .topbar__actions:empty { display: none; }
  .topbar__actions .seg { flex: none; }
  .topbar__title { font-size: 18px; }
  .topbar__sub { display: none; }
  .view { padding: 14px 16px calc(84px + env(safe-area-inset-bottom, 0px)); }
  .card { border-radius: 14px; }

  /* MENU (tab "Menu"): sidebar tối phủ toàn màn hình, mục xếp lưới 2 cột */
  .sidebar {
    width: 100%; inset: 0 0 calc(64px + env(safe-area-inset-bottom, 0px)) 0;
    transform: translateY(100%); transition: transform .22s var(--ease);
    padding-top: env(safe-area-inset-top, 0px);
  }
  .sidebar.is-open { transform: translateY(0); }
  .backdrop.is-open { display: none; }
  .sidebar__nav { padding: 6px 14px 20px; }
  .sidebar #nav > .nav__item { display: none; }               /* Tổng quan đã có ở thanh tab */
  .nav__grp, .nav__grp.is-closed { margin-top: 14px; }
  .nav__label { pointer-events: none; height: auto; padding: 0 2px 6px; font-size: 11.5px; font-weight: 600;
    letter-spacing: .06em; text-transform: uppercase; color: #6B6F7A; }
  .nav__chev, .nav__badge--grp { display: none !important; }
  .nav__grp.is-closed .nav__sub, .nav__sub {
    display: grid !important; grid-template-columns: 1fr 1fr; gap: 6px;
  }
  .nav__sub .nav__item {
    height: 46px; padding: 0 14px; background: #202127; color: #E4E5EA; border-radius: 10px; font-size: 14.5px;
  }
  .nav__sub .nav__item.is-active { background: #2F3039; }
  .sidebar__foot { order: -1; border-top: 0; border-bottom: 1px solid #24252B; padding: 14px; }
  .sidebar__brand { display: none; }
  .sidebar__ver { padding: 4px 4px 0; }

  .tabbar {
    display: grid; grid-template-columns: repeat(5, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    height: calc(64px + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--surface); border-top: 1px solid var(--border);
  }
  .tabbar__item {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    color: var(--faint); font-size: 11px; font-weight: 500; min-height: 44px;
  }
  .tabbar__item.is-active { color: var(--primary); font-weight: 600; }
  .tabbar__so {
    position: absolute; top: 6px; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 9px; background: #E5484D; color: #fff; font-size: 11px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
  }
  .tabbar__so.hidden { display: none; }

  /* Khung chat trên điện thoại: nút tròn XANH nổi ngay trên thanh tab (thanh tab
     dành cho Sổ đóng gói — anh Dũng 01/10/2026); khung bật lên phía trên nút. */
  .tlv { right: 14px; left: auto; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); align-items: flex-end; }
  .tlv__nut { width: 58px; height: 58px; }
  .co-tlv .view { padding-bottom: calc(150px + env(safe-area-inset-bottom, 0px)); }
  .tlv__nut svg { width: 27px; height: 27px; }
  .tlv__panel { width: calc(100vw - 28px); height: min(480px, calc(100vh - 230px)); }
  .tlv__xem { max-width: calc(100vw - 28px); }
  .dm-host, .co-tlv .dm-host { bottom: calc(146px + env(safe-area-inset-bottom, 0px)); }
  .tabbar { grid-template-columns: repeat(6, 1fr); }
  .tabbar__item { font-size: 10.5px; }
  .toast-host { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
}

/* ============================================================
   TỔNG QUAN 1b (js/modules/dashboard.js)
   ============================================================ */
.db {
  display: grid; gap: 20px; align-items: start;
  grid-template-columns: minmax(0, 1fr) 360px;
  grid-template-rows: auto 1fr;
  grid-template-areas: "dt phai" "chinh phai";
}
.db__dt { grid-area: dt; }
.db__chinh { grid-area: chinh; display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.db__phai { grid-area: phai; display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.db__phai #checkinCard .card { margin-bottom: 0; }
.db-dt { display: flex; flex-direction: column; gap: 18px; padding: 20px 22px; }
.db-dt__dau { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.db-nhan { font-size: 13px; color: var(--text-2); margin-bottom: 2px; }
.db-so { font-size: 34px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.db-so2 { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.db-cot { display: flex; align-items: flex-end; gap: 8px; height: 146px; }
.db-cot__o { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; }
.db-cot__than { width: 100%; max-width: 46px; background: #C7C9F5; border-radius: 3px 3px 0 0; }
.db-cot__than.is-cuoi { background: var(--primary); }
.db-cot__nhan { font-size: 11px; color: var(--faint); margin-top: 6px; line-height: 14px; white-space: nowrap; }
.db-chip { display: inline-flex; gap: 6px; align-items: center; height: 28px; padding: 0 10px; border-radius: 7px; background: var(--surface-3); font-size: 12.5px; color: var(--text-2); }
.db-chip b { color: var(--text); }
.db-ds { display: flex; flex-direction: column; }
.db-don { display: grid; grid-template-columns: 52px minmax(0,1fr) 170px 120px; gap: 12px; align-items: center;
  padding: 9px 18px; border-top: 1px solid var(--line-soft); font-size: 13.5px; }
.db-don__ten { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.db-don__ten > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db-don .num { text-align: right; }
.db-dem { margin-left: auto; min-width: 22px; height: 20px; padding: 0 7px; border-radius: 10px; background: #E5484D; color: #fff;
  font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.db-can { display: grid; grid-template-columns: 8px minmax(0,1fr) 12px; gap: 10px; padding: 12px 18px; border-top: 1px solid var(--line-soft); color: var(--text); }
.card__head + .db-can { border-top: 0; }
.db-can:hover { background: var(--surface-2); }
.db-can__tieu { display: block; font-size: 13.5px; font-weight: 500; }
.db-can__phu { display: block; font-size: 12.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db-can__mui { color: var(--faint); align-self: center; }
.db-ns3 { display: grid; grid-template-columns: repeat(3, 1fr); padding: 14px 18px; border-bottom: 1px solid var(--line-soft); }
.db-ns { display: grid; grid-template-columns: 8px minmax(0,1fr) auto 84px; gap: 10px; align-items: center; padding: 10px 18px; font-size: 13.5px; }
.db-ns__cham { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.db-ns__ten { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db-viec { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 18px; border-top: 1px solid var(--line-soft); color: var(--text); }
.card__head + .db-viec { border-top: 0; }
.db-viec:hover { background: var(--surface-2); }
.db-viec > span:first-child { display: flex; flex-direction: column; }
.db-viec__ten { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db-pill { flex: none; width: 90px; text-align: center; padding: 3px 0; border-radius: 6px; font-size: 12px; font-weight: 500; background: var(--surface-3); color: var(--text-2); }
.db-pill--dl { background: var(--primary-soft); color: var(--primary-600); }
.db-pill--cd { background: #F3EEFF; color: #6D28D9; }
.db-pill--mg { background: var(--warning-soft); color: #B4520F; }
[data-theme="dark"] .db-cot__than { background: #3a3d6b; }
[data-theme="dark"] .db-cot__than.is-cuoi { background: var(--primary); }

@media (max-width: 1100px) {
  .db { grid-template-columns: minmax(0, 1fr); grid-template-areas: "dt" "phai" "chinh"; }
}
@media (max-width: 767px) {
  .db { gap: 12px; }
  .db__chinh, .db__phai { gap: 12px; }
  .db-dt { padding: 16px; gap: 14px; }
  .db-so { font-size: 30px; }
  .db-cot { height: 72px; gap: 4px; }
  .db-cot__nhan { display: none; }
  .db-don { grid-template-columns: 44px minmax(0,1fr) auto; padding: 10px 16px; }
  .db-don__pt { display: none; }
}

/* ============================================================
   CÔNG VIỆC 1b — thanh tiêu đề: tab · ô tìm · nút; trong trang: hàng lọc
   ============================================================ */
.topbar__actions:has(.gv-dau) { flex: 1; }
.gv-dau { display: flex; align-items: center; gap: 8px; width: 100%; }
.gv-dau__gian { flex: 1; }
.gv-dau .gv-dau__tim { width: 240px; height: 34px; }
.gv-dau .btn--sm, .gv-loc .select { height: 34px; }
.gv-dau #gvTai { width: 34px; padding: 0; }
.gv-loc { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gv-loc .select { width: 200px; max-width: none !important; padding-top: 0; padding-bottom: 0; }
/* Nút lọc nhanh theo loại việc + lọc nhanh (06/11/2026) */
.gv-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.gv-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 999px;
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text);
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.gv-chip:hover { border-color: var(--primary); background: var(--primary-soft); }
.gv-chip__i { font-size: 15px; line-height: 1; }
.gv-chip__so { min-width: 22px; height: 20px; padding: 0 7px; border-radius: 10px; background: var(--surface-3);
  color: var(--text-2); font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.gv-chip.is-chon { background: var(--primary); border-color: var(--primary); color: #fff; }
.gv-chip.is-chon .gv-chip__so { background: rgba(255,255,255,.22); color: #fff; }
.gv-chips--nhanh .gv-chip { height: 30px; font-size: 12.5px; }
.gv-chip--bo { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 35%, transparent); background: var(--danger-soft); }
@media (max-width: 767px) {
  .gv-chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
  .gv-chip { flex: none; }
}

@media (max-width: 767px) {
  .topbar__actions:has(.gv-dau) { flex: 0 0 100%; }
  .gv-dau { width: max-content; }
  .gv-dau__gian { display: none; }
  .gv-dau .gv-dau__tim { width: 150px; }
  .gv-loc .select { flex: 1 1 140px; width: auto; }
}

/* ============================================================
   SỔ ĐÓNG GÓI 1b — thanh tiêu đề: tab · ô tra mã; khối đơn chưa xuất kho gọn
   ============================================================ */
.topbar__actions:has(.dg-dau) { flex: 1; }
.dg-dau { display: flex; align-items: center; gap: 8px; width: 100%; }
.dg-dau__gian { flex: 1; }
.dg-tra { display: flex; gap: 6px; }
.dg-tra .input { width: 320px; height: 34px; }
.dg-tra .btn { height: 34px; min-width: 56px; }
.xk-cn { display: flex; align-items: center; gap: 10px; margin-left: auto; flex-wrap: wrap; }
.xk-cn .btn { height: 30px; }
.xk-loc { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.xk-o {
  height: 30px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--border-strong);
  background: var(--surface); color: var(--text-2); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.xk-o:disabled { cursor: default; color: var(--faint); }
.xk-o.tag--danger { background: var(--danger-soft); border-color: transparent; color: var(--danger); }
.xk-o.tag--warning { background: var(--warning-soft); border-color: transparent; color: var(--warning); }
.xk-o.tag--success { background: var(--success-soft); border-color: transparent; color: var(--success); }
.xk-o.is-chon { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.xk-tab {
  height: 32px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--border-strong);
  background: var(--surface); color: var(--text-2); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.xk-tab.is-chon { background: var(--ink); border-color: var(--ink); color: #fff; }
.xk-tab__so { opacity: .6; margin-left: 4px; }
@media (max-width: 767px) {
  .topbar__actions:has(.dg-dau) { flex: 0 0 100%; }
  .dg-dau { flex-wrap: wrap; }
  .dg-dau__gian { display: none; }
  .dg-tra { flex: 1 1 100%; }
  .dg-tra .input { width: auto; flex: 1; }
  .xk-cn { margin-left: 0; width: 100%; }
}

/* Hoá đơn còn thiếu (Nhập hàng ▸ tab Nạp) */
.gm-thieu { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; background: var(--surface); }
.gm-thieu .tag { text-decoration: none; }

/* Link "xem" hoá đơn cạnh số hoá đơn (js/lib/xemhd.js) */
.xemhd-nut { font-size: 12px; font-weight: 500; color: var(--primary); text-decoration: none; padding: 1px 7px; border: 1px solid var(--border); border-radius: 10px; white-space: nowrap; }
.xemhd-nut:hover { background: var(--surface-2); }