/* Chặn thanh cuộn ngang do vài khối trang trí tràn ra vài px */
html,body{overflow-x:hidden;max-width:100%}

/* ==============================================================
   BIẾN MÀU — giữ nguyên tông thương hiệu của trang gốc:
   xanh dương #298feb (chủ đạo) + vàng #E3B721 (CTA).
   ============================================================== */
:root{
  --np-blue:#298feb;
  --np-blue-dk:#0d5aa8;
  --np-ink:#1E2A3A;
  --np-sub:#5A6B85;
  --np-cream:#F4F7FC;
  --np-gold:#E3B721;
  --np-font:'Be Vietnam Pro','Inter','Segoe UI',Roboto,Arial,sans-serif;
}
.np-hero,.np-what,.np-tier,.np-rules,.np-cta,.np-faq,.np-contact,
.np-hero *,.np-hero *::before,.np-hero *::after,
.np-what *,.np-what *::before,.np-what *::after,
.np-tier *,.np-tier *::before,.np-tier *::after,
.np-rules *,.np-rules *::before,.np-rules *::after,
.np-cta *,.np-cta *::before,.np-cta *::after,
.np-faq *,.np-faq *::before,.np-faq *::after,
.np-contact *,.np-contact *::before,.np-contact *::after{box-sizing:border-box}

