@import url(https://cdn3.greensoft.mn/fonts/mcs/mcs-font.css);

body, nav, section, footer { font-family: "MCS", sans-serif; }

:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
  --bs-primary: #F40009;
  --bs-primary-rgb: 244, 0, 9;

  --bs-secondary: #000 !important;
  --bs-secondary-rgb: 0, 0, 0;

  --bs-border-radius-xxl: 1.5rem;
  --bs-border-color: rgb(0, 0, 0, .25) !important;;
}






/* GENERAl */

.badge {
  border-radius: 50rem !important;
  padding: .5rem .75rem !important;
  background-color: var(--bs-secondary) !important;
  color: white !important;
}
[data-bs-theme="dark"] .badge {
  background-color: var(--bs-white) !important;
  color: var(--bs-text-body) !important;
}

section[data-bs-theme=""] .border,
section[data-bs-theme=""] .border-bottom,
section[data-bs-theme=""] .border-top,
section[data-bs-theme=""] hr {
  border-color: rgb(0, 0, 0, .25) !important;
}

.container {
  width: 100% !important;
  max-width: 1224px !important;
}

@media (min-width: 1200px) {
  .container-fluid {
    max-width: 1824px;
    padding-inline: 1.5rem;
  }
}






/* typography-v1 (html/1)-ийн онцлог дүрэм — рич текстийн уншигдах өргөн (800px, голлуулсан)
   — нь блокийн өөрийн `<style>`-д зөөгдсөн: layout/block/html/html1.blade.php */








.title-v1 .breadcrumb-item {
  text-transform: uppercase;
  font-weight: 600;
  font-size: .75rem;
}
.title-v1 .breadcrumb-item:last-child {
  font-weight: 700 !important;
  color: var(--bs-secondary);
}



/* BTN & LINK */

.text-link {
  font-size: .875rem !important;
}

.btn {
  border-width: 2px;
  font-weight: 700;
  padding: .75rem 2.25rem;
  border-radius: 50rem;
  font-size: .875rem !important;
}

/* ⭐ ЖИЖИГ ТОВЧ (`btn-sm`) — дээрх өргөн padding-ыг ӨВЛӨХГҮЙ (2/3 харьцаа).
   ⚠️ Bootstrap-ийн жамын `.btn-sm` нь ЗӨВХӨН `--bs-btn-padding-*` хувьсагчийг
   сольдог ба дээрх `.btn { padding: … }` нь тэр хувьсагчийг тойрч бичдэг тул
   ЖИЖГЭРДЭГГҮЙ байв — иймд padding-ыг ЭНД шууд дахин зарлана.
   Pill (border-radius: 50rem) ба фонт/хүрээ ХЭВЭЭР: зөвхөн хэмжээгээр ялгарна.
   `.btn-circle` нь `padding: 0 !important` тул хөндөгдөхгүй. */
.btn-sm {
  padding: .375rem 1.25rem;
  /* ⚠️ `!important` ЗААВАЛ — дээрх `.btn { font-size: .875rem !important }`-ыг
     эс бөгөөс дийлэхгүй (ижил жинтэй сонгогч, гэхдээ !important тал нь тэргүүлнэ). */
  font-size: .75rem !important;
}

/* ⭐ БРЭНДИЙН УЛБАР ШАР ТОВЧ (2026-08-31) — `btn btn-gold`
   Брэндийн палитрын 3 дахь өнгө: улаан #f40009 · цэнхэр #2babfc · **улбар шар #f79a01**
   (`layout.blade.php`-ийн `const GOLD`, `mcs/history.html`-д «Брэндийн өнгө» гэж жагссан).
   ⚠️ Bootstrap 5.3-ын товч нь `--bs-btn-*` хувьсагчаар ажилладаг тул өнгийг ШУУД
      `background`-аар БИШ, хувьсагчаар нь өгнө — ингэж л hover/active/focus төлөв
      бүрэн ажиллана.
   ⚠️ Бичиг/дүрс нь ХАР: #f79a01 дээр цагаан нь 2.4:1 (уншигдахгүй), хар нь ~9:1.
   `.btn-circle` (extra, 2.5rem !important) -тэй чөлөөтэй хамт хэрэглэгдэнэ — тэр нь
   зөвхөн хэмжээ/padding-д хамаарах тул өнгө мөргөлдөхгүй. */
.btn-gold {
  --bs-btn-color: #000;
  --bs-btn-bg: #f79a01;
  --bs-btn-border-color: #f79a01;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #d98700;
  --bs-btn-hover-border-color: #cc7f00;
  --bs-btn-focus-shadow-rgb: 247, 154, 1;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #cc7f00;
  --bs-btn-active-border-color: #bf7700;
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: #f79a01;
  --bs-btn-disabled-border-color: #f79a01;
}




/* FORM */

.form-control {
  border-width: 2px;
  font-weight: 700;
  padding: .75rem 1rem;
  border-radius: .5rem;
  font-size: .875rem;
  border-color: var(--bs-border-color);
}





/* TYPOGRAPHY — rich text талбараас ирэх хүснэгт (админ энгийн <table> л буулгана) */

/* ⚠️ extra-д `.typography>* { display:flex }` бий — хүснэгтийг flex болгож
   thead/tbody-г салгаад багануудыг эвддэг. Table layout-ыг сэргээнэ. */
.typography table {
  display: table;
  width: 100%;
  font-size: .875rem;
  border-collapse: collapse;
}
.typography table th,
.typography table td {
  padding: .625rem .875rem;
  border: 1px solid var(--bs-border-color);
  vertical-align: top;
  text-align: start;
}

