/* ============================================================
   no-hover-mobile.css — tắt TOÀN BỘ hiệu ứng :hover trên màn hình nhỏ (<500px)
   Nhúng CUỐI (sau pageCss) trong views/layouts/head.php để đè mọi rule khác.
   Mobile không có hover thật — các rule chỉ kích hoạt khi tap (sticky hover).
   ============================================================ */
@media (max-width: 499px) {

    /* 1) Chặn mọi biến đổi/phủ màu khi hover: lift card, scale icon, glow filter */
    *:hover {
        transform: none !important;
        filter: none !important;
        transition-duration: 0s !important;
    }

    /* 2) Nút bấm: không nhấc bóng, giữ màu nền base */
    .btn--primary:hover {
        background-color: var(--stc-primary, #27a4f2) !important;
        box-shadow: none !important;
        color: #fff !important;
    }

    .btn--ghost:hover,
    .btn--soft:hover,
    .stc-icon-btn:hover,
    .stc-header__toggle:hover,
    .lang-switch__btn:hover,
    .lang-switch__item:hover,
    .stc-acct__link:hover,
    .blog__filter button:hover,
    .checkbox-container:hover .checkmark {
        background: transparent !important;
        box-shadow: none !important;
    }

    /* 3) Card: không nhấc bóng khi chạm */
    .card--hover:hover,
    .blog-card:hover,
    .guide-card:hover,
    .contact-card:hover {
        box-shadow: none !important;
    }

    /* 4) Ảnh thumbnail không zoom khi chạm */
    .blog-card:hover .blog-card__thumb img,
    .guide-card:hover .guide-card__thumb img,
    .guide-card:hover .guide-card__play svg,
    .blog-card:hover .blog-card__icon svg {
        transform: none !important;
    }

    /* 5) Tooltip / nhãn / halo nổi khi hover: ẩn hẳn */
    .support-float-colorful .support-action:hover::after,
    .social-icon-btn:hover::after,
    .hero__float:hover::before {
        opacity: 0 !important;
        transform: scale(.78) !important;
    }

    .support-float-colorful .support-action:hover .support-label,
    .social-icon-btn:hover .social-icon-btn__tip {
        opacity: 0 !important;
        transform: translate(-50%, 0) scale(.9) !important;
    }

    .support-float-colorful .support-action:hover .support-icon {
        transform: none !important;
    }

    /* 6) Link: không gạch chân khi chạm (màu hover để nguyên — vô hại) */
    .blog__toolbar a:hover,
    .guide__toolbar a:hover,
    .blog-card__more:hover,
    .guide-card__more:hover,
    .blog-card__title a:hover,
    .guide-card__title a:hover,
    .legal__toc a:hover,
    .stc-footer__links a:hover,
    .stc-footer__bottom a:hover,
    .auth-forgot a:hover,
    .auth-switch a:hover,
    .checkbox-container a:hover,
    .blog-info-card__meta a:hover,
    .guide-side-latest a:hover b,
    .blog-side-latest a:hover b {
        text-decoration: none !important;
    }

    /* 7) Toast close / share button giữ nguyên trạng thái base */
    .toast__close:hover {
        color: inherit !important;
    }

    .blog-share-btn--fb:hover { background: var(--stc-primary, #27a4f2) !important; }
    .blog-share-btn--zalo:hover { background: var(--stc-primary, #27a4f2) !important; }
    .blog-share-btn--copy:hover { background: var(--stc-primary, #27a4f2) !important; }

    /* 8) Nút đăng xuất đỏ: luôn tròn icon, không nở */
    .pf-logout-btn,
    .pf-logout-btn:hover {
        width: 36px;
        border-radius: 50%;
    }

    .pf-logout-btn__sign,
    .pf-logout-btn:hover .pf-logout-btn__sign {
        width: 100%;
        padding-left: 0;
        justify-content: center;
    }

    .pf-logout-btn__text,
    .pf-logout-btn:hover .pf-logout-btn__text {
        opacity: 0;
        width: 0%;
        padding-right: 0;
    }
}