/* Kiểu dáng riêng của Dashboard Quản Lý Bán Hàng (DBBH).
   Bộ biến màu và phần khung/đăng nhập nằm trong <style> của index.html — file này
   chỉ lo phần NỘI DUNG các tab (thẻ số, biểu đồ, bảng, bộ lọc).

   LUẬT MÀU (CHUAN-GIAO-DIEN.md mục 1): đơn sắc teal. Màu chỉ dùng để BÁO TRẠNG
   THÁI cần xử lý (đỏ/cam/vàng). Nhiều đối tượng cùng loại thì chung một tông,
   phân biệt bằng icon + tên in đậm — cấp mỗi người một màu riêng đã bị Sếp chê
   "củ chuối" ngày 29/07/2026, phải gỡ hết.
   Ngoại lệ DUY NHẤT: hệ màu của biểu đồ (--bd1..--bd6) — cột chồng mà cùng tông
   thì không đọc được. Hệ này không được tràn ra bảng. */

:root{
  /* Dải màu riêng cho biểu đồ, đi từ teal đậm sang cam — cùng gia đình nhận
     diện ĐVP, không phải cầu vồng ngẫu nhiên. */
  --bd1:#067686; --bd2:#2b98a5; --bd3:#6fbcc2; --bd4:#f9a41c; --bd5:#dd8b05;
  --bd6:#a8724a; --bd7:#8fa3ad; --bd8:#c9d6db;
  --luoi:#e8eef0;
}

/* ── Lưới bố cục ─────────────────────────────────────────────────────────
   Tận dụng tối đa khung nhìn (yêu cầu của Sếp): thẻ tự co theo bề rộng thật,
   không khoá số cột cứng. minmax(min(...,100%),1fr) là để trên màn 390px thẻ
   không bị đẩy rộng hơn màn hình gây cuộn ngang. */
.luoi{display:grid;gap:13px}
.luoi.the6{grid-template-columns:repeat(auto-fit,minmax(min(215px,100%),1fr))}
.luoi.g2{grid-template-columns:repeat(auto-fit,minmax(min(400px,100%),1fr))}
.luoi.g3{grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}

/* ── Thẻ số lớn ─────────────────────────────────────────────────────────── */
.so-lon{background:#fff;border:1px solid var(--vien);border-radius:13px;
  padding:14px 16px;border-top:3px solid var(--teal)}
.so-lon .nhan{font-size:12px;color:var(--xam);text-transform:uppercase;
  letter-spacing:.3px;font-weight:600}
.so-lon .gia-tri{font-size:26px;font-weight:800;color:var(--teal-dam);
  line-height:1.2;margin:3px 0 2px;word-break:break-word}
.so-lon .phu{font-size:12px;color:var(--xam);line-height:1.4}
/* Thẻ cần chú ý (Công nợ) — cam, vì đây là số PHẢI đọc kèm chú thích. */
.so-lon.canh{border-top-color:var(--cam)}
.so-lon.canh .gia-tri{color:var(--cam-dam)}

/* ── Chú thích trung thực ────────────────────────────────────────────────
   Luật riêng của dự án (CHUAN-GIAO-DIEN.md mục 4): số suy đoán phải TỰ KHAI là
   suy đoán, và mọi tỉ lệ phải kèm tử số + mẫu số. Khối này in thường trực,
   KHÔNG được thu gọn hay giấu sau nút bấm. */