/* толгой — бараан */
.typography table thead th {
  background-color: var(--bs-secondary);
  color: var(--bs-white);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* мөр доторх гарчиг ба бүлгийн зурвас */
.typography table tbody th {
  background-color: var(--bs-tertiary-bg);
  font-weight: 700;
}
.typography table tbody tr:hover td {
  background-color: var(--bs-tertiary-bg);
}

.typography table + table {
  margin-top: 1.5rem;
}




/* POST */

.post-date,
.post-category a {
  font-size: .75rem !important;
}
.post-title {
  font-weight: 800 !important;
}

/* post-item — ангиллын badge ба огноо жижиг */
.post-item .item-badge,
.post-item .item-date {
  font-size: .75rem !important;
}




/* BREADCRUMB */

/* 1. Байшингын icon хэрэггүй — markup-аас устгахгүй, зөвхөн нуана */
.breadcrumb-item .fa-house {
  display: none !important;
}

/* 2. Заагч «/» → баруун тийш чиглэсэн chevron (Font Awesome glyph) */
.breadcrumb-item + .breadcrumb-item::before {
  content: "\f054" !important;   /* fa-chevron-right */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: .625rem;
  line-height: 1;
}

/* 3. Идэвхтэй хуудас бүдүүн + бүтэн, бусад нь бүдэг */
.breadcrumb-item {
  opacity: .5;
}
.breadcrumb-item.active {
  opacity: 1;
  font-weight: 800 !important;
}
.breadcrumb-v1[data-bs-theme=""] .breadcrumb-item.active {
  color: var(--bs-secondary) !important;
}

/* 4. Голын (эцэг ангиллын) холбоос нь ихэвчлэн `#` — дарагдахгүй болгоно.
      Эхний «Нүүр» холбоос болон идэвхтэй хуудас хөндөгдөхгүй. */
.breadcrumb-item:not(:first-child):not(.active) > a {
  pointer-events: none;
}





















/* hero-v1 (header/1)-ийн онцлог дүрмүүд — банерын өндөр (15/20/40rem) ба гарчгийн
   цагаан текст + `::before` бүдэг туяа — нь блокийн өөрийн `<style>`-д зөөгдсөн:
   layout/block/header/header1.blade.php (`#block-{id}`-ээр scope хийсэн). */





/* VIDEO PLAY — зураг дээр байрлах play товч + цацраг (ripple) */

.video-play {
  position: relative;
  width: fit-content;
  line-height: 0;
}

/* цацраг нь wrapper дээр — .btn-circle-ийн ::after нь icon-д зориулагдсан тул хөндөхгүй.
   Өнгө нь ҮРГЭЛЖ цагаан (currentColor БИШ) — hover дээр товч өнгөө сольсон ч долгион цагаан хэвээр. */
.video-play::before,
.video-play::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid var(--bs-white);
  border-radius: 50rem;
  animation: video-play-ripple 2.4s cubic-bezier(.4, 0, .6, 1) infinite;
  pointer-events: none;
}
.video-play::after {
  animation-delay: 1.2s;
}
@keyframes video-play-ripple {
  from { transform: scale(1); opacity: .55; }
  to   { transform: scale(2); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .video-play::before,
  .video-play::after { animation: none; opacity: 0; }
}

/* .btn-circle-ийн default сум → play icon (товч томорсон тул icon ч томроно) */
.video-play .btn-circle::after {
  content: "\f04b";
  font-size: 2rem;
}

/* Хэвийн үед бүдэг (markup: .opacity-75), hover дээр:
   бүтэн харагдана · ард нь цагаан бүдэг туяа · өнгө secondary болно */
.video-play {
  border-radius: 50rem;
  transition: opacity .4s ease-in-out, color .4s ease-in-out, box-shadow .4s ease-in-out;
}
.video-play:hover {
  opacity: 1 !important;                 /* .opacity-75 утилитийг дарна */
  color: var(--bs-secondary) !important; /* .text-white утилитийг дарна (долгион нь энэ өнгийг дагахгүй) */
  box-shadow: 0 0 4rem 2rem rgba(var(--bs-white-rgb), .75);
}
/* hover — товч бүтэн дүүрнэ (fill): цагаан дэвсгэр + secondary icon */
.video-play:hover .btn-outline-light {
  --bs-btn-color: var(--bs-secondary);
  --bs-btn-bg: var(--bs-white);
  --bs-btn-border-color: var(--bs-white);
  --bs-btn-hover-color: var(--bs-secondary);
  --bs-btn-hover-bg: var(--bs-white);
  --bs-btn-hover-border-color: var(--bs-white);
}




/* ITEM ELEMENT */

/* ⭐ Сүүдэргүй дизайн — extra нь `.item-var-2`-т `box-shadow: var(--bs-box-shadow)`
   өгдөг (layout-v1 · features-v1 · features-v2 … бүгдэд). Markup дээрх `shadow`
   утилитиудыг блокуудаас аль хэдийн хассан тул энэ нэг мөрөөр CSS-ийнхийг ч хаана. */
.item-var-2 {
  box-shadow: none !important;
}

/* ангиллын badge — цагаан pill + хар текст (.badge-ийн хар дэвсгэрийг дардаг) */
.item-badge {
  background-color: var(--bs-white) !important;
  color: var(--bs-secondary) !important;
}




/* cards-v2 (card/2)-ийн онцлог дүрмүүд — item-overlay градиент ба desktop hover
   (видео хагас тунгалаг, цагаан товч харлах) — нь блокийн өөрийн `<style>`-д зөөгдсөн:
   layout/block/card/card2.blade.php · layout/_sibling_links.blade.php */










/* features-v2 (icon_box/2) ба features-v4 (icon_box/4)-ийн ОНЦЛОГ дүрмүүд нь
   тухайн блокийн өөрийн `<style>`-д, section-ийн `#id`-ээр scope хийгдсэн.
   Энэ файлд зөвхөн ЕРӨНХИЙ (олон блокт хамаарах) дүрэм үлдэнэ.
     features-v2 → layout/block/icon_box/icon_box2.blade.php · blocks-features.php
                   (#blk-featuresv2) · brands.php (#block-500976) · vision.php (#block-98342)
     features-v4 → layout/block/icon_box/icon_box4.blade.php · blocks-features.php
                   (#blk-featuresv4) */




/* carousel-v4 (slider/4)-ийн онцлог дүрмүүд — hero гарчгийн хэмжээ (clamp → 4.25rem)
   ба `heading-lg`-ийг дийлэх дүрэм — нь блокийн өөрийн `<style>`-д зөөгдсөн:
   layout/block/slider/slider4.blade.php. Доорх `heading-lg`/`heading-end` нь
   ЕРӨНХИЙ (олон блокт хамаарах) тул энд үлдэнэ. */




/* ГАРЧГИЙН ХЭМЖЭЭ — heading-lg (CMS: block_config.title_style = 2) */

/* `resources/views/1959/layout/_heading.php` нь `title_style` = '2' үед heading-row-д
   `heading-lg` класс нэмнэ. Bootstrap-ийн display шатлалаар ЯГ НЭГ шат томруулна:
       h2: default calc(1.325rem + .9vw)/2rem  → display-5 calc(1.425rem + 2.1vw)/3rem
       h1: default calc(1.375rem + 1.5vw)/2.5rem → display-4 calc(1.475rem + 2.7vw)/3.5rem
   h1 > h2 харьцаа хадгалагдана. `items-text-*`-ийн адил ЗӨВХӨН гарчиг шатална —
   `heading-desc p` хэвээр (тайлбар нь гарчигтай хамт томорвол блок бүтнээрээ хөвдөг). */
.heading-row.heading-lg>.heading-main>h2 {
  font-size: calc(1.425rem + 2.1vw);
  line-height: 1.15;
}
.heading-row.heading-lg>.heading-main>h1 {
  font-size: calc(1.475rem + 2.7vw);
  line-height: 1.12;
}

@media (min-width: 1200px) {
  .heading-row.heading-lg>.heading-main>h2 {
    font-size: 3rem;
  }
  .heading-row.heading-lg>.heading-main>h1 {
    font-size: 3.5rem;
  }
}

/* ⚠️ carousel-v4-ийн hero нь `heading-lg`-ээс ЗОРИУДААР том байх ёстой — тэр дүрэм нь
   блокийн өөрийн `<style>`-д (slider4.blade.php), specificity-гийн тайлбар ч тэнд. */




/* ГАРЧГИЙН ЭГНЭЭ — heading-end (CMS: section.text_position = 2) */

/* `_heading.php` нь `text_position='2'` үед `heading-end` класс нэмнэ.
   Бүтэц нь extra-гийн `.heading-centered` (style.css:1383)-ийн ТОЛИН ТУСГАЛ:
   `align-items` + `text-align` + гадагшаа түлхэх `margin`.
   ⚠️ `.heading-row` нь ≥768px-д `width: 75%` болдог тул `margin-left: auto` нь БАРУУН
      ирмэг руу нааж, зүүн талд зай үлдээнэ (`heading-centered`-ийн mx-auto-той ижил зарчим).
   ⚠️ `.heading-main` / `.heading-desc` нь flex-column тул ТЭДГЭЭРИЙГ Ч эгнүүлнэ — эс
      бөгөөс badge (`width: fit-content`) зүүн талдаа хоцорно.
   `text_position='0'` (зүүн) нь `.heading-row`-ийн ЖАМ тул `heading-start` класс БАЙХГҮЙ. */
.heading-row.heading-end {
  align-items: flex-end !important;
  text-align: end !important;
  margin-left: auto !important;
  /* ⚠️ ЗААВАЛ: 24 блок markup-даа `heading-centered`-ыг ХАТУУ бичсэн тул `text_position='2'`
     үед хоёр класс ЗЭРЭГ гарна (`heading-centered heading-end`). `heading-centered` нь
     `margin-right: auto !important` тавьдаг — түүнийг тэглэхгүй бол хоёр тал auto болж
     гарчиг БАРУУН тийш явахын оронд ТӨВД хоцорно (текст нь баруун эгнэсэн ч).
     mcs/style.css нь extra-гийн ДАРАА ачаалагддаг тул ижил specificity-д ЭНЭ дийлнэ. */
  margin-right: 0 !important;
}
.heading-row.heading-end .heading-main,
.heading-row.heading-end .heading-desc {
  align-items: flex-end !important;
}

/* extra нь `heading-centered`-тэй section-ийн `block-action`-ыг төвлүүлдэг (style.css:1481).
   `heading-end`-д мөн адил — товчнууд гарчигтайгаа нэг эгнээнд байх ёстой. */
section:has(.heading-row.heading-end) .block-action:not([class*="justify-content"]) {
  justify-content: flex-end;
}




/* PAGINATION */

/* MCS хэв: дугуй, хүрээгүй, зөөлөн сүүдэртэй.
   extra нь `border-radius: .5rem !important` өгдөг тул !important-оор л дийлнэ. */
.page-item .page-link {
  border: 0;
  border-radius: 50% !important;
  box-shadow: var(--bs-box-shadow-sm);
}


/* ═══════════════════════════════════════════════════════════════════════════
   GREENSOFT CRM ФОРМ (forms.greensoft.mn widget)
   ═══════════════════════════════════════════════════════════════════════════
   Widget: <div id="green_crm_form" data-siteid="1959" data-formid="N"> +
           forms.greensoft.mn/js/widget/index.js
   Markup нь ГАДНААС ирдэг (formBuilder) тул зөвхөн CSS-ээр загварчилна:
     #green_crm_form > .gcf-wrapper-force > .crm_form_rendered_wrapper > .card > .card-body > form
       > .rendered-form.formbuilder-embedded-bootstrap
           > .form-builder.form-group.field-{нэр}  →  label + .form-control + .help
           > .formbuilder-button.field-submit      →  button.btn.btn-success.w-100

   Хэмжээ нь `/proto/factory-tour`-ийн демо формоос ХЭМЖИЖ АВСАН эталонтой тааруулсан:
     input 49px · textarea 133px · товч 49px · саарал хайрцаг 89px · шошго 14px/600.

   ⭐ БҮТЭЦ (2026-08-14 рефактор):
     1) ЕРӨНХИЙ ХЭСЭГ — `#green_crm_form` scope. Widget бүрийн ҮНДСЭН id тул сайт дээрх
        БҮХ форм (аль ч formid, аль ч блок) ижил харагдана. Давхардсан дүрэм бичихгүй.
     2) БЛОК ТУС БҮРИЙН ЯЛГАА — зөвхөн GRID (баганы тоо, аль талбар бүтэн мөр эзлэх)
        БА modal-ын онцгой тохиргоо. Эдгээрийг Л section/modal ID-гаар онооно.
   ⚠️ Шинэ форм нэмэгдвэл ЕРӨНХИЙ хэсэг автоматаар үйлчилнэ — зөвхөн grid хэрэгтэй бол
      доорх «БЛОК ТУС БҮР» хэсэгт ID-г нь нэмнэ. */

/* ─────────────────────────── 1) ЕРӨНХИЙ (бүх форм) ─────────────────────────── */

/* Карт: цагаан, хүрээгүй, зөөлөн сүүдэртэй */
#green_crm_form .crm_form_rendered_wrapper .card {
  border: 0;
  border-radius: 1.5rem;
  box-shadow: 0 1rem 2.5rem rgba(var(--bs-emphasis-color-rgb), .08),
              0 .25rem .5rem  rgba(var(--bs-emphasis-color-rgb), .04);
}

