/* === incard: trang lĩnh vực Giáo dục (/vi/linh-vuc/education/) === */
/*
 * Bản sao khoanh riêng cho trang 271 của khối component `incard-ind-*`.
 *
 * Khối này trước nằm trong group `css` của theme style Bricks nên có mặt trên
 * mọi trang. Một session khác đã bóc nó ra để viết lại cho
 * /vi/linh-vuc/travel-tourism/ (incard-linhvuc-bricks.css), và file thay thế chỉ
 * mang phần trang đó dùng — thêm nữa vài tên class ở đó đã mang nghĩa khác
 * (`incard-ind-result`: viên pill thay vì dòng kết luận). Nên trang này giữ bản
 * sao của mình thay vì phụ thuộc lớp đang được viết lại.
 *
 * Tiền tố `body.brx-body.page-id-271` có ba việc: (1) không chạm trang nào khác;
 * (2) đạt trọng số (0,3,0)+, đủ thắng cả incard.css và những rule (0,2,0) của
 * lớp linhvuc nạp sau; (3) nói rõ lớp này thuộc về ai.
 *
 * Sinh bởi make-css.mjs từ recovered-ind.css — sửa generator, đừng sửa file này.
 */

body.brx-body.page-id-271.bricks-is-frontend .incard-on-gradient :where(a,
body.brx-body.page-id-271 button):focus-visible { outline-color: var(--focus-on-gradient); box-shadow: 0 0 0 2px var(--focus-separator);}

body.brx-body.page-id-271 .incard-on-ink { color: var(--on-ink-body); background-color: var(--brand-ink); }

body.brx-body.page-id-271 .incard-on-ink :where(h1,
body.brx-body.page-id-271 h2,
body.brx-body.page-id-271 h3,
body.brx-body.page-id-271 h4,
body.brx-body.page-id-271 h5,
body.brx-body.page-id-271 h6) { color: var(--on-ink-strong); }

body.brx-body.page-id-271 .incard-on-ink hr { border-color: var(--on-ink-rule); }

body.brx-body.page-id-271 .incard-on-gradient { color: var(--on-ink-strong); background-image: var(--gradient); }

body.brx-body.page-id-271 .incard-on-gradient :where(h1,
body.brx-body.page-id-271 h2,
body.brx-body.page-id-271 h3,
body.brx-body.page-id-271 h4,
body.brx-body.page-id-271 h5,
body.brx-body.page-id-271 h6,
body.brx-body.page-id-271 p) { color: var(--on-ink-strong); }

body.brx-body.page-id-271 .incard-eyebrow-pill { display: inline-flex; align-items: center; gap: var(--space-xs); align-self: flex-start; padding: 6px 14px; border: 1px solid rgba(20, 128, 65, .28); border-radius: var(--radius-pill); background: var(--brand-surface);}

body.brx-body.page-id-271 .incard-eyebrow-pill svg { width: 16px; height: 16px; flex: 0 0 auto; }

body.brx-body.page-id-271 .incard-badge-pill { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; width: fit-content; padding: 4px 12px; border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; line-height: 1.5;}

body.brx-body.page-id-271 .incard-badge-soft-green { background: var(--green-wash); color: var(--text-accent-strong); }

body.brx-body.page-id-271 .incard-badge-soft-blue { background: var(--blue-wash); color: var(--text-link-strong); }

body.brx-body.page-id-271 .brxe-block[class*="align-center"] .incard-badge-pill { align-self: center; }

body.brx-body.page-id-271 .incard-badge-soft-green { background: var(--chip-green); }

body.brx-body.page-id-271 .incard-badge-soft-blue { background: var(--chip-blue); }

body.brx-body.page-id-271 .incard-eyebrow-pill { padding: 8px 16px; }

body.brx-body.page-id-271 .incard-eyebrow-pill svg { width: 18px; height: 18px; }

body.brx-body.page-id-271 .incard-eyebrow-pill { gap: 10px; }

body.brx-body.page-id-271 .incard-on-ink h1,
body.brx-body.page-id-271 .incard-on-ink h2,
body.brx-body.page-id-271 .incard-on-ink h3 { color: var(--on-ink-strong); }

body.brx-body.page-id-271 .incard-ind-accent { color: var(--on-ink-accent); }

body.brx-body.page-id-271 .incard-ind-card { transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease; }

body.brx-body.page-id-271 .incard-ind-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); border-color: rgba(20, 128, 65, .28);}

body.brx-body.page-id-271 .incard-ind-metric { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-md); background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .24); color: var(--on-ink-strong); font-size: var(--text-sm); font-weight: 600; line-height: 1.45; text-align: left;}

