/* =========================================================
   KST BRVT-HCM — Design tokens
   Palette: steel blue (ngành thép/VLXD) + cam cảnh báo (tem/tag giá)
   Kiểu chữ: Be Vietnam Pro (giao diện) + JetBrains Mono (số liệu, mã, đếm ngược)
   Signature: badge "Khẩn cấp" dạng dấu mộc nghiêng — gợi văn hoá biên bản/giấy tờ kiểm toán
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root{
  --steel-900:#0B1F3A;
  --steel-700:#17376B;
  --steel-600:#1E4C8C;
  --steel-500:#2C5AA0;
  --steel-300:#7FA8D9;
  --steel-100:#DCE8F7;

  --amber-600:#E07B1D;
  --amber-500:#F2994A;
  --amber-100:#FDE7CF;

  --red-600:#C6362F;
  --red-100:#FBE1DF;
  --green-600:#1E8F5F;
  --green-100:#DCF3E8;

  /* Nhận diện thương hiệu Hoa Sen Home */
  --brand-red:#C8102E;
  --brand-red-dark:#8C0B20;
  --brand-gold:#F0B400;
  --brand-gold-light:#FCE7A8;
  --brand-navy:#0B1F3A;

  /* Màu phân loại công việc (viền trái thẻ + chip icon) */
  --cat-congno:#C6362F;
  --cat-congno-bg:#FBE1DF;
  --cat-luong:#1E8F5F;
  --cat-luong-bg:#DCF3E8;
  --cat-xetai:#1E4C8C;
  --cat-xetai-bg:#DCE8F7;
  --cat-bm02:#E07B1D;
  --cat-bm02-bg:#FDE7CF;
  --cat-kiemke:#6B46C1;
  --cat-kiemke-bg:#EAE1FA;
  --cat-vesinh:#0E8074;
  --cat-vesinh-bg:#D9F0EC;
  --cat-thuvien:#B8860B;
  --cat-thuvien-bg:#FCE7A8;

  --bg:#F8FAFC;
  --bg-grad: radial-gradient(1000px 500px at 100% -10%, #EEF3FB 0%, transparent 55%),
             radial-gradient(900px 460px at -10% 10%, #FBF3E3 0%, transparent 50%),
             var(--bg);
  --surface: rgba(255,255,255,0.72);
  --surface-solid:#ffffff;
  --surface-border: rgba(15,27,45,0.08);
  --text:#0F1B2D;
  --text-dim:#57677E;
  --shadow: 0 6px 20px rgba(15,27,45,0.06);
  --shadow-lg: 0 20px 60px rgba(15,27,45,0.14);
  --radius:18px;
  --radius-sm:12px;
  --blur:18px;
  --gold-shine: linear-gradient(135deg,#FFE28A,#F0B400 55%,#C98F00);
  --silver-shine: linear-gradient(135deg,#F1F4F8,#B9C3D0 55%,#8A94A3);
  --bronze-shine: linear-gradient(135deg,#F0C29B,#CD7F32 55%,#9A5A22);
  --font-display:'Be Vietnam Pro',sans-serif;
  --font-mono:'JetBrains Mono',monospace;

  /* Chiều cao THẬT của toàn bộ Header (.navbar-kst-exact) ở desktop, gồm:
     dải cam kết .hsh-top-neon-bar (~28px) + dải đỏ chính .hsh-main-red-bar (~74px, do logo .brand-mark-hsh cao 52px + padding).
     Trước đây các nơi dùng Sidebar/Footer đang tính cứng 75px — CHỈ đúng với 1 dòng của Header,
     thiếu hẳn dải banner cam kết phía trên → khiến mục "Trang chủ" bị header đè lên.
     Dùng 1 biến DUY NHẤT ở đây để nếu sau này Header đổi chiều cao, chỉ cần sửa 1 chỗ. */
  --header-h: 104px;
}

[data-theme="dark"]{
  --bg:#0A1220;
  --bg-grad: radial-gradient(1200px 600px at 100% -10%, #10233F 0%, transparent 60%),
             radial-gradient(1000px 500px at -10% 10%, #2A1B0E 0%, transparent 55%),
             var(--bg);
  --surface: rgba(23,42,68,0.55);
  --surface-solid:#132038;
  --surface-border: rgba(255,255,255,0.08);
  --text:#EAF1FC;
  --text-dim:#9BAEC8;
  --shadow: 0 8px 30px rgba(0,0,0,0.35);
  --shadow-lg: 0 20px 60px rgba(0,0,0,0.5);
  --steel-100:#152A47;
  /* Bổ sung — trước đây các biến dưới đây KHÔNG được định nghĩa lại cho Dark Mode,
     khiến badge trạng thái/nút "Xem chi tiết" vẫn giữ màu chữ tối (thiết kế cho nền
     sáng) trong khi nền badge đã đổi tối theo --steel-100 ở trên, làm chữ chìm mất. */
  --steel-700:#8FB8E8;  /* chữ badge-status-inprogress trên nền --steel-100 tối */
  --steel-600:#3B82F6;  /* chữ nút "Xem chi tiết" + màu nền khi hover */
  --red-600:#F87171;    /* chữ badge Khẩn / Quá hạn */
  --red-100:rgba(220,38,38,0.18);  /* nền badge Khẩn / Quá hạn */
  --amber-600:#FBBF24;  /* chữ badge Sắp hết hạn */
  --amber-100:rgba(217,119,6,0.2); /* nền badge Sắp hết hạn */
  --green-600:#4ADE80;  /* chữ badge Hoàn thành / Ưu tiên thấp */
  --green-100:rgba(21,128,61,0.2); /* nền badge Hoàn thành / Ưu tiên thấp */
}

*{box-sizing:border-box;}
body{
  font-family:var(--font-display);
  background:var(--bg-grad);
  color:var(--text);
  min-height:100vh;
  transition:background .3s ease,color .3s ease;
  letter-spacing:.1px;
}
.mono{font-family:var(--font-mono);}

/* ---------- Layout shells ---------- */
.app-container{max-width:1320px;margin:0 auto;padding:0 20px 60px;}
/* Khoảng đệm trên cho KHUNG NỘI DUNG CHÍNH (không phải Header — Header cũng dùng chung
   class .app-container nên phải chặn riêng bằng #pageTop để tránh đẩy lệch logo/ô tìm kiếm
   trong Header). Đẩy hẳn thẻ trạng thái (.stat-card) + tiêu đề (.hero-title) xuống dưới
   mép Header sticky, không bị che khuất mép trên. */
#pageTop{
  padding-top:16px !important;
  margin-top:0 !important;
}
a{text-decoration:none;color:inherit;}

/* ========== HEADER NÂNG CẤP KHUNG MẪU HSH ========== */
/* Header luôn nằm ở lớp cao nhất (z-index 1000) — không bao giờ bị Sidebar/Drawer di động đè lên. */
.navbar-kst-exact {
  position: sticky !important; top: 0 !important; z-index: 1000 !important;
  min-height: 75px !important; /* Chiều cao chuẩn thanh Header — dùng min-height để không cắt mất nội dung 2 dòng (logo + tiêu đề) */
  box-sizing: border-box !important;
  box-shadow: 0 4px 18px rgba(0,0,0,0.25);
}
/* CỐ ĐỊNH KHUNG HEADER DÍNH CỨNG TRÊN CÙNG ĐỈNH MÀN HÌNH — khóa lại lần nữa bằng
   selector 2-class (độ ưu tiên cao hơn .header-glow-wrapper-gold đứng sau trong file)
   để tuyệt đối không còn rule nào ghi đè mất sticky của Header trong tương lai. */
.navbar-kst-exact.header-glow-wrapper-gold {
  position: sticky !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1000 !important; /* Đảm bảo luôn nằm đè lên trên tất cả thành phần khác khi cuộn */
}
/* ĐÃ XÁC ĐỊNH NGUYÊN NHÂN GỐC RỄ KHIẾN HEADER MẤT STICKY (kiểm chứng bằng
   trình duyệt thật): đặt overflow-x/overflow-y trên thẻ <body> khiến Chrome/WebKit
   coi body là một "khối cuộn" riêng, làm sticky của Header không còn bám theo
   khung nhìn (viewport) thật nữa và bị cuộn trôi mất. CHỈ đặt overflow-x:hidden
   trên <html> (KHÔNG đặt trên <body>) vẫn chặn được cuộn ngang mà không phá sticky. */
html {
  overflow-x: hidden;
}
/* LỚP PHÒNG VỆ (đã kiểm chứng KHÔNG ảnh hưởng sticky): chặn mọi transform/filter/
   will-change vô tình bị JS gắn lên html/body khi mở popup, đổi theme... */
html, body {
  transform: none !important;
  filter: none !important;
  perspective: none !important;
  will-change: auto !important;
}
/* =========================================================
   VIỀN VÀNG KIM TỎA SÁNG CHẠY XOAY VÒNG 360 ĐỘ — TOP HEADER
   Lưu ý: lớp glow (.header-glow-border-fx) là 1 DIV RIÊNG, KHÔNG
   phải phần tử cha bọc nội dung thật — nhờ vậy overflow:hidden chỉ
   cắt gọn chính vệt sáng, TUYỆT ĐỐI KHÔNG cắt mất Dropdown Thông
   báo (.notif-dropdown-menu), Menu di động hay Ô tìm kiếm bên trong.
   ========================================================= */
.header-glow-wrapper-gold {
  border-radius: 0 0 20px 20px !important; /* Bo tròn nhẹ 2 góc dưới */
  box-shadow: 0 8px 32px rgba(139, 0, 0, 0.3), 0 0 20px rgba(234, 179, 8, 0.2) !important;
}
/* Lớp trang trí chứa vệt sáng xoay — tách biệt hoàn toàn khỏi nội dung thật bên trong */
.header-glow-border-fx {
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  overflow: hidden !important;
  z-index: 0 !important;
  pointer-events: none !important;
}
/* VỆT SÁNG VÀNG KIM TỎA SÁNG XOAY 360 ĐỘ BẰNG CONIC-GRADIENT */
.header-glow-border-fx::before {
  content: '' !important;
  position: absolute !important;
  top: -150% !important;
  left: -50% !important;
  width: 200% !important;
  height: 400% !important;
  background: conic-gradient(
    transparent 0deg,
    transparent 140deg,
    #EAB308 180deg,
    #FACC15 210deg,
    #FFFFFF 230deg,
    #EAB308 250deg,
    transparent 290deg
  ) !important;
  animation: rotateGoldenHeaderBorder 5s linear infinite !important;
}
@keyframes rotateGoldenHeaderBorder {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@media(prefers-reduced-motion:reduce){.header-glow-border-fx::before{animation:none !important;}}
/* LÒNG HEADER CHÍNH — NẰM TRÊN LỚP GLOW, giữ nguyên 100% nội dung/Dropdown thật bên trong (không set overflow) */
.header-content-inner-red {
  position: relative !important;
  z-index: 1 !important;
}
/* Bo tròn 2 góc dưới ngay trên dải đỏ chính để khớp viền glow phía sau khi lộ ra ở mép dưới */
.hsh-main-red-bar {
  border-radius: 0 0 18px 18px !important;
}
/* Dải banner trên cùng có hiệu ứng sọc sáng LED chéo + vệt ánh kim lướt vô tận */
.hsh-top-neon-bar {
  background: linear-gradient(90deg, #7A0A1C 0%, #A80E26 40%, #C8102E 100%);
  color: #FFFFFF;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 6px 12px;
  position: relative;
  overflow: hidden;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.hsh-top-banner::before, .hsh-top-neon-bar::before {
  content: "";
  position: absolute;
  top: 0; left: -100%;
  width: 50%; height: 100%;
  background: linear-gradient(
    90deg, 
    transparent 0%, 
    rgba(255, 255, 255, 0.15) 30%, 
    rgba(240, 180, 0, 0.45) 50%, 
    rgba(255, 255, 255, 0.15) 70%, 
    transparent 100%
  ) !important;
  transform: skewX(-20deg) !important;
  /* Tăng thời gian lên 9 giây và dùng hiệu ứng trôi êm ease-in-out */
  animation: waveLightSweep 9s ease-in-out infinite !important;
  pointer-events: none;
}
@keyframes waveLightSweep {
  0% {
    left: -100%;
  }
  50% {
    left: 130%;
  }
  100% {
    left: -100%;
  }
}
@media(prefers-reduced-motion:reduce){.hsh-top-banner::before, .hsh-top-neon-bar::before{animation:none !important;}}
.neon-line-left, .neon-line-right {
  position: absolute; top: 0; width: 100px; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transform: skewX(-30deg);
}
.neon-line-left { left: 10%; }
.neon-line-right { right: 10%; }
.hsh-slogan-content {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  position: relative; z-index: 1;
}
.hsh-badge {
  background: #F0B400; color: #7A0A1C; font-weight: 800; font-size: 0.68rem; padding: 2px 8px; border-radius: 99px;
  flex-shrink:0;
}
.hsh-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
@media(max-width:560px){.hsh-text{max-width:220px;}}

/* Dải chính màu đỏ */
.hsh-main-red-bar {
  background: linear-gradient(135deg, #C8102E 0%, #9E0B22 100%);
  padding: 3px 0;
}
.brand-mark, .brand-mark-hsh {
  width: 52px !important;
  height: 52px !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #C8102E 0%, #8C0B20 100%) !important;
  border: 1.5px solid rgba(240, 180, 0, 0.6) !important; /* Viền vàng Gold mảnh */
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35), 0 2px 4px rgba(240, 180, 0, 0.2) !important; /* Tạo khối nổi 3D */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  overflow: hidden !important;
  padding: 4px !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
.brand-mark img, .brand-mark-hsh img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3)) !important;
}
/* Hiệu ứng nhích nhẹ khi rê chuột vào logo */
.brand-mark:hover, .brand-mark-hsh:hover {
  transform: translateY(-2px) scale(1.03) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4), 0 0 12px rgba(240, 180, 0, 0.4) !important;
}
.brand-title-hsh { font-weight: 800; font-size: 1.1rem; color: #FFFFFF; letter-spacing: 0.3px; }
.brand-sub-hsh { font-size: 0.72rem; color: #FFD2D9; }

/* Badge vị trí xem giá */
.hsh-price-location {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  padding: 3px 12px;
  color: #FFFFFF;
  cursor: pointer;
}
.loc-details { display: flex; flex-direction: column; line-height: 1.1; }
.loc-title { font-size: 0.62rem; color: #FFB3C1; }
.loc-name { font-size: 0.78rem; color: #FFFFFF; font-weight: 800; }

/* Ô tìm kiếm */
.search-box-exact { position: relative; }
.search-box-exact input {
  width: 100%; padding: 7px 40px 7px 16px; border-radius: 99px; border: none; font-size: 0.85rem; outline: none;
}
.search-btn-exact {
  position: absolute; right: 3px; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; border-radius: 50%; background: #8C0B20; border: none; color: #fff; font-size: 0.75rem;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
}
/* ---------- Cụm 3 nút nhanh Header Top: Outlook / Chế độ tối / Trang quản trị (khung đồng bộ) ---------- */
.header-quick-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
/* KHUNG CHUNG CHO CẢ 3 NÚT (OUTLOOK, TRĂNG, Ổ KHÓA) */
.header-icon-btn {
  width: 36px !important;
  height: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255, 255, 255, 0.15) !important; /* Nền kính mờ */
  border: 1px solid rgba(255, 255, 255, 0.25) !important; /* Viền mờ sang trọng */
  border-radius: 10px !important; /* Bo góc mềm mại */
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
  padding: 0 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1) !important;
}
.header-icon-btn:hover {
  background: rgba(255, 255, 255, 0.3) !important;
  border-color: #FFD700 !important; /* Đổi viền vàng kim khi rê chuột vào */
  transform: translateY(-1px) !important;
}
/* Size icon bên trong khung */
.header-icon-btn span {
  font-size: 1.1rem !important;
  line-height: 1 !important;
}
.header-btn-img {
  width: 20px !important;
  height: 20px !important;
  object-fit: contain !important;
}

.icon-btn-exact {
  width: 34px; height: 34px; border-radius: 8px; background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.2);
  color: #fff; display: flex; align-items: center; justify-content: center; text-decoration: none; cursor:pointer; transition:.2s;
}
.icon-btn-exact:hover{background:rgba(255,255,255,.25);}

/* Logo chữ vàng "HOA SEN HOME" chuẩn thương hiệu — chữ O cách điệu hình ngôi nhà, thay cho badge KST cũ */
.hsh-top-right-logo {
  color: #FFF200;
  font-family: 'Times New Roman', Georgia, 'Playfair Display', serif;
  font-weight: 900;
  font-size: 1.3rem;
  letter-spacing: 1.2px;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
  padding: 4px 10px;
}
/* Chữ O tròn vàng chứa biểu tượng ngôi nhà bên trong */
.hsh-top-right-logo .logo-house-o {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #FFF200;
  color: #C8102E; /* Màu nhà đỏ trên nền O vàng */
  border-radius: 50%;
  width: 20px;
  height: 20px;
  margin: 0 2px;
  vertical-align: middle;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  flex-shrink: 0;
}
.hsh-top-right-logo .house-icon {
  font-style: normal;
  font-size: 0.8rem;
  font-weight: 900;
  line-height: 1;
  margin-top: -1px;
}
@media(max-width:768px){
  .hsh-top-right-logo{font-size:1.05rem;padding:4px 6px;}
  .hsh-top-right-logo .logo-house-o{width:17px;height:17px;}
  .hsh-top-right-logo .house-icon{font-size:0.68rem;}
}

/* ---------- Chuông thông báo Header Top (thay cho chữ "HOA SEN HOME" góc phải) ---------- */
/* Ẩn hoàn toàn logo/chữ HOA SEN HOME cũ ở góc phải (phòng khi còn sót lại ở nơi khác) */
.header-brand-right,
.header-top .brand-text-right,
.hsh-top-right-logo {
  display: none !important;
}
/* Khung chứa Icon Chuông */
.notif-bell-wrapper {
  position: relative !important;
  cursor: pointer !important;
  padding: 6px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-right: 4px !important;
}
.notif-bell-icon{display:flex;align-items:center;justify-content:center;}
/* Huy hiệu đếm số lượng CHƯA ĐỌC — động, KHÔNG gán cứng 99+ (ẩn hoàn toàn khi = 0, xem js/app.js renderNotifications) */
.notif-badge-count,
.header-icon-btn .notif-badge-count,
.header-quick-actions .notif-bell-wrapper .notif-badge-count {
  position: absolute !important;
  top: -3px !important;
  right: -3px !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  background: #EF4444 !important; /* Đỏ tươi nổi bật */
  color: #FFFFFF !important;
  font-family: 'Be Vietnam Pro', sans-serif !important;
  font-size: 0.68rem !important; /* Thu nhỏ cỡ chữ số vừa khít */
  font-weight: 900 !important;
  line-height: 1 !important;
  padding: 0 !important;
  border-radius: 50% !important; /* Bo tròn xoe 100% */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  border: 1.5px solid #8B0000 !important; /* Viền đỏ đô trùng màu header */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
  pointer-events: none !important;
  z-index: 5 !important;
}
/* DROPDOWN POPUP THẢ XUỐNG CHUẨN ẢNH 3 */
.notif-dropdown-menu {
  display: none; /* Mặc định ẩn, bật flex khi click */
  position: absolute !important;
  top: 42px !important;
  right: -10px !important;
  width: 360px !important;
  max-width: 90vw !important;
  background: #FFFFFF !important;
  border-radius: 16px !important;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25) !important;
  border: 1px solid #E2E8F0 !important;
  z-index: 99999 !important;
  overflow: hidden !important;
  animation: fadeInDown 0.2s ease-out !important;
}
.notif-dropdown-menu.show {
  display: flex !important;
  flex-direction: column !important;
}
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}
/* Header Dropdown */
.notif-dropdown-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 14px 18px !important;
  background: #F8FAFC !important;
  border-bottom: 1px solid #E2E8F0 !important;
}
.notif-title {
  font-size: 0.95rem !important;
  font-weight: 800 !important;
  color: #8B0000 !important;
}
.notif-mark-read-btn {
  background: transparent !important;
  border: none !important;
  color: #0284C7 !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
}
/* Danh sách tin nhắn thông báo — render động, mới nhất luôn ở trên (sort trong js/app.js) */
.notif-list-container {
  max-height: 340px !important;
  overflow-y: auto !important;
}
.notif-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  padding: 12px 16px !important;
  border-bottom: 1px solid #F1F5F9 !important;
  transition: background 0.2s ease !important;
  cursor: pointer !important;
}
.notif-item:hover {
  background: #F8FAFC !important;
}
/* Kiểu dòng thông báo Chưa Đọc vs Đã Đọc */
.notif-item.unread {
  background: #FEF2F2 !important; /* Nền hồng nhạt nổi bật */
  font-weight: 700 !important;
  border-left: 3.5px solid #EF4444 !important;
}
.notif-item.read {
  background: #FFFFFF !important;
  opacity: 0.8 !important;
  border-left: 3.5px solid transparent !important;
}
.notif-item-icon {
  font-size: 1.1rem !important;
  margin-top: 2px !important;
}
.notif-item-content {
  flex: 1 !important;
  text-align: left !important;
}
.notif-item-text {
  font-size: 0.82rem !important;
  color: #1E293B !important;
  line-height: 1.45 !important;
}
.notif-item.read .notif-item-text{font-weight:400 !important;}
.notif-item-time {
  font-size: 0.72rem !important;
  color: #94A3B8 !important;
  margin-top: 4px !important;
}
.notif-empty{padding:28px 16px;text-align:center;color:var(--text-dim);font-size:.85rem;}
.notif-dropdown-footer {
  padding: 10px !important;
  text-align: center !important;
  background: #F8FAFC !important;
  border-top: 1px solid #E2E8F0 !important;
}
.notif-dropdown-footer a {
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  color: #8B0000 !important;
  text-decoration: none !important;
}
@media(max-width:576px){
  .notif-dropdown-menu{right:-70px !important;width:320px !important;}
}

/* Hiệu ứng nhấp nháy làm nổi bật mục được điều hướng tới từ Thông báo (highlight tạm thời) */
.notif-highlight-flash{
  animation: notifHighlightPulse 1.4s ease-in-out 0s 2 !important;
}
@keyframes notifHighlightPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,0);}
  50%{box-shadow:0 0 0 4px rgba(239,68,68,.35);}
}

