/* ===== Light Theme ===== */
:root {
  --bg: #f8fafc;
  --text: #0f172a;
  --muted: #64748b;
  --accent: #0ea5e9;
  /* blue tech */
  --card: #ffffff;
  --radius: 14px;
  --maxw: 1180px;
  --gap: 22px;
}

body {
  margin: 0;
  background: var(--bg);
  font-family: Inter, system-ui, -apple-system;
  color: var(--text);
  line-height: 1.55;
}

.bg-left {
  background: linear-gradient(90deg, #eae8ff, #fcfcff) !important;
}

.bg-right {
  background: linear-gradient(90deg, #fcfcff, #eae8ff) !important;
}

.bg-center {
  background: linear-gradient(90deg, #fcfcff, #eae8ff, #fcfcff) !important;
}

.section-mission,
.section-expertise,
.section-team,
.section-project {
  overflow-x: hidden;
}

video {
  object-fit: contain;
  background: #000;
}

.section-intro .bg-dark {
  background: linear-gradient(to top, rgba(0, 0, 0, .6), rgba(0, 0, 0, .1), transparent);
}

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

.section-mission [data-aos] {
  opacity: 0.3 !important;
  transition-property: opacity, transform;
}

.section-mission [data-aos].aos-animate {
  opacity: 1 !important;
}

.mission-list,
.team-list {
  list-style: none;
  padding-left: 0;
}

.mission-list li,
.team-list li {
  position: relative;
  padding-left: 1.8rem;
  margin-bottom: 1rem;
  line-height: 1.6;
}

.mission-list li::before {
  content: "✔";
  position: absolute;
  left: 0;
  top: 0;
  color: #1a399e;
  /* hoặc màu logo */
  font-weight: bold;
}

.team-list li::before {
  content: "👨‍🔧";
  position: absolute;
  left: 0;
  top: 0;
  color: #1a399e;
  /* hoặc màu logo */
  font-weight: bold;
}

.expertise-card img {
  transition: transform .5s ease;
}

.expertise-card:hover img {
  transform: scale(1.05);
}

.expertise-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;

  padding: 1.5rem;
  color: #fff;
  background: linear-gradient(to top, rgba(0, 0, 0, .75), rgba(0, 0, 0, .45), rgba(0, 0, 0, .15));

  transform: translateY(55%);
  transition: transform .4s ease;
}

.expertise-card:hover .expertise-overlay {
  transform: translateY(0);
}

.project-card img {
  transition: transform .5s ease;
}

.project-card:hover img {
  transform: scale(1.05);
}

/* Overlay */
.project-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;

  padding: 1.5rem;
  color: #fff;

  background: linear-gradient(to top,
      rgba(0, 0, 0, .8),
      rgba(0, 0, 0, .5),
      rgba(0, 0, 0, .15));

  transform: translateY(60%);
  transition: transform .4s ease;
}

.project-card:hover .project-overlay {
  transform: translateY(0);
}


/* Mobile: luôn hiện nội dung */
@media (max-width: 768px) {
  section {
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
  }

  .section-intro .ratio {
    aspect-ratio: 4 / 3;
  }

  .text-justify {
    text-align: left;
  }

  .expertise-overlay {
    transform: translateY(0);
  }

  .project-overlay {
    transform: translateY(0);
  }
}