/* ==========================================================================
   KNF PREMIUM UI - WORLD-CLASS DESIGN SYSTEM v13.0
   Cảm hứng: Apple HIG & Stripe Precision:
   - Sapphire Blue thuần khiết (Pure Signature Sapphire): #0062FF / #004ECC
   - Emerald Green sức sống (Vitality Emerald): #059669 / #10B981
   - Nền tuyết thanh khiết & Kính mờ siêu nét (Surgical Frosted Canvas)
   - Viền vi mảnh pha lê 1px (Crystal Hairline Borders)
   - Hệ thống bóng đổ tán xạ đa tầng (Multi-layer Diffused Shadows)
   ========================================================================== */

:root {
  /* Signature Brand Color Tokens */
  --knf-premium-azure: #0062FF;
  --knf-premium-azure-dark: #004ECC;
  --knf-premium-azure-soft: #EFF6FF;
  --knf-premium-azure-border: #BFDBFE;
  
  --knf-premium-sky: #0EA5E9;
  --knf-premium-emerald: #059669;
  --knf-premium-mint: #10B981;
  --knf-premium-emerald-soft: #ECFDF5;
  --knf-premium-emerald-border: #A7F3D0;
  
  --knf-premium-amber: #D97706;
  --knf-premium-amber-soft: #FFFBEB;
  --knf-premium-amber-border: #FDE68A;
  
  --knf-premium-rose: #E11D48;
  --knf-premium-rose-soft: #FFF1F2;
  --knf-premium-rose-border: #FECDD3;

  /* Typography Colors */
  --knf-premium-ink: #0F172A;
  --knf-premium-body: #334155;
  --knf-premium-muted: #64748B;
  --knf-premium-subtle: #94A3B8;

  /* Surfaces & Borders */
  --knf-premium-line: rgba(226, 232, 240, 0.85);
  --knf-premium-line-subtle: rgba(15, 23, 42, 0.06);
  --knf-premium-paper: rgba(255, 255, 255, 0.94);
  --knf-premium-paper-solid: #FFFFFF;

  /* Multi-layer Diffused Shadows (Apple/Stripe Standard) */
  --knf-premium-shadow-xs: 0 1px 2px 0 rgba(15, 23, 42, 0.04);
  --knf-premium-shadow-sm: 0 2px 8px -1px rgba(15, 23, 42, 0.06), 0 1px 2px -1px rgba(15, 23, 42, 0.04);
  --knf-premium-shadow: 0 16px 40px -6px rgba(0, 98, 255, 0.07), 0 4px 16px -2px rgba(15, 23, 42, 0.04);
  --knf-premium-shadow-hover: 0 24px 54px -8px rgba(0, 98, 255, 0.12), 0 8px 20px -4px rgba(15, 23, 42, 0.05);
  --knf-premium-shadow-glow: 0 0 28px rgba(0, 98, 255, 0.22);

  /* Tuong thich nguoc bien mau */
  --primary: #0062FF;
  --knf-premium-red: #0062FF;
  --knf-premium-red-dark: #004ECC;
}

body.bg-grid {
  color: var(--knf-premium-ink);
  background:
    radial-gradient(circle at 10% -5%, rgba(40, 165, 239, .24) 0, transparent 38%),
    radial-gradient(circle at 92% 15%, rgba(79, 227, 121, .20) 0, transparent 34%),
    radial-gradient(circle at 50% 115%, rgba(0, 112, 244, .14) 0, transparent 42%),
    linear-gradient(155deg, #F8FAFC 0%, #F0F9FF 55%, #F0FDF4 100%) !important;
  background-attachment: fixed !important;
}

body[data-page="admin"],
body[data-page="user"] {
  overflow-x: hidden;
  overflow-x: clip;
}

body.bg-grid::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .32;
  background-image:
    linear-gradient(rgba(0, 112, 244, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 112, 244, .04) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: linear-gradient(to bottom, #000 0%, transparent 85%);
}

.orb.one {
  background: radial-gradient(circle, rgba(0, 112, 244, .38), rgba(40, 165, 239, .14), transparent 70%) !important;
}
.orb.two {
  background: radial-gradient(circle, rgba(16, 185, 129, .34), rgba(79, 227, 121, .12), transparent 70%) !important;
}

body[data-page="admin"] .orb,
body.auth-screen .orb {
  display: block !important;
  opacity: .68 !important;
  filter: blur(1px) !important;
  animation: knfPremiumFloat 12s ease-in-out infinite !important;
}

body[data-page="admin"] .topbar,
body[data-page="user"] .topbar {
  position: sticky;
  top: 12px;
  z-index: 90;
  border: 1px solid rgba(255, 255, 255, 0.94) !important;
  border-radius: 22px !important;
  background: rgba(255, 255, 255, 0.85) !important;
  box-shadow: 0 12px 36px rgba(0, 98, 255, 0.06), 0 0 0 1px rgba(15, 23, 42, 0.04) !important;
  backdrop-filter: blur(24px) saturate(1.3);
  -webkit-backdrop-filter: blur(24px) saturate(1.3);
}

body[data-page="admin"] .logo,
body[data-page="user"] .logo,
.auth-screen .logo {
  border-radius: 14px !important;
  box-shadow: 0 8px 20px rgba(0, 98, 255, 0.16) !important;
  transition: transform .24s cubic-bezier(0.16, 1, 0.3, 1), box-shadow .24s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

body[data-page="admin"] .logo:hover,
body[data-page="user"] .logo:hover,
.auth-screen .logo:hover {
  transform: translateY(-1px) scale(1.03);
  box-shadow: 0 12px 28px rgba(0, 98, 255, 0.22) !important;
}

body[data-page="admin"] .card,
body[data-page="user"] .card,
.auth-screen .login-card,
body:not([data-page]) .login-card {
  border: 1px solid rgba(255, 255, 255, 0.94) !important;
  border-radius: 24px !important;
  background: var(--knf-premium-paper) !important;
  box-shadow: var(--knf-premium-shadow), 0 0 0 1px rgba(15, 23, 42, 0.04) !important;
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
}

body[data-page="admin"] .view > .card,
body[data-page="user"] .shell > .card {
  transition: transform .24s cubic-bezier(0.16, 1, 0.3, 1), box-shadow .24s cubic-bezier(0.16, 1, 0.3, 1), border-color .24s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

body[data-page="admin"] .view > .card:hover,
body[data-page="user"] .shell > .card:hover {
  border-color: rgba(191, 219, 254, 0.95) !important;
  box-shadow: var(--knf-premium-shadow-hover), 0 0 0 1px rgba(0, 98, 255, 0.08) !important;
}

body[data-page="admin"] .sidebar {
  border: 1px solid rgba(255, 255, 255, .92) !important;
  border-radius: 23px !important;
  background: rgba(255, 255, 255, .8) !important;
  box-shadow: 0 18px 52px rgba(0, 112, 244, .08) !important;
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
}

body[data-page="admin"] .navbtn,
body[data-page="admin"] .navgroup-toggle {
  color: #475569 !important;
  border-radius: 12px !important;
  transition: transform .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease !important;
}

body[data-page="admin"] .navgroup-toggle { background: transparent !important; }

body[data-page="admin"] .navbtn:hover {
  transform: translateX(4px);
  background: rgba(0, 112, 244, .08) !important;
  color: #0070F4 !important;
}
body[data-page="admin"] .navbtn.active {
  color: #fff !important;
  background: linear-gradient(135deg, #0070F4 0%, #00B4D8 45%, #10B981 100%) !important;
  box-shadow: 0 11px 24px rgba(0, 112, 244, .28) !important;
}

body.bg-grid .btn:not(.secondary):not(.danger),
.auth-screen .login-submit {
  border: 0 !important;
  border-radius: 13px !important;
  color: #fff !important;
  background: linear-gradient(135deg, #0062FF 0%, #0284C7 55%, #059669 100%) !important;
  box-shadow: 0 8px 20px rgba(0, 98, 255, .24) !important;
  transition: transform .2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow .2s cubic-bezier(0.16, 1, 0.3, 1), filter .2s ease !important;
}

body.bg-grid .btn:not(.secondary):not(.danger):hover,
.auth-screen .login-submit:hover {
  transform: translateY(-1.5px);
  box-shadow: 0 12px 28px rgba(0, 98, 255, .32) !important;
  filter: saturate(1.12);
}
body.bg-grid .btn.secondary {
  border-radius: 12px !important;
  background: rgba(255, 255, 255, .9) !important;
  border: 1px solid #E2E8F0 !important;
  color: #0F172A !important;
  transition: transform .18s cubic-bezier(0.16, 1, 0.3, 1), border-color .18s ease, background .18s ease, color .18s ease !important;
}
body.bg-grid .btn.secondary:hover {
  transform: translateY(-1px);
  border-color: #BFDBFE !important;
  background: #EFF6FF !important;
  color: #0062FF !important;
}

body.bg-grid input,
body.bg-grid select,
body.bg-grid textarea {
  border-radius: 12px !important;
  border-color: #CBD5E1 !important;
  background: rgba(255, 255, 255, .94) !important;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease !important;
}

body.bg-grid input:focus,
body.bg-grid select:focus,
body.bg-grid textarea:focus {
  border-color: #0062FF !important;
  box-shadow: 0 0 0 3px rgba(0, 98, 255, .16) !important;
  background: #fff !important;
  outline: none !important;
}

body[data-page="admin"] .table-wrap,
body[data-page="user"] .table-wrap {
  border-radius: 17px !important;
  border: 1px solid rgba(226, 232, 240, .9);
  background: rgba(255, 255, 255, .78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

body[data-page="admin"] .table th,
body[data-page="user"] .table th {
  background: rgba(248, 250, 252, .9) !important;
  color: #475569 !important;
  font-weight: 700 !important;
}
body[data-page="admin"] .table tbody tr,
body[data-page="user"] .table tbody tr {
  transition: background .16s ease, transform .16s ease;
}
body[data-page="admin"] .table tbody tr:hover,
body[data-page="user"] .table tbody tr:hover {
  background: rgba(240, 249, 255, .75) !important;
}

body[data-page="admin"] .mini-panel,
body[data-page="admin"] .stat,
body[data-page="user"] .mini-panel,
body[data-page="user"] .stat {
  border-radius: 16px !important;
  border: 1px solid rgba(226, 232, 240, .85) !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, .95), rgba(248, 250, 252, .88)) !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, .04) !important;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease !important;
}

body[data-page="admin"] .stat:hover,
body[data-page="user"] .stat:hover {
  transform: translateY(-2px);
  border-color: #BFDBFE !important;
  box-shadow: 0 8px 22px rgba(0, 98, 255, .08) !important;
}

/* ==================== WORLD-CLASS BENTO GRID & HERO ACTION PULSE ==================== */
body[data-page="user"] #home.big-actions {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 12px !important;
  margin-bottom: 20px !important;
}

/* 1. Hero Check-in Action Card (Spans full 2 columns) */
body[data-page="user"] #home .checkin-action-wrap {
  grid-column: 1 / -1 !important;
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
}

body[data-page="user"] #home .checkin-action-wrap #btnCheckin {
  width: 100% !important;
  min-height: 84px !important;
  padding: 16px 20px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 16px !important;
  border-radius: 22px !important;
  background: linear-gradient(135deg, #0062FF 0%, #0052D9 42%, #059669 100%) !important;
  box-shadow: 0 14px 34px -4px rgba(0, 98, 255, 0.38), 0 4px 12px rgba(5, 150, 105, 0.22) !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  position: relative !important;
  overflow: hidden !important;
  text-align: left !important;
  cursor: pointer !important;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1), filter 0.2s ease !important;
}

/* Hiệu ứng hào quang phát sáng tinh tế (Hero Pulse) */
body[data-page="user"] #home .checkin-action-wrap #btnCheckin::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 82% 50%, rgba(255, 255, 255, 0.22), transparent 62%);
  pointer-events: none;
}

body[data-page="user"] #home .checkin-action-wrap #btnCheckin:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 20px 48px -4px rgba(0, 98, 255, 0.48), 0 6px 16px rgba(5, 150, 105, 0.28) !important;
  filter: saturate(1.1) !important;
}

