/* ============================================================
   TOPONE WEB DESIGN – PREMIUM NEON SYSTEM
   (File tách riêng – dùng cho trang Thiết Kế Website)
   ============================================================ */

/* =========================
   GLOBAL BASE
========================= */

:root{
  --dark-1: #0c0f15;
  --dark-2: #0d1016;
  --txt: #e6f1ff;
  --muted: #9bb0c8;
  --neon-blue: #19f0ff;
  --neon-purple: #b169ff;
  --neon-green: #4cff4c;
  --glass-light: rgba(255,255,255,.06);
  --glass-border: rgba(255,255,255,.12);
}

/* ============================
   HERO – TOPONE WEB DESIGN
============================ */

:root{
  --bg: #0a0d12;
  --txt:#e6f1ff;
  --muted:#9bb0c8;
  --primary:#19f0ff;
  --accent:#9b5cff;
  --lime:#7efc7e;
  --glass: rgba(255,255,255,.08);
  --br: 18px;
}

/* SECTION */
.hero-topone{
  position:relative;
  isolation:isolate;
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(25,240,255,.14), transparent 60%),
    radial-gradient(1000px 500px at 90% 10%, rgba(155,92,255,.12), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
  color: var(--txt);
  overflow:hidden;
}

.hero-topone .hero-wrap{
  width:min(1200px,92vw);
  margin:0 auto;
  padding:80px 0 40px;
  display:grid;
  grid-template-columns: 1.2fr 1fr;
  gap:40px;
  align-items:center;
}

#hero-particles{
  position:absolute;
  inset:0;
  z-index:0;
}

/* COPY COLUMN */
.hero-col{
  position:relative;
  z-index:1;
}

.hero-kicker{
  color:var(--lime);
  text-transform:uppercase;
  letter-spacing:.18em;
  font-weight:700;
  font-size:12px;
}

/* TITLE */
#hero-title{
  font-size: clamp(36px, 4.6vw, 60px);
  line-height: 1.07;
  font-weight: 800;
  background: linear-gradient(90deg, #7efc7e, #19f0ff);
  -webkit-background-clip: text;
  color: transparent;
  margin:12px 0 10px;
}

/* SUBTITLE */
.hero-sub{
  font-size: clamp(16px, 2vw, 21px);
  color: #b7ffb7;
  font-weight: 500;
  margin: 0 0 14px;
}

/* BULLETS */
.hero-bullets{
  list-style:none;
  padding:0;
  margin:14px 0 22px;
  display:grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap:10px;
}

.hero-bullets li{
  display:flex;
  align-items:center;
  gap:10px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  border-radius:14px;
  padding:10px 12px;
}

.dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:#7efc7e;
  box-shadow:0 0 14px #7efc7e;
}

/* CTAS */
.hero-ctas{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.btn{
  cursor:pointer;
  padding:10px 16px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  color:var(--txt);
  text-decoration:none;
}

.btn-primary{
  border:none;
  background:linear-gradient(90deg, var(--primary), var(--accent));
  color:#00131a;
  font-weight:800;
  box-shadow:
    0 0 10px rgba(25,240,255,.6),
    0 0 28px rgba(155,92,255,.35);
}

.btn-ghost{
  backdrop-filter:saturate(140%) blur(10px);
}

/* PHOTO */
.hero-figure{
  position:relative;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow: 0 10px 30px rgba(0,0,0,.5), 0 0 60px rgba(25,240,255,.08);
  padding:14px;
}

.hero-img{
  display:block;
  border-radius:14px;
}

/* MOBILE */
@media (max-width: 1024px){
  .hero-topone .hero-wrap{
    grid-template-columns: 1fr;
  }
  .hero-bullets{
    grid-template-columns:1fr;
  }
}


/* =========================
   SECTION SOCIAL BENEFIT
========================= */

#topone-social-benefit {
    padding: 80px 0;
    background:
      radial-gradient(1000px 500px at 50% -40%, rgba(25, 240, 255, .15), transparent),
      linear-gradient(180deg, var(--dark-1), var(--dark-2));
    color: var(--txt);
}

#topone-social-benefit .topone-container {
    max-width: 1200px;
    width: 92vw;
    margin: 0 auto;
}

