/* ==================================================================== */
/* === НАЧАЛО: ОСНОВНЫЕ СТИЛИ ВИДЕОПЛЕЕРА ============================ */
/* ==================================================================== */

/*
   .video-player-by-kojro
   --------------------------------------------------------------------
   Главный контейнер, который оборачивает все элементы плеера.
*/
.video-player-by-kojro {
    position: relative;                                /* Устанавливает контекст позиционирования для дочерних элементов (оверлея, заголовка, кнопки). */
    width: 100%;                                       /* Занимает всю доступную ширину родительского элемента. */
    max-width: 800px;                                  /* Ограничивает максимальную ширину, чтобы плеер не был слишком большим на широких экранах. */
    margin: 40px auto;                                 /* Устанавливает отступы 40px сверху/снизу и автоматически центрирует плеер по горизонтали. */
    overflow: hidden;                                  /* Скрывает любые дочерние элементы, выходящие за его границы (важно для скругленных углов). */
    border-radius: 10px;                               /* Закругляет углы контейнера плеера на 10 пикселей. */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);        /* Добавляет мягкую тень для придания объема (смещение по Y 10px, размытие 30px, цвет черный с 10% прозрачностью). */
}

/*
   .video-player-by-kojro video
   --------------------------------------------------------------------
   Стили для самого HTML-тега <video>.
*/
.video-player-by-kojro video {
    width: 100%;                                       /* Растягивает видео на всю ширину контейнера плеера, обеспечивая адаптивность. */
    display: block;                                    /* Убирает небольшой отступ снизу, который браузеры по умолчанию добавляют к inline-элементам. */
}

/*
   .video-player-by-kojro .video-overlay
   --------------------------------------------------------------------
   Полупрозрачный слой поверх видео, на котором находятся кнопка Play и заголовок.
*/
.video-player-by-kojro .video-overlay {
    position: absolute;                                /* Позиционирует оверлей абсолютно относительно родителя (.video-player-by-kojro). */
    top: 0;                                            /* Прижимает оверлей к верхнему краю родителя. */
    left: 0;                                           /* Прижимает оверлей к левому краю родителя. */
    width: 100%;                                       /* Растягивает оверлей на всю ширину родителя. */
    height: 100%;                                      /* Растягивает оверлей на всю высоту родителя. */
    background: linear-gradient(180deg, rgba(0,0,0,0.0) 0%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0.7) 100%); /* Создает градиент для лучшей читаемости заголовка: от прозрачного сверху до темного снизу. */
    display: flex;                                     /* Включает Flexbox для удобного выравнивания дочерних элементов. */
    justify-content: center;                           /* Центрирует дочерние элементы (кнопку Play) по горизонтали. */
    align-items: center;                               /* Центрирует дочерние элементы (кнопку Play) по вертикали. */
    padding: 20px;                                     /* Добавляет внутренние отступы, чтобы контент не прилипал к краям. */
    box-sizing: border-box;                            /* Гарантирует, что padding не увеличивает общую ширину и высоту элемента. */
    pointer-events: none;                              /* Делает оверлей "прозрачным" для кликов мыши, чтобы можно было нажать на видео под ним. */
    opacity: 1;                                        /* Изначально оверлей полностью видим (непрозрачен). */
    transition: opacity 0.4s ease;                     /* Добавляет плавный переход для свойства opacity в течение 0.4 секунды. */
}

/*
   .video-player-by-kojro .video-title
   --------------------------------------------------------------------
   Стили для заголовка видео.
*/
.video-player-by-kojro .video-title {
    position: absolute;                                /* Позиционирует заголовок абсолютно относительно родителя. */
    bottom: 40px;                                      /* Размещает заголовок на 40px выше нижнего края плеера. */
    left: 50%;                                         /* Сдвигает левый край заголовка к центру родителя. */
    background: rgba(255, 255, 255, 0.15);             /* Полупрозрачный белый фон (15% непрозрачности) для эффекта "стекла". */
    color: #ffffff;                                    /* Устанавливает цвет текста на белый. */
    padding: 12px 20px;                                /* Внутренние отступы: 12px сверху/снизу, 20px слева/справа. */
    border-radius: 8px;                                /* Закругляет углы фона заголовка. */
    text-shadow: 0 1px 5px rgba(0,0,0,0.5);            /* Добавляет тень к тексту для улучшения читаемости на светлом фоне. */
    -webkit-backdrop-filter: blur(10px);               /* Применяет эффект размытия фона за заголовком (для Safari). */
    backdrop-filter: blur(10px);                       /* Стандартное свойство для эффекта размытия фона ("матовое стекло"). */
    border: 1px solid rgba(255, 255, 255, 0.2);        /* Добавляет тонкую светлую рамку для подчеркивания эффекта стекла. */
    transform: translateX(-50%) scale(1);              /* Сдвигает заголовок влево на 50% его СОБСТВЕННОЙ ширины для идеального центрирования и задает начальный масштаб. */
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); /* Добавляет плавную анимацию для всех изменяемых свойств. */
    text-align: center;                                /* Выравнивает текст внутри заголовка по центру. */
    max-width: 99%;                                    /* Ограничивает ширину, чтобы заголовок не касался краев плеера и мог переноситься на новую строку. */
}

