/* Tra Cứu Thành Phố — ISL Education */

.sic-city-header { background: linear-gradient(135deg, #c41230, #8b0000); color: white; text-align: center; padding: 36px 20px; }
.sic-city-header h2 { font-size: 26px; margin: 0 0 6px; font-weight: 700; }
.sic-city-header p { font-size: 14px; opacity: .9; margin: 0; }

.sic-city-wrap { max-width: 1100px; margin: 0 auto; padding: 24px 16px 40px; }

.sic-city-filter { margin-bottom: 20px; text-align: center; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.sic-city-input {
  padding: 10px 16px; border: 2px solid #ddd; border-radius: 8px;
  font-size: 14px; outline: none; min-width: 250px;
}
.sic-city-input:focus { border-color: #c41230; }
.sic-city-filter select {
  padding: 10px 16px; border: 2px solid #ddd; border-radius: 8px;
  font-size: 14px; outline: none; min-width: 250px;
}
.sic-city-filter select:focus { border-color: #c41230; }

.sic-city-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px;
  margin-bottom: 30px;
}
.sic-city-card {
  background: white; border: 1px solid #eee; border-radius: 10px; padding: 14px;
  cursor: pointer; transition: all .2s; text-align: center;
}
.sic-city-card:hover { border-color: #c41230; box-shadow: 0 4px 12px rgba(196,18,48,.1); }
.sic-city-card.active { border-color: #c41230; background: #fff3f5; }
.sic-city-name { font-size: 14px; font-weight: 700; color: #1a1a1a; margin-bottom: 3px; }
.sic-city-meta { font-size: 11px; color: #888; }

.sic-city-detail { margin-top: 10px; }
.sic-city-detail h3 { font-size: 18px; font-weight: 700; color: #1a1a1a; margin: 0 0 16px; padding-bottom: 10px; border-bottom: 2px solid #c41230; }

.sic-city-school {
  display: block; text-decoration: none; color: inherit;
  padding: 12px 16px; border: 1px solid #eee; border-radius: 8px; margin-bottom: 8px;
  transition: all .2s;
}
.sic-city-school:hover { border-color: #c41230; background: #fff9fa; text-decoration: none; color: inherit; }
.sic-city-school-name { font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.sic-city-school-meta { font-size: 12px; color: #888; margin-top: 3px; }

.sic-badge { padding: 2px 7px; border-radius: 4px; font-size: 10px; font-weight: 700; }
.sic-badge-rank { background: #fff3cd; color: #856404; }
.sic-muted { color: #aaa; font-size: 13px; text-align: center; padding: 30px 0; }

@media (max-width: 640px) {
  .sic-city-header h2 { font-size: 20px; }
  .sic-city-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}