/* 01-section-block-notice.html */
/* BACKGROUND — брэнд гүн хөх (footer-тэй ижил).
           ⚠️ --bs-primary-rgb БИШ: dark горимд тэр нь #2073b6 болж гэрэлтдэг. */

        /* ⚠️ `--bs-primary` БИШ — блок нь `data-bs-theme="dark"` тул тэр нь #5b8ede
           болж гэрэлтдэг. Тогтмол брэнд өнгө = `--pro-brand-deep-rgb`.
           Primary давамгайлна: 55% хүртэл цул, тэндээс secondary рүү уусна
           (2 зогсоол — админы gradient-тэй нийцнэ). */
        /* ⚠️ `--bs-primary` БИШ — блок нь `data-bs-theme="dark"` тул тэр нь гэрэлтдэг.
           Зүүн захад алтлаг «оч» → хурдан брэнд навы руу уусна → баруун тийш secondary.
           ⓘ Энэ бол 3 зогсоолт gradient — CMS-ийн админ 2 зогсоол л дэмждэг тул
           энэ ticker нь custom блок хэвээр (JSON-оор удирдагдахгүй). */
        #block-notice {
          background-color: rgb(var(--pro-brand-deep-rgb)) !important;
          background-image: linear-gradient(90deg,
            var(--bs-gold) 0%,
            rgb(var(--pro-brand-deep-rgb)) 26%,
            rgb(var(--pro-brand-deep-rgb)) 55%,
            var(--bs-secondary) 100%);
        }

        /* TICKER — цэвэр CSS auto-scroll (marquee-v1-ийн зарчим: агуулгыг 2 хувь клонлож -50% зөөнө).
           Swiper/JS хэрэггүй. Hover дээр зогсоно, reduced-motion дээр огт хөдлөхгүй. */

        #block-notice .ticker-track {
          display: flex;
          align-items: center;
          width: max-content;
          gap: 2rem;
          animation: ticker-notice 45s linear infinite;
        }
        #block-notice:hover .ticker-track,
        #block-notice:focus-within .ticker-track {
          animation-play-state: paused;
        }

        @keyframes ticker-notice {
          from { transform: translateX(0); }
          to   { transform: translateX(-50%); }
        }

        @media (min-width: 768px) {
          #block-notice .ticker-track { gap: 3rem; }
        }

        @media (prefers-reduced-motion: reduce) {
          #block-notice .ticker-track { animation: none; }
        }


        /* Зарын мөр hover дээр алтлаг болно (footer-ийн линктэй нэг хэлээр) */
        #block-notice .ticker-item {
          transition: color .4s ease-in-out;
        }
        #block-notice .ticker-item:hover {
          color: var(--bs-gold) !important;
        }

        /* Хоёр тал руугаа уусах маск — текст зурвасын зах дээр цэвэр таслагдана */
        #block-notice .ticker-viewport {
          -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 2rem, #000 calc(100% - 2rem), transparent 100%);
                  mask-image: linear-gradient(90deg, transparent 0, #000 2rem, #000 calc(100% - 2rem), transparent 100%);
        }

