/* Hero background image - placeholder */
.hero {
    background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="600" viewBox="0 0 1200 600"><rect width="1200" height="600" fill="%234CAF50" opacity="0.3"/><text x="50%" y="50%" font-family="Arial" font-size="50" fill="%23333" text-anchor="middle" dominant-baseline="middle">TAXI NỘI BÀI GIÁ RẺ</text></svg>');
    background-size: cover;
    background-position: center;
}

/* Taxi image - placeholder */
.car-image img {
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="800" height="400" viewBox="0 0 800 400"><rect width="800" height="400" fill="%23f9f9f9"/><rect x="100" y="200" width="600" height="100" rx="20" fill="%23FFD700"/><circle cx="200" cy="300" r="50" fill="%23333"/><circle cx="600" cy="300" r="50" fill="%23333"/><rect x="150" y="150" width="500" height="100" rx="20" fill="%23FFD700"/><text x="400" y="200" font-family="Arial" font-size="40" fill="%23333" text-anchor="middle">TAXI NỘI BÀI GIÁ RẺ</text><text x="400" y="250" font-family="Arial" font-size="30" fill="%23333" text-anchor="middle">0973626686</text></svg>');
}

/* Logo image - use the SVG we created */
.logo img {
    content: url('../images/logo.svg');
}

/* Zalo icon - use the SVG we created */
.zalo-btn img {
    content: url('../images/zalo-icon.png');
}