/* Hoạt hình «chú ngựa cầm dù» ở góc trên bên phải trang Login: ngựa đứng hai chân chạy vào từ mép màn hình,
   dừng lại, bung dù khi mưa, rồi gập dù chạy đi. Dựng bởi js/vt-horse-rain.js (chạy MỘT lần mỗi lần mở trang).
   Chỉ trang trí: pointer-events none nên không chặn thao tác nào.
   Mọi tâm xoay dùng transform-box: fill-box (không phụ thuộc toạ độ viewBox, Firefox/Chrome như nhau). */

.vt-horse {
    position: fixed;
    top: 16px;
    right: 16px;
    width: 240px;
    height: 200px;
    z-index: 5;
    pointer-events: none;
    overflow: visible;
    transform-origin: top right;
    transform: scale(.8); /* thu nhỏ cả cảnh về góc trên bên phải (từ 240×200 còn 192×160) */
}

/* Chỉ màn hình lớn mới có ngựa (cùng ngưỡng với js/vt-horse-rain.js) */
@media (max-width: 1199px) {
    .vt-horse { display: none; }
}

/* Mặt đất */
.vt-horse__ground {
    position: absolute;
    left: 62px;
    right: 26px;
    bottom: 8px;
    height: 6px;
    border-radius: 3px;
    background: linear-gradient(180deg, #7fbf5a 0%, #5a9a3c 55%, #7a5a3a 56%, #664a2e 100%);
    box-shadow: 0 2px 4px rgba(0, 0, 0, .25);
    opacity: 0;
    transition: opacity .5s ease;
}
.vt-horse.is-running .vt-horse__ground,
.vt-horse.is-stop .vt-horse__ground,
.vt-horse.is-rain .vt-horse__ground { opacity: 1; }

/* Mây */
.vt-horse__cloud {
    position: absolute;
    left: 75px;
    top: 0;
    width: 130px;
    height: 48px;
    opacity: 0;
    transform: translateY(-14px);
    transition: opacity .8s ease, transform .8s ease;
}
.vt-horse.is-rain .vt-horse__cloud {
    opacity: 1;
    transform: translateY(0);
    animation: vt-horse-cloud-bob 2.4s ease-in-out infinite alternate;
}
@keyframes vt-horse-cloud-bob {
    from { margin-left: -2px; }
    to   { margin-left: 2px; }
}

/* Mưa: hạt rơi hai bên dù rơi suốt chiều cao; hạt trên mặt dù (.roof) chỉ rơi ngắn rồi tan */
.vt-horse__rain {
    position: absolute;
    left: 0;
    top: 44px;
    width: 240px;
    height: 142px;
    overflow: hidden;
    opacity: 0;
    transition: opacity .5s ease;
}
.vt-horse.is-rain .vt-horse__rain { opacity: 1; }
.vt-horse__rain i {
    position: absolute;
    top: -12px;
    width: 2px;
    height: 11px;
    border-radius: 1px;
    background: #3f8cf0;
    opacity: .85;
    animation: vt-horse-drop .75s linear infinite;
}
.vt-horse__rain i.roof {
    top: 0;
    height: 8px;
    animation: vt-horse-drop-roof .45s ease-in infinite;
}
@keyframes vt-horse-drop {
    to { transform: translate(-5px, 150px); }
}
@keyframes vt-horse-drop-roof {
    from { transform: translate(0, 0); opacity: .9; }
    to   { transform: translate(-3px, 16px); opacity: 0; }
}

/* Ngựa */
.vt-horse__runner {
    position: absolute;
    left: 100px;
    bottom: 12px;
    width: 110px;
    height: 140px;
    transform: translateX(340px);
}
.vt-horse.is-running .vt-horse__runner {
    transform: translateX(0);
    transition: transform 1.2s cubic-bezier(.1, .6, .3, 1);
}
.vt-horse.is-stop .vt-horse__runner,
.vt-horse.is-rain .vt-horse__runner { transform: translateX(0); }
.vt-horse.is-leave .vt-horse__runner {
    transform: translateX(340px);
    transition: transform 1.3s cubic-bezier(.5, 0, .9, .6);
}

.vt-horse__svg {
    width: 110px;
    height: 140px;
    overflow: visible;
    transform: scaleX(-1); /* hình vẽ quay mặt phải ⇒ lật để ngựa chạy hướng vào trong màn hình */
}
.vt-horse.is-leave .vt-horse__svg { transform: scaleX(1); }

.vt-horse__svg .leg,
.vt-horse__svg .head,
.vt-horse__svg .tail,
.vt-horse__svg .canopy,
.vt-horse__svg .wave,
.vt-horse__svg .body-all { transform-box: fill-box; }
.vt-horse__svg .leg { transform-origin: 50% 0; }          /* xoay ở hông */
.vt-horse__svg .tail { transform-origin: 100% 0; }        /* xoay ở gốc đuôi */
.vt-horse__svg .wave { transform-origin: 50% 100%; transform: rotate(165deg); transition: transform .5s ease; }  /* xoay ở khuỷu */
.vt-horse__svg .head { transform-origin: 40% 100%; }      /* gật ở gốc cổ */
.vt-horse__svg .canopy { transform-origin: 50% 100%; transition: transform .45s cubic-bezier(.3, 1.4, .5, 1); }

/* Dù gập khi chạy, bung khi đứng lại */
.vt-horse.is-running .canopy,
.vt-horse.is-leave .canopy { transform: scaleX(.1); }

/* Chạy bằng hai chân: hai chân lệch pha, thân nhấp nhô, đuôi bay */
.vt-horse.is-running .leg,
.vt-horse.is-leave .leg { animation: vt-horse-run .26s ease-in-out infinite alternate; }
.vt-horse.is-running .leg-near,
.vt-horse.is-leave .leg-near { animation-delay: -.26s; }
.vt-horse.is-running .body-all,
.vt-horse.is-leave .body-all { animation: vt-horse-bob .13s ease-in-out infinite alternate; }
.vt-horse.is-running .tail,
.vt-horse.is-leave .tail { transform: rotate(-14deg); }
@keyframes vt-horse-run {
    from { transform: rotate(-38deg); }
    to   { transform: rotate(38deg); }
}
@keyframes vt-horse-bob {
    from { transform: translateY(0); }
    to   { transform: translateY(-3px); }
}

/* Đứng lại dưới dù: chân thẳng, đầu gật nhẹ, đuôi đưa đưa */
.vt-horse.is-stop .leg-far, .vt-horse.is-rain .leg-far { transform: rotate(2deg); }
.vt-horse.is-stop .leg-near, .vt-horse.is-rain .leg-near { transform: rotate(-2deg); }
.vt-horse.is-rain .head { animation: vt-horse-nod 1.6s ease-in-out infinite alternate; }
.vt-horse.is-rain .tail { animation: vt-horse-tail 1.2s ease-in-out infinite alternate; }
@keyframes vt-horse-nod {
    from { transform: rotate(-2deg); }
    to   { transform: rotate(4deg); }
}
@keyframes vt-horse-tail {
    from { transform: rotate(4deg); }
    to   { transform: rotate(-10deg); }
}

/* Tay buông đung đưa khi chạy; đứng lại thì giơ lên vẫy chào */
.vt-horse.is-running .wave,
.vt-horse.is-leave .wave { animation: vt-horse-arm-swing .26s ease-in-out infinite alternate; }
.vt-horse.is-stop .wave,
.vt-horse.is-rain .wave { transform: rotate(-14deg); animation: vt-horse-wave .42s ease-in-out .25s infinite alternate; }
@keyframes vt-horse-arm-swing {
    from { transform: rotate(150deg); }
    to   { transform: rotate(190deg); }
}
@keyframes vt-horse-wave {
    from { transform: rotate(-22deg); }
    to   { transform: rotate(-6deg); }
}

/* Bảng «MƯA!»: chỉ hiện khi đứng lại; lật ngược lại để chữ không bị soi gương (cả hình đang scaleX(-1)) */
.vt-horse__svg .sign { display: none; transform-box: fill-box; transform-origin: 50% 50%; transform: scaleX(-1); }
.vt-horse.is-stop .sign,
.vt-horse.is-rain .sign { display: inline; }

/* Đầu: nhìn nghiêng khi chạy; dừng lại thì quay thẳng ra nhìn người xem */
.vt-horse__svg .face-front { display: none; transform-box: fill-box; transform-origin: 50% 50%; }
.vt-horse.is-stop .face-front,
.vt-horse.is-rain .face-front { display: inline; animation: vt-horse-turn .3s ease-out; }
.vt-horse.is-stop .face-side,
.vt-horse.is-rain .face-side { display: none; }
@keyframes vt-horse-turn {
    from { transform: scaleX(.35); }
    to   { transform: scaleX(1); }
}

/* Cuối: mưa tạnh, mây tan */
.vt-horse.is-leave .vt-horse__cloud,
.vt-horse.is-leave .vt-horse__rain { opacity: 0; }
.vt-horse.is-leave .vt-horse__ground { opacity: 0; transition: opacity .8s ease; }