@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700&display=swap');
@import url('https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@2.47.0/tabler-icons.min.css');

/* MÀU CHỮ — các giá trị dưới đây đã được đo tương phản theo chuẩn WCAG AA (chữ thường cần
   >= 4,5:1 so với nền nó nằm lên). ĐỪNG đổi sang màu nhạt hơn nếu chưa đo lại: chữ xám nhạt
   #9ca3af trước đây chỉ đạt 2,5:1 trên nền trắng (gần như không đọc được ngoài nắng).
   QUY TẮC: --accent/--success/--warning/--danger DÙNG CHO CHỮ + viền + cột biểu đồ.
   Nút có NỀN ĐẶC chữ trắng phải dùng --*-solid (xem bên dưới), vì ở chế độ tối 4 biến trên
   được làm SÁNG lên để đọc được trên nền tối → chữ trắng đặt lên sẽ mất hút. */
:root {
    --bg-page: #f4f5f7;
    --bg-card: #ffffff;
    --border: #e5e7eb;
    --text-primary: #111827;
    --text-secondary: #4b5563;
    --text-muted: #646b78;
    --accent: #4338ca;
    --accent-bg: #eef2ff;
    --success: #147a3a;
    --success-bg: #dcfce7;
    --warning: #b45309;
    --warning-bg: #fef3c7;
    --danger: #b91c1c;
    --danger-bg: #fee2e2;
    /* Nền đặc cho nút/nhãn có CHỮ TRẮNG — giữ đậm ở cả 2 chế độ (>= 5:1 với chữ trắng). */
    --accent-solid: #4338ca;
    --success-solid: #15803d;
    --warning-solid: #b45309;
    --danger-solid: #b91c1c;
    --radius: 12px;
}

/* Chế độ tối — bật bằng thuộc tính data-theme="dark" trên thẻ <html>, gán qua JS + lưu
   localStorage (xem app.js). Ngoài nền/viền/chữ, 4 màu nhấn cũng phải đổi: bản gốc giữ
   nguyên #4338ca/#16a34a/#b45309/#dc2626 cho cả 2 chế độ, nhưng trên nền tối chúng chỉ đạt
   1,7–3,9:1 (mục "Tổng quan" đang chọn ở thanh bên chỉ 1,66:1 — chữ chìm hẳn vào nền).
   Các giá trị dưới đây đạt 5,4–9,6:1 trên nền thẻ/nền trang/nền nhãn tương ứng. */
[data-theme="dark"] {
    --bg-page: #16171d;
    --bg-card: #1f2128;
    --border: #333540;
    --text-primary: #f0f1f4;
    --text-secondary: #c4c7d0;
    --text-muted: #9ea1ac;
    --accent: #a5b4fc;
    --accent-bg: #2a2d55;
    --success: #4ade80;
    --success-bg: #123a24;
    --warning: #fbbf24;
    --warning-bg: #4a3510;
    --danger: #f87171;
    --danger-bg: #4a1616;
    --accent-solid: #4f46e5;
}
/* .btn-primary dùng var(--text-primary) làm NỀN (đậm ở light mode) — trong dark mode
   --text-primary lại là màu SÁNG (chữ dễ đọc trên nền tối), nên phải ghi đè riêng, nếu
   không nút primary sẽ có nền sáng + chữ trắng, gần như không đọc được. */
[data-theme="dark"] .btn-primary { background: var(--accent-solid); border-color: var(--accent-solid); }
[data-theme="dark"] .btn-primary:hover { background: #5b52d6; }

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--bg-page);
    color: var(--text-primary);
    font-size: 14px;
}

a { text-decoration: none; color: inherit; }

/* ===== LAYOUT ===== */
.app-shell {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    width: 240px;
    flex-shrink: 0;
    background: var(--bg-card);
    border-right: 1px solid var(--border);
    padding: 1rem 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    height: 100vh;
    position: sticky;
    top: 0;
    align-self: flex-start;
    overflow-y: auto;
    transition: width 0.18s ease;
}

/* ===== SIDEBAR THU NHỎ (chỉ hiện icon + logo) ===== */
.sidebar.collapsed {
    width: 64px;
    padding: 1rem 0.5rem;
}
.sidebar.collapsed .sidebar-text,
.sidebar.collapsed .sidebar-lang,
.sidebar.collapsed .nav-admin-group { display: none; }
.sidebar.collapsed .sidebar-brand { justify-content: center; }
.sidebar.collapsed .nav-item {
    justify-content: center;
    padding: 0.5rem;
}
.sidebar.collapsed .nav-item i { width: auto; }
.sidebar.collapsed .user-card { justify-content: center; padding: 0.55rem; }
.sidebar.collapsed .btn-logout { padding: 0.35rem; }

/* Nút thu nhỏ/mở rộng — nổi thành hình tròn nhỏ, nằm đè lên viền phải sidebar
   (tách biệt hoàn toàn khỏi hàng logo, tránh tạo khoảng trống lạc lõng cạnh logo) */
.sidebar-toggle-btn {
    position: absolute;
    top: 22px;
    right: -12px;
    width: 24px;
    height: 24px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    z-index: 5;
    transition: transform 0.18s ease;
}
.sidebar-toggle-btn:hover { background: var(--bg-page); }
.sidebar.collapsed .sidebar-toggle-btn { transform: rotate(180deg); }

.sidebar-bottom {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.2rem 0.3rem 0.6rem;
    font-weight: 600;
    font-size: 1rem;
}

.sidebar-lang {
    display: flex;
    gap: 4px;
    background: var(--bg-page);
    border-radius: 999px;
    padding: 3px;
    margin-bottom: 0.4rem;
}
.sidebar-lang button {
    flex: 1;
    border: none;
    background: transparent;
    border-radius: 999px;
    padding: 4px 8px;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    color: var(--text-secondary);
}
.sidebar-lang button.active {
    background: var(--bg-card);
    color: var(--text-primary);
    box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}

.user-card {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: var(--bg-page);
    border-radius: 10px;
    padding: 0.55rem 0.7rem;
}
.user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--accent-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--accent);
    flex-shrink: 0;
}
.user-name {
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.role-badge {
    display: inline-block;
    margin-top: 2px;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 600;
}

.btn-logout {
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: center;
    width: 100%;
    padding: 0.35rem;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-secondary);
    font-size: 0.8rem;
    cursor: pointer;
}
.btn-logout:hover { background: var(--bg-page); }

.sidebar-divider { border-top: 1px solid var(--border); margin: 0.2rem 0; }

.nav-list { display: flex; flex-direction: column; gap: 2px; }
.nav-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0.42rem 0.6rem;
    border-radius: 7px;
    border-left: 3px solid transparent;
    color: var(--text-primary);
    font-size: 0.88rem;
    transition: background-color 0.15s, border-color 0.15s;
}
.nav-item i { font-size: 1rem; width: 18px; text-align: center; color: var(--text-secondary); }
.nav-item:hover { background: var(--bg-page); }
.nav-item.active {
    background: var(--accent-bg);
    border-left-color: var(--accent);
    color: var(--accent);
    font-weight: 600;
}
.nav-item.active i { color: var(--accent); }

.nav-subgroup { display: flex; flex-direction: column; gap: 2px; margin-top: 2px; }
.nav-subitem { padding-left: 1.6rem; font-size: 0.84rem; }
.nav-subitem i { font-size: 0.92rem; }
.sidebar.collapsed .nav-subgroup { display: none !important; }

.nav-admin-group { margin-top: 0.4rem; padding-top: 0.5rem; border-top: 1px solid var(--border); }

/* ===== MAIN CONTENT ===== */
.main-content { flex: 1; min-width: 0; padding: 1.4rem 1.8rem; }

.page-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1.2rem;
    font-size: 1.15rem;
    font-weight: 600;
}
.page-header .subtitle { color: var(--text-muted); font-weight: 400; font-size: 0.95rem; }

/* ===== CARDS ===== */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.1rem 1.25rem;
    margin-bottom: 1rem;
}
.card-title { font-size: 0.92rem; font-weight: 600; margin-bottom: 0.7rem; }

/* Metric card */
.metric-grid { display: grid; gap: 0.8rem; }
.metric-grid.cols-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.metric-grid.cols-5 { grid-template-columns: repeat(5, minmax(0,1fr)); }
.metric-card { background: var(--bg-page); border-radius: 10px; padding: 0.75rem 0.9rem; }
.metric-card .lbl { font-size: 0.75rem; color: var(--text-secondary); }
.metric-card .val { font-size: 1.15rem; font-weight: 600; margin-top: 3px; }
.metric-card.main .val { color: var(--accent); font-size: 1.4rem; }
.metric-card .val.success { color: var(--success); }
.metric-card .val.danger { color: var(--danger); }

/* Status grid (Cần xử lý) */
.status-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px; }
.status-item {
    display: flex; align-items: center; gap: 10px;
    border: 1px solid var(--border); border-radius: 10px;
    padding: 0.6rem 0.75rem; cursor: pointer; background: none; text-align: left;
    font-family: inherit; font-size: 0.85rem; color: var(--text-primary);
}
.status-item:hover { background: var(--bg-page); }
.status-item .badge-icon {
    width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: 1rem;
}

/* Breakdown rows (Accounts Manager / Nhân viên) */
.breakdown-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.5rem 0; border-top: 1px solid #f0f0f2; font-size: 0.85rem;
}
.breakdown-row:first-of-type { border-top: none; }
.breakdown-row .lbl { display: flex; align-items: center; gap: 8px; color: var(--text-secondary); }
.breakdown-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.breakdown-row .val { font-weight: 600; }
.breakdown-row .goto-btn {
    border: none; background: transparent; color: var(--accent);
    cursor: pointer; font-size: 0.9rem; padding: 2px 6px; margin-left: 6px;
}
.breakdown-row .goto-btn:hover { text-decoration: underline; }