/* Прототип: `p-4 p-md-6 p-lg-8` → хэмжигдсэн 32px (≥md) */
#green_crm_form .crm_form_rendered_wrapper .card-body {
  padding: 1.5rem;
}

@media (min-width: 768px) {
  #green_crm_form .crm_form_rendered_wrapper .card-body {
    padding: 2rem;
  }
}

/* Талбарууд — GRID суурь (баганы тоог блок тус бүр доор өгнө) */
#green_crm_form .rendered-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

#green_crm_form .rendered-form .form-group {
  margin-bottom: 0;   /* зайг grid `gap` өгнө */
}

/* Шошго — прототип: `form-label fw-semibold small` (14px / 600 → өндөр 21px) */
#green_crm_form .rendered-form label {
  margin-bottom: .5rem;
  font-size: .875rem;
  font-weight: 600;
}

#green_crm_form .rendered-form .formbuilder-required {
  color: var(--bs-danger);
}

/* Оролтууд —
   ⚠️ ХОЁР УРХИ: (1) widget нь `card-body` дотроо ӨӨРИЙН <style> шахдаг тул төслийн
   глобал `.form-control` (padding, хүрээ) дарагдана; (2) `height: 34px` ХАТУУ тулгадаг
   тул padding нэмсэн ч өндөр өсөхгүй. Хоёуланг нь энд дийлнэ. */