body.brx-body.page-id-271 .incard-ind-metric svg { width: 20px; height: 20px; flex: 0 0 auto; }

body.brx-body.page-id-271 .incard-ind-result { display: inline-flex; align-self: center; align-items: center; gap: 12px; padding: 12px 22px; border-radius: var(--radius-pill); background-image: var(--gradient); color: var(--on-ink-strong); font-size: var(--text-sm); font-weight: 700; line-height: 1.4; box-shadow: var(--shadow-md);}

body.brx-body.page-id-271 .incard-ind-result svg { width: 20px; height: 20px; flex: 0 0 auto; }

body.brx-body.page-id-271 .incard-ind-panel { padding: var(--space-lg); border-radius: var(--radius-xl); border: 1px solid transparent;}

body.brx-body.page-id-271 .incard-ind-pill { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border-radius: var(--radius-pill); background: var(--brand-surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); color: var(--brand-ink); font-size: var(--text-sm); font-weight: 600; line-height: 1.4;}

body.brx-body.page-id-271 .incard-ind-pill svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--brand-blue); }

body.brx-body.page-id-271 .incard-ind-flow { position: relative; }

body.brx-body.page-id-271 .incard-ind-flow::before { content: ""; position: absolute; top: 0; bottom: 0; left: 27px; width: 2px; background-image: linear-gradient(to bottom, rgba(20, 128, 65, 0) 0%, var(--brand-green) 7%, var(--brand-blue) 93%, rgba(18, 114, 188, 0) 100%);}

body.brx-body.page-id-271 .incard-ind-num { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; flex: 0 0 auto; border-radius: var(--radius-pill); background-image: var(--gradient); color: var(--on-ink-strong); font-size: var(--text-body); font-weight: 700; line-height: 1; box-shadow: 0 0 0 6px var(--brand-bg);}

body.brx-body.page-id-271 .incard-ind-kpi { padding: var(--space-lg) var(--space-md); border-radius: var(--radius-lg); background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .24); text-align: center;}

body.brx-body.page-id-271 .incard-ind-kpi__value { color: var(--on-ink-strong); font-size: var(--text-h2); font-weight: 800; line-height: 1.1;}

body.brx-body.page-id-271 .incard-ind-step { position: relative; }

