/* =========================================================
   CONTENT PAGE SYSTEM
   Ngôn ngữ thiết kế dùng chung cho các trang menu cha/con.

   Chuẩn tham chiếu: trang Giới thiệu Tiếng Trung Hero.
   Không áp dụng cho Home, About, Teachers và form popup.
========================================================= */

:is(
    .courses-page,
    .schedules-page,
    .campuses-page,
    .articles-page,
    .events-page,
    .policies-page,
    .achievements-page,
    .contact-page,
    .course-program-page,
    .course-detail-page,
    .campus-detail-page,
    .content-detail-page
) {
    --content-page-blue: #1e73be;
    --content-page-blue-hover: #17639f;
    --content-page-navy: #123d6b;
    --content-page-text: #60778b;
    --content-page-muted: #7b8fa1;
    --content-page-soft: #eef8fc;
    --content-page-soft-2: #f6fafc;
    --content-page-bg: #f5f8fa;
    --content-page-border: #d8e7ef;
    --content-page-radius: 18px;
    --content-page-shadow: 0 18px 45px rgba(18, 61, 107, .075);
    --content-page-shadow-hover: 0 24px 58px rgba(18, 61, 107, .115);

    width: 100%;
    overflow: hidden;
    background: #fff;
}

/* =========================================================
   SECTION RHYTHM
========================================================= */

:is(
    .courses-paths,
    .courses-list-section,
    .courses-choice,
    .courses-final-cta,
    .schedules-filter-section,
    .schedules-results,
    .schedules-consultation,
    .campuses-intro,
    .campuses-list-section,
    .campuses-support,
    .campuses-final-cta,
    .articles-topics,
    .articles-featured,
    .articles-list-section,
    .articles-empty-section,
    .articles-final-cta,
    .events-intro,
    .events-list-section,
    .events-follow,
    .policies-intro,
    .policies-index,
    .policies-principles,
    .policies-support,
    .achievements-status,
    .achievements-measure,
    .achievements-verification,
    .achievements-future,
    .achievements-final-cta,
    .contact-main,
    .contact-support,
    .contact-final
) {
    padding-block: clamp(72px, 6.8vw, 104px);
}

/* Mỗi trang vẫn giữ bố cục riêng, chỉ đồng bộ nhịp nền. */
:is(
    .courses-list-section,
    .schedules-results,
    .campuses-list-section,
    .articles-list-section,
    .events-list-section,
    .policies-index,
    .achievements-measure,
    .contact-support
) {
    background: var(--content-page-soft-2);
}

:is(
    .courses-paths,
    .schedules-filter-section,
    .campuses-intro,
    .articles-topics,
    .events-intro,
    .policies-intro,
    .achievements-status,
    .contact-main
) {
    background: #fff;
}

/* =========================================================
   SECTION HEADINGS
========================================================= */

:is(
    .courses-section-heading,
    .campuses-section-heading,
    .articles-section-heading,
    .events-section-heading,
    .policies-section-heading,
    .achievements-section-heading,
    .contact-section-heading,
    .program-section-heading
) {
    margin-bottom: clamp(34px, 3.7vw, 54px);
}

:is(
    .courses-eyebrow,
    .schedules-eyebrow,
    .campuses-eyebrow,
    .articles-eyebrow,
    .events-eyebrow,
    .policies-eyebrow,
    .achievements-eyebrow,
    .contact-eyebrow,
    .program-eyebrow,
    .course-detail-eyebrow,
    .campus-detail-eyebrow,
    .content-detail-eyebrow
) {
    display: inline-block;
    color: var(--content-page-blue);
    font-size: 14px !important;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: .13em;
    text-transform: uppercase;
}

:is(
    .courses-heading-line,
    .schedules-heading-line,
    .campuses-heading-line,
    .articles-heading-line,
    .events-heading-line,
    .policies-heading-line,
    .achievements-heading-line,
    .contact-heading-line,
    .program-heading-line,
    .course-detail-heading-line,
    .campus-detail-heading-line,
    .content-detail-heading-line
) {
    width: 58px;
    height: 2px;
    display: block;
    margin: 14px 0 21px;
    border-radius: 999px;
    background: var(--content-page-blue);
}

