/*
Theme Name: taxi
Theme URI: dulichsacmaubinhduong.com
Author: Tống Nhật Trường
Author URI: dulichsacmaubinhduong.com
Description: A powerful Bootstrap 5 WordPress Starter Theme with WooCommerce Support. <a href="https://bootscore.me/category/documentation/" target="_blank">Documentation</a>. This theme gives you full control whatever you do and the full freedom to design whatever you want. It comes with a wide selection of category, page, post, author and archive templates as well as sidebar, header, footer and 404 widgets. There are no customizer settings in the backend. All settings can only be made by touching the code. Some CSS, HTML, PHP and JS Skills are required to customize it.
Version: 5.2.3.4
Tested up to: 6.2
Requires PHP: 5.6
License: MIT License
Text Domain: bootscore
Tags: featured-images, threaded-comments, translation-ready
*/

/*--------------------------------------------------------------
# General & Utility Styles
--------------------------------------------------------------*/
.text-eff {
    text-shadow: 2px 2px 0 var(--bs-red), 2px -2px 0 var(--bs-red), -2px 2px 0 var(--bs-red), -2px -2px 0 var(--bs-red), 2px 0px 0 var(--bs-red), 0px 2px 0 var(--bs-red), -2px 0px 0 var(--bs-red), 0px -2px 0 var(--bs-red);
    font-size: 40px;
}

.g {
    font-size: 20px;
}

.img_respon {
    height: 220px;
    object-fit: cover;
}

/*--------------------------------------------------------------
# Animations & Keyframes
--------------------------------------------------------------*/
.fadeIn1 { animation: fadeIn 2s infinite; }
.fadeIn2 { animation: fadeIn 2s infinite; animation-delay: 0.5s; }
.fadeIn3 { animation: fadeIn 2s infinite; animation-delay: 1s; }
.fadeIn4 { animation: fadeIn 2s infinite; animation-delay: 1.5s; }

@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

.headShake {
    animation: headShake 1s infinite both; /* Gộp animation-fill-mode */
}

@keyframes headShake {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(1px, 1px); }
    50% { transform: translate(-1px, -1px); }
    75% { transform: translate(1px, -1px); }
}

.hover {
    transition: all 0.3s ease-in-out;
}
.hover:hover {
    animation: zoomIn 0.5s forwards; /* Gộp animation-name, animation-duration, animation-fill-mode */
}

@keyframes zoomIn {
    0% { transform: scale(1); }
    100% { transform: scale(1.1); }
}

/*--------------------------------------------------------------
# Header Styles
--------------------------------------------------------------*/
.site-header {
    background: url(../theme/img/bg-banner.webp) no-repeat center center;
    background-size: cover;
    width: 100%;
    min-height: 400px;
}

.home .site-header {
    min-height: 100vh;
}

/*--------------------------------------------------------------
# Specific Element Styles (car, info blocks, etc.)
--------------------------------------------------------------*/
.car-bmw {
    bottom: -8em; 
    z-index: 10;
    pointer-events: none;
}

.nav-top {
    position: relative;
    z-index: 100;
}

.tnt-ab {
    min-height: 93px;
    background: var(--bs-gray-300);
}
.tnt-ab i {
    font-size: 35px;
}

.feature-icon-wrapper { /* Dùng cho nhiều section */
    flex-shrink: 0;
}
.feature-icon-wrapper span,
.feature-icon { /* Class .feature-icon cũng được dùng */
    width: 48px;
    height: 48px;
    display: inline-flex; /* Đảm bảo các class này có display phù hợp */
    align-items: center;
    justify-content: center;
}


/*--------------------------------------------------------------
# Booking Form Styles (Vertical & Horizontal)
--------------------------------------------------------------*/
.custom-booking-form-container {
    background-color: #FFD700;
    padding: 25px 30px;
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    max-width: 550px;
    margin: 30px auto;
    font-family: 'Arial', sans-serif;
}

.custom-booking-form-container .form-title {
    text-align: center;
    color: #333;
    font-size: 2em;
    margin-bottom: 25px;
    font-weight: bold;
}
.custom-booking-form-container .form-title-icon {
    margin-left: 8px;
    vertical-align: middle;
}
.custom-booking-form-container .form-group {
    margin-bottom: 20px;
}
.custom-booking-form-container .form-group label {
    display: block;
    margin-bottom: 8px;
    color: #555;
    font-weight: 600;
    font-size: 0.95em;
}
.custom-booking-form-container .form-group input[type="text"],
.custom-booking-form-container .form-group input[type="tel"],
.custom-booking-form-container .form-group input[type="email"],
.custom-booking-form-container .form-group input[type="date"],
.custom-booking-form-container .form-group input[type="time"],
.custom-booking-form-container .form-group select,
.custom-booking-form-container .form-group textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-sizing: border-box;
    font-size: 1em;
    color: #333;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.custom-booking-form-container .form-group input:focus,
