/* ===== FONT ===== */
html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

/* ===== BACKGROUND (NỀN CHUNG) ===== */
body {
    background-image: url('/images/bg.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: white;
    text-shadow: 1px 1px 4px black;
}

    /* overlay nền tối */
    body::before {
        content: "";
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.5);
        z-index: -1;
    }

/* ===== TEXT ===== */
h1, h2, h3, h4, h5, h6,
label, p, span, td, th {
    color: white !important;
}

/* ===== LINK ===== */
a {
    color: white !important;
    text-decoration: none;
}

    a:hover {
        color: gold !important;
    }

/* ===== NAVBAR ===== */
.lmk-navbar {
    background: linear-gradient(90deg, black, #1a1a1a, black);
    border-bottom: 2px solid gold;
}

.lmk-brand {
    font-size: 26px;
    color: gold !important;
    letter-spacing: 2px;
    font-weight: bold;
}

.nav-link {
    color: white !important;
    transition: 0.3s;
}

    .nav-link:hover {
        color: gold !important;
    }

/* ===== BANNER (LOGO) ===== */
.lmk-banner {
    height: 320px;
    background: url('/images/banner.jpg') center/cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: 0 10px 30px rgba(0,0,0,0.8);
    border-bottom: 2px solid gold;
}

    .lmk-banner::before {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(0,0,0,0.5);
    }

    .lmk-banner div {
        position: relative;
        z-index: 1;
        text-align: center;
    }

    .lmk-banner h1 {
        font-size: 55px;
        letter-spacing: 5px;
        color: gold;
    }

    .lmk-banner p {
        font-size: 20px;
    }

/* ===== TABLE - XÁM XI MĂNG ===== */
.table {
    background: rgba(120, 120, 120, 0.5);
    color: white !important;
    border-radius: 10px;
    overflow: hidden;
    backdrop-filter: blur(10px);
}

    /* header */
    .table thead {
        background: rgba(80, 80, 80, 0.9);
    }

    /* dòng */
    .table tbody tr {
        background: rgba(160, 160, 160, 0.3);
        transition: 0.3s;
    }

        /* hover */
        .table tbody tr:hover {
            background: rgba(200, 200, 200, 0.4);
            transform: scale(1.01);
        }

    /* border */
    .table th, .table td {
        border: 1px solid rgba(255,255,255,0.2);
    }

/* ===== CARD XE ===== */
.card {
    background: rgba(0,0,0,0.6) !important;
    color: white !important;
    backdrop-filter: blur(10px);
    border-radius: 15px;
}

.car-card {
    transition: 0.3s;
}

    .car-card:hover {
        transform: translateY(-10px) scale(1.03);
    }

/* ===== FORM ===== */
input, select {
    background-color: rgba(255,255,255,0.2) !important;
    color: white !important;
    border: 1px solid white;
}

    input::placeholder {
        color: #ddd;
    }

/* ===== BUTTON ===== */
.btn {
    border-radius: 10px;
    transition: 0.3s;
}

    .btn:hover {
        transform: scale(1.1);
    }

/* ===== SEARCH ===== */
.search-box {
    max-width: 500px;
    margin: auto;
}

.search-input {
    border-radius: 30px;
    padding: 10px;
    border: none;
    background: rgba(255,255,255,0.2);
    color: white;
}

    .search-input:focus {
        outline: none;
        box-shadow: 0 0 10px #ffc107;
    }

.input-group-text {
    border-radius: 30px 0 0 30px;
}

.search-box .btn {
    border-radius: 0 30px 30px 0;
}

/* ===== GIÁ TIỀN ===== */
.text-warning {
    color: gold !important;
    text-shadow: 1px 1px 5px black;
}

/* ===== FOOTER ===== */
.lmk-footer {
    color: white;
    text-shadow: 1px 1px 3px black;
    margin-top: 50px;
}

/* ===== ẢNH XE ===== */
img {
    border-radius: 10px;
    transition: 0.3s;
}

    img:hover {
        transform: scale(1.1);
    }

/* 🔥 CHỈ ĐỔI CHỮ TRONG BẢNG */
.table tbody td {
    color: #111 !important;
}

/* Header giữ màu trắng cho đẹp */
.table thead th {
    color: white !important;
}