/* ============================================================
 * Index Effects — gentle hover + AOS overrides
 * Áp dụng riêng cho trang chủ (templates/index/index_tpl.php).
 * Triết lý: "mượt mà nhẹ nhàng" — translate nhỏ (4-8px),
 * scale tinh (1.02-1.04), opacity/brightness nhẹ, dùng
 * cubic-bezier dịu (.22, 1, .36, 1) thay vì ease-in-out cứng.
 * ============================================================ */

:root {
    --idx-ease: cubic-bezier(.22, 1, .36, 1);
    --idx-fast: .35s var(--idx-ease);
    --idx-base: .55s var(--idx-ease);
    --idx-slow: .8s var(--idx-ease);
    --idx-lift: 0 18px 38px -16px rgba(15, 23, 42, .22), 0 8px 16px -10px rgba(15, 23, 42, .14);
    --idx-lift-soft: 0 10px 24px -14px rgba(15, 23, 42, .18);
    --idx-accent: #1f419b;
}

/* ============================================================
 * 1. AOS — tinh chỉnh để mượt hơn (override default)
 *    AOS chỉ chạy 1 lần nên không gây giật khi scroll lên xuống.
 * ============================================================ */
[data-aos] {
    transition-timing-function: var(--idx-ease) !important;
    transition-duration: 700ms;
    will-change: transform, opacity;
}

[data-aos].aos-animate {
    will-change: auto;
}

/* Biến thể fade dùng riêng (translateY nhỏ ~24px thay vì 100px) */
[data-aos="fade-up"] {
    transform: translate3d(0, 24px, 0);
    opacity: 0;
}

[data-aos="fade-down"] {
    transform: translate3d(0, -20px, 0);
    opacity: 0;
}

[data-aos="fade-right"] {
    transform: translate3d(-20px, 0, 0);
    opacity: 0;
}

[data-aos="fade-left"] {
    transform: translate3d(20px, 0, 0);
    opacity: 0;
}

[data-aos="zoom-in-soft"] {
    transform: scale(.97);
    opacity: 0;
}

[data-aos].aos-animate {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 1;
}

/* Reduced motion — không animate gì, hiện luôn */
@media (prefers-reduced-motion: reduce) {

    [data-aos],
    [data-aos].aos-animate {
        transform: none !important;
        opacity: 1 !important;
        transition: none !important;
    }
}

/* CDN/script lỗi — không để nội dung bị opacity:0 mãi */
html.aos-fallback [data-aos] {
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
}

/* ============================================================
 * 2. SECTION: vah-brand — card thương hiệu / partner
 * ============================================================ */
.vah-brand__card {
    transition:
        transform var(--idx-fast),
        border-color var(--idx-fast),
        box-shadow var(--idx-fast),
        background-color var(--idx-fast);
    will-change: transform;
}

.vah-brand__card .vah-brand__logo img {
    transition: transform var(--idx-base), filter var(--idx-base);
    filter: saturate(.85);
}

a.vah-brand__card:hover,
a.vah-brand__card:focus-visible {
    transform: translateY(-4px);
    border-color: rgba(31, 65, 155, .55);
    box-shadow: var(--idx-lift-soft);
    background-color: #fff;
}

a.vah-brand__card:hover .vah-brand__logo img,
a.vah-brand__card:focus-visible .vah-brand__logo img {
    transform: scale(1.06);
    filter: saturate(1.1);
}

a.vah-brand__card:active {
    transform: translateY(-2px) scale(.99);
    transition-duration: .14s;
}

/* ============================================================
 * 3. SECTION: vah-about — photo + badge + cta + call
 * ============================================================ */
.vah-about__photo-wrap {
    overflow: hidden;
    border-radius: inherit;
}

.vah-about__photo-wrap .about__photo,
.vah-about__photo-wrap img.about__photo {
    transition: transform 1.1s var(--idx-ease), filter var(--idx-base);
    will-change: transform;
}

.vah-about__media:hover .about__photo,
.vah-about__photo-wrap:hover .about__photo {
    transform: scale(1.045);
}

/* Badge "X+ năm KN" — luôn lắc nhẹ khi hover ảnh */
.vah-about__badge {
    transition: transform var(--idx-base), box-shadow var(--idx-base);
}

.vah-about__media:hover .vah-about__badge,
.vah-about__photo-wrap:hover .vah-about__badge {
    transform: translateY(-3px) rotate(-2deg);
}

/* CTA "khám phá thêm" */
.vah-about__btn {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition:
        transform var(--idx-fast),
        box-shadow var(--idx-fast),
        background-color var(--idx-fast);
}

.vah-about__btn::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(135deg, #2b5cd4 0%, #1f419b 100%);
    opacity: 0;
    transition: opacity var(--idx-fast);
}