body[data-page="user"] #home .checkin-action-wrap #btnCheckin:active {
  transform: scale(0.985) !important;
  box-shadow: 0 8px 20px rgba(0, 98, 255, 0.28) !important;
}

/* Icon Check-in lớn nổi bật dạng Shutter Badge */
body[data-page="user"] #home .checkin-action-wrap .big-btn-icon {
  flex-shrink: 0 !important;
  width: 52px !important;
  height: 52px !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, 0.22) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

body[data-page="user"] #home .checkin-action-wrap .big-btn-icon svg {
  width: 28px !important;
  height: 28px !important;
  stroke: #FFFFFF !important;
  fill: none !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

body[data-page="user"] #home .checkin-action-wrap .big-btn-copy {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  flex: 1 !important;
  min-width: 0 !important;
}

body[data-page="user"] #home .checkin-action-wrap .big-btn-copy strong {
  color: #FFFFFF !important;
  font-size: 19px !important;
  font-weight: 800 !important;
  letter-spacing: -0.022em !important;
  line-height: 1.2 !important;
}

body[data-page="user"] #home .checkin-action-wrap .big-btn-copy span {
  color: rgba(255, 255, 255, 0.88) !important;
  font-size: 12.5px !important;
  line-height: 1.35 !important;
}

/* Thanh đếm ngược Cooldown tinh tế */
body[data-page="user"] #home .checkin-countdown:not(.hidden) {
  margin-top: 8px !important;
  padding: 8px 14px !important;
  border-radius: 12px !important;
  background: #FFFBEB !important;
  border: 1px solid #FDE68A !important;
  color: #B45309 !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  box-shadow: 0 2px 8px rgba(217, 119, 6, 0.08) !important;
}

/* 2. Bento Grid 4 Ô Thao Tác Nhanh (Workdays, MCP, Documents, Sales) */
body[data-page="user"] #home .big-btn:not(#btnCheckin) {
  min-height: 104px !important;
  padding: 15px 16px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(226, 232, 240, 0.88) !important;
  background: linear-gradient(160deg, #FFFFFF 0%, #F8FAFC 100%) !important;
  box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.02) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 10px !important;
  text-align: left !important;
  cursor: pointer !important;
  position: relative !important;
  overflow: hidden !important;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.22s ease !important;
}

body[data-page="user"] #home .big-btn:not(#btnCheckin):hover {
  transform: translateY(-2.5px) !important;
  border-color: #BFDBFE !important;
  background: #FFFFFF !important;
  box-shadow: 0 12px 28px -4px rgba(0, 98, 255, 0.1), 0 2px 6px rgba(15, 23, 42, 0.04) !important;
}

body[data-page="user"] #home .big-btn:not(#btnCheckin):active {
  transform: scale(0.98) !important;
}

/* Bento Icon Chips */
body[data-page="user"] #home .big-btn:not(#btnCheckin) .big-btn-icon {
  width: 40px !important;
  height: 40px !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  transition: transform 0.2s ease !important;
}

/* Phối màu icon theo chức năng chuẩn mực */
body[data-page="user"] #btnWorkdays .big-btn-icon {
  background: #EFF6FF !important;
  color: #0062FF !important;
  border: 1px solid #BFDBFE !important;
}
body[data-page="user"] #btnWorkdays .big-btn-icon svg { stroke: #0062FF !important; }

body[data-page="user"] #btnMcp .big-btn-icon {
  background: #ECFDF5 !important;
  color: #059669 !important;
  border: 1px solid #A7F3D0 !important;
}
body[data-page="user"] #btnMcp .big-btn-icon svg { stroke: #059669 !important; }

body[data-page="user"] #btnDocuments .big-btn-icon {
  background: #F5F3FF !important;
  color: #7C3AED !important;
  border: 1px solid #DDD6FE !important;
}
body[data-page="user"] #btnDocuments .big-btn-icon svg { stroke: #7C3AED !important; }

body[data-page="user"] #btnSales .big-btn-icon {
  background: #FFF7ED !important;
  color: #EA580C !important;
  border: 1px solid #FED7AA !important;
}
body[data-page="user"] #btnSales .big-btn-icon svg { stroke: #EA580C !important; }

body[data-page="user"] #home .big-btn:not(#btnCheckin) .big-btn-copy {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  width: 100% !important;
}

body[data-page="user"] #home .big-btn:not(#btnCheckin) .big-btn-copy strong {
  font-size: 14.5px !important;
  font-weight: 700 !important;
  color: #0F172A !important;
  letter-spacing: -0.01em !important;
  line-height: 1.25 !important;
}

body[data-page="user"] #home .big-btn:not(#btnCheckin) .big-btn-copy span {
  font-size: 11.5px !important;
  color: #64748B !important;
  line-height: 1.35 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* Badge số báo cáo mới */
body[data-page="user"] #salesBadge {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  background: #E11D48 !important;
  color: #FFFFFF !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  padding: 2px 7px !important;
  border-radius: 999px !important;
  box-shadow: 0 2px 6px rgba(225, 29, 72, 0.35) !important;
}

/* 3. Tinh chỉnh Thẻ Trạng Thái Hôm Nay (#todayBox) */
body[data-page="user"] #todayBox {
  border-radius: 22px !important;
  background: rgba(255, 255, 255, 0.94) !important;
  box-shadow: 0 12px 36px -4px rgba(15, 23, 42, 0.05), 0 0 0 1px rgba(15, 23, 42, 0.04) !important;
}

body[data-page="user"] #todayBox .split h2 {
  font-size: 17px !important;
  font-weight: 800 !important;
  color: #0F172A !important;
  letter-spacing: -0.015em !important;
}

body[data-page="user"] #todayBox #todayStats {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 8px !important;
}

@media (max-width: 480px) {
  body[data-page="user"] #todayBox #todayStats {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

body[data-page="user"] #todayBox #todayStats .stat {
  padding: 10px 12px !important;
  border-radius: 14px !important;
  background: #F8FAFC !important;
  border: 1px solid rgba(226, 232, 240, 0.8) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
}

body[data-page="user"] #todayBox #todayStats .stat .muted {
  font-size: 11px !important;
  color: #64748B !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
}

body[data-page="user"] #todayBox #todayStats .stat b {
  font-size: 16px !important;
  color: #0F172A !important;
  font-weight: 800 !important;
}

.auth-screen .login-card,
body:not([data-page]) .login-card {
  position: relative;
  overflow: hidden;
}

.auth-screen .login-card::before,
body:not([data-page]) .login-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 260px;
  height: 260px;
  right: -130px;
  top: -140px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 112, 244, .18), rgba(16, 185, 129, .12), transparent 70%);
  animation: knfPremiumPulse 5s ease-in-out infinite;
}

.fade-in { animation: knfPremiumReveal .48s cubic-bezier(.22, .8, .3, 1) both !important; }

@keyframes knfPremiumReveal { from { opacity: 0; transform: translateY(12px) scale(.992); } to { opacity: 1; transform: none; } }
@keyframes knfPremiumFloat { 50% { transform: translateY(-22px) scale(1.05); } }
@keyframes knfPremiumPulse { 0%, 100% { transform: scale(.92); opacity: .62; } 50% { transform: scale(1.08); opacity: 1; } }