/*
   .video-player-by-kojro .play-button
   --------------------------------------------------------------------
   Стили для круглой кнопки "Play".
*/
.video-player-by-kojro .play-button {
    width: 70px;                                       /* Устанавливает ширину кнопки. */
    height: 70px;                                      /* Устанавливает высоту кнопки. */
    background: rgba(220, 38, 38, 0.8);                /* Красный полупрозрачный фон (80% непрозрачности). */
    border-radius: 50%;                                /* Делает элемент идеально круглым. */
    box-shadow: 0 4px 20px rgba(220, 38, 38, 0.3);      /* Добавляет тень под кнопкой для объема. */
    transform: scale(1);                               /* Устанавливает исходный масштаб кнопки (100%). */
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); /* Добавляет плавную анимацию для всех свойств. */
    display: flex;                                     /* Включает Flexbox для центрирования иконки-треугольника. */
    justify-content: center;                           /* Центрирует треугольник по горизонтали. */
    align-items: center;                               /* Центрирует треугольник по вертикали. */
}

/*
   .video-player-by-kojro .play-button::after
   --------------------------------------------------------------------
   Псевдоэлемент, который создает иконку-треугольник внутри кнопки "Play".
*/
.video-player-by-kojro .play-button::after {
    content: '';                                       /* Обязательное свойство для создания псевдоэлемента. */
    display: block;                                    /* Делает псевдоэлемент блочным, чтобы можно было задать размеры. */
    width: 0;                                          /* Ширина самого элемента равна нулю. */
    height: 0;                                         /* Высота самого элемента равна нулю. */
    border-style: solid;                               /* Устанавливает сплошной стиль для границ. */
    border-width: 12px 0 12px 20px;                    /* Создает треугольник: 12px верхняя и нижняя границы, 0 правая, 20px левая. */
    border-color: transparent transparent transparent #ffffff; /* Делает все границы прозрачными, кроме левой (белой), формируя видимый треугольник. */
    margin-left: 5px;                                  /* Небольшой сдвиг вправо для визуального центрирования треугольника в круге. */
}

/*
   :hover состояния для плеера
   --------------------------------------------------------------------
   Стили, которые применяются при наведении курсора на плеер.
*/
.video-player-by-kojro:hover .play-button {
    transform: scale(1.15);                            /* Увеличивает кнопку "Play" на 15% при наведении. */
    background: rgba(239, 68, 68, 0.95);               /* Делает фон кнопки ярче и менее прозрачным. */
}

.video-player-by-kojro:hover .video-title {
    transform: translateX(-50%) scale(1.05) translateY(-10px); /* Увеличивает заголовок на 5% и приподнимает его на 10px. */
    background: rgba(255, 255, 255, 0.25);             /* Делает фон заголовка немного светлее. */
}

/*
   .is-playing состояние
   --------------------------------------------------------------------
   Стиль для оверлея, когда видео воспроизводится (класс добавляется через JS).
*/
.video-player-by-kojro.is-playing .video-overlay {
    opacity: 0;                                        /* Делает оверлей полностью прозрачным (невидимым), когда видео проигрывается. */
}

/* ==================================================================== */
/* === КОНЕЦ: ОСНОВНЫЕ СТИЛИ ВИДЕОПЛЕЕРА ============================== */
/* ==================================================================== */


/* ==================================================================== */
/* === НАЧАЛО: СТИЛИ КНОПКИ "ПОДПИСАТЬСЯ" (СИНИЙ ДИЗАЙН) ============== */
/* ==================================================================== */
.subscribe-button-kojro {
    position: absolute;                                /* Позиционирует кнопку абсолютно относительно родителя (.video-player-by-kojro). */
    top: 20px;                                         /* Отступ 20px от верхнего края плеера. */
    right: 20px;                                       /* Отступ 20px от правого края плеера. */
    z-index: 10;                                       /* Устанавливает слой выше других элементов. */
    display: flex;                                     /* Включает Flexbox для выравнивания иконки и текста в одну строку. */
    align-items: center;                               /* Выравнивает иконку и текст по вертикали. */
    
    /* 🔥 ИСПРАВЛЕНО: Фон заменен на синий градиент в стиле Telegram для эффекта цветного стекла. */
    background: linear-gradient(135deg, rgba(0, 136, 204, 0.25), rgba(0, 136, 204, 0.15));
    -webkit-backdrop-filter: blur(12px);               /* Применяет эффект размытия фона за кнопкой (для Safari). */
    backdrop-filter: blur(12px);                       /* Стандартное свойство для эффекта "матового стекла". */
    
    color: #ffffff;                                    /* Устанавливает белый цвет текста. */
    font-size: 14px;                                   /* Устанавливает размер шрифта. */
    font-weight: 500;                                  /* Устанавливает среднюю жирность шрифта. */
    text-decoration: none;                             /* Убирает подчеркивание у ссылки. */
    padding: 8px 16px;                                 /* Внутренние отступы: 8px сверху/снизу, 16px слева/справа. */
    border-radius: 5px;                                /* Скругляет углы кнопки. */
    
    /* 🔥 ИСПРАВЛЕНО: Рамка и тень также используют синий оттенок для целостности стиля. */
    border: 1px solid rgba(0, 136, 204, 0.4);          /* Добавляет тонкую синюю рамку. */
    box-shadow: 0 8px 32px 0 rgba(0, 136, 204, 0.2);   /* Добавляет мягкую синюю тень для объема. */
    
    transition: all 0.3s ease;                         /* Добавляет плавную анимацию для всех изменяемых свойств. */
    pointer-events: auto;                              /* Явно указывает, что на кнопку можно нажимать. */
}

