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

        }
        body{
        background: url('public_bg.jpg') center/cover fixed no-repeat black;
        }
        #span  {
        position: sticky;
        top: 0;
        width: 15px;
        height: 15px;
        background: red;
        border-radius: 50%;
        display: none;
    }
        header {
            width: 100vw;
            text-align: center;
            color: white;
            height: 200px;
            margin-bottom: 50px;
            padding-top: 80px;
            padding: 30px;
        }
        header h1 {
            text-shadow: 0 0 9px black;
            font-size: 40px;
            display: flex;
            text-align: center;
            justify-content: center;
            align-items: center;
            padding-top: 100px;
        }
        header p {
            text-shadow: 0 0 9px white;
        }
        header label {
            transition: 0.3s;
            display:block;
            text-align: center;
            cursor: pointer;
            text-shadow: 0 0 9px  rgb(0, 0, 0);
           padding-top: 20px;
        }
        header label:hover {
            transform: scale(1.55);
            text-decoration: underline blueviolet;
        }
        .oo {
            padding-top: 30px;
            margin-bottom: -20px;
            width: 100vw;
            overflow: hidden;
        }
        .oo ul  {
            display: flex;
            position: absolute;
            width: 100%;
            gap: 2px;
            gap: 50px;
            list-style: none;
            width: 100%;
            overflow: hidden;
        }
        .oo li {
            background: rgba(0, 0, 0, 0.467);
            padding: 5px 30px;
            border-radius: 5px;
            animation: imgs 20s infinite linear;
        }
        .oo li:hover {
            animation-play-state: paused;
            transform: scale(1.15);
        }
        .oo img {
            width: 50px;
            height: 50px;
            filter: brightness(0) invert(1);
            transition: all 0.3s ease;
        }
        @keyframes imgs {
            from{
                transform: translateX(0);
            }
            to{
                transform: translateX(-200px);
            }
        }
        @media(max-width:770px) {
            .oo {
                padding-top: 40px;

            }
            .oo img {
                width: 40px;
                height: 40px;
            }
            .oo ul li {
                padding: none;
            }
        }
       
         @media(max-width:410px) {
            .oo {
                margin-bottom: -50px;
                margin-top: -10px;
            }
            .oo img {
                width: 30px;
                height: 30px;
                background: transparent;
            }
            header {padding-top: 60px;font-size: 15px;}
            header label {
                font-size: 35px;
            }
        }


        @media (max-height:640px) {
            
           header h1 {
            margin-top: -30px;
           }
        }
        




         main {
                height: 65%;
                color: white;
                text-align: justify;
            }
            #create {
                padding: 10px;
            }
            #create p{
                color: rgb(185, 185, 185);
            }






            .b {
                    height: 85%;
                    padding: 20px;
                }
                #what {
                    width: 100%;
                    height: 50dvh;
                    background: rgba(0, 0, 0, 0.372);
                    backdrop-filter: blur(5px);
                    display: flex;
                    align-items: center;
                    padding: 10px;
                    gap: 20px;
                    border-radius: 20px;

                }
                #a1 {
                    width: 40%;
                    background: transparent;
                    height: 100%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
                #a1 h3 {
                    position: absolute;
                    color: white;
                }
                #a1 p {
                    width: 200px;
                    height: 200px;
                    border: 30px solid white;
                    background: transparent;
                    border-right: 30px solid blueviolet;
                    border-radius: 50%;
                    transition: 0.3s;
                    animation: okay;
                    animation-timeline: view();
                }
                @keyframes okay {
                    from{
                        transform: rotate(0deg);
                    }
                    to{
                        transform: rotate(500deg);
                    }
                }
                #a2 {
                    width: 50%;
                    height: 100%;
                    display: flex;
                    justify-content:start;
                    align-items: center;
                    overflow-y: auto;
                }
                #a2 p{
                    font-size: 20px;
                    text-align: justify;
                    color: rgb(5, 226, 255);
                }
                @media(max-width:780px) {
            #what {
                flex-direction: column;
                height: none;
            }

            #a1, #a2 {
                width: 100%;
            }
            #a1 {
                height: 30dvh;
            }

            #a1 p {
                width: 140px;
                height: 140px;
                border-width: 5px;
            }
            #a1 h3 {
                font-size: 18px;
                text-decoration: underline rgb(0, 0, 0);
            }

            #a2 {
                height: 100dvh;
            }
            #a2 p {
                font-size: 19px;
                padding: 15px;
            }
        }
        @media(max-width:660px) {
           #a2 p {
            font-size: 18px;
           }
        }
        @media(max-width:500px) {
            #a1 p {
                width: 120px;
                height: 120px;
            }
            #a1 h3 {
                font-size: 16px;
            }
        }
        @media(max-width:490px) {
            #what {
                height: 70dvh;
            }
            #a1 p {
                width: 120px;
                height: 120px;
            }
            #a1 h3 {
                font-size: 16px;
            }
        }
         @media(max-width:480px) {
            #what {
                height: 70dvh;
            }
            #a1 p {
                width: 110px;
                height: 110px;
            }
            #a1 h3 {
                font-size: 15px;
            }
            #a2 p{
                font-size: 17px;
            }
        }
         @media(max-width:410px) {
            #what {
                height: 60dvh;
            }
            #a1 {
                height: 30%;
                display: flex;
                justify-content: center;
                align-items: center;
            }
            #a2 {
                height: 90%;
                margin-top: -100px;
            }
            #a2 p {
                font-size: 16px;
            }
        }
         @media(max-width:340px) {
            #a2 p {
                font-size: 15px;
                margin-top: 30px;
            }
        }
        @media(max-width:420px) {#a2 p {font-size: 16px;}}
        @media(max-width:341px){#a2 p{font-size: 15px;}}
        @media (max-width:300px) {
            #a1 {
                margin-top: -20px;
            }
            #a1 p {
                width: 100px;
                height: 100px;
            }
            #a1 h3 {
                font-size: 13px;
            }
            #a2 p {font-size: 10px;}
        }
        @media(max-height:500px) {
            #what {
                height: 100dvh;
            }
            #a1 h3 {
                font-size: 13px;
            }

            #a2 p  {
                margin-top: 50px;
            }

        }
        @media(max-height:780px) and (max-width:400px) {
            #a2 {
                height: 100dvh;
            }
            #a2 p {
                margin-top: 70px;
            }
        }
 

        @media(max-height:720px )  and (max-width:300px) {
            #a1{
                height: 30dvh;
            }
            #a2 {
                height: 100dvh;
            }
        }
        @media(max-height:700px )  and (max-width:300px) {
            #what {
                height: 90dvh;
                padding: none;
            }
            #a1 {
                height: 30%;
            }
            #a1 p {
                width: 120px;
                height: 120px;
            }
            #a2 {
                height: 100%;
                padding: none;
            }
            #a2 p {
                font-size: 15px;
                padding: none;
            }
        }
         @media(max-height:650px) and (max-width:300px) {
        #a1 p {
                width: 120px;
                height: 120px;
            }
            #a1 h3 {font-size: 14px;}
    }
    @media(max-height:580px) and (max-width:300px) {
            #a1 p {
                width: 110px;
                height: 110px;
            }
        }
        @media(max-height:500px) and (max-width:300px) {
            #a1 p {
                width: 90px;
                height: 90px;
            }
            #a1 h3 {
                font-size: 12px;
            }
        }
        @media(max-height:800px) and (max-width:320px) {
           #a1 {
            margin-top: -20px;
           }
           #a2 {
            padding-top: 10px;
            height: 60dvh;
           }
        }
        @media(max-height:700px) and (max-width:320px) {
            #what {
                height: 70dvh;
            }
            #a2 {
                height: 90dvh;
            }
        }
        @media(max-height:655px) and (max-width:320px) {
            #what {
                height: 80dvh;
            }
            #a1 {
                margin-top: 10px;
            }
            #a1  p{
                width: 130px;
                height: 130px;
            }
            #a1 h3 {
                font-size: 15px;
            }
            #a2 p {
                font-size: 15px;
            }
        }

        @media(max-height:600px) and (max-width:320px) {
            #what {
                height: 90dvh;
            }
            #a1 {
                margin-top: 10px;
            }
            #a1  p{
                width: 110px;
                height: 110px;
            }
            #a1 h3 {
                font-size: 13px;
            }
        }
        @media(max-height:500px) and (max-width:320px) {
            #what {
                height: 100dvh;
            }
        }
        @media(max-height:610px) and (max-width:340px) {
            #what {
                height: 120dvh;
            }
        }
        @media(max-height:520px) and (max-width:340px) {
            #a1 p {
                width: 120px;
                height: 120px;
            }
            #a1 h3 {
                font-size: 15px;
            }
            #a2 p{font-size: 14px;}
        }
        @media(max-height:710px) and (max-width:415px) {
            #what {
                height: 70dvh;
            }
        }
        @media(max-height:600px) and (max-width:415px) {
            #what {
                height: 90dvh;
            }
        }
        @media(max-height:670px) and (max-width:380px) {
            #what {
               height: 90dvh;
            }
        }
        @media(max-height:550px) and (max-width:305px) {
            #what{
                height: 120dvh;
            }
        }
        @media(max-height:520px) and (max-width:305px) {
            #what{
                height: 120dvh;
            }
            #a2 p {
                font-size: 15px;
            }
        }
        @media(max-height:500px) {#a2   {
            margin-top: -150px;
        }}
        @media(max-width:490px) {#a2   {
            margin-top: -150px;
        } }
        @media(max-width:410px) {#a2   {
           margin-top: -100px;
        }}
        @media(max-height:470px) {#a2   {
            margin-top: 10px;
        }}





        #why {
                        background: rgba(0, 0, 0, 0.445);
                        height: 50dvh;
                        display: flex;
                        backdrop-filter: blur(5px);
                        margin-top: 20px;
                    }
                    #why div {

                        width: 10%;
                        text-align: center;
                        display: flex;
                        justify-content: center;
                        padding: 10px;
                        align-items: end;
                    }
                    #why div p {
                        background: red;
                        height: 100%;
                        width: 50%;
                        text-align: center;
                    }
                    #why nav {
                        width: 50%;
                        display: grid;
                        justify-content: center;
                        align-items: center;
                        gap: 10px;
                        position: relative;
                        overflow-y: auto;
                        height: 100%;
                    }

                     #i5 {
                        animation: i5;
                        transition: 0.3s;
                        animation-timeline: view(auto auto);
                    }
                    @keyframes i5 {
                        from{
                            height: 0%;
                        }
                        to {
                            height: 16%;
                        }
                    }
                     #box5 {
                        animation: box5;
                        transition: 0.3s;
                        animation-timeline: view(auto auto);
                    }
                    @keyframes box5 {
                        from{
                            transform: translateX(0);
                        }
                        to {
                            transform: translateX(-160px);
                        }
                    }





                    #i1 {
                        animation: i1;
                        transition: 0.3s;
                        animation-timeline: view();
                    }
                    @keyframes i1 {
                        from{
                            height: 50%;
                        }
                        to {
                            height: 20%;
                        }
                    }
                    #i2 {
                        animation: i2;
                        transition: 0.3s;
                        animation-timeline: view();
                    }
                    @keyframes i2 {
                        from{
                            height: 10%;
                        }
                        to {
                            height: 70%;
                        }
                    }
                    #i3 {
                        animation: i3;
                        transition: 0.3s;
                        animation-timeline: view();
                    }
                    @keyframes i3 {
                        from{
                            height: 70%;
                        }
                        to {
                            height: 100%;
                        }
                    }
                    #i4 {
                        animation: i4;
                        transition: 0.3s;
                        animation-timeline: view();
                    }
                    @keyframes i4 {
                        from{
                            height: 100%;
                        }
                        to {
                            height: 50%;
                        }
                    }
                    #me {
                        font-size: 35px;
                        color: rgba(5, 242, 255, 0.6);
                        text-decoration: underline red;
                        text-transform: capitalize;
                        position: relative;
                        text-align: center;
                        
                    }
                    #me li {
                        margin-top: 10px;

                    }
                    #me label {
                        display: inline-flex;
                        transition: 0.3s;
                        animation: label;
                        animation-timeline: view();

                    }
                    @keyframes label {
                        0%,20%,40%,60%,80%,100%{
                            transform: rotate(-10deg);
                        }
                        10%,30%,50%,70%,90%{
                            transform: rotate(10deg);
                        }
                    }
                     @media(max-width:480px) {
            #me {
                font-size: 30px;
            }
        }
             @media(max-width:410px) {
            #me {
                font-size: 25px;
            }
        }
         @media(max-width:340px) {
            #me {
                font-size: 20px;
            }
        }




         #how {
                            height: 10dvh;
                            background: black;
                            display: grid;
                            gap: 10px;
                            justify-content: end;
                        }
                        #how div {
                            width: 200px;
                            background: gold;

                        }
                        #box3 {
                            animation: box3;
                            transition: 0.3s;
                            animation-timeline: view();
                        }
                        @keyframes box3 {
                            from{
                                transform: translateX(0);
                            }
                            to{
                                transform: translateX(-150px);
                            }
                        }




                         #wheb {
                    height: 50dvh;
                    display: flex;
                    background: rgba(0, 0, 0, 0.504);
                    padding: 20px;
                    justify-content: center;
                    backdrop-filter: blur(5px);
                }
                #wheb div {
                    width: 50%;
                    overflow:hidden
                }
                #wheb label  {
                    background: red;
                    padding: 10px 30px;
                }
                #wheb input{
                    padding: 5px;
                    width: 200px;
                    text-align: start;
                }
                #wheb button {
                    padding: 5px 30px;
                }
                #dkp img {
                    width:100%;height:100%;object-fit:cover;border-radius:10px 10px 0 0;transition:0.3s;filter:brightness(80%) ;
                    position:relative;
                }

                #dkp {
                    width: 50%;
                    height: 100%;
                    background: transparent;
                    position: relative;
                    display: flex;
                    justify-content: center;
                    align-items: end;
                    overflow: hidden;
                    position: relative;
                }
                #dkp ul {
                    padding: 30px;overflow-y:auto
                }
                #dkp:hover #dkpimage {
                    filter: brightness(100%);
                    transform: scale(1.55);
                    border-radius: 10px 10px 0 0 ;
                }
                #dkp::after {
                    position: absolute;
                    content: 'DIN KANG PHONG PHONG';
                    left: 0;
                    width: 100%;
                    align-content: end;
                    background: rgb(216, 215, 215);
                    text-align: center;
                    padding: 10px;
                    color: rgb(84, 84, 84);

                }
                #note {
                    font-size: 20px;
            color: rgba(255, 255, 255, 0.85);
            text-shadow: 0 0 9px black;
            line-height: 1.5;
            padding-top: 15px;
            height: 30dvh;
                }
                @media(max-width:765px) {
                    #note {
                        font-size: 19px;
                    }
                }
                @media(max-width:660px) {
            #note {
                font-size: 17px;
            }
        }
        @media(max-width:590px) {
             #wheb {
                flex-direction: column;
                height: 90dvh;
            }

            #wheb div {
                width: 100%;
                height: 100%;
            }
            #note {
                font-size: 19px;
            }

            #dkp {
                height: 100%;

            }
            #dkp:hover #dkpimage{transform: scale(1);filter: brightness(80%);}
        }
         @media(max-width:480px) {
            #note {
                font-size: 17px;

            }
            #dkp{
                width: 100%;
                height: 100%;
                display: flex;
                justify-content: end;
                position: relative;
            }
            
        }
         @media(max-width:410px) {
            #note {
                height: 100dvh;
            }
            
            #dkp {
                height: 10%;
            }
        }
         @media(max-width:340px) {
            #note {font-size: 16px;}
        }
        @media (max-width:300px) {
            #wheb {
                height: 100dvh;
            }
        }
        @media(max-height:500px) {
        #wheb {
            height: 100dvh;
        }
        #note  {
            height: 100dvh;
            font-size: 15px;
        }
        #dkp {
           margin-top: 50px;
           margin-bottom: -150px;
        }
        footer {
            margin-top: 150px;
        }
        }
        @media (max-height:740px) {
            #note {
                font-size: 16px;
            }
        }
        @media (max-height:640px) {
           #wheb {
            height: 100dvh;
           }
        }
        @media(max-height:700px )  and (max-width:300px) {
            #wheb {
                height: 100dvh;
                gap: 0;
            }
            #kkk {
                height: 100%;
                font-size: 12px;
            }
            #note {
                padding-top: 50px;
            }
            #dkp {
                height: 10%;
            }
        }
              @media(max-height:580px) and (max-width:300px) {
            #note {
                padding: none;
                font-size: 15px;
            }
        }
        @media(max-height:750px) and (max-width:320px) {
            #note {
                margin-top: 10px;
            }
        }
        @media(max-height:550px) and (max-width:320px) {
            #wheb {
                height: 110dvh;
            }
        }
        @media(max-height:900px) and (max-width:340px) {

        }
        @media(max-height:550px) and (max-width:340px) {
            #wheb {
                height: 110dvh;
            }
        }

        @media(max-height:670px) and (max-width:345px) {
            #wheb {
                height: 100dvh;
            }
        }
        @media(max-height:550px) and (max-width:305px) {
            #wheb{
                height: 130dvh;
            }
        }
        @media(max-width:320px) {#note {
            font-size: 15px;
        }}





        footer{
            height: 15%;
            background: rgb(0, 0, 0);
            color: white;
            display: flex;
            gap: 20px;
            padding: 20px;
        }
        footer div {
            width: 30%;
            text-align: center;
        }
        footer div ul {
            list-style: none;
            color: gray;
            gap: 10px;
        }
        footer ul li {
            margin-top: 10px;
        }
         @media(max-width:480px) {
            footer {
                font-size: 13px;
                display: grid;
            }
            footer div {
                width: 100%;
            }
        }
         @media(max-width:340px) {
            footer {font-size: 11px;}
        }
        @media (max-width:300px) {
            footer {
                display: grid;
            }
            footer div {
                width: 100%;
            }
        }