/* =========================================================================
   KNST Huế · Cổng công vụ Huế (P-45)
   Xanh Huế (đồng nhất chuyên trang ĐMST dmst.hue.gov.vn) làm màu chủ đạo, vàng làm điểm nhấn, nền xanh rất nhạt.
   Tên biến --color-plum-*/--color-gold-* giữ nguyên vì là hợp đồng; giá trị nay là xanh/vàng.
   Bộ class là hợp đồng với các phân hệ (sổ 16): chỉ được THÊM, không đổi tên.
   Hiệu ứng chỉ dùng transform/opacity; tôn trọng prefers-reduced-motion.
   ========================================================================= */

/* ---------- Phông Be Vietnam Pro (OFL-1.1), tự host ---------- */
/* P-52: mỗi độ đậm khai latin-ext, latin rồi vietnamese. Khoảng mã chồng nhau (Đ, ă, ơ, ư, dấu ghép)
   trình duyệt lấy @font-face khai sau cùng, nên chữ tiếng Việt chỉ nạp tệp vietnamese, không kéo thêm latin-ext. */
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 400; font-display: swap; src: url("/lib/be-vietnam-pro/v12/be-vietnam-pro-400-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 400; font-display: swap; src: url("/lib/be-vietnam-pro/v12/be-vietnam-pro-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 400; font-display: swap; src: url("/lib/be-vietnam-pro/v12/be-vietnam-pro-400-vietnamese.woff2") format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 500; font-display: swap; src: url("/lib/be-vietnam-pro/v12/be-vietnam-pro-500-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 500; font-display: swap; src: url("/lib/be-vietnam-pro/v12/be-vietnam-pro-500-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 500; font-display: swap; src: url("/lib/be-vietnam-pro/v12/be-vietnam-pro-500-vietnamese.woff2") format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 600; font-display: swap; src: url("/lib/be-vietnam-pro/v12/be-vietnam-pro-600-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 600; font-display: swap; src: url("/lib/be-vietnam-pro/v12/be-vietnam-pro-600-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 600; font-display: swap; src: url("/lib/be-vietnam-pro/v12/be-vietnam-pro-600-vietnamese.woff2") format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 700; font-display: swap; src: url("/lib/be-vietnam-pro/v12/be-vietnam-pro-700-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 700; font-display: swap; src: url("/lib/be-vietnam-pro/v12/be-vietnam-pro-700-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 700; font-display: swap; src: url("/lib/be-vietnam-pro/v12/be-vietnam-pro-700-vietnamese.woff2") format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }

/* ---------- Token ---------- */
:root {
    /* Xanh Huế: 900 cho thanh trên, 700 là màu chủ đạo, các bậc nhạt cho hover và nền. */
    --color-plum-950: #002a5c;
    --color-plum-900: #003a7a;
    --color-plum-800: #00479a;
    --color-plum-700: #0053b2;
    --color-plum-600: #0063cc;
    --color-plum-500: #0379ff;
    --color-plum-200: #c6dbf7;
    --color-plum-100: #e0ecfb;
    --color-plum-50: #f0f6fe;
    /* Vàng: chỉ dùng cho điểm nhấn nhỏ (vạch, chấm, chữ eyebrow). */
    --color-gold-700: #7a5800;
    --color-gold-500: #f0b90b;
    --color-gold-300: #fed74d;
    --color-gold-50: #fff8e0;
    /* Nền xanh rất nhạt và chữ. */
    --color-bg: #f5f8fc;
    --color-surface: #ffffff;
    --color-surface-sunken: #ecf1f7;
    --color-line: #dbe3ed;
    --color-line-strong: #c3cfdd;
    --color-input-border: #7a8799;
    --color-ink: #152033;
    --color-ink-soft: #33425a;
    --color-muted: #526075;
    --color-placeholder: #66738a;
    --color-on-primary: #ffffff;
    --color-on-dark-muted: #c7d9f2;
    --color-primary: var(--color-plum-700);
    --color-primary-hover: var(--color-plum-600);
    --color-primary-active: var(--color-plum-800);
    --color-primary-soft: var(--color-plum-50);
    --color-primary-strong: var(--color-plum-800);
    --color-link: var(--color-plum-700);
    /* Viền focus: xanh trên nền sáng, vàng nhạt chỉ trên nền xanh đậm (thanh trên, khung chào, toast). */
    --color-focus: var(--color-plum-600);
    --color-focus-on-dark: var(--color-gold-300);
    --color-focus-ring: rgb(0 99 209 / 22%);
    /* Màu ngữ nghĩa: chữ đậm trên nền nhạt, đều đạt WCAG AA. */
    --color-success: #1d6b40;
    --color-success-soft: #e7f3ec;
    --color-warning: #8a4f00;
    --color-warning-soft: #fcf1df;
    --color-danger: #a3241b;
    --color-danger-soft: #fbeae8;
    --color-danger-hover: #8a1d15;
    --color-info: #1c5a8a;
    --color-info-soft: #e6f0f8;
    --color-neutral: #4d5868;
    --color-neutral-soft: #edf0f4;
    /* Bảng màu biểu đồ: xanh Huế, vàng, xanh ngọc, cam, tím, xám. */
    --chart-1: #0053b2;
    --chart-2: #f0b90b;
    --chart-3: #2f7d6d;
    --chart-4: #ff4e00;
    --chart-5: #7b5cc4;
    --chart-6: #8592a3;

    --font-sans: "Be Vietnam Pro", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
    --text-xs: 0.75rem;
    --text-sm: 0.8125rem;
    --text-base: 0.9375rem;
    --text-md: 1.0625rem;
    --text-lg: 1.25rem;
    --text-xl: 1.625rem;
    --text-2xl: clamp(1.375rem, 1.15rem + 0.7vw, 1.625rem);
    --text-stat: clamp(1.75rem, 1.4rem + 1vw, 2.25rem);
    --leading-tight: 1.25;
    --leading-normal: 1.55;

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;

    /* Bo góc lớn, bóng mềm: trông trẻ trung, đỡ cứng. */
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 24px;
    --radius-pill: 999px;

    --shadow-1: 0 1px 2px rgb(16 42 84 / 4%), 0 4px 14px -6px rgb(16 42 84 / 10%);
    --shadow-2: 0 18px 40px -18px rgb(0 59 140 / 30%), 0 6px 14px -8px rgb(0 59 140 / 14%);
    /* Sắc nhạt trang trí (chỉ làm nền, không làm màu chữ). */
    --color-sky-50: #eef7ff;
    --color-sky-100: #dcefff;
    --color-teal-50: #e8f8f5;
    --color-teal-500: #2bb3a0;

    --mobilebar-h: 56px;
    --sidebar-w: 272px;
    --sidebar-rail-w: 76px;
    --content-max: 1280px;
    --duration-fast: 140ms;
    --duration-normal: 240ms;
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Nền tảng ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
    margin: 0; min-height: 100vh; background: var(--color-bg); color: var(--color-ink);
    font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--leading-normal);
    font-feature-settings: "tnum" 0; -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { margin: 0; line-height: var(--leading-tight); color: var(--color-ink); font-weight: 600; letter-spacing: -0.01em; }
h1 { font-size: var(--text-2xl); font-weight: 700; letter-spacing: -0.02em; }
h2 { font-size: var(--text-lg); }
h3 { font-size: var(--text-md); }
p { margin: 0; }
a { color: var(--color-link); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--color-primary-hover); text-decoration-thickness: 2px; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
small { font-size: var(--text-sm); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: 4px; }
:is(.sidebar, .mobilebar, .welcome, .toast) :focus-visible { outline-color: var(--color-focus-on-dark); }
[hidden], .is-hidden { display: none !important; }
.visually-hidden {
    position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link {
    position: absolute; left: var(--space-4); top: var(--space-2); z-index: 100; padding: var(--space-2) var(--space-4);
    background: var(--color-surface); color: var(--color-primary); border-radius: var(--radius-sm); box-shadow: var(--shadow-2);
    transform: translateY(-160%); opacity: 0; transition: transform var(--duration-fast) var(--ease-out), opacity var(--duration-fast);
}
.skip-link:focus { transform: none; opacity: 1; }
.icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentcolor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Khung 2 phần: sidebar (logo, menu, tài khoản, đăng xuất, thu gọn) | màn chính ---------- */
.brand-mark {
    display: inline-flex; align-items: baseline; gap: 0.3em; padding: 0.3rem 0.6rem; border: 1px solid var(--color-gold-300);
    border-radius: var(--radius-sm); font-weight: 700; font-size: var(--text-md); letter-spacing: 0.04em; white-space: nowrap;
}
.brand-mark span { color: var(--color-gold-300); font-weight: 600; letter-spacing: 0; }

.shell { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); min-height: 100vh; }
.sidebar {
    position: sticky; top: 0; z-index: 20; align-self: start; display: flex; flex-direction: column; gap: var(--space-3);
    height: 100vh; padding: var(--space-5) var(--space-3) var(--space-3); color: var(--color-on-dark-muted);
    background:
        radial-gradient(120% 45% at 0% 0%, rgb(240 185 11 / 18%), transparent 62%),
        radial-gradient(90% 40% at 100% 100%, rgb(3 121 255 / 28%), transparent 70%),
        linear-gradient(180deg, var(--color-plum-900), var(--color-plum-950));
    box-shadow: inset -1px 0 0 rgb(254 215 77 / 16%);
}
.brand {
    display: flex; align-items: center; gap: var(--space-3); min-width: 0; padding: 0 var(--space-2) var(--space-4);
    border-bottom: 1px solid rgb(255 255 255 / 9%); color: #fff; text-decoration: none;
}
.brand:hover { color: #fff; text-decoration: none; }
.brand-seal {
    display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 12px;
    background: linear-gradient(140deg, var(--color-gold-300), var(--color-gold-500)); color: var(--color-plum-950);
    font-weight: 800; font-size: 15px; letter-spacing: 0.02em;
    box-shadow: 0 8px 18px -8px rgb(0 0 0 / 60%), inset 0 0 0 1px rgb(255 255 255 / 35%);
    transition: transform var(--duration-normal) var(--ease-out);
}
/* Logo Sở KH&CN Huế (tệp do Sở cung cấp) trên nền trắng tròn để nổi trên sidebar xanh. */
.brand-seal--logo { padding: 2px; border-radius: 50%; background: #fff; object-fit: contain; }
.brand:hover .brand-seal { transform: rotate(-4deg) scale(1.04); }
.brand-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.brand-text b { color: #fff; font-size: var(--text-md); font-weight: 700; letter-spacing: 0.03em; white-space: nowrap; }
.brand-text b span { color: var(--color-gold-300); font-weight: 600; letter-spacing: 0; }
.brand-text small { margin-top: 2px; color: var(--color-on-dark-muted); font-size: var(--text-xs); }

.sidebar-nav {
    flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; overscroll-behavior: contain;
    margin: 0 calc(-1 * var(--space-1)); padding: 0 var(--space-1);
    scrollbar-width: thin; scrollbar-color: rgb(255 255 255 / 18%) transparent;
}
.sidebar-heading {
    padding: var(--space-4) var(--space-3) var(--space-1); color: rgb(254 215 77 / 80%); font-size: 11px;
    font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
}
.nav-link {
    position: relative; display: flex; align-items: center; gap: var(--space-3); min-height: 42px; padding: var(--space-2) var(--space-3);
    border-radius: 12px; color: var(--color-on-dark-muted); text-decoration: none; font-weight: 500; font-size: var(--text-sm);
    transition: background var(--duration-fast), color var(--duration-fast);
}
.nav-link .icon { color: rgb(201 216 238 / 72%); transition: color var(--duration-fast); }
.nav-link:hover { background: rgb(255 255 255 / 7%); color: #fff; text-decoration: none; }
.nav-link:hover .icon { color: var(--color-gold-300); }
.nav-link[aria-current="page"] {
    background: linear-gradient(90deg, rgb(254 215 77 / 20%), rgb(255 255 255 / 5%)); color: #fff; font-weight: 600;
    box-shadow: inset 0 0 0 1px rgb(254 215 77 / 22%);
}
.nav-link[aria-current="page"] .icon { color: var(--color-gold-300); }
.nav-link[aria-current="page"]::before {
    content: ""; position: absolute; left: -16px; top: 9px; bottom: 9px; width: 3px;
    border-radius: 0 3px 3px 0; background: var(--color-gold-300); box-shadow: 0 0 12px rgb(254 215 77 / 70%);
}

.sidebar-bottom { display: flex; flex-direction: column; gap: 2px; padding-top: var(--space-3); border-top: 1px solid rgb(255 255 255 / 9%); }
.user-meta { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; text-align: left; }
.user-name { font-weight: 600; font-size: var(--text-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-role { color: var(--color-on-dark-muted); font-size: var(--text-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Hàng cuối sidebar: chip tài khoản (#037) + icon thu gọn cạnh bên; đăng xuất nằm trong menu tài khoản. */
.sidebar-account { display: flex; align-items: center; gap: var(--space-2); }
.sidebar-account .u037.u037--sidebar { flex: 1 1 auto; width: auto; min-width: 0; }
.sidebar-toggle {
    display: inline-grid; place-items: center; width: 40px; height: 40px; flex: none; padding: 0; border: 0; border-radius: 10px;
    background: transparent; color: var(--color-on-dark-muted); cursor: pointer; transition: background var(--duration-fast), color var(--duration-fast);
}
.sidebar-toggle:hover { background: rgb(255 255 255 / 9%); color: var(--color-gold-300); }
.sidebar-toggle:active { transform: translateY(1px); }
.sidebar-toggle:focus-visible { outline: 2px solid var(--color-gold-300); outline-offset: 2px; }
.sidebar-toggle .icon { transition: transform var(--duration-normal) var(--ease-out); }
.nav-backdrop { display: none; }

/* Thanh mảnh chỉ dùng trên màn hẹp có JS: nút mở ngăn kéo + logo. */
.mobilebar { display: none; }
.mobilebar-button {
    display: inline-grid; place-items: center; width: 40px; height: 40px; flex: none; border: 1px solid rgb(255 255 255 / 22%);
    border-radius: 10px; background: transparent; color: #fff; cursor: pointer;
}
.mobilebar-button:hover { background: var(--color-plum-800); border-color: var(--color-gold-300); }
.brand--compact { padding: 0; border: 0; }
.brand--compact .brand-seal { width: 32px; height: 32px; border-radius: 10px; font-size: 13px; }

.main {
    display: flex; flex-direction: column; min-width: 0;
    background:
        radial-gradient(900px 320px at 12% -80px, rgb(3 121 255 / 9%), transparent 70%),
        radial-gradient(700px 300px at 92% -60px, rgb(43 179 160 / 9%), transparent 70%),
        var(--color-bg);
    background-repeat: no-repeat;
}
.content { flex: 1; width: 100%; max-width: var(--content-max); margin: 0 auto; padding: var(--space-8) var(--space-8) var(--space-12); }
.content:focus { outline: none; }
.content > * + * { margin-top: var(--space-6); }
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); color: var(--color-muted); font-size: var(--text-sm); }
.breadcrumb ol { display: contents; list-style: none; }
.breadcrumb li { display: inline-flex; align-items: center; gap: var(--space-2); }
.breadcrumb li + li::before { content: "/"; color: var(--color-line-strong); }
.breadcrumb a { color: var(--color-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--color-primary); text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: var(--color-ink); font-weight: 500; }
.site-footer {
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2) var(--space-6);
    padding: var(--space-5) var(--space-8); border-top: 1px solid var(--color-line); color: var(--color-muted); font-size: var(--text-sm);
}
.site-footer strong { color: var(--color-ink-soft); font-weight: 600; }

/* Thu gọn thành dải icon (chỉ máy bàn; nút ở cuối sidebar). */
@media (min-width: 961px) {
    .shell { transition: grid-template-columns var(--duration-normal) var(--ease-out); }
    .shell--rail { grid-template-columns: var(--sidebar-rail-w) minmax(0, 1fr); }
    .shell--rail .sidebar { padding-inline: var(--space-2); }
    .shell--rail .brand { justify-content: center; padding-inline: 0; }
    .shell--rail :is(.brand-text, .nav-label, .user-meta, .u037-car) {
        position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
    }
    .shell--rail .sidebar-heading {
        height: 1px; margin: var(--space-3) var(--space-2); padding: 0; overflow: hidden; background: rgb(255 255 255 / 10%); color: transparent;
    }
    .shell--rail .nav-link { justify-content: center; padding-inline: 0; }
    .shell--rail .sidebar-account { flex-direction: column-reverse; }
    .shell--rail .sidebar-account .u037.u037--sidebar { flex: none; width: 100%; }
    .shell--rail .nav-link[aria-current="page"]::before { left: -12px; }
    .shell--rail .sidebar-toggle .icon { transform: scaleX(-1); }
}

/* ---------- Đầu trang ---------- */
.page-header, .page-heading {
    display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-4) var(--space-6);
    padding-bottom: var(--space-2);
}
.page-header > div:first-child { min-width: min(100%, 32ch); flex: 1 1 32ch; }
.page-eyebrow, .context-label {
    display: inline-flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); color: var(--color-gold-700);
    font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
}
.page-eyebrow::before, .context-label::before { content: ""; width: 18px; height: 2px; background: var(--color-gold-500); }
.page-lead, .page-heading > p:last-child { max-width: 68ch; margin-top: var(--space-2); color: var(--color-muted); font-size: var(--text-md); }
.page-actions, .panel-actions, .form-actions, .row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }

/* ---------- Nút ---------- */
.btn, .primary-button, .quiet-button {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 40px; padding: 0 var(--space-4);
    border: 1px solid transparent; border-radius: var(--radius-pill); font-size: var(--text-sm); font-weight: 600; line-height: 1.2;
    text-decoration: none; white-space: nowrap; cursor: pointer; user-select: none;
    transition: transform var(--duration-fast) var(--ease-out), opacity var(--duration-fast);
}
.btn:hover, .primary-button:hover, .quiet-button:hover { text-decoration: none; }
.btn:active, .primary-button:active, .quiet-button:active { transform: translateY(1px) scale(0.99); }
.btn--primary, .primary-button { background: var(--color-primary); color: var(--color-on-primary); box-shadow: var(--shadow-1); }
.btn--primary:hover, .primary-button:hover { background: var(--color-primary-hover); color: var(--color-on-primary); }
.btn--primary:active, .primary-button:active { background: var(--color-primary-active); }
.btn--secondary { background: var(--color-surface); color: var(--color-primary); border-color: var(--color-plum-200); box-shadow: var(--shadow-1); }
.btn--secondary:hover { background: var(--color-plum-50); border-color: var(--color-plum-500); color: var(--color-primary-strong); }
.btn--ghost, .quiet-button { background: transparent; color: var(--color-primary); }
.btn--ghost:hover, .quiet-button:hover { background: var(--color-plum-50); color: var(--color-primary-strong); }
.btn--danger { background: var(--color-danger); color: var(--color-on-primary); }
.btn--danger:hover { background: var(--color-danger-hover); color: var(--color-on-primary); }
.btn--sm { min-height: 34px; padding: 0 var(--space-4); font-size: var(--text-xs); }
.btn[disabled], .btn[aria-disabled="true"], .primary-button[disabled], .quiet-button[disabled], button:disabled {
    opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none;
}

/* ---------- Thẻ số liệu ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: var(--space-4); }
.stat-card {
    position: relative; display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-5) var(--space-5) var(--space-4);
    overflow: hidden; background: var(--color-surface); border: 1px solid rgb(219 227 237 / 70%); border-radius: var(--radius-lg); box-shadow: var(--shadow-1);
    --tone: var(--color-primary); --tone-soft: var(--color-sky-100);
    transition: transform var(--duration-normal) var(--ease-out);
}
/* Vòng tròn sắc nhạt ở góc thay cho vạch màu cứng phía trên. */
.stat-card::before {
    content: ""; position: absolute; right: -40px; top: -40px; width: 140px; height: 140px; border-radius: 50%;
    background: var(--tone-soft); opacity: 0.8;
}
.stat-card > * { position: relative; }
.stat-card:hover { transform: translateY(-2px); }
.stat-card[data-tone="success"] { --tone: var(--color-success); --tone-soft: var(--color-success-soft); }
.stat-card[data-tone="warning"] { --tone: var(--color-warning); --tone-soft: var(--color-warning-soft); }
.stat-card[data-tone="danger"] { --tone: var(--color-danger); --tone-soft: var(--color-danger-soft); }
.stat-card[data-tone="neutral"] { --tone: var(--color-neutral); --tone-soft: var(--color-neutral-soft); }
.stat-label { color: var(--color-muted); font-size: var(--text-sm); font-weight: 500; }
.stat-value { color: var(--color-ink); font-size: var(--text-stat); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.stat-note { display: inline-flex; align-self: flex-start; margin-top: var(--space-2); padding: 2px var(--space-2); border-radius: var(--radius-pill); background: var(--tone-soft); color: var(--tone); font-size: var(--text-xs); font-weight: 500; }

/* ---------- Khối nội dung và lưới ---------- */
.panel { background: var(--color-surface); border: 1px solid rgb(219 227 237 / 70%); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); }
.panel-header {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3);
    padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-line);
}
.panel-header h2 { font-size: var(--text-md); }
.panel-body { padding: var(--space-5); }
.panel-body > * + * { margin-top: var(--space-4); }
.grid-2, .grid-3 { display: grid; gap: var(--space-5); align-items: start; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.content > .grid-2 > *, .content > .grid-3 > * { margin-top: 0; }

/* ---------- Thanh lọc và biểu mẫu ---------- */
.filter-bar, .filter-form {
    display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3) var(--space-4); padding: var(--space-4) var(--space-5);
    background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-lg); box-shadow: var(--shadow-1);
}
.filter-bar .field, .filter-form > div { flex: 1 1 180px; min-width: 0; }
/* Ô lọc rộng cố định: hàng cuối không bị kéo giãn; nút Lọc và Xóa bộ lọc đứng liền ngay sau ô cuối. */
.filter-bar .field, .filter-form > div { flex: 0 1 220px; }
.filter-form > div { display: flex; flex-direction: column; gap: var(--space-1); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-5); }
.field { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.field--full, .form-grid > .form-actions { grid-column: 1 / -1; }
label, .field-label { color: var(--color-ink-soft); font-size: var(--text-sm); font-weight: 600; }
.field-hint { color: var(--color-muted); font-size: var(--text-xs); }
.field-error { display: flex; gap: var(--space-1); color: var(--color-danger); font-size: var(--text-xs); font-weight: 500; }
.field-error::before { content: "!"; display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--color-danger); color: var(--color-on-primary); font-size: 11px; font-weight: 700; }
input:not([type="checkbox"], [type="radio"], [type="hidden"]), select, textarea {
    width: 100%; min-height: 40px; padding: var(--space-2) var(--space-3); background: var(--color-surface);
    border: 1px solid var(--color-input-border); border-radius: var(--radius-sm); color: var(--color-ink);
}
textarea { min-height: 112px; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--color-placeholder); }
input:hover, select:hover, textarea:hover { border-color: var(--color-plum-500); }
/* Ô nhập: viền tím + quầng mờ thay cho vòng outline; outline trong suốt để chế độ tương phản cao (forced-colors) vẫn thấy. */
:is(input, select, textarea):focus-visible, .ux :is(input, select, textarea):focus-visible {
    outline: 2px solid transparent; outline-offset: 0; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-focus-ring);
}
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--color-danger); background: var(--color-danger-soft); }
input:disabled, select:disabled, textarea:disabled { background: var(--color-surface-sunken); color: var(--color-muted); cursor: not-allowed; }
input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; accent-color: var(--color-primary); }
.form-actions { padding-top: var(--space-4); border-top: 1px solid var(--color-line); }
.reset-link { align-self: center; font-size: var(--text-sm); }

