@import url("https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700;800;900&family=Open+Sans:wght@400;600;700;800&family=Roboto:wght@400;500;700;900&display=swap");

:root {
    --paper: #ffffff;
    --sky: #edf6fb;
    --wash: #f7fbfe;
    --ink: #10263a;
    --muted: #5c7182;
    --line: rgba(47, 94, 127, 0.16);
    --line-strong: rgba(47, 94, 127, 0.3);
    --teal: #5e8caf;
    --teal-dark: #2f5e7f;
    --teal-ink: #10263a;
    --mint: #dcebf5;
    --accent: #95b8d1;
    --accent-soft: #dcebf5;
    --brand: #95b8d1;
    --brand-dark: #2f5e7f;
    --brand-deep: #18334b;
    --brand-mid: #5e8caf;
    --brand-light: #dcebf5;
    --brand-ice: #f6fbfe;
    --deep-navy: #10263a;
    --royal-blue: #2f5e7f;
    --harbor-blue: #18334b;
    --sky-blue: #95b8d1;
    --petal-blue: #dcebf5;
    --shadow: 0 24px 70px rgba(47, 94, 127, 0.16);
    --logo-sky-glow: drop-shadow(0 0 2px rgba(247, 251, 254, 0.98)) drop-shadow(0 0 12px rgba(220, 235, 245, 0.94)) drop-shadow(0 0 30px rgba(149, 184, 209, 0.62));
    --logo-sky-glow-strong: drop-shadow(0 0 3px rgba(255, 255, 255, 1)) drop-shadow(0 0 18px rgba(220, 235, 245, 0.98)) drop-shadow(0 0 44px rgba(149, 184, 209, 0.78));
    --ease-out: cubic-bezier(0.19, 1, 0.22, 1);
    --bar-height: 104px;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background:
        linear-gradient(135deg, rgba(149, 184, 209, 0.12) 0 25%, transparent 25% 50%, rgba(149, 184, 209, 0.08) 50% 75%, transparent 75%) 0 0 / 360px 360px,
        repeating-linear-gradient(0deg, transparent 0 31px, rgba(47, 94, 127, 0.055) 31px 32px),
        repeating-linear-gradient(90deg, transparent 0 63px, rgba(47, 94, 127, 0.04) 63px 64px),
        var(--paper);
    color: var(--ink);
    font-family: "Be Vietnam Pro", "Open Sans", Roboto, Arial, Helvetica, sans-serif;
    line-height: 1.5;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, transparent 0 47px, rgba(47, 94, 127, 0.045) 47px 48px),
        linear-gradient(90deg, transparent 0 74px, rgba(149, 184, 209, 0.16) 74px 77px, transparent 77px) 28px 0 / 420px 260px,
        repeating-linear-gradient(115deg, rgba(47, 94, 127, 0.045) 0 1px, transparent 1px 18px);
    opacity: 0.58;
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        linear-gradient(115deg, transparent 0 82%, rgba(149, 184, 209, 0.2) 82% 83%, transparent 83%) 0 120px / 420px 260px,
        linear-gradient(25deg, transparent 0 72%, rgba(47, 94, 127, 0.08) 72% 73%, transparent 73%) 160px 40px / 520px 320px,
        linear-gradient(0deg, transparent 0 42%, rgba(149, 184, 209, 0.1) 42% 43%, transparent 43%) 60px 420px / 360px 190px,
        linear-gradient(90deg, transparent 0 48%, rgba(47, 94, 127, 0.09) 48% 49%, transparent 49%) 300px 240px / 320px 220px;
    opacity: 0.7;
}

@keyframes topbarDrop {
    from {
        opacity: 0;
        transform: translateY(-18px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes panelRise {
    from {
        opacity: 0;
        transform: translateY(34px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeSlide {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes markPulse {
    0%, 100% {
        transform: perspective(160px) rotateX(54deg) rotate(-8deg) scale(1);
        opacity: 0.18;
    }
    50% {
        transform: perspective(160px) rotateX(54deg) rotate(-8deg) scale(1.08);
        opacity: 0.32;
    }
}

@keyframes logoFloat {
    0%, 100% {
        transform: translate3d(0, 0, 0) rotate(0deg);
    }
    50% {
        transform: translate3d(0, -8px, 0) rotate(-1deg);
    }
}

@keyframes logoGlow {
    0%, 100% {
        opacity: 0.24;
        transform: scale(0.9);
    }
    50% {
        opacity: 0.48;
        transform: scale(1.12);
    }
}

@keyframes trustSweep {
    from {
        transform: translateX(-120%) skewX(-18deg);
    }
    to {
        transform: translateX(220%) skewX(-18deg);
    }
}

@keyframes eduFloatSoft {
    0%, 100% {
        transform: translate3d(0, 0, 0) rotate(var(--shape-rotate, 0deg));
    }
    50% {
        transform: translate3d(var(--shape-x, 14px), var(--shape-y, -16px), 0) rotate(calc(var(--shape-rotate, 0deg) + 7deg));
    }
}

@keyframes eduDriftLong {
    0%, 100% {
        transform: translate3d(0, 0, 0) rotate(var(--shape-rotate, 0deg));
    }
    35% {
        transform: translate3d(calc(var(--shape-x, 16px) * -0.55), var(--shape-y, -18px), 0) rotate(calc(var(--shape-rotate, 0deg) - 5deg));
    }
    70% {
        transform: translate3d(var(--shape-x, 16px), calc(var(--shape-y, -18px) * -0.45), 0) rotate(calc(var(--shape-rotate, 0deg) + 6deg));
    }
}

@keyframes eduBobSoft {
    0%, 100% {
        transform: translate3d(0, 0, 0) rotate(var(--shape-rotate, 0deg)) scale(1);
    }
    50% {
        transform: translate3d(var(--shape-x, 10px), var(--shape-y, -12px), 0) rotate(calc(var(--shape-rotate, 0deg) + 4deg)) scale(1.04);
    }
}

button,
input,
select,
textarea {
    font: inherit;
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    display: grid;
    grid-template-columns: minmax(360px, 1fr) minmax(260px, auto) auto;
    align-items: center;
    gap: 12px;
    min-height: var(--bar-height);
    padding: 10px clamp(16px, 4vw, 52px);
    border-bottom: 1px solid rgba(220, 235, 245, 0.28);
    background:
        linear-gradient(115deg, rgba(24, 51, 75, 0.98), rgba(47, 94, 127, 0.96) 58%, rgba(94, 140, 175, 0.96)),
        #18334b;
    color: #fff;
    box-shadow: 0 16px 34px rgba(16, 38, 58, 0.22);
    backdrop-filter: blur(12px);
    animation: topbarDrop 520ms var(--ease-out) both;
}

.topbar-brand {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 14px;
    color: inherit;
    text-decoration: none;
}

.topbar-logo {
    width: 84px;
    height: 84px;
    object-fit: contain;
    filter: var(--logo-sky-glow) drop-shadow(0 8px 18px rgba(0, 0, 0, 0.18));
}

.topbar-brand-text {
    display: grid;
    min-width: 0;
    gap: 4px;
}

.topbar-brand-text strong {
    color: #fff;
    font-size: clamp(14px, 1.22vw, 18px);
    font-weight: 900;
    letter-spacing: 0.02em;
    line-height: 1.08;
    text-transform: uppercase;
}

.topbar-brand-text span {
    color: rgba(255, 255, 255, 0.82);
    font-size: clamp(12px, 1vw, 14px);
    font-weight: 800;
    line-height: 1.15;
}

.topbar-trust {
    position: relative;
    display: inline-flex;
    min-width: 0;
    max-width: 100%;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 10px 15px;
    border: 1px solid rgba(220, 235, 245, 0.36);
    border-radius: 999px;
    background:
        linear-gradient(135deg, rgba(220, 235, 245, 0.22), rgba(149, 184, 209, 0.1)),
        rgba(255, 255, 255, 0.08);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 0 30px rgba(149, 184, 209, 0.2);
    color: rgba(255, 255, 255, 0.9);
    font-size: 11px;
    line-height: 1.28;
    text-align: center;
}

.topbar-trust::after {
    content: "";
    position: absolute;
    inset: -40% auto -40% 0;
    width: 34%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent);
    animation: trustSweep 5.8s ease-in-out 1.1s infinite;
}

.topbar-trust strong {
    position: relative;
    z-index: 1;
    min-width: 0;
    font-weight: 800;
}

.topbar-nav {
    display: flex;
    min-width: 0;
    justify-content: center;
    gap: 6px;
    overflow-x: visible;
    padding: 2px 4px;
    scrollbar-width: thin;
}

.topbar-course,
.topbar-action {
    min-height: 38px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

.topbar-course {
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 0 12px;
    color: rgba(255, 255, 255, 0.78);
    background: transparent;
    cursor: pointer;
    transition: color 160ms ease, background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.topbar-course:hover,
.topbar-course:focus-visible {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.45);
    transform: translateY(-1px);
}

.topbar-course.is-active {
    color: var(--teal-dark);
    background: #fff;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14);
}

.topbar-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    color: #18334b;
    background: #edf6fb;
    text-decoration: none;
    box-shadow: 0 10px 26px rgba(149, 184, 209, 0.18);
    transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.topbar-action:hover,
.topbar-action:focus-visible {
    background: #fff;
    box-shadow: 0 16px 34px rgba(149, 184, 209, 0.3);
    transform: translateY(-1px);
}

.course-page {
    position: relative;
    z-index: 1;
    min-height: 100vh;
}

.course-entry {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    min-height: calc(100vh - var(--bar-height));
    scroll-margin-top: calc(var(--bar-height) + 18px);
    overflow: hidden;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.34), transparent 30%, rgba(255, 255, 255, 0.2)),
        linear-gradient(112deg, #f6fbfe 0%, #dcebf5 46%, #ffffff 46%, #f7fbfe 100%);
}

.course-entry::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        repeating-linear-gradient(0deg, transparent 0 28px, rgba(47, 94, 127, 0.1) 28px 29px),
        linear-gradient(90deg, transparent 0 22%, rgba(255, 255, 255, 0.3) 22% 22.6%, transparent 22.6%),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.13) 0 1px, transparent 1px 160px),
        repeating-linear-gradient(0deg, rgba(16, 38, 58, 0.07) 0 1px, transparent 1px 160px);
    opacity: 0.48;
}

.course-entry::after {
    content: "";
    position: absolute;
    right: clamp(-70px, -4vw, -24px);
    top: clamp(56px, 9vw, 128px);
    z-index: -1;
    width: clamp(220px, 26vw, 420px);
    height: clamp(140px, 17vw, 270px);
    background:
        linear-gradient(90deg, rgba(47, 94, 127, 0.22), rgba(47, 94, 127, 0.02)) 48% 67% / 4px 36% no-repeat,
        radial-gradient(circle at 51% 97%, rgba(47, 94, 127, 0.2) 0 4%, transparent 4.5%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.46), rgba(149, 184, 209, 0.18));
    clip-path: polygon(50% 0, 100% 30%, 50% 62%, 0 30%);
    filter: drop-shadow(0 24px 44px rgba(47, 94, 127, 0.18));
    opacity: 0.72;
    display: none;
}

.shape-field,
.section-shape-field {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.section-shape-field {
    color: #2f5e7f;
}

.lottie-field {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.lottie-asset {
    position: absolute;
    display: block;
    width: var(--lottie-size, clamp(150px, 18vw, 320px));
    aspect-ratio: 1;
    opacity: var(--lottie-opacity, 0.34);
    transform: translate3d(0, 0, 0) rotate(var(--lottie-rotate, 0deg));
    filter: saturate(1.04) contrast(1.02) drop-shadow(0 24px 42px rgba(47, 94, 127, 0.14));
    mix-blend-mode: multiply;
    animation: lottieDrift var(--lottie-speed, 18s) ease-in-out infinite;
    animation-delay: var(--lottie-delay, 0s);
    will-change: transform;
}

.lottie-asset iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    pointer-events: none;
    transform: scale(var(--lottie-scale, 1.06));
    transform-origin: center;
}

@keyframes lottieDrift {
    0%, 100% {
        transform: translate3d(0, 0, 0) rotate(var(--lottie-rotate, 0deg)) scale(1);
    }
    50% {
        transform: translate3d(var(--lottie-x, 12px), var(--lottie-y, -16px), 0) rotate(calc(var(--lottie-rotate, 0deg) + 3deg)) scale(1.02);
    }
}

.course-card > :not(.shape-field) {
    position: relative;
    z-index: 1;
}

.css-edu-icon {
    position: absolute;
    display: block;
    width: var(--icon-size, clamp(84px, 7vw, 138px));
    height: var(--icon-size, clamp(84px, 7vw, 138px));
    color: currentColor;
    --stroke: max(4px, calc(var(--icon-size, 120px) * 0.044));
    opacity: var(--icon-opacity, 0.16);
    filter: drop-shadow(0 14px 22px rgba(47, 94, 127, 0.1));
    transform-origin: center;
    animation: var(--shape-animation, eduFloatSoft) var(--shape-speed, 12s) ease-in-out infinite;
    animation-delay: var(--shape-delay, 0s);
    will-change: transform;
}

.css-edu-icon::before,
.css-edu-icon::after,
.css-edu-icon > span {
    position: absolute;
    box-sizing: border-box;
    display: block;
}

.css-edu-icon::before,
.css-edu-icon::after {
    content: "";
}

.css-edu-icon > span {
    border: 0;
    background: transparent;
}

.css-icon-education {
    --icon-size: clamp(86px, 7vw, 136px);
}

.css-icon-education::before {
    left: 10%;
    top: 22%;
    width: 80%;
    height: 26%;
    border: var(--stroke) solid currentColor;
    transform: rotate(-2deg) skewX(-18deg);
    border-radius: 5px 9px 5px 9px;
}

.css-icon-education::after {
    left: 28%;
    top: 48%;
    width: 44%;
    height: 22%;
    border: var(--stroke) solid currentColor;
    border-top: 0;
    border-radius: 0 0 22px 22px;
}

.css-icon-education > span:nth-child(1) {
    left: 49%;
    top: 35%;
    width: 12%;
    height: 12%;
    border: var(--stroke) solid currentColor;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.02);
}

.css-icon-education > span:nth-child(2) {
    left: 26%;
    top: 43%;
    width: var(--stroke);
    height: 31%;
    background: currentColor;
    transform: rotate(8deg);
    transform-origin: top center;
    border-radius: 999px;
}

.css-icon-education > span:nth-child(3) {
    left: 18%;
    top: 69%;
    width: 17%;
    height: 17%;
    border: var(--stroke) solid currentColor;
    clip-path: polygon(50% 0, 100% 46%, 82% 100%, 18% 100%, 0 46%);
    background: currentColor;
}

.css-icon-education > span:nth-child(4) {
    left: 18%;
    top: 32%;
    width: 65%;
    height: var(--stroke);
    background: currentColor;
    transform: rotate(18deg);
    border-radius: 999px;
}

.css-icon-diploma {
    --icon-size: clamp(90px, 7.5vw, 146px);
}

.css-icon-diploma::before {
    left: 14%;
    top: 41%;
    width: 74%;
    height: 21%;
    border: var(--stroke) solid currentColor;
    border-radius: 8px;
    transform: rotate(-37deg);
}

.css-icon-diploma::after {
    left: 40%;
    top: 40%;
    width: 22%;
    height: 22%;
    border: var(--stroke) solid currentColor;
    border-radius: 999px;
    background:
        radial-gradient(circle, currentColor 0 19%, transparent 21%),
        transparent;
}

.css-icon-diploma > span:nth-child(1) {
    left: 45%;
    top: 58%;
    width: 8%;
    height: 22%;
    border-left: var(--stroke) solid currentColor;
    border-bottom: var(--stroke) solid currentColor;
    transform: rotate(-14deg);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 72%, 0 100%);
}

.css-icon-diploma > span:nth-child(2) {
    left: 54%;
    top: 57%;
    width: 8%;
    height: 22%;
    border-right: var(--stroke) solid currentColor;
    border-bottom: var(--stroke) solid currentColor;
    transform: rotate(14deg);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 72%, 0 100%);
}

.css-icon-diploma > span:nth-child(3) {
    left: 16%;
    top: 37%;
    width: 18%;
    height: 23%;
    border: var(--stroke) solid currentColor;
    border-left: 0;
    border-radius: 0 999px 999px 0;
    transform: rotate(-37deg);
}

.css-icon-diploma > span:nth-child(4) {
    right: 10%;
    top: 41%;
    width: 17%;
    height: 22%;
    border: var(--stroke) solid currentColor;
    border-right: 0;
    border-radius: 999px 0 0 999px;
    transform: rotate(-37deg);
}

.css-icon-diploma > span:nth-child(5) {
    left: 28%;
    top: 48%;
    width: 30%;
    height: var(--stroke);
    background: currentColor;
    transform: rotate(-37deg);
    border-radius: 999px;
}

.css-icon-triangular-ruler {
    --icon-size: clamp(86px, 7vw, 134px);
}

.css-icon-triangular-ruler::before {
    left: 13%;
    top: 13%;
    width: 75%;
    height: 75%;
    border-left: var(--stroke) solid currentColor;
    border-bottom: var(--stroke) solid currentColor;
    border-radius: 0 0 0 8px;
}

.css-icon-triangular-ruler::after {
    left: 8%;
    top: 49%;
    width: 104%;
    height: var(--stroke);
    background: currentColor;
    transform: rotate(45deg);
    transform-origin: center;
    border-radius: 999px;
}

.css-icon-triangular-ruler > span:nth-child(1) {
    left: 33%;
    top: 51%;
    width: 30%;
    height: 30%;
    border-left: var(--stroke) solid currentColor;
    border-bottom: var(--stroke) solid currentColor;
}

.css-icon-triangular-ruler > span:nth-child(2) {
    left: 17%;
    bottom: 12%;
    width: 64%;
    height: 16%;
    background: repeating-linear-gradient(90deg, currentColor 0 3%, transparent 3% 11%);
    clip-path: inset(0 0 0 0);
}

.css-icon-triangular-ruler > span:nth-child(3) {
    left: 9%;
    top: 22%;
    width: 14%;
    height: 55%;
    background: repeating-linear-gradient(0deg, currentColor 0 3%, transparent 3% 12%);
}

.css-icon-triangular-ruler > span:nth-child(4) {
    left: 33%;
    top: 61%;
    width: 40%;
    height: var(--stroke);
    background: currentColor;
    transform: rotate(45deg);
    transform-origin: left center;
    border-radius: 999px;
}

.css-icon-pencil {
    --icon-size: clamp(88px, 7.5vw, 142px);
}

.css-icon-pencil::before {
    left: 14%;
    top: 44%;
    width: 68%;
    height: 17%;
    border: var(--stroke) solid currentColor;
    border-radius: 5px;
    transform: rotate(-45deg);
}

.css-icon-pencil::after {
    left: 72%;
    top: 22%;
    width: 19%;
    height: 17%;
    border: var(--stroke) solid currentColor;
    border-radius: 4px;
    transform: rotate(-45deg);
}

.css-icon-pencil > span:nth-child(1) {
    left: 6%;
    top: 70%;
    width: 20%;
    height: 20%;
    border: var(--stroke) solid currentColor;
    transform: rotate(-45deg);
    clip-path: polygon(0 50%, 100% 0, 100% 100%);
}

