* {
    margin: 0;
    padding: 0; 
    box-sizing: border-box; 
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
}

body {
    width: 100%;
    background-color: black;
    color: white;
    padding-top: 80px;
}


#par {
    width: 100%;
    height: 100px;
    border-bottom: 1px solid #333;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    background-color: black;
    background: rgba(0,0,0,0.9);
    backdrop-filter: blur(5px);
    transition: background 0.3s ease, backdrop-filter 0.3s ease;
}

#logo {
    padding-left: 50px;
    text-align: left; 
}

.logo-img { width: 80px; vertical-align: middle; }
#name-1 { font-size: 24px; font-weight: bold; }
#name-2 { font-size: 24px; font-weight: bold; color: red; }


.menu { width: 8%; color: white; cursor: pointer; }
.search-container {
    display: flex;
    align-items: center;
    background: #1a1a1a;
    border-radius: 20px;
    padding: 5px 12px; 
    margin: 0 10px;    
    border: 1px solid #333;
    max-width: 200px;  
}

.search-input {
    background: transparent;
    border: none;
    color: white;
    outline: none;
    padding: 5px;
    width: 100px;      
    font-size: 14px;   
    transition: all 0.4s ease; 
}

.search-input:focus { 
    width: 160px;      
}
.search-btn {
    background: transparent;
    border: none;
    color: #888;
    cursor: pointer;
}
.icon-link { color: white; text-decoration: none; }


#main-1 {
    width: 100%;
    height: 500px;
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('./image/xe1.jpg');
    background-size: cover;
    background-position: center;
}

#dreamcar h1 { font-size: 40px; margin-bottom: 10px; }
.hero-buttons { display: flex; gap: 15px; justify-content: center; margin-top: 20px; }
.btn { padding: 12px 30px; border-radius: 5px; text-decoration: none; font-weight: bold; cursor: pointer; transition: background 0.3s ease; }
.btn-red { background: #ff0000; color: #fff; border: none; margin: 5px; }
.btn-outline { border: none; color: #fff;background-color: #333; }


#main-2{
    width: 100%;
    height: 100px;
}
.featured-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 50px;
}
.featured-text {
    font-weight: bold;
    color: #ff0000;
    letter-spacing: 4px;
    padding: 10px 25px;
    border: 1px solid rgba(255, 0, 0, 0.5);
    border-radius: 50px;
    background: rgba(255, 0, 0, 0.1);
}
.line { height: 1px; width: 100px; background: linear-gradient(to right, transparent, #ff0000, transparent); }

#main-3 { width: 95%; margin: 0 auto; }
.thanhtuychon, .thanhtuychon { width: 20%; vertical-align: top; }
#center { width: 55%; vertical-align: top; }

#left-right {
    width: 100%;
    background-color: #111;
    border-radius: 10px;
    border: 1px solid #333;
}

.tieude h3 {
    padding: 15px; color: red; font-size: 18px;
    border-left: 5px solid red; text-align: left;
}
.thanhphan td { padding: 12px; border-top: 1px solid #222; text-align: left; cursor: pointer; }


.image-cell { width: 31%; padding: 5px;}
.image-cell table { 
    background: #111; border-radius: 15px; overflow: hidden; 
    border: 1px solid #333; width: 100%;
}
.img-car { width: 100%; height: 300px; display: block; object-fit: cover; }
.ten-xe { padding: 15px 5px; font-size: 16px; font-weight: bold; color: white; }
.gia-xe { padding-bottom: 15px; color: red; font-weight: bold; }
.carousel-btn {
    background: #ff0000; color: #fff; border: none; width: 40px; height: 40px;
    border-radius: 50%; cursor: pointer; z-index: 5;
}
#danhsach{
    width: 100%;
    height: 100px;
    border: 1px solid #111;
    color: red;
    font-weight: bold;
}
#main-4{
width: 95%;
margin: 0 auto;
}
#number-par{
    width: 30%;
    margin: 0 auto;
}
.thanhso{
    width: 40px;
    height: 40px;
    border: none;
    margin: 2px;
    background-color: white;
    color: black;
    border-radius: 5px;
    cursor: pointer; 
}
#footer{
    width: 100%;
    border: 1px solid #111;
    background-color: rgb(1, 1, 22);
    margin: 10px auto;
}
.tieude-1{
    width: 80%; 
    margin-top: 30px; 
    margin-left: 60px;
}
#text-baocar{
    width: 35%;
    padding-left: 40px;
    text-align: left;   
    line-height: 1.6;   
    vertical-align: top;
}
.social {
    background: #333;
    color: white;
    border: none;
    padding: 10px;
    margin: 5px;
    width: 40px;
    height: 40px;
    border-radius: 50%; 
    cursor: pointer;
}