/*
   Стили для иконки Telegram внутри кнопки
*/
.subscribe-button-kojro .video-telegram-icon {
    width: 20px;                                       /* Устанавливает ширину иконки. */
    height: 20px;                                      /* Устанавливает высоту иконки. */
    margin-right: 8px;                                 /* Добавляет отступ справа от иконки, чтобы отделить ее от текста. */
    transition: transform 0.3s ease;                   /* Добавляет плавную анимацию для свойства transform. */
}

/*
   :hover состояние для кнопки "Подписаться"
*/
.subscribe-button-kojro:hover {
    /* 🔥 ИСПРАВЛЕНО: Фон становится чуть "плотнее" и ярче, сохраняя синий оттенок. */
    background: linear-gradient(135deg, rgba(0, 136, 204, 0.35), rgba(0, 136, 204, 0.25));
    /* 🔥 ИСПРАВЛЕНО: Рамка становится ярче (белая для контраста). */
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-3px);                       /* Слегка приподнимает кнопку на 3px вверх. */
}
/* ==================================================================== */
/* === КОНЕЦ: СТИЛИ КНОПКИ "ПОДПИСАТЬСЯ" =============================== */
/* ==================================================================== */


/* ==================================================================== */
/* === НАЧАЛО: АНИМАЦИЯ ДЛЯ КНОПКИ (СИНЯЯ ВЕРСИЯ) ====================== */
/* ==================================================================== */
/*
   Псевдоэлемент для создания анимированной "волны"
*/
.subscribe-button-kojro::before {
    content: '';                                       /* Обязательное свойство для создания псевдоэлемента. */
    position: absolute;                                /* Позиционирует псевдоэлемент абсолютно относительно кнопки. */
    z-index: -1;                                       /* Размещает псевдоэлемент ПОД основным контентом кнопки. */
    top: -1px;                                         /* Сдвигает вверх на 1px, чтобы компенсировать рамку. */
    left: -1px;                                        /* Сдвигает влево на 1px, чтобы компенсировать рамку. */
    width: calc(100% + 2px);                           /* Делает ширину на 2px больше, чтобы анимация выходила за рамку. */
    height: calc(100% + 2px);                          /* Делает высоту на 2px больше. */
    border-radius: 5px;                                /* Скругляет углы волны так же, как у кнопки. */
    /* 🔥 ИСПРАВЛЕНО: Применяется новая анимация с синей волной. */
    animation: pulse-wave-blue 3s infinite ease-out;
}

/*
   🔥 ИСПРАВЛЕНО: Описание самой анимации 'pulse-wave-blue'
*/
@keyframes pulse-wave-blue {
    0% {                                               /* Начало анимации. */
        transform: scale(0.95);                        /* Элемент немного сжат. */
        box-shadow: 0 0 0 0 rgba(0, 136, 204, 0.5);     /* Тень-обводка синяя и видима. */
    }
    70% {                                              /* 70% времени анимации. */
        transform: scale(1.05);                        /* Элемент немного расширен. */
        box-shadow: 0 0 0 15px rgba(0, 136, 204, 0);    /* Тень-обводка расширилась и стала полностью прозрачной. */
    }
    100% {                                             /* Конец анимации. */
        transform: scale(0.95);                        /* Элемент возвращается в сжатое состояние. */
        box-shadow: 0 0 0 0 rgba(0, 136, 204, 0);       /* Тень остается невидимой, готовясь к новому циклу. */
    }
}
/* ==================================================================== */
/* === КОНЕЦ: АНИМАЦИЯ ДЛЯ КНОПКИ ====================================== */
/* ==================================================================== */


/* ==================================================================== */
/* === НАЧАЛО: АДАПТИВНОСТЬ (МОБИЛЬНЫЕ УСТРОЙСТВА) ===================== */
/* ==================================================================== */
/*
   Медиа-запрос: эти стили применяются только на экранах с шириной 640px или меньше.
*/
@media (max-width: 640px) {
    /*
       Уменьшаем кнопку "Play" для маленьких экранов.
    */
    .video-player-by-kojro .play-button {
        width: 60px;                                   /* Уменьшаем ширину кнопки. */
        height: 60px;                                  /* Уменьшаем высоту кнопки. */
    }
    /*
       Адаптируем заголовок для маленьких экранов.
    */
    .video-player-by-kojro .video-title {
        font-size: 1rem;                               /* Уменьшаем размер шрифта (1rem обычно равен 16px). */
        padding: 8px 15px;                             /* Уменьшаем внутренние отступы. */
        bottom: 20px;                                  /* Поднимаем заголовок чуть выше. */
        white-space: normal;                           /* Разрешает тексту переноситься на новую строку. */
        line-height: 1.4;                              /* Увеличивает межстрочный интервал для лучшей читаемости. */
        text-align: center;                            /* Центрирует текст. */
        width: 90%;                                    /* Ограничивает ширину до 90% от ширины плеера. */
        max-width: none;                               /* Сбрасывает max-width, чтобы свойство width работало корректно. */
    }
    /*
       Адаптируем кнопку "Подписаться" для маленьких экранов.
    */
    .subscribe-button-kojro {
        top: 10px;                                     /* Уменьшаем отступ сверху. */
        right: 10px;                                   /* Уменьшаем отступ справа. */
        padding: 6px 12px;                             /* Уменьшаем внутренние отступы. */
        font-size: 12px;                               /* Уменьшаем размер шрифта. */
    }

    .subscribe-button-kojro .video-telegram-icon {
        width: 16px;                                   /* Уменьшаем размер иконки. */
        height: 16px;                                  /* Уменьшаем размер иконки. */
        margin-right: 6px;                             /* Уменьшаем отступ от текста. */
    }
}
/* ==================================================================== */
/* === КОНЕЦ: АДАПТИВНОСТЬ (МОБИЛЬНЫЕ УСТРОЙСТВА) ======================= */
/* ==================================================================== */
/* ================================================
   1. Сброс отступов и установка box-sizing
   ================================================ */