.css-icon-pencil > span:nth-child(2) {
    left: 12%;
    top: 73%;
    width: 8%;
    height: 8%;
    background: currentColor;
    transform: rotate(-45deg);
    clip-path: polygon(0 50%, 100% 0, 100% 100%);
}

.css-icon-pencil > span:nth-child(3) {
    left: 65%;
    top: 30%;
    width: var(--stroke);
    height: 22%;
    background: currentColor;
    transform: rotate(45deg);
    border-radius: 999px;
}

.css-icon-pencil > span:nth-child(4) {
    left: 37%;
    top: 54%;
    width: 32%;
    height: var(--stroke);
    background: currentColor;
    transform: rotate(-45deg);
    border-radius: 999px;
}

.css-icon-book {
    --icon-size: clamp(92px, 7.8vw, 148px);
}

.css-icon-book::before {
    left: 13%;
    top: 21%;
    width: 38%;
    height: 58%;
    border: var(--stroke) solid currentColor;
    border-right: 0;
    border-radius: 18px 6px 8px 14px;
}

.css-icon-book::after {
    right: 13%;
    top: 21%;
    width: 38%;
    height: 58%;
    border: var(--stroke) solid currentColor;
    border-left: 0;
    border-radius: 6px 18px 14px 8px;
}

.css-icon-book > span:nth-child(1) {
    left: 49%;
    top: 22%;
    width: var(--stroke);
    height: 57%;
    background: currentColor;
    border-radius: 999px;
}

.css-icon-book > span:nth-child(2) {
    left: 15%;
    bottom: 17%;
    width: 70%;
    height: var(--stroke);
    background: currentColor;
    border-radius: 999px;
}

.css-icon-book > span:nth-child(3) {
    left: 24%;
    top: 38%;
    width: 18%;
    height: var(--stroke);
    background: currentColor;
    border-radius: 999px;
    transform: rotate(6deg);
}

.css-icon-book > span:nth-child(4) {
    right: 24%;
    top: 38%;
    width: 18%;
    height: var(--stroke);
    background: currentColor;
    border-radius: 999px;
    transform: rotate(-6deg);
}

.css-icon-book > span:nth-child(5) {
    left: 24%;
    top: 52%;
    width: 18%;
    height: var(--stroke);
    background: currentColor;
    border-radius: 999px;
    transform: rotate(5deg);
}

.css-icon-book > span:nth-child(6) {
    right: 24%;
    top: 52%;
    width: 18%;
    height: var(--stroke);
    background: currentColor;
    border-radius: 999px;
    transform: rotate(-5deg);
}

.css-icon-school-bag {
    --icon-size: clamp(88px, 7.4vw, 142px);
}

.css-icon-school-bag::before {
    left: 24%;
    top: 28%;
    width: 52%;
    height: 58%;
    border: var(--stroke) solid currentColor;
    border-radius: 16px 16px 11px 11px;
}

.css-icon-school-bag::after {
    left: 38%;
    top: 14%;
    width: 24%;
    height: 20%;
    border: var(--stroke) solid currentColor;
    border-bottom: 0;
    border-radius: 999px 999px 0 0;
}

.css-icon-school-bag > span:nth-child(1) {
    left: 33%;
    top: 38%;
    width: 34%;
    height: 22%;
    border: var(--stroke) solid currentColor;
    border-top: 0;
    border-radius: 0 0 12px 12px;
}

.css-icon-school-bag > span:nth-child(2) {
    left: 36%;
    top: 64%;
    width: 28%;
    height: 15%;
    border: var(--stroke) solid currentColor;
    border-radius: 10px;
}

.css-icon-school-bag > span:nth-child(3) {
    left: 18%;
    top: 48%;
    width: 10%;
    height: 29%;
    border: var(--stroke) solid currentColor;
    border-right: 0;
    border-radius: 999px 0 0 999px;
}

.css-icon-school-bag > span:nth-child(4) {
    right: 18%;
    top: 48%;
    width: 10%;
    height: 29%;
    border: var(--stroke) solid currentColor;
    border-left: 0;
    border-radius: 0 999px 999px 0;
}

.css-icon-school-bag > span:nth-child(5) {
    left: 23%;
    top: 18%;
    width: 13%;
    height: 21%;
    border: var(--stroke) solid currentColor;
    border-radius: 3px;
    transform: rotate(-12deg);
}

.css-icon-school-bag > span:nth-child(6) {
    right: 24%;
    top: 17%;
    width: 12%;
    height: 23%;
    border: var(--stroke) solid currentColor;
    border-radius: 3px;
    transform: rotate(13deg);
}

/* css-icon-mask-start */
.css-icon-education {
    --icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27512%27%20height%3D%27512%27%20viewBox%3D%270%200%20512%20512%27%20version%3D%271.1%27%3E%3Cpath%20d%3D%27M%20144%20138.100%20C%2083.225%20156.735%2C%2031.789%20172.459%2C%2029.697%20173.043%20C%2024.940%20174.372%2C%2022%20177.238%2C%2022%20180.545%20C%2022%20185.390%2C%2025.466%20187.188%2C%2047.750%20193.903%20L%2069%20200.306%2069%20254.954%20L%2069%20309.601%2064.718%20311.682%20C%2058.167%20314.865%2C%2054.364%20318.556%2C%2051.404%20324.606%20C%2048.867%20329.793%2C%2048.743%20330.683%2C%2049.327%20339.574%20C%2049.928%20348.719%2C%2049.753%20349.831%2C%2043.974%20373.606%20C%2040.688%20387.124%2C%2038%20399.460%2C%2038%20401.020%20C%2038%20402.891%2C%2038.895%20404.559%2C%2040.635%20405.927%20C%2043.177%20407.927%2C%2044.407%20408%2C%2075.588%20408%20C%2097.143%20408%2C%20108.717%20407.630%2C%20110.343%20406.890%20C%20115.608%20404.491%2C%20115.518%20403.001%2C%20108.398%20374.710%20C%20101.981%20349.209%2C%20101.833%20348.332%2C%20102.917%20342.300%20C%20104.165%20335.356%2C%20103.268%20329.406%2C%20100.011%20323.022%20C%2097.657%20318.407%2C%2090.930%20312.462%2C%2086.355%20310.952%20L%2083%20309.845%2083%20257.422%20C%2083%20228.590%2C%2083.290%20205%2C%2083.643%20205%20C%2083.997%20205%2C%2089.622%20206.650%2C%2096.143%20208.667%20L%20108%20212.334%20108.032%20258.417%20C%20108.056%20293.953%2C%20108.353%20304.880%2C%20109.327%20306.161%20C%20111.251%20308.691%2C%20130.884%20319.230%2C%20146%20325.846%20C%20226.779%20361.206%2C%20307.430%20357.699%2C%20387.776%20315.334%20C%20394.527%20311.774%2C%20400.940%20307.907%2C%20402.026%20306.742%20C%20403.932%20304.696%2C%20404%20303.040%2C%20404%20258.484%20L%20404%20212.344%20444.250%20200.088%20C%20466.387%20193.347%2C%20485.505%20187.188%2C%20486.734%20186.403%20C%20487.963%20185.617%2C%20489.258%20183.822%2C%20489.611%20182.414%20C%20490.613%20178.421%2C%20488.620%20175.396%2C%20483.822%20173.627%20C%20477.298%20171.222%2C%20256.303%20103.983%2C%20255.338%20104.109%20C%20254.877%20104.170%2C%20204.775%20119.465%2C%20144%20138.100%20M%20161%20147.959%20C%2049.223%20182.128%2C%2054.091%20180.582%2C%2056%20181.318%20C%2060.006%20182.862%2C%20255.029%20242%2C%20256.115%20242%20C%20257.820%20242%2C%20455.303%20181.823%2C%20456.270%20181.009%20C%20456.849%20180.521%2C%20264.742%20121.133%2C%20257%20119.407%20C%20256.175%20119.223%2C%20212.975%20132.071%2C%20161%20147.959%20M%20122.239%20257.679%20L%20122.500%20298.357%20137%20305.646%20C%20197.259%20335.936%2C%20259.055%20343.126%2C%20319.900%20326.928%20C%20339.379%20321.742%2C%20365.229%20311.405%2C%20382.750%20301.796%20L%20390%20297.819%20390%20257.301%20L%20390%20216.783%20387.750%20217.366%20C%20386.512%20217.687%2C%20356.726%20226.736%2C%20321.559%20237.475%20C%20286.391%20248.214%2C%20256.947%20257%2C%20256.128%20257%20C%20255.310%20257%2C%20225.113%20248%2C%20189.025%20237%20C%20152.936%20226%2C%20123.087%20217%2C%20122.694%20217%20C%20122.300%20217%2C%20122.095%20235.305%2C%20122.239%20257.679%20M%2070.424%20324.861%20C%2062.648%20328.458%2C%2060.679%20338.924%2C%2066.613%20345.118%20C%2074.943%20353.812%2C%2089%20348.401%2C%2089%20336.500%20C%2089%20326.573%2C%2079.539%20320.645%2C%2070.424%20324.861%20M%2058.575%20374.784%20C%2056.564%20382.878%2C%2054.682%20390.288%2C%2054.392%20391.250%20C%2053.901%20392.880%2C%2055.382%20393%2C%2075.933%20393%20C%2088.070%20393%2C%2098%20392.765%2C%2098%20392.477%20C%2098%20390.998%2C%2090.630%20362.395%2C%2090.090%20361.779%20C%2089.742%20361.382%2C%2087.217%20361.753%2C%2084.479%20362.603%20C%2078.629%20364.417%2C%2069.788%20363.976%2C%2065.278%20361.644%20L%2062.231%20360.068%2058.575%20374.784%27%20stroke%3D%27none%27%20fill%3D%27black%27%20fill-rule%3D%27evenodd%27%2F%3E%3C%2Fsvg%3E");
}

.css-icon-diploma {
    --icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27512%27%20height%3D%27512%27%20viewBox%3D%270%200%20512%20512%27%20version%3D%271.1%27%3E%3Cpath%20d%3D%27M%20339.950%2071.282%20C%20339.097%2071.952%2C%20325.639%2088.700%2C%20310.044%20108.500%20C%20279.283%20147.555%2C%20264.413%20165.696%2C%20249.799%20182%20L%20240.388%20192.500%20235.229%20192.161%20C%20225.484%20191.520%2C%20220.301%20194.930%2C%20214.543%20205.771%20C%20211.996%20210.566%2C%20210.566%20211.996%2C%20205.771%20214.543%20C%20194.933%20220.299%2C%20191.339%20225.770%2C%20192.240%20235.142%20C%20192.710%20240.035%2C%20192.692%20240.070%2C%20186.978%20245.360%20C%20172.958%20258.340%2C%20150.129%20277.170%2C%20112.753%20306.585%20C%2090.614%20324.008%2C%2071.937%20338.965%2C%2071.250%20339.823%20C%2068.959%20342.681%2C%2069.951%20346.184%2C%2076.144%20357.096%20C%2093.961%20388.489%2C%20123.511%20418.039%2C%20154.904%20435.856%20C%20165.765%20442.020%2C%20169.161%20442.982%2C%20172.059%20440.718%20C%20172.917%20440.048%2C%20186.374%20423.300%2C%20201.965%20403.500%20C%20229.537%20368.483%2C%20251.468%20341.516%2C%20254.253%20339.205%20C%20255.377%20338.272%2C%20256.785%20341.313%2C%20262.062%20356.079%20C%20265.603%20365.986%2C%20269.305%20374.971%2C%20270.289%20376.046%20C%20273.906%20379.997%2C%20277.729%20378.676%2C%20286.819%20370.335%20L%20295.139%20362.701%20306.487%20363.310%20C%20316.900%20363.868%2C%20318.047%20363.750%2C%20320.417%20361.886%20C%20324.056%20359.024%2C%20323.762%20356.519%2C%20317.905%20340.465%20C%20315.103%20332.784%2C%20311.095%20321.704%2C%20308.998%20315.843%20L%20305.186%20305.186%20315.843%20308.998%20C%20321.704%20311.095%2C%20332.784%20315.103%2C%20340.465%20317.905%20C%20356.519%20323.762%2C%20359.024%20324.056%2C%20361.886%20320.417%20C%20363.750%20318.047%2C%20363.868%20316.900%2C%20363.310%20306.487%20L%20362.701%20295.139%20370.335%20286.819%20C%20378.138%20278.315%2C%20379.370%20275.428%2C%20377.046%20271.085%20C%20376.439%20269.953%2C%20369.164%20266.796%2C%20357.104%20262.433%20C%20341.646%20256.841%2C%20338.326%20255.312%2C%20339.243%20254.207%20C%20341.618%20251.346%2C%20363.959%20233.167%2C%20401%20203.956%20C%20422.175%20187.258%2C%20440.048%20172.899%2C%20440.718%20172.048%20C%20443.006%20169.142%2C%20442%20165.561%2C%20435.907%20154.917%20C%20426.900%20139.179%2C%20415.216%20124.021%2C%20401.598%20110.402%20C%20387.979%2096.784%2C%20372.821%2085.100%2C%20357.083%2076.093%20C%20346.438%2070%2C%20342.860%2068.995%2C%20339.950%2071.282%20M%20317.894%20121.718%20C%20294.457%20151.420%2C%20284.676%20163.484%2C%20267.677%20183.651%20C%20265.489%20186.247%2C%20265.219%20187%2C%20266.477%20187%20C%20269.392%20187%2C%20274.404%20190.120%2C%20279.584%20195.158%20C%20284.250%20199.698%2C%20285.220%20200.182%2C%20291.392%20201.056%20C%20304.426%20202.902%2C%20309.097%20207.569%2C%20310.941%20220.587%20C%20311.818%20226.783%2C%20312.299%20227.746%2C%20316.842%20232.416%20C%20321.880%20237.596%2C%20325%20242.608%2C%20325%20245.523%20C%20325%20246.781%2C%20325.753%20246.511%2C%20328.349%20244.323%20C%20348.516%20227.324%2C%20360.580%20217.543%2C%20390.282%20194.106%20C%20409.377%20179.039%2C%20425%20166.170%2C%20425%20165.508%20C%20425%20163.807%2C%20414.888%20147.903%2C%20408.162%20139.026%20C%20400.888%20129.425%2C%20382.575%20111.112%2C%20372.974%20103.838%20C%20364.097%2097.112%2C%20348.193%2087%2C%20346.492%2087%20C%20345.830%2087%2C%20332.961%20102.623%2C%20317.894%20121.718%20M%20257.500%20204.296%20C%20251.309%20207.602%2C%20245.267%20208.310%2C%20234.500%20206.990%20L%20230.500%20206.500%20227.500%20212.456%20C%20223.757%20219.887%2C%20220.156%20223.482%2C%20212.500%20227.432%20L%20206.500%20230.527%20206.990%20234.514%20C%20208.339%20245.482%2C%20207.615%20251.276%2C%20204.026%20258.245%20L%20200.552%20264.990%20205.703%20269.902%20C%20212.115%20276.018%2C%20213.937%20279.493%2C%20215.122%20287.861%20C%20215.636%20291.488%2C%20216.391%20294.791%2C%20216.800%20295.200%20C%20217.209%20295.609%2C%20220.512%20296.364%2C%20224.139%20296.878%20C%20232.381%20298.045%2C%20235.605%20299.700%2C%20241.907%20306.002%20C%20244.656%20308.751%2C%20247.151%20311%2C%20247.451%20311%20C%20247.752%20311%2C%20251.207%20309.364%2C%20255.129%20307.366%20C%20261.912%20303.909%2C%20262.609%20303.760%2C%20269.380%20304.330%20C%20273.296%20304.659%2C%20277.505%20305.220%2C%20278.732%20305.576%20C%20280.533%20306.099%2C%20281.306%20305.604%2C%20282.732%20303.018%20C%20289.542%20290.668%2C%20290.360%20289.730%2C%20298%20285.523%20C%20304.408%20281.993%2C%20305.467%20281.036%2C%20305.274%20278.946%20C%20303.606%20260.941%2C%20303.440%20262.832%2C%20307.366%20255.129%20C%20309.364%20251.207%2C%20311%20247.752%2C%20311%20247.451%20C%20311%20247.151%2C%20308.751%20244.656%2C%20306.002%20241.907%20C%20299.700%20235.605%2C%20298.045%20232.381%2C%20296.878%20224.139%20C%20296.364%20220.512%2C%20295.609%20217.209%2C%20295.200%20216.800%20C%20294.791%20216.391%2C%20291.488%20215.636%2C%20287.861%20215.122%20C%20279.556%20213.946%2C%20276.015%20212.111%2C%20270.116%20205.926%20C%20267.532%20203.217%2C%20264.986%20201.021%2C%20264.459%20201.046%20C%20263.931%20201.071%2C%20260.800%20202.533%2C%20257.500%20204.296%20M%20248.317%20218.046%20C%20237.523%20220.180%2C%20225.988%20229.196%2C%20221.079%20239.336%20C%20208.100%20266.148%2C%20230.623%20297.766%2C%20260.331%20294.438%20C%20276.786%20292.595%2C%20290.672%20279.320%2C%20294.037%20262.217%20C%20297.901%20242.578%2C%20283.261%20221.842%2C%20262.789%20217.960%20C%20257.005%20216.863%2C%20254.217%20216.880%2C%20248.317%20218.046%20M%20245.500%20234.377%20C%20239.542%20237.187%2C%20236.826%20239.952%2C%20234.084%20246%20C%20230.273%20254.407%2C%20232.118%20266.137%2C%20238.312%20272.882%20C%20241.920%20276.811%2C%20249.818%20279.980%2C%20256%20279.980%20C%20262.182%20279.980%2C%20270.080%20276.811%2C%20273.688%20272.882%20C%20282.132%20263.688%2C%20281.730%20246.438%2C%20272.882%20238.312%20C%20265.892%20231.892%2C%20254.301%20230.227%2C%20245.500%20234.377%20M%20318.420%20265.349%20C%20318.142%20266.073%2C%20318.373%20268.653%2C%20318.933%20271.082%20C%20320.594%20278.288%2C%20320.194%20283.278%2C%20317.534%20288.531%20C%20316.178%20291.210%2C%20315.166%20293.463%2C%20315.284%20293.538%20C%20316.001%20293.991%2C%20347.623%20305.024%2C%20348.173%20305.013%20C%20348.543%20305.006%2C%20348.593%20301.664%2C%20348.285%20297.586%20L%20347.724%20290.172%20353.068%20284.522%20C%20359.182%20278.057%2C%20359.320%20278.356%2C%20348.500%20274.626%20C%20344.650%20273.299%2C%20336.421%20270.373%2C%20330.212%20268.123%20C%20321.640%20265.017%2C%20318.803%20264.349%2C%20318.420%20265.349%20M%20173.500%20276.214%20C%20166.350%20282.255%2C%20143.963%20300.270%2C%20123.750%20316.247%20C%20103.538%20332.223%2C%2087%20345.835%2C%2087%20346.495%20C%2087%20348.278%2C%2096.742%20363.464%2C%20104.054%20373.079%20C%20112.217%20383.815%2C%20127.055%20398.710%2C%20138.150%20407.307%20C%20147.678%20414.690%2C%20163.620%20425%2C%20165.508%20425%20C%20166.170%20425%2C%20179.039%20409.377%2C%20194.106%20390.282%20C%20217.543%20360.580%2C%20227.324%20348.516%2C%20244.323%20328.349%20C%20246.511%20325.753%2C%20246.781%20325%2C%20245.523%20325%20C%20242.608%20325%2C%20237.596%20321.880%2C%20232.416%20316.842%20C%20227.750%20312.302%2C%20226.780%20311.818%2C%20220.608%20310.944%20C%20207.574%20309.098%2C%20202.903%20304.431%2C%20201.059%20291.413%20C%20200.182%20285.221%2C%20199.699%20284.251%2C%20195.166%20279.584%20C%20190.222%20274.492%2C%20188.258%20271.527%2C%20187.112%20267.423%20C%20186.555%20265.428%2C%20185.324%20266.223%2C%20173.500%20276.214%20M%20288.038%20317.634%20C%20283.122%20320.241%2C%20278.734%20320.565%2C%20270.953%20318.896%20C%20268.118%20318.289%2C%20265.441%20318.176%2C%20264.991%20318.646%20C%20264.259%20319.413%2C%20276.841%20356.174%2C%20278.354%20357.687%20C%20278.697%20358.030%2C%20281.496%20355.929%2C%20284.575%20353.018%20L%20290.172%20347.724%20297.586%20348.285%20C%20301.664%20348.593%2C%20305.010%20348.543%2C%20305.022%20348.173%20C%20305.066%20346.831%2C%20293.487%20315.016%2C%20293%20315.140%20C%20292.725%20315.211%2C%20290.492%20316.333%2C%20288.038%20317.634%27%20stroke%3D%27none%27%20fill%3D%27black%27%20fill-rule%3D%27evenodd%27%2F%3E%3C%2Fsvg%3E");
}