/* 03-section-block-banner.html */
/* Гарчгийн жин — дизайн системийн `.heading-main>h2` нь 700; слайдер дээр
           арай хөнгөн 600 (хэрэглэгчийн заавар). Мөр таслалт (`<br>`) хэрэглэхгүй —
           өргөнөөсөө хамаарч өөрөө хуйлардаг. */
        #block-banner .heading-main h2 {
          font-weight: 600;
        }
        /* h1 болсон гарчиг — төслийн `.heading-row h2` (том үсэг, 1.5rem)-ийн хэвийг ЯГ
           давтана, эс бөгөөс Bootstrap-ийн h1 (2.5rem) болж харагдац өөрчлөгдөнө. */
        #block-banner .heading-main h1 {
          text-transform: uppercase;
          font-weight: 600;
          letter-spacing: .075rem;
          font-size: 1.5rem;
        }

        #block-banner .swiper-slide {
          min-height: 15rem;
        }
        /* ХҮРТЭЭМЖ — томруулсан текст (гарчиг + товч) харьцаат өндөрт (1024px-д ердөө 181px)
           багтахгүй тасардаг байв. Томруулсан үед харьцааг АВЧ, доод өндрийг ижил харьцаагаар
           өгнө → багтвал яг хуучин өндөр, багтахгүй бол контентоороо өснө.
           ⚠️ `min-height: auto` ажиллахгүй: текстийн контейнер `h-100` тул слайдын өндөрт тэнцэж,
              хэтэрсэн контент слайдыг өсгөдөггүй (баннер бүтэн өргөнтэй тул 100vw). */
        @media (min-width: 992px) {
          html.a11y-zoom-115 #block-banner .swiper-slide,
          html.a11y-zoom-130 #block-banner .swiper-slide {
            aspect-ratio: auto;
            min-height: calc(100vw * 400 / 1600);
          }
        }
        @media (min-width: 992px) {
          #block-banner .swiper-slide {
            aspect-ratio: 1600 / 400;   /* эх баннерын харьцаа — таслахгүй бүтэн харагдана (2026-10-14: 1920/340 → шинэ баннер 4:1) */
            min-height: 0;
          }
        }
        #block-banner .banner-img {
          position: absolute;
          inset: 0;
          width: 100%;
          height: 100%;
          object-fit: cover;
        }

        /* Бэлгэдлийн слайд — нэр уншигдах хөх бүрхүүл (зүүнээс баруун тийш уусна) */
        /* Бүрхүүл — БАРААН (өмнө брэндийн хөх байсан): сүлдний алтлаг өнгө хөх
           бүрхүүл дор ноорхойрдог тул зөвхөн гүн харын уусмалаар дарж, текст уншуулна. */
        #block-banner .banner-shade {
          position: absolute;
          inset: 0;
          background: linear-gradient(90deg,
            rgba(0, 0, 0, .88) 0%,
            rgba(0, 0, 0, .62) 45%,
            rgba(0, 0, 0, .20) 100%);
        }

        /* Нэрийн бичилт — брэндбүүк 1.12: Times New Roman + tracking */

        /* Swiper удирдлага — цагаан, идэвхтэй/hover нь алтлаг */
        #block-banner .swiper-pagination-bullet {
          background: rgba(255, 255, 255, .7);
          opacity: 1;
        }
        #block-banner .swiper-pagination-bullet-active {
          background: var(--bs-gold);
        }
        #block-banner .swiper-button-prev,
        #block-banner .swiper-button-next {
          color: #fff;
          transition: color .4s ease-in-out;
        }
        #block-banner .swiper-button-prev:hover,
        #block-banner .swiper-button-next:hover {
          color: var(--bs-gold);
        }
        #block-banner .swiper-button-prev::after,
        #block-banner .swiper-button-next::after {
          font-size: 1.5rem;
        }

/* 05-section-block-posts6.html */
/* posts-v6 — col-second жагсаалтын item хоорондын зай + зураас */

        #block-posts6 .col-second .col-item {
          padding-block: 1rem;
        }
        #block-posts6 .col-second .col-item:first-child {
          padding-top: 0;
        }
        #block-posts6 .col-second .col-item:last-child {
          padding-bottom: 0;
        }
        #block-posts6 .col-second .col-item:not(:last-child) {
          border-bottom: var(--bs-border-width) solid var(--bs-border-color);
        }

/* 06-between-.html */
/* Bootstrap-д уусаж бүдгэрдэг зураас байхгүй тул 3 мөр — өөр CSS нэмээгүй. */
      .pro-divider .divider-line { height: 1px; background: linear-gradient(90deg, rgba(var(--bs-primary-rgb), 0) 0%, rgba(var(--bs-primary-rgb), .28) 100%); }
      .pro-divider .divider-line:last-child { background: linear-gradient(90deg, rgba(var(--bs-primary-rgb), .28) 0%, rgba(var(--bs-primary-rgb), 0) 100%); }
      /* ТЭМДЭГ — логоны дүрслэл: АЛТАН цагираг, дотор нь брэндийн ЦЭНХЭР дугуй.
         Хоёрын хооронд зай үлдээхийн тулд цагирагийн доторх талбар нь дугуйнаасаа
         том (2rem ↔ .75rem ⇒ 4 талдаа ~6px зай). Зураг БИШ тул хурц, хөнгөн. */
      .pro-divider .divider-mark {
        width: 2rem;
        height: 2rem;
        border-color: var(--bs-gold) !important;
      }
      .pro-divider .divider-dot {
        width: .75rem;
        height: .75rem;
        background-color: var(--bs-primary);
      }

