/* Đomđóm (domdom.isavn.edu.vn). Mobile first. Không dùng font ngoài. */
:root {
  --bg: #f4f7fc; --surface: #ffffff; --surface-2: #e8eef9; --ink: #0d1b30; --ink-2: #45556b; --line: #d5deec;
  --accent: #1257d6; --accent-h: #0c44ad; --accent-ink: #ffffff; --accent-soft: #eef4ff;
  --sh: 0 1px 2px rgba(16, 40, 90, .05), 0 8px 24px rgba(16, 40, 90, .06); --sh-2: 0 2px 4px rgba(16, 40, 90, .06), 0 14px 34px rgba(16, 40, 90, .10);
  --ok: #17703f; --ok-soft: #e2f3e9; --warn: #855000; --warn-soft: #fcefd6; --bad: #b3261e; --bad-soft: #fde8e6;
  --yel: #ffd21f; --yel-ink: #0d1b30; --warm: #0b3585; --warm-soft: #fff4bf; --warm-line: #f5bd00; --glow: #ffdc4a; --xh-giam: #765600; --dodo: #1257d6;
  --mascot-body: #1257d6; --mascot-deep: #0b3585; --mascot-wing: #bcd2ff; --mascot-lamp: #ffd21f; --mascot-lline: #c99700; --mascot-eye: #ffffff; --mascot-pupil: #0d1b30; --mascot-soft: #8fb3fb; --mascot-spark: #f5bd00; --mascot-glow: #ffdc4a; --mascot-cap: #071a3b; --mascot-tassel: #ffd21f;
  --r: 18px; --r-s: 12px; --gap: 16px; --maxw: 1120px; --nav-h: 60px;
  /* Thang chữ dùng chung toàn app: mỗi vai một cặp cỡ/độ đậm. h1 tiêu đề trang (800), h2 tiêu đề mục và tiêu đề thẻ (700), body chữ thường (400, nhấn 700), meta chữ phụ (400), nho nhãn nhỏ nhất (400), so số liệu lớn trên thẻ (800). */
  --fs-h1: clamp(1.625rem, 1.25rem + 1.7vw, 2.25rem); --fs-h2: 1.125rem; --fs-body: 1rem; --fs-meta: 0.875rem; --fs-nho: 0.75rem; --fs-so: 1.75rem;
  --fw-h1: 800; --fw-h2: 700; --fw-body: 400; --fw-manh: 700;
  --font: "Be Vietnam Pro", "Dodo Du Phong", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --sh: 0 0 0 transparent; --sh-2: 0 10px 30px rgba(0, 0, 0, .35);
    --bg: #0b131d; --surface: #141f2c; --surface-2: #1c2a3a; --ink: #e8eef4; --ink-2: #a9b8c7; --line: #2e3f51;
    --accent: #8fb3fb; --accent-h: #bcd2ff; --accent-ink: #0b131d; --accent-soft: #0a2757;
    --yel: #ffd21f; --yel-ink: #0d1b30; --warm: #ffe985; --warm-soft: #2c2810; --warm-line: #7d6a12; --glow: #ffd21f; --xh-giam: #ffd21f; --dodo: #2f6fe6;
    --mascot-body: #2f6fe6; --mascot-deep: #8fb3fb; --mascot-wing: #0c44ad; --mascot-soft: #5a8df2; --mascot-spark: #ffdc4a; --mascot-glow: #ffd21f; --mascot-cap: #dbe7ff;
    --ok: #6fd29a; --ok-soft: #143424; --warn: #f0b860; --warn-soft: #3a2b10; --bad: #ff9a92; --bad-soft: #43201d;
  }
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 72px; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.55 var(--font); min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; overflow-wrap: break-word; padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom)); }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, fieldset { margin: 0; padding: 0; }
h1 { font-size: var(--fs-h1); line-height: 1.2; letter-spacing: -0.01em; text-wrap: balance; }
h2 { font-size: var(--fs-h2); line-height: 1.3; }
h3 { font-size: var(--fs-body); line-height: 1.35; }
h4 { font-size: var(--fs-body); }
a { color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--accent-h); }
b, strong { font-weight: 700; }
img, svg { max-width: 100%; }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
main:focus { outline: none; }
[hidden] { display: none !important; }
.ic { flex: none; vertical-align: -0.2em; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 8px; top: -60px; background: var(--accent); color: var(--accent-ink); padding: 10px 14px; border-radius: var(--r-s); z-index: 50; }
.skip:focus { top: 8px; color: var(--accent-ink); }
.meta { color: var(--ink-2); font-size: var(--fs-meta); }
.na { color: var(--ink-2); font-style: italic; }
.center { text-align: center; }
.plain { list-style: none; }
.lead { font-size: var(--fs-body); color: var(--ink-2); max-width: 62ch; }
.mt { margin-top: var(--gap); } .mt-lg { margin-top: 32px; }

/* Khung */
.top { background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; padding-top: env(safe-area-inset-top); }
.top__in { max-width: var(--maxw); margin: 0 auto; padding: 0 max(16px, env(safe-area-inset-left)) 0 max(16px, env(safe-area-inset-right)); height: 56px; display: flex; align-items: center; gap: 16px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-weight: 700; min-height: 44px; min-width: 0; white-space: nowrap; }
.brand b { color: var(--accent); }
.brand img { border-radius: 7px; flex: none; }
.brand { flex: 0 1 auto; overflow: hidden; } .brand > span { overflow: hidden; text-overflow: ellipsis; }
.top__acc { flex: none; }
.top__nav { display: none; margin-left: auto; gap: 2px; }
.top__nav .nav__a { padding: 0 12px; min-height: 44px; display: inline-flex; align-items: center; border-radius: var(--r-s); color: var(--ink-2); text-decoration: none; font-weight: 400; }
.top__nav .nav__a:hover { background: var(--surface-2); color: var(--ink); }
.top__nav .nav__a.is-on { color: var(--accent); background: var(--accent-soft); }
.top__acc { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; color: var(--ink); font-weight: 400; font-size: var(--fs-body); white-space: nowrap; }
.top__acc span { max-width: 9ch; overflow: hidden; text-overflow: ellipsis; }
.bottom { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: var(--surface); border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(5, 1fr); padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.bottom .nav__a { min-height: var(--nav-h); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: var(--fs-nho); color: var(--ink-2); text-decoration: none; font-weight: 400; min-width: 0; padding: 0 2px; text-align: center; line-height: 1.2; }
.bottom .nav__a.is-on { color: var(--accent); }
.bottom .nav__a.is-on .ic { stroke-width: 2.3; }
main { flex: 1; width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 20px max(16px, env(safe-area-inset-left)) 40px max(16px, env(safe-area-inset-right)); }
.foot { border-top: 1px solid var(--line); background: var(--surface); color: var(--ink-2); font-size: var(--fs-meta); }
.foot__in { max-width: var(--maxw); margin: 0 auto; padding: 20px 16px; display: grid; gap: 6px; }
.foot__links { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.foot__links a { min-height: 44px; display: inline-flex; align-items: center; }
.noscript { padding: 24px; text-align: center; }
.toast { position: fixed; left: 50%; bottom: calc(var(--nav-h) + 16px + env(safe-area-inset-bottom)); transform: translate(-50%, 20px); background: var(--ink); color: var(--bg); padding: 12px 16px; border-radius: var(--r-s); display: flex; gap: 14px; align-items: center; max-width: min(92vw, 460px); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 60; font-size: var(--fs-body); }
.toast.on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.toast a { color: inherit; font-weight: 700; white-space: nowrap; }

/* Bố cục */
.page { display: grid; gap: 20px; align-content: start; min-width: 0; }
.page > *, .stack > *, .grid > * { min-width: 0; }
.page--narrow { max-width: 720px; margin: 0 auto; width: 100%; }
.page--form { max-width: 480px; margin: 0 auto; width: 100%; }
.page__h { display: grid; gap: 8px; }
.stack { display: grid; gap: var(--gap); align-content: start; }
.stack--lg { gap: 28px; }
.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.row--end { justify-content: flex-end; } .row--between { justify-content: space-between; } .row--center { justify-content: center; }
.row--form { align-items: flex-end; flex-wrap: nowrap; } .row--form .field { flex: 1; min-width: 0; }
.row--3 { display: grid; grid-template-columns: repeat(3, 1fr); }
.grid { display: grid; gap: 12px; }
.cols { display: grid; gap: var(--gap); }
section > h2, .sec > h2 { margin-bottom: 10px; }
.sec { display: grid; gap: 10px; margin-top: 12px; } .sec > h2 { margin: 0; }
.card.stack > h2 { margin: 0; }

/* Nút, ô nhập */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 8px 16px; border-radius: var(--r-s); border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-weight: 700; text-decoration: none; cursor: pointer; text-align: center; line-height: 1.25; }
.btn:hover { border-color: var(--accent); color: var(--accent); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn--primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn--primary:hover { background: var(--accent-h); border-color: var(--accent-h); color: var(--accent-ink); }
.btn--lg { min-height: 52px; padding: 12px 22px; font-size: var(--fs-body); }
.btn--sm { padding: 6px 12px; font-size: var(--fs-meta); }
.btn--block { width: 100%; }
.btn--ghost { border-color: transparent; background: transparent; }
.btn--ghost:hover { background: var(--surface-2); }
.btn--danger { background: var(--bad); border-color: var(--bad); color: var(--surface); }
.btn--danger-o { color: var(--bad); border-color: var(--bad); }
.btn--save.is-on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.btn--save.is-on .ic { fill: currentColor; }
.back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--ink-2); text-decoration: none; font-weight: 400; justify-self: start; margin: -8px 0 -10px; }
.back:hover { color: var(--accent); }
.field { display: grid; gap: 6px; min-width: 0; }
.field > label, legend { font-weight: 700; font-size: var(--fs-body); }
fieldset { border: 0; display: grid; gap: 8px; min-width: 0; }
.in { width: 100%; min-height: 48px; padding: 10px 12px; border: 1px solid #8494a5; border-radius: var(--r-s); background: var(--surface); color: var(--ink); font-size: var(--fs-body); min-width: 0; }
.in::placeholder { color: var(--ink-2); opacity: .8; }
.in:focus-visible { outline-offset: 0; border-color: var(--accent); }

.in--s { text-align: center; padding: 10px 4px; }
select.in { appearance: auto; }
.hint { color: var(--ink-2); font-size: var(--fs-meta); }
.err { color: var(--bad); font-weight: 700; font-size: var(--fs-body); } .err:empty { display: none; }
.check { display: flex; gap: 12px; align-items: flex-start; min-height: 44px; padding: 8px 0; cursor: pointer; }
.check input { width: 22px; height: 22px; flex: none; margin: 2px 0 0; accent-color: var(--accent); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; min-height: 44px; padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-weight: 400; font-size: var(--fs-body); }
.chip input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.chip input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }

/* Khối chung */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 18px; }
.note { display: flex; gap: 10px; align-items: flex-start; color: var(--ink-2); font-size: var(--fs-meta); background: var(--surface-2); padding: 12px 14px; border-radius: var(--r-s); }
.note .ic { margin-top: 2px; }
.callout { display: flex; gap: 12px; padding: 14px 16px; border-radius: var(--r-s); background: var(--warn-soft); border-left: 4px solid var(--warn); }
.callout > .ic { color: var(--warn); margin-top: 2px; }
.callout__t { font-weight: 700; }
.empty { text-align: center; padding: 32px 16px; border: 1px dashed var(--line); border-radius: var(--r); display: grid; gap: 10px; justify-items: center; background: var(--surface); }
.empty__t { font-weight: 700; font-size: var(--fs-body); }
.empty__d { color: var(--ink-2); max-width: 52ch; }
.empty--err .ic { color: var(--bad); }
.empty--inline { text-align: left; justify-items: start; padding: 16px; }
.sk-wrap { display: grid; gap: 12px; }
.sk { height: 76px; border-radius: var(--r); background: linear-gradient(90deg, var(--surface-2) 25%, var(--line) 50%, var(--surface-2) 75%); background-size: 200% 100%; animation: sk 1.3s linear infinite; }
.sk--line { display: inline-block; height: 1em; width: 14em; max-width: 100%; border-radius: 4px; vertical-align: middle; }
@keyframes sk { to { background-position: -200% 0; } }
.list { padding-left: 1.2em; display: grid; gap: 6px; }
.tags { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.tags li { background: var(--surface-2); border-radius: 999px; padding: 4px 12px; font-size: var(--fs-meta); }
.tags--lk li { padding: 0; background: none; }
.tags--lk a { display: inline-flex; align-items: center; min-height: 44px; padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); text-decoration: none; font-size: var(--fs-meta); }
.tags--lk a:hover { border-color: var(--accent); color: var(--accent); }
.tags--lk a:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

  

.badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: var(--fs-nho); font-weight: 400; white-space: nowrap; justify-self: start; }
.badge--nguon_truong { background: var(--ok-soft); color: var(--ok); }
.badge--nguon_bao_chi { background: var(--accent-soft); color: var(--accent); }
.badge--chua_xac_minh { background: var(--warn-soft); color: var(--warn); }
.lvl { display: inline-flex; padding: 3px 10px; border-radius: 999px; font-size: var(--fs-nho); font-weight: 400; white-space: nowrap; flex: none; }
.lvl--an_toan { background: var(--ok-soft); color: var(--ok); } .lvl--phu_hop { background: var(--accent-soft); color: var(--accent); } .lvl--thu_suc { background: var(--warn-soft); color: var(--warn); }
.src { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-meta); min-height: 28px; }

