/**
 * YogiBee — Trang Liên hệ
 *
 * Bố cục hai cột trên desktop: form bên trái (việc chính), các kênh liên lạc
 * nhanh bên phải. Trên mobile form đứng TRƯỚC — khách mở trang liên hệ trên
 * điện thoại thì thứ họ cần là ô nhập, không phải danh sách địa chỉ.
 */

.ct-wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 40px 20px 72px;
  display: grid;
  gap: 32px;
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .ct-wrap {
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, 1fr);
    align-items: start;
    gap: 44px;
  }
}

/* ── Form ── */
.ct-card {
  background: var(--w);
  border: 1px solid var(--bd);
  border-radius: var(--rl);
  box-shadow: var(--sh1);
  padding: 28px 24px;
}

@media (min-width: 600px) {
  .ct-card { padding: 34px 32px; }
}

.ct-card h2 {
  font-family: var(--fh);
  font-size: 22px;
  color: var(--j2);
  margin: 0 0 6px;
}

.ct-card > p.ct-lead {
  color: var(--tx2);
  font-size: var(--fs-sm);
  margin: 0 0 22px;
}

.ct-row { margin-bottom: 18px; }

.ct-row label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--tx);
  margin-bottom: 6px;
}

.ct-row .ct-opt {
  font-weight: 400;
  color: var(--tx3);
  font-size: var(--fs-xs);
}

.ct-row input,
.ct-row select,
.ct-row textarea {
  width: 100%;
  font-family: var(--fb);
  font-size: var(--fs-base);
  color: var(--tx);
  background: var(--s0);
  border: 1px solid var(--bd);
  border-radius: var(--r);
  padding: 11px 13px;
  transition: border-color var(--tr), box-shadow var(--tr);
}

.ct-row textarea { min-height: 140px; resize: vertical; }

/* Placeholder: nhạt hơn (rgba 0.5) + mảnh hơn (weight 300) + cỡ chữ bằng tiêu
   đề trường (fs-sm) thay vì kế thừa fs-base của input — để trông như gợi ý
   nhỏ, không lấn át tiêu đề phía trên */
.ct-row input::placeholder,
.ct-row textarea::placeholder {
  color: rgba(26, 32, 24, .5);
  font-weight: 300;
  font-size: var(--fs-sm);
  opacity: 1;
}

.ct-row input:focus,
.ct-row select:focus,
.ct-row textarea:focus {
  outline: none;
  border-color: var(--jade);
  box-shadow: 0 0 0 3px rgba(62, 131, 104, .12);
}

.ct-row [aria-invalid="true"] {
  border-color: #b32d2e;
  box-shadow: 0 0 0 3px rgba(179, 45, 46, .1);
}

.ct-two {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
}

@media (min-width: 560px) {
  .ct-two { grid-template-columns: 1fr 1fr; }
  .ct-two .ct-row { margin-bottom: 0; }
}

/* Honeypot: giấu khỏi mắt người NHƯNG vẫn nằm trong DOM để bot điền vào.
   Không dùng type="hidden" — bot bỏ qua input hidden. Không dùng
   display:none đơn thuần trên một số trình đọc màn hình cũ vẫn đọc ra, nên
   thêm cả aria-hidden và tabindex="-1" ở phía HTML. */
.ct-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.ct-submit {
  width: 100%;
  justify-content: center;
  padding: 13px;
  font-size: var(--fs-md);
}

.ct-note {
  font-size: var(--fs-xs);
  color: var(--tx3);
  margin: 12px 0 0;
  text-align: center;
}

.ct-err {
  background: #fdf0f0;
  border: 1px solid rgba(179, 45, 46, .3);
  color: #8a2224;
  border-radius: var(--r);
  padding: 11px 14px;
  font-size: var(--fs-sm);
  margin-bottom: 18px;
}

.ct-done {
  background: var(--s1);
  border: 1px solid var(--bd);
  border-radius: var(--rl);
  padding: 40px 28px;
  text-align: center;
}

.ct-done .ct-done-ico { font-size: 44px; line-height: 1; }

.ct-done h2 {
  font-family: var(--fh);
  color: var(--j2);
  margin: 14px 0 8px;
}

.ct-done .yb-contact-done-msg {
  color: var(--tx2);
  font-size: var(--fs-sm);
  margin: 0 0 20px;
}

/* ── Cột kênh liên lạc ── */
.ct-side { display: grid; gap: 14px; }

.ct-ch {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  background: var(--w);
  border: 1px solid var(--bd);
  border-radius: var(--rl);
  padding: 16px 18px;
  text-decoration: none;
  color: inherit;
  transition: border-color var(--tr), box-shadow var(--tr), transform var(--tr);
}

a.ct-ch:hover {
  border-color: var(--jade);
  box-shadow: var(--sh2);
  transform: translateY(-1px);
}

.ct-ch-ico {
  flex: 0 0 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--s2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.ct-ch-t {
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--tx);
  margin: 0 0 2px;
}

.ct-ch-d {
  font-size: var(--fs-xs);
  color: var(--tx2);
  margin: 0;
  line-height: 1.55;
}

/* Trên mobile: form lên trước, kênh liên lạc xuống sau */
@media (max-width: 899px) {
  .ct-wrap { display: flex; flex-direction: column; }
  .ct-main { order: 1; }
  .ct-side { order: 2; }
}