@media (max-width: 760px) {
  body[data-page="admin"] .topbar,
  body[data-page="user"] .topbar { top: 6px; border-radius: 18px !important; }
  body[data-page="user"] .card { border-radius: 21px !important; box-shadow: 0 14px 38px rgba(0, 112, 244, .08) !important; }
  body[data-page="user"] .big-btn:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

@media (hover: none), (max-width: 760px) {
  body[data-page="user"] .orb { animation: none !important; opacity: .32 !important; }
  body[data-page="user"] .card,
  body[data-page="user"] .topbar { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
}

/* ==========================================================================
   AURORA DESIGN ENHANCEMENTS v2 — Hiệu ứng Hiện đại & Chuyên nghiệp
   Nhẹ trên điện thoại: chỉ dùng transform + opacity (GPU-accelerated)
   ========================================================================== */

/* B1. Thanh Accent Gradient Cầu Vồng Cực Quang ở Top */
body.bg-grid::before {
  background: linear-gradient(90deg, #0070F4, #0EA5E9, #10B981, #4FE379, #0EA5E9, #0070F4) !important;
  background-size: 300% 100% !important;
  animation: knfAuroraShift 12s linear infinite !important;
  opacity: 1 !important;
  mask-image: none !important;
  height: 3px !important;
}
@keyframes knfAuroraShift { to { background-position: 300% 0; } }

/* B2. Card Heading Accent Bar — Aurora Gradient */
body.bg-grid .card h2::before {
  background: linear-gradient(180deg, #0070F4 0%, #10B981 100%) !important;
  border-radius: 3px;
}

/* B3. Scroll Reveal Animation */
.knf-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .5s cubic-bezier(.22,.8,.3,1), transform .5s cubic-bezier(.22,.8,.3,1);
}
.knf-reveal.is-visible {
  opacity: 1;
  transform: none;
}
.knf-reveal:nth-child(2) { transition-delay: .06s; }
.knf-reveal:nth-child(3) { transition-delay: .12s; }
.knf-reveal:nth-child(4) { transition-delay: .18s; }

/* B4. Loading Skeleton Shimmer */
.knf-skeleton,
.knf-skeleton-line {
  background: linear-gradient(90deg, #F1F5F9 25%, #E2E8F0 37%, #F1F5F9 63%) !important;
  background-size: 200% 100% !important;
  animation: knfShimmer 1.5s ease-in-out infinite !important;
  border-radius: 8px;
  color: transparent !important;
}
@keyframes knfShimmer { to { background-position: -200% 0; } }

/* B5. Nút Bấm — Hiệu ứng nhấn ring glow */
body.bg-grid .btn:not(.secondary):not(.danger):active {
  transform: translateY(1px) scale(.98) !important;
  box-shadow: 0 0 0 4px rgba(0, 112, 244, .16), 0 4px 12px rgba(0, 112, 244, .2) !important;
  transition-duration: .08s !important;
}

/* B6. Custom Scrollbar */
body.bg-grid ::-webkit-scrollbar { width: 6px; height: 6px; }
body.bg-grid ::-webkit-scrollbar-track { background: transparent; }
body.bg-grid ::-webkit-scrollbar-thumb {
  background: rgba(0, 112, 244, .15);
  border-radius: 10px;
  transition: background .2s ease;
}
body.bg-grid ::-webkit-scrollbar-thumb:hover { background: rgba(0, 112, 244, .32); }
body.bg-grid { scrollbar-width: thin; scrollbar-color: rgba(0, 112, 244, .15) transparent; }

/* B7. Mobile Bottom Nav — Upgraded to Apple iOS Liquid Glass in Section 2 below */


/* B8. Notification Badge Pulse */
body.bg-grid .pill.bad {
  animation: knfBadgePulse 2.8s ease-in-out infinite;
}
@keyframes knfBadgePulse {
  0%, 100% { box-shadow: none; }
  50% { box-shadow: 0 0 0 3px rgba(220, 38, 38, .12); }
}

/* B9. Table Row Hover — Smooth */
body.bg-grid .table tbody tr {
  transition: background .2s ease;
}

/* B10. Input Focus — Smooth transition */
body.bg-grid input,
body.bg-grid select,
body.bg-grid textarea {
  transition: border-color .2s ease, box-shadow .25s ease, background .2s ease !important;
}

/* B11. Stat Card — Ambient glow on hover */
body.bg-grid .stat {
  position: relative;
  overflow: hidden;
}
body.bg-grid .stat::after {
  content: "";
  position: absolute;
  top: -50%;
  left: 50%;
  width: 120%;
  height: 100%;
  transform: translateX(-50%) scale(0);
  background: radial-gradient(circle, rgba(0,112,244,.06), transparent 70%);
  border-radius: 50%;
  transition: transform .35s ease;
  pointer-events: none;
}
body.bg-grid .stat:hover::after {
  transform: translateX(-50%) scale(1);
}

/* B12. Link Hover — Animated underline from left */
body.bg-grid a:not(.btn):not(.navbtn):not(.action):not([class*="brand"]):not([class*="logo"]) {
  text-decoration: none !important;
  background-image: linear-gradient(#0070F4, #0070F4);
  background-size: 0% 1.5px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size .25s ease;
}
body.bg-grid a:not(.btn):not(.navbtn):not(.action):not([class*="brand"]):not([class*="logo"]):hover {
  background-size: 100% 1.5px;
  text-decoration: none !important;
}

/* Tắt hiệu ứng nặng trên thiết bị cảm ứng / điện thoại */
@media (hover: none), (max-width: 760px) {
  body.bg-grid::before {
    animation: none !important;
    background-size: 100% 100% !important;
  }
  body.bg-grid .stat::after { display: none; }
  .knf-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ==========================================================================
   HỆ THỐNG ĐỒNG NHẤT MÀU SẮC & CHỮ TOÀN BỘ WEBSITE (UNIFIED MASTER PALETTE)
   Chuẩn hóa toàn bộ văn bản về 3 cấp độ Slate sắc nét, chuyên nghiệp:
   - Cấp 1 (Chính/Tiêu đề/Số liệu/Dữ liệu bảng): #0F172A
   - Cấp 2 (Nội dung/Nhãn/Menu/Tiêu đề bảng): #334155
   - Cấp 3 (Phụ/Muted/Gợi ý/Meta/Ngày giờ): #64748B
   ========================================================================== */

/* Chuẩn hóa font chữ hệ thống cao cấp - Hiển thị tiếng Việt 100% hoàn hảo, không lỗi dấu, sắc nét */
body, input, select, textarea, button, table, th, td, h1, h2, h3, h4, p, span, a, label {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji" !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* 1. Tiêu đề & Chữ chính cấp 1 (Slate 900) với tracking chặt chẽ chuẩn thiết kế quốc tế */
body.bg-grid h1,
body.bg-grid h2,
body.bg-grid h3,
body.bg-grid h4,
body.bg-grid .brand h1,
body.bg-grid .auth-brand h1,
body.bg-grid .card h2,
body.bg-grid .card h3,
body.bg-grid .mini-panel h2,
body.bg-grid .mini-panel h3 {
  color: #0F172A !important;
  letter-spacing: -0.022em !important;
}

body.bg-grid .userbox strong,
body.bg-grid .stat b,
body.bg-grid b,
body.bg-grid strong,
body.bg-grid .big-btn-copy strong,
body.bg-grid .table td {
  color: #0F172A !important;
}

/* Tabular numbers: Giữ số liệu, ngày giờ, bộ đếm không bị rung lắc khi thay đổi */
.stat b,
.stat-digit,
.rule-stat-value,
.period-lock-stat b,
.checkin-countdown,
.mcpx-num,
.mcpq-idx,
.today-photos-actions b,
.table td:first-child,
.pill,
#who,
#pageTitle {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum", "cv02", "cv03", "cv04", "cv11";
}

/* Cột Tên nhân sự trong bảng check-in: Giữ chữ liền mạch không rớt dòng */
.table td:nth-child(2),
.table td:nth-child(2) span.muted {
  white-space: nowrap !important;
}

/* Chữ trắng cho các nút chính & nhãn active */
body.bg-grid .btn:not(.secondary):not(.ghost):not(.outline):not(.camera-pill-btn):not(.danger),
body.bg-grid .login-submit,
body.bg-grid #btnCheckin,
body.bg-grid .navbtn.active {
  color: #FFFFFF !important;
}

/* Nút Nguy hiểm / Cảnh báo (Không hợp lệ, Xóa): Chữ đỏ sắc nét trên nền đỏ dịu, hover chuyển nền đỏ chữ trắng */
body.bg-grid .btn.danger,
.table td .actions .btn.danger {
  background: #FEF2F2 !important;
  border: 1px solid #FCA5A5 !important;
  color: #DC2626 !important;
  font-weight: 600 !important;
}
body.bg-grid .btn.danger:hover,
.table td .actions .btn.danger:hover {
  background: #DC2626 !important;
  border-color: #DC2626 !important;
  color: #FFFFFF !important;
}

/* 2. Nội dung thông thường & Nhãn cấp 2 (Slate 700) */
body.bg-grid,
body.bg-grid p,
body.bg-grid label,
body.bg-grid .field span,
body.bg-grid .lead,
body.bg-grid .table th,
body.bg-grid .navbtn:not(.active),
body.bg-grid .navgroup-toggle,
body.bg-grid .btn.secondary,
body.bg-grid .btn.ghost,
body.bg-grid input,
body.bg-grid select,
body.bg-grid textarea,
body.bg-grid .document-card .filename,
body.bg-grid .batch-results,
body.bg-grid .rule-title {
  color: #334155 !important;
}

/* 3. Chữ phụ & Gợi ý cấp 3 (Slate 500 Muted) */
body.bg-grid .muted,
body.bg-grid .small,
body.bg-grid .field-hint,
body.bg-grid .meta,
body.bg-grid time,
body.bg-grid .brand p,
body.bg-grid .auth-subtitle,
body.bg-grid .auth-kicker,
body.bg-grid .userbox span,
body.bg-grid .stat span,
body.bg-grid .dash-meta:not(.bad),
body.bg-grid .table td .muted,
body.bg-grid .table td .small,
body.bg-grid .table th .muted,
body.bg-grid input::placeholder,
body.bg-grid textarea::placeholder,
body.bg-grid .footer-note,
body.bg-grid .privacy-footer,
body.bg-grid .privacy-copy,
body.bg-grid .dash-thumb-empty,
body.bg-grid .dash-empty {
  color: #64748B !important;
}

/* 4. Liên kết (Links) chuẩn màu xanh Electric Azure đồng nhất */
body.bg-grid a:not(.btn):not(.navbtn):not(.action) {
  color: #0070F4 !important;
}
body.bg-grid a:not(.btn):not(.navbtn):not(.action):hover {
  color: #0056C7 !important;
}

/* 5. Nhãn trạng thái (Pills / Badges) Chuẩn hóa sạch sẽ, tinh tế */
body.bg-grid .pill,
body.bg-grid .badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  border-radius: 999px !important;
  padding: 4px 10px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  background: #F1F5F9 !important;
  border: 1px solid #E2E8F0 !important;
  color: #475569 !important;
}

/* Trạng thái tốt / Hợp lệ / Đủ công */
body.bg-grid .pill.good,
body.bg-grid .badge.good,
body.bg-grid .cell-ok {
  background: #ECFDF5 !important;
  border-color: #A7F3D0 !important;
  color: #065F46 !important;
}
body.bg-grid .good,
body.bg-grid .msg.good {
  color: #059669 !important;
}

/* Trạng thái cảnh báo / Nhắc nhở / Chờ duyệt */
body.bg-grid .pill.warn,
body.bg-grid .badge.warn {
  background: #FFFBEB !important;
  border-color: #FDE68A !important;
  color: #92400E !important;
}
body.bg-grid .warn,
body.bg-grid .msg.warn {
  color: #D97706 !important;
}

/* Trạng thái lỗi / Vi phạm / Không tính công */
body.bg-grid .pill.bad,
body.bg-grid .badge.bad,
body.bg-grid .cell-bad {
  background: #FEF2F2 !important;
  border-color: #FECACA !important;
  color: #991B1B !important;
}
body.bg-grid .bad,
body.bg-grid .msg.bad,
body.bg-grid .dash-meta.bad {
  color: #DC2626 !important;
}

/* Trạng thái thông tin / Tuyến / Nhóm */
body.bg-grid .pill.info,
body.bg-grid .badge.info {
  background: #F0F9FF !important;
  border-color: #BAE6FD !important;
  color: #0369A1 !important;
}

/* 6. Loại bỏ hoàn toàn nền pastel lòe loẹt, loang lổ trên bảng & danh sách */
body.bg-grid .table tr[class*="alert-row-pastel"] td,
body.bg-grid .dash-item[class*="alert-row-pastel"] {
  background: #FFFFFF !important;
}
body.bg-grid .table tr[class*="alert-row-pastel"]:hover td,
body.bg-grid .dash-item[class*="alert-row-pastel"]:hover {
  background: rgba(240, 249, 255, 0.75) !important;
}
body.bg-grid .table tr[class*="alert-row-pastel"] td:first-child {
  box-shadow: inset 3px 0 0 #0070F4 !important;
}
body.bg-grid .dash-item[class*="alert-row-pastel"] {
  border-left: 3px solid #0070F4 !important;
}

/* 7. Đồng nhất Thẻ số liệu (Stat Cards) */
body.bg-grid .stat b {
  color: #0F172A !important;
  letter-spacing: -0.02em !important;
}
body.bg-grid .stat span {
  color: #64748B !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

/* 8. Hàng Tổng cộng trong Bảng (Total Row) */
body.bg-grid .total-row td {
  background: #F8FAFC !important;
  color: #0F172A !important;
  font-weight: 700 !important;
  border-top: 2px solid #E2E8F0 !important;
}

/* 9. Đồng nhất Bảng biểu (Table Headers & Data) */
body[data-page="admin"] .table th,
body[data-page="user"] .table th {
  background: #F8FAFC !important;
  color: #475569 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;
  border-bottom: 1px solid #E2E8F0 !important;
}
body[data-page="admin"] .table td,
body[data-page="user"] .table td {
  color: #0F172A !important;
  border-bottom: 1px solid #F1F5F9 !important;
  font-size: 13.5px !important;
}

/* ==========================================================================
   10. CĂN GIỮA TUYỆT ĐỐI CÁC ICON NÚT THAO TÁC (BIG-BTN ICONS CENTERING)
   Khắc phục triệt để lỗi icon bị dồn lệch vào góc trên bên trái do CSS kế thừa
   ========================================================================== */
body.bg-grid .big-btn .big-btn-icon,
body[data-page="user"] .big-btn .big-btn-icon,
.big-btn > .big-btn-icon,
.big-btn-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  max-width: 48px !important;
  flex: 0 0 48px !important;
  margin: 0 !important;
  margin-top: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  line-height: 0 !important;
  vertical-align: middle !important;
  border-radius: 14px !important;
  overflow: hidden !important;
}

body.bg-grid .big-btn .big-btn-icon svg,
body[data-page="user"] .big-btn .big-btn-icon svg,
.big-btn .big-btn-icon svg,
.big-btn-icon svg {
  display: block !important;
  margin: auto !important;
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  min-height: 26px !important;
  max-width: 26px !important;
  max-height: 26px !important;
  flex-shrink: 0 !important;
  align-self: center !important;
  justify-self: center !important;
  transform: none !important;
}

@media (max-width: 720px) {
  body.bg-grid .big-btn .big-btn-icon,
  body[data-page="user"] .big-btn .big-btn-icon,
  .big-btn > .big-btn-icon,
  .big-btn-icon {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    flex: 0 0 44px !important;
    margin: 0 !important;
    margin-top: 0 !important;
  }
  body.bg-grid .big-btn .big-btn-icon svg,
  body[data-page="user"] .big-btn .big-btn-icon svg,
  .big-btn .big-btn-icon svg,
  .big-btn-icon svg {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    max-width: 24px !important;
    max-height: 24px !important;
  }
}

/* ==========================================================================
   11. KHỐI QUY ĐỊNH CHECK-IN TINH GỌN (COMPACT & MODERN RULE STATS)
   ========================================================================== */
#rulesBox .split {
  align-items: center;
  margin-bottom: 12px;
}
#rulesBox .split h2 {
  margin: 0;
  font-size: 1.15rem;
}
#ruleRoleBadge {
  font-size: 11.5px !important;
  font-weight: 700 !important;
  padding: 3px 10px !important;
  border-radius: 999px !important;
  letter-spacing: 0.02em;
}

#rulesBox .rule-details {
  display: block !important;
  gap: 0 !important;
}

.rule-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}