/* ---------- Bảng ---------- */
.table-scroll { position: relative; overflow-x: auto; background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); }
.table-scroll:focus-visible { outline-offset: 2px; }
.panel-body > .table-scroll { box-shadow: none; }
.data-table, .table-scroll > table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.data-table caption { padding: var(--space-4) var(--space-5) var(--space-2); text-align: left; color: var(--color-muted); font-size: var(--text-sm); font-weight: 500; caption-side: top; }
.data-table th, .data-table td, .table-scroll > table th, .table-scroll > table td { padding: var(--space-3) var(--space-4); text-align: left; vertical-align: top; border-bottom: 1px solid var(--color-line); }
.data-table thead th, .table-scroll > table thead th {
    position: sticky; top: 0; background: var(--color-sky-50); color: var(--color-ink-soft); font-size: var(--text-sm);
    font-weight: 600; white-space: nowrap;
}
.data-table tbody tr, .table-scroll > table tbody tr { transition: background var(--duration-fast); }
.data-table tbody tr:hover, .table-scroll > table tbody tr:hover { background: rgb(240 246 254 / 70%); }
.data-table td a:not(.btn, .icon-btn) { font-weight: 600; text-decoration: none; }
.data-table td a:not(.btn, .icon-btn):hover { text-decoration: underline; }
.data-table tbody tr:last-child td, .table-scroll > table tbody tr:last-child td { border-bottom: 0; }
.data-table .num, .data-table th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Ô thao tác vẫn là ô bảng (display:flex trên td làm vỡ cột, bảng tràn ngang). */
.data-table td.row-actions, .data-table th.row-actions { display: table-cell; text-align: right; white-space: nowrap; }
.data-table td.row-actions > * + * { margin-left: var(--space-2); }
.data-table tbody td:first-child { min-width: 16ch; }
.data-table td small, .table-scroll td small { color: var(--color-muted); }
.empty-cell { padding: var(--space-8) var(--space-4) !important; text-align: center !important; color: var(--color-muted); }