/* SOCIAL TITLE */
.topone-social {
    text-align: center;
    margin-bottom: 60px;
}

.topone-social .sp-title {
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 26px;
    color: #eaffea;
    text-shadow: 0 0 20px rgba(76, 255, 76, .35);
}

/* Logos */
.sp-logos {
    display: flex;
    justify-content: center;
    gap: 45px;
    flex-wrap: wrap;
    margin-bottom: 30px;
}

.sp-logos img {
    height: 40px;
    opacity: .85;
    filter: brightness(1.3);
    transition: .3s;
}

.sp-logos img:hover {
    opacity: 1;
    transform: translateY(-4px);
    filter: brightness(1.9) drop-shadow(0 0 16px rgba(25,240,255,.5));
}

/* Stats */
.sp-stats {
    display: flex;
    justify-content: center;
    gap: 50px;
}

.sp-stats div {
    background: var(--glass-light);
    padding: 18px 24px;
    border-radius: 14px;
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(10px);
    box-shadow: 0 0 20px rgba(25,240,255,.08);
    transition: .3s;
}

.sp-stats div:hover {
    box-shadow: 0 0 30px rgba(25,240,255,.25);
    transform: translateY(-4px);
}

.sp-stats strong {
    font-size: 32px;
    font-weight: 800;
    color: #b0ffb0;
    text-shadow: 0 0 14px rgba(76,255,76,.35);
}

.sp-stats span {
    display:block;
    font-size: 14px;
    color: var(--muted);
    margin-top: 4px;
}


/* =========================
   BENEFITS GRID
========================= */

.topone-benefits {
    padding: 60px 0 30px;
}

/* 3 cột desktop */
.b-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
}

/* CARD */
.b-card {
    padding: 28px;
    border-radius: 20px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
    backdrop-filter: blur(14px) saturate(140%);
    box-shadow:
      0 10px 30px rgba(0,0,0,.25),
      inset 0 0 20px rgba(25,240,255,.05);
    transition: .35s;
    position: relative;
}

.b-card:hover {
    transform: translateY(-8px);
    box-shadow:
      0 18px 50px rgba(25,240,255,.18),
      inset 0 0 20px rgba(25,240,255,.12);
    border-color: rgba(25,240,255,.4);
}

/* GLOW ORB */
.b-card::before {
    content:"";
    position:absolute;
    top:-12px; left:-12px;
    width:60px; height:60px;
    background:linear-gradient(135deg,var(--neon-blue),var(--neon-purple));
    border-radius:50%;
    filter:blur(24px);
    opacity:.35;
    z-index:-1;
}

/* Icon box */
.b-card .b-icon {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    background: linear-gradient(135deg, #19f0ff33, #b169ff33);
    border: 1px solid rgba(255,255,255,.15);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    box-shadow: 0 0 18px rgba(25,240,255,.18);
}

.b-card .b-icon img {
    width: 28px;
    height: 28px;
    filter: brightness(1.2);
}

.b-card h3 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 8px;
    color: #eaffea;
}

.b-card p {
    color: #98a7be;
    font-size: 15px;
    line-height: 1.55;
}

/* List phụ */
.b-more {
    margin-top: 12px;
    padding-left: 18px;
    color: #9eb3ca;
    font-size: 14px;
}

/* Responsive */
@media(max-width: 820px) {
    .b-row {
        grid-template-columns: 1fr;
    }
    .sp-stats {
        flex-direction: column;
        gap: 20px;
    }
}
/* ============================================================
   TOPONE WEB DESIGN – PREMIUM PRICING
   ============================================================ */
/* =========================================================
   TOPONE PRICING – CLEAN VERSION (DESKTOP + MOBILE OPTIMIZED)
   FIX Flatsome Wrapper • 3 Cột Chuẩn • Mobile Cao Cấp
========================================================= */

/* SECTION */
#topone-pricing {
  padding: 90px 0;
  background:
    radial-gradient(1100px 600px at 50% -60%, rgba(25,240,255,.15), transparent),
    linear-gradient(180deg, #0c0f15, #0d1118);
  color: #e6f1ff;
}

