* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* class = notification */
/*  */
.notification {
    position: relative;
}

a {
    text-decoration: none;
}

.notification:before {
    display: inline-block;
    font-size: .8rem;
    line-height: 1.75;
    content: "Tính năng đang được phát triển";
    /* height: 100px; */
    max-width: 400px;
    position: absolute;
    background-color: #333;
    color: #fff;
    padding: 5px;
    border-radius: 3px;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.notification:hover:before {
    visibility: visible;
    opacity: 1;
}

@keyframes my {
    0% {
        background-color: aqua;
    }

    50% {
        background-color: transparent
    }

    100% {
        background-color: aqua;
    }
}

@keyframes my-bracket {
    0% {
        color: transparent
    }

    /* 65% { color: aqua ; opacity: .8; } */
    100% {
        color: aqua;
        opacity: 1;
    }
}

.twinkling {
    font-size: 3rem;
    font-weight: 900;
    animation: my-bracket 2000ms infinite;
}

.test {
    /* background: #3d3d3d; */
    font-size: 24px;
    font-weight: bold;
    animation: my 2000ms infinite;
}

/* commons */
html {
    /* font-size: 62.5%; */
    font-size: 62.5%;
    /* font-family: "Zen Kaku Gothic Antique", sans-serif; */

}

body {
    /* font-family: "Zen Kaku Gothic Antique", sans-serif; */
    /* font-family: "sen" ,sans-serif !important; */
    /* Zen Kaku Gothic Antique", sans-serif */
    font-size:1.6rem;
    background-color: #000;
    --resume-btn-color: #ffab25;
    --font-zen: "Zen Kaku Gothic Antique", sans-serif;
    --gradient-text: linear-gradient(45deg, #f3ec78, #af4261);
    --icon-bg-hover: rgba(65, 65, 65, .274);
    scroll-behavior: smooth;
    --sup-project_style1: linear-gradient(120deg, rgb(253, 232, 130), rgb(247, 143, 173));
    --sup-project_style2: linear-gradient(120deg, rgb(161, 196, 253) 0%, rgb(194, 233, 251) 75%);
    --sup-project_style3: linear-gradient(120deg, rgb(225, 255, 156), rgb(153, 229, 162));
}

/* theme */
body.dark-mode {
    --header_borderbottom: 1px solid #fff;
    --background-color: #000;
    --background-nav: rgba(0, 0, 0, .8);
    --color-text-nav: #6b7280;
    --navbar_a__hover: rgb(255, 255, 255);
    --hero_bgcolor: rgb(34, 195, 172);
    /* --hero_linear-gradient: linear-gradient(10deg, rgba(34,195,172,1) 16%, rgba(33,33,33,1) 38%); */
    --hero_linear-gradient: linear-gradient(9deg, rgba(53, 240, 67, 1) 0%, rgba(0, 0, 0, 1) 42%);
    --hero_text-color: #fff;
    --text-color: #fff;
    --aboutme_bgcolor: #000;
    --tool_skills: #5c5c5c6f;
}

body.light-mode {
    --header_borderbottom: 1px solid #000;
    --background-color: #f3f3f3f8;
    --background-nav: #f3f3f3f8;
    --color-text-nav: #6b7280;
    --navbar_a__hover: rgba(0, 0, 0, 1);
    --hero_bgcolor: #f3f3f3f8;
    /* background: rgb(243,243,248); */
    --hero_linear-gradient: linear-gradient(24deg, rgba(243, 243, 248, 1) 75%, rgba(245, 175, 208, 1) 97%);
    --hero_text-color: #000;
    --text-color: #000;
    --aboutme_bgcolor: #f3f3f3f8;
    --tool_skills: #fff;
    opacity: 1;
}

.line-clamp {
    display: -webkit-box;
    -webkit-line-clamp: var(--line-clamp, 1);
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp.line-2 {
    --line-clamp: 2;
}

.line-clamp.line-3 {
    --line-clamp: 3;
}

.title-heading {
    padding: 30px 0;
    font-family: var(--font-zen);
    font-size: 3.3rem;
    font-weight: 600;
    color: var(--text-color);
    border-bottom: 4px solid var(--resume-btn-color);
}

.highlight {
    color: transparent;
    background-color: #FFE53B;
    background-image: linear-gradient(147deg, #FFE53B 0%, #FF2525 74%);
    background-clip: text;
    -webkit-background-clip: text;
}

.btn {
    display: inline-block;
    line-height: 1;
    height: 50px;
    min-width: 90px;
    padding: 0 14px;
    border-radius: 25px;
    border: 2px solid var(--resume-btn-color);
}

.project_group-actions {
    padding-top: 10px;
    margin-left: auto;
    display: flex;
}

.btn-project {
    margin: 0 10px;
    border: 1px solid #fff;
    padding: 10px 5px;
    border-radius: 6px;
    color: var(--text-color);
    font-family: var(--font-zen);
    font-weight: 700;
    font-size: 1.5rem;
}

a {
    text-decoration: none;
}

.main-content {
    width: 1380px;
    margin-left: auto;
    margin-right: auto;
    max-width: calc(100% - 48px);
}
/* ====Animation */
.react-logo {
    /* height: 40vmin; */
    /* pointer-events: none; */
    animation: react-logo-spin infinite 20s linear;
  }
  @keyframes react-logo-spin {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

/* =======header */

header.anchor-nav {
    border-bottom: var(--header_borderbottom);
    min-height: 80px;
    line-height: 80px;
    background-color: var(--background-nav);
    position: sticky;
    left: 0;
    top: -15px;
    z-index: 1000;
}

header .logo a {
    font-weight: 800;
    font-size: 4.4rem;
    color: rgba(255, 255, 255, 0.65);
}

header .change-theme {
    padding: 0 40px;
    width: 30px;
    height: 30px;
}

header .navigation {
    font-family: var(--font-zen);
    /* padding-top: 28px; */
    display: flex;
    align-items: center;
}

header .navigation .navbar {
    margin-left: auto;
    display: flex;
    align-items: center;
}

.navigation .navbar li {
    /* height: 120px; 
    line-height: 120px; */
}

#icon_moon__sun {
    display: inline-block;
    width: 40px;
    height: 40px;
    object-fit: cover;
    cursor: pointer;
}

.navigation_fixToggleButton {
    background-color: transparent;
    border: none;
}

.navigation .navbar a {
    font-weight: 600;
    font-size: 2.1rem;
    border: 2px solid transparent;
    /* color: #fff; */
    /* color: rgba(255, 255, 255, .85); */
    color: var(--color-text-nav);
    /* opacity: .8; */
    margin: 0 30px;
    padding: 8px 20px;
    /* line-height: 8px; */
}

.navigation .navbar a:hover {
    border-radius: 25px;
    border: 2px solid var(--resume-btn-color);
    color: var(--navbar_a__hover);
}

.navigation .change-theme {
    display: flex;
    align-items: center;
    color: #fff;
}

.navigation .change-theme {
    font-size: 2.4rem;
}

/* =========hero */

.hero {
    /* min-height: 700px; */
    min-height: 100vh ;
    display: flex;
    align-items: center;
    background: var(--hero_bgcolor);
    background: var(--hero_linear-gradient);
    /* padding-top: 100px; */
}

.hero .row {
    display: flex;
    align-items: center;
    justify-content: center;
    /* flex-direction: column; */
    flex-wrap: wrap;
    gap: 15px;
    position: relative;
    min-height: 520px;
    padding: 20px 0;

}

.hero .info {
    min-width: 700px;
    color: var(--hero_text-color);
    flex: .9;
}

.hero .info .i-am .i-am1 {
    font-size: 3.6rem;
}

.hero .info .title {
    /* color: #fff; */
    font-family: var(--font-zen);
    font-weight: 800;
    font-size: 7.2rem;
    max-width: 720px;
    padding-bottom: 40px;
}

.hero .info .title strong {
    /* background-color: transparent; */
    /* background-color:    linear-gradient(45deg,#f3ec78,#af4261);; */
    /* color: var(--gradient-text); */
}

.hero .info .title .text-cursor {
    display: inline-block;
    background-color: var(--hero_bgcolor);
    /* background-image: linear-gradient(147deg, #FFE53B 0%, #FF2525 74%); */
    margin-left: 10px;
    height: 70px;
    width: 7px;
    /*  */
}

.hero .info .desc {
    font-family: var(--font-zen);
    /* color: #fff; */
    padding: 10px 10px 10px 0;
    font-size: 2.1rem;
    line-height: 1.45;
    font-weight: 500;
    max-width: 750px;
}

.hero .info .i-am {
    /* color: #fff; */
    font-family: var(--font-zen);
    font-weight: 700;
    padding: 40px 0 40px 0;
    height: 60px;
    display: flex;
    align-items: center;

}

/* test animation */
.hero .info .open-bracket,
.close-bracket {
    /* background-color: transparent; */
    /* color: transparent; */
    font-family: var(--font-zen);
    color: red;
    background-clip: text;
    background-color: transparent;
    display: inline-block;
    font-size: 3rem;
    font-weight: 600;
    padding: 10px 20px;
    /* height: 30px; */
    /* width: 30px; */
}

.hero .image {
    flex: .7;
    text-align: center;
    /* max-margin-right: 100px; */
}

.hero .image img {
    /* flex: 1; */
    display: inline-block;
    text-align: center;
    opacity: .675;
    border-radius: 12px;
    /* max-width: 420px;
    height: 502px; */
    /* max-width: 465px; */
    max-width: calc(86%);
    min-width: 350px;
    min-height: 420px;
    object-fit: cover;
}

.hero .image img:hover {
    opacity: 1;
}

.hero .socials {
    position: absolute;
    right: -22px;
    top: 0;
    display: flex;
    flex-direction: column;

}

.hero .socials .icon {
    /* justify-content: center; */
    /* align-items: center; */
    display: block;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    color: var(--text-color);
    /* background-color: #1E2130; */
    /*  */
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    /* margin-top: 20px; */
}

.hero .socials .icon img {
    background-color: transparent;
    height: 25px;
    width: 25px;
    object-fit: cover;
}

.hero .socials .icon.i-facebook:hover {
    /* color: #000; */
    background-color: blue;
}

.hero .socials .icon.i-github:hover {
    background-color: #1e2130;
}

.hero .socials .icon.i-linked:hover {
    background-color: rgba(31, 37, 206, .8);
}

.hero .socials .icon:not(:first-child) {
    margin-top: 25px;
}

.hero .socials .icon i {
    height: 50px;
    display: block;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero .btn-hero-cta {
    margin-top: 25px;
    font-family: var(--font-zen);
    font-size: 2.1rem;
    font-weight: 800;
    text-align: center;
    /* color: var(--hero_text-color); */
    color: #ffab25;
    height: 50px;
    padding: 0 30px;
    line-height: 45px;
    border: 3px solid var(--resume-btn-color);
}

.hero .btn-hero-cta:hover {
    /* background-color: #ffab25; */
    box-shadow: inset 16em 0 0 0 #ffab25;
    color: #000;
}

/* =========about me */
.about-me {
    padding: 100px 0 50px 0;
    background-color: var(--aboutme_bgcolor);
    color: var(--text-color);
    font-family: var(--font-zen);
}

.about-me .title-heading {
    color: var(--text-color);
}

.about-me .body {
    margin: 30px 0px;
}

.about-me .body .label {
    font-size: 2.4rem;
    font-weight: 600;
    margin-bottom: 20px;
    margin-top: 20px;
}

.about-me .body .desc {
    padding-left: 15px;
    font-size: 1.9rem;
    font-weight: 500;
    line-height: 1.3;
}

.about-me .body .info-two {
    margin-top: 65px;
}

.about-me .custom-list {
    list-style-type: disc;
    /* Đảm bảo sử dụng ký hiệu chấm tròn */
    padding-left: 20px;
    /* Căn lề cho các phần tử con */
}

.about-me .custom-list li {
    margin-bottom: 10px;
    /* Khoảng cách giữa các phần tử */
    font-size: 1.9rem;
    /* Kích thước font chữ */
}

/* .about-me  */
/* =========project & deploy */
.project-deploy {
    padding: 50px 0;
    background-color: var(--background-color);
    color: var(--text-color);
}

.project-deploy .list-project {
    margin-top: 25px;
    /* margin-bottom: 35px; */
}

.project-deploy .project {
    display: flex;
    align-items: center;
    padding: 10px 0px;
    border-bottom: 1px solid #ccc;
    /* width: 100%; */
}

.project-deploy .icon {
    width: 32px;
    height: 32px;
}

.project-deploy .icon img {
    margin-right: 32px;
    width: 32px;
    height: 32px;
    object-fit: cover;
}

.project-deploy .project .title {
    margin-left: 10px;
    width: 200px;
    font-family: var(--font-zen);
    color: var(--text-color);
    font-weight: 700;
    font-size: 1.9rem;
}

.project .desc {
    font-family: var(--font-zen);
    font-size: 1.6rem;
    line-height: 1.4;
    font-weight: 400px;
    color: var(--text-color);
    width: 640px;
}


/* ========sup project */
.sup_project {
    padding-top: 120px;
    font-family: var(--font-zen);
}

.sup_project .body {
    padding: 30px 0;
}

.sup_project .body .list-project {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;

}

.sup_project .list-project .project-card {
    padding: 20px;
    min-height: 830px;
    width: calc((100% / 2) - 10px);
    /* border: 1px solid aqua; */
}

.sup_project .list-project .project-card:hover {
    transition: all .4s ease;
    transform: translateY(-12px);
}

.sup_project .project-card .title {
    font-size: 2.9rem;
    font-weight: 800;
    padding: 15px 0;
}

.sup_project .project-card .desc {
    padding: 5px 0;
    font-size: 1.9rem;
    font-weight: 500;
    line-height: 1.6;
    font-family: var(--font-zen);
}

.sup_project .project-card .info {
    /* font-size: 1.4rem; */
    /* font-weight: 300; */
}

.sup_project .project-card .info p {
    padding-top: 15px;
}

/* --------end */
/* ========tool skill */
.tool-skill {

    background-color: var(--background-color);
}

.tool-skill .list-icon {
    padding: 20px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 32px;
}

.tool-skill .list-icon .item {
    display: flex;
    justify-content: center;
    align-items: center;

    background-color: var(--tool_skills);
    border-radius: 25px;
    height: 180px;
    width: 170px;
}

.tool-skill .list-icon .item:hover {
    background-color: var(--icon-bg-hover);
}

.tool-skill .item .body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 28px;
}

.tool-skill .item .icon {
    object-fit: cover;
    width: 80px;
    height: 80px;
}

.tool-skill .item .desc {
    font-family: var(--font-zen);
    color: var(--text-color);
    padding: 20px 5px 5px 5px;
    text-align: center;
    font-size: 1.9rem;
    font-weight: 500;
}

/* ========contact */
.contact {
    padding: 75px 0;
    /* background-color: #ccc; */
    background-color: var(--background-color);

}

.contact .title {
    /* color: #fff; */
    padding: 10px;
    font-size: 9.8rem;
    font-weight: 700;
    margin: 20px 20px;
}

.contact .info {
    /* position: relative; */
    width: 450px;
    max-height: 450px;
    background-color: transparent;
    border: 2px solid rgba(36, 237, 227, 0.5);
    border-radius: 20px;
    backdrop-filter: blur(9px);
    display: flex;
    justify-content: center;
    /* align-items: center; */
}

.contact .group-input {
    position: relative;
    margin: 30px 0;
    width: 350px;
    border-bottom: 2px solid var(--text-color);
}

.contact input,
textarea {
    width: 100%;
    height: 50px;
    background-color: transparent;
    border: none;
    outline: none;
    box-shadow: none;
    font-size: 1rem;
    padding: 0 35px 0 5px;
    color: var(--text-color);
}

.contact label {
    position: absolute;
    /* bottom: 0; */
    top: 50%;
    left: 5px;
    transform: translateY(-50%);
    color: var(--text-color);
    transition: .5s;
    /* font-size: 1.4rem; */

}

input:focus~label,
input:valid~label,
textarea:focus~label,
textarea:valid~label {
    top: -5px;
}

input::selection {
    background-color: transparent;
}

.contact .btn-contact-cta {
    border-radius: 2px solid var(--resume-btn-color);
    background-color: transparent;
    color: var(--text-color);
    font-family: var(--font-zen);
    border-radius: 8px;
    font-size: 1.2rem;
    font-weight: 800;
    min-width: 120px;
    padding: 10px 20px;
    margin: 20px 0;
}

.contact .btn-contact-cta:hover {
    cursor: pointer;
    background-color: orange;
    color: #000;
    
}

/* ========footer */
footer {
    background-color: var(--background-color);
}

footer .info {
    padding: 50px;
    flex-direction: column;
    display: flex;
    align-items: center;
    justify-content: center;
}

footer .desc {
    padding-top: 10px;
    color: var(--text-color);
    font-family: var(--font-zen);
    font-size: 1.5rem;
    font-weight: 400;
}

/*  */
/* Canvas hiệu ứng tuyết rơi */
canvas {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    pointer-events: none;
    /* Tuyết không ảnh hưởng đến các sự kiện chuột */
}

/* Chắc chắn rằng các bông tuyết không ảnh hưởng đến nội dung */
#snowflakeContainer {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 1;
}

/* Nhạc nền */
audio {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 9999;
}

img#play-audio {
    position: fixed;
    display: inline-block;
    z-index: 9999;
    bottom: 1rem;
    right: 7rem;
    object-fit: cover;
    cursor: pointer;
}

img#topleft {
    position: fixed;
    display: inline-block;
    z-index: 9999;
    top: 0px;
    left: 0px;
    object-fit: cover;
    cursor: none;
}

img#topright {
    position: fixed;
    display: inline-block;
    z-index: 9999;
    top: 0px;
    right: 0px;
    object-fit: cover;
    cursor: none;
    height: 9rem;
    width: 9rem;
}

#footer {
    bottom: -65px;
    position: fixed;
    left: 0;
    width: 100%;
    height: 104px;
    background: url("/assets/images/ft.png") repeat-x bottom left;
}