/* Filter bar — nút bộ lọc, panel filter, grid select (dùng chung mọi trang admin) */
.btn-filter {
    position: relative;
    width: 33px;
    /* 1.85rem = 1.35rem (line-height của .btn trong lib.css) + 0.25rem×2 (lề
       trên/dưới của nó). Tức là CÔNG THỨC chiều cao của .btn chứ không phải con
       số chép tay.

       Phải dùng rem, đừng ghim px: cỡ chữ gốc không cố định 16px ở mọi khổ —
       đo được 15px ở 768px. Ghim 29.6px thì nút lọc đứng yên trong khi .btn co
       xuống 27,75px, lệch 1,84px ngay giữa hàng. Để rem thì hai bên co giãn
       cùng nhau, khổ nào cũng khít. */
    height: 1.85rem;
    padding: .25rem .6rem;
    border: none;
    border-radius: var(--radius-control, .3rem);
    box-sizing: border-box;
    font-size: 0;
    line-height: 0;
    background-color: var(--muted);
    float: left;
    /* Cùng thang với .mr-scale của lib.css (nút bên phải dùng lớp đó). Trước
       đây bên trái cố định 10px còn bên phải co theo vw, nên dưới ~666px hai
       khoảng hở lệch nhau (10px so với 7,5px). */
    margin-right: clamp(6px, 1.5vw, 10px);
    margin-bottom: 10px;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.btn-filter::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url(../../images/admin/ic-filter.svg) center / 18px no-repeat;
    filter: brightness(0) invert(1);
    pointer-events: none;
}

.btn-filter:hover {
    background-color: var(--ink-2);
    box-shadow: var(--shadow);
}

/* Hàng toolbar cạnh filter — đồng bộ màu + box-shadow mọi nút */
label.btn-filter + div.form-row .btn:not(.display-none),
label.btn-filter + div.form-row .label,
label.btn-filter + div.form-row p.label {
    box-shadow: var(--shadow-sm);
    font-family: var(--font) !important;
    font-weight: 500;
    transition: background-color 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

label.btn-filter + div.form-row .btn.float-left,
label.btn-filter + div.form-row a.label,
label.btn-filter + div.form-row p.label {
    background-color: var(--muted);
    color: #fff;
    border: none;
}

label.btn-filter + div.form-row .btn.btn-add-on-list {
    box-shadow: var(--shadow-sm);
}

label.btn-filter + div.form-row .btn.float-left:hover,
label.btn-filter + div.form-row a.label:hover {
    background-color: var(--ink-2);
    box-shadow: var(--shadow);
}

label.btn-filter + div.form-row .btn.btn-add-on-list:hover {
    box-shadow: var(--shadow);
    filter: brightness(1.07);
    transform: none;
}

.filter {
    width: 100%;
    display: none;
}

.grid-group-filter {
    width: 100%;
    display: grid;
    grid-column-gap: 15px;
    grid-row-gap: 10px;
    grid-template-columns: calc(20% - 12px) calc(20% - 12px) calc(20% - 12px) calc(20% - 12px) calc(20% - 12px);
}

@media only screen and (min-width: 601px) and (max-width: 860px) {
    .grid-group-filter {
        grid-column-gap: 15px;
        grid-template-columns: calc(33.33% - 10px) calc(33.33% - 10px) calc(33.33% - 10px);
    }
}

@media only screen and (max-width: 600px) {
    .grid-group-filter {
        grid-column-gap: 10px;
        grid-template-columns: calc(50% - 5px) calc(50% - 5px);
    }

    .btn-filter {
        width: min(calc(34 * 100vw / 430), 34px);
        height: min(calc(26.6 * 100vw / 430), 26.6px);
        padding: min(calc(3 * 100vw / 430), 3px) min(calc(8.6 * 100vw / 430), 8.6px);
        font-size: 0;
        line-height: 0;
        margin-right: clamp(6px, 1.5vw, 10px);
        margin-bottom: min(calc(10 * 100vw / 430), 10px);
    }

    .btn-filter::before {
        background-size: min(calc(16 * 100vw / 430), 16px);
    }

    input#cb-filter + label.btn-filter,
    label.btn-filter + div.form-row .btn {
        height: min(calc(26.6 * 100vw / 430), 26.6px);
        min-height: min(calc(26.6 * 100vw / 430), 26.6px);
        line-height: 1;
        box-sizing: border-box;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    input#cb-filter + label.btn-filter {
        width: min(calc(34 * 100vw / 430), 34px);
        padding: min(calc(3 * 100vw / 430), 3px) min(calc(8.6 * 100vw / 430), 8.6px);
        font-size: 0;
        margin-right: clamp(6px, 1.5vw, 10px);
        margin-bottom: min(calc(10 * 100vw / 430), 10px);
    }

    /* KHÔNG khai font-size / padding ở đây nữa: cỡ chữ và lề trong của mọi
       .btn/.label khổ hẹp do admin/controls.css quyết (nó cũng !important).
       Ghim lại ở đây là hàng nút cạnh nút lọc không bao giờ nhỏ theo — đã dính
       đúng lỗi đó 2026-09-12: controls.css hạ xuống 11px mà hàng này vẫn 12px.
       Chỗ này chỉ còn lo phần filter-bar thật sự cần: nét chữ và chiều cao
       chung để nút lọc và các nút bên cạnh bằng nhau. */
    label.btn-filter + div.form-row .btn:not(.display-none),
    label.btn-filter + div.form-row p.label,
    label.btn-filter + div.form-row a.label {
        font-weight: 500;
    }

    label.btn-filter + div.form-row p.label {
        line-height: 1;
        min-height: min(calc(26.6 * 100vw / 430), 26.6px);
        box-sizing: border-box;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* Khối @media max-width:380px đã bỏ 2026-09-13.

   Nó nhân thêm hệ số 0.90 lên một thang vốn đã quy chiếu 400px, tạo ra vách
   đứng ngay tại 380/381px: đo được nút cao 21,5px ở 380 rồi nhảy lên 25,3px ở
   381 (+18% chỉ sau 1px màn hình). iPhone 12/13/14 Pro rộng 390px nằm ngay
   phía trên vách nên nút ở đó phình hơn hẳn iPhone SE (375px) — đúng chỗ người
   dùng báo "chỉ iPhone 12 Pro mới bị to".

   Nay khối max-width:600px quy chiếu 430px (iPhone 14 Pro Max) nên nó tự co
   đều suốt dải điện thoại, không cần nấc riêng nữa: ở 360px hai cách chỉ lệch
   nhau dưới 2px, mà đổi lại không còn chỗ nhảy nào. */

#cb-filter:checked ~ .filter {
    display: block;
}

.info-filter {
    display: grid;
    grid-column-gap: clamp(12px, min(2.5vw, 2.5svw, 2.5dvw), 20px);
    grid-row-gap: clamp(3px, min(0.85vw, 0.85svw, 0.85dvw), 6px);
    grid-template-columns: 1fr 1fr;
    font-size: clamp(0.75rem, 3.2vw, 0.875rem);
}

@media only screen and (min-width: 861px) {
    .info-filter .column-2 { text-align: right; }
}

@media only screen and (max-width: 860px) {
    .info-filter { grid-template-columns: 100%; }
}

.info-filter li { list-style: none; }