/* APP SALE & CRM TAM AN — giao diện dựng theo đúng bản vẽ đã duyệt.
   Thiết kế cho điện thoại trước. Từ 600px trở lên thì bó vào khung 460px canh giữa,
   để mở trên máy tính không bị kéo giãn vỡ bố cục. */

:root {
  --xanh: #1b7f96;
  --xanh-dam: #12606f;
  --xanh-nhat: #e8f4f7;
  --nen: #f1f5f7;
  --the: #ffffff;
  --chu: #10333d;
  --chu-nhat: #6b8794;
  --vien: #e3eaee;
  --do: #e5484d;
  --la: #2fb344;
  --cam: #f59e0b;
  --tim: #8b5cf6;
  --hong: #ec4899;
  --bong: 0 1px 3px rgba(16, 51, 61, .08), 0 6px 18px rgba(16, 51, 61, .05);
  --bo: 14px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0; height: 100%;
  background: #dfe8ec;
  color: var(--chu);
  font: 15px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

#khung {
  position: relative;
  width: 100%; min-height: 100%;
  margin: 0 auto;
  background: var(--nen);
  display: flex; flex-direction: column;
  overflow: hidden;
}

@media (min-width: 600px) {
  body { padding: 18px 0; }
  #khung {
    max-width: 460px; min-height: calc(100vh - 36px);
    border-radius: 22px;
    box-shadow: 0 10px 40px rgba(16, 51, 61, .18);
  }
}

