/* ==========================================================================
   ALOHA Baby — CSS riêng cho khu vực Admin/CRM (login, dashboard Sếp, Thợ ảnh,
   Sale). Dùng chung design tokens & .btn/.container từ style.css; file này chỉ
   bổ sung component mật độ thông tin cao đặc thù cho phân hệ nội bộ.
   ========================================================================== */

/* ---------------------------------- Menu dọc bên trái ----------------------------------
   Người dùng yêu cầu đổi từ thanh ngang sang cột dọc (2026-09-25). Ở màn rộng
   thanh này đứng yên bám mép trái, nội dung né sang phải đúng bằng bề rộng của
   nó. Ở màn hẹp (<=1000px) thanh trượt ra từ mép trái khi bấm nút menu, lúc đó
   mới có lớp phủ; xem crm/js/admin.js phần đóng/mở. */
:root { --admin-sidebar-w: 236px; }

.admin-sidebar {
  position: fixed; top: 0; left: 0; bottom: 0; width: var(--admin-sidebar-w); z-index: 60;
  background: var(--white); border-right: 1px solid var(--pink-100);
  padding: 20px 14px 18px; display: flex; flex-direction: column; gap: 22px;
  overflow-y: auto;
}
/* Logo: menu mở rộng hiện logo chữ (wordmark, css/style.css); thu gọn thì chỉ còn
   biểu tượng trái tim images/logo-mark.svg - xem các rule sidebar-collapsed bên dưới. */
.admin-sidebar .logo { display: flex; align-items: center; text-decoration: none; padding: 0 6px; flex-shrink: 0; --wm-size: 25px; }
.admin-sidebar .logo .mark { display: none; width: 36px; height: 36px; flex-shrink: 0; }

.admin-tabs { display: flex; flex-direction: column; gap: 3px; }
.admin-tabs a {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px; border-radius: var(--radius-sm); font-size: 13.5px; font-weight: 700;
  color: var(--navy-700); text-decoration: none; transition: background 0.2s, color 0.2s;
  position: relative;
}
.admin-tabs a svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--navy-300); transition: color 0.2s; }
.admin-tabs a span { flex: 1; }
.admin-tabs a:hover { background: var(--pink-50); color: var(--pink-700); }
.admin-tabs a:hover svg { color: var(--pink-500); }
.admin-tabs a.active { background: var(--pink-50); color: var(--pink-700); }
.admin-tabs a.active svg { color: var(--pink-600); }
/* Vạch đánh dấu mục đang xem, bám mép trái của mục */
.admin-tabs a.active::before {
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 20px; border-radius: 0 3px 3px 0; background: var(--pink-600);
}
/* Badge số yêu cầu thật Thợ ảnh chưa mở xem - xem updateTabBadge() trong admin.js */
.admin-tab-badge {
  display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px;
  padding: 0 5px; border-radius: var(--radius-pill); flex-shrink: 0;
  background: var(--pink-600); color: var(--white); font-size: 10.5px; font-weight: 700;
}

/* Khối người dùng đẩy xuống đáy cột */
.admin-user {
  margin-top: auto; padding: 14px 12px 4px; border-top: 1px solid var(--pink-100);
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  font-size: 13px; color: var(--navy-500);
}
.admin-user strong { font-family: var(--font-heading); color: var(--navy-900); font-weight: 700; }
.admin-user-info { line-height: 1.5; }
.admin-logout {
  border: 1.5px solid var(--pink-200); background: var(--white); color: var(--pink-700);
  font-weight: 700; font-size: 13px; padding: 7px 14px; border-radius: var(--radius-pill);
  cursor: pointer; transition: background 0.2s, transform 0.15s; width: 100%;
}
.admin-logout:hover { background: var(--pink-50); }
.admin-logout:active { transform: scale(0.97); }


/* ---------------------------------- Thu gọn / mở rộng cột menu ----------------------------------
   Người dùng yêu cầu 2026-09-25. Thu gọn thành dải chỉ còn icon (vẫn bấm
   chuyển mục được, rê chuột hiện tên mục) thay vì ẩn hẳn, để không mất luôn
   đường điều hướng. Trạng thái nhớ trong localStorage key 'aloha_admin_ui' -
   đây là tuỳ chọn hiển thị, không phải dữ liệu nghiệp vụ. */
:root.sidebar-collapsed { --admin-sidebar-w: 72px; }

.admin-sidebar-head { display: flex; align-items: center; gap: 6px; padding: 0 6px; flex-shrink: 0; }
.admin-sidebar-head .logo { flex: 1; min-width: 0; padding: 0; }
.admin-sidebar-head .logo .word { white-space: nowrap; overflow: hidden; }
.admin-collapse-btn {
  width: 30px; height: 30px; border-radius: 8px; border: none; background: transparent;
  color: var(--navy-300); cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s, color 0.2s, transform 0.25s ease;
}
.admin-collapse-btn:hover { background: var(--pink-50); color: var(--pink-700); }
.admin-collapse-btn svg { width: 17px; height: 17px; }

/* Cột menu co lại: giấu mọi phần chữ, chỉ chừa icon căn giữa */
.admin-sidebar { transition: width 0.24s cubic-bezier(0.22, 1, 0.36, 1); }
:root.sidebar-collapsed .admin-sidebar { padding-left: 10px; padding-right: 10px; }
:root.sidebar-collapsed .admin-sidebar-head { flex-direction: column; gap: 10px; padding: 0; }
:root.sidebar-collapsed .admin-sidebar-head .logo { flex: none; justify-content: center; }
:root.sidebar-collapsed .admin-sidebar .logo .mark { display: block; }
:root.sidebar-collapsed .admin-sidebar .logo .word,
:root.sidebar-collapsed .admin-tabs a span,
:root.sidebar-collapsed .admin-user-info { display: none; }
:root.sidebar-collapsed .admin-collapse-btn { transform: rotate(180deg); }
:root.sidebar-collapsed .admin-tabs a { justify-content: center; padding: 11px 0; gap: 0; }
:root.sidebar-collapsed .admin-user { align-items: center; padding: 14px 0 4px; }
:root.sidebar-collapsed .admin-logout {
  width: 40px; height: 36px; padding: 0; font-size: 0;
  display: flex; align-items: center; justify-content: center;
}
/* Nút Đăng xuất mất chữ thì phải có dấu hiệu khác, vẽ luôn bằng CSS cho khỏi
   phải đổi HTML chỉ vì một trạng thái hiển thị */
:root.sidebar-collapsed .admin-logout::after {
  content: ''; width: 16px; height: 16px; flex-shrink: 0;
  background: currentColor; -webkit-mask: var(--icon-logout) center/contain no-repeat; mask: var(--icon-logout) center/contain no-repeat;
}
:root { --icon-logout: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4H6a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h3'/%3E%3Cpath d='M16 17l5-5-5-5'/%3E%3Cpath d='M21 12H9'/%3E%3C/svg%3E"); }
/* Badge thông báo khi thu gọn: thu về chấm tròn nhỏ ở góc icon */
:root.sidebar-collapsed .admin-tab-badge {
  position: absolute; top: 5px; right: 10px; min-width: 15px; height: 15px; font-size: 9.5px; padding: 0 3px;
}

/* Tên mục hiện ra khi rê chuột lúc đang thu gọn (data-label do admin.js gắn) */
:root.sidebar-collapsed .admin-tabs a::after {
  content: attr(data-label); position: absolute; left: calc(100% + 10px); top: 50%;
  transform: translateY(-50%); z-index: 70; pointer-events: none;
  background: var(--navy-900); color: var(--white); font-size: 12.5px; font-weight: 700;
  padding: 6px 10px; border-radius: var(--radius-sm); white-space: nowrap;
  box-shadow: 0 6px 18px rgba(44, 42, 61, 0.22);
  opacity: 0; visibility: hidden; transition: opacity 0.15s ease;
}
:root.sidebar-collapsed .admin-tabs a:hover::after,
:root.sidebar-collapsed .admin-tabs a:focus-visible::after { opacity: 1; visibility: visible; }
/* Lúc thu gọn, vạch đánh dấu mục đang xem chạy hết chiều cao ô cho dễ thấy */
:root.sidebar-collapsed .admin-tabs a.active::before { height: 100%; border-radius: 0 2px 2px 0; }

@media (prefers-reduced-motion: reduce) {
  .admin-sidebar, .admin-collapse-btn { transition: none; }
}

/* Thanh trên cùng + lớp phủ: chỉ dùng ở màn hẹp, ẩn hẳn ở desktop */
.admin-mobilebar { display: none; }
.admin-scrim { display: none; }
.admin-menu-btn {
  border: 1.5px solid var(--pink-200); background: var(--white); color: var(--pink-700);
  width: 38px; height: 38px; border-radius: var(--radius-sm); cursor: pointer;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: background 0.2s;
}
.admin-menu-btn:hover { background: var(--pink-50); }
.admin-menu-btn svg { width: 20px; height: 20px; }

/* ---------------------------------- Layout chung khu Admin ---------------------------------- */
/* Nội dung né sang phải đúng bằng bề rộng cột menu. Dùng padding-left trên
   .admin-body (không phải margin trên body) để nền trang vẫn phủ kín 2 bên. */
.admin-body { padding: 28px 0 80px; padding-left: var(--admin-sidebar-w); }
/* .container vốn bó nội dung ở 1180px và tự căn giữa cả trang; trong khu quản
   trị giờ nó nằm trong phần bên phải cột menu nên nới rộng ra cho đỡ chật. */
.admin-body .container { max-width: 1320px; padding-left: 26px; padding-right: 26px; }
.admin-banner {
  background: var(--pink-50); color: var(--pink-700); border-radius: var(--radius-md);
  padding: 12px 18px; font-size: 13px; font-weight: 600; margin-bottom: 24px;
}
.admin-section { margin-bottom: 40px; }
.admin-section h2 { font-size: 20px; margin-bottom: 4px; }
.admin-section .sub { color: var(--navy-500); font-size: 13.5px; margin-bottom: 18px; }

/* ---------------------------------- Role card (login) ---------------------------------- */
.role-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.role-card {
  border: 1.5px solid var(--pink-100); border-radius: var(--radius-md); background: var(--white);
  padding: 20px 16px; text-align: center; cursor: pointer; transition: border-color 0.2s, background 0.2s;
}
.role-card .ico {
  width: 46px; height: 46px; margin: 0 auto 10px; border-radius: 50%; background: var(--pink-50);
  color: var(--pink-600); display: flex; align-items: center; justify-content: center;
}
.role-card .ico svg { width: 22px; height: 22px; }
.role-card strong { display: block; font-size: 14.5px; margin-bottom: 4px; }
.role-card span { display: block; font-size: 12px; color: var(--navy-500); }
.role-card:hover { border-color: var(--pink-300); }
.role-card.selected { border-color: var(--pink-600); background: var(--pink-50); }

/* ---------------------------------- KPI cards ---------------------------------- */
/* Mỗi thẻ 1 màu nhận diện riêng theo đúng bậc phễu (--kpi-accent/--kpi-accent-bg,
   tái dùng đúng bảng màu badge trạng thái đã có - không tạo bảng màu mới) +
   icon + sparkline nhỏ minh hoạ xu hướng, thay vì 5 thẻ trắng giống hệt nhau. */
.kpi-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.kpi-card {
  background: var(--white); border: 1px solid var(--pink-100); border-radius: var(--radius-md);
  padding: 16px 18px 18px; box-shadow: var(--shadow-soft); position: relative; overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.kpi-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--kpi-accent, var(--pink-400)); }
