body { background: #f4f6f9; }
.card { border: none; border-radius: 14px; box-shadow: 0 2px 10px rgba(0,0,0,.06); }
.stat-card h3 { font-weight: 700; }
.stat-positive { color: #198754; }
.stat-negative { color: #dc3545; }
table.table thead { background: #eef1f6; }
.navbar-brand { font-weight: 700; }

/* Màu trạng thái đơn hàng: Chờ lên đơn=xanh dương, Đã lên đơn=vàng,
   Xong=xanh lá, Hoàn/Huỷ=đỏ. Áp cho nền <select> theo giá trị đang chọn —
   danh sách khi mở popup do trình duyệt/hệ điều hành tự vẽ nên không tô màu
   được (giới hạn của <select> gốc, không phải CSS thiếu sót). */
select.status-select.status-cho_len { background-color: #cfe2ff; color: #084298; border-color: #9ec5fe; }
select.status-select.status-da_len { background-color: #fff3cd; color: #664d03; border-color: #ffe69c; }
select.status-select.status-xong { background-color: #d1e7dd; color: #0f5132; border-color: #a3cfbb; }
select.status-select.status-hoan, select.status-select.status-huy { background-color: #f8d7da; color: #842029; border-color: #f1aeb5; }

option.opt-cho_len { background-color: #cfe2ff; color: #084298; }
option.opt-da_len { background-color: #fff3cd; color: #664d03; }
option.opt-xong { background-color: #d1e7dd; color: #0f5132; }
option.opt-hoan, option.opt-huy { background-color: #f8d7da; color: #842029; }
option.opt-delete { background-color: #f1f3f5; color: #495057; font-style: italic; }

/* Bảng "Đơn hàng của tôi" tháng dashboard nhân viên: nhường phần lớn chiều
   ngang cho bảng đơn hàng (~80%), form nhập đơn thu gọn còn ~20%. Bootstrap
   chỉ chia hết 12 cột nên dùng width trực tiếp cho đúng tỉ lệ 1/5 - 4/5. */
@media (min-width: 992px) {
  .col-lg-form { flex: 0 0 20%; max-width: 20%; }
  .col-lg-table { flex: 0 0 80%; max-width: 80%; }
}

.section-title { font-weight: 700; color: #2b3648; display: flex; align-items: center; gap: .4rem; }

.card-accent-blue { border-top: 4px solid #4f7cff; }
.card-accent-teal { border-top: 4px solid #17b897; }

table.table-hover-row tbody tr:hover { background-color: #eef4ff; }

/* Bảng đơn hàng dạng ô, có đường viền rõ giữa các dòng/cột. LƯU Ý: không
   dùng overflow:hidden trên chính <table> (dù để bo góc đẹp hơn) — nó phá
   vỡ position:sticky của thead bên trong khi cuộn trong .table-responsive,
   khiến dòng tiêu đề không dính lại được như mong đợi. */
table.table-cells { border: 1px solid #dde3ec; border-radius: 8px; }
table.table-cells th, table.table-cells td { border: 1px solid #dde3ec; vertical-align: middle; }
table.table-cells thead th { border-bottom-width: 2px; border-color: #c9d2e0; }

.badge.bg-primary { background-color: #4f7cff !important; }
.badge.bg-success { background-color: #17b897 !important; }

/* Khi 1 ô "Sản phẩm"/"SL" gộp nhiều dòng sản phẩm, tách riêng từng dòng
   bằng đường viền để dễ đối chiếu SL đúng với sản phẩm nào. Dùng "+" (chỉ
   kẻ giữa 2 dòng liền nhau) thay vì :last-child — vì ô Sản phẩm còn có thể
   có thêm badge "Cần kiểm tra" sau cùng, khiến :last-child không khớp
   dòng sản phẩm cuối và kẻ viền không nhất quán giữa các đơn.
   Màu viền phải đủ đậm để còn thấy rõ trên cả dòng zebra-stripe (nền xám
   nhạt của table-striped) — màu quá nhạt trước đây (#eef1f6) gần trùng
   màu nền xám, khiến viền gần như vô hình ở các dòng lẻ. */
.line-row { padding: .45rem .5rem; }
.line-row + .line-row { border-top: 1px solid #adb8c9; }

/* Cột Trạng thái thu gọn lại; Sản phẩm/Địa chỉ rộng hơn; cỡ chữ nhỏ lại để
   bảng "Đơn hàng của tôi" gọn, đọc được nhiều cột hơn trên cùng màn hình. */
.table-compact { font-size: .8rem; }
.table-compact .col-status { width: 100px; }
.table-compact .col-status .form-select,
.table-compact .col-status .btn { font-size: .78rem; padding: .2rem .4rem; }
.table-compact .col-product { width: 260px; }
.table-compact .col-address { width: 220px; }

.col-date { width: 90px; }
.col-workdays { width: 70px; }

/* Giữ cố định dòng tiêu đề khi cuộn bảng dài, để luôn biết cột nào là gì */
.sticky-thead thead th { position: sticky; top: 0; z-index: 2; background: #eef1f6; }