:root{
      --bg:#0b1020;
      --card:#0f1731;
      --muted:#95a3c7;
      --text:#eaf0ff;
      --white:#ffffff;
      --brand:#0b74d1;
      --brand2:#20c997;
      --warning:#ffb020;
      --danger:#ff4d6d;
      --shadow: 0 18px 55px rgba(0,0,0,.35);
      --shadow2: 0 12px 35px rgba(11,116,209,.18);
      --radius: 18px;
      --radius2: 26px;
      --max: 1160px;
      --line: rgba(255,255,255,.10);
    }

    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
      color:var(--text);
      background:
        radial-gradient(1100px 700px at 12% 10%, rgba(11,116,209,.35), transparent 55%),
        radial-gradient(900px 520px at 90% 20%, rgba(32,201,151,.22), transparent 52%),
        radial-gradient(900px 520px at 70% 90%, rgba(255,176,32,.12), transparent 55%),
        linear-gradient(180deg, #070b16, #050713 65%, #040612);
      overflow-x:hidden;
    }

    a{color:inherit; text-decoration:none}
    .container{width: min(var(--max), calc(100% - 40px)); margin:0 auto}

    /* Topbar */
    .topbar{
      position:sticky; top:0; z-index:50;
      backdrop-filter: blur(10px);
      background: rgba(6,10,22,.62);
      border-bottom: 1px solid var(--line);
    }
    .nav{
      display:flex; align-items:center; justify-content:space-between;
      padding:14px 0;
      gap:14px;
    }
    .brand{
      display:flex; align-items:center; gap:10px;
      font-weight:800; letter-spacing:.2px;
    }
    .logo{
      width:36px; height:36px; border-radius:12px;
      background:
        radial-gradient(circle at 30% 30%, rgba(255,255,255,.5), transparent 45%),
        linear-gradient(135deg, var(--brand), #164bff);
      box-shadow: var(--shadow2);
    }
    .brand span{opacity:.92}
    .menu{display:flex; gap:18px; align-items:center}
    .menu a{
      font-size:14px; color:rgba(234,240,255,.88);
      opacity:.9;
      padding:8px 10px; border-radius:12px;
      border:1px solid transparent;
      transition:.2s;
    }
    .menu a:hover{border-color:var(--line); background:rgba(255,255,255,.04)}
    .actions{display:flex; gap:10px; align-items:center}
    .btn{
      display:inline-flex; align-items:center; justify-content:center;
      padding:10px 14px;
      border-radius:14px;
      border:1px solid var(--line);
      background: rgba(255,255,255,.04);
      color:var(--text);
      font-weight:700;
      cursor:pointer;
      transition: .18s ease;
      user-select:none;
      gap:8px;
    }
    .btn:hover{transform: translateY(-1px); background: rgba(255,255,255,.06)}
    .btn.primary{
      border-color: transparent;
      background: linear-gradient(135deg, var(--brand), #2f8dff);
      box-shadow: var(--shadow2);
    }
    .btn.primary:hover{filter: brightness(1.06)}
    .btn.ghost{
      background: transparent;
      border-color: var(--line);
    }

    .hamburger{display:none}
    .pill{
      display:inline-flex; align-items:center; gap:8px;
      border:1px solid var(--line);
      background: rgba(255,255,255,.03);
      padding:8px 12px; border-radius:999px;
      font-size:13px; color:rgba(234,240,255,.9);
    }
    .dot{
      width:10px; height:10px; border-radius:99px;
      background: var(--brand2);
      box-shadow: 0 0 0 5px rgba(32,201,151,.12);
    }

    /* Hero */
    .hero{
      padding: 44px 0 26px;
      position:relative;
    }
    .heroGrid{
      display:grid;
      grid-template-columns: 1.15fr .85fr;
      gap:22px;
      align-items:stretch;
    }
    .heroCard{
      background: rgba(15,23,49,.70);
      border:1px solid var(--line);
      border-radius: var(--radius2);
      box-shadow: var(--shadow);
      overflow:hidden;
      position:relative;
    }
    .heroCard::before{
      content:"";
      position:absolute; inset:-2px;
      background: radial-gradient(600px 180px at 30% 0%, rgba(11,116,209,.35), transparent 60%),
                  radial-gradient(460px 180px at 80% 0%, rgba(32,201,151,.25), transparent 55%);
      pointer-events:none;
    }
    .heroInner{position:relative; padding:26px 26px 20px}
    h1{
      margin:14px 0 10px;
      font-size: 40px;
      line-height: 1.1;
      letter-spacing: -.6px;
    }
    .subtitle{
      color: rgba(234,240,255,.82);
      font-size: 16px;
      line-height: 1.55;
      margin: 0 0 16px;
      max-width: 62ch;
    }
    .badges{display:flex; flex-wrap:wrap; gap:10px; margin:14px 0 18px}
    .badge{
      display:inline-flex; align-items:center; gap:8px;
      padding:9px 12px;
      border-radius:999px;
      border:1px solid var(--line);
      background: rgba(255,255,255,.03);
      font-size:13px;
      color:rgba(234,240,255,.92);
    }
    .badge b{color:var(--white)}
    .heroCtas{display:flex; gap:10px; flex-wrap:wrap; margin-top:8px}
    .heroNote{
      margin-top:12px;
      display:flex; gap:10px; flex-wrap:wrap;
      color: rgba(234,240,255,.72);
      font-size: 13px;
      align-items:center;
    }

    .stats{
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap:12px;
      padding: 0 26px 22px;
      position:relative;
    }
    .stat{
      border:1px solid var(--line);
      background: rgba(255,255,255,.03);
      border-radius: 16px;
      padding: 12px 12px;
    }
    .stat .num{
      font-size: 22px; font-weight: 900; letter-spacing: -.3px;
    }
    .stat .lbl{font-size: 12px; color: rgba(234,240,255,.72); margin-top:4px}

    /* Right panel */
    .side{
      display:grid;
      grid-template-rows: auto 1fr;
      gap:12px;
    }
    .sideTop{
      padding:18px;
      background: rgba(15,23,49,.70);
      border:1px solid var(--line);
      border-radius: var(--radius2);
      box-shadow: var(--shadow);
      position:relative;
      overflow:hidden;
    }
    .sideTop::after{
      content:"";
      position:absolute; inset:-2px;
      background: radial-gradient(520px 210px at 40% 0%, rgba(255,176,32,.20), transparent 62%);
      pointer-events:none;
    }
    .sideTop .inner{position:relative}
    .miniTitle{font-weight:900; letter-spacing:.1px}
    .miniText{color: rgba(234,240,255,.76); font-size: 13px; line-height:1.5; margin:8px 0 10px}
    .list{
      display:grid; gap:10px; margin-top:10px
    }
    .li{
      display:flex; gap:10px; align-items:flex-start;
      border:1px solid var(--line);
      background: rgba(255,255,255,.03);
      border-radius: 16px;
      padding:10px 12px;
    }
    .ic{
      width:28px; height:28px; border-radius: 10px;
      display:grid; place-items:center;
      background: rgba(11,116,209,.18);
      border:1px solid rgba(11,116,209,.32);
      flex:0 0 auto;
      margin-top:1px;
    }
    .li b{display:block}
    .li span{display:block; color: rgba(234,240,255,.70); font-size: 12.5px; margin-top:2px}

    .preview{
      background: rgba(15,23,49,.70);
      border:1px solid var(--line);
      border-radius: var(--radius2);
      box-shadow: var(--shadow);
      overflow:hidden;
      position:relative;
    }
    .previewHeader{
      display:flex; justify-content:space-between; align-items:center;
      padding:12px 14px;
      border-bottom:1px solid var(--line);

      background: rgba(255,255,255,.03);
      gap:10px;
    }
    .chips{display:flex; gap:8px; flex-wrap:wrap}
    .chip{
      font-size:12px; padding:6px 10px; border-radius:999px;
      border:1px solid var(--line);
      background: rgba(255,255,255,.03);
      color: rgba(234,240,255,.8);
      cursor:pointer;
      transition:.18s;
      user-select:none;
    }
    .chip.active{
      border-color: rgba(11,116,209,.55);
      background: rgba(11,116,209,.16);
      color: rgba(234,240,255,.95);
    }
    .previewBody{padding:12px}
    .gallery{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap:10px;
    }
    .shot{
      position:relative;
      border-radius: 16px;
      overflow:hidden;
      border:1px solid var(--line);
      background: rgba(255,255,255,.02);
      cursor:pointer;
      transition:.2s;
      min-height: 116px;
    }
    .shot:hover{transform: translateY(-2px); border-color: rgba(255,255,255,.18)}
    .shot img{
      width:100%; height:100%; object-fit:cover;
      display:block;
      filter: saturate(1.05) contrast(1.02);
    }
    .shot .cap{
      position:absolute; left:10px; bottom:10px;
      padding:6px 10px;
      border-radius:999px;
      background: rgba(6,10,22,.65);
      border:1px solid var(--line);
      font-size:12px;
      color: rgba(234,240,255,.92);
      backdrop-filter: blur(8px);
    }

    /* Sections */
    section{padding: 28px 0}
    .sectionTitle{
      font-size: 26px;
      letter-spacing: -.3px;
      margin:0 0 8px;
    }
    .sectionDesc{
      margin:0 0 16px;
      color: rgba(234,240,255,.74);
      line-height: 1.6;
    }

    .grid3{display:grid; grid-template-columns: repeat(3, 1fr); gap:12px}
    .grid2{display:grid; grid-template-columns: repeat(2, 1fr); gap:12px}
    .card{
      background: rgba(15,23,49,.70);
      border:1px solid var(--line);
      border-radius: var(--radius);
      padding:16px;
      box-shadow: var(--shadow);
      position:relative;
      overflow:hidden;
    }
    .card.soft{
      background: rgba(255,255,255,.03);
      box-shadow:none;
    }
    .card h3{margin:0 0 6px; font-size:16px}
    .card p{margin:0; color: rgba(234,240,255,.74); line-height:1.6; font-size: 14px}
    .kicker{
      display:flex; align-items:center; justify-content:space-between;
      margin-bottom:10px;
      gap:10px;
    }
    .tag{
      font-size:12px; padding:6px 10px; border-radius:999px;
      border:1px solid var(--line);
      background: rgba(255,255,255,.03);
      color: rgba(234,240,255,.78);
    }

    /* Pricing */
    .pricing{
      display:grid;
      grid-template-columns: 1.1fr .9fr;
      gap:12px;
    }
    .priceMain{
      border-radius: var(--radius2);
      padding:18px;
      background:
        radial-gradient(700px 220px at 20% 0%, rgba(11,116,209,.35), transparent 62%),
        rgba(15,23,49,.72);
      border:1px solid var(--line);
      box-shadow: var(--shadow);
      position:relative;
      overflow:hidden;
    }
    .priceMain::after{
      content:"";
      position:absolute; inset:-2px;
      background: radial-gradient(520px 220px at 92% 0%, rgba(32,201,151,.22), transparent 60%);
      pointer-events:none;
    }
    .priceMain .inner{position:relative}
    .big{
      font-size: 30px; font-weight: 950; letter-spacing: -.4px; margin:8px 0 6px;
    }
    .small{
      color: rgba(234,240,255,.76); line-height: 1.6; margin:0 0 12px; font-size:14px;
    }
    .checklist{display:grid; gap:8px; margin:10px 0 0; padding:0; list-style:none}
    .checklist li{
      display:flex; gap:10px; align-items:flex-start;
      color: rgba(234,240,255,.84);
      font-size: 14px;
    }
    .check{
      width:20px; height:20px; border-radius:8px;
      background: rgba(32,201,151,.18);
      border:1px solid rgba(32,201,151,.35);
      display:grid; place-items:center; flex:0 0 auto;
      margin-top:1px;
    }

    /* FAQ */
    .faq{display:grid; gap:10px}
    details{
      border:1px solid var(--line);
      background: rgba(15,23,49,.65);
      border-radius: 16px;
      padding: 12px 14px;
      box-shadow: var(--shadow);
    }
    summary{
      cursor:pointer;
      list-style:none;
      display:flex; align-items:center; justify-content:space-between;
      font-weight:850;
      gap:10px;
    }
    summary::-webkit-details-marker{display:none}
    details p{margin:10px 0 0; color: rgba(234,240,255,.74); line-height:1.65; font-size:14px}

    /* Footer */
    footer{
      padding: 24px 0 32px;
      border-top: 1px solid var(--line);
      background: rgba(6,10,22,.55);
      margin-top: 24px;
    }
    .footerGrid{
      display:grid;
      grid-template-columns: 1.2fr .8fr;
      gap:14px;
      align-items:start;
    }
    .muted{color: rgba(234,240,255,.68); line-height:1.7; font-size: 13.5px}
    .footLinks{display:flex; gap:12px; flex-wrap:wrap; justify-content:flex-end}
    .footLinks a{
      font-size: 13px;
      padding:8px 10px;
      border-radius: 12px;
      border:1px solid var(--line);
      background: rgba(255,255,255,.03);
    }

    /* Modal */
    .modal{
      position:fixed; inset:0; z-index:100;
      display:none;
      background: rgba(0,0,0,.62);
      backdrop-filter: blur(8px);
      padding:18px;
    }
    .modal.open{display:flex}
    .modalBox{
      width: min(980px, 100%);
      margin:auto;
      background: rgba(10,14,30,.92);
      border: 1px solid var(--line);
      border-radius: 18px;
      box-shadow: var(--shadow);
      overflow:hidden;
    }
    .modalBar{
      display:flex; justify-content:space-between; align-items:center;
      padding:10px 12px;
      border-bottom:1px solid var(--line);
      background: rgba(255,255,255,.03);
      gap:10px;
    }
    .modalTitle{font-weight:900; font-size:14px}
    .modalClose{
      width:36px; height:36px; border-radius:12px;
      display:grid; place-items:center;
      cursor:pointer;
      border:1px solid var(--line);
      background: rgba(255,255,255,.04);
    }
    .modalImgWrap{max-height: 70vh; overflow:auto; background: rgba(0,0,0,.18)}
    .modalImg{width:100%; height:auto; display:block}

    /* Reveal animation */
    .reveal{opacity:0; transform: translateY(10px); transition: .55s ease}
    .reveal.show{opacity:1; transform: translateY(0)}

    img.img-intro-item {
        width: 100%;
        height: 100%;
        object-fit: fill;
        display: block;
        filter: saturate(1.05) contrast(1.02);
    }

    .img-detail-intro {
        position: relative;
        border-radius: 16px;
        overflow: hidden;
        border: 1px solid var(--line);
        background: rgba(255, 255, 255, .02);
        cursor: pointer;
        transition: .2s;
        height: 300px;
    }
    p.intro-text-item {
        min-height: 45px;
    }
    div#wap-dathang {
      display: flex;
        justify-content: space-evenly;
        align-content: center;
    }

    .btndathangngay {
        background: linear-gradient(135deg, #ff9404, #fc4701)!important;
    }
    .price-basic {
        line-height: 43px;
        color: #92db00!important;
        font-weight: bold;
        letter-spacing: 1px;
    }
    .card.soft {
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        align-content: space-between;
        justify-content: space-around;
    }

    .scroll-top{
    position: fixed;
    right: 18px;
    bottom: 18px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    z-index: 9999;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #ff8401;
    box-shadow: 0 8px 20px rgba(0,0,0,.25);

    opacity: 0;
    visibility: hidden;
    transform: translateY(10px) scale(.95);
    transition: opacity .25s ease, transform .25s ease, background .25s ease;
  }

  .scroll-top svg{
    fill: #fff;
    transition: transform .25s ease;
  }

  /* Hiện + bắt đầu pulse */
  .scroll-top.is-visible{
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    animation: pulseShadow 1.6s infinite;
  }

  /* Hover: đổi màu + dừng pulse */
  .scroll-top:hover{
    background: #2f7df6;
    animation: none;
  }
  .scroll-top:hover svg{
    transform: translateY(-2px);
  }

  /* Pulse rung bằng box-shadow */
  @keyframes pulseShadow{
    0% {
        box-shadow: rgb(29, 135, 234) 0px 0px 0px 0px;
    }

    70% {
        box-shadow: rgba(204, 169, 44, 0) 0px 0px 0px 20px;
    }

    100% {
        box-shadow: rgba(204, 169, 44, 0) 0px 0px 0px 0px;
    }
  }



.modal-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: .25s ease;
  z-index: 10000;
}

.modal-overlay.active{
  opacity: 1;
  visibility: visible;
}

#leadModal .modal-box{
  background: #fff;
  width: 100%;
  max-width: 420px;
  border-radius: 10px;
  padding: 22px;
  position: relative;
  animation: zoomIn .25s ease;
}