.custom-booking-form-container .form-group select:focus,
.custom-booking-form-container .form-group textarea:focus { /* Sửa custom-booking_form_container */
    border-color: #ffc107;
    box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.35);
    outline: none;
}
.custom-booking-form-container .form-group .form-text {
    font-size: 0.8em;
    color: #777;
    margin-top: 5px;
}

/* Vertical form specific (inline date/time) */
.custom-booking-form-container.form-layout-vertical .form-group-inline { /* Thêm .form-layout-vertical để rõ ràng */
    display: flex;
    gap: 15px;
}
.custom-booking-form-container.form-layout-vertical .form-group-inline .form-group-half {
    flex: 1;
}

.custom-booking-form-container .form-submit-group {
    text-align: center;
    margin-top: 30px;
}
.custom-booking-form-container .submit-button {
    background-color: #E91E63;
    color: white;
    padding: 12px 30px;
    border: none;
    border-radius: 8px;
    font-size: 1.1em;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.custom-booking-form-container .submit-button:hover {
    background-color: #c2185b;
    transform: translateY(-2px);
}
.custom-booking-form-container .submit-button:active {
    transform: translateY(0px);
}
.custom-booking-form-container .submit-button .submit-icon {
    margin-left: 8px;
    vertical-align: middle;
    display: inline-block;
    transition: transform 0.3s ease;
}
.custom-booking-form-container .submit-button:hover .submit-icon {
    transform: translateX(5px);
}

/* Horizontal Form Specific Styles */
.custom-booking-form-container.form-layout-horizontal .form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 20px;
}
.custom-booking-form-container.form-layout-horizontal .form-row:last-of-type {
    margin-bottom: 0;
}
.custom-booking-form-container.form-layout-horizontal .form-row .form-group {
    flex: 1 1 calc(50% - 10px); /* Trừ đi 1 nửa gap */
    margin-bottom: 0;
    min-width: 200px;
}
/* Date/Time group in horizontal layout */
.custom-booking-form-container.form-layout-horizontal .form-group-datetime-row { /* Class này được thêm trong PHP */
    display: flex;
    gap: 10px;
    /* flex: 1 1 100%; Nếu muốn nó chiếm cả hàng */
}
.custom-booking-form-container.form-layout-horizontal .form-group-datetime-row .form-group-half {
    flex: 1;
}
.custom-booking-form-container.form-layout-horizontal .form-group textarea {
    min-height: 60px; /* Hoặc rows="2" từ HTML */
}


/* Booking Messages */
.booking-success-message {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
    padding: 15px;
    border-radius: 8px;
    margin-top: 20px;
    text-align: center;
}
.booking-error-message {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
    padding: 15px;
    border-radius: 8px;
    margin-top: 20px;
    text-align: center;
}

/*--------------------------------------------------------------
# Testimonial Section Styles
--------------------------------------------------------------*/
.testimonial-section .testimonial-card {
    background-color: #fff;
    border: 1px solid #FFECB3;
    border-left: 5px solid #FFB74D;
    box-shadow: 0 2px 10px rgba(0,0,0,0.07);
}
.testimonial-section .testimonial-card .card-body {
    padding: 1.25rem;
}
.testimonial-section .testimonial-card .blockquote p {
    font-size: 0.95em;
    color: #555;
    line-height: 1.6;
    font-style: italic;
}
.testimonial-section .testimonial-card .blockquote-footer {
    font-size: 0.85em;
    color: #777;
}
.testimonial-section .testimonial-card .blockquote-footer cite {
    font-style: normal;
}
.testimonial-section .quote-icon {
    color: #FFB74D;
    font-size: 1.2em;
    font-weight: bold;
}

/*--------------------------------------------------------------
# Taxi Info / CTA Block Styles
--------------------------------------------------------------*/
.taxi-info-cta-block {
    border: 1px solid #FFCA28;
}
/* .feature-icon đã được định nghĩa ở trên */