.emo { flex: none; width: 44px; height: 44px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-size: 1.35rem; font-weight: 700; line-height: 1; }

.entries { display: grid; gap: 12px; }
.entry { display: flex; gap: 14px; align-items: center; padding: 18px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); text-decoration: none; color: var(--ink); min-height: 96px; }
.entry:hover { border-color: var(--accent); color: var(--ink); }
.entry:hover > .ic:last-child { color: var(--accent); transform: translateX(3px); }
.entry > .ic:last-child { color: var(--ink-2); transition: transform .15s; }
.entry__i { flex: none; width: 52px; height: 52px; border-radius: 12px; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; }
.entry__b { display: grid; gap: 3px; flex: 1; min-width: 0; }
.entry__t { font-weight: 700; font-size: var(--fs-h2); line-height: 1.3; }
.entry__d { color: var(--ink-2); font-size: var(--fs-body); }

.scope { color: var(--ink-2); font-size: var(--fs-meta); }
.scope b { color: var(--ink); font-variant-numeric: tabular-nums; }

  

/* Thẻ nhóm ngành */
.gcard { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); text-decoration: none; color: var(--ink); min-height: 68px; text-align: left; cursor: pointer; width: 100%; }
.gcard:hover, .gcard.is-on { border-color: var(--accent); color: var(--ink); }
.gcard.is-on { background: var(--accent-soft); }
.gcard__b { display: grid; flex: 1; min-width: 0; gap: 2px; } .gcard__t { font-weight: 700; line-height: 1.3; } .gcard__d { color: var(--ink-2); font-size: var(--fs-meta); }
.gcard > .ic { color: var(--ink-2); }

/* Thẻ kết quả */
.rc { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; display: grid; gap: 10px; align-content: start; border-top: 3px solid var(--line); }
.rc--an_toan { border-top-color: var(--ok); } .rc--phu_hop { border-top-color: var(--accent); } .rc--thu_suc { border-top-color: var(--warn); }

.rc__ct { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); font-size: var(--fs-nho); font-weight: 400; vertical-align: middle; max-width: 100%; overflow-wrap: anywhere; }
.rc__s a { color: var(--ink); font-weight: 400; }
.rc__d { display: flex; align-items: center; gap: 14px; padding: 10px 12px; background: var(--surface-2); border-radius: var(--r-s); }
.spark { flex: none; overflow: visible; } .spark__l { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.spark__d { fill: var(--surface-2); stroke: var(--accent); stroke-width: 2; } .spark__d--last { fill: var(--accent); }

.rc__cl { font-size: var(--fs-body); } .rc__cl b { font-variant-numeric: tabular-nums; }
.rc__f { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 2px; }

.invite { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 14px 16px; border: 1px solid var(--accent); background: var(--accent-soft); border-radius: var(--r); flex-wrap: wrap; }
.invite__t { font-weight: 700; } .invite__d { color: var(--ink-2); font-size: var(--fs-meta); }
.invite > div:first-child { flex: 1 1 220px; min-width: 0; }
.invite__a { display: flex; gap: 4px; align-items: center; }

/* Trắc nghiệm, wizard */
.quiz { display: grid; gap: 20px; }

.opt { display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 10px 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); cursor: pointer; text-align: left; font-weight: 400; font-size: var(--fs-body); }
.opt:hover { border-color: var(--accent); }
.opt.is-on { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.opt kbd { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 6px; font: 600 0.85rem var(--font); color: var(--ink-2); background: var(--surface-2); }
.opt.is-on kbd { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

.sugg { list-style: none; display: grid; gap: 12px; margin-bottom: 10px; }
.sugg > li { display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: start; }
.sugg__i { width: 28px; height: 28px; margin-top: 20px; border-radius: 50%; background: var(--surface-2); display: grid; place-items: center; font-weight: 400; font-size: var(--fs-meta); color: var(--ink-2); }
.sugg__r { margin: 6px 4px 0; }
.hbars { list-style: none; display: grid; gap: 10px; }
.hbar__top { display: flex; justify-content: space-between; gap: 10px; font-size: var(--fs-meta); }
.hbar__n { min-width: 0; } .hbar__v { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; } .hbar__p { font-weight: 400; color: var(--ink-2); }
.hbar__track { height: 10px; background: var(--surface-2); border-radius: 4px; margin-top: 4px; overflow: hidden; }
.hbar__fill { height: 100%; background: var(--accent); border-radius: 0 4px 4px 0; min-width: 2px; }
.hbars:has(.hbar--on) .hbar:not(.hbar--on) .hbar__fill { background: var(--ink-2); opacity: .45; }
.hbar--on .hbar__n { font-weight: 700; }

.opts { display: grid; gap: 10px; }

  
.tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 12px; position: sticky; top: calc(56px + env(safe-area-inset-top)); background: var(--bg); padding: 8px 0; z-index: 5; }
.tab { min-height: 52px; border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-s); cursor: pointer; font-weight: 700; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.2; padding: 4px; border-bottom-width: 3px; font-size: var(--fs-body); }
.tab__n { font-size: var(--fs-nho); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.tab--an_toan.is-on { border-color: var(--ok); background: var(--ok-soft); color: var(--ok); }
.tab--phu_hop.is-on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.tab--thu_suc.is-on { border-color: var(--warn); background: var(--warn-soft); color: var(--warn); }
.tab.is-on .tab__n { color: inherit; }
[role="tabpanel"] { display: grid; gap: 12px; } [role="tabpanel"]:focus-visible { outline-offset: 6px; }
 
.fbar { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* Accordion */
.accs { display: grid; gap: 8px; }
.acc { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.acc > summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 52px; padding: 10px 16px; cursor: pointer; font-weight: 700; border-radius: var(--r); }
.acc > summary::-webkit-details-marker { display: none; }
.acc > summary > span { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.acc > summary > .ic { transition: transform .2s; color: var(--ink-2); }
.acc[open] > summary > .ic { transform: rotate(180deg); }
.acc__b { padding: 4px 16px 16px; display: grid; gap: 10px; }
.acc--sub { background: var(--surface-2); border-color: transparent; } .acc--sub > summary { font-weight: 700; min-height: 44px; }
.faq { display: grid; gap: 8px; }
.ghead { display: flex; gap: 14px; align-items: flex-start; } .ghead > div { display: grid; gap: 8px; min-width: 0; } .ghead .emo { width: 56px; height: 56px; font-size: 1.7rem; }
.jobs, .cites { list-style: none; display: grid; gap: 12px; }
.jobs li, .cites li { padding-left: 14px; border-left: 3px solid var(--line); display: grid; gap: 2px; }
.jobs__t { font-weight: 700; }

/* Tìm kiếm */
.search { display: flex; gap: 8px; }
.search__w { position: relative; flex: 1; min-width: 0; }
.search__w > .ic { position: absolute; left: 12px; top: 14px; color: var(--ink-2); pointer-events: none; }
.in--search { padding-left: 40px; }
.sug { position: absolute; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: 4px; list-style: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-s); z-index: 15; max-height: 60vh; overflow: auto; box-shadow: 0 6px 20px rgba(0, 0, 0, .12); }
.sug li { display: flex; gap: 10px; align-items: center; padding: 8px 10px; min-height: 48px; border-radius: 6px; cursor: pointer; }
.sug li.is-on, .sug li:hover { background: var(--accent-soft); }
.sug__k { flex: none; width: 5.2em; font-size: var(--fs-nho); color: var(--ink-2); font-weight: 400; }
.sug__b { display: grid; min-width: 0; } .sug__t { font-weight: 700; line-height: 1.3; } .sug__p { font-size: var(--fs-meta); color: var(--ink-2); }
.scard { position: relative; display: grid; gap: 4px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); color: var(--ink); height: 100%; align-content: start; }
.scard:hover { border-color: var(--accent); }
.scard__t { font-weight: 700; font-size: var(--fs-body); line-height: 1.35; color: var(--ink); text-decoration: none; }
.scard__t::after { content: ""; position: absolute; inset: 0; border-radius: var(--r); }
.scard .src { position: relative; z-index: 1; }
.fee { font-size: var(--fs-body); } .fee b { font-variant-numeric: tabular-nums; } .fee__k { color: var(--ink-2); }

.scard .badge { margin-top: 4px; }

/* Trang trường */
.shead { display: grid; gap: 8px; }
.xm { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; font-size: var(--fs-meta); color: var(--ink-2); margin-top: 4px; }
.xm p { flex: 1 1 240px; }
.card--fee { border-left: 4px solid var(--accent); }
.fees { list-style: none; display: grid; gap: 12px; }
.fees li { display: grid; grid-template-columns: 3.4em 1fr; gap: 12px; align-items: start; }
.fees__y { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink-2); padding-top: 1px; }
.fees li.is-new .fees__y { color: var(--accent); } .fees__v { font-weight: 700; font-size: var(--fs-body); font-variant-numeric: tabular-nums; } .fees li.is-new .fees__v { font-size: var(--fs-h2); line-height: 1.3; } .fees__d { color: var(--ink-2); font-size: var(--fs-body); }
.mtable { width: 100%; border-collapse: collapse; }
.mtable thead { display: none; }
.mtable tbody { display: grid; gap: 10px; }
.mrow { display: grid; grid-template-columns: 1fr 1fr; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 4px 14px 12px; gap: 4px 12px; }
.mrow.is-open { border-color: var(--accent); border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.mrow td { padding: 0; display: grid; align-content: start; font-size: var(--fs-meta); min-width: 0; }
.mrow td[data-th]::before { content: attr(data-th); font-size: var(--fs-nho); color: var(--ink-2); }
.mrow td.mrow__n { grid-column: 1 / -1; } .mrow td.mrow__n::before { display: none; }
.mrow td.num { grid-column: 1 / -1; display: block; } .mrow td.num::before { display: block; }
.mrow td.num b { font-size: var(--fs-h2); font-variant-numeric: tabular-nums; }
.mbtn { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; min-height: 48px; background: none; border: 0; padding: 4px 0; cursor: pointer; text-align: left; font-weight: 700; font-size: var(--fs-body); color: var(--accent); min-width: 0; } .mbtn > span { min-width: 0; overflow-wrap: anywhere; }
.mbtn .ic { transition: transform .2s; } .mbtn[aria-expanded="true"] .ic { transform: rotate(180deg); }
.mdrow { display: block; margin-top: -11px; background: var(--surface); border: 1px solid var(--accent); border-top: 0; border-radius: 0 0 var(--r) var(--r); }
.mdrow td { display: block; padding: 4px 14px 16px; }
.mt-empty td { display: block; padding: 20px; text-align: center; color: var(--ink-2); }
.mdetail { display: grid; gap: 12px; border-top: 1px dashed var(--line); padding-top: 12px; }
.mcharts { display: grid; gap: 12px; }
.mchart { background: var(--surface-2); border-radius: var(--r-s); padding: 12px; display: grid; gap: 8px; align-content: start; }
.ychart { width: 100%; max-width: 360px; height: auto; justify-self: center; overflow: visible; }
.ychart__ax { stroke: var(--line); stroke-width: 1; } .ychart__l { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ychart__d { fill: var(--accent); stroke: var(--surface-2); stroke-width: 2; }
.ychart__v { fill: var(--ink); font-size: 13px; font-weight: 700; } .ychart__x { fill: var(--ink-2); font-size: 12px; }
.ychart__na { fill: var(--ink-2); font-size: 11px; font-style: italic; } .ychart__miss { stroke: var(--line); stroke-dasharray: 3 4; }

 

/* Tài khoản, quản trị, trang tĩnh */
.savedl { display: grid; gap: 8px; }
.saved { display: flex; gap: 8px; align-items: center; border: 1px solid var(--line); border-radius: var(--r-s); padding: 4px 4px 4px 14px; background: var(--surface); }
.saved a { flex: 1; min-width: 0; display: grid; text-decoration: none; color: var(--ink); padding: 6px 0; min-height: 44px; align-content: center; }
.saved__t { font-weight: 700; }
.hist { display: grid; gap: 2px; } .hist li { display: flex; justify-content: space-between; gap: 12px; align-items: center; min-height: 44px; border-bottom: 1px solid var(--line); } .hist li:last-child { border: 0; } .hist a { min-width: 0; padding: 6px 0; } .hist .meta { white-space: nowrap; }
.tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 14px; display: flex; flex-direction: column-reverse; gap: 2px; }
.tile dt { color: var(--ink-2); font-size: var(--fs-meta); } .tile dd { font-size: var(--fs-so); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; }
.bars { position: relative; } .bars svg { width: 100%; height: auto; display: block; }
.bars__g { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 4; } .bars__ax { stroke: var(--ink-2); stroke-width: 1; }
.bars__t { fill: var(--ink-2); font-size: 11px; } .bars__b { fill: var(--accent); }
.bars__hit { fill: transparent; outline: none; } .bars__hit:hover, .bars__hit:focus { fill: var(--accent); fill-opacity: .1; }
.tip { position: absolute; top: 0; transform: translateX(-50%); background: var(--ink); color: var(--bg); padding: 4px 10px; border-radius: 6px; font-size: var(--fs-meta); white-space: nowrap; pointer-events: none; }
.tscroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.utable { border-collapse: collapse; width: 100%; font-size: var(--fs-meta); white-space: nowrap; }
.utable th, .utable td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--line); }
.utable th { background: var(--surface-2); font-weight: 700; position: sticky; top: 0; } .utable tr:last-child td { border-bottom: 0; }
.dlg { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); color: var(--ink); padding: 22px; max-width: min(92vw, 420px); }
.dlg::backdrop { background: rgba(0, 0, 0, .5); } .dlg h2 { margin-bottom: 8px; } .dlg p { color: var(--ink-2); margin-bottom: 18px; }
.prose { gap: 24px; } .prose__s { display: grid; gap: 10px; } .prose p, .prose li { max-width: 68ch; }
.legend { display: grid; gap: 6px; } .legend dt { margin-top: 8px; } .legend dd { color: var(--ink-2); }