/* CONTAINER */
#topone-pricing .pricing-container {
  max-width: 1000px;
  width: 92vw;
  margin: 0 auto;
  text-align: center;
}

/* TITLE */
.pricing-title {
  font-size: 36px;
  font-weight: 800;
  margin-bottom: 10px;
  color: #eaffea;
  text-shadow: 0 0 22px rgba(76,255,76,.35);
}

.pricing-sub {
  color: #95a8c1;
  margin-bottom: 40px;
  font-size: 16px;
}

/* =========================================================
   FIX 1 – NGĂN FLATSOME WRAPPER PHÁ LAYOUT
========================================================= */
#topone-pricing .row,
#topone-pricing .col,
#topone-pricing .col-inner,
#topone-pricing .container,
#topone-pricing p:has(.pricing-card),
#topone-pricing div:has(.pricing-card):not(.pricing-grid) {
  display: contents !important;
  padding: 0 !important;
  margin: 0 !important;
  width: auto !important;
  max-width: none !important;
  float: none !important;
}

#topone-pricing .pricing-grid > div:not(.pricing-card),
#topone-pricing .pricing-grid > p {
  display: contents !important;
}

/* Xóa <br> Flatsome tự chèn */
#topone-pricing br {
  display: none !important;
}

/* =========================================================
   GRID DESKTOP
========================================================= */
#topone-pricing .pricing-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 30px !important;
  margin-top: 40px;
  max-width: 70% !important;      /* 70% → tự nhiên, sang, cân đối */
  margin-left: auto !important;
  margin-right: auto !important;
}

/* =========================================================
   CARD
========================================================= */
.pricing-card {
  padding: 28px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 20px;
  backdrop-filter: blur(14px) saturate(160%);
  box-shadow:
    0 10px 30px rgba(0,0,0,.25),
    inset 0 0 20px rgba(25,240,255,.08);
  transition: .35s;
  text-align: left;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

.pricing-card:hover {
  transform: translateY(-8px);
  box-shadow:
    0 22px 50px rgba(25,240,255,.18),
    inset 0 0 24px rgba(25,240,255,.14);
  border-color: rgba(25,240,255,.45);
}

.pricing-card.highlight {
  border-color: rgba(76,255,76,.45);
  box-shadow: 0 0 25px rgba(76,255,76,.25);
}

/* HEAD */
.pc-head h3 {
  font-size: 24px;
  font-weight: 800;
  margin-bottom: 6px;
  color: #eaffea;
}

.pc-desc {
  font-size: 15px;
  color: #9bb0c8;
  margin-bottom: 20px;
}

/* FEATURES */
.pc-features {
  margin-bottom: 20px;
  padding-left: 20px;
}

.pc-features li {
  margin-bottom: 6px;
  font-size: 14px;
  color: #a9b9ce;
  list-style: disc;
}

/* INFO */
.pc-info p {
  font-size: 14px;
  color: #b7c6da;
  margin-bottom: 6px;
}

/* PRICE */
.pc-price {
  font-size: 26px;
  font-weight: 800;
  margin: 20px 0;
  color: #79ff79;
}

/* BUTTON */
.pc-btn {
  margin-top: auto;
  text-align: center;
  padding: 12px 18px;
  border-radius: 50px;
  font-weight: 700;
  background: linear-gradient(90deg, #19f0ff, #b169ff);
  color: #00151f !important;
  text-decoration: none;
  transition: .3s;
  display: block;
}

.pc-btn.primary {
  background: linear-gradient(90deg, #4cff4c, #19f0ff);
  color: #001a0a !important;
}

.pc-btn:hover { opacity: .85; }

/* =========================================================
   TABLET
========================================================= */
@media (max-width: 1024px) {
  #topone-pricing .pricing-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    max-width: 85% !important;
  }
}

/* =========================================================
   MOBILE
========================================================= */
@media (max-width: 600px) {

  #topone-pricing .pricing-grid {
    grid-template-columns: 1fr !important;
    max-width: 100% !important;
    gap: 20px !important;
    padding: 0 12px !important;
  }

  .pricing-card {
    padding: 20px !important;
    border-radius: 16px !important;
  }

  .pc-head h3 { font-size: 20px !important; }
  .pc-desc { font-size: 14px !important; margin-bottom: 14px !important; }

  .pc-features { margin-bottom: 16px !important; padding-left: 18px !important; }
  .pc-features li { font-size: 13px !important; }

  .pc-info p { font-size: 13px !important; }

  .pc-price { font-size: 20px !important; margin: 14px 0 !important; }

  .pc-btn {
    font-size: 14px !important;
    padding: 10px 16px !important;
    border-radius: 40px !important;
    margin-top: 12px !important;
  }
}




/* ============================================================
   TOPONE PORTFOLIO – PREMIUM GLASS GRID
   ============================================================ */

#topone-portfolio {
  padding: 100px 0;
  background:
    radial-gradient(900px 500px at 50% -60%, rgba(25,240,255,.12), transparent),
    linear-gradient(180deg, #0c0f15, #0c0f15);
  color: #e6f1ff;
}

#topone-portfolio .portfolio-container {
  max-width: 1200px;
  width: 92vw;
  margin: 0 auto;
  text-align: center;
}

