/* ==========================================================================
   MỤC LỤC (TABLE OF CONTENTS)
   ==========================================================================
   1.  VARIABLES & RESET (:root, Base styles)
   2.  KEYFRAMES (Animations)
   3.  TYPOGRAPHY & TITLES (Headings, Section Titles)
   4.  HEADER & NAVIGATION
       - Top Bar & Main Header
       - Desktop Navigation (min-width: 768px & 992px)
       - Mobile Navigation (max-width: 767px)
   5.  HERO & BANNER (Hero section, Main images)
   6.  COMPONENTS: CARDS & GRID (Car Cards, Image Grid)
   7.  COMPONENTS: BUTTONS (Standard Buttons)
   8.  FLOATING ACTIONS (Fixed Contact & Booking Buttons)
   9.  SECTIONS (Why Choose Us, Promotion)
   10. FOOTER (Main Footer & Highlight Section)
   ========================================================================== */

/* ==========================================================================
   1. VARIABLES & RESET
   ========================================================================== */
:root {
    /* MÀU SẮC THƯƠNG HIỆU */
    --cam-dam-color: #ff8c1a;
    --cam-vang-color: #f4a619; /* Accent Color */
    --xanh-navy-color: #012a55;
    
    /* MÀU CƠ BẢN */
    --white-color: #ffffff;
    --light-grey-color: #dddddd;
    --title-color: #222429;
    --smoke-color: #f7f7f7;

    /* ALIAS (ĐỒNG NHẤT BIẾN) */
    --bg-white: var(--white-color);
    --bg-accent: var(--cam-vang-color);
    
    /* CẤU HÌNH KHÁC */
    --box-shadow: 0px 30px 60px 0px rgba(10, 43, 83, 0.15);
    --icon-font: 'Font Awesome 7 Free';
}

a {
    color: var(--cam-vang-color);
    text-decoration: none;
    outline: 0;
    transition: all ease 0.4s;
}

a:hover {
    color: var(--cam-dam-color);
    transition: color 0.3s ease;
}

.navbar-nav, .navigation, .footer-content ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

.bg-smoke { background-color: var(--smoke-color); }

/* ==========================================================================
   2. KEYFRAMES (ANIMATIONS)
   ========================================================================== */
@keyframes returnToNormal {
    0% { opacity: 0; transform: translate3d(0,-100%,0); }
    100% { opacity: 1; transform: none; }
}

@keyframes ripple {
    0% { transform: scale(1); opacity: 0; }
    30% { opacity: .4; }
    100% { transform: scale(1.9); opacity: 0; }
}

@keyframes headerSticky {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(0); }
}

@keyframes movingX {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(50px); }
}

@keyframes movingY {
    0%, 100% { transform: translateY(0); }
    40% { transform: translateY(-100%); }
}

@keyframes jumpAni {
    0%, 100% { transform: translateY(0); }
    40% { transform: translateY(-60px); }
}

@keyframes jumpReverseAni {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(60px); }
}

@keyframes footerLine {
    /* Định nghĩa nếu cần chuyển động cho đường kẻ footer */
}

/* Các Animation cho nút gọi */
@keyframes phone-shake {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    15% { transform: translateY(-2px) rotate(3deg); }
    30% { transform: translateY(2px) rotate(-3deg); }
    45% { transform: translateY(-2px) rotate(3deg); }
    60% { transform: translateY(1px) rotate(0deg); }
}

@keyframes call-pulse {
    0% { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.7); }
    70% { box-shadow: 0 0 0 0.9375rem rgba(231, 76, 60, 0); }
    100% { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0); }
}

@keyframes zalo-pulse {
    0% { box-shadow: 0 0 0 0 rgba(0, 136, 255, 0.7); }
    70% { box-shadow: 0 0 0 0.9375rem rgba(0, 136, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 136, 255, 0); }
}

@keyframes booking-pulse {
    0% { box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.2); }
    50% { box-shadow: 0 0 0 0.625rem rgba(231, 76, 60, 0.3); }
    100% { box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.2); }
}

