/* 1ERP · design system dùng chung cho 4 website (1erp.net · 1erp.one · 1erp.info.vn · 1erp.io.vn)
   Nguồn: canvas Design «1ERP — Bộ thiết kế 4 website» (artboard Design system 1ERP).
   Chỉ --accent, --accent-soft, --accent-ink đổi theo site (đặt trên <html> trong layout). Không framework CSS. */

:root {
  --navy: #0A1E3F; --navy-2: #13294F; --navy-3: #1F3A66; --gold: #F2A900;
  --slate: #4F5B70; --slate-2: #3F4A5E; --line: #E3E7EF; --line-2: #C3CAD6; --line-3: #A9B3C4;
  --mist: #F4F6FA; --white: #FFFFFF; --muted-on-navy: #B8C3D9; --ph: #CBD3E0;
  --note-bg: #FFF6DB; --note-ink: #5C4300;
  --accent: #1D5BFF; --accent-soft: #E8EEFF; --accent-ink: #12379E;
  --font: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --r-input: 10px; --r-btn: 12px; --r-card: 16px; --r-block: 20px;
  --shadow: 0 20px 50px rgba(10, 30, 63, .08);
  --shadow-pop: 0 20px 50px rgba(10, 30, 63, .18);
  --wrap: 1200px;
}
*, *::before, *::after { box-sizing: border-box }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth }
body { margin: 0; font-family: var(--font); color: var(--navy); background: var(--white); font-size: 16px; line-height: 1.6 }
img { max-width: 100%; height: auto; display: block }
a { color: var(--accent) }
a:hover { color: var(--navy) }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px }
h1, h2, h3, h4 { text-wrap: balance }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
.skip-link { position: absolute; left: 12px; top: -60px; background: var(--navy); color: #fff; padding: 10px 14px; border-radius: 8px; z-index: 50 }
.skip-link:focus { top: 12px }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto } * { transition: none !important } }

/* ── Khung ───────────────────────────────────────────────────────────── */
.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: 20px; padding-right: 20px }
.wrap--narrow { max-width: 900px } .wrap--text { max-width: 760px }
.sec { padding-block: clamp(56px, 10vw, 96px) }
.sec--head { padding-block: clamp(36px, 7vw, 60px) }
.sec--mist { background: var(--mist) } .sec--soft { background: var(--accent-soft) }
.sec--navy { background: var(--navy); color: #fff }
.sec--navy .lead, .sec--navy p { color: var(--muted-on-navy) }
.stack { display: flex; flex-direction: column; gap: 16px }
.stack-lg { display: flex; flex-direction: column; gap: 32px }
.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center }
.row-between { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: flex-end; justify-content: space-between }
.grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 20px }
.grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 16px }
.split { display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start }
.split > .split__side { flex: 1 1 260px; min-width: 0 }
.split > .split__main { flex: 999 1 560px; min-width: 0; max-width: 760px }

/* ── Chữ ─────────────────────────────────────────────────────────────── */
.eyebrow { font-size: 13px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--accent) }
.sec--navy .eyebrow { color: var(--gold) }
.h1 { margin: 0; font-size: clamp(34px, 7vw, 52px); font-weight: 800; line-height: 1.1; letter-spacing: -.02em }
.h1--page { font-size: clamp(32px, 7vw, 48px); line-height: 1.12 }
.h2 { margin: 0; font-size: clamp(28px, 5.5vw, 38px); font-weight: 800; line-height: 1.2; letter-spacing: -.01em }
.h3 { margin: 0; font-size: clamp(22px, 4vw, 24px); font-weight: 800; line-height: 1.3 }
.h4 { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.4 }
.lead { margin: 0; font-size: 18px; line-height: 1.6; color: var(--slate); max-width: 720px }
.muted { color: var(--slate) } .small { font-size: 14px } .tiny { font-size: 13px }
.accent { color: var(--accent) }

/* ── Đường dẫn ───────────────────────────────────────────────────────── */
.crumbs { font-size: 14px; color: var(--slate); line-height: 1.6 }
.crumbs a { color: var(--slate); text-decoration: none }
.crumbs a:hover { color: var(--navy); text-decoration: underline }
.crumbs [aria-current] { color: var(--navy); font-weight: 600 }

