/* ================= CONTACT PAGE ================= */
.contact-page{
  background:
    radial-gradient(circle at 10% 15%, rgba(132, 212, 255, 0.18), transparent 25%),
    radial-gradient(circle at 90% 10%, rgba(92, 160, 255, 0.14), transparent 28%),
    linear-gradient(180deg, #f8fbff 0%, #eff7ff 48%, #f9fcff 100%);
}

.contact-hero{
  position:relative;
  padding:72px 0 92px;
  overflow:hidden;
}

.contact-glow{
  position:absolute;
  border-radius:50%;
  filter:blur(10px);
  pointer-events:none;
}

.contact-glow-1{
  width:340px;
  height:340px;
  top:-120px;
  left:-80px;
  background:radial-gradient(circle, rgba(114, 194, 255, 0.30), transparent 70%);
}

.contact-glow-2{
  width:420px;
  height:420px;
  top:0;
  right:-120px;
  background:radial-gradient(circle, rgba(80, 138, 255, 0.14), transparent 72%);
}

.contact-heading{
  max-width:800px;
  margin:0 auto 30px;
  text-align:center;
}

.contact-tag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 16px;
  border-radius:999px;
  background:rgba(255,255,255,0.86);
  border:1px solid rgba(75, 146, 235, 0.14);
  color:#2f68cc;
  font-size:14px;
  font-weight:700;
  margin-bottom:18px;
  box-shadow:0 10px 24px rgba(77, 124, 182, 0.08);
}

.contact-heading h1{
  font-size:clamp(2.2rem, 4vw, 3.8rem);
  line-height:1.08;
  letter-spacing:-0.03em;
  color:#173455;
  margin-bottom:16px;
}

.contact-heading p{
  color:#56708d;
  line-height:1.9;
}

.contact-alert{
  max-width:900px;
  margin:0 auto 20px;
  padding:16px 18px;
  border-radius:18px;
  font-weight:600;
}

.contact-alert.success{
  background:rgba(47, 204, 113, 0.12);
  color:#1d7f46;
  border:1px solid rgba(47, 204, 113, 0.20);
}

.contact-alert.error{
  background:rgba(235, 87, 87, 0.10);
  color:#b03b3b;
  border:1px solid rgba(235, 87, 87, 0.18);
}

.contact-grid{
  display:grid;
  grid-template-columns:0.95fr 1.05fr;
  gap:28px;
  align-items:start;
}

.contact-info-card,
.contact-form-card{
  padding:30px 28px;
  border-radius:32px;
  background:rgba(255,255,255,0.80);
  border:1px solid rgba(75, 146, 235, 0.10);
  box-shadow:0 18px 38px rgba(89, 127, 183, 0.08);
}

.contact-info-card h2,
.contact-form-card h2{
  font-size:clamp(1.5rem, 2.5vw, 2.2rem);
  line-height:1.2;
  color:#173455;
  margin-bottom:14px;
}

.contact-intro{
  color:#5b7492;
  line-height:1.9;
  margin-bottom:22px;
}

.contact-info-list{
  display:grid;
  gap:14px;
}

.contact-info-item{
  display:flex;
  gap:14px;
  align-items:flex-start;
  padding:16px;
  border-radius:20px;
  background:#f9fcff;
  border:1px solid rgba(75, 146, 235, 0.10);
  transition:0.3s ease;
}

.contact-info-item:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 28px rgba(89, 127, 183, 0.10);
}

.contact-icon{
  width:48px;
  height:48px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg, rgba(106,182,240,0.18), rgba(45,99,200,0.08));
  color:#2f68cc;
  flex-shrink:0;
}

.contact-info-item strong{
  display:block;
  color:#1d4068;
  margin-bottom:4px;
}

.contact-info-item span{
  color:#5d7692;
  line-height:1.7;
}

.contact-social-row{
  display:flex;
  gap:12px;
  margin-top:22px;
  flex-wrap:wrap;
}

.contact-social-btn{
  width:46px;
  height:46px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  border:1px solid rgba(90, 153, 255, 0.14);
  color:#2d63c8;
  transition:0.3s ease;
}

.contact-social-btn:hover{
  transform:translateY(-4px);
  background:#2d63c8;
  color:#fff;
  box-shadow:0 12px 24px rgba(45,99,200,0.20);
}

.contact-social-btn.zalo:hover{
  background:#0084ff;
}

.contact-social-btn.phone:hover{
  background:#27ae60;
}

.contact-social-btn.mail:hover{
  background:#f2994a;
}

.contact-form{
  display:grid;
  gap:18px;
}

.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}

.form-group{
  display:grid;
  gap:8px;
}

.form-group label{
  font-size:14px;
  font-weight:700;
  color:#1d4068;
}

.form-group input,
.form-group select,
.form-group textarea{
  width:100%;
  padding:14px 16px;
  border-radius:16px;
  border:1px solid rgba(75, 146, 235, 0.14);
  background:#fff;
  font-family:inherit;
  font-size:15px;
  color:#173455;
  outline:none;
  transition:0.25s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
  border-color:#2d63c8;
  box-shadow:0 0 0 4px rgba(45,99,200,0.08);
}

.form-group textarea{
  resize:vertical;
  min-height:140px;
}

.contact-submit-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:54px;
  padding:0 24px;
  border:none;
  border-radius:999px;
  background:linear-gradient(135deg, #6ab6f0, #2d63c8);
  color:#fff;
  font-weight:700;
  font-size:15px;
  cursor:pointer;
  box-shadow:0 14px 28px rgba(45, 99, 200, 0.18);
  transition:0.3s ease;
}

.contact-submit-btn:hover{
  transform:translateY(-3px);
}

@media (max-width: 1100px){
  .contact-grid{
    grid-template-columns:1fr;
  }
}

@media (max-width: 768px){
  .contact-hero{
    padding:28px 0 72px;
  }

  .contact-info-card,
  .contact-form-card{
    padding:22px;
  }

  .form-grid{
    grid-template-columns:1fr;
  }

  .contact-submit-btn{
    width:100%;
  }
}