@keyframes zoomIn{
  from{ transform: scale(.9); opacity: 0; }
  to{ transform: scale(1); opacity: 1; }
}

#leadModal .modal-close{
  position: absolute;
  top: 10px;
  right: 12px;
  border: none;
  background: none;
  font-size: 22px;
  cursor: pointer;
}

#leadModal .form-group{
  margin-bottom: 14px;
}
#leadModal .form-group label{
  display: block;
  font-size: 14px;
  margin-bottom: 5px;
}
#leadModal .form-group input,
#leadModal .form-group select{
  width: 100%;
  padding: 10px;
  border-radius: 6px;
  border: 1px solid #ddd;
}
div#leadModal {
    color: #000;
}
#leadModal .price-box{
  background: #f6f8fb;
  padding: 12px;
  border-radius: 6px;
  margin: 14px 0;
  display: flex;
  justify-content: space-between;
  font-size: 16px;
}
#leadModal .price-box strong{
  color: #e53935;
}

#leadModal .btn-submit{
  width: 100%;
  padding: 12px;
  border: none;
  background: #2f7df6;
  color: #fff;
  border-radius: 6px;
  cursor: pointer;
}

    /* Responsive */
    @media (max-width: 980px){
      div#wap-dathang {
          margin-bottom: 15px;
      }
      .DesktopPhone{
        display: none;
      }
      .MobilePhone{
        display: unset!important;
      }
      button#btnMenu {
          display: none!important;
      }
      div#mobileMenu {
          display: block!important;
      }
      .actions {
          text-align: center;
          gap: 5px!important;
      }

      .heroGrid{grid-template-columns: 1fr; }
      .pricing{grid-template-columns: 1fr}
      .grid3{grid-template-columns: 1fr}
      .grid2{grid-template-columns: 1fr}
      h1{font-size: 34px}
      .stats{grid-template-columns: 1fr; padding: 0 18px 18px}
      .heroInner{padding: 20px 18px 12px}
      .sideTop{padding: 16px}
      .previewBody{padding: 10px}
      .gallery{grid-template-columns: 1fr 1fr}
      .menu{display:none}
      .hamburger{display:inline-flex}
      .footerGrid{grid-template-columns: 1fr}
      .footLinks{justify-content:flex-start}
      img.img-intro-item {
          height: auto;
      }

      .img-detail-intro {
          height: auto;
      }
    }
    @media (max-width: 520px){
      .gallery{grid-template-columns: 1fr}
      h1{font-size: 30px}

      img.img-intro-item {
          height: auto;
      }

      .img-detail-intro {
          height: auto;
      }
    }