.social:hover {
    background: #0066cc;
}
#social-table{
    width: 100%;
    margin: 50px;
}
#table-dichvu {
    width: 100%;
    border-bottom: 1px solid #333; 
    border-collapse: collapse; 
    margin: 50px ;
}

.dichvu {
    width: 100%;
    cursor: pointer;
}
.dichvu td {
    padding-bottom: 10px;  
}  
#link{
    font-weight: bold;
    cursor: pointer;
}
.tieude-2{
    width: 90%;
}
.tieude-3{
    width: 100%;
    padding-left: 60px;  
    padding-right: 60px;
    line-height: 1.6;   
}

.email-container {
    display: flex; 
    width: 100%; 
    max-width: 500px; 
    background-color: white; 
    border-radius: 8px; 
    overflow: hidden; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); 
    margin-left: 100px;
}

.email-input {
    flex: 1; 
    padding: 15px 20px; 
    border: none; 
    outline: none; 
    font-size: 16px;
    color: #333; 
}

.email-input::placeholder {
    color: #888;
}

.email-btn {
    padding: 15px 30px; 
    background-color: #0066cc; 
    color: white; 
    border: none; 
    cursor: pointer; 
    font-weight: bold;
    font-size: 16px;
    transition: background 0.3s ease; 
}

.email-btn:hover {
    background-color: #0055aa;
}
.btn-buy {
    background-color: #ff0000; 
    color: white; 
    border: none; 
    padding: 10px 20px; 
    cursor: pointer; 
    font-weight: bold;
    font-size: 14px;
    border-radius: 5px;
    transition: background-color 0.3s ease;
    margin-bottom: 10px;
}
.nav_link {
    color: white; 
    text-decoration: none; 
    transition: color 0.3s ease;
    scroll-behavior: smooth;
}
/* 1. Hiệu ứng chữ chạy Gradient cho Logo */
#name-1, #name-2 {
    display: inline-block;
    transition: transform 0.3s ease;
}
#logo:hover #name-1 { transform: translateX(-5px); }
#logo:hover #name-2 { transform: translateX(5px); }

/* 2. Hiệu ứng Glassmorphism cho các khung nội dung */
#left-right, .image-cell table {
    background: rgba(255, 255, 255, 0.03) !important;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

/* 3. Hiệu ứng soi bóng (Reflection) cho ảnh xe */
.img-car {
    -webkit-box-reflect: below 2px linear-gradient(transparent, transparent, rgba(0,0,0,0.2));
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 4. Hiệu ứng viền sáng (Neon Border) khi hover vào thẻ xe */
.image-cell table:hover {
    border-color: #ff0000 !important;
    box-shadow: 0 0 20px rgba(255, 0, 0, 0.4);
    transform: translateY(-10px) scale(1.02);
}

/* 5. Hiệu ứng nút bấm "Mua ngay" cực chất */
.btn-buy {
    background: linear-gradient(45deg, #ff0000, #990000);
    border: none;
    position: relative;
    z-index: 1;
    transition: all 0.3s;
}

.btn-buy:hover {
    box-shadow: 0 0 15px #ff0000;
    letter-spacing: 1px;
}

/* 6. Hiệu ứng Loading Shimmer cho các ô trống */
@keyframes shimmer {
    0% { background-position: -468px 0; }
    100% { background-position: 468px 0; }
}

/* 7. Thanh cuộn (Scrollbar) tùy chỉnh */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #000; }
::-webkit-scrollbar-thumb {
    background: #444;
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover { background: #ff0000; }