.tl { list-style: none; display: grid; gap: 14px; border-left: 2px solid var(--line); padding-left: 16px; margin-left: 6px; }
.tl li { position: relative; display: grid; gap: 2px; } .tl li::before { content: ""; position: absolute; left: -23px; top: 7px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); border: 2px solid var(--surface); }
.tl__t { font-weight: 700; }

/* Từ 600px */
@media (min-width: 600px) {
  .grid--2, .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .tiles { grid-template-columns: repeat(4, 1fr); }
  .fbar { grid-template-columns: repeat(4, 1fr); } .fbar--2 { grid-template-columns: repeat(2, 1fr); }
   
  .mcharts { grid-template-columns: repeat(2, 1fr); }
  .cites--grid { grid-template-columns: repeat(2, 1fr); }
  
  .opts { grid-template-columns: 1fr 1fr; }
}
/* Từ 760px: bảng ngành thành bảng thật */
@media (min-width: 760px) {
  .mtable thead { display: table-header-group; } .mtable tbody { display: table-row-group; }
  .mtable { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); border-collapse: separate; border-spacing: 0; overflow: hidden; }
  .mtable th { text-align: left; padding: 10px 14px; font-size: var(--fs-meta); color: var(--ink-2); background: var(--surface-2); font-weight: 400; }
  .mtable .num { text-align: right; }
  .mrow { display: table-row; border: 0; padding: 0; }
  .mrow td { display: table-cell; padding: 6px 14px; border-top: 1px solid var(--line); vertical-align: middle; align-content: normal; }
  .mrow td.num { display: table-cell; white-space: nowrap; }
  .mrow td[data-th]::before, .mrow td.num::before { display: none; }
  .mrow.is-open td { background: var(--accent-soft); }
  .mdrow { display: table-row; margin: 0; border: 0; } .mdrow td { display: table-cell; padding: 6px 14px 18px; }
  .mdetail { border-top: 0; }
  .mbtn { font-size: var(--fs-body); }
}
/* Từ 900px: thanh trên thay thanh dưới */
@media (min-width: 900px) {
  body { padding-bottom: 0; }
  .bottom { display: none; }
  .top__nav { display: flex; } .top__acc { margin-left: 8px; }
  .top__in { height: 64px; }
  main { padding-top: 32px; padding-bottom: 64px; }
  .toast { bottom: 24px; }
  .entries { grid-template-columns: repeat(3, 1fr); }
  .entry { flex-direction: column; align-items: flex-start; padding: 22px; gap: 16px; }
  .entry > .ic:last-child { margin-top: auto; }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .cols { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; gap: 24px; }
  
  .mcharts { grid-template-columns: repeat(3, 1fr); }
  .tabs { top: 64px; }
  
  .page { gap: 24px; }
}
@media (max-width: 359px) {
  .entry { padding: 14px 12px; gap: 10px; } .entry__i { width: 44px; height: 44px; }
  .rc__d { gap: 8px; padding: 8px; }
  .search .btn { padding: 8px 12px; }
  .brand span { font-size: var(--fs-meta); }
  .top__acc span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .top__acc { padding: 0; width: 44px; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media (forced-colors: active) { .hbar__fill { background: Highlight; } .btn, .chip span, .opt { border: 1px solid ButtonText; } }

/* ===== Bạn đồng hành Đomđóm ===== */
.dom { flex: none; overflow: visible; }
.dom__glow { fill: var(--glow); opacity: .28; transform-origin: 48px 66px; }
.say--lg .dom__glow { animation: dom-glow 3.2s ease-in-out infinite; }

 

 

.dom__b { transform-origin: 48px 48px; }
.say--lg .dom__b { animation: dom-bob 3.6s ease-in-out infinite; }
.dom__eyes { transform-origin: 48px 43px; }
.say--lg .dom__eyes { animation: dom-blink 5s infinite; }
.dom--nghe .dom__b, .say--lg .dom--nghe .dom__b { transform: rotate(-5deg); animation: none; }
@keyframes dom-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2.5px); } }
@keyframes dom-blink { 0%, 94%, 100% { transform: scaleY(1); } 96.5% { transform: scaleY(.1); } }
@keyframes dom-glow { 0%, 100% { opacity: .22; transform: scale(1); } 50% { opacity: .4; transform: scale(1.08); } }

.say { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: end; animation: say-in .28s ease-out both; }
.say__a { align-self: end; line-height: 0; }
.say__b { position: relative; background: var(--warm-soft); border: 1px solid var(--warm-line); border-radius: 16px 16px 16px 4px; padding: 12px 14px; display: grid; gap: 6px; justify-self: start; max-width: 62ch; min-width: 0; }
.say__b p { max-width: none; } .say__b .meta { color: var(--ink-2); }
.say__b b { font-variant-numeric: tabular-nums; }
.say--lg .say__b { padding: 16px 18px; gap: 8px; }
.say--lg .say__b > p:first-of-type { font-size: var(--fs-body); }
.say__b h1 { font-size: var(--fs-h1); }
.say__b .row { margin-top: 4px; }
.say--joy .say__a { position: relative; }
.say--joy .say__a::after { content: ""; position: absolute; inset: 10%; border-radius: 50%; border: 2px solid var(--glow); animation: joy 1.4s ease-out 1 both; pointer-events: none; }
@keyframes joy { from { transform: scale(.6); opacity: .9; } to { transform: scale(1.9); opacity: 0; } }
@keyframes say-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Bản đồ hành trình */
.jmap ol { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; counter-reset: c; }
.jmap__i { position: relative; }
.jmap__i + .jmap__i::before { content: ""; position: absolute; top: 21px; right: 50%; width: 100%; height: 3px; background: var(--line); z-index: 0; }
.jmap__i--done + .jmap__i::before { background: var(--accent); }
.jmap__i a { position: relative; z-index: 1; display: grid; justify-items: center; gap: 4px; text-align: center; text-decoration: none; color: var(--ink-2); padding: 0 2px 4px; min-height: 44px; }
.jmap__c { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 2px solid var(--line); color: var(--ink-2); }
.jmap__i--done .jmap__c { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.jmap__i--now .jmap__c { border-color: var(--glow); background: var(--warm-soft); color: var(--warm); box-shadow: 0 0 0 4px color-mix(in srgb, var(--glow) 30%, transparent); }
.jmap__t { font-weight: 400; font-size: var(--fs-meta); color: var(--ink); line-height: 1.2; }
.jmap__d { font-size: var(--fs-nho); line-height: 1.25; display: none; }
.jmap__i--now .jmap__d { color: var(--warm); font-weight: 700; display: block; }
.jmap--s .jmap__c { width: 30px; height: 30px; } .jmap--s .jmap__i + .jmap__i::before { top: 14px; height: 2px; } .jmap--s .jmap__t { font-size: var(--fs-nho); font-weight: 400; }
.jmap--s .jmap__i a { min-height: 44px; }
.jwrap { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 10px 12px; display: grid; gap: 12px; }
.jwrap > h2 { padding: 0 8px; font-size: var(--fs-body); margin: 0; }

.portrait { display: grid; gap: 10px; }
.portrait__c { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--glow); border-radius: var(--r); padding: 14px 16px; display: grid; gap: 4px; }
.portrait__c h3 { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.portrait__c h3 span { font-size: var(--fs-nho); font-weight: 400; color: var(--ink-2); white-space: nowrap; }
.policy { display: inline-block; font-size: var(--fs-nho); font-weight: 400; padding: 2px 8px; border-radius: 999px; background: var(--warm-soft); color: var(--warm); border: 1px solid var(--warm-line); margin-bottom: 4px; justify-self: start; }

.entry__i { background: var(--accent); }
.entry:nth-child(1) .entry__i { background: var(--warm-soft); color: var(--warm); border: 1px solid var(--warm-line); }
@media (min-width: 600px) { .jmap__d { display: block; } .jwrap { padding: 20px 16px 16px; } }
@media (max-width: 359px) { .say { gap: 6px; } .say__a .dom { width: 40px; height: 40px; } .say--lg .say__a .dom { width: 52px; height: 52px; } .say__b { padding: 10px 12px; }  .jmap__t { font-size: var(--fs-nho); } }

.toast__dom { display: flex; align-items: center; gap: 10px; }

.quiz .say__b { width: 100%; max-width: none; justify-self: stretch; }

.btn:active, .gcard:active, .entry:active, .opt:active, .tab:active { background: var(--surface-2); }
.btn--primary:active { background: var(--accent-h); }
.in[aria-invalid="true"] { border-color: var(--bad); box-shadow: 0 0 0 1px var(--bad); }
.emo .ic { stroke-width: 1.8; }
@media (max-width: 599px) {
  .say--lg { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .say--lg .say__a { justify-self: start; margin-left: 6px; }
  .say--lg .say__a .dom { width: 60px; height: 60px; }
  .say--lg .say__b { border-radius: 4px 16px 16px 16px; justify-self: stretch; }
}

/* ===== Đợt 3: xanh dương và vàng, sinh động hơn ===== */
.page { animation: page-in .26s ease-out both; }
@keyframes page-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.btn, .gcard, .entry, .chip span, .tick, .tab, .scard { transition: background-color .15s, border-color .15s, box-shadow .15s, transform .08s; }
.btn:active, .chip input:active + span, .tab:active { transform: translateY(1px); }

.entry { border-top: 4px solid var(--accent); }
.entry:nth-child(1) { border-top-color: var(--yel); }
.entry:nth-child(1) .entry__i { background: var(--yel); color: var(--yel-ink); border: 0; }

.entry:hover { box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 14%, transparent); }
.scope b { font-size: 1.1em; border-bottom: 3px solid var(--yel); }
.tile { border-top: 4px solid var(--yel); }
.card--fee { border-left-color: var(--yel); }
.fees li.is-new .fees__y { background: var(--yel); color: var(--yel-ink); border-radius: 6px; padding: 1px 6px; text-align: center; }
.portrait__c { border-left-color: var(--yel); }

.gcard.is-on, .opt.is-on { background: var(--warm-soft); border-color: var(--accent); }
.emo { background: var(--accent-soft); color: var(--accent); }
.gcard:hover .emo { background: var(--yel); color: var(--yel-ink); }
.jmap__i + .jmap__i::before { height: 6px; top: 19px; background: radial-gradient(circle, var(--line) 2.5px, transparent 3px) 0 50% / 12px 6px repeat-x; }
.jmap__i--done + .jmap__i::before { background: radial-gradient(circle, var(--glow) 2.5px, transparent 3px) 0 50% / 12px 6px repeat-x; }
.jmap--s .jmap__i + .jmap__i::before { top: 12px; height: 6px; }
.jmap__i--now .jmap__c { background: var(--yel); border-color: var(--yel); color: var(--yel-ink); box-shadow: 0 0 0 4px color-mix(in srgb, var(--yel) 30%, transparent); }
.jmap__i--now .jmap__d { color: var(--warm); }
.policy { background: var(--warm-soft); color: var(--warm); border-color: var(--warm-line); }
.badge--chua_xac_minh { background: var(--warm-soft); color: var(--warm); border: 1px solid var(--warm-line); }
.empty .dom { margin-bottom: 2px; }
.is-loading { opacity: .55; transition: opacity .15s; }

 

 

.chip input:checked + span { box-shadow: inset 0 -3px 0 var(--yel); }
.ticks { display: grid; gap: 8px; }
.tick { position: relative; display: flex; gap: 12px; align-items: center; min-height: 52px; padding: 10px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); cursor: pointer; }
.tick input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }

.tick__t { font-weight: 400; line-height: 1.35; }
.tick:hover { border-color: var(--accent); }
.tick:has(input:checked) { background: var(--warm-soft); border-color: var(--warm-line); }

.tick:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }
.tickbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; position: sticky; top: calc(56px + env(safe-area-inset-top)); z-index: 6; background: var(--bg); padding: 8px 0; }
.tickbar h2 { margin: 0; flex: 1 1 200px; } .tickbar__n { font-weight: 700; color: var(--ink); background: var(--yel); color: var(--yel-ink); padding: 3px 10px; border-radius: 999px; }

 

/* Xu hướng điểm chuẩn: mũi tên + chữ, hai màu trung tính (xanh dương, vàng), không dùng xanh lá/đỏ */
.xh { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: var(--fs-meta); font-weight: 400; line-height: 1.5; white-space: nowrap; }
.xh--tang { background: var(--accent-soft); color: var(--accent); }
.xh--giam { background: var(--warm-soft); color: var(--warm); border: 1px solid var(--warm-line); padding: 1px 8px; }
.xh--giu, .xh--thieu { background: var(--surface-2); color: var(--ink-2); }
.xh--thieu { font-weight: 400; font-style: italic; }