.link-btn {
    border: none; background: transparent; color: var(--accent);
    font-size: 0.78rem; cursor: pointer; padding: 0;
}
.link-btn:hover { text-decoration: underline; }

.empty-state { text-align: center; padding: 1.4rem 0; color: var(--text-muted); font-size: 0.85rem; }
.empty-state .circle {
    width: 56px; height: 56px; border-radius: 50%; background: var(--bg-page);
    display: flex; align-items: center; justify-content: center; margin: 0 auto 0.6rem; font-size: 1.4rem;
}

/* Badges (payment_status, status) */
.badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 0.72rem; font-weight: 600; }
.badge-pending { background: var(--warning-bg); color: var(--warning); }
.badge-paid { background: var(--success-bg); color: var(--success); }
.badge-cancelled { background: var(--danger-bg); color: var(--danger); }
.badge-neutral { background: var(--bg-page); color: var(--text-secondary); }
/* Nhãn màu TỰ CHỌN (Accounts Manager, Sale Amount, Trạng thái, Nguồn khách, Nhãn dán...).
   4 biến --bdyn-* do hàm badge_vars() trong colors.py tính sẵn cho từng màu, đảm bảo chữ luôn
   >= 5:1 so với nền ở CẢ 2 chế độ (trước đây chữ = đúng màu người dùng chọn nên ở chế độ tối
   chỉ còn 1,7–3,2:1). Giá trị dự phòng phía sau dùng khi template quên gắn style. */
.badge-dyn { background: var(--bdyn-bg, var(--bg-page)); color: var(--bdyn-fg, var(--text-secondary)); }
[data-theme="dark"] .badge-dyn { background: var(--bdyn-bg-d, var(--bg-page)); color: var(--bdyn-fg-d, var(--text-secondary)); }

/* Buttons */
.btn { border-radius: 8px; padding: 0.5rem 1rem; font-size: 0.85rem; cursor: pointer; border: 1px solid var(--border); background: var(--bg-card); color: var(--text-primary); }
.btn:hover { background: var(--bg-page); }
.btn-primary { background: var(--text-primary); color: #fff; border-color: var(--text-primary); }
.btn-primary:hover { background: #1f2937; }
.btn-danger { color: var(--danger); border-color: var(--danger-bg); }
.btn-success { color: var(--success); border-color: var(--success-bg); }
.btn-block { width: 100%; }

/* Forms */
label.field-label { display: block; font-size: 0.78rem; color: var(--text-secondary); margin-bottom: 3px; }
input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="date"], select, textarea {
    width: 100%; border: 1px solid var(--border); border-radius: 8px;
    padding: 0.5rem 0.65rem; font-size: 0.88rem; font-family: inherit;
    background: var(--bg-card); color: var(--text-primary);
}
textarea { resize: vertical; }
.form-grid { display: grid; gap: 0.8rem; }
.form-grid.cols-2 { grid-template-columns: 1fr 1fr; }
.form-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }

/* Login page */
.login-wrap {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    background: url('/static/img/login-bg.png') center center / cover no-repeat;
    padding: 1rem;
}
.login-card {
    background: var(--bg-card); border-radius: 18px; padding: 2rem 1.8rem;
    width: 100%; max-width: 380px; box-shadow: 0 20px 50px rgba(0,0,0,0.25);
}
.login-avatar {
    width: 80px; height: 80px; border-radius: 50%; background: var(--bg-page);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 1rem; font-size: 36px;
}
.login-title { text-align: center; margin: 0 0 1.4rem; }
.login-error { background: var(--danger-bg); color: var(--danger); border-radius: 8px; padding: 0.6rem 0.8rem; font-size: 0.85rem; margin-bottom: 0.8rem; }

/* Table */
table.data-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
table.data-table th { text-align: left; padding: 8px 6px; color: var(--text-secondary); font-weight: 600; border-bottom: 1px solid var(--border); white-space: nowrap; }
table.data-table td { padding: 7px 6px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.cell-clamp {
    max-width: 220px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: help;
}
table.data-table tr:last-child td { border-bottom: none; }
table.data-table tr.selected { background: var(--accent-bg); }

.toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 0.9rem; }
.toolbar select, .toolbar input { width: auto; min-width: 130px; }

.selection-bar {
    display: none;
    align-items: center; justify-content: space-between;
    background: var(--accent-bg); border: 1px solid #c7d2fe;
    border-radius: 8px; padding: 0.55rem 0.8rem; margin-bottom: 0.8rem;
    font-size: 0.85rem;
    flex-wrap: wrap;
    gap: 8px;
}
.selection-bar.show { display: flex; }
.selection-bar .actions { display: flex; gap: 6px; flex-wrap: wrap; }
.selection-bar .actions .btn { white-space: nowrap; font-size: 0.8rem; padding: 0.4rem 0.7rem; }

.toast {
    position: fixed; top: 1rem; right: 1rem; z-index: 999;
    background: #111827; color: #fff; padding: 0.6rem 1rem; border-radius: 8px;
    font-size: 0.85rem; box-shadow: 0 8px 24px rgba(0,0,0,0.2);
    opacity: 0; transform: translateY(-8px); transition: opacity 0.2s, transform 0.2s;
}
.toast.show { opacity: 1; transform: translateY(0); }

/* ===== TỐI ƯU MOBILE ===== */
@media (max-width: 768px) {
    .app-shell {
        flex-direction: column;
    }
    .sidebar {
        width: 100%;
        height: auto;
        position: static;
        border-right: none;
        border-bottom: 1px solid var(--border);
        padding: 0.7rem;
        gap: 0.5rem;
    }
    .sidebar-brand { padding: 0 0 0.3rem; }
    /* Trên điện thoại menu nằm ngang phía trên: nút thu nhỏ không có tác dụng và còn thò ra 12px
       ngoài mép phải làm MỌI trang bị lắc ngang khi vuốt. Lỡ lưu trạng thái "thu nhỏ" từ màn hình
       lớn (xoay máy tính bảng) cũng bỏ qua, luôn hiện đủ menu. */
    .sidebar-toggle-btn { display: none; }
    .sidebar.collapsed { width: 100%; padding: 0.7rem; }
    .sidebar.collapsed .sidebar-text { display: inline; }
    .sidebar.collapsed .sidebar-lang { display: flex; }
    .sidebar.collapsed .nav-admin-group { display: block; }
    .sidebar.collapsed .nav-item { justify-content: flex-start; padding: 0.45rem 0.7rem; }
    .nav-list {
        flex-direction: row;
        overflow-x: auto;
        gap: 4px;
        padding-bottom: 4px;
    }
    .nav-item {
        white-space: nowrap;
        border-left: none;
        border-bottom: 3px solid transparent;
        padding: 0.45rem 0.7rem;
    }
    .nav-item.active { border-left-color: transparent; border-bottom-color: var(--accent); }
    .nav-admin-group {
        margin-top: 0;
        padding-top: 0;
        border-top: none;
        border-left: 1px solid var(--border);
        padding-left: 6px;
        margin-left: 2px;
        flex-shrink: 0;
    }
    .sidebar-bottom {
        margin-top: 0.4rem;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
    .sidebar-bottom .sidebar-divider { display: none; }
    .user-card { flex: 1; }
    .btn-logout { width: auto; padding: 0.35rem 0.7rem; }

    .main-content { padding: 0.9rem; }

    .form-grid.cols-2, .form-grid.cols-4 { grid-template-columns: 1fr; }
    .metric-grid.cols-4, .metric-grid.cols-5 { grid-template-columns: repeat(2, minmax(0,1fr)); }

    div[style*="grid-template-columns:2fr 1fr"],
    div[style*="grid-template-columns: 2fr 1fr"],
    div[style*="grid-template-columns:1.5fr 1fr"],
    div[style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }

    .toolbar { flex-direction: column; align-items: stretch; }
    .toolbar select, .toolbar input { width: 100%; min-width: 0; }

    table.data-table { font-size: 0.78rem; }
    .cell-clamp { max-width: 140px; }

    .login-card { padding: 1.5rem 1.2rem; }

    .selection-bar .actions { width: 100%; justify-content: space-between; }
    .selection-bar .actions .btn { flex: 1; min-width: 0; padding: 0.4rem 0.3rem; font-size: 0.72rem; }
}

/* ===== LIGHTBOX (xem ảnh to, không mở tab mới) ===== */
.lightbox-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.82);
    z-index: 999;
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
    padding: 2rem;
}
.lightbox-overlay.show { display: flex; }
.lightbox-img {
    max-width: 90vw;
    max-height: 90vh;
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    cursor: default;
}
.mockup-thumb {
    cursor: zoom-in;
    transition: transform 0.12s ease;
}
.mockup-thumb:hover {
    transform: scale(1.08);
}

/* ===== TIMELINE FEDEX (hiện khi hover vào badge trạng thái) — dùng position:fixed
   gắn trực tiếp vào <body> qua JS, KHÔNG bị cắt bởi overflow-x:auto của khung bảng ===== */