/* 07-section-block-posts1.html */
/* 09.16 санал №7 — харьяа ПГ-ын нэршил: зургийн баруун ДООД өнцөгт,
           брэндийн цэнхэр суурин дээр цагаанаар (extra-гийн цайвар badge-ийг дарна). */
        #block-posts1 .item-badge {
          --bs-badge-color: #fff;
          background-color: rgb(var(--pro-brand-deep-rgb));
          color: #fff;
        }

/* 09-section-block-links.html */
/* BACKGROUND — гарын авлагын цэнхэр уусмал (2 зогсоол — админы gradient-тэй нийцнэ) */

        #block-links {
          background-image: linear-gradient(180deg, #2f7cb8 0%, rgb(var(--pro-brand-deep-rgb)) 100%);
        }

        /* HOVER — зураг харанхуйлж, гарчиг АЛТЛАГ болно (энэ блокт primary биш).
           `items-hover-title`-ийн өнгийг дарахад specificity өндөр байх ёстой. */
        #block-links .card-item .item-image img {
          transition: filter .4s ease-in-out;
        }
        #block-links .card-item:hover .item-image img {
          filter: brightness(.6);
        }
        #block-links .card-item:hover .item-title,
        #block-links .card-item:hover .item-title > a {
          /* `.item-title` өөрөө ч — `line-clamp`-ийн «…» нь холбоосын биш h4-ийн өнгийг авдаг
             (ганц <a>-г будахад цэгүүд цэнхэр үлдэж байв, 2026-10-07) */
          color: var(--bs-gold) !important;
        }

        /* ≥xl: 6 мэдээ НЭГ ЭГНЭЭНД (markup-ийн `row-cols-xl-6`). Гарчиг урт тул багана 3/12. */
        /* ХҮРТЭЭМЖ 130% — 7 карт нэг эгнээнд гарчиг нь тасардаг → нэг шат доош: 4 карт,
           гарчгийн багана 3/12. Утсанд 2 баганад урт үг багтахгүй → 1 багана, зураг 16:9. */
        @media (min-width: 1200px) {
          html.a11y-zoom-130 #block-links .col-first { width: 25%; }
          html.a11y-zoom-130 #block-links .col-second { width: 75%; }
        }
        @media (max-width: 575.98px) {
        }

/* 11-section-block-important.html */
/* ≥xl: 7 холбоос НЭГ мөрөнд — `row-cols-*` дээд тал нь 6 тул өргөнийг шууд 1/7 */
        @media (min-width: 1200px) {
          #block-important .items-wrapper > .col-item { width: calc(100% / 7); }
        }
        /* Icon нь ЦАГААН дүрстэй (тунгалаг) — дэвсгэр хасагдсан тул брэндийн хөхөөр будна
           (#254A9F-д ойролцоо filter; хар/өнгөт icon ирвэл энэ мөрийг ав) */
        #block-important .item-image img {
          filter: brightness(0) saturate(100%) invert(23%) sepia(54%) saturate(2350%) hue-rotate(212deg) brightness(88%) contrast(92%);
        }

