@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ===== CSS Variables ===== */

:root {
  /* Color Palette - Pastel Blue Theme */
  --bg-primary: #E8F4FD; /* Trở lại nền sáng xanh pastel dịu nhẹ */
  --bg-secondary: #D4ECFB;
  --bg-card: rgba(255, 255, 255, 0.92); /* Kính mờ trắng sáng cực kỳ sang trọng */
  --bg-card-hover: rgba(248, 251, 255, 0.97);
  --bg-sidebar: #BEE3F8; /* Xanh dương pastel đậm đà hơn để tách biệt rõ nét với nền web */
  --bg-sidebar-hover: #90CDF4; /* Hover xanh pastel đậm sắc nét */
  --bg-sidebar-active: #4299E1; /* Active xanh dương pastel nổi bật */
  
  /* Text Colors */
  --text-primary: #1A202C;
  --text-secondary: #4A5568;
  --text-tertiary: #718096;
  --text-light: #A0AEC0;
  --text-white: #FFFFFF;
  --text-sidebar: #1A365D; /* Chuyển sang màu xanh navy đậm để có tương phản tốt trên nền pastel */
  --text-sidebar-active: #0F2440; /* Đậm đà tối đa cho trạng thái active */
  
  /* Accent Colors */
  --accent-blue: #3182CE;
  --accent-blue-light: #63B3ED;
  --accent-blue-dark: #1A365D;
  --accent-indigo: #5A67D8;
  
  /* Status Colors */
  --positive: #38A169;
  --positive-bg: #F0FFF4;
  --positive-light: #C6F6D5;
  --negative: #E53E3E;
  --negative-bg: #FFF5F5;
  --negative-light: #FED7D7;
  --neutral: #718096;
  --neutral-bg: #F7FAFC;
  
  /* Borders & Shadows */
  --border-color: #E2E8F0;
  --border-light: #EDF2F7;

  /* Chart system — tinh tế, tối giản */
  --chart-grid: rgba(15, 23, 42, 0.06);   /* lưới ngang mảnh, mờ */
  --chart-axis: #94A3B8;                   /* số/chữ trục mờ tinh tế */
  --chart-axis-strong: #64748B;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.08), 0 4px 10px rgba(0, 0, 0, 0.04);
  --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.1);
  
  /* Spacing */
  --sidebar-width: 182px;
  --sidebar-collapsed: 72px;
  --header-height: 70px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  
  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s ease;
  --transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== Reset & Base ===== */

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Chặn cuộn ngang bằng max-width thay vì overflow (overflow trên tổ tiên sẽ
     phá backdrop-filter của sticky header & ô giao dịch trên Chrome/Edge/Firefox). */
  max-width: 100vw;
}

/* ===== Layout ===== */

.app-layout {
  display: flex;
  min-height: 100vh;
}

.main-content {
  flex: 1;
  margin-left: var(--sidebar-width);
  padding: 24px 32px;
  min-height: 100vh;
  transition: margin-left var(--transition-normal);
}

.main-content h3 {
  color: var(--text-tertiary);
  text-shadow: none;
}

.pagination-controls span {
  color: var(--text-secondary) !important;
}

/* ===== Sidebar ===== */

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--sidebar-width);
  height: 100vh; /* fallback cho trình duyệt cũ */
  height: 100dvh; /* khớp ĐÚNG chiều cao màn hình thấy được (trừ thanh địa chỉ mobile) */
  /* Nền bán trong + làm mờ (blur) giống thanh tiêu đề */
  background: linear-gradient(180deg, rgba(190, 227, 248, 0.72) 0%, rgba(144, 205, 244, 0.72) 100%);
  backdrop-filter: var(--bf-14, blur(14px)) saturate(120%);
  -webkit-backdrop-filter: var(--bf-14, blur(14px)) saturate(120%);
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  z-index: 100;
  transition: all var(--transition-normal);
  overflow: hidden; /* khối tổng KHÔNG cuộn — chỉ phần nav giữa cuộn (cố định top & bottom) */
  border-right: 1px solid rgba(255, 255, 255, 0.4);
}

/* Tay kéo chỉnh chiều rộng sidebar — kéo ngang để đổi --sidebar-width
   (sidebar + .main-content dịch cùng nhau). Chỉ desktop, khi menu mở rộng. */

.sidebar-resize-handle {
  position: fixed;
  top: 0;
  left: var(--sidebar-width);
  width: 7px;
  height: 100vh;
  margin-left: -3px;
  cursor: col-resize;
  z-index: 101;
  background: transparent;
}

.sidebar-resize-handle::after {
  content: '';
  position: absolute;
  inset: 0 2px;
  border-radius: 2px;
  background: transparent;
  transition: background var(--transition-fast);
}

.sidebar-resize-handle:hover::after,
.sidebar-resize-handle.dragging::after {
  background: rgba(49, 130, 206, 0.5);
}

body.sidebar-resizing {
  cursor: col-resize;
  user-select: none;
}

body.sidebar-resizing .sidebar,
body.sidebar-resizing .main-content {
  transition: none !important;
}

@media (max-width: 768px) {
  .sidebar-resize-handle { display: none; }
}

.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  margin-bottom: 32px;
  flex-shrink: 0; /* cố định phần đầu: logo + tên + nút thu gọn/mở rộng */
}

.sidebar-logo-icon {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-indigo) 100%);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  font-size: 18px;
  flex-shrink: 0;
}

.sidebar-logo-text {
  color: var(--text-sidebar-active);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.3px;
}

.sidebar-logo-subtitle {
  color: var(--text-sidebar);
  font-size: 11px;
  font-weight: 400;
  opacity: 0.7;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 auto;
  min-height: 0;    /* cho phép co lại trong flex column để cuộn */
  overflow-y: auto; /* CHỈ phần điều hướng giữa được cuộn */
}

/* Mỗi mục/nhóm giữ NGUYÊN chiều cao, không bị bóp hẹp khi xổ hết menu (tràn thì
   cuộn thay vì co). Cần vì .nav-item có overflow:hidden → mặc định cho phép co. */

.sidebar-nav > * {
  flex-shrink: 0;
}

.sidebar-section-title {
  color: var(--text-sidebar);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 16px 12px 8px;
  opacity: 0.5;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  color: var(--text-sidebar);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  position: relative;
  overflow: hidden;
  transition: all var(--transition-fast);
}

.nav-item > * {
  position: relative;
  z-index: 3;
}

.nav-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: radial-gradient(
    100px circle at var(--mouse-x, 0px) var(--mouse-y, 0px),
    rgba(66, 153, 225, 0.18),
    transparent 65%
  );
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.nav-item::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: radial-gradient(
    80px circle at var(--mouse-x, 0px) var(--mouse-y, 0px),
    var(--accent-blue-active, #4299E1),
    transparent 70%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.nav-item:hover {
  background: var(--bg-sidebar-hover);
  color: var(--text-sidebar-active);
}

.nav-item:hover::before, .nav-item:hover::after {
  opacity: 1;
}

.nav-item.active {
  background: var(--bg-sidebar-active);
  color: var(--text-sidebar-active);
  font-weight: 600;
}

.nav-item svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* ===== Header ===== */

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 28px;
}

.page-header h1 {
  font-size: 26px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.5px;
  text-shadow: none;
}

.page-header-subtitle {
  font-size: 14px;
  color: var(--text-sidebar);
  margin-top: 4px;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.header-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-indigo) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
  font-size: 14px;
}

/* ===== Cards ===== */

.card {
  background: var(--bg-card);
  border-radius: var(--radius-md);
  padding: 24px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-light);
  transition: all var(--transition-normal);
  backdrop-filter: var(--bf-12, blur(12px));
  -webkit-backdrop-filter: var(--bf-12, blur(12px));
}

.card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.card.interactive {
  position: relative;
  overflow: hidden;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal), background var(--transition-normal);
}

.card.interactive > * {
  position: relative;
  z-index: 3;
}

/* Mouse-tracking background glow */

.card.interactive::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: radial-gradient(
    250px circle at var(--mouse-x, 0px) var(--mouse-y, 0px),
    rgba(49, 130, 206, 0.14),
    transparent 65%
  );
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease;
}

/* Mouse-tracking border glow mask */

.card.interactive::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: radial-gradient(
    180px circle at var(--mouse-x, 0px) var(--mouse-y, 0px),
    var(--accent-blue-light),
    transparent 70%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease;
}

.card.interactive:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg), 0 12px 36px rgba(49, 130, 206, 0.22);
  background: var(--bg-card-hover);
}

.card.interactive:hover::before,
.card.interactive:hover::after {
  opacity: 1;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.card-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 8px 0;
  letter-spacing: -0.5px;
}

.card-change {
  font-size: 14px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 20px;
}

.card-change.positive {
  color: var(--positive);
  background: var(--positive-bg);
}

.card-change.negative {
  color: var(--negative);
  background: var(--negative-bg);
}

.card-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.card-icon.blue {
  background: #EBF5FF;
  color: var(--accent-blue);
}

.card-icon.green {
  background: var(--positive-bg);
  color: var(--positive);
}

.card-icon.red {
  background: var(--negative-bg);
  color: var(--negative);
}

.card-icon.purple {
  background: #F0EBFF;
  color: var(--accent-indigo);
}

/* ===== KPI Grid ===== */

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

/* Thu gọn chiều cao các thẻ KPI ở Trang tổng quan */

.kpi-grid > .card {
  padding: 14px 18px;
}

.kpi-grid > .card .card-header {
  margin-bottom: 6px;
}

.kpi-grid > .card .card-value {
  font-size: 22px;
  margin: 2px 0;
}

.kpi-grid > .card .card-change {
  font-size: 12px;
  padding: 2px 8px;
}

.kpi-grid > .card .card-icon {
  width: 36px;
  height: 36px;
}

/* Chú thích 2 dòng (Cổ phiếu / Tiền mặt) ở thẻ Tổng tài sản — font nhỏ để không tăng chiều cao */

.card-breakdown {
  display: inline-flex;
  flex-direction: column;
  width: fit-content;
  max-width: 100%;
  gap: 1px;
  font-size: 10.5px;
  line-height: 1.2;
  margin-top: 1px;
  /* Tông xanh + nền pill đồng bộ với chú thích các thẻ KPI khác (vd Lãi/lỗ tạm tính) */
  color: var(--positive);
  background: var(--positive-bg);
  padding: 4px 10px;
  border-radius: 12px;
}

.card-breakdown span {
  color: var(--positive);
  opacity: 0.8;
}

.card-breakdown strong {
  color: var(--positive);
  font-weight: 700;
}

.kpi-grid .card {
  padding: 14px 20px;
}

.kpi-grid .card-value {
  font-size: 24px;
  margin: 4px 0;
}

/* ===== Charts Grid ===== */

.charts-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-bottom: 24px;
}

.charts-grid-equal {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 24px;
}

.chart-container {
  width: 100%;
  height: 350px;
}

/* ===== Tables ===== */

.table-container {
  overflow-x: auto;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table th {
  text-align: left;
  padding: 7px 16px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 2px solid var(--border-color);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: color var(--transition-fast);
}

.data-table th:hover {
  color: var(--accent-blue);
}

.data-table td {
  padding: 8px 16px;
  font-size: 14px;
  border-bottom: 1px solid var(--border-light);
  white-space: nowrap;
}

.data-table tbody tr {
  transition: background var(--transition-fast);
}

/* Mục Danh mục (Thị trường): thu gọn chiều cao tiêu đề & các dòng */

.watchlist-compact .card-header {
  margin-bottom: 6px;
}

.watchlist-compact .data-table th {
  padding-top: 7px;
  padding-bottom: 7px;
}

.watchlist-compact .data-table td {
  padding-top: 7px;
  padding-bottom: 7px;
}

.watchlist-compact .table-container {
  margin-top: 8px !important;
}

.data-table tbody tr:hover {
  background: var(--bg-card-hover);
}

.data-table .ticker {
  font-weight: 700;
  color: var(--accent-blue-dark);
}

.data-table .stock-name {
  font-size: 12px;
  color: var(--text-tertiary);
}

.data-table .positive { color: var(--positive); font-weight: 600; }

.data-table .negative { color: var(--negative); font-weight: 600; }

/* ===== Buttons ===== */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  border: none;
  outline: none;
  position: relative;
  overflow: hidden;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}

.btn > * {
  position: relative;
  z-index: 3;
}

.btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: radial-gradient(
    100px circle at var(--mouse-x, 0px) var(--mouse-y, 0px),
    rgba(255, 255, 255, 0.22),
    transparent 65%
  );
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.btn::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: radial-gradient(
    80px circle at var(--mouse-x, 0px) var(--mouse-y, 0px),
    rgba(255, 255, 255, 0.6),
    transparent 70%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.btn-secondary::before {
  background: radial-gradient(
    100px circle at var(--mouse-x, 0px) var(--mouse-y, 0px),
    rgba(49, 130, 206, 0.12),
    transparent 65%
  );
}

.btn-secondary::after {
  background: radial-gradient(
    80px circle at var(--mouse-x, 0px) var(--mouse-y, 0px),
    var(--accent-blue-light),
    transparent 70%
  );
}

.btn:hover::before, .btn:hover::after {
  opacity: 1;
}

.btn-primary {
  background: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-indigo) 100%);
  color: white;
  box-shadow: 0 2px 8px rgba(49, 130, 206, 0.3);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(49, 130, 206, 0.4);
}

.btn-secondary {
  background: var(--bg-card);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
}

.btn-secondary:hover {
  background: var(--bg-card-hover);
  border-color: var(--accent-blue-light);
  color: var(--accent-blue);
  transform: translateY(-2px);
}

.btn-sm {
  padding: 6px 12px;
  font-size: 12px;
}

.btn-icon {
  width: 40px;
  height: 40px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  cursor: pointer;
  color: var(--text-secondary);
  position: relative;
  overflow: hidden;
  transition: all var(--transition-fast);
}

.btn-icon > * {
  position: relative;
  z-index: 3;
}

.btn-icon::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: radial-gradient(
    60px circle at var(--mouse-x, 0px) var(--mouse-y, 0px),
    rgba(49, 130, 206, 0.12),
    transparent 65%
  );
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.btn-icon::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: radial-gradient(
    50px circle at var(--mouse-x, 0px) var(--mouse-y, 0px),
    var(--accent-blue-light),
    transparent 70%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.btn-icon:hover {
  background: var(--bg-card-hover);
  color: var(--accent-blue);
  border-color: var(--accent-blue-light);
  transform: translateY(-2px);
}

.btn-icon:hover::before, .btn-icon:hover::after {
  opacity: 1;
}

/* ===== Time Range Tabs ===== */

.time-tabs {
  display: flex;
  gap: 4px;
  background: var(--bg-secondary);
  padding: 4px;
  border-radius: var(--radius-sm);
  width: fit-content;
}

.time-tab {
  padding: 6px 16px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-tertiary);
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
  position: relative;
  overflow: hidden;
  transition: all var(--transition-fast);
}

.time-tab > * {
  position: relative;
  z-index: 3;
}

.time-tab::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: radial-gradient(
    60px circle at var(--mouse-x, 0px) var(--mouse-y, 0px),
    rgba(49, 130, 206, 0.1),
    transparent 65%
  );
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.time-tab::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: radial-gradient(
    50px circle at var(--mouse-x, 0px) var(--mouse-y, 0px),
    var(--accent-blue-light),
    transparent 70%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.time-tab:hover {
  color: var(--text-primary);
}

.time-tab:hover::before, .time-tab:hover::after {
  opacity: 1;
}

.time-tab.active {
  background: var(--bg-card);
  color: var(--accent-blue);
  box-shadow: var(--shadow-sm);
}

/* ===== Filter Bar ===== */

.filter-bar {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.filter-select {
  padding: 9px 38px 9px 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  background-color: var(--bg-card);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  outline: none;
  cursor: pointer;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast);
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23718096' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

/* Nút sổ xuống Vai trò trong bảng người dùng (Quản trị) — bo tròn dạng viên thuốc, thắng mọi override */

.role-select {
  border-radius: 999px !important;
}

.filter-select:hover {
  border-color: var(--accent-blue-light);
  color: var(--text-primary);
  box-shadow: 0 2px 10px rgba(49, 130, 206, 0.14);
}

.filter-select:focus {
  border-color: var(--accent-blue);
  color: var(--text-primary);
  box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.16);
}

/* ===== Bộ lọc khoảng ngày ===== */

.date-range-filter {
  display: flex;
  align-items: center;
  gap: 8px;
}

.filter-date {
  height: 38px;
  padding: 0 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  background-color: var(--bg-card);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  outline: none;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), color var(--transition-fast);
}