.kojro-b-articles-recommended,
.kojro-b-articles-recommended * {
  box-sizing: border-box;  /* ширина/высота включают padding и border */
  margin: 0;               /* убираем внешние отступы */
  padding: 0;              /* убираем внутренние отступы */
}

/* ================================================
   2. Заголовок блока <h2> внутри грида
   ================================================ */
.kojro-b-articles-recommended > h2 {
  grid-column: 1 / -1;     /* растянуть от первой до последней колонки */
  font-size: 18px;         /* размер шрифта заголовка */
  font-weight: 700;        /* жирное начертание */
  color: #333;             /* цвет текста */
  margin-bottom: 15px;     /* отступ снизу перед карточками */
}

/* ================================================
   3. Основной контейнер карточек — адаптивный Grid
   ================================================ */
.kojro-b-articles-recommended {
  display: grid;                                            /* включаем grid */
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* создаём адаптивные колонки */
  gap: 20px;                                                /* расстояние между строками и колонками */
  width: 100%;                                              /* ширина контейнера 100% */
  max-width: 1200px;                                        /* ограничиваем максимальную ширину */
  margin: 0 auto;                                           /* центрируем контейнер по горизонтали */
  padding: 20px 10px;                                       /* внутренние отступы по краям */
  font-family: Arial, sans-serif;                           /* задаём шрифты для текста */
}

/* ================================================
   4. Карточка — ссылка и её базовый стиль
   ================================================ */
.kojro-b-articles-recommended__item-link {
  display: flex;                                            /* включаем flex-контейнер */
  flex-direction: column;                                   /* картинка сверху, тело карточки снизу */
  background: #fff;                                         /* белый фон карточки */
  border-radius: 8px;                                       /* скруглённые углы */
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);                   /* лёгкая тень под карточкой */
  overflow: hidden;                                         /* обрезаем выступающие части внутренних элементов */
  text-decoration: none;                                    /* убираем подчёркивание у ссылки */
  color: inherit;                                           /* наследуем цвет текста из родителя */
  height: 100%;                                             /* растягиваемся на всю высоту grid-ячейки */
  position: relative;                                       /* для абсолютного псевдоэлемента эффекта волны */
  transition: transform .3s ease,                           /* плавное изменение трансформации */
              box-shadow .3s ease;                         /* плавное изменение тени */
}
/* Hover-эффект «парения» */
.kojro-b-articles-recommended__item-link:hover {
  transform: translateY(-5px);                              /* поднимаем карточку вверх */
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);                  /* усиливаем тень при hover */
}

/* ================================================
   5. Эффект «волны» при наведении
   ================================================ */
.kojro-b-articles-recommended__item-link {
  position: relative;                                       /* дублируем для уверенности */
  overflow: hidden;                                         /* обрезаем за границами */
}
.kojro-b-articles-recommended__item-link::after {
  content: '';                                              /* создаём пустой псевдоэлемент */
  position: absolute;                                       /* позиционируем поверх карточки */
  inset: 0;                                                 /* растягиваем на всю область */
  pointer-events: none;                                     /* не мешаем кликам */
  opacity: 0;                                               /* по умолчанию невидим */
  transition: opacity 0.3s;                                 /* плавное появление/исчезновение */
  background: radial-gradient(                              /* градиент для волны */
    circle at 50% 50%,
    rgba(255,255,255,0.8) 0%,
    rgba(255,255,255,0.5) 70%,
    rgba(255,255,255,0) 100%
  );
}
.kojro-b-articles-recommended__item-link:hover::after {
  opacity: 1;                                               /* волна становится видимой */
  animation: kojro-wave 0.6s ease-out forwards;             /* проигрываем анимацию волны */
}
@keyframes kojro-wave {
  0%   { transform: scale(0.7); opacity: 0.5; }             /* стартовый размер и прозрачность */
  60%  { transform: scale(1.2); opacity: 0.8; }             /* разворот и максимум видимости */
  100% { transform: scale(1.6); opacity: 0.1; }             /* размытая финальная фаза */
}

/* ================================================
   6. Обёртка для картинки — поддерживаем соотношение 16:9
   ================================================ */
