/* ===================================================================
   Nam Hà Highfarm — Layout: header, menu, chuyển ngôn ngữ, footer, CTA nổi

   Bố cục theo docs/Home-page.png. Hai khác biệt lớn so với bộ khung:

   1. HEADER NỀN SÁNG, KHÔNG phủ lên hero. Bộ khung đặt header `position: fixed`
      trong suốt đè lên ảnh hero của trang chủ, nên trang con phải bù bằng
      `.page-body-offset { padding-top: var(--header-h) }`. Thiết kế này để header
      trắng đứng riêng phía trên, nên dùng `position: sticky`: header vẫn dính khi
      cuộn nhưng CHIẾM CHỖ trong dòng chảy, không cần bù padding và không có
      chuyện chiều cao header lệch với biến --header-h.

   2. CHÂN TRANG 4 CỘT (thương hiệu · giới thiệu · năng lực · liên hệ) + thanh
      dưới có mạng xã hội và nút chuyển ngôn ngữ.
   =================================================================== */

/* ================================================== HEADER ========= */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: var(--c-white);
    border-bottom: 1px solid var(--c-line-soft);
    transition: box-shadow var(--t);
    padding-top: 10px;
}

/* Trang chủ và trang con dùng CHUNG một header sáng — không có biến thể trong suốt.
   Giữ lại selector .is-home để main.js không phải sửa. */
.site-header.is-home,
.site-header.is-inner { background: var(--c-white); }
.site-header.is-stuck {box-shadow: var(--shadow-sm);padding-top: 0;}

.header-inner {
    display: flex;
    align-items: center;
    gap: 24px;
}

.header-brand { flex: 0 0 auto; padding: 12px 0; }
.navbar-brand { display: block; }
.navbar-brand img {height: 70px;width: auto;transition: height var(--t);}
.site-header.is-stuck .navbar-brand img { height: 48px; }

.header-right {
    margin-left: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

/* ---- Hàng trên: ngôn ngữ + hotline + nút Yêu cầu báo giá ---- */
.header-top { align-items: center; gap: 16px; }
.site-header.is-stuck .header-top { display: none !important; }

.header-phone {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--c-ink);
    font-weight: 700;
    font-size: 16px;
    font-family: "Inter", sans-serif;
}
.header-phone i { color: var(--c-primary-soft); }
.header-phone:hover { color: var(--c-primary); }

/* ---- Nút CTA của header ---- */
.btn-book {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px 7px;
    border-radius: var(--radius);
    background: var(--c-primary);
    color: var(--c-white);
    font-weight: 600;
    font-size: var(--fs-small);
    white-space: nowrap;
    transition: background var(--t-fast);
}
.btn-book:hover { background: var(--c-primary-dark); color: var(--c-white); }

/* ---- Chuyển ngôn ngữ ----
   Nhiều hơn 1 ngôn ngữ mới hiện (RenderLanguageSwitcher tự ẩn khi chỉ còn 1). */
.lang-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--c-muted);
}

/* Quả địa cầu là phần tử THẬT trong flex, không phải ::before định vị tuyệt đối —
   ô chọn tự lùi sang phải theo nó, khỏi phải canh padding bằng số cố định. */
.lang-switch-icon {font-size: .8rem;pointer-events: none;padding-top: 3px;}

/* Mũi tên: vẽ bằng ::after của khối cha và cho xuyên chuột xuống ô chọn bên dưới.
   appearance:none bỏ mũi tên mặc định của trình duyệt, vốn mỗi hệ điều hành một kiểu. */
.lang-switch::after {
    content: "\f078";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: .6rem;
    position: absolute;
    right: 8px;
    pointer-events: none;
}

.lang-switch-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding: 4px 22px 4px 8px;
    border: none !IMPORTANT;
    border-radius: var(--radius);
    background: transparent;
    color: #000;
    font-family: inherit;
    font-size: .8125rem;
    font-weight: 500;
    line-height: 1.4;
    cursor: pointer;
    transition: border-color var(--t-fast), color var(--t-fast);
    padding-left: 0;
}
.lang-switch-select:hover { border-color: var(--c-primary); color: var(--c-primary); }
.lang-switch-select:focus-visible {/* outline: 2px solid var(--c-primary); */outline-offset: 1px;}