.filter-date:hover {
  border-color: var(--accent-blue-light);
  color: var(--text-primary);
  box-shadow: 0 2px 10px rgba(49, 130, 206, 0.14);
}

.filter-date:focus {
  border-color: var(--accent-blue);
  color: var(--text-primary);
  box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.16);
}

.date-range-sep {
  color: var(--text-tertiary);
  font-weight: 700;
}

.date-range-clear {
  width: 32px;
  height: 32px;
  color: var(--negative);
  flex-shrink: 0;
}

body[data-theme='dark'] .filter-date {
  background-color: rgba(31, 41, 55, 0.9);
  border-color: rgba(255, 255, 255, 0.12);
  color: #E2E8F0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

body[data-theme='dark'] .filter-date:hover {
  border-color: var(--accent-blue-light);
}

/* Đổi màu icon lịch của ô date trong nền tối cho dễ nhìn */

body[data-theme='dark'] .filter-date::-webkit-calendar-picker-indicator {
  filter: invert(0.8);
}

/* Thanh trượt độ blur & các range input */

.blur-range {
  accent-color: var(--accent-blue);
  cursor: pointer;
  height: 6px;
}

/* ===== Dropdown tuỳ biến (bo tròn cả nút lẫn danh sách) ===== */

.custom-select {
  position: relative;
}

.custom-select-trigger {
  width: 100%;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 12px 0 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  outline: none;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), color var(--transition-fast);
}

.custom-select-trigger:hover {
  border-color: var(--accent-blue-light);
  color: var(--text-primary);
  box-shadow: 0 2px 10px rgba(49, 130, 206, 0.14);
}

.custom-select-trigger.open {
  border-color: var(--accent-blue);
  color: var(--text-primary);
  box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.16);
}

.custom-select-value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.custom-select-chevron {
  flex-shrink: 0;
  color: var(--text-tertiary);
  transition: transform 0.18s ease;
}

.custom-select-trigger.open .custom-select-chevron {
  transform: rotate(180deg);
}

.custom-select-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 60;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 32px rgba(16, 24, 40, 0.16);
  padding: 6px;
  max-height: 280px;
  overflow-y: auto;
  animation: fadeIn 0.14s ease;
}

.custom-select-option {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 12px;
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  text-align: left;
  transition: background 0.12s ease, color 0.12s ease;
}

.custom-select-option:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

.custom-select-option.active {
  background: rgba(49, 130, 206, 0.12);
  color: var(--accent-blue);
  font-weight: 600;
}

.custom-select-option svg {
  flex-shrink: 0;
}

/* Dropdown tuỳ biến - giao diện tối (đổi màu chữ cho dễ nhìn) */

body[data-theme='dark'] .custom-select-trigger {
  background: rgba(31, 41, 55, 0.9);
  border-color: rgba(255, 255, 255, 0.12);
  color: #E2E8F0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

body[data-theme='dark'] .custom-select-trigger:hover {
  border-color: var(--accent-blue-light);
  color: #FFFFFF;
  box-shadow: 0 2px 12px rgba(59, 130, 246, 0.22);
}

body[data-theme='dark'] .custom-select-trigger.open {
  border-color: var(--accent-blue);
  color: #FFFFFF;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
}

body[data-theme='dark'] .custom-select-chevron {
  color: #A0AEC0;
}

body[data-theme='dark'] .custom-select-menu {
  background: #1F2937;
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}

body[data-theme='dark'] .custom-select-option {
  color: #CBD5E1;
}

body[data-theme='dark'] .custom-select-option:hover {
  background: rgba(255, 255, 255, 0.07);
  color: #FFFFFF;
}

body[data-theme='dark'] .custom-select-option.active {
  background: rgba(59, 130, 246, 0.22);
  color: #93C5FD;
}

/* ===== Bảng danh mục tổng hợp: cột Mã CK cố định khi cuộn ngang ===== */

.portfolio-table .col-ticker {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--bg-card);
  box-shadow: 6px 0 10px -8px rgba(0, 0, 0, 0.18);
}

/* Bảng "Tổng hợp cổ phiếu" (Tổng quan): dòng gọn ~60% chiều cao */

.portfolio-list-table tbody td {
  padding-top: 1px;
  padding-bottom: 1px;
  line-height: 1.2;
}

.portfolio-list-table thead th {
  padding-top: 4px;
  padding-bottom: 4px;
}

.portfolio-list-table .badge {
  vertical-align: middle;
}

.portfolio-table thead .col-ticker {
  z-index: 3;
  background: var(--bg-card);
}

.portfolio-table tbody tr:hover .col-ticker {
  background: var(--bg-card-hover);
}

body[data-theme='dark'] .portfolio-table .col-ticker,
body[data-theme='dark'] .portfolio-table thead .col-ticker {
  background: var(--bg-card);
}

body[data-theme='dark'] .portfolio-table tbody tr:hover .col-ticker {
  background: var(--bg-card-hover);
}

/* Mục checklist chọn cột hiển thị */

.col-toggle-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.12s ease;
}

.col-toggle-item:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

.col-toggle-item input {
  accent-color: var(--accent-blue);
  cursor: pointer;
}

.col-toggle-item.disabled {
  opacity: 0.7;
  cursor: default;
}

.col-toggle-item.disabled:hover {
  background: transparent;
}

.col-toggle-fixed {
  margin-left: auto;
  font-size: 10px;
  color: var(--text-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 999px;
  padding: 1px 7px;
}

body[data-theme='dark'] .col-toggle-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

.search-input {
  padding: 8px 14px 8px 36px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  font-family: inherit;
  font-size: 13px;
  color: var(--text-primary);
  outline: none;
  width: 240px;
  transition: all var(--transition-fast);
}

.search-input:focus {
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.1);
}

.search-wrapper {
  position: relative;
}

.search-wrapper svg {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-light);
  width: 18px;
  height: 18px;
}

/* ===== Badges / Tags ===== */

.badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}

.badge-buy { background: #EBF5FF; color: #2B6CB0; }

.badge-sell { background: #FFF5F5; color: #C53030; }

.badge-dividend { background: #F0FFF4; color: #276749; }

.badge-deposit { background: #FEFCBF; color: #975A16; }

.badge-withdraw { background: #FED7E2; color: #97266D; }

/* ===== Modal ===== */

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: fadeIn 0.2s ease;
  backdrop-filter: var(--bf-4, blur(4px));
}

/* Mobile (màn hình dọc): khi phóng to biểu đồ → xoay ngang (landscape).
   Mục tiêu: TỐI ĐA HOÁ vùng biểu đồ.
   - Khung được canh giữa bởi .modal-overlay nên xoay quanh tâm vẫn nằm giữa màn hình.
   - width/height đảo theo viewport (vh↔vw) để sau khi xoay 90° vừa khít màn hình dọc.
   - Với biểu đồ chuỗi thời gian, TRỤC HOÀNH (chiều rộng khi nằm ngang) là quý nhất,
     nên giữ biểu đồ CHIẾM TRỌN bề rộng và chỉ để thanh điều khiển mỏng phía trên,
     thay vì cột bên (cột bên sẽ cắt bớt trục thời gian). */

@media (max-width: 820px) and (orientation: portrait) {
  /* Sát viền: thu nền đệm của overlay & của khung (chỉ cho overlay chứa biểu đồ phóng to) */
  .modal-overlay:has(> .chart-zoom-panel) {
    padding: 6px !important;
  }
  .chart-zoom-panel {
    width: 97vh !important;     /* sau khi xoay 90° → chiều CAO hiển thị */
    height: 95vw !important;    /* sau khi xoay 90° → chiều RỘNG hiển thị */
    flex-shrink: 0 !important;  /* không để overlay (flex) bóp nhỏ panel sau khi xoay */
    padding: 9px !important;    /* mỏng hơn 20px mặc định để nhường chỗ cho biểu đồ */
    transform: rotate(90deg);
  }

  /* Thanh điều khiển (tiêu đề + nút lọc thời gian + nút đóng): nén MỎNG nhất có thể.
     Nhắm vào header là con trực tiếp .flex-between của khung phóng to. */
  .chart-zoom-panel > .flex-between {
    margin-bottom: 6px !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;     /* không xuống dòng → thanh luôn 1 hàng, mỏng */
  }
  .chart-zoom-panel > .flex-between .card-title {
    font-size: 14px !important;
    white-space: nowrap;
  }
  .chart-zoom-panel > .flex-between .time-tabs {
    gap: 2px !important;
    flex-wrap: nowrap !important;
  }
  .chart-zoom-panel > .flex-between .time-tab {
    padding: 4px 8px !important;
    font-size: 11px !important;
  }
  .chart-zoom-panel > .flex-between .btn-icon {
    width: 30px !important;
    height: 30px !important;
    flex-shrink: 0;
  }
}

.modal {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 32px;
  width: 90%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-xl);
  animation: slideUp 0.3s ease;
}

.modal-title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 24px;
  color: var(--text-primary);
}

.form-group {
  margin-bottom: 18px;
}

.form-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.form-input {
  width: 100%;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
  font-family: inherit;
  font-size: 14px;
  color: var(--text-primary);
  outline: none;
  transition: all var(--transition-fast);
}

.form-input:focus {
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.12);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 24px;
}

/* ===== Transaction Timeline ===== */

.timeline {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.timeline-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  /* Nền bán trong + làm mờ (blur) cho từng dòng giao dịch */
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: var(--bf-12, blur(12px)) saturate(115%);
  -webkit-backdrop-filter: var(--bf-12, blur(12px)) saturate(115%);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(255, 255, 255, 0.55);
  transition: all var(--transition-fast);
}

.timeline-item:hover {
  box-shadow: var(--shadow-md);
  transform: translateX(4px);
}

body[data-theme='dark'] .timeline-item {
  background: rgba(31, 41, 55, 0.5);
  border-color: rgba(255, 255, 255, 0.08);
}

.timeline-date {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.1;
  color: var(--text-tertiary);
  min-width: 90px;
  align-self: center;
}

/* Dòng "Ngày nhập" nằm dưới cột ngày; nowrap để kéo dài sang dưới cột loại giao dịch */

.timeline-entry {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.1;
  color: var(--text-light);
  white-space: nowrap;
  margin-top: 5px;
}

.timeline-type {
  min-width: 80px;
}

.timeline-details {
  flex: 1;
}

.timeline-amount {
  font-weight: 700;
  font-size: 15px;
  text-align: right;
}

/* ===== Insight Cards ===== */

.insight-card {
  padding: 20px;
  border-radius: var(--radius-md);
  border-left: 4px solid;
  background: var(--bg-card);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-normal);
}

.insight-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.insight-card.positive {
  border-color: var(--positive);
}

.insight-card.negative {
  border-color: var(--negative);
}

.insight-card.info {
  border-color: var(--accent-blue);
}

.insight-card.warning {
  border-color: #ED8936;
}

.insight-title {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 8px;
}

.insight-text {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* ===== Bảng chi tiết Phân bổ ngành (trong popup) ===== */

.sector-detail-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

.sector-detail-table thead th {
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding: 8px 10px;
  border-bottom: 2px solid var(--border-color);
}

.sector-detail-table th.sortable {
  cursor: pointer;
  user-select: none;
  transition: color var(--transition-fast);
}

.sector-detail-table th.sortable:hover {
  color: var(--text-primary);
}

.sector-detail-table th.sortable svg {
  vertical-align: middle;
}

.sector-detail-table tbody td {
  padding: 10px;
  border-bottom: 1px solid var(--border-light);
  color: var(--text-primary);
}

.sector-detail-table tbody tr:last-child td {
  border-bottom: none;
}

.sector-detail-table tbody tr {
  transition: background var(--transition-fast);
}

.sector-detail-table tbody tr:hover {
  background: var(--bg-card-hover);
}

/* ===== Bảng Tổng hợp (Trang tổng quan) ===== */

.summary-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
  line-height: 1.25;
}

.summary-table thead th {
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding: 8px 12px;
  border-bottom: 2px solid var(--border-color);
}

.summary-table td {
  padding: 5px 12px;
  border-bottom: 1px solid var(--border-light);
  vertical-align: top;
}

.summary-table tbody tr:last-child td {
  border-bottom: none;
}

.summary-table .sum-label {
  color: var(--text-secondary);
  white-space: nowrap;
}

.summary-table .sum-value {
  text-align: right;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
}

.summary-table .sum-value.text-positive { color: var(--positive); }

.summary-table .sum-value.text-negative { color: var(--negative); }

.summary-table .sum-note {
  color: var(--text-tertiary);
  font-size: 14px;
}

.summary-table tr.sum-sep td {
  border-top: 2px dashed var(--border-color);
  border-bottom: none;
  padding: 12px 12px 4px;
}

.summary-table tr.sum-sep span {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-tertiary);
}

/* Mobile: mỗi mục xếp [Tên — Giá trị] trên 1 hàng, dòng chú thích xuống dưới full width */

@media (max-width: 768px) {
  .summary-table { display: block; }
  .summary-table thead { display: none; }
  .summary-table tbody { display: block; }
  .summary-table tr {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-light);
  }
  .summary-table tbody tr:last-child { border-bottom: none; }
  .summary-table td { padding: 0; border: none; }
  .summary-table .sum-label { flex: 1 1 auto; white-space: normal; padding-right: 10px; }
  .summary-table .sum-value { flex: 0 0 auto; text-align: right; }
  .summary-table .sum-note {
    flex-basis: 100%;
    width: 100%;
    margin-top: 3px;
  }
  .summary-table tr.sum-sep {
    display: block;
    border-top: none;
    border-bottom: none;
    padding: 10px 0 2px;
    text-align: center;
  }
  .summary-table tr.sum-sep td {
    display: block;
    width: 100%;
    text-align: center;
    border-top: none;
    padding: 10px 0 2px;
  }
  /* Đường gạch đứt ngắn, căn giữa theo bề rộng màn hình (td full-width) */
  .summary-table tr.sum-sep td::before {
    content: '';
    display: block;
    width: 50%;
    margin: 0 auto 6px;
    border-top: 2px dashed var(--border-color);
  }
}

/* ===== Stats Grid ===== */

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

/* Thu gọn 3 thẻ thống kê trang Quản trị xuống ~1 nửa chiều cao (chỉ áp dụng cho Admin) */

.admin-stats .card { padding: 10px 16px; }

.admin-stats .card .card-header { margin-bottom: 3px; }

.admin-stats .card .card-icon { width: 30px; height: 30px; }

.admin-stats .card .card-icon svg { width: 15px; height: 15px; }

.admin-stats .card .card-value { font-size: 18px; margin: 1px 0; }

/* Dòng mô tả phụ bên dưới số liệu: thu nhỏ để giảm chiều cao thẻ */

.admin-stats .card .card-value ~ * { font-size: 11px !important; }

.admin-stats .card .card-value ~ * * { font-size: 11px !important; }

.stat-item {
  text-align: center;
  padding: 16px;
}

.stat-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.stat-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
}

/* ===== Animations ===== */

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

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

@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-20px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes blink {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

@keyframes blink-slow {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 0.8; }
}

@keyframes twinkle {
  0%, 100% { opacity: 0.2; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.2); }
}

.animate-fadeIn {
  animation: fadeIn 0.5s ease;
}

.animate-slideUp {
  animation: slideUp 0.5s ease;
}

/* Staggered animations for cards */

.kpi-grid > *:nth-child(1) { animation: slideUp 0.4s ease 0.0s both; }

.kpi-grid > *:nth-child(2) { animation: slideUp 0.4s ease 0.08s both; }

.kpi-grid > *:nth-child(3) { animation: slideUp 0.4s ease 0.16s both; }

.kpi-grid > *:nth-child(4) { animation: slideUp 0.4s ease 0.24s both; }

.kpi-grid > *:nth-child(5) { animation: slideUp 0.4s ease 0.32s both; }

/* ===== Hamburger / Mobile Menu ===== */

.mobile-header {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 48px;
  background: var(--bg-sidebar);
  padding: 0 16px;
  align-items: center;
  justify-content: flex-start; /* gom Nút Menu → Logo → chữ Easy Invest về sát mép trái */
  gap: 8px;
  z-index: 201; /* trên .sidebar (200) khi mở để nút X (hamburger) luôn bấm đóng được */
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.hamburger {
  display: none;
  background: none;
  border: none;
  color: var(--text-sidebar-active);
  cursor: pointer;
  padding: 8px;
}

.sidebar-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  z-index: 99;
}