.fedex-popup {
    display: none;
    position: fixed;
    z-index: 200;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.18);
    padding: 0.8rem;
    width: 280px;
    max-height: 320px;
    overflow-y: auto;
    white-space: normal;
    font-size: 0.8rem;
    cursor: default;
}
.fedex-popup.show { display: block; }
.fedex-timeline-item {
    padding: 6px 0;
    border-bottom: 1px solid #f0f0f2;
}
.fedex-timeline-item:last-child { border-bottom: none; }

/* ===== KÉO GIÃN CỘT (resizable columns) trong Danh sách đơn hàng ===== */
.col-resize-handle {
    position: absolute;
    top: 0;
    right: 0;
    width: 6px;
    height: 100%;
    cursor: col-resize;
    user-select: none;
    background: transparent;
}
.col-resize-handle:hover { background: var(--accent); opacity: 0.4; }
/* th cần có position (khác static) để tay cầm kéo giãn cột (absolute) neo đúng chỗ.
   Riêng bảng đơn hàng dùng sticky thay cho relative — xem quy tắc #ordersTable thead th. */
table.data-table th { position: relative; }

/* ===== Đóng băng cột Order ID khi cuộn ngang (#4) =====
   Bảng Danh sách đơn hàng có rất nhiều cột, phải cuộn ngang để xem hết — khi cuộn, dễ mất dấu
   đang xem dòng nào. Ghim cột Order ID (và ô checkbox liền trước nó) luôn hiển thị bên trái.
   Dùng position:sticky với nền đặc (var(--bg-card)) để nội dung cột khác không lộ qua khi cuộn. */
#ordersTable th[data-order-id-col],
#ordersTable td[data-order-id-col] {
    position: sticky;
    left: 0;
    z-index: 3;
    background: var(--bg-card);
    box-shadow: 2px 0 4px -2px rgba(0, 0, 0, 0.12);
}
#ordersTable thead th[data-order-id-col] { z-index: 5; }

/* ===== Màu nền dòng theo Status (#5) =====
   Nhìn lướt là biết ngay tình trạng đơn, không cần đọc từng badge — đặc biệt hữu ích khi bảng
   dài. Dùng màu NHẠT (độ mờ thấp) để không lấn át nội dung và vẫn đọc chữ thoải mái ở cả chế
   độ sáng lẫn tối. */
#ordersTable tr[data-row-status="cancelled"] td { background: color-mix(in srgb, var(--danger) 7%, transparent); }
#ordersTable tr[data-row-status="delivered"] td { background: color-mix(in srgb, var(--success) 7%, transparent); }
#ordersTable tr[data-row-status="shipping"] td { background: color-mix(in srgb, var(--accent) 6%, transparent); }
/* Dòng đã ghim sticky cần nền ĐẶC riêng, nếu không sẽ bị nội dung cuộn qua lộ phía dưới */
#ordersTable tr[data-row-status="cancelled"] td[data-order-id-col] { background: color-mix(in srgb, var(--danger) 7%, var(--bg-card)); }
#ordersTable tr[data-row-status="delivered"] td[data-order-id-col] { background: color-mix(in srgb, var(--success) 7%, var(--bg-card)); }
#ordersTable tr[data-row-status="shipping"] td[data-order-id-col] { background: color-mix(in srgb, var(--accent) 6%, var(--bg-card)); }

/* ===== Xuất PDF / In trang (#82) =====
   Khi bấm "Xuất PDF / In", trình duyệt mở hộp thoại in — chọn "Save as PDF" là ra file gửi báo
   cáo được ngay. Ẩn các phần chỉ dùng để thao tác (sidebar, nút bấm, bảng chọn widget) vì trên
   bản in chúng vô nghĩa và chiếm chỗ. */
@media print {
    .sidebar, .no-print, .btn, .goto-btn, .toast { display: none !important; }
    .app-layout, .main-content { display: block !important; margin: 0 !important; padding: 0 !important; }
    .card { break-inside: avoid; box-shadow: none !important; border: 1px solid #ddd !important; }
    body { background: #fff !important; }
    /* Ép về màu sáng khi in kể cả đang bật chế độ tối — in nền tối rất tốn mực và khó đọc */
    [data-theme="dark"] { --bg-page: #fff; --bg-card: #fff; --text-primary: #000; --text-secondary: #444; --border: #ccc; }
}

/* Ô chọn ngày/tháng: trình duyệt tự vẽ nền trắng và icon lịch màu tối, ở chế độ tối trông
   chói và icon gần như biến mất. color-scheme báo cho trình duyệt biết đang dùng nền tối để
   nó tự vẽ lại các thành phần gốc (lịch, mũi tên) cho phù hợp. */
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="month"],
[data-theme="dark"] input[type="time"],
[data-theme="dark"] select {
    color-scheme: dark;
}

/* ===== Dải cảnh báo ở đầu trang Tổng quan =====
   Các mục cảnh báo xếp ngang trong 1 khối, mỗi mục có vạch màu bên trái để phân biệt mức độ
   mà không cần tô nền rực rỡ cho từng cái (nhiều mảng màu cạnh nhau trông rất rối). */
.alert-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0.7rem 1rem;
    text-decoration: none;
    color: inherit;
    font-size: 0.86rem;
    border-top: 1px solid var(--border);
    transition: background-color 0.15s;
}
.alert-row:hover { background: var(--bg-page); }
.alert-sub { font-size: 0.75rem; color: var(--text-secondary); font-weight: 400; }

/* ===== Tô màu cả dòng khi rê chuột (#danh sách đơn hàng) =====
   Bảng rộng hơn 2000px nên phải cuộn ngang; khi xem các cột bên phải rất dễ lạc dòng. Làm nổi
   cả dòng đang trỏ để mắt bám được đúng đơn — giống cảm giác dùng bảng tính.
   Thứ tự ưu tiên (viết sau đè lên viết trước): đang trỏ < trạng thái đơn < đã tick. */
#ordersTable tbody tr:hover td { background: var(--bg-page); }
#ordersTable tbody tr:hover td[data-order-id-col] { background: var(--bg-page); }

/* Dòng đã tick — đè lên mọi màu khác để luôn thấy rõ mình đang chọn gì */
#ordersTable tbody tr.row-selected td,
#ordersTable tbody tr.row-selected:hover td { background: var(--accent-bg); }
#ordersTable tbody tr.row-selected td[data-order-id-col],
#ordersTable tbody tr.row-selected:hover td[data-order-id-col] {
    background: color-mix(in srgb, var(--accent) 12%, var(--bg-card));
}

/* ===== Menu chuột phải trong bảng ===== */
.ctx-menu {
    position: fixed;
    z-index: 300;
    min-width: 210px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);
    padding: 5px;
    display: none;
}
.ctx-menu.show { display: block; }
.ctx-head { font-size: 0.7rem; color: var(--text-muted); padding: 4px 9px 3px; }
.ctx-item {
    display: flex; align-items: center; gap: 9px;
    padding: 6px 9px; font-size: 0.84rem; border-radius: 4px;
    cursor: pointer; color: var(--text-primary);
    background: none; border: none; width: 100%; text-align: left;
    font-family: inherit;
}
.ctx-item:hover { background: var(--bg-page); }
.ctx-item.danger { color: var(--danger); }
.ctx-sep { height: 1px; background: var(--border); margin: 4px 0; }

/* ===== Cuộn đơn hàng trong khung, TỰ ĐỘNG THEO MÀN HÌNH =====
   Trên màn cao (máy bàn 24-27 inch): khoá chiều cao khung, con lăn chỉ cuộn danh sách đơn —
   bộ lọc, dải tổng và thanh thao tác luôn nằm nguyên chỗ. Đo thực tế: màn 27" 2K thấy 29 dòng
   cùng lúc ở mức phóng 100%, vẫn 20 dòng ở mức 125%.
   Trên màn thấp (laptop 14"): KHÔNG khoá, vì chỉ còn ~12 dòng — chật hơn cả cách cuộn trang.
   Lúc đó chỉ ghim hàng tiêu đề để cuộn xuống vẫn biết đang xem cột nào. */

/* Ghim hàng tiêu đề — áp cho MỌI kích thước màn hình */
#ordersTable thead th {
    position: sticky;
    top: 0;
    z-index: 4;
    background: var(--bg-card);
}
/* Ô góc trên bên trái vừa ghim dọc vừa ghim ngang -> phải nằm trên cùng, nếu không sẽ bị
   các ô khác trượt đè lên khi cuộn chéo */
#ordersTable thead th[data-order-id-col] { z-index: 6; }

@media (min-height: 900px) {
    .orders-scroll-wrap {
        max-height: calc(100vh - 330px);
        overflow-y: auto;
        /* Chặn "cuộn lan": lăn hết danh sách thì DỪNG, không tự trượt tiếp ra trang ngoài
           khiến mất dấu vị trí đang xem */
        overscroll-behavior: contain;
    }
}

/* ===== Bảng đơn hàng kiểu bảng tính: dòng hẹp, kẻ viền đủ, tô xen kẽ =====
   Dòng cao 21px để thấy nhiều đơn cùng lúc. Ảnh mockup thu về 17px cho vừa chiều cao dòng —
   rê chuột vào ảnh sẽ phóng to (dùng lại lightbox có sẵn). */