.btn-danger, .btn-danger:hover { /* Gộp :hover nếu không có nhiều thay đổi */
    background-color: #D32F2F;
    border-color: #D32F2F;
}
.btn-danger:hover {
    background-color: #B71C1C;
    border-color: #B71C1C;
}
.text-dark-emphasis {
    color: var(--bs-dark-text-emphasis);
}
.btn-outline-dark:hover {
    background-color: #343a40;
    color: #fff;
}

/*--------------------------------------------------------------
# Service Taxi List Styles
--------------------------------------------------------------*/
.service-taxi-list .section-title {
    color: #333;
    margin-bottom: 0.5rem;
}
.service-taxi-list .section-title i.fa-taxi {
    font-size: 0.9em;
}
.service-taxi-list .lead {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2rem;
}
.service-card {
    border-radius: 0.5rem;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    border: 1px solid #e9ecef;
}
.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.1);
}
.service-card .card-img-top-wrapper {
    border-top-left-radius: calc(0.5rem - 1px);
    border-top-right-radius: calc(0.5rem - 1px);
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f8f9fa;
}
.service-card .service-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease-in-out;
}
.service-card:hover .service-card-img {
    transform: scale(1.05);
}
.service-card .card-body {
    padding: 1rem;
}
.service-card .service-card-title {
    color: #212529;
    transition: color 0.2s ease-in-out;
}
.service-card .service-card-title:hover {
    color: #ffc107;
}
.service-card .btn-outline-warning {
    font-size: 0.85rem;
    padding: 0.3rem 0.75rem;
}
.service-card .btn-outline-warning i {
    font-size: 0.8em;
}


/*--------------------------------------------------------------
# Responsive Styles
--------------------------------------------------------------*/

/* Chung cho màn hình nhỏ hơn (dưới 768px) */
@media (max-width: 767.98px) {
       .fixed-contact-buttons {
        bottom: 76px;
        right: 15px;
        gap: 10px;
    }
    .contact-button {
        width: 50px;
        height: 50px;
    }
    .contact-button .contact-icon {
        width: 20px;
        height: 20px;
    }
    .contact-button .tooltip-text {
        /* Tooltip có thể khó dùng trên mobile, cân nhắc ẩn hoặc điều chỉnh lại vị trí */
        /* display: none; */
        right: 110%; /* Điều chỉnh lại vị trí tooltip cho màn hình nhỏ hơn */
        bottom: auto; /* Reset bottom */
        top: 50%; /* Căn giữa theo chiều dọc */
        transform: translateY(-50%);
    }
    .f7 {
        min-height: 36px;
    }
    .navbar-nav .show > .nav-link,
    .navbar-nav .nav-link.active {
        color: var(--bs-black);
        background: var(--bs-yellow);
        border-radius: 20px;
        padding: 5px;
    }
    .offcanvas.offcanvas-end.show .nav-link {
        color: var(--bs-black);
    }
    .car-bmw {
        bottom: -5em; /* Điều chỉnh vị trí xe BMW cho màn hình nhỏ */
    }
    .site-header {
        min-height: 400px; /* Giảm chiều cao header */
        background-position: center;
    }
   
}

/* Responsive cho Form đặt xe (Cả dọc và ngang khi thu nhỏ) */
@media (max-width: 768px) { /* Gộp chung cho các điều chỉnh dưới 768px */
    /* Điều chỉnh cho form ngang thành cột */
    .custom-booking-form-container.form-layout-horizontal .form-row {
        flex-direction: column;
        gap: 0;
    }
    .custom-booking-form-container.form-layout-horizontal .form-row .form-group {
        flex-basis: 100%;
        margin-bottom: 20px;
    }
    .custom-booking-form-container.form-layout-horizontal .form-row .form-group:last-child {
        margin-bottom: 0;
    }
    .custom-booking-form-container.form-layout-horizontal .form-group-datetime-row {
        flex-direction: column; /* Ngày giờ cũng thành cột */
        gap: 0;
    }
    .custom-booking-form-container.form-layout-horizontal .form-group-datetime-row .form-group-half {
        margin-bottom: 20px;
    }
    .custom-booking-form-container.form-layout-horizontal .form-group-datetime-row .form-group-half:last-child {
        margin-bottom: 0;
    }
}


