/**
 * DMS.CSS — Cổng Thông Tin Quản Lý Khách Hàng (DMS)
 * v2 — Nền Xám Doanh Nghiệp Hiện Đại (#F1F5F9), Header Đỏ Đô (#8B0000) dập chữ Vàng Kim.
 * Login Gate + Access Denied vẫn dùng Kính Mờ Đỏ-Vàng Kim (đồng bộ css/style.css).
 */

:root{
  --dms-red:#8B0000;
  --dms-red-deep:#6B0000;
  --dms-gold:#FFD700;
  --dms-gold-soft:#F5C451;

  --dms-bg:#F1F5F9;
  --dms-surface:#FFFFFF;
  --dms-border:#E2E8F0;
  --dms-text:#0F172A;
  --dms-text-dim:#64748B;
  --dms-text-faint:#94A3B8;

  --dms-card-bg:rgba(15,10,14,.82); /* dùng riêng cho Login Gate / Access Denied */
  --dms-border-gold:rgba(255,215,0,.35);
}

body.dms-body{
  background:var(--dms-bg);
  min-height:100vh;
  font-family:'Inter','Montserrat',system-ui,-apple-system,sans-serif;
  color:var(--dms-text);
}

/* ================= HEADER DMS — dùng chung khung VIP với Dashboard (css/style.css:
   .header-glow-wrapper-gold, .hsh-top-neon-bar, .hsh-main-red-bar, .header-quick-actions,
   .header-user-wrapper...). Ở đây chỉ còn 2 việc: ép header DMS dính trên cùng (sticky)
   và style riêng cho phần .dms-main bên dưới. */
.dms-header-vip {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  width: 100% !important;
}

.dms-main{padding:22px 28px 60px;max-width:1500px;margin:0 auto;}
.dms-hidden{display:none !important;}

/* ================= KPI CARDS ================= */
.dms-kpi-row{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-bottom:22px;}
@media (max-width:1200px){.dms-kpi-row{grid-template-columns:repeat(3,1fr);}}
@media (max-width:680px){.dms-kpi-row{grid-template-columns:repeat(2,1fr);}}

.dms-kpi-card{
  border-radius:16px;padding:16px 18px;color:#fff;position:relative;overflow:hidden;
  box-shadow:0 10px 22px rgba(15,23,42,.12);
  min-height:118px;display:flex;flex-direction:column;justify-content:space-between;
  border:1px solid rgba(255,255,255,.15);
}
.dms-kpi-card .kpi-icon{font-size:1.4rem;opacity:.95;}
.dms-kpi-card .kpi-label{font-size:.72rem;font-weight:800;letter-spacing:.5px;text-transform:uppercase;opacity:.92;margin-top:6px;}
.dms-kpi-card .kpi-value-row{display:flex;align-items:baseline;gap:8px;margin-top:4px;}
.dms-kpi-card .kpi-value{font-size:1.6rem;font-weight:800;line-height:1;}
.dms-kpi-card .kpi-trend{font-size:.72rem;font-weight:700;opacity:.9;}
.dms-kpi-card .kpi-sub{font-size:.7rem;opacity:.85;margin-top:2px;}
.dms-kpi-card .kpi-more{
  font-size:.72rem;font-weight:700;text-decoration:none;color:#fff;opacity:.9;
  border-top:1px solid rgba(255,255,255,.25);padding-top:8px;margin-top:10px;display:block;
}
.dms-kpi-card .kpi-more:hover{opacity:1;text-decoration:underline;}
.dms-kpi-card.kpi-clickable{cursor:pointer;transition:transform .18s,box-shadow .18s;}
.dms-kpi-card.kpi-clickable:hover{transform:translateY(-3px);box-shadow:0 16px 28px rgba(15,23,42,.2);}
.dms-kpi-card.kpi-active-filter{outline:3px solid rgba(255,255,255,.7);outline-offset:-3px;}

