/* ==========================================================================
   V9 — FAQ accordion cho bài viết (shortcode [v9faq])
   Mọi selector nằm trong .v9faq nên không rò ra phần còn lại của theme.
   Ngôn ngữ thiết kế đồng bộ với FAQ của landing page V9 PBX.
   ========================================================================== */
.v9faq{
  --v9-blue:#0871B6; --v9-blue-dark:#075E96; --v9-sky:#2CABE1;
  --v9-ink:#0f1c28; --v9-body:#41505c;
  --v9-line:#dfeaf3; --v9-bg-soft:#eff7fc;
  --v9-grad:linear-gradient(135deg,#0871B6 0%,#2CABE1 100%);
  margin:22px 0 28px;
  text-align:left;
}
.v9faq *,.v9faq *::before,.v9faq *::after{box-sizing:border-box;}

/* ---- một mục hỏi đáp ---- */
.v9faq .v9faq__item{
  background:#fff;
  border:1px solid var(--v9-line);
  border-radius:10px;
  margin:0 0 10px;
  overflow:hidden;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.v9faq .v9faq__item[open]{
  border-color:#c9e6f8;
  box-shadow:0 6px 20px rgba(8,67,111,.08);
}
@media(hover:hover){
  .v9faq .v9faq__item:hover{border-color:var(--v9-sky);}
}

/* ---- câu hỏi ---- */
.v9faq .v9faq__q{
  cursor:pointer;
  list-style:none;
  display:flex;
  align-items:center;
  gap:12px;
  padding:13px 46px 13px 14px;
  position:relative;
  margin:0;
}
.v9faq .v9faq__q::-webkit-details-marker{display:none;}
.v9faq .v9faq__q::marker{content:"";}

/* số thứ tự thay cho icon: dùng được cho mọi bài, không cần dữ liệu riêng */
.v9faq .v9faq__num{
  flex:0 0 auto;
  width:32px;height:32px;
  border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#e9f6fd 0%,#d3ecfa 100%);
  color:var(--v9-blue);
  font-weight:800;font-size:.92rem;line-height:1;
  box-shadow:inset 0 0 0 1px rgba(44,171,225,.20);
  transition:background .2s ease, color .2s ease, box-shadow .2s ease;
}
.v9faq .v9faq__item[open] .v9faq__num{
  background:var(--v9-grad);
  color:#fff;
  box-shadow:0 4px 12px rgba(8,113,182,.30);
}
@media(hover:hover){
  .v9faq .v9faq__q:hover .v9faq__num{background:var(--v9-grad);color:#fff;}
}

/* câu hỏi vẫn là <h3> để Easy TOC và SEO đọc được, nhưng bỏ cỡ chữ heading */
.v9faq .v9faq__qtext{
  flex:1;
  margin:0;
  padding:0;
  font-size:1rem;
  line-height:1.45;
  font-weight:700;
  color:var(--v9-ink);
  text-align:left;
  letter-spacing:0;
  text-transform:none;
}
.v9faq .v9faq__item[open] .v9faq__qtext{color:var(--v9-blue-dark);}

/* mũi tên chevron */
.v9faq .v9faq__q::after{
  content:"";
  position:absolute;right:18px;top:50%;
  width:9px;height:9px;
  transform:translateY(-50%) rotate(45deg);
  margin-top:-3px;
  border-right:2.5px solid var(--v9-blue);
  border-bottom:2.5px solid var(--v9-blue);
  transition:transform .2s ease, margin-top .2s ease;
}
.v9faq .v9faq__item[open] .v9faq__q::after{
  transform:translateY(-50%) rotate(225deg);
  margin-top:2px;
}
.v9faq summary:focus-visible{outline:3px solid var(--v9-sky);outline-offset:-3px;}

/* ---- phần trả lời ---- */
.v9faq .v9faq__a{
  padding:0 18px 15px 58px;
  color:var(--v9-body);
}
.v9faq .v9faq__a > *:first-child{margin-top:0;}
.v9faq .v9faq__a > *:last-child{margin-bottom:0;}
.v9faq .v9faq__a p{margin:0 0 10px;text-align:justify;}
.v9faq .v9faq__a ul,.v9faq .v9faq__a ol{margin:0 0 10px;padding-left:20px;}
.v9faq .v9faq__a li{margin-bottom:6px;}
.v9faq .v9faq__a a{color:var(--v9-blue);text-decoration:underline;}

@media(max-width:600px){
  .v9faq .v9faq__q{padding:12px 40px 12px 12px;gap:10px;}
  .v9faq .v9faq__num{width:28px;height:28px;border-radius:8px;font-size:.86rem;}
  .v9faq .v9faq__qtext{font-size:.97rem;}
  .v9faq .v9faq__a{padding:0 14px 14px 14px;}
}
@media(prefers-reduced-motion:reduce){
  .v9faq .v9faq__item,.v9faq .v9faq__num,.v9faq .v9faq__q::after{transition:none;}
}