/* Professional Green design system — preserves device-controlled Day/Night. */
:root{--green:#075837;--accent:#38a944;--accent-bright:#5bc84c;--ink:#172d29;--lime:#d9f5bf;--paper:#f5f8f4;--muted:#566c61;--line:#dfebdf;color-scheme:light dark}
html{scroll-behavior:smooth}
body{font-family:Inter,"Segoe UI",Arial,"Microsoft YaHei",sans-serif;line-height:1.6}
.topbar{background:#063f2c;letter-spacing:.055em}
header{background:#fff;max-width:none;padding:16px max(4vw,24px);gap:24px;box-shadow:0 7px 22px rgba(10,57,38,.045);position:relative;z-index:4}
header>nav:not(.languages){gap:22px}
header>nav:not(.languages) a{font-weight:650;transition:color .2s}
header>nav:not(.languages) a:hover{color:#17834b}
header .brand{flex:0 0 auto}
.brand{display:inline-flex;align-items:center;flex-direction:row;gap:9px;font-size:initial;line-height:1;letter-spacing:normal}
.brand img{height:48px;width:45px;object-fit:contain;flex-shrink:0}
.brand .brand-type{display:flex;flex-direction:column;gap:4px;margin:0;font-size:initial;letter-spacing:normal}
.brand .brand-type strong{font-weight:850;letter-spacing:-1.5px;font-size:27px;color:#218c43;white-space:nowrap}
.brand .brand-type strong span{font-size:inherit;letter-spacing:inherit;color:#192d2a;margin:0}
.brand .brand-type small{font-size:10px;letter-spacing:5px;color:#192d2a;margin-left:3px;font-weight:750}
header .languages{display:flex;align-items:center;gap:5px;font-size:11px;margin:0}
.languages a{border:0;border-radius:20px;color:#52695e;padding:6px 8px;font-weight:700}
.languages a[aria-current]{background:#e2f3e1;color:#076137}
.header-call{border:0;color:#fff;background:linear-gradient(120deg,#0b6a40,#4bae43);font-weight:750;border-radius:50px;padding:10px 17px;box-shadow:0 7px 18px rgba(22,110,57,.18)}
header a:focus-visible{outline-offset:3px}
main>section{padding:64px 5vw}
main>section:not(.hero):not(.closing):not(.process):not(.contact){max-width:1360px}
h1,h2,h3{letter-spacing:-.035em}
h1{font-size:clamp(2.5rem,4.4vw,4.65rem);max-width:820px}
h2{font-size:clamp(1.7rem,2.65vw,2.75rem)}
.eyebrow{color:#168147;letter-spacing:.11em;font-size:12px;font-weight:800}
.hero.home{max-width:1360px;min-height:550px;display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:28px;padding:70px 5%;margin:28px auto 10px;position:relative;align-items:center;isolation:isolate;overflow:hidden;border-radius:20px;background:linear-gradient(92deg,rgba(4,42,31,.97) 0%,rgba(4,49,34,.91) 39%,rgba(2,42,30,.56) 74%,rgba(5,42,30,.36)),url("/hero-warehouse.svg") center/cover no-repeat;color:#fff;box-shadow:0 22px 50px rgba(4,49,34,.17)}
.hero.home h1{color:#fff;margin-bottom:20px;text-shadow:0 2px 13px rgba(0,0,0,.17)}
.hero.home .eyebrow{color:#a8ef90}
.hero.home .lead{color:#e5eee9;font-size:17px;max-width:680px}
.hero.home .actions{gap:15px}
.button{background:linear-gradient(120deg,#239c43,#62bd42);border-radius:999px;padding:13px 23px;box-shadow:0 7px 21px rgba(12,74,42,.12)}
.button:hover{background:linear-gradient(120deg,#147f3a,#43a33d)}
.hero.home .button{background:#50b73d;color:#062f20}
.hero.home .text-link{display:inline-flex;align-items:center;min-height:48px;padding:0 17px;text-decoration:none;color:#fff;border:1px solid rgba(255,255,255,.72);border-radius:999px}
.hero.home .hero-panel{align-self:end;min-height:190px;background:rgba(6,58,40,.72);border:1px solid rgba(207,249,203,.35);backdrop-filter:blur(10px);border-radius:16px;color:white;padding:23px;gap:14px}
.hero.home .hero-panel>span{color:#b4f0ad}
.hero.home .hero-panel .hero-proof{font-size:25px;font-weight:800;line-height:1.3;letter-spacing:-.025em}
.hero.home .hero-panel a{color:#def5d9;border-color:#74ad81}
.hero:not(.home){background:linear-gradient(90deg,rgba(227,244,231,.48),transparent);border-radius:14px}
.hero:not(.home) figure img{height:340px}
.hero:not(.home) figure,.knowledge figure{border-radius:15px;overflow:hidden}
.hero:not(.home) .lead{font-size:17px}
.cards{gap:17px}
.cards article{background:#fff;border:1px solid #e2ece3;border-radius:14px;overflow:hidden;box-shadow:0 7px 24px rgba(14,58,39,.045);transition:transform .2s,box-shadow .2s}
.cards article:hover{transform:translateY(-4px);box-shadow:0 18px 28px rgba(14,58,39,.1)}
.cards figure img{height:205px}
.cards figure figcaption{padding:5px 18px;color:var(--muted)}
.card-body{padding:19px 22px 24px}
.card-body h3{font-size:20px;margin:8px 0}
.card-body h3 a{text-decoration:none}
.card-body h3 a:hover{color:#278e47}
.card-body p{line-height:1.6}
.section-title{margin-bottom:25px}
.section-title .eyebrow{margin-bottom:12px}
.solutions>a{border:1px solid #d9e7da;background:linear-gradient(120deg,#edf6ec,#e2f0df);border-radius:15px;min-height:260px;padding:30px}
.solutions>a:first-child{background-image:linear-gradient(90deg,rgba(8,50,35,.92),rgba(10,63,42,.7)),url("/hero-warehouse.svg");background-position:center;background-size:cover;color:#fff}
.solutions>a:first-child p,.solutions>a:first-child span{color:#e0ece2}
.solutions>a h3{margin:24px 0 12px}
.industry-grid{max-width:1360px;margin:auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.industry-card{display:flex;flex-direction:column;min-height:186px;padding:23px;gap:12px;border:1px solid var(--line);background:#fff;border-radius:14px;text-decoration:none;transition:transform .2s;overflow:hidden}
.industry-card:hover{transform:translateY(-3px)}
.industry-card .industry-icon{font-size:31px;width:56px;height:56px;display:grid;place-items:center;border-radius:14px;background:#e8f5e7}
.industry-card h3{font-size:17px;margin:0}
.industry-card p{margin:0;color:var(--muted);font-size:13px}
.industry-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:22px}
.industry-heading .eyebrow{margin-bottom:10px}
.industry-heading h2{margin:0}
.illustration-credit{font-size:11px;color:var(--muted);margin-top:14px}
.process{border-radius:20px;max-width:1360px!important;margin:10px auto;background:#e6f2e3}
.process li strong{color:var(--ink)}
.contact{border-radius:18px}
.closing{max-width:1360px!important;margin:25px auto 0;border-radius:20px;background:linear-gradient(115deg,#063f2d,#107149)}
.closing .button{background:#d4f5b6;color:#084229}
footer{max-width:none;background:#092f26;color:#dce8e0;margin-top:55px;padding:58px max(5vw,24px) 25px}
footer .brand-type strong span,footer .brand-type small{color:#f0f7ee}
footer .brand-type strong{color:#65d35b}
footer a{color:#e1eee6}
footer .footer-note{border-color:#305849;color:#bdd0c2}
.mobile-nav{display:none}
html[lang="zh-CN"] h1,html[lang="zh-CN"] h2,html[lang="zh-CN"] h3{letter-spacing:0}
@media(max-width:1100px){header{gap:12px;padding:16px 25px}header>nav:not(.languages){order:3;width:100%}.hero.home{margin:0 12px;grid-template-columns:1fr 220px}.industry-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){header>nav:not(.languages){display:none}.mobile-nav{display:block;order:5;width:100%}.mobile-nav>summary{list-style:none;cursor:pointer;padding:9px 13px;background:#e7f4e6;color:#0b633c;border-radius:10px;font-size:14px;font-weight:800}.mobile-nav>summary::-webkit-details-marker{display:none}.mobile-nav nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;padding:13px 0}.mobile-nav nav a{display:block;text-decoration:none;background:var(--paper);padding:10px;border-radius:8px;font-size:14px}.hero.home{grid-template-columns:1fr;gap:20px;min-height:570px;margin:0;padding:50px 26px;border-radius:0}.hero.home .hero-panel{display:none}main>section{padding:47px 24px}.cards{grid-template-columns:1fr 1fr}.industry-grid{grid-template-columns:1fr 1fr}.solutions{grid-template-columns:1fr}header .languages{margin-left:auto}.brand img{width:38px;height:42px}.brand .brand-type strong{font-size:23px}.brand .brand-type small{font-size:8px;letter-spacing:3.8px}}
@media(max-width:540px){.topbar{display:none}header{padding:12px 18px;gap:9px}.brand img{height:38px;width:35px}.brand .brand-type strong{font-size:22px}.brand .brand-type small{font-size:8px;letter-spacing:3.3px}.languages a{font-size:11px;padding:5px 6px}.hero.home{padding:48px 21px;min-height:560px}.hero.home h1{font-size:clamp(34px,9vw,44px);line-height:1.12}.hero.home .lead{font-size:15px}.hero.home .actions{align-items:stretch}.hero.home .button,.hero.home .text-link{font-size:13px}.cards,.industry-grid{grid-template-columns:1fr}.cards figure img{height:215px}.industry-card{min-height:135px}.industry-heading{display:block}.closing{border-radius:0}.closing h2{font-size:28px}.process{border-radius:0}footer{margin-top:0}}
@media(prefers-color-scheme:dark){:root{--paper:#101e18;--ink:#edf5ec;--muted:#b9cbbc;--line:#385344;--green:#0d5a3c;--lime:#d9f5bf}header{background:#172720;box-shadow:none}header>nav:not(.languages) a{color:#eef5eb}.brand .brand-type strong span,.brand .brand-type small{color:#f1f5f0}.languages a{color:#ccdecd}.languages a[aria-current]{color:#123d2a;background:#d9f5bf}.header-call{color:#fff}.cards article,.industry-card{background:#1c3025;border-color:#365142}.industry-card .industry-icon{background:#2a4f31}.solutions>a,.process,.contact{background:#20392a;border-color:#365142}.hero:not(.home){background:#1a2d23}.hero.home{background-image:linear-gradient(92deg,rgba(3,24,20,.97),rgba(3,30,23,.91) 39%,rgba(2,24,18,.63) 75%,rgba(5,22,18,.54)),url("/hero-warehouse.svg")}.mobile-nav>summary{background:#29563b;color:#e4f9dd}.mobile-nav nav a{color:#d4e7d6}.cards article:hover{box-shadow:0 15px 26px rgba(0,0,0,.24)}footer{background:#071c16}.closing{background:linear-gradient(115deg,#063527,#0c5939)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.cards article,.industry-card{transition:none}}

.mobile-nav{border:0;padding:0}
.mobile-nav>summary{display:block}
.hero.home{background-position:center,center}
@media(max-width:760px){.hero.home{background-position:center,64% center}}

/* Keep the approved two-tone logo legible on the dark footer. */
footer .brand .brand-type strong span,footer .brand .brand-type small{color:#eff9ef}
footer .brand .brand-type strong{color:#6bd76a}

/* Contact and Zalo always appear side by side when space allows. */
.zalo-action{display:inline-flex;align-items:center;justify-content:center;gap:7px;vertical-align:middle;white-space:nowrap;padding:10px 15px;border:1px solid #1374b5;border-radius:999px;color:#126eb0;background:#eff8ff;font-weight:750;text-decoration:none;font-size:13px;margin-left:8px;min-height:42px}
.zalo-action span{display:inline-grid;place-items:center;background:#147bce;color:white;width:24px;height:24px;border-radius:50%;font-weight:850}
.zalo-action:hover{background:#d9efff;color:#075a98}
.hero .actions,.closing{flex-wrap:wrap}
@media(max-width:540px){.zalo-action{margin-left:6px;padding:9px 12px;font-size:12px}.hero .actions .zalo-action{margin-left:0}}
@media(prefers-color-scheme:dark){.zalo-action{background:#153c56;border-color:#3d9ed8;color:#d6efff}.zalo-action:hover{background:#1b567b;color:#fff}}

/* Balanced, compact contact pair: identical optical and touch dimensions. */
.closing>a.button,.closing>a.zalo-action{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;width:172px;max-width:100%;padding:10px 15px;margin:0;border-radius:12px;font-size:13px;font-weight:700;line-height:1.25;text-align:center;white-space:nowrap;flex:0 0 172px;box-shadow:none;transition:background-color .18s ease,transform .18s ease}
.closing>a.zalo-action span{width:20px;height:20px;font-size:12px;flex:none}
.closing>a.button:hover,.closing>a.zalo-action:hover{transform:translateY(-1px)}
.closing{column-gap:10px;row-gap:10px}
@media(max-width:600px){.closing>a.button,.closing>a.zalo-action{width:calc(50% - 5px);flex:1 1 calc(50% - 5px);min-width:0;min-height:46px;padding:9px 7px;font-size:12px;border-radius:11px;letter-spacing:0}.closing>a.zalo-action span{width:18px;height:18px;font-size:11px}}
@media(prefers-reduced-motion:reduce){.closing>a.button,.closing>a.zalo-action{transition:none}.closing>a.button:hover,.closing>a.zalo-action:hover{transform:none}}


/* Uploaded logos retain their original 2048:682 aspect ratio in both themes. */
.brand-logo{display:block;width:264px;max-width:100%;line-height:0}
.brand-logo img{display:block;width:100%;height:auto;aspect-ratio:2048/682;object-fit:contain}
.brand{max-width:100%}
.hero-proof .brand-logo{width:100%}
@media(max-width:760px){header .brand-logo{width:230px}}
@media(max-width:540px){header .brand-logo{width:210px}header .brand{max-width:100%}}