:is(
    .courses-section-heading,
    .campuses-section-heading,
    .articles-section-heading,
    .events-section-heading,
    .policies-section-heading,
    .achievements-section-heading,
    .contact-section-heading,
    .program-section-heading
) h2,
.schedules-filter-card__heading h2,
.schedules-results__heading h2,
.campuses-intro__heading h2,
.articles-topics__heading h2,
.events-intro__heading h2,
.policies-intro__heading h2,
.achievements-status__content h2,
.contact-info > h2 {
    color: var(--content-page-navy);
    font-size: clamp(34px, 3.6vw, 49px);
    font-weight: 850;
    line-height: 1.1;
    letter-spacing: -.038em;
}

:is(
    .courses-section-heading,
    .campuses-section-heading,
    .articles-section-heading,
    .events-section-heading,
    .policies-section-heading,
    .achievements-section-heading,
    .contact-section-heading,
    .program-section-heading
) h2 > span,
.schedules-filter-card__heading h2 > span,
.schedules-results__heading h2 > span,
.campuses-intro__heading h2 > span,
.articles-topics__heading h2 > span,
.events-intro__heading h2 > span,
.policies-intro__heading h2 > span,
.achievements-status__content h2 > span,
.contact-info > h2 > span {
    color: var(--content-page-blue);
}

:is(
    .courses-section-heading,
    .campuses-section-heading,
    .articles-section-heading,
    .events-section-heading,
    .policies-section-heading,
    .achievements-section-heading,
    .contact-section-heading,
    .program-section-heading
) > p,
.schedules-filter-card__heading > p,
.campuses-intro__content,
.articles-topics__content,
.events-intro__content,
.policies-intro__content,
.achievements-status__content > p,
.contact-info__lead {
    color: var(--content-page-text);
    font-size: 15px;
    line-height: 1.78;
}

/* =========================================================
   CARD SURFACES
========================================================= */

:is(
    .course-path-card,
    .course-page-card,
    .schedule-card,
    .campus-card,
    .article-page-card,
    .event-card,
    .policy-card,
    .achievement-measure-card,
    .achievements-future-card,
    .contact-info-card,
    .contact-support-card,
    .program-fit-card,
    .program-feature-card,
    .program-roadmap-card,
    .program-outcome-card,
    .course-detail-fit-card,
    .course-detail-related-card,
    .campus-detail-info-card,
    .campus-detail-related-card,
    .content-detail-related-card
) {
    border: 1px solid var(--content-page-border);
    border-radius: var(--content-page-radius);
    background: #fff;
    box-shadow: var(--content-page-shadow);
}

@media (hover: hover) and (pointer: fine) {
    :is(
        .course-path-card,
        .course-page-card,
        .schedule-card,
        .campus-card,
        .article-page-card,
        .event-card,
        .policy-card,
        .achievement-measure-card,
        .achievements-future-card,
        .contact-info-card,
        .contact-support-card,
        .program-fit-card,
        .program-feature-card,
        .program-roadmap-card,
        .program-outcome-card,
        .course-detail-related-card,
        .campus-detail-related-card,
        .content-detail-related-card
    ) {
        transition:
            transform .22s ease,
            border-color .22s ease,
            box-shadow .22s ease;
    }

    :is(
        .course-path-card,
        .course-page-card,
        .schedule-card,
        .campus-card,
        .article-page-card,
        .event-card,
        .policy-card,
        .achievement-measure-card,
        .achievements-future-card,
        .contact-info-card,
        .contact-support-card,
        .program-fit-card,
        .program-feature-card,
        .program-roadmap-card,
        .program-outcome-card,
        .course-detail-related-card,
        .campus-detail-related-card,
        .content-detail-related-card
    ):hover {
        transform: translateY(-4px);
        border-color: #bfd9e7;
        box-shadow: var(--content-page-shadow-hover);
    }
}

/* Icon surfaces cùng một hệ xanh nhẹ. */
:is(
    .course-path-card__icon,
    .campus-feature > span,
    .event-feature > span,
    .policy-card__icon,
    .achievement-measure-card__icon,
    .contact-info-card__icon,
    .contact-support-card__icon
) {
    border: 1px solid #d2e7f1;
    background: var(--content-page-soft);
    color: var(--content-page-blue);
}