/* 13-section-block-stats.html */
/* Дэвсгэр — ЦАЙВАР (08.14 санал №7); хээ нь body-гийн wavy texture-ээс
           (өөрийн цэгэн торыг хассан — давхар хээ шаргалзана) */

        /* Чиглэлийн багана — зураасгүй, 135° цагаанаас уусах gradient тайл */

        /* ICON — LOTTIE (хөдөлгөөнт). Хэмжээ ТОГТМОЛ, 4 багана бүрд ижил;
           дэвсгэр/хүрээгүй — дүрс өөрөө өнгөт (брэнд хөх + алт руу хөрвүүлсэн).
           JS уначихвал контейнер хоосон зай хэвээр — layout эвдрэхгүй. */
        /* Тайлын дэвсгэр — зөөлөн цэнхэр уусмал (135°). `item-var-2`-ийн саарал
           дэвсгэрийг дарна; радиус/зай/сүүдэр нь markup дээрх утилитээр. */
        /* 2026-10-12 (хэрэглэгчийн заавар): ЭНГИЙН саарал уусмал (өмнө нь цэнхэр secondary .25) */
        #block-stats .feature-item {
          background-image: linear-gradient(135deg, rgba(var(--bs-body-color-rgb), .07) 0%, rgba(var(--bs-body-color-rgb), 0) 75%);
        }

        /* 09.16 санал №9: icon-ыг ЖИЖИГ болгов (8rem → 5rem) */
        #block-stats .stat-icon {
          width: 5rem;
          height: 5rem;
          flex-shrink: 0;
          /* JSON-ууд дотроо захын зайтай тул дүрс хайрцагтаа жижиг суудаг —
             хайрцгийн хэмжээг барьж, зөвхөн дүрсийг нь томсгоно. */
          transform: scale(1.5);
        }
        #block-stats .stat-icon svg {
          display: block;
          width: 100%;
          height: 100%;
        }

        /* 09.16 санал №9: 4 чиглэлийн НЭРШЛИЙГ нэг хэмжээнд, ТОМ үсгээр */
        #block-stats .item-title {
          font-size: 1rem;
          text-transform: uppercase;
          line-height: 1.35;
        }

        /* Үзүүлэлтийн мөр */

        /* ТОО — блокийн гол мессеж: арай том (1.25 → 1.5rem, md-ээс дээш 1.75rem) ба
           ӨӨРӨӨ уусмал өнгөтэй (primary → secondary).
           ⚠️ `color` БИШ `-webkit-text-fill-color` ашиглана: markup дээрх `text-primary`
              утилити нь `color`-ыг `!important`-оор дардаг, харин text-fill-color-ыг үгүй. */
        #block-stats .item-desc {
          font-size: 1.5rem !important;
          width: fit-content;
          font-weight: 700;
          /* 09.16 санал №9 «тодруулах»: gradient-ийн цайвар төгсгөлийг 70%-д шахаж,
             эхлэлийг гүн брэнд хөхөөр авав — хэрэглэгчийн сонгосон 2 өнгийн уусмал хэвээр. */
          /* Тоо — брэндийн цэнхэр (уусмалгүй, цул) */
          color: var(--bs-primary);
        }
        @media (min-width: 768px) {
          #block-stats .item-desc {
            font-size: 1.75rem !important;
          }
        }

/* 14-between-.html */
/* PLAY товч — зурган дээр төвлөрсөн, RIPPLE долгионтой */

        .play-btn {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 3.25rem;
          height: 3.25rem;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 50rem;
          background: rgba(255, 255, 255, .92);
          color: rgb(var(--pro-brand-deep-rgb));
          font-size: 1rem;
          z-index: 2;
          pointer-events: none;
          transition: background-color .4s ease-in-out, color .4s ease-in-out, transform .4s ease-in-out;
        }
        .play-btn::before,
        .play-btn::after {
          content: "";
          position: absolute;
          inset: 0;
          border-radius: 50rem;
          animation: play-ripple 2.2s ease-out infinite;
        }
        .play-btn::after {
          animation-delay: 1.1s;
        }
        @keyframes play-ripple {
          0%   { box-shadow: 0 0 0 0 rgba(255, 255, 255, .45); }
          70%  { box-shadow: 0 0 0 1.25rem rgba(255, 255, 255, 0); }
          100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
        }
        .item-element:hover .play-btn {
          background: var(--bs-gold);
          color: #fff;
          transform: translate(-50%, -50%) scale(1.08);
        }
        @media (prefers-reduced-motion: reduce) {
          .play-btn::before,
          .play-btn::after { animation: none; }
        }

