/* Giao diện quản trị hiện đại - không tác động màn hình đăng nhập. */ #dashboardPanel { --admin-red:#c90012; --admin-red-dark:#980009; --admin-bg:#f5f7fa; --admin-line:#e6e9ef; --admin-ink:#151d2f; --admin-muted:#667085; } #dashboardPanel, #dashboardPanel input, #dashboardPanel select, #dashboardPanel button { font-family:"Inter","Be Vietnam Pro",sans-serif; } #dashboardPanel h1,#dashboardPanel h2,#dashboardPanel h3,#dashboardPanel h4,#dashboardPanel strong,#dashboardPanel .aside-menu a,#dashboardPanel button { font-family:"Be Vietnam Pro","Inter",sans-serif; } #dashboardPanel.dashboard { min-height:100vh; grid-template-columns:250px minmax(0,1fr); background:var(--admin-bg); } #dashboardPanel > aside { width:250px; height:100vh; padding:0; position:sticky; top:0; overflow-y:auto; color:#fff; border:0; background:linear-gradient(180deg,#c4000e 0%,#a90008 68%,#8f0007 100%); box-shadow:8px 0 30px rgba(119,0,8,.08); } #dashboardPanel .aside-header { min-height:76px; margin:0; padding:13px 18px; position:relative; gap:11px; border-bottom:1px solid rgba(255,255,255,.14); } #dashboardPanel .aside-brand-mark { width:38px; height:38px; flex:0 0 38px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.3); border-radius:9px; color:#ffe329; background:rgba(255,255,255,.1); font-size:1rem; } #dashboardPanel .aside-title { color:#fff; font-size:.76rem; line-height:1.35; white-space:nowrap; } #dashboardPanel .aside-title span { color:#ffe329; font-size:.67rem; font-weight:800; text-transform:uppercase; } #dashboardPanel .admin-sidebar-close { display:none; margin-left:auto; border:0; color:#fff; background:transparent; font-size:1.1rem; } #dashboardPanel .admin-sidebar-collapse { width:28px; height:28px; position:absolute; top:24px; right:-14px; z-index:5; display:grid; place-items:center; border:1px solid #e1e5eb; border-radius:50%; color:#a9000d; background:#fff; box-shadow:0 4px 12px rgba(40,20,25,.16); cursor:pointer; } #dashboardPanel .aside-menu { padding:9px 9px 12px; overflow:visible; } #dashboardPanel .aside-menu li { margin:2px 0; } #dashboardPanel .aside-menu .admin-menu-label { margin:18px 10px 7px; color:rgba(255,255,255,.55); font-size:.57rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; } #dashboardPanel .aside-menu li a { min-height:40px; padding:9px 11px; gap:11px; border-radius:5px; color:rgba(255,255,255,.88); font-size:.69rem; font-weight:650; } #dashboardPanel .aside-menu li a i { width:19px; color:rgba(255,255,255,.88); font-size:.82rem; } #dashboardPanel .aside-menu li a:hover { color:#fff; background:rgba(255,255,255,.12); transform:none; } #dashboardPanel .aside-menu li.active a { color:#b7000c; background:#fff; box-shadow:0 8px 18px rgba(80,0,5,.15); } #dashboardPanel .aside-menu li.active a i { color:#c30010; } #dashboardPanel .aside-menu li.active a::before { display:none; } #dashboardPanel .aside-footer { margin-top:auto; padding:12px; border-top:1px solid rgba(255,255,255,.14); } #dashboardPanel .admin-view-site { min-height:50px; margin-bottom:8px; padding:10px 11px; display:flex; align-items:center; gap:10px; color:#fff; border-radius:6px; background:rgba(255,255,255,.1); text-decoration:none; } #dashboardPanel .admin-view-site i { font-size:.9rem; } #dashboardPanel .admin-view-site span { font-size:.68rem; font-weight:700; } #dashboardPanel .admin-view-site small { display:block; margin-top:2px; color:rgba(255,255,255,.63); font-size:.53rem; font-weight:400; } #dashboardPanel .aside-footer .btn-gray { color:#fff; border-color:rgba(255,255,255,.2); background:transparent; } #dashboardPanel.sidebar-collapsed.dashboard { grid-template-columns:72px minmax(0,1fr); } #dashboardPanel.sidebar-collapsed > aside { width:72px; overflow-x:visible; } #dashboardPanel.sidebar-collapsed .aside-header { padding:13px 10px; justify-content:center; } #dashboardPanel.sidebar-collapsed .aside-title, #dashboardPanel.sidebar-collapsed .aside-menu .admin-menu-label, #dashboardPanel.sidebar-collapsed .aside-menu li a span, #dashboardPanel.sidebar-collapsed .aside-footer span, #dashboardPanel.sidebar-collapsed .aside-footer .btn-gray { display:none; } #dashboardPanel.sidebar-collapsed .admin-sidebar-collapse i { transform:rotate(180deg); } #dashboardPanel.sidebar-collapsed .aside-menu { padding:11px 8px; } #dashboardPanel.sidebar-collapsed .aside-menu li { margin:5px 0; } #dashboardPanel.sidebar-collapsed .aside-menu li a { min-height:44px; padding:10px; justify-content:center; } #dashboardPanel.sidebar-collapsed .aside-menu li a i { width:auto; font-size:.94rem; } #dashboardPanel.sidebar-collapsed .aside-footer { padding:10px 8px; } #dashboardPanel.sidebar-collapsed .admin-view-site { min-height:42px; margin:0; padding:8px; justify-content:center; } #dashboardPanel > main { max-height:100vh; padding:0 22px 35px; overflow:auto; background:var(--admin-bg); } #dashboardPanel .admin-topbar { min-height:76px; margin:0 -22px; padding:10px 22px; position:sticky; top:0; z-index:50; display:grid; grid-template-columns:minmax(280px,500px) auto; align-items:center; justify-content:end; gap:18px; border-bottom:1px solid var(--admin-line); background:rgba(255,255,255,.96); backdrop-filter:blur(12px); } #dashboardPanel .admin-brand { margin-right:auto; display:none; } #dashboardPanel .admin-brand img { width:350px; height:58px; max-width:100%; object-fit:contain; object-position:left center; } #dashboardPanel .admin-menu-toggle { width:40px; height:40px; display:none; border:0; color:#1d2738; background:transparent; font-size:1.15rem; cursor:pointer; } #dashboardPanel .admin-global-search { height:40px; width:100%; padding:0 13px; display:flex; align-items:center; gap:9px; border:1px solid #dfe4eb; border-radius:6px; background:#fff; } #dashboardPanel .admin-global-search input { width:100%; border:0; outline:0; color:#303a4b; font-size:.7rem; } #dashboardPanel .admin-global-search i { color:#667085; font-size:.75rem; } #dashboardPanel .admin-top-account { display:flex; align-items:center; gap:9px; } #dashboardPanel .admin-top-account .admin-avatar.small { width:38px; height:38px; flex:0 0 38px; display:grid; place-items:center; overflow:hidden; border:1px solid rgba(255,255,255,.65); border-radius:50%; color:#fff; background:linear-gradient(135deg,#d70013,#980009); box-shadow:0 5px 14px rgba(183,0,14,.18); font-size:.92rem; line-height:1; } #dashboardPanel .admin-top-account strong { display:block; color:#182133; font-size:.68rem; } #dashboardPanel .admin-top-account small { display:block; margin-top:2px; color:#7b8492; font-size:.56rem; } #dashboardPanel .main-header { min-height:78px; margin:0; padding:16px 0 14px; border-bottom:0; } #dashboardPanel .admin-page-heading { display:block; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; } #dashboardPanel .admin-breadcrumb { margin-bottom:5px; padding:0!important; display:flex; align-items:center; gap:7px; color:#7a8491; border:0!important; border-radius:0!important; background:transparent!important; box-shadow:none!important; font-size:.61rem; } #dashboardPanel .admin-breadcrumb i { color:#a3aab4; font-size:.45rem; } #dashboardPanel .main-title { color:var(--admin-ink); font-size:1.55rem; font-weight:850; } #dashboardPanel .admin-role-pill { padding:8px 14px; display:inline-flex; align-items:center; gap:7px; border:1px solid #e0e5ec; border-radius:22px; color:#647085; background:#fff; font-size:.67rem; box-shadow:0 3px 10px rgba(15,23,42,.03); } #dashboardPanel .admin-role-pill i { color:#ffb500; } /* Dashboard */ #dashboardPanel .admin-dashboard-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; } #dashboardPanel .admin-stat-card { min-height:104px; padding:16px; display:flex; align-items:center; gap:13px; border:1px solid var(--admin-line); border-radius:7px; background:#fff; box-shadow:0 5px 18px rgba(15,23,42,.035); } #dashboardPanel .admin-stat-card > span { width:42px; height:42px; flex:0 0 42px; display:grid; place-items:center; border-radius:50%; color:#fff; font-size:1rem; background:#e82837; } #dashboardPanel .admin-stat-card.orange > span { background:#ff9d1b; } #dashboardPanel .admin-stat-card.purple > span { background:#8d50dd; } #dashboardPanel .admin-stat-card.blue > span { background:#347de0; } #dashboardPanel .admin-stat-card.green > span { background:#36a65c; } #dashboardPanel .admin-stat-card.rose > span { background:#f24a61; } #dashboardPanel .admin-stat-card div { min-width:0; display:grid; gap:4px; align-content:center; } #dashboardPanel .admin-stat-card small { display:block; color:#4f5968; font-size:.62rem; line-height:1.35; white-space:nowrap; } #dashboardPanel .admin-stat-card strong { display:block; margin:0; color:#111827; font-size:1.35rem; line-height:1.1; } #dashboardPanel .admin-stat-card em { display:block; margin:0; color:#249a4a; font-size:.53rem; font-style:normal; line-height:1.4; } #dashboardPanel .admin-dashboard-grid { margin-top:13px; display:grid; grid-template-columns:minmax(0,1.5fr) minmax(270px,.85fr) minmax(260px,.72fr); gap:13px; } #dashboardPanel .admin-dashboard-card { min-width:0; border:1px solid var(--admin-line); border-radius:7px; background:#fff; box-shadow:0 5px 18px rgba(15,23,42,.035); } #dashboardPanel .admin-card-heading { min-height:51px; padding:13px 15px; display:flex; align-items:center; justify-content:space-between; gap:10px; border-bottom:1px solid #edf0f4; } #dashboardPanel .admin-card-heading h3 { color:#202838; font-size:.76rem; } #dashboardPanel .admin-card-heading span { color:#7a8492; font-size:.56rem; } #dashboardPanel .admin-card-heading button { border:0; color:#c40010; background:transparent; font-size:.58rem; cursor:pointer; } #dashboardPanel .admin-chart-wrap { height:285px; padding:12px 15px 15px; } #dashboardPanel #adminViewsChart { width:100%; height:100%; display:block; } #dashboardPanel .admin-category-chart { min-height:285px; padding:18px; display:flex; align-items:center; justify-content:center; gap:20px; } #dashboardPanel .admin-donut { width:145px; height:145px; flex:0 0 145px; display:grid; place-content:center; border-radius:50%; background:conic-gradient(#e62432 0 100%); position:relative; text-align:center; } #dashboardPanel .admin-donut::before { content:""; width:88px; height:88px; position:absolute; inset:0; margin:auto; border-radius:50%; background:#fff; } #dashboardPanel .admin-donut strong,#dashboardPanel .admin-donut small { position:relative; z-index:1; } #dashboardPanel .admin-donut strong { color:#1d2635; font-size:1.05rem; } #dashboardPanel .admin-donut small { color:#7b8491; font-size:.53rem; } #dashboardPanel .admin-category-chart ul { min-width:0; list-style:none; display:grid; gap:9px; } #dashboardPanel .admin-category-chart li { display:flex; align-items:center; gap:7px; color:#626d7c; font-size:.55rem; } #dashboardPanel .admin-category-chart li i { width:8px; height:8px; flex:0 0 8px; border-radius:50%; } #dashboardPanel .admin-category-chart li span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #dashboardPanel .admin-category-chart li b { margin-left:auto; color:#293344; font-size:.53rem; } #dashboardPanel .admin-activity-list { min-height:285px; padding:7px 15px; } #dashboardPanel .admin-activity-item { padding:10px 0; display:grid; grid-template-columns:30px minmax(0,1fr) auto; gap:8px; align-items:start; border-bottom:1px solid #edf0f4; } #dashboardPanel .admin-activity-item:last-child { border-bottom:0; } #dashboardPanel .admin-activity-item > span { width:29px; height:29px; display:grid; place-items:center; border-radius:50%; color:#fff; background:#c60010; font-size:.68rem; } #dashboardPanel .admin-activity-item strong { display:block; color:#2a3342; font-size:.59rem; line-height:1.4; } #dashboardPanel .admin-activity-item p { margin:2px 0 0; color:#7b8491; font-size:.52rem; line-height:1.45; } #dashboardPanel .admin-activity-item time { color:#858e9b; font-size:.49rem; white-space:nowrap; } #dashboardPanel .admin-latest-card { margin-top:13px; } #dashboardPanel .admin-latest-card .news-table-container { margin:0; border:0; border-radius:0; } #dashboardPanel .admin-latest-card table { min-width:850px; } #dashboardPanel .admin-latest-card th,#dashboardPanel .admin-latest-card td { padding:9px 10px; font-size:.6rem; } #dashboardPanel .admin-latest-card td img { width:50px; height:34px; object-fit:cover; border-radius:3px; } #dashboardPanel .admin-state { padding:3px 7px; display:inline-block; border-radius:10px; color:#187b3b; background:#e7f8ec; font-size:.52rem; white-space:nowrap; } #dashboardPanel .admin-state.draft { color:#647085; background:#edf0f4; } #dashboardPanel .admin-state.scheduled { color:#b56a00; background:#fff1d8; } #dashboardPanel .admin-add-post { padding:7px 12px!important; border-radius:4px!important; color:#fff!important; background:#c80011!important; } #dashboardPanel .admin-see-all { width:100%; min-height:39px; border:0; border-top:1px solid #edf0f4; color:#c40010; background:#fff; font-size:.58rem; cursor:pointer; } /* News manager */ #dashboardPanel .admin-news-stats { margin-bottom:13px; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; } #dashboardPanel .admin-news-stats article { min-height:88px; padding:13px 14px; display:flex; align-items:center; gap:11px; border:1px solid var(--admin-line); border-radius:8px; background:#fff; box-shadow:0 4px 14px rgba(24,38,58,.035); } #dashboardPanel .admin-news-stats article > span { width:42px; height:42px; flex:0 0 42px; display:grid; place-items:center; border-radius:10px; font-size:1rem; } #dashboardPanel .admin-news-stats .red { color:#d50014; background:#ffe7e9; } #dashboardPanel .admin-news-stats .green { color:#178c42; background:#e5f7e9; } #dashboardPanel .admin-news-stats .orange { color:#e58500; background:#fff0d2; } #dashboardPanel .admin-news-stats .blue { color:#1769d7; background:#e4efff; } #dashboardPanel .admin-news-stats .purple { color:#7d42d2; background:#eee4ff; } #dashboardPanel .admin-news-stats small { display:block; color:#5c6675; font-size:.59rem; white-space:nowrap; } #dashboardPanel .admin-news-stats strong { display:block; margin:3px 0; color:#1a2332; font-size:1.2rem; } #dashboardPanel .admin-news-stats em { display:block; color:#7a8492; font-size:.52rem; font-style:normal; } #dashboardPanel #newsListView.admin-card { padding:0; overflow:hidden; border-radius:8px; } #dashboardPanel .admin-news-card-heading { min-height:69px; padding:14px 16px; display:flex; align-items:center; justify-content:space-between; gap:12px; border-bottom:1px solid #edf0f4; } #dashboardPanel .admin-news-card-heading h3 { color:#1d2635; font-size:.82rem; } #dashboardPanel .admin-news-card-heading h3 i { color:#c80011; } #dashboardPanel .admin-news-card-heading p { margin:4px 0 0; color:#7a8492; font-size:.55rem; } #dashboardPanel .admin-news-actions { display:flex; gap:8px; flex-wrap:wrap; } #dashboardPanel .admin-news-actions .btn { min-height:38px; border-radius:4px; font-size:.59rem; } #dashboardPanel .admin-news-filters { padding:14px 16px; display:grid; grid-template-columns:minmax(280px,1.45fr) minmax(190px,.7fr) minmax(190px,.7fr) 96px; gap:11px; align-items:end; border-bottom:1px solid #e7ebf0; background:#fbfcfd; } #dashboardPanel .admin-news-filters label { display:grid; gap:5px; color:#586273; font-size:.54rem; } #dashboardPanel .admin-news-filters input,#dashboardPanel .admin-news-filters select { height:38px; padding:0 11px; border:1px solid #dfe4eb; border-radius:5px; outline:0; color:#394456; background:#fff; font-size:.61rem; } #dashboardPanel .admin-filter-search { height:38px; padding:0 11px; display:flex!important; grid-template-columns:auto 1fr; align-items:center; gap:8px!important; border:1px solid #dfe4eb; border-radius:5px; background:#fff; } #dashboardPanel .admin-filter-search input { height:auto; padding:0; border:0; background:transparent; } #dashboardPanel .admin-filter-search i { color:#7a8492; } #dashboardPanel .admin-filter-reset { height:38px; padding:0 13px; border:1px solid #efb7bc; border-radius:5px; color:#c60010; background:#fff; font-size:.59rem; cursor:pointer; } #dashboardPanel #newsListView .news-table-container { margin:0; overflow:auto; border:0; border-radius:0; box-shadow:none; } #dashboardPanel #newsListView table { width:100%; min-width:1080px; table-layout:fixed; border-collapse:separate; border-spacing:0; } #dashboardPanel #newsListView th { position:sticky; top:0; z-index:2; padding:11px 12px; color:#536074; border-bottom:1px solid #dfe5ec; background:#f7f9fb; font-size:.57rem; line-height:1.25; letter-spacing:.035em; text-transform:uppercase; white-space:nowrap; } #dashboardPanel #newsListView td { height:68px; padding:10px 12px; color:#273246; border-bottom:1px solid #edf0f4; background:#fff; font-size:.61rem; line-height:1.45; vertical-align:middle; } #dashboardPanel #newsListView tbody tr:last-child td { border-bottom:0; } #dashboardPanel #newsListView tbody tr:hover td { background:#fffafa; } #dashboardPanel #newsListView th:nth-child(1),#dashboardPanel #newsListView td:nth-child(1) { width:82px; text-align:center; } #dashboardPanel #newsListView th:nth-child(2),#dashboardPanel #newsListView td:nth-child(2) { width:auto; font-weight:650; } #dashboardPanel #newsListView th:nth-child(3),#dashboardPanel #newsListView td:nth-child(3) { width:190px; } #dashboardPanel #newsListView th:nth-child(4),#dashboardPanel #newsListView td:nth-child(4) { width:126px; white-space:nowrap; } #dashboardPanel #newsListView th:nth-child(5),#dashboardPanel #newsListView td:nth-child(5) { width:145px; white-space:nowrap; } #dashboardPanel #newsListView th:nth-child(6),#dashboardPanel #newsListView td:nth-child(6) { width:88px; white-space:nowrap; } #dashboardPanel #newsListView th:nth-child(7),#dashboardPanel #newsListView td:nth-child(7) { width:102px; text-align:center; white-space:nowrap; } #dashboardPanel #newsListView td:nth-child(1) img { width:62px!important; height:42px!important; display:block; margin:auto; border:1px solid #e4e8ee; border-radius:3px!important; object-fit:cover; } #dashboardPanel #newsListView td:nth-child(2) { overflow-wrap:anywhere; } #dashboardPanel #newsListView .badge-cat { max-width:174px; padding:5px 8px; border-radius:5px; font-size:.55rem; font-weight:700; line-height:1.35; letter-spacing:0; text-transform:none; white-space:normal; } #dashboardPanel #newsListView td:nth-child(4) span { display:inline-flex!important; align-items:center; gap:4px; max-width:100%; padding:4px 7px!important; border-radius:5px!important; line-height:1.25; white-space:nowrap; } #dashboardPanel #newsListView td:nth-child(2) > span { display:inline-flex!important; align-items:center; gap:4px; margin:4px 0 0 7px!important; padding:3px 7px!important; border-radius:4px!important; font-size:.54rem!important; line-height:1.25; white-space:nowrap; vertical-align:middle; } #dashboardPanel .action-btn { width:30px; height:30px; border-radius:5px; margin:0 2px; } #dashboardPanel .admin-table-footer { min-height:42px; padding:10px 16px; display:flex; align-items:center; justify-content:space-between; gap:12px; color:#778294; border-top:1px solid #edf0f4; background:#fbfcfd; font-size:.54rem; } #dashboardPanel .admin-table-footer > span:first-child { color:#394558; font-weight:700; } #dashboardPanel .admin-table-footer i { margin-right:5px; color:#c40010; } /* Article editor */ #dashboardPanel.editing-news .main-header, #dashboardPanel.editing-news .admin-news-stats { display:none; } #dashboardPanel.editing-news #tabContent-news { padding-top:14px; } #dashboardPanel #newsEditorView { padding:0; overflow:visible; border:0; border-radius:9px; background:transparent; box-shadow:none; } #dashboardPanel #newsEditorView .editor-header { min-height:72px; margin:0 0 14px; padding:13px 16px; position:sticky; top:76px; z-index:20; display:flex; align-items:center; justify-content:space-between; gap:15px; border:1px solid var(--admin-line); border-radius:8px; background:rgba(255,255,255,.96); box-shadow:0 8px 24px rgba(26,38,55,.07); backdrop-filter:blur(9px); } #dashboardPanel #newsEditorView .editor-heading { min-width:0; display:flex; align-items:center; gap:11px; } #dashboardPanel #newsEditorView .editor-heading > span { width:36px; height:36px; flex:0 0 36px; display:grid; place-items:center; border-radius:7px; color:#fff; background:linear-gradient(135deg,#da0014,#a8000c); box-shadow:0 6px 14px rgba(196,0,16,.18); } #dashboardPanel #newsEditorView .editor-heading small { display:block; margin-bottom:1px; color:#8a94a2; font-size:.5rem; font-weight:650; } #dashboardPanel #newsEditorView .editor-heading h3 { overflow:hidden; color:#172134; font-size:.92rem; line-height:1.35; text-overflow:ellipsis; white-space:nowrap; } #dashboardPanel #newsEditorView .editor-header-actions { display:flex; align-items:center; justify-content:flex-end; gap:8px; } #dashboardPanel #newsEditorView .editor-header-actions .btn { width:auto; min-height:37px; margin:0; padding:7px 12px!important; border-radius:5px; box-shadow:none; font-size:.57rem; white-space:nowrap; } #dashboardPanel #newsEditorView .admin-editor-form { padding-bottom:84px; display:grid; grid-template-columns:minmax(0,1fr) 340px; grid-template-areas:"alert alert" "title meta" "summary meta" "content thumb" "content audio" "seo seo" "draft draft" "actions actions"; gap:14px; align-items:start; } #dashboardPanel #newsEditorView #contribInfoAlert { grid-area:alert; margin:0!important; } #dashboardPanel #newsEditorView .editor-title-field { grid-area:title; } #dashboardPanel #newsEditorView .editor-summary-field { grid-area:summary; } #dashboardPanel #newsEditorView .editor-meta-card { grid-area:meta; } #dashboardPanel #newsEditorView .editor-thumbnail-card { grid-area:thumb; } #dashboardPanel #newsEditorView .editor-audio-card { grid-area:audio; } #dashboardPanel #newsEditorView .editor-seo-card { grid-area:seo; } #dashboardPanel #newsEditorView .editor-content-card { grid-area:content; } #dashboardPanel #newsEditorView .editor-draft-alert { grid-area:draft; } #dashboardPanel #newsEditorView .editor-action-bar { grid-area:actions; } #dashboardPanel #newsEditorView .editor-title-field, #dashboardPanel #newsEditorView .editor-summary-field, #dashboardPanel #newsEditorView .editor-content-card, #dashboardPanel #newsEditorView .editor-meta-card, #dashboardPanel #newsEditorView .editor-thumbnail-card, #dashboardPanel #newsEditorView .editor-seo-card { margin:0!important; padding:16px; border:1px solid var(--admin-line); border-radius:8px; background:#fff; box-shadow:0 4px 15px rgba(24,38,58,.035); } #dashboardPanel #newsEditorView .editor-title-field, #dashboardPanel #newsEditorView .editor-summary-field { padding:14px 16px; } #dashboardPanel #newsEditorView .form-group label { margin-bottom:7px; color:#445064; font-size:.59rem; line-height:1.45; letter-spacing:.025em; } #dashboardPanel #newsEditorView .form-control { min-height:40px; padding:9px 12px; border:1px solid #dce2ea; border-radius:5px; color:#182236; background:#fff; box-shadow:none; font-size:.67rem; line-height:1.5; } #dashboardPanel #newsEditorView textarea.form-control { min-height:78px; resize:vertical; } #dashboardPanel #newsEditorView .form-control:focus { border-color:#ce2a37; box-shadow:0 0 0 3px rgba(196,0,16,.07); } #dashboardPanel #newsEditorView .editor-meta-card { display:grid!important; grid-template-columns:1fr!important; gap:12px!important; } #dashboardPanel #newsEditorView .editor-meta-card::before { content:"THÔNG TIN ĐĂNG BÀI"; padding-bottom:9px; color:#bd0010; border-bottom:1px solid #edf0f4; font-family:"Be Vietnam Pro","Inter",sans-serif; font-size:.63rem; font-weight:800; } #dashboardPanel #newsEditorView .editor-meta-card .form-group { margin:0; } #dashboardPanel #newsEditorView .editor-meta-card .form-group:last-child { min-height:42px; padding:9px 11px!important; align-items:center!important; border:1px solid #edf0f4; border-radius:5px; background:#fafbfc; } #dashboardPanel #newsEditorView .editor-meta-card .form-group:last-child label { width:100%; margin:0; text-transform:none; } #dashboardPanel #newsEditorView .editor-thumbnail-card::before { content:"ẢNH ĐẠI DIỆN"; display:block; margin-bottom:11px; padding-bottom:9px; color:#bd0010; border-bottom:1px solid #edf0f4; font-family:"Be Vietnam Pro","Inter",sans-serif; font-size:.63rem; font-weight:800; } #dashboardPanel #newsEditorView .editor-thumbnail-card > label { display:none; } #dashboardPanel #newsEditorView .upload-box { min-height:105px; margin:0 0 10px; padding:18px 12px; display:grid; place-items:center; align-content:center; gap:3px; border:1.5px dashed #cbd4df; border-radius:6px; background:#f8fafc; } #dashboardPanel #newsEditorView .upload-box .upload-icon { margin:0; font-size:1.25rem; } #dashboardPanel #newsEditorView .upload-box p { margin:0; color:#4e5a6c; font-size:.57rem!important; line-height:1.45; } #dashboardPanel #newsEditorView #newsImgLink { font-size:.55rem; } #dashboardPanel #newsEditorView .preview-thumbnail { width:100%; height:auto; max-height:190px; margin-top:10px; object-fit:cover; border:1px solid #e1e6ec; border-radius:5px; box-shadow:none; } #dashboardPanel #newsEditorView .editor-thumbnail-card .btn { max-width:100%; overflow:hidden; font-size:.54rem!important; text-overflow:ellipsis; white-space:nowrap; } #dashboardPanel #newsEditorView .editor-content-card { min-width:0; } #dashboardPanel #newsEditorView .editor-content-card > label { padding-bottom:10px; color:#192235; border-bottom:1px solid #edf0f4; font-size:.65rem; } #dashboardPanel #newsEditorView .editor-content-card > div:nth-of-type(1) { gap:6px!important; } #dashboardPanel #newsEditorView .editor-content-card .btn, #dashboardPanel #newsEditorView #editorialTemplateSelect { min-height:33px; margin:0; padding:6px 9px!important; border-radius:4px!important; font-size:.53rem!important; } #dashboardPanel #newsEditorView .editor-fullscreen-button { color:#fff!important; border-color:#b7000e!important; background:#c50012!important; } #dashboardPanel #newsEditorView #quillEditorContainer { height:530px!important; border-radius:5px!important; } #dashboardPanel #newsEditorView .ql-toolbar.ql-snow { position:sticky; top:148px; z-index:8; border-color:#dce2ea; background:#fafbfc; } #dashboardPanel #newsEditorView .ql-container.ql-snow { border-color:#dce2ea; } #dashboardPanel #newsEditorView .ql-editor { padding:20px 25px; font-size:.88rem!important; line-height:1.65!important; } #dashboardPanel #newsEditorView #editorStats { padding:9px 2px 0; flex-wrap:wrap; gap:13px!important; font-size:.58rem!important; } body.editor-fullscreen-active { overflow:hidden!important; } body.editor-fullscreen-active #dashboardPanel > main { overflow:hidden; } #dashboardPanel #newsEditorView .editor-content-card.is-fullscreen { width:auto; height:auto; padding:14px!important; position:fixed; inset:0; z-index:3000; display:flex; flex-direction:column; border:0; border-radius:0; background:#f5f7fa; box-shadow:none; } #dashboardPanel #newsEditorView .editor-content-card.is-fullscreen > label { margin:0!important; padding:0 0 11px; flex:0 0 auto; color:#182236; font-size:.72rem; } #dashboardPanel #newsEditorView .editor-content-card.is-fullscreen > div:nth-of-type(1) { margin-bottom:9px!important; flex:0 0 auto; } #dashboardPanel #newsEditorView .editor-content-card.is-fullscreen .ql-toolbar.ql-snow { position:static; top:auto; flex:0 0 auto; border-radius:6px 6px 0 0; background:#fff; } #dashboardPanel #newsEditorView .editor-content-card.is-fullscreen #quillEditorContainer { height:auto!important; min-height:0; flex:1 1 auto; display:flex; flex-direction:column; border-radius:0 0 6px 6px!important; background:#fff!important; } #dashboardPanel #newsEditorView .editor-content-card.is-fullscreen .ql-container.ql-snow { min-height:0; flex:1 1 auto; overflow:hidden; } #dashboardPanel #newsEditorView .editor-content-card.is-fullscreen .ql-editor { max-width:1100px; width:100%; margin:0 auto; padding:30px 42px; overflow-y:auto; background:#fff; font-size:.92rem!important; line-height:1.68!important; box-shadow:0 0 0 1px #edf0f4; } #dashboardPanel #newsEditorView .editor-content-card.is-fullscreen #editorStats { min-height:34px; padding:8px 4px 0; flex:0 0 auto; } #dashboardPanel #newsEditorView .editor-seo-card { padding:16px!important; } #dashboardPanel #newsEditorView .editor-seo-card .board-dept-title { margin:0 0 13px!important; padding:0 0 10px 0; color:#bd0010; border:0; border-bottom:1px solid #edf0f4; font-size:.7rem!important; } #dashboardPanel #newsEditorView .editor-seo-card .form-group { margin-bottom:0; } #dashboardPanel #newsEditorView .editor-audio-card { margin:0!important; box-shadow:none; } #dashboardPanel #newsEditorView .editor-action-bar { min-height:68px; margin:0!important; padding:10px 22px; position:fixed; left:272px; right:22px; bottom:0; z-index:70; align-items:center; border:1px solid var(--admin-line); border-radius:9px 9px 0 0; background:rgba(255,255,255,.97); box-shadow:0 -10px 28px rgba(26,38,55,.12); backdrop-filter:blur(10px); } #dashboardPanel #newsEditorView .editor-action-bar .btn { min-height:39px; margin:0; border-radius:5px; font-size:.6rem; } #dashboardPanel.sidebar-collapsed #newsEditorView .editor-action-bar { left:94px; } .admin-mobile-overlay { display:none; } @media (min-width: 1280px) { #dashboardPanel .admin-brand { display:block; } #dashboardPanel .admin-topbar { grid-template-columns:minmax(300px,1fr) minmax(260px,420px) auto; } } @media (min-width: 1600px) { #dashboardPanel .admin-dashboard-stats { grid-template-columns:repeat(6,minmax(0,1fr)); } } @media (max-width: 1500px) { #dashboardPanel .admin-dashboard-grid { grid-template-columns:minmax(0,1.45fr) minmax(300px,.9fr); } #dashboardPanel .admin-activity-card { grid-column:1 / -1; } #dashboardPanel .admin-activity-list { min-height:0; display:grid; grid-template-columns:1fr 1fr; gap:0 20px; } } @media (max-width: 1180px) { #dashboardPanel .admin-dashboard-grid { grid-template-columns:1fr 1fr; } #dashboardPanel .admin-activity-card { grid-column:1 / -1; } #dashboardPanel .admin-activity-list { min-height:0; display:grid; grid-template-columns:1fr 1fr; gap:0 18px; } #dashboardPanel .admin-news-stats { grid-template-columns:repeat(3,1fr); } #dashboardPanel .admin-news-filters { grid-template-columns:minmax(250px,1.2fr) minmax(170px,.8fr) minmax(170px,.8fr) 92px; } } @media (max-width: 992px) { #dashboardPanel.dashboard { grid-template-columns:1fr; } #dashboardPanel > aside { width:260px; display:flex; position:fixed; left:-280px; top:0; z-index:1002; transition:left .25s ease; } #dashboardPanel.sidebar-collapsed.dashboard { grid-template-columns:1fr; } #dashboardPanel.sidebar-collapsed > aside { width:260px; overflow-y:auto; overflow-x:hidden; } #dashboardPanel > aside.open { left:0; } #dashboardPanel .admin-sidebar-collapse { display:none; } #dashboardPanel.sidebar-collapsed .aside-title, #dashboardPanel.sidebar-collapsed .aside-menu .admin-menu-label, #dashboardPanel.sidebar-collapsed .aside-menu li a span, #dashboardPanel.sidebar-collapsed .aside-footer span, #dashboardPanel.sidebar-collapsed .aside-footer .btn-gray { display:initial; } #dashboardPanel.sidebar-collapsed .aside-header { padding:13px 18px; justify-content:flex-start; } #dashboardPanel.sidebar-collapsed .aside-menu { padding:9px 9px 12px; } #dashboardPanel.sidebar-collapsed .aside-menu li { margin:2px 0; } #dashboardPanel.sidebar-collapsed .aside-menu li a { min-height:40px; padding:9px 11px; justify-content:flex-start; } #dashboardPanel.sidebar-collapsed .aside-menu li a i { width:19px; font-size:.82rem; } #dashboardPanel.sidebar-collapsed .aside-footer { padding:12px; } #dashboardPanel.sidebar-collapsed .admin-view-site { min-height:50px; padding:10px 11px; justify-content:flex-start; } #dashboardPanel .admin-sidebar-close { display:block; } #dashboardPanel .admin-mobile-overlay { display:block; position:fixed; inset:0; z-index:1001; visibility:hidden; opacity:0; background:rgba(15,23,42,.45); transition:.25s ease; } #dashboardPanel .admin-mobile-overlay.open { visibility:visible; opacity:1; } #dashboardPanel .admin-menu-toggle { display:grid; place-items:center; } #dashboardPanel .admin-topbar { grid-template-columns:auto minmax(150px,1fr) auto auto; } #dashboardPanel .admin-brand { display:block; } #dashboardPanel .admin-brand img { width:245px; max-width:100%; } } @media (max-width: 767px) { #dashboardPanel > main { padding:0 10px 22px; } #dashboardPanel .admin-topbar { min-height:58px; margin:0 -10px; padding:7px 10px; grid-template-columns:38px minmax(0,1fr) 36px; gap:7px; } #dashboardPanel .admin-brand { display:block; text-align:center; } #dashboardPanel .admin-brand img { width:175px; height:40px; } #dashboardPanel .admin-global-search,#dashboardPanel .admin-top-account { display:none; } #dashboardPanel .main-header { min-height:73px; align-items:flex-start; gap:8px; } #dashboardPanel .main-title { font-size:1.18rem; } #dashboardPanel .admin-breadcrumb { font-size:.54rem; } #dashboardPanel .admin-role-pill { padding:6px 9px; font-size:.52rem; } #dashboardPanel .admin-dashboard-stats { grid-template-columns:1fr 1fr; gap:8px; } #dashboardPanel .admin-stat-card { min-height:91px; padding:12px 10px; gap:8px; } #dashboardPanel .admin-stat-card > span { width:34px; height:34px; flex-basis:34px; font-size:.78rem; } #dashboardPanel .admin-stat-card small { font-size:.53rem; } #dashboardPanel .admin-stat-card strong { font-size:1.05rem; } #dashboardPanel .admin-stat-card em { font-size:.46rem; } #dashboardPanel .admin-dashboard-grid { grid-template-columns:1fr; gap:9px; } #dashboardPanel .admin-activity-card { grid-column:auto; } #dashboardPanel .admin-activity-list { display:block; } #dashboardPanel .admin-chart-wrap { height:230px; padding:8px; overflow:hidden; } #dashboardPanel .admin-category-chart { min-height:220px; gap:14px; } #dashboardPanel .admin-donut { width:118px; height:118px; flex-basis:118px; } #dashboardPanel .admin-donut::before { width:72px; height:72px; } #dashboardPanel .admin-category-chart ul { max-width:150px; } #dashboardPanel .admin-news-stats { grid-template-columns:1fr 1fr; gap:8px; } #dashboardPanel .admin-news-stats article { min-height:80px; padding:10px; } #dashboardPanel .admin-news-stats article > span { width:34px; height:34px; flex-basis:34px; font-size:.8rem; } #dashboardPanel .admin-news-card-heading { align-items:flex-start; flex-direction:column; } #dashboardPanel .admin-news-actions { width:100%; } #dashboardPanel .admin-news-actions .btn { flex:1; padding:7px!important; font-size:.52rem; } #dashboardPanel .admin-news-filters { padding:10px; grid-template-columns:1fr 1fr; gap:8px; } #dashboardPanel .admin-filter-search { grid-column:1 / -1; } #dashboardPanel .admin-filter-reset { width:100%; } #dashboardPanel #newsListView .news-table-container { -webkit-overflow-scrolling:touch; scrollbar-width:thin; } #dashboardPanel #newsListView table { min-width:980px; } #dashboardPanel .admin-table-footer { align-items:flex-start; flex-direction:column; gap:3px; } #dashboardPanel #newsEditorView .editor-header { top:58px; padding:10px; align-items:flex-start; flex-direction:column; } #dashboardPanel #newsEditorView .editor-heading h3 { max-width:calc(100vw - 95px); font-size:.78rem; } #dashboardPanel #newsEditorView .editor-header-actions { width:100%; display:grid; grid-template-columns:1fr 1fr 1fr; gap:6px; } #dashboardPanel #newsEditorView .editor-header-actions .btn { min-width:0; padding:7px 5px!important; overflow:hidden; text-overflow:ellipsis; } #dashboardPanel #newsEditorView .admin-editor-form { grid-template-columns:1fr; grid-template-areas:"alert" "title" "summary" "meta" "thumb" "content" "audio" "seo" "draft" "actions"; gap:9px; } #dashboardPanel #newsEditorView .editor-title-field, #dashboardPanel #newsEditorView .editor-summary-field, #dashboardPanel #newsEditorView .editor-content-card, #dashboardPanel #newsEditorView .editor-meta-card, #dashboardPanel #newsEditorView .editor-thumbnail-card, #dashboardPanel #newsEditorView .editor-seo-card { padding:12px!important; } #dashboardPanel #newsEditorView .editor-seo-card > div[style*="grid-template-columns"] { grid-template-columns:1fr!important; gap:10px!important; } #dashboardPanel #newsEditorView #quillEditorContainer { height:460px!important; } #dashboardPanel #newsEditorView .ql-toolbar.ql-snow { top:174px; } #dashboardPanel #newsEditorView .ql-editor { padding:16px; font-size:.9rem!important; } #dashboardPanel #newsEditorView .editor-content-card.is-fullscreen { padding:8px!important; } #dashboardPanel #newsEditorView .editor-content-card.is-fullscreen > label { font-size:.62rem; } #dashboardPanel #newsEditorView .editor-content-card.is-fullscreen > div:nth-of-type(1) { max-height:78px; overflow:auto; } #dashboardPanel #newsEditorView .editor-content-card.is-fullscreen .ql-editor { padding:18px 14px; font-size:.84rem!important; line-height:1.62!important; } #dashboardPanel #newsEditorView #editorStats { align-items:flex-start!important; flex-direction:column; gap:5px!important; } #dashboardPanel #newsEditorView #autoSaveIndicator { margin-left:0!important; } #dashboardPanel #newsEditorView .editor-action-bar { padding:9px; display:grid!important; grid-template-columns:1fr 1fr; gap:7px!important; } #dashboardPanel #newsEditorView .editor-action-bar, #dashboardPanel.sidebar-collapsed #newsEditorView .editor-action-bar { left:10px; right:10px; bottom:0; } #dashboardPanel #newsEditorView .editor-action-bar .btn { width:100%!important; padding:8px!important; } #dashboardPanel #newsEditorView .editor-action-bar .btn:last-child { grid-column:1 / -1; } #dashboardPanel .admin-card { padding:14px; } #dashboardPanel .admin-latest-card { overflow:hidden; } } @media (max-width: 420px) { #dashboardPanel .admin-news-stats { grid-template-columns:1fr; } #dashboardPanel .admin-news-filters { grid-template-columns:1fr; } #dashboardPanel .admin-filter-search { grid-column:auto; } #dashboardPanel .admin-role-pill { display:none; } #dashboardPanel .admin-category-chart { flex-direction:column; } } /* ================================================================ PREMIUM WORKSPACES Chỉ áp dụng cho: bài cộng tác, văn bản, lịch, ban điều hành, cấu hình ================================================================ */ #dashboardPanel .admin-workspace { --workspace-accent:#c70015; --workspace-soft:#fff1f3; --workspace-ink:#172033; --workspace-muted:#667085; --workspace-line:#e7eaf0; padding-bottom:30px; animation:adminWorkspaceIn .28s ease both; } #dashboardPanel .admin-workspace-documents { --workspace-accent:#6d41d8; --workspace-soft:#f4f0ff; } #dashboardPanel .admin-workspace-calendar { --workspace-accent:#1673d1; --workspace-soft:#ecf5ff; } #dashboardPanel .admin-workspace-board { --workspace-accent:#16875a; --workspace-soft:#ebf8f2; } #dashboardPanel .admin-workspace-config { --workspace-accent:#d56a00; --workspace-soft:#fff5e8; } @keyframes adminWorkspaceIn { from { opacity:0; transform:translateY(7px); } to { opacity:1; transform:none; } } #dashboardPanel .admin-workspace .workspace-card { padding:0!important; overflow:hidden; border:1px solid rgba(214,219,228,.95); border-radius:16px; background:#fff; box-shadow:0 16px 42px rgba(28,39,59,.07),0 2px 8px rgba(28,39,59,.025); } #dashboardPanel .admin-workspace .workspace-toolbar { min-height:94px; margin:0!important; padding:20px 22px!important; position:relative; overflow:hidden; gap:20px; border-bottom:1px solid var(--workspace-line); background: radial-gradient(circle at 92% -40%, color-mix(in srgb,var(--workspace-accent) 13%,transparent) 0 34%,transparent 35%), linear-gradient(135deg,#fff 0%,#fff 62%,var(--workspace-soft) 100%); } #dashboardPanel .admin-workspace .workspace-toolbar::after { content:""; width:3px; position:absolute; inset:18px auto 18px 0; border-radius:0 4px 4px 0; background:var(--workspace-accent); } #dashboardPanel .admin-workspace .workspace-heading { min-width:0; display:flex; align-items:center; gap:13px; } #dashboardPanel .admin-workspace .workspace-heading-icon { width:46px; height:46px; flex:0 0 46px; display:grid; place-items:center; border:1px solid color-mix(in srgb,var(--workspace-accent) 16%,transparent); border-radius:13px; color:var(--workspace-accent); background:var(--workspace-soft); box-shadow:inset 0 1px 0 rgba(255,255,255,.8); font-size:1.08rem; } #dashboardPanel .admin-workspace .workspace-heading h3 { margin:0!important; color:var(--workspace-ink); font-size:.91rem!important; font-weight:800; line-height:1.35; letter-spacing:-.015em; } #dashboardPanel .admin-workspace .workspace-heading p { margin:5px 0 0; color:var(--workspace-muted); font-size:.62rem; font-weight:450; line-height:1.5; } #dashboardPanel .admin-workspace .workspace-toolbar > .btn, #dashboardPanel .admin-workspace .workspace-editor-header .btn, #dashboardPanel .admin-workspace .workspace-form-actions .btn { width:auto!important; min-height:42px; margin:0!important; padding:9px 15px!important; display:inline-flex; align-items:center; justify-content:center; gap:7px; border-radius:9px; box-shadow:none; font-size:.65rem; font-weight:750; line-height:1.2; white-space:nowrap; transition:transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease; } #dashboardPanel .admin-workspace .workspace-toolbar > .btn:hover, #dashboardPanel .admin-workspace .workspace-editor-header .btn:hover, #dashboardPanel .admin-workspace .workspace-form-actions .btn:hover { transform:translateY(-1px); } #dashboardPanel .admin-workspace .btn-red { border:1px solid var(--workspace-accent)!important; color:#fff!important; background:linear-gradient(135deg,color-mix(in srgb,var(--workspace-accent) 92%,#fff),var(--workspace-accent))!important; box-shadow:0 7px 17px color-mix(in srgb,var(--workspace-accent) 20%,transparent)!important; } #dashboardPanel .admin-workspace .btn-gray { border:1px solid #dfe3ea!important; color:#3f4a5e!important; background:#fff!important; } #dashboardPanel .admin-workspace .btn-gray:hover { border-color:#cdd3dd!important; background:#f8f9fb!important; } /* Bảng dữ liệu */ #dashboardPanel .admin-workspace .news-table-container, #dashboardPanel .admin-workspace .workspace-table-wrap { margin:0; overflow:auto!important; border:0; border-radius:0; box-shadow:none; scrollbar-width:thin; scrollbar-color:#c8ced8 transparent; } #dashboardPanel .admin-workspace table { width:100%!important; min-width:920px; table-layout:auto!important; border-collapse:separate!important; border-spacing:0!important; text-align:left; } #dashboardPanel .admin-workspace thead th, #dashboardPanel .admin-workspace thead tr th { height:46px; padding:11px 14px!important; position:sticky; top:0; z-index:2; color:#697386; border:0!important; border-bottom:1px solid #dfe4eb!important; background:#f7f8fa!important; font-size:.56rem!important; font-weight:750!important; line-height:1.35; letter-spacing:.045em; text-transform:uppercase; white-space:nowrap; } #dashboardPanel .admin-workspace tbody td, #dashboardPanel .admin-workspace tbody tr td { min-height:64px; padding:12px 14px!important; color:#344054; border:0!important; border-bottom:1px solid #edf0f4!important; background:#fff; font-size:.62rem; line-height:1.5; vertical-align:middle; } #dashboardPanel .admin-workspace tbody tr:last-child td { border-bottom:0!important; } #dashboardPanel .admin-workspace tbody tr { transition:background .16s ease,box-shadow .16s ease; } #dashboardPanel .admin-workspace tbody tr:hover td { background:#fcfcfd; } #dashboardPanel .admin-workspace tbody td[colspan] { height:180px; color:#8a94a3!important; background: radial-gradient(circle at center 44%,var(--workspace-soft) 0 38px,transparent 39px), #fff!important; font-size:.66rem!important; font-weight:600; } #dashboardPanel .admin-workspace .badge-cat { max-width:190px; padding:5px 9px; display:inline-flex; align-items:center; border:1px solid color-mix(in srgb,var(--workspace-accent) 12%,transparent); border-radius:999px; color:var(--workspace-accent); background:var(--workspace-soft); font-size:.55rem; font-weight:750; line-height:1.35; text-transform:none; white-space:normal; } #dashboardPanel .admin-workspace .action-btn { width:auto; min-width:32px; height:32px; margin:2px; padding:0 9px; display:inline-flex; align-items:center; justify-content:center; gap:5px; border:1px solid transparent; border-radius:8px; box-shadow:none; font-size:.57rem; font-weight:750; transition:.18s ease; } #dashboardPanel .admin-workspace .action-btn:hover { transform:translateY(-1px); box-shadow:0 5px 11px rgba(31,41,55,.1); } #dashboardPanel .admin-workspace .action-edit { color:#136f45; border-color:#bde6d2; background:#edf9f3; } #dashboardPanel .admin-workspace .action-delete { color:#c62435; border-color:#f2c3c9; background:#fff1f3; } #dashboardPanel .admin-workspace-contributors .action-edit[style] { color:#fff!important; border-color:#12875a!important; background:#12875a!important; } #dashboardPanel .admin-workspace a[href^="mailto:"] { color:#ad0010!important; text-decoration:none!important; font-weight:650; } #dashboardPanel .admin-workspace a[target="_blank"] { padding:5px 9px; display:inline-flex; align-items:center; gap:5px; border-radius:7px; color:#b70012!important; background:#fff1f3; text-decoration:none!important; font-weight:750!important; } /* Biểu mẫu văn bản, lịch và cấu hình */ #dashboardPanel .admin-workspace .workspace-editor-header { min-height:76px; margin:0!important; padding:17px 20px!important; border-bottom:1px solid var(--workspace-line)!important; background:linear-gradient(135deg,#fff,var(--workspace-soft)); } #dashboardPanel .admin-workspace .workspace-editor-header h3 { margin:0; display:flex; align-items:center; gap:9px; color:var(--workspace-ink); font-size:.85rem!important; } #dashboardPanel .admin-workspace .workspace-editor-header h3 i { color:var(--workspace-accent); } #dashboardPanel .admin-workspace .workspace-form { padding:22px; } #dashboardPanel .admin-workspace .workspace-form > div[style*="grid-template-columns"], #dashboardPanel .admin-workspace .config-grid { margin-bottom:16px!important; display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:16px!important; } #dashboardPanel .admin-workspace .config-grid { align-items:start; } #dashboardPanel .admin-workspace .workspace-form .form-group { min-width:0; margin-bottom:16px!important; } #dashboardPanel .admin-workspace .workspace-form .form-group label { margin:0 0 7px!important; display:flex!important; align-items:center; gap:6px; color:#344054; font-size:.61rem; font-weight:700!important; line-height:1.45; } #dashboardPanel .admin-workspace .workspace-form .form-control { width:100%; min-height:44px; padding:10px 12px; border:1px solid #dce1e8; border-radius:9px; outline:0; color:#1e293b; background:#fff; box-shadow:0 1px 2px rgba(16,24,40,.02); font-size:.66rem; line-height:1.5; transition:border-color .18s ease,box-shadow .18s ease,background .18s ease; } #dashboardPanel .admin-workspace .workspace-form textarea.form-control { min-height:110px; resize:vertical; } #dashboardPanel .admin-workspace .workspace-form .form-control:hover { border-color:#cbd2dc; } #dashboardPanel .admin-workspace .workspace-form .form-control:focus { border-color:var(--workspace-accent); box-shadow:0 0 0 4px color-mix(in srgb,var(--workspace-accent) 9%,transparent); } #dashboardPanel .admin-workspace .workspace-form small { margin-top:6px; display:block; color:#7c8798!important; font-size:.54rem; font-style:normal!important; line-height:1.5; } #dashboardPanel .admin-workspace .workspace-form .form-group > div[style*="display: flex"] { display:flex!important; align-items:center!important; gap:9px!important; } #dashboardPanel .admin-workspace .workspace-form .form-group > div[style*="display: flex"] .btn { width:auto!important; min-height:44px; margin:0; padding:9px 13px!important; border-radius:9px; box-shadow:none; font-size:.59rem!important; } #dashboardPanel .admin-workspace #docUploadProgress { padding:9px 11px; border:1px solid #f0d5a7; border-radius:8px; color:#a85d00!important; background:#fff8ea; } #dashboardPanel .admin-workspace .workspace-form-actions { margin:6px -22px -22px!important; padding:16px 22px!important; display:flex!important; align-items:center; justify-content:flex-end!important; gap:9px!important; border-top:1px solid var(--workspace-line)!important; background:#fafbfc; } #dashboardPanel .admin-workspace-config .workspace-toolbar-static { min-height:94px; } #dashboardPanel .admin-workspace-config .config-workspace-form > .form-group { margin:0 0 16px!important; padding:17px; border:1px solid #eceff3; border-radius:12px; background:#fcfcfd; } #dashboardPanel .admin-workspace-config .config-workspace-form > .form-group textarea { min-height:150px; background:#fff; } /* Ban điều hành */ #dashboardPanel .admin-workspace-board #boardEditsContainer { padding:18px 20px 2px; display:grid; gap:16px; } #dashboardPanel .admin-workspace-board .board-dept-edit { margin:0; padding:0; overflow:hidden; border:1px solid #e1e7e4; border-radius:13px; background:#fff; box-shadow:0 5px 16px rgba(22,93,65,.035); } #dashboardPanel .admin-workspace-board .board-dept-title { margin:0!important; padding:14px 16px; position:relative; color:#145c40; border:0; border-bottom:1px solid #dfeae5; background:linear-gradient(90deg,#edf8f3,#fbfdfc); font-size:.68rem!important; font-weight:800; line-height:1.45; } #dashboardPanel .admin-workspace-board .board-dept-title::before { content:""; width:4px; position:absolute; inset:12px auto 12px 0; border-radius:0 4px 4px 0; background:#16875a; } #dashboardPanel .admin-workspace-board [id^="deptMembersList"] { gap:0!important; } #dashboardPanel .admin-workspace-board .member-edit-row { padding:12px 14px; display:grid; grid-template-columns:minmax(190px,1.1fr) minmax(150px,.75fr) minmax(300px,1.45fr) 42px; gap:11px; align-items:center; border-bottom:1px solid #edf1ef; background:#fff; } #dashboardPanel .admin-workspace-board .member-edit-row:last-child { border-bottom:0; } #dashboardPanel .admin-workspace-board .member-edit-row:hover { background:#fbfdfc; } #dashboardPanel .admin-workspace-board .member-edit-row .form-control { min-height:39px; padding:8px 10px; border:1px solid #dce4e0; border-radius:8px; box-shadow:none; font-size:.61rem; } #dashboardPanel .admin-workspace-board .member-edit-row .form-control:focus { border-color:#16875a; box-shadow:0 0 0 3px rgba(22,135,90,.08); } #dashboardPanel .admin-workspace-board .member-edit-row > div:nth-child(3) { min-width:0; display:grid!important; grid-template-columns:42px minmax(0,1fr) auto; gap:8px!important; } #dashboardPanel .admin-workspace-board .avatar-preview-small { width:42px; height:42px; border:2px solid #fff; border-radius:11px; object-fit:cover; box-shadow:0 0 0 1px #d8e2dd,0 4px 9px rgba(25,73,54,.1); } #dashboardPanel .admin-workspace-board .member-edit-row .btn-gray { min-height:39px; margin:0; padding:7px 11px!important; border-radius:8px!important; font-size:.56rem!important; } #dashboardPanel .admin-workspace-board .board-dept-edit > div:last-child { margin:0!important; padding:12px 14px; border-top:1px solid #edf1ef; background:#fbfdfc; } #dashboardPanel .admin-workspace-board .board-dept-edit > div:last-child .btn { min-height:37px; margin:0; padding:7px 11px!important; border-color:#cce2d8!important; color:#166a48!important; border-radius:8px; background:#fff!important; box-shadow:none; font-size:.58rem!important; } #dashboardPanel .admin-workspace-board > .workspace-card > .workspace-form-actions { margin:18px 0 0!important; padding:16px 20px!important; } /* Thông báo nổi */ .toast-container { width:min(410px,calc(100vw - 28px))!important; max-width:none!important; top:18px!important; right:18px!important; display:grid; gap:10px!important; z-index:120000!important; } .toast { width:100%; min-height:76px; padding:13px 45px 13px 13px!important; position:relative; display:grid!important; grid-template-columns:40px minmax(0,1fr); align-items:center; gap:11px!important; overflow:hidden; border:1px solid #dfe4ea!important; border-left:0!important; border-radius:13px!important; color:#344054!important; background:rgba(255,255,255,.98)!important; box-shadow:0 18px 50px rgba(15,23,42,.17)!important; backdrop-filter:blur(16px); } .toast::before { content:""; width:4px; position:absolute; inset:0 auto 0 0; background:#657084; } .toast-success::before { background:#16875a; } .toast-error::before { background:#cf2638; } .toast-info::before { background:#1673d1; } .toast .toast-icon { width:40px; height:40px; display:grid; place-items:center; border-radius:11px; background:#f1f3f6; font-size:1rem; } .toast-success .toast-icon { color:#16875a!important; background:#eaf8f1; } .toast-error .toast-icon { color:#cf2638!important; background:#fff0f2; } .toast-info .toast-icon { color:#1673d1!important; background:#edf6ff; } .toast .toast-message { font-size:.72rem; font-weight:600; line-height:1.55; } .toast .toast-close { width:30px; height:30px; padding:0; position:absolute; top:9px; right:9px; display:grid; place-items:center; border:0; border-radius:8px; color:#778195; background:transparent; } .toast .toast-close:hover { color:#273246; background:#f2f4f7; } /* Hộp xác nhận tùy biến */ body.admin-modal-open { overflow:hidden!important; } .admin-confirm-modal { position:fixed; inset:0; z-index:130000; visibility:hidden; display:grid; place-items:center; padding:18px; opacity:0; transition:opacity .18s ease,visibility .18s ease; } .admin-confirm-modal.is-open { visibility:visible; opacity:1; } .admin-confirm-backdrop { position:absolute; inset:0; background:rgba(15,23,42,.58); backdrop-filter:blur(5px); } .admin-confirm-dialog { width:min(470px,100%); padding:24px; position:relative; display:grid; grid-template-columns:54px minmax(0,1fr); gap:15px; border:1px solid rgba(255,255,255,.65); border-radius:19px; background:#fff; box-shadow:0 28px 80px rgba(15,23,42,.3); transform:translateY(12px) scale(.98); transition:transform .2s ease; } .admin-confirm-modal.is-open .admin-confirm-dialog { transform:none; } .admin-confirm-symbol { width:54px; height:54px; display:grid; place-items:center; border-radius:15px; color:#c36b00; background:#fff4df; font-size:1.15rem; } .admin-confirm-modal.is-danger .admin-confirm-symbol { color:#c92335; background:#fff0f2; } .admin-confirm-copy { min-width:0; padding:1px 27px 0 0; } .admin-confirm-eyebrow { display:block; margin-bottom:4px; color:#9a641c; font-size:.59rem; font-weight:750; letter-spacing:.06em; text-transform:uppercase; } .admin-confirm-modal.is-danger .admin-confirm-eyebrow { color:#c92335; } .admin-confirm-copy h3 { margin:0; color:#192235; font-size:1rem; line-height:1.4; } .admin-confirm-copy p { margin:7px 0 0; color:#667085; font-size:.69rem; line-height:1.6; } .admin-confirm-x { width:32px; height:32px; position:absolute; top:14px; right:14px; display:grid; place-items:center; border:0; border-radius:9px; color:#778195; background:#f5f6f8; cursor:pointer; } .admin-confirm-actions { padding-top:5px; grid-column:1 / -1; display:flex; justify-content:flex-end; gap:9px; } .admin-confirm-actions .btn { width:auto!important; min-width:112px; min-height:42px; margin:0; padding:9px 14px!important; display:inline-flex; align-items:center; justify-content:center; gap:7px; border-radius:9px; box-shadow:none; font-size:.65rem; } .admin-confirm-actions .btn-red { color:#fff!important; border-color:#c40015!important; background:#c40015!important; } .admin-confirm-actions .btn-gray { color:#475467!important; border-color:#dfe3e9!important; background:#fff!important; } /* Màn hình đang xử lý */ #loadingOverlay.loading-overlay { background:rgba(15,23,42,.62); backdrop-filter:blur(6px); } #loadingOverlay .admin-loader-card { width:min(360px,calc(100vw - 36px)); max-width:360px; padding:24px 26px; display:grid; justify-items:center; border:1px solid rgba(255,255,255,.7); border-radius:17px; background:#fff; box-shadow:0 24px 65px rgba(15,23,42,.27); text-align:center; } #loadingOverlay .spinner { width:42px; height:42px; margin:0 0 14px; border:4px solid #f1d9dc; border-left-color:#c40015; } #loadingOverlay .admin-loader-kicker { margin-bottom:5px; color:#bd0013; font-size:.55rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase; } #loadingOverlay #loadingText { color:#273246; font-size:.72rem; line-height:1.5; } #loadingOverlay .admin-loader-progress { width:100%; height:4px; margin-top:17px; overflow:hidden; border-radius:4px; background:#eef0f4; } #loadingOverlay .admin-loader-progress span { width:42%; height:100%; display:block; border-radius:inherit; background:linear-gradient(90deg,#d70019,#ff6977); animation:adminLoaderSlide 1.15s ease-in-out infinite alternate; } @keyframes adminLoaderSlide { from { transform:translateX(-15%); } to { transform:translateX(155%); } } @media (max-width: 1100px) { #dashboardPanel .admin-workspace-board .member-edit-row { grid-template-columns:minmax(180px,1fr) minmax(140px,.7fr) minmax(260px,1.25fr) 40px; } } @media (max-width: 767px) { #dashboardPanel .admin-workspace { padding-bottom:18px; } #dashboardPanel .admin-workspace .workspace-card { border-radius:13px; } #dashboardPanel .admin-workspace .workspace-toolbar { min-height:0; padding:15px!important; align-items:stretch!important; flex-direction:column!important; gap:13px; } #dashboardPanel .admin-workspace .workspace-heading { align-items:flex-start; gap:10px; } #dashboardPanel .admin-workspace .workspace-heading-icon { width:40px; height:40px; flex-basis:40px; border-radius:11px; font-size:.92rem; } #dashboardPanel .admin-workspace .workspace-heading h3 { font-size:.76rem!important; } #dashboardPanel .admin-workspace .workspace-heading p { font-size:.56rem; } #dashboardPanel .admin-workspace .workspace-toolbar > .btn { width:100%!important; } #dashboardPanel .admin-workspace .workspace-editor-header { padding:14px!important; align-items:stretch!important; flex-direction:column!important; gap:11px; } #dashboardPanel .admin-workspace .workspace-editor-header .btn { width:100%!important; } #dashboardPanel .admin-workspace .workspace-form { padding:15px; } #dashboardPanel .admin-workspace .workspace-form > div[style*="grid-template-columns"], #dashboardPanel .admin-workspace .config-grid { grid-template-columns:1fr!important; gap:0!important; } #dashboardPanel .admin-workspace .workspace-form .form-group > div[style*="display: flex"] { align-items:stretch!important; flex-direction:column!important; } #dashboardPanel .admin-workspace .workspace-form .form-group > div[style*="display: flex"] .btn { width:100%!important; } #dashboardPanel .admin-workspace .workspace-form-actions { margin:4px -15px -15px!important; padding:12px 15px!important; display:grid!important; grid-template-columns:1fr 1fr; } #dashboardPanel .admin-workspace .workspace-form-actions .btn { width:100%!important; min-width:0; padding:8px!important; } #dashboardPanel .admin-workspace-config .config-workspace-form > .form-group { padding:14px; } /* Bảng chuyển thành thẻ trên điện thoại */ #dashboardPanel .admin-workspace .news-table-container, #dashboardPanel .admin-workspace .workspace-table-wrap { padding:12px; overflow:visible!important; background:#f7f8fa; } #dashboardPanel .admin-workspace table { min-width:0!important; display:block; } #dashboardPanel .admin-workspace thead { display:none; } #dashboardPanel .admin-workspace tbody { display:grid; gap:11px; } #dashboardPanel .admin-workspace tbody tr { padding:4px 13px; display:block; overflow:hidden; border:1px solid #e0e5eb; border-radius:12px; background:#fff; box-shadow:0 5px 14px rgba(26,38,55,.04); } #dashboardPanel .admin-workspace tbody td, #dashboardPanel .admin-workspace tbody tr td { min-height:0; padding:10px 0!important; display:grid; grid-template-columns:108px minmax(0,1fr); gap:10px; align-items:start; text-align:left!important; border-bottom:1px dashed #e7eaf0!important; background:transparent!important; font-size:.61rem; white-space:normal!important; } #dashboardPanel .admin-workspace tbody tr td:last-child { border-bottom:0!important; } #dashboardPanel .admin-workspace tbody td::before { color:#7a8494; font-size:.52rem; font-weight:750; letter-spacing:.04em; text-transform:uppercase; } #dashboardPanel .admin-workspace tbody td[colspan] { height:140px; display:grid; grid-template-columns:1fr; place-items:center; border:0!important; background:transparent!important; text-align:center!important; } #dashboardPanel .admin-workspace tbody td[colspan]::before { display:none; } #dashboardPanel .admin-workspace-contributors tbody td:nth-child(1)::before { content:"Ảnh"; } #dashboardPanel .admin-workspace-contributors tbody td:nth-child(2)::before { content:"Tiêu đề"; } #dashboardPanel .admin-workspace-contributors tbody td:nth-child(3)::before { content:"Tác giả"; } #dashboardPanel .admin-workspace-contributors tbody td:nth-child(4)::before { content:"Liên hệ"; } #dashboardPanel .admin-workspace-contributors tbody td:nth-child(5)::before { content:"Chuyên mục"; } #dashboardPanel .admin-workspace-contributors tbody td:nth-child(6)::before { content:"Ngày gửi"; } #dashboardPanel .admin-workspace-contributors tbody td:nth-child(7)::before { content:"Trạng thái"; } #dashboardPanel .admin-workspace-contributors tbody td:nth-child(8)::before { content:"Hành động"; } #dashboardPanel .admin-workspace-documents tbody td:nth-child(1)::before { content:"Số hiệu"; } #dashboardPanel .admin-workspace-documents tbody td:nth-child(2)::before { content:"Loại văn bản"; } #dashboardPanel .admin-workspace-documents tbody td:nth-child(3)::before { content:"Trích yếu"; } #dashboardPanel .admin-workspace-documents tbody td:nth-child(4)::before { content:"Ngày ban hành"; } #dashboardPanel .admin-workspace-documents tbody td:nth-child(5)::before { content:"Tệp tin"; } #dashboardPanel .admin-workspace-documents tbody td:nth-child(6)::before { content:"Hành động"; } #dashboardPanel .admin-workspace-calendar tbody td:nth-child(1)::before { content:"Thời gian"; } #dashboardPanel .admin-workspace-calendar tbody td:nth-child(2)::before { content:"Nội dung"; } #dashboardPanel .admin-workspace-calendar tbody td:nth-child(3)::before { content:"Địa điểm"; } #dashboardPanel .admin-workspace-calendar tbody td:nth-child(4)::before { content:"Đối tượng"; } #dashboardPanel .admin-workspace-calendar tbody td:nth-child(5)::before { content:"Loại lịch"; } #dashboardPanel .admin-workspace-calendar tbody td:nth-child(6)::before { content:"Hành động"; } #dashboardPanel .admin-workspace tbody td img { width:70px!important; height:48px!important; border-radius:8px!important; } /* Thành viên ban điều hành */ #dashboardPanel .admin-workspace-board #boardEditsContainer { padding:12px 12px 0; gap:12px; } #dashboardPanel .admin-workspace-board .board-dept-title { padding:12px 14px; font-size:.61rem!important; } #dashboardPanel .admin-workspace-board .member-edit-row { padding:13px; grid-template-columns:1fr; gap:9px; } #dashboardPanel .admin-workspace-board .member-edit-row > div:nth-child(3) { grid-template-columns:42px minmax(0,1fr); } #dashboardPanel .admin-workspace-board .member-edit-row > div:nth-child(3) .btn { grid-column:1 / -1; width:100%!important; } #dashboardPanel .admin-workspace-board .member-edit-row > div:nth-child(4) { text-align:right!important; } #dashboardPanel .admin-workspace-board .member-edit-row > div:nth-child(4) .action-btn { width:100%; } #dashboardPanel .admin-workspace-board > .workspace-card > .workspace-form-actions { margin:12px 0 0!important; padding:12px!important; display:block!important; } #dashboardPanel .admin-workspace-board > .workspace-card > .workspace-form-actions .btn { width:100%!important; } .toast-container { width:calc(100vw - 20px)!important; top:10px!important; right:10px!important; } .toast { min-height:68px; padding:11px 40px 11px 11px!important; grid-template-columns:36px minmax(0,1fr); } .toast .toast-icon { width:36px; height:36px; border-radius:10px; } .toast .toast-message { font-size:.65rem; } .admin-confirm-dialog { padding:20px; grid-template-columns:46px minmax(0,1fr); gap:12px; border-radius:16px; } .admin-confirm-symbol { width:46px; height:46px; border-radius:13px; } .admin-confirm-copy { padding-right:22px; } .admin-confirm-copy h3 { font-size:.86rem; } .admin-confirm-copy p { font-size:.63rem; } .admin-confirm-actions { display:grid; grid-template-columns:1fr 1fr; } .admin-confirm-actions .btn { width:100%!important; min-width:0; } } @media (max-width: 430px) { #dashboardPanel .admin-workspace tbody td, #dashboardPanel .admin-workspace tbody tr td { grid-template-columns:88px minmax(0,1fr); gap:8px; } #dashboardPanel .admin-workspace .workspace-form-actions { grid-template-columns:1fr; } .admin-confirm-dialog { grid-template-columns:1fr; text-align:center; } .admin-confirm-symbol { margin:auto; } .admin-confirm-copy { padding:0; } .admin-confirm-actions { grid-template-columns:1fr; } } /* ================================================================ THƯ VIỆN TRÍCH DẪN TRONG TRÌNH SOẠN THẢO ================================================================ */ .quote-library-trigger { display: inline-flex !important; align-items: center; gap: 7px; } .quote-library-trigger .fa-chevron-down { margin-left: 2px; font-size: .62rem; opacity: .72; } body.quote-style-picker-open { overflow: hidden; } .quote-style-modal { position: fixed; inset: 0; z-index: 10020; display: flex; align-items: center; justify-content: center; padding: 22px; background: rgba(15, 23, 42, .66); backdrop-filter: blur(7px); opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s ease; } .quote-style-modal.is-open { opacity: 1; visibility: visible; } .quote-style-dialog { width: min(880px, 100%); max-height: min(820px, calc(100vh - 44px)); overflow: auto; border: 1px solid rgba(255, 255, 255, .75); border-radius: 24px; background: #fff; box-shadow: 0 28px 80px rgba(15, 23, 42, .3); transform: translateY(12px) scale(.985); transition: transform .22s ease; } .quote-style-modal.is-open .quote-style-dialog { transform: translateY(0) scale(1); } .quote-style-header { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 24px; color: #fff; background: radial-gradient(circle at 88% -30%, rgba(255,255,255,.22), transparent 34%), linear-gradient(135deg, #991b1b, #c9001b 55%, #e11d48); } .quote-style-heading { display: flex; align-items: center; gap: 13px; } .quote-style-heading-icon { display: grid; place-items: center; width: 45px; height: 45px; flex: 0 0 45px; border: 1px solid rgba(255,255,255,.24); border-radius: 14px; color: #fde68a; background: rgba(255,255,255,.12); box-shadow: inset 0 1px 0 rgba(255,255,255,.16); } .quote-style-heading p { margin: 0 0 3px; color: rgba(255,255,255,.72); font-size: .68rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; } .quote-style-heading h3 { margin: 0; color: #fff; font-size: 1.12rem; line-height: 1.2; } .quote-style-close { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 38px; border: 1px solid rgba(255,255,255,.2); border-radius: 12px; color: #fff; background: rgba(255,255,255,.1); cursor: pointer; transition: background .18s ease, transform .18s ease; } .quote-style-close:hover { background: rgba(255,255,255,.2); transform: rotate(4deg); } .quote-style-intro { margin: 22px 24px 0; padding: 13px 15px; border: 1px solid #fee2e2; border-radius: 12px; color: #7f1d1d; background: #fff7f7; font-size: .77rem; line-height: 1.55; } .quote-style-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: 18px 24px 22px; } .quote-style-option { display: flex; min-width: 0; flex-direction: column; gap: 10px; padding: 15px; text-align: left; font: inherit; border: 1px solid #e2e8f0; border-radius: 16px; color: #0f172a; background: #fff; box-shadow: 0 5px 18px rgba(15, 23, 42, .045); cursor: pointer; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; } .quote-style-option:hover, .quote-style-option:focus-visible { outline: none; border-color: #dc2626; box-shadow: 0 12px 28px rgba(185, 28, 28, .12); transform: translateY(-2px); } .quote-style-option-top { display: flex; min-height: 24px; align-items: center; justify-content: space-between; gap: 10px; font-size: .79rem; font-weight: 800; } .quote-style-option-top > span:first-child { display: inline-flex; align-items: center; gap: 7px; } .quote-style-option-top i { color: #c9001b; } .quote-style-recommended { padding: 4px 7px; border-radius: 999px; color: #9f1239; background: #fff1f2; font-size: .57rem; font-weight: 800; white-space: nowrap; } .quote-style-option small { color: #64748b; font-size: .65rem; line-height: 1.45; } .quote-mini-preview { position: relative; display: flex; min-height: 112px; box-sizing: border-box; flex-direction: column; justify-content: center; padding: 18px 20px; overflow: hidden; border-radius: 11px; pointer-events: none; } .quote-mini-lines { display: flex; width: 100%; flex-direction: column; gap: 7px; } .quote-mini-lines i { display: block; width: 100%; height: 5px; border-radius: 99px; background: currentColor; opacity: .24; } .quote-mini-lines i:nth-child(2) { width: 88%; } .quote-mini-lines i:nth-child(3) { width: 66%; } .quote-mini-preview strong { display: block; margin-top: 12px; font-size: .52rem; letter-spacing: .05em; } .quote-mini-frame { overflow: visible; margin-top: 7px; border: 2px solid #c81e32; border-radius: 0; color: #172033; background: #fff; } .quote-mini-frame .quote-mini-mark { position: absolute; top: -28px; left: 14px; padding: 0 7px; color: #c81e32; background: #fff; font: 700 3.7rem/.8 Georgia, serif; } .quote-mini-frame strong { text-align: right; } .quote-mini-classic { border-top: 1px solid #cbd5e1; border-bottom: 1px solid #cbd5e1; border-radius: 0; color: #991b1b; background: #fff; text-align: center; } .quote-mini-classic b { position: absolute; top: 7px; left: 14px; color: #dc2626; font: 700 2.4rem/1 Georgia, serif; } .quote-mini-classic strong { text-align: center; } .quote-mini-accent { border-left: 5px solid #c9001b; color: #334155; background: linear-gradient(135deg, #fff7f7, #f8fafc); } .quote-mini-dark { color: #fff; background: radial-gradient(circle at 95% 0, rgba(220,38,38,.35), transparent 40%), #111827; } .quote-mini-dark b { position: absolute; top: 7px; right: 14px; color: #fb7185; font: 700 2.8rem/1 Georgia, serif; } .quote-mini-dark .quote-mini-lines i { opacity: .28; } .quote-style-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 24px; border-top: 1px solid #e2e8f0; color: #64748b; background: #f8fafc; font-size: .68rem; } .quote-style-footer span { display: inline-flex; align-items: center; gap: 7px; } .quote-style-footer span i { color: #16a34a; } /* Bản xem trước ngay trong Quill. */ .ql-editor .news-pull-quote { box-sizing: border-box; white-space: normal; } .ql-editor .news-pull-quote .news-quote-text, .ql-editor .news-pull-quote .news-quote-author, .ql-editor .news-pull-quote > strong { display: block; } .ql-editor .news-pull-quote.news-quote-classic { position: relative; margin: 32px 0; padding: 28px 24px 22px; border: 0; border-top: 1px solid #cbd5e1; border-bottom: 1px solid #cbd5e1; color: #991b1b; background: transparent; text-align: center; font-family: "Noto Serif", "Times New Roman", serif; font-size: inherit; font-style: italic; line-height: 1.58; } .ql-editor .news-quote-classic::before { content: "“"; position: absolute; top: 1px; left: 18px; color: #dc2626; font: 700 3rem/1 Georgia, serif; } .ql-editor .news-pull-quote.news-quote-frame { position: relative; margin: 40px 0 28px; padding: 45px 26px 24px; border: 2px solid #c81e32; color: #111827; background: #fff; text-align: justify; text-align-last: left; text-justify: inter-word; font-family: "Noto Serif", "Times New Roman", serif; font-size: inherit; font-style: normal; font-weight: 400; line-height: 1.65; } .ql-editor .news-quote-frame::before { content: "““"; position: absolute; top: -31px; left: 20px; padding: 0 9px; color: #c81e32; background: #fff; font: 700 4.8rem/.82 Georgia, serif; letter-spacing: -20px; } .ql-editor .news-pull-quote.news-quote-accent { position: relative; margin: 28px 0; padding: 24px 26px; border: 0; border-left: 6px solid #c9001b; border-radius: 0 14px 14px 0; color: #1e293b; background: linear-gradient(135deg, #fff7f7, #f8fafc); text-align: left; font-family: "Noto Serif", "Times New Roman", serif; font-size: inherit; font-style: italic; line-height: 1.6; } .ql-editor .news-pull-quote.news-quote-dark { position: relative; margin: 30px 0; padding: 30px 32px; overflow: hidden; border: 0; border-radius: 16px; color: #fff; background: radial-gradient(circle at 100% 0, rgba(220,38,38,.38), transparent 42%), #111827; text-align: left; font-family: "Noto Serif", "Times New Roman", serif; font-size: inherit; font-style: normal; line-height: 1.62; box-shadow: 0 14px 30px rgba(15,23,42,.18); } .ql-editor .news-quote-dark::before { content: "“"; position: absolute; top: 3px; right: 18px; color: rgba(251,113,133,.5); font: 700 5.5rem/1 Georgia, serif; } .ql-editor .news-quote-author, .ql-editor .news-pull-quote > strong { margin-top: 13px; color: inherit; text-align: right; text-align-last: right; font-family: inherit; font-size: .86em; font-style: normal; font-weight: 800; line-height: 1.45; } .ql-editor .news-quote-classic .news-quote-author, .ql-editor .news-quote-classic > strong { text-align: center; } @media (max-width: 767px) { .quote-style-modal { align-items: flex-end; padding: 0; } .quote-style-dialog { width: 100%; max-height: 92vh; border-radius: 22px 22px 0 0; transform: translateY(24px); } .quote-style-header { padding: 16px; } .quote-style-heading-icon { width: 40px; height: 40px; flex-basis: 40px; } .quote-style-heading h3 { font-size: .96rem; } .quote-style-intro { margin: 15px 15px 0; font-size: .7rem; } .quote-style-grid { grid-template-columns: 1fr; gap: 12px; padding: 14px 15px 18px; } .quote-style-option { padding: 13px; } .quote-mini-preview { min-height: 92px; } .quote-style-footer { position: sticky; bottom: 0; padding: 12px 15px; } .quote-style-footer > span { display: none; } .quote-style-footer .btn { width: 100% !important; } .ql-editor .news-pull-quote.news-quote-frame { margin-top: 36px; padding: 38px 18px 19px; font-size: inherit; line-height: 1.58; } .ql-editor .news-quote-frame::before { top: -25px; left: 12px; font-size: 4rem; } .ql-editor .news-pull-quote.news-quote-classic, .ql-editor .news-pull-quote.news-quote-accent, .ql-editor .news-pull-quote.news-quote-dark { padding: 22px 18px; font-size: inherit; } }