.np-kicker{
  display:inline-flex;align-items:center;gap:9px;margin-bottom:14px;
  padding:7px 16px;border-radius:999px;background:rgba(41,143,235,.09);
  border:1px solid rgba(41,143,235,.26);color:var(--np-blue);
  font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
}
.np-svc-head{text-align:center;max-width:760px;margin:0 auto 8px}
.np-svc-head h2{margin:10px 0 0;font-size:clamp(22px,2.6vw,32px);font-weight:800;color:var(--np-ink)}
.np-svc-head h2::after{
  content:'';display:block;width:64px;height:4px;border-radius:99px;margin:16px auto 0;
  background:linear-gradient(90deg,var(--np-blue),#5CB2FF);
}

/* ==============================================================
   1. HERO
   ============================================================== */
.np-hero{
  position:relative;overflow:hidden;isolation:isolate;
  padding:64px 44px 0;color:#fff;font-family:var(--np-font);
  background:
    radial-gradient(85% 120% at 88% 12%,rgba(160,220,255,.24) 0%,transparent 55%),
    linear-gradient(120deg,#0d5aa8 0%,#1a7ddb 42%,var(--np-blue) 78%,#4faaf5 100%);
}
.np-hero-wrap{
  position:relative;z-index:2;max-width:1300px;margin:0 auto;
  display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;
}
.np-kick{
  display:inline-flex;align-items:center;gap:9px;margin-bottom:18px;
  padding:7px 16px;border-radius:999px;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.34);
  color:#fff;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
}
.np-kick svg{width:16px;height:16px}
.np-h1{margin:0;font-size:clamp(32px,3.6vw,50px);line-height:1.14;font-weight:800;letter-spacing:-.5px;text-shadow:0 4px 30px rgba(0,20,50,.32)}
.np-h1-accent{color:#FFE07A}
.np-lead{margin:20px 0 0;max-width:540px;font-size:16.5px;line-height:1.66;color:rgba(240,249,255,.95)}
.np-lead b{color:#fff;font-weight:700}

.np-ctas{margin:30px 0 0;display:flex;flex-wrap:wrap;gap:13px}
.np-btn{display:inline-flex;align-items:center;gap:10px;padding:15px 28px;border-radius:12px;border:0;cursor:pointer;text-decoration:none;font-family:inherit;font-size:15px;font-weight:700;transition:.28s}
.np-btn svg{width:18px;height:18px}
.np-btn-main{background:linear-gradient(135deg,#F2C93B,var(--np-gold));color:#1B1400;box-shadow:0 12px 32px rgba(227,183,33,.36)}
.np-btn-main:hover{transform:translateY(-3px);box-shadow:0 18px 42px rgba(227,183,33,.46)}
.np-btn-ghost{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.42);color:#fff;backdrop-filter:blur(8px)}
.np-btn-ghost:hover{background:rgba(255,255,255,.24);transform:translateY(-3px)}

.np-hero-md{display:flex;justify-content:center}
.np-hero-md img{display:block;width:100%;max-width:520px;height:auto;border-radius:16px;box-shadow:0 30px 70px rgba(0,20,50,.32);border:1px solid rgba(255,255,255,.22)}

.np-hx-strip{
  position:relative;z-index:2;max-width:1300px;margin:44px auto 0;
  display:grid;grid-template-columns:repeat(4,1fr);
  background:rgba(255,255,255,.10);border-top:1px solid rgba(255,255,255,.22);
}
.np-hx-strip>div{padding:22px 20px;border-left:1px solid rgba(255,255,255,.16)}
.np-hx-strip>div:first-child{border-left:0}
.np-hx-strip b{display:block;font-size:14.5px;font-weight:800;color:#fff}
.np-hx-strip span{display:block;margin-top:5px;font-size:12.4px;line-height:1.5;color:rgba(240,249,255,.82)}

@media (max-width:1024px){
  .np-hero-wrap{grid-template-columns:1fr;text-align:center}
  .np-hero-md{margin-top:24px}
  .np-lead{margin-left:auto;margin-right:auto}
  .np-ctas{justify-content:center}
  .np-hx-strip{grid-template-columns:repeat(2,1fr)}
  .np-hx-strip>div:nth-child(3){border-left:0}
}
@media (max-width:640px){
  .np-hero{padding:48px 20px 0}
  .np-hx-strip{grid-template-columns:1fr;margin-top:30px}
  .np-hx-strip>div{border-left:0;border-top:1px solid rgba(255,255,255,.16)}
  .np-hx-strip>div:first-child{border-top:0}
}

/* ==============================================================
   2. ĐIỂM TÍCH LUỸ LÀ GÌ
   ============================================================== */
.np-what{background:#fff;font-family:var(--np-font);padding:70px 44px;text-align:center}
.np-what-wrap{max-width:760px;margin:0 auto}
.np-what-wrap h2{margin:0;font-size:clamp(22px,2.6vw,30px);font-weight:800;color:var(--np-blue)}
.np-what-wrap p{margin:14px 0 0;font-size:15.5px;line-height:1.7;color:var(--np-sub)}
.np-what-rate{margin-top:30px}
.np-what-rate img{max-width:100%;height:auto;display:inline-block;border-radius:14px}

@media (max-width:640px){ .np-what{padding:52px 20px} }

/* ==============================================================
   3. CÁCH TÍNH ĐIỂM TÍCH LŨY
   ============================================================== */
.np-tier{background:var(--np-cream);font-family:var(--np-font);padding:70px 44px}
.np-tier-wrap{max-width:900px;margin:0 auto}
.np-tier-card{background:#fff;border-radius:26px;box-shadow:0 24px 70px rgba(13,90,168,.18);overflow:hidden}

.np-tier-hdr{
  position:relative;overflow:hidden;text-align:center;padding:42px 48px 34px;color:#fff;
  background:linear-gradient(135deg,var(--np-blue) 0%,#0375bf 60%,#1E9AFE 100%);
}
.np-tier-hdr::before{content:'';position:absolute;width:320px;height:320px;border-radius:50%;background:rgba(255,255,255,.06);top:-120px;right:-80px}
.np-tier-hdr-ic{font-size:2.2rem;margin-bottom:8px}
.np-tier-hdr h2{margin:0 0 8px;font-size:1.7rem;font-weight:800;position:relative;z-index:1}
.np-tier-hdr p{margin:0 auto;max-width:560px;font-size:.94rem;line-height:1.7;color:rgba(255,255,255,.82);position:relative;z-index:1}

.np-tier-body{padding:34px 44px 42px}
.np-tier-extitle{
  display:flex;align-items:center;gap:8px;margin-bottom:14px;
  font-size:.78rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--np-blue);
}
.np-tier-extitle::before,.np-tier-extitle::after{content:'';flex:1;height:1px;background:#dce8f4}
.np-tier-exgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:26px}
.np-tier-excard{border-radius:14px;padding:17px 19px;display:flex;align-items:flex-start;gap:12px}
.np-tier-exbasic{background:linear-gradient(135deg,#f0f7ff,#e4effc);border:1.5px solid #bfdbfe}
.np-tier-exdiamond{background:linear-gradient(135deg,#f5f0ff,#ede6ff);border:1.5px solid #c4b5fd}
.np-tier-exemoji{font-size:1.4rem;flex:0 0 auto}
.np-tier-exlabel{font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin-bottom:4px}
.np-tier-exbasic .np-tier-exlabel{color:#1d4ed8}
.np-tier-exdiamond .np-tier-exlabel{color:#6d28d9}
.np-tier-extext{font-size:.86rem;color:var(--np-ink);line-height:1.6}
.np-amt{color:#C00000}
.np-pts-basic{color:#1d4ed8}
.np-pts-diamond{color:#6d28d9}
.np-pts-note{color:#6d28d9;font-size:.78rem}

.np-tier-intro{margin:0 0 20px;font-size:.87rem;line-height:1.65;color:var(--np-sub)}

.np-tier-scroll{border-radius:16px;overflow-x:auto;box-shadow:0 4px 24px rgba(13,90,168,.12)}
.np-tier-tb{width:100%;border-collapse:collapse;min-width:560px}
.np-tier-icons th{padding:12px 6px 6px;text-align:center;font-size:1.3rem;background:#f7faff}
.np-tier-labels th{padding:14px 10px;font-size:.75rem;font-weight:900;text-transform:uppercase;letter-spacing:.06em;text-align:center;color:#fff}
.np-tier-labels th:first-child{background:#f0f6ff;color:var(--np-blue);text-align:left;padding-left:20px}
.np-tier-labels .lvl1{background:linear-gradient(180deg,#475569,#64748b)}
.np-tier-labels .lvl2{background:linear-gradient(180deg,#92400e,#b45309)}
.np-tier-labels .lvl3{background:linear-gradient(180deg,#334155,#64748b)}
.np-tier-labels .lvl4{background:linear-gradient(180deg,#92400e,#d97706)}
.np-tier-labels .lvl5{background:linear-gradient(180deg,#4c1d95,#7c3aed)}
.np-tier-tb tbody td{padding:16px 10px;text-align:center;font-size:.88rem;font-weight:700;border-top:1px solid #eef3fb}
.np-tier-rowlabel{text-align:left !important;padding-left:20px !important;font-size:.84rem;font-weight:600;color:var(--np-blue);background:#f7faff}

.np-chip{display:inline-flex;align-items:center;justify-content:center;min-width:60px;height:32px;border-radius:10px;font-size:.86rem;font-weight:800;padding:0 10px}
.np-chip.pc1{background:#f1f5f9;color:#475569;border:1.5px solid #cbd5e1}
.np-chip.pc2{background:#fef3c7;color:#92400e;border:1.5px solid #fcd34d}
.np-chip.pc3{background:#f1f5f9;color:#334155;border:1.5px solid #94a3b8}
.np-chip.pc4{background:#fffbeb;color:#b45309;border:1.5px solid #fbbf24}
.np-chip.pc5{background:#f5f3ff;color:#4c1d95;border:1.5px solid #c4b5fd}
.np-chip.mc1{background:linear-gradient(135deg,#e2e8f0,#cbd5e1);color:#334155}
.np-chip.mc2{background:linear-gradient(135deg,#fef3c7,#fcd34d);color:#78350f}
.np-chip.mc3{background:linear-gradient(135deg,#dde5f0,#94a3b8);color:#1e3a5f}
.np-chip.mc4{background:linear-gradient(135deg,#fef3c7,#f59e0b);color:#78350f;box-shadow:0 2px 8px rgba(245,158,11,.25)}
.np-chip.mc5{background:linear-gradient(135deg,#7c3aed,#4c1d95);color:#fff;font-size:.94rem;box-shadow:0 4px 14px rgba(124,58,237,.4)}

.np-tier-note{
  margin-top:22px;padding:14px 20px;border-radius:12px;text-align:center;
  background:linear-gradient(135deg,#f0f7ff,#e8f4fb);border:1px solid #bfdbfe;
  font-size:.82rem;line-height:1.7;color:#3a5a7e;
}
.np-tier-note a{color:var(--np-blue-dk);font-weight:700}

@media (max-width:640px){
  .np-tier{padding:52px 20px}
  .np-tier-hdr{padding:32px 24px 26px}
  .np-tier-body{padding:24px 20px 30px}
  .np-tier-exgrid{grid-template-columns:1fr}
}

/* ==============================================================
   4. THỜI HẠN + QUY ĐỊNH SỬ DỤNG
   ============================================================== */
.np-rules{background:#fff;font-family:var(--np-font);padding:20px 44px 60px}
.np-rules-wrap{max-width:1200px;margin:0 auto;display:flex;flex-direction:column;gap:56px}
.np-rules-row{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.np-rules-rev .np-rules-md{order:2}
.np-rules-md img{display:block;width:100%;height:auto;border-radius:16px;box-shadow:0 20px 50px rgba(13,90,168,.14)}
.np-rules-tx h2{margin:0 0 16px;font-size:clamp(20px,2.4vw,27px);font-weight:800;color:var(--np-blue)}
.np-rules-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.np-rules-list li{display:flex;align-items:flex-start;gap:10px;font-size:14.4px;line-height:1.62;color:var(--np-ink)}
.np-rules-list li svg{flex:0 0 auto;width:19px;height:19px;margin-top:2px;color:var(--np-blue)}
.np-rules-list b{color:var(--np-blue-dk)}

@media (max-width:900px){
  .np-rules{padding:10px 20px 48px}
  .np-rules-wrap{gap:38px}
  .np-rules-row,.np-rules-rev{grid-template-columns:1fr}
  .np-rules-rev .np-rules-md{order:-1}
}

/* ==============================================================
   5. CTA
   ============================================================== */
.np-cta{
  position:relative;overflow:hidden;isolation:isolate;font-family:var(--np-font);
  padding:70px 24px;text-align:center;color:#fff;background:var(--np-cream);
}
.np-cta-wrap{
  position:relative;max-width:760px;margin:0 auto;padding:56px 48px;border-radius:24px;overflow:hidden;
  background:linear-gradient(135deg,var(--np-blue-dk) 0%,var(--np-blue) 60%,#4e9ce3 100%);
}
.np-cta-wrap::before{
  content:'CLOUDZONE';position:absolute;font-size:7.5rem;font-weight:800;color:rgba(255,255,255,.04);
  top:50%;left:50%;transform:translate(-50%,-50%);white-space:nowrap;pointer-events:none;letter-spacing:-.02em;
}
.np-cta h2{position:relative;z-index:1;margin:0;font-size:clamp(24px,3vw,34px);font-weight:800}
.np-cta p{position:relative;z-index:1;margin:14px auto 0;max-width:480px;font-size:14.8px;line-height:1.7;color:rgba(255,255,255,.78)}
.np-cta-btns{position:relative;z-index:1;margin-top:28px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.np-cta-main,.np-cta-ghost{display:inline-flex;align-items:center;gap:8px;justify-content:center;padding:14px 28px;border-radius:11px;font-size:15px;font-weight:700;text-decoration:none;transition:.26s}
.np-cta-main svg{width:16px;height:16px}
.np-cta-main{background:var(--np-gold);color:#011A4D}
.np-cta-main:hover{background:#f5c726;transform:translateY(-3px);box-shadow:0 12px 28px rgba(227,183,33,.36)}
.np-cta-ghost{background:transparent;color:rgba(255,255,255,.88);border:1.5px solid rgba(255,255,255,.32)}
.np-cta-ghost:hover{border-color:rgba(255,255,255,.7);color:#fff;background:rgba(255,255,255,.08)}
.np-cta-note{position:relative;z-index:1;margin-top:18px;font-size:12.6px;color:rgba(255,255,255,.55)}
.np-cta-note b{color:rgba(255,255,255,.86)}

@media (max-width:768px){
  .np-cta-wrap{padding:42px 26px}
  .np-cta-btns{flex-direction:column;align-items:stretch}
}

/* ==============================================================
   6. FAQ
   ============================================================== */
.np-faq{background:#fff;font-family:var(--np-font);padding:70px 44px}
.np-faq-wrap{max-width:1200px;margin:0 auto}
.np-faq-grid{margin-top:36px;display:grid;grid-template-columns:1fr 1fr;gap:0 40px}
.np-faq-item{border-bottom:1px solid rgba(41,143,235,.14)}
.np-faq-q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px 2px;background:none;border:0;cursor:pointer;text-align:left;
  font-family:inherit;font-size:14.8px;font-weight:700;color:var(--np-ink);
}
.np-faq-ic{position:relative;flex:0 0 auto;width:20px;height:20px}
.np-faq-ic::before,.np-faq-ic::after{content:'';position:absolute;background:var(--np-blue);border-radius:2px;transition:.25s}
.np-faq-ic::before{left:2px;right:2px;top:9px;height:2px}
.np-faq-ic::after{top:2px;bottom:2px;left:9px;width:2px}
.np-faq-q[aria-expanded="true"] .np-faq-ic::after{transform:rotate(90deg);opacity:0}
.np-faq-a{max-height:0;overflow:hidden;transition:max-height .32s ease}
.np-faq-a p{margin:0 2px 18px;font-size:13.6px;line-height:1.7;color:var(--np-sub)}
.np-faq-a a{color:var(--np-blue-dk);font-weight:700}
.np-faq-q[aria-expanded="true"]+.np-faq-a{max-height:260px}

@media (max-width:900px){
  .np-faq{padding:52px 20px}
  .np-faq-grid{grid-template-columns:1fr;gap:0}
}

/* ==============================================================
   7. LIÊN HỆ NHANH
   ============================================================== */
.np-contact{background:#0d1b2e;font-family:var(--np-font);color:rgba(230,240,255,.82);padding:44px 44px 50px}
.np-contact-wrap{max-width:1300px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:26px}
.np-contact-brand{display:flex;align-items:center;gap:16px;flex:1 1 320px;min-width:260px}
.np-contact-brand img{display:block;height:44px;width:auto}
.np-contact-brand p{margin:0;font-size:12px;line-height:1.6;color:rgba(230,240,255,.6)}
.np-contact-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:18px}
.np-contact-list a{display:flex;align-items:center;gap:9px;color:inherit;text-decoration:none;font-size:12.8px;transition:.2s}
.np-contact-list a:hover{color:#fff}
.np-contact-list img{display:block;width:26px;height:26px;border-radius:7px}
.np-contact-addr{display:flex;align-items:center;gap:8px;color:inherit;text-decoration:none;font-size:12.6px;line-height:1.5;white-space:nowrap}
.np-contact-addr svg{width:17px;height:17px;flex:0 0 auto}
.np-contact-addr:hover{color:#fff}

@media (max-width:760px){
  .np-contact{padding:36px 20px 40px}
  .np-contact-wrap{flex-direction:column;align-items:flex-start}
  .np-contact-addr{white-space:normal}
}

/* ==============================================================
   8. HIỆU ỨNG XUẤT HIỆN KHI CUỘN
   ============================================================== */
html.np-anim [data-rv]{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease;transition-delay:var(--rvd,0ms)}
html.np-anim [data-rv="fade"]{transform:none}
html.np-anim [data-rv="left"]{transform:translateX(-26px)}
html.np-anim [data-rv="right"]{transform:translateX(26px)}
html.np-anim [data-rv].is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html.np-anim [data-rv]{opacity:1;transform:none;transition:none}
}