#ordersTable { border-collapse: collapse; font-size: 0.78rem; }
#ordersTable th,
#ordersTable td {
    /* Tổng chiều cao dòng = nội dung + đệm trên dưới + viền. Để ra đúng 21px: nội dung cao nhất
       15px + đệm 2px + viền 2px = 19-21px. Ảnh mockup và các nhãn badge đều phải nhỏ theo, nếu
       không chúng sẽ tự đẩy dòng cao lên (đo thực tế: badge 18px làm dòng thành 26px). */
    padding: 2px 5px;
    line-height: 1.2;
    border: 1px solid var(--border);   /* kẻ viền ĐỦ 4 cạnh như bảng tính */
}
#ordersTable thead th { padding: 3px 5px; }
#ordersTable td .mockup-thumb { width: 18px !important; height: 18px !important; border-radius: 2px; }
#ordersTable td img { max-height: 18px !important; width: auto !important; }
/* Nhãn badge trong bảng thu nhỏ lại cho vừa chiều cao dòng */
#ordersTable td .badge {
    font-size: 0.68rem; padding: 0 5px; line-height: 18px; height: 18px; display: inline-block;
}
#ordersTable td .link-btn, #ordersTable td button { font-size: 0.74rem; line-height: 17px; padding: 0 2px; }

/* Tô xen kẽ — dòng chẵn nền khác để mắt bám ngang dễ hơn khi bảng rất rộng */
#ordersTable tbody tr:nth-child(even) td { background: var(--bg-page); }

/* Thứ tự ưu tiên màu (viết sau đè trước): xen kẽ < trạng thái đơn < đang trỏ < đã tick */
#ordersTable tbody tr[data-row-status="cancelled"] td { background: color-mix(in srgb, var(--danger) 8%, var(--bg-card)); }
#ordersTable tbody tr[data-row-status="delivered"] td { background: color-mix(in srgb, var(--success) 8%, var(--bg-card)); }
#ordersTable tbody tr[data-row-status="shipping"] td { background: color-mix(in srgb, var(--accent) 7%, var(--bg-card)); }
#ordersTable tbody tr:hover td { background: color-mix(in srgb, var(--accent) 10%, var(--bg-card)); }
#ordersTable tbody tr.row-selected td,
#ordersTable tbody tr.row-selected:hover td { background: var(--accent-bg); }

/* Ô đang sửa trực tiếp */
#ordersTable td.cell-editing { padding: 0 !important; }
#ordersTable td.cell-editing input,
#ordersTable td.cell-editing select {
    width: 100%; height: 23px; border: 2px solid var(--accent); border-radius: 2px;
    font-size: 0.78rem; padding: 0 4px; font-family: inherit;
    background: var(--bg-card); color: var(--text-primary);
}
/* Cột sửa được: con trỏ dạng ô nhập cho biết bấm vào là sửa được */
#ordersTable td[data-editable] { cursor: cell; }

/* ===== NÚT 🔔 THÔNG BÁO Ở THANH BÊN + KHUNG BẬT/TẮT — dùng cho MỌI tài khoản =====
   Trạng thái được JS gắn lên nút dạng class push-state-*: on (đang bật) · off (chưa bật) ·
   warn (cần cài app / bị trình duyệt chặn) · na (trình duyệt không hỗ trợ) · loading. */