/* =========================================================
   DARK FEATURE SECTIONS
   Vẫn tạo nhịp thị giác nhưng dùng cùng một navy, không gradient.
========================================================= */

:is(
    .courses-choice,
    .campuses-support,
    .policies-principles,
    .achievements-verification
) {
    background: var(--content-page-navy);
}

:is(
    .courses-choice,
    .campuses-support,
    .policies-principles,
    .achievements-verification
) :is(h2, h3, strong) {
    color: #fff;
}

:is(
    .courses-choice,
    .campuses-support,
    .policies-principles,
    .achievements-verification
) :is(p, small) {
    color: rgba(236, 246, 252, .76);
}

:is(
    .courses-choice,
    .campuses-support,
    .policies-principles,
    .achievements-verification
) :is(
    .courses-eyebrow,
    .campuses-eyebrow,
    .policies-eyebrow,
    .achievements-eyebrow
) {
    color: #bfe6fa;
}

:is(
    .courses-choice,
    .campuses-support,
    .policies-principles,
    .achievements-verification
) :is(
    .courses-heading-line,
    .campuses-heading-line,
    .policies-heading-line,
    .achievements-heading-line
) {
    background: #55bdf0;
}

/* =========================================================
   FINAL CTA SYSTEM
========================================================= */

:is(
    .courses-final-cta,
    .schedules-consultation,
    .campuses-final-cta,
    .articles-final-cta,
    .events-follow,
    .policies-support,
    .achievements-final-cta,
    .contact-final
) {
    background: #fff;
}

:is(
    .courses-final-cta__inner,
    .schedules-consultation__inner,
    .campuses-final-cta__inner,
    .articles-final-cta__inner,
    .events-follow__inner,
    .policies-support__inner,
    .achievements-final-cta__inner,
    .contact-final__inner
) {
    border: 1px solid var(--content-page-border);
    border-radius: 22px;
    background: var(--content-page-soft-2);
    box-shadow: 0 16px 42px rgba(18, 61, 107, .055);
}

:is(
    .courses-final-cta,
    .schedules-consultation,
    .campuses-final-cta,
    .articles-final-cta,
    .events-follow,
    .policies-support,
    .achievements-final-cta,
    .contact-final
) h2 {
    color: var(--content-page-navy);
    font-size: clamp(30px, 3.2vw, 43px);
    font-weight: 850;
    line-height: 1.13;
    letter-spacing: -.035em;
}

:is(
    .courses-final-cta,
    .schedules-consultation,
    .campuses-final-cta,
    .articles-final-cta,
    .events-follow,
    .policies-support,
    .achievements-final-cta,
    .contact-final
) p {
    color: var(--content-page-text);
    line-height: 1.75;
}

/* Primary CTA luôn dùng xanh Hero; bỏ accent vàng rời rạc. */
:is(
    .courses-final-cta__primary,
    .schedules-consultation__primary,
    .campuses-final-cta__primary,
    .articles-final-cta__primary,
    .events-follow__primary,
    .policies-support__primary,
    .achievements-final-cta__primary,
    .contact-final__primary
) {
    border-color: var(--content-page-blue);
    background: var(--content-page-blue);
    color: #fff;
    box-shadow: 0 12px 28px rgba(30, 115, 190, .20);
}

:is(
    .courses-final-cta__secondary,
    .schedules-consultation__secondary,
    .campuses-final-cta__secondary,
    .articles-final-cta__secondary,
    .events-follow__secondary,
    .policies-support__secondary,
    .achievements-final-cta__secondary,
    .contact-final__secondary
) {
    border-color: #b9cfda;
    background: #fff;
    color: var(--content-page-navy);
}

@media (hover: hover) and (pointer: fine) {
    :is(
        .courses-final-cta__primary,
        .schedules-consultation__primary,
        .campuses-final-cta__primary,
        .articles-final-cta__primary,
        .events-follow__primary,
        .policies-support__primary,
        .achievements-final-cta__primary,
        .contact-final__primary
    ):hover {
        border-color: var(--content-page-blue-hover);
        background: var(--content-page-blue-hover);
        color: #fff;
    }
}

/* =========================================================
   FORMS / FILTERS
========================================================= */