.vah-about__btn:hover,
.vah-about__btn:focus-visible {
    transform: translateY(-2px);
    color: #fff;
    opacity: 1;
    box-shadow: 0 12px 28px -14px rgba(31, 65, 155, .55);
}

.vah-about__btn:hover::after,
.vah-about__btn:focus-visible::after {
    opacity: 1;
}

.vah-about__btn img {
    transition: transform var(--idx-fast);
}

.vah-about__btn:hover img {
    transform: translateX(4px);
}

.vah-about__btn:active {
    transform: translateY(0) scale(.98);
    transition-duration: .12s;
}

/* Call ring — pulse nhẹ vô hạn (tone xuống khi reduced-motion) */
.vah-about__call-ring {
    transition: transform var(--idx-base);
}

.vah-about__call:hover .vah-about__call-ring {
    transform: scale(1.06) rotate(-6deg);
}

.vah-about__call-ring-bg {
    animation: vah-ring-spin 14s linear infinite;
    transform-origin: center;
    will-change: transform;
}

.vah-about__call-handset {
    animation: vah-ring-shake 2.6s var(--idx-ease) infinite;
    transform-origin: center;
    will-change: transform;
}

@keyframes vah-ring-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes vah-ring-shake {

    0%,
    8%,
    20%,
    100% {
        transform: rotate(0);
    }

    10%,
    14% {
        transform: rotate(-12deg);
    }

    12%,
    16% {
        transform: rotate(12deg);
    }

    18% {
        transform: rotate(-6deg);
    }
}

/* CEO signature — fade-in mềm khi hover toàn block */
.vah-about__ceo-sign {
    transition: transform var(--idx-base), opacity var(--idx-base);
}

.vah-about__ceo:hover .vah-about__ceo-sign {
    transform: translateX(2px);
    opacity: .92;
}

/* List check item */
.vah-about__list li {
    transition: transform var(--idx-fast), color var(--idx-fast);
}

.vah-about__list li:hover {
    transform: translateX(4px);
    color: var(--idx-accent);
}

.vah-about__list li img {
    transition: transform var(--idx-fast);
}

.vah-about__list li:hover img {
    transform: scale(1.18) rotate(8deg);
}

/* ============================================================
 * 4. SECTION: vah-product — accordion + card lớn
 * ============================================================ */
.vah-product__trigger {
    transition: opacity var(--idx-fast), letter-spacing var(--idx-base), color var(--idx-fast);
}

.vah-product__trigger:hover {
    opacity: 1;
    color: #fff;
    letter-spacing: .01em;
}

.vah-product__trigger:hover .vah-product__cat-arrow {
    transform: translateX(6px);
}

.vah-product__item.is-open .vah-product__trigger:hover .vah-product__cat-arrow {
    transform: rotate(90deg) translateX(4px);
}

/* Card panel — ảnh zoom nhẹ + viền sáng */
.vah-product__card {
    position: relative;
    overflow: hidden;
}

.vah-product__card-photo,
.vah-product__card img.vah-product__card-photo {
    transition: transform 1s var(--idx-ease), filter var(--idx-base);
    will-change: transform;
}

.vah-product__card:hover .vah-product__card-photo {
    transform: scale(1.04);
    filter: brightness(1.04);
}

.vah-product__card-panel {
    transition: transform var(--idx-base);
}

.vah-product__card:hover .vah-product__card-panel {
    transform: translateY(-3px);
}

.vah-product__card-btn {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition:
        transform var(--idx-fast),
        box-shadow var(--idx-fast),
        letter-spacing var(--idx-base);
}

.vah-product__card-btn::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0));
    transform: translateX(-100%);
    transition: transform var(--idx-slow);
}

.vah-product__card-btn:hover,
.vah-product__card-btn:focus-visible {
    transform: translateY(-2px);
    letter-spacing: .02em;
    box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .35);
}

.vah-product__card-btn:hover::after,
.vah-product__card-btn:focus-visible::after {
    transform: translateX(100%);
}

.vah-product__card-btn:active {
    transform: translateY(0) scale(.98);
    transition-duration: .12s;
}

/* ============================================================
 * 5. SECTION: vah-project — carousel + card dự án
 * ============================================================ */
.vah-project__title.mask--title,
.vah-project__lead {
    transition: transform var(--idx-base);
}

.vah-project__card {
    position: relative;
    overflow: hidden;
    transition:
        transform var(--idx-base),
        box-shadow var(--idx-base);
    will-change: transform;
}

.vah-project__media {
    overflow: hidden;
}

.vah-project__grad img,
.vah-project__media img {
    transition: transform 1.1s var(--idx-ease), filter var(--idx-base);
    will-change: transform;
}

.ProjectDesign__item:hover .vah-project__card,
.ProjectDesign__item:focus-visible .vah-project__card {
    transform: translateY(-6px);
    box-shadow: var(--idx-lift);
}