/* ---------- Nút icon tròn trong bảng + chú thích nổi ---------- */
/* Thao tác trong bảng dùng icon cho gọn; aria-label đầy đủ cho trình đọc màn hình, data-tip hiện khi rê chuột hoặc focus. */
.icon-btn {
    position: relative; display: inline-grid; place-items: center; width: 32px; height: 32px; flex: none; padding: 0; vertical-align: middle;
    border: 1px solid var(--color-plum-200); border-radius: 50%; background: var(--color-plum-50); color: var(--color-primary);
    cursor: pointer; text-decoration: none;
    transition: transform var(--duration-fast) var(--ease-out), background var(--duration-fast), border-color var(--duration-fast);
}
.icon-btn .icon { width: 18px; height: 18px; }
.icon-btn:hover { background: var(--color-plum-100); border-color: var(--color-plum-500); color: var(--color-primary-strong); text-decoration: none; transform: translateY(-1px); }
.icon-btn:active { transform: scale(0.94); }
.icon-btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: 50%; }
.icon-btn--primary { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); }
.icon-btn--primary:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); color: var(--color-on-primary); }
.icon-btn--danger { color: var(--color-danger); }
.icon-btn--danger:hover { background: var(--color-danger); border-color: var(--color-danger); color: var(--color-on-primary); }
.icon-btn[data-tip]::after {
    content: attr(data-tip); position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 5; padding: 4px 10px;
    border-radius: var(--radius-pill); background: var(--color-plum-950); color: var(--color-on-primary);
    font-size: var(--text-xs); font-weight: 500; line-height: 1.5; white-space: nowrap; pointer-events: none;
    opacity: 0; transform: translateY(4px); transition: opacity var(--duration-fast), transform var(--duration-fast) var(--ease-out);
}
.icon-btn[data-tip]:is(:hover, :focus-visible)::after { opacity: 1; transform: none; }
td.row-actions form { display: inline-flex; margin: 0; vertical-align: middle; }
@media (prefers-reduced-motion: reduce) { .icon-btn, .icon-btn[data-tip]::after { transition: none; } .icon-btn:hover { transform: none; } }

