/* =====================================================
   QUANG TRUNG COLLEGE — Trang Liên Hệ
   lien-he.css  v2.0.0
   Thay đổi v2: content cột trái qua the_content(),
                form cột phải qua Contact Form 7
   ===================================================== */

/* ── Layout wrapper ── */
.qt-lh-wrap {
  background: #F0F4F8;
  min-height: 60vh;
  padding: 28px 0 56px;
}

.qt-lh-layout {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ── Tiêu đề trang ── */
.qt-lh-page-title {
  text-align: center;
  margin-bottom: 24px;
}

.qt-lh-page-title h1 {
  font-size: 2rem;
  font-weight: 700;
  color: #0B132B;
  margin: 0 0 8px;
  position: relative;
  display: inline-block;
}

.qt-lh-page-title h1::after {
  content: '';
  display: block;
  width: 56px;
  height: 4px;
  background: #D61C23;
  border-radius: 2px;
  margin: 10px auto 0;
}

/* ── Grid: 2 cột khi có cả 2 aside + section, 1 cột khi chỉ có form ── */
.qt-lh-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 32px;
  align-items: start;
}

/* Khi không có sidebar → form chiếm full width, giới hạn max-width */
.qt-lh-grid--full {
  grid-template-columns: 1fr;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

/* ── Card chung ── */
.qt-lh-card {
  background: #fff;
  border-radius: 10px;
  padding: 32px 36px;
  box-shadow: 0 2px 12px rgba(11, 19, 43, 0.07);
}

.qt-lh-card-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: #0B132B;
  margin: 0 0 24px;
  padding-bottom: 14px;
  border-bottom: 3px solid #D61C23;
}

/* ══════════════════════════════════════════════════════
   THÔNG TIN LIÊN HỆ — CSS convention cho the_content()
   Admin nhập trong Classic Editor:
     H3 = label (thứ tự: Địa chỉ → Điện thoại → Email → Website)
     P  = giá trị, có thể là <a href="tel:..."> hoặc <a href="mailto:...">
   ══════════════════════════════════════════════════════ */

/* Cột trái không có card — padding top nhỏ để align với card bên phải */
.qt-lh-info {
  padding-top: 8px;
}

.qt-lh-info-content {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Reset WP default margins */
.qt-lh-info-content > * {
  margin: 0;
}

/* Mỗi cặp H3 + P là một mục liên hệ */
.qt-lh-info-content h3 {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #8a9ab0;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #f0f0f0;
}

.qt-lh-info-content h3:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

/* Icon circle trước label */
.qt-lh-info-content h3::before {
  content: '';
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fef2f2 no-repeat center center;
  background-size: 16px 16px;
}

/* Icon theo thứ tự — Địa chỉ */
.qt-lh-info-content h3:nth-of-type(1)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23D61C23'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5S10.62 6.5 12 6.5s2.5 1.12 2.5 2.5S13.38 11.5 12 11.5z'/%3E%3C/svg%3E");
}

/* Icon theo thứ tự — Điện thoại */
.qt-lh-info-content h3:nth-of-type(2)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23D61C23'%3E%3Cpath d='M6.62 10.79a15.05 15.05 0 006.59 6.59l2.2-2.2a1 1 0 011.01-.24c1.12.37 2.33.57 3.58.57a1 1 0 011 1V20a1 1 0 01-1 1C10.61 21 3 13.39 3 4a1 1 0 011-1h3.5a1 1 0 011 1c0 1.25.2 2.45.57 3.57a1 1 0 01-.24 1.01l-2.21 2.21z'/%3E%3C/svg%3E");
}

/* Icon theo thứ tự — Email */
.qt-lh-info-content h3:nth-of-type(3)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23D61C23'%3E%3Cpath d='M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E");
}

/* Icon theo thứ tự — Website */
.qt-lh-info-content h3:nth-of-type(4)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23D61C23'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z'/%3E%3C/svg%3E");
}

/* Giá trị — P ngay sau H3 */
.qt-lh-info-content h3 + p {
  font-size: 0.97rem;
  color: #1e2d40;
  line-height: 1.5;
  padding-left: 44px; /* align với text của H3 (32px icon + 12px gap) */
  margin-top: 4px;
}

.qt-lh-info-content h3 + p a {
  color: #1e2d40;
  text-decoration: none;
  transition: color 0.2s;
}

.qt-lh-info-content h3 + p a:hover {
  color: #D61C23;
}

/* Các P không phải sau H3 (nếu admin thêm ghi chú) */
.qt-lh-info-content p:not(h3 + p) {
  font-size: 0.9rem;
  color: #5a6470;
  line-height: 1.6;
  padding-left: 44px;
  margin-top: 4px;
}

/* ── Bản đồ ── */
.qt-lh-map {
  margin-top: 24px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(11, 19, 43, 0.07);
}

.qt-lh-map iframe {
  display: block;
  width: 100%;
  height: 280px;
  border: 0;
}

/* ══════════════════════════════════════════════════════
   CONTACT FORM 7 — Override để khớp design token
   ══════════════════════════════════════════════════════ */

.qt-lh-cf7-wrap .wpcf7-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Ẩn thông báo mặc định của CF7 (dùng response-output bên dưới) */
.qt-lh-cf7-wrap .wpcf7-form p {
  margin: 0;
}