.mrow__xh { display: block; margin-top: 4px; }
.ychart__l { stroke-width: 3; }
.ychart__l--tang { stroke: var(--accent); }
.ychart__l--giam { stroke: var(--xh-giam); stroke-dasharray: 7 5; }
.ychart__l--giu { stroke: var(--ink-2); stroke-width: 2; }
.ychart__note { display: flex; gap: 6px; align-items: flex-start; }
.xhsum { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; display: grid; gap: 10px; }
.xhsum__bar { display: flex; gap: 2px; height: 14px; border-radius: 7px; overflow: hidden; }
.xhsum__seg { flex: 1 1 0; min-width: 6px; }
.xhsum__seg--tang { background: var(--accent); } .xhsum__seg--giam { background: var(--yel); } .xhsum__seg--giu { background: var(--ink-2); opacity: .5; }
.xhsum__l { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 20px; } .xhsum__l li { display: inline-flex; align-items: center; gap: 6px; } .xhsum__l b { font-size: var(--fs-h2); font-variant-numeric: tabular-nums; }

/* Mật khẩu */
.pw { position: relative; } .pw .in { padding-right: 52px; }
.pw__t { position: absolute; right: 2px; top: 2px; width: 44px; height: 44px; display: grid; place-items: center; background: none; border: 0; border-radius: var(--r-s); color: var(--ink-2); cursor: pointer; }
.pw__t:hover { color: var(--accent); background: var(--surface-2); }
.pwreq { display: flex; gap: 6px; align-items: center; font-size: var(--fs-meta); color: var(--ink-2); } .pwreq.is-ok { color: var(--ok); font-weight: 700; }
.invite--xm { background: var(--warm-soft); border-color: var(--warm-line); } .invite--xm .invite__t { display: flex; align-items: center; gap: 6px; }
.dlg form { margin-top: 4px; }

@media (min-width: 600px) { .ticks { grid-template-columns: 1fr 1fr; }    .fbar--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .tickbar { top: 64px; }   }
@media (max-width: 599px) { .fbar--3 { grid-template-columns: 1fr; } }

/* ===== Đợt 4: Soft UI có chiều sâu nhẹ + lưới bento. Be Vietnam Pro. ===== */
body { font-size: 16px; line-height: 1.6; background-image: radial-gradient(60rem 32rem at -10% -12%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 60%), radial-gradient(42rem 26rem at 108% -6%, color-mix(in srgb, var(--yel) 14%, transparent), transparent 62%); background-repeat: no-repeat; background-attachment: fixed; }
h1, h2, h3, h4 { font-weight: 800; letter-spacing: -0.022em; line-height: 1.24; }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); font-weight: 700; }
h3 { font-size: var(--fs-body); font-weight: 700; letter-spacing: -0.012em; }
b, strong, .btn, .field > label, legend { font-weight: 700; }
.lead { font-size: var(--fs-body); line-height: 1.6; }
.meta { font-size: var(--fs-meta); }
.num, .rc__big, .stat dd, .tile dd, .fb__diem { font-variant-numeric: tabular-nums; }
.top { background: color-mix(in srgb, var(--surface) 78%, transparent); -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px); border-bottom-color: color-mix(in srgb, var(--line) 70%, transparent); }
.brand { font-weight: 700; letter-spacing: -0.01em; }
.top__nav .nav__a { font-weight: 700; border-radius: 999px; padding: 0 14px; }
.top__nav .nav__a.is-on { background: var(--accent); color: var(--accent-ink); }
.top__acc { border-radius: 999px; background: var(--surface); box-shadow: var(--sh); }
.bottom { background: color-mix(in srgb, var(--surface) 86%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.bottom .nav__a { position: relative; font-weight: 700; }
.bottom .nav__a .ic, .bottom .nav__a span { position: relative; z-index: 1; }
.bottom .nav__a.is-on::before { content: ""; position: absolute; top: 7px; left: 50%; width: 52px; height: 30px; margin-left: -26px; border-radius: 999px; background: var(--yel); animation: pill-in .28s cubic-bezier(.2, .9, .3, 1.2) both; }
.bottom .nav__a.is-on { color: var(--ink); } .bottom .nav__a.is-on .ic { color: var(--yel-ink); }
@keyframes pill-in { from { transform: scaleX(.4); opacity: 0; } to { transform: none; opacity: 1; } }
.tick { border-color: color-mix(in srgb, var(--line) 80%, transparent); box-shadow: var(--sh); }
/* Thẻ không viền: chỉ nền trắng và bóng rất nhẹ trên nền trang */
.card, .rc, .gcard, .scard, .entry, .acc, .jwrap, .xhsum, .tile, .saved, .portrait__c, .mrow, .empty { border-color: transparent; box-shadow: var(--sh); }
.acc--sub, .empty { box-shadow: none; }
.entry:hover, .gcard:hover, .scard:hover, .rc:hover { box-shadow: var(--sh-2); transform: translateY(-1px); }
.btn { border-radius: 999px; min-height: 46px; padding: 8px 18px; }
.btn--primary { box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 28%, transparent); }
.btn--sm { min-height: 44px; padding: 6px 14px; }
 
.in { border-radius: 12px; border-color: color-mix(in srgb, var(--ink-2) 55%, transparent); }
.chip span { border-color: color-mix(in srgb, var(--line) 90%, transparent); }
.page { gap: 22px; }
.page__h--s h1 { font-size: var(--fs-h1); }
.stack--s { gap: 10px; }

.entry { border-top: 0; border-radius: 22px; padding: 20px 18px; position: relative; overflow: hidden; }
.entry::after { content: ""; position: absolute; right: -34px; top: -34px; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--yel) 40%, transparent) 0 3px, transparent 4px) 0 0 / 16px 16px; opacity: .55; pointer-events: none; }
.entry:nth-child(1) { background: var(--warm-soft); border-color: var(--warm-line); }
.entry:nth-child(2) { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.entry:nth-child(2) .entry__d { color: color-mix(in srgb, var(--accent-ink) 86%, transparent); }
.entry:nth-child(2) .entry__i { background: var(--accent-ink); color: var(--accent); }
.entry:nth-child(2) > .ic:last-child, .entry:nth-child(2):hover > .ic:last-child { color: var(--accent-ink); }
.entry:nth-child(2):hover { color: var(--accent-ink); }

.entry:nth-child(3) .entry__i { background: var(--accent-soft); color: var(--accent); }
.entry__t { font-weight: 700; font-size: var(--fs-h2); letter-spacing: -0.015em; }
.entry__i { border-radius: 16px; }
.scope { display: grid; gap: 8px; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.stat { background: var(--surface); border: 1px solid color-mix(in srgb, var(--line) 80%, transparent); border-radius: 16px; padding: 12px 14px; box-shadow: var(--sh); display: grid; gap: 0; }
.stat dd { font-size: var(--fs-h2); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.stat dd::after { content: ""; display: block; width: 28px; height: 4px; border-radius: 2px; background: var(--yel); margin: 4px 0 2px; }
.stat dt { color: var(--ink-2); font-size: var(--fs-meta); line-height: 1.3; }
.stats--s .stat dd { font-size: var(--fs-h2); }
.vai { margin-top: 2px; } .vai .chip span { min-height: 40px; padding: 4px 12px; font-size: var(--fs-meta); }
.say__b { border-radius: 20px 20px 20px 6px; box-shadow: var(--sh); }
.jwrap { border-radius: 22px; }

/* Thanh lọc gọn */
.fb { position: sticky; top: calc(56px + env(safe-area-inset-top)); z-index: 12; margin: -6px -16px 0; padding: 8px 16px; background: color-mix(in srgb, var(--bg) 88%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.fb__row { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 0; scroll-snap-type: x proximity; }
.fb__row::-webkit-scrollbar { display: none; }
.fb__it { display: inline-flex; align-items: center; flex: none; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh); scroll-snap-align: start; }
.fb__it.is-on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.fb__chip { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px 0 14px; background: none; border: 0; border-radius: 999px; font-weight: 700; font-size: var(--fs-body); color: inherit; cursor: pointer; white-space: nowrap; max-width: 62vw; }
.fb__v { overflow: hidden; text-overflow: ellipsis; }
.fb__chip .ic { opacity: .7; transition: transform .2s; } .fb__chip[aria-expanded="true"] .ic { transform: rotate(180deg); }
.fb__clr { width: 34px; height: 44px; margin-left: -8px; display: grid; place-items: center; background: none; border: 0; border-radius: 0 999px 999px 0; color: inherit; cursor: pointer; }
.fb__score { gap: 6px; padding: 0 12px 0 14px; min-height: 44px; border-color: var(--accent); box-shadow: var(--sh), inset 0 -3px 0 var(--yel); cursor: text; }
.fb__score.is-on { background: var(--surface); color: var(--ink); }
.fb__sl { font-weight: 700; font-size: var(--fs-body); color: var(--ink-2); } .fb__thang { color: var(--ink-2); font-size: var(--fs-meta); }
.fb__diem { width: 4.2em; border: 0; background: none; font: inherit; font-weight: 700; font-size: var(--fs-h2); color: var(--ink); padding: 6px 0; min-height: 40px; outline: none; }
.fb__score:focus-within { outline: 3px solid var(--accent); outline-offset: 2px; }
.fb__scrim { display: none; }
.fb__pop { position: fixed; left: var(--fb-left, 16px); top: var(--fb-top, 120px); width: min(360px, calc(100vw - 24px)); max-height: min(calc(100vh - var(--fb-top, 120px) - 16px), 520px); overflow: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--sh-2); z-index: 30; animation: pop-in .16s ease-out both; }
@keyframes pop-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.fb__ph { display: flex; justify-content: space-between; align-items: center; padding: 10px 8px 6px 16px; position: sticky; top: 0; background: var(--surface); z-index: 1; }
.fb__x { width: 44px; height: 44px; display: grid; place-items: center; background: none; border: 0; border-radius: 50%; color: var(--ink-2); cursor: pointer; }
.fb__pb { padding: 0 14px 14px; }
.fb__opts { display: grid; gap: 2px; }
.fb__opt { display: flex; gap: 10px; align-items: center; min-height: 46px; padding: 6px 8px; background: none; border: 0; border-radius: 12px; text-align: left; cursor: pointer; font-weight: 400; color: var(--ink); }
.fb__opt:hover { background: var(--surface-2); } .fb__opt.is-on { background: var(--warm-soft); font-weight: 700; }
.fb__ob { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--ink-2) 60%, transparent); display: grid; place-items: center; }
.fb__opt.is-on .fb__ob { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.fb__ot { display: block; line-height: 1.3; } .fb__od { display: block; font-size: var(--fs-nho); color: var(--ink-2); font-weight: 400; }
.fb__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.fb__g { position: relative; display: flex; gap: 8px; align-items: center; min-height: 52px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; font-size: var(--fs-meta); line-height: 1.25; font-weight: 400; }
.fb__g input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.fb__gi { flex: none; width: 30px; height: 30px; border-radius: 9px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; }
.fb__gt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fb__g:has(input:checked) { background: var(--warm-soft); border-color: var(--accent); font-weight: 700; }
.fb__g:has(input:checked) .fb__gi { background: var(--accent); color: var(--accent-ink); }
.fb__g:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }
.in--sm2 { min-height: 44px; font-size: var(--fs-body); }
.say--sum .say__b { padding: 10px 14px; gap: 4px; } .say--sum .say__b p { font-size: var(--fs-body); line-height: 1.5; }
@media (max-width: 699px) {
  .fb__scrim:not([hidden]) { display: block; position: fixed; inset: 0; background: rgba(8, 16, 30, .38); z-index: 28; }
  .fb__pop { position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: auto; max-height: 62vh; border-radius: 22px 22px 0 0; border-width: 1px 0 0; padding-bottom: env(safe-area-inset-bottom); z-index: 40; animation: sheet-in .2s ease-out both; }
  .fb__ph::before { content: ""; position: absolute; top: 6px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: var(--line); }
  .fb__ph { padding-top: 16px; }
}
@keyframes sheet-in { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }

/* Trắc nghiệm gọn: chip 2 đến 3 cột, thanh tóm tắt dính dưới */
.ticks { grid-template-columns: 1fr 1fr; gap: 6px; }
.tick { min-height: 56px; padding: 8px 10px; border-radius: 14px; gap: 0; }
.tick__t { font-size: var(--fs-meta); line-height: 1.3; font-weight: 400; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tick:has(input:checked) { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); box-shadow: inset 0 -4px 0 var(--yel); }
.tick:has(input:checked) .tick__t { font-weight: 700; }
.tickbar { position: static; padding: 0; }
.tnbar { position: sticky; bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 8px); z-index: 9; display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 8px 16px; border: 0; border-radius: 999px; background: var(--ink); color: var(--bg); font-weight: 400; font-size: var(--fs-meta); cursor: pointer; box-shadow: var(--sh-2); text-align: left; }
.tnbar__t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tnbar__a { flex: none; display: inline-flex; align-items: center; gap: 4px; background: var(--yel); color: var(--yel-ink); border-radius: 999px; padding: 4px 10px; font-size: var(--fs-meta); }

