/* ============ TOKENS ============ */
:root{
  --c-primary-1:#36d6ff;
  --c-primary-2:#00a8ff;
  --c-primary-3:#007bdb;
  --c-border:#29cbff;     /* viền chấm card */
  --c-dash:#d8eef9;       /* gạch đứt giữa dòng */
  --c-text:#1f2937;
  --c-muted:#667085;
  --c-orange-1:#ff8a3b;
  --c-orange-2:#ff6a00;
  --r-xl:28px;
  --shadow-blue:0 6px 22px rgba(0,123,219,.12);
  --shadow-orange:0 6px 22px rgba(255,127,39,.18);
}

/* ============ WRAPPER ============ */
.pricing{max-width:1200px;margin:0 auto;padding:8px 16px 32px;color:var(--c-text)}
.pricing *{box-sizing:border-box}

/* ============ NAV TABS ============ */
.pricing__tabs{display:flex;justify-content:center;gap:24px;flex-wrap:wrap;margin:0 0 28px}
.pricing__tab{
  appearance:none;background:transparent;border:none;cursor:pointer;
  padding:12px 18px;font-weight:800;font-size:20px;letter-spacing:.4px;
  color:#3fc3ef;border-bottom:3px solid transparent;transition:all .2s ease;
}
.pricing__tab:hover{color:var(--c-primary-2)}
.pricing__tab.is-active{color:#18b3ef;border-bottom-color:var(--c-primary-2)}

/* ============ PANELS ============ */
.pricing__panel{display:none}
.pricing__panel.is-active{display:block}

/* ============ GRID ============ */
.pricing__grid{display:grid;grid-template-columns:1fr 1fr;gap:36px}
.pricing__grid--3{grid-template-columns:repeat(3,1fr)}
@media (max-width:1024px){
  .pricing__grid,.pricing__grid--3{grid-template-columns:1fr}
}

/* ============ CARD ============ */
.bubble{
  position:relative;background:#fff;border-radius:var(--r-xl);
  border:3px dotted var(--c-border);               /* viền chấm 4 góc */
  padding:90px 40px 40px;                          /* chừa chỗ cho badge */
  box-shadow:var(--shadow-blue);
}
.bubble--orange{box-shadow:var(--shadow-orange)}

/* ====== BADGE – dính mép trên, chỉ bo 2 góc dưới ====== */
.bubble__badge{
  position:absolute;left:50%;top:0;transform:translateX(-50%);
  background:linear-gradient(90deg,var(--c-primary-1),var(--c-primary-2));
  color:#fff;font-size:18px;font-weight:900;text-transform:uppercase;letter-spacing:.4px;
  padding:14px 36px;border-radius:0 0 28px 28px; /* chỉ bo 2 góc dưới */
  white-space:nowrap;line-height:1;
}
.bubble--orange .bubble__badge{
  background:linear-gradient(90deg,var(--c-orange-1),var(--c-orange-2));
}

/* Sub label */
.bubble__sub{margin:10px 0 4px;text-align:center;font-size:16px;color:var(--c-muted);font-weight:700}

/* ====== LIST + dashed separators ====== */
.bubble__list{list-style:none;margin:0 0 16px;padding:0}
.bubble__list--center{ text-align:center }
.bubble__list li{
  padding:22px 0;font-size:20px;color:var(--c-text);
}
.bubble__list li + li{border-top:2px dashed var(--c-dash)}

/* ====== NOTE + CTA ====== */
.bubble__note{
  margin:22px 0 16px;text-align:center !important;font-weight:900;letter-spacing:.4px;
  text-transform:uppercase;color:#18BDFA !important;font-size:22px;
}
.bubble__btn{
  display:block;              
  margin:0 auto;              
  background:var(--c-primary-3);
  color:#fff;
  text-decoration:none;
  padding:14px 28px;
  border-radius:999px;
  font-weight:800;
  line-height:1;
  transition:transform .15s ease,box-shadow .2s ease,background .2s;
  box-shadow:0 12px 26px rgba(0,123,219,.25);
  text-align:center;         
  width:max-content;      
}

.bubble__btn:hover{
  background:#005fa3;
  transform:translateY(-1px);
  box-shadow:0 14px 28px rgba(0,123,219,.28);
}


/* Center nội dung riêng tab 1 để giống mock */
#bio-scan .bubble{ text-align:center }

/* ====== MOBILE ====== */
@media (max-width:480px){
  .pricing__tabs{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:nowrap;            
    overflow-x:auto;            
    overflow-y:hidden;
    white-space:nowrap;      
    -webkit-overflow-scrolling:touch;
    padding:0 8px 6px;
    margin:0 -8px;              
  }
  /* Ẩn thanh cuộn nhưng vẫn cuộn được (tùy chọn) */
  .pricing__tabs{ scrollbar-width:none; }
  .pricing__tabs::-webkit-scrollbar{ display:none; }

  .pricing__tab{
    flex:0 0 auto;      
    font-size:13px;
    padding:10px 12px;
    line-height:1.2;
    text-align:center;
    white-space:nowrap;           
    word-break:keep-all;         
  }

  .bubble{padding:78px 18px 24px}
  .bubble__badge{font-size:15px;padding:12px 20px;border-radius:0 0 22px 22px}
  .bubble__list li{font-size:16px;padding:16px 0}
  .bubble__note{font-size:18px}
  .bubble__btn{font-size:15px;padding:12px 20px}
}