/* Lớp hiệu ứng trang chủ khoquangchau.vn (29/10/2026, anh Đông Tele 967): nền ảnh cửa khẩu / kho bãi / cảng,
   xe đầu kéo chạy, hiệu ứng theo chuột và khi cuộn. Chỉ animate transform/opacity; tắt hết khi máy bật "giảm chuyển động". */
html{scroll-behavior:smooth;overflow-x:clip}
body{overflow-x:clip}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* thanh tiến độ cuộn */
.sprog{position:fixed;left:0;top:0;height:3px;width:100%;z-index:60;background:linear-gradient(90deg,#FC5F00,#FFB27A);
  transform-origin:0 50%;transform:scaleX(var(--sp,0));pointer-events:none}

/* con trỏ phát sáng (chỉ chuột) */
.cur{position:fixed;left:0;top:0;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;z-index:70;pointer-events:none;
  border:1.5px solid rgba(252,95,0,.75);box-shadow:0 0 24px rgba(252,95,0,.35);opacity:0;
  transform:translate3d(var(--cx,-100px),var(--cy,-100px),0) scale(var(--cs,1));transition:opacity .3s var(--ease),scale .3s var(--ease)}
.cur.on{opacity:1}
.cur-dot{position:fixed;left:0;top:0;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:#FC5F00;z-index:71;pointer-events:none;
  transform:translate3d(var(--dx2,-100px),var(--dy2,-100px),0);opacity:0}
.cur-dot.on{opacity:1}
@media (pointer:coarse),(prefers-reduced-motion:reduce){.cur,.cur-dot{display:none}}

/* ===== Sân khấu đầu trang ===== */
.stage{position:relative;isolation:isolate;overflow:clip;color:#fff;
  margin:-68px calc(-1*max(16px,env(safe-area-inset-left,0px))) 0;padding:96px max(16px,env(safe-area-inset-left,0px)) 150px;min-height:min(100svh,980px)}
@media (max-width:600px){.stage{padding-bottom:118px}}
.stage-bg{position:absolute;inset:0;z-index:-1;overflow:clip;background:#0d1117}
.slide{position:absolute;inset:-6%;opacity:0;transition:opacity 1.8s var(--ease);
  transform:translate3d(calc(var(--mx,0)*-18px),calc(var(--my,0)*-12px + var(--sy,0px)),0) scale(1.06)}
.slide.on{opacity:1}
.slide i{position:absolute;inset:0;background-size:cover;background-position:center;filter:saturate(1.15) brightness(1.08)}
.slide.on i{animation:kb 16s linear both}
@keyframes kb{from{transform:scale(1)}to{transform:scale(1.12)}}
.s-hero i{background-image:url(/assets/anh/hero-1920.webp)}
.s-gate i{background-image:url(/assets/anh/cuakhau-1920.webp)}
.s-port i{background-image:url(/assets/anh/cang-1920.webp)}
@media (max-width:760px){.s-hero i{background-image:url(/assets/anh/hero-960.webp)}.s-gate i{background-image:url(/assets/anh/cuakhau-960.webp)}.s-port i{background-image:url(/assets/anh/cang-960.webp)}}
.stage-shade{position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(8,10,14,.84) 0%,rgba(8,10,14,.6) 38%,rgba(8,10,14,.18) 62%,rgba(8,10,14,.3) 100%),
  linear-gradient(180deg,rgba(8,10,14,.5) 0%,transparent 26%,transparent 70%,rgba(8,10,14,.85) 100%)}
@media (max-width:920px){.stage-shade{background:linear-gradient(180deg,rgba(8,10,14,.62),rgba(8,10,14,.74) 45%,rgba(8,10,14,.92))}}
.stage-grid{position:absolute;inset:0;opacity:.22;background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);
  background-size:56px 56px;mask-image:radial-gradient(ellipse at 30% 40%,#000 0,transparent 70%);-webkit-mask-image:radial-gradient(ellipse at 30% 40%,#000 0,transparent 70%)}
.stage-glow{position:absolute;left:0;top:0;width:640px;height:640px;margin:-320px 0 0 -320px;border-radius:50%;
  background:radial-gradient(circle,rgba(252,95,0,.30) 0,rgba(252,95,0,.10) 35%,transparent 65%);
  transform:translate3d(var(--gx,30vw),var(--gy,40vh),0);transition:transform .9s var(--ease);mix-blend-mode:screen}
@media (pointer:coarse){.stage-glow{animation:glowdrift 14s ease-in-out infinite alternate}}
@keyframes glowdrift{from{transform:translate3d(10vw,30vh,0)}to{transform:translate3d(70vw,60vh,0)}}
.stage-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.slide-meta{position:absolute;left:max(16px,calc(50vw - 560px));bottom:104px;display:flex;align-items:center;gap:12px;z-index:2;
  font-size:12px;line-height:16px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.slide-dots{display:flex;gap:6px}
.slide-dots b{width:28px;height:4px;border-radius:2px;background:rgba(255,255,255,.3);position:relative;overflow:hidden}
.slide-dots b.on::after{content:"";position:absolute;inset:0;background:#FC5F00;transform-origin:0 50%;animation:dotfill 8s linear both}
@keyframes dotfill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (max-width:600px){.slide-cap{display:none}.slide-meta{bottom:92px}}

/* chữ trên nền tối */
.stage .hero{padding-block:24px 8px}
.stage .eyebrow{color:#FFB27A;display:inline-flex;align-items:center;gap:8px}
.stage .eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:#FC5F00;box-shadow:0 0 0 0 rgba(252,95,0,.7);animation:ping 2s infinite}
@keyframes ping{70%{box-shadow:0 0 0 10px rgba(252,95,0,0)}100%{box-shadow:0 0 0 0 rgba(252,95,0,0)}}
.stage .hero h1{background:linear-gradient(180deg,#fff 30%,#FFC9A3 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:none;filter:drop-shadow(0 2px 18px rgba(0,0,0,.35))}
.stage .hero .sub{color:rgba(255,255,255,.82)}
.stage .proof{color:rgba(255,255,255,.75)}
.stage .proof b{color:#fff}
.stage .lines{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:8px 16px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.stage .lines div{border-bottom-color:rgba(255,255,255,.14);color:rgba(255,255,255,.78)}
.stage .lines div:last-child{border-bottom:0}
.stage .lines div b{color:#FFB27A}
.stage .tool{position:relative;box-shadow:0 30px 80px -20px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.06);color:var(--fg)}
.stage .tool::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;
  background:radial-gradient(420px circle at var(--tx,50%) var(--ty,0%),rgba(252,95,0,.9),transparent 45%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.9}
.stage .tool .hint{color:var(--muted)}

/* tuyến đường hàng đi */
.route{margin-top:28px;max-width:560px}
.route .rl{position:relative;height:2px;margin:0 9px;background:rgba(255,255,255,.18);border-radius:1px}
.route .rl::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#FC5F00,#FFB27A);transform-origin:0 50%;animation:rfill 6s var(--ease) infinite}
@keyframes rfill{0%{transform:scaleX(0);opacity:1}70%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}
.route .rl i{position:absolute;top:-5px;left:0;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px rgba(252,95,0,.35),0 0 18px #FC5F00;
  animation:rdot 6s var(--ease) infinite}
@keyframes rdot{0%{left:0;opacity:1}70%{left:100%;opacity:1}100%{left:100%;opacity:0}}
.route ol{list-style:none;margin:10px 0 0;padding:0;display:flex;justify-content:space-between;gap:8px;font-size:12px;line-height:16px;font-weight:600;color:rgba(255,255,255,.75)}
.route li{position:relative;padding-top:6px;text-align:center;flex:1}
.route li:first-child{text-align:left}.route li:last-child{text-align:right}
.route li::before{content:"";position:absolute;top:-17px;left:50%;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:#0d1117;border:2px solid #FC5F00}
.route li:first-child::before{left:4px}.route li:last-child::before{left:auto;right:4px}

/* đường + xe đầu kéo */
.road{position:absolute;left:0;right:0;bottom:0;height:92px;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(18,20,26,.0) 0,rgba(18,20,26,.85) 22%,#14171d 100%)}
.road::before{content:"";position:absolute;left:0;right:0;top:50px;height:3px;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.55) 0 36px,transparent 36px 72px);animation:lane 1.1s linear infinite}
.road::after{content:"";position:absolute;left:0;right:0;top:20px;height:1px;background:rgba(255,178,122,.35)}
@keyframes lane{from{transform:translateX(0)}to{transform:translateX(-72px)}}
.truck{position:absolute;left:0;width:230px;height:74px;overflow:visible;will-change:transform}
.truck .wh{transform-box:fill-box;transform-origin:center;animation:spin .55s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.truck.t1{bottom:22px;animation:drive 15s linear infinite}
.truck.t2{bottom:22px;animation:drive 15s linear infinite;animation-delay:-7.5s}
.truck.t3{bottom:52px;width:150px;opacity:.55;animation:driveback 24s linear infinite;animation-delay:-4s}
.truck.t3 .wh{animation-direction:reverse}
@keyframes drive{from{transform:translate3d(-260px,0,0)}to{transform:translate3d(calc(100vw + 40px),0,0)}}
@keyframes driveback{from{transform:translate3d(calc(100vw + 40px),0,0) scaleX(-1)}to{transform:translate3d(-200px,0,0) scaleX(-1)}}
.truck .beam{animation:flick 3s ease-in-out infinite}
@keyframes flick{50%{opacity:.6}}
@media (max-width:600px){.truck{width:160px;height:52px}.truck.t3{width:110px;bottom:46px}.road{height:80px}.road::before{top:44px}}

/* ===== Dải ảnh toàn khổ (con số, khẩu hiệu, lời kết) ===== */
.band{position:relative;isolation:isolate;overflow:hidden;color:#fff;border-top:0!important;
  margin-inline:calc(50% - 50vw);padding-inline:max(16px,calc(50vw - 560px))}
.band-bg{position:absolute;inset:-18% 0;z-index:-2;background-size:cover;background-position:center;transform:translate3d(0,var(--py,0px),0) scale(1.05);will-change:transform}
.band::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(8,10,14,.86),rgba(8,10,14,.62) 50%,rgba(8,10,14,.9))}
.band-kho .band-bg{background-image:url(/assets/anh/kho-1920.webp)}
.band-cang .band-bg{background-image:url(/assets/anh/cang-1920.webp)}
.band-gate .band-bg{background-image:url(/assets/anh/cuakhau-1920.webp)}
@media (max-width:760px){.band-kho .band-bg{background-image:url(/assets/anh/kho-960.webp)}.band-cang .band-bg{background-image:url(/assets/anh/cang-960.webp)}.band-gate .band-bg{background-image:url(/assets/anh/cuakhau-960.webp)}}
.band .sec-h p,.band p{color:rgba(255,255,255,.8)}
.band .stat{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.band .stat b{color:#fff;font-size:44px;line-height:52px;letter-spacing:-.02em;background:linear-gradient(180deg,#fff,#FFC49A);-webkit-background-clip:text;background-clip:text;color:transparent}
.band .stat span{color:rgba(255,255,255,.75)}
.band.tagline{padding-block:140px}
.band.tagline p{color:#fff}
.band.tagline .w{opacity:.22}
.band.tagline .w.on{opacity:1;text-shadow:0 0 30px rgba(252,95,0,.35)}
.band.final{padding-block:110px}
.band.final h2{color:#fff}
@media (max-width:600px){.band.tagline{padding-block:96px}.band .stat b{font-size:36px;line-height:44px}}

/* ===== Thẻ dịch vụ / lợi ích: ánh sáng theo chuột + nghiêng nhẹ ===== */
.fx-card{position:relative;transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s var(--ease),box-shadow .5s var(--ease);will-change:transform}
.fx-card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s var(--ease);
  background:radial-gradient(360px circle at var(--lx,50%) var(--ly,50%),rgba(252,95,0,.14),transparent 60%)}
.fx-card:hover::after{opacity:1}
.fx-card:hover{box-shadow:0 18px 40px -18px rgba(200,74,0,.35)}
.svc .ic,.benefit .ic{transition:transform .6s var(--ease)}
.fx-card:hover .ic{transform:translateY(-3px) rotate(-6deg) scale(1.08)}

/* ===== Hành trình theo cuộn (quy trình) ===== */
.journey{position:relative;margin-top:36px;height:70px}
.journey .jl{position:absolute;left:0;right:0;bottom:12px;height:4px;border-radius:2px;background:var(--sunk)}
.journey .jl b{position:absolute;left:0;top:0;bottom:0;width:100%;border-radius:2px;background:linear-gradient(90deg,#FC5F00,#FFB27A);transform-origin:0 50%;transform:scaleX(var(--jp,0))}
.journey .jt{position:absolute;bottom:14px;left:0;width:150px;height:48px;transform:translate3d(calc(var(--jp,0) * (var(--jw,600px) - 150px)),0,0)}
.journey .jn{position:absolute;bottom:6px;width:16px;height:16px;margin-left:-8px;border-radius:50%;background:var(--surface);border:3px solid var(--line);transition:border-color .4s var(--ease),transform .4s var(--ease)}
.journey .jn.on{border-color:#FC5F00;transform:scale(1.15)}
.step{transition:opacity .5s var(--ease),transform .5s var(--ease)}
.steps.fx-steps .step{opacity:.45}
.steps.fx-steps .step.on{opacity:1}
.steps .step.on{border-top-color:#FC5F00}

/* ===== Xuất hiện lần lượt ===== */
.stag > *{transition:transform .8s var(--ease),opacity .8s var(--ease);transition-delay:calc(var(--i,0) * 90ms)}
.stag.pre > *{transform:translateY(28px);opacity:0}

/* nút nam châm */
.mag{transition:transform .35s var(--ease)}

/* tra vận đơn: cân, khối */
.trk .km{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:14px;line-height:20px;color:var(--muted)}
.trk .km b{color:var(--fg)}
.bar5 i{position:relative;overflow:hidden}
.bar5 i.on::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);animation:shine 2.2s infinite}
@keyframes shine{from{transform:translateX(-100%)}to{transform:translateX(100%)}}

@media (prefers-reduced-motion:reduce){
  .slide,.slide.on i,.truck,.truck .wh,.road::before,.route .rl::before,.route .rl i,.stage-glow,.stage .eyebrow::before,.bar5 i.on::after,.slide-dots b.on::after{animation:none!important;transition:none!important}
  .truck.t2,.truck.t3{display:none}.truck.t1{transform:translateX(55vw)}
  .route .rl::before{transform:none}.route .rl i{left:100%}
  .band-bg,.slide{transform:none!important}
  .fx-card{transform:none!important}
  .stag > *{transition:none}.stag.pre > *{transform:none;opacity:1}
  .steps.fx-steps .step{opacity:1}
}

/* ===== Nút nổi + khung chat AI ===== */
.ai-fab{position:fixed;right:16px;bottom:calc(72px + env(safe-area-inset-bottom,0px));z-index:40;appearance:none;border:0;cursor:pointer;font:inherit;
  display:flex;align-items:center;gap:10px;padding:8px 16px 8px 8px;border-radius:999px;color:#fff;
  background:linear-gradient(120deg,#C84A00,#FC5F00 55%,#FF8A3D);box-shadow:0 12px 30px -8px rgba(200,74,0,.6),0 0 0 0 rgba(252,95,0,.5);
  animation:fabp 2.6s infinite;transition:transform .4s var(--ease)}
.ai-fab:hover{transform:translateY(-2px) scale(1.03)}
.ai-fab.on{animation:none}
@keyframes fabp{70%{box-shadow:0 12px 30px -8px rgba(200,74,0,.6),0 0 0 14px rgba(252,95,0,0)}100%{box-shadow:0 12px 30px -8px rgba(200,74,0,.6),0 0 0 0 rgba(252,95,0,0)}}
.ai-ic{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.2);display:grid;place-items:center}
.ai-t{display:grid;text-align:left;line-height:1.15}
.ai-t b{font-size:15px}.ai-t small{font-size:11px;opacity:.9}
.ai-panel{position:fixed;right:16px;bottom:calc(136px + env(safe-area-inset-bottom,0px));z-index:45;width:400px;height:min(640px,calc(100vh - 170px));
  border-radius:20px;overflow:hidden;background:var(--surface);box-shadow:0 30px 80px -20px rgba(0,0,0,.45),0 0 0 1px var(--line);animation:panelin .45s var(--ease) both}
.ai-panel iframe{width:100%;height:100%;border:0;display:block}
@keyframes panelin{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
@media (max-width:600px){
  .ai-fab{padding:6px;bottom:calc(70px + env(safe-area-inset-bottom,0px))}.ai-t{display:none}
  .ai-panel{inset:0;width:auto;height:auto;border-radius:0;bottom:0;right:0}
  html.ai-open,html.ai-open body{overflow:hidden}
  html.ai-open .zalo-float,html.ai-open .ai-fab{display:none}
}
@media (prefers-reduced-motion:reduce){.ai-fab{animation:none}.ai-panel{animation:none}}