.schedules-filter-card,
.contact-form-card {
    border: 1px solid var(--content-page-border);
    border-radius: 20px;
    background: #fff;
    box-shadow: var(--content-page-shadow);
}

.schedules-filter__select select,
.contact-form-card :is(input, select, textarea) {
    border-color: #c9dce7;
    border-radius: 10px;
    background: #fbfdfe;
}

.schedules-filter__select select:focus,
.contact-form-card :is(input, select, textarea):focus {
    border-color: var(--content-page-blue);
    box-shadow: 0 0 0 3px rgba(30, 115, 190, .11);
}

/* Form liên hệ vẫn giữ layout chuyển đổi riêng; chỉ đồng bộ màu header. */
.contact-form-card__header {
    background: var(--content-page-navy);
}

/* =========================================================
   DETAIL PAGES
========================================================= */

:is(
    .course-detail-page,
    .campus-detail-page,
    .content-detail-page
) :is(
    .course-detail-hero,
    .campus-detail-hero,
    .content-detail-hero
) {
    background: var(--content-page-bg);
}

:is(
    .course-detail-page,
    .campus-detail-page,
    .content-detail-page
) :is(
    .course-detail-breadcrumb,
    .campus-detail-breadcrumb,
    .content-detail-breadcrumb
) {
    color: #6b7f90;
    font-size: 13px;
    font-weight: 700;
}

:is(
    .course-detail-page,
    .campus-detail-page,
    .content-detail-page
) :is(
    .course-detail-breadcrumb,
    .campus-detail-breadcrumb,
    .content-detail-breadcrumb
) a {
    color: #526b7e;
}

:is(
    .course-detail-page,
    .campus-detail-page,
    .content-detail-page
) :is(
    .course-detail-hero__content,
    .campus-detail-hero__content,
    .content-detail-hero__content
) h1 {
    color: var(--content-page-navy);
    font-weight: 850;
    letter-spacing: -.045em;
}

/* =========================================================
   ACCESSIBILITY / MOTION
========================================================= */

:is(
    .courses-page,
    .schedules-page,
    .campuses-page,
    .articles-page,
    .events-page,
    .policies-page,
    .achievements-page,
    .contact-page,
    .course-program-page,
    .course-detail-page,
    .campus-detail-page,
    .content-detail-page
) a:focus-visible,
:is(
    .courses-page,
    .schedules-page,
    .campuses-page,
    .articles-page,
    .events-page,
    .policies-page,
    .achievements-page,
    .contact-page,
    .course-program-page,
    .course-detail-page,
    .campus-detail-page,
    .content-detail-page
) button:focus-visible {
    outline: 3px solid rgba(30, 115, 190, .28);
    outline-offset: 3px;
}

@media (max-width: 820px) {
    :is(
        .courses-paths,
        .courses-list-section,
        .courses-choice,
        .courses-final-cta,
        .schedules-filter-section,
        .schedules-results,
        .schedules-consultation,
        .campuses-intro,
        .campuses-list-section,
        .campuses-support,
        .campuses-final-cta,
        .articles-topics,
        .articles-featured,
        .articles-list-section,
        .articles-empty-section,
        .articles-final-cta,
        .events-intro,
        .events-list-section,
        .events-follow,
        .policies-intro,
        .policies-index,
        .policies-principles,
        .policies-support,
        .achievements-status,
        .achievements-measure,
        .achievements-verification,
        .achievements-future,
        .achievements-final-cta,
        .contact-main,
        .contact-support,
        .contact-final
    ) {
        padding-block: 68px;
    }

    :is(
        .courses-section-heading,
        .campuses-section-heading,
        .articles-section-heading,
        .events-section-heading,
        .policies-section-heading,
        .achievements-section-heading,
        .contact-section-heading,
        .program-section-heading
    ) h2,
    .schedules-filter-card__heading h2,
    .schedules-results__heading h2,
    .campuses-intro__heading h2,
    .articles-topics__heading h2,
    .events-intro__heading h2,
    .policies-intro__heading h2,
    .achievements-status__content h2,
    .contact-info > h2 {
        font-size: clamp(31px, 7vw, 42px);
    }
}

