/* =====================================================================
   HIỆU ỨNG: trang chủ toàn màn hình, nền tối công nghệ, ảnh dự án lia như xoay 360°,
   ánh sáng xanh chuyển động, lưới phối cảnh, vòng 360° quay, hiện dần khi cuộn, thẻ nghiêng 3D.
   Tắt hết khi người xem bật "giảm chuyển động".
   ===================================================================== */
:root{--neo:#5eead4;--neo-2:#22c55e;--night:#04110b;--night-2:#071a12}

/* Đầu trang trong suốt trên banner trang chủ */
.has-xhero .hdr{position:fixed;left:0;right:0;background:transparent;border-bottom-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;transition:background .3s,border-color .3s}
.has-xhero .hdr:not(.is-scrolled) .nav__list a,.has-xhero .hdr:not(.is-scrolled) .ibtn,.has-xhero .hdr:not(.is-scrolled) .brand--text{color:#fff}
.has-xhero .hdr:not(.is-scrolled) .nav__list a:hover{background:rgba(255,255,255,.1)}
.has-xhero .hdr:not(.is-scrolled) .ibtn:hover{background:rgba(255,255,255,.12)}
.has-xhero .hdr:not(.is-scrolled) .brand img,.has-xhero .hdr:not(.is-scrolled) .custom-logo{filter:brightness(0) invert(1)}
.has-xhero .hdr.is-scrolled{background:rgba(255,255,255,.88);backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px);border-bottom-color:rgba(17,24,39,.06)}
@media (max-width:900px){.has-xhero .hdr .nav.is-open .nav__list a{color:var(--ink)}}

/* Banner toàn màn hình */
.xhero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;overflow:hidden;background:var(--night);color:#fff;isolation:isolate;padding:calc(var(--hdr) + 40px) 0 120px}
.xhero__bg{position:absolute;inset:0;z-index:-1;overflow:hidden}
.xhero__pano{position:absolute;left:-6%;top:-6%;width:112%;height:112%;max-width:none;object-fit:cover;opacity:.55;transform:scale(1.28);animation:pano 38s ease-in-out infinite alternate;will-change:transform}
@keyframes pano{0%{transform:scale(1.28) translateX(-7%)}100%{transform:scale(1.28) translateX(7%)}}
.xhero__aurora{position:absolute;inset:0;filter:blur(70px);opacity:.75;mix-blend-mode:screen}
.xhero__aurora i{position:absolute;width:46vmax;height:46vmax;border-radius:50%;background:radial-gradient(circle,#0f9f6e 0%,rgba(15,159,110,0) 65%);animation:blob 18s ease-in-out infinite alternate}
.xhero__aurora i:nth-child(1){left:-12vmax;top:-14vmax}
.xhero__aurora i:nth-child(2){right:-14vmax;top:4vmax;background:radial-gradient(circle,#14b8a6 0%,rgba(20,184,166,0) 65%);animation-duration:24s;animation-delay:-6s}
.xhero__aurora i:nth-child(3){left:30%;bottom:-24vmax;background:radial-gradient(circle,#22c55e 0%,rgba(34,197,94,0) 62%);animation-duration:21s;animation-delay:-11s}
@keyframes blob{0%{transform:translate(0,0) scale(1)}50%{transform:translate(6vmax,4vmax) scale(1.15)}100%{transform:translate(-4vmax,-3vmax) scale(.92)}}
.xhero__grid{position:absolute;left:-50%;right:-50%;bottom:-10%;height:60%;background-image:linear-gradient(rgba(94,234,212,.22) 1px,transparent 1px),linear-gradient(90deg,rgba(94,234,212,.22) 1px,transparent 1px);background-size:64px 64px;transform:perspective(520px) rotateX(62deg);transform-origin:bottom;-webkit-mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.6) 40%,transparent 85%);mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.6) 40%,transparent 85%);animation:gridmove 6s linear infinite}
@keyframes gridmove{to{background-position:0 64px,0 0}}
.xhero__shade{position:absolute;inset:0;background:radial-gradient(ellipse at 30% 40%,rgba(4,17,11,.25) 0%,rgba(4,17,11,.75) 70%),linear-gradient(to bottom,rgba(4,17,11,.55) 0%,rgba(4,17,11,0) 30%,rgba(4,17,11,0) 60%,var(--night) 100%)}
.xhero__in{position:relative;z-index:2}
.xhero__orbit{position:absolute;z-index:1;right:max(-60px,calc(50% - 720px));top:50%;width:min(620px,58vw);aspect-ratio:1;transform:translateY(-50%);pointer-events:none}
.xhero__orbit svg{width:100%;height:100%;overflow:visible}
.xhero__orbit .o1{transform-origin:200px 200px;animation:spin 12s linear infinite;filter:drop-shadow(0 0 6px #5eead4)}
.xhero__orbit .o2{transform-origin:200px 200px;animation:spin 20s linear infinite reverse}
@keyframes spin{to{transform:rotate(360deg)}}
.xhero__deg{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--f-d);font-variant-numeric:lining-nums;font-weight:700;font-size:clamp(80px,12vw,180px);letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.28);background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,0));-webkit-background-clip:text;background-clip:text}
.xpill{display:inline-flex;align-items:center;gap:10px;margin:0 0 var(--s-6);padding:8px 16px 8px 12px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font-size:var(--t-14);font-weight:500;color:#d1fae5}
.xpill__dot{width:8px;height:8px;border-radius:50%;background:var(--neo);animation:ping 1.8s ease-out infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(94,234,212,.7)}100%{box-shadow:0 0 0 12px rgba(94,234,212,0)}}
.xhero__title{font-family:var(--f-d);font-variant-numeric:lining-nums;font-weight:600;font-size:clamp(44px,7.2vw,104px);line-height:1.02;letter-spacing:-.03em;max-width:12ch;margin:0 0 var(--s-6);padding-bottom:.06em;background:linear-gradient(100deg,#fff 0%,#fff 40%,#a7f3d0 55%,#fff 70%,#fff 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 7s ease-in-out infinite}
@keyframes shine{0%,100%{background-position:100% 0}50%{background-position:0 0}}
.xhero__text{max-width:58ch;font-size:clamp(16px,1.4vw,19px);color:rgba(255,255,255,.78);margin-bottom:var(--s-8)}
.sbox--glass{max-width:600px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);color:rgba(255,255,255,.7);box-shadow:0 20px 60px rgba(0,0,0,.35)}
.sbox--glass input{color:#fff}
.sbox--glass input::placeholder{color:rgba(255,255,255,.55)}
.sbox--glass:focus-within{border-color:var(--neo);box-shadow:0 0 0 4px rgba(94,234,212,.18),0 20px 60px rgba(0,0,0,.35)}
.btn--glow{background:linear-gradient(120deg,#10b981,#2dd4bf 50%,#22c55e);background-size:200% 100%;color:#04110b;box-shadow:0 0 24px rgba(45,212,191,.45);animation:glow 5s ease-in-out infinite}
.btn--glow:hover{color:#04110b;box-shadow:0 0 36px rgba(45,212,191,.7)}
@keyframes glow{0%,100%{background-position:0 0}50%{background-position:100% 0}}
.xstats{display:flex;flex-wrap:wrap;gap:var(--s-4);margin:var(--s-12) 0 0}
.xstats>div{min-width:170px;padding:var(--s-4) var(--s-6);border-radius:var(--r);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:flex;flex-direction:column}
.xstats dd{margin:0;font-family:var(--f-d);font-variant-numeric:lining-nums tabular-nums;font-size:40px;font-weight:600;line-height:1.1;background:linear-gradient(180deg,#fff,#a7f3d0);-webkit-background-clip:text;background-clip:text;color:transparent}
.xstats dt{font-size:var(--t-14);color:rgba(255,255,255,.65)}
.xstats>div.xstats__feat{padding:0}
.xstats__feat a{display:grid;gap:2px;height:100%;padding:var(--s-4) var(--s-6);color:#fff;text-decoration:none;border-radius:var(--r);transition:background .2s}
.xstats__feat a:hover{background:rgba(255,255,255,.06);color:#fff}
.xstats__feat span{font-size:var(--t-12);letter-spacing:.12em;text-transform:uppercase;color:var(--neo);font-weight:600}
.xstats__feat strong{font-size:var(--t-16);max-width:24ch}
.xstats__feat em{font-style:normal;font-size:13px;color:rgba(255,255,255,.65);display:inline-flex;align-items:center;gap:4px}
.xhero__cue{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);z-index:3;width:30px;height:48px;border:2px solid rgba(255,255,255,.4);border-radius:16px;display:block}
.xhero__cue span{position:absolute;left:50%;top:9px;width:4px;height:9px;margin-left:-2px;border-radius:2px;background:#fff;animation:cue 1.6s ease-in-out infinite}
@keyframes cue{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(14px)}}
@media (max-width:900px){
	.xhero{padding:calc(var(--hdr) + 28px) 0 100px;align-items:flex-end}
	.xhero__orbit{right:-34%;top:24%;width:110vw;opacity:.5}
	.xhero__title{max-width:none}
	.xstats{margin-top:var(--s-8)}
	.xstats>div{min-width:0;flex:1 1 40%;padding:var(--s-3) var(--s-4)}
	.xstats dd{font-size:30px}
	.xstats>div.xstats__feat{flex-basis:100%}
	.xhero__cue{display:none}
}

/* Dải tên dự án chạy ngang */
.marq{position:relative;background:var(--night);color:#fff;border-top:1px solid rgba(255,255,255,.08);overflow:hidden;padding:14px 0}
.marq::before,.marq::after{content:"";position:absolute;top:0;bottom:0;width:12%;z-index:2;pointer-events:none}
.marq::before{left:0;background:linear-gradient(90deg,var(--night),rgba(4,17,11,0))}
.marq::after{right:0;background:linear-gradient(270deg,var(--night),rgba(4,17,11,0))}
.marq__track{display:flex;width:max-content;animation:marq 60s linear infinite}
.marq:hover .marq__track,.marq:focus-within .marq__track{animation-play-state:paused}
.marq__list{display:flex;list-style:none;margin:0;padding:0}
.marq__list li{display:flex;align-items:center;white-space:nowrap}
.marq__list li::after{content:"";width:6px;height:6px;margin:0 28px;border-radius:50%;background:var(--neo);box-shadow:0 0 10px var(--neo)}
.marq__list a{color:rgba(255,255,255,.82);text-decoration:none;font-family:var(--f-d);font-size:22px;font-weight:500;min-height:44px;display:inline-flex;align-items:center}
.marq__list a:hover{color:var(--neo)}
@keyframes marq{to{transform:translateX(-50%)}}

/* Khối tối công nghệ */
.sec--dark{position:relative;background:var(--night-2);color:#fff;overflow:hidden;isolation:isolate}
.sec--dark::before{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(94,234,212,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(94,234,212,.07) 1px,transparent 1px);background-size:48px 48px;-webkit-mask-image:radial-gradient(ellipse at 70% 50%,#000 10%,transparent 70%);mask-image:radial-gradient(ellipse at 70% 50%,#000 10%,transparent 70%)}
.sec--dark::after{content:"";position:absolute;z-index:-1;width:600px;height:600px;right:-120px;top:-200px;border-radius:50%;background:radial-gradient(circle,rgba(16,185,129,.35),rgba(16,185,129,0) 65%);filter:blur(30px)}
.sec--dark .sec__title{color:#fff}
.sec--dark .eyebrow{color:var(--neo)}
.sec--dark .how__txt p:not(.eyebrow){color:rgba(255,255,255,.72)}
.sec--dark .how__list li{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);box-shadow:none;transition:border-color .3s,transform .3s var(--ease),background .3s}
.sec--dark .how__list li:hover{border-color:rgba(94,234,212,.5);transform:translateY(-4px);background:rgba(255,255,255,.08)}
.sec--dark .how__list span:not(.how__ic){color:rgba(255,255,255,.6)}
.sec--dark .how__ic{background:rgba(94,234,212,.12);color:var(--neo);box-shadow:0 0 18px rgba(94,234,212,.22)}

.sec--dark .sec__more{color:#fff}
.sec--dark .sec__more:hover{color:var(--neo)}
.sec--dark .card360__title a{color:#fff}
.sec--dark .card360__title a:hover{color:var(--neo)}
.sec--dark .card360__meta{color:rgba(255,255,255,.6)}
.sec--dark .card360__media{box-shadow:0 0 0 1px rgba(255,255,255,.08),0 20px 40px rgba(0,0,0,.35)}
.sec--dark .card360:hover .card360__media{box-shadow:0 0 0 1px rgba(94,234,212,.4),0 0 40px rgba(94,234,212,.18),0 24px 48px rgba(0,0,0,.45)}
.sec--glow{background:linear-gradient(180deg,var(--night) 0%,var(--night-2) 100%)}
.sec--glow::after{left:-200px;right:auto;top:auto;bottom:-260px}
.brand--text{font-variant-numeric:lining-nums}

/* Thẻ tour: nghiêng 3D + vệt sáng theo chuột */
.grid360{perspective:1200px}
.card360__media{transform-style:preserve-3d}
.card360.is-tilt .card360__media{transition:box-shadow .3s var(--ease),transform .08s linear}
.card360__media::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.3),rgba(255,255,255,0) 45%)}
.card360:hover .card360__media::after{opacity:1}
.card360__media::before{content:"";position:absolute;inset:0;z-index:3;border-radius:inherit;padding:2px;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),#5eead4,rgba(94,234,212,0) 60%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.card360:hover .card360__media::before{opacity:1}
.card360__badge,.card360__logo{z-index:4}

/* Hiện dần khi cuộn (chỉ khi có JS) */
.js-fx [data-rv],.js-fx .rv{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:var(--d,0s)}
.js-fx [data-rv].is-in,.js-fx .rv.is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
	.xhero__pano{transform:scale(1.1)}
	.js-fx [data-rv],.js-fx .rv{opacity:1;transform:none}
}

/* Dừng hiệu ứng nền khi banner khuất / tab ẩn */
.xhero.is-paused *,.xhero.is-hidden *{animation-play-state:paused!important}
/* Điện thoại: nhẹ hơn (ít mờ, bỏ lưới chạy) */
@media (max-width:760px){
	.xhero__aurora{filter:blur(40px);opacity:.6}
	.xhero__grid{animation:none}
	.xhero__pano{animation-duration:50s}
}