.hero-title {
    font-size: 2.5rem;        /* کمی بزرگتر از قبل */
    line-height: 1.6;
    text-align: right;
    white-space: normal;
    word-break: break-word;
  }
  @media (max-width: 575.98px) {
    .hero-title {
      font-size: 1.9rem;      /* در موبایل هم کمی بزرگتر از حالت قبلی */
    }
  }
  
  
  @media (max-width: 575.98px) {
    .hero-chip {
      margin-left: .5rem !important; /* فاصله خارجی از لبه چپ صفحه */
    }
  }
  
  /* موبایل: قطعِ قطعی اسکرول افقی + مهار چیپ‌ها */
  @media (max-width: 575.98px) {
    html, body {
      max-width: 100vw;
      overflow-x: hidden !important; /* سوییچ کُشتار اسکرول افقی */
    }
  }
  
  
  /* هم‌قد کردن کارت‌ها و مرکز کردن محتوا */
  .stat-card {
    min-height: 112px; /* می‌تونی بسته به فونت/اندازه تغییر بدی */
  }
  
  /* تضمین راست‌چینی figcaption و ترتیب آواتار در RTL */
  [dir="rtl"] .blockquote-footer {
    text-align: end;
  }
  [dir="rtl"] .blockquote-footer .d-flex {
    justify-content: flex-end;
  }
  
  /* اطمینان از شکستن اعداد/متن در موبایل‌های باریک */
  @media (max-width: 575.98px) {
    .stat-card h4,
    .stat-card p {
      white-space: normal;
      word-break: break-word;
      overflow-wrap: anywhere;
      text-align: center;
    }
  }
  
  /* ===== Footer (RTL) overrides ===== */
  .footer-psy {
    direction: rtl;
    text-align: right;
  
    /* پیروی از پالت Unify، اما لینک‌ها خواناتر */
    .footer-link {
      color: rgba(255, 255, 255, 0.75);
      text-decoration: none;
      transition: color .15s ease, text-decoration-color .15s ease;
      i {
        margin-left: .5rem;  /* آیکون سمت راست، فاصله از متن */
        margin-right: 0;
        font-size: 1rem;
        line-height: 1;
      }
      span { line-height: 1.7; }
  
      &:hover,
      &:focus {
        color: #fff;
        text-decoration: underline;
        text-decoration-thickness: 1px;
        text-underline-offset: 3px;
      }
    }
  
    .text-cap {
      font-weight: 600;
      font-size: .95rem;
      letter-spacing: .2px;
    }
  
    /* شکست خطوط طولانی فقط در فوتر */
    .footer-text,
    .footer-psy ul,
    .footer-psy li,
    .footer-psy a {
      white-space: normal;
      overflow-wrap: anywhere;
      word-break: break-word; /* سپر در برابر کلمات بسیار بلند */
    }
  
    /* برچسب «— در حال جذب نیرو» */
    .footer-hiring-badge {
      display: inline-block;
      font-size: .85rem;
      font-weight: 700;
      color: #0d6efd; /* همان رنگ primary بوت‌استرپ */
      white-space: nowrap;
    }
  }
  
  /* ریسپانسیو: حاشیه‌ها و چینش در موبایل */
  @media (max-width: 575.98px) {
    .footer-psy .list-inline {
      display: block;
    }
    .footer-psy .list-inline-item + .list-inline-item {
      margin-right: 0;
      margin-top: .5rem;
    }
  }
  .text-justify {
    text-align: justify !important;
    text-align-last: right; /* برای هماهنگی خطوط آخر با راست‌چین */
  }
  
  .img-cover-430 {
    height: 430px;
    object-fit: cover;
    width: 100%;
  }

  .img-w-10rem { width: 10rem; }
  .hero-bg {
    background-image: url("../img/1920x1080/img11.jpg");
    background-size: cover;
    background-position: center;
  }
  footer[dir="rtl"] .list-unstyled {
    padding-right: .3rem !important;   /* تورفتگی راست را حذف می‌کند */
    /* اگر کمی فاصله می‌خواهی: مثلا  .5rem بگذار */
    /* padding-right: .5rem !important; */
  }

  .wave-bg {
    background-image: url("/static/assets/svg/components/wave-pattern.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }
/* اصلاح استایل لیست‌های دارای تیک برای RTL */
.list-checked {
  padding-right: 0 !important;   /* حذف فضای پیش‌فرض سمت راست */
  margin-right: 0 !important;
  text-align: right;             /* کل لیست راست‌چین شود */
}

.list-checked .list-checked-item {
  text-align: right;             /* متن آیتم‌ها راست‌چین */
  padding-right: 1.5rem;         /* فاصله برای آیکون تیک در سمت راست */
  padding-left: 0 !important;    /* حذف فاصله اضافی سمت چپ */
}

  #header.navbar {
    padding-top: 0.5rem !important; /* کاهش فاصله بالا */
    padding-bottom: 0.8rem !important; /* کاهش فاصله پایین */
  }

  #header {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  .d-flex.min-vh-lg-100 {
    min-height: auto !important; /* لغو ارتفاع 100% */
  }
  .navbar-brand-logo {
    transform: scale(1.2);   /* 20٪ بزرگتر نمایش داده میشه */
    transform-origin: center; /* از مرکز بزرگ بشه */
  }
    
  .shape-unclip {
    margin: 0 !important;
    transform: translate(-1rem, 1rem);
  }
 /* 1) تمام صفحه: جلوی اسکرول افقی را بگیر */
html, body {
  overflow-x: hidden !important;
  max-width: 100%;
}

/* 2) محتوای اصلی: اجازه بیرون‌زدگی نده */
#content {
  overflow-x: hidden !important;   /* قبلی را خنثی کن */
  /* overflow-y: visible;  اگر لازم داری عناصر شناور عمودی دیده شوند */
}
  
  /* شکلِ پایینِ قوس‌دار را در RTL واقعاً به «چپ» سنجاق کن و اورراید منطقی‌ها */
.rtl-left-shape-fix{
  inset-inline-start: 0 !important;   /* = left در هر زبان */
  inset-inline-end: auto !important;   /* جلوِ end-0 پنهانی را می‌گیرد */
  margin-inline-start: -6rem !important; /* کمتر منفی بده تا نصفه نشود */
  margin-inline-end: 0 !important;
}

