/* DALATHUB TECH — style.css */

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"Be Vietnam Pro","Segoe UI","Helvetica Neue",Arial,"Liberation Sans","Noto Sans",sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;color:#07122f;background:#f6f9ff}
a{text-decoration:none;color:inherit}
.container{width:min(1180px,92%);margin:auto}

/* HEADER */
.site-header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.86);backdrop-filter:blur(16px);border-bottom:1px solid rgba(17,84,255,.1)}
.nav-wrap{height:78px;display:flex;align-items:center;gap:28px}
.brand{display:grid;line-height:1}
.brand-main{font-size:32px;font-weight:900;letter-spacing:-1px;color:#0b5dff}
.brand-main span{color:#111}
.brand b{position:absolute;margin-left:210px;margin-top:4px;background:#0b5dff;color:white;padding:5px 10px;border-radius:8px;font-style:italic}
.brand small{font-weight:700;margin-top:6px}
.nav-menu{margin-left:auto;display:flex;gap:26px;font-weight:700;color:#314063}
.nav-menu a:hover{color:#0b5dff}
.nav-cta,.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;font-weight:900}
.nav-cta{background:#0b5dff;color:white;padding:12px 20px;box-shadow:0 12px 30px rgba(11,93,255,.25)}
.menu-btn{display:none;margin-left:auto;border:0;background:#0b5dff;color:white;border-radius:10px;font-size:24px;padding:7px 12px}

/* HERO */
.hero{position:relative;overflow:hidden;padding:76px 0 64px}
.hero-bg{position:absolute;inset:0;background:radial-gradient(circle at 82% 12%,#003bc0 0,#081b54 30%,transparent 52%),linear-gradient(110deg,#fff 0,#f4f8ff 52%,#06236d 52%,#06184a 100%);z-index:-2}
.hero:after{content:"";position:absolute;right:-130px;top:-160px;width:600px;height:600px;border-radius:50%;background:rgba(32,126,255,.35);filter:blur(80px);z-index:-1}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:52px}
.hero-content{position:relative;z-index:3}
.company-pill{display:inline-flex;border:1px solid #0b5dff;color:#0b5dff;border-radius:999px;padding:9px 15px;font-weight:900;background:white;margin-bottom:24px;font-size:14px}

/* H1 — đã giảm size & nới line-height để không đè lên dòng dưới */
.hero h1{font-size:clamp(28px,3.6vw,48px);line-height:1.18;margin:0 0 20px;text-transform:uppercase;letter-spacing:-.5px;word-break:break-word;overflow-wrap:break-word}
.hero h1 span{display:block;color:#0b47d9;margin-top:8px}

.hero-desc{font-size:18px;line-height:1.6;color:#33405c;max-width:720px;position:relative;z-index:2}
.hero-actions{display:flex;gap:14px;margin:28px 0}
.btn{padding:16px 24px}
.btn.primary{background:linear-gradient(135deg,#ffd02a,#ffad00);color:#06184a;box-shadow:0 16px 36px rgba(255,183,0,.28)}
.btn.ghost{background:#fff;color:#0b5dff;border:1px solid rgba(11,93,255,.2)}
.trust-row{display:flex;gap:16px;flex-wrap:wrap;color:#0b47d9;font-weight:800}

/* HERO VISUAL */
.hero-visual{position:relative;min-height:560px}
.local-card{position:absolute;left:0;top:0;background:#fff;border:1px solid rgba(11,93,255,.16);border-radius:26px;padding:24px;width:330px;box-shadow:0 22px 70px rgba(2,35,111,.18);z-index:4}
.pin{font-size:42px}
.local-card strong{display:block;font-size:24px;text-transform:uppercase;line-height:1.2}
.local-card em{color:#ffbd00;font-style:normal}
.local-card p{color:#24406d;font-weight:700}
.device{position:absolute;background:#0b1b4f;border:10px solid #111;border-radius:24px;box-shadow:0 35px 90px rgba(0,0,0,.35)}
.laptop{right:0;top:85px;width:470px;height:310px;border-bottom-width:20px;transform:perspective(700px) rotateY(-8deg)}
.screen{height:100%;padding:30px;background:linear-gradient(135deg,#071d5d,#0d4eea);color:white;border-radius:12px}
.topbar{height:12px;width:90px;border-radius:20px;background:rgba(255,255,255,.22);margin-bottom:28px}
.screen h3{font-size:24px;margin:0 0 16px;line-height:1.25}
.screen ul{padding-left:18px;line-height:1.8}
.stats{display:flex;gap:28px;margin-top:25px}
.stats b{font-size:30px}
.stats small{display:block;font-size:12px;font-weight:500}
.phone{right:30px;top:235px;width:190px;height:350px;background:linear-gradient(180deg,#2a62ff,#7a46ff);color:white;padding:28px 15px 15px;z-index:5}
.phone-top{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:70px;height:16px;background:#111;border-radius:12px}
.phone h4{font-size:14px}
.money{background:white;color:#0b1b4f;border-radius:14px;padding:13px;font-weight:900}
.money span{color:#12b76a;font-size:12px}
.mini-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:14px 0}
.mini-grid i{height:34px;background:rgba(255,255,255,.28);border-radius:9px}
.chart{display:flex;align-items:end;gap:7px;height:80px;background:rgba(255,255,255,.15);border-radius:14px;padding:10px}
.chart span{flex:1;background:#fff;border-radius:5px}
.chart span:nth-child(1){height:35%}
.chart span:nth-child(2){height:70%}
.chart span:nth-child(3){height:50%}
.chart span:nth-child(4){height:85%}
.chart span:nth-child(5){height:60%}
.floating{position:absolute;right:0;background:rgba(11,93,255,.9);color:white;border:1px solid rgba(255,255,255,.28);border-radius:18px;padding:20px;font-size:26px;font-weight:900;box-shadow:0 18px 45px rgba(0,70,255,.25)}
.floating.code{top:70px}
.floating.ai{top:435px;background:#fff;color:#0b5dff}

/* SECTIONS */
.services,.why,.cta{padding:82px 0}
.section-head{text-align:center;margin-bottom:40px}
.section-head p,.eyebrow{color:#0b5dff;font-weight:900;text-transform:uppercase}
.section-head h2,.why h2,.cta h2{font-size:clamp(26px,3.2vw,42px);line-height:1.2;margin:10px auto;max-width:850px}
.service-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.service-card{background:white;border:1px solid rgba(11,93,255,.1);border-radius:28px;padding:28px;box-shadow:0 18px 45px rgba(16,55,120,.08);transition:.25s}
.service-card:hover{transform:translateY(-8px);box-shadow:0 28px 70px rgba(11,93,255,.16)}
.icon{font-size:42px;width:72px;height:72px;display:grid;place-items:center;background:#eef5ff;border-radius:20px}
.service-card h3{font-size:20px;line-height:1.3}
.service-card p,.why-text{color:#42506c;line-height:1.7}

/* WHY */
.why{background:linear-gradient(180deg,#fff,#eef5ff)}
.why-grid{display:grid;grid-template-columns:.8fr 1fr;gap:44px;align-items:center}
.why-list{display:grid;gap:14px;list-style:none;padding:0;margin:0}
.why-list li,.why-list div{display:flex;gap:18px;align-items:center;background:white;border-radius:22px;padding:20px;box-shadow:0 16px 40px rgba(17,84,255,.08)}
.why-list b{font-size:28px;color:#0b5dff}
.why-list span{font-weight:800;color:#172444}

/* CTA */
.cta-box{background:linear-gradient(135deg,#06184a,#0b5dff);color:white;border-radius:34px;padding:54px;text-align:center;box-shadow:0 30px 90px rgba(11,93,255,.3)}
.cta p{font-size:19px;color:#dce8ff}

/* FOOTER */
.site-footer{background:#06184a;color:white;padding:42px 0}
.footer-grid{display:grid;grid-template-columns:1.1fr 1.4fr .8fr 1.2fr;gap:26px}
.footer-grid address{font-style:normal}
.site-footer h3{font-size:26px;margin:0 0 10px}
.site-footer h3 span{background:#0b5dff;border-radius:8px;padding:3px 7px;font-size:16px}
.site-footer p{color:#d7e3ff;line-height:1.7}
.site-footer a{color:white;font-weight:800}
.footer-bottom{margin-top:28px;padding-top:18px;border-top:1px solid rgba(255,255,255,.08);text-align:center;color:#a8baea;font-size:13px}

/* TABLET */
@media(max-width:900px){
  .nav-menu,.nav-cta{display:none}
  .menu-btn{display:block}
  .nav-menu.active{display:flex;position:absolute;top:78px;left:0;right:0;background:white;padding:18px;flex-direction:column;text-align:center;border-bottom:1px solid #e9eefc}
  .hero{padding-top:44px}
  .hero-grid,.why-grid{grid-template-columns:1fr}
  .hero-visual{min-height:520px}
  .laptop{width:85%;right:0}
  .local-card{width:82%}
  .service-grid{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr}
  /* FIX: giữ nền xanh đậm gốc, đổi MÀU CHỮ thành sáng để đọc rõ */
  .hero h1{font-size:30px;line-height:1.22;letter-spacing:-.3px;color:#ffffff;text-shadow:0 2px 14px rgba(0,0,0,.25)}
  .hero h1 span{color:#ffd02a}
  .hero-desc{color:#e7eeff}
  .trust-row{color:#ffd02a}
}

/* MOBILE */
@media(max-width:560px){
  .brand-main{font-size:25px}
  .brand b{margin-left:165px;font-size:12px}
  .hero{padding:30px 0 40px}
  /* FIX: giữ nền xanh đậm, ĐỔI MÀU CHỮ sang sáng để nổi trên nền */
  .hero h1{font-size:26px;line-height:1.28;letter-spacing:0;margin-bottom:16px;color:#ffffff;text-shadow:0 2px 14px rgba(0,0,0,.3)}
  .hero h1 span{margin-top:6px;color:#ffd02a}
  .hero-desc{font-size:15px;line-height:1.6;color:#e7eeff;position:relative;z-index:2}
  .company-pill{font-size:12px;padding:7px 12px;margin-bottom:16px;background:#ffffff;color:#0b5dff;border-color:#ffffff}
  .hero-actions{flex-direction:column;margin:22px 0}
  .trust-row{color:#ffd02a;font-size:14px;font-weight:800}
  .service-grid{grid-template-columns:1fr}

  /* FIX: stack hero-visual theo chiều dọc, bỏ absolute để không chồng chéo */
  .hero-visual{min-height:auto;margin-top:24px;display:flex;flex-direction:column;align-items:center;gap:22px}
  .local-card{position:relative;left:auto;top:auto;width:100%;margin:0}
  .laptop{position:relative;right:auto;top:auto;width:100%;height:auto;min-height:280px;transform:none}
  .laptop .screen{height:auto;min-height:260px}
  .laptop .screen h3{font-size:20px;line-height:1.3}
  .laptop .stats{flex-wrap:wrap;gap:18px;margin-top:18px}
  .laptop .stats b{font-size:24px}
  .phone{position:relative;right:auto;top:auto;width:220px;height:auto;min-height:340px;margin:0 auto}
  .money{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .money span{display:inline-block;margin-left:4px}
  .floating{display:none}

  .cta-box{padding:34px 20px}
  .footer-grid{font-size:15px}
}