/* Webme UX Effects 0.3.0 — chỉ thêm lựa chọn vào ô có sẵn của Flatsome.
   Animate: Flatsome gắn data-animate=<kiểu>, khi cuộn tới gắn data-animated=true. Ta chỉ định trạng thái đầu + chuyển động. */
:root{--wux-ease:cubic-bezier(.16,1,.3,1);--wux-spring:cubic-bezier(.34,1.56,.64,1)}

/* ---------- 1. Animate (khi cuộn tới) ---------- */
[data-animate^=wux]{transform-origin:50% 50%}
[data-animate=wuxBlurUp]{transform:translate3d(0,40px,0);filter:blur(10px)}
[data-animate=wuxZoomIn]{transform:scale(.85)}
[data-animate=wuxZoomOut]{transform:scale(1.15)}
[data-animate=wuxSlideUp]{transform:translate3d(0,140px,0)}
[data-animate=wuxSlideLeft]{transform:translate3d(-160px,0,0)}
[data-animate=wuxSlideRight]{transform:translate3d(160px,0,0)}
[data-animate=wuxTiltIn]{transform:translate3d(0,60px,0) rotate(-6deg)}
[data-animate=wuxFlipUp]{transform:perspective(900px) rotateX(-55deg) translate3d(0,50px,0);transform-origin:50% 100%}
[data-animate=wuxDropIn]{transform:translate3d(0,-120px,0)}
[data-animate=wuxUnfold]{transform:scaleY(.05);transform-origin:50% 0}
[data-animate=wuxBlurZoom]{transform:scale(1.2);filter:blur(16px)}

[data-animate^=wux][data-animated=true]{filter:none;transition:transform 1s var(--wux-ease),opacity .7s ease-out,filter 1s var(--wux-ease)!important}
[data-animate=wuxDropIn][data-animated=true]{transition:transform .9s var(--wux-spring),opacity .4s!important}