@keyframes tada {
    0% { transform: scale(1); }
    10%, 20% { transform: scale(0.9) rotate(-3deg); }
    30%, 50%, 70%, 90% { transform: scale(1.1) rotate(3deg); }
    40%, 60%, 80% { transform: scale(1.1) rotate(-3deg); }
    100% { transform: scale(1) rotate(0); }
}

@keyframes witr-shadow {
    0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.3), 0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3); }
    100% { box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3), 0 0 0 30px rgba(255, 255, 255, 0); }
}

/* Utility classes for animation */
.jump { animation: jumpAni 7s linear infinite; }
.jump-reverse { animation: jumpReverseAni 7s linear infinite; }
.movingY { animation: movingY 17s linear infinite; }
.movingX { animation: movingX 8s linear infinite; }

/* ==========================================================================
   3. TYPOGRAPHY & TITLES
   ========================================================================== */
.heading-container {
    text-align: center;
    padding: 2rem 1rem;
    background-color: var(--bg-white);
}

.subtitle {
    font-size: 1.1rem;
    font-weight: 400;
    margin-bottom: 1rem;
    letter-spacing: 1px;
}

.main-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--xanh-navy-color);
    text-transform: uppercase;
    margin-top: 0;
    padding-bottom: 2rem;
    position: relative;
}

.main-title::after {
    content: '';
    display: block;
    width: 5rem;
    height: 4px;
    background-color: var(--cam-vang-color);
    margin: 0.625rem auto 0;
    border-radius: 2px;
}

/* Style cho Title Section chung */
.title-new.text-center {
    background: url(/Images/background/background-title.png) center bottom no-repeat;
    margin-bottom: 1.5rem;
}

header.title-new, header.title-section { 
    text-transform: uppercase;
    font-size: .8rem;
    position: relative;
    margin-top: 0;
    color: var(--title-color);
    font-weight: 500;
    padding-bottom: 1rem;
    display: block;
}

header.title-new h2, header.title-section h2 { 
    font-size: 1.7rem;
    margin: .3rem 0;
}

.title-section h1 {
    color: var(--xanh-navy-color);
    text-transform: uppercase;
    font-size: 2rem;
    margin-bottom: 0;
}

.title-section i { padding-right: .4rem; }

.title-section span {
    display: flex;
    align-items: center;
    width: 150px;
    direction: ltr;
    font-weight: 700;
}

.title-section span:before {
    content: "";
    display: block;
    flex-grow: 1;
    margin-right: 0.5rem;
    border-top: 4px solid var(--cam-vang-color); 
    border-radius: 2px;
}

h3.text-uppercase { color: var(--xanh-navy-color); }

/* Responsive Titles */
@media (max-width: 37.5rem) {
    .subtitle { font-size: 1rem; }
    .main-title { font-size: 2rem; }
}
/* Class này sẽ được JS tự động thêm vào khi cuộn */
#header.is-sticky {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    background-color: var(--white-color); /* Đảm bảo nền trắng */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); /* Tạo bóng đổ */
    animation: headerSticky 0.5s ease-in-out; /* Hiệu ứng trượt xuống */
    border-bottom: 1px solid var(--light-grey-color);
}

/* Đảm bảo nội dung không bị che khuất khi header thành fixed */
body.header-fixed-padding {
    padding-top: 90px; /* Bằng chiều cao của header */
}
/* ==========================================================================
   4. HEADER & NAVIGATION
   ========================================================================== */
/* --- Header General --- */
.main-header {
    background-color: var(--bg-white);
    position: relative;
    z-index: 999;
    overflow-x: clip;
    overflow-y: visible;
}

.main-header-wapper {
    display: grid;
    grid-template-columns: 16.875rem auto;
    align-items: center;
    position: relative;
}

.header-content { background-color: var(--title-color); }

/* Top Header */
.header-top {
    position: relative;
    padding: .25rem 0;
    background-color: var(--cam-vang-color);
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    color: var(--white-color);
}

.header-top a { color: var(--white-color); }
.header-top i { padding-right: .5rem; }
.header-social { color: var(--white-color); }
.header-social i { font-size: 1.25rem; }
.header-social li:first-child { padding-top: .3rem; }
.top-header .phone { font-weight: 700; }