/* Danh sách xổ ra do hệ điều hành vẽ, không nhận màu trong suốt của ô —
   phải khai nền/chữ riêng, nếu không bản ở chân trang ra chữ trắng trên nền trắng. */
.lang-switch-select option { background: var(--c-white); color: var(--c-ink); }

/* Chỉ hiện khi tắt JavaScript — <select> lúc đó không đi đâu được. */
.lang-switch-fallback { display: inline-flex; align-items: center; gap: 2px; }
.lang-switch-item {
    padding: 4px 8px;
    border-radius: var(--radius);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--c-muted);
    transition: background var(--t-fast), color var(--t-fast);
}
.lang-switch-item:hover { background: var(--c-primary-mist); color: var(--c-primary); }
.lang-switch-item.is-active { background: var(--c-primary); color: var(--c-white); }

/* ---- Hàng dưới: menu chính ---- */
.header-nav-row {display: flex;align-items: center;gap: 14px;margin-top: 10px;}

.main-nav {display: flex;align-items: center;gap: 15px;list-style: none;margin: 0;padding: 0;}

.main-nav .menu-item > a {
    display: block;
    padding: 7px 10px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #2F2F2F;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    font-family: "Inter", sans-serif;
}
.main-nav .menu-item > a:hover { color: var(--c-primary); }
.main-nav .menu-item.is-active > a,
.main-nav .menu-item > a.active { color: var(--c-primary); border-bottom-color: var(--c-primary); }

.mobile-menu-btn {
    margin-left: auto;
    width: 42px; height: 42px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent;
    border: 1px solid var(--c-line);
    border-radius: var(--radius);
    color: var(--c-primary);
    font-size: 1.125rem;
    cursor: pointer;
}

/* Offcanvas — CHỈ áp dụng dưới 992px.
   Trên desktop Bootstrap biến .offcanvas-lg thành khối tĩnh; không giới hạn bằng
   media query thì menu xếp DỌC ngay trên desktop và vỡ cả header. */
@media (max-width: 991.98px) {
    .site-nav-shell { background: var(--c-white); color: var(--c-ink); }
    .site-nav-shell .offcanvas-header { border-bottom: 1px solid var(--c-line-soft); }
    .mobile-menu-logo img { height: 46px; width: auto; }
    .site-nav-shell .main-nav { flex-direction: column; align-items: stretch; gap: 0; }
    .site-nav-shell .main-nav .menu-item > a {
        padding: 13px 4px;
        border-bottom: 1px solid var(--c-line-soft);
    }
    .site-nav-shell .main-nav .menu-item.is-active > a { border-bottom-color: var(--c-primary); }
    .nav-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }
}
@media (min-width: 992px) {
    .nav-actions { display: none; }
}

/* Header dính CHIẾM CHỖ sẵn trong dòng chảy -> trang con không cần bù padding.
   Giữ lại class để MasterPage không phải sửa; đặt 0 thay vì xoá để rõ chủ ý. */
.page-body-offset { padding-top: 0; }

/* ================================================== FOOTER ========= */
.site-footer {
    position: relative;
    background: var(--c-primary-darker);
    color: rgba(255, 255, 255, .72);
}

/* Vân nền chân trang: ảnh trang trí, đặt qua CSS vì nó thuộc về BỐ CỤC chứ không
   phải nội dung admin sửa. Ảnh hỏng thì chỉ mất vân, không vỡ gì. */
.site-footer::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("../../../Uploads/images/home/bg-chan-trang.jpg") center/cover no-repeat;
    opacity: .12;
    pointer-events: none;
}
.site-footer > * { position: relative; z-index: 1; }

.footer-main { padding: clamp(46px, 5vw, 64px) 0 40px; }

.footer-grid {
    display: grid;
    gap: 32px 40px;
    grid-template-columns: 1.4fr 1fr 1fr 1.3fr;
}

.footer-title {
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--c-white);
    margin-bottom: 22px;
    padding-bottom: 12px;
    position: relative;
}
.footer-title::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 44px; height: 2px;
    background: var(--c-accent);
}

.footer-brand { margin-bottom: 20px; }
.footer-logo img { height: 56px; width: auto; }

