/* ============================================================
   he-thong-trung-tam.css — phần riêng của trang Hệ thống trung tâm.

   Khung nền (header/footer), khối "10 sự thật" và khối "Tìm trung tâm"
   dùng lại nguyên CSS của trang chủ home-version-3. File này chỉ thêm:
     1. Khoảng đệm cho header cố định (trang chủ có hero tự bù, trang này không)
     2. Hero tiêu đề của trang
     3. Sửa lại khoảng cách cho hai section vốn nằm trong accordion
     4. Khối CTA chat với tư vấn viên
   ============================================================ */

/* ── 2. Hero tiêu đề trang ──────────────────────────────────── */
.htt-hero {
    width: 100%;
    padding: 40px 0 8px;
    background-color: var(--page-bg, #FAF5EE);
}

.htt-hero-container {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 50px;
}

/* MỘT khung trắng chứa tất cả: tiêu đề, câu dẫn, ba cam kết. */
.htt-hero-box {
    padding: 36px 40px 32px;
    background-color: #FFFFFF;
    border-radius: 20px;
    box-shadow: 0 4px 24px rgba(28, 119, 195, 0.08);
    text-align: center;
}

/* Tiêu đề gói gọn TRÊN MỘT HÀNG — cỡ chữ co theo bề ngang khung bằng
   clamp(), thay vì cố định. white-space: nowrap là chốt chặn cuối, phòng khi
   phông tải chậm hoặc trình duyệt làm tròn khác đi vài pixel.

   Dùng ĐÚNG format tiêu đề của .main-content-center-loaction h2
   (new-style-revamp2025.css dòng 921): Brauer NeueVN 700, #2576B9,
   line-height 120%, letter-spacing 1px — để hai tiêu đề lớn trên trang
   nhìn cùng một hệ. Chỉ cỡ chữ co lại cho vừa một hàng (bản gốc 44px). */
.htt-hero-title {
    margin: 0 0 12px;
    font-family: "Brauer NeueVN";
    font-weight: 700;
    font-size: 34px;
    font-style: normal;
    line-height: 120%;
    letter-spacing: 1px;
    color: #2576B9;
}

@media (min-width: 1024px) {
    /* Dự phòng cho trình duyệt chưa hỗ trợ container query (Safari < 16,
       Chrome < 105): dùng vw thay cqi. Khung rộng khoảng 79% bề ngang cửa sổ
       nên 2.95cqi ≈ 2.33vw. */
    .htt-hero-title {
        font-size: clamp(26px, 2.92vw, 40px);
        white-space: nowrap;
    }
}

@supports (container-type: inline-size) {
    @media (min-width: 1024px) {
        .htt-hero-box {
            container-type: inline-size;
        }
        /* Đo thật với Brauer NeueVN: câu tiêu đề rộng 24.0em, nên cỡ tối đa
           vừa một hàng = bề_ngang / 24 ≈ 4.16% bề ngang khung; lấy 3.7cqi để
           còn dư biên.

           Brauer HẸP HƠN Nunito nhiều (24em so với ~34em cho cùng câu), nên
           sau khi đổi font phải nâng hệ số — để nguyên 2.95cqi thì chữ nhỏ
           hơn mức có thể. Trần 40px, gần bản gốc 44px của
           .main-content-center-loaction h2. */
        .htt-hero-title {
            font-size: clamp(26px, 3.7cqi, 40px);
        }
    }
}

/* Ngắt dòng CHỈ trên di động: "75+ trung tâm Apollo:" / "Bệ phóng...".
   Trên desktop tiêu đề đã gói gọn một hàng nhờ clamp() + nowrap, nên <br>
   này phải vô hiệu — display:none là đủ, không cần đụng tới nowrap. */
.htt-br-mobile {
    display: none;
}

.htt-hero-sub {
    max-width: 820px;
    margin: 0 auto;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #4A4A4A;
}

/* Câu dẫn gói gọn TRÊN MỘT HÀNG.
   Đo thật: câu 117 ký tự ở cỡ 16px cần 955px, nhưng max-width khoá ở 820px
   nên bị xuống 2 dòng — trong khi khung còn tới 1140px.

   Bỏ giới hạn 820px và cho cỡ chữ co theo bề ngang khung. Hệ số: câu này
   rộng 59.7em, nên cỡ tối đa = bề_ngang / 59.7 ≈ 1.68% bề ngang; lấy
   1.55cqi để còn dư biên. Trần 17px cho cân với tiêu đề. */
@media (min-width: 1024px) {
    .htt-hero-sub {
        max-width: none;
        font-size: clamp(13px, 1.22vw, 17px);
        white-space: nowrap;
    }
}

@supports (container-type: inline-size) {
    @media (min-width: 1024px) {
        .htt-hero-sub {
            font-size: clamp(13px, 1.55cqi, 17px);
        }
    }
}

/* Ba cam kết giờ là ba cột chữ trong cùng khung, ngăn nhau bằng đường kẻ
   mảnh thay vì ba thẻ nổi — đỡ tầng lớp, cao chỉ còn khoảng một nửa. */
.htt-pillars {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin: 28px 0 0;
    padding: 24px 0 0;
    border-top: 1px solid #EDE6DB;
    list-style: none;
    text-align: left;
}

/* Icon bên trái, nội dung bên phải */
.htt-pillar {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.htt-pillar-icon {
    flex-shrink: 0;
    width: 57px;
    height: 57px;
    object-fit: contain;
    /* Ảnh gốc là khối vuông 192px có khoảng trắng quanh biểu tượng; kéo lên
       2px cho mép trên của hình thẳng hàng với mép trên chữ tiêu đề. */
    margin-top: -2px;
}

.htt-pillar-body {
    min-width: 0;
}

.htt-pillar + .htt-pillar {
    padding-left: 28px;
    border-left: 1px solid #EDE6DB;
}

.htt-pillar-title {
    margin: 0 0 6px;
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: 18px;
    line-height: 1.3;
    color: #1C77C3;
}

.htt-pillar-text {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    line-height: 1.55;
    color: #4A4A4A;
}

@media (max-width: 1023px) {
    .htt-hero-container {
        padding: 0 24px;
    }
    .htt-hero-box {
        padding: 28px 24px 26px;
    }
    .htt-hero-title {
        font-size: 28px;
    }
    /* Màn hẹp: xếp dọc, đường kẻ chuyển từ dọc sang ngang.
       Icon 57px cao hơn phần chữ nên canh giữa theo chiều dọc cho cân. */
    .htt-pillar {
        align-items: center;
    }
    .htt-pillar-icon {
        margin-top: 0;
    }
    .htt-pillars {
        grid-template-columns: 1fr;
        gap: 0;
        margin-top: 22px;
        padding-top: 18px;
    }
    .htt-pillar + .htt-pillar {
        margin-top: 16px;
        padding-top: 16px;
        padding-left: 0;
        border-left: 0;
        border-top: 1px solid #EDE6DB;
    }
}

@media (max-width: 767px) {
    .htt-hero {
        padding: 24px 0 4px;
    }
    .htt-hero-container {
        padding: 0 16px;
    }
    .htt-hero-box {
        padding: 24px 20px 22px;
        border-radius: 16px;
    }
    .htt-hero-title {
        font-size: 24px;
        /* Bỏ nowrap của nhánh desktop để <br> ăn, và để câu dài tự xuống
           dòng tiếp nếu màn quá hẹp. */
        white-space: normal;
    }
    .htt-br-mobile {
        display: inline;
    }
    .htt-hero-sub {
        font-size: 15px;
    }
    .htt-pillar-title {
        font-size: 17px;
    }
    .htt-pillar-text {
        font-size: 14px;
    }
    /* Di động: icon to hơn 30% nên cần canh lại cả khối —
       icon và chữ căn giữa theo chiều dọc cho cân, nới khoảng cách
       và giãn dòng giữa các cam kết. */
    .htt-pillar {
        align-items: center;
        gap: 14px;
    }
    .htt-pillar-icon {
        width: 49px;
        height: 49px;
        margin-top: 0;
    }
    .htt-pillar + .htt-pillar {
        margin-top: 18px;
        padding-top: 18px;
    }
}

/* ── 3. Hai section mượn từ trang chủ ────────────────────────
   Ở trang chủ chúng nằm trong .hv3-acc-panel-inner (có padding riêng).
   Đứng độc lập thì phải tự tạo nền và khoảng cách. */
.htt-centers {
    width: 100%;
    background-color: var(--page-bg, #FAF5EE);
}

/* Tiêu đề "Tìm trung tâm Apollo English gần bạn" của section gốc dùng
   .desktop / .mobile để đổi bản hiển thị — giữ nguyên hành vi đó. */
.htt-centers .center-location-apollo2025 {
    padding-top: 8px;
}

/* Khoảng 768px–1023px: bản gốc chỉ hạ khổ ảnh bản đồ ở max-width 767px
   (new-style-revamp2025-reponsive.css), nên trong dải máy tính bảng ảnh vẫn
   giữ nguyên 628px cứng và đẩy trang rộng hơn màn hình (tràn ngang).
   Chỉ sửa trong phạm vi trang này, không đụng file dùng chung. */
@media (min-width: 768px) and (max-width: 1023px) {
    .htt-centers .allcontent-center-location-apollo2025 {
        flex-wrap: wrap;
        padding: 56px 24px 40px;
        gap: 32px;
    }
    .htt-centers .main-content-center-loaction,
    .htt-centers .img-center-location-apollo2025 {
        width: 100%;
        min-width: 0;
    }
    .htt-centers .img-center-location-apollo2025 {
        height: auto;
        aspect-ratio: 628/423;
    }
    .htt-centers .img-center-location-apollo2025 img {
        width: 100%;
        height: auto;
        object-fit: cover;
    }
}

/* ── 4. CTA chat với tư vấn viên ─────────────────────────────
   Dùng lại .hv3-chat-panel của trang chủ; ở đây chỉ bọc thêm nền,
   khoảng đệm và nút hotline phụ. */
/* Nền dùng chung --page-bg (#FAF5EE) như .hv3-cta-section của trang chủ,
   không để trắng riêng — nếu không, dải trắng này cắt ngang mạch màu kem
   chạy suốt trang. */
.htt-cta {
    width: 100%;
    padding: 80px 0 96px;
    background-color: var(--page-bg, #FAF5EE);
}

.htt-cta-container {
    max-width: 1620px;
    margin: 0 auto;
    padding: 0 50px;
}

.htt-chat-hotline {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: #4A4A4A;
    text-decoration: none;
}

.htt-chat-hotline b {
    color: #1C77C3;
}

.htt-chat-hotline:hover b {
    text-decoration: underline;
}

@media (max-width: 767px) {
    .htt-cta {
        padding: 48px 0 56px;
    }
    .htt-cta-container {
        padding: 0 20px;
    }
    .htt-chat-hotline {
        font-size: 15px;
        text-align: center;
    }
}

/* ── 5. Danh sách kết quả của bản tổng (.center-result-item) ──
   Markup do center-location-apollo2025.js sinh ra. CSS gốc trong
   new-style-revamp2025.css dùng flex + gap 150px nên ba cột (tên | địa chỉ |
   SĐT) co giãn theo nội dung -> mỗi hàng lệch một kiểu, nhìn răng cưa.

   Đổi sang GRID với ba cột cố định: mọi hàng thẳng cột như bảng.

   CHỈ áp dụng từ 768px trở lên. Dưới mức đó markup khác hẳn (thẻ .mobile,
   tên nằm NGOÀI .center-result-item-content) và CSS gốc đã xếp dọc đúng ý —
   ép grid vào sẽ phá bố cục một cột của di động. */
@media (min-width: 768px) {
    .htt-centers .center-result-item-content {
        display: grid;
        grid-template-columns: minmax(0, 250px) minmax(0, 1fr) minmax(0, 170px);
        gap: 24px;
        align-items: center;
    }

    .htt-centers .center-result-item-content .center-name-link {
        width: auto;
        max-width: none;
        font-size: 16px;
        line-height: 1.4;
    }
}

/* Cỡ chữ ĐỒNG NHẤT cho địa chỉ và số điện thoại.
   CSS gốc đặt cả hai là 20px nhưng qua hai selector khác nhau; riêng SĐT
   dùng selector rất mạnh (#center-results-list .center-result-item.desktop
   .phone-contact a) nên đặt 16px ở cấp cha KHÔNG thắng được — phải viết
   selector cùng độ đặc hiệu trở lên. */
.htt-centers .center-address,
#center-results-list .center-result-item.desktop .phone-contact,
#center-results-list .center-result-item.desktop .phone-contact a,
#center-results-list .center-result-item.desktop .phone-contact a b {
    font-size: 16px;
    line-height: 1.4;
}

.htt-centers .center-address,
.htt-centers .phone-contact {
    min-width: 0;
}

/* Cơ sở có HAI số điện thoại: mỗi số một dòng thay vì nằm ngang.
   enhance-result-list.js tách thành hai thẻ <a> riêng; ở đây xếp dọc để
   cột SĐT chỉ cần rộng bằng MỘT số, nhường chỗ cho cột địa chỉ. */
@media (min-width: 768px) {
    /* Icon bên TRÁI, các số xếp dọc bên phải.
       enhance-result-list.js bọc các thẻ <a> vào .ttd-phone-lines, nên
       container chỉ có 2 con: icon | khối số. Không cần rule chồng chéo. */
    #center-results-list .center-result-item.desktop .phone-contact {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: 8px;
        min-width: 0;
        text-align: left;
    }

    #center-results-list .center-result-item.desktop .phone-contact .center-icon-wrap {
        flex-shrink: 0;
        margin-top: 2px;     /* thẳng hàng với dòng số đầu tiên */
    }

    .ttd-phone-lines {
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 0;
    }

    #center-results-list .center-result-item.desktop .phone-contact a {
        display: block;
        white-space: nowrap;
    }
}

