*{
    box-sizing: border-box;margin:0;padding:0;
}
body{
    font-family: "Archivo", sans-serif;
    font-weight: 400;
    height: 100vh;
    overflow: hidden;
    z-index: 1;
    position: relative;
}
@font-face {
    font-family: 'UTM Neutra';
    font-style: normal;
    src: url('../fonts/UTM-Neutra.woff') format('woff');
}
a{
    text-decoration: none;
}
.background-3d {
    background: url('../images/bg-intro.png') center center/cover no-repeat;
    padding:40px 0;
    height: 100%;
}
.intro-container{
    max-width: 1300px;
    margin:auto;
    position: relative;
}
.hotline-intro {position: absolute;display: flex;align-items: center;gap: 10px;justify-content: space-between;width: max-content;right: 0;top: 0;}
.icon-hotline-intro {width: 40px;height: 40px;display: flex;align-items: center;justify-content: center;border: 1px solid #fff;border-radius: 50%;}
.text-hotline-intro {
}
.text-hotline-intro a{display:block;text-decoration: none;color: #fff;font-size: 18px;font-weight: 700;}
.text-hotline-intro a:nth-child(1){}
.text-hotline-intro a:nth-child(2){}
.elementor-container-intro {}
.elementor-logo-intro {text-align: center;}
.logo-intro {
    margin-bottom:30px;
}
.name-intro {
    font-family: 'UTM Neutra';
    font-size:50px;
    color:#FFCA1B;
    -webkit-box-reflect: below 1px linear-gradient(transparent 60%, rgba(0, 0, 0, 0.5));
    margin-bottom: 50px;
    line-height: 1;
}
.photo-intro {
    max-width: 60vw;
    width: 100%;
    margin: 0 auto;
    display:flex;
    justify-content:space-between;
    gap: 0px clamp(30px,8vw,80px);
    margin-bottom:20px;
}
.item-intro {flex: 0 1 calc(50% - clamp(30px,8.5vw,100px)/2);padding:0 40px;}
.item-intro__pic {display: block;overflow: hidden;position: relative;z-index: 1;border: 3px solid #fff;border-radius: 20px;}
.item-intro__pic img{
     height: auto;
    aspect-ratio: 440/310;
}
.item-intro__info {width: calc(100% + 80px);margin-left: -40px;margin-right: -40px;padding: 100px 50px 25px 50px;margin-top: -90px;backdrop-filter: blur(12px);background: rgba(0, 0, 0, 0.10);box-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.25);border-radius: 30px;border: 2px solid #FFF;text-align:center;}
@media(max-width:1440px){
    .item-intro{
        padding:0 25px;
    }
    .item-intro__info {
        padding: 90px 25px 25px 25px;
        margin-left: -25px;
        margin-right: -25px;
        width: calc(100% + 50px);
    }
}
.item-intro__name {text-align: center;font-size: 1.5vw;font-weight: 700;line-height: 50px;text-transform: uppercase;text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);color:#fff;margin-bottom: 0;}
.item-intro__views {
    display:inline-flex;align-items:center;gap:10px;background:#fff;padding:3px 3px 3px 30px;border:1px solid #E31F22;color:#1E1E1E;font-weight:600;text-transform:uppercase;transition:all ease .5s;
}
.item-intro__views:hover{color:#1E1E1E;letter-spacing:1.5px;}
.copyright-intro{
    text-align: center;
    color: #fff;
}
.copyright-intro b{color:#FFC91B;}
/* Lớp hạt */
.particles {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
pointer-events: none;top:0;left:0;
}

/* Hạt cơ bản */
.particle {
position: absolute;
bottom: 50%;
right: 50%;
width: 15px;
height: 15px;
border-radius: 50%;
background: rgba(255, 80, 80, 0.9);
opacity: 0;
animation: flyIn 4s linear infinite;
}

/* Tạo nhiều hạt ngẫu nhiên */
.particle:nth-child(odd) { background: rgba(255, 50, 50, 0.8); }
.particle:nth-child(even) { background: rgba(255, 150, 150, 0.7); }

  /* Vị trí ngẫu nhiên */
@keyframes flyIn {
0% {
    transform: translate(var(--xStart), var(--yStart)) scale(1);
    opacity: 0;
}
10% {
    opacity: 1;
}
100% {
    transform: translate(0, 0) scale(0);
    opacity: 0;
}
}

@keyframes bgMove {
from { transform: scale(1.05) translateY(0); }
to { transform: scale(1.08) translateY(-30px); }
}

@keyframes lightShift {
from { transform: translate(-15%, -10%); }
to { transform: translate(15%, 20%); }
}


@media(max-width:1024px){
    .photo-intro { max-width: 90% !important; margin: auto; gap: 0px; }
    .item-intro { flex: none; width: 49%; padding: 0px 10px; }
    .item-intro__info { margin-left: 0px; margin-right: 0px; width: 100%; padding: 50px 10px 10px 10px; margin-top: -55px; }
    .item-intro__name{ font-size: 15px; }
    .item-intro__views { padding: 3px 3px 3px 3px; font-size: 10px; }
    .item-intro__views svg { width: 20px; height: 20px; }
    .copyright-intro { margin-top: 30px; }
}