/* اگر والد overflow-hidden دارد، کمی شکل را کوچک‌تر کن تا برش نخورد */
.rtl-left-shape-fix img{
  max-width: 90%;
}


/* خلاصه */
.hero-excerpt{
  text-align: justify;
  text-justify: inter-word;
}

/* خط هیرو بسیار کمرنگ */
.hero-divider{
  display:block;
  width:100%;
  height:1px;
  background: linear-gradient(to left,
              rgba(0,0,0,0.04),
              rgba(0,0,0,0.07),
              rgba(0,0,0,0.04));
  margin: 1rem 0;
  border-radius: 1px;
}

/* متادیتا راست‌چین بدون flex جهانی */
.post-meta{
  direction: rtl;
  text-align: right;
  line-height: 1.9;
}

/* هر چیپ متادیتا در یک خطِ inline */
.post-meta .meta-chip{
  display: inline-flex;
  align-items: center;
  gap: .35rem;                 /* فاصله آیکون و متن */
  margin-inline-start: .9rem;  /* فاصله بین چیپ‌ها (در RTL سمت راست) */
}

/* آیکون‌ها */
.post-meta .bi{
  font-size: .9em;
  line-height: 1;
}

/* لینک داخل متادیتا */
.post-meta a{
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.post-meta a:hover{
  border-bottom-color: currentColor;
}

/* موبایل: فاصله‌ها جمع‌وجورتر */
@media (max-width: 576px){
  .post-meta .meta-chip{ margin-inline-start: .6rem; }
  .hero-divider{ margin: .75rem 0; }
}

/* ===== Article text readability ===== */
.article-body p{ text-align: justify; text-justify: inter-word; }

/* ===== Share buttons (square, colored, equal gaps) ===== */
.share-list{
  list-style:none; padding:0; margin:0;
  display:flex; align-items:center; flex-wrap:wrap;
  gap: .5rem; /* فاصله کاملاً یکسان بین همه‌ی ۴ دکمه */
}
.share-btn{
  width:36px; height:36px;
  display:inline-flex; align-items:center; justify-content:center;
  border:none; border-radius:8px; /* مربعی با گوشه‌ی کم‌گرد */
  color:#fff; font-size:16px; line-height:1;
  cursor:pointer; text-decoration:none;
  transition:transform .08s ease, box-shadow .12s ease;
}
.share-btn:active{ transform:scale(.95); }
.share-twitter{  background:#1DA1F2; }
.share-telegram{ background:#0088cc; }
.share-whatsapp{ background:#25D366; }
.share-link{     background:#6c757d; }
.share-btn.copied{ box-shadow:0 0 0 3px rgba(108,117,125,.25) inset; }

/* ===== Tag card (no gap above, aligned with hero) ===== */
.tag-card{
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
  padding:.6rem .9rem;
  margin-top:1.84rem !important; /* فاصله از Share = صفر */
  direction:rtl;
}
.tag-row{ display:flex; align-items:center; gap:.5rem .75rem; }
.tag-title{ color:#495057; white-space:nowrap; }

/* Tag items row: equal gaps; wraps nicely */
.tag-items{
  display:flex; align-items:center; flex-wrap:wrap;
  gap:.5rem; /* فاصله‌ی یکسان بین همه‌ی تگ‌ها */
}

/* Tag pill: truly centered text + less rounded */
.tag-pill{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:32px; padding:.34rem .7rem;
  font-size:.9rem; line-height:1.1; text-align:center; vertical-align:middle;
  background:#f6f8f9; color:#0b5c5c;
  border:1px solid rgba(0,0,0,.10);
  border-radius:6px; /* کم‌گرد */
  text-decoration:none;
}
.tag-pill:hover{
  background:#eef2f4; border-color:rgba(0,0,0,.14); color:#084c4c;
}

/* Ensure no bottom margin under share row */
.share-row{ margin-bottom:0 !important; }

/* Mobile tweaks */
@media (max-width:576px){
  .tag-card{ padding:.55rem .8rem; }
}

/* ================================
   Related carousel — paged slider
   (1 on mobile, 3 on desktop)
   ================================ */

/* مرجع موقعیت دکمه‌ها */
section[data-rel-slider] .rel-wrap,
#related-posts .rel-wrap{
  position: relative;
}

/* ویوپورت: بدون اسکرول و بدون انتخاب متن */
section[data-rel-slider] .rel-viewport,
#related-posts .rel-viewport{
  direction: ltr;
  overflow: hidden;
  -ms-overflow-style: none;
  scrollbar-width: none;
  user-select: none;
}
section[data-rel-slider] .rel-viewport::-webkit-scrollbar,
#related-posts .rel-viewport::-webkit-scrollbar{ display:none; }

/* ترک اسلایدها */
section[data-rel-slider] .rel-track,
#related-posts .rel-track{
  display: flex;
  gap: 1rem;
  padding: .25rem 0;
  will-change: transform;
  transition: transform .45s cubic-bezier(.22,.61,.36,1);
}
section[data-rel-slider] .rel-track.is-animating,
#related-posts .rel-track.is-animating{ pointer-events: none; }

/* کارت‌ها */
section[data-rel-slider] .rel-card,
#related-posts .rel-card{
  flex: 0 0 100%;   /* موبایل: هر صفحه ۱ کارت */
  max-width: 100%;
  min-width: 0;
}

/* ---- متن کارت: راست‌چین و شروع هم‌راستا (عنوان/خلاصه/ادامه‌مطلب) ---- */
section[data-rel-slider] .rel-card .card-body,
#related-posts .rel-card .card-body{
  direction: rtl;                   /* راست‌چین منطقی */
  text-align: right;                /* ترازبندی متن */
  padding: 0 .875rem .25rem .5rem;  /* فاصله‌ی یکنواخت از راست */
}

/* عنوان */
section[data-rel-slider] .rel-card .card-body .mb-2,
section[data-rel-slider] .rel-card .card-body .card-title,
section[data-rel-slider] .rel-card .card-body .rel-title,
#related-posts .rel-card .card-body .mb-2,
#related-posts .rel-card .card-body .card-title,
#related-posts .rel-card .card-body .rel-title{
  margin: 0;                        /* حذف مارجین ناهمسان */
  line-height: 1.35;
}

