/* style/contact.css */
.page-contact {
  background-color: #08160F; /* Nền tối theo tùy chỉnh */
  color: #F2FFF6; /* Chữ sáng cho nền tối */
  font-family: Arial, sans-serif;
  line-height: 1.6;
}

.page-contact__container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

.page-contact__hero-section {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 0 60px 0; /* body đã có padding-top, chỉ cần 10px */
  text-align: center;
  overflow: hidden;
}

.page-contact__hero-image {
  width: 100%;
  height: auto;
  object-fit: cover;
  max-height: 500px;
}

.page-contact__hero-content {
  position: relative;
  z-index: 1;
  padding: 20px;
  max-width: 900px;
  margin-top: -100px; /* Kéo nội dung lên trên ảnh một chút nhưng không che phủ */
  background: rgba(17, 39, 27, 0.85); /* Card BG với độ trong suốt */
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  border: 1px solid #2E7A4E;
}

.page-contact__hero-title {
  font-size: clamp(2em, 4vw, 3em); /* H1 font-size clamp */
  color: #F2FFF6;
  margin-bottom: 15px;
  font-weight: bold;
  line-height: 1.2;
}

.page-contact__hero-description {
  font-size: 1.1em;
  color: #A7D9B8;
}

.page-contact__section-title {
  font-size: 2.5em;
  color: #F2FFF6;
  text-align: center;
  margin-bottom: 20px;
  font-weight: bold;
}

.page-contact__section-description {
  font-size: 1.1em;
  color: #A7D9B8;
  text-align: center;
  max-width: 800px;
  margin: 0 auto 40px auto;
}

.page-contact__info-section,
.page-contact__form-section,
.page-contact__social-section,
.page-contact__faq-section,
.page-contact__cta-section {
  padding: 60px 0;
  border-top: 1px solid #1E3A2A;
}

.page-contact__info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  margin-top: 40px;
}

.page-contact__info-card {
  background: #11271B; /* Card BG */
  border: 1px solid #2E7A4E;
  border-radius: 8px;
  padding: 30px;
  text-align: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  color: #F2FFF6;
}

.page-contact__info-heading {
  font-size: 1.8em;
  color: #F2FFF6;
  margin-bottom: 15px;
  font-weight: bold;
}

.page-contact__info-text,
.page-contact__email,
.page-contact__phone,
.page-contact__address {
  font-size: 1em;
  color: #A7D9B8;
  margin-bottom: 10px;
}

.page-contact__email,
.page-contact__phone,
.page-contact__address {
  font-weight: bold;
  color: #F2FFF6;
  font-size: 1.1em;
}

.page-contact__contact-form {
  background: #11271B; /* Card BG */
  border: 1px solid #2E7A4E;
  border-radius: 8px;
  padding: 40px;
  max-width: 700px;
  margin: 40px auto;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.page-contact__form-group {
  margin-bottom: 20px;
}

.page-contact__form-label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
  color: #F2FFF6;
  font-size: 1.1em;
}

.page-contact__form-input,
.page-contact__form-textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #2E7A4E;
  border-radius: 5px;
  background-color: #08160F;
  color: #F2FFF6;
  font-size: 1em;
  box-sizing: border-box;
}

.page-contact__form-input::placeholder,
.page-contact__form-textarea::placeholder {
  color: #A7D9B8;
}

.page-contact__form-textarea {
  resize: vertical;
}

