/*==================================================
    YAOYAO LUXURY NAIL STUDIO
    CLEAN PREMIUM CSS
    PART 1
==================================================*/


/*==================================================
 VARIABLES
==================================================*/

:root{

    --primary:#E91E63;
    --primary-dark:#c2185b;

    --pink-light:#FFF0F7;
    --pink-soft:#FFD8E8;

    --gold:#D4AF37;

    --dark:#222;
    --text:#555;
    --gray:#888;

    --white:#fff;
    --background:#FFF8FA;


    --radius:22px;

    --transition:.35s ease;


    --shadow:
    0 15px 35px rgba(0,0,0,.08);


    --shadow-hover:
    0 25px 50px rgba(233,30,99,.18);

}





/*==================================================
 RESET
==================================================*/


*,
*::before,
*::after{

    margin:0;
    padding:0;

    box-sizing:border-box;

}



html{

    scroll-behavior:smooth;

}



body{

    font-family:
    'Poppins',
    sans-serif;


    font-size:15px;


    line-height:1.7;


    color:var(--text);


    background:var(--background);


    overflow-x:hidden;


    padding-top:90px;

}




a{

    text-decoration:none;

    color:inherit;

    transition:var(--transition);

}




img{

    max-width:100%;

    height:auto;

    display:block;

}




ul{

    list-style:none;

    padding:0;

    margin:0;

}




.container{

    max-width:1320px;

}





section{

    padding:100px 0;

}






/*==================================================
 TYPOGRAPHY
==================================================*/


h1,
h2,
h3,
h4,
h5,
h6{


    font-family:
    "Playfair Display",
    serif;


    font-weight:700;


    color:var(--dark);


    line-height:1.3;

}




.section-title{


    font-size:42px;


    display:inline-block;


    position:relative;


    margin-bottom:20px;

}




.section-title::after{


    content:"";


    position:absolute;


    width:80px;


    height:4px;


    background:var(--primary);


    left:50%;


    bottom:-12px;


    transform:translateX(-50%);


    border-radius:20px;

}





.section-subtitle{


    max-width:650px;


    margin:0 auto 60px;


    color:var(--gray);


}







/*==================================================
 BUTTON
==================================================*/


.btn-main{


    display:inline-flex;


    align-items:center;


    justify-content:center;



    padding:14px 35px;


    border-radius:50px;



    background:var(--primary)!important;


    border:2px solid var(--primary)!important;


    color:white!important;



    font-weight:600;



    box-shadow:
    0 15px 30px rgba(233,30,99,.25);



    transition:var(--transition);

}





.btn-main:hover{


    background:var(--primary-dark)!important;


    border-color:var(--primary-dark)!important;


    transform:translateY(-4px);

}






.btn-outline-main{


    display:inline-flex;


    align-items:center;


    justify-content:center;



    padding:14px 35px;


    border-radius:50px;



    border:2px solid var(--primary);



    color:var(--primary);



    font-weight:600;



}



.btn-outline-main:hover{


    background:var(--primary);


    color:white;


}







/*==================================================
 NAVBAR
==================================================*/


.navbar{


    height:90px;


    position:fixed;


    top:0;


    left:0;


    width:100%;



    background:white;



    z-index:99999;



    box-shadow:
    0 8px 25px rgba(0,0,0,.06);



    transition:var(--transition);

}





.navbar.scrolled{


    height:75px;


    box-shadow:
    0 15px 35px rgba(0,0,0,.12);


}






/* LOGO */


.navbar-brand{


    display:flex;


    align-items:center;


}



.navbar-brand img{


    width:58px;


    height:58px;


    object-fit:contain;



    transition:var(--transition);

}





.navbar-brand:hover img{


    transform:
    rotate(-8deg)
    scale(1.08);


}




.logo-text{


    display:flex;


    flex-direction:column;


    line-height:1.1;


}




.logo-title{


    font-family:
    "Playfair Display",
    serif;



    font-size:30px;



    font-weight:700;



    color:var(--primary);



    letter-spacing:1px;


}





.logo-subtitle{


    font-size:11px;



    color:#888;



    text-transform:uppercase;



    letter-spacing:2px;


}







/* MENU */
/* =========================
   MENU
========================= */

.navbar-nav {
    gap: 3px;
}

.navbar-nav .nav-link {
    position: relative;

    padding: 12px 11px !important;

    color: #444 !important;

    font-weight: 500;

    white-space: nowrap;
}


/* GẠCH CHÂN */

.navbar-nav .nav-link::after {

    content: "";

    position: absolute;

    width: 0;

    height: 3px;

    background: var(--primary);

    left: 11px;

    bottom: 5px;

    border-radius: 20px;

    transition: var(--transition);
}


/* HOVER + ACTIVE */

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {

    color: var(--primary) !important;
}


/* HIỆU ỨNG GẠCH CHÂN */

.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link.active::after {

    width: calc(100% - 22px);

}


