/* ============================================================
   EcoSynTech — Lớp nâng cấp trải nghiệm (non-destructive)
   Nạp SAU khối <style> gốc. Không sửa index.html gốc.
   Chỉ thêm hành vi/giao diện: menu mobile, hiệu ứng cuộn,
   nút lên đầu trang, dải tin cậy, tra cứu lô, trợ lý AI.
   ============================================================ */

/* --- 1. Hiệu ứng lộ dần khi cuộn (premium feel) --- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* --- 2. Nút menu mobile (hamburger) --- */
.est-burger{display:none;margin-left:auto;background:rgba(52,211,153,.12);border:1px solid rgba(52,211,153,.4);
  color:#d9fbf3;width:42px;height:42px;border-radius:12px;cursor:pointer;font-size:20px;line-height:1;align-items:center;justify-content:center}
.est-mobile{position:fixed;inset:0 0 auto 0;top:0;z-index:70;background:rgba(7,28,44,.98);backdrop-filter:blur(12px);
  transform:translateY(-100%);transition:transform .35s ease;padding:76px 24px 28px;border-bottom:1px solid rgba(94,234,212,.2)}
.est-mobile.open{transform:none}
.est-mobile a{display:block;color:#d9fbf3;text-decoration:none;font-weight:700;font-size:17px;padding:14px 4px;border-bottom:1px solid rgba(94,234,212,.1)}
.est-mobile a:last-child{border:0}
.est-mobile .close{position:absolute;top:18px;right:20px;background:none;border:0;color:#a5e8db;font-size:30px;cursor:pointer;line-height:1}
@media(max-width:760px){.est-burger{display:inline-flex}}

/* --- 3. Dải tin cậy (social proof band) — sự thật, không phóng đại --- */
.est-band{background:rgba(255,255,255,.04);border-top:1px solid rgba(94,234,212,.12);border-bottom:1px solid rgba(94,234,212,.12)}
.est-band .row{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;
  padding:26px clamp(16px,4vw,48px);text-align:center}
@media(max-width:760px){.est-band .row{grid-template-columns:repeat(2,1fr);gap:20px 14px}}
.est-band .stat b{display:block;font-size:clamp(22px,3.2vw,30px);font-weight:800;line-height:1.1;
  background:linear-gradient(90deg,#34d399,#22d3ee,#3b82f6);-webkit-background-clip:text;background-clip:text;color:transparent}
.est-band .stat small{display:block;margin-top:6px;color:#a5e8db;font-size:12.5px;font-weight:600;line-height:1.4}

/* --- 4. Ô tra cứu truy xuất nhanh --- */
.est-trace{max-width:560px;margin:34px auto 0;background:rgba(255,255,255,.05);border:1px solid rgba(94,234,212,.25);
  border-radius:16px;padding:18px 18px 20px;text-align:center}
.est-trace h4{color:#f0fdfa;font-size:16px;font-weight:800;margin-bottom:4px}
.est-trace p{color:#a5e8db;font-size:13px;margin-bottom:14px}
.est-trace form{display:flex;gap:8px}
.est-trace input{flex:1;min-width:0;background:rgba(2,20,30,.5);border:1px solid rgba(94,234,212,.35);color:#f0fdfa;
  border-radius:12px;padding:12px 14px;font-size:14px;font-family:inherit}
.est-trace input::placeholder{color:#6fb9ad}
.est-trace input:focus{outline:none;border-color:#22d3ee;box-shadow:0 0 0 3px rgba(34,211,238,.2)}
.est-trace button{background:linear-gradient(90deg,#34d399,#22d3ee,#3b82f6);color:#fff;font-weight:800;border:0;
  border-radius:12px;padding:12px 20px;font-size:14px;cursor:pointer;white-space:nowrap;box-shadow:0 8px 22px rgba(34,211,238,.4)}
.est-trace button:hover{transform:translateY(-1px)}

/* --- 5. Nút lên đầu trang --- */
.est-top{position:fixed;left:18px;bottom:18px;z-index:60;width:46px;height:46px;border-radius:50%;
  background:rgba(11,46,63,.9);border:1px solid rgba(94,234,212,.35);color:#5eead4;font-size:20px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;transform:translateY(10px)}
.est-top.show{opacity:1;pointer-events:auto;transform:none}
.est-top:hover{background:rgba(11,46,63,1);border-color:#22d3ee}

/* --- 6. Trợ lý AI (nút nổi + panel) — nằm TRÊN nút Zalo --- */
.est-ai-btn{position:fixed;right:18px;bottom:74px;z-index:61;display:flex;align-items:center;gap:9px;
  background:linear-gradient(135deg,#0a3d35,#0b2e3f);border:1px solid rgba(52,211,153,.5);color:#d9fbf3;
  font-weight:800;font-size:14px;padding:12px 18px;border-radius:999px;cursor:pointer;
  box-shadow:0 10px 30px rgba(2,20,30,.55)}
.est-ai-btn:hover{border-color:#34d399}
.est-ai-btn .dot{width:8px;height:8px;border-radius:50%;background:#34d399;box-shadow:0 0 0 0 rgba(52,211,153,.7);animation:estPulse 2s infinite}
@keyframes estPulse{0%{box-shadow:0 0 0 0 rgba(52,211,153,.7)}70%{box-shadow:0 0 0 10px rgba(52,211,153,0)}100%{box-shadow:0 0 0 0 rgba(52,211,153,0)}}
.est-ai-panel{position:fixed;right:18px;bottom:130px;z-index:62;width:min(360px,calc(100vw - 36px));
  background:#08222f;border:1px solid rgba(94,234,212,.28);border-radius:18px;overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.5);display:none;animation:estUp .25s ease}
.est-ai-panel.open{display:block}
@keyframes estUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.est-ai-head{background:linear-gradient(90deg,#0a3d35,#0b2e3f);padding:16px 18px;display:flex;align-items:center;gap:10px;border-bottom:1px solid rgba(94,234,212,.18)}
.est-ai-head .av{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#34d399,#22d3ee);display:flex;align-items:center;justify-content:center;font-size:18px}
.est-ai-head b{color:#f0fdfa;font-size:15px;display:block}
.est-ai-head small{color:#7fd4c4;font-size:11.5px}
.est-ai-head .x{margin-left:auto;background:none;border:0;color:#a5e8db;font-size:24px;cursor:pointer;line-height:1}
.est-ai-body{padding:16px 18px;max-height:60vh;overflow:auto}
.est-ai-body .msg{background:rgba(52,211,153,.08);border:1px solid rgba(52,211,153,.25);border-radius:12px;
  padding:12px 14px;color:#d9fbf3;font-size:13.5px;line-height:1.6}
.est-ai-q{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.est-ai-q button{text-align:left;background:rgba(255,255,255,.05);border:1px solid rgba(94,234,212,.2);color:#d9fbf3;
  border-radius:10px;padding:11px 13px;font-size:13.5px;font-family:inherit;cursor:pointer;transition:border-color .15s,background .15s}
.est-ai-q button:hover{border-color:#34d399;background:rgba(52,211,153,.1)}
.est-ai-act{display:flex;gap:8px;margin-top:14px}
.est-ai-act a{flex:1;text-align:center;text-decoration:none;font-weight:800;font-size:13px;padding:11px;border-radius:10px}
.est-ai-act .zalo{background:linear-gradient(135deg,#0068ff,#0084ff);color:#fff}
.est-ai-act .call{background:rgba(255,255,255,.06);border:1px solid rgba(94,234,212,.3);color:#d9fbf3}
.est-ai-frame{width:100%;height:min(560px,68vh);border:0;display:block;background:#fff}