/* Import Google Fonts: Optimized for speed */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Pacifico&display=swap&subset=latin,vietnamese');

/* === Global Variables === */
:root {
  /* Define primary color: #FF6B9D (vibrant pink for young girl) */
  --primary-color: #FF6B9D;
  /* Define secondary color: #4ECDC4 (mint green) */
  --secondary-color: #4ECDC4;
  /* Define accent color: #FFE66D (sunny yellow) */
  --accent-color: #FFE66D;
  /* Define text color: #2C3E50 (dark blue-gray) */
  --text-color: #2C3E50;
  /* Define light background: #F8F9FA */
  --light-bg: #F8F9FA;
  /* Define body font: 'Poppins' */
  --body-font: 'Poppins', sans-serif;
  --heading-font: 'Pacifico', cursive;
  
  /* Ad-friendly spacing */
  --ad-space: 300px;
  --mobile-ad-space: 250px;
}

/* === General Styling === */
/* Reset default margin and padding for all elements */
* {
  margin: 0;
  padding: 0;
  /* Set box-sizing to border-box */
  box-sizing: border-box;
}

/* Set the body font and text color */
body {
  font-family: var(--body-font);
  color: var(--text-color);
  line-height: 1.6;
}

/* Tools + Quiz minimal styles */
.tools-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: 1rem; }
.tool-card { background: #fff; border-radius: 12px; padding: 1rem; box-shadow: 0 8px 24px rgba(0,0,0,0.08); }
.quiz-form fieldset { border: 1px solid #eee; border-radius: 10px; padding: .75rem 1rem; margin: .75rem 0; }
.quiz-option { margin: .35rem 0; }
.quiz-result { margin-top: 1rem; }
.btn { border: 1px solid #ddd; border-radius: 8px; padding: .5rem .9rem; background: #f8f8f8; cursor: pointer; }
.btn-primary { background: var(--primary-color); color: #fff; border-color: var(--primary-color); }
.btn-secondary { background: var(--accent-color); color: #fff; border-color: var(--accent-color); }
.pomodoro-display { font-size: 1.6rem; margin: .5rem 0 1rem; }
.deadline-list { list-style: none; padding: 0; }
.deadline-list li { padding: .5rem; border: 1px solid #eee; border-radius: 8px; display: flex; justify-content: space-between; align-items: center; margin: .4rem 0; }
.deadline-list .badge { background: #eee; padding: .2rem .5rem; border-radius: 6px; }

/* Home (VI) inline-style cleanup */
.about-list { margin: 1rem 0; padding-left: 2rem; }
.newsletter-content { margin-top: 3rem; text-align: center; }
.newsletter-form { max-width: 400px; margin: 0 auto; }
.newsletter-form .form-group { display: flex; align-items: center; }
.newsletter-input { flex: 1; padding: 1rem; border: 2px solid var(--primary-color); border-radius: 25px; margin-right: 1rem; }

/* A2HS button */
.a2hs-button { position: fixed; right: 16px; bottom: 16px; z-index: 1000; border: none; border-radius: 24px; padding: .6rem 1rem; background: var(--secondary-color); color: #fff; box-shadow: 0 8px 24px rgba(0,0,0,0.15); cursor: pointer; display: none; }
.a2hs-button.show { display: inline-flex; align-items: center; gap: .5rem; }

/* === Navigation Bar Styling === */
/* Style the header to be sticky at the top */
header {
  position: sticky;
  top: 0;
  background: rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  padding: 1rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 1000;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Style the logo with Pacifico font and a larger size */
.logo {
  font-family: var(--heading-font);
  font-size: 2rem;
  color: var(--primary-color);
  text-decoration: none;
  font-weight: normal;
}

/* Navigation menu styling */
nav ul {
  list-style: none;
  display: flex;
  gap: 2rem;
}

/* Style the navigation links: remove underline, add hover effect (e.g., change color) */
nav a {
  text-decoration: none;
  color: var(--text-color);
  font-weight: 500;
  transition: color 0.3s ease, transform 0.3s ease;
  position: relative;
}

nav a:hover {
  color: var(--primary-color);
  transform: translateY(-2px);
}

nav a::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: -5px;
  left: 0;
  background-color: var(--primary-color);
  transition: width 0.3s ease;
}

nav a:hover::after {
  width: 100%;
}

/* === Hero Banner Styling === */
/* Make the hero section take up the full height of the viewport */
.hero {
  height: 100vh;
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  background-image: url('hero-bg.jpg'); /* Add your background image */
  background-size: cover;
  background-position: center;
  position: relative;
  /* Center the content vertically and horizontally */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Add a soft dark overlay to the background image to make text more readable */
.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  color: white;
  max-width: 800px;
  padding: 0 2rem;
}

.hero h1 {
  font-family: var(--heading-font);
  font-size: 3.5rem;
  margin-bottom: 1rem;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.hero p {
  font-size: 1.2rem;
  margin-bottom: 2rem;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.cta-button {
  display: inline-block;
  background: var(--primary-color);
  color: var(--text-color);
  padding: 1rem 2rem;
  text-decoration: none;
  border-radius: 50px;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.cta-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  background: var(--secondary-color);
}

/* === About Me Section Styling === */
.about {
  padding: 5rem 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

/* Use flexbox to create a two-column layout */
.about-content {
  display: flex;
  gap: 4rem;
  align-items: center;
}

.about-text {
  flex: 1;
}

.about h2 {
  font-family: var(--heading-font);
  font-size: 2.5rem;
  color: var(--primary-color);
  margin-bottom: 2rem;
}

.about p {
  font-size: 1.1rem;
  margin-bottom: 1.5rem;
}

.about-image {
  flex: 1;
  text-align: center;
}

/* Make the avatar image rounded */
.avatar {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  object-fit: cover;
  border: 5px solid var(--primary-color);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease;
}

.avatar:hover {
  transform: scale(1.05);
}

/* === Featured Projects Section Styling === */
.projects {
  background: linear-gradient(135deg, #f8f9fa, #e9ecef);
  padding: 5rem 2rem;
}

.projects h2 {
  font-family: var(--heading-font);
  font-size: 2.5rem;
  color: var(--primary-color);
  text-align: center;
  margin-bottom: 3rem;
}

.projects-container {
  max-width: 1200px;
  margin: 0 auto;
}

/* Use CSS Grid to create a responsive 3-column grid */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

/* Style the project cards: add a box-shadow, rounded corners, and a subtle hover effect */
.project-card {
  background: white;
  border-radius: 15px;
  padding: 2rem;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  cursor: pointer;
}

.project-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
}

.project-card h3 {
  font-family: var(--heading-font);
  font-size: 1.5rem;
  color: var(--primary-color);
  margin-bottom: 1rem;
}

.project-card p {
  color: #666;
  margin-bottom: 1.5rem;
}

.project-link {
  display: inline-block;
  background: var(--secondary-color);
  color: var(--text-color);
  padding: 0.5rem 1.5rem;
  text-decoration: none;
  border-radius: 25px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.project-link:hover {
  background: var(--primary-color);
  transform: translateY(-2px);
}

/* === Responsive Design === */
/* Add a media query for screens smaller than 768px */
@media (max-width: 768px) {
  /* Navigation adjustments */
  header {
    padding: 1rem;
    flex-direction: column;
    gap: 1rem;
  }
  
  nav ul {
    gap: 1rem;
  }
  
  /* Hero section adjustments */
  .hero h1 {
    font-size: 2.5rem;
  }
  
  .hero p {
    font-size: 1rem;
  }
  
  /* Inside the media query, stack the columns in the About Me section */
  .about-content {
    flex-direction: column;
    text-align: center;
    gap: 2rem;
  }
  
  .about h2 {
    font-size: 2rem;
  }
  
  .avatar {
    width: 250px;
    height: 250px;
  }
  
  /* Change the project grid to be 1 column on mobile */
  .projects-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .projects h2 {
    font-size: 2rem;
  }
  
  /* General mobile adjustments */
  .about,
  .projects {
    padding: 3rem 1rem;
  }
}

/* Additional mobile breakpoint for very small screens */
@media (max-width: 480px) {
  .hero h1 {
    font-size: 2rem;
  }
  
  .logo {
    font-size: 1.5rem;
  }
  
  nav ul {
    flex-direction: column;
    gap: 0.5rem;
  }
  
  .avatar {
    width: 200px;
    height: 200px;
  }
  
  .project-card {
    padding: 1.5rem;
  }
}

/* === Language Switcher === */
.language-switcher {
  display: flex;
  gap: 0.5rem;
}

.lang-btn {
  padding: 0.5rem 1rem;
  background: transparent;
  border: 2px solid var(--primary-color);
  color: var(--primary-color);
  border-radius: 20px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.lang-btn.active,
.lang-btn:hover {
  background: var(--primary-color);
  color: white;
}

/* === Mobile Menu === */
.menu-toggle {
  display: none;
  flex-direction: column;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
}

.menu-toggle span {
  width: 25px;
  height: 3px;
  background: var(--text-color);
  margin: 3px 0;
  transition: 0.3s;
  border-radius: 2px;
}

/* === Portfolio Styles === */
.portfolio-hero,
.blog-hero,
.about-hero {
  padding: 8rem 0 4rem;
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  color: white;
  text-align: center;
}

.portfolio-filter,
.blog-categories {
  padding: 2rem 0;
  background: #f8f9fa;
}

.filter-buttons,
.category-buttons {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.filter-btn,
.category-btn {
  padding: 0.75rem 1.5rem;
  background: white;
  border: 2px solid var(--primary-color);
  color: var(--primary-color);
  border-radius: 25px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 500;
}

.filter-btn.active,
.filter-btn:hover,
.category-btn.active,
.category-btn:hover {
  background: var(--primary-color);
  color: white;
}

.portfolio-item {
  transition: all 0.3s ease;
}

.project-image {
  position: relative;
  overflow: hidden;
  border-radius: 15px;
}

.project-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: all 0.3s ease;
}

.project-image:hover .project-overlay {
  opacity: 1;
}

.project-info {
  text-align: center;
  color: white;
  padding: 2rem;
}

.project-info h3 {
  font-family: var(--heading-font);
  margin-bottom: 1rem;
}

.project-links {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-top: 1rem;
}

.project-details {
  padding: 1.5rem 0;
}

.project-tech {
  color: var(--primary-color);
  font-weight: 600;
  margin-bottom: 0.5rem;
}

/* === Blog Styles === */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 2rem;
}

.blog-card {
  background: white;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.blog-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.blog-image img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.blog-content {
  padding: 1.5rem;
}

.blog-meta {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1rem;
  font-size: 0.9rem;
  color: #666;
}

.blog-category {
  background: var(--secondary-color);
  padding: 0.25rem 0.75rem;
  border-radius: 15px;
  font-weight: 500;
  color: var(--text-color);
}

.blog-card h3 a {
  color: var(--text-color);
  text-decoration: none;
  font-family: var(--heading-font);
  font-size: 1.3rem;
}

.blog-card h3 a:hover {
  color: var(--primary-color);
}

.read-more {
  color: var(--primary-color);
  text-decoration: none;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
}

.read-more:hover {
  text-decoration: underline;
}

/* === Skills Section === */
.skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-top: 3rem;
}

.skill-category {
  background: white;
  padding: 2rem;
  border-radius: 15px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.skill-category h3 {
  font-family: var(--heading-font);
  color: var(--primary-color);
  margin-bottom: 1.5rem;
}

.skill-category ul {
  list-style: none;
  padding: 0;
}

.skill-category li {
  padding: 0.5rem 0;
  border-bottom: 1px solid #eee;
}

.skill-category li:last-child {
  border-bottom: none;
}

/* === Timeline === */
.timeline {
  position: relative;
  max-width: 800px;
  margin: 3rem auto;
}

.timeline::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 100%;
  background: var(--primary-color);
}

.timeline-item {
  position: relative;
  margin: 2rem 0;
  width: 50%;
}

.timeline-item:nth-child(odd) {
  left: 0;
  padding-right: 2rem;
}

.timeline-item:nth-child(even) {
  left: 50%;
  padding-left: 2rem;
}

.timeline-date {
  font-weight: 600;
  color: var(--primary-color);
  margin-bottom: 0.5rem;
}

.timeline-content {
  background: white;
  padding: 1.5rem;
  border-radius: 10px;
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.1);
}

.timeline-content h3 {
  font-family: var(--heading-font);
  margin-bottom: 1rem;
}

/* === Newsletter === */
.newsletter {
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  color: white;
}

.newsletter-form {
  max-width: 500px;
  margin: 2rem auto 0;
}

.form-group {
  display: flex;
  gap: 1rem;
}

.form-group input {
  flex: 1;
  padding: 1rem;
  border: none;
  border-radius: 25px;
  font-size: 1rem;
}

.form-group input:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
}

/* === Footer === */
footer {
  background: var(--text-color);
  color: white;
  padding: 3rem 0 1rem;
}

.footer-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin-bottom: 2rem;
}

.footer-section h3,
.footer-section h4 {
  font-family: var(--heading-font);
  color: var(--primary-color);
  margin-bottom: 1rem;
}

.footer-section ul {
  list-style: none;
  padding: 0;
}

.footer-section li {
  margin-bottom: 0.5rem;
}

.footer-section a {
  color: #ccc;
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-section a:hover {
  color: var(--primary-color);
}

.social-links {
  display: flex;
  gap: 1rem;
}

.footer-bottom {
  text-align: center;
  padding-top: 2rem;
  border-top: 1px solid #444;
  color: #999;
}

/* === Contact Styles === */
.contact-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-top: 2rem;
  flex-wrap: wrap;
}

.contact-cta {
  background: linear-gradient(135deg, #f8f9fa, #e9ecef);
}

/* === Animation Classes === */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.6s ease;
}

.animate-in {
  opacity: 1;
  transform: translateY(0);
}

/* === Additional Utility Classes === */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

.section-padding {
  padding: 5rem 0;
}

.text-center {
  text-align: center;
}

.btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: 25px;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s ease;
  cursor: pointer;
  border: none;
  font-family: var(--body-font);
}

.btn-primary {
  background: var(--primary-color);
  color: var(--text-color);
}

.btn-secondary {
  background: var(--secondary-color);
  color: var(--text-color);
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

/* === Google Ads Optimization === */
.ad-container {
  margin: 2rem 0;
  text-align: center;
  min-height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--light-bg);
  border-radius: 10px;
  border: 1px dashed #ddd;
}

.ad-sidebar {
  position: sticky;
  top: 100px;
  width: 300px;
  height: 600px;
  background: var(--light-bg);
  border-radius: 10px;
  border: 1px dashed #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
}

.ad-banner {
  width: 100%;
  max-width: 728px;
  height: 90px;
  margin: 1rem auto;
  background: var(--light-bg);
  border-radius: 10px;
  border: 1px dashed #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
}

/* === Blog Post Styles for Better Readability === */
.blog-post-content {
  line-height: 1.8;
  font-size: 1.1rem;
  max-width: 800px;
  margin: 0 auto;
}

.blog-post-content h2,
.blog-post-content h3 {
  margin: 2rem 0 1rem;
  color: var(--primary-color);
}

.blog-post-content p {
  margin-bottom: 1.5rem;
}

.blog-post-content img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  margin: 1.5rem 0;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

/* === Table of Contents === */
.table-of-contents {
  background: var(--light-bg);
  padding: 2rem;
  border-radius: 15px;
  margin: 2rem 0;
  border-left: 4px solid var(--primary-color);
}

.table-of-contents h3 {
  font-family: var(--heading-font);
  color: var(--primary-color);
  margin-bottom: 1rem;
}

.table-of-contents ul {
  list-style: none;
  padding: 0;
}

.table-of-contents li {
  padding: 0.5rem 0;
  border-bottom: 1px solid #eee;
}

.table-of-contents a {
  color: var(--text-color);
  text-decoration: none;
  transition: color 0.3s ease;
}

.table-of-contents a:hover {
  color: var(--primary-color);
}

/* === Related Posts === */
.related-posts {
  margin: 3rem 0;
  padding: 2rem;
  background: var(--light-bg);
  border-radius: 15px;
}

.related-posts h3 {
  font-family: var(--heading-font);
  color: var(--primary-color);
  text-align: center;
  margin-bottom: 2rem;
}

.related-posts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
}

.related-post-card {
  background: white;
  padding: 1.5rem;
  border-radius: 10px;
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.related-post-card:hover {
  transform: translateY(-5px);
}

/* === SEO Optimized Breadcrumbs === */
.breadcrumbs {
  padding: 1rem 0;
  font-size: 0.9rem;
  color: #666;
}

.breadcrumbs a {
  color: var(--primary-color);
  text-decoration: none;
}

.breadcrumbs a:hover {
  text-decoration: underline;
}

/* === Schema.org Friendly Styles === */
.author-info {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 2rem 0;
  padding: 1.5rem;
  background: var(--light-bg);
  border-radius: 10px;
}

.author-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
}

.author-details h4 {
  margin-bottom: 0.5rem;
  color: var(--primary-color);
}

/* === Social Sharing === */
.social-share {
  margin: 2rem 0;
  text-align: center;
}

.social-share h4 {
  margin-bottom: 1rem;
  color: var(--primary-color);
}

.share-buttons {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.share-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: 25px;
  text-decoration: none;
  color: white;
  font-weight: 500;
  transition: transform 0.3s ease;
}

.share-btn:hover {
  transform: translateY(-2px);
}

.share-btn.facebook { background: #1877F2; }
.share-btn.twitter { background: #1DA1F2; }
.share-btn.pinterest { background: #E60023; }
.share-btn.whatsapp { background: #25D366; }

/* === Comments Section === */
.comments-section {
  margin: 3rem 0;
  padding: 2rem;
  background: white;
  border-radius: 15px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.comments-section h3 {
  font-family: var(--heading-font);
  color: var(--primary-color);
  margin-bottom: 2rem;
  text-align: center;
}

/* === Page Speed Optimizations === */
.lazy-image {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.lazy-image.loaded {
  opacity: 1;
}

/* Critical CSS for above-the-fold content */
.critical {
  display: contents;
}

/* === Print Styles === */
@media print {
  .ad-container,
  .ad-sidebar,
  .ad-banner,
  .social-share,
  header,
  footer {
    display: none !important;
  }
  
  body {
    font-size: 12pt;
    line-height: 1.4;
  }
}

/* === High DPI Displays === */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .logo {
    font-size: 2.2rem;
  }
  
  .hero h1 {
    font-size: 4rem;
  }
}

/* === Blog Post Specific Styles === */
.tip-box {
  background: #f0f8ff;
  padding: 1.5rem;
  border-left: 4px solid var(--primary-color);
  margin: 2rem 0;
  border-radius: 10px;
}

.warning-box {
  background: #fff3cd;
  padding: 1.5rem;
  border-left: 4px solid #ffc107;
  margin: 2rem 0;
  border-radius: 10px;
}

.info-box {
  background: #d1ecf1;
  padding: 1.5rem;
  border-left: 4px solid #17a2b8;
  margin: 2rem 0;
  border-radius: 10px;
}

.success-box {
  background: #d4edda;
  padding: 1.5rem;
  border-left: 4px solid #28a745;
  margin: 2rem 0;
  border-radius: 10px;
}

/* === Table Styles === */
.content-table {
  width: 100%;
  border-collapse: collapse;
  margin: 2rem 0;
  font-size: 0.9rem;
}

.content-table th {
  background: var(--light-bg);
  padding: 1rem;
  border: 1px solid #ddd;
  text-align: left;
  font-weight: 600;
  color: var(--primary-color);
}

.content-table td {
  padding: 1rem;
  border: 1px solid #ddd;
}

.content-table tr:nth-child(even) {
  background: #f9f9f9;
}

.content-table tr:hover {
  background: #f5f5f5;
}

/* === Book Review Styles === */
.book-rating {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 1rem 0;
}

.stars {
  color: #ffc107;
  font-size: 1.2rem;
}

.rating-text {
  font-weight: 600;
  color: var(--primary-color);
}

.book-info-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 2rem;
  margin: 2rem 0;
  align-items: start;
}

.book-cover {
  text-align: center;
}

.book-cover img {
  max-width: 200px;
  border-radius: 10px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.book-details h3 {
  color: var(--primary-color);
  margin-bottom: 1rem;
}

.book-details p {
  margin-bottom: 0.5rem;
}

.pros-cons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin: 2rem 0;
}

.pros, .cons {
  padding: 1.5rem;
  border-radius: 10px;
}

.pros {
  background: #d4edda;
  border-left: 4px solid #28a745;
}

.cons {
  background: #f8d7da;
  border-left: 4px solid #dc3545;
}

.pros h4, .cons h4 {
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* === Article Meta === */
.article-meta {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin: 2rem 0;
  padding: 1rem;
  background: var(--light-bg);
  border-radius: 10px;
  flex-wrap: wrap;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: #666;
}

.meta-item strong {
  color: var(--primary-color);
}

/* === Google AdSense Styles === */
.adsbygoogle {
  display: block;
}

.adsbygoogle.top-content {
  display: block;
}

.adsbygoogle.middle-content {
  display: block;
  text-align: center;
}

.adsbygoogle.middle-content-2 {
  display: block;
}

.adsbygoogle.bottom-content {
  display: block;
}

/* === Responsive Table === */
@media (max-width: 768px) {
  .content-table {
    font-size: 0.8rem;
  }
  
  .content-table th,
  .content-table td {
    padding: 0.5rem;
  }
  
  .book-info-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .pros-cons {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .article-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
}