/* .navbar-nav{


    gap:8px;


}



.navbar-nav .nav-link{


    position:relative;



    padding:12px 15px!important;



    color:#444!important;



    font-weight:500;


}




.navbar-nav .nav-link::after{


    content:"";


    position:absolute;



    width:0;



    height:3px;



    background:var(--primary);



    left:15px;



    bottom:5px;



    border-radius:20px;



    transition:var(--transition);


}





.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active{


    color:var(--primary)!important;


}





.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link.active::after{


    width:calc(100% - 30px);


} */







/* MOBILE BUTTON */


.navbar-toggler{


    width:46px;


    height:46px;



    border:none;



    background:var(--pink-light);



    border-radius:12px;



    display:flex;



    justify-content:center;



    align-items:center;



}



.navbar-toggler i{


    color:var(--primary);


    font-size:22px;


}



.navbar-toggler:focus{


    box-shadow:none;


}


/* END PART 1 */
/*==================================================
    PART 2
    HERO + SERVICES + COUNTER
==================================================*/



/*==================================================
 HERO SECTION
==================================================*/


.hero{


    position:relative;


    min-height:100vh;


    display:flex;


    align-items:center;



    overflow:hidden;



    background:
    linear-gradient(
        135deg,
        #fff5fa,
        #ffe8f2
    );


}




.hero::before{


    content:"";


    position:absolute;


    inset:0;



    background:
    radial-gradient(
        circle at top right,
        rgba(233,30,99,.12),
        transparent 40%
    );


}




.hero .container{


    position:relative;


    z-index:5;


}







.hero-sub{


    color:var(--primary);



    font-size:14px;



    font-weight:600;



    letter-spacing:3px;



    text-transform:uppercase;



    margin-bottom:20px;


}





.hero-title{


    font-size:65px;



    line-height:1.15;



    margin-bottom:25px;



}




.hero-title span{


    color:var(--primary);


}





.hero-text{


    max-width:600px;



    font-size:17px;



    color:#666;



    line-height:1.9;



    margin-bottom:35px;


}







.hero-btn{


    display:flex;



    gap:20px;



    flex-wrap:wrap;


}






/* HERO IMAGE */


.hero-image{


    position:relative;


}




.hero-image img{


    border-radius:35px;



    box-shadow:


    0 25px 60px rgba(0,0,0,.18);



    transition:.5s;


}



.hero-image:hover img{


    transform:translateY(-10px);


}






/* FLOAT CARD */


.hero-card{


    position:absolute;



    left:-40px;



    bottom:30px;



    background:white;



    padding:22px 30px;



    border-radius:22px;



    box-shadow:var(--shadow);



    animation:
    floating 3s infinite;


}





.hero-card h5{


    margin:0;


}



.hero-card small{


    color:#888;


}





@keyframes floating{


    50%{


        transform:translateY(-12px);


    }


}







/* HERO DECOR */


.hero-shape-1{


    position:absolute;



    width:350px;



    height:350px;



    right:-120px;



    top:-120px;



    border-radius:50%;



    background:var(--pink-soft);



    opacity:.5;


}



.hero-shape-2{


    position:absolute;



    width:180px;



    height:180px;



    left:-60px;



    bottom:50px;



    border-radius:50%;



    background:#ffeaf3;


}






.scroll-down{


    position:absolute;



    bottom:30px;



    left:50%;



    transform:translateX(-50%);



    color:var(--primary);



    animation:
    scrollMove 2s infinite;


}




@keyframes scrollMove{


    50%{


        transform:
        translate(-50%,10px);


    }


}









/*==================================================
 SERVICES
==================================================*/



.service-item{


    position:relative;



    height:100%;



    background:white;



    padding:40px 30px;



    text-align:center;



    border-radius:25px;



    overflow:hidden;



    box-shadow:var(--shadow);



    transition:var(--transition);


}





.service-item::before{


    content:"";



    position:absolute;



    top:0;



    left:0;



    width:100%;



    height:5px;



    background:


    linear-gradient(
        90deg,
        var(--primary),
        #ff8bc5
    );



    transform:scaleX(0);



    transition:.35s;


}





.service-item:hover::before{


    transform:scaleX(1);


}




.service-item:hover{


    transform:translateY(-12px);



    box-shadow:var(--shadow-hover);


}







.service-icon{


    width:95px;



    height:95px;



    margin:0 auto 25px;



    border-radius:50%;



    background:var(--pink-light);



    color:var(--primary);



    display:flex;



    justify-content:center;



    align-items:center;



    font-size:40px;



    transition:.5s;


}





.service-item:hover .service-icon{


    background:var(--primary);



    color:white;



    transform:
    rotateY(180deg);


}







.service-item h4{


    margin-bottom:15px;


}





.service-item p{


    color:#777;



    line-height:1.8;


}





/* 
.service-price{


    margin-top:20px;



    font-size:22px;



    font-weight:700;



    color:var(--primary);


} */









/*==================================================
 COUNTER SECTION
==================================================*/


.counter-area{


    background:white;


}




.counter-item{


    text-align:center;



    padding:40px 20px;


}





.counter-icon{


    width:90px;



    height:90px;



    margin:0 auto 20px;



    border-radius:50%;



    display:flex;



    justify-content:center;



    align-items:center;



    background:var(--pink-light);



    color:var(--primary);



    font-size:38px;


}





