/* Giao diện Riverside: chữ to, nút ≥ 44px, chạy tốt ở bề ngang 360px, tự đổi tối/sáng theo máy. */
:root {
  --nen: #f6f8f8;
  --the: #ffffff;
  --chu: #14262b;
  --chu-phu: #50656b;
  --vien: #d5dfe1;
  --chinh: #0e5e6f;
  --chinh-chu: #ffffff;
  --chinh-nhat: #e1f0f2;
  --do: #b42318;
  --do-nhat: #fde8e6;
  --cam: #a65300;
  --cam-nhat: #fff1e0;
  --xanh: #1d7a3a;
  --xanh-nhat: #e3f4e8;
  --bong: 0 1px 3px rgba(0, 0, 0, .08);
  --bo: 14px;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --nen: #0b1d22;
    --the: #12292f;
    --chu: #e8f1f2;
    --chu-phu: #a3b8bd;
    --vien: #2a454c;
    --chinh: #5cc2d4;
    --chinh-chu: #06272e;
    --chinh-nhat: #173a42;
    --do: #ff8a80;
    --do-nhat: #3d1c1a;
    --cam: #ffb866;
    --cam-nhat: #3a2a14;
    --xanh: #7bd88f;
    --xanh-nhat: #173322;
    --bong: none;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--nen);
  color: var(--chu);
  font: 17px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  padding-bottom: calc(76px + env(safe-area-inset-bottom));
  overflow-x: hidden;
}
h1 { font-size: 1.35rem; margin: .2rem 0 .6rem; }
h2 { font-size: 1.15rem; margin: 1rem 0 .5rem; }
h3 { font-size: 1.02rem; margin: .6rem 0 .3rem; }
a { color: var(--chinh); }
button, input, select, textarea { font: inherit; color: inherit; }