.pf-title {
  font-size: 36px;
  font-weight: 800;
  margin-bottom: 10px;
  color: #eaffea;
  text-shadow: 0 0 22px rgba(76,255,76,.35);
}

.pf-sub {
  color: #99a9c2;
  margin-bottom: 50px;
}

/* GRID */
#topone-portfolio .pf-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0,1fr)) !important;
  gap: 30px !important;
}

/* CARD */
.pf-card {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  transition: .35s;
  cursor: pointer;
  box-shadow:
    0 10px 30px rgba(0,0,0,.3),
    inset 0 0 14px rgba(25,240,255,.05);
}

.pf-card:hover {
  transform: translateY(-10px);
  box-shadow:
    0 22px 50px rgba(25,240,255,.25),
    inset 0 0 20px rgba(25,240,255,.08);
  border-color: rgba(25,240,255,.35);
}

/* IMAGE */
.pf-img-wrap {
  width: 100%;
  height: 210px;
  overflow: hidden;
}

.pf-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: .5s;
}

.pf-card:hover img {
  transform: scale(1.12) rotate3d(1,1,0,6deg);
  filter: brightness(1.25);
}

/* INFO */
.pf-info {
  padding: 20px;
  text-align: left;
}

.pf-info h3 {
  margin-bottom: 5px;
  font-size: 18px;
  font-weight: 700;
  color: #eaffea;
}

.pf-info p {
  color: #9bb0c8;
  font-size: 14px;
}

/* RESPONSIVE */
@media (max-width: 1024px){
  #topone-portfolio .pf-grid {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }
}
@media (max-width: 680px){
  #topone-portfolio .pf-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ANTI-CONFLICT – xoá wrapper Flatsome */
#topone-portfolio .pf-grid > *:not(.pf-card),
#topone-portfolio .row,
#topone-portfolio .col,
#topone-portfolio .col-inner,
#topone-portfolio .container,
#topone-portfolio .ux-text,
#topone-portfolio p:has(.pf-card),
#topone-portfolio p:has(.pf-grid){
  display: contents !important;
  width: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  float: none !important;
}

/* FIX ảnh portfolio bị crop */
#topone-portfolio .pf-img-wrap {
  height: auto !important;
  max-height: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

#topone-portfolio .pf-img-wrap img {
  width: 100%;
  height: auto !important;
  object-fit: contain !important;
  border-radius: 8px;
}
/* ============================================================
   TOPONE – TIMELINE HORIZONTAL (NEON LINE)
   ============================================================ */

#topone-timeline-h {
  padding: 110px 0;
  background:
    radial-gradient(900px 400px at 50% -60%, rgba(25,240,255,.16), transparent),
    linear-gradient(180deg, #0b0e13, #0b0e13);
  color: #e6f1ff;
}

.tlh-title {
  text-align: center;
  font-size: 36px;
  font-weight: 800;
  color: #eaffea;
  margin-bottom: 8px;
  text-shadow: 0 0 20px rgba(76,255,76,.35);
}

.tlh-sub {
  text-align: center;
  color: #9bb0c8;
  margin-bottom: 60px;
}

/* Container */
#topone-timeline-h .tlh-container {
  max-width: 1300px;
  width: 92vw;
  margin: 0 auto;
  position: relative;
}