/* Thẻ kết quả: phân cấp rõ */
.rc { border-top: 0; border-radius: 20px; padding: 18px; gap: 12px; position: relative; }
.rc::before { content: ""; position: absolute; left: 18px; top: 0; width: 44px; height: 4px; border-radius: 0 0 4px 4px; background: var(--line); }
.rc--an_toan::before { background: var(--ok); } .rc--phu_hop::before { background: var(--accent); } .rc--thu_suc::before { background: var(--warn); }
.rc__n { font-size: var(--fs-h2); font-weight: 700; letter-spacing: -0.015em; line-height: 1.3; }
.rc__s a { font-weight: 400; color: var(--ink-2); text-decoration-color: color-mix(in srgb, var(--ink-2) 40%, transparent); }
.rc__big { flex: none; text-align: right; display: grid; justify-items: end; line-height: 1.1; }
.rc__big b { font-size: var(--fs-so); font-weight: 800; letter-spacing: -0.03em; color: var(--accent); }
.rc__big span { font-size: var(--fs-nho); color: var(--ink-2); white-space: nowrap; }
 
.rc__d { background: var(--surface-2); border-radius: 14px; padding: 8px 12px; }
 
.rc__cl { font-size: var(--fs-meta); color: var(--ink-2); } .rc__cl b { color: var(--ink); }
.fee { font-size: var(--fs-meta); }
.lvl, .xh, .badge { font-weight: 700; letter-spacing: 0; }

/* Trang trường: hồ sơ trường */
.shead__top { display: flex; gap: 14px; align-items: center; } .shead__top > div { min-width: 0; display: grid; gap: 2px; }
.shead__logo { flex: none; width: 64px; height: 64px; border-radius: 18px; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; font-weight: 700; font-size: var(--fs-body); letter-spacing: -0.01em; box-shadow: inset 0 -6px 0 var(--yel); text-align: center; line-height: 1.1; overflow: hidden; padding: 4px; }
.shead h1 { font-size: var(--fs-h1); }
.mrow { border-radius: 16px; }
.xhsum, .card--fee { border-radius: 20px; }
.acc { border-radius: 16px; } .acc > summary { border-radius: 16px; font-weight: 700; }
.tab { border-radius: 14px; font-weight: 700; }
.tabs { background: transparent; top: calc(56px + 64px + env(safe-area-inset-top)); }
.sug { border-radius: 16px; box-shadow: var(--sh-2); }

@media (min-width: 600px) { .ticks { grid-template-columns: repeat(3, 1fr); } .tick__t { font-size: var(--fs-meta); } }
@media (min-width: 760px) {
  .mtable { border-radius: 18px; box-shadow: var(--sh); }
  .mrow { box-shadow: none; border-radius: 0; } .mrow td { padding: 12px 14px; }
  .mtable tbody .mrow:nth-of-type(even) td { background: color-mix(in srgb, var(--surface-2) 45%, transparent); }
}
@media (min-width: 900px) {
  .fb { top: 64px; } .tabs { top: calc(64px + 64px); }
  .tnbar { bottom: 16px; max-width: 560px; margin: 0 auto; }
  .ticks { grid-template-columns: repeat(4, 1fr); }
  .home { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 16px; }
  .home > * { grid-column: 1 / -1; }
   .home > .jwrap { grid-column: 8 / -1; grid-row: 1; align-self: stretch; align-content: center; }
  .entries { gap: 16px; } .entry { padding: 26px 24px; min-height: 220px; }
  .stats { max-width: 620px; }
  .grid--2:has(> .rc) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 359px) { .fb { margin: -6px -16px 0; } .rc__big b { font-size: var(--fs-so); } .stat { padding: 10px; } .ticks { gap: 5px; } .tick__t { font-size: var(--fs-nho); } }

.bottom .nav__a { font-size: var(--fs-nho); white-space: nowrap; letter-spacing: -0.01em; }
.fb__score:focus-within { outline: none; box-shadow: 0 0 0 3px var(--accent), inset 0 -3px 0 var(--yel); }

.slogan { font-weight: 700; letter-spacing: -0.015em; font-size: var(--fs-body); color: var(--ink); justify-self: start; text-decoration: underline; text-decoration-color: var(--yel); text-decoration-thickness: .2em; text-underline-offset: .18em; text-decoration-skip-ink: none; }
.slogan--s { font-size: var(--fs-body); }

.brand span { font-weight: 700; font-size: var(--fs-h2); letter-spacing: -0.02em; }

.fees li { grid-template-columns: auto minmax(0, 1fr); } .fees__y { white-space: nowrap; }
.rc { display: flex; flex-direction: column; } .rc__f { margin-top: auto; padding-top: 4px; }
.shead__logo { font-size: var(--fs-meta); }
@media (min-width: 900px) {
  .home > .jwrap { align-self: start; } 

}

/* Đợt 5: nhân vật theo hình chuẩn của bộ nhận diện (không gian 240 x 240) */
.dom__glow { fill: var(--mascot-glow); transform-origin: 120px 182px; }
.dom__b { transform-origin: 120px 130px; } .dom__eyes { transform-origin: 120px 116px; }
.dom--nghe .dom__b, .say--lg .dom--nghe .dom__b { transform: none; animation: none; }
.say--lg .dom--nghe .dom__b { animation: dom-bob 3.6s ease-in-out infinite; }
@keyframes dom-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.pose { display: inline-block; line-height: 0; } .pose img { display: block; }
.brand__l, .brand__d { height: 32px; width: auto; display: block; border-radius: 0; } .brand__d { display: none; }
.lockup { height: 64px; width: auto; max-width: 100%; display: block; } .lockup--d { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .brand__l, :root:not([data-theme="light"]) .lockup--l { display: none; } :root:not([data-theme="light"]) .brand__d, :root:not([data-theme="light"]) .lockup--d { display: block; } }
:root[data-theme="dark"] .brand__l, :root[data-theme="dark"] .lockup--l { display: none; } :root[data-theme="dark"] .brand__d, :root[data-theme="dark"] .lockup--d { display: block; }

.who > summary { cursor: pointer; font-size: var(--fs-meta); font-weight: 400; color: var(--accent); min-height: 36px; display: flex; align-items: center; list-style: none; text-decoration: underline; text-underline-offset: 3px; }
.who > summary::-webkit-details-marker { display: none; } .who[open] > summary { margin-bottom: 6px; }

.tickbar { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
/* Thanh lọc: mép phải mờ dần để báo còn chip phía sau */
.fb__row { padding-right: 28px; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); }
@media (max-width: 599px) {

   

  .vai .chip span { min-height: 44px; padding: 4px 10px; font-size: var(--fs-meta); } .vai .chips { gap: 6px; } .vai legend { display: none; }
  .entries { gap: 8px; }
  .entry { padding: 10px 12px; min-height: 0; border-radius: 18px; gap: 12px; }
  .entry__i { width: 44px; height: 44px; border-radius: 13px; }
  .entry__t { font-size: var(--fs-body); } .entry__d { font-size: var(--fs-meta); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } 
  .entry::after { display: none; }
}

/* Đợt 6 */
.say { align-items: start; } .say__a { align-self: start; }
.say__b { border-radius: 6px 20px 20px 20px; position: relative; }
.say__b::before { content: ""; position: absolute; left: -7px; top: 16px; width: 12px; height: 12px; background: var(--warm-soft); border-left: 1px solid var(--warm-line); border-bottom: 1px solid var(--warm-line); transform: rotate(45deg); }

.brand__txt { font-weight: 700; font-size: var(--fs-h2); letter-spacing: -0.02em; color: var(--accent); }
.btn--save.is-on .ic { fill: none; }
.grid > .rc { height: 100%; }
@media (max-width: 599px) {
  .btn__dai { display: none; }
  .say--lg .say__b::before { display: none; }

  
}

 

/* ===== Đợt 7: thẻ kết quả gọn + tra tổ hợp dạng lưới ===== */
.rc { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 12px; border-radius: 18px; min-width: 0; }
.rc::before { left: 16px; width: 36px; }
.rc:hover { border-color: var(--accent); }
.rc__n { font-size: var(--fs-body); font-weight: 700; line-height: 1.3; padding-right: 44px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 0; }
.rc__link { color: inherit; text-decoration: none; } .rc__link::after { content: ""; position: absolute; inset: 0; border-radius: 18px; z-index: 1; }
.rc__link:focus-visible { outline: none; } .rc__link:focus-visible::after { outline: 3px solid var(--accent); outline-offset: 2px; }
.rc__s { font-size: var(--fs-meta); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 40px; } .rc__s b { color: var(--ink); font-weight: 700; }
.rc__sub { display: flex; align-items: center; gap: 6px; font-size: var(--fs-nho); color: var(--ink-2); min-width: 0; white-space: nowrap; overflow: hidden; }
.rc__sub > span:not(.rc__ct):not(.lvl) { overflow: hidden; text-overflow: ellipsis; }
.rc__sub .rc__ct { margin: 0; flex: 0 1 auto; max-width: 55%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-nho); padding: 1px 7px; }
.rc__sc { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; margin-top: 4px; }
.rc__big { display: inline-flex; align-items: baseline; gap: 5px; text-align: left; } .rc__big b { font-size: var(--fs-so); line-height: 1.15; letter-spacing: -0.03em; }
.xh--gon { padding: 1px 7px; font-size: var(--fs-nho); gap: 3px; align-self: center; position: relative; z-index: 2; }
.xh--gon.xh--thieu { padding: 1px 5px; }
.rc__cl { font-size: var(--fs-nho); font-weight: 400; color: var(--ink-2); background: var(--surface-2); border-radius: 999px; padding: 1px 8px; align-self: center; }
.rc__d { display: flex; align-items: center; gap: 8px; background: none; padding: 0; border-radius: 0; min-width: 0; }
.rc__d .spark { width: 48px; height: 20px; flex: none; }
.rc__yr { font-size: var(--fs-nho); color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rc__yr b { color: var(--ink); font-weight: 700; } .rc__yr i { font-style: italic; }
.rc__f { margin-top: auto; padding-top: 6px; border-top: 1px dashed var(--line); font-size: var(--fs-nho); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.btn--icon { position: absolute; top: 6px; right: 6px; z-index: 2; width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: 50%; border-color: transparent; background: transparent; box-shadow: none; color: var(--ink-2); }
.btn--icon:hover { background: var(--surface-2); color: var(--accent); border-color: transparent; }
.btn--icon.is-on { background: var(--yel); color: var(--yel-ink); border-color: var(--yel); } .btn--icon.is-on .ic { fill: currentColor; }
.grid--2:has(> .rc) { gap: 12px; }
@media (min-width: 900px) { .grid--2:has(> .rc) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1500px) { :root { --maxw: 1360px; } .grid--2:has(> .rc) { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Tra tổ hợp */
.thbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; } .thbar__i { width: min(100%, 240px); } .thbar .chip span { min-height: 44px; padding: 4px 12px; font-size: var(--fs-meta); }
.thg { display: grid; gap: 12px; } .thg__k h2 { font-size: var(--fs-nho); font-weight: 400; color: var(--ink-2); text-transform: none; margin-bottom: 6px; }
.thg__l { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.th { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); min-width: 0; }
.th__m { flex: none; min-width: 42px; text-align: center; padding: 3px 6px; border-radius: 8px; font-size: var(--fs-meta); font-variant-numeric: tabular-nums; background: var(--surface-2); color: var(--ink); }
.th--A .th__m { background: var(--accent); color: var(--accent-ink); } .th--B .th__m { background: var(--accent-soft); color: var(--accent); } .th--C .th__m { background: var(--yel); color: var(--yel-ink); } .th--D .th__m { background: var(--warm-soft); color: var(--warm); box-shadow: inset 0 0 0 1px var(--warm-line); }
.th__mon { font-size: var(--fs-nho); line-height: 1.25; color: var(--ink-2); min-width: 0; }
.th mark, .thg mark { background: var(--yel); color: var(--yel-ink); border-radius: 3px; padding: 0 1px; }
.ptg { display: grid; gap: 8px; } .ptg__c { border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; display: grid; gap: 2px; align-content: start; font-size: var(--fs-meta); }
@media (min-width: 600px) { .thg__l { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ptg { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) {
  .thg__l { grid-template-columns: repeat(4, minmax(0, 1fr)); } .ptg { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tl--2 { border-left: 0; padding-left: 0; margin-left: 0; gap: 0; } .tl--2 li { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--line); align-items: start; } .tl--2 li::before { display: none; }
  .tl--2 .tl__t { justify-self: start; background: var(--accent-soft); color: var(--accent); border-radius: 999px; padding: 2px 10px; font-size: var(--fs-meta); font-weight: 400; }
}

.tabs { padding: 4px 0; margin-bottom: 6px; } .tab { min-height: 44px; flex-direction: row; gap: 8px; border-bottom-width: 2px; } .tab__n { font-size: var(--fs-meta); }
.say--sum .who > summary { min-height: 28px; font-size: var(--fs-meta); } .say--sum .say__a .dom { width: 40px; height: 40px; }
.page:has(> .fb) { gap: 12px; } .page:has(> .fb) > .stack { gap: 10px; }
@media (max-width: 599px) { .page:has(> .fb) .page__h--s { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .say--sum .say__b { padding: 8px 12px; } .say--sum .say__b p { font-size: var(--fs-meta); } }
@media (min-width: 900px) { .page:has(> .fb) .page__h--s h1 { font-size: var(--fs-h1); } main:has(.fb) { padding-top: 20px; } }

@media (max-width: 599px) {
  .rc { padding: 12px 14px 10px; gap: 3px; } .rc__th { display: none; } .rc__big b { font-size: var(--fs-so); } .rc__sc { flex-wrap: nowrap; gap: 6px; margin-top: 2px; } .rc__cl, .xh--gon { white-space: nowrap; }
  .say--sum .say__b { gap: 2px; }
}

.ptg__ph { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .ptg .who > summary { min-height: 32px; font-size: var(--fs-meta); } .ptg .who p { font-size: var(--fs-meta); }

@media (max-width: 359px) { .rc__sc { flex-wrap: wrap; } .rc__yr { font-size: var(--fs-nho); } }

/* Đợt 8: phổ điểm */
.pd-w:empty { display: none; }
.pd { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink); cursor: pointer; text-align: left; font-size: var(--fs-meta); font-weight: 400; box-shadow: var(--sh); }
.pd:hover { border-color: var(--accent); } .pd > .ic { flex: none; color: var(--ink-2); }
.pd__t { flex: 1 1 auto; min-width: 0; }
.pd__bar { position: relative; flex: 0 0 72px; height: 8px; border-radius: 4px; background: var(--accent-soft); }
.pd__fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: var(--accent); }
.pd__dot { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--yel); border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--warm-line); }
.pd__goi { display: flex; align-items: center; gap: 6px; } .pd__kq { font-weight: 700; font-size: var(--fs-body); }
.pdc { width: 100%; max-width: 460px; height: auto; display: block; } .pdc-w { max-width: 460px; }
.pdc__g { stroke: var(--line); stroke-dasharray: 2 4; } .pdc__ax { stroke: var(--ink-2); } .pdc__t { fill: var(--ink-2); font-size: 10px; }
.pdc__l { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; } .pdc__a { fill: var(--accent-soft); opacity: .8; }
.pdc__m { stroke: var(--warm-line); stroke-width: 1.5; stroke-dasharray: 4 3; } .pdc__d { fill: var(--yel); stroke: var(--ink); stroke-width: 1.5; } .pdc__v { fill: var(--ink); font-size: 11px; font-weight: 700; }
.dlg--pd { width: min(94vw, 480px); padding: 0 16px 16px; } .dlg--pd .fb__ph { padding-left: 0; padding-right: 0; position: static; } .dlg--pd p { margin-bottom: 0; color: inherit; } .dlg--pd .meta { color: var(--ink-2); }
@media (max-width: 699px) { .dlg--pd { margin: auto 0 0; width: 100%; max-width: none; border-radius: 22px 22px 0 0; border-width: 1px 0 0; max-height: 86vh; } }

/* Đợt 9: đếm ngược kỳ thi, nhãn xác minh nhẹ */
.cd { display: flex; align-items: center; gap: 10px; justify-self: start; padding: 6px 14px 6px 8px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh); max-width: 100%; }

 .cd__s { display: block; font-size: var(--fs-nho); color: var(--ink-2); } .cd__0 { font-weight: 700; padding: 2px 6px; }
.xmn { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 5px; justify-self: start; min-height: 28px; padding: 2px 8px 2px 4px; margin-top: 2px; border: 0; border-radius: 999px; background: none; color: var(--ink-2); font-size: var(--fs-nho); cursor: pointer; }
.xmn:hover { background: var(--surface-2); color: var(--ink); }
@media (max-width: 599px) { .cd { padding: 4px 12px 4px 6px; }       }
@media (max-width: 599px) { .entries { gap: 6px; } .entry { padding: 7px 12px; } .entry__i { width: 40px; height: 40px; }  .home { gap: 14px; } }

/* Đợt 10 (kiểm toán v1) */
html { scroll-padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 16px); }
:focus-visible { scroll-margin-bottom: calc(var(--nav-h) + 24px); scroll-margin-top: 140px; }
main { min-height: 70vh; }
@media (max-width: 359px) { .bottom .nav__a { font-size: var(--fs-nho); letter-spacing: -0.02em; } .bottom .nav__a span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; } }
.tick__t { -webkit-line-clamp: 4; }