.counter-number{


    font-family:
    "Playfair Display",
    serif;



    font-size:52px;



    font-weight:700;



    color:var(--primary);


}




.counter-text{


    margin-top:10px;



    color:#777;


}





/*==================================================
 TESTIMONIAL BASIC
==================================================*/


.testimonial{


    background:#FFF8FA;


}



.testimonial-item{


    background:white;



    height:100%;



    padding:35px;



    border-radius:22px;



    box-shadow:var(--shadow);



    transition:.35s;


}




.testimonial-item:hover{


    transform:translateY(-8px);


}





.testimonial-rating{


    color:#FFC107;


    margin-bottom:15px;


}




.testimonial-item p{


    color:#666;



    line-height:1.8;


}




.testimonial-name{


    margin-top:20px;



    font-weight:700;


}





.testimonial-job{


    font-size:14px;



    color:#999;


}

/*==================================================
    PART 3
    GALLERY + PROMOTION + BOOKING
    INSTAGRAM + NEWSLETTER
==================================================*/





/*==================================================
 GALLERY
==================================================*/


.gallery{


    background:white;


}





.gallery-filter{


    display:flex;



    justify-content:center;



    align-items:center;



    flex-wrap:wrap;



    gap:15px;



    margin-bottom:60px;


}






.gallery-filter button{


    border:none;



    padding:12px 30px;



    border-radius:50px;



    background:white;



    font-weight:600;



    color:#555;



    box-shadow:
    0 8px 20px rgba(0,0,0,.06);



    transition:var(--transition);


}





.gallery-filter button:hover,
.gallery-filter button.active{


    background:var(--primary);



    color:white;


}






.gallery-item{


    position:relative;



    overflow:hidden;



    border-radius:24px;



    margin-bottom:30px;


}





.gallery-item img{


    width:100%;



    transition:.5s;



}





.gallery-item:hover img{


    transform:scale(1.12);


}






.gallery-overlay{


    position:absolute;



    inset:0;



    background:
    rgba(233,30,99,.65);



    display:flex;



    justify-content:center;



    align-items:center;



    opacity:0;



    transition:.35s;


}





.gallery-item:hover .gallery-overlay{


    opacity:1;


}





.gallery-overlay i{


    width:70px;



    height:70px;



    border-radius:50%;



    background:white;



    color:var(--primary);



    font-size:28px;



    display:flex;



    justify-content:center;



    align-items:center;



}









/*==================================================
 PROMOTION
==================================================*/


.promotion{


    position:relative;



    overflow:hidden;



    padding:80px;



    border-radius:35px;



    color:white;



    background:


    linear-gradient(
        135deg,
        var(--primary),
        #ff8fc4
    );


}




.promotion::before{


    content:"";



    position:absolute;



    width:300px;



    height:300px;



    right:-100px;



    top:-100px;



    border-radius:50%;



    background:
    rgba(255,255,255,.15);



}





.promotion h2{


    position:relative;



    color:white;



    font-size:48px;



}




.promotion p{


    position:relative;



    color:white;


}





.promotion .btn-main{


    background:white!important;



    color:var(--primary)!important;



    border-color:white!important;



}





.promotion .btn-main:hover{


    background:#222!important;



    color:white!important;


}









/*==================================================
 BOOKING
==================================================*/


.booking{


    background:white;


}






.booking-box{


    background:white;



    padding:45px;



    border-radius:25px;



    box-shadow:var(--shadow);



}





.booking-box .form-control,
.booking-box .form-select{


    height:55px;



    border-radius:14px;



    border:1px solid #eee;



    box-shadow:none;


}





.booking-box textarea{


    min-height:140px;



    resize:none;



    border-radius:14px;


}





.booking-box .form-control:focus,
.booking-box .form-select:focus{


    border-color:var(--primary);



    box-shadow:
    0 0 0 .25rem rgba(233,30,99,.15);


}








/*==================================================
 INSTAGRAM
==================================================*/


.instagram-item{


    position:relative;



    overflow:hidden;



    border-radius:22px;


}





.instagram-item img{


    transition:.5s;


}





.instagram-item:hover img{


    transform:scale(1.1);


}







.instagram-overlay{


    position:absolute;



    inset:0;



    display:flex;



    justify-content:center;



    align-items:center;



    background:
    rgba(233,30,99,.75);



    opacity:0;



    transition:.35s;


}





.instagram-item:hover .instagram-overlay{


    opacity:1;


}





.instagram-overlay i{


    color:white;



    font-size:35px;


}









/*==================================================
 NEWSLETTER
==================================================*/


.newsletter{


    padding:70px;



    border-radius:35px;



    background:


    linear-gradient(
        135deg,
        var(--primary),
        #ff79b9
    );



    color:white;


}





.newsletter h2{


    color:white;



    font-size:42px;


}





.newsletter p{


    color:white;



    opacity:.95;


}







.newsletter .form-control{


    height:60px;



    border:none;



    border-radius:50px;



    padding-left:25px;



}





