/* Phần chung */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Josefin Sans", sans-serif;
  /* font-size: 16px; */
}

html {
  scroll-behavior: smooth;
  background-image: linear-gradient(to top, #000000, #0066db);
}

section {
  scroll-margin-top: 95px;
}

body {
  background-image: linear-gradient(to top, #000000, #0066db);
  color: white;
  background-position: center;
  background-repeat: no-repeat;
  height: 100%;
  transition: background-color 1.5s ease-in-out;
}

body.dark-theme{
  /* color: white; */
  background-image: none !important;
  background-color: black !important;
}

/* Cuộn lên đầu trang */
.scrollToTop {
  position: fixed;
  bottom: 1.2rem;
  left: 1.5rem;
  display: none;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  animation: bounceIn 1.6s ease-in-out;
}

.scrollToTop:hover {
  transform: scale(1.15);
}

@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
  70% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}

/* Thanh điều hướng */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  background-color: #1b1b1b;
  animation: fadeInUp 3s ease-in-out;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1;
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(40px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.navbar__logo {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  text-decoration: none;
}

.navbar__logo-img {
  width: 50px;
  height: 50px;
}

.navbar__logo-img-container {
  position: relative;
}

.navbar__logo img {
  border-radius: 50%;
  object-fit: cover;
  width: 50px;
  height: 100%;
}

.navbar__logo-img-container::before,
.navbar__logo-img-container::after {
  content: "";
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  border-radius: 50%;
  z-index: 1;
  background-image: conic-gradient(#0f0, transparent, transparent, transparent);
  animation: rotateBorder 4s linear infinite;
  filter: blur(2px);
  opacity: 0.95;
  -webkit-mask: radial-gradient(farthest-side, transparent 80%, black 80%);
}

.navbar__logo-img-container::after {
  /* animation-direction: reverse;  */
  opacity: 0.95;
  filter: blur(3px);
}

@keyframes rotateBorder {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* @keyframes shadowMove {
  0% {
    box-shadow: 20px 0px 30px 6px rgba(73, 254, 215, 0.5);
  }
  25% {
    box-shadow: 0px 20px 30px 6px rgba(72, 176, 255, 0.5);
  }
  50% {
    box-shadow: -20px 0px 30px 6px rgba(78, 245, 81, 0.5);
  }
  75% {
    box-shadow: 0px -20px 30px 6px rgba(194, 255, 102, 0.5);
  }
  100% {
    box-shadow: 20px 0px 30px 6px rgba(202, 253, 73, 0.5);
  }
} */

.navbar__logo span {
  font-weight: bolder;
  font-size: 32px;
  font-family: "Saira Stencil One", "Black Ops One", sans-serif;
  /* Font gradient */
  background: linear-gradient(to right, hsl(123, 89%, 79%), #33daff);
  background-clip: text;
  color: transparent;
}

.navbar__menu-list {
  display: flex;
  list-style: none;
  gap: 1.4rem;
}

.navbar__menu-item {
  font-weight: bold;
  padding: 1rem ;
  width: 100px;
  text-align: center;
  border-radius: 1rem;
  transition: all 0.5s ease-in-out;
  cursor: pointer;
  color: white;
  transition: all 0.5s ease-in-out;
}

.navbar__menu-list a {
  text-decoration: none;
}

.navbar__menu-item:hover {
  background-image: linear-gradient(to right, #144fff, #00d0ff);
  transform: scale(1.08);
  background-size: 100%;
  box-shadow: 0px 0px 20px 3px rgb(255, 255, 255);
}

.navbar__menu-item.activeNavbar {
  background-image: linear-gradient(to right, #1b54ff, #ff1d1d);
  animation: flash 0.8s ease-in-out;
}

.navbar_right {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}

#vie-language,
#usa-language,
#light-mode,
#dark-mode {
  cursor: pointer;
  animation: fadeIn 1.5s ease-in-out;
}

.navbar_mode {
  display: flex;
  gap: 1rem;
}

.hidden {
  display: none;
}

.navbar__search {
  display: flex;
  align-items: center;
  position: relative;
}

.navbar__search img {
  position: absolute;
  right: 1rem;
  width: 1.5rem;
  height: 1.5rem;
  cursor: pointer;
}

.navbar__search input {
  padding: 0.7rem 1.2rem;
  border-radius: 5rem;
  border: none;
  outline: none;
  transition: all 0.4s ease-in-out;
}

.navbar__search input:focus {
  box-shadow: 0 0 20px 8px rgba(0, 208, 255, 0.732);
}

/* Phần header banner */

header {
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.header__banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  position: relative;
  animation: backInDown 2s ease-in-out;
  height: 100vh;
}

@keyframes backInDown {
  0% {
    transform: translateY(-300px) scale(0.5);
    opacity: 0.7;
  }
  80% {
    transform: translateY(0px) scale(0.5);
    opacity: 1;
  }
  100% {
    transform: scale(1);
  }
}

.header__banner-text-title {
  font-size: 2.8rem;
  font-weight: bold;
  color: #ebff39;
  text-transform: uppercase;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  font-family: "Saira Stencil One", "Black Ops One", sans-serif;
}

.header__banner-text-subtitle {
  color: #ffffff;
  font-size: 1.6rem;
  /* width: 100%; */
  font-family: "VT323", monospace;
}

.header__banner-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2.5rem;
  height: 100%;
}

.header__banner-button {
  display: flex;
  gap: 1.4rem;
}

.header__banner-button-more {
  padding: 1rem 3rem;
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 1rem;
  font-size: 1.3rem;
  font-weight: bolder;
  background-image: linear-gradient(to right, #0aebff, #a2ff7a);
  transition: all 0.5s ease-in-out;
  cursor: pointer;
  text-decoration: none;
  color: black;
  box-shadow: 10px 10px 50px 1px rgb(31, 31, 31);
}

.header__banner-button-downloadcv {
  padding: 1.5rem 3rem;
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  font-weight: bolder;
  transition: all 0.5s ease-in-out;
  border-radius: 1rem;
  transition: all 0.5s ease-in-out;
  cursor: pointer;
  background-color: white;
  text-decoration: none;
  color: black;
  box-shadow: 10px 10px 50px 1px rgb(31, 31, 31);
}

.header__banner-button-more:hover {
  filter: brightness(1.2);
  box-shadow: 0px 0px 20px 3px rgb(255, 255, 255);
  transform: scale(1.05);
}

.header__banner-button-downloadcv:hover {
  filter: brightness(1.2);
  box-shadow: 0px 0px 20px 3px rgb(255, 255, 255);
  transform: scale(1.05);
}

.header__banner-img {
  width: 95%;
}

.header_banner-img-man {
  position: absolute;
  right: 0;
  bottom: 20%;
}

.header_banner-img-robot {
  position: absolute;
  right: 5%;
  top: 25%;
  animation: robotJump 3s infinite ease-in-out;
}

@keyframes robotJump {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-50px);
  }
  100% {
    transform: translateY(0);
  }
}

main {
  display: flex;
  flex-direction: column;
  gap: 16rem;
}

/* Phần nội dung chính */
.main_infor {
  display: flex;
  justify-content: center;
  gap: 2rem;
  align-items: center;
  background-color: #ffffff1a;
  padding: 2.5rem;
  /* width: 70%; */
  margin: 0 auto;
  border-radius: 3rem;
  transition: all 0.5s ease-in-out;
}

/* @keyframes fadeIn {
    0% {
        opacity: 0;
        transform: scale(0.8) translateY(20px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
} */

.main_infor-content {
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: linear-gradient(to bottom, #e8e8e8, #9b9b9b);
  border-radius: 2rem;
  padding: 1rem;
  box-shadow: 0px 0px 50px 25px rgba(121, 255, 231, 0.482);
}

.main_infor:hover {
  transform: scale(1.05);
  box-shadow: 0px 0px 100px 25px rgba(255, 255, 255, 0.482);
  background-color: #ffffff67;
}

.main_infor-content-img {
  padding: 2rem;
  border-radius: 4rem;
  transition: all 0.5s ease-in-out;
}

/* .main_infor-content-img:hover {
  box-shadow: 0px 0px 50px 15px rgba(121, 255, 231, 0.482);
  filter: brightness(1.1);
  transform: scale(1.05);
} */

.main_infor-content-img.active-img {
  filter: brightness(1.1);
  transform: scale(1.05);
}

.main_infor-content-img img {
  border-radius: 3rem;
  box-shadow: 0px 0px 50px 20px rgb(255, 255, 255);
  cursor: pointer;
  border: 1px solid rgb(172, 172, 172);
}

.main_infor-content-text h2 {
  font-family: Saira Stencil One, "Black Ops One", sans-serif;
  font-size: 2.8rem;
  margin: 1.2rem auto;
  color: transparent;
  background: linear-gradient(to right, #ff0000, #d400ff);
  background-clip: text;
  text-align: center;
  letter-spacing: 0.4rem;
}

.main_infor-content-text-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
  font-size: 1.4rem;
}

.main_infor-content-text-item span {
  font-weight: bolder;
  color: #ffffff;
  background-color: #ff0000;
  border-radius: 3rem;
  padding: 0.6rem 0;
  width: 190px;
  text-align: center;
}

.main_infor-content-text-item p {
  font-weight: bold;
  color: #b5b5b5;
  background-image: linear-gradient(to right, #48ffe7, #f8ff71);
  color: black;
  border-radius: 3rem;
  padding: 0.6rem 0;
  width: 100%;
  text-align: center;
}

/* Mục tiêu nghề nghiệp */
.main_career-goal-content-container {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ffffff63;
  padding: 2rem;
  border-radius: 3rem;
  box-shadow: 0px 0px 20px 10px rgba(255, 255, 255, 0.482);
  transition: all 0.5s ease-in-out;
  width: 80%;
  margin: 0 auto;
}

.main_career-goal-content {
  background-image: linear-gradient(to top, #fbfbfb, #ee3efe);
  padding: 2rem;
  border-radius: 3rem;
}

.main_career-goal-content-container:hover {
  background-color: #ffffff71;
  box-shadow: 0px 0px 50px 25px rgba(255, 255, 255, 0.482);
  transform: scale(1.05);
}

.main_career-goal-content {
  display: flex;
  gap: 3rem;
  justify-content: space-between;
  align-items: center;
  /* width: 80%; */
}

.main_career-goal-content-img {
  padding: 2rem;
  background-color: #ffffffcd;
  border-radius: 3.5rem;
  transition: all 0.5s ease-in-out;
}

.main_career-goal-content-img img {
  border-radius: 3rem;
  box-shadow: 0px 0px 50px 20px rgb(255, 255, 255);
}

.main_career-goal-content-img:hover {
  /* transform: scale(1.05); */
  box-shadow: 0px 0px 75px 30px rgba(255, 255, 255, 0.482);
  filter: brightness(1.12);
}

.main_career-goal-content-text h2 {
  font-family: Saira Stencil One, "Black Ops One", sans-serif;
  font-size: 2.6rem;
  margin: 1.2rem auto;
  color: transparent;
  background: linear-gradient(to right, #ffff1b, #4cffe7);
  background-clip: text;
  text-align: center;
  /* letter-spacing: 0.6rem; */
}

.main_career-goal-content-list {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.main_career-goal-content-list-item {
  font-size: 1.2rem;
  word-spacing: 0.4rem;
  line-height: 1.4rem;
  font-weight: bold;
  color: #b5b5b5;
  background-image: linear-gradient(to right, #ff0000, #2231ff);
  color: rgb(255, 255, 255);
  border-radius: 3rem;
  padding: 0.6rem 1.5rem;
  width: 100%;
  text-align: center;
  list-style: none;
  transition: all 0.5s ease-in-out;
}

.main_career-goal-content-list-item:hover {
  background-image: linear-gradient(to right, #e70000, #000fe4);
}

/* Sở thích */
.main_hobby-content-container {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ffffff70;
  padding: 1.5rem 2.5rem;
  border-radius: 3rem;
  box-shadow: 0px 0px 50px 25px rgba(255, 255, 255, 0.482);
  position: relative;
  width: 60%;
  margin: 0 auto;
}

.main_hobby-content {
  background-image: linear-gradient(to top, #ffffffb3, #858585);
  padding: 2rem;
  border-radius: 2rem;
  width: 100%;
  /* width: 50%; */
}

.main_hobby-content-lottie {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 270px;
  z-index: 1;
}

/* .main_hobby-content:hover{
    transform: scale(1.05);
    box-shadow: 0px 0px 100px 25px rgba(255, 255, 255, 0.482);
    filter: brightness(1.03);
} */

.main_hobby-content-title {
  background: linear-gradient(to RIGHT, #49fcf9, #fffb1c);
  border-radius: 1rem;
}

.main_hobby-content-title h2 {
  font-family: Saira Stencil One, "Black Ops One", sans-serif;
  font-size: 2.5rem;
  color: transparent;
  padding: 0.5rem 0;
  background: linear-gradient(to top, #ff0000, #ee00ff);
  /* text-shadow: 2px 2px 4px rgba(255, 254, 175, 0.5); */
  background-clip: text;
  text-align: center;
  letter-spacing: 0.6rem;
  margin-bottom: 1rem;
}

.main_hobby-content-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.main_hobby-content-list figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  transition: all 0.5s ease-in-out;
}

.main_hobby-content-list figcaption {
  font-family: "VT323", monospace;
  font-size: 1.4rem;
  color: black;
}

.main_hobby-content-list-img {
  border-radius: 2rem;
  box-shadow: 0px 0px 50px 10px rgba(232, 232, 232, 0.482);
  border: 1px solid rgb(81, 81, 81);
  transition: all 0.5s ease-in-out;
}

.main_hobby-content-list-img:hover {
  box-shadow: 0px 0px 75px 30px rgba(255, 255, 255, 0.482);
  transform: scale(1.05);
  filter: brightness(1.12);
}

.main_hobby-content-list figure:hover {
  transform: scale(1.04);
  font-weight: bold;
  /* font-size: 1.2rem; */
}

/* Kỹ năng */
.main_skills {
  background-color: #ffffff7b;
  width: 90%;
  margin: 0 auto;
  padding: 1.8rem;
  border-radius: 3rem;
  color: black;
  box-shadow: 0px 0px 30px 15px rgba(255, 255, 255, 0.482);
}

.main_skills-content {
  display: grid;
  grid-template-columns: 460px 1fr;
  background-image: linear-gradient(to top, #ffffff, #ff9c2c);
  gap: 2rem;
  border-radius: 2rem;
  padding: 1.8rem;
}
.main_skills-content-right-item {
  display: none;
  animation: fadeIn 2s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.active {
  display: block;
}

.main_skills-content-left-button button.choosen {
  background-color: #e6fb04;
}

.main_skills-content-left {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  background-image: linear-gradient(
    to top,
    rgb(255, 240, 128),
    rgb(116, 255, 255)
  );
  padding: 1.5rem;
  border-radius: 2rem;
  box-shadow: 10px 10px 35px 20px rgba(0, 0, 0, 0.2);
}

.main_skills-content-left-intro h2 {
  font-family: Saira Stencil One, "Black Ops One", sans-serif;
  font-weight: bold;
  font-size: 1.6rem;
  font-style: normal;
  background-image: linear-gradient(to left, #f3ff51, #fae4ff);
  padding: 1rem 1rem;
  border-radius: 1rem;
  width: 100%;
  text-align: center;
  box-shadow: 5px 5px 20px 15px rgba(15, 15, 15, 0.2);
}

.main_skills-content-left-intro p {
    font-family: "Josefin Sans", sans-serif;
  word-spacing: 0.4rem;
  padding: 0 1rem;
  line-height: 1.4rem;
  font-weight: bold;
  /* font-style: italic; */
  color: #0331ff;
}

.main_skills-content-left-intro div {
  padding: 1rem 0.1rem;
  border: 2px solid #ff0303;
  border-radius: 1rem;
  background-color: rgb(255, 255, 255);
}

.main_skills-content-left-intro {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.main_skills-content-left-button {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: 1.4rem;
}

.main_skills-content-left-button button {
  padding: 1rem;
  border-radius: 2rem;
  border: none;
  width: 100%;
  cursor: pointer;
  box-shadow: 0px 0px 10px 10px rgba(115, 115, 115, 0.2);
  font-family: "VT323", monospace;
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.2rem;
  text-transform: capitalize;
  transition: all 1s ease-in-out;
}

.main_skills-content-left-button button:hover {
  background-color: #76ff2c;
}

.main_skills-content-right-item-heading {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.main_skills-content-right {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  background-image: linear-gradient(
    to top,
    rgb(187, 255, 255),
    rgb(236, 255, 116)
  );
  padding: 1.5rem;
  border-radius: 2rem;
}

/* .main_skills-content-left-intro::after,
.main_skills-content-right-item-heading::after {
  content: "";
  width: 100%;
  height: 1px;
  background-color: rgb(255, 157, 9);
} */

.main_skills-content-right-item.active {
  display: grid;
  row-gap: 1.5rem;
}

.main_skills-content-right-item-heading-title h3 {
    font-family: Saira Stencil One, "Black Ops One", sans-serif;

  font-size: 2rem;
  letter-spacing: 0.4rem;
  color: white;
  font-weight: bold;
}

.main_skills-content-right-item-heading-title {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  background-image: linear-gradient(to right, #ff7373, rgb(33, 66, 255));
  padding: 0.8rem 1rem;
  border-radius: 0.8rem;
  color: white;
  box-shadow: 5px 5px 20px 10px rgba(0, 0, 0, 0.2);
}

.main_skills-content-right-item-heading p {
    font-family: "Josefin Sans", sans-serif;
  font-weight: bold;
  /* font-style: italic; */
  background-image: linear-gradient(to right, #fe16fe, rgb(26, 45, 255));
  background-clip: text;
  color: transparent;
  text-align: center;
  /* width: 90%; */
  margin: auto;
  border: 1px solid #525252;
  padding: 1rem;
  border-radius: 1rem;
  box-shadow: 5px 5px 15px 10px rgba(166, 166, 166, 0.2);
}

.main_skills-content-right-item-img {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  justify-items: center; /* căn giữa từng ảnh trong cột */
  align-items: center;
  width: 85%;
  margin: auto;
  gap: 1rem;
}

.main_skills-content-right-item-img img {
  /* border: 1px solid rgb(136, 136, 136); */
  box-shadow: 5px 5px 50px 10px rgba(70, 70, 70, 0.2);
  padding: 0.5rem;
  border-radius: 1rem;
  object-fit: contain;
  background-color: white;
  cursor: pointer;
}

.main_skills-content-right-item-img-detail {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 1.2rem;
}

.main_skills-content-right-item-img-detail span {
  font-weight: bold;
  text-align: center;
  font-size: 1.2rem;
  color: rgb(0, 68, 255);
}

.main_skills-content-right-item-img img:hover {
  animation: flash 0.3s infinite ease-in-out;
}

@keyframes flash {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

/* Phần dự án */
.main_projects {
  background-color: #ffffff7b;
  width: 90%;
  margin: 0 auto;
  padding: 1.8rem;
  border-radius: 3rem;
  color: black;
  box-shadow: 0px 0px 30px 15px rgba(255, 255, 255, 0.482);
  position: relative;
}

.main_projects-content {
  grid-template-columns: 1fr 1fr;
  background-image: linear-gradient(to top, #ffffff, #fcff44);
  gap: 2rem;
  border-radius: 2rem;
  padding: 1.8rem;
  display: none;
  animation: fadeIn 1.5s ease-in-out;
}

.main_projects-content.active {
  display: grid;
}

.main_projects-content-img img {
  border-radius: 2rem;
  border: 1px solid rgb(195, 195, 195);
  box-shadow: 0px 0px 50px 20px rgb(175, 175, 175);
}

.main_projects-content-detail {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.5rem;
  max-height: 560px;
}

.main_projects-content-detail-title {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.main_projects-content-detail-title h1 {
  font-family: "Saira Stencil One", "Black Ops One", sans-serif;
  font-size: 8rem;
  height: 130px;
}

.main_projects-content-detail-title-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  /* gap: 0.5rem; */
}

.main_projects-content-detail-description {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.main_projects-content-detail-link {
  align-items: flex-end;
  justify-content: flex-end;
}

.main_projects-content-detail-title-text h2 {
  font-family: "Shantell Sans", cursive;
  font-size: 2.8rem;
  color: #000000;
  text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.5);
}

.main_projects-content-detail-title-text span {
  font-family: "VT323", monospace;
  font-weight: bold;
  font-size: 2rem;
  color: #777777;
  text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.5);
}

.main_projects-content-img-button {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}

.main_projects-content-img-button img {
  cursor: pointer;
}

.main_projects-content-img-button-page span {
  cursor: pointer;
  padding: 1rem;
  background-color: rgb(255, 0, 255);
}

.main_projects-content-img-button img:first-child {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.main_projects-content-img-button img:last-child {
  position: absolute;
  right: 0;
  top: 50%;
}

.main_projects-content-detail-description {
  border-bottom: 1px solid #000000;
  padding-bottom: 2rem;
  /* margin-top: 1rem; */
  color: #000000;
}

.main_projects-content-detail-description p:first-child {
  /* font-size: 1.4rem; */
  font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
  font-weight: 600;
  /* color: #ffffff; */
  background-image: linear-gradient(to right, #ffffff, #ffffff);
  padding: 1rem 1.4rem;
  border-radius: 1rem;
  box-shadow: 6px 6px 25px 10px rgba(0, 0, 0, 0.25);
}

.main_projects-content-detail-description-features {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 90%;
  margin: auto;
  gap: 1.2rem;
}

.main_projects-content-detail-description-features h4 {
  background-image: linear-gradient(to right, #f700ff, #2437ff);
  color: white;
  padding: 1rem 1.4rem;
  border-radius: 1rem;
  box-shadow: 0px 0px 25px 5px rgba(0, 0, 0, 0.25);
  flex: 0 0 20%;
  text-align: center;
}

.main_projects-content-detail-description-features p {
  background-color: rgb(255, 132, 39);
  color: white;
  padding: 0.8rem 1.2rem;
  border-radius: 1rem;
  flex: 0 0 80%;
  text-align: center;
  width: 100%;
  line-height: 1.4rem;
}

.main_projects-content-detail-description-techs {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  position: relative;
}

.main_projects-content-detail-description-techs h4 {
  background-image: linear-gradient(to right, #f700ff, #2437ff);
  color: white;
  padding: 1rem 1.4rem;
  border-radius: 1rem;
  box-shadow: 0px 0px 25px 5px rgba(0, 0, 0, 0.25);
}

.main_projects-content-detail-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}

.main_projects-content-detail-link-open {
  display: flex;
  gap: 0.6rem;
}

.main_projects-content-detail-description-techs-list {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.6rem;
}

.long-list-container {
  width: 355px;
  overflow: hidden;
}

.long-list {
  display: flex;
  justify-content: flex-start;
  transition: transform 1s ease-in-out;
}

.long-list img {
  min-width: 80px;
  /* margin-right: 1rem; */
  /* flex-shrink: 0; */
}

.main_projects-content-detail-link-open img {
  border-radius: 50%;
}

#next-tech {
  position: absolute;
  right: 55px;
  top: 65%;
  transform: translateY(-50%);
  cursor: pointer;
  border-radius: 50%;
  box-shadow: 0px 0px 25px 5px rgb(164, 164, 164);
}

#prev-tech {
  position: absolute;
  left: 55px;
  top: 65%;
  transform: translateY(-50%);
  cursor: pointer;
  border-radius: 50%;
  box-shadow: 0px 0px 25px 5px rgb(164, 164, 164);
}

/* Phần liên hệ */
.main_contact {
  background-color: #ffffff7b;
  width: 90%;
  margin: 0 auto;
  padding: 1rem;
  border-radius: 3rem;
  color: black;
  width: 80%;
  box-shadow: 0px 0px 30px 15px rgba(255, 255, 255, 0.482);
  /* scroll-margin-top: 200px */
}

.main_contact-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  background-color: rgb(255, 255, 255);
  padding: 1.8rem;
  border-radius: 2rem;
  border: 1px solid #000000;
}

.main_contact-content-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  gap: 1rem;
}

.main_contact-content-form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  flex: 0 0 60%;
  position: relative;
}

.main_contact-content-form::after {
  content: "";
  position: absolute;
  width: 1px;
  height: 100%;
  right: -20px;
  background-color: rgb(204, 204, 204);
}

.main_contact-content-form-input {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  width: 100%;
}

.main_contact-content h3 {
  font-family: "Saira Stencil One", "Black Ops One", sans-serif;
  font-size: 2.5rem;
  color: rgb(255, 0, 0);
  text-align: center;
  letter-spacing: 0.4rem;
  /* border-bottom: 2px solid #fa8100; */
  border-radius: 1rem;
  background-image: linear-gradient(to right, #9affce, #f5ff83);
  width: 100%;
}

.main_contact-content-form button {
  padding: 1rem 2rem;
  border-radius: 1rem;
  border: none;
  background-color: #357edd;
  color: white;
  width: 100%;
  font-size: 1.2rem;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

.main_contact-content-form-input-name,
.main_contact-content-form-input-email {
  display: flex;
  justify-content: space-between;
  width: 100%;
  gap: 1.2rem;
}

.main_contact-content-form-input input {
  padding: 1rem;
  border-radius: 1rem;
  border: none;
  outline: none;
  font-size: 1.2rem;
  color: #333;
  background-color: #f0f0f0;
  /* flex: 0 0 46%; */
  width: 100%;
}

.main_contact-content-form-input-address {
  display: flex;
  width: 100%;
}

.main_contact-content-form-input-address input {
  flex: 0 0 100%;
}

.main_contact-content-form-input-message {
  width: 100%;
}

.main_contact-content-form-input-message textarea {
  width: 100%;
  outline: none;
  border: none;
  height: 200px;
  resize: none;
  padding: 1rem;
  font-size: 1.2rem;
  border-radius: 8px;
  background-color: #f0f0f0;
}

.main_contact-content-form-input-success {
  display: none;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  background-color: rgb(1, 255, 1) !important;
  color: black !important;
  animation: fadeIn 1s ease-in-out;
}

.main_contact-content-infor {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1.6rem;
  flex: 0 0 40%;
}

.main_contact-content-infor-title {
  display: flex;
  align-items: center;
  gap: 1rem;
  background-color: rgb(228, 228, 228);
  padding: 1.1rem 1rem;
  border-radius: 1rem;
  width: 90%;
  text-decoration: none;
  color: black;
}

.main_contact-content-infor-title-text {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.main_contact-content-infor-title-text span:first-child {
  font-weight: bold;
  color: #909090;
}

.main_contact-content-infor-title-text span:last-child {
  font-weight: bold;
  font-size: 1.2rem;
  color: black;
}



footer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 1rem;
  width: 85%;
  margin: auto;
  margin-top: 8rem;
  margin-bottom: 2.5rem;
}

.footer__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  border-bottom: 1px solid #9d9d9d;
  padding-bottom: 1rem;
}

.footer__top h3 {
  font-family: 'Courier New', Courier, monospace;
  font-weight: 600;
  font-size: 2rem;
  color: rgb(170, 170, 170);
  line-height: 1rem;
}

.footer__top span {
  color: rgb(56, 255, 60);
  /* font-family: "DynaPuff", system-ui; */
}

.footer__top-text {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.1rem;
  padding: 0.1rem 0.15rem;
  border-radius: 2rem;
  background-color: #e7b602;
  cursor: pointer;
  box-shadow: 0px 0px 40px 10px rgba(172, 172, 172, 0.482);
}

.footer__top-text p {
  background-color: #ffffff;
  color: black;
  font-weight: bolder;
  /* color: black; */
  padding: 1rem 1rem;
  border-radius: 3rem;
}

.footer__top-text img {
  padding: 0.4rem;
}

.footer_bottom {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  gap: 1rem;
}

.footer__left {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  flex: 0 0 calc(40% - 1rem);
}

.footer__left-logo {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
  text-decoration: none;
  color: white;
}

.footer__left-logo img {
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #09ff3e;
}

.footer__left-logo-text {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.footer__left-logo-text h3 {
  font-size: 1.4rem;
}

.footer__left-logo-text span {
  color: #acabab;
  font-size: 1.1rem;
}

.footer__left-social {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 1rem;
}

.footer__left-social a {
  text-decoration: none;
}

.footer__left-description {
  color: #b5b5b5;
}

.footer__center {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  flex: 0 0 calc(20% - 1rem);
}

.footer__center-links {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.footer__center-links a {
  text-decoration: none;
  transition: all 0.3s ease-in-out;
  color: #c8c8c8;
}

.footer__right {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  flex: 0 0 calc(40% - 1rem);
}

.footer__right-tags {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.8rem;
}

.footer__right-tags a {
  text-decoration: none;
  color: rgb(255, 255, 255);
  background-color: #757575;
  padding: 0.5rem;
  border-radius: 1rem;
  transition: all 0.3s ease-in-out;
  box-shadow: 5px 5px 6px 3px rgba(255, 255, 255, 0.482);
}