/* ============ 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;
    padding: 0 20px; height: 54px; position: sticky; top: 0; z-index: 20;
}
.topbar-title { font-weight: 700; font-size: 15px; flex: 1; }
.topbar-user { display: flex; align-items: center; gap: 8px; }
.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 {
    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; }

/* ---------- 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; }

/* ---------- Shopee ---------- */
.shop-box { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 12px; }
.shop-head { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.shop-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.shop-edit { margin-top: 10px; }
.shop-edit summary { cursor: pointer; color: var(--blue); font-weight: 600; font-size: 12.5px; }

/* ---------- Đă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; }
    .topbar-title { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

    /* ---- 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; }

    /* ---- 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; }

    /* 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); }

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

.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; }