#green_crm_form .rendered-form .form-control {
  height: auto;
  padding: .75rem 1rem;
  border-width: 2px;
  line-height: 1.5;
  border-radius: .5rem;
  border-color: var(--bs-border-color);
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

#green_crm_form .rendered-form .form-control:focus {
  border-color: rgba(var(--bs-emphasis-color-rgb), .35);
  box-shadow: 0 0 0 .25rem rgba(var(--bs-emphasis-color-rgb), .08);
}

/* Прототип: `rows="5"` → хэмжигдсэн 133px */
#green_crm_form .rendered-form textarea.form-control {
  min-height: 8.3125rem;
}

/* Хоосон `.help` нь мөр бүрийн доор илүү зай үлдээдэг */
#green_crm_form .rendered-form .help:empty {
  display: none;
}

/* Радио бүлэг: саарал хайрцаг. ⚠️ Прототипт ШОШГО НЬ ХАЙРЦАГ ДОТРОО байдаг тул
   `.radio-group` БИШ, БҮХЭЛ талбарын wrapper-ыг хайрцаг болгоно (өндөр 89px).
   ⚠️ Талбарын класс нь `field-radio-group-1786…` гэсэн ДИНАМИК суффикстэй тул
      `[class*=]`-ээр барина (formBuilder нь timestamp залгадаг). */