/* خلاصه */
section[data-rel-slider] .rel-card .card-body .card-text,
section[data-rel-slider] .rel-card .card-body .rel-excerpt,
#related-posts .rel-card .card-body .card-text,
#related-posts .rel-card .card-body .rel-excerpt{
  margin: 0;
}

/* فوتر کارت: «ادامه مطلب/مشاهده» راست‌چین و منسجم با آیکن */
section[data-rel-slider] .rel-card .card-footer,
#related-posts .rel-card .card-footer{
  direction: rtl;
  text-align: right;
  padding-right: .875rem;           /* همان فاصله‌ی راستِ card-body */
}
section[data-rel-slider] .rel-card .card-footer .card-link,
section[data-rel-slider] .rel-card .read-more,
#related-posts .rel-card .card-footer .card-link,
#related-posts .rel-card .read-more{
  display: inline-block; 
  position: relative;
  align-items: center;
  white-space: nowrap;
  padding-left: calc(0.75rem + 1.25rem + 0.6rem);
  padding-right: 0;
  line-height: 1.35;
  text-decoration: none;
  flex-direction: row-reverse;      /* متن راست، آیکن چپ */
}
section[data-rel-slider] .rel-card .card-footer .card-link i,
section[data-rel-slider] .rel-card .read-more i,
section[data-rel-slider] .rel-card .card-footer .card-link .bi,
section[data-rel-slider] .rel-card .read-more .bi,
#related-posts .rel-card .card-footer .card-link i,
#related-posts .rel-card .read-more i,
#related-posts .rel-card .card-footer .card-link .bi,
#related-posts .rel-card .read-more .bi{
  display: inline-block;
  line-height: 1;
  font-size: .95rem;
}

/* دسکتاپ: ۳ کارت دقیق */
@media (min-width: 992px){
  section[data-rel-slider] .rel-card,
  #related-posts .rel-card{ 
    flex: 0 0 calc((100% - 2rem)/3);
    max-width: calc((100% - 2rem)/3);
  }
}

/* ================================
   دکمه‌های ناوبری
   ================================ */

/* دکمه‌ها روی محتوا و «جامد» (کلیک‌گیر) */
section[data-rel-slider] .rel-prev,
section[data-rel-slider] .rel-next,
#related-posts .rel-prev,
#related-posts .rel-next{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 40px;
  height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 9999px;
  background: rgba(0,0,0,.55);     /* جامد: کلیک به زیر عبور نکند */
  color: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
  -webkit-user-select: none; user-select: none;
  pointer-events: auto;             /* همیشه کلیک‌گیر بماند */
}
section[data-rel-slider] .rel-prev,
#related-posts .rel-prev{ right: .25rem; }
section[data-rel-slider] .rel-next,
#related-posts .rel-next{ left:  .25rem; }

/* هاور/فوکِس برای دسترسی‌پذیری */
section[data-rel-slider] .rel-prev:hover,
section[data-rel-slider] .rel-next:hover,
#related-posts .rel-prev:hover,
#related-posts .rel-next:hover{
  filter: brightness(1.1);
}
section[data-rel-slider] .rel-prev:focus-visible,
section[data-rel-slider] .rel-next:focus-visible,
#related-posts .rel-prev:focus-visible,
#related-posts .rel-next:focus-visible{
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* حالت غیرفعال: فقط ظاهری، اما کلیک را عبور بده (glass مشکل‌ساز نشود) */
section[data-rel-slider] .rel-prev.disabled,
section[data-rel-slider] .rel-next.disabled,
#related-posts .rel-prev.disabled,
#related-posts .rel-next.disabled{
  opacity: .5;
  cursor: not-allowed;
  pointer-events: none;             /* ← اصلاح کلیدی: قبلاً auto بود */
}
section[data-rel-slider] .rel-prev[aria-disabled="true"],
section[data-rel-slider] .rel-next[aria-disabled="true"],
#related-posts .rel-prev[aria-disabled="true"],
#related-posts .rel-next[aria-disabled="true"]{
  opacity: .5;
  cursor: not-allowed;
  pointer-events: none;             /* ← این هم باید none باشد */
}

/* آیکن داخلی (اختیاری) */
section[data-rel-slider] .rel-prev > i,
section[data-rel-slider] .rel-next > i,
#related-posts .rel-prev > i,
#related-posts .rel-next > i{
  line-height: 1;
  font-size: 1rem;
}

/* پرشدن از راست (برای نظم بصری RTL) */
section[data-rel-slider] .rel-track,
#related-posts .rel-track{ direction: rtl; }

/* مطمئن شو لایه‌ی افکت تصویر هیچ‌وقت کلیک را نگیرد (دسکتاپ + موبایل) */
section[data-rel-slider] .rel-card .card-transition-zoom-item,
section[data-rel-slider] .rel-card .card-transition-zoom-item *,
#related-posts .rel-card .card-transition-zoom-item,
#related-posts .rel-card .card-transition-zoom-item * {
  pointer-events: none !important;  /* ← جلوگیری از بلوکه‌شدن کلیک لینک */
}

/* برای نظم لایه‌ها در دسکتاپ: لینک کارت بالاتر از خود کارت باشد */
section[data-rel-slider] .rel-card > a,
#related-posts .rel-card > a {
  position: relative;
  z-index: 4;
}

/* موبایل: مطمئن شو لینک کارت بالاتر از دکمه‌هاست */
@media (max-width: 991.98px) {
  section[data-rel-slider] .rel-viewport,
  #related-posts .rel-viewport { position: relative; overflow: hidden; }

  section[data-rel-slider] .rel-prev, 
  section[data-rel-slider] .rel-next,
  #related-posts .rel-prev, 
  #related-posts .rel-next { z-index: 1; }      /* دکمه‌ها پایین‌تر */

  section[data-rel-slider] .rel-card, 
  #related-posts .rel-card { position: relative; z-index: 2; }

  section[data-rel-slider] .rel-card > a,
  #related-posts .rel-card > a { position: relative; z-index: 3; touch-action: manipulation; }

  /* لایه‌ی افکت تصویر کلیک را نگیرد (تکرار برای موبایل مشکلی ندارد) */
  section[data-rel-slider] .rel-card .card-transition-zoom-item,
  section[data-rel-slider] .rel-card .card-transition-zoom-item *,
  #related-posts .rel-card .card-transition-zoom-item,
  #related-posts .rel-card .card-transition-zoom-item * { pointer-events: none; }
}