.newsletter .btn{


    height:60px;



    padding:0 35px;



    border-radius:50px;



    background:#222;



    color:white;



    font-weight:600;


}





.newsletter .btn:hover{


    background:white;



    color:var(--primary);


}








/*==================================================
 IMAGE HOVER GLOBAL
==================================================*/


.img-hover{


    overflow:hidden;



    border-radius:22px;


}




.img-hover img{


    transition:.5s;


}





.img-hover:hover img{


    transform:scale(1.08);


}








/*==================================================
 TEAM
==================================================*/


.team-item{


    overflow:hidden;



    background:white;



    border-radius:25px;



    box-shadow:var(--shadow);



    transition:.35s;


}





.team-item:hover{


    transform:translateY(-10px);



    box-shadow:var(--shadow-hover);


}





.team-img{


    overflow:hidden;


}





.team-img img{


    transition:.45s;


}





.team-item:hover img{


    transform:scale(1.08);


}





.team-content{


    padding:25px;



    text-align:center;


}





.team-content span{


    color:#888;


}

/*==================================================
    PART 4
    FOOTER + FLOATING + RESPONSIVE
==================================================*/





/*==================================================
 FOOTER
==================================================*/


.footer{


    background:#181818;



    color:#ddd;



    padding-top:90px;


}





.footer-logo{


    font-family:
    "Playfair Display",
    serif;



    font-size:36px;



    color:white;


}





.footer h5{


    color:white;



    font-size:20px;



    margin-bottom:25px;


}





.footer p{


    color:#bbb;



    line-height:1.8;


}





.footer ul li{


    margin-bottom:12px;


}





.footer ul li a{


    color:#bbb;



    transition:.3s;


}





.footer ul li a:hover{


    color:var(--primary);



    padding-left:6px;


}







.footer-contact li{


    display:flex;



    align-items:center;



    gap:12px;



    margin-bottom:18px;


}





.footer-contact i{


    color:var(--primary);


}








/* SOCIAL */


.footer-social{


    display:flex;



    gap:12px;



    margin-top:25px;


}





.footer-social a{


    width:42px;



    height:42px;



    border-radius:50%;



    background:#2c2c2c;



    color:white;



    display:flex;



    align-items:center;



    justify-content:center;



    transition:.3s;


}





.footer-social a:hover{


    background:var(--primary);



    transform:translateY(-5px);


}








.footer-bottom{


    margin-top:60px;



    padding:25px 0;



    border-top:


    1px solid rgba(255,255,255,.1);



    text-align:center;



    color:#999;


}









/*==================================================
 FLOATING CONTACT
==================================================*/


.floating-contact{


    position:fixed;



    right:25px;



    bottom:100px;



    z-index:999;



    display:flex;



    flex-direction:column;



    gap:15px;


}





.floating-contact a{


    width:58px;



    height:58px;



    border-radius:50%;



    background:var(--primary);



    color:white;



    display:flex;



    justify-content:center;



    align-items:center;



    font-size:22px;



    box-shadow:
    0 10px 25px rgba(0,0,0,.2);



    transition:.35s;


}





.floating-contact a:hover{


    transform:translateY(-6px);



    background:var(--primary-dark);


}









/*==================================================
 BACK TO TOP
==================================================*/


#backTop{


    position:fixed;



    right:25px;



    bottom:25px;



    width:55px;



    height:55px;



    border-radius:50%;



    background:#222;



    color:white;



    display:none;



    justify-content:center;



    align-items:center;



    cursor:pointer;



    z-index:999;



    transition:.35s;


}





#backTop:hover{


    background:var(--primary);



    transform:translateY(-5px);


}









/*==================================================
 LOADING SCREEN
==================================================*/


#loader{


    position:fixed;



    inset:0;



    background:white;



    z-index:999999;



    display:flex;



    flex-direction:column;



    justify-content:center;



    align-items:center;


}





.loader-logo{


    width:95px;



    height:95px;



    border-radius:50%;



    border:5px solid var(--pink-soft);



    border-top-color:var(--primary);



    animation:
    spin 1s linear infinite;


}





.loader-text{


    margin-top:25px;



    font-size:28px;



    font-family:
    "Playfair Display",
    serif;



    color:var(--primary);



    letter-spacing:2px;


}





@keyframes spin{


    from{


        transform:rotate(0);


    }


    to{


        transform:rotate(360deg);


    }


}









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


#progress-bar{


    position:fixed;



    top:0;



    left:0;



    width:0;



    height:4px;



    background:


    linear-gradient(
        90deg,
        var(--primary),
        #ff8ac3
    );



    z-index:999999;


}








/*==================================================
 SCROLLBAR
==================================================*/


::-webkit-scrollbar{


    width:9px;


}





::-webkit-scrollbar-track{


    background:#eee;


}





::-webkit-scrollbar-thumb{


    background:var(--primary);



    border-radius:30px;


}








/*==================================================
 ANIMATION
==================================================*/


.fade-up{


    animation:
    fadeUp .8s ease forwards;


}