/* Neon line */
.tlh-line {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #19f0ff, #b169ff);
  filter: drop-shadow(0 0 10px rgba(25,240,255,.6));
  transform: translateY(-50%);
}

/* Steps horizontal */
.tlh-steps {
  display: flex !important;
  justify-content: space-between;
  gap: 20px;
  position: relative;
  padding: 40px 0;
}

/* Step */
.tlh-step {
  position: relative;
  flex: 1;
  text-align: center;
}

/* Dots */
.tlh-dot {
  width: 20px;
  height: 20px;
  background: #19f0ff;
  border-radius: 50%;
  margin: 0 auto;
  position: relative;
  top: -30px;
  box-shadow:
    0 0 10px rgba(25,240,255,.8),
    0 0 25px rgba(25,240,255,.5);
}

/* Content box */
.tlh-box {
  margin-top: 20px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  padding: 20px;
  border-radius: 16px;
  backdrop-filter: blur(12px) saturate(150%);
  transition: .35s;
  box-shadow:
    0 10px 20px rgba(0,0,0,.25),
    inset 0 0 18px rgba(25,240,255,.06);
}

.tlh-box:hover {
  transform: translateY(-10px);
  border-color: rgba(25,240,255,.4);
  box-shadow:
    0 22px 50px rgba(25,240,255,.2),
    inset 0 0 24px rgba(25,240,255,.12);
}

.tlh-box h3 {
  color: #eaffea;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 6px;
}

.tlh-box p {
  color: #9bb0c8;
  font-size: 14px;
}

/* MOBILE – vertical timeline */
@media (max-width: 900px){
  .tlh-steps {
    flex-direction: column !important;
    gap: 60px;
  }
  .tlh-line {
    height: 100%;
    width: 3px;
    left: 20px;
    top: 0;
    background: linear-gradient(180deg, #19f0ff, #b169ff);
    transform: none;
  }
  .tlh-dot {
    position: absolute;
    left: 10px;
    top: 0;
  }
  .tlh-box {
    margin-left: 40px;
    text-align: left;
  }
}

/* Remove Flatsome wrappers */
#topone-timeline-h .tlh-steps > *:not(.tlh-step),
#topone-timeline-h .row,
#topone-timeline-h .col,
#topone-timeline-h .col-inner,
#topone-timeline-h .ux-text,
#topone-timeline-h p:has(.tlh-step),
#topone-timeline-h p:has(.tlh-steps){
  display: contents !important;
  margin: 0 !important; padding: 0 !important; float: none !important;
}



/* ============================================================
   TOPONE – TECH STACK (NEON GLASS GRID)
   ============================================================ */

#topone-techstack {
  padding: 100px 0;
  background:
    radial-gradient(900px 500px at 50% -60%, rgba(25,240,255,.12), transparent),
    linear-gradient(180deg, #0b0e13, #0b0e13);
  color: #e6f1ff;
}

#topone-techstack .ts-container {
  max-width: 1200px;
  width: 92vw;
  margin: 0 auto;
  text-align: center;
}

.ts-title {
  font-size: 36px;
  font-weight: 800;
  color: #eaffea;
  margin-bottom: 10px;
  text-shadow: 0 0 22px rgba(76,255,76,.35);
}

.ts-sub {
  color: #9bb0c8;
  margin-bottom: 60px;
  font-size: 16px;
}

/* Grid */
#topone-techstack .ts-grid {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0,1fr)) !important;
  gap: 30px;
}

/* Item */
.ts-item {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  padding: 20px 10px;
  text-align: center;
  backdrop-filter: blur(12px) saturate(150%);
  transition: .35s;
  box-shadow:
    0 10px 20px rgba(0,0,0,.25),
    inset 0 0 14px rgba(25,240,255,.05);
}

.ts-item:hover {
  transform: translateY(-8px) rotate3d(1,1,0,6deg);
  border-color: rgba(25,240,255,.4);
  box-shadow:
    0 22px 45px rgba(25,240,255,.25),
    inset 0 0 22px rgba(25,240,255,.15);
}