/* Reveal: clip-path chỉ gắn khi đã kích hoạt (clip lúc đầu làm IntersectionObserver của Flatsome không bắn) */
@keyframes wuxRevUp{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes wuxRevLeft{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes wuxRevDiag{from{clip-path:polygon(0 0,0 0,0 0,0 0)}to{clip-path:polygon(0 0,200% 0,0 200%,0 0)}}
@keyframes wuxRevCircle{from{clip-path:circle(0% at 50% 50%)}to{clip-path:circle(75% at 50% 50%)}}
@keyframes wuxRevZoom{from{clip-path:inset(0 0 100% 0);transform:scale(1.25)}to{clip-path:inset(0 0 0 0);transform:scale(1)}}
[data-animate=wuxRevealUp][data-animated=true]{animation:wuxRevUp 1.1s var(--wux-ease) both}
[data-animate=wuxRevealLeft][data-animated=true]{animation:wuxRevLeft 1.1s var(--wux-ease) both}
[data-animate=wuxRevealDiag][data-animated=true]{animation:wuxRevDiag 1.3s var(--wux-ease) both}
[data-animate=wuxRevealCircle][data-animated=true]{animation:wuxRevCircle 1.2s var(--wux-ease) both}
[data-animate=wuxRevealZoom][data-animated=true]{animation:wuxRevZoom 1.4s var(--wux-ease) both}

/* Độ trễ + tốc độ (ô ★ Độ trễ / ★ Tốc độ) — áp cho cả kiểu cũ của Flatsome */
[data-wux-d="100"][data-animated=true]{transition-delay:.1s!important;animation-delay:.1s}
[data-wux-d="200"][data-animated=true]{transition-delay:.2s!important;animation-delay:.2s}
[data-wux-d="300"][data-animated=true]{transition-delay:.3s!important;animation-delay:.3s}
[data-wux-d="400"][data-animated=true]{transition-delay:.4s!important;animation-delay:.4s}
[data-wux-d="500"][data-animated=true]{transition-delay:.5s!important;animation-delay:.5s}
[data-wux-d="600"][data-animated=true]{transition-delay:.6s!important;animation-delay:.6s}
[data-wux-d="800"][data-animated=true]{transition-delay:.8s!important;animation-delay:.8s}
[data-wux-d="1000"][data-animated=true]{transition-delay:1s!important;animation-delay:1s}
[data-wux-d="1200"][data-animated=true]{transition-delay:1.2s!important;animation-delay:1.2s}
[data-wux-d="1500"][data-animated=true]{transition-delay:1.5s!important;animation-delay:1.5s}
[data-wux-s=fast][data-animated=true]{transition-duration:.5s!important;animation-duration:.5s}
[data-wux-s=slow][data-animated=true]{transition-duration:1.4s!important;animation-duration:1.4s}
[data-wux-s=xslow][data-animated=true]{transition-duration:2s!important;animation-duration:2s}

/* ---------- 2. Hover ảnh (image-<kiểu>) + Hover nền banner (bg-<kiểu> .bg) ---------- */
[class*=image-wux-] img,[class*=bg-wux-] .bg{transition:transform .8s var(--wux-ease),filter .6s,box-shadow .5s}
.image-wux-zoom-soft:hover img,.has-hover:hover .image-wux-zoom-soft img,.bg-wux-zoom-soft:hover .bg{transform:scale(1.08)}
.image-wux-lift{transition:transform .5s var(--wux-ease),box-shadow .5s}
.image-wux-lift:hover,.has-hover:hover .image-wux-lift{transform:translateY(-8px);box-shadow:0 22px 40px -12px rgba(0,0,0,.28)}
.bg-wux-lift{transition:transform .5s var(--wux-ease),box-shadow .5s}
.bg-wux-lift:hover{transform:translateY(-6px);box-shadow:0 22px 40px -12px rgba(0,0,0,.28)}
.image-wux-zoom-rotate:hover img,.has-hover:hover .image-wux-zoom-rotate img,.bg-wux-zoom-rotate:hover .bg{transform:scale(1.15) rotate(2.5deg)}
.image-wux-pan:hover img,.has-hover:hover .image-wux-pan img,.bg-wux-pan:hover .bg{transform:scale(1.18) translateX(-5%)}
.image-wux-tilt,.bg-wux-tilt{perspective:900px}
.image-wux-tilt:hover img,.has-hover:hover .image-wux-tilt img,.bg-wux-tilt:hover .bg{transform:rotateY(8deg) rotateX(3deg) scale(1.05)}
.image-wux-shine,.bg-wux-shine{position:relative;overflow:hidden}
.image-wux-shine:after,.bg-wux-shine:after{content:"";position:absolute;z-index:2;top:0;left:-80%;width:50%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-20deg);pointer-events:none}
.image-wux-shine:hover:after,.has-hover:hover .image-wux-shine:after,.bg-wux-shine:hover:after{left:130%;transition:left .9s ease}
.image-wux-bw-color img,.bg-wux-bw-color .bg{filter:grayscale(1)}
.image-wux-bw-color:hover img,.has-hover:hover .image-wux-bw-color img,.bg-wux-bw-color:hover .bg{filter:grayscale(0)}
.image-wux-bright:hover img,.has-hover:hover .image-wux-bright img,.bg-wux-bright:hover .bg{filter:brightness(1.1) saturate(1.35)}

/* ---------- 3. Hover cột (col-hover-<kiểu> .col-inner) ---------- */
[class*=col-hover-wux-] .col-inner{transition:transform .5s var(--wux-ease),box-shadow .5s,opacity .4s,filter .4s}
.col-hover-wux-lift:hover .col-inner{transform:translateY(-8px);box-shadow:0 24px 44px -14px rgba(0,0,0,.25)}
.col-hover-wux-scale:hover .col-inner{transform:scale(1.03)}
.col-hover-wux-glow:hover .col-inner{box-shadow:0 0 0 2px var(--primary-color,#446084),0 18px 40px -12px var(--primary-color,#446084)}
.col-hover-wux-tilt{perspective:1000px}
.col-hover-wux-tilt:hover .col-inner{transform:rotateX(4deg) rotateY(-6deg) translateY(-4px)}
.row:hover .col-hover-wux-dim:not(:hover) .col-inner{opacity:.55;filter:grayscale(.6)}
/* thẻ thật là phần tử con (JS gắn .wux-hov-card/.wux-hov-t): col-inner đứng yên, thẻ con nhô + bóng theo góc bo */
.wux-hov-card[class*=col-hover-wux-]:hover .col-inner{transform:none;box-shadow:none}
.wux-hov-card .wux-hov-t{transition:transform .5s var(--wux-ease),box-shadow .5s}
.col-hover-wux-lift.wux-hov-card:hover .wux-hov-t{transform:translateY(-8px);box-shadow:0 24px 44px -14px rgba(0,0,0,.25)}
.col-hover-wux-scale.wux-hov-card:hover .wux-hov-t{transform:scale(1.03)}
.col-hover-wux-glow.wux-hov-card:hover .wux-hov-t{box-shadow:0 0 0 2px var(--primary-color,#446084),0 18px 40px -12px var(--primary-color,#446084)}
.col-hover-wux-tilt.wux-hov-card:hover .wux-hov-t{transform:rotateX(4deg) rotateY(-6deg) translateY(-4px)}

/* ---------- 4. Hiệu ứng nút (ô ★ Hiệu ứng nút) ---------- */
[class*=wux-bh-]{position:relative;overflow:hidden;isolation:isolate;transition:transform .35s var(--wux-ease),box-shadow .35s,color .35s,background-color .35s}
.wux-bh-shine:after,.wux-bh-shimmer:after{content:"";position:absolute;top:0;left:-90%;width:60%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);pointer-events:none}
.wux-bh-shine:hover:after{left:140%;transition:left .7s ease}
@keyframes wuxShimmer{0%,60%{left:-90%}100%{left:140%}}
.wux-bh-shimmer:after{animation:wuxShimmer 3s ease-in-out infinite}
.wux-bh-fill:before{content:"";position:absolute;inset:0;z-index:-1;background:currentColor;opacity:.18;transform:scaleX(0);transform-origin:0 50%;transition:transform .45s var(--wux-ease)}
.wux-bh-fill:hover:before{transform:scaleX(1)}
.button.wux-bh-lift:hover,.wux-bh-lift:hover{transform:translateY(-4px)!important;box-shadow:0 14px 26px -8px rgba(0,0,0,.35)!important}
.wux-bh-arrow:after{content:"→";display:inline-block;margin-left:.45em;transition:transform .35s var(--wux-ease)}
.wux-bh-arrow:hover:after{transform:translateX(5px)}
@keyframes wuxPulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--primary-color,#446084) 55%,transparent)}70%{box-shadow:0 0 0 14px rgba(0,0,0,0)}100%{box-shadow:0 0 0 0 rgba(0,0,0,0)}}
.wux-bh-pulse{overflow:visible;animation:wuxPulse 2s infinite}
@keyframes wuxRing{0%,50%,100%{transform:rotate(0)}5%,15%,25%{transform:rotate(-8deg)}10%,20%,30%{transform:rotate(8deg)}35%{transform:rotate(0)}}
.wux-bh-ring{animation:wuxRing 2.4s ease-in-out infinite}
.wux-bh-ring:hover{animation:none}
@keyframes wuxBobWave{0%,100%{transform:translateY(0);box-shadow:0 0 0 0 color-mix(in srgb,var(--primary-color,#446084) 50%,transparent)}45%{transform:translateY(-6px);box-shadow:0 0 0 12px transparent}70%{transform:translateY(1px);box-shadow:0 0 0 0 transparent}}
.wux-bh-bobwave{overflow:visible;animation:wuxBobWave 2s var(--wux-ease) infinite}
@keyframes wuxHeartbeat{0%,28%,70%,100%{transform:scale(1)}10%,42%{transform:scale(1.09)}18%,50%{transform:scale(.98)}}
.wux-bh-heartbeat{overflow:visible;transform-origin:center;animation:wuxHeartbeat 2.2s ease-in-out infinite}
@keyframes wuxWiggle{0%,64%,100%{transform:translateX(0)}70%,82%,94%{transform:translateX(-5px)}76%,88%{transform:translateX(5px)}}
.wux-bh-wiggle{animation:wuxWiggle 2.8s ease-in-out infinite}
@keyframes wuxBorderLoop{to{transform:rotate(1turn)}}
.wux-bh-borderloop{overflow:hidden;border-color:transparent!important}
.wux-bh-borderloop:before{content:"";position:absolute;z-index:0;inset:-160%;background:conic-gradient(transparent 0 38%,rgba(255,255,255,.95) 48%,var(--primary-color,#446084) 52%,transparent 62%);animation:wuxBorderLoop 2.2s linear infinite;pointer-events:none}
.wux-bh-borderloop:after{content:"";position:absolute;z-index:0;inset:2px;border-radius:inherit;background:inherit;pointer-events:none}
.wux-bh-borderloop>span,.wux-bh-borderloop>i{position:relative;z-index:1}
@keyframes wuxDoubleWave{0%{opacity:.75;transform:scale(.92)}100%{opacity:0;transform:scale(1.38)}}
.wux-bh-doublewave{overflow:visible}
.wux-bh-doublewave:before,.wux-bh-doublewave:after{content:"";position:absolute;z-index:-1;inset:0;border:2px solid currentColor;border-radius:inherit;pointer-events:none;animation:wuxDoubleWave 2s ease-out infinite}
.wux-bh-doublewave:after{animation-delay:1s}
/* Đổi màu: nền chuyển sang màu phụ của site (filter không ăn với nút đen/trắng). --wux-blink-fg do JS chọn đen/trắng theo độ sáng. */
@keyframes wuxColorBlink{0%,30%,100%{background-color:var(--wux-blink-bg0);border-color:var(--wux-blink-bg0);color:var(--wux-blink-fg0)}50%,80%{background-color:var(--wux-blink-bg,var(--fs-color-secondary,#d26e4b));border-color:var(--wux-blink-bg,var(--fs-color-secondary,#d26e4b));color:var(--wux-blink-fg,#fff)}}
.wux-bh-colorblink.wux-cb-on{animation:wuxColorBlink 2.4s ease-in-out infinite}
@keyframes wuxViewBounce{0%{transform:translateY(0)}30%{transform:translateY(-14px)}52%{transform:translateY(0)}70%{transform:translateY(-6px)}100%{transform:translateY(0)}}
.wux-bh-viewbounce.wux-go{animation:wuxViewBounce .9s var(--wux-spring) both}

/* ---------- Giảm chuyển động ---------- */
@media (prefers-reduced-motion:reduce){
	[data-animate^=wux]{transform:none!important;filter:none!important;clip-path:none!important;opacity:1!important;transition:none!important;animation:none!important}
	[class*=image-wux-],[class*=image-wux-] img,[class*=bg-wux-] .bg,[class*=col-hover-wux-] .col-inner,[class*=wux-bh-],[class*=wux-bh-]:after,[class*=wux-bh-]:before{transition:none!important;animation:none!important;transform:none!important}
}

/* ================= 0.3.0 ================= */
.wux-sr,.section-title .wux-sr{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;border:0!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;white-space:nowrap!important}

/* 9. Hiện lần lượt từng ô */
.wux-st{opacity:0;transition:opacity .7s ease,transform .9s var(--wux-ease),filter .9s var(--wux-ease);transition-delay:calc(var(--wux-i,0) * 90ms)}
.wux-st-up .wux-st{transform:translateY(40px)}
.wux-st-zoom .wux-st{transform:scale(.88)}
.wux-st-blur .wux-st{transform:translateY(16px);filter:blur(10px)}
.wux-st-left .wux-st{transform:translateX(-50px)}
.wux-in .wux-st{opacity:1;transform:none;filter:none}

/* 2. Chữ hiện từng từ */
.wux-words .wux-w{display:inline-block;opacity:0;transform:translateY(.55em);filter:blur(4px);transition:opacity .6s ease,transform .7s var(--wux-ease),filter .6s ease;transition-delay:calc(min(var(--wux-i,0),40) * 45ms)}
.wux-words.wux-in .wux-w{opacity:1;transform:none;filter:none}

/* 1. Số đếm */
.wux-num{display:inline-block;font-variant-numeric:tabular-nums;text-align:left}

/* 17. Gõ máy */
.wux-type{border-right:.08em solid currentColor;padding-right:.06em;animation:wuxCaret .8s step-end infinite;white-space:nowrap}
@keyframes wuxCaret{50%{border-right-color:transparent}}

/* 3. Dải chạy vô tận */
.row.wux-mq{flex-wrap:nowrap!important;overflow:hidden;max-width:100%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.wux-mq-track{display:flex;flex:none;flex-wrap:nowrap;width:max-content;max-width:none;animation:wuxMq 30s linear infinite}
.row.wux-mq>div.wux-mq-track.wux-mq-track.wux-mq-track{width:max-content!important}
.wux-mq-track>.col{flex-shrink:0}
.wux-mq-r .wux-mq-track{animation-direction:reverse}
.wux-mq:hover .wux-mq-track{animation-play-state:paused}
@keyframes wuxMq{to{transform:translateX(-50%)}}

/* 13. Ken Burns nền Section/Banner */
.wux-bg-kenburns>.section-bg,.wux-bg-kenburns .banner-bg,.wux-bg-kenburns-pan>.section-bg,.wux-bg-kenburns-pan .banner-bg{overflow:hidden}
.wux-bg-kenburns>.section-bg .bg,.wux-bg-kenburns .banner-bg .bg{animation:wuxKB 16s ease-in-out infinite alternate}
.wux-bg-kenburns-pan>.section-bg .bg,.wux-bg-kenburns-pan .banner-bg .bg{animation:wuxKBpan 18s ease-in-out infinite alternate}
@keyframes wuxKB{from{transform:scale(1)}to{transform:scale(1.16)}}
@keyframes wuxKBpan{from{transform:scale(1.15) translate3d(-3%,-1%,0)}to{transform:scale(1.15) translate3d(3%,1%,0)}}

/* 16. So sánh trước/sau */
.wux-cmp{position:relative;overflow:hidden;line-height:0;border-radius:10px;user-select:none;--p:50%}
.wux-cmp img{display:block;width:100%;height:auto}
.wux-cmp-a{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--p)) 0 0)}
.wux-cmp-a img{width:100%;height:100%;object-fit:cover}
.wux-cmp input{position:absolute;inset:0;z-index:3;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none}
.wux-cmp-h{position:absolute;z-index:2;top:0;bottom:0;left:var(--p);width:3px;margin-left:-1.5px;background:#fff;box-shadow:0 0 10px rgba(0,0,0,.35);pointer-events:none}
.wux-cmp-h:after{content:"";position:absolute;top:50%;left:50%;width:42px;height:42px;margin:-21px 0 0 -21px;border-radius:50%;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6l-6 6 6 6M15 6l6 6-6 6' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/22px no-repeat;box-shadow:0 4px 14px rgba(0,0,0,.3)}
.wux-cmp input:focus-visible~.wux-cmp-h:after{outline:3px solid var(--primary-color,#446084);outline-offset:2px}
.wux-cmp-l{position:absolute;z-index:2;top:12px;padding:6px 12px;border-radius:8px;background:rgba(0,0,0,.55);color:#fff;font-size:13px;line-height:1.2;pointer-events:none}
.wux-cmp-l1{left:12px}.wux-cmp-l2{right:12px}

/* 5. Nút nổi Gọi/Zalo (JS đưa ra body) */
body>.wux-float{position:fixed!important;z-index:998;bottom:22px;transition:bottom .25s;margin:0!important;box-shadow:0 10px 24px -6px rgba(0,0,0,.35);animation:wuxPulse 2s infinite}
body>.wux-float-right{right:22px}
body>.wux-float-left{left:22px}
body>.wux-float.wux-bh-ring{animation:wuxRing 2.4s ease-in-out infinite,wuxPulse 2s infinite}

/* 25. Badge Sale/Hot */
.wux-badge-shake .badge{animation:wuxShake 3s ease-in-out infinite;transform-origin:50% 0}
@keyframes wuxShake{0%,80%,100%{transform:rotate(0)}83%,89%,95%{transform:rotate(-10deg)}86%,92%,98%{transform:rotate(10deg)}}
.wux-badge-pop .badge{animation:wuxPop 1.6s ease-in-out infinite}
@keyframes wuxPop{0%,100%{transform:scale(1)}50%{transform:scale(1.14)}}
.wux-badge-shine .badge-inner{position:relative;overflow:hidden}
.wux-badge-shine .badge-inner:after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.75),transparent);transform:skewX(-20deg);animation:wuxBadgeShine 2.6s ease-in-out infinite}
@keyframes wuxBadgeShine{0%,55%{left:-120%}100%{left:160%}}

/* 11. Header kính mờ + thu nhỏ (+ ẩn khi cuộn xuống) */
.wux-hglass .header-wrapper.stuck{-webkit-backdrop-filter:blur(14px) saturate(1.6);backdrop-filter:blur(14px) saturate(1.6);box-shadow:0 8px 28px -12px rgba(0,0,0,.25)!important;transition:transform .45s var(--wux-ease)}
.wux-hglass .header-wrapper.stuck .header-bg-color{opacity:.72}
.wux-hglass .header-wrapper.stuck .header-main{height:62px!important;transition:height .4s var(--wux-ease)}
.wux-hglass .header-wrapper.stuck #logo img{max-height:44px!important}
.wux-hhide.wux-hdown .header-wrapper.stuck{transform:translateY(-100%)}

@media (prefers-reduced-motion:reduce){
	.wux-st,.wux-words .wux-w{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}
	.wux-type,.wux-mq-track,[class*=wux-bg-kenburns] .bg,.wux-float,[class*=wux-badge-] .badge,[class*=wux-badge-] .badge-inner:after{animation:none!important}
}

/* ================= 0.4.0: phần tử nhóm "Webme" ================= */
.wux-empty,.wux-ntf-pv small{display:block;padding:14px;border:2px dashed #ccc;color:#888;font-size:13px;text-align:center}
/* Số đếm */
.wux-counter{line-height:1.1;margin-bottom:1em}
.wux-c-num{font-size:1em;font-weight:800;color:var(--wux-c);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.wux-c-lbl{margin-top:.45em;font-size:max(14px,.32em);color:inherit;opacity:.8;font-weight:500;line-height:1.35}
.wux-c-ic{display:inline-block;width:auto;height:1.1em;margin-bottom:.25em}
.wux-counter[style*="text-align:center"] .wux-c-ic{display:block;margin-left:auto;margin-right:auto}
.wux-cmp{margin-bottom:1em}
/* Dải chạy */
.wux-mqx{margin-left:0!important;margin-right:0!important;align-items:center;flex-wrap:nowrap!important;overflow:hidden}
.wux-mqx .wux-mq-it{flex:0 0 auto!important;width:auto!important;max-width:none!important;padding:0 calc(var(--wux-gap,50px)/2)!important}
.wux-mqx .wux-mq-it img{display:block;width:auto;max-width:none;object-fit:contain}
.wux-mq-tx{display:inline-flex;align-items:center;gap:.6em;white-space:nowrap;font-weight:700;font-size:1.15em}
.wux-mq-tx:before{content:"✦";color:var(--primary-color,#446084)}
.wux-mq-gray img{filter:grayscale(1);opacity:.65;transition:filter .3s,opacity .3s}
.wux-mq-gray img:hover{filter:none;opacity:1}
/* Nút liên hệ nổi (nhóm) */
.wux-fl-group{display:flex;flex-direction:column;gap:12px;align-items:center}
body>.wux-fl-group{animation:none;box-shadow:none}
.wux-fb{display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;color:#fff!important;box-shadow:0 8px 20px -6px rgba(0,0,0,.4);transition:transform .25s var(--wux-ease)}
.wux-fb:hover{transform:scale(1.1)}
.wux-fb svg{width:26px;height:26px}
.wux-fb b{font-size:13px;font-weight:800;letter-spacing:-.02em}
.wux-fb-tel{background:#e53935;animation:wuxPulse 2s infinite,wuxRing 2.4s ease-in-out infinite;--primary-color:#e53935}
.wux-fb-zl{background:#0068ff}
.wux-fb-ms{background:linear-gradient(45deg,#0a7cff,#a033ff 60%,#ff5c87)}
/* Chữ gõ máy */
.wux-typing strong{color:var(--wux-c,var(--primary-color,#446084))}
.wux-type:after{content:"";display:inline-block;width:.08em;height:1em;margin-left:.06em;vertical-align:-.12em;background:currentColor;animation:wuxCaret 1s steps(1) infinite}
@keyframes wuxCaret{50%{opacity:0}}
/* Bảng so sánh */
.wux-vs{--wux-c:var(--primary-color,#446084);overflow-x:auto;margin-bottom:1.3em;-webkit-overflow-scrolling:touch}
.wux-vs table{width:100%;min-width:420px;border-collapse:separate;border-spacing:0;margin:0;font-size:.95em}
.wux-vs th,.wux-vs td{padding:13px 14px;border:0;border-bottom:1px solid rgba(0,0,0,.08);text-align:center;vertical-align:middle;line-height:1.35}
.wux-vs tbody th{text-align:left;font-weight:500}
.wux-vs thead th{font-weight:700;background:rgba(0,0,0,.04);text-transform:none;letter-spacing:0}
.wux-vs .wux-vs-me{background:color-mix(in srgb,var(--wux-c) 9%,#fff);font-weight:700}
.wux-vs thead .wux-vs-me{background:var(--wux-c);color:#fff;border-radius:10px 10px 0 0}
.wux-vs tbody tr:last-child .wux-vs-me{border-radius:0 0 10px 10px}
.wux-vs-y,.wux-vs-n{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;font-weight:800;font-size:14px;color:#fff;background:#22a45d}
.wux-vs-n{background:#d0d3d8}
/* Các bước quy trình */
.wux-steps{--wux-c:var(--primary-color,#446084);display:grid;grid-template-columns:repeat(var(--wux-n),1fr);gap:20px;margin:0 0 1.3em;padding:0;list-style:none;counter-reset:none}
.wux-step{position:relative;margin:0!important;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px}
.wux-step-n{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:54px;height:54px;margin-bottom:8px;border-radius:50%;background:var(--wux-c);color:#fff;font-size:20px;font-weight:800;box-shadow:0 0 0 6px color-mix(in srgb,var(--wux-c) 18%,#fff)}
.wux-step:not(:last-child):after{content:"";position:absolute;top:27px;left:calc(50% + 34px);right:calc(-50% + 14px);height:3px;border-radius:3px;background:linear-gradient(90deg,var(--wux-c) 50%,color-mix(in srgb,var(--wux-c) 22%,#fff) 50%) 100% 0/200% 100%;transition:background-position .7s var(--wux-ease);transition-delay:calc(var(--wux-i) * 220ms + 250ms)}
.wux-step b{font-size:1.08em}
.wux-step span{font-size:.92em;opacity:.75;line-height:1.4;max-width:240px}
@media (max-width:549px){
	.wux-steps{grid-template-columns:1fr;gap:18px}
	.wux-step{align-items:flex-start;text-align:left;padding-left:70px;min-height:54px;justify-content:center}
	.wux-step-n{position:absolute;left:0;top:0;margin:0}
	.wux-step:not(:last-child):after{top:60px;bottom:-16px;left:26px;right:auto;width:3px;height:auto;background:linear-gradient(180deg,var(--wux-c) 50%,color-mix(in srgb,var(--wux-c) 22%,#fff) 50%) 0 100%/100% 200%}
}
.wux-js .wux-steps .wux-step{opacity:0;transform:translateY(24px);transition:opacity .6s,transform .7s var(--wux-ease);transition-delay:calc(var(--wux-i) * 220ms)}
.wux-steps.wux-in .wux-step{opacity:1;transform:none}
.wux-steps.wux-in .wux-step:after{background-position:0 0}
/* Bảng giá theo số lượng */
.wux-tiers{--wux-c:var(--primary-color,#446084);display:grid;grid-template-columns:repeat(var(--wux-n),minmax(0,1fr));gap:18px;margin-bottom:1.3em;padding-top:14px}
.wux-tier{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:26px 16px 20px;border:1px solid rgba(0,0,0,.1);border-radius:14px;background:#fff;text-align:center;transition:transform .35s var(--wux-ease),box-shadow .35s}
.wux-tier:hover{transform:translateY(-4px);box-shadow:0 16px 34px -18px rgba(0,0,0,.35)}
.wux-tier-best{border:2px solid var(--wux-c);box-shadow:0 18px 40px -20px color-mix(in srgb,var(--wux-c) 70%,transparent);transform:scale(1.04)}
.wux-tier-best:hover{transform:scale(1.04) translateY(-4px)}
.wux-tier-bd{position:absolute;top:-13px;left:50%;transform:translateX(-50%);padding:4px 14px;border-radius:99px;background:var(--wux-c);color:#fff;font-size:12px;font-weight:700;white-space:nowrap}
.wux-tier-q{font-size:1.05em;font-weight:600;opacity:.8}
.wux-tier-p{font-size:1.6em;font-weight:800;color:var(--wux-c);line-height:1.15}
.wux-tier-d{font-size:.9em;opacity:.7;line-height:1.4;flex:1}
.wux-tier-b{margin:10px 0 0!important}
.wux-tier-best .wux-tier-b{background-color:var(--wux-c);border-color:var(--wux-c)}
@media (max-width:849px){.wux-tiers{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:399px){.wux-tiers{grid-template-columns:1fr}.wux-tier-best{transform:none}.wux-tier-best:hover{transform:translateY(-4px)}}
.wux-js .wux-tiers .wux-tier{opacity:0;translate:0 26px;transition:opacity .6s,translate .7s var(--wux-ease),transform .35s var(--wux-ease),box-shadow .35s;transition-delay:calc(var(--wux-i) * 120ms),calc(var(--wux-i) * 120ms),0s,0s}
.wux-tiers.wux-in .wux-tier{opacity:1;translate:none}
/* Thanh tiến trình */
.wux-prog{--wux-c:var(--primary-color,#446084);margin-bottom:1.3em}
.wux-pg+.wux-pg{margin-top:16px}
.wux-pg-t{display:flex;justify-content:space-between;gap:10px;margin-bottom:7px;font-weight:600}
.wux-pg-t b{color:var(--wux-c);font-variant-numeric:tabular-nums}
.wux-pg-bar{height:var(--wux-h,10px);border-radius:99px;background:color-mix(in srgb,var(--wux-c) 14%,#eee);overflow:hidden}
.wux-pg-bar i{display:block;height:100%;width:var(--v);border-radius:inherit;background:linear-gradient(90deg,color-mix(in srgb,var(--wux-c) 75%,#fff),var(--wux-c))}
.wux-js .wux-prog .wux-pg-bar i{width:0;transition:width 1.8s var(--wux-ease)}
.wux-prog.wux-in .wux-pg-bar i{width:var(--v)}
/* Thông báo vừa mua */
.wux-ntf{display:flex;align-items:center;gap:12px;max-width:min(340px,calc(100vw - 104px));padding:10px 34px 10px 10px;border-radius:12px;background:#fff;color:#222;box-shadow:0 14px 40px -10px rgba(0,0,0,.35);font-size:14px;line-height:1.4}
.wux-ntf[hidden]{display:none}
body>.wux-ntf{position:fixed;z-index:997;bottom:22px;animation:wuxNtf .5s var(--wux-ease) both}
body>.wux-ntf.wux-ntf-out{animation:wuxNtfOut .4s ease both}
.wux-ntf-left{left:16px}.wux-ntf-right{right:16px}
.wux-ntf img,.wux-ntf-dot{flex:none;width:46px;height:46px;border-radius:9px;object-fit:cover}
.wux-ntf-dot{display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--primary-color,#446084) 12%,#fff);font-size:22px}
.wux-ntf-x{position:absolute;top:4px;right:4px;width:26px;height:26px;min-height:0;margin:0;padding:0;border:0;background:none;color:#999;font-size:18px;line-height:1;cursor:pointer}
.wux-ntf-pv{position:relative;flex-wrap:wrap}
.wux-ntf-pv small{flex-basis:100%;padding:6px;border-width:1px}
@keyframes wuxNtf{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
@keyframes wuxNtfOut{to{opacity:0;transform:translateY(20px)}}
@media (prefers-reduced-motion:reduce){
	.wux-fb-tel,.wux-type:after,body>.wux-ntf{animation:none!important}
	.wux-js .wux-steps .wux-step,.wux-js .wux-tiers .wux-tier{opacity:1!important;transform:none;translate:none!important;transition:none!important}
	.wux-js .wux-prog .wux-pg-bar i{width:var(--v)!important;transition:none!important}
	.wux-step:after{background-position:0 0!important;transition:none!important}
}

/* ================= 0.5.0: hiệu ứng toàn site ================= */
.wux-readbar{position:fixed;z-index:100001;top:0;left:0;width:100%;height:4px;background:color-mix(in srgb,var(--primary-color,#446084) 12%,transparent);pointer-events:none}
.wux-readbar i{display:block;width:var(--wux-read,0%);height:100%;background:var(--primary-color,#446084);box-shadow:0 0 9px color-mix(in srgb,var(--primary-color,#446084) 65%,transparent);transition:width .08s linear}
.wux-backtop{display:flex!important;align-items:center;justify-content:center;width:46px!important;height:46px!important;border:0!important;border-radius:50%!important;background:conic-gradient(var(--primary-color,#446084) var(--wux-p,0%),rgba(120,120,120,.22) 0)!important;color:var(--primary-color,#446084)!important;box-shadow:0 7px 22px -8px rgba(0,0,0,.5)}
.wux-backtop:before{content:"";position:absolute;inset:4px;border-radius:inherit;background:#fff}
.wux-backtop i{display:none!important}.wux-backtop span{position:relative;z-index:1;font-size:11px;font-weight:700;font-variant-numeric:tabular-nums}
.wux-backtop-own{position:fixed;z-index:999;right:18px;bottom:18px;padding:0;cursor:pointer;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .25s,transform .25s,visibility .25s}.wux-backtop-own.wux-show{opacity:1;visibility:visible;transform:none}
@media (max-width:849px){.wux-backtop-own{right:14px;bottom:86px;width:40px!important;height:40px!important}.wux-backtop span{font-size:10px}}
.wux-pagefade #main{animation:wuxPageIn .38s ease both}.wux-pagefade.wux-leave #main{opacity:0;transform:translateY(5px);transition:opacity .18s,transform .18s}
@keyframes wuxPageIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.wux-promo{position:sticky;z-index:1000;top:0;display:flex;align-items:center;min-height:38px;padding:5px 42px 5px 12px;overflow:hidden;background:var(--primary-color,#446084);color:#fff;text-align:center}
.wux-promo-run{display:flex;align-items:center;justify-content:center;gap:14px;width:100%;white-space:nowrap;overflow:hidden}.wux-promo a,.wux-promo a:hover{color:inherit;font-weight:700}
.wux-promo-txt{flex:0 1 auto;min-width:0;overflow:hidden}.wux-promo-txt em{display:inline-block;font-style:normal;padding-left:100%;animation:wuxPromoRun 16s linear infinite}.wux-promo:hover .wux-promo-txt em{animation-play-state:paused}.wux-promo-time{flex:none}
@media (min-width:850px){.wux-promo-txt em{padding-left:0;animation:none}}
.wux-promo-time{padding:2px 8px;border-radius:5px;background:rgba(0,0,0,.2);font-size:12px;font-variant-numeric:tabular-nums}
.wux-promo>button{position:absolute;right:8px;top:50%;width:28px;min-height:28px;margin:0;padding:0;transform:translateY(-50%);border:0;background:none;color:inherit;font-size:21px;line-height:1;cursor:pointer}
@keyframes wuxPromoRun{to{transform:translateX(-100%)}}
.wux-htrans #header{position:absolute;z-index:999;width:100%;background:transparent}.wux-htrans .header-wrapper:not(.stuck) .header-bg-color{opacity:0!important}
.wux-htrans .header-wrapper:not(.stuck) .nav>li>a,.wux-htrans .header-wrapper:not(.stuck) .header-button a,.wux-htrans .header-wrapper:not(.stuck) .icon-menu{color:#fff}.wux-htrans .header-wrapper.stuck .header-bg-color{opacity:1!important;background:#fff!important}.wux-htrans .header-wrapper.stuck{box-shadow:0 7px 24px -14px rgba(0,0,0,.4)}
.wux-img-pending{opacity:0!important}.wux-img-ready{opacity:1!important;transition:opacity .55s ease!important}
.wux-auto{opacity:0;transform:translateY(22px);transition:opacity .65s ease,transform .75s var(--wux-ease)}.wux-auto.wux-in{opacity:1;transform:none}
.wux-cart-ghost{position:fixed;z-index:100002;object-fit:cover;border-radius:10px;pointer-events:none;transition:transform .7s var(--wux-ease),opacity .7s,width .7s,height .7s}
.wux-ui-color{scrollbar-color:var(--primary-color,#446084) rgba(120,120,120,.12)}.wux-ui-color::-webkit-scrollbar{width:10px;height:10px}.wux-ui-color::-webkit-scrollbar-track{background:rgba(120,120,120,.12)}.wux-ui-color::-webkit-scrollbar-thumb{border:2px solid transparent;border-radius:99px;background:var(--primary-color,#446084);background-clip:padding-box}.wux-ui-color ::selection{background:var(--primary-color,#446084);color:#fff}
@media (min-width:850px){.wux-sticky-cart .sticky-add-to-cart-wrapper{display:none!important}}
@media (max-width:849px){.wux-sticky-cart .sticky-add-to-cart{padding-bottom:max(8px,env(safe-area-inset-bottom))}}
@media (prefers-reduced-motion:reduce){.wux-pagefade #main,.wux-promo-txt em,.wux-auto{animation:none!important;transition:none!important;transform:none!important;opacity:1!important}.wux-img-pending{opacity:1!important}.wux-cart-ghost{display:none!important}}

/* ===== 0.6.0 Thẻ bán hàng (ô Products → ★ Kiểu thẻ sản phẩm) ===== */
.wux-card-shop{--wux-c1:var(--primary-color,#1d1d1b);--wux-red:#d0021b}
.wux-card-shop>.col{padding-bottom:20px}
.wux-card-shop>.col>.col-inner{display:flex;flex-direction:column;height:100%;background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.06),0 6px 18px rgba(0,0,0,.06)}
.wux-card-shop .product-small.box{flex:1 1 auto;display:flex;flex-direction:column;margin:0;padding:0;border:0;background:none;box-shadow:none}
/* ảnh vuông đáy, liền phần chữ; góc trên do thẻ bo (overflow:hidden). Kit giao diện site hay bo .product-small .box-image → ép */
.wux-card-shop .product-small .box-image{border-radius:0!important;overflow:hidden;outline:0!important}
/* Safari/iOS: .product-small là flex + .box-image có aspect-ratio → WebKit tính rộng 0, ảnh lazy không bao giờ tải. Ép rộng 100%. */
.wux-card-shop .product-small .box-image{width:100%!important}
.wux-card-shop .product-small .box-image img{width:100%!important;height:auto!important}
.wux-card-shop .product-small .box-image img,.wux-card-shop .product-small .box-image .image-fade_in_back,.wux-card-shop .product-small .box-image .image-fade_in_back>a{border-radius:0!important}
.wux-card-shop .product-small .box-image a.wux-cart{border-radius:50%!important}
.wux-card-shop .box-text{flex:1 1 auto;padding:14px 14px 16px!important;text-align:left!important}
.wux-card-shop .title-wrapper{margin:0}
.wux-card-shop .product-title{margin:0 0 6px;font-size:16px;font-weight:600;line-height:1.45;color:#1b1b1b}
.wux-card-shop .product-title a{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;min-height:2.9em;color:inherit;font-weight:inherit}
.wux-card-shop .price-wrapper{margin:0}
.wux-card-shop .price{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 8px;margin:0;line-height:1.35}
.wux-card-shop .price ins{order:1;text-decoration:none}
.wux-card-shop .price del{order:2;opacity:1}
.wux-card-shop .price>.amount,.wux-card-shop .price ins .amount{color:var(--wux-red);font-size:17px;font-weight:700}
.wux-card-shop .price del .amount{color:#9a9a9a;font-size:14px;font-weight:400}
/* badge giảm giá: chữ nhật màu chính, góc trên trái */
.wux-card-shop .col-inner>.badge-container{top:14px!important;left:14px!important;right:auto;margin:0!important;z-index:3}
.wux-card-shop .badge{width:auto!important;height:auto!important;min-width:0;margin:0}
.wux-card-shop .badge-inner{padding:5px 10px;border-radius:3px!important;background:var(--wux-c1)!important;color:#fff;font-size:13px;font-weight:700;letter-spacing:.04em;line-height:1.2}
/* nút giỏ tròn góc dưới phải ảnh (luôn hiện, cả mobile) */
.wux-card-shop .image-tools.top.right{top:auto!important;bottom:12px;right:12px;left:auto;padding:0;opacity:1!important;visibility:visible!important;transform:none!important;pointer-events:auto!important;z-index:5}
.wux-card-shop .image-tools.top.right>*:not(.wux-cart),.wux-card-shop .box-image .image-tools:not(.top),.wux-card-shop .box-excerpt,.wux-card-shop .fake-sold,.wux-card-shop .bp-sold:not(.wux-sold),.wux-card-shop .bp-spec{display:none!important}
.wux-card-shop .wux-cart{pointer-events:auto!important;position:relative;z-index:5;display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;background:var(--wux-c1);color:#fff;box-shadow:0 4px 12px rgba(0,0,0,.18);transition:transform .2s,box-shadow .2s}
.wux-card-shop .wux-cart svg{width:22px;height:22px}
.wux-card-shop .wux-cart:hover{transform:scale(1.08);color:#fff;box-shadow:0 6px 16px rgba(0,0,0,.25)}
.wux-card-shop .wux-cart.loading{opacity:.6}
.wux-card-shop .wux-cart.added{background:#2e7d32}
.wux-card-shop .added_to_cart,.wux-card-shop .box-image .add-to-cart-grid,.wux-card-shop .box-image .cart-icon,.wux-card-shop .box-image .wishlist-icon{display:none!important}
/* thanh đã bán */
.wux-card-shop .wux-sold{position:relative;display:flex;align-items:center;justify-content:center;height:26px;margin:10px 0 0 12px;border-radius:13px;background:#c62828;overflow:visible}
.wux-card-shop .wux-sold__fill{position:absolute;top:0;bottom:0;left:0;border-radius:13px;background:linear-gradient(90deg,#f5a623,#e8590c)}
.wux-card-shop .wux-sold__ic{position:absolute;top:50%;left:-12px;z-index:2;width:26px;height:30px;transform:translateY(-60%)}
.wux-card-shop .wux-sold__ic svg{display:block;width:100%;height:100%}
.wux-card-shop .wux-sold__tx{position:relative;z-index:1;color:#fff;font-size:12.5px;font-weight:600;line-height:1;white-space:nowrap}
/* thông số ngắn */
.wux-card-shop .wux-spec{margin:12px 0 0;padding:10px 0 0;border-top:1px solid #ececec;list-style:none;font-size:13px;line-height:1.65;color:#555;text-align:left}
.wux-card-shop .wux-spec li{position:relative;margin:0;padding:0 0 0 13px;list-style:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wux-card-shop .wux-spec li::before{content:"";position:absolute;top:.66em;left:1px;width:5px;height:5px;background:var(--wux-c1)}
.wux-card-shop .wux-spec i{font-style:italic}
@media (max-width:549px){
.wux-card-shop{margin-left:-5px!important;margin-right:-5px!important}
.wux-card-shop>.col{padding:0 5px 10px!important}
.wux-card-shop .box-text{padding:10px 10px 12px!important}
.wux-card-shop .product-title{font-size:14.5px}
.wux-card-shop .price>.amount,.wux-card-shop .price ins .amount{font-size:15px}
.wux-card-shop .price del .amount{font-size:12.5px}
.wux-card-shop .wux-cart{width:38px;height:38px}
.wux-card-shop .wux-cart svg{width:19px;height:19px}
.wux-card-shop .image-tools.top.right{bottom:8px;right:8px}
.wux-card-shop .col-inner>.badge-container{top:10px!important;left:10px!important}
.wux-card-shop .badge-inner{padding:4px 8px;font-size:12px}
.wux-card-shop .wux-sold{height:24px;margin-left:11px}
.wux-card-shop .wux-sold__tx{font-size:11.5px}
.wux-card-shop .wux-spec{font-size:12px}
}

/* ---------- 0.7.0 NHỊP NHẸ (anh Tiến: hiệu ứng hơi nhiều, không nên nhanh) — quãng ngắn hơn, chậm hơn ---------- */
[data-animate=wuxBlurUp]{transform:translate3d(0,24px,0);filter:blur(4px)}
[data-animate=wuxSlideLeft]{transform:translate3d(-48px,0,0)}
[data-animate=wuxSlideRight]{transform:translate3d(48px,0,0)}
[data-animate=wuxZoomIn]{transform:scale(.95)}
[data-animate=wuxZoomOut]{transform:scale(1.05)}
[data-animate^=wux][data-animated=true]{transition:transform 1.4s var(--wux-ease),opacity 1.1s ease-out,filter 1.2s var(--wux-ease)!important}
[data-animate=wuxRevealUp][data-animated=true],[data-animate=wuxRevealLeft][data-animated=true],[data-animate=wuxRevealZoom][data-animated=true]{animation-duration:1.8s}
.wux-st{transition:opacity 1.1s ease,transform 1.3s var(--wux-ease),filter 1.2s var(--wux-ease);transition-delay:calc(var(--wux-i,0) * 140ms)}
.wux-st-up .wux-st{transform:translateY(24px)}
.wux-st-blur .wux-st{transform:translateY(16px);filter:blur(4px)}
.wux-st-zoom .wux-st{transform:scale(.95)}
.wux-st-left .wux-st{transform:translateX(-24px)}
.wux-in .wux-st{transform:none;filter:none} /* 0.7.1: trả về vị trí gốc — 0.7.0 bị đè làm thẻ lệch 24px mãi (anh Tiến: đánh giá vuốt dọc) */
[class*=col-hover-wux-] .col-inner,.wux-hov-card .wux-hov-t{transition:transform .7s var(--wux-ease),box-shadow .7s}
.col-hover-wux-lift:hover .col-inner,.col-hover-wux-lift.wux-hov-card:hover .wux-hov-t{transform:translateY(-4px);box-shadow:0 16px 32px -14px rgba(0,0,0,.18)}
[class*=image-wux-] img{transition:transform 1.2s var(--wux-ease),filter .8s}
.image-wux-zoom-soft:hover img,.has-hover:hover .image-wux-zoom-soft img{transform:scale(1.04)}
.wux-badge-shine .badge-inner:after{animation-duration:6s}
.wux-badge-pop .badge{animation:wuxPopSoft 4s ease-in-out infinite}
@keyframes wuxPopSoft{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
.wux-badge-shake .badge{animation-duration:6s}