.vocational-expo__title { position: relative; padding-bottom: 12px; font-weight: 700; }
        .vocational-expo__title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 60px; height: 4px; border-radius: 2px; background-color: #7ac150; }
        .vocational-expo__section-title { font-weight: 700; }
        .vocational-expo__year-tabs { display: flex; flex-wrap: nowrap; gap: 8px; margin-bottom: 20px; overflow-x: auto; }
        .vocational-expo__year-tab { flex-shrink: 0; padding: 8px 20px; font-size: 14px; font-weight: 700; color: #7ac150; background-color: #ffffff; border: 1px solid #7ac150; border-radius: 999px; cursor: pointer; transition: color 0.2s ease, background-color 0.2s ease; }
        .vocational-expo__year-tab:hover { background-color: rgba(122, 193, 80, 0.1); }
        .vocational-expo__year-tab--active { color: #ffffff; background-color: #7ac150; }
        .vocational-expo__year-tab--active:hover { background-color: #7ac150; }
        .vocational-expo__card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
        .vocational-expo__card { display: flex; flex-direction: column; overflow: hidden; text-align: left; background-color: #ffffff; border: 1px solid #e5e5e5; border-radius: 12px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; }
        .vocational-expo__card:hover { box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12); transform: translateY(-2px); }
        .vocational-expo__card:hover .vocational-expo__card-cta { color: #ffffff; background-color: #7ac150; }
        .vocational-expo__card-thumb { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background-color: #eef4e7; }
        .vocational-expo__card-thumb img { width: 100%; height: 100%; object-fit: cover; }
        .vocational-expo__card-play { position: absolute; top: 50%; left: 50%; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: #ffffff; background-color: rgba(0, 0, 0, 0.45); border-radius: 50%; transform: translate(-50%, -50%); }
        .vocational-expo__card-body { display: flex; flex: 1; flex-direction: column; gap: 4px; padding: 12px 14px 14px; }
        .vocational-expo__card-name { font-size: 16px; font-weight: 700; color: #222222; }
        .vocational-expo__card-sub { display: -webkit-box; min-height: 2.6em; overflow: hidden; font-size: 12px; line-height: 1.3; color: #888888; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
        .vocational-expo__card-cta { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 0; margin-top: auto; font-size: 13px; font-weight: 700; color: #7ac150; background-color: rgba(122, 193, 80, 0.1); border-radius: 999px; transition: color 0.2s ease, background-color 0.2s ease; }
        .vocational-expo__card--pdf { cursor: default; }
        .vocational-expo__card-thumb--pdf { display: flex; align-items: center; justify-content: center; }
        .vocational-expo__card-thumb--pdf i { font-size: 48px; color: #7ac150; }
        .vocational-expo__card-actions { display: flex; gap: 8px; margin-top: auto; }
        .vocational-expo__card-btn { display: inline-flex; align-items: center; justify-content: center; flex: 1; gap: 6px; padding: 6px 0; font-size: 13px; font-weight: 700; border: 1px solid #7ac150; border-radius: 999px; cursor: pointer; }
        .vocational-expo__card-btn--primary { color: #ffffff; background-color: #7ac150; }
        .vocational-expo__card-btn--outline { color: #7ac150; background-color: #ffffff; text-decoration: none;}
        .vocational-expo__player { position: relative; width: 100%; aspect-ratio: 16 / 9; }
        .vocational-expo__player iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }