/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/



/* ================================
   AIHub • CF7 – Two-col dark style
   Scope: .form-contact-twocol
   Bản cũ hơn tương thích về trước
   ================================ */
.form-contact-twocol{
  --cf-ink:#0b1020;
  --cf-txt:#4aa785;
  --cf-muted:#a7b1d6;
  --cf-brand:#34d399;
  --cf-brand2:#22d3ee;
  --cf-card:rgba(255,255,255,.06);
  --cf-bd:rgba(255,255,255,.12);
  --cf-err:#ef4444;
  --cf-ok:#22c55e;

  /* layout: 2 cột desktop */
  display:grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap:12px !important;
  color:var(--cf-txt) !important;
  background: linear-gradient(180deg,#0b1020,#0e1630) !important; /* bỏ nếu không muốn nền */
  padding:16px !important;
  border-radius:16px !important;
  border:1px solid var(--cf-bd) !important;
}

/* mỗi <p> là 1 item của grid */
.form-contact-twocol > p{
  position:relative !important;
  margin:0 !important;
}

/* Textarea & Submit: full width (span 2 col) */
.form-contact-twocol > p:has(textarea),
.form-contact-twocol > p:has(.wpcf7-submit){
  grid-column:1 / -1 !important;
}

/* Fallback (nếu browser không hỗ trợ :has) – theo đúng thứ tự form bạn gửi */
.form-contact-twocol > p:nth-child(7),
.form-contact-twocol > p:nth-child(8){
  grid-column:1 / -1 !important;
}

/* Inputs & Selects & Textarea – đồng bộ style */
.form-contact-twocol input[type="text"],
.form-contact-twocol input[type="email"],
.form-contact-twocol input[type="tel"],
.form-contact-twocol select,
.form-contact-twocol textarea{
  width:100% !important;
  color:var(--cf-txt) !important;
  background:var(--cf-card) !important;
  border:1px solid var(--cf-bd) !important;
  border-radius:14px !important;
  outline:0 !important;
  box-shadow:none !important;
  transition: border-color .15s, box-shadow .15s, background .15s !important;
  font-size:14px !important;
  line-height:1.35 !important;
  padding:12px 44px 12px 14px !important; /* chừa icon bên phải */
}

/* Height cho input/select, còn textarea auto */
.form-contact-twocol input[type="text"],
.form-contact-twocol input[type="email"],
.form-contact-twocol input[type="tel"],
.form-contact-twocol select{
  height:48px !important;
}

/* Placeholder */
.form-contact-twocol ::placeholder{
  color:var(--cf-muted) !important;
  opacity:1 !important;
}

/* Select – bỏ mũi tên mặc định để nhìn sạch */
.form-contact-twocol select{
  -webkit-appearance:none !important;
  -moz-appearance:none !important;
  appearance:none !important;
  background-image: none !important;
  cursor:pointer !important;
}

/* Focus */
.form-contact-twocol input:focus,
.form-contact-twocol select:focus,
.form-contact-twocol textarea:focus{
  border-color:var(--cf-brand) !important;
  box-shadow:0 0 0 3px rgba(52,211,153,.25) !important;
  background:rgba(255,255,255,.08) !important;
}

/* Icon ở bên phải (lưu ý: HTML dùng id trùng #icon-form) */
.form-contact-twocol #icon-form{
  position:absolute !important;
  right:14px !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  font-size:16px !important;
  color:var(--cf-muted) !important;
  pointer-events:none !important;
}

/* Textarea icon: canh top 16px cho hợp lý */
.form-contact-twocol p:has(textarea) #icon-form{
  top:18px !important;
  transform:none !important;
}

/* Submit button */
.form-contact-twocol .wpcf7-submit{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  height:48px !important;
  border-radius:12px !important;
  border:0 !important;
  font-weight:700 !important;
  font-size:14px !important;
  background:linear-gradient(90deg,var(--cf-brand),var(--cf-brand2)) !important;
  color:var(--cf-ink) !important;
  cursor:pointer !important;
  transition: transform .12s, box-shadow .12s, opacity .12s !important;
}
.form-contact-twocol .wpcf7-submit:hover{
  transform:translateY(-1px) !important;
  box-shadow:0 10px 24px rgba(0,0,0,.25) !important;
}
.form-contact-twocol .wpcf7-submit:disabled{
  opacity:.6 !important;
  cursor:not-allowed !important;
}

/* Spinner */
.form-contact-twocol .wpcf7-spinner{
  position:absolute !important;
  right:14px !important;
  top:calc(100% + 8px) !important;
}

/* Validation states */
.form-contact-twocol .wpcf7-not-valid{
  border-color:var(--cf-err) !important;
  box-shadow:0 0 0 3px rgba(239,68,68,.2) !important;
}
.form-contact-twocol .wpcf7-not-valid-tip{
  color:#fecaca !important;
  font-size:12px !important;
  margin-top:6px !important;
}

/* Response output (success / error) */
.form-contact-twocol .wpcf7 form .wpcf7-response-output{
  margin:10px 0 0 !important;
  border-radius:12px !important;
  padding:10px 12px !important;
  border:1px solid var(--cf-bd) !important;
  background:rgba(13,20,42,.6) !important;
  color:var(--cf-txt) !important;
}
.form-contact-twocol .wpcf7 form.sent .wpcf7-response-output{
  border-color:rgba(34,197,94,.4) !important;
  background:rgba(34,197,94,.12) !important;
  color:#dcfce7 !important;
}
.form-contact-twocol .wpcf7 form.failed .wpcf7-response-output,
.form-contact-twocol .wpcf7 form.invalid .wpcf7-response-output{
  border-color:rgba(239,68,68,.4) !important;
  background:rgba(239,68,68,.12) !important;
  color:#fee2e2 !important;
}

/* Mobile: 1 cột cho dễ nhập */
@media (max-width: 640px){
  .form-contact-twocol{
    grid-template-columns:1fr !important;
  }
}