/* ===== جمع کردن فاصلهٔ عمودی نوارهای اسلایدر در داشبورد ===== */

/* 1) خود سکشن‌ها: padding عمودی معقول‌تر (موبایل و دسکتاپ) */
section[data-rel-slider]{
  padding-top: 1rem !important;
  padding-bottom: 1.25rem !important;       /* قبلاً content-space-b-lg-3 خیلی زیاد بود */
}
@media (min-width: 992px){
  section[data-rel-slider]{
    padding-top: 1.25rem !important;
    padding-bottom: 1.5rem !important;
  }
}

/* 2) تیتر هر نوار: حذف margin-top اینلاین و کم‌کردن فاصلهٔ زیر تیتر */
section[data-rel-slider] h3{
  margin-top: 0 !important;                 /* override روی style="margin-top:30px" */
}
section[data-rel-slider] .w-lg-65.text-center.mx-lg-auto.mb-7{
  margin-bottom: 1.25rem !important;        /* جایگزین جمع‌وجور به‌جای mb-7 */
}

/* 3) ردیف داخلی کانتینر: حذف فاصلهٔ اضافه بین viewport و تیتر/زیرنویس */
section[data-rel-slider] .row.justify-content-center{
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* 4) فاصلهٔ اضافهٔ پایین کارت‌ها/فوتر کارت را هم کمی جمع‌تر کن (اختیاری) */
section[data-rel-slider] .card-body{ padding-bottom: .25rem !important; }
section[data-rel-slider] .card-footer{ padding-top: .25rem !important; }

/* 5) فاصلهٔ انتهای نوار خوشامدگویی (بالای اولین اسلایدر) را هم کم کن (اختیاری) */
#dash-userbar .content-space-b-lg-3{
  padding-bottom: 1.25rem !important;
}





/* آواتار سفارشی نویسنده (سایز دقیق 56px) */
.avatar-custom-56 {
  width: 50px;
  height: 50px;
  border-radius: 50%;  /* دایره‌ای شدن */
  object-fit: cover;   /* تا تصویر درست فیت شود */
}


/* ================== Vars ================== */
:root{
  /* فاصله‌ی داخلیِ منو پس از صفر کردن margin-top (برای حذف گپ بیرونی) */
  --gap-bridge: 8px;

  /* فاین‌تیونِ مگامنو آموزشی در دسکتاپ */
  --edu-nudge: 0px;      /* + راست‌تر (در RTL)، - چپ‌تر */
  --mega-lift: 0px;      /* اگر باید کمی بالاتر بیاد: 6px یا 8px */
  --edu-minw: 20rem;     /* حداقل عرض منطقی در دسکتاپ */
  --edu-maxw: 56rem;     /* سقف عرض */
}

/* ============ پل‌های hover عمومی (فقط دسکتاپ) ============ */
/* زیر لینک والد – پل برای عبور امن موس */
.navbar .nav-item.hs-has-mega-menu > .nav-link { position: relative; }
.navbar .nav-item.hs-has-mega-menu > .nav-link::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 18px;         /* اگر لازم شد 16–20px فاین‌تیون کن */
  bottom: -18px;
  /* مهم: رویداد به خود منو برسد تا تایمر JS لغو شود */
  pointer-events: none; /* قبلاً auto بود */
  display: block;
  background: transparent;
  z-index: 2;
}

/* بالای خود dropdown – پل مکمل */
#header .hs-mega-menu.dropdown-menu::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: -18px;
  height: 18px;
  /* مهم: رویداد به خود dropdown برسد تا بسته نشود */
  pointer-events: none; /* قبلاً auto بود */
  display: block;
  background: transparent;
}

/* صفر کردن گپ بیرونی و حفظِ ظاهر با padding داخلی */
#header .hs-mega-menu.dropdown-menu {
  margin-top: 0 !important;
  padding-top: var(--gap-bridge) !important;
  z-index: 1001;
}

/* ============ مگامنو «آموزشی» فقط در دسکتاپ ============ */
@media (min-width: 992px) {
  /* بدون Popper */
  #header #docsMegaMenu + .hs-mega-menu.edu-mega {
    position: absolute;
    left: auto !important;
    right: 50% !important;  /* راستِ منو = مرکز دکمه در RTL */
    transform: translateX(calc(50% + var(--edu-nudge)))
               translateY(calc(-1 * var(--mega-lift))) !important;
    width: auto !important;
    min-width: var(--edu-minw);
    max-width: min(90vw, var(--edu-maxw));
    margin: 0 !important;
  }
  /* با Popper (Bootstrap 5) */
  #header #docsMegaMenu + .hs-mega-menu.edu-mega[data-bs-popper] {
    left: auto !important;
    right: 50% !important;
    transform: translateX(calc(50% + var(--edu-nudge)))
               translateY(calc(-1 * var(--mega-lift))) !important;
    width: auto !important;
    min-width: var(--edu-minw);
    max-width: min(90vw, var(--edu-maxw));
  }
  /* اگر هنوز کلاسی آن را به چپ می‌کشد */
  #header #docsMegaMenu + .hs-mega-menu.edu-mega.dropdown-menu-start {
    left: auto !important;
    right: 50% !important;
  }
}

/* ============ فیکس موبایل (زیر 992px) ============ */
@media (max-width: 991.98px) {
  /* منو کاملاً زیر آیتم، تمام‌عرض، بدون جابه‌جایی افقی */
  #header #docsMegaMenu + .hs-mega-menu.edu-mega {
    position: static !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    box-shadow: none !important;
  }

  /* پل‌های هاورِ دسکتاپ در موبایل غیرفعال شوند */
  .navbar .nav-item.hs-has-mega-menu > .nav-link::after,
  #header .hs-mega-menu.dropdown-menu::before {
    display: none !important;
  }

  /* راست‌چینی متن‌ها (اگر نیاز شد) */
  #header #docsMegaMenu + .hs-mega-menu.edu-mega
    .navbar-dropdown-menu-media-title,
  #header #docsMegaMenu + .hs-mega-menu.edu-mega
    .navbar-dropdown-menu-media-desc {
    text-align: right !important;
  }
}