/* ---------- Modal Popup Chi tiết Thông báo & Chỉ thị (#notifDetailModal) — Luxury Corporate ---------- */
.notif-detail-overlay{
  display:none;position:fixed;inset:0;z-index:99998;
  background:rgba(10,18,32,.55);
  align-items:center;justify-content:center;padding:20px;
}
.notif-detail-overlay.open{display:flex;}
.notif-detail-card{
  width:100%;max-width:560px;max-height:86vh;
  background:#FFFFFF;border-radius:20px;overflow:hidden;
  display:flex;flex-direction:column;
  box-shadow:0 25px 60px rgba(0,0,0,.35);
  font-family:'Inter','Montserrat',var(--font-display),sans-serif;
  animation:confirmPop .18s ease;
}
.notif-detail-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:18px 22px;
  background:linear-gradient(135deg,#8B0000,#C8102E);
  color:#fff;flex-shrink:0;
}
.notif-detail-head-title{font-size:1rem;font-weight:800;letter-spacing:.2px;}
.notif-detail-close{
  width:30px;height:30px;border-radius:50%;border:none;
  background:rgba(255,255,255,.18);color:#fff;font-size:.9rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:.2s;flex-shrink:0;
}
.notif-detail-close:hover{background:rgba(255,255,255,.32);}
.notif-detail-body{padding:22px 24px;overflow-y:auto;flex:1;}
.notif-detail-title{font-size:1.15rem;font-weight:800;color:#0F1B2D;margin:0 0 8px;line-height:1.4;}
.notif-detail-meta{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-size:.78rem;color:#64748B;margin-bottom:16px;
}
.notif-detail-meta-sep{opacity:.5;}
.notif-detail-content{
  font-size:.92rem;line-height:1.7;color:#1E293B;white-space:pre-line;
}
.notif-detail-foot{
  display:flex;align-items:center;justify-content:flex-end;gap:10px;
  padding:16px 22px;border-top:1px solid #E2E8F0;background:#F8FAFC;flex-shrink:0;
}
[data-theme="dark"] .notif-detail-card{background:var(--surface-solid);}
[data-theme="dark"] .notif-detail-title{color:var(--text);}
[data-theme="dark"] .notif-detail-content{color:var(--text);}
[data-theme="dark"] .notif-detail-foot{background:var(--surface);border-color:var(--surface-border);}

/* Ô tìm kiếm dự phòng cho mobile (dùng lại .search-box gốc, không đổi placeholder) */
.search-box{position:relative;max-width:420px;width:100%;}
.search-box input{
  width:100%;padding:10px 64px 10px 38px;border-radius:10px;
  border:1px solid #E2E8F0;background:#F1F5F9;
  color:var(--text);font-size:.88rem;transition:.2s;
}
.search-box input:focus{background:var(--surface-solid);border-color:var(--steel-300);outline:none;}
[data-theme="dark"] .search-box input{background:rgba(255,255,255,.06);border-color:var(--surface-border);}
.search-box svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);opacity:.5;width:16px;height:16px;}


/* ---------- Hero / stats ---------- */
/* ---------- App shell: Sidebar + nội dung chính ---------- */
.app-shell{
  display:flex !important;
  align-items:flex-start !important;
  position:relative !important;
  width:100% !important;
  max-width:1600px;margin:0 auto;
}
.main-col{
  flex:1 !important;
  min-width:0 !important;
  box-sizing:border-box !important;
}

.sidebar-overlay{position:fixed;inset:0;background:rgba(10,18,32,.5);z-index:46;display:none;}
.sidebar-overlay.open{display:block;}

