@import url(https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Jost:ital,wght@0,100..900;1,100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap);
@import url(https://necolas.github.io/normalize.css/8.0.1/normalize.css);
html, body {
  margin: 0;
  min-height: 100%;
  min-width: 100%;
  padding: 0;
}

.text-node { background-clip: text !important; -webkit-background-clip: text !important; }

body {
  margin: 0px;
  min-height: 100vh;
  text-decoration: none;
  font-family: 'Montserrat';
  background: linear-gradient(to bottom, rgba(0, 51, 50, 1) 7.000000000000001%,rgba(3, 76, 54, 1) 100%);
  z-index: 0;
}
.body-frame {
  display: flex;
  flex-direction: column;
  align-items: center;

  position: relative;
  width: 100%;
  border-radius: 0px 0px 0px 0px;
  display: flex;
  align-items: center;
  align-content: stretch;
  justify-content: start;
  row-gap: 92.33px;
  padding: 46px 0px 0px 0px;
  z-index: 0;
  flex-direction: column;
  flex-wrap: nowrap;
  flex-grow: 1;
  z-index: 1;
}
.parallax-bg {
  background-image: url(https://scontent-hkg1-2.xx.fbcdn.net/v/t39.30808-6/527027405_767312185735199_90127037691610723_n.jpg?_nc_cat=103&ccb=1-7&_nc_sid=127cfc&_nc_ohc=0i-4OJEA94AQ7kNvwEB8J_H&_nc_oc=AdlmYcuclMgMrE6OC8V4CfxaDyzX9N970ZX3xKMpGyWe99ENUYoCeXzeVd7iJYgVhz5W2mHoea9uG6YS8I5W6NVA&_nc_zt=23&_nc_ht=scontent-hkg1-2.xx&_nc_gid=AQLx1PgAUSuZztVFbTXZwA&oh=00_AfRaagmXVKvOHIgQYVD71WY9pT63FHdBIw_loGgs2KJjjw&oe=68941C81);
  mix-blend-mode:color-dodge;
  background-size: cover;
  filter: blur(2px);
  opacity: 100% ;
  width:100vw;
  height: 100vh;
  position:fixed;
  z-index: 0;
}

* {
  box-sizing: border-box;
}
a{
  text-decoration: none;
}

.body-big {
    font-size: 24px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0.2px;
    text-decoration: none;
    text-transform: unset;
}

/* Header*/
.logo {
  width: 36px;
  height: 36px;
  background: url(https://64.media.tumblr.com/d03ab4ed4071d023f940d5155bcf2a02/6b2835ec384cf491-a5/s2048x3072/45985b6d8fc348195961b9a235dac7c8a308a854.pnj) no-repeat center center / cover;
  flex-shrink: 0;
}
header {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    align-content: stretch;
    justify-content: space-between;
    padding: 18px 80px 24px 80px;
    position:sticky; 
    top: 0;
    z-index: 3;
    background-color: transparent; /* Initial background */
    transition: background-color 0.3s; /* Smooth transition */    
}
header.sticky{
  mask-image: linear-gradient(to bottom, #003332 70%, #00333200 100%);
  backdrop-filter: blur(10px);
}

nav {
    display: flex;
    align-items: center;
    align-content: stretch;
    justify-content: space-between;
    column-gap: 29;
}
.rect-border-side {
  width: 1px;
  height: 14px;
  background: #8dcdcf80;
  flex-shrink: 0;
}
.rect-border-betw {
    width: 0.5px;
  height: 6px;
  background: #8dcdcf80;
  flex-shrink: 0;
}
.pagelink-button {
  background-color: rgba(255, 255, 255, 0);
  fill: none;
  border: none;
    width: fit-content;
    border-radius: 6px;
    display: flex;
    align-items: center;
    align-content: stretch;
    justify-content: start;
    padding: 6px 12px 6px 12px;
    flex-direction: row;
    flex-wrap: nowrap;
    flex-grow: 1;  
}
.pagelink-font {
    font-family: 'Jost';
    font-style: normal;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.2;
    text-decoration: none;
    text-transform: uppercase;
    color: rgba(189, 205, 207, 1);
    transition: 250ms ease;
}
/*interact*/
.pagelink-button .pagelink-font:hover{
  font-weight: 600;
}

.spacing {
  position: relative;
  width: 100%;
  border-radius: 0px 0px 0px 0px;
  display: flex;
  align-items: start;
  align-content: stretch;
  justify-content: start;
  flex-direction: row;
  flex-wrap: nowrap;
  flex: 1;
  flex-grow: 1;
}

/* main */
main {
  display: flex;
    display: flex;
    flex-flow: column;
    width: 100%;
    row-gap: 92.33px;

  position: relative; z-index: 1;
  padding: 0 80px;
}

/* section*/

section {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
    align-content: stretch;
    justify-content: space-around;
    gap: 2rem;
}

article {
  position: relative;
  width: 100%;
  border-radius: 0px 0px 0px 0px;
  display: flex;
  align-items: start;
  align-content: stretch;
  justify-content: center;
  row-gap: 27.5px;
  padding: 0px 0px 0px 0px;
  flex-direction: column;
  flex-wrap: nowrap;
  flex: 1;
  flex-grow: 1;
  color: #f2e0df;
}

 h2 {
    margin: 0px;
    height: 72px;
    text-decoration: none;
    font-family: 'inter';
    font-style: normal;
    font-size: 60px;
    font-weight: 800;
    text-transform: unset;
 }
 
.about-me-description {
    font-size: 24px;
    width: 782px;
}
article {
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: start;
    align-content: stretch;
    justify-content: center;
    row-gap: 28;
}
.body-medium-light {
    font-family: 'Montserrat';
    font-size: 18px;
    font-weight: 400;
    line-height: 1.2;
}
.svg-small {
  height: 24px;
  transition: 80ms ease;
}
li,.info-row {
    list-style-type: none;
    color: #bdcdcf;
    display: flex;
    flex-direction: row;
    align-items: center;
    align-content: stretch;
    justify-content: start;
    column-gap: 22px;
}
/*interact*/
p.text-node.body-medium-light{
  transition: 0.25s ease;
}
p.text-node.body-medium-light:hover{
  font-weight: 500;
}
.svg-small:hover {
  transform: scale(1.15);
}

ul {
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: start;
    align-content: stretch;
    justify-content: start;
    row-gap: 16px;
}
p {
    padding: 0;
    margin: 0;
}
.profile-wrapper{
  width: 35%;
  aspect-ratio: 1/1;
  padding: 5px;
  border-width: 5px;
  border-radius: 50%; /* Circle */
  border: 1px solid #8dcdcf80;;
  display: flex;
  align-items: center;
  justify-content: center;
  align-content: center;
  position: relative;
  transition: 0.25s ease;
}
.profile-wrapper:hover {  
  box-shadow: 0px 0px 20px 0px rgb(31, 107, 80);
  border: 1px solid #bdcdcfbb;;

}
.profile {
    width: 100%;
    aspect-ratio: 1/1;
    background: url(https://64.media.tumblr.com/37d2e113654fef5ab8ab6f25eb776fd7/63c89bc51636409a-ea/s2048x3072/bb18f6748c3df71e87adfee0294042c59e23a700.pnj) no-repeat center bottom / cover;
    background-repeat:unset;
    border-radius: 50%;
    z-index: 1;
 }
 
 /* scroll down to see */
.scroll-dow-75dde0e37c13 {
  position: relative;
  width: 100%;
  border-radius: 0px 0px 0px 0px;
  display: flex;
  align-items: center;
  align-content: stretch;
  justify-content: start;
  gap: 24px;
  flex-direction: column;
  flex-wrap: nowrap;
  flex-grow: 1;
}

/* small */
.small-75dd175486a4 {
  width: 320px;
  height: 1px;
  background: #8dcdcf80;
  border-radius: 0px 0px 0px 0px;
  flex-shrink: 0;
}

/* Board */
.board-75ddd60372f2 {
  position: relative;
  width: auto;
  height: auto;
  border-radius: 0px 0px 0px 0px;
  display: flex;
  align-items: center;
  align-content: stretch;
  justify-content: start;
  gap: 16px;
  flex-direction: column;
  flex-wrap: nowrap;
}

/* medium */
.medium-75dd08df2353 {
  width: 480px;
  height: 2px;
  background: #8dcdcf80;
  border-radius: 0px 0px 0px 0px;
  flex-shrink: 0;
}

/* big */
.big-75dce70b3bbf {
  width: 640px;
  height: 4px;
  background: #8dcdcf80;
  border-radius: 0px 0px 0px 0px;
  flex-shrink: 0;
}

 /* Roll box */
.roll-box-l {
  position: relative;
  width: 100%;
  border-radius: 0px 0px 0px 0px;
  display: flex;
  align-items: center;
  align-content: stretch;
  justify-content:end;
  gap: 24px;
  flex-direction: row;
  flex-wrap: nowrap;
  flex-grow: 1;
  transition: 0.5s ease;
}
.roll-box-r {
  position: relative;
  width: 100%;
  border-radius: 0px 0px 0px 0px;
  display: flex;
  align-items: center;
  align-content: stretch;
  justify-content: start;
  gap: 24px;
  flex-direction: row-reverse;
  flex-wrap: nowrap;
  flex-grow: 1;
  transition: 300ms ease;
}

/* big */
.big-75e94d1e321f {
  width: 2px;
  height: 15px;
  background: #8dcdcf80;
  border-radius: 0px 0px 0px 0px;
  flex-shrink: 0;
}

/* medium */
.medium-75e9547101dc-wrapper {
  flex-shrink: 0;
  width: 6.73px;
  height: 9.66px;
  position: relative;
}
.medium-75e9547101dc-wrapper > * {
  position: absolute;
  left: 50%;
  top: 50%;
}
.medium-75e9547101dc {
  width: 2px;
  height: 10px;
  transform: translate(-50%, -50%) matrix(0.87, -0.50, 0.50, 0.87, 0.00, 0.00);
  background: #8dcdcf80;
  border-radius: 0px 0px 0px 0px;
}

/* small */
.small-75ea20d9e615-wrapper {
  flex-shrink: 0;
  width: 4.46px;
  height: 3.73px;
  position: relative;
}
.small-75ea20d9e615-wrapper > * {
  position: absolute;
  left: 50%;
  top: 50%;
}
.small-75ea20d9e615 {
  width: 2px;
  height: 4px;
  transform: translate(-50%, -50%) matrix(0.50, -0.87, 0.87, 0.50, 0.00, 0.00);
  background: #8dcdcf80;
  border-radius: 0px 0px 0px 0px;
}

/* big */
.big-75ea6f94a6ae {
  width: 2px;
  height: 15px;
  background: #8dcdcf80;
  border-radius: 0px 0px 0px 0px;
  flex-shrink: 0;
}

/* medium */
.medium-75ea6f94a6af-wrapper {
  flex-shrink: 0;
  width: 6.73px;
  height: 9.66px;
  position: relative;
}
.medium-75ea6f94a6af-wrapper > * {
  position: absolute;
  left: 50%;
  top: 50%;
}
.medium-75ea6f94a6af {
  width: 2px;
  height: 10px;
  transform: translate(-50%, -50%) matrix(0.87, 0.50, -0.50, 0.87, -0.00, -0.00);
  background: #8dcdcf80;
  border-radius: 0px 0px 0px 0px;
}

/* small */
.small-75ea6f94a6b0-wrapper {
  flex-shrink: 0;
  width: 4.46px;
  height: 3.73px;
  position: relative;
}
.small-75ea6f94a6b0-wrapper > * {
  position: absolute;
  left: 50%;
  top: 50%;
}
.small-75ea6f94a6b0 {
  width: 2px;
  height: 4px;
  transform: translate(-50%, -50%) matrix(0.50, 0.87, -0.87, 0.50, 0.00, 0.00);
  background: #8dcdcf80;
  border-radius: 0px 0px 0px 0px;
}

.experiences {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: stretch;
    justify-content: start;
    gap: 80px;
}

.experiences-title {
  display: flex;
  width: 30em;
  flex-wrap: wrap;
  justify-content: center;
    font-family: 'Montserrat';
    font-style: normal;
    font-size: 32px;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: 0.2px;
    text-decoration: none;
    text-align: center;
    text-transform: uppercase;
    color: #f2e0df;
    transition: 100ms ease;   

}
.experiences-heading{
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    align-content: stretch;
    justify-content: center;
    column-gap: 44px; 
    transition: 300ms ease;   
    position: relative;
}

.experiences-title:hover{
  transform: scale(1.05);
}
.experiences-heading:hover .roll-box-l,
.experiences-heading:hover .roll-box-r {
    gap: 0 50px; /* 100px gap tổng cộng */
}
.experiences-heading:hover .roll-box-l div,
.experiences-heading:hover .roll-box-r div{
    transform: rotate(60); /* 100px gap tổng cộng */
}

.jobs::before {
  content: '';
  background: #bdcdcf;
  mask-image: url(https://64.media.tumblr.com/c5445bb09bdd0c0d2d631db002a359a5/63c89bc51636409a-83/s2048x3072/2da42b04b6b2208ecd56024b26bc0e7d2e052fc9.pnj);
  background-size: cover;
  mask-size: cover;
  background-repeat: no-repeat;
  opacity: 50%;
  mix-blend-mode: lighten;
  width: 13%;
  aspect-ratio: 2/3;
  position: absolute;
  z-index: 0;
  bottom: -18rem;
  left: 1em;
  transition: 0.25s;
}
.jobs::after{
  content: '';
  background-color: #bdcdcf;
  height: 2px;
  width: 70%;
  opacity: 50%;
  position: absolute;
  bottom: -15rem;
  right: 0;
}

.jobs {
  position: relative;
  width: 100%;
  border-radius: 0px 0px 0px 0px;
  display: grid;
  align-items: start;
  align-content: space-between;
  justify-items: start;
  justify-content: space-between;
  gap: 36px;
  flex-grow: 1;
  grid-template-rows: 50% 50%;
  grid-template-columns: 1fr 1fr 1fr;
  flex-shrink: 0;
  z-index: 1;
  margin-bottom: 15rem;
}

.path-split {
    width: 120px;
    height: 0.19px;
    background-color:   #bcdcdfFF;
    opacity: 50;
}
.experience {
  position: relative;
  width: 100%;
  height: 100%;
  border: 1px solid #bcdcdfFF;
  border-radius: 8px 8px 8px 8px;
  opacity: 0.8;
  display: flex;
  align-items: center;
  align-content: stretch;
  justify-content: space-around;
  row-gap: 13px;
  padding: 24px 0px 24px 0px;
  flex-direction: column-reverse;
  flex-wrap: nowrap;
  flex-grow: 1;
  grid-column: auto;
  grid-row: auto;
  transition: 0.25s;
}
.experience:hover {
  flex-wrap: wrap;
  box-shadow: 0px 0px 20px 0px rgba(255, 128, 43, 0.563);
  background: #013e33a7;
  border: 1px solid #f2e0df;
}

.infor{
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    align-content: stretch;
    justify-content: start;
    color: #f2e0df;
    row-gap: 6px;
}
.Title_small {
    font-family: Jost;
    font-weight: 400;
    font-style: normal;
    font-size: 18px;
    line-height: 1.2;
}
.experience-descr {
    width: 300px;
    height: 101px;
    align-content: center;
    text-align: center;
    color: #f2e0df;
    font-size: 18px;
}

/* footer */

footer {
  width: 100%;
  height: 272px;
  background: #013e33;
  display: flex;
  flex-direction: column;
  align-items: center;
  align-content: stretch;
  justify-content: center;
  gap: 36px;
  position: relative; z-index: 1;
}
.footer-text {
  color: #f2e0df;
}

.social-media-list{
  display: flex;
  flex-direction: row;
  align-items: center;
  align-content: stretch;
  justify-content: center;
  gap: 24px;
}
.svg-big {  
  transition: 0.25s ease;
  opacity: 70%;
}
.svg-big:hover{
  transform: scale(1.05);
  opacity: 100%;
}

@media screen and (max-width:1400px) {
    .about-me-description{
      width: 100%;
    }
    h2{
      height: fit-content;
    }
    .scroll-dow-75dde0e37c13{
      transform: scaleX(0.5);
    }
}
@media screen and (max-width:1080px) {
    section {
      flex-direction: column;
      gap: 5rem;
      align-items: center;
    }
    .profile-wrapper{
      width:100%;
      max-width: 437px;
      height: fit-content;
      aspect-ratio: 1/1;
    }
  .jobs {
    grid-template-rows: 32% 32% 32%;
    grid-template-columns: 1fr 1fr;
    flex-shrink: 0;
  }
  .jobs::before{
    width: 20%;
  }
  .body-frame{
    row-gap: 3rem;
  }
}
@media screen and (max-width: 860px) {
  .jobs{
    display: flex;
    flex-direction: column;
    margin-bottom: 10rem;
  } 
  .jobs::before{
    width: 40%;
    bottom: -23rem;
  }
  .jobs::after{
    width: 60%;
    bottom: -17rem;
  }
  .body-frame{
    row-gap: 2rem;
  }
  .jobs{
    margin-bottom: 18rem;
  }
}
@media  screen and (max-width:700px) {
  .body-medium-light{
    font-size:14px;
  }
  .about-me-description {
    font-size: 14px;
  }
  h2 {
    font-size: 24px;
  }
  .experiences-title {
    font-size: 18px;
  }
  .Title_small {
    font-size: 12px;
  }
  .pagelink-font {
    font-size: 10px;
  }
  .jobs::before{
    width: 30%;
    bottom: -13.5rem;
  }
  .jobs::after{
    width: 60%;
    bottom: -10rem;
  }
}
@media  screen and (max-width:600px) {
  .body-medium-light{
    font-size:10px;
  } 
  main {
    padding: 0 40px;
  }
  header{
    padding: 40px;
  }
  .footer-text {
    padding: 0 40px;
    text-align: center;
  }
    .jobs::before{
    width: 30%;
    bottom: -13rem;
    left: 0;
  }
  .jobs::after{
    width: 60%;
    bottom: -10rem;
  }
}
@media screen and (max-width: 400px){
  .experience-descr{
    width: 80%;
    height: auto;
  }
  .Title_small {
    font-size: 8px;
  }
    .jobs::before{
    width: 33%;
    bottom: -10rem;
    left: 0;
  }
  .jobs::after{
    width: 60%;
    bottom: -8rem;
  }
}