/* 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: 1rem;
}

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

.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: 0.8rem;
}

.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.3s ease-in-out;
}

.navbar__search input:focus {
  box-shadow: 0 0 20px 10px 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: 1.4rem;
  font-size: 1.4rem;
}

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

.main_infor-content-text-item p {
  font-weight: bold;
  color: #b5b5b5;
  background-image: linear-gradient(to right, #48ffe7, #f8ff71);
  box-shadow: 5px 5px 8px 8px rgb(0 0 0 / 50%);
  color: black;
  border: 2px solid #000000;
  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);
  border: 1px solid #000000;
  box-shadow: 5px 5px 15px 5px rgb(75 75 75 / 50%);
  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, #ff3535, #3a47ff);
  transform: scale(1.02);
}

/* 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: 3px solid rgb(0, 0, 0);
  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: 2.2rem;
  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: 500px 1fr;
  background-image: linear-gradient(to top, #ffffff, #6efff6);
  gap: 2.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-image: linear-gradient(
    -225deg,
    #afffec 0%,
    #e4a9ff 48%,
    #67fcff 100%
  );
  color: black;
}

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

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

.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: #ff9500;
}

.main_skills-content-left-intro div {
  padding: 1rem 1rem;
  /* border: 4px solid #0329ff; */
  border-radius: 1rem;
  background-color: rgb(255, 255, 255);
  box-shadow: 5px 5px 10px 5px rgb(123 123 123 / 20%);
}

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

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

