/* =========================================================
   CONTACT PAGE — riêng cho contact.html
   Cần load SAU pages.css (dùng chung biến, nav, hero, bento-card...)
   ========================================================= */

.contact-hero {
  padding: 26px 0 55px;
}


.contact-hero h1 {
  font-size:
    clamp(
      46px,
      6vw,
      76px
    );
}


.contact-grid {
  display: grid;

  grid-template-columns:
    1.3fr
    1fr;

  gap: 14px;
}


/* MAIL */

.mail-card {
  position: relative;

  min-height: 300px;

  padding: 25px;

  text-decoration: none;

  background:
    radial-gradient(
      circle at 79% 26%,
      #3568c65e,
      transparent 46%
    ),
    linear-gradient(
      135deg,
      #15234a,
      #121523
    );
}


.mail-card span {
  color: #aebce8;

  font:
    9px
    var(--font-mono);
}


.mail-card h2 {
  margin: 78px 0 0;

  color: #f2f5ff;

  font-size:
    clamp(
      31px,
      4vw,
      52px
    );

  line-height: 1.03;

  letter-spacing: -.075em;
}


.mail-card i {
  position: absolute;

  right: 25px;
  bottom: 23px;

  color: #9db8ff;

  font-size: 23px;

  font-style: normal;
}


/* STATUS */

.contact-status {
  padding: 25px;

  background:
    radial-gradient(
      circle at 77% 18%,
      #366c4c43,
      transparent 42%
    ),
    #121916;
}


.contact-status h2 {
  margin: 18px 0;

  color: #edf8f0;

  font-size: 25px;

  line-height: 1.16;

  letter-spacing: -.055em;
}


.contact-status small {
  color: #8fa198;

  font:
    9px
    var(--font-mono);
}


/* SOCIAL + LOCATION */

.social-card,
.location-card {
  padding: 22px;
}


.social-card {
  display: flex;

  flex-direction: column;
}


.social-card a {
  padding: 12px 0;

  border-bottom:
    1px solid var(--line);

  color: #d1d7ec;

  text-decoration: none;

  font-size: 13px;

  font-weight: 700;
}


.social-card a:last-child {
  border-bottom: 0;
}


.social-card i {
  float: right;

  color: #8ca6ff;

  font-style: normal;
}


.location-card {
  background:
    linear-gradient(
      145deg,
      #191832,
      #12151e
    );
}


.location-card h2 {
  margin: 44px 0 0;

  color: #d9c0ff;

  font-size: 35px;

  letter-spacing: -.07em;
}


.location-card h2 span {
  color: #8ca7ff;

  font-size: 20px;
}


.location-card small {
  color: #7e879d;

  font:
    9px
    var(--font-mono);
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 780px) {

  .contact-hero {
    padding-bottom: 35px;
  }
}