/* Shared stylesheet for manual.html and adminmanual.html
* Cấu trúc:
* 1) manual-page (trang đọc)
* 2) admin-page (trang soạn thảo)
* 3) các module chung: media, table, ribbon, toc, modal
*/
body.manual-page {
--ribbon-bg: #ffffff;
--ribbon-border: #e5e7eb;
--ribbon-accent: #0f766e;
--accent-orange: #d97706;
--bg-site: #f3f6fb;
--sidebar-bg: rgba(255, 255, 255, 0.9);
--sidebar-border: #dbe3ee;
--text-main: #0f172a;
--text-muted: #64748b;
--hover-bg: #f1f5f9;
--active-bg: #ecfeff;
--radius: 12px;
}
html[data-theme="dark"] body.manual-page {
--ribbon-bg: #111827;
--ribbon-border: #374151;
--ribbon-accent: #10b981;
--accent-orange: #fb923c;
--bg-site: #030712;
--sidebar-bg: #0f172a;
--sidebar-border: #1f2937;
--text-main: #f9fafb;
--text-muted: #9ca3af;
--hover-bg: #1f2937;
--active-bg: #064e3b;
}
body.manual-page * {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body.manual-page * {
scrollbar-width: thin;
scrollbar-color: rgba(17, 24, 39, 0.28) transparent;
}
body.manual-page *::-webkit-scrollbar {
width: 4px;
height: 4px;
}
body.manual-page *::-webkit-scrollbar-track {
background: transparent;
}
body.manual-page *::-webkit-scrollbar-thumb {
background: rgba(17, 24, 39, 0.18);
border-radius: 999px;
}
body.manual-page *::-webkit-scrollbar-thumb:hover {
background: rgba(17, 24, 39, 0.30);
}
html[data-theme="dark"] body.manual-page * {
scrollbar-color: rgba(148, 163, 184, 0.35) transparent;
}
html[data-theme="dark"] body.manual-page *::-webkit-scrollbar-thumb {
background: rgba(148, 163, 184, 0.22);
}
html[data-theme="dark"] body.manual-page *::-webkit-scrollbar-thumb:hover {
background: rgba(148, 163, 184, 0.34);
}
body.manual-page {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
background:
radial-gradient(circle at top left, rgba(15, 118, 110, 0.08), transparent 30%),
radial-gradient(circle at top right, rgba(217, 119, 6, 0.07), transparent 28%),
var(--bg-site);
color: var(--text-main);
display: flex;
width: 100%;
max-width: 100vw;
margin: 0;
height: 100vh;
overflow: hidden;
}
body.manual-page #content-container {
overflow-x: hidden;
}
/* --- SIDEBAR --- */
body.manual-page #sidebar {
width: 280px;
display: flex;
flex-direction: column;
border-right: 1px solid var(--sidebar-border);
background: var(--sidebar-bg);
z-index: 100;
}
body.manual-page .sb-header {
padding: 20px;
border-bottom: 1px solid var(--sidebar-border);
}
body.manual-page .logo {
font-size: 1.2rem;
font-weight: 700;
color: var(--ribbon-accent);
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 16px;
}
body.manual-page .logo img {
filter: drop-shadow(0 2px 4px rgba(5, 150, 105, 0.2));
}
body.manual-page .tree-search-empty,
body.admin-page .tree-search-empty {
padding: 14px 12px;
font-size: 12px;
line-height: 1.45;
color: #6b7280;
text-align: center;
}
html[data-theme="dark"] body.manual-page .tree-search-empty,
html[data-theme="dark"] body.admin-page .tree-search-empty {
color: #9ca3af;
}
body.manual-page .nav-item.is-search-match .nav-page-title,
body.admin-page .nav-item.is-search-match .nav-page-title {
font-weight: 600;
}
body.manual-page .nav-item.is-search-ancestor,
body.admin-page .nav-item.is-search-ancestor {
opacity: 0.72;
}
body.manual-page .tree-search-mark,
body.admin-page .tree-search-mark {
background: color-mix(in srgb, #fbbf24 55%, transparent);
color: inherit;
padding: 0 1px;
border-radius: 2px;
}
body.manual-page .tree-search-results,
body.admin-page .tree-search-results {
display: flex;
flex-direction: column;
gap: 2px;
}
body.manual-page .nav-item.is-search-flat,
body.admin-page .nav-item.is-search-flat {
--tree-depth: 0;
padding-left: 8px;
}
body.manual-page .nav-page-title-wrap,
body.admin-page .nav-page-title-wrap {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
flex: 1;
}
body.manual-page .tree-search-crumb,
body.admin-page .tree-search-crumb {
font-size: 10px;
line-height: 1.3;
color: #6b7280;
white-space: normal;
overflow: visible;
overflow-wrap: break-word;
word-break: normal;
}
html[data-theme="dark"] body.manual-page .tree-search-crumb,
html[data-theme="dark"] body.admin-page .tree-search-crumb {
color: #9ca3af;
}
body.manual-page .search-box-wrap,
body.admin-page .search-box-wrap {
position: relative;
width: 100%;
}
body.manual-page .search-box-icon,
body.admin-page .search-box-icon {
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
width: 16px;
height: 16px;
color: var(--text-muted, #9ca3af);
pointer-events: none;
display: flex;
align-items: center;
justify-content: center;
}
body.manual-page .search-box-icon svg,
body.admin-page .search-box-icon svg {
width: 16px;
height: 16px;
display: block;
}
body.manual-page #search-box {
width: 100%;
box-sizing: border-box;
padding: 8px 12px 8px 34px;
border: 1px solid var(--sidebar-border);
border-radius: var(--radius);
outline: none;
font-size: 13px;
background: var(--bg-site);
color: var(--text-main);
}
body.manual-page #search-box:focus {
border-color: var(--ribbon-accent);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--ribbon-accent) 18%, transparent);
}
body.manual-page .search-box-wrap:focus-within .search-box-icon,
body.admin-page .search-box-wrap:focus-within .search-box-icon {
color: var(--ribbon-accent);
}
body.manual-page #search-box::-webkit-search-cancel-button,
body.admin-page #search-box::-webkit-search-cancel-button {
-webkit-appearance: none;
appearance: none;
}
body.manual-page #tree,
body.manual-page .tree-scroll {
flex: 1;
overflow-y: auto;
padding: 12px;
--tree-indent: 16px;
--tree-toggle-size: 16px;
--tree-icon-size: 18px;
--tree-col-gap: 6px;
--tree-pad-x: 8px;
}
body.manual-page .nav-item {
padding: 5px 8px;
padding-left: calc(var(--tree-pad-x) + var(--tree-depth, 0) * var(--tree-indent));
border-radius: var(--radius);
cursor: pointer;
font-size: 13px;
display: flex;
align-items: flex-start;
justify-content: space-between;
color: var(--text-main);
margin-bottom: 2px;
min-height: 28px;
box-sizing: border-box;
}
body.manual-page .nav-link-box {
display: grid;
grid-template-columns: var(--tree-toggle-size) var(--tree-icon-size) minmax(0, 1fr);
column-gap: var(--tree-col-gap);
align-items: start;
flex: 1;
min-width: 0;
overflow: visible;
}
body.manual-page .tree-toggle-slot {
width: var(--tree-toggle-size);
height: var(--tree-toggle-size);
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
body.manual-page .nav-page-icon {
width: var(--tree-icon-size);
text-align: center;
font-size: 14px;
line-height: 1;
flex-shrink: 0;
}
body.manual-page .nav-page-title {
overflow: visible;
white-space: normal;
overflow-wrap: break-word;
word-break: normal;
min-width: 0;
line-height: 1.35;
}
body.manual-page .nav-item:hover {
background: var(--hover-bg);
}
body.manual-page .nav-item.active {
background: var(--ribbon-accent);
color: white;
font-weight: 600;
}
body.manual-page .tree-toggle {
width: var(--tree-toggle-size);
height: var(--tree-toggle-size);
padding: 0;
border: none;
background: transparent;
color: inherit;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 8px;
line-height: 1;
cursor: pointer;
transition: transform 0.2s, opacity 0.2s;
opacity: 0.65;
flex-shrink: 0;
}
body.manual-page .tree-toggle:hover {
opacity: 1;
}
body.manual-page .tree-toggle.collapsed {
transform: rotate(-90deg);
}
body.manual-page .tree-toggle-spacer {
display: block;
width: 100%;
height: 100%;
}
/* --- MAIN AREA ---
* Khu vực hiển thị nội dung tài liệu ở trang đọc.
*/
body.manual-page #main {
flex: 1 1 0;
min-width: 0;
width: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
position: relative;
}
body.manual-page #header-bar,
body.admin-page #header-bar {
height: 56px;
background: rgba(255, 255, 255, 0.82);
border-bottom: 1px solid var(--sidebar-border);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 28px;
font-family: "Times New Roman", Times, serif;
font-size: 10pt;
backdrop-filter: blur(14px);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
}
html[data-theme="dark"] body.manual-page #header-bar,
html[data-theme="dark"] body.admin-page #header-bar {
background: var(--sidebar-bg);
}
body.manual-page .header-actions,
body.admin-page .header-actions {
display: flex;
align-items: center;
gap: 15px;
flex-shrink: 0;
}
body.admin-page .header-update-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
height: 34px;
padding: 0 14px 0 12px;
border: none;
border-radius: 8px;
background: #16a34a;
color: #fff;
font-family: inherit;
font-size: 12px;
font-weight: 600;
line-height: 1;
cursor: pointer;
white-space: nowrap;
box-shadow: 0 1px 3px rgba(22, 163, 74, 0.35);
transition: filter 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease;
flex-shrink: 0;
}
body.admin-page .header-update-btn svg,
body.admin-page .header-update-btn-icon {
width: 15px;
height: 15px;
min-width: 15px;
min-height: 15px;
flex-shrink: 0;
display: block;
}
body.admin-page .header-update-btn:hover:not(:disabled) {
filter: brightness(1.08);
}
body.admin-page .header-update-btn:active:not(:disabled) {
filter: brightness(0.95);
}
body.admin-page .header-update-btn:disabled {
opacity: 0.6;
cursor: wait;
}
body.admin-page .header-update-btn.is-update-success {
background: #15803d;
box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.35);
}
body.admin-page .admin-toast {
position: fixed;
top: 18px;
right: 18px;
z-index: 10050;
display: none;
align-items: center;
gap: 10px;
min-width: 280px;
max-width: min(440px, calc(100vw - 36px));
padding: 11px 12px 11px 14px;
border-radius: 8px;
background: #22c55e;
color: #fff;
font-size: 14px;
font-weight: 600;
line-height: 1.35;
box-shadow: 0 10px 28px rgba(34, 197, 94, 0.38);
opacity: 0;
transform: translateY(-10px);
transition: opacity 0.22s ease, transform 0.22s ease;
pointer-events: auto;
}
body.admin-page .admin-toast.is-open {
display: flex;
}
body.admin-page .admin-toast.is-visible {
opacity: 1;
transform: translateY(0);
}
body.admin-page .admin-toast.is-error {
background: #ef4444;
box-shadow: 0 10px 28px rgba(239, 68, 68, 0.35);
}
body.admin-page .admin-toast-icon {
display: none;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 22px;
height: 22px;
}
body.admin-page .admin-toast.is-success .admin-toast-icon--success,
body.admin-page .admin-toast.is-error .admin-toast-icon--error {
display: flex;
}
body.admin-page .admin-toast-icon svg {
width: 20px;
height: 20px;
display: block;
}
body.admin-page .admin-toast-text {
flex: 1;
min-width: 0;
}
body.admin-page .admin-toast-close {
flex-shrink: 0;
width: 24px;
height: 24px;
margin: -4px -2px -4px 0;
padding: 0;
border: none;
border-radius: 4px;
background: transparent;
color: #fff;
font-size: 18px;
line-height: 1;
cursor: pointer;
opacity: 0.9;
}
body.admin-page .admin-toast-close:hover {
opacity: 1;
background: rgba(255, 255, 255, 0.15);
}
body.admin-page #btn-clear-format svg {
width: 16px;
height: 16px;
display: block;
}
body.manual-page #editor-layout,
body.admin-page #editor-layout {
flex: 1;
display: grid;
grid-template-columns: minmax(0, 1fr) 280px;
min-height: 0;
overflow: hidden;
background: linear-gradient(180deg, rgba(255,255,255,0.28), transparent 18%);
position: relative;
z-index: 0;
}
html[data-theme="dark"] body.manual-page #editor-layout,
html[data-theme="dark"] body.admin-page #editor-layout {
background: var(--bg-site);
}
body.manual-page #content-container,
body.admin-page #content-container {
overflow-y: auto;
overflow-x: visible;
padding: 32px 32px 40px;
scroll-behavior: smooth;
min-width: 0;
max-width: 100%;
-ms-overflow-style: none;
scrollbar-width: none;
position: relative;
z-index: 0;
}
body.manual-page .page-sheet {
width: 100%;
max-width: 820px;
margin: 0 auto;
padding: 0;
background: transparent;
box-shadow: none;
position: relative;
}
body.manual-page #page-title {
width: 100%;
border: none;
background: transparent;
font-family: "Montserrat", "Segoe UI", sans-serif;
font-size: 24px;
font-weight: 700;
color: #159d47;
text-align: center;
outline: none;
margin-bottom: 18px;
border-bottom: 1px solid transparent;
line-height: 1.15;
letter-spacing: -0.03em;
}
body.manual-page #content {
line-height: 1.3;
font-size: 12pt;
font-family: "Montserrat", "Segoe UI", sans-serif;
color: var(--text-main);
text-align: justify;
}
/* Viewer headings — khớp WYSIWYG với admin #editor */
body.manual-page #content h1,
body.admin-page #editor h1 {
font-family: "Montserrat", "Segoe UI", sans-serif;
font-size: 24px;
font-weight: 700;
text-transform: none;
margin: 28px 0 10px;
color: #111827;
page-break-after: avoid;
break-after: avoid-page;
}
body.manual-page #content h2,
body.admin-page #editor h2 {
font-family: "Montserrat", "Segoe UI", sans-serif;
font-size: 18px;
font-weight: 700;
margin: 24px 0 8px;
color: var(--text-main);
page-break-after: avoid;
break-after: avoid-page;
}
body.manual-page #content h3,
body.admin-page #editor h3 {
font-family: "Montserrat", "Segoe UI", sans-serif;
font-size: 14px;
font-weight: 700;
font-style: normal;
margin: 18px 0 6px;
color: var(--text-main);
}
body.manual-page #content h4,
body.manual-page #content h5,
body.manual-page #content h6,
body.admin-page #editor h4,
body.admin-page #editor h5,
body.admin-page #editor h6 {
font-size: 13pt;
font-weight: 700;
margin: 14pt 0 8pt;
color: var(--text-main);
}
body.manual-page #content p {
margin: 0 0 6pt;
font-size: 12pt;
font-weight: 400;
text-align: justify;
line-height: 1.3;
text-indent: 0;
}
body.manual-page #content ul, body.manual-page #content ol {
margin: 0 0 3pt;
padding-left: 0.75cm;
}
body.manual-page #content li {
margin: 0 0 3pt;
text-align: justify;
line-height: 1.3;
padding-left: 0.25cm;
text-indent: -0.25cm;
}
body.manual-page #content p.media-caption {
font-family: "Montserrat", "Segoe UI", sans-serif;
font-size: 11pt;
font-style: italic;
text-align: center;
line-height: 1.35;
margin: 6px 0 0;
padding: 0 6px;
text-indent: 0;
}
body.manual-page #content blockquote {
border-left: 4px solid var(--ribbon-accent);
padding: 8px 14px;
margin: 14px 0;
background: rgba(5, 150, 105, 0.06);
border-radius: 0 6px 6px 0;
color: var(--text-muted);
}
body.manual-page #content pre {
background: #0f172a;
color: #e5e7eb;
border-radius: 8px;
padding: 14px;
overflow-x: auto;
margin: 14px 0;
}
body.manual-page #content code {
font-family: Consolas, "Courier New", monospace;
font-size: 13px;
}
body.manual-page #content hr {
border: none;
border-top: 1px dashed #6b7280;
margin: 20px 0;
}
body.manual-page #content table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
border: 1px solid var(--sidebar-border);
}
body.manual-page #content th, body.manual-page #content td {
padding: 10px;
border: 1px solid var(--sidebar-border);
text-align: left;
}
body.manual-page #content th {
background: var(--hover-bg);
}
/* Ảnh trang đọc: cùng khung px / margin / viền như .media-wrapper img trong admin */
body.manual-page #content img {
display: block;
max-width: min(100%, 1000px);
width: auto;
height: auto;
margin: 10pt auto;
border: 1px solid #000;
border-radius: 0;
box-sizing: border-box;
object-fit: contain;
background: transparent;
cursor: zoom-in;
clear: both;
line-height: 0;
}
/* Video/YouTube: nền đen 16:9 — giống admin; ảnh không dùng khung đen */
body.manual-page #content .media-aspect:has(iframe),
body.manual-page #content .media-aspect:has(video),
body.manual-page #content .media-aspect.media-aspect--embed,
body.manual-page #content .media-aspect.media-aspect--video {
display: block;
width: min(100%, 720px);
max-width: min(100%, 1000px);
min-width: 240px;
aspect-ratio: 16 / 9;
background: #000;
border-radius: var(--radius);
overflow: hidden;
margin: 10pt auto;
clear: both;
}
body.manual-page #content .media-aspect:has(> img) {
display: block;
width: auto;
max-width: min(100%, 1000px);
aspect-ratio: auto;
background: transparent;
border-radius: 0;
overflow: visible;
margin: 10pt auto;
clear: both;
}
body.manual-page #content .media-aspect:has(> img) img {
margin: 0;
}
body.manual-page .media-aspect iframe,
body.manual-page .media-aspect video {
width: 100%;
height: 100%;
border: 0;
display: block;
object-fit: contain;
background: #000;
}
body.manual-page .media-delete-btn {
display: none !important;
}
body.manual-page .media-wrapper {
position: relative;
margin: 10pt auto;
max-width: min(100%, 1000px);
width: fit-content;
display: block;
clear: both;
line-height: 0;
}
body.manual-page .media-figure {
display: block;
width: fit-content;
max-width: min(100%, 1000px);
margin: 10pt auto;
clear: both;
}
body.manual-page .media-figure.media-align-left {
margin-left: 0;
margin-right: auto;
}
body.manual-page .media-figure.media-align-center {
margin-left: auto;
margin-right: auto;
}
body.manual-page .media-figure.media-align-right {
margin-left: auto;
margin-right: 0;
}
body.manual-page .media-figure > .media-wrapper,
body.manual-page .media-figure > img,
body.manual-page .media-figure > .media-aspect {
margin: 0;
}
body.manual-page .media-caption {
text-align: center;
font-family: "Montserrat", "Segoe UI", sans-serif;
font-size: 11pt;
font-style: italic;
line-height: 1.35;
margin: 6px 0 0;
padding: 0 6px;
color: #6b7280;
width: auto;
max-width: 100%;
box-sizing: border-box;
}
body.manual-page .media-caption[style*="text-align:left"],
body.manual-page .media-caption[style*="text-align: left"],
body.manual-page .media-caption[align="left"],
body.manual-page .media-caption.is-left {
text-align: left !important;
margin-left: 0 !important;
margin-right: auto !important;
padding-left: 0 !important;
padding-right: 6px !important;
}
body.manual-page .media-caption[style*="text-align:right"],
body.manual-page .media-caption[style*="text-align: right"],
body.manual-page .media-caption[align="right"],
body.manual-page .media-caption.is-right {
text-align: right !important;
margin-left: auto !important;
margin-right: 0 !important;
padding-left: 6px !important;
padding-right: 0 !important;
}
html[data-theme="dark"] body.manual-page .media-caption {
color: #9ca3af;
}
body.manual-page #content img + .media-caption,
body.manual-page #content .media-aspect + .media-caption,
body.manual-page #content iframe + .media-caption {
margin-left: auto;
margin-right: auto;
box-sizing: border-box;
}
/* Manual viewer nhận HTML đã bỏ wrapper từ editor, nên alignment phải hoạt động trực tiếp trên img/video.
* Class/data-media-align được lưu khi save để ảnh căn trái/giữa/phải ổn định sau khi reload và ở trang xem.
*/
body.manual-page #content img.media-align-left,
body.manual-page #content .media-aspect.media-align-left,
body.manual-page #content [data-media-align="left"] {
margin-left: 0;
margin-right: auto;
display: block;
}
body.manual-page #content img.media-align-center,
body.manual-page #content .media-aspect.media-align-center,
body.manual-page #content [data-media-align="center"] {
margin-left: auto;
margin-right: auto;
display: block;
}
body.manual-page #content img.media-align-right,
body.manual-page #content .media-aspect.media-align-right,
body.manual-page #content [data-media-align="right"] {
margin-left: auto;
margin-right: 0;
display: block;
}
/* Lightbox xem ảnh — toàn màn hình, nền tối, toolbar nổi */
body.manual-page.lightbox-open {
overflow: hidden;
}
.image-lightbox {
--lb-bg: #0b0f19;
--lb-header: rgba(11, 15, 25, 0.92);
--lb-text: #f1f5f9;
--lb-muted: #94a3b8;
--lb-accent: #22c55e;
--lb-toolbar: rgba(15, 23, 42, 0.88);
position: fixed;
inset: 0;
z-index: 2000;
display: flex;
flex-direction: column;
box-sizing: border-box;
font-family: "Segoe UI", system-ui, sans-serif;
}
.image-lightbox[hidden] {
display: none !important;
}
.image-lightbox-backdrop {
position: absolute;
inset: 0;
background: var(--lb-bg);
cursor: zoom-out;
}
.image-lightbox-shell {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
min-height: 0;
pointer-events: none;
}
.image-lightbox-shell > * {
pointer-events: auto;
}
.image-lightbox-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
min-height: 56px;
padding: max(10px, env(safe-area-inset-top, 0px)) 16px 10px;
background: rgba(15, 23, 42, 0.72);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
flex-shrink: 0;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04);
}
.image-lightbox-brand {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
flex: 1;
}
.image-lightbox-icon {
flex-shrink: 0;
width: 40px;
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.1);
color: #94a3b8;
}
.image-lightbox-meta {
min-width: 0;
flex: 1;
}
.image-lightbox-title {
margin: 0;
font-size: 15px;
font-weight: 600;
color: var(--lb-text);
line-height: 1.3;
letter-spacing: -0.01em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.image-lightbox-caption {
margin: 2px 0 0;
font-size: 12px;
color: var(--lb-muted);
line-height: 1.4;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.image-lightbox-header-actions {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.image-lightbox-zoom-chip {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 52px;
height: 36px;
padding: 0 12px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.12);
color: #f1f5f9;
font-size: 13px;
font-weight: 600;
font-variant-numeric: tabular-nums;
letter-spacing: 0.02em;
}
.image-lightbox-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
height: 36px;
min-width: 36px;
padding: 0 12px;
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(255, 255, 255, 0.06);
color: #e2e8f0;
font-size: 13px;
font-weight: 600;
text-decoration: none;
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
white-space: nowrap;
}
.image-lightbox-btn:hover {
background: rgba(255, 255, 255, 0.12);
border-color: rgba(255, 255, 255, 0.2);
color: #fff;
}
.image-lightbox-btn svg {
flex-shrink: 0;
}
.image-lightbox-download {
background: rgba(34, 197, 94, 0.18);
border-color: rgba(34, 197, 94, 0.35);
color: #86efac;
}
.image-lightbox-download:hover {
background: rgba(34, 197, 94, 0.32);
border-color: rgba(74, 222, 128, 0.5);
color: #dcfce7;
}
.image-lightbox-close {
padding: 0;
min-width: 36px;
}
.image-lightbox-body {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 8px 16px 88px;
box-sizing: border-box;
}
.image-lightbox-stage {
position: relative;
flex: 1;
width: 100%;
max-width: min(1200px, 96vw);
min-height: 120px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
touch-action: none;
cursor: grab;
}
.image-lightbox-stage.is-panning {
cursor: grabbing;
}
.image-lightbox-stage.is-loading .image-lightbox-loader {
display: block;
}
.image-lightbox-stage.is-loading img {
opacity: 0;
}
.image-lightbox-loader {
display: none;
position: absolute;
width: 32px;
height: 32px;
border: 2px solid rgba(255, 255, 255, 0.2);
border-top-color: #ffffff;
border-radius: 50%;
animation: lb-spin 0.7s linear infinite;
z-index: 2;
}
@keyframes lb-spin {
to { transform: rotate(360deg); }
}
.image-lightbox-stage img {
max-width: 100%;
max-height: calc(100vh - 200px);
width: auto;
height: auto;
object-fit: contain;
transform-origin: center center;
user-select: none;
-webkit-user-drag: none;
pointer-events: none;
transition: opacity 0.15s ease;
box-shadow: 0 8px 40px rgba(0, 0, 0, 0.45);
}
.image-lightbox-footer {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
display: flex;
justify-content: center;
padding: 0 16px max(20px, env(safe-area-inset-bottom, 0px));
pointer-events: none;
background: linear-gradient(0deg, rgba(11, 15, 25, 0.85) 0%, transparent 100%);
}
.image-lightbox-toolbar {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 12px;
border-radius: 12px;
background: var(--lb-toolbar);
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
backdrop-filter: blur(12px);
pointer-events: auto;
}
.image-lightbox-tool {
width: 40px;
height: 40px;
border: none;
border-radius: 8px;
background: transparent;
color: #e2e8f0;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
touch-action: manipulation;
transition: background 0.15s ease, color 0.15s ease;
}
.image-lightbox-tool svg {
width: 20px;
height: 20px;
}
.image-lightbox-tool:hover {
background: rgba(255, 255, 255, 0.1);
color: #fff;
}
.image-lightbox-zoom-readout {
min-width: 52px;
text-align: center;
font-size: 13px;
font-weight: 600;
color: #f8fafc;
font-variant-numeric: tabular-nums;
}
.image-lightbox-tool-sep {
width: 1px;
height: 24px;
background: rgba(255, 255, 255, 0.15);
margin: 0 4px;
}
@media (max-width: 768px) {
.image-lightbox-header {
padding-left: 12px;
padding-right: 12px;
gap: 10px;
}
.image-lightbox-brand {
gap: 10px;
}
.image-lightbox-icon {
width: 36px;
height: 36px;
}
.image-lightbox-title {
font-size: 14px;
}
.image-lightbox-caption {
font-size: 11px;
white-space: normal;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.image-lightbox-btn-label {
display: none;
}
.image-lightbox-download {
padding: 0;
min-width: 36px;
}
.image-lightbox-body {
padding-bottom: 100px;
}
.image-lightbox-stage img {
max-height: calc(100dvh - 180px);
}
.image-lightbox-tool {
width: 36px;
height: 36px;
}
}
/* --- TOC --- */
body.manual-page #toc-container,
body.admin-page #toc-container {
position: relative;
top: auto;
right: auto;
width: 100%;
padding: 18px 14px;
border-left: 1px dashed rgba(15, 23, 42, 0.22);
background: transparent;
box-shadow: none;
display: block;
z-index: 1;
overflow-y: auto;
min-width: 0;
}
#toc-list:empty::after {
content: "Chọn tài liệu hoặc thêm tiêu đề (H1–H3) để hiện mục lục.";
display: block;
font-size: 12px;
line-height: 1.45;
color: var(--text-muted);
padding: 8px 4px 0;
font-style: italic;
}
html[data-theme="dark"] body.manual-page #toc-container,
html[data-theme="dark"] body.admin-page #toc-container {
background: #111827;
border-left-color: rgba(148, 163, 184, 0.2);
}
body.manual-page #toc-container h4,
body.admin-page #toc-container h4 {
font-size: 11px;
text-transform: uppercase;
color: var(--text-muted);
margin-bottom: 12px;
letter-spacing: 1px;
border-bottom: 1px solid var(--sidebar-border);
padding-bottom: 5px;
}
body.manual-page .toc-item,
body.admin-page .toc-item {
font-size: 13px;
color: var(--text-main);
cursor: pointer;
padding: 6px 0;
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
body.manual-page .toc-item:hover,
body.admin-page .toc-item:hover {
color: var(--ribbon-accent);
font-weight: 600;
}
body.manual-page .toc-item.is-active,
body.admin-page .toc-item.is-active {
color: var(--ribbon-accent);
font-weight: 700;
background: color-mix(in srgb, var(--ribbon-accent) 12%, transparent);
border-radius: 6px;
padding-left: 8px;
padding-right: 8px;
margin-left: -8px;
}
body.manual-page #content h1,
body.manual-page #content h2,
body.manual-page #content h3,
body.manual-page #content h4,
body.manual-page #content h5,
body.manual-page #content h6,
body.manual-page #page-title {
scroll-margin-top: 24px;
}
body.manual-page .toc-scroll-target {
animation: toc-target-flash 2.6s ease-out;
}
body.manual-page #page-title.toc-scroll-target {
border-radius: 8px;
}
body.manual-page .toc-item.h2,
body.admin-page .toc-item.h2 {
padding-left: 15px;
font-size: 12px;
color: var(--text-muted);
}
body.manual-page .toc-item.h3,
body.admin-page .toc-item.h3 {
padding-left: 25px;
font-size: 11px;
color: var(--text-muted);
}
body.manual-page .toc-item.h4,
body.manual-page .toc-item.h5,
body.manual-page .toc-item.h6,
body.admin-page .toc-item.h4,
body.admin-page .toc-item.h5,
body.admin-page .toc-item.h6 {
padding-left: 32px;
font-size: 11px;
color: var(--text-muted);
}
body.manual-page #welcome,
body.admin-page #welcome {
display: flex;
flex-direction: column;
align-items: center;
padding-top: 120px;
opacity: 0.2;
text-align: center;
color: var(--text-main);
}
body.manual-page #welcome .welcome-icon,
body.admin-page #welcome .welcome-icon {
font-size: 120px;
line-height: 1;
}
body.manual-page #welcome h2,
body.admin-page #welcome h2 {
margin-top: 12px;
font-size: 22px;
font-weight: 600;
color: var(--text-main);
}
body.manual-page #welcome p,
body.admin-page #welcome p {
margin-top: 8px;
font-size: 14px;
color: var(--text-muted);
}
body.manual-page #welcome .mobile-open-tree-hint,
body.admin-page #welcome .mobile-open-tree-hint {
display: none;
}
body.manual-page #theme-toggle,
body.admin-page #theme-toggle {
cursor: pointer;
font-size: 16px;
opacity: 0.6;
line-height: 1;
}
body.manual-page #theme-toggle:hover,
body.admin-page #theme-toggle:hover {
opacity: 1;
}
@media (max-width: 1100px) {
body.manual-page #editor-layout,
body.admin-page #editor-layout {
grid-template-columns: 1fr;
}
}
body.manual-page .mobile-nav-toggle,
body.admin-page .mobile-nav-toggle {
display: none;
}
/* Điện thoại: ẩn mục lục, nội dung full width, danh mục mở bằng drawer */
@media (max-width: 768px) {
body.manual-page #toc-container,
body.admin-page #toc-container {
display: none !important;
}
body.manual-page #editor-layout,
body.admin-page #editor-layout {
grid-template-columns: 1fr;
}
body.manual-page #sidebar,
body.admin-page #sidebar {
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: min(88vw, 300px);
max-width: 300px;
transform: translateX(-100%);
transition: transform 0.22s ease;
z-index: 420;
box-shadow: none;
background: #ffffff;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
html[data-theme="dark"] body.manual-page #sidebar,
html[data-theme="dark"] body.admin-page #sidebar {
background: #0f172a;
}
body.manual-page.mobile-sidebar-open #sidebar,
body.admin-page.mobile-sidebar-open #sidebar {
transform: translateX(0);
box-shadow: 4px 0 24px rgba(15, 23, 42, 0.18);
z-index: 1200;
pointer-events: auto;
background: #ffffff;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
html[data-theme="dark"] body.manual-page.mobile-sidebar-open #sidebar,
html[data-theme="dark"] body.admin-page.mobile-sidebar-open #sidebar {
background: #0f172a;
}
body.manual-page #sidebar .sb-header,
body.admin-page #sidebar .sb-header,
body.manual-page #sidebar .tree-scroll,
body.admin-page #sidebar .tree-scroll {
background-color: inherit;
}
body.manual-page.mobile-sidebar-open #mobile-sidebar-backdrop,
body.admin-page.mobile-sidebar-open #mobile-sidebar-backdrop {
z-index: 1100;
}
body.manual-page.mobile-sidebar-open #main,
body.admin-page.mobile-sidebar-open #main {
pointer-events: none;
user-select: none;
}
body.manual-page.mobile-sidebar-open .mobile-nav-toggle,
body.admin-page.mobile-sidebar-open .mobile-nav-toggle {
z-index: 1210;
position: relative;
pointer-events: auto;
}
body.manual-page.mobile-sidebar-open #sidebar .nav-item,
body.admin-page.mobile-sidebar-open #sidebar .nav-item {
touch-action: manipulation;
cursor: pointer;
}
body.manual-page #main,
body.admin-page #main {
width: 100%;
min-width: 0;
flex: 1 1 auto;
}
body.manual-page #content-container,
body.admin-page #content-container {
padding: 16px 14px 28px;
}
body.manual-page #header-bar,
body.admin-page #header-bar {
height: auto;
min-height: 52px;
padding: 12px 14px 12px;
padding-top: max(16px, calc(env(safe-area-inset-top, 0px) + 12px));
gap: 8px;
align-items: center;
flex-wrap: nowrap;
position: sticky;
top: 0;
z-index: 300;
background: #ffffff;
box-shadow: 0 1px 0 var(--sidebar-border);
}
html[data-theme="dark"] body.manual-page #header-bar,
html[data-theme="dark"] body.admin-page #header-bar {
background: var(--sidebar-bg);
}
body.manual-page .page-header-header,
body.admin-page .page-header-header {
min-width: 0;
flex: 1;
overflow: hidden;
display: flex;
flex-direction: column;
gap: 2px;
justify-content: center;
}
body.manual-page .breadcrumb,
body.admin-page .breadcrumb {
display: block;
font-size: 13px;
line-height: 1.35;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex-wrap: nowrap;
}
body.manual-page .breadcrumb .breadcrumb-sep,
body.admin-page .breadcrumb .breadcrumb-sep,
body.manual-page .breadcrumb > span:not(:last-child),
body.admin-page .breadcrumb > span:not(:last-child) {
display: none;
}
body.manual-page .breadcrumb > span:last-child,
body.admin-page .breadcrumb > span:last-child {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--ribbon-accent);
font-weight: 600;
}
body.manual-page .page-meta,
body.admin-page .page-meta {
display: block;
font-size: 10px;
line-height: 1.3;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
opacity: 0.85;
}
body.manual-page .header-actions,
body.admin-page .header-actions {
flex-shrink: 0;
align-self: center;
}
body.manual-page .header-actions .btn-tool,
body.admin-page .header-actions .btn-tool {
font-size: 11px;
padding: 0 8px;
height: 32px;
white-space: nowrap;
}
body.manual-page .mobile-nav-toggle,
body.admin-page .mobile-nav-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
height: 36px;
min-width: 36px;
padding: 0 10px;
flex-shrink: 0;
border: 1px solid var(--sidebar-border);
border-radius: 8px;
background: var(--bg-site);
color: var(--text-main);
font-size: 13px;
font-weight: 600;
line-height: 1;
cursor: pointer;
position: relative;
z-index: 1210;
touch-action: manipulation;
}
body.manual-page .mobile-nav-toggle .mobile-nav-icon,
body.admin-page .mobile-nav-toggle .mobile-nav-icon {
font-size: 16px;
line-height: 1;
}
body.manual-page .mobile-nav-toggle:hover,
body.admin-page .mobile-nav-toggle:hover {
background: var(--hover-bg);
}
#mobile-sidebar-backdrop {
display: none;
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0.45);
z-index: 410;
}
body.manual-page.mobile-sidebar-open #mobile-sidebar-backdrop,
body.admin-page.mobile-sidebar-open #mobile-sidebar-backdrop {
display: block;
}
body.manual-page.mobile-sidebar-open,
body.admin-page.mobile-sidebar-open {
overflow: hidden;
}
body.manual-page #content,
body.admin-page #editor {
overflow-wrap: anywhere;
word-break: break-word;
}
body.admin-page #ribbon .ribbon-content {
overflow: visible;
padding-bottom: 4px;
}
body.admin-page .ribbon-content {
min-height: 84px;
}
body.admin-page .ribbon-group {
flex-shrink: 0;
}
body.manual-page #welcome .welcome-icon,
body.admin-page #welcome .welcome-icon {
font-size: 72px;
}
body.manual-page #welcome,
body.admin-page #welcome {
padding-top: 64px;
}
body.manual-page #welcome .mobile-open-tree-hint,
body.admin-page #welcome .mobile-open-tree-hint {
display: block;
margin-top: 20px;
padding: 10px 16px;
border: 1px solid var(--ribbon-accent);
border-radius: 8px;
font-size: 13px;
font-weight: 600;
color: #ffffff;
opacity: 1;
cursor: pointer;
background: var(--ribbon-accent);
}
/* Mobile: ảnh co theo khung, không méo — manual ↔ admin cùng quy tắc */
body.manual-page #content img,
body.manual-page #content .media-aspect,
body.manual-page #content .media-wrapper,
body.manual-page #content .media-figure,
body.admin-page #editor .media-wrapper,
body.admin-page #editor .media-figure,
body.admin-page #editor .media-resizable {
max-width: 100% !important;
box-sizing: border-box;
}
body.admin-page #editor .media-resizable {
width: 100% !important;
height: auto !important;
min-height: 0;
}
body.admin-page #editor .media-wrapper img,
body.admin-page #editor .media-resizable img {
width: 100% !important;
height: auto !important;
object-fit: contain;
}
body.manual-page #content img {
max-width: 100% !important;
width: auto !important;
height: auto !important;
object-fit: contain;
}
body.manual-page #content .media-aspect:has(iframe),
body.manual-page #content .media-aspect:has(video),
body.manual-page #content .media-aspect.media-aspect--embed,
body.manual-page #content .media-aspect.media-aspect--video {
width: 100% !important;
max-width: 100% !important;
min-width: 0;
}
}
/* ===== Admin page styles =====
* Tất cả style dành cho giao diện biên tập (adminmanual.html).
*/
body.admin-page {
--ribbon-bg: #ffffff;
--ribbon-border: #e5e7eb;
--ribbon-accent: #0f766e;
/* Deep teal for a more premium editor feel */
--accent-orange: #d97706;
--bg-site: #f3f6fb;
--sidebar-bg: rgba(255, 255, 255, 0.9);
--sidebar-border: #dbe3ee;
--text-main: #0f172a;
--text-muted: #64748b;
--active-bg: #ecfeff;
--hover-bg: #f1f5f9;
--radius: 12px;
--shadow: 0 18px 50px rgba(15, 23, 42, 0.08);
}
html[data-theme="dark"] body.admin-page {
--ribbon-bg: #111827;
--ribbon-border: #374151;
--ribbon-accent: #10b981;
/* Brighter Green for Dark Mode */
--accent-orange: #fb923c;
--bg-site: #030712;
--sidebar-bg: #0f172a;
--sidebar-border: #1f2937;
--text-main: #f9fafb;
--text-muted: #9ca3af;
--active-bg: #064e3b;
--hover-bg: #1f2937;
}
body.admin-page * {
box-sizing: border-box;
transition: background-color 0.2s;
}
body.admin-page * {
scrollbar-width: thin;
scrollbar-color: rgba(17, 24, 39, 0.28) transparent;
}
body.admin-page *::-webkit-scrollbar {
width: 4px;
height: 4px;
}
body.admin-page *::-webkit-scrollbar-track {
background: transparent;
}
body.admin-page *::-webkit-scrollbar-thumb {
background: rgba(17, 24, 39, 0.18);
border-radius: 999px;
}
body.admin-page *::-webkit-scrollbar-thumb:hover {
background: rgba(17, 24, 39, 0.30);
}
html[data-theme="dark"] body.admin-page * {
scrollbar-color: rgba(148, 163, 184, 0.35) transparent;
}
html[data-theme="dark"] body.admin-page *::-webkit-scrollbar-thumb {
background: rgba(148, 163, 184, 0.22);
}
html[data-theme="dark"] body.admin-page *::-webkit-scrollbar-thumb:hover {
background: rgba(148, 163, 184, 0.34);
}
body.admin-page {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
display: flex;
height: 100vh;
background:
radial-gradient(circle at top left, rgba(15, 118, 110, 0.08), transparent 30%),
radial-gradient(circle at top right, rgba(217, 119, 6, 0.07), transparent 28%),
var(--bg-site);
color: var(--text-main);
overflow: hidden;
}
/* --- PREVIEW MODE (no redirect, toggle in-place) --- */
body.admin-page.preview-mode #ribbon {
display: none;
}
body.admin-page .preview-mode-banner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
padding: 10px 16px;
background: color-mix(in srgb, var(--accent-orange, #f97316) 12%, #fff7ed);
border-bottom: 1px solid color-mix(in srgb, var(--accent-orange, #f97316) 35%, transparent);
color: var(--text-main);
font-size: 13px;
flex-shrink: 0;
z-index: 210;
}
html[data-theme="dark"] body.admin-page .preview-mode-banner {
background: color-mix(in srgb, var(--accent-orange, #f97316) 18%, #1f2937);
}
body.admin-page .preview-mode-banner[hidden] {
display: none !important;
}
body.admin-page .preview-mode-banner-btn {
height: 32px;
min-width: auto;
padding: 0 14px;
font-weight: 600;
background: var(--ribbon-accent);
color: #fff !important;
border: none;
}
body.admin-page.preview-mode .media-delete-btn {
display: none !important;
}
body.admin-page.preview-mode .media-wrapper:hover {
box-shadow: none;
}
body.admin-page.focus-mode #sidebar, body.admin-page.focus-mode #toc-container {
display: none !important;
}
body.admin-page.focus-mode #main {
width: 100%;
}
/* --- SIDEBAR --- */
body.admin-page #sidebar {
width: 280px;
display: flex;
flex-direction: column;
border-right: 1px solid var(--sidebar-border);
background: var(--sidebar-bg);
z-index: 100;
backdrop-filter: blur(18px);
box-shadow: 8px 0 28px rgba(15, 23, 42, 0.05);
}
body.admin-page .sb-header {
padding: 20px;
border-bottom: 1px solid var(--sidebar-border);
}
body.admin-page .logo {
font-size: 1.2rem;
font-weight: 700;
color: var(--ribbon-accent);
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 16px;
}
body.admin-page .logo img {
filter: drop-shadow(0 2px 4px rgba(5, 150, 105, 0.2));
}
body.admin-page #search-box {
width: 100%;
box-sizing: border-box;
padding: 8px 12px 8px 34px;
border: 1px solid var(--sidebar-border);
border-radius: var(--radius);
outline: none;
background: var(--bg-site);
color: var(--text-main);
font-size: 13px;
}
body.admin-page #search-box:focus {
border-color: var(--ribbon-accent);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--ribbon-accent) 18%, transparent);
}
body.admin-page .tree-scroll {
flex: 1;
overflow-y: auto;
padding: 12px;
--tree-indent: 16px;
--tree-toggle-size: 16px;
--tree-icon-size: 18px;
--tree-col-gap: 6px;
--tree-pad-x: 8px;
}
body.admin-page .nav-item {
position: relative;
padding: 5px 8px;
padding-left: calc(var(--tree-pad-x) + var(--tree-depth, 0) * var(--tree-indent));
border-radius: var(--radius);
cursor: pointer;
font-size: 13px;
display: flex;
align-items: flex-start;
color: var(--text-main);
margin-bottom: 2px;
transition: background 0.2s, padding-right 0.15s ease;
min-height: 28px;
box-sizing: border-box;
}
body.admin-page .nav-item:hover,
body.admin-page .nav-item:focus-within {
padding-right: 46px;
}
body.admin-page .nav-link-box {
display: grid;
grid-template-columns: var(--tree-toggle-size) var(--tree-icon-size) minmax(0, 1fr);
column-gap: var(--tree-col-gap);
align-items: start;
width: 100%;
min-width: 0;
overflow: visible;
}
body.admin-page .tree-toggle-slot {
width: var(--tree-toggle-size);
height: var(--tree-toggle-size);
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
body.admin-page .nav-page-icon {
width: var(--tree-icon-size);
text-align: center;
font-size: 14px;
line-height: 1;
flex-shrink: 0;
}
body.admin-page .nav-page-title {
overflow: visible;
white-space: normal;
overflow-wrap: break-word;
word-break: normal;
min-width: 0;
line-height: 1.35;
}
body.admin-page .nav-item:hover {
background: var(--hover-bg);
}
body.admin-page .nav-item.active {
background: var(--ribbon-accent);
color: white;
font-weight: 600;
}
body.admin-page .nav-item.dragging {
opacity: 0.45;
cursor: grabbing;
}
body.admin-page .nav-item.drop-before {
box-shadow: inset 0 3px 0 var(--ribbon-accent);
}
body.admin-page .nav-item.drop-after {
box-shadow: inset 0 -3px 0 var(--ribbon-accent);
}
body.admin-page .nav-item.drop-inside {
background: color-mix(in srgb, var(--ribbon-accent) 22%, transparent);
outline: 1px solid color-mix(in srgb, var(--ribbon-accent) 60%, transparent);
}
body.admin-page .tree-toggle {
width: var(--tree-toggle-size);
height: var(--tree-toggle-size);
padding: 0;
border: none;
background: transparent;
color: inherit;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 8px;
line-height: 1;
cursor: pointer;
transition: transform 0.2s, opacity 0.2s, background 0.15s;
opacity: 0.65;
flex-shrink: 0;
}
body.admin-page .tree-toggle:hover {
opacity: 1;
background: rgba(0, 0, 0, 0.08);
border-radius: 2px;
}
body.admin-page .nav-item.active .tree-toggle:hover {
background: rgba(255, 255, 255, 0.2);
}
body.admin-page .tree-toggle.collapsed {
transform: rotate(-90deg);
}
body.admin-page .tree-toggle-spacer {
display: block;
width: 100%;
height: 100%;
}
body.admin-page .nav-actions {
position: absolute;
top: 4px;
right: 4px;
display: flex;
gap: 4px;
opacity: 0;
pointer-events: none;
z-index: 2;
padding-left: 6px;
background: linear-gradient(90deg, transparent, var(--sidebar-bg) 28%);
}
body.admin-page .nav-item:hover .nav-actions,
body.admin-page .nav-item:focus-within .nav-actions {
opacity: 1;
pointer-events: auto;
}
body.admin-page .nav-item.active .nav-actions {
background: linear-gradient(90deg, transparent, var(--ribbon-accent) 32%);
}
body.admin-page .btn-sm {
padding: 2px 6px;
border: none;
background: rgba(0, 0, 0, 0.1);
color: inherit;
cursor: pointer;
border-radius: 3px;
font-size: 10px;
line-height: 1.2;
flex-shrink: 0;
}
body.admin-page .btn-sm.btn-sm-danger {
color: #ef4444;
}
body.admin-page .tree-move-panel {
border: 1px solid var(--sidebar-border);
border-radius: 8px;
padding: 10px;
background: color-mix(in srgb, var(--hover-bg) 65%, transparent);
}
body.admin-page .tree-move-panel.is-collapsed {
display: none;
}
body.admin-page .tree-move-toggle {
height: 34px;
width: 100%;
border: 1px solid var(--sidebar-border);
background: var(--bg-site);
color: var(--text-main);
border-radius: 8px;
font-size: 12px;
font-weight: 700;
}
body.admin-page .tree-move-toggle[aria-expanded="true"] {
background: color-mix(in srgb, var(--ribbon-accent) 18%, var(--bg-site));
border-color: color-mix(in srgb, var(--ribbon-accent) 60%, var(--sidebar-border));
}
body.admin-page .tree-move-title {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--text-muted);
margin-bottom: 6px;
}
body.admin-page .tree-move-selected {
font-size: 12px;
font-weight: 600;
line-height: 1.35;
min-height: 32px;
padding: 6px 8px;
border: 1px solid var(--sidebar-border);
border-radius: 6px;
background: var(--bg-site);
margin-bottom: 8px;
word-break: break-word;
}
body.admin-page .tree-move-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px;
}
body.admin-page .tree-move-grid .btn-sm {
height: 30px;
border: 1px solid var(--sidebar-border);
background: var(--bg-site);
color: var(--text-main);
border-radius: 6px;
font-size: 11px;
font-weight: 600;
}
body.admin-page .tree-move-grid .btn-sm:disabled {
opacity: 0.45;
cursor: not-allowed;
}
body.admin-page .tree-move-wide {
grid-column: 1 / -1;
}
/* --- RIBBON UI --- */
body.admin-page #ribbon {
background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.96));
border-bottom: 1px solid var(--ribbon-border);
display: flex;
flex-direction: column;
flex-shrink: 0;
z-index: 200;
box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
overflow-x: auto;
overflow-y: visible;
-webkit-overflow-scrolling: touch;
}
body.admin-page .ribbon-tabs {
display: flex;
padding-left: 20px;
background: #ffffff;
border-bottom: 1px solid var(--ribbon-border);
color: var(--text-main);
}
html[data-theme="dark"] body.admin-page .ribbon-tabs {
background: #0f172a;
}
body.admin-page .ribbon-tab {
padding: 10px 24px;
font-size: 13px;
cursor: pointer;
border-bottom: 2px solid transparent;
font-weight: 500;
color: var(--text-muted);
transition: 0.2s;
}
body.admin-page .ribbon-tab:hover {
color: var(--ribbon-accent);
}
body.admin-page .ribbon-tab.active {
color: var(--ribbon-accent);
border-bottom-color: var(--ribbon-accent);
font-weight: 600;
}
body.admin-page .ribbon-content {
display: flex;
align-items: stretch;
padding: 12px 12px 10px;
gap: 10px;
background: var(--ribbon-bg);
min-height: 96px;
box-sizing: border-box;
overflow: visible;
}
body.admin-page .ribbon-group {
display: flex;
flex-direction: column;
align-items: center;
align-self: stretch;
justify-content: flex-start;
border-right: 1px solid var(--ribbon-border);
padding: 0 16px;
position: relative;
min-height: 100%;
box-sizing: border-box;
border-radius: 10px;
background: rgba(255, 255, 255, 0.55);
z-index: 10;
}
body.admin-page .ribbon-group:last-child {
border-right: none;
}
body.admin-page .ribbon-group-controls {
display: flex;
flex: 1 1 auto;
flex-direction: column;
gap: 6px;
width: 100%;
min-height: 0;
justify-content: flex-start;
}
body.admin-page .styles-gallery-wrap {
justify-content: flex-start;
align-items: flex-start;
}
body.admin-page .styles-gallery-wrap .styles-gallery {
flex: 0 0 auto;
align-self: flex-start;
}
body.admin-page .ribbon-row {
display: flex;
align-items: center;
gap: 4px;
}
body.admin-page .ribbon-combobox {
position: relative;
display: inline-flex;
align-items: center;
}
body.admin-page .ribbon-combobox--wide {
width: 100%;
}
body.admin-page .ribbon-combobox-input {
width: 52px;
height: 22px;
line-height: 18px;
border: 1px solid var(--ribbon-border);
border-radius: 2px;
background: white;
color: var(--text-main);
font-size: 11px;
padding: 1px 18px 1px 4px;
outline: none;
box-sizing: border-box;
}
body.admin-page .ribbon-combobox--wide .ribbon-combobox-input {
width: 100%;
}
html[data-theme="dark"] body.admin-page .ribbon-combobox-input {
background: #374151;
color: white;
}
body.admin-page .ribbon-combobox-input.is-mixed {
color: var(--accent-orange, #ea580c);
font-style: italic;
}
body.admin-page .ribbon-combobox-input:focus {
border-color: var(--ribbon-accent, #2b579a);
box-shadow: 0 0 0 1px color-mix(in srgb, var(--ribbon-accent, #2b579a) 35%, transparent);
}
body.admin-page .ribbon-combobox-toggle {
position: absolute;
right: 0;
top: 0;
width: 18px;
height: 22px;
border: none;
background: transparent;
cursor: pointer;
font-size: 9px;
color: var(--text-muted);
line-height: 1;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
}
body.admin-page .ribbon-combobox-toggle:hover {
color: var(--text-main);
background: color-mix(in srgb, var(--hover-bg) 80%, transparent);
}
body.admin-page .ribbon-combobox-menu {
display: none;
position: absolute;
top: calc(100% + 4px);
left: 0;
min-width: 100%;
max-height: 220px;
overflow-y: auto;
z-index: 10050;
background: #ffffff;
border: 1px solid var(--ribbon-border);
border-radius: 6px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
padding: 4px 0;
}
body.admin-page .ribbon-combobox-menu.ribbon-combobox-menu--floating {
position: fixed;
top: 0;
left: 0;
min-width: 52px;
width: max-content;
z-index: 10050;
}
html[data-theme="dark"] body.admin-page .ribbon-combobox-menu {
background: #1f2937;
border-color: #374151;
}
body.admin-page .ribbon-combobox-menu.is-open {
display: block;
}
body.admin-page .ribbon-combobox-option {
display: block;
width: 100%;
border: none;
background: transparent;
text-align: left;
padding: 5px 10px;
font-size: 11px;
cursor: pointer;
color: var(--text-main);
font-family: inherit;
}
body.admin-page .ribbon-combobox-option:hover,
body.admin-page .ribbon-combobox-option.is-active {
background: var(--hover-bg);
}
body.admin-page .ribbon-combobox-option.is-active {
font-weight: 600;
color: var(--ribbon-accent, #2b579a);
}
body.admin-page .border-field--full {
grid-column: 1 / -1;
}
body.admin-page .r-btn {
border: 1px solid transparent;
background: transparent;
padding: 4px;
border-radius: var(--radius);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-main);
font-size: 12px;
min-width: 28px;
height: 28px;
transition: 0.1s;
position: relative;
}
body.admin-page .r-btn:hover {
background: var(--hover-bg);
border-color: var(--ribbon-border);
}
body.admin-page .r-btn.active {
background: var(--active-bg);
border-color: var(--ribbon-border);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}
body.admin-page .r-btn svg {
width: 16px;
height: 16px;
stroke-width: 2;
}
body.admin-page .r-btn.large {
flex-direction: column;
height: 64px;
min-width: 50px;
font-size: 11px;
gap: 4px;
}
body.admin-page .r-btn.large svg {
width: 24px;
height: 24px;
}
/* Tab Chèn — nhóm Khối chèn: icon + nhãn thẳng hàng, khoảng cách đều */
body.admin-page .insert-block-row {
display: flex;
align-items: stretch;
gap: 8px;
}
body.admin-page .insert-block-row .r-btn.large {
flex: 1 1 0;
min-width: 58px;
max-width: 76px;
height: 64px;
padding: 8px 6px 6px;
gap: 6px;
align-items: center;
justify-content: center;
box-sizing: border-box;
}
body.admin-page .insert-block-row .r-btn-large-icon {
flex: 0 0 24px;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
}
body.admin-page .insert-block-row .r-btn-large-icon svg {
width: 24px;
height: 24px;
flex-shrink: 0;
}
body.admin-page .insert-block-row .r-btn-large-icon--glyph {
font-weight: 800;
font-size: 15px;
line-height: 1;
letter-spacing: -0.04em;
color: #111827;
}
body.admin-page .insert-block-row .r-btn-large-label {
display: block;
font-size: 11px;
line-height: 1.2;
text-align: center;
white-space: nowrap;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
body.admin-page .r-select {
background: white;
border: 1px solid var(--ribbon-border);
padding: 2px 4px;
border-radius: 2px;
font-size: 11px;
outline: none;
}
body.admin-page .r-select.ribbon-font-select {
height: 22px;
box-sizing: border-box;
}
html[data-theme="dark"] body.admin-page .r-select {
background: #374151;
color: white;
}
body.admin-page .group-label {
flex-shrink: 0;
width: 100%;
font-size: 10px;
color: var(--text-muted);
text-transform: capitalize;
text-align: center;
margin-top: auto;
padding-top: 8px;
padding-bottom: 2px;
line-height: 1.2;
}
/* --- COLOR PICKER POPOVER --- */
body.admin-page .color-popover {
display: none;
position: absolute;
top: 100%;
left: 0;
background: #ffffff;
border: 1px solid var(--ribbon-border);
border-radius: 10px;
padding: 10px;
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16);
z-index: 1000;
width: 220px;
}
body.admin-page .color-popover.ribbon-floating-popover {
position: fixed;
top: 0;
left: 0;
z-index: 10040;
}
html[data-theme="dark"] body.admin-page .color-popover {
background: #1f2937;
border-color: #374151;
}
body.admin-page .color-picker-title {
font-size: 11px;
font-weight: 700;
color: var(--text-muted);
margin-bottom: 8px;
letter-spacing: 0.03em;
text-transform: uppercase;
}
body.admin-page .color-picker-row {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
}
body.admin-page .color-wheel {
width: 42px;
height: 32px;
border: 1px solid var(--ribbon-border);
border-radius: 6px;
background: transparent;
padding: 0;
cursor: pointer;
}
body.admin-page .color-hex {
flex: 1;
height: 32px;
border: 1px solid var(--ribbon-border);
border-radius: 6px;
padding: 0 9px;
font-size: 12px;
background: var(--bg-site);
color: var(--text-main);
outline: none;
font-family: "JetBrains Mono", Consolas, monospace;
}
body.admin-page .color-quick {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 6px;
margin: 6px 0 8px;
}
body.admin-page .color-quick button {
width: 20px;
height: 20px;
border-radius: 4px;
border: 1px solid rgba(0, 0, 0, 0.12);
cursor: pointer;
padding: 0;
}
body.admin-page .color-quick button:hover {
transform: translateY(-1px);
}
body.admin-page .color-actions {
display: flex;
gap: 6px;
}
body.admin-page .color-actions .r-btn {
height: 30px;
min-width: auto;
padding: 0 10px;
font-size: 11px;
}
/* --- STYLES GALLERY --- */
body.admin-page .styles-gallery {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: stretch;
justify-content: flex-start;
gap: 6px;
overflow-x: auto;
overflow-y: hidden;
max-width: min(420px, 38vw);
padding: 0;
width: max-content;
}
body.admin-page .style-item {
flex: 0 0 auto;
border: 1px solid var(--ribbon-border);
background: white;
padding: 4px 10px;
border-radius: 2px;
min-width: 72px;
height: 60px;
display: flex;
flex-direction: column;
justify-content: center;
cursor: pointer;
font-size: 11px;
white-space: nowrap;
box-sizing: border-box;
}
html[data-theme="dark"] body.admin-page .style-item {
background: #374151;
}
body.admin-page .style-item:hover {
border-color: var(--ribbon-accent);
}
body.admin-page .style-item.is-active {
border-color: var(--ribbon-accent);
background: color-mix(in srgb, var(--ribbon-accent) 14%, #fff);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ribbon-accent) 45%, transparent);
}
html[data-theme="dark"] body.admin-page .style-item.is-active {
background: color-mix(in srgb, var(--ribbon-accent) 22%, #374151);
}
body.admin-page .style-item.is-mixed {
border-style: dashed;
border-color: color-mix(in srgb, var(--accent-orange, #f97316) 55%, var(--ribbon-border));
opacity: 0.85;
}
body.admin-page .r-btn.align-toggle.is-mixed {
outline: 1px dashed var(--ribbon-accent, #2b579a);
outline-offset: -2px;
}
body.admin-page .r-btn.align-toggle.is-active {
background: color-mix(in srgb, var(--ribbon-accent) 18%, transparent);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ribbon-accent) 45%, transparent);
}
body.admin-page .style-item b {
font-size: 14px;
}
/* --- MAIN AREA --- */
body.admin-page #main {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
overflow: hidden;
position: relative;
z-index: 0;
}
body.admin-page #content-container::-webkit-scrollbar,
body.manual-page #content-container::-webkit-scrollbar {
display: none;
}
body.admin-page .page-sheet {
max-width: 820px;
margin: 0 auto;
padding: 0;
background: transparent;
box-shadow: none;
position: relative;
}
html[data-theme="dark"] body.admin-page .page-sheet {
border-color: transparent;
}
body.admin-page #edit-title {
width: 100%;
border: none;
background: transparent;
font-family: "Montserrat", "Segoe UI", sans-serif;
font-size: 24px;
font-weight: 700;
color: #159d47;
text-align: center;
outline: none;
margin-bottom: 18px;
border-bottom: 1px solid transparent;
line-height: 1.15;
min-height: 1.15em;
letter-spacing: -0.03em;
position: relative;
z-index: 1;
}
body.admin-page #edit-title:empty::before {
content: attr(data-placeholder);
color: #9ca3af;
pointer-events: none;
}
body.admin-page #edit-title:focus {
border-bottom-color: var(--ribbon-border);
}
body.admin-page #editor.is-empty::before {
content: attr(data-placeholder);
color: #9ca3af;
pointer-events: none;
position: absolute;
top: 0;
left: 0;
}
body.admin-page #editor {
outline: none;
min-height: 800px;
font-size: 12pt;
font-family: "Montserrat", "Segoe UI", sans-serif;
line-height: 1.35;
color: var(--text-main);
max-width: 100%;
overflow-x: hidden;
text-align: left;
position: relative;
z-index: 0;
overflow: visible;
}
/* Hard guard: media không tràn ngang khỏi khung editor */
body.admin-page #editor img, body.admin-page #editor iframe, body.admin-page #editor video {
max-width: 100% !important;
}
body.admin-page .media-wrapper {
position: relative;
margin: 10pt auto;
border-radius: var(--radius);
overflow: visible;
transition: 0.3s;
display: block;
/* JS đồng bộ width theo .media-resizable để margin:auto căn giữa/phải ổn định trong contenteditable. */
width: fit-content;
max-width: min(100%, 1000px);
line-height: 0;
clear: both;
}
body.admin-page .media-wrapper.media-align-left {
margin-left: 0;
margin-right: auto;
}
body.admin-page .media-wrapper.media-align-center {
margin-left: auto;
margin-right: auto;
}
body.admin-page .media-wrapper.media-align-right {
margin-left: auto;
margin-right: 0;
}
body.admin-page .media-figure {
display: block;
width: fit-content;
max-width: min(100%, 1000px);
margin: 10pt auto;
clear: both;
}
body.admin-page .media-figure.media-align-left {
margin-left: 0;
margin-right: auto;
}
body.admin-page .media-figure.media-align-center {
margin-left: auto;
margin-right: auto;
}
body.admin-page .media-figure.media-align-right {
margin-left: auto;
margin-right: 0;
}
body.admin-page .media-figure > .media-wrapper {
margin: 0;
}
body.admin-page .media-figure.media-align-center > .media-wrapper,
body.admin-page .media-figure.media-align-right > .media-wrapper {
margin-left: auto;
margin-right: auto;
}
body.admin-page .media-figure.media-align-right > .media-wrapper {
margin-right: 0;
margin-left: auto;
}
body.admin-page .media-caption {
text-align: center;
font-family: "Montserrat", "Segoe UI", sans-serif;
font-size: 11pt;
font-style: italic;
line-height: 1.35;
margin: 6px 0 0;
padding: 0 6px;
color: #6b7280;
width: auto;
max-width: 100%;
box-sizing: border-box;
outline: none;
}
body.admin-page .media-caption[style*="text-align:left"],
body.admin-page .media-caption[style*="text-align: left"],
body.admin-page .media-caption[align="left"],
body.admin-page .media-caption.is-left {
text-align: left !important;
margin-left: 0 !important;
margin-right: auto !important;
padding-left: 0 !important;
padding-right: 6px !important;
}
body.admin-page .media-caption[style*="text-align:right"],
body.admin-page .media-caption[style*="text-align: right"],
body.admin-page .media-caption[align="right"],
body.admin-page .media-caption.is-right {
text-align: right !important;
margin-left: auto !important;
margin-right: 0 !important;
padding-left: 6px !important;
padding-right: 0 !important;
}
html[data-theme="dark"] body.admin-page .media-caption {
color: #9ca3af;
}
body.admin-page .media-caption:empty::before {
content: attr(data-placeholder);
color: #9ca3af;
font-style: italic;
}
body.admin-page .style-item[data-style="caption"] i {
font-size: 10px;
line-height: 1.2;
}
body.admin-page .media-wrapper:focus, body.admin-page .media-wrapper:focus-visible, body.admin-page .media-resizable:focus, body.admin-page .media-resizable:focus-visible {
outline: none !important;
}
body.admin-page .media-resizable {
position: relative;
display: block;
max-width: 100%;
min-width: 120px;
min-height: 80px;
border: none;
overflow: visible;
line-height: 0;
}
/* Ảnh: khung cao khớp ảnh — tránh min-height 80px làm tay cầm resize lệch dưới ảnh */
body.admin-page .media-resizable:has(> img) {
min-height: 0;
height: auto;
}
/* Chuẩn hóa ảnh/video:
* - ảnh nhỏ không bị quá bé
* - ảnh/video lớn không vượt khỏi khung trang
*/
body.admin-page .media-wrapper img {
width: 100%;
max-width: 100%;
height: auto;
display: block;
border: 1px solid #000;
border-radius: 0;
box-sizing: border-box;
object-fit: initial;
}
body.admin-page .media-aspect:has(iframe),
body.admin-page .media-aspect:has(video) {
width: 100%;
aspect-ratio: 16 / 9;
background: #000;
border-radius: var(--radius);
overflow: hidden;
}
body.admin-page .media-aspect:has(> img) {
width: 100%;
aspect-ratio: auto;
background: transparent;
border-radius: 0;
overflow: visible;
}
body.admin-page .media-aspect iframe,
body.admin-page .media-aspect video {
width: 100%;
height: 100%;
border: none;
display: block;
object-fit: contain;
background: #000;
pointer-events: none;
}
body.admin-page.preview-mode .media-aspect iframe,
body.admin-page.preview-mode .media-aspect video {
pointer-events: auto;
}
body.admin-page .resize-handle {
position: absolute;
width: 10px;
height: 10px;
background: #ffffff;
border: 1px solid #059669;
border-radius: 2px;
z-index: 6;
opacity: 0;
}
body.admin-page .media-wrapper:hover .resize-handle {
opacity: 1;
}
body.admin-page .media-wrapper.media-selected .resize-handle {
opacity: 1;
}
body.admin-page.preview-mode .resize-handle {
display: none !important;
}
body.admin-page .resize-handle.nw {
left: -6px;
top: -6px;
cursor: nwse-resize;
}
body.admin-page .resize-handle.ne {
right: -6px;
top: -6px;
cursor: nesw-resize;
}
body.admin-page .resize-handle.sw {
left: -6px;
bottom: -6px;
cursor: nesw-resize;
}
body.admin-page .resize-handle.se {
right: -6px;
bottom: -6px;
cursor: nwse-resize;
}
body.admin-page .resize-handle.n {
top: -6px;
left: calc(50% - 5px);
cursor: ns-resize;
}
body.admin-page .resize-handle.s {
bottom: -6px;
left: calc(50% - 5px);
cursor: ns-resize;
}
body.admin-page .resize-handle.w {
left: -6px;
top: calc(50% - 5px);
cursor: ew-resize;
}
body.admin-page .resize-handle.e {
right: -6px;
top: calc(50% - 5px);
cursor: ew-resize;
}
body.admin-page .media-wrapper:hover {
box-shadow: none;
}
body.admin-page .media-delete-btn {
display: none !important;
position: absolute;
top: -15px;
right: -5px;
background: #ef4444;
color: white;
border: none;
border-radius: 4px;
padding: 4px 8px;
cursor: pointer;
z-index: 1000;
opacity: 0;
transition: 0.2s;
font-size: 11px;
font-weight: bold;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
body.admin-page .media-wrapper:hover .media-delete-btn {
opacity: 1;
}
/* CONTENT STYLES
* Kiểu chữ cho nội dung editor: heading, đoạn, code, quote...
*/
body.admin-page #editor p {
margin: 0 0 7pt;
font-size: 12pt;
font-weight: 400;
text-align: left;
line-height: 1.35;
text-indent: 0;
}
body.admin-page #editor ul, body.admin-page #editor ol {
margin: 0 0 3pt;
padding-left: 0.75cm;
}
body.admin-page #editor li {
margin: 0 0 3pt;
text-align: justify;
line-height: 1.3;
padding-left: 0.25cm;
text-indent: -0.25cm;
}
body.admin-page #editor p.media-caption {
font-family: "Montserrat", "Segoe UI", sans-serif;
font-size: 12px;
font-style: italic;
text-align: center;
line-height: 1.35;
margin: 6px 0 0;
padding: 0 6px;
text-indent: 0;
color: var(--text-muted);
}
body.admin-page #editor p.media-caption[style*="text-align:left"],
body.admin-page #editor p.media-caption[style*="text-align: left"],
body.admin-page #editor p.media-caption[align="left"],
body.admin-page #editor p.media-caption.is-left {
text-align: left !important;
margin-left: 0 !important;
margin-right: auto !important;
padding-left: 0 !important;
padding-right: 6px !important;
}
body.admin-page #editor p.media-caption[style*="text-align:right"],
body.admin-page #editor p.media-caption[style*="text-align: right"],
body.admin-page #editor p.media-caption[align="right"],
body.admin-page #editor p.media-caption.is-right {
text-align: right !important;
margin-left: auto !important;
margin-right: 0 !important;
padding-left: 6px !important;
padding-right: 0 !important;
}
body.admin-page #editor blockquote {
border-left: 4px solid var(--ribbon-accent);
margin: 14px 0;
padding: 8px 14px;
color: var(--text-muted);
background: rgba(5, 150, 105, 0.06);
border-radius: 0 6px 6px 0;
}
body.admin-page #editor pre {
background: #0f172a;
color: #e5e7eb;
border-radius: 8px;
padding: 14px;
overflow-x: auto;
line-height: 1.5;
margin: 14px 0;
}
body.admin-page #editor code {
font-family: "JetBrains Mono", Consolas, monospace;
font-size: 12px;
}
body.admin-page #editor hr {
border: none;
border-top: 1px dashed #6b7280;
margin: 20px 0;
}
body.admin-page #editor table,
body.admin-page #editor table.wiki-table {
width: auto;
max-width: 100%;
border-collapse: collapse;
margin: 0;
table-layout: auto;
}
body.admin-page #editor th, body.admin-page #editor td {
border: 1px solid #bfbfbf;
padding: 8px 10px;
text-align: left;
vertical-align: top;
min-width: 48px;
cursor: text;
user-select: text;
}
body.admin-page #editor table th {
background: #f9fafb;
font-weight: 600;
}
html[data-theme="dark"] body.admin-page #editor table th {
background: #1f2937;
border-color: #4b5563;
}
html[data-theme="dark"] body.admin-page #editor table td {
border-color: #4b5563;
}
body.admin-page #editor table:focus-within,
body.admin-page #editor .wiki-table-wrap.is-active table {
outline: 2px solid color-mix(in srgb, var(--ribbon-accent) 35%, transparent);
outline-offset: 2px;
}
body.admin-page #editor .wiki-table-wrap {
position: relative;
margin: 16px 0;
max-width: 100%;
overflow: visible;
}
body.admin-page #editor .wiki-table-wrap.is-active {
z-index: 2;
}
body.admin-page #editor table.wiki-table.has-col-widths {
table-layout: fixed;
width: auto;
max-width: 100%;
}
body.admin-page #editor .wiki-table td,
body.admin-page #editor .wiki-table th {
position: relative;
overflow: visible;
}
body.admin-page #editor .col-resize-grip,
body.admin-page #editor .row-resize-grip {
position: absolute;
z-index: 4;
background: transparent;
user-select: none;
}
body.admin-page #editor .col-resize-grip {
top: 0;
right: -5px;
width: 10px;
height: 100%;
cursor: col-resize;
touch-action: none;
}
body.admin-page #editor .col-resize-grip::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 50%;
width: 2px;
margin-left: -1px;
background: var(--ribbon-accent);
opacity: 0;
transition: opacity 0.12s;
pointer-events: none;
}
body.admin-page #editor .col-resize-grip:hover,
body.admin-page #editor .col-resize-grip.is-dragging {
background: color-mix(in srgb, var(--ribbon-accent) 12%, transparent);
}
body.admin-page #editor .col-resize-grip:hover::after,
body.admin-page #editor .col-resize-grip.is-dragging::after {
opacity: 1;
}
body.admin-page #editor .row-resize-grip {
left: 0;
bottom: -5px;
width: 100%;
height: 10px;
cursor: row-resize;
touch-action: none;
}
body.admin-page #editor .row-resize-grip::after {
content: '';
position: absolute;
left: 0;
right: 0;
top: 50%;
height: 2px;
margin-top: -1px;
background: var(--ribbon-accent);
opacity: 0;
transition: opacity 0.12s;
pointer-events: none;
}
body.admin-page #editor .row-resize-grip:hover,
body.admin-page #editor .row-resize-grip.is-dragging {
background: color-mix(in srgb, var(--ribbon-accent) 12%, transparent);
}
body.admin-page #editor .row-resize-grip:hover::after,
body.admin-page #editor .row-resize-grip.is-dragging::after {
opacity: 1;
}
body.admin-page.preview-mode .col-resize-grip,
body.admin-page.preview-mode .row-resize-grip {
display: none !important;
}
body.admin-page .table-modal {
display: none;
position: fixed;
inset: 0;
z-index: 12000;
align-items: center;
justify-content: center;
}
body.admin-page .table-modal.is-open {
display: flex;
}
body.admin-page .table-modal-backdrop {
position: absolute;
inset: 0;
background: rgba(15, 23, 42, 0.45);
}
body.admin-page .table-modal-dialog {
position: relative;
background: var(--ribbon-bg, #fff);
border: 1px solid var(--ribbon-border);
border-radius: 12px;
padding: 20px 22px;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18);
min-width: 280px;
}
body.admin-page .table-modal-title {
font-size: 16px;
font-weight: 700;
margin-bottom: 6px;
}
body.admin-page .table-modal-hint {
font-size: 12px;
color: var(--text-muted, #6b7280);
margin-bottom: 14px;
}
body.admin-page .table-grid-picker {
display: grid;
grid-template-columns: repeat(10, 22px);
grid-template-rows: repeat(8, 22px);
gap: 3px;
margin-bottom: 10px;
}
body.admin-page .table-grid-cell {
width: 22px;
height: 22px;
border: 1px solid var(--ribbon-border);
border-radius: 3px;
background: var(--hover-bg, #f3f4f6);
cursor: pointer;
transition: background 0.08s, border-color 0.08s;
}
body.admin-page .table-grid-cell.is-highlight {
background: color-mix(in srgb, var(--ribbon-accent) 28%, #fff);
border-color: var(--ribbon-accent);
}
body.admin-page .table-grid-size {
font-size: 13px;
font-weight: 600;
color: var(--ribbon-accent);
text-align: center;
}
body.admin-page .table-toolbar-anchor {
display: none;
}
body.admin-page .wiki-table-wrap > .table-float-toolbar {
position: relative;
top: auto;
left: auto;
z-index: 5;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px;
padding: 6px 8px;
margin: 0 0 6px;
background: var(--ribbon-bg, #fff);
border: 1px solid var(--ribbon-border);
border-radius: 8px;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
max-width: 100%;
width: max-content;
}
body.admin-page .table-float-toolbar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px;
padding: 6px 8px;
background: var(--ribbon-bg, #fff);
border: 1px solid var(--ribbon-border);
border-radius: 8px;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
max-width: min(96vw, 520px);
}
body.admin-page .table-float-toolbar[hidden] {
display: none !important;
}
body.admin-page .table-toolbar-group {
display: flex;
flex-wrap: wrap;
gap: 4px;
}
body.admin-page .table-toolbar-sep {
width: 1px;
height: 26px;
background: var(--ribbon-border);
margin: 0 2px;
}
body.admin-page .table-tb-btn {
height: 28px;
padding: 0 10px;
border: 1px solid var(--ribbon-border);
border-radius: 6px;
background: var(--ribbon-bg);
color: var(--text-main);
font-size: 11px;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
}
body.admin-page .table-tb-btn:hover {
border-color: var(--ribbon-accent);
background: var(--hover-bg);
}
body.admin-page .table-tb-btn.danger:hover {
border-color: #ef4444;
color: #b91c1c;
}
body.admin-page.preview-mode .table-float-toolbar {
display: none !important;
}
/* MISC */
body.admin-page .status-bar {
height: 30px;
background: linear-gradient(90deg, var(--ribbon-accent), color-mix(in srgb, var(--ribbon-accent) 70%, #0f172a));
color: white;
display: flex;
align-items: center;
padding: 0 20px;
font-size: 11px;
justify-content: space-between;
font-weight: 600;
letter-spacing: 0.01em;
}
body.admin-page #save-status.is-success {
color: #bbf7d0;
text-shadow: 0 0 8px rgba(187, 247, 208, 0.35);
}
body.admin-page #save-status.is-error {
color: #fecaca;
}
body.admin-page .advanced-controls {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 8px;
justify-content: center;
}
body.admin-page .advanced-controls .advanced-action-btn {
width: 34px;
height: 34px;
min-width: 34px;
font-size: 17px;
font-weight: 800;
border: 1px solid transparent;
background: transparent;
}
body.admin-page .advanced-controls .advanced-action-btn:hover {
filter: brightness(0.98);
border-color: var(--ribbon-accent);
background: var(--hover-bg);
}
body.admin-page .advanced-controls .ribbon-row {
gap: 6px;
justify-content: center;
}
body.admin-page .insert-icon-btn {
height: 40px !important;
min-width: 40px !important;
padding: 0 8px !important;
font-size: 18px !important;
font-weight: 800;
line-height: 1;
}
body.admin-page .insert-icon-btn svg {
width: 20px !important;
height: 20px !important;
}
body.admin-page .border-tool-wrap {
position: relative;
}
body.admin-page .size-tool-wrap {
position: relative;
}
body.admin-page .line-spacing-tool-wrap {
position: relative;
}
body.admin-page .line-spacing-popover {
display: none;
position: absolute;
top: calc(100% + 8px);
left: 0;
width: 240px;
z-index: 2000;
background: #ffffff;
border: 1px solid var(--ribbon-border);
border-radius: 10px;
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16);
padding: 10px;
}
html[data-theme="dark"] body.admin-page .line-spacing-popover {
background: #1f2937;
border-color: #374151;
}
body.admin-page .line-spacing-popover-title {
font-size: 11px;
font-weight: 700;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.03em;
margin-bottom: 8px;
}
body.admin-page .line-spacing-popover-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
body.admin-page .line-spacing-popover .r-btn {
height: 30px;
min-width: auto;
padding: 0 10px;
font-size: 11px;
}
body.admin-page .border-popover,
body.admin-page .ribbon-floating-popover {
display: none;
position: fixed;
top: 0;
left: 0;
width: 250px;
z-index: 10040;
background: #ffffff;
border: 1px solid var(--ribbon-border);
border-radius: 10px;
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16);
padding: 10px;
}
html[data-theme="dark"] body.admin-page .border-popover {
background: #1f2937;
border-color: #374151;
}
body.admin-page .border-popover-title {
font-size: 11px;
font-weight: 700;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.03em;
margin-bottom: 8px;
}
body.admin-page .border-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-bottom: 8px;
}
body.admin-page .border-field {
display: flex;
flex-direction: column;
gap: 4px;
}
body.admin-page .border-field label {
font-size: 11px;
color: var(--text-muted);
}
body.admin-page .border-field input[type="number"], body.admin-page .border-field input[type="color"] {
height: 30px;
border: 1px solid var(--ribbon-border);
border-radius: 6px;
background: var(--bg-site);
color: var(--text-main);
font-size: 12px;
padding: 0 8px;
outline: none;
}
body.admin-page .border-field input[type="color"] {
padding: 2px;
cursor: pointer;
}
body.admin-page .border-actions {
display: flex;
gap: 6px;
margin-top: 8px;
}
body.admin-page .border-actions .r-btn {
width: auto;
min-width: auto;
padding: 0 10px;
}
body.admin-page .border-note {
font-size: 11px;
color: var(--text-muted);
opacity: 0.9;
}
body.admin-page .size-popover {
display: none;
position: fixed;
top: 0;
left: 0;
width: 240px;
z-index: 10040;
background: #ffffff;
border: 1px solid var(--ribbon-border);
border-radius: 10px;
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16);
padding: 10px;
}
html[data-theme="dark"] body.admin-page .size-popover {
background: #1f2937;
border-color: #374151;
}
body.admin-page #find-panel {
display: none;
align-items: center;
gap: 8px;
padding: 10px 14px;
border-bottom: 1px solid var(--ribbon-border);
background: var(--ribbon-bg);
}
body.admin-page #find-panel input {
height: 30px;
border: 1px solid var(--ribbon-border);
border-radius: 6px;
padding: 0 10px;
font-size: 12px;
background: var(--bg-site);
color: var(--text-main);
outline: none;
}
body.admin-page #find-panel .r-btn {
height: 30px;
padding: 0 10px;
min-width: auto;
}
@keyframes toc-target-flash {
0% {
background-color: color-mix(in srgb, var(--ribbon-accent, #059669) 38%, transparent);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--ribbon-accent, #059669) 18%, transparent);
}
70% {
background-color: color-mix(in srgb, var(--ribbon-accent, #059669) 14%, transparent);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--ribbon-accent, #059669) 10%, transparent);
}
100% {
background-color: transparent;
box-shadow: none;
}
}
/* --- Link modal (Chèn liên kết) --- */
body.admin-page .link-modal {
position: fixed;
inset: 0;
z-index: 10050;
display: none;
align-items: center;
justify-content: center;
padding: 24px;
box-sizing: border-box;
}
body.admin-page .link-modal.is-open {
display: flex;
}
body.admin-page .link-modal-backdrop {
position: absolute;
inset: 0;
background: rgba(15, 23, 42, 0.45);
cursor: pointer;
}
html[data-theme="dark"] body.admin-page .link-modal-backdrop {
background: rgba(0, 0, 0, 0.55);
}
body.admin-page .link-modal-dialog {
position: relative;
z-index: 1;
width: 100%;
max-width: 420px;
padding: 22px 24px;
border-radius: 12px;
border: 1px solid var(--ribbon-border);
background: var(--bg-site);
color: var(--text-main);
box-shadow: 0 24px 48px rgba(0, 0, 0, 0.18);
}
body.admin-page .link-modal-title {
margin: 0 0 8px;
font-size: 18px;
font-weight: 700;
color: var(--text-main);
}
body.admin-page .link-modal-hint {
margin: 0 0 16px;
font-size: 13px;
line-height: 1.45;
color: var(--text-muted, #64748b);
}
body.admin-page .link-modal-label {
display: block;
font-size: 12px;
font-weight: 600;
margin-bottom: 6px;
color: var(--text-main);
}
body.admin-page .link-modal-input {
width: 100%;
box-sizing: border-box;
height: 40px;
padding: 0 12px;
border: 1px solid var(--ribbon-border);
border-radius: 8px;
font-size: 14px;
background: var(--bg-site);
color: var(--text-main);
outline: none;
}
body.admin-page .link-modal-input:focus {
border-color: var(--ribbon-accent);
box-shadow: 0 0 0 2px rgba(43, 87, 154, 0.2);
}
body.admin-page .link-modal-actions {
display: flex;
justify-content: flex-end;
gap: 10px;
margin-top: 18px;
}
body.admin-page .link-modal-btn-ok {
background: var(--ribbon-accent);
color: #fff !important;
border: none;
font-weight: 600;
}
body.admin-page .link-modal-btn-ok:hover {
filter: brightness(1.05);
}
body.admin-page .link-modal-btn-cancel {
background: var(--hover-bg, #f1f5f9);
color: var(--text-main) !important;
border: 1px solid var(--ribbon-border);
font-weight: 600;
}
body.admin-page .link-modal-btn-cancel:hover {
background: color-mix(in srgb, var(--ribbon-border) 35%, var(--hover-bg, #f1f5f9));
}
body.admin-page .link-modal-btn-danger {
background: #dc2626;
color: #fff !important;
border: none;
font-weight: 600;
}
body.admin-page .link-modal-btn-danger:hover {
background: #b91c1c;
}
body.admin-page .delete-page-modal-name {
margin: 0 0 10px;
padding: 10px 12px;
border-radius: 8px;
background: color-mix(in srgb, #dc2626 8%, var(--hover-bg, #f8fafc));
border: 1px solid color-mix(in srgb, #dc2626 22%, var(--ribbon-border));
font-size: 14px;
line-height: 1.4;
font-weight: 600;
color: var(--text-main);
word-break: break-word;
}
body.link-modal-open {
overflow: hidden;
}
body.admin-page .link-modal-divider {
display: flex;
align-items: center;
gap: 10px;
margin: 14px 0 12px;
font-size: 12px;
color: var(--text-muted, #64748b);
}
body.admin-page .link-modal-divider::before,
body.admin-page .link-modal-divider::after {
content: "";
flex: 1;
height: 1px;
background: var(--ribbon-border);
}
body.admin-page .link-modal-file-label {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
height: 40px;
margin-bottom: 8px;
border: 1px dashed var(--ribbon-border);
border-radius: 8px;
font-size: 13px;
font-weight: 600;
color: var(--text-main);
cursor: pointer;
background: var(--hover-bg, #f8fafc);
transition: border-color 0.15s, background 0.15s;
}
body.admin-page .link-modal-file-label:hover {
border-color: var(--ribbon-accent);
background: color-mix(in srgb, var(--ribbon-accent) 8%, var(--hover-bg, #f8fafc));
}
body.admin-page .link-modal-file-label .link-modal-file-input {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
}
body.admin-page .link-modal-file-label {
position: relative;
}
body.admin-page .link-modal-file-hint {
font-size: 12px;
color: var(--text-muted, #64748b);
margin-bottom: 4px;
word-break: break-all;
}
body.admin-page .link-modal-hint code {
font-size: 12px;
padding: 1px 5px;
border-radius: 4px;
background: var(--hover-bg, #f1f5f9);
}
/* Liên kết trong nội dung: không gạch chân (editor + trang đọc) */
body.admin-page #editor a,
body.manual-page #content a {
text-decoration: none !important;
color: var(--ribbon-accent);
cursor: pointer;
pointer-events: auto;
}
body.admin-page #editor a:hover,
body.manual-page #content a:hover {
opacity: 0.88;
}
/* --- Chỉ số trên / dưới (sup/sub): nội dung + nút ribbon ---
* Đảm bảo hiển thị nhất quán giữa editor và trang đọc.
*/
body.admin-page #editor sup,
body.admin-page #editor sub,
body.manual-page #content sup,
body.manual-page #content sub {
font-size: 0.62em;
line-height: 0;
position: relative;
vertical-align: baseline;
}
body.admin-page #editor sup,
body.manual-page #content sup {
vertical-align: super;
}
body.admin-page #editor sub,
body.manual-page #content sub {
vertical-align: sub;
}
body.admin-page #editor span[style*="vertical-align:super"],
body.admin-page #editor span[style*="vertical-align: super"],
body.manual-page #content span[style*="vertical-align:super"],
body.manual-page #content span[style*="vertical-align: super"] {
font-size: 0.62em !important;
line-height: 0 !important;
}
body.admin-page #editor span[style*="vertical-align:sub"],
body.admin-page #editor span[style*="vertical-align: sub"],
body.manual-page #content span[style*="vertical-align:sub"],
body.manual-page #content span[style*="vertical-align: sub"] {
font-size: 0.62em !important;
line-height: 0 !important;
}
body.admin-page .r-btn.sup-sub-btn {
min-width: 2.25rem;
padding-inline: 0.35rem;
}
body.admin-page .r-btn.sup-sub-btn .sup-sub-mark {
display: inline-block;
font-size: 0.95rem;
font-weight: 600;
line-height: 1;
letter-spacing: -0.02em;
font-family: "Segoe UI", system-ui, sans-serif;
}
body.admin-page .r-btn.sup-sub-btn .sup-sub-mark sup {
font-size: 0.55em;
font-weight: 700;
line-height: 0;
position: relative;
top: -0.55em;
vertical-align: baseline;
}
body.admin-page .r-btn.sup-sub-btn .sup-sub-mark sub {
font-size: 0.55em;
font-weight: 700;
line-height: 0;
position: relative;
top: 0.2em;
vertical-align: baseline;
}
body.admin-page .r-btn.sup-sub-btn.is-active,
body.admin-page .r-btn.format-toggle.is-active {
background: color-mix(in srgb, var(--ribbon-accent, #2b579a) 18%, transparent);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ribbon-accent, #2b579a) 45%, transparent);
}
body.admin-page.format-painter-active #editor,
body.admin-page.format-painter-active #edit-title {
cursor: copy;
}
body.admin-page #btn-format-painter.is-sticky.is-active {
box-shadow: inset 0 0 0 2px var(--ribbon-accent, #2b579a);
}
body.admin-page.format-painter-active #editor *,
body.admin-page.format-painter-active #edit-title * {
cursor: copy;
}
html[data-theme="dark"] body.admin-page .r-btn.sup-sub-btn.is-active,
html[data-theme="dark"] body.admin-page .r-btn.format-toggle.is-active {
background: color-mix(in srgb, var(--ribbon-accent, #60a5fa) 22%, transparent);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ribbon-accent, #60a5fa) 50%, transparent);
}
body.admin-page .r-btn.format-toggle.is-mixed,
body.admin-page .r-btn.sup-sub-btn.is-mixed,
body.admin-page .r-btn.ribbon-color-btn.is-mixed {
background: color-mix(in srgb, var(--accent-orange, #f97316) 14%, transparent);
box-shadow: inset 0 0 0 1px dashed color-mix(in srgb, var(--accent-orange, #f97316) 55%, transparent);
}
body.admin-page .r-select.ribbon-font-select.is-mixed {
color: var(--accent-orange, #ea580c);
font-style: italic;
}
body.admin-page .r-btn.sup-sub-btn:focus-visible {
outline: 2px solid var(--ribbon-accent, #2b579a);
outline-offset: 2px;
}
/* --- TOC --- */
body.admin-page #editor h1,
body.admin-page #editor h2,
body.admin-page #editor h3,
body.admin-page #editor h4,
body.admin-page #editor h5,
body.admin-page #editor h6,
body.admin-page #edit-title {
scroll-margin-top: 24px;
}
body.admin-page .toc-scroll-target {
animation: toc-target-flash 2.6s ease-out;
}
body.admin-page #edit-title.toc-scroll-target {
outline: 2px solid var(--ribbon-accent);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--ribbon-accent) 22%, transparent);
}
body.manual-page .page-header-header,
body.admin-page .page-header-header {
display: flex;
flex-direction: column;
gap: 2px;
}
body.manual-page .page-header-header,
body.admin-page .page-header-header,
body.manual-page footer,
body.admin-page footer,
body.manual-page .page-footer,
body.admin-page .page-footer {
font-family: "Times New Roman", Times, serif;
font-size: 10pt;
}
body.manual-page .breadcrumb,
body.admin-page .breadcrumb {
display: flex;
align-items: center;
gap: 6px;
font-size: 13px;
color: var(--text-muted);
}
body.manual-page .breadcrumb span:last-child,
body.admin-page .breadcrumb span:last-child {
color: var(--ribbon-accent);
font-weight: 600;
}
body.manual-page .breadcrumb-sep,
body.admin-page .breadcrumb-sep {
opacity: 0.5;
font-size: 10px;
}
body.manual-page .page-meta,
body.admin-page .page-meta {
font-size: 11px;
color: var(--text-muted);
opacity: 0.7;
}