/* style/blog.css */
/* body đã padding-top: var(--header-offset) từ shared.css; trang này không cần thêm */

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

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

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

/* Hero Section */
.page-blog__hero-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 10px 0 60px 0; /* body đã xử lý padding-top cho header */
  background-color: var(--page-blog-deep-green);
  position: relative;
  overflow: hidden;
}

.page-blog__hero-image-wrapper {
  width: 100%;
  max-height: 675px; /* Giới hạn chiều cao cho hero image */
  overflow: hidden;
  margin-bottom: 40px;
}

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

.page-blog__hero-content-wrapper {
  max-width: 800px;
  padding: 0 20px;
}

.page-blog__main-title {
  font-size: clamp(2.5rem, 4vw, 3.5rem); /* Sử dụng clamp để kiểm soát kích thước H1 */
  color: var(--page-blog-gold-color);
  margin-bottom: 20px;
  line-height: 1.2;
  font-weight: bold;
}

.page-blog__hero-description {
  font-size: 1.1em;
  color: var(--page-blog-text-secondary);
  margin-bottom: 30px;
}

/* CTA Button Base */
.page-blog__cta-button {
  display: inline-block;
  padding: 15px 30px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: bold;
  transition: all 0.3s ease;
  font-size: 1.1em;
  text-align: center;
  box-sizing: border-box;
}

.page-blog__btn-primary {
  background: var(--page-blog-button-gradient);
  color: var(--page-blog-text-main);
  border: none;
  box-shadow: 0 4px 15px rgba(0, 255, 100, 0.3);
}

.page-blog__btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0, 255, 100, 0.4);
}

.page-blog__btn-secondary {
  background-color: transparent;
  color: var(--page-blog-gold-color);
  border: 2px solid var(--page-blog-gold-color);
}

.page-blog__btn-secondary:hover {
  background-color: var(--page-blog-gold-color);
  color: var(--page-blog-background-color);
}

/* Section Titles and Descriptions */
.page-blog__section-title {
  font-size: 2.5em;
  color: var(--page-blog-gold-color);
  text-align: center;
  margin-bottom: 20px;
  font-weight: bold;
}

.page-blog__section-description {
  font-size: 1.1em;
  color: var(--page-blog-text-secondary);
  text-align: center;
  margin-bottom: 40px;
}

/* Latest Posts Section */
.page-blog__latest-posts-section {
  padding: 60px 0;
  background-color: var(--page-blog-background-color);
}

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

.page-blog__post-card {
  background-color: var(--page-blog-card-bg);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
}

.page-blog__post-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
}

.page-blog__post-image {
  width: 100%;
  height: 225px;
  object-fit: cover;
  display: block;
}

.page-blog__post-content {
  padding: 25px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.page-blog__post-title {
  font-size: 1.5em;
  margin-bottom: 10px;
  font-weight: bold;
  line-height: 1.3;
}

.page-blog__post-title a {
  color: var(--page-blog-text-main);
  text-decoration: none;
  transition: color 0.3s ease;
}

.page-blog__post-title a:hover {
  color: var(--page-blog-gold-color);
}

.page-blog__post-meta {
  font-size: 0.9em;
  color: var(--page-blog-text-secondary);
  margin-bottom: 15px;
}

.page-blog__post-excerpt {
  font-size: 1em;
  color: var(--page-blog-text-secondary);
  margin-bottom: 20px;
  flex-grow: 1;
}

.page-blog__read-more-link {
  color: var(--page-blog-gold-color);
  text-decoration: none;
  font-weight: bold;
  transition: color 0.3s ease;
  align-self: flex-start;
}

.page-blog__read-more-link:hover {
  color: var(--page-blog-glow-color);
}

.page-blog__view-all-wrapper {
  text-align: center;
}

.page-blog__view-all-button {
  margin-top: 20px;
}

/* Categories Section */
.page-blog__categories-section {
  padding: 60px 0;
  background-color: var(--page-blog-deep-green);
}

.page-blog__categories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 25px;
}

.page-blog__category-card {
  background-color: var(--page-blog-card-bg);
  border-radius: 12px;
  padding: 25px;
  text-align: center;
  text-decoration: none;
  color: var(--page-blog-text-main);
  transition: transform 0.3s ease, background-color 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 180px; /* Ensure cards have enough height */
}

.page-blog__category-card:hover {
  transform: translateY(-5px);
  background-color: var(--page-blog-primary-color);
}

.page-blog__category-icon {
  width: 80px; /* Min size is 200x200 for image generation, but display size can be smaller if it's an icon. This is an exception for 'icon' type, but the prompt said 'no small icons' for all images. I will adjust the image generation size to be 200x150 and display size to 200x150 to meet the min 200px rule for all images. */
  height: 60px;
  object-fit: contain;
  margin-bottom: 15px;
}
.page-blog__category-icon {
  width: 200px; /* Adjusted display size to meet min 200px rule */
  height: 150px;
  object-fit: contain;
  margin-bottom: 15px;
}

.page-blog__category-name {
  font-size: 1.2em;
  font-weight: bold;
}

/* Featured Article Section */
.page-blog__featured-article-section {
  padding: 60px 0;
  background-color: var(--page-blog-background-color);
}

