:root{color-scheme:light;--brand:#2bb600;--brand-deep:#002800;--bg:#f7f8f5;--surface:#fff;--subtle:#e9efe6;--text:#152218;--muted:#4b5c4e;--border:#bcc9b9;--link:#236f12;--on-accent:#071008;--focus:#236f12;--control-border:#71836e;--max:1360px;--gutter:clamp(20px,4vw,64px);--radius:4px;--ease:cubic-bezier(.16,1,.3,1)}
:root[data-theme=dark]{color-scheme:dark;--brand:#40c057;--brand-deep:#2d6a4f;--bg:#0a0f1c;--surface:#111827;--subtle:#172132;--text:#e8ecf4;--muted:#a9b5c8;--border:rgba(255,255,255,.1);--link:#75db8a;--focus:#95d5b2;--control-border:rgba(149,213,178,.36);--on-accent:#06110b}

*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:28px}body{margin:0;background:var(--bg);color:var(--text);font:17px/1.65 Arial,Helvetica,sans-serif}button,input,select{font:inherit}a{color:inherit;text-underline-offset:5px}button,a,input,select{touch-action:manipulation}button,select{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.55}img{max-width:100%;display:block}button{color:inherit}h1,h2,h3,p{margin:0}h1,h2,h3{font-weight:600;letter-spacing:-.045em}h1{font-size:clamp(44px,5.3vw,78px);line-height:1.08}h2{font-size:clamp(32px,3.6vw,50px);line-height:1.16}h3{font-size:25px;line-height:1.25}p{max-width:65ch}a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid var(--focus);outline-offset:5px}.wrap{width:min(var(--max),calc(100% - var(--gutter)*2));margin-inline:auto}.muted{color:var(--muted)}.skip{position:fixed;top:-100px;left:24px;z-index:30;background:var(--surface);padding:12px}.skip:focus{top:12px}.notice{background:var(--subtle);color:var(--muted);font-size:12px;padding:8px 0}.notice .wrap{display:flex;justify-content:space-between;gap:16px}.notice a{color:var(--text)}.header{border-bottom:1px solid var(--border)}.header-inner{display:flex;align-items:center;gap:28px;min-height:98px}.brand{display:flex;align-items:center;gap:12px;flex-shrink:0;text-decoration:none}.brand img{width:46px;height:46px}.brand b{font-size:19px;letter-spacing:.03em;line-height:1.15;display:block}.brand small{font-size:10px;letter-spacing:.15em;color:var(--muted)}nav{display:flex;align-items:center;gap:24px;margin-left:auto}nav a{text-decoration:none;font-size:14px;white-space:nowrap}nav a:hover{color:var(--link)}.utilities{display:flex;align-items:center;gap:12px}.utilities a{font-size:13px;text-decoration:none;min-width:44px;min-height:44px;display:grid;place-items:center;border:1px solid var(--border)}.mode select{min-height:44px;padding:8px 24px 8px 9px;font-size:12px;background:var(--surface);border:1px solid var(--border);border-radius:0;color:var(--text);max-width:110px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.mobile-menu{display:none}.btn{display:inline-flex;align-items:center;justify-content:center;gap:16px;min-height:50px;padding:13px 23px;border:1px solid var(--border);border-radius:var(--radius);background:transparent;color:var(--text);font-size:14px;font-weight:600;text-decoration:none;line-height:1.4;transition:background .18s var(--ease),transform .18s var(--ease)}.btn:hover{background:var(--subtle)}.btn.primary{background:var(--brand);color:var(--on-accent);border-color:var(--brand)}.btn.primary:hover{background:#45ce19}.arrow{width:19px;height:19px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.6}.actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.hero{display:grid;grid-template-columns:1.04fr 1fr;gap:6%;padding:64px 0 76px;align-items:center}.hero h1 span{color:var(--link)}.hero p{color:var(--muted);margin:28px 0 34px;max-width:38ch;font-size:18px}.hero-media{margin:0;position:relative;background:#002800;overflow:hidden}.hero-media img{width:100%;height:540px;object-fit:cover;object-position:center 38%}.hero-media figcaption{position:absolute;left:0;right:0;bottom:0;background:#002800;color:white;padding:20px 26px;display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13px}.hero-media figcaption small{font-size:10px;max-width:14ch;opacity:.85}.section{padding-block:90px;border-top:1px solid var(--border)}.section-head{display:flex;justify-content:space-between;align-items:flex-start;gap:64px;margin-bottom:42px}.section-head h2{max-width:16ch}.section-head p{max-width:42ch;color:var(--muted);font-size:16px}.section-no{font-size:12px;letter-spacing:.1em;color:var(--muted);display:block;margin-bottom:14px}.finder{display:grid;grid-template-columns:1fr 1fr;gap:60px}.field-label{display:block;font-size:14px;font-weight:bold;margin-bottom:12px}.choice-row{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:26px}.choice{border:1px solid var(--border);background:var(--surface);border-radius:var(--radius);padding:12px 18px;min-height:47px;font-size:14px}.choice[aria-pressed=true]{background:var(--text);border-color:var(--text);color:var(--bg)}.field-select{width:100%;padding:13px 14px;background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:var(--radius)}.result{background:var(--subtle);padding:32px;border-left:3px solid var(--brand)}.result h3{font-size:26px;margin:8px 0 16px}.result p{font-size:15px;color:var(--muted);margin-bottom:20px}.result .selection{font-size:12px;letter-spacing:.06em;color:var(--link)}.catalog{background:var(--surface)}.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}.product{border-top:1px solid var(--border);padding-top:24px}.product-image{background:#fff;display:grid;place-items:center;height:340px;margin-bottom:23px}.product-image img{height:285px;width:auto;max-width:90%;object-fit:contain}.product .family{font-size:12px;color:var(--muted);letter-spacing:.08em;margin-bottom:10px}.product h3{font-size:25px;margin-bottom:8px}.product p{font-size:14px;color:var(--muted);margin-bottom:18px}.product-actions{display:flex;align-items:center;justify-content:space-between;gap:12px}.product-actions a{font-size:13px;padding-block:12px}.check{font-size:13px;display:flex;align-items:center;gap:8px;min-height:44px;cursor:pointer}.check input{accent-color:var(--link);width:18px;height:18px}.compare-bar{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:34px;padding-top:24px;border-top:1px solid var(--border)}.compare-bar p{font-size:13px;color:var(--muted)}.technology{display:grid;grid-template-columns:.9fr 1.1fr;gap:8%;align-items:center}.technology h2{margin:12px 0 24px}.technology p{color:var(--muted);margin-bottom:28px}.video-button{padding:0;border:0;background:#002800;position:relative;width:100%;overflow:hidden;text-align:left}.video-button>img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;opacity:.7;transition:opacity .2s}.video-button:hover>img{opacity:1}.video-label{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;color:white;gap:18px;font-size:15px;text-shadow:0 1px 5px #000}.play{border:1px solid white;border-radius:50%;width:64px;height:64px;display:grid;place-items:center;background:#002800b3}.play svg{width:24px;height:24px;fill:white}.media-caption{font-size:12px;margin-top:12px;color:var(--muted)}.knowledge-grid{display:grid;grid-template-columns:1fr 1.35fr;gap:9%}.knowledge-grid p{margin-top:20px;color:var(--muted);font-size:16px}.topics{list-style:none;padding:0;margin:0}.topics li{border-top:1px solid var(--border)}.topics li:last-child{border-bottom:1px solid var(--border)}.topics a{display:flex;align-items:center;justify-content:space-between;padding:20px 0;text-decoration:none;font-size:22px;letter-spacing:-.025em}.topics a:hover{color:var(--link)}.topics small{font-size:11px;color:var(--muted);margin-right:22px;letter-spacing:.05em}.partner{background:var(--brand-deep);color:white;padding-block:66px}.partner .wrap{display:flex;justify-content:space-between;align-items:center;gap:45px}.partner h2{font-size:clamp(32px,3.4vw,48px);max-width:18ch}.partner p{font-size:15px;color:#c8d4c5;max-width:40ch;margin:20px 0 0}.partner .btn{background:var(--brand);color:var(--on-accent);border-color:var(--brand);white-space:nowrap}.footer{padding:62px 0 28px}.footer-main{display:grid;grid-template-columns:2fr 1fr 1fr;gap:50px;margin-bottom:50px}.footer h3{font-size:14px;letter-spacing:0;margin-bottom:16px}.footer p{font-size:14px;color:var(--muted);margin:18px 0;max-width:40ch}.footer-links{display:flex;flex-direction:column;align-items:flex-start;gap:8px}.footer-links a{font-size:14px;min-height:32px}.footer-bottom{font-size:11px;color:var(--muted);border-top:1px solid var(--border);padding-top:23px;display:flex;justify-content:space-between;gap:20px}dialog{border:1px solid var(--border);border-radius:6px;padding:32px;background:var(--surface);color:var(--text);width:min(1000px,94vw);max-height:90vh}dialog::backdrop{background:#000b}.dialog-head{display:flex;align-items:flex-start;justify-content:space-between;gap:22px;margin-bottom:25px}.dialog-head h2{font-size:30px}.close{border:1px solid var(--border);background:transparent;color:var(--text);padding:10px 14px;font-size:13px;min-height:44px}.table-scroll{overflow:auto;border:1px solid var(--border);margin-block:22px}.compare-table{width:100%;border-collapse:collapse;font-size:14px;min-width:630px}.compare-table th,.compare-table td{text-align:left;padding:18px;border:1px solid var(--border);vertical-align:top}.compare-table th{background:var(--subtle)}.compare-table caption{text-align:left;padding:14px;color:var(--muted);font-size:12px}.dialog-note{font-size:13px;color:var(--muted)}.video-frame iframe{width:100%;aspect-ratio:16/9;border:0}.doc-page{padding-block:64px}.doc-page h1{font-size:clamp(40px,5vw,68px);max-width:19ch}.doc-page h2{font-size:32px;margin-bottom:22px}.doc-page section{padding-block:42px;border-bottom:1px solid var(--border)}.doc-page p{margin-block:18px;color:var(--muted)}.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:32px}.metric{padding:24px 0;border-top:2px solid var(--brand)}.metric b{display:block;font-size:42px;letter-spacing:-.05em}.metric span{font-size:14px;color:var(--muted)}.doc-links{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.doc-links a{padding:18px;border:1px solid var(--border);text-decoration:none;font-size:15px}.swatches{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}.swatch{font-size:13px}.swatch i{display:block;height:95px;margin-bottom:10px;border:1px solid #718070}.doc-table{width:100%;border-collapse:collapse;font-size:14px}.doc-table td,.doc-table th{border-bottom:1px solid var(--border);padding:13px;text-align:left}
@media(min-width:1920px){.hero-media img{height:600px}.hero{padding-block:88px}.hero h1{font-size:82px}}
@media(max-width:1200px){nav{gap:16px}.header-inner{gap:16px}.brand small{display:none}.brand b{font-size:16px}.brand img{width:38px;height:38px}.utilities{gap:8px}.mode select{max-width:85px}.hero{gap:5%}.hero-media img{height:480px}}
@media(max-width:1023px){.header-inner{min-height:84px}.header nav{display:none}.utilities{margin-left:auto}.mobile-menu{display:block;border-top:1px solid var(--border)}.mobile-menu summary{font-size:14px;padding:13px 0;cursor:pointer}.mobile-menu nav{display:flex;margin:0;flex-wrap:wrap;padding:8px 0 20px;gap:8px 22px}.mobile-menu nav a{min-height:44px;display:flex;align-items:center}.hero{padding-block:42px 60px}.hero-media img{height:450px}.hero h1{font-size:52px}.section{padding-block:64px}.finder{gap:28px}.section-head{gap:30px}.product-grid{grid-template-columns:repeat(2,1fr)}.product:last-child{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center}.technology{gap:40px}.footer-main{gap:30px}.knowledge-grid{gap:40px}}
@media(max-width:767px){body{font-size:16px}.notice{font-size:10px}.notice .wrap{gap:8px}.notice a{white-space:nowrap}.header-inner{min-height:76px;gap:10px}.brand b{font-size:15px}.brand img{width:35px;height:35px}.brand{gap:8px}.utilities{gap:6px}.utilities a{min-width:38px}.mode select{font-size:11px;padding-inline:6px;max-width:88px}.hero{grid-template-columns:1fr;gap:34px;padding-top:38px}.hero h1{font-size:clamp(41px,10.7vw,64px);max-width:14ch}.hero p{font-size:16px;margin:22px 0 27px}.hero-media img{height:390px;object-position:center 33%}.hero-media figcaption{padding:16px 18px;font-size:12px}.hero-media figcaption small{font-size:9px}.section{padding-block:48px}.section-head{display:block;margin-bottom:30px}.section-head h2{margin-bottom:22px;max-width:19ch}.section-head p{font-size:15px}.finder,.technology,.knowledge-grid{grid-template-columns:1fr;gap:28px}.result{padding:24px}.result h3{font-size:25px}.choice-row{gap:8px}.choice{padding:11px 15px}.product-grid{grid-template-columns:1fr;gap:40px}.product:last-child{display:block;grid-column:auto}.product-image{height:300px}.product-image img{height:255px}.product h3{font-size:25px}.compare-bar{align-items:stretch;flex-direction:column;gap:16px}.compare-bar .btn{width:100%}.technology h2{max-width:16ch}.topics a{font-size:20px;padding:18px 0}.topics small{margin-right:16px}.partner .wrap{display:block}.partner{padding-block:46px}.partner .btn{margin-top:28px}.footer-main{grid-template-columns:1fr 1fr;gap:32px}.footer-main>div:first-child{grid-column:1/-1}.footer-bottom{display:block}.footer-bottom span{display:block;margin-bottom:8px}dialog{padding:20px}.dialog-head h2{font-size:25px}.dialog-head{gap:15px}.dialog-note{font-size:12px}.metrics{grid-template-columns:repeat(2,1fr)}.doc-links{grid-template-columns:1fr}.swatches{grid-template-columns:repeat(3,1fr)}.doc-page{padding-block:40px}.doc-page h1{font-size:42px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}

.mode select,.field-select,.choice,.close,.btn{border-color:var(--control-border)}.video-title-label{background:#002800;color:#fff;padding:8px 16px;text-shadow:none}

.comparison-mobile{display:none}@media(max-width:767px){.compare-table{display:none}.table-scroll{border:0;overflow:visible}.comparison-mobile{display:grid;gap:24px}.comparison-mobile article{border-top:2px solid var(--brand);padding-top:18px}.comparison-mobile h3{font-size:22px;line-height:1.3}.comparison-mobile dl{display:grid;grid-template-columns:1fr 1fr;gap:12px 18px;margin:18px 0;font-size:13px}.comparison-mobile dt{color:var(--muted)}.comparison-mobile dd{margin:0}.comparison-mobile a{font-size:13px;min-height:44px;display:inline-flex;align-items:center}}

/* ===== v1 redesign: de-box + hero slider + motion polish ===== */
.btn{border-radius:10px}
.choice{border-radius:10px}
.field-select,.mode select,.pdp-qty{border-radius:9px}
.result{border-radius:16px}
.product-image{border-radius:12px}
.hero-media{border-radius:18px}
.video-button{border-radius:16px}
.product{transition:transform .28s var(--ease)}
.product:hover{transform:translateY(-5px)}
.product-image{transition:box-shadow .28s var(--ease)}
.product:hover .product-image{box-shadow:0 14px 34px rgba(20,40,20,.12)}
.btn{transition:background .2s var(--ease),transform .2s var(--ease),box-shadow .2s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn.primary:hover{box-shadow:0 10px 24px rgba(43,182,0,.28)}
.topics a{transition:padding-left .22s var(--ease),color .22s}
.topics a:hover{padding-left:10px}
.choice{transition:transform .18s var(--ease),background .18s,border-color .18s}
.choice:hover{transform:translateY(-1px)}
.video-button>img{transition:transform .5s var(--ease),opacity .3s}
.video-button:hover>img{transform:scale(1.04)}
/* Hero slider */
.hero-media{position:relative;overflow:hidden;background:#0a1f0d}
.hero-track{position:relative;width:100%;height:560px}
.hero-slide{position:absolute;inset:0;margin:0;opacity:0;transition:opacity .9s var(--ease)}
.hero-slide.is-active{opacity:1}
.hero-slide img{width:100%;height:100%;object-fit:cover;object-position:center 48%}
.hero-media.cfc-kb .hero-slide.is-active img{animation:cfc-kenburns 8s ease-out both}
@keyframes cfc-kenburns{from{transform:scale(1.07)}to{transform:scale(1)}}
.hero-cap{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;align-items:flex-end;gap:12px;padding:44px 24px 18px;font-size:13px;color:#fff;background:linear-gradient(transparent,rgba(0,22,4,.66));pointer-events:none}
.hero-cap span{font-weight:600;letter-spacing:.02em}
.hero-dots{position:absolute;bottom:16px;right:20px;display:flex;gap:8px;z-index:3}
.hero-dot{width:9px;height:9px;padding:0;border-radius:50%;border:1.5px solid rgba(255,255,255,.85);background:transparent;cursor:pointer;transition:width .25s var(--ease),background .25s,border-radius .25s;min-height:auto}
.hero-dot.is-active{background:#fff;width:24px;border-radius:5px}
.hero-dot:focus-visible{outline:3px solid #fff;outline-offset:3px}
/* Scroll reveal (content visible by default; JS adds .cfc-in) */
.cfc-reveal{opacity:1;transform:none}
:root[data-cfc-motion=on] .cfc-reveal{opacity:0;transform:translateY(22px)}
:root[data-cfc-motion=on] .cfc-reveal.cfc-in{opacity:1;transform:none;transition:opacity .6s var(--ease),transform .6s var(--ease)}
@media(max-width:1023px){.hero-track{height:460px}}
@media(max-width:767px){.hero-track{height:340px}.hero-cap{padding:32px 16px 14px;font-size:12px}.hero-media{border-radius:14px}}
@media(prefers-reduced-motion:reduce){.hero-media.cfc-kb .hero-slide.is-active img{animation:none}.hero-slide{transition:none}}
/* Growth-stage taxonomy note (proposed, pending CFC approval) */
.stage-note{margin:10px 0 0;font-size:12px;line-height:1.5;color:var(--muted);border-left:3px solid var(--brand);padding-left:10px;max-width:52ch}

/* ===== Capability section ===== */
.capability{background:var(--surface)}
.cap-layout{display:grid;grid-template-columns:1.12fr .88fr;gap:6%;align-items:start}
.cap-metrics{display:flex;flex-direction:column;gap:22px}
.cap-metric{position:relative;padding:14px 16px;border:1px solid transparent;border-radius:14px;transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .28s var(--ease),background .28s var(--ease)}
.cap-metric:hover,.cap-metric:focus-within{transform:translateY(-3px);border-color:color-mix(in srgb,var(--brand) 38%,transparent);background:color-mix(in srgb,var(--brand) 5%,transparent);box-shadow:0 14px 34px rgba(20,40,20,.12)}
.cap-metric-top{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:9px}
.cap-name{font-size:15px;color:var(--muted);transition:color .28s var(--ease)}
.cap-metric:hover .cap-name,.cap-metric:focus-within .cap-name{color:var(--text)}
.cap-value{display:flex;align-items:baseline;gap:6px;white-space:nowrap}
.cap-value b{font-size:27px;letter-spacing:-.03em;transition:color .28s var(--ease)}
.cap-metric:hover .cap-value b,.cap-metric:focus-within .cap-value b{color:var(--brand)}
.cap-value small{font-size:12px;color:var(--muted)}
.cap-track{height:8px;background:var(--subtle);border-radius:5px;overflow:hidden}
.cap-bar{display:block;height:100%;width:var(--pct);background:linear-gradient(90deg,var(--brand),var(--brand-deep));border-radius:5px;position:relative;overflow:hidden}
.cap-bar::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);transform:translateX(-100%);animation:cap-shimmer 2.4s var(--ease) infinite}
.cap-live .cap-bar{width:0;animation:cap-grow 1.1s var(--ease) forwards}
@keyframes cap-grow{to{width:var(--pct)}}
@keyframes cap-shimmer{to{transform:translateX(100%)}}
.cap-cards{display:flex;flex-direction:column;gap:16px}
.cap-card{border:1px solid var(--border);border-radius:14px;padding:22px;background:var(--bg);transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .28s var(--ease);position:relative;overflow:hidden}
.cap-card::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(135deg,color-mix(in srgb,var(--brand) 14%,transparent),transparent 55%);opacity:0;transition:opacity .35s var(--ease);pointer-events:none}
.cap-card:hover,.cap-card:focus-visible{transform:translateY(-5px);box-shadow:0 16px 38px rgba(20,40,20,.14);border-color:color-mix(in srgb,var(--brand) 42%,transparent);outline:none}
.cap-card:hover::before,.cap-card:focus-visible::before{opacity:1}
.cap-card:focus-visible{outline:3px solid color-mix(in srgb,var(--brand) 70%,transparent);outline-offset:3px}
.fc-icon{width:30px;height:30px;fill:none;stroke:var(--brand);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;margin-bottom:12px;transition:transform .4s var(--ease)}
.cap-card:hover .fc-icon,.cap-card:focus-visible .fc-icon{transform:scale(1.14) rotate(6deg)}
.cap-card h3{font-size:19px;margin-bottom:8px}
.cap-card p{font-size:14px;color:var(--muted);max-width:38ch}
@media(max-width:900px){.cap-layout{grid-template-columns:1fr;gap:36px}}
@media(prefers-reduced-motion:reduce){.cap-live .cap-bar{animation:none;width:var(--pct)}.cap-bar::after{animation:none}.cap-metric,.cap-card{transition:none}.cap-metric:hover,.cap-metric:focus-within,.cap-card:hover,.cap-card:focus-visible{transform:none;box-shadow:none}}

/* ===== Chuyên mục quan tâm (home focus grid) ===== */
.focus-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:6px}
.focus-grid{list-style:none;padding-left:0}
.sol-teaser{display:grid;gap:22px}
.sol-teaser-lead{color:var(--muted);max-width:70ch;margin:0}
.sol-teaser-crops{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:0}
.sol-teaser-crops .choice{display:inline-flex;align-items:center;text-decoration:none;transition:background .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease)}
.sol-teaser-crops .choice:hover{background:var(--subtle);border-color:var(--link);color:var(--link)}
/* --- Touch targets on phones -------------------------------------------------
   Measured at 320px: the drawer's two dropdown triggers were 35px because
   `.mobile-menu .nav-top` explicitly set `min-height:0`, and the phone/email
   links were 18-23px because they are inline. Those links are the main
   conversion action for a farmer on a phone, so they get a real tap area. */
@media(max-width:1023px){
  .mobile-menu .nav-top{min-height:44px;padding:8px 0}
  .mobile-menu .nav-sub a{min-height:44px;display:flex;align-items:center}
}
@media(max-width:767px){
  .footer-main a:not(.brand){min-height:44px;display:inline-flex;align-items:center}
  .footer-links{gap:2px}
  /* standalone link, not inline in a sentence */
  .footer-bottom a{min-height:40px;display:inline-flex;align-items:center}
}
/* The header control row (search, language, motion, theme) outgrew a 320-390px
   viewport once the language switch was added: measured 395px against a 262px
   content box, so the theme select was clipped off-screen. body has
   overflow-x:hidden, which hid it from scrollWidth-based checks. Let the row
   wrap onto its own line instead of dropping controls. */
@media(max-width:767px){
  .header-inner{flex-wrap:wrap;gap:8px 10px;padding-block:10px;min-height:0}
  .brand{flex:0 1 auto;min-width:0}
  /* Stay on the brand's row and hug the right edge; wrap to a second row only
     when the controls genuinely do not fit (inner pages carry four of them,
     the homepage only two). */
  .utilities{margin-left:auto;justify-content:flex-end;flex-wrap:wrap;gap:6px}
}
@media(max-width:400px){
  .mode select{max-width:78px;padding-inline:5px}
  .utilities a{min-width:40px}
}
/* At 320px the brand + two controls came to 281px against a 280px content box —
   one pixel short of sharing a row. Trim the select so they fit. */
@media(max-width:360px){
  .header-inner{column-gap:8px}
  .mode select{max-width:70px}
  .brand b{font-size:14px}
}
/* The hero's pointer-tilt is desktop-only: cfc.js sets --tilt-* only when
   pointer:fine. On touch, `transform-style:preserve-3d` prevents Safari from
   clipping with overflow:hidden + border-radius, so the track's scale(1.012)
   spilled visibly past the rounded hero frame on iPhone. */
@media(hover:none),(pointer:coarse){
  :root .hero-media{transform-style:flat}
  :root .hero-track{transform:none}
}
/* The partner band keeps its dark-green background in BOTH themes, so its
   buttons must be styled against that band rather than the page. Without this,
   `:root[data-theme=dark] .btn:not(.primary)` (0-4-0) beats `.partner .btn`
   (0-2-0) and a secondary button there sinks into the green. */
.partner .btn:not(.primary),:root[data-theme=dark] .partner .btn:not(.primary){background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.5);color:#fff}
.partner .btn:not(.primary):hover,:root[data-theme=dark] .partner .btn:not(.primary):hover{background:rgba(255,255,255,.16);border-color:#fff}
.focus-card{border:1px solid var(--border);border-radius:14px;overflow:hidden;background:var(--surface);transition:transform .28s var(--ease),box-shadow .28s}
.focus-card:hover{transform:translateY(-5px);box-shadow:0 14px 34px rgba(20,40,20,.12)}
.focus-card .post-thumb{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--subtle)}
.focus-card .post-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.focus-card:hover .post-thumb img{transform:scale(1.05)}
.focus-card .post-meta{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);padding:16px 18px 0}
.focus-tag{font-size:11px;font-weight:700;letter-spacing:.03em;color:var(--on-accent);background:var(--brand);padding:3px 9px;border-radius:20px}
.focus-card h3{font-size:18px;line-height:1.32;padding:8px 18px 20px;margin:0}
.focus-card h3 a{text-decoration:none}.focus-card h3 a:hover{color:var(--link)}
.focus-links{display:flex;flex-wrap:wrap;gap:24px;margin-top:34px}
.focus-links a{font-size:15px;text-decoration:none;color:var(--link);display:inline-flex;align-items:center;gap:8px;transition:gap .2s var(--ease)}
.focus-links a:hover{gap:12px}
.focus-links .arrow{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6}
@media(max-width:900px){.focus-grid{grid-template-columns:repeat(2,1fr);gap:20px}}
@media(max-width:640px){.focus-grid{grid-template-columns:1fr}}

/* ===== Dropdown nav (Kiến thức) ===== */
.nav-item{position:relative;display:flex;align-items:center}
.nav-top{display:inline-flex;align-items:center;gap:3px;background:none;border:0;font:inherit;font-size:14px;color:inherit;padding:0;cursor:pointer;white-space:nowrap;min-height:44px}
.nav-top:hover{color:var(--link)}
.nav-caret{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s var(--ease)}
.nav-item:hover .nav-caret,.nav-item:focus-within .nav-caret,.nav-item.open .nav-caret{transform:rotate(180deg)}
.nav-sub{position:absolute;top:100%;left:-16px;min-width:238px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:8px;box-shadow:0 18px 44px rgba(20,40,20,.16);display:flex;flex-direction:column;gap:2px;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .2s var(--ease),transform .2s var(--ease),visibility .2s;z-index:40}
.nav-item:hover .nav-sub,.nav-item:focus-within .nav-sub,.nav-item.open .nav-sub{opacity:1;visibility:visible;transform:translateY(7px)}
.nav-sub a{padding:11px 14px;border-radius:8px;font-size:14px;text-decoration:none;white-space:nowrap;color:var(--text)}
.nav-sub a:hover{background:var(--subtle);color:var(--link)}
@media(max-width:1023px){.mobile-menu .nav-item{flex-direction:column;align-items:flex-start;width:100%}.mobile-menu .nav-top{padding:6px 0;min-height:0}.mobile-menu .nav-sub{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;padding:2px 0 6px 14px;min-width:0;background:none}.mobile-menu .nav-caret{display:none}}

/* ===== Motion polish (adapted from reference: smooth, tokenised) ===== */
/* Sticky header with backdrop blur */
.header{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transition:box-shadow .4s var(--ease),background .4s var(--ease)}
.header.cfc-scrolled{box-shadow:0 6px 30px rgba(0,0,0,.08);background:color-mix(in srgb,var(--bg) 92%,transparent)}
/* Gradient text accent on hero highlight */
.hero h1 span{background:linear-gradient(118deg,var(--brand),var(--link));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
/* Section heading accent line */
.section-head h2{position:relative}
.section-head h2::after{content:"";display:block;width:52px;height:3px;margin-top:18px;border-radius:2px;background:linear-gradient(90deg,var(--brand),var(--brand-deep))}
/* CTA shine sweep */
.btn.primary{position:relative;overflow:hidden}
.btn.primary::before{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);transform:skewX(-18deg);transition:left .6s var(--ease)}
.btn.primary:hover::before{left:130%}
/* Card gradient overlay on hover */
.product,.focus-card,.cap-card,.doc-links a{position:relative;isolation:isolate}
.product::after,.focus-card::after,.cap-card::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(135deg,rgba(43,182,0,.10),transparent 60%);opacity:0;transition:opacity .4s var(--ease);pointer-events:none;z-index:-1}
.product:hover::after,.focus-card:hover::after,.cap-card:hover::after{opacity:1}
/* Icon hover: scale + rotate */
.fc-icon{transition:transform .4s var(--ease)}
.cap-card:hover .fc-icon{transform:scale(1.12) rotate(5deg)}
/* Product image zoom on card hover */
.product-image img{transition:transform .6s var(--ease)}
.product:hover .product-image img{transform:scale(1.05)}

/* ===== AgriTech dark fidelity pass (reference: cfc-vietnam-redesign.html) ===== */
html,body{overflow-x:hidden}
body{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,Helvetica,sans-serif}
:root[data-theme=dark] body{background:radial-gradient(ellipse at 18% 8%,rgba(45,106,79,.22),transparent 38rem),radial-gradient(ellipse at 82% 18%,rgba(64,192,87,.11),transparent 34rem),var(--bg)}
:root[data-theme=dark] body::selection{background:rgba(64,192,87,.42);color:#fff}
:root[data-theme=dark] ::-webkit-scrollbar{width:9px}
:root[data-theme=dark] ::-webkit-scrollbar-track{background:#0a0f1c}
:root[data-theme=dark] ::-webkit-scrollbar-thumb{background:#2d6a4f;border-radius:10px;border:2px solid #0a0f1c}
.cfc-noise{position:fixed;inset:0;z-index:9998;pointer-events:none;opacity:.026;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.72'/%3E%3C/svg%3E")}
:root:not([data-theme=dark]) .cfc-noise{display:none}
:root[data-theme=dark] .notice{background:rgba(10,15,28,.9);border-bottom:1px solid rgba(255,255,255,.06)}
:root[data-theme=dark] .header{background:rgba(10,15,28,.76);border-color:rgba(255,255,255,.07);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
:root[data-theme=dark] .header.cfc-scrolled{background:rgba(10,15,28,.95);box-shadow:0 12px 40px rgba(0,0,0,.32)}
:root[data-theme=dark] .nav-sub,:root[data-theme=dark] dialog{background:rgba(17,24,39,.94);border-color:rgba(255,255,255,.11);box-shadow:0 24px 70px rgba(0,0,0,.38);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px)}

.hero{position:relative;isolation:isolate;min-height:clamp(620px,calc(100svh - 130px),820px);padding-block:72px 86px}
.hero::before{content:"";position:absolute;z-index:-2;inset:0;background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);background-size:60px 60px;mask-image:linear-gradient(to bottom,black 12%,transparent 95%);-webkit-mask-image:linear-gradient(to bottom,black 12%,transparent 95%);pointer-events:none}
.hero::after{content:"";position:absolute;z-index:-3;width:64%;aspect-ratio:1;right:-20%;top:-30%;border-radius:50%;background:radial-gradient(circle,rgba(64,192,87,.17),rgba(45,106,79,.06) 42%,transparent 70%);filter:blur(10px);pointer-events:none}
:root:not([data-theme=dark]) .hero::before,:root:not([data-theme=dark]) .hero::after{display:none}
.hero h1{font-weight:800;letter-spacing:-.055em;text-wrap:balance}
.hero h1 span{background:linear-gradient(135deg,#40c057 0%,#75db8a 48%,#2d6a4f 100%);background-size:180% 180%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.hero-media{border:1px solid rgba(255,255,255,.1);box-shadow:0 28px 90px rgba(0,0,0,.28),0 0 44px rgba(64,192,87,.09);transform:translateZ(0)}
:root[data-theme=dark] .hero-cap{background:linear-gradient(transparent,rgba(5,12,20,.84))}
.hero-cap span{letter-spacing:.08em;text-transform:uppercase;font-size:11px}
.cfc-particle-field{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.cfc-particle{position:absolute;left:var(--x);top:var(--y);width:var(--size);height:var(--size);border-radius:50%;background:#40c057;box-shadow:0 0 10px rgba(64,192,87,.65);opacity:.2}
:root[data-cfc-motion=on] .cfc-particle{animation:cfc-particle-rise var(--duration) linear var(--delay) infinite}
@keyframes cfc-particle-rise{0%{transform:translate3d(0,40px,0) scale(.85);opacity:0}14%{opacity:.45}72%{opacity:.25}100%{transform:translate3d(var(--drift),-520px,0) scale(.15);opacity:0}}
:root[data-cfc-motion=on] .hero-media{animation:cfc-hero-float 7s ease-in-out infinite}
:root[data-cfc-motion=on] .hero h1 span{animation:cfc-gradient-shift 8s ease infinite}
@keyframes cfc-hero-float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-10px) rotate(.25deg)}}
@keyframes cfc-gradient-shift{0%,100%{background-position:0 50%}50%{background-position:100% 50%}}

.cfc-marquee{position:relative;overflow:hidden;contain:layout paint;max-width:100vw;border-block:1px solid rgba(64,192,87,.16);background:linear-gradient(90deg,rgba(45,106,79,.16),rgba(64,192,87,.08),rgba(45,106,79,.16));padding:14px 0;color:var(--muted)}
.cfc-marquee::before,.cfc-marquee::after{content:"";position:absolute;z-index:2;top:0;bottom:0;width:9vw;pointer-events:none}
.cfc-marquee::before{left:0;background:linear-gradient(90deg,var(--bg),transparent)}
.cfc-marquee::after{right:0;background:linear-gradient(-90deg,var(--bg),transparent)}
.cfc-marquee-track{display:flex;width:max-content;white-space:nowrap;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.cfc-marquee-track span{display:inline-flex;align-items:center;gap:20px;padding-right:20px}
.cfc-marquee-track i{width:5px;height:5px;border-radius:50%;background:var(--brand);box-shadow:0 0 12px rgba(64,192,87,.7)}
:root[data-cfc-motion=on] .cfc-marquee-track{animation:cfc-marquee 32s linear infinite}
.cfc-marquee:hover .cfc-marquee-track{animation-play-state:paused}
@keyframes cfc-marquee{to{transform:translateX(-50%)}}

:root[data-theme=dark] .section{border-color:rgba(255,255,255,.075)}
:root[data-theme=dark] .catalog,:root[data-theme=dark] .capability{background:rgba(17,24,39,.58)}
:root[data-theme=dark] .result,:root[data-theme=dark] .cap-card,:root[data-theme=dark] .focus-card{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.09);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
:root[data-theme=dark] .result{box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 24px 70px rgba(0,0,0,.16)}
:root[data-theme=dark] .choice,:root[data-theme=dark] .field-select,:root[data-theme=dark] .mode select{background:rgba(255,255,255,.035)}
:root[data-theme=dark] .choice[aria-pressed=true]{background:linear-gradient(135deg,#2d6a4f,#40c057);border-color:#40c057;color:#fff;box-shadow:0 0 24px rgba(64,192,87,.2)}
.section-head h2::after{width:76px;background:linear-gradient(90deg,#40c057,#2d6a4f);box-shadow:0 0 18px rgba(64,192,87,.22)}
.section-no{color:var(--link);font-weight:700}
.btn.primary{background:linear-gradient(135deg,#2d6a4f,#40c057);border-color:#40c057;color:#fff;background-size:150% 150%}
.btn.primary:hover{background:linear-gradient(135deg,#347b5b,#49d462);box-shadow:0 12px 36px rgba(64,192,87,.28)}
:root[data-theme=dark] .btn:not(.primary){background:rgba(255,255,255,.025);border-color:rgba(255,255,255,.13)}
:root[data-theme=dark] .btn:not(.primary):hover{background:rgba(64,192,87,.09);border-color:rgba(64,192,87,.35)}
.product{border-top-color:rgba(149,213,178,.2)}
:root[data-theme=dark] .product:hover{filter:drop-shadow(0 24px 28px rgba(0,0,0,.2))}
.product:hover .product-image{border-color:rgba(64,192,87,.45);box-shadow:0 24px 55px rgba(0,0,0,.28),0 0 28px rgba(64,192,87,.1)}
.product-image{border:1px solid transparent}
.cap-track{background:rgba(255,255,255,.06)}
.cap-bar{background:linear-gradient(90deg,#2d6a4f,#40c057);box-shadow:0 0 12px rgba(64,192,87,.38)}
.partner{position:relative;overflow:hidden;background:linear-gradient(118deg,#123d2b 0%,#075126 48%,#0a0f1c 140%)}
.partner::after{content:"";position:absolute;width:420px;aspect-ratio:1;border-radius:50%;right:-120px;top:-210px;background:radial-gradient(circle,rgba(149,213,178,.19),transparent 68%);pointer-events:none}

@media(max-width:1023px){.hero{min-height:auto;padding-block:54px 68px}}
@media(max-width:767px){.hero{padding-block:42px 56px}.hero::before{background-size:42px 42px}.hero::after{width:110%;right:-50%;top:-8%}.cfc-marquee{padding-block:12px}.cfc-marquee-track{font-size:10px}:root[data-cfc-motion=on] .hero-media{animation-duration:8.5s}}
@media(prefers-reduced-motion:reduce){.cfc-particle,.hero-media,.hero h1 span,.cfc-marquee-track{animation:none!important}.cfc-particle{opacity:.12}}

/* ===== v1.1 sensory polish: depth, pacing and editorial rhythm ===== */
.cfc-scroll-progress{position:fixed;z-index:10020;left:0;right:0;top:0;height:2px;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,#2d6a4f,#75db8a,#b7f7c2);box-shadow:0 0 16px rgba(64,192,87,.65);pointer-events:none;will-change:transform}
.cfc-cursor-aura{position:fixed;z-index:0;left:0;top:0;width:420px;height:420px;border-radius:50%;pointer-events:none;opacity:.32;filter:blur(4px);background:radial-gradient(circle,rgba(64,192,87,.13),rgba(43,182,0,.045) 36%,transparent 70%);will-change:transform}
:root[data-theme=light] body{background:radial-gradient(circle at 78% 5%,rgba(43,182,0,.075),transparent 32rem),radial-gradient(circle at 5% 42%,rgba(0,70,0,.045),transparent 38rem),var(--bg)}
:root[data-theme=light] .header{box-shadow:inset 0 -1px rgba(10,52,18,.045)}
:root[data-theme=light] .hero-media{border-color:rgba(15,72,24,.13);box-shadow:0 30px 80px rgba(22,66,29,.16),0 8px 24px rgba(22,66,29,.08)}
:root[data-theme=light] .result{background:linear-gradient(135deg,color-mix(in srgb,var(--subtle) 94%,white),color-mix(in srgb,var(--brand) 5%,white));box-shadow:0 20px 50px rgba(34,74,38,.08)}
.hero-media{--tilt-x:0deg;--tilt-y:0deg;--pointer-x:50%;--pointer-y:50%;transform-style:preserve-3d}
.hero-track{transform:perspective(1100px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) scale(1.012);transition:transform .55s var(--ease);will-change:transform}
.hero-media::before{content:"";position:absolute;z-index:2;inset:-1px;pointer-events:none;border-radius:inherit;background:radial-gradient(circle at var(--pointer-x) var(--pointer-y),rgba(255,255,255,.2),transparent 26%);mix-blend-mode:soft-light;opacity:.72;transition:opacity .35s}
.hero-media:hover::before{opacity:1}
.hero-dot.is-active{position:relative;overflow:hidden;background:rgba(255,255,255,.35)}
.hero-dot.is-active::after{content:"";position:absolute;inset:0;background:#fff;transform-origin:left;animation:cfc-dot-progress 2s linear both}
@keyframes cfc-dot-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.section{position:relative;isolation:isolate;overflow:hidden}
.section>.wrap{position:relative;z-index:1}
.section::after{content:"";position:absolute;z-index:0;width:34rem;height:34rem;border-radius:50%;right:-20rem;top:-16rem;background:radial-gradient(circle,color-mix(in srgb,var(--brand) 7%,transparent),transparent 68%);pointer-events:none}
.section:nth-of-type(even)::after{right:auto;left:-22rem;top:auto;bottom:-18rem}
:root[data-theme=dark] .section::after{background:radial-gradient(circle,rgba(64,192,87,.07),transparent 68%)}
.section-head h2{letter-spacing:-.052em}
.section-head p{padding-top:4px}
.focus-grid>li{list-style:none;min-width:0}
.focus-grid:not(:has(.focus-card)){grid-template-columns:repeat(5,1fr);gap:10px;padding:0;margin-top:4px}
.focus-grid:not(:has(.focus-card))>li a{position:relative;min-height:176px;padding:24px 20px;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;border:1px solid var(--border);border-radius:14px;text-decoration:none;overflow:hidden;background:color-mix(in srgb,var(--surface) 88%,transparent);transition:transform .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease),background .35s var(--ease)}
.focus-grid:not(:has(.focus-card))>li a::before{content:"";position:absolute;width:120px;height:120px;border-radius:50%;right:-68px;bottom:-74px;background:var(--brand);opacity:.1;transition:transform .5s var(--ease),opacity .5s var(--ease)}
.focus-grid:not(:has(.focus-card))>li a:hover{transform:translateY(-7px);border-color:color-mix(in srgb,var(--brand) 48%,transparent);box-shadow:0 22px 52px rgba(12,45,20,.14);background:color-mix(in srgb,var(--brand) 6%,var(--surface))}
.focus-grid:not(:has(.focus-card))>li a:hover::before{transform:scale(1.8);opacity:.15}
.focus-grid:not(:has(.focus-card))>li a>span{display:grid;gap:28px;font-size:18px;font-weight:650;line-height:1.3;letter-spacing:-.025em}
.focus-grid:not(:has(.focus-card))>li small{font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--link)}
.focus-grid:not(:has(.focus-card)) .arrow{align-self:flex-end;transition:transform .3s var(--ease)}
.focus-grid:not(:has(.focus-card)) a:hover .arrow{transform:translateX(5px)}
:root[data-theme=dark] .focus-grid:not(:has(.focus-card))>li a{background:rgba(255,255,255,.025);border-color:rgba(255,255,255,.1)}
:root[data-theme=dark] .focus-grid:not(:has(.focus-card))>li a:hover{background:rgba(64,192,87,.075);border-color:rgba(64,192,87,.35);box-shadow:0 24px 60px rgba(0,0,0,.25),0 0 34px rgba(64,192,87,.06)}
.partner .wrap{position:relative;z-index:1}
.partner .btn{box-shadow:0 12px 36px rgba(0,0,0,.16)}
@media(max-width:1023px){.cfc-cursor-aura{display:none}.focus-grid:not(:has(.focus-card)){grid-template-columns:repeat(3,1fr)}.focus-grid:not(:has(.focus-card))>li:nth-child(n+4){grid-column:span 1}.hero-track{transform:none}}
@media(max-width:640px){.focus-grid:not(:has(.focus-card)){grid-template-columns:1fr 1fr;gap:10px}.focus-grid:not(:has(.focus-card))>li:last-child{grid-column:1/-1}.focus-grid:not(:has(.focus-card))>li a{min-height:146px;padding:20px 17px}.focus-grid:not(:has(.focus-card))>li a>span{gap:18px;font-size:16px}.section::after{width:22rem;height:22rem}}
@media(prefers-reduced-motion:reduce){.cfc-cursor-aura{display:none}.hero-track{transform:none!important;transition:none}}

/* Sapo's DEV toolbar stays visible without covering controls or dialogs. */
#bizweb-theme-previewer{position:static!important;background:#002800!important;color:#fff!important;padding:14px!important;width:100%!important;min-height:64px;display:flex!important;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
#bizweb-theme-previewer .preview-btn{color:#002800!important;background:#fff!important;border:1px solid #718070!important;min-height:44px;display:inline-flex!important;align-items:center;padding:10px 14px!important}
#bizweb-theme-previewer .bizweb-theme-previewer-title{color:#fff!important;background:#002800!important}