@keyframes fadeUp{


    from{


        opacity:0;



        transform:translateY(30px);


    }



    to{


        opacity:1;



        transform:translateY(0);


    }


}








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


@media(max-width:1200px){


    .hero-title{


        font-size:55px;


    }


}








/*==================================================
 MOBILE NAVBAR + CONTENT
==================================================*/


@media(max-width:991.98px){



    body{


        padding-top:75px;


    }




    section{


        padding:80px 0;


    }






    /* NAVBAR */


    .navbar{


        height:75px;


    }





    .navbar-brand img{


        width:46px;



        height:46px;


    }





    .logo-title{


        font-size:24px;


    }





    .logo-subtitle{


        font-size:9px;


    }







    .navbar-collapse{


        position:fixed;



        top:75px;



        left:15px;



        right:15px;



        padding:20px;



        background:white;



        border-radius:22px;



        box-shadow:
        0 20px 50px rgba(0,0,0,.18);


    }





    .navbar-nav{


        gap:5px;


    }






    .navbar-nav .nav-link{


        height:52px;



        display:flex;



        align-items:center;



        padding:0 18px!important;



        border-radius:14px;


    }





    .navbar-nav .nav-link::after{


        display:none;


    }





    .navbar-nav .nav-link:hover,
    .navbar-nav .nav-link.active{


        background:var(--pink-light);



        color:var(--primary)!important;


    }





    .navbar-nav .btn{


        width:100%;



        justify-content:center;



        margin-top:10px;


    }







    /* HERO */


    .hero{


        min-height:auto;



        padding:120px 0 80px;



        text-align:center;


    }





    .hero-title{


        font-size:45px;


    }





    .hero-text{


        margin:auto;



        font-size:15px;


    }





    .hero-btn{


        justify-content:center;


    }





    .hero-image{


        margin-top:60px;


    }





    .hero-card{


        position:relative;



        left:auto;



        bottom:auto;



        display:inline-block;



        margin-top:25px;


    }






    /* PROMOTION */


    .promotion,
    .newsletter{


        padding:50px 30px;



        text-align:center;


    }





}









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


@media(max-width:576px){



    .section-title{


        font-size:32px;


    }





    .hero-title{


        font-size:36px;


    }





    .promotion h2,
    .newsletter h2{


        font-size:32px;


    }





    .booking-box{


        padding:25px;


    }





    .floating-contact{


        right:15px;


    }





    .floating-contact a{


        width:52px;



        height:52px;


    }





    #backTop{


        right:15px;



        width:50px;



        height:50px;


    }



}


/* ==========================
   NAVBAR TOGGLER FINAL
========================== */

.navbar-toggler{
    width:46px;
    height:46px;
    border:none;
    border-radius:12px;
    background:#fff0f7;
    display:flex;
    align-items:center;
    justify-content:center;
}


.navbar-toggler:focus{
    box-shadow:none;
}


.navbar-toggler .menu-icon{
    color:#E91E63;
    font-size:22px;
}


/* MOBILE: HIỆN */
@media(max-width:991.98px){

    .navbar-toggler{
        display:flex!important;
    }

}


/* DESKTOP: ẨN */
@media(min-width:992px){

    .navbar-toggler{
        display:none!important;
    }

}

.about-card{

    position:absolute;

    left:-40px;

    bottom:30px;

    background:white;

    padding:22px 30px;

    border-radius:22px;

    box-shadow:var(--shadow);

    animation:floating 3s infinite;

    z-index:1;


}

.about-card h5{
    margin:0;
}

.about-card small{
    color:#888;
}

/* Trang ban gia */
/*=========================
    PRICING
==========================*/

.pricing-card{

    padding:35px;

}

.pricing-header{

    text-align:center;

    margin-bottom:30px;

    padding-bottom:20px;

    border-bottom:1px dashed #f1c5d8;

}

.pricing-header i{

    font-size:42px;

    color:var(--primary);

    margin-bottom:15px;

}

.pricing-header h3{

    font-family:"Playfair Display",serif;

    margin:0;

    font-size:30px;

}

/*BAng gia*/
/* =========================================================
   BẢNG GIÁ
========================================================= */

.price-item {
    display: flex;

    align-items: flex-start;

    width: 100%;

    margin: 10px 0;

    box-sizing: border-box;
}


/* TÊN DỊCH VỤ */

.service-name {
    flex: 0 1 auto;

    min-width: 0;

    font-weight: 500;

    line-height: 1.5;

    white-space: normal;

    overflow-wrap: break-word;
}


/* ĐƯỜNG CHẤM */

.price-line {
    flex: 1 1 auto;

    min-width: 15px;

    border-bottom: 1px dashed #ddd;

    margin: 0 10px;

    margin-top: 11px;
}


/* GIÁ */

.service-price {
    flex: 0 0 auto;

    color: var(--primary);

    font-weight: 700;

    white-space: nowrap;

    font-size: 18px;

    line-height: 1.5;

    margin: 0;

    text-align: right;
}

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