@media (max-width: 560px) {
    :is(
        .courses-paths,
        .courses-list-section,
        .courses-choice,
        .courses-final-cta,
        .schedules-filter-section,
        .schedules-results,
        .schedules-consultation,
        .campuses-intro,
        .campuses-list-section,
        .campuses-support,
        .campuses-final-cta,
        .articles-topics,
        .articles-featured,
        .articles-list-section,
        .articles-empty-section,
        .articles-final-cta,
        .events-intro,
        .events-list-section,
        .events-follow,
        .policies-intro,
        .policies-index,
        .policies-principles,
        .policies-support,
        .achievements-status,
        .achievements-measure,
        .achievements-verification,
        .achievements-future,
        .achievements-final-cta,
        .contact-main,
        .contact-support,
        .contact-final
    ) {
        padding-block: 54px;
    }

    :is(
        .courses-final-cta__inner,
        .schedules-consultation__inner,
        .campuses-final-cta__inner,
        .articles-final-cta__inner,
        .events-follow__inner,
        .policies-support__inner,
        .achievements-final-cta__inner,
        .contact-final__inner
    ) {
        border-radius: 17px;
    }
}

@media (prefers-reduced-motion: reduce) {
    :is(
        .course-path-card,
        .course-page-card,
        .schedule-card,
        .campus-card,
        .article-page-card,
        .event-card,
        .policy-card,
        .achievement-measure-card,
        .achievements-future-card,
        .contact-info-card,
        .contact-support-card,
        .program-fit-card,
        .program-feature-card,
        .program-roadmap-card,
        .program-outcome-card,
        .course-detail-related-card,
        .campus-detail-related-card,
        .content-detail-related-card
    ) {
        transition: none !important;
    }
}

/* =========================================================
   2026 SATURATED SECTION RULE
   Màu đậm chỉ nằm trong panel thu gọn, không phủ ngang viewport.
========================================================= */

:is(
    .courses-choice,
    .campuses-support,
    .policies-principles,
    .achievements-verification
) {
    background: #fff;
}

:is(
    .courses-choice__layout,
    .campuses-support__layout,
    .policies-principles__layout,
    .achievements-verification__layout
) {
    width: min(calc(100% - 72px), 1240px);
    margin-inline: auto;
    padding: clamp(38px, 4.5vw, 62px);
    border-radius: 28px;
    background: #1e73be;
    box-shadow: 0 22px 54px rgba(30, 115, 190, .14);
}

:is(
    .courses-choice__layout,
    .campuses-support__layout,
    .policies-principles__layout,
    .achievements-verification__layout
) :is(h2, h3, strong) {
    color: #fff;
}

:is(
    .courses-choice__layout,
    .campuses-support__layout,
    .policies-principles__layout,
    .achievements-verification__layout
) :is(p, small) {
    color: rgba(255, 255, 255, .82);
}

/* Khắc phục specificity do generic card surface chạy sau CSS trang. */
.course-program-page {
    --content-page-navy: #174f7a;
}

.course-program-page .program-features__panel .program-section-heading h2,
.course-program-page .program-features__panel .program-section-heading h2 > span {
    color: #fff;
}

.course-program-page .program-features__panel .program-section-heading > p {
    color: rgba(255, 255, 255, .84);
}

.course-program-page .program-features__panel .program-eyebrow {
    color: #dff3ff;
}

.course-program-page .program-features__panel .program-heading-line {
    background: rgba(255, 255, 255, .80);
}

.course-program-page .program-features__panel .program-feature-card {
    border-color: rgba(255, 255, 255, .55);
    background: #fff;
    box-shadow: 0 14px 32px rgba(16, 70, 111, .10);
}

.course-program-page .program-features__panel .program-feature-card h3 {
    color: var(--content-page-navy);
}

.course-program-page .program-features__panel .program-feature-card p {
    color: var(--content-page-text);
}

.course-program-page .program-features__panel .program-feature-card__icon {
    border-color: #d2e7f1;
    background: var(--content-page-soft);
    color: var(--content-page-blue);
}

.course-program-page .program-features__panel .program-feature-card__badge {
    color: #64859c;
}

@media (max-width: 820px) {
    :is(
        .courses-choice__layout,
        .campuses-support__layout,
        .policies-principles__layout,
        .achievements-verification__layout
    ) {
        width: min(calc(100% - 32px), 720px);
        padding: 32px 22px;
        border-radius: 22px;
    }
}