/* ============================================================
   MeTravel — trang Hỏi đáp nhánh đi nước ngoài: phần RIÊNG.
   Danh sách câu hỏi (/hoi-dap/tat-ca) dùng chung với /vietnam/qa:
   static/css/qa.css. File này lo: khung bọc trang danh sách, nút "Hỏi trợ
   lý" ở hero, trang chat /hoi-dap (khung chat + cột thẻ gợi ý), trang bài
   hướng dẫn.
   Tất cả class bắt đầu bằng hd- để không đụng style cũ.
   ============================================================ */

/* ---------- Khung bọc cả trang ---------- */

.hd-qa,
.hd-qa-chan {   /* .hd-qa-chan: khung chân trang ở base.html, cùng bề rộng + lề ngang */
    max-width: 1080px;
    margin: 0 auto;
    padding: 28px 20px 56px;
}

.hd-qa-than { margin-top: 36px; }

/* Nền trang base.html màu kem: khối nền xanh nhạt của qa.css gần như lẫn
   vào nền, nên ở trang này đổi sang nền trắng có viền. */
.hd-qa .qa-guide,
.hd-qa .qa-empty { background: #FFFFFF; border: 1px solid var(--line); }

/* Nút sang trang chat, ngay dưới ô tìm kiếm trên nền xanh (trang danh sách) */
.hd-hoi-nut {
    display: inline-block;
    margin-top: 14px;
    padding: 9px 16px;
    border: 1.5px solid rgba(255, 255, 255, 0.7);   /* nền hero var(--mt-primary): viền trắng, không viền cùng màu nền */
    border-radius: 999px;
    color: var(--mt-on-primary);
    font-size: 14.5px;
    font-weight: 600;
    text-decoration: none;
}

.hd-hoi-nut:hover { background: #FFFFFF; border-color: #FFFFFF; color: var(--mt-primary); }
.hd-hoi-nut:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 2px; }

/* ---------- Trang chat /hoi-dap ---------- */

.hd-chat-trang {
    --muc: var(--ink);
    --teal: var(--brand);
    --teal-nhat: var(--tint);
    --vien: var(--line);
    --cam: var(--mt-note-text);
    --trang: #FFFFFF;
    --nhan-ai: var(--mt-primary);          /* chữ nhãn "Trợ lý AI" (bỏ tím 2026-10-17; viên nền --mt-accent-soft) */
    --nhan-ai-nen: var(--mt-primary-soft);
    --chu-tren-trang: var(--mt-primary);  /* chữ đậm trên thẻ/chip/ô nhập nền trắng trong khung xanh */

    /* Máy tính (2026-10): KHÔNG giới hạn bề rộng — khung chat chiếm hết phần
       còn lại sau menu trái, cột thẻ sát lề phải (chỉ chừa đệm nhỏ). */
    margin: 0;
    padding: 20px 24px 20px;
    color: var(--muc);
    font-family: var(--font-body);
}

/* Máy tính: chat bên trái, cột thẻ bên phải */
.hd-chat-bo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 24px;
    align-items: start;
}

/* Khung chat cao gần hết màn hình (trừ đệm trên/dưới của .hd-chat-trang), ô
   nhập luôn ở đáy khung — kể cả khi chưa có tin nhắn (máy tính). Điện thoại
   giữ cách cũ (xem @media max-width 860px). */
.hd-chat {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 40px);
    height: calc(100dvh - 40px);
    min-height: 560px;
    padding: 26px 24px 18px;
    border-radius: 20px;
    background: var(--mt-primary);
    color: var(--mt-on-primary);
    box-shadow: var(--mt-gold-bar);   /* dải gold 5px ở đáy (tokens.css) */
}

/* .hd-chat--trong (chưa có tin nhắn): từ 2026-10 máy tính KHÔNG còn co khung
   theo lời chào — khung vẫn cao gần hết màn hình, ô nhập ở đáy. Class vẫn dùng
   cho điện thoại (ô nhập ngay dưới lời chào, xem @media max-width 860px). */

