:root {
--primary: #003478;
--primary-light: #0052a3;
--secondary: #e84e1b;
--text: #1a1a1a;
--text-light: #666;
--bg: #fff;
--bg-gray: #f5f5f5;
--border: #e0e0e0;
--error: #d32f2f;
--success: #388e3c;
--shadow: rgba(0,0,0,0.1);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
line-height: 1.6;
color: var(--text);
background: var(--bg);
}
.container { max-width: 1200px; margin: 0 auto; padding: 0 16px; }
header { padding: 24px 0; text-align: center; border-bottom: 1px solid var(--border); }
header h1 { font-size: 28px; color: var(--primary); margin-bottom: 8px; }
header p { color: var(--text-light); }
.back-link { display: inline-block; margin-bottom: 16px; color: var(--primary); text-decoration: none; }
.back-link:hover { text-decoration: underline; }
.car-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; margin: 40px 0; }
.car-card {
display: block;
background: var(--bg);
border: 1px solid var(--border);
border-radius: 8px;
overflow: hidden;
text-decoration: none;
color: inherit;
transition: box-shadow 0.2s, transform 0.2s;
}
.car-card:hover { box-shadow: 0 4px 12px var(--shadow); transform: translateY(-2px); }
.car-image { aspect-ratio: 16/9; overflow: hidden; background: var(--bg-gray); }
.car-image img { width: 100%; height: 100%; object-fit: cover; }
.car-card h2 { padding: 16px 16px 8px; font-size: 20px; color: var(--primary); }
.car-card p { padding: 0 16px 16px; color: var(--text-light); font-size: 14px; }
section { margin: 48px 0; }
section h2 { font-size: 24px; color: var(--primary); margin-bottom: 16px; }
.hero { text-align: center; }
.hero-image { margin-bottom: 24px; }
.hero-image img { max-width: 100%; height: auto; border-radius: 8px; }
.hero-cta { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.btn {
padding: 12px 24px;
border: none;
border-radius: 4px;
font-size: 16px;
cursor: pointer;
text-decoration: none;
display: inline-block;
transition: background 0.2s;
}
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-light); }
.btn-secondary { background: var(--secondary); color: #fff; }
.btn-secondary:hover { background: #c74315; }
.price-table table { width: 100%; border-collapse: collapse; background: var(--bg); }
.price-table th, .price-table td { padding: 12px; text-align: left; border-bottom: 1px solid var(--border); }
.price-table th { background: var(--bg-gray); font-weight: 600; }
.price-table td.price { font-weight: 600; color: var(--primary); }
.calc-form { background: var(--bg-gray); padding: 20px; border-radius: 8px; margin-bottom: 16px; }
.calc-form label { display: block; margin-bottom: 12px; font-weight: 500; }
.calc-form input, .calc-form select {
width: 100%;
padding: 10px;
margin-top: 4px;
border: 1px solid var(--border);
border-radius: 4px;
font-size: 14px;
}
.calc-result {
background: var(--bg);
border: 1px solid var(--border);
padding: 20px;
border-radius: 8px;
display: none;
}
.calc-result.show { display: block; }
.calc-result .row { display: flex; justify-content: space-between; margin-bottom: 8px; padding: 8px 0; }
.calc-result .row.total { border-top: 2px solid var(--primary); margin-top: 12px; padding-top: 12px; font-weight: 600; font-size: 18px; color: var(--primary); }
.promo ul { list-style: none; }
.promo li { padding: 12px; background: var(--bg-gray); margin-bottom: 8px; border-radius: 4px; }
.promo li:before { content: '✓'; color: var(--success); font-weight: bold; margin-right: 8px; }
.form-section { background: var(--bg-gray); padding: 32px 20px; border-radius: 8px; }
form label { display: block; margin-bottom: 12px; font-weight: 500; }
form input, form select {
width: 100%;
padding: 10px;
margin-top: 4px;
border: 1px solid var(--border);
border-radius: 4px;
font-size: 14px;
}
.form-feedback {
margin-top: 16px;
padding: 12px;
border-radius: 4px;
display: none;
}
.form-feedback.show { display: block; }
.form-feedback.success { background: #e8f5e9; color: var(--success); border: 1px solid var(--success); }
.form-feedback.error { background: #ffebee; color: var(--error); border: 1px solid var(--error); }
.faq-item { margin-bottom: 16px; padding: 16px; background: var(--bg-gray); border-radius: 4px; }
.faq-item h3 { font-size: 16px; margin-bottom: 8px; color: var(--primary); }
.floating-actions { position: fixed; bottom: 20px; right: 20px; display: flex; flex-direction: column; gap: 12px; z-index: 1000; }
.float-btn {
width: 56px;
height: 56px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
font-size: 20px;
box-shadow: 0 2px 8px var(--shadow);
transition: transform 0.2s;
}
.float-btn:hover { transform: scale(1.1); }
.zalo-btn { background: #0068ff; color: #fff; font-size: 14px; font-weight: 600; }
.call-btn { background: var(--secondary); color: #fff; }
footer { text-align: center; padding: 32px 0; color: var(--text-light); border-top: 1px solid var(--border); margin-top: 48px; }
.warning { background: #fff3cd; border: 1px solid #ffcc00; color: #856404; padding: 12px; border-radius: 4px; margin: 16px 0; }
@media (max-width: 768px) {
header h1 { font-size: 24px; }
section h2 { font-size: 20px; }
.hero-cta { flex-direction: column; }
.calc-form, .form-section { padding: 16px; }
.floating-actions { bottom: 16px; right: 16px; }
}