@media (max-width: 767px) {

    .price-item {
        display: flex;

        align-items: flex-start;

        width: 100%;

        margin: 11px 0;

        box-sizing: border-box;
    }


    .service-name {
        /*
         * Cho phép tên dịch vụ xuống dòng
         */
        flex: 0 1 auto;

        min-width: 0;

        max-width: 55%;

        font-size: 14px;

        line-height: 1.45;

        white-space: normal;

        overflow-wrap: break-word;
    }


    .price-line {
        flex: 1 1 auto;

        min-width: 10px;

        margin-left: 7px;

        margin-right: 7px;

        /*
         * Đường chấm nằm cùng dòng đầu tiên
         */
        margin-top: 10px;
    }


    .service-price {
        flex: 0 0 auto;

        font-size: 14px;

        line-height: 1.45;

        white-space: nowrap;

        text-align: right;

        margin: 0;
    }
}
@media (max-width: 400px) {

    .service-name {
        max-width: 52%;

        font-size: 13px;
    }

    .price-line {
        margin-left: 5px;
        margin-right: 5px;
    }

    .service-price {
        font-size: 13px;
    }
}


/* section chung */
.section-sm{
    padding:10px 0;
}

.section-md{
    padding:30px 0;
}

.section-lg{
    padding:70px 0;
}

.page-header{
    padding-top:30px;   /* chừa chỗ cho navbar */
    padding-bottom:20px;
}


