/* Giao diện mới CRM VUONG DLIM — chủ DN mệnh THUỶ (27/11/1997).
   Màu bản mệnh: xanh nước biển sâu + xanh ngọc; Kim sinh Thuỷ: trắng bạc.
   Tránh vàng đất/nâu làm màu chính (Thổ khắc Thuỷ) — chỉ dùng cho cảnh báo. */
:root {
  --nen: #f2f6f9;
  --mat: #ffffff;
  --muc: #0c1f2b;
  --muc-nhe: #5c707d;
  --vien: #e0e8ee;
  --chinh: #0d3b66;          /* xanh nước biển sâu */
  --chinh-dam: #092a4b;
  --ngoc: #159fb5;           /* xanh ngọc */
  --ngoc-nhat: #e6f4f7;
  --tot: #10855f;
  --canh: #b07d00;
  --xau: #b3261e;
  --bong: 0 1px 2px rgba(12, 31, 43, .06), 0 8px 24px rgba(12, 31, 43, .05);
  --r: 14px;
}
* { box-sizing: border-box; }
body.moi {
  margin: 0; background: var(--nen); color: var(--muc);
  font-family: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 15px; line-height: 1.5;
}
.moi a { color: var(--chinh); }
.moi-khung { display: flex; min-height: 100vh; }