#green_crm_form .rendered-form > [class*="field-radio-group"] {
  background-color: var(--bs-secondary-bg);   /* прототип: `bg-body-secondary` */
  border-radius: .75rem;                      /* `rounded-2` */
  padding: 1rem;                              /* `p-3 p-md-4` → хэмжигдсэн 16px */
}

#green_crm_form .rendered-form .radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1.5rem;
}

/* `min-height` — прототипийн `.form-check` мөрийн өндөртэй тааруулав (26px) */
#green_crm_form .rendered-form .formbuilder-radio,
#green_crm_form .rendered-form .formbuilder-checkbox {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-height: 1.625rem;
  margin: 0;
}

/* Прототипийн `.form-check-input` = 16px */
#green_crm_form .rendered-form .formbuilder-radio input,
#green_crm_form .rendered-form .formbuilder-checkbox input {
  width: 1rem;
  height: 1rem;
  margin: 0;
  flex-shrink: 0;
}

#green_crm_form .rendered-form .formbuilder-radio label,
#green_crm_form .rendered-form .formbuilder-checkbox label {
  margin: 0;
  font-size: .875rem;    /* прототип: `.form-check-label small` */
  font-weight: 400;
}

/* Зөвшөөрлийн checkbox — гарчиг нь зөвхөн `*` тул шошгыг нуугаад нэг мөрөнд гаргана */
#green_crm_form .rendered-form [class*="field-checkbox-group"] > .formbuilder-checkbox-group-label {
  display: none;
}

/* Илгээх товч: бараан, дугуй ирмэгтэй, агуулгынхаа өргөнөөр */
#green_crm_form .rendered-form .field-submit {
  margin-bottom: 0;
}

#green_crm_form .rendered-form .btn[type="submit"] {
  width: auto !important;   /* widget нь `w-100` тавьдаг */
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background-color: var(--bs-emphasis-color);
  border-color: var(--bs-emphasis-color);
  border-width: 2px;
  color: var(--bs-body-bg);
  border-radius: 50rem;
  padding: .75rem 1.25rem;   /* прототип: `px-5` → хэмжигдсэн 20px */
  line-height: 1.5;
  font-weight: 700;
}

#green_crm_form .rendered-form .btn[type="submit"]:hover,
#green_crm_form .rendered-form .btn[type="submit"]:focus {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
  color: var(--bs-white);
}

/* Font Awesome «цаасан онгоц» икон — markup-д байхгүй тул CSS-ээр нэмнэ */
#green_crm_form .rendered-form .btn[type="submit"]::before {
  content: "\f1d8";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
}

/* ────────────────── 2) БЛОК ТУС БҮРИЙН GRID (зөвхөн ялгаа) ────────────────── */

@media (min-width: 768px) {

  /* Хоёулаа 2 баганат тор */
  #block-276416 .rendered-form,
  #modal-body-276206 .rendered-form {
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem 1.5rem;
  }

  /* Урт талбарууд бүтэн мөрөө эзэлнэ (хоёуланд нь нийтлэг) */
  #block-276416 .rendered-form > [class*="field-radio-group"],
  #block-276416 .rendered-form > [class*="field-checkbox-group"],
  #block-276416 .rendered-form > [class*="field-textarea"],
  #block-276416 .rendered-form > .field-submit,
  #modal-body-276206 .rendered-form > [class*="field-radio-group"],
  #modal-body-276206 .rendered-form > [class*="field-checkbox-group"],
  #modal-body-276206 .rendered-form > [class*="field-textarea"],
  #modal-body-276206 .rendered-form > .field-submit {
    grid-column: 1 / -1;
  }

  /* ЗӨВХӨН modal (formid=2): эхний ТАЙЛБАР текст ба «Нэр» бүтэн мөрөө эзэлнэ.
     Тайлбар нь `.rendered-form`-ийн эхний хүүхэд — formBuilder-ийн paragraph талбарын
     класс тогтворгүй тул `:first-child`-ээр барив. */
  #modal-body-276206 .rendered-form > *:first-child,
  #modal-body-276206 .rendered-form > [class*="field-firstname"] {
    grid-column: 1 / -1;
  }

}

/* Modal дотор карт нь ХОЁР ДАХЬ хайрцаг болж давхарладаг тул сүүдэр/радиусгүй,
   зайг modal-body өөрөө өгнө. */
#modal-body-276206 .crm_form_rendered_wrapper .card {
  box-shadow: none;
  border-radius: 0;
}

#modal-body-276206 .crm_form_rendered_wrapper .card-body {
  padding: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MEGA-MENU — БАННЕР + 2 БАГАНАТ ЦЭС
   ═══════════════════════════════════════════════════════════════════════════
   Бүтэц: `.wrapper` (markup дээр `d-xl-flex`) → ЗҮҮН талд `.dropdown-banner`
   (33.333%), БАРУУН талд `.row` (үлдсэн зай). Цэснүүд тэр талбар дотроо
   ХОЁР БАГАНА (`row-cols-md-3` ба `-md-4` хоёулаа → 50%).

   📌 2026-08-16: баннер нь ӨМНӨ `.wrapper::before` псевдо байсныг БОДИТ HTML
      (`<figure class="dropdown-banner"><img>`) болгож сольсон — зураг нь одоо
      цэсний `[banner:URL]`-аас (цаашид API-аас) ирнэ. Энд зөвхөн ӨРГӨН үлдэв;
      харьцаа/булан/дэвсгэрийг markup-ийн утилит (`ratio-16x9`, `rounded-2`,
      `bg-body-tertiary`) өгнө.

   ⛔ `.row`-ыг `display: grid` руу хөрвүүлж БОЛОХГҮЙ: `.row-cols-md-3 > *` нь
      `width: 33.33%` өгдөг бөгөөд grid дээр тэр хувь нь МӨРИЙН биш НҮДНИЙ
      өргөнөөс тооцогдож багана 389px → 130px болж хумигдана (текст тасарна).

   ⚠️⚠️ Сонгогч бүр `.navbar-nav`-аар ЭХЛЭНЭ — эс бөгөөс ХЭЛНИЙ dropdown
      (`.navbar-actions > .lang-dropdown`) нь мөн `.dropdown-menu > .wrapper` бүтэцтэй
      тул flex/radius дүрмүүд түүнд ч тусаж, цэс нь эвдэрдэг (2026-08-14-нд гарсан алдаа). */