.rule-stat-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.92));
  border: 1px solid rgba(226, 232, 240, 0.85);
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.03);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.rule-stat-card:hover {
  transform: translateY(-2px);
  border-color: rgba(0, 112, 244, 0.3);
  box-shadow: 0 8px 22px rgba(0, 112, 244, 0.08);
}

.rule-stat-icon {
  width: 38px;
  height: 38px;
  min-width: 38px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.rule-stat-icon svg {
  width: 20px;
  height: 20px;
  stroke-width: 2;
  stroke: currentColor;
  fill: none;
}

.rule-icon-camera {
  background: rgba(0, 112, 244, 0.09);
  color: #0070F4;
}
.rule-icon-clock {
  background: rgba(16, 185, 129, 0.1);
  color: #059669;
}
.rule-icon-pin {
  background: rgba(245, 158, 11, 0.11);
  color: #D97706;
}

.rule-stat-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.rule-stat-label {
  font-size: 11px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748B;
  line-height: 1.2;
  margin-bottom: 3px;
  white-space: nowrap;
}
.rule-stat-value {
  font-size: 17px;
  font-weight: 750;
  color: #0F172A;
  line-height: 1.2;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.rule-stat-value small {
  font-size: 12px;
  font-weight: 600;
  color: #64748B;
  margin-left: 2px;
}

/* Banner tuyến thông báo khu vực */
#areaNotice:empty {
  display: none !important;
}

.rule-notice-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.4;
  margin-top: 4px;
}
.rule-notice-bar.bad {
  background: #FEF2F2;
  border: 1px solid #FECACA;
  color: #991B1B;
}
.rule-notice-bar.good {
  background: #F0FDF4;
  border: 1px solid #BBF7D0;
  color: #166534;
}
.rule-notice-bar.info {
  background: #F0F9FF;
  border: 1px solid #BAE6FD;
  color: #0369A1;
}

.rule-notice-text {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}
.rule-notice-svg {
  width: 17px;
  height: 17px;
  min-width: 17px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  flex-shrink: 0;
}
.rule-notice-tag {
  font-size: 11.5px;
  font-weight: 700;
  padding: 2.5px 8px;
  border-radius: 6px;
  background: rgba(220, 38, 38, 0.12);
  color: #DC2626;
  white-space: nowrap;
}
.rule-notice-bar.good .rule-notice-tag {
  background: rgba(22, 101, 52, 0.12);
  color: #166534;
}

@media (max-width: 640px) {
  .rule-stats-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
  }
  .rule-stat-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 10px 4px;
    gap: 6px;
  }
  .rule-stat-icon {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 9px;
  }
  .rule-stat-icon svg {
    width: 16px;
    height: 16px;
  }
  .rule-stat-label {
    font-size: 10px;
    letter-spacing: 0.02em;
  }
  .rule-stat-value {
    font-size: 14.5px;
  }
  .rule-stat-value small {
    display: block;
    font-size: 10px;
    margin-left: 0;
  }
  .rule-notice-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 8px 12px;
  }
  .rule-notice-tag {
    align-self: flex-start;
  }
}




/* =========================================================
   NOTIFICATION BELL & MODAL (Cập nhật Chuông thông báo & Popup)
   ========================================================= */
.btn-bell-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  min-width: 40px;
  padding: 0;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: rgba(255, 255, 255, 0.9);
  color: #9ca3af; /* Mặc định: Chuông màu xám */
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}

.btn-bell-wrap:hover {
  background: #ffffff;
  color: #6b7280;
  border-color: rgba(148, 163, 184, 0.45);
  transform: translateY(-1px);
}

.btn-bell-wrap:active {
  transform: scale(0.95);
}

.btn-bell-wrap .bell-svg {
  width: 21px;
  height: 21px;
  fill: currentColor;
  transition: transform 0.2s ease, fill 0.2s ease;
}

/* Khi có thông báo mới: Chuông biến thành màu vàng */
.btn-bell-wrap.has-unread {
  color: #eab308 !important; /* Vàng rực rỡ */
  background: rgba(254, 240, 138, 0.35) !important;
  border-color: rgba(234, 179, 8, 0.6) !important;
  box-shadow: 0 0 14px rgba(234, 179, 8, 0.4), 0 2px 6px rgba(15, 23, 42, 0.05) !important;
}

.btn-bell-wrap.has-unread:hover {
  background: rgba(254, 240, 138, 0.5) !important;
  color: #ca8a04 !important;
  border-color: #eab308 !important;
}

/* Hiệu ứng rung chuông sinh động khi có thông báo mới */
@keyframes bellShake {
  0%, 100% { transform: rotate(0deg); }
  20% { transform: rotate(14deg); }
  40% { transform: rotate(-12deg); }
  60% { transform: rotate(8deg); }
  80% { transform: rotate(-4deg); }
}