.kojro-b-articles-recommended__item-img-wrapper {
  width: 100%;                                              /* ширина на 100% контейнера */
  height: 0;                                                /* обнуляем высоту для расчёта через padding */
  padding-top: 56.25%;                                      /* соотношение 16:9: (9/16)*100% */
  position: relative;                                       /* для абсолютного позиционирования img */
  overflow: hidden;                                         /* обрезаем выступающие части картинки */
}
.kojro-b-articles-recommended__item-img {
  position: absolute;                                       /* позиционируем внутри обёртки */
  top: 0;                                                   /* привязываем к верхнему краю */
  left: 0;                                                  /* привязываем к левому краю */
  width: 100%;                                              /* растягиваем по ширине */
  height: 100%;                                             /* растягиваем по высоте */
  object-fit: cover;                                        /* обрезаем/масштабируем картинку по пропорциям */
  transition: transform .3s ease;                           /* плавное увеличение при hover */
}
/* Лёгкое увеличение картинки при hover */
.kojro-b-articles-recommended__item-link:hover
  .kojro-b-articles-recommended__item-img {
  transform: scale(1.03);                                   /* чуть увеличиваем картинку */
}

/* ================================================
   7. Блок с текстом внутри карточки — flex для равной высоты
   ================================================ */
.kojro-b-articles-recommended__item-body {
  display: flex;                                            /* включаем flex-контейнер */
  flex-direction: column;                                   /* располагаем элементы по вертикали */
  flex: 1;                                                  /* растягиваем тело, чтобы заполнить пространство */
  padding: 15px;                                            /* внутренние отступы вокруг текста */
}
.kojro-b-articles-recommended__item-body header {
  margin-bottom: 8px;                                       /* отступ между заголовком и остальным текстом */
}
.kojro-b-articles-recommended__item-title {
  font-size: 16px;                                          /* размер шрифта заголовка статьи */
  font-weight: 700;                                         /* жирное начертание */
  color: #333;                                              /* цвет текста */
  line-height: 1.3;                                         /* межстрочный интервал */
}
.kojro-b-articles-recommended__item-text {
  font-size: 14px;                                          /* размер шрифта основного текста */
  color: #666;                                              /* цвет текста */
  line-height: 1.5;                                         /* межстрочный интервал */
  margin-top: auto;                                         /* прижимает текст к низу карточки */
}

/* ================================================
   8. Медиа-запрос для очень узких экранов (<480px)
   ================================================ */
@media (max-width: 480px) {
  .kojro-b-articles-recommended {
    padding: 10px;                                          /* уменьшаем внутренние отступы */
    gap: 15px;                                              /* уменьшаем расстояние между элементами */
  }
  .kojro-b-articles-recommended__item-title {
    font-size: 15px;                                        /* уменьшаем размер заголовка */
  }
  .kojro-b-articles-recommended__item-text {
    font-size: 13px;                                        /* уменьшаем размер основного текста */
  }
}


/* Начало кода таблицы */
    /* Стили таблицы */
    .kojro-table-container {
      width: 100%;
      box-sizing: border-box;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      margin-bottom: 20px;
      padding: 0 10px;
    }
    
    .kojro-custom-table {
      width: 100%;
      border-collapse: collapse;
      background-color: #fff;
      border: 1px solid #ddd;
      table-layout: auto;
      margin: 0 auto;
    }
    
    .kojro-custom-table th,
    .kojro-custom-table td {
      padding: 12px;
      text-align: center;
      border: 1px solid #ddd;
      vertical-align: middle;
      word-break: break-word;
    }
    
    /* Фиксируем ширину столбца с цифрами */
    .kojro-custom-table th:first-child,
    .kojro-custom-table td:first-child {
      white-space: nowrap;
      width: 30px;
    }
    
    .kojro-custom-table th {
      background-color: #4CAF50;
      color: #fff;
      font-weight: bold;
    }
    
    .kojro-custom-table tr:nth-child(even) {
      background-color: #f2f2f2;
    }
    
    .kojro-custom-table tr:hover {
      background-color: #e9e9e9;
      transition: background-color 0.2s ease;
    }
    
    /* Рукописный стиль */
    .kojro-custom-table .handwriting {
      font-family: 
        'Segoe Script', 'Brush Script MT',
        'Apple Chancery', cursive;
      font-size: 20px;
      font-weight: 500;
      line-height: 1.3;
      color: #333;
    }
    
    /* Адаптация для мобильных */
    @media (max-width: 600px) {
      .kojro-custom-table th,
      .kojro-custom-table td {
        padding: 8px 6px;
        font-size: 14px;
      }
      
      .kojro-custom-table .handwriting {
        font-size: 16px;
      }
      
      /* Уменьшаем ширину первых двух столбцов */
      .kojro-custom-table th:nth-child(1),
      .kojro-custom-table td:nth-child(1),
      .kojro-custom-table th:nth-child(2),
      .kojro-custom-table td:nth-child(2) {
        width: auto;
        min-width: 30px;
      }
    }

/* Конец код таблицы*/
.responsive-image {
width: 100%; /* Изображение занимает 100% ширины родительского контейнера */
height: auto; /* Высота автоматически подстраивается под ширину */
}


body {
    margin: 0; /* Убираем отступы */
    font-family: Arial, sans-serif; /* Основной шрифт */
	-ms-user-select: none; 
	-moz-user-select: none; 
	-webkit-user-select: none; 
	user-select: none; 
}