@media (min-width: 1200px) {

  /* ⚠️ Хайрцгийн БҮХ хэлбэр MARKUP-ийн утилитаар өгөгдсөн:
       `p-4 p-md-6` · `gap-4` · `rounded-3 rounded-xl-4` · `d-xl-flex align-items-xl-start` */

  /* Баннер — зүүн 1/3. (`w-33` утилит extra-д БАЙХГҮЙ тул энд.) */
  .header-v1 .navbar-nav .dropdown-menu .dropdown-banner {
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
  }

  /* Цэсний талбар — үлдсэн зай */
  .header-v1 .navbar-nav .dropdown-menu .wrapper > .row {
    flex: 1 1 auto;
    min-width: 0;
  }

  /* Цэснүүд тэр талбар дотроо ХОЁР хуваалт (`row-cols-md-3` ч, `-md-4` ч ялгаагүй) */
  .header-v1 .navbar-nav .dropdown-menu .row > * {
    flex: 0 0 50%;
    max-width: 50%;
    width: 50%;
  }

}

/* ── МОБАЙЛ/ТАБЛЭТ (<1200px) — ЗАДАРСАН ДЭД ЦЭС ─────────────────────────────
   Тэр өргөнд цэс нь hamburger доторх задрах жагсаалт болдог. Дэд цэсний хайрцаг
   (`.dropdown-menu > .container > .wrapper`) нь дөрвөлжин, цул саарал байсныг
   ДУГУЙ ирмэгтэй, ТУНГАЛАГ+BLUR гадаргуу болгож ялгаж харуулна (2026-08-14).
   ⚠️ Сонгогч нь header-ийн inline `<style>`-ийн `.header-v1 .dropdown-menu >
      .container > .wrapper` (4 класс)-ААС ӨНДӨР байх ёстой — эс бөгөөс тэнцүү
      болж, ДАРАА нь бичигдсэн inline style нь ялна. */
@media (max-width: 1199.98px) {

  .header-v1 .navbar-nav .dropdown-menu > .container > .wrapper,
  .header-v1 .navbar-nav .dropdown-menu > .wrapper {
    /* Радиус — толгойн 16px-ээс НЭГ шат доогуур (12px), панель 24 > толгой 16 >
       энэ карт 12 гэсэн буурах шатлал үүснэ. */
    border-radius: .75rem !important;
    background-color: hsla(0, 0%, 100%, .55) !important;
    backdrop-filter: blur(16px) saturate(160%);   /* 3 дахь давхар шил */
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    border: 1px solid rgba(var(--bs-emphasis-color-rgb), .06);
    box-shadow: 0 .5rem 1.5rem rgba(var(--bs-emphasis-color-rgb), .06);
    padding: .5rem !important;
  }

  /* Мөр бүр нь хайрцгийн дотор жаахан агшиж, ирмэгтэй нь зохицно */
  .header-v1 .navbar-nav .dropdown-menu .dropdown-item {
    border-radius: .75rem !important;
  }

}

/* ── ЦЭСНИЙ МӨРИЙН HOVER — арай мэдэгдэхүйц (2026-08-14) ────────────────────
   Bootstrap-ийн `--bs-dropdown-link-hover-bg` нь маш цайвар (tertiary) тул мэдрэгддэггүй.
   Иконы хайрцаг markup дээр `bg-body-secondary` болсонтой нэг эгнээнд оруулав. */
.header-v1 .navbar-nav .dropdown-menu .dropdown-item:hover,
.header-v1 .navbar-nav .dropdown-menu .dropdown-item:focus {
  background-color: var(--bs-secondary-bg) !important;
}

/* Hover үед иконы хайрцаг ↔ мөрийн дэвсгэр СОЛИГДОНО (secondary → body):
   мөр secondary болоход икон нь body-bg болж ялгарсан хэвээр үлдэнэ.
   ⚠️ `!important` заавал — markup дээрх `bg-body-secondary` utility өөрөө
   !important-тэй тул эс бөгөөс дийлэхгүй. */
.header-v1 .navbar-nav .dropdown-menu .dropdown-item:hover .bg-body-secondary,
.header-v1 .navbar-nav .dropdown-menu .dropdown-item:focus .bg-body-secondary {
  background-color: var(--bs-body-bg) !important;
}

/* ── #mainNavbar — МОБАЙЛ ЦЭСНИЙ ПАНЕЛЬ (<1200px) ───────────────────────────
   Панель нь дөрвөлжин, ирмэггүй цагаан хайрцаг байсныг зөөлрүүлж, мөрүүдийг
   уншихад тухтай болгоно (2026-08-14). Markup хөндөөгүй — зөвхөн CSS. */
