/* File: wwwroot/train-platform.css */
/* Train Platform – layout riêng, đồng bộ tone với Quik AI / Test AI */

/* Pane bao ngoài – FULL chiều ngang, tối ưu mọi size desktop */
.train-platform-pane{
    width:100%;                 /* luôn chiếm full chiều ngang container cha */
    max-width:none;             /* bỏ giới hạn 1180px để không bị co vào giữa */
    margin:0;                   /* không canh giữa bằng margin auto nữa */
    padding:18px 20px 32px;     /* chừa 20px 2 bên để card không dính sát mép */
    background:#ffffff;         /* khung trắng bao toàn bộ UI giống Quik AI */
    box-sizing:border-box;      /* width 100% tính luôn cả padding */
}
  
  /* Card chính – khung bọc toàn bộ UI, giống .test-ai-card */
  .train-platform-pane .tp-card{
    border-radius:24px;
    padding:18px 18px 14px; /* giống .test-ai-card */
    overflow:hidden;
    border:1px solid var(--border-soft,rgba(148,163,184,.35));
    box-shadow:0 18px 40px rgba(15,23,42,.28);
    background:
      radial-gradient(1200px 700px at 0% -20%, rgba(59,130,246,.18), transparent),
      radial-gradient(1200px 700px at 100% -20%, rgba(236,72,153,.18), transparent),
      var(--card);
    display:flex;
    flex-direction:column;
  }
  
  /* Light mode – giống hệt .test-ai-card để đồng bộ */
  @media (prefers-color-scheme: light){
    .train-platform-pane .tp-card{
      background:
        radial-gradient(1200px 700px at 0% -20%, rgba(59,130,246,.20), transparent),
        radial-gradient(1200px 700px at 100% -20%, rgba(236,72,153,.16), transparent),
        linear-gradient(180deg,#ffffff,#f5f7ff);
    }
  }
  
  /* ===== HERO / HEADER – bo góc như .chat-head ===== */
  
  .tp-hero{
    margin:16px 16px 10px;
    padding:12px 16px 14px;
    border-radius:18px;
    background:linear-gradient(135deg,rgba(15,23,42,.94),rgba(15,23,42,.88));
    border:1px solid rgba(148,163,184,.6);
    box-shadow:0 12px 28px rgba(15,23,42,.65);
    color:#e5e7eb;
  }
  @media (prefers-color-scheme: light){
    .tp-hero{
      background:linear-gradient(135deg,#ffffff,#eef2ff);
      border-color:rgba(148,163,184,.5);
      box-shadow:0 12px 26px rgba(15,23,42,.20);
      color:var(--text);
    }
  }
  
/* HERO layout: 2 cột cân 1/2 - 1/2 */
.tp-hero-main,
.tp-hero-top{
  display:grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap:14px 16px;
  align-items:start;
}

@media (max-width: 980px){
  .tp-hero-main,
  .tp-hero-top{
    grid-template-columns: 1fr;
  }
}
  
/* LEFT HERO: luôn chiếm đúng nửa trái, nội dung gọn gàng */
.tp-hero-text{
  min-width:0;
  width:100%;
  max-width:560px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
  /* Pill title: tone gọn, đồng bộ với hero card ở cả light/dark */
  .tp-label-pill{
    --lp-bg: linear-gradient(135deg, rgba(15,23,42,.30), rgba(30,41,59,.20));
    --lp-border: rgba(148,163,184,.55);
    --lp-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 10px 24px rgba(2,6,23,.34);
    --lp-fg: #e2e8f0;
    --lp-brand-bg: rgba(37,99,235,.20);
    --lp-brand-border: rgba(96,165,250,.55);
    --lp-brand-fg: #dbeafe;
    --lp-title-fg: #f8fafc;

    position:relative;
    display:inline-flex;
    align-items:center;
    gap:8px;
    max-width:100%;
    padding:7px 12px;
    border-radius:999px;
    background:var(--lp-bg);
    color:var(--lp-fg);
    border:1px solid var(--lp-border);
    box-shadow:var(--lp-shadow);
    font-size:11px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.08em;
    white-space:nowrap;
    margin-bottom:8px;
    -webkit-backdrop-filter:blur(6px);
    backdrop-filter:blur(6px);
  }

  .tp-label-pill > span:first-child{
    padding:2px 8px;
    border-radius:999px;
    border:1px solid var(--lp-brand-border);
    background:var(--lp-brand-bg);
    color:var(--lp-brand-fg);
    font-weight:900;
    letter-spacing:.06em;
  }

  .tp-label-pill > span:last-child{
    color:var(--lp-title-fg);
    font-weight:900;
    letter-spacing:.10em;
  }

  @media (prefers-color-scheme: light){
    .tp-label-pill{
      --lp-bg: linear-gradient(135deg, rgba(255,255,255,.94), rgba(238,242,255,.92));
      --lp-border: rgba(148,163,184,.60);
      --lp-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 8px 20px rgba(15,23,42,.14);
      --lp-fg: #0f172a;
      --lp-brand-bg: rgba(37,99,235,.10);
      --lp-brand-border: rgba(37,99,235,.35);
      --lp-brand-fg: #1d4ed8;
      --lp-title-fg: #0f172a;
    }
  }

  html[data-theme="light"] .tp-label-pill{
    --lp-bg: linear-gradient(135deg, rgba(255,255,255,.94), rgba(238,242,255,.92));
    --lp-border: rgba(148,163,184,.60);
    --lp-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 8px 20px rgba(15,23,42,.14);
    --lp-fg: #0f172a;
    --lp-brand-bg: rgba(37,99,235,.10);
    --lp-brand-border: rgba(37,99,235,.35);
    --lp-brand-fg: #1d4ed8;
    --lp-title-fg: #0f172a;
  }

  html[data-theme="dark"] .tp-label-pill{
    --lp-bg: linear-gradient(135deg, rgba(15,23,42,.30), rgba(30,41,59,.20));
    --lp-border: rgba(148,163,184,.55);
    --lp-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 10px 24px rgba(2,6,23,.34);
    --lp-fg: #e2e8f0;
    --lp-brand-bg: rgba(37,99,235,.20);
    --lp-brand-border: rgba(96,165,250,.55);
    --lp-brand-fg: #dbeafe;
    --lp-title-fg: #f8fafc;
  }
 
  .tp-title{
    margin:0 0 6px;
    font-size:22px;
    font-weight:900;
    letter-spacing:.25px;
    text-shadow:0 1px 0 rgba(15,23,42,.5);
  }


  @media (prefers-color-scheme: light){
    .tp-title{
      text-shadow:none;
    }
  }
  
  .tp-subtitle{
    margin:0;
    font-size:14px;
    line-height:1.7;
    opacity:.96;
  }
  .tp-subtitle code{
    font-family:var(--mono);
    font-size:13px;
    padding:1px 6px;
    border-radius:999px;
    background:rgba(15,23,42,.35);
    color:#e5e7eb;
  }
  @media (prefers-color-scheme: light){
    .tp-subtitle code{
      background:rgba(15,23,42,.07);
      color:#0f172a;
    }
  }
  
  /* HERO – actions (search + filter) */
  
  .tp-hero-actions{
    display:flex;
    flex-direction:column;
    gap:10px;
    align-items:stretch;
    min-width:260px;
  }
  
  .tp-search-wrap{
    width:100%;
    max-width:260px;   /* để khi đặt trong tp-section-head không chiếm hết hàng */
  }
  .tp-search-label{
    display:block;
    font-size:11px;
    margin-bottom:4px;
    opacity:.9;
  }
  .tp-search-inner{
    display:flex;
    align-items:center;
    gap:6px;
    padding:8px 10px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.75);
    background:rgba(15,23,42,.3);
  }
  .tp-search-icon{
    font-size:14px;
    opacity:.9;
  }
  .tp-search-wrap input[type="search"]{
    width:100%;
    border:none;
    background:transparent;
    color:#f9fafb;
    font-size:13px;
    outline:none;
  }
  .tp-search-wrap input[type="search"]::placeholder{
    color:rgba(226,232,240,.85);
  }
  @media (prefers-color-scheme: light){
    .tp-search-inner{
      border-color:rgba(148,163,184,.75);
      background:rgba(255,255,255,.9);
    }
    .tp-search-wrap input[type="search"]{
      color:#0f172a;
    }
  }
  
  /* HERO – meta 4 ô */
  
/* RIGHT HERO: meta gọn trong nửa phải và canh phải để cân layout */
.tp-hero-meta{
  margin-top:0;
  justify-self:end;
  width:100%;
  max-width:560px;

  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:10px;
  align-content:start;
}
 
  /* Mobile: meta tự co 1 cột cho gọn */
  @media (max-width: 520px){
    .tp-hero-meta{
      grid-template-columns: 1fr;
    }
  }
  .tp-meta-box{
    padding:10px 12px;
    border-radius:14px;
    border:1px solid rgba(255,255,255,.6);
    background:linear-gradient(160deg,rgba(15,23,42,.22),rgba(15,23,42,.55));
    box-shadow:0 8px 20px rgba(15,23,42,.6);
    min-height:64px;
    display:flex;
    flex-direction:column;
    justify-content:center;
  }
  
  .tp-meta-label{
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.12em;
    opacity:.85;
  }
  .tp-meta-value{
    font-weight:600;
    white-space:normal;      /* cho phép xuống dòng */
    overflow:visible;        /* không cắt */
    text-overflow:clip;      /* bỏ ... */
  }
  .tp-meta-hint{
    margin-top:2px;
    font-size:11px;
    opacity:.88;
  }
  @media (prefers-color-scheme: light){
    .tp-meta-box{
      background:linear-gradient(160deg,#eff6ff,#e5edff);
      border-color:rgba(191,219,254,.9);
      box-shadow:0 8px 20px rgba(15,23,42,.16);
    }
  }
  
  /* ===== GENERIC SECTION ===== */
  
  /* Mỗi khối “Bộ dữ liệu chuẩn”, “Khu chia sẻ file…” là 1 card trắng,
     text đen rõ ràng kể cả khi dark mode */
  .tp-section{
    padding:18px 20px;
    margin:12px 16px;
    border-radius:18px;
    background:#ffffff;
    box-shadow:0 12px 30px rgba(15,23,42,.18);
    color:#0f172a;
  }
  .tp-section + .tp-section{
    margin-top:10px;
  }
  
  .tp-section-head{
    display:flex;
    justify-content:space-between;
    gap:18px;
    align-items:flex-start;
    margin-bottom:16px;
    flex-wrap:wrap;
  }
  .tp-section-head-slim{
    margin-bottom:12px;
  }
 
  .tp-section-titles{
    max-width:560px;
  }
  .tp-section-title{
    margin:0 0 4px;
    font-size:17px;
    font-weight:800;
    color:#0b1120; /* ĐEN HƠN CHO DARK MODE */
  }

  /* ===== HINT (?) cạnh tiêu đề section ===== */
.tp-section-title-row{
  display:flex;
  align-items:center;
  gap:8px;
}

/* Wrap riêng cho nút ? + popup (neo đúng cạnh tiêu đề) */
.tp-hint-wrap{
  position:relative;
  display:inline-flex;
  align-items:center;
  flex:0 0 auto;
}

.tp-hint-btn{
  width:22px;
  height:22px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.85);
  background:#ffffff;
  color:#111827;
  font-size:12px;
  font-weight:900;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 4px 12px rgba(15,23,42,.10);
  transform:translateY(-1px);
}

.tp-hint-btn:hover{ filter:brightness(1.04); }

.tp-hint-btn:focus-visible{
  outline:2px solid rgba(59,130,246,.9);
  outline-offset:2px;
}

/* Tooltip: desktop → hiện NGAY BÊN PHẢI nút ? */
.tp-hint-pop{
  position:absolute;
  top:50%;
  left:calc(100% + 10px);
  width:min(520px, 70vw);
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(148,163,184,.85);
  background:rgba(15,23,42,.98);
  color:#e5e7eb;
  box-shadow:
    0 18px 40px rgba(15,23,42,.45),
    0 0 0 1px rgba(15,23,42,.95);

  opacity:0;
  transform:translateY(-50%) translateX(-6px);
  pointer-events:none;
  z-index:900;
  transition:opacity .16s ease-out, transform .16s ease-out;
}

/* Mũi tên trỏ từ tooltip về nút ? (desktop) */
.tp-hint-pop::before{
  content:"";
  position:absolute;
  top:50%;
  left:-10px;
  transform:translateY(-50%);
  border-width:9px 10px 9px 0;
  border-style:solid;
  border-color:transparent rgba(15,23,42,.98) transparent transparent;
  filter:drop-shadow(-1px 0 0 rgba(148,163,184,.85));
}

.tp-hint-pop-title{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-weight:800;
  opacity:.9;
  margin-bottom:6px;
}

.tp-hint-pop-body{
  font-size:13px;
  line-height:1.65;
  color:rgba(226,232,240,.98);
}

.tp-hint-pop code{
  font-family:var(--mono);
  font-size:12px;
  padding:1px 6px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  color:#e5e7eb;
}

/* Hover hoặc focus vào cụm nút ? là hiện tooltip */
.tp-hint-wrap:hover .tp-hint-pop,
.tp-hint-wrap:focus-within .tp-hint-pop{
  opacity:1;
  transform:translateY(-50%) translateX(0);
  pointer-events:auto;
}

/* Mobile: chuyển tooltip xuống dưới cho khỏi tràn ngang */
@media (max-width:720px){
  .tp-hint-pop{
    top:calc(100% + 8px);
    left:0;
    width:min(520px, 86vw);
    transform:translateY(-6px);
  }
  .tp-hint-pop::before{
    top:-10px;
    left:14px;
    transform:none;
    border-width:0 9px 10px 9px;
    border-style:solid;
    border-color:transparent transparent rgba(15,23,42,.98) transparent;
    filter:drop-shadow(0 -1px 0 rgba(148,163,184,.85));
  }
  .tp-hint-wrap:hover .tp-hint-pop,
  .tp-hint-wrap:focus-within .tp-hint-pop{
    transform:translateY(0);
  }
}

/* Light mode */
@media (prefers-color-scheme: light){
  .tp-hint-pop{
    background:#ffffff;
    color:#0f172a;
    border-color:rgba(148,163,184,.75);
    box-shadow:0 16px 32px rgba(15,23,42,.18);
  }
  /* desktop arrow (trỏ trái) */
  .tp-hint-pop::before{
    border-color:transparent #ffffff transparent transparent;
    filter:drop-shadow(-1px 0 0 rgba(148,163,184,.75));
  }
  .tp-hint-pop-body{ color:#374151; }
  .tp-hint-pop code{
    background:rgba(15,23,42,.06);
    color:#0f172a;
  }

  @media (max-width:720px){
    .tp-hint-pop::before{
      border-color:transparent transparent #ffffff transparent;
      filter:drop-shadow(0 -1px 0 rgba(148,163,184,.75));
    }
  }
}

  .tp-section-desc{
    margin:0;
    font-size:13px;
    color:#374151; /* xám đậm, tương phản tốt trên nền trắng */
    line-height:1.6;
  }
  .tp-section-desc code{
    font-family:var(--mono);
    font-size:12px;
    color:#111827;
  }
  
  .tp-section-actions{
    display:flex;
    gap:8px;
    align-items:center;
  }
  .tp-section-actions-right{
    flex-wrap:wrap;
    justify-content:flex-end;
    margin-left:auto;      /* đẩy cụm actions chiếm hết phần bên phải */
    align-self:flex-end;   /* nằm sát mép dưới – ngay trên dãy card */
  }
  .tp-section-actions-row{
    flex-wrap:wrap;
    justify-content:flex-end;
  }

    /* ===== NÚT CHUYỂN VIEW CARDS / LIST CHO BỘ DỮ LIỆU CHUẨN ===== */

    .tp-view-switch{
      display:inline-flex;
      align-items:center;
      gap:2px;
      padding:2px;
      border-radius:999px;
      background:linear-gradient(135deg,#eef2ff,#e0e7ff);
      border:1px solid rgba(148,163,184,.8);
      box-shadow:0 4px 12px rgba(15,23,42,.18);
    }
  
    .tp-view-btn{
      border:none;
      background:transparent;
      padding:4px 10px;
      border-radius:999px;
      font-size:12px;
      display:inline-flex;
      align-items:center;
      gap:4px;
      cursor:pointer;
      color:#4b5563;
      white-space:nowrap;
      transition:
        background .16s ease,
        color .16s ease,
        transform .10s ease,
        box-shadow .16s ease;
    }
  
    .tp-view-btn span{
      display:inline-block;
    }
  
    .tp-view-btn-active{
      background:#ffffff;
      color:#111827;
      box-shadow:0 2px 6px rgba(15,23,42,.18);
      transform:translateY(-0.5px);
    }
  
    .tp-view-btn:focus-visible{
      outline:2px solid rgba(59,130,246,.85);
      outline-offset:1px;
    }
  
    .tp-view-btn:active{
      transform:translateY(0.5px);
    }
  
    /* Mobile: chỉ giữ icon cho gọn */
    @media (max-width:640px){
      .tp-view-btn span{
        display:none;
      }
    }
  /* Buttons */
  
  .tp-btn{
    padding:9px 14px;
    border-radius:14px;
    font-size:13px;
    font-weight:700;
  }
  .tp-btn.ghost{
    background:#ffffff;
    border-color:var(--border);
  }
  .tp-btn.primary{
    background:linear-gradient(135deg,var(--primary),var(--primary-2));
    color:var(--primary-ink);
    border-color:transparent;
    box-shadow:0 10px 24px rgba(59,130,246,.35);
  }
  
/* ===== GRID BỘ DỮ LIỆU QUẢN LÝ ===== */

/* Mặc định: 1 cột trên mobile, lên desktop là 3 card / hàng */
.tp-grid-managers{
  display:grid;
  grid-template-columns:repeat(1,minmax(260px,1fr));
  gap:10px;
  transition:opacity .16s ease, transform .16s ease;
}

@media (min-width:900px){
  .tp-grid-managers{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

/* List view – luôn 1 cột full width, cảm giác dạng danh sách */
.tp-grid-managers.tp-view-list{
  grid-template-columns:repeat(1,minmax(0,1fr));
  row-gap:6px; /* list dày hơn, nhiều dòng hơn */
}

/* Animation nhẹ khi chuyển view */
.tp-grid-managers.tp-view-switching{
  opacity:0;
  transform:translateY(4px);
}

/* === COMPACT LIST LAYOUT CHO BỘ DỮ LIỆU CHUẨN (MANAGER) — FIX META WRAP (FILE/KHỐI/NGÀY) === */
@media (min-width:1024px){

  /* Card trong list view: dạng “row”, ưu tiên meta nhìn như bảng */
  .tp-grid-managers.tp-view-list .tp-manager-card{
    display:grid;
    /* ✅ Nới cột meta (cột 3) để tránh bóp FILE/DATE */
    grid-template-columns: minmax(0, 3.1fr) minmax(0, 2.0fr) minmax(0, 4.2fr) auto;
    align-items:center;
    padding:8px 10px;
    gap:6px 12px;
    border-radius:12px;
    box-shadow:0 8px 18px rgba(15,23,42,.65);
    overflow:hidden; /* chặn mọi overflow lẹm ra ngoài card */
  }

  /* Header: pill + title + desc */
  .tp-grid-managers.tp-view-list .tp-manager-card-header{
    grid-column:1 / 2;
    margin:0;
    min-width:0;
  }
  .tp-grid-managers.tp-view-list .tp-manager-card-title-wrap{
    gap:2px;
    min-width:0;
  }
  .tp-grid-managers.tp-view-list .tp-manager-card-pill{
    font-size:9px;
    padding:2px 8px;
  }
  .tp-grid-managers.tp-view-list .tp-manager-card-title{
    margin-top:1px;
    font-size:13px;
    min-width:0;
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
    overflow-wrap:anywhere;
    word-break:break-word;
  }
  .tp-grid-managers.tp-view-list .tp-manager-card-desc{
    margin:1px 0 0;
    font-size:11px;
    max-width:100%;
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
    opacity:.9;
    overflow-wrap:anywhere;
    word-break:break-word;
  }

  /* Chips: wrap được */
  .tp-grid-managers.tp-view-list .tp-manager-card-chips{
    grid-column:2 / 3;
    min-width:0;
    align-items:flex-start;
    justify-content:flex-start;
    flex-direction:row;
    flex-wrap:wrap;
    gap:4px;
  }
  .tp-grid-managers.tp-view-list .tp-mchip{
    padding:2px 8px;
    font-size:10px;
    max-width:100%;
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
    overflow-wrap:anywhere;
    word-break:break-word;
  }

  /* Footer: meta trái + people phải */
  .tp-grid-managers.tp-view-list .tp-manager-card-footer{
    grid-column:3 / 4;
    margin-top:0;
    padding-top:0;
    border-top:none;

    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;

    min-width:0;
  }

  /* ✅ Meta: 3 cột “FILE | KHỐI | NGÀY” nhìn như table */
  .tp-grid-managers.tp-view-list .tp-manager-card-meta{
    display:grid;
    /* ✅ FILE rộng hơn, KHỐI/NGÀY đủ chỗ để không rơi dòng */
    grid-template-columns: minmax(0, 2.6fr) minmax(0, 1.0fr) minmax(0, 1.0fr);
    gap:8px 14px;
    align-content:start;

    min-width:0;
    flex:1 1 auto;
  }

  /* ✅ FIX CHÍNH: đổi meta-row thành label trên / value dưới (không còn bóp value) */
  .tp-grid-managers.tp-view-list .tp-meta-row{
    display:flex;
    flex-direction:column;
    gap:2px;
    min-width:0;
  }

  .tp-grid-managers.tp-view-list .tp-meta-label{
    text-transform:uppercase;
    letter-spacing:.08em;
    opacity:.7;
    font-size:10px;
    line-height:1.1;
    white-space:nowrap;
  }

  /* Default: value có thể wrap */
  .tp-grid-managers.tp-view-list .tp-meta-value{
    min-width:0;
    max-width:none;
    font-weight:600;
    line-height:1.28;

    white-space:normal;
    overflow:visible;
    text-overflow:clip;
    overflow-wrap:anywhere;
    word-break:break-word;
  }

  /* ✅ Chỉ FILE (ô 1) cho phép wrap mạnh */
  .tp-grid-managers.tp-view-list .tp-manager-card-meta .tp-meta-row:nth-child(1) .tp-meta-value{
    white-space:normal;
    overflow-wrap:anywhere;
    word-break:break-word;
  }

  /* ✅ KHỐI (ô 2) + NGÀY (ô 3) KHÔNG wrap để tránh “rớt từng chữ” như ảnh */
  .tp-grid-managers.tp-view-list .tp-manager-card-meta .tp-meta-row:nth-child(2) .tp-meta-value,
  .tp-grid-managers.tp-view-list .tp-manager-card-meta .tp-meta-row:nth-child(3) .tp-meta-value{
    white-space:nowrap;
    overflow-wrap:normal;
    word-break:normal;
  }

  /* People: vẫn đủ info, nhưng không bóp layout meta */
  .tp-grid-managers.tp-view-list .tp-manager-card-meta-people{
    min-width:0;
    justify-content:flex-start;
    gap:6px;
    flex:0 0 auto;
  }

  .tp-grid-managers.tp-view-list .tp-meta-person{
    max-width:180px;
    min-width:0;
  }

  .tp-grid-managers.tp-view-list .tp-meta-person-name{
    max-width:none;
    min-width:0;
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
    overflow-wrap:anywhere;
    word-break:break-word;
    line-height:1.25;
  }

  .tp-grid-managers.tp-view-list .tp-meta-arrow{
    padding:0;
    font-size:12px;
  }

  /* Actions */
  .tp-grid-managers.tp-view-list .tp-manager-card-actions{
    grid-column:4 / 5;
    margin-top:0;
    align-self:stretch;
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:6px;
  }

  .tp-grid-managers.tp-view-list .tp-manager-card-actions .tp-btn{
    padding:5px 10px;
    font-size:11px;
    border-radius:999px;
  }
}

  /* Card bộ dữ liệu chuẩn – nổi bật hơn so với bảng nhân viên */
  .tp-manager-card{
    position:relative;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    gap:10px;
    padding:12px 13px 11px;
    border-radius:16px;
    border:1px solid rgba(129,140,248,.85);
    background:
      radial-gradient(circle at 0 0,rgba(59,130,246,.38),transparent 55%),
      radial-gradient(circle at 100% 0,rgba(236,72,153,.32),transparent 55%),
      linear-gradient(150deg,rgba(15,23,42,.98),rgba(15,23,42,.94));
    box-shadow:
      0 16px 40px rgba(15,23,42,.85),
      0 0 0 1px rgba(15,23,42,.9);
    color:#e5e7eb;
    overflow:hidden;
  }
  
  @media (prefers-color-scheme: light){
    .tp-manager-card{
      border-color:rgba(129,140,248,.9);
      background:
        radial-gradient(circle at 0 0,rgba(191,219,254,.96),transparent 55%),
        radial-gradient(circle at 100% 0,rgba(254,202,232,.9),transparent 55%),
        linear-gradient(150deg,#ffffff,#eef2ff);
      box-shadow:0 14px 34px rgba(15,23,42,.18);
      color:#0f172a;
    }
  }
  
  .tp-manager-card-header{
    display:flex;
    justify-content:space-between;
    gap:12px;
    align-items:flex-start;
  }
  
  .tp-manager-card-title-wrap{
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:4px;
  }
  
  .tp-manager-card-pill{
    align-self:flex-start;
    padding:3px 10px;
    border-radius:999px;
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.14em;
    background:rgba(15,23,42,.9);
    border:1px solid rgba(191,219,254,.85);
    color:#e5f0ff;
    box-shadow:0 8px 20px rgba(15,23,42,.9);
  }
  @media (prefers-color-scheme: light){
    .tp-manager-card-pill{
      background:#eff6ff;
      color:#1e293b;
      border-color:rgba(129,140,248,.9);
      box-shadow:0 6px 16px rgba(148,163,184,.55);
    }
  }
  
  .tp-manager-card-title{
    margin:2px 0 0;
    font-size:14px;              /* TO HƠN 1 NẤC – card view đỡ bị bé chữ */
    font-weight:800;
    letter-spacing:.02em;
    line-height:1.45;
    white-space:normal;          /* cho phép xuống dòng tự nhiên */
    overflow:visible;            /* không cắt nội dung */
    text-overflow:clip;
  }
  
  .tp-manager-card-desc{
    margin:2px 0 0;
    font-size:12px;
    line-height:1.5;
    opacity:.92;
  }
  
  .tp-manager-card-chips{
    display:flex;
    flex-direction:column;
    gap:6px;
    align-items:flex-end;
    justify-content:flex-start;
  }
  
  .tp-mchip{
    display:inline-flex;
    align-items:center;
    gap:4px;
    padding:3px 8px;
    border-radius:999px;
    font-size:11px;
    font-weight:600;
    border:1px solid rgba(148,163,184,.9);
    background:rgba(15,23,42,.75);
    color:#e5e7eb;
    white-space:nowrap;
  }
  @media (prefers-color-scheme: light){
    .tp-mchip{
      background:#ffffff;
      color:#0f172a;
      border-color:rgba(148,163,184,.75);
      box-shadow:0 4px 12px rgba(15,23,42,.12);
    }
  }
  
  .tp-mchip-model{
    font-family:var(--mono);
  }
  
  .tp-mchip-size{
    opacity:.92;
  }
  
  .tp-mchip-status.ok{
    background:linear-gradient(135deg,rgba(22,163,74,.92),rgba(34,197,94,.9));
    color:#ecfdf5;
    border-color:rgba(22,163,74,1);
    box-shadow:0 8px 18px rgba(22,163,74,.65);
  }
  .tp-mchip-status.pending{
    background:linear-gradient(135deg,rgba(245,158,11,.95),rgba(251,191,36,.95));
    color:#fffbeb;
    border-color:rgba(245,158,11,1);
    box-shadow:0 8px 18px rgba(245,158,11,.6);
  }
  .tp-mchip-status.err{
    background:linear-gradient(135deg,rgba(239,68,68,.96),rgba(248,113,113,.96));
    color:#fef2f2;
    border-color:rgba(239,68,68,1);
    box-shadow:0 8px 18px rgba(239,68,68,.6);
  }
  
  .tp-manager-card-footer{
    margin-top:8px;
    padding-top:8px;
    border-top:1px solid rgba(148,163,184,.55);
    display:flex;
    justify-content:space-between;
    align-items:stretch;
    gap:14px;
    flex-wrap:wrap;
  }

  /* Meta bên trái: FILE / NHÓM / NGÀY – xếp dạng lưới 2 cột */
  .tp-manager-card-meta{
    display:flex;
    flex-direction:column;
    gap:4px;
    min-width:0;
  }

  .tp-manager-card-meta-right{
    text-align:right;
    align-items:flex-end;
  }

  .tp-meta-row{
    display:grid;
    grid-template-columns:minmax(0,70px) minmax(0,1fr);
    column-gap:6px;
    font-size:11px;
    align-items:center;
  }

  .tp-meta-label{
    opacity:.85;
  }

  .tp-meta-value{
    font-weight:600;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

     /* KHỐI NHÂN VIÊN / QUẢN LÝ – cụm nằm bên phải,
     bên trái luôn là Quản lý, sau đó mũi tên → Nhân viên */
  .tp-manager-card-meta-people{
    display:flex;
    flex-direction:row;
    justify-content:flex-end;   /* đẩy cả cụm sang sát bên phải card khi có cả 2 */
    align-items:center;
    gap:10px;
    text-align:center;
    min-width:180px;
  }

  /* NEW: khi chỉ có 1 "Quản lý" (bộ chuẩn do manager upload trực tiếp),
     footer dùng layout .tp-manager-card-footer-single,
     và cụm Quản lý được căn giữa card */
  .tp-manager-card-footer-single .tp-manager-card-meta-manager-only{
    justify-content:center;
    align-items:center;
    text-align:center;
    margin-top:4px;
  }

  /* NEW: riêng pill "Quản lý" ở trạng thái manager-only → làm to hơn cho cân card */
  .tp-manager-card-footer-single .tp-manager-card-meta-manager-only .tp-meta-person-role{
    font-size:11px;             /* to hơn 1 cấp */
    padding:4px 16px;           /* pill dày và dài hơn */
    letter-spacing:.18em;       /* chữ thưa hơn nhìn “xịn” hơn */
    min-width:160px;            /* pill đủ rộng khi tên ngắn */
    box-shadow:0 6px 14px rgba(15,23,42,.8);
  }

  .tp-meta-person{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:3px;
    max-width:160px;
  }

  .tp-meta-person-role{
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.14em;
    padding:2px 8px;
    border-radius:999px;
    background:rgba(15,23,42,.9);
    color:#e5e7eb;
    border:1px solid rgba(148,163,184,.9);
    box-shadow:0 4px 10px rgba(15,23,42,.7);
  }

  .tp-meta-person-name{
    font-size:12px;
    font-weight:700;
    white-space:normal;      /* cho phép xuống dòng khi tên dài */
    overflow:visible;
    text-overflow:clip;
  }

  /* Mũi tên nối Quản lý duyệt → Nhân viên */
  .tp-meta-arrow{
    font-size:14px;
    padding:0 2px;
    opacity:.9;
  }

  @media (prefers-color-scheme: light){
    .tp-meta-person-role{
      background:#f9fafb;
      color:#0f172a;
      border-color:rgba(148,163,184,.9);
      box-shadow:0 4px 10px rgba(15,23,42,.16);
    }

    /* Light mode vẫn giữ style to hơn cho pill Quản lý */
    .tp-manager-card-footer-single .tp-manager-card-meta-manager-only .tp-meta-person-role{
      box-shadow:0 6px 14px rgba(148,163,184,.45);
    }
  }

    /* Hàng action: nút download + xoá bộ chuẩn */
    .tp-manager-card-actions{
        margin-top:8px;
        display:flex;
        justify-content:flex-end;
        gap:8px;
      }
    
      /* Nút tải file: nền sáng + chữ đen để nổi trên card tối,
         vẫn đẹp ở light mode vì card phía sau là pastel */
      .tp-manager-card-actions .tp-btn{
        padding:6px 11px;
        font-size:12px;
        border-radius:999px;
        background:#f9fafb;
        color:#020617; /* CHỮ ĐEN GẦN NHƯ FULL ĐEN */
        border:1px solid rgba(148,163,184,.9);
        box-shadow:0 4px 10px rgba(15,23,42,.55);
      }
    
      .tp-manager-card-actions .tp-btn:hover{
        filter:brightness(1.05);
        transform:translateY(0.5px);
      }
    
      .tp-manager-card-actions .tp-btn:active{
        transform:translateY(1px);
        box-shadow:0 2px 5px rgba(15,23,42,.45);
      }
    
      /* Nút xoá: đỏ, chữ sáng – chỉ dùng cho .tp-btn-danger */
      .tp-manager-card-actions .tp-btn-danger{
        background:#b91c1c;
        color:#fee2e2;
        border-color:rgba(248,113,113,.95);
        box-shadow:0 4px 10px rgba(185,28,28,.75);
      }
      .tp-manager-card-actions .tp-btn-danger:hover{
        filter:brightness(1.05);
      }
      .tp-manager-card-actions .tp-btn-danger:active{
        transform:translateY(1px);
        box-shadow:0 2px 6px rgba(127,29,29,.7);
      }
    
      @media (prefers-color-scheme: light){
        .tp-manager-card-actions .tp-btn{
          box-shadow:0 4px 10px rgba(15,23,42,.18);
        }
        .tp-manager-card-actions .tp-btn-danger{
          box-shadow:0 4px 10px rgba(248,113,113,.45);
        }
      }
  
/* Paging cho danh sách bộ dữ liệu chuẩn (3 card / trang) */
.tp-manager-paging{
    margin-top:10px;
    padding-top:8px;
    border-top:1px dashed rgba(148,163,184,.45);
  
    /* NEW: span toàn bộ chiều ngang grid + canh giữa */
    grid-column:1 / -1;
    display:flex;
    justify-content:center;   /* luôn nằm giữa ngang */
    align-items:center;
    gap:8px;
    font-size:12px;
    text-align:center;
  }
  
  .tp-manager-page-indicator{
    opacity:.85;
  }
  
  .tp-manager-page-btn{
    border-radius:999px;
    padding:4px 10px;
    border:1px solid rgba(148,163,184,.9);
    background:rgba(15,23,42,.85);
    color:#e5e7eb;
    font-size:12px;
    cursor:pointer;
  }
  
  .tp-manager-page-btn[disabled]{
    opacity:.35;
    cursor:default;
  }
  
  @media (prefers-color-scheme: light){
    .tp-manager-page-btn{
      background:#ffffff;
      color:#111827;
      border-color:rgba(148,163,184,.85);
      box-shadow:0 4px 10px rgba(15,23,42,.08);
    }
  }
      
  /* State trống dùng chung */
  
  .tp-state-empty{
    grid-column:1 / -1;
    padding:18px 16px;
    border-radius:14px;
    border:1px dashed var(--border);
    background:linear-gradient(145deg,#f9fafb,#e5edff);
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:4px;
  }
  .tp-empty-icon{
    font-size:24px;
    margin-bottom:4px;
  }
  .tp-empty-title{
    font-weight:800;
    font-size:14px;
    color:#0b1120;       /* đậm hơn */
  }
  .tp-empty-msg{
    margin:0;
    font-size:13px;
    color:#374151;        /* xám đậm */
  }
  .tp-empty-hint{
    margin:2px 0 0;
    font-size:12px;
    color:#4b5563;
    opacity:.95;
  }
  
  /* Divider */
  
  .tp-divider{
    height:1px;
    margin:0 20px;
    background:linear-gradient(90deg,transparent,rgba(148,163,184,.65),transparent);
    opacity:.9;
  }
  
  /* ===== TOGGLE ===== */
  
  .tp-toggle{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:13px;
    cursor:pointer;
  }
  .tp-toggle input{
    display:none;
  }
  .tp-toggle-deco{
    width:30px;
    height:18px;
    border-radius:999px;
    border:1px solid var(--border);
    background:#e5e7eb;
    position:relative;
    transition:background .18s ease,border-color .18s ease;
  }
  .tp-toggle-deco::after{
    content:"";
    position:absolute;
    top:2px;
    left:3px;
    width:12px;
    height:12px;
    border-radius:999px;
    background:#0f172a;
    box-shadow:0 1px 3px rgba(0,0,0,.25);
    transition:transform .18s ease;
  }
  .tp-toggle input:checked + .tp-toggle-deco{
    background:linear-gradient(135deg,var(--ok),var(--ok-2));
    border-color:rgba(34,197,94,.7);
  }
  .tp-toggle input:checked + .tp-toggle-deco::after{
    transform:translateX(10px);
  }
  .tp-toggle-label{
    color:#111827; /* text đậm để đọc rõ trong khối trắng */
  }
  
  /* ===== HÀNG UPLOAD / HƯỚNG DẪN ===== */
  
  .tp-upload-row{
    display:grid;
    grid-template-columns:minmax(0,2.2fr) minmax(0,1fr);
    gap:14px;
    margin-bottom:14px;
  }
  @media (max-width:900px){
    .tp-upload-row{grid-template-columns:1fr;}
  }
 
 /* Upload zone – mặc định cho NHÂN VIÊN: nhìn như nút bấm lớn + dropzone */
.tp-upload-zone{
    border-radius:var(--radius-sm,14px);
    border:1px dashed var(--border);
    background:linear-gradient(180deg,#f9fafb,#eef2ff);
    padding:14px 14px 12px;
    display:flex;
    gap:12px;
    align-items:flex-start;
    color:#0f172a; /* text đậm trong vùng upload */
  
    cursor:pointer; /* 👈 nhìn là biết bấm được */
    transition:
      background .18s ease,
      border-color .18s ease,
      box-shadow .18s ease,
      transform .06s ease;
  }
  
  /* Hover cho nhân viên: giống 1 nút CTA */
  .tp-upload-zone:hover{
    border-style:solid;
    border-color:rgba(59,130,246,.9);
    box-shadow:
      0 0 0 1px rgba(59,130,246,.35),
      0 10px 24px rgba(15,23,42,.16);
    transform:translateY(-1px);
  }
  
  /* Trạng thái đang kéo file vào (drag over) */
  .tp-upload-zone.drag-over{
    border-style:solid;
    border-color:rgba(59,130,246,1);
    box-shadow:
      0 0 0 1px rgba(59,130,246,.45),
      0 14px 32px rgba(15,23,42,.22);
    background:linear-gradient(180deg,#e0f2fe,#e5edff);
  }
  
  /* View chỉ đọc dành cho quản lý – không còn là nút upload */
  .tp-upload-zone.tp-upload-zone-manager-view{
    background:linear-gradient(180deg,#f9fafb,#f3f4ff);
    cursor:default;             /* 👈 không phải nút */
    box-shadow:none;
    transform:none;
  }
  
  /* Manager hover thì không “nhảy” như nút */
  .tp-upload-zone.tp-upload-zone-manager-view:hover{
    border-style:dashed;
    border-color:var(--border);
    box-shadow:none;
    transform:none;
  }
  
  /* Manager: mô tả nhạt đi một chút */
  .tp-upload-zone.tp-upload-zone-manager-view .tp-upload-desc{
    color:#4b5563;
  }
  
  /* Thêm dòng CTA nhỏ “Bấm hoặc thả file…” chỉ cho nhân viên (không phải manager-view) */
  .tp-upload-zone:not(.tp-upload-zone-manager-view) .tp-upload-title::after{
    content:"Bấm để upload";
    font-weight:600;
    font-size:12px;
    margin-left:4px;
    color:#1d4ed8;
  }
  
  /* Manager-view thì không thêm câu CTA */
  .tp-upload-zone.tp-upload-zone-manager-view .tp-upload-title::after{
    content:"";
  }

  .tp-upload-icon{
    font-size:22px;
    flex-shrink:0;
  }
  .tp-upload-title{
    font-weight:700;
    font-size:14px;
    color:#0b1120;
  }
  .tp-upload-desc{
    margin:4px 0 0;
    font-size:13px;
    color:#374151;
    line-height:1.6;
  }
  .tp-upload-desc strong{
    color:#0b1120;
  }
  
  .tp-upload-meta{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
    gap:8px;
  }
  .tp-upload-box{
    border-radius:12px;
    border:1px solid var(--border);
    background:#ffffff;
    padding:10px 12px;
    color:#0f172a;
  }
  .tp-upload-label{
    font-size:12px;
    color:#4b5563;
  }
  .tp-upload-value{
    margin-top:4px;
    font-weight:800;
    color:#0b1120;
  }
  
  /* ===== BẢNG FILE NHÂN VIÊN – bảng nền trắng để dễ đọc (dark mode cũng tương phản) ===== */
  
  .tp-table-shell{
    border-radius:var(--radius-sm,14px);
    border:1px solid var(--border);
    background:#ffffff; /* nền bảng trắng */
    overflow:hidden;
    box-shadow:0 14px 32px rgba(15,23,42,.18);
  }
  
  /* Layout lưới các cột */
  .tp-row{
    display:grid;
    grid-template-columns:
      minmax(46px,0.5fr)         /* STT */
      minmax(220px,2fr)          /* Tên file */
      minmax(130px,1.2fr)        /* Người tải lên */
      minmax(110px,1fr)          /* Nhóm */
      minmax(110px,1fr)          /* Ngày tải */
      minmax(140px,1.2fr)        /* Model gốc */
      minmax(90px,.9fr)          /* Loại */
      minmax(90px,.8fr)          /* Dung lượng */
      minmax(110px,.9fr);        /* Trạng thái */
    align-items:center;
    gap:4px;
  }
  
  @media (max-width:1024px){
    .tp-table-shell{overflow:auto;}
  }
  
  /* Header: nền xanh nhạt, text đậm để đọc buổi tối */
  .tp-table-head{
    padding:10px 12px;
    border-bottom:1px solid var(--border-soft,rgba(148,163,184,.35));
    background:#e5edff; /* trắng xanh nhạt */
    position:sticky;
    top:0;
    z-index:1;
  }
  .tp-table-head .tp-col{
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.12em;
    color:#1f2937; /* text đậm hơn cho dark mode */
  }
/* ===== SEARCH + MENU FILTER RIÊNG CHO BẢNG NHÂN VIÊN ===== */

/* Cột bên phải: chứa thanh search (bên trong có filter) */
.tp-emp-actions{
  margin-left:auto;
  max-width:440px;
  display:flex;
  flex-direction:column;
  align-items:stretch;
}

/* Hàng trên hiện chỉ còn 1 thanh search, vẫn để flex để sau này mở rộng dễ */
.tp-emp-top{
  display:flex;
  align-items:stretch;
  gap:8px;
}

/* Thanh search chiếm full chiều ngang */
.tp-emp-search-inline{
  flex:1 1 auto;
  display:flex;
  align-items:stretch;
}

.tp-emp-search-inline .tp-search-wrap{
  width:100%;
  max-width:none; /* override max-width 260px của tp-search-wrap mặc định */
}

/* Bên trong thanh search có thêm khu filter ở mép phải */
.tp-search-inner.tp-search-with-filter{
  display:flex;
  align-items:center;
  gap:6px;
}

/* ===== BỘ LỌC NẰM BÊN TRONG THANH SEARCH (EMPLOYEE + MANAGER) ===== */

.tp-emp-filter-wrap,
.tp-mgr-filter-wrap {
  position:relative;
  flex:0 0 auto;
  margin-left:4px;
  padding-left:4px;
  display:flex;
  align-items:center;
}

/* Nút filter dạng inline, giống dropdown mặc định: chỉ có chữ + caret ▾ */
.tp-emp-filter-toggle,
.tp-mgr-filter-toggle {
  appearance:none;
  border:none;
  outline:none;
  background:transparent;
  cursor:pointer;

  display:inline-flex;
  align-items:center;
  gap:4px;

  padding:0 0 0 8px;
  margin:0;

  border-left:1px solid rgba(148,163,184,.55);

  font-size:12px;
  font-weight:600;
  color:#6b7280;
}

.tp-emp-filter-inline-label,
.tp-mgr-filter-inline-label {
  white-space:nowrap;
}

.tp-emp-filter-inline-caret,
.tp-mgr-filter-inline-caret {
  font-size:10px;
  line-height:1;
  margin-top:1px;
}

.tp-emp-filter-toggle:hover,
.tp-mgr-filter-toggle:hover {
  color:#111827;
}

.tp-emp-filter-toggle:focus-visible,
.tp-mgr-filter-toggle:focus-visible {
  outline:2px solid rgba(59,130,246,.9);
  outline-offset:2px;
}

@media (prefers-color-scheme: light){
  .tp-emp-filter-toggle,
  .tp-mgr-filter-toggle {
    border-left-color:rgba(148,163,184,.65);
    color:#6b7280;
  }
}

/* ===== MENU FILTER xổ xuống – overlay gắn liền với thanh search ===== */

.tp-emp-filter-menu,
.tp-mgr-filter-menu {
  position:absolute;
  top:calc(100% + 6px);
  right:0;

  width:min(360px, 88vw);
  max-height:min(420px, 70vh);

  padding:8px;
  border-radius:14px;
  border:1px solid rgba(148,163,184,.85);
  background:rgba(15,23,42,.98);
  box-shadow:
    0 18px 40px rgba(15,23,42,.80),
    0 0 0 1px rgba(15,23,42,1);

  display:flex;
  flex-direction:column;
  gap:6px;

  opacity:0;
  transform:translateY(-6px);
  pointer-events:none;
  z-index:60;
  transition:
    opacity .16s ease-out,
    transform .16s ease-out;
}

/* Mũi tên nhỏ – làm rõ sự gắn liền với thanh search */
.tp-emp-filter-menu::before,
.tp-mgr-filter-menu::before {
  content:"";
  position:absolute;
  top:-10px;                        /* đẩy mũi tên lên cao hơn, chạm sát viền input */
  right:22px;                       /* canh lại cho đúng mép cụm filter */
  border-width:0 9px 10px 9px;      /* mũi tên to hơn, rõ hơn */
  border-style:solid;
  border-color:transparent transparent rgba(15,23,42,.98) transparent;
  filter:drop-shadow(0 -1px 0 rgba(148,163,184,.85));  /* tạo viền mảnh nối với khung */
}

@media (prefers-color-scheme: light){
  .tp-emp-filter-menu,
  .tp-mgr-filter-menu {
    background:#ffffff;
    border-color:rgba(148,163,184,.75);
    box-shadow:0 16px 32px rgba(15,23,42,.20);
    color:#0f172a;
  }

  /* Mũi tên trong light mode – nền trắng + viền xám để nối khung rõ hơn */
  .tp-emp-filter-menu::before,
  .tp-mgr-filter-menu::before {
    border-color:transparent transparent #ffffff transparent;
    filter:drop-shadow(0 -1px 0 rgba(148,163,184,.75));
  }

  .tp-emp-filter-item,
  .tp-mgr-filter-item {
    background:#f9fafb;
    border-color:rgba(148,163,184,.70);
    color:#0f172a;
  }
  .tp-emp-filter-item:hover,
  .tp-mgr-filter-item:hover {
    background:#e5edff;
    border-color:rgba(129,140,248,.90);
  }
  .tp-emp-filter-check,
  .tp-mgr-filter-check {
    background:#ffffff;
    border-color:rgba(148,163,184,.80);
  }
  .tp-emp-filter-hint,
  .tp-mgr-filter-hint {
    color:#6b7280;
  }
}

/* Mở menu */
.tp-emp-filter-wrap.tp-emp-filter-open .tp-emp-filter-menu,
.tp-mgr-filter-wrap.tp-mgr-filter-open .tp-mgr-filter-menu {
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}

/* Item trong menu – giống item lịch sử chat, nhưng tối ưu cho checkbox */
.tp-emp-filter-item,
.tp-mgr-filter-item {
  position:relative;
  display:flex;
  align-items:flex-start;
  gap:8px;
  padding:7px 9px;
  border-radius:10px;
  cursor:pointer;

  font-size:12px;
  color:#e5e7eb;

  background:rgba(15,23,42,.90);
  border:1px solid rgba(31,41,55,.85);
}
.tp-emp-filter-item:hover,
.tp-mgr-filter-item:hover {
  background:rgba(30,64,175,.95);
  border-color:rgba(191,219,254,.90);
}

/* Ẩn checkbox gốc */
.tp-emp-filter-item input[type="checkbox"],
.tp-mgr-filter-item input[type="checkbox"] {
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.tp-emp-filter-check,
.tp-mgr-filter-check {
  width:16px;
  height:16px;
  border-radius:6px;
  border:1px solid rgba(148,163,184,.80);
  background:rgba(15,23,42,.96);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  margin-top:2px;
  flex-shrink:0;
  transition:
    background .14s ease-out,
    border-color .14s ease-out,
    box-shadow .14s ease-out,
    transform .10s ease-out;
}

.tp-emp-filter-item input[type="checkbox"]:checked + .tp-emp-filter-check,
.tp-mgr-filter-item input[type="checkbox"]:checked + .tp-mgr-filter-check {
  background:linear-gradient(135deg,#16a34a,#22c55e);
  border-color:rgba(34,197,94,.95);
  box-shadow:0 0 0 1px rgba(15,23,42,.95);
  transform:translateY(-0.5px);
}
.tp-emp-filter-item input[type="checkbox"]:checked + .tp-emp-filter-check::before,
.tp-mgr-filter-item input[type="checkbox"]:checked + .tp-mgr-filter-check::before {
  content:"✓";
}

/* Text 2 dòng */
.tp-emp-filter-copy,
.tp-mgr-filter-copy {
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}
.tp-emp-filter-title,
.tp-mgr-filter-title {
  font-weight:600;
  white-space:normal;
}
.tp-emp-filter-hint,
.tp-mgr-filter-hint {
  font-size:11px;
  color:rgba(209,213,219,.96);
}

@media (prefers-color-scheme: light){
  .tp-emp-filter-menu,
  .tp-mgr-filter-menu {
    background:#ffffff;
    border-color:rgba(148,163,184,.75);
    box-shadow:0 16px 32px rgba(15,23,42,.20);
    color:#0f172a;
  }
  .tp-emp-filter-menu::before,
  .tp-mgr-filter-menu::before {
    border-color:transparent transparent #ffffff transparent;
  }
  .tp-emp-filter-item,
  .tp-mgr-filter-item {
    background:#f9fafb;
    border-color:rgba(148,163,184,.70);
    color:#0f172a;
  }
  .tp-emp-filter-item:hover,
  .tp-mgr-filter-item:hover {
    background:#e5edff;
    border-color:rgba(129,140,248,.90);
  }
  .tp-emp-filter-check,
  .tp-mgr-filter-check {
    background:#ffffff;
    border-color:rgba(148,163,184,.80);
  }
  .tp-emp-filter-hint,
  .tp-mgr-filter-hint {
    color:#6b7280;
  }
}

/* Mobile & tablet: search (kèm filter) full width */
@media (max-width:900px){
  .tp-emp-actions{
    margin-left:0;
    max-width:100%;
  }

  .tp-emp-top{
    flex-direction:column;
    align-items:stretch;
  }

  .tp-emp-filter-wrap{
    align-self:flex-end;
  }
}

@media (max-width:720px){
  .tp-emp-actions{
    margin-left:0;
    max-width:100%;
  }

  .tp-emp-search-inline .tp-search-wrap{
    max-width:100%;
  }
}

  /* Thân bảng – hàng trắng / xám nhạt xen kẽ */
  .tp-table-body{
    max-height:48vh;
    overflow:auto;
  }
  .tp-table-body .tp-row{
    padding:9px 12px;
    border-bottom:1px solid rgba(148,163,184,.25);
  }
  .tp-table-body .tp-row:nth-child(odd){
    background:#ffffff;
  }
  .tp-table-body .tp-row:nth-child(even){
    background:#f9fafb;
  }
 
    /* Thanh phân trang riêng cho bảng nhân viên (khi > 50 file) */
    .tp-emp-paging{
        padding:10px 12px;
        border-top:1px dashed rgba(148,163,184,.45);
        background:#f3f4ff;
        display:flex;
        justify-content:center;
        align-items:center;
        gap:8px;
        font-size:12px;
      }

  /* Cột STT – canh giữa, số tabular để thẳng hàng đẹp hơn */
  .tp-col-index{
    text-align:center;
    font-size:12px;
    font-variant-numeric:tabular-nums;
    color:#4b5563;
  }

  /* Cột tên file: wrap để đặt nút tải cạnh tên */
  .tp-col-name{
    overflow:hidden;
  }

  .tp-file-name-wrap{
    display:flex;
    align-items:center;
    gap:6px;
    max-width:100%;
  }

  .tp-file-name{
    font-weight:600;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

/* Nút tải nhỏ bên cạnh tên file (bảng nhân viên) – flatt, không đổ bóng */
.tp-file-download-btn{
    padding:3px 9px;
    border-radius:999px;
    border:1px solid rgba(148,163,184,.8);
    background:#ffffff;
    font-size:11px;
    font-weight:600;
    cursor:pointer;
    white-space:nowrap;
    box-shadow:none;              /* không đổ bóng */
  }
  .tp-file-download-btn:hover{
    filter:brightness(1.05);
    transform:translateY(0.5px);
  }
  .tp-file-download-btn:active{
    transform:translateY(1px);
    box-shadow:none;
  }
  
  /* Nút tải trên card “Bộ dữ liệu chuẩn” (tp-btn-download) – cho manager */
  .tp-manager-card .tp-btn-download{
    padding:7px 12px;
    border-radius:999px;
    font-size:12px;
    font-weight:600;
    white-space:nowrap;
    cursor:pointer;
  
    background:#ffffff;
    color:#0f172a;
    border:1px solid rgba(148,163,184,.85);
    box-shadow:none;
  }
  .tp-manager-card .tp-btn-download:hover{
    filter:brightness(1.04);
    transform:translateY(0.5px);
  }
  .tp-manager-card .tp-btn-download:active{
    transform:translateY(1px);
    box-shadow:none;
  }
  
  /* Nút xoá file ở bảng nhân viên – ĐÚNG class là .tp-emp-delete */
  .tp-emp-delete{
    padding:3px 10px;
    border-radius:999px;
    font-size:11px;
    font-weight:600;
    white-space:nowrap;
    cursor:pointer;
  
    background:#fef2f2;      /* nền hồng rất nhạt */
    color:#b91c1c;           /* chữ đỏ đậm */
    border:1px solid #f97373;/* viền đỏ tươi hơi nhạt hơn chữ */
    box-shadow:none;
  }
  .tp-emp-delete:hover{
    background:#fee2e2;
    filter:brightness(1.02);
  }
  .tp-emp-delete:active{
    background:#fecaca;
    transform:translateY(1px);
  }
  
  /* Các cột phụ dùng màu xám đậm, vẫn đủ tương phản ban đêm */
  .tp-col-owner,
  .tp-col-team,
  .tp-col-model,
  .tp-col-date,
  .tp-col-type,
  .tp-col-size{
    color:#4b5563;
  }
  
  .tp-col-status{
    justify-self:flex-start;
    display:flex;
    align-items:center;
    gap:6px;
    flex-wrap:wrap;
  }

   /* Wrap cho badge + icon mũi tên – chỉ chứa trigger, menu được tách ra overlay */
   .tp-status-menu-wrap{
    position:relative;
    display:inline-flex;
    align-items:center;
  }

  /* Nút trạng thái có phần bấm chọn luôn nằm bên phải text */
  .tp-status-menu-toggle{
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    gap:4px;                 /* mũi tên đứng ngay bên phải text */
    position:relative;
    padding:3px 12px;        /* đủ rộng để bấm thoải mái */
  }

  /* Mũi tên nhỏ, màu đen, đặt ngay cạnh chữ (không đè lên text) */
  .tp-status-menu-toggle::after{
    content:"▾";
    font-size:11px;
    font-weight:700;
    line-height:1;
    color:#111827;           /* mũi tên đen để nổi rõ là nút bấm */
  }

  /* Dropdown menu – tách hẳn ra khỏi bảng, hiển thị như overlay */
  .tp-status-menu{
    position:fixed;
    z-index:1400;              /* cao hơn mọi khung trong Train Platform */
    min-width:140px;
    padding:6px;
    border-radius:12px;
    border:1px solid var(--border);
    background:#ffffff;
    box-shadow:0 14px 34px rgba(15,23,42,.28);
    display:none;
    flex-direction:column;
    gap:4px;
  }
  .tp-status-menu.open{
    display:flex;
  }

  .tp-status-menu-item{
    border-radius:999px;
    padding:5px 10px;
    border:1px solid transparent;
    font-size:12px;
    font-weight:600;
    cursor:pointer;
    text-align:left;
    white-space:nowrap;
  }

  /* Màu cho Duyệt / Từ chối trong dropdown – giữ nguyên tông */
  .tp-status-menu-item.tp-emp-approve{
    background:linear-gradient(135deg,var(--ok,#22c55e),var(--ok-2,#16a34a));
    color:#ecfdf5;
    border-color:rgba(34,197,94,.9);
  }

  .tp-status-menu-item.tp-emp-reject{
    background:linear-gradient(135deg,#ef4444,#f97373);
    color:#fef2f2;
    border-color:rgba(239,68,68,.9);
  }

  .tp-status-menu-item:hover{
    filter:brightness(1.05);
  }

    /* Badge trạng thái trong bảng – làm màu rõ, chữ dễ đọc hơn */
    .tp-badge{
        display:inline-flex;
        align-items:center;
        gap:4px;
        padding:3px 9px;
        border-radius:999px;
        font-size:11px;
        font-weight:700;
        border:1px solid var(--border);
        letter-spacing:.02em;
      }
    
      /* ĐÃ DUYỆT – nền xanh đậm, chữ trắng */
      .tp-badge.ok{
        background:linear-gradient(135deg,#16a34a,#22c55e);
        color:#ecfdf5;
        border-color:rgba(22,163,74,1);
        box-shadow:0 3px 8px rgba(22,163,74,.35);
      }
    
      /* CHỜ DUYỆT – nền cam, chữ sậm hơn để không bị “mờ” */
      .tp-badge.pending{
        background:linear-gradient(135deg,#ea580c,#f97316);
        color:#fff7ed;
        border-color:rgba(234,88,12,1);
        box-shadow:0 3px 8px rgba(234,88,12,.35);
      }
    
      /* TỪ CHỐI / LỖI – nền đỏ đậm, chữ trắng */
      .tp-badge.err{
        background:linear-gradient(135deg,#dc2626,#ef4444);
        color:#fef2f2;
        border-color:rgba(220,38,38,1);
        box-shadow:0 3px 8px rgba(220,38,38,.35);
      }
  
  /* State trống trong bảng – nền xám rất nhạt, chữ đậm hơn để đọc dễ */
  .tp-row-empty{
    grid-template-columns:1fr;
    padding:18px 14px;
    background:#f9fafb;
    border-bottom:1px solid rgba(148,163,184,.25);
  }
  .tp-row-empty-inner{
    text-align:center;
    max-width:520px;
    margin:0 auto;
  }
  
  /* ===== FOOTER ===== */
  
  .tp-foot{
    margin-top:12px;
  }
  .tp-foot-note{
    font-size:12px;
    color:#4b5563;
    border-radius:10px;
    border:1px dashed var(--border);
    padding:8px 10px;
    background:#ffffff;
  }
  
  /* ===== RESPONSIVE ===== */
  
  @media (max-width:720px){
    .tp-hero{
      margin:12px 12px 8px;
      padding:10px 12px 12px;
    }
    .tp-title{
      font-size:20px;
    }
    .tp-hero-actions{
      align-items:stretch;
      min-width:100%;
    }

  
    .tp-section{
      margin:10px 10px;
      padding:14px 14px;
    }
 }

 /* ===== MANAGER DATASET MODAL (popup mờ nền) ===== */

 .tp-manager-modal{
    position:fixed;
    inset:0;
    z-index:1300;
    display:flex;
    align-items:center;          /* căn giữa popup theo chiều dọc */
    justify-content:center;
    padding:24px 16px;           /* giảm padding ngoài để lấy thêm chiều cao usable */
  }
  
  .tp-manager-modal.hidden{
    display:none;
  }
  
  .tp-manager-modal-backdrop{
    position:absolute;
    inset:0;
    background:rgba(15,23,42,.68);
    backdrop-filter:blur(12px);
  }
  
  .tp-manager-modal-body{
    position:relative;
    width:100%;
    max-width:640px;
    max-height:calc(100vh - 80px);   /* không cho popup cao quá màn hình */
    border-radius:22px;
    border:1px solid rgba(148,163,184,.8);
    background:linear-gradient(145deg,rgba(15,23,42,.98),rgba(15,23,42,.92));
    box-shadow:
      0 30px 80px rgba(15,23,42,.85),
      0 0 0 1px rgba(15,23,42,.9);
    color:#e5e7eb;
    padding:16px 18px 12px;         /* thu gọn padding cho form thấp hơn */
    display:flex;
    flex-direction:column;
    gap:12px;
    overflow:hidden;                /* phần nội dung bên trong tự scroll */
    animation:tpModalIn .18s ease-out;
  }
  
  @media (prefers-color-scheme: light){
    .tp-manager-modal-body{
      background:
        radial-gradient(circle at 0 0,rgba(191,219,254,.9),transparent 55%),
        linear-gradient(145deg,#ffffff,#eef2ff);
      color:#0f172a;
      box-shadow:0 24px 64px rgba(15,23,42,.24);
    }
  }
  
  @media (max-width:720px){
    .tp-manager-modal{
      padding:16px 10px;
    }
    .tp-manager-modal-body{
      max-width:100%;
      max-height:calc(100vh - 40px);   /* sát mép màn hình hơn trên mobile */
      border-radius:18px;
    }
    .tp-manager-modal-grid{
      max-height:calc(100vh - 150px);
    }
  }

  @keyframes tpModalIn{
    from{opacity:0;transform:translateY(8px) scale(.98);}
    to{opacity:1;transform:translateY(0) scale(1);}
  }
  
  .tp-manager-modal-head{
    display:flex;
    justify-content:space-between;
    gap:12px;
    align-items:flex-start;
  }
  
  .tp-manager-modal-title{
    margin:0 0 4px;
    font-size:18px;
    font-weight:800;
  }
  
  .tp-manager-modal-sub{
    margin:0;
    font-size:13px;
    line-height:1.6;
    opacity:.9;
  }
  
  .tp-manager-modal-sub code{
    font-family:var(--mono);
    padding:2px 6px;
    border-radius:999px;
    background:rgba(15,23,42,.5);
    font-size:12px;
  }
  @media (prefers-color-scheme: light){
    .tp-manager-modal-sub code{
      background:rgba(15,23,42,.06);
    }
  }
  
  .tp-manager-modal-close{
    border:none;
    background:rgba(15,23,42,.65);
    border-radius:999px;
    width:28px;
    height:28px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:#e5e7eb;
    cursor:pointer;
    box-shadow:0 6px 16px rgba(15,23,42,.8);
  }
  .tp-manager-modal-close:hover{
    filter:brightness(1.08);
  }
  @media (prefers-color-scheme: light){
    .tp-manager-modal-close{
      background:#e5e7eb;
      color:#111827;
      box-shadow:0 6px 16px rgba(15,23,42,.24);
    }
  }
  
  .tp-manager-modal-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
    margin-top:4px;

    /* NEW: chỉ phần form ở giữa cuộn, giữ header + nút Upload luôn lộ ra */
    max-height:calc(100vh - 210px);
    overflow:auto;
    padding-right:4px;                 /* chừa chỗ cho thanh cuộn */
    -webkit-overflow-scrolling:touch;
  }
  @media (min-width:720px){
    .tp-manager-modal-grid{
      grid-template-columns:repeat(2,minmax(0,1fr));
    }
    .tp-manager-modal-grid .tp-field-full{
      grid-column:1 / -1;
    }
  }
  
  /* Field styles dùng chung trong popup */
  
  .tp-field{
    display:flex;
    flex-direction:column;
    gap:4px;
  }
  
  .tp-field-label{
    font-size:12px;
    font-weight:600;
    letter-spacing:.02em;
  }
 
  .tp-field-input,
  .tp-field-textarea{
    border-radius:12px;
    border:1px solid rgba(148,163,184,.75);
    background:rgba(15,23,42,.85);
    color:#e5e7eb;
    padding:8px 10px;
    font-size:13px;
  }

    /* Radio pill cho lựa chọn Train / RAG, Khối / Dự án */
    .tp-dataset-type-row,
    .tp-org-mode-row{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
    }
  
    .tp-radio-pill{
      display:inline-flex;
      align-items:center;
      gap:6px;
      padding:5px 10px;
      border-radius:999px;
      border:1px solid rgba(148,163,184,.75);
      background:rgba(15,23,42,.85);
      cursor:pointer;
      font-size:12px;
    }
    .tp-radio-pill input{
      accent-color:var(--primary,#6366f1);
    }
    .tp-radio-pill span{
      white-space:nowrap;
    }
  
    @media (prefers-color-scheme: light){
      .tp-radio-pill{
        background:#ffffff;
        border-color:rgba(148,163,184,.85);
      }
    }
  
    /* Khối chọn HR/SME/... và thông tin dự án */
    .tp-org-block-wrap,
    .tp-org-project-wrap{
      margin-top:6px;
      display:flex;
      flex-direction:column;
      gap:6px;
    }
  
    .tp-org-sub-label{
      font-size:12px;
      font-weight:600;
    }
  
    .tp-org-project-existing{
      display:flex;
      flex-direction:column;
      gap:4px;
    }
  
    .tp-org-sub-label-inline{
      font-size:11px;
      opacity:.9;
    }

  .tp-field-input::placeholder,
  .tp-field-textarea::placeholder{
    color:rgba(148,163,184,.9);
  }
  .tp-field-textarea{
    resize:vertical;
    min-height:80px;
  }
  
  .tp-field-hint{
    margin:2px 0 0;
    font-size:11px;
    opacity:.9;
  }
  
  @media (prefers-color-scheme: light){
    .tp-field-input,
    .tp-field-textarea{
      background:#ffffff;
      color:#0f172a;
    }
  }
  
 /* Hàng actions trong popup – chỉ còn 1 nút Upload, căn giữa */
.tp-manager-modal-actions{
    margin-top:10px;
    display:flex;
    justify-content:center; /* căn giữa ngang */
    align-items:center;
    gap:8px;
  }

  .tp-manager-modal-actions #tpMgrSave{
    min-width:140px;
  }

/* ===== Upload Popup Simplified (Quik AI Platform) ===== */
#tpManagerCreatePanel .tp-manager-modal-sub,
#tpManagerCreatePanel .tp-field-hint{
  display:none !important;
}

#tpManagerCreatePanel .tp-manager-modal-body{
  max-width:760px;
  border-radius:16px;
}

#tpManagerCreatePanel .tp-manager-modal-grid{
  grid-template-columns:1fr !important;
  gap:12px;
  max-height:calc(100vh - 220px);
}

#tpManagerCreatePanel .tp-field-label{
  font-size:12px;
  font-weight:700;
}

#tpManagerCreatePanel .tp-field-input,
#tpManagerCreatePanel .tp-field-textarea{
  border-radius:10px;
}

#tpManagerCreatePanel #tpMgrFile{
  padding:10px;
  border:1px dashed rgba(148,163,184,.75);
  background:#f8fafc;
}

#tpManagerCreatePanel .tp-org-mode-row{
  gap:6px;
}

#tpManagerCreatePanel .tp-org-mode-row .tp-radio-pill span{
  padding:8px 10px;
}

#tpManagerCreatePanel .tp-file-meta{
  margin-top:8px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}

#tpManagerCreatePanel .tp-file-summary{
  font-size:12px;
  color:#475569;
}

#tpManagerCreatePanel .tp-file-clear{
  border:1px solid rgba(148,163,184,.75);
  background:#ffffff;
  color:#334155;
  border-radius:999px;
  padding:4px 10px;
  font-size:12px;
  font-weight:600;
  cursor:pointer;
}

#tpManagerCreatePanel .tp-file-clear:hover{
  background:#f1f5f9;
}

#tpManagerCreatePanel .tp-file-list{
  margin-top:8px;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  max-height:92px;
  overflow:auto;
}

#tpManagerCreatePanel .tp-file-chip{
  display:inline-flex;
  align-items:center;
  max-width:100%;
  padding:4px 10px;
  border-radius:999px;
  background:#eff6ff;
  color:#1d4ed8;
  font-size:12px;
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

#tpManagerCreatePanel .tp-file-chip-more{
  background:#e2e8f0;
  color:#334155;
}

#tpManagerCreatePanel .tp-manager-modal-actions #tpMgrSave{
  min-width:220px;
}

    /* ===== DETAIL MODAL (xem mô tả file train) ===== */

    .tp-detail-modal .tp-manager-modal-body{
        max-width:680px;
      }
    
      .tp-detail-meta{
        display:grid;
        grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
        gap:8px;
        margin-top:4px;
      }
    
      .tp-detail-meta-row{
        padding:6px 8px;
        border-radius:10px;
        border:1px solid rgba(148,163,184,.55);
        background:rgba(15,23,42,.70);
        font-size:12px;
        display:flex;
        flex-direction:column;
        gap:2px;
      }
    
      .tp-detail-meta-label{
        opacity:.8;
        text-transform:uppercase;
        letter-spacing:.10em;
        font-size:11px;
      }
    
      .tp-detail-meta-value{
        font-weight:600;
        word-break:break-word;
      }
    
      @media (prefers-color-scheme: light){
        .tp-detail-meta-row{
          background:#f9fafb;
          border-color:rgba(148,163,184,.8);
        }
      }
    
      .tp-detail-scroll{
        margin-top:10px;
        padding:10px 12px;
        border-radius:16px;
        border:1px solid rgba(148,163,184,.75);
        background:rgba(15,23,42,.9);
        max-height:52vh;
        overflow:auto;
        font-size:13px;
        line-height:1.7;
      }
    
      .tp-detail-section-title{
        font-size:12px;
        font-weight:700;
        text-transform:uppercase;
        letter-spacing:.12em;
        opacity:.9;
        margin-bottom:6px;
      }
    
      .tp-detail-desc{
        white-space:pre-wrap; /* giữ xuống dòng trong mô tả */
      }
    
      @media (prefers-color-scheme: light){
        .tp-detail-scroll{
          background:#ffffff;
          border-color:rgba(148,163,184,.9);
        }
      }