/* ============================================================================
   loc-thu-gon.css — HÀNG "Bộ lọc" THU/MỞ dùng chung cho MỌI màn có cột lọc.
   ----------------------------------------------------------------------------
   Hàng nút do Script/MySystem/jsTemp/loc-thu-gon.js chèn ngay TRƯỚC khối lọc
   (.kb-filter / .ws-left-filter / .nk-filter / .xk-filter / .filterbar ...).
   Thu gọn = gắn .loc-da-thu lên khối lọc -> danh sách bên dưới dài thêm.

   Màn KHÔNG muốn có nút: thêm data-khong-thu-gon lên khối lọc hoặc cột chứa nó.
   ============================================================================ */

.loc-tg {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    box-sizing: border-box;
    height: var(--h-input-compact, 30px);
    padding: 0 8px;
    margin: 0;
    border: 0;
    border-bottom: 1px solid var(--line, #d8e3de);
    border-radius: 0;
    background: var(--brand-soft, #ecfdf3);
    color: var(--brand-dark, #13503f);
    font-family: inherit;
    font-size: var(--fs-sm, 12px);
    font-weight: var(--fw-semibold, 600);
    line-height: 1;
    text-align: left;
    cursor: pointer;
}

.loc-tg:hover { background: var(--row-hover, #e1f4e8); }
.loc-tg:focus-visible { outline: 1px solid var(--brand, #1d6f5c); outline-offset: -1px; }

.loc-tg .loc-tg-chev { flex: 0 0 10px; width: 10px; font-size: 11px; transition: transform .15s ease; }
.loc-tg[aria-expanded="false"] .loc-tg-chev { transform: rotate(-90deg); }
.loc-tg .loc-tg-ico { flex: 0 0 auto; font-size: 11px; opacity: .85; }
.loc-tg .loc-tg-ten { flex: 0 0 auto; white-space: nowrap; }

/* Tóm tắt điều kiện đang lọc — chỉ hiện khi ĐANG THU, để không hiểu nhầm
   danh sách bị thiếu dữ liệu. */
.loc-tg .loc-tg-tt {
    min-width: 0;
    margin-left: auto;
    overflow: hidden;
    font-weight: var(--fw-normal, 400);
    color: var(--muted, #64748b);
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Khối lọc đang thu. !important vì nhiều màn khai display cho chính khối này. */
.loc-da-thu { display: none !important; }

html[data-theme="dark"] .loc-tg { background: #2b2b30; color: #cfeae0; border-bottom-color: #3a3a3e; }
html[data-theme="dark"] .loc-tg:hover { background: #33333a; }

@media (prefers-reduced-motion: reduce) {
    .loc-tg .loc-tg-chev { transition: none; }
}