.btn-bell-wrap.has-unread .bell-svg {
  animation: bellShake 2.2s ease-in-out infinite;
  transform-origin: top center;
  filter: drop-shadow(0 1px 2px rgba(234, 179, 8, 0.4));
}

/* Số thông báo ở góc trên bên phải của chiếc chuông */
.btn-bell-wrap .bell-badge {
  position: absolute;
  top: -4px;
  right: -5px;
  min-width: 19px;
  height: 19px;
  padding: 0 4px;
  border-radius: 999px;
  background: #ef4444; /* Đỏ nổi bật */
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  line-height: 19px;
  text-align: center;
  border: 2px solid #ffffff;
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.45);
  pointer-events: none;
  font-family: inherit;
  box-sizing: content-box;
}

.btn-bell-wrap .bell-badge.hidden {
  display: none !important;
}

/* Popup Thông báo Chi Tiết */
.notification-modal .knf-modal__panel {
  max-width: 500px;
  width: 92vw;
  max-height: 82vh;
  border-radius: 20px;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  background: #ffffff;
}

.notification-modal-head {
  padding: 16px 20px;
  border-bottom: 1px solid rgba(229, 231, 235, 0.8);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #ffffff;
}

.notification-modal-title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: #111827;
  display: flex;
  align-items: center;
  gap: 8px;
}

.notification-modal-summary {
  padding: 10px 20px;
  background: #f8fafc;
  border-bottom: 1px solid rgba(229, 231, 235, 0.6);
  font-size: 13px;
  color: #64748b;
  font-weight: 500;
}

.notification-modal-body {
  padding: 16px 20px;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 120px;
  max-height: 52vh;
}

.notification-modal-foot {
  padding: 12px 20px;
  border-top: 1px solid rgba(229, 231, 235, 0.8);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  background: #f9fafb;
}

.notification-close-btn {
  background: none;
  border: none;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  color: #9ca3af;
  padding: 6px 8px;
  border-radius: 8px;
  transition: all 0.15s;
}

.notification-close-btn:hover {
  color: #111827;
  background: #f3f4f6;
}

/* Ẩn bảng thông báo tĩnh to đùng trên giao diện chính */
#notificationsBox {
  display: none !important;
}


/* =========================================================
   ICON BUTTONS & ROUND CONTROLS (Hệ thống Nút Icon Hiện Đại)
   ========================================================= */
.btn-icon-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  min-width: 38px;
  padding: 0;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: rgba(255, 255, 255, 0.9);
  color: #4b5563;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
  flex-shrink: 0;
}
.btn-icon-circle:hover {
  background: #ffffff;
  color: #111827;
  border-color: rgba(148, 163, 184, 0.45);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.08);
}
.btn-icon-circle:active {
  transform: scale(0.95);
}

.btn-logout-icon {
  color: #ef4444 !important;
  border-color: rgba(239, 68, 68, 0.2) !important;
  background: rgba(254, 242, 242, 0.8) !important;
}
.btn-logout-icon:hover {
  background: rgba(254, 242, 242, 1) !important;
  color: #dc2626 !important;
  border-color: rgba(239, 68, 68, 0.4) !important;
  transform: translateY(-1px);
}

.btn-icon-text {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  transition: all 0.18s ease;
}
.btn-icon-text svg {
  flex-shrink: 0;
}

/* Ẩn triệt để bảng thông báo to đùng và các phần ghi chú thừa */
#notificationsBox,
.knf-period-badge,
#salesScopeNote {
  display: none !important;
}


/* ==================== KNF SIDEBAR GRADIENT 2 MÀU XANH (AURORA BLUE-GREEN) ==================== */
.sidebar .navbtn,
body[data-page="admin"] .navbtn,
#adminSidebar .navbtn {
  border-radius: 12px !important;
  font-weight: 600 !important;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative !important;
}

.sidebar .navbtn:not(.active):hover,
body[data-page="admin"] .navbtn:not(.active):hover,
#adminSidebar .navbtn:not(.active):hover {
  transform: translateX(4px) !important;
  background: linear-gradient(135deg, rgba(0, 112, 244, 0.08) 0%, rgba(16, 185, 129, 0.12) 100%) !important;
  color: #0070F4 !important;
  box-shadow: 0 2px 8px rgba(0, 112, 244, 0.08) !important;
}

.sidebar .navbtn.active,
body[data-page="admin"] .navbtn.active,
#adminSidebar .navbtn.active,
body.bg-grid .navbtn.active {
  color: #ffffff !important;
  background: linear-gradient(135deg, #0070F4 0%, #00B4D8 45%, #10B981 100%) !important;
  box-shadow: 0 8px 22px rgba(0, 112, 244, 0.32), 0 2px 6px rgba(16, 185, 129, 0.22) !important;
  border: none !important;
  font-weight: 700 !important;
}

.sidebar .navbtn.active svg,
body[data-page="admin"] .navbtn.active svg,
#adminSidebar .navbtn.active svg {
  stroke: #ffffff !important;
}

/* ==========================================================================
   PHASE 2 WORLD-CLASS UPGRADE (TOPBAR, FLOATING DOCK, CAMERA HUD, TODAY STATS)
   ========================================================================== */

/* 1. Ultra Frosted Glass Topbar & Identity Pill */
body[data-page="user"] .topbar {
  position: sticky !important;
  top: 10px !important;
  z-index: 900 !important;
  padding: 10px 16px !important;
  overflow: hidden !important;
  isolation: isolate !important;
  background: rgba(244, 250, 255, 0.96) !important;
  border: 1px solid rgba(255, 255, 255, 0.98) !important;
  border-radius: 24px !important;
  box-shadow: 0 22px 54px -20px rgba(15, 23, 42, 0.42), 0 9px 24px -14px rgba(28, 130, 255, 0.42), inset 0 2px 1px rgba(255,255,255,.98), inset 0 -2px 8px rgba(65,145,225,.10) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  body[data-page="user"] .topbar {
    background: rgba(210, 234, 255, .38) !important;
    -webkit-backdrop-filter: blur(30px) saturate(215%) brightness(1.08) contrast(104%) !important;
    backdrop-filter: blur(30px) saturate(215%) brightness(1.08) contrast(104%) !important;
  }
}

body[data-page="user"] .topbar::before,
body[data-page="user"] .topbar::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
}

body[data-page="user"] .topbar::before {
  background:
    radial-gradient(150% 120% at 8% -50%, rgba(255,255,255,1) 0 34%, rgba(255,255,255,0) 62%),
    linear-gradient(112deg, rgba(255,255,255,.34), rgba(64,166,255,.11) 46%, rgba(255,255,255,.44) 64%, rgba(49,195,236,.10));
}

body[data-page="user"] .topbar::after {
  inset: 1px;
  border: 1px solid rgba(255,255,255,.64);
  box-shadow: inset 0 -3px 10px rgba(52,126,210,.10), inset 0 9px 20px rgba(255,255,255,.30);
}

body[data-page="user"] .topbar > * {
  position: relative;
  z-index: 1;
}

body[data-page="user"] .brand.user-brand {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

body[data-page="user"] .user-brand .logo img {
  height: 38px !important;
  width: auto !important;
  border-radius: 10px !important;
}

body[data-page="user"] .user-brand h1 {
  font-size: 18px !important;
  font-weight: 850 !important;
  letter-spacing: -0.025em !important;
  color: #0F172A !important;
  margin: 0 !important;
}

body[data-page="user"] .topbar .actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

body[data-page="user"] .topbar .userbox {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  line-height: 1.25 !important;
}

body[data-page="user"] .topbar .userbox strong#who {
  font-size: 13.5px !important;
  font-weight: 750 !important;
  color: #0F172A !important;
  letter-spacing: -0.01em !important;
}

body[data-page="user"] .topbar .userbox span#team {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--knf-sapphire, #0062FF) !important;
  background: rgba(0, 98, 255, 0.08) !important;
  padding: 1px 7px !important;
  border-radius: 6px !important;
  margin-top: 2px !important;
  max-width: 140px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Bell button & Logout button */
body[data-page="user"] .btn-bell-wrap {
  width: 38px !important;
  height: 38px !important;
  border-radius: 12px !important;
  background: rgba(241, 245, 249, 0.85) !important;
  border: 1px solid rgba(226, 232, 240, 0.8) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  color: #334155 !important;
  cursor: pointer !important;
}