@media (max-width: 1199.98px) {

  /* ⭐ Панель = ТУСДАА ХӨВӨГЧ КАРТ: 4 талдаа дугуй, толгойноос ЗАЙТАЙ, шилэн дэвсгэр.
     ⚠️ `.navbar` (өвөг) дээр backdrop-filter БАЙВАЛ энэ панелийн blur ҮХНЭ — тиймээс
        цэс задарсан үед sticky толгойн өөрийн blur-ыг унтраана (доор). */
  /* ⚠️ Хэлбэрийг ХЭР ЧАДАХААР utility-гээр өгсөн (markup: `rounded-4 mt-2 shadow`).
     Энд зөвхөн utility-гээр илэрхийлэгдэхгүй ШИЛ болон таслалт үлдэв. */
  /* ⚠️⚠️ ГУРВАН ДАВХАР ШИЛ — ЭЛЕМЕНТ ДЭЭР `backdrop-filter` ТАВИХГҮЙ, зөвхөн
     `::before` ДАВХАРГА дээр. Учир нь өвөг элемент дээрх backdrop-filter нь
     ХҮҮХДИЙНХИЙГ ҮХҮҮЛДЭГ:  navbar → #mainNavbar → дэд цэсний wrapper.
     ⇒ Гурвуулаа ХУУДСЫГ өөрсдөө бүдгэрүүлж, зэрэг ажиллана.
        (Өмнө нь толгойн blur-ыг унтрааж байж панелийнх ажилладаг байсныг зассан.) */

  /* 1) ТОЛГОЙ — шил нь `::before`-д */
  body.nav-open .header-v1 .navbar,
  body.nav-open .header-v1.sticky > .navbar {
    background-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    position: relative;
  }

  body.nav-open .header-v1 .navbar::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background-color: hsla(0, 0%, 100%, .5);
    backdrop-filter: blur(32px) saturate(180%);
    -webkit-backdrop-filter: blur(32px) saturate(180%);
  }

  /* Толгойн агуулга шилний ДЭЭР */
  body.nav-open .header-v1 .navbar > .container > *:not(.navbar-collapse) {
    position: relative;
    z-index: 1;
  }

  /* 2) ПАНЕЛЬ — шил нь мөн `::before`-д (эс бөгөөс доторх дэд цэсний blur үхнэ) */
  #mainNavbar {
    /* ⛔ `position` БҮҮ ЗААХ — header нь `absolute` өгдөг, `relative` болговол
       панель overlay байхаа болиод доод контентоо ТҮЛХДЭГ. */
    background-color: transparent !important;
    /* `shadow-xl-none` гэсэн утилит байхгүй тул сүүдрийг ЭНД (мобайл блокт) өгнө */
    box-shadow: 0 1rem 2.5rem rgba(var(--bs-emphasis-color-rgb), .12),
                0 .25rem .5rem rgba(var(--bs-emphasis-color-rgb), .04) !important;
    overflow: hidden;
  }

  #mainNavbar::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background-color: hsla(0, 0%, 100%, .72);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
  }

  #mainNavbar > * {
    position: relative;   /* агуулга шилний дээр */
  }

  /* ⚠️⚠️ ДЭД ЦЭС ЗАДРАХ ҮЕИЙН АНИВЧАЛТ. Markup дээр `.dropdown-menu` нь extra-гийн
     `.transition` (= `transition: all .4s`) класстай. `all` тул задрахад БҮХ шинж
     чанар 400мс анимэйшн болж, панелийн ӨНДӨР өөрчлөгдөнө → шилний давхаргууд
     (`::before`) кадр тутам дахин тооцогдож АНИВЧДАГ.
     ⇒ Мобайл дээр зөвхөн `opacity`-г үлдээнэ (харагдац ижил, тооцоолол хямд). */
  .header-v1 .navbar-nav .dropdown-menu.transition {
    transition: opacity .45s ease !important;
  }

  /* Шилний давхаргуудыг тусдаа composite давхарга болгож тогтворжуулна */
  body.nav-open .header-v1 .navbar::before,
  #mainNavbar::before {
    transform: translateZ(0);
    will-change: backdrop-filter;
  }

  /* 3) ЗАДРАХ ШИЛЖИЛТ — blur нь «дараа нь араас» ажиллахаа болино.
     ⚠️ Bootstrap collapse нь ӨНДРИЙГ кадр тутам өөрчилдөг тул шил дахин тооцогдож,
        анимэйшн дуустал ажиллаагүй мэт харагддаг. Өндрийн анимэйшнийг унтрааж,
        оронд нь opacity + бага зэргийн шилжилт өгнө — шил ЭХНЭЭСЭЭ бэлэн. */
  .header-v1 .navbar-collapse.collapsing {
    transition: none !important;
    height: auto !important;
  }

  .header-v1 .navbar-collapse {
    opacity: 0;
    transform: translateY(-.375rem);
    transition: opacity .45s ease, transform .45s ease;
  }

  .header-v1 .navbar-collapse.show,
  .header-v1 .navbar-collapse.collapsing {
    opacity: 1;
    transform: none;
  }

  /* Мөр хоорондын нимгэн заагч (эхнийхээс бусад) */
  #mainNavbar .navbar-nav > .nav-item + .nav-item {
    border-top: 1px solid rgba(var(--bs-emphasis-color-rgb), .06);
  }

  /* Мөрийн өндөр/зай — хуруунд тухтай, chevron нь баруун захдаа */
  #mainNavbar .navbar-nav > .nav-item > .nav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .875rem .25rem !important;
  }

  /* ⭐ Дэд цэстэй мөрөнд CHEVRON — задарсан үед 180° эргэнэ.
     Bootstrap-ийн гурвалжныг Font Awesome-оор сольж, дизайн системтэй нийцүүлэв. */
  #mainNavbar .navbar-nav > .nav-item > .nav-link.dropdown-toggle::after {
    content: "\f078" !important;
    display: inline-block !important;   /* header-ийн inline style нь `display:none` өгдөг */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: .75rem;
    border: 0;
    margin: 0;
    opacity: .4;
    transition: transform .45s ease, opacity .45s ease;
  }

  #mainNavbar .navbar-nav > .nav-item.show > .nav-link.dropdown-toggle::after {
    transform: rotate(180deg);
    opacity: 1;
  }

}