/* ---------------------------------------------------------------- Thanh trên */
.dau {
  background: linear-gradient(135deg, #1b7f96 0%, #2aa4bd 100%);
  color: #fff; padding: 14px 16px;
  display: flex; align-items: center; gap: 10px;
  position: sticky; top: 0; z-index: 20;
}
.dau h1 { font-size: 17px; margin: 0; font-weight: 700; flex: 1; }
.dau .phu { font-size: 12px; opacity: .85; font-weight: 400; display: block; margin-top: 1px; }
.nut-tron {
  width: 32px; height: 32px; border-radius: 50%; border: 0;
  background: rgba(255, 255, 255, .18); color: #fff;
  font-size: 17px; line-height: 1; cursor: pointer;
  display: grid; place-items: center; flex: 0 0 auto;
}
.nut-tron:active { background: rgba(255, 255, 255, .32); }

/* ---------------------------------------------------------------- Thân trang */
#than { flex: 1; overflow-y: auto; padding: 14px 14px 84px; }
.trang { animation: hien .18s ease-out; }
@keyframes hien { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.the {
  background: var(--the); border-radius: var(--bo);
  box-shadow: var(--bong); padding: 14px; margin-bottom: 12px;
}
.the.kin { padding: 0; overflow: hidden; }

.tieu-muc {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 700; color: var(--xanh-dam);
  margin: 2px 0 10px;
}
.tieu-muc .bieu { font-size: 16px; }

/* ---------------------------------------------------------------- Chip & nhãn */
.chip {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 700; white-space: nowrap;
}
.chip-biet { background: #e3f1fd; color: #1273c4; }
.chip-tin { background: #e4f7ea; color: #1d8a3c; }
.chip-mua { background: #fdf0dc; color: #b26a00; }
.chip-dh { background: #efe8fd; color: #6b35d6; }
.chip-gt { background: #fde8f2; color: #c62a72; }
.chip-xam { background: #eef2f4; color: #6b8794; }
.chip-do { background: #fdeaea; color: var(--do); }
.chip-la { background: #e4f7ea; color: #1d8a3c; }
.chip-cam { background: #fdf0dc; color: #b26a00; }
.chip-xanh { background: var(--xanh-nhat); color: var(--xanh); }

/* ---------------------------------------------------------------- Bộ lọc */
.loc { display: flex; gap: 7px; overflow-x: auto; padding: 2px 0 10px; scrollbar-width: none; }
.loc::-webkit-scrollbar { display: none; }
.loc button {
  border: 1px solid var(--vien); background: #fff; color: var(--chu-nhat);
  border-radius: 999px; padding: 6px 13px; font-size: 12.5px; font-weight: 600;
  white-space: nowrap; cursor: pointer;
}
.loc button.chon { background: var(--xanh); border-color: var(--xanh); color: #fff; }

/* ---------------------------------------------------------------- Ô tìm */
.tim {
  display: flex; align-items: center; gap: 8px; background: #fff;
  border: 1px solid var(--vien); border-radius: 12px; padding: 9px 12px; margin-bottom: 10px;
}
.tim input { border: 0; outline: 0; flex: 1; font-size: 14px; background: transparent; color: var(--chu); }

/* ---------------------------------------------------------------- Dòng khách */
.dong {
  display: flex; align-items: center; gap: 11px; padding: 12px 14px;
  border-bottom: 1px solid var(--vien); cursor: pointer; background: #fff;
}
.dong:last-child { border-bottom: 0; }
.dong:active { background: #f7fafb; }
.anh {
  width: 42px; height: 42px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 15px;
  background: linear-gradient(135deg, #2aa4bd, #1b7f96);
}
.dong .giua { flex: 1; min-width: 0; }
.dong .ten { font-weight: 700; font-size: 14.5px; }
.dong .nho { font-size: 12px; color: var(--chu-nhat); margin-top: 2px; }
.dong .phai { text-align: right; flex: 0 0 auto; }
.dong .phai .nho { margin-top: 5px; }

/* ---------------------------------------------------------------- Nút */
.nut {
  display: block; width: 100%; border: 0; border-radius: 12px;
  padding: 13px; font-size: 15px; font-weight: 700; cursor: pointer;
  background: linear-gradient(135deg, #1b7f96, #2aa4bd); color: #fff;
}
.nut:active { filter: brightness(.94); }
.nut[disabled] { opacity: .55; cursor: default; }
.nut.phu { background: #fff; color: var(--xanh); border: 1.5px solid var(--xanh); }
.nut.la { background: linear-gradient(135deg, #219a53, #2fb344); }
.nut.nho { padding: 10px; font-size: 13.5px; border-radius: 10px; }
.hang-nut { display: flex; gap: 9px; }
.hang-nut > * { flex: 1; }

.fab {
  position: absolute; right: 16px; bottom: 78px; width: 52px; height: 52px;
  border-radius: 50%; border: 0; color: #fff; font-size: 27px; line-height: 1;
  background: linear-gradient(135deg, #1b7f96, #2aa4bd);
  box-shadow: 0 6px 18px rgba(27, 127, 150, .45); cursor: pointer; z-index: 15;
}

/* ---------------------------------------------------------------- Ô nhập */
label.o { display: block; margin-bottom: 11px; }
label.o span { display: block; font-size: 12px; font-weight: 700; color: var(--chu-nhat); margin-bottom: 5px; }
input, select, textarea {
  width: 100%; border: 1px solid var(--vien); border-radius: 10px; padding: 11px 12px;
  font-size: 14.5px; font-family: inherit; color: var(--chu); background: #fff; outline: 0;
}
input:focus, select:focus, textarea:focus { border-color: var(--xanh); box-shadow: 0 0 0 3px rgba(27, 127, 150, .12); }
textarea { min-height: 76px; resize: vertical; }

/* ---------------------------------------------------------------- Bảng thông tin */
.kv { display: flex; padding: 9px 0; border-bottom: 1px dashed var(--vien); font-size: 14px; gap: 10px; }
.kv:last-child { border-bottom: 0; }
.kv .k { width: 116px; flex: 0 0 auto; color: var(--chu-nhat); font-size: 13px; }
.kv .v { flex: 1; font-weight: 600; word-break: break-word; }

/* ---------------------------------------------------------------- Doanh thu */
.doanh-thu .so { font-size: 27px; font-weight: 800; color: var(--la); letter-spacing: -.5px; }
.thanh { height: 8px; border-radius: 99px; background: #e9eef1; overflow: hidden; margin-top: 9px; }
.thanh i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #2fb344, #7ed957); }

.o-so { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.o-so .mot { background: #fff; border-radius: 12px; padding: 11px 12px; box-shadow: var(--bong); }
.o-so .mot .nhan { font-size: 11.5px; color: var(--chu-nhat); font-weight: 600; }
.o-so .mot .gia-tri { font-size: 19px; font-weight: 800; margin-top: 3px; }
.o-so .mot .gia-tri small { font-size: 13px; color: var(--chu-nhat); font-weight: 600; }

/* ---------------------------------------------------------------- Việc */
.viec { display: flex; align-items: flex-start; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--vien); }
.viec:last-child { border-bottom: 0; }
.o-tick {
  width: 21px; height: 21px; border-radius: 6px; border: 2px solid #cbd8de;
  flex: 0 0 auto; margin-top: 1px; cursor: pointer; display: grid; place-items: center;
  color: #fff; font-size: 13px; background: #fff;
}
.o-tick.xong { background: var(--la); border-color: var(--la); }
.viec .noi { flex: 1; min-width: 0; }
.viec .gio { font-size: 12px; color: var(--xanh); font-weight: 700; }
.viec .nd { font-size: 14px; margin-top: 1px; }
.viec.xong .nd { text-decoration: line-through; color: var(--chu-nhat); }

/* ---------------------------------------------------------------- Phễu */
.pheu-dong { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; }
.pheu-dong .bang { height: 22px; border-radius: 5px; min-width: 26px; }
.pheu-dong .ten { font-size: 13px; flex: 1; color: var(--chu-nhat); }
.pheu-dong .n { font-weight: 800; font-size: 14px; }

/* ---------------------------------------------------------------- Bảng thi đua */
.thi-dua {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 8px; border-radius: 10px; margin-bottom: 3px;
}
.thi-dua[data-nv] { cursor: pointer; }
.thi-dua[data-nv]:active { background: #f2f7f9; }
.thi-dua.toi { background: var(--xanh-nhat); }
.thi-dua .hang {
  width: 26px; flex: 0 0 auto; text-align: center;
  font-size: 16px; font-weight: 800; color: var(--chu-nhat);
}

/* ---------------------------------------------------------------- Tour */
.tour-anh {
  width: 54px; height: 54px; border-radius: 10px; flex: 0 0 auto;
  display: grid; place-items: center; font-size: 25px;
  background: linear-gradient(135deg, #f0c27b, #cc9c5c);
}
.tour-lon {
  height: 108px; border-radius: 12px; display: grid; place-items: center; font-size: 44px;
  background: linear-gradient(135deg, #f0c27b, #b9834a); margin-bottom: 11px;
}

/* ---------------------------------------------------------------- Mốc hành trình */
.moc { display: flex; gap: 11px; padding-bottom: 14px; position: relative; }
.moc:last-child { padding-bottom: 0; }
.moc::before {
  content: ''; position: absolute; left: 10px; top: 22px; bottom: 0; width: 2px; background: var(--vien);
}
.moc:last-child::before { display: none; }
.moc .vong {
  width: 22px; height: 22px; border-radius: 50%; border: 2px solid #cbd8de; background: #fff;
  flex: 0 0 auto; display: grid; place-items: center; color: #fff; font-size: 12px;
  cursor: pointer; z-index: 1;
}
.moc.xong .vong { background: var(--la); border-color: var(--la); }
.moc .ten { font-weight: 700; font-size: 14px; }
.moc .phu { font-size: 12px; color: var(--chu-nhat); margin-top: 2px; }

/* ---------------------------------------------------------------- Thanh dưới */
#chan {
  position: sticky; bottom: 0; z-index: 20; display: flex;
  background: #fff; border-top: 1px solid var(--vien); padding: 6px 2px 7px;
}
#chan button {
  flex: 1; border: 0; background: transparent; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-size: 10.5px; font-weight: 600; color: var(--chu-nhat); padding: 3px 0;
}
#chan button .bieu { font-size: 19px; line-height: 1; }
#chan button.chon { color: var(--xanh); }

/* ---------------------------------------------------------------- Đăng nhập */
#dangnhap {
  flex: 1; min-height: 100%; display: flex; flex-direction: column; justify-content: center;
  padding: 26px 22px; background: linear-gradient(160deg, #1b7f96 0%, #124e5c 100%);
}
#dangnhap .hop { background: #fff; border-radius: 18px; padding: 22px; box-shadow: 0 12px 36px rgba(0, 0, 0, .22); }
#dangnhap .sen { text-align: center; font-size: 40px; margin-bottom: 6px; }
#dangnhap h2 { margin: 0 0 3px; text-align: center; font-size: 18px; color: var(--xanh-dam); }
#dangnhap .cau { text-align: center; font-size: 12.5px; color: var(--chu-nhat); margin-bottom: 18px; }

.loi { background: #fdeaea; color: #a5232a; border-radius: 10px; padding: 10px 12px; font-size: 13px; margin-bottom: 12px; }
.trong { text-align: center; color: var(--chu-nhat); font-size: 13.5px; padding: 26px 10px; }

/* ---------------------------------------------------------------- Thông báo */
#bao {
  position: fixed; left: 50%; bottom: 92px; transform: translate(-50%, 14px);
  background: #10333d; color: #fff; padding: 10px 16px; border-radius: 999px;
  font-size: 13px; font-weight: 600; opacity: 0; pointer-events: none;
  transition: opacity .2s, transform .2s; z-index: 60; max-width: 90%; text-align: center;
}
#bao.hien { opacity: 1; transform: translate(-50%, 0); }

/* ---------------------------------------------------------------- Lớp phủ */
#phu {
  position: fixed; inset: 0; background: rgba(10, 30, 36, .48); z-index: 50;
  display: flex; align-items: flex-end; justify-content: center;
}
#phu > .hop {
  background: #fff; width: 100%; max-width: 460px; border-radius: 18px 18px 0 0;
  padding: 18px 16px 22px; max-height: 88vh; overflow-y: auto;
  animation: len .22s ease-out;
}
@keyframes len { from { transform: translateY(100%); } to { transform: none; } }
#phu h3 { margin: 0 0 13px; font-size: 16px; color: var(--xanh-dam); }
[hidden] { display: none !important; }