body{
    background-color: rgb(255, 255, 255);
    --kichThuocAnh:8em;
}
.bS2{
    box-shadow: #000000ab 0px .1em .6em;
}
.ka1{

    transform:  translateY(calc(var(--kichThuocAnh) - 50%)) rotate(45deg);
    border: 1px solid #00ccff;
    position: relative;
    overflow: hidden;
    background-color: rgba(206, 25, 25, 0.322);
    height: var(--kichThuocAnh);
    width:  var(--kichThuocAnh);
    outline: 2px solid #fff;
    outline-offset: 2px;
    cursor: pointer;

    animation: ligh1 5s infinite;
}

@keyframes ligh1 {
    0%{
        box-shadow: #ffffff 0px .1em 1em;
    }
    25%{
        box-shadow: #03c2fc 0px .2em 2em;
    }
    50%{
        box-shadow: #ebfc03 0px .2em 2em;
    }
    75%{
        box-shadow: #fc03b1 0px .2em 2em;
    }
    100%{
        box-shadow: #ffffff 0px .1em 1em;
    }
}
.k1{
    height: 20vh;
    z-index: 12;
}
.ava1{
    transition: transform .3s;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: auto;
    transform:  translate(-50%, -50%) rotate(-45deg);
    width: calc(var(--kichThuocAnh) + 50%);
    height: calc(var(--kichThuocAnh) + 50%);
    object-fit: contain;
    display: block;
}
.ten{
    padding-top: calc(var(--kichThuocAnh) * 85/ 100);
    color: #fff;
    --mau-down:#0048a7;
    z-index: 9;
    width: fit-content;
    filter: drop-shadow(#040a2e 1px 1px .2em);
    position: absolute;
    top: 0;right: 0;bottom: 0; left: 0;
}
.ten::before,.ten::after{
    content: "";
    display: block;
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    bottom: 0;
    background-color: #00ccff;
}
.ten::before{
    right: 50%;
    background: linear-gradient(90deg,#3167b800,var(--mau-down));
}
.ten::after{
    background: linear-gradient(90deg,var(--mau-down),#3167b800);
    left: 50%;
}
.ten>h1,.ten>div{
    position: relative;
    z-index: 8;
}
.ten>h1{
    animation: zinf 2s infinite;
}
@keyframes zinf {
    0%{
        transform: scale(1);
    }
    50%{ transform: scale(1.03);}
    100%{
        transform: scale(1);
    }
}

.ka1:hover>.ava1{
    transform:  translate(-50%, -50%) rotate(-45deg) scale(1.1);
}
.d1,.d2{
    background-color: #00235296;
}
.k2{
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #1861a5;
    min-height: calc(var(--kichThuocAnh) * 2);
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.btSlide1{
    animation: anim1 1s;
}
.k3{
    color: #0b5568;
    background-color: #ffffff;
}
.k3>div{
    max-width: 50vw;
}
@keyframes anim1 {
    0%{
        transform: translateY(60%);
        opacity: 0;
    }
    30%{
        transform: translateY(60%);
        opacity: 0;
    }
    100%{
        transform: translateY(0);
        opacity: 1;
    }
}
.tbSlide1{
    animation: anim2 .8s;
}
@keyframes anim2 {
    0%{
        transform: translateY(-60%);
        opacity: 0;
    }
    100%{
        transform: translateY(0);
        opacity: 1;
    }
}

.btSlide2{
    animation: anim3 2s;
}
@keyframes anim3 {
    0%{
        transform: translateY(-60%);
        opacity: 0;
    }
    40%{
        transform: translateY(-60%);
        opacity: 0;
    }
    100%{
        transform: translateY(0);
        opacity: 1;
    }
}


.lrslide1{
    animation: anim4 2.5s;
}
@keyframes anim4 {
    0%{
        transform: translateX(-60%);
        opacity: 0;
    }
    60%{
        transform: translateX(-60%);
        opacity: 0;
    }
    100%{
        transform: translateX(0);
        opacity: 1;
    }
}

.rlslide1{
    animation: anim5 2.5s;
}
@keyframes anim5 {
    0%{
        transform: translateX(60%);
        opacity: 0;
    }
    60%{
        transform: translateX(60%);
        opacity: 0;
    }
    100%{
        transform: translateX(0);
        opacity: 1;
    }
}


.lrslide2{
    animation: animf5 3.2s;
}
@keyframes animf5 {
    0%{
        transform: translateX(-60%);
        opacity: 0;
    }
    60%{
        transform: translateX(-60%);
        opacity: 0;
    }
    100%{
        transform: translateX(0);
        opacity: 1;
    }
}

.rlslide2{
    animation: animf6 3.2s;
}
@keyframes animf6 {
    0%{
        transform: translateX(60%);
        opacity: 0;
    }
    60%{
        transform: translateX(60%);
        opacity: 0;
    }
    100%{
        transform: translateX(0);
        opacity: 1;
    }
}



.btslide3{
    animation: anims3 2.5s;
}
@keyframes anims3 {
    0%{
        transform: translateY(-60%);
        opacity: 0;
    }
    65%{
        transform: translateY(-60%);
        opacity: 0;
    }
    100%{
        transform: translateY(0);
        opacity: 1;
    }
}

.btslide4{
    animation: anims4 3s;
}
@keyframes anims4 {
    0%{
        transform: translateY(-60%);
        opacity: 0;
    }
    70%{
        transform: translateY(-60%);
        opacity: 0;
    }
    100%{
        transform: translateY(0);
        opacity: 1;
    }
}

.btslide5{
    animation: anims5 3s;
}
@keyframes anims5 {
    0%{
        transform: translateY(-60%);
        opacity: 0;
    }
    80%{
        transform: translateY(-60%);
        opacity: 0;
    }
    100%{
        transform: translateY(0);
        opacity: 1;
    }
}

.dsicon img{
    cursor: pointer;
    background-color: #b4d2da;
    margin-left: .3em;
    margin-right: .3em;
    border-radius: 50%;
    box-shadow: #71faffab 0px .1em .6em;
    display: block;
    overflow: hidden;
    object-fit: contain;
    width: 2em;
    height: 2em;
}
.dsicon >div>div{
    display: flex;
    align-items: center;
    margin: 1em;
}
.d2{
    justify-content: flex-end;
}
.d2>div>div{
    justify-content: flex-end;
}
.lienhe{
    display: flex;
    justify-content: center;
}
.lienhe img{
    display: block;
    border: 2px solid #fff;
    background-color: #ffff;
    border-radius: 2em;
    width: 2em;
}
.lienhe a>span{
    opacity: 0;
    transition: opacity .4s;
    font-size: small;
    position: absolute;
    bottom: 102%;
    text-align: center;
}
.lienhe a{
    position: relative;
    margin: 1em;
    align-items: center;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: #ffff;
    width: fit-content;
}
.lienhe a:hover>span{
    opacity: 1;
}


.foot{
    background-color: #003d8b;
    min-height: 20vh;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.tbx{
    --mau-anchor:#009ee7;
    padding-left: 1.5em;
}
.tbx>div{
    position: relative;
    display: flex;
    flex-direction: column;
}
.tbx>div>strong{position: relative; padding-left: .5em;}
.tbx>div>strong>i{
    position: absolute;
    left: 0;
    bottom: 0;
    top: 0;
}
.tbx>div>span{
    padding-left: 1.5em;
    padding-bottom: .8em;
}
.tbx>div>strong::before{
    content: "";
    transform: rotate(45deg);
    border-radius: 50%;
    height: .5em;
    width: .5em;
    position: absolute;
    left: -1em;
    top: 0;
    bottom: 0;
    margin-top: auto;
    margin-bottom: auto;
    background-color: var(--mau-anchor);
}
.tbx>div>strong::after{
    position: absolute;
    content: "";
    display: block;
    height: 2px;
    width: .5em;
    top: 0;
    bottom: 0;
    background-color: var(--mau-anchor);
    left: -0.6em;
    margin-top: auto;
    margin-bottom: auto;
}
.tbx>div:not(:last-of-type)>strong>i::after{
    height: 100%;
    content: "";
    position: absolute;
    width: 2px;
    background-color: var(--mau-anchor);
    left: -0.8em;
    top: 50%;
    bottom: 0;
}
.tbx>div:not(:last-of-type)>span{
    position: relative;
}
.tbx>div:not(:last-of-type)>span::after{
    height: 100%;
    content: "";
    position: absolute;
    width: 2px;
    background-color: var(--mau-anchor);
    left: -0.8em;
    top: 0;
    bottom: 0;
}
.tbx>div:not(:first-of-type)>strong>i::before{
    height: 100%;
    content: "";
    position: absolute;
    width: 2px;
    background-color: var(--mau-anchor);
    left: -0.8em;
    bottom: 50%;
}

@media screen and (min-width:640px) {
    .c1{ max-width: 100vw; }
    .k3>div{
        min-width: 30vw;
    }
}

@media screen and (max-width:800px) {
    .k2{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .k3>div{
        max-width: 100%;
        padding: 1em;
        box-sizing: border-box;
    }
    .ten{
        position: relative;
        width: 100%;
        order: 1;
    }
    .ten::after,.ten::before{
        right: 0;
        left: 0;
        height: 50%;
    }
    .ten::after{
        bottom: 50%;
        background: linear-gradient(0deg,var(--mau-down),#3167b800);
    }
    .ten::before{
        top: 50%;
        background: linear-gradient(0deg,#3167b800,var(--mau-down));
    }
    .d2 span{order: 2;}
    .d2>div>div{justify-content: flex-start;}
    .d2{
        order: 2;
    }
    .d2,.d1{
        padding: 0 !important;
        width: 100%;
        justify-content: center;
    }
    .d1{
        order: 3;
    }
}