/* ==========================================================================
   V9 Tech — conversion blocks for the "Zalo Mini App bán hàng" article.
   Everything is scoped under .v9zma so no other page or the article's own
   styling can be affected.
   ========================================================================== */
.v9zma{
  --z-blue:#0871B6; --z-deep:#08436F; --z-sky:#2CABE1;
  --z-ink:#0f1c28; --z-body:#41505c; --z-muted:#6c7b89;
  --z-line:#dfeaf3; --z-soft:#eff7fc;
  --z-radius:14px;
  margin-top:38px;color:var(--z-body);font-size:16px;line-height:1.65;
}
.v9zma *,.v9zma *::before,.v9zma *::after{box-sizing:border-box;}
.v9zma img{max-width:100%;height:auto;display:block;}
.v9zma a{text-decoration:none;}
.v9zma-sec{margin:0 0 34px;}
.v9zma-h2{
  font-size:clamp(1.25rem,2.6vw,1.72rem);font-weight:800;color:var(--z-ink);
  line-height:1.28;margin:0 0 8px;letter-spacing:-.012em;text-wrap:balance;
}
.v9zma-h2--light{color:#fff;}
.v9zma-sub{color:var(--z-muted);margin:0 0 20px;font-size:1rem;}

/* ---------- 1. sales templates ---------- */
.v9zma-grid{display:grid;grid-template-columns:1fr;gap:16px;}
.v9zma-card{
  display:flex;flex-direction:column;background:#fff;border:1px solid var(--z-line);
  border-radius:var(--z-radius);overflow:hidden;color:inherit;
  box-shadow:0 6px 22px rgba(8,67,111,.08);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.v9zma-card__media{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--z-soft);}
.v9zma-card__img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease;}
.v9zma-card__body{display:flex;flex-direction:column;flex:1;padding:16px 18px 18px;}
.v9zma-card__name{font-weight:700;font-size:1.05rem;color:var(--z-ink);margin-bottom:6px;}
.v9zma-card__desc{font-size:.96rem;color:var(--z-body);flex:1;}
.v9zma-card__more{margin-top:12px;font-weight:700;font-size:.93rem;color:var(--z-blue);}
@media(hover:hover){
  .v9zma-card:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(8,67,111,.16);border-color:var(--z-sky);}
  .v9zma-card:hover .v9zma-card__img{transform:scale(1.04);}
}
.v9zma-note{
  margin:18px 0 0;padding:14px 16px;background:var(--z-soft);
  border:1px dashed var(--z-sky);border-radius:var(--z-radius);color:var(--z-ink);font-size:.98rem;
}

