/* ============ KAW Manager — giao diện quản trị ============ */
:root {
    --blue: #2563eb;
    --blue-d: #1d4ed8;
    --bg: #f3f5f9;
    --card: #ffffff;
    --line: #e5e9f0;
    --text: #1e293b;
    --muted: #64748b;
    --sidebar: #101828;
    --sidebar-2: #1b2537;
    --red: #dc2626;
    --green: #16a34a;
    --orange: #d97706;
    --indigo: #4f46e5;
    --radius: 10px;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 13.5px;
    color: var(--text);
    background: var(--bg);
}
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
h2 { font-size: 18px; } h3 { font-size: 15px; }
hr { border: 0; border-top: 1px solid var(--line); margin: 16px 0; }
.small { font-size: 12px; }
.muted { color: var(--muted); }
.tr { text-align: right; } .tc { text-align: center; }
.c-red { color: var(--red); } .c-blue { color: var(--blue); }
.c-green { color: var(--green); } .c-orange { color: var(--orange); }
.c-red-b { color: var(--red); font-weight: 700; }
.inline { display: inline; }

/* ---------- Khung ứng dụng ---------- */
.app { display: flex; min-height: 100vh; }
.sidebar {
    width: 232px; flex: 0 0 232px;
    background: var(--sidebar); color: #cbd5e1;
    display: flex; flex-direction: column;
    position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.sidebar-top { display: flex; align-items: center; border-bottom: 1px solid rgba(255,255,255,.08); }
.brand {
    display: flex; align-items: center; flex: 1; min-width: 0;
    padding: 16px 8px 14px 16px;
    color: #fff; font-weight: 700; font-size: 15px;
}
.brand:hover { text-decoration: none; }
.brand-ico { color: var(--blue); margin-right: 4px; }
.brand-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn-collapse {
    flex: 0 0 auto; margin-right: 10px; width: 28px; height: 28px;
    border: none; border-radius: 6px; background: transparent; color: #9fb0cc;
    cursor: pointer; font-size: 14px; line-height: 1; position: relative;
}
.btn-collapse:hover { background: var(--sidebar-2); color: #fff; }
.nav { padding: 8px 0 24px; }
.nav-group {
    padding: 14px 16px 5px; font-size: 10.5px; font-weight: 700;
    letter-spacing: .06em; color: #7c8aa5; text-transform: uppercase;
}
.nav-item {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 16px; color: #cbd5e1; font-size: 13px; position: relative;
}
.nav-item:hover { background: var(--sidebar-2); color: #fff; text-decoration: none; }
.nav-item.active { background: var(--blue); color: #fff; }
.ni-ico { width: 18px; text-align: center; flex: 0 0 18px; }
.sidebar-user-collapsed { display: none; }

/* ---------- Sidebar thu gọn (chỉ hiện icon, có tooltip khi rê chuột) ---------- */
body.sidebar-collapsed .sidebar { width: 64px; flex: 0 0 64px; }
body.sidebar-collapsed .brand { padding: 16px 0; justify-content: center; }
body.sidebar-collapsed .brand-text { display: none; }
body.sidebar-collapsed .brand-ico { margin-right: 0; }
body.sidebar-collapsed .sidebar-top { flex-direction: column-reverse; padding: 4px 0; }
body.sidebar-collapsed .btn-collapse { margin: 4px 0; }
body.sidebar-collapsed .nav-group { display: none; }
body.sidebar-collapsed .ni-label { display: none; }
body.sidebar-collapsed .nav-item { justify-content: center; padding: 9px 0; }
body.sidebar-collapsed .sidebar-user { display: none; }
body.sidebar-collapsed .sidebar-user-collapsed {
    display: flex; flex-direction: column; border-top: 1px solid rgba(255,255,255,.08); padding: 6px 0;
}
body.sidebar-collapsed .nav-item[data-tip]:hover::after,
body.sidebar-collapsed .btn-collapse[data-tip]:hover::after {
    content: attr(data-tip);
    position: absolute; left: 100%; top: 50%; transform: translateY(-50%);
    margin-left: 8px; background: #111827; color: #fff; padding: 5px 10px;
    border-radius: 6px; font-size: 12.5px; white-space: nowrap; z-index: 60;
    box-shadow: 0 6px 16px rgba(0,0,0,.28); pointer-events: none;
}

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
    background: var(--card); border-bottom: 1px solid var(--line);
    display: flex; align-items: center; gap: 12px; flex-wrap: nowrap;
    padding: 0 20px; min-height: 54px; overflow: hidden;
    position: sticky; top: 0; z-index: 20;
}
.topbar-title {
    font-weight: 700; font-size: 15px; flex: 1 1 auto; min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topbar-user { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.topbar-logo { display: flex; align-items: center; flex: 0 0 auto; }
.u-name { font-weight: 600; }
.u-name small { color: var(--muted); font-weight: 400; }
.content { padding: 18px 20px 40px; }

/* ---------- Nút ---------- */
.btn {
    display: inline-block; border: 1px solid transparent; cursor: pointer;
    border-radius: 8px; padding: 8px 14px; font-size: 13px; font-weight: 600;
    background: var(--card); color: var(--text); line-height: 1.2;
}
.btn:hover { text-decoration: none; filter: brightness(.97); }
.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--blue-d); }
.btn-ghost { border-color: var(--line); background: #fff; }
.btn-danger { background: #fee2e2; color: var(--red); }
.btn-sm { padding: 5px 10px; font-size: 12.5px; }
.btn-block { width: 100%; }
.btn-icon { border: 1px solid var(--line); background: #fff; border-radius: 8px; padding: 6px 10px; cursor: pointer; }
.mini {
    display: inline-block; padding: 2px 7px; border-radius: 6px;
    border: 1px solid var(--line); background: #fff; color: var(--muted);
    font-size: 12px; cursor: pointer;
}
.mini:hover { color: var(--blue); border-color: var(--blue); text-decoration: none; }
.sp-del-txt { display: none; }

/* ---------- Card / toolbar ---------- */
.card {
    display: block; width: 100%; box-sizing: border-box;
    background: var(--card); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 16px; margin-bottom: 16px;
}
.card-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; margin-bottom: 12px; flex-wrap: wrap;
}
.card-head h2 { margin: 0; }
.toolbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; margin-bottom: 14px; flex-wrap: wrap;
}
.toolbar-search { display: flex; gap: 8px; flex-wrap: wrap; }
.toolbar-search .f-input { width: auto; min-width: 170px; }
.toolbar-actions { display: flex; gap: 8px; flex-wrap: wrap; }
/* Trên desktop các nút trong "toolbar-more" hiện bình thường ngay trong hàng — chỉ mobile mới gom
   thành menu xổ xuống (xem @media max-width:900px bên dưới), nên ở đây không tạo box riêng. */
.toolbar-more { display: contents; }

/* ---------- Bảng ---------- */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; }
.table th {
    text-align: left; font-size: 12px; color: var(--muted);
    border-bottom: 2px solid var(--line); padding: 8px 10px; white-space: nowrap;
    background: #fafbfd;
}
.table th.tr { text-align: right; } .table th.tc { text-align: center; }
.table td { border-bottom: 1px solid var(--line); padding: 8px 10px; vertical-align: middle; }
.table.small th, .table.small td { padding: 5px 8px; font-size: 12px; }
.table tbody tr:hover { background: #f6f9ff; }
.row-link { cursor: pointer; }
.empty { text-align: center; color: var(--muted); padding: 26px !important; }
.row-actions { white-space: nowrap; }
.thumb { max-height: 42px; max-width: 70px; border-radius: 4px; border: 1px solid var(--line); }
.anh-hoa-don-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.anh-hoa-don-slot { border: 1px dashed var(--line); border-radius: var(--radius); padding: 8px; text-align: center; }
.anh-hoa-don-slot .thumb { max-height: 90px; max-width: 100%; display: block; margin: 0 auto 6px; }
.anh-hoa-don-slot .f-check { justify-content: center; margin-bottom: 6px; font-size: 12px; }
.anh-hoa-don-slot .f-input { font-size: 11px; }
.detail-photos { display: flex; flex-wrap: wrap; gap: 10px; }
.detail-photos a img { max-height: 110px; max-width: 140px; border-radius: var(--radius); border: 1px solid var(--line); object-fit: cover; }

/* Bảng key-value chi tiết */
.kv { width: 100%; border-collapse: collapse; }
.kv th {
    text-align: left; color: var(--muted); font-weight: 500;
    width: 190px; padding: 7px 10px 7px 0; vertical-align: top; font-size: 13px;
}
.kv td { padding: 7px 0; border-bottom: 1px dashed var(--line); }
.kv tr:last-child td { border-bottom: 0; }
.detail-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; }

/* ---------- Badge ---------- */
.badge {
    display: inline-block; padding: 3px 9px; border-radius: 999px;
    font-size: 11.5px; font-weight: 700; white-space: nowrap;
}
.b-gray { background: #eef1f5; color: #475569; }
.b-blue { background: #dbeafe; color: var(--blue-d); }
.b-green { background: #dcfce7; color: #15803d; }
.b-red { background: #fee2e2; color: var(--red); }
.b-indigo { background: #e0e7ff; color: var(--indigo); }
.b-orange { background: #ffedd5; color: var(--orange); }
.count-badge {
    display: inline-block; background: #eef1f5; color: var(--muted);
    border-radius: 6px; padding: 1px 7px; font-size: 11.5px; font-weight: 700;
}

/* ---------- Form ---------- */
.f-label { display: block; font-size: 12.5px; font-weight: 600; color: #475569; margin: 0 0 4px; }
.f-input {
    width: 100%; padding: 8px 10px; font-size: 13.5px;
    border: 1px solid #cfd6e0; border-radius: 8px; background: #fff; color: var(--text);
}
.f-input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37,99,235,.13); }
textarea.f-input { resize: vertical; }
.f-check { display: flex; align-items: center; gap: 7px; padding: 6px 0; font-weight: 500; cursor: pointer; }
.f-hint { margin-top: 6px; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px 16px; }
.f-wide { grid-column: 1 / -1; }

/* ---------- Layout "side by side" kiểu AppSheet: nhãn cố định bên trái, ô nhập bên phải ---------- */
.form-rows { display: flex; flex-direction: column; gap: 2px; }
.form-rows .f-group {
    display: flex; align-items: center; gap: 16px;
    padding: 9px 0; border-bottom: 1px solid #f0f2f5;
}
.form-rows .f-group:last-child { border-bottom: 0; }
.form-rows .f-label {
    flex: 0 0 150px; margin: 0; font-size: 13px; font-weight: 600; color: #475569;
}
.form-rows .f-group > :not(.f-label) { flex: 1; min-width: 0; }
.form-rows .f-group > .f-label + * { flex: 1; }
/* Ô nhập trong layout này giữ nguyên khung viền như bình thường, chỉ đổi hướng bố cục nhãn/ô */
.form-rows .f-hint, .form-rows small { flex-basis: 100%; margin-left: 166px; }
.form-rows .f-group-block { align-items: flex-start; }
.form-rows .f-group-block > .f-label { padding-top: 6px; }

/* ---------- Nhập nhanh SKU (dán mã kiểu SKU-GH-00-SL) ---------- */
.quick-sku-box {
    border: 1px dashed var(--blue); background: #f0f7ff; border-radius: var(--radius);
    padding: 12px 14px; margin-bottom: 14px;
}
.quick-sku-box .f-label { color: var(--blue); }
.quick-sku-box textarea.f-input { font-family: ui-monospace, Consolas, monospace; font-size: 13px; }
.quick-sku-box .quick-sku-actions { display: flex; gap: 8px; margin-top: 8px; align-items: center; }
.quick-sku-hint { font-size: 12px; color: var(--muted); margin-top: 6px; line-height: 1.5; }
.quick-sku-hint code { background: #fff; border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; }

/* ---------- Chọn khách hàng (danh bạ hoặc khai báo mới) ---------- */
.kh-block { margin-bottom: 16px; }
.kh-hidden { display: none !important; }
.kh-search-inline { display: flex; gap: 8px; flex-wrap: wrap; }
.kh-search-inline .f-input { flex: 1; min-width: 200px; }
.kh-search-inline .btn { flex: 0 0 auto; white-space: nowrap; }
.kh-picked {
    display: flex; align-items: flex-start; gap: 12px;
    border: 1px solid var(--line); border-radius: var(--radius);
    background: #f0f7ff; padding: 12px 14px; margin-bottom: 4px;
}
.kh-picked-ico { font-size: 22px; line-height: 1.3; }
.kh-picked-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.kh-picked-info b { font-size: 14.5px; }
.kh-picked-info .muted { font-size: 12.5px; }
#khNewBlock { margin-top: 4px; }

/* ---------- Chip chọn nhanh Đơn vị vận chuyển (lọc theo Loại vận đơn) ---------- */
.dvvc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.dvvc-chip {
    border: 1px solid var(--line); background: #fff; color: var(--text);
    border-radius: 999px; padding: 5px 12px; font-size: 12.5px; font-weight: 700;
    cursor: pointer;
}
.dvvc-chip:hover { border-color: var(--blue); color: var(--blue); }
.dvvc-chip.active { background: var(--blue); border-color: var(--blue); color: #fff; }
.form-actions { margin-top: 18px; display: flex; gap: 10px; }
.form-section {
    margin: 22px 0 10px; padding-bottom: 6px;
    border-bottom: 2px solid var(--line); color: var(--blue-d); font-size: 14px;
}
.filter-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: end; }
.filter-row .f-group { min-width: 150px; }
.map-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px 14px; }
.inline-form { display: inline-flex; gap: 6px; align-items: center; }
.inline-adjust { display: flex; gap: 6px; align-items: center; }

/* ---------- Flash ---------- */
.alert { padding: 11px 14px; border-radius: 8px; margin-bottom: 14px; font-weight: 500; }
.alert-success { background: #dcfce7; color: #166534; }
.alert-danger { background: #fee2e2; color: #991b1b; }

/* ---------- Trang danh sách: cây tháng ---------- */
.split { display: flex; gap: 14px; align-items: flex-start; }
.month-tree { width: 190px; flex: 0 0 190px; padding: 8px; max-height: 76vh; overflow-y: auto; }
.list-card { flex: 1; min-width: 0; }
.mt-item {
    display: flex; justify-content: space-between; align-items: center; gap: 6px;
    padding: 7px 9px; border-radius: 7px; color: var(--text); font-weight: 600; font-size: 12.5px;
}
.mt-item:hover { background: #f1f5fd; text-decoration: none; }
.mt-item.active { background: var(--blue); color: #fff; }
.mt-item.active .mt-badge { background: rgba(255,255,255,.22); color: #fff; }
.mt-badge {
    background: #eef1f5; color: #475569; border-radius: 6px;
    padding: 1px 6px; font-size: 11px; font-weight: 700; white-space: nowrap;
}
.mt-badge.neg { background: #fee2e2; color: var(--red); }

/* ---- Cây NGÀY bung dưới tháng đang mở (giao diện admin) ---- */
.mt-sub { margin: 2px 0 6px 0; border-left: 2px solid #e5e9f0; padding-left: 6px; }
.mt-item.mt-day { font-weight: 500; font-size: 12px; padding: 5px 8px; }
.mt-item.mt-day .mt-badge { font-size: 10.5px; }
.mt-item.mt-open { background: #eef2ff; }
.mt-item.mt-open.active { background: var(--blue); }

/* ---- Dòng tiêu đề nhóm NHÂN VIÊN trong bảng đơn hàng ---- */
.table tbody tr.grp-row td {
    background: #f1f5f9; border-top: 2px solid #cbd5e1;
    padding: 7px 10px; font-size: 12.5px;
}
.table tbody tr.grp-row:hover td { background: #f1f5f9; }
.grp-name { font-weight: 700; margin-right: 10px; }
.grp-sum {
    background: #dbeafe; color: #1d4ed8; border-radius: 6px;
    padding: 1px 7px; font-size: 11.5px; font-weight: 700; margin-right: 8px;
}
.grp-sum.neg { background: #fee2e2; color: var(--red); }
.list-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; flex-wrap: wrap; gap: 8px; }
.bulk-bar {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    background: #eff6ff; border: 1px solid #bfdbfe; border-radius: var(--radius);
    padding: 10px 14px; margin-bottom: 10px;
}
.bulk-bar .f-input { width: auto; min-width: 160px; }
.bulk-bar #bulkApply:disabled { opacity: .5; cursor: not-allowed; }
.pagination { display: flex; gap: 5px; }
.pg {
    display: inline-block; min-width: 30px; text-align: center; padding: 5px 8px;
    border: 1px solid var(--line); border-radius: 7px; color: var(--text); font-weight: 600; font-size: 12.5px;
}
.pg:hover { text-decoration: none; border-color: var(--blue); color: var(--blue); }
.pg.active { background: var(--blue); border-color: var(--blue); color: #fff; }
.pg-dots { align-self: center; color: var(--muted); }

/* ---------- Trang chủ ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; margin-bottom: 18px; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.stat-label { color: var(--muted); font-size: 12px; font-weight: 600; margin-bottom: 5px; }
.stat-value { font-size: 19px; font-weight: 800; }
.home-group { margin-bottom: 18px; }
.home-group-title { font-weight: 700; font-size: 13.5px; margin-bottom: 8px; color: #334155; }
.home-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.home-card {
    display: flex; align-items: center; gap: 12px;
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 14px; color: var(--text); font-weight: 700; font-size: 12.5px;
}
.home-card:hover { border-color: var(--blue); text-decoration: none; box-shadow: 0 2px 8px rgba(37,99,235,.10); }
.hc-ico { font-size: 21px; }

/* ---------- Chi tiết đơn: hàng nút thao tác ---------- */
.action-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.act {
    display: inline-flex; flex-direction: column; align-items: center; gap: 4px;
    min-width: 84px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 9px;
    background: #fff; color: var(--text); font-size: 11.5px; font-weight: 700; cursor: pointer;
}
.act:hover { border-color: var(--blue); color: var(--blue); text-decoration: none; }
.act-ico { font-size: 17px; }
.act-danger:hover { border-color: var(--red); color: var(--red); }

/* ---------- Bar chart CSS ---------- */
.bar-wrap { display: flex; align-items: center; gap: 8px; }
.bar { height: 16px; background: var(--blue); border-radius: 3px; min-width: 3px; }
.bar-val { font-weight: 700; font-size: 12.5px; }

/* ---------- Phân quyền ---------- */
.perm-table td, .perm-table th { padding: 6px 10px; }
.perm-group td { background: #f1f5fd; font-weight: 700; color: var(--blue-d); font-size: 12.5px; }
.perm-table input[type="checkbox"] { width: 16px; height: 16px; }

/* ---------- Đăng nhập ---------- */
.login-body {
    display: flex; align-items: center; justify-content: center;
    min-height: 100vh; min-height: 100dvh;
    padding: 20px calc(20px + env(safe-area-inset-right)) calc(20px + env(safe-area-inset-bottom)) calc(20px + env(safe-area-inset-left));
    background: linear-gradient(135deg, #101828 0%, #1e3a8a 100%);
}
.login-box {
    background: #fff; border-radius: 14px; padding: 30px 28px;
    width: 100%; max-width: 380px; box-shadow: 0 18px 50px rgba(0,0,0,.35);
}
.login-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.login-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 9px; flex: 0 0 auto;
    background: var(--blue); color: #fff; font-size: 18px; font-weight: 800;
}
.login-title { font-size: 17px; font-weight: 800; }
.login-sub { color: var(--muted); margin: 0 0 18px; font-size: 13px; }
.login-box .f-input { margin-bottom: 13px; font-size: 16px; min-height: 44px; }
.login-box .f-label { margin-top: 2px; }
.login-box .btn-block { min-height: 46px; font-size: 15px; }
.login-divider { display: flex; align-items: center; gap: 10px; margin: 16px 0; color: var(--muted); font-size: 12.5px; }
.login-divider::before, .login-divider::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.btn-google {
    display: flex; align-items: center; justify-content: center; gap: 9px;
    border: 1px solid var(--line); background: #fff; color: var(--text);
    min-height: 46px; font-size: 14.5px;
}
.btn-google:hover { background: #f8fafc; }
.login-note { text-align: center; color: var(--muted); font-size: 12px; margin: 12px 0 0; }
@media (max-width: 420px) {
    .login-box { padding: 24px 20px; border-radius: 12px; }
}

/* ---------- In ấn & responsive ---------- */
@media print {
    .sidebar, .topbar, .toolbar, .btn, .month-tree, .action-row, .row-actions, .bottomnav { display: none !important; }
    .content { padding: 0; }
    .card { border: 0; }
}
.only-mobile { display: none; }
.sidebar-mask { display: none; }
.bottomnav { display: none; }
.sidebar-user { display: none; }

@media (max-width: 900px) {
    .only-mobile { display: inline-block; }
    .hide-mobile { display: none !important; }
    .sidebar {
        position: fixed; left: -250px; z-index: 40; transition: left .18s ease;
        box-shadow: 4px 0 18px rgba(0,0,0,.3);
        display: flex; flex-direction: column;
        width: 250px !important; flex: 0 0 250px !important;
    }
    /* Trên di động luôn hiện đầy đủ menu, không áp trạng thái thu gọn của desktop */
    body.sidebar-collapsed .brand-text,
    body.sidebar-collapsed .ni-label { display: inline; }
    body.sidebar-collapsed .nav-group { display: block; }
    body.sidebar-collapsed .nav-item { justify-content: flex-start; padding: 7px 16px; }
    body.sidebar-collapsed .brand { justify-content: flex-start; padding: 16px 8px 14px 16px; }
    body.sidebar-collapsed .sidebar-user-collapsed { display: none; }
    .sidebar .nav { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
    body.sidebar-open .sidebar { left: 0; }
    body.sidebar-open .sidebar-mask {
        display: block; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 35;
    }
    /* Khối user cuối sidebar (thay cụm user trên topbar) */
    .sidebar-user {
        display: block; border-top: 1px solid rgba(255,255,255,.12);
        padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    }
    .sidebar-user .su-name { font-weight: 700; font-size: 13px; margin-bottom: 6px; }
    .sidebar-user .su-name small { color: var(--muted); font-weight: 500; }
    .sidebar-user .su-links { display: flex; gap: 14px; }
    .sidebar-user .su-links a { color: #cfd8ea; font-size: 13px; text-decoration: none; }

    .split { flex-direction: column; }
    .detail-cols { grid-template-columns: 1fr; }
    .content { padding: 12px 12px calc(74px + env(safe-area-inset-bottom)); }
    .topbar { position: sticky; top: 0; z-index: 30; }

    /* ---- Danh sách Tháng / Ngày kiểu "đi sâu từng cấp" (giống app tham khảo):
       mỗi dòng full-width, số tiền hiện dạng pill xám bên phải, có mũi tên "›".
       Đang xem ngày của 1 tháng thì CHỈ hiện đúng list ngày đó (ẩn các tháng khác);
       đã chọn hẳn 1 ngày thì ẩn cả khối này, chỉ còn bảng đơn + nút "‹ quay lại". ---- */
    .month-tree {
        width: 100%; flex: none; max-height: none;
        display: block; padding: 0; overflow: visible;
    }
    .mt-section-label {
        padding: 12px 14px 6px; font-weight: 700; font-size: 15px; color: var(--text);
    }
    .mt-back {
        display: block; padding: 13px 14px; font-weight: 700; color: var(--blue);
        font-size: 15px; border-bottom: 1px solid var(--line); background: var(--card);
    }
    .month-tree .mt-item {
        display: flex; justify-content: space-between; align-items: center; gap: 8px;
        white-space: nowrap; border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
        background: var(--card); padding: 14px 14px; font-size: 16px; font-weight: 700; color: var(--blue);
    }
    .month-tree .mt-item::after { content: '›'; color: #94a3b8; font-size: 20px; font-weight: 400; }
    .month-tree .mt-item.active { background: #eef4ff; }
    .month-tree .mt-item.mt-all { color: var(--text); }
    .month-tree .mt-item.mt-day { font-size: 15px; font-weight: 500; color: var(--text); }
    .month-tree .mt-badge {
        background: #e9edf3; color: #475569; border-radius: 999px;
        padding: 4px 12px; font-size: 13px; font-weight: 700;
    }
    .month-tree .mt-sub { display: block; margin: 0; border: 0; padding: 0; }
    /* Đang ở list NGÀY của 1 tháng: ẩn nút All + các dòng tháng, chỉ còn list ngày */
    .month-tree.mt-drilled .mt-all,
    .month-tree.mt-drilled .mt-item.mt-month { display: none; }
    /* Đã chọn hẳn 1 ngày: ẩn toàn bộ khối Tháng/Ngày, chỉ còn bảng đơn */
    .split.mobile-drill-day .month-tree { display: none; }
    /* NGƯỢC LẠI: khi CHƯA đi hẳn vào 1 ngày cụ thể (đang ở mức Tháng/Ngày), ẩn hẳn khối danh sách đơn —
       app tham khảo (AppSheet) ở mức Tháng/Ngày CHỈ hiện cây Tháng/Ngày, không hiện kèm danh sách đơn
       bên dưới; chỉ khi bấm hẳn vào 1 ngày cụ thể mới sang màn hình danh sách đơn của ngày đó. Dùng
       class riêng (không phải ":not(.mobile-drill-day)") vì ở Đơn hàng ngoài/Đơn hàng Shopee, việc bung
       Ngày CHỈ dành cho admin — người dùng khác không có bước "Ngày" nên phải luôn hiện danh sách đơn
       ngay khi chọn Tháng, nếu dùng :not() sẽ ẩn mất danh sách đơn của họ hoàn toàn trên di động.
       Xem thêm view dùng chung pattern này: donhang/list.php (admin có bước Ngày, người dùng khác không). */
    .split.mobile-hide-list .list-card { display: none; }

    /* ---- Dòng tiêu đề nhóm (nhân viên / gian hàng): avatar tròn + tên đậm + pill tổng tiền ---- */
    .table tbody tr.grp-row td {
        display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
        padding: 12px 14px; background: var(--card); border-top: 1px solid var(--line);
    }
    .grp-name { display: flex; align-items: center; gap: 8px; font-size: 15px; }
    .grp-sum { background: #e9edf3; color: #334155; border-radius: 999px; padding: 4px 12px; font-size: 13px; }

    /* Nút "+ Thêm" nổi kiểu FAB, dính góc dưới phải giống app tham khảo */
    .btn-fab {
        position: fixed; right: 16px; bottom: calc(72px + env(safe-area-inset-bottom));
        z-index: 25; width: 52px; height: 52px; padding: 0; border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        box-shadow: 0 6px 16px rgba(37,99,235,.4);
    }
    .btn-fab .fab-icon { font-size: 26px; line-height: 1; }
    .btn-fab .fab-label { display: none; }

    /* Bảng: cuộn ngang mượt, chữ vừa mắt */
    .table-wrap { -webkit-overflow-scrolling: touch; }
    .table th, .table td { white-space: nowrap; }

    /* Toolbar: ô tìm kiếm full width, nút to dễ bấm */
    .toolbar { flex-direction: column; align-items: stretch; }
    .toolbar-search { width: 100%; }
    .toolbar-search .f-input { flex: 1; min-width: 0; }
    .toolbar-actions { justify-content: flex-start; }
    .btn { min-height: 40px; }
    .btn-sm { min-height: 34px; }
    .row-actions a, .row-actions button { padding: 8px; }

    /* ---- Dọn gọn toolbar di động kiểu AppSheet: ô tìm kiếm + icon Filter là đủ, Trạng thái/Gian
       hàng đã có sẵn trong panel Filter nên ẩn luôn 2 ô chọn + nút "Tìm" ở đây cho đỡ rối; các nút
       phụ (Import/Xuất Excel/Sửa nhanh) gom vào menu "⋮" xổ xuống thay vì xếp thành nhiều hàng. ---- */
    .toolbar-search select.f-input,
    .toolbar-search > button[type="submit"] { display: none; }
    .toolbar-more {
        display: none; position: absolute; right: 0; top: calc(100% + 4px); z-index: 45;
        background: #fff; border: 1px solid var(--line); border-radius: 10px;
        box-shadow: 0 8px 20px rgba(0,0,0,.14); padding: 6px; min-width: 220px;
        flex-direction: column; gap: 2px;
    }
    .toolbar-more.open { display: flex; }
    .toolbar-more .btn { width: 100%; justify-content: flex-start; border: 0; box-shadow: none; }
    .toolbar-actions { position: relative; }
    .btn-icon-more { display: inline-flex; }

    /* Form: 1 cột, input 16px chống iOS tự zoom, nút Lưu dính đáy */
    .form-grid, .map-grid { grid-template-columns: 1fr; }
    .form-rows .f-group { flex-direction: column; align-items: stretch; gap: 4px; }
    .form-rows .f-label { flex-basis: auto; }
    .form-rows .f-hint, .form-rows small { margin-left: 0; }
    .f-input, select.f-input, textarea.f-input { font-size: 16px; min-height: 42px; }
    .form-actions {
        position: sticky; bottom: calc(64px + env(safe-area-inset-bottom));
        background: var(--bg); padding: 10px 0; margin: 8px -2px 0;
        border-top: 1px solid var(--line); z-index: 5; display: flex; gap: 8px;
    }
    .form-actions .btn { flex: 1; }

    /* ===== Bảng "Sản phẩm mua": chuyển thành thẻ (card) từng dòng, kiểu form 1 cột dễ chọn ===== */
    #spTable, #spTable tbody { display: block; width: 100%; }
    #spTable thead { display: none; }
    #spTable tr.sp-row {
        display: block; border: 1px solid var(--line); border-radius: 12px;
        padding: 12px 14px 10px; margin-bottom: 12px; background: var(--card);
        box-shadow: 0 1px 3px rgba(0,0,0,.04);
    }
    #spTable tbody { counter-reset: sp-line; }
    #spTable tr.sp-row { counter-increment: sp-line; }
    #spTable tr.sp-row::before {
        content: "Sản phẩm #" counter(sp-line);
        display: block; font-weight: 800; font-size: 12.5px; color: var(--primary);
        text-transform: uppercase; letter-spacing: .3px;
        margin: -2px -2px 10px; padding-bottom: 8px; border-bottom: 1px solid var(--line);
    }
    #spTable td {
        display: block; width: 100%; padding: 0 0 12px; border: 0; text-align: left !important;
    }
    #spTable td::before {
        content: attr(data-label); display: block; font-size: 11.5px; font-weight: 700;
        color: var(--muted); margin-bottom: 5px; text-transform: uppercase; letter-spacing: .3px;
    }
    #spTable td input { width: 100%; }
    #spTable td.sp-tt {
        background: #eff6ff; border-radius: 8px; padding: 10px 12px; font-size: 17px;
        font-weight: 800; color: var(--primary);
    }
    #spTable td.sp-tt::before { color: var(--primary); opacity: .75; }
    #spTable td.tc { padding-bottom: 0; }
    #spTable td.tc::before { content: none; }
    #spTable .sp-del {
        width: 100%; min-height: 42px; border-radius: 8px; background: #fef2f2;
        color: var(--red); border: 1px solid #fecaca; font-weight: 700; font-size: 13.5px;
    }
    #spTable .sp-del-txt { display: inline; }
    #btnAddSp { width: 100%; justify-content: center; min-height: 46px; font-weight: 700; margin-top: 4px; }

    /* Khối chọn khách hàng: xếp dọc, nút full width */
    .kh-picked { flex-direction: column; }
    .kh-picked #btnKhChange { width: 100%; }
    .kh-search-inline { flex-direction: column; }
    .kh-search-inline .f-input, .kh-search-inline .btn { width: 100%; min-width: 0; }

    /* Nút thao tác chi tiết đơn: lưới 2 cột, tap target chuẩn */
    .action-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .action-row .act, .action-row form { width: 100%; }
    .action-row form .act { width: 100%; justify-content: center; }
    .act { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; }

    /* Thẻ thống kê 2 cột */
    .stat-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
    .stat-value { font-size: 16px; }

    /* ===== Bottom navigation kiểu app ===== */
    .bottomnav {
        display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
        background: var(--card); border-top: 1px solid var(--line);
        padding: 4px 2px calc(4px + env(safe-area-inset-bottom));
        justify-content: space-around; align-items: center;
    }
    .bn-item {
        display: flex; flex-direction: column; align-items: center; gap: 2px;
        font-size: 10.5px; font-weight: 600; color: var(--muted);
        text-decoration: none; background: none; border: 0; padding: 4px 8px;
        min-width: 58px; cursor: pointer; border-radius: 8px;
    }
    .bn-item.active { color: var(--primary); }
    .bn-ico { font-size: 19px; line-height: 1; }
    .bn-add {
        width: 46px; height: 46px; border-radius: 50%; background: var(--primary);
        color: #fff; font-size: 26px; font-weight: 700; display: flex;
        align-items: center; justify-content: center; text-decoration: none;
        margin-top: -18px; box-shadow: 0 4px 12px rgba(37,99,235,.45);
        border: 3px solid var(--bg);
    }
}
@media (max-width: 900px) {
    .filter-row .f-group { min-width: 0; flex: 1 1 140px; }
    .bulk-bar { flex-direction: column; align-items: stretch; }
    .bulk-bar .f-input, .bulk-bar #bulkApply { width: 100%; min-width: 0; }
}

@media (max-width: 560px) {
    .card { padding: 12px; }
    .card-head h2 { font-size: 16px; }
    .table.small th, .table.small td { font-size: 12px; }
    .kv th { width: 40%; font-size: 12.5px; }
}

/* ---- Đóng công nợ: phân biệt bằng màu nền cả dòng ----
   XANH = tiền RÚT VỀ từ Shopee (tiền vào tay quản lý gian hàng)
   ĐỎ   = tiền ĐÓNG công nợ cho công ty (tiền nộp ra) */
tr.row-money-in  { background: rgba(22, 163, 74, .07); box-shadow: inset 3px 0 0 var(--green); }
tr.row-money-out { background: rgba(220, 38, 38, .07); box-shadow: inset 3px 0 0 var(--red); }
tr.row-money-in:hover  { background: rgba(22, 163, 74, .14); }
tr.row-money-out:hover { background: rgba(220, 38, 38, .14); }
.badge-in  { background: rgba(22,163,74,.12); color: var(--green); border: 1px solid rgba(22,163,74,.35);
             padding: 2px 8px; border-radius: 999px; font-weight: 600; font-size: 12px; white-space: nowrap; }
.badge-out { background: rgba(220,38,38,.12); color: var(--red); border: 1px solid rgba(220,38,38,.35);
             padding: 2px 8px; border-radius: 999px; font-weight: 600; font-size: 12px; white-space: nowrap; }

/* ---- Thu chi: nền dòng theo trạng thái thanh toán ---- */
tr.row-tt-ok   { background: rgba(22, 163, 74, .06); box-shadow: inset 3px 0 0 var(--green); }
tr.row-tt-no   { background: rgba(220, 38, 38, .06); box-shadow: inset 3px 0 0 var(--red); }
tr.row-tt-warn { background: rgba(234, 88, 12, .06); box-shadow: inset 3px 0 0 var(--orange); }
tr.row-tt-ok:hover   { background: rgba(22, 163, 74, .13); }
tr.row-tt-no:hover   { background: rgba(220, 38, 38, .13); }
tr.row-tt-warn:hover { background: rgba(234, 88, 12, .13); }

/* ---- Bấm tiêu đề cột để sắp xếp ---- */
.table thead th a.th-sort { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.table thead th a.th-sort:hover { color: var(--blue); }
.th-arrow { font-size: 10px; opacity: .35; }
a.th-sort:hover .th-arrow { opacity: .8; }
a.th-sort-on { color: var(--blue); font-weight: 700; }
a.th-sort-on .th-arrow { opacity: 1; }

/* ---- Bảng dài/rộng: cuộn ngay trong khung vừa màn hình ----
   Trước đây bảng dài bao nhiêu thì trang dài bấy nhiêu, muốn kéo ngang phải cuộn xuống tận
   cuối trang mới thấy thanh trượt. Nay khung bảng tự giới hạn theo chiều cao màn hình nên
   THANH TRƯỢT NGANG luôn nằm trong tầm nhìn, đồng thời tiêu đề cột dính lại khi cuộn dọc. */
.list-card .table-wrap {
    max-height: calc(100vh - 240px);
    min-height: 220px;
    overflow: auto;
    overscroll-behavior: contain;
}
.list-card .table thead th {
    position: sticky; top: 0; z-index: 3;
    background: var(--bg-card, #fff);
    box-shadow: inset 0 -1px 0 var(--border, #e5e7eb);
}
/* Thanh trượt dày hơn cho dễ bắt chuột */
.list-card .table-wrap::-webkit-scrollbar { height: 12px; width: 10px; }
.list-card .table-wrap::-webkit-scrollbar-thumb { background: #b9bfc9; border-radius: 6px; }
.list-card .table-wrap::-webkit-scrollbar-thumb:hover { background: #97a0ad; }
.list-card .table-wrap::-webkit-scrollbar-track { background: #f1f2f4; }

/* ---- Ô dữ liệu dài (tên sản phẩm, ghi chú...) hiện GỌN TRÊN 1 DÒNG, thừa chữ thì "..." ----
   Bấm/rê chuột vẫn xem được đủ nội dung qua title. Ô nào chủ động cần xuống dòng (VD cột
   Khách hàng có thêm số điện thoại bên dưới, dòng gộp nhóm) thì gắn class "td-wrap" để bỏ qua. */
.list-card .table td {
    max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.list-card .table td.td-wrap,
.list-card .table tr.grp-row td {
    max-width: none; overflow: visible; text-overflow: clip; white-space: normal;
}
/* Trong ô cho phép xuống dòng (td-wrap), TỪNG DÒNG con (VD mỗi tên sản phẩm) vẫn gọn 1 dòng
   riêng, thừa chữ thì "..." — ô cha xuống dòng được nhưng mỗi dòng con không tự vỡ dòng. */
.list-card .table td .sp-line {
    max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

@media (max-width: 900px) {
    /* Trên điện thoại để TRANG cuộn dọc bình thường (không lồng 2 vùng cuộn vào nhau — đây là
       nguyên nhân làm cả trang bị "đứng hình", không trượt được cả dọc lẫn ngang trên di động):
       bỏ giới hạn chiều cao + bỏ overscroll-behavior:contain của bản desktop, module bảng chỉ còn
       đúng 1 việc là cuộn NGANG khi bảng rộng hơn màn hình. */
    .list-card .table-wrap {
        max-height: none; min-height: 0; overflow-x: auto; overflow-y: visible;
        overscroll-behavior: auto; -webkit-overflow-scrolling: touch;
    }
    .list-card .table thead th { position: static; }
}

/* Dòng bấm được thì con trỏ phải là bàn tay — người dùng mới biết là bấm được */
.table tbody tr.row-link { cursor: pointer; }
.table tbody tr.row-link:hover { background: rgba(37, 99, 235, .05); }

/* Tô NỀN CẢ DÒNG theo trạng thái (VD Đơn hàng Shopee) — nhạt hơn hẳn màu nền của badge để
   chữ trong dòng vẫn đọc rõ; giữ nguyên sắc thái khi rê chuột qua để không bị "mất màu". */
.table tbody tr.row-st-green  { background: #f0fdf4; }
.table tbody tr.row-st-red    { background: #fef2f2; }
.table tbody tr.row-st-orange { background: #fffbeb; }
.table tbody tr.row-st-indigo { background: #eef2ff; }
.table tbody tr.row-st-blue   { background: #eff6ff; }
.table tbody tr.row-st-gray   { background: transparent; }
.table tbody tr.row-st-green:hover  { background: #e2fbe9; }
.table tbody tr.row-st-red:hover    { background: #fde3e3; }
.table tbody tr.row-st-orange:hover { background: #fef3c7; }
.table tbody tr.row-st-indigo:hover { background: #e0e7ff; }
.table tbody tr.row-st-blue:hover   { background: #dbeafe; }

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 700px) { .grid-3 { grid-template-columns: 1fr; } }

/* Trang Cấu hình Cron: ép chắc chắn các khối luôn xếp DỌC — dùng !important để không thể bị
   ghi đè bởi bất kỳ CSS nào khác (kể cả style tiêm từ ngoài vào), phòng trường hợp có nguyên
   nhân nằm ngoài file này mà chưa xác định được. */
.cron-page-stack {
    display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important;
    width: 100% !important;
}
.cron-page-stack > .card { flex: 0 0 auto !important; width: 100% !important; }

.multi-box { display:flex; flex-wrap:wrap; gap:4px 14px; max-height:180px; overflow:auto; padding:8px 10px; border:1px solid var(--border,#e5e7eb); border-radius:8px; }

/* ---------- Overlay "đang chạy" cho các thao tác lâu (đồng bộ Shopee, chạy cron thử...) ---------- */
.longrun-overlay {
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(15, 23, 42, .55);
    display: flex; align-items: center; justify-content: center;
}
.longrun-box {
    background: #fff; border-radius: 12px; padding: 28px 32px;
    display: flex; flex-direction: column; align-items: center; gap: 14px;
    box-shadow: 0 12px 32px rgba(0,0,0,.25); max-width: 320px; text-align: center;
    font-size: 14.5px; color: #1f2937;
}
.longrun-spinner {
    width: 34px; height: 34px; border-radius: 50%;
    border: 4px solid #e5e7eb; border-top-color: #2563eb;
    animation: longrun-spin .8s linear infinite;
}
@keyframes longrun-spin { to { transform: rotate(360deg); } }

/* ---------- Sửa nhanh nhiều dòng trên danh sách Đơn hàng (kiểu bảng tính) ---------- */
.qe-bar {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 9px 14px; margin-bottom: 10px;
    background: #EFF6FF; border: 1px solid #BFDBFE; border-radius: 8px;
}
.qe-cell { position: relative; min-width: 96px; }
.qe-input {
    display: none; width: 100%; min-width: 90px; padding: 4px 7px;
    font-size: 13px; min-height: 30px;
}
select.qe-input { min-width: 130px; }
table.qe-editing .qe-view { display: none; }
table.qe-editing .qe-input { display: inline-block; }
table.qe-editing .qe-cell { background: #FFFBEB; }
@media (max-width: 720px) {
    .qe-bar { font-size: 13px; }
}

/* ---------- Giá niêm yết trong bảng Sản phẩm mua: hiển thị thuần, không còn sửa/mở khóa được ---------- */
input.sp-gny-plain {
    border: none; background: transparent; box-shadow: none;
    padding: 6px 2px; color: inherit; cursor: default; pointer-events: none;
    width: 100%; text-align: right;
}

/* ---------- Panel "Filter" kiểu AppSheet (mobile) — donhang/list.php ---------- */
.btn-icon-filter { border: 1px solid var(--line); background: #fff; border-radius: 8px;
    width: 38px; height: 38px; display: none; align-items: center; justify-content: center; flex: none; color: var(--text); }
.btn-icon-filter.has-active { border-color: var(--blue); color: var(--blue); }
.btn-icon-more { border: 1px solid var(--line); background: #fff; border-radius: 8px;
    width: 38px; height: 38px; display: none; align-items: center; justify-content: center; flex: none; color: var(--text);
    font-size: 18px; font-weight: 700; line-height: 1; }
@media (max-width: 900px) { .btn-icon-filter { display: inline-flex; } }
.filter-mask { display: none; position: fixed; inset: 0; background: rgba(16,24,40,.45); z-index: 70; }
.filter-panel {
    position: fixed; top: 0; right: 0; bottom: 0; width: 88%; max-width: 400px;
    background: #fff; z-index: 71; transform: translateX(100%); transition: transform .25s ease;
    display: flex; flex-direction: column; box-shadow: -6px 0 20px rgba(0,0,0,.18);
}
body.filter-open .filter-mask { display: block; }
body.filter-open .filter-panel { transform: translateX(0); }
.filter-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.filter-head .fh-back { background: none; border: none; font-size: 20px; cursor: pointer; color: var(--text); padding: 4px; }
.filter-head .fh-title { font-size: 19px; font-weight: 700; flex: 1; }
.filter-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.filter-row { border-bottom: 1px solid var(--line); }
.filter-row-head { display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 15px 16px; cursor: pointer; font-size: 15px; -webkit-tap-highlight-color: transparent; }
.filter-row-head .fr-label { flex: 1; min-width: 0; }
.filter-row-head .fr-val { color: var(--blue); font-size: 12.5px; font-weight: 600; display: block; margin-top: 2px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filter-row-head .fr-arrow { color: var(--muted); font-size: 13px; transition: transform .15s; flex: none; }
.filter-row.open .fr-arrow { transform: rotate(90deg); }
.filter-row-body { display: none; padding: 0 16px 16px; }
.filter-row.open .filter-row-body { display: block; }
.filter-row-body .f-input { width: 100%; margin-bottom: 8px; box-sizing: border-box; }
.filter-range { display: flex; gap: 8px; align-items: center; }
.filter-range .f-input { margin-bottom: 0; }
.filter-range span { color: var(--muted); font-size: 12.5px; flex: none; }
.filter-foot { display: flex; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--line);
    position: sticky; bottom: 0; background: #fff; }
.filter-foot button { flex: 1; }