body[data-page="user"] .btn-bell-wrap:hover {
  background: #FFFFFF !important;
  border-color: rgba(0, 98, 255, 0.3) !important;
  color: var(--knf-sapphire, #0062FF) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(0, 98, 255, 0.12) !important;
}

body[data-page="user"] .btn-bell-wrap:active {
  transform: scale(0.92) !important;
}

body[data-page="user"] .btn-bell-wrap.btn-logout-icon:hover {
  color: #E11D48 !important;
  border-color: rgba(225, 29, 72, 0.3) !important;
  box-shadow: 0 4px 12px rgba(225, 29, 72, 0.12) !important;
}

body[data-page="user"] .bell-badge {
  position: absolute !important;
  top: -3px !important;
  right: -3px !important;
  min-width: 17px !important;
  height: 17px !important;
  padding: 0 4px !important;
  border-radius: 999px !important;
  background: #E11D48 !important;
  color: #FFFFFF !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 0 0 2px #FFFFFF, 0 2px 6px rgba(225, 29, 72, 0.4) !important;
}

@media (max-width: 520px) {
  body[data-page="user"] .topbar {
    min-height: 56px !important;
    padding: 8px 10px !important;
    gap: 8px !important;
  }
  body[data-page="user"] .brand.user-brand {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    gap: 8px !important;
    margin-bottom: 0 !important;
  }
  body[data-page="user"] .user-brand .logo {
    width: 44px !important;
    height: 36px !important;
    flex: 0 0 44px !important;
  }
  body[data-page="user"] .user-brand .logo img {
    width: auto !important;
    height: 30px !important;
  }
  body[data-page="user"] .user-brand h1 {
    max-width: none !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 16px !important;
  }
  body[data-page="user"] .topbar .userbox {
    display: none !important;
  }
  body[data-page="user"] .topbar .actions {
    width: auto !important;
    flex: 0 0 auto !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
  }
}

/* ========================================================================== 
   2. LIQUID GLASS CONTROL LAYER
   Web approximation of Apple's regular Liquid Glass material. Keep the
   material on navigation and transient controls; content remains readable.
   ========================================================================== */
:root {
  --knf-liquid-fallback: rgba(248, 251, 255, .97);
  --knf-liquid-surface: rgba(205, 232, 255, .38);
  --knf-liquid-line: rgba(255, 255, 255, .96);
  --knf-liquid-ink: #334155;
  --knf-liquid-accent: #0062FF;
  --knf-liquid-ease: cubic-bezier(.22, 1, .36, 1);
  --knf-liquid-shadow: 0 28px 64px -20px rgba(15, 23, 42, .46), 0 12px 30px -16px rgba(28, 130, 255, .48), inset 0 2px 1px rgba(255, 255, 255, 1), inset 0 -3px 10px rgba(44, 127, 215, .12);
}

.mobile-bottom-nav { display: none !important; }

@media (max-width: 900px) {
  body[data-page="user"] #userBottomNav {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    bottom: max(12px, env(safe-area-inset-bottom, 12px)) !important;
    width: min(420px, calc(100% - 24px)) !important;
    min-height: 76px !important;
    margin: 0 !important;
    padding: 8px !important;
    display: grid !important;
    grid-template-columns: repeat(var(--knf-nav-count, 5), minmax(0, 1fr)) !important;
    align-items: center !important;
    gap: 4px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    isolation: isolate !important;
    border: 1px solid var(--knf-liquid-line) !important;
    border-radius: 34px !important;
    background: var(--knf-liquid-fallback) !important;
    box-shadow: var(--knf-liquid-shadow) !important;
    transform: translate3d(-50%, 0, 0) !important;
    z-index: 850 !important;
  }

  @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    body[data-page="user"] #userBottomNav {
      background: rgba(198, 231, 255, .13) !important;
      -webkit-backdrop-filter: blur(16px) saturate(185%) brightness(1.04) contrast(102%) !important;
      backdrop-filter: blur(16px) saturate(185%) brightness(1.04) contrast(102%) !important;
    }
  }

  body[data-page="user"] #userBottomNav::before,
  body[data-page="user"] #userBottomNav::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
  }

  body[data-page="user"] #userBottomNav::before {
    z-index: 0;
    background:
      radial-gradient(132% 112% at 9% -36%, rgba(255, 255, 255, .44) 0%, rgba(255, 255, 255, 0) 54%),
      radial-gradient(88% 105% at 91% 128%, rgba(26, 126, 255, .16) 0%, rgba(26, 126, 255, 0) 66%),
      linear-gradient(112deg, rgba(255,255,255,.05) 6%, rgba(255,255,255,.26) 20%, rgba(74,171,255,.06) 33%, rgba(255,255,255,.02) 48%, rgba(255,255,255,.22) 65%, rgba(48,181,235,.07) 78%, rgba(255,255,255,.04) 94%);
    background-size: 100% 100%, 100% 100%, 220% 100%;
    background-position: center, center, 0% 50%;
    mix-blend-mode: soft-light;
    animation: knfLiquidGlassFlow 8s var(--knf-liquid-ease) infinite alternate !important;
  }

  body[data-page="user"] #userBottomNav::after {
    inset: 1px;
    z-index: 0;
    border: 1px solid rgba(255, 255, 255, .56);
    box-shadow: inset 0 -4px 12px rgba(47, 126, 214, .12), inset 0 11px 24px rgba(255, 255, 255, .18), inset 4px 0 12px rgba(255,255,255,.08), inset -4px 0 12px rgba(55,152,235,.08);
  }

  body[data-page="user"] #userBottomNav .liquid-nav-indicator {
    position: absolute !important;
    top: 8px !important;
    bottom: 8px !important;
    left: 0 !important;
    width: var(--knf-nav-indicator-width, 0px) !important;
    z-index: 1 !important;
    display: block !important;
    border: 1px solid rgba(255,255,255,.96) !important;
    border-radius: 26px !important;
    opacity: 0 !important;
    pointer-events: none !important;
    background:
      radial-gradient(108% 82% at 18% -12%, rgba(255,255,255,1), rgba(255,255,255,0) 62%),
      linear-gradient(132deg, rgba(255,255,255,.70), rgba(119,194,255,.22) 48%, rgba(255,255,255,.54) 66%, rgba(54,170,235,.16)) !important;
    box-shadow:
      0 11px 25px -12px rgba(0,98,255,.66),
      0 2px 8px rgba(255,255,255,.36),
      inset 0 2px 1px rgba(255,255,255,1),
      inset 0 -4px 10px rgba(32,119,214,.15) !important;
    transform: translate3d(var(--knf-nav-indicator-x, 6px), 0, 0) scale(.96) !important;
    transform-origin: center !important;
    transition: transform .42s var(--knf-liquid-ease), width .42s var(--knf-liquid-ease), opacity .18s ease !important;
  }

  @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    body[data-page="user"] #userBottomNav .liquid-nav-indicator {
      -webkit-backdrop-filter: blur(17px) saturate(235%) brightness(1.11) !important;
      backdrop-filter: blur(17px) saturate(235%) brightness(1.11) !important;
    }
  }

  body[data-page="user"] #userBottomNav.liquid-nav-ready .liquid-nav-indicator {
    opacity: 1 !important;
    transform: translate3d(var(--knf-nav-indicator-x, 6px), 0, 0) scale(1) !important;
  }

  body[data-page="user"] #userBottomNav button {
    position: relative !important;
    z-index: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    width: 100% !important;
    min-width: 44px !important;
    height: 60px !important;
    min-height: 60px !important;
    padding: 5px 2px !important;
    border: 1px solid transparent !important;
    border-radius: 26px !important;
    background: transparent !important;
    color: var(--knf-liquid-ink) !important;
    font-size: 11px !important;
    font-weight: 650 !important;
    letter-spacing: -.012em !important;
    line-height: 1.1 !important;
    cursor: pointer !important;
    touch-action: manipulation;
    user-select: none !important;
    -webkit-tap-highlight-color: transparent !important;
    transition: color .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .22s ease, transform .22s var(--knf-liquid-ease), opacity .18s ease !important;
  }

  body[data-page="user"] #userBottomNav button[hidden] {
    display: none !important;
  }

  body[data-page="user"] #userBottomNav button span {
    display: block !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body[data-page="user"] #userBottomNav button svg {
    width: 21px !important;
    height: 21px !important;
    flex: 0 0 auto;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2 !important;
    transition: transform .22s var(--knf-liquid-ease), stroke-width .18s ease !important;
  }

  body[data-page="user"] #userBottomNav button.is-active {
    color: var(--knf-liquid-accent) !important;
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    font-weight: 750 !important;
    text-shadow: 0 1px 7px rgba(255,255,255,.92) !important;
  }

  body[data-page="user"] #userBottomNav button.is-active svg {
    transform: translateY(-1px) scale(1.06) !important;
    stroke-width: 2.25 !important;
  }

  body[data-page="user"] #userBottomNav button:active {
    opacity: .84 !important;
    transform: scale(.94) !important;
    transition-duration: .08s !important;
  }

  body[data-page="user"] #userBottomNav button[aria-busy="true"] {
    opacity: .58 !important;
    cursor: progress !important;
  }

  body[data-page="user"] #userBottomNav button:focus-visible {
    outline: 3px solid rgba(0, 98, 255, .30) !important;
    outline-offset: -2px !important;
  }

  body[data-page="user"] .page {
    padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px)) !important;
  }

  html.power-save body[data-page="user"] #userBottomNav button {
    transition: color .16s ease, background-color .16s ease, transform .16s var(--knf-liquid-ease), opacity .16s ease !important;
  }
}

@keyframes knfLiquidGlassFlow {
  from { background-position: center, center, 0% 50%; }
  to { background-position: center, center, 100% 50%; }
}

body[data-page="user"] .user-view-hidden { display: none !important; }

body[data-page="user"] .account-overview {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 14px 0 18px;
  padding: 13px 14px;
  border: 1px solid rgba(148,163,184,.24);
  border-radius: 17px;
  background: rgba(248,250,252,.78);
}

body[data-page="user"] .account-overview__avatar {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: #0062FF;
  background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(0,98,255,.11));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 8px 18px -12px rgba(0,98,255,.6);
}

body[data-page="user"] .account-overview__avatar svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.9; }
body[data-page="user"] .account-overview__copy { min-width: 0; display: grid; gap: 3px; }
body[data-page="user"] .account-overview__copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #0F172A; }
body[data-page="user"] .account-overview__copy span { color: #64748B; font-size: 12.5px; }
body[data-page="user"] .account-security-title { margin: 0 0 10px; color: #334155; font-size: 14px; }

@media (max-width: 374px) {
  body[data-page="user"] #userBottomNav {
    width: calc(100% - 16px) !important;
    gap: 2px !important;
    padding-inline: 4px !important;
  }
  body[data-page="user"] #userBottomNav button {
    min-width: 0 !important;
    font-size: 10px !important;
  }
}

@media (max-width: 340px) {
  body[data-page="user"] #userBottomNav button {
    font-size: 9px !important;
    letter-spacing: -.025em !important;
  }
}

@media (max-width: 900px) and (prefers-color-scheme: dark) {
  body.dark-mode #userBottomNav,
  html.dark body[data-page="user"] #userBottomNav {
    --knf-liquid-fallback: rgba(24, 32, 48, .97);
    --knf-liquid-surface: rgba(22, 30, 45, .72);
    --knf-liquid-line: rgba(255, 255, 255, .18);
    --knf-liquid-ink: #CBD5E1;
    --knf-liquid-shadow: 0 18px 46px -14px rgba(0, 0, 0, .72), inset 0 1px 0 rgba(255, 255, 255, .16);
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-page="user"] #userBottomNav::before {
    animation: none !important;
  }
  body[data-page="user"] #userBottomNav button,
  body[data-page="user"] #userBottomNav button svg,
  body[data-page="user"] #userBottomNav .liquid-nav-indicator {
    transition: none !important;
  }
}

