/* Dải lối tắt trang chủ (HomeQuick.ascx) — 4 nút xanh dưới banner: Hỏi đáp, Gửi phản hồi, Bảng giá, Đăng ký khám.
   Chỉ dùng ở Home.ascx. Hiệu ứng hover nhẹ (nhấc lên 3px, bóng mờ, biểu tượng phóng nhẹ); tắt khi người dùng chọn "giảm chuyển động". */
.hq-strip { background: #fff; border-bottom: 1px solid #e0eef4; margin-top: 20px; margin-bottom: 14px; }
.hq-in { max-width: 1170px; margin: 0 auto; padding: 20px 15px 36px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }

.hq-btn {
    display: flex; align-items: center; gap: 13px; padding: 12px 16px;
    border: 1px solid #b6e0f2; border-radius: 14px; background: #ecf7fc;
    color: #0e5a7d !important; text-decoration: none !important;
    font: 500 14px/1.3 var(--bv-font, 'Roboto Condensed', Tahoma, Arial, sans-serif);
    transition: transform .22s ease, box-shadow .22s ease, background-color .22s ease, border-color .22s ease;
}
.hq-btn b { display: block; font-weight: 700; font-size: 15px; color: #0b4a69; transition: color .22s ease; }
.hq-btn small { display: block; margin-top: 2px; font-size: 12px; font-weight: 400; color: #4e7b90; transition: color .22s ease; }

.hq-ico {
    flex: none; width: 42px; height: 42px; border-radius: 50%;
    background: #139cd0; color: #fff; display: flex; align-items: center; justify-content: center;
    transition: transform .25s ease, background-color .22s ease;
}
.hq-ico svg { width: 22px; height: 22px; fill: currentColor; }

.hq-btn:hover, .hq-btn:focus-visible {
    transform: translateY(-3px); background: #dbf0fa; border-color: #6cc3e6;
    box-shadow: 0 8px 18px rgba(19, 156, 208, .24);
}
.hq-btn:hover .hq-ico, .hq-btn:focus-visible .hq-ico { transform: scale(1.09); background: #0f86b4; }
.hq-btn:focus-visible { outline: 2px solid #0f86b4; outline-offset: 2px; }
.hq-btn:active { transform: translateY(-1px); }

/* nút chính (Hỏi đáp): nền xanh đậm, chữ trắng */
.hq-btn.hq-main { background: linear-gradient(135deg, #139cd0, #0f86b4); border-color: #0f86b4; }
.hq-btn.hq-main b { color: #fff; }
.hq-btn.hq-main small { color: rgba(255, 255, 255, .88); }
.hq-btn.hq-main .hq-ico { background: rgba(255, 255, 255, .22); }
.hq-btn.hq-main:hover, .hq-btn.hq-main:focus-visible { background: linear-gradient(135deg, #27acdc, #0d7aa3); border-color: #0b6f94; box-shadow: 0 8px 20px rgba(19, 156, 208, .40); }
.hq-btn.hq-main:hover .hq-ico, .hq-btn.hq-main:focus-visible .hq-ico { background: rgba(255, 255, 255, .32); }

@media (max-width: 991px) {
    .hq-in { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}
@media (max-width: 480px) {
    .hq-in { padding: 14px 10px 24px; gap: 8px; }
    .hq-btn { padding: 9px 10px; gap: 9px; border-radius: 12px; }
    .hq-btn b { font-size: 13.5px; }
    .hq-btn small { display: none; }
    .hq-ico { width: 34px; height: 34px; }
    .hq-ico svg { width: 18px; height: 18px; }
}
@media (prefers-reduced-motion: reduce) {
    .hq-btn, .hq-ico, .hq-btn b, .hq-btn small { transition: none; }
    .hq-btn:hover, .hq-btn:focus-visible, .hq-btn:hover .hq-ico, .hq-btn:focus-visible .hq-ico { transform: none; }
}