@import url("https://fonts.googleapis.com/css?family=DM+Sans:400,500|Jost:400,500,600&display=swap");
                @import url(https://fonts.googleapis.com/css?family=Raleway:400);
                * {
                    box-sizing: border-box;
                }

                html, body {
                    margin: 0;
                    padding: 0;
                    overflow-x: hidden;
                    max-width: 100vw;
                }

                body {
                    color: #2b2c48;
                    font-family: "Jost", sans-serif;
                    background-repeat: no-repeat;
                    background-size: cover;
                    background-position: center;
                    background-attachment: fixed;
                    min-height: 100vh;
                    display: flex;
                    flex-wrap: wrap;
                    padding: 20px;
                    --link-background-gradient-style: to bottom;
                    --link-button-color: #FFFFFF;
                    background: linear-gradient(var(--link-background-gradient-style), #CB5EEE, #4be1ec);
                    font-family: MavenPro;
                }

                .call {
                    color: rgb(0, 0, 0);
                }

                .card {
                    width: 100%;
                    max-width: 340px;
                    margin: auto;
                    overflow-y: auto;
                    position: relative;
                    z-index: 1;
                    overflow-x: hidden;
                    background-color: white;
                    display: flex;
                    transition: 0.3s;
                    flex-direction: column;
                    border-radius: 10px;
                    box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.2);
                    box-sizing: border-box;
                }

                .card[data-state="#about"] {
                    height: 500px;
                }

                .card[data-state="#about"] .card-main {
                    padding-top: 0;
                }

                .card[data-state="#contact"] {
                    height: 500px;
                    width: 340px;
                }

                .card[data-state="#experience"] {
                    height: 500px;
                }

                .card.is-active .card-header {
                    height: 90px;
                }

                .card.is-active .card-cover {
                    height: 100px;
                    top: -50px;
                }

                .card.is-active .card-avatar {
                    transform: none;
                    left: 20px;
                    width: 50px;
                    height: 50px;
                    bottom: 10px;
                }

                .card.is-active .card-fullname,
                .card.is-active .card-jobtitle {
                    left: 86px;
                    transform: none;
                }

                .card.is-active .card-fullname {
                    bottom: 18px;
                    font-size: 19px;
                }

                .card.is-active .card-jobtitle {
                    bottom: 16px;
                    letter-spacing: 1px;
                    font-size: 10px;
                }

                .card-header {
                    position: relative;
                    display: flex;
                    height: 180px;
                    flex-shrink: 0;
                    width: 100%;
                    transition: 0.3s;
                }

                .card-header * {
                    transition: 0.3s;
                }

                .card-cover {
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    height: 200px;
                    top: -20%;
                    left: 0;
                    will-change: top;
                    background-size: cover;
                    background-position: center;
                    filter: blur(30px);
                    transform: scale(1.1); /* giảm từ 1.2 để không tràn ngang */
                    transition: 0.5s;
                }

                .card-avatar {
                    width: 100px;
                    height: 100px;
                    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2);
                    border-radius: 50%;
                    -o-object-position: center;
                    object-position: center;
                    -o-object-fit: cover;
                    object-fit: cover;
                    position: absolute;
                    bottom: 0;
                    left: 50%;
                    transform: translateX(-50%) translateY(-64px);
                }

                .card-fullname {
                    position: absolute;
                    bottom: 0;
                    font-size: 22px;
                    font-weight: 700;
                    text-align: center;
                    white-space: nowrap;
                    transform: translateY(-10px) translateX(-50%);
                    left: 50%;
                    color: transparent;
                    background-image: repeating-radial-gradient(#4be1ec, #cb5eee);
                    -webkit-background-clip: text;
                    background-clip: text;
                    -webkit-text-fill-color: transparent;
                }

                .card-jobtitle {
                    position: absolute;
                    bottom: 0;
                    font-size: 11px;
                    white-space: nowrap;
                    font-weight: 500;
                    opacity: 0.7;
                    text-transform: uppercase;
                    letter-spacing: 1.5px;
                    margin: 0;
                    left: 50%;
                    transform: translateX(-50%) translateY(-7px);
                    background-image: repeating-radial-gradient(#cb5eee, #4be1ec);
                    -webkit-background-clip: text;
                    background-clip: text;
                    -webkit-text-fill-color: transparent;
                }

                .card-main {
                    position: relative;
                    flex: 1;
                    display: flex;
                    padding-top: 10px;
                    flex-direction: column;
                }

                .card-subtitle {
                    font-weight: 700;
                    font-size: 13px;
                    margin-bottom: 8px;
                    background-image: linear-gradient(to top, #ee7474, #7bd6ab);
                    -webkit-background-clip: text;
                    background-clip: text;
                    -webkit-text-fill-color: transparent;
                }

                .card-content {
                    padding: 20px;
                }

                .card-desc {
                    line-height: 1.6;
                    color: #636b6f;
                    font-size: 14px;
                    margin: 0;
                    font-weight: 400;
                    font-family: "DM Sans", sans-serif;
                }

                .neon {
                    color: rgb(255, 255, 255);
                    text-shadow: 0 0 1px rgb(247, 65, 65), 0 0 10px rgb(247, 65, 65), 0 0 1px rgb(247, 65, 65), 0 0 1px rgb(247, 65, 65), 0 0 1px rgb(247, 65, 65), 0 0 5px rgb(247, 65, 65), 0 0 5px rgb(247, 65, 65), 0 0 5px rgb(247, 65, 65);
                    text-align: center;
                }

                .card-social {
                    display: flex;
                    align-items: center;
                    padding: 0 20px;
                    margin-bottom: 30px;
                }

                .card-social svg {
                    fill: #a5b5ce;
                    width: 16px;
                    display: block;
                    transition: 0.3s;
                }

                .card-social a {
                    color: #8797a1;
                    height: 35px;
                    width: 35px;
                    border-radius: 50%;
                    display: inline-flex;
                    align-items: center;
                    justify-content: center;
                    transition: 0.3s;
                    background-color: rgba(93, 133, 193, 0.05);
                    border-radius: 50%;
                    margin-right: 10px;
                }

                .card-social a:hover svg {
                    fill: #637faa;
                }

                .card-social a:last-child {
                    margin-right: 0;
                }

                .card-buttons {
                    background: linear-gradient(174deg, rgba(129, 179, 246, 0.73), rgba(178, 255, 218, 0.71));
                    display: flex;
                    background-color: #fff;
                    margin-top: auto;
                    position: sticky;
                    bottom: 0;
                    left: 0;
                }

                .card-buttons button {
                    flex: 1 1 auto;
                    -webkit-user-select: none;
                    -moz-user-select: none;
                    -ms-user-select: none;
                    user-select: none;
                    background: 0;
                    font-size: 13px;
                    border: 0;
                    padding: 15px 5px;
                    cursor: pointer;
                    color: #5c5c6d;
                    transition: 0.3s;
                    font-family: "Jost", sans-serif;
                    font-weight: 500;
                    outline: 0;
                    border-bottom: 3px solid transparent;
                }

                .card-buttons button.is-active,
                .card-buttons button:hover {
                    color: #f08394;
                    border-bottom: 3px solid #ff8484;
                    background: linear-gradient(to bottom, rgba(127, 199, 231, 0) 0%, rgba(207, 204, 255, 0.2) 44%, rgb(255 211 211 / 40%) 100%);
                }

                .card-section {
                    display: none;
                }

                .card-section.is-active {
                    display: block;
                    -webkit-animation: fadeIn 0.6s both;
                    animation: fadeIn 0.6s both;
                }

                @-webkit-keyframes fadeIn {
                    0% {
                        opacity: 0;
                        transform: translatey(40px);
                    }
                    100% {
                        opacity: 1;
                    }
                }

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

                .card-timeline {
                    margin-top: 30px;
                    position: relative;
                }

                .card-timeline:after {
                    background: linear-gradient(to top, rgba(134, 214, 243, 0), #f76767);
                    content: "";
                    left: 42px;
                    width: 2px;
                    top: 0;
                    height: 100%;
                    position: absolute;
                    content: "";
                }

                .card-item {
                    position: relative;
                    padding-left: 60px;
                    padding-right: 20px;
                    padding-bottom: 30px;
                    z-index: 1;
                }

                .card-item:last-child {
                    padding-bottom: 5px;
                }

                .card-item:after {
                    content: attr(data-year);
                    width: 10px;
                    position: absolute;
                    top: 0;
                    left: 37px;
                    width: 8px;
                    height: 8px;
                    line-height: 0.6;
                    border: 2px solid #fff;
                    font-size: 11px;
                    text-indent: -35px;
                    border-radius: 50%;
                    color: rgba(134, 134, 134, 0.7);
                    background: linear-gradient(#ffffff, #f32222);
                }

                .card-item-title {
                    font-weight: 500;
                    font-size: 14px;
                    margin-bottom: 5px;
                }

                .card-item-desc {
                    font-size: 13px;
                    color: #6f6f7b;
                    line-height: 1.5;
                    font-family: "DM Sans", sans-serif;
                }

                .card-contact-wrapper {
                    margin-top: 20px;
                }

                .card-contact {
                    display: flex;
                    align-items: center;
                    font-size: 14px;
                    color: #333;
                    font-family: "DM Sans", sans-serif;
                    padding: 10px 15px;
                    margin: 8px 0;
                    background: #f4f6fa;
                    border-radius: 10px;
                    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
                    transition: background 0.3s ease;
                }

                .card-contact:hover {
                    background: #e4ecf7;
                }

                .card-contact+.card-contact {
                    margin-top: 8px;
                }

                .card-contact svg {
                    width: 22px;
                    height: 22px;
                    margin-right: 12px;
                    fill: #4e91ff;
                }

                .contact-me {
                    border: none;
                    background: linear-gradient(135deg, #7ed6df, #70a1ff);
                    box-shadow: 0 4px 15px rgba(112, 161, 255, 0.4);
                    color: #fff;
                    padding: 14px 18px;
                    width: 100%;
                    border-radius: 8px;
                    margin-top: 25px;
                    cursor: pointer;
                    font-size: 15px;
                    font-weight: 600;
                    font-family: "Jost", sans-serif;
                    transition: background 0.3s ease;
                }

                .contact-me:hover {
                    background: linear-gradient(135deg, #70a1ff, #7ed6df);
                }

                /* Optional: rounded input/button for consistency */
                input,
                button {
                    border-radius: 12px;
                    border: 2px solid #ccc;
                    padding: 8px 12px;
                    font-size: 14px;
                    transition: 0.3s ease;
                }

                input:focus,
                button:hover {
                    border-color: #70a1ff;
                    background-color: #f0f8ff;
                }

                .button {
                    background-color: #58257b;
                    border: none;
                    color: white;
                    padding: 5px 13px;
                    text-align: center;
                    text-decoration: none;
                    display: inline-block;
                    font-size: 13px;
                    margin: 4px 2px;
                    -webkit-transition-duration: 0.4s;
                    transition-duration: 0.5s;
                    cursor: pointer;
                    border-radius: 11px;
                }


                .button1 {
                    background-color: #58257b;
                    border: none;
                    color: white;
                    padding: 5px 13px;
                    text-align: center;
                    text-decoration: none;
                    display: inline-block;
                    font-size: 13px;
                    margin: 4px 2px;
                    -webkit-transition-duration: 0.5s;
                    transition-duration: 0.5s;
                    cursor: pointer;
                    border-radius: 11px;
                }


/* Modern, creative style for map, call, gmail buttons */
.map,
.call,
.gmail {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-size: 12px;
    font-family: "Jost", sans-serif;
    padding: 6px 12px;
    border-radius: 20px;
    font-weight: 500;
    color: #fff;
    border: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04);
    letter-spacing: 0.02em;
    outline: none;
    margin: 4px 0;
}

/* Nút vị trí (Hà Nội) */
.map {
    background: linear-gradient(135deg, #74ebd5, #9face6);
}

.map:hover {
    background: linear-gradient(135deg, #9face6, #74ebd5);
    transform: scale(1.05) translateY(-2px);
    box-shadow: 0 8px 20px 2px rgba(116,235,213,0.18);
}

/* Nút gọi điện (CALL ME) */
.call {
    background: linear-gradient(135deg, #43e97b, #38f9d7);
}

.call:hover {
    background: linear-gradient(135deg, #38f9d7, #43e97b);
    transform: scale(1.05) translateY(-2px);
    box-shadow: 0 8px 20px 2px rgba(67,233,123,0.18);
}

/* Nút gửi mail */
.gmail {
    background: linear-gradient(135deg, #f857a6, #ff5858);
}

.gmail:hover {
    background: linear-gradient(135deg, #ff5858, #f857a6);
    transform: scale(1.05) translateY(-2px);
    box-shadow: 0 8px 20px 2px rgba(248,87,166,0.18);
}
@media (prefers-color-scheme: dark) {
  body {
    background-color: #121212;
    color: #f5f5f5;
  }

  .card,
  .card-content {
    background-color: #1e1e1e;
    color: #f0f0f0;
  }

  .neon {
    color: #00ffff;
  }

  a {
    color: #00bcd4;
  }

  .card-avatar {
    border: 2px solid #00bcd4;
  }
}

                @media (max-width: 400px) {
                    .card {
                        width: 95%;
                        margin: auto;
                    }
                }




 :root {
  --coilSize: 14px;
  --delayCount: 40ms;
  --scaleMe: 1;

  --scaleFlip: 1;
  --posFlip: 0;
}
.fish {
  position: absolute;
  top: -35%;
  left: 0;
  width: 100%;
  height: 100%;
  filter: drop-shadow(
    calc(var(--coilSize) * 4) calc(var(--coilSize) / 3) 5px rgba(0, 0, 0, 0.3)
  );
}
.fish .koiCoil {
  position: absolute;
  width: var(--coilSize);
  height: var(--coilSize);
  background-color: orangered;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  margin-left: calc(var(--coilSize) / -2);
  margin-top: calc(var(--coilSize) / -2);
  transform: scale(var(--scaleMe), var(--scaleMe));
  filter: contrast(200%);
  offset-path: path(
    "M11.7692 229.5C14.552 200.052 7.51901 171.858 -42.8757 170.644C-105.869 169.128 -131.294 76.612 -101.695 51.5872C-72.0955 26.5625 -24.6607 -50.7867 70.5883 51.5872C165.837 153.961 27.7073 131.211 33.0199 183.157C38.3326 235.102 90.3211 195.669 139.274 223.727C188.226 251.785 207.959 299.56 139.274 316.243C70.5883 332.926 41.3685 398.9 81.9726 419.754C122.577 440.608 222 478.524 222 419.754C222 372.738 222 242.432 222 183.157C219.091 129.948 175.78 30.8091 25.8099 59.9288C-161.652 96.3284 -30.3529 119.837 25.8099 141.07C81.9726 162.303 171.529 204.769 126.751 260.506C81.9726 316.243 101.326 362.501 139.274 373.496C177.222 384.492 170.012 464.495 70.5883 462.979C-28.835 461.462 -42.8757 393.015 -42.8757 373.496C-42.8757 238.288 11.7692 293 11.7692 240.506C11.7692 208.05 11.7692 237.336 11.7692 229.5Z"
  );
  animation: fishAnim 20000ms linear infinite;
  box-shadow: calc(var(--coilSize) / -2) calc(var(--coilSize) / -10) 0 white
    inset;
}

.fish:nth-of-type(2) {
  transform-origin: top center;
  transform: scale(-1, 1);
  filter: drop-shadow(
    calc(var(--coilSize) * -4) calc(var(--coilSize) / 3) 5px rgba(0, 0, 0, 0.3)
  );
}
.fish:nth-of-type(2) .koiCoil {
  background-color: white;
  box-shadow: calc(var(--coilSize) / -2) calc(var(--coilSize) / -10) 0 orangered
    inset;
}
.fish .koiCoil:nth-of-type(15),
.fish .koiCoil:nth-of-type(14) {
  background-color: orangered;
}
.fish:nth-of-type(2) .koiCoil:nth-of-type(15),
.fish:nth-of-type(2) .koiCoil:nth-of-type(14) {
  background-color: white;
}
.fish .koiCoil:nth-of-type(15)::after {
  content: ":";
  position: absolute;
  color: black;
  font-weight: 800;
  text-align: center;
  line-height: 60%;
  font-size: calc(var(--coilSize) * 1.2);
}
.fish .koiCoil:nth-of-type(1)::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 50%;
  top: 25%;
  left: -100%;
  border-radius: var(--coilSize);
  background-color: white;
  /*box-shadow: calc(var(--coilSize) / -10) calc(var(--coilSize) / -4) calc(var(--coilSize) / 3) rgba(0,0,0,.3) inset;*/
  transform-origin: center right;
  animation: backFlip 200ms ease-in-out alternate infinite;
}
.fish .koiCoil:nth-of-type(14) {
  --scaleMe: 1.2;
  animation-delay: calc(var(--delayCount) * 1);
}
.fish .koiCoil:nth-of-type(13) {
  --scaleMe: 1.35;
  animation-delay: calc(var(--delayCount) * 2);
}
.fish .koiCoil:nth-of-type(12) {
  --scaleMe: 1.55;
  animation-delay: calc(var(--delayCount) * 3);
}
.fish .koiCoil:nth-of-type(11) {
  --scaleMe: 1.75;
  animation-delay: calc(var(--delayCount) * 4);
}
.fish .koiCoil:nth-of-type(10) {
  --scaleMe: 1.9;
  animation-delay: calc(var(--delayCount) * 5);
}
.fish .koiCoil:nth-of-type(9) {
  --scaleMe: 2;
  animation-delay: calc(var(--delayCount) * 6);
}
.fish .koiCoil:nth-of-type(8) {
  --scaleMe: 2;
  animation-delay: calc(var(--delayCount) * 7);
}
.fish .koiCoil:nth-of-type(7) {
  --scaleMe: 2;
  animation-delay: calc(var(--delayCount) * 8);
}
.fish .koiCoil:nth-of-type(6) {
  --scaleMe: 1.9;
  animation-delay: calc(var(--delayCount) * 9);
}
.fish .koiCoil:nth-of-type(5) {
  --scaleMe: 1.75;
  animation-delay: calc(var(--delayCount) * 10);
}
.fish .koiCoil:nth-of-type(4) {
  --scaleMe: 1.55;
  animation-delay: calc(var(--delayCount) * 11);
}
.fish .koiCoil:nth-of-type(3) {
  --scaleMe: 1.35;
  animation-delay: calc(var(--delayCount) * 12);
}
.fish .koiCoil:nth-of-type(2) {
  --scaleMe: 1.2;
  animation-delay: calc(var(--delayCount) * 13);
}
.fish .koiCoil:nth-of-type(1) {
  animation-delay: calc(var(--delayCount) * 14);
}
.fish .koiCoil:nth-of-type(12)::before,
.fish .koiCoil:nth-of-type(12)::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 20%;
  top: -10%;
  left: -100%;
  border-radius: var(--coilSize);
  background-color: white;
  transform-origin: center right;
  animation: sideFlip 500ms ease-in-out alternate infinite;
}
.fish .koiCoil:nth-of-type(12)::after {
  --scaleFlip: -1;
  --posFlip: calc(var(--coilSize) * -1);
}
.seaLevel {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0.4;
}
@keyframes fishAnim {
  0% {
    offset-distance: 0%;
  }
  100% {
    offset-distance: 100%;
  }
}
@keyframes backFlip {
  0% {
    transform: rotate(45deg);
  }
  100% {
    transform: rotate(-45deg);
  }
}
@keyframes sideFlip {
  0% {
    transform: scale(1, var(--scaleFlip)) translateY(var(--posFlip))rotate(80deg);
  }
  100% {
    transform: scale(1, var(--scaleFlip)) translateY(var(--posFlip))rotate(20deg);
  }
}


/* #intro-screen {
  position: fixed;
  inset: 0;
  background-color: #0f0f2d;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  animation: fadeOut 1s ease 2s forwards;
}

.intro-content h1 {
  font-size: 1.4rem;
  animation: fadeIn 1s ease;
}

@keyframes fadeOut {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
 */