.push-bell-btn { border: none; background: none; font-family: inherit; }
.push-bell-btn:hover { background: var(--bg-page); }
.push-bell-icon { position: relative; display: inline-flex; }
.push-dot {
    position: absolute; top: -1px; right: -3px;
    width: 8px; height: 8px; border-radius: 50%;
    border: 1.5px solid var(--bg-card);
    background: var(--text-muted);
    display: none;
}
/* Thanh bên thu nhỏ chỉ còn icon — chấm màu thay cho nhãn trạng thái */
.sidebar.collapsed .push-dot { display: block; }
.push-pill {
    font-size: 0.68rem; font-weight: 600; padding: 1px 7px; border-radius: 999px;
    background: var(--bg-page); color: var(--text-secondary); white-space: nowrap;
}
.push-state-on .push-pill { background: var(--success-bg); color: var(--success); }
.push-state-on .push-dot { background: var(--success); }
.push-state-off .push-pill, .push-state-warn .push-pill { background: var(--warning-bg); color: var(--warning); }
.push-state-off .push-dot, .push-state-warn .push-dot { background: #f59e0b; }
[data-theme="dark"] .push-state-off .push-pill,
[data-theme="dark"] .push-state-warn .push-pill { color: #fbbf24; }

/* Khung bật/tắt — đặt ngoài thanh bên (thanh bên có overflow cuộn sẽ cắt mất khung), JS tự
   canh vị trí cạnh nút chuông */
.push-panel {
    position: fixed; z-index: 1000; left: 0; top: 0;
    width: 292px; max-width: calc(100vw - 16px);
    background: var(--bg-card); color: var(--text-primary);
    border: 1px solid var(--border); border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
    padding: 0.75rem 0.85rem 0.7rem;
    font-size: 0.84rem;
    display: none;
}
.push-panel.show { display: block; }
.push-panel button { font-family: inherit; }
.push-panel-head {
    display: flex; align-items: center; justify-content: space-between;
    font-weight: 600; margin-bottom: 0.4rem;
}
.push-panel-close {
    border: none; background: none; cursor: pointer; color: var(--text-muted);
    padding: 2px 4px; border-radius: 6px; font-size: 1rem; line-height: 1;
}
.push-panel-close:hover { background: var(--bg-page); color: var(--text-primary); }
.push-panel-status { font-size: 0.8rem; line-height: 1.45; margin-bottom: 0.6rem; color: var(--text-secondary); }
.push-panel-status.on { color: var(--success); }
.push-panel-status.off, .push-panel-status.warn { color: var(--warning); }
[data-theme="dark"] .push-panel-status.off,
[data-theme="dark"] .push-panel-status.warn { color: #fbbf24; }
.push-panel-help { font-size: 0.8rem; line-height: 1.55; color: var(--text-secondary); margin-bottom: 0.6rem; }
.push-panel-help:empty { display: none; }
.push-panel-help ol { margin: 0.25rem 0 0; padding-left: 1.2rem; }
.push-panel-help li { margin: 2px 0; }
.push-panel-help b { color: var(--text-primary); font-weight: 600; }
.push-main-btn { display: block; width: 100%; margin-bottom: 0.45rem; }
.push-sub-actions { display: flex; gap: 6px; }
.push-sub-actions .btn { flex: 1; font-size: 0.78rem; padding: 0.45rem 0.4rem; white-space: nowrap; }
.push-panel-msg { font-size: 0.78rem; line-height: 1.45; margin-top: 0.55rem; }
.push-panel-msg:empty { display: none; }
.push-panel-msg.ok { color: var(--success); }
.push-panel-msg.err { color: var(--danger); }
.push-panel-hint { font-size: 0.72rem; color: var(--text-muted); margin-top: 0.55rem; }
.push-panel button[disabled] { opacity: 0.6; cursor: wait; }

@media (max-width: 768px) {
    /* Hàng dưới cùng của thanh bên trên điện thoại chật — chỉ giữ icon chuông + chấm màu */
    .push-bell-btn .sidebar-text { display: none; }
    .push-dot { display: block; }
    .sidebar-bottom .btn-logout { white-space: nowrap; }
}
@media (max-width: 480px) {
    /* Điện thoại hẹp (iPhone ~390px): nút Chế độ tối chỉ còn icon như chuông để cả hàng nằm gọn
       1 dòng; tên dài thì tự cắt "…" thay vì đẩy các nút xuống dòng. */
    #darkModeLabel { display: none; }
    .user-card { min-width: 0; }
}

@media print {
    .push-panel, .push-bell-btn { display: none !important; }
}

/* =====================================================================================
   TRANG CHẤM CÔNG (att-*) — thẻ Hôm nay, Tháng này, Quy định, Team hôm nay, Bảng công, Lương
   ===================================================================================== */
:root { --ot: #7c3aed; --ot-bg: #ede9fe; --lunch: #f59e0b; --work: #16a34a; }
[data-theme="dark"] { --ot: #a78bfa; --ot-bg: #2e1f5e; --lunch: #fbbf24; --work: #22c55e; }

.att-header { justify-content: space-between; flex-wrap: wrap; }
.att-header-date { font-size: 0.85rem; font-weight: 500; }
.att-muted { color: var(--text-muted); }
.att-ot { color: var(--ot); font-weight: 600; }
.att-money { color: var(--success); }
.att-flash {
    background: var(--accent-bg); color: var(--accent); border-radius: 10px;
    padding: 0.6rem 1rem; margin-bottom: 1rem; font-size: 0.86rem;
}
[data-theme="dark"] .att-flash { color: #c7d2fe; }

.att-top { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.att-top > .card, .att-side > .card { margin-bottom: 0; }
.att-side { display: flex; flex-direction: column; gap: 1rem; }
.att-top { margin-bottom: 1rem; }
.att-card-title { font-size: 0.95rem; font-weight: 600; }
.att-card-head {
    display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
    flex-wrap: wrap; margin-bottom: 0.8rem;
}

/* ---- Thẻ Hôm nay ---- */
.att-today { padding: 1.1rem 1.25rem 1.2rem; }
.att-today-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; font-size: 0.8rem; }
.att-pill {
    display: inline-flex; align-items: center; gap: 7px; padding: 3px 12px; border-radius: 999px;
    font-size: 0.8rem; font-weight: 600; background: var(--bg-page); color: var(--text-secondary);
}
.att-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.att-pill-working, .att-pill-resumed { background: var(--success-bg); color: var(--success); }
.att-pill-lunch { background: var(--warning-bg); color: var(--warning); }
.att-pill-done { background: var(--accent-bg); color: var(--accent); }
[data-theme="dark"] .att-pill-working, [data-theme="dark"] .att-pill-resumed { color: #4ade80; }
[data-theme="dark"] .att-pill-lunch { color: #fbbf24; }
[data-theme="dark"] .att-pill-done { color: #c7d2fe; }
.att-pill-working .att-dot, .att-pill-resumed .att-dot { animation: att-pulse 1.6s ease-in-out infinite; }
@keyframes att-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.45); }
    50% { box-shadow: 0 0 0 5px rgba(22, 163, 74, 0); }
}
@media (prefers-reduced-motion: reduce) { .att-pill-working .att-dot { animation: none; } }

.att-today-main { display: flex; align-items: center; gap: 1.2rem; margin: 1rem 0 1.1rem; }
.att-ring-wrap { position: relative; width: 116px; height: 116px; flex-shrink: 0; }
.att-ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.att-ring circle { fill: none; stroke-width: 11; }
.att-ring-bg { stroke: var(--bg-page); }
.att-ring-work { stroke: var(--work); stroke-linecap: round; transition: stroke-dasharray 0.6s ease; }
.att-ring-ot { stroke: var(--ot); stroke-linecap: round; transition: stroke-dasharray 0.6s ease; }
.att-state-lunch .att-ring-work { stroke: var(--lunch); }
.att-ring-text {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; line-height: 1.15;
}
.att-ring-text b { font-size: 1.25rem; font-weight: 700; }
.att-ring-text span { font-size: 0.72rem; color: var(--text-muted); }
.att-today-info { min-width: 0; }
.att-clock { font-size: 2.3rem; font-weight: 700; letter-spacing: -0.5px; line-height: 1.05; font-variant-numeric: tabular-nums; }
.att-clock span { font-size: 1rem; font-weight: 500; color: var(--text-muted); margin-left: 2px; }
.att-line { font-size: 0.88rem; color: var(--text-secondary); margin-top: 6px; }
.att-line-2 { color: var(--text-secondary); margin-top: 2px; font-weight: 500; }
.att-line-2.is-ot { color: var(--ot); }
.att-line-2:empty { display: none; }

/* Dòng thời gian trong ngày */
.att-tl { position: relative; height: 16px; border-radius: 8px; background: var(--bg-page); overflow: hidden; }
.att-seg { position: absolute; top: 0; bottom: 0; }
.att-seg-work { background: var(--work); }
.att-seg-ot { background: var(--ot); }
.att-seg-lunch { background: var(--lunch); }
.att-seg-lunch-plan {
    top: 3px; bottom: 3px; border-radius: 4px; opacity: 0.55;
    background: repeating-linear-gradient(135deg, var(--lunch) 0 4px, transparent 4px 8px);
}
.att-seg-plan { top: 3px; bottom: 3px; border: 1.5px dashed var(--work); border-radius: 4px; }
.att-seg-plan-ot { top: 3px; bottom: 3px; border: 1.5px dashed var(--ot); border-radius: 4px; }
.att-now { position: absolute; top: -2px; bottom: -2px; width: 2px; margin-left: -1px; background: var(--text-primary); border-radius: 1px; }
.att-tl-scale { position: relative; height: 16px; margin-top: 4px; font-size: 0.68rem; color: var(--text-muted); }
.att-tl-scale span { position: absolute; white-space: nowrap; }

.att-stamps { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 0.82rem; color: var(--text-secondary); margin: 0.7rem 0 0.95rem; }
.att-stamps b { color: var(--text-primary); font-weight: 600; }
.att-stamps b.att-planned { color: var(--text-muted); font-weight: 500; }
.att-tag {
    display: inline-block; margin-left: 5px; padding: 0 6px; border-radius: 6px; vertical-align: 1px;
    font-size: 0.68rem; font-weight: 600; background: var(--warning-bg); color: var(--warning);
}
.att-tag-warn { background: var(--danger-bg); color: var(--danger); }
.att-tag-muted { background: var(--bg-page); color: var(--text-muted); }

.att-actions { display: flex; flex-direction: column; gap: 6px; }
.att-actions form { margin: 0; }
.att-btn {
    width: 100%; min-height: 50px; border: none; border-radius: 12px; cursor: pointer;
    font-family: inherit; font-size: 1.02rem; font-weight: 600; color: #fff;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    transition: transform 0.08s ease, filter 0.15s ease;
}
.att-btn:hover { filter: brightness(1.06); }
.att-btn:active { transform: scale(0.99); }
.att-btn-go { background: var(--success-solid); }
.att-btn-stop { background: #dc2626; }
.att-btn-back { background: var(--accent-solid); }
.att-btn-link {
    width: 100%; background: none; border: none; cursor: pointer; font-family: inherit;
    font-size: 0.84rem; color: var(--text-secondary); padding: 6px; text-decoration: underline;
    text-underline-offset: 3px;
}
.att-btn-link:hover { color: var(--text-primary); }
.att-done {
    background: var(--success-bg); color: var(--success); border-radius: 12px;
    padding: 0.8rem 1rem; text-align: center; font-size: 0.9rem; font-weight: 600;
}
[data-theme="dark"] .att-done { color: #4ade80; }

/* ---- Tháng này + Quy định ---- */
.att-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; margin-top: 0.8rem; }
.att-kpis-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 0 0.9rem; }
.att-kpi { background: var(--bg-page); border-radius: 10px; padding: 0.65rem 0.8rem; min-width: 0; }
.att-kpi span { display: block; font-size: 0.74rem; color: var(--text-secondary); }
.att-kpi b { display: block; font-size: 1.2rem; font-weight: 700; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att-kpi b.att-money { font-size: 1.05rem; }
.att-kpi-main { background: var(--success-bg); }
.att-note { font-size: 0.8rem; border-radius: 8px; padding: 0.55rem 0.75rem; margin-top: 0.7rem; }
.att-note-warn { background: var(--warning-bg); color: var(--warning); }
[data-theme="dark"] .att-note-warn { color: #fbbf24; }
.att-rule-list { list-style: none; margin: 0.7rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.att-rule-list li { display: flex; gap: 9px; align-items: flex-start; font-size: 0.83rem; line-height: 1.45; color: var(--text-secondary); }
.att-rule-list li i { font-size: 1rem; color: var(--accent); margin-top: 1px; flex-shrink: 0; }
[data-theme="dark"] .att-rule-list li i { color: #a5b4fc; }
.att-rule-list b { color: var(--text-primary); font-weight: 600; }
.att-rules-edit { margin-top: 0.8rem; border-top: 1px solid var(--border); padding-top: 0.6rem; }
.att-rules-edit summary { cursor: pointer; font-size: 0.83rem; font-weight: 600; color: var(--accent); }
[data-theme="dark"] .att-rules-edit summary { color: #a5b4fc; }
.att-rules-edit form { margin-top: 0.7rem; display: flex; flex-direction: column; gap: 0.55rem; align-items: flex-start; }
.att-form-row { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.att-form-row label { display: flex; flex-direction: column; gap: 3px; font-size: 0.76rem; color: var(--text-secondary); }
.att-form-row input { width: 120px; }
.att-check { display: flex; align-items: center; gap: 7px; font-size: 0.83rem; }

/* ---- Team hôm nay ---- */
.att-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.att-chip {
    display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px; white-space: nowrap;
    font-size: 0.74rem; font-weight: 600; background: var(--bg-page); color: var(--text-secondary);
}
.att-chip-working, .att-chip-resumed { background: var(--success-bg); color: var(--success); }
.att-chip-lunch { background: var(--warning-bg); color: var(--warning); }
.att-chip-done { background: var(--accent-bg); color: var(--accent); }
.att-chip-missing { background: var(--danger-bg); color: var(--danger); }
[data-theme="dark"] .att-chip-working, [data-theme="dark"] .att-chip-resumed { color: #4ade80; }
[data-theme="dark"] .att-chip-lunch { color: #fbbf24; }
[data-theme="dark"] .att-chip-done { color: #c7d2fe; }
[data-theme="dark"] .att-chip-missing { color: #f87171; }
.att-team-list { display: flex; flex-direction: column; }
.att-team-row {
    display: grid; align-items: center; gap: 4px 12px; padding: 9px 6px; border-top: 1px solid var(--border);
    grid-template-columns: 34px minmax(0, 1.4fr) 104px minmax(0, 1.2fr) minmax(0, 1.3fr);
    grid-template-areas: "av name chip time hours"; color: inherit;
}
.att-team-row:first-child { border-top: none; }
.att-team-row:hover { background: var(--bg-page); }
.att-avatar {
    grid-area: av; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 0.74rem; font-weight: 700; background: var(--bg-page); color: var(--text-secondary);
}
.att-avatar-working, .att-avatar-resumed { background: var(--success-bg); color: var(--success); }
.att-avatar-lunch { background: var(--warning-bg); color: var(--warning); }
.att-avatar-done { background: var(--accent-bg); color: var(--accent); }
.att-team-name { grid-area: name; font-size: 0.88rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att-team-chip { grid-area: chip; }
.att-team-time { grid-area: time; font-size: 0.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.att-team-hours { grid-area: hours; min-width: 0; }
.att-team-hours-top { display: flex; justify-content: space-between; font-size: 0.8rem; font-weight: 600; margin-bottom: 3px; }
.att-bar { height: 6px; border-radius: 3px; background: var(--bg-page); overflow: hidden; }
.att-bar-fill { height: 100%; border-radius: 3px; background: var(--work); }
.att-bar-fill.is-ot { background: var(--ot); }
.att-bar-fill.is-lunch { background: var(--lunch); }

/* ---- Bảng chấm công + Lương ---- */
.att-filter { display: flex; gap: 8px; flex-wrap: wrap; }
.att-filter select, .att-filter input { width: auto; min-width: 150px; padding: 0.4rem 0.6rem; font-size: 0.84rem; }
.att-summary { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 0.83rem; color: var(--text-secondary); margin-bottom: 0.7rem; }
.att-summary b { color: var(--text-primary); }
.att-summary b.att-ot { color: var(--ot); }
.att-warn-text { color: var(--danger); font-weight: 600; }
.att-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.att-table td.num, .att-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.att-table td { vertical-align: middle; }
.att-wd { display: inline-block; min-width: 26px; color: var(--text-muted); font-size: 0.78rem; font-weight: 600; }
.att-row-today td { background: color-mix(in srgb, var(--accent) 6%, var(--bg-card)); }
.att-muted-row td { color: var(--text-muted); font-size: 0.8rem; }
.att-total-row td { font-weight: 700; font-size: 0.92rem; border-top: 2px solid var(--border); }
.att-total-row td:last-child { color: var(--success); }
[data-theme="dark"] .att-total-row td:last-child { color: #4ade80; }
.att-link { color: var(--accent); font-weight: 600; }
[data-theme="dark"] .att-link { color: #a5b4fc; }
.att-link:hover { text-decoration: underline; }
.att-salary-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 1.2rem; align-items: start; }
.att-trend { background: var(--bg-page); border-radius: 10px; padding: 0.75rem 0.9rem; }
.att-trend-bars { display: flex; align-items: flex-end; gap: 8px; height: 110px; }
.att-trend-col { flex: 1; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; min-width: 0; }
.att-trend-bar { width: 100%; max-width: 34px; min-height: 3px; border-radius: 5px 5px 2px 2px; background: color-mix(in srgb, var(--accent) 30%, var(--bg-card)); }
.att-trend-col.is-current .att-trend-bar { background: var(--accent); }
.att-trend-val { font-size: 0.68rem; color: var(--text-secondary); }
.att-trend-lbl { font-size: 0.66rem; color: var(--text-muted); }
.att-howto { margin-top: 0.9rem; font-size: 0.82rem; color: var(--text-secondary); }
.att-howto summary { cursor: pointer; font-weight: 600; color: var(--text-primary); }
.att-howto ul { margin: 0.5rem 0 0; padding-left: 1.2rem; line-height: 1.6; }

@media (max-width: 1100px) {
    .att-top { grid-template-columns: minmax(0, 1fr); }
    .att-side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
    .att-side { grid-template-columns: minmax(0, 1fr); }
    .att-kpis-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .att-salary-grid { grid-template-columns: minmax(0, 1fr); }
    .att-team-row {
        grid-template-columns: 34px minmax(0, 1fr) auto;
        grid-template-areas: "av name chip" "av time hours";
    }
    .att-team-hours { min-width: 110px; }
    .att-filter { width: 100%; }
    .att-filter select, .att-filter input { flex: 1; min-width: 0; }
}
@media (max-width: 480px) {
    .att-today { padding: 1rem; }
    .att-today-main { gap: 0.9rem; }
    .att-ring-wrap { width: 96px; height: 96px; }
    .att-clock { font-size: 1.9rem; }
}
@media print {
    .att-actions, .att-filter, .att-rules-edit { display: none !important; }
}
.att-salary-grid.is-single { grid-template-columns: minmax(0, 1fr); }
.att-collapsed .att-extra { display: none; }
.att-more-btn {
    display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin-top: 0.6rem;
    padding: 0.55rem; border: 1px dashed var(--border); border-radius: 10px; background: none; cursor: pointer;
    font-family: inherit; font-size: 0.84rem; font-weight: 600; color: var(--text-secondary);
}
.att-more-btn:hover { background: var(--bg-page); color: var(--text-primary); }

/* Điện thoại: bảng chấm công xếp thành thẻ 2 dòng (ngày | giờ vào → ra, nghỉ trưa | giờ làm, tăng ca)
   thay vì bảng 6 cột phải cuộn ngang mới thấy giờ làm */
@media (max-width: 600px) {
    .att-hide-sm { display: none; }
    .att-table-cards thead { display: none; }
    .att-table-cards, .att-table-cards tbody { display: block; width: 100%; }
    .att-table-cards tr {
        display: grid; column-gap: 8px; row-gap: 3px; align-items: center; padding: 9px 4px;
        border-bottom: 1px solid var(--border);
        grid-template-columns: 46px auto minmax(0, 1fr) auto;
        grid-template-areas: "date in out net" "date lunch lunch ot";
    }
    .att-table-cards.has-person tr { grid-template-areas: "date person person net" "date in out ot" "date lunch lunch ot"; }
    .att-table-cards tr:last-child { border-bottom: none; }
    table.att-table-cards td { border: none; padding: 0; background: none !important; font-size: 0.84rem; white-space: nowrap; }
    table.att-table-cards .att-tag { font-size: 0.64rem; padding: 0 5px; margin-left: 4px; }
    .att-table-cards tr.att-row-today { background: color-mix(in srgb, var(--accent) 6%, var(--bg-card)); border-radius: 8px; }
    .att-table-cards td.c-date { grid-area: date; align-self: start; font-weight: 600; line-height: 1.3; }
    .att-table-cards td.c-date .att-wd { display: block; }
    .att-table-cards td.c-person { grid-area: person; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
    .att-table-cards td.c-in { grid-area: in; }
    .att-table-cards td.c-out { grid-area: out; }
    .att-table-cards td.c-out::before { content: "→ "; color: var(--text-muted); }
    table.att-table-cards td.c-lunch { grid-area: lunch; font-size: 0.76rem; color: var(--text-secondary); white-space: normal; }
    .att-table-cards td.c-lunch::before { content: "Nghỉ "; color: var(--text-muted); }
    .att-table-cards td.c-net { grid-area: net; font-weight: 600; }
    .att-table-cards td.c-ot { grid-area: ot; font-size: 0.78rem; }
}
@media (max-width: 600px) {
    table.att-table-salary td:first-child { white-space: normal; }
    table.att-table-salary td.num { white-space: nowrap; }
}
@media (max-width: 600px) {
    table.att-table-payroll th, table.att-table-payroll td { padding: 8px 4px; }
    table.att-table-payroll td:first-child { white-space: normal; }
    table.att-table-payroll td:first-child .att-tag { display: table; margin: 3px 0 0; }
    table.att-table-payroll td:last-child .att-muted { white-space: normal; display: inline-block; max-width: 80px; }
}
@media (max-width: 380px) {
    table.att-table-payroll th, table.att-table-payroll td { font-size: 0.76rem; padding: 8px 3px; }
}

/* ===== Điện thoại: không để trang bị kéo lệch ngang =====
   - Lưới nhiều cột viết thẳng trong trang (style="grid-template-columns:...") → 1 cột (2 cột với lưới 3-4 ô nhỏ).
     Quy tắc cũ chỉ bắt dạng có dấu cách "grid-template-columns: 1fr 1fr" nên bỏ sót phần lớn các trang.
   - Bảng rộng hơn màn hình → cuộn ngang ngay trong bảng thay vì kéo lệch cả trang (Đối chiếu, Báo cáo,
     Khách hàng, Ảnh Mockup, Thư viện Design, Cài đặt...). Bảng Chấm công có bố cục thẻ riêng, bảng Danh sách
     đơn đã nằm trong khung cuộn sẵn → không áp dụng. */
@media (max-width: 768px) {
    div[style*="grid-template-columns:1fr 1fr"],
    div[style*="grid-template-columns:1fr 1.6fr"],
    div[style*="grid-template-columns:1.2fr 1fr"],
    div[style*="grid-template-columns:2fr 1fr"] {
        grid-template-columns: minmax(0, 1fr) !important;
    }
    div[style*="grid-template-columns:repeat(3, 1fr)"],
    div[style*="grid-template-columns:repeat(4, 1fr)"] {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    table.data-table:not(.att-table):not(#ordersTable) {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* =========================================================
   TỔNG QUAN 2026 — lớp .ov-* dùng riêng cho trang Tổng quan (templates/tong_quan.html).
   Nguyên tắc: MỌI màu lấy qua biến theme (var(--...)) để chế độ tối tự đúng; các dải màu
   biểu đồ (--ov-s1, --ov-flow-*) khai báo riêng 2 bộ sáng/tối vì phải đo tương phản với nền
   tương ứng. Cột/đường biểu đồ là "vệt màu" nên chỉ cần >= 3:1, chữ mới cần >= 4,5:1 —
   chữ trong mọi khối dưới đây đều dùng --text-* hoặc --accent/--success/--warning/--danger.
   ========================================================= */
:root {
    --ov-s1: #2a78d6;          /* đường/cột "kỳ này" */
    --ov-prev: #b8bcc6;        /* đường "kỳ trước" — xám, chỉ làm nền so sánh */
    --ov-grid: #eceef2;        /* lưới ngang mảnh */
    --ov-cost: #8b909b;        /* giá vốn */
    --ov-fee: #c9ccd3;         /* phí eBay */
    --ov-flow-0: #86b6ef; --ov-flow-1: #5598e7; --ov-flow-2: #2a78d6; --ov-flow-3: #184f95;
    --ov-flow-cancel: #8b909b; --ov-flow-other: #c9ccd3;
}
[data-theme="dark"] {
    --ov-s1: #3987e5;
    --ov-prev: #5b5f6b;
    --ov-grid: #2b2d36;
    --ov-cost: #7b808c;
    --ov-fee: #4d515c;
    --ov-flow-0: #1c5cab; --ov-flow-1: #2a78d6; --ov-flow-2: #5598e7; --ov-flow-3: #86b6ef;
    --ov-flow-cancel: #7b808c; --ov-flow-other: #4d515c;
}

.ov-sub { display: block; font-size: 0.76rem; color: var(--text-muted); font-weight: 400; margin-top: 2px; }
.ov-muted { color: var(--text-muted); font-size: 0.78rem; font-weight: 400; }
.ov-label { color: var(--text-secondary); font-size: 0.78rem; }
.ov-v1 { font-size: 1.5rem; font-weight: 600; line-height: 1.25; }
.ov-v2 { font-size: 1.1rem; font-weight: 600; }
.ov-num { font-variant-numeric: tabular-nums; }
.ov-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ov-ok { color: var(--success); font-weight: 600; }
.ov-link { color: var(--accent); font-weight: 600; text-decoration: underline; }
.ov-check { display: flex; align-items: center; gap: 6px; }
.ov-foot { margin-top: 0.7rem; padding-top: 0.6rem; border-top: 1px solid var(--border); font-size: 0.78rem; color: var(--text-muted); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.ov-delta { display: inline-flex; align-items: center; gap: 1px; font-size: 0.76rem; font-weight: 600; white-space: nowrap; }
.ov-delta.is-up { color: var(--success); }
.ov-delta.is-down { color: var(--danger); }
.ov-delta.is-flat { color: var(--text-muted); }

/* --- Tầng 1: Hôm nay / Mục tiêu / Việc cần làm --- */
.ov-top { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.ov-top-left { min-width: 0; }
.ov-today-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ov-today-cell { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; border: none; background: none; padding: 0; cursor: pointer; font-family: inherit; color: inherit; text-align: left; }
.ov-today-cell:hover .ov-v2 { text-decoration: underline; }
.ov-week { display: flex; align-items: flex-end; gap: 6px; margin-top: 0.9rem; }
.ov-week-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.ov-week-bar { width: 100%; max-width: 24px; background: var(--ov-fee); border-radius: 4px 4px 0 0; }
.ov-week-bar.is-today { background: var(--ov-s1); }
.ov-week-lb { font-size: 0.68rem; color: var(--text-muted); }

.ov-goal-head { display: flex; align-items: baseline; gap: 6px; }
.ov-goal-pct { margin-left: auto; font-size: 0.95rem; }
.ov-meter { position: relative; flex: 1; height: 8px; border-radius: 4px; background: var(--accent-bg); display: block; }
.ov-meter-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: var(--accent); }
.ov-meter.is-warn .ov-meter-fill { background: var(--warning); }
.ov-meter.is-bad .ov-meter-fill { background: var(--danger); }
.ov-meter-pace { position: absolute; top: -3px; bottom: -3px; width: 2px; border-radius: 1px; background: var(--text-secondary); }
.ov-goal-list { margin-top: 0.8rem; border-top: 1px solid var(--border); padding-top: 0.6rem; display: grid; gap: 7px; }
.ov-goal-row { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; }

.ov-todo { display: flex; flex-direction: column; }
.ov-todo-list { display: flex; flex-direction: column; }
.ov-todo-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border: none; border-top: 1px solid var(--border); background: none; cursor: pointer; font-family: inherit; font-size: 0.85rem; color: var(--text-primary); text-align: left; width: 100%; }
.ov-todo-row:first-child { border-top: none; }
.ov-todo-row:hover { background: var(--bg-page); }
.ov-todo-ic { width: 30px; height: 30px; border-radius: 9px; flex: none; display: flex; align-items: center; justify-content: center; font-size: 1rem; }
.ov-todo-ic.is-bad { background: var(--danger-bg); color: var(--danger); }
.ov-todo-ic.is-warn { background: var(--warning-bg); color: var(--warning); }
.ov-todo-ic.is-accent { background: var(--accent-bg); color: var(--accent); }
.ov-todo-ic.is-neutral { background: var(--bg-page); color: var(--text-secondary); }
.ov-todo-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ov-todo-go { color: var(--text-muted); }
.ov-todo-all { margin-top: auto; padding-top: 0.7rem; border-top: 1px solid var(--border); font-size: 0.8rem; font-weight: 600; color: var(--accent); display: flex; align-items: center; gap: 6px; }

/* --- Tầng 2: bộ chọn kỳ + các khối phân tích --- */
.ov-section { display: flex; align-items: flex-end; justify-content: space-between; gap: 0.8rem; flex-wrap: wrap; margin: 1.6rem 0 0.8rem; }
.ov-section-title { font-size: 1rem; font-weight: 600; }
.ov-period { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-card); }
.ov-period a { font-size: 0.8rem; padding: 5px 11px; border-radius: 7px; color: var(--text-secondary); }
.ov-period a:hover { background: var(--bg-page); }
.ov-period a.is-on { background: var(--accent-bg); color: var(--accent); font-weight: 600; }
.ov-period select { border: none; background: transparent; color: var(--text-secondary); font-family: inherit; font-size: 0.8rem; padding: 5px 6px; border-radius: 7px; }

.ov-insight { display: flex; gap: 10px; background: var(--accent-bg); border-radius: var(--radius); padding: 0.8rem 1rem; margin-bottom: 1rem; font-size: 0.85rem; }
.ov-insight > i { font-size: 1.1rem; color: var(--accent); flex: none; }
.ov-insight > div > div + div { margin-top: 2px; }

.ov-kpi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.8rem; }
.ov-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; cursor: pointer; font-family: inherit; text-align: left; color: inherit; }
.ov-tile.is-on { border-color: var(--ov-s1); }
.ov-tile.is-on .ov-label { color: var(--text-primary); font-weight: 600; }
.ov-tile-delta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ov-spark { width: 100%; height: 30px; margin-top: 8px; display: block; overflow: visible; }

.ov-chart-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 0.4rem; }
.ov-legend { display: flex; gap: 14px; font-size: 0.78rem; color: var(--text-secondary); flex-wrap: wrap; }
.ov-legend span { display: inline-flex; align-items: center; gap: 6px; }
.ov-key { width: 14px; height: 2px; border-radius: 1px; display: inline-block; }
.ov-key.is-cur { background: var(--ov-s1); }
.ov-key.is-prev { background: var(--ov-prev); }
.ov-chart { position: relative; min-height: 232px; }
.ov-chart:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 8px; }
.ov-tip { position: absolute; pointer-events: none; background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 7px 9px; font-size: 0.78rem; min-width: 150px; display: none; box-shadow: 0 4px 14px rgba(0,0,0,0.08); z-index: 3; }
.ov-tip-row { display: flex; align-items: center; gap: 6px; margin-top: 3px; }
.ov-tip-key { width: 10px; height: 2px; flex: none; border-radius: 1px; }
.ov-axis { font-size: 0.68rem; fill: var(--text-muted); }

.ov-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; align-items: start; }
.ov-three { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; align-items: start; }
.ov-stack { display: flex; gap: 2px; height: 12px; margin-bottom: 0.7rem; }
.ov-seg { display: block; border-radius: 0; }
.ov-stack .ov-seg:first-child { border-radius: 4px 0 0 4px; }
.ov-stack .ov-seg:last-child { border-radius: 0 4px 4px 0; }
.ov-seg.is-profit, .ov-sw.is-profit { background: var(--ov-s1); }
.ov-seg.is-cost, .ov-sw.is-cost { background: var(--ov-cost); }
.ov-seg.is-fee, .ov-sw.is-fee { background: var(--ov-fee); }
.ov-flow-0 { background: var(--ov-flow-0); }
.ov-flow-1 { background: var(--ov-flow-1); }
.ov-flow-2 { background: var(--ov-flow-2); }
.ov-flow-3 { background: var(--ov-flow-3); }
.ov-flow-cancel { background: var(--ov-flow-cancel); }
.ov-flow-other { background: var(--ov-flow-other); }
.ov-sw { width: 10px; height: 10px; border-radius: 3px; flex: none; display: inline-block; }
.ov-pl-rows > div { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-top: 1px solid var(--border); font-size: 0.85rem; }
.ov-pl-rows > div:first-child { border-top: none; }
.ov-pl-name { flex: 1; color: var(--text-secondary); }
.ov-pl-name.is-strong { color: var(--text-primary); font-weight: 600; }
.ov-pl-pct { width: 52px; text-align: right; }
.ov-flow-legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 7px 14px; font-size: 0.83rem; }
.ov-flow-legend > div { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ov-flow-name { flex: 1; color: var(--text-secondary); }

.ov-staff { display: grid; }
.ov-staff-row { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-top: 1px solid var(--border); font-size: 0.85rem; }
.ov-staff-row:first-child { border-top: none; }
.ov-rank { width: 14px; }
.ov-avatar { width: 28px; height: 28px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; font-size: 0.78rem; font-weight: 600; background: var(--bdyn-bg, var(--accent-bg)); color: var(--bdyn-fg, var(--accent)); }
[data-theme="dark"] .ov-avatar { background: var(--bdyn-bg-d, var(--accent-bg)); color: var(--bdyn-fg-d, var(--accent)); }
.ov-staff-name { border: none; background: none; padding: 0; font-family: inherit; font-size: 0.85rem; color: var(--text-primary); cursor: pointer; width: 88px; text-align: left; }
.ov-staff-name:hover { text-decoration: underline; }
.ov-staff-orders { width: 62px; text-align: right; }
.ov-staff-rev { width: 74px; text-align: right; }
.ov-staff-bar { flex: 1; min-width: 40px; }
.ov-staff-delta { width: 66px; text-align: right; }
.ov-bar { display: block; height: 6px; border-radius: 3px; background: var(--ov-grid); overflow: hidden; }
.ov-bar > span { display: block; height: 6px; border-radius: 3px; background: var(--ov-s1); }
.ov-bar-row { padding: 7px 0; border-top: 1px solid var(--border); }
.ov-bar-row:first-of-type { border-top: none; }
.ov-bar-top { display: flex; align-items: baseline; gap: 8px; font-size: 0.85rem; }
.ov-bar-top > span:first-child { flex: 1; }
.ov-bar-bottom { display: flex; align-items: center; gap: 8px; margin-top: 5px; }
.ov-bar-bottom .ov-bar { flex: 1; }

.ov-items { display: grid; gap: 2px; }
.ov-item { display: flex; align-items: center; gap: 9px; padding: 6px 0; border-top: 1px solid var(--border); }
.ov-item:first-child { border-top: none; }
.ov-item-img { width: 34px; height: 34px; border-radius: 8px; object-fit: cover; flex: none; background: var(--bg-page); }
.ov-item-img.is-empty { display: flex; align-items: center; justify-content: center; color: var(--text-muted); }
.ov-item-txt { display: flex; flex-direction: column; min-width: 0; font-size: 0.84rem; }

.ov-holidays { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 8px; }
.ov-holiday { border: 1px solid var(--border); border-radius: 10px; padding: 0.55rem 0.7rem; min-width: 0; }
.ov-holiday-name { font-weight: 600; font-size: 0.85rem; margin-top: 1px; }
.ov-holiday-left { font-size: 0.78rem; color: var(--text-secondary); margin-top: 1px; }
.ov-holiday-left.is-soon { color: var(--accent); font-weight: 600; }

@media (max-width: 1100px) {
    .ov-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
    .ov-top { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
    .ov-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ov-v1 { font-size: 1.3rem; }
    .ov-staff-name { width: 64px; }
    .ov-staff-orders { display: none; }
    .ov-section { align-items: flex-start; }
}

/* Hỏi làm thêm giờ trước giờ tan ca (trang Chấm công) */
.att-ot-ask { border: 1px solid var(--warning); background: var(--warning-bg); border-radius: 12px; padding: 0.7rem 0.9rem; margin-bottom: 0.7rem; }
.att-ot-ask-q { font-size: 0.88rem; font-weight: 600; color: var(--warning); display: flex; align-items: center; gap: 7px; margin-bottom: 0.5rem; }
.att-ot-ask-btns { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.att-ot-ask-btns form { margin: 0; }
.att-btn-ot { background: var(--warning-solid); min-height: 40px; font-size: 0.92rem; padding: 0 1rem; width: auto; }
.att-note-ot { background: var(--accent-bg); color: var(--accent); display: flex; align-items: center; gap: 7px; }

/* =========================================================================================
   Tool → Cloudflare Domain (/tool/cloudflare-domain) — chữ chỉ dùng token --text-*/--success/
   --warning/--danger/--accent để tự đúng tương phản ở cả chế độ sáng và tối.
   ========================================================================================= */
.cfd-sub { font-size: 0.85rem; color: var(--text-secondary); margin: -0.4rem 0 1rem; }
.cfd-conn { display: flex; align-items: center; gap: 0.5rem 0.9rem; flex-wrap: wrap; font-size: 0.85rem; }
.cfd-conn .cfd-spacer { flex: 1; }
.cfd-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 999px;
    font-size: 0.76rem; font-weight: 600; white-space: nowrap; background: var(--bg-page); color: var(--text-secondary); }
.cfd-pill.is-ok { background: var(--success-bg); color: var(--success); }
.cfd-pill.is-warn { background: var(--warning-bg); color: var(--warning); }
.cfd-pill.is-bad { background: var(--danger-bg); color: var(--danger); }
.cfd-pill.is-info { background: var(--accent-bg); color: var(--accent); }
.cfd-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: 1rem; overflow-x: auto; }
.cfd-tab { background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer;
    padding: 0.55rem 0.9rem; font-size: 0.86rem; font-weight: 600; color: var(--text-secondary); white-space: nowrap; }
.cfd-tab:hover { color: var(--text-primary); }
.cfd-tab.is-on { color: var(--text-primary); border-bottom-color: var(--accent); }
.cfd-panel[hidden] { display: none; }
.cfd-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1.2rem; }
.cfd-lbl { display: block; font-size: 0.8rem; font-weight: 600; color: var(--text-secondary); margin: 0.2rem 0 0.35rem; }
.cfd-ta { width: 100%; min-height: 160px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.82rem; line-height: 1.55; }
.cfd-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 0.5rem; min-height: 1.4rem; }
.cfd-note { font-size: 0.78rem; color: var(--text-secondary); }
.cfd-opt { display: flex; gap: 0.5rem; align-items: flex-start; font-size: 0.86rem; margin: 0.45rem 0; cursor: pointer; }
.cfd-opt input { margin-top: 3px; }
.cfd-radio { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.86rem; margin: 0.2rem 0 0.6rem 0.1rem; }
.cfd-radio label { display: flex; gap: 0.5rem; align-items: center; cursor: pointer; }
.cfd-radio label.is-disabled { color: var(--text-muted); cursor: default; }
.cfd-row { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.cfd-row input[type=text], .cfd-row input[type=email] { flex: 1; min-width: 200px; }
.cfd-btns { display: flex; gap: 0.6rem; margin-top: 1rem; flex-wrap: wrap; }
.cfd-banner { border-radius: 10px; padding: 0.65rem 0.9rem; font-size: 0.85rem; margin-bottom: 0.8rem; }
.cfd-banner.is-warn { background: var(--warning-bg); color: var(--warning); }
.cfd-banner.is-bad { background: var(--danger-bg); color: var(--danger); }
.cfd-ns { display: flex; align-items: center; gap: 0.5rem 0.8rem; flex-wrap: wrap; background: var(--accent-bg);
    color: var(--text-primary); border-radius: 10px; padding: 0.65rem 0.9rem; margin-bottom: 0.6rem; font-size: 0.85rem; }
.cfd-ns code { background: var(--bg-card); color: var(--text-primary); padding: 2px 8px; border-radius: 6px; font-size: 0.82rem; }
.cfd-table td, .cfd-table th { font-size: 0.82rem; }
.cfd-table td.cfd-wrap { white-space: normal; min-width: 160px; }
.cfd-err { color: var(--danger); font-size: 0.78rem; white-space: normal; }
.cfd-muted { color: var(--text-muted); }
.cfd-scroll { overflow-x: auto; }
@media (max-width: 860px) {
    .cfd-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Quản lý Domain: Mua domain (Porkbun) + ImprovMX ---- */
.dm-sum { background: var(--bg-page); border-radius: 12px; padding: 0.85rem 1rem; font-size: 0.86rem; }
.dm-line { display: flex; justify-content: space-between; gap: 0.5rem; padding: 0.22rem 0; }
.dm-big { font-size: 1.35rem; font-weight: 700; color: var(--text-primary); }
.dm-flow { font-size: 0.82rem; color: var(--text-secondary); margin: 0.1rem 0 0.4rem; line-height: 1.6; }
.dm-flow b { color: var(--text-primary); }
.dm-sep { border-top: 1px solid var(--border); margin: 1.2rem 0 1rem; }
.dm-h { font-weight: 700; font-size: 0.95rem; margin: 0.1rem 0 0.5rem; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.dm-quota { display: flex; gap: 0.6rem 1.4rem; flex-wrap: wrap; align-items: center; font-size: 0.85rem; margin-bottom: 0.8rem; }
.dm-quota b { font-size: 1.02rem; }
.dm-meter { height: 6px; border-radius: 99px; background: var(--bg-page); width: 120px; overflow: hidden; margin-top: 4px; }
.dm-meter i { display: block; height: 100%; background: var(--accent); }
.dm-meter.is-full i { background: var(--danger); }
.dm-addrow { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; margin-bottom: 1rem; }
.dm-addrow input[type=text] { flex: 1; min-width: 220px; }
.dm-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 1.2rem; }
.dm-row { cursor: pointer; }
.dm-row:hover td { background: var(--bg-page); }
.dm-row.is-on td { background: var(--accent-bg); }
.dm-act { white-space: nowrap; }
.dm-act button { background: none; border: none; padding: 0 0.3rem; cursor: pointer; font-size: 0.8rem; color: var(--accent); }
.dm-act button.is-danger { color: var(--danger); }
.dm-alias-add { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr) auto; gap: 0.5rem; align-items: center; margin-top: 0.6rem; }
.dm-dns { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 0.3rem 0 0.8rem; }
.dm-del { border: 1px solid var(--danger); border-radius: 12px; padding: 0.9rem 1rem; margin-top: 1rem; background: var(--bg-card); }
.dm-del h4 { margin: 0 0 0.5rem; font-size: 0.98rem; color: var(--danger); }
.dm-del ul { margin: 0 0 0.6rem 1.1rem; padding: 0; font-size: 0.85rem; }
.dm-del li { margin: 0.25rem 0; }
.dm-log { white-space: pre-line; font-size: 0.76rem; color: var(--text-secondary); margin-top: 0.3rem; }
.dm-pick { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; font-size: 0.85rem; margin: 0.4rem 0; }
.btn-danger-solid { color: var(--danger); border-color: var(--danger); }
@media (max-width: 860px) {
    .dm-split { grid-template-columns: minmax(0, 1fr); }
    .dm-alias-add { grid-template-columns: minmax(0, 1fr); }
}