@charset "UTF-8";/*====================*/
/*  Helpers           */
/*====================*/
/* spacers */
[class*=spacer] {clear: both;width: 100%;}
.spacer-xxl {height: var(--sp-xxl);}
.spacer-xl {height: var(--sp-xl);}
.spacer-lg {height: var(--sp-lg);}
.spacer-md {height: var(--sp-md);}
.spacer-sm {height: var(--sp-sm);}
.spacer-xs {height: var(--sp-xs);}
/* margins */
.mt-xxl {margin-top: var(--sp-xxl);}
.mt-xl {margin-top: var(--sp-xl);}
.mt-lg {margin-top: var(--sp-lg);}
.mt-md {margin-top: var(--sp-md);}
.mt-sm {margin-top: var(--sp-sm);}
.mt-xs {margin-top: var(--sp-xs);}
.mb-xxl {margin-bottom: var(--sp-xxl);}
.mb-xl {margin-bottom: var(--sp-xl);}
.mb-lg {margin-bottom: var(--sp-lg);}
.mb-md {margin-bottom: var(--sp-md);}
.mb-sm {margin-bottom: var(--sp-sm);}
.mb-xs {margin-bottom: var(--sp-xs);}
.mx-auto {margin-inline: auto;}
/* colors */
.clr-white {color: var(--clr-white) !important;}
.clr-black {color: var(--clr-black) !important;}
.clr-primary {color: var(--clr-primary) !important;}
.clr-secondary {color: var(--clr-secondary) !important;}
.clr-title {color: var(--clr-title) !important;}
.clr-red {color: var(--clr-red) !important;}
/*====================*/
/*  Banner            */
/*====================*/
.banner-section {margin-top: 0;}
.banner {position: relative;margin-top: calc(-1 * var(--h-height));}
.banner-media {position: absolute;overflow: hidden;z-index: 1;inset: 0;}
.banner-media img,
.banner-media video {z-index: 0;position: absolute;left: 0;top: 0;width: 100%;height: 100%;-o-object-fit: cover;object-fit: cover;content-visibility: auto;}
.video {position: absolute;z-index: 1;inset: 0;width: 100%;height: 100%;clip: rect(auto, auto, auto, auto);}
.video video {position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);width: 100%;height: 100%;will-change: transform;}
.banner-align {position: relative;z-index: 1;display: table-cell;vertical-align: middle;width: 625rem;height: auto;}
.banner-align.align-bottom {vertical-align: bottom;}
.banner-align.align-top {vertical-align: top;}
@media (min-width: 768px) {
.banner {--clr-title: #fff;--clr-text: rgba(255, 255, 255, .9);}
.banner-media::before {content: "";position: absolute;z-index: 2;inset: 0;background: linear-gradient(90deg, rgba(0, 0, 0, 0.68) 0%, rgba(0, 0, 0, 0) 100%);}
.banner-align {padding-block: calc(var(--h-height) + var(--sp-xs)) var(--sp-lg);height: 100svh;}
.banner-info > * + * {margin-top: 1.25rem;}
.banner-info > * + .btn {margin-top: var(--sp-sm);}
}
@media (max-width: 767px) {
.banner-media {position: relative;padding-top: 110%;}
.banner-info > * {margin-top: 1.25rem;}
}
.banner-section {opacity: 1;}
/*====================*/
/*  Breadcrumbs       */
/*====================*/
.breadcrumbs {--br-fz: 0.75rem;--br-space: 0.75rem;width: 100%;margin-block: 0.75rem clamp(1.25rem, -0.2237rem + 3.0702vw, 3rem);overflow-y: hidden;overflow-x: auto;scroll-snap-type: x mandatory;}
.breadcrumbs::-webkit-scrollbar {display: none;}
.breadcrumbs ul {min-width: -moz-max-content;min-width: max-content;line-height: 0;padding-right: var(--br-space);}
.breadcrumbs li {position: relative;display: inline-block;font-size: var(--br-fz);line-height: 1.4em;font-weight: 400;color: var(--clr-text);scroll-snap-align: start;scroll-margin-left: var(--br-space);}
.breadcrumbs li:after {content: "•";position: relative;display: inline-block;margin: 0 0.125rem;font-size: inherit;font-weight: inherit;color: inherit;}
.breadcrumbs li:last-child:after {content: none;}
/*.breadcrumbs li.active {color: var(--clr-secondary);}*/
@media (min-width: 1200px) {
.breadcrumbs li a:hover {color: var(--clr-secondary);}
}
.breadcrumbs {opacity: 1;}
/*====================*/
/*  Seo Block         */
/*====================*/
.seo-section {background-color: var(--bg-dark);}
.seo-block {--clr-title: #FFF;--clr-text: rgba(255, 255, 255, 0.75);--space: 1rem;--inActive-height: 52px;position: relative;padding-block: var(--sp-sm);}
.seo-block::before {content: "";position: absolute;bottom: 0;left: 0;width: 100%;height: 0.3125rem;background-image: url(../img/footer-line.svg);background-position: center;background-repeat: no-repeat;background-size: cover;}
.seo-block > * + * {margin-top: var(--space);}
.seo-content {--inActive-height: calc(1.4em * 2);height: var(--inActive-height);min-height: var(--inActive-height);overflow: hidden;text-overflow: ellipsis;}
.seo-btn::before {content: attr(data-toggle-more);}
.seo-btn .btn-link-icon {color: #0A2F45;}
.seo-btn .btn-link-icon svg {transition: var(--transition-1);}
.seo-btn.is-active::before {content: attr(data-toggle-less);}
.seo-btn.is-active .btn-link-icon svg {transform: translate(-50%, -50%) scaleY(-1);}
/*====================*/
/*  Advantages        */
/*====================*/
.advt-item {--pd-inline: 1rem;--pd-block: 1.25rem;position: relative;width: 100%;gap: var(--pd-block);display: grid;grid-row: span 3;grid-template-rows: subgrid;border-radius: 2.125rem;background-color: var(--clr-white);text-align: center;padding-block: var(--pd-block);padding-inline: var(--pd-inline);}
.advt-link {display: contents;color: inherit;text-decoration: none;}
.advt-img {position: relative;overflow: hidden;display: block;width: 100%;aspect-ratio: 349/236;border-radius: 1.5rem;}
.advt-img img {position: absolute;left: 0;top: 0;width: 100%;height: 100%;-o-object-fit: cover;object-fit: cover;content-visibility: auto;border-radius: 1.5rem;}
.advt-slider .swiper-wrapper {gap: 0;display: grid;grid-auto-flow: column;}
.advt-slider .swiper-slide {display: grid;}
@media (min-width: 1200px) {
.advt-item {--pd-inline: 1.75rem;--pd-block: 2rem;}
}
/*====================*/
/*  LR Block          */
/*====================*/
.lr-block {--br: 1.5rem;gap: 1.25rem;display: grid;}
.lr-img {position: relative;overflow: hidden;display: block;width: 100%;aspect-ratio: 830/750;border-radius: var(--br);background-color: var(--clr-white);}
.lr-img img {position: absolute;left: 0;top: 0;width: 100%;height: 100%;-o-object-fit: cover;object-fit: cover;content-visibility: auto;border-radius: var(--br);}
.lr-content {position: relative;gap: 1.25rem;display: flex;flex-direction: column;justify-content: center;border-radius: var(--br);background-color: #E8F1FB;padding-inline: 1rem;padding-block: 1.25rem;}
.lr-content .input {background-color: var(--bg-light);border-color: var(--bg-light);}
.lr-content .form-block {margin-top: auto;}
.lr-content .form-block > * + .ch-box-wrap,
.lr-content .form-block > * + .form-informer {margin-top: 1.25rem;}
.lr-content .form-block > * + .btn {margin-top: 0.5rem;}
.lr-line {position: relative;display: block;width: 100%;height: 0.3125rem;background-repeat: no-repeat;background-size: cover;background-position: center;background-image: url(../img/lr-line-dark.svg);}
.lr-info {gap: var(--sp-sm);display: flex;flex-direction: column;}
.lr-info .btn {align-self: flex-start;}
@media (min-width: 992px) {
.lr-block {--br: 2.125rem;grid-template-columns: repeat(2, 1fr);}
.lr-img {height: 100%;}
.lr-content {padding-inline: var(--sp-md);padding-block: var(--sp-md);}
.lr-content > * + .lr-line {margin-top: var(--sp-xs);}
.lr-right .lr-img {order: 2;}
}
@media (min-width: 1200px) {
.lr-content {gap: var(--sp-sm);}
.lr-info {align-items: center;flex-direction: row;justify-content: space-between;margin-top: auto;}
}
/*====================*/
/*  Exercises         */
/*====================*/
.exr-wrap {--items: 1;--gap: 1.25rem;gap: var(--gap);display: grid;grid-template-columns: repeat(var(--items), 1fr);}
.exr-card {--pd-inline: 1rem;--pd-block: 1.25rem;--clr-title: #0A2F45;--clr-text: rgba(10, 47, 69, 0.8);position: relative;width: 100%;gap: var(--pd-block);display: grid;grid-row: span 3;grid-template-rows: subgrid;border-radius: 1.5rem;background-color: var(--clr-white);text-align: center;padding-block: var(--pd-block);padding-inline: var(--pd-inline);}
.exr-img {position: relative;overflow: hidden;display: block;width: 100%;aspect-ratio: 318/230;border-radius: 1.5rem;border: 0.1875rem solid rgba(157, 198, 47, 0.4);}
.exr-img img {position: absolute;left: 0;top: 0;width: 100%;height: 100%;-o-object-fit: cover;object-fit: cover;content-visibility: auto;border-radius: 1.5rem;}
@media (min-width: 576px) {
.exr-wrap {--items: 2;}
}
@media (min-width: 1200px) {
.exr-wrap {--items: 4;}
.exr-card {--pd-inline: 2rem;--pd-block: 2rem;border-radius: 2.125rem;}
}
/*====================*/
/*  Chapters          */
/*====================*/
.chp-wrap {--items: 2;--gap: var(--sp-sm);gap: 1rem var(--gap);display: flex;flex-wrap: wrap;}
.chp-wrap + * {margin-top: var(--sp-sm);}
.chp-card {position: relative;width: calc(100% / var(--items) - var(--gap) + var(--gap) / var(--items));gap: 1rem;display: flex;flex-direction: column;align-items: center;border-radius: 1.5rem;background-color: var(--clr-white);text-align: center;padding: 1rem;}
.chp-img {position: relative;overflow: hidden;display: block;width: 4.375rem;aspect-ratio: 70/74;}
.chp-img img {position: absolute;left: 0;top: 0;width: 100%;height: 100%;-o-object-fit: cover;object-fit: cover;content-visibility: auto;}
.chp-title {font-family: var(--ff-semibold);font-size: var(--text-xl);line-height: 1.14em;color: var(--clr-title);}
.chp-info {gap: 1.25rem;display: inline-flex;flex-direction: column;}
.chp-info .btn {align-self: flex-start;}
@media (min-width: 992px) {
.chp-wrap {--items: 3;}
.chp-card {flex-direction: row;text-align: left;padding: 0.5rem 1rem;}
.chp-info {flex-direction: row;align-items: center;}
}
@media (min-width: 1200px) {
.chp-card:hover {background-color: var(--clr-primary);}
}
/*====================*/
/*  RL Block          */
/*====================*/
.rl-block {gap: var(--sp-block);display: grid;}
.rl-img {position: relative;overflow: hidden;display: block;width: 100%;aspect-ratio: 830/750;border-radius: 1.5rem;}
.rl-img img {position: absolute;left: 0;top: 0;width: 100%;height: 100%;-o-object-fit: cover;object-fit: cover;content-visibility: auto;}
.rl-content {align-self: center;}
.rl-content > * + * {margin-top: var(--sp-sm);}
.rl-icon {display: none;}
@media (min-width: 992px) {
.rl-block {grid-template-columns: repeat(2, 1fr);}
.rl-img {align-self: flex-start;}
.rl-icon {position: relative;overflow: hidden;display: block;width: 29.606%;aspect-ratio: 208/175;}
.rl-icon img {width: 100%;}
.rl-right .rl-img {order: 2;}
}
@media (min-width: 1200px) {
.rl-content {position: relative;padding-left: var(--sp-md);}
.rl-content::before {content: "";position: absolute;top: 0;left: 0;width: 1.25rem;height: 100%;background-repeat: no-repeat;background-size: contain;background-position: center;background-image: url(../img/lr-line-light.svg);}
}
/*====================*/
/*  FAQ Block         */
/*====================*/
.faq-block {position: relative;gap: var(--sp-block);display: grid;}
.faq-info {align-self: flex-start;}
.faq-info > * + * {margin-top: var(--sp-sm);}
@media (min-width: 1200px) {
.faq-block {grid-template-columns: auto 62%;}
}
/*====================*/
/*  CTA Block         */
/*====================*/
.cta-block {position: relative;gap: var(--sp-lg);display: flex;flex-direction: column;justify-content: center;align-items: center;text-align: center;background-color: var(--clr-secondary);border-radius: 2.125rem;padding-block: clamp(3rem, -1.6667rem + 8.6806vw, 8.75rem);padding-inline: 1rem;}
.cta-block .btn-wrap {gap: 0.75rem;flex-direction: column;}
.cta-img {position: relative;overflow: hidden;display: block;width: 65%;aspect-ratio: 271/205;}
.cta-img img {position: absolute;left: 0;top: 0;width: 100%;height: 100%;-o-object-fit: cover;object-fit: cover;content-visibility: auto;}
@media (min-width: 768px) {
.cta-block {padding-inline: clamp(1.5rem, -4.1667rem + 10.7639vw, 8.75rem);}
.cta-block .btn-wrap {flex-direction: row;}
.cta-img {position: absolute;z-index: 0;bottom: 2%;right: 2%;width: 16.525%;}
}
/*====================*/
/*  Tariffs           */
/*====================*/
.tariff-wrap {--items: 1;--gap: 1.25rem;gap: var(--gap);display: grid;grid-template-columns: repeat(var(--items), 1fr);}
.tariff-card {--pd-inline: 1rem;--pd-block: var(--sp-sm);position: relative;width: 100%;gap: clamp(1rem, 0.2632rem + 1.5351vw, 1.875rem);display: grid;grid-row: span 6;grid-template-rows: subgrid;border-radius: 1.5rem;background-color: var(--clr-white);text-align: center;padding-block: var(--pd-block);padding-inline: var(--pd-inline);}
.tariff-top::before {content: "";position: absolute;top: -11.5%;right: 0;width: 28%;aspect-ratio: 190/207;background-repeat: no-repeat;background-size: 100%;background-image: url(../img/front-content/tariff-decor.webp);}
.tariff-img {position: relative;overflow: hidden;display: block;width: 50.043%;aspect-ratio: 295/220;margin-inline: auto;}
.tariff-img img {position: absolute;left: 0;top: 0;width: 100%;height: 100%;-o-object-fit: cover;object-fit: cover;content-visibility: auto;}
.tariff-line {position: relative;display: block;width: 100%;height: 0.3125rem;background-repeat: no-repeat;background-size: cover;background-position: center;background-image: url(../img/tariff-line.svg);}
@media (min-width: 768px) {
.tariff-wrap {--items: 2;}
}
@media (min-width: 1200px) {
.tariff-card {--pd-inline: var(--sp-md);border-radius: 2.125rem;}
.tariff-card > * + .text {margin-top: -1.125rem;}
.tariff-card > * + .btn {margin-top: 0.625rem;}
}
/*====================*/
/*  Units             */
/*====================*/
.unit-wrap > * + * {margin-top: 1.25rem;}
.unit-card {position: relative;gap: 1rem;display: grid;background-color: var(--clr-white);border-radius: 1.5rem;padding-inline: 1rem;padding-block: 1.25rem;}
.unit-head {gap: 1rem;display: flex;}
.unit-numb {--size: 2.5rem;position: relative;overflow: hidden;display: flex;justify-content: center;width: var(--size);height: var(--size);flex-shrink: 0;background-color: var(--clr-secondary);border-radius: 0.625rem;font-family: var(--ff-numb);font-size: clamp(1.75rem, 0.1667rem + 3.2986vw, 4.125rem);line-height: var(--size);color: var(--clr-white);text-shadow: 1px 1px 2px #407C81,2px 2px 2px #407C81,3px 3px 2px #407C81,4px 4px 2px #407C81,5px 5px 2px #407C81,6px 6px 2px #407C81,7px 7px 2px #407C81,8px 8px 2px #407C81,9px 9px 2px #407C81,10px 10px 2px #407C81,11px 11px 2px #407C81,12px 12px 2px #407C81,13px 13px 2px #407C81,14px 14px 2px #407C81,15px 15px 2px #407C81,16px 16px 2px #407C81,17px 17px 2px #407C81,18px 18px 2px #407C81,19px 19px 2px #407C81,20px 20px 2px #407C81,21px 21px 2px #407C81,22px 22px 2px #407C81,23px 23px 2px #407C81,24px 24px 2px #407C81,25px 25px 2px #407C81,26px 26px 2px #407C81,27px 27px 2px #407C81,28px 28px 2px #407C81,29px 29px 2px #407C81,30px 30px 2px #407C81,31px 31px 2px #407C81,32px 32px 2px #407C81,33px 33px 2px #407C81,34px 34px 2px #407C81,35px 35px 2px #407C81,36px 36px 2px #407C81,37px 37px 2px #407C81,38px 38px 2px #407C81,39px 39px 2px #407C81,40px 40px 2px #407C81,41px 41px 2px #407C81,42px 42px 2px #407C81,43px 43px 2px #407C81,44px 44px 2px #407C81,45px 45px 2px #407C81,46px 46px 2px #407C81,47px 47px 2px #407C81,48px 48px 2px #407C81,49px 49px 2px #407C81,50px 50px 2px #407C81;}
.unit-desc {align-self: center;}
.unit-desc > * + * {margin-top: 0.75rem;}
.unit-desc .title {font-family: var(--ff-bold);font-size: var(--text-xl);line-height: 1.08em;color: var(--clr-title);}
.unit-desc .text {display: none;}
.unit-content {align-self: center;}
.unit-content > * + * {margin-top: 0.75rem;}
.unit-labels {gap: 0.5rem;display: flex;align-items: center;flex-wrap: wrap;width: -moz-fit-content;width: fit-content;}
.unit-labels li {display: inline-block;vertical-align: middle;border-radius: 4.375rem;font-family: var(--ff-semibold);font-size: clamp(0.75rem, 0.6447rem + 0.2193vw, 0.875rem);line-height: 1em;letter-spacing: 0.1em;color: var(--clr-white);text-align: center;text-transform: uppercase;padding: 0.5rem 0.625rem;}
.unit-pr {gap: 0.75rem;display: flex;align-items: center;}
.unit-pr-value {font-size: 0.875rem;line-height: 1.25em;font-weight: 500;color: var(--clr-title);}
.unit-pr-line {position: relative;width: 100%;height: 1rem;border-radius: 0.625rem;background-color: rgba(85, 165, 172, 0.35);}
.unit-pr-line::before {content: "";position: absolute;top: 0.125rem;left: 0.125rem;width: var(--progress);height: calc(100% - 0.25rem);border-radius: 2.125rem;background-color: var(--clr-secondary);}
.unit-info {gap: 0.25rem var(--sp-xs);display: inline-flex;align-items: center;flex-wrap: wrap;}
.unit-info > * {--icon-size: 0.875rem;position: relative;gap: 0.45em;display: inline-flex;align-items: center;font-size: var(--text);line-height: 1.4em;font-weight: 300;color: var(--clr-text);}
.unit-info > *::before {content: "";display: inline-block;width: var(--icon-size);height: var(--icon-size);flex-shrink: 0;background-repeat: no-repeat;background-size: 100%;background-position: center;background-image: url(../img/icons/icon-check.svg);}
.unit-bottom > * {width: 100%;}
@media (min-width: 992px) {
.unit-card {gap: 1.5rem;grid-template-columns: max-content auto;border-radius: 2.125rem;padding-inline: 1.25rem;}
.unit-head {grid-column: span 2;}
.unit-numb {--size: 4.5rem;}
.unit-desc .title {font-size: var(--h5);}
.unit-desc .text {display: block;}
.unit-bottom {align-self: center;justify-self: end;}
.unit-bottom > * {width: auto;}
}
@media (min-width: 1200px) {
.unit-card {gap: 3rem;align-items: center;grid-template-columns: auto 24.42% 20%;padding-inline: 2.125rem 1.25rem;}
.unit-head {gap: 2.125rem;grid-column: initial;align-items: center;}
.unit-numb {--size: 5.75rem;border-radius: 1.5rem;}
}
@media (min-width: 1681px) {
.unit-wrap {width: 83.333333%;margin-inline: auto;}
}
/*====================*/
/*  Unit Detail       */
/*====================*/
.unit-det-section {margin-block: var(--sp-sm);}
.unit-det {position: relative;background-color: var(--clr-white);border-radius: 1.5rem;padding-inline: 1rem;padding-block: 1.25rem;}
.unit-det > * + * {margin-top: 1.25rem;}
.unit-det .unit-numb,
.unit-det > .title {text-align: center;margin-inline: auto;}
.unit-det > .btn {width: 100%;}
.unit-det-level > * + * {margin-top: 1rem;}
.unit-det-level .text {color: var(--clr-title);}
.unit-det-level .text b,
.unit-det-level .text strong {color: var(--clr-title);}
.unit-det-level .text * + :where(*) {margin-top: calc(var(--text-space) * 0.5);}
.unit-det-level.level-1 {--grd-static: linear-gradient(180deg, #FFF 0%, #9DC62F 100%);--bg-static: #F0F7E0;}
.unit-det-level.level-2 {--grd-static: linear-gradient(180deg, #FFF 0%, #EFDD14 100%);--bg-static: #FCF8D0;}
.unit-det-level.level-3 {--grd-static: linear-gradient(180deg, #FFF 0%, #FF0000 100%);--bg-static: #FFCCCC;}
.unit-det-wrap {--items: 2;--gap: 0.5rem;gap: var(--gap);display: flex;flex-wrap: wrap;}
.unit-det-card {position: relative;display: block;width: calc(100% / var(--items) - var(--gap) + var(--gap) / var(--items));border-radius: 0.75rem;background: var(--grd-static);font-size: 0.875rem;line-height: normal;font-weight: 600;color: var(--clr-title);text-transform: uppercase;text-align: center;padding: 0.953em 0.625rem;}
.unit-det-card::before {content: "";z-index: 0;position: absolute;inset: 0.125rem;border-radius: inherit;background-color: var(--bg-static);transition: var(--transition-1);}
.unit-det-card b {position: relative;z-index: 1;}
.unit-det-card_completed {--grd-static: linear-gradient(180deg, #B5E040 0%, #759E07 100%);--bg-static: #9DC62F;}
.unit-det-card_completed b {opacity: 0;visibility: hidden;}
.unit-det-card_completed::after {content: "";position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 1.5rem;height: 1.5rem;flex-shrink: 0;background-repeat: no-repeat;background-size: 100%;background-position: center;background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M7.75 11.9999L10.58 14.8299L16.25 9.16992' stroke='%23001D2E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");}
.unit-det-card_error {--grd-static: linear-gradient(180deg, #F00 0%, #CF1723 100%);--bg-static: #F00;}
.unit-det-card_error b {opacity: 0;visibility: hidden;}
.unit-det-card_error::after {content: "";position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 1.5rem;height: 1.5rem;flex-shrink: 0;background-repeat: no-repeat;background-size: 100%;background-position: center;background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M8 16L16 8' stroke='%23001D2E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M16 16L8 8' stroke='%23001D2E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");}
@media (min-width: 576px) {
.unit-det-wrap {--items: 3;}
}
@media (min-width: 992px) {
.unit-det {border-radius: 2.125rem;padding-inline: 1.25rem;}
.unit-det::before {content: "";position: absolute;z-index: 0;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 100%;aspect-ratio: 1.95;background-repeat: no-repeat;background-size: 100%;background-position: center;background-image: url(../img/unit-decor.svg);}
.unit-det > .btn {display: flex;width: -moz-fit-content;width: fit-content;margin-inline: auto;}
.unit-det-wrap {--items: 5;}
}
@media (min-width: 1200px) {
.unit-det {padding-inline: 1.875rem;padding-block: 1.875rem;}
.unit-det > * + * {margin-top: 1.875rem;}
.unit-det-wrap {--items: 8;}
.unit-det-card:hover::before {opacity: 0;}
}
/*====================*/
/*  Tasks             */
/*====================*/
.task-section {margin-block: var(--sp-sm);}
.task-block {--pd-inline: 0.75rem;--pd-block: 1.25rem;--br-radius: 1.5rem;position: relative;gap: 1.25rem;display: grid;}
.task-header {position: relative;background-color: var(--clr-white);border: 0.1875rem solid #f4f4f4;border-radius: var(--br-radius);order: 2;padding-inline: var(--pd-inline);padding-block: var(--pd-block);}
.task-header > * + * {margin-top: 1.25rem;}
.task-header > .btn-link + .task-wrap {margin-top: 0.75rem;}
.task-header .title {font-family: var(--ff-bold);font-size: var(--text-xl);line-height: 1.1em;color: var(--clr-title);}
.task-header .btn-link {--btn-icon: 1.5rem;gap: 0.5rem;font-size: 1rem;}
.task-header .btn-link-icon {border-radius: 0.5rem;background-color: transparent;border: 0.0625rem solid var(--clr-title);transform: scaleX(-1);}
.task-progress {gap: 0.75rem;display: flex;align-items: center;}
.task-progress-value {font-size: 0.875rem;line-height: 1.15em;font-weight: 500;color: var(--clr-title);}
.task-progress-line {position: relative;width: 100%;height: 1rem;border-radius: 0.625rem;background-color: rgba(85, 165, 172, 0.35);}
.task-progress-line::before {content: "";position: absolute;top: 0.125rem;left: 0.125rem;width: calc(var(--progress) - 0.25rem);height: calc(100% - 0.25rem);border-radius: 2.125rem;background-color: var(--clr-secondary);}
.task-wrap {--items: 2;--gap: 0.5rem;gap: var(--gap);display: flex;flex-wrap: wrap;}
.task-item {--grd-static: linear-gradient(180deg, #FFF 0%, #9DC62F 100%);--bg-static: #F0F7E0;position: relative;display: block;width: calc(100% / var(--items) - var(--gap) + var(--gap) / var(--items));border-radius: 0.75rem;background: var(--grd-static);font-size: 0.875rem;line-height: normal;font-weight: 600;color: var(--clr-title);text-transform: uppercase;text-align: center;padding: 0.953em 0.625rem;}
.task-item::before {content: "";z-index: 0;position: absolute;inset: 0.125rem;border-radius: inherit;background: var(--bg-static);transition: var(--transition-1);}
.task-item b {position: relative;z-index: 1;}
.task-item.is-active {--grd-static: linear-gradient(180deg, #73C3CA 0%, #37878E 100%);--bg-static: #55A5AC;}
.task-item.is-completed {--grd-static: linear-gradient(180deg, #B5E040 0%, #759E07 100%);--bg-static: #9DC62F;}
.task-item.is-completed b {opacity: 0;visibility: hidden;}
.task-item.is-completed::after {content: "";position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 1.5rem;height: 1.5rem;flex-shrink: 0;background-repeat: no-repeat;background-size: 100%;background-position: center;background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M7.75 11.9999L10.58 14.8299L16.25 9.16992' stroke='%23001D2E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");}
.task-item.is-error {--grd-static: linear-gradient(180deg, #F00 0%, #CF1723 100%);--bg-static: #F00;}
.task-item.is-error b {opacity: 0;visibility: hidden;}
.task-item.is-error::after {content: "";position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 1.5rem;height: 1.5rem;flex-shrink: 0;background-repeat: no-repeat;background-size: 100%;background-position: center;background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M8 16L16 8' stroke='%23001D2E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M16 16L8 8' stroke='%23001D2E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");}
.task-item.is-blocked {--grd-static: linear-gradient(180deg, #FFFFFF 0%, #ECECEC 100%);--bg-static: linear-gradient(180deg, #F4F4F4 0%, #FEFEFE 100%);/*pointer-events: none;*/}
.task-item.is-blocked b {opacity: 0;visibility: hidden;}
.task-item.is-blocked::after {content: "";position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 1.5rem;height: 1.5rem;flex-shrink: 0;background-repeat: no-repeat;background-size: 100%;background-position: center;background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 8.33464V6.66797C5 3.90964 5.83333 1.66797 10 1.66797C14.1667 1.66797 15 3.90964 15 6.66797V8.33464' stroke='%23DBE0E3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M10.0013 15.4167C11.1519 15.4167 12.0846 14.4839 12.0846 13.3333C12.0846 12.1827 11.1519 11.25 10.0013 11.25C8.85071 11.25 7.91797 12.1827 7.91797 13.3333C7.91797 14.4839 8.85071 15.4167 10.0013 15.4167Z' stroke='%23DBE0E3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M14.168 18.332H5.83464C2.5013 18.332 1.66797 17.4987 1.66797 14.1654V12.4987C1.66797 9.16536 2.5013 8.33203 5.83464 8.33203H14.168C17.5013 8.33203 18.3346 9.16536 18.3346 12.4987V14.1654C18.3346 17.4987 17.5013 18.332 14.168 18.332Z' stroke='%23DBE0E3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");}
.task-content {position: relative;gap: 1.875rem;display: flex;flex-direction: column;border: 0.1875rem solid var(--clr-primary);background-color: #F0F7E0;border-radius: var(--br-radius);padding-inline: var(--pd-inline);padding-block: var(--pd-block);}
.task-content::before {content: "";position: absolute;z-index: 0;bottom: 0;left: 50%;transform: translate(-50%, 0);width: 100%;aspect-ratio: 1.95;background-repeat: no-repeat;background-size: 100%;background-position: center;background-image: url(../img/unit-decor.svg);}
.task-content > .title {font-family: var(--ff-bold);font-size: var(--text-xl);line-height: 1.1em;color: var(--clr-black);}
.task-content > .title + .text {margin-top: -0.625rem;}
.task-content > .text {font-weight: 400;color: var(--clr-black);}
.task-content > .text * + :where(*) {margin-top: calc(var(--text-space) * 0.5);}
.task-content > .btn-wrap {gap: 0.75rem;display: flex;width: -moz-fit-content;width: fit-content;margin-inline: auto;margin-top: auto;}
.task-desc {position: relative;gap: 0.75rem;display: flex;border-radius: 1rem;background: linear-gradient(180deg, #FFF 0%, #ECECEC 100%);font-size: var(--text-sm);line-height: 1.2em;font-weight: 600;color: var(--clr-black);padding-inline: 0.625rem 1rem;padding-block: 0.625rem;}
.task-desc p {position: relative;z-index: 1;align-self: center;}
.task-desc::before {content: "";z-index: 0;position: absolute;inset: 0.125rem;border-radius: inherit;background: linear-gradient(180deg, #F4F4F4 0%, #FEFEFE 100%);transition: var(--transition-1);}
.task-desc i {--size: 3.55555em;position: relative;z-index: 1;display: inline-flex;justify-content: center;align-items: center;align-self: flex-start;width: var(--size);aspect-ratio: 64/46;flex-shrink: 0;font-size: var(--text);border-radius: 0.5rem;background-color: var(--clr-secondary);}
.task-line {position: relative;display: block;width: 100%;height: 0.4375rem;background-repeat: no-repeat;background-size: cover;background-position: center;background-image: url(../img/task-line.svg);}
.task-info {position: relative;gap: 0.75rem;display: flex;align-items: center;flex-wrap: wrap;border-radius: 1rem;border: 0.0625rem solid var(--clr-title);padding-inline: 1rem;padding-block: 0.5rem;}
.task-info .text {font-weight: 500;color: var(--clr-black);}
.task-welcome {position: relative;width: 100%;max-width: 65%;margin-inline: auto;text-align: center;}
.task-welcome > * + * {margin-top: 1.25rem;}
.task-welcome > .task-welcome-img + * {margin-top: 1.5rem;}
.task-welcome-img {--size: 10rem;position: relative;overflow: hidden;display: block;width: var(--size);height: var(--size);flex-shrink: 0;border-radius: 1rem;margin-inline: auto;}
.task-welcome-img img {width: 100%;border-radius: 1rem;}
.task-welcome .text {color: var(--clr-black);}
.task-welcome .text * + :where(*) {margin-top: var(--text-space);}
.task-message {--border-width: 0.125rem;--gap-offset: 0.75rem;position: absolute;z-index: 1;left: var(--gap-offset);bottom: var(--gap-offset);width: calc(100% - var(--gap-offset) * 2);max-width: 100%;gap: 0.75rem;display: flex;opacity: 0;visibility: hidden;transition: var(--transition-1);border-radius: 1.5rem;background: var(--clr-white);background-clip: padding-box;border: var(--border-width) solid transparent;box-shadow: 0 1px 1px -0.5px rgba(0, 0, 0, 0.04),0 3px 3px -1.5px rgba(0, 0, 0, 0.04),0 6px 6px -3px rgba(0, 0, 0, 0.04),0 32px 32px -16px rgba(0, 0, 0, 0.04),0 56px 56px -28px rgba(0, 0, 0, 0.04);padding: 1rem;}
.task-message::before {content: "";position: absolute;z-index: -1;inset: 0;border-radius: inherit;background: linear-gradient(180deg, #F4F4F4 0%, #FEFEFE 100%);margin: calc(var(--border-width) * -1);}
.task-message-content {flex-grow: 1;}
.task-message-content > * + * {margin-top: 1rem;}
.task-message-content .text {font-size: 0.875rem;color: var(--clr-black);}
.task-message-content .btn-wrap {gap: 1rem;flex-wrap: nowrap;}
.task-message-content .btn-link {font-size: 1rem;}
.task-message img {--size: 1.5rem;display: inline-block;width: var(--size);height: var(--size);flex-shrink: 0;align-self: flex-start;}
.task-message .btn-close {--size: 1.5rem;color: var(--clr-title);background-color: transparent;}
.task-message .btn-close::before,
.task-message .btn-close::after {width: 55%;}
.task-message.is-active {opacity: 1;visibility: visible;}
.task-footer {position: relative;background-color: var(--clr-white);border-radius: var(--br-radius);padding-inline: var(--pd-inline);padding-block: var(--pd-block);}
.task-notebook > * + * {margin-top: clamp(1rem, 0.2632rem + 1.5351vw, 1.875rem);}
.task-notebook-header {gap: var(--sp-xs);display: flex;align-items: center;justify-content: center;text-align: center;font-family: var(--ff-bold);font-size: var(--text-xl);line-height: 1.1em;color: var(--clr-title);}
.task-notebook-header img {--size: 1.6363em;display: inline-block;width: var(--size);height: var(--size);flex-shrink: 0;}
.task-notebook-content > * + * {margin-top: clamp(1rem, 0.2632rem + 1.5351vw, 1.875rem);}
.task-notebook-footer {text-align: center;}
.task-notebook-form .input {background-color: var(--bg-light);border-color: var(--bg-light);}
.task-notebook-form textarea.input {height: 15rem;}
.task-notebook-form .btn-wrap {gap: 0.75rem;display: flex;width: -moz-fit-content;width: fit-content;margin-left: auto;}
.task-notebook-form .btn {--btn-height: 2.5rem;padding-inline: 1.5rem;}
.task-notebook-form .btn,
.task-notebook-form .btn-link {font-size: 0.875rem;}
.task-notebook-cards {--items: 1;--gap: 0.75rem;gap: var(--gap);display: grid;grid-template-columns: repeat(var(--items), 1fr);}
.task-notebook-card {position: relative;width: 100%;display: block;border-radius: 0.875rem;background: linear-gradient(180deg, #FFF 0%, #ECECEC 100%);padding-inline: 1rem;padding-block: 0.625rem;}
.task-notebook-card::before {content: "";z-index: 0;position: absolute;inset: 0.125rem;border-radius: inherit;background: linear-gradient(180deg, #F4F4F4 0%, #FEFEFE 100%);transition: var(--transition-1);}
.task-notebook-card-title {position: relative;z-index: 1;cursor: pointer;gap: 0.5rem;display: flex;font-size: var(--text);line-height: 1.4em;font-weight: 500;color: var(--clr-title);}
.task-notebook-card-title::before {--size: 1.25em;content: "";display: inline-block;width: var(--size);height: var(--size);flex-shrink: 0;background-repeat: no-repeat;background-size: 100%;background-position: center;background-image: url(../img/icons/icon-chevron-down.svg);transition: var(--transition-1);}
.task-notebook-card-title.is-active::before {transform: scaleY(-1);}
.task-notebook-card-content {display: none;position: relative;z-index: 1;padding-top: 1rem;}
.task-notebook-card-content > * + * {margin-top: 1rem;}
.task-notebook-card-content .btn-wrap {gap: 0.75rem;display: flex;width: -moz-fit-content;width: fit-content;margin-left: auto;}
@media (min-width: 1200px) {
.task-block {--pd-inline: 1.875rem;--pd-block: 1.875rem;--br-radius: 2.125rem;grid-template-columns: 16.25rem auto 21.25rem;}
.task-header {order: -1;}
.task-item:hover::before {opacity: 0;}
.task-notebook-card:not(:has(.is-active)):hover::before {opacity: 0;}
.task-message .btn-close:hover {background-color: var(--clr-secondary);}
}
@media (max-width: 767px) {
.task-desc i {--size: 2.5em;}
.task-content::before {content: none;}
.task-welcome {max-width: 85%;}
.task-welcome > * + * {margin-top: 1rem;}
.task-welcome > .task-welcome-img + * {margin-top: 1.25rem;}
.task-welcome-img {--size: 8rem;}
.task-message {padding: 0.75rem;}
.task-message-content .btn-wrap {gap: 0.75rem;margin-left: -2.25rem;width: calc(100% + 4.5rem);}
.task-message-content .btn-link,
.task-message-content .btn {font-size: 0.875rem;}
}
/*====================*/
/*  Task Detail       */
/*====================*/
.task-detail {position: relative;z-index: 2; will-change: opacity;}
.task-form-loader .task-detail {opacity: 0; visibility: hidden;}
.task-form-loader .task-dropdown {display: none; min-height: 2.75rem;}
.task-detail > * + * {margin-top: 1rem;}
.task-detail:has(.drag-sentence) > * + * {margin-top: var(--sp-sm);}
.task-detail:has(.drag-sentence) > * + *::before {content: "";position: absolute;left: 0;top: calc(var(--sp-sm) * -0.5);display: block;width: 100%;height: 0.0625rem;background-color: rgba(10, 47, 69, 0.15);}
.task-detail-item {position: relative;gap: 0.75rem;display: flex;}
.task-detail-item-title {--size: 1.75em;position: relative;display: flex;align-items: center;justify-content: center;flex-shrink: 0;width: var(--size);height: var(--size);border-radius: 0.375rem;background-color: var(--clr-secondary);font-size: 1rem;line-height: var(--size);font-weight: 600;color: var(--clr-black);text-align: center;margin-top: 0.55em;}
.task-detail-item-content {gap: 0.375rem;display: flex;}
.task-detail-item-content:has(> .task-detail-text:nth-child(2)) {flex-direction: column;}
.task-detail-item-img {position: relative;overflow: hidden;display: block;width: 100%;aspect-ratio: 475/330;border-radius: 1.25rem;}
.task-detail-item-img img {position: absolute;left: 0;top: 0;width: 100%;height: 100%;-o-object-fit: cover;object-fit: cover;content-visibility: auto;border-radius: 1.25rem;}
.task-detail-text {font-size: var(--text);line-height: 1.4em;font-weight: 500;color: var(--clr-black);}
.task-detail-info {--size: 1.25rem;position: relative;pointer-events: all;width: var(--size);height: var(--size);flex-shrink: 0;opacity: 0;visibility: hidden;display: none;transition: var(--transition-1);margin-top: 0.55em;}
.task-detail-info img {width: 100%;height: 100%;}
.task-dropdown {--height: clamp(2rem, 2.2895rem + 0.4386vw, 2.75rem);position: relative;display: inline-block;vertical-align: middle;width: 6.625rem;height: var(--height);margin: 0.125rem 0.25rem;}
.task-dropdown-select {position: relative;overflow: hidden;cursor: pointer;width: 100%;height: 100%;gap: 0.5rem;display: inline-flex;align-items: center;flex-wrap: wrap;}
.task-dropdown-select input[readonly] {display: none;}
.task-dropdown-select input {position: absolute;z-index: 1;inset: 0;width: 100%;height: 100%;font-size: var(--text);line-height: 2.2em;font-weight: 500;color: var(--clr-black);padding-inline: 0.75rem 2.125rem;}
.task-dropdown-select:not(:has(input[readonly])) .task-dropdown-value b {display: none;}
.task-dropdown-select:not(:has(input[readonly])) :where(.task-dropdown-btn)::after {background-image: none;}
.task-dropdown-value {position: relative;cursor: pointer;display: inline-block;width: 100%;height: 100%;border-radius: 0.625rem;background: linear-gradient(180deg, #F4F4F4 0%, #FEFEFE 100%);border: 0.125rem solid rgba(0, 29, 46, 0.15);transition: var(--transition-1);font-size: var(--text);line-height: 2.2em;font-weight: 500;color: var(--clr-black);padding-inline: 0.75rem 2.125rem;}
.task-dropdown-answer {position: relative;cursor: pointer;display: inline-block;width: auto;height: 100%;border-radius: 0.625rem;background: linear-gradient(180deg, #B5E040 0%, #759E07 100%);font-size: var(--text);line-height: var(--height);font-weight: 500;color: var(--clr-black);padding-inline: 0.75rem;}
.task-dropdown-answer::before {content: "";z-index: 0;position: absolute;inset: 0.125rem;border-radius: inherit;background: #9DC62F;transition: var(--transition-1);}
.task-dropdown-answer b {position: relative;z-index: 1;}
.task-dropdown-btn {cursor: pointer;position: absolute;pointer-events: none;-webkit-user-select: none;-moz-user-select: none;user-select: none;top: 50%;right: 0.75rem;transform: translateY(-50%);transition: var(--transition-1);width: 0.75rem;height: 0.75rem;}
.task-dropdown-btn::after {content: "";position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);transition: var(--transition-1);width: 100%;height: 100%;background-repeat: no-repeat;background-size: 100%;background-position: center;background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6' viewBox='0 0 9 6' fill='none'%3E%3Cpath d='M0.939453 1.24023L4.46945 4.76023L7.99945 1.24023' stroke='%23001D2E' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");}
.task-dropdown-list {position: absolute;z-index: 3;border-radius: 0.625rem;border-width: 0.125rem;border-style: solid;-o-border-image: linear-gradient(180deg, #FFF 0%, #ECECEC 100%);border-image: linear-gradient(180deg, #FFF 0%, #ECECEC 100%);background-color: var(--clr-white);box-shadow: 0 1px 1px -0.5px rgba(0, 0, 0, 0.04),0 3px 3px -1.5px rgba(0, 0, 0, 0.04),0 6px 6px -3px rgba(0, 0, 0, 0.04),0 32px 32px -16px rgba(0, 0, 0, 0.04),0 56px 56px -28px rgba(0, 0, 0, 0.04);width: auto;min-width: 100%; box-sizing: border-box;padding: 0.375rem;opacity: 0;visibility: hidden;}
.task-dropdown-list label {position: relative;cursor: pointer;display: block;border-radius: 0.5rem;font-size: 1rem;line-height: 1.3em;font-weight: 500;color: var(--clr-text);white-space: nowrap;padding: 0.375rem;transition: var(--transition-1);}
.task-dropdown-list label input {position: absolute;cursor: pointer;top: 0;left: 0;width: 100%;height: 100%;opacity: 0;}
.task-dropdown.is-open .task-dropdown-value {border-color: var(--clr-black);}
.task-dropdown.is-open .task-dropdown-list {opacity: 1;visibility: visible;}
.task-dropdown.is-open:not(.is-value) .task-dropdown-btn {transform: translateY(-50%) scaleY(-1);}
.task-dropdown.is-value .task-dropdown-value {border-color: var(--clr-secondary);}
.task-dropdown.is-value .task-dropdown-btn {pointer-events: all;z-index: 2;}
.task-dropdown.is-value .task-dropdown-btn::after {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10' fill='none'%3E%3Cpath d='M1 8.88672L8.88672 1' stroke='%23001D2E' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8.88672 8.88672L1 1' stroke='%23001D2E' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");}
.task-dropdown.is-error .task-dropdown-value {border-color: var(--clr-red);}
.task-detail:has(.task-input-list) .task-dropdown {--height: auto;width: 100%;margin: 0;}
.task-detail:has(.task-input-list) .task-dropdown-select {display: none;}
.task-input-list {--gap: 0.5rem;gap: var(--gap);display: flex;flex-direction: column;list-style: none;counter-reset: letter;}
.task-input-list li {counter-increment: letter;position: relative;cursor: pointer;gap: 0.5rem;display: flex;align-items: center;}
.task-input-list li .ch-box {position: relative;z-index: 1;width: 100%;gap: 0.75rem;display: flex;align-items: center;border-radius: 0.75rem;background: linear-gradient(180deg, #FFF 0%, #ECECEC 100%);font-size: var(--text);line-height: 1.4em;font-weight: 500;color: var(--clr-black);padding-inline: 1rem;padding-block: 0.625rem;}
.task-input-list li .ch-box span {position: relative;z-index: 1;}
.task-input-list li .ch-box input[type=radio],
.task-input-list li .ch-box input[type=checkbox] {color: rgba(0, 29, 46, 0.2);background-color: rgba(0, 29, 46, 0.05);order: 1;margin-left: auto;margin-block: auto;}
.task-input-list li .ch-box input[type=radio]:checked,
.task-input-list li .ch-box input[type=checkbox]:checked {color: var(--clr-secondary);}
.task-input-list li .ch-box::before {content: counter(letter, lower-alpha) ". ";position: relative;z-index: 1;display: inline-block;}
.task-input-list li .ch-box::after {content: "";z-index: 0;position: absolute;inset: 0.125rem;border-radius: inherit;background: linear-gradient(180deg, #F4F4F4 0%, #FEFEFE 100%);transition: var(--transition-1);}
.task-input-list li .ch-box:has(input:checked) {background: var(--clr-secondary);}
.task-dropdown:has(.task-input-list) {width: 100% !important;}
.task-detail-item:has(.is-correct, .is-incorrect) .task-dropdown {pointer-events: none;width: auto !important;height: auto;}
.task-detail-item:has(.is-correct, .is-incorrect) .task-detail-info {display: inline-flex;opacity: 1;visibility: visible;}
.task-detail-item:has(.is-correct, .is-incorrect):has(.task-input-list) .task-detail-info {display: inline-flex;opacity: 0;visibility: hidden;}
.task-detail-item:has(.is-correct, .is-incorrect):has(.task-input-list) .task-input-list li.is-answer .ch-box {background: linear-gradient(180deg, #B5E040 0%, #759E07 100%);}
.task-detail-item:has(.is-correct, .is-incorrect):has(.task-input-list) .task-input-list li.is-answer .ch-box input[type=radio]::before,
.task-detail-item:has(.is-correct, .is-incorrect):has(.task-input-list) .task-input-list li.is-answer .ch-box input[type=checkbox]::before {background-image: url("data:image/svg+xml,%3Csvg width='13' height='12' viewBox='0 0 13 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.55469 6.375L5.55469 9.375L10.0547 2.625' stroke='%23001D2E' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");}
.task-detail-item:has(.is-correct, .is-incorrect):has(.task-input-list) .task-input-list li.is-answer .ch-box input[type=radio]:checked,
.task-detail-item:has(.is-correct, .is-incorrect):has(.task-input-list) .task-input-list li.is-answer .ch-box input[type=checkbox]:checked {color: var(--clr-black);}
.task-detail-item:has(.is-correct, .is-incorrect):has(.task-input-list) .task-input-list li.is-answer .ch-box::after {background: #9DC62F;}
.task-detail-item:has(.is-correct, .is-incorrect):has(.task-input-list) .task-input-list li.is-answer .task-detail-info {opacity: 1;visibility: visible;}
.task-detail-item:has(.is-correct, .is-incorrect):has(.task-input-list) .task-input-list li.is-error .ch-box {background: linear-gradient(180deg, #F00 0%, #CF1723 100%);}
.task-detail-item:has(.is-correct, .is-incorrect):has(.task-input-list) .task-input-list li.is-error .ch-box input[type=radio]::before,
.task-detail-item:has(.is-correct, .is-incorrect):has(.task-input-list) .task-input-list li.is-error .ch-box input[type=checkbox]::before {background-image: url("data:image/svg+xml,%3Csvg width='13' height='12' viewBox='0 0 13 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.55469 6.375L5.55469 9.375L10.0547 2.625' stroke='%23001D2E' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");}
.task-detail-item:has(.is-correct, .is-incorrect):has(.task-input-list) .task-input-list li.is-error .ch-box input[type=radio]:checked,
.task-detail-item:has(.is-correct, .is-incorrect):has(.task-input-list) .task-input-list li.is-error .ch-box input[type=checkbox]:checked {color: var(--clr-black);}
.task-detail-item:has(.is-correct, .is-incorrect):has(.task-input-list) .task-input-list li.is-error .ch-box::after {background: #F00;}
.task-dropdown-select.is-correct input:not(:has([readonly])),
.task-dropdown-select.is-incorrect input:not(:has([readonly])) {display: none;}
.task-dropdown-select.is-correct .task-dropdown-value,
.task-dropdown-select.is-incorrect .task-dropdown-value {width: auto;border: none;line-height: var(--height);font-weight: 600;padding-inline: 0.75rem;}
.task-dropdown-select.is-correct .task-dropdown-value::before,
.task-dropdown-select.is-incorrect .task-dropdown-value::before {content: "";z-index: 0;position: absolute;inset: 0.125rem;border-radius: inherit;transition: var(--transition-1);}
.task-dropdown-select.is-correct .task-dropdown-value b,
.task-dropdown-select.is-incorrect .task-dropdown-value b {position: relative;z-index: 1;display: inline-block !important;}
.task-dropdown-select.is-correct .task-dropdown-btn,
.task-dropdown-select.is-incorrect .task-dropdown-btn {display: none;}
.task-dropdown-select.is-correct .task-dropdown-value {background: linear-gradient(180deg, #B5E040 0%, #759E07 100%);}
.task-dropdown-select.is-correct .task-dropdown-value::before {background: #9DC62F;}
.task-dropdown-select.is-correct .task-dropdown-answer {display: none;}
.task-dropdown-select.is-incorrect .task-dropdown-value {background: linear-gradient(180deg, #F00 0%, #CF1723 100%);text-decoration-line: line-through;}
.task-dropdown-select.is-incorrect .task-dropdown-value b {text-decoration-line: line-through;}
.task-dropdown-select.is-incorrect .task-dropdown-value::before {background: #F00;}
.task-detail.type-2 {margin: auto;width: 100%;}
.task-detail.type-2 .task-detail-item {gap: 1.875rem;justify-content: center;width: 100%;}
.task-detail.type-2 .task-detail-item-content {gap: 1.25rem;flex-direction: column;flex: 0 0 calc(50% - 1.875rem + 0.9375rem);}
.task-detail.type-2 .task-detail-item-content:has(.default-sentence) {align-self: center;}
.task-detail.type-2 .task-detail-item-img {flex: 0 0 calc(50% - 1.875rem + 0.9375rem);}
.task-detail.type-2 .task-detail-text {text-align: center;}
.task-detail.type-2 .task-detail-info {margin-top: 0;}
.task-detail.type-3 {--items: 2;--gap: 1.875rem;gap: var(--gap);display: flex;flex-wrap: wrap;width: 100%;margin: auto;}
.task-detail.type-3 > * {margin-top: 0;}
.task-detail.type-3 .task-detail-item {gap: 0.5rem;display: grid;grid-template-columns: max-content auto;width: calc(100% / var(--items) - var(--gap) + var(--gap) / var(--items));}
.task-detail.type-3 .task-detail-item-content {gap: 1.25rem;flex-direction: column;}
.task-detail.type-3 .task-detail-text {margin-top: 0.25em;}
.task-detail.type-3 .task-detail-item-title,
.task-detail.type-3 .task-detail-info {margin-top: 0;}
.task-detail.type-3 .task-dropdown {width: calc(100% + 1.75rem + 0.5rem);margin-left: -2.25rem;margin-top: auto;}
@media (min-width: 1200px) {
.task-dropdown-list label:hover {background-color: var(--bg-light);}
.task-dropdown.is-value .task-dropdown-btn:hover::after {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10' fill='none'%3E%3Cpath d='M1 8.88672L8.88672 1' stroke='%23FF0000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8.88672 8.88672L1 1' stroke='%23FF0000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;}
.task-dropdown.is-error .task-dropdown-input {border-color: var(--clr-red);}
.task-detail-info:hover {opacity: 0.75 !important;}
}
@media (max-width: 767px) {
.task-detail-item-title {margin-top: 0.35em;}
.task-detail-info {margin-top: 0.35em;}
.task-detail-item-img {order: -1;}
.task-detail.type-2 .task-detail-item {gap: 1.25rem;flex-direction: column;}
.task-detail.type-3 {--items: 1;--gap: 1.25rem;display: flex;}
.task-detail.type-3 .task-detail-item-content {gap: 1rem;}
}
/*====================*/
/*  Rate Task         */
/*====================*/
.rate-table {gap: 0.5rem;display: grid;grid-template-rows: 1fr;grid-template-columns: max-content 1.5fr 1fr 2.5fr;}
.rate-table-tr {position: relative;gap: 1rem;display: grid;grid-column: span 4;grid-template-columns: subgrid;background: linear-gradient(180deg, #FFF 0%, #ECECEC 100%);border-radius: 1rem;font-size: var(--text);padding: 0.5rem;}
.rate-table-tr::before {content: "";position: absolute;z-index: 0;inset: 0.125rem;border-radius: inherit;background: linear-gradient(180deg, #F4F4F4 0%, #FEFEFE 100%);}
.rate-table-tr.is-active {background: var(--clr-secondary);}
.rate-table-tr.is-active .rate-table-td,
.rate-table-tr.is-active .rate-numb,
.rate-table-tr.is-active .rate-user,
.rate-table-tr.is-active .rate-point {color: var(--clr-white);}
.rate-table-tr.is-active::before {background: var(--clr-secondary);}
.rate-table-td {position: relative;z-index: 1;align-self: center;font-size: var(--text);line-height: 1.4em;font-weight: 400;color: var(--clr-text);}
.rate-numb {display: flex;justify-content: center;align-items: center;width: 2.455em;aspect-ratio: 1;flex-shrink: 0;font-family: var(--ff-bold);font-size: var(--text-xl);line-height: 1.1em;color: var(--clr-black);}
.rate-user {position: relative;gap: 0.5rem;display: inline-flex;align-items: center;font-weight: 500;color: var(--clr-black);}
.rate-user-img {--size: 2.8889em;position: relative;overflow: hidden;display: block;width: var(--size);aspect-ratio: 1;border-radius: 0.75rem;}
.rate-user-img img {width: 100%;height: 100%;-o-object-fit: cover;object-fit: cover;border-radius: 0.75rem;}
.rate-list {position: relative;gap: 0.25rem 1rem;display: flex;flex-wrap: wrap;}
.rate-list-item {position: relative;display: block;border-radius: 0.75rem;background: var(--grd-static);font-size: 0.875rem;line-height: normal;font-weight: 600;color: var(--clr-title);text-transform: uppercase;text-align: center;padding: 0.929em 0.5rem;}
.rate-list-item::before {content: "";z-index: 0;position: absolute;inset: 0.125rem;border-radius: inherit;background-color: var(--bg-static);transition: var(--transition-1);}
.rate-list-item b {position: relative;z-index: 1;}
.rate-list-item.level-1 {--grd-static: linear-gradient(180deg, #FFF 0%, #9DC62F 100%);--bg-static: #F0F7E0;}
.rate-list-item.level-2 {--grd-static: linear-gradient(180deg, #FFF 0%, #EFDD14 100%);--bg-static: #FCF8D0;}
.rate-list-item.level-3 {--grd-static: linear-gradient(180deg, #FFF 0%, #FF0000 100%);--bg-static: #FFCCCC;}
@media (max-width: 767px) {
.rate-table {gap: 1rem;grid-template-columns: 2.5rem auto;}
.rate-table-tr {gap: 0.75rem;grid-column: span 2;}
.rate-table-td:not(:has(.rate-numb, .rate-user)) {grid-column: span 2;}
.rate-numb {width: 2.5rem;}
.rate-user-img {--size: 2.5rem;}
.rate-list {gap: 0.25rem;}
.rate-list-item {font-size: 0.875rem;}
}
/*====================*/
/*  Cabinet Notebook  */
/*====================*/
.notebook {position: relative;display: block;background-color: var(--clr-white);border-radius: 1.5rem;padding-inline: 1rem;padding-block: 1.25rem;}
.notebook > * + * {margin-top: var(--sp-sm);}
.notebook-header {gap: var(--sp-xs);display: flex;align-items: center;justify-content: center;text-align: center;font-size: var(--h5);}
.notebook-header img {--size: 1.286em;display: inline-block;width: var(--size);height: var(--size);flex-shrink: 0;}
.notebook-content > * + * {margin-top: var(--sp-sm);}
.notebook-empty {display: block;text-align: center;}
.notebook-empty > * + * {margin-top: clamp(1rem, 0.2623rem + 1.5368vw, 1.875rem);}
.notebook-empty-img {--size: 7rem;display: inline-block;width: var(--size);height: var(--size);flex-shrink: 0;}
.notebook-empty-img img {width: 100%;}
.notebook-form .input {background-color: var(--bg-light);border-color: var(--bg-light);}
.notebook-form textarea.input {height: 15rem;}
.notebook-form .btn-wrap {gap: 0.75rem;display: flex;width: -moz-fit-content;width: fit-content;margin-left: auto;}
.notebook-form .btn {--btn-height: 2.5rem;padding-inline: 1.5rem;}
.notebook-form .btn,
.notebook-form .btn-link {font-size: 0.875rem;}
.notebook-card-wrap {--items: 1;--gap: 0.75rem;gap: var(--gap);display: grid;grid-template-columns: repeat(var(--items), 1fr);}
.notebook-card {position: relative;width: 100%;gap: 0.75rem;display: grid;grid-row: span 3;grid-template-rows: subgrid;border-radius: 0.875rem;background-color: var(--bg-light);padding: 1rem;}
.notebook-card-head {gap: 0.25rem;display: flex;justify-content: space-between;}
.notebook-card-head .title {font-size: var(--text);line-height: 1.4em;font-weight: 500;color: var(--clr-title);}
.notebook-card-head .btn-wrap {gap: 0.75rem;flex-wrap: nowrap;flex-shrink: 0;align-self: start;}
.notebook-card-desc,
.notebook-card-date {font-size: var(--text-sm);line-height: 1.4em;font-weight: 300;color: var(--clr-text);}
.notebook-card-desc {display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;}
@media (min-width: 768px) {
.notebook-card-wrap {--items: 2;}
}
@media (min-width: 1200px) {
.notebook {border-radius: 2.125rem;padding-inline: 1.875rem;padding-block: 1.875rem;}
.notebook-empty {max-width: 60%;margin-inline: auto;}
.notebook-empty-img {--size: 8.75rem;}
}
/*====================*/
/*  Draggable Block   */
/*====================*/
.task-detail-item-content:has(.drag-sentence) {flex-direction: column;}
.task-detail-item-content:has(.drag-words) {flex-direction: column;}
.task-detail-item-content:not(:has(.is-incorrect)) .drag-sentence-wrap {display: none;}
.task-detail-item .text {line-height: 1.6em;}
.task-detail-item:has(.text + .drag-sentence) .task-detail-item-content {gap: 1.25rem;}
.task-detail-item:has(.text + .drag-sentence) .task-detail-item-title {margin-top: 0;}
.drag-sentence {position: relative;gap: 0.5rem;display: inline-flex;align-items: center;flex-wrap: wrap;}
.drag-sentence input.sentence-input {display: none;}
.drag-sentence .task-detail-info {margin-top: 0;}
.drag-sentence-wrap .text {font-size: 0.875rem;}
.drag-sentence-wrap > * + * {margin-top: 0.5rem;}
.drag-sentence-answer {position: relative;gap: 0.5rem;display: inline-flex;align-items: center;flex-wrap: wrap;}
.drag-sentence-answer .drag-word {cursor: default;background: linear-gradient(180deg, #B5E040 0%, #759E07 100%);box-shadow: none;}
.drag-sentence-answer .drag-word::before {background: #9DC62F;}
.default-sentence {position: relative;border-radius: 0.625rem;border: 0.0625rem solid var(--clr-title);background: linear-gradient(180deg, #F4F4F4 0%, #FEFEFE 100%);font-size: var(--text);line-height: 1.4em;font-weight: 500;color: var(--clr-black);padding: 0.625rem;}
.drag-box {position: relative;}
.drag-word {position: relative;cursor: grab;white-space: nowrap;-webkit-user-select: none;-moz-user-select: none;user-select: none;display: inline-flex;align-items: center;justify-content: center;width: auto;border-radius: 0.625rem;background: linear-gradient(180deg, #FFF 0%, #ECECEC 100%);box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.07),0 0 0 0 rgba(0, 0, 0, 0.05),0 2px 3px -1px rgba(0, 0, 0, 0.25),0 1px 4px 1px rgba(0, 0, 0, 0.12);font-size: var(--text);line-height: 1.25em;font-weight: 600;color: var(--clr-black);padding-inline: 1.25rem;padding-block: 0.672rem;}
.drag-word::before {content: "";z-index: 0;position: absolute;inset: 0.125rem;border-radius: inherit;background: linear-gradient(180deg, #F4F4F4 0%, #FEFEFE 100%);transition: var(--transition-1);}
.drag-word span {position: relative;z-index: 1;}
.drag-word:active {cursor: grabbing;}
.drag-word.is-correct,
.drag-word.is-incorrect {cursor: default;box-shadow: none;}
.drag-word.is-correct {background: linear-gradient(180deg, #B5E040 0%, #759E07 100%);}
.drag-word.is-correct::before {background: #9DC62F;}
.drag-word.is-incorrect {background: linear-gradient(180deg, #F00 0%, #CF1723 100%);text-decoration: line-through;}
.drag-word.is-incorrect::before {background: #F00;}
.drag-words {position: relative;gap: 0.5rem;display: flex;align-items: center;flex-wrap: wrap;}
.task-detail:has(.drag-columns) {display: flex;height: 100%;}
.task-detail:has(.drag-columns) .task-detail-item {width: 100%;height: 100%;}
.task-detail:has(.drag-columns) .task-detail-item-content {gap: 1.875rem;height: 100%;}
.task-detail:has(.drag-word-input) .task-detail-item-content {gap: 1.875rem;}
.task-detail:has(.drag-word-input) .task-dropdown .drag-word-input {display: none;}
.task-detail:has(.drag-word-input) .task-dropdown .task-dropdown-btn::after {background-image: none;}
.task-detail:has(.drag-word-input) .task-dropdown.is-value .task-dropdown-btn::after {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10' fill='none'%3E%3Cpath d='M1 8.88672L8.88672 1' stroke='%23001D2E' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8.88672 8.88672L1 1' stroke='%23001D2E' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");}
.drag-columns {--items: 2;--gap: 1.25rem;gap: var(--gap);display: flex;flex-wrap: wrap;height: auto;min-height: 20rem;}
.drag-column {gap: 0.75rem;display: flex;flex-direction: column;align-items: center;width: calc(100% / var(--items) - var(--gap) + var(--gap) / var(--items));border-radius: 1.25rem;border: 0.0625rem solid var(--clr-black);background-color: #F0F7E0;padding: 1rem;}
.drag-column-field {gap: 0.5rem;display: flex;align-items: center;flex-wrap: wrap;width: 100%;}
.drag-column-field .drag-word + .task-detail-info {margin-left: -0.25rem;margin-top: 0;}
.drag-column-field .is-correct + .task-detail-info {display: none;}
.drag-column .text {font-weight: 500;color: var(--clr-title);}
.drag-column-input {display: none;}
.drag-word-input {position: relative;cursor: grab;white-space: nowrap;-webkit-user-select: none;-moz-user-select: none;user-select: none;display: inline-flex;align-items: center;justify-content: center;width: auto;border-radius: 0.625rem;background: linear-gradient(180deg, #FFF 0%, #ECECEC 100%);box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.07),0 0 0 0 rgba(0, 0, 0, 0.05),0 2px 3px -1px rgba(0, 0, 0, 0.25),0 1px 4px 1px rgba(0, 0, 0, 0.12);font-size: var(--text);line-height: 1.25em;font-weight: 600;color: var(--clr-black);padding-inline: 1.25rem;padding-block: 0.672rem;}
.drag-word-input::before {content: "";z-index: 0;position: absolute;inset: 0.125rem;border-radius: inherit;background: linear-gradient(180deg, #F4F4F4 0%, #FEFEFE 100%);transition: var(--transition-1);}
.drag-word-input span {position: relative;z-index: 1;}
.drag-word-input:active {cursor: grabbing;}
.drag-word-input.is-correct,
.drag-word-input.is-incorrect {cursor: default;box-shadow: none;}
.drag-word-input.is-correct {background: linear-gradient(180deg, #B5E040 0%, #759E07 100%);}
.drag-word-input.is-correct::before {background: #9DC62F;}
.drag-word-input.is-incorrect {background: linear-gradient(180deg, #F00 0%, #CF1723 100%);text-decoration: line-through;}
.drag-word-input.is-incorrect::before {background: #F00;}
@media (max-width: 767px) {
.drag-columns {--items: 1;--gap: 1rem;}
}
/*====================*/
/*  Accordion         */
/*====================*/
.accordion {position: relative;z-index: 1;}
.accordion-item {--pd-block: 1rem;--pd-inline: 1rem;position: relative;border-radius: 1.375rem;background-color: #E8F1FB;}
.accordion-item + .accordion-item {margin-top: 0.75rem;}
.accordion-title {position: relative;cursor: pointer;transition: var(--transition-1);gap: 0.727em;display: flex;align-items: center;font-size: var(--text-xl);line-height: 1.3em;font-weight: 500;color: var(--clr-title);padding-block: var(--pd-block);padding-inline: var(--pd-inline) calc(var(--pd-inline) * 3.5);}
.accordion-title::before {content: "";display: inline-block;width: 1.5em;height: 1.5em;flex-shrink: 0;align-self: flex-start;background-repeat: no-repeat;background-size: 100%;background-image: url(../img/icons/icon-faq.svg);}
.accordion-title i {display: inline-block;position: absolute;top: calc(var(--pd-block) - 0.125rem);right: var(--pd-inline);width: 1.6364em;height: 1.6364em;border-radius: 0.75rem;background-color: rgba(8, 107, 156, 0.2);}
.accordion-title i::before {content: "";position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);transition: transform var(--transition-1);width: 50%;height: 50%;background-repeat: no-repeat;background-size: 100%;background-image: url(../img/icons/icon-chevron-down.svg);}
.accordion-title.is-active i::before {transform: translate(-50%, -50%) rotateX(-180deg);}
.accordion-inner {display: none;padding-bottom: var(--pd-block);padding-inline: var(--pd-inline);}
@media (min-width: 1200px) {
.accordion-item {--pd-block: 1.5rem;--pd-inline: 1.25rem;}
.accordion-title:hover {color: var(--clr-primary);}
}
/*====================*/
/*  Pagination        */
/*====================*/
.pagination {--size: 2.125rem;--font-size: 1rem;--gap: 0.75rem;position: relative;gap: var(--gap);display: flex;align-items: center;width: -moz-fit-content;width: fit-content;margin-inline: auto;margin-top: var(--sp-sm);}
.pagination ul {line-height: 0;gap: var(--gap);display: flex;justify-content: center;border-radius: 1rem;background-color: var(--clr-white);padding: 0.375rem;}
.pagination li {position: relative;display: inline-block;width: var(--size);height: var(--size);flex-shrink: 0;border-radius: 0.625rem;font-size: var(--font-size);font-weight: 500;line-height: var(--size);color: var(--clr-text);text-align: center;}
.pagination a {position: relative;display: inline-block;width: 100%;height: 100%;border-radius: inherit;}
.pagination .dots {pointer-events: none;}
.pagination .pag-arrow {--size: 3rem;position: relative;display: inline-block;width: var(--size);height: var(--size);flex-shrink: 0;color: var(--clr-title);border-radius: 0.75rem;background-color: var(--clr-secondary);border: 0.0625rem solid var(--clr-secondary);}
.pagination .pag-arrow svg {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 40%;height: 40%;}
.pagination .pag-arrow:first-child {transform: rotate(180deg);}
.pagination .pag-arrow.disabled {pointer-events: none;opacity: 0.2;}
.pagination li.active a {pointer-events: none;background-color: var(--clr-secondary);}
@media (min-width: 1200px) {
.pagination li a:hover {color: var(--clr-secondary);}
.pagination .pag-arrow:hover {background-color: transparent;}
}
@media (max-width: 575px) {
.pagination {--size: 2rem;--font-size: 0.875rem;--gap: 0.5rem;}
.pagination ul {gap: 0.375rem;padding: 0.25rem;}
.pagination .pag-arrow {--size: 2.5rem;}
}
/*====================*/
/*  Blog              */
/*====================*/
.blog-wrap {--br: 1.5rem;}
.blog-wrap > * + * {margin-top: var(--sp-sm);}
.blog-item {position: relative;gap: 1.25rem;display: flex;flex-direction: column;}
.blog-img {position: relative;overflow: hidden;display: block;width: 100%;aspect-ratio: 580/380;border-radius: var(--br);}
.blog-img img {position: absolute;left: 0;top: 0;width: 100%;height: 100%;-o-object-fit: cover;object-fit: cover;content-visibility: auto;border-radius: var(--br);transition: transform var(--transition-1);}
.blog-content {position: relative;gap: var(--sp-xs);display: flex;flex-direction: column;align-items: flex-start;justify-content: center;background-color: var(--clr-white);border-radius: var(--br);padding-inline: 1rem;padding-block: 1.25rem;}
.blog-labels {gap: 1rem;display: inline-flex;align-items: center;flex-wrap: wrap;line-height: 0;}
.blog-labels > * {pointer-events: none;gap: 0.5em;display: inline-flex;align-items: center;font-size: var(--text-sm);line-height: 1.5em;font-weight: 400;color: var(--clr-text);}
.blog-labels > * img {display: inline-block;width: 1.5em;height: 1.5em;flex-shrink: 0;}
.blog-banner {position: relative;overflow: hidden;display: block;width: 100%;aspect-ratio: 1260/720;border-radius: 1.5rem;}
.blog-banner img {position: absolute;left: 0;top: 0;width: 100%;height: 100%;-o-object-fit: cover;object-fit: cover;content-visibility: auto;border-radius: 1.5rem;}
@media (min-width: 768px) {
.blog-item {flex-direction: row;}
.blog-item:nth-child(odd) {flex-direction: row-reverse;}
.blog-img {flex: 0 0 42.4391%;}
.blog-content .title {display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;}
.blog-content .text {display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;}
.blog-banner {aspect-ratio: 1680/720;}
}
@media (min-width: 992px) {
.blog-wrap {--br: 2.125rem;}
.blog-content {padding-inline: var(--sp-md);padding-block: var(--sp-md);}
}
@media (min-width: 1200px) {
a.blog-img:hover img {transform: scale(1.05);}
.blog-item a.title:hover {color: var(--clr-primary);}
}
/*====================*/
/*  Checkout          */
/*====================*/
.checkout-block {gap: var(--sp-sm);display: grid;}
.checkout-block .tariff-card {grid-row: auto;grid-template-rows: auto;order: -1;align-self: self-start;}
.checkout-form > * + * {margin-top: var(--sp-sm);}
.checkout-form .form-block .btn-link {margin-top: 0.5rem;}
.checkout-caption {font-family: var(--ff-semibold);font-size: var(--text-xl);line-height: 1.1em;letter-spacing: -0.01em;color: var(--clr-title);}
.checkout-line {position: relative;display: block;width: 100%;height: 0.3125rem;background-repeat: no-repeat;background-size: cover;background-position: center;background-image: url(../img/tariff-line.svg);}
.checkout-price {position: relative;border-radius: 1rem;background-color: var(--clr-secondary);padding-block: 1.25rem;padding-inline: 1rem;}
.checkout-price > * + * {margin-top: 0.75rem;}
.checkout-price-item {gap: 0.5rem;display: flex;align-items: center;justify-content: space-between;font-size: var(--text);line-height: 1.1em;font-weight: 400;color: var(--clr-text);text-transform: uppercase;}
.checkout-price-total {font-family: var(--ff-bold);font-size: var(--text-xl);line-height: 1.1em;color: var(--clr-title);}
.checkout-user {gap: var(--sp-xs);display: inline-flex;align-items: center;}
.checkout-user-img {--size: 4rem;display: inline-block;width: var(--size);height: var(--size);flex-shrink: 0;border-radius: 1.25rem;}
.checkout-user-img img {width: 100%;border-radius: 1.25rem;}
.checkout-user-name {font-family: var(--ff-semibold);font-size: var(--text-xl);line-height: 1.1em;color: var(--clr-title);}
@media (min-width: 992px) {
.checkout-block {gap: var(--sp-block);grid-template-columns: auto 40%;}
.checkout-block .tariff-card {order: 1;}
.checkout-user-img {--size: 5.25rem;}
}
@media (min-width: 1200px) {
.checkout-form > .checkout-caption + * {margin-top: 1.25rem;}
.checkout-price {padding-block: 1.875rem;padding-inline: 1.25rem;}
}
/*====================*/
/*  Thank You         */
/*====================*/
.thank-block {--gap: var(--sp-sm);gap: var(--gap);display: flex;flex-direction: column;}
.thank-block .tariff-card {grid-row: auto;grid-template-rows: auto;}
.thank-block .btn {align-self: center;}
.thank-info {gap: 0.5rem 0.75rem;display: grid;grid-template-columns: auto auto;font-size: var(--text);font-weight: 400;line-height: 1.4em;color: var(--clr-text);}
.thank-info > *:nth-child(even) {font-weight: 500;color: var(--clr-title);}
@media (min-width: 1200px) {
.thank-block {max-width: 68%;margin-inline: auto;}
}
/*====================*/
/*  Footer            */
/*====================*/
footer {background-color: var(--bg-dark);padding-block: var(--sp-sm);}
.footer-grid {--gap-grid: 1rem;--gap-el: 1rem;display: grid;gap: var(--gap-grid);}
.footer-info {order: 2;gap: var(--gap-el);display: inline-flex;flex-direction: column;}
.footer-info .footer-logo-wrap {display: none;}
.footer-logo-wrap {position: relative;display: flex;flex-direction: column;max-width: 15rem;}
.footer-logo {display: block;width: 100%;max-width: 78%;}
.footer-logo img {display: block;width: 100%;}
.footer-logo-text {gap: 0.125rem;display: inline-flex;align-items: center;font-size: 1rem;line-height: 1em;font-weight: 200;color: var(--clr-white);margin-left: auto;}
.footer-logo-text img {--size: 7.625em;display: block;width: var(--size);aspect-ratio: 122/42;}
.footer-copy,
.dev-link,
.footer-contact-link,
.footer-links a {font-size: var(--text);line-height: 1.4em;font-weight: 300;color: rgba(255, 255, 255, 0.8);}
.footer-contacts {gap: var(--gap-el);display: inline-flex;flex-direction: column;}
.footer-contact-link {gap: 0.75rem;display: inline-flex;align-items: center;}
.footer-contact-link img {width: 1.5rem;height: 1.5rem;}
.footer-links-wrap > * + * {margin-top: var(--gap-el);}
.footer-links ul {gap: var(--gap-el);display: inline-flex;flex-direction: column;flex-wrap: wrap;}
.footer-links li {line-height: 0;}
.footer-links a {color: var(--clr-white);}
.footer-img-wrap {gap: 1rem;display: inline-flex;align-items: center;}
.footer-img-wrap img {width: 2.875rem;}
.dev-link {gap: 0.75rem;display: inline-flex;align-items: center;}
.dev-link img {width: 5.5rem;}
.social ul {gap: 1rem;display: flex;align-items: center;flex-wrap: wrap;}
.social li {line-height: 0;}
.social a {position: relative;width: 1.75rem;height: 1.75rem;flex-shrink: 0;}
.social a > * {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 100%;height: 100%;}
@media (min-width: 576px) {
.footer-grid {--gap-grid: 2rem;--gap-el: 1.25rem;grid-template-columns: repeat(2, 1fr);}
.footer-info {order: 2;}
.footer-info .footer-logo-wrap {display: flex;}
.footer-contacts {order: 3;}
.footer-contacts .footer-logo-wrap {display: none;}
}
@media (min-width: 1200px) {
.footer-grid {--gap-grid: 10vw;--gap-el: 1.5rem;grid-template-columns: auto minmax(10%, max-content) minmax(10%, max-content) minmax(10%, max-content);justify-content: space-between;}
.footer-grid > *:not(:first-child) {position: relative;}
.footer-grid > *:not(:first-child)::before {content: "";position: absolute;top: 0;left: calc(var(--gap-grid) * -0.5);width: 1.3rem;height: 100%;background-image: url(../img/line-wavy-white.svg);background-position: center;background-repeat: no-repeat;background-size: cover;}
.footer-info,
.footer-contacts {order: -1;}
.footer-logo-wrap {max-width: 19.3125rem;}
.social ul {gap: 1.25rem;}
a.footer-contact-link:hover,
.footer-links a:hover,
.dev-link:hover {color: var(--clr-primary);}
a.footer-logo:hover,
.social a:hover {opacity: 0.75;}
}
/*====================*/
/*  Popups            */
/*====================*/
.popup-wrapper {position: fixed;z-index: 1000;left: 0;top: 0;width: 100%;height: 100%;left: -100%;transition-delay: 0.3s;display: block;}
.popup-wrapper .bg-layer {position: absolute;left: 0;right: 0;top: -6.25rem;bottom: -6.25rem;background: var(--bg-overlay);backdrop-filter: var(--blur);opacity: 0;transition: opacity var(--transition-1);}
.popup-wrapper.active {left: 0;transition-delay: 0s;}
.popup-wrapper.active .bg-layer {opacity: 1;}
.popup-content {position: absolute;inset: 0;font-size: 0;text-align: center;letter-spacing: 0;padding: 0.75rem;overflow: auto;-webkit-overflow-scrolling: touch;backface-visibility: hidden;opacity: 0;visibility: hidden;transform: translateY(6.25rem);transition: var(--transition-1);}
.popup-content.active {transform: translateY(0%);opacity: 1;visibility: visible;}
.popup-content:after {content: "";display: inline-block;vertical-align: middle;height: 100%;}
.popup-content .layer-close {position: absolute;left: 0;bottom: 0;right: 0;height: 625rem;}
.popup-container {position: relative;display: inline-block;vertical-align: middle;width: 100%;max-width: 42.5rem;background: var(--bg-light);border-radius: 1.5rem;}
.popup-container.size-2 {max-width: 55.625rem;}
.popup-container.size-3 {max-width: 65rem;}
.popup-container.size-4 {max-width: 60rem;}
.popup-container .btn-close {position: absolute;z-index: 10;top: 0.75rem;right: 0.75rem;}
[data-rel=notebook-edit] .popup-container {background: var(--clr-white);}
.popup-align {position: relative;z-index: 1;padding: 3.75rem 2.75rem;}
.popup-info > * + * {margin-top: var(--sp-xs);}
.popup-info > * + .btn,
.popup-info > * + .btn-wrap {margin-top: calc(var(--sp-xs) * 1.5);}
.popup-img {position: relative;overflow: hidden;display: block;width: 40.541%;aspect-ratio: 1.1707;margin-inline: auto;}
.popup-img img {position: absolute;left: 0;top: 0;width: 100%;height: 100%;-o-object-fit: cover;object-fit: cover;content-visibility: auto;}
.popup-entry {display: grid;}
.popup-title-wrap {gap: var(--sp-sm);display: flex;align-items: center;justify-content: center;}
.popup-title-wrap .is-active {pointer-events: none;}
.popup-title-wrap > *:not(.is-active) {opacity: 0.35;transition: var(--transition-1);}
.popup-block {display: none;}
.open-popup {cursor: pointer;}
@media (min-width: 768px) {
[data-rel=notebook-edit] .popup-align {padding: 2.5rem;}
.popup-entry {grid-template-columns: auto 42%;}
.popup-entry .popup-align {padding: 3rem 2rem;align-self: center;}
.popup-block {--clr-title: #FFF;position: relative;gap: var(--sp-xs);display: flex;flex-direction: column;justify-content: center;border-radius: 0 1.5rem 1.5rem 0;background-color: var(--clr-secondary);padding: 3rem 2rem;}
.popup-block .popup-img {width: 100%;aspect-ratio: 0.833333;}
}
@media (min-width: 1200px) {
.popup-entry {grid-template-columns: auto 24.5rem;}
.popup-entry .popup-align {padding: 3.75rem;}
.popup-entry .popup-info > * + * {margin-top: var(--sp-sm);}
.popup-block {padding: 3.75rem 2.75rem;}
.popup-title-wrap > *:not(.is-active):hover {opacity: 1;}
}
@media (max-width: 575px) {
.popup-container .btn-close {top: 0.5rem;right: 0.5rem;}
.popup-align {padding: 2rem 1rem;}
}
/*====================*/
/*  Informer          */
/*====================*/
.informer {--inf-pd: var(--sp-sm);--inf-gap: var(--sp-xs);overflow: hidden;position: fixed;z-index: 98;width: calc(100% - var(--inf-gap) * 2);padding: var(--inf-pd);border-radius: 1.5rem;background-color: var(--bg-light);box-shadow: var(--box-shadow);transition: var(--transition-1);opacity: 0;visibility: hidden;display: block;}
.informer.is-active {opacity: 1;visibility: visible;transform: translate(-50%, -50%);}
.informer > * + * {margin-top: var(--inf-gap);}
.informer-img {position: relative;z-index: 1;pointer-events: none;display: block;width: 100%;aspect-ratio: 1.846;border-radius: 1.5rem;}
.informer-img img {position: absolute;left: 0;top: 0;width: 100%;height: 100%;-o-object-fit: cover;object-fit: cover;content-visibility: auto;border-radius: 1.5rem;}
.informer-close {position: absolute;z-index: 10;top: 0.75rem;right: 0.75rem;margin: 0;}
.promotional-informer {top: 50%;left: 50%;transform: translate(-50%, 100%);max-width: 42.5rem;}
@media (max-width: 575px) {
.informer-close {top: 0.25rem;right: 0.25rem;}
}
/*====================*/
/*  Cookies           */
/*====================*/
.cookies-informer {--cookie-inset: 0.75rem;--cookie-pd: 1rem;--cookie-gap: 0.75rem;position: fixed;bottom: var(--cookie-inset);right: var(--cookie-inset);transform: translate(0%, 100%);max-width: min(100%, 25rem);width: calc(100% - var(--cookie-inset) * 2);padding: var(--cookie-pd);border-radius: 1.5rem;background: var(--clr-secondary);opacity: 0;visibility: hidden;backface-visibility: hidden;transition: var(--transition-1);display: block;}
.cookies-informer .btn-close {position: absolute;top: 0.75rem;right: 0.75rem;}
.cookies-informer.is-active {z-index: 500;visibility: visible;opacity: 1;transform: translate(0%, 0%);}
.cookies-informer-inner {width: 100%;text-align: center;}
.cookies-informer-inner > * + * {margin-top: var(--cookie-gap);}
.cookies-informer-inner .text {color: var(--clr-title);}
.cookies-informer-inner .text span {color: var(--clr-primary);}
.cookies-informer-inner .text a:not(.btn) {color: var(--clr-title);}
.cookies-informer-inner .btn-wrap {gap: 0.75rem;display: flex;}
.cookies-informer-inner .btn-wrap > * {width: calc(50% - 0.75rem + 0.375rem);padding-inline: 1em;}
.cookies-img {position: relative;overflow: hidden;display: block;width: 30%;aspect-ratio: 1.139;margin-inline: auto;}
.cookies-img img {width: 100%;}
@media (min-width: 1200px) {
.cookies-informer {--cookie-pd: 1.25rem;--cookie-inset: 1.25rem;--cookie-gap: 1.125rem;}
}
/*====================*/
/*  Page 404          */
/*====================*/
.page-404 {margin: 0;padding-block: 2.5rem 0;width: 100%;display: flex;justify-content: center;}
.page-404-block {gap: clamp(2rem, -1.9167rem + 6.5972vw, 6rem);display: grid;}
.page-404-img {position: relative;overflow: hidden;display: block;align-self: flex-end;width: calc(100% + 1.5rem);aspect-ratio: 1.5;margin-inline: -0.75rem;}
.page-404-img img {width: 100%;-o-object-fit: cover;object-fit: cover;}
.page-404-img:first-child {display: none;}
.page-404-icon {display: block;width: min(21.25rem, 75%);margin-inline: auto;}
.page-404-icon img {width: 100%;}
.page-404-inner {align-self: center;}
.page-404-inner > * + * {margin-top: 1rem;}
.page-404-inner > .page-404-icon + * {margin-top: var(--sp-sm);}
.page-404-inner .text {width: 85%;margin-inline: auto;}
@media (min-width: 1200px) {
.page-404 {min-height: calc(100svh - var(--h-height) - var(--h-footer));}
.page-404-block {grid-template-columns: 27.622% auto 29.9391%;height: 100%;}
.page-404-img {width: 100%;margin-inline: 0;}
.page-404-img:first-child {display: block;}
.page-404-inner .text {width: 100%;}
}
@media (min-width: 1200px) and (max-height: 750px) {
.page-404 {min-height: calc(100svh - var(--h-height));}
}