/* Đầu trang */
.dau {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: calc(8px + env(safe-area-inset-top)) 16px 8px;
  background: var(--chinh); color: var(--chinh-chu);
}
.dau-trai { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.ten-app { font-size: 1.15rem; }
.dau-phai { flex: 1 1 auto; font-size: .85rem; text-align: right; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.che-do { background: #ffd166; color: #3b2a00; }

main { padding: 12px 16px 24px; max-width: 720px; margin: 0 auto; outline: none; }

/* Thẻ, danh sách */
.the {
  background: var(--the); border: 1px solid var(--vien); border-radius: var(--bo);
  padding: 12px 14px; margin: 10px 0; box-shadow: var(--bong);
}
.the-viec { border-left: 6px solid var(--vien); }
.the-viec.gap, .the-viec.qua-han { border-left-color: var(--do); }
.the-viec.hom-nay { border-left-color: var(--cam); }
.the-viec.xong { border-left-color: var(--xanh); opacity: .8; }
.tieu-de-viec { font-weight: 600; }
.chi-tiet { color: var(--chu-phu); font-size: .95rem; }
.nhom-tieu-de { display: flex; align-items: center; gap: 8px; margin-top: 18px; font-size: 1rem; text-transform: uppercase; letter-spacing: .02em; }
.cham { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.cham.do { background: var(--do); } .cham.cam { background: var(--cam); } .cham.xanh { background: var(--xanh); }
.hang-nut { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.dong { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.dong > * { min-width: 0; }
.trong { color: var(--chu-phu); text-align: center; padding: 18px 8px; }
.dang-tai { color: var(--chu-phu); text-align: center; padding: 28px 8px; }
.mo-ta { color: var(--chu-phu); margin-top: 0; }
.danh-sach { list-style: none; padding: 0; margin: 0; }
.danh-sach > li { border-bottom: 1px solid var(--vien); padding: 10px 0; }
.danh-sach > li:last-child { border-bottom: 0; }
a.dong-khach { display: block; color: inherit; text-decoration: none; min-height: 44px; }

/* Nút */
.nut {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; min-width: 44px; padding: 8px 14px;
  border: 1px solid var(--vien); border-radius: 12px; background: var(--the);
  color: var(--chu); text-decoration: none; cursor: pointer; font-weight: 600;
  -webkit-tap-highlight-color: transparent;
}
.nut:active { transform: translateY(1px); }
.nut:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible { outline: 3px solid var(--chinh); outline-offset: 2px; }
.nut-chinh { background: var(--chinh); color: var(--chinh-chu); border-color: var(--chinh); }
.nut-nguy { background: var(--do-nhat); color: var(--do); border-color: var(--do); }
.nut-phu { background: transparent; border-color: transparent; color: var(--chu-phu); width: 100%; margin-top: 6px; }
.nut-lon { width: 100%; min-height: 56px; font-size: 1.15rem; border-radius: 16px; margin-top: 14px; }
.nut-nho { min-height: 44px; padding: 6px 12px; font-size: .95rem; }
.nut[disabled] { opacity: .5; cursor: not-allowed; }

/* Chip chọn nhanh */
.chip-nhom { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  min-height: 44px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--vien);
  background: var(--the); cursor: pointer; font-weight: 500;
}
.chip[aria-pressed="true"] { background: var(--chinh); color: var(--chinh-chu); border-color: var(--chinh); }

/* Ô nhập */
.o-nhap { display: block; margin: 12px 0; }
.o-nhap > span { display: block; font-weight: 600; margin-bottom: 4px; }
input[type=text], input[type=tel], input[type=email], input[type=number], input[type=search], input[type=datetime-local], input[type=date], select, textarea {
  width: 100%; min-height: 48px; padding: 10px 12px; border-radius: 12px;
  border: 1px solid var(--vien); background: var(--the); font-size: 1.05rem;
}
input.sdt { font-size: 1.3rem; letter-spacing: .03em; }
.loi-o { color: var(--do); font-size: .95rem; margin-top: 4px; }
.o-dong-y { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: 12px; background: var(--chinh-nhat); margin: 14px 0; cursor: pointer; }
.o-dong-y input { width: 28px; height: 28px; flex: 0 0 auto; margin: 0; accent-color: var(--chinh); }
.canh-bao-trung { background: var(--cam-nhat); color: var(--chu); border: 1px solid var(--cam); border-radius: 12px; padding: 10px 12px; margin-top: 8px; }
.hop-loi { background: var(--do-nhat); color: var(--do); border-radius: 12px; padding: 10px 12px; }

/* Huy hiệu */
.huy-hieu { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: .8rem; font-weight: 700; background: var(--chinh-nhat); color: var(--chinh); white-space: nowrap; }
.huy-hieu.do { background: var(--do-nhat); color: var(--do); }
.huy-hieu.cam { background: var(--cam-nhat); color: var(--cam); }
.huy-hieu.xanh { background: var(--xanh-nhat); color: var(--xanh); }
.huy-hieu[hidden] { display: none; } /* thuộc tính hidden phải thắng display của huy hiệu (nhãn CHẾ ĐỘ THỬ, hàng chờ gửi) */

/* Thanh giai đoạn ●●●○○ */
.giai-doan { display: flex; gap: 6px; align-items: center; margin: 6px 0; }
.giai-doan i { width: 14px; height: 14px; border-radius: 50%; background: var(--vien); display: inline-block; }
.giai-doan i.bat { background: var(--chinh); }

/* Tab */
.tab { display: flex; gap: 6px; overflow-x: auto; margin: 10px 0; scrollbar-width: none; }
.tab button { flex: 0 0 auto; }
.tab button[aria-selected="true"] { background: var(--chinh); color: var(--chinh-chu); border-color: var(--chinh); }

/* Điểm danh */
.dd-hang { display: grid; grid-template-columns: 1fr; gap: 6px; padding: 10px 0; border-bottom: 1px solid var(--vien); }
.dd-nut { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.dd-nut .chip { padding: 6px 4px; font-size: .9rem; border-radius: 10px; }

/* Chỉ số báo cáo */
.luoi-so { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.o-so { background: var(--the); border: 1px solid var(--vien); border-radius: var(--bo); padding: 12px; }
.o-so .so { font-size: 1.7rem; font-weight: 700; }
.o-so .nhan { color: var(--chu-phu); font-size: .92rem; }
.thanh-tien-do { height: 14px; background: var(--vien); border-radius: 999px; overflow: hidden; margin: 6px 0; }
.thanh-tien-do > div { height: 100%; background: var(--chinh); }

/* Thanh dưới */
.thanh-duoi {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 6;
  display: flex; justify-content: space-around; align-items: stretch;
  background: var(--the); border-top: 1px solid var(--vien);
  padding: 4px 4px calc(4px + env(safe-area-inset-bottom));
}
.thanh-duoi a {
  flex: 1 1 0; min-width: 0; min-height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: var(--chu-phu); text-decoration: none; font-size: .78rem; border-radius: 12px; gap: 2px;
}
.thanh-duoi a .bt { font-size: 1.3rem; line-height: 1; }
.thanh-duoi a[aria-current="page"] { color: var(--chinh); font-weight: 700; background: var(--chinh-nhat); }
.thanh-duoi a.lon .bt { background: var(--chinh); color: var(--chinh-chu); width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; font-weight: 700; }

/* Bảng chọn trượt lên + thông báo */
.nen-mo { position: fixed; inset: 0; background: rgba(0, 0, 0, .45); z-index: 20; display: flex; align-items: flex-end; justify-content: center; }
.bang-chon {
  background: var(--the); color: var(--chu); width: 100%; max-width: 560px; max-height: 88vh; overflow: auto;
  border-radius: 18px 18px 0 0; padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
}
.bang-chon h2 { margin-top: 0; }
.luoi-nut { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.thong-bao {
  position: fixed; left: 16px; right: 16px; bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 30;
  padding: 12px 14px; border-radius: 12px; font-weight: 600; text-align: center; box-shadow: 0 4px 14px rgba(0, 0, 0, .2);
  background: var(--xanh-nhat); color: var(--xanh); border: 1px solid var(--xanh);
}
.thong-bao-loi { background: var(--do-nhat); color: var(--do); border-color: var(--do); }

/* Dòng thời gian */
.dong-thoi-gian { list-style: none; padding: 0; margin: 0; border-left: 3px solid var(--vien); }
.dong-thoi-gian li { padding: 6px 0 10px 12px; position: relative; }
.dong-thoi-gian li::before { content: ""; position: absolute; left: -8px; top: 12px; width: 13px; height: 13px; border-radius: 50%; background: var(--chinh); }
.nho { font-size: .88rem; color: var(--chu-phu); }

@media (min-width: 560px) {
  .dd-hang { grid-template-columns: 1fr auto; align-items: center; }
  .dd-nut { grid-template-columns: repeat(4, auto); }
  .luoi-so { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---- Báo cáo chỉ số (chấm xanh/vàng/đỏ) ---- */
.cham.xam, .cham:not(.do):not(.cam):not(.xanh) { background: var(--vien); }
.tab a[aria-selected="true"] { background: var(--chinh); color: var(--chinh-chu); border-color: var(--chinh); }
.tab a { flex: 0 0 auto; }
.the-bc, .muc-bc { border-left: 6px solid var(--vien); }
.vien-do { border-left: 6px solid var(--do); }
.vien-cam { border-left: 6px solid var(--cam); }
.vien-xanh { border-left: 6px solid var(--xanh); }
.ten-muc { display: flex; align-items: center; gap: 8px; font-weight: 600; min-width: 0; }
.so-muc { font-size: 1.15rem; white-space: nowrap; }
.muc-bc .chi-tiet { margin-top: 4px; font-size: .9rem; }
.muc-bc details summary { cursor: pointer; min-height: 32px; display: flex; align-items: center; }
.chenh { font-weight: 700; color: var(--chu); }
.canh-bao-mau { background: #ffd166; color: #3b2a00; border-radius: 8px; padding: 2px 8px; display: inline-block; margin-top: 6px; }
.o-so .dong { align-items: flex-start; }
.ds-nguon { list-style: none; padding: 0; margin: 6px 0 0; }
.ds-nguon li { margin: 6px 0; }
.thanh-nho-nen { height: 8px; background: var(--vien); border-radius: 999px; overflow: hidden; }
.thanh-nho { display: block; height: 8px; background: var(--chinh); border-radius: 999px; }
.cuon-ngang { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.bang-nho { width: 100%; border-collapse: collapse; font-size: .9rem; }
.bang-nho th, .bang-nho td { padding: 6px 4px; text-align: right; border-bottom: 1px solid var(--vien); white-space: nowrap; }
.bang-nho th:first-child { text-align: left; }
.o-thanh { display: flex; align-items: center; gap: 6px; justify-content: flex-end; min-width: 70px; }
.o-thanh .thanh-nho { flex: 0 1 auto; max-width: 48px; }

/* ---- Chọn nhiều khách để giao ---- */
.dong-chon { display: flex; gap: 12px; align-items: center; min-height: 44px; cursor: pointer; }
.dong-chon input { width: 26px; height: 26px; flex: 0 0 auto; accent-color: var(--chinh); }
.thanh-chon {
  position: sticky; bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 4;
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  background: var(--the); border: 1px solid var(--chinh); border-radius: var(--bo); padding: 8px 12px; margin-top: 10px; box-shadow: 0 4px 14px rgba(0, 0, 0, .15);
}
.thanh-chon[hidden] { display: none; }

/* ---- Nhận xét buổi ---- */
.the-nhan-xet .o-nhap-gon { margin: 8px 0 4px; }
.the-nhan-xet .o-nhap-gon > span { font-size: .9rem; color: var(--chu-phu); }
.goi-y { gap: 6px; }
.chip-nho { min-height: 40px; padding: 4px 10px; font-size: .85rem; }
#cho-gui { text-decoration: none; }

/* ---- Báo cáo bộ phận · việc chăm sóc · Marketing (22/10) ---- */
:root { --tim: #6b3fa0; --tim-nhat: #efe7f8; }
@media (prefers-color-scheme: dark) { :root { --tim: #c9a7f2; --tim-nhat: #2c2140; } }
input[type=url] { width: 100%; min-height: 48px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--vien); background: var(--the); color: var(--chu); font-size: 1.05rem; }
.hang-chip { display: flex; gap: 8px; overflow-x: auto; margin: 8px 0; padding-bottom: 2px; scrollbar-width: none; }
a.chip { display: inline-flex; align-items: center; flex: 0 0 auto; text-decoration: none; color: var(--chu); white-space: nowrap; }
.chip[aria-selected="true"] { background: var(--chinh); color: var(--chinh-chu); border-color: var(--chinh); }
.chip-radio { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; color: var(--chu); }
.chip-radio input { width: 20px; height: 20px; margin: 0; accent-color: var(--chinh); }
.chip-radio:has(input:checked) { background: var(--chinh-nhat); border-color: var(--chinh); font-weight: 700; }
/* Bảng báo cáo bộ phận: cột đầu dính khi cuộn ngang */
.bang-bp th:first-child { position: sticky; left: 0; background: var(--the); z-index: 1; min-width: 8.5em; max-width: 46vw; white-space: normal; }
.cuon-ngang:focus-visible { outline: 3px solid var(--chinh); outline-offset: 2px; }
.ds-viec-bp, .ds-top { padding-left: 32px; }
.ds-viec-bp li, .ds-top li { margin: 6px 0; }
/* Việc chăm sóc */
.nhom-tg { color: var(--chu-phu); border-bottom: 1px solid var(--vien); padding-bottom: 4px; margin-top: 14px; }
.nhom-tg.chua-phan { color: var(--do); }
.o-nhap-gon { margin: 8px 0 0; }
/* Marketing */
.hang-tuan { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 6px 0; }
.hang-tuan .nut { min-width: 48px; font-size: 1.3rem; }
.ngay-mkt { border-top: 1px solid var(--vien); padding-top: 4px; margin-top: 8px; }
.ngay-mkt.hom-nay h3 { color: var(--chinh); }
.ngay-mkt h3 { margin: .4rem 0 .2rem; }
.nut-phu-nho { min-width: 44px; font-size: 1.2rem; }
.the-mkt { border-left: 6px solid var(--vien); }
.the-mkt.da-huy { opacity: .6; }
.the-mkt.da-huy strong { text-decoration: line-through; }
.chip-tt { min-height: 44px; font-size: .9rem; font-weight: 700; }
.chip-tt .mui-ten { font-weight: 400; opacity: .8; }
.tt-y-tuong { background: var(--vien); color: var(--chu); }
.tt-da-quay { background: var(--chinh-nhat); color: var(--chinh); border-color: var(--chinh); }
.tt-dang-dung { background: var(--cam-nhat); color: var(--cam); border-color: var(--cam); }
.tt-cho-duyet { background: var(--tim-nhat); color: var(--tim); border-color: var(--tim); }
.tt-da-dang { background: var(--xanh-nhat); color: var(--xanh); border-color: var(--xanh); }
.tt-huy { background: var(--do-nhat); color: var(--do); border-color: var(--do); }
.nhan-win, .nhan-lo { display: inline-block; padding: 2px 10px; border-radius: 6px; font-weight: 800; font-size: .85rem; letter-spacing: .04em; color: #fff; }
.nhan-win { background: #1d7a3a; }
.nhan-lo { background: #b42318; }
.luoi-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 10px; }
.luoi-so-nho { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.luoi-so-nho .o-so { padding: 8px; }
.luoi-so-nho .so { font-size: 1rem; }
.goi-y-bien-the { background: var(--chinh-nhat); border-radius: 10px; padding: 8px 10px; margin: 8px 0 0; }
@media (min-width: 560px) { .luoi-so-nho { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.hang-nut > .huy-hieu { align-self: center; padding: 6px 12px; font-size: .9rem; }
.form-chi-so .hang-chip { flex-wrap: wrap; overflow: visible; } .chip-radio { padding: 8px 12px; }
/* Checklist công việc hằng ngày */
input[type=time] { width: 100%; min-height: 48px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--vien); background: var(--the); color: var(--chu); font-size: 1.05rem; }
.ck-tien-do { margin: 6px 0 4px; }
.ck-so { font-size: 1.25rem; }
.thanh-tien-do > div { transition: width .35s ease; }
.thanh-tien-do > div.du, .ck-thanh > div.du { background: var(--xanh); }
.ck-ds { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 8px; }
.ck-viec {
  display: flex; gap: 12px; align-items: flex-start; width: 100%; min-height: 56px; padding: 12px; text-align: left;
  font: inherit; color: var(--chu); background: var(--the); border: 1px solid var(--vien); border-radius: var(--bo); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ck-viec:focus-visible { outline: 3px solid var(--chinh); outline-offset: 2px; }
.ck-viec:active { transform: translateY(1px); }
.ck-o {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 8px; border: 2px solid var(--chinh); display: flex; align-items: center;
  justify-content: center; font-weight: 800; font-size: 1.05rem; transition: background-color .25s ease, border-color .25s ease;
}
.ck-viec.xong { background: var(--xanh-nhat); border-color: transparent; }
.ck-viec.xong .ck-o { background: var(--xanh); border-color: var(--xanh); color: var(--the); }
.ck-than { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; overflow-wrap: anywhere; }
.ck-dong1 { font-weight: 600; }
.ck-gio { display: inline-block; font-variant-numeric: tabular-nums; color: var(--chinh); margin-right: 6px; font-weight: 700; }
/* Gạch ngang vẽ bằng nền để chạy hoạt ảnh từ trái sang phải; nhiều dòng thì mỗi dòng một gạch */
.ck-tieu-de {
  background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-position: 0 58%; background-size: 0 2px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-size .35s ease, color .35s ease;
}
.ck-viec.xong .ck-tieu-de { background-size: 100% 2px; color: var(--chu-phu); }
.ck-dong2 { font-size: .88rem; color: var(--chu-phu); }
.ck-xong-boi { font-size: .88rem; color: var(--xanh); font-weight: 700; }
.ck-them { display: grid; gap: 8px; }
.ck-them-hang { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 7.5em) auto; gap: 8px; }
.ck-them-hang .nut { min-height: 48px; }
.ck-mau.tat { opacity: .65; }
.ck-fs { border: 0; padding: 0; margin: 12px 0; min-width: 0; }
.ck-fs legend { font-weight: 600; margin-bottom: 4px; padding: 0; }
.ck-boc { flex-wrap: wrap; overflow: visible; }
.ck-boc .chip-radio { padding: 8px 12px; min-height: 44px; }
.ck-hang { padding: 8px 0; border-bottom: 1px solid var(--vien); }
.ck-ten { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.ck-lua { white-space: nowrap; color: var(--cam); }
.ck-thanh { height: 12px; background: var(--vien); border-radius: 999px; overflow: hidden; margin-top: 6px; }
.ck-thanh > div { height: 100%; background: var(--chinh); }
.ck-thanh > div.thap { background: var(--cam); }
@media (max-width: 360px) { .ck-them-hang { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .ck-them-hang .nut { grid-column: 1 / -1; } }
@media (prefers-reduced-motion: reduce) {
  .ck-tieu-de, .ck-o, .thanh-tien-do > div { transition: none; }
  .ck-viec:active { transform: none; }
}
.bang-chon [hidden], .ck-ds [hidden] { display: none !important; }
.ck-viec.chi-xem { cursor: default; border-style: dashed; }
.ck-viec.chi-xem .ck-o { border-color: var(--chu-phu); }