.htt-centers .center-address > *:not(.center-icon-wrap) {
    min-width: 0;
}

/* Tên cơ sở giờ là nút định vị bản đồ (enhance-result-list.js gỡ href để
   không mở tab Google Maps nữa), nên tự tạo phản hồi khi rê chuột —
   thẻ <a> không còn href thì trình duyệt không tô màu link như trước. */
.htt-centers .center-name-link.js-focus-center {
    cursor: pointer;
}

.htt-centers .center-name-link.js-focus-center:hover {
    text-decoration: underline;
}

/* Viền focus cho người dùng bàn phím: nó không còn là link thật nên
   trình duyệt không tự vẽ viền. */
.htt-centers .center-name-link.js-focus-center:focus-visible {
    outline: 2px solid #1C77C3;
    outline-offset: 2px;
    border-radius: 4px;
}

/* ── Di động: ẨN HẲN bản đồ ──────────────────────────────────
   Khung bản đồ ở khổ điện thoại chỉ cao ~240px, popup vị trí che gần hết,
   thao tác kéo/zoom trên màn nhỏ cũng khó. Thay bằng nút "CHỈ ĐƯỜNG" mở
   thẳng Google Maps — app bản đồ trên máy làm việc đó tốt hơn nhiều. */
@media (max-width: 767px) {
    .htt-centers .img-center-location-apollo2025 {
        display: none;
    }
}