.sidebar-kst{
  width:240px;flex-shrink:0;position:sticky;top:var(--header-h);height:calc(100vh - var(--header-h));
  overflow-y:auto;padding:16px 12px;z-index:90;
  background:#FFFFFF;
  border-right:1px solid #E2E8F0;
  box-shadow:2px 0 10px rgba(0,0,0,0.02);
  box-sizing:border-box;
}
/* Thanh cuộn mỏng tinh tế cho Sidebar (khi danh sách Menu dài) */
.sidebar-kst::-webkit-scrollbar{width:4px;}
.sidebar-kst::-webkit-scrollbar-track{background:transparent;}
.sidebar-kst::-webkit-scrollbar-thumb{background:#CBD5E1;border-radius:4px;}
.sidebar-kst::-webkit-scrollbar-thumb:hover{background:#8B0000;}

.sidebar-nav{display:flex;flex-direction:column;gap:4px;}
.sidebar-link{
  display:flex;align-items:center;gap:11px;padding:11px 14px;border-radius:12px;
  color:var(--text-dim);font-weight:600;font-size:.86rem;transition:all .2s ease;
}
.sidebar-link:hover{background:rgba(200,16,46,.08);color:#C8102E;}
.sidebar-link.active{
  background:linear-gradient(135deg,var(--brand-red),var(--brand-red-dark));
  color:#fff;box-shadow:var(--shadow);
}
.sidebar-icon{font-size:1.05rem;width:20px;text-align:center;flex-shrink:0;}

/* ================================================== */
/* DARK MODE ĐỒNG BỘ CHO CỘT MENU BÊN TRÁI (SIDEBAR)   */
/* Dự án dùng cơ chế [data-theme="dark"] trên <html>,  */
/* không dùng class body.dark-mode, nên các selector    */
/* bên dưới được ánh xạ theo đúng cấu trúc thực tế:      */
/* .sidebar-kst / .sidebar-nav / .sidebar-link / .active */
/* ================================================== */

/* 1. NỀN TỐI VÀ VIỀN CHO CỘT MENU BÊN TRÁI */
[data-theme="dark"] .sidebar-kst{
  background:#0F172A !important; /* Màu nền đen xanh tối cao cấp */
  border-right:1px solid rgba(255,255,255,0.08) !important;
  box-shadow:4px 0 20px rgba(0,0,0,0.25) !important;
  transition:all .3s ease !important;
}
[data-theme="dark"] .sidebar-kst::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.15) !important;}
[data-theme="dark"] .sidebar-kst::-webkit-scrollbar-thumb:hover{background:#B91C1C !important;}

/* 2. CHỮ VÀ ICON CÁC MỤC MENU CHƯA CHỌN (UNSELECTED) */
[data-theme="dark"] .sidebar-link{
  color:#94A3B8 !important; /* Chữ xám sáng nhẹ mắt */
  background:transparent !important;
  transition:all .2s ease !important;
}
[data-theme="dark"] .sidebar-link .sidebar-icon{
  filter:brightness(1.2) !important;
}

/* 3. HIỆU ỨNG RÊ CHUỘT (HOVER) VÀO MỤC MENU TRONG DARK MODE */
[data-theme="dark"] .sidebar-link:hover{
  background:rgba(255,255,255,0.06) !important;
  color:#FFFFFF !important;
  transform:translateX(4px) !important;
}

/* 4. MỤC MENU ĐANG ĐƯỢC CHỌN (ACTIVE ITEM - VD: TRANG CHỦ) */
[data-theme="dark"] .sidebar-link.active{
  background:linear-gradient(135deg,#8B0000 0%,#B91C1C 100%) !important; /* Đỏ Đô Hoa Sen nổi bật */
  color:#FFFFFF !important;
  font-weight:800 !important;
  box-shadow:0 4px 14px rgba(139,0,0,0.5) !important;
  border-radius:12px !important;
}
[data-theme="dark"] .sidebar-link.active .sidebar-icon{
  filter:drop-shadow(0 0 6px rgba(255,255,255,0.8)) !important;
}

/* 5. LIÊN KẾT ĐẶC BIỆT (QUẢN LÝ KHÁCH HÀNG - mở tab mới) */
[data-theme="dark"] .sidebar-link[data-nav="dms"]{
  background:linear-gradient(135deg,#7F1D1D 0%,#991B1B 100%) !important;
  color:#FFFFFF !important;
  border:1px solid #EF4444 !important;
  box-shadow:0 4px 12px rgba(239,68,68,0.3) !important;
}
[data-theme="dark"] .sidebar-link[data-nav="dms"]:hover{
  transform:translateX(4px) !important;
  box-shadow:0 4px 14px rgba(239,68,68,0.45) !important;
}

@media(max-width:991.98px){
  .sidebar-kst{
    position:fixed;top:0;left:0;z-index:50;height:100vh;background:var(--surface-solid);
    transform:translateX(-100%);transition:transform .25s ease;box-shadow:var(--shadow-lg);
    /* Header trên mobile thật ra cao ~356px (logo+tiêu đề, cụm icon tiện ích, ô tìm
       kiếm mobile đều tự xuống dòng do hẹp ngang) — trước đó chỉ chừa 100px nên mục
       "Trang chủ" bị Header (z-index cao hơn) đè lên. Đo thực tế bằng trình duyệt ở
       nhiều độ rộng (320px→991px) đều ra đúng 356px, nên chừa 366px cho an toàn. */
    top:0;padding-top:366px;padding-bottom:12px;
  }
  .sidebar-kst.open{transform:translateX(0);}
  /* Thu gọn nhẹ các mục menu trên di động — giảm khả năng phải cuộn nội bộ,
     để 8 mục menu vẫn hiển thị đầy đủ trên các màn hình điện thoại thấp. */
  .sidebar-nav{gap:2px;}
  .sidebar-link{padding:9px 12px;font-size:.82rem;gap:9px;}
  .sidebar-icon{font-size:.98rem;width:18px;}
}
/* CỐ ĐỊNH THANH MENU SIDEBAR BÊN TRÁI — chỉ áp dụng ở desktop (≥992px);
   ở mobile sidebar là ngăn kéo (drawer) position:fixed nên KHÔNG ép !important ở đây
   để tránh phá vỡ hành vi đóng/mở của drawer trên di động. z-index 90 luôn THẤP HƠN
   Header (1000) để Sidebar không bao giờ đè lên/che chữ của thanh Header đỏ khi cuộn trang.

   QUAN TRỌNG — TẠI SAO DÙNG position:fixed THAY VÌ position:sticky:
   Trang này là SPA 1 trang: mỗi lần bấm menu, JS (switchMainView trong index.html)
   ẨN hết các "view" khác và chỉ hiện đúng 1 view đang chọn (vd "Thư viện chính sách"
   chỉ có vài thẻ, NGẮN hơn nhiều so với view "Trang chủ"). Vì .sidebar-kst là con
   trực tiếp của .app-shell (flex), nếu dùng position:sticky thì nó CHỈ dính được
   trong phạm vi chiều cao của .app-shell — mà chiều cao đó co theo view đang hiện.
   Gặp view ngắn (như Thư viện chính sách) → .app-shell ngắn theo → sticky "hết chỗ
   dính" ngay khi cuộn qua khỏi đó → sidebar rơi mất, đúng lỗi đã gặp phải.
   position:fixed neo thẳng theo khung nhìn (viewport), HOÀN TOÀN không phụ thuộc
   .app-shell/.main-col cao hay ngắn — sidebar luôn đứng yên ở mọi view, mọi lúc cuộn. */
@media(min-width:992px){
  .sidebar-overlay{display:none !important;}
  .sidebar-kst{
    position:fixed !important;
    top:var(--header-h) !important; /* ĐẨY SIDEBAR XUỐNG BẮT ĐẦU TỪ CHÂN HEADER THẬT
       (trước đây hardcode 75px chỉ đủ cho dải đỏ chính, THIẾU dải banner cam kết
       phía trên .hsh-top-neon-bar → mục "Trang chủ" bị header đè/che lên) */
    /* Canh trái đúng theo mép trái của khối .app-shell (vốn margin:0 auto, max-width:1600px)
       thay vì dính cứng mép trái màn hình — để không bị lệch khỏi layout khi màn hình > 1600px. */
    left: max(0px, calc((100vw - 1600px) / 2)) !important;
    align-self:flex-start !important;
    height:calc(100vh - var(--header-h)) !important; /* Ôm trọn chiều cao còn lại của màn hình */
    flex:0 0 240px !important; /* Độ rộng cố định thanh Menu */
    width:240px !important;
    overflow-y:auto !important;
    z-index:90 !important; /* Luôn nằm dưới Header (1000) */
    background:#FFFFFF !important;
    border-right:1px solid #E2E8F0 !important;
    box-shadow:2px 0 10px rgba(0,0,0,0.02) !important;
    padding:16px 12px !important;
    box-sizing:border-box !important;
  }
  /* Vì sidebar giờ position:fixed (bị đưa ra khỏi dòng chảy flex của .app-shell),
     .main-col cần tự chừa chỗ 240px bên trái để không bị sidebar đè lên. */
  .main-col{
    margin-left:240px !important;
  }
}


/* ---------- Widget: Lịch công việc ---------- */
.top-row{display:flex;gap:22px;align-items:flex-start;}
.top-row-main{flex:1;min-width:0;}
.calendar-widget{
  width:288px;flex-shrink:0;background:var(--surface-solid);border:1px solid var(--surface-border);
  border-radius:var(--radius);padding:16px;box-shadow:var(--shadow);margin-top:28px;
}
.calendar-widget-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px;flex-wrap:wrap;}
.calendar-viewall{font-size:.78rem;font-weight:700;color:var(--steel-600);}
.calendar-viewall:hover{text-decoration:underline;}
.calendar-selects{display:flex;gap:6px;}
.calendar-selects select{
  border:1px solid var(--surface-border);border-radius:8px;padding:4px 6px;
  font-size:.76rem;background:var(--surface-solid);color:var(--text);
}
.calendar-dow{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;font-size:.66rem;color:var(--text-dim);font-weight:700;margin-bottom:6px;}
.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;}
.calendar-day{
  position:relative;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;
  border-radius:8px;font-size:.76rem;font-weight:600;color:var(--text);
}
.calendar-day.other-month{color:var(--text-dim);opacity:.38;}
.calendar-day.has-task{cursor:pointer;}
.cal-dots{position:absolute;bottom:3px;left:50%;transform:translateX(-50%);display:flex;gap:2px;}
.cal-dots span{width:4.5px;height:4.5px;border-radius:50%;display:block;}
.cal-dots .d-overdue{background:var(--red-600);}
.cal-dots .d-duesoon{background:var(--amber-500);}
.cal-dots .d-new{background:var(--green-600);}
.calendar-day.has-task:hover{background:var(--amber-100);}
[data-theme="dark"] .calendar-day.has-task:hover{background:rgba(240,180,0,.18);}
.calendar-day.today{background:var(--red-600);color:#fff;font-weight:800;}
.calendar-day.today.has-task::after{background:#fff;}
.calendar-day.selected{outline:2px solid var(--steel-600);outline-offset:-2px;background:var(--steel-100);color:var(--steel-700);font-weight:800;}
.calendar-filter-hint{margin-top:10px;font-size:.76rem;color:var(--text-dim);display:flex;align-items:center;gap:6px;min-height:1em;}

.calendar-filter-hint .clear-x{cursor:pointer;color:var(--red-600);font-weight:700;}

@media(max-width:900px){
  .top-row{flex-direction:column;}
  .calendar-widget{width:100%;margin-top:16px;}
}

.hero-title{font-weight:800;font-size:clamp(1.6rem,3vw,2.3rem);margin:28px 0 4px;}
.hero-sub{color:var(--text-dim);margin-bottom:22px;font-size:.95rem;}

.stats-row{
  display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin-bottom:26px;margin-top:8px;
  background:var(--surface-solid);border:1px solid var(--surface-border);border-radius:var(--radius);
  box-shadow:var(--shadow);overflow:hidden;
}
@media(max-width:992px){.stats-row{grid-template-columns:repeat(2,1fr);}}
.stat-card{
  position:relative;overflow:hidden;
  padding:14px 4px !important;
  border-right:1px solid var(--surface-border);
  display:flex !important;flex-direction:column !important;align-items:center !important;
  justify-content:center !important;text-align:center !important;
  min-width:0 !important;
}
.stat-card:last-child{border-right:none;}
.stat-card::after{
  content:attr(data-wm);position:absolute;right:-4px;bottom:-14px;font-size:3.4rem;
  line-height:1;opacity:.08;pointer-events:none;transform:rotate(-6deg);
}
.stat-card .num{
  font-family:var(--font-mono);font-size:1.85rem !important;font-weight:800;line-height:1;
  position:relative;z-index:1;margin-bottom:6px !important;
}
.stat-card .label{
  font-size:.72rem !important;color:var(--text-dim);margin-top:0;font-weight:700;
  text-transform:uppercase;letter-spacing:-.3px !important;position:relative;z-index:1;
  white-space:nowrap !important;width:100% !important;text-align:center !important;padding:0 2px !important;
}
.stat-card::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--steel-500);
}
.stat-card.total .num{color:var(--steel-600);}
.stat-card.total::before{background:var(--steel-600);}
.stat-card.in-progress .num{color:var(--amber-600);}
.stat-card.in-progress::before{background:var(--amber-600);}
.stat-card.duesoon .num{color:#C67C00;}
.stat-card.duesoon::before{background:#C67C00;}
.stat-card.done .num{color:var(--green-600);}
.stat-card.done::before{background:var(--green-600);}
.stat-card.overdue .num{color:var(--red-600);}
.stat-card.overdue::before{background:var(--red-600);}
@media(max-width:640px){.stat-card:nth-child(2){border-right:none;}}

/* ---------- Urgent banner ---------- */
.urgent-banner{
  background:linear-gradient(90deg,var(--red-600),#E0483E);
  color:#fff;border-radius:var(--radius-sm);padding:6px 12px;margin-bottom:12px;
  display:flex;align-items:center;gap:8px;font-size:.76rem;box-shadow:0 6px 18px rgba(198,54,47,.3);
  animation:pulseGlow 2.4s ease-in-out infinite;
}
@keyframes pulseGlow{
  0%,100%{box-shadow:0 6px 18px rgba(198,54,47,.3);}
  50%{box-shadow:0 6px 26px rgba(198,54,47,.48);}
}
.urgent-banner .fire{font-size:1rem;}
.urgent-banner strong{font-weight:700;}
.urgent-banner-close{margin-left:auto;background:rgba(255,255,255,.2);border:none;color:#fff;border-radius:8px;width:28px;height:28px;cursor:pointer;}

/* ---------- Filter bar ---------- */
.filter-bar{
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:22px;
  background:var(--surface);backdrop-filter:blur(var(--blur));
  border:1px solid var(--surface-border);border-radius:var(--radius-sm);padding:12px;
}
.filter-bar select{
  border-radius:10px;border:1px solid var(--surface-border);
  background:var(--surface-solid);color:var(--text);padding:8px 10px;font-size:.84rem;
}
.filter-bar .spacer{flex:1;}

/* Rule ĐỘC LẬP cho .form-select-filter — trước đây class này chỉ ăn style nhờ ".filter-bar select"
   (chỉ có tác dụng bên trong .filter-bar). Định nghĩa riêng ở đây để dùng được ở MỌI nơi mà vẫn
   giữ đúng 1 giao diện đồng nhất. */
.form-select-filter{
  border-radius:10px;border:1px solid var(--surface-border);
  background:var(--surface-solid);color:var(--text);padding:9px 12px;font-size:.87rem;
  font-family:'Be Vietnam Pro',sans-serif;transition:border-color .2s ease,box-shadow .2s ease;
}
.form-select-filter:focus{
  outline:none;border-color:#8B0000;box-shadow:0 0 0 3px rgba(139,0,0,0.08);
}

/* ---------- Task cards grid ---------- */
.task-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px;margin-top:8px;}
.task-card{
  position:relative;overflow:hidden;
  background:var(--surface-solid);
  border:1px solid var(--surface-border);border-left:4px solid var(--steel-500);
  border-radius:var(--radius);
  padding:18px;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
  box-shadow:var(--shadow);display:flex;flex-direction:column;gap:10px;
}
.task-card:hover{transform:translateY(-4px);box-shadow:0 12px 24px rgba(15,27,45,0.1);}

/* Thẻ công việc mức KHẨN — đỏ nhạt luxury, viền trái đỏ nổi bật, thắng cả màu category */
.task-card.is-urgent,
.urgent-task-item,
.card-urgent-highlight{
  background:linear-gradient(135deg,#FEF2F2 0%,#FFF1F2 100%) !important;
  border:1px solid #FECACA !important;
  border-left:5px solid #DC2626 !important;
  box-shadow:0 4px 16px rgba(220,38,38,0.1) !important;
  transition:all .25s cubic-bezier(0.16,1,0.3,1) !important;
}
.task-card.is-urgent:hover{
  transform:translateY(-3px) scale(1.01) !important;
  box-shadow:0 8px 24px rgba(220,38,38,0.2) !important;
  border-color:#F87171 !important;
}

/* Dark Mode — 2 rule trên hardcode màu nền/viền sáng bằng !important nên KHÔNG tự đổi theo
   biến theme; phải override riêng ở đây, nếu không thẻ Khẩn sẽ luôn hồng chói + chữ sáng
   (var(--text) đổi trắng trong Dark Mode) đè lên nền hồng sáng -> chữ gần như biến mất. */
[data-theme="dark"] .task-card.is-urgent,
[data-theme="dark"] .urgent-task-item,
[data-theme="dark"] .card-urgent-highlight{
  background:linear-gradient(135deg,#2C1214 0%,#3A1418 100%) !important;
  border:1px solid #7F1D1D !important;
  border-left:5px solid #EF4444 !important;
  box-shadow:0 4px 16px rgba(220,38,38,0.28) !important;
}
[data-theme="dark"] .task-card.is-urgent:hover{
  border-color:#F87171 !important;
  box-shadow:0 8px 24px rgba(220,38,38,0.38) !important;
}

/* Nhãn badge "🔥 Khẩn" — hào quang phát sáng đa tầng, nhấp nháy liên tục, nổi bật rõ */
.badge-urgent-tag,
.tag-priority-urgent,
.badge-khan{
  display:inline-flex !important;align-items:center !important;gap:4px !important;
  background:linear-gradient(135deg,#DC2626 0%,#EF4444 100%) !important;
  color:#FFFFFF !important;font-weight:900 !important;font-size:.78rem !important;
  padding:4px 10px !important;border-radius:8px !important;letter-spacing:.5px !important;
  position:relative !important;
  animation:pulseGlowRedHalo 1.5s infinite ease-in-out !important;
}
.badge-urgent-tag::before,
.tag-priority-urgent::before,
.badge-khan::before{content:"🔥";margin-right:2px;}
@keyframes pulseGlowRedHalo{
  0%{box-shadow:0 0 0 0 rgba(220,38,38,.7), 0 0 10px rgba(239,68,68,.5);}
  50%{box-shadow:0 0 0 6px rgba(250,204,21,.25), 0 0 0 12px rgba(220,38,38,.2), 0 0 18px rgba(220,38,38,.4);}
  100%{box-shadow:0 0 0 0 rgba(220,38,38,0), 0 0 0 0 rgba(220,38,38,0);}
}

/* Thẻ công việc QUÁ HẠN — màu tối, mờ dần, lặn xuống cuối danh sách */
.task-card.is-expired{
  opacity:.78 !important;
  background:#F8FAFC !important;
  border:1px solid #E2E8F0 !important;
  border-left:5px solid #64748B !important;
}
[data-theme="dark"] .task-card.is-expired{
  background:#0F172A !important;
  border:1px solid #334155 !important;
}

/* Hàng badge Pill ở đầu thẻ (thay cho dấu mộc tròn nghiêng cũ) */
.card-badges-row{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;}
.card-badges-row .badges-left{display:flex;gap:6px;flex-wrap:wrap;}
.badge-pill.badge-urgent{background:var(--red-100);color:var(--red-600);}
.badge-pill.badge-urgent::before{content:"🔥";margin-right:2px;}

/* Progress bar tiến độ checklist ngay trên thẻ */
.card-progress{margin-top:2px;}
.card-progress-track{height:6px;border-radius:99px;background:var(--steel-100);overflow:hidden;}
.card-progress-fill{height:100%;border-radius:99px;background:var(--steel-500);transition:width .3s ease;}
.card-progress.is-done .card-progress-fill{background:var(--green-600);}
.card-progress-label{font-size:.68rem;color:var(--text-dim);margin-top:4px;font-weight:600;}

/* Avatar người phụ trách */
.avatar-chip{
  width:22px;height:22px;border-radius:50%;background:var(--steel-500);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;font-size:.62rem;font-weight:800;
  flex-shrink:0;vertical-align:middle;margin-right:6px;
}

/* Viền trái + chip icon theo từng loại công việc */
.task-card[data-cat="congno"]{border-left-color:var(--cat-congno);}
.task-card[data-cat="luong"]{border-left-color:var(--cat-luong);}
.task-card[data-cat="xetai"]{border-left-color:var(--cat-xetai);}
.task-card[data-cat="bm02"]{border-left-color:var(--cat-bm02);}
.task-card[data-cat="kiemke"]{border-left-color:var(--cat-kiemke);}
.task-card[data-cat="vesinh"]{border-left-color:var(--cat-vesinh);}
.task-icon-chip{
  width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  font-size:1.35rem;flex-shrink:0;
}
.task-card[data-cat="congno"] .task-icon-chip{background:var(--cat-congno-bg);}
.task-card[data-cat="luong"] .task-icon-chip{background:var(--cat-luong-bg);}
.task-card[data-cat="xetai"] .task-icon-chip{background:var(--cat-xetai-bg);}
.task-card[data-cat="bm02"] .task-icon-chip{background:var(--cat-bm02-bg);}
.task-card[data-cat="kiemke"] .task-icon-chip{background:var(--cat-kiemke-bg);}
.task-card[data-cat="vesinh"] .task-icon-chip{background:var(--cat-vesinh-bg);}
.task-card[data-cat="default"] .task-icon-chip{background:var(--steel-100);}

/* Deadline nổi bật khi sắp hết hạn / quá hạn */
.deadline-warn{
  color:var(--red-600) !important;font-weight:700;
  display:inline-flex;align-items:center;gap:4px;
}
.deadline-warn .clock-pulse{animation:clockPulse 1.1s ease-in-out infinite;display:inline-block;}
@keyframes clockPulse{
  0%,100%{transform:scale(1);opacity:1;}
  50%{transform:scale(1.28);opacity:.55;}
}
.task-card .icon-row{display:flex;align-items:center;justify-content:space-between;}
.task-card .task-icon{font-size:1.7rem;}
.task-card h3{font-size:1.02rem;font-weight:700;margin:0;line-height:1.35;}
.task-card .task-type{font-size:.72rem;color:var(--text-dim);font-weight:600;text-transform:uppercase;letter-spacing:.3px;}
.task-card .meta-row{display:flex;align-items:center;justify-content:space-between;font-size:.8rem;color:var(--text-dim);margin-top:auto;}
.task-card .deadline{font-family:var(--font-mono);font-weight:600;color:var(--text);}
.task-card .btn-detail{
  margin-top:4px;text-align:center;padding:8px;border-radius:10px;
  background:transparent;color:var(--steel-600);font-weight:700;font-size:.82rem;
  border:1.5px solid var(--steel-100);transition:.2s;
}
.task-card:hover .btn-detail{background:var(--steel-600);color:#fff;border-color:var(--steel-600);}

/* Badges */
.badge-pill{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:999px;font-size:.7rem;font-weight:700;letter-spacing:.2px;}
.badge-priority-urgent{background:var(--red-100);color:var(--red-600);}
.badge-priority-normal{background:var(--steel-100);color:var(--steel-700);}
.badge-priority-low{background:var(--green-100);color:var(--green-600);}
.badge-status-inprogress{background:var(--steel-100);color:var(--steel-700);}
.badge-status-duesoon{background:var(--amber-100);color:var(--amber-600);}
.badge-status-done{background:var(--green-100);color:var(--green-600);}
.badge-status-overdue{background:var(--red-100);color:var(--red-600);}

/* Dấu mộc tròn cũ đã được thay bằng .badge-pill / .badge-urgent ở đầu thẻ (card-badges-row) */

/* Skeleton loading */
.skeleton{position:relative;overflow:hidden;background:var(--steel-100);border-radius:10px;}
.skeleton::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);
  animation:shimmer 1.4s infinite;
}
[data-theme="dark"] .skeleton::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);}
@keyframes shimmer{0%{transform:translateX(-100%);}100%{transform:translateX(100%);}}
.skeleton-card{height:190px;border-radius:var(--radius);}

/* ---------- Detail panel (slide-in) ---------- */
/* z-index nâng lên 1005/1006 — PHẢI cao hơn Header (.navbar-kst-exact, z-index:1000),
   nếu không Header đỏ sẽ đè lên đúng phần tiêu đề + mốc thời gian ở đầu Panel (lỗi đã gặp). */
.detail-overlay{
  position:fixed;inset:0;background:rgba(10,18,32,.45);backdrop-filter:blur(4px);
  z-index:1005;display:none;
}
.detail-overlay.open{display:block;}
.detail-panel{
  position:fixed;top:0;right:0;height:100%;width:min(720px,100%);
  background:var(--surface-solid);z-index:1006;
  transform:translateX(100%);transition:transform .32s cubic-bezier(.22,.9,.3,1);
  overflow-y:auto;box-shadow:-20px 0 60px rgba(0,0,0,.25);
}
.detail-panel.open{transform:translateX(0);}
.detail-header{
  padding:10px 18px 8px;border-bottom:1px solid var(--surface-border);
  background:linear-gradient(135deg,var(--steel-700),var(--steel-900));color:#fff;
  position:sticky;top:0;z-index:2;
}
.detail-header .close-btn{
  background:rgba(255,255,255,.15);border:none;color:#fff;width:34px;height:34px;
  border-radius:10px;cursor:pointer;font-size:1rem;
}
.detail-header h2{
  font-size:.95rem;font-weight:800;line-height:1.3;letter-spacing:.4px;
  margin:5px 0;text-transform:uppercase;
}
.detail-meta{
  display:flex;flex-wrap:wrap;gap:6px 14px;font-size:.74rem;
  margin-top:6px;padding:6px 10px;background:rgba(255,255,255,.06);border-radius:8px;
}
.dm-item{
  display:flex;align-items:center;gap:5px;padding:2px 0;border-bottom:none;
}
.dm-label{font-size:.64rem;text-transform:uppercase;letter-spacing:.3px;color:rgba(255,255,255,.55);font-weight:700;}
.dm-label::after{content:":";margin-left:1px;}
.dm-value{font-size:.78rem;color:#fff;font-weight:700;font-family:var(--font-mono);}
.detail-body{padding:16px 20px 110px;}
.section-title{font-weight:700;font-size:.95rem;margin:24px 0 12px;display:flex;align-items:center;gap:8px;}
.section-title:first-child{margin-top:0;}
.content-box{
  background:var(--bg);border:1px solid var(--surface-border);border-radius:var(--radius-sm);
  padding:16px;font-size:.9rem;line-height:1.7;color:var(--text);white-space:pre-line;
}

/* Countdown — Glassmorphism card, thu gọn */
.countdown-box{
  display:flex;gap:5px;margin-top:6px;flex-wrap:wrap;
}
.countdown-unit{
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);
  border-radius:6px;padding:3px 7px;text-align:center;min-width:40px;
}
.countdown-unit .val{font-family:var(--font-mono);font-weight:800;font-size:.86rem;color:var(--brand-gold);}
.countdown-unit .lbl{font-size:.54rem;font-weight:700;opacity:.8;color:#fff;text-transform:uppercase;}
.countdown-unit.countdown-sec{background:rgba(240,180,0,.22);border-color:rgba(240,180,0,.35);}
.countdown-unit.countdown-sec .val{color:var(--brand-gold);}

/* Steps */
.step-list{list-style:none;padding:0;margin:0;counter-reset:step;}
.step-item{
  counter-increment:step;position:relative;padding:14px 14px 14px 52px;
  border:1px solid var(--surface-border);border-radius:var(--radius-sm);margin-bottom:10px;
  background:var(--surface);transition:.2s;
}
.step-item:hover{border-color:var(--steel-300);}
.step-item::before{
  content:counter(step);position:absolute;left:14px;top:14px;
  width:26px;height:26px;border-radius:50%;background:var(--steel-600);color:#fff;
  display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-weight:700;font-size:.8rem;
}
.step-item h4{font-size:.92rem;font-weight:700;margin:0 0 4px;}
.step-item p{font-size:.83rem;color:var(--text-dim);margin:0 0 8px;}
.step-item .step-btn{
  display:inline-flex;align-items:center;gap:6px;font-size:.78rem;font-weight:700;
  padding:6px 12px;border-radius:8px;background:var(--amber-100);color:var(--amber-600);
}
.step-item .step-btn:hover{background:var(--amber-500);color:#fff;}

/* Links list */
.link-list{display:flex;flex-direction:column;gap:8px;}
.link-row{
  display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:var(--radius-sm);
  border:1px solid var(--surface-border);background:var(--surface);
}
.link-row .lname{flex:1;font-size:.88rem;font-weight:600;}
.link-row .lopen{
  padding:6px 14px;border-radius:8px;background:var(--steel-600);color:#fff;font-size:.78rem;font-weight:700;
}
.link-row .lopen:hover{background:var(--steel-700);}

/* Checklist */
.checklist-progress{margin-bottom:12px;}
.checklist-progress-label{font-size:.8rem;font-weight:700;color:var(--text-dim);margin-bottom:6px;}
.checklist-progress-track{height:8px;border-radius:99px;background:var(--steel-100);overflow:hidden;}
.checklist-progress-fill{height:100%;border-radius:99px;background:var(--green-600);transition:width .3s ease;}
.checklist{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px;}
.checklist li{
  display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:10px;
  border:1px solid #E2E8F0;background:#F8FAFC;font-size:.88rem;cursor:pointer;
  margin-bottom:8px;transition:background .2s ease,border-color .2s ease;
}
.checklist input{width:17px;height:17px;accent-color:var(--steel-600);}
.checklist li.done{background:#F0FDF4;border-color:#22C55E;opacity:1;}
.checklist li.done span{text-decoration:line-through;color:var(--text-dim);}

/* Toast */
.toast-stack{position:fixed;bottom:20px;right:20px;z-index:80;display:flex;flex-direction:column;gap:10px;}
.toast-item{
  background:var(--surface-solid);border:1px solid var(--surface-border);border-radius:12px;
  padding:12px 16px;box-shadow:var(--shadow-lg);font-size:.86rem;min-width:240px;
  display:flex;align-items:center;gap:10px;animation:toastIn .25s ease;
}
@keyframes toastIn{from{transform:translateY(10px);opacity:0;}to{transform:translateY(0);opacity:1;}}
.toast-item.success{border-left:4px solid var(--green-600);}
.toast-item.error{border-left:4px solid var(--red-600);}

/* Buttons generic */
.btn-kst{
  border:none;border-radius:10px;padding:9px 18px;font-weight:700;font-size:.86rem;cursor:pointer;transition:.2s;
}
.btn-kst-primary{background:var(--steel-600);color:#fff;}
.btn-kst-primary:hover{background:var(--steel-700);}
.btn-kst-outline{background:transparent;border:1.5px solid var(--surface-border);color:var(--text);}
.btn-kst-danger{background:var(--red-600);color:#fff;}
.btn-kst-amber{background:var(--amber-500);color:#fff;}

/* Empty state */
.empty-state{text-align:center;padding:60px 20px;color:var(--text-dim);}
.empty-state .emoji{font-size:2.4rem;margin-bottom:10px;}

/* Admin */
.admin-shell{max-width:960px;margin:40px auto;padding:0 20px;}
.login-card{
  max-width:380px;margin:80px auto;background:var(--surface);backdrop-filter:blur(var(--blur));
  border:1px solid var(--surface-border);border-radius:var(--radius);padding:32px;box-shadow:var(--shadow-lg);
}
.form-kst label{font-size:.82rem;font-weight:700;margin-bottom:5px;display:block;}
.form-kst input,.form-kst select,.form-kst textarea{
  width:100%;border:1px solid var(--surface-border);border-radius:10px;padding:9px 12px;
  background:var(--surface-solid);color:var(--text);font-size:.88rem;margin-bottom:14px;font-family:inherit;
}
.dynamic-row{
  display:flex;gap:8px;align-items:flex-start;border:1px dashed var(--surface-border);
  border-radius:10px;padding:10px;margin-bottom:8px;
}
.dynamic-row .grow{flex:1;}
.admin-table{width:100%;border-collapse:collapse;font-size:.86rem;}
.admin-table th,.admin-table td{padding:10px;border-bottom:1px solid var(--surface-border);text-align:left;}
.admin-table tr:hover{background:var(--surface);}
.modal-kst{
  position:fixed;inset:0;background:rgba(10,18,32,.5);z-index:1005;
  display:none;align-items:flex-start;justify-content:center;padding:40px 16px;overflow-y:auto;
}
.modal-kst.open{display:flex;}
.modal-kst .modal-card{
  background:var(--surface-solid);border-radius:var(--radius);max-width:640px;width:100%;
  padding:26px;box-shadow:var(--shadow-lg);
}

/* Modal xác nhận "Hoàn thành công việc" trong checklist cá nhân */
.confirm-modal{
  position:fixed;inset:0;background:rgba(10,18,32,.55);z-index:1006;
  display:none;align-items:center;justify-content:center;padding:16px;
}
.confirm-modal.open{display:flex;}
.confirm-card{
  background:var(--surface-solid);border-radius:var(--radius);max-width:380px;width:100%;
  padding:28px 24px;box-shadow:var(--shadow-lg);text-align:center;
  animation:confirmPop .18s ease;
}
@keyframes confirmPop{from{transform:scale(.94);opacity:0;}to{transform:scale(1);opacity:1;}}
.confirm-icon{font-size:2rem;margin-bottom:8px;}
.confirm-card h3{font-size:1.05rem;font-weight:800;margin:0 0 8px;color:var(--text);}
.confirm-card p{font-size:.88rem;color:var(--text-dim);margin:0 0 20px;}
.confirm-actions{display:flex;gap:10px;justify-content:center;}
.confirm-actions .btn-kst{flex:1;padding:10px;}

/* ---------- Login Gate — Kính Mờ Đèn Nổi Vàng Kim, nền ảnh 3D Hoa Sen Home (Google Drive CDN) ---------- */
.login-gate-overlay{
  position:fixed !important;
  top:0 !important;left:0 !important;
  width:100vw !important;height:100vh !important;
  z-index:999999 !important;
  display:none;align-items:center;justify-content:flex-start;
  padding-left:8vw;
  overflow:hidden !important;
}
.login-gate-overlay.open{display:flex !important;}
html:has(.login-gate-overlay.open), body:has(.login-gate-overlay.open){overflow:hidden !important;}
.login-overlay-drive{
  background:url('https://lh3.googleusercontent.com/d/1ZxUE5HsKj_mbBh7JG7FYGsS1-K-Guw2s') no-repeat center center / cover !important;
}
.login-gate-error{
  display:block;background:rgba(220,38,38,.15);color:#FCA5A5;border:1px solid rgba(220,38,38,.3);border-radius:8px;
  padding:10px 12px;font-size:.83rem;font-weight:600;margin:-4px 0 14px;line-height:1.4;
}
.login-gate-success{
  display:block;background:rgba(21,128,61,.18);color:#86EFAC;border:1px solid rgba(21,128,61,.35);border-radius:8px;
  padding:10px 12px;font-size:.83rem;font-weight:600;margin:-4px 0 14px;line-height:1.4;
}

/* ---------- Khung Đăng Nhập Thẻ Kính Đơn — Single Glass Card, đèn hào quang vàng kim bao quanh ---------- */
.login-card-gold-drive{
  width:420px;max-width:90%;
  background:rgba(15,10,14,.82) !important;
  backdrop-filter:blur(25px) !important;-webkit-backdrop-filter:blur(25px) !important;
  border:1.5px solid rgba(255,215,0,.45) !important;
  border-radius:28px !important;
  padding:36px 32px !important;
  box-shadow:0 0 50px rgba(255,193,7,.35), 0 25px 60px rgba(0,0,0,.9) !important;
  color:#ffffff !important;
  box-sizing:border-box !important;
  position:relative;z-index:1;
  overflow:hidden;
  animation:confirmPop .18s ease;
}
.login-split-top-row{display:flex;justify-content:flex-end;margin-bottom:12px;}

/* Khối chữ thương hiệu HOA SEN HOME — icon nhà khối đậm solid, đồng bộ độ dày với chữ */
.hsh-brand-container{
  text-align:center !important;
  margin:0 auto 24px auto !important;
  width:100% !important;
}
.hsh-brand-title{
  font-family:'Montserrat','Arial Black',sans-serif !important;
  font-size:1.85rem !important;
  font-weight:900 !important;
  letter-spacing:.5px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  line-height:1 !important;
  background:linear-gradient(135deg,#FFF08A 0%,#FFD700 50%,#D97706 100%) !important;
  -webkit-background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
}
.hsh-brand-slogan{
  font-size:.75rem !important;
  font-weight:800 !important;
  letter-spacing:3.5px !important;
  color:#E2E8F0 !important;
  margin-top:8px !important;
  text-transform:uppercase !important;
  text-align:center !important;
  opacity:.9 !important;
}
.lang-switch{
  display:flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;font-size:.78rem;cursor:pointer;
  margin-top:6px !important;margin-right:4px !important;
  background:rgba(255,255,255,.08) !important;
  border:1px solid rgba(255,255,255,.2) !important;
  color:#E2E8F0 !important;
  backdrop-filter:blur(4px) !important;
  -webkit-backdrop-filter:blur(4px) !important;
}
.login-form-inner{margin-top:4px;}
.login-split-title{font-size:1.5rem;font-weight:800;color:#FEF08A;margin:0 0 4px;}
.login-split-sub{
  font-size:.82rem !important; /* Tinh chỉnh cỡ chữ vừa vặn */
  font-weight:500 !important;
  letter-spacing:-.2px !important; /* Co nhẹ khoảng cách chữ */
  white-space:nowrap !important; /* TUYỆT ĐỐI KHÔNG CHO XUỐNG DÒNG */
  color:#E2E8F0 !important;
  text-align:center !important;
  margin-top:6px !important;
  margin-bottom:20px !important;
  width:100% !important;
}
.login-split-footer-note{font-size:.7rem;color:rgba(226,232,240,.4);margin-top:20px;text-align:left;}

/* ---------- Form Gold: label TRÊN, input DƯỚI — sửa triệt để lỗi đè chữ ---------- */
.form-group-gold{margin-bottom:18px !important;text-align:left !important;}
.label-gold{
  display:block !important;font-size:.9rem !important;font-weight:700 !important;color:#E2E8F0 !important;
  margin-bottom:8px !important;
}
.input-gold{
  width:100% !important;box-sizing:border-box !important;padding:12px 16px !important;
  font-size:.95rem !important;color:#FFFFFF !important;
  background:rgba(30,27,24,.75) !important;border:1px solid rgba(255,255,255,.15) !important;border-radius:12px !important;
  outline:none !important;transition:all .25s ease !important;
}
.input-gold::placeholder{color:#94A3B8 !important;opacity:.8 !important;font-weight:400;}
.input-gold:focus{
  border-color:#EAB308 !important;
  background:rgba(40,35,30,.9) !important;
  box-shadow:0 0 12px rgba(234,179,8,.3) !important;
}
.password-input-wrap{position:relative;}
.password-input-wrap .input-gold{padding-right:44px !important;}
.toggle-eye-v2{
  position:absolute;right:14px;top:50%;transform:translateY(-50%);
  background:none;border:none;cursor:pointer;font-size:14px;line-height:1;
  color:#94A3B8;opacity:.85;
  /* Icon hiện là emoji 👁️ (glyph màu cố định của hệ điều hành) nên thuộc tính color không
     đổi được màu gốc trên mọi trình duyệt — dùng filter grayscale để ép về tông xám trắng
     trung tính, gần đúng với yêu cầu "SVG xám trắng". Nếu cần đúng 100% màu #94A3B8/#FACC15,
     nên thay emoji bằng SVG path (khi đó có thể xoá 2 dòng filter bên dưới). */
  filter:grayscale(1) brightness(1.5);
  transition:filter .2s ease,opacity .2s ease,color .2s ease;
}
.toggle-eye-v2:hover{
  opacity:1;
  color:#FACC15;
  filter:grayscale(0) sepia(1) saturate(4) hue-rotate(2deg) brightness(1.1);
}

.login-options-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;font-size:.82rem;}
.login-checkbox{display:flex;align-items:center;gap:7px;cursor:pointer;color:#CBD5E1;user-select:none;}
.login-checkbox input{position:absolute;opacity:0;width:0;height:0;}
.checkbox-fake{width:15px;height:15px;border:1.5px solid rgba(255,255,255,.3);border-radius:4px;display:inline-block;position:relative;transition:all .15s ease;background:rgba(255,255,255,.05);}
.login-checkbox input:checked + .checkbox-fake{background:#FFD700;border-color:#FFD700;}
.login-checkbox input:checked + .checkbox-fake::after{content:'';position:absolute;left:3px;top:0px;width:4px;height:8px;border:solid #1E293B;border-width:0 2px 2px 0;transform:rotate(45deg);}
.login-forgot-link{color:#FBBF24;text-decoration:none;font-weight:600;}
.login-forgot-link:hover{text-decoration:underline;}

/* Nút Đăng nhập Vàng Kim 3D */
.btn-gold-submit{
  display:block;width:100% !important;margin-top:10px;padding:13px !important;border:none !important;border-radius:99px !important;
  background:linear-gradient(135deg,#F59E0B 0%,#D97706 50%,#C8102E 100%) !important;
  color:#FFFFFF !important;font-size:.98rem !important;font-weight:800 !important;
  cursor:pointer !important;box-shadow:0 8px 25px rgba(245,158,11,.4) !important;
  transition:all .3s ease !important;
}
.btn-gold-submit:hover{transform:translateY(-2px) scale(1.02) !important;box-shadow:0 12px 30px rgba(245,158,11,.6) !important;}
.btn-gold-submit:active{transform:scale(.98) !important;}
.btn-gold-submit:disabled{opacity:.7;cursor:not-allowed;transform:none !important;}

@media (max-width:760px){
  .login-gate-overlay{justify-content:center;padding-left:0;}
  .login-card-gold-drive{width:92%;padding:26px 22px !important;}
}

/* ---------- Modal Đổi mật khẩu — đồng bộ phong cách Gold-Glass ---------- */
.change-pass-overlay{
  position:fixed;inset:0;z-index:1000000;
  background:rgba(10,13,20,.8);backdrop-filter:blur(6px);
  display:none;align-items:center;justify-content:center;padding:16px;
  overflow:hidden;
}
.change-pass-overlay.open{display:flex;}
.change-pass-card{
  width:420px;max-width:92%;
  background:rgba(15,10,14,.85);
  backdrop-filter:blur(25px);-webkit-backdrop-filter:blur(25px);
  border:1.5px solid rgba(255,215,0,.45);
  border-radius:24px;
  padding:28px;box-shadow:0 0 50px rgba(255,193,7,.35), 0 25px 60px rgba(0,0,0,.9);animation:confirmPop .18s ease;
  overflow:hidden;
}
.change-pass-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;}
.change-pass-header h3{margin:0;font-size:1.05rem;font-weight:800;color:#FEF08A;}
.cp-close-btn{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);width:30px;height:30px;border-radius:50%;cursor:pointer;font-size:.8rem;color:#E2E8F0;}
.cp-close-btn:hover{background:rgba(255,255,255,.18);}
.change-pass-card .form-kst{text-align:left;}
/* Cụm thông tin người dùng đang đăng nhập trên Header (tách bạch khỏi nút Đăng xuất
   để tránh chữ tên bị chèn ép/cắt bớt — mỗi khối co giãn theo nội dung riêng).
   LƯU Ý: dùng ":not(.d-none)" để không ghi đè mất display:none của Bootstrap khi
   JS ẩn khung này lúc chưa đăng nhập / sau khi đăng xuất (id="userInfoBox"). */
.header-user-wrapper:not(.d-none) {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: rgba(255, 255, 255, 0.18) !important; /* Kính mờ trắng trong suốt rực sáng, thay cho nền đen 20% cũ */
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important; /* Viền trắng phát sáng nhẹ */
  border-radius: 99px !important;
  padding: 4px 6px 4px 14px !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15), inset 0 1px 1px rgba(255, 255, 255, 0.4) !important;
  white-space: nowrap !important; /* Chặn tuyệt đối hiện tượng ngắt dòng/cắt chữ */
}
.user-info-box {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  white-space: nowrap !important;
  line-height: 1 !important;
}
.hsh-user-icon{font-size:.9rem;}
/* AVATAR MẶT XANH RETRO — thay cho icon người 👤 màu tím cũ */
.user-avatar-blue-retro {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 26px !important;
  height: 26px !important;
  border-radius: 50% !important;
  background: transparent !important;
  flex-shrink: 0 !important; /* Không bị dẹp khi co màn hình */
  cursor: pointer !important;
  transform-origin: center center !important;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
  /* Nhún nhảy ngo ngoe nhẹ nhàng liên tục — tấu hài, sinh động */
  animation: retroAvatarBob 3s infinite ease-in-out !important;
}
.user-avatar-blue-retro svg {
  width: 24px !important;
  height: 24px !important;
  display: block !important;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)) !important;
}
/* Rê chuột vào: lắc lư biến hình dẻo (jelly wobble) — thay cho scale/rotate tĩnh trước đây */
.user-info-box:hover .user-avatar-blue-retro,
.header-user-wrapper:hover .user-avatar-blue-retro,
.user-avatar-blue-retro:hover {
  animation: retroJellyWobble 0.8s ease-in-out infinite !important;
  filter: drop-shadow(0 4px 10px rgba(75, 150, 255, 0.6)) !important;
}
/* Bấm vào: xoay 360° chóng mặt nổi bật */
.user-avatar-blue-retro:active {
  transform: scale(0.8) rotate(360deg) !important;
  transition: transform 0.2s ease !important;
}
@keyframes retroAvatarBob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-3px) rotate(-4deg) scale(1.03); }
  75% { transform: translateY(2px) rotate(4deg) scale(0.98); }
}
@keyframes retroJellyWobble {
  0% { transform: scale(1, 1) rotate(0deg); }
  30% { transform: scale(1.25, 0.75) rotate(-10deg); }
  40% { transform: scale(0.75, 1.25) rotate(10deg); }
  50% { transform: scale(1.15, 0.85) rotate(-6deg); }
  65% { transform: scale(0.95, 1.05) rotate(4deg); }
  75% { transform: scale(1.05, 0.95) rotate(-2deg); }
  100% { transform: scale(1, 1) rotate(0deg); }
}
/* Chớp mắt định kỳ (4 thẻ <ellipse> trong SVG = 2 tròng trắng + 2 con ngươi) */
.user-avatar-blue-retro svg ellipse {
  transform-origin: center !important;
  animation: eyeBlinkAvatar 4s infinite !important;
}
@keyframes eyeBlinkAvatar {
  0%, 94%, 98%, 100% { transform: scaleY(1); }
  96% { transform: scaleY(0.1); }
}
.hsh-user-name {
  color: #FFFFFF !important;
  font-weight: 800 !important;
  font-size: 0.92rem !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
  letter-spacing: 0.3px !important;
  white-space: nowrap !important;
  overflow: visible !important;
  max-width: none !important; /* Bỏ max-width chặn chữ, để tên hiển thị đầy đủ */
  text-overflow: clip !important;
  line-height: 1 !important; /* Căn giữa khớp chiều cao với avatar 24px */
}
/* Avatar mặt xanh retro tươi sáng (cyber blue) — không bị chìm trên nền kính mờ mới */
.user-avatar-blue-retro svg circle:first-child {
  fill: #60A5FA !important;
  stroke: #FFFFFF !important;
  stroke-width: 1.5px !important;
}
/* Cấu trúc nút Đăng xuất hiện đại — luôn giữ nguyên kích thước, không co bóp */
.btn-logout-custom {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: rgba(255, 255, 255, 0.22) !important; /* Kính mờ trắng sáng mặc định, chỉ đỏ khi hover */
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  color: #FFFFFF !important;
  padding: 5px 14px !important;
  border-radius: 99px !important;
  font-family: 'Be Vietnam Pro', sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.8rem !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}
/* Icon SVG bên trong */
.logout-icon-svg {
  transition: transform 0.25s ease !important;
  stroke: #FFFFFF !important;
  flex-shrink: 0 !important;
}
/* Hiệu ứng khi rê chuột vào (Hover) */
.btn-logout-custom:hover {
  background: #DC2626 !important; /* Đổi sang Đỏ Đô đậm */
  border-color: #EF4444 !important;
  box-shadow: 0 0 12px rgba(220, 38, 38, 0.6) !important;
}
.btn-logout-custom:hover .logout-icon-svg {
  transform: translateX(2px) !important; /* Mũi tên nhích nhẹ sang phải */
}
@media(max-width:768px){
  .header-user-wrapper .hsh-user-name{max-width:90px;overflow:hidden !important;text-overflow:ellipsis !important;}
}

/* Chuông thông báo được gộp vào nhóm .header-quick-actions — dùng chung khung
   bo góc đồng bộ với 3 nút tiện ích (Mail, Mặt trăng, Khóa) qua class .header-icon-btn.
   Vị trí/kích thước badge số đã được gộp chung vào rule .notif-badge-count ở trên
   (tránh 2 rule cùng độ đặc thù ghi đè lẫn nhau). */
.header-quick-actions .notif-bell-wrapper {
  margin-right: 0 !important;
}


/* ---------- Nút cuộn lên đầu trang ---------- */
.scroll-top-btn{
  position:fixed;bottom:24px;right:24px;z-index:50;
  width:44px;height:44px;border-radius:50%;border:none;
  background:var(--brand-red);color:#fff;font-size:1.1rem;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:0 10px 24px rgba(200,16,46,.35);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .25s ease,transform .25s ease,visibility .25s ease,background .2s ease;
}
.scroll-top-btn.show{opacity:1;visibility:visible;transform:translateY(0);}
.scroll-top-btn:hover{background:var(--brand-red-dark);}
@media(prefers-reduced-motion:reduce){.scroll-top-btn{transition:opacity .01s,visibility .01s;}}

/* Focus visibility & motion */
:focus-visible{outline:2px solid var(--steel-500);outline-offset:2px;}
@media (prefers-reduced-motion: reduce){*{animation:none !important;transition:none !important;}}

/* ---------- Thư viện Quy định & Chính sách (MỤC 5) — Bento grid sáng ---------- */
.library-section{
  position:relative;border-radius:var(--radius);
  padding:22px 22px 24px;margin:8px 0 30px;
  background:var(--surface-solid);border:1px solid var(--surface-border);
  box-shadow:var(--shadow);
}
.library-header{
  display:flex;align-items:center;gap:14px;position:relative;z-index:1;
  user-select:none;border-radius:12px;margin:-4px -4px 16px;padding:4px;
}
.library-icon{
  width:48px;height:48px;border-radius:14px;flex-shrink:0;
  background:linear-gradient(135deg,var(--brand-gold),#C98F00);
  display:flex;align-items:center;justify-content:center;font-size:1.45rem;
  box-shadow:0 8px 20px rgba(240,180,0,.28);
}
.library-header-text{flex:1;min-width:0;}
.library-header h2{color:var(--text);font-weight:800;font-size:1.1rem;margin:0;}
.library-header p{color:var(--text-dim);font-size:.82rem;margin:4px 0 0;}
.library-chevron{display:none;}
.library-grid-wrap{max-height:none !important;overflow:visible;padding-top:0 !important;}

.library-grid{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  position:relative;z-index:1;
}
.library-btn{
  flex:1 1 280px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-start;
  min-height:120px;
  padding:18px;
  border-radius:14px;
  border:1px solid rgba(0,0,0,0.08);
  background:#ffffff;
  color:var(--text);
  transition:.2s;
  white-space:normal;
  word-break:break-word;
  overflow:visible;
}
.library-btn:hover{background:var(--brand-gold-light);border-color:var(--brand-gold);transform:translateY(-3px);box-shadow:var(--shadow);}
.library-btn .lib-emoji{font-size:1.8rem;margin-bottom:10px;flex-shrink:0;}
.library-btn .lib-name{font-weight:700;font-size:.95rem;color:#0F1B2D;margin-bottom:6px;line-height:1.3;white-space:normal;word-break:break-word;}
.library-btn .lib-note{font-size:.82rem;color:#57677E;line-height:1.4;white-space:normal;word-break:break-word;}
[data-theme="dark"] .library-btn{background:var(--surface-solid);border-color:var(--surface-border);}
[data-theme="dark"] .library-btn .lib-name{color:var(--text);}
.library-empty{color:var(--text-dim);font-size:.85rem;position:relative;z-index:1;grid-column:1/-1;}

/* ---------- Banner tiêu đề trang cho các view chuyên trang (Thư viện chính sách, v.v.) ---------- */
.view-header-banner{
  background:#FFFFFF;
  padding:24px 28px;
  border-radius:16px;
  border:1px solid #E2E8F0;
  box-shadow:0 4px 16px rgba(0,0,0,.03);
  margin-bottom:24px;
  text-align:left;
}
.view-header-banner h2{
  font-size:1.4rem;
  font-weight:900;
  color:#8B0000;
  margin-bottom:6px;
  text-transform:uppercase;
}
.view-header-banner p{
  font-size:.9rem;
  color:#64748B;
  margin:0;
  line-height:1.5;
}
[data-theme="dark"] .view-header-banner{background:var(--surface-solid);border-color:var(--surface-border);}
[data-theme="dark"] .view-header-banner p{color:var(--text-dim);}

/* ---------- Thư viện chính sách nội bộ — tab riêng: lưới thẻ policy ---------- */
.policy-grid-layout{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:20px;
  margin-top:4px;
}
.policy-card-item{
  position:relative;
  display:block;
  background:#FFFFFF;
  border:1px solid #E2E8F0;
  border-radius:16px;
  padding:22px;
  color:var(--text);
  transition:all .25s ease;
  cursor:pointer;
  text-decoration:none;
}
.policy-card-item:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 24px rgba(0,0,0,.08);
  border-color:#8B0000;
  color:var(--text);
}
.policy-card-item .lib-emoji{font-size:1.8rem;display:block;margin-bottom:12px;}
.policy-card-item .lib-name{font-weight:800;font-size:1rem;color:#0F1B2D;margin-bottom:6px;line-height:1.3;}
.policy-card-item .lib-note{font-size:.85rem;color:#57677E;line-height:1.5;}
.policy-card-item .policy-card-tag{
  display:inline-block;margin-top:14px;padding:4px 12px;border-radius:999px;
  background:#FEF2F2;color:#8B0000;font-size:.72rem;font-weight:700;
}
[data-theme="dark"] .policy-card-item{background:var(--surface-solid);border-color:var(--surface-border);}
[data-theme="dark"] .policy-card-item .lib-name{color:var(--text);}


@media(max-width:640px){
  .detail-panel{width:100%;}
  .stats-row{grid-template-columns:repeat(2,1fr);}
}

/* ---------- Thi đua — Podium Top 3 ---------- */
.podium-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;align-items:end;margin-bottom:22px;}
.podium-card{
  position:relative;border-radius:var(--radius);padding:22px 16px 18px;text-align:center;
  border:1px solid var(--surface-border);box-shadow:var(--shadow);color:#fff;overflow:hidden;
}
.podium-card .medal{font-size:2rem;line-height:1;margin-bottom:6px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.25));}
.podium-card .p-name{font-weight:800;font-size:1rem;margin-bottom:2px;text-shadow:0 1px 3px rgba(0,0,0,.2);}
.podium-card .p-score{font-family:var(--font-mono);font-weight:700;font-size:.82rem;opacity:.92;}
.podium-card .p-rank{position:absolute;top:10px;left:12px;font-family:var(--font-mono);font-weight:800;font-size:.72rem;opacity:.75;}
.podium-1{background:var(--gold-shine);order:2;padding-top:30px;transform:translateY(-10px);}
.podium-2{background:var(--silver-shine);order:1;}
.podium-3{background:var(--bronze-shine);order:3;}
@media(max-width:640px){.podium-row{grid-template-columns:1fr;}.podium-1,.podium-2,.podium-3{order:0;transform:none;}}

.comp-kpi-strip{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-bottom:22px;}
@media(max-width:640px){.comp-kpi-strip{grid-template-columns:1fr;}}

/* ---------- Live search cho bảng thi đua ---------- */
.table-search-box{position:relative;max-width:280px;width:100%;}
.table-search-box input{
  width:100%;padding:8px 12px 8px 32px;border-radius:10px;border:1px solid var(--surface-border);
  background:var(--surface-solid);color:var(--text);font-size:.84rem;
}
.table-search-box .ts-icon{position:absolute;left:10px;top:50%;transform:translateY(-50%);opacity:.5;font-size:.85rem;}

/* ---------- Thi đua (Table Leaderboard) ---------- */
.comp-overview{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:22px;}
.comp-ov-card{
  background:var(--surface-solid);border:1px solid var(--surface-border);border-radius:var(--radius);
  padding:18px 20px;display:flex;align-items:center;gap:14px;box-shadow:var(--shadow);
}
.comp-ov-icon{
  width:48px;height:48px;border-radius:12px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:1.4rem;
}
.comp-ov-icon.gold{background:var(--brand-gold-light);}
.comp-ov-icon.blue{background:var(--steel-100);}
.comp-ov-icon.green{background:var(--green-100);}
.comp-ov-label{font-size:.74rem;color:var(--text-dim);font-weight:600;text-transform:uppercase;letter-spacing:.3px;}
.comp-ov-value{font-weight:800;font-size:1.15rem;margin-top:2px;}
.comp-ov-note{font-size:.76rem;color:var(--text-dim);margin-top:1px;}

.comp-tabs{display:flex;gap:8px;margin-bottom:14px;border-bottom:1px solid var(--surface-border);}
.comp-tab{
  padding:10px 18px;font-weight:700;font-size:.86rem;color:var(--text-dim);
  border-bottom:3px solid transparent;cursor:pointer;transition:.2s;background:none;border-left:0;border-right:0;border-top:0;
}
.comp-tab:hover{color:var(--text);}
.comp-tab.active{color:var(--brand-red);border-bottom-color:var(--brand-red);}

.comp-progress{width:100%;height:8px;border-radius:99px;background:var(--steel-100);overflow:hidden;}
.comp-progress-fill{height:100%;border-radius:99px;}
.comp-progress-fill.pf-green{background:var(--green-600);}
.comp-progress-fill.pf-amber{background:var(--amber-500);}
.comp-progress-fill.pf-red{background:var(--red-600);}

.comp-status{display:inline-flex;align-items:center;padding:4px 11px;border-radius:999px;font-size:.72rem;font-weight:700;white-space:nowrap;}
.comp-status.st-excellent{background:var(--green-100);color:var(--green-600);}
.comp-status.st-good{background:var(--steel-100);color:var(--steel-700);}
.comp-status.st-warn{background:var(--amber-100);color:var(--amber-600);}
.comp-status.st-bad{background:var(--red-100);color:var(--red-600);}

.comp-rank{font-size:1.1rem;font-weight:800;width:34px;text-align:center;display:inline-block;}

.comp-table-wrap{
  background:var(--surface-solid);border:1px solid var(--surface-border);border-radius:var(--radius);
  overflow:auto;max-height:560px;box-shadow:var(--shadow);
}
.comp-table{width:100%;border-collapse:collapse;font-size:.86rem;}
.comp-table th{
  position:sticky;top:0;z-index:2;
  text-align:left;padding:12px 16px;background:var(--surface-solid);color:var(--text-dim);
  font-size:.7rem;text-transform:uppercase;letter-spacing:.4px;font-weight:700;white-space:nowrap;
  border-bottom:1px solid var(--surface-border);
}
.comp-table td{padding:13px 16px;border-top:1px solid rgba(15,27,45,.06);vertical-align:middle;}
.comp-table tr:hover td{background:var(--bg);}
.comp-store-name{font-weight:700;}
.comp-progress-cell{display:flex;align-items:center;gap:8px;min-width:140px;}
.comp-progress-cell .pct{font-family:var(--font-mono);font-weight:700;font-size:.8rem;min-width:34px;text-align:right;}
.comp-kpi-cell{display:flex;gap:14px;font-size:.8rem;color:var(--text-dim);white-space:nowrap;}
.comp-kpi-cell b{color:var(--text);}
.comp-empty{padding:40px 20px;text-align:center;color:var(--text-dim);}

@media(max-width:768px){
  .comp-overview{grid-template-columns:1fr;}
  .comp-table th:nth-child(4),.comp-table td:nth-child(4){display:none;}
}

/* ---------- Tồn đọng chưa xử lý (Bảng tổng hợp tồn đọng & sai phạm cửa hàng) ---------- */
.td-header-bar{margin-bottom:4px;}
.td-page-title{font-size:clamp(1.25rem,2vw,1.6rem);margin:20px 0 6px;}

.td-stats-row{grid-template-columns:repeat(3,1fr) !important;margin-bottom:18px;}
@media(max-width:640px){.td-stats-row{grid-template-columns:1fr !important;}}
.td-stats-row .stat-card .label{white-space:normal !important;}

.td-store-list{
  display:flex;flex-direction:column;gap:18px;
}

.td-store-card{
  background:var(--surface-solid);
  border:1px solid var(--surface-border);
  border-radius:16px;
  padding:20px;
  box-shadow:var(--shadow);
  transition:box-shadow .2s ease, transform .2s ease;
}
.td-store-card:hover{box-shadow:var(--shadow-lg);}

.td-store-head{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;
  margin-bottom:14px;padding-bottom:14px;border-bottom:1px dashed var(--surface-border);
}
.td-store-name{font-size:1.05rem;font-weight:800;color:var(--text);}
.td-store-sub{font-size:.8rem;color:var(--text-dim);margin-top:3px;}
.td-store-sub b{color:var(--text);}

.td-badge{
  display:inline-flex;align-items:center;gap:5px;padding:6px 14px;border-radius:999px;
  font-size:.76rem;font-weight:700;white-space:nowrap;border:1px solid transparent;
}
.td-badge-red{background:#FEF2F2;color:#DC2626;border-color:#FCA5A5;font-weight:800;}
.td-badge-orange{background:#FFEDD5;color:#EA580C;border-color:#FDBA74;}
.td-badge-yellow{background:#FEF9C3;color:#CA8A04;border-color:#FDE68A;}
.td-badge-gray{background:var(--bg);color:var(--text-dim);border-color:var(--surface-border);}

.td-table-wrap{overflow-x:auto;border-radius:8px;border:1px solid var(--surface-border);}
.td-table{width:100%;border-collapse:collapse;font-size:.9rem;}
.td-table th{
  text-align:left;padding:10px 14px;background:var(--bg);color:var(--text-dim);
  font-size:.7rem;text-transform:uppercase;letter-spacing:.4px;font-weight:700;white-space:nowrap;
  border-bottom:1px solid var(--surface-border);
}
.td-table td{padding:12px 14px;border-top:1px solid var(--surface-border);vertical-align:top;}
.td-table tbody tr{transition:background .15s ease;}
.td-table tbody tr:hover td{background:var(--bg);}

.td-badge-muctieu{
  display:inline-block;padding:4px 10px;border-radius:999px;font-size:.76rem;font-weight:700;
  background:var(--steel-100);color:var(--steel-700);white-space:nowrap;
}
[data-theme="dark"] .td-badge-muctieu{background:rgba(255,255,255,.08);color:var(--text);}

.td-noidung{font-weight:700;color:var(--text);line-height:1.45;}

.td-luyke-badge{
  display:inline-block;padding:4px 10px;border-radius:999px;font-size:.76rem;font-weight:700;white-space:nowrap;
}
.td-luyke-red{background:#FEF2F2;color:#DC2626;border:1px solid #FCA5A5;font-weight:800;}
.td-luyke-orange{background:#FFEDD5;color:#EA580C;border:1px solid #FDBA74;}
.td-luyke-yellow{background:#FEF9C3;color:#CA8A04;border:1px solid #FDE68A;}
.td-luyke-gray{background:var(--bg);color:var(--text-dim);border:1px solid var(--surface-border);}

.td-huongxuly{
  background:#F0FDF4;color:#15803D;padding:8px 12px;border-radius:8px;font-size:.85rem;line-height:1.45;
  border:1px solid #BBF7D0;
}
[data-theme="dark"] .td-huongxuly{background:rgba(21,128,61,.15);border-color:rgba(21,128,61,.4);color:#4ADE80;}

@media(max-width:640px){
  .td-store-head{flex-direction:column;align-items:flex-start;}
  .td-table th:nth-child(1),.td-table td:nth-child(1){display:none;}
}

/* ---------- Footer chính thức (2 card đối xứng, viền vàng kim xoay 360°) ---------- */
/* Khung Footer tổng */
.dms-site-footer {
  background: #070A12 !important;
  border-top: 3px solid #8B0000 !important;
  padding: 18px 0 !important; /* Chiều cao ép gọn gàng */
  width: 100% !important;
  box-sizing: border-box !important;
  margin-top: 30px !important;
}
/* Sidebar desktop giờ dùng position:fixed (xem @media(min-width:992px) .sidebar-kst ở trên)
   nên nó KHÔNG còn nằm trong dòng chảy layout — mọi khối con-của-body khác (kể cả Footer,
   vốn là anh em của .app-shell chứ không phải con của .main-col) đều cần tự chừa chỗ 240px
   bên trái, nếu không sidebar sẽ đè/che mất phần bên trái của khối đó.

   LƯU Ý — TẠI SAO ĐỔI TỪ padding-left SANG margin-left/margin-right:
   Trước đây dùng padding-left để chừa chỗ Sidebar, NHƯNG .footer-inner-container bên trong
   lại tự canh giữa bằng margin:0 auto trong đúng phần còn lại sau padding-left đó — 2 cơ chế
   canh giữa "chồng" lên nhau khiến khung Footer bị lệch lề, hụt vào trong, KHÔNG thẳng hàng
   với cột nội dung .main-col phía trên. Đổi sang margin-left/margin-right + width:auto giúp
   khung ngoài .dms-site-footer có 2 mép trái/phải TRÙNG KHỚP 100% với .main-col (mép trái
   = mép trái main-col, mép phải = mép phải .app-shell), rồi .footer-inner-container mới
   canh giữa max-width bên trong khung đó — y hệt cách .app-container hoạt động bên trên.

   QUAN TRỌNG — TẠI SAO SCOPE BẰNG ".app-shell ~ .dms-site-footer" (KHÔNG dùng ".dms-site-footer" trơn):
   style.css được DÙNG CHUNG cho cả trang Dashboard (index.html, CÓ Sidebar .app-shell 240px)
   VÀ trang DMS - Quản Lý Khách Hàng (dms.html, KHÔNG CÓ Sidebar). Nếu để rule margin-left/
   margin-right chừa 240px áp dụng cho MỌI ".dms-site-footer" không phân biệt, trang DMS
   (vốn không có Sidebar để mà chừa chỗ) sẽ bị Footer đẩy dạt hẳn sang phải, hở khoảng
   trắng lớn bên trái — đúng lỗi đã gặp. Dùng combinator "~" (general sibling — không dùng
   "+" vì giữa </div class="app-shell"> và <footer> còn xen các thẻ <script> nên không
   phải "kề sát ngay sau") để rule NÀY CHỈ áp dụng khi Footer thật sự đứng sau .app-shell
   trong cùng trang (tức chỉ trang Dashboard) — trang DMS không có phần tử .app-shell nên
   Footer ở đó tự động KHÔNG khớp rule, giữ nguyên full-width canh giữa bình thường. */
@media(min-width:992px){
  .app-shell ~ .dms-site-footer{
    margin-left: calc(max(0px, (100vw - 1600px) / 2) + 240px) !important;
    margin-right: max(0px, calc((100vw - 1600px) / 2)) !important;
    width: auto !important;
    padding-left: 0 !important;
  }
}

/* SỬA DỨT ĐIỂM FONT FOOTER VÀ TRIỆT ĐÓA LỖI MÉO NÉT CÓ DẤU */
.dms-site-footer,
.dms-site-footer *,
.glow-card-gold,
.card-content-inner,
.company-name,
.branch-name,
.company-address,
.admin-fullname,
.copyright-text {
  font-family: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
}
.footer-inner-container {
  max-width: 1400px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
  display: flex !important;
  align-items: stretch !important; /* Chiều cao 2 card luôn bằng nhau */
  justify-content: space-between !important;
  gap: 24px !important;
}
/* KHUNG CARD CHUNG CÓ VIỀN VÀNG KIM TỎA SÁNG XOAY 360° */
.glow-card-gold {
  position: relative !important;
  flex: 1 !important;
  min-width: 0 !important;
  border-radius: 16px !important;
  padding: 2px !important; /* Độ rộng viền LED sáng chạy */
  overflow: hidden !important;
  background: rgba(255, 255, 255, 0.03) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 15px rgba(234, 179, 8, 0.2) !important;
  display: flex !important;
}
/* VỆT SÁNG VÀNG KIM XOAY 360 ĐỘ CONTINUOUS */
.glow-card-gold::before {
  content: '' !important;
  position: absolute !important;
  top: -150% !important;
  left: -50% !important;
  width: 200% !important;
  height: 400% !important;
  background: conic-gradient(
    transparent 0deg,
    transparent 130deg,
    #EAB308 170deg,
    #FACC15 200deg,
    #FFFFFF 220deg,
    #EAB308 240deg,
    transparent 280deg
  ) !important;
  animation: rotateGoldenBorder 4s linear infinite !important;
  z-index: 1 !important;
}
@keyframes rotateGoldenBorder {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
/* LÒNG CARD CHE PHẦN NỀN TỐI (GIỮ ĐỘ NỔI BẬT CHỮ) */
.card-content-inner {
  position: relative !important;
  z-index: 2 !important;
  background: #0E1322 !important; /* Nền xanh đen dạ siêu sang */
  border-radius: 14px !important;
  padding: 14px 20px !important; /* Padding gọn nhẹ */
  width: 100% !important;
  height: 100% !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}
/* CHI TIẾT CHỮ VÀ NÚT NHỎ GỌN */
.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;
}
/* KHẮC PHỤC KHOẢNG CÁCH CHỮ VÀ ĐỘ DÀY TIÊU ĐỀ */
.company-name {
  font-size: 1.08rem !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
  letter-spacing: 0px !important; /* Không kéo dãn chữ để tránh lỗi dấu */
  line-height: 1.4 !important;
  margin: 0 0 3px 0 !important;
}
.branch-name {
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  color: #FACC15 !important;
  line-height: 1.4 !important;
  margin: 0 0 8px 0 !important;
}
.company-address {
  font-size: 0.82rem !important;
  color: #94A3B8 !important;
  line-height: 1.5 !important;
  margin: 0 0 6px 0 !important;
}
.copyright-text {
  font-size: 0.74rem !important;
  color: #64748B !important;
  margin: 0 !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: 800 !important;
  color: #FFFFFF !important;
  letter-spacing: 0px !important;
  line-height: 1.4 !important;
  margin: 2px 0 8px 0 !important;
}
.admin-contact-list { display: flex !important; flex-wrap: wrap !important; gap: 6px !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;
  font-weight: 500 !important;
  color: #E2E8F0 !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}
.contact-pill:hover {
  background: rgba(234, 179, 8, 0.15) !important;
  border-color: #EAB308 !important;
  color: #FACC15 !important;
}
@media (max-width: 900px) {
  .footer-inner-container { flex-direction: column !important; }
}

/* =========================================================
   NHẮC NHỞ TUÂN THỦ — Cổng tin tức: Lưới Card (Grid) + Trang chi tiết
   ========================================================= */
.nn-list-container { max-width: 1200px; margin: 0 auto; }

/* --- Lưới bài viết dạng Grid --- */
.nn-card {
  background: var(--surface-solid);
  border: 1px solid var(--surface-border);
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.25s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
  cursor: pointer;
}
.nn-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
  border-color: #CBD5E1;
}
.nn-card-img-wrapper {
  position: relative;
  width: 100%;
  height: 180px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--brand-red) 0%, #7a0818 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.nn-card-img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.3s ease;
}
.nn-card:hover .nn-card-img { transform: scale(1.04); }
.nn-card-img-placeholder {
  font-size: 2.6rem;
  opacity: 0.9;
}
.nn-card-body {
  padding: 16px;
  display: flex; flex-direction: column; flex-grow: 1;
}
.nn-card-badge {
  font-size: 0.68rem; font-weight: 800; color: #C8102E;
  background: #FEF2F2; border: 1px solid #FCA5A5;
  padding: 3px 8px; border-radius: 99px; display: inline-block; width: fit-content;
}
.nn-card-title {
  font-weight: 800; font-size: 0.95rem; color: var(--brand-navy);
  margin: 8px 0; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.nn-card-meta {
  font-size: 0.75rem; color: var(--text-dim); margin-top: auto; padding-top: 8px;
}
.nn-card-link {
  font-size: 0.8rem; font-weight: 700; color: #C8102E; text-decoration: none;
  margin-top: 6px; display: inline-block;
}
.nn-empty-state {
  text-align: center; padding: 60px 20px; color: var(--text-dim);
  background: var(--surface-solid); border-radius: 16px; border: 1px solid var(--surface-border);
}

/* --- Trang chi tiết bài viết --- */
.nn-detail-container { max-width: 900px; margin: 0 auto; }
.nn-article-body { font-size: 0.95rem; }
.nn-article-body h3 { font-size: 1.1rem; font-weight: 800; color: #C8102E; margin-top: 20px; margin-bottom: 8px; }
.nn-article-body p { margin-bottom: 10px; }
.nn-article-body ul { padding-left: 20px; margin-bottom: 12px; }
.nn-article-body li { margin-bottom: 4px; }
#nnDetailTitle { text-transform: uppercase; line-height: 1.4; }
#nnDetailImageWrapper img { border: 1px solid var(--surface-border); }

@media (max-width: 640px) {
  #nnDetailTitle { font-size: 1.1rem !important; }
}

/* =========================================================
   VIDEO ĐÀO TẠO — trình phát 2 cột (video chính + playlist)
   ========================================================= */
.video-player-wrapper {
  background: #000;
  position: relative;
}
.v-playlist-item {
  display: flex;
  gap: 12px;
  padding: 8px;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.2s;
}
.v-playlist-item:hover, .v-playlist-item.active {
  background: #FEF2F2;
}
[data-theme="dark"] .v-playlist-item:hover,
[data-theme="dark"] .v-playlist-item.active {
  background: rgba(200,16,46,0.15);
}
.v-thumb-box {
  position: relative;
  width: 120px;
  height: 68px;
  flex-shrink: 0;
  border-radius: 8px;
  overflow: hidden;
  background: #E2E8F0;
}
.v-thumb-box img {
  width: 100%; height: 100%; object-fit: cover;
}
.v-duration-badge {
  position: absolute; bottom: 4px; right: 4px;
  background: rgba(0,0,0,0.8); color: #fff;
  font-size: 0.65rem; font-weight: 700;
  padding: 1px 4px; border-radius: 4px;
}
.v-item-title {
  font-size: 0.82rem; font-weight: 700; color: #1E293B;
  line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
[data-theme="dark"] .v-item-title { color: var(--text); }
.v-item-meta {
  font-size: 0.7rem; color: #64748B; margin-top: 4px;
}
.v-empty-state {
  text-align: center; padding: 30px 12px; color: var(--text-dim); font-size: 0.85rem;
}
@media (max-width: 991px) {
  #vMainPlayer { height: 260px !important; }
}

/* Nút "XÁC NHẬN HOÀN THÀNH CÔNG VIỆC" nổi bật cuối modal chi tiết công việc */
.task-submit-footer { border-top-color: var(--surface-border) !important; }
.btn-submit-complete-exact {
  background: linear-gradient(135deg, #059669 0%, #10B981 100%) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  font-size: 1.05rem !important;
  padding: 14px 36px !important;
  border-radius: 99px !important;
  border: none !important;
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.35) !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  margin: 0 auto !important;
  letter-spacing: 0.5px !important;
}
.btn-submit-complete-exact:hover:not(:disabled) {
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 8px 25px rgba(16, 185, 129, 0.45) !important;
  background: linear-gradient(135deg, #047857 0%, #059669 100%) !important;
}
.btn-submit-complete-exact:disabled {
  background: #94A3B8 !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
  opacity: 1 !important;
}
/* =========================================================
 *  CHATBOX HỖ TRỢ KSNB — WIDGET NỔI GÓC DƯỚI PHẢI
 * ========================================================= */

/* --- Nút "Hỗ trợ" floating: Pill Button gọn, gradient đỏ đô - viền vàng hoàng kim --- */
.floating-support-wrapper {
  position: fixed !important;
  bottom: 24px !important;
  right: 24px !important;
  z-index: 9999 !important;
  cursor: pointer !important;
}

.support-pill-content {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: linear-gradient(135deg, #8B0000 0%, #B91C1C 100%) !important;
  border: 1.5px solid #FACC15 !important; /* Viền Vàng Hoàng Kim */
  padding: 8px 16px !important;
  border-radius: 99px !important; /* Bo dạng Pill con nhộng */
  box-shadow: 0 8px 20px rgba(139, 0, 0, 0.4), 0 0 12px rgba(250, 204, 21, 0.25) !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  animation: pulseSupportBtn 3s infinite !important;
}

.support-icon-box {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  line-height: 1 !important;
  color: #FACC15 !important;
}

.support-label {
  font-family: 'Be Vietnam Pro', sans-serif !important;
  color: #FFFFFF !important;
  font-weight: 800 !important;
  font-size: 0.82rem !important;
  letter-spacing: 0.3px !important;
  white-space: nowrap !important;
}

/* Chấm báo đỏ nhỏ gọn ở góc trên-phải toàn nút */
.floating-support-wrapper .chat-badge {
  position: absolute !important;
  top: -4px !important;
  right: -2px !important;
  background: #EF4444 !important;
  color: #FFFFFF !important;
  font-size: 0.68rem !important;
  font-weight: 900 !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 2px solid #FFFFFF !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
  z-index: 2 !important;
}

/* Hiệu ứng rê chuột: phóng nhẹ + toả sáng */
.floating-support-wrapper:hover .support-pill-content {
  transform: translateY(-3px) scale(1.05) !important;
  box-shadow: 0 12px 28px rgba(139, 0, 0, 0.55), 0 0 18px rgba(250, 204, 21, 0.45) !important;
  background: linear-gradient(135deg, #A00000 0%, #DC2626 100%) !important;
}

/* Hiệu ứng nhịp rung thu hút sự chú ý */
@keyframes pulseSupportBtn {
  0%, 100% { transform: scale(1); }
  14% { transform: scale(1.02); }
  28% { transform: scale(1); }
  42% { transform: scale(1.02); }
  70% { transform: scale(1); }
}

/* --- Khung Popup Chatbox --- */
.chat-widget-box {
  position: fixed;
  bottom: 95px;
  right: 25px;
  width: 340px;
  max-width: calc(100vw - 30px);
  background: white;
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  z-index: 9999;
  border: 1px solid #E2E8F0;
  animation: slideUpChat 0.3s ease;
}

@keyframes slideUpChat {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.chat-header {
  background: linear-gradient(135deg, #8B0000 0%, #C8102E 100%);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.chat-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.chat-close-btn {
  background: none;
  border: none;
  color: white;
  font-size: 18px;
  cursor: pointer;
  opacity: 0.8;
}
.chat-close-btn:hover { opacity: 1; }

.chat-body {
  padding: 16px;
  max-height: 70vh;
  overflow-y: auto;
}

.chat-welcome-msg {
  background: #FEF2F2;
  border-left: 3px solid #C8102E;
  padding: 10px;
  border-radius: 6px;
  font-size: 0.82rem;
  color: #991B1B;
  margin-bottom: 12px;
}

/* ================================================== */
/* ÉP GỌN POPUP HỖ TRỢ (.chat-widget-box) VỪA VẶN 1     */
/* MÀN HÌNH + FIX CUỘN TEXTAREA #chatMessage             */
/* Ánh xạ theo đúng cấu trúc thực tế: .chat-widget-box >  */
/* .chat-header + .chat-body > #frmSupportChat            */
/* ================================================== */

/* 1. KHUNG POPUP TỔNG — ép gọn vừa vặn màn hình, tự cân đối
      chiều cao giữa phần Header cố định và phần Body cuộn riêng.
      LƯU Ý QUAN TRỌNG: phải viết ":not(.d-none)" — nếu ép display:flex
      trực tiếp trên .chat-widget-box (không loại trừ .d-none) thì sẽ
      GHI ĐÈ MẤT display:none của Bootstrap khi JS đóng popup, khiến
      nút ✕ bấm không còn tác dụng ẩn popup được nữa (lỗi đã xảy ra). */
.chat-widget-box:not(.d-none) {
  max-height: 90vh !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important; /* Bỏ thanh cuộn dọc của cả Popup */
}
.chat-header {
  flex-shrink: 0 !important; /* Header luôn cố định, không bị co bóp */
}

/* 2. THU GỌN KHUNG CẢNH BÁO MÀU HỒNG */
.chat-widget-box .chat-welcome-msg {
  padding: 6px 10px !important;
  margin-bottom: 8px !important;
  font-size: 0.78rem !important;
  line-height: 1.3 !important;
  border-radius: 8px !important;
}

/* Phần thân cuộn riêng khi nội dung form vượt quá chiều cao popup */
.chat-widget-box .chat-body {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  padding: 14px 16px !important; /* Giảm padding viền ngoài */
}

/* 3. THU HẸP KHOẢNG CÁCH GIỮA CÁC Ô NHẬP DỮ LIỆU (chỉ trong form hỗ trợ) */
#frmSupportChat .mb-2,
#frmSupportChat .mb-3 {
  margin-bottom: 6px !important; /* Thu hẹp khoảng cách giữa các ô */
}
#frmSupportChat .form-label {
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  margin-bottom: 2px !important;
  display: block !important;
}

/* 4. ÉP CHIỀU CAO CÁC Ô INPUT */
#frmSupportChat input.form-control {
  padding: 6px 10px !important;
  font-size: 0.82rem !important;
  height: 34px !important;
  border-radius: 8px !important;
}

/* 5. FIX TRIỆT ĐỂ Ô TEXTAREA NHẬP NỘI DUNG (CHO PHÉP CUỘN MƯỢT MÀ) */
#chatMessage {
  height: 70px !important; /* Chiều cao cố định gọn gàng */
  min-height: 60px !important;
  max-height: 100px !important;
  padding: 8px 10px !important;
  font-size: 0.82rem !important;
  line-height: 1.4 !important;
  border-radius: 8px !important;

  /* BẬT LẠI THANH CUỘN DỌC MƯỢT MÀ CHO TEXTAREA */
  overflow-y: auto !important;
  overflow-x: hidden !important;
  resize: vertical !important; /* Cho phép kéo dãn nếu muốn */
  pointer-events: auto !important;
  touch-action: pan-y !important;
}
/* Tùy chỉnh thanh cuộn nhỏ đẹp riêng cho Textarea */
#chatMessage::-webkit-scrollbar {
  width: 5px !important;
}
#chatMessage::-webkit-scrollbar-thumb {
  background: #CBD5E1 !important;
  border-radius: 99px !important;
}
#chatMessage::-webkit-scrollbar-thumb:hover {
  background: #94A3B8 !important;
}

/* 6. THU GỌN NÚT GỬI YÊU CẦU DƯỚI CÙNG */
#btnSendChat {
  margin-top: 8px !important;
  padding: 8px 16px !important;
  font-size: 0.85rem !important;
  font-weight: 800 !important;
  height: 38px !important;
  border-radius: 10px !important;
}

@media (max-width: 640px) {
  .chat-widget-box { max-height: 85vh !important; }
}


@media (max-width: 480px) {
  .chat-widget-box { right: 15px; bottom: 90px; width: calc(100vw - 30px); }
  .floating-support-wrapper { right: 15px; bottom: 15px; }
}
/* =========================================================
 *  KHÔI PHỤC GIAO DIỆN TRANG QUẢN TRỊ (admin.html) — EXECUTIVE ADMIN VIP
 *  Lý do vỡ giao diện: các class dưới đây đã tồn tại sẵn trong admin.html/
 *  admin.js (điều hướng, tab, bảng, badge, nút thao tác) nhưng CSS tương ứng
 *  bị thiếu hoàn toàn trong file này -> trình duyệt tự trả về nút/thẻ mặc định
 *  (viền vuông, nền xám thô). Khối dưới đây bổ sung lại đầy đủ, KHÔNG đụng đến
 *  bất kỳ class nào đã tồn tại ở nơi khác (Dashboard/DMS vẫn giữ nguyên).
 * ========================================================= */

/* ---------- 0. Thanh điều hướng trên cùng trang Quản trị (.navbar-kst) ---------- */
.navbar-kst {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  background: linear-gradient(135deg, var(--brand-red) 0%, var(--brand-red-dark) 100%) !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25) !important;
}
.navbar-kst .app-container { padding: 14px 20px !important; } /* .app-container mặc định có padding-bottom 60px, không hợp cho 1 thanh nav mỏng */
.navbar-kst .brand-title { font-weight: 800; font-size: 1.1rem; color: #FFFFFF; letter-spacing: 0.3px; }
.navbar-kst .brand-sub { font-size: 0.72rem; color: #FFD2D9; }
.navbar-kst .icon-btn {
  width: 36px !important; height: 36px !important; border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.15) !important; border: 1px solid rgba(255, 255, 255, 0.25) !important;
  color: #fff !important; display: inline-flex !important; align-items: center !important; justify-content: center !important;
  cursor: pointer !important; text-decoration: none !important; transition: all 0.2s ease !important; font-size: 1rem !important; padding: 0 !important;
}
.navbar-kst .icon-btn:hover { background: rgba(255, 255, 255, 0.3) !important; border-color: var(--brand-gold) !important; transform: translateY(-1px) !important; }

/* Khung tổng thể trang Quản trị — nới rộng từ 960px lên 1400px để chứa vừa bảng dữ liệu nhiều cột */
.admin-shell { max-width: 1400px !important; }

/* ---------- 1. Khung bọc nội dung quản trị ---------- */
.admin-workspace-container {
  max-width: 1400px !important;
  margin: 24px auto !important;
  padding: 0 4px !important;
  font-family: 'Be Vietnam Pro', 'Inter', sans-serif !important;
}

/* ---------- 2. Thanh Tab Segmented Control ---------- */
.admin-segmented-tabs {
  display: inline-flex !important;
  background: var(--steel-100) !important;
  padding: 5px !important;
  border-radius: 14px !important;
  gap: 6px !important;
  margin-bottom: 20px !important;
}
.admin-tab-btn {
  background: transparent !important;
  border: none !important;
  padding: 9px 20px !important;
  border-radius: 10px !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  color: var(--text-dim) !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.admin-tab-btn:hover { color: var(--text) !important; }
.admin-tab-btn.active {
  background: var(--brand-red) !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 12px rgba(200, 16, 46, 0.3) !important;
}
.admin-tab-btn .tab-icon { font-size: 0.95rem !important; line-height: 1 !important; }

/* ---------- 3. Header bảng: tiêu đề + số lượng + nút thêm mới vàng kim ---------- */
.admin-table-header-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  margin-bottom: 16px !important;
}
.table-title-group { display: flex !important; align-items: center !important; gap: 10px !important; flex-wrap: wrap !important; }
.admin-section-title { font-size: 1.35rem !important; font-weight: 800 !important; color: var(--text) !important; margin: 0 !important; }
.admin-count-badge {
  background: var(--red-100) !important;
  color: var(--red-600) !important;
  font-size: 0.8rem !important;
  font-weight: 800 !important;
  padding: 3px 10px !important;
  border-radius: 99px !important;
  border: 1px solid rgba(198, 54, 47, 0.25) !important;
}
.btn-primary-add-task {
  background: linear-gradient(135deg, #EAB308 0%, #CA8A04 100%) !important;
  color: #FFFFFF !important;
  font-weight: 800 !important;
  font-size: 0.88rem !important;
  padding: 9px 20px !important;
  border-radius: 10px !important;
  border: none !important;
  cursor: pointer !important;
  box-shadow: 0 4px 14px rgba(234, 179, 8, 0.35) !important;
  transition: all 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  white-space: nowrap !important;
}
.btn-primary-add-task:hover { transform: translateY(-2px) !important; box-shadow: 0 6px 18px rgba(234, 179, 8, 0.5) !important; }

/* ---------- 4. Khung bảng Modern Table Card ---------- */
.admin-table-card-wrapper {
  background: var(--surface-solid) !important;
  border-radius: 18px !important;
  border: 1px solid var(--surface-border) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04) !important;
  overflow-x: auto !important;
}
.admin-custom-table {
  width: 100% !important;
  min-width: 760px !important; /* Đảm bảo không vỡ khi có thêm cột "Hiển thị" trên màn hình hẹp — cuộn ngang thay vì vỡ dòng */
  border-collapse: collapse !important;
  text-align: left !important;
}
.admin-custom-table thead tr {
  background: var(--steel-100) !important;
  border-bottom: 2px solid var(--surface-border) !important;
}
.admin-custom-table th {
  padding: 14px 18px !important;
  font-size: 0.8rem !important;
  font-weight: 800 !important;
  color: var(--text-dim) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  white-space: nowrap !important;
}
.admin-custom-table tbody tr {
  border-bottom: 1px solid var(--surface-border) !important;
  transition: background 0.2s ease !important;
}
.admin-custom-table tbody tr:hover { background: var(--steel-100) !important; }
.admin-custom-table td {
  padding: 14px 18px !important;
  font-size: 0.88rem !important;
  color: var(--text) !important;
  vertical-align: middle !important;
}

/* ---------- 5. Badge trạng thái Hiển thị / Ẩn trên Dashboard (cột "Hiển thị") ---------- */
.badge-visible {
  background: var(--green-100) !important;
  color: var(--green-600) !important;
  border: 1px solid rgba(30, 143, 95, 0.25) !important;
  font-weight: 700 !important;
  padding: 3px 10px !important;
  border-radius: 99px !important;
  font-size: 0.75rem !important;
  white-space: nowrap !important;
}
.badge-hidden {
  background: var(--steel-100) !important;
  color: var(--text-dim) !important;
  border: 1px solid var(--surface-border) !important;
  font-weight: 700 !important;
  padding: 3px 10px !important;
  border-radius: 99px !important;
  font-size: 0.75rem !important;
  white-space: nowrap !important;
}

/* ---------- 6. Nút thao tác: Sửa — Ẩn/Hiện — Xoá ---------- */
.btn-action-edit {
  background: var(--steel-100) !important;
  border: 1px solid var(--surface-border) !important;
  color: var(--text) !important;
  font-weight: 700 !important;
  font-size: 0.8rem !important;
  padding: 5px 12px !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  margin-right: 4px !important;
  transition: all 0.2s ease !important;
}
.btn-action-edit:hover { background: var(--steel-600) !important; color: #fff !important; border-color: var(--steel-600) !important; }
.btn-action-toggle-hide {
  background: var(--amber-100) !important;
  border: 1px solid rgba(224, 123, 29, 0.35) !important;
  color: var(--amber-600) !important;
  font-weight: 700 !important;
  font-size: 0.8rem !important;
  padding: 5px 12px !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  margin-right: 4px !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
}
.btn-action-toggle-hide:hover { background: var(--amber-600) !important; color: #FFFFFF !important; }
.btn-action-delete {
  background: var(--red-100) !important;
  border: 1px solid rgba(198, 54, 47, 0.3) !important;
  color: var(--red-600) !important;
  font-weight: 700 !important;
  font-size: 0.8rem !important;
  padding: 5px 12px !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}
.btn-action-delete:hover { background: var(--red-600) !important; color: #FFFFFF !important; }

/* ---------- 7. Responsive: màn hình hẹp ---------- */
@media (max-width: 720px) {
  .admin-shell { padding: 0 12px !important; }
  .admin-table-header-bar { flex-direction: column !important; align-items: flex-start !important; }
  .btn-primary-add-task { width: 100% !important; justify-content: center !important; }
  .admin-segmented-tabs { width: 100% !important; overflow-x: auto !important; }
}

/* =========================================================
 *  CHỐNG TRÔI TRANG KHI CHUYỂN MỤC SIDEBAR ("Công việc" và các mục khác)
 *  — trước đây bấm "Công việc" gọi scrollIntoView tới #taskGrid, đẩy màn hình
 *  trôi xuống che mất khối Thống kê + Lịch. Logic JS đã sửa để luôn cuộn về
 *  đầu trang; khối CSS này chỉ là lớp bảo hiểm bổ sung cho MỌI thao tác cuộn
 *  bằng anchor (#hash) — đảm bảo nếu có nhảy tới id nào đó thì nội dung không
 *  bao giờ bị Header sticky (.navbar-kst-exact) che khuất phần đầu.
 * ========================================================= */
html {
  scroll-behavior: smooth !important;
  scroll-padding-top: var(--header-h) !important;
}
#pageTop, #taskGrid, #dashboardView, #thiDuaView, #tonDongView,
#nhacNhoView, #videoDaoTaoView, #viewThuVienChinhSach {
  scroll-margin-top: var(--header-h) !important;
}

/* =========================================================
 *  BADGE "PHÂN LOẠI DANH MỤC" — bảng Admin Thư viện quy định
 *  (thẻ ngoài Dashboard dùng lại .policy-card-tag đã có sẵn, không tạo trùng)
 * ========================================================= */
.badge-policy-category {
  display: inline-block !important;
  background: var(--red-100) !important;
  color: var(--red-600) !important;
  border: 1px solid rgba(198, 54, 47, 0.25) !important;
  font-weight: 700 !important;
  font-size: 0.75rem !important;
  padding: 3px 10px !important;
  border-radius: 99px !important;
  white-space: nowrap !important;
}

/* Trạng thái "Đang ẩn" của nút Ẩn/Hiện (bảng Thư viện quy định) — làm nút chuyển
   sang xám trung tính khi item đang bị ẩn, để phân biệt trực quan với trạng thái
   "Đang hiện" (vẫn dùng màu cam vàng nhạt mặc định của .btn-action-toggle-hide). */
.btn-action-toggle-hide.is-hidden-mode {
  background: var(--steel-100) !important;
  border-color: var(--surface-border) !important;
  color: var(--text-dim) !important;
}

/* =========================================================
 *  BANNER ĐỎ "THÔNG BÁO KHẨN" TRÊN DASHBOARD — gộp Thông báo khẩn + Công việc
 *  mức ưu tiên Khẩn, đặt giữa Khung Thống kê và Khung Lọc. Tự ẩn khi rỗng,
 *  tự chia layout theo số lượng mục (renderUrgentBanners() trong js/app.js).
 *  LƯU Ý: đây là bộ class MỚI, khác hoàn toàn .urgent-banner (số ít) đang dùng
 *  cho banner cảnh báo khẩn bên trong khung Chi tiết công việc — không đụng nhau.
 * ========================================================= */
.urgent-banner-wrapper {
  margin: 16px 0 20px 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  transition: all 0.3s ease !important;
}
.urgent-banner-grid {
  display: grid !important;
  gap: 10px !important;
  width: 100% !important;
}
.urgent-banner-grid.count-1 { grid-template-columns: 1fr !important; }
.urgent-banner-grid.count-2 { grid-template-columns: 1fr 1fr !important; }
.urgent-banner-grid.count-3 { grid-template-columns: repeat(3, 1fr) !important; }
.urgent-banner-grid.count-many {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
  max-height: 180px !important;
  overflow-y: auto !important;
  padding-right: 4px !important;
}
.urgent-banner-card {
  background: linear-gradient(135deg, #FEF2F2 0%, #FFF1F2 100%) !important;
  border: 1px solid #FECACA !important;
  border-left: 5px solid #DC2626 !important;
  border-radius: 12px !important;
  padding: 10px 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  box-shadow: 0 4px 14px rgba(220, 38, 38, 0.08) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
.urgent-banner-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(220, 38, 38, 0.16) !important;
  border-color: #F87171 !important;
}
.urgent-badge-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #DC2626 !important;
  color: #FFFFFF !important;
  font-size: 0.75rem !important;
  font-weight: 900 !important;
  padding: 4px 8px !important;
  border-radius: 6px !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  animation: pulseGlowRed 2s infinite !important;
}
@keyframes pulseGlowRed {
  0% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.5); }
  70% { box-shadow: 0 0 0 8px rgba(220, 38, 38, 0); }
  100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
}
.urgent-banner-text {
  color: #991B1B !important;
  font-family: 'Be Vietnam Pro', sans-serif !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  flex: 1 !important;
  word-break: break-word !important;
}
.count-1 .urgent-banner-text { font-size: 0.9rem !important; }
.count-2 .urgent-banner-text { font-size: 0.83rem !important; }
.count-3 .urgent-banner-text,
.count-many .urgent-banner-text { font-size: 0.78rem !important; }
.btn-urgent-action {
  background: rgba(220, 38, 38, 0.1) !important;
  color: #B91C1C !important;
  border: 1px solid rgba(220, 38, 38, 0.2) !important;
  font-weight: 800 !important;
  font-size: 0.75rem !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: all 0.2s ease !important;
  flex-shrink: 0 !important;
}
.btn-urgent-action:hover {
  background: #DC2626 !important;
  color: #FFFFFF !important;
}

/* =========================================================
   CHỐNG BÔI ĐEN CHỮ (I-BEAM CURSOR) TRÊN CÁC KHU VỰC GIAO DIỆN
   Áp đúng theo class THẬT của site (không phải tên class mẫu chung chung):
   .hero-title, .stats-row/.stat-card/.num/.label, .header-user-wrapper/.hsh-user-name,
   .sidebar-kst, .header-icon-btn, .task-card...
   ========================================================= */
/* 1. Khoá bôi đen — text hiển thị, không phải nội dung cần copy (Sổ, số điện thoại KH...) */
.hero-title,
.header-user-wrapper,
.hsh-user-name,
.stats-row,
.stat-card,
.stat-card .num,
.stat-card .label,
.sidebar-kst,
.badge-pill,
.task-card h3,
.task-card .task-type,
button {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
}
/* 2. Ô không bấm được (thống kê, tiêu đề) -> con trỏ mũi tên mặc định, KHÔNG hiện I-beam */
.stat-card,
.stat-card .num,
.stat-card .label,
.hero-title {
  cursor: default !important;
}
/* 3. Thành phần bấm được -> con trỏ bàn tay */
.header-user-wrapper,
.user-avatar-blue-retro,
.btn-kst,
.sidebar-link,
.task-card,
.header-icon-btn {
  cursor: pointer !important;
}

/* =========================================================
 *  MODAL CHẶN TRUY CẬP TRANG QUẢN TRỊ — Robot AI Cute
 *  (Cột I "TrangQuanTri" = FALSE trong TaiKhoanDangNhap)
 * ========================================================= */
/* KHUNG PHỦ MỜ VẬN HÀNH DẠNG GLASSMORPHISM */
.custom-modal-overlay {
  position: fixed !important;
  top: 0; left: 0; width: 100vw; height: 100vh;
  background: rgba(15, 23, 42, 0.75) !important;
  backdrop-filter: blur(12px) !important;
  z-index: 99999 !important;
  /* KHÔNG dùng !important ở display — nếu không, "modal.style.display = 'none'" gán từ
     JS (handleBackToHome/closeDeniedModal) sẽ bị CSS !important đè lên, khiến Modal
     KHÔNG BAO GIỜ ẩn được dù bấm nút. display:flex chỉ có tác dụng khi class này áp
     dụng VÀ style inline không phải "none" — đúng ý đồ bật/tắt bằng inline style. */
  display: flex;
  align-items: center !important;
  justify-content: center !important;
}
.access-denied-card {
  background: linear-gradient(135deg, #FFFFFF 0%, #FEF2F2 100%) !important;
  border: 2px solid #FECACA !important;
  border-radius: 24px !important;
  padding: 32px 28px !important;
  width: 420px !important;
  max-width: 90vw !important;
  text-align: center !important;
  box-shadow: 0 20px 50px rgba(220, 38, 38, 0.25) !important;
  animation: popInModal 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}
/* LINH VẬT MÈO AI CUTE — ANIMATION NHÚN NHẢY HÀI HƯỚC */
.ai-mascot-wrapper {
  display: flex !important;
  justify-content: center !important;
  margin-bottom: 10px !important;
}
.cute-ai-mascot {
  width: 130px !important;
  height: 130px !important;
  animation: mascotBobbing 2.5s infinite ease-in-out !important;
}
.mascot-aura {
  transform-origin: center !important;
  animation: auraRotate 10s linear infinite !important;
}
.mascot-eye {
  animation: eyeBlinkMascot 3.5s infinite !important;
  transform-origin: center !important;
}
.sign-board {
  transform-origin: 100px 90px !important;
  animation: signWiggle 1.5s ease-in-out infinite alternate !important;
}
@keyframes mascotBobbing {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  30% { transform: translateY(-8px) rotate(-4deg) scale(1.02); }
  70% { transform: translateY(4px) rotate(4deg) scale(0.98); }
}
@keyframes auraRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes eyeBlinkMascot {
  0%, 90%, 100% { transform: scaleY(1); }
  95% { transform: scaleY(0.1); }
}
@keyframes signWiggle {
  from { transform: rotate(-8deg); }
  to { transform: rotate(10deg); }
}
@keyframes popInModal {
  from { transform: scale(0.7); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.denied-title {
  color: #991B1B !important;
  font-weight: 900 !important;
  font-size: 1.25rem !important;
  margin-top: 12px !important;
}
.denied-desc {
  color: #334155 !important;
  font-size: 0.95rem !important;
  line-height: 1.6 !important;
  margin: 14px 0 24px 0 !important;
}
.btn-back-home {
  background: linear-gradient(135deg, #8B0000 0%, #DC2626 100%) !important;
  color: #FFFFFF !important;
  font-weight: 800 !important;
  border: 1.5px solid #FACC15 !important;
  padding: 12px 28px !important;
  border-radius: 99px !important;
  cursor: pointer !important;
  box-shadow: 0 6px 20px rgba(139, 0, 0, 0.3) !important;
  transition: all 0.25s ease !important;
}
.btn-back-home:hover {
  transform: translateY(-2px) scale(1.03) !important;
}

/* =========================================================
 *  WIDGET "TRUNG TÂM TẠO TIN NHẮN NHẮC ZALO" (Copy tay, không gửi tự động) — THANH NGANG COMPACT
 * ========================================================= */
.zalo-reminder-widget.compact-bar:not(.d-none) {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 12px !important;
  padding: 8px 16px !important;
  margin-bottom: 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03) !important;
}
.zalo-left-info {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.zalo-icon {
  font-size: 1.1rem !important;
}
.zalo-title {
  font-weight: 800 !important;
  font-size: 0.88rem !important;
  color: #1E293B !important;
}
.zalo-badge {
  background: #DCFCE7 !important;
  color: #166534 !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  padding: 2px 8px !important;
  border-radius: 99px !important;
}
.zalo-btn-group {
  display: flex !important;
  gap: 8px !important;
}
.btn-zalo-copy {
  border: none !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  font-size: 0.8rem !important;
  padding: 6px 14px !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08) !important;
}
.btn-16h50 { background: linear-gradient(135deg, #D97706 0%, #B45309 100%) !important; }
.btn-09h00 { background: linear-gradient(135deg, #DC2626 0%, #991B1B 100%) !important; }
.btn-zalo-copy:hover {
  transform: translateY(-1px) !important;
  filter: brightness(1.1) !important;
}
.btn-zalo-copy:disabled {
  opacity: 0.7 !important;
  cursor: wait !important;
  transform: none !important;
}

/* =========================================================
 *  FIX TRIỆT ĐỂ LỊCH FLATPICKR BỊ CHÌM SAU MODAL (dùng chung mọi trang có Flatpickr)
 * ========================================================= */
/* Ép Lịch Flatpickr luôn nổi lên TRÊN CÙNG của tất cả Modal & Backdrop */
body .flatpickr-calendar,
.flatpickr-calendar.open,
.flatpickr-calendar.inline {
  z-index: 999999999 !important;
  position: absolute !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35) !important;
  border: 1px solid #DC2626 !important;
  border-radius: 16px !important;
  overflow: hidden !important;
}
.swal2-container, .toast-container, .kms-alert-popup {
  z-index: 9999999999 !important;
}
/* Hạ riêng z-index của Modal Wizard Báo cáo tuần (vốn đang dùng chung 1.000.000 với mọi Modal
   khác trong hệ thống — xem .dms-modal-overlay trong dms.css) xuống mức thấp hơn hẳn Flatpickr,
   để loại trừ hoàn toàn khả năng tranh chấp z-index dù ở stacking context nào. CHỈ hạ đúng Modal
   này (không hạ .dms-modal-overlay nói chung) để không ảnh hưởng thứ tự các Modal/Toast khác
   trong hệ thống vốn đã được sắp lớp cẩn thận (Toast luôn cao nhất ở 2.000.000). */
#weeklyReportWizardModal {
  z-index: 10000 !important;
}
#weeklyReportWizardModal .dms-modal-card {
  z-index: 10001 !important;
  /* KHÔNG đổi overflow-y:auto của .dms-modal-card sang visible — Modal Wizard rất dài, cần giữ
     cuộn nội bộ. Không cần thiết nữa vì Flatpickr đã appendTo:document.body (ra khỏi hẳn Modal),
     nên overflow của Modal không còn cắt xén được lịch popup dù để nguyên overflow-y:auto. */
}


/* =========================================================
 *  CHUẨN HÓA DROPDOWN THÁNG/NĂM TRONG LỊCH FLATPICKR (chống phình to)
 * ========================================================= */
.flatpickr-current-month .flatpickr-monthDropdown-months {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #1E293B !important;
  background: #FFFFFF !important;
  border: 1px solid #CBD5E1 !important;
  border-radius: 8px !important;
  padding: 4px 8px !important;
  height: 32px !important;
  line-height: 1.2 !important;
  outline: none !important;
  cursor: pointer !important;
  appearance: auto !important;
  -webkit-appearance: auto !important;
  margin-right: 6px !important;
}
.flatpickr-current-month .numInputWrapper {
  width: 70px !important;
}
.flatpickr-current-month input.cur-year {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #1E293B !important;
  background: #FFFFFF !important;
  border: 1px solid #CBD5E1 !important;
  border-radius: 8px !important;
  padding: 4px 6px !important;
  height: 32px !important;
}
/* Xóa màu nền đỏ bị loang ở Header Lịch */
.flatpickr-current-month {
  padding: 6px 0 0 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.flatpickr-calendar {
  width: 310px !important;
  padding: 10px !important;
  background: #FFFFFF !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
}

/* =========================================================================
 *  RESPONSIVE MOBILE OPTIMIZATION — @media (max-width: 768px)
 *  Chỉ áp dụng cho màn hình <= 768px (điện thoại/tablet dọc) — hoàn toàn
 *  KHÔNG ảnh hưởng giao diện Desktop/Laptop (>768px giữ nguyên 100%).
 *  Dán khối này vào CUỐI style.css (đã đặt sau cùng để có độ ưu tiên cascade
 *  cao nhất, thắng mọi rule !important cùng specificity định nghĩa phía trên).
 * ========================================================================= */
@media (max-width: 768px) {

  /* ---------- 1. HEADER: logo/tiêu đề/icon/thanh tìm kiếm ---------- */

  /* Thu gọn padding toàn bộ dải đỏ Header xuống 8px 12px theo yêu cầu */
  .hsh-main-red-bar .app-container {
    padding: 8px 12px !important;
    gap: 8px !important;
  }

  /* Cho phép khối tiêu đề co lại đúng cách (min-width:0 là chìa khoá để
     text-overflow:ellipsis hoạt động trong flexbox — thiếu dòng này chính
     là nguyên nhân khiến chữ bị ĐẨY XUỐNG DÒNG thay vì cắt gọn) */
  .brand-titles {
    min-width: 0 !important;
    overflow: hidden !important;
  }
  .brand-title-hsh {
    font-size: 0.95rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  /* Ẩn hẳn dòng phụ "Trung tâm triển khai công việc" trên mobile cho đỡ chật */
  .brand-sub-hsh {
    display: none !important;
  }
  /* Thu nhỏ logo một chút để nhường chỗ cho tiêu đề */
  .brand-mark-hsh {
    width: 38px !important;
    height: 38px !important;
  }

  /* Cụm icon công cụ Header: thu nhỏ + giảm khoảng cách */
  .header-quick-actions {
    gap: 4px !important;
  }
  .header-icon-btn {
    width: 30px !important;
    height: 30px !important;
  }
  .header-icon-btn span {
    font-size: 0.95rem !important;
  }
  /* Bán ẩn icon Webmail Outlook — ít dùng trên điện thoại, nhường chỗ cho
     Chuông thông báo / Trang quản trị / Đổi giao diện quan trọng hơn */
  .header-quick-actions a[href="https://mail.hoasengroup.vn/"] {
    display: none !important;
  }

  /* Thanh tìm kiếm mobile (.search-box-hsh-mobile) — đảm bảo chiếm trọn
     100% chiều ngang, nằm riêng 1 dòng dưới Header, không tràn cạnh */
  .search-box-hsh-mobile {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .search-box-hsh-mobile input {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* ---------- 2. BỘ LỌC + THẺ CÔNG VIỆC ---------- */

  /* Khung Báo cáo Khẩn cấp (thẻ đỏ .urgent-banner-card) — chuyển dọc,
     nút "Xem chi tiết" (.btn-urgent-action) rộng 100% bên dưới chữ */
  .urgent-banner-grid.count-1,
  .urgent-banner-grid.count-2,
  .urgent-banner-grid.count-3,
  .urgent-banner-grid.count-many {
    grid-template-columns: 1fr !important;
  }
  .urgent-banner-card {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .urgent-banner-card .urgent-badge-icon {
    align-self: flex-start !important;
  }
  .btn-urgent-action {
    width: 100% !important;
    text-align: center !important;
    padding: 8px 10px !important;
  }

  /* Bộ lọc (.filter-bar / .form-select-filter): xếp lưới 2 cột x 2 hàng
     thay vì cố nhét 1 hàng ngang gây tràn */
  .filter-bar {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  .filter-bar select,
  .filter-bar .form-select-filter {
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .filter-bar .spacer {
    display: none !important;
  }
  /* Nút "Đặt lại lọc" / "↻ Làm mới" nằm full-width, mỗi nút 1 hàng riêng
     bên dưới lưới 2x2 select — tránh bị bóp méo trong ô lưới hẹp */
  .filter-bar .btn-kst {
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }

  /* Thẻ công việc (.task-card): padding + font tiêu đề vừa vặn màn hình nhỏ */
  .task-card {
    padding: 12px !important;
  }
  .task-card h3 {
    font-size: 0.95rem !important;
  }

  /* ---------- 3. NÚT "HỖ TRỢ" NỔI — không che nội dung ---------- */

  .floating-support-wrapper {
    bottom: 15px !important;
    right: 15px !important;
    transform: scale(0.85) !important;
    transform-origin: bottom right !important;
  }

  /* Chừa khoảng trống an toàn ở đáy danh sách công việc để thẻ cuối cùng
     không bao giờ bị nút Hỗ trợ nổi che mất */
  .task-grid {
    margin-bottom: 60px !important;
  }
}

/* =========================================================================
 *  MOBILE HEADER RESTRUCTURE (v2) — @media (max-width: 768px)
 *  Tái cấu trúc Header mobile thành 3 HÀNG rõ ràng bằng CSS thuần (display:contents
 *  + flex order) — KHÔNG cần đổi bất kỳ dòng HTML nào, KHÔNG ảnh hưởng Desktop.
 *  Dán khối này SAU CÙNG file style.css để đảm bảo thắng mọi rule !important
 *  cùng độ đặc hiệu khai báo phía trên.
 * ========================================================================= */
@media (max-width: 768px) {

  /* Chặn tuyệt đối hiện tượng trượt ngang/tràn lề trên iPhone */
  html, body,
  .navbar-kst-exact, .header-content-inner-red, .hsh-main-red-bar, .hsh-top-neon-bar {
    overflow-x: hidden !important;
  }

  /* ---------- DÒNG CHỮ TICKER "KST - KIỂM SOÁT NỘI BỘ..." ---------- */
  .hsh-top-neon-bar { padding: 6px 10px !important; }
  /* 2 vệt sáng chéo trang trí 2 bên chiếm chỗ vô ích trên màn hẹp -> ẩn bớt */
  .neon-line-left, .neon-line-right { display: none !important; }
  .hsh-slogan-content { gap: 6px !important; }
  .hsh-badge { font-size: 0.6rem !important; padding: 2px 6px !important; }
  .hsh-text {
    font-size: 0.72rem !important;
    max-width: calc(100vw - 90px) !important;
    text-align: center !important;
  }

  /* ---------- HÀNG 1 + HÀNG 2: Header chính ---------- */
  .hsh-main-red-bar .app-container {
    flex-wrap: wrap !important;
    row-gap: 10px !important;
    padding: 8px 12px !important;
  }
  /* "Bung" khung bọc .d-flex.ms-auto (chứa quick-actions + userInfoBox) — để 2 khối
     bên trong nó tham gia trực tiếp vào flex-layout của .app-container, tách được
     thành 2 hàng riêng bằng order/flex-basis thay vì luôn dính chung 1 cụm. */
  .hsh-main-red-bar .app-container > .d-flex.ms-auto {
    display: contents !important;
  }

  /* HÀNG 1 — Trái: Menu + Logo + Tên viết tắt */
  #sidebarToggle { order: 1 !important; }
  .brand-mark-hsh { order: 2 !important; width: 34px !important; height: 34px !important; }
  .brand-titles {
    order: 3 !important;
    flex: 1 1 auto !important;
    min-width: 0 !important; /* bắt buộc để ellipsis hoạt động thay vì đẩy xuống dòng */
  }
  .brand-title-hsh {
    font-size: 0.9rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .brand-sub-hsh { display: none !important; }

  /* HÀNG 1 — Phải: Tên User + nút Đăng xuất, thu gọn tối đa để KHÔNG BAO GIỜ tràn lề */
  #userInfoBox {
    order: 4 !important;
    margin-left: auto !important;
    padding: 3px 5px 3px 8px !important;
    gap: 6px !important;
    max-width: 58vw !important; /* chặn trần cứng, dù tên dài cỡ nào cũng không phá layout */
  }
  #userInfoBox .user-avatar-blue-retro { display: none !important; } /* ẩn avatar hoạt hình cho gọn */
  #userInfoBox .hsh-user-name {
    max-width: 26vw !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 0.76rem !important;
  }
  #btnLogout {
    padding: 5px 9px !important;
    font-size: 0.68rem !important;
    gap: 3px !important;
  }

  /* HÀNG 2 — Dãy icon công cụ: xuống hàng riêng, canh giữa, cách đều 12px, to hơn dễ bấm */
  .header-quick-actions {
    order: 5 !important;
    flex-basis: 100% !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    gap: 12px !important;
    margin-top: 2px !important;
  }
  .header-icon-btn {
    width: 40px !important;
    height: 40px !important;
  }
  .header-icon-btn span { font-size: 1.05rem !important; }
  /* Vẫn bán ẩn icon Webmail ít dùng trên mobile (giữ từ bản trước) */
  .header-quick-actions a[href="https://mail.hoasengroup.vn/"] { display: none !important; }

  /* HÀNG 3 — Thanh tìm kiếm: riêng 1 hàng, rộng 100%, bo tròn 20px */
  .search-box-hsh-mobile {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin-top: 10px !important;
  }
  .search-box-hsh-mobile input {
    width: 100% !important;
    box-sizing: border-box !important;
    border-radius: 20px !important;
  }
}

/* =========================================================
 *  ADMIN — NÚT "🚀 ĐỒNG BỘ DỮ LIỆU TOÀN HỆ THỐNG"
 *  (Cache-First / Admin-Triggered Sync — xem js/api.js Api.syncIfNewer())
 * ========================================================= */
.sync-trigger-bar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:16px 20px;margin-bottom:20px;border-radius:var(--radius-sm);
  background:linear-gradient(135deg,var(--brand-navy) 0%,#123061 60%,var(--brand-navy) 100%);
  border:1px solid rgba(240,180,0,0.35);box-shadow:var(--shadow-lg);
}
.sync-trigger-title{color:#fff;font-weight:800;font-size:1rem;letter-spacing:.2px;}
.sync-trigger-sub{color:rgba(255,255,255,0.65);font-size:.78rem;margin-top:2px;}
.btn-sync-trigger{
  border:none;cursor:pointer;white-space:nowrap;flex-shrink:0;
  padding:12px 22px;border-radius:999px;font-weight:800;font-size:.88rem;letter-spacing:.2px;
  background:var(--gold-shine);color:#3A2600;
  box-shadow:0 6px 18px rgba(240,180,0,0.35);
  transition:transform .15s ease,box-shadow .15s ease,filter .15s ease;
}
.btn-sync-trigger:hover{transform:translateY(-1px);box-shadow:0 10px 26px rgba(240,180,0,0.45);filter:brightness(1.04);}
.btn-sync-trigger:active{transform:translateY(0);}
.btn-sync-trigger:disabled{opacity:.6;cursor:not-allowed;transform:none;filter:none;}
@media(max-width:640px){
  .sync-trigger-bar{flex-direction:column;align-items:stretch;text-align:center;}
  .btn-sync-trigger{width:100%;}
}

/* =========================================================
 *  BADGE PHIÊN BẢN APP (Footer màn Đăng nhập + Footer chung)
 *  Giá trị số bên trong (.app-version-value) được JS gán từ CURRENT_APP_VERSION
 *  lúc tải trang — xem cuối app.js/dms.js/kms.js/admin.js (applyAppVersionBadge()).
 * ========================================================= */
.app-version-badge{
  display:inline-block;margin-top:4px;padding:2px 9px;
  font-size:10px;font-family:var(--font-mono,'JetBrains Mono',monospace);font-weight:700;
  letter-spacing:.3px;line-height:1.6;
  color:rgba(251,191,36,0.9);
  background:rgba(245,158,11,0.1);
  border:1px solid rgba(245,158,11,0.2);
  border-radius:999px;
}