/* style/download.css */
/* body đã padding-top: var(--header-offset) từ shared.css, không cần thêm ở đây */

:root {
  --page-download-primary-color: #11A84E;
  --page-download-secondary-color: #22C768;
  --page-download-background-color: #08160F;
  --page-download-card-bg-color: #11271B;
  --page-download-text-main-color: #F2FFF6;
  --page-download-text-secondary-color: #A7D9B8;
  --page-download-button-gradient: linear-gradient(180deg, #2AD16F 0%, #13994A 100%);
  --page-download-border-color: #2E7A4E;
  --page-download-glow-color: #57E38D;
  --page-download-gold-color: #F2C14E;
  --page-download-divider-color: #1E3A2A;
  --page-download-deep-green-color: #0A4B2C;
}

.page-download {
  background-color: var(--page-download-background-color);
  color: var(--page-download-text-main-color);
  font-family: Arial, sans-serif;
  line-height: 1.6;
}

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

.page-download__hero-section {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60px 20px;
  padding-top: 10px; /* Nhỏ gọn để tránh đè lên body padding-top */
  background-color: var(--page-download-deep-green-color);
  overflow: hidden;
}

.page-download__hero-image-wrapper {
  width: 100%;
  max-width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.page-download__hero-image {
  width: 1200px; /* Chiều rộng hiển thị */
  height: 675px; /* Chiều cao hiển thị */
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  object-fit: cover;
}

.page-download__hero-content {
  text-align: center;
  z-index: 1;
  max-width: 900px;
  margin-top: 20px;
}

.page-download__main-title {
  font-size: clamp(2.2rem, 3vw, 2.8rem); /* Sử dụng clamp cho kích thước H1 */
  color: var(--page-download-text-main-color);
  margin-bottom: 15px;
  font-weight: bold;
  line-height: 1.2;
}

.page-download__subtitle {
  font-size: 1.1rem;
  color: var(--page-download-text-secondary-color);
  margin-bottom: 30px;
}

.page-download__cta-buttons {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap; /* Cho phép xuống dòng trên mobile */
}

.page-download__btn-primary,
.page-download__btn-secondary {
  display: inline-block;
  padding: 15px 30px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: bold;
  font-size: 1.1rem;
  transition: all 0.3s ease;
  white-space: normal; /* Cho phép văn bản nút xuống dòng */
  word-wrap: break-word; /* Đảm bảo từ dài không tràn ra ngoài */
  box-sizing: border-box;
}

.page-download__btn-primary {
  background: var(--page-download-button-gradient);
  color: #ffffff;
  border: none;
}

.page-download__btn-primary:hover {
  opacity: 0.9;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.page-download__btn-secondary {
  background: var(--page-download-text-main-color);
  color: var(--page-download-primary-color);
  border: 2px solid var(--page-download-primary-color);
}

.page-download__btn-secondary:hover {
  background: var(--page-download-primary-color);
  color: var(--page-download-text-main-color);
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.page-download__introduction-section,
.page-download__features-section,
.page-download__how-to-download-section,
.page-download__app-features-section,
.page-download__security-section,
.page-download__faq-section,
.page-download__cta-final-section {
  padding: 80px 0;
}

.page-download__dark-section {
  background-color: var(--page-download-background-color);
  color: var(--page-download-text-main-color);
}

.page-download__light-bg {
  background-color: var(--page-download-card-bg-color);
  color: var(--page-download-text-main-color);
}

.page-download__section-title {
  font-size: 2.5rem;
  color: var(--page-download-gold-color);
  text-align: center;
  margin-bottom: 40px;
  font-weight: bold;
}

.page-download__sub-title {
  font-size: 1.8rem;
  color: var(--page-download-text-main-color);
  margin-top: 40px;
  margin-bottom: 25px;
  text-align: center;
}

.page-download__text-block {
  font-size: 1rem;
  color: var(--page-download-text-secondary-color);
  margin-bottom: 20px;
  text-align: justify;
}

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

.page-download__feature-card {
  background-color: var(--page-download-card-bg-color);
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: 1px solid var(--page-download-border-color);
  color: var(--page-download-text-main-color);
}

.page-download__feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.page-download__card-image {
  width: 100%; /* Đảm bảo hình ảnh chiếm phần lớn chiều rộng thẻ */
  height: 200px; /* Chiều cao cố định cho hình ảnh thẻ */
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 20px;
  max-width: 100%;
  display: block;
}

.page-download__card-title {
  font-size: 1.5rem;
  color: var(--page-download-gold-color);
  margin-bottom: 15px;
  font-weight: bold;
}

.page-download__card-text {
  font-size: 0.95rem;
  color: var(--page-download-text-secondary-color);
}

.page-download__download-guide-item {
  margin-bottom: 60px;
  text-align: center;
}

.page-download__guide-content {
  display: flex;
  align-items: center;
  gap: 40px;
  margin-top: 30px;
  flex-wrap: wrap;
  justify-content: center;
}

.page-download__guide-image {
  width: 600px; /* Chiều rộng hiển thị */
  height: 400px; /* Chiều cao hiển thị */
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.page-download__guide-list {
  list-style-type: decimal;
  text-align: left;
  font-size: 1rem;
  color: var(--page-download-text-secondary-color);
  flex: 1;
  min-width: 300px;
  padding-left: 20px;
}

.page-download__guide-list li {
  margin-bottom: 10px;
  line-height: 1.5;
}

.page-download__guide-list strong {
  color: var(--page-download-text-main-color);
}

.page-download__download-button {
  margin-top: 30px;
}

.page-download__app-features-section .page-download__feature-list {
  list-style: none;
  padding: 0;
  margin-top: 40px;
}

.page-download__feature-list-item {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 30px;
  background-color: var(--page-download-card-bg-color);
  padding: 25px;
  border-radius: 10px;
  border: 1px solid var(--page-download-border-color);
}

.page-download__list-icon {
  width: 60px; /* Kích thước tối thiểu 200x200px được quy định là cho hình ảnh nội dung, không phải icon. Tuy nhiên, nếu icon là hình ảnh thì phải tuân thủ. Ở đây tôi dùng 60x60px cho icon nhỏ hơn, nếu nó là hình ảnh thay vì icon, tôi sẽ điều chỉnh. Nhưng trong ngữ cảnh này, nó là icon minh họa. Để tuân thủ, tôi sẽ điều chỉnh. */
  height: 60px;
  min-width: 60px; /* Giữ kích thước nhỏ cho icon, nếu quy định nghiêm ngặt cho tất cả hình ảnh là 200px, thì đây sẽ là một vấn đề. */
  max-width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 0 5px var(--page-download-glow-color));
}
/* Dựa trên quy định 'cấm tất cả các biểu tượng nhỏ' và 'mọi hình ảnh phải ít nhất 200x200px', tôi sẽ thay đổi các 'icon' này thành hình ảnh lớn hơn hoặc loại bỏ chúng nếu không thể đáp ứng. Trong trường hợp này, tôi sẽ tăng kích thước và giả định chúng là 'hình ảnh minh họa' thay vì 'biểu tượng nhỏ' */
.page-download__list-icon {
  width: 200px; /* Kích thước tối thiểu */
  height: 200px;
  min-width: 200px;
  max-width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 0 5px var(--page-download-glow-color));
}

.page-download__list-content {
  flex: 1;
}

.page-download__list-title {
  font-size: 1.3rem;
  color: var(--page-download-gold-color);
  margin-bottom: 10px;
  font-weight: bold;
}

.page-download__list-description {
  font-size: 0.95rem;
  color: var(--page-download-text-secondary-color);
}

.page-download__cta-container {
  text-align: center;
  margin-top: 60px;
}

.page-download__security-list {
  list-style: none;
  padding: 0;
  margin-top: 30px;
}

.page-download__security-list li {
  background-color: var(--page-download-card-bg-color);
  padding: 20px;
  margin-bottom: 15px;
  border-radius: 8px;
  border-left: 5px solid var(--page-download-primary-color);
  color: var(--page-download-text-main-color);
  font-size: 1rem;
}

.page-download__security-list strong {
  color: var(--page-download-gold-color);
}

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

.page-download__faq-item {
  background-color: var(--page-download-card-bg-color);
  margin-bottom: 15px;
  border-radius: 8px;
  border: 1px solid var(--page-download-border-color);
  overflow: hidden;
  color: var(--page-download-text-main-color);
}

.page-download__faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 25px;
  cursor: pointer;
  font-size: 1.1rem;
  font-weight: bold;
  color: var(--page-download-gold-color);
  background-color: var(--page-download-deep-green-color);
  border-bottom: 1px solid var(--page-download-divider-color);
  user-select: none;
}

.page-download__faq-item[open] .page-download__faq-question {
  border-bottom: 1px solid var(--page-download-divider-color);
}

.page-download__faq-question::-webkit-details-marker {
  display: none;
}

.page-download__faq-toggle {
  font-size: 1.5rem;
  line-height: 1;
  transition: transform 0.3s ease;
  color: var(--page-download-glow-color);
}

.page-download__faq-item[open] .page-download__faq-toggle {
  transform: rotate(45deg); /* Thay đổi dấu + thành X khi mở */
}

.page-download__faq-answer {
  padding: 20px 25px;
  font-size: 0.95rem;
  color: var(--page-download-text-secondary-color);
}

.page-download__faq-answer p {
  margin-bottom: 10px;
  color: var(--page-download-text-secondary-color);
}

.page-download__cta-final-section {
  text-align: center;
  padding-bottom: 80px;
}

/* ==================================================================
   Responsive Design
   ================================================================== */

@media (max-width: 1024px) {
  .page-download__section-title {
    font-size: 2rem;
  }
  .page-download__sub-title {
    font-size: 1.6rem;
  }
  .page-download__hero-content {
    padding: 0 15px;
  }
  .page-download__guide-content {
    flex-direction: column;
  }
  .page-download__guide-list {
    padding-left: 0;
    text-align: center;
  }
  .page-download__feature-list-item {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .page-download__list-content {
    text-align: center;
  }
}

@media (max-width: 768px) {
  .page-download__hero-section {
    padding: 40px 15px;
    padding-top: 10px !important;
  }
  .page-download__main-title {
    font-size: clamp(1.8rem, 6vw, 2.5rem);
  }
  .page-download__subtitle {
    font-size: 1rem;
  }
  .page-download__cta-buttons {
    flex-direction: column;
    gap: 15px;
  }
  .page-download__btn-primary,
  .page-download__btn-secondary {
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px 20px;
    font-size: 1rem;
    white-space: normal !important;
    word-wrap: break-word !important;
  }
  .page-download__introduction-section,
  .page-download__features-section,
  .page-download__how-to-download-section,
  .page-download__app-features-section,
  .page-download__security-section,
  .page-download__faq-section,
  .page-download__cta-final-section {
    padding: 40px 0;
  }
  .page-download__container {
    padding: 0 15px;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .page-download__section-title {
    font-size: 1.8rem;
    margin-bottom: 30px;
  }
  .page-download__sub-title {
    font-size: 1.4rem;
  }
  .page-download__text-block {
    font-size: 0.95rem;
  }
  .page-download__feature-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .page-download__feature-card {
    padding: 25px;
  }
  .page-download__card-title {
    font-size: 1.3rem;
  }
  .page-download__card-image {
    height: 180px;
  }
  .page-download__guide-image {
    width: 100% !important;
    height: auto !important;
  }
  .page-download__guide-list {
    font-size: 0.95rem;
  }
  .page-download__list-icon {
    width: 200px !important;
    height: 200px !important;
    min-width: 200px !important;
  }
  .page-download__feature-list-item {
    padding: 20px;
  }
  .page-download__list-title {
    font-size: 1.2rem;
  }
  .page-download__security-list li {
    font-size: 0.95rem;
    padding: 15px;
  }
  .page-download__faq-question {
    font-size: 1rem;
    padding: 15px 20px;
  }
  .page-download__faq-answer {
    padding: 15px 20px;
    font-size: 0.9rem;
  }

  /* Responsive images */
  .page-download img {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }
  .page-download__hero-image-wrapper,
  .page-download__guide-content,
  .page-download__feature-card,
  .page-download__feature-list-item,
  .page-download__download-guide-item {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
}