/* Icon */
.ts-img-wrap {
  width: 70px;
  height: 70px;
  margin: 0 auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ts-img-wrap img {
  width: 60px;
  height: 60px;
  object-fit: contain;
  transition: .4s;
  filter: drop-shadow(0 0 8px rgba(25,240,255,.5));
}

.ts-item:hover img {
  transform: scale(1.12);
  filter: drop-shadow(0 0 12px rgba(25,240,255,1));
}

.ts-item p {
  color: #9bb0c8;
  font-size: 14px;
}

/* Responsive */
@media (max-width: 1024px){
  #topone-techstack .ts-grid {
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
  }
}
@media (max-width: 680px){
  #topone-techstack .ts-grid {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }
}

/* Remove Flatsome wrappers */
#topone-techstack .ts-grid > *:not(.ts-item),
#topone-techstack .row,
#topone-techstack .col,
#topone-techstack .col-inner,
#topone-techstack .ux-text,
#topone-techstack p:has(.ts-item),
#topone-techstack p:has(.ts-grid){
  display: contents !important;
}




/* ============================================================
   TOPONE – USP (NEON 3D)
   ============================================================ */

#topone-usp {
  padding: 100px 0;
  background:
    radial-gradient(900px 500px at 50% -60%, rgba(25,240,255,.12), transparent),
    linear-gradient(180deg, #0b0e13, #0b0e13);
  color: #e6f1ff;
}

#topone-usp .usp-container {
  max-width: 1200px;
  width: 92vw;
  margin: 0 auto;
  text-align: center;
}

.usp-title {
  font-size: 36px;
  font-weight: 800;
  color: #eaffea;
  margin-bottom: 10px;
  text-shadow: 0 0 22px rgba(76,255,76,.35);
}

.usp-sub {
  color: #9bb0c8;
  margin-bottom: 60px;
}

/* Grid */
#topone-usp .usp-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0,1fr)) !important;
  gap: 30px;
}

/* Card */
.usp-card {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  padding: 26px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  backdrop-filter: blur(12px) saturate(150%);
  transition: .35s;
  box-shadow:
    0 10px 25px rgba(0,0,0,.25),
    inset 0 0 14px rgba(25,240,255,.05);
}

.usp-card:hover {
  transform: translateY(-10px) rotate3d(1,1,0,6deg);
  border-color: rgba(25,240,255,.35);
  box-shadow:
    0 20px 45px rgba(25,240,255,.22),
    inset 0 0 20px rgba(25,240,255,.12);
}