.css-icon-triangular-ruler {
    --icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27512%27%20height%3D%27512%27%20viewBox%3D%270%200%20512%20512%27%20version%3D%271.1%27%3E%3Cpath%20d%3D%27M%202%202%20C%200.011%203.989%2C%200%205.333%2C%200%20256%20C%200%20506.667%2C%200.011%20508.011%2C%202%20510%20C%203.989%20511.989%2C%205.333%20512%2C%20256.048%20512%20L%20508.095%20512%20510.548%20509.354%20L%20513%20506.708%20512.752%20254.604%20L%20512.504%202.500%20512.250%20252.002%20L%20511.996%20501.505%20261.244%20250.752%20C%2030.581%2020.089%2C%2010.232%200%2C%207.246%200%20C%205.333%200%2C%203.178%200.822%2C%202%202%20M%200.492%20256%20C%200.492%20394.875%2C%200.608%20451.688%2C%200.750%20382.250%20C%200.892%20312.813%2C%200.892%20199.188%2C%200.750%20129.750%20C%200.608%2060.313%2C%200.492%20117.125%2C%200.492%20256%20M%2014%2067.750%20L%2014%20112%2038.750%20112.015%20C%2065.104%20112.030%2C%2067.390%20112.392%2C%2069.635%20116.895%20C%2071.210%20120.053%2C%2069.649%20124.383%2C%2066.403%20125.862%20C%2064.750%20126.615%2C%2055.474%20127%2C%2038.953%20127%20L%2014%20127%2014%20138%20L%2014%20149%2025.826%20149%20C%2036.894%20149%2C%2037.791%20149.148%2C%2039.826%20151.314%20C%2042.543%20154.207%2C%2042.618%20158.382%2C%2040%20161%20C%2038.222%20162.778%2C%2036.667%20163%2C%2026%20163%20L%2014%20163%2014%20174.500%20L%2014%20186%2040.345%20186%20C%2064.173%20186%2C%2066.840%20186.167%2C%2068.255%20187.750%20C%2070.224%20189.952%2C%2070.598%20191.809%2C%2069.731%20195.079%20C%2068.543%20199.564%2C%2065.814%20200%2C%2038.953%20200%20L%2014%20200%2014%20211%20L%2014%20222%2025.826%20222%20C%2036.894%20222%2C%2037.791%20222.148%2C%2039.826%20224.314%20C%2042.543%20227.207%2C%2042.618%20231.382%2C%2040%20234%20C%2038.222%20235.778%2C%2036.667%20236%2C%2026%20236%20L%2014%20236%2014%20247.500%20L%2014%20259%2040.345%20259%20C%2064.173%20259%2C%2066.840%20259.167%2C%2068.255%20260.750%20C%2070.224%20262.952%2C%2070.598%20264.809%2C%2069.731%20268.079%20C%2068.543%20272.564%2C%2065.814%20273%2C%2038.953%20273%20L%2014%20273%2014%20284%20L%2014%20295%2025.826%20295%20C%2036.894%20295%2C%2037.791%20295.148%2C%2039.826%20297.314%20C%2042.543%20300.207%2C%2042.618%20304.382%2C%2040%20307%20C%2038.222%20308.778%2C%2036.667%20309%2C%2026%20309%20L%2014%20309%2014%20320.500%20L%2014%20332%2040.345%20332%20C%2064.173%20332%2C%2066.840%20332.167%2C%2068.255%20333.750%20C%2070.224%20335.952%2C%2070.598%20337.809%2C%2069.731%20341.079%20C%2068.543%20345.564%2C%2065.814%20346%2C%2038.953%20346%20L%2014%20346%2014%20357%20L%2014%20368%2025.826%20368%20C%2036.894%20368%2C%2037.791%20368.148%2C%2039.826%20370.314%20C%2042.543%20373.207%2C%2042.618%20377.382%2C%2040%20380%20C%2038.222%20381.778%2C%2036.667%20382%2C%2026%20382%20L%2014%20382%2014%20393.500%20L%2014%20405%2040.345%20405%20C%2064.173%20405%2C%2066.840%20405.167%2C%2068.255%20406.750%20C%2070.224%20408.952%2C%2070.598%20410.809%2C%2069.731%20414.079%20C%2068.543%20418.564%2C%2065.814%20419%2C%2038.953%20419%20L%2014%20419%2014%20458.500%20L%2014%20498%2053.500%20498%20L%2093%20498%2093%20473.047%20C%2093%20446.186%2C%2093.436%20443.457%2C%2097.921%20442.269%20C%20101.191%20441.402%2C%20103.048%20441.776%2C%20105.250%20443.745%20C%20106.833%20445.160%2C%20107%20447.827%2C%20107%20471.655%20L%20107%20498%20118.500%20498%20L%20130%20498%20130%20486%20C%20130%20475.333%2C%20130.222%20473.778%2C%20132%20472%20C%20134.698%20469.302%2C%20139.129%20469.444%2C%20141.826%20472.314%20C%20143.802%20474.418%2C%20144%20475.693%2C%20144%20486.314%20L%20144%20498%20155%20498%20L%20166%20498%20166%20473.047%20C%20166%20446.186%2C%20166.436%20443.457%2C%20170.921%20442.269%20C%20174.191%20441.402%2C%20176.048%20441.776%2C%20178.250%20443.745%20C%20179.833%20445.160%2C%20180%20447.827%2C%20180%20471.655%20L%20180%20498%20191.500%20498%20L%20203%20498%20203%20486%20C%20203%20475.333%2C%20203.222%20473.778%2C%20205%20472%20C%20207.698%20469.302%2C%20212.129%20469.444%2C%20214.826%20472.314%20C%20216.802%20474.418%2C%20217%20475.693%2C%20217%20486.314%20L%20217%20498%20228%20498%20L%20239%20498%20239%20473.047%20C%20239%20446.186%2C%20239.436%20443.457%2C%20243.921%20442.269%20C%20247.191%20441.402%2C%20249.048%20441.776%2C%20251.250%20443.745%20C%20252.833%20445.160%2C%20253%20447.827%2C%20253%20471.655%20L%20253%20498%20264.500%20498%20L%20276%20498%20276%20486%20C%20276%20475.333%2C%20276.222%20473.778%2C%20278%20472%20C%20280.698%20469.302%2C%20285.129%20469.444%2C%20287.826%20472.314%20C%20289.802%20474.418%2C%20290%20475.693%2C%20290%20486.314%20L%20290%20498%20301%20498%20L%20312%20498%20312%20473.047%20C%20312%20446.186%2C%20312.436%20443.457%2C%20316.921%20442.269%20C%20320.191%20441.402%2C%20322.048%20441.776%2C%20324.250%20443.745%20C%20325.833%20445.160%2C%20326%20447.827%2C%20326%20471.655%20L%20326%20498%20337.500%20498%20L%20349%20498%20349%20486%20C%20349%20475.333%2C%20349.222%20473.778%2C%20351%20472%20C%20353.698%20469.302%2C%20358.129%20469.444%2C%20360.826%20472.314%20C%20362.802%20474.418%2C%20363%20475.693%2C%20363%20486.314%20L%20363%20498%20374%20498%20L%20385%20498%20385%20473.047%20C%20385%20456.526%2C%20385.385%20447.250%2C%20386.138%20445.597%20C%20387.456%20442.704%2C%20391.606%20440.940%2C%20394.540%20442.026%20C%20399.313%20443.791%2C%20399.481%20444.750%2C%20399.811%20472.152%20L%20400.123%20498%20444.210%20498%20L%20488.297%20498%20369.429%20379.250%20C%20304.051%20313.938%2C%20197.334%20207.175%2C%20132.280%20142%20L%2014%2023.500%2014%2067.750%20M%2097.315%20226.007%20C%2096.114%20226.491%2C%2094.651%20227.783%2C%2094.065%20228.878%20C%2093.334%20230.245%2C%2093%20259.570%2C%2093%20322.480%20L%2093%20414.091%2095.455%20416.545%20L%2097.909%20419%20189.844%20419%20C%20275.946%20419%2C%20281.910%20418.889%2C%20283.847%20417.250%20C%20284.984%20416.287%2C%20286.220%20414.214%2C%20286.593%20412.642%20C%20287.239%20409.921%2C%20282.825%20405.337%2C%20194.880%20317.392%20C%20144.064%20266.576%2C%20101.816%20225.029%2C%20100.994%20225.063%20C%20100.172%20225.098%2C%2098.517%20225.523%2C%2097.315%20226.007%20M%20107%20326.784%20C%20107%20387.686%2C%20107.265%20404.164%2C%20108.250%20404.540%20C%20108.938%20404.802%2C%20143.814%20404.901%2C%20185.753%20404.759%20L%20262.005%20404.500%20184.503%20327.002%20L%20107%20249.505%20107%20326.784%27%20stroke%3D%27none%27%20fill%3D%27black%27%20fill-rule%3D%27evenodd%27%2F%3E%3C%2Fsvg%3E");
}

.css-icon-pencil {
    --icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27512%27%20height%3D%27512%27%20viewBox%3D%270%200%20512%20512%27%20version%3D%271.1%27%3E%3Cpath%20d%3D%27M%20395.909%201.839%20C%20392.834%202.854%2C%20388.334%205.074%2C%20385.909%206.771%20C%20383.484%208.468%2C%20308.524%2082.901%2C%20219.330%20172.178%20L%2057.161%20334.500%2028.580%20417.200%20C%2012.861%20462.685%2C%20-0%20501.225%2C%200%20502.845%20C%200%20507.153%2C%204.844%20512%2C%209.151%20512.001%20C%2010.993%20512.001%2C%2049.693%20499.111%2C%2095.151%20483.357%20L%20177.802%20454.713%20342.291%20290.106%20C%20500.247%20132.037%2C%20506.872%20125.262%2C%20509.112%20119.500%20C%20510.990%20114.669%2C%20511.449%20111.552%2C%20511.470%20103.500%20C%20511.493%2094.241%2C%20511.250%2092.981%2C%20508.196%2086.500%20C%20505.150%2080.038%2C%20502.113%2076.724%2C%20468.698%2043.390%20C%20436.071%2010.843%2C%20431.822%206.951%2C%20425.627%203.942%20C%20419.748%201.087%2C%20417.505%200.560%2C%20410.127%200.298%20C%20403.762%200.073%2C%20400.034%200.477%2C%20395.909%201.839%20M%20401.553%2021.440%20C%20398.703%2022.494%2C%20392.246%2028.260%2C%20378.303%2042.203%20L%20358.999%2061.507%20404.768%20107.268%20L%20450.537%20153.029%20470.180%20133.264%20C%20492.471%20110.835%2C%20493.298%20109.474%2C%20491%2099.005%20C%20489.801%2093.545%2C%20489.511%2093.219%2C%20455.198%2058.770%20C%20435.784%2039.279%2C%20419.064%2023.309%2C%20417.093%2022.374%20C%20412.237%2020.070%2C%20406.236%2019.709%2C%20401.553%2021.440%20M%20334.246%2086.254%20L%20324.013%2096.521%20369.767%20142.267%20L%20415.522%20188.014%20425.754%20177.746%20L%20435.987%20167.479%20390.233%20121.733%20L%20344.478%2075.986%20334.246%2086.254%20M%20198.702%20221.798%20L%2087.927%20332.576%20101.214%20334.728%20L%20114.500%20336.880%20219.761%20231.678%20L%20325.023%20126.476%20317.250%20118.748%20L%20309.476%20111.020%20198.702%20221.798%20M%20234.216%20246.284%20L%20128.946%20351.558%20129.223%20367.029%20L%20129.500%20382.500%20145%20382.767%20L%20160.500%20383.033%20265.755%20277.760%20L%20371.010%20172.487%20355.248%20156.748%20L%20339.487%20141.010%20234.216%20246.284%20M%20280.303%20292.260%20L%20175.130%20397.500%20177.315%20410.761%20L%20179.500%20424.023%20290.261%20313.249%20L%20401.022%20202.475%20393.249%20194.748%20L%20385.476%20187.020%20280.303%20292.260%20M%2071.215%20356.669%20C%2061.515%20383.442%2C%2046.101%20429.534%2C%2046.771%20429.757%20C%2051.017%20431.172%2C%2061.720%20438.836%2C%2067.442%20444.558%20C%2073.176%20450.292%2C%2080.828%20460.984%2C%2082.250%20465.249%20C%2082.508%20466.025%2C%20159.302%20440.032%2C%20160.606%20438.727%20C%20160.913%20438.420%2C%20159.916%20430.541%2C%20158.390%20421.218%20L%20155.616%20404.267%20147.558%20403.639%20C%20143.126%20403.294%2C%20134.640%20403.009%2C%20128.700%20403.006%20C%20110.984%20402.996%2C%20109.005%20400.814%2C%20108.993%20381.282%20C%20108.989%20374.802%2C%20108.707%20366.546%2C%20108.366%20362.935%20L%20107.745%20356.370%2093.623%20354.131%20C%2085.855%20352.900%2C%2078.111%20351.655%2C%2076.413%20351.366%20C%2073.429%20350.856%2C%2073.257%20351.032%2C%2071.215%20356.669%20M%2033.079%20466.676%20C%2029.711%20476.363%2C%2027.119%20484.453%2C%2027.320%20484.653%20C%2027.618%20484.951%2C%2045.950%20478.912%2C%2059.725%20473.977%20L%2062.950%20472.822%2060.850%20468.706%20C%2058.152%20463.418%2C%2048.589%20453.851%2C%2043.306%20451.156%20L%2039.203%20449.063%2033.079%20466.676%27%20stroke%3D%27none%27%20fill%3D%27black%27%20fill-rule%3D%27evenodd%27%2F%3E%3C%2Fsvg%3E");
}

.css-icon-book {
    --icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27512%27%20height%3D%27512%27%20viewBox%3D%270%200%20512%20512%27%20version%3D%271.1%27%3E%3Cpath%20d%3D%27M%20105%2074.562%20C%20103.625%2074.800%2C%2098.450%2075.492%2C%2093.500%2076.100%20C%2074.246%2078.464%2C%2048.748%2086.641%2C%2043.750%2092.053%20C%2041.044%2094.984%2C%2041%2095.240%2C%2041%20108.016%20L%2041%20121%2026.250%20121.006%20C%208.717%20121.012%2C%204.640%20121.903%2C%201.952%20126.311%20C%200.049%20129.432%2C%200.007%20132.704%2C%200.004%20280.234%20L%200%20430.968%202.918%20434.234%20L%205.836%20437.500%20256.032%20437.500%20L%20506.229%20437.500%20509.614%20433.583%20L%20513%20429.667%20513%20278.667%20C%20513%20195.617%2C%20512.702%20127.965%2C%20512.337%20128.330%20C%20511.972%20128.694%2C%20510.871%20127.672%2C%20509.889%20126.058%20C%20507.380%20121.931%2C%20502.987%20121.012%2C%20485.750%20121.006%20L%20471%20121%20471%20108.077%20C%20471%2095.720%2C%20470.889%2095.022%2C%20468.478%2092.156%20C%20464.319%2087.214%2C%20443.024%2080.040%2C%20421.500%2076.331%20C%20407.310%2073.885%2C%20374.513%2073.895%2C%20359.500%2076.350%20C%20325.362%2081.930%2C%20292.875%2094.476%2C%20264.991%20112.845%20L%20256.223%20118.622%20245.361%20111.798%20C%20216.069%2093.394%2C%20187.723%2082.394%2C%20155.500%2076.926%20C%20144.120%2074.995%2C%20111.364%2073.462%2C%20105%2074.562%20M%2098.165%2097.177%20C%2090.889%2098.089%2C%2071.032%20102.804%2C%2065.750%20104.873%20L%2063%20105.950%2063%20241.804%20L%2063%20377.657%2073.594%20374.885%20C%20109.881%20365.391%2C%20151.039%20367.412%2C%20191%20380.652%20C%20203.788%20384.889%2C%20228.289%20396.126%2C%20239.750%20403.011%20L%20245%20406.165%20245%20271.783%20L%20245%20137.401%20237.250%20132.310%20C%20208.016%20113.110%2C%20175.983%20101.121%2C%20143.026%2097.047%20C%20132.997%2095.808%2C%20108.527%2095.879%2C%2098.165%2097.177%20M%20367.597%2097.074%20C%20354.777%2098.840%2C%20340.683%20102.095%2C%20328.561%20106.090%20C%20314.186%20110.827%2C%20287.939%20123.539%2C%20275.751%20131.666%20L%20267.002%20137.500%20267.001%20271.833%20L%20267%20406.165%20272.250%20403.017%20C%20281.169%20397.669%2C%20305.002%20386.329%2C%20315.259%20382.553%20C%20337.649%20374.311%2C%20359.634%20370.070%2C%20384%20369.293%20C%20404.341%20368.645%2C%20421.144%20370.369%2C%20438.335%20374.867%20L%20449.007%20377.659%20448.754%20241.623%20L%20448.500%20105.586%20441.232%20103.310%20C%20425.204%2098.290%2C%20415.510%2096.875%2C%20394.500%2096.490%20C%20383.500%2096.288%2C%20371.393%2096.551%2C%20367.597%2097.074%20M%200.487%20280%20C%200.487%20363.325%2C%200.605%20397.413%2C%200.750%20355.750%20C%200.894%20314.088%2C%200.894%20245.913%2C%200.750%20204.250%20C%200.605%20162.588%2C%200.487%20196.675%2C%200.487%20280%20M%2022%20279.500%20L%2022%20416%20120.250%20415.914%20L%20218.500%20415.828%20208.165%20410.898%20C%20194.490%20404.374%2C%20174.532%20397.716%2C%20158.500%20394.329%20C%20146.412%20391.775%2C%20143.816%20391.581%2C%20121.500%20391.566%20C%2094.157%20391.546%2C%2086.388%20392.723%2C%2065.751%20400.010%20C%2050.697%20405.326%2C%2046.283%20405.134%2C%2042.665%20399.010%20C%2041.135%20396.420%2C%2041%20385.914%2C%2041%20269.596%20L%2041%20143%2031.500%20143%20L%2022%20143%2022%20279.500%20M%20471%20270.100%20L%20471%20397.200%20467.600%20400.600%20C%20463.123%20405.077%2C%20460.385%20405.001%2C%20446.249%20400.010%20C%20425.612%20392.723%2C%20417.843%20391.546%2C%20390.500%20391.566%20C%20368.184%20391.581%2C%20365.588%20391.775%2C%20353.500%20394.329%20C%20337.469%20397.716%2C%20317.883%20404.254%2C%20304%20410.854%20L%20293.500%20415.845%20391.750%20415.923%20L%20490%20416%20490%20279.500%20L%20490%20143%20480.500%20143%20L%20471%20143%20471%20270.100%27%20stroke%3D%27none%27%20fill%3D%27black%27%20fill-rule%3D%27evenodd%27%2F%3E%3C%2Fsvg%3E");
}