/* Nút CHỈ ĐƯỜNG trên DI ĐỘNG — thay cho bản đồ đã ẩn.
   enhance-result-list.js chèn vào cuối mỗi thẻ. */
@media (max-width: 767px) {
    /* Hai nút chia đôi một hàng. flex:1 + min-width:0 để chữ dài không đẩy
       nút kia hẹp lại — không có min-width:0 thì nội dung tối thiểu của flex
       item chặn việc co, và hàng sẽ tràn ngang. */
    .ttd-mobile-actions {
        display: flex;
        gap: 8px;
        margin-top: 10px;
        /* .center-result-item-content là flex-column, nên hàng nút cũng thành
           flex item và co theo nội dung — đo thực tế chỉ rộng 251px trong khi
           tên/địa chỉ chạy hết 434px. width:100% + flex-shrink:0 để nó thẳng
           hàng với hai dòng trên. */
        width: 100%;
        flex-shrink: 0;
    }

    .ttd-mobile-dir,
    .ttd-mobile-book {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        flex: 1 1 0;
        min-width: 0;
        min-height: 44px;          /* đủ lớn để chạm */
        padding: 10px 12px;
        border-radius: 999px;
        font-family: 'Montserrat', sans-serif;
        font-weight: 700;
        font-size: 13px;
        letter-spacing: 0.02em;
        text-decoration: none;
        white-space: nowrap;
        cursor: pointer;
    }

    .ttd-mobile-dir {
        background-color: #1C77C3;
        border: 1px solid #1C77C3;
        color: #FFFFFF;
    }

    .ttd-mobile-dir:hover,
    .ttd-mobile-dir:active {
        background-color: #17669F;
        border-color: #17669F;
        color: #FFFFFF;
    }

    /* Nút phụ: nền sáng chữ xanh, cùng lối với CTA "Đặt lịch gọi lại" dưới
       chân trang để bố mẹ nhận ra là cùng một hành động. */
    .ttd-mobile-book {
        background-color: #FFFFFF;
        border: 1px solid #1C77C3;
        color: #1C77C3;
    }

    .ttd-mobile-book:hover,
    .ttd-mobile-book:active {
        background-color: #1C77C3;
        color: #FFFFFF;
    }
}

/* ── 6. Danh sách kết quả trên DI ĐỘNG ───────────────────────
   Mỗi thẻ xếp dọc ba dòng: TÊN trung tâm → ĐỊA CHỈ → SỐ ĐIỆN THOẠI.

   Markup mobile khác desktop: .center-name-link nằm NGOÀI
   .center-result-item-content, nên thẻ cha phải là flex-column để tên đứng
   trên cùng, phần còn lại xuống dưới. */
@media (max-width: 767px) {
    .htt-centers .center-result-item.mobile {
        display: flex;
        flex-direction: column;
        gap: 6px;
        padding: 14px 16px 16px;
        background: #FFFFFF;
        border: 1px solid #E8E0D4;
        border-radius: 12px;
        margin-bottom: 12px;
    }

    /* Dòng 1: tên trung tâm */
    .htt-centers .center-result-item.mobile .center-name-link {
        display: block;
        width: 100%;
        font-family: 'Nunito', sans-serif;
        font-weight: 800;
        font-size: 17px;
        line-height: 1.35;
        color: #1C77C3;
    }

    /* Dòng 2 và 3 nằm trong khối này */
    .htt-centers .center-result-item.mobile .center-result-item-content {
        display: flex;
        flex-direction: column;
        gap: 6px;
        width: 100%;
        padding-top: 0;
        background: transparent;
    }

    /* Dòng 2: địa chỉ */
    .htt-centers .center-result-item.mobile .center-address {
        font-size: 14px;
        line-height: 1.5;
        color: #5A5A5A;
    }

    /* Dòng 3: số điện thoại — cùng cỡ chữ với địa chỉ */
    .htt-centers .center-result-item.mobile .phone-contact,
    .htt-centers .center-result-item.mobile .phone-contact a,
    .htt-centers .center-result-item.mobile .phone-contact a b {
        font-size: 14px;
        line-height: 1.5;
        font-weight: 600;
        color: #1C77C3;
    }

    .htt-centers .center-result-item.mobile .phone-contact a {
        padding-bottom: 0;
        background: transparent;
    }

    /* KHÔNG đụng .btn-find-on-map: bản gốc cố ý đặt display:none cho nút này
       ở khổ di động (new-style-revamp2025-reponsive.css). Trên di động bố mẹ
       bấm thẳng vào TÊN hoặc ĐỊA CHỈ là đã định vị bản đồ rồi
       (enhance-result-list.js gắn sự kiện), nên nút riêng là thừa. */
}