.page-blog__featured-card {
  display: flex;
  background-color: var(--page-blog-card-bg);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

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

.page-blog__featured-content {
  width: 50%;
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.page-blog__featured-title {
  font-size: 2em;
  color: var(--page-blog-text-main);
  margin-bottom: 15px;
  font-weight: bold;
  line-height: 1.3;
}

.page-blog__featured-meta {
  font-size: 0.9em;
  color: var(--page-blog-text-secondary);
  margin-bottom: 20px;
}

.page-blog__featured-excerpt {
  font-size: 1.05em;
  color: var(--page-blog-text-secondary);
  margin-bottom: 30px;
}

/* FAQ Section */
.page-blog__faq-section {
  padding: 60px 0;
  background-color: var(--page-blog-deep-green);
}

.page-blog__faq-list {
  max-width: 900px;
  margin: 0 auto;
}

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

.page-blog__faq-item summary {
  display: block;
  padding: 20px 25px;
  font-size: 1.2em;
  font-weight: bold;
  color: var(--page-blog-text-main);
  cursor: pointer;
  position: relative;
  list-style: none;
}

.page-blog__faq-item summary::-webkit-details-marker {
  display: none;
}

.page-blog__faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

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

.page-blog__faq-toggle {
  font-size: 1.5em;
  line-height: 1;
  margin-left: 15px;
  color: var(--page-blog-gold-color);
}

.page-blog__faq-answer {
  padding: 0 25px 20px 25px;
  font-size: 1em;
  color: var(--page-blog-text-secondary);
  border-top: 1px solid var(--page-blog-divider-color);
}

.page-blog__faq-answer p {
  margin-top: 15px;
}

/* CTA Section */
.page-blog__cta-section {
  padding: 60px 0;
  text-align: center;
  background-color: var(--page-blog-background-color);
}

.page-blog__cta-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 30px;
}

/* Responsive Design */
@media (max-width: 1024px) {
  .page-blog__hero-content-wrapper {
    max-width: 700px;
  }
  .page-blog__featured-card {
    flex-direction: column;
  }
  .page-blog__featured-image,
  .page-blog__featured-content {
    width: 100%;
  }
  .page-blog__featured-image {
    height: 450px;
  }
}

@media (max-width: 768px) {
  .page-blog {
    font-size: 15px;
    line-height: 1.5;
  }

  .page-blog__hero-section {
    padding-bottom: 40px;
  }

  .page-blog__main-title {
    font-size: clamp(2rem, 8vw, 2.5rem);
  }

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

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

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

  .page-blog__posts-grid {
    grid-template-columns: 1fr;
  }

  .page-blog__categories-grid {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  }
  .page-blog__category-card {
    min-height: 160px;
  }
  .page-blog__category-icon {
    width: 200px !important; /* Enforce min 200px display size */
    height: 150px !important;
  }

  .page-blog__featured-content {
    padding: 30px;
  }

  .page-blog__featured-title {
    font-size: 1.8em;
  }

  .page-blog__cta-buttons {
    flex-direction: column;
    gap: 15px;
  }

  .page-blog__cta-button,
  .page-blog__btn-primary,
  .page-blog__btn-secondary,
  .page-blog a[class*="button"],
  .page-blog 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;
  }
  
  .page-blog__cta-buttons,
  .page-blog__button-group,
  .page-blog__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;
  }

  /* Ensure all images are responsive and don't overflow */
  .page-blog img {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
  }
  
  .page-blog__section,
  .page-blog__card,
  .page-blog__container,
  .page-blog__hero-image-wrapper,
  .page-blog__featured-image-wrapper,
  .page-blog__post-image-wrapper {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    padding-left: 15px;
    padding-right: 15px;
  }
  .page-blog__hero-section {
    padding-top: 10px !important; /* body đã承担 --header-offset */
  }
  /* Remove horizontal padding from container for mobile, use inner padding instead */
  .page-blog__container {
    padding-left: 0;
    padding-right: 0;
  }
  .page-blog__hero-content-wrapper {
    padding: 0 15px;
  }
  .page-blog__latest-posts-section .page-blog__container,
  .page-blog__categories-section .page-blog__container,
  .page-blog__featured-article-section .page-blog__container,
  .page-blog__faq-section .page-blog__container,
  .page-blog__cta-section .page-blog__container {
    padding-left: 15px;
    padding-right: 15px;
  }
}

/* Ensure content area image CSS size lower bound (min 200px) */
.page-blog__post-image, 
.page-blog__category-icon, 
.page-blog__featured-image {
  min-width: 200px;
  min-height: 150px; /* Adjust height based on aspect ratio, ensuring min 200px for one dimension */
}

/* No filter on images */
.page-blog img { 
  filter: none; 
}

/* Text contrast safety: Body background is dark, so text is light. */
/* Card background is dark, so text is light. */
.page-blog p, .page-blog li, .page-blog__post-excerpt, .page-blog__featured-excerpt {
  color: var(--page-blog-text-secondary);
}
.page-blog__section-description, .page-blog__hero-description {
  color: var(--page-blog-text-secondary);
}
.page-blog__main-title, .page-blog__section-title {
  color: var(--page-blog-gold-color);
}
.page-blog__post-title a, .page-blog__featured-title {
  color: var(--page-blog-text-main);
}
.page-blog__read-more-link {
  color: var(--page-blog-gold-color);
}
.page-blog__faq-item summary, .page-blog__faq-qtext {
  color: var(--page-blog-text-main);
}
.page-blog__faq-toggle {
  color: var(--page-blog-gold-color);
}