body { background:#eef2f7; margin:0; padding:0; }
.container { display:flex; justify-content:center; padding:40px 16px; }
.card-login { border-radius:1rem; border: 1px solid #ccc; box-shadow:0 0.5rem 1.5rem rgba(0,0,0,0.1); background:#fff; max-width:1000px; margin:auto; }
.page-title { font-weight:800; letter-spacing:0.5px; }
.category-title { font-size:1.3rem; font-weight:bold; margin:20px 0 12px; border-left:6px solid #333; padding-left:10px; }
.stats-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5em;
  line-height: 1.6;
}
.stat-item {
  display: inline-block;
  white-space: nowrap;
  font-size: 0.85rem;
}
.stat-item strong {
  font-size: 1.2rem;
}
.stat-search {
color: #F86F86; 
}
.stat-total {
color: #D26AC7; 
}
.stat-chain-systems {
color: #0072ff; 
}
.stat-chain-count {
color: #08b300; 
}
.stat-individual {
color: #6C757D; 
}
.stat-online {
color: #fe6600; 
}
.stat-number {
font-weight: bold;
font-variant-numeric: tabular-nums;
transition: color 0.3s ease;
}
.stat-total { color: #D26AC7; }
.stat-chain-systems { color: #0072ff; }
.stat-chain-count { color: #08b300; }
.stat-individual { color: #6C757D; }
.stat-online { color: #fe6600; }
.chain-group,
.branch-list.grid {
  display: grid;
  grid-template-columns: repeat(4, 180px);
  gap: 16px;
  justify-content: center;
  margin-top: 6px;
}
.filter-summary {
  font-size: 0.9rem;       
  color: #000000;          
  text-align: center;      
  display: block;          
  width: 100%;             
  margin: 0 auto;          
}
.filter-summary .stat-search {
  font-size: 1.1rem;
  color: #F86F86;
}
.filter-summary .stat-number {
  font-size: 1.2rem;
  font-weight: bold;
}
.filter-summary .stat-number {
  font-size: 1.2rem;     
  font-weight: bold;
}
.chain-btn,
.branch-name {
  width: 180px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  border-radius: 0.75rem;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.25s ease-in-out;
  box-shadow: inset 0 3px 0 rgba(255,255,255,0.25),
              inset 0 -3px 0 rgba(0,0,0,0.2),
              0 2px 2px rgba(0,0,0,0.25);
}
.chain-btn::after,
.branch-name::after {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(120deg,
    rgba(255,255,255,0.1) 0%,
    rgba(255,255,255,0.7) 50%,
    rgba(255,255,255,0.1) 100%);
  transform: skewX(-20deg);
}
.chain-btn:hover::after,
.branch-name:hover::after {
  animation: shine 1.2s ease-in-out forwards;
}
@keyframes shine {
  0% { left: -75%; }
  100% { left: 125%; }
}
.branch-list {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.6s ease, opacity 0.6s ease;
}
.branch-list.show {
  max-height: 2000px;
  opacity: 1;
}
.branch-item { display:flex; flex-direction:column; align-items:flex-start; gap:6px; margin:10px 0; }
.func-wrap {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-30px);
  transition: max-height 0.5s ease, opacity 0.5s ease, transform 0.5s ease;
  text-align: center;
  display: block;
}
.func-wrap.show {
  max-height: 220px;
  opacity: 1;
  transform: translateY(0); 
}
.func-btn {
  border-radius: 0.5rem;
  padding: 6px 6px;
  margin: 3px 4px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  display: inline-block;
  white-space: nowrap;
}
.btn-latest { background:#ff66b2; }
.btn-notice { background:#ffcc00; }
.btn-map { background:#3399ff; }
.btn-info { background:#33cc66; }
@media (max-width:576px){
  .chain-group,
  .branch-list.grid {
    grid-template-columns: repeat(2, 160px);
    gap: 10px;
    justify-content: center;
  }
  .chain-btn,
  .branch-name {
    width: 160px;
    height: 54px;
    font-size: 15px;
  }
}
.branch-list.grid {
  row-gap: 14px !important;   
  column-gap: 15px !important; 
}
.branch-list.grid .branch-item {
  gap: 0 !important;
  margin: 0 !important;
}
.func-wrap.show {
  margin-top: 12px;
}
.filter-form .form-select,
.filter-form .form-control {
  max-width: 100%;   
}
@media (min-width: 992px) {
  .filter-form .form-select,
  .filter-form .form-control {
    max-width: 200px; 
  }
}
.breadcrumb-nav {margin-top: -12px;margin-bottom: 0px;margin-left:-0px;}