/* ===== Tooltip ===== */

.recharts-pie-label-text {
  fill: var(--text-secondary) !important;
  font-size: 11px;
  font-weight: 500;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.recharts-tooltip-wrapper .custom-tooltip {
  background: var(--bg-card, #fff);
  padding: 11px 14px;
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.13), 0 3px 8px rgba(15, 23, 42, 0.06);
  border: 1px solid var(--border-light);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  min-width: 152px;
  animation: tooltipPop 0.14s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes tooltipPop {
  from { opacity: 0; transform: translateY(4px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.custom-tooltip .label {
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.01em;
  margin: 0 0 7px 0;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--border-light);
  color: var(--text-primary);
}

.custom-tooltip .value {
  font-size: 12.5px;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  margin: 3px 0;
}

/* ===== Tooltip Phân bổ ngành (đẹp, sáng/tối) ===== */

.sector-tooltip {
  min-width: 168px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border-color);
  box-shadow: 0 12px 32px rgba(16, 24, 40, 0.16);
}

.sector-tooltip-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.sector-tooltip-dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
}

.sector-tooltip-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}

.sector-tooltip-value {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.3px;
  color: var(--text-primary);
  line-height: 1.1;
}

.sector-tooltip-track {
  height: 6px;
  width: 100%;
  background: var(--border-light);
  border-radius: 4px;
  overflow: hidden;
  margin: 8px 0 6px;
}

.sector-tooltip-fill {
  display: block;
  height: 100%;
  border-radius: 4px;
}

.sector-tooltip-sub {
  font-size: 11px;
  color: var(--text-tertiary);
}

body[data-theme='dark'] .sector-tooltip {
  background: rgba(30, 41, 59, 0.94);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}

body[data-theme='dark'] .sector-tooltip-track {
  background: rgba(255, 255, 255, 0.1);
}

/* ===== Scrollbar ===== */

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-light);
}

/* ===== Responsive: Tablet ===== */

@media (max-width: 1200px) {
  .kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .charts-grid {
    grid-template-columns: 1fr;
  }
  
  .charts-grid-equal {
    grid-template-columns: 1fr;
  }
  
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ===== Responsive: Mobile ===== */

@media (max-width: 768px) {
  .mobile-header {
    display: flex;
  }
  
  .hamburger {
    display: block;
  }
  
  .sidebar {
    transform: translateX(-100%);
    width: 240px;
    z-index: 200;
    padding-top: 56px; /* chừa chỗ cho thanh header mobile (48px) — menu nằm dưới thanh */
  }

  /* Ẩn logo trong sidebar trên mobile (đã có logo + tên ở thanh header mobile) */
  .sidebar .sidebar-logo {
    display: none;
  }

  .sidebar-toggle-btn {
    display: none !important;
  }
  
  .sidebar.open {
    transform: translateX(0);
  }
  
  .sidebar-overlay.visible {
    display: block;
    z-index: 150;
  }
  
  .main-content {
    margin-left: 0;
    padding: 76px 16px 24px;
  }
  
  .card {
    padding: 16px;
  }
  
  .kpi-grid {
    grid-template-columns: 1fr;
  }
  
  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .page-header h1 {
    font-size: 22px;
  }
  
  .card-value {
    font-size: 22px;
  }
  
  .chart-container {
    height: 280px;
  }
  
  .filter-bar {
    flex-direction: column;
    align-items: stretch;
  }
  
  .search-input {
    width: 100%;
  }
  
  .form-row {
    grid-template-columns: 1fr;
  }
  
  .modal {
    width: 95%;
    padding: 24px;
    margin: 0 8px;
  }
  
  .timeline-item {
    flex-wrap: wrap;
    gap: 6px 10px;
    padding: 14px 16px;
  }
  /* Hàng 1: badge loại (trái) + số tiền (phải) */
  .timeline-item .timeline-type {
    order: 1;
    min-width: 0;
  }
  .timeline-item .timeline-amount {
    order: 2;
    margin-left: auto;
    font-size: 18px;
  }
  /* Hàng 2: chi tiết mã / ghi chú (toàn bộ chiều rộng) */
  .timeline-item .timeline-details {
    order: 3;
    flex: 1 1 100%;
  }
  /* Hàng 3: ngày (trái) + nút thao tác (phải) */
  .timeline-item .timeline-date {
    order: 4;
    min-width: 0;
    flex: 1 1 auto;
  }
  .timeline-item .timeline-actions {
    order: 5;
    margin-left: auto;
  }
  
  .stats-grid {
    grid-template-columns: 1fr;
  }
  
  .header-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 8px;
    width: 100%;
  }

  .header-actions .btn {
    flex: 1;
    justify-content: center;
    padding: 8px 12px;
    font-size: 13px;
  }
}

/* ===== Responsive: Extra Small Mobile (Liquid fluid layout) ===== */

@media (max-width: 480px) {
  html {
    font-size: 14px;
  }
  
  .main-content {
    padding: 70px 12px 20px;
  }
  
  .card {
    padding: 12px;
  }
  
  .kpi-grid .card {
    padding: 10px 14px;
  }
  
  .card-value {
    font-size: 20px;
  }
  
  .kpi-grid .card-value {
    font-size: 18px;
  }
  
  .card-title {
    font-size: 11px;
  }
  
  .data-table th, .data-table td {
    padding: 8px 10px;
    font-size: 12px;
  }
  
  .btn {
    padding: 8px 14px;
    font-size: 12px;
  }
}

/* ===== Utility Classes ===== */

.text-positive { color: var(--positive); }

.text-negative { color: var(--negative); }

.text-neutral { color: var(--neutral); }

.text-center { text-align: center; }

.text-right { text-align: right; }

.font-bold { font-weight: 700; }

.mt-1 { margin-top: 8px; }

.mt-2 { margin-top: 16px; }

.mt-3 { margin-top: 24px; }

.mb-1 { margin-bottom: 8px; }

.mb-2 { margin-bottom: 16px; }

.mb-3 { margin-bottom: 24px; }

.flex { display: flex; }

.flex-between { display: flex; justify-content: space-between; align-items: center; }

.gap-1 { gap: 8px; }

.gap-2 { gap: 16px; }

.gap-3 { gap: 24px; }

/* ===== Sticky Page Header — glassmorphism blur khi scroll (Phase 4: mỏng & mờ hơn) ===== */

.sticky-page-header {
  position: sticky;
  top: 0;
  z-index: 50;
  margin: -24px -32px 20px -32px;
  padding: 8px 32px;
  border-bottom: 1px solid rgba(226, 232, 240, 0.5);
  transition: box-shadow var(--transition-normal);
}

/* Lớp blur tách riêng: đặt backdrop-filter trên ::before (position:absolute) thay vì
   trên chính phần tử position:sticky. Chrome/Edge (Blink) KHÔNG render backdrop-filter
   trên phần tử sticky trong layout này, nhưng vẫn áp dụng cho lớp con absolute.
   Safari (WebKit) chạy cả hai cách. */

.sticky-page-header::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(232, 244, 253, 0.6);
  backdrop-filter: var(--bf-12, blur(12px));
  -webkit-backdrop-filter: var(--bf-12, blur(12px));
  transition: background var(--transition-normal);
}

.sticky-page-header.scrolled {
  box-shadow: 0 1px 12px rgba(0,0,0,0.04);
}

.sticky-page-header.scrolled::before {
  background: rgba(232, 244, 253, 0.7);
  backdrop-filter: var(--bf-20, blur(20px));
  -webkit-backdrop-filter: var(--bf-20, blur(20px));
}

.sticky-page-header .page-header {
  margin-bottom: 0;
}

.sticky-page-header .page-header h1 {
  font-size: 20px;
}

.sticky-page-header .page-header-subtitle {
  font-size: 12px;
  margin-top: 2px;
}

.sticky-header-info {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 4px;
  flex-wrap: wrap;
}

.sticky-header-stat {
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 500;
}

.sticky-header-stat strong {
  font-weight: 700;
  color: var(--text-primary);
}

/* ===== Dot blink animation — dùng cho voice recording & typing indicator ===== */

@keyframes dotBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.2; }
}

.dot-blink {
  animation: dotBlink 1s ease-in-out infinite;
}

/* ===== Stock Detail Popup ===== */

.stock-detail-popup {
  max-width: 680px;
}

.stock-detail-header {
  /* Đồng màu thanh menu (sidebar) - giao diện sáng */
  --hdr-fg: var(--text-primary);
  --hdr-fg-soft: var(--text-secondary);
  --hdr-chip: rgba(255, 255, 255, 0.55);
  --hdr-chip-hover: rgba(255, 255, 255, 0.85);
  --hdr-border: rgba(0, 0, 0, 0.10);
  background: linear-gradient(180deg, var(--bg-sidebar) 0%, #90CDF4 100%);
}

.stock-detail-header-icon {
  background: var(--hdr-chip);
  color: var(--hdr-fg);
}

.stock-detail-header-close {
  background: var(--hdr-chip);
  color: var(--hdr-fg);
}

.stock-detail-header-close:hover {
  background: var(--hdr-chip-hover);
}

.stock-detail-ticker {
  font-size: 28px;
  font-weight: 800;
  color: var(--accent-blue-dark);
}

.stock-detail-name {
  font-size: 14px;
  color: var(--text-tertiary);
}

.stock-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 20px;
}

.stock-detail-item {
  padding: 12px;
  border-radius: var(--radius-sm);
  background: var(--bg-primary);
}

.stock-detail-item .label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 4px;
}

.stock-detail-item .value {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
}

/* ===== KPI Detail Popup ===== */

.kpi-popup-list {
  max-height: 400px;
  overflow-y: auto;
}

.kpi-popup-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-light);
  transition: background var(--transition-fast);
}

.kpi-popup-row:hover {
  background: var(--bg-card-hover);
}

.kpi-popup-row.cash-row {
  background: #FFF9E6;
  border-bottom: 2px solid #F0E68C;
  font-weight: 600;
  position: sticky;
  top: 0;
  z-index: 2;
}

/* Dòng tổng lãi/lỗ ở popup: trên mobile xếp dọc để số không bị xuống dòng giữa chừng */

@media (max-width: 768px) {
  .pnl-total-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
  .pnl-total-row > strong:last-child {
    font-size: 16px !important;
    white-space: nowrap;
  }
}

/* ===== Sidebar Clock ===== */

.sidebar-clock {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-sidebar-active);
  letter-spacing: 0.5px;
}

.sidebar-date {
  font-size: 11px;
  color: var(--text-sidebar);
  opacity: 0.7;
  margin-top: 2px;
}

/* ===== Sidebar Logo Image ===== */

.sidebar-logo-img {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  flex-shrink: 0;
}

/* ===== Responsive: Sticky Header trên Mobile ===== */

@media (max-width: 768px) {
  .sticky-page-header {
    margin: -76px -16px 16px -16px;
    padding: 76px 16px 8px 16px;
  }

  .sticky-header-info {
    gap: 8px;
  }

  .stock-detail-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== Margin Management Page ===== */

/* Thanh trạng thái margin — gradient xanh → vàng → đỏ */

.margin-gauge-container {
  background: var(--bg-card);
  border-radius: var(--radius-md);
  padding: 20px 24px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-light);
  margin-bottom: 24px;
}

.margin-gauge-bar {
  height: 14px;
  border-radius: 7px;
  background: linear-gradient(90deg, #E53E3E 0%, #E53E3E 23%, #ED8936 23%, #ED8936 30%, #ECC94B 30%, #ECC94B 40%, #38A169 40%, #38A169 100%);
  position: relative;
  overflow: visible;
  margin: 12px 0 8px;
}

.margin-gauge-pointer {
  position: absolute;
  top: -6px;
  width: 4px;
  height: 26px;
  background: var(--text-primary);
  border-radius: 2px;
  transform: translateX(-50%);
  box-shadow: 0 0 6px rgba(0,0,0,0.3);
  transition: left var(--transition-slow);
}

.margin-gauge-labels {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-tertiary);
  font-weight: 600;
}

.margin-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 700;
}

.margin-status-badge.safe {
  background: var(--positive-bg);
  color: var(--positive);
}

.margin-status-badge.warning {
  background: #FFFBEB;
  color: #D69E2E;
}

.margin-status-badge.danger {
  background: var(--negative-bg);
  color: var(--negative);
}

/* Input inline chỉnh haircut trong bảng */

.inline-edit-input {
  width: 70px;
  padding: 4px 8px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  color: var(--text-primary);
  background: var(--bg-primary);
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.inline-edit-input:focus {
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.15);
}

/* Bảng công thức margin */

.margin-formula-card {
  background: linear-gradient(135deg, #F7FAFC 0%, #EDF2F7 100%);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 20px 24px;
  margin-bottom: 24px;
}

.margin-formula-card h3 {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--text-primary);
}

.formula-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px dashed var(--border-light);
  font-size: 13px;
}

.formula-row:last-child {
  border-bottom: none;
}

.formula-name {
  font-weight: 600;
  color: var(--text-secondary);
  min-width: 200px;
}

.formula-expr {
  font-family: 'Courier New', monospace;
  color: var(--accent-blue-dark);
  font-weight: 500;
  font-size: 12px;
  background: rgba(49, 130, 206, 0.06);
  padding: 2px 8px;
  border-radius: 4px;
}

@media (max-width: 768px) {
  .formula-row {
    flex-direction: column;
    gap: 2px;
  }
  .formula-name {
    min-width: unset;
  }
}

/* ===== Desktop Sidebar Collapsed Styles (Phase 4) ===== */

.sidebar-collapsed .sidebar {
  width: var(--sidebar-collapsed);
  padding: 24px 8px;
}

.sidebar-collapsed .main-content {
  margin-left: var(--sidebar-collapsed);
}

.sidebar-collapsed .sidebar-logo {
  justify-content: center;
  padding: 8px 0;
  margin-bottom: 24px;
}

.sidebar-collapsed .nav-item {
  justify-content: center;
  padding: 12px 0;
  gap: 0;
}

.sidebar-collapsed .nav-item span {
  display: none;
}

.sidebar-collapsed .sidebar-section-title {
  text-align: center;
  font-size: 9px;
  padding: 12px 0 6px;
  opacity: 0.3;
}

.sidebar-collapsed .sidebar-clock {
  font-size: 13px;
}

.sidebar-collapsed .sidebar-date {
  display: none;
}

/* ===== Thu nhỏ + di chuột vào: tạm mở rộng để xem đủ tên mục ===== */

.sidebar-collapsed .sidebar.hover-expanded {
  width: var(--sidebar-width);
  padding: 24px 16px;
  box-shadow: 4px 0 28px rgba(0, 0, 0, 0.18);
}

.sidebar-collapsed .sidebar.hover-expanded .nav-item {
  justify-content: flex-start;
  padding: 10px 12px;
  gap: 12px;
}

.sidebar-collapsed .sidebar.hover-expanded .nav-item span {
  display: inline;
}

.sidebar-collapsed .sidebar.hover-expanded .sidebar-section-title {
  text-align: left;
  font-size: 11px;
  opacity: 0.5;
  padding: 16px 12px 8px;
}

.sidebar-collapsed .sidebar.hover-expanded .sidebar-date {
  display: block;
}

/* Hoạt động bình thường (không bị collapsed) khi ở chế độ responsive mobile */

@media (max-width: 768px) {
  .sidebar-collapsed .sidebar {
    width: 240px !important;
    padding: 24px 16px !important;
    transform: translateX(-100%);
  }
  .sidebar-collapsed .sidebar.open {
    transform: translateX(0);
  }
  .sidebar-collapsed .main-content {
    margin-left: 0 !important;
  }
  .sidebar-collapsed .nav-item span {
    display: inline !important;
  }
  .sidebar-collapsed .sidebar-date {
    display: block !important;
  }
}

/* ===== Real-time Clock Badge ===== */

.time-clock-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
  background: linear-gradient(135deg, #EBF5FF 0%, #E8F4FD 100%);
  color: var(--accent-blue-dark);
  border: 1px solid var(--accent-blue-light);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-normal);
}

.time-clock-badge:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
  background: linear-gradient(135deg, #D4ECFB 0%, #E8F4FD 100%);
}

.time-clock-badge .clock-icon {
  color: var(--accent-blue);
  animation: pulse-clock 2.5s infinite ease-in-out;
}

