/* ============================================================================
   TAB CẬN DATE — bản mốc ngày (KIEMKHO.CANDATE, bản vẽ Sếp duyệt 02/09/2026)
   Toàn bộ class tiền tố cd- để không giẫm CSS cũ trong index.html.
   Màu lấy từ bảng 16 màu chuẩn ĐVP; khối chính viền trái đỏ (nghĩa: cảnh báo date),
   khối chú thích xám (lời dặn, không giành mắt) — đúng nếp KHỐI MÀU.
   ============================================================================ */

/* thẻ đếm mốc */
.cd-dem{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin:0 0 12px}
.cd-o{background:#fff;border:1px solid #dde7e9;border-left:3px solid var(--mk);
  border-radius:10px;padding:8px 12px;cursor:pointer}
.cd-o .n{font-size:22px;font-weight:800;color:var(--mk);line-height:1.2}
.cd-o .l{font-size:12px;color:#5c6f75;font-weight:600}
.cd-o.on{outline:2px solid var(--mk);outline-offset:-1px}
.cd-o.rong{opacity:.55}

/* bộ lọc */
.cd-loc input[type=text]{height:34px;border:1px solid #dde7e9;border-radius:8px;
  padding:0 10px;font:inherit;font-size:13px;width:190px}
.cd-loc select{max-width:190px}
.cd-chk{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;
  color:#5c6f75;background:#fff;border:1px solid #dde7e9;border-radius:8px;
  height:34px;padding:0 10px;cursor:pointer}
.cd-nut-cam{border-color:#dd8b05 !important;color:#b06f04 !important}

/* khối chính — KHỐI MÀU đỏ */
.cd-km{border-left:3px solid #dc2626}
.cd-h2{margin:0 0 10px;font-size:12.5px;font-weight:800;text-transform:uppercase;
  letter-spacing:1px;color:#b91c1c;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cd-h2 .sub{font-weight:600;font-size:11px;letter-spacing:.2px;text-transform:none;color:#5c6f75}
.cd-h2.xam{color:#475569}
.cd-h2.cam{color:#b06f04}

/* bảng — dòng gọn ≤2 hàng chữ (Sếp chốt) */
.cd-bang{width:100%;border-collapse:collapse;table-layout:fixed}
.cd-bang th{background:#fdeaea;color:#b91c1c;font-size:11px;text-transform:uppercase;
  letter-spacing:.5px;text-align:left;padding:7px 8px;border-bottom:1px solid #dde7e9}
.cd-bang td{padding:6px 8px;border-bottom:1px solid #edf3f4;vertical-align:middle;
  font-size:13px;line-height:1.35;overflow:hidden}
.cd-bang tr>td:first-child{border-left:3px solid var(--mdong,transparent)}
.cd-r-do>td{background:#fdeaea}
.cd-r-cam>td{background:#fdeee6}
.cd-r-vang>td{background:#faf3e0}
.cd-xong>td,.cd-card.cd-xong{opacity:.55}

.cd-bdg{display:inline-block;padding:2px 8px;border-radius:6px;font-weight:800;
  font-size:12px;letter-spacing:.3px;white-space:nowrap}
.cd-bdg.day{color:#fff}
.cd-bdg.vien{background:#fff;border:1.5px solid currentColor}
.cd-hsd{display:block;font-size:11px;color:#5c6f75;margin-top:2px}
.cd-ten{font-weight:800;font-size:13.5px;display:block;line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cd-sku{display:block;font-size:11px;color:#8ba0a6;letter-spacing:.3px}
.cd-sao{color:#dd8b05}
.cd-nho{font-size:12px;color:#5c6f75}
.cd-uoc{font-weight:800}
.cd-uoc.het{color:#b91c1c}
.cd-sua{color:#0d8a9c;cursor:pointer;font-weight:700}
.cd-cat2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;font-size:12.5px;line-height:1.3;cursor:pointer}
.cd-trong{font-size:12px;color:#95a5ab;font-style:italic;cursor:pointer}
/* Ô "Sale xả" — thẻ HAI TẦNG (SPEC-O-SALE-XA-CAN-DATE.md, Sếp duyệt 08/09).
   Tầng trên TIỀN, tầng dưới ĐIỀU KIỆN. Icon ✎ đứng NGOÀI khung (flex anh em) nên
   khung dài đến đâu icon sửa cũng không bị cắt — giữ bài học Sếp vấp 02/09 tối. */
.cd-osale{display:flex;align-items:flex-start;gap:5px}
.cd-bsale{flex:1;min-width:0;display:block;background:#fffdf4;border:1px solid #e0c98a;
  border-radius:6px;padding:3px 7px 4px;line-height:1.25}
/* KHÔNG cắt chữ bằng "…": cột này hẹp mà hàng máy móc ĐVP là 7 chữ số, cắt là nuốt
   mất giá gốc. Cho xuống dòng theo cụm; nhãn web rộng cố định để hai giá THẲNG CỘT. */
.cd-sgia{display:flex;align-items:baseline;column-gap:4px;min-width:0}
.cd-sweb{flex:0 0 auto;min-width:26px;font-size:11px;font-weight:700;color:#8a6d1f}
.cd-stien{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:baseline;column-gap:5px}
/* giá sale = điểm hút mắt DUY NHẤT của ô */
.cd-sban{font-size:13.5px;font-weight:800;color:#854d0e;letter-spacing:-.2px;white-space:nowrap}
.cd-sgoc{font-size:11px;color:#5c6f75;white-space:nowrap}
/* #5c6f75 chứ KHÔNG #8ba0a6: xám nhạt trên nền vàng #fffdf4 chỉ 2,69:1, rớt chuẩn 4,5:1 */
.cd-schua{font-size:11px;color:#5c6f75;font-style:italic}
/* Tầng 2 là FLEX, KHÔNG phải dòng chữ liền: hai cụm [%·ngày] và [tên web] cách nhau
   bằng KHOẢNG 8px thay cho dấu "·". Dấu đứng ĐẦU cụm thì lúc hết chỗ nó rớt xuống dòng
   theo cụm, dòng 2 hiện ra «· ĐVP+SN» trông như gạch đầu dòng lạc — flex gap không rớt.
   baseline chứ không stretch: cụm "% chưa rõ" là chữ nghiêng, chân chữ phải trùng. */
.cd-sdk{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:8px;row-gap:1px;
  font-size:11px;font-weight:700;color:#8a6d1f;line-height:1.3}
.cd-sm{white-space:nowrap}
.cd-sgap{color:#b91c1c}
/* Ngày CÒN XA. Trông y hệt .cd-sdk vì nó cố ý KHÔNG được giành mắt — chỉ .cd-sgap
   (sắp hết hạn) mới đỏ. Khai tường minh chứ không để trống: JS luôn gắn một trong hai
   lớp này, có lớp thật thì bài kiểm neo được vào "xa hay gấp" mà không phải suy ra từ
   việc VẮNG lớp kia — vắng lớp cũng là thứ xảy ra khi JS gãy. */
.cd-sng{color:inherit}
/* "% chưa rõ" là lời cáo lỗi, không phải con số — bỏ đậm để nó không cạnh tranh với
   giá sale, thứ duy nhất được hút mắt trong ô này. */
.cd-sdk .cd-schua{font-weight:400}
.cd-osale .cd-sua{flex:none;line-height:1.4}
.cd-nutn{display:inline-block;border:1px solid #dde7e9;background:#fff;border-radius:7px;
  font-size:11px;font-weight:700;padding:3px 6px;cursor:pointer;color:#243b42;white-space:nowrap}
.cd-nutn.chinh{border-color:#0d8a9c;color:#076e7e}
.cd-nutn.canh{border-color:#e0b4b4;color:#b91c1c}
.cd-tt{display:flex;gap:4px;flex-wrap:wrap}
.cd-chan{margin-top:10px;font-size:12px;color:#8b989d}

/* khung xả sale inline — nền vàng nhạt = đang ở chế độ đặt giá */
.cd-hang-sale>td{background:#fffdf4;border-left:3px solid #a16207;padding:10px 12px 12px}
.cd-pan .p1{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:8px}
.cd-pan .tieude{font-weight:800;color:#854d0e;font-size:13px}
.cd-pan label{font-size:12.5px;font-weight:700;color:#5c6f75;display:flex;align-items:center;gap:6px}
.cd-pan input[type=number]{height:30px;border:1px solid #e0c98a;border-radius:7px;
  padding:0 8px;font:inherit;font-weight:800;width:64px;background:#fff}
.cd-pan input[type=date]{height:30px;border:1px solid #e0c98a;border-radius:7px;
  padding:0 8px;font:inherit;font-weight:700;background:#fff}
.cd-pan .mac{font-size:11.5px;color:#5c6f75}
.cd-pan .p2{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cd-pan .p2.nut{margin-top:8px}
.cd-oweb{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid #e8dcb5;
  border-radius:8px;padding:5px 10px;font-size:12.5px}
.cd-oweb .cu{color:#5c6f75;text-decoration:line-through}
.cd-oweb .moi{font-weight:800;color:#b91c1c}
.cd-oweb.mo{color:#95a5ab;font-style:italic;border-style:dashed}
.cd-oweb.khoa{opacity:.75}
.btn-huy{background:#fff;border:1.5px solid #dde7e9;color:#5c6f75;height:32px;padding:0 12px;font-size:12.5px}
.btn-cam{height:32px;padding:0 14px;font-size:12.5px}

/* chú thích xám */
.cd-chuthich{border-left:3px solid #64748b}
.cd-chuthich .dong{font-size:12.5px;color:#475569;margin-top:6px}
.cd-chip{display:inline-block;width:10px;height:10px;border-radius:3px;margin:0 4px -1px 8px}

/* thêm lô tay */
.cd-lotay{border-left:3px solid #dd8b05}
.cd-lotay .hang{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}
.cd-lotay .o{position:relative}
.cd-lotay .o.rong{flex:1;min-width:180px}
.cd-lotay label{display:block;font-size:12px;font-weight:700;color:#5c6f75;margin-bottom:4px}
.cd-lotay input{height:34px;border:1px solid #dde7e9;border-radius:8px;padding:0 10px;
  font:inherit;font-size:13px;width:100%;min-width:150px;box-sizing:border-box}
.cd-lotay #ltMa{min-width:230px}
.cd-lotay .o.nut{display:flex;gap:8px}
.cd-lotay .goiy{position:absolute;top:100%;left:0;right:0;background:#fff;z-index:20;
  border:1px solid #dde7e9;border-radius:0 0 8px 8px;box-shadow:0 6px 16px rgba(16,42,48,.12);
  max-height:220px;overflow:auto}
.cd-lotay .goiy:empty{display:none}
.cd-lotay .goiy .mot{padding:7px 10px;font-size:12.5px;cursor:pointer;border-bottom:1px solid #f0f5f6}
.cd-lotay .goiy .mot:hover{background:#e3f3f6}
.cd-lotay .goiy .mot.rong{color:#95a5ab;font-style:italic;cursor:default}

/* mobile: bảng → thẻ */
.cd-mobile{display:none}
@media (max-width:640px){
  .cd-dem{grid-template-columns:repeat(3,1fr);gap:8px}
  .cd-o .n{font-size:19px}
  .cd-loc input[type=text]{width:100%}
  .cd-loc select{flex:1;min-width:100px;max-width:none}
  .cd-bang{display:none}
  .cd-mobile{display:block}
  .cd-card{border:1px solid #dde7e9;border-left:3px solid var(--mdong,#dde7e9);
    border-radius:10px;padding:10px 12px;margin-bottom:10px;background:#fff}
  .cd-card.cd-r-do{background:#fdeaea}
  .cd-card.cd-r-cam{background:#fdeee6}
  .cd-card.cd-r-vang{background:#faf3e0}
  .cd-card .d1{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;margin-bottom:4px}
  .cd-card .d1>span:first-child{min-width:0}
  .cd-card .dong{font-size:12.5px;margin-top:3px}
  /* cầm điện thoại đọc xa hơn — nhích cỡ, giữ nguyên bố cục hai tầng */
  .cd-card .cd-sban{font-size:14px}
  .cd-card .cd-sgoc{font-size:11.5px}
  .cd-card .cd-sdk{font-size:11.5px}
  .cd-card .nhan{color:#5c6f75;font-weight:600}
  .cd-card .tt{margin-top:8px;display:flex;gap:6px;flex-wrap:wrap}
  .cd-card .cd-pan{background:#fffdf4;border:1px solid #e8dcb5;border-radius:8px;padding:8px 10px;margin-top:8px}
  .cd-card .cd-oweb{width:100%;box-sizing:border-box}
  .cd-lotay .hang{flex-direction:column;align-items:stretch}
}