@import url('https://fonts.googleapis.com/css2?family=Righteous&display=swap');


* {
    margin: 0;
    
    padding: 0;

    box-sizing: border-box;

    font-family: 'Poppins', sans-serif;

}



body {

    font-family: 'Poppins', sans-serif;


    /* font-size: 13px; */
    font-size: 1rem;


    --color: #eee;
    color: var(--color);

    background-color: #23282E;

}


a {
    text-decoration: none;

    cursor: pointer;

    font-weight: bold;
}


::-webkit-scrollbar {
    width: 0;
}


@media screen and (max-width: 767px)
{
    body {
        /* font-size: 10px; */
        font-size: 1rem;
    }
}


/* =================================================================== */
/* ================ Header =========================================== */
header {

    width: 100%;

    position: fixed;

    z-index: 1000;

    text-align: center;

    /* padding-top: 10px; */
    padding: 10px 0px;

    /* border: 2px solid green; */


    & nav {

        /* border: 1px solid red; */
        /* border: 1px solid #fff; */


        & a {

            margin: 0 30px;
        
            color: var(--color);
        
            /* font-size: 1.5rem; */
            font-size: 1.75rem;
        
            /* border: 1px solid red; */
        }
    }
}


@media screen and (max-width: 767px)
{
    header nav a {
        margin: 10px;
        font-size: 1.5rem;
    }
}


@media screen and (max-width: 400px) {
    header nav a {
        margin: 10px;
        font-size: 1.25rem;
    }
}

/* =================================================================== */
.tab {

    width: 100%;
    
    /* height: 100vh; */
    min-height: 100svh;
    /* min-height: 100dvh; */

    /* overflow: hidden; */

    position: relative;

    /* background-image: url(images/bg.png); */

    /* background-size: 50%; */

    /* border: 1px solid red; */
}


.tab .container {

    width: 1140px;
    /* width: 1200px; */
    max-width: 100%;


    height: 100%;
    /* min-height: 100svh; */


    /* padding-top: 50px; */
    padding-top: 4rem;

    /* box-sizing: border-box; */

    margin: 0 auto;

    position: relative;

    /* border: 1px solid green; */

}


@media screen and (max-width: 767px) 
{
    .tab .container {
        padding-top: 3.25rem;
    }

}

/* =================================================================== */
/* Intro */
#intro {

    background-color: #16222D;

    & .container {

        display: grid;
        
        grid-template-columns: repeat(2, 1fr);

        place-items: center;
    }


    /* & .container > * {
        border: 1px solid #fff;
    } */
}


#intro .avatar {

    width: 90%;
    /* width: 100%; */

    & img {
        width: 100%;
        /* height: 100%; */

        border-radius: 50%;

        /* background-color: rgb(3, 151, 171); */
        background-color: rgb(128, 137, 138);

        border: 4px solid rgb(8, 238, 219);
    }

}


#intro .content {

    position: relative;

    /* top: 5%; */

    padding: 10px;

    /* border: 1px solid #fff; */

    & .name {

        font-size: 6em;

        font-weight: bold;

        font-family: 'Righteous', sans-serif;

        line-height: 1em;
    }

    & .des {

        margin-top: 1.2em;

        line-height: 1.5;

        letter-spacing: 0.2px;

        font-size: 1.25rem;

        & a {
            margin-top: 1.25rem;
            /* border: 1px solid #fff; */
        }

    }


    & i {

        font-size: 6rem;
    
        position: absolute;
    
        /* top: -5rem; */
        /* right: 1rem; */
    
        top: 0rem;
        right: 0rem;

        color: #293b4c;    
    }

}


/* Used in other tabs */
.text-gradient {

    background-image: linear-gradient(
        to right, #E4454A, #CA3EA7
    );

    display: inline-block;

    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
}


@media screen and (max-width: 991px) 
{
    #intro .content i {
        display: none;
    }

}


@media screen and (max-width: 767px)
{

    #intro .container {
        grid-template-columns: 1fr;
        grid-template-rows: 2;
    }


    #intro .avatar {
        grid-area: 1 / 1 / 2 / 2;

        width: 55%;

    }


    #intro .content {
        grid-area: 2 / 1 / 3 / 2;

        align-self: start;
    }


    #intro .content .name {
        font-size: 4rem;
    }

    #intro .content .des {
        font-size: 1rem;
    }




}


/* =================================================================== */
/* skills */
#skill {
    background-color: #F2F0EB;

    color: #eee;

    background-image: linear-gradient(
        45deg, #3A2530, #171514, #412726
    );

    background-size: cover;
}


#skill .list {
    height: 100%;

    display: grid;
    grid-template-columns: repeat(3, 1fr);

    padding: 50px;

    /* box-sizing: border-box; */

    gap: 0px;

    /* border: 1px solid blue; */

}


#skill .list .item {

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    text-align: center;

    padding: 20px;
}


#skill .list .item:nth-child(odd) {
    background-color: #3F2525;
}


#skill .list .item i {
    width: 50px;
    height: 50px;

    background-color: #eee;

    color: #CA3EA7;

    font-size: 2em;

    display: flex;
    justify-content: center;
    align-items: center;

    border-radius: 5px;

    box-shadow: 0 10px 10px #0005;
}


#skill .list .item .name {
    /* font-size: 1.5em; */
    font-size: 1.25em;

    margin-top: 0.7em;
}


#skill .list .item .des {
    font-size: small;
    opacity: 0.8;
}



/* ipad, tablets */
@media screen and (max-width: 767px)
{
    #skill .list {
        padding: 0px;
        grid-template-columns: repeat(2, 1fr);
    }

    #skill .list .item:nth-child(odd) {
        background: unset;
    }


    #skill .list .item:nth-child(2),
    #skill .list .item:nth-child(3n) {
        background: #3F2525;
    }

}



