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; }
 .branch-list.grid { display:grid; grid-template-columns:repeat(4,180px); gap:16px; justify-content:center; margin-top:6px; }
 .branch-item { display:flex; flex-direction:column; align-items:center; margin:10px 0; }
 .branch-logo { width:180px; height:120px; object-fit:contain; border-radius:0.75rem; cursor:pointer; position:relative; overflow:hidden; transition:transform 0.25s ease-in-out; }
 .branch-logo:hover { transform:scale(1.20); }
 .branch-logo::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); }
 .branch-logo:hover::after { animation:shine 1.2s ease-in-out forwards; }
 @keyframes shine { 0%{left:-75%;} 100%{left:125%;} }
 @media (max-width:576px){ .branch-list.grid{grid-template-columns:repeat(2,160px); gap:10px; justify-content:center;} .branch-logo{width:160px; height:100px;} }
 .branch-list.grid{row-gap:14px!important; column-gap:15px!important;} .branch-list.grid .branch-item{gap:0!important; margin:0!important;}
 .openAllBtn.shine{position:relative; overflow:hidden;}
 .openAllBtn.shine::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); animation:shine 1.2s ease-in-out forwards;}
 .toast{position:fixed; bottom:20px; left:50%; transform:translateX(-50%); background:rgba(0,0,0,0.85); color:#fff; padding:10px 20px; border-radius:8px; font-size:0.95rem; opacity:0; transition:opacity 0.5s ease-in-out; z-index:9999;}
 .toast.show{opacity:1;}
.searchBtn {
  border-radius: 0.75rem;
  margin-left: auto;
  margin-right: auto;
  padding: 0 20px;
  font-size: 16px;
  height: 50px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  font-weight: 600;
  letter-spacing: 0.5px;
  border: 0px solid rgba(0,0,0,0.1);
  min-width: 130px;
  width: auto;
  position: relative;
  overflow: hidden;
  transition: all 0.25s ease-in-out;
  color: #fff;
  justify-content: center;
  text-decoration: none;
}
.searchBtn.btn-primary {
  background: linear-gradient(to bottom, #f78cd0, #C25098);
  box-shadow: inset 0 3px 0 rgba(255,255,255,0.3),
              inset 0 -3px 0 rgba(0,0,0,0.2),
              0 2px 2px rgba(0,0,0,0.3);
}
.searchBtn:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 2px 0 rgba(255,255,255,1),
              inset 0 -2px 0 rgba(0,0,0,0.8),
              0 6px 12px rgba(0,0,0,0.5);
  text-decoration: none;
}
.searchBtn:active {
  transform: translateY(1px);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.7),
                   inset 0 -2px 2px rgba(255,255,255,0.4),
              0 2px 4px rgba(0,0,0,0.3);
}
.searchBtn::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);
}
.searchBtn:hover::after {
  animation: shine 1.2s ease-in-out forwards;
}
.breadcrumb-nav {margin-top: -5px;margin-bottom: 0px;margin-left: 8px;}