html { scroll-behavior: smooth; }
body { font-family:'Inter',sans-serif; color:#0F172A; background:#fff; }
.mono { font-family:'JetBrains Mono',monospace; letter-spacing:-0.01em; }

/* ---------- Signature: metal-finish swatches (real plating colors, not decoration) ---------- */
.finish-zinc    { background: linear-gradient(135deg,#EAF0F6 0%,#C4CEDB 42%,#8C99AC 68%,#B9C4D2 100%); }
.finish-nickel  { background: linear-gradient(135deg,#F3F5F8 0%,#D3DAE4 40%,#98A4B5 65%,#DDE3EA 100%); }
.finish-copper  { background: linear-gradient(135deg,#F3C79B 0%,#D98A4B 42%,#9C5423 70%,#C97A3E 100%); }
.finish-tin     { background: linear-gradient(135deg,#E7E9EC 0%,#C4C9D0 40%,#8B9098 68%,#B7BCC3 100%); }
.finish-silver  { background: linear-gradient(135deg,#FBFCFD 0%,#E3E7EB 40%,#B7C0CA 68%,#EDF0F3 100%); }
.finish-gold    { background: linear-gradient(135deg,#F8E2A0 0%,#E4B84A 42%,#A9781A 70%,#EFC968 100%); }

.swatch-sheen{
  position:relative; overflow:hidden;
}
.swatch-sheen::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.55) 48%, transparent 62%);
  transform:translateX(-120%);
  transition:transform .9s ease;
}
.group:hover .swatch-sheen::after{ transform:translateX(120%); }

/* Hero backdrop — circuit / plating-line motif built in CSS/SVG, no stock photography */
.hero-bg{
  background-color:#0B1220;
  background-image:
    radial-gradient(1200px 500px at 82% -10%, rgba(37,99,235,.35), transparent 60%),
    radial-gradient(800px 500px at 10% 110%, rgba(37,99,235,.18), transparent 55%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0px, rgba(255,255,255,.035) 1px, transparent 1px, transparent 64px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0px, rgba(255,255,255,.035) 1px, transparent 1px, transparent 64px);
}

.hero-bg > *{ position:relative; z-index:1; }

.hero-stars{
  position:absolute; inset:0; z-index:0; pointer-events:none;
}

.hero-star{
  position:absolute;
  width:var(--size, 12px);
  height:var(--size, 12px);
  background:radial-gradient(circle, #fff 0%, #93B4F5 55%, transparent 78%);
  clip-path:polygon(50% 0%, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0% 50%, 39% 39%);
  opacity:0;
  filter:drop-shadow(0 0 6px rgba(147,180,245,.8));
  animation:hero-twinkle 4.5s ease-in-out infinite;
  animation-delay:var(--delay, 0s);
}

@keyframes hero-twinkle{
  0%, 100%{ opacity:0; transform:scale(.4) rotate(0deg); }
  50%{ opacity:1; transform:scale(1) rotate(90deg); }
}

@media (prefers-reduced-motion: reduce){
  .hero-star{ animation:none; opacity:.5; }
}

.fade-up{ opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease; }
.fade-up.in{ opacity:1; transform:translateY(0); }

.nav-link{ position:relative; }
.nav-link::after{
  content:''; position:absolute; left:0; bottom:-4px; width:0; height:1px; background:#2563EB;
  transition:width .25s ease;
}
.nav-link:hover::after{ width:100%; }

#site-header{ color:#fff; transition:color .3s ease; }
#site-header #brand-sub{ color:rgba(255,255,255,.55); transition:color .3s ease; }
#site-header .nav-link{ color:rgba(255,255,255,.88); transition:color .3s ease; }
#site-header #lang-switch{ color:rgba(255,255,255,.55); transition:color .3s ease; }
#site-header #lang-switch:hover{ color:#fff; }
#site-header #menu-btn span{ background:#fff; transition:background-color .3s ease; }

#site-header.header-light{ color:#0F172A; }
#site-header.header-light #brand-sub{ color:#64748B; }
#site-header.header-light .nav-link{ color:#0F172A; }
#site-header.header-light #lang-switch{ color:#64748B; }
#site-header.header-light #lang-switch:hover{ color:#0F172A; }
#site-header.header-light #menu-btn span{ background:#0F172A; }

.mobile-menu-panel{
  position:relative;
  background:rgba(11,18,32,.72);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  border-top:1px solid rgba(255,255,255,.08);
  box-shadow:0 20px 40px -20px rgba(0,0,0,.35);
  transition:background-color .35s ease, border-color .35s ease;
}
.mobile-menu-panel::before{
  content:'';
  position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, transparent, #2563EB, transparent);
  opacity:.6;
}

.mobile-menu-link{
  position:relative;
  color:rgba(255,255,255,.88);
  padding:.85rem .25rem;
  border-radius:.6rem;
  overflow:hidden;
  opacity:0; transform:translateY(8px);
  transition:opacity .35s ease, transform .35s ease, color .25s ease;
}
.mobile-menu-link span{ position:relative; z-index:1; }
.mobile-menu-link::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(37,99,235,.18), rgba(37,99,235,0));
  transform:translateX(-100%);
  transition:transform .3s ease;
}
.mobile-menu-link:active::after,
.mobile-menu-link:hover::after{ transform:translateX(0); }
.mobile-menu-link:hover{ color:#93B4F5; }

#mobile-menu:not(.hidden) .mobile-menu-link{ opacity:1; transform:translateY(0); }
#mobile-menu:not(.hidden) .mobile-menu-link:nth-child(1){ transition-delay:.03s; }
#mobile-menu:not(.hidden) .mobile-menu-link:nth-child(2){ transition-delay:.07s; }
#mobile-menu:not(.hidden) .mobile-menu-link:nth-child(3){ transition-delay:.11s; }
#mobile-menu:not(.hidden) .mobile-menu-link:nth-child(4){ transition-delay:.15s; }
#mobile-menu:not(.hidden) .mobile-menu-link:nth-child(5){ transition-delay:.19s; }
#mobile-menu:not(.hidden) .mobile-menu-link:nth-child(6){ transition-delay:.23s; }

#site-header.header-light .mobile-menu-panel{
  background:rgba(255,255,255,.82);
  border-top-color:rgba(15,23,42,.06);
}
#site-header.header-light .mobile-menu-link{ color:#0F172A; }
#site-header.header-light .mobile-menu-link:hover{ color:#2563EB; }
#site-header.header-light .mobile-menu-link::after{
  background:linear-gradient(90deg, rgba(37,99,235,.08), rgba(37,99,235,0));
}
#site-header.header-light .mobile-menu-cta{
  color:#fff !important;
  background:#0F172A;
}
#site-header.header-light .mobile-menu-cta:hover{ background:#2563EB; }

.num-rule{ counter-reset:step; }
.num-rule .step{ counter-increment:step; }
.num-rule .step .num::before{ content: counter(step, decimal-leading-zero); }

.process-track{ position:relative; }
.process-track::before{
  content:''; position:absolute; top:16px; left:0; right:0; height:1px;
  background:linear-gradient(90deg,#2563EB 0%,#93B4F5 100%);
  transform-origin:left center; transform:scaleX(0);
  transition:transform 1.15s cubic-bezier(.65,0,.35,1);
}
.process-track.in::before{ transform:scaleX(1); }
.process-track.fade-up{ opacity:1; transform:none; } /* row itself stays put; steps stagger individually */

.num-rule .step{ opacity:0; transform:translateY(14px); transition:opacity .55s ease, transform .55s ease; }
.num-rule.in .step{ opacity:1; transform:translateY(0); }
.num-rule.in .step:nth-child(1){ transition-delay:.05s; }
.num-rule.in .step:nth-child(2){ transition-delay:.15s; }
.num-rule.in .step:nth-child(3){ transition-delay:.25s; }
.num-rule.in .step:nth-child(4){ transition-delay:.35s; }
.num-rule.in .step:nth-child(5){ transition-delay:.45s; }
.num-rule.in .step:nth-child(6){ transition-delay:.55s; }
.num-rule.in .step:nth-child(7){ transition-delay:.65s; }

.step > div:last-child{ transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease; }
.step:hover > div:last-child{ transform:translateY(-5px); box-shadow:0 14px 28px -10px rgba(15,23,42,.14); border-color:#2563EB66; }

@keyframes step-chase{
  0%   { box-shadow:0 0 0 0 rgba(37,99,235,0);   border-color:#E5E7EB; background-color:#fff; }
  3%   { box-shadow:0 0 0 0 rgba(37,99,235,.38); border-color:#2563EB; background-color:#EFF4FF; }
  8%   { box-shadow:0 0 0 8px rgba(37,99,235,0); border-color:#2563EB; background-color:#EFF4FF; }
  13%  { box-shadow:0 0 0 0 rgba(37,99,235,0);   border-color:#E5E7EB; background-color:#fff; }
  100% { box-shadow:0 0 0 0 rgba(37,99,235,0);   border-color:#E5E7EB; background-color:#fff; }
}
::selection{ background:#2563EB; color:#fff; }

@media (prefers-reduced-motion: reduce){
  .fade-up{ transition:none; opacity:1; transform:none; }
  .swatch-sheen::after{ transition:none; }
}

@keyframes metal-sheen-loop{
  0%   { transform: translateX(-130%); }
  40%, 100% { transform: translateX(130%); }
}
.stat-card{ position:relative; overflow:hidden; }
.stat-card::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(115deg, transparent 35%, rgba(255,255,255,.6) 50%, transparent 65%);
  transform:translateX(-130%);
  animation: metal-sheen-loop 3.4s ease-in-out infinite;
  pointer-events:none;
}
.stat-card:nth-child(1)::after{ animation-delay: 0s; }
.stat-card:nth-child(2)::after{ animation-delay: .85s; }
.stat-card:nth-child(3)::after{ animation-delay: 1.7s; }
.stat-card:nth-child(4)::after{ animation-delay: 2.55s; }

@media (prefers-reduced-motion: reduce){
  .stat-card::after{ animation:none; }
}

.hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

.tab-item{ position:relative; background:#fff; }
.tab-item::before{
  content:'';
  position:absolute; left:0; top:0; bottom:0; width:3px;
  background:#2563EB;
  transform:scaleY(0);
  transition:transform .25s ease;
}
.tab-item:hover{ background:#F8FAFC; }
.tab-item.active{ background:#EFF4FF; }
.tab-item.active::before{ transform:scaleY(1); }
.tab-item.active span:first-child{ color:#2563EB; }

/* Lớp ghost phía sau — lệch nhẹ, gợi chiều sâu như lớp phủ chồng lớp */
.stack-ghost{
  transform: translate(10px, 10px);
  opacity: .5;
}

.tab-panel{
  opacity: 0;
  transform: scale(1.015);
  transition: opacity .5s ease, transform .5s ease;
  pointer-events: none;
}
.tab-panel.active{
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

/* Dải màu trên panel đổi theo tab đang chọn — đồng bộ token finish- có sẵn */
.finish-accent{ background: linear-gradient(135deg,#EAF0F6 0%,#C4CEDB 42%,#8C99AC 68%,#B9C4D2 100%); transition: opacity .3s ease; }

@media (prefers-reduced-motion: reduce){
  .tab-panel{ transition: opacity .3s ease; transform:none; }
}

.tabs-dark .tab-item{ position:relative; background:transparent; color:rgba(255,255,255,.75); }
.tabs-dark .tab-item::before{
  content:'';
  position:absolute; left:0; top:0; bottom:0; width:3px;
  background:#2563EB;
  transform:scaleY(0);
  transition:transform .25s ease;
}
.tabs-dark .tab-item:hover{ background:rgba(255,255,255,.04); color:#fff; }
.tabs-dark .tab-item.active{ background:rgba(255,255,255,.07); color:#fff; }
.tabs-dark .tab-item.active::before{ transform:scaleY(1); }

.tab-panel{
  opacity: 0;
  transform: scale(1.015);
  transition: opacity .5s ease, transform .5s ease;
}
.tab-panel.active{
  opacity: 1;
  transform: scale(1);
}

@media (prefers-reduced-motion: reduce){
  .tab-panel{ transition: opacity .3s ease; transform:none; }
}

.gallery-slide{ opacity:0; transition: opacity .5s ease; pointer-events: none; }
.gallery-slide.active{ opacity:1; pointer-events: auto; }
.gallery-dot{
  width:6px; height:6px; border-radius:999px;
  background:rgba(255,255,255,.35);
  transition: width .25s ease, background-color .25s ease;
  cursor:pointer;
}
.gallery-dot.active{ width:18px; background:#fff; }
.gallery-dot{
  position: relative;
  width:6px; height:6px; border-radius:999px;
  background:rgba(255,255,255,.5);
  border: 1px solid rgba(255,255,255,.3);
  transition: width .25s ease, background-color .25s ease, border-color .25s ease;
  cursor:pointer;
}
.gallery-dot::before{
  content:'';
  position:absolute; inset:-8px;
}
.gallery-dot.active{
  width:18px;
  background:#fff;
  border-color:#fff;
}

.photo-trio > div{ opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease; }
.photo-trio.in > div:nth-child(1){ transition-delay:0s; }
.photo-trio.in > div:nth-child(2){ transition-delay:.12s; }
.photo-trio.in > div:nth-child(3){ transition-delay:.24s; }
.photo-trio.in > div{ opacity:1; transform:translateY(0); }

@keyframes marquee-scroll{
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.marquee-track{
  animation: marquee-scroll 22s linear infinite;
}
.marquee-track:hover{
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce){
  .marquee-track{ animation: none; }
}

/* ============ DESKTOP RING ============ */
.process-ring{
  position: relative;
  width: clamp(420px, 44vw, 560px);
  aspect-ratio: 1 / 1;
}

.process-ring__track{
  position: absolute;
  inset: 11%;
  border-radius: 9999px;
  border: 2px dashed #BFDBFE;
}

.process-item{
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);

  width: clamp(96px, 12vw, 128px);
  height: clamp(96px, 12vw, 128px);
  border-radius: 9999px;
  background: #fff;
  border: 1px solid #E5E7EB;
  box-shadow: 0 10px 24px rgba(15,23,42,.07);

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 12px;

  transition: transform .25s ease, box-shadow .25s ease;
}

.process-item:hover{
  transform: translate(-50%, -50%) translateY(-4px);
  box-shadow: 2px 6px 22px rgba(1, 80, 252, 0.2);
  z-index: 2;
  cursor: pointer;
}

.process-icon{
  width: clamp(20px, 2vw, 26px);
  height: clamp(20px, 2vw, 26px);
  margin-bottom: 6px;
}

.process-item h3{
  font-size: clamp(12.5px, 1.05vw, 14px);
  font-weight: 600;
  color: #0F172A;
  line-height: 1.2;
}

.process-item p{
  margin-top: 4px;
  font-size: clamp(10px, .85vw, 11.5px);
  color: #64748B;
  line-height: 1.35;
}

.process-number{
  position: absolute;
  top: 6px;
  left: 6px;
  width: 22px;
  height: 22px;
  border-radius: 9999px;
  background: #2563EB;
  color: #fff;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "JetBrains Mono", monospace;
}

/* ============ MOBILE TIMELINE ============ */
.process-timeline{
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-left: 4px;
}

.process-timeline::before{
  content: "";
  position: absolute;
  left: 21px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: repeating-linear-gradient(to bottom, #BFDBFE 0 6px, transparent 6px 12px);
}

.process-timeline li{
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 16px;
  padding: 12px 16px;
  box-shadow: 0 6px 16px rgba(15,23,42,.05);
}

.process-timeline__num{
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 9999px;
  background: #2563EB;
  color: #fff;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "JetBrains Mono", monospace;
  z-index: 1;
}

.process-timeline__icon{
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.process-timeline h3{
  font-size: 14px;
  font-weight: 600;
  color: #0F172A;
}

.process-timeline p{
  margin-top: 2px;
  font-size: 12px;
  color: #64748B;
  line-height: 1.4;
}

.cta-sheen{ position:relative; overflow:hidden; }
.cta-sheen::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(115deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%);
  transform:translateX(-130%);
  transition:transform .6s ease;
}
.cta-sheen:hover::after{ transform:translateX(130%); }

@media (prefers-reduced-motion: reduce){
  .cta-sheen::after{ transition:none; }
}

.title-line{
  display:block;
  opacity:0;
  transform:translateY(24px);
  transition:opacity .7s ease, transform .7s ease;
}
.title-line:nth-child(2){ transition-delay:.12s; }
.fade-up.in .title-line{ opacity:1; transform:translateY(0); }

.lightbox-overlay{
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(11,18,32,.92);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
}
.lightbox-overlay.active{
  opacity: 1;
  visibility: visible;
}

.lightbox-img-wrap{
  position: relative;
  max-width: 90vw;
  max-height: 86vh;
  transform: scale(.96);
  transition: transform .3s ease;
}
.lightbox-overlay.active .lightbox-img-wrap{
  transform: scale(1);
}

.lightbox-img{
  max-width: 90vw;
  max-height: 86vh;
  width: auto;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.5);
  display: block;
}

.lightbox-close,
.lightbox-nav{
  position: fixed;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  color: #fff;
  width: 44px;
  height: 44px;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color .2s ease, transform .2s ease;
}
.lightbox-close:hover,
.lightbox-nav:hover{
  background: rgba(255,255,255,.18);
}
.lightbox-close{
  top: 24px;
  right: 24px;
}
.lightbox-nav.prev{ left: 24px; top: 50%; transform: translateY(-50%); }
.lightbox-nav.next{ right: 24px; top: 50%; transform: translateY(-50%); }
.lightbox-nav:active{ transform: translateY(-50%) scale(.92); }

.lightbox-counter{
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,.6);
  font-family: "JetBrains Mono", monospace;
  font-size: 12.5px;
  letter-spacing: .04em;
}

[data-lightbox]{
  cursor: zoom-in;
}

@media (max-width: 640px){
  .lightbox-nav{ width: 38px; height: 38px; }
  .lightbox-nav.prev{ left: 10px; }
  .lightbox-nav.next{ right: 10px; }
  .lightbox-close{ top: 14px; right: 14px; }
  .lightbox-img-wrap { max-width: 65vw; max-height: 65vh; }
  .lightbox-img { max-width: 65vw; max-height: 65vh; }
}

.odometer{
  display: inline-flex;
  align-items: baseline;
}

.odometer-digit{
  display: inline-block;
  overflow: hidden;
  height: 1em;
  line-height: 1;
  vertical-align: baseline;
}

.odometer-strip{
  display: flex;
  flex-direction: column;
  transform: translateY(0);
  transition: transform 1.6s cubic-bezier(.22,1,.36,1);
}

.odometer-strip span{
  height: 1em;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.odometer-comma{
  display: inline-block;
}

@media (prefers-reduced-motion: reduce){
  .odometer-strip{ transition: none; }
}