:root{
--main:#0d6efd;
--accent:#6610f2;
--soft:#0dcaf0;
--dark:#0a2540;
--glass:rgba(255,255,255,.15);
--radius:20px;
}

html{scroll-behavior:smooth}
body{
font-family:system-ui;
overflow-x:hidden;
background:#f5f7fb;
}

/* progress bar */
#progress{
position:fixed;
top:0;
left:0;
height:4px;
background:linear-gradient(90deg,var(--main),var(--soft),var(--accent));
background-size:300%;
animation:progressMove 6s linear infinite;
width:0%;
z-index:9999;
}
@keyframes progressMove{
0%{background-position:0%}
100%{background-position:300%}
}
 
.logo-site
{
    max-width: 32px; 
}
/* hero */
 
.hero{
/* position:relative;*/ 
color:white;
padding:120px 0;
overflow:hidden;
background:linear-gradient(-45deg,var(--main),var(--soft),var(--accent),var(--main));
background-size:400% 400%;
animation:gradientMove 12s ease infinite;
}
 

@keyframes gradientMove{
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}

/* floating blobs */
.hero::before,
.hero::after{
/* content:"";
position:absolute; */ 
width:420px;
height:420px;
border-radius:50%;
background:rgba(255,255,255,.18);
filter:blur(50px);
animation:float 12s infinite linear;
}

.hero::before{top:-120px;left:-120px}
.hero::after{bottom:-120px;right:-120px;animation-delay:6s}

@keyframes float{
0%{transform:translateY(0)}
50%{transform:translateY(40px)}
100%{transform:translateY(0)}
}

/* section */
.section{padding:90px 0}
 

/* icons */
.icon{
font-size:42px;
transition:.4s;
}
.card:hover .icon{
transform:scale(1.2) rotate(5deg);
filter:drop-shadow(0 5px 10px rgba(0,0,0,.15));
}

/* CTA */
 
/* 
.cta{
background:linear-gradient(135deg,var(--main),var(--accent));
color:white;
padding:70px 20px;
border-radius:30px;
position:relative;
overflow:hidden;
transition:.4s;
     
}
  

.cta:hover{
transform:scale(1.02);
box-shadow:0 20px 60px rgba(13,110,253,.4);
}

.cta::after{
content:"";
position:absolute;
width:300%;
height:300%;
background:radial-gradient(circle,rgba(255,255,255,.25),transparent 70%);
  
animation:shine 8s linear infinite;
}
*/


@keyframes shine{
0%{transform:rotate(0)}
100%{transform:rotate(360deg)}
}
 

@keyframes ripple{
to{transform:scale(4);opacity:0}
}
 


/* section titles */
h2{
background:linear-gradient(90deg,var(--dark),var(--main));
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}
 
.user-card{
transition:.4s;
border-radius:20px;
}

.user-card:hover{
transform:translateY(-12px) scale(1.03);
box-shadow:0 25px 60px rgba(0,0,0,.15);
filter:saturate(1.2);
}

/* icon circle */
.icon-circle{
width:70px;
height:70px;
display:flex;
align-items:center;
justify-content:center;
font-size:30px;
border-radius:50%;
margin:auto;
transition:.4s;
}

.user-card:hover .icon-circle{
transform:scale(1.15) rotate(8deg);
box-shadow:0 10px 30px rgba(0,0,0,.25);
}


/* venues . beign */
/* ===== IMAGE GALLERY ===== */

.image-thumb img{
transition:transform .25s;
}

.image-item:hover img{
transform:scale(1.05);
}

.image-item{
position:relative;
border-radius:12px;
overflow:hidden;
background:#f2f4f7;
cursor:pointer;
transition:.2s;
}

.image-item:hover{
transform:translateY(-3px);
box-shadow:0 8px 18px rgba(0,0,0,0.12);
}

/* khung giữ tỷ lệ ảnh */
.image-thumb{
width:100%;
height:180px;
display:flex;
align-items:center;
justify-content:center;
background:#f7f7f7;
}

/* ảnh */
.image-thumb img{
max-width:100%;
max-height:100%;
object-fit:contain;
}

/* nút delete */
.image-delete{
position:absolute;
top:8px;
right:8px;
background:#000000aa;
color:#fff;
border:0;
border-radius:6px;
padding:4px 8px;
font-size:12px;
z-index:5;
}

.image-delete:hover{
background:#ff4d4f;
}

/* LIGHTBOX */

#viewer-img{
max-width:100%;
max-height:85vh;
border-radius:8px;
}

/* arrows */

.lightbox-prev,
.lightbox-next{
position:absolute;
top:50%;
transform:translateY(-50%);
background:#00000088;
border:0;
color:#fff;
font-size:28px;
padding:10px 14px;
border-radius:8px;
cursor:pointer;
}

.lightbox-prev{ left:10px }
.lightbox-next{ right:10px }

.lightbox-prev:hover,
.lightbox-next:hover{
background:#000000cc;
}

/* close */

.lightbox-close{
position:absolute;
top:10px;
right:10px;
background:#000000aa;
border:0;
color:#fff;
padding:8px 10px;
border-radius:8px;
}

/* index */