.main_skills-content-left-button button {
  padding: 1.4rem;
  border-radius: 2rem;
  border: none;
  width: 100%;
  cursor: pointer;
  box-shadow: 0px 0px 10px 5px rgba(74, 74, 74, 0.2);
  font-family: "VT323", monospace;
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 0.2rem;
  text-transform: capitalize;
  transition: all 1s ease-in-out;
  color: white;
  background-image: linear-gradient(to right, #ff6625 0%, #ffdd00 100%);
  height: 100%;
}

.main_skills-content-left-button button:hover {
  color: rgb(0, 0, 0);
  transform: scale(1.02);
}

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

.main_skills-content-right {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  background-image: linear-gradient(to top, rgb(255 181 181), rgb(239 255 138));
  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: 1.8rem;
  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: 1rem 1rem;
  border-radius: 0.8rem;
  color: white;
  box-shadow: 5px 5px 15px 8px rgb(0 0 0 / 50%);
}

.main_skills-content-right-item-heading p {
  font-family: "Josefin Sans", sans-serif;
  font-weight: bold;
  /* font-style: italic; */
  background-color: white;
  /* color: #000000; */
  text-align: center;
  width: 85%;
  margin: auto;
  /* border: 3px solid #ff9a03; */
  padding: 1rem;
  border-radius: 1rem;
  box-shadow: 5px 5px 10px 5px rgb(123 123 123 / 20%);
}

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

.main_skills-content-right-item-img img {
  /* border: 1px solid rgb(136, 136, 136); */
  box-shadow: 5px 5px 15px 0px rgb(0 0 0 / 60%);
  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 > div {
  background: linear-gradient(135deg, #ff7913 0%, #337eff 100%);
  padding: 1rem 1.2rem;
  border-radius: 1rem;
  color: white;
  box-shadow: 5px 5px 20px 8px rgb(0 0 0 / 10%);
}

.main_skills-content-right-item-img-detail > div h4 {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 0.6rem;
}

.main_skills-content-right-item-img-detail > div ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.main_skills-content-right-item-img-detail > div ul > div {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.main_skills-content-right-item-img-detail > div ul > div img {
  flex-shrink: 0;
}

.main_skills-content-right-item-img-detail > div ul li {
  font-size: 0.95rem;
  display: inline;
}

.main_skills-content-right-item-img-detail span {
  font-weight: bolder;
  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: 0.8rem;
  /* 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: 135px;
}

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

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

.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: 2.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: 0.8rem;
  /* 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: 0px 0px 10px 3px rgba(0, 0, 0, 0.25);
}

.main_projects-content-detail-description-features {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 80%;
  /* height: 90px; */
  margin: 0 auto 3.5rem;
  gap: 1.2rem;
  position: relative;
  /* z-index: 1; */
}

.main_projects-content-detail-description-features h4 {
  background-image: linear-gradient(-225deg, #d6fbff 0%, #ffd0cc 100%);
  color: black;
  padding: 0.8rem 0.8rem;
  border-radius: 1rem;
  box-shadow: 0px 0px 10px 3px rgb(0 0 0 / 40%);
  flex: 0 0 50%;
  text-align: center;
  z-index: 1;
}

.main_projects-content-detail-description-features-description {
  background-color: #ffffff99;
  padding: 1rem;
  border-radius: 1.5rem;
  box-shadow: 0px 0px 15px 3px rgb(195 195 195 / 50%);
  position: absolute;
  top: 45%;
  z-index: 0;
}

.main_projects-content-detail-description-features p {
  background-image: linear-gradient(to right, #74ebd5 0%, #9face6 100%);
  /* color: white; */
  padding: 1rem 1.2rem 0.8rem !important;
  border-radius: 1rem;
  flex: 0 0 50%;
  text-align: center;
  width: 100%;
  line-height: 1.4rem;
  box-shadow: 0px 0px 10px 5px rgb(184 184 184 / 50%) !important;
}

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

.main_projects-content-detail-description-techs h4 {
  background-image: linear-gradient(to right, #a6fff9, #f2d4ff);
  color: black;
  padding: 0.8rem;
  border-radius: 1rem;
  box-shadow: 0px 0px 10px 3px 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;
  justify-content: center;
  align-items: center;
  gap: 0.8rem;
}

.main_projects-content-detail-link-open-items {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  font-weight: 800;
  /* color: white; */
  padding: 0.6rem 0.8rem;
  border-radius: 4rem;
  font-size: 14px;
  box-shadow:
    rgba(14, 30, 37, 0.12) 0px 2px 4px 0px,
    rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
}

.main_projects-content-detail-link-open-items.live-demo {
  background-image: linear-gradient(-225deg, #55ff67 0%, #6292ff 100%);
  color: rgb(255, 255, 255);
}

.main_projects-content-detail-link-open-items.source-code {
  background-image: linear-gradient(-225deg, #c35ee1 0%, #ea5f7f 100%);
  color: rgb(255, 255, 255);
}

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

.main_projects-content-detail-description-techs-list img {
  box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, 0.25);
  padding: 0.6rem 0.4rem 0.5rem;
  border-radius: 10px;
}

.divide-highlight {
  color: #ff0000;
  font-weight: 700;
}

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

.long-list {
  display: flex;
  justify-content: flex-start;
  padding: 0.4rem;
  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: 1.8rem;
  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 button:hover {
  background-image: linear-gradient(to right, #68fc60, #ffea5f);
  color: black;
}

.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);
}

/* Modal Warning for Tablet, Phone  */
@media screen and (max-width: 768px) {
  .hidden-phone {
    display: none;
  }

  .modal-warning-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to top, #00c6fb 0%, #005bea 100%);
    z-index: 2;
  }

  .modal-warning {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #ffffff;
    padding: 1.4rem 1.2rem;
    /* margin: 0.5rem; */
    border-radius: 2rem;
    box-shadow:
      rgba(0, 0, 0, 0.19) 0px 10px 20px,
      rgba(0, 0, 0, 0.23) 0px 6px 6px;
    text-align: center;
    z-index: 1000;
    width: 98%;
  }

  .modal-warning-header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.4rem;
    font-weight: bold;
    font-size: 1.8rem;
    color: rgb(0, 0, 0);
  }

  .modal-warning-content {
    margin-top: 0.8rem;
    font-size: 1.4rem;
    color: rgb(98, 98, 98);
    /* font-weight: bold; */
    line-height: 1.4rem;
    /* word-spacing: 0.2rem; */
  }

  .modal-warning-buttons {
    margin-top: 1rem;
    margin-bottom: 0.4rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.6rem;
  }

  .modal-warning-share {
    background-color: #144fff;
    color: white;
    font-weight: 900;
    font-size: 1.2rem;
    padding: 1rem 1.4rem;
    border-radius: 5rem;
    border: none;
    width: 100%;
    cursor: pointer;
    box-shadow:
      rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
      rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
  }

  .modal-warning-close {
    text-decoration: none;
    background-color: #ffbb00;
    color: white;
    font-weight: 900;
    font-size: 1.2rem;
    padding: 1rem 1.4rem;
    border-radius: 5rem;
    border: none;
    cursor: pointer;
    width: 100%;
    cursor: pointer;
    box-shadow:
      rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
      rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
  }
}

.modal-downloadcv-overlay {
  position: fixed;
  top: 80px;
  left: 0;
  right: 0;
  bottom: 0;
  /* width: 100%;
  height: 100%; */
  background-image: linear-gradient(to top, #000000e5 0%, #00000000 100%);
  z-index: 2;
}

.modal-downloadcv {
  position: fixed;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #ffffff;
  padding: 1.4rem 1.6rem 1.8rem;
  border-radius: 2rem;
  box-shadow:
    rgba(0, 0, 0, 0.19) 0px 10px 20px,
    rgba(0, 0, 0, 0.23) 0px 6px 6px;
  background-image: linear-gradient(to top, #5c5c5cc5 0%, #ffffff 100%);
  text-align: center;
  z-index: 100;
  width: 520px;
  animation: flash 0.4s ease-in-out;
  animation-iteration-count: 2;
}

.modal-downloadcv.dark-theme {
  background-color: #000000 !important;
  border: 2px solid white;
  background-image: none !important;
  color: #fff !important;
  transition: background-color 1.5s ease-in-out;
}

.modal-downloadcv.dark-theme p {
  color: rgb(26, 239, 26);
}

.modal-downloadcv.dark-theme .modal-downloadcv-content {
  color: white;
}

.modal-downloadcv-close {
  position: absolute;
  top: 20px;
  right: 20px;
  cursor: pointer;
}

.modal-downloadcv-header p {
  color: green;
  font-size: 1.6rem;
  font-weight: 700;
  margin-top: 0.4rem;
}

.modal-downloadcv-content {
  color: black;
  font-size: 1.2rem;
  font-weight: 600;
  margin: 0.4rem 0 0.6rem 0;
}

.modal-downloadcv-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.8rem;
}

.modal-downloadcv-group {
  margin-top: 1.2rem;
  padding: 0.6rem 0.8rem 0.8rem;
  border-radius: 1.2rem;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(4px);
  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}

.modal-downloadcv-group-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: #555;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.modal-downloadcv-group-label img {
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}

.modal-downloadcv-options {
  display: flex;
  gap: 0.6rem;
}

.modal-downloadcv-option {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  padding: 0.65rem 0.8rem;
  border-radius: 1rem;
  border: 2.5px solid #ccc;
  background: rgba(255, 255, 255, 0.6);
  font-size: 0.95rem;
  font-weight: 600;
  color: #333;
  cursor: pointer;
  transition: all 0.25s ease;
  white-space: nowrap;
}

.modal-downloadcv-option > div {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.modal-downloadcv-option small {
  font-size: 0.7rem;
  font-weight: 400;
  color: #777;
  white-space: normal;
  text-align: center;
  line-height: 1.3;
}

.modal-downloadcv-option.selected small {
  color: #3377cc;
}

.modal-downloadcv-option img {
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}

.modal-downloadcv-option:hover {
  border-color: #888;
  background: rgba(255, 255, 255, 0.85);
}

.modal-downloadcv-option.selected {
  border-color: #0073ff;
  background: linear-gradient(135deg, #e8f0fe 0%, #d0e4ff 100%);
  color: #0055cc;
  box-shadow: 0 0 0 2px rgba(0, 115, 255, 0.15);
}

.modal-downloadcv-confirm {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.2rem;
  padding: 0.75rem 2rem;
  border-radius: 1.4rem;
  border: none;
  background: linear-gradient(135deg, #0073ff 0%, #00c6ff 100%);
  color: #fff;
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow:
    rgba(0, 115, 255, 0.25) 0px 4px 12px,
    rgba(0, 115, 255, 0.15) 0px 8px 24px;
}

.modal-downloadcv-confirm img {
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  filter: brightness(0) invert(1);
}

.modal-downloadcv-confirm:hover {
  background: linear-gradient(135deg, #005bd4 0%, #00a8e0 100%);
  transform: translateY(-1px);
  box-shadow:
    rgba(0, 115, 255, 0.35) 0px 6px 16px,
    rgba(0, 115, 255, 0.2) 0px 12px 32px;
}

/* Dark theme for new modal elements */
.modal-downloadcv.dark-theme .modal-downloadcv-group {
  background: rgba(255, 255, 255, 0.08);
}

.modal-downloadcv.dark-theme .modal-downloadcv-group-label {
  color: #aaa;
}

.modal-downloadcv.dark-theme .modal-downloadcv-option {
  background: rgba(255, 255, 255, 0.05);
  border-color: #555;
  color: #ccc;
}

.modal-downloadcv.dark-theme .modal-downloadcv-option:hover {
  border-color: #888;
  background: rgba(255, 255, 255, 0.1);
}

.modal-downloadcv.dark-theme .modal-downloadcv-option.selected {
  border-color: #4da6ff;
  background: linear-gradient(135deg, #0d2744 0%, #0a3260 100%);
  color: #6db8ff;
  box-shadow: 0 0 0 2px rgba(77, 166, 255, 0.2);
}

.modal-downloadcv.dark-theme .modal-downloadcv-option small {
  color: #888;
}

.modal-downloadcv.dark-theme .modal-downloadcv-option.selected small {
  color: #5aa0dd;
}

.modal-downloadcv-vie {
  display: flex;
  gap: 0.6rem;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  color: rgb(255, 255, 255);
  padding: 0.8rem 1.4rem;
  background-image: linear-gradient(to right, #e9cb22 0%, #e92727 100%);
  border-radius: 1.4rem;
  font-weight: 700;
  border: none;
  width: 100%;
  white-space: nowrap;
  box-shadow:
    rgba(0, 0, 0, 0.09) 0px 2px 1px,
    rgba(0, 0, 0, 0.09) 0px 4px 2px,
    rgba(0, 0, 0, 0.09) 0px 8px 4px,
    rgba(0, 0, 0, 0.09) 0px 16px 8px,
    rgba(0, 0, 0, 0.09) 0px 32px 16px;
}

.modal-downloadcv-en {
  display: flex;
  gap: 0.6rem;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  color: rgb(255, 255, 255);
  padding: 0.8rem 1.4rem;
  background-image: linear-gradient(135deg, #0073ff 0%, #ff2727 100%);
  border-radius: 1.4rem;
  font-weight: 700;
  border: none;
  width: 100%;
  box-shadow:
    rgba(0, 0, 0, 0.09) 0px 2px 1px,
    rgba(0, 0, 0, 0.09) 0px 4px 2px,
    rgba(0, 0, 0, 0.09) 0px 8px 4px,
    rgba(0, 0, 0, 0.09) 0px 16px 8px,
    rgba(0, 0, 0, 0.09) 0px 32px 16px;
}

@media (min-width: 769px) and (max-width: 1349px) {
  .hidden-tablet {
    display: none;
  }

  .modal-warning-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to top, #00c6fb 0%, #005bea 100%);
    z-index: 2;
  }

  .modal-warning {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #ffffff;
    padding: 1.4rem 1.2rem;
    /* margin: 0.5rem; */
    border-radius: 2rem;
    box-shadow:
      rgba(0, 0, 0, 0.19) 0px 10px 20px,
      rgba(0, 0, 0, 0.23) 0px 6px 6px;
    text-align: center;
    z-index: 1000;
    width: 60%;
  }

  .modal-warning-header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.4rem;
    font-weight: bold;
    font-size: 1.8rem;
    color: rgb(0, 0, 0);
  }

  .modal-warning-content {
    margin-top: 0.8rem;
    font-size: 1.4rem;
    color: rgb(98, 98, 98);
    /* font-weight: bold; */
    line-height: 1.4rem;
    /* word-spacing: 0.2rem; */
  }

  .modal-warning-buttons {
    margin-top: 1rem;
    margin-bottom: 0.4rem;
    display: flex;
    /* flex-direction: column; */
    justify-content: center;
    align-items: center;
    gap: 0.6rem;
  }

  .modal-warning-share {
    background-color: #144fff;
    color: white;
    font-weight: 900;
    font-size: 1.2rem;
    padding: 1rem 1.4rem;
    border-radius: 5rem;
    border: none;
    width: 100%;
    cursor: pointer;
    box-shadow:
      rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
      rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
  }

  .modal-warning-close {
    text-decoration: none;
    background-color: #ffbb00;
    color: white;
    font-weight: 900;
    font-size: 1.2rem;
    padding: 1rem 1.4rem;
    border-radius: 5rem;
    border: none;
    cursor: pointer;
    width: 100%;
    cursor: pointer;
    box-shadow:
      rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
      rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
  }
}

@media (min-width: 1350px) and (max-width: 1745px) {
  .hidden-laptop {
    display: none;
  }
}

@media screen and (min-width: 1746px) {
  .hidden-desktop {
    display: none;
  }

  .main_skills {
    width: 90%;
  }

  .main_skills-content {
    grid-template-columns: 1fr 1fr;
  }

  .main_skills-content-right-item-img {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    place-content: center;
    width: 100%;
  }

  .main_skills-content-right-item-heading p {
    width: 100%;
  }

  .main_skills-content-left-intro h2 {
    font-size: 2.4rem;
    padding: 2rem;
  }

  .main_skills-content-right-item-heading-title {
    padding: 2rem;
  }

  .main_skills-content-right-item-heading-title h3 {
    font-size: 2.4rem;
  }

  .main_skills-content-left-intro p {
    font-size: 1.4rem;
  }

  .main_skills-content-left-button button {
    font-size: 2rem;
    padding: 2rem 1rem;
  }

  .main_skills-content-right-item-heading p {
    font-size: 1.3rem;
    padding: 1.4rem;
  }

  .main_skills-content-left-intro img {
    width: 50px;
    height: 50px;
  }

  .main_skills-content-left-intro div {
    padding: 1.8rem;
  }

  .main_skills-content-right-item-img img {
    width: 100%;
    height: 100%;
  }

  /* Project */
  .main_projects-content-detail-title h1 {
    font-size: 14rem;
    height: 240px;
  }

  .main_projects-content-detail-title-text h2 {
    font-size: 5rem;
  }

  .main_projects-content-detail-title-text span {
    font-size: 3rem;
  }

  .main_projects-content-detail-description p:first-child {
    font-size: 1.4rem;
  }

  .main_projects-content-detail-description-features h4 {
    font-size: 1.4rem;
  }

  .main_projects-content-detail-description-techs h4 {
    font-size: 1.4rem;
  }

  .main_projects-content-detail-description-techs-list img {
    min-width: 150px;
  }

  /* Personal Information */
  .main_infor-content-img img {
    width: 520px;
  }

  .main_infor-content-text h2 {
    font-size: 5rem;
  }

  .main_infor-content-text-item span {
    font-size: 1.6rem;
    width: 30%;
    padding: 1.2rem 0;
  }

  .main_infor-content-text-item p {
    font-size: 1.6rem;
    width: 70%;
    padding: 1.2rem 0;
  }

  /* Favorite */
  .main_hobby-content-container {
    width: fit-content;
  }

  .main_hobby-content-title h2 {
    font-size: 4rem;
    padding: 0.5rem 1rem;
  }

  .main_hobby-content-list-img {
    width: 430px;
  }

  /* Goals */
  .main_career-goal-content-container {
    width: 90%;
  }

  .main_career-goal-content {
    /* width: 90%; */
  }

  .main_career-goal-content-text h2 {
    font-size: 3.6rem;
  }

  .main_career-goal-content-img img {
    width: 650px;
  }

  .main_career-goal-content-list-item {
    font-size: 1.4rem;
    padding: 1.3rem 0.8rem;
    border-radius: 20px;
  }

  /* Contact */
  .main_contact-content h3 {
    font-size: 4rem;
  }

  .main_contact-content-form-input input,
  .main_contact-content-form-input-message textarea {
    font-size: 1.8rem;
    padding: 2rem;
  }

  .main_contact-content-form button {
    font-size: 1.8rem;
  }

  .main_contact-content-infor-title-text span:first-child,
  .main_contact-content-infor-title-text span:last-child {
    font-size: 1.6rem;
  }

  .main_contact-content-infor-title {
    padding: 1.6rem 1.2rem;
  }
}