/*phone.css*/
/* --- SEARCH CARD --- */
.search-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 24px 28px;
  width: 100%;
  max-width: 600px;
  box-shadow: 0 6px 16px var(--shadow);
}

.search-card {
  margin: 0 auto 24px;
  box-shadow: 0 4px 10px var(--shadow);
}

form {
  display: flex;
  gap: 10px;
}

.input-wrap {
  position: relative;
  flex: 1;
}

input.search-input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 15px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

input.search-input:focus {
  border-color: var(--accent1);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.15);
}

button.search-btn {
  background: linear-gradient(90deg, var(--accent1), var(--accent2));
  border: none;
  color: white;
  font-weight: 600;
  font-size: 15px;
  border-radius: 10px;
  padding: 12px 18px;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
  box-shadow: 0 4px 10px rgba(147,51,234,0.25);
}

button.search-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(147,51,234,0.25);
}

@media (max-width:600px) {
  form { flex-direction: column; }
  button.search-btn { width: 100%; }
}

/* --- PHONE RESULT --- */
.phone-result {
  max-width: 600px;
  margin: 0 auto;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px 24px;
  box-shadow: 0 2px 6px var(--shadow);
}

.phone-result h2 {
  color: var(--accent1);
  margin-top: 0;
}

.phone-result p {
  line-height: 1.6;
  color: var(--text);
}

.thongtin {
  display: inline-block;
  background-color: #d9fdd7;
  border-left: 4px solid #4caf50;
  padding: 4px 8px;
  border-radius: 4px;
}

.thongbao {
  background-color: #e9e9e9;
  padding: 4px;
  border-radius: 4px;
}

.right {
  float: right;
}