/* =============================================
   ITEM-ийн ШИЛЖИЛТИЙН ХУГАЦАА — .15s → .45s (2026-08-17)
   =============================================
   1990-ийн дизайн систем (`/bootstrap-extra/style.css:854`) нь item-ийн БҮХ хэсэгт
   `all .15s` өгдөг. MCS-д тэр нь хэт огцом тул 3 дахин удаашруулав.

   ⚠️ Сонгогчийн ЖАГСААЛТ нь extra-гийнхтай ЯГ ИЖИЛ байх ёстой — нэгийг нь орхивол
      тэр элемент .15s-ээр үлдэж, нэг картан дээр 2 өөр хурд зэрэгцэнэ.

   ⭐ ӨНГӨ ч мөн ШИЛЖИНЭ (extra нь `color/background-color/border-color`-ыг `0s` болгодог).
      ЯАГААД САЛАВ: extra-гийн `0s` нь тема (dark/light) СОЛИХ агшны өнгөний хоцролтоос
      сэргийлэх зорилготой. Гэвч MCS-д тема солигч БАЙХГҮЙ (`data-bs-theme` нь markup-д
      статикаар бичигдсэн) тул тэр хамгаалалт юунаас ч хамгаалахгүй.
      Харин hover дээр ХОР УРШИГТАЙ: .15s үед мэдэгдэхгүй байсан ч .45s дээр товч/линкийн
      өнгө ШУУД үсэрч, дэвсгэр/transform нь 450ms гүйдэг тул hover «хатуу» харагдана
      (хэрэглэгчийн мэдээлсэн алдаа 2026-08-17).
   ⛔ `/bootstrap-extra/style.css`-д ГАР ХҮРЭХГҮЙ — энэ бол override. */
.item-element,
.item-element video,
.item-element img,
.item-image,
.item-overlay,
.item-bg-overlay,
.item-details,
.item-title,
.item-title a,
/* ⭐ ГАРЧИГ ДОТОРХ ТООНЫ `<span>` — `/mcs/script.js`-ийн тоо гүйлгэгч нь
   `.item-title span` -ыг сонгодог тул загварчин/админ гарчиг дотор тоог `<span>`-д
   боож өгдөг. `transition` нь удам руу ӨВЛӨГДДӨГГҮЙ шинж чанар учир span нь өөрийн
   `0s`-ээр үлдэж, өнгө солигдоход ШУУД үсэрдэг байв.
   ⚠️ ХОЁУЛАНГ нь бичсэн шалтгаан: item-title-ийн дийлэнх нь `<a>`-тай ч 5 блок нь
      `<a>`-ГҮЙ (`card/10` · `icon_box/8` · `timeline/1,2,3`) тул `a span` дүрэм тэдэнд
      хүрэхгүй. (CSS-д `.item-title span` нь `a > span`-ыг ч хамардаг — `a span` нь
      илүүц боловч ЗОРИУД тодорхой бичсэн.)
   Энэ нь БҮХ item-тэй блокт хамаарна — тиймээс блок бүрд биш, ЭНД. */
.item-title a span,
.item-title span,
.item-info,
.item-desc,
.item-meta,
.item-category,
.item-category a,
.item-date,
.item-badge,
.item-price,
.item-price-old,
.item-spec,
.item-action,
.item-action a {
  transition: all .45s ease-in-out;
}

/* extra:955 — `.item-action > .btn.btn-link` нь ДЭЭРХ дүрмээс ӨНДӨР specificity-тэй
   тул тусад нь дарна (эс бөгөөс «Дэлгэрэнгүй» товчнууд .15s-ээр үлдэнэ). */
.item-action > .btn.btn-link {
  transition: all .45s ease-in-out;
}

/* ⭐ ТОВЧ — `.block-action` доторх товчнууд `.item-*` ЖАГСААЛТАД ОРООГҮЙ тул Bootstrap-ийн
   жамын `.15s`-ээр үлдэж, нэг блок дээр 2 өөр хурд зэрэгцэж байв (хэмжсэн: каталог дээр
   6 товч .15s, эргэн тойрны бүх зүйл .45s). Ижилтгэв.
   ⚠️ `.accordion-button` · `.navbar-toggler` нь `.btn` БИШ — Bootstrap тэдэнд тусдаа
      `.15s` өгдөг тул энд нэрлэн оруулав (задаргаа нээх, hamburger дарах хоёр л
      .15s-ээр үлдэж байсан). */
.btn,
.accordion-button,
.navbar-toggler {
  transition: all .45s ease-in-out;
}