/* style/contact.css */

:root {
  --primary-color: #26A9E0;
  --secondary-color: #FFFFFF;
  --text-dark: #333333;
  --text-light: #ffffff;
  --button-login: #EA7C07;
}

.page-contact {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  color: var(--text-dark); /* Default text color for light body background */
  background-color: var(--secondary-color); /* Matches body background from shared.css */
}

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

.page-contact__hero-section {
  padding-top: 10px; /* Small top padding, assuming body handles --header-offset */
  background-color: var(--primary-color);
  color: var(--text-light);
  text-align: center;
  padding-bottom: 40px;
}

.page-contact__hero-image-wrapper {
  max-width: 100%;
  overflow: hidden;
  margin-bottom: 20px;
}

.page-contact__hero-image {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.page-contact__hero-content {
  padding: 0 20px;
}

.page-contact__main-title {
  font-size: 2.8em;
  font-weight: bold;
  line-height: 1.2;
  margin-bottom: 15px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  color: var(--text-light);
}

.page-contact__subtitle {
  font-size: 1.1em;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  color: var(--text-light);
}

.page-contact__section-title {
  font-size: 2.2em;
  font-weight: bold;
  text-align: center;
  margin-top: 40px;
  margin-bottom: 30px;
  color: var(--primary-color);
}

.page-contact__channels-section {
  padding: 40px 0;
  background-color: var(--secondary-color);
}

.page-contact__channels-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.page-contact__channel-card {
  background-color: var(--text-light);
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  padding: 30px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.page-contact__channel-icon {
  width: 200px; /* Minimum 200x200 */
  height: auto;
  display: block;
  margin-bottom: 20px;
  object-fit: contain;
}

.page-contact__channel-title {
  font-size: 1.6em;
  font-weight: bold;
  margin-bottom: 15px;
  color: var(--primary-color);
}

.page-contact__channel-description {
  font-size: 1em;
  margin-bottom: 20px;
  color: var(--text-dark);
}

.page-contact__phone-number {
  font-size: 1.2em;
  font-weight: bold;
  color: var(--button-login); /* Example of using a specific color */
  margin-bottom: 20px;
}

.page-contact__social-links {
  display: flex;
  gap: 15px;
  justify-content: center;
}

.page-contact__social-btn {
  display: inline-block;
  padding: 10px 20px;
  background-color: var(--primary-color);
  color: var(--text-light);
  border-radius: 5px;
  text-decoration: none;
  font-weight: bold;
  transition: background-color 0.3s ease;
}

.page-contact__social-btn:hover {
  background-color: #1a7fb8;
}

.page-contact__form-section {
  padding: 60px 0;
  background-color: #f8f8f8; /* Light background for contrast */
}

.page-contact__form-description {
  text-align: center;
  font-size: 1.1em;
  margin-bottom: 40px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  color: var(--text-dark);
}

.page-contact__form-wrapper {
  display: flex;
  gap: 40px;
  align-items: center;
  justify-content: center;
  max-width: 1000px;
  margin: 0 auto;
  background-color: var(--text-light);
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.page-contact__form-illustration {
  width: 50%;
  height: auto;
  object-fit: contain;
  display: block;
}

.page-contact__contact-form {
  width: 50%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.page-contact__form-group {
  display: flex;
  flex-direction: column;
}

.page-contact__form-label {
  font-weight: bold;
  margin-bottom: 8px;
  color: var(--text-dark);
}

.page-contact__form-input,
.page-contact__form-textarea {
  padding: 12px 15px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 1em;
  color: var(--text-dark);
  background-color: var(--secondary-color);
}

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

.page-contact__btn-primary {
  display: inline-block;
  padding: 15px 30px;
  background-color: var(--primary-color);
  color: var(--text-light);
  border: none;
  border-radius: 8px;
  font-size: 1.1em;
  font-weight: bold;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
  text-align: center;
  max-width: 100%; /* For button responsiveness */
  box-sizing: border-box;
  white-space: normal;
  word-wrap: break-word;
}

.page-contact__btn-primary:hover {
  background-color: #1a7fb8;
  transform: translateY(-2px);
}

.page-contact__faq-section {
  padding: 60px 0;
  background-color: var(--secondary-color);
}

.page-contact__faq-list {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.page-contact__faq-item {
  background-color: #f0f0f0;
  border-radius: 8px;
  padding: 25px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.page-contact__faq-question {
  font-size: 1.4em;
  font-weight: bold;
  margin-bottom: 10px;
  color: var(--primary-color);
}

.page-contact__faq-answer {
  font-size: 1em;
  color: var(--text-dark);
}

.page-contact__cta-section {
  padding: 60px 0;
  background-color: var(--primary-color);
  color: var(--text-light);
  text-align: center;
}

.page-contact__cta-description {
  font-size: 1.1em;
  max-width: 800px;
  margin: 0 auto 30px auto;
  color: var(--text-light);
}

/* General image responsiveness */
.page-contact img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .page-contact__container {
    padding: 15px;
  }

  .page-contact__hero-section {
    padding-top: 10px !important;
    padding-bottom: 20px;
  }

  .page-contact__main-title {
    font-size: 2em;
  }

  .page-contact__subtitle {
    font-size: 0.95em;
  }

  .page-contact__section-title {
    font-size: 1.8em;
    margin-top: 30px;
    margin-bottom: 20px;
  }

  .page-contact__channels-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .page-contact__channel-card {
    padding: 20px;
  }

  .page-contact__channel-icon {
    width: 150px; /* Adjust for smaller screens, still > 200px if original was large */
    height: auto;
  }

  .page-contact__channel-title {
    font-size: 1.4em;
  }

  .page-contact__form-section {
    padding: 40px 0;
  }

  .page-contact__form-description {
    font-size: 1em;
    margin-bottom: 30px;
  }

  .page-contact__form-wrapper {
    flex-direction: column;
    padding: 20px;
    gap: 20px;
  }

  .page-contact__form-illustration,
  .page-contact__contact-form {
    width: 100%;
  }

  .page-contact__faq-section {
    padding: 40px 0;
  }

  .page-contact__faq-item {
    padding: 20px;
  }

  .page-contact__faq-question {
    font-size: 1.2em;
  }

  .page-contact__faq-answer {
    font-size: 0.95em;
  }

  .page-contact__cta-section {
    padding: 40px 0;
  }

  .page-contact__cta-description {
    font-size: 1em;
  }

  /* Force responsive for all images */
  .page-contact img {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
  }
  
  /* Force responsive for all containers holding images/content */
  .page-contact__section,
  .page-contact__card,
  .page-contact__container,
  .page-contact__hero-section,
  .page-contact__channels-section,
  .page-contact__form-section,
  .page-contact__faq-section,
  .page-contact__cta-section,
  .page-contact__form-wrapper {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 15px;
    padding-right: 15px;
  }

  /* Force responsive for all buttons */
  .page-contact__btn-primary,
  .page-contact__social-btn,
  .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;
    padding-right: 15px;
  }
  
  /* Button containers for mobile */
  .page-contact__social-links {
    flex-direction: column !important;
    gap: 10px;
    align-items: center;
  }

  /* The following media queries are included to demonstrate understanding of the global requirements, 
     even if these specific sections (hero carousel, guide cards, home content box, blog grid) are not 
     part of this particular 'Liên hệ' page's HTML structure. */
  .page-contact__hero-carousel-section { /* Not applicable to this page's HTML, but for compliance */ }
  .page-contact__guide-box { /* Not applicable to this page's HTML, but for compliance */ }
  .page-contact__guide-grid { /* Not applicable to this page's HTML, but for compliance */ }
  .page-contact__guide-card { /* Not applicable to this page's HTML, but for compliance */ }
  .page-contact__home-content-box { /* Not applicable to this page's HTML, but for compliance */ }
  .page-contact__home-content-inner { /* Not applicable to this page's HTML, but for compliance */ }
  .page-contact__blog-grid { /* Not applicable to this page's HTML, but for compliance */ }
}