/*phan ghi chu trong bang gia*/
.pricing-gift{
    margin-top:20px;
    padding:14px 18px;
    border-radius:15px;
    background:linear-gradient(135deg,#fff4d6,#fff9eb);
    border:1px solid #ffe08a;

    display:flex;
    align-items:flex-start;
    gap:14px;
}

.gift-icon{
    width:46px;
    height:46px;
    border-radius:50%;
    background:#ffc107;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
    flex-shrink:0;
}

.gift-title{
    display:block;
    font-weight:700;
    color:#d48806;
    margin-bottom:4px;
    font-size:15px;
}

.gift-content p{
    margin:0;
    color:#e91e63;
    font-size:14px;
    line-height:1.6;
}


/*mau nail*/
/*============================
NAIL GALLERY
=============================*/

.nail-card{

    background:#fff;

    border-radius:18px;

    overflow:hidden;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

    transition:.35s;

}

.nail-card:hover{

    transform:translateY(-8px);

}

.nail-image{

    position:relative;

    overflow:hidden;

}

.nail-image img{

    width:100%;

    height:210px;

    object-fit:cover;

    transition:.5s;

}

.nail-card:hover img{

    transform:scale(1.08);

}

.nail-overlay{

    position:absolute;

    inset:0;

    background:rgba(233,30,99,.45);

    display:flex;

    justify-content:center;

    align-items:center;

    opacity:0;

    transition:.35s;

}

.nail-card:hover .nail-overlay{

    opacity:1;

}

.btn-view{

    width:60px;

    height:60px;

    border-radius:50%;

    background:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    color:var(--primary);

    font-size:22px;

}

.btn-view:hover{

    background:var(--primary);

    color:#fff;

}

.nail-content{

    padding:18px;

    text-align:center;

}

.nail-content h5{

    margin-bottom:8px;

    font-size:18px;

    font-weight:600;

}

.nail-category{

    display:inline-block;

    background:#fff1f6;

    color:var(--primary);

    padding:6px 16px;

    border-radius:30px;

    font-size:13px;

    font-weight:600;

}

@media(max-width:768px){

.nail-image img{

    height:220px;

}

.nail-content{

    padding:12px;

}

.nail-content h5{

    font-size:15px;

}

}
.gallery-row{
    --bs-gutter-y: 0;
}
/*end mau nail*/

/*hot nail*/
.hot-title{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:18px;
    margin-bottom:45px;
}

.hot-title span{
    flex:1;
    max-width:120px;
    height:2px;
    background:linear-gradient(to right,
        transparent,
        var(--primary),
        transparent);
}

.hot-title h2{
    margin:0;
    font-size:34px;
    font-family:"Playfair Display",serif;
    color:#222;
}
/*end hot nail*/

/*=========================
ALBUM
=========================*/

.album-card{

overflow:hidden;

transition:.35s;

cursor:pointer;

}

.album-image{

position:relative;

overflow:hidden;

height:280px;

}

.album-image img{

width:100%;

height:100%;

object-fit:cover;

transition:.5s;

}

.album-card:hover img{

transform:scale(1.08);

}

.album-overlay{

position:absolute;

left:0;

top:0;

width:100%;

height:100%;

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

display:flex;

align-items:center;

justify-content:center;

opacity:0;

transition:.35s;

}

.album-card:hover .album-overlay{

opacity:1;

}

.album-overlay span{

background:#fff;

padding:12px 25px;

border-radius:50px;

font-weight:600;

color:var(--primary);

}

.album-content{

padding:25px;

}

.album-content h4{

font-family:"Playfair Display",serif;

margin-bottom:10px;

color:#222;

}

.album-content p{

color:#777;

margin-bottom:20px;

min-height:45px;

}

.album-footer{

display:flex;

justify-content:space-between;

align-items:center;

font-size:14px;

color:#888;

}



/*dich vụ*//* Card */
.service-card{
    border-radius:20px;
}

.service-body{
    padding:28px;
}

/* Tiêu đề */
.service-body h4{
    margin:18px 0 12px;
    text-align:center;
    font-family:"Playfair Display",serif;
}

/* Mô tả */
.service-body p{
    text-align:center;
    color:#666;
    line-height:1.7;
    min-height:72px;
    margin-bottom:24px;
}

/* Danh sách */
.service-list{
    display:flex;
    flex-direction:column;
    gap:12px;
    margin-top:28px;
}

/* Item */
.service-item{
    display:flex;
    align-items:center;
    padding:12px 16px;
    border:1px solid #f2e5eb;
    border-radius:14px;
    background:#fff;
    transition:.3s;
}

.service-item:hover{
    transform:translateX(6px);
    border-color:var(--primary);
    box-shadow:0 8px 18px rgba(233,30,99,.08);
}

/* Icon */
.service-item i{
    width:30px;
    height:30px;
    border-radius:50%;
    background:rgba(233,30,99,.12);
    color:var(--primary);
    display:flex;
    align-items:center;
    justify-content:center;
    margin-right:12px;
    font-size:13px;
    flex-shrink:0;
}

/* Text */
.service-item span{
    font-size:15px;
    font-weight:500;
    color:#444;
}

/* Ghi chú */
.service-note{
    margin-top:24px;
    padding:14px 16px;
    border-radius:14px;
    background:linear-gradient(135deg,#fff7fa,#fff);
    border-left:4px solid var(--primary);
    font-size:14px;
    color:#666;
    line-height:1.7;
}

.service-note i{
    color:var(--primary);
    margin-right:8px;
}

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

@media(max-width:991px){

    .service-list{

        grid-template-columns:1fr;

    }

}
/*end dich vu*/

/*lien he*/
/*==========================
CONTACT
==========================*/

.contact-card{

    background:#fff;

    border-radius:20px;

    padding:35px 25px;

    text-align:center;

    display:block;

    color:#333;

    box-shadow:0 10px 30px rgba(0,0,0,.05);

    transition:.35s;

    height:100%;

}

.contact-card:hover{

    transform:translateY(-8px);

    color:inherit;

    box-shadow:0 18px 40px rgba(0,0,0,.08);

}

.contact-icon{

    width:80px;

    height:80px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:auto auto 20px;

    font-size:32px;

    color:#fff;

}

.phone{
    background:#E91E63;
}

.zalo{
    background:#0A88FF;
}

.email{
    background:#ff5b5b;
}

.facebook{
    background:#1877F2;
}

.contact-card h4{

    font-size:22px;

    margin-bottom:10px;

    font-family:"Playfair Display",serif;

}

.contact-card p{

    color:#777;

    margin-bottom:10px;

}

.contact-card span{

    color:var(--primary);

    font-weight:600;

}

.contact-icon.tiktok{

    background:linear-gradient(135deg,#25F4EE,#111,#FE2C55);

    color:#fff;

}
.contact-card:hover .contact-icon.tiktok{

    background:#000;

    transform:rotate(-10deg) scale(1.08);

}

/*==========================
INFO
==========================*/

.contact-info{

    display:flex;

    flex-direction:column;

    gap:22px;

}

.info-item{

    display:flex;

    align-items:flex-start;

}

.info-item i{

    width:55px;

    height:55px;

    background:#FFF2F7;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    color:var(--primary);

    margin-right:18px;

    font-size:20px;

    flex-shrink:0;

}

.info-item strong{

    display:block;

    margin-bottom:5px;

}


/*==========================
MAP
==========================*/

.map-box{

    overflow:hidden;

    border-radius:20px;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

}
/*end lien he*/

/*Booking*/
/*==========================
BOOKING
==========================*/

.booking-card{

    padding:0 45px 45px 45px;

}

.booking-card label{

    font-weight:600;

    color:#444;

    margin-bottom:8px;

}

.booking-card input,
.booking-card select,
.booking-card textarea{

    border-radius:12px;

    border:1px solid #e6e6e6;

    min-height:48px;

}

.booking-card textarea{

    min-height:150px;

    resize:none;

}

.booking-card input:focus,
.booking-card select:focus,
.booking-card textarea:focus{

    border-color:var(--primary);

    box-shadow:0 0 0 .2rem rgba(233,30,99,.15);

}

.booking-card button{

    min-width:220px;

}
.booking-info{

    background:#fff7fa;

    border-left:5px solid var(--primary);

    padding:18px 22px;

    border-radius:12px;

    margin-bottom:30px;

}

.booking-info h4{

    margin-bottom:10px;

    font-size:22px;

}
.captcha{
    margin-bottom:15px;
}

.captcha img{
    border:1px solid #eee;
    border-radius:10px;
    padding:8px;
    background:#fff;
    margin-bottom:10px;
}

/* .captcha input{
    width:220px;
} */
.captcha-wrapper img{
    height:60px;
    width:auto;
    border-radius:8px;
    border:1px solid #ddd;
    margin-bottom:10px;
}

.captcha-wrapper input{
    width:220px;
    height:45px;
    font-size:18px;
}
.alert-success{
    background:#f0fff4;
    border:1px solid #b7ebc6;
    color:#198754;
    padding:18px;
    font-size:17px;
    border-radius:15px;
}
/*end booking*/
/**xam card/
/* =====================================================
   PHUN XĂM THẨM MỸ - XAM CARD
===================================================== */

.xam-card {
    position: relative;
    overflow: hidden;

    width: 100%;

    background: #fff;

    border-radius: 18px;

    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.07);

    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease;
}


/* =====================================================
   HOVER CARD
===================================================== */

.xam-card:hover {
    transform: translateY(-6px);

    box-shadow:
        0 15px 35px rgba(157, 63, 98, 0.15);
}


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

.xam-image {
    position: relative;

    width: 100%;

    aspect-ratio: 4 / 5;

    overflow: hidden;

    background: #f8f3f5;
}


.xam-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform 0.6s ease;
}


/* Zoom hình khi hover */

.xam-card:hover .xam-image img {
    transform: scale(1.06);
}


/* =====================================================
   OVERLAY
===================================================== */

.xam-overlay {
    position: absolute;

    inset: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    background: rgba(30, 20, 25, 0.18);

    opacity: 0;

    transition: opacity 0.35s ease;
}


/* Hiện overlay */

.xam-card:hover .xam-overlay {
    opacity: 1;
}


/* =====================================================
   BUTTON XEM HÌNH
===================================================== */

.xam-btn-view {
    width: 52px;
    height: 52px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.96);

    color: var(--primary);

    text-decoration: none;

    font-size: 18px;

    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.15);

    transform: scale(0.7);

    transition:
        transform 0.35s ease,
        background 0.35s ease,
        color 0.35s ease;
}


