/* Thư viện tài liệu đào tạo (issue 529): Nhân sự › Kỹ năng & Đào tạo › Tài liệu học tập và Tác vụ › Đào tạo.
   Dùng lại ann-seg / ann-progress / ann-chip / ann-depts / ann-switch của Thông báo nội bộ và hrm-table / hrm-card / hrm-form-dialog. */
.htl-toolbar{display:flex!important;flex-wrap:nowrap!important;align-items:center;gap:10px!important;min-height:48px;margin-bottom:12px}
.htl-toolbar>.bms-search{flex:0 1 420px!important;max-width:420px!important;min-width:0}
.htl-seg{display:inline-flex;flex:0 0 auto;align-items:center;height:48px;padding:3px;gap:2px;border:1px solid var(--bms-border);border-radius:10px;background:var(--bms-surface-subtle)}
.htl-seg button{display:inline-flex;align-items:center;gap:6px;height:40px;min-height:0!important;padding:0 14px;border:0;border-radius:8px;background:transparent;color:var(--bms-text-muted);font:600 14px/1 Roboto,system-ui,sans-serif;white-space:nowrap;cursor:pointer}
.htl-seg button[aria-pressed="true"]{background:var(--bms-surface);color:var(--bms-primary);box-shadow:var(--bms-shadow-1)}
.htl-seg button b{min-width:20px;padding:0 6px;border-radius:6px;background:var(--bms-neutral-soft);color:var(--bms-neutral);font-size:12px;line-height:20px;text-align:center}
.htl-seg button[aria-pressed="true"] b{background:var(--bms-primary-soft);color:var(--bms-primary)}
.htl-seg.sm{height:44px;width:max-content}.htl-seg.sm button{height:36px;font-size:13.5px}
.htl-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 16px;border:1px solid var(--bms-border-strong);border-radius:8px;background:var(--bms-surface);color:var(--bms-text);font:600 14px/1 Roboto,system-ui,sans-serif;white-space:nowrap;cursor:pointer;flex:0 0 auto}
.htl-btn:hover{border-color:var(--bms-primary);color:var(--bms-primary)}
.htl-btn.primary{border-color:var(--bms-primary);background:var(--bms-primary);color:var(--bms-surface)}
.htl-btn.primary:hover{background:var(--bms-primary-hover,var(--bms-primary));color:var(--bms-surface)}
.htl-btn.sm{height:32px;padding:0 10px;font-size:13px;gap:6px}
.htl-btn.ghost{border-color:transparent;background:transparent;color:var(--bms-text-muted)}
.htl-btn:disabled{opacity:.6;cursor:default}
.htl-corner{position:absolute;top:-8px;right:-8px;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:var(--bms-warning);color:var(--bms-surface);font-size:12px;font-weight:700;line-height:22px;text-align:center;box-shadow:0 0 0 2px var(--bms-surface)}
.htl-lib{display:grid;grid-template-columns:250px minmax(0,1fr);gap:12px;align-items:start}
.htl-cats{display:grid;gap:2px;padding:12px!important}
.htl-cat-list{display:grid;gap:2px}
.htl-block-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.htl-block-head h4{margin:0;font-size:15px}
.htl-icon-btn{display:inline-grid;place-items:center;width:32px;height:32px;border:1px solid var(--bms-border-strong);border-radius:8px;background:var(--bms-surface);color:var(--bms-primary);cursor:pointer}
.htl-cat-row{position:relative;display:flex;align-items:center}
.htl-cat{display:flex;flex:1;min-width:0;align-items:center;gap:8px;height:36px;padding:0 10px;border:0;border-radius:8px;background:transparent;color:var(--bms-text);font:500 13.5px Roboto,system-ui,sans-serif;text-align:left;cursor:pointer}
.htl-cat span{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.htl-cat svg{color:var(--bms-text-subtle);flex:0 0 auto}
.htl-cat b{min-width:22px;padding:0 6px;border-radius:6px;background:var(--bms-neutral-soft);color:var(--bms-neutral);font-size:12px;line-height:20px;text-align:center}
.htl-cat:hover{background:var(--bms-surface-subtle)}
.htl-cat.on{background:var(--bms-primary-soft);color:var(--bms-primary);font-weight:700}.htl-cat.on svg{color:var(--bms-primary)}.htl-cat.on b{background:var(--bms-surface);color:var(--bms-primary)}
.htl-cat-x{position:absolute;right:40px;display:none;place-items:center;width:24px;height:24px;border:0;border-radius:6px;background:transparent;color:var(--bms-text-muted);cursor:pointer}
.htl-cat-row:hover .htl-cat-x,.htl-cat-x:focus-visible{display:inline-grid}
.htl-cat-x:hover{background:var(--bms-danger-soft);color:var(--bms-danger)}
.htl-docs{padding:0!important;overflow:hidden}
.htl-docs .hrm-table-wrap{border:0!important;border-radius:0!important}
.htl-tight th,.htl-tight td{padding:8px 10px!important;font-size:13px}
.htl-doc-table tbody tr{cursor:pointer}
.htl-doc{display:flex;align-items:center;gap:10px;min-width:0}
.htl-doc strong{display:block;font-size:13.5px}
.htl-doc small,.htl-to small{display:block;margin-top:2px;color:var(--bms-text-muted);font-size:12px}
.htl-kind{display:inline-grid;place-items:center;flex:0 0 auto;width:34px;height:34px;border-radius:8px;font:800 11px Roboto,system-ui,sans-serif}
.htl-kind.k-pdf{background:var(--bms-danger-soft);color:var(--bms-danger)}.htl-kind.k-vid{background:var(--bms-review-soft);color:var(--bms-review);font-size:13px}.htl-kind.k-lnk{background:var(--bms-info-soft);color:var(--bms-info);font-size:14px}.htl-kind.k-doc{background:var(--bms-primary-soft);color:var(--bms-primary)}
.htl-reqtag{color:var(--bms-warning);font-weight:700}
.htl-late{color:var(--bms-danger);font-weight:700}
.htl-sugtag{display:inline-block;padding:0 6px;border-radius:6px;background:var(--bms-primary-soft);color:var(--bms-primary);font-weight:600}
.htl-doc-table .ann-progress{min-width:150px}
.htl-dlg h3{font-size:15px}
.htl-dlg [hidden],.htl-dlg .ann-depts[hidden]{display:none!important}
.hrm-form-dialog.htl-doc-dlg{width:min(900px,94vw)!important;max-width:none!important;padding:18px 20px!important}
.htl-doc-head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.htl-doc-head>div{flex:1;min-width:0}.htl-doc-head h3{margin:0 0 2px}.htl-doc-head small{color:var(--bms-text-muted);font-size:12.5px}
.htl-doc-meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px;margin-bottom:12px;padding:10px 12px;border-radius:10px;background:var(--bms-surface-subtle);font-size:13px;font-weight:600}
.htl-doc-meta span:not(.hrm-emp-grow){white-space:nowrap}
.htl-doc-meta em{display:block;color:var(--bms-text-muted);font-size:12px;font-style:normal;font-weight:400}
.htl-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:12px}
.htl-stat{position:relative;display:flex;align-items:center;height:44px;padding:0 12px;border:1px solid var(--bms-border);border-radius:10px;background:var(--bms-surface);color:var(--bms-text);font:600 13.5px Roboto,system-ui,sans-serif;text-align:left;cursor:pointer}
.htl-stat b{position:absolute;top:-8px;right:-6px;min-width:24px;height:22px;padding:0 6px;border-radius:11px;background:var(--bms-neutral);color:var(--bms-surface);font-size:12px;line-height:22px;text-align:center;box-shadow:0 0 0 2px var(--bms-surface)}
.htl-stat.s-all b{background:var(--bms-primary)}.htl-stat.s-done b{background:var(--bms-success)}.htl-stat.s-opened b{background:var(--bms-info)}.htl-stat.s-none b{background:var(--bms-warning)}
.htl-stat.on{border-color:var(--bms-primary);background:var(--bms-primary-soft);color:var(--bms-primary)}
.htl-people{max-height:420px;overflow:auto;border:1px solid var(--bms-border);border-radius:10px}
.htl-people .hrm-table{margin:0}
.htl-av{display:inline-grid;place-items:center;width:26px;height:26px;margin-right:8px;border-radius:8px;background:var(--bms-primary-soft);color:var(--bms-primary);font-size:11px;font-weight:700;vertical-align:middle}
.hrm-form-dialog.htl-add-doc{width:min(720px,94vw)}
.htl-add-doc .ann-target .htl-seg{margin:6px 0 8px}
.hrm-form-dialog.htl-cat-dlg{width:min(460px,94vw)}
.htl-left{margin-right:auto}
/* Tác vụ › Đào tạo */
.htl-mine-list{display:grid;gap:10px}
.htl-mine-card{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--bms-border);border-radius:12px;background:var(--bms-surface)}
.htl-mine-card.is-done{background:var(--bms-surface-subtle)}
.htl-mine-card.is-target{border-color:var(--bms-primary);box-shadow:0 0 0 3px var(--bms-primary-soft)}
.htl-mine-main{flex:1;min-width:0}
.htl-mine-main strong{display:block;font-size:14px}
.htl-mine-main small{display:block;margin-top:2px;color:var(--bms-text-muted);font-size:12.5px}
.htl-mine-act{display:flex;align-items:center;gap:8px;flex:0 0 auto}
@media (max-width:900px){
  .htl-toolbar{flex-wrap:wrap!important}
  .htl-toolbar>.bms-search{flex:1 1 100%!important;max-width:none!important;order:5}
  .htl-toolbar .hrm-emp-grow{display:none}
  .htl-lib{grid-template-columns:minmax(0,1fr)}
  .htl-cats{padding:8px!important}
  .htl-cats .htl-block-head{margin-bottom:4px}
  .htl-cat-list{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
  .htl-cat-row{flex:0 0 auto}.htl-cat{flex:0 0 auto}.htl-cat span{overflow:visible}
  .htl-cat-x{display:none!important}
  .htl-stats{grid-template-columns:repeat(2,1fr)}
  .htl-doc-meta span:not(.hrm-emp-grow){white-space:normal}
}
@media (max-width:640px){
  .htl-toolbar>.htl-seg{flex:1 1 100%;overflow-x:auto}
  .htl-mine-card{flex-wrap:wrap}
  .htl-mine-act{width:100%;justify-content:flex-end;flex-wrap:wrap}
  .htl-mine-head{flex-wrap:wrap}
}
/* Điện thoại: hai nút cùng một hàng, tìm kiếm hàng dưới; thanh dưới (tab bar) giữ nguyên. */
html.bms-phone-v2 .panel[data-panel="hrm"] .hrm-toolbar.htl-toolbar{display:flex!important;flex-direction:row!important;flex-wrap:wrap!important;align-items:center!important;gap:8px!important;padding:8px 12px 0!important}
html.bms-phone-v2 .htl-toolbar>.htl-seg{flex:1 1 100%!important;width:100%!important}
html.bms-phone-v2 .htl-toolbar>.htl-seg button{flex:1 1 0}
html.bms-phone-v2 .htl-toolbar>.htl-btn{flex:1 1 0!important;width:auto!important;min-width:0;height:40px!important;min-height:40px!important}
html.bms-phone-v2 .htl-toolbar>.bms-search{flex:1 1 100%!important;max-width:none!important}