body.brx-body.page-id-271 .incard-ind-faq .accordion-item { background: var(--brand-surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden;}

body.brx-body.page-id-271 .incard-ind-faq .accordion-item + .accordion-item { margin-top: var(--space-sm); }

body.brx-body.page-id-271 .incard-ind-faq .accordion-title-wrapper { cursor: pointer; gap: var(--space-md); align-items: flex-start; }

body.brx-body.page-id-271 .incard-ind-faq .accordion-item.brx-open,
body.brx-body.page-id-271 .incard-ind-faq .accordion-item.active,
body.brx-body.page-id-271 .incard-ind-faq .accordion-item.open { border-color: rgba(20, 128, 65, .35); box-shadow: var(--shadow-md); }

body.brx-body.page-id-271 .incard-ind-panel { padding: var(--space-md); }

body.brx-body.page-id-271 .incard-ind-accent { color: var(--on-ink-accent); }

body.brx-body.page-id-271 .incard-ind-chip,
body.brx-body.page-id-271 i.incard-ind-chip { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; flex: 0 0 auto; border-radius: var(--radius-md); font-size: 20px; line-height: 1;}

body.brx-body.page-id-271 i.incard-ind-chip--sm { width: 40px; height: 40px; font-size: 17px; }

body.brx-body.page-id-271 i.incard-ind-chip--green { background: var(--chip-green); color: var(--ag-green-ink); }

body.brx-body.page-id-271 i.incard-ind-chip--blue { background: var(--chip-blue); color: var(--brand-blue); }

body.brx-body.page-id-271 i.incard-ind-chip--ink { background: rgba(255, 255, 255, .1); border: 1px solid var(--on-ink-rule); color: var(--on-ink-accent);}

body.brx-body.page-id-271 .incard-ind-card { background: var(--brand-surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-lg); height: 100%; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;}

body.brx-body.page-id-271 .incard-ind-card:hover { border-color: rgba(20, 128, 65, .32); box-shadow: var(--shadow-md); transform: translateY(-2px);}

body.brx-body.page-id-271 .incard-ind-tile { justify-content: center; text-align: center; }

body.brx-body.page-id-271 .incard-ind-summary {  display: flex; flex-direction: row; gap: var(--space-lg); align-items: flex-start; background: var(--brand-surface); border: 1px solid var(--border); border-left: 4px solid var(--brand-green); border-radius: var(--radius-lg); padding: var(--space-lg) var(--space-xl); box-shadow: var(--shadow-sm);}

body.brx-body.page-id-271 .incard-ind-darkcard { align-items: stretch; border-radius: var(--radius-xl); padding: var(--space-xl) var(--space-lg); overflow: hidden;}

body.brx-body.page-id-271 .incard-ind-metric { padding: var(--space-sm) var(--space-md); background: rgba(255, 255, 255, .05); border: 1px solid var(--on-ink-rule); border-radius: var(--radius-md);}

body.brx-body.page-id-271 .incard-ind-result { display: flex; align-items: center; justify-content: center; gap: var(--space-sm); padding: var(--space-md) var(--space-lg); border-radius: var(--radius-lg); background: var(--chip-green); border: 1px solid rgba(20, 128, 65, .22);}

body.brx-body.page-id-271 .incard-ind-result p.brxe-text-basic { margin: 0; text-align: center; color: var(--brand-green-hover); font-weight: 700; font-size: var(--text-body); line-height: 1.55;}

body.brx-body.page-id-271 i.incard-ind-result__icon { font-size: 20px; line-height: 1; flex: 0 0 auto; color: var(--ag-green-ink); }

body.brx-body.page-id-271 .incard-ind-panel__head { padding-bottom: var(--space-md); border-bottom: 1px solid var(--border);}

body.brx-body.page-id-271 .incard-ind-panel { background: var(--brand-surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-lg); height: 100%;}

body.brx-body.page-id-271 .incard-ind-num,
body.brx-body.page-id-271 p.incard-ind-num { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: 0 0 auto; margin: 0; border-radius: var(--radius-pill); background-image: var(--gradient); color: var(--brand-surface); font-size: var(--text-body); font-weight: 700; line-height: 1;}

body.brx-body.page-id-271 .incard-ind-flow { position: relative; }

body.brx-body.page-id-271 .incard-ind-flow::before { content: ""; position: absolute; top: 19px; left: 9%; right: 9%; height: 2px; background: linear-gradient(90deg, rgba(20, 128, 65, .35), rgba(18, 114, 188, .35));}

body.brx-body.page-id-271 .incard-ind-flow__item { position: relative; z-index: 1; text-align: center; }

body.brx-body.page-id-271 .incard-ind-steps { position: relative; }

body.brx-body.page-id-271 .incard-ind-steps::before { content: ""; position: absolute; left: 19px; top: 20px; bottom: 20px; width: 2px; background: linear-gradient(180deg, rgba(20, 128, 65, .35), rgba(18, 114, 188, .35));}

body.brx-body.page-id-271 .incard-ind-step { position: relative; z-index: 1; }

body.brx-body.page-id-271 .incard-ind-kpi { padding: var(--space-lg) var(--space-md); border-radius: var(--radius-lg); background: rgba(8, 45, 64, .28); border: 1px solid rgba(255, 255, 255, .24); text-align: center;}

body.brx-body.page-id-271 p.incard-ind-kpi__value { white-space: nowrap; }

body.brx-body.page-id-271 i.incard-ind-kpi__icon { font-size: 22px; line-height: 1; color: var(--on-ink-strong); opacity: .85; }

body.brx-body.page-id-271 p.incard-ind-pill { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 8px 14px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, .08); border: 1px solid var(--on-ink-rule); color: var(--on-ink-strong); font-size: var(--text-sm); font-weight: 600; line-height: 1.4;}

body.brx-body.page-id-271 p.incard-ind-pill::before { content: ""; width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: var(--on-ink-accent);}

body.brx-body.page-id-271 .incard-eyebrow-pill i { font-size: 16px; line-height: 1; flex: 0 0 auto; }

body.brx-body.page-id-271 .incard-ind-faq .accordion-item { background: var(--brand-surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden;}

body.brx-body.page-id-271 .incard-ind-faq .accordion-item + .accordion-item { margin-top: var(--space-sm); }

body.brx-body.page-id-271 .incard-ind-faq .accordion-title-wrapper { cursor: pointer; gap: var(--space-md); align-items: flex-start; }

body.brx-body.page-id-271 .incard-ind-faq .accordion-item.brx-open,
body.brx-body.page-id-271 .incard-ind-faq .accordion-item.active,
body.brx-body.page-id-271 .incard-ind-faq .accordion-item.open { border-color: rgba(20, 128, 65, .35); box-shadow: var(--shadow-md); }