/* Nhãn "Di chuyển: ~1,2 km" — nearby-location.js gắn vào cuối dòng địa chỉ
   sau khi bố mẹ bấm "Trung tâm gần tôi". */
.ttd-distance {
    display: inline-block;
    margin-left: 10px;
    padding: 2px 10px;
    background-color: rgba(28, 119, 195, 0.08);
    border-radius: 999px;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.6;
    color: #1C77C3;
    white-space: nowrap;
}

@media (max-width: 767px) {
    /* Nhãn "Di chuyển: ~x km" nằm LIỀN sau địa chỉ như một phần mô tả,
       không xuống dòng riêng.

       Bỏ flex-wrap đã thêm trước đó: nó khiến nhãn bị đẩy xuống dòng và làm
       icon địa chỉ lệch khỏi hàng chữ. Để .center-address giữ nguyên
       display:flex + align-items:flex-start của bản gốc thì icon tự thẳng
       hàng với dòng chữ đầu tiên. */
    .htt-centers .center-result-item.mobile .center-address {
        flex-wrap: nowrap;
        align-items: flex-start;
    }

    /* Chữ địa chỉ + nhãn gộp trong .ttd-addr-text (do JS tạo) nên chúng
       chảy liền nhau như một đoạn văn bên phải icon. */
    .htt-centers .center-result-item.mobile .ttd-addr-text {
        flex: 1 1 auto;
        min-width: 0;
    }

    .htt-centers .center-result-item.mobile .ttd-distance {
        display: inline;
    }

    .ttd-distance {
        margin: 0 0 0 6px;
        padding: 1px 8px;
        font-size: 12px;
        line-height: 1.5;
        white-space: nowrap;
    }
}

