@charset "UTF-8";
/* ═══════════════ TOKENS ═══════════════ */
:root {
  --ink:      rgba(7,20,11,.72);
  --surface:  rgba(10,26,15,.62);
  --card:     rgba(14,36,20,0.58);
  --g0: #16A34A; --g1: #22C55E; --g2: #4ADE80; --g3: #BBF7D0;
  --o0: #C2410C; --o1: #EA580C; --o2: #F97316;
  --txt: #DCFCE7; --muted: #94A3B8;
  --border: rgba(34,197,94,0.14);
  --glow-g: rgba(34,197,94,0.35);
  --glow-o: rgba(234,88,12,0.35);
  /* Khớp chiều cao nav: logo 48px + padding dọc ~1.8rem + chừa mép — tránh nội dung (breadcrumb) chui dưới nav / nút CTA */
  --nav-offset: calc(48px + 2rem + 18px);
}
html[data-theme="light"]{
  --ink:#f6fbf8;
  --surface:#ffffff;
  --card:rgba(230,245,236,0.9);
  --txt:#0f172a;
  --muted:#475569;
  --border:rgba(22,163,74,.22);
  --glow-g:rgba(34,197,94,.2);
  --glow-o:rgba(249,115,22,.2);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;font-size:16px;zoom:90%;}
body{
  font-family:'Montserrat',sans-serif;
  background-color:var(--ink);
  color:#fff;
  overflow-x:hidden;
  line-height:1.6;
}
html:not([data-theme="light"]) body{
  background-image:url('/imgs/test.png');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  background-attachment:fixed;
}
body *{font-family:'Montserrat',sans-serif !important;}
html[data-theme="light"] body{color:#0f172a;}
h1,h2,h3,h4,h5,h6,.sec-h,.sol-hero-h,.sol-how-h,.sol-fleet-h,.sol-easy-h,.products-toolbar__title,.pd-title,.wc-ttl,.v-ttl,.pd-spec__title,.pd-description__title,.pd-related__title{
  font-family:'Montserrat',sans-serif;
}
html[data-theme="light"] h1,
html[data-theme="light"] h2,
html[data-theme="light"] h3,
html[data-theme="light"] h4,
html[data-theme="light"] h5,
html[data-theme="light"] h6,
html[data-theme="light"] .sec-h,
html[data-theme="light"] .products-toolbar__title,
html[data-theme="light"] .pd-title,
html[data-theme="light"] .wc-ttl,
html[data-theme="light"] .v-ttl,
html[data-theme="light"] .pd-related__title{color:#0f172a;}
body:not(.home-page){padding-top:var(--nav-offset);}
body.compact-top-spacing{padding-top:calc(var(--nav-offset) - 12px);}
body.full-viewport-intro main > section:first-of-type{min-height:calc(100vh - var(--nav-offset));min-height:calc(100svh - var(--nav-offset));}
body.sdgs-page main > section:first-of-type{
  min-height:calc(100vh - var(--nav-offset) + 2.75rem);
  min-height:calc(100svh - var(--nav-offset) + 2.75rem);
  padding-top:3.1rem;
  display:flex;
  align-items:flex-start;
}
body.sdgs-page main > section:first-of-type > .ct{
  width:100%;
}
@media (min-width:1024px){
  body.sdgs-page .why-sec{
    padding-top:1.15rem;
    padding-bottom:1.15rem;
  }
  body.sdgs-page .why-grid--sdgs{
    margin-top:1.35rem !important;
    max-width:860px;
    margin-left:auto;
    margin-right:auto;
    row-gap:.75rem;
    column-gap:.45rem;
    grid-template-columns:repeat(8,minmax(0,1fr));
  }
  body.sdgs-page .why-grid--sdgs > .sdg-goal{
    grid-column:span 2;
    justify-self:center;
  }
  body.sdgs-page .why-grid--sdgs > .sdg-goal:nth-child(1){grid-column:1 / span 2;}
  body.sdgs-page .why-grid--sdgs > .sdg-goal:nth-child(2){grid-column:3 / span 2;}
  body.sdgs-page .why-grid--sdgs > .sdg-goal:nth-child(3){grid-column:5 / span 2;}
  body.sdgs-page .why-grid--sdgs > .sdg-goal:nth-child(4){grid-column:7 / span 2;}
  body.sdgs-page .why-grid--sdgs > .sdg-goal:nth-child(5){grid-column:2 / span 2;}
  body.sdgs-page .why-grid--sdgs > .sdg-goal:nth-child(6){grid-column:4 / span 2;}
  body.sdgs-page .why-grid--sdgs > .sdg-goal:nth-child(7){grid-column:6 / span 2;}
  body.sdgs-page .why-grid--sdgs > .sdg-goal:nth-child(n+8){
    grid-column:auto;
  }
  body.sdgs-page .why-grid--sdgs .sdg-goal{
    margin:0;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  body.sdgs-page .why-grid--sdgs .sdg-goal__img{
    width:100%;
    max-width:190px;
    max-height:none;
  }
}
body.products-hub-page main > section#products{
  min-height:calc(100vh - var(--nav-offset));
  min-height:calc(100svh - var(--nav-offset));
  display:flex;
  flex-direction:column;
  align-items:stretch;
  text-align:left;
  padding-top:1rem;
}
body.products-category-page main > section#products{
  min-height:100vh;
  min-height:100svh;
  padding-top:1.2rem;
  display:flex;
  flex-direction:column;
}
body.products-category-page .products-catalog{
  flex:1 1 auto;
  min-height:0;
  padding-bottom:1.1rem;
}
body.products-category-page .products-catalog__inner{
  flex:1 1 auto;
  min-height:0;
  padding-top:.6rem;
  display:flex;
  flex-direction:column;
}
body.products-category-page .products-panel{
  flex:1 1 auto;
  min-height:0;
  display:flex;
  flex-direction:column;
}
body.products-category-page .products-layout{
  flex:1 1 auto;
  min-height:0;
}
body.products-category-page .products-main{
  overflow:visible;
  min-height:0;
}
body.products-category-page .products-sidebar{
  top:.65rem;
  max-height:calc(100vh - var(--nav-offset) - 5.1rem);
  max-height:calc(100svh - var(--nav-offset) - 5.1rem);
}
@media(max-width:900px){
  body.products-category-page .products-panel{
    min-height:auto;
    max-height:none;
    display:block;
  }
  body.products-category-page .products-main{
    overflow:visible;
  }
}
::selection{background:var(--g0);color:#fff;}

/* ═══════════════ SCROLLBAR ═══════════════ */
::-webkit-scrollbar{width:4px;}
::-webkit-scrollbar-track{background:var(--ink);}
::-webkit-scrollbar-thumb{background:var(--g0);border-radius:2px;}

/* ═══════════════ PROGRESS BAR ═══════════════ */
#progress{position:fixed;top:0;left:0;height:2px;background:linear-gradient(90deg,var(--g0),var(--g2),var(--o1));z-index:9998;width:0%;transition:width 0.1s;}

/* ═══════════════ NAV ═══════════════ */
/* Header cố định — không dùng backdrop-filter (gây mờ toàn màn + lỗi position:fixed cho panel menu trên mobile) */
#nav{
  position:fixed;
  top:2px;
  left:0;
  right:0;
  z-index:10000;
  padding:.9rem 3rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:nowrap;
  gap:.75rem;
  background:rgba(4,12,6,.85);
  border-bottom:1px solid rgba(255,255,255,.1);
  transition:background .3s,border-color .3s;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
body.home-page #nav.scrolled{
  background:rgba(4,12,6,.92) !important;
  border-bottom:1px solid rgba(255,255,255,.14) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
html[data-theme="light"] body.home-page #nav.scrolled{
  background:rgba(255,255,255,.96) !important;
  border-bottom:1px solid rgba(15,23,42,.1) !important;
}
body:not(.home-page) #nav{
  background:rgba(4,12,6,.97);
}
body.nav-open #nav{
  background:rgba(4,12,6,.96) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
