.mani_independent_video .content{border:none!important}.mani_services .image_box img{border-radius:100px!important;width:40%!important;margin-top:10px!important}.mani_services .service_info h4{font-weight:700}.mani_services .bg_div .services_details{padding:12px 0 15px 0!important}.mani_services .services_details .service_info{padding:0 15px!important}.services_details .read_more a{position:relative;display:inline-block;background:linear-gradient(135deg,#2d8cff,#4da3ff);color:#fff!important;padding:10px 18px;border-radius:10px;font-size:14px;font-weight:500;text-decoration:none;transition:all .3s ease;border:none;overflow:hidden;box-shadow:0 6px 18px rgba(45,140,255,.3)}.services_details .read_more a:hover{transform:translateY(-2px);box-shadow:0 10px 25px rgba(45,140,255,.45)}.services_details .read_more a::after{content:"";position:absolute;top:0;left:-75%;width:50%;height:100%;background:linear-gradient(120deg,transparent,rgba(255,255,255,.4),transparent);transform:skewX(-20deg)}.services_details .read_more a:hover::after{left:120%;transition:.6s}
/* ===== افزوده‌شده: تبلیغات/CTA هوشمند (درون‌متنی + اسلاید-این) و رفع ترتیب سایدبار موبایل ===== */
.manisoft-inline-cta{clear:both}
@media (max-width:991.98px){
  .manisoft-sidebar-order-fix .sidebar_col{order:2}
  .manisoft-sidebar-order-fix .blog_main_content4_col{order:1}
}
.manisoft-slidein-card{
  position:fixed;
  z-index:1050;
  max-width:300px;
  background:var(--bs-white,#fff);
  border-radius:10px;
  box-shadow:0 8px 24px rgba(0,0,0,.18);
  /* نکته: قبلاً اینجا padding:10px بود که یک حاشیه‌ی سفید ثابت دور طرح خود
     کاربر می‌گذاشت و اجازه نمی‌داد طرح‌های خودش تا لبه‌ی کارت برسند. حالا
     خودِ کارت بدون پدینگ است و گردی گوشه‌ها را «manisoft-slidein-body»
     (پایین‌تر) با overflow:hidden ایجاد می‌کند، نه با فاصله‌ی داخلی. دکمه‌ی
     بستن چون بیرون از باکس (با آفست منفی) قرار دارد، اگر overflow:hidden
     روی خودِ کارت می‌بود، نصفه می‌شد؛ به همین دلیل overflow:hidden فقط روی
     body است، نه روی کارت. */
  inset-inline-start:16px;
  bottom:16px;
  opacity:0;
  transform:translateY(16px);
  pointer-events:none;
  transition:opacity .35s ease, transform .35s ease;
}
.manisoft-slidein-card.manisoft-slidein-visible{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}
.manisoft-slidein-body{
  overflow:hidden;
  border-radius:10px;
  display:block;
  line-height:0; /* از فاصله‌ی ریز زیر تصویر (inline img) جلوگیری می‌کند */
}
.manisoft-slidein-card img{width:100%;display:block}
.manisoft-slidein-close{
  position:absolute;
  top:-8px;
  inset-inline-end:-8px;
  width:26px;
  height:26px;
  border-radius:50%;
  border:none;
  background:#222;
  color:#fff;
  font-size:16px;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:1;
}
.manisoft-slidein-close:focus-visible{outline:2px solid #4da3ff;outline-offset:2px}
/* موبایل: نوار فشرده‌ی پایین صفحه به‌جای کارت گوشه — طبق تحقیق، عناصر چسبان
   موبایل باید کم‌ارتفاع و غیرمزاحم باشند، نه یک پاپ‌آپ که محتوا را بپوشاند.
   عرض کارت: عرض موبایل به ۶ قسمت مساوی تقسیم و ۵ قسمت آن به کارت داده می‌شود
   (یعنی ۱ قسمت باقی‌مانده، مساوی بین چپ و راست تقسیم می‌شود) تا کمی از محتوای
   پشت آن هم از دو طرف دیده شود و کارت کاملاً به لبه‌های صفحه نچسبد. این
   وسط‌چین بودن عمداً مستقل از جهت RTL/LTR است (چپ/راستِ آن یکسان می‌ماند)،
   چون سؤال جهت مخالف سایدبار فقط برای حالت دسکتاپ (کنار سایدبار) معنا داشت؛
   در موبایل ستون‌ها زیر هم می‌افتند و سایدباری کنار آن نیست. */
@media (max-width:780px){
  .manisoft-slidein-card{
    max-width:none;
    width:calc(100% * 5 / 6);
    inset-inline-start:auto;
    inset-inline-end:auto;
    left:50%;
    right:auto;
    transform:translate(-50%, 16px);
    bottom:8px;
    display:flex;
    align-items:center;
  }
  .manisoft-slidein-card.manisoft-slidein-visible{
    transform:translate(-50%, 0);
  }
  .manisoft-slidein-body{
    flex:1 1 auto;
    min-width:0;
    display:flex;
    align-items:center;
  }
  .manisoft-slidein-card img{width:100%;height:64px;object-fit:cover}
}

/* ===== رفع باگ: فهرست مطالب (TOC) — مرورگر روی <summary> یک فلش پیش‌فرض خودش
   می‌گذارد (list-style) که تا امروز هیچ CSS ای آن را خاموش نکرده بود؛ همین باعث
   می‌شد کنار فلش سفارشی ما، آن نشانه‌ی پیش‌فرض هم بماند و در عرض کم (موبایل)
   چیدمان flex به‌هم بریزد و فلش/متن به خط بعد بیفتد. ===== */
.manisoft-toc > summary{list-style:none;cursor:pointer}
.manisoft-toc > summary::-webkit-details-marker{display:none}
.manisoft-toc > summary::marker{content:''}
.manisoft-toc-chevron{transition:transform .2s ease;flex-shrink:0}
.manisoft-toc[open] > summary .manisoft-toc-chevron{transform:rotate(180deg)}
@media (max-width:600px){
  .manisoft-toc > summary{flex-wrap:nowrap}
}

/* ===== جمع‌کردن ویجت دسته‌بندی‌های سایدبار (فقط دسکتاپ) — افزوده‌شده ===== */
/* تعداد دقیق آیتم‌های نمایش‌داده‌شده (nth-child) نمی‌تواند از یک متغیر CSS
   خوانده شود (nth-child فقط عدد ثابت/An+B می‌پذیرد، نه var()/calc())؛ به همین
   دلیل خودِ عدد به‌صورت یک <style> کوچک و اختصاصی از PHP کنار همین ویجت درج
   می‌شود (پایین همین فایل، در image12paragraph12.php). این‌جا فقط ظاهر پایه
   و رفتار پیش‌فرض (قبل از دریافت آن عدد) تعریف می‌شود: تا وقتی JS/آن استایل
   بارگذاری نشده، به‌صورت امن هیچ‌چیز مخفی نمی‌شود (fallback = نمایش کامل). */
.manisoft-sidebar-cats-toggle{
  display:block;
  width:100%;
  margin-top:.5rem;
  padding:.35rem 0;
  background:none;
  border:none;
  border-top:1px solid rgba(0,0,0,.08);
  color:var(--bs-primary,#0d6efd);
  font-size:.85rem;
  cursor:pointer;
  text-align:center;
}
.manisoft-sidebar-cats-toggle:hover{ text-decoration:underline; }

/* ===== فاصله‌ی مناسب بین آگهی‌های پشت‌سرهم (سایدبار/انتهای محتوا/برچسب) — افزوده‌شده =====
   قبلاً وقتی چند آگهی زیر هم (یا در لیست دسته، کنار هم) بودند کاملاً به هم
   چسبیده بودند. اینجا فقط بین آیتم‌ها فاصله اضافه می‌شود؛ روی آخرین آیتم هیچ
   فاصله‌ی اضافه‌ای گذاشته نمی‌شود تا فضای خالی بی‌مورد زیر بلوک ایجاد نشود. */
.manisoft-cta-group .each{ margin-bottom: 16px; }
.manisoft-cta-group .each:last-child{ margin-bottom: 0; }
.maniads_category_listing > *{ margin-bottom: 0; } /* اینجا از قبل gap:12px روی خودِ کانتینر flex هست، نیازی به margin اضافه نیست */

/* ===== ردیف برچسب‌ها/اشتراک‌گذاری زیر مطلب، در موبایل — افزوده‌شده =====
   قبلاً هر ستون (برچسب‌ها/لینک‌کوتاه/اشتراک‌گذاری) با کلاس ثابت col-4 (بدون
   پیشوند سایز، یعنی همیشه فعال، حتی موبایل) دقیقاً ۳۳٪ عرض می‌گرفت — چه محتوایش
   یک دکمه‌ی کوچک «برچسب‌ها» باشد چه ۵ آیکون اشتراک‌گذاری. این باعث می‌شد در
   موبایل هم فاصله‌ی بین‌شان زیاد/نامتقارن باشد و هم اگر محتوا بیشتر از ۳۳٪ جا
   نمی‌شد، بد بشکند. اینجا: فاصله‌ی بین ستون‌ها را ۸px می‌کنیم (با متغیر گاتر
   خودِ بوت‌استرپ، نه fight با flex) و هر ستون را به‌اندازه‌ی محتوایش (shrink-to-fit)
   می‌کنیم تا اگر یک/دو/چند برچسب یا آیکون‌های اشتراک‌گذاری جا نشدند، خودشان به‌طور
   طبیعی (چون row پیش‌فرض flex-wrap دارد) به سطر بعد بروند، نه اینکه فشرده/بد بشکنند.
   رنگ دکمه‌ی برچسب‌ها در موبایل هم خنثی/عمومی می‌شود (نیازی به هم‌رنگی با قالب نیست؛
   چون custom.css قبل از template.css بارگذاری می‌شود، override با !important است). */
@media (max-width:780px){
  .articleSection .row{
    --bs-gutter-x: 8px;
    row-gap: 8px;
  }
  .articleSection .row > .each{
    flex: 0 1 auto !important;
    width: auto !important;
    max-width: 100% !important;
  }
  .articleSection .tags_dropdown .btn{
    color: var(--bs-secondary-color, #6c757d) !important;
    border-color: var(--bs-border-color, #dee2e6) !important;
    background: var(--bs-tertiary-bg, #f8f9fa) !important;
  }
  .articleSection .tags_dropdown .btn .bi{
    background: var(--bs-secondary-color, #6c757d) !important;
    color: #fff !important;
  }
}