.css-icon-school-bag {
    --icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27512%27%20height%3D%27512%27%20viewBox%3D%270%200%20512%20512%27%20version%3D%271.1%27%3E%3Cpath%20d%3D%27M%20172%2025.594%20C%20167.275%2026.851%2C%20133.727%2044.297%2C%2066%2080.716%20C%2057.475%2085.300%2C%2049.938%2089.801%2C%2049.250%2090.717%20C%2046.898%2093.851%2C%2047.951%2098.239%2C%2053.591%20108.800%20C%2056.666%20114.559%2C%2058.758%20119.547%2C%2058.240%20119.885%20C%2056.235%20121.196%2C%2054.890%20125.224%2C%2055.513%20128.057%20C%2056.314%20131.706%2C%2059.451%20134%2C%2063.637%20134%20C%2066.363%20134%2C%2067.183%20134.633%2C%2069.254%20138.339%20C%2071.625%20142.581%2C%2071.638%20142.729%2C%2069.840%20144.950%20C%2065.554%20150.243%2C%2069.474%20158%2C%2076.434%20158%20C%2079.565%20158%2C%2080.198%20158.467%2C%2082.090%20162.177%20C%2084.091%20166.098%2C%2084.123%20166.522%2C%2082.611%20169.082%20C%2078.997%20175.199%2C%2082.302%20182%2C%2088.888%20182%20C%2092.203%20182%2C%2092.853%20182.429%2C%2094.566%20185.750%20C%2096.429%20189.362%2C%2096.490%20191.897%2C%2096.215%20254.750%20L%2095.931%20320%2088.143%20320%20C%2077.189%20320%2C%2071.768%20322.085%2C%2064.910%20328.936%20C%2055.738%20338.098%2C%2055.871%20337.174%2C%2056.210%20389.127%20L%2056.500%20433.500%2059.599%20439%20C%2063.126%20445.260%2C%2070.149%20451.129%2C%2076.331%20452.981%20C%2078.608%20453.663%2C%2083.912%20454.457%2C%2088.118%20454.746%20L%2095.765%20455.270%2096.363%20459.629%20C%2097.077%20464.843%2C%20100.875%20472.650%2C%20104.963%20477.305%20C%20106.595%20479.163%2C%20110.758%20482.217%2C%20114.215%20484.092%20L%20120.500%20487.500%20254.445%20487.764%20C%20402.434%20488.056%2C%20393.802%20488.408%2C%20403.631%20481.681%20C%20409.526%20477.646%2C%20414.734%20469.488%2C%20415.604%20462.924%20L%20416.227%20458.229%20425.364%20457.797%20C%20436.386%20457.277%2C%20442.584%20454.552%2C%20448.798%20447.492%20C%20455.989%20439.323%2C%20456%20439.233%2C%20456%20389%20C%20456%20336.976%2C%20456.153%20338.005%2C%20447.074%20328.926%20C%20440.227%20322.079%2C%20434.812%20320%2C%20423.822%20320%20L%20416%20320%20416%20280.455%20L%20416%20240.909%20413.545%20238.455%20C%20412.195%20237.105%2C%20410.058%20235.968%2C%20408.795%20235.930%20C%20401.729%20235.713%2C%20401.866%20235.508%2C%20426.860%20208.733%20C%20448.538%20185.510%2C%20450.993%20182.529%2C%20452.356%20177.768%20C%20457.714%20159.054%2C%20464%20134.584%2C%20464%20132.442%20C%20464%20129.194%2C%20459.823%20125%2C%20456.588%20125%20C%20455.211%20125%2C%20443.251%20128.993%2C%20430.010%20133.874%20L%20405.935%20142.748%20400.489%20148.624%20L%20395.043%20154.500%20396.407%20150.500%20C%20397.157%20148.300%2C%20404.797%20127.262%2C%20413.385%20103.749%20C%20421.973%2080.235%2C%20429%2059.923%2C%20429%2058.609%20C%20429%2053.679%2C%20426.197%2052.134%2C%20399.665%2042.435%20C%20385.468%2037.246%2C%20372.459%2033%2C%20370.755%2033%20C%20369.051%2033%2C%20366.872%2033.711%2C%20365.911%2034.580%20C%20364.314%2036.026%2C%20360.101%2035.644%2C%20316.305%2030.080%20C%20289.982%2026.736%2C%20267.271%2024%2C%20265.836%2024%20C%20264.009%2024%2C%20257.883%2028.155%2C%20245.364%2037.886%20L%20227.500%2051.771%20223.928%2046.128%20C%20213.010%2028.875%2C%20191.558%2020.393%2C%20172%2025.594%20M%20176.500%2041.445%20C%20173.750%2042.214%2C%20148.325%2055.250%2C%20120%2070.414%20C%2091.675%2085.578%2C%2068.108%2098.119%2C%2067.630%2098.283%20C%2067.151%2098.446%2C%2068.170%20101.375%2C%2069.894%20104.790%20C%2072.847%20110.639%2C%2073.234%20111%2C%2076.560%20111%20C%2083.442%20111%2C%2087.021%20117.770%2C%2083.389%20123.918%20C%2081.877%20126.478%2C%2081.909%20126.902%2C%2083.910%20130.823%20C%2085.802%20134.533%2C%2086.435%20135%2C%2089.566%20135%20C%2093.718%20135%2C%2098.002%20138.661%2C%2097.996%20142.205%20C%2097.994%20143.467%2C%2097.152%20145.878%2C%2096.125%20147.563%20C%2094.270%20150.604%2C%2094.274%20150.654%2C%2096.730%20154.813%20C%2098.859%20158.417%2C%2099.674%20159%2C%20102.587%20159%20C%20105.735%20159%2C%20106.191%20158.565%2C%20109.122%20152.750%20C%20112.786%20145.483%2C%20119.176%20135.692%2C%20122.827%20131.750%20C%20126.271%20128.031%2C%20124.978%20128.282%2C%20116.382%20133%20C%20112.313%20135.233%2C%20107.728%20137%2C%20106.002%20137%20C%2099.586%20137%2C%2095.640%20128.929%2C%2099.750%20124.214%20C%20102.437%20121.132%2C%20195.260%2072%2C%20198.396%2072%20C%20202.127%2072%2C%20206%2076.102%2C%20206%2080.053%20C%20206%2082.303%2C%20205.075%2084.074%2C%20202.750%2086.276%20C%20200.823%2088.101%2C%20200.246%2089.078%2C%20201.332%2088.677%20C%20202.339%2088.305%2C%20206.688%2088%2C%20210.996%2088%20L%20218.829%2088%20219.520%2080.630%20L%20220.211%2073.261%20214.895%2063.401%20C%20211.972%2057.978%2C%20208.059%2051.858%2C%20206.201%2049.801%20C%20199.427%2042.303%2C%20186.470%2038.657%2C%20176.500%2041.445%20M%20272.003%2052.259%20C%20271.309%2058.442%2C%20270.148%2064.961%2C%20269.423%2066.748%20C%20267.313%2071.943%2C%20264.989%2072.432%2C%20251.001%2070.621%20C%20244.264%2069.749%2C%20238.421%2069.240%2C%20238.017%2069.490%20C%20237.613%2069.739%2C%20236.972%2072.994%2C%20236.592%2076.722%20C%20236.213%2080.450%2C%20235.666%2084.451%2C%20235.377%2085.614%20C%20234.885%2087.592%2C%20235.323%2087.758%2C%20242.203%2088.199%20C%20247.482%2088.538%2C%20251.055%2089.425%2C%20254.877%2091.344%20L%20260.199%2094.017%20262.172%2091.509%20C%20263.718%2089.542%2C%20265.053%2089%2C%20268.342%2089%20C%20271.937%2089%2C%20329.831%2096.001%2C%20338.506%2097.485%20C%20341.451%2097.989%2C%20341.566%2097.847%2C%20344.206%2090.506%20L%20346.901%2083.013%20344.701%2082.544%20C%20341.716%2081.908%2C%20286.654%2075%2C%20284.568%2075%20C%20281.865%2075%2C%20278%2070.399%2C%20278%2067.180%20C%20278%2065.579%2C%20278.933%2063.084%2C%20280.073%2061.635%20C%20282.835%2058.124%2C%20283.990%2058.161%2C%20321.427%2062.990%20C%20338.437%2065.184%2C%20352.487%2066.847%2C%20352.648%2066.685%20C%20353.480%2065.854%2C%20358.010%2052.677%2C%20357.605%2052.271%20C%20357.344%2052.010%2C%20339.889%2049.615%2C%20318.815%2046.949%20C%20297.742%2044.282%2C%20278.872%2041.857%2C%20276.882%2041.560%20L%20273.265%2041.019%20272.003%2052.259%20M%20139.102%2076.369%20C%2089.292%20103.007%2C%2087.998%20103.873%2C%2089.442%20109.624%20C%2090.331%20113.169%2C%2093.595%20116%2C%2096.792%20116%20C%20100.111%20116%2C%20192.594%2067.027%2C%20195.250%2063.863%20C%20199.214%2059.141%2C%20195.436%2050.988%2C%20189.295%2051.010%20C%20187.569%2051.017%2C%20168.372%2060.715%2C%20139.102%2076.369%20M%20253%2052.500%20C%20251.987%2053.721%2C%20252.037%2054%2C%20253.271%2054%20C%20254.104%2054%2C%20255.045%2053.325%2C%20255.362%2052.500%20C%20255.678%2051.675%2C%20255.556%2051%2C%20255.091%2051%20C%20254.626%2051%2C%20253.685%2051.675%2C%20253%2052.500%20M%20374.143%2056.386%20C%20373.098%2059.199%2C%20362.246%2088.848%2C%20350.028%20122.273%20L%20327.812%20183.046%20333.328%20189.773%20C%20343.588%20202.285%2C%20346.597%20205.367%2C%20347.816%20204.613%20C%20348.467%20204.211%2C%20349%20202.637%2C%20349%20201.115%20C%20349%20197.791%2C%20352.695%20194.003%2C%20356.313%20193.617%20C%20359.049%20193.325%2C%20362%20191.360%2C%20362%20189.830%20C%20362%20189.321%2C%20360.900%20187.913%2C%20359.555%20186.702%20C%20355.973%20183.476%2C%20355.758%20178.242%2C%20359.071%20174.929%20C%20360.664%20173.336%2C%20362.179%20172.921%2C%20365.635%20173.134%20C%20370.032%20173.404%2C%20371.945%20172.273%2C%20371.985%20169.380%20C%20371.993%20168.763%2C%20368.512%20167.032%2C%20364.250%20165.531%20C%20359.988%20164.030%2C%20355.488%20161.868%2C%20354.250%20160.727%20C%20349.975%20156.784%2C%20352.099%20148.796%2C%20357.753%20147.554%20C%20360.106%20147.037%2C%20368.087%20149.163%2C%20376.072%20152.434%20C%20377.148%20152.874%2C%20378.015%20152.262%2C%20378.822%20150.492%20C%20380.329%20147.184%2C%20380.310%20147%2C%20378.455%20147%20C%20375.848%20147%2C%20372%20142.338%2C%20372%20139.180%20C%20372%20137.579%2C%20372.972%20135.034%2C%20374.161%20133.523%20C%20376.101%20131.056%2C%20376.809%20130.823%2C%20381.112%20131.237%20C%20384.743%20131.586%2C%20386.041%20131.336%2C%20386.475%20130.205%20C%20386.789%20129.385%2C%20386.924%20128.666%2C%20386.774%20128.607%20C%20379.718%20125.850%2C%20377.227%20121.786%2C%20379.402%20116.581%20C%20381.036%20112.670%2C%20383.989%20111.412%2C%20389.458%20112.299%20C%20392.035%20112.718%2C%20392.919%20112.457%2C%20393.290%20111.172%20C%20393.556%20110.252%2C%20394.071%20108.781%2C%20394.436%20107.901%20C%20394.964%20106.627%2C%20393.363%20105.648%2C%20386.543%20103.073%20C%20381.721%20101.254%2C%20377.553%2099.034%2C%20376.994%2097.988%20C%20375.542%2095.277%2C%20375.779%2090.760%2C%20377.501%2088.302%20C%20380.015%2084.713%2C%20383.816%2084.614%2C%20392.743%2087.905%20L%20400.842%2090.892%20401.869%2087.945%20C%20402.811%2085.244%2C%20402.653%2084.872%2C%20399.978%2083.489%20C%20394.439%2080.624%2C%20393.336%2074.573%2C%20397.580%2070.330%20C%20399.827%2068.082%2C%20400.727%2067.828%2C%20404.566%2068.354%20C%20408.665%2068.916%2C%20409.017%2068.782%2C%20409.606%2066.432%20C%20409.955%2065.043%2C%20410.074%2063.782%2C%20409.870%2063.630%20C%20409.667%2063.478%2C%20401.972%2060.635%2C%20392.771%2057.313%20L%20376.042%2051.272%20374.143%2056.386%20M%20201.665%20105.097%20C%20191.996%20106.510%2C%20182.969%20109.061%2C%20173.956%20112.929%20C%20149.499%20123.426%2C%20128.639%20145.246%2C%20119.305%20170.096%20C%20112.081%20189.330%2C%20112.500%20179.662%2C%20112.500%20327%20L%20112.500%20459.500%20114.800%20463.200%20C%20117.889%20468.167%2C%20122.815%20471.022%2C%20129.482%20471.710%20C%20132.517%20472.024%2C%20135%20472.018%2C%20135%20471.697%20C%20135%20471.377%2C%20134.135%20469.626%2C%20133.077%20467.807%20C%20128.029%20459.122%2C%20127.899%20457.253%2C%20128.210%20397.357%20L%20128.500%20341.500%20131.196%20335.747%20C%20134.968%20327.699%2C%20142.903%20319.643%2C%20150.926%20315.717%20L%20157.500%20312.500%20256%20312.500%20L%20354.500%20312.500%20360.253%20315.196%20C%20368.300%20318.967%2C%20376.357%20326.903%2C%20380.283%20334.926%20L%20383.500%20341.500%20383.790%20397.357%20C%20384.101%20457.253%2C%20383.971%20459.122%2C%20378.923%20467.807%20C%20377.865%20469.626%2C%20377%20471.377%2C%20377%20471.697%20C%20377%20472.018%2C%20379.483%20472.024%2C%20382.518%20471.710%20C%20389.185%20471.022%2C%20394.111%20468.167%2C%20397.200%20463.200%20L%20399.500%20459.500%20399.500%20359.500%20C%20399.500%20261.500%2C%20399.460%20259.420%2C%20397.500%20255.500%20C%20393.933%20248.365%2C%20385.699%20246.449%2C%20375%20250.264%20L%20368.500%20252.581%20367.966%20262.541%20C%20367.331%20274.392%2C%20365.233%20279.820%2C%20358.804%20286.249%20C%20356.408%20288.645%2C%20352.210%20291.706%2C%20349.474%20293.052%20L%20344.500%20295.500%20256%20295.500%20L%20167.500%20295.500%20162.500%20293.047%20C%20155.507%20289.617%2C%20148.605%20282.232%2C%20146.076%20275.474%20C%20144.076%20270.129%2C%20144%20268.087%2C%20144%20220%20C%20144%20171.913%2C%20144.076%20169.871%2C%20146.076%20164.526%20C%20148.605%20157.768%2C%20155.507%20150.383%2C%20162.500%20146.953%20L%20167.500%20144.500%20205.725%20144.206%20L%20243.950%20143.911%20243.509%20139.706%20C%20243.266%20137.393%2C%20242.832%20131.337%2C%20242.545%20126.249%20C%20242.257%20121.160%2C%20241.287%20114.073%2C%20240.389%20110.499%20L%20238.757%20104%20223.128%20104.122%20C%20214.533%20104.189%2C%20204.874%20104.628%2C%20201.665%20105.097%20M%20276.016%20107.696%20C%20281.989%20115.881%2C%20288.534%20123.082%2C%20290.345%20123.461%20C%20292.049%20123.818%2C%20319.501%20127.302%2C%20328.391%20128.290%20C%20329.849%20128.452%2C%20330.812%20127.124%2C%20332.590%20122.500%20C%20333.859%20119.200%2C%20334.920%20115.820%2C%20334.948%20114.989%20C%20334.990%20113.758%2C%20330.047%20112.856%2C%20308.250%20110.118%20C%20293.538%20108.269%2C%20279.932%20106.511%2C%20278.016%20106.210%20C%20274.661%20105.683%2C%20274.587%20105.738%2C%20276.016%20107.696%20M%20258.748%20120.500%20C%20260.119%20135.087%2C%20259.432%20165.530%2C%20257.416%20179.500%20C%20255.010%20196.171%2C%20255.148%20204.837%2C%20257.967%20214.118%20C%20266.871%20243.433%2C%20288.432%20260.566%2C%20314%20258.647%20C%20323.428%20257.939%2C%20331.386%20255.211%2C%20340.428%20249.586%20C%20344.318%20247.167%2C%20350.770%20243.416%2C%20354.768%20241.252%20L%20362.035%20237.317%20355.268%20232.780%20C%20341.701%20223.684%2C%20327.860%20209.989%2C%20315.500%20193.431%20C%20313.300%20190.484%2C%20304.750%20177.616%2C%20296.500%20164.836%20C%20281.169%20141.087%2C%20270.622%20126.384%2C%20262.543%20117.500%20L%20257.996%20112.500%20258.748%20120.500%20M%20308.653%20153.750%20C%20312.832%20160.213%2C%20316.357%20165.624%2C%20316.485%20165.775%20C%20316.613%20165.927%2C%20318.412%20161.295%2C%20320.483%20155.483%20C%20322.554%20149.670%2C%20324.080%20144.770%2C%20323.874%20144.593%20C%20323.391%20144.178%2C%20306.034%20142%2C%20303.210%20142%20C%20301.312%20142%2C%20301.962%20143.402%2C%20308.653%20153.750%20M%20433.757%20149.887%20C%20428.398%20151.874%2C%20424.010%20153.739%2C%20424.007%20154.031%20C%20424.003%20154.323%2C%20425.906%20155.223%2C%20428.235%20156.031%20C%20431.497%20157.163%2C%20433.007%20158.476%2C%20434.810%20161.750%20C%20436.097%20164.088%2C%20437.492%20166%2C%20437.910%20166%20C%20438.562%20166%2C%20444.233%20146.806%2C%20443.696%20146.416%20C%20443.588%20146.338%2C%20439.116%20147.900%2C%20433.757%20149.887%20M%20168.907%20162.294%20C%20163.229%20165.249%2C%20160%20171.205%2C%20160%20178.723%20L%20160%20184.023%20200.238%20183.761%20L%20240.476%20183.500%20241.101%20179%20C%20241.446%20176.525%2C%20242.041%20171.238%2C%20242.424%20167.250%20L%20243.121%20160%20208.218%20160%20C%20173.772%20160%2C%20173.257%20160.030%2C%20168.907%20162.294%20M%20384.672%20189.607%20C%20361.826%20214.087%2C%20360.012%20216.292%2C%20361.685%20217.560%20C%20362.683%20218.317%2C%20363.795%20218.951%2C%20364.156%20218.968%20C%20364.517%20218.986%2C%20373.514%20209.662%2C%20384.148%20198.250%20C%20394.783%20186.838%2C%20405.707%20175.120%2C%20408.424%20172.210%20C%20413.319%20166.971%2C%20413.347%20166.902%2C%20411.420%20164.976%20C%20409.493%20163.049%2C%20409.241%20163.281%2C%20384.672%20189.607%20M%20402.238%20202.803%20C%20380.484%20226.166%2C%20379.357%20227.566%2C%20381.371%20228.715%20C%20382.542%20229.383%2C%20383.764%20229.945%2C%20384.087%20229.965%20C%20384.568%20229.994%2C%20403.136%20210.351%2C%20425.762%20185.877%20L%20430.036%20181.254%20427.635%20179.680%20C%20425.246%20178.115%2C%20425.109%20178.240%2C%20402.238%20202.803%20M%20160%20233.288%20C%20160%20265.820%2C%20160.051%20266.678%2C%20162.250%20271.038%20C%20163.894%20274.298%2C%20165.702%20276.106%2C%20168.962%20277.750%20L%20173.424%20280%20256.055%20280%20L%20338.685%20280%20343.093%20277.706%20C%20347.706%20275.305%2C%20352%20268.865%2C%20352%20264.348%20C%20352%20262.214%2C%20351.653%20262.302%2C%20343.750%20266.449%20C%20330.206%20273.555%2C%20326.380%20274.495%2C%20311%20274.498%20C%20300.575%20274.499%2C%20296.247%20274.083%2C%20292%20272.668%20C%20272.121%20266.045%2C%20258.664%20254.218%2C%20248.891%20234.782%20C%20244.718%20226.483%2C%20240.670%20213.723%2C%20239.523%20205.250%20L%20238.812%20200%20199.406%20200%20L%20160%20200%20160%20233.288%20M%20161.994%20328.924%20C%20157.653%20330.262%2C%20153.592%20332.722%2C%20150.872%20335.661%20C%20148.404%20338.327%2C%20146%20342.163%2C%20146%20343.434%20C%20146%20343.745%2C%20195.500%20344%2C%20256%20344%20C%20316.500%20344%2C%20366%20343.753%2C%20366%20343.450%20C%20366%20340.287%2C%20359.670%20333.384%2C%20354%20330.364%20C%20350.664%20328.587%2C%20346.136%20328.492%2C%20257.500%20328.326%20C%20206.350%20328.230%2C%20163.372%20328.499%2C%20161.994%20328.924%20M%2080.071%20337.752%20C%2074.432%20340.627%2C%2072.585%20344.080%2C%2072.158%20352.551%20L%2071.781%20360%2083.891%20360%20L%2096%20360%2096%20348%20L%2096%20336%2089.750%20336.002%20C%2085.777%20336.003%2C%2082.251%20336.640%2C%2080.071%20337.752%20M%20416%20347.891%20L%20416%20360%20428%20360%20L%20440%20360%20439.998%20353.750%20C%20439.995%20341.774%2C%20435.273%20336.755%2C%20423.449%20336.158%20L%20416%20335.781%20416%20347.891%20M%20144.213%20407.250%20C%20144.494%20453.476%2C%20144.547%20454.587%2C%20146.658%20458.500%20C%20149.184%20463.180%2C%20153.101%20467.027%2C%20158%20469.636%20C%20161.344%20471.417%2C%20165.714%20471.500%2C%20256%20471.500%20C%20346.286%20471.500%2C%20350.656%20471.417%2C%20354%20469.636%20C%20358.899%20467.027%2C%20362.816%20463.180%2C%20365.342%20458.500%20C%20367.453%20454.587%2C%20367.506%20453.476%2C%20367.787%20407.250%20L%20368.074%20360%20356.037%20360%20C%20349.417%20360%2C%20344%20360.313%2C%20344%20360.695%20C%20344%20361.077%2C%20347.375%20371.594%2C%20351.500%20384.065%20C%20355.625%20396.536%2C%20359%20407.508%2C%20359%20408.447%20C%20359%20409.386%2C%20357.685%20411.469%2C%20356.077%20413.077%20L%20353.154%20416%20332.212%20416%20C%20312.840%20416%2C%20311.081%20415.851%2C%20308.747%20414.016%20C%20307.360%20412.925%2C%20305.959%20410.972%2C%20305.634%20409.678%20C%20305.249%20408.144%2C%20307.798%20399.075%2C%20312.946%20383.662%20L%20320.849%20360%20232.387%20360%20L%20143.926%20360%20144.213%20407.250%20M%2072%20401.766%20C%2072%20424.810%2C%2072.193%20427.891%2C%2073.827%20430.938%20C%2076.476%20435.877%2C%2081.108%20438%2C%2089.234%20438%20L%2096%20438%2096%20407%20L%2096%20376%2084%20376%20L%2072%20376%2072%20401.766%20M%20416%20409.132%20L%20416%20442.263%20423.566%20441.777%20C%20432.134%20441.228%2C%20435.423%20439.469%2C%20438.248%20433.929%20C%20439.786%20430.913%2C%20439.997%20427.217%2C%20439.998%20403.250%20L%20440%20376%20428%20376%20L%20416%20376%20416%20409.132%20M%20331.618%20380%20C%20331.284%20380.825%2C%20329.687%20385.438%2C%20328.069%20390.250%20L%20325.127%20399%20332.131%20399%20C%20338.587%20399%2C%20339.087%20398.850%2C%20338.524%20397.076%20C%20334.804%20385.355%2C%20332.128%20378.739%2C%20331.618%20380%27%20stroke%3D%27none%27%20fill%3D%27black%27%20fill-rule%3D%27evenodd%27%2F%3E%3C%2Fsvg%3E");
}

