.fadein,
.fadeout {
	animation-duration: 1s
}

@keyframes Start {
	from {
		visibility: hidden
	}

	to {
		visibility: visible
	}

}

@keyframes Preloader {
	100% {
		transform: rotate(360deg)
	}

}

@keyframes Play {
	from {
		background-position: 0
	}

	to {
		background-position: -360px
	}

}

@keyframes Ani {
	0% {
		box-shadow: 0 0 0 rgba(220, 220, 220, 0);
		border: 1px solid rgba(220, 220, 220, 0);
		transform: scale(0)
	}

	70% {
		box-shadow: 0 0 50px rgba(220, 220, 220, 1);
		border: 1px solid rgba(220, 220, 220, 1);
		transform: scale(1)
	}

	100% {
		box-shadow: 0 0 60px rgba(220, 220, 220, 0);
		border: 0 solid rgba(220, 220, 220, 0);
		transform: scale(2)
	}

}

@keyframes BgColor {
	from {
		background-color: rgba(0, 72, 53, 1)
	}

	to {
		background-color: rgba(176, 92, 30, 1)
	}

}

@keyframes Leftpage {
	from {
		left: -100%
	}

	to {
		left: 100%
	}

}

@keyframes Rotate {
	from {
		transform: rotate(0) translateZ(0)
	}

	to {
		transform: rotate(360deg) translateZ(0)
	}

}

@keyframes empty {
	0% {
		opacity: 1
	}

}

@keyframes fadeIn {
	0% {
		opacity: 0
	}

	100% {
		opacity: 1
	}

}

@keyframes fadeOut {
	0% {
		opacity: 1
	}

	100% {
		opacity: 0
	}

}

@keyframes fadeInUp {
	0% {
		opacity: 0;
		transform: translate3d(0, 100px, 0)
	}

	100% {
		opacity: 1;
		transform: translate3d(0, 0, 0)
	}

}

@keyframes fadeInDown {
	0% {
		opacity: 0;
		transform: translate3d(0, -100px, 0)
	}

	100% {
		opacity: 1;
		transform: translate3d(0, 0, 0)
	}

}

@keyframes flipInX {
	0% {
		transform: perspective(400px) rotateX(90deg) scale(.5);
		opacity: 0
	}

	100% {
		transform: perspective(400px) rotateX(0) scale(1);
		opacity: 1
	}

}

@keyframes flipOutX {
	0% {
		transform: perspective(400px) rotateX(0) scale(1);
		opacity: 1
	}

	100% {
		transform: perspective(400px) rotateX(90deg) scale(.5);
		opacity: 0
	}

}

@keyframes scaleSmall {
	0% {
		opacity: 0;
		transform: scale(1.1)
	}

	100% {
		opacity: 1;
		transform: scale(1)
	}

}

@keyframes scaleLarge {
	0% {
		opacity: 0;
		transform: scale(2)
	}

	100% {
		opacity: 1;
		transform: scale(1)
	}

}

@keyframes scaleLarge2 {
	0% {
		opacity: 0;
		transform: scale(1.1)
	}

	100% {
		opacity: 1;
		transform: scale(1)
	}

}

@keyframes trackBallSlide {

	0%,
	100%,
	30%,
	60% {
		opacity: 1;
		transform: translateY(-12px)
	}

	15%,
	50% {
		opacity: 0;
		transform: translateY(8px)
	}

}

@keyframes goHeight {
	from {
		transform: scale3d(1, 0, 1)
	}

	to {
		transform: scale3d(1, 1, 1)
	}

}

@keyframes goWidth {
	from {
		transform: scale3d(0, 1, 1)
	}

	to {
		transform: scale3d(1, 1, 1)
	}

}

@keyframes aniHeight {
	from {
		transform: scale3d(1, 1, 1)
	}

	to {
		transform: scale3d(1, 0, 1)
	}

}

@keyframes aniWidth {
	from {
		transform: scale3d(1, 1, 1)
	}

	to {
		transform: scale3d(0, 1, 1)
	}

}

@keyframes moveLeft {
	100% {
		transform: translateX(-100%)
	}

}