/* ---------- 2. FAQ ---------- */
.v9zma-faq__item{
  background:#fff;border:1px solid var(--z-line);border-radius:10px;
  margin-bottom:9px;overflow:hidden;transition:border-color .2s ease,box-shadow .2s ease;
}
.v9zma-faq__item[open]{border-color:#c9e6f8;box-shadow:0 6px 20px rgba(8,67,111,.08);}
.v9zma-faq__q{
  cursor:pointer;list-style:none;display:flex;align-items:center;gap:12px;
  padding:13px 44px 13px 16px;position:relative;font-weight:700;color:var(--z-ink);
  font-size:1rem;line-height:1.45;min-height:52px;
}
.v9zma-faq__q::-webkit-details-marker{display:none;}
.v9zma-faq__q::before{
  content:"";flex:0 0 8px;width:8px;height:8px;border-radius:50%;background:var(--z-sky);
}
.v9zma-faq__q::after{
  content:"";position:absolute;right:17px;top:50%;width:10px;height:10px;
  border-right:2.4px solid var(--z-blue);border-bottom:2.4px solid var(--z-blue);
  transform:translateY(-50%) rotate(45deg);margin-top:-3px;transition:transform .18s ease;
}
.v9zma-faq__item[open] .v9zma-faq__q::after{transform:translateY(-50%) rotate(225deg);margin-top:2px;}
.v9zma-faq__item[open] .v9zma-faq__q{color:var(--z-deep);}
.v9zma-faq__a{padding:0 18px 15px 36px;color:var(--z-body);}
.v9zma-faq__a p{margin:0 0 10px;}
.v9zma-faq__a ol,.v9zma-faq__a ul{margin:0 0 8px;padding-left:20px;}
.v9zma-faq__a li{margin-bottom:6px;}
.v9zma-faq__a a{color:var(--z-blue);font-weight:600;text-decoration:underline;text-underline-offset:2px;}

/* ---------- 3. lead form ---------- */
.v9zma-formsec{
  background:linear-gradient(135deg,var(--z-deep) 0%,var(--z-blue) 55%,#1a8fd0 100%);
  border-radius:18px;padding:26px 22px;
}
.v9zma-formsec__inner{display:grid;grid-template-columns:1fr;gap:22px;}
.v9zma-formsec__aside{color:#fff;}
.v9zma-formsec__lead{color:rgba(255,255,255,.9);margin:8px 0 16px;}
.v9zma-formsec__bullets{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:10px;}
.v9zma-formsec__bullets li{position:relative;padding-left:28px;color:#fff;font-weight:500;}
.v9zma-formsec__bullets li::before{
  content:"";position:absolute;left:0;top:5px;width:19px;height:19px;border-radius:50%;background:#fff;
  -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;
}
.v9zma-hotline{
  display:inline-flex;align-items:center;gap:12px;color:#fff;font-size:1.02rem;
  background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.3);
  border-radius:999px;padding:9px 20px 9px 9px;min-height:52px;
}
.v9zma-hotline:hover{background:rgba(255,255,255,.2);color:#fff;}
.v9zma-hotline__ico{
  width:38px;height:38px;flex:0 0 38px;border-radius:50%;background:#fff;color:var(--z-blue);
  display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(3,40,66,.22);
}
.v9zma-hotline__ico svg{width:18px;height:18px;}
.v9zma-hotline strong{color:#ffd85e;}
.v9zma-formsec__card{background:#fff;border-radius:16px;padding:24px 20px;box-shadow:0 20px 46px rgba(3,40,66,.28);}

/* CF7 (theme disables CF7's own CSS, so the form is styled here) */
.v9zma-fgrid{display:grid;grid-template-columns:1fr;gap:16px;}
.v9zma-field{margin:0;display:flex;flex-direction:column;}
.v9zma-field--full{grid-column:1 / -1;}
.v9zma-field label{font-weight:700;color:var(--z-ink);margin-bottom:8px;font-size:.9rem;}
.v9zma-req{color:#D62D3C;}
.v9zma-formsec__card input[type=text],
.v9zma-formsec__card input[type=tel],
.v9zma-formsec__card select,
.v9zma-formsec__card textarea{
  width:100%;height:auto;min-height:48px;padding:13px 15px;border:1.5px solid var(--z-line);
  border-radius:12px;font-size:16px;line-height:1.4;color:var(--z-ink);background:#fff;font-family:inherit;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.v9zma-formsec__card select{
  appearance:none;padding-right:38px;background-repeat:no-repeat;background-position:right 12px center;background-size:16px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7480' stroke-width='2.5' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}
.v9zma-formsec__card input:focus,
.v9zma-formsec__card select:focus,
.v9zma-formsec__card textarea:focus{outline:none;border-color:var(--z-blue);box-shadow:0 0 0 3px rgba(8,113,182,.18);}
.v9zma-formsec__card textarea{resize:vertical;min-height:92px;}
.v9zma-consent{
  display:block;font-size:.9rem;color:var(--z-body);line-height:1.55;
  background:var(--z-soft);border:1px solid var(--z-line);border-radius:12px;padding:12px 14px;
}
.v9zma-consent .wpcf7-list-item{margin:0;display:block;}
.v9zma-consent label{font-weight:400;margin:0;display:flex;align-items:flex-start;gap:10px;cursor:pointer;}
.v9zma-consent input[type=checkbox]{flex:0 0 18px;width:18px;height:18px;margin:2px 0 0;accent-color:var(--z-blue);cursor:pointer;}
.v9zma-consent a{color:var(--z-blue);font-weight:600;text-decoration:underline;text-underline-offset:2px;}
.v9zma-formsec__card input.v9zma-submit[type="submit"],
.v9zma-submit{
  width:100%;min-height:52px;background:var(--z-blue);color:#fff;border:none;border-radius:999px;
  font-size:1.06rem;font-weight:800;cursor:pointer;font-family:inherit;
  box-shadow:0 8px 18px rgba(8,113,182,.3);transition:background-color .15s ease,transform .15s ease;
}
.v9zma-formsec__card input.v9zma-submit[type="submit"]:hover,
.v9zma-submit:hover{background:#075E96;transform:translateY(-2px);}
.v9zma-submit:disabled{opacity:.6;cursor:not-allowed;transform:none;}
.v9zma .wpcf7-not-valid-tip{color:#B01E1A;font-size:.84rem;margin-top:4px;font-weight:600;}
.v9zma .wpcf7-not-valid{border-color:#D62D3C !important;}
.v9zma .wpcf7 form .wpcf7-response-output{margin:14px 0 0;padding:12px 14px;border-radius:10px;font-size:.94rem;border-width:2px;}
.v9zma .wpcf7 form.sent .wpcf7-response-output{border-color:#1c8a3c;background:#e9f8ee;color:#14622b;}
.v9zma .wpcf7 form.invalid .wpcf7-response-output,
.v9zma .wpcf7 form.failed .wpcf7-response-output{border-color:#D62D3C;background:#fdecef;color:#B01E1A;}
.v9zma .wpcf7-spinner{margin:0 auto;display:block;}

/* ---------- responsive ---------- */
@media(min-width:600px){
  .v9zma-fgrid{grid-template-columns:1fr 1fr;}
}
@media(min-width:768px){
  .v9zma-grid{grid-template-columns:repeat(3,1fr);}
  .v9zma-sec{margin-bottom:44px;}
  .v9zma-formsec{padding:34px 30px;}
  .v9zma-formsec__inner{grid-template-columns:1fr 1.1fr;gap:32px;align-items:center;}
}

@media(prefers-reduced-motion:reduce){
  .v9zma *{transition:none !important;}
  .v9zma-card:hover{transform:none !important;}
  .v9zma-card:hover .v9zma-card__img{transform:none !important;}
  .v9zma-submit:hover{transform:none !important;}
}