/* Áp dụng font cho toàn bộ website */
* {
  font-family: "Inter", sans-serif;
}

body {
  font-family: "Inter", sans-serif;
  scroll-behavior: auto;
  overflow-x: hidden;
}
p {
  margin: 0;
}
body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-size: 12px;
  /* Đảm bảo nền luôn phủ kín toàn bộ chiều cao màn hình */
  min-height: 100vh;

  /* Cấu trúc Flexbox theo chiều dọc để xếp Header, Content, Footer */
  display: flex;
  flex-direction: column;

  /* Màu chữ trắng sáng nhẹ giúp giao diện trông sang hơn */
  color: #f8fafc;
  font-family: "Inter", "Segoe UI", Roboto, sans-serif;

  /* === TÔNG MÀU CHỦ ĐẠO: GRADIENT XANH BIỂN & XANH LÁ === */
  background-color: #080c14; /* Nền tối gốc để làm nổi bật dải màu */
  background-image: 
    /* Luồng sáng Xanh biển (Cyan/Blue) ở góc trên bên trái */
    radial-gradient(at 0% 0%, rgba(37, 99, 235, 0.2) 0px, transparent 50%),
    /* Luồng sáng Xanh lá (Green/Neon) ở góc dưới bên phải */
    radial-gradient(at 100% 100%, rgba(34, 197, 94, 0.15) 0px, transparent 50%),
    /* Một chút ánh sáng xanh ngọc hòa trộn ở giữa tạo độ mượt */
    radial-gradient(at 50% 50%, rgba(13, 148, 136, 0.05) 0px, transparent 70%);

  /* Giữ cho các dải màu cố định khi bạn cuộn trang, tạo hiệu ứng chiều sâu cực đẹp */
  background-attachment: fixed;

  /* Chống tràn khung theo chiều ngang */
  overflow-x: hidden;
}

/* Đảm bảo mọi phần tử đều tính toán kích thước chuẩn, không bị lỗi padding */
*,
*::before,
*::after {
  box-sizing: inherit;
}
main {
  margin-top: 100px;
}
section {
  width: 100%;
  height: auto;
}
#hero-section {
  width: 100%;
  min-height: 100vh;

  /* Background */
  background-color: rgb(2, 14, 7);
  background-image: url("../images/background/hero-section.png");

  /* Responsive background */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  /* Content */
  display: flex;
  align-items: center;
  justify-content: flex-start;
  /* Tránh bị dính sát mép trên mobile */
  padding: 80px 5%;
  overflow: hidden;
}
#skill-section {
  background-color: pink;
}

#project-section {
  background-color: grey;
}

#contact-section {
  background-color: goldenrod;
}
#scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background: linear-gradient(90deg, #38bdf8, #818cf8);
  transform-origin: left;
  transform: scaleX(0);
  z-index: 9999;
}
.overlay {
  position: relative;
  overflow: hidden;
}

.overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1;
  pointer-events: none;
}

.overlay > * {
  position: relative;
  z-index: 2;
}
.skill-card__progress-fill {
  transform-origin: left;
}

#hero-section-left > *,
.skill-section__left > *,
.skills-group,
.skill-card {
  opacity: 0;
}