@keyframes moveRight {
	100% {
		transform: translateX(100%)
	}

}

@keyframes toRight {
	0% {
		opacity: 0;
		right: -100px
	}

	100% {
		opacity: 1;
		right: 0
	}

}

@keyframes toLeft {
	0% {
		opacity: 0;
		left: -100px
	}

	100% {
		opacity: 1;
		left: 0
	}

}

@keyframes goRight {
	0% {
		opacity: 0;
		transform: translate3d(-100%, 0, 0)
	}

	100% {
		opacity: 1;
		transform: none
	}

}

@keyframes goLeft {
	0% {
		opacity: 0;
		transform: translate3d(100%, 0, 0)
	}

	100% {
		opacity: 1;
		transform: none
	}

}

@keyframes DrawStroke {
	0% {
		stroke-dashoffset: 1000
	}

	100% {
		stroke-dashoffset: 0
	}

}

@keyframes DrawStroke1 {
	0% {
		stroke-dashoffset: 2500
	}

	100% {
		stroke-dashoffset: 0
	}

}

@keyframes goBg {
	0% {
		transform: translate3d(-50%, 0, 0)
	}

	100% {
		transform: none
	}

}

@keyframes bounceInDown {

	60%,
	75%,
	90%,
	from,
	to {
		animation-timing-function: cubic-bezier(.215, .61, .355, 1)
	}

	0% {
		opacity: 0;
		transform: translate3d(0, -3000px, 0)
	}

	60% {
		opacity: 1;
		transform: translate3d(0, 25px, 0)
	}

	75% {
		transform: translate3d(0, -10px, 0)
	}

	90% {
		transform: translate3d(0, 5px, 0)
	}

	to {
		opacity: 1
	}

}

@keyframes Color2 {

	0%,
	60% {
		background-color: #00431c
	}

	20% {
		background-color: #b08a30
	}

}

@keyframes Border {

	0%,
	60% {
		border-top-color: #ffdd80
	}

	20% {
		border-top-color: #117090
	}

}

@keyframes Border1 {

	0%,
	60% {
		border-color: #ffdd80
	}

	20% {
		border-color: #117090
	}

}

@keyframes Shake {

	from,
	to {
		transform: translate3d(0, 0, 0) rotate(0)
	}

	0%,
	50% {
		transform: translate3d(-10px, 0, 0) rotate(15deg)
	}

	25% {
		transform: translate3d(10px, 0, 0) rotate(-15deg)
	}

}

@keyframes Bounce {
	0% {
		transform: translate3d(0, 0, 0) rotate(0)
	}

	50% {
		transform: translate3d(50px, 20px, 0) rotate(125deg)
	}

	100% {
		transform: translate3d(0, 0, 0) rotate(360deg)
	}

}

@keyframes StrokeLine {
	0% {
		stroke-dashoffset: 0
	}

	100% {
		stroke-dashoffset: -200
	}

}

@keyframes StrokeLine1 {
	0% {
		stroke-dashoffset: 0
	}

	100% {
		stroke-dashoffset: 200
	}

}

@keyframes StrokeLine2 {
	0% {
		stroke-dashoffset: 0
	}

	100% {
		stroke-dashoffset: 300
	}

}

@keyframes BorderBox {

	0%,
	100% {
		background-position: 0 0
	}

	50% {
		background-position: 100% 100%
	}

}

@keyframes MaskPlay {
	from {
		mask-position: 0 0
	}

	to {
		mask-position: 100% 0
	}

}

@keyframes DrawStroke1 {
	0% {
		stroke-dashoffset: 8000
	}

	100% {
		stroke-dashoffset: 0
	}

}

.fadein {
	animation-name: fadeIn;
	animation-fill-mode: forwards
}

.fadeout {
	animation-name: fadeOut;
	animation-fill-mode: forwards
}

.flipinx,
.flipoutx {
	animation-duration: .8s;
	animation-fill-mode: forwards
}

.flipoutx {
	-webkit-backface-visibility: visible !important;
	backface-visibility: visible !important;
	animation-name: flipOutX
}

