/* ============================================================
   TRANG QUẢN TRỊ — trang thứ 2 của anh Tiền (NK-200, 04/09/2026)
   ------------------------------------------------------------
   Anh Tiền giao: "màn hình quản trị theo đúng logo SBH chuẩn, kiểu thiết kế
   của kathy.sbhtailor.vn" kèm ảnh mẫu (sidebar tối, hàng thẻ KPI, biểu đồ,
   bảng). Ba luật màu của trang này:

   1. MÀU THƯƠNG HIỆU LẤY TỪ LOGO THẬT, không lấy từ tenant config.
      src/assets/sbh-logo.png là mảng đặc một màu #2E3192 (chàm). Trong khi
      tenant.sbh.js đang khai primaryBrand '#D12132' (đỏ) — đỏ đó KHÔNG có
      trong logo. Trang này bám logo nên dùng #2E3192; không sửa tenant config
      vì các trang khác đang dựa vào nó (đổi là đụng việc phiên khác).

   2. KHÔNG dùng chàm thương hiệu cho đèn trạng thái. Vẫn xài đúng bộ đèn
      giao thông của base.css (--den-do/--den-vang/--den-xanh) — trang quản trị
      mà tự chế màu cảnh báo là phá ngôn ngữ chung của cả cửa.

   3. Tách hẳn tệp này khỏi components.css. components.css đang có phiên khác
      sửa (BÀN 5.0) — chen vào là giẫm chân. Tệp riêng, tiền tố .qt-, không
      lớp nào rò ra ngoài trang.
   ============================================================ */
:root {
  --qt-brand: #2E3192;        /* ĐO TỪ LOGO — không đoán, không lấy từ tenant */
  --qt-brand-dam: #1B1D52;
  --qt-brand-nhat: #EEF0FB;
  --qt-nen: #F4F6FB;
  --qt-vien: #E6E9F2;
  --qt-chu-mo: #6B7285;
}

/* ---------- Khung: cột trái tối + thân phải ---------- */
.qt-shell {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  min-height: 100dvh;
  background: var(--qt-nen);
  color: var(--ink);
  font-size: 14px;
}
.qt-shell.qt-thu-gon { grid-template-columns: 0 minmax(0, 1fr); }

/* ---------- Cột trái ---------- */
.qt-side {
  background: linear-gradient(180deg, var(--qt-brand) 0%, #262a75 55%, var(--qt-brand-dam) 100%);
  color: #fff;
  display: flex; flex-direction: column;
  overflow: hidden;
  position: sticky; top: 0; height: 100dvh;
}
.qt-shell.qt-thu-gon .qt-side { display: none; }
.qt-logo {
  display: flex; align-items: center; gap: 10px;
  padding: 18px 16px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
/* Logo là mảng chàm trên nền trong suốt → đặt lên nền chàm sẽ TÀNG HÌNH.
   Đảo sang trắng bằng filter thay vì kèm thêm một tệp ảnh trắng thứ hai
   (một tệp logo duy nhất trong kho = không bao giờ lệch phiên bản). */
.qt-logo img { width: 34px; height: 34px; object-fit: contain; filter: brightness(0) invert(1); }
.qt-logo-ten { font-size: 20px; font-weight: 800; letter-spacing: .16em; line-height: 1; }
.qt-logo-phu { font-size: 8.5px; letter-spacing: .16em; color: rgba(255, 255, 255, .66); margin-top: 3px; }
.qt-nav { flex: 1; overflow-y: auto; padding: 10px 0 24px; }
.qt-nav::-webkit-scrollbar { width: 6px; }
.qt-nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .18); border-radius: 999px; }
.qt-nav-nhom { padding: 14px 18px 6px; font-size: 10px; font-weight: 700; letter-spacing: .12em; color: rgba(255, 255, 255, .45); }
.qt-nav-muc {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 9px 18px; border: 0; background: none; cursor: pointer;
  color: rgba(255, 255, 255, .82); font: inherit; font-size: 13.5px; text-align: left;
  border-left: 3px solid transparent;
}
.qt-nav-muc:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.qt-nav-muc.qt-dang {
  background: rgba(255, 255, 255, .14); color: #fff; font-weight: 650;
  border-left-color: #fff;
}
.qt-nav-icon { width: 18px; text-align: center; font-size: 14px; opacity: .95; }
.qt-nav-dem {
  margin-left: auto; min-width: 20px; padding: 1px 6px; border-radius: 999px;
  background: #E5484D; color: #fff; font-size: 10.5px; font-weight: 700; text-align: center;
}
.qt-side-chan {
  padding: 12px 18px 16px; border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: 11px; color: rgba(255, 255, 255, .5); line-height: 1.5;
}