.time-clock-badge .time-text {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.5px;
}

/* Dark mode style for clock badge */

body[data-theme='dark'] .time-clock-badge {
  background: linear-gradient(135deg, #1A2E4C 0%, #15253F 100%);
  color: #D4ECFB;
  border-color: #2D4A77;
}

body[data-theme='dark'] .time-clock-badge:hover {
  background: linear-gradient(135deg, #20375C 0%, #15253F 100%);
}

body[data-theme='dark'] .time-clock-badge .clock-icon {
  color: var(--accent-blue-light);
}

@keyframes pulse-clock {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.8;
  }
}

/* ===== Real-time Data Badges ===== */

.data-source-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid transparent;
  transition: all var(--transition-fast);
}

.data-source-badge.live {
  background: var(--positive-bg);
  color: var(--positive);
  border-color: var(--positive-light);
}

.data-source-badge.live .dot {
  width: 8px;
  height: 8px;
  background-color: var(--positive);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--positive);
  animation: pulse-green 2s infinite;
}

.data-source-badge.static {
  background: #FFF5F5;
  color: #C53030;
  border-color: #FED7D7;
}

.data-source-badge.static .dot {
  width: 8px;
  height: 8px;
  background-color: #C53030;
  border-radius: 50%;
}

@keyframes pulse-green {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(56, 161, 105, 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 6px rgba(56, 161, 105, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(56, 161, 105, 0);
  }
}

.spin {
  display: inline-block;
  animation: rotation 1s infinite linear;
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* ==========================================================================
   WEB SETTINGS FEATURE CSS (HIỆU ỨNG CÀI ĐẶT TRANG WEB CAO CẤP)
   ========================================================================== */

/* 1. Nút kích hoạt Cài đặt bánh răng */

.settings-trigger-btn {
  position: fixed;
  top: 15px;
  right: 32px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-secondary);
  box-shadow: var(--shadow-sm);
  z-index: 900;
  transition: all var(--transition-normal);
  backdrop-filter: var(--bf-8, blur(8px));
  -webkit-backdrop-filter: var(--bf-8, blur(8px));
}

.settings-trigger-btn:hover {
  background: var(--bg-card-hover);
  color: var(--accent-blue);
  border-color: var(--accent-blue-light);
  transform: rotate(45deg);
  box-shadow: var(--shadow-md);
}

.settings-trigger-btn svg {
  transition: transform var(--transition-normal);
}

/* Global System Widgets Container (dịch vào phía trong để nhường chỗ cho các nút trang con dạt phải) */

.global-header-widgets {
  position: fixed;
  top: 15px;
  right: 390px; /* Dịch sang trái 390px từ lề phải */
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 900;
  transition: all var(--transition-normal);
}

/* 2. Căn chỉnh lề các page-header actions để không bị đè lên bởi nút cài đặt hệ thống ở ngoài cùng bên phải */

.sticky-page-header .page-header {
  padding-right: 80px; /* Chừa 80px ngoài cùng bên phải cho nút Cài đặt, các nút trang con dạt sát phải từ 80px trở đi */
}

@media (max-width: 1024px) {
  .global-header-widgets {
    right: auto;
    left: 290px; /* Định vị sang bên trái (bên phải Sidebar) khi màn hình dạng Tablet */
  }
}

@media (max-width: 768px) {
  .global-header-widgets {
    display: none; /* Ẩn cụm widget trên mobile để tránh đè lấp giao diện */
  }
}

/* 3. CSS cho Settings Modal & Overlay */

.settings-overlay {
  backdrop-filter: var(--bf-8, blur(8px)) saturate(110%);
  -webkit-backdrop-filter: var(--bf-8, blur(8px)) saturate(110%);
  background: rgba(15, 23, 42, 0.3) !important; /* Phủ mờ đen sang trọng */
  transition: all 0.3s ease;
}

.settings-modal {
  display: flex;
  flex-direction: column;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(226, 232, 240, 0.8);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
  border-radius: var(--radius-xl) !important;
  background: #FFFFFF;
}

/* Settings Header */

.settings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-light);
  background: var(--neutral-bg);
}

.settings-title-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.settings-icon-bg {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #EBF5FF;
  display: flex;
  align-items: center;
  justify-content: center;
}

.settings-icon-bg svg {
  color: var(--accent-blue);
}

.settings-header h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  text-align: left;
}

.settings-header p {
  font-size: 11px;
  color: var(--text-tertiary);
  margin: 0;
  text-align: left;
}

.settings-close-btn {
  background: none;
  border: none;
  color: var(--text-light);
  cursor: pointer;
  padding: 6px;
  border-radius: 50%;
  transition: all var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
}

.settings-close-btn:hover {
  background: var(--border-light);
  color: var(--text-secondary);
}

/* Settings Content */

.settings-content {
  padding: 24px;
  overflow-y: auto;
  max-height: calc(75vh - 120px);
}

.settings-section {
  margin-bottom: 24px;
}

.settings-section:last-child {
  margin-bottom: 0;
}

.settings-section .section-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-tertiary);
  letter-spacing: 0.8px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  text-align: left;
  border-bottom: 1px solid var(--border-light);
  padding-bottom: 6px;
}

.settings-section .section-title.text-danger {
  color: #E53E3E;
  border-bottom-color: #FED7D7;
}

/* Setting Item Grid */

.setting-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px dashed var(--border-light);
}

.setting-item:last-child {
  border-bottom: none;
}

.setting-item.flex-column {
  flex-direction: column;
  align-items: flex-start;
  padding: 14px 0 10px;
}

.setting-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  padding-right: 16px;
  text-align: left;
}

.setting-label-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}

.setting-label-wrapper svg {
  width: 16px;
  height: 16px;
}

.setting-label-wrapper svg.text-yellow { color: #D69E2E; }

.setting-label-wrapper svg.text-blue { color: var(--accent-blue); }

.setting-label-wrapper svg.text-indigo { color: var(--accent-indigo); }

.setting-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.setting-desc {
  font-size: 12px;
  color: var(--text-tertiary);
  line-height: 1.4;
}

/* Toggle Switch UI */

.switch {
  position: relative;
  display: inline-block;
  width: 46px;
  height: 24px;
  flex-shrink: 0;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #CBD5E0;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
}

.slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

input:checked + .slider {
  background-color: var(--accent-blue);
}

input:checked + .slider:before {
  transform: translateX(22px);
}

.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

/* Select Box Cài đặt */

.settings-select {
  border-color: var(--border-color);
  background-color: var(--bg-card);
  font-weight: 500;
}

/* Connection Status Card */

.connection-status-card {
  background: var(--neutral-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  margin-top: 10px;
  text-align: left;
}

.status-indicator {
  display: flex;
  align-items: center;
  gap: 10px;
}

.status-dot {
  width: 8px;
  height: 8px;
  background-color: var(--positive);
  border-radius: 50%;
  box-shadow: 0 0 6px var(--positive);
}

.status-dot.pulsing {
  animation: pulse-green-small 2.0s infinite;
}

@keyframes pulse-green-small {
  0% { transform: scale(0.9); box-shadow: 0 0 0 0 rgba(56, 161, 105, 0.6); }
  70% { transform: scale(1.1); box-shadow: 0 0 0 5px rgba(56, 161, 105, 0); }
  100% { transform: scale(0.9); box-shadow: 0 0 0 0 rgba(56, 161, 105, 0); }
}

.status-label {
  font-size: 11px;
  color: var(--text-tertiary);
  display: block;
}

.status-value {
  font-size: 13px;
  color: var(--text-primary);
  font-weight: 700;
}

.last-update-text {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 8px;
  border-top: 1px dashed var(--border-light);
  padding-top: 8px;
}

.last-update-text span {
  font-weight: 600;
  color: var(--text-secondary);
}

.refresh-btn-manual {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 600;
  height: 28px;
  border-radius: 6px;
}

.refresh-btn-manual:hover {
}

.settings-section .section-title.text-danger {
  color: #E53E3E;
  border-bottom-color: #FED7D7;
}

/* Setting Item Grid */

.setting-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px dashed var(--border-light);
}

.setting-item:last-child {
  border-bottom: none;
}

.setting-item.flex-column {
  flex-direction: column;
  align-items: flex-start;
  padding: 14px 0 10px;
}

.setting-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  padding-right: 16px;
  text-align: left;
}

.setting-label-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}

.setting-label-wrapper svg {
  width: 16px;
  height: 16px;
}

.setting-label-wrapper svg.text-yellow { color: #D69E2E; }

.setting-label-wrapper svg.text-blue { color: var(--accent-blue); }

.setting-label-wrapper svg.text-indigo { color: var(--accent-indigo); }

.setting-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.setting-desc {
  font-size: 12px;
  color: var(--text-tertiary);
  line-height: 1.4;
}

/* Toggle Switch UI */

.switch {
  position: relative;
  display: inline-block;
  width: 46px;
  height: 24px;
  flex-shrink: 0;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #CBD5E0;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
}

.slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

input:checked + .slider {
  background-color: var(--accent-blue);
}

input:checked + .slider:before {
  transform: translateX(22px);
}

.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

/* Select Box Cài đặt */

.settings-select {
  border-color: var(--border-color);
  background-color: var(--bg-card);
  font-weight: 500;
}

/* Connection Status Card */

.connection-status-card {
  background: var(--neutral-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  margin-top: 10px;
  text-align: left;
}

.status-indicator {
  display: flex;
  align-items: center;
  gap: 10px;
}

.status-dot {
  width: 8px;
  height: 8px;
  background-color: var(--positive);
  border-radius: 50%;
  box-shadow: 0 0 6px var(--positive);
}

.status-dot.pulsing {
  animation: pulse-green-small 2.0s infinite;
}

@keyframes pulse-green-small {
  0% { transform: scale(0.9); box-shadow: 0 0 0 0 rgba(56, 161, 105, 0.6); }
  70% { transform: scale(1.1); box-shadow: 0 0 0 5px rgba(56, 161, 105, 0); }
  100% { transform: scale(0.9); box-shadow: 0 0 0 0 rgba(56, 161, 105, 0); }
}

.status-label {
  font-size: 11px;
  color: var(--text-tertiary);
  display: block;
}

.status-value {
  font-size: 13px;
  color: var(--text-primary);
  font-weight: 700;
}

.last-update-text {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 8px;
  border-top: 1px dashed var(--border-light);
  padding-top: 8px;
}

.last-update-text span {
  font-weight: 600;
  color: var(--text-secondary);
}

.refresh-btn-manual {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 600;
  height: 28px;
  border-radius: 6px;
}

.refresh-btn-manual:hover {
  background: var(--bg-card);
  border-color: var(--accent-blue-light);
  color: var(--accent-blue);
}

/* Danger Zone Card */

.danger-zone-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #FFF5F5;
  border: 1px solid #FED7D7;
  border-radius: var(--radius-md);
  padding: 14px 16px;
  gap: 12px;
}

.danger-info {
  flex: 1;
}

.danger-info strong {
  font-size: 13px;
  color: #C53030;
  display: block;
  margin-bottom: 2px;
}

.danger-info p {
  font-size: 11px;
  color: #9B2C2C;
  line-height: 1.4;
  margin: 0;
}

.reset-btn-system {
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 8px;
  transition: all var(--transition-fast);
}

.reset-btn-system:hover {
  background-color: #E53E3E !important;
  color: white !important;
  box-shadow: 0 2px 8px rgba(229, 62, 62, 0.3);
  transform: translateY(-1px);
}

/* Settings Footer */

.settings-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--border-light);
  background: var(--neutral-bg);
}

.settings-footer .btn {
  padding: 12px;
  font-size: 14px;
  border-radius: var(--radius-md);
}

/* 4. CHẾ ĐỘ KÍNH MỜ CAO CẤP (GLASSMORPHISM ACTIVE) */

body.glassmorphism-enabled {
  background: linear-gradient(135deg, #F0F7FF 0%, #E2F0FD 50%, #D4E8FC 100%) !important;
}

body.glassmorphism-enabled .card,
body.glassmorphism-enabled .settings-modal,
body.glassmorphism-enabled .connection-status-card {
  background: rgba(255, 255, 255, 0.45) !important;
  backdrop-filter: var(--bf-20, blur(20px)) saturate(130%) !important;
  -webkit-backdrop-filter: var(--bf-20, blur(20px)) saturate(130%) !important;
  border: 1px solid rgba(255, 255, 255, 0.45) !important;
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.04), var(--shadow-sm) !important;
}

/* Popup (.modal) kính mờ - đồng bộ với phần còn lại của web */

body.glassmorphism-enabled .modal-overlay {
  background: rgba(15, 23, 42, 0.28) !important;
  backdrop-filter: var(--bf-10, blur(10px)) saturate(120%) !important;
  -webkit-backdrop-filter: var(--bf-10, blur(10px)) saturate(120%) !important;
}

body.glassmorphism-enabled .modal {
  background: rgba(255, 255, 255, 0.72) !important;
  backdrop-filter: var(--bf-28, blur(28px)) saturate(150%) !important;
  -webkit-backdrop-filter: var(--bf-28, blur(28px)) saturate(150%) !important;
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  box-shadow: 0 16px 48px 0 rgba(31, 38, 135, 0.18) !important;
}

/* Header popup chi tiết: trong mờ giống thanh menu kính mờ */

body.glassmorphism-enabled .stock-detail-header {
  background: linear-gradient(180deg, rgba(190, 227, 248, 0.72) 0%, rgba(144, 205, 244, 0.78) 100%) !important;
  --hdr-border: rgba(255, 255, 255, 0.55);
}

/* Header kiểu settings: cùng hiệu ứng kính mờ với nền settings */

body.glassmorphism-enabled .settings-header {
  background: rgba(255, 255, 255, 0.45) !important;
  backdrop-filter: var(--bf-20, blur(20px)) saturate(130%) !important;
  -webkit-backdrop-filter: var(--bf-20, blur(20px)) saturate(130%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.45) !important;
}

body.glassmorphism-enabled .settings-icon-bg {
  background: rgba(255, 255, 255, 0.5) !important;
}

/* Ô nội dung & input trong popup kính mờ */

body.glassmorphism-enabled .stock-detail-item {
  background: rgba(255, 255, 255, 0.5) !important;
  border: 1px solid rgba(255, 255, 255, 0.55) !important;
}

body.glassmorphism-enabled .modal .form-input {
  background: rgba(255, 255, 255, 0.55) !important;
  border-color: rgba(255, 255, 255, 0.6) !important;
}

body.glassmorphism-enabled .card:hover {
  background: rgba(255, 255, 255, 0.55) !important;
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.06), var(--shadow-md) !important;
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.6) !important;
}

body.glassmorphism-enabled .sidebar {
  background: linear-gradient(180deg, rgba(190, 227, 248, 0.65) 0%, rgba(144, 205, 244, 0.7) 100%) !important;
  backdrop-filter: var(--bf-25, blur(25px)) saturate(140%) !important;
  -webkit-backdrop-filter: var(--bf-25, blur(25px)) saturate(140%) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.4) !important;
}

body.glassmorphism-enabled .settings-trigger-btn {
  background: rgba(255, 255, 255, 0.6) !important;
  backdrop-filter: var(--bf-12, blur(12px)) !important;
  -webkit-backdrop-filter: var(--bf-12, blur(12px)) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
}

body.glassmorphism-enabled .settings-trigger-btn:hover {
  background: rgba(255, 255, 255, 0.8) !important;
  border-color: var(--accent-blue-light) !important;
}

body.glassmorphism-enabled .sticky-page-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.3) !important;
}

body.glassmorphism-enabled .sticky-page-header::before {
  background: rgba(240, 247, 255, 0.4) !important;
  backdrop-filter: var(--bf-20, blur(20px)) !important;
  -webkit-backdrop-filter: var(--bf-20, blur(20px)) !important;
}

body.glassmorphism-enabled .sticky-page-header.scrolled {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03) !important;
}

body.glassmorphism-enabled .sticky-page-header.scrolled::before {
  background: rgba(240, 247, 255, 0.55) !important;
}

body.glassmorphism-enabled .time-tabs {
  background: rgba(49, 130, 206, 0.08) !important;
  backdrop-filter: var(--bf-4, blur(4px)) !important;
}

body.glassmorphism-enabled .time-tab.active {
  background: rgba(255, 255, 255, 0.8) !important;
  box-shadow: var(--shadow-sm) !important;
}

/* Media Query cho Responsive Mobile */