.kpi-tong{background:linear-gradient(135deg,#9D6FE0,#7C3AED);}
.kpi-cuahang{background:linear-gradient(135deg,#F472B6,#DB2777);}
.kpi-phanloai{background:linear-gradient(135deg,#FBBF24,#D97706);}
.kpi-maps{background:linear-gradient(135deg,#60A5FA,#2563EB);}
.kpi-xacminh{background:linear-gradient(135deg,#4ADE80,#059669);}
.kpi-chuaxacminh{background:linear-gradient(135deg,#FB923C,#EA580C);}

/* ================= MAP CARD ================= */
.dms-map-card{
  background:var(--dms-surface);border:1px solid var(--dms-border);border-radius:16px;
  padding:16px 18px 18px;margin-bottom:22px;box-shadow:0 4px 14px rgba(15,23,42,.05);
}
.dms-map-card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.dms-map-card-header h3{color:var(--dms-text);font-size:.95rem;font-weight:800;margin:0;}
.dms-map-frame{width:100%;height:380px;border-radius:14px;border:1px solid var(--dms-border);overflow:hidden;}
.dms-map-frame iframe{width:100%;height:100%;border:0;}

/* ================= LIST CARD + TAB SWITCH ================= */
.dms-list-card{
  background:var(--dms-surface);border:1px solid var(--dms-border);border-radius:16px;
  padding:18px 20px 8px;box-shadow:0 4px 14px rgba(15,23,42,.05);
}
.dms-view-switch{display:flex;gap:6px;margin-bottom:16px;border-bottom:1px solid var(--dms-border);}
.dms-view-tab{
  background:none;border:none;padding:10px 4px;margin-right:22px;font-size:.86rem;font-weight:700;
  color:var(--dms-text-dim);cursor:pointer;border-bottom:2.5px solid transparent;margin-bottom:-1px;
}
.dms-view-tab.active{color:var(--dms-red);border-bottom-color:var(--dms-red);}

.dms-list-header{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:16px;
}
.dms-list-header h3{color:var(--dms-text);font-size:1.02rem;font-weight:800;margin:0;display:flex;align-items:center;gap:8px;}
.dms-list-header .badge-count{background:rgba(139,0,0,.08);color:var(--dms-red);border:1px solid rgba(139,0,0,.2);
  border-radius:99px;padding:2px 10px;font-size:.72rem;font-weight:800;}

.dms-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.dms-search-wrap{position:relative;}
.dms-search-wrap input{
  width:280px;max-width:60vw;padding:9px 14px 9px 34px;border-radius:10px;
  background:var(--dms-surface);border:1px solid var(--dms-border);color:var(--dms-text);font-size:.85rem;outline:none;
}
.dms-search-wrap input::placeholder{color:var(--dms-text-faint);}
.dms-search-wrap input:focus{border-color:var(--dms-red);box-shadow:0 0 0 3px rgba(139,0,0,.08);}
.dms-search-wrap::before{content:'🔍';position:absolute;left:11px;top:50%;transform:translateY(-50%);font-size:.78rem;opacity:.55;}

/* ---------- Ô LỌC CỬA HÀNG (Dropdown) — cạnh ô tìm kiếm nhanh trong .dms-toolbar ---------- */
.dms-store-filter-wrap{position:relative;}
.dms-select-filter{
  height:38px;
  padding:0 34px 0 13px;
  background-color:var(--dms-surface);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748B'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 10px center;
  background-size:15px;
  border:1px solid var(--dms-border);
  border-radius:10px;
  font-size:.85rem;
  font-weight:700;
  color:var(--dms-text);
  outline:none;
  cursor:pointer;
  transition:all .2s ease;
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  max-width:220px;
}
.dms-select-filter:focus,
.dms-select-filter:hover{
  border-color:var(--dms-red);
  box-shadow:0 0 0 3px rgba(139,0,0,.08);
}

.dms-btn{
  border:none;border-radius:10px;padding:9px 15px;font-size:.82rem;font-weight:700;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;transition:all .2s;white-space:nowrap;
}
.dms-btn-gold{background:linear-gradient(135deg,#F5C451 0%,var(--dms-gold) 45%,var(--dms-red) 130%);color:#3A1200;box-shadow:0 6px 16px rgba(139,0,0,.22);}
.dms-btn-gold:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(139,0,0,.32);}
.dms-btn-outline{background:#fff;border:1px solid var(--dms-border);color:var(--dms-text-dim);}
.dms-btn-outline:hover{background:#F8FAFC;border-color:#CBD5E1;color:var(--dms-text);}

/* ================= TABLE ================= */
.dms-table-wrap{overflow-x:auto;margin-top:4px;border-radius:12px;}
table.dms-table{width:100%;border-collapse:collapse;font-size:.83rem;min-width:1080px;}
table.dms-table thead th{
  text-align:left;padding:11px 12px;color:var(--dms-text-dim);font-weight:800;font-size:.7rem;
  text-transform:uppercase;letter-spacing:.4px;border-bottom:2px solid var(--dms-border);
  white-space:nowrap;position:sticky;top:0;background:#F8FAFC;
}
table.dms-table tbody td{
  padding:12px;color:var(--dms-text);border-bottom:1px solid var(--dms-border);vertical-align:middle;
}
table.dms-table tbody tr:hover{background:#F8FAFC;}
table.dms-table td.dms-td-name{font-weight:700;color:var(--dms-text);}
table.dms-table td.dms-td-muted{color:var(--dms-text-dim);}

/* =========================================================
   CHUẨN HOÁ TỈ LỆ CỘT — riêng bảng "Danh sách khách hàng" (10 cột — đã bỏ cột Địa chỉ)
   Scope theo .dms-customer-table để KHÔNG ảnh hưởng bảng "Lịch Sử Thêm Mới" (6 cột)
   ========================================================= */
.table-responsive-container{
  width:100% !important;
  max-height:68vh !important; /* Cố định chiều cao vừa khít màn hình */
  overflow-x:auto !important; /* Bật thanh kéo ngang */
  overflow-y:auto !important; /* Bật thanh kéo dọc */
  background:#FFFFFF !important;
  border-radius:12px !important;border:1px solid #CBD5E1 !important;
  box-shadow:0 4px 16px rgba(0,0,0,.05) !important;
  position:relative !important;
}
.dms-customer-table{
  width:100% !important;min-width:1020px !important; /* Đảm bảo đủ không gian chứa 9 cột */
  table-layout:auto !important; /* Tự động dãn ô theo kích thước chữ — khắc phục lỗi đè chữ */
  border-collapse:separate !important; /* Giúp sticky header hoạt động mượt 100% */
  border-spacing:0 !important;
  font-family:'Inter','Segoe UI',Arial,sans-serif !important;
}
.dms-customer-table th{
  position:sticky !important;top:0 !important; /* Khóa tiêu đề đứng yên trên cùng khi cuộn xuống */
  z-index:10 !important;
  background:#F1F5F9 !important;color:#0F172A !important;font-size:.78rem !important;font-weight:800 !important;
  text-transform:uppercase !important;letter-spacing:.5px !important;padding:12px 10px !important;
  border-bottom:2px solid #94A3B8 !important;white-space:nowrap !important;text-align:left !important;
}
/* Chiều cao ô gọn gàng, chỉ rộng đúng 1 dòng — không cho rớt dòng khiến hàng phình to */
.dms-customer-table td {
  padding: 12px 10px !important;
  border-bottom:1px solid #E2E8F0 !important;
  font-size:.85rem !important;
  color:#0F172A !important;
  vertical-align:middle !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  overflow: hidden !important;
}
/* Thanh kéo (scrollbar) mỏng nhẹ sang trọng — chỉ áp dụng riêng khung bảng khách hàng */
.table-responsive-container::-webkit-scrollbar{width:8px !important;height:10px !important;}
.table-responsive-container::-webkit-scrollbar-track{background:#F1F5F9 !important;border-radius:8px !important;}
.table-responsive-container::-webkit-scrollbar-thumb{
  background:#94A3B8 !important;border-radius:8px !important;border:2px solid #F1F5F9 !important;
}
.table-responsive-container::-webkit-scrollbar-thumb:hover{background:#8B0000 !important;}
/* KHÓA CỨNG KÍCH THƯỚC MIN-WIDTH BẰNG PIXEL CHO TỪNG CỘT (9 cột — đã bỏ Địa chỉ & Mã số thuế) */
.dms-customer-table th:nth-child(1), .dms-customer-table td:nth-child(1) { min-width: 50px !important; text-align: center !important; } /* STT */
.dms-customer-table th:nth-child(2), .dms-customer-table td:nth-child(2) { min-width: 130px !important; } /* MÃ CỬA HÀNG */
.dms-customer-table th:nth-child(3), .dms-customer-table td:nth-child(3) { min-width: 100px !important; } /* NGÀY ĐK */
.dms-customer-table th:nth-child(4), .dms-customer-table td:nth-child(4) { min-width: 90px !important; } /* MÃ ERP */
.dms-customer-table th:nth-child(5), .dms-customer-table td:nth-child(5) { min-width: 240px !important; font-weight: 700 !important; color: #0D9488 !important; } /* TÊN KHÁCH HÀNG */
.dms-customer-table th:nth-child(6), .dms-customer-table td:nth-child(6) { min-width: 170px !important; } /* PHÂN LOẠI */
.dms-customer-table th:nth-child(7), .dms-customer-table td:nth-child(7) { min-width: 110px !important; } /* SĐT */
.dms-customer-table th:nth-child(8), .dms-customer-table td:nth-child(8) { min-width: 130px !important; text-align: center !important; } /* TRẠNG THÁI */
.dms-customer-table th:nth-child(9), .dms-customer-table td:nth-child(9) { min-width: 80px !important; text-align: center !important; } /* THAO TÁC */
/* Cố định không cho các ô số/badge rớt dòng */
.dms-customer-table td span,
.dms-customer-table td div{white-space:nowrap !important;}
.dms-customer-table tbody tr:hover{background-color:#F8FAFC !important;}

.dms-badge-loai{
  background:rgba(139,0,0,.08);color:var(--dms-red);border:1px solid rgba(139,0,0,.18);
  border-radius:99px;padding:3px 10px;font-size:.7rem;font-weight:700;white-space:nowrap;
}
.dms-badge-verified{
  background:rgba(5,150,105,.1);color:#059669;border:1px solid rgba(5,150,105,.3);
  border-radius:99px;padding:3px 10px;font-size:.7rem;font-weight:700;white-space:nowrap;display:inline-flex;align-items:center;gap:4px;
}
.dms-badge-unverified{
  background:rgba(234,88,12,.1);color:#EA580C;border:1px solid rgba(234,88,12,.3);
  border-radius:99px;padding:3px 10px;font-size:.7rem;font-weight:700;white-space:nowrap;display:inline-flex;align-items:center;gap:4px;
}
.dms-filter-chip{
  display:inline-flex;align-items:center;gap:8px;background:#F0FDF4;border:1px solid #86EFAC;color:#166534;
  padding:6px 12px;border-radius:99px;font-size:.78rem;font-weight:700;
}
.dms-filter-chip button{background:none;border:none;color:#166534;font-weight:900;cursor:pointer;font-size:.85rem;line-height:1;padding:0;}
.dms-filter-chip.unverified{background:#FFF7ED;border-color:#FDBA74;color:#9A3412;}
.dms-filter-chip.unverified button{color:#9A3412;}
.dms-action-btn{
  background:linear-gradient(135deg,#FCE7C4,#F0C878);border:1px solid #E0AD4F;color:#5A3A00;
  border-radius:8px;padding:6px 12px;font-size:.78rem;font-weight:700;cursor:pointer;transition:all .15s;
}
.dms-action-btn:hover{background:linear-gradient(135deg,#F0C878,#E0AD4F);transform:translateY(-1px);}
.dms-table-empty{padding:40px 12px;text-align:center;color:var(--dms-text-faint);font-size:.88rem;}

/* ================= PAGINATION ================= */
.dms-pagination{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;
  padding:14px 4px 18px;
}
.dms-pagination-info{color:var(--dms-text-dim);font-size:.78rem;}
.dms-pagination-pages{display:flex;align-items:center;gap:6px;}
.dms-page-btn{
  min-width:32px;height:32px;border-radius:8px;background:#fff;
  border:1px solid var(--dms-border);color:var(--dms-text-dim);font-size:.8rem;font-weight:700;cursor:pointer;
}
.dms-page-btn.active{background:var(--dms-red);color:#fff;border-color:var(--dms-red);}
.dms-page-btn:disabled{opacity:.4;cursor:not-allowed;}

/* ================= MODAL THÊM MỚI KHÁCH HÀNG ================= */
.dms-modal-overlay{
  position:fixed;inset:0;z-index:1000000;display:none;align-items:center;justify-content:center;
  background:rgba(15,23,42,.55);backdrop-filter:blur(3px);padding:20px;
}
.dms-modal-overlay.open{display:flex;}
.dms-modal-card{
  width:760px;max-width:100%;max-height:88vh;overflow-y:auto;
  background:var(--dms-surface);border:1px solid var(--dms-border);border-radius:18px;padding:26px 28px 22px;
  box-shadow:0 25px 60px rgba(15,23,42,.35);color:var(--dms-text);
}
.dms-modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;}
.dms-modal-header h3{color:var(--dms-red);font-size:1.15rem;font-weight:800;margin:0;}
.dms-modal-close{background:none;border:none;color:var(--dms-text-faint);font-size:1.3rem;cursor:pointer;line-height:1;}
.dms-modal-close:hover{color:var(--dms-text);}
.dms-modal-sub{color:var(--dms-text-dim);font-size:.8rem;margin:0 0 18px;}
.dms-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px;}
.dms-form-grid .full{grid-column:1 / -1;}
@media (max-width:640px){.dms-form-grid{grid-template-columns:1fr;}}
.dms-modal-footer{display:flex;justify-content:flex-end;gap:10px;margin-top:20px;}

.dms-field{margin-bottom:0;text-align:left;}
.dms-field label{display:block;font-size:.78rem;font-weight:700;color:var(--dms-text-dim);margin-bottom:6px;}
.dms-field input,
.dms-field select,
.dms-field textarea{
  width:100%;box-sizing:border-box;padding:10px 13px;font-size:.85rem;color:var(--dms-text);
  background:#F8FAFC;border:1px solid var(--dms-border);border-radius:10px;outline:none;transition:all .2s;
  font-family:inherit;
}
.dms-field textarea{resize:vertical;min-height:70px;}
.dms-field input:focus,
.dms-field select:focus,
.dms-field textarea:focus{border-color:var(--dms-red);background:#fff;box-shadow:0 0 0 3px rgba(139,0,0,.08);}
.dms-field input::placeholder,
.dms-field textarea::placeholder{color:var(--dms-text-faint);}

/* ================= ACCESS DENIED — vẫn giữ Kính Mờ Đỏ-Vàng Kim ================= */
.dms-denied-overlay{
  position:fixed;inset:0;z-index:999998;display:none;align-items:center;justify-content:center;
  background:radial-gradient(1200px 600px at 50% -10%, #2a0f14 0%, #0A0D14 60%);padding:20px;
}
.dms-denied-overlay.open{display:flex;}
.dms-denied-card{
  width:440px;max-width:92%;text-align:center;
  background:var(--dms-card-bg);backdrop-filter:blur(25px);-webkit-backdrop-filter:blur(25px);
  border:1.5px solid var(--dms-border-gold);border-radius:28px;padding:40px 32px 32px;
  box-shadow:0 0 60px rgba(255,193,7,.3), 0 25px 60px rgba(0,0,0,.9);
}
.dms-denied-lock{
  width:76px;height:76px;border-radius:50%;margin:0 auto 22px;
  display:flex;align-items:center;justify-content:center;font-size:2.1rem;
  background:radial-gradient(circle at 35% 30%, #FFF08A, #FFD700 55%, #8B0000 130%);
  box-shadow:0 0 35px rgba(255,215,0,.55), inset 0 -4px 10px rgba(0,0,0,.25);
}
.dms-denied-title{
  font-size:1.15rem;font-weight:900;letter-spacing:.5px;color:#FFD700;margin:0 0 14px;
  text-shadow:0 0 18px rgba(255,215,0,.4);
}
.dms-denied-text{color:#CBD5E1;font-size:.86rem;line-height:1.6;margin:0 0 26px;}
.dms-denied-back{
  border:none;border-radius:90px;padding:13px 30px;font-size:.92rem;font-weight:800;color:#fff;cursor:pointer;
  background:linear-gradient(135deg,#8B0000 0%,#6B0000 45%,#D97706 100%);
  box-shadow:0 10px 26px rgba(139,0,0,.45);transition:all .3s;
}
.dms-denied-back:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 14px 32px rgba(139,0,0,.6);}

/* ================= LOADING / TOAST ================= */
.dms-loading-row{display:flex;align-items:center;justify-content:center;gap:10px;color:var(--dms-text-dim);padding:40px 0;font-size:.85rem;}
.dms-spinner{width:18px;height:18px;border-radius:50%;border:2.5px solid rgba(139,0,0,.15);border-top-color:var(--dms-red);animation:dmsSpin .8s linear infinite;}
@keyframes dmsSpin{to{transform:rotate(360deg);}}

.dms-toast-wrap{position:fixed;top:18px;right:18px;z-index:2000000;display:flex;flex-direction:column;gap:10px;}
.dms-toast{
  min-width:240px;max-width:340px;background:#1E293B;border:1px solid rgba(255,215,0,.3);
  border-radius:12px;padding:12px 16px;color:#fff;font-size:.83rem;font-weight:600;
  box-shadow:0 10px 26px rgba(0,0,0,.3);animation:dmsToastIn .2s ease;
}
.dms-toast.success{border-color:rgba(74,222,128,.5);}
.dms-toast.error{border-color:rgba(248,113,113,.5);}
@keyframes dmsToastIn{from{opacity:0;transform:translateX(20px);}to{opacity:1;transform:translateX(0);}}

/* =========================================================
   MODAL CHI TIẾT KHÁCH HÀNG — Card popup, đồng bộ 100% với Modal Nhân Sự
   ========================================================= */
.khachhang-detail-card{
  max-width:900px !important;
  width:100% !important;
}
.khachhang-detail-header{
  align-items:flex-start !important;
}
.khachhang-detail-header h3{
  line-height:1.4 !important;
  padding-right:12px !important;
}
.khachhang-detail-header-actions{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  flex-shrink:0 !important;
}
.dms-btn-sm{
  padding:7px 14px !important;
  font-size:.78rem !important;
}
.dms-btn-danger-outline{
  border-color:rgba(220,38,38,.35) !important;
  color:#DC2626 !important;
}
.dms-btn-danger-outline:hover{
  background:#DC2626 !important;
  border-color:#DC2626 !important;
  color:#fff !important;
}
/* Nút Đóng hình tròn (✕) — biến thể tròn của .dms-modal-close dùng riêng cho modal Khách hàng */
.dms-modal-close-circle{
  width:32px !important;
  height:32px !important;
  border-radius:50% !important;
  background:#F1F5F9 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:1rem !important;
  transition:all .2s ease !important;
}
.dms-modal-close-circle:hover{
  background:#8B0000 !important;
  color:#fff !important;
}

.khachhang-detail-layout{
  display:flex !important;
  gap:20px !important;
  min-height:400px !important;
  margin-top:16px !important;
}
.khachhang-detail-sidebar{
  width:220px !important;
  flex:0 0 220px !important;
  border-right:1px solid #E2E8F0 !important;
  padding-right:15px !important;
}
.khachhang-tab-btn {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  padding: 12px 16px !important;
  border: none !important;
  background: transparent !important;
  border-radius: 12px !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  color: #64748B !important;
  cursor: pointer !important;
  text-align: left !important;
  margin-bottom: 4px !important;
  transition: all 0.2s ease !important;
}
.khachhang-tab-btn:hover{
  background:#F1F5F9 !important;
  color:#0F172A !important;
}
.khachhang-tab-btn.active {
  background: #FEF2F2 !important;
  color: #8B0000 !important;
  box-shadow: 0 2px 8px rgba(139, 0, 0, 0.08) !important;
}
.khachhang-detail-body{
  flex:1 !important;
  padding:10px !important;
  min-width:0 !important;
}
.khachhang-detail-pane{ display:none !important; }
.khachhang-detail-pane.active{ display:block !important; }

/* Khung bọc từng ô dữ liệu (Input Card Box) — tái sử dụng kiểu dáng của Nhân sự */
.khachhang-detail-body .info-item label {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  color: #64748B !important;
  margin-bottom: 5px !important;
}
.khachhang-detail-body .info-item .info-value-box {
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  color: #0F172A !important;
  min-height: 42px !important;
  display: flex !important;
  align-items: center !important;
  word-break: break-word !important;
}
.khachhang-detail-body .info-item .info-value-box.empty{
  color:#94A3B8 !important;
  font-weight:600 !important;
  font-style:italic !important;
}

@media (max-width: 720px){
  .khachhang-detail-layout{ flex-direction:column !important; }
  .khachhang-detail-sidebar{
    width:100% !important;
    flex:none !important;
    border-right:none !important;
    border-bottom:1px solid #E2E8F0 !important;
    padding-right:0 !important;
    padding-bottom:10px !important;
    display:flex !important;
    flex-wrap:wrap !important;
    gap:6px !important;
  }
  .khachhang-tab-btn{ width:auto !important; }
}

/* ================= MODAL XÁC NHẬN XOÁ KHÁCH HÀNG ================= */
.dms-delete-confirm-card{width:480px;}
.dms-delete-title{
  color:#DC2626;font-size:1.05rem;font-weight:900;text-transform:uppercase;letter-spacing:.3px;
  margin:0 0 16px;text-align:center;
}
.dms-delete-warning-box{
  background:#FEF2F2;border:1px solid #FCA5A5;border-radius:12px;padding:14px 16px;
  color:#7F1D1D;font-size:.86rem;line-height:1.6;margin-bottom:18px;
}
.dms-delete-warning-strong{display:block;margin-top:8px;font-weight:800;color:#B91C1C;}
.dms-delete-error{
  background:rgba(220,38,38,.08);color:#DC2626;border:1px solid rgba(220,38,38,.25);border-radius:8px;
  padding:9px 12px;font-size:.82rem;font-weight:600;margin:-4px 0 14px;
}
.dms-btn-cancel-delete{background:#64748B;color:#fff;}
.dms-btn-cancel-delete:hover{background:#475569;}
.dms-btn-confirm-delete{background:#B91C1C;color:#fff;box-shadow:0 6px 16px rgba(185,28,28,.3);}
.dms-btn-confirm-delete:hover{background:#991B1B;transform:translateY(-1px);}
.dms-btn-confirm-delete:disabled{opacity:.6;cursor:not-allowed;transform:none;}

.dms-detail-map-frame{width:100%;height:320px;border-radius:12px;border:1px solid var(--dms-border);overflow:hidden;margin-top:8px;}
.dms-detail-map-frame iframe{width:100%;height:100%;border:0;}
.dms-btn-open-map{
  display:inline-flex;align-items:center;gap:6px;margin-top:12px;text-decoration:none;
  background:var(--dms-red);color:#fff;padding:9px 18px;border-radius:8px;font-size:.82rem;font-weight:700;
}
.dms-btn-open-map:hover{background:var(--dms-red-deep);color:#fff;}

.dms-detail-image{max-width:100%;border-radius:14px;border:1px solid var(--dms-border);box-shadow:0 4px 14px rgba(15,23,42,.08);}
.dms-detail-empty-state{color:var(--dms-text-faint);font-size:.88rem;padding:30px 0;text-align:center;}
.dms-btn-small-outline{
  display:inline-flex;align-items:center;gap:6px;margin-top:12px;text-decoration:none;
  background:#fff;border:1px solid var(--dms-border);color:var(--dms-text-dim);
  padding:8px 16px;border-radius:8px;font-size:.8rem;font-weight:700;
}
.dms-btn-small-outline:hover{background:#F8FAFC;color:var(--dms-text);}

/* =========================================================
   HỒ SƠ PHÁP LÝ (Cột V — GiayPhep / Cột W — ChungThuBaoLanh)
   2 thẻ bấm mở link PDF (Google Drive) — Tab "Đánh giá & Lịch sử"
   ========================================================= */
.doc-section-header{
  display:flex !important; align-items:center !important; gap:8px !important;
  margin-top:22px !important; margin-bottom:12px !important;
}
.doc-section-header .eval-title{ color:var(--dms-red) !important; }

.doc-card-grid{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:16px !important;
}
@media (max-width:640px){
  .doc-card-grid{ grid-template-columns:1fr !important; }
}

.doc-card{
  display:flex !important; align-items:center !important; gap:14px !important;
  padding:16px 18px !important;
  border-radius:14px !important;
  background:linear-gradient(135deg,#FFFFFF 0%,#F8FAFC 100%) !important;
  border:1px solid var(--dms-border) !important;
  border-left:5px solid #CBD5E1 !important;
  text-decoration:none !important;
  box-shadow:0 8px 20px -10px rgba(0,0,0,.10) !important;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
  cursor:pointer !important;
}
.doc-card:hover{
  transform:translateY(-2px) !important;
  box-shadow:0 14px 28px -12px rgba(0,0,0,.16) !important;
}

.doc-card-icon{
  width:48px !important; height:48px !important; flex:0 0 48px !important;
  border-radius:12px !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  font-size:1.45rem !important;
  background:rgba(139,0,0,.06) !important;
}
.doc-card-info{ flex:1 !important; min-width:0 !important; }
.doc-card-title{
  font-size:.86rem !important; font-weight:800 !important; color:var(--dms-text) !important;
  margin-bottom:3px !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important;
}
.doc-card-status{ font-size:.76rem !important; font-weight:700 !important; color:var(--dms-text-dim) !important; }
.doc-card-arrow{ font-size:1.15rem !important; color:#CBD5E1 !important; transition:transform .18s ease, color .18s ease !important; flex:0 0 auto !important; }
.doc-card:hover .doc-card-arrow{ transform:translateX(3px) !important; }

/* Trạng thái 1: TRUE + có link -> sẵn sàng mở file, viền/điểm nhấn màu xanh lá */
.doc-card-available{ border-left-color:#059669 !important; }
.doc-card-available .doc-card-icon{ background:rgba(5,150,105,.12) !important; }
.doc-card-available .doc-card-status{ color:#059669 !important; }
.doc-card-available .doc-card-arrow{ color:#059669 !important; }

/* Trạng thái 2: đánh dấu TRUE nhưng chưa gắn link file -> cảnh báo màu cam, không bấm được */
.doc-card-nolink{ border-left-color:#EA580C !important; cursor:not-allowed !important; }
.doc-card-nolink .doc-card-icon{ background:rgba(234,88,12,.12) !important; }
.doc-card-nolink .doc-card-status{ color:#EA580C !important; }
.doc-card-nolink .doc-card-arrow{ opacity:.3 !important; }
.doc-card-nolink:hover{ transform:none !important; box-shadow:0 8px 20px -10px rgba(0,0,0,.10) !important; }

/* Trạng thái 3: chưa có hồ sơ -> thẻ xám mờ, không bấm được */
.doc-card-missing{ border-left-color:#CBD5E1 !important; cursor:not-allowed !important; opacity:.72 !important; }
.doc-card-missing .doc-card-status{ color:#94A3B8 !important; }
.doc-card-missing .doc-card-arrow{ opacity:.2 !important; }
.doc-card-missing:hover{ transform:none !important; box-shadow:0 8px 20px -10px rgba(0,0,0,.10) !important; }

/* =========================================================
   KHUNG 3D ĐÁNH GIÁ & THÓI QUEN THANH TOÁN KHÁCH HÀNG (Cột U)
   ========================================================= */
.customer-eval-3d-card {
  position: relative !important;
  width: 100% !important;
  margin-top: 24px !important; /* Khoảng cách thông thoáng với các ô thông tin phía trên */
  padding: 20px 24px !important;
  background: linear-gradient(135deg, #FFFFFF 0%, #F8FAFC 100%) !important;
  border: 1px solid #E2E8F0 !important;
  border-left: 5px solid #8B0000 !important; /* Điểm nhấn viền màu Đỏ Đô Hoa Sen */
  border-radius: 16px !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.06), 0 8px 10px -6px rgba(0, 0, 0, 0.02) !important;
  overflow: hidden !important;
  height: auto !important; /* Tự động co giãn kích thước theo nội dung */
  min-height: fit-content !important;
  box-sizing: border-box !important;
}
.eval-card-header {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 10px !important;
}
.eval-icon {
  font-size: 1.1rem !important;
}
.eval-title {
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  color: #8B0000 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
}
.eval-card-body {
  font-size: 0.95rem !important;
  color: #334155 !important;
  line-height: 1.6 !important;
  font-style: italic !important;
  font-weight: 500 !important;
  white-space: pre-line !important; /* Giữ nguyên các dòng xuống hàng trong Cột U */
  word-break: break-word !important;
  position: relative !important;
  z-index: 2 !important;
}
/* Dấu ngoặc kép bự nghệ thuật nằm chìm ở góc phải */
.quote-mark-bg {
  position: absolute !important;
  right: 15px !important;
  bottom: -20px !important;
  font-size: 6.5rem !important;
  font-family: Georgia, serif !important;
  color: rgba(139, 0, 0, 0.08) !important;
  line-height: 1 !important;
  pointer-events: none !important;
  user-select: none !important;
  z-index: 1 !important;
}

/* =========================================================
   XOÁ BỎ MỌI LOGO / WIDGET TRÔI NỔI Ở GÓC MÀN HÌNH (nếu có)
   ========================================================= */
.floating-widget, .chat-widget, #support-icon, .zalo-chat-widget,
[class*="chat-box"], [id*="chat-box"],
.floating-support-btn, .chat-widget-box, .scroll-top-btn {
  display: none !important;
}

/* =========================================================
   FOOTER CHÂN TRANG CỔNG DMS — đồng bộ Cổng công việc chính
   ========================================================= */
/* =========================================================
   FOOTER CHÂN TRANG CỔNG DMS — 2 Card Glow Vàng Kim Xoay Vòng
   ========================================================= */
.dms-site-footer {
  background: #070A12 !important;
  border-top: 3px solid #8B0000 !important;
  padding: 20px 0 !important;
  margin-top: 35px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}
.dms-site-footer * {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}
.footer-inner-container {
  max-width: 1500px !important;
  margin: 0 auto !important;
  padding: 0 28px !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: stretch !important; /* Chiều cao 2 card luôn bằng chằn chặn */
  justify-content: space-between !important;
  gap: 32px !important;
}
/* KHUNG CARD CHUNG 2 BÊN - HIỆU ỨNG VỆT SÁNG CHẠY XOAY VÒNG */
.glow-card-gold {
  position: relative !important;
  flex: 1 !important;
  border-radius: 20px !important;
  padding: 2px !important; /* Độ rộng đường viền sáng chạy */
  overflow: hidden !important;
  background: rgba(255, 255, 255, 0.03) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(234, 179, 8, 0.15) !important;
  display: flex !important;
}
/* VỆT SÁNG VÀNG KIM XOAY VÒNG BẰNG CONIC-GRADIENT */
.glow-card-gold::before {
  content: '' !important;
  position: absolute !important;
  top: -50% !important;
  left: -50% !important;
  width: 200% !important;
  height: 200% !important;
  background: conic-gradient(
    transparent 0deg,
    transparent 140deg,
    #EAB308 180deg,
    #FACC15 210deg,
    #FFFFFF 230deg,
    #EAB308 250deg,
    transparent 290deg
  ) !important;
  animation: goldRotateBorder 4s linear infinite !important;
  z-index: 1 !important;
}
@keyframes goldRotateBorder {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
/* LÒNG CARD BÊN TRONG CHE NỀN TỐI (KEEP TEXT BÊN TRÊN) */
.card-content-inner {
  position: relative !important;
  z-index: 2 !important;
  background: #0E1322 !important; /* Màu nền đen dạ xanh siêu sang */
  border-radius: 16px !important;
  padding: 16px 22px !important;
  width: 100% !important;
  height: 100% !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  backdrop-filter: blur(10px) !important;
}
/* DECORATION VÀ TYPOGRAPHY */
.company-badge-tag, .admin-badge-tag {
  display: inline-block !important;
  background: rgba(234, 179, 8, 0.15) !important;
  border: 1px solid #EAB308 !important;
  color: #FACC15 !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  padding: 2px 10px !important;
  border-radius: 99px !important;
  margin-bottom: 6px !important;
  width: fit-content !important;
}
.company-name {
  font-size: 1.1rem !important;
  font-weight: 900 !important;
  color: #FFFFFF !important;
  margin: 0 0 2px 0 !important;
}
.branch-name {
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  color: #FACC15 !important;
  margin: 0 0 8px 0 !important;
}
.company-address {
  font-size: 0.82rem !important;
  color: #94A3B8 !important;
  line-height: 1.4 !important;
  margin: 0 0 8px 0 !important;
}
.copyright-text {
  font-size: 0.72rem !important;
  color: #64748B !important;
  margin-top: 4px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding-top: 6px !important;
}
.admin-subtext { font-size: 0.72rem !important; color: #94A3B8 !important; }
.admin-fullname { font-size: 1rem !important; font-weight: 900 !important; color: #FFFFFF !important; margin: 2px 0 8px 0 !important; }
.admin-contact-list { display: flex !important; flex-direction: column !important; gap: 5px !important; }
.contact-pill {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 8px !important;
  padding: 4px 10px !important;
  font-size: 0.78rem !important;
  color: #E2E8F0 !important;
}
@media (max-width: 900px) {
  .footer-inner-container {
    flex-direction: column !important;
  }
}
/* =========================================================
 *  DROPDOWN "DANH MỤC" — Header DMS (thiết kế Card sang trọng)
 * ========================================================= */
.dms-nav-center{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex:1 !important;
}

/* NÚT DROPDOWN DANH MỤC TRÊN HEADER TOP RED */
.dms-menu-dropdown-wrapper {
  position: relative !important;
  display: inline-block !important;
}
.dms-nav-menu-btn {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: rgba(255, 255, 255, 0.18) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  color: #FFFFFF !important;
  padding: 8px 18px !important;
  border-radius: 99px !important;
  font-size: 0.92rem !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
}
.dms-nav-menu-btn:hover {
  background: rgba(255, 255, 255, 0.32) !important;
  border-color: #FFD700 !important;
  transform: translateY(-1px) !important;
}
.dms-nav-menu-btn .btn-arrow{
  font-size:.78rem !important;
  transition: transform .2s ease !important;
}
.dms-menu-dropdown-wrapper:has(.dms-dropdown-card.show) .btn-arrow{
  transform: rotate(180deg) !important;
}

/* CARD DROPDOWN THẢ XUỐNG SANG TRỌNG */
.dms-dropdown-card {
  display: none;
  position: absolute !important;
  top: calc(100% + 8px) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 320px !important;
  background: #FFFFFF !important;
  border-radius: 16px !important;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.22) !important;
  border: 1px solid #E2E8F0 !important;
  padding: 10px !important;
  z-index: 9999 !important;
}
.dms-dropdown-card.show {
  display: block !important;
  animation: dropdownFadeIn 0.2s ease-out !important;
}
@keyframes dropdownFadeIn {
  from { opacity: 0; transform: translate(-50%, -8px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}
.dropdown-header-title {
  font-size: 0.72rem !important;
  font-weight: 900 !important;
  color: #94A3B8 !important;
  letter-spacing: 0.5px !important;
  padding: 6px 12px !important;
}
.dropdown-item-link {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 12px !important;
  border-radius: 12px !important;
  text-decoration: none !important;
  transition: background 0.2s ease !important;
}
.dropdown-item-link:hover {
  background: #FEF2F2 !important;
}
.dropdown-item-link.active {
  background: #FEF2F2 !important;
  border-left: 3px solid #8B0000 !important;
}
.dropdown-item-link .item-icon {
  font-size: 1.3rem !important;
}
.dropdown-item-link .item-title {
  font-size: 0.88rem !important;
  font-weight: 800 !important;
  color: #0F172A !important;
}
.dropdown-item-link .item-desc {
  font-size: 0.75rem !important;
  color: #64748B !important;
}

/* Header DMS trên màn hình nhỏ: 3 khối (brand/menu/user) dồn xuống nhiều dòng thay vì tràn ngang */
@media (max-width: 720px){
  .dms-header-vip .hsh-main-red-bar .app-container{ flex-wrap:wrap !important; row-gap:10px !important; }
  .dms-nav-center{ order:3 !important; width:100% !important; justify-content:flex-start !important; }
}

/* =========================================================
 *  MODAL CHI TIẾT NHÂN SỰ — Sidebar Tab bên trái (Chuẩn Ảnh)
 * ========================================================= */
.nhansu-detail-card{
  max-width:840px !important;
  width:100% !important;
}
.nhansu-detail-layout {
  display: flex !important;
  gap: 20px !important;
  min-height: 400px !important;
}
.nhansu-detail-sidebar {
  width: 220px !important;
  flex: 0 0 220px !important;
  border-right: 1px solid #E2E8F0 !important;
  padding-right: 15px !important;
}
.nhansu-tab-btn {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  padding: 12px 16px !important;
  border: none !important;
  background: transparent !important;
  border-radius: 12px !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  color: #475569 !important;
  cursor: pointer !important;
  text-align: left !important;
  margin-bottom: 4px !important;
  transition: all 0.2s ease !important;
}
.nhansu-tab-btn:hover {
  background: #F1F5F9 !important;
  color: #0F172A !important;
}
.nhansu-tab-btn.active {
  background: #FEF2F2 !important;
  color: #8B0000 !important;
  box-shadow: 0 2px 8px rgba(139, 0, 0, 0.08) !important;
}
.nhansu-detail-body {
  flex: 1 !important;
  padding: 10px !important;
  min-width:0 !important;
}
.nhansu-detail-pane{ display:none !important; }
.nhansu-detail-pane.active{ display:block !important; }
.info-grid-2col {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 16px !important;
}
.info-item.full{
  grid-column: 1 / -1 !important;
}
/* Khoảng cách dưới mỗi khối lưới thông tin trong modal Khách hàng — để khối tiếp theo
   (VD khung Đánh giá, bản đồ GPS...) không bị dính sát lên trên. */
.khachhang-detail-body .info-grid-2col{
  margin-bottom: 16px !important;
}
.info-item label {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  color: #64748B !important;
  margin-bottom: 4px !important;
}
.info-item span {
  display: block !important;
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  color: #0F172A !important;
  background: #F8FAFC !important;
  padding: 8px 12px !important;
  border-radius: 8px !important;
  border: 1px solid #E2E8F0 !important;
}
.info-item span.empty{
  color:#94A3B8 !important;
  font-weight:600 !important;
  font-style:italic !important;
}

/* Responsive — thu gọn sidebar modal Nhân sự trên màn hình nhỏ */
@media (max-width: 720px){
  .nhansu-detail-layout{ flex-direction:column !important; }
  .nhansu-detail-sidebar{
    width:100% !important;
    flex:none !important;
    border-right:none !important;
    border-bottom:1px solid #E2E8F0 !important;
    padding-right:0 !important;
    padding-bottom:10px !important;
    display:flex !important;
    flex-wrap:wrap !important;
    gap:6px !important;
  }
  .nhansu-tab-btn{ width:auto !important; }
  .info-grid-2col{ grid-template-columns: 1fr !important; }
}

/* =========================================================
   NÚT "+ THÊM MỚI NHÂN SỰ" — VÀNG HOÀNG KIM NỔI BẬT (đồng bộ trải nghiệm
   với nút "+ Thêm mới khách hàng" bên Tab Khách Hàng, nhưng tông vàng riêng)
   ========================================================= */
.btn-add-employee {
  background: linear-gradient(135deg, #EAB308 0%, #CA8A04 100%) !important;
  color: #FFFFFF !important;
  font-size: 0.88rem !important;
  font-weight: 800 !important;
  padding: 0 20px !important;
  height: 42px !important;
  border-radius: 10px !important;
  border: none !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  box-shadow: 0 4px 14px rgba(234, 179, 8, 0.4) !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  white-space: nowrap !important;
}
.btn-add-employee:hover {
  background: linear-gradient(135deg, #FACC15 0%, #D97706 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(234, 179, 8, 0.55) !important;
}

/* =========================================================
   TOOLBAR "DANH SÁCH NHÂN SỰ CỬA HÀNG" — ép tiêu đề + toàn bộ nút nằm
   1 hàng ngang thẳng tắp, không rớt dòng (dùng khung riêng .dms-card-toolbar
   thay vì .dms-list-header/.dms-toolbar dùng chung, vì bên đó có flex-wrap:wrap
   và không đủ chỗ chứa thêm nút "+ Thêm mới nhân sự" màu vàng)

   NGUYÊN TẮC CO GIÃN: các nút thao tác (Thêm mới/Xuất Excel/Tải lại) giữ nguyên
   kích thước cố định vì chữ ngắn, không co được. Ô tìm kiếm + ô lọc Cửa hàng +
   tiêu đề mới là phần được PHÉP CO LẠI khi màn hình hẹp, để tổng bề rộng luôn
   vừa khít bên trong khung card — không đẩy tràn ra ngoài như bản trước (mọi
   phần tử đều flex-shrink:0 nên cứ cộng dồn width là tràn, bất kể màn hình rộng bao nhiêu).
   ========================================================= */
.dms-card-toolbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important; /* Đẩy Tiêu đề sang trái, Nút sang phải */
  width: 100% !important;
  gap: 16px !important;
  margin-bottom: 20px !important;
  flex-wrap: nowrap !important; /* TUYỆT ĐỐI KHÔNG CHO RỚT DÒNG */
  max-width: 100% !important;
}
/* Nhóm bên trái — được phép co lại (kèm dấu ... khi quá hẹp) để nhường chỗ cho nút bên phải */
.toolbar-title-group {
  display: flex !important;
  align-items: center !important;
  min-width: 0 !important; /* bắt buộc để flex-shrink + overflow ellipsis hoạt động */
  flex: 1 1 auto !important;
  overflow: hidden !important;
}
.toolbar-title {
  font-size: 1.1rem !important;
  font-weight: 800 !important;
  color: #0F172A !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}
.toolbar-badge {
  background: #FEF2F2 !important;
  color: #8B0000 !important;
  font-size: 0.8rem !important;
  font-weight: 800 !important;
  padding: 3px 10px !important;
  border-radius: 99px !important;
  border: 1px solid #FECACA !important;
  flex-shrink: 0 !important;
}
/* Nhóm bên phải: không co, luôn hiển thị đủ đầy (ưu tiên hơn tiêu đề) */
.toolbar-actions-group {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: nowrap !important;
  flex-shrink: 0 !important;
}
/* ĐỒNG BỘ CHIỀU CAO 42PX CHO TẤT CẢ CÁC Ô TRÊN TOOLBAR */
.dms-tool-item,
.dms-select-filter,
.dms-input-search,
.btn-add-employee,
.btn-export-excel,
.btn-reload-data {
  height: 42px !important;
  max-height: 42px !important;
  min-height: 42px !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  vertical-align: middle !important;
  font-size: 0.88rem !important;
}
/* Nút thao tác giữ nguyên kích thước — không co */
.btn-add-employee,
.btn-export-excel,
.btn-reload-data {
  flex-shrink: 0 !important;
}
/* Ô lọc Cửa hàng — LUÔN đủ rộng để hiển thị trọn vẹn chữ, không co lại nữa
   (trước đây max-width:160px + flex:0 1 160px khiến chữ "Tất cả Cửa hàng" bị
   ép hẹp và cắt xén thành "Tất cả Cửa hà"). Phần co giãn khi thiếu chỗ nay
   chuyển hẳn sang ô tìm kiếm (.search-box-wrapper) bên cạnh, vốn đã linh hoạt sẵn. */
.toolbar-actions-group .dms-select-filter{
  min-width: 175px !important;
  width: auto !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  text-overflow: clip !important;
}
/* Ô nhập tìm kiếm — co giãn theo khoảng trống còn lại, có mức tối thiểu để không vỡ chữ
   + icon kính lúp riêng (không lặp icon) */
.search-box-wrapper {
  position: relative !important;
  display: inline-block !important;
  flex: 1 1 180px !important;
  min-width: 180px !important;
  max-width: 280px !important;
}
.search-box-wrapper::before{
  content:'🔍';
  position:absolute !important;
  left:12px !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  font-size:.78rem !important;
  opacity:.55 !important;
  pointer-events:none !important;
}
.dms-input-search {
  width: 100% !important;
  padding: 0 14px 0 34px !important;
  border: 1px solid #CBD5E1 !important;
  border-radius: 10px !important;
  outline: none !important;
  background: #FFFFFF !important;
  color: #0F172A !important;
}
.dms-input-search:focus{
  border-color: #8B0000 !important;
  box-shadow: 0 0 0 3px rgba(139,0,0,.08) !important;
}
/* Định dạng các nút chức năng */
.btn-export-excel, .btn-reload-data {
  background: #FFFFFF !important;
  border: 1px solid #CBD5E1 !important;
  border-radius: 10px !important;
  padding: 0 16px !important;
  font-weight: 700 !important;
  color: #334155 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: all 0.2s ease !important;
}
.btn-export-excel:hover, .btn-reload-data:hover {
  background: #F8FAFC !important;
  border-color: #94A3B8 !important;
}

/* Màn hình nhỏ: cho phép xuống dòng để không bị tràn ngang mất chữ, thay vì ép cứng */
@media (max-width: 900px){
  .dms-card-toolbar{ flex-wrap: wrap !important; }
  .toolbar-title-group{ flex: 1 1 100% !important; }
  .toolbar-actions-group{ flex-wrap: wrap !important; width: 100% !important; }
  .dms-input-search{ width: 100% !important; }
  .search-box-wrapper{ flex: 1 1 200px !important; max-width: none !important; }
}
/* =========================================================
 *  MỤC "CÔNG VIỆC KST-HCM" — Glassmorphism cao cấp 2026
 * ========================================================= */
.kst-section-container {
  padding: 24px !important;
  background: #F8FAFC !important;
}
.kst-subtab-bar {
  display: flex !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  margin-bottom: 20px !important;
}
.kst-subtab-btn {
  border: 1.5px solid #E2E8F0 !important;
  background: #FFFFFF !important;
  color: #475569 !important;
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  padding: 10px 16px !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}
.kst-subtab-btn:hover { border-color: #FCA5A5 !important; color: #B91C1C !important; }
.kst-subtab-btn.active {
  background: linear-gradient(135deg, #DC2626 0%, #991B1B 100%) !important;
  border-color: #DC2626 !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 10px rgba(220, 38, 38, 0.25) !important;
}
.kst-subview.dms-hidden { display: none !important; }

.kst-kpi-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap: 16px !important;
  margin-bottom: 24px !important;
}
.kst-kpi-card {
  background: linear-gradient(135deg, #FFFFFF 0%, #FEF2F2 100%) !important;
  border: 1.5px solid #FCA5A5 !important;
  border-radius: 16px !important;
  padding: 18px !important;
  box-shadow: 0 10px 20px rgba(220, 38, 38, 0.06) !important;
  transition: transform 0.25s ease !important;
}
.kst-kpi-card:hover { transform: translateY(-3px) !important; }
.kst-kpi-card.danger { border-color: #DC2626 !important; background: linear-gradient(135deg, #FFFFFF 0%, #FEE2E2 100%) !important; }
.kst-kpi-value { font-size: 1.8rem !important; font-weight: 900 !important; color: #1E293B !important; }
.kst-kpi-card.danger .kst-kpi-value { color: #DC2626 !important; }
.kst-kpi-label { font-size: 0.8rem !important; color: #64748B !important; font-weight: 700 !important; margin-top: 4px !important; }

.kst-panel {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 16px !important;
  padding: 18px 20px !important;
  margin-bottom: 16px !important;
}
.kst-panel-title { margin: 0 0 12px 0 !important; font-weight: 800 !important; color: #1E293B !important; font-size: 1rem !important; }
.kst-panel-header-bar {
  display: flex !important; align-items: center !important; justify-content: space-between !important;
  flex-wrap: wrap !important; gap: 10px !important; margin-bottom: 16px !important;
}
.dms-muted-hint { font-size: 0.8rem !important; color: #94A3B8 !important; }
.dms-empty-hint {
  text-align: center !important; color: #94A3B8 !important; padding: 32px 16px !important; font-size: 0.9rem !important;
}

.kst-badge {
  display: inline-block !important; font-size: 0.7rem !important; font-weight: 800 !important;
  padding: 3px 10px !important; border-radius: 99px !important;
}
.kst-badge-done { background: #DCFCE7 !important; color: #166534 !important; }
.kst-badge-progress { background: #FEF3C7 !important; color: #92400E !important; }
.kst-badge-pending { background: #F1F5F9 !important; color: #475569 !important; }

.kst-store-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap: 16px !important;
}
.kst-store-card {
  background: #FFFFFF !important;
  border-radius: 16px !important;
  border: 1px solid #E2E8F0 !important;
  padding: 20px !important;
  position: relative !important;
  overflow: hidden !important;
  cursor: pointer !important;
  transition: transform 0.2s ease !important;
}
.kst-store-card:hover { transform: translateY(-2px) !important; }
.kst-store-card.overdue { border: 2px solid #EF4444 !important; box-shadow: 0 0 15px rgba(239, 68, 68, 0.2) !important; }
.kst-store-card.overdue::before {
  content: '🚨 QUÁ HẠN >45 NGÀY';
  position: absolute !important; top: 12px; right: -30px;
  background: #DC2626 !important; color: #FFF !important;
  font-size: 0.65rem !important; font-weight: 900 !important;
  padding: 4px 30px !important; transform: rotate(25deg) !important;
}
.kst-store-card.duesoon { border: 2px solid #F59E0B !important; box-shadow: 0 0 15px rgba(245, 158, 11, 0.18) !important; }
.kst-store-card.duesoon::before {
  content: '⚠️ SẮP QUÁ HẠN 30-45 NGÀY';
  position: absolute !important; top: 12px; right: -46px;
  background: #F59E0B !important; color: #FFF !important;
  font-size: 0.65rem !important; font-weight: 900 !important;
  padding: 4px 46px !important; transform: rotate(25deg) !important;
}
.kst-store-name { font-weight: 800 !important; color: #1E293B !important; font-size: 0.95rem !important; }
.kst-store-meta { font-size: 0.78rem !important; color: #64748B !important; margin: 4px 0 10px !important; }
.kst-store-days { font-size: 0.85rem !important; font-weight: 700 !important; color: #16A34A !important; }
.kst-store-days.overdue-text { color: #DC2626 !important; }
.kst-store-days.duesoon-text { color: #B45309 !important; }
.kst-store-status { font-size: 0.75rem !important; color: #94A3B8 !important; margin-top: 4px !important; }

.kst-timeline-wrap { margin-top: 4px !important; }
.kst-timeline-item {
  border-left: 3px solid #DC2626 !important;
  padding-left: 20px !important;
  margin-bottom: 20px !important;
  position: relative !important;
}
.kst-timeline-item::before {
  content: '' !important;
  position: absolute !important; left: -8px !important; top: 0 !important;
  width: 13px !important; height: 13px !important;
  border-radius: 50% !important;
  background: #DC2626 !important;
  box-shadow: 0 0 8px #DC2626 !important;
}
.kst-timeline-head { display: flex !important; align-items: center !important; gap: 10px !important; margin-bottom: 4px !important; }
.kst-timeline-time { font-size: 0.78rem !important; font-weight: 700 !important; color: #94A3B8 !important; }
.kst-timeline-title { font-weight: 800 !important; color: #1E293B !important; font-size: 0.92rem !important; }
.kst-timeline-sub { font-size: 0.8rem !important; color: #64748B !important; margin-top: 2px !important; }
.kst-timeline-warn { font-size: 0.8rem !important; color: #B45309 !important; margin-top: 2px !important; }
.kst-timeline-foot { font-size: 0.75rem !important; color: #94A3B8 !important; margin-top: 6px !important; }

.kst-checklist-head { display: flex !important; align-items: center !important; justify-content: space-between !important; margin-bottom: 8px !important; }
.kst-checklist-pct { font-size: 0.8rem !important; font-weight: 800 !important; color: #16A34A !important; }
.kst-checklist-progress { height: 6px !important; background: #F1F5F9 !important; border-radius: 99px !important; overflow: hidden !important; margin-bottom: 14px !important; }
.kst-checklist-progress-bar { height: 100% !important; background: linear-gradient(90deg, #16A34A, #22C55E) !important; transition: width 0.3s ease !important; }
.kst-checklist-list { display: flex !important; flex-direction: column !important; gap: 10px !important; }
.kst-checklist-row {
  display: flex !important; align-items: center !important; justify-content: space-between !important;
  padding: 10px 12px !important; background: #F8FAFC !important; border-radius: 10px !important;
}
.kst-checklist-label { font-size: 0.85rem !important; color: #334155 !important; }
.kst-checklist-label.done { color: #94A3B8 !important; text-decoration: line-through !important; }
.kst-toggle-switch {
  width: 42px !important; height: 24px !important; border-radius: 99px !important;
  background: #CBD5E1 !important; border: none !important; position: relative !important;
  cursor: pointer !important; flex-shrink: 0 !important; transition: background 0.2s ease !important;
}
.kst-toggle-switch.on { background: #16A34A !important; }
.kst-toggle-knob {
  position: absolute !important; top: 3px !important; left: 3px !important;
  width: 18px !important; height: 18px !important; border-radius: 50% !important;
  background: #FFFFFF !important; box-shadow: 0 1px 3px rgba(0,0,0,0.2) !important;
  transition: transform 0.2s ease !important;
}
.kst-toggle-switch.on .kst-toggle-knob { transform: translateX(18px) !important; }

/* --- Bổ sung cho bản nâng cấp: biểu đồ, bảng rủi ro, bộ lọc Sub-tab 3, toolbar Checklist --- */
.kst-chart-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
  gap: 16px !important;
  margin-bottom: 16px !important;
}
.kst-chart-wrap { position: relative !important; height: 260px !important; }

.kst-table-wrap { overflow-x: auto !important; }
.kst-risk-table { width: 100% !important; border-collapse: collapse !important; font-size: 0.85rem !important; }
.kst-risk-table th {
  text-align: left !important; padding: 8px 10px !important; color: #64748B !important;
  font-size: 0.75rem !important; text-transform: uppercase !important; border-bottom: 2px solid #E2E8F0 !important;
}
.kst-risk-table td { padding: 10px !important; border-bottom: 1px solid #F1F5F9 !important; color: #334155 !important; }

.kst-filter-bar {
  display: flex !important; align-items: center !important; gap: 8px !important;
  flex-wrap: nowrap !important; overflow-x: auto !important; overflow-y: hidden !important;
  margin-bottom: 16px !important; padding-bottom: 2px !important;
}
.kst-filter-bar::-webkit-scrollbar { height: 4px !important; }
.kst-filter-bar::-webkit-scrollbar-thumb { background: #E2E8F0 !important; border-radius: 4px !important; }
.kst-filter-bar > * { flex: 0 0 auto !important; }
.kst-filter-bar select {
  border: 1.5px solid #E2E8F0 !important; border-radius: 10px !important;
  padding: 6px 8px !important; font-size: 0.78rem !important; font-weight: 600 !important;
  color: #334155 !important; background: #FFFFFF !important; cursor: pointer !important;
  white-space: nowrap !important; transition: all .15s ease !important;
}
.kst-filter-bar select:hover { background: #F8FAFC !important; border-color: #CBD5E1 !important; }
.kst-filter-bar select:focus { outline: none !important; border-color: #be121c !important; box-shadow: 0 0 0 3px rgba(190, 18, 28, 0.1) !important; }
#kstDaysFilter { background: #FFFBEB !important; border-color: #FCD34D !important; color: #92400E !important; font-weight: 700 !important; }

/* Ô "Ngày sổ sách" — bo tròn viền đỏ nhẹ, icon lịch đỏ đô đồng bộ nhận diện KMS (thay ô lịch mặc định thô của trình duyệt) */
.kst-filter-date-wrap {
  display: flex !important; align-items: center !important; gap: 6px !important;
  border: 1.5px solid #F3B4B4 !important; border-radius: 10px !important;
  padding: 6px 8px !important; background: #FEF2F2 !important; transition: all .15s ease !important;
}
.kst-filter-date-wrap:hover { background: #FEE7E7 !important; border-color: #E89B9B !important; }
.kst-filter-date-wrap:focus-within { border-color: #be121c !important; box-shadow: 0 0 0 3px rgba(190, 18, 28, 0.12) !important; background: #FFFFFF !important; }
.kst-filter-date-icon { color: #be121c !important; flex-shrink: 0 !important; }
.kst-filter-date-label { font-size: 0.75rem !important; font-weight: 700 !important; color: #9F1D1D !important; white-space: nowrap !important; }
.kst-filter-date-input {
  border: none !important; outline: none !important; background: transparent !important;
  font-size: 0.78rem !important; font-weight: 800 !important; color: #7F1D1D !important; cursor: pointer !important;
  width: 108px !important; padding: 0 !important;
}
/* Icon lịch mặc định của trình duyệt (Chrome/Edge) — đổi màu sang đỏ đô để đồng bộ nhận diện, thay vì màu xám thô mặc định */
.kst-filter-date-input::-webkit-calendar-picker-indicator {
  cursor: pointer !important; border-radius: 4px !important; opacity: 0.85 !important;
  filter: invert(15%) sepia(95%) saturate(6932%) hue-rotate(353deg) brightness(90%) contrast(92%) !important;
}
.kst-filter-date-input::-webkit-calendar-picker-indicator:hover { opacity: 1 !important; }

.kst-checklist-toolbar { display: flex !important; gap: 10px !important; flex-wrap: wrap !important; align-items: center !important; }
.kst-checklist-toolbar select {
  border: 1.5px solid #E2E8F0 !important; border-radius: 10px !important;
  padding: 8px 12px !important; font-size: 0.85rem !important; color: #334155 !important; background: #FFFFFF !important;
  min-width: 220px !important;
}

.kst-period-btn {
  border: 1.5px solid #E2E8F0 !important; background: #FFFFFF !important; color: #475569 !important;
  font-weight: 700 !important; font-size: 0.85rem !important; padding: 10px 16px !important;
  border-radius: 10px !important; cursor: pointer !important; transition: all 0.2s ease !important;
}
.kst-period-btn:hover { border-color: #FCA5A5 !important; color: #B91C1C !important; }
.kst-period-btn.active {
  background: linear-gradient(135deg, #DC2626 0%, #991B1B 100%) !important;
  border-color: #DC2626 !important; color: #FFFFFF !important;
  box-shadow: 0 4px 10px rgba(220, 38, 38, 0.25) !important;
}

/* --- Modal KST V.I.P: Glassmorphic mờ + viền vàng kim, nút nổi 3D --- */
#kstScheduleModalOverlay.dms-modal-overlay,
#kstAuditModalOverlay.dms-modal-overlay {
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  background: rgba(15, 23, 42, 0.55) !important;
}
#kstScheduleModalOverlay .dms-modal-card,
#kstAuditModalOverlay .dms-modal-card {
  border: 1.5px solid #F5C451 !important;
  box-shadow: 0 20px 50px rgba(139, 0, 0, 0.25), 0 0 0 1px rgba(245, 196, 81, 0.15) !important;
}
#kstScheduleModalOverlay .dms-btn,
#kstAuditModalOverlay .dms-btn {
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
#kstScheduleModalOverlay .dms-btn:hover,
#kstAuditModalOverlay .dms-btn:hover {
  transform: translateY(-2px) !important;
}

/* --- Bộ đôi Date Picker "Từ ngày - Đến ngày" V.I.P --- */
.kst-date-picker {
  border: 1.5px solid rgba(220, 38, 38, 0.25) !important;
  border-radius: 10px !important;
  padding: 9px 12px !important;
  font-size: 0.85rem !important;
  color: #334155 !important;
  background: #FFFFFF !important;
  transition: all 0.2s ease !important;
  width: 100% !important;
}
.kst-date-picker:hover {
  border-color: #DC2626 !important;
  box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.08) !important;
}
.kst-date-picker:focus {
  outline: none !important;
  border-color: #DC2626 !important;
  box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.14) !important;
}
.kst-date-picker::-webkit-calendar-picker-indicator {
  filter: invert(24%) sepia(90%) saturate(4000%) hue-rotate(345deg) brightness(95%) !important;
  cursor: pointer !important;
}

/* --- Nút bấm khu vực Công việc KST-HCM: hiệu ứng nổi 3D đồng bộ toàn module --- */
.kst-subtab-btn, .kst-period-btn, .btn-zalo-copy {
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease !important;
}
.kst-subtab-btn:hover, .kst-period-btn:hover {
  transform: translateY(-2px) !important;
}

/* --- Tinh chỉnh Flatpickr Calendar V.I.P (đè lên theme material_red mặc định) --- */
.flatpickr-calendar {
  border-radius: 16px !important;
  box-shadow: 0 20px 45px rgba(15, 23, 42, 0.18) !important;
  background: #FFFFFF !important;
  overflow: hidden !important;
}
.flatpickr-day.selected,
.flatpickr-day.selected:hover {
  background: #DC2626 !important;
  border-color: #DC2626 !important;
  color: #FFFFFF !important;
  border-radius: 50% !important;
}
.flatpickr-day.today {
  border-color: #F5C451 !important;
}
.flatpickr-months .flatpickr-month,
.flatpickr-current-month .flatpickr-monthDropdown-months {
  color: #1E293B !important;
}

/* --- Nút Xem chi tiết + Card biểu đồ V.I.P (theo spec) --- */
.btn-view-detail {
  background: #EFF6FF !important;
  color: #1D4ED8 !important;
  border: 1px solid #BFDBFE !important;
  font-weight: 700 !important;
  font-size: 0.78rem !important;
  padding: 5px 12px !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}
.btn-view-detail:hover {
  background: #1D4ED8 !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 10px rgba(29, 78, 216, 0.25) !important;
}
.chart-card-vip {
  background: #FFFFFF !important;
  border-radius: 20px !important;
  border: 1px solid #E2E8F0 !important;
  padding: 20px !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.04) !important;
}

/* --- Modal Chi tiết Cửa hàng rủi ro --- */
.kst-detail-header-row {
  display: flex !important; align-items: center !important; justify-content: space-between !important;
  background: #F8FAFC !important; border-radius: 12px !important; padding: 14px 16px !important;
}
.kst-detail-store-name { font-weight: 900 !important; font-size: 1.05rem !important; color: #1E293B !important; }
.kst-detail-store-meta { font-size: 0.8rem !important; color: #64748B !important; margin-top: 2px !important; }
.kst-detail-days-badge {
  background: #FEE2E2 !important; color: #991B1B !important; font-weight: 900 !important;
  font-size: 0.85rem !important; padding: 6px 14px !important; border-radius: 99px !important;
  white-space: nowrap !important;
}
.kst-detail-value {
  background: #F8FAFC !important; border-radius: 10px !important; padding: 9px 12px !important;
  font-size: 0.85rem !important; color: #334155 !important; font-weight: 600 !important;
}
.kst-detail-issues-block { margin-top: 16px !important; }
.kst-detail-issues-block label {
  font-size: 0.8rem !important; font-weight: 700 !important; color: #475569 !important;
  display: block !important; margin-bottom: 8px !important;
}
.kst-detail-issues-list { display: flex !important; flex-direction: column !important; gap: 8px !important; }
.kst-detail-issue-item {
  background: #FFFBEB !important; border: 1px solid #FDE68A !important; border-radius: 10px !important;
  padding: 10px 12px !important; font-size: 0.82rem !important; color: #78350F !important;
}