/* ---------- Hộp thoại (modal) cho thao tác sửa / trả lại / rút trong bảng ---------- */
/* <dialog class="modal"> mở bằng nút [data-dialog-open]; không bung ô nhập trong ô bảng. */
dialog.modal {
    width: min(560px, calc(100vw - 2 * var(--space-4))); max-height: calc(100dvh - 2 * var(--space-6)); padding: 0;
    border: 1px solid var(--color-line); border-radius: var(--radius-lg); background: var(--color-surface); color: var(--color-ink);
    box-shadow: var(--shadow-2); overflow: auto;
}
dialog.modal[open] { animation: modal-in var(--duration-fast) var(--ease-out); }
dialog.modal::backdrop { background: rgb(0 42 92 / 38%); backdrop-filter: blur(2px); }
.modal-header {
    position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
    padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-line); background: var(--color-surface);
}
.modal-header h2 { font-size: var(--text-md); }
.modal-body { padding: var(--space-5); }
.modal-body .form-grid { grid-template-columns: minmax(0, 1fr); }
.modal-body .form-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); }
.modal-error { margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4); border: 1px solid var(--color-danger); border-radius: var(--radius-md); background: var(--color-danger-soft); color: var(--color-danger); font-weight: 500; }
@keyframes modal-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { dialog.modal[open] { animation: none; } }