/* وقتی کلاس keep-open روی li باشد، dropdown را قطعاً باز نگه دار */
#header .hs-has-mega-menu.keep-open > .hs-mega-menu.dropdown-menu {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}



/* Override رنگ پیام‌ها فقط داخل فرم ثبت‌نام */
#signup-form .invalid-feedback,
#signup-form .text-danger,
#signup-form .form-text,
#signup-form .is-invalid + .invalid-feedback,
#signup-form .is-invalid ~ .invalid-feedback {
  color: #a10f2b !important; /* قرمز زرشکی */
}

/* اگر پیغام هماهنگی رمزها (matchMsg) هم text-danger می‌گیرد، همین کافی است.
   اگر جایی عمداً سفید شده بود، این هم کمک می‌کند: */
#signup-form #matchMsg.text-danger {
  color: #a10f2b !important;
}


/* Override رنگ پیام‌ها فقط داخل فرم «تعیین رمز جدید» */
#reset-form .invalid-feedback,
#reset-form .text-danger,
#reset-form .form-text,
#reset-form .is-invalid + .invalid-feedback,
#reset-form .is-invalid ~ .invalid-feedback {
  color: #a10f2b !important; /* قرمز زرشکی */
}

/* اگر پیام هماهنگی رمزها (matchMsg) text-danger می‌گیرد */
#reset-form #matchMsg.text-danger {
  color: #a10f2b !important;
}


/* Fill from the right, without flipping buttons */
#related-posts .rel-track { direction: rtl; }

/* موبایل: مطمئن شو لینک کارت بالاتر از دکمه‌هاست */
@media (max-width: 991.98px) {
  .rel-viewport { position: relative; overflow: hidden; }
  .rel-prev, .rel-next { z-index: 1; }            /* دکمه‌ها پایین‌تر */
  .rel-card { position: relative; z-index: 2; }
  .rel-card > a { position: relative; z-index: 3; touch-action: manipulation; }
  /* لایه‌ی افکت تصویر کلیک را نگیرد */
  .rel-card .card-transition-zoom-item,
  .rel-card .card-transition-zoom-item * { pointer-events: none; }
}


/* Hover-open فقط برای «تست‌های مدیریتی پیشرفته» (بدون JS) */
.dropdown.dropstart > #advancedMgmt + .dropdown-menu {
  display: none;
  position: absolute;
  top: 0;
  right: 100%;   /* روبه‌روی آیتم (در RTL = سمت چپ) */
  left: auto;
  margin: 0;     /* هم‌تراز با آیتم */
}

/* باز شدن با هاور روی لینک یا خود منو */
.dropdown.dropstart:hover > #advancedMgmt + .dropdown-menu,
.dropdown.dropstart > #advancedMgmt:focus + .dropdown-menu,
.dropdown.dropstart > #advancedMgmt + .dropdown-menu:hover {
  display: block;
}

/* وقتی از کل بلوک خارج شدی، بسته می‌شود (به لطف :hover بالا) */
/* نیازی به تغییر رنگ یا استایل‌های دیگر نیست؛ همان تم فعلی باقی می‌ماند */


/* Social icons → فقط آیکون‌ها سبز شوند */
.social-icons i {
  color: var(--bs-primary) !important;   /* #0ABF53 */
  opacity: 1;
}

/* Hover: کمی تاکید */
.social-icons a:hover i {
  filter: brightness(0.95) saturate(1.1);
}


/* ===== Footer Contacts (بخش ۶) — نسخه پایدار موبایل/دسکتاپ ===== */

/* والد: همیشه RTL و راست‌چین روی زمینه‌ی تیره */
.footer-contacts{
  direction: rtl;
  text-align: right !important;
  color: #fff;
}

/* تیتر */
.footer-contacts h6{
  color:#fff !important;
  margin-bottom:.75rem;
}

/* لیست‌ها: بدون بولت و فاصله‌های پیش‌فرض، راست‌چین */
.footer-contacts ul{
  list-style:none;
  margin:0;
  padding:0;
  text-align:right !important;
}

/* تورفتگی یکنواخت (در RTL: از راست) برای هر دو لیست */
.footer-contacts .addr-list,
.footer-contacts .phone-list{
  padding-right:1.25rem;
}

/* هر آیتم: بلوکیِ انعطاف‌پذیر، هر مورد در خط جدا، با فاصله‌های تمیز */
.footer-contacts .addr-list li,
.footer-contacts .phone-list li{
  display:flex;                 /* هر li یک خط کامل */
  flex-direction:row;           /* در RTL ترتیب DOM کافی است */
  align-items:flex-start;       /* آیکون در راست، متن کمی پایین‌تر طبیعی */
  gap:.5rem;                    /* فاصله بین آیکون و متن */
  width:100%;
  margin-bottom:.5rem;
  color:rgba(255,255,255,.95);
}