/* ---------- thanh bên ---------- */
.moi-ben {
  width: 248px; flex: 0 0 248px; background: var(--chinh-dam); color: #dbe7f0;
  padding: 18px 14px; position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.moi-logo { display: flex; gap: 10px; align-items: center; margin-bottom: 22px; }
.moi-logo-o {
  width: 40px; height: 40px; border-radius: 12px; background: var(--ngoc);
  color: #fff; font-weight: 700; display: grid; place-items: center; font-size: 18px;
}
.moi-logo b { display: block; color: #fff; font-size: 15px; }
.moi-logo span { font-size: 12px; color: #9fb6c8; }
.moi-nhom { font-size: 11px; letter-spacing: .12em; color: #7f9ab0; margin: 16px 6px 6px; text-transform: uppercase; }
.moi-ben a {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px;
  color: #cfe0ec; text-decoration: none; font-size: 14px; margin-bottom: 2px;
}
.moi-ben a:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.moi-ben a.dang { background: var(--ngoc); color: #fff; font-weight: 600; }
.moi-ben a .dem { margin-left: auto; background: rgba(255,255,255,.18); border-radius: 20px; padding: 0 8px; font-size: 12px; }
.moi-ben-chan { margin-top: 18px; padding: 12px; border-radius: 12px; background: rgba(255,255,255,.06); font-size: 12px; color: #a8c0d2; }

/* ---------- nội dung ---------- */
.moi-than { flex: 1; min-width: 0; padding: 22px 26px 48px; }
.moi-dau { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: flex-start; margin-bottom: 18px; }
.moi-duong { font-size: 12px; color: var(--muc-nhe); margin-bottom: 4px; }
.moi-tieu { font-size: 30px; font-weight: 700; letter-spacing: -.02em; margin: 0; }
.moi-phu { color: var(--muc-nhe); font-size: 14px; margin-top: 2px; }
.moi-cong-cu { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.moi-nut {
  border: 1px solid var(--vien); background: var(--mat); color: var(--muc);
  border-radius: 10px; padding: 7px 13px; font-size: 13px; cursor: pointer; text-decoration: none;
}
.moi-nut.chinh { background: var(--chinh); border-color: var(--chinh); color: #fff; }
.moi-nut:hover { border-color: var(--ngoc); }
.moi-o-ngay { border: 1px solid var(--vien); border-radius: 10px; padding: 6px 10px; font: inherit; font-size: 13px; }

.moi-the-luoi { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin-bottom: 16px; }
.moi-the { background: var(--mat); border: 1px solid var(--vien); border-radius: var(--r); padding: 16px 18px; box-shadow: var(--bong); }
.moi-the.noi { background: linear-gradient(140deg, var(--chinh) 0%, #10527f 55%, var(--ngoc) 160%); border-color: transparent; color: #eaf4fa; }
.moi-the-nhan { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muc-nhe); }
.moi-the.noi .moi-the-nhan { color: #b9d6e8; }
.moi-the-so { font-size: 30px; font-weight: 700; letter-spacing: -.02em; margin: 6px 0 2px; font-variant-numeric: tabular-nums; }
.moi-the-phu { font-size: 12.5px; color: var(--muc-nhe); }
.moi-the.noi .moi-the-phu { color: #c6e0ef; }
.moi-the-phu.xau { color: var(--xau); }
.moi-the-phu.tot { color: var(--tot); }

.moi-hang { display: grid; grid-template-columns: 1.6fr 1fr; gap: 14px; align-items: start; }
@media (max-width: 1100px) { .moi-hang { grid-template-columns: 1fr; } }
.moi-hop { background: var(--mat); border: 1px solid var(--vien); border-radius: var(--r); padding: 18px; box-shadow: var(--bong); margin-bottom: 14px; }
.moi-hop-dau { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 12px; }
.moi-hop-ten { font-size: 17px; font-weight: 700; margin: 0; }
.moi-hop-nhan { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muc-nhe); }

table.moi-bang { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.moi-bang th { text-align: right; font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muc-nhe); padding: 6px 10px; border-bottom: 1px solid var(--vien); white-space: nowrap; }
.moi-bang td { text-align: right; padding: 9px 10px; border-bottom: 1px solid #f1f5f8; white-space: nowrap; }
.moi-bang th:first-child, .moi-bang td:first-child { text-align: left; }
.moi-bang tbody tr:hover td { background: #f7fafc; }
.moi-bang .ten { font-weight: 600; }
.moi-nho { font-size: 12px; color: var(--muc-nhe); }
.moi-do { color: var(--xau); font-weight: 600; }
.moi-xanh { color: var(--tot); font-weight: 600; }

.moi-thanh { height: 8px; border-radius: 20px; background: #e9eff4; overflow: hidden; min-width: 90px; }
.moi-thanh i { display: block; height: 100%; background: var(--ngoc); }
.moi-thanh i.du { background: var(--tot); }
.moi-thanh i.thieu { background: var(--canh); }

.moi-cot { display: flex; align-items: flex-end; gap: 10px; height: 180px; padding-top: 8px; }
.moi-cot div { flex: 1; background: #cfe3ee; border-radius: 8px 8px 0 0; position: relative; }
.moi-cot div.dinh { background: var(--chinh); }
.moi-cot div span { position: absolute; bottom: -20px; left: 0; right: 0; text-align: center; font-size: 11px; color: var(--muc-nhe); }
.moi-cot-nhan { height: 22px; }

.moi-viec { display: flex; gap: 12px; padding: 11px 0; border-bottom: 1px solid #f1f5f8; align-items: center; }
.moi-viec:last-child { border-bottom: 0; }
.moi-viec-icon { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--ngoc-nhat); font-size: 16px; }
.moi-viec-icon.xau { background: #fdeceb; }
.moi-viec b { display: block; font-size: 14px; }
.moi-viec span { font-size: 12.5px; color: var(--muc-nhe); }
.moi-viec .so { margin-left: auto; font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }

.moi-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--ngoc-nhat); color: #0b5e6c; border-radius: 20px; padding: 3px 11px; font-size: 12.5px; }
.moi-chip.xau { background: #fdeceb; color: var(--xau); }
.moi-chip.canh { background: #fdf4e3; color: var(--canh); }

@media (max-width: 860px) {
  .moi-ben { position: fixed; z-index: 40; transform: translateX(-100%); transition: transform .2s; }
  .moi-ben.mo { transform: none; }
  .moi-than { padding: 16px 14px 40px; }
  .moi-tieu { font-size: 24px; }
  .moi-menu-nut { display: inline-flex !important; }
}
.moi-menu-nut { display: none; }

/* ---------- phủ lên Bootstrap để các trang cũ cùng một bộ mặt ---------- */
.moi .card { border: 1px solid var(--vien); border-radius: var(--r); box-shadow: var(--bong); }
.moi .card-body { padding: 16px 18px; }
.moi h1, .moi h2, .moi h3, .moi h4, .moi h5 { letter-spacing: -.01em; font-weight: 700; }
.moi h4 { font-size: 24px; }
.moi h5 { font-size: 17px; }
.moi .btn { border-radius: 10px; font-size: 14px; }
.moi .btn-primary, .moi .btn-success { background: var(--chinh); border-color: var(--chinh); }
.moi .btn-primary:hover, .moi .btn-success:hover { background: var(--chinh-dam); border-color: var(--chinh-dam); }
.moi .btn-outline-primary { color: var(--chinh); border-color: #bcd2e2; }
.moi .btn-outline-primary:hover { background: var(--chinh); border-color: var(--chinh); }
.moi .btn-outline-secondary { color: var(--muc-nhe); border-color: var(--vien); }
.moi .form-control, .moi .form-select { border-radius: 10px; border-color: var(--vien); font-size: 14px; }
.moi .form-control:focus, .moi .form-select:focus { border-color: var(--ngoc); box-shadow: 0 0 0 3px rgba(21, 159, 181, .15); }
.moi .table { font-size: 14px; }
.moi .table > :not(caption) > * > * { border-bottom-color: #f1f5f8; }
.moi .table thead th, .moi .table-light th { background: #f6f9fb; color: var(--muc-nhe); font-size: 11.5px;
  text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.moi .badge.bg-success { background: var(--tot) !important; }
.moi .badge.bg-primary { background: var(--chinh) !important; }
.moi .badge.bg-warning { background: #f5e2b3 !important; color: #6b4e00 !important; }
.moi .badge.bg-danger { background: var(--xau) !important; }
.moi .alert { border-radius: 12px; border: 1px solid var(--vien); }
.moi .alert-success { background: #e8f6f0; border-color: #bde4d4; color: #0c5c42; }
.moi .alert-danger { background: #fdeceb; border-color: #f3c7c3; color: #8d1d16; }
.moi .alert-warning { background: #fdf6e6; border-color: #f0e0b5; color: #6b4e00; }
.moi .alert-info { background: var(--ngoc-nhat); border-color: #bfe3ea; color: #0b5e6c; }
.moi .nav-tabs { border-bottom-color: var(--vien); }
.moi .nav-tabs .nav-link.active { color: var(--chinh); border-color: var(--vien) var(--vien) #fff; font-weight: 600; }
.moi .text-primary { color: var(--chinh) !important; }
.moi .bg-brand { background: var(--chinh) !important; }
.moi .stat-card h3 { font-size: 28px; }
.moi .stat-positive { color: var(--tot); }
.moi .stat-negative { color: var(--xau); }
.moi .progress { border-radius: 20px; background: #e9eff4; }
.moi .progress-bar { background: var(--ngoc); }
.moi .progress-bar.bg-success { background: var(--tot) !important; }
.moi .progress-bar.bg-danger { background: var(--xau) !important; }
.moi .progress-bar.bg-warning { background: var(--canh) !important; }

/* Ô Ads AI trên Toàn cảnh — bấm vào là sang nhánh /ads */
.moi-the.moi-ads { display: block; text-decoration: none; color: inherit; border-color: var(--ngoc); position: relative; }
.moi-the.moi-ads::after { content: '↗'; position: absolute; top: 12px; right: 14px; color: var(--ngoc); font-size: 13px; }
.moi-the.moi-ads:hover { box-shadow: 0 6px 18px rgba(21,159,181,.22); }