/* So Sánh Trường — ISL Education */

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

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

/* ── Slots ── */
.sic-cmp-slots {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  margin-bottom: 30px;
}
.sic-slot {
  border-radius: 12px; padding: 20px 14px; text-align: center;
  min-height: 140px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px;
  position: relative; transition: all .2s;
}
.sic-slot-empty {
  border: 2px dashed #ddd; cursor: pointer; background: #fafafa;
}
.sic-slot-empty:hover { border-color: #c41230; background: #fff3f5; }
.sic-slot-plus { font-size: 36px; color: #c41230; font-weight: 300; line-height: 1; }
.sic-slot-label { font-size: 13px; color: #999; }

.sic-slot-filled {
  border: 2px solid #c41230; background: white;
  box-shadow: 0 4px 12px rgba(196,18,48,.08);
}
.sic-slot-remove {
  position: absolute; top: 8px; right: 8px; width: 24px; height: 24px;
  border-radius: 50%; background: #c41230; color: white; border: none;
  font-size: 14px; cursor: pointer; display: flex; align-items: center;
  justify-content: center; line-height: 1;
}
.sic-slot-logo { width: 50px; height: 50px; object-fit: contain; border-radius: 8px; }
.sic-slot-icon { font-size: 32px; }
.sic-slot-name { font-size: 13px; font-weight: 700; color: #1a1a1a; line-height: 1.3; }
.sic-slot-sub  { font-size: 11px; color: #888; }

/* ── Search Modal ── */
.sic-cmp-modal {
  display: none; position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,.5); align-items: flex-start; justify-content: center;
  padding-top: 80px;
}
.sic-cmp-modal-box {
  background: white; border-radius: 14px; width: 90%; max-width: 520px;
  max-height: 70vh; display: flex; flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
}
.sic-cmp-modal-head {
  padding: 18px 20px; border-bottom: 1px solid #eee;
  display: flex; align-items: center; gap: 12px;
}
.sic-cmp-modal-head input {
  flex: 1; padding: 10px 14px; border: 2px solid #e0e0e0; border-radius: 8px;
  font-size: 15px; outline: none;
}
.sic-cmp-modal-head input:focus { border-color: #c41230; }
.sic-cmp-modal-close {
  width: 32px; height: 32px; border-radius: 50%; border: none; background: #f0f0f0;
  font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.sic-cmp-modal-body { overflow-y: auto; padding: 8px 0; }

.sic-cmp-result {
  display: flex; align-items: center; gap: 12px; padding: 12px 20px;
  cursor: pointer; border-bottom: 1px solid #f5f5f5; transition: background .15s;
}
.sic-cmp-result:hover { background: #fff3f5; }
.sic-cmp-result-logo { width: 36px; height: 36px; object-fit: contain; border-radius: 6px; flex-shrink: 0; }
.sic-cmp-result-name { font-size: 14px; font-weight: 600; color: #1a1a1a; }
.sic-cmp-result-sub  { font-size: 11px; color: #888; }

/* ── Table ── */
.sic-cmp-tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.sic-cmp-tbl td { padding: 10px 14px; border-bottom: 1px solid #eee; text-align: center; vertical-align: middle; }
.sic-cmp-tbl td:first-child { text-align: left; }
.sic-cmp-label { font-weight: 600; color: #444; background: #fafafa; white-space: nowrap; width: 160px; }
.sic-cmp-tbl tr:hover td { background: #fff9fa; }
.sic-cmp-tbl a { color: #c41230; }

.sic-cmp-links { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 20px; }
.sic-cmp-btn {
  padding: 10px 20px; background: white; color: #c41230; border: 2px solid #c41230;
  border-radius: 8px; font-weight: 600; text-decoration: none; font-size: 13px; transition: all .2s;
}
.sic-cmp-btn:hover { background: #c41230; color: white; text-decoration: none; }

.sic-cmp-empty { text-align: center; color: #999; padding: 40px; font-size: 15px; }

.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: 20px; }

@media (max-width: 768px) {
  .sic-cmp-slots { grid-template-columns: repeat(2, 1fr); }
  .sic-cmp-header h2 { font-size: 20px; }
  .sic-cmp-tbl { font-size: 12px; }
  .sic-cmp-tbl td { padding: 8px 8px; }
  .sic-cmp-label { width: 100px; }
}