/* ===================================================================
   layout.css — header, menu chính, chân trang, CTA nổi, CTA mobile
   Nạp SAU base.css, TRƯỚC components.css.

   Header là SOLID + STICKY ở mọi trang (kể cả trang chủ). Bộ khung cũ
   dùng header trong suốt phủ trên hero; ở site này hero chứa form đặt xe
   nên nền trong suốt làm form và menu tranh nhau độ tương phản.
   =================================================================== */

/* ============================================================
   HEADER
   ============================================================ */

.site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    background: var(--c-white);
    box-shadow: var(--shadow-xs);
    transition: box-shadow var(--dur) var(--ease);
}
.site-header.is-scrolled { box-shadow: var(--shadow-sm); }

/* ---- Dải trên: địa chỉ + hotline (chỉ desktop) ---- */
.header-topbar {
    background: var(--c-primary-darker);
    color: rgba(255, 255, 255, .78);
    font-size: var(--fs-xs);
    padding-top: 5px;
    padding-bottom: 5px;
}
.header-topbar .container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-4);
    min-height: 34px;
}
.topbar-info {
    display: flex;
    align-items: center;
    gap: var(--sp-5);
    justify-content: space-between;
    width: 100%;
}
.topbar-info span,
.topbar-info a { display: inline-flex; align-items: center; gap: .45em; color: inherit; }
.topbar-info i { color: var(--c-primary-soft); font-size: .95em; }
.topbar-info a:hover { color: #fff; }
.topbar-actions {display: flex;align-items: center;gap: var(--sp-4);display: none;}
.topbar-actions a{color: #fff;}
/* ---- Hàng chính ---- */
.header-main > .container {
    display: flex;
    align-items: center;
    gap: var(--sp-5);
    min-height: var(--header-h);
}

.header-brand {flex: 0 0 auto;padding-top: 10px;padding-bottom: 10px;}
.header-brand a { display: block; }
.header-logo {max-height: 80px;width: auto;}
.header-logo-text {
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: var(--fw-black);
    color: var(--c-primary);
    letter-spacing: -.01em;
    line-height: 1.1;
}

.header-nav { flex: 1 1 auto; min-width: 0; }
.header-actions { flex: 0 0 auto; display: flex; align-items: center; gap: var(--sp-3); }

/* ---- Menu chính (desktop) ----
   Markup do FrontendLayoutService.BuildMenuNodesHtml sinh:
   ul.main-nav > li.menu-item.level-1[.has-children][.is-active] > a  (+ ul.submenu) */
.main-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .15rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.main-nav .menu-item { position: relative; }
.main-nav .menu-item > a {
    display: block;
    padding: 10px 10px;
    font-size: 16px;
    font-weight: 600;
    color: var(--c-ink);
    white-space: nowrap;
    border-radius: var(--radius-xs);
    text-transform: capitalize;
    /* font-family: "Josefin Sans", sans-serif; */
}
.main-nav .menu-item > a:hover { color: var(--c-primary); background: var(--c-primary-mist); }

/* Gạch đỏ dưới mục đang xem — dấu hiệu vị trí duy nhất, không đổi nền. */
.main-nav .menu-item.is-active > a { color: var(--c-primary); }
.main-nav .menu-item.is-active > a::after {
    content: "";
    display: block;
    height: var(--rule);
    margin-top: .34rem;
    background: var(--c-accent);
    border-radius: 2px;
}
.main-nav .menu-item.has-children > a::before {
    content: "\f107";               /* fa-angle-down */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    float: right;
    margin-left: .4em;
    font-size: .85em;
    opacity: .55;
}

/* ---- Menu con (desktop: đổ xuống) ---- */
.main-nav .submenu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 5;
    min-width: 232px;
    margin: 0;
    padding: .4rem 0;
    list-style: none;
    background: var(--c-white);
    border-top: var(--rule) solid var(--c-accent);
    border-radius: 0 0 var(--radius) var(--radius);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
}
.main-nav .menu-item:hover > .submenu,
.main-nav .menu-item:focus-within > .submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.main-nav .submenu .menu-item > a {
    padding: .55rem 1rem;
    border-radius: 0;
    white-space: normal;
    font-weight: var(--fw-normal);
}
.main-nav .submenu .menu-item.is-active > a::after { display: none; }
.main-nav .submenu .menu-item.is-active > a { color: var(--c-accent); font-weight: var(--fw-medium); }
.main-nav .submenu .level-3 { top: 0; left: 100%; border-radius: var(--radius); }

/* ---- Nút gọi trên header ----
   Nút được bấm nhiều nhất của một site thuê xe — luôn hiện, kể cả mobile. */
.btn-call-header {
    display: inline-flex;
    align-items: center;
    gap: .5em;
    padding: .3rem 1.05rem;
    font-family: var(--font-num);
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    color: #fff;
    background: var(--c-accent);
    box-shadow: var(--shadow-accent);
    white-space: nowrap;
    border-radius: 30px;
    padding-left: 5px;
}
.btn-call-header:hover { background: var(--c-accent-dark); color: #fff; }
.btn-call-header i {font-size: 1.2em;width: 40px;height: 40px;line-height: 30px;background-color: #ffffff38;text-align: center;border-radius: 50%;display: flex;align-items: center;justify-content: center;}
.btn-call-header .btn-call-label {
    display: block;
    font-size: var(--fs-xs);
    font-weight: var(--fw-normal);
    opacity: .82;
    line-height: 1.1;
}
.btn-call-header .btn-call-num {display: block;line-height: 1.15;margin-top: 5px;/* letter-spacing: .1em; */}

/* Nút gọi THỨ HAI (số phụ) — nền xanh. Hai nút đỏ cạnh nhau thì không còn nút nào
   là hành động chính; xanh giữ được thứ bậc mà vẫn cùng một kiểu nút. */
.btn-call-header-alt { background: var(--c-primary); box-shadow: var(--shadow-sm); }
.btn-call-header-alt:hover { background: var(--c-primary-dark); }

.header-search-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: var(--c-primary);
    background: var(--c-primary-mist);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
}
.header-search-btn:hover { background: var(--c-primary); color: #fff; }

.mobile-menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    font-size: 1.15rem;
    color: var(--c-primary);
    background: var(--c-primary-mist);
    border: 0;
    border-radius: var(--radius);
    cursor: pointer;
}

/* ---- Ô tìm kiếm bật/tắt ---- */
.header-search-panel {
    display: none;
    border-top: 1px solid var(--c-line);
    background: var(--c-bg-soft);
    padding-block: var(--sp-3);
}
.header-search-panel.is-open { display: block; }
.header-search-panel .search-inline { display: flex; gap: var(--sp-2); }
.header-search-panel input[type="search"],
.header-search-panel input[type="text"] {
    flex: 1 1 auto;
    padding: .62rem .9rem;
    font-size: var(--fs-sm);
    border: 1px solid var(--c-line);
    border-radius: var(--radius);
    background: #fff;
}

/* ---- Nút chuyển ngôn ngữ ----
   Tự ẩn khi site chỉ còn 1 ngôn ngữ (service không render gì). */
.lang-switch { display: inline-flex; align-items: center; gap: .3rem; }
.lang-switch a {
    padding: .1rem .42rem;
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    color: inherit;
    border-radius: var(--radius-xs);
    text-transform: uppercase;
}
.lang-switch a.active { background: var(--c-accent); color: #fff; }

/* ============================================================
   MENU MOBILE (offcanvas)
   ⚠️ MỌI rule cho trạng thái mobile PHẢI nằm trong media query dưới.
   Để ngoài là menu xếp dọc ngay trên desktop và vỡ header.

   Ngưỡng 1200px (khớp offcanvas-xl / d-xl-none trong MasterPage.master):
   menu tiếng Việt 8 mục + logo + nút gọi KHÔNG đủ chỗ trên một hàng khi
   container còn 960px, menu sẽ tràn đè lên nút gọi. Đổi ngưỡng ở đây thì
   phải đổi cả offcanvas-xl và các lớp d-xl-* bên master, nếu không menu
   xếp dọc mà hamburger vẫn ẩn — người dùng mất hẳn menu.
   ============================================================ */
@media (max-width: 1199.98px) {
    .site-nav-shell { width: min(320px, 86vw); }
    .site-nav-shell .offcanvas-header {
        border-bottom: 1px solid var(--c-line);
        background: var(--c-primary-darker);
    }
    .site-nav-shell .offcanvas-header .btn-close { filter: invert(1) grayscale(1) brightness(2); }
    .site-nav-shell .offcanvas-title .header-logo { max-height: 40px; }
    .site-nav-shell .offcanvas-title .header-logo-text { color: #fff; font-size: 1.05rem; }
    .site-nav-shell .offcanvas-body { padding: 0; display: flex; flex-direction: column; }

    .main-nav {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        justify-content: flex-start;
    }
    .main-nav .menu-item { position: static; border-bottom: 1px solid var(--c-line-soft); }
    .main-nav .menu-item > a {
        padding: .85rem 1.1rem;
        font-size: 1rem;
        border-radius: 0;
        white-space: normal;
    }
    .main-nav .menu-item.is-active > a {
        background: var(--c-primary-mist);
        box-shadow: inset var(--rule) 0 0 var(--c-accent);
    }
    .main-nav .menu-item.is-active > a::after { display: none; }
    .main-nav .menu-item.has-children > a::before { opacity: .8; }

    /* Menu con: luôn mở, thụt lề — bấm-để-mở trên mobile chỉ thêm một cú bấm. */
    .main-nav .submenu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        min-width: 0;
        padding: 0;
        border-top: 0;
        border-radius: 0;
        box-shadow: none;
        background: var(--c-bg-soft);
    }
    .main-nav .submenu .menu-item > a { padding-left: 2rem; font-size: var(--fs-sm); }

    .nav-actions {
        display: flex;
        flex-direction: column;
        gap: var(--sp-2);
        padding: var(--sp-4) 1.1rem var(--sp-5);
        margin-top: auto;
    }
    .nav-actions > * { justify-content: center; width: 100%; }

}

/* Header thu nhỏ: chỉ từ 992px trở xuống. Khoảng 992–1199px tuy đã dùng
   offcanvas nhưng vẫn còn thừa chỗ cho logo lớn và nút gọi đầy đủ. */
@media (max-width: 991.98px) {
    .header-main > .container { min-height: var(--header-h-sm); gap: var(--sp-3); }
    .header-logo { max-height: 40px; }
    .btn-call-header { padding: .5rem .7rem; }
    .btn-call-header .btn-call-label { display: none; }
}

@media (max-width: 575.98px) {
    .btn-call-header .btn-call-num { display: none; }
    .btn-call-header {width: 42px;height: 42px;padding: 0;justify-content: center;align-items: center;display: flex;gap: 0;}
    /* Hai nút gọi + hamburger trên khung 360–575px: bóp icon lại cho khỏi
       đẩy logo xuống dòng. */
    .header-actions { gap: var(--sp-2); }
    .btn-call-header i {width: 34px;height: 34px;font-size: 1.05em;}
}

/* ============================================================
   CHÂN TRANG
   ============================================================ */

.site-footer { background: var(--c-primary-darker); color: rgba(255, 255, 255, .72); }
.site-footer a { color: rgba(255, 255, 255, .78); }
.site-footer a:hover { color: #fff; }

.footer-main { padding-block: var(--sp-8) var(--sp-6); }

.footer-title {
    margin-bottom: var(--sp-4);
    font-size: 1rem;
    font-weight: var(--fw-black);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #fff;
}
.footer-title::after {
    content: "";
    display: block;
    width: 34px;
    height: var(--rule);
    margin-top: .55rem;
    background: var(--c-accent);
}

.footer-brand { margin-bottom: var(--sp-4); }
.footer-brand .footer-logo { max-height: 58px; width: auto; }
.footer-brand .header-logo-text { color: #fff; }
.footer-desc { font-size: var(--fs-sm); margin-bottom: var(--sp-4); }
/* Cột 1 xếp chồng logo → mô tả → tiêu đề "Thông tin liên hệ" nên tiêu đề cần
   tách khỏi đoạn mô tả phía trên. */
.footer-desc + .footer-title { margin-top: var(--sp-5); }

.footer-contact { display: grid; gap: .55rem; font-size: var(--fs-sm); }
.footer-contact p{margin-bottom: 0px;}
.footer-contact p i{margin-right: 13px;}
.footer-contact > div,
.footer-contact > a { display: flex; align-items: flex-start; gap: .6em; }
.footer-contact i {
    flex: 0 0 auto;
    width: 1.1em;
    margin-top: .3em;
    color: #fff;
}
.footer-hours { color: rgba(255, 255, 255, .62); }

.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links li { margin-bottom: .5rem; }
.footer-links li > a {
    display: inline-flex;
    align-items: baseline;
    gap: .5em;
    font-size: var(--fs-sm);
}
.footer-links li > a::before {
    content: "";
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    background: var(--c-accent);
    transform: rotate(45deg);
}
.footer-links .submenu { display: none; }   /* chân trang chỉ 1 cấp */

.socials { display: flex; gap: .5rem; margin-top: var(--sp-4); }
.socials a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: #fff;
    background: rgba(255, 255, 255, .1);
    border-radius: var(--radius);
}
.socials a:hover { background: var(--c-accent); }

.footer-fanpage, .footer-map { border-radius: var(--radius); overflow: hidden; }
/* Page Plugin dựng nội dung đúng bằng tham số width=340 trong MasterPage.master.cs,
   nó KHÔNG co giãn theo iframe. Nên chặn trần 340 (khỏi hở dải trắng bên phải khi
   cột rộng hơn) và cho co lại 100% ở màn hình hẹp (khỏi tràn ngang). */
.footer-fanpage > iframe { display: block; width: 100%; max-width: 340px; }
.footer-map iframe { display: block; width: 100%; height: 220px; border: 0; filter: grayscale(.2); }

.footer-bottom {
    padding-block: var(--sp-4);
    border-top: 1px solid rgba(255, 255, 255, .1);
    font-size: var(--fs-xs);
}
.footer-bottom .copyright {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: left;
}
/* Ghi công đơn vị thiết kế — .copyright là flex space-between nên span này tự nằm
   ở đầu kia của dòng. Gạch chân để nhận ra là link trên nền tối, nơi màu chữ và
   màu link gần như nhau. */
.footer-bottom .credit a {
    /* color: #fff; */
    /* text-decoration: underline; */
    /* text-underline-offset: 3px; */
}
.footer-bottom .credit a:hover { color: var(--c-primary-soft); }

/* ---- Dải CTA cuối chân trang (khối nội dung) ---- */
.footer-cta {
    position: relative;
    overflow: hidden;
    padding-block: var(--sp-7);
    background: linear-gradient(105deg, var(--c-primary-darker) 0%, var(--c-primary) 62%, var(--c-primary-soft) 100%);
    color: #fff;
}
/* Dải chéo mờ — lặp lại motif hình khối chéo của nhận diện in sẵn. */
.footer-cta::after {
    content: "";
    position: absolute;
    inset: -20% -10% -20% 62%;
    background: rgba(255, 255, 255, .06);
    transform: skewX(-16deg);
    pointer-events: none;
}
.footer-cta-inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-6);
    flex-wrap: wrap;
    text-align: center;
}
.footer-cta-title {
    margin: 0 0 .35rem;
    font-size: var(--fs-statement);
    font-weight: var(--fw-black);
    color: #fff;
    line-height: var(--lh-tight);
    font-family: "Josefin Sans", sans-serif;
}
.footer-cta-desc { margin: 0; color: rgba(255, 255, 255, .84); font-size: var(--fs-lead); }
.footer-cta-actions { display: flex; gap: var(--sp-4); flex-wrap: wrap; justify-content: center; }

/* Ba nút của dải CTA này là lời mời gọi cuối cùng trên MỌI trang —
   khách yêu cầu 03/09/2026 cho to hẳn lên so với nút thường. */
.footer-cta-actions .btn-book,
.footer-cta-actions .btn-outline,
.footer-cta-actions .btn-surface,
.footer-cta-actions .btn-whatsapp {
    padding: 1.15rem 2.4rem;
    font-size: 1.2rem;
    font-weight: var(--fw-bold);
}
.footer-cta-actions i { font-size: 1.1em; }

@media (max-width: 575.98px) {
    .footer-cta-actions { width: 100%; }
    .footer-cta-actions .btn-book,
    .footer-cta-actions .btn-outline,
    .footer-cta-actions .btn-surface,
    .footer-cta-actions .btn-whatsapp {
        flex: 1 1 100%;
        padding: 1rem 1.4rem;
        font-size: 1.08rem;
    }
}

/* ============================================================
   CTA NỔI (góc dưới phải, desktop) + CTA ĐÁY (mobile)
   ============================================================ */

.float-cta {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: var(--z-float);
    display: flex;
    flex-direction: column;
    gap: .55rem;
}
.float-cta-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    font-size: 1.15rem;
    color: #fff;
    border-radius: 50%;
    box-shadow: var(--shadow);
    transition: transform var(--dur) var(--ease);
}
.float-cta-btn:hover { transform: translateY(-2px); color: #fff; }
.float-cta-phone { background: var(--c-accent); }
.float-cta-quote { background: var(--c-primary); }
.float-cta-map { background: var(--c-primary-dark); }
.float-cta-top { background: rgba(16, 32, 47, .55); }
/* Màu nhận diện của bên thứ ba — không thuộc bảng màu thương hiệu. */
.float-cta-whatsapp { background: #25d366; }
/* Nút Zalo dùng LOGO SVG có sẵn (Frontend/Assets/images/icon-zalo.svg) — logo đó
   xanh trên nền trắng, nên nút phải nền TRẮNG. Đặt nền xanh là phần vỏ xanh của
   logo chìm mất, chỉ còn bong bóng xám lơ lửng. */
.float-cta-zalo {
    background: var(--c-white);
    border: 1px solid var(--c-line);
    padding: 0;
    overflow: hidden;
}
.float-cta-zalo:hover { background: var(--c-white); }
/* Logo lấp đầy nút: thân logo màu sáng, để nhỏ giữa vòng trắng thì chỉ còn
   thấy chữ "Zalo" lơ lửng, mất hẳn hình khối nhận ra được từ xa. */
.float-cta-img { width: 100%; height: 100%; border-radius: 50%; display: block; }

.float-cta-text {
    position: absolute;
    right: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%) translateX(6px);
    padding: .3rem .6rem;
    font-size: var(--fs-xs);
    white-space: nowrap;
    color: #fff;
    background: rgba(16, 32, 47, .9);
    border-radius: var(--radius-xs);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.float-cta-btn:hover .float-cta-text { opacity: 1; transform: translateY(-50%) translateX(0); }

/* Vòng sóng quanh nút gọi — chỉ trên nút gọi, tắt khi user giảm chuyển động. */
.float-cta-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid var(--c-accent);
    animation: cta-ring 1.9s ease-out infinite;
    pointer-events: none;
}
@keyframes cta-ring {
    0%   { transform: scale(1);    opacity: .7; }
    100% { transform: scale(1.75); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .float-cta-ring { animation: none; opacity: 0; } }

/* CTA đáy màn hình cho mobile: gọi / đặt xe / Zalo. */
.mobile-cta {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: var(--z-float);
    display: none;
    background: var(--c-white);
    border-top: 1px solid var(--c-line);
    box-shadow: 0 -4px 16px rgba(16, 32, 47, .1);
    padding-bottom: env(safe-area-inset-bottom);
}
.mobile-cta-btn {
    flex: 1 1 0;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .18rem;
    padding: .55rem .3rem;
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    color: var(--c-ink);
}
.mobile-cta-btn i { font-size: 1.1rem; }
.mobile-cta-call { color: var(--c-accent); }
.mobile-cta-book { color: var(--c-primary); }
.mobile-cta-whatsapp { color: #25d366; }
.mobile-cta-zalo { color: #0068ff; }
.mobile-cta-img { width: 26px; height: 26px; display: block; margin-bottom: -2px; }


@media (max-width: 767.98px) {
    .float-cta { display: none; }
    .mobile-cta { display: flex; }
    /* Chừa chỗ cho dải CTA đáy, nếu không nó che mất dòng cuối chân trang. */
    body { padding-bottom: 62px; }
    /* Offcanvas là position:fixed nên KHÔNG ăn padding-bottom của body —
       phải tự chừa chỗ, nếu không dải CTA đáy che mất nút cuối trong menu. */
    .site-nav-shell .nav-actions { padding-bottom: calc(var(--sp-5) + 62px); }
}