.footer-desc { margin-bottom: 22px; }
.footer-desc p {
    margin: 0;
    font-size: var(--fs-small);
    line-height: 1.75;
    color: rgba(255, 255, 255, .72);
    max-width: 40ch;
}

/* Nút "Nhận hồ sơ năng lực" — viền vàng trên nền tối, theo bản thiết kế */
.footer-catalogue {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 20px;
    border: 1px solid var(--c-accent);
    border-radius: var(--radius);
    color: var(--c-accent);
    font-size: var(--fs-small);
    font-weight: 600;
    transition: background var(--t-fast), color var(--t-fast);
}
.footer-catalogue:hover { background: var(--c-accent); color: var(--c-primary-darker); }

.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links li { margin-bottom: 12px; }
.footer-links a {
    display: inline-flex;
    align-items: flex-start;
    gap: 10px;
    color: rgba(255, 255, 255, .78);
    font-size: var(--fs-small);
}
.footer-links a::before { content: "\203A"; color: var(--c-accent); line-height: 1.35; }
.footer-links a:hover { color: var(--c-white); }

/* Thông tin liên hệ: icon tròn viền vàng theo bản thiết kế.
   BuildContactHtml sinh <p><i class="…"></i> …</p> — style theo đúng cấu trúc đó,
   đừng đổi selector mà không mở lại hàm sinh markup. */
.footer-contact p {
    display: flex;
    gap: 14px;
    margin-bottom: 16px;
    font-size: var(--fs-small);
    line-height: 1.6;
    align-items: flex-start;
}
.footer-contact i {
    flex: 0 0 34px;
    width: 34px; height: 34px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid rgba(200, 162, 74, .55);
    border-radius: 50%;
    color: var(--c-accent);
    font-size: .875rem;
    margin-top: 0;
}
/* Email / website dài không có dấu cách -> cho phép ngắt dòng, tránh tràn khỏi cột. */
.footer-contact p > span { min-width: 0; overflow-wrap: anywhere; }
.footer-contact a { color: rgba(255, 255, 255, .82); }
.footer-contact a:hover { color: var(--c-accent); }

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, .12);
    padding: 16px 0;
    font-size: .8125rem;
}
.footer-bottom-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.footer-bottom-right { display: flex; align-items: center; gap: 18px; }
.copyright { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 0; }
.copyright a { color: rgba(255, 255, 255, .8); }
.copyright a:hover { color: var(--c-accent); }

.footer-social { display: inline-flex; gap: 14px; }
.footer-social a {
    width: 30px; height: 30px;
    display: inline-flex; align-items: center; justify-content: center;
    color: rgba(255, 255, 255, .8);
    font-size: 1.0625rem;
}
.footer-social a:hover { color: var(--c-accent); }