.css-icon-education::before,
.css-icon-diploma::before,
.css-icon-triangular-ruler::before,
.css-icon-pencil::before,
.css-icon-book::before,
.css-icon-school-bag::before {
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 0;
    transform: none;
    background: currentColor;
    -webkit-mask: var(--icon-mask) center / contain no-repeat;
    mask: var(--icon-mask) center / contain no-repeat;
}

.css-icon-education::after,
.css-icon-diploma::after,
.css-icon-triangular-ruler::after,
.css-icon-pencil::after,
.css-icon-book::after,
.css-icon-school-bag::after {
    content: none;
    display: none;
}

.css-icon-education > span,
.css-icon-diploma > span,
.css-icon-triangular-ruler > span,
.css-icon-pencil > span,
.css-icon-book > span,
.css-icon-school-bag > span {
    display: none !important;
}
/* css-icon-mask-end */

.card-shapes {
    color: currentColor;
}

.course-card:nth-child(1) .css-edu-icon {
    --icon-opacity: 0.17;
}

.course-card:nth-child(2) .css-edu-icon {
    --icon-opacity: 0.18;
}

.course-card:nth-child(3) .css-edu-icon {
    --icon-opacity: 0.13;
}

.card-shapes .css-edu-icon {
    --icon-size: clamp(54px, 4.8vw, 88px);
}

.card-shapes .motif-one {
    left: auto;
    right: 8%;
    top: 9%;
    --shape-rotate: -8deg;
    --shape-x: 12px;
    --shape-y: -12px;
    --shape-speed: 13s;
}

.card-shapes .motif-two {
    left: 8%;
    right: auto;
    top: 26%;
    --shape-rotate: 9deg;
    --shape-x: -12px;
    --shape-y: 14px;
    --shape-animation: eduDriftLong;
    --shape-speed: 15s;
    --shape-delay: -2s;
}

.card-shapes .motif-three {
    right: 9%;
    bottom: 13%;
    --shape-rotate: -10deg;
    --shape-x: -10px;
    --shape-y: -14px;
    --shape-animation: eduBobSoft;
    --shape-speed: 12s;
    --shape-delay: -4s;
}

.card-shapes-giao-vien .motif-one {
    left: auto;
    right: 9%;
    top: 9%;
    --shape-rotate: 8deg;
}

.card-shapes-giao-vien .motif-two {
    left: 8%;
    right: auto;
    top: 25%;
    --shape-rotate: -12deg;
}

.card-shapes-giao-vien .motif-three {
    left: auto;
    right: 10%;
    bottom: 12%;
    --shape-rotate: 7deg;
}

.card-shapes-nvsp .motif-one {
    left: auto;
    right: 8%;
    top: 9%;
    --shape-rotate: -16deg;
}

.card-shapes-nvsp .motif-two {
    left: 8%;
    right: auto;
    top: 26%;
    --shape-rotate: 8deg;
}

.card-shapes-nvsp .motif-three {
    right: 10%;
    bottom: 14%;
    --shape-rotate: -5deg;
}

.section-shape-field .css-edu-icon {
    --icon-opacity: 0.105;
    --icon-size: clamp(62px, 5.5vw, 112px);
}

.detail-shapes .motif-one {
    left: 3%;
    top: 13%;
    --shape-rotate: -9deg;
    --shape-x: 14px;
    --shape-y: -14px;
    --shape-animation: eduDriftLong;
    --shape-speed: 18s;
}

.detail-shapes .motif-two {
    right: 4%;
    top: 11%;
    --shape-rotate: 8deg;
    --shape-x: -14px;
    --shape-y: 12px;
    --shape-speed: 15s;
    --shape-delay: -2.4s;
}

.detail-shapes .motif-three {
    left: 28%;
    bottom: 7%;
    --shape-rotate: 14deg;
    --shape-animation: eduBobSoft;
    --shape-speed: 13s;
    --shape-delay: -4.2s;
}

.detail-shapes .motif-four {
    right: 19%;
    bottom: 8%;
    --shape-rotate: -15deg;
    --shape-animation: eduDriftLong;
    --shape-speed: 17s;
    --shape-delay: -5s;
}

.detail-shapes .motif-five {
    left: 10%;
    bottom: 12%;
    --shape-rotate: 10deg;
    --shape-animation: eduBobSoft;
    --shape-speed: 15s;
    --shape-delay: -7s;
}

.detail-shapes .motif-six {
    left: 42%;
    top: 20%;
    --shape-rotate: -17deg;
    --shape-animation: eduDriftLong;
    --shape-speed: 19s;
    --shape-delay: -9s;
}

.detail-lotties .lottie-primary {
    left: clamp(34px, 6vw, 100px);
    top: clamp(250px, 28vw, 430px);
    --lottie-size: clamp(190px, 24vw, 380px);
    --lottie-opacity: 0.36;
    --lottie-rotate: -5deg;
    --lottie-x: 16px;
    --lottie-y: -12px;
    --lottie-speed: 22s;
}

.detail-lotties .lottie-secondary {
    left: clamp(150px, 18vw, 280px);
    top: clamp(520px, 48vw, 760px);
    --lottie-size: clamp(140px, 17vw, 270px);
    --lottie-opacity: 0.22;
    --lottie-rotate: 7deg;
    --lottie-x: -14px;
    --lottie-y: 10px;
    --lottie-speed: 24s;
    --lottie-delay: -6s;
}

.form-shapes .motif-one {
    left: 5%;
    top: 13%;
    --shape-rotate: 18deg;
    --shape-x: -14px;
    --shape-y: 12px;
    --shape-speed: 12s;
}

.form-shapes .motif-two {
    left: 23%;
    bottom: 10%;
    --shape-rotate: -7deg;
    --shape-animation: eduDriftLong;
    --shape-speed: 17s;
    --shape-delay: -2s;
}

.form-shapes .motif-three {
    right: 5%;
    top: 10%;
    --shape-rotate: 8deg;
    --shape-animation: eduBobSoft;
    --shape-speed: 14s;
    --shape-delay: -5s;
}

.form-shapes .motif-four {
    right: 4%;
    bottom: 9%;
    --shape-rotate: -13deg;
    --shape-animation: eduDriftLong;
    --shape-speed: 18s;
    --shape-delay: -3s;
}

.form-shapes .motif-five {
    left: 11%;
    bottom: 31%;
    --shape-rotate: 14deg;
    --shape-animation: eduBobSoft;
    --shape-speed: 16s;
    --shape-delay: -8s;
}

.form-shapes .motif-six {
    left: 34%;
    top: 19%;
    --shape-rotate: -12deg;
    --shape-animation: eduDriftLong;
    --shape-speed: 20s;
    --shape-delay: -9s;
}

.form-lotties .lottie-primary {
    left: clamp(36px, 6vw, 112px);
    top: clamp(150px, 16vw, 260px);
    --lottie-size: clamp(190px, 24vw, 390px);
    --lottie-opacity: 0.34;
    --lottie-rotate: -4deg;
    --lottie-x: 14px;
    --lottie-y: -16px;
    --lottie-speed: 21s;
}

.form-lotties .lottie-secondary {
    left: clamp(78px, 12vw, 210px);
    top: clamp(520px, 45vw, 720px);
    --lottie-size: clamp(145px, 18vw, 280px);
    --lottie-opacity: 0.22;
    --lottie-rotate: 6deg;
    --lottie-x: -14px;
    --lottie-y: 12px;
    --lottie-speed: 24s;
    --lottie-delay: -7s;
}

.contact-shapes .motif-one {
    left: 6%;
    top: 17%;
    --shape-rotate: 9deg;
    --shape-animation: eduBobSoft;
    --shape-speed: 12s;
}

.contact-shapes .motif-two {
    right: 8%;
    top: 14%;
    --shape-rotate: -8deg;
    --shape-x: -16px;
    --shape-y: 16px;
    --shape-speed: 15s;
}

.contact-shapes .motif-three {
    left: 28%;
    bottom: 12%;
    --shape-rotate: -16deg;
    --shape-animation: eduDriftLong;
    --shape-speed: 18s;
    --shape-delay: -3s;
}

.contact-shapes .motif-four {
    right: 24%;
    bottom: 12%;
    --shape-rotate: 12deg;
    --shape-animation: eduBobSoft;
    --shape-speed: 14s;
    --shape-delay: -5s;
}

.contact-shapes .motif-five {
    left: 45%;
    top: 13%;
    --shape-rotate: -7deg;
    --shape-animation: eduDriftLong;
    --shape-speed: 19s;
    --shape-delay: -8s;
}

.contact-shapes .motif-six {
    right: 8%;
    bottom: 16%;
    --shape-rotate: 10deg;
    --shape-animation: eduBobSoft;
    --shape-speed: 16s;
    --shape-delay: -9s;
}

.contact-lotties .lottie-primary {
    left: clamp(18px, 7vw, 112px);
    bottom: clamp(10px, 3vw, 42px);
    --lottie-size: clamp(150px, 18vw, 300px);
    --lottie-opacity: 0.24;
    --lottie-rotate: -7deg;
    --lottie-x: 14px;
    --lottie-y: -10px;
    --lottie-speed: 23s;
}

.footer-shapes .motif-one {
    left: 5%;
    top: 12%;
    --shape-rotate: -10deg;
    --shape-animation: eduDriftLong;
    --shape-speed: 20s;
}

.footer-shapes .motif-two {
    left: 39%;
    bottom: 16%;
    --shape-rotate: 8deg;
    --shape-animation: eduBobSoft;
    --shape-speed: 15s;
    --shape-delay: -4s;
}

.footer-shapes .motif-three {
    right: 17%;
    top: 12%;
    --shape-rotate: 13deg;
    --shape-animation: eduDriftLong;
    --shape-speed: 21s;
    --shape-delay: -6s;
}

.footer-shapes .motif-four {
    right: 5%;
    bottom: 20%;
    --shape-rotate: -11deg;
    --shape-animation: eduBobSoft;
    --shape-speed: 16s;
    --shape-delay: -9s;
}

.footer-lotties .lottie-primary {
    right: clamp(12px, 5vw, 90px);
    top: clamp(8px, 2vw, 26px);
    --lottie-size: clamp(160px, 19vw, 330px);
    --lottie-opacity: 0.24;
    --lottie-rotate: 7deg;
    --lottie-x: -12px;
    --lottie-y: 14px;
    --lottie-speed: 24s;
}

.course-card {
    position: relative;
    --card-start: var(--royal-blue);
    --card-end: var(--sky-blue);
    --card-ink: #fff;
    --card-muted-ink: rgba(255, 255, 255, 0.82);
    --card-chip-bg: rgba(255, 255, 255, 0.94);
    --card-chip-end: rgba(255, 255, 255, 0.86);
    --card-chip-ink: var(--harbor-blue);
    --card-chip-border: rgba(255, 255, 255, 0.84);
    --card-fact-bg: rgba(255, 255, 255, 0.13);
    --card-fact-border: rgba(255, 255, 255, 0.26);
    --card-action-bg: #fff;
    --card-action-ink: var(--harbor-blue);
    --card-cursor-glow: rgba(255, 255, 255, 0.28);
    --card-cursor-glow-active: rgba(255, 255, 255, 0.34);
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto auto;
    align-content: stretch;
    min-height: 100%;
    padding: clamp(28px, 4vw, 58px);
    padding-top: clamp(88px, 8vw, 124px);
    overflow: hidden;
    border: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.22);
    background:
        radial-gradient(circle at var(--mx, 68%) var(--my, 72%), var(--card-cursor-glow), transparent 34%),
        linear-gradient(155deg, var(--card-start) 0%, var(--card-end) 100%);
    color: var(--card-ink);
    text-align: left;
    cursor: pointer;
    transition: background 220ms ease, color 220ms ease, transform 220ms var(--ease-out), box-shadow 220ms ease;
    animation: panelRise 700ms var(--ease-out) both;
    animation-delay: calc(var(--panel-index, 0) * 90ms);
}

.course-title-group {
    position: relative;
    z-index: 1;
    display: grid;
    align-self: center;
    justify-self: center;
    justify-items: center;
    width: min(100%, 560px);
    gap: 16px;
    margin: clamp(16px, 4vh, 56px) 0 clamp(28px, 5vh, 72px);
    text-align: center;
}

.phrase-title {
    text-wrap: balance;
    overflow-wrap: normal;
    word-break: normal;
}