html[data-theme="light"] body.nav-open #nav{
  background:rgba(255,255,255,.98) !important;
  border-bottom:1px solid rgba(15,23,42,.08) !important;
}
.n-logo{display:flex;align-items:center;gap:.8rem;text-decoration:none;}
.n-logo-img{height:48px;width:auto;display:block;}
.n-logo-img--for-light-bg{display:none;}
html[data-theme="light"] .n-logo-img--for-dark-bg{display:none;}
html[data-theme="light"] .n-logo-img--for-light-bg{display:block;}
.n-hex{width:40px;height:40px;background:linear-gradient(135deg,var(--o1),var(--o2));clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);display:flex;align-items:center;justify-content:center;font-weight:900;font-family:'Space Grotesk',sans-serif;font-size:1.05rem;color:#fff;box-shadow:0 0 20px var(--glow-o);}
.n-brand{font-family:'Space Grotesk',sans-serif;font-weight:800;font-size:1.1rem;letter-spacing:.02em;color:#fff;}
.n-brand small{display:block;font-size:.6rem;color:var(--g1);font-weight:500;letter-spacing:.15em;text-transform:uppercase;}
.n-links{display:flex;gap:2.2rem;list-style:none;}
.n-links a{color:var(--txt);text-decoration:none;font-size:.94rem;font-weight:500;letter-spacing:.01em;position:relative;padding-bottom:2px;transition:color .2s;font-family:'Poppins',Arial,Helvetica,sans-serif;}
.n-links a::after{content:'';position:absolute;bottom:0;left:0;width:0;height:1px;background:var(--g1);transition:width .25s;}
.n-links a:hover{color:var(--g2);}
.n-links a:hover::after{width:100%;}
.nav-sheet{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-width:0;
  position:static;
  margin:0;
  padding:0;
  background:transparent;
  border:none;
}
.nav-sheet__foot{display:none;}
.nav-backdrop{display:none;}
.nav-burger{display:none;}
.n-cta--desktop{display:inline-block;}
.n-right{display:flex;align-items:center;gap:.75rem;}
.theme-btn{
  width:38px;height:38px;border-radius:999px;
  border:1px solid var(--border);background:rgba(6,15,8,.5);
  color:var(--txt);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  transition:transform .2s,border-color .2s,background .2s,color .2s;
}
.theme-btn:hover{transform:translateY(-1px);border-color:var(--g1);color:var(--g2);background:rgba(34,197,94,.1);}
.theme-btn__icon{font-size:1rem;line-height:1;}
html[data-theme="light"] .theme-btn{background:rgba(255,255,255,.82);color:#0f172a;}
.lang-btn{background:none;border:1px solid var(--border);color:var(--txt);padding:.35rem .9rem;border-radius:20px;cursor:pointer;font-size:.76rem;font-weight:600;letter-spacing:.04em;transition:all .2s;font-family:inherit;}
.lang-btn:hover{border-color:var(--g1);color:var(--g1);}
.lang-dropdown{position:relative;}
.lang-btn{display:flex;align-items:center;gap:.45rem;min-width:82px;justify-content:center;}
.lang-flag{width:18px;height:18px;border-radius:50%;object-fit:cover;border:1px solid rgba(255,255,255,.35);}
.lang-menu{position:absolute;top:110%;right:0;background:rgba(4,12,6,.98);border:1px solid var(--border);border-radius:10px;min-width:110px;padding:.35rem;display:none;z-index:10001;backdrop-filter:blur(10px);}
.lang-menu.show{display:block;}
.lang-item{display:flex;align-items:center;gap:.55rem;color:var(--txt);text-decoration:none;font-size:.8rem;font-weight:600;padding:.45rem .55rem;border-radius:8px;}
.lang-item:hover{background:rgba(34,197,94,.12);color:var(--g2);}
.cta-btn{background:linear-gradient(135deg,var(--g0),var(--g1));color:#fff;border:none;padding:.5rem 1.4rem;border-radius:7px;cursor:pointer;font-weight:700;font-size:.84rem;text-decoration:none;transition:all .25s;display:inline-block;box-shadow:0 2px 12px var(--glow-g);}
.cta-btn:hover{transform:translateY(-2px);box-shadow:0 6px 24px var(--glow-g);}
html[data-theme="light"] #nav{background:rgba(255,255,255,.92);border-bottom:1px solid rgba(15,23,42,.08);}
html[data-theme="light"] body:not(.home-page) #nav{background:rgba(255,255,255,.95);}
html[data-theme="light"] .n-links a{color:#0f172a;}
html[data-theme="light"] .n-links a:hover{color:var(--g0);}
html[data-theme="light"] .products-panel,
html[data-theme="light"] .vm-card,
html[data-theme="light"] .wc,
html[data-theme="light"] .valc__face,
html[data-theme="light"] .rcard,
html[data-theme="light"] .pcard,
html[data-theme="light"] .pd-spec-card,
html[data-theme="light"] .pd-gallery__description{box-shadow:0 6px 18px rgba(15,23,42,.08);}
html[data-theme="light"] .vm-txt,
html[data-theme="light"] .wc-desc,
html[data-theme="light"] .v-desc,
html[data-theme="light"] .pd-gallery__description-body,
html[data-theme="light"] .pd-categories,
html[data-theme="light"] .ci-val,
html[data-theme="light"] .ft-copy{color:#334155;}
html[data-theme="light"] .pd-breadcrumb__current,
html[data-theme="light"] .pd-spec-cell__value,
html[data-theme="light"] .pcard__title,
html[data-theme="light"] .rcard__name{color:#0f172a;}
html[data-theme="light"] .vm-txt strong{color:#0f172a;}
html[data-theme="light"] .vm-ico__plate img{filter:none;}
html[data-theme="light"] .pcard__spec-v{color:#334155;}
html[data-theme="light"] .lang-menu{
  background:rgba(255,255,255,.98);
  border:1px solid rgba(15,23,42,.12);
  box-shadow:0 12px 40px rgba(15,23,42,.12);
}
html[data-theme="light"] .lang-item{color:#0f172a;}
html[data-theme="light"] .lang-item:hover{background:rgba(34,197,94,.12);color:var(--g0);}
html[data-theme="light"] .lang-flag{border-color:rgba(15,23,42,.2);}
html[data-theme="light"] .fi,
html[data-theme="light"] .fta{
  background:rgba(255,255,255,.92);
  border:1px solid rgba(15,23,42,.12);
  color:#0f172a;
}
html[data-theme="light"] .fi::placeholder,
html[data-theme="light"] .fta::placeholder{color:#64748b;}
html[data-theme="light"] footer{
  background:linear-gradient(180deg,rgba(241,250,245,.98) 0%,rgba(246,251,248,.88) 55%,transparent 100%);
  border-top:1px solid rgba(15,23,42,.1);
  box-shadow:0 -20px 48px -12px rgba(15,23,42,.14);
}
html[data-theme="light"] footer::after{
  background:linear-gradient(180deg,rgba(15,23,42,.07) 0%,transparent 58%);
}
html[data-theme="light"] .ft-dna__move{color:#0f172a;text-shadow:none;}
html[data-theme="light"] .ft-dna__sep{color:rgba(15,23,42,.45);}
html[data-theme="light"] .sol-hero-sec{color:#0f172a;}
html[data-theme="light"] .sol-hero-h{color:#0f172a;}
html[data-theme="light"] .products-panel{
  background:linear-gradient(165deg,rgba(255,255,255,.96) 0%,rgba(236,252,245,.94) 100%);
  box-shadow:0 12px 36px rgba(15,23,42,.08);
}
html[data-theme="light"] .prod-hub-search__input{
  background:rgba(255,255,255,.95);
  border:1px solid rgba(15,23,42,.12);
  color:#0f172a;
}
html[data-theme="light"] .products-toolbar__sort{
  background:rgba(255,255,255,.88);
  border:1px solid rgba(15,23,42,.1);
}
html[data-theme="light"] .products-toolbar__select{
  background:#fff;
  border:1px solid rgba(15,23,42,.12);
  color:#0f172a;
}
html[data-theme="light"] .products-toolbar__search-input{
  background:rgba(255,255,255,.95);
  border:1px solid rgba(15,23,42,.12);
  color:#0f172a;
}
html[data-theme="light"] .pcard--empty{
  background:rgba(15,23,42,.04);
  border-color:rgba(15,23,42,.14);
}

/* ═══════════════ HERO ═══════════════ */
.hero{min-height:100vh;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;}
/* video background */
.hero-video{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;z-index:0;}
.hero-video-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(4,12,6,0.4);z-index:0;}
.hero-bg{position:absolute;inset:0;
  background:
    radial-gradient(ellipse 70% 55% at 50% 105%,rgba(22,163,74,.18) 0,transparent 65%),
    radial-gradient(ellipse 45% 35% at 88% 12%,rgba(234,88,12,.08) 0,transparent 60%),
    radial-gradient(ellipse 35% 28% at 12% 80%,rgba(22,163,74,.1) 0,transparent 55%),
    linear-gradient(160deg,#040C06 0%,#071409 45%,#040C06 100%);}
.hero-grid{position:absolute;inset:0;
  background-image:linear-gradient(rgba(34,197,94,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(34,197,94,.045) 1px,transparent 1px);
  background-size:72px 72px;animation:gridDrift 24s linear infinite;z-index:1;}
@keyframes gridDrift{0%{background-position:0 0}100%{background-position:72px 72px}}
.ring{position:absolute;border-radius:50%;border:1px solid rgba(34,197,94,.08);animation:pulse-ring 6s ease-out infinite;z-index:1;}
.ring:nth-child(1){width:500px;height:500px;top:50%;left:50%;transform:translate(-50%,-50%);animation-delay:0s;}
.ring:nth-child(2){width:750px;height:750px;top:50%;left:50%;transform:translate(-50%,-50%);animation-delay:2s;}
.ring:nth-child(3){width:1000px;height:1000px;top:50%;left:50%;transform:translate(-50%,-50%);animation-delay:4s;}
@keyframes pulse-ring{0%{opacity:.4;transform:translate(-50%,-50%) scale(.85)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.15)}}
.ptcls{position:absolute;inset:0;pointer-events:none;z-index:1;}
.p{position:absolute;border-radius:50%;opacity:0;animation:floatUp linear infinite;}
@keyframes floatUp{0%{opacity:0;transform:translateY(0) scale(1)}15%{opacity:.9}85%{opacity:.2}100%{opacity:0;transform:translateY(-85vh) scale(0)}}
.scanline{position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.03) 2px,rgba(0,0,0,.03) 4px);pointer-events:none;z-index:1;}

.hero-content{position:relative;z-index:10;text-align:center;max-width:980px;padding:2rem;padding-top:2rem;}
.hero-badge{display:inline-flex;align-items:center;gap:.55rem;background:rgba(22,163,74,.07);border:1px solid rgba(22,163,74,.22);padding:.4rem 1.2rem;border-radius:30px;font-size:.72rem;color:var(--g2);margin-bottom:1.2rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;animation:fadeUp .8s ease both;}
.badge-dot{width:6px;height:6px;background:var(--g1);border-radius:50%;box-shadow:0 0 6px var(--g1);animation:blink 1.8s ease-in-out infinite;}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes fadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}

.hero-dna{
  font-family:'Playfair Display','Times New Roman',serif;
  font-size:clamp(3.4rem,11vw,7.6rem);
  font-weight:700;
  line-height:.94;
  letter-spacing:.02em;
  margin-bottom:.25rem;
  animation:fadeUp .85s .1s ease both;
  text-transform:uppercase;
}
.w-move{color:#fff;}
.w-green{color:var(--g1);text-shadow:0 0 40px rgba(34,197,94,.4),0 0 80px rgba(34,197,94,.15);}
.w-fwd{color:var(--o1);text-shadow:0 0 40px var(--glow-o);}
.dna-dot{color:rgba(34,197,94,.4);font-size:.7em;}

.hero-tag{font-size:clamp(.8rem,1.8vw,.95rem);color:var(--g1);font-weight:600;letter-spacing:.25em;text-transform:uppercase;margin-bottom:1rem;animation:fadeUp .85s .25s ease both;}
.hero-sub{font-size:clamp(.95rem,2.2vw,1.15rem);color:var(--txt);max-width:700px;margin:0 auto 1.8rem;line-height:1.78;animation:fadeUp .85s .4s ease both;}
/* Hero vẫn là nền video tối: ở light mode không dùng --txt (chữ đen) cho đoạn mô tả */
html[data-theme="light"] body.home-page .hero-sub{
  color:rgba(240,253,250,.95);
  text-shadow:0 1px 4px rgba(0,0,0,.55),0 0 28px rgba(0,0,0,.35);
}
html[data-theme="light"] body.home-page .scroll-cue{color:rgba(226,232,240,.92);}
html[data-theme="light"] body.home-page .scroll-arr{
  border-right-color:rgba(167,243,208,.85);
  border-bottom-color:rgba(167,243,208,.85);
}
.hero-btns{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;animation:fadeUp .85s .55s ease both;}
.btn-glow{background:linear-gradient(135deg,var(--o1),var(--o2));color:#fff;padding:.9rem 2.4rem;border-radius:8px;text-decoration:none;font-weight:700;font-size:.97rem;transition:all .3s;box-shadow:0 4px 20px var(--glow-o);border:none;cursor:pointer;font-family:inherit;position:relative;overflow:hidden;}
.btn-glow::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.15),transparent);opacity:0;transition:opacity .3s;}
.btn-glow:hover{transform:translateY(-3px);box-shadow:0 12px 36px var(--glow-o);}
.btn-glow:hover::before{opacity:1;}
.btn-ghost{background:rgba(34,197,94,.06);color:var(--g1);padding:.9rem 2.4rem;border-radius:8px;text-decoration:none;font-weight:700;font-size:.97rem;border:1px solid rgba(34,197,94,.28);transition:all .3s;}
.btn-ghost:hover{background:rgba(34,197,94,.14);border-color:var(--g1);transform:translateY(-3px);box-shadow:0 8px 28px rgba(34,197,94,.18);}
.scroll-cue{position:absolute;bottom:2.5rem;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:.5rem;color:var(--muted);font-size:.65rem;letter-spacing:.12em;text-transform:uppercase;animation:bob 2.5s ease-in-out infinite;}
@keyframes bob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(9px)}}
.scroll-arr{width:20px;height:20px;border-right:1.5px solid rgba(34,197,94,.45);border-bottom:1.5px solid rgba(34,197,94,.45);transform:rotate(45deg);}

/* ═══════════════ MARQUEE ═══════════════ */
.marquee-wrap{padding:1.2rem 0;background:rgba(22,163,74,.04);border-top:1px solid var(--border);border-bottom:1px solid var(--border);overflow:hidden;}
.marquee-track{display:flex;gap:0;animation:marquee 28s linear infinite;width:max-content;}
.marquee-track:hover{animation-play-state:paused;}
.marquee-item{padding:.25rem 2.5rem;font-size:.8rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);white-space:nowrap;display:flex;align-items:center;gap:.75rem;}
.marquee-item .dot{width:4px;height:4px;background:var(--o1);border-radius:50%;}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ═══════════════ STATS ═══════════════ */
.stats-sec{padding:4.5rem 2.5rem;background:var(--surface);}
.stats-inner{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;}
.stat-card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:2rem 1.5rem;text-align:center;backdrop-filter:blur(12px);transition:all .3s;position:relative;overflow:hidden;}
.stat-card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(34,197,94,.04) 0,transparent 60%);pointer-events:none;}
.stat-card::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--g0),transparent);transform:scaleX(0);transition:transform .4s;z-index:2;pointer-events:none;}
.stat-card:hover{border-color:rgba(34,197,94,.3);transform:translateY(-5px);box-shadow:0 16px 48px rgba(34,197,94,.08);}
.stat-card:hover::after{transform:scaleX(1);}
.stat-val{font-family:'Space Grotesk',sans-serif;font-size:2.8rem;font-weight:900;color:var(--g1);line-height:1;display:flex;align-items:flex-end;justify-content:center;gap:.1rem;}
.stat-val sup{font-size:1.1rem;color:var(--o1);font-weight:700;margin-bottom:.4rem;}
.stat-lbl{font-size:.9rem;color:var(--txt);margin-top:.6rem;line-height:1.5;font-weight:600;}

/* ═══════════════ COOP / LOGO STRIP (HOME) ═══════════════ */
.coop-sec{padding:5rem 2.5rem 5.5rem;background:var(--ink);border-top:1px solid var(--border);position:relative;overflow:hidden;}
.coop-sec::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:min(900px,90%);height:1px;background:linear-gradient(90deg,transparent,rgba(34,197,94,.35),transparent);pointer-events:none;}
.coop-sub{margin-bottom:2rem;}
.coop-divider{height:1px;margin:3.25rem auto 3.25rem;max-width:920px;background:linear-gradient(90deg,transparent,rgba(34,197,94,.22),transparent);}
.coop-grid{display:grid;gap:1.25rem;}
.coop-grid--3{grid-template-columns:repeat(3,1fr);}
.coop-grid--2{grid-template-columns:repeat(2,1fr);max-width:820px;margin-left:auto;margin-right:auto;}
.coop-logo-card{
  background:var(--card);border:1px solid var(--border);border-radius:16px;padding:0;
  display:flex;align-items:center;justify-content:center;backdrop-filter:blur(12px);
  transition:border-color .3s,box-shadow .3s,transform .3s;position:relative;overflow:hidden;
}
.coop-logo-card::before{content:'';position:absolute;inset:0;background:linear-gradient(145deg,rgba(34,197,94,.06) 0,transparent 55%);pointer-events:none;}
.coop-logo-card::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--g0),transparent);transform:scaleX(0);transition:transform .4s;z-index:1;pointer-events:none;}
.coop-logo-card:hover{border-color:rgba(34,197,94,.28);box-shadow:0 14px 40px rgba(34,197,94,.1);transform:translateY(-4px);}
.coop-logo-card:hover::after{transform:scaleX(1);}
.coop-logo-slot{display:flex;align-items:center;justify-content:center;min-height:108px;width:100%;padding:1.35rem 1.5rem;position:relative;z-index:2;}
.coop-logo-slot img{max-width:100%;max-height:52px;width:auto;height:auto;object-fit:contain;filter:brightness(1.02);transition:transform .35s ease;}
.coop-logo-card:hover .coop-logo-slot img{transform:scale(1.04);}
.coop-logo-slot--boost{min-height:132px;}
.coop-logo-slot--boost img{max-height:82px;transform:scale(1.48);}
.coop-logo-card:hover .coop-logo-slot--boost img{transform:scale(1.56);}
@media (max-width:900px){
  .coop-grid--3{grid-template-columns:1fr;}
  .coop-grid--2{grid-template-columns:1fr;max-width:none;}
}
@media (min-width:901px) and (max-width:1100px){
  .coop-grid--3{grid-template-columns:repeat(3,1fr);gap:1rem;}
}

/* ═══════════════ SECTIONS ═══════════════ */
section{padding:5.5rem 2.5rem;}
.ct{max-width:1100px;margin:0 auto;}
.sec-tag{display:inline-flex;align-items:center;gap:.5rem;background:rgba(34,197,94,.06);border:1px solid rgba(34,197,94,.2);color:var(--g1);padding:.3rem 1rem;border-radius:30px;font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-bottom:1.1rem;}
.sec-tag-dot{width:5px;height:5px;background:var(--g1);border-radius:50%;box-shadow:0 0 5px var(--g1);}
h2.sec-h{font-family:Arial,Helvetica,sans-serif;font-size:clamp(1.6rem,3.6vw,2.48rem);font-weight:800;line-height:1.1;margin-bottom:1.1rem;letter-spacing:-.02em;}
.hl-g{color:var(--g1);}
.hl-o{color:var(--o1);}
.sec-p{color:var(--txt);line-height:1.82;max-width:660px;font-size:1rem;}
.grad-text{background:linear-gradient(135deg,var(--g2),var(--g1));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}

