/* Trang chủ Shop AV – landing page có hiệu ứng chuyển động. Scope: .is-home (cùng hệ thiết kế navy – gold). */

.shopav-full.is-home{padding:0;background:#f2f6fc;scroll-behavior:smooth}
.is-home [id^="hm-"]{scroll-margin-top:84px}
.is-home .shopav{width:100%;max-width:90%}

/* ---------- Hero ---------- */
.hm-hero{position:relative;overflow:hidden;min-height:min(88vh,800px);display:flex;align-items:center;padding:56px 0 130px;color:#fff;
	background:radial-gradient(900px 500px at 82% 20%,rgba(246,214,116,.28),transparent 70%),radial-gradient(800px 520px at 0 100%,rgba(31,111,209,.6),transparent 70%),linear-gradient(135deg,#061a45,#0b2a6b 55%,#16409a);background-size:140% 140%;animation:hmBg 18s ease-in-out infinite alternate}
.hm-hero-in{position:relative;z-index:2;display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.hm-blob{position:absolute;z-index:1;border-radius:50%;filter:blur(8px);translate:0 var(--py,0px);will-change:translate;pointer-events:none}
.hm-blob.b1{width:380px;height:380px;left:-90px;top:-80px;background:radial-gradient(circle,rgba(246,214,116,.35),transparent 70%);animation:hmDrift 14s ease-in-out infinite alternate}
.hm-blob.b2{width:460px;height:460px;right:-120px;bottom:-140px;background:radial-gradient(circle,rgba(31,111,209,.55),transparent 70%);animation:hmDrift 18s ease-in-out infinite alternate-reverse}
.hm-blob.b3{width:220px;height:220px;left:46%;top:58%;background:radial-gradient(circle,rgba(200,16,46,.28),transparent 70%);animation:hmDrift 11s ease-in-out infinite alternate}
.hm-pill{display:inline-flex;align-items:center;gap:10px;margin-bottom:18px;padding:7px 16px;border-radius:99px;background:rgba(255,255,255,.12);border:1px solid rgba(246,214,116,.5);color:var(--sv-gold2);font-size:13px;font-weight:800;letter-spacing:.8px;text-transform:uppercase}
.hm-pill i{width:9px;height:9px;border-radius:50%;background:var(--sv-gold2);box-shadow:0 0 0 0 rgba(246,214,116,.7);animation:hmPing 2s infinite}
.shopav .hm-h1{position:relative;margin:0 0 18px;padding-bottom:20px;color:#fff;font-size:clamp(32px,5.2vw,64px);font-weight:900;line-height:1.08;text-transform:uppercase}
.shopav .hm-h1::after{content:"";position:absolute;left:0;bottom:0;height:5px;width:120px;border-radius:5px;background:var(--sv-gradg);transform-origin:left;animation:hmGrow 1.2s .9s both cubic-bezier(.2,.7,.2,1)}
.shopav .hm-lead{max-width:560px;margin:0 0 26px;color:#dbe7ff;font-size:clamp(16px,1.6vw,20px)}
.hm-cta{display:flex;flex-wrap:wrap;gap:12px}
.shopav .sv-btn.hm-ghost{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.7);box-shadow:none}
.shopav .sv-btn.hm-ghost:hover{background:rgba(255,255,255,.12);color:var(--sv-gold2)}
.shopav .hm-trust{display:flex;flex-wrap:wrap;gap:10px 22px;margin:30px 0 0;padding:0;list-style:none}
.shopav .hm-trust li{display:flex;align-items:center;gap:8px;margin:0;padding:0;list-style:none;color:#cfe0ff;font-size:14px;font-weight:600}
.hm-trust .ic{color:var(--sv-gold2)}

/* Vào trang (hero) */
.hm-in{opacity:0;animation:hmIn .9s var(--d,0ms) cubic-bezier(.2,.7,.2,1) forwards}
.hm-in.zoom{animation-name:hmZoom}

.hm-hero-art{position:relative;display:grid;place-items:center;min-height:440px}
.hm-orbit{position:absolute;inset:4%;border:2px dashed rgba(246,214,116,.45);border-radius:50%;animation:hmSpin 46s linear infinite}
.hm-orbit::before,.hm-orbit::after{content:"";position:absolute;width:16px;height:16px;border-radius:50%;background:var(--sv-gold2);box-shadow:0 0 18px var(--sv-gold2)}
.hm-orbit::before{top:-8px;left:50%}.hm-orbit::after{bottom:14%;right:-8px;background:#7fb4ff;box-shadow:0 0 18px #7fb4ff}
.hm-card-float{position:relative;z-index:2;width:min(340px,78%);padding:16px;border-radius:28px;background:#fff;color:var(--sv-ink);box-shadow:0 34px 70px rgba(0,0,0,.4);animation:hmFloat 6s ease-in-out infinite}
.hm-hero-prod{display:block;color:inherit}
.hm-hero-prod img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;margin:0;border-radius:18px}
.hm-hero-prod .n{display:block;margin-top:12px;font-size:17px;font-weight:800;line-height:1.3;color:var(--sv-navy)}
.hm-hero-prod .p{display:block;margin-top:2px;color:var(--sv-red);font-weight:800}
.hm-pulse{position:relative;display:grid;place-items:center;aspect-ratio:1/1;border-radius:18px;background:linear-gradient(135deg,#fff,#eaf2fc)}
.hm-pulse>svg:first-child{width:46%;fill:#c8102e;animation:hmBeat 1.4s ease-in-out infinite}
.hm-pulse .ekg{position:absolute;left:8%;right:8%;bottom:16%;width:84%;height:auto;fill:none;stroke:var(--sv-navy);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:240;stroke-dashoffset:240;animation:hmDash 2.6s linear infinite}
.hm-chip{position:absolute;z-index:3;display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:99px;background:rgba(255,255,255,.96);color:var(--sv-navy);font-size:13px;font-weight:800;box-shadow:0 12px 28px rgba(0,0,0,.28);white-space:nowrap}
.hm-chip .ic{color:var(--sv-gold)}
.hm-chip.c1{top:8%;left:0;animation:hmFloat 5s -1s ease-in-out infinite}
.hm-chip.c2{bottom:-3%;left:4%;animation:hmFloat 6.5s -2.5s ease-in-out infinite}
.hm-chip.c3{top:36%;right:-2%;animation:hmFloat 5.5s -.5s ease-in-out infinite}
.hm-scroll{position:absolute;left:50%;bottom:78px;z-index:3;width:28px;height:46px;margin-left:-14px;border:2px solid rgba(255,255,255,.6);border-radius:20px}
.hm-scroll span{position:absolute;left:50%;top:8px;width:4px;height:9px;margin-left:-2px;border-radius:3px;background:var(--sv-gold2);animation:hmWheel 1.8s infinite}

/* ---------- Thống kê ---------- */
.hm-stats{position:relative;z-index:4;margin-top:-76px!important;margin-bottom:0}
.hm-stat{display:flex;flex-direction:column;align-items:center;gap:4px;padding:24px 14px;text-align:center;background:#fff;border-radius:20px;border:1px solid var(--sv-line);border-bottom:4px solid var(--sv-gold);box-shadow:0 18px 40px rgba(11,42,107,.16)}
.hm-stat b{color:var(--sv-navy);font-size:clamp(30px,3.8vw,48px);font-weight:900;line-height:1.1;background:var(--sv-gradg);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hm-stat>span{color:var(--sv-mute);font-size:14px;font-weight:600}

/* ---------- Khối chung ---------- */
.hm-body .sv-section{margin:0 auto;padding:72px 0}
.hm-band{background:#fff}
.hm-band.alt{background:linear-gradient(180deg,#eaf2fc,#f7faff)}
.hm-band>.shopav{padding-top:72px;padding-bottom:72px}
.hm-features .sv-grid{gap:20px}
.hm-features .sv-feat{transition:transform .3s,box-shadow .3s}
.hm-features .sv-feat:hover{transform:translateY(-6px);box-shadow:0 18px 38px rgba(11,42,107,.16)}
.shopav .hm-all{margin:34px 0 0;text-align:center}

/* ---------- Sản phẩm ---------- */
.hm-pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.hm-pcard{position:relative;overflow:hidden;display:flex;flex-direction:column;background:#fff;border:1px solid var(--sv-line);border-radius:20px;box-shadow:var(--sv-shadow);transition:transform .35s,box-shadow .35s}
.hm-pcard:hover{transform:translateY(-8px);box-shadow:0 22px 46px rgba(11,42,107,.2)}
.hm-pimg{display:block;overflow:hidden;aspect-ratio:1/1;background:#f1f5fb}
.hm-pimg img{display:block;width:100%;height:100%;margin:0;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.hm-pcard:hover .hm-pimg img{transform:scale(1.08)}
.hm-tag{position:absolute;top:12px;padding:4px 12px;border-radius:99px;font-size:12px;font-weight:800;color:#fff;box-shadow:0 4px 10px rgba(0,0,0,.2)}
.hm-tag.sale{left:12px;background:var(--sv-red)}
.hm-tag.bv{right:12px;background:var(--sv-gradg);color:#2b1c00}
.hm-pbody{display:flex;flex-direction:column;flex:1;gap:8px;padding:16px}
.shopav .hm-pbody h3{margin:0;font-size:16px;line-height:1.35;min-height:2.7em;font-weight:800}
.shopav .hm-pbody h3 a{color:var(--sv-navy)}
.shopav .hm-pbody h3 a:hover{color:var(--sv-blue)}
.hm-price{color:var(--sv-red);font-size:18px;font-weight:900}
.hm-price del{margin-right:6px;color:var(--sv-mute);font-size:14px;font-weight:600;opacity:.8}
.hm-price ins{text-decoration:none}
.shopav .hm-add{margin-top:auto;width:100%;min-height:42px;padding:9px 16px;font-size:14px}
.shopav .hm-add.loading{opacity:.7}
.shopav .hm-add.added::after{content:" ✓"}
.hm-pcard .added_to_cart{display:none}

/* ---------- Quy trình ---------- */
.hm-steps{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:10px}
.hm-steps::before{content:"";position:absolute;left:16%;right:16%;top:46px;height:3px;background:repeating-linear-gradient(90deg,var(--sv-gold) 0 10px,transparent 10px 20px);opacity:.7}
.hm-step{position:relative;z-index:1;padding:26px 22px;text-align:center;background:#fff;border-radius:20px;border:1px solid var(--sv-line);box-shadow:var(--sv-shadow);transition:transform .3s}
.hm-step:hover{transform:translateY(-6px)}
.hm-step .sv-num{width:56px;height:56px;margin:-54px auto 12px;font-size:24px;animation:hmPop 2.4s ease-in-out infinite}
.shopav .hm-step h4{margin:0 0 6px;font-size:18px;color:var(--sv-navy)}
.shopav .hm-step p{margin:0;color:var(--sv-mute);font-size:14.5px}
.hm-band.alt .shopav.sv-section{padding-top:92px}

/* ---------- Tin tức ---------- */
.hm-ngrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.hm-ncard{display:flex;flex-direction:column;overflow:hidden;background:#fff;border:1px solid var(--sv-line);border-radius:20px;box-shadow:var(--sv-shadow);transition:transform .35s,box-shadow .35s}
.hm-ncard:hover{transform:translateY(-6px);box-shadow:0 20px 44px rgba(11,42,107,.18)}
.hm-ncard.big{grid-column:span 2;grid-row:span 2}
.hm-nimg{position:relative;display:block;overflow:hidden;aspect-ratio:16/10;background:linear-gradient(135deg,#0b2a6b,#16409a)}
.hm-ncard.big .hm-nimg{flex:1;aspect-ratio:auto;min-height:280px}
.hm-nimg img{position:absolute;inset:0;width:100%;height:100%;margin:0;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.hm-ncard:hover .hm-nimg img{transform:scale(1.07)}
.hm-nph{position:absolute;inset:0;display:grid;place-items:center;color:rgba(246,214,116,.75)}
.hm-nph .ic{width:56px;height:56px}
.hm-nbody{display:flex;flex-direction:column;gap:8px;padding:18px 20px 20px}
.hm-nmeta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:12.5px;color:var(--sv-mute)}
.hm-nmeta b{padding:2px 10px;border-radius:99px;background:var(--sv-sky);color:var(--sv-navy);font-weight:800}
.shopav .hm-nbody h3{margin:0;font-size:18px;line-height:1.35;font-weight:800}
.shopav .hm-ncard.big .hm-nbody h3{font-size:clamp(20px,2.2vw,26px)}
.shopav .hm-nbody h3 a{color:var(--sv-navy)}
.shopav .hm-nbody h3 a:hover{color:var(--sv-blue)}
.shopav .hm-nbody p{margin:0;color:var(--sv-mute);font-size:14.5px}
.shopav .hm-more{display:inline-flex;align-items:center;gap:6px;margin-top:auto;font-weight:800;color:var(--sv-blue)}
.shopav .hm-more .ic{transition:transform .25s}
.shopav .hm-more:hover .ic{transform:translateX(5px)}

/* ---------- CTA cuối ---------- */
.hm-final{padding-top:30px!important;padding-bottom:80px!important}
.hm-final-in{position:relative;overflow:hidden;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:26px;padding:44px 48px;border-radius:28px;color:#fff;background:radial-gradient(500px 260px at 100% 0,rgba(246,214,116,.35),transparent 70%),linear-gradient(135deg,#071d4d,#0b2a6b 55%,#16409a);border:2px solid var(--sv-gold);box-shadow:0 26px 60px rgba(11,42,107,.3)}
.hm-final-in::before{content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;border:2px dashed rgba(246,214,116,.4);animation:hmSpin 30s linear infinite}
.shopav .hm-final h2{margin:0 0 8px;color:#fff;font-size:clamp(24px,3vw,36px);font-weight:900}
.shopav .hm-final p{margin:0;max-width:560px;color:#dbe7ff}

/* ---------- Hiệu ứng cuộn (reveal) ---------- */
.is-home.hm-js [data-reveal]{opacity:0;transition:opacity .9s cubic-bezier(.2,.7,.2,1) var(--d,0ms),transform .9s cubic-bezier(.2,.7,.2,1) var(--d,0ms)}
.is-home.hm-js [data-reveal="up"]{transform:translateY(40px)}
.is-home.hm-js [data-reveal="left"]{transform:translateX(-50px)}
.is-home.hm-js [data-reveal="right"]{transform:translateX(50px)}
.is-home.hm-js [data-reveal="zoom"]{transform:scale(.92)}
.is-home.hm-js [data-reveal].is-in{opacity:1;transform:none}
.is-home.hm-js .sv-steps .sv-step{opacity:0;transform:translateY(40px);transition:opacity .8s,transform .8s}
.is-home.hm-js .sv-steps.is-in .sv-step{opacity:1;transform:none}
.is-home.hm-js .sv-steps.is-in .sv-step:nth-child(2){transition-delay:.1s}.is-home.hm-js .sv-steps.is-in .sv-step:nth-child(3){transition-delay:.2s}
.is-home.hm-js .sv-steps.is-in .sv-step:nth-child(4){transition-delay:.3s}.is-home.hm-js .sv-steps.is-in .sv-step:nth-child(5){transition-delay:.4s}
.is-home.hm-js .sv-steps.is-in .sv-step:nth-child(6){transition-delay:.5s}

@keyframes hmIn{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes hmZoom{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:none}}
@keyframes hmFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes hmSpin{to{transform:rotate(360deg)}}
@keyframes hmDrift{from{transform:translate(0,0) scale(1)}to{transform:translate(40px,30px) scale(1.12)}}
@keyframes hmBg{from{background-position:0 0}to{background-position:100% 60%}}
@keyframes hmPing{0%{box-shadow:0 0 0 0 rgba(246,214,116,.7)}80%,100%{box-shadow:0 0 0 12px rgba(246,214,116,0)}}
@keyframes hmGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes hmWheel{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(16px)}}
@keyframes hmBeat{0%,100%{transform:scale(1)}15%{transform:scale(1.12)}30%{transform:scale(1)}45%{transform:scale(1.08)}}
@keyframes hmDash{to{stroke-dashoffset:-240}}
@keyframes hmPop{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
	.hm-pgrid{grid-template-columns:repeat(3,1fr)}
	.hm-hero-in{gap:20px}
}
@media (max-width:849px){
	.hm-hero{min-height:0;padding:44px 0 120px}
	.hm-hero-in{grid-template-columns:1fr}
	.hm-hero-art{min-height:380px;margin-top:10px}
	.hm-hero-text{text-align:center}
	.shopav .hm-h1::after{left:50%;margin-left:-60px}
	.shopav .hm-lead{margin-left:auto;margin-right:auto}
	.hm-cta,.hm-trust{justify-content:center}
	.hm-pgrid{grid-template-columns:repeat(2,1fr)}
	.hm-ngrid{grid-template-columns:1fr 1fr}
	.hm-ncard.big{grid-column:span 2;grid-row:auto}
	.hm-ncard.big .hm-nimg{min-height:220px}
	.hm-steps{grid-template-columns:1fr;gap:56px}
	.hm-steps::before{display:none}
	.hm-final-in{padding:34px 26px;text-align:center;justify-content:center}
	.hm-chip.c3{display:none}
	.hm-scroll{display:none}
	.hm-stats{margin-top:-60px!important}
}
@media (max-width:640px){
	.is-home .shopav{max-width:92%}
	.hm-body .sv-section,.hm-band>.shopav{padding-top:48px;padding-bottom:48px}
	.hm-pgrid{gap:12px}
	.shopav .hm-pbody h3{font-size:14px}
	.hm-pbody{padding:12px}
	.hm-price{font-size:15px}
	.hm-ngrid{grid-template-columns:1fr}
	.hm-ncard.big{grid-column:auto}
	.hm-hero-art{min-height:320px}
	.hm-chip{font-size:12px;padding:7px 12px}
	.hm-chip.c1{top:2%;left:-2%}.hm-chip.c2{bottom:-7%;left:4%}
	.hm-cta .sv-btn{width:100%}
	.hm-stats .sv-grid{gap:10px}
	.hm-stat{padding:18px 8px}
}

@media (prefers-reduced-motion:reduce){
	.hm-hero,.hm-blob,.hm-orbit,.hm-card-float,.hm-chip,.hm-pill i,.hm-scroll span,.hm-pulse>svg:first-child,.hm-pulse .ekg,.hm-step .sv-num,.hm-final-in::before,.shopav .hm-h1::after{animation:none!important}
	.hm-in{opacity:1;animation:none}
	.is-home.hm-js [data-reveal],.is-home.hm-js .sv-steps .sv-step{opacity:1!important;transform:none!important;transition:none!important}
	.shopav-full.is-home{scroll-behavior:auto}
}