.ProjectDesign__item:hover .vah-project__grad img,
.ProjectDesign__item:hover .vah-project__media img,
.ProjectDesign__item:focus-visible .vah-project__grad img,
.ProjectDesign__item:focus-visible .vah-project__media img {
    transform: scale(1.06);
    filter: brightness(1.04) saturate(1.05);
}

.vah-project__body {
    transition: transform var(--idx-base);
}

.ProjectDesign__item:hover .vah-project__body {
    transform: translateY(-2px);
}

.vah-project__name {
    transition: color var(--idx-fast);
}

.ProjectDesign__item:hover .vah-project__name {
    color: var(--idx-accent);
}

.vah-project__loc img {
    transition: transform var(--idx-fast);
}

.ProjectDesign__item:hover .vah-project__loc img {
    transform: translateY(-2px) scale(1.1);
}

/* Control nav (mũi tên carousel) */
.control-project.control-owl .owl-prev,
.control-project.control-owl .owl-next {
    transition: transform var(--idx-fast), filter var(--idx-fast);
}

.control-project.control-owl .owl-prev:hover,
.control-project.control-owl .owl-next:hover {
    transform: translateY(-2px);
    filter: drop-shadow(0 6px 12px rgba(15, 23, 42, .18));
}

.control-project.control-owl .owl-prev:active,
.control-project.control-owl .owl-next:active {
    transform: translateY(0) scale(.95);
}

/* ============================================================
 * 6. SECTION: vah-blog — card tin tức
 * ============================================================ */
.vah-blog__card {
    position: relative;
    transition:
        transform var(--idx-base),
        box-shadow var(--idx-base);
    will-change: transform;
}

.vah-blog__media {
    position: relative;
    overflow: hidden;
    display: block;
}

.vah-blog__img,
.vah-blog__media img {
    transition: transform 1.1s var(--idx-ease), filter var(--idx-base);
    will-change: transform;
}

.vah-blog__card:hover {
    transform: translateY(-6px);
    box-shadow: var(--idx-lift);
}

.vah-blog__card:hover .vah-blog__img,
.vah-blog__card:hover .vah-blog__media img,
.vah-blog__media:hover .vah-blog__img,
.vah-blog__media:hover img {
    transform: scale(1.06);
    filter: brightness(1.03);
}

.vah-blog__date {
    transition: transform var(--idx-fast), background-color var(--idx-fast);
}

.vah-blog__card:hover .vah-blog__date {
    transform: translateY(-2px);
}

.vah-blog__name a {
    background-image: linear-gradient(var(--idx-accent), var(--idx-accent));
    background-size: 0% 1px;
    background-repeat: no-repeat;
    background-position: 0 100%;
    transition: background-size var(--idx-base), color var(--idx-fast);
}

.vah-blog__card:hover .vah-blog__name a,
.vah-blog__name a:hover {
    color: var(--idx-accent);
    background-size: 100% 1px;
}

.vah-blog__meta-ico {
    transition: transform var(--idx-fast), color var(--idx-fast);
    display: inline-flex;
}

.vah-blog__card:hover .vah-blog__meta-ico {
    transform: rotate(-12deg);
    color: var(--idx-accent);
}

/* "Xem tất cả" CTA */
.vah-blog__all {
    transition: transform var(--idx-fast), color var(--idx-fast);
}

.vah-blog__all:hover {
    transform: translateX(4px);
    color: var(--idx-accent);
}

.vah-blog__all-icon {
    display: inline-flex;
    transition: transform var(--idx-base);
}

.vah-blog__all:hover .vah-blog__all-icon {
    transform: translateX(6px);
}

/* ============================================================
 * 7. Tôn trọng reduced-motion ở mọi hover/animation
 * ============================================================ */
@media (prefers-reduced-motion: reduce) {

    .vah-brand__card,
    .vah-brand__card .vah-brand__logo img,
    .vah-about__photo-wrap .about__photo,
    .vah-about__badge,
    .vah-about__btn,
    .vah-about__btn img,
    .vah-about__call-ring,
    .vah-about__call-ring-bg,
    .vah-about__call-handset,
    .vah-about__ceo-sign,
    .vah-about__list li,
    .vah-about__list li img,
    .vah-product__trigger,
    .vah-product__cat-arrow,
    .vah-product__card-photo,
    .vah-product__card-panel,
    .vah-product__card-btn,
    .vah-project__card,
    .vah-project__grad img,
    .vah-project__media img,
    .vah-project__body,
    .vah-project__name,
    .vah-project__loc img,
    .vah-blog__card,
    .vah-blog__img,
    .vah-blog__media img,
    .vah-blog__date,
    .vah-blog__name a,
    .vah-blog__meta-ico,
    .vah-blog__all,
    .vah-blog__all-icon {
        transition: none !important;
        animation: none !important;
        transform: none !important;
    }
}