/* ═══════════════ VM CARDS ═══════════════ */
.vm-sec{background:var(--ink);}
/* About page: căn section đầu gần nav giống Why Us */
.vm-sec#about{
  padding-top:3.2rem;
}
@media (min-width:1024px){
  body.full-viewport-intro main > .vm-sec#about{
    min-height:calc(100vh - var(--nav-offset));
    min-height:calc(100svh - var(--nav-offset));
    padding-top:1rem;
    padding-bottom:1rem;
    display:flex;
    align-items:flex-start;
  }
  body.full-viewport-intro main > .vm-sec#about > .ct{
    width:100%;
  }
}
.vm-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.75rem;margin-top:3rem;}
.vm-card{
  background:var(--card);border:1px solid var(--border);border-radius:20px;padding:2.75rem;position:relative;overflow:hidden;backdrop-filter:blur(16px);
  transform:translate3d(0,0,0);
  transition:
    transform .55s cubic-bezier(.22,1,.36,1),
    box-shadow .55s cubic-bezier(.22,1,.36,1),
    border-color .45s ease;
  box-shadow:0 4px 24px rgba(0,0,0,.12);
}
.vm-card:hover{
  border-color:rgba(34,197,94,.35);
  transform:translate3d(0,-8px,0);
  box-shadow:0 22px 56px rgba(34,197,94,.12),0 8px 24px rgba(0,0,0,.18),inset 0 -2px 0 0 rgba(34,197,94,.5);
}
.vm-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--g0),var(--g2));transform-origin:0 50%;transition:opacity .45s ease;}
.vm-card::after{
  content:'';position:absolute;top:-60px;right:-60px;width:180px;height:180px;
  background:radial-gradient(circle,rgba(34,197,94,.07) 0,transparent 70%);
  pointer-events:none;
  opacity:.85;
  transition:opacity .55s cubic-bezier(.22,1,.36,1),transform .55s cubic-bezier(.22,1,.36,1);
}
.vm-card:hover::after{opacity:1;transform:scale(1.05);}
@media (prefers-reduced-motion:reduce){
  .vm-card,.vm-card::after,.vm-ico__plate{transition-duration:.01ms !important;}
  .vm-card:hover,.vm-card:hover .vm-ico__plate{transform:none !important;}
}
.vm-ico{margin-bottom:1rem;display:flex;align-items:center;justify-content:flex-start;}
.vm-ico__plate{
  display:inline-flex;align-items:center;justify-content:center;
  width:72px;height:72px;border-radius:18px;flex-shrink:0;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 6px 18px rgba(0,0,0,.22);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  transform:translate3d(0,0,0);
  transition:transform .5s cubic-bezier(.22,1,.36,1),box-shadow .5s ease,border-color .4s ease;
}
.vm-card:hover .vm-ico__plate{transform:translate3d(0,-3px,0);}
.vm-ico__plate img{
  width:56px;
  height:56px;
  object-fit:contain;
  display:block;
  filter:brightness(0) invert(1);
}
.vm-lbl{font-size:clamp(.95rem,1.1vw,1.08rem);font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--g1);margin-bottom:.75rem;}
.vm-txt{font-size:1.02rem;line-height:1.78;color:var(--txt);}
.vm-txt strong{color:#fff;}

/* ═══════════════ ABOUT PRODUCT RANGE ═══════════════ */
.about-range-sec{
  background:var(--surface);
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.about-range-grid{
  margin-top:2.1rem;
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  grid-template-rows:repeat(2,minmax(0,1fr));
  gap:1rem;
}
.about-range-card{
  grid-column:span 2;
  background:linear-gradient(165deg,rgba(10,28,14,.88),rgba(4,12,8,.92));
  border:1px solid rgba(34,197,94,.2);
  border-radius:0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-height:100%;
  position:relative;
  transition:transform .24s ease,border-color .24s ease,box-shadow .24s ease;
}
.about-range-card::after{
  content:'';
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:2px;
  background:linear-gradient(90deg,transparent,var(--g0),transparent);
  transform:scaleX(0);
  transition:transform .35s ease;
  pointer-events:none;
}
.about-range-card:hover{
  transform:translateY(-5px);
  border-color:rgba(34,197,94,.3);
  box-shadow:0 16px 48px rgba(34,197,94,.08);
}
.about-range-card:hover::after{
  transform:scaleX(1);
}
.about-range-card--wide{
  grid-column:span 4;
  grid-row:1 / span 2;
}
.about-range-card--stack-top{
  grid-column:5 / span 2;
  grid-row:1;
}
.about-range-card--stack-bottom{
  grid-column:5 / span 2;
  grid-row:2;
}
.about-range-card__media{
  margin:0;
  padding:.65rem .75rem 0;
  background:linear-gradient(180deg,rgba(34,197,94,.08),rgba(4,12,8,0));
}
.about-range-card__media img{
  width:100%;
  height:auto;
  aspect-ratio:16/9;
  object-fit:cover;
  display:block;
}
.about-range-card__body{
  padding:1rem 1.05rem 1.15rem;
  display:flex;
  flex-direction:column;
  gap:.5rem;
}
.about-range-card__title{
  margin:0;
  color:#fff;
  font-size:1.05rem;
  font-weight:800;
  letter-spacing:-.01em;
  line-height:1.25;
}
.about-range-card__desc{
  margin:0;
  color:var(--txt);
  font-size:.9rem;
  line-height:1.62;
}
.about-range-card--accent{
  border-color:rgba(234,88,12,.34);
}
.about-range-card--accent .about-range-card__media{
  background:linear-gradient(180deg,rgba(234,88,12,.08),rgba(4,12,8,0));
}
.about-range-card--accent::after{
  background:linear-gradient(90deg,transparent,var(--o1),transparent);
}
@media (max-width:1024px){
  .about-range-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:none;
  }
  .about-range-card,
  .about-range-card--wide,
  .about-range-card--stack-top,
  .about-range-card--stack-bottom{
    grid-column:span 1;
    grid-row:auto;
  }
}
@media (max-width:640px){
  .about-range-grid{
    grid-template-columns:1fr;
    gap:.85rem;
  }
  .about-range-card__media{
    padding:.5rem .55rem 0;
  }
  .about-range-card__body{
    padding:.85rem .9rem .95rem;
  }
  .about-range-card__title{
    font-size:.98rem;
  }
  .about-range-card__desc{
    font-size:.86rem;
  }
}

/* ═══════════════ PRODUCT TABS ═══════════════ */
.prod-sec{background:var(--surface);}
.tab-row{display:flex;gap:.375rem;margin-top:2.2rem;background:rgba(10,28,14,.8);padding:.45rem;border-radius:12px;width:fit-content;border:1px solid var(--border);backdrop-filter:blur(10px);}
.tab{padding:.55rem 1.6rem;border-radius:8px;border:none;background:none;color:var(--muted);font-weight:600;cursor:pointer;transition:all .25s;font-size:.85rem;font-family:inherit;white-space:nowrap;}
.tab.on{background:linear-gradient(135deg,var(--g0),var(--g1));color:#fff;box-shadow:0 2px 12px rgba(34,197,94,.3);}
.tab:hover:not(.on){color:var(--g1);}
.panel{display:none;}
.panel.on{display:block;}
.v-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem;margin-top:1.75rem;}

.vc{background:var(--card);border:1px solid var(--border);border-radius:18px;padding:2rem;backdrop-filter:blur(16px);transition:all .35s;position:relative;overflow:hidden;}
.vc::before{content:'';position:absolute;inset:-1px;border-radius:18px;background:linear-gradient(135deg,rgba(34,197,94,.18),transparent 50%,rgba(234,88,12,.12));opacity:0;transition:opacity .35s;z-index:-1;}
.vc::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--g0),transparent);transform:scaleX(0);transition:transform .4s;z-index:2;pointer-events:none;}
.vc:hover{border-color:rgba(34,197,94,.3);transform:translateY(-5px);box-shadow:0 16px 48px rgba(34,197,94,.08);}
.vc:hover::before{opacity:1;}
.vc:hover::after{transform:scaleX(1);}
.brand{display:inline-flex;align-items:center;gap:.4rem;padding:.22rem .75rem;border-radius:20px;font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:1rem;background:rgba(234,88,12,.1);border:1px solid rgba(234,88,12,.25);color:var(--o2);}
.brand.g{background:rgba(34,197,94,.08);border-color:rgba(34,197,94,.25);color:var(--g1);}
.v-ico{font-size:2.6rem;margin-bottom:.85rem;display:block;}
.v-name{font-family:'Space Grotesk',sans-serif;font-size:1.28rem;font-weight:700;margin-bottom:.3rem;}
.v-sub{font-size:.78rem;color:var(--g0);margin-bottom:1.3rem;font-weight:500;}
.specs{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;}
.sp{background:rgba(34,197,94,.04);border:1px solid rgba(34,197,94,.08);border-radius:9px;padding:.65rem .4rem;text-align:center;transition:all .2s;}
.sp:hover{background:rgba(34,197,94,.1);border-color:rgba(34,197,94,.25);}
.sp-v{font-family:'Space Grotesk',sans-serif;font-size:1.02rem;font-weight:700;color:var(--g2);display:block;}
.sp-k{font-size:.63rem;color:var(--muted);display:block;margin-top:.15rem;line-height:1.3;}

.cg{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem;margin-top:1.75rem;}
.cc{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:1.5rem 1.1rem;text-align:center;backdrop-filter:blur(12px);transition:all .3s;position:relative;overflow:hidden;}
.cc::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--g0),transparent);transform:scaleX(0);transition:transform .4s;pointer-events:none;}
.cc:hover{border-color:rgba(34,197,94,.3);transform:translateY(-5px);box-shadow:0 16px 48px rgba(34,197,94,.08);}
.cc:hover::after{transform:scaleX(1);}
.cc-ico{font-size:1.8rem;display:block;margin-bottom:.65rem;}
.cc-pwr{font-family:'Space Grotesk',sans-serif;font-size:1.55rem;font-weight:800;color:var(--o2);}
.cc-type{font-size:.7rem;color:var(--muted);margin:.2rem 0;}
.cc-model{font-size:.65rem;color:var(--g0);font-weight:600;margin-top:.35rem;}
.cc-ff{display:flex;flex-direction:column;gap:.22rem;margin-top:.75rem;}
.cc-f{font-size:.67rem;color:var(--txt);background:rgba(34,197,94,.04);padding:.2rem .45rem;border-radius:4px;}
.cc.ultra{border-color:rgba(234,88,12,.2);}
.cc.ultra .cc-pwr{color:var(--o1);text-shadow:0 0 20px var(--glow-o);}

/* ═══════════════ SOLUTIONS PAGE (hero) ═══════════════ */
.sol-hero-sec{
  background:var(--ink);color:#fff;
  min-height:calc(100vh - var(--nav-offset));
  min-height:calc(100dvh - var(--nav-offset));
  min-height:calc(100svh - var(--nav-offset));
  display:flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  padding:clamp(1.5rem,4vw,3rem) clamp(1.25rem,5vw,4rem);
}
.sol-hero-inner{
  width:100%;
  max-width:min(1400px,100%);
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);
  gap:clamp(2rem,4.5vw,3.75rem);
  align-items:center;
}
.sol-hero-h{font-family:'Space Grotesk',sans-serif;font-size:clamp(1.85rem,3.5vw,2.8rem);font-weight:800;line-height:1.14;margin:0 0 1.25rem;letter-spacing:-.02em;color:#fff;}
.sol-hero-h .hl-g{color:var(--g1);}
.sol-hero-p{font-size:1rem;line-height:1.78;color:var(--txt);max-width:36rem;margin:0 0 1.75rem;}
.sol-hero-cta{display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--g0),var(--g1));color:#fff;padding:.9rem 1.85rem;border-radius:999px;text-decoration:none;font-weight:700;font-size:.96rem;box-shadow:0 8px 28px var(--glow-g);transition:transform .25s,box-shadow .25s;font-family:inherit;}
.sol-hero-cta:hover{transform:translateY(-2px);box-shadow:0 12px 36px rgba(34,197,94,.45);color:#fff;}
.sol-hero-media{position:relative;}
.sol-hero-img{width:100%;height:auto;display:block;border-radius:1.35rem;border:1px solid var(--border);box-shadow:0 28px 64px rgba(0,0,0,.45),0 0 40px rgba(34,197,94,.12);}
@media (max-width:900px){
  .sol-hero-inner{grid-template-columns:1fr;gap:2.25rem;}
  .sol-hero-media{order:-1;}
}

/* ═══════════════ SOLUTIONS — how it looks ═══════════════ */
.sol-how-sec{
  background:var(--surface);
  color:#fff;
  padding:clamp(3.5rem,7vw,5.5rem) clamp(1.25rem,5vw,4rem);
  width:100%;
  box-sizing:border-box;
}
.sol-how-inner{max-width:min(1100px,100%);margin:0 auto;text-align:center;}
.sol-how-h{
  font-family:'Space Grotesk',sans-serif;
  font-size:clamp(1.65rem,3.2vw,2.35rem);
  font-weight:800;
  line-height:1.15;
  letter-spacing:-.02em;
  color:#fff;
  margin:0 0 .85rem;
}
.sol-how-sub{
  font-size:1rem;
  line-height:1.65;
  color:var(--muted);
  max-width:36rem;
  margin:0 auto 2.25rem;
}
.sol-how-card{
  background:#fff;
  border-radius:1.25rem;
  padding:clamp(.75rem,2vw,1.25rem);
  border:1px solid rgba(34,197,94,.12);
  box-shadow:0 24px 56px rgba(0,0,0,.35),0 0 0 1px rgba(255,255,255,.04);
  margin:0 auto;
  max-width:100%;
}
.sol-how-img{
  width:100%;
  height:auto;
  display:block;
  border-radius:.65rem;
}
html[data-theme="light"] .sol-how-card{
  border-color:rgba(15,23,42,.1);
  box-shadow:0 16px 48px rgba(15,23,42,.1),0 0 0 1px rgba(255,255,255,.8);
}
.sol-how-tags{
  list-style:none;
  margin:2rem 0 0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.55rem .65rem;
}
.sol-how-tag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.48rem 1.1rem;
  border-radius:999px;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.03em;
  color:#fff;
  background:linear-gradient(135deg,var(--g0),var(--g1));
  box-shadow:0 4px 16px rgba(34,197,94,.22);
}

/* ═══════════════ SOLUTIONS — electrify fleet ═══════════════ */
.sol-fleet-sec{
  background:var(--ink);
  color:#fff;
  padding:clamp(3.5rem,7vw,5.5rem) clamp(1.25rem,5vw,4rem);
  width:100%;
  box-sizing:border-box;
}
.sol-fleet-inner{
  max-width:min(1400px,100%);
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(2rem,4vw,3.5rem);
  align-items:center;
}
.sol-fleet-h{
  font-family:'Space Grotesk',sans-serif;
  font-size:clamp(1.65rem,3vw,2.45rem);
  font-weight:800;
  line-height:1.12;
  letter-spacing:-.02em;
  color:#fff;
  margin:0 0 1rem;
}
.sol-fleet-h .hl-g{color:var(--g1);}
.sol-fleet-intro{
  font-size:1rem;
  line-height:1.78;
  color:var(--txt);
  margin:0 0 1.75rem;
  max-width:38rem;
}
.sol-fleet-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:1.15rem;
}
.sol-fleet-list li{
  position:relative;
  padding-left:1.35rem;
}
.sol-fleet-list li::before{
  content:'';
  position:absolute;
  left:0;
  top:.55rem;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--g1);
  box-shadow:0 0 10px rgba(34,197,94,.55);
  flex-shrink:0;
}
.sol-fleet-li-title{
  display:block;
  font-weight:700;
  font-size:.95rem;
  color:var(--g1);
  margin-bottom:.2rem;
}
.sol-fleet-li-desc{
  display:block;
  font-size:.88rem;
  line-height:1.68;
  color:var(--txt);
}
.sol-fleet-media{position:relative;}
.sol-fleet-img{
  width:100%;
  height:auto;
  display:block;
  border-radius:1.25rem;
  border:1px solid var(--border);
  box-shadow:0 28px 64px rgba(0,0,0,.45),0 0 48px rgba(34,197,94,.1);
}

/* ═══════════════ SOLUTIONS — split (install / charging) ═══════════════ */
.sol-split-sec{
  color:#fff;
  padding:clamp(3.5rem,7vw,5.5rem) clamp(1.25rem,5vw,4rem);
  width:100%;
  box-sizing:border-box;
}
.sol-split-sec--surface{background:var(--surface);}
.sol-split-sec--ink{background:var(--ink);}
.sol-split-inner{
  max-width:min(1400px,100%);
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem,4vw,3.5rem);
  align-items:center;
}
.sol-split-media{position:relative;}

/* ═══════════════ SOLUTIONS — sustainability made easy ═══════════════ */
.sol-easy-sec{
  background:var(--surface);
  color:#fff;
  padding:clamp(3.5rem,7vw,5.5rem) clamp(1.25rem,5vw,4rem);
  width:100%;
  box-sizing:border-box;
}
.sol-easy-inner{
  max-width:min(1120px,100%);
  margin:0 auto;
  text-align:center;
}
.sol-easy-h{
  font-family:'Space Grotesk',sans-serif;
  font-size:clamp(1.55rem,2.8vw,2.15rem);
  font-weight:800;
  line-height:1.18;
  letter-spacing:-.02em;
  color:#fff;
  margin:0 auto 1rem;
  max-width:40rem;
}
.sol-easy-h .hl-g{color:var(--g1);}
.sol-easy-sub{
  font-size:1rem;
  line-height:1.7;
  color:var(--muted);
  margin:0 auto 2.5rem;
  max-width:36rem;
}
.sol-easy-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.35rem;
  align-items:stretch;
  text-align:left;
}
.sol-easy-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:18px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  height:100%;
  backdrop-filter:blur(12px);
  transition:border-color .25s,box-shadow .25s,transform .25s;
}
.sol-easy-card:hover{
  border-color:rgba(34,197,94,.28);
  box-shadow:0 16px 40px rgba(0,0,0,.25);
  transform:translateY(-3px);
}
.sol-easy-card__media{
  position:relative;
  aspect-ratio:4/3;
  background:rgba(4,12,8,.5);
}
.sol-easy-card__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.sol-easy-card__body{
  flex:1;
  padding:1.1rem 1.15rem 1.25rem;
  background:linear-gradient(180deg,rgba(254,215,170,.14),rgba(251,191,136,.08));
  border-top:1px solid rgba(251,191,136,.18);
}
.sol-easy-card__text{
  margin:0;
  font-size:.92rem;
  line-height:1.58;
  color:var(--txt);
  font-weight:500;
}
.sol-easy-cta-wrap{margin-top:2.5rem;}
.sol-easy-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,var(--g0),var(--g1));
  color:#fff;
  padding:.9rem 2.1rem;
  border-radius:10px;
  text-decoration:none;
  font-weight:700;
  font-size:.96rem;
  font-family:inherit;
  box-shadow:0 8px 28px var(--glow-g);
  transition:transform .25s,box-shadow .25s;
}
.sol-easy-cta:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 36px rgba(34,197,94,.4);
  color:#fff;
}
@media (max-width:900px){
  .sol-easy-grid{grid-template-columns:1fr;max-width:420px;margin-left:auto;margin-right:auto;}
}

