/* Sửa tràn ngang trên mobile (lưới trang sản phẩm) */
.prod-detail-layout>*,.hp-hero-grid>*{min-width:0}
html,body{overflow-x:clip}
/* TMR FX – lớp hiệu ứng giao diện (có thể gỡ bằng cách bỏ enqueue trong functions.php) */
:root{--fx-o:#E8792C;--fx-o2:#F2924A;--fx-cy:#4FD1FF;--fx-glass:rgba(15,17,20,.62)}
.tmr-progress{position:fixed;top:0;left:0;height:2px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--fx-o),var(--fx-o2),var(--fx-cy));box-shadow:0 0 12px rgba(232,121,44,.7);z-index:100000;pointer-events:none}
.tmr-header{backdrop-filter:saturate(160%) blur(14px);-webkit-backdrop-filter:saturate(160%) blur(14px);background:var(--fx-glass)!important;transition:box-shadow .35s,background .35s}
.tmr-header::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,var(--fx-o) 30%,var(--fx-cy) 50%,var(--fx-o) 70%,transparent);background-size:200% 100%;animation:fxLine 6s linear infinite;opacity:.55;pointer-events:none}
html.tmr-scrolled .tmr-header{box-shadow:0 8px 30px rgba(0,0,0,.45);background:rgba(15,17,20,.82)!important}
@keyframes fxLine{to{background-position:-200% 0}}
.hp-hero{position:relative;overflow:hidden;isolation:isolate}
.hp-hero .fx-grid{position:absolute;inset:auto -20% -2px -20%;height:55%;z-index:1;pointer-events:none;background-image:linear-gradient(rgba(232,121,44,.22) 1px,transparent 1px),linear-gradient(90deg,rgba(232,121,44,.22) 1px,transparent 1px);background-size:56px 56px;transform:perspective(520px) rotateX(62deg);transform-origin:50% 100%;-webkit-mask-image:linear-gradient(to top,#000 10%,transparent 85%);mask-image:linear-gradient(to top,#000 10%,transparent 85%);animation:fxGrid 3.2s linear infinite}
@keyframes fxGrid{to{background-position:0 56px,0 0}}
.hp-hero .fx-orb{position:absolute;border-radius:50%;filter:blur(70px);opacity:.35;z-index:1;pointer-events:none;animation:fxOrb 14s ease-in-out infinite alternate}
.hp-hero .fx-orb.a{width:420px;height:420px;background:var(--fx-o);top:-120px;right:-80px}
.hp-hero .fx-orb.b{width:320px;height:320px;background:#1d6b8c;bottom:-140px;left:-100px;animation-delay:-6s;opacity:.25}
@keyframes fxOrb{to{transform:translate3d(-40px,30px,0) scale(1.15)}}
.hp-hero canvas.fx-sparks{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.hp-hero > .wrap{position:relative;z-index:2}
.hp-hero h1 span{background:linear-gradient(100deg,var(--fx-o) 20%,#ffd2a8 45%,var(--fx-o2) 60%,var(--fx-o) 80%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:fxShine 5s linear infinite}
@keyframes fxShine{to{background-position:-250% 0}}
.hp-hero .hp-eyebrow{position:relative}
.hp-hero-card{position:relative;transform-style:preserve-3d;transition:transform .25s ease,box-shadow .3s}
.hp-hero-card::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;background:conic-gradient(from var(--fx-a,0deg),transparent 0 60%,var(--fx-o) 75%,var(--fx-cy) 85%,transparent 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:fxSpin 5s linear infinite}
@property --fx-a{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes fxSpin{to{--fx-a:360deg}}
.hp-prod-card,.hp-tool-card,.hp-news-card,.hp-promise-card{position:relative;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,border-color .35s;will-change:transform}
.hp-prod-card::after,.hp-tool-card::after,.hp-news-card::after,.hp-promise-card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s;background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(232,121,44,.16),transparent 45%)}
.hp-prod-card:hover,.hp-tool-card:hover,.hp-news-card:hover,.hp-promise-card:hover{transform:translateY(-6px);border-color:rgba(232,121,44,.55)!important;box-shadow:0 18px 40px rgba(0,0,0,.45),0 0 0 1px rgba(232,121,44,.25),0 0 28px rgba(232,121,44,.15)}
.hp-prod-card:hover::after,.hp-tool-card:hover::after,.hp-news-card:hover::after,.hp-promise-card:hover::after{opacity:1}
.hp-prod-media,.hp-news-card-img,.hp-news-hero-img{overflow:hidden}
.hp-prod-media img,.hp-news-card-img img,.hp-news-hero-img img{transition:transform .7s cubic-bezier(.2,.8,.2,1),filter .7s}
.hp-prod-card:hover .hp-prod-media img,.hp-news-card:hover .hp-news-card-img img{transform:scale(1.06);filter:saturate(1.1) contrast(1.05)}
.hp-prod-badge{box-shadow:0 0 14px rgba(232,121,44,.45)}
.hp-promise-num{text-shadow:0 0 18px rgba(232,121,44,.55)}
.tmr-btn-orange,.tmr-btn-ghost{position:relative;overflow:hidden;transition:transform .2s,box-shadow .3s}
.tmr-btn-orange::after,.tmr-btn-ghost::after{content:"";position:absolute;top:0;left:-130%;width:60%;height:100%;transform:skewX(-20deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);transition:left .7s;pointer-events:none}
.tmr-btn-orange:hover::after,.tmr-btn-ghost:hover::after{left:140%}
.tmr-btn-orange{box-shadow:0 0 0 0 rgba(232,121,44,.6);animation:fxPulse 2.8s ease-out infinite}
.tmr-btn-orange:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(232,121,44,.45)}
@keyframes fxPulse{0%{box-shadow:0 0 0 0 rgba(232,121,44,.5)}70%{box-shadow:0 0 0 14px rgba(232,121,44,0)}100%{box-shadow:0 0 0 0 rgba(232,121,44,0)}}
.tmr-section-eyebrow{position:relative}
.tmr-section-eyebrow::after{content:"";display:inline-block;width:46px;height:1px;margin-left:10px;vertical-align:middle;background:linear-gradient(90deg,var(--fx-o),transparent);animation:fxGrow 2.4s ease-in-out infinite alternate}
@keyframes fxGrow{from{width:18px}to{width:56px}}
.tmr-cta-band{position:relative;overflow:hidden}
.tmr-cta-band::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 30%,rgba(232,121,44,.10) 50%,transparent 70%);background-size:250% 100%;animation:fxShine 7s linear infinite}
.tmr-float a{transition:transform .25s}
.tmr-float a:hover{transform:scale(1.08)}
html.tmr-fx [data-fx]{opacity:0;transform:translate3d(0,28px,0);transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1);transition-delay:var(--fx-d,0s)}
html.tmr-fx [data-fx].fx-in{opacity:1;transform:none}
@media (max-width:768px){
 .hp-hero .fx-grid{background-size:40px 40px;height:45%}
 .hp-hero .fx-orb.a{width:260px;height:260px}
 .hp-prod-card:hover,.hp-tool-card:hover,.hp-news-card:hover,.hp-promise-card:hover{transform:none}
 html.tmr-fx [data-fx]{transform:translate3d(0,18px,0)}
}
@media (prefers-reduced-motion:reduce){
 .tmr-header::after,.hp-hero .fx-grid,.hp-hero .fx-orb,.hp-hero h1 span,.hp-hero-card::before,.tmr-btn-orange,.tmr-section-eyebrow::after,.tmr-cta-band::before{animation:none!important}
 html.tmr-fx [data-fx]{opacity:1!important;transform:none!important}
 .hp-hero canvas.fx-sparks{display:none}
}

/* Vòng xoay sản phẩm – thẻ Bán chạy nhất */
.hp-hero-card.fx-has-ring{overflow:hidden}
.fx-ring-layer{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;border-radius:inherit;background:radial-gradient(120% 70% at 50% 45%,rgba(232,121,44,.16),transparent 65%),#0d0f12;opacity:0;visibility:hidden;transition:opacity .35s ease,visibility .35s;pointer-events:none}
.hp-hero-card.fx-ring-on .fx-ring-layer{opacity:1;visibility:visible;pointer-events:auto}
.hp-hero-card.fx-ring-on>:not(.fx-ring-layer){visibility:hidden}
.fx-ring-head{padding:20px 22px 0;font:500 .68rem/1.4 'IBM Plex Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--fx-o,#E8792C);display:flex;align-items:center;gap:8px}
.fx-ring-dot{width:6px;height:6px;border-radius:50%;background:var(--fx-o,#E8792C);box-shadow:0 0 10px var(--fx-o,#E8792C);animation:fxPulse 2s infinite}
.fx-ring-stage{flex:1;position:relative;perspective:1100px;perspective-origin:50% 40%;display:flex;align-items:center;justify-content:center;min-height:260px}
.fx-ring{position:relative;width:176px;height:236px;transform-style:preserve-3d;will-change:transform}
.fx-ring-item{position:absolute;inset:0;display:flex;flex-direction:column;gap:8px;text-decoration:none;transform:rotateY(var(--ry)) translateZ(var(--rz));backface-visibility:hidden;-webkit-backface-visibility:hidden;transition:filter .3s,opacity .3s;opacity:.55;filter:grayscale(.4) brightness(.75)}
.fx-ri-img{display:block;aspect-ratio:1/1;border-radius:10px;overflow:hidden;background:#fff;border:1px solid rgba(255,255,255,.12);box-shadow:0 10px 30px rgba(0,0,0,.5)}
.fx-ri-img img{width:100%;height:100%;object-fit:cover;display:block}
.fx-ri-name{font:600 .74rem/1.3 'Inter',sans-serif;color:#E8EAED;text-align:center;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fx-ring-item.is-front{opacity:1;filter:none}
.fx-ring-item.is-front .fx-ri-img{border-color:var(--fx-o,#E8792C);box-shadow:0 0 0 1px var(--fx-o,#E8792C),0 0 28px rgba(232,121,44,.55),0 14px 34px rgba(0,0,0,.55)}
.fx-ring-info{padding:0 22px 22px;display:grid;grid-template-columns:1fr auto;align-items:end;gap:6px 12px}
.fx-ring-name{grid-column:1/-1;font:700 1.05rem/1.3 'Inter',sans-serif;color:#fff;min-height:2.6em}
.fx-ring-price{font:700 1.15rem 'IBM Plex Mono',monospace;color:var(--fx-o,#E8792C)}
.fx-ring-go{padding:10px 16px!important;font-size:.8rem!important;white-space:nowrap}
.fx-ring-nav{position:absolute;top:46%;width:38px;height:38px;border-radius:50%;border:1px solid rgba(232,121,44,.5);background:rgba(15,17,20,.75);color:#fff;font-size:22px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s,transform .2s}
.fx-ring-nav:hover{background:var(--fx-o,#E8792C);transform:scale(1.08)}
.fx-ring-nav.prev{left:10px}.fx-ring-nav.next{right:10px}
.hp-hero-card.fx-has-ring{cursor:ew-resize}
.hp-hero-card.fx-ring-on{transform:none!important}

.hp-hero-card.fx-swap>a img,.hp-hero-card.fx-swap>a h3,.hp-hero-card.fx-swap .hp-hero-specs,.hp-hero-card.fx-swap .hp-hero-price{animation:fxSwap .45s ease}
@keyframes fxSwap{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