.container {
    width: 100%; /* Ширина контейнера */
    max-width: 1400px; /* Максимальная ширина */
    margin: 0 auto; /* Центрируем контейнер */
    padding: 0 15px; /* Добавляем внутренние отступы */
}

header {
    position: relative;
    background: linear-gradient(to bottom, rgba(120, 120, 120, 0.8), rgba(51, 51, 51, 0.8));
    color: #fff;
    padding: 20px 0; /* Отступы для регулировки высоты */
    height: 150px; /* Фиксированная высота хедера */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.9);
    border-bottom: 1px solid #444;
}

header nav {
    margin-top: 10px; /* Отступ сверху для меню */
}

header nav a {
    color: #fff; /* Белый цвет ссылок */
    text-decoration: none; /* Убираем подчеркивание */
    margin-right: 10px; /* Расстояние между ссылками */
}

main {
    display: flex; /* Используем flexbox для колонок */
    flex-wrap: wrap; /* Позволяем колонкам переноситься */
    margin: 20px 0; /* Отступ сверху и снизу */
}

main .left, main .right {
    width: 24%; /* Левая и правая колонка занимают 25% ширины */
    padding: 10px; /* Внутренние отступы */
    box-sizing: border-box; /* Учитываем padding в ширине */
}

main .center {
    width: 52%; /* Центральная колонка занимает 50% */
    padding: 10px;
    box-sizing: border-box;
}

footer {
    background: #333; /* Темный фон футера */
    color: #fff; /* Белый текст */
    text-align: center; /* Центрируем текст */
    padding: 20px 0; /* Отступы сверху и снизу */
}

/* Адаптивность */
@media (max-width: 768px) { /* Для экранов шириной 768px и меньше */
    main .left, main .right {
        width: 100%; /* Левая и правая колонка занимают 100% */
    }

    main .center {
        width: 100%; /* Центральная колонка занимает 100% */
    }
}

/* Основной стиль кнопки Telegram */
.telegram-button {
    background: #0088cc; /* Синий фон кнопки */
    border: 3px solid #007bb8; /* Синяя рамка толщиной 3px */
    border-radius: 50%; /* Кнопка делает круглой за счёт закругления углов */
    box-shadow: 0 8px 10px rgba(0, 136, 204, 0.6); /* Тень для кнопки */
    cursor: pointer; /* Изменение курсора на указатель при наведении */
    height: 68px; /* Высота кнопки */
    text-align: center; /* Текст (или иконка) центрируется по горизонтали */
    width: 68px; /* Ширина кнопки */
    position: fixed; /* Кнопка фиксирована и остаётся на одном месте при скролле */
    right: 3%; /* Расстояние от правого края экрана */
    bottom: 18%; /* Расстояние от нижнего края экрана */
    padding: 0px !important; /* Убирается любое внутреннее отступление */
    z-index: 9999; /* Кнопка находится поверх других элементов */
    transition: 0.3s; /* Плавный переход для всех изменений */
    -webkit-animation: hoverWaveTelegram linear 2s infinite; /* Анимация "волны" для браузеров на базе WebKit */
    animation: hoverWaveTelegram linear 2s infinite; /* Анимация "волны" для кнопки Telegram */
}

.telegram-icon {
    position: absolute; /* Абсолютное позиционирование */
    top: 1%; /* Центрирование по вертикали */
    left: 16%; /* Центрирование по горизонтали */
    transform: translate(-50%, -50%); /* Сдвигаем элемент на 50% своих размеров */
    width: 90%; /* Ширина будет 90% от ширины родительского элемента */
    max-width: 42px; /* Максимальная ширина 42px */
    height: 90%; /* Высота автоматически подстраивается под пропорции */
    color: #fff; /* Белый цвет иконки */
    line-height: 68px; /* Высота строки для выравнивания иконки по вертикали */
    transition: 0.5s ease-in-out; /* Плавный эффект на изменения */
    animation: shake 1200ms ease 0s infinite; /* Анимация "тряски" */
    -webkit-animation: shake 1200ms ease 0s infinite; /* Анимация "тряски" для WebKit */
}

/* Внутренний контейнер кнопки */
.telegram-button .text-button {
    height: 68px; /* Высота внутреннего контейнера */
    width: 68px; /* Ширина внутреннего контейнера */
    border-radius: 50%; /* Круглая форма */
    position: relative; /* Для задания позиции дочерних элементов */
    overflow: hidden; /* Скрывает всё, что выходит за границы контейнера */
}

/* Стиль текста внутри кнопки (скрыт по умолчанию) */
.telegram-button .text-button span {
    text-align: center; /* Центровка текста */
    color: #00bfff; /* Цвет текста (светло-синий) */
    opacity: 0; /* Текст невидим */
    font-size: 0; /* Размер текста 0 (скрытие) */
    position: absolute; /* Позиционирование текста относительно контейнера */
    right: 13px; /* Сдвиг текста от правого края */
    top: 27px; /* Сдвиг текста от верхнего края */
    line-height: 14px; /* Высота строки текста */
    font-weight: 600; /* Полужирное начертание текста */
    transition: opacity 0.3s linear; /* Плавное появление текста (прозрачность) */
    font-family: 'Montserrat', Arial, Helvetica, sans-serif; /* Шрифт текста */
}