/* ═══════════════ WHY ═══════════════ */
.why-sec{background:var(--surface);}
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:3rem;}
.why-split{
  display:grid;
  grid-template-columns:minmax(340px,1.08fr) minmax(0,1fr);
  gap:1rem;
  align-items:stretch;
  margin-top:1rem;
}
.why-media{
  margin:0;
  height:100%;
  min-height:clamp(360px,58vh,620px);
  border-radius:20px;
  overflow:hidden;
  border:1px solid var(--border);
  box-shadow:0 18px 52px rgba(0,0,0,.28);
  background:#0b1510;
}
.why-media img{
  display:block;
  width:100%;
  height:100%;
  max-height:none;
  object-fit:cover;
}
.why-content{
  min-width:0;
  display:flex;
  align-items:flex-start;
}
.why-content .why-grid{
  width:100%;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.78rem;
  margin-top:0;
  align-content:start;
}
.why-content .wc{
  padding:1.05rem 1rem;
  border-radius:13px;
  min-height:176px;
}
.why-content .wc-ico svg{
  width:31px;
  height:31px;
}
.why-content .wc-ttl{
  font-size:1.06rem;
  margin-bottom:.28rem;
  line-height:1.28;
}
.why-content .wc-desc{
  font-size:.92rem;
  line-height:1.48;
  color:#f3f4f6;
}
.why-grid--sdgs{
  grid-template-columns:repeat(4,minmax(0,1fr));
  row-gap:1.25rem;
  column-gap:.35rem;
}
.sdg-goal{
  margin:0;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  transition:transform .26s ease,filter .26s ease;
}
.sdg-goal__img{
  width:100%;
  height:auto;
  max-width:190px;
  max-height:none;
  aspect-ratio:1;
  object-fit:contain;
  border-radius:10px;
  display:block;
  box-shadow:0 8px 24px rgba(0,0,0,.2);
  transition:transform .28s cubic-bezier(.22,1,.36,1),box-shadow .28s ease,filter .28s ease;
}
body.sdgs-page .sdg-goal:hover,
body.sdgs-page .sdg-goal:focus-within{
  transform:translateY(-4px);
}
body.sdgs-page .sdg-goal:hover .sdg-goal__img,
body.sdgs-page .sdg-goal:focus-within .sdg-goal__img{
  transform:scale(1.035);
  box-shadow:0 16px 34px rgba(0,0,0,.34),0 0 0 1px rgba(255,255,255,.14);
  filter:saturate(1.06) brightness(1.02);
}
@media (prefers-reduced-motion:reduce){
  .sdg-goal,
  .sdg-goal__img{
    transition:none;
  }
  body.sdgs-page .sdg-goal:hover,
  body.sdgs-page .sdg-goal:focus-within{
    transform:none;
  }
  body.sdgs-page .sdg-goal:hover .sdg-goal__img,
  body.sdgs-page .sdg-goal:focus-within .sdg-goal__img{
    transform:none;
  }
}
.wc{background:var(--card);border:1px solid var(--border);border-radius:18px;padding:2rem;backdrop-filter:blur(12px);transition:all .3s;position:relative;overflow:hidden;}
.wc::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--g0),transparent);transform:scaleX(0);transition:transform .4s;}
.wc:hover{transform:translateY(-5px);border-color:rgba(34,197,94,.3);box-shadow:0 16px 48px rgba(34,197,94,.08);}
.wc:hover::after{transform:scaleX(1);}
.wc-ico{font-size:0;line-height:0;margin-bottom:.9rem;display:flex;align-items:center;justify-content:flex-start;}
.wc-ico svg{width:44px;height:44px;color:rgba(255,255,255,.92);flex-shrink:0;display:block;}
.wc-ttl{font-weight:700;font-size:1.02rem;margin-bottom:.45rem;color:var(--g1);}
.wc-desc{font-size:.84rem;color:var(--txt);line-height:1.65;}
.sdg-wrap{margin-top:3.5rem;}
.sdg-h{font-size:.68rem;color:var(--muted);font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-bottom:.9rem;}
.sdg-row{display:flex;gap:.6rem;flex-wrap:wrap;}
.sdg-b{background:var(--card);border:1px solid var(--border);border-radius:7px;padding:.38rem .8rem;font-size:.7rem;font-weight:600;color:var(--txt);backdrop-filter:blur(8px);transition:all .2s;}
.sdg-b:hover{border-color:var(--g0);color:var(--g1);}
@media (min-width:1024px){
  body.why-us-page #why{
    min-height:calc(100vh - var(--nav-offset));
    min-height:calc(100svh - var(--nav-offset));
    padding-top:.8rem;
    padding-bottom:.8rem;
    display:flex;
    align-items:stretch;
  }
  body.why-us-page #why .ct{
    width:100%;
    display:flex;
    flex-direction:column;
    min-height:100%;
  }
  body.why-us-page #why .sec-tag{
    align-self:flex-start;
    width:auto;
  }
  body.why-us-page #why .why-split{
    flex:1;
    min-height:0;
  }
}
@media (max-width:1023.98px){
  .why-split{
    grid-template-columns:1fr;
    gap:1.1rem;
  }
  .why-media{
    min-height:min(340px,50vh);
  }
  .why-content .why-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:.85rem;
  }
  .why-content .wc-desc{
    font-size:.88rem;
    line-height:1.45;
  }
}
@media (max-width:640px){
  .why-content .why-grid{
    grid-template-columns:1fr;
  }
}

/* ═══════════════ VALUES ═══════════════ */
.val-sec{background:var(--ink);}
.val-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-top:3rem;}
.valc{
  perspective:1200px;
  min-height:300px;
  background:transparent;
  border:none;
  border-radius:0;
}
.valc__inner{
  position:relative;
  width:100%;
  height:100%;
  min-height:300px;
  transform-style:preserve-3d;
  transition:transform .75s cubic-bezier(.22,.61,.36,1);
}
.valc:hover .valc__inner,
.valc:focus-within .valc__inner{
  transform:rotateY(180deg);
}
.valc__face{
  position:absolute;
  inset:0;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:0;
  display:flex;
  flex-direction:column;
}
.valc__face--front{
  background:linear-gradient(165deg,rgba(10,28,14,.9),rgba(4,12,8,.92));
}
.valc__face--front img{
  width:100%;
  height:100%;
  min-height:240px;
  object-fit:cover;
  display:block;
  flex:1;
}
.valc__front-title{
  padding:.8rem .95rem .9rem;
  color:#fff;
  font-weight:700;
  font-size:.95rem;
  line-height:1.3;
  background:linear-gradient(180deg,rgba(10,28,14,.86),rgba(4,12,8,.95));
  border-top:1px solid rgba(255,255,255,.08);
}
.valc__face--back{
  transform:rotateY(180deg);
  justify-content:center;
  gap:.6rem;
  padding:1.15rem 1.1rem;
  background:linear-gradient(165deg,rgba(10,28,14,.95),rgba(4,12,8,.98));
  box-shadow:0 16px 48px rgba(34,197,94,.08);
}
.valc__face--back::after{
  content:'';
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  height:2px;
  background:linear-gradient(90deg,transparent,var(--g0),transparent);
  pointer-events:none;
}
.v-ttl{font-weight:700;font-size:1.14rem;margin-bottom:.42rem;color:var(--g1);}
.v-desc{font-size:1.02rem;color:#fff;line-height:1.72;}
@media (hover:none){
  .valc{
    perspective:none;
    min-height:auto;
  }
  .valc__inner{
    min-height:auto;
    transform:none !important;
    display:flex;
    flex-direction:column;
    gap:.65rem;
  }
  .valc__face{
    position:relative;
    transform:none !important;
    min-height:auto;
  }
  .valc__face--front img{
    min-height:190px;
  }
  .valc__face--back{
    padding:.95rem .95rem 1rem;
  }
}
/* Why Us: tag + heading hai section (Why + Core Values) */
body.why-us-page #why .sec-tag,
body.why-us-page .val-sec .sec-tag{
  font-size:.76rem;
  padding:.34rem 1.05rem;
}
body.why-us-page #why .sec-h,
body.why-us-page .val-sec .sec-h{
  font-size:clamp(1.75rem,3.85vw,2.72rem);
}

/* ═══════════════ DISTRIBUTION ═══════════════ */
.dist-sec{background:var(--surface);}
.dist-lay{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center;margin-top:3rem;}
#distribution.dist-sec{padding-top:3.75rem;padding-bottom:4.25rem;}
#distribution .dist-lay{margin-top:0;align-items:start;}
#distribution .dist-sec-tag{margin-bottom:.5rem;}
#distribution .sec-h{margin-top:0;}
@media (min-width:1024px){
  #distribution .dist-copy{margin-top:-.6rem;}
}
.city-grid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-top:1.75rem;}
.city{display:flex;align-items:center;gap:.65rem;background:rgba(34,197,94,.04);border:1px solid rgba(34,197,94,.09);border-radius:9px;padding:.65rem 1rem;font-size:.87rem;font-weight:500;transition:all .25s;cursor:default;}
.city:hover{background:rgba(34,197,94,.1);border-color:rgba(34,197,94,.28);transform:translateX(4px);}
.c-dot{width:8px;height:8px;background:var(--g1);border-radius:50%;flex-shrink:0;box-shadow:0 0 8px var(--g0);animation:pulse-dot 2s ease-in-out infinite;}
@keyframes pulse-dot{0%,100%{box-shadow:0 0 8px var(--g0)}50%{box-shadow:0 0 16px var(--g1),0 0 28px rgba(34,197,94,.45)}}
.map-box{display:flex;align-items:center;justify-content:center;background:var(--card);border:1px solid var(--border);border-radius:22px;padding:1.75rem 1.5rem 2rem;backdrop-filter:blur(16px);min-height:min(520px,90vh);}
.map-box--bare{
  background:transparent;
  border:none;
  box-shadow:none;
  backdrop-filter:none;
  padding:0;
  min-height:unset;
  align-items:flex-start;
  justify-content:center;
}
/* Network page safety: keep nav fixed and prevent map overflow */
body.network-page #nav{position:fixed!important;top:0;left:0;right:0;}
body.network-page #distribution{overflow-x:clip;}
body.network-page #distribution .ct{overflow-x:clip;}
/* —— Network map: chấm + panel —— Chỉ fade opacity trên .vn-pin__popover (vào/ra cùng một rule). */
.vn-map{position:relative;width:100%;max-width:420px;margin:0 auto;line-height:0;overflow:visible;}
.vn-map__img{
  display:block;
  width:100%;
  height:auto;
  vertical-align:middle;
  border-radius:0;
  box-shadow:none;
}
#distribution .vn-map__img{
  border-radius:20px;
  border:1px solid rgba(34,197,94,.22);
  box-shadow:
    0 14px 44px rgba(0,0,0,.3),
    inset 0 0 0 1px rgba(255,255,255,.06);
}
.vn-map__pins{position:absolute;inset:0;pointer-events:auto;overflow:visible;}
.vn-pin{
  position:absolute;
  pointer-events:none;
  transform:translate(-50%,-50%);
  z-index:2;
  display:inline-block;
}
.vn-pin:hover,.vn-pin:focus-within{z-index:6;}
.vn-pin__hit{
  display:block;
  width:clamp(30px,8vw,48px);
  height:clamp(30px,8vw,48px);
  margin:0;
  padding:0;
  border:none;
  border-radius:50%;
  cursor:pointer;
  background:transparent;
  touch-action:manipulation;
  pointer-events:auto;
}
.vn-pin__hit:focus-visible{
  outline:2px solid var(--g1);
  outline-offset:4px;
}
.vn-map__pins .vn-pin:hover .vn-pin__hit,
.vn-map__pins .vn-pin:focus-within .vn-pin__hit{
  box-shadow:
    0 0 0 4px rgba(34,197,94,.62),
    0 0 18px rgba(34,197,94,.55);
}
.vn-pin__float{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  display:flex;
  flex-direction:row;
  align-items:center;
  pointer-events:none;
  width:max-content;
  max-width:min(300px,calc(100vw - 2.5rem));
}
.vn-map__pins .vn-pin:hover .vn-pin__float,
.vn-map__pins .vn-pin:focus-within .vn-pin__float{
  pointer-events:auto;
}
.vn-pin__float--right{
  left:100%;
  padding-left:8px;
}
.vn-pin__float--left{
  right:100%;
  left:auto;
  padding-right:8px;
}
/* Fade: chỉ opacity + visibility (không dùng pointer-events trên panel — tránh mất hover / nháy khi fade).
   Đóng: opacity về 0 trước, visibility:hidden sau cùng delay = duration → fade-out thấy đủ. */
