/* ════════════════════════════════════════════════════════════════════
   THS4.0 — Trang chủ landing (scope .hl)
   Palette trích từ CSS hiện có — không thêm màu mới, chỉ tint/shade.
   ════════════════════════════════════════════════════════════════════ */

.hl {
    /* Màu gốc của theme */
    --c-red: #D7261E;
    --c-red-dark: #B90F16;
    --c-grad: linear-gradient(225deg, #C11019 0%, #B60C13 100%);
    --c-navy: #1F3451;
    --c-navy-deep: #0d2b69;
    --c-ink: #1a1a2e;
    --c-mut: #6b7280;
    --c-line: #e7edf7;
    --c-bg: #f7fafe;
    --c-gold: #ffd34d;
    --c-ok: #16a34a;
    /* Tint/shade từ chính các màu trên */
    --c-red-08: rgba(215, 38, 30, .08);
    --c-red-14: rgba(215, 38, 30, .14);
    --c-navy-06: rgba(31, 52, 81, .06);
    --c-navy-12: rgba(31, 52, 81, .12);

    /* Spacing scale */
    --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
    --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 72px;

    --radius: 18px;
    --shadow-1: 0 2px 14px rgba(16, 34, 58, .07);
    --shadow-2: 0 16px 36px rgba(16, 34, 58, .13);

    color: var(--c-ink);
    font-size: 16px;
    line-height: 1.65;
    overflow: clip;
}

.hl *, .hl *::before, .hl *::after { box-sizing: border-box; }
.hl img { max-width: 100%; height: auto; }

/* ── Container & section ── */
.hl-container {
    max-width: 1320px;
    margin-inline: auto;
    padding-inline: clamp(16px, 4vw, 40px);
}

.hl-sec { padding-block: clamp(40px, 6vw, 88px); }

/* Nền xen kẽ full-bleed */
.hl-timeline-sec, .hl-tools-sec, .hl-results-sec, .hl-faq-sec {
    background:
        radial-gradient(900px 320px at 100% 0%, var(--c-red-08) 0, transparent 60%),
        var(--c-bg);
}

/* Pattern vạch mờ đặc trưng ngành */
.hl-hero, .hl-roadmap-sec {
    background-image: repeating-linear-gradient(
        135deg, var(--c-navy-06) 0 1px, transparent 1px 22px);
}

/* ── Typography ── */
.hl-h1 {
    font-size: clamp(28px, 4.6vw, 50px);
    line-height: 1.15;
    font-weight: 800;
    margin: 0 0 var(--space-4);
    color: var(--c-ink);
}

.hl-h1__hl { color: var(--c-red); }

.hl-h2 {
    font-size: clamp(24px, 3vw, 36px);
    font-weight: 800;
    line-height: 1.22;
    margin: 0 0 var(--space-2);
    position: relative;
    display: inline-block;
    padding-bottom: 12px;
}

.hl-h2::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    width: 54px;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--c-red), var(--c-red-14));
}