/* Chọn ngôn ngữ ở chân trang: nền xanh đậm nên phải đảo màu so với bản ở header */
.footer-bottom .lang-switch { color: rgba(255, 255, 255, .78); }
.footer-bottom .lang-switch-select {border-color: rgba(255, 255, 255, .28);color: #fff;}
.footer-bottom .lang-switch-select:hover { border-color: var(--c-accent); color: var(--c-accent); }
.footer-bottom .lang-switch-select:focus-visible { outline-color: var(--c-accent); }
.footer-bottom .lang-switch-item { color: rgba(255, 255, 255, .78); }
.footer-bottom .lang-switch-item:hover { background: rgba(255, 255, 255, .12); color: var(--c-white); }
.footer-bottom .lang-switch-item.is-active { background: var(--c-accent); color: var(--c-primary-darker); }

/* Dưới 992px: khối thương hiệu (cột 1) và khối liên hệ (cột cuối) trải hết chiều ngang,
   còn hai danh sách link "Về chúng tôi" + "Năng lực" đứng cạnh nhau trên cùng một hàng.
   Xếp dọc cả bốn khối thì chân trang dài gấp đôi màn hình điện thoại. Thứ tự .footer-col
   trong MasterPage.master là: brand · links · capability · contact — đổi thứ tự markup
   thì phải sửa lại hai selector dưới đây. */
@media (max-width: 991.98px) {
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .footer-col-brand,
    .footer-col:last-child { grid-column: 1 / -1; }
    /* Hết chiều ngang rồi thì không cần bó mô tả trong 40ch nữa */
    .footer-desc p { max-width: 64ch; }
}
@media (max-width: 575.98px) {
    .footer-grid { gap: 28px 20px; }
    .footer-bottom-inner { justify-content: center; text-align: center; }
    /* Bảy icon mạng xã hội + ô chọn ngôn ngữ cộng lại rộng hơn container (420px trong
       358px ở viewport 390): không cho xuống dòng thì tràn ra ngoài và làm CẢ TRANG
       cuộn ngang được, chứ không chỉ hỏng chân trang. */
    .footer-bottom-right { flex-wrap: wrap; justify-content: center; gap: 12px 18px; }
    .footer-social {flex-wrap: wrap;justify-content: center;gap: 2px;}
}

/* ================================================== CTA NỔI ======== */
.float-cta {
    position: fixed;
    right: 18px; bottom: 18px;
    z-index: 1040;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.float-cta-btn {
    position: relative;
    width: 48px; height: 48px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--c-primary);
    color: var(--c-white);
    box-shadow: var(--shadow);
    transition: transform var(--t-fast), background var(--t-fast);
}
.float-cta-btn:hover { transform: translateY(-2px); color: var(--c-white); }
.float-cta-quote { background: var(--c-accent); color: var(--c-primary-dark); }
.float-cta-quote:hover { background: var(--c-accent-dark); color: var(--c-primary-dark); }
.float-cta-phone { background: var(--c-success); }
/* WhatsApp dung mau thuong hieu #25D366 — day la mau nhan dien, khong lay tu token */
.float-cta-whatsapp { background: #25d366; color: var(--c-white); }
.float-cta-whatsapp:hover { background: #1da851; color: var(--c-white); }
.float-cta-whatsapp i { font-size: 1.375rem; }
.float-cta-text { display: none; }

/* Vòng sóng nhấp nháy quanh nút chính */
.float-cta-ring {
    position: absolute; inset: 0;
    border-radius: 50%;
    border: 2px solid currentColor;
    opacity: .55;
    animation: ctaRing 2.2s ease-out infinite;
}
@keyframes ctaRing {
    0%   { transform: scale(1);    opacity: .55; }
    100% { transform: scale(1.55); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .float-cta-ring { animation: none; }
    html { scroll-behavior: auto; }
}

/* ============================================ THANH CTA DÍNH MOBILE */
/* Trên điện thoại phần lớn khách sẽ bấm gọi chứ không điền form.
   Ẩn hoàn toàn từ 768px trở lên; cụm .float-cta nổi vẫn giữ cho desktop. */
.mobile-cta { display: none; }

@media (max-width: 767.98px) {
    .mobile-cta {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1040;
        display: flex;
        background: var(--c-primary);
        border-top: 1px solid rgba(255, 255, 255, .14);
        box-shadow: 0 -6px 20px rgba(6, 18, 41, .28);
        padding-bottom: 0;
    }
    .mobile-cta-btn {
        flex: 1 1 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 8px 6px;
        font-size: 12px;
        font-weight: 600;
        color: var(--c-white);
        border-left: 1px solid rgba(255, 255, 255, .14);
        display: block;
        text-align: center;
    }
    .mobile-cta-btn:first-child {border-left: 0;display: block;text-align: center;}
    .mobile-cta-btn img { width: 18px; height: 18px; }
    .mobile-cta-btn i { font-size: 1.0625rem; }
    .mobile-cta-call { background: var(--c-success); }
    .mobile-cta-book {background: var(--c-accent);color: var(--c-primary-dark);display: block;text-align: center;}
    .mobile-cta-whatsapp { background: #25d366; }
    .mobile-cta-btn i{
        display: block;
        margin-bottom:5px
    }

    /* Chừa chỗ cho thanh dính, tránh che chân trang */
    body { padding-bottom: 58px; }

    /* Thanh CTA dính đã có Gọi / Đặt lịch / WhatsApp -> cụm nút nổi lặp lại
       y hệt và che mất nội dung. Ẩn hết, CHỈ giữ nút "lên đầu trang". */
    .float-cta-btn { display: none; }
    .float-cta-top {display: inline-flex;bottom: 50px;}

    /* Còn đúng 1 nút nên nhấc vừa đủ khỏi thanh CTA */
    .float-cta { bottom: 70px; }
}