.vn-pin__popover{
  width:min(280px,calc(100vw - 4rem));
  opacity:0;
  visibility:hidden;
  transition:opacity .4s ease,visibility 0s linear .4s;
  backface-visibility:hidden;
}
.vn-map__pins .vn-pin:hover .vn-pin__popover,
.vn-map__pins .vn-pin:focus-within .vn-pin__popover{
  opacity:1;
  visibility:visible;
  transition:opacity .4s ease,visibility 0s;
}
.vn-pin__figure{margin:0;width:100%;}
.vn-pin__photo{
  display:block;
  width:100%;
  height:auto;
  max-height:200px;
  object-fit:cover;
  border-radius:12px;
  border:1px solid var(--border);
  box-shadow:0 12px 36px rgba(0,0,0,.4);
  background:rgba(6,15,8,.6);
}
.vn-pin__caption{
  margin:.45rem 0 0;
  padding:.55rem .75rem;
  text-align:center;
  font-size:.84rem;
  font-weight:700;
  color:var(--g2);
  letter-spacing:.02em;
  background:rgba(4,12,8,.68);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(34,197,94,.2);
  border-radius:10px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
@media (prefers-reduced-motion:reduce){
  .vn-pin__popover{transition:none!important;}
  .vn-map__pins .vn-pin:hover .vn-pin__popover,
  .vn-map__pins .vn-pin:focus-within .vn-pin__popover{transition:none!important;}
}

/* ═══════════════ CONTACT ═══════════════ */
.contact-sec{background:var(--ink);padding:5.5rem 2.5rem;}
/* Tag section — cùng nhịp với Why Us / các trang có .sec-tag lớn hơn mặc định */
#contact.contact-sec .sec-tag{
  font-size:.76rem;
  padding:.44rem 1.12rem;
  line-height:1.35;
  min-height:2.05rem;
  box-sizing:border-box;
}
#contact.contact-sec .sec-tag-dot{
  width:6px;
  height:6px;
}
.contact-lay{display:grid;grid-template-columns:1fr 1fr;gap:4rem;margin-top:3rem;}
.ci-list{display:flex;flex-direction:column;gap:1.6rem;}
.ci{display:flex;gap:1rem;align-items:flex-start;}
.ci-ico{width:46px;height:46px;background:rgba(234,88,12,.07);border:1px solid rgba(234,88,12,.18);border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:1.2rem;flex-shrink:0;transition:all .3s;}
.ci:hover .ci-ico{background:rgba(234,88,12,.15);box-shadow:0 0 16px rgba(234,88,12,.2);}
.ci-lbl{font-size:.67rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin-bottom:.3rem;font-weight:700;}
.ci-val{color:#fff;font-weight:500;font-size:.95rem;line-height:1.55;}
.ci-val a{color:inherit;text-decoration:none;}
.ci-val a:hover{text-decoration:underline;}
.form{display:flex;flex-direction:column;gap:1.1rem;}
.fg{display:flex;flex-direction:column;gap:.4rem;}
.fl{font-size:.75rem;color:var(--muted);font-weight:600;letter-spacing:.04em;}
.fi,.fta{background:rgba(10,28,14,.8);border:1px solid var(--border);border-radius:9px;padding:.78rem 1rem;color:#fff;font-size:.9rem;outline:none;font-family:inherit;width:100%;transition:border-color .2s;}
.fi:focus,.fta:focus{border-color:var(--g1);box-shadow:0 0 0 3px rgba(34,197,94,.1);}
.fta{min-height:110px;resize:vertical;}
.fsub{background:linear-gradient(135deg,var(--g0),var(--g1));color:#fff;border:none;padding:.9rem;border-radius:9px;font-weight:700;font-size:.97rem;cursor:pointer;transition:all .3s;font-family:inherit;width:100%;box-shadow:0 2px 14px rgba(34,197,94,.25);}
.fsub:hover{transform:translateY(-2px);box-shadow:0 10px 32px var(--glow-g);}

/* ═══════════════ FOOTER ═══════════════ */
footer{
  position:relative;
  overflow:hidden;
  background:var(--ink);
  border-top:1px solid var(--border);
  padding:3rem 2.5rem;
  text-align:center;
  box-shadow:0 -20px 44px -10px rgba(0,0,0,.55);
}
footer::before{
  content:'';
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  width:min(900px,90%);
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(34,197,94,.35),transparent);
  pointer-events:none;
  z-index:2;
}
footer::after{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:linear-gradient(180deg,rgba(0,0,0,.22) 0%,transparent 42%);
}
footer > *{position:relative;z-index:1;}
.ft-logo{font-family:'Space Grotesk',sans-serif;font-size:1.65rem;font-weight:900;margin-bottom:.35rem;letter-spacing:.02em;}
.ft-logo-img{height:56px;width:auto;display:inline-block;}
.ft-logo-img--for-light-bg{display:none;}
html[data-theme="light"] .ft-logo-img--for-dark-bg{display:none;}
html[data-theme="light"] .ft-logo-img--for-light-bg{display:inline-block;}
.ft-dna{
  font-size:.85rem;
  font-weight:700;
  letter-spacing:.22em;
  margin-bottom:1.6rem;
  text-transform:uppercase;
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  flex-wrap:wrap;
  justify-content:center;
}
.ft-dna__move{color:#fff;}
.ft-dna__green{color:var(--g1);}
.ft-dna__forward{color:var(--o2);}
.ft-dna__sep{color:rgba(255,255,255,.6);}
.ft-dna__move,
.ft-dna__green,
.ft-dna__forward{
  transition:text-shadow .25s ease, filter .25s ease;
}
.ft-dna__move{
  text-shadow:0 0 10px rgba(255,255,255,.2),0 0 18px rgba(255,255,255,.12);
}
.ft-dna__green{
  text-shadow:0 0 10px rgba(34,197,94,.45),0 0 20px rgba(34,197,94,.22);
}
.ft-dna__forward{
  text-shadow:0 0 10px rgba(249,115,22,.4),0 0 20px rgba(249,115,22,.2);
}
.ft-dna:hover .ft-dna__move,
.ft-dna:hover .ft-dna__green,
.ft-dna:hover .ft-dna__forward{
  filter:brightness(1.08);
}
.ft-nav{display:flex;gap:2rem;justify-content:center;list-style:none;margin-bottom:1.5rem;flex-wrap:wrap;}
.ft-nav a{color:var(--muted);text-decoration:none;font-size:.84rem;transition:color .2s;}
.ft-nav a:hover{color:var(--g1);}
.ft-copy{color:var(--muted);font-size:.75rem;line-height:1.7;}
.float-cta{position:fixed;bottom:2rem;right:2rem;background:linear-gradient(135deg,var(--g0),var(--g1));color:#fff;border:none;width:52px;height:52px;border-radius:50%;cursor:pointer;font-size:1.2rem;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px var(--glow-g);z-index:900;transition:all .3s;text-decoration:none;opacity:0;pointer-events:none;}
.float-cta.show{opacity:1;pointer-events:all;}
.float-cta:hover{transform:scale(1.12) translateY(-2px);box-shadow:0 8px 30px var(--glow-g);}

/* ═══════════════ REVEAL ═══════════════ */
.rv{opacity:0;transform:translateY(30px);transition:opacity .7s ease,transform .7s ease;}
.rv.in{opacity:1;transform:translateY(0);}
.d1{transition-delay:.1s!important;}.d2{transition-delay:.2s!important;}.d3{transition-delay:.3s!important;}.d4{transition-delay:.4s!important;}

/* ═══════════════ LANGUAGE ═══════════════ */
.vi{display:none!important;}
body.vn .vi{display:revert!important;}
body.vn .en{display:none!important;}

/* ═══════════════ PRODUCTS CATALOG — layout catalog chuyên nghiệp ═══════════════ */
section#products{
  padding-top:3.5rem;
  padding-bottom:0;
  background:var(--surface);
}
/* Hub: ép text-align trái; .sec-tag mặc định inline-flex dễ bị căn giữa như chữ inline */
section#products.prod-sec--hub{
  text-align:left;
}
/* Hub chọn danh mục (/products không query) — card nhỏ gọn, nền xanh đậm giữ như catalog */
.prod-sec--hub{
  padding-top:1.4rem !important;
}
.prod-sec--hub .prod-hub-head__hint{margin-top:.85rem;margin-bottom:0;font-size:.88rem;line-height:1.55;color:var(--muted);max-width:min(520px,100%);}
.products-catalog--hub{
  padding-top:.15rem;
  padding-bottom:1.4rem;
  border-top:1px solid var(--border);
}
body.products-hub-page .products-catalog--hub{
  flex:1 1 auto;
  min-height:0;
  display:flex;
  flex-direction:column;
}
body.products-hub-page .products-catalog--hub .products-catalog__inner{
  flex:1 1 auto;
  min-height:0;
  display:flex;
  flex-direction:column;
}
body.products-hub-page .prod-cat-hub{
  flex:1 1 auto;
  min-height:0;
}
.prod-cat-hub__grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.8rem 1rem;
  max-width:min(1140px,100%);
  margin:0 auto;
}
body.products-hub-page .prod-cat-hub__grid{
  height:100%;
  align-content:stretch;
}
.prod-cat-card{
  position:relative;display:block;border-radius:17px;overflow:hidden;
  width:100%;
  aspect-ratio:1.58/1;
  min-height:170px;
  max-height:230px;
  text-decoration:none;color:#fff;
  border:1px solid rgba(34,197,94,.14);
  transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;
}
.products-hub-page .prod-cat-card{
  opacity:0;
  animation-duration:.62s;
  animation-timing-function:cubic-bezier(.22,1,.36,1);
  animation-fill-mode:forwards;
}
.products-hub-page .prod-cat-hub__grid .prod-cat-card:nth-child(-n+3){
  transform:translateX(-28px) scale(.985);
  animation-name:prodCardInFromLeft;
}
.products-hub-page .prod-cat-hub__grid .prod-cat-card:nth-child(n+4){
  transform:translateX(28px) scale(.985);
  animation-name:prodCardInFromRight;
}
.products-hub-page .prod-cat-hub__grid .prod-cat-card:nth-child(1){animation-delay:.04s;}
.products-hub-page .prod-cat-hub__grid .prod-cat-card:nth-child(2){animation-delay:.1s;}
.products-hub-page .prod-cat-hub__grid .prod-cat-card:nth-child(3){animation-delay:.16s;}
.products-hub-page .prod-cat-hub__grid .prod-cat-card:nth-child(4){animation-delay:.22s;}
.products-hub-page .prod-cat-hub__grid .prod-cat-card:nth-child(5){animation-delay:.28s;}
.products-hub-page .prod-cat-hub__grid .prod-cat-card:nth-child(6){animation-delay:.34s;}
@keyframes prodCardInFromLeft{
  from{opacity:0;transform:translateX(-28px) scale(.985);}
  to{opacity:1;transform:translateX(0) scale(1);}
}
@keyframes prodCardInFromRight{
  from{opacity:0;transform:translateX(28px) scale(.985);}
  to{opacity:1;transform:translateX(0) scale(1);}
}
.prod-cat-card:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 40px rgba(0,0,0,.35);
  border-color:rgba(34,197,94,.3);
}
.prod-cat-card__bg{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  transition:transform .45s ease;
}
.prod-cat-card:hover .prod-cat-card__bg{transform:scale(1.06);}
.prod-cat-card__overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(4,12,8,.12) 0%,rgba(4,12,8,.38) 42%,rgba(4,12,8,.9) 100%);
  pointer-events:none;
}
.prod-cat-card__body{
  position:relative;z-index:2;
  display:flex;flex-direction:column;justify-content:flex-end;
  height:100%;
  box-sizing:border-box;
  padding:.8rem .95rem .8rem;
}
.prod-cat-card__title{
  font-family:'Montserrat',sans-serif;
  font-size:clamp(1rem,1.85vw,1.18rem);
  font-weight:800;margin:0 0 .4rem;line-height:1.2;
  letter-spacing:-.02em;color:#fff;
  text-shadow:0 1px 12px rgba(0,0,0,.45);
}
/* Thẻ hub: nền ảnh + overlay tối — không dùng màu h3 của light mode */
html[data-theme="light"] .prod-cat-card__title{
  color:#fff;
  text-shadow:0 1px 14px rgba(0,0,0,.65),0 2px 24px rgba(0,0,0,.4);
}
.prod-cat-card__desc{
  margin:0;font-size:.86rem;line-height:1.5;
  color:rgba(255,255,255,.9);
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;
  overflow:hidden;
}
.prod-cat-card__footer{
  display:flex;align-items:center;justify-content:space-between;
  margin-top:.45rem;gap:.5rem;
}
.prod-cat-card__count{font-size:.82rem;font-weight:700;}
.prod-cat-card__count-n{color:var(--g2);}
.prod-cat-card__count-label{color:var(--g1);font-weight:600;margin-left:.12rem;}
.prod-cat-card__arrow{
  flex-shrink:0;width:40px;height:40px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.22);
  color:#fff;
  transition:background .25s ease,border-color .25s ease;
}
.prod-cat-card:hover .prod-cat-card__arrow{
  background:rgba(34,197,94,.22);
  border-color:rgba(34,197,94,.38);
}
@media (prefers-reduced-motion: reduce){
  .products-hub-page .prod-cat-card{
    opacity:1;
    transform:none;
    animation:none;
  }
}
@media(min-width:1024px){
  .prod-sec--hub .prod-cat-card{
    min-height:clamp(150px,18vh,210px);
  }
  body.products-hub-page .prod-cat-hub__grid{
    grid-template-rows:repeat(2,minmax(0,1fr));
  }
  body.products-hub-page .prod-cat-card{
    height:100%;
    min-height:0;
  }
}
@media(max-width:900px){
  .prod-cat-hub__grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:540px){
  .prod-cat-hub__grid{grid-template-columns:repeat(2,minmax(0,1fr));max-width:none;}
}
#products .prod-hero-head{
  max-width:min(1100px,100%);
  margin:0 auto;
  padding-bottom:.95rem;
  border-bottom:1px solid rgba(34,197,94,.1);
  text-align:left;
  justify-items:start;
}
#products .prod-hero-head .sec-h{margin-bottom:0;}
body.products-hub-page #products .prod-hero-head .sec-h{
  font-family:'Montserrat',sans-serif !important;
}
.prod-sec--hub .prod-hub-head__hint{
  margin-left:0;
  margin-right:0;
}
/* Hub /products: căn tag + heading trái (inline-flex + text-align kế thừa = pill ở giữa) */
#products.prod-sec--hub .prod-hero-head,
body.products-hub-page #products .prod-hero-head{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  text-align:left !important;
  width:100%;
  box-sizing:border-box;
}
#products.prod-sec--hub .prod-hero-head .sec-tag,
body.products-hub-page #products .prod-hero-head .sec-tag{
  display:flex;
  width:fit-content;
  max-width:100%;
  box-sizing:border-box;
}
#products.prod-sec--hub .prod-hero-head .sec-h,
#products.prod-sec--hub .prod-hero-head .prod-hub-head__hint,
body.products-hub-page #products .prod-hero-head .sec-h,
body.products-hub-page #products .prod-hero-head .prod-hub-head__hint{
  text-align:left !important;
  align-self:flex-start;
  width:100%;
  max-width:100%;
}
.prod-hub-search{
  display:flex;
  flex-wrap:wrap;
  align-items:stretch;
  gap:.5rem .65rem;
  width:100%;
  max-width:min(640px,100%);
  margin-top:1.15rem;
}
.prod-hub-search__input{
  flex:1 1 12rem;
  min-width:0;
  padding:.6rem .95rem;
  border-radius:12px;
  border:1px solid var(--border);
  background:rgba(6,15,8,.85);
  color:var(--txt);
  font-size:.92rem;
  font-family:inherit;
}
.prod-hub-search__input:focus{
  outline:2px solid rgba(34,197,94,.35);
  outline-offset:1px;
  border-color:var(--g1);
}
.prod-hub-search__btn{
  padding:.6rem 1.15rem;
  border-radius:12px;
  border:1px solid rgba(34,197,94,.35);
  background:rgba(34,197,94,.12);
  color:var(--g2);
  font-weight:700;
  font-size:.88rem;
  cursor:pointer;
  font-family:inherit;
  white-space:nowrap;
}
.prod-hub-search__btn:hover{background:rgba(34,197,94,.22);color:#fff;}
.products-catalog{
  color:var(--txt);
  margin:0 -2.5rem;
  padding:0 2rem 4.5rem max(1rem,env(safe-area-inset-left));
  background:
    linear-gradient(180deg,rgba(34,197,94,.045) 0%,transparent 42%),
    var(--surface);
  border-top:none;
}
.products-catalog__inner{
  max-width:min(1520px,100%);
  margin:0 auto;
  padding-top:.8rem;
}
/* Một khối panel: toolbar + lưới + phân trang */
.products-panel{
  background:linear-gradient(165deg,rgba(10,28,14,.88) 0%,rgba(4,12,8,.94) 100%);
  border:none;
  border-radius:22px;
  overflow:hidden;
  box-shadow:0 16px 44px rgba(0,0,0,.26);
}
.products-toolbar{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  column-gap:1.5rem;
  row-gap:.85rem;
  padding:1.2rem 1.5rem 1.15rem;
  border-bottom:none;
  background:transparent;
}
.products-toolbar__title{
  font-family:'Space Grotesk',sans-serif;
  font-size:clamp(1.5rem,3.2vw,2rem);
  font-weight:800;
  letter-spacing:-.03em;
  color:#fff;
  margin:0;
  line-height:1.2;
  min-width:0;
}
html[data-theme="light"] body.products-category-page .products-toolbar .products-toolbar__title{
  color:#020617 !important;
  font-weight:900 !important;
  opacity:1 !important;
  text-shadow:none;
}
.products-toolbar__sort{
  display:inline-flex;
  flex-wrap:nowrap;
  align-items:center;
  justify-content:flex-end;
  gap:.55rem .75rem;
  margin:0;
  padding:.42rem .55rem .42rem .9rem;
  border-radius:12px;
  border:1px solid rgba(34,197,94,.12);
  background:rgba(4,12,8,.42);
  justify-self:end;
}
.products-toolbar__sort-label{
  font-size:.78rem;
  font-weight:600;
  color:var(--muted);
  white-space:nowrap;
  letter-spacing:.02em;
}
.products-toolbar__select{
  min-width:min(220px,42vw);
  max-width:280px;
  padding:.48rem .85rem;
  border-radius:10px;
  border:1px solid var(--border);
  background:rgba(6,15,8,.98);
  color:var(--txt);
  font-size:.85rem;
  font-weight:600;
  font-family:inherit;
  cursor:pointer;
}
.products-toolbar__select:focus{outline:2px solid rgba(34,197,94,.35);outline-offset:1px;border-color:var(--g1);}
.products-toolbar__select option{background:var(--ink);color:var(--txt);}
.products-toolbar__search{
  grid-column:1 / -1;
  display:flex;
  flex-wrap:wrap;
  align-items:stretch;
  gap:.5rem .65rem;
  width:100%;
  margin:0;
  padding:0;
  border:none;
  background:transparent;
}
.products-toolbar__search-input{
  flex:1 1 14rem;
  min-width:0;
  padding:.55rem .95rem;
  border-radius:12px;
  border:1px solid rgba(34,197,94,.14);
  background:rgba(6,15,8,.75);
  color:var(--txt);
  font-size:.9rem;
  font-family:inherit;
}
.products-toolbar__search-input:focus{
  outline:2px solid rgba(34,197,94,.35);
  outline-offset:1px;
  border-color:var(--g1);
}
.products-toolbar__search-input::placeholder{color:var(--muted);}
.products-toolbar__search-btn{
  padding:.55rem 1rem;
  border-radius:12px;
  border:1px solid rgba(34,197,94,.32);
  background:rgba(34,197,94,.1);
  color:var(--g2);
  font-weight:700;
  font-size:.85rem;
  cursor:pointer;
  font-family:inherit;
  white-space:nowrap;
}
.products-toolbar__search-btn:hover{background:rgba(34,197,94,.2);color:#fff;}
.products-toolbar__search-clear{
  align-self:center;
  font-size:.82rem;
  font-weight:600;
  color:var(--muted);
  text-decoration:underline;
  text-underline-offset:2px;
}
.products-toolbar__search-clear:hover{color:var(--g2);}
/* Sidebar trái + lưới phải — một hàng trên desktop */
.products-layout{
  display:grid;
  grid-template-columns:minmax(220px,250px) minmax(0,1fr);
  gap:.45rem;
  align-items:stretch;
}
.products-sidebar{
  position:sticky;
  top:calc(var(--nav-offset,72px) + .75rem);
  align-self:start;
  max-height:calc(100vh - var(--nav-offset,72px) - 2rem);
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:1rem;
  margin:0;
  padding:1.35rem 1rem 1.5rem 1.4rem;
  border-right:none;
  background:transparent;
}
.products-sidebar::-webkit-scrollbar{width:6px;}
.products-sidebar::-webkit-scrollbar-thumb{background:rgba(34,197,94,.25);border-radius:4px;}
.filter-block{
  background:rgba(10,28,14,.34);
  border:1px solid rgba(255,255,255,.03);
  border-radius:12px;
  padding:0;
  overflow:hidden;
}
.filter-block__summary{
  cursor:pointer;
  font-size:.76rem;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--g2);
  padding:.95rem 1rem;
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  user-select:none;
  border-bottom:none;
}
.filter-block__summary::-webkit-details-marker{display:none;}
.filter-block__summary::after{content:'−';font-size:1rem;font-weight:600;color:var(--g1);line-height:1;opacity:.85;}
.filter-block:not([open]) .filter-block__summary::after{content:'+';}
.filter-chips{
  display:flex;
  flex-direction:column;
  gap:.4rem;
  padding:.85rem .9rem 1rem;
}
.filter-chip{
  display:block;
  text-align:left;
  padding:.55rem .75rem;
  border-radius:9px;
  border:1px solid transparent;
  background:rgba(6,15,8,.55);
  color:var(--txt);
  font-size:.9rem;
  font-weight:600;
  text-decoration:none;
  line-height:1.35;
  transition:background .2s,border-color .2s,color .2s,box-shadow .2s;
}
.filter-chip:hover{
  border-color:rgba(34,197,94,.22);
  color:var(--g2);
  background:rgba(34,197,94,.06);
}
.filter-chip.is-active{
  border-color:rgba(34,197,94,.26);
  background:rgba(34,197,94,.1);
  color:var(--g2);
  box-shadow:none;
}
.products-main{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));
  gap:.95rem;
  padding:.95rem 1rem 1.1rem 1rem;
  align-content:start;
}
/* Thẻ sản phẩm: ảnh trên — tiêu đề / giá / meta dưới */
.pcard{
  background:rgba(16,40,22,.66);
  border:1px solid rgba(255,255,255,.03);
  border-radius:14px;
  padding:0;
  display:flex;
  flex-direction:column;
  height:100%;
  min-height:unset;
  overflow:hidden;
  transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease;
  position:relative;
}
.pcard::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:14px;
  background:linear-gradient(145deg,rgba(34,197,94,.16),transparent 58%);
  opacity:0;
  transition:opacity .3s;
  pointer-events:none;
  z-index:0;
}
.pcard:hover{
  border-color:rgba(34,197,94,.14);
  transform:translateY(-2px);
  box-shadow:0 14px 30px rgba(0,0,0,.24),0 0 0 1px rgba(74,222,128,.08);
}
.pcard:hover::before{opacity:1;}
.pcard > *{position:relative;z-index:1;}
.pcard__media{
  margin:0;
  aspect-ratio:5/3;
  min-height:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(180deg,rgba(14,32,20,.96),rgba(10,24,15,.78));
  border-bottom:none;
  padding:.75rem .85rem;
}
.pcard__media img{
  width:100%;
  height:100%;
  max-height:180px;
  object-fit:contain;
  object-position:center;
}
.pcard__placeholder{
  width:100%;
  min-height:160px;
  aspect-ratio:4/3;
  border-radius:10px;
  background:repeating-linear-gradient(-45deg,rgba(34,197,94,.07),rgba(34,197,94,.07) 8px,transparent 8px,transparent 16px);
}
.pcard__body{
  display:flex;
  flex-direction:column;
  flex:1;
  gap:.5rem;
  padding:.8rem .9rem .9rem;
}
.pcard__head{margin:0;}
.pcard__title{
  font-family:'Space Grotesk',sans-serif;
  font-size:clamp(.92rem,1.2vw,1.03rem);
  font-weight:800;
  color:#fff;
  margin:0 0 .3rem;
  line-height:1.25;
  letter-spacing:-.02em;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.pcard__price{
  font-size:.92rem;
  font-weight:700;
  color:var(--g1);
  margin:0;
}
.pcard__meta{
  display:flex;
  flex-wrap:wrap;
  gap:.3rem .4rem;
  align-items:center;
  margin-top:auto;
  padding-top:.25rem;
}
.pcard__badge{
  font-size:.6rem;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--g3);
  background:rgba(34,197,94,.1);
  padding:.22rem .42rem;
  border-radius:6px;
  border:none;
}
.pcard__status{
  font-size:.6rem;
  font-weight:700;
  padding:.22rem .42rem;
  border-radius:6px;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.pcard__status--in_stock{color:var(--g2);background:rgba(34,197,94,.14);}
.pcard__status--coming_soon{color:var(--o2);background:rgba(234,88,12,.12);}
.pcard__status--out_of_stock{color:var(--muted);background:rgba(255,255,255,.04);}
.pcard--empty{
  grid-column:1/-1;
  text-align:center;
  padding:2.75rem 1.5rem;
  background:rgba(4,12,8,.35);
  border-style:dashed;
}
.pcard--empty .pcard__title{margin-bottom:.5rem;}
.pcard__teaser{font-size:.88rem;color:var(--muted);line-height:1.6;margin:0;}
.pcard__specs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.45rem;}
.pcard__spec-line{font-size:.84rem;color:var(--txt);line-height:1.45;display:flex;flex-wrap:wrap;gap:.35rem;justify-content:space-between;padding-bottom:.25rem;}
.pcard__spec-line:last-child{border-bottom:none;padding-bottom:0;}
.pcard__spec-k{font-weight:600;color:var(--muted);}
.pcard__spec-v{color:#fff;font-weight:500;text-align:right;}
.pcard__desc{font-size:.84rem;color:var(--muted);line-height:1.65;text-align:left;margin-top:.75rem;padding-top:.65rem;border-top:none;}
.pcard__desc{font-size:.8rem;color:var(--muted);line-height:1.5;text-align:left;margin-top:.55rem;padding-top:.5rem;border-top:none;}

@media(min-width:1280px){
  body.products-category-page .products-main{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
}
@media(min-width:1680px){
  body.products-category-page .products-main{
    grid-template-columns:repeat(5,minmax(0,1fr));
  }
}
.pcard__specs + .pcard__desc{margin-top:.65rem;}

/* Trang danh mục: mobile — 2 sản phẩm / hàng */
@media(max-width:640px){
  body.products-category-page .products-main{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:.65rem .5rem;
    padding:.75rem .65rem .95rem;
  }
  body.products-category-page .pcard__body{
    padding:.6rem .65rem .7rem;
    gap:.4rem;
  }
  body.products-category-page .pcard__title{
    font-size:.82rem;
    -webkit-line-clamp:3;
  }
  body.products-category-page .pcard__price{
    font-size:.82rem;
  }
  body.products-category-page .pcard__media{
    padding:.55rem .5rem;
  }
  body.products-category-page .pcard__media img{
    max-height:140px;
  }
  body.products-category-page .pcard__badge,
  body.products-category-page .pcard__status{
    font-size:.52rem;
    padding:.18rem .32rem;
  }
}

.products-pagination-wrap{
  margin:0;
  padding:1.25rem 1.5rem 1.5rem;
  border-top:1px solid rgba(255,255,255,.07);
  background:rgba(4,12,8,.35);
}
.products-pagination{display:flex;flex-direction:column;align-items:center;gap:.85rem;}
.products-pagination__list{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.4rem;list-style:none;margin:0;padding:0;}
.products-pagination__list li{margin:0;padding:0;}
.products-pagination__link{display:inline-flex;align-items:center;justify-content:center;min-width:2.35rem;height:2.35rem;padding:0 .55rem;border-radius:9px;border:1px solid rgba(255,255,255,.1);background:rgba(10,28,14,.6);color:var(--txt);font-size:.86rem;font-weight:600;text-decoration:none;transition:background .2s,border-color .2s,color .2s;}
a.products-pagination__link:hover{border-color:var(--g1);color:var(--g2);background:rgba(34,197,94,.12);}
.products-pagination__link.is-current{background:rgba(34,197,94,.2);border-color:var(--g1);color:var(--g2);}
.products-pagination__link.is-disabled{opacity:.35;cursor:not-allowed;}
.products-pagination__ellipsis{min-width:2rem;text-align:center;color:var(--muted);font-size:.85rem;}
.products-pagination__meta{font-size:.78rem;color:var(--muted);margin:0;text-align:center;}

/* ═══════════════ PRODUCT DETAIL (layout 2 cột + bảng + related) ═══════════════ */
.pcard--link{text-decoration:none;color:inherit;cursor:pointer;}
.pcard--link:focus-visible{outline:2px solid var(--g1);outline-offset:3px;}
.pd-sec{background:var(--surface);padding-top:4rem;padding-bottom:4rem;}
.product-detail-page .pd-sec{padding-top:0.8rem;}
.product-detail-page .pd-main{
  gap:1.1rem 1.35rem;
  margin-bottom:1.35rem;
}
.product-detail-page .pd-info{
  display:flex;
  flex-direction:column;
  gap:.45rem;
}
.pd-inner{max-width:min(1200px,100%);padding-top:.85rem;}
.pd-breadcrumb-wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.65rem 1rem;margin-bottom:1.15rem;}
.pd-breadcrumb{font-size:.8rem;color:var(--muted);margin:0;line-height:1.5;flex-wrap:wrap;display:flex;align-items:center;gap:.15rem;flex:1;min-width:min(100%,12rem);}
.pd-breadcrumb-wrap .pd-status{margin:0;flex-shrink:0;}
.pd-breadcrumb a{color:var(--g2);text-decoration:none;font-weight:500;}
.pd-breadcrumb a:hover{color:var(--g1);text-decoration:underline;}
.pd-breadcrumb__sep{color:var(--muted);user-select:none;}
.pd-breadcrumb__current{color:var(--txt);font-weight:600;}
.pd-main{display:grid;grid-template-columns:1fr 1fr;gap:1.65rem 2rem;align-items:start;margin-bottom:2.1rem;}
.pd-gallery{display:flex;flex-direction:column;gap:.75rem;min-width:0;}
.pd-gallery__frame{position:relative;background:linear-gradient(180deg,rgba(10,28,14,.95),rgba(4,12,6,.55));border:1px solid var(--border);border-radius:14px;overflow:hidden;min-height:280px;display:flex;align-items:center;justify-content:center;}
.pd-gallery__img{
  width:100%;
  height:auto;
  max-height:min(72vh,560px);
  object-fit:contain;
  padding:.75rem;
  opacity:1;
  transform:scale(1);
  transition:opacity .22s ease,transform .3s cubic-bezier(.22,1,.36,1),filter .22s ease;
  will-change:opacity,transform;
}
.pd-gallery__img.is-switching{
  opacity:.2;
  transform:scale(.985);
  filter:saturate(.92);
}
.pd-gallery__img.is-switching-next{
  opacity:.28;
  transform:translate3d(-18px,0,0) scale(.985);
  filter:saturate(.92);
}
.pd-gallery__img.is-switching-prev{
  opacity:.28;
  transform:translate3d(18px,0,0) scale(.985);
  filter:saturate(.92);
}
.pd-gallery__placeholder{width:100%;min-height:320px;background:repeating-linear-gradient(-45deg,rgba(34,197,94,.06),rgba(34,197,94,.06) 10px,transparent 10px,transparent 20px);}
.pd-gallery__zoom{
  position:absolute;bottom:.75rem;left:.75rem;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:10px;background:rgba(4,12,6,.75);border:1px solid var(--border);color:var(--g2);transition:color .2s,background .2s,border-color .2s;
  padding:0;margin:0;font:inherit;line-height:0;cursor:pointer;appearance:none;-webkit-appearance:none;
}
.pd-gallery__zoom:hover{color:#fff;border-color:var(--g1);background:rgba(34,197,94,.15);}
.pd-gallery__zoom:focus-visible{outline:2px solid var(--g1);outline-offset:2px;}
.pd-gallery__nav{
  position:absolute;
  top:50%;
  z-index:2;
  width:42px;
  height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  border:1px solid rgba(34,197,94,.26);
  background:rgba(4,12,6,.72);
  color:var(--g2);
  cursor:pointer;
  padding:0;
  margin:0;
  transform:translateY(-50%);
  transition:color .2s,background .2s,border-color .2s,transform .2s;
  appearance:none;
  -webkit-appearance:none;
}
.pd-gallery__nav--prev{left:.8rem;}
.pd-gallery__nav--next{right:.8rem;}
.pd-gallery__nav:hover,.pd-gallery__nav:focus-visible{
  color:#fff;
  border-color:var(--g1);
  background:rgba(34,197,94,.18);
  outline:none;
}
.pd-gallery__nav--prev:hover{transform:translate(-2px,-50%);}
.pd-gallery__nav--next:hover{transform:translate(2px,-50%);}
.pd-lightbox{
  position:fixed;inset:0;z-index:10050;display:flex;align-items:center;justify-content:center;
  padding:max(.75rem,env(safe-area-inset-top)) max(1rem,env(safe-area-inset-right)) max(1rem,env(safe-area-inset-bottom)) max(1rem,env(safe-area-inset-left));
  box-sizing:border-box;
}
.pd-lightbox[hidden]{display:none!important;}
body.pd-lightbox-open{overflow:hidden;}
.pd-lightbox__backdrop{position:absolute;inset:0;background:rgba(4,12,8,.92);cursor:pointer;}
.pd-lightbox__panel{
  position:relative;z-index:1;margin:0;max-width:min(96vw,1400px);max-height:min(92vh,900px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.pd-lightbox__img{
  display:block;max-width:100%;max-height:min(88vh,860px);width:auto;height:auto;object-fit:contain;
  border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.55);
}
.pd-lightbox__close{
  position:absolute;top:-2px;right:-2px;z-index:2;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:10px;border:1px solid var(--border);background:rgba(4,12,6,.95);color:var(--g2);
  cursor:pointer;padding:0;margin:0;font:inherit;appearance:none;-webkit-appearance:none;transition:color .2s,background .2s,border-color .2s;
}
.pd-lightbox__close:hover{color:#fff;border-color:var(--g1);background:rgba(34,197,94,.18);}
.pd-lightbox__close:focus-visible{outline:2px solid var(--g1);outline-offset:2px;}
.pd-gallery__thumbs{display:flex;flex-wrap:wrap;gap:.5rem;}
.pd-gallery__thumb{padding:0;border:2px solid transparent;border-radius:10px;background:transparent;cursor:pointer;overflow:hidden;opacity:.75;transition:opacity .2s,border-color .2s,transform .2s;}
.pd-gallery__thumb:hover{opacity:1;}
.pd-gallery__thumb.is-active{border-color:var(--g1);opacity:1;}
.pd-gallery__thumb img{display:block;width:72px;height:54px;object-fit:cover;border-radius:7px;}
.pd-info{min-width:0;}
.pd-title{font-family:'Space Grotesk',sans-serif;font-size:clamp(1.65rem,3.5vw,2.15rem);font-weight:800;color:#fff;margin:0 0 .35rem;line-height:1.12;letter-spacing:-.02em;}
.pd-price{font-size:1.2rem;font-weight:700;color:var(--g1);margin:0 0 .45rem;}
.pd-sku-warranty{display:flex;flex-wrap:wrap;align-items:center;gap:.65rem .9rem;margin:0 0 .85rem;}
.pd-sku-warranty .pd-sku,.pd-sku-warranty .pd-brand{margin:0;}
.pd-sku{font-size:.82rem;color:var(--muted);}
.pd-sku__k{font-weight:600;color:var(--txt);}
.pd-brand{font-size:.82rem;color:var(--muted);}
.pd-brand__k{font-weight:600;color:var(--txt);margin-right:.35rem;}
.pd-brand__v{color:var(--g2);font-weight:600;}
.pd-warranty-tag{
  display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:.35rem .5rem;
  margin:0;padding:.55rem 1rem .58rem;
  font-size:clamp(.88rem,1.6vw,.98rem);font-weight:700;line-height:1.25;
  color:var(--g1);
  border-radius:999px;
  border:1px solid rgba(34,197,94,.4);
  background:linear-gradient(165deg,rgba(34,197,94,.18),rgba(10,28,14,.55));
  box-shadow:0 4px 18px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.06);
  max-width:100%;
}
.pd-warranty-tag__k{
  font-size:.68rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--g2);
}
.pd-warranty-tag__v{color:#eafdf1;font-weight:700;}
.pd-categories{font-size:.86rem;line-height:1.45;margin-bottom:0;color:var(--txt);}
.pd-categories__label{font-weight:700;color:var(--g2);margin-right:.35rem;}
.pd-categories__links a{color:var(--g1);text-decoration:none;font-weight:500;}
.pd-categories__links a:hover{text-decoration:underline;color:var(--g2);}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
/* Bảng thông số — layout datasheet */
.pd-spec{margin-top:.65rem;padding-top:0;}
.pd-spec--spaced{margin-top:1.35rem;}
.product-detail-page .pd-spec{margin-top:.25rem;}
.product-detail-page .pd-spec--spaced{margin-top:.7rem;}
.pd-gallery__description{
  margin-top:.2rem;
  padding:.85rem 1rem .95rem;
  border-radius:12px;
  border:1px solid var(--border);
  background:linear-gradient(180deg,rgba(10,28,14,.55),rgba(4,12,6,.42));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  align-self:stretch;
  width:100%;
}
.pd-gallery__description-title{
  font-family:'Space Grotesk',sans-serif;
  font-size:.78rem;
  font-weight:800;
  color:var(--g2);
  letter-spacing:.1em;
  text-transform:uppercase;
  margin:0 0 .45rem;
}
.pd-gallery__description-body{
  font-size:.86rem;
  color:var(--txt);
  line-height:1.68;
}
.pd-spec__title{font-family:'Space Grotesk',sans-serif;font-size:.95rem;font-weight:800;color:var(--g2);letter-spacing:.12em;text-transform:uppercase;margin:0 0 .5rem;}
.pd-spec-card{
  position:relative;border-radius:14px;border:1px solid rgba(34,197,94,.2);
  background:linear-gradient(165deg,rgba(10,28,14,.92) 0%,rgba(4,12,6,.75) 100%);
  box-shadow:0 12px 40px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.04);
  overflow:hidden;
  padding:.75rem .85rem 1rem;
}
.pd-spec-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,transparent,rgba(34,197,94,.55),rgba(234,88,12,.35),transparent);
  opacity:.95;pointer-events:none;
}
.pd-spec-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;
}
.pd-spec-cell{
  display:flex;flex-direction:column;align-items:flex-start;gap:.35rem;text-align:left;
  padding:.95rem 1.1rem;border:1px solid rgba(229,231,235,.22);border-radius:10px;
  background:rgba(255,255,255,.03);transition:background .2s ease,border-color .2s ease;
}
.pd-spec-cell:hover{background:rgba(34,197,94,.06);border-color:rgba(34,197,94,.22);}
.pd-spec-cell__label{
  font-size:.72rem;font-weight:500;line-height:1.35;letter-spacing:.02em;color:rgba(255,255,255,.52);
}
.pd-spec-cell__value{
  font-size:.98rem;font-weight:700;line-height:1.35;color:rgba(255,255,255,.96);font-variant-numeric:tabular-nums;
}
@media(min-width:1200px){
  .product-detail-page .pd-spec-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
  }
  .product-detail-page .pd-spec-cell{
    padding:.72rem .78rem;
    gap:.24rem;
  }
  .product-detail-page .pd-spec-cell__label{
    font-size:.66rem;
    line-height:1.28;
  }
  .product-detail-page .pd-spec-cell__value{
    font-size:.9rem;
    line-height:1.28;
  }
}
.pd-status{display:inline-block;margin-top:.85rem;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:.35rem .65rem;border-radius:8px;}
.pd-status--in_stock{color:var(--g2);background:rgba(34,197,94,.14);}
.pd-status--coming_soon{color:var(--o2);background:rgba(234,88,12,.12);}
/* .pd-description — giữ nếu tái sử dụng; nội dung chính nằm trong .pd-gallery__description */
.pd-description{margin-top:2rem;padding-top:2rem;border-top:1px solid var(--border);}
.pd-description__title{font-family:'Space Grotesk',sans-serif;font-size:1rem;font-weight:800;color:var(--g2);letter-spacing:.1em;text-transform:uppercase;margin:0 0 1rem;}
.pd-description__body{font-size:.92rem;color:var(--txt);line-height:1.75;max-width:900px;}
.pd-related{margin-top:2.25rem;padding-top:1.5rem;border-top:1px solid var(--border);}
.pd-related__title{font-family:'Space Grotesk',sans-serif;font-size:1rem;font-weight:800;color:#fff;letter-spacing:.12em;text-transform:uppercase;margin:0 0 1.1rem;}
.pd-related__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.25rem;align-items:stretch;}
.pd-related .rcard{height:100%;}
.rcard{display:flex;flex-direction:column;text-decoration:none;color:inherit;border-radius:14px;border:1px solid var(--border);background:var(--card);overflow:hidden;transition:all .3s ease;position:relative;}
.rcard::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--g0),transparent);transform:scaleX(0);transition:transform .4s;z-index:2;pointer-events:none;}
.rcard:hover{border-color:rgba(34,197,94,.3);transform:translateY(-5px);box-shadow:0 16px 48px rgba(34,197,94,.08);}
.rcard:hover::after{transform:scaleX(1);}
.rcard__media{
  aspect-ratio:5/3;
  background:linear-gradient(180deg,rgba(6,15,10,.95),rgba(4,12,8,.75));
  border-bottom:1px solid rgba(255,255,255,.06);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:.75rem .85rem;
}
.rcard__media img{
  width:100%;
  height:100%;
  max-height:180px;
  object-fit:contain;
  object-position:center;
  padding:0;
}
.rcard__placeholder{width:100%;height:100%;min-height:120px;background:repeating-linear-gradient(-45deg,rgba(34,197,94,.06),rgba(34,197,94,.06) 8px,transparent 8px,transparent 16px);}
.rcard__name{font-size:.88rem;font-weight:700;color:#fff;padding:.85rem 1rem;line-height:1.35;}
.pd-related .rcard__name{flex:1;}

/* ═══════════════ NEWS ═══════════════ */
.news-sec,.news-detail-sec{background:var(--surface);color:var(--txt);padding-top:2.4rem;padding-bottom:4.5rem;}
.news-inner,.news-detail{max-width:min(1180px,100%);}
.news-head{max-width:760px;margin-bottom:1.6rem;}
.news-title,.news-detail__title{font-family:'Montserrat',sans-serif;font-size:clamp(2rem,5vw,4.3rem);font-weight:900;line-height:.98;letter-spacing:-.05em;color:#fff;margin:0 0 1rem;}
.news-filter{display:flex;flex-wrap:wrap;gap:.55rem;margin-bottom:1.4rem;}
.news-filter__chip{display:inline-flex;align-items:center;border:1px solid rgba(34,197,94,.16);border-radius:999px;background:rgba(6,15,8,.5);color:var(--txt);padding:.45rem .85rem;font-size:.82rem;font-weight:700;text-decoration:none;transition:background .2s,border-color .2s,color .2s;}
.news-filter__chip:hover,.news-filter__chip.is-active{border-color:rgba(34,197,94,.38);background:rgba(34,197,94,.12);color:var(--g2);}
.news-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;}
.news-card{display:flex;flex-direction:column;min-height:100%;overflow:hidden;border:1px solid rgba(255,255,255,.04);border-radius:18px;background:rgba(16,40,22,.66);color:inherit;text-decoration:none;transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease;}
.news-card:hover{transform:translateY(-3px);border-color:rgba(34,197,94,.18);box-shadow:0 16px 34px rgba(0,0,0,.24),0 0 0 1px rgba(74,222,128,.08);}
.news-card__media{aspect-ratio:16/10;background:linear-gradient(180deg,rgba(14,32,20,.96),rgba(10,24,15,.78));overflow:hidden;}
.news-card__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease;}
.news-card:hover .news-card__media img{transform:scale(1.035);}
.news-card__placeholder{width:100%;height:100%;min-height:180px;background:repeating-linear-gradient(-45deg,rgba(34,197,94,.07),rgba(34,197,94,.07) 10px,transparent 10px,transparent 20px);}
.news-card__body{display:flex;flex-direction:column;gap:.6rem;flex:1;padding:1rem 1.05rem 1.15rem;}
.news-card__meta{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;color:var(--muted);font-size:.76rem;font-weight:700;}
.news-card__badge{display:inline-flex;align-items:center;border-radius:999px;background:rgba(34,197,94,.11);color:var(--g2);padding:.22rem .55rem;font-size:.66rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;}
.news-card__title{color:#fff;font-size:clamp(1rem,1.4vw,1.18rem);line-height:1.25;margin:0;font-weight:850;letter-spacing:-.025em;}
.news-card__excerpt{color:var(--muted);font-size:.9rem;line-height:1.65;margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.news-empty{grid-column:1/-1;text-align:center;border:1px dashed rgba(34,197,94,.22);border-radius:18px;background:rgba(4,12,8,.35);padding:3rem 1.5rem;}
.news-empty h2{margin:0 0 .5rem;color:#fff;}
.news-empty p{margin:0;color:var(--muted);}
.news-pagination-wrap{margin-top:1.4rem;border-radius:16px;overflow:hidden;}
.news-detail{max-width:min(920px,100%);}
.news-detail__breadcrumb{margin-bottom:1.25rem;}
.news-detail__head{margin-bottom:1.35rem;}
.news-detail__meta{margin-bottom:.8rem;}
.news-detail__excerpt{color:var(--txt);font-size:clamp(1rem,1.8vw,1.22rem);line-height:1.75;margin:0;max-width:820px;}
.news-detail__hero{margin:0 0 1.5rem;border:1px solid var(--border);border-radius:20px;overflow:hidden;background:rgba(6,15,8,.4);}
.news-detail__hero img{width:100%;height:auto;display:block;}
.news-detail__content{border:1px solid rgba(255,255,255,.04);border-radius:18px;background:rgba(8,22,12,.58);padding:clamp(1.2rem,3vw,2rem);color:var(--txt);font-size:1rem;line-height:1.85;}
.news-detail__content > *:first-child{margin-top:0;}
.news-detail__content > *:last-child{margin-bottom:0;}
.news-detail__content p,.news-detail__content ul,.news-detail__content ol{margin:0 0 1rem;}
.news-detail__content a{color:var(--g2);}
.news-detail__content img{max-width:100%;height:auto;border-radius:12px;}
.news-related{margin-top:2rem;}
.news-related__title{margin:0 0 1rem;color:#fff;font-size:clamp(1.35rem,2vw,1.8rem);}
.news-related__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;}
.news-card--compact .news-card__title{font-size:1rem;}

@media(min-width:901px){
  .product-detail-page .pd-gallery__frame{
    min-height:240px;
  }
  .product-detail-page .pd-gallery__img{
    max-height:min(58vh,440px);
    padding:.65rem .75rem;
  }
  .product-detail-page .pd-gallery__placeholder{
    min-height:280px;
  }
}

/* ═══════════════ RESPONSIVE ═══════════════ */
@media(max-width:1180px) and (min-width:901px){
  .n-links{gap:1.25rem;}
  .n-links a{font-size:.88rem;}
}
@media(max-width:900px){
  .pd-main{grid-template-columns:1fr;}
  .news-grid,.news-related__grid{grid-template-columns:1fr 1fr;}
  .news-sec,.news-detail-sec{padding-top:1.5rem;}
  .product-detail-page .pd-gallery__frame{
    min-height:0;
    touch-action:pan-y;
  }
  .product-detail-page .pd-gallery__img{
    max-height:min(36vh,220px);
    padding:.5rem .6rem;
  }
  .product-detail-page .pd-gallery__placeholder{
    min-height:120px;
    height:min(36vh,220px);
    max-height:min(36vh,220px);
  }
  .pd-gallery__nav{display:none;}
  .pd-related__grid{grid-template-columns:repeat(2,1fr);}
  .products-toolbar{
    grid-template-columns:1fr;
    row-gap:1rem;
  }
  .products-toolbar__sort{
    justify-self:stretch;
    width:100%;
    max-width:100%;
    justify-content:space-between;
    box-sizing:border-box;
  }
  .products-toolbar__select{
    flex:1 1 auto;
    min-width:min(220px,100%);
    max-width:none;
  }
  .products-panel{border-radius:16px;}
  .products-layout{grid-template-columns:1fr;}
  .products-sidebar{
    position:static;
    max-height:none;
    overflow:visible;
    border-right:none;
    border-bottom:1px solid rgba(255,255,255,.07);
    padding:1.1rem 1.15rem 1.2rem;
  }
  .products-main{
    grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));
    padding:1.15rem 1rem 1.35rem;
  }
  .vm-grid,.v-grid,.sol-hero-inner,.sol-fleet-inner,.sol-split-inner,.dist-lay,.contact-lay{grid-template-columns:1fr;}
  .cg{grid-template-columns:repeat(2,1fr);}
  .why-grid,.val-grid{grid-template-columns:1fr 1fr;}
  .why-grid--sdgs{grid-template-columns:repeat(2,minmax(0,1fr));}
  .stats-inner{grid-template-columns:repeat(2,1fr);}
  :root{
    --nav-bar-h:calc(42px + 1.2rem);
    --nav-offset:calc(var(--nav-bar-h) + 12px);
  }
  #nav{
    padding:.6rem max(1rem,env(safe-area-inset-right)) .6rem max(1rem,env(safe-area-inset-left));
    gap:.65rem;
    align-items:center;
  }
  .n-logo-img{height:42px;}
  .n-logo,.n-right,.nav-burger{position:relative;z-index:10003;}
  .nav-backdrop{
    display:block;
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    top:var(--nav-bar-h);
    background:rgba(0,0,0,.55);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    z-index:10001;
    opacity:0;
    visibility:hidden;
    transition:opacity .28s ease,visibility .28s;
    pointer-events:none;
  }
  body.nav-open .nav-backdrop{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }
  .nav-sheet{
    display:flex;
    position:fixed;
    top:var(--nav-bar-h);
    right:0;
    bottom:0;
    width:min(300px,88vw);
    max-width:100%;
    background:rgba(5,14,8,.99);
    border-left:1px solid var(--border);
    box-shadow:-10px 0 40px rgba(0,0,0,.45);
    padding:1rem 1.15rem max(1.15rem,env(safe-area-inset-bottom));
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    z-index:10002;
    transform:translate3d(105%,0,0);
    transition:transform .34s cubic-bezier(.22,1,.36,1);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
  body.nav-open .nav-sheet{transform:translate3d(0,0,0);}
  .nav-sheet__foot{
    display:block;
    margin-top:auto;
    padding-top:1.15rem;
    border-top:1px solid rgba(255,255,255,.08);
  }
  .nav-sheet__cta{
    width:100%;
    text-align:center;
    justify-content:center;
    padding:.7rem 1rem;
    box-sizing:border-box;
    font-size:.86rem;
  }
  .nav-sheet .n-links{
    flex-direction:column;
    align-items:stretch;
    gap:0;
  }
  .nav-sheet .n-links li{border-bottom:1px solid rgba(255,255,255,.07);}
  .nav-sheet .n-links a{
    display:block;
    padding:.95rem 0;
    font-size:.95rem;
    font-weight:600;
    letter-spacing:.02em;
  }
  .nav-sheet .n-links a::after{display:none;}
  .n-cta--desktop{display:none !important;}
  .n-right{margin-left:auto;}
  .lang-btn{min-width:76px;padding:.32rem .65rem;font-size:.72rem;}
  .nav-burger{
    display:inline-flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:5px;
    width:44px;
    height:44px;
    padding:0;
    border:1px solid var(--border);
    border-radius:10px;
    background:rgba(10,28,14,.65);
    cursor:pointer;
    flex-shrink:0;
    touch-action:manipulation;
    -webkit-tap-highlight-color:transparent;
    transition:border-color .2s,background .2s;
  }
  .nav-burger:hover,.nav-burger:focus-visible{
    border-color:rgba(34,197,94,.4);
    background:rgba(34,197,94,.1);
    outline:none;
  }
  .nav-burger__bar{
    display:block;
    width:20px;
    height:2px;
    background:#fff;
    border-radius:1px;
    transition:transform .3s ease,opacity .2s;
    transform-origin:center;
  }
  body.nav-open .nav-burger__bar:nth-child(1){transform:translateY(7px) rotate(45deg);}
  body.nav-open .nav-burger__bar:nth-child(2){opacity:0;transform:scaleX(0);}
  body.nav-open .nav-burger__bar:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
  .n-right .lang-menu{z-index:10006;}
  body.nav-open{overflow:hidden;}
  body.network-page .dist-lay{gap:1.25rem;}
  body.network-page .map-box{width:100%;max-width:100%;padding:.65rem .4rem .15rem;min-height:0;}
  body.network-page .vn-map{width:100%;max-width:min(430px,100%);overflow:hidden;border-radius:20px;}
  body.network-page .vn-map__img{width:100%;height:auto;max-width:100%;}
  body.network-page .vn-map__pins{overflow:hidden;}
  body.network-page .vn-pin__float{display:none;}
}
@media(max-width:540px){
  .news-grid,.news-related__grid{grid-template-columns:1fr;}
  .news-card__body{padding:.9rem;}
  .news-detail__content{padding:1rem;}
  .why-grid,.val-grid,.city-grid{grid-template-columns:1fr;}
  .why-grid--sdgs{grid-template-columns:repeat(2,minmax(0,1fr));}
  section{padding:3.75rem max(1rem,env(safe-area-inset-left)) 3.75rem max(1rem,env(safe-area-inset-right));}
  .hero-dna{font-size:clamp(2.8rem,16vw,5rem);}
  .hero-content{padding-left:max(1rem,env(safe-area-inset-left));padding-right:max(1rem,env(safe-area-inset-right));}
  .products-catalog{margin-left:-1.25rem;margin-right:-1.25rem;padding:0 1.25rem 4.5rem max(.5rem,env(safe-area-inset-left));}
  .pd-related__grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:.7rem .55rem;
  }
  .pd-related .rcard{
    border-radius:12px;
  }
  .pd-related .rcard__media{
    padding:.5rem .52rem;
  }
  .pd-related .rcard__media img{
    max-height:130px;
  }
  .pd-related .rcard__name{
    font-size:.8rem;
    line-height:1.3;
    padding:.62rem .68rem .7rem;
  }
  .pd-spec-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
  }
  .pd-spec-cell{padding:.72rem .65rem;gap:.28rem;}
  .pd-spec-cell__label{font-size:.66rem;line-height:1.3;}
  .pd-spec-cell__value{font-size:.86rem;line-height:1.32;}
  .product-detail-page .pd-gallery__img{
    max-height:min(32vh,200px);
    padding:.45rem .5rem;
  }
  .product-detail-page .pd-gallery__placeholder{
    height:min(32vh,200px);
    max-height:min(32vh,200px);
  }
  body.network-page #distribution.dist-sec{padding-top:3rem;padding-bottom:3.25rem;}
  body.network-page .map-box{padding:.35rem .1rem 0;}
  body.network-page .vn-map{max-width:100%;}
  body.network-page .vn-map__img{max-width:100%;}
  footer{padding:2.5rem max(1rem,env(safe-area-inset-left)) max(2rem,env(safe-area-inset-bottom)) max(1rem,env(safe-area-inset-right));}
  .ft-nav{gap:.55rem 1.1rem;}
  .ft-logo-img{height:48px;}
  .marquee-item{padding:.25rem 1.35rem;font-size:.72rem;}
}