.hl-h2--light { color: #fff; }
.hl-h2--light::after { background: linear-gradient(90deg, #fff, rgba(255,255,255,.25)); }

.hl-head { text-align: center; margin-bottom: clamp(24px, 3.4vw, 44px); }
.hl-lead { color: var(--c-mut); font-size: clamp(15px, 1.6vw, 17.5px); margin: 4px 0 0; }
.hl-center { text-align: center; margin-top: var(--space-6); }
.hl-note { font-size: 14px; color: var(--c-mut); }

/* ── Buttons ── */
.hl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 48px;
    padding: 0 24px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 15.5px;
    text-decoration: none;
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: transform .22s ease, box-shadow .22s ease, background-color .22s ease, color .22s ease, border-color .22s ease;
    white-space: nowrap;
}

.hl-btn--primary { background: var(--c-grad); color: #fff; box-shadow: 0 8px 18px rgba(182, 12, 19, .28); }
.hl-btn--primary:hover, .hl-btn--primary:focus-visible { color: #fff; transform: translateY(-2px); box-shadow: 0 12px 26px rgba(182, 12, 19, .42); }

.hl-btn--outline { background: #fff; color: var(--c-red-dark); border-color: var(--c-red); }
.hl-btn--outline:hover, .hl-btn--outline:focus-visible { background: var(--c-red-08); color: var(--c-red-dark); transform: translateY(-2px); }

.hl-btn--white { background: #fff; color: var(--c-red-dark); }
.hl-btn--white:hover { transform: translateY(-2px); color: var(--c-red); }

.hl-btn--ghostlight { background: rgba(255, 255, 255, .12); color: #fff; border-color: rgba(255, 255, 255, .45); }
.hl-btn--ghostlight:hover { background: rgba(255, 255, 255, .2); color: #fff; border-color: #fff; }

.hl-btn--block { width: 100%; }
.hl-btn--sm { min-height: 44px; padding: 0 18px; font-size: 14.5px; }

.hl a:focus-visible, .hl button:focus-visible, .hl input:focus-visible,
.hl select:focus-visible, .hl summary:focus-visible, .hl [tabindex]:focus-visible {
    outline: 3px solid var(--c-red-14);
    outline-offset: 2px;
    border-radius: 8px;
}

/* ── 1. HERO ── */
.hl-hero { padding-block: clamp(28px, 4vw, 64px); }

.hl-hero__grid {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: clamp(24px, 4vw, 56px);
    align-items: start;
}

.hl-aud {
    display: inline-flex;
    background: #fff;
    border: 1.5px solid var(--c-line);
    border-radius: 999px;
    padding: 4px;
    margin-bottom: var(--space-4);
}

.hl-aud__btn {
    border: 0;
    background: transparent;
    padding: 8px 20px;
    min-height: 40px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 14.5px;
    color: var(--c-mut);
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}

.hl-aud__btn[aria-selected="true"] { background: var(--c-grad); color: #fff; }

.hl-hero__desc { font-size: clamp(16px, 1.7vw, 18.5px); color: #3c4759; max-width: 54ch; }
.hl-hero__desc a { color: var(--c-red-dark); }

.hl-hero__points { list-style: none; margin: var(--space-4) 0 var(--space-5); padding: 0; display: grid; gap: 10px; }
.hl-hero__points li { display: flex; gap: 10px; align-items: baseline; font-size: 15.5px; color: #33415b; }
.hl-hero__points i { color: var(--c-ok); }

.hl-hero__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: var(--space-6); }

.hl-hero__stats { display: grid; grid-template-columns: repeat(4, auto); gap: clamp(14px, 3vw, 38px); width: fit-content; }
.hl-stat b { display: block; font-size: clamp(22px, 2.4vw, 30px); font-weight: 800; color: var(--c-red-dark); line-height: 1.1; }
.hl-stat span { font-size: 13.5px; color: var(--c-mut); }

/* Widget tính điểm */
.hl-calc {
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: 22px;
    padding: clamp(20px, 2.4vw, 30px);
    box-shadow: var(--shadow-2);
}

.hl-calc--flat { box-shadow: var(--shadow-1); }

.hl-calc__head { display: flex; gap: 14px; align-items: center; margin-bottom: var(--space-5); }
.hl-calc__head i {
    width: 48px; height: 48px; flex: 0 0 auto;
    display: grid; place-items: center;
    background: var(--c-grad); color: #fff;
    border-radius: 14px; font-size: 20px;
}
.hl-calc__head b { display: block; font-size: 17px; }
.hl-calc__head span { font-size: 13.5px; color: var(--c-mut); }

.hl-calc__field { margin-bottom: var(--space-4); }
.hl-calc__field label { display: block; font-weight: 700; font-size: 14px; margin-bottom: 6px; }
.hl-calc__field label em { font-style: normal; color: var(--c-mut); font-weight: 500; }
.hl-calc__field input {
    width: 100%;
    min-height: 48px;
    border: 1.5px solid var(--c-line);
    border-radius: 12px;
    padding: 10px 14px;
    font-size: 16px;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.hl-calc__field input:focus { border-color: var(--c-red); box-shadow: 0 0 0 3px var(--c-red-08); outline: none; }

.hl-calc__result {
    margin-top: var(--space-4);
    text-align: center;
    background: var(--c-bg);
    border: 1px dashed var(--c-line);
    border-radius: 14px;
    padding: var(--space-4);
}

.hl-calc__label { font-size: 13.5px; color: var(--c-mut); }
.hl-calc__num { display: block; font-size: clamp(34px, 4vw, 44px); font-weight: 800; color: var(--c-red-dark); line-height: 1.15; }
.hl-calc__compare { font-size: 14.5px; margin: 6px 0 10px; }
.hl-calc__formula { font-size: 12.5px; color: var(--c-mut); margin: 0 0 12px; }
.hl-calc__full { display: inline-block; margin-top: var(--space-4); font-size: 14px; font-weight: 600; color: var(--c-navy); }
.hl-calc__full:hover { color: var(--c-red-dark); }

/* ── 2. TRUST BAR ── */
.hl-trustbar { background: var(--c-navy); color: #fff; padding-block: var(--space-4); }
.hl-trustbar__row { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.hl-trustbar__item {
    display: flex; gap: 12px; align-items: center;
    color: #fff; text-decoration: none;
    padding: 6px 4px; border-radius: 10px;
}
.hl-trustbar__item i { font-size: 22px; color: var(--c-gold); flex: 0 0 auto; }
.hl-trustbar__item b { display: block; font-size: 14.5px; line-height: 1.3; }
.hl-trustbar__item small { color: #b9c6dc; font-size: 12.5px; }
a.hl-trustbar__item:hover b { text-decoration: underline; text-underline-offset: 3px; }

/* ── 3. TIMELINE ── */
.hl-timeline {
    list-style: none;
    margin: 0; padding: 0;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--space-2);
    position: relative;
}

.hl-timeline::before {
    content: "";
    position: absolute;
    top: 26px; left: 8%; right: 8%;
    height: 3px;
    background: var(--c-line);
    border-radius: 3px;
}

.hl-tl-item { position: relative; text-align: center; padding-top: 0; }
.hl-tl-item__dot {
    position: relative; z-index: 1;
    width: 52px; height: 52px;
    margin: 0 auto 10px;
    display: grid; place-items: center;
    background: #fff;
    border: 2px solid var(--c-line);
    border-radius: 50%;
    color: var(--c-navy);
    font-size: 18px;
    transition: border-color .25s ease, background .25s ease, color .25s ease;
}
.hl-tl-item__label { display: block; font-size: 14px; line-height: 1.3; }
.hl-tl-item__date { display: block; font-size: 12.5px; color: var(--c-mut); }
.hl-tl-item__tick { display: none; color: var(--c-ok); font-size: 13px; }

.hl-tl-item.is-past { opacity: .55; }
.hl-tl-item.is-past .hl-tl-item__tick { display: inline-block; }
.hl-tl-item.is-past .hl-tl-item__dot { border-color: var(--c-ok); color: var(--c-ok); }

.hl-tl-item.is-next .hl-tl-item__dot {
    background: var(--c-grad);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 8px 18px rgba(182, 12, 19, .3);
}
.hl-tl-item.is-next .hl-tl-item__label { color: var(--c-red-dark); font-weight: 800; }

.hl-tl-count {
    margin-top: var(--space-6);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(14px, 3vw, 30px);
    flex-wrap: wrap;
    background: var(--c-grad);
    color: #fff;
    border-radius: 18px;
    padding: 16px 22px;
    box-shadow: 0 14px 32px rgba(182, 12, 19, .22);
    width: fit-content;
    margin-inline: auto;
}

.hl-tl-count__label { font-weight: 700; font-size: 15.5px; }
.hl-tl-count__timer { display: flex; gap: 10px; }
.hl-tl-count__box {
    background: #fff; color: var(--c-red-dark);
    border-radius: 12px;
    min-width: 62px;
    padding: 8px 6px 6px;
    text-align: center;
    box-shadow: 0 5px 12px rgba(0, 0, 0, .16);
}
.hl-tl-count__box b { display: block; font-size: 24px; font-weight: 800; line-height: 1.1; }
.hl-tl-count__box small { font-size: 11px; font-weight: 700; color: var(--c-mut); letter-spacing: .05em; }
.hl-tl-done { text-align: center; font-weight: 700; color: var(--c-navy); margin-top: var(--space-5); }

/* ── 4. KHÓA HỌC ── */
.hl-courses { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2.4vw, 26px); }

.hl-course {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-1);
    border: 1px solid var(--c-line);
    transition: transform .25s ease, box-shadow .25s ease;
    /* góc cắt vát đặc trưng */
    clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%);
}

.hl-course:hover { transform: translateY(-5px); box-shadow: var(--shadow-2); }

.hl-course__media { display: block; overflow: hidden; aspect-ratio: 16 / 9; }
.hl-course__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; display: block; }
.hl-course:hover .hl-course__media img { transform: scale(1.035); }

.hl-course__body { display: flex; flex-direction: column; flex: 1; padding: clamp(18px, 2vw, 26px); }

.hl-badge {
    width: fit-content;
    background: var(--c-red-08);
    border: 1px solid var(--c-red-14);
    color: var(--c-red-dark);
    font-weight: 700;
    font-size: 13px;
    border-radius: 999px;
    padding: 4px 13px;
    margin-bottom: 10px;
}

.hl-course__title { font-size: clamp(19px, 2vw, 24px); margin: 0 0 6px; line-height: 1.3; }
.hl-course__title a { color: var(--c-ink); text-decoration: none; }
.hl-course__title a:hover { color: var(--c-red); }

.hl-course__info { color: var(--c-mut); font-size: 14.5px; margin: 0 0 8px; }

.hl-course__list ul { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 7px; }
.hl-course__list li { display: flex; gap: 8px; align-items: baseline; font-size: 15px; color: #33415b; }
.hl-course__list li i { color: var(--c-ok); }

.hl-course__price { margin: auto 0 14px; font-size: 15px; color: var(--c-mut); }
.hl-course__price b { font-size: clamp(20px, 2vw, 24px); color: var(--c-red-dark); margin: 0 4px; }
.hl-course__price s { font-size: 14px; }

.hl-course__actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ── 5. TOOLS ── */
.hl-tabs { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-bottom: var(--space-6); }

.hl-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 46px;
    padding: 0 20px;
    border-radius: 999px;
    border: 1.5px solid var(--c-line);
    background: #fff;
    color: var(--c-navy);
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    transition: all .2s ease;
}

.hl-tab:hover { border-color: var(--c-red); color: var(--c-red-dark); }
.hl-tab[aria-selected="true"] { background: var(--c-grad); border-color: transparent; color: #fff; box-shadow: 0 8px 18px rgba(182, 12, 19, .24); }

.hl-tool-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(20px, 3vw, 40px); align-items: start; }

.hl-tool-copy h3 { font-size: clamp(19px, 2vw, 24px); margin: 0 0 10px; }
.hl-tool-copy p { color: #3c4759; }

.hl-check-list { list-style: none; margin: 12px 0 18px; padding: 0; display: grid; gap: 8px; }
.hl-check-list li { padding-left: 26px; position: relative; font-size: 15px; color: #33415b; }
.hl-check-list li::before {
    content: "\f00c";
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    position: absolute; left: 0;
    color: var(--c-ok);
}

.hl-tool-stub {
    text-align: center;
    background: #fff;
    border: 1px dashed var(--c-line);
    border-radius: var(--radius);
    padding: clamp(28px, 4vw, 48px);
    max-width: 620px;
    margin-inline: auto;
}
.hl-tool-stub i { font-size: 38px; color: var(--c-navy-12); }
.hl-tool-stub h3 { margin: 12px 0 8px; }
.hl-tool-stub p { color: var(--c-mut); margin-bottom: 16px; }

/* Sơ tuyển */
.hl-sotuyen {
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: var(--radius);
    padding: clamp(18px, 2.4vw, 28px);
    box-shadow: var(--shadow-1);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}

.hl-sotuyen__q label { display: block; font-weight: 700; font-size: 14px; margin-bottom: 6px; }
.hl-sotuyen__q select {
    width: 100%;
    min-height: 46px;
    border: 1.5px solid var(--c-line);
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 14.5px;
    background: #fff;
}
.hl-sotuyen__q select:focus { border-color: var(--c-red); outline: none; box-shadow: 0 0 0 3px var(--c-red-08); }

.hl-sotuyen > .hl-btn, .hl-sotuyen__result { grid-column: 1 / -1; }

.hl-sotuyen__result { border-radius: 14px; padding: var(--space-4); font-size: 15px; }
.hl-sotuyen__result.is-ok   { background: rgba(22, 163, 74, .08); border: 1px solid rgba(22, 163, 74, .3); }
.hl-sotuyen__result.is-warn { background: rgba(255, 211, 77, .15); border: 1px solid rgba(255, 211, 77, .6); }
.hl-sotuyen__result.is-fail { background: var(--c-red-08); border: 1px solid var(--c-red-14); }
.hl-sotuyen__result b { display: block; font-size: 17px; margin-bottom: 6px; }
.hl-sotuyen__result ul { margin: 8px 0 0; padding-left: 18px; }
.hl-sotuyen__result li { margin-bottom: 4px; }

/* ── 7. WHY ── */
.hl-why { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }

.hl-why__card {
    position: relative;
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: var(--radius);
    padding: 26px 20px 22px;
    overflow: hidden;
    box-shadow: var(--shadow-1);
    transition: transform .25s ease, box-shadow .25s ease;
}

.hl-why__card:hover { transform: translateY(-5px); box-shadow: var(--shadow-2); }

.hl-why__num {
    position: absolute;
    top: -6px; right: 8px;
    font-size: 72px;
    font-weight: 800;
    color: var(--c-navy-06);
    line-height: 1;
    pointer-events: none;
}

.hl-why__icon {
    width: 76px; height: 76px;
    border-radius: 20px;
    display: grid; place-items: center;
    background: linear-gradient(160deg, var(--c-red-08), var(--c-red-14));
    border: 1px solid var(--c-red-14);
    margin-bottom: 14px;
}

.hl-why__card h3 { font-size: 16px; margin: 0 0 6px; line-height: 1.35; }
.hl-why__card p { font-size: 14.5px; color: var(--c-mut); margin: 0; }

/* ── 8. ROADMAP ── */
.hl-roadmap {
    list-style: none;
    margin: 0; padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
    counter-reset: step;
}

.hl-roadmap__step {
    position: relative;
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: var(--radius);
    padding: 24px 20px;
    box-shadow: var(--shadow-1);
}

.hl-roadmap__no {
    position: absolute;
    top: 16px; right: 16px;
    width: 30px; height: 30px;
    border-radius: 50%;
    display: grid; place-items: center;
    background: var(--c-navy);
    color: #fff;
    font-weight: 800;
    font-size: 14px;
}

.hl-roadmap__icon {
    width: 56px; height: 56px;
    border-radius: 16px;
    display: grid; place-items: center;
    background: var(--c-navy-06);
    color: var(--c-navy);
    font-size: 22px;
    margin-bottom: 12px;
}

.hl-roadmap__step h3 { font-size: 16.5px; margin: 0 0 6px; }
.hl-roadmap__step p { font-size: 14.5px; color: var(--c-mut); margin: 0; }

/* ── 9. TEAM ── */
.hl-tabs--center { margin-bottom: var(--space-5); }

.hl-team-track {
    list-style: none;
    margin: 0; padding: 4px 4px 14px;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(220px, 1fr);
    gap: var(--space-4);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}

.hl-team-track::-webkit-scrollbar { height: 8px; }
.hl-team-track::-webkit-scrollbar-thumb { background: var(--c-line); border-radius: 8px; }

.hl-person { scroll-snap-align: start; }

.hl-person a { display: block; text-decoration: none; color: inherit; }

.hl-person__photo {
    position: relative;
    display: block;
    aspect-ratio: 3 / 4;
    border-radius: 18px 18px 18px 4px; /* bo lệch một góc */
    overflow: hidden;
    background: linear-gradient(160deg, #eef2fa, #e2e9f5);
}

.hl-person__photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; transition: transform .4s ease; }
.hl-person a:hover .hl-person__photo img { transform: scale(1.04); }

.hl-person__photo::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 55%;
    background: linear-gradient(180deg, transparent, rgba(13, 22, 40, .78));
    pointer-events: none;
}

.hl-person__fallback {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    font-size: 34px; font-weight: 800;
    color: var(--c-navy);
}

.hl-person__meta {
    position: absolute;
    left: 14px; right: 14px; bottom: 12px;
    z-index: 1;
    color: #fff;
}

.hl-person__meta b { display: block; font-size: 15.5px; line-height: 1.3; }
.hl-person__meta small { font-size: 13px; opacity: .85; }

.hl-person__photo { position: relative; }
.hl-person a { position: relative; display: block; }
.hl-person .hl-person__meta { position: absolute; }

/* ── 10. RESULTS ── */
.hl-metrics {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.hl-metric {
    text-align: center;
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: var(--radius);
    padding: 20px 12px;
    box-shadow: var(--shadow-1);
}

.hl-metric__num { font-size: clamp(26px, 3vw, 36px); font-weight: 800; color: var(--c-red-dark); }
.hl-metric span { display: block; font-size: 13.5px; color: var(--c-mut); margin-top: 2px; }

.hl-results { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }

.hl-result-card {
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-1);
}

.hl-result-card__photo {
    aspect-ratio: 16 / 8;
    display: grid;
    place-items: center;
    background: linear-gradient(160deg, var(--c-navy-06), var(--c-navy-12));
    color: var(--c-navy);
    font-size: 40px;
}

.hl-result-card__body { padding: 16px 18px 18px; }
.hl-result-card__body > b { font-size: 15.5px; }

.hl-result-card__score {
    display: flex; gap: 10px; align-items: center;
    margin: 10px 0;
    font-size: 14px; color: var(--c-mut);
}
.hl-result-card__score b { color: var(--c-navy); font-size: 16px; }
.hl-result-card__score i { color: var(--c-red); }

.hl-pending-note { font-size: 13px; color: var(--c-mut); font-style: italic; margin: 0; }

/* ── 11. NEWS ── */
.hl-news { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(18px, 2.6vw, 30px); }

.hl-news__featured a {
    display: block;
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-1);
    text-decoration: none;
    color: inherit;
    transition: transform .25s ease, box-shadow .25s ease;
    height: 100%;
}

.hl-news__featured a:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }

.hl-news__media { display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.hl-news__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.hl-news__noimg {
    width: 100%; height: 100%;
    display: grid; place-items: center;
    background: linear-gradient(160deg, var(--c-navy-06), var(--c-navy-12));
    color: var(--c-navy);
    font-size: 40px;
}
.hl-news__noimg--sm { font-size: 20px; border-radius: 10px; }

.hl-news__body { display: block; padding: 18px 20px 20px; }
.hl-news__body time, .hl-news__item time { font-size: 13px; color: var(--c-mut); }
.hl-news__body h3 { font-size: clamp(17px, 1.9vw, 21px); line-height: 1.4; margin: 6px 0 8px; }
.hl-news__body p { color: var(--c-mut); font-size: 14.5px; margin: 0; }

.hl-news__list { display: flex; flex-direction: column; gap: var(--space-3); }

.hl-news__item a {
    display: grid;
    grid-template-columns: 128px 1fr;
    gap: 14px;
    align-items: center;
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: 14px;
    padding: 10px;
    text-decoration: none;
    color: inherit;
    transition: transform .2s ease, box-shadow .2s ease;
}

.hl-news__item a:hover { transform: translateY(-2px); box-shadow: var(--shadow-1); }

.hl-news__thumb { display: block; aspect-ratio: 3 / 2; border-radius: 10px; overflow: hidden; }
.hl-news__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.hl-news__item h3 {
    font-size: 14.5px;
    line-height: 1.4;
    margin: 3px 0 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hl-news__list > .hl-btn { align-self: flex-start; }

/* ── 12. COMMUNITY ── */
.hl-comm-sec { padding-block: clamp(32px, 4vw, 56px); }

.hl-comm {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: clamp(22px, 3vw, 44px);
    align-items: center;
    background:
        radial-gradient(600px 260px at 100% 0%, rgba(255, 255, 255, .12) 0, transparent 60%),
        var(--c-grad);
    border-radius: 26px;
    padding: clamp(24px, 3.4vw, 48px);
    color: #fff;
    box-shadow: 0 22px 48px rgba(182, 12, 19, .28);
}

.hl-comm__copy p { color: rgba(255, 255, 255, .88); }
.hl-comm__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: var(--space-4); }

.hl-comm__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }

.hl-comm-card {
    display: flex;
    gap: 12px;
    align-items: center;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 16px;
    padding: 14px 16px;
    color: #fff;
    text-decoration: none;
    min-height: 84px;
    transition: transform .22s ease, background .22s ease;
}

.hl-comm-card:hover { transform: translateY(-4px); background: rgba(255, 255, 255, .16); color: #fff; }

.hl-comm-card__icon {
    width: 46px; height: 46px; flex: 0 0 auto;
    display: grid; place-items: center;
    border-radius: 13px;
    font-size: 19px;
    background: #fff;
}

.hl-comm-card--fb .hl-comm-card__icon     { color: #1877f2; }
.hl-comm-card--group .hl-comm-card__icon  { color: #1877f2; }
.hl-comm-card--tiktok .hl-comm-card__icon { color: #111; }
.hl-comm-card--zalo .hl-comm-card__icon   { color: #0068ff; }

.hl-comm-card__body b { display: block; font-size: 15px; }
.hl-comm-card__body small { font-size: 12.5px; color: rgba(255, 255, 255, .82); line-height: 1.4; }

/* ── 13. FAQ ── */
.hl-faq { max-width: 860px; margin-inline: auto; display: grid; gap: var(--space-3); }

.hl-faq__item {
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: 14px;
    box-shadow: var(--shadow-1);
    overflow: hidden;
}

.hl-faq__item summary {
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 17px 20px;
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
}

.hl-faq__item summary::-webkit-details-marker { display: none; }
.hl-faq__item summary i { color: var(--c-red); transition: transform .25s ease; flex: 0 0 auto; }
.hl-faq__item[open] summary i { transform: rotate(180deg); }
.hl-faq__a { padding: 0 20px 18px; color: #3c4759; font-size: 15px; }
.hl-faq__a a { color: var(--c-red-dark); }

/* ── 14. FINAL CTA ── */
.hl-final {
    background:
        radial-gradient(700px 300px at 8% 0%, rgba(255, 255, 255, .1) 0, transparent 55%),
        var(--c-grad);
    color: #fff;
    padding-block: clamp(40px, 5vw, 72px);
    text-align: center;
}

.hl-final p { color: rgba(255, 255, 255, .9); max-width: 620px; margin: 8px auto 24px; font-size: clamp(15px, 1.6vw, 17.5px); }
.hl-final__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ── 15. STICKY MOBILE ── */
.hl-sticky {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 99990;
    display: none;
    gap: 1px;
    background: rgba(255, 255, 255, .6);
    backdrop-filter: blur(6px);
    box-shadow: 0 -6px 20px rgba(0, 0, 0, .14);
}

.hl-sticky__btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 52px;
    font-weight: 800;
    font-size: 15px;
    text-decoration: none;
}

.hl-sticky__btn--primary { background: var(--c-grad); color: #fff; }
.hl-sticky__btn--navy { background: var(--c-navy); color: #fff; }

/* ── Reveal ── */
html.hl-anim .hl [data-reveal] {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .38s ease, transform .38s ease;
}

html.hl-anim .hl [data-reveal].is-in { opacity: 1; transform: none; }

/* ── Responsive ── */
@media (max-width: 1279.98px) {
    .hl-why { grid-template-columns: repeat(2, 1fr); }
    .hl-roadmap { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1023.98px) {
    .hl-hero__grid { grid-template-columns: 1fr; }
    .hl-hero__widget { max-width: 560px; }
    .hl-tool-grid { grid-template-columns: 1fr; }
    .hl-news { grid-template-columns: 1fr; }
    .hl-comm { grid-template-columns: 1fr; }
    .hl-timeline { grid-template-columns: repeat(3, 1fr); row-gap: var(--space-5); }
    .hl-timeline::before { display: none; }
}

@media (max-width: 767.98px) {
    .hl-trustbar__row {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: var(--space-4);
        padding-bottom: 6px;
    }
    .hl-trustbar__item { flex: 0 0 auto; min-width: 210px; scroll-snap-align: start; }
    .hl-courses { grid-template-columns: 1fr; }
    .hl-results { grid-template-columns: 1fr; }
    .hl-metrics { grid-template-columns: repeat(2, 1fr); }
    .hl-sotuyen { grid-template-columns: 1fr; }
    .hl-comm__grid { grid-template-columns: 1fr 1fr; }
    .hl-sticky { display: flex; }
    .hl-sticky[hidden] { display: none; }
    .hl-hero__stats { grid-template-columns: repeat(2, 1fr); width: 100%; }
}

@media (max-width: 479.98px) {
    .hl-timeline { grid-template-columns: repeat(2, 1fr); }
    .hl-comm__grid { grid-template-columns: 1fr; }
    .hl-hero__actions .hl-btn { width: 100%; }
    .hl-course__actions .hl-btn { width: 100%; }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    .hl *, .hl *::before, .hl *::after {
        transition-duration: .001ms !important;
        animation: none !important;
    }
    html.hl-anim .hl [data-reveal] { opacity: 1 !important; transform: none !important; }
    .hl-course:hover, .hl-why__card:hover, .hl-news__featured a:hover { transform: none !important; }
}

/* ════════════════════════════════════════════════════════════════════
   MOTION PACK — hiệu ứng chuyển động chuyên nghiệp (scope .hl)
   Mọi animation đều tắt trong prefers-reduced-motion (khối cuối file gốc)
   ════════════════════════════════════════════════════════════════════ */

/* ── Reveal theo TỪNG card (stagger do JS đặt transition-delay) ── */
html.hl-anim .hl [data-rv] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .5s cubic-bezier(.22, .61, .36, 1), transform .5s cubic-bezier(.22, .61, .36, 1);
}

html.hl-anim .hl [data-rv].is-in { opacity: 1; transform: none; }

html.hl-anim .hl [data-rv="left"]  { transform: translateX(-30px); }
html.hl-anim .hl [data-rv="right"] { transform: translateX(30px); }
html.hl-anim .hl [data-rv="zoom"]  { transform: scale(.94); }
html.hl-anim .hl [data-rv].is-in   { transform: none; }

/* ── Gạch tiêu đề H2: vẽ ra khi section vào viewport ── */
html.hl-anim .hl .hl-h2::after {
    transform: translateX(-50%) scaleX(0);
    transform-origin: center;
    transition: transform .6s cubic-bezier(.22, .61, .36, 1) .25s;
}

html.hl-anim .hl .is-in .hl-h2::after,
html.hl-anim .hl [data-rv].is-in .hl-h2::after {
    transform: translateX(-50%) scaleX(1);
}

/* ── Nút primary: vệt sáng quét khi hover ── */
.hl-btn--primary {
    position: relative;
    overflow: hidden;
}

.hl-btn--primary::after {
    content: "";
    position: absolute;
    top: 0;
    left: -80%;
    width: 50%;
    height: 100%;
    background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .45), transparent);
    transform: skewX(-20deg);
    transition: left .55s ease;
    pointer-events: none;
}

.hl-btn--primary:hover::after { left: 130%; }

/* Icon trong nút trượt nhẹ */
.hl-btn i { transition: transform .25s cubic-bezier(.34, 1.56, .64, 1); }
.hl-btn:hover i { transform: translateX(3px) scale(1.12); }

/* ── Hero: nhập cảnh tuần tự + widget nổi ── */
@keyframes hl-in-up {
    from { opacity: 0; transform: translateY(26px); }
    to   { opacity: 1; transform: none; }
}

@keyframes hl-in-right {
    from { opacity: 0; transform: translateX(36px); }
    to   { opacity: 1; transform: none; }
}

html.hl-anim .hl-aud            { animation: hl-in-up .55s .05s both; }
html.hl-anim .hl-h1             { animation: hl-in-up .55s .15s both; }
html.hl-anim .hl-aud-panel:not([hidden]) { animation: hl-in-up .55s .25s both; }
html.hl-anim .hl-hero__actions  { animation: hl-in-up .55s .35s both; }
html.hl-anim .hl-hero__stats    { animation: hl-in-up .55s .45s both; }
html.hl-anim .hl-hero__widget   { animation: hl-in-right .65s .3s both; }

/* Widget lơ lửng rất nhẹ + icon máy tính pulse */
@keyframes hl-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-7px); }
}

.hl-hero__widget .hl-calc { animation: hl-float 5.5s ease-in-out 1.2s infinite; }

@keyframes hl-ring {
    0%   { box-shadow: 0 0 0 0 rgba(215, 38, 30, .35); }
    70%  { box-shadow: 0 0 0 12px rgba(215, 38, 30, 0); }
    100% { box-shadow: 0 0 0 0 rgba(215, 38, 30, 0); }
}

.hl-calc__head i { animation: hl-ring 2.6s ease-out 1.5s infinite; }

/* ── Trust bar: icon nhún nhẹ luân phiên ── */
@keyframes hl-bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-4px); }
}

.hl-trustbar__item i { animation: hl-bob 3.2s ease-in-out infinite; }
.hl-trustbar__item:nth-child(2) i { animation-delay: .4s; }
.hl-trustbar__item:nth-child(3) i { animation-delay: .8s; }
.hl-trustbar__item:nth-child(4) i { animation-delay: 1.2s; }

/* ── Timeline: mốc kế tiếp phát radar ── */
.hl-tl-item.is-next .hl-tl-item__dot { animation: hl-ring 2.2s ease-out infinite; }

/* Giây trong đếm ngược pop khi đổi số */
@keyframes hl-pop {
    0%   { transform: scale(1); }
    45%  { transform: scale(1.18); }
    100% { transform: scale(1); }
}

.hl-tl-count__box b.tick { animation: hl-pop .35s ease; }

/* ── Card icon: hiệu ứng hover đồng bộ ── */
.hl-why__icon, .hl-roadmap__icon, .hl-comm-card__icon, .hl-calc__head i {
    transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), box-shadow .3s ease;
}

.hl-why__card:hover .hl-why__icon {
    transform: translateY(-5px) rotate(-5deg) scale(1.06);
    box-shadow: 0 10px 20px rgba(215, 38, 30, .18);
}

.hl-why__card:hover .hl-why__num { color: rgba(215, 38, 30, .12); transition: color .3s ease; }

.hl-roadmap__step:hover .hl-roadmap__icon {
    transform: translateY(-4px) scale(1.08);
    background: var(--c-navy);
    color: #fff;
}

.hl-roadmap__step { transition: transform .25s ease, box-shadow .25s ease; }
.hl-roadmap__step:hover { transform: translateY(-5px); box-shadow: var(--shadow-2); }

.hl-roadmap__no { transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), background .3s ease; }
.hl-roadmap__step:hover .hl-roadmap__no { transform: scale(1.15); background: var(--c-red); }

.hl-comm-card:hover .hl-comm-card__icon {
    transform: rotate(-8deg) scale(1.12);
}

/* ── Tab: icon nhích khi hover ── */
.hl-tab i { transition: transform .25s cubic-bezier(.34, 1.56, .64, 1); }
.hl-tab:hover i { transform: translateY(-2px) scale(1.15); }

/* ── Course card: giá pop khi hover, shine ảnh ── */
.hl-course__price b { display: inline-block; transition: transform .25s cubic-bezier(.34, 1.56, .64, 1); }
.hl-course:hover .hl-course__price b { transform: scale(1.08); }

.hl-course__media { position: relative; }
.hl-course__media::after {
    content: "";
    position: absolute;
    top: 0;
    left: -80%;
    width: 45%;
    height: 100%;
    background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .35), transparent);
    transform: skewX(-18deg);
    transition: left .6s ease;
    pointer-events: none;
}

.hl-course:hover .hl-course__media::after { left: 135%; }

/* Badge nhấp nhẹ */
.hl-badge { transition: transform .25s ease; }
.hl-course:hover .hl-badge { transform: translateY(-2px); }

/* ── Team: card nghiêng nhẹ 3D khi hover ── */
.hl-person__photo { transition: transform .3s ease, box-shadow .3s ease; }
.hl-person a:hover .hl-person__photo {
    transform: translateY(-6px) rotate(-1deg);
    box-shadow: 0 18px 34px rgba(16, 34, 58, .2);
}

.hl-person__meta b { transition: color .2s ease; }
.hl-person a:hover .hl-person__meta b { color: var(--c-gold); }

/* ── Metrics: card nảy khi hover ── */
.hl-metric { transition: transform .25s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s ease; }
.hl-metric:hover { transform: translateY(-5px) scale(1.02); box-shadow: var(--shadow-2); }

/* ── News: mũi tên ẩn hiện trên featured ── */
.hl-news__body h3, .hl-news__item h3 { transition: color .2s ease; }
.hl-news__featured a:hover h3, .hl-news__item a:hover h3 { color: var(--c-red); }

/* ── FAQ: summary hover + mở mượt ── */
.hl-faq__item summary { transition: background .2s ease, color .2s ease; }
.hl-faq__item summary:hover { background: var(--c-red-08); color: var(--c-red-dark); }

.hl-faq__item .hl-faq__a { overflow: hidden; }

@keyframes hl-faq-open {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
}

.hl-faq__item[open] .hl-faq__a { animation: hl-faq-open .3s ease; }

/* ── Sticky bar mobile: trượt lên khi xuất hiện ── */
@keyframes hl-slide-up {
    from { transform: translateY(100%); }
    to   { transform: none; }
}

.hl-sticky:not([hidden]) { animation: hl-slide-up .35s cubic-bezier(.22, .61, .36, 1); }

/* ── Final CTA: quầng sáng thở nhẹ ── */
@keyframes hl-glow {
    0%, 100% { opacity: .55; }
    50%      { opacity: 1; }
}

.hl-final { position: relative; overflow: hidden; }
.hl-final::before {
    content: "";
    position: absolute;
    top: -40%;
    left: 50%;
    transform: translateX(-50%);
    width: 700px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(255, 255, 255, .16), transparent);
    animation: hl-glow 4s ease-in-out infinite;
    pointer-events: none;
}

/* ── Sơ tuyển: kết quả hiện mượt ── */
.hl-sotuyen__result:not([hidden]) { animation: hl-faq-open .35s ease; }
.hl-calc__result:not([hidden])    { animation: hl-faq-open .35s ease; }

/* ── HERO SLIDER 3 thông điệp ── */
.hl-heroslider {
    display: grid;
}

.hl-heroslide {
    grid-area: 1 / 1;
    opacity: 0;
    transform: translateX(26px);
    transition: opacity .55s cubic-bezier(.22, .61, .36, 1), transform .55s cubic-bezier(.22, .61, .36, 1);
    pointer-events: none;
    visibility: hidden;
}

.hl-heroslide.is-on {
    opacity: 1;
    transform: none;
    pointer-events: auto;
    visibility: visible;
}

.hl-heroslide.is-leaving {
    opacity: 0;
    transform: translateX(-26px);
    visibility: visible;
}

.hl-h1--alt { /* slide 2-3 dùng p styled như H1 (SEO: chỉ 1 H1 thật) */
    font-size: clamp(28px, 4.6vw, 50px);
    line-height: 1.15;
    font-weight: 800;
    margin: 0 0 var(--space-4);
    color: var(--c-ink);
}

.hl-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--c-red-08);
    border: 1px solid var(--c-red-14);
    color: var(--c-red-dark);
    font-weight: 700;
    font-size: 13.5px;
    border-radius: 999px;
    padding: 6px 15px;
    margin-bottom: var(--space-4);
}