@media (max-width: 768px) {
  .settings-trigger-btn {
    top: 10px;
    right: 64px; /* Nằm ngay cạnh nút menu hamburger */
    width: 40px;
    height: 40px;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--text-sidebar-active) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  
  .settings-trigger-btn:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: white !important;
    transform: rotate(45deg);
  }
  
  .sticky-page-header .page-header {
    padding-right: 0px; /* Không cần lùi padding trên mobile */
  }

  .settings-modal {
    width: 95% !important;
    margin: 0 auto;
    max-height: 85vh !important;
  }
  
  .settings-content {
    max-height: calc(85vh - 180px) !important;
    padding: 16px;
  }
  
  .danger-zone-card {
    flex-direction: column;
    align-items: stretch;
    text-align: left;
  }
  
  .danger-zone-card .reset-btn-system {
    width: 100%;
    justify-content: center;
  }
}

/* ===== 5. TÙY CHỈNH THEME TỐI (DARK THEME OVERRIDES) ===== */

body[data-theme='dark'] {
  /* Color Palette - Dark Slate & Cosmic Blue Theme */
  --bg-primary: #0F172A; /* Deep cosmic dark Slate 900 */
  --bg-secondary: #1E293B; /* Slate 800 */
  --bg-card: rgba(30, 41, 59, 0.92); /* Rich semi-transparent dark card */
  --bg-card-hover: rgba(51, 65, 85, 0.97); /* Lighter dark card on hover */
  --bg-sidebar: #0B0F19; /* Deep dark Slate for Sidebar */
  --bg-sidebar-hover: #1E293B; /* Slate 800 */
  --bg-sidebar-active: #3b82f6; /* Accent blue */
  
  /* Text Colors */
  --text-primary: #F8FAFC; /* Slate 50 */
  --text-secondary: #E2E8F0; /* Slate 200 */
  --text-tertiary: #94A3B8; /* Slate 400 */
  --text-light: #64748B; /* Slate 500 */
  --text-white: #FFFFFF;
  --text-sidebar: #94A3B8; /* Slate 400 for sidebar text */
  --text-sidebar-active: #F8FAFC; /* Slate 50 for active text */
  
  /* Accent Colors */
  --accent-blue: #3b82f6; /* Modern Blue */
  --accent-blue-light: #60A5FA;
  --accent-blue-dark: #93C5FD; /* Bright pastel blue for readable text on dark background */
  --accent-indigo: #6366F1;
  
  /* Status Colors */
  --positive: #10B981; /* Emerald 500 */
  --positive-bg: rgba(16, 185, 129, 0.08);
  --positive-light: rgba(16, 185, 129, 0.15);
  --negative: #EF4444; /* Red 500 */
  --negative-bg: rgba(239, 68, 68, 0.08);
  --negative-light: rgba(239, 68, 68, 0.15);
  --neutral: #94A3B8;
  --neutral-bg: #1E293B;
  
  /* Borders & Shadows */
  --border-color: #334155; /* Slate 700 border */
  --border-light: rgba(255, 255, 255, 0.05); /* Very light subtle lines */

  /* Chart system — tinh tế, tối giản (dark) */
  --chart-grid: rgba(255, 255, 255, 0.06);
  --chart-axis: #64748B;
  --chart-axis-strong: #94A3B8;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 10px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.6);
  --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.7);
}

/* Adjust general elements for dark mode */

body[data-theme='dark'] .sticky-page-header {
  border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}

body[data-theme='dark'] .sticky-page-header::before {
  background: rgba(15, 23, 42, 0.65) !important;
}

body[data-theme='dark'] .sticky-page-header.scrolled::before {
  background: rgba(15, 23, 42, 0.8) !important;
}

body[data-theme='dark'] .card-icon.blue {
  background: rgba(59, 130, 246, 0.15) !important;
  color: var(--accent-blue-light) !important;
}

body[data-theme='dark'] .card-icon.green {
  background: rgba(16, 185, 129, 0.15) !important;
  color: var(--positive) !important;
}

body[data-theme='dark'] .card-icon.red {
  background: rgba(239, 68, 68, 0.15) !important;
  color: var(--negative) !important;
}

body[data-theme='dark'] .card-icon.purple {
  background: rgba(99, 102, 241, 0.15) !important;
  color: #a5b4fc !important;
}

/* ===== Dark mode: Form inputs ===== */

body[data-theme='dark'] .form-input {
  background: rgba(15, 23, 42, 0.7);
  border-color: var(--border-color);
  color: var(--text-primary);
}

body[data-theme='dark'] .form-input:focus {
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18);
}

/* ===== Dark mode: Settings-style popup header ===== */

body[data-theme='dark'] .settings-header {
  background: rgba(11, 15, 25, 0.55);
  border-bottom-color: var(--border-color);
}

body[data-theme='dark'] .settings-icon-bg {
  background: rgba(59, 130, 246, 0.18);
}

body[data-theme='dark'] .settings-close-btn {
  color: var(--text-tertiary);
}

body[data-theme='dark'] .settings-close-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
}

/* ===== Dark mode: Stock detail popup ===== */

body[data-theme='dark'] .stock-detail-header {
  /* Đồng màu thanh menu (sidebar) - giao diện tối */
  --hdr-fg: #ffffff;
  --hdr-fg-soft: rgba(255, 255, 255, 0.72);
  --hdr-chip: rgba(255, 255, 255, 0.16);
  --hdr-chip-hover: rgba(255, 255, 255, 0.30);
  --hdr-border: rgba(255, 255, 255, 0.18);
  background: linear-gradient(180deg, var(--bg-sidebar) 0%, #070A10 100%);
}

body[data-theme='dark'] .stock-detail-item {
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid var(--border-color);
}

body[data-theme='dark'] .modal-actions .btn-secondary {
  background: var(--bg-secondary);
  border-color: var(--border-color);
  color: var(--text-secondary);
}

body[data-theme='dark'] .modal-actions .btn-secondary:hover {
  background: var(--bg-card-hover);
  border-color: var(--accent-blue-light);
  color: var(--accent-blue-light);
}

body[data-theme='dark'] .badge-buy {
  background: rgba(59, 130, 246, 0.15) !important;
  color: #60A5FA !important;
}

body[data-theme='dark'] .badge-sell {
  background: rgba(239, 68, 68, 0.15) !important;
  color: #F87171 !important;
}

body[data-theme='dark'] .badge-dividend {
  background: rgba(16, 185, 129, 0.15) !important;
  color: #34D399 !important;
}

body[data-theme='dark'] .badge-deposit {
  background: rgba(245, 158, 11, 0.15) !important;
  color: #FBBF24 !important;
}

body[data-theme='dark'] .badge-withdraw {
  background: rgba(236, 72, 153, 0.15) !important;
  color: #F472B6 !important;
}

body[data-theme='dark'] .kpi-popup-row.cash-row {
  /* Nền đặc (amber phủ trên nền card) để khi ghim không bị lộ dòng phía sau */
  background: linear-gradient(rgba(245, 158, 11, 0.14), rgba(245, 158, 11, 0.14)), var(--bg-card) !important;
  border-bottom: 2px solid rgba(245, 158, 11, 0.3) !important;
  color: #FBBF24 !important;
}

body[data-theme='dark'] .sidebar {
  border-right-color: rgba(255, 255, 255, 0.06) !important;
  /* Nền tối bán trong + blur giống thanh tiêu đề */
  background: linear-gradient(180deg, rgba(11, 15, 25, 0.72) 0%, rgba(7, 10, 16, 0.78) 100%) !important;
  backdrop-filter: var(--bf-14, blur(14px)) saturate(120%) !important;
  -webkit-backdrop-filter: var(--bf-14, blur(14px)) saturate(120%) !important;
}

body[data-theme='dark'] .nav-item:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  color: var(--text-white) !important;
}

body[data-theme='dark'] .nav-item.active {
  background: var(--accent-blue) !important;
  color: var(--text-white) !important;
}

body[data-theme='dark'] .time-tabs {
  background: #1E293B !important;
}

body[data-theme='dark'] .time-tab.active {
  background: rgba(255, 255, 255, 0.1) !important;
  color: var(--accent-blue-light) !important;
}

body[data-theme='dark'] .settings-modal {
  border-color: rgba(255, 255, 255, 0.08) !important;
  background: #111827 !important; /* Slate 900 */
}

body[data-theme='dark'] .settings-header {
  background: #1F2937 !important; /* Slate 800 */
  border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}

body[data-theme='dark'] .settings-close-btn:hover {
  background: rgba(255, 255, 255, 0.08) !important;
}

body[data-theme='dark'] .settings-icon-bg {
  background: rgba(59, 130, 246, 0.15) !important;
}

body[data-theme='dark'] .settings-icon-bg svg {
  color: var(--accent-blue-light) !important;
}

body[data-theme='dark'] .danger-zone-card {
  background: rgba(229, 62, 98, 0.03) !important;
  border-color: rgba(229, 62, 98, 0.1) !important;
}

body[data-theme='dark'] .recharts-tooltip-wrapper .custom-tooltip {
  background: #1E293B !important;
  border-color: #334155 !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5) !important;
}

body[data-theme='dark'] .recharts-tooltip-wrapper .custom-tooltip .label {
  color: var(--text-primary) !important;
}

body[data-theme='dark'] .recharts-tooltip-wrapper .custom-tooltip .value {
  color: var(--text-secondary) !important;
}

body[data-theme='dark'] .recharts-cartesian-grid-horizontal line,
body[data-theme='dark'] .recharts-cartesian-grid-vertical line {
  stroke: rgba(255, 255, 255, 0.08) !important;
}

body[data-theme='dark'] .custom-tooltip-table th {
  border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

body[data-theme='dark'] .custom-tooltip-table td {
  border-top-color: rgba(255, 255, 255, 0.05) !important;
}

/* Glassmorphism Dark Mode Active */

body.glassmorphism-enabled[data-theme='dark'] {
  background: linear-gradient(135deg, #07090F 0%, #0F172A 50%, #17253F 100%) !important;
}

body.glassmorphism-enabled[data-theme='dark'] .card,
body.glassmorphism-enabled[data-theme='dark'] .settings-modal,
body.glassmorphism-enabled[data-theme='dark'] .connection-status-card {
  background: rgba(17, 24, 39, 0.45) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.35), var(--shadow-sm) !important;
  backdrop-filter: var(--bf-20, blur(20px)) saturate(120%) !important;
  -webkit-backdrop-filter: var(--bf-20, blur(20px)) saturate(120%) !important;
}

/* Popup (.modal) kính mờ - giao diện tối */

body.glassmorphism-enabled[data-theme='dark'] .modal-overlay {
  background: rgba(2, 5, 12, 0.5) !important;
  backdrop-filter: var(--bf-10, blur(10px)) saturate(110%) !important;
  -webkit-backdrop-filter: var(--bf-10, blur(10px)) saturate(110%) !important;
}

body.glassmorphism-enabled[data-theme='dark'] .modal {
  background: rgba(17, 24, 39, 0.62) !important;
  backdrop-filter: var(--bf-28, blur(28px)) saturate(130%) !important;
  -webkit-backdrop-filter: var(--bf-28, blur(28px)) saturate(130%) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 16px 48px 0 rgba(0, 0, 0, 0.5) !important;
}

body.glassmorphism-enabled[data-theme='dark'] .stock-detail-header {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.62) 0%, rgba(7, 10, 16, 0.72) 100%) !important;
  --hdr-border: rgba(255, 255, 255, 0.12);
}

body.glassmorphism-enabled[data-theme='dark'] .settings-header {
  background: rgba(17, 24, 39, 0.45) !important;
  backdrop-filter: var(--bf-20, blur(20px)) saturate(120%) !important;
  -webkit-backdrop-filter: var(--bf-20, blur(20px)) saturate(120%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

body.glassmorphism-enabled[data-theme='dark'] .settings-icon-bg {
  background: rgba(255, 255, 255, 0.1) !important;
}

body.glassmorphism-enabled[data-theme='dark'] .stock-detail-item {
  background: rgba(15, 23, 42, 0.5) !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
}

body.glassmorphism-enabled[data-theme='dark'] .modal .form-input {
  background: rgba(15, 23, 42, 0.55) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

body.glassmorphism-enabled[data-theme='dark'] .card:hover {
  background: rgba(17, 24, 39, 0.55) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

body.glassmorphism-enabled[data-theme='dark'] .sidebar {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.6) 0%, rgba(7, 10, 16, 0.7) 100%) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.05) !important;
}

body.glassmorphism-enabled[data-theme='dark'] .sticky-page-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

body.glassmorphism-enabled[data-theme='dark'] .sticky-page-header::before {
  background: rgba(11, 15, 25, 0.4) !important;
}

body.glassmorphism-enabled[data-theme='dark'] .sticky-page-header.scrolled::before {
  background: rgba(11, 15, 25, 0.6) !important;
}

body.glassmorphism-enabled[data-theme='dark'] .settings-trigger-btn {
  background: rgba(17, 24, 39, 0.5) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

body.glassmorphism-enabled[data-theme='dark'] .settings-trigger-btn:hover {
  background: rgba(17, 24, 39, 0.75) !important;
  border-color: var(--accent-blue-light) !important;
}

/* Modal form elements in dark mode */

body[data-theme='dark'] .form-input,
body[data-theme='dark'] .filter-select,
body[data-theme='dark'] .search-input {
  background-color: rgba(31, 41, 55, 0.85) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: var(--text-primary) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25) !important;
}

/* Mũi tên chevron sáng hơn cho nền tối */

body[data-theme='dark'] .filter-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23A0AEC0' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
}

body[data-theme='dark'] .filter-select:hover {
  border-color: var(--accent-blue-light) !important;
  box-shadow: 0 2px 12px rgba(59, 130, 246, 0.22) !important;
}

body[data-theme='dark'] .filter-select option {
  background-color: #1F2937;
  color: var(--text-primary);
}

body[data-theme='dark'] .form-input:focus,
body[data-theme='dark'] .filter-select:focus,
body[data-theme='dark'] .search-input:focus {
  border-color: var(--accent-blue) !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25) !important;
}

/* Tab Navigation inside settings modal */

.settings-tabs-nav {
  display: flex;
  background: var(--neutral-bg);
  border-bottom: 1px solid var(--border-color);
  padding: 0 16px;
  gap: 8px;
}

.settings-tab-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-tertiary);
  cursor: pointer;
  position: relative;
  transition: all var(--transition-fast);
}

.settings-tab-btn:hover {
  color: var(--text-primary);
}

.settings-tab-btn.active {
  color: var(--accent-blue);
}

.settings-tab-btn.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 16px;
  right: 16px;
  height: 2px;
  background: var(--accent-blue);
  border-radius: 2px 2px 0 0;
}

body[data-theme='dark'] .settings-tabs-nav {
  background: #111827 !important;
  border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}

body[data-theme='dark'] .settings-tab-btn.active {
  color: var(--accent-blue-light) !important;
}

body[data-theme='dark'] .settings-tab-btn.active::after {
  background: var(--accent-blue-light) !important;
}

/* Theme Option Selector Styling */

.theme-selector-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 8px;
}

.theme-option-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 16px 12px;
  border: 2px solid var(--border-color);
  border-radius: var(--radius-md);
  cursor: pointer;
  background: var(--bg-card);
  transition: all var(--transition-normal);
  overflow: hidden;
}

@media (max-width: 520px) {
  .theme-selector-grid {
    grid-template-columns: 1fr;
  }
  .theme-option-card {
    flex-direction: row;
    text-align: left;
  }
}