/* ═══════════════════════════════════════════════════════════════════
   LIGHT MODE — cards & dark-only surfaces (full pass)
   ═══════════════════════════════════════════════════════════════════ */
html[data-theme="light"] .about-range-sec{
  border-top-color:rgba(15,23,42,.08);
  border-bottom-color:rgba(15,23,42,.08);
}
html[data-theme="light"] .about-range-card{
  background:linear-gradient(165deg,#ffffff,rgba(241,253,246,.98));
  border-color:rgba(22,163,74,.22);
  box-shadow:0 8px 28px rgba(15,23,42,.06);
}
html[data-theme="light"] .about-range-card__media{
  background:linear-gradient(180deg,rgba(34,197,94,.12),transparent);
}
html[data-theme="light"] .about-range-card--accent .about-range-card__media{
  background:linear-gradient(180deg,rgba(234,88,12,.14),transparent);
}
html[data-theme="light"] .about-range-card__title{color:#0f172a;}

html[data-theme="light"] .tab-row{
  background:rgba(255,255,255,.94);
  border:1px solid rgba(15,23,42,.1);
}

html[data-theme="light"] .sol-split-sec{color:#0f172a;}
html[data-theme="light"] .sol-how-sec{color:#0f172a;}
html[data-theme="light"] .sol-how-h{color:#0f172a;}
html[data-theme="light"] .sol-fleet-sec{color:#0f172a;}
html[data-theme="light"] .sol-fleet-h{color:#0f172a;}
html[data-theme="light"] .sol-easy-sec{color:#0f172a;}
html[data-theme="light"] .sol-easy-h{color:#0f172a;}
html[data-theme="light"] .sol-easy-card__media{
  background:rgba(241,245,249,.95);
}
html[data-theme="light"] .sol-easy-card__body{
  background:linear-gradient(180deg,rgba(34,197,94,.1),rgba(255,255,255,.98));
  border-top-color:rgba(22,163,74,.22);
}

html[data-theme="light"] .why-content .wc-desc{color:#475569;}
html[data-theme="light"] .why-media{
  background:#e2e8f0;
  box-shadow:0 12px 36px rgba(15,23,42,.1);
}
html[data-theme="light"] .wc-ico svg{color:rgba(15,23,42,.82);}

html[data-theme="light"] .valc__face--front{
  background:linear-gradient(165deg,#ffffff,rgba(241,253,246,.98));
}
html[data-theme="light"] .valc__front-title{
  color:#0f172a;
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(241,250,245,.99));
  border-top-color:rgba(15,23,42,.08);
}
html[data-theme="light"] .valc__face--back{
  background:linear-gradient(165deg,#f8fafc,#ecfdf5);
}
html[data-theme="light"] .v-desc{color:#334155;}

html[data-theme="light"] .vm-ico__plate{
  background:rgba(15,23,42,.05);
  border:1px solid rgba(15,23,42,.1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 4px 14px rgba(15,23,42,.08);
}

html[data-theme="light"] .filter-block{
  background:rgba(255,255,255,.92);
  border:1px solid rgba(15,23,42,.1);
}
html[data-theme="light"] .filter-chip{
  background:rgba(248,250,252,.98);
  color:#0f172a;
}
html[data-theme="light"] .filter-chip:hover{
  background:rgba(236,253,245,.98);
  color:var(--g0);
}
html[data-theme="light"] .filter-chip.is-active{
  background:rgba(220,252,231,.9);
  color:var(--g0);
  border-color:rgba(34,197,94,.35);
}

html[data-theme="light"] .pcard{
  background:rgba(255,255,255,.96);
  border:1px solid rgba(15,23,42,.1);
  box-shadow:0 4px 20px rgba(15,23,42,.06);
}
html[data-theme="light"] .pcard__media{
  background:linear-gradient(180deg,#f1f5f9,#e8eef3);
}
html[data-theme="light"] body.products-category-page .pcard__body{
  background:#fff;
}
html[data-theme="light"] body.products-category-page .pcard__title{
  color:#022c22 !important;
  font-weight:900;
  opacity:1;
  text-shadow:none;
}
html[data-theme="light"] body.products-category-page .pcard__badge{
  color:#022c22 !important;
  background:rgba(2,44,34,.08);
  font-weight:900;
}
html[data-theme="light"] .pcard:hover{
  box-shadow:0 12px 28px rgba(15,23,42,.1),0 0 0 1px rgba(34,197,94,.12);
}

html[data-theme="light"] .news-title,
html[data-theme="light"] .news-detail__title,
html[data-theme="light"] .news-card__title,
html[data-theme="light"] .news-empty h2,
html[data-theme="light"] .news-related__title{color:#0f172a;}
html[data-theme="light"] .news-filter__chip,
html[data-theme="light"] .news-card,
html[data-theme="light"] .news-detail__content{
  background:rgba(255,255,255,.96);
  border-color:rgba(15,23,42,.1);
}
html[data-theme="light"] .news-filter__chip{color:#0f172a;}
html[data-theme="light"] .news-filter__chip:hover,
html[data-theme="light"] .news-filter__chip.is-active{
  background:rgba(220,252,231,.9);
  color:var(--g0);
  border-color:rgba(34,197,94,.35);
}
html[data-theme="light"] .news-card{box-shadow:0 4px 20px rgba(15,23,42,.06);}
html[data-theme="light"] .news-card__media{background:linear-gradient(180deg,#f1f5f9,#e8eef3);}
html[data-theme="light"] .news-detail__hero{background:#fff;border-color:rgba(15,23,42,.1);}
html[data-theme="light"] .news-empty{background:rgba(255,255,255,.9);border-color:rgba(34,197,94,.28);}

html[data-theme="light"] .products-pagination__link{
  background:rgba(255,255,255,.95);
  border:1px solid rgba(15,23,42,.12);
  color:#0f172a;
}
html[data-theme="light"] a.products-pagination__link:hover{
  background:rgba(236,253,245,.95);
  color:var(--g0);
  border-color:rgba(34,197,94,.35);
}
html[data-theme="light"] .products-pagination__link.is-current{
  background:rgba(220,252,231,.95);
  color:var(--g0);
  border-color:var(--g1);
}

html[data-theme="light"] .pd-gallery__frame{
  background:linear-gradient(180deg,#ffffff,rgba(241,250,245,.92));
  border-color:rgba(15,23,42,.1);
}
html[data-theme="light"] .pd-gallery__zoom{
  background:rgba(255,255,255,.92);
  border-color:rgba(15,23,42,.12);
  color:var(--g0);
}
html[data-theme="light"] .pd-gallery__description{
  background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(241,253,246,.9));
  border-color:rgba(15,23,42,.1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}
html[data-theme="light"] .pd-warranty-tag{
  background:linear-gradient(165deg,rgba(34,197,94,.14),rgba(236,253,245,.95));
  border-color:rgba(34,197,94,.35);
  box-shadow:0 2px 12px rgba(15,23,42,.06);
}
html[data-theme="light"] .pd-warranty-tag__v{color:#14532d;}
html[data-theme="light"] .pd-spec-card{
  background:linear-gradient(165deg,#ffffff,rgba(241,253,246,.96));
  border-color:rgba(22,163,74,.22);
  box-shadow:0 8px 28px rgba(15,23,42,.08);
}
html[data-theme="light"] .pd-spec-cell{
  background:rgba(248,250,252,.95);
  border-color:rgba(15,23,42,.1);
}
html[data-theme="light"] .pd-spec-cell__label{color:#64748b;}
html[data-theme="light"] .pd-spec-cell__value{color:#0f172a;}

html[data-theme="light"] .rcard__media{
  background:linear-gradient(180deg,#f1f5f9,#e8eef3);
  border-bottom-color:rgba(15,23,42,.08);
}

html[data-theme="light"] #distribution .vn-map__img{
  box-shadow:0 10px 32px rgba(15,23,42,.12);
  border-color:rgba(22,163,74,.25);
}
html[data-theme="light"] .vn-pin__caption{
  background:rgba(255,255,255,.95);
  color:var(--g0);
  border-color:rgba(15,23,42,.12);
  box-shadow:0 4px 18px rgba(15,23,42,.1);
}
html[data-theme="light"] .vn-pin__photo{
  background:rgba(241,245,249,.9);
}

html[data-theme="light"] .pd-lightbox__backdrop{background:rgba(15,23,42,.75);}
html[data-theme="light"] .pd-lightbox__close{
  background:rgba(255,255,255,.96);
  border-color:rgba(15,23,42,.12);
  color:var(--g0);
}

@media(max-width:900px){
  html[data-theme="light"] .nav-sheet{
    background:rgba(255,255,255,.99);
    border-left:1px solid rgba(15,23,42,.1);
    box-shadow:-8px 0 32px rgba(15,23,42,.12);
  }
  html[data-theme="light"] .nav-sheet .n-links a{color:#0f172a;}
  html[data-theme="light"] .nav-sheet .n-links li{border-bottom-color:rgba(15,23,42,.08);}
  html[data-theme="light"] .nav-sheet__foot{border-top-color:rgba(15,23,42,.1);}
  html[data-theme="light"] .nav-burger{
    background:rgba(255,255,255,.92);
    border-color:rgba(34,197,94,.24);
    box-shadow:0 4px 16px rgba(15,23,42,.08);
  }
  html[data-theme="light"] .nav-burger:hover,
  html[data-theme="light"] .nav-burger:focus-visible{
    background:rgba(236,253,245,.95);
    border-color:rgba(34,197,94,.42);
  }
  html[data-theme="light"] .nav-burger__bar{background:#022c22;}
}