/* App Vận Hành KA Baby — CSS màn hình. Token (màu, chữ, khoảng cách…) nằm ở token.css (nạp trước file này).
   Tên biến cũ (--paper, --ink, --clay…) giữ lại làm BÍ DANH trỏ về token mới để các màn chưa làm lại vẫn đúng màu;
   Giai đoạn 3 thay dần sang tên token mới. Chế độ tối: tạm tắt (quyết định 25/09). */
:root {
  --paper: var(--nen-phu);
  --card: var(--mat);
  --ink: var(--chu);
  --ink-2: var(--chu-2);
  --ink-3: var(--chu-3);
  --line: var(--vien);
  --clay: var(--cam-nut);
  --clay-dam: var(--cam-800);
  --clay-soft: var(--cam-50);
  --sage: var(--c-giao);
  --sage-soft: var(--n-giao);
  --honey: var(--c-chuY);
  --honey-soft: var(--n-chuY);
  --do: var(--d-tre);
  --do-soft: var(--n-tre);
  --xanh: var(--d-guiGoc);
  --r: var(--bo);
  --r-nho: var(--bo-nho);
  --bong: none;
  --sans: var(--font);
  --cao-thanh-duoi: 64px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--nen);
  color: var(--chu);
  font-family: var(--font);
  font-size: var(--co-noi-dung);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