/* فقط آیکون‌ها سبز برند (fallback اگر متغیر نبود) */
.footer-contacts .addr-list i,
.footer-contacts .phone-list i,
.footer-contacts .fc-link i{
  color:var(--bs-primary, #0ABF53) !important;
  font-size:1rem;
  line-height:1;
  opacity:1;
  margin-top:.15rem;            /* تراز عمودی با اولین خط متن */
}

/* «شعبه X:» بولد و بدون شکست خط (یک‌تکه بماند) */
.footer-contacts .branch-label{
  font-weight:700;
  color:#fff !important;
  white-space:nowrap;           /* جلوی افتادن «شعبه ۲:» به دو خط را می‌گیرد */
}

/* متن آدرس معمولی و چندخطی */
.footer-contacts .address-text{
  font-weight:400;
  color:#fff !important;
  white-space:normal;
  overflow-wrap:anywhere;
}

/* لینک‌های تلفن/ایمیل: بلوکی با فاصله‌ی تمیز و رنگ ملایم */
.footer-contacts .fc-link{
  display:flex;                 /* مانند آدرس‌ها، یکسان‌سازی چیدمان */
  align-items:flex-start;       /* آیکون تلفن هم‌تراز با آیکون لوکیشن */
  gap:.5rem;                    /* فاصله آیکون و متن شماره */
  color:rgba(255,255,255,.95) !important;
  text-decoration:none;
  width:100%;                   /* مثل li تمام عرض را بگیرد تا هم‌تراز شود */
}
.footer-contacts .fc-link:hover{
  color:#fff !important;
  text-decoration:underline;
}

/* اگر تم، رنگ/تراز روی span/strong/li ست می‌کند، این تضمین می‌کند سفید بماند */
.footer-contacts .addr-list li span,
.footer-contacts .addr-list li strong,
.footer-contacts .phone-list li span{
  color:#fff !important;
}

/* — ریزتنظیم‌های موبایل — */
@media (max-width: 576px){
  .footer-contacts .addr-list,
  .footer-contacts .phone-list{
    padding-right:1rem;         /* کمی کمتر برای موبایل */
  }
  .footer-contacts .addr-list li,
  .footer-contacts .phone-list li{
    margin-bottom:.6rem;
  }
}

:root {
  --contact-indent-desktop: 1.25rem;
  --contact-indent-mobile: 1rem;
  --contact-icon-gap: .5rem;
}

.footer-contacts .addr-list,
.footer-contacts .phone-list { padding-right: var(--contact-indent-desktop); }

.footer-contacts .addr-list li,
.footer-contacts .phone-list li,
.footer-contacts .fc-link { gap: var(--contact-icon-gap); }

@media (max-width: 576px) {
  .footer-contacts .addr-list,
  .footer-contacts .phone-list { padding-right: var(--contact-indent-mobile); }
}


/* والد: RTL و راست‌چین */
.footer-contacts {
  direction: rtl;
  text-align: right !important;
  color: #fff;
}

/* لیست‌ها: بدون بولت و راست‌چین */
.footer-contacts ul {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: right !important;
}

/* تورفتگی یکنواخت برای آدرس‌ها و تلفن‌ها */
.footer-contacts .addr-list,
.footer-contacts .phone-list {
  padding-right: 1.25rem; /* تورفتگی کلی از راست */
}

/* هر آیتم یک خط جداگانه و فلکس */
.footer-contacts .addr-list li,
.footer-contacts .phone-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  width: 100%;
  margin-bottom: 0.5rem;
  color: rgba(255,255,255,0.95);
}