/* 15-section-block-explains.html */
/* ХҮРТЭЭМЖ 130% — 992–1199px-д 3/12 баганад урт гарчгийн үг («ТАЙЛБАРЛАЖ») багтдаггүй
           → гарчгийн багана 4/12, картынх 8/12. 100%-д нөлөөгүй. */
        @media (min-width: 992px) and (max-width: 1199.98px) {
          html.a11y-zoom-130 #block-explains .col-first { width: 33.3333%; }
          html.a11y-zoom-130 #block-explains .col-second { width: 66.6667%; }
        }

/* 19-section-block-orgs.html */
#block-orgs .items-wrapper {
          width: max-content;
          animation: marquee-orgs 60s linear infinite;
        }
        #block-orgs .items-wrapper:hover {
          animation-play-state: paused;
        }
        /* 2 дахь мөр эсрэг тийшээ */
        #block-orgs .items-wrapper:nth-child(even) {
          animation-direction: reverse;
        }

        /* Marquee-ийн item нь flex дотор тул өргөн нь хатуу, агшихгүй байх ёстой. */
        #block-orgs .feature-item {
          width: 16rem;
          flex-shrink: 0;
        }
        @media (min-width: 768px) {
          #block-orgs .feature-item {
            width: 20rem;
          }
        }
        /* ⚠️ 1991-ийн канон нь логог `grayscale(1) + opacity .5`-аар бүдгэрүүлдэг ч
           энд БАЙГУУЛЛАГЫН ЭМБЛЕМ (төрийн сүлдтэй) тул бүдэг байх нь эвгүй —
           §2 №5/№9. Тиймээс бүрэн өнгөтэй, hover дээр бага зэрэг өргөгдөнө. */
        #block-orgs .feature-item img {
          transition: transform .4s ease;
        }
        #block-orgs .feature-item:hover img {
          transform: scale(1.06);
        }

        @keyframes marquee-orgs {
          to {
            transform: translateX(-50%);
          }
        }

        /* Хоёр ирмэг дээр уусах — MASK (дэвсгэр одоо хээтэй тул цулгуй өнгөт
           gradient давхарга тавьж болохгүй; mask нь ямар ч дэвсгэр дээр ажиллана) */
        #block-orgs .marquee-track {
          position: relative;
          -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4rem, #000 calc(100% - 4rem), transparent 100%);
                  mask-image: linear-gradient(90deg, transparent 0, #000 4rem, #000 calc(100% - 4rem), transparent 100%);
        }
        @media (min-width: 992px) {
          #block-orgs .marquee-track {
            -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9rem, #000 calc(100% - 9rem), transparent 100%);
                    mask-image: linear-gradient(90deg, transparent 0, #000 9rem, #000 calc(100% - 9rem), transparent 100%);
          }
        }

/* 21-section-block-hero.html */
/* Түлхүүр үгсийн алтлаг өргөлт */
        #block-hero .heading-main h2 em {
          font-style: normal;
          color: var(--bs-gold);
        }

/* 22-between-.html */
#mongol-bichig {
          /* ⚠️ z-index 1 үед footer-ийн `.footer-contact` (мөн z-1, DOM-д СҮҮЛД тул
             дийлдэг) энэ панелийг хэрчиж байв. CTA (1020) ба header (1030)-аас
             доогуур, гэхдээ хуудасны бүх контентоос дээгүүр. */
          z-index: 1010;
          /* Захын зай нь CTA-гийнхтай ЯГ ИЖИЛ — өөрийн өргөнөөс үл хамааран
             тогтмол зай (CTA: `margin-right: calc((edge − 2.75rem) / 2)`). */
          margin-left: calc((var(--pro-edge) - 2.75rem) / 2);
        }
        /* ⚠️ ЗӨВХӨН 1600px-ЭЭС ДЭЭШ: түүнээс нарийн дэлгэцэд container-ийн зүүн
           ирмэг (1440px үед 60px) нь энэ панелийн мужид (24…89px) орж, слайдер болон
           картын текстийг халхалдаг. Өргөн дэлгэцэд л зай хангалттай. */
        @media (min-width: 1600px) {
          #mongol-bichig {
            display: flex !important;
          }
        }
        /* Сүлд — бичгийн өргөнтэй ойролцоо, жижиг */
        #mongol-bichig .bichig-emblem {
          width: 2rem;
        }
        #mongol-bichig .bichig-art {
          height: min(40vh, 18rem);
          opacity: .9;
        }