.hl-heroslider__dots {
    display: flex;
    gap: 10px;
    margin: var(--space-5) 0;
}

.hl-dot {
    width: 30px;
    height: 6px;
    border-radius: 6px;
    border: 0;
    background: var(--c-line);
    cursor: pointer;
    padding: 0;
    transition: background .25s ease, width .25s ease;
}

.hl-dot:hover { background: var(--c-red-14); }

.hl-dot.is-on {
    width: 46px;
    background: var(--c-grad);
}

@media (prefers-reduced-motion: reduce) {
    .hl-heroslide { transition: none !important; transform: none !important; }
}

/* ── HERO = 3 BANNER RIÊNG (bỏ widget, full chiều rộng) ── */
.hl-hero__single { display: block; }

.hl-heroslide {
    border-radius: 24px;
    padding: clamp(26px, 4vw, 56px);
    background: #fff;
    border: 1px solid var(--c-line);
    box-shadow: var(--shadow-1);
    min-height: 380px;
}

/* Banner 2: navy */
.hl-heroslide--navy {
    background:
        radial-gradient(700px 300px at 95% 0%, rgba(215, 38, 30, .2) 0, transparent 55%),
        linear-gradient(135deg, #24406a 0%, #16263f 100%);
    border-color: transparent;
    color: #fff;
}

/* Banner 3: đỏ brand */
.hl-heroslide--red {
    background:
        radial-gradient(700px 300px at 95% 0%, rgba(255, 255, 255, .14) 0, transparent 55%),
        var(--c-grad);
    border-color: transparent;
    color: #fff;
}

.hl-heroslide--navy .hl-h1--alt,
.hl-heroslide--red .hl-h1--alt { color: #fff; }

.hl-heroslide--navy .hl-h1__hl { color: var(--c-gold); }
.hl-heroslide--red .hl-h1__hl { color: var(--c-gold); }

.hl-heroslide--navy .hl-hero__desc,
.hl-heroslide--red .hl-hero__desc { color: rgba(255, 255, 255, .88); }

.hl-heroslide--navy .hl-hero__points li,
.hl-heroslide--red .hl-hero__points li { color: rgba(255, 255, 255, .92); }

.hl-heroslide--red .hl-hero__points i { color: var(--c-gold); }

.hl-heroslide--navy .hl-kicker {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .3);
    color: #fff;
}

.hl-heroslide--red .hl-kicker {
    background: rgba(255, 255, 255, .14);
    border-color: rgba(255, 255, 255, .35);
    color: #fff;
}

/* Nội dung banner gọn giữa, không kéo quá rộng */
.hl-heroslide > * { max-width: 720px; }

@media (max-width: 575.98px) {
    .hl-heroslide { border-radius: 16px; min-height: 0; }
}

/* ── HERO FULL-BLEED: banner tràn màn hình + ảnh biểu trưng ── */
.hl-hero { padding: 0 0 clamp(20px, 3vw, 34px); }

.hl-hero .hl-heroslider { display: grid; }

.hl-hero .hl-heroslide {
    grid-area: 1 / 1;
    border-radius: 0;
    border: 0;
    box-shadow: none;
    min-height: clamp(420px, 46vw, 560px);
    display: flex;
    align-items: center;
    padding: clamp(24px, 3.4vw, 48px) 0;
    background:
        repeating-linear-gradient(135deg, var(--c-navy-06) 0 1px, transparent 1px 22px),
        #fff;
}

.hl-hero .hl-heroslide--navy {
    background:
        radial-gradient(800px 400px at 90% 10%, rgba(215, 38, 30, .22) 0, transparent 55%),
        linear-gradient(135deg, #24406a 0%, #16263f 100%);
}

.hl-hero .hl-heroslide--red {
    background:
        radial-gradient(800px 400px at 90% 10%, rgba(255, 255, 255, .15) 0, transparent 55%),
        var(--c-grad);
}

.hl-heroslide__inner {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: clamp(24px, 4vw, 60px);
    align-items: center;
    width: 100%;
}

.hl-heroslide__copy > * { max-width: 640px; }

/* Ảnh biểu trưng: khung bo, bóng, lơ lửng nhẹ */
.hl-heroslide__visual { position: relative; }

.hl-heroslide__visual img {
    width: 100%;
    height: auto;
    border-radius: 22px;
    box-shadow: 0 24px 54px rgba(13, 22, 40, .3);
    display: block;
}

html.hl-anim .hl-heroslide.is-on .hl-heroslide__visual {
    animation: hl-float 6s ease-in-out 1s infinite;
}

/* Dots + stats dưới banner */
.hl-hero > .hl-container { padding-top: clamp(16px, 2.4vw, 26px); }
.hl-hero .hl-heroslider__dots { margin: 0 0 var(--space-4); }

/* Responsive */
@media (max-width: 1023.98px) {
    .hl-heroslide__inner { grid-template-columns: 1fr; }
    .hl-heroslide__visual { max-width: 560px; }
    .hl-hero .hl-heroslide { min-height: 0; }
}

@media (max-width: 575.98px) {
    .hl-hero .hl-heroslide { border-radius: 0; }
    .hl-heroslide__visual { max-width: 100%; }
}

/* Fix: gỡ giới hạn 720px (rule bản card cũ) cho bố cục full-bleed */
.hl-hero .hl-heroslide > .hl-heroslide__inner { max-width: 1320px; }

/* ── Bỏ dải trắng dưới banner: dots đè lên mép dưới slider ── */
.hl-hero { padding: 0; position: relative; }

.hl-hero > .hl-container {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 16px;
    padding: 0;
    pointer-events: none;
    z-index: 2;
}

.hl-hero .hl-heroslider__dots {
    margin: 0 auto;
    width: fit-content;
    pointer-events: auto;
    background: rgba(13, 22, 40, .32);
    backdrop-filter: blur(4px);
    padding: 8px 12px;
    border-radius: 999px;
}

.hl-hero .hl-dot { background: rgba(255, 255, 255, .5); }
.hl-hero .hl-dot:hover { background: rgba(255, 255, 255, .75); }
.hl-hero .hl-dot.is-on { background: #fff; }

/* ── Timeline: vệt sáng chạy từ bước 1 đến hết ── */
.hl-timeline::before {
    overflow: hidden;
}

.hl-timeline::after {
    content: "";
    position: absolute;
    top: 24px;
    left: 8%;
    width: 120px;
    height: 7px;
    border-radius: 7px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(215, 38, 30, .55) 30%,
        #D7261E 50%,
        rgba(255, 138, 128, .9) 65%,
        transparent 100%);
    filter: drop-shadow(0 0 8px rgba(215, 38, 30, .75));
    animation: hl-runner 4.2s cubic-bezier(.45, .05, .55, .95) infinite;
    pointer-events: none;
    z-index: 0;
}

@keyframes hl-runner {
    0%   { left: 8%;                  opacity: 0; }
    6%   { opacity: 1; }
    88%  { opacity: 1; }
    100% { left: calc(92% - 120px);   opacity: 0; }
}

/* Chấm mốc sáng lên thoáng qua khi vệt sáng đi ngang (đồng bộ nhịp) */
@keyframes hl-node-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(215, 38, 30, 0); }
    50%      { box-shadow: 0 0 14px 2px rgba(215, 38, 30, .45); }
}

