body{
    font-family:Arial;
    background:#f5f5f5;
    margin:0;
}



.banner{
background:#ffffff;
color:#333;
text-align:center;
padding:25px 20px;   /* giảm khoảng trắng */
}


.title{
    text-align:center;
    margin:60px 0;

    font-size:42px;
    font-weight:900;
    letter-spacing:4px;
    text-transform:uppercase;

    font-family:"Segoe UI", Arial, sans-serif;

    background:linear-gradient(90deg,#ff0080,#ff8c00,#ff0080);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;

    text-shadow:
        0 0 15px rgba(255,0,120,0.5),
        0 0 30px rgba(255,0,120,0.3);

    animation: glowTitle 3s infinite alternate;
}

@keyframes glowTitle{
    from{filter:brightness(1);}
    to{filter:brightness(1.5);}
}

 .services{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:25px;
    padding:40px 20px;
}


.card{
    background:white;
    padding:20px;
    border-radius:15px;
    box-shadow:0 4px 15px rgba(0,0,0,0.2);
    text-align:center;
}

.card button{
    background:#ff0080;
    color:white;
    border:none;
    padding:10px 20px;
    border-radius:10px;
    cursor:pointer;
}

.cart{
    background: linear-gradient(145deg,#000,#111);
    color:#fff;   /* ⭐ DÒNG QUAN TRỌNG NHẤT */
    padding:30px;
    border-radius:20px;
    box-shadow:0 0 25px rgba(255,215,0,0.3);
    font-size:20px;
}
.cart hr{
    border:1px solid gold;
}

.cart b{
    color: gold;
    font-size:24px;
}


.booking{
    text-align:center;
    margin:30px;
}

.booking input{
    padding:10px;
    margin:5px;
}

.booking button{
    background:green;
    color:white;
    border:none;
    padding:12px 30px;
    border-radius:10px;
}
/* ===== BẢNG GIÁ DỊCH VỤ CON ===== */

.card-content p{
    display:flex;
    justify-content:space-between;
    align-items:center;
    background:#fff5fa;
    padding:10px 12px;
    border-radius:10px;
    margin:6px 0;
    font-size:14px;
    box-shadow:0 2px 8px rgba(0,0,0,0.08);
    transition:.3s;
}

.card-content p:hover{
    background:#ffe0ef;
    transform:scale(1.02);
}

.card-content p button{
    background:linear-gradient(45deg,#ff0080,#ff6ec7);
    border:none;
    color:white;
    padding:5px 12px;
    border-radius:8px;
    font-size:12px;
    cursor:pointer;
}

.card-content p button:hover{
    opacity:0.8;
}

/* TIÊU ĐỀ DANH MỤC */
.card-content h3{
    color:#ff0080;
    font-weight:bold;
}

/* NÚT XEM BẢNG GIÁ */
.card-content button{
    background:linear-gradient(45deg,#ff0080,#ff8c00);
    border:none;
    padding:8px 18px;
    border-radius:20px;
    color:white;
    cursor:pointer;
    margin-top:8px;
}
/* ===== CĂN CHỮ BẢNG GIÁ CHUẨN SALON ===== */

.card-content p{
    display:grid;
    grid-template-columns: 1fr auto auto;
    align-items:center;
    gap:10px;

    background:#fff5fa;
    padding:10px 12px;
    border-radius:10px;
    margin:6px 0;
    font-size:14px;
    box-shadow:0 2px 8px rgba(0,0,0,0.08);
}

/* TÊN DỊCH VỤ */
.service-name{
    text-align:left;
}

/* GIÁ TIỀN */
.service-price{
    font-weight:bold;
    color:#ff0080;
    min-width:90px;
    text-align:right;
}

/* NÚT CHỌN */
.card-content p button{
    background:linear-gradient(45deg,#ff0080,#ff6ec7);
    border:none;
    color:white;
    padding:5px 12px;
    border-radius:8px;
    cursor:pointer;
}
.logo{
font-family: 'Parisienne', cursive;
    font-size: 95px;
    letter-spacing: 4px;
    text-align: center;
    color: #ff2e8a;

/* gradient siêu đẹp */
background: linear-gradient(90deg,#ff0066,#ffcc00,#ff0066);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

/* glow neon */
text-shadow:
0 0 10px rgba(255,255,255,0.4),
0 0 20px rgba(255,0,120,0.7),
0 0 40px rgba(255,0,120,0.8);

/* hiệu ứng chuyển động */
animation: shine 3s linear infinite;
}

/* ánh sáng chạy */
@keyframes shine{
0%{filter:brightness(1);}
50%{filter:brightness(1.6);}
100%{filter:brightness(1);}
}
/* nền hồng tràn viền */
.top-header{
background: linear-gradient(180deg,#ffd6e8,#ffc0dc);
padding:20px 30px;

}

/* làm nền phía dưới chuyển trắng */
body{
background:#ffffff;
}

/* tạo khoảng cách đẹp giữa header và phần dưới */
.banner{
margin-top:60px;
}
/* reset khoảng trắng mặc định */
body{
margin:0;
background:#ffffff;
}

/* nền hồng tràn full */
.top-header{
background: linear-gradient(180deg,#ffd9ec,#ffc6e2);
padding:80px 20px;
text-align:center;
width:100%;
margin:0;
}
/* reset nền */
body{
margin:0;
background:#ffffff;
font-family:Arial;
}

/* nền hồng header tràn full */
.top-header{
background: linear-gradient(180deg,#ffe4f2,#ffc9e3);
padding:100px 20px;
text-align:center;
width:100%;
}

/* tạo khoảng cách đẹp */
.banner{
margin-top:60px;
}
.top-header{
background: linear-gradient(180deg,#ffe8f3,#ffd2ea);
padding:60px 0;      /* đều 2 bên + cao hơn */
width:100%;
text-align:center;
border-bottom:1px solid #ffc3df;
box-shadow:0 4px 20px rgba(0,0,0,0.08);
}

/* CHỮ TO RÕ */
.top-header h1{
font-size:1000px;
letter-spacing:6px;
margin:0;
}
.top-header{
background: linear-gradient(180deg,#ffe8f3,#ffd2ea);
padding:40px 20px;     /* giảm chiều cao */
width:100%;
text-align:center;

/* thêm viền sang */
border-bottom: 1px solid #ffc3df;

/* tạo chiều sâu */
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.top-header{
background: linear-gradient(180deg,#ffe8f3,#ffd2ea);
padding:35px 0;          /* đều 2 bên */
width:100%;
text-align:center;
border-bottom:1px solid #ffc3df;
box-shadow:0 4px 20px rgba(0,0,0,0.08);
}

/* CHỮ TO HƠN */
.top-header h1{
font-size:60px;          /* tăng to */
}
/* ===== BANNER PRO ===== */

.pro-banner{
display:flex;
align-items:center;
justify-content:center;
gap:40px;
position:relative;
}

/* chữ đẹp hơn */
.banner-text h2{
font-size:36px;
font-weight:900;
background:linear-gradient(45deg,#ff0080,#ff8c00);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
text-shadow:0 3px 10px rgba(255,0,120,0.3);
margin-bottom:10px;
}

.banner-text p{
font-size:18px;
font-weight:600;
color:#555;
}

/* ảnh 2 bên */
.side-img{
width:120px;
opacity:0.9;
}

.left{
transform:scaleX(-1);
}
.banner-img{
    width:16.6%;   /* 6 ảnh = vừa 100% */
    height:350px;
    object-fit:cover;
    border-radius:15px;
}
.pro-banner{
gap:10px;
}
.service-title{
    font-size:28px;
    font-weight:900;
    letter-spacing:2px;
    text-transform:uppercase;

    background:linear-gradient(45deg,#ff0080,#ff8c00);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;

    text-shadow:
        0 0 10px rgba(255,0,120,0.5),
        0 0 20px rgba(255,0,120,0.3);

    margin-bottom:15px;
}
.booking-pro{
    max-width:600px;
    margin:60px auto;
    background:linear-gradient(145deg,#fff,#ffe6f2);
    padding:40px;
    border-radius:25px;
    box-shadow:0 20px 60px rgba(0,0,0,0.2);
    text-align:center;
}

.booking-title{
    font-size:32px;
    color:#ff007f;
    margin-bottom:5px;
}

.booking-sub{
    color:#555;
    margin-bottom:25px;
}

.booking-form{
    display:flex;
    flex-direction:column;
    gap:18px;
}

.input-group{
    text-align:left;
}

.input-group label{
    font-weight:600;
    color:#444;
}

.input-group input{
    width:100%;
    padding:12px;
    border-radius:10px;
    border:1px solid #ddd;
    margin-top:6px;
    font-size:16px;
}

.input-row{
    display:flex;
    gap:15px;
}

.booking-btn{
    background:linear-gradient(45deg,#ff007f,#ff4da6);
    color:white;
    padding:15px;
    border:none;
    border-radius:50px;
    font-size:18px;
    font-weight:bold;
    cursor:pointer;
    transition:0.3s;
}

.booking-btn:hover{
    transform:scale(1.05);
    box-shadow:0 10px 30px rgba(255,0,120,0.5);
}

.booking-note{
    font-size:14px;
    color:#777;
}
/* ===== KHUNG ĐẶT LỊCH PRO VIP ===== */

.booking-card{
    width:420px;
    margin:40px auto;
    background:linear-gradient(135deg,#1a1a2e,#16213e);
    padding:35px;
    border-radius:20px;
    box-shadow:0 0 30px rgba(0,0,0,0.6);
    text-align:center;
    color:white;
}

.booking-header{
    font-size:24px;
    font-weight:700;
    margin-bottom:20px;
    color:#ffd700;
    text-shadow:0 0 10px rgba(255,215,0,0.6);
}

.booking-header p{
    font-size:15px;
    color:#ccc;
    margin-top:8px;
}

.booking-form input{
    margin:8px 0;
    width:100%;
    padding:14px;
    margin:10px 0;
    border:none;
    border-radius:12px;
    font-size:16px;
    background:#0f3460;
    color:white;
}

.booking-form input::placeholder{
    color:#bbb;
}

.booking-form button{
    width:100%;
    padding:15px;
    margin-top:15px;
    border:none;
    border-radius:15px;
    font-size:18px;
    font-weight:bold;
    cursor:pointer;
    background:linear-gradient(45deg,#ff0080,#ffcc00);
    color:black;
    transition:0.3s;
}

.booking-form button:hover{
    transform:scale(1.05);
    box-shadow:0 0 20px #ffcc00;
}
/* KHUNG GIỎ DỊCH VỤ VIP */
.cart{
    background: linear-gradient(145deg,#1a1a1a,#0f0f0f);
    border-radius: 18px;
    padding: 25px;
    margin: 20px auto;
    max-width: 700px;

    box-shadow:
        0 0 30px rgba(255,215,0,0.2),
        0 10px 30px rgba(0,0,0,0.7);

    border: 1px solid rgba(255,215,0,0.3);
}

/* TÊN DỊCH VỤ */
.cart div{
    font-size: 20px;
    padding: 12px 0;
    border-bottom: 1px dashed rgba(255,255,255,0.2);
    color: #ffffff !important;
}



/* DÒNG TỔNG TIỀN */
.cart strong{
   color: #ffd700 !important;
    display: block;
    font-size: 32px;
    text-align: right;
    margin-top: 15px;

    background: linear-gradient(45deg,#fff,#ffd700,#ffcc00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    text-shadow:
        0 0 10px rgba(255,215,0,0.7),
        0 0 20px rgba(255,215,0,0.4);
}