/* ============================================================
 * ms-select.css — Style cho component Single/Multi-select searchable
 * (port từ CRM crm-components.css, dùng biến cục bộ để tự chứa).
 * Trigger canh theo .fe-select của banghang (cao 44px, bo 9px).
 * ============================================================ */
.ms-wrap {
    position: relative;
    width: 100%;
    /* Biến cục bộ (khỏi phụ thuộc theme CRM) */
    --ms-primary: #e53935;
    --ms-border: #e5e7eb;
    --ms-text: #333;
    --ms-text-light: #9aa0a8;
    --ms-bg: #fff;
}
.ms-real { display: none !important; }

.ms-trigger {
    display: flex; align-items: center; gap: 5px;
    width: 100%; height: 44px; padding: 0 36px 0 14px;
    border: 1.5px solid var(--ms-border); border-radius: 9px;
    background: var(--ms-bg); cursor: pointer; user-select: none;
    box-sizing: border-box; position: relative;
    font-size: 13.5px; color: var(--ms-text);
    transition: border-color .2s, box-shadow .2s;
}
.ms-trigger .ms-arrow {
    position: absolute; right: 12px; top: 18px; flex-shrink: 0;
    border: 5px solid transparent; border-top-color: #999;
    transition: transform .2s;
}
.ms-wrap.open .ms-trigger {
    border-color: var(--ms-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ms-primary) 8%, transparent);
    border-radius: 9px 9px 0 0;
}
.ms-wrap.open .ms-trigger .ms-arrow { transform: rotate(180deg); top: 14px; }

.ms-placeholder { color: var(--ms-text-light); font-size: 13.5px; line-height: 42px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Single-select: khi đã chọn, .ms-placeholder hiển thị giá trị → màu chữ thường. */
.ms-wrap.has-value .ms-placeholder { color: var(--ms-text); }

/* Panel dropdown. */
.ms-panel {
    display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 99999;
    background: var(--ms-bg); overflow: hidden;
    border: 1.5px solid var(--ms-primary); border-top: none; border-radius: 0 0 9px 9px;
    box-shadow: 0 6px 20px rgba(0,0,0,.1);
}
.ms-wrap.open .ms-panel { display: block; }

.ms-search {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px; border-bottom: 1px solid #eee; background: #fafbfc;
}
.ms-search svg { width: 14px; height: 14px; color: #bbb; stroke: currentColor; fill: none; stroke-width: 2; flex-shrink: 0; }
.ms-search input {
    flex: 1; min-width: 0; border: none; outline: none; background: transparent;
    font-size: 13px; color: var(--ms-text); font-family: inherit;
}
.ms-search input::placeholder { color: #bbb; }

.ms-options { max-height: 260px; overflow-y: auto; }
.ms-option {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 14px; font-size: 13.5px; color: var(--ms-text);
    cursor: pointer; transition: background .1s;
}
.ms-option:hover { background: #f0f4ff; }
.ms-option.hidden { display: none; }
.ms-option.checked { background: color-mix(in srgb, var(--ms-primary) 6%, transparent); color: var(--ms-primary); font-weight: 600; }

.ms-no-result { display: none; padding: 14px; text-align: center; font-size: 13px; color: var(--ms-text-light); }

/* Ô filter chứa .ms-real + .ms-wrap trên thanh toolbar (1 cell của lưới). */
.fe-toolbar .fe-ms-cell { min-width: 0; width: 100%; }