/*==================================================
TINLAW MEDIA
==================================================*/

.tl-media{
    width:100%;
    padding:70px 0;
    overflow:hidden;
}

.tl-media-heading{
    max-width:760px;
    margin:0 auto 45px;
    text-align:center;
    padding:0 15px;
}

.tl-media-subtitle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:8px 18px;
    border-radius:50px;
    background:#EEF4FD;
    color:#3C71B5;
    font-size:13px;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;
    margin-bottom:16px;
}

.tl-media-title{
    margin:0;
    font-size:clamp(30px,4vw,42px);
    font-weight:800;
    color:#1F365F;
    line-height:1.2;
}

.tl-media-desc{
    margin-top:18px;
    color:#666;
    font-size:16px;
    line-height:1.8;
}

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

.tl-media-mask{

    position:relative;

    overflow:hidden;

    margin-top:18px;

    padding:10px 0;

}

/* Fade 2 đầu */

.tl-media-mask::before,
.tl-media-mask::after{

    content:"";

    position:absolute;

    top:0;

    width:120px;

    height:100%;

    z-index:3;

    pointer-events:none;

}

.tl-media-mask::before{

    left:0;

    background:linear-gradient(to right,#fff 0%,rgba(255,255,255,0)100%);

}

.tl-media-mask::after{

    right:0;

    background:linear-gradient(to left,#fff 0%,rgba(255,255,255,0)100%);

}

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

.tl-media-track{

    display:flex;

    width:max-content;

    gap:18px;

    align-items:center;

}

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

.tl-media-item{

    width:180px;

    height:90px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#fff;

    border:1px solid #EDF1F7;

    border-radius:16px;

    transition:.35s;

    padding:14px;

    box-shadow:0 2px 12px rgba(0,0,0,.04);

}

.tl-media-item:hover{

    border-color:#E8C755;

    transform:translateY(-4px);

    box-shadow:0 12px 25px rgba(60,113,181,.12);

}

.tl-media-item img{

    max-width:120px;

    max-height:46px;

    width:auto;

    height:auto;

    object-fit:contain;

    filter:grayscale(100%);

    opacity:.72;

    transition:.35s;

}

.tl-media-item:hover img{

    filter:none;

    opacity:1;

    transform:scale(1.05);

}

/*==========================
Animation
==========================*/

.tl-media-track-1{

    animation:tlMoveLeft 45s linear infinite;

}

.tl-media-track-2{

    animation:tlMoveRight 45s linear infinite;

}

/* Hover pause */

.tl-media-mask:hover .tl-media-track{

    animation-play-state:paused;

}

@keyframes tlMoveLeft{

    from{

        transform:translateX(0);

    }

    to{

        transform:translateX(-50%);

    }

}

@keyframes tlMoveRight{

    from{

        transform:translateX(-50%);

    }

    to{

        transform:translateX(0);

    }

}

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

@media(max-width:1024px){

    .tl-media-item{

        width:160px;

        height:82px;

    }

}

@media(max-width:768px){

    .tl-media{

        padding:50px 0;

    }

    .tl-media-title{

        font-size:30px;

    }

    .tl-media-desc{

        font-size:15px;

    }

    .tl-media-item{

        width:145px;

        height:72px;

        border-radius:12px;

    }

    .tl-media-item img{

        max-width:100px;

        max-height:38px;

    }

    .tl-media-track-1{

        animation-duration:28s;

    }

    .tl-media-track-2{

        animation-duration:28s;

    }

}

@media(max-width:480px){

    .tl-media-item{

        width:120px;

        height:62px;

        padding:10px;

    }

    .tl-media-item img{

        max-width:85px;

        max-height:30px;

    }

}