/* ---------- Thanh trên ---------- */
.qt-main { min-width: 0; display: flex; flex-direction: column; }
.qt-top {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 14px;
  padding: 10px 20px; background: #fff; border-bottom: 1px solid var(--qt-vien);
}
.qt-burger {
  border: 0; background: none; cursor: pointer; font-size: 19px; line-height: 1;
  color: #444; padding: 6px 4px; border-radius: 8px;
}
.qt-burger:hover { background: #f1f2f7; }
.qt-tim { flex: 1; max-width: 520px; position: relative; }
.qt-tim input {
  width: 100%; height: 38px; padding: 0 12px 0 36px;
  border: 1px solid var(--qt-vien); border-radius: 10px; background: #F8F9FC;
  font: inherit; font-size: 13.5px; color: var(--ink);
}
.qt-tim input:focus { outline: none; border-color: var(--qt-brand); background: #fff; }
.qt-tim::before {
  content: "🔍"; position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  font-size: 13px; opacity: .55; pointer-events: none;
}
.qt-top-phai { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.qt-chuong { position: relative; border: 0; background: none; cursor: pointer; font-size: 17px; padding: 6px 8px; border-radius: 8px; }
.qt-chuong:hover { background: #f1f2f7; }
.qt-chuong-dem {
  position: absolute; top: 1px; right: 1px; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px; background: #E5484D; color: #fff;
  font-size: 10px; font-weight: 700; line-height: 16px; text-align: center;
}
.qt-toi { display: flex; align-items: center; gap: 9px; padding-left: 10px; border-left: 1px solid var(--qt-vien); }
.qt-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--qt-brand); color: #fff;
  display: grid; place-items: center; font-weight: 700; font-size: 14px;
}
.qt-toi-ten { font-size: 13px; font-weight: 650; line-height: 1.25; }
.qt-toi-vai { font-size: 11px; color: var(--qt-chu-mo); }

/* ---------- Thân ---------- */
.qt-than { padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.qt-chao { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.qt-chao h1 { margin: 0; font-size: 22px; font-weight: 750; }
.qt-chao p { margin: 3px 0 0; color: var(--qt-chu-mo); font-size: 13.5px; }
.qt-chao-ngay { text-align: right; font-size: 13px; }
.qt-chao-ngay b { display: block; font-weight: 650; }
.qt-chao-ngay i { color: var(--qt-chu-mo); font-size: 12.5px; }

/* Thẻ chung */
.qt-the {
  background: #fff; border: 1px solid var(--qt-vien); border-radius: 12px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
.qt-the-dau {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 16px 11px; border-bottom: 1px solid var(--qt-vien);
}
.qt-the-dau h2 { margin: 0; font-size: 15px; font-weight: 700; }
.qt-the-than { padding: 14px 16px; }
.qt-the-lien { margin-left: auto; font-size: 12.5px; color: var(--qt-brand); font-weight: 600; background: none; border: 0; cursor: pointer; padding: 0; }
.qt-the-lien:hover { text-decoration: underline; }
.qt-nguon { font-size: 11px; color: var(--qt-chu-mo); padding: 0 16px 11px; line-height: 1.45; }

/* ---------- Hàng thẻ KPI ---------- */
.qt-kpi-hang { display: grid; grid-template-columns: repeat(auto-fit, minmax(172px, 1fr)); gap: 14px; }
/* Màn rộng: ép ĐÚNG 6 cột như ảnh mẫu. Để auto-fit tự chia thì 1440px ra 5 cột,
   thẻ thứ 6 rơi xuống một mình — hàng KPI gãy đôi, mất dáng "một dải chỉ số". */
@media (min-width: 1240px) { .qt-kpi-hang { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.qt-kpi { display: flex; gap: 12px; padding: 14px 15px; align-items: flex-start; }
.qt-kpi-icon {
  width: 40px; height: 40px; flex: none; border-radius: 10px;
  display: grid; place-items: center; font-size: 18px;
  background: var(--qt-brand-nhat); color: var(--qt-brand);
}
.qt-kpi-nhan { font-size: 12.5px; color: var(--qt-chu-mo); }
.qt-kpi-so { font-size: 22px; font-weight: 750; line-height: 1.25; margin-top: 1px; word-break: break-word; }
.qt-kpi-phu { font-size: 12px; margin-top: 3px; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.qt-kpi-phu .qt-len { color: var(--den-xanh); font-weight: 650; }
.qt-kpi-phu .qt-xuong { color: var(--den-do); font-weight: 650; }
.qt-kpi-phu .qt-bang { color: var(--qt-chu-mo); font-weight: 650; }
.qt-kpi-phu small { color: var(--qt-chu-mo); }

/* ---------- Lưới hàng 2 / 3 / 4 ---------- */
.qt-luoi-2 { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.15fr); gap: 14px; }
.qt-luoi-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; }
.qt-luoi-4 { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 14px; }

/* ---------- Biểu đồ ---------- */
.qt-bieudo { width: 100%; height: auto; display: block; overflow: visible; }
.qt-chugiai { display: flex; gap: 16px; flex-wrap: wrap; padding: 8px 16px 0; font-size: 12px; color: var(--qt-chu-mo); }
.qt-chugiai span { display: flex; align-items: center; gap: 6px; }
.qt-cham { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.qt-cham-tron { border-radius: 50%; }
.qt-donut-giua { text-align: center; }
.qt-donut-so { font-size: 21px; font-weight: 750; }
.qt-donut-nhan { font-size: 11px; fill: var(--qt-chu-mo); }
.qt-donut-hang { display: flex; align-items: center; gap: 8px; font-size: 12.5px; padding: 4px 0; }
.qt-donut-hang b { margin-left: auto; font-weight: 650; }

/* ---------- Danh sách việc / thông báo ---------- */
.qt-ds { list-style: none; margin: 0; padding: 0; }
.qt-ds li {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 16px; border-bottom: 1px solid #F1F3F8;
}
.qt-ds li:last-child { border-bottom: 0; }
.qt-viec-icon {
  width: 30px; height: 30px; flex: none; border-radius: 8px;
  display: grid; place-items: center; font-size: 14px;
  background: var(--qt-brand-nhat); color: var(--qt-brand);
}
.qt-viec-icon.qt-do { background: var(--den-do-nen); color: var(--den-do); }
.qt-viec-icon.qt-vang { background: var(--den-vang-nen); color: var(--den-vang); }
.qt-viec-icon.qt-xanh { background: var(--den-xanh-nen); color: var(--den-xanh); }
.qt-viec-ten { font-size: 13.5px; font-weight: 600; line-height: 1.35; }
.qt-viec-phu { font-size: 12px; color: var(--qt-chu-mo); margin-top: 2px; }
.qt-viec-dem {
  margin-left: auto; align-self: center; min-width: 22px; padding: 1px 7px;
  border-radius: 999px; background: var(--den-do-nen); color: var(--den-do);
  font-size: 11.5px; font-weight: 700; text-align: center;
}
.qt-tb-cham { width: 8px; height: 8px; border-radius: 50%; flex: none; margin-top: 6px; background: var(--qt-brand); }
.qt-tb-gio { margin-left: auto; align-self: flex-start; font-size: 11.5px; color: var(--qt-chu-mo); white-space: nowrap; }

/* ---------- Thanh ngang phòng ban ---------- */
.qt-thanh-hang { display: flex; align-items: center; gap: 10px; padding: 5px 0; font-size: 13px; }
.qt-thanh-ten { width: 116px; flex: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qt-thanh-ray { flex: 1; height: 9px; border-radius: 999px; background: #EEF0F6; overflow: hidden; }
.qt-thanh-day { height: 100%; border-radius: 999px; background: var(--qt-brand); }
.qt-thanh-so { width: 26px; text-align: right; font-weight: 650; font-size: 12.5px; }

/* ---------- Tình trạng hệ thống ---------- */
.qt-tt-hang { display: flex; align-items: center; gap: 9px; padding: 7px 0; font-size: 13px; border-bottom: 1px solid #F1F3F8; }
.qt-tt-hang:last-child { border-bottom: 0; }
/* Tên máy/nhà cung cấp là thứ phải đọc được TRƯỚC — chiếm cả dòng, ghi chú xuống
   dưới, trạng thái mới là phần co lại. Trước đó tên bị bóp thành "NA…". */
.qt-tt-noi { flex: 1 1 auto; min-width: 0; }
.qt-tt-ten { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qt-tt-ghi { font-size: 11.5px; color: var(--qt-chu-mo); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qt-tt-den { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.qt-tt-den.ok { background: var(--den-xanh); }
.qt-tt-den.canh { background: var(--den-vang); }
.qt-tt-den.hong { background: var(--den-do); }
.qt-tt-trang { font-size: 12.5px; color: var(--qt-chu-mo); flex: 0 1 auto; max-width: 46%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qt-tt-so { font-size: 12.5px; font-weight: 650; color: var(--qt-chu-mo); white-space: nowrap; }

/* ---------- Bảng ---------- */
.qt-bang-cuon { overflow-x: auto; }
.qt-bang { width: 100%; border-collapse: collapse; font-size: 13px; }
.qt-bang th {
  text-align: left; font-size: 11.5px; font-weight: 700; letter-spacing: .03em;
  color: var(--qt-chu-mo); padding: 9px 12px; border-bottom: 1px solid var(--qt-vien);
  white-space: nowrap; background: #FAFBFD;
}
.qt-bang td { padding: 10px 12px; border-bottom: 1px solid #F1F3F8; vertical-align: middle; }
.qt-bang tr:last-child td { border-bottom: 0; }
.qt-bang code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.qt-vi {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 650; white-space: nowrap;
  background: #EEF0F6; color: #4a5064;
}
.qt-vi.ok { background: var(--den-xanh-nen); color: var(--den-xanh); }
.qt-vi.canh { background: var(--den-vang-nen); color: var(--den-vang); }
.qt-vi.hong { background: var(--den-do-nen); color: var(--den-do); }
.qt-vi.tin { background: #E8F0FE; color: var(--info); }

/* ---------- Trạng thái rỗng / đang tải / lỗi ---------- */
/* Tấm che sau ngăn kéo — chỉ sống ở màn hẹp lúc ngăn kéo mở (xem media query dưới).
   Mặc định phải display:none, nếu không trên máy tính nó thành một ô lưới trống. */
.qt-man { display: none; }

.qt-rong { padding: 18px 16px; font-size: 13px; color: var(--qt-chu-mo); line-height: 1.55; }
/* 07/09 (NK-283): "chưa lấy được số" KHÔNG được nhìn giống "không có gì". Ô trống bình
   thường màu mờ; ô lỗi phải có màu cảnh báo và vạch bên trái để mắt tách được ngay — vì
   hai câu đó dẫn tới hai quyết định trái ngược nhau. */
.qt-rong.sk-loi { color: var(--den-vang); background: var(--den-vang-nen);
  border-left: 3px solid var(--den-vang); border-radius: 6px; padding: 12px 14px; }
.qt-loi { padding: 12px 16px; font-size: 12.5px; color: var(--den-do); background: var(--den-do-nen); line-height: 1.5; }
.qt-xuong-tai { display: block; height: 12px; border-radius: 6px; background: linear-gradient(90deg, #EDEFF5 25%, #F6F7FB 50%, #EDEFF5 75%); background-size: 200% 100%; animation: qt-nhap 1.2s linear infinite; }
@keyframes qt-nhap { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ---------- Màn hẹp ---------- */
@media (max-width: 1180px) {
  .qt-luoi-2 { grid-template-columns: minmax(0, 1fr); }
  .qt-luoi-4 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  /* Điện thoại/máy tính bảng: cột trái thu về ngăn kéo, mở bằng nút ☰.
     KHÔNG để cột 236px chiếm nửa màn — anh Tiền hay mở trên điện thoại. */
  .qt-shell { grid-template-columns: minmax(0, 1fr); }
  .qt-side {
    position: fixed; top: 0; left: 0; width: 236px; z-index: 60;
    transform: translateX(-100%); transition: transform .2s ease;
  }
  .qt-shell.qt-mo-ngan .qt-side { transform: translateX(0); display: flex; }
  .qt-shell.qt-thu-gon .qt-side { display: flex; }
  .qt-shell.qt-mo-ngan .qt-man {
    display: block; position: fixed; inset: 0;
    background: rgba(15, 18, 45, .45); z-index: 55; border: 0;
  }
  .qt-than { padding: 14px; }
  .qt-tim { max-width: none; }
  .qt-toi-ten, .qt-toi-vai { display: none; }
  .qt-chao h1 { font-size: 19px; }
}
@media (max-width: 640px) {
  .qt-kpi-hang { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .qt-kpi-so { font-size: 19px; }
  .qt-burger, .qt-chuong { min-width: 40px; min-height: 40px; }
}

/* ============================================================
   BÀN VẬN HÀNH NẰM TRONG KHUNG MỘT CỬA (04/09/2026)
   ------------------------------------------------------------
   Anh Tiền: "#/operation/today cái này cũng mất menu". Bàn giờ bọc vào khung,
   nhưng bàn là trang KHOÁ CHIỀU CAO MÀN (layout.css: .page-today{height:100dvh;
   overflow:hidden} từ 900px, hai cột tự cuộn bên trong). Khung thì mặc định
   min-height:100dvh — cộng thêm thanh trên là bàn tràn khỏi màn, đúng lại lỗi
   "ô nhập tụt khỏi màn hình" đã sửa hai lần hồi 30-31/08.
   Nên ở chế độ .qt-khoa-man: khung cao ĐÚNG 100dvh, và bàn ăn PHẦN CÒN LẠI sau
   thanh trên (flex:1 + min-height:0) thay vì tự đòi 100dvh lần nữa.
   Chỉ áp từ 900px — dưới đó bàn vốn chảy tự nhiên, không khoá gì cả.
   ============================================================ */
@media (min-width: 900px) {
  .qt-shell.qt-khoa-man { height: 100dvh; min-height: 0; overflow: hidden; }
  .qt-shell.qt-khoa-man .qt-main { min-height: 0; overflow: hidden; }
  .qt-shell.qt-khoa-man .one-page.page-today {
    height: auto; min-height: 0; flex: 1 1 auto; overflow: hidden;
  }
}

/* Dải tôn chỉ trên thanh — giữ đúng chữ anh Tiền đòi ngày 29/08 khi bàn vận hành
   không còn dựng ContextHeader nữa. Màn hẹp thì ẩn: thanh trên còn phải chứa ô
   tìm, chuông và tên người dùng. */
.qt-dai { display: none; align-items: center; gap: 10px; white-space: nowrap; }
.qt-dai-focus {
  font-size: 10.5px; font-weight: 800; letter-spacing: .1em; color: var(--qt-brand);
  background: var(--qt-brand-nhat); padding: 4px 9px; border-radius: 999px;
}
.qt-dai-motto { font-size: 12.5px; color: var(--qt-chu-mo); }
@media (min-width: 1280px) { .qt-dai { display: flex; } }

/* ---------- Học từ cowork.agrostore.vn (04/09/2026) ---------- */
/* Thanh tiến độ trong thẻ chỉ số: nhìn ra "còn bao xa" mà không phải đọc số.
   CHỈ vẽ cho thẻ có đích thật — thẻ không đích mà có thanh là hình trang trí. */
.qt-tien { display: block; height: 6px; border-radius: 999px; background: #EEF0F6; overflow: hidden; margin: 6px 0 2px; }
.qt-tien i { display: block; height: 100%; border-radius: 999px; background: var(--den-xanh); }
.qt-tien-xau i { background: var(--den-do); }

/* Nút tải lại — bàn điều khiển phải xem lại được số mà không phải tải cả trang */
.qt-tai-lai {
  margin-top: 6px; border: 1px solid var(--qt-vien); background: #fff; cursor: pointer;
  border-radius: 8px; padding: 4px 10px; font: inherit; font-size: 12px; color: var(--qt-chu-mo);
}
.qt-tai-lai:hover { border-color: var(--qt-brand); color: var(--qt-brand); }

/* Câu chốt: số này đọc lúc nào */
.qt-dau-gio { margin: 2px 0 0; font-size: 12px; color: var(--qt-chu-mo); line-height: 1.5; }

/* ============================================================
   CỬA NHẬP TRI THỨC (NK-218, 04/09/2026) — nằm trong khung một cửa.
   Hai cột: bên trái viết, bên phải xem kho. Màn hẹp thì xếp dọc, ô viết lên trước
   — người vào đây để VIẾT, không phải để đọc kho.
   ============================================================ */
.tt-luoi { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); align-items: start; }
.tt-cot { display: grid; gap: 14px; align-items: start; }
@media (min-width: 1080px) { .tt-luoi { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } }

.tt-mau { display: flex; flex-direction: column; gap: 4px; }
.tt-nhan { font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--qt-chu-mo); margin-top: 10px; }
.tt-nhan:first-child { margin-top: 0; }
.tt-o {
  width: 100%; font: inherit; font-size: 14px; color: var(--ink);
  padding: 9px 11px; border: 1px solid var(--qt-vien); border-radius: 8px; background: #fff;
}
.tt-o:focus { outline: none; border-color: var(--qt-brand); box-shadow: 0 0 0 3px rgba(46, 49, 146, .12); }
.tt-vung { resize: vertical; min-height: 220px; line-height: 1.6; font-family: inherit; }
.tt-goi, .tt-ngan-mo { margin: 3px 0 0; font-size: 12px; color: var(--qt-chu-mo); line-height: 1.5; }
.tt-ngan-mo.tt-khoa { color: var(--den-vang); font-weight: 600; }
.tt-chan-mau { display: flex; align-items: center; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.tt-dem { font-size: 12px; color: var(--qt-chu-mo); font-variant-numeric: tabular-nums; }
.tt-dem-it { color: var(--den-vang); }
.tt-nut {
  border: 1px solid var(--qt-vien); background: #fff; border-radius: 8px;
  padding: 9px 16px; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; color: var(--ink);
}
.tt-nut-chinh { margin-left: auto; background: var(--qt-brand); border-color: var(--qt-brand); color: #fff; }
.tt-nut-chinh:hover { background: var(--qt-brand-dam); }
.tt-nut:disabled { opacity: .6; cursor: default; }

.tt-bao { margin: 10px 0 0; padding: 10px 12px; border-radius: 8px; font-size: 13px; line-height: 1.55; }
.tt-bao-tot { background: var(--den-xanh-nen); color: var(--den-xanh); }
.tt-bao-xau { background: var(--den-do-nen); color: var(--den-do); }

.tt-hd { margin: 0; padding-left: 20px; font-size: 13.5px; color: var(--qt-chu-mo); line-height: 1.6; }
.tt-hd li { margin: 7px 0; }
.tt-hd b { color: var(--ink); }
.tt-luu-y {
  margin: 14px 0 0; padding: 10px 12px; border-radius: 8px;
  background: var(--den-vang-nen); color: var(--den-vang);
  font-size: 12.5px; line-height: 1.55;
}

.tt-nhom { border-top: 1px solid var(--qt-vien); }
.tt-nhom-dau {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px 6px; font-size: 13.5px;
}
.tt-nhom-dem {
  margin-left: auto; font-size: 11.5px; font-weight: 700; color: var(--qt-brand);
  background: var(--qt-brand-nhat); border-radius: 999px; padding: 1px 9px;
  font-variant-numeric: tabular-nums;
}
.tt-ds { padding: 0 16px 10px; }
.tt-dong {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 0; border-top: 1px solid #F1F3F8; font-size: 13px;
}
.tt-dong:first-child { border-top: 0; }
.tt-dong-ten { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--qt-chu-mo); }

/* Sửa/xoá tri thức (NK-218, 05/09) — nút chỉ hiện ở mục viết tay; mục nạp từ tệp
   ghi rõ "từ tệp" vì bộ nạp sẽ dựng lại, sửa ở đây là vô ích. */
.tt-viec { display: flex; gap: 4px; flex: none; }
.tt-nut-nho {
  border: 1px solid var(--qt-vien); background: #fff; border-radius: 6px;
  padding: 1px 8px; font: inherit; font-size: 11.5px; font-weight: 600;
  cursor: pointer; color: var(--qt-brand);
}
.tt-nut-nho:hover { border-color: var(--qt-brand); background: var(--qt-brand-nhat); }
.tt-nut-xoa { color: var(--den-do); }
.tt-nut-xoa:hover { border-color: var(--den-do); background: var(--den-do-nen); }
.tt-tu-tep {
  flex: none; font-size: 11px; color: var(--qt-chu-mo);
  background: #F1F3F8; border-radius: 999px; padding: 1px 8px; cursor: help;
}
.tt-luu-y-do { background: var(--den-do-nen); color: var(--den-do); }

/* NK-236 (05/09): mục vừa lưu/sửa TÔ SÁNG để anh thấy ngay nó nằm đâu trong kho;
   ngăn dài có nút "Hiện thêm" thay cho câu "dùng ô tìm" (ô tìm nay lọc trên toàn bộ kho). */
.tt-dong-moi { background: var(--den-xanh-nen); border-radius: 6px; padding-left: 6px; padding-right: 6px; }
.tt-dong-moi .tt-dong-ten { color: var(--den-xanh); font-weight: 600; }
.tt-them { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0; padding: 8px 0 0; }

/* NK-237 (05/09): đọc tại chỗ (bấm tên mục / nút Xem), nháp tự lưu, ngăn gập/mở, nút Tải lại. */
.tt-tim-hang { display: flex; gap: 8px; align-items: center; }
.tt-tim-hang .tt-o { flex: 1 1 auto; min-width: 0; }
.tt-tim-hang .tt-nut-nho { flex: none; padding: 7px 10px; }
.tt-dong-ten { cursor: pointer; }
.tt-dong-ten:hover, .tt-dong-ten:focus { color: var(--qt-brand); text-decoration: underline; outline: none; }
.tt-dong-xem { background: var(--qt-brand-nhat); border-radius: 6px; padding-left: 6px; padding-right: 6px; }
.tt-dong-xem .tt-dong-ten { color: var(--qt-brand); font-weight: 600; }
.tt-nhom-dau { cursor: pointer; user-select: none; }
.tt-nhom-dau:hover b { color: var(--qt-brand); }
.tt-gap { width: 12px; flex: none; color: var(--qt-chu-mo); font-size: 12px; }
.tt-tu-viet-dem { font-size: 11px; color: var(--den-xanh); background: var(--den-xanh-nen); border-radius: 999px; padding: 1px 8px; white-space: nowrap; }
.tt-xem { margin: 0 16px 12px; border: 1px solid var(--qt-vien); border-radius: 10px; background: #fff; }
.tt-xem .qt-the-dau h2 { overflow-wrap: anywhere; }
.tt-xem-meta { margin: 0 0 8px; font-size: 12px; color: var(--qt-chu-mo); line-height: 1.5; }
.tt-doc {
  margin: 8px 0 0; padding: 12px; border: 1px solid var(--qt-vien); border-radius: 8px; background: #FAFBFD;
  font: inherit; font-size: 13.5px; line-height: 1.6; color: var(--ink);
  white-space: pre-wrap; overflow-wrap: anywhere; max-height: 60vh; overflow: auto;
}
.tt-nut-xoa-lon { color: var(--den-do); border-color: var(--den-do); }
.tt-nut-xoa-lon:hover { background: var(--den-do-nen); }
.tt-bao-nhap { background: var(--qt-brand-nhat); color: var(--qt-brand); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* NK-237 (05/09, anh Tiền báo "không vừa khuôn Chrome"): ô lưới mặc định min-width:auto = độ rộng
   nội dung KHÔNG xuống dòng, nên thẻ kho phình bằng tên tệp dài nhất (đo thật: cột 480px mà thẻ 993px),
   tên không được cắt "…" và cả trang tràn ngang. Cho lưới/cột/thẻ phép co về 0 thì .tt-dong-ten mới cắt được. */
.tt-luoi, .tt-cot, .tt-cot > .qt-the { min-width: 0; }
.tt-cot > .qt-the { max-width: 100%; }

/* ============================================================
   ĐÍCH ĐẾN (NK-223, 05/09/2026) — kim chỉ nam của doanh nghiệp.
   Chưa điền thì khối phải NHÌN RA NGAY là còn thiếu, không lẫn vào các thẻ khác:
   đây là mục anh Tiền chốt "phải up vào trước tiên".
   ============================================================ */
.dd-cau { padding: 14px 0; border-top: 1px solid var(--qt-vien); }
.dd-cau:first-of-type { border-top: 0; padding-top: 4px; }
.dd-hoi { margin: 0 0 3px; font-size: 15.5px; font-weight: 700; }
.dd-phu { margin: 0 0 8px; font-size: 13px; color: var(--qt-chu-mo); }
.dd-goi { margin: 6px 0 0; font-size: 12px; color: var(--qt-chu-mo); line-height: 1.5; }
.dd-o { min-height: 90px; }
.dd-o[readonly] { background: #FAFBFD; color: var(--qt-chu-mo); }

.dd-trangthai { margin: 0 0 14px; padding: 10px 12px; border-radius: 8px; font-size: 13px; line-height: 1.55; }
.dd-xong { background: var(--den-xanh-nen); color: var(--den-xanh); }
.dd-chua { background: var(--den-vang-nen); color: var(--den-vang); font-weight: 600; }

/* Khối mời điền trên bàn quản trị — cố ý to và rõ, vì trống nghĩa là doanh nghiệp
   chưa trả lời được câu hỏi nền tảng nhất. */
.dd-moi { text-align: center; padding: 22px 16px; }
.dd-moi-chu { margin: 0; font-size: 13px; color: var(--qt-chu-mo); }
.dd-moi-hoi {
  margin: 6px 0 8px; font-size: 19px; font-weight: 750; color: var(--qt-brand);
  text-wrap: balance;
}
.dd-moi-phu { margin: 0 auto 14px; max-width: 52ch; font-size: 13px; color: var(--qt-chu-mo); line-height: 1.55; }

.dd-tt-muc { padding: 9px 0; border-top: 1px solid #F1F3F8; }
.dd-tt-muc:first-child { border-top: 0; padding-top: 0; }
.dd-tt-hoi { font-size: 11.5px; font-weight: 700; letter-spacing: .03em; color: var(--qt-chu-mo); }
.dd-tt-tra { margin: 3px 0 0; font-size: 13.5px; line-height: 1.6; white-space: pre-wrap; }

/* ---- ĐÍCH ĐẾN: bốn mốc lợi nhuận (05/09) ---- */
.dd-tien-khung { padding: 16px 0 4px; border-top: 1px solid var(--qt-vien); }
.dd-moc-hang { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 4px 0 12px; }
.dd-moc {
  border: 1px solid var(--qt-vien); border-radius: 10px; padding: 10px 11px 11px;
  background: #FCFDFF;
}
/* Mốc 12 tháng là GỐC — ba mốc kia đo bằng nó, nên nó phải trông ra là gốc. */
.dd-moc-goc { border-color: var(--qt-brand); background: var(--qt-brand-nhat); }
.dd-moc-ten { font-size: 13px; font-weight: 700; }
.dd-moc-nam { font-size: 11px; color: var(--qt-chu-mo); margin-bottom: 7px; }
.dd-tien { width: 100%; font-size: 14px; font-weight: 600; padding: 7px 9px; }
.dd-tien[readonly] { background: #FAFBFD; color: var(--qt-chu-mo); font-weight: 500; }

.dd-nhac { margin: 0 0 10px; }
.dd-nhac-dong {
  margin: 0 0 7px; font-size: 13px; line-height: 1.55;
  padding: 8px 10px; border-radius: 8px; background: #F7F9FC;
}
.dd-nhac-phu { color: var(--qt-chu-mo); }
/* Nhịp tăng: câu quan trọng nhất của khối này — nó nói phải LÀM KHÁC hay LÀM TỐT HƠN. */
.dd-nhip { display: block; margin-top: 4px; font-size: 12.5px; line-height: 1.5; font-weight: 600; }
.dd-nhip-nhe { color: var(--den-xanh); }
.dd-nhip-vua { color: var(--den-vang); }
.dd-nhip-gat { color: var(--den-do); }
.dd-nhip-giu { color: var(--qt-chu-mo); }

.dd-tt-moc { padding: 10px 0 2px; border-top: 1px solid #F1F3F8; }
.dd-tt-moc-hang { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 6px; }
.dd-tt-moc-o { border-radius: 8px; background: #F7F9FC; padding: 8px 9px; }
.dd-tt-moc-ten { font-size: 11px; color: var(--qt-chu-mo); }
.dd-tt-moc-so { font-size: 15px; font-weight: 800; color: var(--qt-brand); }
.dd-tt-moc-nhip { font-size: 11px; color: var(--qt-chu-mo); margin-top: 1px; }
.dd-tt-thieu {
  margin: 10px 0 0; padding: 9px 11px; border-radius: 8px; font-size: 12.5px;
  background: var(--den-vang-nen); color: var(--den-vang); font-weight: 600;
}

@media (max-width: 900px) {
  .dd-moc-hang, .dd-tt-moc-hang { grid-template-columns: repeat(2, 1fr); }
}

/* Mốc 90 ngày (BIQ200 §M01) — mốc gần nhất, cũng là mốc duy nhất hành động được hôm nay. */
.dd-moc-hang { grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); }
.dd-moc-90 { border-color: var(--den-xanh); background: var(--den-xanh-nen); }
.dd-visao { width: 100%; margin-top: 6px; font-size: 12px; padding: 5px 8px; }
.dd-nhac-90 { background: var(--den-xanh-nen); }

/* ============ BIQ200 — bảng điểm xây doanh nghiệp (NK-224) ============ */
.biq-nut-dau { margin-left: auto; display: flex; gap: 8px; }
.biq-dau { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; margin-bottom: 14px; }
.biq-tong-so { font-size: 38px; font-weight: 800; line-height: 1; color: var(--qt-brand); }
.biq-tong-so span { font-size: 17px; font-weight: 600; color: var(--qt-chu-mo); }
.biq-tong-phu { font-size: 12.5px; color: var(--qt-chu-mo); margin-top: 3px; }
.biq-muc { padding: 10px 13px; border-radius: 9px; background: var(--qt-brand-nhat); }
/* "Chưa đủ để kết luận" phải trông KHÁC hẳn một kết luận — nếu không, 12/200 lúc mới
   chấm 2 tiêu chí sẽ bị đọc thành doanh nghiệp mong manh. */
.biq-muc-chua { color: var(--den-vang); }
.biq-muc-nen-chua { background: var(--den-vang-nen); }
.biq-muc-ten { font-size: 14px; font-weight: 700; }
.biq-muc-y { font-size: 12.5px; color: var(--qt-chu-mo); line-height: 1.5; margin-top: 2px; }
.biq-muc-chua .biq-muc-y { color: inherit; opacity: .85; }

.biq-tang-hang { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 9px; }
.biq-tang { border: 1px solid var(--qt-vien); border-radius: 9px; padding: 9px 10px; border-top: 3px solid var(--tg); }
.biq-tang-ten { font-size: 11.5px; font-weight: 700; color: var(--qt-chu-mo); }
.biq-tang-so { font-size: 19px; font-weight: 800; color: var(--tg); }
.biq-tang-so span { font-size: 12px; font-weight: 600; color: var(--qt-chu-mo); }
.biq-tang-thanh { height: 4px; border-radius: 3px; background: #EEF0F5; overflow: hidden; margin: 5px 0 4px; }
.biq-tang-thanh i { display: block; height: 100%; background: var(--tg); }
.biq-tang-phu { font-size: 11px; color: var(--qt-chu-mo); }

.biq-nhom { margin-bottom: 16px; }
.biq-nhom-ten {
  margin: 0 0 7px; font-size: 12px; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; color: var(--tg); display: flex; gap: 8px; align-items: baseline;
}
.biq-nhom-ten span { font-size: 12px; color: var(--qt-chu-mo); letter-spacing: 0; }
.biq-tc { border: 1px solid var(--qt-vien); border-radius: 9px; margin-bottom: 6px; overflow: hidden; }
.biq-tc-chua { border-style: dashed; }
.biq-tc-dau { display: flex; gap: 10px; align-items: center; padding: 9px 11px; cursor: pointer; }
.biq-tc-dau:hover { background: #FAFBFD; }
.biq-tc-ma { font-size: 11px; font-weight: 800; color: var(--qt-chu-mo); min-width: 30px; }
.biq-tc-ten { font-size: 13.5px; font-weight: 600; flex: 1; }
.biq-tc-diem { font-size: 13px; font-weight: 800; color: var(--qt-brand); }
.biq-tc-diem-chua { font-size: 11.5px; font-weight: 600; color: var(--qt-chu-mo); font-style: italic; }
.biq-tc-mo { font-size: 11px; color: var(--qt-chu-mo); }

.biq-cham { padding: 4px 11px 12px; border-top: 1px solid #F1F3F8; background: #FCFDFF; }
.biq-cham-hd { margin: 8px 0; font-size: 12.5px; }
.biq-bcmay { padding: 9px 11px; border-radius: 8px; background: #F1F6FF; font-size: 12.5px; line-height: 1.55; margin-bottom: 9px; }
/* Cảnh báo cột rỗng: bảng có dòng mà cột cốt lõi trống hết vẫn là KHÔNG có bằng chứng. */
.biq-bcmay-canh { background: var(--den-vang-nen); color: var(--den-vang); }
.biq-bang-ds { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.biq-bang { font-size: 11px; padding: 2px 7px; border-radius: 999px; background: #fff; border: 1px solid var(--qt-vien); }
.biq-bang-trong { color: var(--den-do); border-color: var(--den-do); }

.biq-thang { display: flex; gap: 4px; margin: 4px 0 3px; flex-wrap: wrap; }
.biq-diem {
  width: 34px; height: 32px; border: 1px solid var(--qt-vien); border-radius: 7px;
  background: #fff; font-size: 13px; font-weight: 700; cursor: pointer; color: var(--qt-chu-mo);
}
.biq-diem:hover { border-color: var(--qt-brand); }
.biq-diem-chon { background: var(--qt-brand); border-color: var(--qt-brand); color: #fff; }
.biq-thang-y { margin: 0 0 8px; font-size: 12px; color: var(--qt-chu-mo); }
.biq-cham .tt-o { margin-bottom: 6px; }
.biq-bc-cu { font-size: 12px; margin: 4px 0 6px; }
.biq-bc-chip { display: inline-block; font-size: 11.5px; padding: 2px 8px; border-radius: 999px; background: var(--den-xanh-nen); color: var(--den-xanh); margin: 0 4px 4px 0; }

.biq-nghen { display: flex; gap: 11px; padding: 10px 0; border-top: 1px solid #F1F3F8; }
.biq-nghen:first-of-type { border-top: 0; }
.biq-nghen-so {
  width: 26px; height: 26px; flex: none; border-radius: 999px; background: var(--qt-brand);
  color: #fff; font-weight: 800; font-size: 13px; display: flex; align-items: center; justify-content: center;
}
.biq-nghen-ten { font-size: 13.5px; font-weight: 700; }
.biq-goc { font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: var(--den-do-nen); color: var(--den-do); margin-left: 7px; }
.biq-nghen-phu { font-size: 11.5px; color: var(--qt-chu-mo); margin-top: 1px; }
.biq-nghen-mota { margin: 4px 0 0; font-size: 12.5px; line-height: 1.55; }

.biq-tt { display: flex; align-items: baseline; gap: 10px; }
.biq-tt-so { font-size: 26px; font-weight: 800; color: var(--qt-brand); }
.biq-tt-so span { font-size: 13px; color: var(--qt-chu-mo); font-weight: 600; }
.biq-tt-phu { font-size: 12.5px; color: var(--qt-chu-mo); }
.biq-tt-hang { display: grid; grid-template-columns: repeat(auto-fit, minmax(86px, 1fr)); gap: 6px; margin-top: 9px; }
.biq-tt-tang { border-radius: 7px; background: #F7F9FC; padding: 6px 8px; border-left: 3px solid var(--tg); }
.biq-tt-tang-ten { font-size: 10.5px; color: var(--qt-chu-mo); }
.biq-tt-tang-so { font-size: 13px; font-weight: 800; color: var(--tg); }

@media (max-width: 700px) { .biq-dau { grid-template-columns: 1fr; gap: 10px; } }

/* ---- TỰ VẬN HÀNH (BIQ200 §S01) ---- */
/* Ô cảnh báo mẫu số trống: phải to và rõ, vì nó bác bỏ chính con số 100% ngay bên cạnh. */
.tvh-canh { padding: 12px 14px; border-radius: 9px; background: var(--den-vang-nen); color: var(--den-vang); font-size: 13px; line-height: 1.6; }
.tvh-canh p { margin: 6px 0 0; }
.tvh-so-hang { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 9px; }
.tvh-so { border: 1px solid var(--qt-vien); border-radius: 9px; padding: 9px 11px; }
.tvh-so-do { border-color: var(--den-do); background: var(--den-do-nen); }
.tvh-so-n { font-size: 21px; font-weight: 800; color: var(--qt-brand); }
.tvh-so-do .tvh-so-n { color: var(--den-do); }
.tvh-so-t { font-size: 11.5px; color: var(--qt-chu-mo); line-height: 1.4; }
.tvh-so-do .tvh-so-t { color: var(--den-do); opacity: .85; }
.tvh-ds { margin-top: 10px; }
.tvh-ct { padding: 8px 0; border-top: 1px solid #F1F3F8; }
.tvh-ct-ly { font-size: 13px; font-weight: 600; }
.tvh-ct-phu { font-size: 11.5px; color: var(--qt-chu-mo); }
.tvh-vai-hang { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-top: 10px; }
.tvh-vai { border: 1px solid var(--qt-vien); border-radius: 8px; padding: 8px 10px; }
.tvh-vai-single { border-color: var(--den-do); background: var(--den-do-nen); }
.tvh-vai-covered { border-color: var(--den-xanh); }
.tvh-vai-ten { font-size: 12px; font-weight: 800; }
.tvh-vai-so { font-size: 11.5px; color: var(--qt-chu-mo); }
.tvh-vai-nguoi { font-size: 11px; color: var(--qt-chu-mo); margin-top: 3px; line-height: 1.4; }
.tvh-rui { display: flex; gap: 11px; padding: 9px 0; border-top: 1px solid #F1F3F8; }
.tvh-rui:first-of-type { border-top: 0; }
.tvh-rui-diem { width: 34px; height: 34px; flex: none; border-radius: 8px; background: var(--den-do-nen); color: var(--den-do); font-weight: 800; display: flex; align-items: center; justify-content: center; }
.tvh-rui-ten { font-size: 13px; font-weight: 700; }
.tvh-rui-ly { font-size: 12px; color: var(--den-do); }
.tvh-rui-nguoi { font-size: 11.5px; color: var(--qt-chu-mo); }
.tvh-qd { padding: 8px 0; border-top: 1px solid #F1F3F8; }
.tvh-qd:first-of-type { border-top: 0; }
.tvh-qd-ten { font-size: 13px; font-weight: 600; }
.tvh-qd-phu { font-size: 11.5px; color: var(--qt-chu-mo); }

/* ---- Form điểm nghẽn + chuyển thành WIG (§VII, §VIII) ---- */
.biq-form-nghen { margin-top: 14px; padding: 12px 13px; border-radius: 9px; background: #F7F9FC; border: 1px solid var(--qt-vien); }
.biq-form-nghen h4 { margin: 0 0 8px; font-size: 13px; font-weight: 800; }
.biq-form-nghen .tt-o { margin-bottom: 6px; }
.biq-yt-hang { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 7px; }
.biq-yt-ten { font-size: 11px; color: var(--qt-chu-mo); margin-bottom: 2px; }
.biq-yt-o { padding: 5px 7px; font-size: 13px; }
.biq-goc-chon { display: flex; gap: 8px; align-items: flex-start; margin-top: 9px; font-size: 12.5px; line-height: 1.5; cursor: pointer; }
.biq-nghen-goc { margin: 3px 0 0; font-size: 12px; color: var(--den-do); }
.biq-da-wig { margin: 5px 0 0; font-size: 12.5px; color: var(--den-xanh); font-weight: 600; }
.biq-form-wig { margin-top: 9px; padding: 11px 12px; border-radius: 9px; background: #fff; border: 1px solid var(--qt-brand); }
.biq-form-wig .tt-o { margin-bottom: 6px; }
.biq-wig-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.biq-wig-lm { padding-top: 7px; margin-top: 7px; border-top: 1px dashed var(--qt-vien); }

/* ---- §XXIII mục tiêu Chủ DN + §XVII lịch sử ---- */
.dd-chu-khung { padding: 16px 0 4px; border-top: 1px solid var(--qt-vien); }
.dd-chu-hang { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 8px; }
.dd-chu-nhan { font-size: 11.5px; font-weight: 700; color: var(--qt-chu-mo); margin: 8px 0 3px; }
.dd-chu-khung .tt-o { margin-bottom: 2px; }
/* Đích doanh nghiệp không đủ nuôi mục tiêu sống của chủ — phải đỏ, không được nói nhẹ. */
.dd-doi-thieu { background: var(--den-do-nen); color: var(--den-do); }
.biq-ls-dong { display: grid; grid-template-columns: 78px 84px 1fr; gap: 9px; align-items: center; padding: 8px 0; border-top: 1px solid #F1F3F8; }
.biq-ls-dong:first-child { border-top: 0; }
.biq-ls-ky { font-size: 12.5px; font-weight: 800; }
.biq-ls-diem { font-size: 16px; font-weight: 800; color: var(--qt-brand); }
.biq-ls-diem span { font-size: 11px; font-weight: 600; color: var(--qt-chu-mo); }
.biq-ls-thanh { grid-column: 1 / -1; height: 4px; border-radius: 3px; background: #EEF0F5; overflow: hidden; }
.biq-ls-thanh i { display: block; height: 100%; background: var(--qt-brand); }
.biq-ls-phu { grid-column: 1 / -1; font-size: 11.5px; color: var(--qt-chu-mo); }
@media (max-width: 700px) { .dd-chu-hang { grid-template-columns: 1fr; } }

/* ---- §XII CEO Dashboard: sức khoẻ 6 trục + cần quyết ---- */
.sk-hang { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 8px; }
.sk-truc { display: flex; gap: 9px; align-items: flex-start; padding: 9px 10px; border-radius: 9px; border: 1px solid var(--qt-vien); }
.sk-den { width: 10px; height: 10px; border-radius: 999px; flex: none; margin-top: 4px; }
.sk-xanh { border-color: var(--den-xanh); background: var(--den-xanh-nen); }
.sk-xanh .sk-den { background: var(--den-xanh); }
.sk-vang { border-color: var(--den-vang); background: var(--den-vang-nen); }
.sk-vang .sk-den { background: var(--den-vang); }
.sk-do { border-color: var(--den-do); background: var(--den-do-nen); }
.sk-do .sk-den { background: var(--den-do); }
/* CHƯA ĐO ĐƯỢC phải XÁM và trông khác hẳn đèn xanh — gộp hai cái là nói dối. */
.sk-chua { border-color: #C9CDD6; background: #F4F5F8; }
.sk-chua .sk-den { background: #9AA1AE; }
.sk-ten { font-size: 12.5px; font-weight: 800; }
.sk-trangthai { font-size: 11.5px; font-weight: 700; }
.sk-xanh .sk-trangthai { color: var(--den-xanh); }
.sk-vang .sk-trangthai { color: var(--den-vang); }
.sk-do .sk-trangthai { color: var(--den-do); }
.sk-chua .sk-trangthai { color: #6B7280; }
.sk-vi { font-size: 11px; color: var(--qt-chu-mo); line-height: 1.45; margin-top: 2px; }

.cq-nhom { padding: 9px 0; border-top: 1px solid #F1F3F8; }
.cq-nhom:first-child { border-top: 0; padding-top: 0; }
.cq-nhan { font-size: 11px; font-weight: 800; letter-spacing: .04em; color: var(--qt-chu-mo); text-transform: uppercase; margin-bottom: 5px; }
.cq-dong { display: flex; gap: 9px; align-items: flex-start; padding: 5px 0; }
.cq-muc { min-width: 26px; height: 20px; border-radius: 5px; font-size: 10.5px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex: none; background: #EEF0F5; color: var(--qt-chu-mo); }
.cq-p0, .cq-p1 { background: var(--den-do-nen); color: var(--den-do); }
.cq-p2 { background: var(--den-vang-nen); color: var(--den-vang); }
.cq-qd { background: var(--qt-brand-nhat); color: var(--qt-brand); }
.cq-nghen { background: var(--qt-brand); color: #fff; }
.cq-ten { font-size: 12.5px; font-weight: 600; line-height: 1.4; }
.cq-phu { font-size: 11px; color: var(--qt-chu-mo); }

/* ---- §XXII lộ trình 12 bước ---- */
.kt-tien { display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.kt-tien-so { font-size: 26px; font-weight: 800; color: var(--qt-brand); white-space: nowrap; }
.kt-tien-so span { font-size: 13px; font-weight: 600; color: var(--qt-chu-mo); }
.kt-tien-thanh { flex: 1; height: 8px; border-radius: 5px; background: #EEF0F5; overflow: hidden; }
.kt-tien-thanh i { display: block; height: 100%; background: var(--qt-brand); }
.kt-nhom { margin-bottom: 18px; }
.kt-nhom-ten { margin: 0 0 2px; font-size: 12px; font-weight: 800; letter-spacing: .05em; color: var(--qt-brand); }
.kt-nhom-ten span { color: var(--qt-chu-mo); letter-spacing: 0; }
.kt-nhom-y { margin: 0 0 8px; font-size: 12px; color: var(--qt-chu-mo); }
.kt-buoc { border: 1px solid var(--qt-vien); border-radius: 9px; padding: 10px 12px; margin-bottom: 7px; }
.kt-xong { border-color: var(--den-xanh); background: #F7FDF9; }
/* Bước kế tiếp phải nổi bật: chuẩn cấm nhảy cóc, nên màn phải chỉ đúng một chỗ để bắt đầu. */
.kt-ke { border-color: var(--qt-brand); border-width: 2px; background: var(--qt-brand-nhat); }
.kt-dau { display: flex; gap: 9px; align-items: center; }
.kt-so { width: 24px; height: 24px; border-radius: 999px; background: #EEF0F5; color: var(--qt-chu-mo); font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex: none; }
.kt-xong .kt-so { background: var(--den-xanh); color: #fff; }
.kt-ke .kt-so { background: var(--qt-brand); color: #fff; }
.kt-ten { font-size: 13.5px; font-weight: 700; }
.kt-nhan-ke { margin-left: auto; font-size: 10.5px; font-weight: 800; padding: 2px 8px; border-radius: 999px; background: var(--qt-brand); color: #fff; }
.kt-than { padding-left: 33px; }
.kt-hoi { margin: 4px 0 3px; font-size: 12.5px; color: var(--qt-chu-mo); line-height: 1.5; }
.kt-bc { margin: 3px 0 6px; font-size: 12px; color: var(--qt-chu-mo); }
.kt-bc-xong { color: var(--den-xanh); font-weight: 600; }

/* ---- Lợi nhuận thật (§M03 · §N06) ---- */
.ln-so { display: flex; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.ln-so-n { font-size: 32px; font-weight: 800; color: var(--den-xanh); line-height: 1; }
.ln-am { color: var(--den-do); }
.ln-so-t { font-size: 12.5px; color: var(--qt-chu-mo); }
.ln-thieu { margin: 6px 0 0; padding-left: 18px; font-weight: 400; }
.ln-thieu li { margin-bottom: 3px; line-height: 1.5; }
.ln-bang { margin-top: 10px; }
.ln-dong { display: grid; grid-template-columns: 18px 1fr auto; gap: 8px; padding: 7px 0; border-top: 1px solid #F1F3F8; align-items: baseline; }
.ln-dau { font-size: 14px; font-weight: 800; color: var(--qt-chu-mo); }
.ln-ten { font-size: 13px; }
.ln-tien { font-size: 13.5px; font-weight: 700; white-space: nowrap; }
.ln-khai h4 { margin: 0 0 4px; font-size: 13.5px; font-weight: 800; }
.ln-khai-dong { display: grid; grid-template-columns: 1fr 200px; gap: 10px; align-items: center; padding: 6px 0; }
.ln-khai-ten { font-size: 13px; }
@media (max-width: 700px) { .ln-khai-dong { grid-template-columns: 1fr; gap: 4px; } }
.ln-tho { padding: 10px 12px; border-radius: 9px; background: #F1F6FF; font-size: 12.5px; line-height: 1.55; margin-bottom: 10px; }
.ln-tho p { margin: 4px 0 0; color: var(--qt-chu-mo); }
.ln-xep { display: grid; grid-template-columns: 1fr 210px auto; gap: 8px; align-items: center; padding: 7px 0; border-top: 1px solid #F1F3F8; }
.ln-xep-ten { font-size: 13px; font-weight: 600; }
.ln-xep-ten span { font-weight: 400; color: var(--qt-chu-mo); font-size: 12px; }
@media (max-width: 700px) { .ln-xep { grid-template-columns: 1fr; } }

/* ---- Khách hàng (§N04 · §N05 · §M04) ---- */
.kh-hang { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 9px; margin-bottom: 11px; }
.kh-o { border: 1px solid var(--qt-vien); border-radius: 9px; padding: 10px 11px; }
.kh-v { font-size: 22px; font-weight: 800; color: var(--qt-brand); line-height: 1.1; }
.kh-t { font-size: 12.5px; font-weight: 700; }
.kh-p { font-size: 11px; color: var(--qt-chu-mo); }
.kh-2080 { margin: 8px 0; padding: 9px 11px; border-radius: 8px; background: var(--qt-brand-nhat); font-size: 12.5px; line-height: 1.55; }
.kh-bang-dau, .kh-dong { display: grid; grid-template-columns: 1fr 58px 92px 88px 96px; gap: 8px; align-items: baseline; }
.kh-bang-dau { font-size: 11px; font-weight: 800; color: var(--qt-chu-mo); text-transform: uppercase; letter-spacing: .03em; padding-bottom: 5px; border-bottom: 1px solid var(--qt-vien); }
.kh-dong { padding: 7px 0; border-bottom: 1px solid #F1F3F8; font-size: 12.5px; }
.kh-ten { font-weight: 600; }
.kh-tien { font-weight: 700; }
.kh-ngay { color: var(--qt-chu-mo); font-size: 11.5px; }
@media (max-width: 820px) {
  .kh-bang-dau { display: none; }
  .kh-dong { grid-template-columns: 1fr auto; row-gap: 2px; }
}
.kh-dong-bam { cursor: pointer; }
.kh-dong-bam:hover { background: #FAFBFD; }
.kh-hoso { margin-top: 14px; border: 2px solid var(--qt-brand); border-radius: 11px; padding: 13px 15px; }
.kh-hoso-dau { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.kh-hoso-dau h3 { margin: 0; font-size: 15px; font-weight: 800; flex: 1; }
.kh-muc { font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--qt-chu-mo); margin: 13px 0 5px; }
.kh-don { display: grid; grid-template-columns: 88px 1fr 62px 76px 92px; gap: 8px; font-size: 12px; padding: 5px 0; border-bottom: 1px solid #F1F3F8; }
.kh-ma { font-weight: 700; }
.kh-tt { padding: 6px 0; border-bottom: 1px solid #F1F3F8; }
.kh-tt-dau { font-size: 11px; color: var(--qt-chu-mo); }
.kh-tt-nd { font-size: 12.5px; line-height: 1.5; }
.kh-chuaco { margin: 0; padding-left: 18px; font-size: 12.5px; color: var(--den-vang); line-height: 1.6; }
@media (max-width: 820px) { .kh-don { grid-template-columns: 1fr auto; } }

/* ============================================================
   NỘI DUNG & LỊCH ĐĂNG (NK-218 đợt 2, 05/09/2026) — kênh, lịch tuần, bảng soạn, kho bài.
   ============================================================ */
.nd-trang { display: grid; gap: 14px; min-width: 0; }
.nd-trang > .qt-the { min-width: 0; max-width: 100%; }
.nd-kenh-hang { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.nd-kenh { border: 1px solid var(--qt-vien); border-radius: 10px; padding: 10px 12px; display: grid; gap: 3px; min-width: 0; }
.nd-kenh b { font-size: 13px; }
.nd-kenh small { font-size: 11.5px; color: var(--qt-chu-mo); line-height: 1.45; }
.nd-kenh-tt { font-size: 11px; font-weight: 700; letter-spacing: .03em; }
.nd-kenh-ok { border-color: var(--den-xanh); background: var(--den-xanh-nen); } .nd-kenh-ok .nd-kenh-tt { color: var(--den-xanh); }
.nd-kenh-chua { border-color: var(--den-vang); background: var(--den-vang-nen); } .nd-kenh-chua .nd-kenh-tt { color: var(--den-vang); }
.nd-kenh-cap { border-color: var(--qt-vien); background: #F7F9FC; } .nd-kenh-cap .nd-kenh-tt { color: var(--qt-chu-mo); }
.nd-thanh-tuan { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.nd-thanh-tuan b { font-size: 13.5px; flex: 1 1 auto; }
.nd-luoi-tuan { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
@media (max-width: 899px) { .nd-luoi-tuan { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .nd-luoi-tuan { grid-template-columns: minmax(0, 1fr); } }
.nd-ngay { border: 1px solid var(--qt-vien); border-radius: 8px; padding: 6px; min-width: 0; min-height: 84px; background: #fff; }
.nd-ngay-nay { border-color: var(--qt-brand); box-shadow: 0 0 0 2px var(--qt-brand-nhat) inset; }
.nd-ngay-dau { font-size: 11.5px; font-weight: 700; color: var(--qt-chu-mo); margin-bottom: 4px; }
.nd-trong { margin: 0; font-size: 12px; color: var(--qt-chu-mo); }
.nd-bai { border-radius: 6px; padding: 5px 6px; margin-bottom: 4px; background: #F7F9FC; cursor: pointer; display: grid; gap: 3px; min-width: 0; }
.nd-bai:hover, .nd-bai:focus { background: var(--qt-brand-nhat); outline: none; }
.nd-bai-mo { box-shadow: 0 0 0 2px var(--qt-brand) inset; }
.nd-bai-dau { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.nd-bai-ten { font-size: 12px; line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.nd-ngan { font-size: 10.5px; font-weight: 800; letter-spacing: .04em; border-radius: 4px; padding: 0 5px; color: #fff; background: var(--qt-chu-mo); flex: none; }
.nd-ngan-FANPAGE_DONG_PHUC { background: var(--qt-brand); }
.nd-ngan-FANPAGE_MAY_DO { background: #7B3FA0; }
.nd-ngan-WEBSITE { background: var(--den-xanh); }
.nd-chip { font-size: 10.5px; font-weight: 700; border-radius: 999px; padding: 0 7px; white-space: nowrap; flex: none; }
.nd-chip-xam { background: #EEF0F5; color: var(--qt-chu-mo); }
.nd-chip-vang { background: var(--den-vang-nen); color: var(--den-vang); }
.nd-chip-cam { background: #FFE8D6; color: #B4530A; }
.nd-chip-xanh { background: var(--den-xanh-nen); color: var(--den-xanh); }
.nd-chip-xanhdam { background: var(--den-xanh); color: #fff; }
.nd-hang-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 600px) { .nd-hang-2 { grid-template-columns: minmax(0, 1fr); } }
.nd-nut-kathy { border-color: var(--qt-brand); color: var(--qt-brand); }
.nd-nut-xuatban { border-color: var(--den-do); color: var(--den-do); }
.nd-ghichu { white-space: pre-wrap; }
.nd-loc { width: auto; margin-left: auto; padding: 5px 8px; font-size: 12.5px; }
.nd-kho { padding: 0 16px 12px; }
.nd-kho-dong { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid #F1F3F8; font-size: 13px; cursor: pointer; min-width: 0; }
.nd-kho-dong:first-child { border-top: 0; }
.nd-kho-dong:hover { background: var(--qt-brand-nhat); }
.nd-kho-ngay { flex: none; width: 64px; font-size: 12px; color: var(--qt-chu-mo); }
.nd-kho-ten { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nd-bo-chu { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; background: var(--qt-brand-nhat); color: var(--ink); }
/* DMO (06/09): bảng điểm tuần, ô giờ trên lịch, cấu hình, lọc kênh */
.nd-bai-o { font-size: 10.5px; color: var(--qt-chu-mo); display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.nd-tab-hang { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.nd-tab-dang { background: var(--qt-brand); color: #fff; border-color: var(--qt-brand); }
.nd-cauhinh-than { margin-top: 10px; border-top: 1px solid var(--qt-vien); padding-top: 8px; }
.nd-cb-hang { display: flex; gap: 6px 14px; flex-wrap: wrap; margin: 4px 0 6px; }
.nd-cb { font-size: 12.5px; display: inline-flex; align-items: center; gap: 4px; }
.nd-can-nguoi { color: var(--den-vang); }
.nd-bd-luoi { display: grid; gap: 4px; align-items: stretch; overflow-x: auto; }
.nd-bd-o { border-radius: 6px; padding: 6px 4px; font-size: 12px; text-align: center; min-width: 0; background: #F7F9FC; }
.nd-bd-o small { font-size: 10px; color: var(--qt-chu-mo); }
.nd-bd-dau { font-weight: 700; color: var(--qt-chu-mo); background: transparent; }
.nd-bd-ten { text-align: left; background: transparent; }
.nd-bd-nay { box-shadow: 0 0 0 2px var(--qt-brand) inset; }
.nd-bd-xanh { background: var(--den-xanh-nen); color: var(--den-xanh); font-weight: 700; }
.nd-bd-vang { background: var(--den-vang-nen); color: var(--den-vang); font-weight: 700; }
.nd-bd-do { background: var(--den-do-nen); color: var(--den-do); font-weight: 700; }
.nd-bd-xam { color: var(--qt-chu-mo); }
.nd-bd-homnay { margin-top: 10px; display: grid; gap: 6px; font-size: 12.5px; }
.nd-bd-dong { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.nd-o-chip { font-size: 10.5px; border-radius: 999px; padding: 1px 7px; background: #EEF0F5; color: var(--qt-chu-mo); cursor: pointer; white-space: nowrap; }
.nd-o-dang { background: var(--den-xanh-nen); color: var(--den-xanh); }
.nd-o-cho_gio { background: var(--qt-brand-nhat); color: var(--qt-brand); }
.nd-o-tre { background: var(--den-do-nen); color: var(--den-do); }
.nd-o-chua_duyet { background: var(--den-vang-nen); color: var(--den-vang); }

/* ===== NỘI DUNG — 4 NỀN TẢNG + KẾT NỐI + BÁO CÁO (NK-251, 06/09/2026) ===== */
.nd-nt-hang { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; }
.nd-nt { border: 1px solid var(--qt-vien); border-radius: 12px; padding: 10px; display: grid; gap: 8px; min-width: 0; background: #FBFCFE; align-content: start; }
.nd-nt-dau { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.nd-nt-dau b { font-size: 13.5px; }
.nd-nt-vai { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; color: var(--qt-chu-mo); border: 1px solid var(--qt-vien); border-radius: 999px; padding: 1px 7px; }
.nd-kenh-loi { border-color: var(--den-do); background: var(--den-do-nen); } .nd-kenh-loi .nd-kenh-tt { color: var(--den-do); }
.nd-kenh .tt-nut-nho { justify-self: start; margin-top: 4px; }
.nd-viec-kem { color: var(--qt-chu-mo); font-weight: 400; }
.nd-kn-khung { margin-top: 10px; border: 1px dashed var(--qt-vien); border-radius: 10px; padding: 6px 10px; }
.nd-kn-khung > summary { cursor: pointer; font-weight: 700; font-size: 13px; }
.nd-kn-luoi { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; margin-top: 8px; }
.nd-kn-khoi { border: 1px solid var(--qt-vien); border-radius: 10px; padding: 10px; min-width: 0; display: grid; gap: 6px; align-content: start; }
.nd-kn-khoi h3 { margin: 0; font-size: 13.5px; }
.nd-kn-khoi code { font-size: 11px; word-break: break-all; }
.nd-kn-hang { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; border-top: 1px solid var(--qt-vien); padding-top: 6px; }
.nd-kn-hang > b { font-size: 12.5px; flex: 0 0 100%; }
.nd-kn-hang .tt-o { flex: 1 1 180px; min-width: 0; }
.nd-kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin: 6px 0 10px; }
.nd-kpi-o { border: 1px solid var(--qt-vien); border-radius: 10px; padding: 8px 10px; display: grid; gap: 2px; min-width: 0; background: #F7F9FC; }
.nd-kpi-o b { font-size: 18px; } .nd-kpi-o span { font-size: 11.5px; color: var(--qt-chu-mo); } .nd-kpi-o small { font-size: 11px; color: var(--qt-chu-mo); }
.nd-bc-h3 { font-size: 13.5px; margin: 14px 0 6px; } .nd-bc-h3 small { color: var(--qt-chu-mo); font-weight: 400; }
.nd-bang-cuon { overflow-x: auto; max-width: 100%; }
.nd-bang { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.nd-bang th, .nd-bang td { text-align: left; padding: 5px 8px; border-bottom: 1px solid var(--qt-vien); vertical-align: top; }
.nd-bang th { font-size: 11px; color: var(--qt-chu-mo); font-weight: 700; white-space: nowrap; }
.nd-qd { display: grid; gap: 6px; }
.nd-qd-dong { display: grid; grid-template-columns: 92px 1fr; gap: 8px; border: 1px solid var(--qt-vien); border-left-width: 4px; border-radius: 8px; padding: 8px 10px; min-width: 0; }
.nd-qd-ngay { border-left-color: var(--den-do); } .nd-qd-tuan { border-left-color: var(--den-vang); } .nd-qd-ghi { border-left-color: var(--qt-vien); }
.nd-qd-muc { font-size: 11px; font-weight: 700; letter-spacing: .03em; color: var(--qt-chu-mo); }
.nd-qd-ngay .nd-qd-muc { color: var(--den-do); } .nd-qd-tuan .nd-qd-muc { color: var(--den-vang); }
.nd-qd-than { display: grid; gap: 2px; min-width: 0; } .nd-qd-than b { font-size: 13px; } .nd-qd-than small { font-size: 12px; color: var(--qt-chu-mo); line-height: 1.45; }
.nd-qd-than .tt-nut-nho { justify-self: start; margin-top: 3px; }
.nd-ngan-TIKTOK { background: #111; color: #fff; } .nd-ngan-YOUTUBE { background: #C4302B; color: #fff; }
@media (max-width: 599px) { .nd-qd-dong { grid-template-columns: 1fr; } }
/* NK-251 vá: 3 khối kết nối không được tràn/đè nhau khi ô nhập dài */
.nd-kn-luoi { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: start; }
.nd-kn-khoi { overflow: hidden; }
.nd-kn-khoi .tt-o, .nd-kn-khoi input, .nd-kn-khoi select { max-width: 100%; box-sizing: border-box; }
.nd-kn-hang { min-width: 0; }
.nd-kn-hang .tt-o { flex: 1 1 100%; }
.nd-kn-hang .tt-nut, .nd-kn-hang .tt-nut-nho { flex: 0 0 auto; }
/* NK-251 vá 2: chip trạng thái trong khối kết nối có chữ rất dài — phải xuống dòng, không tràn sang cột bên */
.nd-kn-hang .nd-chip { white-space: normal; overflow-wrap: anywhere; flex: 1 1 100%; line-height: 1.4; text-align: left; }
.nd-kn-khoi p, .nd-kn-khoi code, .nd-kn-khoi small { overflow-wrap: anywhere; }

/* ── NK-255 · MÀN DÒNG TIỀN (06/09/2026) ────────────────────────────────────
   Ba khối hình: SỔ CÁI (5 dòng cộng trừ), THANH KHỐI (rổ thu / khối chi / tầng
   công nợ), Ô KHAI (nhập số dư + khai nơi giữ tiền). Không đẻ thẻ mới — thẻ,
   bảng, nút, ô nhập đều dùng lại .qt-the/.qt-bang/.tt-o/.tt-nut sẵn có. */
.dt-phai { text-align: right; white-space: nowrap; }

.dt-so-cai { margin-top: 14px; border: 1px solid var(--qt-vien); border-radius: 10px; overflow: hidden; }
.dt-sc-dong { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 13px; font-size: 13px; border-top: 1px solid var(--qt-vien); }
.dt-sc-dong:first-child { border-top: 0; }
.dt-sc-dong span { color: var(--qt-chu-mo); min-width: 0; }
.dt-sc-dong b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.dt-sc-thuan { background: var(--qt-brand-nhat); font-weight: 600; }
.dt-sc-thuan span { color: inherit; }

.dt-tong { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding-bottom: 6px; }
.dt-tong b { font-size: 22px; font-weight: 750; font-variant-numeric: tabular-nums; }
.dt-tong span { font-size: 12px; color: var(--qt-chu-mo); }

.dt-ro { padding: 9px 0; border-top: 1px solid #F1F3F8; min-width: 0; }
.dt-ro-ten { font-size: 13px; font-weight: 600; }
.dt-ro-ten span { font-weight: 400; color: var(--qt-chu-mo); font-size: 12px; }
.dt-ro-tien { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; margin: 1px 0 5px; }
.dt-ro-thanh { height: 6px; border-radius: 4px; background: #EDF0F7; overflow: hidden; }
.dt-ro-thanh i { display: block; height: 100%; background: var(--qt-brand); border-radius: 4px; }
.dt-ro-thanh i.dt-mo { background: #B9BFD4; }   /* tầng "chưa có hạn": có tiền nhưng chưa biết trễ hay chưa */

.dt-tieu-phu { margin: 16px 0 6px; font-size: 13px; }

.dt-khai { border: 1px solid var(--qt-vien); border-radius: 10px; padding: 12px 13px; min-width: 0; }
.dt-khai h4 { margin: 0 0 4px; font-size: 13px; }
.dt-o-dong { display: grid; grid-template-columns: minmax(0, 96px) minmax(0, 1fr); gap: 8px;
  align-items: center; padding: 4px 0; }
.dt-o-nhan { font-size: 12px; color: var(--qt-chu-mo); }

@media (max-width: 620px) {
  .dt-o-dong { grid-template-columns: minmax(0, 1fr); gap: 3px; }
  .dt-sc-dong { font-size: 12px; }
}
/* NK-251: trên điện thoại, bảng báo cáo gập thành thẻ — không bắt người dùng cuộn ngang 8 cột */
@media (max-width: 599px) {
  .nd-bang thead { display: none; }
  .nd-bang, .nd-bang tbody, .nd-bang tr, .nd-bang td { display: block; width: auto; }
  .nd-bang tr { border: 1px solid var(--qt-vien); border-radius: 8px; margin-bottom: 6px; padding: 4px 2px; }
  .nd-bang td { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; border: 0; padding: 3px 8px; text-align: right; }
  .nd-bang td::before { content: attr(data-nhan); color: var(--qt-chu-mo); font-size: 11px; font-weight: 700; text-align: left; flex: 0 0 42%; }
  .nd-bang td:empty { display: none; }
}

/* ── NK-255 đợt 2 · SỨC KHOẺ DÒNG TIỀN + CỬA ĐẶT HẠN (06/09/2026) ───────── */
.dt-sk-hang { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 200px)); gap: 14px; }
.dt-sk-o { border: 1px solid var(--qt-vien); border-radius: 10px; padding: 11px 13px; min-width: 0; }
.dt-sk-nhan { font-size: 12px; color: var(--qt-chu-mo); }
.dt-sk-so { font-size: 24px; font-weight: 750; line-height: 1.25; margin-top: 2px; word-break: break-word; }
.dt-hang-ngay { display: flex; gap: 6px; align-items: center; }
.dt-o-ngay { width: 148px; padding: 5px 8px; font-size: 12px; }

@media (max-width: 620px) {
  .dt-sk-hang { grid-template-columns: minmax(0, 1fr); }
  .dt-hang-ngay { flex-wrap: wrap; }
  .dt-o-ngay { width: 100%; }
}
/* NK-251: 4 trang Facebook — nhãn ngắn cho trang chính và trang bán lẻ online */
.nd-ngan-FANPAGE_CHINH { background: #2E3192; }
.nd-ngan-FANPAGE_ONLINE { background: #0F766E; }