/* ===== CF7 Thank You / Sending / Error =====
   Hiệu ứng kính (glass) đã tích hợp sẵn vào .cf7ty-card, áp cho cả 3 màn.
   Dùng token của site (--radius-md, --space-lg, --space-xl) kèm giá trị dự
   phòng nếu site không định nghĩa các biến này. */

.cf7ty-card{
  --ty-ink:#14352B; --ty-accent:#17B890; --ty-accent-deep:#0E8C6D;
  --ty-mint:#E7F6F0; --ty-muted:#5E7268; --ty-error:#E0685A; --ty-error-deep:#C34A3C;
  position:relative;
  max-width:520px; margin:0 auto; text-align:center;

  /* --- glass --- */
  background:rgba(255,255,255,.15);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border-radius:var(--radius-md, 16px);
  border:1px solid rgba(255,255,255,.2);
  box-shadow:0 8px 32px rgba(0,0,0,.2);
  padding:var(--space-lg, 32px) var(--space-xl, 40px);

  opacity:0; transform:translateY(14px);
  transition:opacity .5s ease, transform .5s cubic-bezier(.2,.8,.2,1);
}
.cf7ty-card.cf7ty-show{opacity:1; transform:none}

/* Badge + icon */
.cf7ty-badge{position:relative;width:96px;height:96px;margin:0 auto 24px}
.cf7ty-badge::before{content:"";position:absolute;inset:0;border-radius:50%;
  background:var(--ty-mint);transform:scale(0);
  transition:transform .45s cubic-bezier(.2,.9,.3,1.2) .05s}
.cf7ty-card.cf7ty-show .cf7ty-badge::before{transform:scale(1)}
.cf7ty-badge svg{position:relative;width:96px;height:96px}
.cf7ty-ring{fill:none;stroke:var(--ty-accent);stroke-width:3;
  stroke-dasharray:264;stroke-dashoffset:264;transition:stroke-dashoffset .6s ease .15s}
.cf7ty-card.cf7ty-show .cf7ty-ring{stroke-dashoffset:0}
.cf7ty-check{fill:none;stroke:var(--ty-accent-deep);stroke-width:5;
  stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:60;stroke-dashoffset:60;transition:stroke-dashoffset .4s ease .55s}
.cf7ty-card.cf7ty-show .cf7ty-check{stroke-dashoffset:0}

/* Text */
.cf7ty-title{font-family:Fraunces,Georgia,serif;font-weight:600;font-size:28px;
  line-height:1.15;margin:0 0 12px;color:var(--ty-ink);letter-spacing:-.01em}
.cf7ty-text{font-size:16px;line-height:1.6;color:var(--ty-muted);margin:0 auto;max-width:340px}

/* ---- Biến thể LỖI ---- */
.cf7ty-error .cf7ty-badge::before{background:rgba(224,104,90,.14)}
.cf7ty-error .cf7ty-ring{stroke:var(--ty-error)}
.cf7ty-error .cf7ty-check{stroke:var(--ty-error-deep);stroke-dasharray:90;stroke-dashoffset:90}
.cf7ty-error .cf7ty-title{color:var(--ty-error-deep)}

/* Nút Thử lại */
.cf7ty-retry{margin-top:26px;display:inline-block;padding:12px 26px;border:0;border-radius:12px;
  background:var(--ty-accent);color:#fff;font:inherit;font-weight:600;font-size:15px;cursor:pointer;
  transition:background .2s}
.cf7ty-retry:hover{background:var(--ty-accent-deep)}

/* ---- Màn ĐANG GỬI ---- */
.cf7ty-spinner{width:46px;height:46px;margin:6px auto 20px;border-radius:50%;
  border:4px solid rgba(23,184,144,.2);border-top-color:var(--ty-accent);
  animation:cf7tySpin .8s linear infinite}
@keyframes cf7tySpin{to{transform:rotate(360deg)}}
.cf7ty-sending-text{margin:0;font-size:16px;font-weight:500;color:var(--ty-ink)}

/* Giảm chuyển động */
@media (prefers-reduced-motion:reduce){
  .cf7ty-card,.cf7ty-badge::before,.cf7ty-ring,.cf7ty-check{transition:none}
  .cf7ty-card{opacity:1;transform:none}
  .cf7ty-badge::before{transform:scale(1)}
  .cf7ty-ring,.cf7ty-check{stroke-dashoffset:0}
}
@media (max-width:480px){
  .cf7ty-title{font-size:24px}
}
/* ================================================================
   CARD LIỀN MẠCH TRONG PANEL KÍNH (.form-contact/.glass) & POPUP
   Card đặt TRONG panel; ẩn nội dung form, chỉ hiện card → 1 lớp kính, đúng width.
   ================================================================ */
/* Generic (không tìm thấy panel kính): thay hẳn form bằng card (card tự có kính) */
.cf7ty-replacing > *:not(.cf7ty-card){ display:none !important; }

