:root{
  --navy:#0b2e6b;
  --blue-dark:#0b3d91;
  --blue-tech:#1560d4;
  --cyan:#17b7c7;
  --orange:#ff7a1a;
  --white:#ffffff;
  --gray-bg:#f5f8fc;
  --text-dark:#182338;
  --text-muted:#5c6b84;
  --radius:14px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:'Be Vietnam Pro', sans-serif;
  color:var(--text-dark);
  background:var(--white);
  overflow-x:hidden;
  font-size:16px;
}
img{max-width:100%;height:auto;}
a{transition:.25s;}
.text-accent{color:var(--orange);}
.container{max-width:1280px;}

/* Topbar */
.topbar{background:var(--navy);color:#cfe0ff;}
.topbar a:hover{color:var(--orange)!important;}

/* Header */
.main-header{background:#fff;box-shadow:0 2px 14px rgba(11,45,92,.08);z-index:1030;transition:.25s;}
.main-header.scrolled{box-shadow:0 6px 22px rgba(11,45,92,.16);}
.brand-logo{font-size:1.6rem;font-weight:800;color:var(--blue-dark);letter-spacing:-.5px;}
.nav-link-custom{
  padding:.55rem .9rem;color:var(--text-dark);font-weight:500;text-decoration:none;border-radius:8px;font-size:.95rem;
}
.nav-link-custom:hover, .nav-link-custom.active{color:var(--blue-tech);background:rgba(21,96,212,.08);}
.nav-link-mobile{padding:.7rem 0;font-weight:600;color:var(--text-dark);text-decoration:none;border-bottom:1px solid #eef1f6;}

.btn-sm-custom{padding:.5rem 1.1rem;font-size:.9rem;font-weight:600;border-radius:10px;white-space:nowrap;}
.btn-outline-primary-custom{border:2px solid var(--blue-tech);color:var(--blue-tech);background:transparent;}
.btn-outline-primary-custom:hover{background:var(--blue-tech);color:#fff;}
.btn-accent{background:var(--orange);color:#fff;border:2px solid var(--orange);font-weight:600;}
.btn-accent:hover{background:#e5670a;color:#fff;border-color:#e5670a;}
.btn-navy{background:var(--blue-dark);color:#fff;font-weight:600;border-radius:10px;padding:.7rem 1.5rem;border:2px solid var(--blue-dark);}
.btn-navy:hover{background:var(--blue-tech);border-color:var(--blue-tech);color:#fff;}
.btn-outline-navy{border:2px solid var(--blue-dark);color:var(--blue-dark);font-weight:600;border-radius:10px;padding:.7rem 1.5rem;background:transparent;}
.btn-outline-navy:hover{background:var(--blue-dark);color:#fff;}

/* Floating buttons */
.floating-btn{
  position:fixed;right:22px;width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:1.4rem;z-index:1040;box-shadow:0 6px 18px rgba(0,0,0,.2);text-decoration:none;
  animation:pulse 2.2s infinite;
}
.call-btn{background:var(--orange);bottom:180px;}
.zalo-btn{background:#0088ff;bottom:112px;}
.messenger-btn{background:#0084ff;bottom:44px;}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,122,26,.4);}70%{box-shadow:0 0 0 14px rgba(255,122,26,0);}100%{box-shadow:0 0 0 0 rgba(255,122,26,0);}}

/* Hero */
.hero{
  background:linear-gradient(120deg, var(--navy) 0%, var(--blue-tech) 100%);
  color:#fff;position:relative;overflow:hidden;padding:90px 0 100px;
}
.hero::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 80% 20%, rgba(23,183,199,.35), transparent 45%);
}
.hero h1{font-size:2.6rem;font-weight:800;line-height:1.25;}
.hero .lead{font-size:1.15rem;color:#dce6fb;}
.hero-badge{display:inline-block;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.3);padding:.4rem 1rem;border-radius:50px;font-size:.85rem;font-weight:600;}
.hero-shape{position:relative;z-index:2;}
.hero-mockup{filter:drop-shadow(0 20px 40px rgba(0,0,0,.35));border-radius:16px;}

/* Sections */
.section{padding:80px 0;}
.section-tag{color:var(--orange);font-weight:700;letter-spacing:1px;text-transform:uppercase;font-size:.85rem;}
.section-title{font-weight:800;font-size:2rem;color:var(--blue-dark);}
.section-sub{color:var(--text-muted);max-width:680px;}
.bg-soft{background:var(--gray-bg);}

/* Service cards */
.service-card{
  background:#fff;border-radius:var(--radius);padding:28px 24px;height:100%;
  box-shadow:0 4px 18px rgba(11,45,92,.06);border:1px solid #eef1f6;transition:.3s;
}
.service-card:hover{transform:translateY(-6px);box-shadow:0 14px 30px rgba(11,45,92,.14);border-color:var(--blue-tech);}
.service-icon{
  width:58px;height:58px;border-radius:14px;background:linear-gradient(135deg,var(--blue-tech),var(--cyan));
  color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.5rem;margin-bottom:16px;
}
.service-card h5{font-weight:700;font-size:1.05rem;}
.service-card p{color:var(--text-muted);font-size:.92rem;}

/* Why us */
.why-item{display:flex;gap:14px;align-items:flex-start;padding:16px;border-radius:12px;transition:.25s;}
.why-item:hover{background:var(--gray-bg);}
.why-icon{width:46px;height:46px;border-radius:10px;background:rgba(21,96,212,.1);color:var(--blue-tech);display:flex;align-items:center;justify-content:center;font-size:1.2rem;flex-shrink:0;}

/* Template cards */
.tpl-card{background:#fff;border-radius:var(--radius);overflow:hidden;border:1px solid #eef1f6;box-shadow:0 4px 18px rgba(11,45,92,.06);transition:.3s;height:100%;}
.tpl-card:hover{transform:translateY(-6px);box-shadow:0 14px 30px rgba(11,45,92,.14);}
.tpl-thumb{position:relative;overflow:hidden;aspect-ratio:4/3;}
.tpl-thumb img{width:100%;height:100%;object-fit:cover;transition:.4s;}
.tpl-card:hover .tpl-thumb img{transform:scale(1.06);}
.tpl-badge{position:absolute;top:12px;left:12px;padding:.3rem .8rem;border-radius:50px;font-size:.75rem;font-weight:700;color:#fff;}
.badge-moi{background:var(--cyan);}
.badge-ban_chay{background:var(--orange);}
.badge-noi_bat{background:var(--blue-dark);}
.tpl-body{padding:18px;}
.tpl-code{color:var(--text-muted);font-size:.8rem;}
.tpl-price{color:var(--orange);font-weight:700;}

/* Filter buttons */
.filter-btn{border:1px solid #dde5f1;background:#fff;color:var(--text-dark);padding:.4rem 1rem;border-radius:50px;font-size:.85rem;font-weight:600;}
.filter-btn.active,.filter-btn:hover{background:var(--blue-tech);color:#fff;border-color:var(--blue-tech);}

/* Pricing */
.price-card{background:#fff;border-radius:var(--radius);padding:34px 26px;height:100%;border:2px solid #eef1f6;position:relative;transition:.3s;}
.price-card:hover{transform:translateY(-6px);}
.price-card.popular{border-color:var(--orange);box-shadow:0 16px 34px rgba(255,122,26,.18);}
.popular-badge{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--orange);color:#fff;padding:.35rem 1.2rem;border-radius:50px;font-size:.8rem;font-weight:700;white-space:nowrap;}
.price-name{font-weight:800;font-size:1.3rem;color:var(--blue-dark);}
.price-value{font-size:1.8rem;font-weight:800;color:var(--orange);margin:.5rem 0;}
.price-feature{display:flex;gap:10px;align-items:flex-start;padding:.4rem 0;font-size:.92rem;}
.price-feature i{color:var(--cyan);margin-top:3px;}

/* Timeline */
.timeline{position:relative;padding-left:2px;}
.timeline::before{content:'';position:absolute;left:24px;top:0;bottom:0;width:3px;background:linear-gradient(var(--blue-tech),var(--cyan));}
.timeline-item{position:relative;padding-left:64px;padding-bottom:38px;}
.timeline-num{position:absolute;left:0;top:0;width:50px;height:50px;border-radius:50%;background:var(--blue-dark);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.1rem;}

/* Blog */
.blog-card{background:#fff;border-radius:var(--radius);overflow:hidden;border:1px solid #eef1f6;box-shadow:0 4px 18px rgba(11,45,92,.06);height:100%;transition:.3s;}
.blog-card:hover{transform:translateY(-6px);box-shadow:0 14px 30px rgba(11,45,92,.14);}
.blog-thumb{aspect-ratio:16/10;overflow:hidden;}
.blog-thumb img{width:100%;height:100%;object-fit:cover;transition:.4s;}
.blog-card:hover .blog-thumb img{transform:scale(1.06);}
.blog-meta{color:var(--text-muted);font-size:.82rem;}

/* Project / case study */
.project-card{background:#fff;border-radius:var(--radius);overflow:hidden;border:1px solid #eef1f6;box-shadow:0 4px 18px rgba(11,45,92,.06);height:100%;transition:.3s;}
.project-card:hover{transform:translateY(-6px);box-shadow:0 14px 30px rgba(11,45,92,.14);}

/* Stats */
.stat-box{text-align:center;}
.stat-num{font-size:2.4rem;font-weight:800;color:var(--blue-dark);}
.stat-label{color:var(--text-muted);font-size:.9rem;}

/* Footer */
.main-footer{background:var(--navy);color:#cfe0ff;}
.footer-title{color:#fff;font-weight:700;margin-bottom:1rem;}
.footer-links{list-style:none;padding:0;margin:0;}
.footer-links li{margin-bottom:.6rem;font-size:.92rem;}
.footer-links a{color:#cfe0ff;text-decoration:none;}
.footer-links a:hover{color:var(--orange);}
.social-icon{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;display:flex;align-items:center;justify-content:center;text-decoration:none;}
.social-icon:hover{background:var(--orange);color:#fff;}
.footer-bottom{background:#08234f;color:#9fb4dd;}
.text-light-50{color:#b9cbef;}

/* Forms */
.form-control, .form-select{border-radius:10px;border:1px solid #dde5f1;padding:.65rem .9rem;font-size:.95rem;}
.form-control:focus, .form-select:focus{border-color:var(--blue-tech);box-shadow:0 0 0 .2rem rgba(21,96,212,.15);}
.form-card{background:#fff;border-radius:var(--radius);padding:32px;box-shadow:0 10px 34px rgba(11,45,92,.1);}

/* Page banner */
.page-banner{background:linear-gradient(120deg,var(--navy),var(--blue-tech));color:#fff;padding:60px 0;}
.breadcrumb-custom a{color:#cfe0ff;text-decoration:none;}
.breadcrumb-custom span{color:#fff;}

/* Popup */
.popup-overlay{position:fixed;inset:0;background:rgba(11,25,52,.6);z-index:2000;display:none;align-items:center;justify-content:center;}
.popup-box{background:#fff;border-radius:16px;max-width:420px;width:92%;padding:32px;position:relative;text-align:center;}
.popup-close{position:absolute;top:14px;right:14px;border:none;background:none;font-size:1.4rem;cursor:pointer;color:var(--text-muted);}

@media(max-width:767px){
  .hero h1{font-size:1.9rem;}
  .section{padding:52px 0;}
  .section-title{font-size:1.5rem;}
}