@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  body[data-page="user"] #userBottomNav {
    background: #FFFFFF !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border-color: #94A3B8 !important;
  }
  body[data-page="user"] #userBottomNav .liquid-nav-indicator {
    background: #EAF2FF !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

@media (forced-colors: active) {
  body[data-page="user"] #userBottomNav,
  body[data-page="user"] #userBottomNav button.is-active {
    background: Canvas !important;
    color: CanvasText !important;
    border: 1px solid CanvasText !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  body[data-page="user"] #userBottomNav .liquid-nav-indicator { display: none !important; }
}



/* 3. Nâng cấp 4 Thẻ Chỉ số Thống Kê (#todayBox #todayStats) */
body[data-page="user"] #todayBox #todayStats .stat {
  position: relative !important;
  overflow: hidden !important;
  padding: 12px 14px !important;
  border-radius: 16px !important;
  background: #FFFFFF !important;
  border: 1px solid rgba(226, 232, 240, 0.85) !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.03) !important;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease !important;
}

body[data-page="user"] #todayBox #todayStats .stat:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(0, 98, 255, 0.06) !important;
}

/* Hairline Color Accents trên đỉnh mỗi thẻ */
body[data-page="user"] #todayBox #todayStats .stat::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3.5px !important;
  border-radius: 16px 16px 0 0 !important;
}

body[data-page="user"] #todayBox #todayStats .stat:nth-child(1)::before {
  background: var(--knf-sapphire, #0062FF) !important;
}
body[data-page="user"] #todayBox #todayStats .stat:nth-child(2)::before {
  background: var(--knf-emerald, #059669) !important;
}
body[data-page="user"] #todayBox #todayStats .stat:nth-child(3)::before {
  background: #F59E0B !important;
}
body[data-page="user"] #todayBox #todayStats .stat:nth-child(4)::before {
  background: #7C3AED !important;
}

body[data-page="user"] #todayBox #todayStats .stat .muted {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #64748B !important;
  text-transform: uppercase !important;
  letter-spacing: 0.035em !important;
}

body[data-page="user"] #todayBox #todayStats .stat b {
  font-size: 19px !important;
  font-weight: 850 !important;
  color: #0F172A !important;
  letter-spacing: -0.02em !important;
  font-variant-numeric: tabular-nums !important;
}

/* 4. Trải nghiệm Camera & Nút Shutter Apple Pro (#checkinPanel) */
body[data-page="user"] #checkinPanel {
  border-radius: 26px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.95) !important;
  background: #0B1120 !important;
  color: #F8FAFC !important;
  box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.35) !important;
}

body[data-page="user"] #checkinPanel h2 {
  color: #FFFFFF !important;
  font-weight: 800 !important;
}

body[data-page="user"] #checkinPanel .muted {
  color: #94A3B8 !important;
}

body[data-page="user"] #checkinPanel .camera-close-btn {
  background: rgba(255, 255, 255, 0.15) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #FFFFFF !important;
  transition: all 0.18s ease !important;
}

body[data-page="user"] #checkinPanel .camera-close-btn:hover {
  background: rgba(255, 255, 255, 0.3) !important;
  transform: rotate(90deg) !important;
}

/* Khung ngắm Viewfinder bo góc & hiệu ứng ống kính */
body[data-page="user"] .video-box.iphone-preview {
  border-radius: 22px !important;
  overflow: hidden !important;
  border: 2px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.6) !important;
  position: relative !important;
  background: #000000 !important;
}

body[data-page="user"] .video-box.iphone-preview video {
  border-radius: 20px !important;
}

/* Nút Shutter Apple Pro 2 vòng đồng tâm */
body[data-page="user"] .shutter-btn {
  width: 78px !important;
  height: 78px !important;
  border-radius: 999px !important;
  border: 4px solid rgba(255, 255, 255, 0.9) !important;
  background: #FFFFFF !important;
  color: #0F172A !important;
  font-size: 13.5px !important;
  font-weight: 850 !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35), inset 0 0 0 4px #0F172A !important;
  cursor: pointer !important;
  justify-self: center !important;
  padding: 0 !important;
  transition: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.15s ease !important;
}

body[data-page="user"] .shutter-btn:active {
  transform: scale(0.91) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25), inset 0 0 0 3px #0F172A !important;
}

body[data-page="user"] .camera-pill-btn {
  padding: 10px 18px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.12) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #FFFFFF !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  transition: all 0.18s ease !important;
}

body[data-page="user"] .camera-pill-btn:hover {
  background: rgba(255, 255, 255, 0.24) !important;
  transform: translateY(-1px) !important;
}

/* Toast Message Thông Báo GPS / Trạng Thái */
body[data-page="user"] #checkinPanel .msg {
  border-radius: 14px !important;
  padding: 10px 16px !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  text-align: center !important;
  margin-top: 10px !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #E2E8F0 !important;
}

body[data-page="user"] #checkinPanel .msg.good {
  background: rgba(5, 150, 105, 0.2) !important;
  border-color: rgba(5, 150, 105, 0.4) !important;
  color: #34D399 !important;
}

body[data-page="user"] #checkinPanel .msg.bad {
  background: rgba(225, 29, 72, 0.2) !important;
  border-color: rgba(225, 29, 72, 0.4) !important;
  color: #FDA4AF !important;
}

/* 5. Chuẩn Hóa Hệ Thống Modal & Hộp Thoại (Floating Dialogs) */
.knf-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
}

.knf-modal.hidden {
  display: none !important;
}

.knf-modal__backdrop {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(15, 23, 42, 0.5) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  animation: knfBackdropFadeIn 0.22s ease forwards !important;
}