/* Trong panel kính: giữ nguyên vị trí + kích thước form (ẩn bằng visibility),
   phủ card lên trên và CĂN GIỮA tuyệt đối → không lệch, không phụ thuộc layout. */
.cf7ty-panel-mode{ position:relative !important; }
.cf7ty-panel-mode > *:not(.cf7ty-card){ visibility:hidden !important; }

/* Ẩn spinner mặc định của CF7 khi đang hiện card (CF7 bật nó bằng inline visibility) */
.cf7ty-panel-mode .wpcf7-spinner,
.cf7ty-replacing .wpcf7-spinner{ display:none !important; }

.cf7ty-card.cf7ty-in-panel{
  position:absolute !important; inset:0 !important; margin:0 !important;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  width:auto !important; max-width:none !important;
  background:transparent !important; border:0 !important; box-shadow:none !important;
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  padding:var(--space-md, 24px) !important;
}
.cf7ty-in-panel .cf7ty-title, .cf7ty-in-panel .cf7ty-text, .cf7ty-in-panel .cf7ty-sending-text{
  color:var(--color-white, #fff) !important;
}
.cf7ty-in-panel.cf7ty-error .cf7ty-title{ color:#F3B4AB !important; }
.cf7ty-in-panel .cf7ty-title{ font-family:var(--font-display, Fraunces), Georgia, serif; }

/* Chữ nhập trong field đọc rõ (theme để màu mờ 30%) — áp cho mọi form CF7 */
.wpcf7 input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
.wpcf7 textarea,
.wpcf7 select{ color:#152B1C !important; }
.wpcf7 input::placeholder,
.wpcf7 textarea::placeholder{ color:rgba(21,43,28,.45) !important; }

/* ================================================================
   POPUP FORM LIÊN HỆ — 1 lớp kính = panel .form-contact của chính form CF7
   ================================================================ */
.cf7pop-overlay{
  position:fixed; inset:0; z-index:99999; display:none;
  align-items:center; justify-content:center; padding:24px;
  background:rgba(0,0,0,.55); opacity:0; transition:opacity .25s ease;
}
.cf7pop-overlay.cf7pop-open{ display:flex; opacity:1; }
body.cf7pop-lock{ overflow:hidden; }

/* Dialog = khung định vị, KHÔNG có kính riêng (tránh kính lồng kính) */
.cf7pop-overlay .cf7pop-dialog{
  position:relative; width:100%; max-width:var(--cf7pop-width, 600px);
  max-height:90vh; overflow:auto; margin:0;
  background:transparent; border:0; box-shadow:none; padding:0;
  transform:translateY(12px) scale(.98);
  transition:transform .3s cubic-bezier(.2,.8,.2,1);
}
.cf7pop-overlay.cf7pop-open .cf7pop-dialog{ transform:none; }

/* Padding ngang panel trong popup = 1/2 --space-xl như form chân trang */
.cf7pop-overlay .form-contact,
.cf7pop-overlay .glass{
  padding-left:calc(var(--space-xl, 80px) / 2);
  padding-right:calc(var(--space-xl, 80px) / 2);
  margin:0;
}

.cf7pop-close{
  position:absolute; top:12px; right:12px; z-index:3;
  width:38px; height:38px; border:0; border-radius:50%;
  background:rgba(255,255,255,.25); color:#fff; font-size:24px; line-height:1;
  cursor:pointer; transition:background .2s;
}
.cf7pop-close:hover{ background:rgba(255,255,255,.4); }

/* Nút gửi trong popup: forest -> gold như theme */
.cf7pop-overlay input[type="submit"],
.cf7pop-overlay .wpcf7-submit{
  background:var(--color-forest, #152B1C); color:#fff; border:0; width:100%;
  padding:1em; border-radius:.5em; cursor:pointer; transition:background-color .25s ease;
}
.cf7pop-overlay input[type="submit"]:hover,
.cf7pop-overlay .wpcf7-submit:hover{ background:var(--color-gold, #B18F4F); }

/* Full-screen trên mobile */
@media (max-width:600px){
  .cf7pop-overlay{ padding:0; }
  .cf7pop-overlay .cf7pop-dialog{
    max-width:none; width:100%; height:100%; max-height:none;
    display:flex; flex-direction:column; overflow:auto;
  }
  .cf7pop-overlay .cf7pop-body{ margin:auto 0; }
  .cf7pop-overlay .cf7pop-body,
  .cf7pop-overlay .wpcf7,
  .cf7pop-overlay .form-contact,
  .cf7pop-overlay .glass{ width:100%; max-width:none; }
  .cf7pop-overlay .form-contact,
  .cf7pop-overlay .glass{ padding:64px 20px 28px; border-radius:0; }
}

/* ================================================================
   Chống mobile auto-zoom khi focus input (iOS/Android zoom nếu font < 16px)
   Áp cho input/textarea/select trong mọi form CF7 (footer + popup).
   ================================================================ */
@media (max-width:600px){
  .wpcf7 input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
  .wpcf7 textarea,
  .wpcf7 select{ font-size:16px !important; }
}