.hd-dau h1 {
    margin: 0;
    font: 600 clamp(24px, 3.4vw, 32px)/1.25 "Playfair Display", Georgia, serif;
    color: var(--mt-on-primary);
}

/* ---------- Dòng chảy hội thoại (vùng tự cuộn) ---------- */

.hd-khung {
    position: relative;        /* offsetTop của tin tính theo khung (cuonToi) */
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 18px -8px 0;
    padding: 4px 8px 16px;
}

.hd-tin {
    display: flex;
    max-width: 100%;
}

.hd-tin-khach { justify-content: flex-end; }

.hd-bong {
    max-width: 82%;   /* bong bóng của khách */
    padding: 13px 16px;
    border-radius: 14px;
    font-size: 15px;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.hd-tin-khach .hd-bong {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    border-bottom-right-radius: 4px;
}

/* Câu trả lời (AI, soạn sẵn, lời chào) rộng hơn — khoảng 85% khung chat.
   Lời chào + lời báo lỗi: nền mờ trắng, chữ trắng trên khung var(--mt-primary). */
.hd-tin-may .hd-bong {
    max-width: 85%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-bottom-left-radius: 4px;
    color: #fff;
}
.hd-tin-may .hd-lien-ket { color: #fff; }

/* MỌI câu trả lời (soạn sẵn: bấm thẻ, ?kt=; và câu AI viết) dùng CHUNG một
   kiểu: bong bóng nền --mt-surface, chữ --mt-text, bo 12px, cùng nhãn "Trợ lý AI MeTravel"
   (2026-10-18). Lời chào đầu trang và lời báo lỗi giữ kiểu .hd-tin-may thường. */
.hd-tin-soan-san .hd-bong,
.hd-tin-ai .hd-bong {
    background: var(--mt-surface);
    border-color: transparent;
    border-radius: 12px;
    color: var(--mt-text);
}
.hd-tin-soan-san .hd-lien-ket,
.hd-tin-ai .hd-lien-ket { color: var(--teal); }

.hd-bong p { margin: 0 0 10px; }
.hd-bong p:last-child { margin-bottom: 0; }
.hd-bong ul, .hd-bong ol { margin: 0 0 10px; padding-left: 20px; }
.hd-bong ul:last-child, .hd-bong ol:last-child { margin-bottom: 0; }
.hd-bong li { margin-bottom: 4px; }
.hd-bong li:last-child { margin-bottom: 0; }

/* Nhãn đầu bong bóng: "Trợ lý AI MeTravel" — nhãn DUY NHẤT của MỌI câu trả lời,
   soạn sẵn lẫn AI viết (bỏ nhãn nguồn cuối câu + dòng "Nguồn:" 2026-10) */
.hd-nhan {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 8px;
    padding: 3px 10px 3px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;
}

/* Biểu tượng lấp lánh (SVG nhúng thẳng trong CSS, không file ảnh) trước chữ
   nhãn — có ở cả nhãn máy chủ in sẵn lẫn nhãn JS tạo (taoNhan). */
.hd-nhan-ai::before {
    content: "";
    flex: none;
    width: 12px;
    height: 12px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23007D10'%3E%3Cpath d='M12 2l2.2 6.6L21 11l-6.8 2.4L12 20l-2.2-6.6L3 11l6.8-2.4z'/%3E%3Cpath d='M19 15l.9 2.1L22 18l-2.1.9L19 21l-.9-2.1L16 18l2.1-.9z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.hd-nhan-ai { background: var(--nhan-ai-nen); color: var(--nhan-ai); }

/* Dòng "chỉ cho hộ chiếu Việt Nam" trong bong bóng soạn sẵn (khách không được
   coi là người Việt mở câu visa/khach_viet — app._ghi_chu_chi_khach_viet()) */
.hd-tl-chu-y { margin: 0 0 8px; font-size: 14px; font-style: italic; }

/* Link nội bộ server gắn vào câu AI trả lời (bài đầy đủ, tạo lịch trình) */
.hd-lien-ket {
    color: var(--teal);
    font-weight: 600;
    text-underline-offset: 3px;
}

/* Nút Messenger/WhatsApp dưới câu trả lời cố định "chưa có thông tin đã kiểm chứng" */
.hd-bong .hd-lien-he { display: flex; margin-top: 10px; }

/* "Đọc đầy đủ" + "Hỏi tiếp: …" dưới câu trả lời soạn sẵn */
.hd-tl-hanh-dong {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    align-items: center;
    margin-top: 12px;
}

.hd-doc-day-du {
    padding: 0;
    border: 0;
    background: none;
    color: var(--teal);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.hd-hoi-tiep {
    padding: 7px 12px;
    border: 1.5px solid var(--teal);
    border-radius: 999px;
    background: var(--trang);
    color: var(--teal);
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.hd-hoi-tiep:hover:not(:disabled) { background: var(--teal); color: #fff; }
.hd-hoi-tiep:disabled { opacity: 0.55; cursor: default; }
.hd-doc-day-du:focus-visible,
.hd-hoi-tiep:focus-visible { outline: 2px solid var(--muc); outline-offset: 2px; }

/* ---------- Đang soạn (chỉ khi chờ AI thật) ---------- */

/* Bong bóng trắng: ba chấm nhún (chuyển động ở khối prefers-reduced-motion
   cuối file) + chữ "MeTravel AI đang tìm…" (khoá hdc_dang_tim, ngon_ngu.py) */
.hd-cho .hd-bong {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 12px 16px;
    background: #FFFFFF;
    border-color: transparent;
    border-radius: 12px;
    color: var(--mt-text);
}

.hd-cho-cham { display: inline-flex; gap: 5px; align-items: center; }

.hd-cho i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--mt-primary);
}

.hd-cho-chu { font-size: 14px; color: var(--mt-text); }

/* ---------- Hàng chip chủ đề (trong khung chat, trên ô nhập) ---------- */

.hd-chu-de {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 0 0;
}
.hd-chu-de[hidden] { display: none; }

/* Khung chat nền phẳng --mt-frame (var(--mt-primary)): chưa chọn = trong suốt, viền trắng mờ, chữ
   trắng; đang chọn = nền trắng, chữ --mt-accent (var(--mt-primary)). */
.hd-chu-de-chip {
    flex: 0 0 auto;
    min-height: 36px;
    padding: 6px 14px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 999px;
    background: transparent;
    color: #FFFFFF;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
.hd-chu-de-chip:hover { background: rgba(255, 255, 255, 0.1); }
.hd-chu-de-chip[aria-pressed="true"] {
    border-color: #FFFFFF;
    background: #FFFFFF;
    color: var(--chu-tren-trang);
}
.hd-chu-de-chip:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; }

/* ---------- Ô nhập ---------- */

.hd-soan { padding: 12px 0 0; }

.hd-hang {
    display: flex;
    gap: 10px;
    align-items: flex-end;
    padding: 8px 8px 8px 16px;
    background: var(--trang);
    border: 1px solid transparent;
    border-radius: 14px;
    color: var(--chu-tren-trang);
}

/* Vòng sáng mềm khi đang gõ (không chuyển động, nên không nằm trong khối
   prefers-reduced-motion) */
.hd-hang:focus-within { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.35); }

.hd-o {
    flex: 1;
    max-height: 140px;
    padding: 8px 0;
    border: 0;
    background: none;
    color: inherit;
    font-family: inherit;
    font-size: 15px;
    line-height: 1.5;
    resize: none;
}

.hd-o:focus { outline: none; }

.hd-gui {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    border: 0;
    border-radius: 10px;
    background: var(--mt-primary);
    color: var(--mt-on-primary);
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 600;
    cursor: pointer;
}

.hd-gui-icon { flex: none; }
.hd-gui:disabled { background: var(--mt-border); color: var(--chu-tren-trang); cursor: default; }
.hd-gui:focus-visible { outline: 2px solid var(--chu-tren-trang); outline-offset: 2px; }

/* Hai dòng dưới ô nhập nằm trên khung var(--mt-primary): chữ trắng */
.hd-con-lai {
    margin: 8px 2px 0;
    font-size: 12.5px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
}

.hd-con-lai--het { color: var(--mt-gold-text); }   /* dòng này luôn trên nền primary (.hd-chat; điện thoại .hd-chat-bo; khi in .hd-soan bị ẩn) */

.hd-chan {
    margin: 4px 2px 0;
    font-size: 12px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.72);
}

/* ---------- Cột thẻ "Có thể bạn đang thắc mắc" ---------- */

.hd-goi-y {
    position: sticky;
    top: 16px;
}

.hd-goi-y-tieu-de {
    margin: 6px 0 14px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

/* Chip "Bạn sắp đi đâu?" — các nước có câu hỏi; bấm thì cột thẻ đổi sang
   nước đó (chỉ hiện khi chưa có chuyến và khách chưa nhắc nơi nào) */
.hd-noi { margin: 0 0 14px; }
.hd-noi[hidden] { display: none; }

/* Link nhỏ "Đổi nơi đến" — mở lại hàng chip khi cột thẻ đang theo một nơi */
.hd-doi-noi {
    display: inline-block;
    margin: -6px 0 12px;
    color: var(--teal);
    font-size: 13px;
    font-weight: 600;
    text-underline-offset: 3px;
}
.hd-doi-noi[hidden] { display: none; }
.hd-doi-noi:focus-visible { outline: 2px solid var(--muc); outline-offset: 2px; }

.hd-noi-nhan {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--muc);
}

.hd-noi-hang {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.hd-noi-chip {
    flex: 0 0 auto;
    padding: 6px 12px;
    border: 1px solid var(--vien);
    border-radius: 999px;
    background: var(--trang);
    color: var(--teal);
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.hd-noi-chip:hover { border-color: var(--teal); background: var(--teal-nhat); }
.hd-noi-chip--chon,
.hd-noi-chip--chon:hover { border-color: var(--mt-primary); background: var(--mt-primary); color: var(--mt-on-primary); }
.hd-noi-chip:focus-visible { outline: 2px solid var(--muc); outline-offset: 2px; }

.hd-the-hang {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.hd-the {
    display: block;
    padding: 14px 16px;
    border: 1px solid var(--vien);
    border-radius: 14px;
    background: var(--trang);
    color: var(--chu-tren-trang);
    text-decoration: none;
}

.hd-the[hidden] { display: none; }
.hd-the:hover { border-color: var(--teal); box-shadow: 0 6px 16px rgba(0, 77, 67, 0.12); }
.hd-the:focus-visible { outline: 3px solid var(--mt-primary); outline-offset: 2px; }
.hd-the-da-xem { background: var(--mt-surface); }

.hd-the-tag {
    display: inline-block;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--teal);
}

.hd-the-cau {
    display: block;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.45;
}

.hd-goi-y-chan {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    align-items: center;
    justify-content: space-between;
    margin-top: 14px;
}

.hd-cau-khac {
    padding: 8px 14px;
    border: 1.5px solid var(--teal);
    border-radius: 999px;
    background: none;
    color: var(--teal);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.hd-cau-khac:hover { background: var(--teal); color: #fff; }
.hd-cau-khac:focus-visible { outline: 2px solid var(--muc); outline-offset: 2px; }


/* ---------- Điện thoại / màn hẹp ----------
   Khung chat là phần chính; cột thẻ thành một hàng cuộn ngang nằm GIỮA dòng
   hội thoại và ô nhập. .hd-chat "display: contents" để 4 phần (tiêu đề,
   hội thoại, thẻ, ô nhập) xếp lại theo order trong cùng một cột. */
@media (max-width: 860px) {
    .hd-chat-trang { padding: 18px 16px 32px; }
    /* stretch (không phải start như lưới máy tính): cột thẻ phải đúng bề rộng
       màn hình, không phình theo hàng thẻ cuộn ngang bên trong nó */
    .hd-chat-bo { display: flex; flex-direction: column; gap: 0; align-items: stretch; }
    /* .hd-chat "display: contents" không có khung để tô nền, nên nền
       khung chat (var(--mt-primary)) chuyển lên .hd-chat-bo — trên điện thoại cột thẻ, chip nước
       (và banner, order 5) cũng nằm trong khung xanh. */
    .hd-chat-bo {
        padding: 18px 16px 16px;
        border-radius: 20px;
        background: var(--mt-primary);
        color: var(--mt-on-primary);
        box-shadow: var(--mt-gold-bar);
    }
    .hd-chat { display: contents; }
    .hd-dau { order: 1; }
    .hd-dau h1 { font-size: 23px; }
    /* Cao vừa để tiêu đề + hội thoại + hàng thẻ + ô nhập nằm gọn trong một
       màn hình điện thoại (~452px còn lại cho menu, tiêu đề, thẻ, ô nhập).
       Con số này tính cho thẻ có tiêu đề 3 dòng (xem .hd-the-cau bên dưới):
       tiêu đề thẻ là câu hỏi đầy đủ nên hay dài 3 dòng, mỗi dòng thêm ~20px —
       tính theo 2 dòng thì ô nhập bị đẩy xuống dưới mép màn hình. */
    .hd-khung {
        order: 2;
        flex: none;
        height: calc(100vh - 452px);
        height: calc(100svh - 452px);
        min-height: 220px;
        max-height: 520px;
        margin: 14px 0 0;
        padding: 4px 0 12px;
    }
    /* Đang có hàng chip "Bạn sắp đi đâu?" (cao ~46px): khung hội thoại thấp
       bớt đúng ngần ấy để ô nhập vẫn nằm trong màn hình. Trình duyệt cũ không
       hiểu :has() thì bỏ qua luật này — ô nhập chỉ thấp xuống một chút. */
    .hd-chat-bo:has(.hd-noi:not([hidden])) .hd-khung {
        height: calc(100vh - 498px);
        height: calc(100svh - 498px);
    }
    /* Tương tự với link "Đổi nơi đến" (cao ~28px) */
    .hd-chat-bo:has(.hd-doi-noi:not([hidden])) .hd-khung {
        height: calc(100vh - 482px);
        height: calc(100svh - 482px);
    }
    .hd-chat--trong .hd-khung { overflow: visible; }
    .hd-chat--trong .hd-khung,
    .hd-chat-bo:has(.hd-noi:not([hidden])) .hd-chat--trong .hd-khung,
    .hd-chat-bo:has(.hd-doi-noi:not([hidden])) .hd-chat--trong .hd-khung { height: auto; min-height: 0; }
    /* Chip chủ đề: cùng order với khung hội thoại, đứng ngay sau nó (thứ tự
       HTML), trước cột thẻ + chip nước (order 3) và ô nhập */
    .hd-chu-de { order: 2; padding-top: 10px; }
    .hd-chu-de-chip { min-height: 34px; padding: 5px 12px; font-size: 13px; }
    /* Hàng chip chủ đề xuống 2 dòng ở 390px (cao ~86px): khung hội thoại (khi
       đã có tin, khung cao cố định) thấp bớt ngần ấy để ô nhập vẫn nằm trong
       màn hình — cộng dồn với hàng chip nước / link "Đổi nơi đến" ở trên. */
    .hd-chat-bo:has(.hd-chu-de:not([hidden])) .hd-chat:not(.hd-chat--trong) .hd-khung {
        height: calc(100vh - 538px);
        height: calc(100svh - 538px);
    }
    .hd-chat-bo:has(.hd-chu-de:not([hidden])):has(.hd-noi:not([hidden])) .hd-chat:not(.hd-chat--trong) .hd-khung {
        height: calc(100vh - 584px);
        height: calc(100svh - 584px);
    }
    .hd-chat-bo:has(.hd-chu-de:not([hidden])):has(.hd-doi-noi:not([hidden])) .hd-chat:not(.hd-chat--trong) .hd-khung {
        height: calc(100vh - 568px);
        height: calc(100svh - 568px);
    }
    .hd-goi-y { order: 3; position: static; min-width: 0; }
    .hd-soan { order: 4; padding-top: 10px; }

    .hd-goi-y-tieu-de { margin: 10px 0 8px; font-size: 12px; color: rgba(255, 255, 255, 0.85); }
    /* Cột thẻ nằm trong khung xanh: chữ/viền trắng; chip nước giống chip chủ đề */
    .hd-noi-nhan, .hd-doi-noi { color: #FFFFFF; }
    .hd-doi-noi:focus-visible, .hd-noi-chip:focus-visible,
    .hd-the:focus-visible, .hd-cau-khac:focus-visible { outline-color: #FFFFFF; }
    .hd-noi-chip { border-color: rgba(255, 255, 255, 0.5); background: transparent; color: #FFFFFF; }
    .hd-noi-chip:hover { border-color: #FFFFFF; background: rgba(255, 255, 255, 0.1); }
    .hd-noi-chip--chon,
    .hd-noi-chip--chon:hover { border-color: #FFFFFF; background: #FFFFFF; color: var(--chu-tren-trang); }
    .hd-cau-khac { border-color: #FFFFFF; color: #FFFFFF; }
    .hd-cau-khac:hover { background: #FFFFFF; color: var(--chu-tren-trang); }
    /* Chip nước: nhãn + chip trên MỘT hàng cuộn ngang, để ô nhập không bị đẩy
       xuống khỏi màn hình đầu */
    .hd-noi {
        display: flex;
        gap: 8px;
        align-items: center;
        overflow-x: auto;
        margin: 0 -16px 8px;
        padding: 0 16px 2px;
        scrollbar-width: none;
    }
    .hd-noi::-webkit-scrollbar { display: none; }
    .hd-noi-nhan { flex: 0 0 auto; margin: 0; font-size: 13px; }
    .hd-doi-noi { margin: -2px 0 8px; }
    .hd-noi-hang { flex-wrap: nowrap; }
    .hd-noi-chip { padding: 5px 11px; font-size: 13px; }
    .hd-the-hang {
        flex-direction: row;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        margin: 0 -16px;
        padding: 0 16px 4px;
        scrollbar-width: none;
    }
    .hd-the-hang::-webkit-scrollbar { display: none; }
    .hd-the {
        flex: 0 0 72%;
        max-width: 280px;
        padding: 11px 13px;
        scroll-snap-align: start;
    }
    /* Tối đa 3 dòng, dài hơn thì cắt bằng "…" — để chiều cao hàng thẻ có
       trần, khung hội thoại ở trên mới tính trước được (xem .hd-khung) */
    .hd-the-cau {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        overflow: hidden;
        font-size: 14px;
    }
    .hd-goi-y-chan { margin-top: 8px; }
    .hd-cau-khac { padding: 6px 12px; font-size: 13px; }
    .hd-bong,
    .hd-tin-may .hd-bong { max-width: 92%; }
}

@media (max-width: 640px) {
    .hd-qa, .hd-qa-chan { padding: 20px 16px 40px; }
}

/* ---------- Chuyển động (2026-10-17) ----------
   CHỈ khi khách không tắt chuyển động. Mỗi hiệu ứng ≤ 0,4 giây, chỉ dùng
   transform/opacity. Không thư viện JS nào: JS chỉ gắn class .hd-the--vao. */
@media (prefers-reduced-motion: no-preference) {
    /* Câu trả lời (AI + soạn sẵn) hiện ra: mờ dần + trượt lên 8px */
    .hd-tin-ai,
    .hd-tin-soan-san { animation: hd-hien 0.3s ease-out both; }
    @keyframes hd-hien {
        from { opacity: 0; transform: translateY(8px); }
        to { opacity: 1; transform: none; }
    }

    /* Ba chấm nhún khi chờ AI */
    .hd-cho i { animation: hd-nhun 0.4s ease-in-out infinite alternate; }
    .hd-cho i:nth-child(2) { animation-delay: 0.13s; }
    .hd-cho i:nth-child(3) { animation-delay: 0.26s; }
    @keyframes hd-nhun {
        from { transform: translateY(0); }
        to { transform: translateY(-5px); }
    }

    /* Thẻ trượt lên lần lượt (độ trễ 80ms/thẻ do JS gắn). "backwards" — không
       giữ transform sau khi chạy, để hiệu ứng nâng khi rê chuột vẫn chạy. */
    .hd-the--vao { animation: hd-the-len 0.32s ease-out backwards; }
    @keyframes hd-the-len {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: none; }
    }
    /* Chip: nâng nhẹ khi rê chuột, nhấn lún nhẹ khi bấm */
    .hd-chu-de-chip,
    .hd-noi-chip { transition: transform 0.15s ease; }
    .hd-chu-de-chip:hover,
    .hd-noi-chip:hover { transform: translateY(-1px); }
    .hd-chu-de-chip:active,
    .hd-noi-chip:active { transform: translateY(0) scale(0.97); }
}

/* Nhấc thẻ gợi ý khi rê chuột (2026-10, giống thẻ bấm được ở trang chủ —
   trang-chu.css): lên 4px trong 0,25 giây, bóng màu thương hiệu nhạt nằm ở
   ::after và chỉ đổi opacity (không animate box-shadow). Chỉ máy có chuột
   (hover:hover) để điện thoại không kẹt trạng thái nhấc. Bóng tĩnh của
   .hd-the:hover ở trên tắt ở đây để không thành hai lớp bóng. */
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
    .hd-the { position: relative; transition: transform 0.25s ease; }
    .hd-the::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        box-shadow: 0 12px 28px rgba(0, 77, 67, 0.2);
        opacity: 0;
        transition: opacity 0.25s ease;
        pointer-events: none;
    }
    .hd-the:hover { transform: translateY(-4px); box-shadow: none; }
    .hd-the:hover::after { opacity: 1; }
}

@media print {
    .rail, .brand, #burger, .burger, .cover, .hd-soan, .hd-goi-y { display: none !important; }
    .shell { display: block !important; }
    .content { width: 100% !important; }
    .hd-chat { height: auto; }
    .hd-khung { overflow: visible; }
    /* Máy in thường bỏ nền: bỏ gradient, chữ tối để đọc được trên giấy trắng */
    .hd-chat, .hd-chat-bo { background: none !important; color: var(--mt-text) !important; box-shadow: none !important; }
    .hd-dau h1 { color: var(--brand); }
    .hd-tin-khach .hd-bong, .hd-tin-may .hd-bong { color: var(--mt-text); border: 1px solid var(--mt-border); }
    .hd-tin-may .hd-lien-ket { color: var(--teal); }
}

/* ---------- Trang riêng một câu (/hoi-dap/cau/<mã>-<slug>) ---------- */

.hd-bai .qa-hero h1 { max-width: 28ch; margin-top: 16px; }
.hd-bai-meta { margin: 0; font-size: 14px; }
.hd-bai-than { max-width: 72ch; padding: 28px 4px 0; font-size: 17px; line-height: 1.7; }
.hd-bai-chu-y { max-width: 72ch; margin: 24px 4px 0; padding: 10px 14px; border-left: 3px solid var(--qa-green);
    background: var(--qa-tint); font-size: 15px; line-height: 1.5; }
.hd-bai-chu-y + .hd-bai-than { padding-top: 16px; }
.hd-bai-tiep { max-width: 72ch; padding: 8px 4px 0; margin: 0; }
.hd-bai-lien-quan { max-width: 72ch; padding: 24px 4px 48px; }
.hd-bai-lien-quan h2 { font-size: 20px; margin: 0 0 10px; }
.hd-bai-lien-quan ul { margin: 0; padding-left: 20px; }
.hd-bai-lien-quan li { margin: 0 0 8px; line-height: 1.5; }

/* ---------- Banner trang chat (templates/_banner.html) ----------
   .hd-cot-phai bọc cột thẻ + banner. Máy tính: cả cột dính khi cuộn (thay
   cho .hd-goi-y dính riêng như trước). Điện thoại (≤860px): display contents
   để cột thẻ vẫn nằm giữa hội thoại và ô nhập, banner xuống cuối trang. */
.hd-cot-phai { position: sticky; top: 16px; min-width: 0; }
.hd-cot-phai .hd-goi-y { position: static; }
.hd-cot-phai .mt-banner { margin: 20px 0 0; }
@media (max-width: 860px) {
    .hd-cot-phai { display: contents; }
    .hd-cot-phai .mt-banner { order: 5; width: 100%; margin: 24px 0 0; }
}