.flipinx {
	-webkit-backface-visibility: visible !important;
	backface-visibility: visible !important;
	animation-name: flipInX
}

/* ============================================================
   WORKER CHARACTER — Card hover & GoTop
   ============================================================ */

/* SVG worker (orange vest) injected as ::after pseudo on cards */
/* ============================================================
   PANDA CHARACTER — dùng CSS mask + gradient gradient tô màu
   panda-worker.svg = no cape (cards), panda-cape.svg = cape (scrolltop)
   ============================================================ */

/* Panda character — gradient màu nhúng sẵn trong SVG, dùng background-image đơn giản */
.hm-svc-card__img::after,
.hm-proj-card::after {
    content: '';
    position: absolute;
    bottom: -72px;
    right: 10px;
    width: 58px;
    height: 72px;
    background-image: url('../../upload/photo/panda-worker.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom center;
    pointer-events: none;
    z-index: 30;
    transform-origin: bottom center;
    transition: bottom 0.4s ease-out;
    filter: drop-shadow(2px 0 6px rgba(0,0,0,0.2));
}

/* Hover → panda pops lên, đứng góc phải trên card info */
.hm-svc-card:hover .hm-svc-card__img::after {
    bottom: 0;
    animation: wmBob 1.8s ease-in-out 0.42s infinite;
}
.hm-proj-card:hover::after {
    bottom: 0;
    animation: wmBob 1.8s ease-in-out 0.42s infinite;
}

/* Gentle idle bob */
@keyframes wmBob {
    0%, 100% { transform: translateY(0) scaleX(1); }
    50%       { transform: translateY(-7px) scaleX(1.02); }
}

/* Pop in bounce (used elsewhere) */
@keyframes wmPopIn {
    0%   { transform: translateY(16px) scaleY(0.82); }
    55%  { transform: translateY(-10px) scaleY(1.06); }
    78%  { transform: translateY(4px) scaleY(0.96); }
    100% { transform: translateY(0) scaleY(1); }
}

/* ============================================================
   SERVICE CARD — Body layout: info (col) + go button (tall, full height)
   ============================================================ */
.hm-svc-card__body {
    flex-direction: row !important;
    align-items: stretch;
    gap: 10px;
}
.hm-svc-card__info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    justify-content: center;
}
.hm-svc-card__title {
    justify-content: flex-start !important;
    align-items: center;
    flex-wrap: nowrap;
    gap: 6px;
    width: 100%;
}
.hm-svc-card__more { display: none !important; }

