/* ==========================================================
   TK HERO
   phongtuyensinh.com
========================================================== */

.tkhero{

    position:relative;

    overflow:hidden;

    background:#ffffff;

    padding:110px 0 90px;

}

.tkhero .container{

    max-width:1320px;

    margin:0 auto;

    position:relative;

    z-index:2;

}

/*======================================
GRID
======================================*/

.tkhero__grid{
    display:grid;
    grid-template-columns:46% 54%;
    gap:20px;
    align-items:center;
}
.tkhero__content{

    position:relative;

    z-index:10;

}

.tkhero__image{

    position:relative;

    z-index:1;

}
/*======================================
LEFT
======================================*/

.tkhero__badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:10px 22px;

    border-radius:999px;

    background:#EAF8F6;

    color:#0F766E;

    font-size:13px;

    font-weight:700;

    letter-spacing:.8px;

    text-transform:uppercase;

    margin-bottom:28px;

}

.tkhero__title{
    
    max-width:720px;

    margin:0;

    font-size:50px;

    line-height:1.12;

    font-weight:800;

    color:#0F172A;

}

.tkhero__subtitle{

    margin-top:34px;

    margin-bottom:36px;

    font-size:20px;

    line-height:1.9;

    color:#475569;

}

/*======================================
BUTTONS
======================================*/

.tkhero__actions{

    display:flex;

    gap:18px;

    margin-bottom:42px;

}

.tkhero__button{

    display:flex;

    align-items:center;

    justify-content:center;

    min-width:220px;

    height:58px;

    padding:0 28px;

    border-radius:999px;

    text-decoration:none;

    font-weight:700;

    transition:.3s;

}

.tkhero__button--primary{

    background:#F97316;

    color:#ffffff;

}

.tkhero__button--primary:hover{

    background:#EA580C;

    transform:translateY(-2px);

    color:#ffffff;

}

.tkhero__button--secondary{

    border:2px solid #0F766E;

    color:#0F766E;

    background:#ffffff;

}

.tkhero__button--secondary:hover{

    background:#0F766E;

    color:#ffffff;

}

/*======================================
FEATURES
======================================*/

.tkhero__features{

    list-style:none;

    padding:0;

    margin:0;

}

.tkhero__features li{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:18px;

    font-size:18px;

    color:#334155;

}

.tkhero__check{

    width:28px;

    height:28px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#ECFDF5;

    color:#0F766E;

    font-weight:700;

}

/*======================================
IMAGE
======================================*/

.tkhero__image{

    display:flex;

    justify-content:flex-end;

    align-items:center;

    overflow:hidden;

}

.tkhero__image img{

    display:block;

    width:120%;

    max-width:900px;

    height:auto;

    object-fit:contain;

}

/*======================================
RESPONSIVE
======================================*/

@media (max-width:1200px){

    .tkhero__title{

        font-size:56px;

    }

}

@media (max-width:991px){

    .tkhero{

        padding:80px 0;

    }

    .tkhero__grid{

        grid-template-columns:1fr;

        gap:50px;

    }

    .tkhero__content{

        text-align:center;
        
        max-width:540px;

    }

    .tkhero__subtitle{

        max-width:700px;

        margin-left:auto;

        margin-right:auto;

    }

    .tkhero__actions{

        justify-content:center;

        flex-wrap:wrap;

    }

    .tkhero__features{

        display:inline-block;

        text-align:left;

    }

    .tkhero__image{

        text-align:center;

    }

    .tkhero__image img{

        margin:auto;

        max-width:700px;

    }

}

@media (max-width:767px){

    .tkhero{

        padding:60px 0;

    }

    .tkhero__title{

        font-size:40px;

    }

    .tkhero__subtitle{

        font-size:17px;

        line-height:1.8;

    }

    .tkhero__actions{

        flex-direction:column;

    }

    .tkhero__button{

        width:100%;

    }

    .tkhero__image img{

        max-width:100%;

    }

}