/* Появление текста при наведении */
.telegram-button .text-button:hover span {
    opacity: 1; /* Текст становится видимым */
    font-size: 11px; /* Размер текста увеличивается */
}

/* Скрытие иконки при наведении */
.telegram-button:hover .telegram-icon {
    display: none; /* Иконка исчезает */
    color: #0088cc; /* Цвет иконки */
    font-size: 44px; /* Размер иконки */
    transition: 0.3s; /* Плавное исчезновение */
}

/* Изменения самой кнопки при наведении */
.telegram-button:hover {
    z-index: 1; /* Кнопка поднимается на передний план */
    background: #fff; /* Фон кнопки меняется на белый */
    color: transparent; /* Цвет текста становится прозрачным */
    transition: 0.3s; /* Плавные изменения */
}

/* Анимация "эффект волны" при наведении Telegram */
@-webkit-keyframes hoverWaveTelegram {
    0% {
        box-shadow: 0 8px 10px rgba(0, 136, 204, 0.3), 0 0 0 0 rgba(0, 136, 204, 0.2), 0 0 0 0 rgba(0, 136, 204, 0.2);
    }
    40% {
        box-shadow: 0 8px 10px rgba(0, 136, 204, 0.3), 0 0 0 15px rgba(0, 136, 204, 0.2), 0 0 0 0 rgba(0, 136, 204, 0.2);
    }
    80% {
        box-shadow: 0 8px 10px rgba(0, 136, 204, 0.3), 0 0 0 30px rgba(0, 136, 204, 0), 0 0 0 26.7px rgba(0, 136, 204, 0.067);
    }
    100% {
        box-shadow: 0 8px 10px rgba(0, 136, 204, 0.3), 0 0 0 30px rgba(0, 136, 204, 0), 0 0 0 40px rgba(0, 136, 204, 0);
    }
}

/* То же самое для всех браузеров */
@keyframes hoverWaveTelegram {
    0% {
        box-shadow: 0 8px 10px rgba(0, 136, 204, 0.3), 0 0 0 0 rgba(0, 136, 204, 0.2), 0 0 0 0 rgba(0, 136, 204, 0.2);
    }
    40% {
        box-shadow: 0 8px 10px rgba(0, 136, 204, 0.3), 0 0 0 15px rgba(0, 136, 204, 0.2), 0 0 0 0 rgba(0, 136, 204, 0.2);
    }
    80% {
        box-shadow: 0 8px 10px rgba(0, 136, 204, 0.3), 0 0 0 30px rgba(0, 136, 204, 0), 0 0 0 26.7px rgba(0, 136, 204, 0.067);
    }
    100% {
        box-shadow: 0 8px 10px rgba(0, 136, 204, 0.3), 0 0 0 30px rgba(0, 136, 204, 0), 0 0 0 40px rgba(0, 136, 204, 0);
    }
}

/* Анимация "тряски" кнопки */
@keyframes shake {
    0% {
        transform: rotateZ(0deg); /* Без вращения */
    }
    10% {
        transform: rotateZ(-30deg); /* Вращение против часовой стрелки */
    }
    20% {
        transform: rotateZ(15deg); /* Вращение по часовой стрелке */
    }
    /* ... */
    100% {
        transform: rotateZ(0deg); /* Возврат в исходное положение */
    }
}

@media (max-width: 800px) {
    .telegram-button {
        bottom: 25px; /* Отступ кнопки снизу от экрана */
        right: 120px; /* Отступ кнопки справа от экрана */
    }
}

/* Основной стиль кнопки WhatsApp */
.whatsapp-button {
    background: #25D366; /* Зеленый фон кнопки */
    border: 3px solid #1cc15a; /* Зелёная рамка толщиной 3px */
    border-radius: 50%; /* Кнопка делает круглой за счёт закругления углов */
    box-shadow: 0 8px 10px rgba(7, 206, 112, 0.6); /* Тень для кнопки */
    cursor: pointer; /* Изменение курсора на указатель при наведении */
    height: 68px; /* Высота кнопки */
    text-align: center; /* Текст (или иконка) центрируется по горизонтали */
    width: 68px; /* Ширина кнопки */
    position: fixed; /* Кнопка фиксирована и остаётся на одном месте при скролле */
    right: 3%; /* Расстояние от правого края экрана */
    bottom: 5%; /* Расстояние от нижнего края экрана */
    padding: 0px !important; /* Убирается любое внутреннее отступление */
    z-index: 9999; /* Кнопка находится поверх других элементов */
    transition: 0.3s; /* Плавный переход для всех изменений */
    -webkit-animation: hoverWaveWhatsApp linear 2s infinite; /* Анимация "волны" для браузеров на базе WebKit */
    animation: hoverWaveWhatsApp linear 2s infinite; /* Анимация "волны" для кнопки WhatsApp */
}