/* =================================================================== */
/* project */
#project {
    
    background-color: #cfbaba;

    color: #444B57;

    
    text-align: center;


    & .container {
        overflow: auto;
    }

}


#project .container .list {
    
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 30px;

    padding: 50px;
}


#project .container .list .item {

    border-radius: 30px;

    overflow: hidden;

    background-color: #fff;

    position: relative;


    & img {

        width: 100%;
        /* width: 96%; */

        /* height: 150px; */
        height: 300px;

        object-fit: cover;
    }


    & .index {
        background-color: #fff;

        font-weight: bold;

        font-size: 1.5em;

        position: absolute;
        transform: translateY(-100%);

        padding: 10px;

        font-style: italic;

        border-top-right-radius: 20px;
    }


    & .name {
        font-weight: bold;
        
        font-size: large;

        padding: 10px;
    }


    & .des {
        padding: 0 10px 10px 10px;
    }

    & hr {
        margin-left: 10px;
        margin-right: 10px;
    }

    & .author {
        padding: 10px;
    
        /* border-top: 1px solid #eee; */
        /* border: 1px solid red; */
    
        display: flex;

        /* justify-content: space-between; */
        justify-content: space-around;
    }


    & .author a {
        color: #ef744b;

        /* font-size: 15px; */
        font-size: 1rem;

        /* font-weight: 300; */
    }
}



@media screen and (max-width: 767px)
{

    #project .container .list {
        padding: 10px;

        grid-template-columns: repeat(2, 1fr);
        
        gap: 5px;
    }

    #project .container .list .item {

        & img {
            height: 150px;
            /* height: 200px; */
        }
        
    }

}


/* =================================================================== */
/* contact */
#contact {
    
    /* background: #242330; */
    background: #1f242d;

    display: flex;
    justify-content: center;
    align-items: center;

    /* border: 1px solid white; */

    & .container {
        /* width: 600px; */
        width: 660px;

        height: unset;

        padding: unset;

        margin: unset;

        position: static;

        /* border: 1px solid green; */
    }
}


#contact .container h2 {

    font-size: 40px;
    
    color: #ededed;

    text-align: center;

    margin-bottom: 10px;
}


#contact .container form {

    width: 100%;

    text-align: center;

    /* border: 1px solid yellow; */


    & .input-box {

        display: flex;
    
        justify-content: space-between;

        /* border: 1px solid red; */

        & .input-field {
            width: 48.5%;
            /* border: 1px solid #fff; */
        }

    }


    & .field .item {

        width: 100%;

        padding: 18px;

        background: transparent;

        border: 2px solid #0ef;

        outline: none;

        border-radius: 6px;

        font-size: 16px;

        color: #ededed;

        margin: 12px 0;

        &::placeholder {
            color: rgba(255, 255, 255, 0.3);
        }

    }



    & .textarea-field .item {
        resize: none;
    }



    & button {

        padding: 12px 32px;

        background: #0ef;

        border: none;
        outline: none;

        border-radius: 6px;

        box-shadow: 0 0 10px #0ef;

        font-size: 16px;

        color: #333;

        letter-spacing: 1px;

        font-weight: 600;

        cursor: pointer;

        margin-top: 20px;

        transition: 0.5s;


        &:hover {
            box-shadow: none;
        }
    }


    & .field .error-txt {

        font-size: 14.5px;

        color: #d93025;

        text-align: left;

        margin: -5px 0 10px;

        display: none;
    }


    & .textarea-field .error-txt {
        margin-top: -10px;
    }


    .field.error .item {
        border: 2px solid #d93025;
    }
    
    
    .field.error .error-txt {
        display: block;
    }

}


/* @media screen and (max-width: 767px) */
@media screen and (max-width: 500px)
{
    #contact .container {
        width: 90%;
        padding-top: 2.5rem;
    }

    #contact .container form .input-box {        
        flex-direction: column;

        & .input-field {
            width: 100%;
        }
    }

    #contact .container form .field .item {
        padding: 10px 12px;

        margin: 6px 0px;

        font-size: 1.125rem;
    }


    #contact .container form .textarea-field .item {
        width: 100%;

        height: 150px;
    }

    #contact .container form .field .error-txt {
        margin: -5px 0 5px;
    }
}



/* =================================================================== */




/* =================================================================== */
/* effect */
.tab {
    position: fixed;
    inset: 0 0 0 0;
    z-index: 1;
}


#intro{
    z-index: 2;
}


.tab.active {

    --x: 50%;
    --y: 50%;


    /* clip-path: circle(
        200% at var(--x) var(--y)
        50% at var(--x) var(--y)
    ); */


    clip-path: polygon(
        0% 0%, 
        100% 0%, 
        100% 100%, 
        0% 100%
    );


    animation: showTab 1s ease-in-out 1;
}



/* Chú ý là trong video thì dùng:
==>>
        to
        {
            clip-path: circle(
                200% at var(--x) var(--y)
            );
        }

==>> phần .tab.active{} sẽ set là ==>> 0% at var(--x) var(--y)
*/
@keyframes showTab
{
    /* from
    {
        clip-path: circle(
            0% at var(--x) var(--y)
        );
    } */



    from
    {
        clip-path: polygon(
            50% 50%, 
            50% 50%, 
            50% 50%, 
            50% 50%
        );
    }

}



/* 
clip-path: circle( 100px at 50% 50%);

Tức là R=100px ở vị trí ngay tâm website

VÔ đây chọn clip-path ==>>> https://bennettfeely.com/clippy/
*/