/* Nút xuất hiện */

.xam-card:hover .xam-btn-view {
    transform: scale(1);
}


/* Hover nút */

.xam-btn-view:hover {
    background: var(--primary);

    color: #fff;

    transform: scale(1.08) !important;
}


/* =====================================================
   PHẦN TÊN - LUÔN NẰM DƯỚI HÌNH
===================================================== */

.xam-content {
    position: relative;

    width: 100%;

    min-height: 65px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 16px 12px 14px;

    background: #fff;

    text-align: center;

    border-top: 1px solid #f3e4e9;

    box-sizing: border-box;

    transition: background 0.3s ease;
}


/* =====================================================
   THANH TRANG TRÍ
===================================================== */

.xam-content::before {
    content: "";

    position: absolute;

    top: 0;
    left: 50%;

    transform: translateX(-50%);

    width: 45px;
    height: 3px;

    background: #9d3f62;

    border-radius: 0 0 10px 10px;

    transition: width 0.3s ease;
}


/* =====================================================
   TÊN PHUN XĂM
===================================================== */

.xam-category {
    display: block;

    width: 100%;

    margin: 0;

    padding: 0;

    color: #9d3f62;

    font-size: 15px;

    font-weight: 700;

    text-align: center;

    text-transform: uppercase;

    letter-spacing: 1px;

    line-height: 1.45;

    word-break: normal;

    overflow-wrap: break-word;

    transition:
        color 0.3s ease,
        letter-spacing 0.3s ease;
}


/* =====================================================
   HOVER TÊN
===================================================== */

.xam-card:hover .xam-category {
    color: var(--primary);

    letter-spacing: 1.2px;
}


/* Thanh trang trí dài hơn khi hover */

.xam-card:hover .xam-content::before {
    width: 70px;
}


/* =====================================================
   HOVER PHẦN TÊN
===================================================== */

.xam-card:hover .xam-content {
    background: #fffafb;
}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 991px) {

    .xam-card {
        border-radius: 16px;
    }

    .xam-content {
        min-height: 62px;

        padding: 14px 10px 13px;
    }

    .xam-category {
        font-size: 14px;

        letter-spacing: 0.9px;
    }

}


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

@media (max-width: 576px) {

    .xam-card {
        border-radius: 14px;

        box-shadow:
            0 5px 18px rgba(0, 0, 0, 0.06);
    }


    .xam-image {
        aspect-ratio: 4 / 5;
    }


    .xam-content {
        min-height: 55px;

        padding: 12px 7px 13px;
    }


    .xam-content::before {
        width: 35px;
    }


    .xam-category {
        font-size: 12px;

        letter-spacing: 0.7px;

        line-height: 1.4;
    }


    .xam-card:hover .xam-category {
        letter-spacing: 0.8px;
    }


    .xam-card:hover .xam-content::before {
        width: 55px;
    }


    .xam-btn-view {
        width: 45px;
        height: 45px;

        font-size: 16px;
    }

}


/* =====================================================
   MOBILE NHỎ
===================================================== */

@media (max-width: 400px) {

    .xam-content {
        min-height: 52px;

        padding: 10px 5px 11px;
    }


    .xam-category {
        font-size: 11px;

        letter-spacing: 0.5px;
    }

}
/*end xam card*/