:root{--brand:#34d5d1;--text:#0f172a;         /* xám đậm */--muted:#000;        /* xám chữ mô tả */--border:#e5e7eb;       /* xám viền */--card:#ffffff;--bg:#f8fafc;           /* nền nhạt */--radius-xl:24px;--radius-lg:18px;--shadow-sm:0 1px 2px rgba(0,0,0,.06);--shadow-md:0 8px 20px rgba(15,23,42,.08);}
:root{--brand:#34d5d1;--r1:260px;     /* vòng nhỏ trong cùng */--r2:280px;     /* vòng giữa */--r3:300px;     /* vòng ngoài lớn nhất (cũng là size khung) */--speed:3.8s;   /* tốc độ nhịp sóng */}
.hidden{display:none;}
.container{max-width:1230px;margin:0 auto;width:100%}
.section-type{padding:80px 0px}

/* Heading */
.title-h3{margin:0 0 0px;font-weight:700;font-size:36px;color:#676767;letter-spacing:.2px;line-height:37px}
.title-h4{margin:0;font-size:38px;font-weight:800;letter-spacing:.2px;}
.content-desc{margin:18px 0 24px 0px;font-size:16px;color:var(--muted);}

/* Buttons */
.actions{display:flex;gap:20px;margin-top:14px;align-items:center;}
.btn{min-width:167px;font-size:16px;padding:8px 15px 10px 15px;border-radius:25px;text-decoration:none;font-weight:bold;border:1px solid #1fc3c2;transition:0.3s;text-align:center;}
.btn:hover{transform:scale(1.07);}

/* reset */
.btn--ghost{color:#374151;background:#fff;border:1px solid var(--border);}
.btn--ghost:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);}
.btn--ghost .u-underline{position:relative;}
.btn--ghost .u-underline::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:#d1d5db;transform:scaleX(0);transform-origin:left;transition:transform .2s ease;}
.btn--ghost:hover .u-underline::after{transform:scaleX(1)}
.btn--primary{background:var(--brand);color:white;border:1px solid transparent;box-shadow:0 1px 0 rgba(0,0,0,.02);}
.btn--primary:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);filter:saturate(1.05);}
.btn--primary:focus-visible{outline:2px solid var(--brand);outline-offset:2px;}

/* Stats */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:60px;}
.stat{position:relative;background:#fff;border-radius:6px;text-align:center;transition:transform .18s ease,box-shadow .18s ease,color .18s ease;box-shadow:inset 0 0 0 1px rgba(0,0,0,0);will-change:transform;}
.stat:before{content:'';position:absolute;background-image:linear-gradient(#cdf5f0,#e7faf8);border-radius:10px;width:calc(100% + 2px);height:calc(100% + 2px);left:-1px;top:-1px;}
.inner-stat{background:#fff;position:relative;z-index:1;padding:12px 10px;border-radius:10px;}
.stat:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);}
.stat__num{font-size:36px;font-weight:800;color:#2b8279;line-height:1;transition:color .18s ease;}
.stat:hover .stat__num{color:var(--brand)}
.stat__label{margin-top:15px;font-size:14px;color:#000;font-weight:600;}

/* Small responsive touch */
@media (max-width:380px){
  .card{width:100%}
}
.flex-row{display:flex;justify-content:space-between;align-items:flex-end}
.col-5{width:32%}
.col-7{width:68%;padding-left:80px}
.group-mockup{position:relative;height:375px}
.group-mockup .mockup-1{position:absolute;left:0;top:0;z-index:1}
.group-mockup .mockup-1 img{box-shadow:0px 0px 6px 0px #00000017;border-radius:8px;}
.group-mockup .mockup-2{position:absolute;right:0;top:-20px;box-shadow:0px 0px 6px 0px #00000017;border-radius:8px;z-index:1}
.group-mockup .mockup-3{position:absolute;right:0;left:50%;transform:translateX(-50%);top:60px;width:100%;text-align:center;}
.group-mockup .mockup-4{position:absolute;left:0;bottom:0;z-index:1;box-shadow:0px 0px 6px 0px #00000017;border-radius:8px}
.group-mockup .mockup-5{position:absolute;left:40%;bottom:34px;z-index:1;box-shadow:0px 0px 6px 0px #00000017;border-radius:8px;}
.group-mockup .mockup-6{position:absolute;right:0;top:35%;z-index:1;}
.group-mockup .mockup-6 img{box-shadow:0px 0px 6px 0px #00000017;border-radius:8px;}

/* Khung tổng bằng kích thước vòng lớn nhất */
.scene{position:relative;width:var(--r3);height:var(--r3);display:grid;place-items:center;overflow:visible;}

/* 3 vòng tròn tĩnh, lồng nhau */
.ring{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;background:transparent}
.ring.r1{width:var(--r1);height:var(--r1);background:#f7fffe;border:1px solid #ddd;z-index:2;}
.ring.r2{width:var(--r2);height:var(--r2);border:1px solid #ddd;z-index:1;}
.ring.r3{width:var(--r3);height:var(--r3);border:1px solid #ddd;z-index:0;}

/* 3 vòng sóng động tỏa ra tuần tự */
.ripples{position:absolute;inset:0;pointer-events:none;z-index:-1;}
.wave{position:absolute;left:50%;top:50%;width:var(--r3);height:var(--r3);           /* dùng size lớn, scale để khởi điểm nhỏ */transform:translate(-50%,-50%) scale(.62);   /* ~ r1/r3 */border-radius:50%;border:1px solid #ddd;opacity:.36;animation:wave var(--speed) ease-out infinite;box-shadow:0 0 22px rgba(52,213,209,.16),inset 0 0 12px rgba(52,213,209,.06);background:radial-gradient(circle,rgba(52,213,209,.05),rgba(52,213,209,0) 70%);will-change:transform,opacity;}
.wave.w2{animation-delay:calc(var(--speed)/3)}
.wave.w3{animation-delay:calc(var(--speed)*2/3)}
.liner-play{position:absolute;right:30px;bottom:20px;z-index:-1}
@keyframes wave{
  0%{transform:translate(-50%,-50%) scale(.8);opacity:.36;}
  65%{opacity:.09;}
  100%{transform:translate(-50%,-50%) scale(1.4);opacity:0;}
}

/* Hover: tăng tốc một chút cho “sống” hơn */
.scene:hover .wave{animation-duration:2.6s}

/* Tôn trọng giảm chuyển động */
@media (prefers-reduced-motion:reduce){
  .wave{animation:none;opacity:.18}
}
.animate-4{animation:moveLeft 1.5s infinite alternate;}
@keyframes moveLeft{
  0%{transform:translateX(0);}
  100%{transform:translateX(-5px);}
}
.animate-1{animation:moveUp 1s infinite alternate;}
.animate-2{animation:moveUp 2s infinite alternate;}
@keyframes moveUp{
  0%{transform:translateY(0);}
  100%{transform:translateY(-5px);}
}
.text-center{text-align:center;}
.title-main-miko{}
.title-main-miko h3{font-size:36px;color:#000;font-weight:bold;margin:0;margin-bottom: 20px}
.title-main-miko p{font-size:16px;color:gray;max-width: 700px;width: 100%;margin:0 auto;}
.pt-0{padding-top:0px;}
.seo-cards{margin:28px auto;}

/* Grid */
.seo-cards .grid{display:flex;gap:20px;}
@media (max-width:1000px){
  .seo-cards .grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .seo-cards .grid{grid-template-columns:1fr}
}

/* Card */
.seo-cards{margin-top:60px}
.seo-cards .card{position:relative;overflow: hidden; background:#fff;border:1px solid #edfbfa;border-radius:15px;padding:18px;min-height:180px;transition: 0.3s}
.seo-cards .card:hover{    box-shadow: 0px 2px 5px 0px #47d9c952;}

/* tag */
.seo-cards .tag{position: absolute;
    top: -1px;
    right: 0px;
    font-size: 12px;
    font-weight: 700;
    color: #898686;
    background: #fff;
    border-radius: 999px;
    padding: 4px 10px;
    letter-spacing: .1px;
    transition: transform .18s ease, box-shadow .18s ease;}

/* icon */
.seo-cards .icon{width:80px;height:80px;border-radius:12px;display:grid;box-shadow:inset 0 0 0 6px rgba(52,213,209,.06);transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;}
.seo-cards .icon svg{width:28px;height:28px;fill:none;stroke:var(--brand);stroke-width:2.2;}

/* text */
.seo-cards .title{    margin: 0 0px 15px 0px;
    color: #15413c;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: .2px;
    width: 75%;min-height: 51px;}
.seo-cards .desc{margin:25px 0px 0px 0px;font-size:14px;color:var(--muted);line-height:1.5;}

/* layout trong card */
.seo-cards .row{display:block}
.seo-cards .grid{margin-bottom: 20px}
.seo-cards .grid:nth-child(1) .card:nth-child(1){width: 45%}
.seo-cards .grid:nth-child(1) .card:nth-child(2){width: 30%}
.seo-cards .grid:nth-child(1) .card:nth-child(3){width: 25%}

.seo-cards .grid:nth-child(2) .card:nth-child(1){width: 25%}
.seo-cards .grid:nth-child(2) .card:nth-child(2){width: 45%}
.seo-cards .grid:nth-child(2) .card:nth-child(3){width: 30%}

.circil-box{position: absolute;top: 50%;transform: translateY(-50%); width: 560px;height: 560px;border-radius: 50%;background: #fafefd;display: flex;justify-content: center;align-items: center;}
.medium-box{width: 320px;height: 320px;border-radius: 50%;background: #f5fcfc;display: flex;justify-content: center;align-items: center;border:1px solid #fff;}
.small-box{width: 145px;height: 145px;border-radius: 50%;background: #f0fcfb;display: flex;justify-content: center;align-items: center;border:1px solid #fff;}

.seo-cards .grid:nth-child(1) .card:nth-child(1) .circil-box{right: -20%;}
.seo-cards .grid:nth-child(1) .card:nth-child(2) .circil-box{right: -72%;}
.seo-cards .grid:nth-child(1) .card:nth-child(3) .circil-box{right: -105%;}

.seo-cards .grid:nth-child(2) .card:nth-child(1) .circil-box{right: -105%;}
.seo-cards .grid:nth-child(2) .card:nth-child(2) .circil-box{right: -20%;}
.seo-cards .grid:nth-child(2) .card:nth-child(3) .circil-box{right: -72%;}
.relative{position: relative;}
.z-10{z-index: 1}