/* ============================================================
   Premium polish dùng chung (design-taste) — BỔ SUNG, an toàn.
   Link sau css/output.css. Không phụ thuộc Tailwind purge.
   ============================================================ */

html { scroll-behavior: smooth; }

/* Focus ring tinh tế (a11y + cao cấp) */
*:focus-visible {
    outline: 2px solid #26d962;
    outline-offset: 3px;
    border-radius: 8px;
}

/* Easing cao cấp cho mọi tương tác có transition */
a, button { transition-timing-function: cubic-bezier(.16, 1, .3, 1); }

/* Tiện ích nhấc thẻ (gắn class .taste-lift vào card) */
.taste-lift {
    transition: transform .5s cubic-bezier(.16, 1, .3, 1), box-shadow .5s cubic-bezier(.16, 1, .3, 1);
}
.taste-lift:hover {
    transform: translateY(-7px);
    box-shadow: 0 30px 55px -22px rgba(38, 217, 98, .30), 0 14px 28px -18px rgba(16, 24, 40, .16);
}

/* Scroll-reveal THUẦN CSS (scroll-driven) — bulletproof:
   trình duyệt không hỗ trợ hoặc bật reduce-motion -> nội dung hiện bình thường. */
@media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
        .tr-reveal {
            animation: tr-reveal-kf linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 36%;
        }
        @keyframes tr-reveal-kf {
            from { opacity: 0; transform: translateY(36px); }
            to { opacity: 1; transform: none; }
        }
    }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Skip-to-content (a11y) — ẩn cho tới khi focus bằng bàn phím */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 200;
    background: #26d962;
    color: #fff;
    padding: 10px 18px;
    font-weight: 700;
    border-radius: 0 0 10px 0;
}
.skip-link:focus { left: 0; }