.top-header {
    position: relative;
    padding-left: 5rem;
}

.top-header:before {
    background-color: var(--cam-vang-color);
    content: "";
    width: 6000px;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
}

.top-header a { line-height: 2.2rem; color: var(--white-color); }
.top-header a i { padding-right: .3rem; }

/* Logo & Info */


.site-logo {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
}
.site-logo img { width: 15.625rem; }

/* --- RESPONSIVE >= 768px (Desktop/Tablet Large) --- */
@media (min-width: 768px) {
    .header-info {
        position: relative;
    }
    .header-logo {
        display: block;
        position: relative;
        margin: 0;
        padding-right: 5rem;
    }

    .header-logo:before {
        content: "";
        position: absolute;
        background-color: var(--white-color);
        height: 6rem;
        width: 1540px;
        right: 0;
        bottom: 0;
        transform: skew(15deg);
    }

    .header-logo img { height: 4.85rem; }

    .header-info:before {
        background-color: var(--bg-white);
        clip-path: polygon(0 0, 0% 0%, 100% 100%, 0% 100%);
        width: 46px;
        height: 100%;
        content: "";
        position: absolute;
        left: 0;
        top: 0;
    }

    .header-info:after {
        background-color: var(--cam-vang-color);
        transform: skewX(24deg);
        width: 9px;
        height: 100%;
        content: "";
        position: absolute;
        left: 10px;
        top: 0;
    }

    .main-menu {
        position: relative;
        padding-left: 5rem;
    }

    .main-menu:before {
        background: linear-gradient(90deg, #002b5b 0%, #013d82 100%); 
        transition: background 0.3s ease;
        width: 6000px;
        height: 100%;
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        z-index: -1;
    }

    .nav-trigger { display: none; }
    .navbar-nav { display: flex; flex-direction: row; }
    .navigation { display: flex; flex-direction: row; }

    .navigation > li { padding: .25rem 0; position: relative; }
    .navigation > li:first-child span { display: none; }
    
    .navigation > li > a {
        display: block;
        padding: 1.1rem .7rem;
        position: relative;
        font-weight: 500;
        font-size: .9rem;
        color: var(--white-color);
        text-transform: uppercase;
    }

    .navigation > li:first-child > a { padding: 1rem 1rem; }
    .navigation > li:first-child > a i { font-size: 1.2rem; }
    .navigation > li > a:hover { color: var(--cam-vang-color); }

    .navigation > li.sub-menu > a:after {
        content: "\2b";
        display: inline-block;
        position: relative;
        font-family: var(--icon-font);
        margin-left: .25rem;
        font-weight: 600;
        top: 0;
        font-size: .9em;
        color: var(--white-color);
        transition: .3s ease-in-out;
    }

    .navigation > li.sub-menu > a:hover:after {
        color: var(--cam-vang-color);
        content: "\f068";
        transform: rotate(180deg);
    }

    .navigation li.sub-menu > ul {
        position: absolute;
        text-align: left;
        left: -1rem; 
        background-color: var(--white-color);
        min-width: 14.375rem;
        width: max-content;
        padding: .5rem .75rem;
        border: 0;
        box-shadow: 0 4px 15px rgba(1, 15, 28, 0.06);
        border-bottom: 2px solid var(--cam-vang-color);
        border-radius: 0;
        top: 50%;
        visibility: hidden;
        opacity: 0;
        z-index: -1;
        transform: scaleY(0);
        transform-origin: top;
        transition: all .5s;
    }

    .navigation li.sub-menu:hover > ul {
        top: 100%;
        visibility: visible;
        opacity: 1;
        transform: scaleY(1);
        z-index: 99999;
    }

    .navigation li.sub-menu li { position: relative; padding: .25rem 0; }

    .navigation li.sub-menu li a:before {
        content: "\f30b";
        position: absolute;
        top: .25rem;
        left: .5rem;
        font-family: var(--icon-font);
        width: .5rem;
        height: .5rem;
        text-align: center;
        border-radius: 50%;
        display: inline-block;
        font-size: 1em;
        line-height: 1;
        color: var(--cam-vang-color);
        font-weight: 900;
        opacity: 0;
        visibility: visible;
        transition: .3s ease-in-out;
    }

    .navigation li.sub-menu li a:hover {
        padding-left: 1.25rem;
        color: var(--cam-vang-color);
    }

    .navigation li.sub-menu li a:hover:before {
        visibility: visible;
        opacity: 1;
        left: 0;
    }
}

/* --- RESPONSIVE >= 992px (Large Desktop) --- */
@media (min-width: 992px) {
    .navigation { padding-left: 1.5rem; }
    .navigation > li > a { padding: 1.1rem 1rem; }
}

/* --- RESPONSIVE <= 767px (Mobile/Small Tablet) --- */
@media (max-width: 767px) {
    .main-menu {
        position: relative;padding-top:.75rem;
        height: 4rem;
        color: var(--white-color);
    }

    .main-menu:before {
        background-color: var(--white-color);
        width: 6000px;
        height: 100%;
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        z-index: -1;
    }

    .header-info:before {
       display:none;
    }

    .header-info:after {
        display: none;
    }

    .navigation {
        display: none;
        overflow: hidden;
        position: absolute;
        top: 100%;
        right: -15px;
        min-width: 20rem;
        padding: .5rem 1rem;
        z-index: 99999;
        border: 2px solid var(--cam-vang-color);
        border-width: 2px 0 2px 0;
        background-color: var(--white-color);
    }

    .navigation li {
        border-bottom: 1px solid #fdedf1; 
        padding: .25rem 0; 
    }

    .navigation li:last-child { border-bottom: none; }

    .navigation li a {
        padding: .5rem 0;
        color: var(--cam-vang-color);
        display: block;
    }

    .navigation li a:hover { color: var(--cam-vang-color); }

    .navigation li a:before {
        content: "\f054";
        display: inline-block;
        padding-right: .5rem;
        position: relative;
        font-family: var(--icon-font);
        margin-left: 0.25rem;
        font-weight: 600;
        top: 0;
        font-size: .9em;
        color: var(--title-color);
        transition: .3s ease-in-out;
    }

    .navigation > li:first-child > a i {
        font-size: .9rem;
        padding-right: .5rem;
    }

    .nav-trigger {
        line-height: 2.5rem;
        height: 6rem;
        white-space: nowrap;
        color: var(--title-color);
        width: 7.5rem;
        margin-left: calc(100% - 7.5rem);
        text-align: right;
    }

    .nav-trigger span {
        display: inline-block;
        height: 2px;
        vertical-align: .3rem;
        margin-left: 1rem;
        width: 22px;
        position: relative;
        background-color: var(--cam-vang-color);
        transition: background-color .2s;
    }

    .nav-trigger span::after, .nav-trigger span::before {
        display: block;
        position: absolute;
        height: 2px;
        width: 22px;
        background-color: var(--cam-vang-color);
        backface-visibility: hidden;
        content: '';
        left: 0;
        transition: transform .2s;
    }

    .nav-trigger span::before { transform: translateY(-6px); }
    .nav-trigger span::after { transform: translateY(6px); }

    .nav-open .nav-trigger span { background-color: rgba(255, 255, 255, 0); }
    .nav-open .nav-trigger span::before { transform: rotate(-45deg); }
    .nav-open .nav-trigger span::after { transform: rotate(45deg); }

    .navigation li.sub-menu { position: relative; }
    .navigation li.sub-menu ul { display: none; padding-left: 1.2rem; }
    
    .navigation li li:first-child { padding-top: .25rem; border-top: 1px solid #fdedf1; }
    .navigation li li:last-child { padding-bottom: .25rem; border-bottom: none; }
    .navigation li.sub-menu ul.open { display: block; }

    .navigation li.sub-menu .submenu-btn {
        position: absolute;
        right: 0;
        top: .5rem;
        display: block;
        width: 1.5rem;
        height: 1.5rem;
        background-color: var(--cam-vang-color);
        border-radius: 50%;
    }

    .navigation li.sub-menu .submenu-btn span {
        position: relative;
        display: block;
        margin: .7rem auto;
        height: 2px;
        width: 16px;
        background-color: var(--white-color);
    }

    .navigation li.sub-menu .submenu-btn span:after {
        display: block;
        position: absolute;
        content: "";
        top: -.7rem;
        margin: 0;
        height: 2px;
        width: 16px;
        background-color: var(--white-color);
        transform: rotate(-90deg);
    }

    .navigation li.sub-menu .submenu-btn.open span:after { display: none; }
}

/* ==========================================================================
   5. HERO & BANNER SECTIONS
   ========================================================================== */
.hero-banner-section {
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
}

.banner-wrapper {
    max-height: 37.5rem; 
    overflow: hidden;
    position: relative;
    width: 100%;
}

.responsive-banner-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.responsive-banner-img[src] { opacity: 1; }

.main-image-section {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 5;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white-color);
    text-align: center;
    overflow: hidden;
    border-radius: 0.625rem;
    box-shadow: 0 0.3125rem 1.25rem rgba(0, 0, 0, 0.2);
    margin-bottom: 1rem;
}

.main-image-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.90) 0%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.1) 100%);
}