.theme-option-card:hover {
  border-color: var(--accent-blue-light);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.theme-option-card.active {
  border-color: var(--accent-blue);
  background: var(--bg-card-hover);
}

body[data-theme='dark'] .theme-option-card.active {
  border-color: var(--accent-blue-light);
}

.theme-icon-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--bg-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.theme-option-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

@media (max-width: 520px) {
  .theme-option-info {
    align-items: flex-start;
    text-align: left;
  }
}

.theme-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.theme-desc {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 1px;
}

.active-badge {
  position: absolute;
  top: 0;
  right: 0;
  width: 24px;
  height: 24px;
  background: var(--accent-blue);
  clip-path: polygon(100% 0, 0 0, 100% 100%);
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  padding-right: 2px;
  padding-top: 2px;
}

body[data-theme='dark'] .active-badge {
  background: var(--accent-blue-light);
}

.active-badge::before {
  content: '✓';
  color: white;
  font-size: 9px;
  font-weight: 700;
  transform: translate(-2px, 1px);
}

/* Add smooth transition to all backgrounds and colors to make theme switching gorgeous */

body, .card, .sidebar, .modal, .btn-icon, .form-input, .page-header, .settings-modal, .theme-option-card, .danger-zone-card, .settings-tab-btn {
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease !important;
}

/* ===== Watchlist and Sortable Header Styling ===== */

.watchlist-select {
  font-weight: 600;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  background-color: var(--bg-card);
  color: var(--text-primary);
  height: 38px;
  padding: 0 38px 0 16px;
}

.watchlist-add-form {
  margin-top: 16px;
  animation: fadeIn 0.3s ease;
}

.sortable-th {
  transition: all var(--transition-fast) !important;
}

.sortable-th:hover {
  background: var(--bg-card-hover) !important;
  color: var(--accent-blue) !important;
}

.sortable-th.sorted-active {
  color: var(--accent-blue) !important;
  font-weight: 700 !important;
}

.sort-badge {
  display: inline-flex;
  align-items: center;
  font-size: 11px !important;
  padding: 1px 4px;
  border-radius: 4px;
  background: rgba(49, 130, 206, 0.08);
  border: 1px solid rgba(49, 130, 206, 0.15);
}

body[data-theme='dark'] .sort-badge {
  background: rgba(96, 165, 250, 0.15) !important;
  border-color: rgba(96, 165, 250, 0.25) !important;
}

/* ===== Multi-source Stock detail popup (StockSourceModal) Styling ===== */

.stock-source-modal {
  padding: 24px !important;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  overflow-y: auto;
  animation: slideUp 0.3s ease;
  background: var(--bg-card) !important;
  border: 1px solid var(--border-color);
}

.source-tabs {
  display: flex;
  width: 100%;
}

.source-tab-btn {
  flex: 1;
  padding: 10px 16px;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-tertiary);
  cursor: pointer;
  border-bottom: 3px solid transparent;
  transition: all var(--transition-fast) !important;
  text-align: center;
}

.source-tab-btn:hover {
  color: var(--text-primary);
}

/* Tab Active Styles for each Source */

.source-tab-btn.fireant:hover,
.source-tab-btn.fireant.active {
  color: #ED8936 !important;
  border-bottom-color: #ED8936 !important;
}

.source-tab-btn.vietstock:hover,
.source-tab-btn.vietstock.active {
  color: #38A169 !important;
  border-bottom-color: #38A169 !important;
}

.source-tab-btn.cafef:hover,
.source-tab-btn.cafef.active {
  color: #E53E3E !important;
  border-bottom-color: #E53E3E !important;
}

.news-item {
  transition: all var(--transition-fast) !important;
}

.news-item:hover {
  border-color: var(--accent-blue-light) !important;
  background: var(--bg-card-hover) !important;
  transform: translateX(3px);
}

/* Custom visual icons for Smart Insights in Insights */

.insight-card.positive svg { color: var(--positive) !important; }

.insight-card.negative svg { color: var(--negative) !important; }

.insight-card.info svg { color: var(--accent-blue) !important; }

.insight-card.warning svg { color: #ED8936; }

/* ===== Virtual Portfolio Advisor (AI Chatbot) Styling ===== */

.ai-chat-window {
  height: 320px;
  overflow-y: auto;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 16px;
  background: var(--bg-primary);
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 16px;
  scroll-behavior: smooth;
}

.chat-bubble {
  max-width: 80%;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.6;
  box-shadow: var(--shadow-sm);
  white-space: pre-wrap;
  animation: fadeIn 0.25s ease;
}

.chat-bubble.ai {
  background: var(--bg-card);
  color: var(--text-primary);
  border: 1px solid var(--border-light);
  align-self: flex-start;
  border-top-left-radius: 2px;
}

.chat-bubble.user {
  background: var(--accent-blue);
  color: white;
  align-self: flex-end;
  border-top-right-radius: 2px;
  box-shadow: 0 4px 10px rgba(59, 130, 246, 0.2);
}

.chat-bubble.typing {
  background: var(--bg-card);
  color: var(--text-tertiary);
  border: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
}

.chat-suggestion-btn {
  font-size: 12px;
  padding: 6px 12px;
  height: auto;
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: 20px;
  transition: all var(--transition-fast) !important;
  font-family: inherit;
  font-weight: 500;
}

.chat-suggestion-btn:hover {
  background: var(--bg-card-hover);
  border-color: var(--accent-blue-light);
  color: var(--accent-blue);
  transform: translateY(-1px);
}

/* ===== Dark Mode Tweaks & Contrast Fixes (Solving bug items 6, 7, 8) ===== */

body[data-theme='dark'] .ai-chat-window {
  border-color: rgba(255, 255, 255, 0.08) !important;
  background: #0B0F19 !important; /* Deep dark background for chatting container */
}

body[data-theme='dark'] .chat-bubble.ai {
  background: #1E293B !important; /* Rich contrast bubble for AI */
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: var(--text-primary) !important;
}

body[data-theme='dark'] .chat-suggestion-btn {
  background: #1E293B !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: var(--text-secondary) !important;
}

body[data-theme='dark'] .chat-suggestion-btn:hover {
  background: rgba(59, 130, 246, 0.15) !important;
  color: var(--accent-blue-light) !important;
  border-color: var(--accent-blue-light) !important;
}

/* KPI Card Icons & Header visibility fixes for Dark Mode */

body[data-theme='dark'] .card-icon svg {
  color: currentColor !important;
  stroke: currentColor !important;
}

/* Page subtitle contrast in Light Mode */

.page-header-subtitle {
  color: var(--text-secondary) !important; /* Light text secondary instead of gray text-sidebar */
}

/* Fixing warnings box text and backgrounds in Dark Mode */

body[data-theme='dark'] div[style*="background: #FFF5F5"], 
body[data-theme='dark'] div[style*="background: rgb(255, 245, 245)"] {
  background: rgba(239, 68, 68, 0.12) !important;
  color: #F87171 !important;
  border: 1px solid rgba(239, 68, 68, 0.25) !important;
}

body[data-theme='dark'] div[style*="color: #C53030"] {
  color: #F87171 !important;
}

body[data-theme='dark'] div[style*="color: #9B2C2C"] {
  color: #F87171 !important;
}

body[data-theme='dark'] svg[style*="color: #D69E2E"],
body[data-theme='dark'] svg[style*="color: rgb(214, 158, 46)"] {
  color: #FBBF24 !important;
}

/* ============================================================= */

/* USER MANAGEMENT / AUTH / PROFILE / ADMIN CSS                    */

/* ============================================================= */

/* ===== Auth Overlay & Card ===== */

.auth-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: var(--bf-12, blur(12px));
  -webkit-backdrop-filter: var(--bf-12, blur(12px));
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1100;
  animation: fadeIn 0.2s ease;
}

.auth-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(255, 255, 255, 0.08);
  width: 92%;
  max-width: 420px;
  padding: 36px 32px 32px;
  position: relative;
  border: 1px solid var(--border-color);
}

.auth-close-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--neutral-bg);
  color: var(--text-tertiary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
}

.auth-close-btn:hover {
  background: var(--negative-bg);
  color: var(--negative);
}

/* Brand header */

.auth-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
  justify-content: center;
}

.auth-brand-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--accent-blue), var(--accent-indigo));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.auth-brand-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.3px;
}

/* Form */

.auth-form {
  display: flex;
  flex-direction: column;
}

.auth-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
  text-align: center;
}

.auth-subtitle {
  font-size: 13px;
  color: var(--text-tertiary);
  margin-bottom: 20px;
  text-align: center;
  line-height: 1.5;
}

.auth-field {
  margin-bottom: 16px;
}

.auth-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}

.auth-input {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-family: inherit;
  color: var(--text-primary);
  background: var(--neutral-bg);
  transition: all var(--transition-fast);
  outline: none;
}

.auth-input:focus {
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.12);
  background: #fff;
}

.auth-input::placeholder {
  color: var(--text-light);
}

.auth-input-wrapper {
  position: relative;
}

.auth-input-wrapper .auth-input {
  padding-right: 42px;
}

.auth-eye-btn {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--text-light);
  cursor: pointer;
  padding: 4px;
  display: flex;
  transition: color var(--transition-fast);
}

.auth-eye-btn:hover {
  color: var(--text-secondary);
}

/* Password strength */

.auth-pwd-strength {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  margin-top: 5px;
  font-weight: 500;
}

.auth-pwd-strength.ok { color: var(--positive); }

.auth-pwd-strength.weak { color: var(--negative); }

/* Error / Success messages */

.auth-error {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--negative-bg);
  color: var(--negative);
  border: 1px solid var(--negative-light);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 13px;
  margin-bottom: 16px;
  font-weight: 500;
}

.auth-success {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--positive-bg);
  color: var(--positive);
  border: 1px solid var(--positive-light);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  font-size: 13px;
  margin-bottom: 12px;
  font-weight: 500;
  line-height: 1.5;
}

.auth-msg {
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 13px;
  margin-bottom: 14px;
  font-weight: 500;
}

.auth-msg.success {
  background: var(--positive-bg);
  color: var(--positive);
  border: 1px solid var(--positive-light);
}

.auth-msg.error {
  background: var(--negative-bg);
  color: var(--negative);
  border: 1px solid var(--negative-light);
}

/* Submit button */

.auth-submit-btn {
  width: 100%;
  padding: 11px 20px;
  border: none;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--accent-blue), var(--accent-indigo));
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all var(--transition-normal);
  margin-top: 4px;
  position: relative;
  overflow: hidden;
}

.auth-submit-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(49, 130, 206, 0.35);
}

.auth-submit-btn:active:not(:disabled) {
  transform: translateY(0);
}

.auth-submit-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

/* Loading spinner */

.auth-spinner {
  width: 18px;
  height: 18px;
  border: 2.5px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Forgot password link */

.auth-forgot-link {
  background: none;
  border: none;
  color: var(--accent-blue);
  font-size: 12.5px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  text-align: right;
  margin-top: -8px;
  margin-bottom: 14px;
  padding: 0;
  transition: color var(--transition-fast);
}

.auth-forgot-link:hover {
  color: var(--accent-indigo);
  text-decoration: underline;
}

/* Back button (Forgot view) */

.auth-back-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: var(--text-tertiary);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  margin-bottom: 16px;
  padding: 0;
  transition: color var(--transition-fast);
}

.auth-back-btn:hover {
  color: var(--accent-blue);
}

/* Switch text */

.auth-switch-text {
  text-align: center;
  font-size: 13px;
  color: var(--text-tertiary);
  margin-top: 18px;
}

.auth-switch-link {
  background: none;
  border: none;
  color: var(--accent-blue);
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  font-size: 13px;
  padding: 0;
  transition: color var(--transition-fast);
}

.auth-switch-link:hover {
  color: var(--accent-indigo);
  text-decoration: underline;
}

/* Demo hint */

.auth-demo-hint {
  margin-top: 18px;
  padding: 12px;
  background: rgba(49, 130, 206, 0.06);
  border: 1px dashed rgba(49, 130, 206, 0.25);
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
}

.auth-demo-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent-blue);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}

.auth-demo-hint code {
  font-size: 11.5px;
  color: var(--text-secondary);
  background: rgba(49, 130, 206, 0.08);
  padding: 2px 8px;
  border-radius: 4px;
  font-family: 'SF Mono', 'Consolas', monospace;
}

/* ===== Account Guest View ===== */

.account-guest-view {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 8px;
  text-align: center;
}

.account-guest-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(49, 130, 206, 0.12), rgba(90, 103, 216, 0.12));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-blue);
  margin-bottom: 16px;
}

.account-guest-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.account-guest-desc {
  font-size: 13px;
  color: var(--text-tertiary);
  line-height: 1.6;
  margin-bottom: 24px;
  max-width: 320px;
}

.account-guest-actions {
  display: flex;
  gap: 12px;
  width: 100%;
  max-width: 320px;
}

.auth-action-btn {
  flex: 1;
  padding: 11px 16px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  transition: all var(--transition-normal);
  border: none;
}

.auth-action-btn.primary {
  background: linear-gradient(135deg, var(--accent-blue), var(--accent-indigo));
  color: #fff;
}

.auth-action-btn.primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(49, 130, 206, 0.3);
}

.auth-action-btn.secondary {
  background: rgba(49, 130, 206, 0.08);
  color: var(--accent-blue);
  border: 1.5px solid rgba(49, 130, 206, 0.2);
}

.auth-action-btn.secondary:hover {
  background: rgba(49, 130, 206, 0.14);
  border-color: rgba(49, 130, 206, 0.35);
}

/* ===== Profile Card ===== */

.profile-card {
  background: var(--neutral-bg);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 20px;
  margin-bottom: 20px;
}

.profile-header-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.profile-avatar-large {
  width: 52px;
  height: 52px;
  min-width: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Khung cắt (crop) ảnh đại diện */

.crop-stage {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  background: #0b0f19;
  touch-action: none;
  cursor: grab;
  user-select: none;
}

.crop-stage:active {
  cursor: grabbing;
}

.crop-circle-overlay {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.45);
  border: 2px solid rgba(255, 255, 255, 0.85);
  pointer-events: none;
}

/* Nút tải ảnh đại diện đặt chính giữa avatar */

.sidebar-account-trigger:hover {
  background: var(--bg-sidebar-hover);
}

.account-avatar-wrap {
  position: relative;
}

.account-avatar-upload-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.9);
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background 0.18s ease, transform 0.18s ease;
}

.account-avatar-upload-btn:hover {
  background: rgba(0, 0, 0, 0.72);
  transform: translate(-50%, -50%) scale(1.08);
}

.profile-info {
  flex: 1;
  min-width: 0;
}

.profile-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.profile-email {
  font-size: 12.5px;
  color: var(--text-tertiary);
  margin-bottom: 6px;
}

.profile-meta-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.role-badge, .status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2px;
}

.profile-join-date {
  font-size: 11px;
  color: var(--text-light);
}

/* Profile actions */

.profile-actions-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  border-top: 1px solid var(--border-light);
  padding-top: 14px;
}

.profile-action-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  color: var(--text-secondary);
  font-size: 12.5px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.profile-action-btn:hover {
  border-color: var(--accent-blue);
  color: var(--accent-blue);
  background: rgba(49, 130, 206, 0.04);
}

.profile-action-btn.danger {
  color: var(--negative);
  border-color: rgba(229, 62, 62, 0.2);
}

.profile-action-btn.danger:hover {
  background: var(--negative-bg);
  border-color: var(--negative);
}

/* Profile edit form */

.profile-edit-form {
  border-top: 1px solid var(--border-light);
  padding-top: 16px;
}

.profile-edit-form .auth-field {
  margin-bottom: 14px;
}

.profile-edit-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

/* Avatar color picker */

.avatar-color-picker {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.avatar-color-swatch {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2.5px solid transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
  position: relative;
}

.avatar-color-swatch:hover {
  transform: scale(1.15);
}

.avatar-color-swatch.active {
  border-color: var(--text-primary);
  box-shadow: 0 0 0 2px var(--bg-card), 0 0 0 4px var(--text-secondary);
}

/* ===== Admin Panel ===== */

.admin-panel {
  border-top: 1px solid var(--border-light);
  padding-top: 16px;
}

.admin-panel .section-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-tertiary);
  margin-bottom: 14px;
}

/* Admin stats */

.admin-stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}

.admin-stat-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
}

.admin-stat-card svg {
  opacity: 0.6;
}

.admin-stat-card.active-stat svg { color: var(--positive); opacity: 1; }

.admin-stat-card.locked-stat svg { color: #DD6B20; opacity: 1; }

.admin-stat-value {
  display: block;
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}

.admin-stat-label {
  display: block;
  font-size: 10.5px;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

/* Admin table */

.admin-table-wrapper {
  overflow-x: auto;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
}

.admin-users-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}

.admin-users-table thead {
  background: var(--neutral-bg);
}

.admin-users-table th {
  padding: 10px 12px;
  text-align: left;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-tertiary);
  border-bottom: 1px solid var(--border-color);
  white-space: nowrap;
}

.admin-users-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-light);
  vertical-align: middle;
}

.admin-users-table tr:last-child td {
  border-bottom: none;
}

.admin-users-table tr.self-row {
  background: rgba(49, 130, 206, 0.04);
}

.admin-users-table tr:hover:not(.self-row) {
  background: var(--bg-card-hover);
}

/* Admin user cell */

.admin-user-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}

.admin-user-avatar {
  width: 30px;
  height: 30px;
  min-width: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}