/* آیکون‌ها: رنگ سبز و تراز یکنواخت */
.footer-contacts .addr-list i,
.footer-contacts .phone-list i,
.footer-contacts .fc-link i {
  color: var(--bs-primary, #0ABF53) !important;
  font-size: 1rem;
  line-height: 1;
  opacity: 1;
  margin-top: 0.15rem; /* تنظیم ارتفاع نسبت به متن */
}

/* اضافه کردن تورفتگی به آیکون‌های تلفن/ایمیل تا هم‌تراز با لوکیشن شوند */
.footer-contacts .phone-list i,
.footer-contacts .fc-link i {
  padding-right: 0.25rem; /* یا هر مقدار که لازم است */
}

/* شعبه X: بولد و بدون شکست خط */
.footer-contacts .branch-label {
  font-weight: 700;
  color: #fff !important;
  white-space: nowrap;
}

/* متن آدرس معمولی */
.footer-contacts .address-text {
  font-weight: 400;
  color: #fff !important;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* لینک‌های تلفن/ایمیل */
.footer-contacts .fc-link {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  color: rgba(255,255,255,0.95) !important;
  text-decoration: none;
  width: 100%;
}
.footer-contacts .fc-link:hover {
  color: #fff !important;
  text-decoration: underline;
}


/* ===========================
   HERO (Test pages) — Global
   Default: COVER (پرکننده‌ی قاب)
   Optional per-page: .test-hero--contain (نمایش کامل بدون برش)
   =========================== */
/* ===========================
   HERO (دسکتاپ: cover)
   =========================== */

/* ظرف تصویر */
.test-hero__media {
  /* نسبت پیش‌فرض دسکتاپ */
  --hero-aspect: 16 / 9;

  width: 100%;
  aspect-ratio: var(--hero-aspect);
  border-radius: 1rem;
  overflow: hidden;
  background: #000; /* پشت تصویر برای حالت cover */
}

/* تصویر: کاور روی دسکتاپ */
.test-hero__media img,
.test-hero__media picture {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;       /* دسکتاپ: cover */
  object-position: center; /* نقطه تمرکز: وسط */
}

/* کپشن زیر تصویر */
.test-hero__caption {
  margin-top: .5rem;
  padding-inline: 1rem;
  font-size: .95rem;
  color: #6c757d;
  line-height: 1.7;
}

/* سقف ارتفاع در مانیتورهای خیلی عریض (برای جلوگیری از قدِ بیش‌ازحد) */
@media (min-width: 1400px) {
  .test-hero__media { max-height: 560px; }
}

/* ===========================
   موبایل: نمایش کامل تصویر (contain)
   =========================== */

@media (max-width: 480px) {
  .test-hero__media {
    /* روی موبایل اجازه می‌دهیم قاب از محتوا/سقف ارتفاع بگیرد */
    aspect-ratio: auto;
    max-height: 65svh;   /* اگر svh پشتیبانی نشد، مرورگر نادیده می‌گیرد */
    display: grid;       /* برای مرکز کردن تصویر در letterbox */
    place-items: center;
    background: #000;    /* نوارهای بالا/پایین (letterbox) تمیز دیده شوند */
  }

  .test-hero__media img,
  .test-hero__media picture {
    object-fit: contain !important; /* کل تصویر بدون برش */
    object-position: center center;
    width: 100%;
    height: auto;        /* ارتفاع آزاد؛ از max-height ظرف تبعیت می‌کند */
    max-height: 100%;
    display: block;
  }

  .test-hero__caption { font-size: .875rem; }
}

/* ===========================
   Fallback برای مرورگرهای بدون aspect-ratio
   =========================== */
@supports not (aspect-ratio: 1 / 1) {
  .test-hero__media {
    /* اگر aspect-ratio نباشد، این ارتفاع منعطف جلوی بلندشدن بیش‌ازحد را می‌گیرد */
    height: clamp(180px, 45vw, 360px);
  }

  .test-hero__media img,
  .test-hero__media picture {
    height: 100%;
  }

  @media (max-width: 480px) {
    .test-hero__media {
      height: auto;
      max-height: 65svh;
      display: grid;
      place-items: center;
    }

    .test-hero__media img,
    .test-hero__media picture {
      height: auto;
      max-height: 100%;
      object-fit: contain !important;
    }
  }
}





/* ========== TaskineRavan Mini Theme (RTL-friendly) ========== */
/* Color Tokens */
:root{
  --tr-brand:#0ea5a3;        /* primary green */
  --tr-brand-05:#f7fdfd;
  --tr-brand-10:#f0fbfb;
  --tr-brand-15:#e6f7f6;     /* light card bg */
  --tr-brand-30:#c8efed;
  --tr-text:#0b3d3c;
}

/* Typography helpers (good for Persian text) */
:lang(fa){
  font-kerning: normal;
  font-variant-ligatures: contextual common-ligatures;
}

.tr-justify, .tr-justify p, .tr-justify li{
  text-align: justify;
  text-align-last: right;     /* keep last line right-aligned in RTL */
  text-justify: inter-word;   /* distribute spaces between words */
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  line-height: 1.95;
}
/* Avoid harsh rivers on very narrow screens */
@media (max-width: 375px){
  .tr-justify, .tr-justify p, .tr-justify li{
    text-align: start;
    text-align-last: start;
  }
}

/* Chips / badges */
.badge.tr-chip{
  background: var(--tr-brand-10) !important;
  color: #0d3a39 !important;
  border: 1px solid var(--tr-brand-30) !important;
}

/* Green info cards */
.tr-green-card{
  background: var(--tr-brand-15) !important;
  border: 1px solid var(--tr-brand) !important;
  border-radius: .75rem !important;
}
.tr-green-card h2{ color: var(--tr-text); }

/* Green section (how-to/scoring) */
.tr-green-section{
  background: var(--tr-brand-15) !important;
  border: 1px solid var(--tr-brand) !important;
  border-radius: .75rem !important;
}

/* Hero media (kept from your page) */
.test-hero__media{
  width:100%;
  aspect-ratio: 16 / 9;
  border-radius: 1rem;
  overflow:hidden;
  background:#000;
}
.test-hero__media img{
  width:100%;
  height:100%;
  object-fit: cover;          /* cover on desktop */
  object-position: center;
  display:block;
}
.test-hero__caption{ margin-top:.5rem; }



/* موبایل – RTL: فاصله از لبه راست + فاصله بین لوگو و همبرگری */
@media (max-width: 575.98px){
  /* 1) کل محتوا کمی از لبه راست صفحه بیاید داخل */
  [dir="rtl"] .navbar > .container,
  [dir="rtl"] .navbar > .container-fluid{
    padding-inline-start: .5rem; /* راستِ صفحه در RTL */
  }

  /* 2) فاصلهٔ سمت چپِ لوگو (میان لوگو و همبرگری) */
  [dir="rtl"] .navbar .navbar-brand{
    margin-inline-end: .6rem !important;  /* چپِ لوگو در RTL */
  }

  /* 3) فاصلهٔ سمت راستِ دکمه همبرگری (میان همبرگری و لوگو) */
  [dir="rtl"] .navbar .navbar-toggler{
    margin-inline-start: .25rem !important; /* راستِ همبرگری در RTL */
  }
}

/* در صورت override شدن توسط تم، می‌توانی به‌جای 2 و 3 از gap استفاده کنی: */
/*
@media (max-width: 575.98px){
  [dir="rtl"] .navbar > .container,
  [dir="rtl"] .navbar > .container-fluid{
    gap: .6rem !important;
  }
}
*/


/* موبایل: منوی dropstart زیرِ آیتم و تمام‌عرض باز شود (نه به چپِ صفحه) */
@media (max-width: 991.98px){
  /* 1) منو را مثل یک dropdown معمولی زیرِ دکمه بیاور */
  .dropdown.dropstart > .dropdown-menu{
    position: static !important;      /* از جریان صفحه تبعیت کند */
    inset: auto !important;           /* top/right/bottom/left ریست */
    transform: none !important;       /* جابجایی صفر */
    width: 100% !important;           /* تمام‌عرض برای خوانایی */
    min-width: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;      /* ظاهر موبایلی صاف */
    text-align: right;                 /* RTL */
  }

  /* 2) در موبایل نمایش را به کلاس .show بسپار (کلیک) نه هاور */
  .dropdown.dropstart:hover > .dropdown-menu{ 
    display: none !important; 
  }
  .dropdown.dropstart > .dropdown-menu.show{
    display: block !important;
  }
}


/* مثل advancedMgmt برای زیرمنوی «تست‌های شخصیت‌شناسی» */
.dropdown.dropstart > #personalityTests + .dropdown-menu {
  display: none;
  position: absolute;
  top: 0;
  right: 100%;   /* در RTL منو سمت چپ آیتم می‌افتد */
  left: auto;
  margin: 0;
}

/* باز شدن با هاور/فوکوس دقیقاً مثل تفکر سیستمی */
.dropdown.dropstart:hover > #personalityTests + .dropdown-menu,
.dropdown.dropstart > #personalityTests:focus + .dropdown-menu,
.dropdown.dropstart > #personalityTests + .dropdown-menu:hover {
  display: block;
}



/* 404: شروع بلوک دقیقاً دو خط پایین‌تر */
#content .offset-2lines{
  padding-top: calc(2lh);   /* دقیقاً دو خط براساس line-height جاری */
  padding-top: 3em;         /* fallback اگر lh پشتیبانی نشد */
}

/* اگر هدر absolute بالای صفحه است و روی محتوا می‌افتد، این را هم فعال کن: */
/*
body #content{
  padding-top: max(3rem, var(--header-height, 64px));
}
*/





/* قاب ثابت برای تصویر کارت‌ها در همه اسلایدرهای داشبورد */
section[data-rel-slider] .rel-card .card-transition-zoom-item {
  height: 220px;           /* ارتفاع ثابت قاب تصویر – اگر زیاد/کم بود همین عدد را تنظیم کن */
  display: flex;
  align-items: center;     /* وسط‌چین عمودی عکس داخل قاب */
  justify-content: center; /* وسط‌چین افقی عکس داخل قاب */
  overflow: hidden;        /* اگر تصویر بزرگ‌تر بود، بیرون نزند (ولی با contain برش نمی‌خورد) */
}