/* Label */
.qt-lh-cf7-wrap .wpcf7-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.88rem;
  font-weight: 600;
  color: #374151;
}

/* Input, textarea */
.qt-lh-cf7-wrap .wpcf7-text,
.qt-lh-cf7-wrap .wpcf7-tel,
.qt-lh-cf7-wrap .wpcf7-email,
.qt-lh-cf7-wrap .wpcf7-textarea {
  border: 1.5px solid #d1d9e0 !important;
  border-radius: 7px !important;
  padding: 11px 14px !important;
  font-size: 0.95rem !important;
  font-family: 'Be Vietnam Pro', sans-serif !important;
  color: #1e2d40 !important;
  background: #fafbfc !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.qt-lh-cf7-wrap .wpcf7-text:focus,
.qt-lh-cf7-wrap .wpcf7-tel:focus,
.qt-lh-cf7-wrap .wpcf7-email:focus,
.qt-lh-cf7-wrap .wpcf7-textarea:focus {
  outline: none !important;
  border-color: #D61C23 !important;
  box-shadow: 0 0 0 3px rgba(214, 28, 35, 0.1) !important;
  background: #fff !important;
}

.qt-lh-cf7-wrap .wpcf7-textarea {
  resize: vertical !important;
  min-height: 130px !important;
}

/* Submit button */
.qt-lh-cf7-wrap .wpcf7-submit {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: #D61C23 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 7px !important;
  padding: 13px 28px !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  font-family: 'Be Vietnam Pro', sans-serif !important;
  cursor: pointer !important;
  transition: background 0.2s, transform 0.15s !important;
  align-self: flex-start !important;
}

.qt-lh-cf7-wrap .wpcf7-submit:hover {
  background: #b51019 !important;
  transform: translateY(-1px) !important;
}

/* Thông báo thành công / lỗi của CF7 */
.qt-lh-cf7-wrap .wpcf7-response-output {
  border-radius: 6px !important;
  padding: 14px 18px !important;
  font-size: 0.95rem !important;
  line-height: 1.5 !important;
  margin: 8px 0 0 !important;
  border: none !important;
}

/* CF7 sent (thành công) */
.qt-lh-cf7-wrap .wpcf7-mail-sent-ok {
  background: #f0fdf4 !important;
  border: 1px solid #86efac !important;
  color: #166534 !important;
}

/* CF7 lỗi */
.qt-lh-cf7-wrap .wpcf7-mail-sent-ng,
.qt-lh-cf7-wrap .wpcf7-spam-blocked,
.qt-lh-cf7-wrap .wpcf7-validation-errors {
  background: #fef2f2 !important;
  border: 1px solid #fca5a5 !important;
  color: #991b1b !important;
}

/* Lỗi từng field */
.qt-lh-cf7-wrap .wpcf7-not-valid {
  border-color: #D61C23 !important;
}

.qt-lh-cf7-wrap .wpcf7-not-valid-tip {
  font-size: 0.8rem !important;
  color: #D61C23 !important;
  margin-top: 4px !important;
}

/* Spinner loading */
.qt-lh-cf7-wrap .wpcf7-spinner {
  margin-left: 12px;
  vertical-align: middle;
}

/* Row 2 cột cho Họ tên + SĐT (nếu dùng div.qt-lh-row trong CF7 form) */
.qt-lh-cf7-wrap .qt-lh-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* Notice khi chưa setup CF7 ID */
.qt-lh-setup-notice {
  background: #fffbeb;
  border: 1px dashed #fbbf24;
  border-radius: 6px;
  padding: 16px 20px;
  color: #92400e;
  font-size: 0.9rem;
  line-height: 1.6;
}

.qt-lh-setup-notice code {
  background: #fef3c7;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: monospace;
}

/* ── Tablet ≤ 1024px ── */
@media (max-width: 1024px) {
  .qt-lh-wrap {
    padding: 36px 0 56px;
  }

  .qt-lh-grid {
    grid-template-columns: 1fr 1.2fr;
    gap: 24px;
  }

  .qt-lh-card {
    padding: 24px 28px;
  }
}

/* ── Mobile ≤ 768px ── */
@media (max-width: 768px) {
  .qt-lh-wrap {
    padding: 28px 0 48px;
  }

  .qt-lh-layout {
    padding: 0 16px;
  }

  .qt-lh-page-title {
    margin-bottom: 28px;
  }

  .qt-lh-page-title h1 {
    font-size: 1.6rem;
  }

  .qt-lh-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  /* Form lên trước trên mobile */
  .qt-lh-form-wrap {
    order: -1;
  }

  .qt-lh-cf7-wrap .qt-lh-row {
    grid-template-columns: 1fr;
  }

  .qt-lh-cf7-wrap .wpcf7-submit {
    width: 100% !important;
    justify-content: center !important;
  }

  .qt-lh-card {
    padding: 20px 20px;
  }

  .qt-lh-map iframe {
    height: 220px;
  }
}

/* ── Mobile S ≤ 480px ── */
@media (max-width: 480px) {
  .qt-lh-page-title h1 {
    font-size: 1.4rem;
  }

  .qt-lh-card {
    padding: 18px 16px;
  }

  .qt-lh-info-content h3 + p {
    word-break: break-word;
  }
}