.kpi-will-animate .kpi-card::before { transform: scaleX(0); transform-origin: left; transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
.kpi-will-animate .kpi-card.in::before { transform: scaleX(1); }
.kpi-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); }
.kpi-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.kpi-icon {
  width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0;
  background: var(--kpi-accent-bg, var(--pink-50)); color: var(--kpi-accent, var(--pink-600));
  display: flex; align-items: center; justify-content: center;
}
.kpi-icon svg { width: 17px; height: 17px; }
.kpi-spark { width: 62px; height: 24px; overflow: visible; flex-shrink: 0; }
.kpi-spark polyline { fill: none; stroke: var(--kpi-accent, var(--pink-600)); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.kpi-spark polygon { fill: var(--kpi-accent, var(--pink-600)); opacity: 0.1; }
.kpi-card.kpi-quan-tam { --kpi-accent: #4148c9; --kpi-accent-bg: #eef1ff; }
.kpi-card.kpi-tu-van { --kpi-accent: #b06a00; --kpi-accent-bg: #fff4e0; }
.kpi-card.kpi-dat-lich { --kpi-accent: var(--pink-600); --kpi-accent-bg: var(--pink-50); }
.kpi-card.kpi-da-chup { --kpi-accent: var(--blue-600); --kpi-accent-bg: #e6f4ff; }
.kpi-card.kpi-hoan-thanh { --kpi-accent: #1a9d5c; --kpi-accent-bg: #e6f7ec; }
.kpi-card .num { font-family: var(--font-heading); font-size: 26px; font-weight: 700; color: var(--navy-900); }
.kpi-card .label { font-size: 12.5px; color: var(--navy-500); margin-top: 2px; }
.kpi-card .trend { font-size: 11.5px; font-weight: 700; margin-top: 8px; display: inline-block; }
.kpi-card .trend.up { color: #1a9d5c; }
.kpi-card .trend.down { color: var(--pink-700); }

/* ---------------------------------- Bar chart (CSS thuần) ---------------------------------- */
.chart-bar-wrap {
  /* 200px chứ không phải 140px: sau khi sửa lỗi cột bằng nhau, cột thấp nhất
     chỉ còn ~30px trong khung cũ, nhìn không ra chênh lệch giữa các tuần. */
  display: flex; align-items: flex-end; gap: 10px; height: 200px;
  background: var(--white); border: 1px solid var(--pink-100); border-radius: var(--radius-md);
  padding: 18px; box-shadow: var(--shadow-soft);
}
.chart-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; }
/* Vùng riêng cho cột: chiếm đúng phần còn lại của ô sau khi trừ số và nhãn, nhờ
   đó height:% của .chart-bar tính trên một chiều cao xác định. Trước đây
   .chart-bar nằm thẳng trong ô flex nên bị co cho vừa chỗ và MỌI cột ra cùng
   chiều cao, biểu đồ không phản ánh số liệu (sửa 2026-09-25). */
.chart-bar-slot { flex: 1; min-height: 0; width: 100%; display: flex; align-items: flex-end; justify-content: center; }
.chart-bar-col .val { font-size: 11px; font-weight: 700; color: var(--navy-700); transition: opacity 0.5s ease; }
/* height/width có transition để cột và phễu chạy được từ 0 lên giá trị thật
   khi cuộn tới (crm/js/admin.js đặt giá trị đích, CSS lo phần chuyển động). */
.chart-bar { width: 100%; max-width: 28px; border-radius: 6px 6px 0 0; background: linear-gradient(180deg, var(--pink-400), var(--pink-600)); transition: transform 0.2s ease, height 0.85s cubic-bezier(0.22, 1, 0.36, 1); }
.chart-bar-col:hover .chart-bar { transform: scaleY(1.02); transform-origin: bottom; }
.chart-bar-col .lbl { font-size: 11px; color: var(--navy-500); }

/* ---------------------------------- Funnel ---------------------------------- */
.funnel { display: flex; flex-direction: column; gap: 10px; }
.funnel-row { display: flex; align-items: center; gap: 12px; }
.funnel-row .name { width: 130px; font-size: 13px; color: var(--navy-700); flex-shrink: 0; }
.funnel-bar-track { flex: 1; background: var(--pink-50); border-radius: var(--radius-pill); height: 22px; overflow: hidden; }
.funnel-bar { height: 100%; background: linear-gradient(90deg, var(--pink-400), var(--pink-600)); border-radius: var(--radius-pill); transition: width 0.9s cubic-bezier(0.22, 1, 0.36, 1); }
.funnel-row .val { width: 90px; text-align: right; font-size: 12.5px; font-weight: 700; color: var(--navy-900); flex-shrink: 0; }

/* ---------------------------------- Tab lọc (vd Lịch hẹn: Sắp tới/Hôm nay/Đã qua) ---------------------------------- */
/* Trùng tên class .ps-tabs/.ps-tab với css/pages.css (view Đặt lịch/Ảnh của
   tôi phía khách) nhưng admin.html không nạp pages.css (khác phạm vi style) -
   định nghĩa lại riêng ở đây thay vì import cả file, tránh lẫn style khác. */
.ps-tabs { display: flex; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
.ps-tab {
  padding: 9px 18px; border-radius: var(--radius-pill); border: 1.5px solid var(--pink-200);
  background: var(--white); color: var(--navy-700); font-size: 13.5px; font-weight: 700; cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.ps-tab.active, .ps-tab:hover { background: var(--pink-600); border-color: var(--pink-600); color: var(--white); }

/* ---------------------------------- Data table ---------------------------------- */
.data-table-toolbar { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.data-table-toolbar input, .data-table-toolbar select {
  border: 1px solid var(--pink-200); border-radius: var(--radius-sm); padding: 9px 12px;
  font-family: var(--font-body); font-size: 13.5px;
}
.data-table-toolbar input:focus, .data-table-toolbar select:focus { outline: none; border-color: var(--pink-500); }
.data-table-wrap { overflow-x: auto; border: 1px solid var(--pink-100); border-radius: var(--radius-md); background: var(--white); box-shadow: var(--shadow-soft); }
.data-table { width: 100%; border-collapse: collapse; min-width: 640px; }
.data-table th, .data-table td { text-align: left; padding: 12px 16px; font-size: 13.5px; border-bottom: 1px solid var(--pink-50); }
.data-table th { color: var(--navy-500); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.02em; }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover { background: var(--pink-50); }

/* ---- Bảng Khách hàng / CRM: avatar chữ viết tắt + chip nguồn + icon (2026-09-25) ---- */
.cust-toolbar .cust-field { position: relative; display: flex; align-items: center; }
.cust-toolbar .cust-field svg {
  position: absolute; left: 12px; width: 16px; height: 16px; color: var(--navy-300); pointer-events: none;
}
.cust-toolbar .cust-field input, .cust-toolbar .cust-field select { padding-left: 36px; background-color: var(--white); }
.cust-toolbar .cust-field-search { flex: 0 1 300px; }
.cust-toolbar .cust-field-search input { width: 100%; }

#custTable th, #custTable td { padding-left: 12px; padding-right: 12px; }
#custTable td { vertical-align: middle; padding-top: 14px; padding-bottom: 14px; }
.cust-person { display: flex; align-items: center; gap: 12px; min-width: 190px; }
.cust-av {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-weight: 700; font-size: 14px; letter-spacing: 0.02em;
}
/* 5 tông pastel lấy đúng từ bảng màu badge trạng thái bên dưới, không thêm màu mới */
.cust-av-0 { background: #eef1ff; color: #4148c9; }
.cust-av-1 { background: #fff4e0; color: #b06a00; }
.cust-av-2 { background: var(--pink-100); color: var(--pink-700); }
.cust-av-3 { background: #e6f4ff; color: var(--blue-600); }
.cust-av-4 { background: #e6f7ec; color: #1a9d5c; }
.cust-person-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cust-name { font-weight: 700; color: var(--navy-900); font-size: 14px; }
.cust-sub { font-size: 12px; color: var(--navy-300); white-space: nowrap; }
.cust-name { white-space: nowrap; }
.cust-meta { display: inline-flex; align-items: center; gap: 8px; color: var(--navy-700); white-space: nowrap; }
.cust-meta svg { width: 16px; height: 16px; color: var(--navy-300); flex-shrink: 0; }
.cust-src {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  padding: 5px 12px 5px 8px; border-radius: var(--radius-pill);
  background: #f6f5fa; color: var(--navy-700); font-size: 12.5px; font-weight: 600;
}
.cust-src-ic svg { width: 16px; height: 16px; display: block; }
/* Giữ cột ghi chú đủ rộng: màn hẹp thì bảng cuộn ngang trong khung như cũ,
   thay vì bóp ghi chú thành nhiều dòng làm mỗi hàng cao vống lên */
.cust-note { color: var(--navy-500); min-width: 180px; }
.cust-sale { color: var(--navy-700); min-width: 150px; }
.cust-empty { text-align: center !important; color: var(--navy-300); padding: 28px 16px !important; }

.badge { display: inline-block; padding: 4px 10px; border-radius: var(--radius-pill); font-size: 11.5px; font-weight: 700; }
.badge-quan-tam { background: #eef1ff; color: #4148c9; }
.badge-tu-van { background: #fff4e0; color: #b06a00; }
.badge-dat-lich { background: var(--pink-50); color: var(--pink-700); }
.badge-da-chup { background: #e6f4ff; color: var(--blue-600); }
.badge-hoan-thanh { background: #e6f7ec; color: #1a9d5c; }
.badge-huy { background: #f4f4f6; color: var(--navy-500); }
/* Badge có chấm tròn cùng màu chữ phía trước (bảng Khách hàng) */
.badge-dot { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; padding: 5px 12px 5px 10px; }
.badge-dot::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }

/* Gắn tạm trong đúng một khung hình khi chạy lại hiệu ứng (crm/js/admin.js,
   hàm snapBack): đưa cột/thanh/vạch về vạch xuất phát tức thì thay vì để
   chúng chạy ngược lại rồi mới chạy xuôi. Dùng !important vì phải thắng cả
   transition khai báo trong CSS lẫn transition gán inline bằng JS. */
.anim-reset, .anim-reset *, .anim-reset *::before, .anim-reset *::after { transition: none !important; }

/* ---------------------------------- Lịch hẹn dạng lịch tháng ----------------------------------
   Thay bảng danh sách + 3 tab cũ (người dùng yêu cầu 2026-09-25). Mỗi ô là 1
   ngày, trong ô là lịch hẹn của ngày đó xếp theo giờ từ sớm tới muộn. Màu
   trạng thái tái dùng đúng bộ badge đã có, không thêm màu mới vào hệ thống. */
.cal-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.cal-today-btn {
  border: 1.5px solid var(--pink-200); background: var(--white); color: var(--pink-700);
  font-family: var(--font-body); font-weight: 700; font-size: 13px;
  padding: 8px 16px; border-radius: var(--radius-pill); cursor: pointer;
  transition: background 0.2s, transform 0.15s;
}
.cal-today-btn:hover { background: var(--pink-50); }
.cal-today-btn:active { transform: scale(0.97); }
.cal-nav { display: flex; gap: 4px; }
.cal-nav button {
  width: 34px; height: 34px; border-radius: 50%; border: none; background: transparent;
  color: var(--navy-700); cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background 0.2s, color 0.2s;
}
.cal-nav button:hover { background: var(--pink-50); color: var(--pink-700); }
.cal-nav button svg { width: 18px; height: 18px; }
.cal-title { font-family: var(--font-heading); font-size: 19px; font-weight: 700; color: var(--navy-900); margin: 0; }
.cal-count { margin-left: auto; font-size: 12.5px; color: var(--navy-500); font-weight: 600; }

/* Cao vừa khung nhìn để xem được cả tháng mà không phải cuộn: trước đây ô nào
   nhiều lịch hẹn thì tự giãn ra, kéo cả hàng cao theo và đẩy lịch vượt quá màn
   hình (người dùng báo 2026-09-25). Giờ mọi ô cao bằng nhau, ô nào chứa không
   hết thì hiện nút "+N nữa" - số thẻ vừa chỗ do crm/js/admin.js đo và cắt. */
.cal-wrap {
  background: var(--white); border: 1px solid var(--pink-100); border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft); overflow: hidden;
  /* Sàn 520px: ép thấp hơn nữa thì ô ngày không chứa nổi một thẻ, lịch thành
     một mớ nút "N lịch hẹn" vô dụng - màn quá thấp thì thà cuộn một chút. */
  height: clamp(520px, calc(100vh - 215px), 820px);
  display: flex; flex-direction: column;
}
.cal-weekdays {
  display: grid; grid-template-columns: repeat(7, 1fr);
  border-bottom: 1px solid var(--pink-100); background: var(--pink-50);
}
.cal-weekdays span {
  padding: 9px 10px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--navy-500); text-align: center;
}
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); flex: 1; min-height: 0; grid-auto-rows: minmax(0, 1fr); }
.cal-day {
  min-height: 0; overflow: hidden; padding: 7px 7px 9px; border-right: 1px solid var(--pink-100);
  border-bottom: 1px solid var(--pink-100); display: flex; flex-direction: column; gap: 5px;
}
.cal-day:nth-child(7n) { border-right: none; }
.cal-grid .cal-day:nth-last-child(-n+7) { border-bottom: none; }
/* Ngày thuộc tháng khác, để mờ đi cho khỏi lẫn nhưng vẫn thấy được lịch hẹn */
.cal-day.out { background: var(--cream); }
.cal-day.out .cal-day-num { color: var(--navy-300); }
.cal-day.out .cal-appt { opacity: 0.55; }

.cal-day-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.cal-day-num {
  font-family: var(--font-heading); font-size: 13px; font-weight: 700; color: var(--navy-700);
  width: 25px; height: 25px; display: flex; align-items: center; justify-content: center; border-radius: 50%;
}
/* Ngày hôm nay nổi bật hẳn so với các ngày khác (người dùng yêu cầu
   2026-09-25): trước đây chỉ tô tròn số ngày nên nhìn lướt cả tháng rất dễ
   trượt mất. Giờ cả ô đổi nền, có viền hồng bao quanh, số ngày to hơn và thêm
   nhãn chữ "Hôm nay" để không bắt người xem phải đoán ý nghĩa của màu. Viền
   vẽ bằng lớp phủ tuyệt đối chứ không dùng border thật - border sẽ cộng thêm
   bề dày vào ô và làm lệch lưới 7 cột. */
.cal-day.today { position: relative; z-index: 1; background: linear-gradient(180deg, #ffe9f1, var(--white) 70%); }
.cal-day.today::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  border: 2px solid var(--pink-500);
  animation: cal-today-in 0.5s ease-out both;
}
@keyframes cal-today-in {
  from { opacity: 0; border-width: 7px; }
  to   { opacity: 1; border-width: 2px; }
}
@media (prefers-reduced-motion: reduce) { .cal-day.today::after { animation: none; } }
.cal-day.today .cal-day-num {
  width: 27px; height: 27px; font-size: 14px; color: var(--white);
  background: linear-gradient(135deg, var(--pink-500), var(--pink-600));
  box-shadow: 0 2px 7px rgba(224, 65, 122, 0.45);
}
.cal-day.today .cal-day-count { color: var(--pink-700); }
/* Nhãn chữ đi kèm với màu. Ô hẹp không đủ chỗ thì ẩn nhãn (viền + nền + chấm
   hồng vẫn đủ để nhận ra hôm nay), xem media query cuối file. */
.cal-today-tag {
  margin-right: auto; font-size: 9.5px; font-weight: 800; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--pink-700); background: var(--pink-100);
  padding: 2px 7px; border-radius: var(--radius-pill); white-space: nowrap;
}
/* Tô luôn tên thứ ở hàng tiêu đề để mắt dóng thẳng từ đầu cột xuống đúng ô */
.cal-weekdays span.today-col { color: var(--pink-700); background: var(--pink-100); }
.cal-day-count { font-size: 10.5px; font-weight: 700; color: var(--navy-300); }

.cal-day-list { display: flex; flex-direction: column; gap: 4px; min-height: 0; overflow: hidden; }
/* Nút "còn N lịch hẹn nữa" khi ô không đủ chỗ; bấm mở danh sách cả ngày */
.cal-more {
  border: none; background: transparent; color: var(--navy-500); cursor: pointer;
  font-family: var(--font-body); font-size: 10.5px; font-weight: 700; text-align: left;
  padding: 2px 7px; border-radius: 5px; transition: background 0.15s, color 0.15s;
}
.cal-more:hover { background: var(--pink-50); color: var(--pink-700); }
/* 1 lịch hẹn: giờ luôn ở đầu dòng để đọc được thứ tự sớm -> muộn ngay */
.cal-appt {
  display: flex; flex-direction: column; gap: 1px; width: 100%; text-align: left;
  border: none; border-left: 3px solid var(--appt-accent, var(--pink-400));
  background: var(--appt-bg, var(--pink-50)); color: var(--navy-900);
  font-family: var(--font-body); padding: 5px 7px; border-radius: 5px;
  cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.cal-appt:hover { transform: translateX(1px); box-shadow: var(--shadow-soft); }
.cal-appt:active { transform: scale(0.985); }
.cal-appt-time { font-size: 11px; font-weight: 700; color: var(--appt-accent, var(--pink-700)); }
.cal-appt-name { font-size: 11.5px; font-weight: 700; line-height: 1.25; }
.cal-appt-service { font-size: 10.5px; color: var(--navy-500); }
/* Ô ngày quá thấp thì bỏ dòng dịch vụ cho thẻ mỏng lại (class do admin.js gắn
   sau khi đo chỗ trống thật của ô) - thấy được nhiều buổi hơn trong cùng ô. */
.cal-day.compact .cal-appt-service { display: none; }
.cal-day.compact .cal-appt { padding: 4px 7px; }

/* Màu theo trạng thái, khớp đúng bảng màu badge trạng thái ở trên */
.cal-appt[data-status="Chưa cọc"],
.cal-appt[data-status="Chờ duyệt dời lịch"] { --appt-accent: #b06a00; --appt-bg: #fff4e0; }
.cal-appt[data-status="Chờ xác nhận"] { --appt-accent: #4148c9; --appt-bg: #eef1ff; }
.cal-appt[data-status="Sắp đến"] { --appt-accent: var(--pink-600); --appt-bg: var(--pink-50); }
.cal-appt[data-status="Đã đến/Đang chụp"],
.cal-appt[data-status="Đã chụp"] { --appt-accent: var(--blue-600); --appt-bg: #e6f4ff; }
.cal-appt[data-status="Hoàn thành"] { --appt-accent: #1a9d5c; --appt-bg: #e6f7ec; }
.cal-appt[data-status="Đã hủy"] { --appt-accent: var(--navy-300); --appt-bg: #f4f4f6; }
.cal-appt[data-status="Đã hủy"] .cal-appt-name { text-decoration: line-through; color: var(--navy-500); }

/* Bản danh sách theo ngày, chỉ dùng ở màn hẹp */
.cal-agenda { display: none; flex-direction: column; gap: 14px; }
.cal-agenda-day {
  background: var(--white); border: 1px solid var(--pink-100); border-radius: var(--radius-md);
  padding: 12px 14px; box-shadow: var(--shadow-soft);
}
.cal-agenda-day.today {
  border: 2px solid var(--pink-500);
  background: linear-gradient(180deg, #ffe9f1, var(--white) 60%);
  box-shadow: 0 6px 18px rgba(224, 65, 122, 0.16);
}
.cal-agenda-day.today .cal-agenda-date strong { color: var(--pink-700); }
.cal-agenda-date .cal-today-tag { display: inline-block; margin: 0 0 0 8px; vertical-align: 1px; }
.cal-agenda-date { font-size: 12.5px; color: var(--navy-500); margin-bottom: 9px; }
.cal-agenda-date strong { font-family: var(--font-heading); font-size: 15px; color: var(--navy-900); }
.cal-agenda .cal-appt { padding: 8px 10px; }
.cal-agenda .cal-appt-name { font-size: 13px; }
.cal-agenda .cal-appt-time { font-size: 12px; }
.cal-agenda .cal-appt-service { font-size: 11.5px; }

/* Popup chi tiết lịch hẹn (dùng lại khung modal của kanban) */
.appt-modal { max-width: 520px; }
.appt-modal-status { margin-bottom: 16px; }
.appt-fields { display: flex; flex-direction: column; gap: 11px; margin: 0; }
.appt-fields > div { display: grid; grid-template-columns: 132px 1fr; gap: 10px; align-items: baseline; }
.appt-fields dt { font-size: 12.5px; color: var(--navy-500); font-weight: 600; }
.appt-fields dd { margin: 0; font-size: 13.5px; color: var(--navy-900); font-weight: 600; }
.appt-note {
  margin-top: 16px; padding: 12px 14px; background: var(--pink-50); border-radius: var(--radius-sm);
}
.appt-note strong { font-size: 12.5px; color: var(--pink-700); }
.appt-note p { margin: 4px 0 0; font-size: 13px; color: var(--navy-700); line-height: 1.5; }
.appt-modal-hint { margin: 16px 0 0; font-size: 11.5px; color: var(--navy-300); }
.appt-modal-sub { margin: 0 0 16px; font-size: 13px; color: var(--navy-500); }
/* Danh sách cả ngày trong popup (mở từ nút "+N nữa"): thẻ rộng rãi hơn trong ô */
.appt-day-list { gap: 8px; overflow: visible; }
.appt-day-list .cal-appt { padding: 10px 12px; }
.appt-day-list .cal-appt-time { font-size: 12.5px; }
.appt-day-list .cal-appt-name { font-size: 14px; }
.appt-day-list .cal-appt-service { font-size: 12px; }
.appt-day-list .cal-appt-sale { margin-top: 4px; font-size: 12px; color: var(--navy-700); overflow-wrap: anywhere; }

/* ---------------------------------- Kanban (Quản lý ảnh) ---------------------------------- */
/* Mỗi giai đoạn 1 màu nhận diện riêng (--col-accent/--col-accent-bg), lấy đúng
   từ bảng màu badge trạng thái đã có sẵn ở trên (không tạo bảng màu mới) -
   để các cột phân biệt được ngay từ xa thay vì nhìn giống hệt nhau, và khớp
   đúng màu badge hiện trong modal chi tiết (xem STATUS_ACCENT trong admin.js).
   Chỉ 3 cột (bỏ "Chờ QC" riêng 2026-09-19, xem admin.html/admin.js/data-store.js). */
#kanbanCol-cho-xu-ly { --col-accent: #4148c9; --col-accent-bg: #eef1ff; }
#kanbanCol-dang-thuc-hien { --col-accent: #b06a00; --col-accent-bg: #fff4e0; }
#kanbanCol-hoan-thanh { --col-accent: #1a9d5c; --col-accent-bg: #e6f7ec; }

.kanban { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.kanban-col {
  background: var(--col-accent-bg, var(--pink-50)); border-radius: var(--radius-md); padding: 14px;
  border-top: 3px solid var(--col-accent, var(--pink-300)); position: relative;
}
.kanban-col:not(:last-child)::after {
  content: ''; position: absolute; top: 22px; right: -11px; width: 8px; height: 8px;
  border-top: 2.5px solid var(--col-accent, var(--pink-300)); border-right: 2.5px solid var(--col-accent, var(--pink-300));
  transform: rotate(45deg); z-index: 2;
}
.kanban-col h4 {
  display: flex; align-items: center; gap: 7px; font-size: 13px; margin-bottom: 12px; color: var(--col-accent, var(--navy-700));
}
.kanban-col h4 svg { width: 16px; height: 16px; flex-shrink: 0; }
.kanban-col-count {
  margin-left: auto; background: var(--white); color: var(--col-accent, var(--navy-700));
  font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: var(--radius-pill); min-width: 20px; text-align: center;
}
.kanban-col-empty { font-size: 12px; color: var(--navy-500); text-align: center; padding: 18px 6px; line-height: 1.6; }
.kanban-card {
  background: var(--white); border-radius: var(--radius-sm); padding: 12px 12px 12px 14px; margin-bottom: 10px;
  box-shadow: var(--shadow-soft); font-size: 12.5px; cursor: pointer;
  border: 1.5px solid transparent; border-left: 4px solid var(--col-accent, var(--pink-300));
  transition: border-color 0.2s, transform 0.15s, box-shadow 0.2s;
}
.kanban-card:hover, .kanban-card:focus-visible {
  border-color: var(--col-accent, var(--pink-300)); border-left-color: var(--col-accent, var(--pink-300)); box-shadow: var(--shadow-card);
}
.kanban-card:active { transform: scale(0.99); }
.kanban-card-top { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; }
.kanban-card-top strong { font-size: 13px; }
.priority-badge {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 20px; height: 20px; border-radius: 50%; background: var(--navy-900); color: var(--white);
  font-size: 10.5px; font-weight: 700;
}
.kanban-card strong { display: block; font-size: 13px; margin-bottom: 3px; }
.kanban-card span { color: var(--navy-500); }
.kanban-card-time { display: block; font-size: 11px; color: var(--navy-500); margin-top: 2px; }
.kanban-card-notes-hint { display: block; font-size: 11px; color: var(--pink-700); font-weight: 700; margin-top: 4px; }
.kanban-progress-track {
  height: 6px; border-radius: var(--radius-pill); background: var(--col-accent-bg, var(--pink-50)); overflow: hidden; margin-top: 8px;
}
.kanban-progress-fill { height: 100%; background: var(--col-accent, var(--pink-600)); transition: width 0.3s ease; }
.kanban-progress-fill.done { background: linear-gradient(90deg, #4fc98a, #1a9d5c); }
.kanban-progress-label { display: block; font-size: 11px; color: var(--navy-500); margin-top: 3px; }
.kanban-advance-btn {
  display: block; width: 100%; margin-top: 8px; padding: 6px 8px; border-radius: var(--radius-sm);
  border: 1.5px solid var(--col-accent, var(--pink-200)); background: var(--white); color: var(--col-accent, var(--pink-700));
  font-size: 11px; font-weight: 700; cursor: pointer; transition: background 0.2s;
}
.kanban-advance-btn:hover { background: var(--col-accent-bg, var(--pink-50)); }
.kanban-advance-btn:active { transform: scale(0.97); }
.kanban-advance-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.kanban-advance-btn:disabled:hover { background: var(--white); }

/* ---------------------------------- Modal chi tiết yêu cầu chỉnh ảnh ---------------------------------- */
.kanban-modal-overlay {
  position: fixed; inset: 0; background: rgba(20, 15, 25, 0.55); z-index: 200;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.2s ease, visibility 0.2s ease;
}
.kanban-modal-overlay.open { opacity: 1; visibility: visible; pointer-events: auto; }
.kanban-modal {
  background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
  width: 100%; max-width: 640px; max-height: 86vh; overflow-y: auto; padding: 28px 24px;
  position: relative; transform: translateY(10px); transition: transform 0.2s ease;
}
.kanban-modal-overlay.open .kanban-modal { transform: translateY(0); }
.kanban-modal-close {
  position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border-radius: 50%;
  border: none; background: var(--pink-50); color: var(--navy-700); font-size: 20px; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s;
}
.kanban-modal-close:hover { background: var(--pink-100); }
.kanban-modal h3 { font-size: 18px; margin-bottom: 8px; padding-right: 36px; }
.kanban-modal-meta { font-size: 13px; color: var(--navy-500); margin-bottom: 4px; }
.kanban-modal-note { font-size: 13.5px; color: var(--navy-700); font-style: italic; margin: 10px 0; }
.kanban-modal-progress { margin: 14px 0 18px; }
.kanban-photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 18px; }
.kanban-photo-tile {
  border: 1.5px solid var(--pink-100); border-radius: var(--radius-sm); overflow: hidden;
  background: var(--pink-50); transition: border-color 0.2s;
}
.kanban-photo-tile.done { border-color: #1a9d5c; }
.kanban-photo-tile img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; }
.kanban-photo-tile .note { font-size: 10.5px; color: var(--navy-700); padding: 5px 6px 0; }
.photo-done-toggle {
  display: block; width: 100%; margin-top: 5px; padding: 5px 4px; border: none; background: transparent;
  color: var(--pink-700); font-size: 10.5px; font-weight: 700; cursor: pointer; text-align: center;
}
.kanban-photo-tile.done .photo-done-toggle { color: #1a9d5c; }
.photo-done-toggle:hover { background: var(--pink-100); }
.photo-done-flag {
  display: block; text-align: center; font-size: 10.5px; font-weight: 700; padding: 5px 4px;
  color: var(--navy-500);
}
.photo-done-flag.done { color: #1a9d5c; }
.kanban-modal-advance { width: 100%; }
.kanban-modal-advance:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---------------------------------- Doanh thu (Sếp) ----------------------------------
   Bố cục tham khảo dashboard analytics người dùng cung cấp (2026-09-25) nhưng
   đổ đúng bảng màu hồng/navy của dự án, không dùng dark theme của ảnh gốc.
   Mỗi thẻ KPI 1 màu accent riêng lấy từ đúng bộ màu đã dùng ở Dashboard/kanban
   (hồng / xanh lá / xanh dương / cam) - không thêm màu mới vào hệ thống. */
.rev-kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
.rev-kpi {
  background: var(--white); border: 1px solid var(--pink-100); border-radius: var(--radius-md);
  padding: 16px 18px 0; box-shadow: var(--shadow-soft); position: relative; overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.rev-kpi:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); }
.rev-kpi-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.rev-kpi-label { font-size: 12.5px; color: var(--navy-500); font-weight: 600; }
.rev-kpi-icon {
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
  background: var(--rev-accent-bg); color: var(--rev-accent);
  display: flex; align-items: center; justify-content: center;
}
.rev-kpi-icon svg { width: 18px; height: 18px; }
.rev-kpi-num { font-family: var(--font-heading); font-size: 26px; font-weight: 700; color: var(--navy-900); line-height: 1.2; margin-top: 10px; }
.rev-kpi-trend { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; margin-top: 6px; }
.rev-kpi-trend svg { width: 13px; height: 13px; }
.rev-kpi-trend.up { color: #1a9d5c; }
.rev-kpi-trend.down { color: var(--pink-700); }
/* Sparkline tràn sát đáy thẻ như ảnh tham chiếu -> bù lại padding-bottom của thẻ */
/* Sparkline cố ý tràn ra sát 2 mép thẻ (bù lại padding 18px) như ảnh tham
   chiếu -> cần max-width:none để thoát reset "svg { max-width: 100% }" trong
   css/style.css, nếu không SVG bị kẹp lại và hụt hẳn một mảng bên phải. */
.rev-kpi-spark { display: block; width: calc(100% + 36px); max-width: none; margin: 10px -18px 0; height: 46px; }
.rev-kpi-spark .spark-line { fill: none; stroke: var(--rev-accent); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.rev-kpi-spark .spark-area { fill: var(--rev-accent); opacity: 0.12; }

/* Hàng dưới: biểu đồ lớn + mục tiêu tháng */
.rev-main { display: grid; grid-template-columns: 1.85fr 1fr; gap: 16px; align-items: start; }
.rev-card { background: var(--white); border: 1px solid var(--pink-100); border-radius: var(--radius-md); padding: 20px; box-shadow: var(--shadow-soft); }
.rev-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.rev-card-head h3 { font-family: var(--font-heading); font-size: 16px; font-weight: 700; color: var(--navy-900); margin: 0; }
.rev-card-sub { font-size: 12.5px; color: var(--navy-500); margin: 3px 0 0; }

/* Tab chuyển chỉ số - dạng pill nền hồng nhạt, khớp .ps-tabs đã dùng ở Lịch hẹn */
.rev-tabs { display: flex; gap: 2px; background: var(--pink-50); border: 1px solid var(--pink-100); border-radius: var(--radius-pill); padding: 3px; flex-shrink: 0; }
.rev-tab {
  border: 0; background: transparent; cursor: pointer; font-family: var(--font-body);
  font-size: 12.5px; font-weight: 700; color: var(--navy-500);
  padding: 6px 14px; border-radius: var(--radius-pill); transition: background 0.2s ease, color 0.2s ease;
}
.rev-tab:hover { color: var(--pink-700); }
.rev-tab.active { background: var(--white); color: var(--pink-700); box-shadow: var(--shadow-soft); }

.rev-chart-wrap { position: relative; }
.rev-chart { display: block; width: 100%; height: auto; overflow: visible; }
.rev-grid-line { stroke: var(--pink-100); stroke-width: 1; stroke-dasharray: 4 5; }
.rev-axis-label { font-size: 10.5px; fill: var(--navy-300); font-family: var(--font-body); }
.rev-area { fill: url(#revAreaGradient); }
.rev-line { fill: none; stroke: var(--pink-600); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.rev-dot { fill: var(--white); stroke: var(--pink-600); stroke-width: 2.4; opacity: 0; transition: opacity 0.18s ease; }
.rev-dot.on { opacity: 1; }
/* Vùng bắt hover cho từng tháng: trong suốt, phủ hết chiều cao biểu đồ */
.rev-hit { fill: transparent; cursor: pointer; }
.rev-hover-line { stroke: var(--pink-400); stroke-width: 1.5; stroke-dasharray: 3 4; opacity: 0; transition: opacity 0.18s ease; }
.rev-hover-line.on { opacity: 1; }
.rev-tooltip {
  position: absolute; pointer-events: none; z-index: 3; opacity: 0;
  background: var(--navy-900); color: var(--white); border-radius: var(--radius-sm);
  padding: 8px 11px; font-size: 12px; line-height: 1.45; white-space: nowrap;
  box-shadow: 0 6px 18px rgba(44, 42, 61, 0.22); transform: translate(-50%, -112%);
  transition: opacity 0.18s ease;
}
.rev-tooltip.on { opacity: 1; }
.rev-tooltip b { font-family: var(--font-heading); font-size: 13.5px; display: block; margin-top: 2px; }

/* Mục tiêu tháng: thanh tiến độ chạy từ 0 khi cuộn tới */
.rev-goals { display: flex; flex-direction: column; gap: 18px; }
.rev-goal-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 7px; }
.rev-goal-name { font-size: 13px; font-weight: 700; color: var(--navy-700); }
.rev-goal-pct { font-family: var(--font-heading); font-size: 14px; font-weight: 700; color: var(--rev-accent); }
.rev-goal-track { height: 9px; border-radius: var(--radius-pill); background: var(--pink-50); border: 1px solid var(--pink-100); overflow: hidden; }
.rev-goal-bar { height: 100%; width: 0; border-radius: var(--radius-pill); background: var(--rev-accent); transition: width 1.1s cubic-bezier(0.22, 1, 0.36, 1); }
.rev-goal-detail { font-size: 11.5px; color: var(--navy-500); margin-top: 6px; }
.rev-goal-note { font-size: 11.5px; color: var(--pink-700); margin: 18px 0 0; }

/* ---------------------------------- Cài đặt ---------------------------------- */
.settings-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.settings-item {
  background: var(--white); border: 1px solid var(--pink-100); border-radius: var(--radius-md);
  padding: 16px 18px; box-shadow: var(--shadow-soft);
}
.settings-item .k { font-size: 12.5px; color: var(--navy-500); margin-bottom: 4px; }
.settings-item .v { font-size: 15px; font-weight: 700; color: var(--navy-900); }
.settings-item .note { font-size: 11.5px; color: var(--pink-700); margin-top: 4px; }

/* ---------------------------------- Empty state (placeholder Thợ ảnh) ---------------------------------- */
.empty-card {
  background: var(--white); border: 1.5px dashed var(--pink-200); border-radius: var(--radius-lg);
  padding: 36px 24px; text-align: center; color: var(--navy-500);
}
.empty-card .ico {
  width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 50%; background: var(--pink-50);
  color: var(--pink-600); display: flex; align-items: center; justify-content: center;
}

/* Màn hẹp: cột menu trượt ra từ mép trái thay vì chiếm chỗ cố định. Mốc
   1000px vì dưới mức đó, 236px cho menu khiến phần nội dung (bảng, kanban)
   còn quá hẹp để đọc. */
@media (max-width: 1000px) {
  .admin-mobilebar {
    display: flex; align-items: center; gap: 12px;
    position: sticky; top: 0; z-index: 55;
    background: var(--white); border-bottom: 1px solid var(--pink-100);
    padding: 10px 16px;
  }
  .admin-mobilebar .logo { text-decoration: none; --wm-size: 23px; }

  .admin-sidebar {
    width: 262px; max-width: 84vw;
    transform: translateX(-100%); transition: transform 0.26s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: 0 0 40px rgba(44, 42, 61, 0.18);
  }
  .admin-sidebar.open { transform: translateX(0); }
  /* Màn hẹp dùng ngăn kéo trượt, không áp dụng trạng thái thu gọn của desktop:
     ngăn kéo luôn mở đủ rộng và hiện đủ chữ. */
  .admin-collapse-btn { display: none; }
  :root.sidebar-collapsed .admin-sidebar { padding-left: 14px; padding-right: 14px; }
  :root.sidebar-collapsed .admin-sidebar-head { flex-direction: row; gap: 6px; padding: 0 6px; }
  :root.sidebar-collapsed .admin-sidebar .logo .word,
  :root.sidebar-collapsed .admin-tabs a span,
  :root.sidebar-collapsed .admin-user-info { display: block; }
  :root.sidebar-collapsed .admin-sidebar .logo .word { display: inline-flex; }
  :root.sidebar-collapsed .admin-sidebar .logo .mark { display: none; }
  :root.sidebar-collapsed .admin-tabs a { justify-content: flex-start; padding: 10px 12px; gap: 11px; }
  :root.sidebar-collapsed .admin-tabs a::after { content: none; }
  :root.sidebar-collapsed .admin-tabs a.active::before { height: 20px; border-radius: 0 3px 3px 0; }
  :root.sidebar-collapsed .admin-user { align-items: flex-start; padding: 14px 12px 4px; }
  :root.sidebar-collapsed .admin-logout { width: 100%; height: auto; padding: 7px 14px; font-size: 13px; }
  :root.sidebar-collapsed .admin-logout::after { content: none; }
  :root.sidebar-collapsed .admin-tab-badge { position: static; min-width: 18px; height: 18px; font-size: 10.5px; padding: 0 5px; }
  .admin-scrim {
    display: block; position: fixed; inset: 0; z-index: 59;
    background: rgba(44, 42, 61, 0.38); opacity: 0; transition: opacity 0.26s ease;
  }
  .admin-scrim.show { opacity: 1; }
  .admin-scrim[hidden] { display: none; }

  .admin-body { padding-left: 0; }
  .admin-body .container { max-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .admin-sidebar, .admin-scrim { transition: none; }
}

@media (max-width: 1120px) {
  .kpi-grid { grid-template-columns: repeat(3, 1fr); }
  .kanban { grid-template-columns: repeat(2, 1fr); }
  /* 2 cột thì mũi tên nối "cột kế tiếp" không còn đúng hướng nữa (xuống dòng) -> ẩn đi */
  .kanban-col::after { display: none; }
  .role-grid { grid-template-columns: repeat(2, 1fr); }
  .settings-grid { grid-template-columns: 1fr; }
  .rev-kpi-grid { grid-template-columns: repeat(2, 1fr); }
  /* Biểu đồ + mục tiêu tháng xuống 1 cột, biểu đồ vẫn cần đủ bề ngang để đọc trục */
  .rev-main { grid-template-columns: 1fr; }
}

/* Ô ngày hẹp lại thì nhãn "Hôm nay" chiếm gần hết dòng đầu, đẩy số đếm lịch
   hẹn ra ngoài - bỏ nhãn đi, viền và chấm hồng vẫn chỉ rõ hôm nay. Bản danh
   sách ở màn hẹp thì mỗi ngày một dòng riêng nên vẫn giữ nhãn. */
@media (max-width: 1100px) {
  .cal-day .cal-today-tag { display: none; }
}

/* Màn hẹp: lưới 7 cột không đọc nổi (mỗi ô còn ~50px), đổi sang danh sách
   theo ngày - vẫn đúng thứ tự giờ sớm tới muộn trong từng ngày. */
@media (max-width: 760px) {
  .cal-wrap { display: none; }
  .cal-agenda { display: flex; }
  .cal-title { font-size: 17px; }
  .cal-count { margin-left: 0; width: 100%; }
  .appt-fields > div { grid-template-columns: 1fr; gap: 2px; }
}

@media (max-width: 720px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .funnel-row .name { width: 90px; font-size: 12px; }
  .dash-two-col { grid-template-columns: 1fr !important; }
}

/* Máy rất hẹp (iPhone SE/5, 320px): kanban 2 cột cần 356px nên đẩy cả trang
   tràn ngang - lỗi có sẵn, phát hiện khi đo lại toàn bộ các mốc màn hình
   2026-09-25. Về 1 cột ở dải này; từ 381px trở lên vẫn 2 cột như cũ. */
@media (max-width: 380px) {
  .kanban { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .kpi-grid { grid-template-columns: 1fr 1fr; }
  .role-grid { grid-template-columns: 1fr; }
  .kanban-photo-grid { grid-template-columns: repeat(2, 1fr); }
  .kanban-modal { padding: 22px 16px; }
  /* 1 cột cho dễ đọc (số tiền dài, 2 cột sẽ vỡ), nhưng thu gọn chiều cao
     lại để 4 thẻ không chiếm gần hết màn hình trước khi tới biểu đồ. */
  .rev-kpi-grid { grid-template-columns: 1fr; gap: 10px; }
  .rev-kpi { padding: 14px 16px 0; }
  .rev-kpi-num { font-size: 23px; margin-top: 8px; }
  .rev-kpi-spark { height: 34px; width: calc(100% + 32px); margin: 8px -16px 0; }
  .rev-card { padding: 16px 14px; }
  .rev-card-head { margin-bottom: 14px; }
  .rev-tabs { width: 100%; }
  .rev-tab { flex: 1; padding: 6px 8px; }
}

/* ---------------------------------- Tin nhắn khách hàng (Sale + Sếp, 2026-09-27) ----------------------------------
   Hộp thư 2 cột: danh sách cuộc trò chuyện | nội dung + ô trả lời. Tin khách bên trái nền trắng,
   tin Sale bên phải nền hồng (cùng quy ước bubble với khung chat phía khách). Màn hẹp xếp dọc. */
.inbox {
  display: grid; grid-template-columns: minmax(240px, 320px) 1fr;
  border: 1px solid var(--pink-100); border-radius: var(--radius-md); overflow: hidden;
  height: min(560px, 70vh); background: var(--white);
}
.inbox-list { overflow-y: auto; border-right: 1px solid var(--pink-100); background: var(--pink-50); }
.inbox-item {
  display: flex; align-items: flex-start; gap: 10px; width: 100%;
  padding: 12px 14px; border: none; border-bottom: 1px solid var(--pink-100);
  background: transparent; text-align: left; cursor: pointer; font: inherit; color: var(--navy-700);
  transition: background 0.15s ease;
}
.inbox-item:hover { background: var(--white); }
.inbox-item.active { background: var(--white); box-shadow: inset 3px 0 0 var(--pink-600); }
.inbox-item .cust-av { width: 36px; height: 36px; font-size: 12.5px; }
.inbox-item-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.inbox-item-top { display: flex; justify-content: space-between; gap: 8px; }
.inbox-item-top strong { font-size: 13.5px; color: var(--navy-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inbox-item-top time { font-size: 11px; color: var(--navy-300); white-space: nowrap; }
.inbox-preview { font-size: 12.5px; color: var(--navy-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inbox-item.unread .inbox-preview { color: var(--navy-900); font-weight: 600; }
.inbox-unread {
  flex-shrink: 0;
  align-self: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  background: var(--pink-600); color: var(--white); font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.inbox-topic {
  align-self: flex-start; font-size: 11px; font-weight: 700; color: var(--pink-700);
  background: var(--pink-100); border-radius: 999px; padding: 2px 8px; white-space: nowrap;
}
.inbox-thread { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.inbox-thread-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 12px 16px; border-bottom: 1px solid var(--pink-100);
}
.inbox-thread-head:empty { display: none; }
.inbox-msgs {
  flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px;
  background: #fcfbfd;
}
.inbox-msg {
  max-width: 72%; padding: 9px 13px; border-radius: 14px; font-size: 13.5px; line-height: 1.5;
  display: flex; flex-direction: column; gap: 3px; word-break: break-word;
}
.inbox-msg.from-khach { align-self: flex-start; background: var(--white); border: 1px solid var(--pink-100); border-bottom-left-radius: 4px; color: var(--navy-900); }
.inbox-msg.from-sale { align-self: flex-end; background: linear-gradient(135deg, var(--pink-500), var(--pink-600)); color: var(--white); border-bottom-right-radius: 4px; }
.inbox-msg-name { font-size: 11px; font-weight: 700; opacity: 0.9; }
/* Bản tóm tắt tự động khi khách chuyển từ trợ lý AI sang Sale: thẻ ghi chú giữa luồng, giữ xuống dòng. */
.inbox-msg.from-system { align-self: stretch; max-width: none; background: #fff8e6; border: 1px dashed #e8c77a; color: var(--navy-900); white-space: pre-line; }
.inbox-msg.from-system .inbox-msg-name { color: #8a5a00; opacity: 1; white-space: normal; }
.inbox-msg time { font-size: 10.5px; opacity: 0.7; align-self: flex-end; }
.inbox-reply { display: flex; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--pink-100); }
.inbox-reply[hidden] { display: none; }
.inbox-reply input {
  flex: 1; min-width: 0; border: 1px solid var(--pink-200); border-radius: 999px;
  padding: 10px 16px; font-family: var(--font-body); font-size: 13.5px;
}
.inbox-reply input:focus { outline: none; border-color: var(--pink-500); }
.inbox-empty { margin: auto; padding: 24px 18px; font-size: 13px; color: var(--navy-500); text-align: center; line-height: 1.55; }
.inbox-note { margin-top: 10px; font-size: 12px; color: var(--navy-300); }
/* Trạng thái kết nối máy chủ chat (server/sale-chat.js). */
.inbox-status { margin-bottom: 12px; padding: 10px 14px; border-radius: var(--radius-sm); font-size: 13px; color: #8a5a00; background: #fff6e0; border: 1px solid #f4e2b8; }
.inbox-status[hidden] { display: none; }
.inbox-status button { border: none; background: none; padding: 0; font: inherit; font-weight: 700; color: var(--pink-700); text-decoration: underline; cursor: pointer; }

.inbox-item-badges { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin: 2px 0 3px; }
.inbox-sale-badge {
  display: inline-flex; align-items: center; font-size: 11px; font-weight: 600;
  color: var(--pink-700); background: var(--pink-100); border-radius: 999px;
  padding: 1px 7px; white-space: nowrap;
}
.inbox-channel-tag {
  display: inline-flex; align-items: center; font-size: 10.5px; font-weight: 500;
  padding: 1px 6px; border-radius: 4px; white-space: nowrap;
}
.inbox-channel-tag.tone-bot { background: #fff0ea; color: #b84318; border: 1px solid #ffd4c4; }
.inbox-channel-tag.tone-direct { background: #eef4ff; color: #275296; border: 1px solid #d0e0fc; }
.inbox-head-user { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.inbox-head-info { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; }
.inbox-sale-chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px;
  background: var(--pink-50); border: 1px solid var(--pink-200); border-radius: 999px;
  font-size: 12px; color: var(--navy-800);
}
.inbox-sale-chip svg { color: var(--pink-600); }
.inbox-sale-chip strong { color: var(--pink-700); }
.inbox-channel-badge {
  display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px;
  background: #f4f5f8; border-radius: var(--radius-sm); font-size: 11.5px; color: var(--navy-600);
}
.dot-online { width: 7px; height: 7px; border-radius: 50%; background: #10b981; display: inline-block; }
.inbox-crm-link {
  font-size: 12px; padding: 4px 10px; text-decoration: none; border-radius: var(--radius-sm);
  border: 1px solid var(--pink-200); color: var(--pink-700); background: var(--white);
  cursor: pointer; transition: all 0.15s ease;
}
.inbox-crm-link:hover { background: var(--pink-50); border-color: var(--pink-500); }
.inbox-boss-bar {
  display: flex; align-items: center; gap: 10px; padding: 12px 16px;
  background: #fdf8fb; border-top: 1px solid var(--pink-100);
  font-size: 12.5px; color: var(--navy-700); line-height: 1.45;
}
.inbox-boss-bar[hidden] { display: none; }
.inbox-boss-bar svg { color: var(--pink-600); flex-shrink: 0; }
.inbox-boss-bar strong { color: var(--pink-700); }

@media (max-width: 760px) {
  .inbox { grid-template-columns: 1fr; grid-template-rows: auto 1fr; height: auto; }
  .inbox-list { max-height: 260px; border-right: none; border-bottom: 1px solid var(--pink-100); }
  .inbox-msgs { height: 360px; flex: none; }
  .inbox-msg { max-width: 86%; }
}

/* Modal kanban: ảnh đã chỉnh gửi khách + trao đổi với khách */
.kanban-result { margin-top: 20px; padding-top: 16px; border-top: 1px dashed var(--pink-100); }
.kanban-result h4 { font-size: 14px; margin: 0 0 8px; color: var(--navy-900); }
.kanban-result h4 + .kanban-chat-list { margin-top: 0; }
.kanban-result-form { display: flex; gap: 8px; }
.kanban-result-form input {
  flex: 1; min-width: 0; padding: 9px 12px; border: 1px solid var(--pink-200); border-radius: var(--radius-sm);
  font-family: var(--font-body); font-size: 13px;
}
.kanban-result-form input:focus { outline: none; border-color: var(--pink-500); }
.kanban-result-form .btn, .kanban-chat-form .btn { flex-shrink: 0; padding: 9px 16px; font-size: 13px; }
.kanban-result-error { font-size: 12px; color: #c62828; margin-top: 6px; }
.kanban-result-hint { font-size: 12px; color: var(--navy-500); margin-top: 6px; }
.kanban-result-current { font-size: 12.5px; color: var(--navy-700); margin: 8px 0 16px; word-break: break-all; }
.kanban-result-current a { color: var(--pink-600); font-weight: 700; }
.kanban-chat-list {
  display: flex; flex-direction: column; gap: 8px; max-height: 240px; overflow-y: auto;
  padding: 12px; border-radius: var(--radius-sm); background: #fffafc; border: 1px solid var(--pink-50);
}
.kanban-chat-empty { font-size: 12.5px; color: var(--navy-500); text-align: center; margin: 8px 0; }
.kanban-msg { max-width: 82%; padding: 7px 11px; border-radius: 12px; font-size: 13px; line-height: 1.45; }
.kanban-msg p { white-space: pre-wrap; word-break: break-word; }
.kanban-msg time { display: block; font-size: 10px; opacity: .7; margin-top: 2px; }
.kanban-msg-name { display: block; font-size: 11px; font-weight: 700; margin-bottom: 1px; }
.kanban-msg.from-customer { align-self: flex-start; background: var(--white); border: 1px solid var(--pink-100); color: var(--navy-900); }
.kanban-msg.from-customer .kanban-msg-name { color: var(--pink-600); }
.kanban-msg.from-staff { align-self: flex-end; background: var(--pink-600); color: var(--white); }
.kanban-chat-form { display: flex; align-items: flex-end; gap: 8px; margin-top: 8px; }
.kanban-chat-form textarea {
  flex: 1; resize: vertical; padding: 8px 12px; border: 1px solid var(--pink-200); border-radius: var(--radius-sm);
  font-family: var(--font-body); font-size: 13px;
}
.kanban-chat-form textarea:focus { outline: none; border-color: var(--pink-500); }
/* Nhắc trên thẻ kanban */
.kanban-card-flags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.kanban-card-flag { font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: var(--radius-pill); }
.kanban-card-flag.reply { background: #fff4e0; color: #b26a00; }
.kanban-card-flag.link { background: #e8f7ec; color: #1f7a3a; }
.photo-row-card-flags { margin: -4px 0 9px; }
@media (max-width: 560px) {
  .kanban-result-form { flex-direction: column; }
}

/* Chat trong modal: tin của Trợ lý AI + nhãn cần thợ trả lời + lý do chưa chuyển bước */
.kanban-msg.from-ai { align-self: flex-start; background: #f3f1fb; border: 1px solid #e3def6; color: var(--navy-900); }
.kanban-msg.from-ai .kanban-msg-name { color: #5b4bb7; }
.kanban-msg-tag { display: inline-block; margin-top: 4px; font-size: 10px; font-weight: 800; padding: 1px 8px; border-radius: var(--radius-pill); background: #fff4e0; color: #b26a00; }
.kanban-advance-hint { font-size: 12px; color: #b26a00; margin: 6px 0 0; text-align: center; }

/* ---------------------------------- Hiệu suất Đội ngũ Sale trên Dashboard Sếp ---------------------------------- */
.sale-perf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
  margin-top: 14px;
}
.sale-perf-card {
  background: var(--white);
  border: 1px solid var(--pink-100);
  border-radius: var(--radius-md);
  padding: 16px;
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform 0.2s, box-shadow 0.2s;
}
.sale-perf-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}
.sale-perf-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.sale-perf-av {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 13px;
  background: var(--pink-100);
  color: var(--pink-700);
  flex-shrink: 0;
}
.sale-perf-name {
  font-weight: 700;
  font-size: 14px;
  color: var(--navy-900);
}
.sale-perf-role {
  font-size: 11.5px;
  color: var(--navy-500);
}
.sale-perf-track {
  background: var(--pink-50);
  border-radius: var(--radius-pill);
  height: 8px;
  overflow: hidden;
}
.sale-perf-fill {
  height: 100%;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--pink-500), var(--pink-600));
  transition: width 0.8s ease;
}
.sale-perf-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--navy-500);
}
.sale-perf-stat-row strong {
  color: var(--navy-900);
}
.sale-perf-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
}

/* Yêu cầu chuyển giao khách chờ duyệt */
.sale-transfer-card {
  background: var(--white);
  border: 1px solid var(--pink-100);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  box-shadow: var(--shadow-soft);
  flex-wrap: wrap;
}
.sale-transfer-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.sale-transfer-title {
  font-weight: 700;
  font-size: 13.5px;
  color: var(--navy-900);
}
.sale-transfer-desc {
  font-size: 12px;
  color: var(--navy-500);
}
/* ---------------- Khách hàng: Bảng giai đoạn + Danh sách (Sếp + Sale, 2026-10-12) ----------------
   Bố cục giống trang Khách hàng của Không gian Sale (css/sale.css: .kb-*, .cu-*) nhưng viết
   riêng, gói trong .ck, vì sale.css có quy tắc toàn trang (svg, body...) sẽ làm vỡ admin.
   Màu tag/trạng thái lấy đúng bảng tone của Không gian Sale; màu nhấn dùng hồng của admin.
   Markup do crm/js/admin.js dựng vào #custView. */
.ck {
  --ck-line: #ece4ea; --ck-line-2: #f3edf1; --ck-soft: #faf6f8; --ck-muted: var(--navy-500);
  --ck-red: #ae3a2d; --ck-red-soft: #f8dfda; --ck-amber: #7a5608; --ck-amber-soft: #fbefd2;
  --ck-blue: #2e5a8c; --ck-blue-soft: #e1eaf5; --ck-teal: #1f6b63; --ck-teal-soft: #dcede8;
  --ck-peach: #9c4522; --ck-peach-soft: #f5e2d7; --ck-purple: #5b4a99; --ck-purple-soft: #e8e3f5;
  --ck-beige: #5e5448; --ck-beige-soft: #ece5db;
  font-family: var(--font-body); font-size: 14px; color: var(--navy-900);
}
.ck svg { width: 16px; height: 16px; flex-shrink: 0; }
.ck button, .ck select, .ck input { font: inherit; color: inherit; }
.ck-muted { color: var(--ck-muted); }
.ck-block { display: block; }
.ck-empty { color: var(--ck-muted); text-align: center; padding: 20px 10px; margin: 0; font-size: 13px; }

/* Thanh công cụ */
.ck-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; }
.ck-seg { display: inline-flex; gap: 2px; background: var(--ck-beige-soft); border-radius: 12px; padding: 3px; margin-right: 6px; }
.ck-seg button { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; border: 0; border-radius: 9px; background: transparent; color: var(--ck-muted); font-weight: 600; font-size: 13px; cursor: pointer; white-space: nowrap; }
.ck-seg button.on { background: var(--white); color: var(--navy-900); box-shadow: 0 1px 3px rgba(44, 42, 61, .14); }
.ck-pill { display: inline-flex; align-items: center; gap: 6px; background: var(--white); border: 1px solid var(--ck-line); border-radius: 10px; height: 38px; padding: 0 12px; font-weight: 600; font-size: 13px; cursor: pointer; white-space: nowrap; }
.ck-pill svg { width: 14px; height: 14px; color: var(--ck-muted); }
.ck-pill select { border: 0; background: transparent; font-weight: 600; outline: 0; cursor: pointer; padding: 0; }
.ck-pill.on { background: var(--pink-50); border-color: var(--pink-400); color: var(--pink-700); }
.ck-search { cursor: text; }
.ck-search input { border: 0; outline: 0; background: transparent; width: 170px; font-weight: 500; }
.ck-stats { margin: 0 0 0 auto; color: var(--ck-muted); font-size: 13px; }
.ck-stats strong { color: var(--navy-900); }

/* Tag / badge / màu trạng thái */
.ck-tag { display: inline-flex; align-items: center; border-radius: 999px; padding: 3px 9px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.ck .tone-red { background: var(--ck-red-soft); color: var(--ck-red); }
.ck .tone-amber { background: var(--ck-amber-soft); color: var(--ck-amber); }
.ck .tone-blue { background: var(--ck-blue-soft); color: var(--ck-blue); }
.ck .tone-green, .ck .tone-teal { background: var(--ck-teal-soft); color: var(--ck-teal); }
.ck .tone-muted, .ck .tone-beige { background: var(--ck-beige-soft); color: var(--ck-beige); }
.ck .tone-peach, .ck .tone-accent { background: var(--ck-peach-soft); color: var(--ck-peach); }
.ck .tone-purple { background: var(--ck-purple-soft); color: var(--ck-purple); }
.ck .c-red { color: var(--ck-red); }
.ck .c-amber { color: var(--ck-amber); }
.ck .c-blue { color: var(--ck-blue); }
.ck .c-teal, .ck .c-green { color: var(--ck-teal); }
.ck .c-muted { color: var(--ck-muted); }

/* Bảng giai đoạn (kanban 5 cột) */
.ck-board { display: grid; grid-template-columns: repeat(5, minmax(200px, 1fr)); gap: 16px; overflow-x: auto; padding-bottom: 8px; }
.ck-col { min-width: 0; }
.ck-col header { display: flex; justify-content: space-between; align-items: center; padding: 4px 4px 10px; }
.ck-col h3 { font-family: var(--font-heading); font-size: 14.5px; font-weight: 700; margin: 0; }
.ck-col header span { background: var(--ck-beige-soft); border-radius: 999px; font-size: 12px; font-weight: 600; padding: 1px 8px; }
.ck-card { background: var(--white); border: 1px solid var(--ck-line); border-radius: 16px; box-shadow: 0 1px 2px rgba(44, 42, 61, .04); padding: 14px; margin-bottom: 12px; }
.ck-card-ro { background: var(--ck-soft); }
.ck-card-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; }
.ck-card-top strong { font-size: 14px; min-width: 0; }
.ck-card > small { display: block; font-size: 12.5px; }
.ck-status { display: flex; align-items: center; gap: 6px; margin: 8px 0 12px; font-size: 13px; font-weight: 600; }
.ck-status svg { width: 15px; height: 15px; }
.ck-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ck-owner { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ck-muted); min-width: 0; }
.ck-owner svg { width: 13px; height: 13px; }
.ck-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--ck-line); background: var(--white); font-weight: 600; font-size: 13px; cursor: pointer; white-space: nowrap; transition: background .15s; }
.ck-btn:hover { background: var(--pink-50); border-color: var(--pink-200); color: var(--pink-700); }
.ck-btn-sm { height: 30px; padding: 0 10px; font-size: 12.5px; }
.ck-btn-sm svg { width: 14px; height: 14px; }
/* Nút Xem thêm / Thu gọn dưới mỗi cột Bảng giai đoạn và dưới bảng Danh sách */
.ck-more { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.ck-more:empty { display: none; }
.ck-panel .ck-more { margin-top: 14px; }
.ck-col .ck-more .ck-btn { flex: 1 1 auto; }
.ck-more .ck-muted { font-weight: 500; }

/* Danh sách + hồ sơ */
.ck-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
.ck-panel { background: var(--white); border: 1px solid var(--ck-line); border-radius: 16px; box-shadow: 0 1px 2px rgba(44, 42, 61, .04); padding: 18px 20px; min-width: 0; }
.ck-aside { position: sticky; top: 16px; }
.ck-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ck-chip { border: 0; background: var(--ck-beige-soft); color: var(--navy-700); border-radius: 999px; padding: 5px 11px; font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.ck-chip.on { background: var(--navy-900); color: var(--white); }
.ck-rule { color: var(--ck-muted); font-size: 12.5px; margin: 10px 0 4px; }
.ck-table-wrap { overflow-x: auto; }
.ck-table { width: 100%; min-width: 680px; border-collapse: collapse; table-layout: fixed; font-size: 13.5px; }
.ck-table th { text-align: left; font-weight: 500; color: var(--ck-muted); font-size: 12.5px; padding: 10px; border-bottom: 1px solid var(--ck-line); }
.ck-table th:nth-child(1) { width: 32%; }
.ck-table th:nth-child(2) { width: 15%; }
.ck-table th:nth-child(3) { width: 19%; }
.ck-table th:nth-child(5) { width: 13%; }
.ck-table td { padding: 12px 10px; border-bottom: 1px solid var(--ck-line-2); vertical-align: middle; overflow-wrap: anywhere; }
.ck-row { cursor: pointer; }
.ck-row:hover td { background: var(--ck-soft); }
.ck-row.on td { background: var(--pink-50); }
.ck-row.on td:first-child { box-shadow: inset 3px 0 0 var(--pink-600); }
.ck-link { border: 0; background: none; padding: 0; cursor: pointer; text-align: left; }
.ck-link:hover strong { color: var(--pink-700); }
.ck-next { font-weight: 600; font-size: 13.5px; }
.ck-detail h3 { font-family: var(--font-heading); font-size: 18px; font-weight: 700; margin: 0; }
.ck-id { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.ck-id p { margin: 2px 0 0; font-size: 13px; }
.ck-avatar { width: 46px; height: 46px; font-size: 15px; }
.ck-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.ck-ro { display: flex; align-items: flex-start; gap: 6px; margin: 12px 0 0; font-size: 12.5px; color: var(--ck-muted); }
.ck-ro svg { width: 14px; height: 14px; margin-top: 1px; }
.ck-soft { background: var(--ck-soft); border-radius: 12px; padding: 12px 14px; margin: 14px 0; }
.ck-label { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ck-muted); margin: 16px 0 8px; }
.ck-soft .ck-label { margin-top: 0; }
.ck-baby { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ck-baby span { font-size: 13px; }
.ck-offer { display: flex; align-items: center; gap: 8px; background: var(--white); border: 1px solid var(--ck-line); border-radius: 12px; padding: 9px 12px; margin: 10px 0 0; font-size: 13px; }
.ck-offer svg { color: var(--pink-600); }
.ck-stats-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ck-stats-3 strong { display: block; font-family: var(--font-heading); font-size: 18px; }
.ck-stats-3 small { color: var(--ck-muted); font-size: 12px; }
.ck-detail .ck-status { margin: 0; flex-wrap: wrap; }
.ck-log { list-style: none; margin: 0; padding: 0 0 0 16px; border-left: 2px solid var(--ck-line-2); }
.ck-log li { position: relative; padding: 0 0 14px 8px; }
.ck-log li::before { content: ""; position: absolute; left: -22px; top: 5px; width: 9px; height: 9px; border-radius: 50%; background: var(--ck-teal); }
.ck-log li.sale::before { background: var(--pink-600); }
.ck-log time { font-weight: 700; font-size: 13px; }
.ck-log p { margin: 4px 0 0; font-size: 13px; }
.ck-note { margin: 0; border: 1px dashed var(--ck-line); border-radius: 12px; padding: 10px 12px; font-size: 13.5px; color: var(--navy-700); white-space: pre-line; }

/* Màn hẹp: hồ sơ xuống dưới bảng; điện thoại: kanban cuộn ngang từng cột */
@media (max-width: 1180px) {
  .ck-layout { grid-template-columns: minmax(0, 1fr); }
  .ck-aside { position: static; }
  .ck-stats { margin-left: 0; width: 100%; }
}
@media (max-width: 760px) {
  .ck-seg { width: 100%; margin-right: 0; }
  .ck-seg button { flex: 1; justify-content: center; }
  .ck-pill { flex: 1 1 auto; }
  .ck-pill select { min-width: 0; flex: 1; }
  .ck-search input { width: 100%; }
  .ck-board { grid-template-columns: repeat(5, 78vw); scroll-snap-type: x mandatory; }
  .ck-col { scroll-snap-align: start; }
  .ck-panel { padding: 14px; }
}

/* =========================================================================
   BỘ CHỌN THỢ CHỈNH ẢNH (3 ô thợ chỉnh + ô Tất cả). Chép từ nhánh Thợ ảnh (7ee735d),
   tích hợp vào trang Sếp 2026-10-15. Thợ CHỈNH ảnh, khác thợ CHỤP trong Lịch hẹn.
   ========================================================================= */

/* Thanh chứa 4 ô (Tất cả + Thợ chỉnh 1..3), 2 cột trên màn hẹp */
.photo-worker-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 22px;
}

/* Mỗi ô thợ */
.photo-worker-card {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 16px 12px 14px;
  background: var(--white);
  border: 2px solid var(--pink-100);
  border-radius: 16px;
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s, transform .15s, background .2s;
  font: inherit;
  position: relative;
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
}
.photo-worker-card:hover {
  border-color: var(--pink-400);
  box-shadow: 0 6px 20px rgba(0,0,0,.1);
  transform: translateY(-2px);
}
.photo-worker-card:active { transform: scale(0.97); }

/* Trạng thái đang chọn */
.photo-worker-card.active {
  border-color: var(--pink-600);
  background: linear-gradient(160deg, #fff0f6 0%, #fff8fb 100%);
  box-shadow: 0 4px 16px rgba(233,30,140,.15);
}
.photo-worker-card.active::after {
  content: '';
  position: absolute; bottom: -1px; left: 50%; transform: translateX(-50%);
  width: 36px; height: 3px; border-radius: 2px 2px 0 0;
  background: var(--pink-600);
}

/* Icon vòng tròn màu nền */
.photo-worker-icon {
  width: 48px; height: 48px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  background: var(--pink-50);
  border: 2px solid var(--pink-100);
  transition: background .2s, border-color .2s;
}
.photo-worker-icon svg { width: 22px; height: 22px; color: var(--pink-600); }
.photo-worker-icon--1 { background: #eff6ff; border-color: #bfdbfe; }
.photo-worker-icon--1 svg { color: #2563eb; }
.photo-worker-icon--2 { background: #fdf4ff; border-color: #e9d5ff; }
.photo-worker-icon--2 svg { color: #9333ea; }
.photo-worker-icon--3 { background: #f0fdf4; border-color: #bbf7d0; }
.photo-worker-icon--3 svg { color: #16a34a; }

/* Tên thợ lớn */
.photo-worker-name {
  font-size: 14px; font-weight: 800;
  color: var(--navy-900); letter-spacing: .01em;
}
/* Họ tên riêng nhỏ hơn */
.photo-worker-sub {
  font-size: 11.5px; font-weight: 500; color: var(--navy-500);
  line-height: 1;
}

/* Badge số đơn */
.photo-worker-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 24px; height: 20px; padding: 0 7px;
  border-radius: var(--radius-pill);
  font-size: 11px; font-weight: 700;
  background: var(--pink-100); color: var(--pink-700);
  transition: background .2s, color .2s;
}
.photo-worker-card.active .photo-worker-count {
  background: var(--pink-600); color: var(--white);
}
.photo-worker-card:nth-child(2).active .photo-worker-count { background: #2563eb; }
.photo-worker-card:nth-child(3).active .photo-worker-count { background: #9333ea; }
.photo-worker-card:nth-child(4).active .photo-worker-count { background: #16a34a; }
.photo-worker-card:nth-child(2).active { border-color: #2563eb; box-shadow: 0 4px 16px rgba(37,99,235,.15); }
.photo-worker-card:nth-child(3).active { border-color: #9333ea; box-shadow: 0 4px 16px rgba(147,51,234,.15); }
.photo-worker-card:nth-child(4).active { border-color: #16a34a; box-shadow: 0 4px 16px rgba(22,163,74,.15); }
.photo-worker-card:nth-child(2).active::after { background: #2563eb; }
.photo-worker-card:nth-child(3).active::after { background: #9333ea; }
.photo-worker-card:nth-child(4).active::after { background: #16a34a; }

/* Nhãn thợ đang xem hiện phía trên 3 hàng */
.photo-worker-label {
  font-size: 13px; font-weight: 700; color: var(--navy-700);
  margin-bottom: 14px; padding: 8px 14px;
  background: var(--pink-50); border-radius: var(--radius-sm);
  border-left: 3px solid var(--pink-600);
  display: none;
}
.photo-worker-label.visible { display: block; }
.photo-worker-label .pwl-name { color: var(--pink-700); }

/* Responsive: 2 cột trên tablet nhỏ */
@media (max-width: 700px) {
  .photo-worker-bar { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .photo-worker-icon { width: 42px; height: 42px; }
  .photo-worker-icon svg { width: 19px; height: 19px; }
  .photo-worker-name { font-size: 13px; }
}
@media (max-width: 360px) {
  .photo-worker-bar { grid-template-columns: 1fr 1fr; gap: 8px; }
  .photo-worker-card { padding: 12px 8px 10px; }
}


.photo-row--urgent  { --row-accent: #e53935; --row-accent-mid: #ef5350; --row-bg: #fff5f5; --row-border: rgba(229,57,53,.22); --row-badge-bg: #ffeaea; --row-badge-color: #c62828; --row-more-bg: rgba(229,57,53,.06); --row-more-border: rgba(229,57,53,.28); --row-more-color: #c62828; --row-card-border: rgba(229,57,53,.18); }
.photo-row--medium  { --row-accent: #f59e0b; --row-accent-mid: #fbbf24; --row-bg: #fffbf0; --row-border: rgba(245,158,11,.22); --row-badge-bg: #fff8e1; --row-badge-color: #b45309; --row-more-bg: rgba(245,158,11,.06); --row-more-border: rgba(245,158,11,.28); --row-more-color: #b45309; --row-card-border: rgba(245,158,11,.18); }
.photo-row--normal  { --row-accent: #16a34a; --row-accent-mid: #22c55e; --row-bg: #f0fdf4; --row-border: rgba(22,163,74,.2); --row-badge-bg: #dcfce7; --row-badge-color: #166534; --row-more-bg: rgba(22,163,74,.06); --row-more-border: rgba(22,163,74,.25); --row-more-color: #166534; --row-card-border: rgba(22,163,74,.16); }

/* Container toàn bộ 3 hàng */
.photo-rows { display: flex; flex-direction: column; gap: 20px; }

/* Mỗi hàng ưu tiên */
.photo-row {
  background: var(--row-bg); border-radius: 14px;
  border: 1.5px solid var(--row-border);
  padding: 16px 16px 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
}

/* Header hàng: badge + số lượng */
.photo-row-header {
  display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
}
.photo-row-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 13px; font-weight: 700; letter-spacing: .01em;
  background: var(--row-badge-bg); color: var(--row-badge-color);
  padding: 4px 12px; border-radius: var(--radius-pill);
  border: 1.5px solid var(--row-border);
}
.photo-row-count {
  font-size: 12px; font-weight: 700; color: var(--row-badge-color);
  background: var(--white); padding: 2px 10px; border-radius: var(--radius-pill);
  border: 1.5px solid var(--row-border);
}

/* Lưới 3 card / hàng, chiều cao bằng nhau qua align-items: stretch */
.photo-row-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  align-items: stretch;
}

/* Mỗi card ảnh */
.photo-row-card {
  background: var(--white);
  border-radius: 14px;
  border: 1.5px solid var(--row-card-border);
  box-shadow: 0 2px 10px rgba(0,0,0,.07);
  padding: 14px 14px 12px;
  cursor: pointer;
  display: flex; flex-direction: column;
  transition: box-shadow .2s, border-color .2s, transform .15s;
  position: relative;
  min-height: 160px;
}
.photo-row-card:hover, .photo-row-card:focus-visible {
  border-color: var(--row-accent);
  box-shadow: 0 6px 20px rgba(0,0,0,.13);
  outline: none;
}
.photo-row-card:active { transform: scale(0.985); }

/* Số thứ tự nhỏ góc phải trên */
.photo-row-card-num {
  position: absolute; top: 10px; right: 10px;
  font-size: 10px; font-weight: 700; color: var(--row-accent);
  background: var(--row-badge-bg); border: 1.5px solid var(--row-card-border);
  border-radius: var(--radius-pill); padding: 1px 8px; line-height: 1.6;
}

/* Mã khách hàng nổi bật */
.photo-row-card-code {
  font-size: 15px; font-weight: 800; color: var(--navy-900);
  letter-spacing: .01em; margin: 0 0 9px; padding-right: 38px;
}

/* Metadata: ngày chụp, hạn chụp */
.photo-row-card-meta { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; flex: 1; }
.photo-row-card-meta-row {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--navy-700);
}
.photo-row-card-meta-row svg { width: 13px; height: 13px; flex-shrink: 0; color: var(--row-accent); }
.photo-row-card-meta-row strong { color: var(--navy-900); font-weight: 600; }

/* Progress bar + label */
.photo-row-progress-wrap { margin-top: auto; padding-top: 8px; }
.photo-row-progress-label { font-size: 11px; color: var(--navy-500); margin-bottom: 4px; }
.photo-row-progress-track {
  height: 6px; border-radius: var(--radius-pill);
  background: var(--row-badge-bg); overflow: hidden;
}
.photo-row-progress-fill {
  height: 100%; border-radius: var(--radius-pill);
  background: var(--row-accent);
  transition: width .35s ease;
}
.photo-row-progress-fill.done { background: linear-gradient(90deg, #4fc98a, #16a34a); }

/* Nút "Xem thêm" full-width */
.photo-row-more {
  display: block; width: 100%; margin-top: 12px;
  padding: 10px 16px; text-align: center;
  font-size: 13px; font-weight: 700; letter-spacing: .01em;
  color: var(--row-more-color); background: var(--row-more-bg);
  border: 1.5px solid var(--row-more-border); border-radius: 10px;
  cursor: pointer; transition: background .2s, border-color .2s;
}
.photo-row-more:hover { background: var(--row-badge-bg); border-color: var(--row-accent); }
.photo-row-more:active { transform: scale(0.98); }

/* Trạng thái không có card nào trong hàng */
.photo-row-empty {
  grid-column: 1 / -1; text-align: center; font-size: 13px;
  color: var(--navy-500); padding: 20px 0;
}

/* ---- Responsive ---- */

/* Tablet: 2 card / hàng */
@media (max-width: 960px) {
  .photo-row-cards { grid-template-columns: repeat(2, 1fr); }
}

/* Mobile: 1 card / hàng */
@media (max-width: 560px) {
  .photo-row-cards { grid-template-columns: 1fr; }
  .photo-row { padding: 14px 12px 10px; }
}

/* =========================================================================
   NÚT "GỬI LINK DRIVE" trên thẻ, chỉ Thợ ảnh thấy (Sếp chỉ xem)
   ========================================================================= */
.photo-row-drive-btn {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; margin-top: 10px; padding: 9px 12px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .01em;
  color: #fff;
  background: linear-gradient(135deg, #16a34a 0%, #059669 100%);
  border: none; border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(22,163,74,.35);
  transition: filter .18s, transform .15s, box-shadow .18s;
}
.photo-row-drive-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.photo-row-drive-btn:hover { filter: brightness(1.08); box-shadow: 0 5px 16px rgba(22,163,74,.45); }
.photo-row-drive-btn:active { transform: scale(0.97); filter: brightness(0.95); }
.photo-row-drive-btn.sent {
  background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%);
  box-shadow: 0 3px 10px rgba(37,99,235,.35);
}
.photo-row-drive-btn.sent:hover { box-shadow: 0 5px 16px rgba(37,99,235,.45); }

/* =========================================================================
   MINI MODAL: gửi link Drive (ảnh đã chỉnh cho khách + ảnh gốc nội bộ)
   ========================================================================= */
.drive-modal-overlay {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(10, 10, 20, 0.6);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .22s ease, visibility .22s ease;
}
.drive-modal-overlay.open {
  opacity: 1; visibility: visible; pointer-events: auto;
}
.drive-modal {
  background: #fff; border-radius: 20px;
  padding: 32px 28px 26px;
  width: 100%; max-width: 460px;
  position: relative;
  box-shadow: 0 24px 60px rgba(0,0,0,.22), 0 4px 12px rgba(0,0,0,.1);
  transform: translateY(18px) scale(0.97);
  transition: transform .25s cubic-bezier(.22,1,.36,1);
}
.drive-modal-overlay.open .drive-modal { transform: translateY(0) scale(1); }

.drive-modal-close {
  position: absolute; top: 14px; right: 14px;
  width: 30px; height: 30px; border-radius: 50%; border: none;
  background: #f3f4f6; color: #374151; font-size: 18px; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.drive-modal-close:hover { background: #e5e7eb; }

.drive-modal-icon {
  width: 52px; height: 52px; border-radius: 14px; margin: 0 auto 16px;
  background: linear-gradient(135deg, #dcfce7, #bbf7d0);
  display: flex; align-items: center; justify-content: center;
}
.drive-modal-icon svg { width: 26px; height: 26px; color: #16a34a; }

.drive-modal h3 {
  text-align: center; font-size: 18px; font-weight: 800;
  color: #111827; margin: 0 0 4px;
}
.drive-modal-order {
  text-align: center; font-size: 13px; color: #6b7280; margin: 0 0 20px;
}

.drive-modal-label {
  display: block; font-size: 13px; font-weight: 700; color: #374151; margin-bottom: 8px;
}
.drive-modal-input-wrap {
  display: flex; align-items: center; gap: 0;
  border: 1.5px solid #d1d5db; border-radius: 10px; overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
}
.drive-modal-input-wrap:focus-within {
  border-color: #16a34a;
  box-shadow: 0 0 0 3px rgba(22,163,74,.15);
}
.drive-modal-input-icon {
  width: 16px; height: 16px; flex-shrink: 0; color: #9ca3af; margin: 0 10px;
}
#driveModalInput, #driveModalInputOriginal {
  flex: 1; border: none; outline: none; background: transparent;
  font-size: 13px; padding: 10px 12px 10px 0; color: #111827; font-family: inherit;
}
#driveModalInput::placeholder, #driveModalInputOriginal::placeholder { color: #9ca3af; }

/* Drive modal có 2 link input: cho phép cuộn nếu không đủ chỗ */
.drive-modal { max-height: 90vh; overflow-y: auto; }

.drive-modal-hint {
  font-size: 12px; color: #6b7280; margin: 8px 0 0; line-height: 1.55;
}
.drive-modal-error {
  font-size: 12px; color: #dc2626; margin: 8px 0 0;
  background: #fef2f2; border: 1px solid #fecaca;
  border-radius: 8px; padding: 6px 10px; line-height: 1.5;
}
.drive-modal-error code { font-family: monospace; font-size: 11px; }


.drive-modal-actions {
  display: flex; gap: 10px; margin-top: 20px;
}
.drive-modal-cancel {
  flex: 1; padding: 11px; border-radius: 10px;
  border: 1.5px solid #e5e7eb; background: #f9fafb;
  color: #374151; font-size: 13.5px; font-weight: 600; cursor: pointer;
  transition: background .15s, border-color .15s;
}
.drive-modal-cancel:hover { background: #f3f4f6; border-color: #d1d5db; }
.drive-modal-submit {
  flex: 2; display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 11px 16px; border-radius: 10px; border: none;
  background: linear-gradient(135deg, #16a34a 0%, #059669 100%);
  color: #fff; font-size: 13.5px; font-weight: 700; cursor: pointer;
  box-shadow: 0 4px 12px rgba(22,163,74,.4);
  transition: filter .15s, box-shadow .15s, transform .12s;
}
.drive-modal-submit svg { width: 15px; height: 15px; }
.drive-modal-submit:hover { filter: brightness(1.07); box-shadow: 0 6px 18px rgba(22,163,74,.5); }
.drive-modal-submit:active { transform: scale(0.97); }

/* Trạng thái đã gửi: đổi màu nút sang xanh dương */
.drive-modal-submit.sent {
  background: linear-gradient(135deg, #1d4ed8, #2563eb);
  box-shadow: 0 4px 12px rgba(37,99,235,.4);
}

/* Nút Hoàn tất: chỉ hiện khi đã có link ẢNH ĐÃ CHỈNH hợp lệ (link ảnh gốc tuỳ chọn) */
.drive-modal-complete-btn {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 16px; border-radius: 12px; border: 2px solid #15803d;
  background: linear-gradient(135deg, #f0fdf4, #dcfce7);
  color: #15803d; font-size: 14px; font-weight: 800; cursor: pointer;
  letter-spacing: .01em;
  box-shadow: 0 3px 12px rgba(22,163,74,.2);
  transition: background .18s, box-shadow .18s, transform .12s;
  animation: complete-btn-in .35s cubic-bezier(.22,1,.36,1) both;
}
.drive-modal-complete-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.drive-modal-complete-btn:hover {
  background: linear-gradient(135deg, #dcfce7, #bbf7d0);
  box-shadow: 0 6px 18px rgba(22,163,74,.35);
}
.drive-modal-complete-btn:active { transform: scale(0.97); }
@media (prefers-reduced-motion: reduce) { .drive-modal-complete-btn { animation: none; } }

/* Khung "Link Drive gửi khách" trong modal chi tiết: 2 dòng link + nút mở drive modal */
.kanban-result-link-row { display: block; margin-top: 4px; }
.kanban-result-link-row em { color: #94a3b8; font-style: normal; }
@keyframes complete-btn-in {
  from { opacity: 0; transform: translateY(8px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Hàng filename + nút download trong ô ảnh modal */
.photo-file-row {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  padding: 5px 6px 2px; border-top: 1px solid var(--pink-100);
  background: #fafafa;
}
.photo-filename {
  font-size: 10.5px; font-weight: 700; color: var(--navy-700);
  letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex: 1;
  font-family: 'Courier New', monospace;
}
.photo-download-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 7px; flex-shrink: 0;
  background: var(--pink-50); border: 1.5px solid var(--pink-200);
  color: var(--pink-700); text-decoration: none;
  transition: background .15s, border-color .15s, transform .12s;
}
.photo-download-btn svg { width: 13px; height: 13px; }
.photo-download-btn:hover {
  background: var(--pink-100); border-color: var(--pink-400);
  transform: translateY(-1px);
}
.photo-download-btn:active { transform: scale(0.93); }


@media (max-width: 480px) {
  .drive-modal { padding: 24px 18px 20px; border-radius: 16px; }
  .drive-modal-actions { flex-direction: column; }
  .drive-modal-cancel, .drive-modal-submit { flex: none; width: 100%; }
}

/* =========================================================================
   BẢNG ĐÃ HOÀN TẤT (#hoan-tat)
   ========================================================================= */

/* Thanh tóm tắt trên bảng */
.completed-summary {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: linear-gradient(135deg, #f0fdf4, #dcfce7);
  border: 1.5px solid #bbf7d0; border-radius: 12px;
  padding: 10px 16px; margin-bottom: 16px; font-size: 13px;
}
.completed-summary-num {
  font-size: 22px; font-weight: 800; color: #15803d; line-height: 1;
}
.completed-summary-label { color: #374151; font-weight: 500; }

/* Wrapper cuộn ngang */
.completed-table-wrap { overflow-x: auto; border-radius: 14px; }

/* Bảng chính */
.completed-table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  font-size: 13px; min-width: 760px;
}
.completed-table thead tr {
  background: linear-gradient(135deg, #1e293b, #334155);
}
.completed-table thead th {
  padding: 12px 14px; text-align: left;
  font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: #cbd5e1; border-bottom: none; white-space: nowrap;
}
.completed-table thead th:first-child { border-radius: 12px 0 0 0; }
.completed-table thead th:last-child  { border-radius: 0 12px 0 0; }

/* Cột cố định chiều rộng */
.ct-stt    { width: 48px; text-align: center !important; }
.ct-code   { min-width: 130px; }
.ct-worker { width: 130px; text-align: center !important; }
.ct-shoot  { width: 110px; }
.ct-done   { width: 130px; }
.ct-photos { width: 110px; text-align: center !important; }
.ct-link   { min-width: 160px; }

/* Rows */
.completed-table tbody tr {
  transition: background .15s;
}
.completed-table tbody tr:nth-child(odd)  { background: #fff; }
.completed-table tbody tr:nth-child(even) { background: #f8fafc; }
.completed-table tbody tr:hover { background: #f0fdf4; }

.completed-table tbody td {
  padding: 12px 14px; border-bottom: 1px solid #f1f5f9;
  vertical-align: middle; color: #374151;
}
.completed-table tbody tr:last-child td { border-bottom: none; }
.completed-table tbody tr:last-child td:first-child { border-radius: 0 0 0 12px; }
.completed-table tbody tr:last-child td:last-child  { border-radius: 0 0 12px 0; }

/* STT */
.ct-stt-val {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: #e2e8f0; color: #475569; font-size: 12px; font-weight: 700;
}

/* Mã khách hàng */
.ct-code-val {
  font-weight: 800; font-size: 13.5px; color: #0f172a; letter-spacing: .01em;
}
.ct-name-val {
  font-size: 11.5px; color: #64748b; margin-top: 2px;
}

/* Ngày */
.ct-date-val {
  display: flex; align-items: center; gap: 5px; font-size: 12.5px; color: #334155;
}
.ct-date-val svg { width: 12px; height: 12px; flex-shrink: 0; color: #94a3b8; }

/* Nút xem ảnh */
.ct-view-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px; border-radius: 8px; border: 1.5px solid #e2e8f0;
  background: #f8fafc; color: #334155; font-size: 12px; font-weight: 700;
  cursor: pointer; transition: background .15s, border-color .15s, color .15s;
  white-space: nowrap;
}
.ct-view-btn svg { width: 13px; height: 13px; }
.ct-view-btn:hover { background: #eff6ff; border-color: #93c5fd; color: #1d4ed8; }

/* Link Drive */
.ct-link-val {
  display: flex; align-items: center; gap: 5px;
}
.ct-link-anchor {
  font-size: 12px; color: #2563eb; text-decoration: underline;
  text-underline-offset: 2px; word-break: break-all;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ct-link-anchor:hover { color: #1d4ed8; }
.ct-link-copy {
  flex-shrink: 0; padding: 4px 7px; border-radius: 6px; border: 1px solid #e2e8f0;
  background: #f1f5f9; color: #64748b; font-size: 10.5px; font-weight: 700;
  cursor: pointer; transition: background .12s;
}
.ct-link-copy:hover { background: #e2e8f0; color: #334155; }
.ct-link-none { font-size: 12px; color: #94a3b8; font-style: italic; }

/* Badge thợ phụ trách trong bảng Đã hoàn tất */
.ct-worker-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: var(--radius-pill);
  font-size: 11.5px; font-weight: 700; white-space: nowrap;
  border: 1.5px solid transparent;
}
/* Thợ chỉnh 1: xanh dương */
.ct-worker-1 { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
/* Thợ chỉnh 2: tím */
.ct-worker-2 { background: #faf5ff; color: #7c3aed; border-color: #ddd6fe; }
/* Thợ chỉnh 3: xanh lá */
.ct-worker-3 { background: #f0fdf4; color: #15803d; border-color: #bbf7d0; }
/* Chưa phân công */
.ct-worker-none { background: #f8fafc; color: #94a3b8; border-color: #e2e8f0; font-style: italic; }

/* Empty state */
.completed-empty {
  text-align: center; font-size: 13.5px; color: #64748b; padding: 40px 20px;
  background: #f8fafc; border-radius: 14px; border: 1.5px dashed #e2e8f0;
  line-height: 1.7; margin-top: 4px;
}

/* =========================================================================
   POPUP XEM ẢNH GỐC + NOTE (photo-preview)
   ========================================================================= */
.photo-preview-overlay {
  position: fixed; inset: 0; z-index: 350;
  background: rgba(5, 10, 20, 0.72);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .22s ease, visibility .22s ease;
}
.photo-preview-overlay.open {
  opacity: 1; visibility: visible; pointer-events: auto;
}
.photo-preview-modal {
  background: #fff; border-radius: 20px;
  width: 100%; max-width: 680px; max-height: 85vh;
  display: flex; flex-direction: column;
  box-shadow: 0 32px 80px rgba(0,0,0,.3);
  transform: translateY(20px) scale(0.96);
  transition: transform .28s cubic-bezier(.22,1,.36,1);
  overflow: hidden;
}
.photo-preview-overlay.open .photo-preview-modal {
  transform: translateY(0) scale(1);
}
.photo-preview-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px 14px; border-bottom: 1px solid #f1f5f9; flex-shrink: 0;
}
.photo-preview-head h3 {
  font-size: 17px; font-weight: 800; color: #0f172a; margin: 0;
}
.photo-preview-close {
  width: 32px; height: 32px; border-radius: 50%; border: none;
  background: #f1f5f9; color: #374151; font-size: 18px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.photo-preview-close:hover { background: #e2e8f0; }
.photo-preview-sub {
  font-size: 13px; color: #64748b; padding: 6px 22px 0; margin: 0; flex-shrink: 0;
}
.photo-preview-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  padding: 16px 22px 22px; overflow-y: auto; flex: 1;
}
.photo-preview-tile {
  border-radius: 10px; overflow: hidden;
  border: 1.5px solid #e2e8f0; background: #f8fafc;
  display: flex; flex-direction: column;
  box-shadow: 0 2px 8px rgba(0,0,0,.07);
}
.photo-preview-tile img {
  width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block;
}
.photo-preview-note {
  padding: 6px 8px; font-size: 11px; color: #475569;
  line-height: 1.5; border-top: 1px solid #e2e8f0;
  background: #fff; font-style: italic;
}
.photo-preview-empty {
  grid-column: 1/-1; text-align: center; color: #94a3b8;
  font-size: 13px; padding: 30px 0;
}

@media (max-width: 560px) {
  .photo-preview-grid { grid-template-columns: repeat(2, 1fr); padding: 14px 14px 18px; }
  .photo-preview-head { padding: 14px 16px 12px; }
  .photo-preview-sub  { padding: 6px 16px 0; }
  .completed-table { min-width: 820px; }
}

/* Form 2 link Drive ngay dưới ảnh trong modal chi tiết (Thợ ảnh) */
.kanban-link-form { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.kanban-link-form label { font-size: 12.5px; color: var(--navy-700); margin-top: 4px; }
.kanban-link-form input {
  width: 100%; padding: 10px 12px; border: 1.5px solid var(--pink-100); border-radius: 10px;
  font: inherit; font-size: 13px; color: var(--navy-900); background: #fff;
}
.kanban-link-form input:focus { outline: none; border-color: var(--pink-500); }
.kanban-link-form .btn { align-self: flex-start; margin-top: 6px; padding: 9px 18px; font-size: 13px; }
.kanban-link-complete { margin-top: 12px; }

/* ---------------- Bổ sung khi tích hợp vào trang Sếp (2026-10-15) ----------------
   Chấm màu thay emoji ở nhãn hàng ưu tiên, dòng khách/dịch vụ + nhắc ghi chú trên thẻ
   (thẻ kanban cũ có, giữ lại), nhãn "Chưa phân công", nhãn "Nội bộ" cho link ảnh gốc,
   dòng giải thích cách tính tiến độ. */
.photo-row-badge::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  background: var(--row-accent);
}
.photo-row-card-sub { font-size: 12px; color: var(--navy-700); margin: -5px 0 8px; padding-right: 38px; }
.photo-row-card-hints { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 8px; }
.photo-row-card-hint {
  font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: var(--radius-pill);
  background: var(--pink-50); color: var(--pink-700); border: 1px solid var(--pink-100);
}
.photo-row-card-hint.extra { background: #fdf2f8; color: #c41d7f; border-color: rgba(233,30,140,.3); }
.photo-row-card-worker {
  align-self: flex-start; font-size: 10.5px; font-weight: 700; padding: 2px 8px; margin: 0 0 8px;
  border-radius: var(--radius-pill); background: #f1f5f9; color: var(--navy-700);
}
.photo-row-card-worker.unassigned { background: #fff7ed; color: #b45309; font-style: italic; }
.photo-progress-note {
  font-size: 12.5px; color: var(--navy-700); line-height: 1.55; margin: -6px 0 16px;
  padding: 8px 12px; background: var(--pink-50); border-radius: var(--radius-sm);
}
.drive-modal-internal {
  display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: var(--radius-pill);
  font-size: 10.5px; font-weight: 800; letter-spacing: .02em; vertical-align: 1px;
  background: #eef2ff; color: #4148c9; border: 1px solid #c7d2fe;
}
.drive-modal-hint + .drive-modal-hint { margin-top: 4px; }
/* .photo-row-more / .completed-summary có display riêng nên đè thuộc tính hidden (lỗi có sẵn ở
   nhánh Thợ ảnh: hiện "Xem thêm -1 đơn" khi hàng ≤3 thẻ) - ép ẩn khi có hidden */
.photo-row-more[hidden], .completed-summary[hidden] { display: none; }
.kanban-link-form .link-note { font-size: 11.5px; color: var(--navy-500); margin: -2px 0 2px; }