a { color: var(--cam-chu); }
button, input, select, textarea { font: inherit; color: inherit; }
img { max-width: 100%; }
:focus-visible { outline: 2px solid var(--cam-600); outline-offset: 2px; }
.so { font-variant-numeric: tabular-nums; }
.an { display: none !important; }
.phu-de { color: var(--chu-2); font-size: var(--co-14); }
.nho-xiu { color: var(--chu-3); font-size: var(--co-phu); }
.chu-sang { font-family: var(--font-sang); font-weight: 600; font-variant-numeric: lining-nums; letter-spacing: -.01em; }
/* biểu tượng SVG (public/js/icon.js) */
.ic { width: 1.15em; height: 1.15em; flex: none; vertical-align: -.2em; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ------------------------------------------------ khung */
.man-cho { min-height: 100vh; display: grid; place-content: center; justify-items: center; text-align: center; color: var(--chu-2); gap: 12px; }
.man-cho img { width: 180px; height: auto; }
.khung { min-height: 100vh; display: flex; flex-direction: column; }
.thanh-tren {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: var(--k-2);
  min-height: 56px; padding: env(safe-area-inset-top) var(--k-3) 0 var(--k-2);
  background: color-mix(in srgb, var(--mat) 94%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--vien);
}
.thanh-tren img { width: 36px; height: auto; margin-left: var(--k-2); }
.thanh-tren .tieu-de { font-weight: 700; font-size: var(--co-18); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.thanh-tren .nut-ve { border: 0; background: none; width: var(--cham); height: var(--cham); display: grid; place-items: center; border-radius: var(--bo); cursor: pointer; color: var(--chu); }
.thanh-tren .nut-ve .ic { width: 24px; height: 24px; }
.thanh-tren .nut-ve:hover { background: var(--nen-phu); }
.nguoi-dung { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); text-align: right; }
.nguoi-dung b { color: var(--ink); display: block; font-size: 14px; }
.bang-demo { background: var(--n-chuY); color: var(--c-chuY); border-bottom: 1px solid var(--v-chuY); text-align: center; font-size: var(--co-13); font-weight: 600; padding: 6px 12px; }
.noi-dung { flex: 1; width: 100%; max-width: 780px; margin: 0 auto; padding: var(--k-4) var(--k-4) calc(var(--cao-thanh-duoi) + env(safe-area-inset-bottom) + 24px); }

/* Điều hướng: điện thoại = thanh dưới (biểu tượng + nhãn, mục đang mở có nền cam nhạt sau biểu tượng);
   máy tính (≥900px) = cột menu trái, mục đang mở: nền cam nhạt + vạch cam bên trái */
.thanh-duoi {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex; justify-content: space-around;
  padding: 4px 2px calc(env(safe-area-inset-bottom) + 4px);
  background: var(--mat); border-top: 1px solid var(--vien);
}
.thanh-duoi a {
  position: relative; flex: 1; max-width: 120px; min-height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  text-decoration: none; color: var(--chu-2); font-size: var(--co-11); font-weight: 600; padding: 4px 2px; border-radius: var(--bo);
}
.thanh-duoi .bieu-tuong { display: grid; place-items: center; width: 52px; height: 28px; border-radius: var(--bo-tron); transition: background var(--nhanh); }
.thanh-duoi .bieu-tuong .ic { width: 22px; height: 22px; }
/* nhiều mục trên điện thoại hẹp: chữ không xuống dòng */
@media (max-width: 899px) { .thanh-duoi a { min-width: 0; white-space: nowrap; letter-spacing: -.1px; } }
.thanh-duoi a.dang-mo { color: var(--cam-chu); }
.thanh-duoi a.dang-mo .bieu-tuong { background: var(--cam-100); }
/* điện thoại hẹp: 4 mục chính + "Thêm" (mục chính thừa chuyển vào "Thêm") */
.ds-them .chi-hep { display: none; }
@media (max-width: 479px) {
  .thanh-duoi a.du-hep { display: none; }
  .ds-them a.chi-hep { display: flex; }
  .thanh-duoi .nut-them.chi-hep { display: flex; }
}
@media (min-width: 480px) { .thanh-duoi .nut-them.chi-hep { display: none; } }

@media (min-width: 900px) {
  .khung { flex-direction: row; }
  .thanh-duoi {
    position: sticky; top: 0; height: 100vh; width: 232px; flex-direction: column; justify-content: flex-start;
    gap: 2px; padding: 18px 12px; border-top: 0; border-right: 1px solid var(--vien); order: -1;
  }
  .thanh-duoi a { flex: none; max-width: none; min-height: 40px; flex-direction: row; justify-content: flex-start; gap: 10px;
    font-size: var(--co-14); font-weight: 500; padding: 0 10px; color: var(--chu-2); }
  .thanh-duoi a:hover { background: var(--nen-phu); color: var(--chu); }
  .thanh-duoi .bieu-tuong { width: auto; height: auto; background: none !important; }
  .thanh-duoi .bieu-tuong .ic { width: 19px; height: 19px; }
  .thanh-duoi a.dang-mo { background: var(--cam-50); color: var(--cam-900); font-weight: 600; box-shadow: inset 3px 0 0 var(--cam-500); }
  .thanh-duoi .logo-ben { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 0 6px; color: var(--chu); }
  .thanh-duoi .logo-ben img { width: 40px; height: auto; }
  .thanh-duoi .logo-ben b { display: block; font-size: var(--co-16); }
  .thanh-duoi .logo-ben span { display: block; font-size: var(--co-12); color: var(--chu-3); font-weight: 500; }
  .cot-chinh { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  .noi-dung { padding-bottom: 40px; }
}
@media (max-width: 899px) { .thanh-duoi .logo-ben { display: none; } .cot-chinh { display: contents; } }

/* ------------------------------------------------ khối */
/* Thẻ: A = mặt trắng + đường kẻ mảnh, không bóng. .mem = thẻ bo mềm (B) cho màn Hôm nay / hợp đồng. */
.the { background: var(--mat); border: 1px solid var(--vien); border-radius: var(--bo); padding: var(--k-4); margin-bottom: var(--k-3); }
.the h2, .the h3 { margin: 0 0 10px; font-size: var(--co-16); }
.the.mem { border-color: transparent; border-radius: var(--bo-mem); box-shadow: var(--bong-mem); padding: var(--k-5); }
.the.mem h2, .the.mem h3 { font-family: var(--font-sang); font-weight: 600; font-size: var(--co-20); font-variant-numeric: lining-nums; }
.nen-am { background: var(--nen-am); }
/* vạch trạng thái dày bên trái (C) — đặt kèm lớp .tt-<công đoạn> hoặc biến --d */
.vach-tt { border-left: 5px solid var(--d, var(--vien-dam)); }
.the.phang { box-shadow: none; }
h1.man { font-size: 22px; margin: 4px 0 14px; }
.hang { display: flex; align-items: center; gap: 10px; }
.hang.giua { justify-content: space-between; }
.hang.boc { flex-wrap: wrap; }
.cot { display: flex; flex-direction: column; gap: 10px; }
.luoi-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 420px) { .luoi-2.co-gian { grid-template-columns: 1fr; } }
.gach { height: 1px; background: var(--line); margin: 12px 0; border: 0; }

/* ô vuông chức năng ở trang chủ */
.o-chuc-nang { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 16px; }
@media (min-width: 600px) { .o-chuc-nang { grid-template-columns: repeat(3, 1fr); } }
.o-chuc-nang a {
  display: flex; flex-direction: column; gap: 6px; padding: 16px; min-height: 104px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--bong);
  text-decoration: none; color: var(--ink);
}
.o-chuc-nang a .bieu-tuong { font-size: 26px; }
.o-chuc-nang a b { font-size: 15.5px; }
.o-chuc-nang a span { font-size: 13px; color: var(--ink-2); }
.o-chuc-nang a.noi-bat { background: var(--clay); border-color: var(--clay); color: #fff; }
.o-chuc-nang a.noi-bat span { color: #fff; opacity: .9; }

/* ------------------------------------------------ nút */
/* Nút: .nut = nút phụ (mặc định) · .chinh = hành động chính (mỗi màn 1 nút) · .nguy = xóa / hủy · .trong = nút chữ.
   Cao 40px trên máy tính, 44px trên điện thoại (--cao-nut). Đang lưu: khóa nút + vòng xoay (NutLam / NutLuu). */
.nut {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--k-2);
  min-height: var(--cao-nut); padding: 8px 16px; border-radius: var(--bo-nho); border: 1px solid var(--vien-dam);
  background: var(--mat); color: var(--chu); font-weight: 600; font-size: var(--co-15); line-height: 1.25; cursor: pointer;
  text-decoration: none; transition: transform .06s ease, background var(--nhanh) ease, border-color var(--nhanh) ease;
}
.nut:hover:not(:disabled) { background: var(--nen-phu); }
.nut:active { transform: scale(.98); }
.nut:disabled { opacity: .55; cursor: not-allowed; }
.nut .ic { width: 18px; height: 18px; }
.nut.chinh { background: var(--cam-nut); border-color: var(--cam-nut); color: #fff; }
.nut.chinh:hover:not(:disabled) { background: var(--cam-800); border-color: var(--cam-800); }
.nut.xanh-la { background: var(--d-giao); border-color: var(--d-giao); color: #fff; }
.nut.nguy { color: var(--c-tre); border-color: var(--v-tre); }
.nut.nguy:hover:not(:disabled) { background: var(--n-tre); }
.nut.nguy.dac { background: var(--d-tre); border-color: var(--d-tre); color: #fff; }
.nut.nho { min-height: 34px; padding: 5px 12px; font-size: var(--co-14); }
.nut.rong { width: 100%; }
.nut.trong { border-color: transparent; background: transparent; color: var(--cam-chu); }
.nut.trong:hover:not(:disabled) { background: var(--cam-50); }
.nut.da-luu, .nut.da-luu:hover:not(:disabled) { background: var(--d-giao); border-color: var(--d-giao); color: #fff; }
@media (max-width: 768px) { .nut.nho { min-height: var(--cham); } }

/* ------------------------------------------------ ô nhập */
.truong { display: flex; flex-direction: column; gap: 6px; }
.truong > span { font-size: var(--co-14); font-weight: 600; color: var(--chu-2); }
.truong > span .bat-buoc { color: var(--c-tre); }
.o-nhap, select.o-nhap, textarea.o-nhap {
  width: 100%; min-height: var(--cham); padding: 10px 12px; border-radius: var(--bo-nho);
  border: 1px solid var(--vien-dam); background: var(--mat); font-size: 16px; transition: border-color var(--nhanh), box-shadow var(--nhanh);
}
textarea.o-nhap { min-height: 84px; resize: vertical; }
.o-nhap:hover { border-color: var(--chu-3); }
.o-nhap:focus { outline: none; border-color: var(--cam-700); box-shadow: var(--vong-focus); }
.o-nhap[aria-invalid="true"] { border-color: var(--d-tre); }
.o-nhap.so { text-align: right; font-variant-numeric: tabular-nums; }
.o-tim { position: relative; }
.o-tim .o-nhap { padding-left: 42px; }
.o-tim::before { content: ''; position: absolute; left: 13px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B6B73' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") center / contain no-repeat; }
.goi-y { font-size: var(--co-13); color: var(--chu-3); }
/* Chọn nhanh (lọc dạng viên thuốc): mục đang chọn nền cam nhạt + viền cam */
.chon-nhanh { display: flex; flex-wrap: wrap; gap: 6px; }
.chon-nhanh button {
  min-height: 36px; border: 1px solid var(--vien-dam); background: var(--mat); border-radius: var(--bo-tron); padding: 6px 14px;
  font-size: var(--co-14); font-weight: 500; color: var(--chu-2); cursor: pointer;
}
.chon-nhanh button:hover { border-color: var(--chu-3); color: var(--chu); }
.chon-nhanh button.dang-chon { background: var(--cam-50); border-color: var(--cam-700); color: var(--cam-900); font-weight: 600; }
@media (max-width: 768px) { .chon-nhanh button { min-height: var(--cham); } }
/* điện thoại: nhóm chọn nhanh thành 1 hàng cuộn ngang (không chiếm nhiều hàng trước nội dung) */
@media (max-width: 599px) {
  .chon-nhanh { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px 2px; -webkit-overflow-scrolling: touch; }
  .chon-nhanh::-webkit-scrollbar { display: none; }
  .chon-nhanh button { flex: none; white-space: nowrap; }
}

/* ------------------------------------------------ danh sách */
.ds { display: flex; flex-direction: column; }
.ds-muc {
  display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--line);
  text-decoration: none; color: inherit;
}
.ds-muc:last-child { border-bottom: 0; }
.ds-muc .than { flex: 1; min-width: 0; }
.ds-muc .ten { font-weight: 600; }
.ds-muc .phai { text-align: right; white-space: nowrap; }
a.ds-muc:active { background: var(--clay-soft); }

/* Nhãn (badge): luôn có chữ — màu chỉ để nhìn nhanh. .tt-<công đoạn> tô theo màu công đoạn (token.css). */
.huy-hieu { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--bo-nho); font-size: var(--co-13); font-weight: 600; line-height: 1.45;
  background: var(--nen-phu); border: 1px solid transparent; color: var(--chu-2); white-space: nowrap; }
.huy-hieu .ic { width: 14px; height: 14px; }
.huy-hieu[class*="tt-"] { background: var(--n); color: var(--c); }
.huy-hieu.dam[class*="tt-"] { background: var(--d); color: #fff; }
.huy-hieu.cam { background: var(--cam-50); color: var(--cam-900); }
.huy-hieu.xanh { background: var(--n-giao); color: var(--c-giao); }
.huy-hieu.vang { background: var(--n-chuY); color: var(--c-chuY); }
.huy-hieu.do { background: var(--n-tre); color: var(--c-tre); }

.tien { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.tien.no { color: var(--do); }
.tien.du { color: var(--sage); }
.bang-tien { width: 100%; border-collapse: collapse; font-size: 15px; }
.bang-tien td { padding: 6px 0; }
.bang-tien td:last-child { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; padding-left: 10px; vertical-align: top; }
.bang-tien tr.tong td { font-weight: 700; border-top: 1px solid var(--line); padding-top: 10px; }

/* ------------------------------------------------ thông báo, hộp thoại */
/* Hộp báo: lỗi (đỏ, có nút Thử lại) · cảnh báo (vàng) · thành công (xanh) — nền nhạt + chữ đậm cùng họ màu */
.loi-hop, .canh-bao, .tot-hop { border-radius: var(--bo); padding: 12px 14px; font-size: var(--co-14); margin-bottom: var(--k-3); border: 1px solid transparent; }
.loi-hop { display: flex; gap: 10px; align-items: flex-start; background: var(--n-tre); color: var(--c-tre); border-color: var(--v-tre); }
.canh-bao { background: var(--n-chuY); color: var(--c-chuY); border-color: var(--v-chuY); }
.tot-hop { background: var(--n-giao); color: var(--c-giao); border-color: var(--v-giao); }
.loi-hop > .ic { width: 20px; height: 20px; margin-top: 1px; }
.loi-hop .than-loi { flex: 1; min-width: 0; }
.loi-hop .nut { flex: none; margin: -4px -4px -4px 0; }
/* Màn trống: hình em bé trong logo + lời nhắn + (tuỳ chọn) việc tiếp theo */
.trong-rong { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; color: var(--chu-2); padding: 32px 16px; }
.trong-rong img { width: 88px; height: auto; opacity: .9; }

/* Thông báo nổi (toast): thường · .tot (đã lưu ✓) · .loi (lỗi + nút Thử lại) */
.thong-bao-noi {
  position: fixed; left: 50%; bottom: calc(var(--cao-thanh-duoi) + env(safe-area-inset-bottom) + 16px); transform: translateX(-50%);
  z-index: 60; display: flex; align-items: center; gap: 10px; background: var(--chu); color: #fff; padding: 10px 12px 10px 16px; border-radius: var(--bo);
  font-size: var(--co-14); box-shadow: var(--bong-noi); max-width: calc(100vw - 32px); animation: noi-len var(--vua) ease-out;
}
.thong-bao-noi .ic { width: 20px; height: 20px; }
.thong-bao-noi.tot .ic { color: #8FE3A8; }
.thong-bao-noi.loi { background: var(--c-tre); }
.thong-bao-noi .nut { min-height: 32px; padding: 4px 12px; background: #fff; color: var(--c-tre); border: 0; font-size: var(--co-13); }
@media (min-width: 900px) { .thong-bao-noi { bottom: 24px; } }
@keyframes noi-len { from { opacity: 0; transform: translate(-50%, 8px); } }
/* Hộp thoại: điện thoại = tấm trượt từ dưới lên; máy tính = hộp giữa màn hình */
.man-phu {
  position: fixed; inset: 0; z-index: 50; background: rgba(20, 20, 24, .45); display: flex; align-items: flex-end; justify-content: center;
  animation: mo-man var(--nhanh) ease-out;
}
.man-phu .hop {
  background: var(--mat); width: 100%; max-width: 560px; max-height: 88vh; overflow: auto; box-shadow: var(--bong-noi);
  border-radius: var(--bo-mem) var(--bo-mem) 0 0; padding: 16px 16px calc(env(safe-area-inset-bottom) + 18px);
  animation: truot-len var(--vua) ease-out;
}
@media (min-width: 600px) { .man-phu { align-items: center; } .man-phu .hop { border-radius: var(--bo-lon); padding: 18px 20px 20px; max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); } }
.man-phu .hop h3 { margin: 0; font-size: var(--co-18); }
.man-phu .dau-hop { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: -4px -6px 12px 0; }
.man-phu .nut-dong { width: var(--cham); height: var(--cham); display: grid; place-items: center; border: 0; background: none; border-radius: var(--bo); color: var(--chu-2); cursor: pointer; flex: none; }
.man-phu .nut-dong:hover { background: var(--nen-phu); color: var(--chu); }
.man-phu .nut-dong .ic { width: 22px; height: 22px; }
@keyframes mo-man { from { opacity: 0; } }
@keyframes truot-len { from { transform: translateY(16px); opacity: .6; } }
/* Hộp xác nhận (thay confirm() của trình duyệt): ghi rõ hậu quả, nút nguy hiểm màu đỏ */
.hop-xac-nhan .noi-dung-xn { color: var(--chu-2); margin: 0 0 18px; white-space: pre-line; }
.hop-xac-nhan .hang-nut-xn { display: flex; gap: var(--k-2); justify-content: flex-end; flex-wrap: wrap; }
@media (max-width: 599px) { .hop-xac-nhan .hang-nut-xn { flex-direction: column-reverse; } .hop-xac-nhan .hang-nut-xn .nut { width: 100%; } }

.xoay { width: 18px; height: 18px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; display: inline-block; animation: xoay .7s linear infinite; flex: none; }
@keyframes xoay { to { transform: rotate(360deg); } }
.khung-xuong { background: linear-gradient(90deg, var(--nen-phu) 25%, var(--mat) 50%, var(--nen-phu) 75%); background-size: 200% 100%; animation: sang 1.2s infinite; border-radius: var(--bo-nho); height: 16px; margin: 10px 0; }
.khung-xuong:nth-child(3n+1) { width: 92%; } .khung-xuong:nth-child(3n+2) { width: 74%; } .khung-xuong:nth-child(3n) { width: 84%; }
@keyframes sang { to { background-position: -200% 0; } }

/* ------------------------------------------------ bước (lên hợp đồng) */
.cac-buoc { display: flex; gap: 6px; margin-bottom: 14px; }
.cac-buoc span { flex: 1; height: 5px; border-radius: 99px; background: var(--line); }
.cac-buoc span.xong { background: var(--clay); }
.dong-sp { border: 1px solid var(--line); border-radius: var(--r-nho); padding: 12px; margin-bottom: 10px; background: var(--card); }
.dong-sp .ten { font-weight: 600; }
.chan-co-dinh {
  position: sticky; bottom: calc(var(--cao-thanh-duoi) + env(safe-area-inset-bottom) + 8px); z-index: 10;
  background: var(--mat); border: 1px solid var(--vien); border-radius: var(--bo); box-shadow: var(--bong-noi);
  padding: 10px 12px; display: flex; gap: 10px; align-items: center; margin-top: 12px;
}
@media (min-width: 900px) { .chan-co-dinh { bottom: 12px; } }
.chan-co-dinh .tong { flex: 1; font-size: 13px; color: var(--ink-2); }
.chan-co-dinh .tong b { display: block; font-size: 18px; color: var(--ink); }

.tien-trinh { list-style: none; margin: 0; padding: 0; }
.tien-trinh li { display: flex; gap: 10px; align-items: center; padding: 8px 0; }

/* ------------------------------------------------ hóa đơn */
.xem-hoa-don { background: #e9e4de; border-radius: var(--r); padding: 10px; text-align: center; }
.xem-hoa-don img { width: 100%; max-width: 640px; background: #fff; box-shadow: var(--bong); }
@media print {
  .khung > :not(.cot-chinh), .thanh-tren, .thanh-duoi, .bang-demo, .khong-in { display: none !important; }
  body { background: #fff; }
  .noi-dung { padding: 0; max-width: none; }
  .xem-hoa-don { background: none; padding: 0; }
  .xem-hoa-don img { max-width: none; width: 100%; box-shadow: none; }
  @page { size: A4; margin: 0; }
}

.anh-nho { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); background: var(--paper); cursor: zoom-in; }
.hop-chon { width: 22px; height: 22px; accent-color: var(--cam-chu); }

.anh-bo { position: relative; display: inline-block; }
.nut-xoa-anh {
  position: absolute; top: -8px; right: -8px; width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--card); color: var(--do); font-size: 13px; cursor: pointer; line-height: 1;
}
.anh-lon { width: 100%; border-radius: 10px; display: block; }
.the-nguoi { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-nho); background: var(--card); cursor: pointer; text-align: left; width: 100%; }
.the-nguoi:hover { border-color: var(--clay); }
.the-nguoi .chu-cai { width: 40px; height: 40px; border-radius: 50%; background: var(--clay-soft); color: var(--cam-chu); display: grid; place-content: center; font-weight: 700; flex: none; }
.dang-nhap-khung { max-width: 460px; margin: 0 auto; padding: 32px 16px 48px; }
.dang-nhap-khung .dau { text-align: center; margin-bottom: 20px; }
.dang-nhap-khung .dau img { width: 200px; height: auto; }
.sap-co { opacity: .6; }
.sap-co b::after { content: ' · sắp có'; font-weight: 500; color: var(--ink-3); font-size: 12px; }

/* ------------------------------------------------ chế độ xem (Chủ / Nhân viên) */
.che-do-xem {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 16px; background: var(--card); border-bottom: 1px solid var(--line); font-size: 13.5px;
}
.che-do-xem .nhan { color: var(--ink-2); font-weight: 600; }
.che-do-xem .cong-tac { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.che-do-xem .cong-tac button { border: 0; background: transparent; padding: 6px 14px; cursor: pointer; font-weight: 600; font-size: 13.5px; }
.che-do-xem .cong-tac button.dang-chon { background: var(--clay); color: #fff; }
.che-do-xem.dang-xem { background: var(--honey-soft); }
.che-do-xem .goi-y-xem { color: var(--honey); font-weight: 600; }
.nhom-vai-tro { margin-bottom: 12px; }
.nhom-vai-tro h4 { margin: 8px 0 6px; font-size: 13px; color: var(--ink-2); text-transform: uppercase; letter-spacing: .03em; }

/* ------------------------------------------------ trang Hôm nay */
.chao { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 2px 0 12px; }
.chao h1 { font-size: 21px; margin: 0; }
.hanh-dong-nhanh { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
.hanh-dong-nhanh > * { flex: none; white-space: nowrap; }
.so-lieu { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 600px) { .so-lieu { grid-template-columns: repeat(4, 1fr); } }
.so-lieu > div, .so-lieu > a {
  background: var(--paper); border-radius: var(--r-nho); padding: 10px 12px; text-decoration: none; color: inherit; display: block;
}
.so-lieu .nhan { font-size: 12.5px; color: var(--ink-2); }
.so-lieu .gt { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.so-lieu .phu { font-size: 12px; color: var(--ink-3); }
.nhom-hk { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (min-width: 600px) { .nhom-hk { grid-template-columns: repeat(4, 1fr); } }
.nhom-hk > :is(div, a) { background: var(--paper); border-radius: var(--r-nho); padding: 10px; }
.nhom-hk .so { font-size: 20px; font-weight: 700; }
.nhom-hk .ten { font-size: 12.5px; color: var(--ink-2); }
.nhom-hk .rong0 { opacity: .45; }
.ca-chup { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.ca-chup:last-child { border-bottom: 0; }
.ca-chup .gio { font-weight: 700; font-size: 16px; min-width: 50px; font-variant-numeric: tabular-nums; }
.tieu-de-khoi { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.tieu-de-khoi h2 { margin: 0; font-size: 17px; }

/* ------------------------------------------------ ② Lịch chụp */
.loc-lich { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.loc-lich .ngay-chon { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--cao-nut);
  font-weight: 700; font-size: var(--co-16); position: relative; cursor: pointer; border: 1px solid var(--vien-dam); border-radius: var(--bo-nho); background: var(--mat); }
.loc-lich .ngay-chon:hover { border-color: var(--chu-3); }
.loc-lich .ngay-chon .ic { color: var(--chu-3); }
.nut.nut-vuong { width: var(--cao-nut); padding: 0; flex: none; }
.an-ngay { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.tom-tat-lich { margin-bottom: 12px; }
.nut-loc { cursor: pointer; font: inherit; font-size: var(--co-13); min-height: 30px; }
.nut-loc.dang-loc { box-shadow: 0 0 0 2px var(--d); }
@media (max-width: 768px) { .nut-loc { min-height: 40px; padding: 4px 12px; } }
.nhom-ngay { margin: 22px 2px 6px; padding-bottom: 6px; font-size: var(--co-15); color: var(--chu); display: flex; justify-content: space-between; border-bottom: 2px solid var(--chu); }
.nhom-ngay span:last-child { color: var(--chu-3); font-weight: 600; font-size: var(--co-13); }
.hang-huy-hieu.phai { justify-content: flex-end; }
h3.co-ic, h2.co-ic { display: flex; align-items: center; gap: 8px; }
h3.co-ic .ic, h2.co-ic .ic { color: var(--chu-3); width: 18px; height: 18px; }
.vai { color: var(--chu-3); font-weight: 500; }
a.ca-lich { display: block; text-decoration: none; color: inherit; }
a.ca-lich:active { background: var(--clay-soft); }
.ca-lich .dau { display: flex; gap: 12px; align-items: flex-start; }
.ca-lich .than { flex: 1; min-width: 0; }
.ca-lich .ten { font-weight: 700; font-size: 16px; }
.ca-lich .huy { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.gio-lon { font-size: 20px; font-weight: 800; min-width: 58px; color: var(--chu); font-variant-numeric: tabular-nums; line-height: 1.2; }
.gio-to { font-size: 32px; font-weight: 800; color: var(--chu); line-height: 1.1; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.ca-lich .goi { margin-top: 8px; font-size: 13.5px; color: var(--ink-2); white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ekip { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.chip-ekip { font-size: 12.5px; padding: 3px 10px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); }
.chip-ekip.thieu { background: var(--do-soft); border-color: transparent; color: var(--do); font-weight: 600; }
.ghi-chu-ngan { margin-top: 8px; font-size: 13px; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Thẻ ca — phương án A "thẻ gọn" (25/09): vạch trạng thái bên trái (luôn kèm nhãn chữ), gói 1 dòng, ekip 1 dòng, nút biểu tượng */
a.ca-lich { position: relative; padding: 14px 14px 12px 22px; }
a.ca-lich::before { content: ''; position: absolute; left: 8px; top: 12px; bottom: 12px; width: 5px; border-radius: 3px; background: var(--vien-dam); }
a.ca-lich.tt-do::before { background: var(--d-tre); }
a.ca-lich.tt-vang::before { background: var(--d-chuY); }
a.ca-lich.tt-xanh::before { background: var(--d-giao); }
.ca-lich .dau { align-items: baseline; gap: 10px; }
.ca-lich .gio-lon { min-width: 0; }
.ca-lich .ten { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; }
.ca-lich .nguon-ten { font-weight: 500; font-size: 12px; color: var(--ink-3); margin-left: 6px; }
.ca-lich .huy { align-self: flex-start; }
.ca-lich .goi-gon { margin-top: 4px; font-size: 14px; color: var(--chu-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ca-lich .ekip-gon { display: flex; flex-wrap: wrap; gap: 2px 12px; margin-top: 8px; font-size: 14px; color: var(--chu); }
.ca-lich .ekip-gon .thieu { color: var(--do); font-weight: 600; }
.ca-lich .ghi-chu-ngan { margin-top: 6px; }
.ghi-chu-ngan.mot-dong { -webkit-line-clamp: 1; }
.ca-lich .hang-chep { margin-top: 8px; }
.hang-chep.gon { flex-wrap: wrap; }
.hang-nut { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; min-height: 40px; }
.hang-nut:empty { display: none; }
.hang-nut .nhom-anh { display: flex; gap: 6px; margin-left: auto; flex: none; }
.nut-bt { min-width: 40px; height: 40px; padding: 0 8px; border: 0; border-radius: 10px; background: var(--paper); color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: inherit; font-size: 17px; cursor: pointer; }
.nut-bt:hover { background: var(--clay-soft); }
.nut-bt:disabled { opacity: .6; cursor: progress; }
.nut-bt.sdt { padding: 0 12px; font-size: 14.5px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; flex: none; }
.nut-bt, .anh-mini { flex: none; }
.nut-bt.da { position: relative; background: var(--sage-soft); }
.nut-bt.da::after { content: '✓'; position: absolute; right: 3px; bottom: 1px; font-size: 11px; font-weight: 800; color: var(--sage); }
.nut-bt.tinh { cursor: default; }
.anh-mini { position: relative; width: 40px; height: 40px; border-radius: 8px; overflow: hidden; background: var(--paper); flex: none; }
.anh-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.anh-mini .con-lai { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .45); color: #fff; font-weight: 700; font-size: 13px; }
@media (max-width: 768px) {
  .ca-lich .goi-gon, .ca-lich .ekip-gon, .ca-lich .ghi-chu-ngan { font-size: 16px; }
  .nut-bt { min-width: 44px; height: 44px; }
  .nut-bt.sdt { font-size: 15px; }
  .anh-mini { width: 44px; height: 44px; }
}
.luoi-concept { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.luoi-concept.nho { grid-template-columns: repeat(4, 56px); margin-top: 10px; }
.o-concept { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--paper); border: 1px solid var(--line); }
.o-concept img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: zoom-in; }
.o-concept .nut-xoa-anh { top: 4px; right: 4px; }
.o-concept .con-lai { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .45); color: #fff; font-weight: 700; }
.o-concept.them { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--cam-chu); font-weight: 600; font-size: 13px; cursor: pointer; border-style: dashed; }
/* Tiền gói chốt / đã cọc trong chi tiết lịch — sửa nhanh bằng nút riêng */
.tien-chot-lich { margin-top: 10px; }
.tien-chot-lich .o-ekip .ten { font-size: var(--co-16); font-variant-numeric: tabular-nums; }
.tien-chot-lich > .hang { margin-top: 6px; justify-content: space-between; flex-wrap: wrap; gap: 6px 10px; }
.hd-trong-lich { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line); }
.dong-goi { padding: 6px 0; }
.hang-ekip { display: flex; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.hang-ekip:last-child { border-bottom: 0; }
.hang-ekip .nhan { min-width: 104px; color: var(--ink-2); font-size: 14px; }
.chu-do { color: var(--c-tre); font-weight: 600; }
.chu-do .ic, .ca-lich .thieu .ic { width: 15px; height: 15px; vertical-align: -.15em; }
.nhom-chon { margin-bottom: 14px; }
.nhom-chon h4 { margin: 0 0 8px; font-size: 14px; }
.chip-chon { font: inherit; font-size: var(--co-14); font-weight: 500; padding: 6px 14px; min-height: 36px; border-radius: var(--bo-tron); border: 1px solid var(--vien-dam); background: var(--mat); color: var(--chu-2); cursor: pointer; }
.chip-chon:hover { border-color: var(--chu-3); color: var(--chu); }
.chip-chon.dang-chon { background: var(--cam-50); border-color: var(--cam-700); color: var(--cam-900); font-weight: 600; }
.chip-chon.mo-them { color: var(--cam-chu); border-style: dashed; }
@media (max-width: 768px) { .chip-chon { min-height: var(--cham); } }

/* ------------------------------------------------ ③ Hậu kỳ */
@media (max-width: 899px) {
  .thanh-duoi a.phu { display: none; }
  /* thanh dưới điện thoại: giữ thứ tự mục chính (Trang chủ · Lịch chụp · Hậu kỳ · Lên HĐ …) dù menu máy tính xếp theo nhóm */
  .thanh-duoi a { order: var(--duoi, 50); }
  .thanh-duoi .nut-them { order: 99; }
}
.loc-cong-doan { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 10px; -webkit-overflow-scrolling: touch; }
.loc-cong-doan .chip-chon { flex: none; white-space: nowrap; }
.chip-chon.tre { color: var(--do); border-color: var(--do); }
.chip-chon.tre.dang-chon { background: var(--do); color: #fff; }
.the-viec .dau { display: flex; gap: 10px; align-items: flex-start; text-decoration: none; color: inherit; }
.the-viec .dau .than { flex: 1; min-width: 0; }
.the-viec .ten { font-weight: 700; font-size: 16px; }
.the-viec.tre, .the-tre { border-color: color-mix(in srgb, var(--do) 45%, var(--line)); }
.nhom-hk a { text-decoration: none; color: inherit; }
.noi-bat { font-weight: 700; font-size: 16px; padding: 8px 10px; background: var(--clay-soft); border-radius: 8px; margin-top: 2px; }
.nut-chu { border: 0; background: none; color: var(--cam-chu); font: inherit; font-weight: 600; cursor: pointer; padding: 0 4px; }
details.the summary { cursor: pointer; }

/* ------------------------------------------------ Trang chủ: concept khách chọn ở góc phải mỗi ca */
.concept-ca { display: grid; grid-template-columns: repeat(3, 64px); gap: 6px; align-self: flex-start; flex: none; }
.concept-ca .o-concept { padding: 0; font: inherit; }
/* thân thẻ ca: co giãn theo chỗ còn lại (flex-basis 0 → trên điện thoại phải ép ảnh concept xuống hàng riêng) */
.ca-chup .than-ca { flex: 1 1 0; min-width: 0; text-decoration: none; color: inherit; }
/* mô tả gói dài → 3 dòng, bấm vào ca để xem đủ */
.ca-chup .goi-ca { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--chu-3); } /* gói 1 dòng nhạt — đủ gói xem trong cửa sổ ca */
@media (max-width: 599px) {
  .ca-chup { flex-wrap: wrap; column-gap: 10px; row-gap: 6px; }
  .ca-chup .gio { min-width: 44px; }
  /* ảnh concept xuống hàng riêng dưới tên khách (thẳng hàng với chữ, không chiếm chỗ cột tên) */
  .concept-ca { order: 3; flex: 0 0 calc(100% - 54px); margin-left: 54px; grid-template-columns: repeat(3, 64px); }
  /* nút Lên HĐ / HĐ › xuống hàng dưới, để cột tên khách đủ rộng */
  .ca-chup .nut-ca { order: 4; flex: 0 0 calc(100% - 54px); margin-left: 54px; }
  .ca-chup .nut-ca:empty { display: none; }
  .ca-chup .nut-ca .nut { white-space: nowrap; }
}

/* ------------------------------------------------ Menu: nhóm "Studio" (máy tính) · nút "Thêm" (điện thoại) */
.thanh-duoi .nhom-ten { display: none; }
.mui-ngoai { font-size: .85em; color: var(--ink-3); }
.thanh-duoi .nut-them {
  flex: 1; max-width: 120px; min-height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: 0; background: none;
  font: inherit; color: var(--chu-2); font-size: var(--co-11); font-weight: 600; padding: 4px 2px; border-radius: var(--bo); cursor: pointer; white-space: nowrap;
}
.thanh-duoi .nut-them.dang-mo { color: var(--cam-chu); }
.thanh-duoi .nut-them.dang-mo .bieu-tuong { background: var(--cam-100); }
@media (min-width: 900px) {
  .thanh-duoi { overflow-y: auto; }
  .thanh-duoi .nut-them { display: none; }
  .thanh-duoi .nhom-ten { display: block; margin: 16px 10px 4px; font-size: var(--co-11); font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--chu-3); }
}
.ds-them { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.ds-them .nhom-ten { grid-column: 1 / -1; margin-top: 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.ds-them a {
  display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 10px 12px; border: 1px solid var(--vien); border-radius: var(--bo);
  background: var(--mat); color: var(--chu); text-decoration: none; font-weight: 600; font-size: var(--co-15);
}
.ds-them a .bieu-tuong { display: grid; place-items: center; color: var(--chu-2); }
.ds-them a .bieu-tuong .ic { width: 20px; height: 20px; }
.ds-them a.dang-mo { border-color: var(--cam-700); background: var(--cam-50); color: var(--cam-900); }

/* ------------------------------------------------ Mục Studio chờ nội dung */
.sap-co { text-align: center; padding: 28px 20px; }
.sap-co .bt-lon { font-size: 48px; line-height: 1; margin-bottom: 8px; }
.sap-co h2 { margin: 0 0 8px; }

/* Ô chọn ảnh: gợi ý dán ảnh từ bộ nhớ — chỉ máy tính (có chuột) */
.goi-y-dan { display: none; align-self: center; font-size: 13px; color: var(--ink-3); }
.goi-y-dan kbd { font: inherit; font-weight: 600; padding: 1px 6px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 6px; background: var(--card); color: var(--ink-2); }
@media (hover: hover) and (pointer: fine) { .goi-y-dan { display: inline; } }

/* ------------------------------------------------ Nút sao chép nhanh (mã KH, link hội thoại) */
.hang-chep { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.nut-chep {
  display: inline-flex; align-items: center; gap: 5px;
  font: inherit; font-size: var(--co-13); font-weight: 600; line-height: 1.2; padding: 4px 10px; min-height: 30px;
  border: 1px solid var(--vien-dam); border-radius: var(--bo-nho); background: var(--mat); color: var(--chu-2); cursor: pointer; text-decoration: none;
}
.nut-chep .ic { width: 15px; height: 15px; }
.nut-chep, .nut-lien-he .nut { white-space: nowrap; }
.nut-chep:hover { border-color: var(--cam-700); color: var(--cam-chu); }
.hang-sdt { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; }
.cap-sdt { display: inline-flex; align-items: center; gap: 4px; flex: none; } /* số + nút gọi luôn đi liền nhau */
.nut-sdt { font-variant-numeric: tabular-nums; }
@media (max-width: 768px) { .nut-chep { min-height: 40px; padding: 6px 12px; font-size: var(--co-14); } }
.hang-huy-hieu { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

/* ------------------------------------------------ Lịch tháng (+ lịch nghỉ nhân sự) */
.noi-dung.rong-lich { max-width: 1100px; }
/* Chi tiết ca chụp: ca bên trái — hợp đồng bên phải (từ 1000px); hẹp hơn thì hợp đồng xuống dưới */
.hai-cot { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.hai-cot .cot-phai .dau-hd-nhung { margin: 4px 2px 8px; }
@media (min-width: 1000px) {
  .noi-dung.rong-lich:has(.hai-cot) { max-width: 1400px; }
  .hai-cot { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hai-cot .cot-phai { position: sticky; top: 64px; max-height: calc(100vh - 80px); overflow-y: auto; padding-right: 2px; }
  .hai-cot .chi-dt { display: none; }
}
/* Lịch chụp theo khung giờ: các ca cùng khung xếp cạnh nhau như thư viện ảnh */
.khung-gio { margin: 6px 0 14px; }
.ten-khung { display: flex; justify-content: space-between; align-items: center; margin: 14px 2px 8px; font-size: var(--co-15); color: var(--chu);
  border-bottom: 1px solid var(--vien); padding-bottom: 6px; }
.ten-khung > span:first-child { display: inline-flex; align-items: center; gap: 6px; }
.ten-khung .ic { color: var(--chu-3); }
.luoi-ca { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; align-items: start; }
.luoi-ca > .the { margin: 0; }
.lien-he-ca { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.lien-he-ca .sdt { font-variant-numeric: tabular-nums; font-weight: 600; }
/* 📋 Lịch nhiều ngày dạng bảng */
.bang-lich-cuon { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--card, var(--paper)); margin-bottom: 16px; }
.bang-lich { width: 100%; min-width: 980px; border-collapse: collapse; font-size: 13.5px; }
.bang-lich th { text-align: left; font-size: 12px; color: var(--ink-3); font-weight: 700; padding: 8px 10px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: inherit; }
.bang-lich td { padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.bang-lich .hang-ngay td { background: var(--nen-phu); color: var(--chu); padding: 8px 10px; border-top: 1px solid var(--vien-dam); }
.bang-lich .dong-ca { cursor: pointer; }
.bang-lich .dong-ca:hover td { background: var(--cam-50); }
.bang-lich .dong-ca td:first-child { box-shadow: inset 5px 0 0 var(--vien-dam); padding-left: 14px; }
.bang-lich .dong-ca.tt-do td:first-child { box-shadow: inset 5px 0 0 var(--d-tre); }
.bang-lich .dong-ca.tt-vang td:first-child { box-shadow: inset 5px 0 0 var(--d-chuY); }
.bang-lich .dong-ca.tt-xanh td:first-child { box-shadow: inset 5px 0 0 var(--d-giao); }
.bang-lich .hang-huy-hieu { display: flex; flex-wrap: wrap; gap: 4px; }
.bang-lich .o-gio { width: 70px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bang-lich .o-khach { width: 210px; }
.bang-lich .o-goi { width: 260px; }
.bang-lich .o-ekip { width: 190px; line-height: 1.5; }
.bang-lich .o-concept img { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); }
.kep-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-line; }
.lt-luoi { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.lt-thu { text-align: center; font-size: 12px; font-weight: 700; color: var(--ink-3); padding: 2px 0 4px; }
.lt-o { min-height: 128px; min-width: 0; overflow: hidden; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 5px 6px;
  text-align: left; font: inherit; color: inherit; cursor: pointer; display: flex; flex-direction: column; gap: 3px; position: relative; }
.lt-o:hover { border-color: var(--clay); }
.lt-o.trong { background: transparent; border-color: transparent; cursor: default; }
.lt-o.qua { background: var(--paper); }
.lt-o.qua .lt-ca { opacity: .7; }
.lt-o.hom-nay { border-color: var(--clay); box-shadow: inset 0 0 0 1px var(--clay); }
.lt-o.dang-chon { background: var(--clay-soft); }
.lt-o.cn .lt-so > span:first-child { color: var(--cam-chu); }
.lt-so { display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: 13px; }
.lt-dem { font-size: 11px; color: var(--ink-3); font-weight: 600; }
.lt-ca, .lt-nghi { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
/* Ca chụp: 1 màu chung (xanh dương, khác cam thương hiệu và khác lịch nghỉ xanh lá / vàng) — không tô theo photo nữa (25/09) */
:root { --lt-ca-nen: #EAF1FB; --lt-ca-vach: #3B6FB6; }
.lt-dong { font-size: 11.5px; line-height: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--chu);
  background: var(--lt-ca-nen); border-left: 3px solid var(--lt-ca-vach); border-radius: 4px; padding: 0 4px; }
.lt-dong.thieu { background: var(--mat); border-left: 3px dashed var(--do); box-shadow: inset 0 0 0 1px var(--vien); }
.lt-dong .ic { width: 11px; height: 11px; color: var(--do); vertical-align: -.1em; margin-right: 2px; }
.lt-dong b { font-variant-numeric: tabular-nums; font-weight: 700; }
.lt-chu-thich .lt-dong { display: inline-block; vertical-align: middle; }
.lt-chu-thich > span > .ic { width: 13px; height: 13px; color: var(--do); vertical-align: -.15em; }
/* Số ca theo ekip: Photo / Stylist / Makeup — bấm tên để lọc lịch */
.lt-ekip { display: flex; flex-direction: column; gap: 6px; margin: -2px 0 12px; }
.lt-ekip-hang { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.lt-ekip-vai { flex: none; width: 58px; padding-top: 5px; font-size: var(--co-13); font-weight: 600; color: var(--chu-2); }
.lt-ekip-ds { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.lt-chip { font: inherit; font-size: var(--co-13); cursor: pointer; border-radius: 999px; padding: 4px 10px; min-height: 30px; color: var(--chu);
  background: var(--mat); border: 1px solid var(--vien-dam); white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
.lt-chip b { font-variant-numeric: tabular-nums; color: var(--chu-2); }
.lt-chip:hover { border-color: var(--cam-700); }
.lt-chip.thieu { border-style: dashed; border-color: var(--do); color: var(--do); }
.lt-chip.thieu b { color: var(--do); }
.lt-chip .ic { width: 14px; height: 14px; }
.lt-chip.dang-chon { background: var(--cam-50); border-color: var(--cam-700); color: var(--cam-900); font-weight: 600; box-shadow: 0 0 0 1px var(--cam-700); }
.lt-chip.mo { opacity: .5; }
.lt-bo-loc { align-self: flex-start; margin-left: 66px; }
@media (max-width: 599px) {
  /* điện thoại: mỗi vai trò 1 hàng cuộn ngang, không chiếm cả màn */
  .lt-ekip-ds { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .lt-ekip-ds::-webkit-scrollbar { display: none; }
  .lt-ekip-vai { width: 52px; }
  .lt-chip { min-height: 36px; }
  .lt-bo-loc { margin-left: 0; }
}
.lt-them { font-size: 11px; color: var(--ink-3); }
.lt-chip-nghi { display: inline-block; max-width: 100%; font-size: 11px; line-height: 16px; border-radius: 6px; padding: 0 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border: 1px solid transparent; }
.lt-chip-nghi.duyet { background: var(--sage-soft); color: var(--sage); }
.lt-chip-nghi.cho { border: 1px dashed var(--honey); color: var(--honey); }
.lt-cham { display: none; }
.lt-cham i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--lt-ca-vach); margin: 0 1px; }
.lt-cham i.thieu { background: transparent; border: 1px dashed var(--do); width: 5px; height: 5px; }
.lt-cham em { font-style: normal; display: block; margin-top: 2px; }
.lt-chu-thich { display: flex; gap: 6px 14px; flex-wrap: wrap; align-items: center; font-size: 12px; color: var(--ink-3); margin: 8px 2px 0; }
.lt-ngay { margin-top: 12px; }
.lt-hang-ca { display: flex; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; }
.lt-hang-ca:last-of-type { border-bottom: 0; }
.lt-hang-ca .gio { font-weight: 800; color: var(--cam-chu); min-width: 48px; font-variant-numeric: tabular-nums; }
.lt-hang-ca { border-left: 4px solid var(--lt-ca-vach); padding-left: 8px; }
.lt-hang-ca.thieu { border-left: 4px dashed var(--do); }
.lt-hang-ca .than { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lt-hang-ca .huy { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.lt-tieu-nghi { margin: 14px 0 2px; font-size: 14px; }
.lt-hang-nghi { padding: 8px 0; border-bottom: 1px solid var(--line); }
.lt-hang-nghi:last-of-type { border-bottom: 0; }
@media (max-width: 599px) {
  .lt-luoi { gap: 2px; }
  .lt-o { min-height: 58px; padding: 4px 2px; border-radius: 8px; align-items: center; gap: 2px; }
  .lt-so { flex-direction: column; gap: 0; }
  .lt-dem { font-size: 10px; }
  .lt-ca, .lt-nghi { display: none; }
  .lt-cham { display: block; font-size: 10px; line-height: 1; text-align: center; }
}

/* ------------------------------------------------ Chi cửa hàng */
.so-to { font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.2; }
.thanh-ns { height: 8px; border-radius: 999px; background: var(--line); overflow: hidden; margin-top: 8px; }
.thanh-ns span { display: block; height: 100%; border-radius: 999px; background: var(--sage); }
.thanh-ns.vang span { background: var(--honey); }
.thanh-ns.do span { background: var(--do); }
.hang-nhom-chi { display: block; width: 100%; text-align: left; font: inherit; color: inherit; background: none; border: 0;
  border-bottom: 1px solid var(--line); padding: 10px 2px; cursor: pointer; }
.hang-nhom-chi:last-child { border-bottom: 0; }
.hang-nhom-chi.dang-chon { background: var(--clay-soft); border-radius: 8px; padding-inline: 8px; }
.dong-chi { padding: 10px 0; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.dong-chi:last-child { border-bottom: 0; }
.so-tien-chi { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------ Album ảnh mẫu (link sang web studio) */
.luoi-lien-ket { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; margin-bottom: 14px; }
.o-lien-ket { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.o-lien-ket a { display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: inherit; }
.o-lien-ket .bt-lon { font-size: 30px; line-height: 1.2; }

/* ------------------------------------------------ Trang chủ: việc cần làm + sale hôm nay */
.viec-hom-nay { border-left: 4px solid var(--clay); }
.dong-viec { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 4px; border: 0; border-bottom: 1px solid var(--line);
  background: none; font: inherit; color: inherit; text-decoration: none; cursor: pointer; text-align: left; }
.viec-hom-nay > :last-child .dong-viec, .viec-hom-nay > a.dong-viec:last-child { border-bottom: 0; }
.dong-viec .bt { width: 24px; text-align: center; }
.dong-viec .so { font-size: 18px; min-width: 28px; font-variant-numeric: tabular-nums; color: var(--cam-chu); }
.dong-viec.do .so { color: var(--do); }
.dong-viec .ten { flex: 1; }
.dong-viec .mui { color: var(--ink-3); }
.dong-viec:hover { background: var(--clay-soft); }
.ds-chua-hd { padding: 4px 4px 10px 38px; display: flex; flex-direction: column; gap: 6px; }
.theo-sale { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.dong-viec .phu-viec { display: block; margin-top: 1px; }
.ds-chua-hd .dong-mo { text-decoration: none; color: inherit; gap: 8px; padding: 4px 0; border-bottom: 1px dashed var(--line); }
.ds-chua-hd .dong-mo:last-child { border-bottom: 0; }
.ma-anh { white-space: pre-line; font-variant-numeric: tabular-nums; background: var(--paper); border: 1px solid var(--line);
  border-radius: 10px; padding: 8px 10px; max-height: 260px; overflow: auto; word-break: break-word; }
/* 📥 Khách tiềm năng (THỐNG KÊ CRM) + thẻ CRM trong form chốt khách */
.the-lead { margin-bottom: 10px; }
.tom-tat-lead { margin-top: 6px; font-size: 14px; white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.tom-tat-lead.mo { display: block; }
.insight-lead { margin-top: 6px; font-size: 14px; white-space: pre-line; background: var(--clay-soft); border-radius: 8px; padding: 6px 8px; }
.the-crm { border: 1px solid var(--line); background: var(--paper); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
/* Hậu kỳ dạng danh sách: lưới thẻ như thư viện, tự co giãn theo độ rộng màn hình (điện thoại 1 cột) */
.luoi-viec { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 12px; align-items: start; }
.luoi-viec > .the { margin: 0; }
.link-anh-nhanh { gap: 6px; margin-top: 6px; }
.link-anh-nhanh a { text-decoration: none; }
/* 📦 Hậu kỳ — khâu in / soạn / giao ảnh */
.khoi-giao { margin-top: 8px; padding: 8px 10px; border-radius: 10px; background: var(--paper); border: 1px solid var(--line); }
.khoi-giao .nhan-giao { font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.khoi-giao .ds-sp { margin: 4px 0 0; padding-left: 18px; }
.khoi-giao .ds-sp li { margin: 2px 0; }
/* 📊 Chỉ số studio (trang chủ) */
.chi-so { border-left: 4px solid var(--sage); }
.kpi-luoi { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 600px) { .kpi-luoi { grid-template-columns: 1.4fr 1fr; } }
.kpi-muc { display: flex; flex-direction: column; gap: 2px; }
.kpi-muc .thanh-ns { margin: 4px 0 2px; }
.kpi-pt { font-size: 22px; font-weight: 800; color: var(--sage); font-variant-numeric: tabular-nums; }
.kpi-pt.vang { color: var(--honey); }
.kpi-pt.cam { color: var(--cam-chu); }

/* ------------------------------------------------ Báo cáo */
.thanh-ns.cam span { background: var(--clay); }
.bc-luoi { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; margin-bottom: 12px; }
.bc-luoi .the { margin: 0; }
.bc-the { display: flex; flex-direction: column; gap: 4px; }
.bc-nhan { font-size: 12px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: .2px; }
.bc-pt { font-size: 30px; font-weight: 800; line-height: 1.1; color: var(--cam-chu); font-variant-numeric: tabular-nums; }
.bc-pt.xanh { color: var(--sage); }
.bc-pt.vang { color: var(--honey); }
.bc-gt { font-size: 24px; font-weight: 800; line-height: 1.2; font-variant-numeric: tabular-nums; }
.bc-gt.do { color: var(--do); }
.bc-gt.xanh { color: var(--sage); }
.bc-xh { padding: 6px 0; }
.bc-thanh { height: 8px; border-radius: 999px; background: var(--line); overflow: hidden; margin-top: 4px; }
.bc-thanh span { display: block; height: 100%; background: var(--clay); border-radius: 999px; }
.bc-chu-thich { font-size: 12px; color: var(--ink-3); display: inline-flex; gap: 6px; align-items: center; }
.bc-chu-thich i, .bc-cham { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 2px; vertical-align: middle; }
.bc-chu-thich i.a, .bc-cham.a, .bc-cot-than .a, .bc-chia .a { background: var(--clay); }
.bc-chu-thich i.b, .bc-cham.b, .bc-cot-than .b, .bc-chia .b { background: var(--honey); }
.bc-cot { display: grid; grid-template-columns: repeat(var(--so), minmax(0, 1fr)); gap: 3px; align-items: end; height: 170px; margin-top: 8px; }
.bc-cot-o { display: flex; flex-direction: column; align-items: center; height: 100%; min-width: 0; }
.bc-cot-so { font-size: 10px; color: var(--ink-2); height: 14px; white-space: nowrap; overflow: visible; }
.bc-cot-than { flex: 1; width: 100%; max-width: 38px; display: flex; flex-direction: column; justify-content: flex-end; border-radius: 4px 4px 0 0; overflow: hidden; background: var(--paper); }
.bc-cot-than span { display: block; width: 100%; }
.bc-cot-nhan { font-size: 10px; color: var(--ink-3); margin-top: 2px; }
.bc-chia { display: flex; height: 14px; border-radius: 999px; overflow: hidden; background: var(--line); }
.bc-chia span { display: block; height: 100%; }
.cuon-ngang { overflow-x: auto; }
.bc-bang { border-collapse: collapse; width: 100%; font-size: 13.5px; white-space: nowrap; }
.bc-bang th, .bc-bang td { padding: 7px 8px; border-bottom: 1px solid var(--line); text-align: right; font-variant-numeric: tabular-nums; }
.bc-bang th:first-child, .bc-bang td:first-child { text-align: left; position: sticky; left: 0; background: var(--card); }
.bc-bang th { font-size: 12px; color: var(--ink-3); }
@media (max-width: 599px) {
  .bc-luoi { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .bc-gt { font-size: 18px; }
  .bc-pt { font-size: 24px; }
  .bc-cot-so { display: none; }
}

/* ------------------------------------------------ Bảng lương */
.the-luong { padding: 0; overflow: hidden; }
.dau-luong { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; padding: 14px 16px; border: 0;
  background: none; font: inherit; color: inherit; cursor: pointer; text-align: left; }
.dau-luong .phai { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.so-luong { font-size: 17px; font-variant-numeric: tabular-nums; }
.chi-tiet-luong { padding: 0 16px 14px; border-top: 1px solid var(--line); }
.chi-tiet-luong h4 { margin: 12px 0 4px; font-size: 13.5px; color: var(--ink-2); }
.dong-luong { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; font-size: 14px; }
.dong-luong b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.dong-luong.dam { font-weight: 700; border-top: 1px dashed var(--line); margin-top: 2px; padding-top: 5px; }
.ds-thuong-phat { background: var(--paper); border-radius: 8px; padding: 6px 10px; margin: 4px 0; display: flex; flex-direction: column; gap: 3px; }
.tong-luong { margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: var(--sage-soft); }

/* ------------------------------------------------ Hậu kỳ: bảng kéo thả trạng thái */
.noi-dung.rong-bang { max-width: none; }
.bang-tt { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 10px; scroll-snap-type: x proximity; align-items: flex-start; }
.cot-tt { --nen-tt: hsl(var(--h, 30) 70% 95%); --dam-tt: hsl(var(--h, 30) 60% 40%);
  flex: 0 0 272px; width: 272px; min-width: 0; background: var(--nen-tt); border: 1px solid var(--line); border-radius: 12px; padding: 8px; scroll-snap-align: start;
  max-height: calc(100vh - 250px); display: flex; flex-direction: column; transition: box-shadow .12s, background .12s; }
:root[data-theme="dark"] .cot-tt { --nen-tt: hsl(var(--h, 30) 25% 18%); --dam-tt: hsl(var(--h, 30) 60% 70%); }
.cot-tt.xong { flex-basis: 220px; width: 220px; opacity: .85; border-style: dashed; }
.cot-tt.trong { flex-basis: 190px; width: 190px; }
.cot-tt.dich { box-shadow: 0 0 0 3px var(--dam-tt); }
.cot-tt h3 { margin: 2px 2px 8px; font-size: 13px; display: flex; justify-content: space-between; gap: 6px; align-items: center; min-width: 0; }
.cot-tt .nhan-tt { background: var(--dam-tt); color: #fff; border-radius: 999px; padding: 2px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cot-tt .dem-tt { color: var(--ink-3); font-weight: 700; }
/* thẻ trong cột: không co lại theo chiều cao cột (cột tự cuộn), không làm cột nở ngang */
.cot-tt-than { display: flex; flex-direction: column; gap: 6px; overflow-y: auto; overflow-x: hidden; min-height: 40px; min-width: 0; }
.cot-tt-than > * { flex: none; }
.the-gon { background: var(--card); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; min-width: 0; }
.the-gon.keo-duoc { cursor: grab; }
.the-gon.dang-keo { opacity: .45; }
.the-gon:hover { border-color: var(--clay); }
.the-gon.tre { border-left: 3px solid var(--do); }
.the-gon-than { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; text-decoration: none; color: inherit; }
.the-gon .ten { font-weight: 700; font-size: 14px; }
.the-gon .dong-1 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.the-gon .link-anh-nhanh { padding: 0 10px 8px; }
.chuyen-tt { width: 100%; border: 0; border-top: 1px solid var(--line); background: var(--paper); color: var(--ink-2); font: inherit; font-size: 12px; padding: 5px 8px; cursor: pointer; }
.tha-vao { border: 1px dashed var(--line); border-radius: 10px; padding: 14px 8px; text-align: center; font-size: 12px; color: var(--ink-3); }
@media (hover: hover) and (pointer: fine) {
  .chuyen-tt { opacity: 0; height: 0; padding: 0; border: 0; }
  .the-gon:hover .chuyen-tt, .chuyen-tt:focus { opacity: 1; height: auto; padding: 5px 8px; border-top: 1px solid var(--line); }
}
@media (max-width: 599px) {
  .cot-tt { flex-basis: 82vw; width: 82vw; max-height: none; }
}
.chi-tiet-sp { white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.bo-qua-thu { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.ban-moi { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--cao-thanh-duoi, 64px) + env(safe-area-inset-bottom) + 12px); z-index: 60;
  display: flex; gap: 10px; align-items: center; background: var(--ink); color: var(--paper); padding: 8px 10px 8px 16px; border-radius: 999px;
  box-shadow: 0 6px 20px rgba(0,0,0,.2); font-size: 14px; white-space: nowrap; }
@media (min-width: 900px) { .ban-moi { bottom: 20px; } }
.loc-tho { align-items: center; margin-top: -2px; }
.dang-loc-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 10px; padding: 8px 12px; border-radius: 10px;
  background: var(--honey-soft); font-size: 13.5px; }
.nhom-chi { border-bottom: 1px solid var(--line); }
.nhom-chi:last-child { border-bottom: 0; }
.nhom-chi .hang-nhom-chi { border-bottom: 0; }
.mui-mo { display: inline-block; width: 12px; color: var(--ink-3); }
.chi-hang-muc { margin: 0 0 10px 18px; padding: 4px 10px; border-left: 3px solid var(--clay-soft); display: flex; flex-direction: column; }
.dong-hang-muc { display: block; width: 100%; text-align: left; font: inherit; color: inherit; background: none; border: 0; padding: 7px 4px; cursor: pointer; border-radius: 8px; font-size: 14px; }
.dong-hang-muc:hover, .dong-hang-muc.dang-chon { background: var(--clay-soft); }
.dong-hang-muc .bc-thanh { height: 6px; }
/* màu trạng thái theo công đoạn (token.css .tt-*) — cột bảng kéo thả, nút chọn trạng thái, danh sách chọn */
.cot-tt.co-mau { background: color-mix(in srgb, var(--n) 60%, var(--mat)); border-color: var(--v); }
.cot-tt.co-mau .nhan-tt { background: var(--d); color: #fff; }
.cot-tt.co-mau.dich { box-shadow: 0 0 0 3px var(--d); }
.co-tt[class*="tt-"] { background: var(--n); color: var(--c); border-color: var(--v); }
.ds-chon-tt { display: flex; flex-direction: column; gap: 6px; }
.the-tt { display: flex; align-items: center; gap: 8px; min-height: var(--cham); text-align: left; border-radius: var(--bo-nho); padding: 8px 14px; border: 1px solid var(--vien); border-left: 5px solid var(--d, var(--vien-dam));
  font: inherit; font-weight: 600; cursor: pointer; background: var(--n, var(--mat)); color: var(--c, var(--chu)); }
.the-tt:hover { filter: brightness(.97); }
.the-tt.dang-chon { outline: 2px solid var(--chu); outline-offset: 2px; }
.nut-tt { flex: 1; text-align: left; cursor: pointer; font-weight: 600; border-radius: var(--bo-nho); }
.nut-luu { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.nut-luu .loi-nut { color: var(--c-tre); font-size: var(--co-13); }
.mui-ngoai { color: var(--chu-3); }
.nut-tt.tt-dau { flex: none; max-width: 62%; white-space: normal; text-align: center; }
button.chuyen-tt { text-align: left; }

/* ------------------------------------------------ 🔔 Thông báo */
.nut-chuong { position: relative; display: grid; place-items: center; width: var(--cham); height: var(--cham); border-radius: var(--bo); color: var(--chu); text-decoration: none; flex: none;
  border: 0; background: none; cursor: pointer; padding: 0; }
.nut-chuong:hover { background: var(--nen-phu); }
.nut-chuong .ic { width: 22px; height: 22px; }
.so-chuong { position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--bo-tron);
  background: var(--d-tre); color: #fff; font-size: var(--co-11); font-weight: 700; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px var(--mat); }
.so-chuong.trong-menu { position: static; margin-left: 6px; display: inline-block; vertical-align: middle; }
.thanh-duoi .nut-them { position: relative; }
@media (max-width: 899px) { .thanh-duoi .nut-them .so-chuong.trong-menu { position: absolute; top: 2px; right: 18%; margin: 0; } }
.hop-thu { padding: 0; overflow: hidden; }
.dong-tin { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; }
.dong-tin:last-child { border-bottom: 0; }
.dong-tin:hover { background: var(--paper); }
.dong-tin.moi { background: var(--clay-soft); }
.dong-tin .bt { font-size: 20px; line-height: 1.3; }
.dong-tin .than { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.noi-dung-tin { font-size: 14px; color: var(--ink-2); white-space: pre-line; }
.cham-moi { width: 9px; height: 9px; border-radius: 50%; background: var(--do); margin-top: 6px; flex: none; }
.dong-cau-hinh { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.dong-cau-hinh .nhan { min-width: 130px; color: var(--ink-3); font-size: 13px; }
.dong-cau-hinh code { background: var(--paper); padding: 3px 8px; border-radius: 6px; font-size: 13px; word-break: break-all; }

/* ------------------------------------------------ Bảng dùng chung (Giai đoạn 2): bảng rộng cuộn trong khung riêng */
.bang-cuon { overflow-x: auto; border: 1px solid var(--vien); border-radius: var(--bo); background: var(--mat); }
.bang { width: 100%; border-collapse: collapse; font-size: var(--co-14); }
.bang th { text-align: left; font-size: var(--co-12); font-weight: 700; color: var(--chu-3); text-transform: uppercase; letter-spacing: .04em;
  padding: 10px 12px; border-bottom: 1px solid var(--vien); background: var(--nen-phu); white-space: nowrap; }
.bang td { padding: 10px 12px; border-bottom: 1px solid var(--vien); vertical-align: top; }
.bang tr:last-child td { border-bottom: 0; }
.bang .so { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bang tbody tr:hover td { background: var(--nen-phu); }

/* ------------------------------------------------ #/giao-dien — bộ mẫu thành phần */
.gd-muc { margin: 0 0 28px; }
.gd-muc h2 { font-size: var(--co-18); margin: 0 0 8px; }
.gd-muc h3 { font-size: var(--co-14); color: var(--chu-2); margin: 14px 0 8px; }
.gd-hang { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.gd-o-mau { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); border-radius: var(--bo); overflow: hidden; border: 1px solid var(--vien); margin-bottom: 10px; }
.gd-o-mau.trung { grid-template-columns: repeat(9, minmax(0, 1fr)); }
.gd-o-mau div { padding: 18px 6px 8px; font-size: var(--co-12); text-align: center; overflow: hidden; text-overflow: ellipsis; }
.gd-chu { display: flex; flex-direction: column; gap: 6px; }
.gd-icon { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
.gd-icon div { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 4px; border: 1px solid var(--vien); border-radius: var(--bo); background: var(--mat); font-size: var(--co-12); color: var(--chu-2); }
.gd-icon .ic { width: 24px; height: 24px; color: var(--chu); }
.gd-luoi-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 12px; }
.gd-luoi-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 12px; }
.gd-luoi-2 > .the, .gd-luoi-3 > .the { margin: 0; }
@media (max-width: 599px) { .gd-o-mau, .gd-o-mau.trung { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* ------------------------------------------------ Giai đoạn 3 · Lịch chụp: chi tiết ca */
.dau-ca-tren { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px 12px; flex-wrap: wrap; }
.dau-ca-tren .hang-huy-hieu { max-width: 55%; }
@media (max-width: 599px) { .dau-ca-tren .hang-huy-hieu { max-width: none; width: 100%; justify-content: flex-start; } }
.ten-ca { margin: 12px 0 10px; font-size: var(--co-24); line-height: 1.25; }
.ten-ca .nguon-ten { font-size: var(--co-14); font-weight: 500; color: var(--chu-3); margin-left: 8px; }
.nut-lien-he { gap: 8px; }
.tien-do-ca h3 { margin-bottom: 4px; }
.buoc-ca { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--vien); }
.buoc-ca:first-of-type { border-top: 0; }
.buoc-ca .than { flex: 1; min-width: 0; }
.cham-buoc { width: 28px; height: 28px; flex: none; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: var(--co-13);
  border: 2px solid var(--vien-dam); color: var(--chu-3); background: var(--mat); }
.cham-buoc .ic { width: 16px; height: 16px; }
.buoc-ca.xong .cham-buoc { background: var(--d-giao); border-color: var(--d-giao); color: #fff; }
.ghi-chu-ca { white-space: pre-line; background: var(--nen-am); border-left: 4px solid var(--cam-300); border-radius: var(--bo-nho); padding: 10px 12px; }
.hang-ekip .nhan { color: var(--chu-3); }
/* nút việc tiếp theo ghim ở đáy màn điện thoại (trên thanh điều hướng) — máy tính ẩn, nút nằm trong khối Tiến độ ca */
.thanh-hanh-dong-dt { display: none; }
@media (max-width: 899px) {
  .thanh-hanh-dong-dt { display: block; position: fixed; left: 0; right: 0; z-index: 25;
    bottom: calc(var(--cao-thanh-duoi) + env(safe-area-inset-bottom)); padding: 10px 16px; background: color-mix(in srgb, var(--mat) 94%, transparent);
    backdrop-filter: blur(8px); border-top: 1px solid var(--vien); }
  .thanh-hanh-dong-dt .nut { min-height: 52px; font-size: var(--co-16); }
  main.co-thanh-hanh-dong { padding-bottom: calc(var(--cao-thanh-duoi) + env(safe-area-inset-bottom) + 96px); }
  .buoc-ca .nut.chinh { display: none; } /* đã có nút ghim ở đáy màn */
}
.nut-xoa-anh { display: grid; place-items: center; }
.nut-xoa-anh .ic { width: 14px; height: 14px; }
.o-concept.them .ic { width: 22px; height: 22px; }
.lt-chip-nghi .ic, .lt-cham .ic { width: 11px; height: 11px; vertical-align: -.1em; }

/* ------------------------------------------------ Giai đoạn 3 · Trang chủ (Hôm nay theo vai trò) */
.trang-chu .chao { display: block; margin: 4px 0 14px; }
.trang-chu .chao h1 { font-size: 30px; line-height: 1.15; margin: 0 0 4px; }
.hanh-dong-nhanh { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; }
.hanh-dong-nhanh > * { flex: none; white-space: nowrap; }
@media (max-width: 599px) {
  .hanh-dong-nhanh { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px 16px; padding: 0 16px 2px; scrollbar-width: none; }
  .hanh-dong-nhanh::-webkit-scrollbar { display: none; }
}
.tieu-de-khoi { flex-wrap: wrap; row-gap: 8px; }
.tieu-de-khoi h2 { font-size: var(--co-16); }
.lien-khoi { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.lien-khoi:hover { color: var(--cam-chu); }
.lien-khoi .ic:last-child { width: 16px; height: 16px; color: var(--chu-3); }
.tieu-phu { margin: 16px 0 4px; font-size: var(--co-14); color: var(--chu-2); }
/* bố cục: điện thoại 1 cột (thứ tự theo vai trò) · máy tính ≥1100px 2 cột */
.luoi-trang-chu { display: flex; flex-direction: column; }
.cot-tc { display: contents; }
.luoi-trang-chu .k-chi-so { order: 1; }
.luoi-trang-chu .k-viec { order: 2; }
.luoi-trang-chu .ca-tiep, .luoi-trang-chu .k-lich { order: 3; }
.luoi-trang-chu .k-hau-ky { order: 4; }
.luoi-trang-chu .k-sale { order: 5; }
.luoi-trang-chu .k-han-giao { order: 6; }
.luoi-trang-chu .k-tien { order: 7; }
.luoi-trang-chu.ekip .ca-tiep { order: 0; }
.luoi-trang-chu.ekip .k-lich { order: 1; }
@media (min-width: 1100px) {
  .noi-dung.trang-chu { max-width: 1320px; }
  .luoi-trang-chu { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 16px; align-items: start; }
  .luoi-trang-chu .k-chi-so { grid-column: 1 / -1; margin: 0; order: 0; }
  .cot-tc { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
  .cot-tc > .the { margin: 0; }
}
/* chỉ số studio */
.chi-so { border-left: 1px solid var(--vien); }
.kpi-nhan { display: inline-flex; align-items: center; gap: 6px; font-size: var(--co-13); color: var(--chu-2); font-weight: 600; }
.kpi-nhan .ic { color: var(--chu-3); }
.kpi-so { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 4px; }
.kpi-so span { font-size: var(--co-14); font-weight: 500; color: var(--chu-3); }
.kpi-pt { font-size: 18px; font-weight: 800; color: var(--cam-chu); font-variant-numeric: tabular-nums; }
.kpi-pt.dat { color: var(--c-giao); }
.thanh-kpi { height: 8px; border-radius: 4px; background: var(--nen-phu); overflow: hidden; margin: 8px 0 4px; }
.thanh-kpi span { display: block; height: 100%; background: var(--cam-500); border-radius: 4px; }
.so-lieu > div, .so-lieu > a { border-radius: var(--bo); padding: 12px; }
.so-lieu .nhan { font-size: var(--co-13); color: var(--chu-2); }
.so-lieu .gt { font-size: 20px; }
.so-lieu .phu { font-size: var(--co-12); color: var(--chu-3); }
/* việc cần làm */
.viec-hom-nay { border-left: 1px solid var(--vien); }
.dong-viec { min-height: 52px; padding: 10px 4px; border-bottom-color: var(--vien); }
.dong-viec .bt { width: 28px; display: grid; place-items: center; color: var(--chu-3); }
.dong-viec .bt .ic { width: 20px; height: 20px; }
.dong-viec .so { font-size: 20px; min-width: 30px; color: var(--chu); }
.dong-viec.do .so, .dong-viec.do .bt { color: var(--c-tre); }
.dong-viec .mui { color: var(--chu-3); display: grid; place-items: center; }
.dong-viec:hover { background: var(--nen-phu); }
/* lịch trên trang chủ */
.ca-chup { position: relative; padding: 12px 0 12px 14px; border-bottom-color: var(--vien); }
.ca-chup::before { content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 4px; border-radius: 2px; background: var(--vien-dam); }
.ca-chup.tt-do::before { background: var(--d-tre); }
.ca-chup.tt-vang::before { background: var(--d-chuY); }
.ca-chup.tt-xanh::before { background: var(--d-giao); }
.ca-chup .gio { font-size: 17px; font-weight: 800; color: var(--chu); }
.ten-ca-nho { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.ghi-ngan { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ghi-ngan .ic { width: 14px; height: 14px; vertical-align: -.15em; }
/* ca tiếp theo của ekip (thẻ bo mềm, chữ có chân) */
.ca-tiep-dau { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; }
.nhan-muc { font-size: var(--co-13); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--cam-chu); }
.ca-tiep-than { display: block; text-decoration: none; color: inherit; }
.ca-tiep-gio { font-size: 34px; line-height: 1.1; }
.ca-tiep h3 { font-size: 24px; margin: 4px 0; }
.ca-tiep h3 .nguon-ten { font-family: var(--font); font-size: var(--co-14); font-weight: 500; color: var(--chu-3); margin-left: 8px; }
.ca-tiep-ekip { margin-top: 6px; color: var(--chu-2); display: flex; gap: 6px; align-items: center; }
.ca-tiep .ghi-chu-ca { margin-top: 12px; }
.ghi-chu-ca b.co-ic { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; font-size: var(--co-14); color: var(--cam-900); }
.concept-ca.lon { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 12px 0 0; order: 0; flex: none; }
.concept-ca.lon .o-concept { aspect-ratio: 4 / 5; }
@media (max-width: 599px) { .concept-ca.lon { margin-left: 0; flex: none; } }
/* hậu kỳ theo công đoạn */
.k-hau-ky .cong-doan { display: flex; flex-direction: column; }
.k-hau-ky .cong-doan a { display: grid; grid-template-columns: minmax(0, 1fr) 90px 36px; align-items: center; gap: 10px; padding: 9px 2px;
  border-bottom: 1px solid var(--vien); text-decoration: none; color: inherit; }
.k-hau-ky .cong-doan a:last-child { border-bottom: 0; }
.k-hau-ky .cong-doan a:hover { background: var(--nen-phu); }
.k-hau-ky .cong-doan a.rong0 { opacity: .55; }
.k-hau-ky .cd-ten { display: flex; align-items: center; gap: 8px; font-size: var(--co-14); }
.k-hau-ky .cd-ten::before { content: ''; width: 10px; height: 10px; border-radius: 3px; background: var(--d); flex: none; }
.k-hau-ky .cd-thanh { height: 8px; border-radius: 4px; background: var(--nen-phu); overflow: hidden; }
.k-hau-ky .cd-thanh i { display: block; height: 100%; background: var(--d); border-radius: 4px; }
.k-hau-ky .cd-so { text-align: right; font-variant-numeric: tabular-nums; }
.ds-muc.vach-tt { padding-left: 10px; }
.theo-sale .huy-hieu .ic { width: 13px; height: 13px; }
/* điện thoại: thẻ trang chủ bo mềm trên nền kem (phương án B) */
@media (max-width: 899px) {
  .trang-chu { background: var(--nen-am); }
  .trang-chu .the { border-color: transparent; border-radius: var(--bo-mem); box-shadow: var(--bong-mem); }
  .thanh-tren + .trang-chu, .khung:has(.trang-chu) { background: var(--nen-am); }
}
@media (min-width: 900px) { .thanh-tren:has(+ .trang-chu) img { display: none; } }

/* ------------------------------------------------ Giai đoạn 3 · Hậu kỳ */
.the-viec .dau { gap: 10px; }
.the-viec .ten { font-size: var(--co-16); }
.the-viec.vach-tt { border-top-left-radius: var(--bo-nho); border-bottom-left-radius: var(--bo-nho); }
.goi-viec { margin-top: 6px; font-size: var(--co-14); color: var(--chu-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.moc-viec { margin-top: 6px; display: flex; align-items: center; gap: 6px; }
.moc-viec .ic { width: 14px; height: 14px; }
.the-viec .link-anh-nhanh { margin-top: 10px; }
.buoc-tiep { width: 100%; margin-top: 10px; justify-content: flex-start; }
.buoc-tiep .ic:last-child { margin-left: auto; color: var(--chu-3); }
.chip-chon .ic { width: 15px; height: 15px; vertical-align: -.2em; }
.chip-chon.cham-cd::before { content: ''; display: inline-block; width: 9px; height: 9px; border-radius: 3px; background: var(--d); margin-right: 6px; vertical-align: .05em; }
.chip-chon b { font-weight: 700; margin-left: 2px; }
.nhan-giao.co-ic { display: flex; align-items: center; gap: 6px; }
.nhan-giao .ic { width: 15px; height: 15px; }
.nhan-muc-nho { font-size: var(--co-13); font-weight: 700; color: var(--chu-3); margin: 12px 0 4px; }
.the > .nhan-muc-nho:first-of-type { margin-top: 0; }
.the-gon .huy-hieu .ic, .chuyen-tt .ic { width: 13px; height: 13px; }
.chuyen-tt { display: flex; align-items: center; justify-content: center; gap: 6px; }
@media (max-width: 899px) {
  .buoc-hk .nut.chinh { display: none; } /* nút chính đã ghim ở đáy màn */
  .buoc-hk:not(:has(.nut:not(.chinh))) { display: none; }
}
@media (min-width: 600px) { .loc-cong-doan { flex-wrap: wrap; overflow-x: visible; } }
.loc-cong-doan { scrollbar-width: none; }
.loc-cong-doan::-webkit-scrollbar { display: none; }
.loc-tho > .nho-xiu { flex: none; white-space: nowrap; }

/* ------------------------------------------------ Giảm giá chi tiết từng dòng (Lên HĐ / sửa dòng) */
.giam-dong { margin-top: 10px; padding: 10px 12px; border-radius: var(--bo); background: var(--nen-phu); border: 1px solid var(--vien); }
.giam-dong .nhan-giam { display: inline-flex; align-items: center; gap: 6px; font-size: var(--co-14); }
.giam-dong .nhan-giam .ic { width: 16px; height: 16px; color: var(--cam-chu); }
.chon-nhanh.gon button { min-height: 32px; padding: 4px 12px; font-size: var(--co-13); }
@media (max-width: 768px) { .chon-nhanh.gon button { min-height: 40px; } }
.goi-y-giam { gap: 6px; margin-top: 6px; }
.tom-tat-giam { margin-top: 8px; font-size: var(--co-14); color: var(--c-giao); }
.giam-dong .chon-nhanh.gon { margin: 0; padding: 0; flex-wrap: wrap; overflow: visible; }

/* ------------------------------------------------ ô chỉ số bấm được → cửa sổ chi tiết (25/09) */
.o-bam { font: inherit; color: inherit; text-align: left; border: 0; background: none; cursor: pointer; min-width: 0; -webkit-tap-highlight-color: transparent; }
.o-bam:focus-visible { outline: 2px solid var(--cam-500); outline-offset: 2px; }
.o-bam .mui-bam { width: 16px; height: 16px; color: var(--chu-3); flex: none; transition: transform var(--nhanh) ease-out; }
.o-bam:hover .mui-bam { color: var(--cam-chu); transform: translateX(2px); }
.kpi-muc.o-bam { width: calc(100% + 20px); margin: -8px -10px; padding: 8px 10px; border-radius: var(--bo); }
.kpi-muc.o-bam:hover { background: var(--nen-phu); }
.so-lieu > .o-bam { display: block; width: 100%; background: var(--nen-phu); border-radius: var(--bo); padding: 12px; transition: box-shadow var(--nhanh) ease-out; }
.so-lieu > .o-bam:hover { box-shadow: inset 0 0 0 1px var(--vien-dam); }
.so-lieu > .o-bam .nhan { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.ct-tong { display: flex; align-items: baseline; justify-content: space-between; gap: 4px 10px; flex-wrap: wrap; }
.ct-tong b { font-size: 26px; font-variant-numeric: tabular-nums; }
.ct-ghi-chu { margin: 2px 0 12px; }
.ct-cac-nhom { display: grid; gap: 4px 20px; padding: 12px 0 4px; border-top: 1px solid var(--vien); }
@media (min-width: 600px) { .ct-cac-nhom { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } }
.ct-nhom { margin-bottom: 8px; min-width: 0; }
.ct-nhom h4 { margin: 0 0 4px; font-size: var(--co-12); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--chu-3); }
.ct-thanh { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 10px; padding: 5px 0; font-size: var(--co-13); }
.ct-thanh .ten { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-thanh .gt { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.ct-thanh .gt .nho-xiu { font-weight: 400; }
.ct-thanh .vach { grid-column: 1 / -1; height: 4px; border-radius: 2px; background: var(--nen-phu); overflow: hidden; }
.ct-thanh .vach span { display: block; height: 100%; border-radius: 2px; background: var(--cam-500); }
.ct-loc { margin: 8px 0 4px; }
.ct-ds { border-top: 1px solid var(--vien); margin-top: 8px; }
.dong-ct { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; align-items: start; min-height: var(--cham);
  padding: 10px 4px; border-bottom: 1px solid var(--vien); color: inherit; text-decoration: none; }
a.dong-ct:hover { background: var(--nen-phu); }
.dong-ct.khong-luc { grid-template-columns: minmax(0, 1fr) auto; }
.dong-ct .luc { font-size: var(--co-12); color: var(--chu-3); font-variant-numeric: tabular-nums; line-height: 1.35; padding-top: 2px; }
.dong-ct .than { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dong-ct .ten { font-weight: 600; overflow-wrap: anywhere; }
.dong-ct .ten .ic { width: 14px; height: 14px; color: var(--chu-3); vertical-align: -2px; }
.dong-ct .phu { font-size: var(--co-12); color: var(--chu-2); overflow-wrap: anywhere; }
.dong-ct .phai { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dong-ct .phai .nho-xiu { font-weight: 400; }
.dong-ct .phai .huy-hieu { font-size: var(--co-12); padding: 0 6px; }

/* ------------------------------------------------ Chi tiết ca gọn (chủ 26/09): đầu thẻ gọn, tiến độ 1 hàng, nhảy nhanh tới Khách / Ekip */
.dau-ca.gon .dau-ca-tren { justify-content: flex-start; align-items: baseline; gap: 4px 12px; }
.dau-ca.gon .gio-to { font-size: 28px; }
.dau-ca-ngay { color: var(--chu-2); font-size: var(--co-14); }
.dau-ca-tren .nut-doi-gio { min-height: 30px; padding: 2px 8px; font-size: var(--co-13); }
.doi-gio-ngay { padding: 10px 12px; border-radius: var(--bo-nho); background: var(--paper); }
.dau-ca.gon .ten-ca { margin: 6px 0 6px; font-size: var(--co-20); }
.dau-ca-nhan { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-bottom: 10px; }
.dau-ca-nhan .huy-hieu { font-size: var(--co-12); padding: 1px 8px; }
.dau-ca.gon .nut-lien-he { display: flex; flex-wrap: wrap; gap: 6px; }
.dau-ca.gon .nut-lien-he .nut, .dau-ca.gon .nut-lien-he .nut-chep { min-height: 40px; padding: 6px 12px; font-size: var(--co-14); }
.tien-do-gon { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--vien); }
.buoc-gon { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 10px; border-radius: var(--bo); border: 1px solid var(--vien-dam);
  background: var(--mat); color: var(--chu-2); font: inherit; font-size: var(--co-14); font-weight: 600; text-align: left; line-height: 1.25; min-width: 0; }
button.buoc-gon { cursor: pointer; }
button.buoc-gon:hover:not(:disabled) { border-color: var(--cam-700); }
.buoc-gon .cham-buoc { width: 24px; height: 24px; font-size: var(--co-12); }
.buoc-gon.xong { background: var(--n-giao); border-color: transparent; color: var(--c-giao); }
.buoc-gon.xong .cham-buoc { background: var(--d-giao); border-color: var(--d-giao); color: #fff; }
/* thanh nhảy nhanh: dính dưới thanh trên khi cuộn */
.nhay-muc { position: sticky; top: calc(56px + env(safe-area-inset-top)); z-index: 15; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
  margin: -4px -16px 10px; padding: 8px 16px; background: color-mix(in srgb, var(--nen) 94%, transparent); backdrop-filter: blur(8px); }
.nhay-muc::-webkit-scrollbar { display: none; }
.nhay-muc button { flex: none; display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 4px 14px; border-radius: 999px;
  border: 1px solid var(--vien-dam); background: var(--mat); color: var(--chu); font: inherit; font-size: var(--co-14); font-weight: 600; cursor: pointer; white-space: nowrap; }
.nhay-muc button:hover { border-color: var(--cam-700); color: var(--cam-chu); }
.nhay-muc button .ic { width: 15px; height: 15px; color: var(--do); }
.muc-ca { scroll-margin-top: calc(112px + env(safe-area-inset-top)); }
.muc-ca > .the { margin-top: 0; }
#cot-hop-dong { scroll-margin-top: calc(112px + env(safe-area-inset-top)); }
/* ekip dạng lưới 2 cột: Photo · Stylist / Makeup · Support */
.luoi-ekip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.luoi-ekip .o-ekip { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: var(--bo); background: var(--nen-phu); min-width: 0; }
.luoi-ekip .o-ekip .nhan { font-size: var(--co-12); color: var(--chu-3); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.luoi-ekip .o-ekip .ten { font-weight: 600; overflow-wrap: anywhere; }
@media (min-width: 1000px) { .nhay-muc { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; } }
/* ------------------------------------------------ Cửa sổ xem nhanh ca chụp / việc hậu kỳ (chủ 26/09) */
.xem-nhanh { display: flex; flex-direction: column; gap: 10px; }
.xem-nhanh .dau-ca-nhan { margin: 0; }
.xn-dau { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin-top: -6px; }
.xn-dau .gio-to { font-size: 28px; }
.xem-nhanh .nut-lien-he { display: flex; flex-wrap: wrap; gap: 6px; }
.xem-nhanh .nut-lien-he .nut, .xem-nhanh .nut-lien-he .nut-chep { min-height: 40px; padding: 6px 12px; font-size: var(--co-14); }
.xem-nhanh .tien-do-gon { margin-top: 0; }
.xn-buoc { display: flex; flex-wrap: wrap; gap: 6px; }
.xn-buoc .nut { min-height: 44px; }
.xn-muc { border-top: 1px solid var(--vien); padding-top: 12px; }
.xn-muc h4 { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; margin: 0 0 8px; font-size: var(--co-12); font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--chu-3); }
.xn-muc h4 > .ic { width: 15px; height: 15px; }
.xn-muc h4 .chu-do, .xn-muc h4 .huy-hieu { text-transform: none; letter-spacing: 0; font-size: var(--co-13); }
.xn-muc h4 .nut-chep { margin-left: auto; text-transform: none; letter-spacing: 0; }
.xn-muc .phu-de { margin: 0; }
.xn-muc .nhan-muc-nho:first-of-type { margin-top: 0; }
/* Hậu kỳ (chủ 30/09): tiến độ gọn 1 hàng, dặn dò chỉnh sửa nổi bật, ghi chú buổi chụp thu gọn */
.td-hk { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
/* đang fix: thêm mốc "Hạn fix" nằm riêng một hàng dưới 4 mốc */
.td-hk li.fix { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.td-hk li { display: flex; flex-direction: column; gap: 2px; padding-top: 6px; border-top: 3px solid var(--vien); min-width: 0; }
.td-hk li.co { border-top-color: var(--cam-700); }
.td-hk li.do { border-top-color: var(--d-tre); }
.td-hk li.do b { color: var(--d-tre); }
.td-hk span { font-size: var(--co-12); color: var(--chu-3); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.td-hk b { font-variant-numeric: tabular-nums; }
.xn-td-phu { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 8px; }
.dan-do-chinh { white-space: pre-line; padding: 10px 12px; border-left: 3px solid var(--cam-700); border-radius: var(--bo-nho); background: var(--nen-phu); }
details.xn-gon + details.xn-gon { margin-top: 8px; }
details.xn-gon summary { cursor: pointer; font-size: var(--co-13); font-weight: 600; color: var(--chu-3); }
details.xn-gon[open] summary { margin-bottom: 6px; }
.xn-anh { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 6px; }
.xn-anh img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--bo-nho); border: 1px solid var(--vien); cursor: zoom-in; }
.xn-kep { max-height: 7.5em; overflow: auto; }
.chu-xanh { color: var(--c-giao); }
/* chân cửa sổ: nút mở trang đầy đủ dính đáy khi cuộn (hộp bỏ đệm dưới, chân tự chừa vùng an toàn) */
.man-phu .hop:has(.xn-chan) { padding-bottom: 0; }
.xn-chan { position: sticky; bottom: 0; z-index: 2; display: flex; gap: 8px; margin: 4px -16px 0; padding: 12px 16px calc(env(safe-area-inset-bottom) + 14px);
  background: var(--mat); border-top: 1px solid var(--vien); box-shadow: 0 -6px 12px -10px rgba(0, 0, 0, .18); }
.xn-chan .nut { flex: none; justify-content: center; min-height: 44px; white-space: nowrap; }
.xn-chan .nut.chinh { flex: 1 1 auto; }
@media (min-width: 600px) { .xn-chan { margin: 4px -20px 0; padding: 12px 20px 16px; } }
/* ------------------------------------------------ Lên HĐ: hợp đồng theo ngày chụp + cửa sổ hợp đồng (chủ 26/09) */
.ds-hd-thang { margin-top: 24px; }
.ds-hd-thang > h2 { font-size: var(--co-18); margin: 0 0 10px; }
.ds-hd-thang .nhom-ngay { margin-top: 16px; }
.dong-hd { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; padding: 10px 6px; min-height: var(--cham);
  border-bottom: 1px solid var(--vien); color: inherit; text-decoration: none; border-radius: var(--bo-nho); }
.dong-hd:hover { background: var(--nen-phu); }
.dong-hd .than { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.dong-hd .ten { font-weight: 700; overflow-wrap: anywhere; }
.dong-hd .hang-huy-hieu:empty { display: none; }
.dong-hd .hang-huy-hieu .huy-hieu { font-size: var(--co-12); padding: 1px 7px; }
.dong-hd .phai { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.man-phu .hop.rong { max-width: 980px; }
@media (min-width: 600px) { .man-phu .hop.rong { width: min(980px, calc(100vw - 48px)); } }
.xem-nhanh-hd > :first-child { margin-top: 0; }
.xn-chan.phai { justify-content: flex-end; }
.xn-muc .tieu-de-khoi { margin-bottom: 8px; }
.xn-muc .tieu-de-khoi h4 { margin: 0; }
.xn-muc .luoi-concept { margin-top: 0; }
/* ------------------------------------------------ Ekip dạng chip theo vai trò (phương án A, chủ chọn 26/09) */
:root {
  --vt-photo-n: #E3EEFB; --vt-photo-c: #1D4F8C; --vt-makeup-n: #FBE8F0; --vt-makeup-c: #8B2352;
  --vt-stylist-n: #E4F3E7; --vt-stylist-c: #23613A; --vt-support-n: #ECEAFB; --vt-support-c: #463C97;
}
.ds-chip-ek { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; min-width: 0; }
.ds-chip-ek.cot { flex-direction: column; align-items: flex-start; margin-top: 0; }
.chip-ek { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 2px 9px 2px 7px; border-radius: 999px;
  font-size: var(--co-13); font-weight: 600; line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chip-ek .ic { width: 14px; height: 14px; flex: none; }
.chip-ek.vt-photo { background: var(--vt-photo-n); color: var(--vt-photo-c); }
.chip-ek.vt-makeup { background: var(--vt-makeup-n); color: var(--vt-makeup-c); }
.chip-ek.vt-stylist { background: var(--vt-stylist-n); color: var(--vt-stylist-c); }
.chip-ek.vt-support { background: var(--vt-support-n); color: var(--vt-support-c); }
.chip-ek.thieu { background: transparent; border: 1px dashed var(--d-tre); color: var(--c-tre); padding: 1px 9px 1px 7px; }
@media (max-width: 599px) { .chip-ek { font-size: var(--co-14); padding: 3px 10px 3px 8px; } .chip-ek .ic { width: 15px; height: 15px; } }
/* bảng 7 ngày: nút phân công thành bút chì nhỏ ở góc ô ekip */
.bang-lich td.o-ekip { position: relative; }
.bang-lich .o-ekip .nut-pc + .ds-chip-ek { padding-right: 38px; }
.bang-lich .o-ekip .nut-pc { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--vien-dam);
  border-radius: var(--bo-nho); background: var(--mat); color: var(--chu-2); cursor: pointer; }
.bang-lich .o-ekip .nut-pc:hover { border-color: var(--cam-700); color: var(--cam-chu); }
.bang-lich .o-ekip .nut-pc .ic { width: 16px; height: 16px; }
.lt-hang-ca .ds-chip-ek { margin-top: 4px; }
/* ------------------------------------------------ Đối chiếu chuyển khoản SePay ↔ phiếu thu (chủ 26/09) */
.chon-gd { border: 1px solid var(--vien); border-radius: var(--bo); padding: 10px 12px; background: var(--nen-am); }
.chon-gd.can-chon { border-color: var(--d-chuY); }
.chon-gd .co-ic .ic { color: var(--chu-3); }
.ds-gd { display: flex; flex-direction: column; gap: 6px; }
.gd { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer;
  padding: 8px 10px; min-height: var(--cham); border: 1px solid var(--vien-dam); border-radius: var(--bo-nho); background: var(--mat); }
.gd:hover:not(:disabled) { border-color: var(--cam-700); }
.gd.dang-chon { border-color: var(--cam-700); box-shadow: 0 0 0 1px var(--cam-700); background: var(--cam-50); }
.gd-dau { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; width: 100%; font-variant-numeric: tabular-nums; }
.gd-dau .huy-hieu { font-size: var(--co-12); padding: 0 7px; }
.gd-tich { width: 18px; height: 18px; margin-left: auto; color: var(--cam-chu); }
.gd-nd { display: block; font-size: var(--co-13); color: var(--chu-2); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dong-dc { padding: 10px 4px 12px; border-bottom: 1px solid var(--vien); }
.dong-dc.tt-chua { border-left: 4px solid var(--d-tre); padding-left: 10px; }
.dong-dc.tt-thieu { border-left: 4px solid var(--d-chuY); padding-left: 10px; }
.dc-dau { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 10px; align-items: start; }
.dc-luc { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--chu-2); padding-top: 1px; }
.dc-than { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dc-tt .huy-hieu { font-size: var(--co-12); white-space: nowrap; }
.dc-lk { display: flex; align-items: flex-start; gap: 8px; margin: 6px 0 0 56px; font-size: var(--co-14); }
.dc-lk > .ic { width: 15px; height: 15px; color: var(--chu-3); flex: none; margin-top: 3px; }
.dc-lk-than { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.dc-lk .dc-bo { flex: none; min-height: 32px; padding: 2px 8px; }
.the .dc-lk { margin-left: 0; padding: 8px 0; border-top: 1px solid var(--vien); }
@media (max-width: 599px) { .dc-lk { margin-left: 0; } }
/* tên gói (cột GÓI CHỤP) hiện thay phân loại trên thẻ ca — chữ đậm, phần chi tiết còn lại nhạt (chủ 26/09) */
.ten-goi { color: var(--chu); font-weight: 700; }
.bang-lich .o-goi .ten-goi { display: block; margin-bottom: 2px; }
.cap-ghep { cursor: pointer; }
.cap-ghep.bo { opacity: .55; background: var(--mat); box-shadow: none; border-color: var(--vien-dam); }
.cap-ghep .gd-dau input { width: 20px; height: 20px; margin: 0; accent-color: var(--cam-700); }
.cap-ghep .nho-xiu .ic { width: 13px; height: 13px; vertical-align: -.15em; color: var(--chu-3); }
/* ------------------------------------------------ Cửa sổ bổ sung sản phẩm vào HĐ (chủ 26/09) */
.bo-sung { display: flex; flex-direction: column; gap: 10px; }
.bs-buoc { display: flex; align-items: center; gap: 8px; }
.bs-buoc button { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 4px 12px 4px 6px; border-radius: 999px; border: 1px solid var(--vien-dam);
  background: var(--mat); color: var(--chu-2); font: inherit; font-weight: 600; cursor: pointer; }
.bs-buoc button.dang-chon { border-color: var(--cam-700); background: var(--cam-50); color: var(--cam-900); }
.bs-buoc button.xong .cham-buoc { background: var(--d-giao); border-color: var(--d-giao); color: #fff; }
.bs-buoc .cham-buoc { width: 26px; height: 26px; font-size: var(--co-13); }
.bs-noi { flex: 0 0 24px; height: 2px; background: var(--vien-dam); }
.bs-cu { display: flex; flex-direction: column; }
.bs-dong-cu { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px dashed var(--vien); font-size: var(--co-14); }
.bs-dong-cu:last-child { border-bottom: 0; }
.bs-dong-cu b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.bs-tong .bang-tien { margin: 0; }
.bs-loi { color: var(--c-tre); margin: 0; }
.bo-sung .dong-sp { margin-bottom: 8px; }
/* ------------------------------------------------ Mở ca / mở hợp đồng cùng 1 giao diện, cả trong cửa sổ (chủ 26/09) */
.man-phu .hop.rat-rong { max-width: 1320px; }
@media (min-width: 600px) { .man-phu .hop.rat-rong { width: min(1320px, calc(100vw - 32px)); } }
.ca-hd.trong-hop .nhay-muc { top: 0; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; background: var(--mat); }
.ca-hd.trong-hop .muc-ca, .ca-hd.trong-hop #cot-hop-dong { scroll-margin-top: 60px; }
.ca-hd.trong-hop .the { background: var(--mat); }
.ca-hd.trong-hop .cot-trai > .the, .ca-hd.trong-hop .cot-phai .the { border-color: var(--vien); }
/* trong cửa sổ: bỏ nút ghim đáy màn (đã có 2 nút tiến độ ở đầu ca; chân cửa sổ cũng dính đáy) */
.ca-hd.trong-hop .thanh-hanh-dong-dt { display: none !important; }
@media (min-width: 1000px) {
  .ca-hd.trong-hop .hai-cot .cot-phai { position: static; max-height: none; overflow: visible; }
}

/* ------------------------------------------------ Báo cáo — bảng điều khiển (làm lại 26/09) */
.bd { --bd-a: var(--cam-500); --bd-b: var(--cam-200); --bd-c: var(--d-guiGoc); --bd-x: var(--vien-dam); --bd-x2: var(--vien); --bd-do: var(--d-tre); }
.bd .noi-dung, .noi-dung.bd { max-width: 1180px; }
.bd-dau { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 10px; }
.bd-thang { flex: 0 1 300px; margin-bottom: 0; }
/* Chọn kỳ báo cáo (chủ 30/09): nút nhanh + lùi / tiến kỳ + chọn ngày + chọn ngày để so */
.bd-ky { display: flex; flex-direction: column; gap: 8px; flex: 1 1 360px; min-width: 0; }
.bd-ky .bd-thang { flex: none; max-width: 360px; }
.bd-ky-nhanh { margin: 0; }
.bd-ky-hang { display: flex; flex-wrap: wrap; gap: 8px 12px; }
.bd-ky-o { display: flex; flex-direction: column; gap: 2px; flex: 1 1 150px; max-width: 200px; font-size: var(--co-12); font-weight: 600; color: var(--chu-3); }
.bd-ky-ss { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: var(--co-13); color: var(--chu-2); }
.bd-dau:has(.bd-ky) { align-items: flex-start; }
.bd-tab { position: sticky; top: 56px; z-index: 5; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none;
  margin: 0 calc(-1 * var(--k-4)) 6px; padding: 8px var(--k-4); background: var(--nen); border-bottom: 1px solid var(--vien); }
.bd-tab::-webkit-scrollbar { display: none; }
.bd-tab button { flex: none; display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 14px; border: 1px solid transparent;
  border-radius: var(--bo-tron); background: none; color: var(--chu-2); font: inherit; font-size: var(--co-14); font-weight: 600; cursor: pointer; }
.bd-tab button:hover { background: var(--nen-phu); color: var(--chu); }
.bd-tab button.chon { background: var(--chu); color: var(--mat); }
.bd-tab .ic { width: 16px; height: 16px; }
.bd-ghi { margin: 4px 0 12px; }
.bd-mo { color: var(--chu-3); font-size: var(--co-13); }
.bd-do { color: var(--d-tre); }
.bd-trong { color: var(--chu-3); font-size: var(--co-14); margin: 6px 0; }
.bd-on { display: flex; align-items: center; gap: 8px; color: var(--c-giao); font-weight: 600; }

/* thẻ chỉ số */
.bd-luoi { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-bottom: 14px; }
.bd-luoi.trong-khoi { margin-bottom: 0; }
.bd-the { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 14px 16px; background: var(--mat); border: 1px solid var(--vien);
  border-radius: var(--bo-lon); box-shadow: var(--bong-mem); color: inherit; text-decoration: none; text-align: left; font: inherit; }
.bd-khoi .bd-the { box-shadow: none; background: var(--nen); }
.bd-the.bam { cursor: pointer; transition: border-color var(--nhanh), transform var(--nhanh); }
.bd-the.bam:hover { border-color: var(--vien-dam); transform: translateY(-1px); }
.bd-the-dau { display: flex; align-items: center; gap: 7px; color: var(--chu-2); font-size: var(--co-13); font-weight: 600; }
.bd-the-dau .ic { width: 16px; height: 16px; color: var(--chu-3); }
.bd-the-dau .bd-mui { margin-left: auto; opacity: .5; }
.bd-so { font-size: 26px; font-weight: 700; line-height: 1.15; letter-spacing: -.3px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.bd-so.cam { color: var(--cam-chu); }
.bd-so.xanh { color: var(--c-giao); }
.bd-so.do { color: var(--d-tre); }
.bd-so.vang { color: var(--c-chuY); }
.bd-the-chan { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: var(--chu-3); font-size: var(--co-13); }
.bd-tang { display: inline-flex; align-items: center; gap: 3px; padding: 1px 8px; border-radius: var(--bo-tron); background: var(--nen-phu);
  color: var(--chu-2); font-size: var(--co-12); font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bd-tang.tot { background: var(--n-giao); color: var(--c-giao); }
.bd-tang.xau { background: var(--n-tre); color: var(--c-tre); }

/* khối */
.bd-khoi { min-width: 0; margin-bottom: 14px; padding: 16px; background: var(--mat); border: 1px solid var(--vien); border-radius: var(--bo-lon); box-shadow: var(--bong-mem); }
.bd-khoi-dau { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; margin-bottom: 12px; }
.bd-khoi-dau h3 { margin: 0; font-size: var(--co-16); }
.bd-khoi-dau p { margin: 2px 0 0; color: var(--chu-3); font-size: var(--co-13); }
.bd-khoi-dau .chon-nhanh button { min-height: 32px; padding: 3px 12px; }
.bd-h4 { margin: 16px 0 6px; font-size: var(--co-13); color: var(--chu-2); text-transform: uppercase; letter-spacing: .3px; }
.bd-hai { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; align-items: start; }
.bd-cot-phai { min-width: 0; }
.bd-hang-dau { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 0 14px; align-items: stretch; }
.bd-hang-dau > .bd-khoi { margin-bottom: 14px; }

/* hero doanh số */
.bd-hero { background: linear-gradient(135deg, var(--cam-50), var(--mat) 60%); }
.bd-hero-so { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin: 6px 0 12px; font-size: 36px; font-weight: 700; letter-spacing: -.6px; font-variant-numeric: tabular-nums; }
.bd-hero-so .bd-tang { font-size: var(--co-13); letter-spacing: 0; }
.bd-hero-dong { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; margin-top: 8px; color: var(--chu-2); font-size: var(--co-13); }
.bd-hero-luoi { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--vien); }
.bd-hero-luoi div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bd-hero-luoi span { color: var(--chu-3); font-size: var(--co-12); font-weight: 600; }
.bd-hero-luoi b { font-size: var(--co-18); font-variant-numeric: tabular-nums; }
.bd-hero-luoi small { color: var(--chu-3); font-size: var(--co-12); }

/* thanh mục tiêu + vạch nhịp */
.bd-muc { position: relative; height: 10px; border-radius: var(--bo-tron); background: var(--nen-phu); }
.bd-muc-dat { position: absolute; inset: 0 auto 0 0; border-radius: var(--bo-tron); background: var(--d-giao); }
.bd-muc.sat .bd-muc-dat { background: var(--cam-400); }
.bd-muc.cham .bd-muc-dat { background: var(--d-tre); }
.bd-muc-nhip { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--chu); }
.bd-muc-so { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }

/* cần chú ý */
.bd-cy { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.bd-cy-dong { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: var(--bo); background: var(--nen);
  color: var(--chu); text-decoration: none; text-align: left; font: inherit; cursor: pointer; }
.bd-cy-dong:hover { background: var(--nen-phu); }
.bd-cy-ic { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: var(--bo-nho); }
.bd-cy-dong.do .bd-cy-ic { background: var(--n-tre); color: var(--d-tre); }
.bd-cy-dong.vang .bd-cy-ic { background: var(--n-chuY); color: var(--d-chuY); }
.bd-cy-chu { flex: 1; min-width: 0; font-size: var(--co-14); }
.bd-cy-chu small { display: block; color: var(--chu-3); font-size: var(--co-12); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-mui { color: var(--chu-3); }

/* biểu đồ lũy kế */
.bd-ld-tt { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; min-height: 22px; margin-bottom: 10px; font-size: var(--co-13); color: var(--chu-2); }
.bd-ld-tt b { color: var(--chu); font-variant-numeric: tabular-nums; }
.bd-ld-ngay { font-weight: 700; color: var(--chu); }
.bd-ld-khung { position: relative; height: 230px; margin-left: 44px; margin-bottom: 22px; }
.bd-ld-y { position: absolute; inset: 0 auto 0 -44px; width: 38px; }
.bd-ld-y span { position: absolute; right: 0; transform: translateY(50%); font-size: var(--co-11); color: var(--chu-3); font-variant-numeric: tabular-nums; }
.bd-ld-ve { position: absolute; inset: 0; touch-action: pan-y; cursor: crosshair; }
.bd-ld-ve svg { display: block; width: 100%; height: 100%; overflow: visible; }
.bd-ld-ve line, .bd-ld-ve polyline { fill: none; vector-effect: non-scaling-stroke; }
.bd-ld-ve .luoi { stroke: var(--vien); stroke-width: 1; }
.bd-ld-ve .nay { stroke: var(--cam-600); stroke-width: 2.5; stroke-linejoin: round; }
.bd-ld-ve .vung { fill: var(--cam-100); opacity: .55; stroke: none; }
.bd-ld-ve .truoc { stroke: var(--chu-3); stroke-width: 1.5; opacity: .45; stroke-linejoin: round; }
.bd-ld-ve .nhip { stroke: var(--d-giao); stroke-width: 1.5; stroke-dasharray: 5 4; }
.bd-ld-ve .du-doan { stroke: var(--cam-400); stroke-width: 2; stroke-dasharray: 2 4; stroke-linecap: round; }
.bd-ld-ve .doc { stroke: var(--chu); stroke-width: 1; opacity: .18; }
.bd-ld-diem { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--mat); border: 2.5px solid var(--cam-600); pointer-events: none; }
.bd-ld-x { position: absolute; left: 0; right: 0; bottom: -20px; height: 16px; }
.bd-ld-x span { position: absolute; transform: translateX(-50%); font-size: var(--co-11); color: var(--chu-3); }
.bd-chu-thich { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: var(--co-12); color: var(--chu-2); }
.bd-chu-thich span { display: inline-flex; align-items: center; gap: 6px; }
.bd-cham { display: inline-block; width: 10px; height: 10px; flex: none; border-radius: 3px; background: var(--bd-x); vertical-align: middle; margin-right: 4px; }
.bd-chu-thich .bd-cham { margin-right: 0; }
.bd-cham.nay { background: var(--cam-600); }
.bd-cham.truoc { background: var(--chu-3); opacity: .45; }
.bd-cham.nhip { background: var(--d-giao); }
.bd-vach { display: inline-block; width: 18px; border-top: 2px dashed var(--d-giao); }
.bd-vach.du-doan { border-top: 2px dotted var(--cam-400); }
.bd-cham.a, .bd-cot-than .a, .bd-chia .a { background: var(--bd-a); }
.bd-cham.b, .bd-cot-than .b, .bd-chia .b { background: var(--bd-b); }
.bd-cham.c, .bd-cot-than .c, .bd-chia .c { background: var(--bd-c); }
.bd-cham.x, .bd-chia .x { background: var(--bd-x); }
.bd-cham.x2, .bd-chia .x2 { background: var(--bd-x2); }
.bd-cham.do, .bd-chia .do { background: var(--bd-do); }
.bd-cham.vang, .bd-chia .vang { background: var(--d-chuY); }

/* cột từng ngày */
.bd-cot { display: grid; grid-template-columns: repeat(var(--so), minmax(0, 1fr)); gap: 3px; height: 180px; }
.bd-cot-o { display: flex; flex-direction: column; align-items: center; min-width: 0; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; }
.bd-cot-than { flex: 1; display: flex; flex-direction: column-reverse; width: 100%; max-width: 30px; border-radius: 4px 4px 1px 1px; overflow: hidden;
  background: var(--nen); transition: opacity var(--nhanh); }
.bd-cot-than span { display: block; width: 100%; flex: none; }
.bd-cot-o.sau .bd-cot-than { opacity: .35; }
.bd-cot-o.chon .bd-cot-than { outline: 2px solid var(--chu); outline-offset: 1px; }
.bd-cot-nhan { height: 16px; margin-top: 3px; font-size: var(--co-11); color: var(--chu-3); visibility: hidden; }
.bd-cot-nhan.hien, .bd-cot-o.chon .bd-cot-nhan { visibility: visible; }
.bd-cot-o.chon .bd-cot-nhan { color: var(--chu); font-weight: 700; }
@media (min-width: 900px) { .bd-cot-nhan { visibility: visible; } }

/* xếp hạng */
.bd-xh { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.bd-xh li { display: flex; align-items: flex-start; gap: 10px; }
.bd-xh-hang { display: grid; place-items: center; width: 22px; height: 22px; flex: none; margin-top: 1px; border-radius: 50%; background: var(--nen-phu);
  color: var(--chu-2); font-size: var(--co-12); font-weight: 700; }
.bd-xh li:first-child .bd-xh-hang { background: var(--cam-100); color: var(--cam-900); }
.bd-xh-than { flex: 1; min-width: 0; }
.bd-xh-dong { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: var(--co-14); }
.bd-xh-dong b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.bd-xh-ten { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-xh-phu { display: flex; align-items: center; gap: 10px; margin-top: 4px; color: var(--chu-3); font-size: var(--co-12); white-space: nowrap; }
.bd-thanh { flex: 1; height: 6px; border-radius: var(--bo-tron); background: var(--nen-phu); overflow: hidden; }
.bd-thanh span { display: block; height: 100%; border-radius: var(--bo-tron); background: var(--bd-a); }
.bd-them { margin-top: 10px; padding: 4px 0; }

/* chia phần */
.bd-chia { display: flex; gap: 2px; height: 14px; border-radius: var(--bo-tron); overflow: hidden; background: var(--nen-phu); }
.bd-chia span { display: block; height: 100%; min-width: 3px; }
.bd-giai { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.bd-giai li { display: flex; align-items: center; gap: 8px; font-size: var(--co-14); }
.bd-giai-ten { flex: 1; min-width: 0; }
.bd-giai b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.bd-giai .bd-pt { width: 40px; text-align: right; }

/* phễu */
.bd-pheu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.bd-pheu-dong { display: flex; justify-content: space-between; gap: 10px; font-size: var(--co-14); }
.bd-pheu-dong b { font-variant-numeric: tabular-nums; }
.bd-pheu-thanh { height: 22px; margin-top: 4px; border-radius: var(--bo-nho); background: var(--nen-phu); overflow: hidden; }
.bd-pheu-thanh span { display: block; height: 100%; border-radius: var(--bo-nho); background: linear-gradient(90deg, var(--cam-500), var(--cam-300)); }
.bd-pheu-tl { display: block; margin-top: 2px; color: var(--chu-3); font-size: var(--co-12); }

/* danh sách + bảng khoá–giá trị */
.bd-kv { margin: 0; display: flex; flex-direction: column; }
.bd-kv div { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--vien); font-size: var(--co-14); }
.bd-kv div:last-child { border-bottom: 0; }
.bd-kv dt { color: var(--chu-2); }
.bd-kv dd { margin: 0; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.bd-ds { list-style: none; margin: 0; padding: 0; }
.bd-ds-dong { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 9px 0; border: 0; border-bottom: 1px solid var(--vien);
  background: none; color: var(--chu); font: inherit; font-size: var(--co-14); text-align: left; cursor: pointer; }
.bd-ds li:last-child .bd-ds-dong, .bd-ds li.bd-ds-dong:last-child { border-bottom: 0; }
.bd-ds-dong.tinh { cursor: default; }
button.bd-ds-dong:hover .bd-ds-ten { color: var(--cam-chu); }
.bd-ds-ten { min-width: 0; }
.bd-ds-ten small { display: block; color: var(--chu-3); font-size: var(--co-12); }
.bd-ds-dong b { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* hậu kỳ theo công đoạn */
.bd-ong { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.bd-ong li { display: grid; grid-template-columns: minmax(0, 170px) minmax(0, 1fr) 36px; align-items: center; gap: 10px; font-size: var(--co-14); }
.bd-ong-ten { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-ong-thanh { height: 18px; border-radius: var(--bo-nho); background: var(--nen-phu); overflow: hidden; }
.bd-ong-thanh span { display: block; height: 100%; min-width: 3px; border-radius: var(--bo-nho); background: var(--d, var(--bd-a)); }
.bd-ong b { text-align: right; font-variant-numeric: tabular-nums; }

/* cột đơn (thứ trong tuần) */
.bd-cot-don { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; height: 150px; }
.bd-cot-don-o { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; font-size: var(--co-12); color: var(--chu-3); }
.bd-cot-don-o b { color: var(--chu); font-size: var(--co-13); height: 18px; }
.bd-cot-don-than { flex: 1; display: flex; align-items: flex-end; width: 100%; max-width: 34px; border-radius: 5px 5px 2px 2px; background: var(--nen-phu); overflow: hidden; }
.bd-cot-don-than span { display: block; width: 100%; background: var(--bd-c); }

/* bảng */
.bd-bang { border-collapse: collapse; width: 100%; font-size: var(--co-14); white-space: nowrap; }
.bd-bang th, .bd-bang td { padding: 9px 10px; border-bottom: 1px solid var(--vien); text-align: right; font-variant-numeric: tabular-nums; }
.bd-bang th:first-child, .bd-bang td:first-child { text-align: left; position: sticky; left: 0; background: var(--mat); }
.bd-bang th { color: var(--chu-3); font-size: var(--co-12); font-weight: 600; }
.bd-bang tbody tr:hover td { background: var(--nen); }
.bd-bang tfoot td { font-weight: 700; border-bottom: 0; border-top: 2px solid var(--vien-dam); }
.bd-xep { border: 0; background: none; padding: 0; color: inherit; font: inherit; cursor: pointer; }
.bd-xep.chon { color: var(--cam-chu); }
.bd-thanh-loc { margin-bottom: 12px; }

/* đặt KPI sale */
.bd-kpi-ds { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px 20px; }
.bd-kpi-o { display: flex; flex-direction: column; gap: 6px; }
.bd-kpi-sua { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.bd-kpi-dong { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto; gap: 8px; align-items: center; }

@media (max-width: 899px) {
  .bd-hang-dau, .bd-hai { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 599px) {
  .bd-luoi { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .bd-the { padding: 12px; }
  .bd-so { font-size: 19px; }
  .bd-hero-so { font-size: 28px; }
  .bd-khoi { padding: 14px 12px; }
  .bd-ld-khung { height: 190px; margin-left: 38px; }
  .bd-ld-y { left: -38px; width: 34px; }
  .bd-cot { gap: 2px; height: 150px; }
  .bd-ong li { grid-template-columns: minmax(0, 1fr) 30px; }
  .bd-ong-thanh { grid-column: 1 / -1; grid-row: 2; height: 12px; }
  .bd-tab button span { font-size: var(--co-13); }
}

/* ------------------------------------------------ Bảng lương / phiếu lương (làm lại 27/09) */
.bl { --bd-a: var(--cam-500); --bd-b: var(--cam-200); --bd-c: var(--d-guiGoc); }
.noi-dung.bl:not(.rong-lich) { max-width: 820px; }
.bl-dau { display: block; }
.bl-luoi { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.bl-co-cau { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--vien); }
.bl-bang td small { display: block; font-weight: 400; color: var(--chu-3); font-size: var(--co-12); }
.bl-bang tbody tr.bam { cursor: pointer; }
.bl-bang tbody tr.bam:focus-visible { outline: 2px solid var(--cam-400); outline-offset: -2px; }
.bl-bang td:last-child b { color: var(--cam-chu); }
/* Lương thực nhận = số trả (chủ 08/10) → cột nổi bật */
.bl-bang .bl-tn { background: var(--cam-50); color: var(--cam-chu); font-weight: 700; text-align: right; }
.bl-bang .bl-tn b { color: var(--cam-chu); font-size: var(--co-15); }
.bl-the-ds { list-style: none; margin: 0; padding: 0; display: none; flex-direction: column; gap: 8px; }
.bl-the { display: flex; flex-direction: column; gap: 8px; width: 100%; padding: 12px; border: 1px solid var(--vien); border-radius: var(--bo); background: var(--nen);
  color: var(--chu); font: inherit; text-align: left; cursor: pointer; }
.bl-the:hover { border-color: var(--vien-dam); }
.bl-the-dau { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.bl-the-ten { min-width: 0; }
.bl-the-ten small, .bl-the-phu { display: block; color: var(--chu-3); font-size: var(--co-12); }
.bl-the-so { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; font-size: var(--co-16); color: var(--cam-chu); white-space: nowrap; font-variant-numeric: tabular-nums; }
.bd-chia.mong { height: 6px; }
.bl-giai { margin-top: 10px; }
@media (min-width: 900px) { .bl-giai { display: none; } }
@media (max-width: 599px) { .bl-luoi { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 899px) {
  .bl-chi-may { display: none; }
  .bl-the-ds { display: flex; }
}

/* phiếu lương */
.pl { margin-bottom: 14px; padding: 20px; background: var(--mat); border: 1px solid var(--vien); border-radius: var(--bo-lon); box-shadow: var(--bong-mem); }
.man-phu .pl { margin: 0; padding: 0; border: 0; box-shadow: none; }
.pl-dau { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px 20px; flex-wrap: wrap; padding-bottom: 16px; border-bottom: 2px solid var(--chu); }
.pl-ai { min-width: 0; }
.pl-nhan { color: var(--cam-chu); font-size: var(--co-12); font-weight: 700; letter-spacing: .6px; text-transform: uppercase; }
.pl-dau h2 { margin: 4px 0 8px; font-family: var(--font-sang); font-size: 26px; line-height: 1.2; }
.pl-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pl-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: var(--bo-tron); background: var(--n, var(--nen-phu)); color: var(--c, var(--chu-2));
  font-size: var(--co-12); font-weight: 600; white-space: nowrap; }
.pl-chip.nhat { background: var(--cam-50); color: var(--cam-900); }
.pl-chip .ic { width: 13px; height: 13px; }
.pl-thuc-tra { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; }
.pl-thuc-tra > span { color: var(--chu-3); font-size: var(--co-12); font-weight: 700; letter-spacing: .4px; text-transform: uppercase; }
.pl-thuc-tra > b { font-size: 32px; line-height: 1.1; letter-spacing: -.5px; color: var(--cam-chu); font-variant-numeric: tabular-nums; }
.pl-thuc-tra small { display: inline-flex; align-items: center; gap: 6px; color: var(--chu-3); font-size: var(--co-12); }
.pl-luu-y { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 0; padding: 9px 12px; border-radius: var(--bo); background: var(--n-chuY); color: var(--c-chuY); font-size: var(--co-13); }
.pl-luu-y .ic { flex: none; margin-top: 2px; }
.bl > .pl-luu-y { margin: 0 0 12px; }
.pl-cong { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 16px 0 4px; }
.pl-cong > div { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: var(--bo); background: var(--nen); }
.pl-cong span { color: var(--chu-3); font-size: var(--co-12); font-weight: 600; }
.pl-cong b { font-size: var(--co-20); font-variant-numeric: tabular-nums; }
.pl-cong b small { font-size: var(--co-13); font-weight: 500; color: var(--chu-3); }
.pl-cong > small, .pl-cong div > small { color: var(--d-tre); font-size: var(--co-12); font-weight: 600; }
.pl-muc { padding: 14px 0; border-bottom: 1px solid var(--vien); }
.pl-muc h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: var(--co-14); text-transform: uppercase; letter-spacing: .4px; color: var(--chu); }
.pl-so { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--chu); color: var(--mat); font-size: var(--co-12); }
.pl-dong { display: flex; align-items: baseline; gap: 8px; padding: 5px 0; font-size: var(--co-14); }
.pl-dong-ten { flex: 1; min-width: 0; }
.pl-dong-ten small { display: block; color: var(--chu-3); font-size: var(--co-12); }
.pl-dong b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.pl-dau-so { width: 12px; flex: none; color: var(--chu-3); font-weight: 700; }
.pl-bang { width: 100%; border-collapse: collapse; font-size: var(--co-14); }
.pl-bang th { padding: 6px 0; color: var(--chu-3); font-size: var(--co-12); font-weight: 600; text-align: right; border-bottom: 1px solid var(--vien); }
.pl-bang td { padding: 7px 0; text-align: right; border-bottom: 1px dashed var(--vien); font-variant-numeric: tabular-nums; }
.pl-bang th:first-child, .pl-bang td:first-child { text-align: left; }
.pl-bang th + th, .pl-bang td + td { padding-left: 10px; }
.pl-bang tr.gop td { color: var(--chu-2); font-size: var(--co-13); }
.pl-bang tfoot td { border-bottom: 0; padding-top: 9px; font-weight: 700; }
.pl-tp { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.pl-tp li { display: flex; align-items: baseline; gap: 8px; padding: 6px 10px; border-radius: var(--bo-nho); background: var(--n-giao); font-size: var(--co-14); }
.pl-tp li .ic { flex: none; width: 15px; height: 15px; color: var(--d-giao); align-self: center; }
.pl-tp li.phat { background: var(--n-tre); }
.pl-tp li.phat .ic, .pl-tp li.phat b { color: var(--d-tre); }
.pl-tp b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.pl-chuoi { margin-top: 16px; padding: 12px 16px; border-radius: var(--bo); background: var(--nen); }
.pl-chuoi .pl-dong.bang { margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--vien-dam); font-weight: 700; }
.pl-chuoi .pl-dong.bang.nhe { font-weight: 600; color: var(--chu-2); }
.pl-dong.cuoi { margin: 8px -16px -12px; padding: 14px 16px; border-radius: 0 0 var(--bo) var(--bo); background: var(--cam-50); font-size: var(--co-16); font-weight: 800; }
.pl-dong.cuoi b { font-size: var(--co-24); color: var(--cam-chu); }
.pl-dong.cuoi { flex-wrap: wrap; }
.pl-dong.cuoi .pl-dong-ten { white-space: nowrap; }
.pl-dong.cuoi b { margin-left: auto; }
.pl-muc-tieu { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; font-size: var(--co-14); }
.pl-nhan-xet { display: flex; gap: 8px; margin: 14px 0 0; padding: 10px 14px; border-left: 3px solid var(--cam-400); background: var(--nen); border-radius: 0 var(--bo-nho) var(--bo-nho) 0; color: var(--chu-2); font-size: var(--co-14); }
.pl-nhan-xet .ic { flex: none; margin-top: 2px; color: var(--chu-3); }
.pl-chan { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 16px; color: var(--chu-3); font-size: var(--co-12); }
/* 🔔 Thông báo lương (chủ 10/10): nút ở góc bảng + danh sách chọn người nhận + ô xem trước tin */
.bl-nut-tb small { margin-left: 6px; padding: 1px 7px; border-radius: var(--bo-tron); background: var(--n-giao); color: var(--c-giao); font-size: var(--co-12); font-weight: 600; }
.tbl-ds { list-style: none; margin: 0; padding: 0; border: 1px solid var(--vien); border-radius: var(--bo); max-height: 38vh; overflow: auto; }
.tbl-ds li + li { border-top: 1px solid var(--vien); }
.tbl-ds label { display: flex; align-items: center; gap: 10px; padding: 8px 12px; cursor: pointer; }
.tbl-ds label.tat { cursor: default; opacity: .55; }
.tbl-ten { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tbl-ten small { color: var(--chu-3); font-size: var(--co-12); }
.tbl-so { font-weight: 700; color: var(--cam-chu); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl-xem { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: var(--bo); background: var(--nen); font-size: var(--co-13); }
.tbl-xem > span { color: var(--chu-3); font-size: var(--co-12); }
.tbl-xem p { margin: 0; color: var(--chu-2); }
/* Điều chỉnh riêng trên phiếu (chủ 10/10): ghi chú "tính riêng" dưới bảng hiệu suất + nút ghi điều chỉnh ở chân phiếu */
.pl-dc-ghi { display: flex; align-items: flex-start; gap: 8px; margin: 8px 0 0; padding: 8px 12px; border-radius: var(--bo); background: var(--n-chuY); color: var(--c-chuY); font-size: var(--co-13); line-height: 1.45; }
.pl-dc-ghi .ic { flex: none; width: 15px; height: 15px; margin-top: 2px; }
.pl-rieng { margin-left: 4px; vertical-align: 1px; }
.pl-nut { gap: 8px; flex-wrap: wrap; }
/* Mục ① hiện rõ từng khoản lương cố định (chủ 10/10): lưới 2 cột cho gọn — trách nhiệm vai trò tô nhẹ */
.pl-cd { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 24px; font-size: var(--co-13); color: var(--chu-2); }
.pl-cd li { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 3px 0; border-bottom: 1px dashed var(--vien); }
.pl-cd li b { font-weight: 600; color: var(--chu); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pl-cd li.nhan span { color: var(--cam-chu); font-weight: 600; }
.pl-cd-tru { font-size: var(--co-13); color: var(--chu-2); }
.pl-cd-tru b { color: var(--d-tre); }
.pl-cd-vt { margin: 6px 0 0; font-size: var(--co-13); color: var(--chu-2); }
/* Phiếu lương gọn (chủ 08/10): đủ rộng thì chia 2 cột — trái chi tiết ①②③, phải chuỗi tính ra Thực trả — đọc hết không phải cuộn */
.pl { container-type: inline-size; }
.pl-ten-dong { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin-top: 4px; }
.pl-ten-dong h2 { margin: 0; }
.pl-h4-so { margin-left: auto; font-size: var(--co-16); letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums; }
.pl-h4-phu { margin-left: auto; color: var(--chu-3); font-size: var(--co-13); font-weight: 500; letter-spacing: 0; text-transform: none; }
.pl-muc > h4:only-child { margin: 0; }
@container (min-width: 700px) {
  .pl-dau { padding-bottom: 12px; }
  .pl-cong { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
  .pl-cong > div { flex-direction: row; align-items: baseline; gap: 8px; padding: 6px 14px; }
  .pl-cong b { font-size: var(--co-16); }
  .pl-than { display: grid; grid-template-columns: minmax(0, 1fr) minmax(290px, 38%); gap: 0 28px; align-items: start; }
  .pl-muc { padding: 11px 0; }
  .pl-muc h4 { margin-bottom: 6px; }
  .pl-dong { padding: 4px 0; }
  .pl-bang td { padding: 5px 0; }
  .pl-luu-y { margin-top: 10px; padding: 6px 12px; }
  .pl-chuoi .pl-dong.bang { margin-top: 2px; padding-top: 6px; }
  .pl-muc:last-child { border-bottom: 0; }
  .pl-chuoi { margin-top: 12px; }
  .pl-chan { margin-top: 12px; }
}
@media (max-width: 599px) {
  .pl { padding: 16px 14px; }
  .pl-dau h2 { font-size: 22px; }
  .pl-thuc-tra { align-items: flex-start; text-align: left; }
  .pl-thuc-tra > b { font-size: 28px; }
  .pl-bang th:nth-child(3), .pl-bang td:nth-child(3) { display: none; }
}
/* in phiếu lương: chỉ in vùng #vung-in (bản chép của phiếu) */
#vung-in { display: none; }
/* Bản in phiếu lương — LUÔN vừa khít 1 trang A4 (chủ 10/10): giữ kiểu trình bày một cột chữ to như bản cũ (anh Việt thích bản cũ hơn
   bản 2 cột), bỏ dòng "Tháng trước"; luong.js đo bản in ở bề ngang 190mm (lớp .dang-do, ngoài màn hình) rồi phóng to / thu nhỏ cả phiếu
   cho vừa đúng một trang — không tràn trang 2, không dư trắng phía dưới. */
#vung-in.dang-do { display: block; position: absolute; left: -10000px; top: 0; visibility: hidden; }
#vung-in .pl { margin: 0; padding: 0; border: 0; box-shadow: none; background: none; container-type: normal; break-inside: avoid; }
#vung-in .khong-in { display: none !important; }
#vung-in .pl-dau { flex-wrap: nowrap; }
#vung-in .pl-ai { flex: 1; min-width: 0; }
#vung-in .pl-thuc-tra { flex: none; align-items: flex-end; text-align: right; }
#vung-in .pl-thuc-tra small { display: none; } /* "Tháng trước …" chỉ hiện trên web */
#vung-in .pl-bang th:nth-child(3), #vung-in .pl-bang td:nth-child(3) { display: table-cell; }
#vung-in .pl-cd { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media print {
  html.in-phieu-luong body > :not(#vung-in) { display: none !important; }
  html.in-phieu-luong #vung-in { display: block; padding: 10mm; }
  html.in-phieu-luong #vung-in * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
.bl-luoi .bd-so { font-size: 22px; }

/* ------------------------------------------------ Điểm danh (27/09) */
.dd-the { margin-bottom: 14px; padding: 14px 16px; border-radius: var(--bo-lon); border: 1px solid var(--vien); background: var(--mat); box-shadow: var(--bong-mem); }
.dd-the.chua { border-color: var(--cam-300); background: linear-gradient(135deg, var(--cam-50), var(--mat) 70%); }
.dd-the.xong { background: var(--n-giao); border-color: var(--v-giao); box-shadow: none; padding: 10px 14px; }
.dd-the.xong.tre { background: var(--n-chuY); border-color: var(--v-chuY); }
.dd-the.nghi { background: var(--nen); box-shadow: none; }
.dd-the.gon { padding: 0; box-shadow: none; }
.dd-hang { display: flex; align-items: center; gap: 12px; }
.dd-chu { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dd-chu b { font-size: var(--co-16); }
.dd-chu small { color: var(--chu-2); font-size: var(--co-13); }
.dd-ic { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 50%; background: var(--mat); color: var(--d-giao); }
.dd-the.tre .dd-ic { color: var(--d-chuY); }
.dd-the.nghi .dd-ic { color: var(--chu-3); }
.dd-the.xong .dd-chu small::first-letter { text-transform: uppercase; }
.dd-dong-ho { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 72px; height: 72px; flex: none; border-radius: 50%;
  background: var(--mat); border: 2px solid var(--cam-300); }
.dd-dong-ho b { font-size: 20px; line-height: 1; font-variant-numeric: tabular-nums; color: var(--cam-chu); }
.dd-dong-ho small { margin-top: 3px; font-size: 10px; color: var(--chu-3); }
.dd-nut-khung { margin-top: 12px; }
.dd-nut { width: 100%; min-height: 52px; font-size: var(--co-16); border-radius: var(--bo); }
.dd-nut .ic { width: 20px; height: 20px; }
.dd-ghi { margin: 8px 0 0; color: var(--chu-3); font-size: var(--co-12); text-align: center; }
.dd-nhom { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 9px 12px; border-radius: var(--bo); background: var(--nen); color: var(--chu); text-decoration: none; font-size: var(--co-14); }
.dd-the.gon .dd-nhom { margin: 0; background: var(--mat); border: 1px solid var(--vien); }
.dd-nhom > span { flex: 1; min-width: 0; }
.dd-nhom small { display: block; color: var(--chu-3); font-size: var(--co-12); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-nhom > .ic:first-child { color: var(--chu-3); flex: none; }
.dd-the.lon.chua .dd-dong-ho { width: 84px; height: 84px; }
.dd-the.lon.chua .dd-dong-ho b { font-size: 24px; }
/* cửa sổ nhắc */
.dd-nhac { display: flex; align-items: flex-start; gap: 12px; }
.dd-nhac p { margin: 0; font-size: var(--co-15); line-height: 1.5; }
.dd-nhac-ic { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 50%; background: var(--cam-50); color: var(--cam-chu); }
.dd-nhac-ic .ic { width: 22px; height: 22px; }
/* tổng tháng + lịch */
.dd-tong { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.dd-tong > div { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: var(--bo); background: var(--nen); }
.dd-tong b { font-size: var(--co-20); font-variant-numeric: tabular-nums; }
.dd-tong span { color: var(--chu-3); font-size: var(--co-12); }
.dd-tong .tre b { color: var(--c-chuY); }
.dd-tong .vang b { color: var(--d-tre); }
.dd-lich { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.dd-thu { padding: 2px 0 4px; text-align: center; color: var(--chu-3); font-size: var(--co-12); font-weight: 600; }
.dd-o { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-height: 52px; border-radius: var(--bo-nho);
  background: var(--nen); border: 1px solid transparent; }
.dd-o-so { font-size: var(--co-12); color: var(--chu-3); font-weight: 600; }
.dd-o-gt { font-size: var(--co-13); font-weight: 700; font-variant-numeric: tabular-nums; }
.dd-o.dung { background: var(--n-giao); }
.dd-o.dung .dd-o-gt { color: var(--c-giao); }
.dd-o.tre { background: var(--n-chuY); }
.dd-o.tre .dd-o-gt { color: var(--c-chuY); }
.dd-o.nghi { background: var(--n-xong); }
.dd-o.nghi .dd-o-gt { color: var(--c-xong); font-weight: 600; font-size: var(--co-12); }
.dd-o.vang { background: var(--n-tre); }
.dd-o.vang .dd-o-gt { color: var(--d-tre); }
.dd-o.sau { background: transparent; border-color: var(--vien); }
.dd-o.la-hom { border-color: var(--chu); }
.dd-o-trung { position: absolute; top: 2px; right: 4px; font-size: 10px; font-weight: 700; color: var(--d-tre); }
.dd-giai { margin-top: 10px; }
.dd-cham { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.dd-cham.dung { background: var(--d-giao); }
.dd-cham.tre { background: var(--d-chuY); }
.dd-cham.nghi { background: var(--d-xong); }
.dd-cham.vang { background: var(--d-tre); }
/* hôm nay cả nhóm */
.dd-ds { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.dd-ds li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0 10px 12px; border-bottom: 1px solid var(--vien); border-left: 3px solid var(--vien-dam); }
.dd-ds li:last-child { border-bottom: 0; }
.dd-ds li.dung { border-left-color: var(--d-giao); }
.dd-ds li.tre { border-left-color: var(--d-chuY); }
.dd-ds li.nghi { border-left-color: var(--d-xong); }
.dd-ds li.chua { border-left-color: var(--d-tre); }
.dd-ds-ten, .dd-ds-tt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.dd-ds-tt { align-items: flex-end; text-align: right; }
.dd-ds small { color: var(--chu-3); font-size: var(--co-12); }
.dd-ds li.chua .dd-ds-tt b { color: var(--d-tre); }
.dd-ds li.tre .dd-ds-tt b { color: var(--c-chuY); }
/* bảng tháng cả nhóm */
.dd-bang { border-collapse: separate; border-spacing: 2px; font-size: var(--co-12); white-space: nowrap; }
.dd-bang th { color: var(--chu-3); font-weight: 600; padding: 2px; min-width: 30px; }
.dd-bang th.hom { color: var(--chu); }
.dd-bang th:first-child, .dd-bang td:first-child { position: sticky; left: 0; z-index: 1; background: var(--mat); text-align: left; padding-right: 10px; font-size: var(--co-13); }
.dd-bang td { text-align: center; padding: 4px 2px; font-variant-numeric: tabular-nums; }
.dd-bo { border-radius: 4px; background: var(--nen); color: var(--chu-2); font-size: 11px; }
.dd-bo.dung { background: var(--n-giao); color: var(--c-giao); }
.dd-bo.tre { background: var(--n-chuY); color: var(--c-chuY); font-weight: 700; }
.dd-bo.nghi { background: var(--n-xong); color: var(--c-xong); }
.dd-bo.vang { background: var(--n-tre); }
@media (max-width: 599px) {
  .dd-tong { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dd-o { min-height: 46px; }
  .dd-o-gt { font-size: 11px; }
  .dd-dong-ho { width: 64px; height: 64px; }
}
.dd-bang .dd-tc { background: var(--nen); border-radius: 4px; min-width: 34px; font-size: var(--co-13); }
.dd-canh-bao { margin: 0 0 12px; background: var(--n-tre); color: var(--c-tre); }
.dd-canh-bao ol { margin: 8px 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.dd-canh-bao .nut-chu { padding: 0; margin-top: 4px; color: var(--c-tre); text-decoration: underline; }
.dd-canh-bao-phu { display: block; margin-top: 6px; opacity: .85; font-size: var(--co-12); }

/* ------------------------------------------------ Album makeup — trang công khai /makeup (27/09) */
.mk { min-height: 100vh; background: var(--nen-am); color: var(--chu); }
.mk-dau { position: sticky; top: 0; z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 10px max(16px, calc((100% - 1180px) / 2)); background: rgba(251, 247, 242, .92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--vien); }
.mk-logo { display: inline-flex; align-items: center; gap: 10px; color: var(--chu); text-decoration: none; font-weight: 700; }
.mk-logo img { width: 36px; height: 36px; }
.mk-hero { max-width: 760px; margin: 0 auto; padding: 36px 16px 20px; text-align: center; }
.mk-nhan { margin: 0; color: var(--cam-chu); font-size: var(--co-12); font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; }
.mk-hero h1 { margin: 8px 0 10px; font-family: var(--font-sang); font-size: clamp(30px, 6vw, 46px); line-height: 1.15; font-weight: 600; }
.mk-mo-ta { margin: 0 auto; max-width: 560px; color: var(--chu-2); font-size: var(--co-16); line-height: 1.6; }
.mk-dem { margin: 12px 0 0; color: var(--chu-3); font-size: var(--co-14); }
.mk-tho { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 4px max(16px, calc((100% - 1180px) / 2)) 16px; }
.mk-tho::-webkit-scrollbar { display: none; }
.mk-tho button { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 16px; border: 1px solid var(--vien-dam);
  border-radius: var(--bo-tron); background: var(--mat); color: var(--chu-2); font: inherit; font-size: var(--co-15); font-weight: 600; cursor: pointer; }
.mk-tho button span { color: var(--chu-3); font-size: var(--co-12); font-weight: 600; }
.mk-tho button.chon { background: var(--chu); border-color: var(--chu); color: var(--mat); }
.mk-tho button.chon span { color: var(--vien-dam); }
.mk-luoi { columns: 2; column-gap: 10px; padding: 0 max(12px, calc((100% - 1180px) / 2)); }
@media (min-width: 700px) { .mk-luoi { columns: 3; column-gap: 14px; } }
@media (min-width: 1050px) { .mk-luoi { columns: 4; column-gap: 16px; } }
.mk-o { position: relative; display: block; width: 100%; margin: 0 0 10px; padding: 0; border: 0; border-radius: var(--bo-lon); overflow: hidden;
  background: var(--nen-am-2); cursor: zoom-in; break-inside: avoid; box-shadow: var(--bong-mem); }
@media (min-width: 700px) { .mk-o { margin-bottom: 14px; } }
.mk-o img { display: block; width: 100%; height: auto; transition: transform .35s ease; }
.mk-o:hover img { transform: scale(1.03); }
.mk-o.cho { cursor: default; animation: mk-nhay 1.4s ease-in-out infinite; }
@keyframes mk-nhay { 50% { opacity: .55; } }
.mk-o-tho { position: absolute; left: 8px; bottom: 8px; padding: 3px 10px; border-radius: var(--bo-tron); background: rgba(255, 255, 255, .9);
  color: var(--chu); font-size: var(--co-12); font-weight: 600; }
.mk-trong { max-width: 560px; margin: 24px auto; padding: 0 16px; text-align: center; color: var(--chu-3); }
.mk-chan { margin-top: 32px; padding: 40px 16px 48px; text-align: center; background: var(--mat); border-top: 1px solid var(--vien); }
.mk-chan h2 { margin: 0 0 8px; font-family: var(--font-sang); font-size: clamp(22px, 4.5vw, 30px); font-weight: 600; }
.mk-chan p { margin: 0 auto; max-width: 560px; color: var(--chu-2); }
.mk-chan-nut { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 20px 0 16px; }
.mk-nut-dat, .mk-nut-phu { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border-radius: var(--bo-tron);
  font-weight: 700; text-decoration: none; }
.mk-nut-dat { background: var(--cam-nut); color: #fff; }
.mk-nut-dat.nho { min-height: 38px; padding: 0 16px; font-size: var(--co-14); }
.mk-nut-phu { border: 1px solid var(--vien-dam); color: var(--chu); background: var(--mat); }
.mk-ban-quyen { color: var(--chu-3) !important; font-size: var(--co-12); }
/* xem ảnh lớn */
.mk-lon { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; background: rgba(12, 10, 9, .92); padding: 56px 12px 24px; }
.mk-lon-khung { margin: 0; max-width: min(1100px, 100%); max-height: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.mk-lon-khung img { max-width: 100%; max-height: calc(100vh - 130px); object-fit: contain; border-radius: var(--bo); background: #222; }
.mk-lon-khung figcaption { display: flex; justify-content: space-between; gap: 16px; width: 100%; color: #eee; font-size: var(--co-14); }
.mk-lon-khung figcaption b { color: #fff; }
.mk-lon-dong, .mk-lon-nut { position: absolute; display: grid; place-items: center; width: 46px; height: 46px; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .14); color: #fff; cursor: pointer; }
.mk-lon-dong:hover, .mk-lon-nut:hover { background: rgba(255, 255, 255, .26); }
.mk-lon-dong { top: 10px; right: 10px; }
.mk-lon-nut { top: 50%; transform: translateY(-50%); }
.mk-lon-nut.truoc { left: 10px; }
.mk-lon-nut.sau { right: 10px; }
.mk-lon .ic { width: 22px; height: 22px; }
@media (max-width: 599px) { .mk-lon-nut { display: none; } }

/* ------------------------------------------------ Album makeup — trang chọn ảnh (quản lý) */
.mka-dau { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; }
.mka-dau h3 { margin: 0; font-size: var(--co-16); }
.mka-dau p { margin: 2px 0 6px; color: var(--chu-3); font-size: var(--co-13); }
.mka-link { font-weight: 600; color: var(--cam-chu); word-break: break-all; }
.mka-dau-nut { display: flex; gap: 8px; flex-wrap: wrap; }
.mka-so { width: 100%; padding-top: 10px; border-top: 1px solid var(--vien); color: var(--chu-2); font-size: var(--co-14); }
.mka-so b { font-size: var(--co-18); color: var(--chu); }
.mka-luu-y { margin: 0 0 12px; }
.mka-loc { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.mka-luoi { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.mka-o { display: flex; flex-direction: column; overflow: hidden; border: 2px solid transparent; border-radius: var(--bo-lon); background: var(--mat);
  box-shadow: var(--bong-mem); }
.mka-o.an .mka-anh img { opacity: .35; filter: grayscale(1); }
.mka-anh { position: relative; display: block; padding: 0; border: 0; background: var(--nen-phu); cursor: zoom-in; aspect-ratio: 3 / 4; }
.mka-anh img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mka-dang-hien { position: absolute; top: 8px; left: 8px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: var(--bo-tron);
  background: var(--d-giao); color: #fff; font-size: var(--co-12); font-weight: 700; }
.mka-dang-hien .ic { width: 13px; height: 13px; }
.mka-dang-hien.an { background: var(--chu-2); }
.mka-tt { display: flex; flex-direction: column; gap: 1px; padding: 8px 10px 4px; min-width: 0; }
.mka-tt small { color: var(--chu-3); font-size: var(--co-12); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mka-khach { font-style: italic; }
.mka-nut { margin: 6px 10px 10px; justify-content: center; }
.mka-o.an .mka-nut { background: var(--n-giao); border-color: var(--v-giao); color: var(--c-giao); }
.mka-them { display: flex; margin: 16px auto 0; }
@media (max-width: 599px) {
  .mka-luoi { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .mka-nut { font-size: var(--co-13); padding: 4px 6px; }
}

/* ------------------------------------------------ Hạn giao hợp đồng — nút đổi luôn hiện (27/09) */
.nut-han-giao { display: inline-flex; align-items: center; gap: 4px; margin-left: 4px; padding: 2px 10px; border: 1px solid var(--cam-300);
  border-radius: var(--bo-tron); background: var(--cam-50); color: var(--cam-chu); font: inherit; font-size: var(--co-13); font-weight: 600; cursor: pointer; white-space: nowrap; }
.nut-han-giao:hover { background: var(--cam-100); }
.nut-han-giao .ic { width: 13px; height: 13px; }
.nut-han-giao.nho { margin: 4px 0 0; padding: 1px 8px; font-size: var(--co-12); }
.hg { gap: 10px; }
.hg-nhanh { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

/* ------------------------------------------------ Nhân sự (27/09) */
.ns-thanh { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
.ns-thanh .bd-thang { flex: 1 1 260px; }
.ns-can { border-color: var(--cam-300); background: var(--cam-50); }
/* Album ảnh mẫu / concept mẫu (chủ 29/09) */
.cm-dau { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; margin-bottom: 10px; }
.cm-luoi { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.cm-the { display: flex; flex-direction: column; min-width: 0; padding: 0; border: 1px solid var(--vien); border-radius: var(--bo-lon); background: var(--mat);
  box-shadow: var(--bong-mem); overflow: hidden; font: inherit; color: inherit; text-align: left; cursor: pointer; transition: transform var(--nhanh), border-color var(--nhanh); }
.cm-the:hover { transform: translateY(-2px); border-color: var(--vien-dam); }
.cm-the.mo { opacity: .55; }
.cm-bia { position: relative; aspect-ratio: 3 / 4; background: var(--nen-phu); overflow: hidden; }
.cm-bia img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cm-bia-trong { position: absolute; inset: 0; display: grid; place-items: center; color: var(--chu-3); }
.cm-bia-trong .ic { width: 32px; height: 32px; }
.cm-ma { position: absolute; top: 8px; left: 8px; padding: 3px 9px; border-radius: var(--bo-tron); background: rgba(20, 16, 12, .72); color: #fff;
  font-size: var(--co-13); font-weight: 700; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.cm-ma.trung { background: var(--d-tre); }
.cm-so { position: absolute; right: 8px; bottom: 8px; padding: 2px 8px; border-radius: var(--bo-tron); background: rgba(255, 255, 255, .9); color: var(--chu-2); font-size: var(--co-12); font-weight: 600; }
.cm-than { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px 12px; min-width: 0; }
.cm-than b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-than b.cm-chua-ten { color: var(--chu-3); font-weight: 500; font-style: italic; }
.cm-than small { color: var(--chu-3); font-size: var(--co-12); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-the-ds { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.cm-the-ds span { padding: 1px 7px; border-radius: var(--bo-tron); background: var(--cam-50); color: var(--cam-900); font-size: var(--co-11); }
.cm-the-loc { align-items: center; }
.chip-chon.nho { padding: 3px 10px; font-size: var(--co-13); }
.cm-anh-luoi { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 6px; }
.cm-anh-luoi.cm-cong-khai { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; max-width: 1100px; margin: 0 auto; padding: 0 16px; }
.cm-anh { aspect-ratio: 3 / 4; padding: 0; border: 0; border-radius: var(--bo); overflow: hidden; background: var(--nen-phu); cursor: zoom-in; }
.cm-anh img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cm-anh.cho { background: linear-gradient(90deg, var(--nen-phu) 25%, var(--mat) 50%, var(--nen-phu) 75%); background-size: 200% 100%; animation: sang 1.2s infinite; cursor: default; }

/* Hậu kỳ › Tổng quan (chủ 29/09) */
.hk-o-luoi { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; margin-bottom: 12px; }
.hk-o { text-align: left; font: inherit; color: inherit; }
.hk-o.chon { border-color: var(--cam-700); box-shadow: 0 0 0 1px var(--cam-700) inset; background: var(--cam-50); }
.hk-o.rong { opacity: .55; }
.hk-o .bd-so { font-size: var(--co-24); }
.hk-cd { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.hk-cd-o { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 76px; padding: 10px 12px; border: 1px solid var(--vien);
  border-left: 5px solid var(--d, var(--vien-dam)); border-radius: var(--bo); background: var(--mat); font: inherit; color: inherit; text-align: left; cursor: pointer; }
.hk-cd-o:hover:not(:disabled) { border-color: var(--vien-dam); }
.hk-cd-o:disabled { opacity: .5; cursor: default; }
.hk-cd-o b { font-size: var(--co-24); line-height: 1.1; }
.hk-cd-ten { font-size: var(--co-13); color: var(--chu-2); font-weight: 600; }
.hk-dong-toi td { background: var(--cam-50); }
.hk-ket { display: flex; align-items: center; gap: 10px; width: 100%; padding: 4px 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.hk-ket span { flex: 1; }
.hk-ket b { font-size: var(--co-18); }
.hk-ket .ic { width: 16px; height: 16px; color: var(--chu-3); }
/* Mốc thưởng sale (Nhân sự › Thưởng / phạt) */
.ts-dong { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; align-items: center; gap: 10px; margin-top: 6px; font-size: var(--co-13); color: var(--chu-2); }
.ts-dong b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ts-dong .bd-muc { display: block; }
/* Khách tiềm năng (chủ 28/09): bàn làm việc của sale */
.tn-tien-do { display: flex; flex-direction: column; gap: 6px; margin: 0 0 12px; font-size: var(--co-14); color: var(--chu-2); }
.tn-o-luoi { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin-bottom: 12px; }
.tn-o { text-align: left; font: inherit; color: inherit; }
.tn-o.chon { border-color: var(--cam-700); box-shadow: 0 0 0 1px var(--cam-700) inset; background: var(--cam-50); }
.tn-o.rong { opacity: .55; }
.tn-o .bd-so { font-size: var(--co-24); }
.tn-lam { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 12px; padding: 10px 12px; border-radius: var(--bo); background: var(--nen-phu); font-size: var(--co-14); color: var(--chu-2); }
.tn-lam .ic, .tn-xong .ic { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--cam-700); }
.tn-xong { display: flex; gap: 10px; align-items: flex-start; padding: 16px; border: 1px dashed var(--vien-dam); border-radius: var(--bo-lon); color: var(--chu-2); }
.tn-dong.viec-ghiChot, .tn-dong.viec-boSungLich { border-left: 4px solid var(--d-tre); }
.tn-dong.viec-moi, .tn-dong.viec-denHen { border-left: 4px solid var(--cam-500); }
.tn-chips { margin-top: 8px; }
.tn-tom-tat { margin: 8px 0 0; font-size: var(--co-14); color: var(--chu-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tn-tom-tat.mo { display: block; -webkit-line-clamp: unset; }
.tn-insight { margin: 6px 0 0; padding: 8px 10px; border-radius: var(--bo); background: var(--cam-50); font-size: var(--co-14); color: var(--cam-900); }
/* Khách tiềm năng — lead mới mỗi ngày (chủ 30/09) */
.tn-moi { margin-bottom: 12px; }
.tn-moi-so { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
.tn-moi-so > div { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: var(--bo); background: var(--nen-phu); min-width: 0; }
.tn-moi-so span { font-size: var(--co-12); font-weight: 600; color: var(--chu-3); }
.tn-moi-so b { font-size: 22px; font-variant-numeric: tabular-nums; line-height: 1.15; }
.tn-moi-so small { font-size: var(--co-12); color: var(--chu-3); }
.tn-moi-cot { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 4px; height: 96px; align-items: end; }
.tn-moi-o { display: flex; flex-direction: column; align-items: stretch; gap: 3px; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; }
.tn-moi-than { flex: 1; display: flex; align-items: flex-end; }
.tn-moi-than > span { display: flex; flex-direction: column; justify-content: flex-end; width: 100%; min-height: 2px; border-radius: 4px 4px 0 0; background: var(--cam-100, #f6d9c6); overflow: hidden; }
.tn-moi-than i { display: block; width: 100%; background: var(--cam-700); }
.tn-moi-o.chon .tn-moi-than > span { outline: 2px solid var(--cam-700); outline-offset: 1px; }
.tn-moi-nhan { font-size: 11px; color: var(--chu-3); text-align: center; font-variant-numeric: tabular-nums; }
.tn-moi-dong { margin: 8px 0 0; }
.tn-moi-thieu { display: flex; gap: 6px; align-items: flex-start; margin: 6px 0 0; color: var(--d-tre); }
.tn-moi-thieu .ic { flex: none; width: 15px; height: 15px; margin-top: 1px; }
@media (max-width: 560px) { .tn-moi-so { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tn-tuan { display: flex; flex-direction: column; gap: 6px; }
.tn-tuan-dong { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: var(--co-13); }
.tn-tuan-nhan { color: var(--chu-3); }
.tn-tuan-thanh { height: 14px; border-radius: 4px; background: var(--nen-phu); overflow: hidden; }
.tn-tuan-thanh > span { display: block; height: 100%; min-width: 2px; background: var(--cam-200); }
.tn-tuan-thanh i { display: block; height: 100%; background: var(--cam-700); }
.tn-tuan-so { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--chu-2); }
.ns-ds { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ns-ds > li { padding: 12px 14px; border: 1px solid var(--vien); border-radius: var(--bo-lon); background: var(--mat); box-shadow: var(--bong-mem); }
.ns-ds > li.toi { border-left: 4px solid var(--cam-500); }
.ns-ds.gon > li { box-shadow: none; padding: 8px 10px; background: var(--nen); border-color: transparent; }
.ns-ds-dau { display: flex; align-items: center; gap: 10px; }
.ns-ds-chu { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ns-ds-chu small { color: var(--chu-3); font-size: var(--co-13); }
.ns-ds-noi { margin: 8px 0 0; font-size: var(--co-14); color: var(--chu-2); }
.ns-ds-noi span { color: var(--chu-3); font-weight: 600; }
.ns-ds-noi.khong { color: var(--c-tre); }
.ns-tien { font-size: var(--co-16); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ns-tien.xanh, .bd-so.xanh { color: var(--c-giao); }
.ns-ava { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 50%; background: var(--cam-100); color: var(--cam-900);
  font-size: var(--co-13); font-weight: 700; }
.ns-ava.lon { width: 44px; height: 44px; font-size: var(--co-15); }
.ns-ava.rat-lon { width: 72px; height: 72px; font-size: 24px; }
.ns-ava.thuong { background: var(--n-giao); color: var(--d-giao); }
.ns-ava.phat { background: var(--n-tre); color: var(--d-tre); }
.ns-ava .ic { width: 18px; height: 18px; }
.ns-buoc { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ns-buoc span { padding: 2px 10px; border-radius: var(--bo-tron); background: var(--nen-phu); color: var(--chu-2); font-size: var(--co-12); }
.ns-buoc span.xong { background: var(--n-giao); color: var(--c-giao); }
.ns-buoc span.khong { background: var(--n-tre); color: var(--c-tre); }
.ns-nut { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ns-anh { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ns-phan-hoi { display: flex; gap: 8px; margin-top: 10px; }
.ns-phan-hoi .o-nhap { flex: 1; min-width: 0; }
.ns-form { gap: 12px; }
.ns-form .hai-o { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ns-tich { gap: 8px; align-items: center; font-size: var(--co-14); }
.ns-tim { max-width: 220px; min-height: 36px; }
.ns-db { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; }
.ns-db-o { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--vien); border-radius: var(--bo); background: var(--nen);
  color: var(--chu); text-decoration: none; cursor: pointer; }
.ns-db-o:hover { border-color: var(--vien-dam); background: var(--mat); }
.ns-db-chu { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ns-db-chu small { color: var(--chu-3); font-size: var(--co-12); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ns-goi { flex: none; }
.ns-hs-dau { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.ns-hs-chu { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.ns-hs-chu h2 { margin: 0; font-family: var(--font-sang); font-size: 24px; }
@media (max-width: 599px) { .ns-form .hai-o { grid-template-columns: minmax(0, 1fr); } .ns-tim { max-width: none; width: 100%; } }

/* ------------------------------------------------ Sổ tay nhân sự (27/09) */
.ns-tab-link { flex: none; display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 14px; border-radius: var(--bo-tron);
  color: var(--cam-chu); font-size: var(--co-14); font-weight: 600; text-decoration: none; }
.ns-tab-link .ic { width: 16px; height: 16px; }
.st-so { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--d-tre); color: #fff; font-size: 11px; }
.st-ds { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.st-o { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 14px 16px; border: 1px solid var(--vien); border-radius: var(--bo-lon); background: var(--mat);
  box-shadow: var(--bong-mem); color: var(--chu); text-decoration: none; }
.st-o:hover { border-color: var(--vien-dam); }
.st-o.nhap { border-style: dashed; background: var(--nen); box-shadow: none; }
.st-o-dau { display: flex; flex-direction: column; gap: 6px; }
.st-o-dau b { font-size: var(--co-16); }
.st-o small { color: var(--chu-3); font-size: var(--co-13); line-height: 1.45; }
.st-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-bottom: 10px; color: var(--chu-3); font-size: var(--co-13); }
.st-meta a { color: var(--cam-chu); font-weight: 600; text-decoration: none; }
.st-ql { margin: 0 0 12px; }
.st-bai { padding: 20px 22px; }
.st-xac-nhan { position: sticky; bottom: calc(var(--cao-thanh-duoi) + env(safe-area-inset-bottom) + 8px); z-index: 3; display: flex; justify-content: center; margin: 4px 0 16px; }
@media (min-width: 900px) { .st-xac-nhan { bottom: 16px; } }
.st-nut-doc { min-height: 50px; padding: 0 28px; border-radius: var(--bo-tron); box-shadow: var(--bong-noi); }
.st-ai { display: flex; flex-wrap: wrap; gap: 6px; }
/* nội dung Markdown */
.md { font-size: var(--co-15); line-height: 1.65; color: var(--chu); overflow-wrap: anywhere; }
.md h2 { margin: 0 0 12px; font-family: var(--font-sang); font-size: 26px; line-height: 1.25; font-weight: 600; }
.md h3 { margin: 22px 0 8px; font-size: var(--co-18); }
.md h4 { margin: 16px 0 6px; font-size: var(--co-15); }
.md p { margin: 8px 0; }
.md ul, .md ol { margin: 8px 0; padding-left: 22px; }
.md li { margin: 4px 0; }
.md li.md-tich { list-style: none; margin-left: -22px; }
.md li.md-tich span { margin-right: 6px; color: var(--chu-3); }
.md li.md-tich.xong { color: var(--chu-3); text-decoration: line-through; }
.md blockquote { margin: 10px 0; padding: 10px 14px; border-left: 3px solid var(--cam-400); background: var(--cam-50); border-radius: 0 var(--bo-nho) var(--bo-nho) 0; color: var(--chu-2); }
.md hr { border: 0; border-top: 1px solid var(--vien); margin: 18px 0; }
.md code { padding: 1px 5px; border-radius: 4px; background: var(--nen-phu); font-size: .92em; }
.md mark { padding: 0 3px; border-radius: 3px; background: var(--n-chuY); color: var(--c-chuY); white-space: nowrap; }
.md-bang { overflow-x: auto; margin: 10px 0; }
.md table { width: 100%; border-collapse: collapse; font-size: var(--co-14); }
.md th, .md td { padding: 8px 10px; border: 1px solid var(--vien); text-align: left; vertical-align: top; }
.md th { background: var(--nen); font-weight: 700; }
/* soạn */
.st-soan { gap: 12px; }
.st-soan .hai-o { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.st-soan-dau { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.st-o-soan { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13.5px; line-height: 1.55; min-height: 320px; }
.st-xem-truoc { max-height: 60vh; overflow: auto; padding: 14px; border: 1px solid var(--vien); border-radius: var(--bo); }
.st-tuy-chon { display: flex; flex-direction: column; gap: 8px; font-size: var(--co-14); }
.st-tuy-chon .hang { gap: 8px; align-items: center; }
/* checklist */
.st-cl-mau { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.st-cl-nut { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 14px; border: 1px solid var(--vien-dam); border-radius: var(--bo);
  background: var(--mat); color: var(--chu); font: inherit; text-align: left; cursor: pointer; }
.st-cl-nut:hover { border-color: var(--cam-400); }
.st-cl-nut.da { border-color: var(--v-giao); background: var(--n-giao); }
.st-cl-nut small { color: var(--chu-3); font-size: var(--co-12); }
.st-cl-ds { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.st-cl-ds label { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--vien); border-radius: var(--bo); cursor: pointer; font-size: var(--co-15); }
.st-cl-ds label.xong { background: var(--n-giao); border-color: var(--v-giao); }
.st-cl-ds .hop-chon { margin-top: 1px; flex: none; }
/* Sổ tay › Sơ đồ ca chụp (07/10): màu bộ phận lấy lại bảng màu trạng thái — luôn đi kèm chữ, không chỉ dựa vào màu */
.bp-chung { --bp: var(--chu-2); --bp-n: var(--nen-phu); }
.bp-LE_TAN { --bp: var(--d-daDen); --bp-n: var(--n-daDen); }
.bp-QUAN_LY { --bp: var(--d-chuaChup); --bp-n: var(--n-chuaChup); }
.bp-SUPPORT { --bp: var(--cam-600); --bp-n: var(--cam-50); }
.bp-PHOTO { --bp: var(--d-guiGoc); --bp-n: var(--n-guiGoc); }
.bp-MAKEUP { --bp: var(--d-choChon); --bp-n: var(--n-choChon); }
.sd-cham { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--bp); flex: none; }
.sd-gioi-thieu { margin: 2px 0 12px; color: var(--chu-2); font-size: var(--co-14); }
.sd-loc, .sd-tab { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.sd-loc button, .sd-tab button { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 13px; border: 1px solid var(--vien-dam);
  border-radius: var(--bo-tron); background: var(--mat); color: var(--chu); font-size: var(--co-14); font-weight: 600; cursor: pointer; }
.sd-loc button:hover, .sd-tab button:hover { border-color: var(--bp, var(--chu-3)); }
.sd-loc button.chon, .sd-tab button.chon { background: var(--bp-n, var(--nen-phu)); border-color: var(--bp, var(--chu)); box-shadow: inset 0 0 0 1px var(--bp, var(--chu)); }
.sd-tab button { min-height: 34px; padding: 0 11px; font-size: var(--co-13); }
.sd-dem { margin: 0 0 4px; color: var(--chu-2); font-size: var(--co-13); }
.sd-dem a { color: var(--cam-chu); font-weight: 600; text-decoration: none; }
/* điện thoại: một cột trên xuống · máy tính: 4 cột giai đoạn, mũi tên giữa các cột */
.sd-so-do { display: grid; gap: 0; }
.sd-gd { position: relative; min-width: 0; }
.sd-gd-dau { display: flex; align-items: center; gap: 10px; padding: 14px 0 10px; }
.sd-gd-dau b { display: block; font-size: var(--co-16); line-height: 1.3; }
.sd-gd-dau small { display: block; color: var(--chu-3); font-size: var(--co-12); }
.sd-gd-so { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--chu); color: var(--mat); font-weight: 700; font-size: var(--co-13); flex: none; }
.sd-cot { list-style: none; margin: 0; padding: 0; }
.sd-buoc-li { position: relative; padding-bottom: 20px; }
/* đường nối + mũi tên xuống, thẳng tâm vòng số bước */
.sd-buoc-li::after { content: ''; position: absolute; left: 22px; bottom: 5px; height: 15px; width: 2px; background: var(--vien-dam); }
.sd-buoc-li::before { content: ''; position: absolute; left: 18px; bottom: 0; border: 5px solid transparent; border-top-color: var(--vien-dam); border-bottom: 0; }
.sd-buoc { display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 12px 10px; border: 1px solid var(--vien); border-radius: var(--bo-lon);
  background: var(--mat); box-shadow: var(--bong-mem); color: var(--chu); text-align: left; cursor: pointer; transition: border-color var(--nhanh), opacity var(--nhanh); }
.sd-buoc:hover { border-color: var(--cam-400); }
.sd-so-do.loc .sd-buoc-li:not(.mo) .sd-buoc { box-shadow: inset 3px 0 0 var(--bp), var(--bong-mem); }
.sd-buoc-li.mo .sd-buoc { opacity: .5; background: var(--nen); box-shadow: none; }
.sd-buoc-li.mo .sd-buoc:hover { opacity: .85; }
.sd-so { display: grid; place-items: center; width: 24px; height: 24px; border: 2px solid var(--chu); border-radius: 50%; background: var(--mat); font-size: var(--co-12); font-weight: 700; flex: none; }
.sd-so-do.loc .sd-buoc-li:not(.mo) .sd-so { border-color: var(--bp); background: var(--bp); color: #fff; }
.sd-than { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.sd-moc { color: var(--cam-chu); font-size: var(--co-12); font-weight: 600; }
.sd-ten { font-size: var(--co-15); line-height: 1.3; }
.sd-bp { display: flex; flex-wrap: wrap; gap: 4px; }
.sd-bp-chip { display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px; border-radius: var(--bo-tron); background: var(--bp-n); font-size: var(--co-12); font-weight: 600; white-space: nowrap; }
.sd-bp-chip.chon { box-shadow: inset 0 0 0 1.5px var(--bp); }
.sd-tom { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; color: var(--chu-2); font-size: var(--co-13); line-height: 1.45; }
.sd-co-cl { display: inline-flex; align-items: center; gap: 5px; color: var(--c-giao); font-size: var(--co-12); font-weight: 600; }
.sd-buoc .sd-mui { margin-top: 2px; color: var(--chu-3); }
.sd-tiep { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 8px; padding: 12px 14px; border: 1px dashed var(--vien-dam); border-radius: var(--bo-lon); color: var(--chu-2); }
.sd-tiep > .ic { margin-top: 2px; }
.sd-tiep b { display: block; color: var(--chu); }
.sd-tiep small { display: block; font-size: var(--co-13); }
.sd-tiep-lk { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 4px; font-size: var(--co-13); }
.sd-tiep-lk a { color: var(--cam-chu); font-weight: 600; text-decoration: none; }
@media (min-width: 900px) {
  .sd-so-do { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 30px; align-items: start; margin-bottom: 6px; }
  .sd-gd + .sd-gd::before { content: ''; position: absolute; left: -22px; top: 22px; width: 14px; height: 2px; background: var(--chu-3); }
  .sd-gd + .sd-gd::after { content: ''; position: absolute; left: -12px; top: 18px; border: 5px solid transparent; border-left-color: var(--chu-3); border-right: 0; }
  .sd-cot .sd-buoc-li:last-child { padding-bottom: 0; }
  .sd-cot .sd-buoc-li:last-child::before, .sd-cot .sd-buoc-li:last-child::after { display: none; }
}
/* hộp chi tiết 1 bước */
.sd-hop-meta { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 8px; }
.sd-chip-moc { --n: var(--cam-50); --c: var(--cam-900); }
.sd-hop-tom { margin: 0 0 8px; font-size: var(--co-15); }
.sd-vi-sao { margin: 0 0 12px; padding: 10px 12px; border-left: 3px solid var(--cam-400); border-radius: 0 var(--bo-nho) var(--bo-nho) 0; background: var(--cam-50); color: var(--chu-2); font-size: var(--co-14); }
.sd-app { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 4px; color: var(--chu-3); font-size: var(--co-13); }
.sd-h { margin: 16px 0 8px; font-size: var(--co-16); }
.sd-h small { margin-left: 6px; color: var(--chu-3); font-size: var(--co-12); font-weight: 400; }
.sd-khoi-ds { display: grid; gap: 8px; }
@media (min-width: 700px) { .sd-khoi-ds { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); } }
.sd-khoi { padding: 10px 12px; border: 1px solid var(--vien); border-left: 3px solid var(--bp); border-radius: var(--bo); background: var(--mat); }
.sd-khoi header { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin-bottom: 4px; }
.sd-khoi header small { color: var(--chu-3); font-size: var(--co-12); }
.sd-khoi ol { display: grid; gap: 5px; margin: 0; padding-left: 20px; font-size: var(--co-14); line-height: 1.5; }
.sd-cl-ds { display: grid; gap: 8px; }
.sd-cl { border: 1px solid var(--vien-dam); border-radius: var(--bo); background: var(--mat); }
.sd-cl.nhap { border-style: dashed; background: var(--nen); }
.sd-cl.mo { border-color: var(--v-giao); }
.sd-cl-dau { display: flex; align-items: center; gap: 10px; width: 100%; min-height: var(--cham); padding: 10px 12px; border: 0; background: none; color: var(--chu); text-align: left; cursor: pointer; }
.sd-cl-dau > .ic:first-child { color: var(--c-giao); }
.sd-cl-ten { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.sd-cl-ten small { color: var(--chu-3); font-size: var(--co-12); }
.sd-cl .sd-mui { color: var(--chu-3); transition: transform var(--nhanh); }
.sd-cl.mo .sd-mui { transform: rotate(180deg); }
.sd-cl-than { padding: 0 12px 12px; }
.sd-cl-than .xn-chan { position: static; margin: 10px 0 0; padding: 0; border: 0; background: none; box-shadow: none; }
.sd-cl-than .pl-luu-y { margin: 0 0 10px; }
.sd-cl-xem { display: grid; gap: 4px; margin: 0 0 10px; padding: 0; list-style: none; color: var(--chu-2); font-size: var(--co-14); }
.sd-doc { display: grid; gap: 6px; }
@media (min-width: 700px) { .sd-doc { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sd-doc-o { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border: 1px solid var(--vien); border-radius: var(--bo); color: var(--chu); font-size: var(--co-14); font-weight: 600; text-decoration: none; }
.sd-doc-o:hover { border-color: var(--cam-400); }
.sd-doc-o > .ic { margin-top: 3px; color: var(--chu-3); }
.sd-hop-chan { display: flex; justify-content: space-between; gap: 8px; margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--vien); }

/* bản in hợp đồng A4 */
.st-a4 { max-width: 210mm; margin: 0 auto 20px; padding: 22mm 20mm; background: #fff; box-shadow: var(--bong-mem); border: 1px solid var(--vien); }
.md-hd { font-family: 'Times New Roman', Times, serif; font-size: 15px; line-height: 1.55; }
.md-hd h2 { font-family: inherit; text-align: center; font-size: 22px; font-weight: 700; }
.md-hd h3 { font-size: 16px; margin-top: 16px; }
.md-hd table, .md-hd th, .md-hd td { border: 0; text-align: center; background: none; }
.md-hd td { height: 28px; }
@media print {
  .st-a4 { box-shadow: none; border: 0; padding: 14mm 16mm; max-width: none; }
  .st .khong-in { display: none !important; }
}
@media (max-width: 599px) { .st-soan .hai-o { grid-template-columns: minmax(0, 1fr); } .st-bai { padding: 16px 14px; } .st-a4 { padding: 16px 14px; } }
.st-nhac { margin: 0 0 12px; border: 1px solid var(--v-tre); background: var(--n-tre); }
.st-nhac b { color: var(--c-tre); }

/* ---------------------------------------------------------------- Đợt 3: thợ ngoài · chất lượng · lỗi in · chăm sóc khách · chốt két */
.vh-ca { display: grid; grid-template-columns: 70px minmax(0, 1fr) auto minmax(0, 1fr) auto; align-items: center; gap: 8px; font-size: var(--co-14); }
.vh-ca span { color: var(--chu-3); }
.vh-sao { color: var(--cam-500); letter-spacing: 1px; font-size: var(--co-13); }
.vh-sao i { font-style: normal; color: var(--vien-dam); }
.vh-diem { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.vh-diem li { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) 36px; align-items: center; gap: 10px; font-size: var(--co-14); }
.vh-diem b { text-align: right; font-variant-numeric: tabular-nums; }
.vh-chon-hd { display: flex; flex-wrap: wrap; gap: 6px; }
.vh-ket { max-width: 560px; }
.vh-tu-dong { display: flex; align-items: center; justify-content: flex-end; background: var(--nen-phu); color: var(--chu-2); font-weight: 600; }
.vh-ket-du { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 10px 14px; border-radius: var(--bo); background: var(--nen); font-size: var(--co-14); }
.vh-ket-du b { font-size: var(--co-18); font-variant-numeric: tabular-nums; }
.vh-ket-du.khop { background: var(--n-giao); color: var(--c-giao); }
.vh-ket-du.lech { background: var(--n-tre); color: var(--c-tre); }
.vh-menh-gia { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.vh-menh-gia label { display: flex; flex-direction: column; gap: 3px; font-size: var(--co-12); color: var(--chu-3); font-weight: 600; }
@media (max-width: 479px) {
  .vh-ca { grid-template-columns: 1fr 1fr; }
  .vh-ca b { grid-column: 1 / -1; }
  .vh-ca span { display: none; }
  .vh-ca .nut { grid-column: 1 / -1; justify-self: start; }
}
.vh-phai { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }

/* Sổ tay: biểu mẫu in A4 (bảng có kẻ ô, khác trang ký hợp đồng) + in tài liệu thường */
.md-bm table, .md-bm th, .md-bm td { border: 1px solid #888; text-align: left; }
.md-bm td { height: auto; }
.md-bm h2 { margin-bottom: 4px; }
@media print {
  .st-bai { border: 0; box-shadow: none; padding: 12mm 14mm; }
  .md mark { background: none; color: inherit; }
  .md a { color: inherit; text-decoration: none; }
}
.md-hd > p:first-child { text-align: center; }
.md-bm > .md-bang:last-child table, .md-bm > .md-bang:last-child th, .md-bm > .md-bang:last-child td { border: 0; text-align: center; background: none; }
.md-bm > .md-bang:last-child td { height: 30px; }
.md th, .md td { overflow-wrap: break-word; } /* không ngắt giữa "02", "BM-01" khi bảng hẹp */
.md-bm td:empty { height: 32px; } /* dòng trống để điền tay */
/* cửa sổ doanh số chốt: dòng + nút Sửa tiền */
.ct-dong-sua { display: flex; align-items: center; gap: 8px; }
.ct-dong-sua > .dong-ct { flex: 1; min-width: 0; }
.ct-dong-sua > .nut { flex: none; }

/* ------------------------------------------------ Hồ sơ khách + soát dữ liệu (chủ 30/09 — tách khách / lịch, bước 1) */
.hs .the + .the, .hs .bd-luoi + .the, .hs .canh-bao + .bd-luoi { margin-top: 12px; }
.hs .bd-luoi { margin-top: 12px; }
.hs-dau h2 { font-size: 22px; }
.hs-dau .hang-sdt { margin-top: 6px; }
.hs-canh-bao { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; }
.hs-canh-bao .ic { width: 15px; height: 15px; vertical-align: -2px; }
.hs-ds { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.hs-dong { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-top: 1px solid var(--vien); }
.hs-dong:first-child { border-top: 0; padding-top: 4px; }
.hs-moc { display: flex; flex-direction: column; gap: 2px; font-variant-numeric: tabular-nums; }
.hs-moc b { font-size: var(--co-16); }
.hs-moc small { font-size: var(--co-12); color: var(--chu-3); }
.hs-than { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.hs-ten { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.hs-ten a { font-weight: 600; }
.hs-goi { white-space: pre-line; }
.hs-hd { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 8px; border-radius: var(--bo-nho); background: var(--nen-phu); }
.hs-lead + .hs-lead { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--vien); }
.hs-tom-tat { margin-top: 4px; white-space: pre-line; font-size: var(--co-14); color: var(--chu-2); }
.hs-soat { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.hs-soat-dong { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.hs-soat-dong li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.kh-cu { display: flex; flex-direction: column; gap: 4px; }
.kh-cu.trung { background: var(--n-tre); color: var(--c-tre); border-color: var(--v-tre); }
.hs-nap { margin-bottom: 12px; }
.hs-kh { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-top: 8px; font-size: var(--co-14); }
.hs-kh span { color: var(--chu-3); font-weight: 600; }
/* Thẻ concept chia nhóm (chủ 30/09) */
.the-nhom-ds { display: flex; flex-direction: column; gap: 8px; }
.the-nhom { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 4px 10px; align-items: start; }
.the-nhom-ten { font-size: var(--co-12); font-weight: 700; color: var(--chu-3); text-transform: uppercase; letter-spacing: .03em; padding-top: 7px; }
.the-nhom-ten b { color: var(--cam-chu); }
@media (max-width: 560px) { .the-nhom { grid-template-columns: 1fr; } .the-nhom-ten { padding-top: 0; } }
/* Lead: cảnh báo "chốt trên tin nhắn, chưa có lịch" (chủ 30/09) */
.tn-canh-bao { display: flex; gap: 8px; align-items: flex-start; margin: 8px 0 0; padding: 8px 10px; border-radius: var(--bo); background: var(--n-tre); color: var(--c-tre); font-size: var(--co-14); }
.tn-canh-bao a { color: inherit; font-weight: 600; }

/* Cảnh báo NẶNG đầu mọi trang (chủ 30/09): lịch nhập thiếu (đỏ đậm, trên) · chốt trên tin nhắn chưa có lịch (đỏ nhạt) */
.canh-bao-dau { display: flex; align-items: center; gap: 10px; padding: 10px 16px; font-size: var(--co-14); line-height: 1.35; text-decoration: none; }
.canh-bao-dau.rat { background: var(--d-tre); color: #fff; }
.canh-bao-dau.vua { background: var(--n-tre); color: var(--c-tre); border-bottom: 1px solid var(--v-tre); }
.canh-bao-dau .cb-ic { font-size: 18px; flex: none; }
.canh-bao-dau .cb-xem { margin-left: auto; flex: none; font-weight: 700; white-space: nowrap; }
.canh-bao-dau:hover .cb-xem { text-decoration: underline; }
.huy-hieu.rat-gap { background: var(--d-tre); color: #fff; border-color: var(--d-tre); }
.tn-loc-lark { align-items: center; }
.chip-chon.tn-chip-do { color: var(--c-tre); border-color: var(--v-tre); }
.chip-chon.tn-chip-do.dang-chon { background: var(--d-tre); border-color: var(--d-tre); color: #fff; }

/* Khách tiềm năng theo Trạng Thái Lead (chủ 30/09): tầng việc, lời agent, bảng trạng thái, phễu */
.tn-tang { margin: 0 0 12px; }
.tn-tang-dau { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 0 0 6px; font-size: var(--co-14); }
.tn-tang-dau span { color: var(--chu-2); font-size: var(--co-13); }
.tn-tang.tang-lich .tn-tang-dau b { color: var(--c-tre); }
.tn-agent { margin: 8px 0 0; padding: 8px 10px; border-radius: var(--bo); background: var(--nen-phu); font-size: var(--co-14); }
.tn-agent.do { background: var(--n-tre); color: var(--c-tre); }
.tn-agent.vang { background: var(--n-chuY); color: var(--c-chuY); }
.tn-agent-noi { color: inherit; opacity: .85; margin: 0 0 4px; font-style: italic; }
.tn-agent-noi span { font-style: normal; font-size: var(--co-12); }
.tn-agent-viec { display: flex; gap: 6px; align-items: flex-start; }
.tn-agent-viec .ic { flex: none; margin-top: 2px; }
.tn-agent-cu { margin-top: 4px; font-size: var(--co-13); }
.tn-agent-cu a { color: inherit; font-weight: 600; }
.tn-agent-them { margin: 6px 0 0; padding-left: 18px; font-size: var(--co-13); }
.tn-tt-luoi { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.tn-tt-dong { display: flex; justify-content: space-between; width: 100%; padding: 6px 8px; border: 0; border-radius: var(--bo); background: transparent; font: inherit; font-size: var(--co-14); text-align: left; cursor: pointer; color: inherit; }
.tn-tt-dong:hover { background: var(--nen-phu); }
.tn-tt-nhom.tang-lich .tn-tt-dong b { color: var(--d-tre); }
.tn-pheu { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.tn-pheu-o { display: flex; flex-direction: column; gap: 2px; }
.tn-pheu-o b { font-size: var(--co-20); }
.tn-pheu-thanh { display: block; height: 6px; border-radius: 3px; background: var(--nen-phu); overflow: hidden; margin-top: 4px; }
.tn-pheu-thanh i { display: block; height: 100%; background: var(--cam-600, var(--d-tre)); }
.tn-dong.viec-suaGioLich, .tn-dong.viec-daCoc, .tn-dong.viec-lichTreo { border-left: 4px solid var(--d-tre); }

/* Hậu kỳ — bảng kiểu Excel (chủ 01/10): đầu cột + cột tên đứng yên, ô tìm ở góc, sắp xếp theo cột */
.bx-thanh { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 0 0 8px; }
.bx-phai { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-left: auto; }
.bx-tim { display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 10px; border: 1px solid var(--vien); border-radius: var(--bo); background: var(--mat); min-width: 260px; }
.bx-tim input { border: 0; outline: 0; background: transparent; font: inherit; font-size: var(--co-14); width: 100%; color: inherit; }
.bx-tim:focus-within { border-color: var(--cam-600); }
.bx-cuon { overflow: auto; max-height: calc(100vh - 220px); border: 1px solid var(--vien); border-radius: var(--bo); background: var(--mat); }
.bx-bang { border-collapse: separate; border-spacing: 0; width: max-content; min-width: 100%; font-size: var(--co-13); }
.bx-bang th, .bx-bang td { padding: 6px 10px; border-bottom: 1px solid var(--vien); border-right: 1px solid var(--vien); white-space: nowrap; text-align: left; vertical-align: middle; background: var(--mat); }
.bx-bang thead th { position: sticky; top: 0; z-index: 2; background: var(--nen-phu); font-size: var(--co-12); font-weight: 600; color: var(--chu-2); padding: 0; }
.bx-bang thead th button { all: unset; display: block; padding: 8px 10px; cursor: pointer; width: 100%; box-sizing: border-box; }
.bx-bang thead th button:hover { color: var(--chu); }
.bx-bang .bx-stt { color: var(--chu-3); text-align: right; position: sticky; left: 0; z-index: 1; box-sizing: border-box; width: 44px; min-width: 44px; max-width: 44px; padding-left: 4px; padding-right: 8px; }
.bx-bang thead .bx-stt { z-index: 3; padding: 8px 8px 8px 4px; }
.bx-bang .bx-ten { position: sticky; left: 44px; z-index: 1; font-weight: 600; max-width: 240px; overflow: hidden; text-overflow: ellipsis; box-shadow: 2px 0 0 var(--vien); }
.bx-bang thead .bx-ten { z-index: 3; }
.bx-bang .bx-ten a { color: inherit; }
.bx-bang .bx-link { color: var(--chu-3); }
.bx-bang .bx-link .ic { width: 14px; height: 14px; vertical-align: -2px; }
.bx-bang .bx-so { font-variant-numeric: tabular-nums; }
.bx-bang tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--nen-phu) 45%, var(--mat)); }
.bx-bang tbody tr:hover td { background: var(--nen-phu); }
.bx-bang tr.tre td.bx-ten { box-shadow: inset 3px 0 0 var(--d-tre), 2px 0 0 var(--vien); }
.bx-dai { display: inline-block; max-width: 260px; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
.bx-tre { color: var(--d-tre); font-weight: 600; }
.bx-gan { color: var(--c-chuY); font-weight: 600; }
.bx-sdt { all: unset; cursor: copy; font-variant-numeric: tabular-nums; }
.bx-sdt:hover { text-decoration: underline; }
.bx-bang .huy-hieu { font-size: var(--co-12); }
/* ô chọn thợ PTS trong bảng: nhìn như chữ thường, rê chuột / bấm mới hiện khung */
.bx-pts { position: relative; display: inline-flex; align-items: center; margin: -4px -6px; }
.bx-pts select { appearance: none; -webkit-appearance: none; font: inherit; color: inherit; background: transparent; border: 1px solid transparent; border-radius: 6px;
  padding: 3px 22px 3px 6px; max-width: 200px; text-overflow: ellipsis; cursor: pointer; field-sizing: content; }
.bx-pts::after { content: '▾'; position: absolute; right: 7px; pointer-events: none; color: var(--chu-3); font-size: 11px; }
.bx-pts select:hover, .bx-pts select:focus-visible { border-color: var(--vien); background: var(--mat); outline: none; }
.bx-pts select:focus-visible { border-color: var(--cam-600); }
.bx-pts.chua select { color: var(--d-tre); font-weight: 600; border-color: color-mix(in srgb, var(--d-tre) 35%, transparent); }
.bx-pts.chua::after { color: var(--d-tre); }

/* Hậu kỳ — ⚠️ phát sinh chưa vào hợp đồng (chủ 01/10) */
.hk-phat-sinh { margin: 10px 0 0; padding: 10px 12px; border-radius: var(--bo); background: var(--n-tre); color: var(--c-tre); border: 1px solid var(--v-tre); font-size: var(--co-14); }
.hk-ps-dau { display: flex; gap: 6px; align-items: flex-start; }
.hk-ps-dau .ic { flex: none; margin-top: 2px; }
.hk-ps-tin { margin: 6px 0 8px; font-size: var(--co-13); opacity: .9; cursor: pointer; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hk-ps-tin.mo { display: block; -webkit-line-clamp: unset; }
.hop-xac-nhan .hang-nut-xn.them { margin-bottom: var(--k-2); justify-content: flex-start; }

/* Sổ tay: lưới ảnh quy chuẩn (![chú thích](/img/…)) */
.md-anh { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; margin: 8px 0 16px; }
.md-anh figure { margin: 0; }
.md-anh img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--bo); border: 1px solid var(--vien); display: block; background: var(--nen-phu); }
.md-anh figcaption { font-size: var(--co-12); color: var(--chu-2); margin-top: 4px; line-height: 1.35; }
.bx-pts option, .bx-pts optgroup { color: var(--chu); background: var(--mat); }
/* ô sửa được trong bảng (hạn trả file): bút chì hiện khi rê chuột */
.bx-sua { all: unset; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; border-radius: 6px; padding: 2px 6px; margin: -3px -6px; border: 1px solid transparent; }
.bx-sua .ic { width: 13px; height: 13px; color: var(--chu-3); opacity: 0; }
.bx-sua:hover, .bx-sua:focus-visible { border-color: var(--vien); background: var(--mat); }
.bx-sua:focus-visible { border-color: var(--cam-600); }
.bx-sua:hover .ic, .bx-sua:focus-visible .ic { opacity: 1; }
.bx-mo { color: var(--chu-3); font-weight: 400; opacity: 0; }
.bx-sua:hover .bx-mo, .bx-sua:focus-visible .bx-mo, tr:hover .bx-mo { opacity: 1; }
.td-hk-sua { align-self: flex-start; }

/* Sổ quỹ tiền mặt (03/10) — public/js/man-hinh/xac-nhan-thu.js */
.sq .bd-bang th:not(.so), .sq .bd-bang td:not(.so) { text-align: left; }
.sq .bd-tab { margin-bottom: 12px; }
.sq-luoi { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 10px; }
.sq-nhom .tien, .sq-phieu .tien { font-variant-numeric: tabular-nums; }
.sq-ds { display: flex; flex-direction: column; margin-top: 8px; border-top: 1px solid var(--vien); }
.sq-dong { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--vien); cursor: pointer; }
.sq-dong .than { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 4px; min-width: 0; }
.sq-dong .nho-xiu { flex-basis: 100%; }
.sq-ls { list-style: none; margin: 8px 0 0; padding: 8px 0 0; border-top: 1px dashed var(--vien); display: flex; flex-direction: column; gap: 4px; font-size: var(--co-13); }
.sq-ls li { display: flex; align-items: flex-start; gap: 7px; color: var(--chu-2); }
.sq-ls .ic { flex: none; width: 15px; height: 15px; margin-top: 2px; }
.sq-ls li.vang .ic { color: var(--c-chuY); }
.sq-ls li.cam .ic { color: var(--cam-chu); }
.sq-ls li.xanh .ic { color: var(--c-giao); }
.sq-ls li.do, .sq-ls li.do .ic { color: var(--d-tre); }
.sq-lech { margin: 0; font-weight: 600; }
.sq-lech.do { color: var(--d-tre); }
.sq-lech.xanh { color: var(--c-giao); }
.sq-huy td { color: var(--chu-3); text-decoration: line-through; }
.sq-huy td:last-child { text-decoration: none; }
.sq-ngay { color: var(--cam-chu); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 560px) { .sq-luoi { grid-template-columns: 1fr; } }

/* ------------------------------------------------ Hậu kỳ: đầu trang gọn + bảng trạng thái vừa một màn hình (chủ 03/10) */
.hk-tim { margin-bottom: 10px; }
.hk-dau { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 10px; }
.hk-dau .hk-tim { flex: 1 1 320px; margin: 0; }
.hk-dau > .chon-nhanh { flex: 0 1 auto; min-width: 0; }
.loc-nhan { flex: none; align-self: center; white-space: nowrap; }
.loc-ngan { flex: none; align-self: stretch; width: 1px; margin: 4px 4px; background: var(--vien); }
.goi-y-cham { margin: 0 0 8px; }
@media (hover: hover) and (pointer: fine) { .goi-y-cham { display: none; } }
@media (min-width: 900px) { .noi-dung.vua-man { padding-bottom: 12px; } }
/* bảng đã đặt chiều cao vừa màn hình: cột cao tối đa bằng bảng (tự cuộn dọc), thanh kéo ngang luôn hiện, rõ ở đáy */
.bang-tt.vua { scroll-snap-type: none; padding-bottom: 6px; }
.bang-tt.vua .cot-tt { max-height: 100%; }
.bang-tt.vua::-webkit-scrollbar { height: 12px; }
.bang-tt.vua::-webkit-scrollbar-track { background: var(--nen-phu); border-radius: 999px; }
.bang-tt.vua::-webkit-scrollbar-thumb { background: var(--vien-dam); border-radius: 999px; border: 2px solid var(--nen-phu); }
.bang-tt.vua::-webkit-scrollbar-thumb:hover { background: var(--chu-3); }

/* ------------------------------------------------ Chi tiết ca: gọn lại, gói chụp lên đầu (chủ 04/10) */
.menu-them { position: relative; display: inline-flex; }
.menu-them-ds { position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; display: flex; flex-direction: column; min-width: 210px; padding: 4px;
  background: var(--mat); border: 1px solid var(--vien); border-radius: var(--bo); box-shadow: 0 8px 24px rgba(0,0,0,.12); }
.menu-them-ds button { all: unset; box-sizing: border-box; padding: 9px 12px; border-radius: var(--bo-nho); cursor: pointer; white-space: nowrap; font-size: var(--co-14); }
.menu-them-ds button:hover, .menu-them-ds button:focus-visible { background: var(--nen-phu); }
.menu-them-ds button.nguy { color: var(--d-tre); }
.ghi-chu-ca > .kep { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.xem-them { margin-top: 4px; font-size: var(--co-13); }
.goi-ca .hang-huy-hieu { margin-top: -2px; }
.tien-goi-gon { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; margin-top: 8px; padding: 8px 12px; border-radius: var(--bo); background: var(--nen-phu); font-size: var(--co-14); color: var(--chu-2); }
.tien-goi-gon b { color: var(--chu); font-size: var(--co-16); font-variant-numeric: tabular-nums; margin-left: 4px; }
.tien-goi-gon .nut-chu { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: var(--co-13); }
.tien-goi-gon .nut-chu .ic { width: 14px; height: 14px; }
.goi-chi-tiet { white-space: pre-line; margin-top: 10px; }
.ekip-nut { gap: 6px; align-items: center; }
.ekip-nut .hang-chep { margin-top: 0; }
.luoi-ekip.gon { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 6px; }
.luoi-ekip.gon .o-ekip { padding: 6px 10px; }
@media (max-width: 599px) { .luoi-ekip.gon { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ghi-chu-hd-trong { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding-top: 10px; padding-bottom: 10px; }
.ca-hd.trong-hop .the { padding: 12px 14px; margin-bottom: 10px; }

/* ------------------------------------------------ Hậu kỳ: 🚨 thiếu hạn trả file / thợ PTS (chủ 05/10) */
.huy-hieu.canh-bao-dam { background: var(--d-tre); color: #fff; border-color: transparent; font-weight: 700; }
.the-viec.thieu { border-color: var(--d-tre); box-shadow: 0 0 0 1px var(--d-tre); }
.bx-thieu { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--d-tre); color: #fff; font-weight: 700; font-size: var(--co-12); }
.bx-pts.dam select { background: var(--d-tre); color: #fff; border-color: var(--d-tre); }
.bx-pts.dam::after { color: #fff; }
.hk-canh-bao { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin: 0 0 10px; padding: 10px 14px; border-radius: var(--bo);
  background: var(--d-tre); color: #fff; font-size: var(--co-14); }
.hk-canh-bao b { font-weight: 700; }
.hk-canh-bao .hk-cb-ic { font-size: 18px; }
.hk-canh-bao > span:nth-child(2) { flex: 1 1 260px; }
.hk-canh-bao .nut { background: #fff; color: var(--d-tre); border-color: #fff; font-weight: 700; }
.hk-thieu { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; padding: 10px 12px; border-radius: var(--bo);
  background: color-mix(in srgb, var(--d-tre) 10%, var(--mat)); border: 2px solid var(--d-tre); color: var(--chu); }
.hk-thieu b { color: var(--d-tre); }
.hk-thieu .bx-pts { margin: 0; }
.hk-thieu .bx-pts select { min-height: 32px; border-color: var(--d-tre); }
.hk-ps-them { margin: -4px 0 8px; font-size: var(--co-13); font-weight: 600; }

/* Ghi chú từng dòng hợp đồng hiện cạnh sản phẩm ở việc hậu kỳ (05/10) */
.ds-sp .sp-ghi-chu { margin-top: 2px; color: var(--cam-chu); font-size: var(--co-13); white-space: pre-line; }
.ds-sp .sp-dv { color: var(--chu-2); }
.bs-gc-cu { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; padding: 8px 10px; border-radius: var(--bo); background: var(--nen-phu); white-space: pre-line; }

/* ---- Kế hoạch tháng + concept mood board (chủ 05/10) — public/js/man-hinh/ke-hoach.js ---- */
.noi-dung.kh-rong { max-width: 1180px; }
.kh-nho { font-size: var(--co-12); color: var(--chu-3); letter-spacing: .04em; text-transform: uppercase; font-weight: 600; }
.kh-mo { color: var(--chu-3); font-size: var(--co-phu); margin: 4px 0 0; }
.kh-dem { font-size: var(--co-13); color: var(--chu-3); font-weight: 500; }
.kh-do { color: var(--d-tre); }
.kh-thang-nav { display: flex; align-items: center; gap: 2px; min-width: 0; }
.kh-thang-nav > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kh-ve-nay { margin: 0 0 10px; font-size: var(--co-14); }
.kh-trong-tam-chu { font-family: var(--font-sang); font-size: var(--co-20); line-height: 1.45; margin: 6px 0 0; white-space: pre-line; }
.kh-chi-so { display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: 10px; margin-bottom: 8px; }
.kh-chi-hep { display: none; }
.kh-o-so { background: var(--mat); border: 1px solid var(--vien); border-radius: var(--bo); padding: 12px 14px; display: flex; flex-direction: column; gap: 5px; }
.kh-o-so .nhan { font-size: var(--co-13); color: var(--chu-3); }
.kh-o-so .so { font-size: var(--co-24); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.15; }
.kh-o-so .so small { font-size: var(--co-14); color: var(--chu-3); font-weight: 500; }
.kh-o-so .phu { font-size: var(--co-12); color: var(--chu-3); }
.kh-thanh { height: 6px; background: var(--nen-phu); border-radius: var(--bo-tron); overflow: hidden; }
.kh-thanh i { display: block; height: 100%; background: var(--cam-500); border-radius: inherit; }
.kh-muc { margin: 26px 0; }
.kh-muc-dau { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.kh-muc-dau h2 { margin: 0; font-family: var(--font-sang); font-size: var(--co-20); font-weight: 600; }
.kh-trong { color: var(--chu-3); }
.kh-dai-mau { display: flex; width: 100%; }
.kh-dai-mau span { display: block; min-width: 0; }
.kh-av { width: 30px; height: 30px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 13px; font-weight: 700; flex: none; box-shadow: 0 0 0 2px var(--mat); }
.kh-av.nho { width: 22px; height: 22px; font-size: 11px; }
.kh-chong { display: inline-flex; }
.kh-chong .kh-av + .kh-av { margin-left: -6px; }
/* thẻ concept (trang tháng) */
.kh-luoi-the { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: 14px; }
.kh-the { display: flex; flex-direction: column; background: var(--mat); border-radius: var(--bo-mem); box-shadow: var(--bong-mem); overflow: hidden; text-decoration: none; color: inherit; transition: transform var(--nhanh) ease-out; }
.kh-the:hover { transform: translateY(-2px); }
.kh-the:focus-visible { outline: none; box-shadow: var(--vong-focus); }
.kh-the-anh { position: relative; height: 150px; background: var(--nen-am-2); }
.kh-the-anh img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kh-the-gd { position: absolute; left: 10px; bottom: 10px; background: rgba(255, 255, 255, .94); color: var(--chu); font-size: var(--co-12); font-weight: 600; padding: 3px 10px; border-radius: var(--bo-tron); }
.kh-the-gd.dung { background: var(--n-baoLuu); color: var(--c-baoLuu); }
.kh-the-than { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 8px; }
.kh-the-ten { font-family: var(--font-sang); font-size: var(--co-20); font-weight: 600; line-height: 1.2; }
.kh-the-mo { font-size: var(--co-13); color: var(--chu-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kh-the-chan { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: var(--co-13); color: var(--chu-2); }
/* thanh 6 giai đoạn */
.kh-buoc { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin: 16px 0 6px; }
.kh-buoc .buoc { display: flex; flex-direction: column; gap: 4px; text-align: left; background: none; border: 0; padding: 0; font: inherit; color: var(--chu-3); min-width: 0; }
.kh-buoc button.buoc { cursor: pointer; padding: 4px 0; border-radius: var(--bo-nho); }
.kh-buoc button.buoc:hover .vach { filter: brightness(.92); }
.kh-buoc .vach { height: 6px; border-radius: var(--bo-tron); background: var(--vien); }
.kh-buoc .buoc.xong .vach { background: var(--d-giao); }
.kh-buoc .buoc.dang .vach { background: var(--cam-500); }
.kh-buoc .nhan { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kh-buoc .buoc.dang .nhan { color: var(--chu); font-weight: 700; }
.kh-buoc .dem { font-size: 11.5px; }
.kh-buoc.nho { margin: 2px 0; gap: 3px; }
.kh-buoc.nho .vach { height: 4px; }
.kh-buoc.dung .vach { opacity: .45; }
/* dòng việc */
.kh-nhom-viec { background: var(--mat); border: 1px solid var(--vien); border-radius: var(--bo); padding: 4px 12px; margin-bottom: 10px; }
.kh-nhom-dau { display: flex; align-items: center; gap: 8px; padding: 8px 0; }
.kh-viec { display: flex; align-items: center; gap: 6px; padding: 4px 0; border-top: 1px solid var(--vien); }
.kh-tick { width: var(--cham); height: var(--cham); margin: -4px -4px -4px -10px; background: none; border: 0; padding: 0; display: grid; place-items: center; flex: none; cursor: pointer; color: #fff; }
.kh-tick::before { content: ''; grid-area: 1 / 1; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--vien-dam); background: var(--mat); box-sizing: border-box; transition: background var(--nhanh); }
.kh-tick .ic { grid-area: 1 / 1; width: 15px; height: 15px; z-index: 1; }
.kh-tick:hover:not(:disabled)::before { border-color: var(--d-giao); }
.kh-tick.dang::before { border-color: var(--cam-500); }
.kh-tick.cho::before { border-color: var(--d-choChon); }
.kh-tick.xong::before { background: var(--d-giao); border-color: var(--d-giao); }
.kh-tick:disabled { cursor: default; }
.kh-tick:focus-visible { outline: none; }
.kh-tick:focus-visible::before { box-shadow: var(--vong-focus); }
.kh-viec-than { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; text-align: left; background: none; border: 0; padding: 6px 0; font: inherit; color: inherit; cursor: pointer; }
.kh-viec-than .ten { font-weight: 600; font-size: var(--co-15); }
.kh-viec.da-xong .ten { text-decoration: line-through; color: var(--chu-3); font-weight: 500; }
.kh-viec-than .phu { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: var(--co-13); color: var(--chu-2); align-items: center; }
.kh-tag { display: inline-flex; align-items: center; gap: 5px; }
.kh-tag i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; border: 1px solid rgba(0, 0, 0, .08); }
.kh-tag.chung { color: var(--chu-3); }
.kh-nguoi { display: inline-flex; align-items: center; gap: 5px; }
.kh-han.tre { color: var(--d-tre); font-weight: 600; }
.kh-chua-giao { color: var(--c-chuY); }
.kh-gap { background: var(--n-tre); color: var(--c-tre); font-size: 11px; padding: 1px 6px; border-radius: 4px; font-weight: 700; vertical-align: 1px; }
.kh-tt { font-size: var(--co-12); padding: 3px 9px; border-radius: var(--bo-tron); white-space: nowrap; flex: none; font-weight: 600; }
.kh-tt.chua { background: var(--n-chuaChup); color: var(--c-chuaChup); }
.kh-tt.dang { background: var(--cam-50); color: var(--cam-800); }
.kh-tt.cho { background: var(--n-choChon); color: var(--c-choChon); }
.kh-tt.xong { background: var(--n-giao); color: var(--c-giao); }
.kh-tt.dung { background: var(--n-baoLuu); color: var(--c-baoLuu); }
.kh-loc { margin-bottom: 12px; gap: 6px; }
.kh-xep { display: inline-flex; gap: 6px; }
/* trang concept = mood board */
.kh-board { background: var(--mat); border-radius: var(--bo-mem); box-shadow: var(--bong-mem); overflow: hidden; padding-bottom: 8px; }
.kh-board > :not(.kh-dai-mau) { margin-left: 22px; margin-right: 22px; }
.kh-board-dau { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: flex-end; padding-top: 18px; }
.kh-board-ten { flex: 1 1 320px; min-width: 0; }
.kh-board-ten h1 { font-family: var(--font-sang); font-size: clamp(26px, 4vw, 38px); font-weight: 600; margin: 4px 0 2px; line-height: 1.15; }
.kh-board-chip { display: flex; flex-wrap: wrap; gap: 6px; }
.kh-board-nut { width: 100%; gap: 8px; }
.kh-chip { font-size: var(--co-13); padding: 4px 12px; border-radius: var(--bo-tron); background: var(--nen-am); border: 1px solid var(--nen-am-2); color: var(--chu-2); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.kh-chip.dung { background: var(--n-baoLuu); color: var(--c-baoLuu); }
.kh-chip.co-xoa button { border: 0; background: none; cursor: pointer; color: var(--chu-3); padding: 0 0 0 4px; font: inherit; }
.kh-board-luoi { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 20px; margin-top: 14px; }
.kh-board-phai { display: flex; flex-direction: column; gap: 14px; }
.kh-cau-chuyen { font-family: var(--font-sang); font-size: var(--co-20); font-style: italic; line-height: 1.5; margin: 0 0 14px; padding: 0 0 0 16px; border-left: 4px solid var(--cam-300); color: var(--chu); white-space: pre-line; }
.kh-masonry { columns: 3 170px; column-gap: 8px; }
.kh-masonry button { display: block; width: 100%; margin: 0 0 8px; padding: 0; border: 0; background: var(--nen-am-2); border-radius: var(--bo); overflow: hidden; cursor: zoom-in; break-inside: avoid; }
.kh-masonry img { display: block; width: 100%; height: auto; }
.kh-mb-trong { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 64px; gap: 8px; }
.kh-mb-trong span { border-radius: var(--bo); display: flex; align-items: flex-end; padding: 8px 10px; font-size: var(--co-12); border: 1px solid rgba(0, 0, 0, .05); }
.kh-mb-trong p { grid-column: 1 / -1; margin: 2px 0 0; font-size: var(--co-13); color: var(--chu-3); }
.kh-mau-hang { display: flex; flex-wrap: wrap; gap: 8px 10px; margin-top: 12px; align-items: center; }
.kh-o-mau { display: inline-flex; align-items: center; gap: 6px; font-size: var(--co-12); color: var(--chu-2); font-family: ui-monospace, Menlo, monospace; }
.kh-o-mau i { width: 22px; height: 22px; border-radius: 6px; display: inline-block; border: 1px solid rgba(0, 0, 0, .08); }
.kh-khoi { background: var(--nen-am); border-radius: var(--bo-lon); padding: 14px 16px; }
.kh-khoi.trong { background: var(--nen); border: 1px dashed var(--vien-dam); }
.kh-khoi-dau { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.kh-khoi-dau h3 { margin: 0; font-size: var(--co-15); font-weight: 700; }
.kh-khoi .kh-nguoi { font-size: var(--co-13); color: var(--chu-2); }
.kh-chu { margin: 0; white-space: pre-line; line-height: 1.55; }
.kh-shot { margin: 0; padding-left: 20px; line-height: 1.6; }
.kh-anh-nho { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 6px; margin-top: 10px; }
.kh-anh-nho button { padding: 0; border: 0; border-radius: 8px; overflow: hidden; aspect-ratio: 1; cursor: zoom-in; background: var(--nen-am-2); }
.kh-anh-nho img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kh-luoi-khoi { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 12px; margin-top: 20px; }
.kh-khoi.rong { grid-column: 1 / -1; }
.kh-doi { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.kh-doi li { display: flex; align-items: center; gap: 10px; }
.kh-doi small { display: block; font-size: var(--co-12); color: var(--chu-3); }
.kh-kq { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.kh-kq > div { background: var(--mat); border-radius: var(--bo); padding: 8px 10px; }
.kh-kq > div > small { display: block; font-size: var(--co-12); color: var(--chu-3); }
.kh-kq b { font-size: var(--co-20); font-variant-numeric: tabular-nums; }
.kh-kq b small { font-size: var(--co-13); color: var(--chu-3); font-weight: 500; }
.kh-album { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }
.kh-album a { display: flex; gap: 10px; align-items: center; text-decoration: none; color: inherit; background: var(--mat); border-radius: var(--bo); padding: 6px; }
.kh-album img { width: 48px; height: 48px; object-fit: cover; border-radius: 6px; flex: none; }
.kh-album small { display: block; color: var(--chu-3); font-size: var(--co-12); }
.kh-gd { border: 1px solid var(--vien); border-radius: var(--bo); margin-bottom: 8px; padding: 0 12px; background: var(--mat); }
.kh-gd.dang { border-color: var(--cam-300); box-shadow: 0 0 0 3px var(--cam-50); }
.kh-gd-dau { width: 100%; display: flex; align-items: center; gap: 10px; background: none; border: 0; padding: 10px 0; font: inherit; color: inherit; cursor: pointer; text-align: left; min-height: var(--cham); }
.kh-gd-dau .so { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--nen-phu); font-size: var(--co-13); font-weight: 700; flex: none; }
.kh-gd.xong .kh-gd-dau .so { background: var(--d-giao); color: #fff; }
.kh-gd.dang .kh-gd-dau .so { background: var(--cam-500); color: #fff; }
.kh-gd-dau .so .ic { width: 15px; height: 15px; }
.kh-gd-trong { padding: 0 0 12px; }
.kh-lat { transform: rotate(180deg); }
/* hộp sửa / chọn */
.kh-form-nhom { border: 1px solid var(--vien); border-radius: var(--bo); padding: 0 14px; }
.kh-form-nhom > summary { cursor: pointer; font-weight: 700; padding: 12px 0; min-height: var(--cham); box-sizing: border-box; }
.kh-form-nhom > .cot { padding-bottom: 14px; }
.kh-tieu-nho { margin: 6px 0 0; font-size: var(--co-14); }
.kh-o-tich { gap: 8px; font-size: var(--co-14); align-items: flex-start; }
.kh-o-tich input { margin-top: 3px; width: 18px; height: 18px; flex: none; }
.kh-hang-nut { margin-top: 6px; flex-wrap: wrap; }
.kh-chon-nguoi { display: flex; flex-wrap: wrap; gap: 6px; }
.kh-viec-xem { display: flex; flex-direction: column; gap: 4px; background: var(--nen-am); border-radius: var(--bo); padding: 10px 12px; }
.kh-viec-xem span { font-size: var(--co-13); color: var(--chu-2); }
.kh-goi-y-album { display: flex; flex-direction: column; border: 1px solid var(--vien); border-radius: var(--bo); overflow: hidden; }
.kh-goi-y-album button { display: flex; gap: 10px; align-items: center; padding: 6px 10px; border: 0; border-top: 1px solid var(--vien); background: var(--mat); font: inherit; text-align: left; cursor: pointer; min-height: var(--cham); }
.kh-goi-y-album button:first-child { border-top: 0; }
.kh-goi-y-album button:hover { background: var(--cam-50); }
.kh-goi-y-album img, .kh-goi-y-album .trong-anh { width: 40px; height: 40px; border-radius: 6px; object-fit: cover; background: var(--nen-phu); flex: none; }
.kh-goi-y-album small { display: block; color: var(--chu-3); font-size: var(--co-12); }
.kh-ma-lich { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 10px; }
.kh-ma-lich .nhan { font-size: var(--co-13); color: var(--chu-3); font-weight: 600; }
.kh-cua-toi h2 { margin: 0; font-size: var(--co-16); }
.kh-cua-toi > .hang { margin-bottom: 4px; }
@media (max-width: 900px) {
  .kh-board-luoi { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .kh-board > :not(.kh-dai-mau) { margin-left: 14px; margin-right: 14px; }
  .kh-buoc .dem { display: none; }
  .kh-buoc .nhan { font-size: 11px; }
  .kh-tt { display: none; }
  .kh-masonry { columns: 2; }
  .kh-xep { width: 100%; }
  .kh-an-hep { display: none; }
  .kh-chi-hep { display: inline; }
  .kh-o-so .so { font-size: var(--co-20); }
}

/* Khách tiềm năng (chủ 08/10): thanh việc DÍNH dưới thanh tab (đầu trang: đủ nút theo tầng; kéo xuống: một dòng vuốt ngang) +
   danh sách khách dạng thư viện ~3 thẻ / hàng */
.tn-moc { height: 1px; }
.tn-dinh { position: sticky; top: 113px; z-index: 4; margin: 0 calc(-1 * var(--k-4)) 10px; padding: 8px var(--k-4) 10px;
  background: var(--nen); border-bottom: 1px solid var(--vien); }
.tn-dinh.dang-dinh { box-shadow: 0 6px 12px -8px rgba(0, 0, 0, .18); padding-top: 6px; padding-bottom: 6px; }
.tn-dinh-dau { display: flex; align-items: center; gap: 10px; font-size: var(--co-13); color: var(--chu-2); margin-bottom: 6px; }
.tn-dinh-dau b { color: var(--chu); }
.tn-dinh-muc { flex: 0 1 160px; height: 6px; border-radius: 3px; background: var(--nen-phu); overflow: hidden; }
.tn-dinh-muc i { display: block; height: 100%; background: var(--cam-600); }
.tn-dinh-chip { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tn-dinh.dang-dinh .tn-dinh-chip { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.tn-dinh.dang-dinh .tn-dinh-chip::-webkit-scrollbar { display: none; }
.tn-dinh.dang-dinh .tn-dinh-dau { display: none; } /* đang dính: chỉ còn một dòng nút việc */
.tn-dinh-tang { flex: none; font-size: var(--co-12); font-weight: 700; color: var(--chu-3); text-transform: uppercase; letter-spacing: .02em; margin: 0 2px 0 6px; }
.tn-dinh-tang:first-child { margin-left: 0; }
.tn-dinh-tang.tang-lich { color: var(--d-tre); }
.tn-chip-viec { flex: none; display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 10px; border: 1px solid var(--vien);
  border-radius: var(--bo-tron); background: var(--mat); color: var(--chu); font: inherit; font-size: var(--co-13); cursor: pointer; white-space: nowrap; }
.tn-chip-viec .ic { width: 15px; height: 15px; color: var(--chu-3); }
.tn-chip-viec b { min-width: 20px; padding: 0 6px; border-radius: 10px; background: var(--nen-phu); font-size: var(--co-12); text-align: center; }
.tn-chip-viec.tang-lich b { background: var(--n-tre); color: var(--c-tre); }
.tn-chip-viec:hover { border-color: var(--chu-3); }
.tn-chip-viec.chon { background: var(--chu); color: var(--mat); border-color: var(--chu); }
.tn-chip-viec.chon .ic { color: var(--mat); }
.tn-chip-viec.chon b { background: rgba(255, 255, 255, .22); color: var(--mat); }
.tn-dau-ds { scroll-margin-top: 170px; }
.ns-ds.tn-luoi { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; align-items: start; }
.ns-ds.tn-luoi > li { padding: 10px 12px; min-width: 0; }
.tn-luoi .ns-ds-dau { gap: 8px; }
.tn-luoi .ns-ds-chu b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tn-luoi .ns-ds-chu small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tn-luoi .tn-chips { gap: 4px; margin-top: 6px; }
.tn-luoi .tn-agent { padding: 6px 8px; font-size: var(--co-13); }
.tn-luoi .tn-agent-noi { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tn-luoi .tn-tom-tat { font-size: var(--co-13); -webkit-line-clamp: 3; }
.tn-luoi .ns-nut { gap: 6px; }
.tn-luoi .ns-nut .nut.nho { padding: 0 10px; }
/* Hậu kỳ › mục "Dò ảnh in về & báo khách" (9 + 10, chủ 08/10): nhắc quy trình 2 bước */
.hk-quy-trinh { display: flex; flex-direction: column; gap: 4px; margin: 0 0 10px; padding: 10px 14px; border-radius: var(--bo);
  background: var(--n-in, var(--nen-phu)); border-left: 4px solid var(--d-in, var(--cam-500)); font-size: var(--co-14); }

/* 🎬 Video khách (chủ 08/10 — public/js/man-hinh/video.js) */
.vd-the .vd-dau { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.vd-gio { font-size: var(--co-14); color: var(--chu-2); }
.vd-ten { font-weight: 700; font-size: var(--co-16); margin: 6px 0 2px; }
.vd-ten a { color: inherit; text-decoration: none; }
.vd-the.vd-tre { border-color: var(--d-tre); box-shadow: inset 3px 0 0 var(--d-tre); }
.vd-links { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--vien); }
.vd-link { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; min-height: 32px; }
.vd-nhan { font-weight: 600; font-size: var(--co-14); }
.vd-ghi-chu { margin-top: 8px; padding: 8px 10px; border-radius: var(--bo-nho); background: var(--n-chuY); color: var(--c-chuY); font-size: var(--co-13); white-space: pre-line; }
.vd-nut { margin-top: 10px; gap: 6px; }
.vd-khoi .vd-the { border: 0; padding: 0; margin: 0; box-shadow: none; }
.vd-bang-cuon { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.vd-bang { width: 100%; border-collapse: collapse; font-size: var(--co-14); }
.vd-bang th, .vd-bang td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--vien); white-space: nowrap; }
.vd-bang th { color: var(--chu-3); font-weight: 600; font-size: var(--co-13); }
.vd-hang-ng { cursor: pointer; }
.vd-hang-ca td { font-size: var(--co-13); color: var(--chu-2); background: var(--cam-50); }
.vd-nhac { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; color: inherit; text-decoration: none; }
.vd-nhac .ic { width: 18px; height: 18px; color: var(--cam-700); }

/* ------------------------------------------------ Lịch tháng: chi tiết ngày bên phải lịch (chủ 08/10) */
.noi-dung.rong-lich:has(.lt-bo-cuc) { max-width: 1500px; }
.lt-bo-cuc { container-type: inline-size; }
.lt-bo-cuc-luoi > .lt-trai, .lt-bo-cuc-luoi > .lt-ben { min-width: 0; }
.lt-ben { scroll-margin-top: 64px; }
.lt-ngay-dau { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.lt-ngay-dau h3 { flex: 1; margin: 0; text-align: center; font-size: var(--co-16); display: flex; flex-direction: column; align-items: center; gap: 2px; }
.lt-ngay-dau .nut-vuong.nho { width: 34px; height: 34px; min-height: 34px; padding: 0; }
.lt-mo-ngay { margin-bottom: 4px; }
@container (min-width: 900px) {
  /* khung nội dung đủ rộng → 2 cột: lịch | chi tiết ngày (đứng yên khi cuộn, dài thì tự cuộn bên trong) */
  .lt-bo-cuc-luoi { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 12px; align-items: start; }
  .lt-ben { position: sticky; top: 64px; max-height: calc(100vh - 80px); overflow-y: auto; }
  .lt-ben .lt-ngay { margin-top: 0; }
  /* khung hẹp 340px: giờ | tên + ekip; nhãn trạng thái xuống dòng dưới */
  .lt-ben .lt-hang-ca { flex-wrap: wrap; gap: 4px 10px; }
  .lt-ben .lt-hang-ca .than { flex: 1 1 200px; }
  .lt-ben .lt-hang-ca .huy { flex: 1 0 100%; justify-content: flex-start; padding-left: 58px; }
  .lt-ben .lt-hang-ca .huy:empty { display: none; }
}

/* ------------------------------------------------ Hậu kỳ: việc gấp · thanh quy trình · cột thợ (chủ 11/10) */
.hk-loc { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-bottom: 10px; align-items: start; }
@media (min-width: 1000px) { .hk-loc { grid-template-columns: minmax(0, 1fr) 250px; } }
.hk-loc-trai { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.hk-gap { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.hk-gap-ten { font-size: var(--co-12); color: var(--chu-3); font-weight: 600; margin-right: 2px; }
.hk-gap-o { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: var(--bo); cursor: pointer; font: inherit; font-size: var(--co-13);
  border: 1px solid color-mix(in srgb, var(--d-tre) 30%, transparent); background: color-mix(in srgb, var(--d-tre) 8%, var(--mat)); color: var(--d-tre); }
.hk-gap-o b { font-size: var(--co-18); line-height: 1.1; font-variant-numeric: tabular-nums; }
.hk-gap-o .ic { width: 16px; height: 16px; }
.hk-gap-o:hover { border-color: var(--d-tre); }
.hk-gap-o.chon { background: var(--d-tre); border-color: var(--d-tre); color: #fff; }
.qt { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; -webkit-overflow-scrolling: touch; }
.qt::-webkit-scrollbar { display: none; }
.qt-chang { flex: 1 0 auto; min-width: max-content; display: flex; flex-direction: column; gap: 4px; } /* không co nhỏ hơn các ô bên trong → màn hẹp thì vuốt ngang */
.qt-ten { font-size: var(--co-12); color: var(--chu-3); font-weight: 600; padding-left: 2px; white-space: nowrap; }
.qt-hang { display: flex; gap: 4px; }
.qt-o { flex: 1 1 0; min-width: 86px; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 4px 7px; cursor: pointer; font: inherit; color: var(--chu);
  border-radius: var(--bo); border: 1px solid var(--vien); border-top: 3px solid var(--d, var(--vien-dam)); background: var(--mat); }
.qt-o b { font-size: var(--co-20); line-height: 1.15; font-variant-numeric: tabular-nums; }
.qt-o span { font-size: var(--co-12); color: var(--chu-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.qt-o em { font-style: normal; font-size: var(--co-12); color: var(--d-tre); font-weight: 600; }
.qt-o:hover { border-color: var(--d, var(--chu-3)); }
.qt-o.chon { background: var(--n, var(--cam-50)); border-color: var(--d, var(--cam-700)); box-shadow: inset 0 0 0 1px var(--d, var(--cam-700)); }
.qt-o.chon span { color: var(--c, var(--chu)); font-weight: 600; }
.qt-o.rong b { color: var(--chu-3); font-weight: 500; }
.ct { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 8px; border: 1px solid var(--vien); border-radius: var(--bo); background: var(--mat); }
.ct-dau { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 0 6px 4px; font-size: var(--co-13); }
.ct-dau span { font-size: var(--co-12); color: var(--chu-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-dau .ic { width: 14px; height: 14px; vertical-align: -2px; }
.ct-hang { all: unset; box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 8px; align-items: center; padding: 5px 6px; border-radius: var(--bo-nho); cursor: pointer; font-size: var(--co-13); }
.ct-hang:hover, .ct-hang:focus-visible { background: var(--nen-phu); }
.ct-hang.chon { background: var(--cam-50); box-shadow: inset 0 0 0 1px var(--cam-700); }
.ct-ten { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-hang em { font-style: normal; font-size: var(--co-12); color: var(--d-tre); font-weight: 600; margin-left: 6px; }
.ct-hang b { font-variant-numeric: tabular-nums; }
.ct-hang i { grid-column: 1 / 3; height: 4px; min-width: 2px; border-radius: 2px; background: var(--vien-dam); }
.ct-hang.chon i { background: var(--cam-700); }
.ct-hang.do .ct-ten, .ct-hang.do b { color: var(--d-tre); font-weight: 600; }
.ct-hang.do i { background: var(--d-tre); }
.ct-hang.rong { color: var(--chu-3); }
.dang-loc-bar.gon { background: none; padding: 0 2px; margin-bottom: 8px; font-size: var(--co-13); }

/* Minh Thư 13/10 — guideline Ivory Brown: tiêu đề màn đăng nhập dùng chữ có chân như logo */
.dang-nhap-khung .dau .man { font-family: var(--font-sang); font-weight: 600; font-size: var(--co-30); letter-spacing: .03em; color: var(--cam-800); }
.dang-nhap-khung .dau .phu-de { letter-spacing: .02em; }

/* ================================================================ bản mới 27/10/2026 — màn lịch & ekip, hợp đồng theo đợt chốt, hậu kỳ 7 bước, lương đối chiếu */

/* hàng "nhãn: giá trị" trong thẻ chi tiết */
.dong-tt { display: flex; gap: 12px; align-items: baseline; font-size: var(--co-14); line-height: 1.5; }
.dong-tt .nhan-tt { flex: 0 0 120px; color: var(--chu-3); font-size: var(--co-13); }
.dong-tt .gt-tt { flex: 1; min-width: 0; overflow-wrap: anywhere; white-space: pre-line; }
.dong-tt .gt-tt.tien { flex: 0 0 auto; margin-left: auto; text-align: right; }

/* danh sách cảnh báo nhỏ dưới một buổi */
.cb-ds { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.cb-ds .huy-hieu { font-size: var(--co-12); font-weight: 500; }

/* chip ekip theo trạng thái phân công */
.chip-ekip-ds { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.chip-ekip-ds .chip-ekip { font-size: var(--co-12); padding: 2px 8px; border-radius: var(--bo-tron); border: 1px solid var(--vien); background: var(--nen-phu); color: var(--chu-2); white-space: nowrap; }
.chip-ekip.tt-moi { background: var(--n-chuY); border-color: var(--v-chuY); color: var(--c-chuY); }
.chip-ekip.tt-nhan { background: var(--n-daDen); border-color: var(--v-daDen); color: var(--c-daDen); }
.chip-ekip.tt-lam { background: var(--n-giao); border-color: var(--v-giao); color: var(--c-giao); }

/* cả hàng danh sách là một link */
a.lien-ket-the { color: inherit; text-decoration: none; transition: background var(--nhanh); }
a.lien-ket-the:hover { background: var(--nen-am); }
a.the.lien-ket-the { display: flex; gap: 12px; align-items: center; }
.ds-muc.lien-ket-the { margin: 0 calc(-1 * var(--k-2)); padding-left: var(--k-2); padding-right: var(--k-2); border-radius: var(--bo-nho); }
.ds-muc .gio-to { font-size: var(--co-16); font-weight: 700; min-width: 92px; flex: none; }
@media (max-width: 479px) { .ds-muc:has(.gio-to) { flex-wrap: wrap; row-gap: 2px; } .ds-muc .gio-to { flex: 0 0 100%; min-width: 0; font-size: var(--co-14); } }

/* ô đếm việc cần xử lý (trang chủ) */
.luoi-viec-dem { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.viec-dem { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: var(--bo); background: var(--nen-phu); color: var(--chu-2); text-decoration: none; font-size: var(--co-13); line-height: 1.35; }
.viec-dem b { font-size: var(--co-24); color: var(--chu); line-height: 1.1; }
.viec-dem:hover { background: var(--cam-100); }
.viec-dem.nguy { background: var(--n-tre); color: var(--c-tre); }
.viec-dem.nguy b { color: var(--c-tre); }

/* thanh chọn ngày / tháng */
.thanh-ngay { justify-content: center; gap: 8px; flex-wrap: wrap; }
.thanh-ngay input[type="date"] { max-width: 170px; }

/* màu chữ */
.chu-do { color: var(--c-tre); }
.chu-xanh { color: var(--c-giao); }
.chu-cam { color: var(--cam-chu); }
.the.noi-bat { border-color: var(--cam-300); background: var(--nen-am); }
.the.vien-do { border-color: var(--v-tre); }
.mui-mo, tr.mui-mo td { opacity: .55; }

/* hàng chỉ số tiền */
.chi-so-hang { gap: 12px 24px; }
.chi-so-hang > div { min-width: 110px; }
.chi-so-hang b { font-size: var(--co-18); }

/* tìm gói / khách: danh sách gợi ý */
.o-tim-goi { position: relative; }
.goi-y-ds { display: flex; flex-direction: column; border: 1px solid var(--vien-dam); border-radius: var(--bo); background: var(--mat); max-height: 320px; overflow-y: auto; margin-top: 4px; box-shadow: var(--bong-mem); }
.goi-y-muc { display: flex; justify-content: space-between; gap: 12px; align-items: center; text-align: left; padding: 10px 12px; border: 0; border-bottom: 1px solid var(--vien); background: transparent; font: inherit; color: var(--chu); cursor: pointer; min-height: var(--cham); }
.goi-y-muc:last-child { border-bottom: 0; }
.goi-y-muc:hover, .goi-y-muc:focus-visible { background: var(--cam-50); outline: none; }
.dong-sp { padding: var(--k-3); background: var(--nen-am); }

/* màn hẹp (form dài) */
.noi-dung.hep { max-width: 640px; }
.nut.lon { min-height: 52px; font-size: var(--co-16); }

/* bảng số liệu */
.bang-cuon { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 calc(-1 * var(--k-2)); }
table.bang { width: 100%; border-collapse: collapse; font-size: var(--co-14); }
table.bang th { text-align: left; font-weight: 600; color: var(--chu-3); font-size: var(--co-13); padding: 6px 8px; border-bottom: 1px solid var(--vien-dam); white-space: nowrap; }
table.bang td { padding: 8px; border-bottom: 1px solid var(--vien); vertical-align: top; }
table.bang .so { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.bang tr.dang-chon td { background: var(--cam-50); }

/* lương */
.o-tick { width: 22px; height: 22px; flex: none; margin-top: 2px; accent-color: var(--cam-nut); }
pre.chi-tiet-luong { white-space: pre-wrap; font: inherit; font-size: var(--co-13); color: var(--chu-2); background: var(--nen-phu); border-radius: var(--bo-nho); padding: 8px 10px; margin: 8px 0 0; }
details > summary { cursor: pointer; padding: 6px 0; }

/* báo cáo: thanh ngang */
.luoi-bc { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.luoi-bc h4, .the h4 { margin: 12px 0 8px; font-size: var(--co-14); color: var(--chu-2); }
.thanh-bc { font-size: var(--co-14); }
.thanh-nen { height: 8px; border-radius: var(--bo-tron); background: var(--nen-phu); overflow: hidden; margin-top: 3px; }
.thanh-day { height: 100%; border-radius: var(--bo-tron); background: var(--cam-400); }

@media (max-width: 479px) { .dong-tt .nhan-tt { flex-basis: 96px; } }

/* ---------------------------------------------------------------- bổ sung 27/10 (chiều): thông báo, chip gói, check-in */
.so-dem { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--bo-tron); background: var(--d-tre); color: #fff; font-size: 12px; font-weight: 700; display: inline-grid; place-content: center; }
.bieu-tuong { position: relative; }
.cham-do { position: absolute; top: -2px; right: -4px; width: 9px; height: 9px; border-radius: 50%; background: var(--d-tre); border: 2px solid var(--mat); }
.cham-moi { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--d-tre); margin-right: 6px; vertical-align: middle; }
.ds-muc.tb-moi { background: var(--nen-am); }
.nut-xoa-chip { border: 0; background: transparent; color: inherit; cursor: pointer; padding: 0 0 0 4px; font: inherit; }
label.ds-muc { cursor: pointer; }

/* ---------------------------------------------------------------- trang phục (lưới đồ có hình), chốt két, kế hoạch tháng */
.luoi-tp { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.luoi-tp.lon { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.the-tp { display: flex; flex-direction: column; text-align: left; padding: 0; overflow: hidden; border: 1px solid var(--vien); border-radius: var(--bo); background: var(--mat); font: inherit; color: inherit; cursor: pointer; }
.the-tp:disabled { cursor: not-allowed; }
.the-tp.dang-chon { border: 2px solid var(--cam-nut); box-shadow: var(--vong-focus); }
.the-tp.tp-ban { opacity: .55; }
.the-tp .anh-nho, .the-tp .anh-tp { width: 100%; height: 170px; object-fit: cover; border-radius: 0; margin: 0; display: block; }
.luoi-tp.lon .the-tp .anh-nho { height: 220px; }
.anh-tp-trong { display: grid; place-content: center; background: var(--nen-phu); color: var(--chu-3); font-weight: 700; }
.tp-than { padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; }
.tp-ma { font-size: var(--co-16); letter-spacing: .02em; }
.tp-nho { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: var(--co-12); }
.anh-tp-nho { width: 56px; height: 72px; object-fit: cover; border-radius: var(--bo-nho); border: 1px solid var(--vien); }
.thanh-dat { position: sticky; bottom: calc(var(--cao-thanh-duoi, 0px) + 8px); display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 12px; padding: 10px 14px; border-radius: var(--bo); background: var(--mat); border: 1px solid var(--cam-300); box-shadow: var(--bong-noi); }

.luoi-to { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.o-to { display: flex; align-items: center; gap: 8px; font-size: var(--co-14); }
.o-to span { min-width: 74px; color: var(--chu-2); }

.dai-mau { display: flex; width: 100%; }
.dai-mau span { flex: 1; }
.cham-mau { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; vertical-align: middle; border: 1px solid rgba(0, 0, 0, .1); }
.cham-mau.lon { width: 20px; height: 20px; margin: 0; }
.thanh-gd { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.thanh-gd button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; border: 1px solid var(--vien); border-radius: var(--bo-nho); background: var(--nen-phu); color: var(--chu-3); font: inherit; cursor: pointer; }
.thanh-gd button:disabled { cursor: default; }
.thanh-gd button span { font-weight: 700; }
.thanh-gd button small { font-size: 11px; line-height: 1.2; text-align: center; }
.thanh-gd button.da { background: var(--n-giao); color: var(--c-giao); border-color: var(--v-giao); }
.thanh-gd button.dang { background: var(--cam-nut); color: #fff; border-color: var(--cam-nut); }
@media (max-width: 479px) { .thanh-gd button small { display: none; } }
.thanh-gd-nho { display: flex; gap: 3px; }
.thanh-gd-nho span { flex: 1; height: 5px; border-radius: 3px; background: var(--nen-phu); }
.thanh-gd-nho span.da { background: var(--d-giao); }
.thanh-gd-nho span.dang { background: var(--cam-nut); }
.luoi-chi-so { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.the.chi-so { margin: 0; }
.lon-so { font-size: var(--co-20); }
.luoi-concept { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.the.the-concept { padding: 0; overflow: hidden; margin: 0; display: flex; flex-direction: column; align-items: stretch; gap: 0; }
.bia-concept { width: 100%; height: 130px; object-fit: cover; display: block; }
blockquote.cau-chuyen { margin: 0 0 12px; padding: 14px 18px; border-left: 4px solid var(--cam-400); background: var(--nen-am); font-family: var(--font-sang); font-size: var(--co-18); white-space: pre-line; border-radius: 0 var(--bo) var(--bo) 0; }
.luoi-concept-chi { align-items: start; }
.luoi-concept-chi > .the { margin: 0; }
.dong-viec { cursor: pointer; }

/* ===== Công tắc Máy tính / Điện thoại + khung xem dạng điện thoại (anh Tùng 28/10) */
.che-do-xem .cong-tac.thiet-bi { margin-left: auto; }
.khung-dt-nen { position: fixed; inset: 0; z-index: 60; background: rgba(46, 36, 30, .55); display: flex; flex-direction: column;
  align-items: center; gap: 10px; padding: 12px 16px 16px; overflow: auto; }
.khung-dt-thanh { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; background: var(--card);
  border-radius: 999px; padding: 6px 8px 6px 16px; box-shadow: 0 6px 20px rgba(0, 0, 0, .18); }
.khung-dt-thanh .nho-xiu { color: var(--ink-2); }
.khung-dt { width: 390px; max-width: 100%; border: 10px solid #2b2420; border-radius: 34px; overflow: hidden; background: var(--card);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .35); flex: none; }
.khung-dt iframe { width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 599px) { .che-do-xem .cong-tac.thiet-bi { display: none; } }

/* ===== Xếp ekip nhiều vai trò một lượt (anh Tùng 28/10) */
.xep-ekip { display: grid; gap: 6px; }
.xep-ekip-dong { display: grid; grid-template-columns: 96px minmax(0, 1fr) 40px; gap: 8px; align-items: start; padding: 8px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
.xep-ekip-dong.co-nguoi { border-color: var(--clay); box-shadow: inset 3px 0 0 var(--clay); }
.xep-ekip-vt { font-weight: 600; font-size: 14px; padding-top: 10px; }
.xep-ekip-chon { display: grid; gap: 6px; min-width: 0; }
.xep-ekip-chon .o-nhap { min-width: 0; width: 100%; box-sizing: border-box; }
.xep-ekip-nut .nut { min-width: 40px; padding: 0; }
@media (max-width: 420px) { .xep-ekip-dong { grid-template-columns: 1fr 40px; } .xep-ekip-vt { grid-column: 1 / -1; padding-top: 0; } }

/* ===== Soạn đồ (anh Tùng 28/10 — docs/KE-HOACH-SOAN-DO.md) */
.soan-dau { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; align-items: flex-start; margin-bottom: 12px; }
.soan-dau > :first-child { flex: 1 1 220px; min-width: 0; }
/* máy tính: các nhóm đồ xếp thành cột (điện thoại tự về 1 cột) */
.cac-nhom-soan { columns: 2 340px; column-gap: 16px; }
.nhom-soan { break-inside: avoid; }
.nhom-soan h3 { font-size: 15px; margin: 16px 0 8px; display: flex; align-items: center; gap: 8px; }
.luoi-mon { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.the-mon { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 12px; display: grid; gap: 8px; align-content: start; }
.mon-dau { display: flex; gap: 12px; align-items: flex-start; }
.anh-mon { width: 76px; height: 76px; border-radius: 10px; object-fit: cover; flex: none; display: grid; place-items: center; font-size: 28px; background: var(--nen-phu); }
.mon-than { display: grid; gap: 3px; min-width: 0; }
.mon-than > b { font-size: 16px; }
.viec-mon { display: grid; gap: 4px; padding: 8px 10px; border-radius: 10px; background: var(--honey-soft, #FBF3E2); }
.viec-mon label, .viec-sua label { gap: 8px; align-items: center; font-size: 14px; cursor: pointer; }
.gach { text-decoration: line-through; color: var(--ink-2); }
.mon-nut { gap: 8px; border-top: 1px solid var(--line); padding-top: 8px; }
.mon-nut .nguy { margin-left: auto; }
.soan-chan { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.luoi-anh-xn { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.luoi-anh-xn img { width: 100%; border-radius: 10px; }
.chon-pk { gap: 8px; }

/* ---------------------------------------------------------------- Lịch: lưới tuần (anh Tùng 28/10) */
.noi-dung.rong-tuan { max-width: 1500px; } /* đủ 7 cột tới Chủ nhật, không phải kéo ngang */
.lt-khoang { font-size: var(--co-14); white-space: nowrap; }
.lt-cuon { overflow-x: auto; margin: 0 -4px; padding: 0 4px 8px; }
.luoi-tuan { min-width: 700px; background: var(--mat); border: 1px solid var(--vien); border-radius: 14px; overflow: hidden; }
.lt-hang-dau, .lt-than { display: grid; grid-template-columns: 54px repeat(7, minmax(0, 1fr)); }
.lt-hang-dau { border-bottom: 1px solid var(--vien); position: sticky; top: 0; background: var(--mat); z-index: 2; }
.lt-goc { padding: 10px 6px; }
.lt-ngay { padding: 8px 8px 6px; border-left: 1px solid var(--vien); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lt-ngay b { font-size: 20px; font-weight: 600; line-height: 1.2; }
.lt-ngay.hom-nay b, .lt-ngay.hom-nay > span:first-child { color: var(--cam-700); }
.lt-off { font-size: 11.5px; padding: 1px 6px; border-radius: 6px; background: var(--nen-phu); border: 1px solid var(--vien); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lt-off.cho { border-style: dashed; color: var(--chu-3); }
.lt-than { position: relative; background-image: repeating-linear-gradient(to bottom, var(--vien) 0 1px, transparent 1px 46px); background-position: 54px 0; }
.lt-cot-gio { position: relative; }
.lt-cot-gio span { position: absolute; right: 6px; transform: translateY(-50%); font-size: 11.5px; color: var(--chu-3); }
.lt-cot-gio span:first-child { transform: none; }
.lt-cot { position: relative; border-left: 1px solid var(--vien); min-width: 0; }
.lt-cot.hom-nay { background: color-mix(in srgb, var(--cam-50) 55%, transparent); }
.lt-ca { position: absolute; display: flex; flex-direction: column; gap: 1px; overflow: hidden; padding: 3px 6px; border-radius: 7px; font-size: 11.5px; line-height: 1.3;
  text-decoration: none; color: var(--vt-photo-c); background: var(--vt-photo-n); border-left: 3px solid currentColor; z-index: 1; }
.lt-ca:hover { z-index: 3; box-shadow: 0 4px 14px rgba(0, 0, 0, .14); height: auto !important; min-height: 40px; }
.lt-ca b { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--chu, inherit); }
.lt-ca span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lt-ca .lt-loai { font-weight: 600; font-size: 11px; }
.lt-ca .lt-ekip { opacity: .85; }
.lt-ca .lt-ekip.cho { font-style: italic; }
.lt-ca.nhom-makeup { color: var(--vt-makeup-c); background: var(--vt-makeup-n); }
.lt-ca.nhom-vay { color: var(--vt-stylist-c); background: var(--vt-stylist-n); }
.lt-ca.nhom-tu-van { color: var(--vt-support-c); background: var(--vt-support-n); }
.lt-ca.huy { opacity: .45; text-decoration: line-through; }
.lt-ca.co-canh-bao { outline: 1px dashed var(--do); outline-offset: -1px; }
.lt-bay-gio { position: absolute; left: 0; right: 0; height: 2px; background: var(--do); z-index: 2; pointer-events: none; }
.lt-bay-gio::before { content: ''; position: absolute; left: -4px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--do); }

/* ---------------------------------------------------------------- Trang chủ Chủ: mục tiêu tháng · KPI sale · cần chú ý · lịch (anh Tùng 28/10) */
.tc-muc-tieu { background: linear-gradient(180deg, var(--cam-50), var(--mat) 70%); }
.tc-so { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; margin: 4px 0 8px; }
.tc-lon { font-size: 36px; line-height: 1.05; font-weight: 600; letter-spacing: -.5px; }
.tc-thanh { position: relative; height: 12px; border-radius: 99px; background: var(--nen-phu); overflow: visible; }
.tc-thanh.nho { height: 8px; }
.tc-thanh-dat { position: absolute; inset: 0 auto 0 0; border-radius: 99px; background: var(--cam-500); }
.tc-thanh-dat.dung { background: var(--xanh, #3f8f5a); }
.tc-thanh-dat.cham { background: var(--do); }
.tc-moc { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--chu); border-radius: 2px; }
.tc-dong-phu { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 8px; }
.tc-phu { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: var(--co-13); color: var(--chu-2); }
.tc-sale { display: grid; gap: 8px; margin-top: 14px; padding: 12px; border-radius: 12px; background: var(--mat); border: 1px solid var(--vien); }
.tc-sale-dong { display: grid; grid-template-columns: minmax(90px, 140px) minmax(80px, 1fr) auto auto auto; gap: 10px; align-items: center; font-size: var(--co-13); }
.tc-sale-ten { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-sale-so { white-space: nowrap; }
@media (max-width: 640px) {
  .tc-lon { font-size: 30px; }
  .tc-sale-dong { grid-template-columns: 1fr auto auto; }
  .tc-sale-dong .tc-thanh { grid-column: 1 / -1; order: 5; }
  .tc-sale-nhip { display: none; }
}
.tc-hai-cot { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.tc-hai-cot > .the { margin: 0; }
@media (max-width: 900px) { .tc-hai-cot { grid-template-columns: 1fr; } }
.tc-chu-y-muc { align-items: center; }
.tc-chu-y-so { font-size: 24px; min-width: 40px; text-align: center; font-weight: 500; }
.chip-ekip.thieu { background: var(--n-tre); border-color: var(--v-tre); color: var(--c-tre); }
.tc-thanh-dat.xam { background: var(--chu-3); opacity: .45; }
.tc-nhom-nhan { font-weight: 600; text-transform: uppercase; letter-spacing: .4px; }
.tc-mang { background: var(--cam-50); }

/* Mã QR chuyển khoản trong hộp Thu tiền (anh Tùng 28/10) */
.khung-qr { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; padding: 12px; margin-bottom: var(--k-3); border: 1px solid var(--vien); border-radius: 14px; background: var(--nen-phu); }
.khung-qr img { width: 180px; height: 180px; border-radius: 10px; background: #fff; flex: none; }
.khung-qr-tt { display: grid; gap: 4px; font-size: var(--co-14); flex: 1 1 200px; min-width: 0; }

/* ---------------------------------------------------------------- Khách tiềm năng: thống kê (anh Tùng 28/10 — giống Nắng) */
.tk-luoi { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin-top: 8px; }
.tk-o { border: 1px solid var(--vien); border-radius: 12px; padding: 10px 12px; display: grid; gap: 4px; align-content: start; background: var(--mat); }
.tk-so { font-size: 28px; line-height: 1.1; font-weight: 600; }
.tk-nguon { display: flex; flex-wrap: wrap; gap: 4px; }
.tk-chip { display: inline-flex; align-items: baseline; gap: 4px; padding: 1px 8px; border-radius: 99px; border: 1px solid var(--vien); font-size: 12px; }
.tk-chip small { color: var(--chu-3); font-size: 10.5px; text-transform: uppercase; }
.tk-bieu-do { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 6px; align-items: end; height: 130px; margin-top: 14px; }
.tk-cot { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 3px; min-width: 0; }
.tk-cot-so { font-size: 11px; color: var(--chu-3); }
.tk-cot-than { width: 100%; max-width: 30px; min-height: 2px; border-radius: 6px 6px 2px 2px; background: var(--nen-phu); border: 1px solid var(--vien); display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; }
.tk-cot-than i { display: block; background: var(--c-giao); opacity: .75; }
.tk-cot.hom-nay .tk-cot-than { border-color: var(--cam-500); }
.tk-cot.hom-nay small { color: var(--cam-700); font-weight: 700; }
.tk-cot small { font-size: 11px; color: var(--chu-3); }
.tk-chu-giai { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.tk-mau { width: 10px; height: 10px; border-radius: 3px; display: inline-block; border: 1px solid var(--vien); }
.tk-mau.co { background: var(--c-giao); opacity: .75; }
.tk-mau.chua { background: var(--nen-phu); }
.tk-pheu { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; margin-bottom: 12px; }
.tk-pheu-o { font: inherit; text-align: left; display: grid; gap: 2px; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--vien); background: var(--mat); color: var(--chu); cursor: pointer; }
.tk-pheu-o b { font-size: 22px; line-height: 1.1; }
.tk-pheu-o.dang-chon { border-color: var(--cam-700); box-shadow: inset 0 0 0 1px var(--cam-700); background: var(--cam-50); }
.tk-bang-sale td, .tk-bang-sale th { white-space: nowrap; }
.tc-lien-ket { margin-top: 6px; color: var(--chu-2); }
.tc-cong { border-top: 1px dashed var(--vien); padding-top: 8px; }
.tc-cong > span:empty { visibility: hidden; }
@media (max-width: 640px) { .tc-cong > span:empty { display: none; } }

/* Lead theo kênh (anh Tùng 28/10): page Minh Thư · page Plu Kids · Zalo · khác */
.k-mt { --k: var(--d-chinh); } .k-plu { --k: var(--d-duyet); } .k-zalo { --k: var(--d-guiGoc); } .k-khac { --k: var(--chu-3); }
.tk-cot-than i[class^="k-"] { background: var(--k); opacity: .8; }
.tk-mau[class*="k-"] { background: var(--k); border-color: var(--k); }
.tk-chu-giai { flex-wrap: wrap; gap: 4px 6px; }
.tk-chu-giai .tk-mau:not(:first-child) { margin-left: 8px; }
.tk-chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--k); align-self: center; }
.tk-dau { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--k); margin-right: 5px; }
.tk-kenh-nhan { margin-top: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; }
.tk-kenh { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin-top: 6px; }
.tk-kenh-o { font: inherit; color: inherit; text-align: left; cursor: pointer; display: grid; gap: 4px; padding: 10px 12px; border-radius: 12px;
  border: 1px solid var(--vien); border-left: 4px solid var(--k); background: var(--mat); }
.tk-kenh-o:hover { background: var(--nen-phu); }
.tk-kenh-o.dang-chon { box-shadow: inset 0 0 0 1px var(--k); background: var(--nen-phu); }
.tk-thanh-kenh { height: 6px; border-radius: 99px; background: var(--nen-phu); overflow: hidden; }
.tk-thanh-kenh i { display: block; height: 100%; background: var(--k); border-radius: 99px; }

/* PC rộng (anh Tùng 28/10): nội dung giãn theo màn hình, bớt khoảng trắng hai bên —
   danh sách dài chia nhiều cột, trang chi tiết (.chi-tiet) xếp các thẻ thành 2 cột */
@media (min-width: 1200px) {
  .noi-dung { max-width: 1600px; padding-left: 28px; padding-right: 28px; }
  .noi-dung.rong-lich, .noi-dung.kh-rong, .noi-dung.bd, .bd .noi-dung, .noi-dung.trang-chu { max-width: 1600px; }
  .noi-dung.hep { max-width: 900px; }
  .the > .ds:has(> .ds-muc + .ds-muc + .ds-muc) { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); column-gap: 32px; }
  .the > .ds > :not(.ds-muc) { grid-column: 1 / -1; }
  .the > .ds:has(> .ds-muc + .ds-muc + .ds-muc) > .ds-muc:last-child { border-bottom: 1px solid var(--line); }
  .noi-dung.chi-tiet { columns: 2 520px; column-gap: 16px; }
  .noi-dung.chi-tiet > * { break-inside: avoid; }
  /* danh sách dạng thẻ (vd phiếu thuê trang phục): nhiều thẻ một hàng */
  .ds-the { display: grid; grid-template-columns: repeat(auto-fill, minmax(540px, 1fr)); align-items: start; }
  .ds-the > .the { margin: 0; }
}

/* Xem / in hợp đồng dịch vụ (anh Tùng 28/10 · 29/10): khổ A4, 2 mẫu theo nhận diện (.hd-sang Minh Thư · .hd-vui Plu Kids).
   Màu lấy từ config/hop-dong-mau.js qua biến --hd-chinh / --hd-phu / --hd-nen. In mặc định trắng đen, tích "In màu" → .in-mau */
.noi-dung.in-hd { max-width: 900px; }
.in-hd-nut .hang { gap: 8px; }
.in-hd-chon { gap: 18px; margin-top: 10px; font-size: 14px; }
.in-hd-tin { display: grid; gap: 8px; margin-top: 12px; }
.in-hd-tin textarea { font-family: inherit; line-height: 1.5; }
.hd-a4 { position: relative; background: #fff; color: #222; width: 100%; max-width: 210mm; margin: 0 auto 24px; padding: 0 0 6mm; box-shadow: var(--bong);
  border: 1px solid var(--vien); font-family: 'Be Vietnam Pro', Arial, sans-serif; font-size: 13.5px; line-height: 1.55; overflow: hidden;
  -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.hd-a4 > :not(.hd-dau):not(.hd-chan) { margin-left: 14mm; margin-right: 14mm; }
.hd-a4 p { margin: 3px 0; }
.hd-dau { display: flex; align-items: center; gap: 22px; padding: 9mm 14mm 7mm; background: var(--hd-nen); border-bottom: 3px solid var(--hd-phu); font-size: 12.5px; color: #555; }
.hd-logo { flex: 0 0 auto; width: 110px; height: 96px; background: var(--hd-chinh);
  -webkit-mask: var(--hd-logo) center / contain no-repeat; mask: var(--hd-logo) center / contain no-repeat; }
.hd-vui .hd-logo { width: 130px; height: 86px; }
.hd-dau-chu { min-width: 0; }
.hd-ten { color: var(--hd-chinh); font-size: 24px; font-weight: 700; line-height: 1.2; }
.hd-phu-de { color: var(--hd-phu); font-weight: 600; margin-bottom: 3px; }
.hd-tieu-de { text-align: center; margin-top: 8mm; margin-bottom: 6mm; }
.hd-tieu-de h2 { margin: 0; color: var(--hd-chinh); font-size: 26px; text-transform: uppercase; letter-spacing: 2px; font-family: inherit; }
.hd-so { color: #777; font-size: 12.5px; }
.hd-ben { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hd-ben > div { background: var(--hd-nen); border-left: 4px solid var(--hd-phu); padding: 10px 14px; }
.hd-nhan { color: var(--hd-phu); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; margin-bottom: 2px; }
.hd-a4 h3 { display: flex; align-items: center; gap: 9px; color: var(--hd-chinh); font-size: 15px; margin-top: 18px; margin-bottom: 7px; padding-bottom: 4px;
  border-bottom: 1.5px solid var(--hd-phu); font-family: inherit; text-transform: uppercase; letter-spacing: .5px; }
.hd-a4 h3 span { display: inline-grid; place-items: center; width: 22px; height: 22px; background: var(--hd-chinh); color: #fff; font-size: 12px; border-radius: 50%; }
.hd-bang { width: calc(100% - 28mm); border-collapse: collapse; }
.hd-bang th, .hd-bang td { border-bottom: 1px solid #ddd; padding: 6px 8px; text-align: left; vertical-align: top; background: none; color: #222; }
.hd-bang thead th { background: var(--hd-nen); color: var(--hd-chinh); font-weight: 700; font-size: 12px; text-transform: uppercase; border-bottom: 1.5px solid var(--hd-phu); }
.hd-bang .so { text-align: right; white-space: nowrap; }
.hd-bang tfoot td { border-bottom: 0; padding: 4px 8px; }
.hd-bang tfoot tr:first-child td { border-top: 1.5px solid var(--hd-phu); padding-top: 8px; }
.hd-bang .hd-con-lai td { color: var(--hd-chinh); font-size: 15px; }
.hd-ct { white-space: pre-line; font-size: 12.5px; color: #555; }
.hd-ds, .hd-dk { padding-left: 22px; }
.hd-dk li { margin: 2px 0; }
.hd-tt { display: flex; gap: 16px; align-items: center; background: var(--hd-nen); padding: 10px 14px; }
.hd-tt img { width: 116px; height: 116px; background: #fff; padding: 4px; }
.hd-ky { display: grid; grid-template-columns: 1fr 1fr; text-align: center; margin-top: 26px; min-height: 130px; }
.hd-ky > div { position: relative; }
.hd-ky b { color: var(--hd-chinh); }
.hd-ky span { display: block; font-style: italic; font-size: 12px; color: #777; }
.hd-chan { margin-top: 8mm; padding: 8px 14mm 0; border-top: 3px solid var(--hd-phu); text-align: center; font-size: 11.5px; color: #777; }
/* con dấu đỏ */
.hd-a4 .hd-dau-coc { position: absolute; left: 50%; top: 34px; transform: translateX(-50%) rotate(-10deg); display: grid; justify-items: center; gap: 1px;
  padding: 7px 18px 6px; color: #C62828; border: 3px solid #C62828; outline: 1.5px solid #C62828; outline-offset: -8px; border-radius: 9px; opacity: .85;
  mix-blend-mode: multiply; pointer-events: none; }
.hd-a4 .hd-dau-coc b { white-space: nowrap; color: #C62828; font-size: 22px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.5px; line-height: 1.25; padding: 0 4px; }
.hd-a4 .hd-dau-coc span { white-space: nowrap; color: #C62828; font-style: normal; font-size: 11.5px; font-weight: 600; }
/* Minh Thư: sang, chữ có chân, nét mảnh */
.hd-sang .hd-ten, .hd-sang .hd-tieu-de h2, .hd-sang h3 { font-family: 'Cormorant Garamond', Georgia, serif; }
.hd-sang .hd-ten { font-size: 30px; letter-spacing: 1px; }
.hd-sang .hd-tieu-de h2 { font-size: 32px; font-weight: 600; letter-spacing: 4px; }
.hd-sang h3 { font-size: 19px; font-weight: 700; letter-spacing: 1px; }
.hd-sang h3 span { font-family: 'Be Vietnam Pro', Arial, sans-serif; background: none; color: var(--hd-phu); border: 1px solid var(--hd-phu); }
/* Plu Kids: tròn, vui */
.hd-vui .hd-ben > div, .hd-vui .hd-tt { border-radius: 14px; border-left: 0; border: 1.5px dashed var(--hd-phu); }
.hd-vui .hd-tt img { border-radius: 8px; }
.hd-vui .hd-bang thead th:first-child { border-radius: 10px 0 0 10px; }
.hd-vui .hd-bang thead th:last-child { border-radius: 0 10px 10px 0; }
.hd-vui .hd-dau { border-bottom-style: dashed; }
.hd-vui .hd-tieu-de h2::before, .hd-vui .hd-tieu-de h2::after { content: '✦'; color: var(--hd-phu); margin: 0 10px; font-size: 18px; vertical-align: middle; }
/* Cưới: gọn 1 trang A4 */
.hd-cuoi { font-size: 12.5px; line-height: 1.45; }
.hd-cuoi .hd-dau { padding: 6mm 14mm 5mm; }
.hd-cuoi .hd-tieu-de { margin-top: 5mm; margin-bottom: 4mm; }
.hd-cuoi h3 { margin-top: 12px; margin-bottom: 5px; }
.hd-bang-goi td { padding: 6px 8px; }
.hd-bang-goi .hd-stt { width: 22px; color: var(--hd-phu); font-weight: 700; }
.hd-nhom-goi { margin-top: 3px; }
.hd-nhom-ten { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--hd-phu); }
.hd-quyen-loi { columns: 2; column-gap: 22px; margin: 1px 0 0; padding-left: 16px; font-size: 12px; color: #444; }
.hd-quyen-loi li { break-inside: avoid; }
.hd-uu-dai { font-size: 12px; font-style: italic; color: var(--hd-phu); }
.hd-tp { margin-top: 6px !important; color: var(--hd-chinh); }
.hd-tien-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.hd-tien-3 > div { background: var(--hd-nen); padding: 8px 12px; display: grid; }
.hd-tien-3 span { font-size: 11.5px; color: #777; }
.hd-tien-3 b { font-size: 16px; color: #1a1a1a; }
.hd-tien-3 .hd-con { background: var(--hd-chinh); }
.hd-tien-3 .hd-con span, .hd-tien-3 .hd-con b { color: #fff; }
.hd-cuoi .hd-dk { list-style: '–  '; font-size: 12px; }
.hd-cuoi .hd-ky { margin-top: 16px; min-height: 115px; }
.hd-cuoi .hd-chan { margin-top: 4mm; }
/* Baby: phiếu thanh toán (kiểu phiếu Nắng Studio) */
.hd-phieu { font-size: 12.5px; padding-bottom: 8mm; }
.ph-dau { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 10mm; padding-bottom: 12px; border-bottom: 1px solid #e3e3e3; }
.ph-thuong-hieu { display: flex; align-items: center; gap: 14px; }
.hd-phieu .hd-logo { width: 92px; height: 60px; }
.ph-ten { color: var(--hd-chinh); font-size: 17px; font-weight: 700; letter-spacing: .5px; }
.ph-phu-de { color: #888; font-size: 11.5px; }
.ph-lien-he { text-align: right; color: #666; font-size: 11px; line-height: 1.6; max-width: 46%; }
.ph-tieu-de { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-top: 9mm; margin-bottom: 4mm; }
.ph-nhan { color: var(--hd-phu); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; }
.ph-tieu-de h2 { margin: 2px 0 0; color: var(--hd-chinh); font-size: 26px; line-height: 1.2; font-family: inherit; }
.ph-so { display: grid; grid-template-columns: auto auto; gap: 2px 12px; margin: 0; font-size: 11.5px; white-space: nowrap; }
.ph-so dt { color: #888; text-align: right; }
.ph-so dd { margin: 0; font-weight: 700; }
.ph-o { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; background: var(--hd-nen); border-radius: 12px; padding: 12px 16px; }
.ph-nhan-xam { color: #888; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; margin-bottom: 2px; }
.ph-bang { width: calc(100% - 28mm); border-collapse: collapse; margin-top: 7mm; }
.ph-bang th { font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: #666; text-align: left; padding: 6px 6px; border-bottom: 1.5px solid #333; background: none; }
.ph-bang td { padding: 8px 6px; border-bottom: 1px solid #eee; vertical-align: top; background: none; color: #222; }
.ph-bang .so { text-align: right; white-space: nowrap; }
.ph-stt { color: #aaa; width: 28px; }
.ph-ct { color: #888; font-size: 11px; margin-top: 2px; }
.ph-giam { color: #C0602A !important; }
.ph-mo { color: #bbb !important; }
.ph-cuoi-bang { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-top: 4mm; }
.ph-cho-dau { position: relative; flex: 1; min-height: 90px; }
.ph-cho-dau .hd-dau-coc { left: 38%; top: 18px; }
.ph-tong { display: grid; grid-template-columns: auto auto; gap: 4px 0; margin: 0; min-width: 270px; align-items: baseline; }
.ph-tong dt { color: #444; }
.ph-tong dd { margin: 0; padding-left: 28px; text-align: right; }
.ph-tong .ph-tong-lon { border-top: 1.5px solid #333; padding-top: 8px; margin-top: 4px; }
dt.ph-tong-lon { font-weight: 700; }
dd.ph-tong-lon { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 24px; font-weight: 700; color: var(--hd-chinh); }
.ph-ls { margin-top: 6mm !important; font-size: 11.5px; color: #444; }
.ph-ghi-chu { margin-top: 5mm; padding-left: 18px; font-size: 11px; color: #555; }
.ph-ghi-chu li { margin: 3px 0; }
.ph-chan { display: flex; justify-content: space-between; gap: 12px; margin-top: 7mm; padding-top: 10px; border-top: 1px solid #e3e3e3; font-size: 11px; color: #888; }
@media (max-width: 599px) {
  .ph-dau, .ph-tieu-de, .ph-cuoi-bang { flex-direction: column; align-items: flex-start; }
  .ph-lien-he { text-align: left; max-width: none; }
  .ph-o, .hd-tien-3 { grid-template-columns: 1fr; }
  .ph-bang { width: calc(100% - 28px); }
  .hd-quyen-loi { columns: 1; }
}
@media (max-width: 599px) {
  .hd-a4 { font-size: 13px; }
  .hd-a4 > :not(.hd-dau):not(.hd-chan) { margin-left: 14px; margin-right: 14px; }
  .hd-bang { width: calc(100% - 28px); }
  .hd-dau { padding: 16px 14px; gap: 12px; }
  .hd-logo { width: 70px; height: 64px; }
  .hd-ben { grid-template-columns: 1fr; }
}
@media print {
  .noi-dung.in-hd { max-width: none; padding: 0; }
  .hd-a4 { box-shadow: none; border: 0; max-width: none; margin: 0; padding-bottom: 0; }
  .in-hd ~ *, .in-hd .khong-in { display: none !important; }
  /* in trắng đen: chuyển xám mọi thứ trừ con dấu */
  .hd-a4:not(.in-mau) > :not(.hd-ky):not(.ph-cuoi-bang), .hd-a4:not(.in-mau) .hd-ky > div > :not(.hd-dau-coc),
  .hd-a4:not(.in-mau) .ph-cuoi-bang > :not(.ph-cho-dau) { filter: grayscale(1); }
  /* hợp đồng dài (nhiều gói) tự sang trang 2: không cắt đôi 1 gói, khối thanh toán, chữ ký; tiêu đề mục không đứng cuối trang */
  .che-do-xem { display: none !important; }
  .hd-ky, .hd-tt, .hd-ben, .hd-bang tr, .ph-bang tr, .ph-cuoi-bang, .hd-tien-3, .hd-nhom-goi { break-inside: avoid; }
  .hd-a4 h3, .hd-nhom-ten { break-after: avoid; }
  .hd-a4 { overflow: visible; }
  @page { size: A4; margin: 10mm 0 12mm; }
}

/* ------------------------------------------------ Menu cây máy tính kiểu SanSan (anh Tùng 29/10) */
.menu-cay { display: none; }
@media (min-width: 900px) {
  .thanh-duoi > a, .thanh-duoi > .nhom-ten { display: none !important; }
  .menu-cay { display: flex; flex-direction: column; gap: 1px; }
  .thanh-duoi .logo-ben b { font-size: var(--co-15, 15px); white-space: nowrap; }
  .thanh-duoi .logo-ben span { letter-spacing: .12em; font-weight: 700; }
  .mc-nhom { margin: 14px 10px 4px; font-size: var(--co-11); font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--chu-3); }
  .mc-nhom:first-child { margin-top: 0; }
  .mc-muc { display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 0 10px; border: 0; background: none; border-radius: var(--bo);
    font: inherit; font-size: var(--co-14); font-weight: 500; color: var(--chu-2); text-decoration: none; cursor: pointer; text-align: left; width: 100%; }
  .mc-muc:hover, .mc-la:hover { background: var(--nen-phu); color: var(--chu); }
  .mc-muc .bieu-tuong .ic { width: 19px; height: 19px; }
  .mc-chu { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mc-mui { color: var(--chu-3); transition: transform var(--nhanh); }
  .mc-cha[aria-expanded="true"] .mc-mui { transform: rotate(90deg); }
  .mc-cha.co-dang-mo { color: var(--cam-900); font-weight: 600; }
  .mc-con { display: flex; flex-direction: column; gap: 1px; margin: 2px 0 6px 19px; padding-left: 12px; border-left: 1px solid var(--vien); }
  .mc-nhom-con { margin: 8px 8px 2px; font-size: var(--co-12); font-weight: 700; color: var(--cam-700); }
  .mc-la { display: flex; align-items: center; min-height: 32px; padding: 0 10px; border-radius: var(--bo); font-size: var(--co-13, 13px); color: var(--chu-2); text-decoration: none; }
  .mc-muc.dang-mo, .mc-la.dang-mo { background: var(--cam-50); color: var(--cam-900); font-weight: 600; box-shadow: inset 3px 0 0 var(--cam-500); }
  .menu-cay .so-dem { margin-left: auto; }
}
.nhat-ky-ds { margin: 0; padding-left: 20px; line-height: 1.6; }
.nhat-ky-ds li { margin: 4px 0; }

/* ------------------------------------------------ Trang Hợp đồng máy tính kiểu SanSan (anh Tùng 29/10) */
.hd-ban-lam { flex: 1; display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 0; min-height: 0; align-items: start; }
.hd-ban-lam.an-loc { grid-template-columns: minmax(0, 1fr); }
.hd-ban-lam.co-chi-tiet { grid-template-columns: 236px minmax(0, 1fr) minmax(460px, 44%); }
.hd-ban-lam.co-chi-tiet.an-loc { grid-template-columns: minmax(0, 1fr) minmax(460px, 50%); }
.hd-loc { position: sticky; top: 0; max-height: 100vh; overflow-y: auto; padding: 14px 10px 30px; border-right: 1px solid var(--vien); background: var(--mat); }
.hd-loc-tren { display: flex; justify-content: space-between; align-items: center; padding: 0 6px 6px; }
.hd-loc-nhom { margin-bottom: 8px; }
.hd-loc-dau { display: flex; align-items: center; gap: 6px; width: 100%; border: 0; background: none; padding: 6px; font: inherit; font-size: 11.5px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--d-tre); cursor: pointer; }
.hd-loc-dau .mc-mui { transition: transform var(--nhanh); }
.hd-loc-dau[aria-expanded="true"] .mc-mui { transform: rotate(90deg); }
.hd-loc-muc { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 32px; border: 0; background: none; border-radius: var(--bo); padding: 0 10px;
  font: inherit; font-size: 13.5px; color: var(--chu-2); cursor: pointer; text-align: left; }
.hd-loc-muc span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hd-loc-muc b { font-size: 12px; font-weight: 500; color: var(--chu-3); }
.hd-loc-muc:hover { background: var(--nen-phu); }
.hd-loc-muc.dang-chon { background: var(--n-duyet); color: var(--c-duyet); font-weight: 600; }
.hd-loc-muc .cham { width: 8px; height: 8px; border-radius: 50%; background: var(--chu-3); flex: none; }
.cham.hdtt-chua-ngay { background: var(--d-chuaChup); } .cham.hdtt-dang { background: var(--d-chuY); } .cham.hdtt-xong { background: var(--d-giao); } .cham.hdtt-huy { background: var(--d-tre); }
.cham.cn-het { background: var(--d-giao); } .cham.cn-no { background: var(--d-tre); } .cham.cn-qua { background: var(--c-tre); }
.cham.cham-mang { background: var(--d-choChon); } .cham.cham-nv { background: var(--d-guiGoc); }
.hd-giua { min-width: 0; padding: 14px 18px 30px; display: flex; flex-direction: column; gap: 10px; }
.hd-thanh-cong-cu { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hd-o-tim { flex: 1; min-width: 220px; display: flex; align-items: center; gap: 8px; padding: 0 12px; height: 40px; border: 1px solid var(--vien-dam); border-radius: var(--bo); background: var(--mat); }
.hd-o-tim input { flex: 1; border: 0; outline: 0; background: none; font: inherit; }
.hd-o-tim .ic { width: 17px; height: 17px; color: var(--chu-3); }
.hd-thanh-cong-cu .thanh-ngay { margin: 0; }
.hd-ten-thang { min-width: 104px; text-align: center; }
.hd-bang-cuon { overflow-x: auto; border: 1px solid var(--vien); border-radius: var(--bo-lon, 12px); background: var(--mat); }
.hd-bang-ds { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.hd-bang-ds th { position: sticky; top: 0; z-index: 1; background: var(--nen-phu); color: var(--chu-2); font-weight: 600; text-align: left; padding: 10px; white-space: nowrap; }
.hd-bang-ds td { padding: 9px 10px; border-top: 1px solid var(--vien); vertical-align: middle; }
.hd-bang-ds .so { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.hd-bang-ds tbody tr:not(.hd-dong-ngay) { cursor: pointer; }
.hd-bang-ds tbody tr:not(.hd-dong-ngay):hover { background: var(--cam-50); }
.hd-bang-ds tr.dang-chon { background: var(--n-duyet) !important; }
.hd-bang-ds tr.da-huy td { color: var(--chu-3); text-decoration: line-through; }
.hd-dong-ngay td { background: var(--mat); padding: 12px 10px 6px; font-size: 13px; color: var(--chu-2); }
.hd-dong-ngay span { margin-left: 14px; }
.hd-ten-khach { font-weight: 600; color: var(--d-chinh); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hd-ma { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; color: var(--chu-2); white-space: nowrap; }
.hd-nv { max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.the-mang { display: inline-block; padding: 2px 8px; border-radius: 6px; background: var(--n-choChon); color: var(--c-choChon); font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.nhan-tthd { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 12px; font-weight: 600; white-space: nowrap; background: var(--nen-phu); color: var(--chu-2); }
.nhan-tthd.hdtt-dang { background: var(--n-chuY); color: var(--c-chuY); }
.nhan-tthd.hdtt-xong { background: var(--n-giao); color: var(--c-giao); }
.nhan-tthd.hdtt-huy { background: var(--n-tre); color: var(--c-tre); }
.chu-xanh-la { color: var(--c-giao); } .chu-lam { color: var(--c-guiGoc); }
.hd-chan-bang { font-size: 13px; color: var(--chu-2); }
.co-chi-tiet .hd-cot-phu { display: none; }
@media (max-width: 1599px) { .hd-cot-it { display: none; } }
@media (max-width: 1599px) {
  .hd-ban-lam.co-chi-tiet { grid-template-columns: minmax(0, 1fr) minmax(460px, 50%); }
  .co-chi-tiet .hd-loc { display: none; }
}
/* khung chi tiết bên phải */
.hd-phai { position: sticky; top: 0; height: 100vh; border-left: 1px solid var(--vien); background: var(--mat); min-width: 0; }
.hd-khung-phai { height: 100%; display: flex; flex-direction: column; }
.hd-kp-dau { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--vien); flex-wrap: wrap; }
.hd-kp-ma { display: flex; align-items: center; gap: 8px; }
.hd-kp-ma b { font-size: 17px; }
.hd-kp-mang { font-size: 12px; font-weight: 700; color: var(--chu-3); }
.hd-kp-ma { flex: 1; }
.hd-kp-tien { order: 9; flex-basis: 100%; display: flex; gap: 18px; flex-wrap: wrap; font-size: 13px; color: var(--chu-2); }
.hd-kp-tien b { font-size: 15px; }
.hd-kp-nut { display: flex; gap: 6px; padding: 12px 12px 8px; overflow-x: auto; border-bottom: 1px solid var(--vien); }
.hd-nut-tron { flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 74px; border: 0; background: none; font: inherit; font-size: 11.5px;
  font-weight: 600; color: var(--chu-2); text-decoration: none; cursor: pointer; text-align: center; line-height: 1.2; }
.hd-nut-tron > span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--n-guiGoc); color: var(--d-guiGoc); }
.hd-nut-tron .ic { width: 19px; height: 19px; }
.hd-nut-tron.chinh > span { background: var(--d-giao); color: #fff; }
.hd-nut-tron.nguy > span { background: var(--n-tre); color: var(--d-tre); }
.hd-nut-tron:hover > span { filter: brightness(.95); }
.hd-ct-than { flex: 1; overflow-y: auto; padding: 12px 14px 40px; background: var(--nen); }
.hd-ct-than .the { margin-bottom: 12px; }
/* lên hợp đồng: 2 cột trên máy tính */
.len-o-vang { background: #FFFBEA; border-color: #F1DE9C; }
.len-o-xanh { background: #F0FAF3; border-color: #BFE3C9; }
.len-hd-luoi { display: grid; gap: 14px; }
.len-hd-luoi > .cot { gap: 14px; }
.len-hd-luoi .the { margin: 0; }
@media (min-width: 900px) {
  .man-phu .hop.len-hd-hop { width: min(1240px, calc(100vw - 48px)); max-width: 1240px; }
  .len-hd-hop .len-hd-luoi { grid-template-columns: 1fr 1fr; align-items: start; }
}
@media (min-width: 1100px) {
  .noi-dung.len-hd-trang { max-width: 1240px; }
  .len-hd-trang .len-hd-luoi { grid-template-columns: 1fr 1fr; align-items: start; }
}

/* Khách chọn ảnh (29/10) */
.ca-buoi .than { min-width: 0; }
.ca-dan-link { margin-top: 6px; gap: 6px; }
.ca-dan-link .o-nhap { flex: 1; min-width: 0; }
.ca-nut { margin-top: 6px; gap: 6px; }
.ca-ds-anh { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; max-height: 55vh; overflow-y: auto; }
.ca-ds-anh > div { padding: 6px 8px; border: 1px solid var(--vien); border-radius: var(--bo-nho); font-size: 13px; }
.ca-ds-anh > .co-ghi-chu { grid-column: span 2; background: var(--cam-50); }

/* Lịch trên điện thoại kiểu iPhone (anh Tùng 29/10) */
.lich-dt { padding-top: 8px; }
.ld-tren { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.ld-thang { flex: 1; font-size: 18px; }
.ld-che-do { display: inline-flex; background: var(--nen-phu); border-radius: 9px; padding: 2px; }
.ld-che-do button { border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600; padding: 5px 12px; border-radius: 7px; color: var(--chu-2); cursor: pointer; }
.ld-che-do button.dang-chon { background: var(--mat); color: var(--chu); box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.ld-tuan { display: grid; grid-template-columns: 18px repeat(7, 1fr) 18px; align-items: center; gap: 2px; padding: 6px 0 8px; border-bottom: 1px solid var(--vien); }
.ld-mui { border: 0; background: none; font-size: 22px; line-height: 1; color: var(--chu-3); padding: 0; cursor: pointer; }
.ld-ngay { display: flex; flex-direction: column; align-items: center; gap: 3px; border: 0; background: none; font: inherit; padding: 4px 0; cursor: pointer; color: var(--chu); }
.ld-thu { font-size: 11px; color: var(--chu-3); font-weight: 600; }
.ld-so { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; font-size: 16px; font-weight: 600; }
.ld-ngay.hom-nay .ld-so { color: var(--d-tre); }
.ld-ngay.chon .ld-so { background: var(--chu); color: #fff; }
.ld-ngay.chon.hom-nay .ld-so { background: var(--d-tre); color: #fff; }
.ld-cham { display: flex; gap: 2px; height: 5px; }
.ld-cham i { width: 5px; height: 5px; border-radius: 50%; background: var(--chu-3); }
.ld-cham i.nhom-chup { background: var(--d-chinh); } .ld-cham i.nhom-makeup { background: var(--d-duyet); }
.ld-cham i.nhom-vay { background: var(--d-choChon); } .ld-cham i.nhom-tu-van { background: var(--d-guiGoc); }
.ld-loc { display: flex; gap: 6px; align-items: center; overflow-x: auto; padding: 8px 0 4px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.ld-loc::-webkit-scrollbar { display: none; }
.ld-loc .chip-chon { flex: none; white-space: nowrap; }
.ld-loc label { flex: none; white-space: nowrap; margin-left: 4px; }
.ld-dau-ngay { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 14px 2px 6px; font-size: 14px; color: var(--chu-2); }
.ld-dau-ngay.hom-nay b { color: var(--d-tre); }
.ld-the { margin: 0 0 4px; padding: 4px 12px; }
.ld-trong { text-align: center; padding: 24px 0; }