/* ========================================================================= cqtt81.vn – khu quản trị. Gọn, rõ, ưu tiên bảng và biểu mẫu. Dùng cùng bộ màu với trang công khai. ========================================================================= */ @font-face { font-family: "Be Vietnam Pro"; src: url("../fonts/be-vietnam-pro-Regular.woff2") format("woff2"), url("../fonts/be-vietnam-pro-Regular.woff") format("woff"); font-weight: 400; font-display: swap; } @font-face { font-family: "Be Vietnam Pro"; src: url("../fonts/be-vietnam-pro-Medium.woff2") format("woff2"), url("../fonts/be-vietnam-pro-Medium.woff") format("woff"); font-weight: 500; font-display: swap; } @font-face { font-family: "Be Vietnam Pro"; src: url("../fonts/be-vietnam-pro-SemiBold.woff2") format("woff2"), url("../fonts/be-vietnam-pro-SemiBold.woff") format("woff"); font-weight: 600; font-display: swap; } @font-face { font-family: "Source Serif 4"; src: url("../fonts/source-serif-4-Regular.woff2") format("woff2"), url("../fonts/source-serif-4-Regular.woff") format("woff"); font-weight: 400; font-display: swap; } :root { --navy: #211E57; --navy-deep: #17153F; --navy-soft: #E9E8F4; --gold: #D4A43A; --gold-wash: #FBF3DF; --gold-ink: #7A5A12; --paper: #FFFFFF; --mist: #F4F4F9; --line: #DEDFEA; --ink: #1B1A2E; --slate: #555A72; --link: #2A2590; --ok: #1E6B3A; --ok-wash: #E6F4EA; --warn: #8A5A00; --warn-wash: #FFF4D6; --error: #B42318; --error-wash: #FDEDEB; --info: #1F4E8C; --info-wash: #E7EEF9; --font: "Be Vietnam Pro", "Segoe UI", Arial, sans-serif; --radius: 6px; color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --navy: #2A2768; --navy-deep: #1A1846; --navy-soft: #24224A; --gold: #DDB04C; --gold-wash: #2B2414; --gold-ink: #E8C46E; --paper: #121120; --mist: #1A192C; --line: #2F2D49; --ink: #ECEBF7; --slate: #A9AAC4; --link: #B2AEFF; --ok: #7FD39B; --ok-wash: #15301F; --warn: #F1C76A; --warn-wash: #33280F; --error: #F7867C; --error-wash: #3A1B18; --info: #9CC0F5; --info-wash: #18263D; color-scheme: dark; } } :root[data-theme="dark"] { --navy: #2A2768; --navy-deep: #1A1846; --navy-soft: #24224A; --gold: #DDB04C; --gold-wash: #2B2414; --gold-ink: #E8C46E; --paper: #121120; --mist: #1A192C; --line: #2F2D49; --ink: #ECEBF7; --slate: #A9AAC4; --link: #B2AEFF; --ok: #7FD39B; --ok-wash: #15301F; --warn: #F1C76A; --warn-wash: #33280F; --error: #F7867C; --error-wash: #3A1B18; --info: #9CC0F5; --info-wash: #18263D; color-scheme: dark; } *, *::before, *::after { box-sizing: border-box; } body { margin: 0; font: 15px/1.5 var(--font); color: var(--ink); background: var(--mist); } a { color: var(--link); } a:hover { text-decoration-thickness: 2px; } :focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; } h1, h2, h3 { line-height: 1.25; margin: 0 0 .5rem; font-weight: 600; } h1 { font-size: 1.5rem; } h2 { font-size: 1.125rem; } h3 { font-size: 1rem; } p { margin: 0 0 .75rem; } code { font-family: ui-monospace, Consolas, monospace; font-size: .875em; background: var(--mist); padding: 0 .25em; border-radius: 3px; word-break: break-all; } small { font-size: .8125rem; } .muted, tr.muted td { color: var(--slate); } .skip-link { position: absolute; left: -999px; top: 0; background: var(--gold); color: #1B1A2E; padding: .5rem 1rem; z-index: 99; } .skip-link:focus { left: 1rem; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } [hidden] { display: none !important; } /* ---- Khung ---------------------------------------------------------------- */ .adm-top { display: flex; align-items: center; gap: 1rem; padding: .5rem 16px; background: var(--navy); color: #F3F2FF; border-bottom: 3px solid var(--gold); position: sticky; top: 0; z-index: 20; } .adm-top a { color: #F3F2FF; text-decoration: none; } .adm-top__brand { display: flex; align-items: center; gap: .5rem; font-weight: 600; } .adm-top__site { font-size: .875rem; opacity: .85; } .adm-top__user { margin-left: auto; display: flex; gap: 1rem; align-items: center; font-size: .875rem; } .adm-top__user form { margin: 0; } .adm-top .linklike { color: #F3F2FF; } .adm-top__menu { display: none; background: none; border: 1px solid rgba(255,255,255,.4); color: #fff; border-radius: var(--radius); padding: .25rem .6rem; font: inherit; } .adm-body { display: grid; grid-template-columns: 15rem 1fr; min-height: calc(100vh - 52px); } .adm-nav { background: var(--paper); border-right: 1px solid var(--line); padding: 1rem 0 2rem; font-size: .9rem; overflow-y: auto; } .adm-nav { padding: .75rem 0 2rem; } /* Nhóm menu thu gọn: thanh tiêu đề có màu nền riêng từng nhóm */ .adm-nav__sec { margin: 0 10px 8px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--sec-line); background: var(--paper); } .adm-nav__sec > summary { list-style: none; display: flex; align-items: center; gap: .5rem; padding: .6rem .8rem .6rem .9rem; cursor: pointer; user-select: none; background: var(--sec-bg); color: var(--sec-ink); font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; border-left: 4px solid var(--sec-accent); } .adm-nav__sec > summary::-webkit-details-marker { display: none; } .adm-nav__sec > summary > span:first-child { flex: 1; } .adm-nav__sec > summary::after { content: ""; width: .5rem; height: .5rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .15s; margin-right: 2px; } .adm-nav__sec[open] > summary::after { transform: rotate(45deg); } .adm-nav__sec > summary:hover { filter: brightness(0.97); } .adm-nav__sec > summary:focus-visible { outline: 3px solid var(--gold); outline-offset: -3px; } .adm-nav__sec > ul { padding: .3rem 0 .4rem; } .adm-nav__sec--navy { --sec-bg: #E4E3F3; --sec-ink: #211E57; --sec-accent: #211E57; --sec-line: #D3D1EA; } .adm-nav__sec--teal { --sec-bg: #DDEFEF; --sec-ink: #0F4C51; --sec-accent: #1C7C83; --sec-line: #C6E3E4; } .adm-nav__sec--gold { --sec-bg: #F8EDD3; --sec-ink: #6B4D0E; --sec-accent: #C99A2E; --sec-line: #EEDCB1; } .adm-nav__sec--green { --sec-bg: #E1F0E4; --sec-ink: #1F5130; --sec-accent: #3A8A55; --sec-line: #CAE4D0; } .adm-nav__sec--slate { --sec-bg: #E8E9EF; --sec-ink: #343850; --sec-accent: #6A6F88; --sec-line: #D7D9E2; } .adm-nav__subs > summary { list-style: none; cursor: pointer; padding: .3rem 16px; color: var(--slate); font-size: .85rem; display: flex; align-items: center; gap: .4rem; } .adm-nav__subs > summary::-webkit-details-marker { display: none; } .adm-nav__subs > summary::before { content: "▸"; font-size: .75rem; transition: transform .15s; } .adm-nav__subs[open] > summary::before { transform: rotate(90deg); } .adm-nav__subs > summary:hover { background: var(--mist); color: var(--ink); } .adm-nav ul { list-style: none; margin: 0; padding: 0; } .adm-nav a { display: flex; justify-content: space-between; gap: .5rem; padding: .3rem 16px; color: var(--ink); text-decoration: none; border-left: 3px solid transparent; } .adm-nav li.sub a { padding-left: 32px; font-size: .85rem; color: var(--slate); } .adm-nav a:hover { background: var(--mist); } .adm-nav a[aria-current="page"] { border-left-color: var(--gold); background: var(--navy-soft); font-weight: 600; } .badge { background: var(--error); color: #fff; border-radius: 99px; padding: 0 .45em; font-size: .75rem; font-weight: 600; min-width: 1.5em; text-align: center; } .adm-main { padding: 1.25rem 24px 3rem; min-width: 0; } @media (max-width: 860px) { .adm-body { grid-template-columns: 1fr; } .adm-nav { display: none; border-right: 0; border-bottom: 1px solid var(--line); } .adm-nav.is-open { display: block; } .adm-top__menu { display: inline-block; } .adm-top__site { display: none; } .adm-main { padding: 1rem 16px 3rem; } } /* ---- Thành phần ----------------------------------------------------------- */ /* Căn theo đường chân chữ: chữ của tiêu đề và chữ của nút/liên kết bên phải nằm trên cùng một đường, thay vì căn giữa hộp (hộp cao thấp khác nhau nên chữ bị lệch). */ .page-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; } .page-head h1 { margin: 0; } .panel { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.25rem; min-width: 0; } fieldset.panel { margin: 0; } fieldset.panel > legend { font-weight: 600; padding: 0 .25rem; } .stack > * + * { margin-top: .75rem; } .stack > .field + .field { margin-top: .6rem; } .row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; } .grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; } .grid-2--wide { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); } /* Căn mép trên để các ô nhập trên cùng một hàng thẳng nhau: căn đáy sẽ làm ô bị lệch khi dòng gợi ý dưới ô dài ngắn khác nhau. */ .grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem 1rem; align-items: start; } @media (max-width: 1000px) { .grid-2, .grid-2--wide, .grid-3 { grid-template-columns: 1fr; } } .narrow { max-width: 32rem; } .inline { display: inline; } .nowrap { white-space: nowrap; } .plain { list-style: none; margin: 0; padding: 0; } .plain li { padding: .35rem 0; border-bottom: 1px solid var(--line); } .plain li:last-child { border-bottom: 0; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; font: 500 .9rem/1.2 var(--font); padding: .5rem .9rem; border-radius: var(--radius); border: 1px solid var(--line); background: var(--paper); color: var(--ink); cursor: pointer; text-decoration: none; min-height: 2.25rem; } .btn:hover { border-color: var(--slate); } .btn--primary { background: var(--navy); border-color: var(--navy); color: #fff; } .btn--primary:hover { background: var(--navy-deep); } .btn--danger { color: var(--error); border-color: currentColor; background: var(--paper); } .btn--danger:hover { background: var(--error-wash); } .btn--small { padding: .2rem .5rem; min-height: 1.75rem; font-size: .8125rem; } .btn--block { width: 100%; } .linklike { background: none; border: 0; padding: 0; color: var(--link); font: inherit; cursor: pointer; text-decoration: underline; } a.danger { color: var(--error); } .field label, .checks legend { display: block; font-weight: 500; font-size: .875rem; margin-bottom: .25rem; } .req { color: var(--error); } input[type=text], input[type=email], input[type=password], input[type=search], input[type=number], input[type=url], input[type=date], input[type=datetime-local], input:not([type]), select, textarea { width: 100%; font: inherit; color: var(--ink); background: var(--paper); border: 1px solid #B9BBD0; border-radius: var(--radius); padding: .45rem .6rem; min-height: 2.25rem; } textarea { resize: vertical; line-height: 1.5; } select[multiple] { min-height: 8rem; } input:focus, select:focus, textarea:focus { border-color: var(--navy); outline: 2px solid var(--gold); outline-offset: 0; } .input--title { font-size: 1.25rem; font-weight: 600; } .input--code { font-size: 1.5rem; letter-spacing: .3em; text-align: center; font-variant-numeric: tabular-nums; } .input--small { padding: .25rem .4rem; min-height: 1.9rem; font-size: .875rem; } .input--tiny { width: 5rem; padding: .2rem .4rem; min-height: 1.8rem; } .hint { color: var(--slate); font-size: .8125rem; margin: .25rem 0 0; } /* Chú thích dạng gạch đầu dòng: dễ đọc hơn đoạn văn dài. Không dùng .plain vì lớp đó kẻ viền dưới từng dòng, trông như bảng dữ liệu chứ không như chú thích (01/11/2026). */ .hint--list { list-style: disc; padding-left: 1.15rem; } .hint--list li { padding: 0; border: 0; margin: .15rem 0; } .field--check { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; } .field--check label { margin: 0; font-weight: 400; } .field--check .hint { flex-basis: 100%; } .checks { border: 0; padding: 0; margin: 0; } .check { display: inline-flex; align-items: center; gap: .3rem; margin: .1rem 1rem .1rem 0; font-size: .9rem; } .checks .check { display: flex; } .checks .check label { font-weight: 400; margin: 0; } details.scope { margin-top: .25rem; } details.scope summary { cursor: pointer; font-size: .85rem; color: var(--link); } details.scope .check { display: flex; margin-left: 1rem; } .filters { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-end; margin-bottom: 1rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: .75rem 1rem; } .filters .field { min-width: 10rem; } .filters .field--check { padding-bottom: .5rem; } .table-wrap { overflow-x: auto; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); } .table { width: 100%; border-collapse: collapse; font-size: .9rem; } .table th, .table td { text-align: left; padding: .55rem .75rem; border-bottom: 1px solid var(--line); vertical-align: top; } .table thead th { background: var(--mist); font-weight: 600; font-size: .8125rem; color: var(--slate); white-space: nowrap; } .table tbody tr:last-child td { border-bottom: 0; } .table tr.group th { background: var(--navy-soft); } .table--compact th, .table--compact td { padding: .3rem .5rem; } .panel .table { font-size: .875rem; } .num { text-align: right !important; font-variant-numeric: tabular-nums; } .empty { text-align: center !important; color: var(--slate); padding: 1.5rem !important; } .tree.depth-1 { padding-left: 1.75rem; } .tree.depth-2 { padding-left: 3rem; } .tree.depth-3, .tree.depth-4 { padding-left: 4.25rem; } .tree.depth-1::before, .tree.depth-2::before, .tree.depth-3::before, .tree.depth-4::before { content: "└ "; color: var(--slate); } .tag { display: inline-block; font-size: .75rem; font-weight: 500; padding: .05rem .45rem; border-radius: 99px; background: var(--mist); color: var(--slate); border: 1px solid var(--line); white-space: nowrap; } .tag--ok, .tag--published { background: var(--ok-wash); color: var(--ok); border-color: transparent; } .tag--warn, .tag--pending { background: var(--warn-wash); color: var(--warn); border-color: transparent; } .tag--error { background: var(--error-wash); color: var(--error); border-color: transparent; } .tag--info { background: var(--info-wash); color: var(--info); border-color: transparent; } .tag--draft { background: var(--mist); } .tag--archived, .tag--muted { opacity: .8; } .lang-pill { display: inline-block; font-size: .7rem; font-weight: 600; padding: 0 .3rem; margin-right: .15rem; border: 1px solid var(--line); border-radius: 3px; color: var(--slate); opacity: .45; } .lang-pill.is-current, .lang-pill.is-have { opacity: 1; } .lang-pill.is-current { background: var(--navy); color: #fff; border-color: var(--navy); } .alert { padding: .7rem 1rem; border-radius: var(--radius); border-left: 4px solid; margin: 0 0 1rem; } .alert p:last-child { margin: 0; } .alert--ok { background: var(--ok-wash); border-color: var(--ok); } .alert--warn { background: var(--warn-wash); border-color: var(--warn); } .alert--error { background: var(--error-wash); border-color: var(--error); } .alert--info { background: var(--info-wash); border-color: var(--info); } .alert--warn-box { border-color: var(--warn); border-left-width: 4px; } .tabs { display: flex; flex-wrap: wrap; gap: .25rem; border-bottom: 1px solid var(--line); margin-bottom: 1rem; } .tabs a { padding: .5rem .9rem; text-decoration: none; color: var(--slate); border-bottom: 3px solid transparent; margin-bottom: -1px; } .tabs a[aria-current="page"] { color: var(--ink); border-color: var(--gold); font-weight: 600; } .pager { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: 1rem; } .pager a, .pager span { padding: .3rem .65rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); text-decoration: none; } .pager [aria-current] { background: var(--navy); color: #fff; border-color: var(--navy); } .facts { display: grid; grid-template-columns: max-content 1fr; gap: .3rem 1rem; margin: 0 0 1rem; font-size: .9rem; } .facts dt { color: var(--slate); } .facts dd { margin: 0; min-width: 0; } .stats { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .75rem; } .stats li > a, .stats li { display: block; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: .75rem 1rem; text-decoration: none; color: var(--ink); } .stats li > a { border: 0; padding: 0; } .stats strong { display: block; font-size: 1.5rem; font-variant-numeric: tabular-nums; } .stats span { color: var(--slate); font-size: .85rem; } /* ---- Soạn bài --------------------------------------------------------------- */ .editor-grid { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 1rem; align-items: start; } @media (max-width: 1100px) { .editor-grid { grid-template-columns: 1fr; } } .editor-side .sticky { position: sticky; top: 64px; } @media (max-width: 1100px) { .editor-side .sticky { position: static; } } .actions { display: flex; flex-wrap: wrap; gap: .5rem; } .cover-preview { max-width: 100%; height: auto; border-radius: var(--radius); border: 1px solid var(--line); display: block; } .prose { font: 1.0625rem/1.65 "Source Serif 4", Georgia, serif; } .prose img { max-width: 100%; height: auto; } .filelist { list-style: none; margin: 0; padding: 0; } .filelist li { display: flex; align-items: center; gap: .75rem; padding: .5rem 0; border-bottom: 1px solid var(--line); } .filelist img { width: 64px; height: 48px; object-fit: cover; border-radius: 4px; flex: none; } .filelist__name { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .2rem; } .filelist__tools { display: flex; gap: .2rem; flex: none; } .fileicon { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 48px; flex: none; background: var(--navy-soft); color: var(--navy); font-weight: 600; font-size: .75rem; border-radius: 4px; } .fileicon--big { width: 100%; height: 110px; font-size: 1rem; } .filegrid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .75rem; } .filegrid li > a { display: flex; flex-direction: column; gap: .3rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: .4rem; text-decoration: none; color: var(--ink); height: 100%; } .filegrid li.is-selected > a { outline: 3px solid var(--gold); } .filegrid img { width: 100%; height: 110px; object-fit: cover; border-radius: 4px; background: var(--mist); } .filegrid__name { font-size: .8125rem; overflow-wrap: anywhere; } .filegrid__meta { font-size: .75rem; color: var(--slate); } /* ---- Đăng nhập --------------------------------------------------------------- */ body.auth { display: grid; place-items: center; min-height: 100vh; padding: 16px; background: var(--navy); } .auth__box { width: 100%; max-width: 26rem; background: var(--paper); border-radius: 10px; padding: 1.75rem; border-top: 4px solid var(--gold); box-shadow: 0 10px 40px rgba(0,0,0,.25); } .auth__brand { display: flex; gap: .75rem; align-items: center; margin-bottom: 1.25rem; } .auth__brand strong { display: block; } .auth__brand span { color: var(--slate); font-size: .875rem; } .auth h1 { font-size: 1.25rem; } .steps { padding-left: 1.25rem; } .qr { display: flex; justify-content: center; margin: .5rem 0; } .qr svg { max-width: 220px; height: auto; border: 1px solid var(--line); border-radius: 6px; } .secret { font-size: 1rem; letter-spacing: .08em; display: inline-block; padding: .3rem .5rem; } .codes { columns: 2; font-size: 1.1rem; } .codes code { font-size: 1rem; } @media print { .adm-top, .adm-nav, .btn, .tabs { display: none !important; } .adm-body { display: block; } body { background: #fff; } } .mt { margin-top: 1.5rem; } .pre-wrap { white-space: pre-wrap; font-size: .85rem; max-height: 24rem; overflow: auto; background: var(--mist); padding: .75rem; border-radius: 6px; } .cl-tree li { padding: .3rem 0; } .danger { color: var(--error); } /* ---- Ô chọn nhiều tệp (multifile.js) ---- */ .multifile { display: grid; gap: 8px; padding: 12px; border: 2px dashed var(--line-strong, #CDCFE0); border-radius: 8px; } .multifile.is-drag { border-color: var(--navy, #201D55); background: var(--navy-soft, #ECEBF6); } .multifile.is-error { border-color: var(--alert, #B42318); } .multifile__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; } .multifile__hint { font-size: .8125rem; color: var(--slate, #595D74); } .multifile__input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .multifile__list { list-style: none; margin: 0; padding: 0; } .multifile__list:empty { display: none; } .multifile__list li { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid var(--line, #E3E4EE); font-size: .875rem; } .multifile__name { flex: 1; min-width: 0; overflow-wrap: anywhere; } .multifile__list small { color: var(--slate, #595D74); white-space: nowrap; } .multifile__sum { color: var(--slate, #595D74); font-weight: 600; } .multifile__msg { margin: 0; color: var(--alert, #B42318); font-size: .875rem; } .multifile__msg:empty { display: none; } /* Thư viện tệp (chọn lại ảnh/tài liệu đã tải lên) */ .lib { width: min(1100px, calc(100vw - 2rem)); height: min(820px, calc(100vh - 2rem)); padding: 0; border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); background: var(--paper); } .lib[open] { display: flex; flex-direction: column; } .lib::backdrop { background: rgba(23, 21, 63, .55); } .lib__head, .lib__bar, .lib__foot { display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem; flex: none; } .lib__head { justify-content: space-between; border-bottom: 1px solid var(--line); } .lib__head h2 { margin: 0; font-size: 1.125rem; } .lib__bar input[type="search"] { flex: 1 1 auto; width: auto; min-width: 0; } .lib__bar select { flex: none; width: auto; min-width: 9rem; } .lib__bar select:disabled { opacity: .7; } .lib__body { flex: 1; overflow: auto; padding: 0 1rem 1rem; background: var(--mist); } .lib__grid { list-style: none; margin: 0; padding: 1rem 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .75rem; } .lib__card { display: flex; flex-direction: column; gap: .3rem; width: 100%; height: 100%; padding: .4rem; text-align: left; font: inherit; color: var(--ink); background: var(--paper); border: 2px solid var(--line); border-radius: var(--radius); cursor: pointer; position: relative; } .lib__card:hover { border-color: var(--slate); } .lib__card:focus-visible { outline: 3px solid var(--gold); outline-offset: 1px; } .lib__card[aria-selected="true"] { border-color: var(--navy); box-shadow: 0 0 0 2px var(--navy); } .lib__card[aria-selected="true"]::after { content: "✓"; position: absolute; top: .3rem; right: .3rem; width: 1.6rem; height: 1.6rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--navy); color: #fff; font-weight: 700; } .lib__card:disabled { cursor: not-allowed; opacity: .55; } .lib__card img { width: 100%; height: 110px; object-fit: cover; border-radius: 4px; background: var(--mist); } .lib__name { font-size: .8125rem; font-weight: 500; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .lib__meta { font-size: .75rem; color: var(--slate); } .lib__tag { align-self: flex-start; font-size: .7rem; padding: .05rem .45rem; border-radius: 99px; background: var(--navy-soft); color: var(--navy); } .lib__tag--warn { background: var(--gold-wash); color: var(--gold-ink); } .lib__more { text-align: center; padding-top: 1rem; } .lib__foot { border-top: 1px solid var(--line); justify-content: flex-end; } .lib__status { margin-right: auto; font-size: .85rem; color: var(--slate); } @media (max-width: 600px) { .lib__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lib__bar { flex-wrap: wrap; } .lib__bar input[type="search"], .lib__bar select { flex: 1 1 100%; } } /* Duyệt hàng loạt */ .bulkbar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; padding: .7rem 1rem; margin-bottom: .75rem; background: var(--navy-soft); border: 1px solid var(--line); border-radius: var(--radius); position: sticky; top: 0; z-index: 5; } .bulkbar select { width: auto; min-width: 16rem; } .bulkbar__count { font-weight: 600; color: var(--navy); } .bulkbar .hint { flex-basis: 100%; margin: 0; } .col-check { width: 2.25rem; text-align: center; } .col-check input { width: 1.1rem; height: 1.1rem; } .cl-tree li > input[type="checkbox"], .bulk-pick { width: 1.05rem; height: 1.05rem; margin: 0 .45rem 0 0; vertical-align: -2px; } .filegrid li { position: relative; } .filegrid li > .bulk-pick { position: absolute; top: .55rem; left: .55rem; z-index: 2; width: 1.25rem; height: 1.25rem; } .panel__pick { display: flex; align-items: center; gap: .5rem; font-size: .85rem; color: var(--slate); } /* Khung soạn thảo căn đều hai bên như trang công khai */ /* ---- Chọn cách đặt mật khẩu (tài khoản) ------------------------------------- */ .pwset__manual { margin: .5rem 0 0 1.6rem; padding-left: .9rem; border-left: 3px solid var(--line); } .pwset:has(input[value="ngau-nhien"]:checked) .pwset__manual { display: none; } /* ---- Viết mới: chọn loại nội dung ----------------------------------------- */ .typepick { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: .75rem; } .typepick a { display: grid; grid-template-rows: auto 1fr auto; gap: .3rem; height: 100%; background: var(--paper); border: 1px solid var(--line); border-left: 4px solid var(--gold); border-radius: var(--radius); padding: .85rem 1rem; text-decoration: none; color: var(--ink); } .typepick a:hover, .typepick a:focus-visible { border-color: var(--navy); border-left-color: var(--navy); } .typepick strong { font-size: 1.05rem; } .typepick span { color: var(--slate); font-size: .9rem; line-height: 1.45; } .typepick small { color: var(--slate); font-size: .8rem; } /* ---- Vùng chạm trên điện thoại (rà giao diện 31/10/2026) ---------------- Ô đánh dấu và các liên kết phụ trong khu quản trị nhỏ hơn 24px nên khó bấm trên điện thoại. Chỉ nới vùng bấm, không đổi cỡ chữ và bố cục. */ @media (max-width: 760px) { .page-head a, .panel a, .panel details > summary, details > summary, .table-wrap td a, .hint a { min-height: 24px; display: inline-flex; align-items: center; } input[type="checkbox"], input[type="radio"] { width: 24px; height: 24px; } input.bulk-pick, .filegrid li > input.bulk-pick, .cl-tree li > input[type="checkbox"] { width: 24px; height: 24px; } } /* Chân khu quản trị: một dòng nhỏ, chủ yếu để có vùng mốc