.hm-svc-card__go {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    align-self: center;
    border-radius: 50%;
    background: var(--hm-green, #1a7046);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    box-shadow: 0 2px 8px rgba(26,112,70,0.25);
    transition: background 0.22s;
}
.hm-svc-card__go i {
    font-size: 18px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    transition: transform 0.3s ease;
}
.hm-svc-card:hover .hm-svc-card__go { background: #0d5230; }
.hm-svc-card:hover .hm-svc-card__go i {
    animation: svcGoRotate 0.7s ease-in-out infinite;
}
@keyframes svcGoRotate {
    0%, 100% { transform: rotate(0deg); }
    50%       { transform: rotate(45deg); }
}

/* ============================================================
   GOTOP — Panda cape đỏ, gradient màu, nhảy lên
   ============================================================ */
.hm-gotop-worker {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 60px !important;
    height: 72px !important;
    background: transparent !important;
    border-radius: 8px !important;
    padding: 0 !important;
    cursor: pointer;
    overflow: visible !important;
}
.hm-gotop-panda {
    display: block;
    width: 56px;
    height: 68px;
    background-image: url('../../upload/photo/panda-cape.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transform-origin: bottom center;
    filter: drop-shadow(0 4px 10px rgba(0,0,0,0.3));
}
.hm-gotop-worker.show .hm-gotop-panda {
    animation: wmJump 1.6s ease-in-out infinite;
}
.hm-gotop-worker:hover .hm-gotop-panda {
    animation: wmJumpFast 0.7s ease-in-out infinite !important;
    filter: drop-shadow(0 6px 14px rgba(220,38,38,0.5));
}
@keyframes wmJump {
    0%, 100% { transform: translateY(0) scaleX(1) scaleY(1); }
    18%       { transform: translateY(-16px) scaleX(0.96) scaleY(1.04); }
    36%       { transform: translateY(-22px) scaleX(1) scaleY(1); }
    54%       { transform: translateY(-14px) scaleX(1.02) scaleY(0.98); }
    72%       { transform: translateY(3px) scaleX(1.04) scaleY(0.94); }
    84%       { transform: translateY(-4px) scaleX(1) scaleY(1.02); }
    92%       { transform: translateY(1px) scaleX(1) scaleY(1); }
}
@keyframes wmJumpFast {
    0%, 100% { transform: translateY(0) scaleY(1); }
    35%       { transform: translateY(-26px) scaleY(1.04); }
    65%       { transform: translateY(-28px) scaleY(1); }
    80%       { transform: translateY(4px) scaleY(0.92); }
    90%       { transform: translateY(-3px) scaleY(1.02); }
}

/* ============================================================
   VIDEO CAROUSEL — slide items
   ============================================================ */
.hm-video-slide-title {
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 10px;
    opacity: 0.9;
    text-align: center;
}
.hm-video-carousel .owl-dots { margin-top: 18px; }

.fadeindown,
.fadeinup,
.fadeoff,
.fadeon {
	animation-duration: 1s
}

.fadeindown {
	animation-name: fadeInDown;
	animation-fill-mode: forwards
}

.fadeinup {
	animation-name: fadeInUp;
	animation-fill-mode: forwards
}

.fadeoff {
	animation-name: fadeOff;
	animation-fill-mode: forwards
}

.fadeon {
	animation-name: fadeOn;
	animation-fill-mode: forwards
}

.goleft,
.goright {
	animation-duration: .8s;
	animation-fill-mode: forwards
}

.goleft {
	animation-name: goLeft
}

.goright {
	animation-name: goRight
}

.scalelarge {
	animation: scaleLarge;
	animation-duration: 1s;
	animation-fill-mode: forwards
}

.moveleft,
.moveright {
	pointer-events: none;
	animation-duration: .8s;
	animation-fill-mode: forwards
}

.moveleft {
	animation-name: moveLeft
}

.moveright {
	animation-name: moveRight
}

.contact-form,
.container,
.footer,
.go-top,
.header,
.register-form {
	animation: Start 1s steps(1, end) 0s 1 normal both
}

.slide-fade-out {
	animation: fadeOut;
	animation-duration: 1s;
	animation-fill-mode: forwards
}

.slide-fade-in {
	animation: fadeIn;
	animation-duration: 1s;
	animation-fill-mode: forwards;
}

.interior-hero-callout {
	animation: circleFloat 5s linear forwards infinite
}

@keyframes circleFloat {
	from {
		transform: rotate(0deg)
	}

	to {
		transform: rotate(360deg)
	}

}

.is-selected {
	animation-name: sizingSmall;
	animation-duration: 1s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
	transform: scale(1)
}

@keyframes sizingLarge {
	0% {
		transform: scale(.8)
	}

	50% {
		transform: scale(1.1)
	}

	100% {
		transform: scale(1)
	}

}

@keyframes sizingSmall {
	0% {
		transform: scale(.8)
	}

	50% {
		transform: scale(1)
	}

	100% {
		transform: scale(.9)
	}

}

.flickity-button {
	width: 49px;
	height: 49px;
	background-color: #f4c271;
	overflow: hidden;
	transition: transform .2s ease-in-out
}

@keyframes circleFloat {
	from {
		transform: rotate(0deg)
	}

	to {
		transform: rotate(360deg)
	}

}

.is-selected {
	animation-name: sizingSmall;
	animation-duration: 1s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
	transform: scale(1)
}

@keyframes sizingLarge {
	0% {
		transform: scale(.8)
	}

	50% {
		transform: scale(1.05)
	}

	100% {
		transform: scale(1)
	}

}

@keyframes sizingSmall {
	0% {
		transform: scale(.8)
	}

	50% {
		transform: scale(1)
	}

	100% {
		transform: scale(.9)
	}

}