.phrase-keep {
    display: inline-block;
    white-space: nowrap;
    vertical-align: baseline;
}

.course-card:nth-child(1) {
    --panel-index: 0;
    --card-start: #18334b;
    --card-end: #2f5e7f;
    --card-chip-ink: #18334b;
    --card-action-ink: #18334b;
}

.course-card:nth-child(2) {
    --panel-index: 1;
    --card-start: #5e8caf;
    --card-end: #95b8d1;
    --card-ink: #10263a;
    --card-muted-ink: rgba(16, 38, 58, 0.78);
    --card-chip-bg: #18334b;
    --card-chip-end: #2f5e7f;
    --card-chip-ink: #fff;
    --card-chip-border: rgba(255, 255, 255, 0.52);
    --card-fact-bg: rgba(255, 255, 255, 0.46);
    --card-fact-border: rgba(47, 94, 127, 0.2);
    --card-action-bg: #18334b;
    --card-action-ink: #fff;
}

.course-card:nth-child(3) {
    --panel-index: 2;
    --card-start: #dcebf5;
    --card-end: #f6fbfe;
    --card-ink: #10263a;
    --card-muted-ink: rgba(16, 38, 58, 0.76);
    --card-chip-bg: #2f5e7f;
    --card-chip-end: #18334b;
    --card-chip-ink: #fff;
    --card-chip-border: rgba(255, 255, 255, 0.66);
    --card-fact-bg: rgba(255, 255, 255, 0.5);
    --card-fact-border: rgba(47, 94, 127, 0.18);
    --card-action-bg: #18334b;
    --card-action-ink: #fff;
    --card-cursor-glow: rgba(47, 94, 127, 0.3);
    --card-cursor-glow-active: rgba(47, 94, 127, 0.34);
    border-right: 0;
}

.course-card::before {
    content: "";
    position: absolute;
    inset: auto clamp(20px, 4vw, 50px) clamp(26px, 5vw, 72px) auto;
    width: clamp(120px, 14vw, 210px);
    height: clamp(120px, 14vw, 210px);
    border: 1px solid currentColor;
    border-radius: 50%;
    opacity: 0.16;
    transition: transform 260ms var(--ease-out), opacity 260ms ease;
    display: none;
}

.course-card::after {
    content: "";
    position: absolute;
    right: clamp(34px, 5vw, 94px);
    bottom: clamp(42px, 6vw, 118px);
    width: clamp(132px, 14vw, 218px);
    height: clamp(72px, 8vw, 116px);
    border: 1px solid currentColor;
    border-radius: 10px 10px 24px 24px;
    background:
        linear-gradient(currentColor, currentColor) 50% 10% / 1px 82% no-repeat,
        repeating-linear-gradient(0deg, transparent 0 11px, currentColor 11px 12px, transparent 12px 18px) 15% 18% / 31% 62% no-repeat,
        repeating-linear-gradient(0deg, transparent 0 11px, currentColor 11px 12px, transparent 12px 18px) 84% 18% / 31% 62% no-repeat;
    opacity: 0.18;
    transform: perspective(160px) rotateX(54deg) rotate(-8deg);
    transform-origin: center bottom;
    display: none;
}

.course-card:hover,
.course-card:focus-visible {
    outline: 0;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4), 0 28px 76px rgba(47, 94, 127, 0.18);
    transform: translateY(-4px);
}

.course-card:hover::before,
.course-card:focus-visible::before {
    opacity: 0.28;
    transform: scale(1.07);
}

.course-card:hover::after,
.course-card:focus-visible::after {
    animation: markPulse 1.5s ease-in-out infinite;
}

.course-card.is-active {
    z-index: 2;
    color: var(--card-ink);
    background:
        radial-gradient(circle at var(--mx, 72%) var(--my, 70%), var(--card-cursor-glow-active), transparent 30%),
        linear-gradient(155deg, var(--card-start) 0%, var(--card-end) 100%);
    box-shadow:
        inset 0 0 0 2px rgba(255, 255, 255, 0.64),
        inset 0 -8px 0 rgba(255, 255, 255, 0.42),
        0 30px 72px rgba(47, 94, 127, 0.2);
}

.course-card > .course-logo-wrap {
    position: absolute;
    z-index: 3;
    left: clamp(20px, 2.8vw, 36px);
    top: clamp(18px, 2.6vw, 34px);
    display: grid;
    width: clamp(70px, 7.2vw, 104px);
    height: clamp(70px, 7.2vw, 104px);
    place-items: center;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
    animation: logoFloat 5.6s ease-in-out infinite;
}

.course-logo-wrap::before {
    content: "";
    position: absolute;
    inset: -11px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(222, 246, 255, 0.94) 0 18%, rgba(170, 226, 255, 0.58) 40%, rgba(96, 190, 255, 0.24) 58%, transparent 72%);
    filter: blur(10px);
    opacity: 0.78;
    transform: scale(0.96);
    animation: logoGlow 3.2s ease-in-out infinite;
}

.course-logo {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: contain;
    mix-blend-mode: normal;
    filter: var(--logo-sky-glow) drop-shadow(0 18px 28px rgba(47, 94, 127, 0.18));
    transition: transform 260ms var(--ease-out), filter 260ms ease;
}

.course-card:nth-child(2) .course-logo-wrap::before {
    opacity: 0.95;
}

.course-card strong {
    position: relative;
    z-index: 1;
    display: block;
    align-self: center;
    max-width: 520px;
    margin-top: 0;
    font-size: clamp(20px, 2.05vw, 30px);
    line-height: 1.13;
    letter-spacing: 0;
}

.course-card:not(.is-active) strong {
    text-shadow: 0 2px 16px rgba(47, 94, 127, 0.18);
}

.course-level-chip,
.detail-level-chip {
    position: relative;
    z-index: 1;
    display: inline-flex;
    width: fit-content;
    max-width: min(100%, 560px);
    align-items: center;
    justify-content: center;
    border: 1px solid var(--card-chip-border, rgba(255, 255, 255, 0.82));
    border-radius: 999px;
    color: var(--card-chip-ink, #2f5e7f);
    background:
        linear-gradient(135deg, var(--card-chip-bg, rgba(255, 255, 255, 0.98)), var(--card-chip-end, rgba(255, 255, 255, 0.86))),
        var(--card-chip-bg, #fff);
    box-shadow:
        0 16px 34px rgba(47, 94, 127, 0.18),
        inset 0 0 0 1px rgba(121, 172, 217, 0.28);
    font-weight: 900;
    letter-spacing: 0.01em;
    overflow-wrap: anywhere;
    text-align: center;
}

.course-level-chip.is-stacked,
.detail-level-chip.is-stacked {
    flex-direction: column;
    gap: 2px;
    overflow-wrap: normal;
}

.level-chip-line {
    display: block;
    white-space: nowrap;
}

.course-level-chip {
    margin-top: 0;
    padding: 11px 18px;
    font-size: clamp(16px, 1.28vw, 19px);
    line-height: 1.2;
}

.course-card:nth-child(2) .course-level-chip {
    border-color: var(--card-chip-border);
    color: var(--card-chip-ink);
    background:
        linear-gradient(135deg, var(--card-chip-bg), var(--card-chip-end)),
        var(--card-chip-bg);
    box-shadow:
        0 16px 34px rgba(47, 94, 127, 0.18),
        inset 0 0 0 1px rgba(121, 172, 217, 0.28);
}

.course-card.is-active strong {
    color: var(--card-ink);
}

.course-card.is-active .course-level-chip {
    border-color: var(--card-chip-border);
    color: var(--card-chip-ink);
    background:
        linear-gradient(135deg, var(--card-chip-bg), var(--card-chip-end)),
        var(--card-chip-bg);
    box-shadow: 0 16px 34px rgba(47, 94, 127, 0.22);
}

.course-facts {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 20px;
}

.course-facts span {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    padding: 0 12px;
    border: 1px solid var(--card-fact-border);
    border-radius: 999px;
    color: var(--card-muted-ink);
    background: var(--card-fact-bg);
    font-size: clamp(12px, 1vw, 14px);
    font-weight: 900;
    box-shadow: 0 10px 24px rgba(47, 94, 127, 0.08);
}

.course-card:nth-child(2) .course-facts span {
    border-color: var(--card-fact-border);
    color: var(--card-muted-ink);
    background: var(--card-fact-bg);
}

.course-card.is-active .course-facts span {
    border-color: var(--card-fact-border);
    color: var(--card-muted-ink);
    background: var(--card-fact-bg);
    box-shadow: 0 12px 26px rgba(47, 94, 127, 0.12);
}

.course-card:hover .course-logo,
.course-card:focus-visible .course-logo {
    filter: var(--logo-sky-glow-strong) drop-shadow(0 22px 34px rgba(47, 94, 127, 0.22));
    transform: scale(1.05);
}

.course-card:hover .course-logo-wrap::before,
.course-card:focus-visible .course-logo-wrap::before {
    opacity: 1;
    transform: scale(1.08);
}

.course-action {
    position: relative;
    z-index: 1;
    display: inline-flex;
    width: fit-content;
    min-height: 46px;
    align-items: center;
    margin-top: 28px;
    padding: 0 18px;
    border-radius: 999px;
    color: var(--card-action-ink);
    background: var(--card-action-bg);
    font-size: 14px;
    font-weight: 900;
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.16);
    transition: color 180ms ease, background 180ms ease, transform 180ms var(--ease-out), box-shadow 180ms ease;
}

.course-card:hover .course-action,
.course-card:focus-visible .course-action {
    box-shadow: 0 18px 42px rgba(47, 94, 127, 0.22);
    transform: translateY(-2px);
}

.course-card.is-active .course-action {
    color: var(--card-action-ink);
    background: var(--card-action-bg);
    box-shadow: 0 18px 42px rgba(47, 94, 127, 0.24);
}

.selected-course {
    scroll-margin-top: calc(var(--bar-height) + 18px);
}

.selected-course.is-settled .course-identity,
.selected-course.is-settled .course-data,
.selected-course.is-settled .form-copy,
.selected-course.is-settled .registration-form,
.selected-course.is-settled .contact-layout > * {
    animation: fadeSlide 520ms var(--ease-out) both;
}

.selected-course.is-settled .course-data,
.selected-course.is-settled .registration-form,
.selected-course.is-settled .contact-layout > *:last-child {
    animation-delay: 90ms;
}

.detail-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-top: 1px solid rgba(47, 94, 127, 0.14);
    border-bottom: 1px solid rgba(47, 94, 127, 0.12);
    background:
        radial-gradient(circle at 84% 12%, rgba(149, 184, 209, 0.26), transparent 28%),
        radial-gradient(circle at 14% 24%, rgba(149, 184, 209, 0.18), transparent 24%),
        linear-gradient(180deg, #ffffff 0%, #f4f9fd 42%, #e3f0f8 100%);
}

.detail-section::before,
.detail-section::after,
.form-section::before,
.form-section::after,
.contact-section::before,
.contact-section::after,
.site-footer::before {
    content: "";
    position: absolute;
    pointer-events: none;
}

.detail-section::before {
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(circle at 16% 18%, rgba(149, 184, 209, 0.16), transparent 25%),
        radial-gradient(circle at 78% 8%, rgba(47, 94, 127, 0.08), transparent 26%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.62), rgba(220, 235, 245, 0.18));
    opacity: 0.94;
}

.detail-section::after {
    right: clamp(-96px, -5vw, -34px);
    top: clamp(58px, 8vw, 120px);
    z-index: 0;
    width: clamp(230px, 28vw, 470px);
    height: clamp(160px, 20vw, 330px);
    border: 1px solid rgba(47, 94, 127, 0.14);
    border-radius: 28px 28px 58px 58px;
    background:
        radial-gradient(circle at 28% 26%, rgba(149, 184, 209, 0.2), transparent 26%),
        radial-gradient(circle at 72% 70%, rgba(47, 94, 127, 0.12), transparent 30%),
        rgba(220, 235, 245, 0.24);
    opacity: 0.58;
    transform: perspective(230px) rotateX(58deg) rotate(-7deg);
    display: none;
}

.detail-section .section-inner,
.form-section .section-inner,
.contact-section .section-inner,
.site-footer .section-inner {
    position: relative;
    z-index: 1;
}

.section-inner {
    width: min(1280px, calc(100% - 72px));
    margin: 0 auto;
}

.detail-layout {
    display: grid;
    grid-template-columns: minmax(320px, 0.85fr) minmax(420px, 1.15fr);
    gap: clamp(36px, 7vw, 96px);
    align-items: start;
    padding: clamp(56px, 7vw, 96px) 0 clamp(28px, 4vw, 56px);
}

.detail-expanded-frame {
    padding: 0 0 clamp(58px, 7vw, 104px);
}

.course-identity {
    position: sticky;
    top: calc(var(--bar-height) + 28px);
}

.form-copy span,
.contact-label {
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    border-radius: 999px;
    color: var(--teal-dark);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.detail-section h1 {
    max-width: 820px;
    margin: 0;
    font-size: clamp(24px, 2.45vw, 36px);
    line-height: 1.1;
    letter-spacing: 0;
}

.detail-level-chip {
    margin-top: 22px;
    padding: 12px 20px;
    border-color: rgba(255, 255, 255, 0.86);
    color: #fff;
    background:
        linear-gradient(135deg, #2f5e7f, #79acd9),
        var(--teal);
    box-shadow: 0 18px 38px rgba(47, 94, 127, 0.26);
    font-size: clamp(18px, 1.55vw, 22px);
    line-height: 1.2;
}

.course-data {
    position: relative;
    padding: clamp(18px, 2.4vw, 28px);
    border: 1px solid rgba(47, 94, 127, 0.2);
    border-radius: 24px;
    background:
        radial-gradient(circle at 12% 0%, rgba(149, 184, 209, 0.24), transparent 34%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(229, 242, 250, 0.9));
    box-shadow: 0 30px 86px rgba(47, 94, 127, 0.17);
}

.fact-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.fact-card {
    display: grid;
    gap: 7px;
    min-height: 84px;
    align-items: start;
    align-content: center;
    container-type: inline-size;
    padding: 12px 14px;
    min-width: 0;
    border: 1px solid rgba(47, 94, 127, 0.16);
    border-radius: 18px;
    background:
        radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.92), transparent 42%),
        linear-gradient(135deg, #c7deed, #a9cbe1);
    box-shadow: 0 18px 40px rgba(47, 94, 127, 0.18);
}

.fact-card,
.field,
.contact-card {
    animation: fadeSlide 420ms var(--ease-out) both;
    animation-delay: calc(var(--i, 0) * 42ms);
}

.fact-label,
.field > span,
.contact-card span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.04em;
    line-height: 1.15;
    text-transform: uppercase;
}

.fact-label {
    font-size: clamp(11px, 5.9cqw, 15px);
}

.fact-value,
.detail-row strong {
    color: var(--ink);
    line-height: 1.12;
    overflow-wrap: break-word;
}

.fact-label,
.fact-value {
    color: var(--teal-ink);
}

.fact-label {
    opacity: 0.82;
}

.fact-value {
    display: grid;
    gap: 4px;
    font-size: clamp(14px, 1.2vw, 18px);
    line-height: 1.14;
    text-align: right;
}

.fact-value-main,
.fact-value-line {
    display: block;
}

.fact-value-main.has-unit {
    display: grid;
    gap: 1px;
}

.fact-amount,
.fact-unit {
    display: block;
}

.fact-unit {
    font-size: 0.72em;
    line-height: 1.04;
    opacity: 0.88;
    white-space: nowrap;
}

.fact-value-line {
    overflow-wrap: normal;
    white-space: nowrap;
    word-break: normal;
}

.fact-card.is-contact-fact .fact-value {
    gap: 3px;
    font-size: clamp(12px, 1.05vw, 14px);
}

.fact-card.is-compact-fact .fact-value {
    font-size: clamp(12px, 1.05vw, 14px);
}

.fact-card.is-compact-fact .fact-value-main {
    overflow-wrap: normal;
    white-space: nowrap;
    word-break: normal;
}

.fact-value-sub {
    display: block;
    color: rgba(16, 38, 58, 0.72);
    font-size: 13px;
    font-weight: 900;
    line-height: 1.2;
}

.fact-value-sub.is-chip {
    justify-self: start;
    margin-top: 2px;
    padding: 5px 9px;
    border: 1px solid rgba(47, 94, 127, 0.18);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.42);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34);
}

.fact-card.is-split {
    min-height: 84px;
    padding: 12px 13px;
}

.fact-split-grid {
    display: grid;
    gap: 8px;
    align-content: center;
    height: 100%;
}

.fact-split-row {
    display: grid;
    grid-template-columns: max-content minmax(0, max-content);
    justify-content: space-between;
    gap: 5px;
    align-items: center;
    min-width: 0;
}

.fact-split-label {
    min-width: 0;
    color: rgba(16, 38, 58, 0.78);
    font-size: clamp(13px, 6.5cqw, 15px);
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
}

.fact-split-value {
    min-width: 0;
    color: var(--ink);
    font-size: clamp(14px, 7.6cqw, 17px);
    font-weight: 900;
    line-height: 1.18;
    overflow-wrap: normal;
    text-align: right;
    text-wrap: nowrap;
    white-space: nowrap;
    word-break: normal;
}

@media (min-width: 981px) {
    .fact-grid[data-count="5"] {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .fact-grid[data-count="5"] .fact-card {
        grid-column: span 2;
    }

    .fact-grid[data-count="5"] .fact-card:nth-child(4) {
        grid-column: 2 / span 2;
    }

    .fact-grid[data-count="5"] .fact-card:nth-child(5) {
        grid-column: 4 / span 2;
    }

    .fact-grid[data-count="5"] .fact-card.is-split .fact-split-row {
        grid-template-columns: minmax(60px, 0.78fr) minmax(0, 1fr);
    }

    .fact-grid[data-count="5"] .fact-card.is-split .fact-split-label {
        font-size: clamp(11px, 5.4cqw, 13px);
    }

    .fact-grid[data-count="5"] .fact-card.is-split .fact-split-value {
        font-size: clamp(13px, 6.7cqw, 16px);
    }

    .fact-grid[data-count="6"] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .fact-value.fact-value-lines {
        font-size: 15px;
        line-height: 1.18;
    }
}

.see-more-button,
.submit-button {
    min-height: 48px;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    font-weight: 900;
}

.see-more-button {
    margin-top: 28px;
    padding: 0 18px;
    color: #fff;
    background:
        linear-gradient(135deg, #5e8caf, #95b8d1),
        var(--teal);
    box-shadow: 0 16px 34px rgba(47, 94, 127, 0.24);
    transition: transform 180ms var(--ease-out), box-shadow 180ms ease, background 180ms ease;
}

.see-more-button:hover,
.see-more-button:focus-visible {
    box-shadow: 0 22px 48px rgba(149, 184, 209, 0.3);
    transform: translateY(-2px);
}

.full-detail {
    max-height: 0;
    margin: 0;
    padding: 0 clamp(18px, 2.8vw, 34px);
    overflow: hidden;
    border: 1px solid rgba(47, 94, 127, 0);
    border-radius: 30px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(239, 248, 253, 0.9)),
        #fff;
    box-shadow: 0 26px 72px rgba(47, 94, 127, 0);
    opacity: 0;
    transform: translateY(10px);
    transition:
        max-height 520ms var(--ease-out),
        padding 280ms var(--ease-out),
        border-color 220ms ease,
        box-shadow 260ms ease,
        opacity 220ms ease,
        transform 280ms var(--ease-out);
}

.full-detail.is-open {
    max-height: 10000px;
    padding-top: clamp(22px, 3vw, 36px);
    padding-bottom: clamp(22px, 3vw, 36px);
    border-color: rgba(47, 94, 127, 0.18);
    box-shadow: 0 26px 72px rgba(47, 94, 127, 0.18);
    opacity: 1;
    transform: translateY(0);
}

.detail-article {
    display: grid;
    gap: 18px;
    align-items: start;
}

.detail-article .is-overview-block,
.detail-article .is-wide-block {
    display: block;
}

.detail-article .is-overview-block {
    margin-top: 0;
}

.detail-bento-flow {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 18px;
}

.detail-bento-column {
    display: grid;
    align-content: start;
    gap: 18px;
    min-width: 0;
}

.detail-block,
.detail-subsection {
    animation: fadeSlide 420ms var(--ease-out) both;
    animation-delay: calc(var(--i, 0) * 46ms);
}

.detail-block {
    display: block;
    align-self: start;
    width: 100%;
    height: auto;
    margin: 0;
    break-inside: avoid;
    page-break-inside: avoid;
    padding: clamp(16px, 2vw, 24px);
    border: 1px solid rgba(47, 94, 127, 0.12);
    border-radius: 24px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(237, 247, 255, 0.72)),
        #fff;
    box-shadow: 0 14px 38px rgba(47, 94, 127, 0.08);
}