/* ---------- Nhãn trạng thái ---------- */
.badge {
    display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 8px; border-radius: var(--radius-pill);
    background: var(--color-neutral-soft); color: var(--color-neutral); font-size: var(--text-xs); font-weight: 600; line-height: 1.6; white-space: nowrap;
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentcolor; }
.badge[data-status="submitted"] { background: var(--color-info-soft); color: var(--color-info); }
.badge[data-status="in-review"] { background: var(--color-plum-100); color: var(--color-primary-strong); }
.badge[data-status="need-info"], .badge[data-status="pending"] { background: var(--color-warning-soft); color: var(--color-warning); }
.badge[data-status="approved"], .badge[data-status="active"] { background: var(--color-success-soft); color: var(--color-success); }
.badge[data-status="published"] { background: var(--color-success); color: var(--color-on-primary); }
.badge[data-status="rejected"] { background: var(--color-danger-soft); color: var(--color-danger); }
.badge[data-status="withdrawn"], .badge[data-status="inactive"] { background: var(--color-neutral-soft); color: var(--color-muted); }
.badge[data-status="closed"] { background: var(--color-neutral); color: var(--color-on-primary); }

/* ---------- Chi tiết ---------- */
.detail-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: var(--space-4) var(--space-6); margin: 0; }
.detail-list > div { display: flex; flex-direction: column; gap: 2px; padding-bottom: var(--space-3); border-bottom: 1px dashed var(--color-line); min-width: 0; }
.detail-list dt { color: var(--color-muted); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.detail-list dd { margin: 0; color: var(--color-ink); font-weight: 500; overflow-wrap: anywhere; }

/* ---------- Thẻ chuyển trang ---------- */
/* Thẻ dạng viên thuốc trên nền lõm; thẻ đang mở nền trắng nổi. */
.tabs {
    display: flex; gap: var(--space-1); width: max-content; max-width: 100%; overflow-x: auto; padding: 4px;
    background: var(--color-surface-sunken); border-radius: var(--radius-pill); scrollbar-width: thin;
}
.tabs a {
    position: relative; display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--space-4); color: var(--color-muted);
    border-radius: var(--radius-pill); font-size: var(--text-sm); font-weight: 600; text-decoration: none; white-space: nowrap;
    transition: background var(--duration-fast), color var(--duration-fast);
}
.tabs a::after { display: none; }
.tabs a::after {
    content: ""; position: absolute; left: var(--space-3); right: var(--space-3); bottom: -1px; height: 3px; border-radius: 3px 3px 0 0;
    background: var(--color-primary); transform: scaleX(0); transition: transform var(--duration-normal) var(--ease-out);
}
.tabs a:hover { color: var(--color-primary); }
.tabs a:hover::after { transform: scaleX(0.4); opacity: 0.5; }
.tabs a[aria-current="page"] { color: var(--color-primary-strong); background: var(--color-surface); box-shadow: var(--shadow-1); }
.tabs a[aria-current="page"]::after { transform: scaleX(1); opacity: 1; }