.knf-modal__panel {
  position: relative !important;
  z-index: 1 !important;
  border-radius: 24px !important;
  border: 1px solid rgba(255, 255, 255, 0.95) !important;
  background: rgba(255, 255, 255, 0.96) !important;
  box-shadow: 0 24px 60px -12px rgba(15, 23, 42, 0.25), 0 0 0 1px rgba(15, 23, 42, 0.05) !important;
  max-width: 480px !important;
  width: 100% !important;
  padding: 24px !important;
  animation: knfModalScaleIn 0.26s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

@keyframes knfBackdropFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes knfModalScaleIn {
  from { opacity: 0; transform: scale(0.94) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

/* ==========================================================================
   PHASE 3 & 4: TOÀN BỘ WEBSITE WORLD-CLASS CHO TẤT CẢ CÁC TRANG & MODULE
   (LOGIN, SAAS LANDING, ADMIN, EMPLOYEE, ONBOARDING, SIGNUP, OWNER, PLATFORM)
   ========================================================================== */

/* --- 1. MÀN HÌNH ĐĂNG NHẬP & XÁC THỰC (.auth-screen / .login-card / .owner-login-card) --- */
body.auth-screen,
body[data-page="login"],
body.owner-login-page,
body.platform-login-page {
  min-height: 100vh !important;
  background: 
    radial-gradient(ellipse at 15% 15%, rgba(0, 98, 255, 0.16) 0%, transparent 45%),
    radial-gradient(ellipse at 85% 85%, rgba(5, 150, 105, 0.14) 0%, transparent 45%),
    radial-gradient(ellipse at 50% 0%, rgba(99, 102, 241, 0.10) 0%, transparent 50%),
    linear-gradient(180deg, #F0F4F9 0%, #E8EEF5 100%) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif !important;
  position: relative !important;
  overflow-x: hidden !important;
}

body.auth-screen .orb,
body[data-page="login"] .orb {
  display: block !important;
  position: fixed !important;
  border-radius: 50% !important;
  filter: blur(80px) !important;
  opacity: 0.55 !important;
  pointer-events: none !important;
  z-index: 0 !important;
}
body.auth-screen .orb.one {
  width: 340px !important;
  height: 340px !important;
  top: 4% !important;
  left: 8% !important;
  background: radial-gradient(circle, #0062FF, #0284C7) !important;
}
body.auth-screen .orb.two {
  width: 380px !important;
  height: 380px !important;
  bottom: 4% !important;
  right: 8% !important;
  background: radial-gradient(circle, #059669, #10B981) !important;
}

body.auth-screen .page.auth-page,
.owner-login-shell {
  position: relative !important;
  z-index: 1 !important;
  padding: 32px 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 480px !important;
}

body.auth-screen .login-card,
.owner-login-card {
  max-width: 440px !important;
  width: 100% !important;
  border-radius: 28px !important;
  padding: 38px 32px !important;
  background: rgba(255, 255, 255, 0.94) !important;
  backdrop-filter: blur(30px) saturate(1.8) !important;
  -webkit-backdrop-filter: blur(30px) saturate(1.8) !important;
  border: 1px solid rgba(255, 255, 255, 0.95) !important;
  box-shadow: 
    0 24px 60px -12px rgba(0, 98, 255, 0.18),
    0 8px 24px -4px rgba(15, 23, 42, 0.08),
    0 0 0 1px rgba(0, 98, 255, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

body.auth-screen .auth-brand,
.owner-login-brand {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  margin-bottom: 26px !important;
  gap: 10px !important;
}

body.auth-screen .auth-brand .logo,
.owner-brand {
  width: 72px !important;
  height: 52px !important;
  border-radius: 18px !important;
  background: #FFFFFF !important;
  border: 1.5px solid rgba(0, 98, 255, 0.16) !important;
  box-shadow: 0 8px 24px rgba(0, 98, 255, 0.15) !important;
  display: grid !important;
  place-items: center !important;
  padding: 6px !important;
}

body.auth-screen .auth-brand .logo img {
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
}

body.auth-screen .auth-kicker {
  font-size: 11px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  color: #0062FF !important;
  background: rgba(0, 98, 255, 0.08) !important;
  padding: 4px 12px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(0, 98, 255, 0.18) !important;
  margin: 0 !important;
  display: inline-block !important;
}

body.auth-screen .auth-brand h1,
.owner-login-card h2 {
  font-size: 26px !important;
  font-weight: 850 !important;
  letter-spacing: -0.04em !important;
  color: #0F172A !important;
  margin: 2px 0 0 !important;
}

body.auth-screen .auth-subtitle {
  font-size: 13.5px !important;
  color: #64748B !important;
  margin: 0 !important;
  font-weight: 500 !important;
}

body.auth-screen label,
.owner-login-card label {
  font-size: 12px !important;
  font-weight: 750 !important;
  color: #1E293B !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  margin: 14px 0 6px !important;
  display: block !important;
}

body.auth-screen input,
.owner-login-card input {
  height: 50px !important;
  border-radius: 14px !important;
  border: 1.5px solid #CBD5E1 !important;
  background: #FFFFFF !important;
  padding: 0 16px !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: #0F172A !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

body.auth-screen input:focus,
.owner-login-card input:focus {
  border-color: #0062FF !important;
  background: #FFFFFF !important;
  box-shadow: 0 0 0 4px rgba(0, 98, 255, 0.16) !important;
  outline: none !important;
}

body.auth-screen .password-field,
.owner-password-wrap {
  position: relative !important;
}

body.auth-screen .password-toggle,
.owner-password-wrap button {
  position: absolute !important;
  right: 8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  min-height: 34px !important;
  border: 1px solid rgba(0, 98, 255, 0.16) !important;
  border-radius: 10px !important;
  background: rgba(0, 98, 255, 0.08) !important;
  color: #0062FF !important;
  font-size: 12.5px !important;
  font-weight: 750 !important;
  padding: 6px 12px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

body.auth-screen .password-toggle:hover,
.owner-password-wrap button:hover {
  background: rgba(0, 98, 255, 0.16) !important;
}

body.auth-screen .login-submit,
body.auth-screen .btn.primary,
.owner-primary-button {
  margin-top: 22px !important;
  height: 52px !important;
  min-height: 52px !important;
  border-radius: 16px !important;
  background: linear-gradient(135deg, #0062FF 0%, #0284C7 50%, #059669 100%) !important;
  background-size: 200% auto !important;
  border: 0 !important;
  color: #FFFFFF !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
  box-shadow: 0 10px 28px -4px rgba(0, 98, 255, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
  cursor: pointer !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
}

body.auth-screen .login-submit:hover,
.owner-primary-button:hover {
  transform: translateY(-2px) !important;
  background-position: right center !important;
  box-shadow: 0 16px 36px -4px rgba(0, 98, 255, 0.52), inset 0 1px 0 rgba(255, 255, 255, 0.45) !important;
}

body.auth-screen .login-submit:active,
.owner-primary-button:active {
  transform: translateY(1px) scale(0.98) !important;
}

body.auth-screen .forgot-toggle,
body.auth-screen .btn.secondary {
  margin-top: 12px !important;
  height: 44px !important;
  min-height: 44px !important;
  border-radius: 14px !important;
  background: rgba(241, 245, 249, 0.9) !important;
  border: 1px solid rgba(203, 213, 225, 0.8) !important;
  color: #475569 !important;
  font-size: 14px !important;
  font-weight: 650 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

body.auth-screen .forgot-toggle:hover {
  background: #E2E8F0 !important;
  color: #1E293B !important;
}

body.auth-screen .privacy-footer {
  position: relative !important;
  z-index: 1 !important;
  margin: 0 auto 24px !important;
  padding: 10px 18px !important;
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(226, 232, 240, 0.9) !important;
  border-radius: 999px !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05) !important;
  font-size: 12.5px !important;
  color: #64748B !important;
  max-width: 440px !important;
}

/* --- 2. TRANG SAAS LANDING (index.html) --- */
.topnav {
  background: rgba(255, 255, 255, 0.88) !important;
  backdrop-filter: blur(24px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.4) !important;
  border-bottom: 1px solid rgba(226, 232, 240, 0.8) !important;
}

.brand-mark {
  background: linear-gradient(135deg, var(--knf-sapphire, #0062FF) 0%, var(--knf-emerald, #059669) 100%) !important;
  box-shadow: 0 6px 18px rgba(0, 98, 255, 0.3) !important;
}

.hero h1 {
  letter-spacing: -0.045em !important;
  background: linear-gradient(135deg, #0F172A 30%, #0062FF 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.hero-card {
  border: 1px solid rgba(255, 255, 255, 0.95) !important;
  border-radius: 30px !important;
  background: rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: blur(24px) saturate(1.3) !important;
  box-shadow: 0 24px 64px -12px rgba(0, 98, 255, 0.16), 0 0 0 1px rgba(15, 23, 42, 0.04) !important;
}

.btn-primary {
  background: linear-gradient(135deg, var(--knf-sapphire, #0062FF) 0%, #0284C7 60%, var(--knf-emerald, #059669) 100%) !important;
  border-radius: 14px !important;
  font-weight: 750 !important;
  box-shadow: 0 10px 24px -4px rgba(0, 98, 255, 0.35) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.btn-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 16px 32px -4px rgba(0, 98, 255, 0.45) !important;
}

.feature-card, .price-card {
  border-radius: 24px !important;
  border: 1px solid rgba(226, 232, 240, 0.8) !important;
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(16px) !important;
  transition: all 0.24s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.feature-card:hover, .price-card:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(0, 98, 255, 0.3) !important;
  box-shadow: 0 18px 40px -6px rgba(0, 98, 255, 0.1) !important;
}

.price-card.recommended {
  border: 2px solid var(--knf-sapphire, #0062FF) !important;
  box-shadow: 0 16px 40px -4px rgba(0, 98, 255, 0.16) !important;
}

/* --- 3. TRANG QUẢN TRỊ ADMIN (admin/index.html) --- */
body[data-page="admin"] .topbar {
  border-radius: 20px !important;
  padding: 10px 18px !important;
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(28px) saturate(1.4) !important;
  box-shadow: 0 10px 30px -4px rgba(0, 98, 255, 0.06), 0 0 0 1px rgba(15, 23, 42, 0.04) !important;
}

body[data-page="admin"] .table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border-radius: 16px !important;
  overflow: hidden !important;
}

body[data-page="admin"] .table th {
  background: #F1F5F9 !important;
  font-size: 11.5px !important;
  font-weight: 750 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  color: #475569 !important;
  padding: 12px 14px !important;
}

body[data-page="admin"] .table td {
  padding: 12px 14px !important;
  border-bottom: 1px solid rgba(226, 232, 240, 0.7) !important;
  font-variant-numeric: tabular-nums !important;
}

body[data-page="admin"] .table tbody tr:hover td {
  background: rgba(0, 98, 255, 0.03) !important;
}

/* --- 4. TRANG VĂN BẢN - GIẤY TỜ (documents.html) --- */
body:has(#dropzone), body:has(#uploadForm) {
  background: #F8FAFC !important;
}

.dropzone {
  border: 2px dashed rgba(0, 98, 255, 0.35) !important;
  border-radius: 20px !important;
  background: rgba(0, 98, 255, 0.02) !important;
  padding: 32px 20px !important;
  transition: all 0.2s ease !important;
}

.dropzone:hover {
  border-color: var(--knf-sapphire, #0062FF) !important;
  background: rgba(0, 98, 255, 0.05) !important;
}

.folder-art {
  border-radius: 16px !important;
}

/* --- 5. TRANG NHÂN VIÊN (employee.html) --- */
.employee-shell {
  min-height: 100vh !important;
  background: #F4F7FB !important;
  padding-bottom: 90px !important;
}

.employee-head {
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid rgba(226, 232, 240, 0.8) !important;
  padding: 14px 20px !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.03) !important;
}

.checkin-card {
  background: linear-gradient(135deg, #0062FF 0%, #0284C7 60%, #059669 100%) !important;
  border-radius: 28px !important;
  padding: 28px !important;
  box-shadow: 0 20px 50px -10px rgba(0, 98, 255, 0.35) !important;
  color: #FFFFFF !important;
}

.checkin-card h1 {
  font-size: 30px !important;
  font-weight: 850 !important;
  letter-spacing: -0.03em !important;
}

.checkin-button {
  width: 100% !important;
  min-height: 60px !important;
  border: 0 !important;
  border-radius: 18px !important;
  background: #FFFFFF !important;
  color: #0062FF !important;
  font-size: 18px !important;
  font-weight: 850 !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12) !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.checkin-button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.18) !important;
}

.employee-panel {
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(226, 232, 240, 0.8) !important;
  border-radius: 22px !important;
  padding: 20px !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04) !important;
  margin-top: 16px !important;
}

.bottom-nav {
  background: rgba(255, 255, 255, 0.94) !important;
  backdrop-filter: blur(24px) saturate(1.4) !important;
  border-top: 1px solid rgba(226, 232, 240, 0.8) !important;
  box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.05) !important;
}

.bottom-link.active {
  color: #0062FF !important;
  font-weight: 800 !important;
}

/* --- 6. TRANG ONBOARDING & SIGNUP (onboarding.html, signup.html) --- */
.wizard-steps {
  background: #FFFFFF !important;
  border: 1px solid rgba(226, 232, 240, 0.9) !important;
  border-radius: 22px !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04) !important;
}

.wizard-step.active {
  background: rgba(0, 98, 255, 0.08) !important;
  color: #0062FF !important;
  font-weight: 800 !important;
}

.wizard-panel {
  background: #FFFFFF !important;
  border: 1px solid rgba(226, 232, 240, 0.9) !important;
  border-radius: 24px !important;
  box-shadow: 0 12px 36px rgba(15, 23, 42, 0.05) !important;
  padding: 32px !important;
}

.progress-bar {
  background: linear-gradient(90deg, #0062FF, #059669) !important;
  border-radius: 999px !important;
}

/* --- 7. OWNER & PLATFORM PORTALS (owner/, platform/) --- */
.owner-app-page, .platform-app-page {
  background: #0B132B !important;
  color: #F1F5F9 !important;
}

.owner-sidebar, .platform-sidebar {
  background: #111B38 !important;
  border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.owner-topbar, .platform-topbar {
  background: rgba(17, 27, 56, 0.92) !important;
  backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.owner-panel, .platform-panel {
  background: rgba(17, 27, 56, 0.8) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 20px !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.25) !important;
}

/* User tab views must beat legacy display:grid/display:flex declarations. */
body[data-page="user"] #todayBox.user-view-hidden,
body[data-page="user"] #home.user-view-hidden,
body[data-page="user"] #rulesBox.user-view-hidden,
body[data-page="user"] #restrictedMapCard.user-view-hidden {
  display: none !important;
}