.that-tha{margin-top:13px;padding:11px 13px;border-radius:9px;font-size:12.5px;
  line-height:1.55;background:var(--vang);border-left:3px solid var(--cam);color:#6d4a00}
.that-tha b{color:#4a3200}
.that-tha ul{margin:6px 0 0;padding-left:19px}
.that-tha li{margin:3px 0}

/* ── Bảng dữ liệu ────────────────────────────────────────────────────────
   table-layout:fixed + % cột đặt sẵn. KHÔNG để auto: một ô gộp "không có dữ
   liệu" sẽ kéo lệch cả cột khi bảng có hàng nghìn dòng (CHUAN-GIAO-DIEN mục 2). */
.cuon{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.bh{width:100%;table-layout:fixed;border-collapse:collapse;font-size:13.5px}
table.bh th,table.bh td{padding:8px 9px;text-align:right;
  border-bottom:1px solid var(--vien);vertical-align:top}
table.bh th{background:#f3f7f8;color:var(--teal-dam);font-size:11.5px;
  text-transform:uppercase;letter-spacing:.2px;font-weight:700;
  position:sticky;top:0;z-index:1}
table.bh td{overflow:hidden;text-overflow:ellipsis}
table.bh .trai{text-align:left}
/* Tên/mục chính in đậm để rà mắt nhanh (mục 2.2). */
table.bh .ten{font-weight:700;color:#12333d}
table.bh tbody tr:nth-child(even){background:#fafcfc}
table.bh tbody tr:hover{background:#f0f9fa}
table.bh tr.tong td{border-top:2px solid var(--teal);font-weight:800;
  background:#f3f7f8;color:var(--teal-dam)}
/* Chữ dài do người dùng nhập: kẹp 2 dòng + tooltip title. Không kẹp thì dòng
   cao vọt và bảng nhấp nhô (mục 2.3). */
.kep2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;line-height:1.35}
.trong{color:var(--xam);font-style:italic}

/* Mỗi bảng một min-width riêng: table-layout:fixed + width:100% trên màn 375px
   sẽ bóp mỗi cột còn ~12px, chữ nát. Có min-width thì .cuon mới cứu được (mục 2.5). */
table.bh.w-top{min-width:660px}
/* Bảng KPI có tới 8 cột cố định + n cột loại giá, mà cột tiền phải chứa được số
   13 chữ số kiểu "13.574.384.377đ". Ở 1080px các cột tiền bị cắt cụt giữa số
   ("5.043.217…") — nhìn ảnh chụp mới phát hiện. Nới lên 1380px rồi để .cuon lo
   phần cuộn ngang; con số bị cắt là giấu dữ liệu của Sếp, không chấp nhận được. */
table.bh.w-kpi{min-width:1380px}

/* ── Biểu đồ tự vẽ bằng SVG ──────────────────────────────────────────────
   Không thêm thư viện (ràng buộc dự án) — vẽ tay theo lối /doanh-thu/. */
.bd{width:100%;height:auto;display:block}
.bd-cuon{overflow-x:auto}
.chu-giai{display:flex;flex-wrap:wrap;gap:5px 15px;margin-top:9px;font-size:12.5px}
.chu-giai span{display:inline-flex;align-items:center;gap:5px}
.o-mau{width:11px;height:11px;border-radius:3px;flex:none}

/* ── Bộ lọc ──────────────────────────────────────────────────────────────── */
.thanh-loc{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:flex-end}
.o-loc{display:flex;flex-direction:column;gap:4px}
.o-loc label{font-size:11.5px;font-weight:700;color:var(--xam);text-transform:uppercase}
.o-loc input,.o-loc select{padding:8px 10px;border:1.5px solid var(--vien);
  border-radius:8px;outline:none;background:#fff}
.o-loc input:focus,.o-loc select:focus{border-color:var(--teal)}
.nut-p{padding:8px 14px;border:1.5px solid var(--teal);background:#fff;color:var(--teal);
  border-radius:8px;font-weight:700;font-size:13.5px}
.nut-p:hover{background:#eef7f8}
.nut-p.chinh{background:var(--teal);color:#fff}
.nut-p.chinh:hover{background:var(--teal-dam)}
.nut-p.nhe{border-color:var(--vien);color:var(--xam);font-weight:600}
.nut-p.nhe:hover{background:#f5f7f8}

/* Nhóm nút chọn chiều gom nhóm (tab Nhân sự). Dạng phân đoạn liền khối để
   thấy rõ "chỉ chọn được một". */
.nhom-chieu{display:inline-flex;border:1.5px solid var(--teal);border-radius:9px;
  overflow:hidden;flex-wrap:wrap}
.nhom-chieu button{background:#fff;border:none;padding:9px 15px;font-weight:700;
  font-size:13.5px;color:var(--teal);border-right:1px solid var(--teal)}
.nhom-chieu button:last-child{border-right:none}
.nhom-chieu button.chon{background:var(--teal);color:#fff}

/* ── Ô tích chọn nhiều giá trị ───────────────────────────────────────────
   CHUAN-GIAO-DIEN mục 3: KHÔNG làm thành thẻ. Một khung viền bao ngoài, các
   dòng ngăn bằng kẻ 1px. Dòng đang chọn chỉ cần nền teal rất nhạt + tên đậm
   màu teal, không cần viền dày (đổi kiểu này từng giảm dòng 74px → 47px). */
.khung-tich{border:1.5px solid var(--vien);border-radius:10px;overflow:hidden;background:#fff}
.khung-tich .dong{display:flex;align-items:center;gap:9px;padding:8px 12px;
  border-bottom:1px solid var(--vien);cursor:pointer;font-size:13.5px}
.khung-tich .dong:last-child{border-bottom:none}
.khung-tich .dong:hover{background:#f5fafb}
.khung-tich .dong.chon{background:#eef7f8}
.khung-tich .dong.chon .nh{font-weight:700;color:var(--teal-dam)}
.khung-tich input[type=checkbox]{width:16px;height:16px;accent-color:var(--teal);flex:none;margin:0}
.khung-tich .nh{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.khung-tich .dem{font-size:11.5px;color:var(--xam);flex:none}

/* ── Chip / huy hiệu ─────────────────────────────────────────────────────── */
.chip{display:inline-block;padding:2px 9px;border-radius:11px;font-size:11.5px;
  font-weight:700;background:#eef4f6;color:var(--teal-dam)}
.chip.tt{background:#fdecec;color:#a12727}      /* trạng thái cần xử lý */
.chip.tc{background:#fff3dd;color:#7a5300}
.dang-tai{padding:26px;text-align:center;color:var(--xam);font-size:13.5px}

/* ══════════════════════════════════════════════════════════════════════════
   TASK 8 — TAB KIỂM SOÁT GIÁ VÀ TAB KIỂM SOÁT ĐIỂM
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Thẻ cờ bấm được ─────────────────────────────────────────────────────
   Mỗi cờ là một nút bấm ra bảng chi tiết. Dùng <button> thật chứ không phải
   <div onclick> để bàn phím Tab tới được và trình đọc màn hình đọc ra.
   Màu chỉ để BÁO MỨC (đỏ/cam/vàng) — đúng luật màu mục 1 CHUAN-GIAO-DIEN. */
.luoi.co{grid-template-columns:repeat(auto-fit,minmax(min(232px,100%),1fr))}
.the-co{background:#fff;border:1px solid var(--vien);border-radius:13px;
  padding:13px 15px;border-top:3px solid var(--xam);text-align:left;
  font-family:inherit;font-size:inherit;cursor:pointer;transition:.15s;
  display:flex;flex-direction:column;gap:2px;width:100%}
.the-co:hover{border-color:var(--teal);box-shadow:0 3px 12px rgba(6,118,134,.13)}
.the-co.dang{border-color:var(--teal);background:#f2f9fa;
  box-shadow:0 0 0 2px rgba(6,118,134,.16)}
.the-co .dau{display:flex;align-items:center;gap:7px;font-size:12.5px;
  font-weight:700;color:#1d2b33;line-height:1.3}
.the-co .dau .bi{font-size:14px;flex:none}
.the-co .so{font-size:25px;font-weight:800;line-height:1.15;margin:2px 0}
.the-co .phu{font-size:11.5px;color:var(--xam);line-height:1.4}
/* Ba mức cờ — thống nhất với chip trạng thái. */
.the-co.m-do{border-top-color:var(--do)}      .the-co.m-do .so{color:#b8302f}
.the-co.m-cam{border-top-color:var(--cam)}    .the-co.m-cam .so{color:var(--cam-dam)}
.the-co.m-vang{border-top-color:#e0c250}      .the-co.m-vang .so{color:#8a6d00}
/* Cờ đang tắt (cờ vàng ẩn mặc định): vẫn thấy con số nhưng nhạt đi, kèm nhãn
   "đang ẩn" — KHÔNG được giấu hẳn, giấu là Sếp tưởng không có vi phạm. */
.the-co.tat{opacity:.62;border-top-style:dashed;background:#fbfcfc}
.the-co .nhan-an{font-size:10.5px;font-weight:700;color:var(--xam);
  background:#eef1f3;border-radius:9px;padding:1px 7px;align-self:flex-start;margin-top:3px}
/* Cờ chưa kiểm được vì thiếu khai báo (diem-nhom-cam). Phải khác hẳn cờ = 0
   thật, nếu không Sếp đọc "0" thành "không có vi phạm". */
.the-co.chua-khai{border-top-color:var(--xam);border-style:dashed;background:#fbfbfa}
.the-co.chua-khai .so{color:var(--xam);font-size:19px}

/* ── Ô tiền để RIÊNG (giá ngoại lệ) ──────────────────────────────────────
   721,6 triệu của `gia-ngoai-le` là GIÁ TRỊ ĐƠN CHỜ DUYỆT, không phải tiền
   mất. Quyết định đã chốt: không cộng gộp vào tổng thiệt hại. Ô này cố ý
   trình bày khác hẳn ô tổng thiệt hại để mắt không gộp hai con số lại. */
.hai-o{display:grid;gap:13px;grid-template-columns:repeat(auto-fit,minmax(min(310px,100%),1fr))}
.o-tien{border-radius:12px;padding:14px 16px;border:1px solid var(--vien);background:#fff}
.o-tien .nh{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.3px}
.o-tien .gt{font-size:27px;font-weight:800;line-height:1.2;margin:3px 0}
.o-tien .gg{font-size:12px;line-height:1.45}
.o-tien.mat{border-left:4px solid var(--do);background:#fef7f7}
.o-tien.mat .nh{color:#a12727} .o-tien.mat .gt{color:#b8302f} .o-tien.mat .gg{color:#8d4444}
.o-tien.cho{border-left:4px solid var(--cam);background:#fffaf0}
.o-tien.cho .nh{color:#7a5300} .o-tien.cho .gt{color:var(--cam-dam)} .o-tien.cho .gg{color:#7a5300}

/* ── Nhóm nút chuyển chuẩn so giá ────────────────────────────────────────
   Dùng lại hình thức .nhom-chieu để người dùng nhận ra ngay "chỉ chọn một". */
.thanh-cong-cu{display:flex;gap:11px 15px;align-items:center;flex-wrap:wrap;margin-top:11px}

/* ── Bảng chi tiết cờ ────────────────────────────────────────────────────
   11 cột, cột mô tả dài → min-width lớn, để .cuon lo cuộn ngang. Cắt cụt số
   tiền là giấu dữ liệu của Sếp (bài học Task 7 khi nhìn ảnh chụp). */
/* 11 cột, trong đó có 3 cột mã dài (số chứng từ sàn 18 ký tự) và 2 cột tên
   người. Ở 1460px cột cuối «Bộ phận ĐH» bị đẩy khuất mép phải — nhìn ảnh chụp
   mới thấy, phép đo cột vẫn báo lệch 0px vì các dòng đều khuất giống nhau. */
table.bh.w-co{min-width:1620px}
/* Số chứng từ và mã hàng là chuỗi KHÔNG có khoảng trắng, dài tới 18 ký tự
   (mã đơn sàn kiểu 581985649949246732). `overflow:hidden` đặt chung cho mọi td
   sẽ cắt cụt chúng giữa chừng — mà cắt cụt số chứng từ thì Sếp không tra lại
   được đơn, đúng kiểu giấu dữ liệu mà luật dự án cấm. Cho phép xuống dòng
   giữa ký tự để hiện đủ. Phát hiện được nhờ đo scrollWidth > clientWidth. */
table.bh td.ma-dai{overflow-wrap:anywhere;word-break:break-all;white-space:normal}
table.bh.w-diem{min-width:1000px}
table.bh.w-giu{min-width:860px}
/* Ô mức cờ trong bảng: chấm màu + chữ, không tô nền cả dòng — tô nền cả dòng
   thì bảng nghìn dòng nhìn như cầu vồng, đúng thứ Sếp đã chê. */
.dau-muc{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;font-weight:700;font-size:12px}
.dau-muc i{width:9px;height:9px;border-radius:50%;flex:none}
.dau-muc.m-do{color:#b8302f}   .dau-muc.m-do i{background:var(--do)}
.dau-muc.m-cam{color:#8a5a00}  .dau-muc.m-cam i{background:var(--cam)}
.dau-muc.m-vang{color:#8a6d00} .dau-muc.m-vang i{background:#e0c250}
/* Số tiền thiệt hại trong bảng — in đậm để mắt bắt ngay cột quan trọng nhất. */
table.bh td.tien-do{font-weight:800;color:#b8302f}
table.bh td.am{color:var(--do);font-weight:700}

/* ── Đồng hồ điểm treo ───────────────────────────────────────────────────
   Con số rủi ro tài chính lớn nhất của bộ dữ liệu (3,58 tỉ) — Sếp yêu cầu
   cho nó vị trí nổi bật, nên đây là khối lớn nhất của tab. */
.dong-ho{background:linear-gradient(135deg,var(--teal-toi),#045f6e,#057787);
  color:#fff;border-radius:14px;padding:20px 22px}
.dong-ho .nh{font-size:12.5px;text-transform:uppercase;letter-spacing:.4px;
  opacity:.85;font-weight:700}
.dong-ho .gt{font-size:40px;font-weight:800;line-height:1.1;margin:5px 0 2px;
  word-break:break-word}
.dong-ho .gg{font-size:13px;opacity:.9;line-height:1.5}
.dong-ho .vach{display:flex;gap:9px 26px;flex-wrap:wrap;margin-top:13px;
  padding-top:13px;border-top:1px solid rgba(255,255,255,.22)}
.dong-ho .vach div{font-size:12.5px;opacity:.9}
.dong-ho .vach b{display:block;font-size:17px;font-weight:800;opacity:1}
@media(max-width:640px){ .dong-ho .gt{font-size:29px} }

/* ── Thanh trượt mô phỏng ────────────────────────────────────────────────
   Không thêm thư viện: dùng <input type=range> gốc của trình duyệt. */
.mo-phong{display:flex;gap:13px;align-items:center;flex-wrap:wrap;margin:4px 0 13px}
.mo-phong input[type=range]{flex:1;min-width:210px;accent-color:var(--teal);height:22px}
.mo-phong .muc{font-size:13px;color:var(--xam);white-space:nowrap}
.mo-phong .muc b{font-size:19px;color:var(--teal-dam)}
.nut-nhanh{display:flex;gap:7px;flex-wrap:wrap}
.nut-nhanh button{padding:5px 13px;border:1.5px solid var(--vien);background:#fff;
  color:var(--teal-dam);border-radius:8px;font-weight:700;font-size:12.5px}
.nut-nhanh button:hover{border-color:var(--teal);background:#f0f9fa}
.nut-nhanh button.chon{background:var(--teal);color:#fff;border-color:var(--teal)}
/* Kết quả mô phỏng — con số này là GIẢ ĐỊNH nên phải trình bày như giả định,
   không được để lẫn với số đo thật ở trên. */
.ket-mo-phong{background:#f2f8f9;border:1px dashed var(--teal);border-radius:11px;
  padding:13px 15px;font-size:13.5px;line-height:1.6}
.ket-mo-phong .to{font-size:25px;font-weight:800;color:var(--teal-dam);
  display:block;margin:2px 0}

/* ── Khối cảnh báo điểm âm ───────────────────────────────────────────────
   418 khách điểm ÂM = đã tiêu nhiều hơn số từng tích. Có thể là lỗ hổng cho
   trừ quá số dư, nên tách hẳn ra một khối riêng chứ không nhét vào chú thích. */
.canh-am{background:#fdecec;border-left:4px solid var(--do);border-radius:10px;
  padding:13px 15px;font-size:13px;line-height:1.6;color:#8d3535}
.canh-am b{color:#a12727}
.canh-am .to{font-size:22px;font-weight:800;color:#b8302f}

/* Dòng trống của bảng — khi cờ không có dòng nào. */
.trong-bang{padding:24px;text-align:center;color:var(--xam);font-size:13.5px;
  background:#fcfdfd;border:1.5px dashed var(--vien);border-radius:11px}

/* ── Task 9: tab 5 Vùng · tab 6 Giao vận · tab 7 Cảnh báo ─────────────────
   ⚠ Bài học Task 8: `table-layout:fixed` + `width:100%` mà KHÔNG đặt min-width
   thì cột cuối bị đẩy khuất mép phải trên màn hẹp — và phép đo "cột lệch 0px"
   KHÔNG bắt được lỗi này vì mọi dòng đều khuất giống hệt nhau. Chỉ nhìn ảnh
   chụp mới thấy. Nên mỗi bảng phải tự khai min-width đủ rộng cho số cột của nó.

   Cách tính: cộng bề rộng tối thiểu đọc được của từng cột (cột tiền ~130px,
   cột chữ ~150px, cột số ~90px) rồi làm tròn lên. */
/* Thẻ số ở mức ĐỎ (nghi gian lận) — khác thẻ mức cam. Dùng chung một lớp cho
   cả hai mức thì thẻ có chấm đỏ mà con số lại vàng cam, người đọc hiểu nhầm
   mức nghiêm trọng. Màu ở đây là màu BÁO TRẠNG THÁI, đúng mục 1 của chuẩn. */
.so-lon.nguy{border-top-color:var(--do)}
.so-lon.nguy .gia-tri{color:#b8302f}

table.bh.w-vung{min-width:1080px}    /* 7 cột: vùng, khách, đơn, doanh thu, %, bình quân, loại */
/* Task 10 nới từ 1120px: bảng khách ngủ đông nay có 8 cột (thêm "Đã từng mua"
   là số tiền tới 10 chữ số và "Số đơn"). Giữ 1120px thì cột tiền bị cắt cụt
   giữa số — đúng lỗi đã mắc ở bảng KPI của Task 7. */
table.bh.w-ngu{min-width:1260px}     /* 8 cột khách ngủ đông */
table.bh.w-thang{min-width:1000px}   /* 6 cột theo tháng, 4 cột tiền */
table.bh.w-quan{min-width:1040px}    /* 6 cột theo quận */
table.bh.w-chanh{min-width:820px}    /* 4 cột nhà xe */
table.bh.w-tt{min-width:860px}       /* 4 cột tình trạng giao */
table.bh.w-cb{min-width:1180px}      /* 6 cột bảng xếp hạng cảnh báo */
table.bh.w-nap{min-width:1020px}     /* 6 cột nhật ký nạp */

/* ════════════════════════════════════════════════════════════════════════
   TAB KHAI BÁO (Task 10) — 6 bảng luật quản trị tự chỉnh
   ════════════════════════════════════════════════════════════════════════ */

/* Mỗi khai báo là một khối riêng, ngăn nhau rõ ràng để Sếp không sửa nhầm
   bảng này tưởng bảng kia. Viền teal nhạt theo đúng hệ màu ĐƠN SẮC của chuẩn
   giao diện — KHÔNG cấp cho mỗi khai báo một màu riêng (mục 1: nhiều đối
   tượng cùng loại dùng chung một tông, phân biệt bằng icon + tên in đậm). */
.khoi-kb{border:1.5px solid var(--vien);border-radius:11px;padding:0;
  margin-top:15px;overflow:hidden;background:#fff}
.khoi-kb > .dau{display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  padding:11px 14px;background:#f3f7f8;border-bottom:1.5px solid var(--vien)}
.khoi-kb > .dau .bieu{font-size:18px;line-height:1}
.khoi-kb > .dau h3{margin:0;font-size:14.5px;font-weight:800;color:var(--teal-dam)}
.khoi-kb > .dau .dem{margin-left:auto;font-size:12px;font-weight:700;
  color:var(--teal);background:#fff;border:1.5px solid var(--vien);
  border-radius:999px;padding:3px 11px;white-space:nowrap}
.khoi-kb > .than{padding:13px 14px}
.khoi-kb .giai{font-size:12.5px;color:var(--xam);line-height:1.55;margin:0 0 11px}

/* Ô dán nhiều dòng (danh sách mã KH). Dùng phông đơn cách để mã thẳng hàng —
   mắt bắt ngay dòng nào lệch chuẩn khi dán từ Excel. */
.o-dan{width:100%;min-height:132px;padding:10px 11px;border:1.5px solid var(--vien);
  border-radius:9px;outline:none;font-family:ui-monospace,Consolas,monospace;
  font-size:13px;line-height:1.5;resize:vertical;background:#fcfdfd}
.o-dan:focus{border-color:var(--teal);background:#fff}

/* Hàng nút thao tác của mỗi khối. */
.hang-nut{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-top:11px}
.hang-nut .ghi-chu{font-size:12px;color:var(--xam)}

/* Kết quả sau khi lưu: bao nhiêu mã hợp lệ / bao nhiêu mã lạ.
   Ba mức dùng đúng bảng màu báo trạng thái của chuẩn, không thêm màu mới. */
.kq-kb{margin-top:11px;padding:10px 12px;border-radius:9px;font-size:12.5px;
  line-height:1.6;display:none}
.kq-kb.hien{display:block}
.kq-kb.ok{background:#eef8f4;border-left:3px solid #1f8a5f;color:#14543b}
.kq-kb.canh{background:var(--vang);border-left:3px solid var(--cam);color:#6d4a00}
.kq-kb.xau{background:#fdeeee;border-left:3px solid var(--do);color:#8a2422}
.kq-kb b{font-weight:800}
.kq-kb ul{margin:6px 0 0;padding-left:19px}
.kq-kb code{background:#fff;border:1px solid var(--vien);border-radius:4px;
  padding:1px 5px;font-size:12px}

/* Bảng cặp "viết sai → viết đúng" của 3 khai báo chuẩn hoá. */
table.bh.w-cap{min-width:760px}      /* 4 cột: viết sai, viết đúng, ai sửa, thao tác */
/* ⚠ `td{overflow:hidden;text-overflow:ellipsis}` đặt chung ở trên sẽ NUỐT MẤT
   nút trong ô thao tác (CHUAN-GIAO-DIEN mục 2.4). Ô chứa nút phải mở lại. */
table.bh td.thao-tac{overflow:visible;text-overflow:clip}
.nut-xoa{padding:4px 10px;border:1.5px solid #e6c3c3;background:#fff;color:#b8302f;
  border-radius:7px;font-weight:700;font-size:12px;white-space:nowrap}
.nut-xoa:hover{background:#fdeeee}

/* Ô nhập cặp mới + ô nhập số (ngưỡng %). */
.hang-them{display:flex;gap:9px;align-items:flex-end;flex-wrap:wrap;margin-top:12px}
.hang-them .o-loc input{min-width:190px}
.o-so{width:120px;padding:8px 10px;border:1.5px solid var(--vien);border-radius:8px;
  outline:none;font-weight:700;font-size:14px;text-align:right}
.o-so:focus{border-color:var(--teal)}

/* Khối "chỉ quản trị mới thấy" — nói rõ vì sao tab này khác các tab kia. */
.chi-qt{padding:11px 13px;border-radius:9px;font-size:12.5px;line-height:1.55;
  background:#eef7f8;border-left:3px solid var(--teal);color:#134650;margin-top:11px}

@media(max-width:900px){
  .khoi-kb > .dau .dem{margin-left:0;width:100%}
}

@media(max-width:640px){
  .so-lon .gia-tri{font-size:22px}
  table.bh th,table.bh td{padding:7px 7px;font-size:12.5px}
  .the-co .so{font-size:21px}
  .o-tien .gt{font-size:22px}
}