/* ==========================================================================
   Header
   ========================================================================== */
.site-header{
  position: sticky; top:0; z-index: 900;
  height: var(--header-h);
  display:flex; align-items:center;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)){
  @media (min-width: 901px){
    .site-header{
      background: color-mix(in srgb, var(--color-surface) 88%, transparent);
      backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    }
  }
}
.site-header .container{ display:flex; align-items:center; justify-content:space-between; gap:24px; width:100%; }

.header-left{ display:flex; align-items:center; gap:36px; min-width:0; flex-shrink:0; }

.brand{ display:flex; align-items:center; gap:10px; font: 800 18px/1 var(--font-display); color: var(--color-text); flex-shrink:0; }
.brand img{ height:34px; width:auto; }

.main-nav{ display:flex; align-items:center; gap:28px; }
.nav-link{
  font:600 14.5px/1 var(--font-body); color: var(--color-text-soft);
  padding: 8px 0; position:relative;
  transition: color var(--p-duration-fast) var(--p-ease);
}
.nav-link:hover, .nav-link.active{ color: var(--color-primary); }
.nav-link.active::after{
  content:''; position:absolute; left:0; right:0; bottom:-2px; height:2px;
  background: var(--gradient-brand); border-radius: 2px;
}

.nav-cta{
  display:none;
  font:600 14.5px/1 var(--font-body); color:#fff;
  background: var(--gradient-brand); border-radius: var(--p-radius-md);
  padding: 12px 20px; text-align:center;
  box-shadow: var(--shadow-lift);
}

.header-actions{ display:flex; align-items:center; gap:14px; flex-shrink:0; }

.lang-switch{
  display:flex; align-items:center; background: var(--color-bg-alt);
  border:1px solid var(--color-border); border-radius: var(--p-radius-full); padding:3px;
}
.lang-switch button{
  border:none; background:transparent; padding:6px 12px; border-radius: var(--p-radius-full);
  font:700 12px/1 var(--font-body); color: var(--color-text-muted);
  transition: background var(--p-duration-fast) var(--p-ease), color var(--p-duration-fast) var(--p-ease);
}
.lang-switch button.active{ background: var(--color-surface); color: var(--color-primary); box-shadow: var(--shadow-card); }

.nav-toggle{
  display:none; width:40px; height:40px; align-items:center; justify-content:center;
  border:1px solid var(--color-border); border-radius: var(--p-radius-sm); background: var(--color-surface);
}
.nav-toggle svg{ width:20px; height:20px; }