/* ── Khung danh sách trên DI ĐỘNG: đủ chỗ cho 3 trung tâm ────
   Bản gốc khoá max-height 400px kèm padding-top 56px -> chỉ còn 344px cho
   nội dung, trong khi mỗi thẻ (tên + địa chỉ 2 dòng + SĐT + nút CHỈ ĐƯỜNG)
   cao khoảng 188px. Ba thẻ cần ~588px.

   Bỏ giới hạn chiều cao: danh sách chỉ có 3 thẻ (khi bấm "Trung tâm gần tôi")
   nên không cần khung cuộn riêng — để trang cuộn tự nhiên dễ dùng hơn trên
   điện thoại. */
@media (max-width: 767px) {
    .htt-centers #center-results-list {
        max-height: none;
        overflow-y: visible;
        padding-top: 16px;
        margin-bottom: 24px;
        gap: 12px;
    }
}

/* Thẻ bị nearby-location.js cắt khỏi danh sách "3 trung tâm gần nhất".
   Dùng !important vì CSS của trang đặt display cho .center-result-item ở
   nhiều nơi (cả bản gốc lẫn phần thêm), khó chắc rule nào thắng. */
.center-result-item.ttd-hidden {
    display: none !important;
}

/* ── Lời chào tư vấn viên hiện lên khi cuộn tới ───────────────
   chat-reveal.js gắn .is-revealed khi khối lọt vào tầm nhìn. Bong bóng
   mờ dần vào, nhích lên một chút và nở nhẹ — giống một popup vừa bật ra,
   không phải một dòng chữ có sẵn.

   Gốc biến đổi đặt ở mép dưới-trái vì bong bóng mọc ra từ phía avatar,
   nở từ tâm trông như nó tự phình ra giữa không trung.

   KHÔNG dùng animation chạy sẵn: nếu JS hỏng, người dùng sẽ mắc kẹt với
   bong bóng trong suốt. Trạng thái ẩn chỉ bật khi JS đã gắn .htt-reveal-ready. */
.htt-reveal-ready .hv3-chat-bubble {
    opacity: 0;
    transform: translateY(12px) scale(0.96);
    transition: opacity 0.55s ease-out, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
    transform-origin: 0 100%;
    will-change: opacity, transform;
}