.admin-user-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.admin-user-name {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 12.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-user-name small {
  font-weight: 500;
  color: var(--accent-blue);
  margin-left: 4px;
}

.admin-user-email {
  font-size: 11px;
  color: var(--text-light);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Role select dropdown */

.admin-role-select {
  padding: 4px 8px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  font-size: 11.5px;
  font-family: inherit;
  background: var(--bg-card);
  color: var(--text-primary);
  cursor: pointer;
  outline: none;
  transition: border-color var(--transition-fast);
}

.admin-role-select:focus {
  border-color: var(--accent-blue);
}

/* Admin action buttons */

.admin-action-btns {
  display: flex;
  gap: 4px;
}

.admin-action-btn {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
}

.admin-action-btn.warning {
  color: #DD6B20;
}

.admin-action-btn.warning:hover {
  background: #FEFCBF;
  border-color: #DD6B20;
}

.admin-action-btn.success {
  color: var(--positive);
}

.admin-action-btn.success:hover {
  background: var(--positive-bg);
  border-color: var(--positive);
}

.admin-action-btn.danger {
  color: var(--negative);
}

.admin-action-btn.danger:hover {
  background: var(--negative-bg);
  border-color: var(--negative);
}

.admin-no-action {
  color: var(--text-light);
  font-size: 12px;
}

/* ===== DARK MODE: User Management Overrides ===== */

body[data-theme='dark'] .auth-card {
  background: #1E293B;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5);
}

body[data-theme='dark'] .auth-close-btn {
  background: rgba(255, 255, 255, 0.06);
  color: #94A3B8;
}

body[data-theme='dark'] .auth-close-btn:hover {
  background: rgba(239, 68, 68, 0.15);
  color: #F87171;
}

body[data-theme='dark'] .auth-brand-name {
  color: #F1F5F9;
}

body[data-theme='dark'] .auth-input {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
  color: #F1F5F9;
}

body[data-theme='dark'] .auth-input:focus {
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.2);
  background: rgba(255, 255, 255, 0.08);
}

body[data-theme='dark'] .auth-input::placeholder {
  color: #64748B;
}

body[data-theme='dark'] .auth-eye-btn {
  color: #64748B;
}

body[data-theme='dark'] .auth-eye-btn:hover {
  color: #94A3B8;
}

body[data-theme='dark'] .auth-error {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.2);
  color: #F87171;
}

body[data-theme='dark'] .auth-success {
  background: rgba(56, 161, 105, 0.1);
  border-color: rgba(56, 161, 105, 0.2);
  color: #68D391;
}

body[data-theme='dark'] .auth-msg.success {
  background: rgba(56, 161, 105, 0.1);
  border-color: rgba(56, 161, 105, 0.2);
  color: #68D391;
}

body[data-theme='dark'] .auth-msg.error {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.2);
  color: #F87171;
}

body[data-theme='dark'] .auth-demo-hint {
  background: rgba(49, 130, 206, 0.08);
  border-color: rgba(49, 130, 206, 0.2);
}

body[data-theme='dark'] .auth-demo-hint code {
  background: rgba(49, 130, 206, 0.12);
  color: #94A3B8;
}

body[data-theme='dark'] .auth-submit-btn {
  background: linear-gradient(135deg, #3B82F6, #6366F1);
}

body[data-theme='dark'] .auth-submit-btn:hover:not(:disabled) {
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.35);
}

/* Dark: Guest view */

body[data-theme='dark'] .account-guest-icon {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(99, 102, 241, 0.15));
  color: #60A5FA;
}

body[data-theme='dark'] .account-guest-title {
  color: #F1F5F9;
}

body[data-theme='dark'] .auth-action-btn.secondary {
  background: rgba(59, 130, 246, 0.1);
  color: #60A5FA;
  border-color: rgba(59, 130, 246, 0.25);
}

body[data-theme='dark'] .auth-action-btn.secondary:hover {
  background: rgba(59, 130, 246, 0.18);
  border-color: rgba(59, 130, 246, 0.4);
}

/* Dark: Profile */

body[data-theme='dark'] .profile-card {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.06);
}

body[data-theme='dark'] .profile-name {
  color: #F1F5F9;
}

body[data-theme='dark'] .profile-email {
  color: #64748B;
}

body[data-theme='dark'] .profile-actions-row {
  border-top-color: rgba(255, 255, 255, 0.06);
}

body[data-theme='dark'] .profile-action-btn {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
  color: #94A3B8;
}

body[data-theme='dark'] .profile-action-btn:hover {
  border-color: var(--accent-blue);
  color: #60A5FA;
  background: rgba(59, 130, 246, 0.08);
}

body[data-theme='dark'] .profile-action-btn.danger {
  color: #F87171;
  border-color: rgba(239, 68, 68, 0.15);
}

body[data-theme='dark'] .profile-action-btn.danger:hover {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.3);
}

body[data-theme='dark'] .profile-edit-form {
  border-top-color: rgba(255, 255, 255, 0.06);
}

body[data-theme='dark'] .avatar-color-swatch.active {
  border-color: #F1F5F9;
  box-shadow: 0 0 0 2px #1E293B, 0 0 0 4px #94A3B8;
}

/* Dark: Admin panel */

body[data-theme='dark'] .admin-panel {
  border-top-color: rgba(255, 255, 255, 0.06);
}

body[data-theme='dark'] .admin-stat-card {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.06);
}

body[data-theme='dark'] .admin-stat-value {
  color: #F1F5F9;
}

body[data-theme='dark'] .admin-table-wrapper {
  border-color: rgba(255, 255, 255, 0.06);
}

body[data-theme='dark'] .admin-users-table thead {
  background: rgba(255, 255, 255, 0.03);
}

body[data-theme='dark'] .admin-users-table th {
  color: #64748B;
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

body[data-theme='dark'] .admin-users-table td {
  border-bottom-color: rgba(255, 255, 255, 0.04);
}

body[data-theme='dark'] .admin-users-table tr.self-row {
  background: rgba(59, 130, 246, 0.06);
}

body[data-theme='dark'] .admin-users-table tr:hover:not(.self-row) {
  background: rgba(255, 255, 255, 0.03);
}

body[data-theme='dark'] .admin-user-name {
  color: #E2E8F0;
}

body[data-theme='dark'] .admin-user-email {
  color: #475569;
}

body[data-theme='dark'] .admin-role-select {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
  color: #E2E8F0;
}

body[data-theme='dark'] .admin-role-select:focus {
  border-color: var(--accent-blue);
}

body[data-theme='dark'] .admin-action-btn {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}

body[data-theme='dark'] .admin-action-btn.warning:hover {
  background: rgba(221, 107, 32, 0.15);
  border-color: #DD6B20;
}

body[data-theme='dark'] .admin-action-btn.success:hover {
  background: rgba(56, 161, 105, 0.15);
  border-color: #68D391;
}

body[data-theme='dark'] .admin-action-btn.danger:hover {
  background: rgba(239, 68, 68, 0.15);
  border-color: #F87171;
}

/* Dark + Glassmorphism for auth */

body.glassmorphism-enabled[data-theme='dark'] .auth-card {
  background: rgba(30, 41, 59, 0.85);
  backdrop-filter: var(--bf-20, blur(20px));
  -webkit-backdrop-filter: var(--bf-20, blur(20px));
}

/* ============================================================= */

/* WELCOME / LANDING PAGE CSS                                      */

/* ============================================================= */

.welcome-loading {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-primary);
}

.welcome-page {
  min-height: 100vh;
  background: linear-gradient(160deg, #E8F4FD 0%, #D4ECFB 30%, #BEE3F8 100%);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow-x: hidden;
}

/* ===== Top Navigation ===== */

.welcome-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 40px;
  position: relative;
  z-index: 10;
}

.welcome-nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.welcome-nav-logo {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--accent-blue), var(--accent-indigo));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 2px 10px rgba(49, 130, 206, 0.3);
}

.welcome-nav-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--accent-blue-dark);
  letter-spacing: -0.3px;
}

.welcome-nav-actions {
  display: flex;
  gap: 10px;
}

.welcome-nav-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 20px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all var(--transition-normal);
  border: none;
}

.welcome-nav-btn.ghost {
  background: rgba(255, 255, 255, 0.5);
  color: var(--accent-blue-dark);
  border: 1px solid rgba(49, 130, 206, 0.15);
}

.welcome-nav-btn.ghost:hover {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(49, 130, 206, 0.3);
  box-shadow: var(--shadow-sm);
}

.welcome-nav-btn.primary {
  background: linear-gradient(135deg, var(--accent-blue), var(--accent-indigo));
  color: #fff;
  box-shadow: 0 2px 10px rgba(49, 130, 206, 0.25);
}

.welcome-nav-btn.primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(49, 130, 206, 0.35);
}

/* ===== Hero Section ===== */

.welcome-hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 40px 40px;
  position: relative;
  z-index: 5;
}

.welcome-hero-content {
  text-align: center;
  max-width: 680px;
  margin-bottom: 48px;
}

.welcome-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  border-radius: 20px;
  background: rgba(49, 130, 206, 0.08);
  border: 1px solid rgba(49, 130, 206, 0.15);
  color: var(--accent-blue);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
  margin-bottom: 20px;
}

.welcome-hero-title {
  font-size: 44px;
  font-weight: 800;
  color: var(--accent-blue-dark);
  line-height: 1.15;
  letter-spacing: -1px;
  margin-bottom: 16px;
}

.welcome-hero-gradient {
  background: linear-gradient(135deg, var(--accent-blue), var(--accent-indigo), #805AD5);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.welcome-hero-desc {
  font-size: 16px;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 28px;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

.welcome-hero-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
}

.welcome-hero-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 28px;
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all var(--transition-normal);
  border: none;
}

.welcome-hero-btn.primary {
  background: linear-gradient(135deg, var(--accent-blue), var(--accent-indigo));
  color: #fff;
  box-shadow: 0 4px 16px rgba(49, 130, 206, 0.3);
}

.welcome-hero-btn.primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(49, 130, 206, 0.4);
}

.welcome-hero-btn.secondary {
  background: rgba(255, 255, 255, 0.7);
  color: var(--accent-blue-dark);
  border: 1.5px solid rgba(49, 130, 206, 0.2);
}

.welcome-hero-btn.secondary:hover {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(49, 130, 206, 0.4);
  box-shadow: var(--shadow-md);
}

/* ===== Feature Cards ===== */

.welcome-features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: 920px;
  width: 100%;
}

.welcome-feature-card {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: var(--bf-10, blur(10px));
  -webkit-backdrop-filter: var(--bf-10, blur(10px));
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--radius-md);
  padding: 24px 20px;
  text-align: center;
  transition: all var(--transition-normal);
}

.welcome-feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
  background: rgba(255, 255, 255, 0.9);
}

.welcome-feature-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
}

.welcome-feature-icon.blue {
  background: rgba(49, 130, 206, 0.1);
  color: var(--accent-blue);
}

.welcome-feature-icon.green {
  background: rgba(56, 161, 105, 0.1);
  color: var(--positive);
}

.welcome-feature-icon.purple {
  background: rgba(128, 90, 213, 0.1);
  color: #805AD5;
}

.welcome-feature-icon.orange {
  background: rgba(221, 107, 32, 0.1);
  color: #DD6B20;
}

.welcome-feature-card h3 {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.welcome-feature-card p {
  font-size: 12px;
  color: var(--text-tertiary);
  line-height: 1.6;
}

/* ===== Footer ===== */

.welcome-footer {
  text-align: center;
  padding: 20px 40px;
  font-size: 12px;
  color: var(--text-light);
  position: relative;
  z-index: 5;
}

/* ===== Responsive ===== */

@media (max-width: 900px) {
  .welcome-features {
    grid-template-columns: repeat(2, 1fr);
    max-width: 500px;
  }
  .welcome-hero-title {
    font-size: 32px;
  }
}

@media (max-width: 600px) {
  .welcome-nav {
    padding: 12px 20px;
  }
  .welcome-nav-btn span {
    display: none;
  }
  .welcome-hero {
    padding: 20px 20px 30px;
  }
  .welcome-hero-title {
    font-size: 26px;
  }
  .welcome-hero-desc {
    font-size: 14px;
  }
  .welcome-features {
    grid-template-columns: 1fr;
    max-width: 340px;
  }
  .welcome-hero-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .welcome-hero-btn {
    justify-content: center;
  }
}

/* ===== DARK MODE: Welcome Page ===== */

body[data-theme='dark'] .welcome-page {
  background: linear-gradient(160deg, #0F172A 0%, #1E293B 50%, #0F172A 100%);
}

body[data-theme='dark'] .welcome-nav-name {
  color: #F1F5F9;
}

body[data-theme='dark'] .welcome-nav-btn.ghost {
  background: rgba(255, 255, 255, 0.06);
  color: #CBD5E1;
  border-color: rgba(255, 255, 255, 0.08);
}

body[data-theme='dark'] .welcome-nav-btn.ghost:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.15);
}

body[data-theme='dark'] .welcome-hero-badge {
  background: rgba(59, 130, 246, 0.12);
  border-color: rgba(59, 130, 246, 0.2);
  color: #60A5FA;
}

body[data-theme='dark'] .welcome-hero-title {
  color: #F1F5F9;
}

body[data-theme='dark'] .welcome-hero-gradient {
  background: linear-gradient(135deg, #60A5FA, #818CF8, #A78BFA);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

body[data-theme='dark'] .welcome-hero-desc {
  color: #94A3B8;
}

body[data-theme='dark'] .welcome-hero-btn.secondary {
  background: rgba(255, 255, 255, 0.06);
  color: #CBD5E1;
  border-color: rgba(255, 255, 255, 0.1);
}

body[data-theme='dark'] .welcome-hero-btn.secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}

body[data-theme='dark'] .welcome-feature-card {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.06);
  backdrop-filter: var(--bf-10, blur(10px));
}

body[data-theme='dark'] .welcome-feature-card:hover {
  background: rgba(255, 255, 255, 0.07);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
}

body[data-theme='dark'] .welcome-feature-card h3 {
  color: #E2E8F0;
}

body[data-theme='dark'] .welcome-feature-card p {
  color: #64748B;
}

body[data-theme='dark'] .welcome-feature-icon.blue {
  background: rgba(59, 130, 246, 0.15);
  color: #60A5FA;
}

body[data-theme='dark'] .welcome-feature-icon.green {
  background: rgba(56, 161, 105, 0.15);
  color: #68D391;
}

body[data-theme='dark'] .welcome-feature-icon.purple {
  background: rgba(128, 90, 213, 0.15);
  color: #A78BFA;
}

body[data-theme='dark'] .welcome-feature-icon.orange {
  background: rgba(221, 107, 32, 0.15);
  color: #F6AD55;
}

body[data-theme='dark'] .welcome-footer {
  color: #475569;
}

/* ===== Vô hiệu hóa hiệu ứng di chuột (No Hover Effects Mode) ===== */

body.no-hover-effects .btn,
body.no-hover-effects .btn-icon,
body.no-hover-effects .nav-item,
body.no-hover-effects .time-tab,
body.no-hover-effects .card,
body.no-hover-effects .timeline-item,
body.no-hover-effects .insight-card,
body.no-hover-effects .time-clock-badge,
body.no-hover-effects .settings-trigger-btn,
body.no-hover-effects .settings-close-btn,
body.no-hover-effects .refresh-btn-manual,
body.no-hover-effects .reset-btn-system,
body.no-hover-effects .auth-submit-btn,
body.no-hover-effects .auth-action-btn,
body.no-hover-effects .auth-close-btn,
body.no-hover-effects .settings-tab-btn,
body.no-hover-effects .theme-option-card,
body.no-hover-effects .chat-suggestion-btn {
  transform: none !important;
  transition: none !important;
  animation: none !important;
}

body.no-hover-effects .btn:hover,
body.no-hover-effects .btn-icon:hover,
body.no-hover-effects .nav-item:hover,
body.no-hover-effects .time-tab:hover,
body.no-hover-effects .card:hover,
body.no-hover-effects .timeline-item:hover,
body.no-hover-effects .insight-card:hover,
body.no-hover-effects .time-clock-badge:hover,
body.no-hover-effects .settings-trigger-btn:hover,
body.no-hover-effects .settings-close-btn:hover,
body.no-hover-effects .refresh-btn-manual:hover,
body.no-hover-effects .reset-btn-system:hover,
body.no-hover-effects .auth-submit-btn:hover,
body.no-hover-effects .auth-action-btn:hover,
body.no-hover-effects .auth-close-btn:hover,
body.no-hover-effects .settings-tab-btn:hover,
body.no-hover-effects .theme-option-card:hover,
body.no-hover-effects .chat-suggestion-btn:hover {
  transform: none !important;
  box-shadow: none !important;
  filter: none !important;
}