.hl-tl-item:nth-child(1) .hl-tl-item__dot { animation: hl-node-glow 4.2s ease infinite; animation-delay: 0s; }
.hl-tl-item:nth-child(2) .hl-tl-item__dot { animation: hl-node-glow 4.2s ease infinite; animation-delay: .7s; }
.hl-tl-item:nth-child(3) .hl-tl-item__dot { animation: hl-node-glow 4.2s ease infinite; animation-delay: 1.4s; }
.hl-tl-item:nth-child(4) .hl-tl-item__dot { animation: hl-node-glow 4.2s ease infinite; animation-delay: 2.1s; }
.hl-tl-item:nth-child(5) .hl-tl-item__dot { animation: hl-node-glow 4.2s ease infinite; animation-delay: 2.8s; }
.hl-tl-item:nth-child(6) .hl-tl-item__dot { animation: hl-node-glow 4.2s ease infinite; animation-delay: 3.5s; }

/* Mốc kế tiếp giữ radar mạnh hơn glow thường */
.hl-tl-item.is-next .hl-tl-item__dot { animation: hl-ring 2.2s ease-out infinite; }

/* Mobile: đường nối ẩn nên tắt vệt sáng */
@media (max-width: 1023.98px) {
    .hl-timeline::after { display: none; }
    .hl-tl-item .hl-tl-item__dot { animation: none; }
    .hl-tl-item.is-next .hl-tl-item__dot { animation: hl-ring 2.2s ease-out infinite; }
}

