/* HQMS traodoi - tab Trao đổi + chuông thông báo */
.hqms-td-muted { color: #6b7280; font-size: 12px; }
.hqms-td-pad { padding: 12px 4px; }
.hqms-td { padding: 8px 2px; }
.hqms-td-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.hqms-td-subnav { flex: 1 1 auto; }
.hqms-td-subnav > li > a { padding: 6px 10px; }
.hqms-td-subnav .badge:empty { display: none; }
.hqms-td-panel .badge:empty { display: none; }

.hqms-td-composer { border: 1px solid #dfe5ec; border-radius: 6px; padding: 8px; background: #fafbfd; margin-bottom: 12px; }
.hqms-td-composer-bar { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; gap: 8px; flex-wrap: wrap; }
.hqms-td-mentionwrap { position: relative; }
.hqms-td-mentions { display: none; position: absolute; z-index: 1060; left: 8px; top: 100%; min-width: 240px; max-height: 220px; overflow-y: auto; list-style: none; margin: 0; padding: 4px 0;
	background: #fff; border: 1px solid #d6dde6; border-radius: 4px; box-shadow: 0 8px 24px rgba(0,0,0,.12); }
.hqms-td-mentions li { padding: 4px 10px; cursor: pointer; white-space: nowrap; }
.hqms-td-mentions li.active, .hqms-td-mentions li:hover { background: var(--hqms-theme-primary, #1d4f91); color: #fff; }
.hqms-td-mention { color: var(--hqms-theme-primary, #1d4f91); font-weight: 600; }

.hqms-td-thread { border-bottom: 1px solid #eef1f5; padding: 8px 0; }
.hqms-td-c { display: flex; gap: 10px; padding: 4px 0; }
.hqms-td-c.pinned { background: #fffaf0; border-radius: 6px; padding: 6px; }
.hqms-td-c.note .hqms-td-ctext { background: #eef6ff; border-left: 3px solid #5b9bd5; padding: 4px 8px; border-radius: 3px; }
.hqms-td-avatar { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--hqms-theme-primary, #1d4f91); color: #fff; font-size: 12px; font-weight: 700;
	display: flex; align-items: center; justify-content: center; }
.hqms-td-avatar.sm { width: 22px; height: 22px; font-size: 10px; display: inline-flex; margin-right: 5px; vertical-align: middle; }
.hqms-td-cmain { flex: 1 1 auto; min-width: 0; }
.hqms-td-ctext { margin: 2px 0; word-wrap: break-word; overflow-wrap: anywhere; }
.hqms-td-cact a { margin-right: 12px; font-size: 12px; }
.hqms-td-replies { margin-left: 42px; }
.hqms-td-editbox textarea { margin-bottom: 4px; }

.hqms-td-drop { border: 2px dashed #cfd8e3; border-radius: 8px; padding: 12px; text-align: center; color: #4b5563; margin-bottom: 12px; }
.hqms-td-drop.over { border-color: var(--hqms-theme-primary, #1d4f91); background: #f3f7fd; }
.hqms-td-drop .btn { margin: 0 4px; }
.hqms-td-dropopts { display: flex; gap: 6px; justify-content: center; margin: 8px auto 4px; max-width: 560px; flex-wrap: wrap; }
.hqms-td-dropopts .form-control { flex: 1 1 200px; }
.hqms-td-file { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid #eef1f5; }
.hqms-td-thumb img { width: 48px; height: 48px; object-fit: cover; border-radius: 4px; border: 1px solid #e5e7eb; }
.hqms-td-ficon { width: 48px; height: 48px; flex: none; border-radius: 4px; background: #eef2f7; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #4b5563; }
.hqms-td-ficon small { font-size: 9px; font-weight: 700; }
.hqms-td-fmain { flex: 1 1 auto; min-width: 0; }
.hqms-td-fname { font-weight: 600; word-break: break-all; }
.hqms-td-fact { white-space: nowrap; }

/* form thêm việc / thêm người theo dõi: một hàng; theme ép .form-control rộng 100% -> đặt lại bề rộng trong hàng flex */
.hqms-td-todoform, .hqms-td-addfollower { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 12px;
	padding: 8px; border: 1px solid #dfe5ec; border-radius: 6px; background: #fafbfd; }
.hqms-td-todoform > .form-control { width: auto !important; min-width: 0; margin: 0; }
.hqms-td-todoform > [data-td-in=title] { flex: 1 1 320px; }
.hqms-td-s2 { display: block; min-width: 0; }
.hqms-td-s2 .select2-container { width: 100% !important; }
.hqms-td-s2-assignee { flex: 0 1 260px; min-width: 180px; }
.hqms-td-s2-member { flex: 1 1 300px; min-width: 200px; }
.hqms-td-due { flex: 0 0 170px; width: 170px; margin: 0; }
.hqms-td-due .input-group-addon { cursor: pointer; }
/* lịch chọn ngày nổi trên các khung bên dưới */
.hqms-td-due .bootstrap-datetimepicker-widget { z-index: 1060; }
.hqms-td-todoform .btn, .hqms-td-addfollower .btn { flex: 0 0 auto; white-space: nowrap; }
.hqms-td-todo { display: flex; align-items: flex-start; gap: 10px; padding: 6px 0; border-bottom: 1px solid #eef1f5; }
.hqms-td-todo input[type=checkbox] { margin-top: 3px; width: 16px; height: 16px; }
.hqms-td-tmain { flex: 1 1 auto; }
.hqms-td-todo.done .hqms-td-ttitle { text-decoration: line-through; color: #9ca3af; }
.hqms-td-todo.overdue .hqms-td-due { color: #b42318; font-weight: 600; }
.hqms-td-done summary { cursor: pointer; margin-top: 8px; color: #4b5563; }

.hqms-td-followers { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.hqms-td-chip { display: inline-flex; align-items: center; background: #eef2f7; border-radius: 14px; padding: 3px 10px 3px 3px; font-size: 13px; }
.hqms-td-chip a { margin-left: 6px; color: #9ca3af; font-weight: 700; text-decoration: none; }
.hqms-td-addfollower { max-width: 620px; }

.hqms-td-panel { margin-top: 14px; }
.hqms-td-panel .panel-heading a { display: block; color: inherit; font-weight: 600; text-decoration: none; }

/* chuông */
.hqms-td-bell > a { position: relative; }
.hqms-td-bell-n { position: absolute; top: 6px; right: 0; background: #d92d20; color: #fff; font-size: 10px; padding: 2px 5px; display: none; }
.hqms-td-bell-menu { width: 360px; max-width: 92vw; padding: 0; }
.hqms-td-bell-head, .hqms-td-bell-foot { display: flex; justify-content: space-between; padding: 8px 12px; background: #f7f9fc; font-size: 12px; }
.hqms-td-bell-head { border-bottom: 1px solid #eef1f5; }
.hqms-td-bell-foot { border-top: 1px solid #eef1f5; justify-content: center; gap: 4px; }
.hqms-td-bell-list { max-height: 420px; overflow-y: auto; }
.hqms-td-bell-item { display: block; padding: 8px 12px; border-bottom: 1px solid #f1f3f6; color: #1f2937 !important; text-decoration: none !important; white-space: normal; }
.hqms-td-bell-item:hover { background: #f3f7fd; }
.hqms-td-bell-item.unread { background: #eef6ff; }
.hqms-td-bell-item.unread .hqms-td-bell-title { font-weight: 600; }
.hqms-td-bell-body { font-size: 12px; color: #4b5563; }

/* trang Việc của tôi / Đang theo dõi */
.hqms-td-page-filter { margin-bottom: 10px; }
.hqms-td-page .overdue .hqms-td-due { color: #b42318; font-weight: 600; }
.hqms-td-page tr.done td { color: #9ca3af; }

@media (max-width: 767px) {
	.hqms-td-subnav > li > a { padding: 5px 7px; font-size: 12px; }
	.hqms-td-replies { margin-left: 20px; }
	.hqms-td-todoform, .hqms-td-addfollower { flex-direction: column; align-items: stretch; }
	.hqms-td-todoform > *, .hqms-td-addfollower > * { flex: 0 0 auto !important; width: 100% !important; }
}

/* khung chuông là ul > li (xem traodoi.js) */
.hqms-td-bell-menu > li.hqms-td-bell-wrap { display: block; list-style: none; }

/* tệp / hình kèm bình luận */
.hqms-td-cleft { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hqms-td-attach { margin: 0; }
.hqms-td-composer.dragover { border-color: var(--hqms-theme-primary, #1d4f91); background: #eef4fc; }
.hqms-td-pending { display: flex; flex-wrap: wrap; gap: 6px; }
.hqms-td-pending:not(:empty) { margin-top: 6px; }
.hqms-td-pfile { display: inline-flex; align-items: center; gap: 6px; padding: 3px 6px; border: 1px solid #dfe5ec; border-radius: 4px; background: #fff; font-size: 12px; max-width: 280px; }
.hqms-td-pfile img { width: 32px; height: 32px; object-fit: cover; border-radius: 3px; }
.hqms-td-pfile > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hqms-td-pfile a { color: #b42318; font-size: 16px; line-height: 1; text-decoration: none; }
.hqms-td-cfiles { margin-top: 6px; }
.hqms-td-cimgs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.hqms-td-cimgs img { width: 110px; height: 80px; object-fit: cover; border-radius: 4px; border: 1px solid #e5e7eb; }
.hqms-td-cfile { display: inline-block; margin: 2px 6px 2px 0; padding: 3px 8px; border: 1px solid #dfe5ec; border-radius: 12px; background: #f7f9fc; font-size: 12px; }
.hqms-td-cfile:hover { text-decoration: none; background: #eef4fc; }
.hqms-td-c.hqms-td-flash { background: #fff8e1; transition: background .3s; }
.hqms-td-ago { cursor: help; border-bottom: 1px dotted transparent; }
.hqms-td-ago:hover { border-bottom-color: currentColor; }
.hqms-td-ago { cursor: help; }
.hqms-td-ago:hover { text-decoration: underline dotted; }