@media (max-width: 900px){
  .main-nav{
    position:fixed; inset: var(--header-h) 0 0 0; z-index:850;
    background: var(--color-surface);
    flex-direction:column; align-items:flex-start; gap:2px;
    padding: 20px; transform: translateY(-8px); opacity:0; pointer-events:none;
    transition: opacity var(--p-duration-normal) var(--p-ease), transform var(--p-duration-normal) var(--p-ease);
    overflow-y:auto;
  }
  .main-nav.open{ opacity:1; transform: translateY(0); pointer-events:auto; }
  .nav-link{ width:100%; padding:14px 6px; border-bottom:1px solid var(--color-border); }
  .nav-toggle{ display:flex; }
  .header-cta{ display:none; }
  .nav-cta{ display:flex; width:100%; margin-top:16px; }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{ background: var(--p-gray-900); color: var(--p-gray-300); padding-block: 64px 28px; }
.site-footer a{ color: var(--p-gray-300); }
.site-footer a:hover{ color:#fff; }
.footer-grid{
  display:grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap:36px;
  padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,.1);
}
@media (max-width: 860px){
  .footer-grid{ grid-template-columns: 1fr 1fr; }
  .footer-grid > div:first-child{ grid-column: 1 / -1; }
}
@media (max-width: 560px){
  .footer-grid{ grid-template-columns: 1fr 1fr; gap:28px 20px; }
  .footer-grid > div:first-child,
  .footer-grid > div:last-child{ grid-column: 1 / -1; }
}
.footer-brand{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.footer-brand img{ height:30px; }
.footer-brand span{ font:800 17px/1 var(--font-display); color:#fff; }
.footer-col h5{ color:#fff; font:700 13px/1 var(--font-body); text-transform:uppercase; letter-spacing:.06em; margin-bottom:16px; }
.footer-col ul{ display:flex; flex-direction:column; gap:10px; font-size:14px; }
.footer-contact li{ display:flex; align-items:flex-start; gap:10px; font-size:13.5px; line-height:1.5; }
.footer-contact svg{ width:16px; height:16px; margin-top:2px; color: var(--p-blue-300); flex-shrink:0; }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; gap:16px; padding-top:24px; font-size:12.5px; color: var(--p-gray-500); flex-wrap:wrap; }
.footer-social{ display:flex; gap:10px; }
.footer-social a{
  width:34px; height:34px; border-radius:50%; background: rgba(255,255,255,.06);
  display:flex; align-items:center; justify-content:center;
}
.footer-social svg{ width:16px; height:16px; }

/* ==========================================================================
   Floating controls: scroll-to-top w/ progress ring + Zalo FAB
   ========================================================================== */
.float-stack{ position:fixed; right:20px; bottom:20px; z-index:950; display:flex; flex-direction:column; align-items:center; gap:14px; }

.scroll-top-btn{
  width:52px; height:52px; border-radius:50%; position:relative;
  display:flex; align-items:center; justify-content:center;
  background: conic-gradient(var(--color-primary) calc(var(--scroll-pct, 0) * 1%), var(--color-border) 0);
  opacity:0; transform: scale(.7); pointer-events:none;
  transition: opacity var(--p-duration-normal) var(--p-ease), transform var(--p-duration-normal) var(--p-ease);
  border:none; padding:4px;
}
.scroll-top-btn.visible{ opacity:1; transform:scale(1); pointer-events:auto; }
.scroll-top-btn .inner{
  width:100%; height:100%; border-radius:50%; background: var(--color-surface);
  display:flex; align-items:center; justify-content:center; box-shadow: var(--shadow-card);
}
.scroll-top-btn svg{ width:20px; height:20px; color: var(--color-primary); }

.zalo-fab{
  position:relative; width:56px; height:56px; border-radius:50%;
  background:#fff; box-shadow: 0 10px 28px -8px rgba(0,104,255,.5);
  display:flex; align-items:center; justify-content:center; padding:11px;
  border:none;
}
.zalo-fab img{ width:100%; height:100%; object-fit:contain; }
.zalo-fab .pulse{
  position:absolute; inset:0; border-radius:50%; border:2px solid #0068FF;
  animation: zalo-pulse 2s ease-out infinite;
}
.zalo-fab .pulse:nth-child(2){ animation-delay: .5s; }
@keyframes zalo-pulse{
  0%{ transform:scale(1); opacity:.65; }
  100%{ transform:scale(1.7); opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .zalo-fab .pulse{ animation:none; display:none; }
}
.zalo-tooltip{
  position:absolute; right:calc(100% + 12px); top:50%; transform: translateY(-50%) translateX(6px);
  background: var(--p-gray-900); color:#fff; font:600 12.5px/1 var(--font-body);
  padding:9px 14px; border-radius: var(--p-radius-sm); white-space:nowrap;
  opacity:0; pointer-events:none; transition: opacity var(--p-duration-fast) var(--p-ease), transform var(--p-duration-fast) var(--p-ease);
  box-shadow: var(--shadow-pop);
}
.zalo-tooltip.show{ opacity:1; transform: translateY(-50%) translateX(0); }
.zalo-tooltip::after{
  content:''; position:absolute; left:100%; top:50%; transform: translateY(-50%);
  border:6px solid transparent; border-left-color: var(--p-gray-900);
}

/* ==========================================================================
   Scroll reveal
   ========================================================================== */
[data-reveal]{ opacity:0; will-change: transform, opacity; transition: opacity var(--p-duration-slow) var(--p-ease), transform var(--p-duration-slow) var(--p-ease); }
[data-reveal].is-visible{ opacity:1; transform:none !important; }

[data-reveal="up"]{ transform: translateY(28px); }
[data-reveal="scale"]{ transform: scale(.94); }
[data-reveal="left"]{ transform: translateX(-36px); }
[data-reveal="right"]{ transform: translateX(36px); }
[data-reveal="fade"]{ transform:none; }

[data-reveal-group] [data-reveal]{ transition-delay: calc(var(--reveal-i, 0) * 90ms); }

@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity:1 !important; transform:none !important; transition:none !important; }
}

/* Draw-line timeline path */
.timeline-path{ stroke-dasharray: var(--path-len, 1000); stroke-dashoffset: var(--path-len, 1000); transition: stroke-dashoffset 1.1s var(--p-ease); }
.timeline-path.is-visible{ stroke-dashoffset:0; }

/* ==========================================================================
   CTA banner
   ========================================================================== */
.cta-banner{
  background: var(--gradient-brand-strong); background-size: 200% 200%;
  animation: gradient-drift 12s ease infinite;
  border-radius: var(--p-radius-xl); padding: 56px 40px; text-align:center;
  color:#fff; display:flex; flex-direction:column; align-items:center; gap:18px;
}
@keyframes gradient-drift{
  0%,100%{ background-position: 0% 50%; }
  50%{ background-position: 100% 50%; }
}
@media (prefers-reduced-motion: reduce){ .cta-banner{ animation:none; } }
.cta-banner h2{ color:#fff; font-size: clamp(24px,3.4vw,34px); max-width:620px; }
.cta-banner p{ color: rgba(255,255,255,.88); max-width:520px; }
.cta-banner .btn-primary{ background:#fff; color: var(--color-primary); box-shadow:0 14px 30px -10px rgba(0,0,0,.25); }
.cta-banner .btn-ghost{ background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.35); color:#fff; }

/* ==========================================================================
   Utility grids
   ========================================================================== */
.grid{ display:grid; gap:20px; }
.grid-2{ grid-template-columns: repeat(2,1fr); }
.grid-3{ grid-template-columns: repeat(3,1fr); }
.grid-4{ grid-template-columns: repeat(4,1fr); }
@media (max-width: 980px){ .grid-4{ grid-template-columns: repeat(2,1fr); } .grid-3{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 620px){ .grid-2, .grid-3, .grid-4{ grid-template-columns: 1fr; } }