.whatsapp-icon {
    position: absolute; /* Абсолютное позиционирование */
    top: 1%; /* Центрирование по вертикали */
    left: 16%; /* Центрирование по горизонтали */
    transform: translate(-50%, -50%); /* Сдвигаем элемент на 50% своих размеров */
    width: 90%; /* Ширина будет 90% от ширины родительского элемента */
    max-width: 42px; /* Максимальная ширина 42px */
    height: 90%; /* Высота автоматически подстраивается под пропорции */
    color: #fff; /* Белый цвет иконки */
    line-height: 68px; /* Высота строки для выравнивания иконки по вертикали */
    transition: 0.5s ease-in-out; /* Плавный эффект на изменения */
    animation: shake 1200ms ease 0s infinite; /* Анимация "тряски" */
    -webkit-animation: shake 1200ms ease 0s infinite; /* Анимация "тряски" для WebKit */
}

/* Внутренний контейнер кнопки */
.whatsapp-button .text-button {
    height: 68px; /* Высота внутреннего контейнера */
    width: 68px; /* Ширина внутреннего контейнера */
    border-radius: 50%; /* Круглая форма */
    position: relative; /* Для задания позиции дочерних элементов */
    overflow: hidden; /* Скрывает всё, что выходит за границы контейнера */
}

/* Стиль текста внутри кнопки (скрыт по умолчанию) */
.whatsapp-button .text-button span {
    text-align: center; /* Центровка текста */
    color: #23a455; /* Цвет текста (тёмно-зелёный) */
    opacity: 0; /* Текст невидим */
    font-size: 0; /* Размер текста 0 (скрытие) */
    position: absolute; /* Позиционирование текста относительно контейнера */
    right: 10px; /* Сдвиг текста от правого края */
    top: 27px; /* Сдвиг текста от верхнего края */
    line-height: 14px; /* Высота строки текста */
    font-weight: 600; /* Полужирное начертание текста */
    transition: opacity 0.3s linear; /* Плавное появление текста (прозрачность) */
    font-family: 'Montserrat', Arial, Helvetica, sans-serif; /* Шрифт текста */
}

/* Появление текста при наведении */
.whatsapp-button .text-button:hover span {
    opacity: 1; /* Текст становится видимым */
    font-size: 11px; /* Размер текста увеличивается */
}

/* Скрытие иконки при наведении */
.whatsapp-button:hover .whatsapp-icon {
    display: none; /* Иконка исчезает */
    color: #25D366; /* Цвет иконки */
    font-size: 44px; /* Размер иконки */
    transition: 0.3s; /* Плавное исчезновение */
}

/* Изменения самой кнопки при наведении */
.whatsapp-button:hover {
    z-index: 1; /* Кнопка поднимается на передний план */
    background: #fff; /* Фон кнопки меняется на белый */
    color: transparent; /* Цвет текста становится прозрачным */
    transition: 0.3s; /* Плавные изменения */
}

/* Анимация "эффект волны" при наведении WhatsApp */
@-webkit-keyframes hoverWaveWhatsApp {
    0% {
        box-shadow: 0 8px 10px rgba(7, 206, 112, 0.3), 0 0 0 0 rgba(7, 206, 112, 0.2), 0 0 0 0 rgba(7, 206, 112, 0.2);
    }
    40% {
        box-shadow: 0 8px 10px rgba(7, 206, 112, 0.3), 0 0 0 15px rgba(7, 206, 112, 0.2), 0 0 0 0 rgba(7, 206, 112, 0.2);
    }
    80% {
        box-shadow: 0 8px 10px rgba(7, 206, 112, 0.3), 0 0 0 30px rgba(7, 206, 112, 0), 0 0 0 26.7px rgba(7, 206, 112, 0.067);
    }
    100% {
        box-shadow: 0 8px 10px rgba(7, 206, 112, 0.3), 0 0 0 30px rgba(7, 206, 112, 0), 0 0 0 40px rgba(7, 206, 112, 0);
    }
}

/* То же самое для всех браузеров */
@keyframes hoverWaveWhatsApp {
    0% {
        box-shadow: 0 8px 10px rgba(7, 206, 112, 0.3), 0 0 0 0 rgba(7, 206, 112, 0.2), 0 0 0 0 rgba(7, 206, 112, 0.2);
    }
    40% {
        box-shadow: 0 8px 10px rgba(7, 206, 112, 0.3), 0 0 0 15px rgba(7, 206, 112, 0.2), 0 0 0 0 rgba(7, 206, 112, 0.2);
    }
    80% {
        box-shadow: 0 8px 10px rgba(7, 206, 112, 0.3), 0 0 0 30px rgba(7, 206, 112, 0), 0 0 0 26.7px rgba(7, 206, 112, 0.067);
    }
    100% {
        box-shadow: 0 8px 10px rgba(7, 206, 112, 0.3), 0 0 0 30px rgba(7, 206, 112, 0), 0 0 0 40px rgba(7, 206, 112, 0);
    }
}

/* Анимация "тряски" кнопки */
@keyframes shake {
    0% {
        transform: rotateZ(0deg); /* Без вращения */
    }
    10% {
        transform: rotateZ(-30deg); /* Вращение против часовой стрелки */
    }
    20% {
        transform: rotateZ(15deg); /* Вращение по часовой стрелке */
    }
    /* ... */
    100% {
        transform: rotateZ(0deg); /* Возврат в исходное положение */
    }
}

@media (max-width: 800px) {
    .whatsapp-button {
        bottom: 25px; /* Отступ кнопки снизу от экрана */
        right: 30px; /* Отступ кнопки справа от экрана */
    }
}