/* contact.css — giao diện module contact (liên hệ/góp ý). Lõi tự nạp theo tên module; block contact_form cũng nạp tệp này khi đặt ở trang khác.
   Chỉ phần đặc thù; thành phần chung (mt-form, mt-input, mt-btn, mt-alert, mt-dl, mt-panel, mt-captcha) ở mt.css. */

.mt-contactpage > * + * {
  margin-top: 1.75rem;
}

.mt-contactpage {
  container-type: inline-size;
}

.mt-contactpage__grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

/* Hai cột theo bề rộng của chính khối (đúng cả khi trang có cột phụ bên phải) */
@container (min-width: 46rem) {
  .mt-contactpage__grid {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 2.5rem;
  }
}

.mt-contactpage__title {
  margin-bottom: 1.25rem;
}

.mt-contactpage__info {
  display: grid;
  gap: 1.25rem;
}

.mt-contactpage__info:empty {
  display: none;
}

.mt-contactform {
  padding: clamp(1rem, 3vw, 1.75rem);
  border: 1px solid var(--mt-border);
  border-radius: var(--mt-radius);
  background: var(--mt-bg-card);
  box-shadow: var(--mt-shadow-1);
}

.mt-contactform__note {
  margin: 0 0 1.1rem;
}

.mt-contact-result:not([hidden]) {
  display: block;
  margin-top: 1.25rem;
}

.mt-contact-result .mt-alert__body {
  margin: 0;
}

.mt-contactdep__img {
  margin: 0 0 1rem;
}

.mt-contactdep__img img {
  display: block;
  width: 100%;
  max-width: 24rem;
  height: auto;
  border-radius: var(--mt-radius-sm);
}

.mt-contactdep__note {
  margin: 0 0 1rem;
  font-size: var(--mt-fs-base);
}

.mt-contactdep__list {
  margin-bottom: 0;
}

.mt-contactdep__list .mt-dl__row {
  grid-template-columns: minmax(0, 1fr);
}

.mt-contactdep__list dd {
  margin: 0;
  text-align: left;
  overflow-wrap: anywhere;
}

/* Nút liên hệ nổi (block contact_form) */
.mt-contactfloat {
  position: fixed;
  bottom: 1rem;
  left: 1rem;
  z-index: 540;
}

.mt-contactfloat__panel {
  position: absolute;
  bottom: calc(100% + .6rem);
  left: 0;
  width: min(92vw, 24rem);
  max-height: min(80vh, 40rem);
  overflow: auto;
  border: 1px solid var(--mt-border);
  border-top: 4px solid var(--mt-gold);
  border-radius: var(--mt-radius);
  background: #fff;
  box-shadow: var(--mt-shadow-3);
}

.mt-contactfloat__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .6rem .6rem .6rem 1rem;
  background: var(--mt-bg-tint);
}

.mt-contactfloat__title {
  margin: 0;
  color: var(--mt-primary-strong);
  font-weight: 700;
}

.mt-contactfloat__close {
  display: grid;
  width: 2.5rem;
  height: 2.5rem;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--mt-text);
  cursor: pointer;
}

.mt-contactfloat__body {
  padding: 1rem;
}

.mt-contactfloat__body .mt-contactform {
  padding: 0;
  border: 0;
  box-shadow: none;
}

@media print {
  .mt-contactfloat {
    display: none;
  }
}