/* Màn loading, lazy-load fade-in và hiệu ứng menu mobile.
   Menu chỉ đổi ở ≤900px — desktop giữ nguyên như custom.css. */

/* ---------- Màn loading (lần đầu vào trang mỗi phiên) ---------- */
.site-preloader{display:none}
html.is-preloading{overflow:hidden}
html.is-preloading .site-preloader{position:fixed;inset:0;z-index:1000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;background:radial-gradient(120% 90% at 50% 40%,#fff 0%,#f5f7fd 60%,#eef1fa 100%);transition:transform .9s cubic-bezier(.76,0,.24,1),border-radius .9s cubic-bezier(.76,0,.24,1)}
.preloader-mark{position:relative;width:132px;height:132px;display:grid;place-items:center}
.preloader-mark img{width:84px;height:84px;animation:preloader-in .9s cubic-bezier(.22,1,.36,1) both,preloader-spin 7s linear .2s infinite}
.preloader-ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.preloader-ring circle{fill:none;stroke-width:2.5;stroke-linecap:round}
.preloader-ring .track{stroke:#263486;opacity:.07}
.preloader-ring .progress{stroke:url(#preloader-gradient);stroke-dasharray:390;stroke-dashoffset:390;animation:preloader-draw 2.4s cubic-bezier(.45,0,.2,1) .15s forwards}
.preloader-copy{text-align:center;line-height:1}
.preloader-name{font-family:Urbanist,sans-serif;font-size:34px;font-weight:500;letter-spacing:-.02em;color:#2b2d33;margin:0;animation:preloader-up .8s cubic-bezier(.22,1,.36,1) .25s both}
.preloader-tagline{margin:10px 0 0;font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:#263486;opacity:.75;animation:preloader-up .8s cubic-bezier(.22,1,.36,1) .4s both}
.site-preloader.is-complete .progress{animation:none;stroke-dashoffset:0;transition:stroke-dashoffset .35s ease-out}
.site-preloader.is-leaving{transform:translateY(-100%);border-radius:0 0 50% 50% / 0 0 14vh 14vh}
.site-preloader.is-leaving .preloader-mark,.site-preloader.is-leaving .preloader-copy{opacity:0;transform:translateY(-24px) scale(.96);transition:opacity .35s ease,transform .5s cubic-bezier(.76,0,.24,1)}
html.site-entering .header,html.site-entering main{animation:site-enter 1s cubic-bezier(.22,1,.36,1) .25s backwards}
@keyframes preloader-in{from{opacity:0;transform:scale(.6) rotate(-120deg)}to{opacity:1;transform:none}}
@keyframes preloader-spin{to{transform:rotate(360deg)}}
@keyframes preloader-draw{to{stroke-dashoffset:60}}
@keyframes preloader-up{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes site-enter{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@media(max-width:700px){.preloader-mark{width:112px;height:112px}.preloader-mark img{width:70px;height:70px}.preloader-name{font-size:29px}.preloader-tagline{font-size:9.5px}}

/* ---------- Lazy-load: ảnh hiện dần khi tải xong ---------- */
img[data-lazy]{transition:opacity .6s ease,filter .6s ease}
img[data-lazy=pending]{opacity:0;filter:blur(6px)}

/* ---------- Menu mobile ---------- */
@media(max-width:900px){
  .menu-toggle{position:relative;transition:border-color .3s,background .3s,box-shadow .3s}
  .menu-toggle span{transition:transform .45s cubic-bezier(.68,-.35,.27,1.35),opacity .2s ease;transform-origin:center}
  .menu-toggle[aria-expanded=true]{border-color:#c9cde0;background:#f4f5fa;box-shadow:0 0 0 4px #26348612}

  .nav-shell nav{display:block;visibility:hidden;pointer-events:none;top:calc(100% + 10px);padding:10px;border-radius:22px;border-color:#eceef5;background:#ffffffee;-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);box-shadow:0 30px 60px -20px #171b3540,0 10px 24px -12px #171b3524;opacity:0;transform:translateY(-14px) scale(.97);transform-origin:top right;clip-path:inset(0 0 100% 0 round 22px);transition:clip-path .55s cubic-bezier(.22,1,.36,1),transform .55s cubic-bezier(.22,1,.36,1),opacity .3s ease,visibility 0s linear .55s}
  .nav-shell nav.is-open{visibility:visible;pointer-events:auto;opacity:1;transform:none;clip-path:inset(0 0 0 0 round 22px);transition-delay:0s}

  .nav-menu-2{gap:2px}
  .nav-shell nav .nav-link-2{position:relative;display:flex;align-items:center;justify-content:space-between;padding:15px 18px;border-radius:14px;font-size:18px;font-weight:500;opacity:0;transform:translateY(12px);transition:opacity .35s ease,transform .5s cubic-bezier(.22,1,.36,1),background .25s,color .25s}
  .nav-shell nav .nav-link-2:after{content:'↗';font-size:16px;color:var(--brand);opacity:0;transform:translate(-8px,6px);transition:opacity .3s,transform .4s cubic-bezier(.22,1,.36,1)}
  .nav-shell nav .nav-link-2:hover,.nav-shell nav .nav-link-2:active{background:#f4f5fa;color:var(--brand)}
  .nav-shell nav .nav-link-2:hover:after,.nav-shell nav .nav-link-2.active:after{opacity:1;transform:none}
  .nav-shell nav .nav-link-2.active{background:linear-gradient(90deg,#26348610,#26348603);color:var(--brand);font-weight:600}
  .nav-shell nav .nav-link-2+.nav-link-2:before{content:'';position:absolute;left:18px;right:18px;top:-1px;height:1px;background:#eef0f5}
  .nav-shell nav .nav-link-2.active:before,.nav-shell nav .nav-link-2.active+.nav-link-2:before{display:none}
  .nav-shell nav.is-open .nav-link-2{opacity:1;transform:none}
  .nav-shell nav.is-open .nav-link-2:nth-child(1){transition-delay:.08s}
  .nav-shell nav.is-open .nav-link-2:nth-child(2){transition-delay:.13s}
  .nav-shell nav.is-open .nav-link-2:nth-child(3){transition-delay:.18s}
  .nav-shell nav.is-open .nav-link-2:nth-child(4){transition-delay:.23s}
  .nav-shell nav.is-open .nav-link-2:nth-child(5){transition-delay:.28s}
  .nav-shell nav.is-open .nav-link-2:hover,.nav-shell nav.is-open .nav-link-2:active{transition-delay:0s}

  /* Nền mờ phủ trang phía dưới header khi menu mở */
  .header:after{content:'';position:fixed;left:0;right:0;bottom:0;top:var(--header-bottom,78px);z-index:-1;background:#10152e47;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;visibility:hidden;transition:opacity .45s ease,visibility 0s linear .45s}
  .header.menu-open:after{opacity:1;visibility:visible;transition-delay:0s}
  .header.menu-open{box-shadow:0 1px 0 var(--line)}
  /* Không dùng overflow:hidden để khoá cuộn — iOS Safari sẽ làm header sticky nhảy khỏi màn hình */
  html.menu-locked{overscroll-behavior:none}
  .nav-shell nav{overscroll-behavior:contain}
}

/* ---------- Đối tác trên mobile: dải logo chạy ngang (desktop giữ lưới cũ) ---------- */
.partner-marquee{display:none}
@media(max-width:700px){
  #partners.reference-section{padding-top:48px;padding-bottom:0;min-height:0}
  #partners>.container{padding-bottom:40px}
  #partners .partners-heading{gap:12px;margin-bottom:26px}
  #partners .partners-heading>p{font-size:15px;line-height:1.7}
  #partners .partners-layout{gap:18px}
  #partners .partners-photo{aspect-ratio:16/10;border-radius:22px}
  #partners .partner-logos{display:none}
  #partners .partner-marquee{display:block;position:relative;margin-inline:-20px;padding:6px 0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
  .partner-marquee-track{display:flex;gap:12px;width:max-content;padding-left:12px;animation:partner-scroll 32s linear infinite}
  .partner-marquee:active .partner-marquee-track{animation-play-state:paused}
  .marquee-logo{flex:none;display:flex;align-items:center;justify-content:center;height:76px;padding:0 24px;border:1px solid #e9ebf2;border-radius:18px;background:#fff;box-shadow:0 6px 18px -10px #26348626}
  .marquee-logo img{display:block;width:auto;height:var(--logo-h,36px);max-width:none}
  .marquee-logo--rohto{--logo-h:40px}
  .marquee-logo--binh-thuan{--logo-h:32px}
  .marquee-logo--mec{--logo-h:50px}
  .marquee-logo--quang-minh{--logo-h:46px}
  .marquee-logo--ampharco{--logo-h:27px}
  .marquee-logo--tdox{--logo-h:50px;background:#af8735;border-color:#af8735;padding:0 30px}
  .marquee-logo--cellgenix{--logo-h:36px}
  .partner-marquee-note{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:4px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#8a8fa3}
  .partner-marquee-note b{color:var(--brand);font-size:15px;letter-spacing:0}
}
@keyframes partner-scroll{to{transform:translateX(-50%)}}
@media(max-width:700px) and (prefers-reduced-motion:reduce){
  #partners .partner-marquee{overflow-x:auto;-webkit-mask-image:none;mask-image:none;scroll-snap-type:x mandatory}
  .partner-marquee-track{animation:none}
  .partner-marquee-track [aria-hidden=true]{display:none}
  .marquee-logo{scroll-snap-align:center}
}