/* خود عکس: کوچک شدن تا جا شدن کامل داخل قاب، بدون برش */
section[data-rel-slider] .rel-card .card-img {
  display: block;
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;     /* کل عکس دیده می‌شود، فقط کوچک می‌شود */
  margin: 0 auto;
}







/* ================= فلش‌کارت‌ها در منوی «منابع آموزشی» ================= */

/* زیرمنوی فلش‌کارت‌ها: سمت چپ، کمی دورتر و عریض‌تر */
.dropdown.dropstart > #flashcardsMenu + .flashcards-submenu {
  display: none;
  position: absolute;
  top: 0;
  right: calc(100% + 0.7rem);  /* کمی فاصله از باکس اصلی، سمت چپ در RTL */
  left: auto;
  margin: 0;
  white-space: nowrap;
  min-width: 17rem;          /* عریض‌تر: متن‌ها در یک خط بمانند */
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
}

/* باز شدن با هاور روی منو یا خود زیرمنو (دسکتاپ) */
.dropdown.dropstart:hover > #flashcardsMenu + .flashcards-submenu,
.dropdown.dropstart > #flashcardsMenu:focus + .flashcards-submenu,
.dropdown.dropstart > #flashcardsMenu + .flashcards-submenu:hover {
  display: block;
}

/* فاصله و خط نازک افقی بین دو آیتم زیرمنو */
.flashcards-submenu .dropdown-item + .dropdown-item {
  margin-top: 0.15rem;          /* آیتم دوم کمی پایین‌تر از اولی */
  padding-top: 0.35rem;         /* کمی فاصله از خط */
  border-top: 1px solid #e0e0e0;/* خط نازک جداکننده، افقی و لطیف */
}

/* اگر پوپر/تم فلش مثلثی بالای این زیرمنو می‌سازد، حذفش کن */
.navbar .dropdown.dropstart > #flashcardsMenu + .flashcards-submenu::before {
  display: none;
}

/* جابه‌جا کردن فلش منوی اصلی فلش‌کارت‌ها به سمت چپ */
#flashcardsMenu::after {
  margin-left: -0.5rem !important;  /* هرچی منفی‌تر کنی، فلش بیشتر به سمت چپ می‌ره */
}
/* پل hover برای فلش‌کارت‌ها تا موقع حرکت موس منو سریع بسته نشود */
#header .edu-mega .dropdown.dropstart {
  position: relative;
}

/* یک ناحیه نامرئی بین «فلش‌کارت‌های آموزشی» و زیرمنو */
#header .edu-mega .dropdown.dropstart::before {
  content: "";
  position: absolute;
  top: -6px;          /* اگر هنوز زود بسته شد، این عدد را بیشتر کن */
  bottom: -6px;       /* این هم همین‌طور */
  right: -4px;
  left: -16px;        /* هرچه منفی‌تر، تونل به سمت چپ پهن‌تر */
  background: transparent;
  pointer-events: auto;  /* لازم نیست دست بزنی؛ پیش‌فرضش همین است */
}



/* === Dash cards: line-height & spacing tune (override) === */
.rel-card .card-body {
  padding: 1rem 1rem .85rem;   /* کمی فضای بیشتر داخل کارت */
  row-gap: .35rem;             /* فاصله عمودی یکنواخت بین سطرها */
}

.rel-card .card-body h4 {
  line-height: 1.6;            /* عنوان خواناتر؛ قبلاً ~1.35 بود */
  margin: 0 0 .4rem 0;         /* کمی فاصله زیر عنوان */
}

.rel-card .card-body .text-muted,
.rel-card .card-body .small,
.rel-card .card-body .card-text {
  line-height: 1.65;           /* فاصلهٔ خط متن‌های فرعی */
}

.rel-card .card-footer {
  padding-top: .4rem;          /* کمی فاصله بالای پابرگ */
}

.rel-card .card-link {
  line-height: 1.6;            /* «مشاهده» هم هم‌تراز با بقیه */
}
/* --- Dashboard cards: title & meta spacing override --- */
section[data-rel-slider] .rel-card .card-body h4.mb-2.text-truncate{
  line-height: 1.7 !important;   /* فاصلهٔ خط عنوان */
  margin: 0 0 .45rem 0 !important;
}

/* زیرنویس و متادیتا هم خواناتر شوند */
section[data-rel-slider] .rel-card .card-body .small,
section[data-rel-slider] .rel-card .card-body .text-muted,
section[data-rel-slider] .rel-card .card-body .card-text{
  line-height: 1.65 !important;
}


/* ===== Badge قرمز کنار عنوان کارت دکتر ===== */
.tr-card-title-wrap {
  position: relative;
}

.tr-badge-dot {
  position: absolute;
  top: -6px;
  left: -10px; /* برای راست‌چین؛ اگر خواستی سمت راست باشه، اینو کن right:-10px; left:auto; */
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background-color: #ef4444; /* قرمز */
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2px #fff; /* حلقه سفید دورش که روی کارت تمیز دیده شه */
}

/* اگر بخوای فقط نقطه باشه بدون عدد، اینو می‌تونی استفاده کنی:
.tr-badge-dot {
  position: absolute;
  top: -4px;
  left: -8px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background-color: #ef4444;
  box-shadow: 0 0 0 2px #fff;
  font-size: 0;
}
*/
/* Badge سبز ملایم داخل زیرنویس کارت دکتر */
.tr-inline-badge {
  display: inline-flex;
  align-items: center;         /* وسط‌چین عمودی متن */
  justify-content: center;     /* وسط‌چین افقی متن */
  padding: 2px 10px;           /* بالا/پایین 2px ، چپ/راست 10px */
  margin-right: .35rem;        /* فاصله از متن قبل (در RTL) */
  font-size: 11px;
  border-radius: 999px;        /* قرص‌شکل کامل */
  background-color: #bbf7d0;   /* سبز خیلی ملایم (تقریباً emerald-100) */
  color: #14532d;              /* سبز تیره برای متن */
  font-weight: 600;
  line-height: 1.4;            /* نسبت خط منطقی برای وسط افتادن */
  white-space: nowrap;         /* شکسته نشدن روی دو خط */
}