/* =========================
   CONTACT PAGE (567Free)
   - Button + Icon use the same accent color as homepage: --kblc-accent
   ========================= */

/* Fix “FAQ page sát header” / Contact cũng giãn ra */
.kblc-hero--contact{
  padding-top: 22px;
  padding-bottom: 22px;
}

/* Layout grid */
.kblc-contact .kblc-grid-2{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
@media (max-width: 920px){
  .kblc-contact .kblc-grid-2{ grid-template-columns: 1fr; padding-top: 22px;
  padding-bottom: 22px;}
}

/* Make CF7 look like your luxe theme */
.kblc-cf7 .wpcf7 form{
  margin-top: 10px;
}

/* ✅ Fix chữ nhập vào form màu trắng */
.kblc-cf7 input[type="text"],
.kblc-cf7 input[type="email"],
.kblc-cf7 input[type="tel"],
.kblc-cf7 input[type="url"],
.kblc-cf7 input[type="password"],
.kblc-cf7 textarea,
.kblc-cf7 select{
  width: 100%;
  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  color: rgba(255,255,255,.96) !important;  /* ✅ text trắng */
  border-radius: 14px !important;
  padding: 12px 12px !important;
  outline: none !important;
}

.kblc-cf7 input::placeholder,
.kblc-cf7 textarea::placeholder{
  color: rgba(255,255,255,.55) !important;
}

.kblc-cf7 input:focus,
.kblc-cf7 textarea:focus,
.kblc-cf7 select:focus{
  border-color: rgba(255,255,255,.28) !important;
  box-shadow: 0 0 0 4px rgba(255,255,255,.06) !important;
}

/* ✅ CF7 submit button = same as homepage primary button */
.kblc-cf7 input[type="submit"],
.kblc-cf7 button,
.kblc-cf7 .wpcf7-submit{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  border-radius: 999px !important;
  padding: 12px 16px !important;
  border: 1px solid rgba(255,255,255,.75) !important;
  background: #c9b37e !important;
  color: #0b0c10 !important;  
  font-weight: 800 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
}

.kblc-cf7 input[type="submit"]:hover,
.kblc-cf7 .wpcf7-submit:hover{
  filter: brightness(1.02);
}

/* =========================
   SOCIAL ICONS
   - icon color = button color (accent)
   ========================= */
.kblc-social-icons{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  align-items: center !important;
  margin-top: 10px !important;
}

/* Use “color” to control SVG via currentColor */
.kblc-social-icons .kblc-si{
  width: 44px !important;
  height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  background: rgba(255,255,255,.03) !important;

  padding: 0 !important;
  line-height: 1 !important;
  font-size: 0 !important;
  text-decoration: none !important;

  color: var(--kblc-accent) !important; /* ✅ icon = accent */
}

/* Force SVG to follow currentColor */
.kblc-social-icons .kblc-si svg{
  width: 18px !important;
  height: 18px !important;
  display: block !important;
}
.kblc-social-icons .kblc-si svg path{
  fill: currentColor !important; /* ✅ */
}

.kblc-social-icons .kblc-si:hover{
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.22) !important;
  filter: brightness(1.02);
}

@media (max-width: 920px){
  .kblc-social-icons{ gap: 8px !important; }
  .kblc-social-icons .kblc-si{ width: 40px !important; height: 40px !important; }
  .kblc-social-icons .kblc-si svg{ width: 17px !important; height: 17px !important; }
}