body{

    background: #f5f5f5;

    font-family: Arial, Helvetica, sans-serif;
}

/* Navbar */

.navbar-brand{

    font-size: 28px;
}

/* Banner */

.product-banner{

    background-image: url('https://images.unsplash.com/photo-1525966222134-fcfa99b8ae77?q=80&w=1400');

    background-size: cover;

    background-position: center;

    height: 400px;

    position: relative;
}

.overlay{

    background: rgba(0,0,0,0.5);

    width: 100%;

    height: 100%;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    color: white;

    text-align: center;
}

.overlay h1{

    font-size: 60px;

    font-weight: bold;
}

.overlay p{

    font-size: 20px;
}

/* Product Card */

.product-card{

    border: none;

    border-radius: 15px;

    overflow: hidden;

    background: white;

    transition: 0.3s;

    box-shadow: 0 5px 15px rgba(0,0,0,0.1);

    height: 100%;
}

.product-card:hover{

    transform: translateY(-10px);
}

/* Image Box */

.img-box{

    width: 100%;

    height: 250px;

    overflow: hidden;

    background: #eee;
}

/* Product Image */

.shoe-img{

    width: 100%;

    height: 250px;

    object-fit: contain;

    background: white;

    padding: 15px;
}

/* Card Body */

.card-body{

    padding: 20px;
}

/* Price */

.price{

    color: red;

    font-size: 22px;

    font-weight: bold;
}

/* Button */

.btn-dark{

    border-radius: 10px;
}

/* Badge */

.hot-badge{

    position: absolute;

    top: 15px;

    left: 15px;

    z-index: 10;

    padding: 8px 12px;

    border-radius: 20px;
}

/* Footer */

footer{

    margin-top: 60px;
}

/* Responsive */

@media(max-width:768px){

    .overlay h1{

        font-size: 35px;
    }

    .product-banner{

        height: 250px;
    }

    .img-box{

        height: 220px;
    }
}
/* Hero Banner */

.hero-section{

    background-image: url('images/banner.jpg');

    background-size: cover;

    background-position: center;

    height: 500px;

    position: relative;
}

.overlay{

    background: rgba(0,0,0,0.5);

    width: 100%;

    height: 100%;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    color: white;

    text-align: center;
}

.overlay h1{

    font-size: 70px;

    font-weight: bold;
}

.overlay p{

    font-size: 22px;
}

.product-card{

    border: none;

    border-radius: 15px;

    overflow: hidden;

    transition: 0.3s;

    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.product-card:hover{

    transform: translateY(-10px);
}

.shoe-img{

    height: 250px;

    object-fit: cover;
}

.price{

    color: red;

    font-weight: bold;

    font-size: 20px;
}
/* About Section */

.about-section{

    background: white;

    padding: 80px 20px;

    border-radius: 20px;

    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
}

/* Title */

.about-title{

    font-size: 45px;

    font-weight: bold;

    color: #111;
}

/* Text */

.about-text{

    font-size: 20px;

    color: #555;

    max-width: 900px;

    margin: auto;

    line-height: 1.8;
}
/* Banner chung */

.brand-banner{

    height: 400px;

    background-size: cover;

    background-position: center;

    position: relative;
}

/* Overlay */

.overlay{

    width: 100%;

    height: 100%;

    background: rgba(0,0,0,0.5);

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    color: white;

    text-align: center;
}

.overlay h1{

    font-size: 60px;

    font-weight: bold;
}

.overlay p{

    font-size: 22px;
}

/* Nike Banner */

.nike-banner{

    background-image: url('images/nikebanner.jpg');
}

/* Adidas Banner */

.adidas-banner{

    background-image: url('images/adidasbanner.jpg');
}

/* Puma Banner */

.puma-banner{

    background-image: url('images/pumabanner.jpg');
}

/* Converse Banner */

.converse-banner{

    background-image: url('images/conversebanner.jpg');
}
/* Khu vực nút quay lại */

.back-section{

    margin-top: 40px;

    margin-bottom: 50px;
}

.back-btn{

    display: inline-block;

    padding: 14px 30px;

    background: #111;

    color: white;

    text-decoration: none;

    border-radius: 50px;

    font-weight: bold;

    transition: 0.3s;
}

.back-btn:hover{

    background: #dc3545;

    color: white;

    transform: translateY(-5px);

    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}
.contact-banner{

    background: linear-gradient(135deg,#111,#444);

    color: white;

    text-align: center;

    padding: 80px 20px;
}

.card{

    border-radius: 20px;
}