/* custom.css — VPS Công cụ tài chính */
/* Domain: vip.chungkhoanvps.com.vn */

:root {
  --navy:       #10316B;
  --navy-900:   #0a2050;
  --brand:      #0B60B0;
  --brand-50:   #e8f4fd;
  --brand-100:  #c5e2f9;
  --brand-200:  #8ec5f3;
  --accent:     #40A0D8;
  --accent-90:  #3590c4;
}

/* Smooth scroll */
html { scroll-behavior: smooth; }

/* Card shadows */
.shadow-card {
  box-shadow: 0 1px 3px rgba(16, 49, 107, 0.06), 0 1px 2px rgba(16, 49, 107, 0.04);
}
.shadow-card-hover {
  box-shadow: 0 10px 25px rgba(16, 49, 107, 0.10), 0 4px 10px rgba(16, 49, 107, 0.06);
}

/* Category color schemes */
.cat-sky       { --cat-bg: #f0f9ff; --cat-border: #e0f2fe; --cat-text: #0369a1; }
.cat-violet    { --cat-bg: #f5f3ff; --cat-border: #ede9fe; --cat-text: #7c3aed; }
.cat-emerald   { --cat-bg: #ecfdf5; --cat-border: #d1fae5; --cat-text: #047857; }
.cat-amber     { --cat-bg: #fffbeb; --cat-border: #fef3c7; --cat-text: #b45309; }
.cat-rose      { --cat-bg: #fff1f2; --cat-border: #ffe4e6; --cat-text: #be123c; }
.cat-indigo    { --cat-bg: #eef2ff; --cat-border: #e0e7ff; --cat-text: #4338ca; }

.cat-badge {
  background: var(--cat-bg);
  border: 1px solid var(--cat-border);
  color: var(--cat-text);
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}
.cat-icon-box {
  background: var(--cat-bg);
  border: 1px solid var(--cat-border);
  color: var(--cat-text);
}

/* Tool card */
.tool-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: all 0.2s ease;
}
.tool-card:hover {
  transform: translateY(-2px);
  border-color: var(--brand-200);
}
.tool-card:hover .shadow-card {
  box-shadow: 0 10px 25px rgba(16, 49, 107, 0.10), 0 4px 10px rgba(16, 49, 107, 0.06);
}
.tool-card .tool-card-body {
  flex: 1 1 auto;
}
.tool-card .tool-card-footer {
  margin-top: auto;
  padding-top: 0.875rem;
  border-top: 1px solid #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tool-card .tool-title {
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.35;
  transition: color 0.15s ease;
}
@media (min-width: 640px) {
  .tool-card .tool-title {
    font-size: 1.125rem;
  }
}
.tool-card:hover .tool-title {
  color: var(--brand);
}

/* Category pills */
.cat-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  background: var(--cat-bg, #ffffff);
  border: 1px solid var(--cat-border, #e2e8f0);
  color: var(--cat-text, #334155);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.cat-pill:hover {
  border-color: var(--cat-text);
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.06);
}
.cat-pill .pill-count {
  background: rgba(0, 0, 0, 0.06);
  padding: 1px 6px;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
  margin-left: 0.375rem;
  color: inherit;
  transition: background-color 0.2s ease;
}
.cat-pill.active {
  background: var(--cat-text) !important;
  border-color: var(--cat-text) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  transform: translateY(-1px);
}
.cat-pill.active .pill-count {
  background: rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
}

/* Pill Tất cả */
.cat-pill.cat-all,
.cat-pill[data-category="all"] {
  --cat-bg: #f1f5f9;
  --cat-border: #cbd5e1;
  --cat-text: #1e293b;
}
.cat-pill[data-category="all"].active {
  background: var(--navy) !important;
  border-color: var(--navy) !important;
  color: #ffffff !important;
}

/* Hide native browser search clear button */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

/* Search focus */
.search-input:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-100);
}

/* Details marker */
details summary::-webkit-details-marker,
details summary::marker {
  display: none;
}


/* Hide scrollbar on category pills */
.hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

/* ══════════ DARK MODE SUPPORT ══════════ */
html.dark {
  color-scheme: dark;
}
html.dark body {
  background-color: #0b1120;
  color: #f1f5f9;
}
html.dark .tool-card {
  background-color: #1e293b;
  border-color: #334155;
}
html.dark .tool-card:hover {
  border-color: #38bdf8;
  background-color: #1e293b;
}
html.dark .tool-card .tool-title {
  color: #f8fafc;
}
html.dark .tool-card:hover .tool-title {
  color: #38bdf8;
}
html.dark .tool-card .tool-card-footer {
  border-top-color: #334155;
}
html.dark .cat-pill {
  background: #1e293b;
  border-color: #334155;
  color: #cbd5e1;
}
html.dark .cat-pill:hover {
  background: #334155;
  color: #f8fafc;
}
html.dark .cat-pill.active {
  background: var(--brand);
  border-color: var(--brand);
  color: #ffffff;
}
html.dark .cat-badge {
  background-color: rgba(30, 41, 59, 0.9);
  border-color: #334155;
}
html.dark .shadow-card {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
}
html.dark .search-input:focus {
  box-shadow: 0 0 0 3px rgba(11, 96, 176, 0.35);
}