/* ── Nút ─────────────────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 12px 20px; border-radius: var(--r-btn);
  font: inherit; font-size: 15px; font-weight: 700; text-decoration: none; cursor: pointer; border: 1px solid transparent; white-space: nowrap }
.btn--primary { background: var(--accent); color: #fff }
.btn--primary:hover { color: #fff; filter: brightness(.92) }
.btn--ghost { background: #fff; color: var(--navy); border-color: var(--line-2) }
.btn--ghost:hover { color: var(--navy); border-color: var(--navy) }
.btn--navy { background: var(--navy); color: #fff }
.btn--navy:hover { color: #fff; background: var(--navy-2) }
.btn--gold { background: var(--gold); color: var(--navy); font-weight: 800 }
.btn--gold:hover { color: var(--navy); filter: brightness(1.05) }
.btn--lg { font-size: 16px; padding: 14px 24px }
.btn--block { width: 100% }
.link-arrow { font-weight: 700; text-decoration: none; color: var(--accent) }
.link-arrow:hover { text-decoration: underline; color: var(--accent) }
.icon-btn { width: 44px; height: 44px; border: 1px solid #D5DBE6; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; color: var(--navy); background: #fff }

/* ── Chip ────────────────────────────────────────────────────────────── */
.chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin }
.chips--wrap { flex-wrap: wrap; overflow: visible }
.chip { flex: 0 0 auto; font-size: 15px; font-weight: 700; padding: 10px 16px; border-radius: 999px; text-decoration: none;
  background: #fff; color: var(--navy); border: 1px solid var(--line-2); white-space: nowrap }
.chip:hover { color: var(--navy); border-color: var(--navy) }
.chip[aria-current="page"], .chip.is-on { background: var(--navy); color: #fff; border-color: var(--navy) }
.chip--sm { font-size: 14px; padding: 9px 14px }
.chip--accent { background: var(--accent-soft); color: var(--accent); border-color: transparent }
.pill { display: inline-flex; align-items: center; font-size: 13px; font-weight: 700; color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: 5px 11px; text-decoration: none; white-space: nowrap }

/* ── Header ──────────────────────────────────────────────────────────── */
.hd { position: relative; z-index: 20; background: #fff; border-bottom: 1px solid var(--line) }
.hd__top { background: var(--navy); color: #D5DBE6; font-size: 13px }
.hd__top .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 16px }
.hd__top a { color: #fff; font-weight: 700; text-decoration: none }
.eco { position: relative }
.eco > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 11px 0; font-weight: 700; color: #fff; min-height: 44px }
.eco > summary::-webkit-details-marker { display: none }
.eco__dot { width: 10px; height: 10px; border-radius: 2px; background: var(--gold) }
.eco[open] > summary svg { transform: rotate(180deg) }
.eco__menu { position: absolute; top: 100%; left: 0; width: 340px; max-width: calc(100vw - 32px); background: #fff; color: var(--navy);
  border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-pop); padding: 10px; display: flex; flex-direction: column; gap: 4px }
.eco__item { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--navy) !important; padding: 10px 12px; border-radius: 12px; font-weight: 400 !important }
.eco__item:hover, .eco__item[aria-current="true"] { background: var(--mist) }
.eco__bar { flex: 0 0 10px; height: 36px; border-radius: 4px }
.eco__txt { display: flex; flex-direction: column; gap: 2px; flex: 1 1 0; min-width: 0 }
.eco__txt b { font-size: 15px } .eco__txt span { font-size: 13px; color: var(--slate) }
.eco__now { font-size: 11px; font-weight: 800; color: #fff; border-radius: 999px; padding: 4px 8px }
.hd__main { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding-block: 12px }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--navy); min-width: 0 }
.brand:hover { color: var(--navy) }
.brand__name { font-weight: 800; font-size: 23px; letter-spacing: -.01em }
.hd__actions { display: flex; align-items: center; gap: 8px }
.hd__nav { border-top: 1px solid #EEF1F6 }
.hd__nav .wrap { display: flex; gap: 26px; overflow-x: auto; font-size: 15px; font-weight: 600; white-space: nowrap; scrollbar-width: none }
.hd__nav .wrap::-webkit-scrollbar { display: none }
.hd__nav a { color: var(--navy); text-decoration: none; padding: 13px 0 11px; border-bottom: 3px solid transparent }
.hd__nav a:hover { color: var(--accent) }
.hd__nav a[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent) }
@media (max-width: 520px) { .brand .pill { display: none } .hd__demo { padding-inline: 14px } }

/* ── Footer ──────────────────────────────────────────────────────────── */
.ft { background: var(--navy); color: var(--muted-on-navy) }
.ft .wrap { padding-block: 56px 28px; display: flex; flex-direction: column; gap: 40px }
.ft__cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; background: var(--navy-2); border-radius: var(--r-block); padding: 26px 28px }
.ft__cta b { font-size: 22px; color: #fff; line-height: 1.3 }
.ft__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 32px }
.ft__col { display: flex; flex-direction: column; gap: 10px; font-size: 15px; min-width: 0 }
.ft__col > b { color: #fff }
.ft a { color: var(--muted-on-navy); text-decoration: none }
.ft a:hover { color: #fff; text-decoration: underline }
.ft__social { display: flex; flex-wrap: wrap; gap: 8px }
.ft__social a { color: #fff; font-size: 13px; font-weight: 700; border: 1px solid #2B4777; border-radius: 999px; padding: 8px 12px }
.ft__eco a { display: flex; flex-direction: column } .ft__eco a span:first-child { color: #fff; font-weight: 600 } .ft__eco a span + span { font-size: 13px }
.ft__bottom { border-top: 1px solid var(--navy-3); padding-top: 20px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 13px }
.ft__bottom nav { display: flex; flex-wrap: wrap; gap: 20px }

/* ── Thẻ bài CMS ─────────────────────────────────────────────────────── */
.card { color: var(--navy); text-decoration: none; background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; display: flex; flex-direction: column; height: 100% }
.card:hover { color: var(--navy); border-color: var(--line-2); box-shadow: var(--shadow) }
.card__img { aspect-ratio: 16 / 9; width: 100%; object-fit: cover; background: var(--ph) }
.card__ph { aspect-ratio: 16 / 9; background: var(--accent); display: flex; flex-direction: column; justify-content: space-between; padding: 16px }
.card__ph span { color: #fff; font-weight: 800; font-size: 15px }
.card__body { padding: 18px; display: flex; flex-direction: column; gap: 10px; flex-grow: 1 }
.card__cat { font-size: 13px; font-weight: 700; color: var(--accent) }
.card__title { font-size: 18px; line-height: 1.4; font-weight: 700; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden }
.card__desc { font-size: 14.5px; line-height: 1.55; color: var(--slate); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden }
.card__meta { margin-top: auto; padding-top: 6px; font-size: 13px; color: var(--slate); display: flex; flex-wrap: wrap; gap: 4px 10px }
.feat { display: flex; flex-wrap: wrap; border: 1px solid var(--line); border-radius: var(--r-block); overflow: hidden; text-decoration: none; color: var(--navy); background: #fff }
.feat:hover { color: var(--navy); box-shadow: var(--shadow) }
.feat__media { flex: 1 1 420px; aspect-ratio: 16 / 9; background: var(--ph); min-width: 0 }
.feat__media img { width: 100%; height: 100%; object-fit: cover }
.feat__media.card__ph { background: var(--accent) }
.feat__body { flex: 1 1 380px; min-width: 0; padding: clamp(22px, 4vw, 36px); display: flex; flex-direction: column; gap: 12px; justify-content: center }
.feat__title { font-size: clamp(22px, 3.6vw, 30px); line-height: 1.3; font-weight: 800 }

/* ── Phân trang ──────────────────────────────────────────────────────── */
.pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; font-size: 15px; font-weight: 700 }
.pager a, .pager span { min-width: 44px; height: 44px; padding: 0 14px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none }
.pager a { border: 1px solid var(--line-2); color: var(--navy) }
.pager a:hover { border-color: var(--navy); color: var(--navy) }
.pager [aria-current="page"] { background: var(--accent); color: #fff; border: 0 }
.pager .is-off { border: 1px solid var(--line); color: #6B7488 }
.pager .pager__info { display: none; color: var(--slate) }
@media (max-width: 560px) { .pager .pager__num { display: none } .pager .pager__info { display: inline-flex } }

/* ── Trạng thái rỗng, khối lưu ý ─────────────────────────────────────── */
.empty { border: 1px dashed var(--line-2); border-radius: var(--r-card); padding: 32px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; color: var(--slate) }
.empty b { color: var(--navy); font-size: 18px }
.note { background: var(--note-bg); border-radius: 12px; padding: 14px 18px; font-size: 15.5px; line-height: 1.6; color: var(--note-ink) }
.tip { background: var(--accent-soft); border-radius: 12px; padding: 14px 18px; font-size: 15.5px; line-height: 1.6; color: var(--accent-ink) }
.box { background: var(--mist); border-radius: var(--r-card); padding: 20px }
.box--line { background: #fff; border: 1px solid var(--line) }

/* ── Mục lục, CTA giữa bài, đọc thêm ─────────────────────────────────── */
.toc { background: var(--mist); border-radius: var(--r-card); padding: 20px; display: flex; flex-direction: column; gap: 4px; font-size: 15px }
.toc > b { font-size: 13px; letter-spacing: .14em; color: var(--slate); padding-bottom: 8px }
.toc a { color: var(--navy); text-decoration: none; padding: 8px 10px; border-radius: 8px; line-height: 1.4 }
.toc a:hover { background: #fff }
.toc a.is-h3 { padding-left: 22px; font-size: 14px; color: var(--slate) }
.cta-mid { background: var(--accent-soft); border-radius: 18px; padding: 22px 24px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin: 8px 0 }
.cta-mid__txt { display: flex; flex-direction: column; gap: 4px; flex: 1 1 300px; min-width: 0 }
.cta-mid__txt b { font-size: 18px; line-height: 1.4 } .cta-mid__txt span { font-size: 15px; color: var(--slate-2); line-height: 1.5 }
.xread { margin-top: 10px; border: 1px solid var(--line); border-radius: var(--r-card); padding: 20px 22px; display: flex; gap: 16px; align-items: center; text-decoration: none; color: var(--navy); background: #fff }
.xread:hover { color: var(--navy); box-shadow: var(--shadow) }
.xread__bar { flex: 0 0 8px; align-self: stretch; border-radius: 4px }
.xread__txt { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 4px }
.xread__txt span { font-size: 13px; font-weight: 700 } .xread__txt b { font-size: 17px; line-height: 1.4 }

/* ── Nội dung bài (HTML từ CMS) ──────────────────────────────────────── */
.prose { font-size: 17px; line-height: 1.75; color: var(--navy); display: flex; flex-direction: column; gap: 18px; min-width: 0; overflow-wrap: anywhere }
.prose > * { margin: 0 }
.prose h2 { margin-top: 14px; font-size: clamp(24px, 4.5vw, 28px); font-weight: 800; line-height: 1.3; scroll-margin-top: 16px }
.prose h3 { margin-top: 4px; font-size: 21px; font-weight: 800; line-height: 1.35; scroll-margin-top: 16px }
.prose h4 { font-size: 18px; font-weight: 700 }
.prose a { color: var(--accent); font-weight: 600 } .prose a:hover { text-decoration: none; color: var(--accent) }
/* Thành phần giao diện nằm trong bài (CTA, đọc thêm, chip) giữ màu riêng, không theo style link trong bài */
.prose a.btn--primary, .prose a.btn--primary:hover { color: #fff; text-decoration: none }
.prose a.xread, .prose a.xread:hover, .prose a.chip, .prose a.chip:hover { color: var(--navy); font-weight: inherit; text-decoration: none }
.prose a.chip { font-weight: 700 }
.prose ul, .prose ol { padding-left: 22px; display: flex; flex-direction: column; gap: 6px }
.prose blockquote { padding: 18px 22px; background: var(--mist); border-radius: 14px; font-size: 19px; font-weight: 600; line-height: 1.55 }
.prose img { border-radius: 12px; height: auto }
.prose figure { display: flex; flex-direction: column; gap: 8px }
.prose figcaption { font-size: 14px; color: var(--slate); text-align: center }
.prose table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; display: block; overflow-x: auto; border: 1px solid var(--line); border-radius: 12px }
.prose th, .prose td { padding: 12px 14px; text-align: left; vertical-align: top; border-top: 1px solid var(--line) }
.prose thead tr, .prose tr:first-child th { background: var(--mist) }
.prose pre { background: var(--navy); color: #E6EBF5; border-radius: 12px; padding: 16px 18px; overflow-x: auto; font-size: 14px; line-height: 1.6; font-family: var(--mono) }
.prose code { font-family: var(--mono); font-size: .9em; background: var(--mist); padding: 2px 6px; border-radius: 5px }
.prose pre code { background: none; padding: 0; color: inherit }
.prose iframe, .prose video { max-width: 100%; border: 0; border-radius: 12px }
.prose iframe[src*="youtube"] { width: 100%; aspect-ratio: 16 / 9; height: auto }
.prose .note, .prose .tip { font-size: 15.5px }

/* ── Form ────────────────────────────────────────────────────────────── */
.form-card { background: #fff; border-radius: var(--r-block); padding: clamp(20px, 4vw, 32px); box-shadow: var(--shadow);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 16px }
.form-card .full { grid-column: 1 / -1 }
.field { display: flex; flex-direction: column; gap: 8px; font-size: 14px; font-weight: 600 }
.input, .select, .textarea { font: inherit; font-weight: 400; font-size: 16px; padding: 13px 14px; border: 1px solid var(--line-3); border-radius: var(--r-input); background: #fff; color: var(--navy); width: 100% }
.textarea { resize: vertical; min-height: 110px }
.input:focus, .select:focus, .textarea:focus { outline: 3px solid var(--accent-soft); border-color: var(--accent) }
.form-msg { border-radius: 12px; padding: 14px 18px; font-size: 15px; font-weight: 600 }
.form-msg.is-ok { background: #E3F4EC; color: #075C3F } .form-msg.is-err { background: #FDECEC; color: #8F1D1D }
.searchbar { display: flex; gap: 8px; background: #fff; border: 1px solid var(--line-3); border-radius: 14px; padding: 6px 6px 6px 16px; align-items: center; width: 100% }
.searchbar input { flex: 1 1 0; min-width: 0; font: inherit; font-size: 17px; color: var(--navy); border: 0; padding: 10px 0; background: transparent; outline: 0 }
.searchbar:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft) }
.check { display: flex; gap: 12px; font-size: 16px; line-height: 1.5 }
.check svg { flex: 0 0 22px; stroke: var(--accent) }