.htt-reveal-ready .hv3-chat-bubble.is-revealed {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Bong bóng rộng hơn khối .hv3-chat-body mặc định (520px): ở 520px câu thứ hai
   tràn thành dòng thứ ba dù chỉ có một thẻ <br>. Đo thực tế trong trình duyệt:
   dòng dài nhất cần 603px + 60px padding = 663px, nên 680px là vừa đủ có biên.
   ĐỔI CÂU CHÀO thì phải đo lại, nới bằng cảm tính sẽ lại tràn dòng. */
@media (min-width: 768px) {
    .hv3-chat-body {
        max-width: 680px;
    }
}

/* Link chính sách bảo mật trong modal: dòng chữ nền là xám nhạt #6B7480 nên
   link phải tự tô màu, nếu không bố mẹ không nhận ra bấm được. */
.hv3-modal-privacy a {
    color: #2576B9;
    text-decoration: underline;
}

.hv3-modal-privacy a:hover {
    color: #1d6199;
}

/* ── Hàng nút CTA: Zalo + Đặt lịch gọi lại ───────────────────
   .hv3-chat-body là flex-direction:column nên hai nút phải nằm trong hàng
   riêng này, nếu để trần chúng sẽ xếp dọc. */
.htt-chat-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 14px;
}

/* Nút phụ: nền sáng, chữ xanh, viền xanh — nhẹ hơn nút Zalo nền đặc bên cạnh.
   Mọi kích thước bám theo .hv3-chat-zalo để hai nút cao bằng nhau. */
.htt-chat-callback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 60px;
    padding: 0 40px;
    border: 2px solid #2576B9;
    border-radius: 999px;
    background: #FFFFFF;
    color: #2576B9;
    font-family: 'Nunito', sans-serif;
    font-size: 17px;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(37, 118, 185, .12);
    transition: background-color .2s ease, color .2s ease, transform .2s ease;
}

.htt-chat-callback:hover,
.htt-chat-callback:focus-visible {
    background: #2576B9;
    color: #FFFFFF;
    transform: translateY(-2px);
}

@media (max-width: 767px) {
    /* Hai nút xếp dọc và kéo full chiều ngang — .hv3-chat-zalo đã có
       width:100% sẵn ở home-v3.css cho khổ này. */
    .htt-chat-actions {
        width: 100%;
        flex-direction: column;
        gap: 12px;
    }
    .htt-chat-callback {
        width: 100%;
        min-height: 52px;
        padding: 0 24px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .htt-chat-callback {
        transition: none;
    }
    .htt-chat-callback:hover,
    .htt-chat-callback:focus-visible {
        transform: none;
    }
}

/* Xuống dòng trong lời chào — gộp lại một dòng ở khổ hẹp cho đỡ cao */
@media (max-width: 767px) {
    .hv3-chat-bubble br { display: none; }
}

/* Người tắt hiệu ứng: hiện ngay, không trượt không nở. */
@media (prefers-reduced-motion: reduce) {
    .htt-reveal-ready .hv3-chat-bubble {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ============================================================
   MOBILE STICKY CTA — 2 nút ở đáy, chỉ hiện trên di động.
   Desktop dùng widget Vihat nên ẩn thanh này đi.
   ============================================================ */
.tn-mcta {
    display: none;
}

@media (max-width: 768px) {
    .tn-mcta {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 9990;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
        background: #fff;
        box-shadow: 0 -6px 20px rgba(37, 118, 185, 0.14);
        transform: translateY(110%);
        visibility: hidden;
        transition: transform 0.3s ease, visibility 0s linear 0.3s;
    }

    .tn-mcta.is-visible {
        transform: translateY(0);
        visibility: visible;
        transition: transform 0.3s ease, visibility 0s;
    }

    /* Chừa chỗ để nội dung cuối trang không bị thanh che */
    body.has-mcta {
        padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px));
    }

    .tn-mcta-btn {
        height: 48px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 0;
        border-radius: 12px;
        font-family: 'Nunito', sans-serif;
        font-weight: 700;
        font-size: 15px;
        line-height: 1.1;
        text-align: center;
        text-decoration: none;
        white-space: nowrap;
        cursor: pointer;
    }

    .tn-mcta-btn--zalo {
        background: #2576B9;
        color: #fff;
        box-shadow: 0 6px 14px rgba(37, 118, 185, 0.28);
    }

    .tn-mcta-btn--form {
        background: #ffd95b;
        color: #1a3a6e;
        box-shadow: 0 6px 14px rgba(254, 204, 0, 0.32);
    }

    .tn-mcta-btn:active {
        transform: scale(0.97);
    }
}

@media (max-width: 360px) {
    .tn-mcta-btn {
        font-size: 13px;
    }
}