/* Icon */
.usp-icon {
  width: 70px;
  height: 70px;
  border-radius: 14px;
  margin: 0 auto 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(135deg, #19f0ff33, #b169ff33);
  border: 1px solid rgba(255,255,255,.15);
  box-shadow: 0 0 20px rgba(25,240,255,.3);
}

.usp-icon img {
  width: 38px;
  height: 38px;
  transition: .35s;
  filter: drop-shadow(0 0 10px rgba(25,240,255,.6));
}

.usp-card:hover img {
  transform: scale(1.12);
  filter: drop-shadow(0 0 14px rgba(25,240,255,1));
}

.usp-card h3 {
  margin-bottom: 8px;
  color: #eaffea;
  font-size: 18px;
}

.usp-card p {
  color: #9bb0c8;
  font-size: 14px;
}

/* Responsive */
@media (max-width:1024px){
  #topone-usp .usp-grid {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }
}
@media (max-width:680px){
  #topone-usp .usp-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Remove Flatsome wrappers */
#topone-usp .usp-grid > *:not(.usp-card),
#topone-usp .row,
#topone-usp .col,
#topone-usp .col-inner,
#topone-usp .ux-text,
#topone-usp p:has(.usp-card),
#topone-usp p:has(.usp-grid){
  display: contents !important;
}




/* ============================================================
   TOPONE – TESTIMONIAL (SCROLL-SNAP)
   ============================================================ */

#topone-testimonial {
  padding: 100px 0;
  background:
    radial-gradient(900px 500px at 50% -60%, rgba(25,240,255,.14), transparent),
    linear-gradient(180deg, #0b0e13, #0b0e13);
  color: #e6f1ff;
}

.fb-container {
  max-width: 1100px;
  width: 92vw;
  margin: 0 auto;
  text-align: center;
}

.fb-title {
  font-size: 36px;
  font-weight: 800;
  color: #eaffea;
  margin-bottom: 8px;
  text-shadow: 0 0 22px rgba(76,255,76,.35);
}

.fb-sub {
  color: #9bb0c8;
  margin-bottom: 50px;
}

/* Slider */
.fb-slider {
  display: flex !important;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 10px;
  scrollbar-width: none;
}
.fb-slider::-webkit-scrollbar { display:none; }

/* Card */
.fb-card {
  min-width: 300px;
  flex: 0 0 auto;
  padding: 30px 24px;
  scroll-snap-align: center;
  text-align: center;
  border-radius: 20px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(12px) saturate(150%);
  transition: .35s;
  box-shadow:
    0 10px 30px rgba(0,0,0,.25),
    inset 0 0 16px rgba(25,240,255,.05);
}

.fb-card:hover {
  transform: translateY(-10px) rotate3d(1,1,0,6deg);
  border-color: rgba(25,240,255,.35);
  box-shadow:
    0 20px 45px rgba(25,240,255,.25),
    inset 0 0 20px rgba(25,240,255,.12);
}

/* Avatar */
.fb-avatar {
  width: 80px;
  height: 80px;
  margin: 0 auto 16px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid rgba(25,240,255,.5);
  box-shadow:
    0 0 14px rgba(25,240,255,.6),
    0 0 28px rgba(155,92,255,.4);
}

.fb-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fb-text {
  font-size: 15px;
  color: #c9d7e6;
  line-height: 1.55;
  margin-bottom: 12px;
}

.fb-name {
  font-size: 17px;
  font-weight: 700;
  color: #eaffea;
}

.fb-role {
  font-size: 14px;
  color: #8fa0b7;
}

/* Remove Flatsome wrappers */
#topone-testimonial .row,
#topone-testimonial .col,
#topone-testimonial .col-inner,
#topone-testimonial .ux-text,
#topone-testimonial p:has(.fb-card),
#topone-testimonial p:has(.fb-slider){
  display: contents !important;
}




/* ============================================================
   FAQ – TAG CHIP SYSTEM
   ============================================================ */

#topone-faq-tags {
  padding: 70px 0;
  background: #0b0e13;
  color: #e6f1ff;
}

.fct-container {
  max-width: 820px;
  width: 92vw;
  margin: 0 auto;
  text-align: center;
}

.fct-title {
  font-size: 30px;
  font-weight: 800;
  color: #eaffea;
  text-shadow: 0 0 12px rgba(76,255,76,.25);
}

.fct-sub {
  font-size: 15px;
  margin-bottom: 25px;
  color: #9bb0c8;
}

/* TAG LIST */
.fct-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-bottom: 25px;
}

.fct-tag {
  padding: 8px 16px;
  font-size: 14px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 30px;
  cursor: pointer;
  color: #e6f1ff;
  transition: .25s;
  backdrop-filter: blur(10px);
}

.fct-tag:hover {
  border-color: #19f0ff;
  color: #19f0ff;
  box-shadow: 0 0 12px rgba(25,240,255,.35);
}

.fct-tag.active {
  background: linear-gradient(90deg, #19f0ff, #b169ff);
  color: #00131a;
  border-color: transparent;
  box-shadow:
    0 0 14px rgba(25,240,255,.6),
    0 0 28px rgba(155,92,255,.4);
}

/* ANSWER AREA */
.fct-answer-wrap {
  min-height: 60px;
}

.fct-answer {
  display: none;
  font-size: 15px;
  color: #b8c6d9;
  opacity: 0;
  transform: translateY(8px);
  transition: .35s;
}

.fct-answer.show {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

/* Remove Flatsome wrappers */
#topone-faq-tags .row,
#topone-faq-tags .col,
#topone-faq-tags .col-inner,
#topone-faq-tags .ux-text,
#topone-faq-tags p:has(.fct-tag){
  display: contents !important;
}




/* ============================================================
   CTA – NEON PREMIUM
   ============================================================ */

#topone-cta {
  padding: 90px 0;
  background:
    radial-gradient(900px 500px at 50% -50%, rgba(25,240,255,.12), transparent),
    linear-gradient(180deg, #0b0e13, #0b0e13);
  color: #e6f1ff;
}

#topone-cta .cta-wrap {
  max-width: 1100px;
  width: 92vw;
  margin: 0 auto;
  padding: 40px 50px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(135deg, rgba(25,240,255,.10), rgba(155,92,255,.10));
  backdrop-filter: blur(16px) saturate(160%);
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 10px 40px rgba(0,0,0,.35),
    inset 0 0 25px rgba(25,240,255,.14);
}

