/* ==========================================================================
   V9 — Bảng giá tổng đài (shortcode [v9bg_pricing])
   Every selector is scoped under .v9bg so nothing leaks into the theme.
   Palette matches the V9 PBX landing page (logo blues + per-package accents).
   ========================================================================== */
.v9bg{
  --v9-blue:#0871B6; --v9-blue-dark:#075E96; --v9-sky:#2CABE1;
  --v9-ink:#0f1c28; --v9-body:#41505c; --v9-muted:#6c7b89;
  --v9-line:#dfeaf3; --v9-bg-soft:#eff7fc;
  --v9-radius:14px; --v9-shadow:0 6px 24px rgba(8,67,111,.09);
  --v9-shadow-hover:0 16px 36px rgba(8,67,111,.17);
  color:var(--v9-body); font-size:16px; line-height:1.6;
  margin:26px 0 30px; text-align:left;
}
.v9bg *,.v9bg *::before,.v9bg *::after{box-sizing:border-box;}

/* ---- grid ---- */
.v9bg .v9bg-plans{display:grid;grid-template-columns:1fr;gap:18px;align-items:stretch;margin:0;}

/* ---- card ---- */
.v9bg .v9bg-plan{
  --pc:var(--v9-blue); --pc-soft:#e9f4fc;
  position:relative; background:linear-gradient(180deg,var(--pc-soft) 0%,rgba(255,255,255,0) 190px),#fff;
  border:1px solid var(--v9-line); border-radius:var(--v9-radius);
  padding:30px 22px 26px; display:flex; flex-direction:column; box-shadow:var(--v9-shadow);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
/* one accent colour per package */
.v9bg .v9bg-plan--basic{--pc:#0871B6;--pc-soft:#e9f4fc;}
.v9bg .v9bg-plan--standard{--pc:#0F8A8A;--pc-soft:#e6f6f6;}
.v9bg .v9bg-plan--call-center{--pc:#7B5AD9;--pc-soft:#f1eefb;}
.v9bg .v9bg-plan--omni-channel{--pc:#D2542B;--pc-soft:#fdf0eb;}
@media(hover:hover){
  .v9bg .v9bg-plan:hover{transform:translateY(-4px);box-shadow:var(--v9-shadow-hover);border-color:var(--pc);}
}
.v9bg .v9bg-plan--featured{border:2px solid var(--pc);box-shadow:0 20px 46px rgba(15,138,138,.22);padding-top:58px;}
.v9bg .v9bg-plan__ribbon{
  position:absolute;top:14px;left:50%;transform:translateX(-50%);
  background:linear-gradient(120deg,var(--pc),#2CABE1);color:#fff;
  font-size:.74rem;font-weight:800;padding:4px 14px;border-radius:999px;white-space:nowrap;
  letter-spacing:.03em;box-shadow:0 4px 12px rgba(15,138,138,.32);z-index:2;
}

/* ---- card head ---- */
.v9bg .v9bg-plan__name{
  font-size:1.15rem;font-weight:800;color:var(--pc);letter-spacing:.04em;
  margin:2px 0 8px;text-align:center;line-height:1.2;
}
.v9bg .v9bg-plan__price{text-align:center;margin:0 0 16px;color:var(--v9-ink);}
.v9bg .v9bg-plan__amount{font-size:2.3rem;font-weight:800;color:var(--v9-ink);line-height:1.05;}
.v9bg .v9bg-plan__cur{font-weight:700;color:var(--v9-ink);}
.v9bg .v9bg-plan__per{display:block;font-size:.85rem;color:var(--v9-muted);font-weight:500;margin-top:2px;}

/* ---- buttons ---- */
.v9bg .v9bg-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  min-height:48px;padding:12px 22px;border-radius:999px;font-weight:700;font-size:1rem;
  text-align:center;text-decoration:none;cursor:pointer;border:2px solid transparent;
  line-height:1.15;white-space:normal;
  transition:transform .15s ease,box-shadow .15s ease,background-color .15s ease,color .15s ease,filter .15s ease;
}
.v9bg .v9bg-btn--primary{background:linear-gradient(120deg,var(--pc,var(--v9-blue)),#2CABE1);color:#fff;box-shadow:0 8px 18px rgba(8,113,182,.30);}
.v9bg .v9bg-btn--primary:hover{filter:brightness(.94);color:#fff;transform:translateY(-2px);}
.v9bg .v9bg-btn--outline{background:#fff;color:var(--pc,var(--v9-blue));border-color:var(--pc,var(--v9-blue));}
.v9bg .v9bg-btn--outline:hover{background:var(--pc,var(--v9-blue));color:#fff;transform:translateY(-2px);}
.v9bg .v9bg-plan .v9bg-btn{width:100%;margin-bottom:14px;}
.v9bg a:focus-visible{outline:3px solid var(--v9-sky);outline-offset:2px;}

/* ---- feature list ---- */
.v9bg .v9bg-plan__lead{font-weight:700;color:var(--pc);margin:0 0 10px;font-size:.95rem;}
.v9bg .v9bg-plan__list{
  list-style:none;margin:0;padding:16px 0 0;display:grid;gap:10px;
  border-top:1px solid var(--v9-line);
}
.v9bg .v9bg-plan__list li{
  position:relative;padding-left:26px;margin:0;font-size:1rem;color:var(--v9-body);text-align:left;list-style:none;
}
.v9bg .v9bg-plan__list li::before{
  content:"";position:absolute;left:0;top:3px;width:18px;height:18px;border-radius:50%;
  background-color:var(--pc);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px no-repeat;
}

/* ---- note box ---- */
.v9bg .v9bg-note{
  margin-top:26px;background:var(--v9-bg-soft);border:1px solid var(--v9-line);
  border-radius:var(--v9-radius);padding:24px 22px;
}
.v9bg .v9bg-note__title{
  font-size:1.1rem;font-weight:800;color:var(--v9-ink);margin:0 0 14px;text-align:left;
}
.v9bg .v9bg-note__list{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:9px;}
.v9bg .v9bg-note__list li{
  position:relative;padding-left:24px;margin:0;color:var(--v9-body);list-style:none;text-align:left;
}
.v9bg .v9bg-note__list li::before{
  content:"";position:absolute;left:2px;top:.62em;width:8px;height:8px;border-radius:50%;
  background:var(--v9-sky);
}
.v9bg .v9bg-note__safe{margin:0 0 18px;color:var(--v9-muted);font-size:.94rem;text-align:left;}
.v9bg .v9bg-note__cta{--pc:var(--v9-blue);}

/* ---- >= 640px : 2-up ---- */
@media(min-width:640px){
  .v9bg .v9bg-plans{grid-template-columns:1fr 1fr;}
  .v9bg .v9bg-note{padding:28px 26px;}
}
/* ---- >= 1024px : 4-up ---- */
@media(min-width:1024px){
  .v9bg .v9bg-plans{grid-template-columns:repeat(4,1fr);gap:16px;}
  .v9bg .v9bg-plan{padding:28px 18px 24px;}
  .v9bg .v9bg-plan--featured{padding-top:56px;transform:translateY(-10px);}
  @media(hover:hover){.v9bg .v9bg-plan--featured:hover{transform:translateY(-14px);}}
  .v9bg .v9bg-plan__amount{font-size:2.05rem;}
  .v9bg .v9bg-plan__list li{font-size:.95rem;}
}
@media(prefers-reduced-motion:reduce){
  .v9bg .v9bg-plan,.v9bg .v9bg-btn{transition:none;}
}