.detail-block:first-of-type {
    border-top: 1px solid rgba(47, 94, 127, 0.12);
}

.detail-block.is-contact-block,
.detail-block.is-related-block {
    padding: clamp(14px, 1.7vw, 20px);
}

.detail-block.is-subsection-grid-block {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 16px;
}

.detail-block.is-subsection-grid-block > h3,
.detail-block.is-subsection-grid-block > .detail-copy,
.detail-block.is-subsection-grid-block > .detail-list,
.detail-block.is-subsection-grid-block > .detail-table {
    grid-column: 1 / -1;
}

.detail-block.is-subsection-grid-block > .detail-subsection {
    margin-top: 0;
}

.detail-subsection {
    margin-top: 16px;
    padding: 14px;
    border: 1px solid rgba(47, 94, 127, 0.12);
    border-left: 4px solid rgba(47, 94, 127, 0.62);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.72);
}

.detail-heading {
    margin: 0;
    color: var(--teal-ink);
    font-weight: 900;
    line-height: 1.12;
}

.detail-block h3 {
    font-size: clamp(20px, 1.8vw, 26px);
}

.detail-subsection h4 {
    font-size: clamp(17px, 1.25vw, 20px);
}

.detail-heading-course {
    display: grid;
    justify-items: start;
    gap: 8px;
}

.detail-heading-main {
    display: block;
    max-width: 100%;
}

.detail-heading-level {
    display: inline-block;
    max-width: 100%;
    padding: 7px 11px;
    border: 1px solid rgba(47, 94, 127, 0.18);
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(149, 184, 209, 0.24), rgba(255, 255, 255, 0.82));
    color: #18334b;
    font-size: clamp(13px, 1vw, 15px);
    font-weight: 900;
    line-height: 1.2;
    overflow-wrap: normal;
    word-break: normal;
    text-wrap: balance;
}

.detail-copy,
.detail-footnote {
    margin: 14px 0 0;
    color: var(--muted);
    font-size: 16px;
}

.detail-list {
    margin: 0;
    margin-top: 16px;
    padding-left: 22px;
}

.detail-list li + li {
    margin-top: 10px;
}

.detail-list li::marker {
    color: var(--teal);
}

.detail-list.is-contact-icon-list {
    display: grid;
    gap: 12px;
    padding-left: 0;
    list-style: none;
}

.detail-list.is-contact-icon-list li {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    min-width: 0;
}

.detail-list.is-contact-icon-list li + li {
    margin-top: 0;
}

.detail-contact-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid rgba(47, 94, 127, 0.16);
    border-radius: 999px;
    color: #2f5e7f;
    background:
        radial-gradient(circle at 32% 18%, rgba(255, 255, 255, 0.98), transparent 58%),
        rgba(149, 184, 209, 0.22);
    box-shadow: 0 8px 18px rgba(47, 94, 127, 0.12);
}

.detail-contact-icon svg {
    width: 15px;
    height: 15px;
}

.detail-contact-specialist {
    color: var(--ink);
    font-weight: 700;
}

.detail-contact-hotline {
    color: rgba(16, 38, 58, 0.62);
    font-weight: 500;
}

.detail-list-item.is-account-line {
    padding-top: 2px;
}

.detail-line-label,
.detail-account-name {
    display: block;
}

.detail-line-label {
    color: var(--muted);
    font-weight: 700;
}

.detail-account-name {
    margin-top: 4px;
    color: var(--ink);
    font-size: clamp(10px, 0.82vw, 15px);
    line-height: 1.35;
    letter-spacing: -0.01em;
    overflow-wrap: normal;
    white-space: nowrap;
    word-break: normal;
}

.address-keep,
.detail-address-keep,
.detail-phone-keep {
    display: inline-block;
    white-space: nowrap;
}

.detail-subsection > .detail-list {
    columns: 2;
    column-gap: 28px;
}

.detail-block.is-full-bullet-block .detail-subsection > .detail-list {
    columns: 1;
}

.detail-subsection > .detail-list li {
    break-inside: avoid;
}

.detail-table {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 18px;
    border-top: 0;
}

.detail-row {
    display: grid;
    gap: 8px;
    min-height: 78px;
    align-content: center;
    padding: 12px;
    border: 1px solid rgba(47, 94, 127, 0.12);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.8);
}

.detail-row > span,
.detail-step > span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.detail-step .detail-address-keep {
    color: inherit;
    font: inherit;
    font-weight: inherit;
    letter-spacing: 0;
    text-transform: none;
}

.detail-row strong {
    color: var(--ink);
    font-size: 17px;
    line-height: 1.35;
    overflow-wrap: normal;
    word-break: normal;
}

.credit-map {
    display: grid;
    grid-template-columns: minmax(132px, 0.86fr) clamp(34px, 4vw, 58px) minmax(150px, 1fr);
    grid-template-areas: "total branch parts";
    gap: 0;
    align-items: center;
    min-height: 164px;
    margin-top: 16px;
}

.credit-node {
    display: grid;
    gap: 8px;
    align-content: center;
    min-width: 0;
    min-height: 82px;
    padding: 14px 15px;
    border: 1px solid rgba(47, 94, 127, 0.14);
    border-radius: 16px;
    background:
        radial-gradient(circle at 14% 0%, rgba(255, 255, 255, 0.92), transparent 44%),
        linear-gradient(135deg, rgba(231, 244, 252, 0.96), rgba(197, 222, 239, 0.86));
    box-shadow: 0 14px 32px rgba(47, 94, 127, 0.12);
}

.credit-node.is-total {
    grid-area: total;
    min-height: 96px;
    border-color: rgba(47, 94, 127, 0.26);
    background:
        radial-gradient(circle at 14% 0%, rgba(255, 255, 255, 0.88), transparent 42%),
        linear-gradient(135deg, rgba(149, 184, 209, 0.88), rgba(121, 172, 217, 0.82));
}

.credit-branch-lines {
    grid-area: branch;
    display: block;
    height: 132px;
    margin: 0 -1px;
    pointer-events: none;
}

.credit-branch-lines svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.credit-branch-lines path {
    fill: none;
    stroke: rgba(47, 94, 127, 0.82);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 5;
}

.credit-branch-parts {
    grid-area: parts;
    display: grid;
    gap: 24px;
}

.credit-node-label {
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.06em;
    line-height: 1.15;
    text-transform: uppercase;
}

.credit-node-value {
    color: var(--ink);
    font-size: clamp(18px, 1.35vw, 22px);
    font-weight: 900;
    line-height: 1.1;
}

.detail-steps {
    display: grid;
    gap: 12px;
    margin-top: 18px;
    border-top: 0;
}

.detail-step {
    display: grid;
    grid-template-columns: 50px minmax(0, 1fr);
    align-items: center;
    gap: 18px;
    padding: 14px;
    border: 1px solid rgba(47, 94, 127, 0.12);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.78);
    animation: fadeSlide 360ms var(--ease-out) both;
    animation-delay: calc(var(--i, 0) * 40ms);
}

.detail-step p {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: var(--ink);
    font-weight: 800;
}

.form-scroll-link {
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    justify-content: center;
    padding: 5px 12px;
    border: 1px solid rgba(47, 94, 127, 0.24);
    border-radius: 999px;
    background:
        linear-gradient(135deg, rgba(149, 184, 209, 0.42), rgba(255, 255, 255, 0.9)),
        #dcebf5;
    color: var(--teal-ink);
    cursor: pointer;
    font: inherit;
    font-size: 0.96em;
    font-weight: 950;
    letter-spacing: 0;
    text-transform: none;
    box-shadow: 0 8px 18px rgba(47, 94, 127, 0.12);
    transition: color 160ms ease, border-color 160ms ease, background 160ms ease, transform 160ms var(--ease-out), box-shadow 160ms ease;
}

.form-scroll-link:hover,
.form-scroll-link:focus-visible {
    outline: 0;
    border-color: rgba(47, 94, 127, 0.38);
    background: #fff;
    color: #18334b;
    box-shadow: 0 12px 24px rgba(47, 94, 127, 0.18);
    transform: translateY(-1px);
}

.detail-step .detail-list {
    grid-column: 2;
    margin-top: -6px;
}

.detail-footnote {
    padding: 12px 14px;
    border: 1px solid rgba(149, 184, 209, 0.18);
    border-left: 4px solid var(--accent);
    border-radius: 14px;
    background: rgba(216, 240, 255, 0.46);
}

.form-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    scroll-margin-top: calc(var(--bar-height) + 18px);
    color: var(--ink);
    border-top: 1px solid rgba(47, 94, 127, 0.14);
    border-bottom: 1px solid rgba(47, 94, 127, 0.14);
    background:
        radial-gradient(circle at 14% 16%, rgba(47, 94, 127, 0.22), transparent 27%),
        radial-gradient(circle at 82% 78%, rgba(149, 184, 209, 0.55), transparent 32%),
        linear-gradient(135deg, #d5e8f4 0%, #bfd8e9 48%, #edf7fc 100%);
}

.form-section::before {
    left: clamp(-110px, -6vw, -42px);
    top: clamp(68px, 9vw, 136px);
    z-index: 0;
    width: clamp(240px, 30vw, 510px);
    height: clamp(310px, 40vw, 640px);
    border: 1px solid rgba(47, 94, 127, 0.12);
    border-radius: 34px;
    background:
        linear-gradient(90deg, rgba(47, 94, 127, 0.14) 0 3px, transparent 3px) 64px 0 / 1px 100% no-repeat,
        repeating-linear-gradient(0deg, transparent 0 38px, rgba(47, 94, 127, 0.11) 38px 39px),
        linear-gradient(180deg, rgba(255, 255, 255, 0.62), rgba(220, 235, 245, 0.2));
    box-shadow: 0 28px 70px rgba(47, 94, 127, 0.08);
    opacity: 0.72;
    transform: rotate(-5deg);
    display: none;
}

.form-section::after {
    right: clamp(-84px, -4vw, -28px);
    bottom: clamp(80px, 10vw, 170px);
    z-index: 0;
    width: clamp(180px, 23vw, 360px);
    height: 34px;
    border-radius: 999px;
    background:
        linear-gradient(90deg, rgba(24, 51, 75, 0.22) 0 12%, rgba(149, 184, 209, 0.48) 12% 84%, rgba(24, 51, 75, 0.22) 84% 100%),
        repeating-linear-gradient(90deg, transparent 0 18px, rgba(16, 38, 58, 0.18) 18px 19px);
    opacity: 0.58;
    transform: rotate(-28deg);
    display: none;
}

.form-layout {
    display: grid;
    grid-template-columns: minmax(260px, 0.46fr) minmax(0, 1fr);
    gap: clamp(34px, 6vw, 86px);
    padding: clamp(58px, 8vw, 104px) 0;
}

.form-copy {
    position: sticky;
    top: calc(var(--bar-height) + 28px);
    align-self: start;
}

.form-copy span {
    color: var(--teal);
}

.form-copy h2,
.contact-layout h2 {
    margin: 0;
    font-size: clamp(25px, 2.8vw, 38px);
    line-height: 1.08;
    letter-spacing: 0;
}

.form-copy h2 {
    color: #0f2940;
    text-shadow: 0 10px 28px rgba(47, 94, 127, 0.12);
}

.form-copy p {
    max-width: 420px;
    margin: 22px 0 0;
    color: var(--muted);
    font-size: 18px;
}

.form-assurance {
    display: grid;
    gap: 10px;
    margin-top: 30px;
}

.form-assurance span {
    width: fit-content;
    min-height: 36px;
    padding: 0 14px;
    border: 1px solid rgba(47, 94, 127, 0.2);
    border-radius: 999px;
    color: var(--teal-ink);
    background: rgba(255, 255, 255, 0.72);
    letter-spacing: 0;
    text-transform: none;
    box-shadow: 0 12px 28px rgba(47, 94, 127, 0.1);
}

.registration-form {
    min-width: 0;
    padding: clamp(22px, 3vw, 38px);
    border: 1px solid rgba(47, 94, 127, 0.22);
    border-radius: 30px;
    color: var(--ink);
    background:
        radial-gradient(circle at 100% 0%, rgba(149, 184, 209, 0.2), transparent 28%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(242, 248, 252, 0.97)),
        #fff;
    box-shadow: 0 34px 92px rgba(47, 94, 127, 0.24);
}

.form-card-head {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    margin-bottom: 28px;
    padding-bottom: 22px;
    border-bottom: 1px solid rgba(47, 94, 127, 0.18);
}

.form-card-head > span {
    display: grid;
    width: 48px;
    height: 48px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 16px;
    color: #fff;
    background: linear-gradient(135deg, #2f5e7f, #79acd9);
    font-size: 14px;
    font-weight: 900;
}

.form-card-head strong {
    display: block;
    color: var(--ink);
    font-size: clamp(24px, 2.2vw, 34px);
    line-height: 1.05;
}

.form-card-head p {
    max-width: 620px;
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 15px;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 20px;
}

.field {
    display: grid;
    gap: 8px;
}

.field.is-wide {
    grid-column: 1 / -1;
}

.field > span {
    color: #335174;
}

.field input,
.field select,
.field textarea {
    width: 100%;
    min-height: 50px;
    border: 1px solid rgba(47, 94, 127, 0.16);
    border-radius: 16px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.82);
    color: var(--ink);
    outline: 0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms var(--ease-out), background 160ms ease;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    border-color: rgba(149, 184, 209, 0.76);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(149, 184, 209, 0.12);
    transform: translateY(-1px);
}

.field.is-invalid input,
.field.is-invalid select,
.field.is-invalid textarea {
    border-color: rgba(220, 38, 38, 0.72);
    background: #fffafa;
    box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.1);
}

.field input::placeholder,
.field textarea::placeholder {
    color: rgba(51, 81, 116, 0.58);
}

.field select {
    color: var(--ink);
}

.field option {
    color: var(--ink);
}

.choice-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.choice-option {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid rgba(47, 94, 127, 0.16);
    border-radius: 999px;
    color: var(--ink);
    background: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    font-weight: 800;
    transition: border-color 160ms ease, background 160ms ease, transform 160ms var(--ease-out);
}

.choice-option:hover,
.choice-option:focus-within {
    border-color: rgba(149, 184, 209, 0.74);
    background: rgba(216, 240, 255, 0.72);
    transform: translateY(-1px);
}

.choice-option.has-other-toggle.is-other-active {
    border-color: rgba(3, 62, 140, 0.42);
    background: rgba(149, 184, 209, 0.28);
    box-shadow: 0 10px 24px rgba(3, 62, 140, 0.12);
}

.field.is-invalid .choice-option {
    border-color: rgba(220, 38, 38, 0.42);
    background: #fffafa;
}

.choice-option input {
    width: auto;
    min-height: auto;
}

.choice-option span {
    color: inherit;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: none;
}

.choice-other-input {
    flex: 1 1 min(420px, 100%);
    max-width: 460px;
    margin: 0 0 2px 8px;
    min-height: 42px;
    border-radius: 16px;
    border: 1px solid rgba(47, 94, 127, 0.18);
    background: rgba(255, 255, 255, 0.92);
    color: var(--ink);
    font-size: 14px;
    font-weight: 750;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 10px 22px rgba(3, 62, 140, 0.08);
    transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.choice-other-input[hidden] {
    display: none;
}

.choice-other-input:focus {
    border-color: rgba(3, 62, 140, 0.56);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(149, 184, 209, 0.22), 0 12px 28px rgba(3, 62, 140, 0.12);
    outline: none;
}

.field textarea {
    min-height: 98px;
    resize: vertical;
}

.field-error {
    min-height: 17px;
    color: #b42318;
    font-size: 12px;
    font-weight: 900;
    line-height: 1.35;
}

.privacy-check {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px 10px;
    align-items: start;
    margin-top: 24px;
    padding: 14px 16px;
    border: 1px solid rgba(47, 94, 127, 0.12);
    border-radius: 18px;
    color: #335174;
    background: rgba(234, 245, 255, 0.68);
    font-size: 14px;
}

.privacy-check.is-invalid {
    border-color: rgba(220, 38, 38, 0.42);
    background: #fffafa;
    box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.08);
}

.privacy-check input {
    margin-top: 4px;
}

.privacy-check a {
    color: var(--accent-strong);
    font-weight: 900;
}

.privacy-check .field-error {
    grid-column: 2;
}

.captcha-field {
    grid-column: 1 / -1;
    margin-top: clamp(20px, 2.5vw, 32px);
}

.captcha-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
}

.captcha-img {
    width: 128px;
    height: 46px;
    border: 1px solid rgba(47, 94, 127, 0.2);
    border-radius: 14px;
    background: #fff;
    object-fit: cover;
    cursor: pointer;
}

.form-message {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    min-height: 52px;
    margin-top: 16px;
    padding: 14px 16px;
    border: 1px solid rgba(47, 94, 127, 0.16);
    border-radius: 18px;
    color: var(--ink);
    background: rgba(255, 255, 255, 0.78);
    font-size: 14px;
    font-weight: 800;
    box-shadow: 0 14px 34px rgba(21, 101, 192, 0.08);
}

.form-message[hidden] {
    display: none;
}

.form-message:empty {
    display: none;
}

.form-message strong {
    padding: 5px 10px;
    border-radius: 999px;
    color: #fff;
    background: var(--accent);
    font-size: 12px;
    line-height: 1.15;
    white-space: nowrap;
}

.form-message span {
    min-width: 0;
    color: inherit;
    line-height: 1.55;
}

.form-message.is-success {
    color: #08743f;
    border-color: rgba(8, 116, 63, 0.22);
    background: linear-gradient(135deg, rgba(232, 255, 242, 0.94), rgba(255, 255, 255, 0.96));
}

.form-message.is-success strong {
    background: #08743f;
}