main h1, main h2, main h3, main p, main li, main td, main dd, main .say__b { overflow-wrap: anywhere; }
@media (max-width: 359px) { .rc__f, .rc__yr { white-space: normal; } .rc__s { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } }

/* ===== Đợt 11: trang chủ gọn, một thứ bậc ===== */
.home2 { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); }
.home2 > * { grid-column: 1 / -1 !important; grid-row: auto !important; }
.hd { display: grid; grid-template-columns: minmax(0, 640px) minmax(0, 1fr); gap: 24px; align-items: center; min-height: 248px; }
.hd__l { display: grid; gap: 16px; align-content: center; justify-items: start; min-width: 0; }
.hd__t { font-size: var(--fs-h1); font-weight: 800; line-height: 1.2; letter-spacing: -0.025em; text-wrap: balance; text-decoration: none; max-width: none; }
.hd__sub { font-size: var(--fs-body); line-height: 1.55; color: var(--ink); font-weight: 400; max-width: 60ch; text-wrap: pretty; }
.hd__act { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; } .hd__lk { font-size: var(--fs-meta); font-weight: 400; min-height: 44px; display: inline-flex; align-items: center; }
.hd__art { justify-self: center; line-height: 0; width: 220px; height: 220px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle, color-mix(in srgb, var(--yel) 30%, transparent) 0 2.5px, transparent 3.5px) 0 0 / 18px 18px, var(--accent-soft); }
.hd__art .dom__b { animation: dom-bob 3.6s ease-in-out infinite; } .hd__art .dom__eyes { animation: dom-blink 5s infinite; }
.hd__q { font-size: var(--fs-h2); font-weight: 700; letter-spacing: -0.015em; margin: 0; }
.home2 .cd { border: 0; background: var(--warm-soft); box-shadow: none; padding: 4px 12px; font-size: var(--fs-meta); font-weight: 400; border-radius: 999px; min-height: 28px; } .home2 .cd b { font-weight: 700; } .home2 .cd__s { display: inline; font-size: inherit; color: var(--ink-2); }
.home2 .who > summary { font-size: var(--fs-meta); font-weight: 400; min-height: 28px; }
.stp { width: 100%; max-width: 560px; } .stp ol { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.stp__i a { display: grid; gap: 6px; text-decoration: none; color: var(--ink-2); font-size: var(--fs-meta); font-weight: 400; min-height: 44px; align-content: start; }
.stp__c { display: grid; place-items: center; height: 6px; border-radius: 3px; background: var(--line); color: transparent; } .stp__c .ic { display: none; }
.stp__i--done .stp__c { background: var(--accent); } .stp__i--now .stp__c { background: var(--yel); } .stp__i--now a { color: var(--ink); font-weight: 700; }
.stp__m { display: none; }
.home2 .entries { gap: 16px; }
.home2 .entry, .home2 .entry:nth-child(n) { background: var(--surface); border: 1px solid var(--line); color: var(--ink); border-radius: 18px; padding: 18px; min-height: 0; flex-direction: row; align-items: center; gap: 14px; }
.home2 .entry::after { display: none; } .home2 .entry > .ic:last-child { margin: 0; color: var(--ink-2); }
.home2 .entry .entry__i, .home2 .entry:nth-child(n) .entry__i { width: 48px; height: 48px; border-radius: 14px; background: var(--accent-soft); color: var(--accent); border: 0; }
.home2 .entry__t { font-size: var(--fs-h2); font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home2 .entry__d, .home2 .entry:nth-child(n) .entry__d { font-size: var(--fs-meta); font-weight: 400; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.home2 .entry--on, .home2 .entry--on:nth-child(n) { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.home2 .entry--on .entry__i, .home2 .entry--on:nth-child(n) .entry__i { background: var(--yel); color: var(--yel-ink); }
.home2 .entry--on .entry__d, .home2 .entry--on:nth-child(n) .entry__d { color: color-mix(in srgb, var(--accent-ink) 88%, transparent); } .home2 .entry--on > .ic:last-child { color: var(--accent-ink); }
.home2 .stats { max-width: 640px; } .home2 .stat dd { font-size: var(--fs-h2); }
/* Vai trò ở header */
.vai2 { position: relative; margin-left: auto; } .vai2 + .top__acc { margin-left: 0; }
.vai2 > summary { list-style: none; display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 10px; border-radius: 999px; font-size: var(--fs-meta); font-weight: 400; color: var(--ink-2); cursor: pointer; white-space: nowrap; }
.vai2 > summary::-webkit-details-marker { display: none; } .vai2 > summary:hover { background: var(--surface-2); color: var(--ink); }
.vai2__p { position: absolute; right: 0; top: calc(100% + 6px); width: 232px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--sh-2); padding: 12px; display: grid; gap: 8px; z-index: 40; }
.vai2__o { display: grid; gap: 2px; }
.vaibar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 12px; padding: 4px 16px; background: var(--warm-soft); font-size: var(--fs-meta); font-weight: 400; }
.vaibar__o { position: relative; display: inline-flex; align-items: center; min-height: 36px; padding: 0 10px; border-radius: 999px; cursor: pointer; font-weight: 700; color: var(--warm); text-decoration: underline; text-underline-offset: 3px; }
.vaibar__o input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; } .vaibar__o:has(input:focus-visible) { outline: 3px solid var(--accent); }
.top__nav + .vai2 { margin-left: 8px; }
h1 { font-size: var(--fs-h1); }
@media (min-width: 900px) { .home2 .entries { grid-template-columns: repeat(3, minmax(0, 1fr)); } .home2 { gap: 24px; } }
@media (max-width: 899px) { .hd { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; min-height: 0; align-items: start; } .hd__art { width: 88px; height: 88px; } .hd__art .dom { width: 80px; height: 80px; } }
@media (max-width: 599px) {
  .home2 { gap: 16px; } .hd__l { gap: 8px; } .hd__t { font-size: var(--fs-h1); } .hd__sub { font-size: var(--fs-body); }
  .stp ol { display: none; } .stp__m { display: flex; align-items: center; gap: 10px; font-size: var(--fs-meta); font-weight: 400; color: var(--ink-2); }
   
  .hd__q { font-size: var(--fs-h2); } .home2 .entries { gap: 8px; } .home2 .entry, .home2 .entry:nth-child(n) { padding: 10px 12px; } .home2 .entry__t { font-size: var(--fs-body); }
  .vai2 > summary span { max-width: 5.5em; overflow: hidden; text-overflow: ellipsis; } .hd__art { width: 72px; height: 72px; } .hd__art .dom { width: 68px; height: 68px; }
}
@media (max-width: 359px) { .vai2 > summary { padding: 0 4px; font-size: var(--fs-nho); } }

/* Thang chữ trang chủ: tiêu đề chính, tiêu đề thẻ 20/700, chữ thường 16, chữ phụ 13 */
.home2 .cd b, .stp__i--now a { font-weight: 700; } .hd .btn { font-weight: 700; }
.hd__q, .home2 .entry__t { font-size: var(--fs-h2); font-weight: 700; }
.home2 .entry__d, .home2 .entry:nth-child(n) .entry__d, .home2 .who > summary, .home2 .who .meta, .hd__lk, .stp__i a, .stp__m, .home2 .cd { font-size: var(--fs-meta); font-weight: 400; }
@media (max-width: 599px) { .hd__q { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .hd__q, .home2 .entry__t { font-size: var(--fs-h2); } .hd__act .btn { min-height: 44px; padding: 6px 16px; } }

.home2 .entry__t { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.25; }


/* ===== Đợt 12: sửa lỗi kiểm toán còn lại ===== */
/* KT-05 (CLS): chân trang luôn bắt đầu dưới màn hình đầu; các khối tải sau có sẵn chỗ. */
main { min-height: calc(100vh - 56px); min-height: calc(100dvh - 56px); }
.sk--so { display: inline-block; width: 2.6em; height: 0.8em; border-radius: 6px; vertical-align: baseline; }
.cd--cho { visibility: hidden; }
.hd__pho { display: block; }
.pd-w--cho { min-height: 44px; }
.pd-w--cho:empty { display: block; }
/* Trang chủ: thanh tiến độ 4 trạng thái (xong, tiếp theo, bỏ qua, chưa tới); dải chọn vai nền trung tính, có nút đóng. */
.stp__i--skip .stp__c { background: repeating-linear-gradient(90deg, var(--ink-2) 0 6px, transparent 6px 10px); opacity: .55; }
.stp__k { font-size: var(--fs-meta); font-weight: 400; color: var(--ink-2); margin-top: -4px; }
.stp__i--now .stp__k { color: var(--ink); }
@media (max-width: 599px) {
  .stp { display: flex; align-items: center; gap: 12px; } .stp ol { display: grid; flex: 1 1 auto; max-width: 200px; gap: 4px; }
  .stp__i a { min-height: 24px; align-content: center; } .stp__t, .stp__k { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .stp__m { flex: none; }
}
.vaibar { background: var(--surface-2); color: var(--ink-2); border-bottom: 1px solid var(--line); min-height: 40px; }
.vaibar__o { color: var(--accent); font-weight: 400; }
.vaibar__x { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border: 0; background: transparent; color: var(--ink-2); border-radius: 50%; cursor: pointer; }
.vaibar__x:hover { background: var(--line); color: var(--ink); }
@media (max-width: 599px) { .vaibar { gap: 0 2px; padding: 0 4px 0 12px; } .vaibar__o { padding: 0 7px; } }
/* Thang chữ: chốt cặp cỡ/độ đậm theo vai cho toàn app (xem biến --fs-*, --fw-* ở :root). */
h1 { font-size: var(--fs-h1); font-weight: var(--fw-h1); }
h2 { font-size: var(--fs-h2); font-weight: var(--fw-h2); }
h3, h4 { font-size: var(--fs-body); font-weight: var(--fw-manh); }
/* Chữ phụ và nhãn nhỏ không có độ đậm riêng: phần cần nhấn chỉ đổi màu. */
.meta, .meta b, .meta strong, .foot b, .foot strong, .rc__s b, .rc__yr b, .home2 .cd b, .fee b, .lvl, .xh, .badge, .bottom .nav__a, .top__nav .nav__a, .stp__i a, .stp__i--now a, .vaibar__o, .tickbar__n, .jmap__t, .jmap__d, .jmap__i--now .jmap__d, .tab__n, .btn--sm, .shead__logo, .hint, .pwreq, .pwreq.is-ok, .fb__od, .sug__k, .sug__p, .rc__f, .rc__sub, .rc__cl, .fees__y, .fees__d, .hbar__v, .utable th, .tl__t, .cd__0, .slogan--s { font-weight: var(--fw-body); }
.meta b, .meta strong, .foot strong, .rc__s b, .rc__yr b, .home2 .cd b, .fee b, .stp__i--now a, .jmap__i--now .jmap__t { color: var(--ink); }
h1 .meta, h2 .meta, h3 .meta, h4 .meta { font-size: var(--fs-meta); }
.jobs__t { font-size: var(--fs-body); }
@media (min-width: 600px) { :root { --fs-h2: 1.25rem; } }
/* KT-09, KT-30: nhãn thanh dưới 12px, mỗi mục rộng theo chữ của nó nên không chạm nhau kể cả ở 320px. */
@media (max-width: 899px) { .bottom { display: flex; } }
.bottom .nav__a { flex: 1 1 auto; padding: 0 2px; font-size: var(--fs-nho); letter-spacing: -0.01em; white-space: nowrap; }
@media (max-width: 359px) { .bottom .nav__a { flex: 1 1 0; white-space: normal; line-height: 1.15; } .bottom .nav__a span { overflow: visible; text-overflow: clip; } }
/* KT-29: phóng cỡ chữ 200% trên điện thoại không sinh cuộn ngang: thanh trên co được, tab mức và dòng chênh lệch xuống dòng. */
.top__in { min-width: 0; } .vai2 { min-width: 0; flex: 0 1 auto; } .vai2 > summary { max-width: 100%; } .vai2 > summary span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.top__acc { flex: 0 1 auto; min-width: 44px; overflow: hidden; } .top__acc span { min-width: 0; flex: 0 1 auto; }
.bottom .nav__a span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tab { min-width: 0; flex-wrap: wrap; overflow-wrap: anywhere; }
.rc__sc { flex-wrap: wrap; }
.stp__i a { position: relative; }
@media (max-width: 599px) { .top__in { gap: 10px; } .brand { flex: 0 20 auto; min-width: 90px; } .top__nav + .vai2 { margin-left: auto; } }
/* KT-10: câu trắc nghiệm luôn hiện đủ chữ, ô cao theo nội dung (lưới vẫn thẳng hàng). Ô đã tick nhấn bằng màu nền và viền, không đổi độ đậm để chữ không xô dòng. */
.tick__t { display: block; -webkit-line-clamp: unset; overflow: visible; }
.tick:has(input:checked) .tick__t { font-weight: var(--fw-body); }
/* KT-23: không cắt chữ có nghĩa ở màn hẹp: mô tả và tên lối vào trang chủ, tên trường trên thẻ (dưới 360px) xuống dòng đủ. */
.home2 .entry__t, .home2 .entry__d, .home2 .entry:nth-child(n) .entry__d { display: block; -webkit-line-clamp: unset; overflow: visible; }
@media (max-width: 359px) { .rc__s { display: block; -webkit-line-clamp: unset; overflow: visible; white-space: normal; } }
/* Thứ trông như bấm được thì bấm được; thứ tĩnh thì trông tĩnh. */
.stats.plain { padding: 0; }
a.stat { position: relative; text-decoration: none; color: var(--ink); height: 100%; padding-right: 30px; align-content: start; }
a.stat:hover { border-color: var(--accent); color: var(--ink); } a.stat > .ic { position: absolute; right: 10px; top: 14px; color: var(--ink-2); } a.stat:hover > .ic { color: var(--accent); }
.stat__n { display: block; font-size: var(--fs-h2); font-weight: var(--fw-h2); letter-spacing: -0.02em; line-height: 1.2; font-variant-numeric: tabular-nums; }
.stat__n::after { content: ""; display: block; width: 28px; height: 4px; border-radius: 2px; background: var(--yel); margin: 4px 0 2px; }
.stat__l { color: var(--ink-2); font-size: var(--fs-meta); line-height: 1.3; }
a.cd, .home2 a.cd { text-decoration: none; color: var(--ink); gap: 6px; } a.cd:hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--warm-line); } a.cd > .ic { flex: none; color: var(--ink-2); }
a.th { text-decoration: none; color: var(--ink); min-height: 44px; } a.th:hover { border-color: var(--accent); color: var(--ink); }
/* Ô số liệu tĩnh (trang trường, khung phổ điểm): phẳng, không viền thẻ, không đổ bóng. */
.stats--s .stat { background: none; border: 0; box-shadow: none; border-radius: 0; padding: 2px 12px 2px 0; border-right: 1px solid var(--line); }
.stats--s .stat:last-child { border-right: 0; }
.fb__gt { display: block; -webkit-line-clamp: unset; overflow: visible; } /* tên nhóm ngành trong khung chọn hiện đủ chữ */
@media (max-width: 379px) { .vaibar > .vaibar__l { display: none; } }
.ptg__ph { display: block; -webkit-line-clamp: unset; overflow: visible; } /* không cắt chữ mô tả phương thức */
/* Logo mới: logotype "Đomđóm" (từ 480px), dưới 480px chỉ biểu tượng. */
.brand picture { display: contents; }
@media (max-width: 479px) { .brand { flex: none; min-width: 0; } }
@media (max-width: 599px) { .brand { flex: none; min-width: 0; } }
@media (max-width: 359px) { .top__acc span { position: static; width: auto; height: auto; clip-path: none; } .top__acc { width: auto; padding: 0 10px; } .top__in { gap: 8px; } }
/* Mắt Đomđóm liếc theo con trỏ: con ngươi và đốm sáng dịch bằng transform (đặt qua CSSOM), chuyển động ngắn và mượt. */
.dom__pp { transition: transform .11s ease-out; }
@media (prefers-reduced-motion: reduce) { .dom__pp { transition: none; transform: none !important; } }
/* ===== Vòng 2 ===== */
/* KT2-02: 900 đến 1199px: điều hướng trên một dòng (không xuống dòng nhãn), chữ cỡ phụ, khoảng cách hẹp hơn; logo là biểu tượng. */
.top__nav .nav__a { white-space: nowrap; }
@media (min-width: 1200px) { .top__nav .nav__a { padding: 0 10px; } .top__nav { gap: 0; } }
@media (min-width: 900px) and (max-width: 1199px) { .top__in { gap: 10px; } .brand { flex: none; } .top__nav { gap: 0; } .top__nav .nav__a { padding: 0 9px; font-size: var(--fs-meta); } .top__nav + .vai2 { margin-left: 2px; } .top__acc { flex: none; } }
/* KT2-03: khung chọn vai trò ở màn hẹp neo theo mép phải khung nhìn, không tràn ra ngoài. */
@media (max-width: 599px) { .vai2__p { position: fixed; right: 8px; left: auto; top: calc(56px + env(safe-area-inset-top) + 4px); width: min(232px, calc(100vw - 16px)); } }
/* KT2-04: nhãn đếm "Đã tick" là chữ tối trên nền vàng ở cả hai chế độ màu. */
.tickbar__n, .meta.tickbar__n { color: var(--yel-ink); }
/* KT2-05: ô tổ hợp bấm được cao tối thiểu 44px. */
.thg__l > li { display: flex; min-width: 0; } a.th { flex: 1 1 auto; min-height: 44px; }
/* KT2-06: số liệu không bị ngắt giữa chừng; dưới 360px ba ô thống kê trang chủ xếp một cột, số và nhãn cùng hàng. */
.stat__n, .stat dd { white-space: nowrap; overflow-wrap: normal; } .stat__l, .stat dt { overflow-wrap: normal; word-break: normal; }
@media (max-width: 359px) { .home2 .stats { grid-template-columns: minmax(0, 1fr); gap: 6px; } .home2 a.stat { display: flex; align-items: baseline; gap: 10px; padding: 10px 34px 10px 12px; } .home2 .stat__n { flex: none; min-width: 3.6em; } .home2 .stat__n::after { display: none; } }
/* KT2-07: dải gợi ý dùng cùng nhãn "Người đang xem là". */
@media (max-width: 599px) { .vaibar__o { padding: 0 5px; } }
@media (max-width: 419px) { .vaibar { flex-wrap: nowrap; } .vaibar__l { font-size: var(--fs-nho); white-space: nowrap; } .vaibar__o { padding: 0 4px; white-space: nowrap; } .vaibar__x { width: 32px; } }
/* KT-29 + KT2-06: ô thống kê trang chủ tự xuống hàng khi chữ phóng to (cột tối thiểu tính theo rem). */
.home2 .stats { grid-template-columns: repeat(auto-fit, minmax(min(100%, 6.4rem), 1fr)); }
@media (max-width: 359px) { .home2 .stats { grid-template-columns: minmax(0, 1fr); } }
.scope { grid-template-columns: minmax(0, 1fr); } .home2 a.stat { min-width: 0; }

/* Tiêu đề và mô tả thẻ lối vào: chia dòng cân, không để một từ rớt dòng */
.entry__t, .hd__q { text-wrap: balance; }
.entry__d { text-wrap: pretty; }

/* Trang chủ không khung, không mũi tên: ba lối vào là ba cột chữ, số liệu là một dòng số, đếm ngược là một dòng chữ */
.home2 .entries { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 48px; }
.home2 .entries .entry:nth-child(n) { background: none; border: 0; box-shadow: none; border-radius: 0; padding: 4px 0; color: var(--ink); flex-direction: column; align-items: flex-start; gap: 14px; transform: none; overflow: visible; min-height: 0; }
.home2 .entries .entry:nth-child(n) .entry__i { width: 56px; height: 56px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); }
.home2 .entries .entry:nth-child(1) .entry__i { background: var(--yel); color: var(--yel-ink); }
.home2 .entries .entry--on:nth-child(n) .entry__i { background: var(--accent); color: var(--accent-ink); }
.home2 .entries .entry:nth-child(n) .entry__t { font-size: 1.25rem; line-height: 1.3; text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 4px; text-underline-offset: 5px; transition: text-decoration-color .15s; }
@media (hover: hover) { .home2 .entries .entry:hover .entry__t { text-decoration-color: var(--yel); } }
.home2 .entries .entry:focus-visible .entry__t { text-decoration-color: var(--yel); }
.home2 .entries .entry:nth-child(n) .entry__d { color: var(--ink-2); font-size: var(--fs-body); max-width: 34ch; }
.home2 .entries .entry__b { gap: 6px; }
.entry__g { justify-self: start; font-size: var(--fs-nho); font-weight: 700; letter-spacing: .02em; padding: 1px 6px; background: linear-gradient(transparent 45%, var(--yel) 45%); color: var(--ink); }
.home2 .hd__q { margin-top: 12px; }
@media (max-width: 899px) {
  .home2 .entries { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .home2 .entries .entry:nth-child(n) { flex-direction: row; align-items: center; gap: 14px; padding: 14px 0; border-top: 1px solid var(--line); }
  .home2 .entries .entry:nth-child(1) { border-top: 0; }
  .home2 .entries .entry:nth-child(n) .entry__i { width: 44px; height: 44px; }
  .home2 .entries .entry:nth-child(n) .entry__t { font-size: var(--fs-h2); }
  .home2 .entries .entry:nth-child(n) .entry__d { font-size: var(--fs-meta); max-width: none; }
}
.home2 .scope .stats { display: flex; flex-wrap: wrap; gap: 6px 40px; max-width: none; }
.home2 .scope a.stat { display: flex; align-items: baseline; gap: 8px; background: none; border: 0; box-shadow: none; border-radius: 0; padding: 0; min-height: 44px; height: auto; }
.home2 .scope .stat__n { font-size: 1.5rem; font-weight: 800; min-width: 0; }
.home2 .scope .stat__n::after { display: none; }
.home2 .scope a.stat:hover .stat__l { color: var(--accent); text-decoration: underline; }
.home2 a.cd { background: none; padding: 0; border-radius: 0; }
.home2 a.cd b { background: linear-gradient(transparent 50%, var(--yel) 50%); padding: 0 3px; }
.home2 a.cd:hover { box-shadow: none; text-decoration: underline; }
.pd { border-color: transparent; } .pd__x { flex: none; margin-left: auto; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 900px) { .home2 .entries .entry__g { position: absolute; left: 70px; top: 22px; } }

/* Trang chủ nhiều màu: khối mở đầu là mảng xanh, điểm nhấn vàng; lối vào và số liệu mang màu thương hiệu */
.home2 .hd { position: relative; overflow: hidden; border-radius: 28px; padding: 32px 36px; color: #fff; min-height: 280px;
  background: radial-gradient(circle at 88% 18%, rgba(255, 210, 31, .30) 0 2px, transparent 3px) 0 0 / 26px 26px, radial-gradient(120% 140% at 100% 0%, #2f7bff 0%, #1257d6 45%, #0b3585 100%); }
.home2 .hd .hd__t, .home2 .hd .hd__sub, .home2 .hd a.cd, .home2 .hd .cd__s, .home2 .hd .hd__lk, .home2 .hd .hd__sub a, .home2 .hd .who > summary, .home2 .hd .who .meta { color: #fff; }
.home2 .hd a.cd b { background: #ffd21f; color: #0d1b30; border-radius: 6px; padding: 0 6px; }
.home2 .hd .btn--primary { background: #ffd21f; color: #0d1b30; border-color: #ffd21f; box-shadow: 0 6px 18px rgba(7, 26, 59, .35); }
.home2 .hd .btn--primary:hover { background: #ffdc4a; color: #0d1b30; }
.home2 .hd .stp__i a, .home2 .hd .stp__m { color: rgba(255, 255, 255, .82); } .home2 .hd .stp__i--now a { color: #fff; }
.home2 .hd .stp__c { background: rgba(255, 255, 255, .28); } .home2 .hd .stp__i--done .stp__c { background: #fff; } .home2 .hd .stp__i--now .stp__c { background: #ffd21f; }
.home2 .hd :focus-visible { outline-color: #ffd21f; }
.home2 .hd__art { background: #ffd21f; box-shadow: 0 0 0 14px rgba(255, 210, 31, .22), 0 0 0 30px rgba(255, 210, 31, .10); }
.home2 .hd__q { font-size: 1.375rem; color: var(--accent); }
.home2 .entries .entry:nth-child(n) .entry__i { width: 64px; height: 64px; }
.home2 .entries .entry:nth-child(1) .entry__i { background: #ffd21f; color: #0d1b30; }
.home2 .entries .entry:nth-child(2) .entry__i { background: #1257d6; color: #fff; }
.home2 .entries .entry:nth-child(3) .entry__i { background: #0b3585; color: #ffd21f; }
.home2 .entries .entry:nth-child(n) .entry__i .ic { width: 28px; height: 28px; }
.home2 .scope .stat__n { font-size: 2rem; color: var(--accent); }
.home2 .scope li:nth-child(2) .stat__n { color: var(--warm-line); }
@media (max-width: 899px) { .home2 .hd { padding: 20px 18px; border-radius: 22px; min-height: 0; } .home2 .hd__art { box-shadow: 0 0 0 8px rgba(255, 210, 31, .22); } .home2 .entries .entry:nth-child(n) .entry__i { width: 48px; height: 48px; } .home2 .scope .stat__n { font-size: 1.5rem; } }
.home2 .scope li:nth-child(2) .stat__n { color: var(--ink); background: linear-gradient(transparent 55%, var(--yel) 55%); padding: 0 4px; }
@media (max-width: 599px) { .home2 .hd .cd__s { display: none; } }
.home2 .scope { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 40px; } .stat__src { font-size: var(--fs-meta); color: var(--ink-2); min-height: 44px; display: inline-flex; align-items: center; }
.home2 .hd__sub:empty { display: none; }

/* ===== Các trang ngoài trang chủ: bớt chữ, bỏ "khung trong khung", thêm màu có chủ đích ===== */
/* Tiêu đề mục mang màu thương hiệu; số liệu chính có màu. */
main .page:not(.home2) h2 { color: var(--accent); }
.gso { font-size: var(--fs-body); color: var(--ink-2); } .gso b { font-size: var(--fs-h2); font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; }
.gso b + b, .gso span + b { color: var(--ink); background: linear-gradient(transparent 55%, var(--yel) 55%); padding: 0 3px; }
/* Lời Đomđóm: một dòng chữ cạnh nhân vật nhỏ, không còn bong bóng viền. */
.say__b, .say--lg .say__b, .say--sum .say__b { background: none; border: 0; box-shadow: none; padding: 0; border-radius: 0; }
.say__b::before, .say--lg .say__b::before { display: none; }
.say, .say--lg { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; } .say--lg .say__a { margin: 0; }
.say--sum .say__b p:first-of-type { font-size: var(--fs-body); font-weight: 700; }
/* Danh sách phẳng: đường kẻ mảnh thay cho hộp. */
.gcard, .scard, .saved, .acc, .acc--sub, .jwrap, .xhsum, .portrait__c, .empty, .card, .tile, .xm, .callout { background: none; border: 0; box-shadow: none; border-radius: 0; }
.gcard:hover, .scard:hover, .rc:hover { box-shadow: none; transform: none; }
.grid:has(> .gcard), .grid:has(> .scard), .savedl { gap: 0 40px; }
.gcard { padding: 12px 0; border-bottom: 1px solid var(--line); min-height: 64px; }
.gcard:hover .gcard__t, .scard:hover .scard__t { color: var(--accent); }
.gcard .emo, .ghead .emo { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; flex: none; background: var(--accent); color: var(--accent-ink); }
.ghead .emo { width: 56px; height: 56px; border-radius: 18px; background: #ffd21f; color: #0d1b30; }
.grid > .gcard:nth-child(3n+1) .emo, .sugg li:nth-child(3n+1) .emo { background: #ffd21f; color: #0d1b30; }
.grid > .gcard:nth-child(3n) .emo, .sugg li:nth-child(3n) .emo { background: #0b3585; color: #ffd21f; }
.scard { padding: 14px 0; border-bottom: 1px solid var(--line); height: auto; }
.scard__t::after { border-radius: 0; }
.saved { padding: 10px 0; border-bottom: 1px solid var(--line); }
.acc, .acc--sub { border-top: 1px solid var(--line); } .accs { gap: 0; } .accs > .acc:last-child { border-bottom: 1px solid var(--line); }
.acc > summary, .acc--sub > summary { padding: 14px 0; border-radius: 0; color: var(--ink); } .acc[open] > summary { color: var(--accent); }
.acc__b { padding: 0 0 18px; }
.card { padding: 0; } .card + .card, .cols .card { padding-top: 20px; border-top: 1px solid var(--line); } .page--form .card { border-top: 0; padding-top: 0; }
.portrait__c { border-left: 4px solid var(--yel); padding: 2px 0 2px 14px; } .portrait__c h3 span { color: var(--accent); font-weight: 700; }
.empty { padding: 24px 0; }
.xm { padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.callout { border-left: 4px solid var(--yel); padding: 2px 0 2px 14px; }
.note { background: none; border: 0; padding: 0; color: var(--ink-2); font-size: var(--fs-meta); }
.invite { background: var(--accent-soft); border: 0; box-shadow: none; border-radius: 16px; }
.invite--xm { background: var(--warm-soft); }
/* Tổng quan: phương thức là danh sách, không phải hộp trong hộp. */
.ptg { gap: 0 32px; } .ptg__c { background: none; border: 0; box-shadow: none; border-radius: 0; padding: 12px 0; border-top: 1px solid var(--line); }
.ptg__c .jobs__t { color: var(--ink); }
/* Thẻ kết quả: điện thoại là danh sách có đường kẻ; màn rộng là mảng nền nhẹ không viền. Màu theo mức. */
.rc, .rc:hover { border: 0; box-shadow: none; }
.rc--an_toan { --muc: var(--ok); } .rc--phu_hop { --muc: var(--accent); } .rc--thu_suc { --muc: var(--warn); }
.rc__big b { color: var(--muc, var(--accent)); }
.rc::before { background: var(--muc, var(--accent)); }
@media (max-width: 899px) { .grid:has(> .rc) { gap: 0; } .rc { background: none; border-radius: 0; padding: 14px 0 12px; border-bottom: 1px solid var(--line); } .rc::before { display: none; } .rc__f { border-top: 0; padding-top: 0; } }
@media (min-width: 900px) { .rc { background: var(--surface); border-radius: 18px; } .rc__f { border-top: 0; } }
/* Tab mức: mỗi mức một màu, tab đang chọn là mảng màu đặc. */
.tab { border: 0; box-shadow: none; background: var(--surface-2); color: var(--ink); }
.tab--an_toan { --muc: var(--ok); } .tab--phu_hop { --muc: var(--accent); } .tab--thu_suc { --muc: var(--warn); }
.tab .tab__n { color: var(--muc); font-weight: 700; }
.tab.is-on { background: var(--muc); color: var(--bg); border: 0; } .tab.is-on .tab__n { color: inherit; }
/* Trang trường: số liệu đầu trang có màu; bảng ngành và chi tiết ngành không lồng hộp. */
.stats--s .stat dd { color: var(--accent); font-weight: 800; } .stats--s .stat dd::after { display: none; }
.card--fee { padding: 0; } .fees__v { color: var(--ink); } .fees li.is-new .fees__v { color: var(--accent); }
.mrow, .mrow.is-open { background: none; box-shadow: none; border-radius: 0; }
.mchart { background: none; border: 0; border-radius: 0; padding: 12px 0 0; border-top: 1px solid var(--line); } .mchart h4 { color: var(--accent); }
.mrow .num b { color: var(--accent); }
.xhsum { padding: 0; }
/* Trắc nghiệm: ô tick không viền, ô đã chọn là mảng xanh. */
.tick { border: 0; box-shadow: none; background: var(--surface); }
.sugg__r { color: var(--ink-2); }
/* Không cắt chữ: tên ngành, tên trường trên thẻ kết quả xuống dòng đủ. */
.rc__n, .rc__link, .rc__s { display: block; -webkit-line-clamp: unset; overflow: visible; white-space: normal; text-overflow: clip; }
.rc__n { padding-right: 44px; text-wrap: balance; } .rc__s { padding-right: 44px; }
.tnbar__t { white-space: normal; overflow: visible; text-overflow: clip; }
main h1, main h2 { text-wrap: balance; } main p { text-wrap: pretty; }
.pd, .pd:hover { background: none; box-shadow: none; border: 0; border-radius: 0; padding: 4px 0; }
.rc__f, .rc__yr { white-space: normal; overflow: visible; text-overflow: clip; }

/* ===== Kiểm toán vòng 3: lỗi cắt chữ ===== */
/* KT3-04: số liệu đầu trang trường là một hàng tự xuống dòng, cách nhau rõ, không dính số. */
.stats--s { display: flex; flex-wrap: wrap; gap: 10px 28px; } .stats--s .stat, .stats--s .stat:last-child { border: 0; padding: 0; min-width: 0; flex: 0 1 auto; }
.stats--s .stat dt { max-width: 14ch; }
/* KT3-06: mã ngành không ngắt đôi; mã rất dài thì được ngắt ở dấu gạch. */
.mrow__ma { white-space: nowrap; font-variant-numeric: tabular-nums; } .mrow__ma--dai { white-space: normal; overflow-wrap: normal; word-break: normal; }
@media (min-width: 900px) { .mtable td.mrow__ma { min-width: 9ch; } }
/* KT3-08: thanh nổi trắc nghiệm cho chữ xuống 2 dòng, không cắt. */
.tnbar { height: auto; min-height: 52px; } .tnbar__t { white-space: normal; overflow: visible; text-overflow: clip; min-width: 0; text-align: left; line-height: 1.3; } .tnbar__a { flex: none; white-space: nowrap; }
/* KT3-09: dưới 480px cả ba tab mức luôn hai dòng (tên trên, số dưới) cho đều nhau. */
@media (max-width: 479px) { .tab { flex-direction: column; flex-wrap: nowrap; gap: 0; min-height: 52px; padding: 4px 2px; } }
/* KT3-10: cỡ chữ hệ thống lớn: nhãn thanh dưới có trần cỡ chữ và được xuống dòng; dải chọn vai được xuống dòng. */
.bottom .nav__a { font-size: clamp(11px, 0.75rem, 13px); }
.bottom .nav__a span { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: normal; }
@media (max-width: 419px) { .vaibar { flex-wrap: wrap; justify-content: center; } }
/* KT3-11: hàng tab dính có nền kín, phủ luôn khe phía trên, không để lộ chữ của thẻ đang cuộn qua. */
.tabs { background: var(--bg); box-shadow: 0 -14px 0 var(--bg); padding: 6px 0 8px; margin-bottom: 0; }
/* KT3-12: tên trường dài: tiêu đề nhỏ hơn, phần trong ngoặc thành dòng phụ. */
.shead h1.shead__dai { font-size: var(--fs-h2); line-height: 1.3; }
@media (min-width: 900px) { .shead h1.shead__dai { font-size: 1.625rem; } }
.shead__phu { margin-top: 2px; }
/* KT3-14: nhãn tổ hợp đang áp dụng. */
.thap { font-size: var(--fs-meta); color: var(--ink-2); display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; } .thap b { color: var(--ink); background: linear-gradient(transparent 55%, var(--yel) 55%); padding: 0 3px; }
.linkbtn { background: none; border: 0; padding: 0; min-height: 44px; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font-size: inherit; }
/* Giữ thang chữ: số nhấn chỉ khác màu, không thêm cặp cỡ/độ đậm mới. */
.tab .tab__n, .portrait__c h3 span { font-weight: 400; } .gso b, .stats--s .stat dd { font-weight: 700; }