/* Glow overlay */
#topone-cta .cta-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 70% 20%, rgba(25,240,255,.22), transparent 60%);
}

/* Content */
.cta-content {
  max-width: 650px;
  position: relative;
  z-index: 2;
}

.cta-title {
  font-size: 32px;
  font-weight: 800;
  color: #eaffea;
  text-shadow: 0 0 22px rgba(76,255,76,.35);
  margin-bottom: 10px;
}

.cta-sub {
  font-size: 16px;
  color: #9bb0c8;
  margin-bottom: 22px;
}

/* Buttons */
.cta-buttons {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.cta-btn-primary {
  padding: 12px 24px;
  font-weight: 700;
  border-radius: 50px;
  background: linear-gradient(90deg, #19f0ff, #b169ff);
  color: #001319 !important;
  text-decoration: none;
  box-shadow:
    0 0 16px rgba(25,240,255,.5),
    0 0 28px rgba(155,92,255,.3);
  transition: .3s;
}

.cta-btn-primary:hover {
  opacity: .85;
  transform: translateY(-3px);
}

.cta-btn-ghost {
  padding: 12px 24px;
  border-radius: 50px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(10px);
  color: #e6f1ff !important;
  text-decoration: none;
  transition: .3s;
}

.cta-btn-ghost:hover {
  border-color: #19f0ff;
  box-shadow: 0 0 12px rgba(25,240,255,.4);
  transform: translateY(-3px);
}

/* Icon */
.cta-icon {
  width: 120px;
  height: 120px;
  flex-shrink: 0;
  z-index: 2;
}

.cta-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 18px rgba(25,240,255,.6));
  transition: .4s;
}

.cta-wrap:hover .cta-icon img {
  transform: scale(1.08) rotate3d(1,1,0,6deg);
  filter: drop-shadow(0 0 26px rgba(25,240,255,1));
}

/* Mobile */
@media (max-width: 900px){
  #topone-cta .cta-wrap {
    flex-direction: column;
    text-align: center;
    gap: 24px;
    padding: 40px 20px;
  }
  .cta-icon { order: -1; }
}

/* Remove flatsome wrappers */
#topone-cta .row,
#topone-cta .col,
#topone-cta .col-inner,
#topone-cta .ux-text,
#topone-cta p:has(.cta-wrap){
  display: contents !important;
}
/* ==== FIX BENEFIT GRID (ngăn so le) ==== */

/* 1) Ép .b-row là grid duy nhất */
.b-row{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:26px !important;
  align-items:stretch !important;
  grid-auto-rows:1fr; /* cao đều */
}

/* 2) Chỉ nhận .b-card là item lưới; bỏ toàn bộ wrapper UX Builder */
.b-row > *:not(.b-card),
.b-row .row,
.b-row .col,
.b-row .col-inner,
.b-row .container,
.b-row .ux-text,
.b-row p{
  display:contents !important;
  margin:0 !important;
  padding:0 !important;
  float:none !important;
  width:auto !important;
  max-width:none !important;
}

/* 3) Tắt packery/masonry nếu Flatsome lỡ kích hoạt */
.b-row .masonry__item,
.b-row [data-packery], 
.b-row .packery-item, 
.b-row .large-3, 
.b-row .medium-6 {
  position:static !important;
  top:auto !important;
  left:auto !important;
  transform:none !important;
}

/* 4) Thẻ card cao bằng nhau */
.b-card{
  height:100% !important;
  display:flex !important;
  flex-direction:column !important;
}

/* 5) Responsive */
@media(max-width:1024px){
  .b-row{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
}
@media(max-width:680px){
  .b-row{ grid-template-columns:1fr !important; }
}