.form-message.is-error {
    color: #b42318;
    border-color: rgba(180, 35, 24, 0.22);
    background: linear-gradient(135deg, rgba(255, 241, 240, 0.96), rgba(255, 255, 255, 0.96));
}

.form-message.is-error strong {
    background: #b42318;
}

.form-message.is-loading {
    color: var(--accent-strong);
    border-color: rgba(47, 94, 127, 0.24);
    background: linear-gradient(135deg, rgba(232, 246, 255, 0.98), rgba(255, 255, 255, 0.96));
}

.form-message.is-loading strong {
    background: var(--accent);
}

.submit-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 24px;
    padding: 0 24px;
    color: #fff;
    background:
        linear-gradient(135deg, #5e8caf, #95b8d1),
        var(--teal);
    box-shadow: 0 18px 42px rgba(47, 94, 127, 0.24);
    transition: transform 180ms var(--ease-out), box-shadow 180ms ease, background 180ms ease;
}

.submit-button:hover,
.submit-button:focus-visible {
    background:
        linear-gradient(135deg, #2f5e7f, #7fa8c4),
        var(--teal);
    box-shadow: 0 24px 52px rgba(149, 184, 209, 0.3);
    transform: translateY(-2px);
}

.submit-button:disabled {
    cursor: wait;
    opacity: 0.68;
    transform: none;
}

.submit-button.is-loading::before {
    content: "";
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.42);
    border-top-color: #fff;
    border-radius: 999px;
    animation: formSpin 760ms linear infinite;
}

.submit-button.is-loading:disabled {
    opacity: 1;
}

.registration-form.is-submitting {
    cursor: wait;
}

.registration-form.is-submitting input:not([type="hidden"]),
.registration-form.is-submitting select,
.registration-form.is-submitting textarea {
    color: var(--ink);
    background-color: rgba(245, 250, 255, 0.84);
    opacity: 0.74;
    -webkit-text-fill-color: var(--ink);
}

.registration-form.is-submitting .choice-option,
.registration-form.is-submitting .privacy-check,
.captcha-img.is-disabled {
    cursor: wait;
    opacity: 0.68;
    filter: saturate(0.82);
}

.captcha-img.is-disabled {
    pointer-events: none;
}

@keyframes formSpin {
    to {
        transform: rotate(360deg);
    }
}

.contact-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    scroll-margin-top: calc(var(--bar-height) + 18px);
    border-top: 1px solid rgba(47, 94, 127, 0.14);
    background:
        radial-gradient(circle at 22% 6%, rgba(149, 184, 209, 0.3), transparent 28%),
        linear-gradient(180deg, #f8fcff 0%, #d7e9f4 54%, #c5ddeb 100%);
}

.contact-section::before {
    inset: 0;
    z-index: 0;
    background:
        linear-gradient(90deg, transparent 0 68px, rgba(47, 94, 127, 0.12) 68px 70px, transparent 70px) 20px 34px / 360px 230px,
        linear-gradient(0deg, transparent 0 52px, rgba(47, 94, 127, 0.08) 52px 53px, transparent 53px) 0 0 / 420px 180px,
        radial-gradient(circle at 16% 18%, rgba(149, 184, 209, 0.24), transparent 22%),
        radial-gradient(circle at 84% 72%, rgba(47, 94, 127, 0.12), transparent 24%);
    opacity: 0.92;
}

.contact-section::after {
    right: clamp(20px, 8vw, 150px);
    top: clamp(42px, 7vw, 98px);
    z-index: 0;
    width: clamp(180px, 22vw, 340px);
    height: clamp(112px, 14vw, 210px);
    border: 1px solid rgba(47, 94, 127, 0.12);
    border-radius: 26px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(220, 235, 245, 0.26)),
        repeating-linear-gradient(0deg, transparent 0 24px, rgba(47, 94, 127, 0.12) 24px 25px, transparent 25px 38px);
    box-shadow: 0 20px 54px rgba(47, 94, 127, 0.08);
    opacity: 0.62;
    clip-path: polygon(0 0, 100% 0, 100% 82%, 64% 82%, 54% 100%, 46% 82%, 0 82%);
    display: none;
}

.contact-layout {
    display: grid;
    grid-template-columns: minmax(260px, 0.42fr) minmax(0, 1fr);
    gap: clamp(28px, 5vw, 72px);
    align-items: start;
    padding: clamp(50px, 7vw, 92px) 0;
}

.contact-label {
    color: var(--accent);
}

.contact-layout p {
    max-width: 390px;
    margin: 18px 0 0;
    color: var(--muted);
    font-size: 17px;
}

.contact-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.contact-card {
    position: relative;
    min-height: 178px;
    padding: clamp(22px, 3vw, 34px);
    overflow: hidden;
    border: 1px solid rgba(47, 94, 127, 0.18);
    border-radius: 26px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(245, 250, 253, 0.92));
    box-shadow: 0 22px 62px rgba(47, 94, 127, 0.17);
    transition: background 180ms ease, transform 180ms var(--ease-out), box-shadow 180ms ease;
}

.contact-card::before {
    content: "";
    position: absolute;
    right: -46px;
    bottom: -46px;
    width: 128px;
    height: 128px;
    border-radius: 50%;
    background: rgba(149, 184, 209, 0.2);
}

.contact-card:hover {
    background: #fff;
    box-shadow: 0 26px 70px rgba(47, 94, 127, 0.18);
    transform: translateY(-2px);
}

.contact-card:nth-child(odd) {
    border-right: 1px solid rgba(47, 94, 127, 0.14);
}

.contact-card strong {
    display: block;
    margin-top: 14px;
    font-size: clamp(34px, 4vw, 56px);
    line-height: 1;
}

.contact-card p {
    position: relative;
    z-index: 1;
    max-width: 320px;
    margin: 16px 0 0;
    color: var(--muted);
    font-size: 15px;
}

.contact-card a {
    display: inline-flex;
    position: relative;
    z-index: 1;
    margin-top: 16px;
    color: var(--teal-dark);
    font-size: 18px;
    font-weight: 900;
    text-decoration: none;
}

.contact-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}

.contact-actions a {
    min-height: 38px;
    align-items: center;
    margin-top: 0;
    padding: 0 13px;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(135deg, #2f5e7f, #79acd9);
    font-size: 13px;
}

.contact-actions a + a {
    color: var(--teal-dark);
    background: var(--accent-soft);
}

.site-footer {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    color: var(--ink);
    background:
        radial-gradient(circle at 12% 0%, rgba(47, 94, 127, 0.12), transparent 30%),
        radial-gradient(circle at 90% 82%, rgba(149, 184, 209, 0.48), transparent 34%),
        linear-gradient(135deg, #f7fbfe 0%, #dcebf5 52%, #edf7fc 100%);
}

.footer-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(30px, 4.2vw, 56px);
    align-items: start;
    padding: clamp(44px, 6vw, 76px) 0;
}

.footer-brand {
    display: grid;
    grid-column: 1 / -1;
    gap: 14px;
    align-items: center;
    justify-items: center;
    text-align: center;
}

.footer-brand img {
    width: clamp(82px, 9vw, 128px);
    height: clamp(82px, 9vw, 128px);
    object-fit: contain;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    filter: var(--logo-sky-glow) drop-shadow(0 18px 34px rgba(47, 94, 127, 0.16));
}

.footer-brand strong {
    display: block;
    max-width: none;
    color: var(--ink);
    font-size: 22px;
    line-height: 1.06;
    text-transform: uppercase;
    white-space: nowrap;
}

.footer-brand p {
    max-width: 560px;
    margin: 6px 0 0;
    color: var(--muted);
    font-weight: 800;
}

.footer-trust {
    position: relative;
    grid-column: 1 / -1;
    justify-self: center;
    overflow: hidden;
    width: min(100%, 980px);
    margin: clamp(8px, 2vw, 18px) 0 0;
    padding: 14px 0 0;
    border-top: 1px solid rgba(47, 94, 127, 0.18);
    color: var(--teal-ink);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.45;
    text-align: center;
}

.footer-info-grid {
    display: grid;
    grid-template-columns:
        minmax(270px, 1.75fr)
        minmax(230px, 1.2fr)
        minmax(165px, 0.9fr)
        minmax(150px, 0.82fr)
        minmax(165px, 0.92fr);
    column-gap: clamp(42px, 4vw, 68px);
    row-gap: 26px;
    width: min(100%, 1180px);
    justify-self: center;
    align-items: start;
}

.footer-info-item {
    display: grid;
    gap: 8px;
    min-width: 0;
    align-content: start;
    padding-top: 14px;
    border-top: 1px solid rgba(47, 94, 127, 0.16);
    color: var(--ink);
    text-decoration: none;
    transition: color 180ms ease, transform 180ms var(--ease-out), border-color 180ms ease;
}

.footer-info-label {
    color: var(--teal);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.footer-info-item address,
.footer-info-item strong {
    color: var(--ink);
    font-weight: 800;
    line-height: 1.35;
}

.footer-info-item address {
    font-style: normal;
}

.footer-info-item strong {
    min-height: 44px;
    display: flex;
    align-items: flex-start;
    font-size: 16px;
    white-space: nowrap;
}

.footer-info-item:hover,
.footer-info-item:focus-visible {
    border-color: rgba(47, 94, 127, 0.34);
    color: var(--teal-dark);
    transform: translateY(-2px);
}

.footer-info-item:hover strong,
.footer-info-item:focus-visible strong {
    color: var(--teal-dark);
}

.back-to-cards {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 30;
    display: grid;
    width: 54px;
    height: 54px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.42);
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(135deg, #5e8caf, #95b8d1);
    box-shadow: 0 12px 34px rgba(47, 94, 127, 0.26);
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
    transition: opacity 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.back-to-cards.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.back-to-cards:hover,
.back-to-cards:focus-visible {
    box-shadow: 0 18px 46px rgba(149, 184, 209, 0.34);
    transform: translateY(-2px);
}

.back-to-cards span {
    font-size: 24px;
    font-weight: 900;
}

@media (max-width: 1180px) and (min-width: 981px) {
    .footer-info-grid {
        grid-template-columns: minmax(0, 1.28fr) minmax(0, 1fr) minmax(0, 1fr);
        column-gap: clamp(30px, 4vw, 48px);
        row-gap: 24px;
    }

    .footer-info-address {
        grid-column: 1 / -1;
    }

    .footer-info-item strong {
        min-height: auto;
        white-space: normal;
    }
}

@media (max-width: 980px) {
    :root {
        --bar-height: 148px;
    }

    .topbar {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px 12px;
        padding: 10px 14px;
    }

    .topbar-brand {
        min-width: 0;
    }

    .topbar-brand-text strong {
        font-size: 12px;
        line-height: 1.12;
    }

    .topbar-brand-text span {
        font-size: 11px;
    }

    .topbar-trust {
        display: none;
        grid-column: 1 / -1;
        order: 3;
        padding: 8px 10px;
        border-radius: 18px;
        font-size: 10px;
    }

    .topbar-nav {
        grid-column: 1 / -1;
        order: 3;
        justify-content: flex-start;
        overflow-x: auto;
        padding-bottom: 2px;
    }

    .topbar-course {
        padding: 0 10px;
        font-size: 11px;
    }

    .topbar-action {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
        min-height: 36px;
        padding: 0 14px;
    }

    .course-entry {
        grid-template-columns: 1fr;
        min-height: auto;
        background: linear-gradient(160deg, #dcebf5, #95b8d1 58%, var(--paper) 58%);
    }

    .course-card {
        min-height: 245px;
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.18);
        padding: 22px 20px 24px;
        padding-top: 86px;
    }

    .card-shapes .css-edu-icon {
        --icon-opacity: 0.11;
        --icon-size: clamp(44px, 13vw, 70px);
    }

    .card-shapes .motif-one {
        left: auto;
        right: 6%;
        top: 8%;
    }

    .card-shapes .motif-two {
        left: auto;
        right: 30%;
        top: 8%;
    }

    .card-shapes .motif-three {
        left: auto;
        right: 8%;
        bottom: 14%;
    }

    .section-shape-field .css-edu-icon {
        --icon-opacity: 0.075;
        --icon-size: clamp(46px, 14vw, 76px);
    }

    .detail-shapes .motif-three,
    .detail-shapes .motif-four,
    .detail-shapes .motif-six,
    .form-shapes .motif-two,
    .form-shapes .motif-four,
    .form-shapes .motif-six,
    .contact-shapes .motif-five,
    .contact-shapes .motif-six,
    .footer-shapes .motif-three,
    .contact-shapes .motif-two {
        display: none;
    }

    .lottie-asset {
        mix-blend-mode: multiply;
        filter: saturate(0.82) contrast(0.92) drop-shadow(0 14px 30px rgba(47, 94, 127, 0.1));
    }

    .detail-lotties .lottie-primary {
        left: -44px;
        top: 158px;
        --lottie-size: clamp(118px, 33vw, 170px);
        --lottie-opacity: 0.16;
    }

    .form-lotties .lottie-primary {
        left: -42px;
        top: 96px;
        --lottie-size: clamp(120px, 34vw, 176px);
        --lottie-opacity: 0.15;
    }

    .footer-lotties .lottie-primary {
        right: -38px;
        top: 22px;
        --lottie-size: clamp(118px, 32vw, 164px);
        --lottie-opacity: 0.15;
    }

    .detail-lotties .lottie-secondary,
    .form-lotties .lottie-secondary,
    .contact-lotties {
        display: none;
    }

    .course-logo-wrap {
        left: 18px;
        top: 14px;
        width: 64px;
        height: 64px;
        border-radius: 0;
    }

    .course-title-group {
        margin: 8px 0 24px;
    }

    .course-card strong {
        margin-top: 0;
        font-size: 23px;
        line-height: 1.08;
    }

    .course-title-group {
        gap: 13px;
        margin: 28px auto;
    }

    .course-level-chip {
        margin-top: 0;
        padding: 10px 14px;
        font-size: 16px;
        line-height: 1.2;
    }

    .section-inner {
        width: min(100% - 32px, 1280px);
    }

    .detail-layout,
    .form-layout,
    .contact-layout,
    .footer-layout {
        grid-template-columns: 1fr;
        gap: 28px;
        padding: 44px 0;
    }

    .detail-expanded-frame {
        padding: 0 0 44px;
    }

    .course-identity,
    .form-copy {
        position: static;
    }

    .detail-section h1,
    .form-copy h2,
    .contact-layout h2 {
        font-size: 25px;
        line-height: 1.1;
    }

    .detail-level-chip {
        margin-top: 16px;
        padding: 10px 15px;
        font-size: 17px;
    }

    .form-copy p {
        font-size: 16px;
    }

    .fact-card,
    .detail-row,
    .detail-step {
        grid-template-columns: 1fr;
        min-height: auto;
        padding: 12px;
    }

    .detail-table {
        grid-template-columns: 1fr;
    }

    .course-data,
    .registration-form {
        border-radius: 24px;
        padding: 20px;
    }

    .fact-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fact-grid[data-count="5"] .fact-card:last-child {
        grid-column: 1 / -1;
    }

    .fact-card {
        min-height: auto;
        padding: 14px;
    }

    .fact-value {
        font-size: 20px;
    }

    .fact-split-row {
        grid-template-columns: minmax(92px, 0.72fr) minmax(0, 1fr);
    }

    .fact-split-value {
        text-align: right;
    }

    .credit-map {
        grid-template-columns: minmax(98px, 0.82fr) 24px minmax(116px, 1fr);
        gap: 0;
        min-height: 150px;
    }

    .credit-node {
        min-height: auto;
        padding: 10px;
    }

    .credit-node.is-total {
        min-height: 78px;
    }

    .credit-branch-lines {
        height: 118px;
    }

    .credit-branch-lines path {
        stroke-width: 4;
    }

    .credit-branch-parts {
        gap: 18px;
    }

    .credit-node-label {
        font-size: 9.5px;
    }

    .credit-node-value {
        font-size: 15px;
    }

    .full-detail.is-open {
        max-height: 15000px;
    }

    .detail-article {
        grid-template-columns: 1fr;
    }

    .detail-bento-flow {
        grid-template-columns: 1fr;
    }

    .detail-block.is-subsection-grid-block {
        grid-template-columns: 1fr;
    }

    .detail-block {
        padding: 20px;
    }

    .detail-subsection {
        padding: 14px;
    }

    .detail-subsection > .detail-list {
        columns: 1;
    }

    .detail-block h3 {
        font-size: 22px;
    }

    .detail-heading-level {
        border-radius: 16px;
    }

    .detail-step .detail-list {
        grid-column: auto;
        margin-top: 8px;
    }

    .form-grid,
    .contact-grid {
        grid-template-columns: 1fr;
    }

    .field.is-wide {
        grid-column: auto;
    }

    .choice-list {
        display: grid;
        grid-template-columns: 1fr;
    }

    .choice-other-input {
        width: 100%;
        max-width: none;
        margin: 0;
    }

    .captcha-row {
        grid-template-columns: 1fr;
    }

    .captcha-img {
        width: min(180px, 100%);
    }

    .contact-card,
    .contact-card:nth-child(odd) {
        border-right: 1px solid rgba(47, 94, 127, 0.14);
        padding: 20px;
    }

    .footer-brand {
        align-items: center;
        justify-items: center;
        text-align: center;
    }

    .footer-brand strong {
        font-size: 18px;
    }

    .footer-info-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        width: 100%;
    }

    .footer-info-item,
    .footer-info-address {
        grid-column: auto;
        padding-top: 12px;
    }

    .footer-info-item strong {
        min-height: auto;
    }

    .back-to-cards {
        right: 14px;
        bottom: 14px;
    }
}

@media (max-width: 640px) {
    .fact-grid {
        grid-template-columns: 1fr;
    }

    .fact-grid[data-count="5"] .fact-card:last-child {
        grid-column: auto;
    }

    .fact-card {
        gap: 9px;
        min-height: 76px;
        padding: 15px 16px;
    }

    .fact-label {
        font-size: clamp(13px, 3.8vw, 15px);
    }

    .fact-value {
        font-size: clamp(22px, 6.1vw, 24px);
        line-height: 1.08;
    }

    .fact-card.is-compact-fact .fact-value,
    .fact-card.is-contact-fact .fact-value {
        font-size: clamp(14px, 4.1vw, 20px);
        line-height: 1.18;
    }

    .fact-split-grid {
        gap: 10px;
    }

    .fact-split-label {
        font-size: clamp(14px, 4vw, 18px);
    }

    .fact-split-value {
        font-size: clamp(18px, 5.1vw, 20px);
    }

    .fact-card.is-compact-fact .fact-value-main {
        white-space: normal;
    }

    .detail-account-name {
        font-size: clamp(9px, 2.45vw, 12px);
    }

    .footer-brand strong {
        font-size: 12px;
    }
}

@media (max-width: 370px) {
    .fact-card {
        padding: 14px;
    }

    .fact-value {
        font-size: 21px;
    }

    .fact-card.is-compact-fact .fact-value,
    .fact-card.is-contact-fact .fact-value {
        font-size: 13px;
    }

    .footer-brand strong {
        font-size: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
    }

    .css-edu-icon {
        animation: none !important;
    }

    .lottie-field,
    .lottie-asset {
        display: none !important;
        animation: none !important;
    }
}