.lightbox-index{
position:absolute;
bottom:10px;
left:50%;
transform:translateX(-50%);
color:#fff;
font-size:14px;
background:#00000088;
padding:4px 10px;
border-radius:6px;
}


/* venues . end */

 
.rating-stars .star:hover{
transform:scale(1.1);
}
 


 
/* ======================================================
   FACEBOOK ACTIONS
====================================================== */

.facebook-actions{

    margin-top:28px;

    padding-top:22px;

    border-top:1px solid #edf2f7;

    display:flex;

    flex-wrap:wrap;

    gap:14px;

    align-items:center;
}

/* ======================================================
   MOBILE
====================================================== */

@media(max-width:576px){

    .facebook-actions{

        justify-content:center;
    }

}
 

/**----------------- Begin .ADS --------------- */

/* =====================================================
   PAGE
===================================================== */

body{
    background:#f5f7fb;
}

/* =====================================================
   ADS
===================================================== */

.ads-slider-wrap{
    width:100%;
    overflow:hidden;
}

.ads-slider-wrap .carousel{
    overflow:hidden;
    border-radius:16px;
    background:#fff;
}

/* image */
.ads-slider-wrap img{
    width:100%;
    display:block;
    object-fit:cover;
    user-select:none;
}

/* nav */
.ads-slider-wrap .carousel-control-prev,
.ads-slider-wrap .carousel-control-next{
    width:52px;
    opacity:0;
    transition:.25s;
}

.ads-slider-wrap:hover .carousel-control-prev,
.ads-slider-wrap:hover .carousel-control-next{
    opacity:1;
}

/* icon */
.ads-slider-wrap .carousel-control-prev-icon,
.ads-slider-wrap .carousel-control-next-icon{
    width:42px;
    height:42px;
    border-radius:50%;
    background-color:rgba(0,0,0,.45);
    background-size:55%;
}

/* =====================================================
   RANDOM EFFECTS
===================================================== */

.ads-animate{
    animation-duration:1s;
    animation-fill-mode:both;
}

/* zoom */
.ads-zoom{
    animation-name:adsZoom;
}

@keyframes adsZoom{

    from{
        transform:scale(1.12);
        opacity:.4;
    }

    to{
        transform:scale(1);
        opacity:1;
    }

}

/* fade up */
.ads-fade-up{
    animation-name:adsFadeUp;
}

@keyframes adsFadeUp{

    from{
        transform:translateY(35px);
        opacity:0;
    }

    to{
        transform:translateY(0);
        opacity:1;
    }

}

/* slide left */
.ads-slide-left{
    animation-name:adsSlideLeft;
}

@keyframes adsSlideLeft{

    from{
        transform:translateX(60px);
        opacity:0;
    }

    to{
        transform:translateX(0);
        opacity:1;
    }

}

/* rotate */
.ads-rotate{
    animation-name:adsRotate;
}

@keyframes adsRotate{

    from{
        transform:rotate(3deg) scale(1.05);
        opacity:0;
    }

    to{
        transform:rotate(0deg) scale(1);
        opacity:1;
    }

}

/* mobile */
@media(max-width:768px){

    .ads-slider-wrap .carousel-control-prev,
    .ads-slider-wrap .carousel-control-next{
        display:none;
    }

}



/* =========================================
   ADS ZONE
========================================= */

.ads-zone{
    position:relative;
    margin:15px 0px 10px 0px;
}

/* =========================================
   ADS LABEL
========================================= */

.ads-zone::before{

    content:'Sponsored';

    position:absolute;

    top:8px;
    left:58px;

    z-index:20;

    padding:3px 8px;

    font-size:10px;
    font-weight:700;
    letter-spacing:.5px;

    color:#fff;

    background:rgba(0,0,0,.65);

    border-radius:30px;

    backdrop-filter:blur(4px);

    box-shadow:
        0 2px 6px rgba(0,0,0,.15);

    pointer-events:none;

    animation:adsPulse 2s infinite;

}

/* =========================================
   ADS BORDER EFFECT
========================================= */

.ads-zone .carousel,
.ads-zone .ad-item{

    position:relative;

    overflow:hidden;

    border-radius:12px;

    border:1px dashed rgba(255,140,0,.35);

}

/* glow */

.ads-zone .carousel::after{

    content:'';

    position:absolute;

    inset:0;

    border-radius:12px;

    box-shadow:
        inset 0 0 0 1px rgba(255,180,0,.15);

    pointer-events:none;

}

/* =========================================
   PULSE
========================================= */

@keyframes adsPulse{

    0%{
        opacity:.85;
        transform:scale(1);
    }

    50%{
        opacity:1;
        transform:scale(1.05);
    }

    100%{
        opacity:.85;
        transform:scale(1);
    }

}

/* =========================================
   HOVER EFFECT
========================================= */

.ads-zone img{

    transition:
        transform .45s ease,
        filter .45s ease;

}

.ads-zone:hover img{

    transform:scale(1.02);

    filter:brightness(1.03);

}

/* =========================================
   MOBILE
========================================= */

@media(max-width:768px){

    .ads-zone::before{

        font-size:9px;

        padding:2px 6px;

        top:6px;
        left:6px;

    }

}