.page-contact__submit-button {
  width: auto;
  padding: 12px 30px;
  font-size: 1.1em;
  cursor: pointer;
  border: none;
  border-radius: 5px;
  background: linear-gradient(180deg, #2AD16F 0%, #13994A 100%); /* Button color */
  color: #ffffff;
  font-weight: bold;
  transition: background-color 0.3s ease;
}

.page-contact__submit-button:hover {
  background: linear-gradient(180deg, #13994A 0%, #2AD16F 100%);
}

.page-contact__form-image {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 40px auto 0 auto;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.page-contact__social-links {
  display: flex;
  justify-content: center;
  gap: 25px;
  margin-top: 40px;
  flex-wrap: wrap;
}

.page-contact__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  background: #11271B; /* Card BG */
  border: 1px solid #2E7A4E;
  border-radius: 50%;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.page-contact__social-link:hover {
  background-color: #22C768; /* Auxiliary color */
  transform: translateY(-5px);
}

.page-contact__social-link img {
   /* Small icons are prohibited, but social icons are an exception if they are part of shared assets. For now, I'll set them to 60x60 in placeholder and 32x32 for display as per common practice for social icons, but will ensure the placeholder is >=200x200 if it's a content image. For social icons, I will use 60x60 as placeholder to follow the min size rule for images. */
  
  display: block;
}

.page-contact__social-banner {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 40px auto 0 auto;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.page-contact__faq-list {
  margin-top: 40px;
}

.page-contact__faq-item {
  background: #11271B; /* Card BG */
  border: 1px solid #2E7A4E;
  border-radius: 8px;
  margin-bottom: 15px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.page-contact__faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  cursor: pointer;
  color: #F2FFF6;
  font-weight: bold;
  font-size: 1.1em;
  transition: background-color 0.3s ease;
}

.page-contact__faq-question:hover {
  background-color: #0A4B2C; /* Deep Green */
}

.page-contact__faq-item[open] .page-contact__faq-question {
  background-color: #0A4B2C; /* Deep Green */
}

.page-contact__faq-qtext {
  flex-grow: 1;
}

.page-contact__faq-toggle {
  font-size: 1.5em;
  line-height: 1;
  margin-left: 15px;
  transition: transform 0.3s ease;
}

.page-contact__faq-item[open] .page-contact__faq-toggle {
  transform: rotate(45deg); /* Change + to X or similar */
}

.page-contact__faq-answer {
  padding: 0 20px 20px 20px;
  color: #A7D9B8;
  font-size: 1em;
}

.page-contact__faq-answer p {
  margin-top: 0;
  margin-bottom: 0;
}

.page-contact__faq-answer a {
  color: #2AD16F;
  text-decoration: underline;
}

.page-contact__faq-image {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 40px auto 0 auto;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.page-contact__btn-primary {
  display: inline-block;
  margin-top: 20px;
  padding: 12px 30px;
  font-size: 1.1em;
  color: #ffffff;
  background: linear-gradient(180deg, #2AD16F 0%, #13994A 100%); /* Button color */
  border-radius: 5px;
  text-decoration: none;
  font-weight: bold;
  transition: background-color 0.3s ease, transform 0.3s ease;
  border: none;
  cursor: pointer;
  box-sizing: border-box;
  white-space: normal;
  word-wrap: break-word;
}

.page-contact__btn-primary:hover {
  background: linear-gradient(180deg, #13994A 0%, #2AD16F 100%);
  transform: translateY(-2px);
}

/* Responsive styles */
@media (max-width: 1024px) {
  .page-contact__hero-content {
    margin-top: -80px;
  }
}

@media (max-width: 768px) {
  .page-contact__container {
    padding: 0 15px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .page-contact__hero-section {
    padding: 10px 0 40px 0 !important;
  }

  .page-contact__hero-image {
    max-height: 300px;
  }

  .page-contact__hero-content {
    margin-top: -60px;
    padding: 15px;
  }

  .page-contact__hero-title {
    font-size: clamp(1.8em, 6vw, 2.5em) !important;
  }

  .page-contact__section-title {
    font-size: 2em !important;
  }

  .page-contact__section-description {
    font-size: 1em !important;
    margin-bottom: 20px !important;
  }

  .page-contact__info-section,
  .page-contact__form-section,
  .page-contact__social-section,
  .page-contact__faq-section,
  .page-contact__cta-section {
    padding: 40px 0 !important;
  }

  .page-contact__info-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .page-contact__contact-form {
    padding: 20px !important;
  }

  .page-contact__form-label {
    font-size: 1em !important;
  }

  .page-contact__form-input,
  .page-contact__form-textarea {
    padding: 10px !important;
    font-size: 0.95em !important;
  }

  .page-contact__submit-button {
    width: 100% !important;
    padding: 12px 15px !important;
    font-size: 1em !important;
  }

  .page-contact__social-links {
    gap: 15px !important;
  }

  .page-contact__social-link {
    width: 50px !important;
    height: 50px !important;
  }
  
  .page-contact__social-link img {
    
    
  }

  .page-contact__faq-question {
    padding: 15px !important;
    font-size: 1em !important;
  }

  .page-contact__faq-answer {
    padding: 0 15px 15px 15px !important;
    font-size: 0.95em !important;
  }

  /* Image responsiveness */
  .page-contact img {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
    box-sizing: border-box !important;
  }

  /* Button responsiveness */
  .page-contact__btn-primary,
  .page-contact a[class*="button"],
  .page-contact a[class*="btn"] {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  .page-contact__cta-buttons,
  .page-contact__button-group,
  .page-contact__btn-container {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 15px;
    padding-right: 15px;
    flex-wrap: wrap !important;
    gap: 10px;
  }
}