/* Responsive Banner */
@media (min-width: 75rem) {
    .responsive-banner-img { object-position: center top; }
}

@media (max-width: 48rem) {
    .banner-wrapper { max-height: 25rem; }
}

/* ==========================================================================
   6. COMPONENTS: CARDS & GRIDS
   ========================================================================== */
/* --- Car Card --- */
.car-card {
    background-color: var(--bg-white);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    transition: all 0.3s ease;
    cursor: pointer;
}

.car-card:hover {
    transform: translateY(-0.5rem);
    box-shadow: 0 0.625rem 1.5625rem rgba(0, 0, 0, 0.18);
}

.car-card .car-image {
    aspect-ratio: 14 / 5;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: .75rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.car-card img {
    width: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.4s ease;
}

.car-card:hover img { transform: scale(1.05); }

.car-info { padding: 1rem 1.25rem; }

.car-info h3 {
    margin: 0 0 0.625rem 0;
    text-transform: uppercase;
    font-size: 1.2rem;
    color: var(--xanh-navy-color);
    font-weight: bold;
    transition: color 0.3s ease;
}

.car-card:hover .car-info h3 { color: #007bff; }

.car-info p {
    margin: 0.375rem 0;
    font-size: 0.9375rem;
    color: #333;
}

.car-info p span { font-weight: bold; }
.check { color: #11aa11; font-weight: bold; margin-right: 0.375rem; }

/* --- Special Card Image --- */
.card-image {
    position: relative;
    aspect-ratio: 1/ 1;
    -webkit-clip-path: polygon( 0% 0%, 100% 0%, 100% 85%, 50% 100%, 0% 85% );
    clip-path: polygon( 0% 0%, 100% 0%, 100% 85%, 50% 100%, 0% 85% );
    overflow: hidden;
}

.card-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.image-mask {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.2), transparent 50%);
}

/* --- Image Grid --- */
.container-grid-independent {
    max-width: 75rem;
    margin: 1.25rem auto;
    padding: 0 0.9375rem;
}

.grid-item {
    position: relative;
    overflow: hidden;
    border-radius: 0.5rem;
    cursor: pointer;
    background-color: var(--bg-white);
    box-shadow: 0 4px 0.9375rem rgba(0, 0, 0, 0.1);
    aspect-ratio: 16 / 10;
    display: block;
    margin-bottom: 1rem;
}

.grid-item img { width: 100%; height: 100%; object-fit: cover; display: block; }

.grid-caption {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    background: linear-gradient(to top, var(--xanh-navy-color), var(--xanh-navy-color) 50%);
    color: var(--white-color);
    padding: .5rem;
    font-size: 0.75em;
    text-align: center;
    font-weight: 600;
    text-transform: uppercase;
}

/* ==========================================================================
   7. COMPONENTS: BUTTONS
   ========================================================================== */
.buttons {
    display: flex;
    justify-content: space-between;
    padding: 0.9375rem 1.25rem;
    border-top: 1px solid var(--light-grey-color);
}

.btn {
    padding: 0.625rem 1.25rem;
    border-radius: 0.5rem;
    text-decoration: none;
    font-weight: bold;
    border: 2px solid transparent;
    transition: all 0.25s ease;
}

.btn-detail {
    background-color: var(--white-color);
    color: #007bff;
    border-color: #007bff;
}
.btn-detail:hover { background-color: #007bff; color: var(--white-color); }

.btn-book {
    background-color: #27ae60;
    color: var(--white-color);
    border-color: #27ae60;
}
.btn-book:hover { background-color: #219150; }

/* ==========================================================================
   8. FLOATING ACTIONS (FIXED BUTTONS)
   ========================================================================== */
/* --- Group Container --- */
.contact-fixed-buttons {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 9999;
    display: flex;
    flex-direction: column; 
    align-items: flex-end;
    gap: 0.9375rem;
}

/* --- Zalo Button --- */
.contact-zalo-btn {
    display: block;
    width: 3.125rem;
    height: 3.125rem;
    border-radius: 50%; 
    overflow: hidden;
    animation: zalo-pulse 2s infinite 1s; 
    box-shadow: 0 0.375rem 0.75rem rgba(0, 0, 0, 0.3);
    transition: transform 0.2s;
}

.contact-zalo-btn:hover { transform: scale(1.1); }
.zalo-icon { width: 100%; height: 100%; object-fit: cover; }

/* --- Call Button --- */
.contact-call-btn {
    display: flex;
    align-items: center;
    text-decoration: none;
    background-color: var(--white-color);
    border-radius: 1.875rem;
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.2);
    overflow: hidden;
    transition: transform 0.2s;
    animation: call-pulse 1.5s infinite; 
}

.contact-call-btn:hover { transform: scale(1.05); }

.call-icon-wrapper {
    background-color: #E74C3C;
    color: var(--white-color);
    width: 3.125rem;
    height: 3.125rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0; 
    border-radius: 50%;
    margin: 0.3125rem;
    animation: phone-shake 2.5s ease-in-out infinite 0.5s; 
}

.call-icon-wrapper i { font-size: 1.375rem; }

.phone-number {
    color: #E74C3C; 
    font-size: 1.125rem;
    font-weight: 700;
    padding-right: 1.25rem;
    padding-left: 0.3125rem;
    white-space: nowrap; 
}

/* --- Fixed Booking (Đặt xe) Button --- */
.fixed-booking-wrapper {
    position: fixed; 
    left: 1.25rem;
    bottom: 1.25rem;
    z-index: 999;
}

.btn-dat-xe {
    display: inline-block;
    text-decoration: none;
    padding: 0.625rem 1.25rem;
    background-color: var(--white-color);
    border-radius: 0.9375rem;
    border: 2px solid #E74C3C;
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    cursor: pointer;
    animation: booking-pulse 3s infinite 1s; 
}

.btn-dat-xe:hover {
    box-shadow: 0 0.375rem 0.9375rem rgba(0, 0, 0, 0.3);
    transform: translateY(-2px);
}

.dat-xe-content { display: flex; align-items: center; gap: 0.9375rem; }
.dat-xe-icon-wrapper { color: #3498DB; font-size: 2.25rem; line-height: 1; }
.dat-xe-text { display: flex; flex-direction: column; text-align: left; }
.dat-xe-title { color: #E74C3C; font-size: 1.5rem; font-weight: 700; line-height: 1.2; text-transform: uppercase; }
.dat-xe-slogan { color: #555; font-size: 0.875rem; font-weight: 400; margin-top: -3px; }

/* --- Responsive Floating Actions --- */
@media (max-width: 37.5rem) {
    .contact-fixed-buttons { right: 0.5rem; bottom: 0.9375rem; gap: 0.625rem; }
    .contact-zalo-btn, .call-icon-wrapper { width: 2.8125rem; height: 2.8125rem; margin: 0.3125rem; }
    .call-icon-wrapper i { font-size: 1.25rem; }
    .phone-number { font-size: 1rem; padding-right: 0.9375rem; }
    
    .fixed-booking-wrapper { left: 0.5rem; bottom: 0.9375rem; }
    .btn-dat-xe { padding: 0.5rem 0.25rem; }
    .dat-xe-icon-wrapper { font-size: 1.875rem; }
    .dat-xe-title { font-size: 1.25rem; }
    .dat-xe-slogan { font-size: 0.8125rem; }
}

/* ==========================================================================
   9. SECTIONS (Why, Promo)
   ========================================================================== */
/* --- Section: Why Choose Us --- */
.why {
    position: relative;
    margin-top: 1rem;
    padding: 2rem 0;
    background: url(/Images/background/tx-bg.jpg) no-repeat fixed center center/cover;
}

.why:before {
    position: absolute;
    content: "";
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    padding-top: 6rem;
    padding-bottom: 6rem;
    background-color: rgb(0 18 50 / 70%);
}

.why > div { position: relative; z-index: 2; color: #fff; }

.why-item { border: solid 1px #0C5ADB; padding: 1rem 1.5rem; margin-top: 1.5rem; }
.why-item .icon { width: 3rem; height: 3rem; text-align: center; }
.why-item .icon i { font-size: 2rem; color: var(--cam-vang-color); line-height: 3rem; }
.why-item h3 { margin: 0 0 0 .5rem; text-transform: uppercase; color: var(--cam-vang-color); }

/* --- Section: Promo Banner --- */
.promo-banner-blue {
    background: linear-gradient(135deg, #0056b3 0%, #004494 100%);
    border-radius: 16px;
    padding: 40px 20px;
    color: white;
    box-shadow: 0 10px 30px rgba(0, 86, 179, 0.3);
    border: 2px solid #ffc107;
    position: relative;
    overflow: hidden;
}

.promo-icon { font-size: 3.5rem; animation: tada 1.5s infinite; }

.promo-title {
    color: #ffffff;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 2rem;
    margin-bottom: 10px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.promo-underline {
    width: 100px; height: 4px; background-color: #ffc107;
    margin: 0 auto 25px auto; border-radius: 2px;
}

.promo-desc { 
    font-size: 1.3rem; 
    line-height: 1.6; 
    max-width: 850px; 
    margin: 0 auto 20px auto; 
}

.highlight-badge { 
    background-color: #dc3545; 
    color: white; 
    padding: 2px 10px; 
    border-radius: 6px; 
    font-weight: 800; 
    font-size: 1.5rem;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    display: inline-block;
    transform: rotate(-3deg);
}

.timer { 
    background: rgba(0,0,0,0.3); 
    padding: 5px 15px; 
    border-radius: 20px; 
    color: #ffc107; 
    font-weight: 600; 
}

.btn-get-promo {
    background: linear-gradient(to bottom, #ffc107, #ffca2c);
    color: #000 !important;
    font-weight: 800;
    font-size: 1.2rem;
    padding: 15px 45px;
    border-radius: 50px;
    text-decoration: none;
    box-shadow: 0 4px 0 #d39e00;
    transition: all 0.2s;
    display: inline-block;
    text-transform: uppercase;
    margin-top: 10px;
}
.btn-get-promo:hover { transform: translateY(2px); box-shadow: 0 2px 0 #d39e00; background: #ffdb4d; }
.btn-get-promo:active { transform: translateY(4px); box-shadow: none; }

@media (max-width: 768px) {
    .promo-title { font-size: 1.5rem; }
    .promo-desc { font-size: 1.1rem; }
    .highlight-badge { font-size: 1.3rem; }
    .grid-caption { display: none; }
}

/* ==========================================================================
   10. FOOTER
   ========================================================================== */
/* --- Standard Footer (.footer-content) --- */
.footer-content {
    position: relative;
    background: url('/Images/background/footer-bg.png') no-repeat center fixed;
    background-size: cover; 
    padding: 3rem 0; 
}

.footer-content:before {
    position: absolute;
    z-index: 0;
    content: '';
    left: 0; top: 0;
    width: 100%; height: 100%;
    display: block;
    background-color: rgba(1, 42, 85, 0.8); 
}

.footer-content .container-xl {
    position: relative;
    z-index: 2;
    color: var(--white-color);
}

.footer-content a { color: var(--white-color); transition: color 0.3s ease; }
.footer-content a:hover { color: var(--cam-vang-color); }
.footer-content h4 { font-size: 1rem; margin-bottom: .5rem; }

.footer-content .footer-info .icon {
    display: block;
    margin-right: .5rem;
    height: 1.5rem; width: 1.5rem; min-width: 1.5rem;
    line-height: 1.5rem; text-align: center;
    background-color: var(--cam-vang-color);
    color: var(--white-color);
}

.footer-content h3 {
    font-size: 1.5rem;
    font-weight: var(--bs-body-font-weight, 600);
    position: relative;
    border: none;
    text-transform: capitalize;
    color: var(--white-color);
    line-height: 1;
    padding: 0 0 .75rem 0;
    margin: -0.12rem 0 1.5rem 0;
}

.footer-content h3:before, .footer-content h3:after {
    content: '';
    position: absolute;
    left: 0; bottom: 0;
    height: 2px;
}

.footer-content h3:before { width: 65px; background-color: var(--cam-vang-color); }
.footer-content h3:after {
    width: 18px;
    border: solid rgba(0, 0, 0, 0.85); 
    border-width: 0 4px 0;
    background-color: transparent;
    left: 38px;
    animation: footerLine 7s linear infinite;
}

.footer-content ul li { margin-bottom: .5rem; }
.footer-content ul li a { transition: padding-left 0.3s ease; }

.footer-content ul li a:before {
    padding-right: .5rem;
    content: "\f00c"; 
    font-weight: 600;
    font-family: var(--icon-font, "Font Awesome 7 Free"); 
    transform: none;
    font-size: 0.8em;
    background-color: transparent;
    border: none;
    color: inherit;
    display: inline-block;
}

.footer-content ul li a:hover { padding-left: 1.25rem; color: var(--cam-vang-color); }

/* --- Highlighted Footer Section (.footer-section) --- */
.footer-section {
    background-color: #001f3f;
    color: #ffffff;
    padding: 60px 20px 40px;
}

/* Footer Title Highlight */
.footer-title {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 2rem;
    color: #FFC107; /* Amber */
    border-bottom: 2px solid #FF7F50;
    display: inline-block;
    padding-bottom: 10px;
    text-shadow: 0 0 10px rgba(255, 193, 7, 0.5), 0 0 5px rgba(255, 193, 7, 0.5);
    text-transform: uppercase;
}

/* Footer Columns */
.contact-info p { margin-bottom: 15px; font-size: 15px; display: flex; align-items: center; }
.contact-info i { color: #FFC107; margin-right: 10px; font-size: 18px; }

/* Phone Override in Footer */
.footer-section .phone-number { font-size: 18px; font-weight: 700; color: #FF7F50; padding: 0; }

.footer-cta a {
    display: inline-block;
    background-color: #FF7F50;
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
    text-decoration: none;
    padding: 12px 25px;
    border-radius: 5px;
    margin-top: 20px;
    transition: background-color 0.3s ease;
}
.footer-cta a:hover { background-color: #e56d45; }

.footer-links ul { list-style: none; padding: 0; }
.footer-links ul li { margin-bottom: 10px; }
.footer-links ul li a { color: #cccccc; text-decoration: none; transition: color 0.3s; display: flex; align-items: center; }
.footer-links ul li a:hover { color: #FFC107; }
.footer-links i { margin-right: 8px; font-size: 12px; }

.social-icons a { color: #ffffff; font-size: 24px; margin-right: 15px; transition: color 0.3s; }
.social-icons a:hover { color: #FFC107; }

/* Responsive Footer */
@media (max-width: 768px) {
    .footer-col-1, .footer-col-2 { flex-basis: 100%; margin-bottom: 30px; }
}