/* ---------- Lịch sử ---------- */
.timeline { position: relative; margin: 0; padding: 0 0 0 var(--space-6); list-style: none; }
.timeline::before { content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: var(--color-line); }
.timeline > li { position: relative; padding-bottom: var(--space-5); }
.timeline > li:last-child { padding-bottom: 0; }
.timeline > li::before {
    content: ""; position: absolute; left: calc(-1 * var(--space-6) + 2px); top: 5px; width: 12px; height: 12px; border-radius: 50%;
    background: var(--color-surface); border: 3px solid var(--color-primary);
}
.timeline > li:first-child::before { border-color: var(--color-gold-500); }
.timeline time { display: block; color: var(--color-muted); font-size: var(--text-xs); font-weight: 600; font-variant-numeric: tabular-nums; }
.timeline p { margin-top: 2px; }

/* ---------- Các bước ---------- */
.steps { display: flex; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.steps > li {
    position: relative; flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); min-width: 0;
    padding: 0 var(--space-2); color: var(--color-muted); font-size: var(--text-sm); text-align: center; counter-increment: step;
}
.steps > li::before {
    content: counter(step); position: relative; z-index: 1; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
    background: var(--color-surface); border: 2px solid var(--color-line-strong); color: var(--color-muted); font-weight: 700; font-size: var(--text-sm);
}
.steps > li + li::after { content: ""; position: absolute; top: 15px; right: 50%; width: 100%; height: 2px; background: var(--color-line-strong); }
.steps > li[data-state="done"] { color: var(--color-ink-soft); }
.steps > li[data-state="done"]::before { content: "\2713"; background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); }
.steps > li[data-state="done"] + li::after, .steps > li[data-state="current"]::after { background: var(--color-primary); }
.steps > li[data-state="current"] { color: var(--color-primary-strong); font-weight: 600; }
.steps > li[data-state="current"]::before { border-color: var(--color-primary); color: var(--color-primary); box-shadow: 0 0 0 4px var(--color-plum-100); }

/* ---------- Trống, thông báo ---------- */
.empty-state {
    display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding: var(--space-12) var(--space-6);
    text-align: center; background: var(--color-surface); border: 1px dashed var(--color-line-strong); border-radius: var(--radius-lg);
    background-image: radial-gradient(circle at 50% 0%, var(--color-plum-50), transparent 60%);
}
.empty-state > * { max-width: 56ch; }
.empty-state h2 { font-size: var(--text-lg); }
.empty-state p { color: var(--color-muted); }
.empty-illustration { width: 72px; height: 72px; color: var(--color-plum-500); stroke-width: 1.25; }
.alert, .validation-summary {
    display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-4) var(--space-5); border-radius: var(--radius-md);
    border: 1px solid var(--color-info); border-left-width: 3px; background: var(--color-info-soft); color: var(--color-ink);
}
.alert h2, .validation-summary h2 { font-size: var(--text-base); }
.alert[data-tone="success"] { border-color: var(--color-success); background: var(--color-success-soft); }
.alert[data-tone="warning"] { border-color: var(--color-warning); background: var(--color-warning-soft); }
.alert[data-tone="danger"], .validation-summary { border-color: var(--color-danger); background: var(--color-danger-soft); }
.validation-summary h2 { color: var(--color-danger); }
.toast {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) var(--space-4);
    background: var(--color-plum-900); color: var(--color-on-primary); border-radius: var(--radius-md); box-shadow: var(--shadow-2);
    animation: toast-in var(--duration-normal) var(--ease-out);
}
.toast button { min-height: 32px; padding: 0 var(--space-3); border: 1px solid rgb(255 255 255 / 35%); border-radius: var(--radius-sm); background: transparent; color: inherit; cursor: pointer; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ---------- Phân trang, kết quả ---------- */
.results-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-3); }
.results-heading h2 { font-size: var(--text-md); }
.results-heading span { color: var(--color-muted); font-size: var(--text-sm); }
/* Hàng phân trang: chọn số dòng (trái) + trước/sau (phải); xuống dòng trên màn hẹp. */
.pager-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-4); }
.pager-row .ux.u043.u043--bar { flex: 1 1 320px; margin: 0; }
.panel > .pager-row { margin: 0; padding: var(--space-3) var(--space-5) var(--space-4); border-top: 1px solid var(--color-line); }
.page-size { white-space: nowrap; display: flex; align-items: center; gap: var(--space-2); color: var(--color-muted); font-size: var(--text-sm); }
.page-size select { height: 36px; padding: 0 var(--space-3); border: 1px solid var(--color-line); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-ink); font: inherit; }
.page-size select:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.page-size-apply { height: 36px; padding: 0 var(--space-3); border: 1px solid var(--color-line); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-link); font: inherit; font-weight: 600; cursor: pointer; }
.js-ready .page-size-apply { display: none; }
.pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-4); }
.pagination a {
    display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--space-4); border: 1px solid var(--color-plum-200);
    border-radius: var(--radius-pill); background: var(--color-surface); font-size: var(--text-sm); font-weight: 600; text-decoration: none;
}
.pagination a:hover { background: var(--color-plum-50); }
.pagination span { color: var(--color-muted); font-size: var(--text-sm); }

/* ---------- Biểu đồ ---------- */
.chart { width: 100%; min-height: 300px; }
.chart[data-chart="pie"], .chart[data-chart="donut"] { min-height: 360px; }
.chart-figure { margin: 0; }
.chart-data { margin-top: var(--space-3); font-size: var(--text-sm); }
.chart-data summary { width: max-content; color: var(--color-link); font-weight: 600; cursor: pointer; }
.chart-data[open] summary { margin-bottom: var(--space-3); }
.chart:not(.chart--ready) { display: grid; place-items: center; background: var(--color-surface-sunken); border-radius: var(--radius-md); color: var(--color-muted); }
.chart:not(.chart--ready)::after { content: "Biểu đồ cần JavaScript, xem bảng số liệu bên dưới."; padding: var(--space-4); font-size: var(--text-sm); text-align: center; }