/* 23-section-block-quick.html */
/* Header-ийн z-index нь 1030 — түүнээс доогуур байрлана (dropdown нь үүн дээр гарна) */
        #block-quick {
          z-index: 1020;
          /* Захын зайны ГОЛД: (зай − элементийн өргөн) / 2. Элемент нь 2.75rem (w-11). */
          margin-right: 1rem;
        }
        @media (min-width: 1200px) {
          #block-quick {
            margin-right: calc((var(--pro-edge) - 2.75rem) / 2);
          }
        }

        /* Phone: smaller column in the bottom-right corner, stacked above the 2.5rem
           accessibility icon (client 2026-11-07). !important beats the top-50 / translate-middle-y utilities. */
        @media (max-width: 767.98px) {
          #block-quick {
            top: auto !important;
            bottom: calc(2.5rem + 1rem);
            transform: none !important;
            margin-right: calc(var(--bs-gutter-x, 1.5rem) * .5);
          }
          #block-quick .cta-item > span:last-child {
            width: 2.5rem !important;
            height: 2.5rem !important;
            font-size: .875rem;
          }
        }

        #block-quick .cta-item {
          /* ЦАГААН тайл, брэндийн цэнхэр icon — hover дээр алт болно (доорх дүрэм) */
          background-color: var(--bs-white);
          color: rgb(var(--pro-brand-deep-rgb));
          border-radius: 50rem;   /* хумигдсан үедээ ЦЭВЭР ДУГУЙ, нэр нээгдэхэд pill */
          box-shadow: var(--bs-box-shadow);
          transition: background-color .4s ease-in-out;
          /* ⚠️ ЗААВАЛ: нэгийг hover хийхэд section өргөсөж, бусад pill нь блок элемент
             байдгаараа сунаж байсан. max-content нь хумигдсан нэрийг 0 гэж тооцно. */
          width: max-content;
        }
        /* X-ийн лого — extra нь `--social-x-color`-оор буддаг, бараан theme-д ЦАГААН
           болдог тул цагаан тайл дээр алга болно. Энд ХАР болгож тогтооно. */
        #block-quick .fa-x-twitter {
          color: var(--bs-black);
        }

        /* Задарсан (hover/focus) төлөв — брэндийн primary дэвсгэр, БҮХ лого цагаан */
        #block-quick .cta-item:hover,
        #block-quick .cta-item:focus-visible {
          /* ⚠️ `--bs-primary` БИШ: энэ section нь `data-bs-theme="dark"` тул тэр
             токен #5b8ede болж цайрдаг. Брэндийн жинхэнэ primary-г тогтмол авна. */
          background-color: rgb(var(--pro-brand-deep-rgb));
          color: var(--bs-white);
        }
        #block-quick .cta-item:hover i,
        #block-quick .cta-item:focus-visible i {
          color: var(--bs-white);   /* сошиалын жамын өнгийг дарна */
        }

        /* Нэр нь хумигдсан байж, hover дээр зүүн тийш нээгдэнэ (icon хэмжээ хөдлөхгүй) */
        #block-quick .cta-label {
          max-width: 0;
          overflow: hidden;
          white-space: nowrap;
          transition: max-width .4s ease-in-out, padding-inline-start .4s ease-in-out;
          padding-inline-start: 0;
        }
        #block-quick .cta-item:hover .cta-label,
        #block-quick .cta-item:focus-visible .cta-label {
          max-width: 14rem;
          padding-inline-start: 1.5rem;   /* задрахад зүүн талдаа тухтай зай */
        }

        @media (prefers-reduced-motion: reduce) {
          #block-quick .cta-label { transition: none; }
        }