/* Khôi phục box-shadow mặc định thay vì shadow khi hover */

body.no-hover-effects .btn-primary:hover {
  box-shadow: 0 2px 8px rgba(49, 130, 206, 0.3) !important;
}

body.no-hover-effects .btn-secondary:hover {
  box-shadow: none !important;
}

body.no-hover-effects .card:hover {
  box-shadow: var(--shadow-sm) !important;
}

body.no-hover-effects .timeline-item:hover,
body.no-hover-effects .insight-card:hover {
  box-shadow: var(--shadow-sm) !important;
}

body.no-hover-effects .time-clock-badge:hover {
  box-shadow: var(--shadow-md) !important;
}

body.no-hover-effects .settings-trigger-btn:hover {
  box-shadow: var(--shadow-md) !important;
}

/* Ẩn các pseudoelements phát sáng nền khi di chuột qua các nút và menu */

body.no-hover-effects .btn::before,
body.no-hover-effects .btn::after,
body.no-hover-effects .btn:hover::before,
body.no-hover-effects .btn:hover::after,
body.no-hover-effects .btn-icon::before,
body.no-hover-effects .btn-icon::after,
body.no-hover-effects .btn-icon:hover::before,
body.no-hover-effects .btn-icon:hover::after,
body.no-hover-effects .nav-item::before,
body.no-hover-effects .nav-item::after,
body.no-hover-effects .nav-item:hover::before,
body.no-hover-effects .nav-item:hover::after,
body.no-hover-effects .time-tab::before,
body.no-hover-effects .time-tab::after,
body.no-hover-effects .time-tab:hover::before,
body.no-hover-effects .time-tab:hover::after {
  display: none !important;
  opacity: 0 !important;
}

/* ===== Tinh chỉnh Giao diện Mobile Tự động và Toàn diện (Mobile Responsive Optimization) ===== */

@media (max-width: 768px) {
  /* Chặn lệch ngang bằng max-width (KHÔNG dùng overflow trên tổ tiên — sẽ phá
     backdrop-filter của sticky header & ô giao dịch trên Chrome/Edge/Firefox) */
  html, body {
    max-width: 100vw !important;
  }

  /* Tối ưu hóa padding của nội dung chính trên điện thoại */
  .main-content {
    max-width: 100vw !important;
    padding: 60px 12px 24px !important;
  }

  /* Tinh chỉnh chiều cao thanh Mobile Header và khoảng cách trang */
  .mobile-header {
    height: 48px !important;
  }
  
  .mobile-header .sidebar-logo-img {
    width: 32px !important;
    height: 32px !important;
  }

  .sticky-page-header {
    position: relative !important; /* Thay đổi thành relative để cuộn tự nhiên trên mobile, tránh đè lấp nội dung */
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    margin: 0 0 20px 0 !important; /* Bỏ margin âm để không đè lấp lên các card KPI phía dưới */
    padding: 12px 0 !important; /* Căn chỉnh padding gọn gàng, rộng rãi */
    background: transparent !important; /* Loại bỏ nền đè mờ trên mobile để tránh clashing chữ */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: none !important; /* Bỏ border bottom để liền mạch với giao diện */
  }

  /* Tắt luôn lớp blur ::before trên mobile (header để trong suốt, cuộn tự nhiên) */
  .sticky-page-header::before {
    display: none !important;
  }

  .settings-trigger-btn {
    top: 4px !important;
    right: 56px !important;
  }

  .sticky-page-header .page-header {
    padding-right: 0 !important;
    margin-bottom: 12px !important;
  }

  /* Đè kích thước font chữ tiêu đề trên mobile cho tinh tế */
  .page-header h1 {
    font-size: 20px !important;
  }

  .page-header-subtitle {
    font-size: 12px !important;
    line-height: 1.4 !important;
  }

  /* Tự động sắp xếp các nút hành động & badge ngày giờ */
  .header-actions {
    display: flex !important;
    flex-wrap: wrap !important; /* Cho phép tự động xuống hàng khi thiếu chỗ */
    gap: 8px !important;
    align-items: center !important;
    margin-top: 10px !important;
    width: 100% !important;
  }

  /* Thu gọn kích cỡ của Lịch & Đồng hồ để tiết kiệm không gian */
  .time-clock-badge {
    padding: 6px 12px !important;
    font-size: 11px !important;
    border-radius: 14px !important;
    gap: 5px !important;
    flex: 1 1 calc(50% - 8px) !important; /* Đẩy 2 badge Lịch & Giờ nằm song song bằng nhau */
    justify-content: center !important;
  }

  .time-clock-badge svg {
    width: 12px !important;
    height: 12px !important;
  }

  /* Cho phép các nút thao tác khác tự động co giãn đều nhau */
  .header-actions .btn {
    flex: 1 1 auto !important;
    justify-content: center !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
  }

  /* Đảm bảo toàn bộ bảng dữ liệu không gây vỡ giao diện */
  .table-container {
    width: 100% !important;
    overflow-x: auto !important; /* Tạo thanh cuộn riêng trong bảng thay vì đẩy lùi trang */
    -webkit-overflow-scrolling: touch;
  }
  
  .data-table th, .data-table td {
    padding: 10px 12px !important;
    font-size: 12px !important;
  }

  /* Chỉnh lại Filter bar và Search input xếp chồng dọc hợp lý */
  .filter-bar {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .filter-bar .filter-select,
  .filter-bar .search-wrapper,
  .filter-bar .search-input {
    width: 100% !important;
    flex: 0 0 auto !important; /* tránh flex-basis bị hiểu thành chiều cao trong flex cột */
  }
  /* Nhóm bộ lọc (vai trò/trạng thái) trong AdminPanel: full width, không tạo khoảng trống */
  .filter-bar > div {
    width: 100%;
  }

  /* CustomSelect & bộ lọc ngày: cao theo nội dung (không lấy flex-basis làm chiều cao) + full width */
  .filter-bar .custom-select {
    flex: 0 0 auto !important;
    width: 100% !important;
  }
  .filter-bar .date-range-filter {
    flex: 0 0 auto !important;
    width: 100% !important;
  }
  .filter-bar .date-range-filter .filter-date {
    flex: 1 1 auto;
    min-width: 0;
  }

  /* Tối ưu hóa popup cài đặt trên mobile */
  .settings-modal {
    width: 92% !important;
    max-height: 85vh !important;
    border-radius: var(--radius-lg) !important;
  }

  .settings-tabs-nav {
    gap: 4px !important;
    padding: 6px !important;
  }

  .settings-tab-btn {
    padding: 8px 4px !important;
    font-size: 11px !important;
    gap: 4px !important;
  }

  .settings-tab-btn svg {
    width: 13px !important;
    height: 13px !important;
  }

  .setting-item {
    flex-direction: column !important; /* Xếp nhãn text trên, nút switch dưới */
    align-items: stretch !important;
    gap: 10px !important;
    padding: 12px 0 !important;
  }

  .setting-item .switch {
    align-self: flex-end !important; /* Nút switch dạt sang phải */
  }

  .theme-selector-grid {
    grid-template-columns: 1fr !important; /* Xếp dọc tùy chọn Theme sáng/tối */
    gap: 10px !important;
  }

  .admin-stats-row {
    grid-template-columns: 1fr !important; /* Xếp dọc card thống kê admin */
    gap: 8px !important;
  }

  .admin-users-table th:nth-child(3),
  .admin-users-table td:nth-child(3) {
    display: none !important; /* Ẩn cột trạng thái không quan trọng trên màn hình siêu hẹp */
  }

  /* ===== Tối ưu hóa Trang Tổng quan (Dashboard) trên Mobile ===== */
  /* Hộp Lọc Watchlist & Nút CRUD */
  .watchlist-controls {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    width: 100% !important;
    margin-top: 8px !important;
  }
  
  .watchlist-select {
    flex: 1 1 100% !important;
    margin-bottom: 4px !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  
  .watchlist-controls button {
    flex: 1 1 auto !important;
    justify-content: center !important;
    height: 36px !important;
  }

  /* Form thêm mã CK mô phỏng */
  .watchlist-add-form {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    width: 100% !important;
  }
  
  .watchlist-add-form span {
    font-size: 12px !important;
    margin-bottom: 2px !important;
  }
  
  .watchlist-add-form input {
    width: 100% !important;
  }
  
  .watchlist-add-form button {
    width: 100% !important;
    justify-content: center !important;
  }

  /* Tác động danh mục / Card change values */
  .card-change {
    flex-wrap: wrap !important;
    height: auto !important;
    border-radius: 8px !important;
    font-size: 11px !important;
    padding: 4px 8px !important;
    line-height: 1.3 !important;
    text-align: left !important;
  }

  /* Phân bổ ngành labels */
  .sector-allocation-item > div:first-child {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
  }

  /* Cho phép card-title chứa badge co giãn và rớt dòng */
  .card-title {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    align-items: center !important;
    line-height: 1.4 !important;
  }
  
  .card-title .badge {
    font-size: 11px !important;
    padding: 3px 8px !important;
    line-height: 1.2 !important;
  }

  /* Fix cho Recharts container để co giãn chuẩn */
  .charts-grid > .card,
  .charts-grid-equal > .card {
    min-width: 0 !important;
  }
  
  .chart-container {
    min-width: 0 !important;
    min-height: 280px !important;
  }

  /* Đưa dòng tuỳ chọn bộ lọc thời gian xuống dưới tiêu đề biểu đồ và chỉnh lên trên một xíu */
  .charts-grid .card-header {
    display: flex !important;
    flex-direction: column !important; /* Xếp dọc: tiêu đề ở trên, bộ lọc ở dưới */
    align-items: flex-start !important; /* Căn lề trái */
    margin-bottom: 8px !important; /* Dịch chuyển biểu đồ lên sát trên một chút */
    gap: 8px !important;
    width: 100% !important;
  }

  .charts-grid .card-header .card-title {
    font-size: 13px !important;
    white-space: normal !important;
    letter-spacing: 0.5px !important;
  }

  /* Bộ lọc ALL, 1Y, 6M co giãn 100% chiều rộng trên dòng mới để dễ chạm chọn */
  .charts-grid .card-header .time-tabs {
    display: flex !important;
    width: 100% !important;
    justify-content: space-between !important;
    gap: 2px !important;
    padding: 3px !important;
    border-radius: 8px !important;
  }

  .charts-grid .card-header .time-tab {
    flex: 1 !important; /* Chia đều chiều rộng nút lọc trên mobile */
    text-align: center !important;
    padding: 6px 0 !important;
    font-size: 11px !important;
    border-radius: 6px !important;
  }
}

/* ===================== CHIA SẺ CÔNG KHAI ===================== */

/* Cấu hình trong Settings: chip chọn mốc thời gian */

.share-range-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.share-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--border-color);
  background: var(--bg-primary);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s ease;
}

.share-chip:hover {
  border-color: var(--accent-blue);
  color: var(--accent-blue);
}

.share-chip.active {
  background: var(--accent-blue);
  border-color: var(--accent-blue);
  color: #fff;
}

/* Cấu hình trong Settings: ô đường liên kết */

.share-link-box {
  margin-top: 14px;
}

.share-link-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
}

.share-link-row .form-input {
  flex: 1;
  font-size: 13px;
  color: var(--text-secondary);
}

.share-link-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  flex-shrink: 0;
  background: rgba(49, 130, 206, 0.1);
  color: var(--accent-blue);
  border: 1px solid rgba(49, 130, 206, 0.2);
}

/* Trang chia sẻ công khai (/chia-se/:id) */

.share-page {
  min-height: 100vh;
  width: 100%;
  background: var(--bg-primary);
  padding: 32px 16px 48px;
  display: flex;
  justify-content: center;
}

.share-loading {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.share-container {
  width: 100%;
  max-width: 860px;
}

.share-header {
  margin-bottom: 18px;
}

.share-user {
  display: flex;
  align-items: center;
  gap: 14px;
}

.share-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 22px;
  flex-shrink: 0;
  box-shadow: var(--shadow-md);
}

.share-name {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.2;
}

.share-subtitle {
  font-size: 13px;
  color: var(--text-secondary);
}

.share-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 22px;
}

.share-note {
  margin-top: 14px;
  font-size: 12px;
  color: var(--text-tertiary);
  text-align: right;
}

.share-unavailable {
  text-align: center;
  max-width: 440px;
  margin: 10vh auto 0;
}

.share-unavailable-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-primary);
  color: var(--text-tertiary);
}

.share-unavailable h2 {
  font-size: 19px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 8px;
}

.share-unavailable p {
  font-size: 14px;
  color: var(--text-secondary);
}

.share-footer {
  margin-top: 20px;
  text-align: center;
}

.share-brand {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-tertiary);
}

/* ============================================================================
   Thanh menu (sidebar) và Thanh header trên (sticky-page-header): nền đục 50%
   (trong suốt 50%, alpha 0.5) + làm mờ hậu cảnh (backdrop blur). Dùng biến
   --bf-* nên blur theo thanh trượt "Độ mờ" (fallback blur(...) nếu chưa set).
   Áp dụng cho mọi theme (sáng / glassmorphism / tối) bằng !important + đúng
   specificity để thắng các rule cũ. Các thành phần khác giữ nguyên.
   ============================================================================ */

/* --- Sidebar (menu trái) --- */

.sidebar,
body.glassmorphism-enabled .sidebar {
  background: linear-gradient(180deg, rgba(190, 227, 248, 0.5) 0%, rgba(144, 205, 244, 0.5) 100%) !important;
  backdrop-filter: var(--bf-16, blur(16px)) saturate(120%) !important;
  -webkit-backdrop-filter: var(--bf-16, blur(16px)) saturate(120%) !important;
}

body[data-theme='dark'] .sidebar,
body.glassmorphism-enabled[data-theme='dark'] .sidebar {
  background: linear-gradient(180deg, rgba(11, 15, 25, 0.5) 0%, rgba(7, 10, 16, 0.5) 100%) !important;
  backdrop-filter: var(--bf-16, blur(16px)) saturate(120%) !important;
  -webkit-backdrop-filter: var(--bf-16, blur(16px)) saturate(120%) !important;
}

/* --- Header trên (lớp blur nằm ở ::before — bắt buộc vì lỗi sticky của Chrome) --- */

.sticky-page-header::before,
.sticky-page-header.scrolled::before,
body.glassmorphism-enabled .sticky-page-header::before,
body.glassmorphism-enabled .sticky-page-header.scrolled::before {
  background: rgba(232, 244, 253, 0.5) !important;
  backdrop-filter: var(--bf-14, blur(14px)) !important;
  -webkit-backdrop-filter: var(--bf-14, blur(14px)) !important;
}

body[data-theme='dark'] .sticky-page-header::before,
body[data-theme='dark'] .sticky-page-header.scrolled::before,
body.glassmorphism-enabled[data-theme='dark'] .sticky-page-header::before,
body.glassmorphism-enabled[data-theme='dark'] .sticky-page-header.scrolled::before {
  background: rgba(15, 23, 42, 0.5) !important;
  backdrop-filter: var(--bf-14, blur(14px)) !important;
  -webkit-backdrop-filter: var(--bf-14, blur(14px)) !important;
}

/* ============================================================================
   Trang Giao dịch: dòng lệnh giao dịch (.timeline-item) nền bán trong + blur
   (frosted) — đồng bộ với 2 thanh. Blur dùng biến --bf-12 (theo slider "Độ mờ").
   ============================================================================ */

.timeline-item,
body.glassmorphism-enabled .timeline-item {
  background: rgba(255, 255, 255, 0.55) !important;
  backdrop-filter: var(--bf-12, blur(12px)) saturate(115%) !important;
  -webkit-backdrop-filter: var(--bf-12, blur(12px)) saturate(115%) !important;
}

body[data-theme='dark'] .timeline-item,
body.glassmorphism-enabled[data-theme='dark'] .timeline-item {
  background: rgba(31, 41, 55, 0.5) !important;
  backdrop-filter: var(--bf-12, blur(12px)) saturate(115%) !important;
  -webkit-backdrop-filter: var(--bf-12, blur(12px)) saturate(115%) !important;
}