/* ════════════════════════════════════════════════════════════════
   RSA ERP — Enterprise Design System
   Inspired by: Microsoft Fabric · Azure Portal · Siemens Xcelerator
   ════════════════════════════════════════════════════════════════ */

/* ── 1. DESIGN TOKENS ─────────────────────────────────────────── */
:root {
  /* Color palette */
  --c-primary:#0B3D91; --c-secondary:#1976FF; --c-accent:#3BA4FF;
  --c-green:#3CB043; --c-dark:#071C38; --c-bg:#F4F8FC;
  --c-ink:#0d2547; --c-ink-2:#5a7292; --c-ink-3:#8fa5bd;

  /* Gradient palette */
  --g-blue:linear-gradient(135deg,#3BA4FF,#1976FF);
  --g-blue-deep:linear-gradient(135deg,#0B3D91,#1D8CF8);
  --g-green:linear-gradient(135deg,#49D46D,#2EA84A);
  --g-red:linear-gradient(135deg,#FF7D7D,#E53935);
  --g-orange:linear-gradient(135deg,#FFB74D,#F57C00);
  --g-cyan:linear-gradient(135deg,#67E8F9,#0EA5E9);
  --g-silver:linear-gradient(135deg,#B8C4D4,#8D99A6);
  --g-side:linear-gradient(180deg,#071C38 0%,#0B3D91 55%,#123F7A 100%);
  --g-active:linear-gradient(90deg,#2196F3,#0B5ED7);
  --g-panel:linear-gradient(180deg,#082C67,#071C38);
  --g-page:linear-gradient(180deg,#F8FBFF,#EEF5FD);
  --g-card:linear-gradient(180deg,rgba(255,255,255,.95),rgba(248,252,255,.90));
  --g-icircle:linear-gradient(180deg,#EEF7FF,#D8ECFF);

  /* Shadow system */
  --sh-1:0 4px 14px rgba(0,40,100,.06);
  --sh-2:0 15px 35px rgba(0,40,100,.08);
  --sh-3:0 20px 40px rgba(10,40,90,.10);
  --sh-hover:0 26px 55px rgba(10,40,90,.16);
  --sh-header:0 15px 40px rgba(29,140,248,.25);
  --sh-side:0 0 30px rgba(0,0,0,.25);
  --glow-blue:0 0 18px rgba(33,150,243,.55);
  --glow-cyan:0 0 14px rgba(0,212,255,.6);

  /* Radius system */
  --r-card:20px; --r-kpi:24px; --r-pill:999px; --r-input:12px; --r-menu:18px;

  /* Typography scale */
  --fs-hero:1.45rem; --fs-h:1rem; --fs-body:.875rem; --fs-sm:.75rem; --fs-xs:.68rem;

  /* Motion */
  --t-fast:.18s ease-out; --t-med:.3s ease-out;

  /* Patterns */
  --hexes:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='52' height='60'><path d='M26 2l20 12v24L26 50 6 38V14z' fill='none' stroke='%23ffffff' stroke-opacity='.06' stroke-width='1.5'/></svg>");
  --hexes-ink:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='52' height='60'><path d='M26 2l20 12v24L26 50 6 38V14z' fill='none' stroke='%230B3D91' stroke-opacity='.03' stroke-width='1.5'/></svg>");
}

/* ── 2. BASE / TYPOGRAPHY ─────────────────────────────────────── */
* { -webkit-font-smoothing:antialiased; }
body {
  font-family:'Inter','Plus Jakarta Sans','Segoe UI',system-ui,sans-serif;
  font-size:var(--fs-body); color:var(--c-ink); line-height:1.55;
  min-height:100vh; position:relative;
  background:var(--g-page) fixed;
}
body::before { /* radial glow góc phải trên + hexagon toàn trang */
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(600px 420px at 88% -5%, rgba(59,164,255,.20), transparent 70%),
    radial-gradient(420px 320px at -5% 100%, rgba(60,176,67,.08), transparent 70%),
    var(--hexes-ink);
}
.d-flex > .sidebar, .d-flex > .flex-grow-1 { position:relative; z-index:1; }
h1,h2,h3,h4,h5,h6 { font-weight:700; letter-spacing:-.01em; color:var(--c-ink); }

/* Lucide svg sizing (thay bootstrap-icons) */
svg.lucide { width:1em; height:1em; stroke-width:1.75; vertical-align:-.12em; }

/* ── 3. SIDEBAR ───────────────────────────────────────────────── */
.sidebar { width:172px; min-width:172px; color:#b6c9de;
  background:var(--g-side); box-shadow:var(--sh-side); position:relative; }
.sidebar::before { content:''; position:absolute; inset:0; pointer-events:none;
  background-image:var(--hexes); opacity:.85; }
.sidebar::after { content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(220px 200px at 10% 0%, rgba(59,164,255,.25), transparent 65%),
    radial-gradient(300px 280px at 100% 100%, rgba(60,176,67,.38), transparent 68%),
    linear-gradient(295deg, rgba(73,212,109,.16) 0%, transparent 32%); }
.sidebar > * { position:relative; z-index:1; }
.brand { color:#fff; font-weight:800; font-size:1.02rem; text-decoration:none; letter-spacing:.01em; }
.brand .bi, .brand svg { color:#49D46D; filter:drop-shadow(0 0 8px rgba(73,212,109,.9)); }
.brand small { display:block; font-size:.56rem; font-weight:500; color:#8fb0d4; letter-spacing:.14em; }
.side-label { font-size:.6rem; letter-spacing:.14em; color:#5f81a8; margin:.2rem 0 .3rem; font-weight:600; }
.side-link { display:block; color:#b6c9de; text-decoration:none; padding:.36rem .55rem;
  border-radius:var(--r-menu); margin-bottom:3px; font-size:.8rem; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; transition:all var(--t-fast); }
.side-link:hover { background:rgba(255,255,255,.08); color:#fff; transform:translateX(4px); }
.side-link.active { color:#fff; background:var(--g-active);
  box-shadow:var(--glow-blue); }
.side-link .edit-dot { font-size:.55rem; color:#49D46D; margin-left:5px; vertical-align:middle;
  filter:drop-shadow(0 0 4px rgba(73,212,109,.8)); }

/* ── 4. HEADER (glass, sticky) ────────────────────────────────── */
.topbar { position:sticky; top:0; z-index:1030;
  background:rgba(255,255,255,.72); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(11,61,145,.08);
  box-shadow:0 10px 30px rgba(29,140,248,.10); }
.topbar .input-group-text { border-radius:var(--r-pill) 0 0 var(--r-pill);
  background:rgba(244,248,252,.9); border-color:rgba(11,61,145,.10); }
.topbar .input-group .form-control { border-radius:0 var(--r-pill) var(--r-pill) 0;
  background:rgba(244,248,252,.9); border-color:rgba(11,61,145,.10); font-size:.82rem; }
.topbar .input-group .form-control:focus { box-shadow:0 0 0 3px rgba(59,164,255,.18); border-color:var(--c-accent); }
.topbar .btn-light { background:rgba(244,248,252,.9); border:1px solid rgba(11,61,145,.10);
  border-radius:var(--r-pill); transition:all var(--t-fast); }
.topbar .btn-light:hover { box-shadow:var(--sh-1); transform:translateY(-1px); }
.btn-ai { background:var(--g-blue-deep); color:#fff!important; border:none;
  border-radius:var(--r-pill); font-size:.78rem; font-weight:600;
  box-shadow:0 4px 16px rgba(29,140,248,.4); transition:all var(--t-fast); }
.btn-ai:hover { box-shadow:0 6px 22px rgba(29,140,248,.55); transform:translateY(-1px); color:#fff; }
.dept-badge { background:#e3edf8; color:var(--c-primary); }
.badge.bg-danger { background:var(--g-green)!important; }

/* ── 5. HERO (nền sáng + trái đất công nghệ) ──────────────────── */
.hero-light { border-radius:var(--r-kpi); position:relative; overflow:hidden;
  background:linear-gradient(115deg,#FFFFFF 0%,#EFF6FE 40%,#DDEBFB 75%,#CFE3FA 100%);
  border:1px solid rgba(255,255,255,.8); box-shadow:var(--sh-2); }
.hero-light::before { content:''; position:absolute; inset:0; pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='52' height='60'><path d='M26 2l20 12v24L26 50 6 38V14z' fill='none' stroke='%231976FF' stroke-opacity='.07' stroke-width='1.5'/></svg>"); }
.hero-light::after { /* trái đất */
  content:''; position:absolute; right:-50px; top:-130px; width:330px; height:330px;
  border-radius:50%; pointer-events:none; opacity:.5;
  background:radial-gradient(circle at 35% 32%, rgba(255,255,255,.95) 0%,
    rgba(160,205,255,.55) 28%, rgba(29,140,248,.6) 58%, rgba(11,61,145,.75) 100%);
  box-shadow:0 0 70px rgba(29,140,248,.5), inset -25px -30px 70px rgba(11,61,145,.55); }
.hero-light > * { position:relative; z-index:1; }

/* icon KPI nhấn mạnh: khối gradient + icon trắng */
.kpi-chip { width:38px; height:38px; border-radius:12px; flex-shrink:0;
  display:inline-flex; align-items:center; justify-content:center;
  color:#fff; font-size:1.05rem;
  box-shadow:0 6px 14px rgba(11,61,145,.30), inset 0 1px 2px rgba(255,255,255,.45); }
.kpi-chip svg, .kpi-chip .bi { color:#fff!important; }

/* ── 6. CARD SYSTEM (glass) ───────────────────────────────────── */
.card { background:rgba(255,255,255,.92); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.6); border-radius:var(--r-card);
  box-shadow:var(--sh-2); transition:transform var(--t-med), box-shadow var(--t-med); }
.card.p-3, .card.p-4 { background:var(--g-card); }
.kpi-card { text-decoration:none; color:inherit; }
.kpi-card:hover, .act-pill:hover { transform:translateY(-6px) scale(1.01); box-shadow:var(--sh-hover); }
.kpi-card .bi, .kpi-card svg { color:var(--c-secondary)!important; }

/* KPI finance card: glow góc phải theo màu KPI (biến --glow) */
.kpi-fin { position:relative; overflow:hidden; border-radius:var(--r-kpi);
  background:var(--g-card); border:1px solid rgba(255,255,255,.65); }
.kpi-fin::after { content:''; position:absolute; right:-30px; top:-30px; width:110px; height:110px;
  border-radius:50%; pointer-events:none; opacity:.16;
  background:radial-gradient(circle, var(--glow,#1976FF), transparent 70%); }
.kpi-fin:hover { transform:translateY(-5px); box-shadow:var(--sh-hover); }

/* icon trong glass circle */
.kpi-ico { display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:50%;
  background:var(--g-icircle); box-shadow:inset 0 1px 2px #fff, var(--sh-1); }
.robot-glow { box-shadow:var(--glow-cyan); }

/* ── 7. AI INSIGHT PANEL (Copilot style) ──────────────────────── */
.insight-panel, .card.insight-panel, .card.insight-panel.p-3 {
  border-radius:var(--r-kpi); position:relative; overflow:hidden;
  background:var(--g-panel)!important; box-shadow:0 20px 45px rgba(7,28,56,.45);
  display:flex; flex-direction:column; border:1px solid rgba(255,255,255,.08); }
.insight-panel::before { content:''; position:absolute; inset:0; pointer-events:none;
  background-image:var(--hexes); }
.insight-panel::after { content:''; position:absolute; right:-50px; bottom:-60px; width:240px; height:240px;
  border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(33,150,243,.35), transparent 70%); }
.insight-panel > * { position:relative; z-index:1; }
.insight-item { background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.10);
  border-radius:14px; padding:.5rem .6rem; backdrop-filter:blur(8px); transition:all var(--t-fast); }
.insight-item:hover { background:rgba(255,255,255,.12); transform:translateX(3px); }
.insight-panel .btn-light { border-radius:var(--r-pill); background:var(--g-blue);
  color:#fff; border:none; font-weight:600;
  box-shadow:0 4px 18px rgba(33,150,243,.45); }
.insight-panel .btn-light:hover { box-shadow:0 6px 24px rgba(33,150,243,.65); transform:translateY(-2px); }

/* ── 8. BUTTON SYSTEM ─────────────────────────────────────────── */
.btn { transition:all var(--t-fast); }
.btn-primary { background:var(--g-blue); border:none; border-radius:var(--r-pill);
  font-weight:600; box-shadow:0 4px 14px rgba(25,118,255,.35); }
.btn-primary:hover { background:var(--g-blue-deep); box-shadow:0 6px 20px rgba(25,118,255,.5);
  transform:translateY(-1px); }
.btn-outline-primary,.btn-outline-secondary,.btn-outline-success,
.btn-outline-warning,.btn-outline-danger,.btn-secondary,.btn-warning,
.btn-success,.btn-danger,.btn-light { border-radius:var(--r-pill); }
.btn-success { background:var(--g-green); border:none; }
.btn-danger { background:var(--g-red); border:none; }
.btn-warning { background:var(--g-orange); border:none; color:#fff; }
.btn-outline-primary { color:var(--c-secondary); border-color:rgba(25,118,255,.5); }
.btn-outline-primary:hover { background:var(--g-blue); border-color:transparent; }
.btn-outline-success:hover { background:var(--g-green); border-color:transparent; }
.btn-outline-danger:hover { background:var(--g-red); border-color:transparent; }

/* ── 9. BADGE SYSTEM (gradient pill) ──────────────────────────── */
.badge { border-radius:var(--r-pill); font-weight:600; letter-spacing:.02em; }
.badge.bg-success { background:var(--g-green)!important; }
.badge.bg-warning { background:var(--g-orange)!important; color:#fff!important; }
.badge.bg-info { background:var(--g-cyan)!important; }
.badge.bg-primary { background:var(--g-blue)!important; }
.badge.bg-secondary { background:var(--g-silver)!important; }

/* ── 10. TABLE SYSTEM ─────────────────────────────────────────── */
.table-wrap { max-height:calc(100vh - 240px); overflow:auto;
  background:rgba(255,255,255,.94); backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.6);
  border-radius:var(--r-card); box-shadow:var(--sh-2); }
.table-wrap table { margin:0; table-layout:auto; }
.table-wrap thead th { position:sticky; top:0; z-index:5;
  background:linear-gradient(180deg,#0B3D91,#155DC2);
  color:#fff; font-weight:600; font-size:.68rem; line-height:1.15;
  white-space:normal; vertical-align:bottom; min-width:52px; max-width:130px;
  padding:.34rem .32rem; }
.table-wrap td { font-size:.72rem; padding:.2rem .32rem; max-width:130px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  border:1px solid rgba(13,37,71,.06)!important; }
.table-wrap th { border:1px solid rgba(255,255,255,.14)!important; }
.table-wrap tbody tr { transition:background var(--t-fast); }
.table-wrap tbody tr:hover { background:#EAF3FE; box-shadow:inset 3px 0 0 var(--c-accent); }
.table-wrap td[class*="col-c"] { cursor:pointer; }
.table-wrap td.cell-filtered { background:#FFF3CD!important; font-weight:600; }
.table td, .table th { border-color:rgba(13,37,71,.07); }

/* ── 11. FORM SYSTEM ──────────────────────────────────────────── */
.form-control, .form-select { border-radius:var(--r-input);
  border-color:rgba(11,61,145,.14); transition:all var(--t-fast); }
.form-control:focus, .form-select:focus { border-color:var(--c-accent);
  box-shadow:0 0 0 3px rgba(59,164,255,.18); }
.modal-content { border-radius:var(--r-card); border:1px solid rgba(255,255,255,.6);
  background:rgba(255,255,255,.97); backdrop-filter:blur(24px); box-shadow:var(--sh-hover); }
.dropdown-menu { border-radius:16px; border:1px solid rgba(11,61,145,.08);
  box-shadow:var(--sh-3); }

/* ── 12. LOGIN ────────────────────────────────────────────────── */
.login-bg { min-height:100vh; position:relative; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#071C38 0%,#0B3D91 45%,#155DC2 80%,#1D8CF8 110%); }
.login-bg::before { content:''; position:absolute; inset:0; background-image:var(--hexes); }
.login-bg::after { content:''; position:absolute; right:8%; top:10%; width:380px; height:380px;
  border-radius:50%; background:radial-gradient(circle, rgba(0,212,255,.25), transparent 65%); }
.login-bg .card { position:relative; z-index:1; border-radius:var(--r-kpi);
  background:rgba(255,255,255,.94); backdrop-filter:blur(24px);
  border:1px solid rgba(255,255,255,.7); box-shadow:0 30px 70px rgba(0,0,0,.4); }
.login-tagline { font-size:.72rem; letter-spacing:.05em; }
.login-tagline .g { color:var(--c-green); font-weight:600; }
.login-tagline .b { color:var(--c-secondary); font-weight:600; }

/* ── 13. MISC ─────────────────────────────────────────────────── */
.report-frame { width:100%; border:1px solid rgba(11,61,145,.10); border-radius:var(--r-card); background:#fff; }
.dash-zoom { zoom:90%; }
/* thu 90% bằng transform (không dùng zoom lồng nhau — gây lỗi Chart.js co giãn khi hover) */
.charts-zoom { transform:scale(.9); transform-origin:0 0; width:111.12%; }
.act-add{color:#2EA84A}.act-edit{color:#F57C00}.act-del{color:#E53935}
.act-pill { overflow:hidden; }
.modal-xl .row>div{margin-bottom:.5rem}
::-webkit-scrollbar { width:9px; height:9px; }
::-webkit-scrollbar-thumb { background:rgba(11,61,145,.22); border-radius:99px; }
::-webkit-scrollbar-thumb:hover { background:rgba(11,61,145,.4); }
::-webkit-scrollbar-track { background:transparent; }

/* nút ☰ chỉ hiện trên màn hình hẹp (Bootstrap d-lg-none lo phần ẩn/hiện) */
.nav-toggle { border-radius:12px; padding:.15rem .45rem; font-size:1.05rem; line-height:1; }
.side-backdrop { display:none; }

/* ════════════════════════════════════════════════════════════════
   14. RESPONSIVE — điện thoại & máy tính bảng
   Trước đây file này KHÔNG có @media nào: sidebar 172px cố định
   chiếm ~48% màn hình 360px, cộng thêm zoom/scale ở dashboard nên
   giao diện vỡ. Dưới đây gom toàn bộ phần xử lý màn hình hẹp.
   ════════════════════════════════════════════════════════════════ */

/* ── < 992px: sidebar thành NGĂN KÉO trượt ─────────────────────── */
@media (max-width: 991.98px) {
  /* ⚠️ PHẢI viết ".d-flex > .sidebar" chứ không phải ".sidebar".
     Dòng 67 có ".d-flex > .sidebar { position:relative }" — độ ưu tiên (0,2,0).
     @media KHÔNG làm tăng độ ưu tiên, nên ".sidebar { position:fixed }" (0,1,0)
     sẽ THUA: sidebar vẫn nằm trong luồng flex và giữ chỗ 210px, tạo ra khoảng
     trắng bên trái dù đã trượt ra ngoài màn hình. */
  .d-flex > .sidebar {
    position:fixed; top:0; left:0; bottom:0; z-index:1045;
    width:210px; min-width:210px;
    transform:translateX(-100%); transition:transform var(--t-med);
    overflow-y:auto; -webkit-overflow-scrolling:touch;
  }
  .d-flex > .sidebar.show { transform:translateX(0); }
  .side-backdrop { display:block; position:fixed; inset:0; z-index:1040;
    background:rgba(7,28,56,.45); opacity:0; pointer-events:none;
    transition:opacity var(--t-med); }
  .side-backdrop.show { opacity:1; pointer-events:auto; }
  body.nav-open { overflow:hidden; }               /* khóa cuộn nền khi mở menu */
  .side-link { padding:.5rem .6rem; font-size:.85rem; }   /* dễ bấm bằng ngón tay */
  .side-link:hover { transform:none; }

  /* nội dung chiếm trọn bề ngang */
  main.p-4 { padding:.75rem !important; }
  .topbar { padding-left:.6rem !important; padding-right:.6rem !important; }
  .topbar form { max-width:none !important; margin-left:.25rem !important;
    margin-right:.25rem !important; }

  /* BỎ zoom/scale — trên màn hình hẹp chúng làm chữ nhỏ tí và tràn ngang */
  .dash-zoom { zoom:1 !important; }
  .charts-zoom { transform:none !important; width:100% !important; }

  /* bảng: cho cuộn ngang thay vì ép vừa khung */
  .table-wrap { max-height:calc(100vh - 200px); border-radius:14px; }
  .table-wrap table { min-width:640px; }           /* giữ cột đọc được, kéo ngang xem tiếp */

  /* các ô nhập bị đặt cứng width trong template -> cho co lại */
  .card, .card.p-3, .card.p-4 { border-radius:14px; }
  .card.p-4 { padding:1rem !important; }
  input.form-control[style*="width"], .form-control[style*="width"] {
    width:100% !important; max-width:100% !important; }

  /* sơ đồ workflow rộng cứng 720px -> khung ngoài .wf-map lo phần cuộn ngang */
  .wf-map { overflow-x:auto; -webkit-overflow-scrolling:touch; }

  /* iframe report: chiều cao theo màn hình */
  .report-frame { height:calc(100vh - 190px) !important; }
}

/* ── < 576px: điện thoại dựng đứng ─────────────────────────────── */
@media (max-width: 575.98px) {
  :root { --fs-hero:1.15rem; --fs-body:.82rem; }
  main.p-4 { padding:.5rem !important; }
  .hero-light::after { display:none; }             /* quả cầu 330px đẩy vỡ khung */
  .login-bg::after { display:none; }
  .login-bg .card { width:auto !important; max-width:100%; margin:.75rem; }
  .kpi-chip { width:32px; height:32px; font-size:.95rem; }
  .table-wrap { max-height:calc(100vh - 170px); }
  .table-wrap td, .table-wrap th { max-width:none; }
  /* bỏ hiệu ứng nhấc thẻ khi chạm — trên cảm ứng nó gây giật */
  .kpi-card:hover, .act-pill:hover, .kpi-fin:hover { transform:none; }
  h6 { font-size:.82rem; }
}

/* ── Nhóm sidebar thu gọn được (10/08) ─────────────────────────────────────
   Nhãn INPUT DATA / MASTER DATA bấm được để đóng/mở nhóm bên dưới.
   Mặc định MỞ — `.collapsed` do JS gắn vào khi người dùng tự bấm đóng.

   ⚠️ Nhóm đang đóng vẫn chừa lại mục của TRANG HIỆN TẠI, nếu không người dùng
   đóng nhóm rồi thì sidebar không còn chỗ nào cho biết mình đang ở đâu.        */
.side-label.side-toggle { cursor: pointer; user-select: none;
  display: flex; align-items: center; justify-content: space-between; }
.side-label.side-toggle:hover { color: #fff; }
.side-label .caret { font-size: .62rem; opacity: .65; transition: transform .15s; }
.side-label.side-toggle.collapsed .caret { transform: rotate(-90deg); }
.side-grp.collapsed .side-link:not(.active) { display: none; }

/* Nút chuyển ngôn ngữ trên topbar */
.lang-sw .btn { font-size: .68rem; font-weight: 600; padding: .2rem .45rem;
  line-height: 1.35; }

/* ── CRM Project List: ô bấm được để lọc (11/08) ───────────────────────────
   `.fv` là giá trị bấm được, `.fv-on` là ô đang được lọc theo.               */
.fv { border-bottom: 1px dashed #b9c6d6; cursor: pointer; }
.fv:hover { background: #e7f1ff; border-bottom-color: #1976FF; }
td.fv-on { background: #cfe2ff !important; }
td.fv-on .fv { border-bottom-color: #0b3d91; font-weight: 600; }
.eye { margin-left: .3rem; opacity: .35; cursor: pointer; font-size: .72rem; }
.eye:hover { opacity: 1; color: #1976FF; }

/* ── Bảng vừa khít bề ngang, không kéo sang phải (11/08) ───────────────────
   `table-layout:fixed` + <colgroup> width % => tổng luôn = 100% bề ngang khung,
   nên KHÔNG BAO GIỜ sinh thanh cuộn ngang. Nội dung dài hơn ô thì cắt bằng …,
   toàn văn giữ ở tooltip (title). Chuẩn 10.2% ≈ `400ml/Dual Cartridge`.       */
.tbl-fit { table-layout: fixed; width: 100%; }
.tbl-fit th, .tbl-fit td { overflow: hidden; }
.ell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Ô có nút 👁: chữ co lại nhường chỗ, icon KHÔNG bị cắt mất.
   `min-width:0` bắt buộc — thiếu nó thì flex item không chịu co, ellipsis
   không bao giờ kích hoạt và ô vẫn tràn. */
.cw { display: flex; align-items: center; gap: .18rem; min-width: 0; }
.cw .fv { min-width: 0; flex: 0 1 auto; }
.cw .eye { flex: 0 0 auto; margin-left: 0; }

/* Cột KHÔNG được cắt (Material): hiện đủ, xuống dòng nếu hẹp.
   Dùng `anywhere` chứ không `break-all` — mã hàng như LIQ11007000AA chỉ xuống
   dòng khi thật sự không đủ chỗ, chứ không bị bẻ tùy tiện giữa chừng. */
.nocut { white-space: normal; overflow-wrap: anywhere; }