@media (max-width: 600px) {
    /* Điều chỉnh cho form dọc */
    .custom-booking-form-container.form-layout-vertical { /* Chỉ áp dụng cho form dọc */
        padding: 20px;
        margin-left: 15px; /* Căn lề nếu cần */
        margin-right: 15px;
    }
    .custom-booking-form-container.form-layout-vertical .form-title {
        font-size: 1.8em;
    }
    .custom-booking-form-container.form-layout-vertical .form-group-inline {
        flex-direction: column;
        gap: 0;
    }
    .custom-booking-form-container.form-layout-vertical .form-group-inline .form-group-half {
        margin-bottom: 20px;
    }
    .custom-booking-form-container.form-layout-vertical .form-group-inline .form-group-half:last-child {
        margin-bottom: 0;
    }

    .custom-booking-form-container.form-layout-horizontal {
        padding: 20px;
        margin-left: 15px;
        margin-right: 15px;
    }
     .custom-booking-form-container.form-layout-horizontal .form-title {
        font-size: 1.8em;
    }
}
/* --- Fixed Contact Buttons --- */
.fixed-contact-buttons {
    position: fixed;
    bottom: 25px;
    right: 25px;
    z-index: 1030; /* Đảm bảo nổi trên các phần tử khác, Bootstrap modal thường có z-index 1050+ */
    display: flex;
    flex-direction: column; /* Xếp chồng nút theo chiều dọc */
    gap: 12px; /* Khoảng cách giữa các nút */
}

.contact-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 55px; /* Kích thước nút */
    height: 55px;
    border-radius: 50%; /* Bo tròn thành hình tròn */
    color: #ffffff; /* Màu icon bên trong */
    text-decoration: none;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    transition: transform 0.25s ease-in-out, box-shadow 0.25s ease-in-out, background-color 0.25s ease;
    position: relative; /* Cho tooltip */
    overflow: hidden; /* Tránh icon bị tràn khi có hiệu ứng */
}

.contact-button:hover {
    transform: scale(1.1) translateY(-3px); /* Hiệu ứng nhấc lên và phóng to khi hover */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

.contact-button .contact-icon {
    width: 24px; /* Kích thước icon SVG */
    height: 24px;
    transition: transform 0.3s ease;
}

.contact-button:hover .contact-icon {
    transform: scale(1.1);
}

.phone-button {
    background-color: #28a745; /* Màu xanh lá cho điện thoại */
}
.phone-button:hover {
    background-color: #1e7e34; /* Xanh lá đậm hơn */
}

.zalo-button {
    background-color: #0068FF; /* Màu xanh dương đặc trưng của Zalo */
    /* Áp dụng animation tại đây */
    animation: zaloRingEffect 2.5s infinite ease-in-out;
    animation-delay: 1.5s; /* Bắt đầu animation sau 1.5 giây */
}
.zalo-button:hover {
    background-color: #0052cc; /* Xanh Zalo đậm hơn */
    animation-play-state: paused; /* Tạm dừng animation khi hover để dễ nhấn */
}

/* Tooltip Text (hiển thị khi hover) */
.contact-button .tooltip-text {
    visibility: hidden;
    min-width: 120px; /* Độ rộng tối thiểu của tooltip */
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 6px 10px;
    position: absolute;
    z-index: 1;
    bottom: 50%; /* Căn giữa theo chiều dọc của nút */
    right: 120%; /* Đặt tooltip ở bên trái nút */
    transform: translateY(50%); /* Căn giữa tooltip với nút theo chiều dọc */
    opacity: 0;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    font-size: 13px;
    white-space: nowrap; /* Ngăn tooltip xuống dòng */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.contact-button:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}

/* --- Animation "hay hay" cho Zalo --- */
/* Ví dụ: Hiệu ứng "rung nhẹ nhàng" hoặc "sóng gợn" */
@keyframes zaloRingEffect {
    0% {
        transform: scale(1);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    }
    50% {
        transform: scale(1.05); /* Hơi phóng to một chút */
        /* Tạo vòng tròn lan tỏa bằng box-shadow */
        box-shadow: 0 0 0 8px rgba(0, 104, 255, 0.4), 0 0 0 16px rgba(0, 104, 255, 0.2), 0 5px 15px rgba(0, 0, 0, 0.2);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    }
}

/* Tùy chọn: Animation lắc nhẹ (thay thế zaloRingEffect nếu muốn) */
/*
@keyframes zaloSubtleShake {
    0%, 100% { transform: translateX(0) rotate(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-2px) rotate(-1.5deg); }
    20%, 40%, 60%, 80% { transform: translateX(2px) rotate(1.5deg); }
}
.zalo-button {
    background-color: #0068FF;
    animation: zaloSubtleShake 3s infinite ease-in-out;
    animation-delay: 1s;
}
*/