/* ── ROADMAP 2.0: stepper đẹp, icon gradient, mũi tên nối ── */
.hl-roadmap { gap: clamp(16px, 2vw, 28px); }

.hl-roadmap__step {
    position: relative;
    padding: 28px 22px 24px;
    border: 0;
    box-shadow: 0 4px 20px rgba(16, 34, 58, .08);
    overflow: visible;
}

/* Icon tile: gradient chuyển sắc theo bước (navy -> đỏ) */
.hl-roadmap__icon {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    font-size: 25px;
    color: #fff;
    box-shadow: 0 10px 20px rgba(31, 52, 81, .25);
}

.hl-roadmap__step:nth-child(1) .hl-roadmap__icon { background: linear-gradient(135deg, #33517d, #1F3451); }
.hl-roadmap__step:nth-child(2) .hl-roadmap__icon { background: linear-gradient(135deg, #1F3451, #6b2440); }
.hl-roadmap__step:nth-child(3) .hl-roadmap__icon { background: linear-gradient(135deg, #6b2440, #B60C13); }
.hl-roadmap__step:nth-child(4) .hl-roadmap__icon { background: linear-gradient(135deg, #C11019, #B60C13); box-shadow: 0 10px 20px rgba(182, 12, 19, .3); }

/* Số bước: huy hiệu gradient đỏ */
.hl-roadmap__no {
    width: 34px;
    height: 34px;
    background: var(--c-grad);
    box-shadow: 0 6px 14px rgba(182, 12, 19, .3);
    font-size: 15px;
}

/* Mũi tên nối giữa các bước (desktop) */
.hl-roadmap__step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    right: calc(-1 * clamp(16px, 2vw, 28px) / 2 - 7px);
    width: 14px;
    height: 14px;
    border-top: 3px solid var(--c-red-14);
    border-right: 3px solid var(--c-red-14);
    transform: translateY(-50%) rotate(45deg);
    transition: border-color .25s ease, transform .25s ease;
}

.hl-roadmap__step:not(:last-child):hover::after {
    border-color: var(--c-red);
    transform: translateY(-50%) rotate(45deg) scale(1.2);
}

/* Đường kẻ đáy card sáng dần theo bước */
.hl-roadmap__step::before {
    content: "";
    position: absolute;
    left: 22px;
    right: 22px;
    bottom: 0;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: linear-gradient(90deg, var(--c-red), var(--c-red-14));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s ease;
}

.hl-roadmap__step:hover::before { transform: scaleX(1); }

@media (max-width: 1279.98px) {
    /* 2 cột: chỉ mũi tên sau bước lẻ */
    .hl-roadmap__step:nth-child(2)::after { display: none; }
}

@media (max-width: 767.98px) {
    .hl-roadmap { grid-template-columns: 1fr; }
    .hl-roadmap__step::after { display: none !important; }
}

/* ── FAQ: icon chip trước câu hỏi ── */
.hl-faq__icon {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-size: 16px;
    color: var(--c-red-dark);
    background: var(--c-red-08);
    border: 1px solid var(--c-red-14);
    transition: transform .25s cubic-bezier(.34, 1.56, .64, 1), background .25s ease, color .25s ease;
}

.hl-faq__qtext { flex: 1; }

.hl-faq__item summary { gap: 14px; }

.hl-faq__item[open] .hl-faq__icon,
.hl-faq__item summary:hover .hl-faq__icon {
    background: var(--c-grad);
    border-color: transparent;
    color: #fff;
    transform: scale(1.08) rotate(-5deg);
}

.hl-faq__item[open] .hl-faq__a { padding-left: 74px; }

@media (max-width: 575.98px) {
    .hl-faq__icon { width: 34px; height: 34px; font-size: 14px; }
    .hl-faq__item[open] .hl-faq__a { padding-left: 20px; }
}

/* ── KẾT QUẢ HỌC VIÊN 2.0: premium + motion ── */

/* Metric card: icon chip + accent chạy trên đỉnh */
.hl-metric {
    position: relative;
    overflow: hidden;
    padding: 24px 14px 20px;
    border: 0;
    box-shadow: 0 4px 20px rgba(16, 34, 58, .08);
    transition: transform .28s cubic-bezier(.34, 1.56, .64, 1), box-shadow .28s ease;
}

.hl-metric::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--c-red), var(--c-gold), var(--c-red));
    background-size: 200% 100%;
    animation: hl-flow 3.2s linear infinite;
}

@keyframes hl-flow {
    from { background-position: 0% 0; }
    to   { background-position: 200% 0; }
}

.hl-metric__ic {
    width: 52px;
    height: 52px;
    margin: 0 auto 10px;
    border-radius: 15px;
    display: grid;
    place-items: center;
    font-size: 21px;
    color: #fff;
    background: linear-gradient(135deg, #33517d, var(--c-navy));
    box-shadow: 0 8px 18px rgba(31, 52, 81, .28);
    transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), background .3s ease;
}

.hl-metric:hover { transform: translateY(-6px) scale(1.03); box-shadow: var(--shadow-2); }
.hl-metric:hover .hl-metric__ic {
    background: var(--c-grad);
    transform: rotate(-6deg) scale(1.1);
    box-shadow: 0 10px 20px rgba(182, 12, 19, .3);
}

/* Result card premium */
.hl-result-card {
    position: relative;
    border: 0;
    box-shadow: 0 6px 24px rgba(16, 34, 58, .1);
    transition: transform .3s cubic-bezier(.22, .61, .36, 1), box-shadow .3s ease;
}

.hl-result-card:hover {
    transform: translateY(-8px) rotate(-.4deg);
    box-shadow: 0 22px 44px rgba(16, 34, 58, .18);
}

/* Ribbon chéo góc */
.hl-result-card__ribbon {
    position: absolute;
    top: 18px;
    right: -34px;
    z-index: 2;
    transform: rotate(38deg);
    background: var(--c-grad);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .05em;
    padding: 6px 40px;
    box-shadow: 0 4px 10px rgba(182, 12, 19, .3);
}

/* Vùng ảnh: gradient theo biến thể + avatar pulse + shimmer quét */
.hl-result-card__photo {
    position: relative;
    aspect-ratio: 16 / 8;
    display: grid;
    place-items: center;
    overflow: hidden;
}

.hl-result-card--red  .hl-result-card__photo { background: linear-gradient(135deg, #fde3e2, #fbd0ce); }
.hl-result-card--navy .hl-result-card__photo { background: linear-gradient(135deg, #e2e9f5, #cdd9ec); }
.hl-result-card--gold .hl-result-card__photo { background: linear-gradient(135deg, #fdf3d7, #fae6ad); }

.hl-result-card__photo::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.35) 0 1px, transparent 1px 18px);
}

/* Shimmer quét định kỳ — cảm giác "đang tải kết quả" */
.hl-result-card__photo::after {
    content: "";
    position: absolute;
    top: 0;
    left: -70%;
    width: 45%;
    height: 100%;
    background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .65), transparent);
    transform: skewX(-18deg);
    animation: hl-shimmer 3.4s ease-in-out infinite;
}

@keyframes hl-shimmer {
    0%   { left: -70%; }
    55%  { left: 135%; }
    100% { left: 135%; }
}

.hl-result-card:nth-child(2) .hl-result-card__photo::after { animation-delay: .6s; }
.hl-result-card:nth-child(3) .hl-result-card__photo::after { animation-delay: 1.2s; }

.hl-result-card__avatar {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 34px;
    color: #fff;
    background: linear-gradient(135deg, #33517d, var(--c-navy));
    box-shadow: 0 0 0 6px rgba(255, 255, 255, .55);
    animation: hl-ring 2.6s ease-out infinite;
    position: relative;
    z-index: 1;
}

.hl-result-card--red .hl-result-card__avatar { background: var(--c-grad); }
.hl-result-card--gold .hl-result-card__avatar { background: linear-gradient(135deg, #d6a828, #b8860b); }

/* Điểm trước → sau: 2 vòng tròn + mũi tên chạy */
.hl-result-card__score {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 16px 0 14px;
    padding: 14px 18px;
    background: var(--c-bg);
    border: 1px dashed var(--c-line);
    border-radius: 14px;
}

.hl-score-dot {
    text-align: center;
}

.hl-score-dot b {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    margin: 0 auto 5px;
    border-radius: 50%;
    font-size: 22px;
    font-weight: 800;
    background: #fff;
    border: 2.5px dashed var(--c-navy-12);
    color: var(--c-mut);
    transition: border-color .25s ease, color .25s ease, transform .25s ease;
}

.hl-score-dot--out b { border-color: var(--c-red-14); }

.hl-result-card:hover .hl-score-dot--in b  { border-color: var(--c-navy); color: var(--c-navy); transform: scale(1.06); }
.hl-result-card:hover .hl-score-dot--out b { border-color: var(--c-red); color: var(--c-red-dark); transform: scale(1.06); }

.hl-score-dot small {
    font-size: 12px;
    font-weight: 700;
    color: var(--c-mut);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.hl-score-arrow {
    flex: 1;
    text-align: center;
    color: var(--c-red);
    font-size: 22px;
    animation: hl-arrow-go 1.6s ease-in-out infinite;
}

@keyframes hl-arrow-go {
    0%, 100% { transform: translateX(0); opacity: .65; }
    50%      { transform: translateX(7px); opacity: 1; }
}

.hl-result-card__body { padding: 18px 20px 20px; }
.hl-result-card__body .hl-badge { margin-bottom: 2px; }

@media (prefers-reduced-motion: reduce) {
    .hl-metric::before,
    .hl-result-card__photo::after,
    .hl-result-card__avatar,
    .hl-score-arrow { animation: none !important; }
}

/* ── H1 hero: "Luyện thi Đánh giá năng lực" luôn 1 dòng trên desktop ── */
@media (min-width: 1024px) {
    .hl-hero .hl-h1,
    .hl-hero .hl-h1--alt {
        font-size: clamp(28px, 3.3vw, 42px);
        white-space: nowrap;
    }
}

/* ── FAQ icon: luôn gradient đỏ đậm, icon trắng nổi rõ ── */
.hl-faq__icon {
    background: var(--c-grad) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: 0 6px 14px rgba(182, 12, 19, .25);
}

.hl-faq__item summary:hover .hl-faq__icon,
.hl-faq__item[open] .hl-faq__icon {
    transform: scale(1.08) rotate(-5deg);
}

/* Con trỏ tay trên toàn dòng câu hỏi */
.hl-faq__item summary { cursor: pointer; }

/* Fix: icon trong chip FAQ phải TRẮNG (rule chevron cũ đè thành đỏ-trên-đỏ) */
.hl-faq__item summary .hl-faq__icon i {
    color: #fff !important;
    font-size: 17px;
}

/* ── News list: mô tả ngắn dưới tiêu đề ── */
.hl-news__excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 13px;
    line-height: 1.5;
    color: var(--c-mut);
    margin-top: 4px;
}

/* Thumbnail cao hơn chút để cân với 3 dòng chữ */
.hl-news__item .hl-news__thumb { aspect-ratio: 4 / 3; }

/* ── WHY CHOOSE 2.0: 4 màu, hiệu ứng phối theo card ── */
.hl-why__card {
    --why-c1: #E8483F; --why-c2: #B60C13; --why-tint: rgba(215, 38, 30, .1);
    padding: 30px 22px 26px;
}

.hl-why__card--navy  { --why-c1: #33517d; --why-c2: #1F3451; --why-tint: rgba(31, 52, 81, .1); }
.hl-why__card--green { --why-c1: #2fbf71; --why-c2: #16a34a; --why-tint: rgba(22, 163, 74, .1); }
.hl-why__card--gold  { --why-c1: #f2c14e; --why-c2: #d6a828; --why-tint: rgba(214, 168, 40, .12); }

/* Icon chip: gradient màu riêng + trắng, float nhẹ lệch nhịp */
.hl-why__icon {
    width: 74px;
    height: 74px;
    border-radius: 20px;
    display: grid;
    place-items: center;
    font-size: 30px;
    color: #fff;
    background: linear-gradient(135deg, var(--why-c1), var(--why-c2));
    border: 0;
    box-shadow: 0 10px 22px var(--why-tint), 0 6px 14px rgba(16, 34, 58, .12);
    animation: hl-bob 3.4s ease-in-out infinite;
}

.hl-why__card:nth-child(2) .hl-why__icon { animation-delay: .45s; }
.hl-why__card:nth-child(3) .hl-why__icon { animation-delay: .9s; }
.hl-why__card:nth-child(4) .hl-why__icon { animation-delay: 1.35s; }

/* Số nền: tô màu theo card khi hover */
.hl-why__num { transition: color .3s ease, transform .3s ease; }
.hl-why__card:hover .hl-why__num {
    color: var(--why-tint);
    transform: scale(1.12);
}

/* Accent bar màu riêng trượt vào (đè bản đỏ chung cũ) */
.hl-why__card::before {
    background: linear-gradient(90deg, var(--why-c1), var(--why-c2)) !important;
}

/* Hover: nâng + bóng màu riêng + icon nảy xoay */
.hl-why__card:hover {
    box-shadow: 0 18px 38px var(--why-tint), 0 10px 24px rgba(16, 34, 58, .12);
}

.hl-why__card:hover .hl-why__icon {
    animation-play-state: paused;
    transform: translateY(-6px) rotate(-6deg) scale(1.1);
    box-shadow: 0 16px 30px var(--why-tint);
}

/* Tiêu đề đổi màu theo card khi hover */
.hl-why__card h3 { transition: color .25s ease; }
.hl-why__card:hover h3 { color: var(--why-c2); }

@media (prefers-reduced-motion: reduce) {
    .hl-why__icon { animation: none !important; }
}

/* ── Nút "Xem tất cả các khóa học": icon động ── */
.hl-allcourses {
    min-height: 54px;
    padding: 0 30px;
    font-size: 16.5px;
    border-radius: 999px;
    gap: 12px;
}

.hl-allcourses__ic {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 15px;
    color: #fff;
    background: var(--c-grad);
    animation: hl-ring 2.4s ease-out infinite; /* vòng sóng đỏ lan liên tục */
}

.hl-allcourses__ic i { animation: hl-bob 2.8s ease-in-out infinite; }

.hl-allcourses__arrow {
    color: var(--c-red);
    animation: hl-arrow-go 1.6s ease-in-out infinite; /* mũi tên tự chạy tới */
}

.hl-allcourses:hover {
    background: var(--c-grad);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 12px 26px rgba(182, 12, 19, .35);
}

.hl-allcourses:hover .hl-allcourses__ic { background: #fff; color: var(--c-red-dark); animation-play-state: paused; }
.hl-allcourses:hover .hl-allcourses__arrow { color: #fff; }

@media (prefers-reduced-motion: reduce) {
    .hl-allcourses__ic, .hl-allcourses__ic i, .hl-allcourses__arrow { animation: none !important; }
}

/* ── COUNTDOWN PILL 2.0 ── */
.hl-tl-count {
    position: relative;
    overflow: hidden;
    border-radius: 22px;
    padding: 20px 30px;
    gap: clamp(16px, 2.6vw, 28px);
    background:
        radial-gradient(420px 160px at 92% 0%, rgba(255, 255, 255, .16) 0, transparent 60%),
        linear-gradient(120deg, #C11019 0%, #8E0A10 100%);
    box-shadow: 0 18px 40px rgba(182, 12, 19, .3), inset 0 1px 0 rgba(255, 255, 255, .25);
}

/* Shine quét ngang định kỳ */
.hl-tl-count::after {
    content: "";
    position: absolute;
    top: 0;
    left: -70%;
    width: 45%;
    height: 100%;
    background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .28), transparent);
    transform: skewX(-18deg);
    animation: hl-shimmer 4s ease-in-out 1s infinite;
    pointer-events: none;
}

/* Icon đồng hồ trong đĩa trắng-mờ, phát sóng */
.hl-tl-count__ic {
    width: 52px;
    height: 52px;
    flex: 0 0 auto;
    border-radius: 16px;
    display: grid;
    place-items: center;
    font-size: 23px;
    color: #fff;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .35);
    animation: hl-ring 2.4s ease-out infinite;
}

.hl-tl-count__ic i { animation: hl-bob 2.6s ease-in-out infinite; }

.hl-tl-count__label {
    font-size: 16.5px;
    line-height: 1.4;
    max-width: 220px;
}

/* Ô số: to hơn, viền gold nhấn, dấu : nhấp nháy giữa các ô */
.hl-tl-count__timer { gap: 16px; }

.hl-tl-count__box {
    position: relative;
    min-width: 72px;
    padding: 10px 8px 8px;
    border-radius: 14px;
    box-shadow: 0 6px 14px rgba(0, 0, 0, .22), inset 0 -3px 0 rgba(214, 168, 40, .35);
}

.hl-tl-count__box b { font-size: 30px; }

.hl-tl-count__box:not(:last-child)::after {
    content: ":";
    position: absolute;
    right: -12px;
    top: 50%;
    transform: translateY(-58%);
    color: rgba(255, 255, 255, .85);
    font-size: 26px;
    font-weight: 800;
    animation: hl-blink 1s steps(1) infinite;
}

@keyframes hl-blink {
    0%, 100% { opacity: 1; }
    50%      { opacity: .25; }
}

@media (max-width: 575.98px) {
    .hl-tl-count { padding: 16px 18px; }
    .hl-tl-count__label { max-width: none; text-align: center; }
    .hl-tl-count__box { min-width: 60px; }
    .hl-tl-count__box b { font-size: 24px; }
}

@media (prefers-reduced-motion: reduce) {
    .hl-tl-count::after, .hl-tl-count__ic, .hl-tl-count__ic i,
    .hl-tl-count__box::after { animation: none !important; }
}

/* Fix: icon metric phải TRẮNG nổi trên chip navy (bị rule ngoài đè màu) */
.hl-metric__ic i {
    color: #fff !important;
    font-size: 22px;
}

/* Countdown label: to hơn, 1 dòng */
.hl-tl-count__label {
    font-size: clamp(17px, 1.8vw, 20px) !important;
    font-weight: 800;
    max-width: none !important;
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .hl-tl-count__label { white-space: normal; }
}

/* Icon lịch cạnh ngày đăng */
.hl-news time {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.hl-news time i {
    color: var(--c-red);
    font-size: 12.5px;
}

/* ── Tab tính điểm 2.0 ── */
/* Thanh tỷ trọng 40/60 */
.hl-ratio { margin: 18px 0 20px; }

.hl-ratio__bar {
    display: flex;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--shadow-1);
}

.hl-ratio__seg {
    padding: 13px 16px;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    transition: filter .25s ease;
}

.hl-ratio__seg b { font-size: 19px; font-weight: 800; }

.hl-ratio__seg--thpt {
    flex: 0 0 40%;
    background: linear-gradient(135deg, #f2c14e, #d6a828);
    color: var(--c-ink);
}

.hl-ratio__seg--dgnl {
    flex: 1;
    background: var(--c-grad);
    color: #fff;
}

.hl-ratio__bar:hover .hl-ratio__seg { filter: brightness(1.06); }

.hl-ratio__note { font-size: 13px; color: var(--c-mut); margin: 8px 0 0; }

/* Card máy tính: accent chảy trên đỉnh + đổ bóng sâu hơn */
.hl-calc--flat {
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-2) !important;
    border: 0 !important;
}

.hl-calc--flat::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--c-red), var(--c-gold), var(--c-red));
    background-size: 200% 100%;
    animation: hl-flow 3.2s linear infinite;
}

/* Icon đầu card pulse (đã có hl-ring từ hero cũ) */
.hl-calc--flat .hl-calc__head i { animation: hl-ring 2.6s ease-out 1s infinite; }

/* Input: nền xám nhạt mềm, focus nổi */
.hl-calc--flat .hl-calc__field input {
    background: var(--c-bg);
    border-color: transparent;
}

.hl-calc--flat .hl-calc__field input:hover { background: #eef3fb; }
.hl-calc--flat .hl-calc__field input:focus { background: #fff; border-color: var(--c-red); }

@media (max-width: 575.98px) {
    .hl-ratio__seg { padding: 10px 10px; font-size: 12.5px; }
    .hl-ratio__seg b { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .hl-calc--flat::before, .hl-calc--flat .hl-calc__head i { animation: none !important; }
}

/* ── TEAM 2.0: nút điều hướng, ẩn scrollbar, badge môn ── */
.hl-team-wrap { position: relative; }

.hl-team-track {
    scrollbar-width: none;
    padding-bottom: 6px;
}

.hl-team-track::-webkit-scrollbar { display: none; }

/* Fade mép 2 bên gợi ý còn nội dung */
.hl-team-wrap::before,
.hl-team-wrap::after {
    content: "";
    position: absolute;
    top: 0; bottom: 6px;
    width: 46px;
    z-index: 1;
    pointer-events: none;
}

.hl-team-wrap::before { left: 0; background: linear-gradient(90deg, #fff, transparent); }
.hl-team-wrap::after  { right: 0; background: linear-gradient(-90deg, #fff, transparent); }

/* Nút mũi tên tròn */
.hl-team-nav {
    position: absolute;
    top: 42%;
    z-index: 2;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 0;
    background: #fff;
    color: var(--c-red-dark);
    font-size: 17px;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(16, 34, 58, .2), 0 0 0 1px var(--c-line);
    display: grid;
    place-items: center;
    transition: transform .22s cubic-bezier(.34, 1.56, .64, 1), background .22s ease, color .22s ease;
}

.hl-team-nav:hover {
    background: var(--c-grad);
    color: #fff;
    transform: scale(1.1);
}

.hl-team-nav--prev { left: -8px; }
.hl-team-nav--next { right: -8px; }

/* Card người: bo mềm hơn + viền đỏ khi hover */
.hl-person__photo {
    box-shadow: 0 4px 16px rgba(16, 34, 58, .1);
    transition: transform .3s ease, box-shadow .3s ease, outline-color .3s ease;
    outline: 2px solid transparent;
    outline-offset: -2px;
}

.hl-person a:hover .hl-person__photo {
    outline-color: var(--c-red);
}

/* Tên + môn học: badge chip */
.hl-person__meta b { font-size: 16px; text-shadow: 0 1px 6px rgba(0, 0, 0, .5); }

.hl-person__meta small {
    display: inline-block;
    margin-top: 5px;
    background: rgba(215, 38, 30, .85);
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .03em;
    padding: 3px 10px;
    border-radius: 999px;
    opacity: 1;
}

@media (max-width: 767.98px) {
    .hl-team-nav { display: none; } /* mobile vuốt tay */
    .hl-team-wrap::before, .hl-team-wrap::after { width: 22px; }
}

/* Nút "Mở công cụ tính điểm đầy đủ": tách xa phần text phía trên */
.hl-tool-copy .hl-check-list { margin-bottom: 0; }
.hl-tool-copy > .hl-btn { margin-top: 28px; }

/* ── Tab sơ tuyển 2.0 ── */
/* Lưới 8 chip tiêu chí */
.hl-st-chips {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 18px 0;
}

.hl-st-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: 12px;
    padding: 11px 14px;
    font-size: 14px;
    font-weight: 600;
    color: #33415b;
    box-shadow: var(--shadow-1);
    transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.hl-st-chip i {
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 9px;
    font-size: 13px;
    color: #fff !important;
    background: linear-gradient(135deg, #33517d, var(--c-navy));
}

/* Đổi màu icon xen kẽ cho sinh động */
.hl-st-chip:nth-child(4n+1) i { background: var(--c-grad); }
.hl-st-chip:nth-child(4n+3) i { background: linear-gradient(135deg, #2fbf71, #16a34a); }
.hl-st-chip:nth-child(4n+4) i { background: linear-gradient(135deg, #f2c14e, #d6a828); }

.hl-st-chip:hover {
    transform: translateY(-3px);
    border-color: var(--c-red-14);
    box-shadow: var(--shadow-2);
}

/* Form sơ tuyển: card premium như calc */
.hl-sotuyen {
    position: relative;
    overflow: hidden;
    border: 0;
    box-shadow: var(--shadow-2);
}

.hl-sotuyen::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--c-red), var(--c-gold), var(--c-red));
    background-size: 200% 100%;
    animation: hl-flow 3.2s linear infinite;
}

/* Label: số thứ tự đỏ đậm */
.hl-sotuyen__q label { color: var(--c-ink); }

/* Select mềm */
.hl-sotuyen__q select {
    background: var(--c-bg);
    border-color: transparent;
    transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
    cursor: pointer;
}

.hl-sotuyen__q select:hover { background: #eef3fb; }
.hl-sotuyen__q select:focus { background: #fff; border-color: var(--c-red); }

/* Select đã chọn: viền xanh nhấn nhẹ */
.hl-sotuyen__q select:not(:invalid):not([value=""]) { font-weight: 600; }

@media (max-width: 575.98px) {
    .hl-st-chips { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .hl-sotuyen::before { animation: none !important; }
}

/* ── Đồng hồ bấm giờ SVG: kim quay tự động, to hơn ── */
.hl-tl-count__ic {
    width: 62px !important;
    height: 62px !important;
    border-radius: 18px !important;
}

.hl-stopwatch { display: block; color: #fff; }

.hl-stopwatch__hand {
    transform-origin: 12px 15.5px;
    animation: hl-hand-spin 2.4s linear infinite;
}

@keyframes hl-hand-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .hl-stopwatch__hand { animation: none !important; }
}

/* ── Số bước lộ trình: "nổ" đếm tuần tự 1→2→3→4 lặp vòng ── */
@keyframes hl-count-pop {
    0%, 100% { transform: scale(1); }
    4%       { transform: scale(1.45); }
    8%       { transform: scale(0.95); }
    12%      { transform: scale(1.15); }
    16%      { transform: scale(1); }
}

@keyframes hl-count-burst {
    0%   { box-shadow: 0 6px 14px rgba(182, 12, 19, .3), 0 0 0 0 rgba(215, 38, 30, .55); }
    16%  { box-shadow: 0 6px 14px rgba(182, 12, 19, .3), 0 0 0 16px rgba(215, 38, 30, 0); }
    100% { box-shadow: 0 6px 14px rgba(182, 12, 19, .3), 0 0 0 0 rgba(215, 38, 30, 0); }
}

.hl-roadmap__step .hl-roadmap__no {
    animation: hl-count-pop 4.4s cubic-bezier(.34, 1.56, .64, 1) infinite,
               hl-count-burst 4.4s ease-out infinite;
}

/* Lệch nhịp: 1 nổ trước, rồi 2, 3, 4 — mỗi số cách nhau 0.55s */
.hl-roadmap__step:nth-child(1) .hl-roadmap__no { animation-delay: 0s, 0s; }
.hl-roadmap__step:nth-child(2) .hl-roadmap__no { animation-delay: .55s, .55s; }
.hl-roadmap__step:nth-child(3) .hl-roadmap__no { animation-delay: 1.1s, 1.1s; }
.hl-roadmap__step:nth-child(4) .hl-roadmap__no { animation-delay: 1.65s, 1.65s; }

/* Hover card vẫn ưu tiên hiệu ứng hover cũ */
.hl-roadmap__step:hover .hl-roadmap__no { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
    .hl-roadmap__step .hl-roadmap__no { animation: none !important; }
}