/* ═══════════════════════════════════════════
   DBY NHẶT HÀNG — Landing Page CSS
   ATP Software Style · Dark SaaS · Blue/Green
   ═══════════════════════════════════════════ */
:root{--bg:#000;--bg2:#0a0a0a;--green:#00ab56;--blue:#3b82f6;--cyan:#06b6d4;--text:#f1f5f9;--muted:#94a3b8;--border:rgba(255,255,255,.06);--glow-green:rgba(0,171,86,.35);--radius:16px}
@font-face{font-family:'DTPhudu';src:url('../fonts/DTPhudu-Black.otf') format('opentype');font-weight:900;font-style:normal;font-display:swap}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:'Inter',system-ui,sans-serif;overflow-x:hidden;line-height:1.6}
.container{max-width:1200px;margin:0 auto;padding:0 24px}

/* ═══ NAV ═══ */
.nav{position:fixed;top:0;left:0;right:0;z-index:1000;background:rgba(0,0,0,.7);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--border);transition:.3s}
.nav__inner{max-width:1200px;margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;height:64px}
.nav__logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.nav__logo-img{height:30px}
.nav__logo-name{font-size:16px;font-weight:800;color:var(--text)}
.nav__pro{font-size:9px;font-weight:700;padding:2px 8px;background:var(--green);color:#fff;border-radius:4px;letter-spacing:1px}
.nav__links{display:flex;gap:32px}
.nav__links a{color:var(--muted);text-decoration:none;font-size:14px;font-weight:500;transition:.3s}
.nav__links a:hover{color:#fff}
.nav__cta{padding:8px 20px;background:var(--green);color:#fff;border-radius:8px;text-decoration:none;font-size:13px;font-weight:600;display:flex;align-items:center;gap:6px;transition:.3s;box-shadow:0 2px 12px var(--glow-green)}
.nav__cta:hover{transform:translateY(-1px);box-shadow:0 4px 20px var(--glow-green)}

/* ═══ BUTTONS ═══ */
.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 28px;border-radius:12px;font-size:15px;font-weight:600;text-decoration:none;transition:.3s;cursor:pointer;border:none;font-family:inherit}
.btn--primary{background:linear-gradient(135deg,var(--green),#059669);color:#fff;box-shadow:0 4px 24px var(--glow-green)}
.btn--primary:hover{transform:translateY(-2px);box-shadow:0 8px 32px var(--glow-green)}
.btn--ghost{background:rgba(255,255,255,.06);color:var(--text);border:1px solid rgba(255,255,255,.12)}
.btn--ghost:hover{background:rgba(255,255,255,.1)}
.btn--buy{display:block;text-align:center;padding:14px;border-radius:10px;background:rgba(255,255,255,.06);color:#fff;border:1px solid rgba(255,255,255,.12);font-size:14px;font-weight:700;letter-spacing:1px;text-decoration:none;transition:.3s}
.btn--buy:hover{background:var(--green);border-color:var(--green);box-shadow:0 4px 20px var(--glow-green)}
.btn--lg{padding:16px 36px;font-size:16px}

/* ═══ HERO ═══ */
.hero{position:relative;padding:140px 24px 60px;text-align:center;overflow:hidden}
.hero__bg{position:absolute;inset:0;pointer-events:none}
.hero__glow{position:absolute;border-radius:50%;filter:blur(120px)}
.hero__glow--1{width:800px;height:800px;background:rgba(0,171,86,.08);top:-200px;left:50%;transform:translateX(-50%)}
.hero__glow--2{width:600px;height:600px;background:rgba(59,130,246,.06);bottom:-100px;right:10%}
.hero__container{position:relative;z-index:2;max-width:1200px;margin:0 auto}
.hero__badge{display:inline-flex;align-items:center;gap:8px;padding:8px 20px;background:rgba(0,171,86,.1);border:1px solid rgba(0,171,86,.2);border-radius:9999px;font-size:13px;font-weight:600;color:var(--green);margin-bottom:28px}
.hero__title{font-size:clamp(36px,5.5vw,64px);font-weight:900;line-height:1.12;margin-bottom:24px;letter-spacing:-.02em;font-family:'DTPhudu','Inter',system-ui,sans-serif}
.hero__hl{background:linear-gradient(135deg,var(--green),var(--cyan));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero__desc{font-size:17px;color:var(--muted);line-height:1.7;max-width:680px;margin:0 auto 36px}
.hero__actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:60px}

/* ═══ HERO MOCKUP — ATP Style Big Screenshot ═══ */
.hero__mockup{position:relative;max-width:1000px;margin:0 auto}
.hero__mockup-glow{position:absolute;inset:-60px;background:radial-gradient(ellipse at center,rgba(0,171,86,.12) 0%,transparent 70%);border-radius:40px;pointer-events:none;z-index:0}
.mockup-device{position:relative;z-index:1;border-radius:var(--radius);overflow:hidden;box-shadow:0 0 80px rgba(0,171,86,.1),0 30px 80px rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.08)}
.mockup-titlebar{display:flex;align-items:center;gap:8px;padding:0 16px;height:36px;background:#1e1e1e;border-bottom:1px solid rgba(255,255,255,.06)}
.mdot{width:10px;height:10px;border-radius:50%}.mdot--r{background:#ff5f57}.mdot--y{background:#febc2e}.mdot--g{background:#28c840}
.mockup-titlebar__text{flex:1;text-align:center;font-size:11px;font-weight:600;color:#666;letter-spacing:.5px}

/* ═══ MOCKUP APP — Giống tool thật 99% ═══ */
.mockup-app{background:#f5f5f5;padding:0}
.m-topbar{display:flex;align-items:center;justify-content:space-between;padding:0 24px;height:48px;background:#fff;border-bottom:1px solid #f0f0f0}
.m-brand{display:flex;align-items:center;gap:10px}
.m-brand-name{font-size:15px;font-weight:800;letter-spacing:.5px;color:#262626}
.m-pro{font-size:9px;font-weight:700;padding:2px 6px;border-radius:4px;background:#00ab56;color:#fff;letter-spacing:1px}
.m-topbar-right{display:flex;align-items:center;gap:14px}
.m-clock{font-family:'JetBrains Mono',monospace;font-size:11px;color:#595959;padding:4px 12px;background:#f5f5f5;border-radius:6px;border:1px solid #f0f0f0}
.m-online{display:flex;align-items:center;gap:5px;font-size:11px;font-weight:600;color:#00ab56}
.m-dot-live{width:7px;height:7px;border-radius:50%;background:#00ab56;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(0,171,86,.5)}50%{box-shadow:0 0 0 5px rgba(0,171,86,0)}}

/* Toolbar */
.m-toolbar{display:flex;align-items:center;gap:12px;padding:12px 16px;background:#fff;border-radius:10px;margin:16px 20px 10px;box-shadow:0 1px 4px rgba(0,0,0,.06)}
.m-import{display:flex;align-items:center;gap:8px;padding:10px 18px;border:2px solid #00ab56;border-radius:8px;background:rgba(0,171,86,.06);font-size:13px;font-weight:600;color:#00ab56;white-space:nowrap;flex-shrink:0}
.m-watch-dot{width:8px;height:8px;border-radius:50%;background:#00ab56;animation:pulse 1.5s infinite}
.m-import-count{font-size:12px;background:#00ab56;color:#fff;padding:2px 8px;border-radius:10px;font-weight:700}
.m-scan-area{flex:1;display:flex;align-items:center;gap:0;position:relative}
.m-scan-icon{position:absolute;left:14px;font-size:18px;color:#00ab56;z-index:2}
.m-scan-text{flex:1;padding:10px 16px 10px 42px;font-size:15px;font-weight:600;letter-spacing:.5px;border:2px solid #f0f0f0;border-radius:8px 0 0 8px;height:44px;display:flex;align-items:center;color:#262626;font-family:'JetBrains Mono',monospace;background:#fff}
.m-cursor-blink{color:#00ab56;font-weight:300;font-size:16px;animation:blink .8s step-end infinite;margin-left:-4px}
@keyframes blink{50%{opacity:0}}
.m-scan-btn{height:44px;padding:0 20px;border:2px solid #00ab56;border-left:none;border-radius:0 8px 8px 0;background:#00ab56;color:#fff;font-size:14px;font-weight:700;display:flex;align-items:center;gap:6px;white-space:nowrap}
.m-scan-count{font-size:12px;color:#8c8c8c;white-space:nowrap}
.m-scan-count strong{color:#00ab56;font-size:18px;font-weight:800}
.m-complete-btn{height:44px;padding:0 14px;background:#ff4d4f;border:2px solid #ff4d4f;color:#fff;font-size:14px;font-weight:700;display:flex;align-items:center;gap:6px;border-radius:8px;box-shadow:0 2px 8px rgba(255,77,79,.35);cursor:pointer;font-family:inherit}

/* Status */
.m-status{padding:8px 14px;border-radius:6px;font-size:12px;font-weight:600;display:flex;align-items:center;gap:8px;margin:0 20px 8px;background:linear-gradient(135deg,#f6ffed,#d9f7be);color:#389e0d;border:1px solid #b7eb8f}

/* Table */
.m-list{background:#fff;border-radius:10px;margin:0 20px 20px;box-shadow:0 1px 4px rgba(0,0,0,.06);overflow:hidden}
.m-trackings{padding:6px 16px;display:flex;flex-wrap:wrap;gap:4px;border-bottom:1px solid #f5f5f5}
.m-tag{display:inline-block;font-size:10px;padding:2px 8px;border-radius:4px;background:#e6f7ff;color:#1890ff;border:1px solid #91d5ff;font-family:'JetBrains Mono',monospace;font-weight:500}
.m-table-head{display:grid;grid-template-columns:1fr 80px 100px;padding:8px 16px;background:#f5f5f5;font-size:11px;font-weight:700;color:#8c8c8c;text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid #e8e8e8}
.m-table-head span:nth-child(2),.m-table-head span:nth-child(3){text-align:center}
.m-row{display:grid;grid-template-columns:1fr 80px 100px;align-items:center;padding:8px 16px;border-bottom:1px solid #f5f5f5}
.m-row:nth-child(even){background:#fafcfa}
.m-row-name{font-size:13px;font-weight:700;color:#262626;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.m-row-detail{font-size:10px;color:#8c8c8c;font-family:'JetBrains Mono',monospace;margin-top:2px}
.m-color{display:inline-block;width:14px;height:14px;border-radius:3px;border:1px solid rgba(0,0,0,.1)}
.m-combo{background:#fff7e6;color:#d46b08;font-size:10px;font-weight:700;padding:1px 6px;border-radius:3px;border:1px solid #ffd591}
.m-row-unit{font-size:13px;font-weight:600;color:#595959;text-align:center}
.m-row-qty{font-size:26px;font-weight:900;color:#00ab56;text-align:center;line-height:1}
.m-row-qty-unit{font-size:10px;font-weight:600;color:#52c41a;display:block;text-align:center}
.m-footer{padding:10px 16px;border-top:2px solid #f0f0f0;display:flex;align-items:center;gap:16px;background:#fafafa;font-size:12px;color:#8c8c8c}
.m-footer strong{color:#262626;font-weight:700}
.m-footer-total strong{color:#00ab56!important;font-size:16px!important}

/* ═══ SECTION COMMON ═══ */
.section-header{text-align:center;margin-bottom:60px}
.section-tag{display:inline-flex;align-items:center;gap:8px;padding:6px 16px;background:rgba(0,171,86,.08);border:1px solid rgba(0,171,86,.15);border-radius:9999px;font-size:13px;font-weight:600;color:var(--green);margin-bottom:16px}
.section-title{font-size:clamp(28px,4vw,44px);font-weight:800;line-height:1.3;margin-bottom:14px}
.section-desc{font-size:16px;color:var(--muted);max-width:600px;margin:0 auto}

/* ═══ FEATURES — Alternating rows ═══ */
.features{padding:100px 0;position:relative}
.feat-row{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;margin-bottom:100px}
.feat-row:last-child{margin-bottom:0}
.feat-row--reverse{direction:rtl}.feat-row--reverse>*{direction:ltr}
.feat-row__text h3{font-size:24px;font-weight:800;margin-bottom:16px;display:flex;align-items:center;gap:10px}
.feat-row__text p{font-size:15px;color:var(--muted);line-height:1.7;margin-bottom:20px}
.feat-list{list-style:none;display:flex;flex-direction:column;gap:10px}
.feat-list li{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--muted)}
.feat-list li i{color:var(--green);font-size:12px;flex-shrink:0}

/* Feature Mockups */
.feat-mockup{background:#0f172a;border:1px solid rgba(255,255,255,.06);border-radius:var(--radius);padding:20px;box-shadow:0 20px 60px rgba(0,0,0,.4)}
.fm-toolbar{margin-bottom:12px}
.fm-import{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border:2px solid var(--green);border-radius:8px;background:rgba(0,171,86,.08);font-size:12px;font-weight:600;color:var(--green)}
.fm-import--active .fm-dot-live{width:6px;height:6px;border-radius:50%;background:var(--green);animation:pulse 1.5s infinite}
.fm-badge{font-size:10px;background:var(--green);color:#fff;padding:2px 8px;border-radius:10px;font-weight:700;margin-left:4px}
.fm-status{padding:8px 14px;border-radius:8px;font-size:12px;font-weight:600;display:flex;align-items:center;gap:8px;margin-bottom:6px}
.fm-status--success{background:rgba(0,171,86,.08);color:var(--green);border:1px solid rgba(0,171,86,.15)}

/* Scan demo mockup */
.fm-scan-demo{display:flex;flex-direction:column;gap:8px}
.fm-scan-input{display:flex;align-items:center;gap:10px;padding:10px 16px;background:rgba(255,255,255,.04);border:1px solid rgba(0,171,86,.3);border-radius:8px;font-size:14px;font-weight:600;color:var(--text);font-family:'JetBrains Mono',monospace}
.fm-typing{letter-spacing:.5px}
.fm-tags{display:flex;gap:4px;flex-wrap:wrap}
.fm-tag{font-size:10px;padding:2px 8px;border-radius:4px;background:rgba(24,144,255,.1);color:#60a5fa;border:1px solid rgba(96,165,250,.2);font-family:'JetBrains Mono',monospace}
.fm-row{display:flex;justify-content:space-between;align-items:center;padding:8px 14px;border-radius:8px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.04)}
.fm-row-name{font-size:13px;font-weight:600;color:var(--text);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.fm-color{width:12px;height:12px;border-radius:3px;border:1px solid rgba(255,255,255,.15)}
.fm-color-label{font-size:11px;color:var(--muted)}
.fm-combo{background:rgba(212,107,8,.15);color:#f97316;font-size:10px;font-weight:700;padding:1px 6px;border-radius:3px;border:1px solid rgba(249,115,22,.2)}
.fm-row-qty{font-size:24px;font-weight:900;color:var(--green)}

/* Phone mockup */
.feat-phone{width:280px;margin:0 auto;background:#1a1a1a;border-radius:36px;padding:8px;box-shadow:0 30px 80px rgba(0,0,0,.5);border:2px solid #333}
.fp-notch{width:90px;height:20px;background:#1a1a1a;border-radius:0 0 14px 14px;margin:0 auto}
.fp-screen{border-radius:28px;overflow:hidden;background:#0E1621}
.fp-tg-head{display:flex;align-items:center;gap:8px;padding:28px 12px 10px;background:#17212B;border-bottom:1px solid rgba(255,255,255,.06);font-size:12px;font-weight:700;color:#fff}
.fp-tg-head i{color:#2AABEE;font-size:18px}
.fp-tg-head small{color:#2AABEE;font-size:10px;margin-left:auto}
.fp-tg-body{padding:12px;min-height:280px}
.fp-msg{background:#182533;border-radius:4px 12px 12px 12px;padding:10px;font-size:11px;color:#ccc;line-height:1.6}
.fp-msg-title{font-size:12px;font-weight:700;color:#fff;margin-bottom:4px}
.fp-msg-sub{font-size:10px;color:rgba(255,255,255,.4);margin-bottom:6px;padding-bottom:6px;border-bottom:1px solid rgba(255,255,255,.06)}
.fp-msg-line{display:flex;justify-content:space-between;padding:2px 0}
.fp-msg-line strong{color:var(--green);font-family:'JetBrains Mono',monospace}
.fp-msg-total{display:flex;justify-content:space-between;padding:4px 0;margin-top:4px;border-top:1px solid rgba(255,255,255,.06);font-weight:700;color:#fff}
.fp-msg-total strong{color:var(--green)}
.fp-msg-time{text-align:right;font-size:9px;color:rgba(255,255,255,.3);margin-top:4px}

/* ═══ DEMO ═══ */
.demo-section{padding:100px 0;position:relative}
.demo-embed{max-width:1100px;margin:0 auto}

/* ═══ PRICING — ATP Style ═══ */
.pricing{padding:100px 0;position:relative}
.pricing__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:start}
.price-card{background:rgba(255,255,255,.02);border:1px solid var(--border);border-radius:var(--radius);padding:36px 32px;transition:.4s;position:relative;text-align:center}
.price-card:hover{border-color:rgba(255,255,255,.1);transform:translateY(-4px)}
.price-card h3{font-size:20px;font-weight:700;margin-bottom:16px;color:var(--muted)}
.price-card__amount{font-size:48px;font-weight:900;background:linear-gradient(135deg,var(--green),var(--cyan));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:8px}
.price-card__amount span{font-size:16px}
.price-card__save{font-size:12px;color:var(--green);font-weight:600;margin-bottom:20px}
.price-card ul{list-style:none;margin-bottom:24px;text-align:left;display:flex;flex-direction:column;gap:10px}
.price-card ul li{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--muted)}
.price-card ul li i{color:var(--green);font-size:12px}
.price-card--pop{border-color:var(--green);background:linear-gradient(180deg,rgba(0,171,86,.06) 0%,rgba(0,0,0,0) 40%);transform:scale(1.05);box-shadow:0 0 60px rgba(0,171,86,.08)}
.price-card--pop:hover{transform:scale(1.05) translateY(-4px)}
.price-card--pop .btn--buy{background:var(--green)!important;border-color:var(--green)!important;box-shadow:0 4px 20px var(--glow-green)}
.price-card__badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);padding:4px 16px;background:var(--green);color:#fff;border-radius:9999px;font-size:12px;font-weight:700;white-space:nowrap}

/* ═══ STEPS ═══ */
.steps{padding:100px 0}
.steps__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.step-card{background:rgba(255,255,255,.02);border:1px solid var(--border);border-radius:var(--radius);padding:36px 28px;text-align:center;transition:.4s;position:relative}
.step-card:hover{border-color:rgba(0,171,86,.2);transform:translateY(-4px)}
.step-card__num{position:absolute;top:16px;right:20px;font-size:48px;font-weight:900;color:rgba(255,255,255,.03);line-height:1}
.step-card__icon{width:60px;height:60px;border-radius:16px;background:rgba(0,171,86,.08);display:flex;align-items:center;justify-content:center;font-size:24px;color:var(--green);margin:0 auto 20px}
.step-card h3{font-size:18px;font-weight:700;margin-bottom:10px}
.step-card p{font-size:14px;color:var(--muted);line-height:1.6}

/* ═══ CTA FINAL ═══ */
.cta-final{padding:100px 0}
.cta-final__inner{text-align:center;padding:80px 40px;background:linear-gradient(135deg,rgba(0,171,86,.06),rgba(59,130,246,.04));border:1px solid rgba(0,171,86,.12);border-radius:24px;position:relative;overflow:hidden}
.cta-final__inner h2{font-size:clamp(28px,4vw,40px);font-weight:800;margin-bottom:16px}
.cta-final__inner p{font-size:16px;color:var(--muted);margin-bottom:32px}

/* ═══ FOOTER ═══ */
.footer{padding:32px 0;border-top:1px solid var(--border)}
.footer__inner{display:flex;justify-content:space-between;align-items:center}
.footer__brand{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted)}
.footer__links{display:flex;gap:24px}
.footer__links a{color:var(--muted);text-decoration:none;font-size:13px;transition:.3s}
.footer__links a:hover{color:#fff}

/* ═══ FLOATING ZALO ═══ */
.float-zalo{position:fixed;bottom:24px;right:24px;width:56px;height:56px;border-radius:50%;background:#0068FF;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px rgba(0,104,255,.4);z-index:999;transition:.3s;animation:zaloFloat 3s ease-in-out infinite}
.float-zalo:hover{transform:scale(1.1);box-shadow:0 8px 30px rgba(0,104,255,.5)}
@keyframes zaloFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* ═══ RESPONSIVE ═══ */
@media(max-width:1024px){
    .feat-row{grid-template-columns:1fr;gap:40px}
    .feat-row--reverse{direction:ltr}
    .pricing__grid,.steps__grid{grid-template-columns:1fr;max-width:440px;margin:0 auto}
    .price-card--pop{transform:none}.price-card--pop:hover{transform:translateY(-4px)}
}
@media(max-width:768px){
    .nav__links{display:none}
    .hero__title{font-size:32px}
    .hero__actions{flex-direction:column;align-items:center}
    .m-toolbar{flex-wrap:wrap}
    .m-scan-area{min-width:100%;order:10}
}