/* ---------- Trang tổng quan ---------- */
.welcome {
    position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-5);
    padding: var(--space-6) var(--space-8); overflow: hidden; color: var(--color-on-primary); border-radius: var(--radius-xl); box-shadow: var(--shadow-2);
    background:
        radial-gradient(420px 220px at 85% 120%, rgb(43 179 160 / 35%), transparent 70%),
        linear-gradient(120deg, var(--color-plum-900) 0%, var(--color-plum-700) 55%, var(--color-plum-500) 100%);
}
.welcome::after {
    content: ""; position: absolute; right: -60px; top: -60px; width: 260px; height: 260px; border-radius: 50%;
    border: 1px solid rgb(254 215 77 / 35%); box-shadow: 0 0 0 28px rgb(254 215 77 / 7%), 0 0 0 56px rgb(254 215 77 / 5%);
}
.welcome h1 { color: var(--color-on-primary); }
.welcome .page-eyebrow { color: var(--color-gold-300); }
.welcome .page-eyebrow::before { background: var(--color-gold-300); }
.welcome .page-lead { color: var(--color-on-dark-muted); }
.welcome > * { position: relative; z-index: 1; }
.welcome-text { flex: 1 1 360px; min-width: 0; }
.welcome-cta { flex: none; }
.section-title { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.section-title h2 { font-size: var(--text-md); }
.section-title p { color: var(--color-muted); font-size: var(--text-sm); }
.shortcut-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: var(--space-3); }
.shortcut {
    display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4); background: var(--color-surface);
    border: 1px solid rgb(219 227 237 / 70%); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); color: var(--color-ink); text-decoration: none;
    transition: transform var(--duration-fast) var(--ease-out);
}
.shortcut:hover { color: var(--color-ink); border-color: var(--color-plum-200); box-shadow: var(--shadow-2); text-decoration: none; transform: translateY(-2px); }
.shortcut:active { transform: translateY(0); }
.shortcut-icon { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 14px; background: linear-gradient(140deg, var(--color-sky-100), var(--color-teal-50)); color: var(--color-primary); }
.shortcut strong { display: block; font-size: var(--text-sm); font-weight: 600; }
.shortcut small { color: var(--color-muted); font-size: var(--text-xs); }
.stat-module { color: var(--color-muted); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }

/* ---------- Trang mẫu giao diện ---------- */
.swatch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-3); }
.swatch { overflow: hidden; border: 1px solid var(--color-line); border-radius: var(--radius-md); font-size: var(--text-xs); }
.swatch span { display: block; height: 56px; }
.swatch code { display: block; padding: var(--space-2); color: var(--color-ink-soft); }
.swatch--plum span { background: var(--color-plum-700); }
.swatch--plum-dark span { background: var(--color-plum-900); }
.swatch--plum-soft span { background: var(--color-plum-100); }
.swatch--gold span { background: var(--color-gold-500); }
.swatch--bg span { background: var(--color-bg); }
.swatch--success span { background: var(--color-success); }
.swatch--warning span { background: var(--color-warning); }
.swatch--danger span { background: var(--color-danger); }
.swatch--info span { background: var(--color-info); }
/* Ảnh bìa (P-66): xem trước bản nhỏ, không méo ảnh. */
.cover-preview { display: block; width: min(100%, 20rem); height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-md); border: 1px solid var(--color-line); }
.inline-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }

/* ---------- Trang xác thực (đăng nhập, 403, phiên hết hạn) ---------- */
.auth-page {
    display: grid; place-items: center; min-height: 100vh; padding: var(--space-6) var(--space-4);
    background: radial-gradient(1200px 600px at 10% -10%, var(--color-plum-600), transparent 60%), var(--color-plum-950);
}
.auth-shell { display: flex; flex-direction: column; align-items: center; width: 100%; }
.auth-card {
    width: min(100%, 460px); padding: var(--space-8); background: var(--color-surface); border-radius: var(--radius-lg);
    box-shadow: 0 30px 60px -20px rgb(0 0 0 / 50%); border-top: 4px solid var(--color-gold-500);
}
.auth-card > * + * { margin-top: var(--space-4); }
.auth-brand { display: flex; align-items: center; gap: var(--space-3); padding-bottom: var(--space-4); border-bottom: 1px solid var(--color-line); }
.auth-brand .brand-mark { color: var(--color-primary); border-color: var(--color-gold-500); }
.auth-brand .brand-mark span { color: var(--color-gold-700); }
.auth-brand p { color: var(--color-ink-soft); font-size: var(--text-sm); font-weight: 600; line-height: 1.35; }
.auth-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--color-plum-50); color: var(--color-primary); }
.auth-icon[data-tone="warning"] { background: var(--color-warning-soft); color: var(--color-warning); }
.auth-icon[data-tone="danger"] { background: var(--color-danger-soft); color: var(--color-danger); }
.auth-card h1 { font-size: var(--text-xl); }
.auth-card .page-lead { font-size: var(--text-base); }
.auth-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); padding-top: var(--space-2); }
/* Trang trạng thái (503, 403, phiên hết hạn): biểu tượng, tiêu đề, lời nhắn và nút căn giữa thẻ. */
.auth-status { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); text-align: center; }
.auth-status .auth-icon { width: 60px; height: 60px; margin-bottom: var(--space-1); }
.auth-status h1, .auth-status .page-lead { text-wrap: balance; }
.auth-status .page-lead { max-width: 38ch; }
.auth-status .auth-actions { justify-content: center; width: 100%; }
/* P-61: trang chọn cách đăng nhập (tài khoản KNST | Hue-S) — thẻ lựa chọn dạng hàng, cả hàng bấm được. */
.auth-logo { width: 64px; height: 64px; flex: none; border-radius: 50%; box-shadow: 0 6px 16px -8px rgb(0 36 79 / 45%); }
.auth-choice > * + * { margin-top: var(--space-3); }
.login-options { display: grid; gap: var(--space-3); margin: var(--space-4) 0 0; padding: 0; list-style: none; }
.login-option {
    display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--color-line-strong);
    border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-ink); text-decoration: none;
    transition: border-color var(--duration-fast), box-shadow var(--duration-fast), transform var(--duration-fast) var(--ease-out);
}
a.login-option:hover { border-color: var(--color-primary); box-shadow: 0 10px 24px -14px rgb(0 83 178 / 55%); transform: translateY(-1px); text-decoration: none; color: var(--color-ink); }
a.login-option:active { transform: translateY(0); box-shadow: none; }
a.login-option:focus-visible { outline: 3px solid var(--color-gold-500); outline-offset: 2px; }
.login-option[aria-disabled="true"] { background: var(--color-surface-sunken); color: var(--color-muted); cursor: not-allowed; }
.login-option__icon {
    display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 12px;
    background: var(--color-plum-50); color: var(--color-primary);
}
.login-option__icon--hues { width: 56px; background: var(--color-primary); color: #fff; font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.02em; }
.login-option[aria-disabled="true"] .login-option__icon--hues { background: var(--color-neutral); }
.login-option__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.login-option__text b { font-size: var(--text-base); font-weight: 600; }
.login-option__text small { color: var(--color-muted); font-size: var(--text-sm); line-height: 1.4; }
.login-option__go { color: var(--color-primary); transition: transform var(--duration-fast) var(--ease-out); }
a.login-option:hover .login-option__go { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .login-option, .login-option__go { transition: none; } a.login-option:hover { transform: none; } }
.auth-foot { width: min(100%, 460px); margin-top: var(--space-5); color: var(--color-on-dark-muted); font-size: var(--text-xs); text-align: center; }

/* ---------- Đáp ứng ---------- */
@media (max-width: 1200px) {
    .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
    .grid-2, .grid-3, .form-grid { grid-template-columns: minmax(0, 1fr); }
    .shell, .shell--rail { grid-template-columns: minmax(0, 1fr); }
    .content { padding: var(--space-5) var(--space-4) var(--space-10); }
    .site-footer { padding: var(--space-5) var(--space-4); }
    /* Không có JS: sidebar nằm ngay trên nội dung, menu vẫn bấm được và vẫn đăng xuất được. */
    .sidebar { position: static; height: auto; }
    .sidebar-nav { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); overflow: visible; }
    .sidebar-toggle { display: none; }
    /* Có JS: thanh mảnh trên cùng + sidebar thành ngăn kéo trượt từ trái (tài khoản, đăng xuất, nút đóng vẫn ở cuối). */
    .js-ready .mobilebar {
        position: sticky; top: 0; z-index: 25; display: flex; align-items: center; gap: var(--space-3); height: var(--mobilebar-h);
        padding: 0 var(--space-3); background: var(--color-plum-900); color: #fff; border-bottom: 1px solid rgb(254 215 77 / 30%);
    }
    .js-ready .sidebar {
        /* Ngăn kéo vẫn là con của lưới .shell: align-self: start (từ bản máy bàn) làm nó co theo nội dung, phải kéo giãn lại hết chiều cao. */
        position: fixed; top: 0; left: 0; bottom: 0; z-index: 35; width: min(86vw, 300px); align-self: stretch; height: 100vh; height: 100dvh;
        box-shadow: var(--shadow-2); transform: translateX(-105%); visibility: hidden;
        transition: transform var(--duration-normal) var(--ease-out), visibility 0s linear var(--duration-normal);
    }
    .js-ready .sidebar-nav { display: flex; overflow-y: auto; }
    .js-ready .sidebar-toggle { display: inline-grid; }
    .js-ready .shell--drawer-open .sidebar { transform: none; visibility: visible; transition: transform var(--duration-normal) var(--ease-out); }
    .js-ready .nav-backdrop {
        display: block; position: fixed; inset: 0; z-index: 30; border: 0; padding: 0; background: rgb(0 22 52 / 50%);
        opacity: 0; pointer-events: none; transition: opacity var(--duration-normal);
    }
    .js-ready .shell--drawer-open .nav-backdrop { opacity: 1; pointer-events: auto; }
}
@media (max-width: 640px) {
    .welcome { padding: var(--space-6) var(--space-5); }
    .page-header { align-items: stretch; }
    .page-actions { width: 100%; }
    .steps { flex-direction: column; align-items: stretch; gap: var(--space-3); }
    .steps > li { flex-direction: row; text-align: left; padding: 0; }
    .steps > li + li::after { display: none; }
    .auth-card { padding: var(--space-6) var(--space-5); }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
@media print {
    .mobilebar, .sidebar, .site-footer, .nav-backdrop, .page-actions { display: none !important; }
    .shell { display: block; }
    body { background: #fff; }
}

/* ---------- Danh sách gọn (CTT, 10/11/2026): lọc dạng đoạn, ô chính có trích đoạn một dòng ---------- */
.seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 2px; background: var(--color-surface-muted, var(--color-bg)); border: 1px solid var(--color-line); border-radius: 999px; }
.seg a { padding: 4px 12px; border-radius: 999px; color: var(--color-ink-soft); font-size: var(--text-sm); font-weight: 600; text-decoration: none; transition: background var(--duration-fast, 150ms), color var(--duration-fast, 150ms); }
.seg a:hover { color: var(--color-primary); }
.seg a[aria-current="page"] { background: var(--color-surface); color: var(--color-primary-strong); box-shadow: var(--shadow-1); }
.seg a:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; }
.cell-main { max-width: 36rem; }
.cell-main strong { display: block; color: var(--color-ink); }
.cell-excerpt { display: -webkit-box; -webkit-line-clamp: 1; line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; color: var(--color-muted); font-size: var(--text-sm); }
.question-body { margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4); background: var(--color-bg); border-left: 3px solid var(--color-primary); border-radius: var(--radius-md, 6px); white-space: pre-line; overflow-wrap: anywhere; }
.panel--note { border-left: 3px solid var(--color-warning, var(--color-primary)); }
.compose-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr)); gap: var(--space-3); }
.compose-grid .btn { justify-content: center; }
.panel-body > .filter-bar { padding: 0; border: 0; box-shadow: none; background: transparent; }
.qa-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--color-line); border-radius: var(--radius-lg); }
.qa-list > li + li { border-top: 1px solid var(--color-line); }
.qa-item > summary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); padding: var(--space-3) var(--space-4); cursor: pointer; list-style: none; }
.qa-item > summary::-webkit-details-marker { display: none; }
.qa-item > summary:hover { background: var(--color-bg); }
.qa-item > summary:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }
.qa-title { flex: 1 1 16rem; font-weight: 600; color: var(--color-ink); }
.qa-meta { color: var(--color-muted); font-size: var(--text-sm); }
.qa-body { padding: 0 var(--space-4) var(--space-4); }
.qa-answer { margin: 0; overflow-wrap: anywhere; white-space: pre-line; }