/* ══════════════════════════════════════════════════════════ Cms Cloudzone — giao diện quản trị Lấy nguyên hệ màu và khoảng cách từ bản phác đã duyệt. ══════════════════════════════════════════════════════════ */ *{box-sizing:border-box;margin:0;padding:0} :root{ --nav:#0f172a; --nav-2:#1e293b; --nav-txt:#94a3b8; --nav-on:#f8fafc; --bg:#f8fafc; --card:#ffffff; --line:#e5e9f0; --line-2:#f1f5f9; --ink:#0f172a; --ink-2:#475569; --mute:#64748b; --faint:#94a3b8; --pri:#2563eb; --pri-2:#1d4ed8; --pri-soft:#eff6ff; --pri-line:#bfdbfe; --ok:#059669; --ok-soft:#ecfdf5; --ok-line:#a7f3d0; --warn:#d97706; --warn-soft:#fffbeb; --warn-line:#fde68a; --dang:#dc2626; --dang-soft:#fef2f2; --dang-line:#fecaca; --vio:#7c3aed; --vio-soft:#f5f3ff; --vio-line:#ddd6fe; --sh:0 1px 2px rgba(15,23,42,.04),0 1px 3px rgba(15,23,42,.06); --sh-2:0 4px 6px -1px rgba(15,23,42,.06),0 2px 4px -2px rgba(15,23,42,.04); --r:10px; } @media (prefers-color-scheme:dark){ :root{--nav:#020617;--nav-2:#0f172a;--bg:#0b1220;--card:#111827;--line:#1f2937;--line-2:#161f2e; --ink:#f1f5f9;--ink-2:#cbd5e1;--mute:#94a3b8;--faint:#64748b; --pri-soft:#172554;--pri-line:#1e40af;--ok-soft:#022c22;--ok-line:#065f46; --warn-soft:#291a04;--warn-line:#78350f;--dang-soft:#2c0d0d;--dang-line:#7f1d1d; --vio-soft:#1e1b4b;--vio-line:#4c1d95;--sh:0 1px 3px rgba(0,0,0,.4);--sh-2:0 4px 12px rgba(0,0,0,.5)} } html{-webkit-font-smoothing:antialiased} body{font-family:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,sans-serif; background:var(--bg);color:var(--ink);font-size:14px;line-height:1.55} a{color:inherit;text-decoration:none} svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.75; stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto} /* ══════════ KHUNG ══════════ */ .wrap{display:flex;min-height:100vh} .side{width:248px;flex:0 0 248px;background:var(--nav);display:flex;flex-direction:column; position:sticky;top:0;height:100vh} .brand{padding:20px 20px 18px;display:flex;align-items:center;gap:11px} .logo{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,#3b82f6,#8b5cf6); display:grid;place-items:center;color:#fff;font-weight:800;font-size:15px;letter-spacing:-.5px} .brand-t{color:#fff;font-weight:700;font-size:15px;letter-spacing:-.2px;line-height:1.2} .brand-s{color:#64748b;font-size:11px;font-weight:500} .nav{padding:6px 12px;flex:1;overflow:auto} .nav a{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:8px;color:var(--nav-txt); cursor:pointer;font-weight:500;font-size:13.5px;margin-bottom:2px;position:relative;transition:.12s} .nav a:hover{background:var(--nav-2);color:#e2e8f0} .nav a.active{background:var(--nav-2);color:var(--nav-on);font-weight:600} .nav a.active::before{content:"";position:absolute;left:-12px;top:50%;transform:translateY(-50%); width:3px;height:20px;border-radius:0 3px 3px 0;background:#3b82f6} .nav .grp{padding:16px 12px 7px;font-size:10.5px;text-transform:uppercase;letter-spacing:.8px; color:#475569;font-weight:700} .cnt{margin-left:auto;background:#334155;color:#cbd5e1;font-size:11px;font-weight:700; padding:1px 7px;border-radius:99px;min-width:20px;text-align:center} .side-f{padding:14px;border-top:1px solid #1e293b} .side-f a{display:flex;align-items:center;gap:10px;color:#64748b;font-size:12.5px;cursor:pointer} .side-f a:hover{color:#cbd5e1} .main{flex:1;min-width:0;display:flex;flex-direction:column} .top{height:60px;background:var(--card);border-bottom:1px solid var(--line);display:flex; align-items:center;gap:12px;padding:0 24px;position:sticky;top:0;z-index:20} .sitesel{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:8px; padding:7px 12px;font-weight:600;font-size:13px;cursor:pointer;background:var(--card)} .sitesel:hover{background:var(--bg)} .sitesel .live{width:7px;height:7px;border-radius:99px;background:var(--ok)} .search{flex:0 0 300px;position:relative;color:var(--faint)} .search svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:16px;height:16px} .search input{padding-left:35px;height:36px;background:var(--bg);border-color:transparent} .spacer{flex:1} .icobtn{width:36px;height:36px;border-radius:8px;display:grid;place-items:center;color:var(--mute); cursor:pointer;position:relative} .icobtn:hover{background:var(--bg);color:var(--ink)} .me{display:flex;align-items:center;gap:10px;padding-left:12px;border-left:1px solid var(--line);cursor:pointer} .av{width:34px;height:34px;border-radius:99px;background:linear-gradient(135deg,#3b82f6,#8b5cf6); color:#fff;display:grid;place-items:center;font-weight:700;font-size:12.5px;flex:0 0 34px} .body{padding:24px;overflow:auto;flex:1} /* ══════════ CHỮ ══════════ */ h1{font-size:22px;font-weight:700;letter-spacing:-.4px} h2{font-size:14px;font-weight:700;letter-spacing:-.1px} .sub{color:var(--mute);font-size:13px;margin-top:3px} .head{display:flex;align-items:center;gap:12px;margin-bottom:20px;flex-wrap:wrap} .card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh)} .card-h{padding:14px 18px;border-bottom:1px solid var(--line-2);display:flex;align-items:center;gap:10px} .card-b{padding:18px} .grid{display:grid;gap:16px} /* ══════════ NÚT ══════════ */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid var(--line); background:var(--card);color:var(--ink-2);border-radius:8px;padding:8px 14px;font-weight:600; font-size:13px;cursor:pointer;font-family:inherit;transition:.12s;white-space:nowrap;box-shadow:var(--sh)} .btn:hover:not(:disabled){background:var(--bg);color:var(--ink);border-color:#cbd5e1} .btn:disabled{opacity:.6;cursor:not-allowed} .btn.pri{background:var(--pri);border-color:var(--pri);color:#fff;box-shadow:0 1px 2px rgba(37,99,235,.3)} .btn.pri:hover:not(:disabled){background:var(--pri-2);border-color:var(--pri-2);color:#fff} .btn.ok{background:var(--ok);border-color:var(--ok);color:#fff} .btn.dang{color:var(--dang);border-color:var(--dang-line)} .btn.dang:hover:not(:disabled){background:var(--dang-soft)} .btn.sm{padding:5px 10px;font-size:12px;border-radius:7px} .btn svg{width:16px;height:16px} /* ══════════ NHÃN TRẠNG THÁI ══════════ */ .pill{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600; padding:3px 9px;border-radius:6px;white-space:nowrap;border:1px solid} .pill i{width:6px;height:6px;border-radius:99px;background:currentColor;flex:0 0 6px} .p-draft{background:var(--line-2);color:var(--mute);border-color:var(--line)} .p-writ {background:var(--warn-soft);color:var(--warn);border-color:var(--warn-line)} .p-wait {background:var(--vio-soft); color:var(--vio); border-color:var(--vio-line)} .p-live {background:var(--ok-soft); color:var(--ok); border-color:var(--ok-line)} .p-down {background:var(--dang-soft);color:var(--dang);border-color:var(--dang-line)} .p-edit {background:var(--pri-soft); color:var(--pri); border-color:var(--pri-line)} /* ══════════ BẢNG ══════════ */ table{width:100%;border-collapse:collapse} th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--faint); font-weight:700;padding:11px 14px;background:var(--line-2)} th.act{text-align:right} td{padding:13px 14px;border-top:1px solid var(--line-2);vertical-align:middle} tbody tr:hover td{background:var(--bg)} .ttl{font-weight:600;color:var(--ink);letter-spacing:-.1px} .meta{color:var(--faint);font-size:12px;margin-top:2px} /* Nút thao tác: mờ sẵn cho đỡ rối mắt, rõ hẳn khi rê chuột vào dòng. Phải liệt kê cả lẫn
  • vì bảng dùng tr còn cây chuyên mục dùng li. */ .acts{display:flex;gap:5px;justify-content:flex-end;opacity:.35;transition:opacity .14s} tr:hover .acts, .tree li:hover .acts, .acts:hover{opacity:1} /* ══════════ Ô NHẬP ══════════ */ label{display:block;font-size:12.5px;font-weight:600;color:var(--ink-2);margin-bottom:6px} input,textarea,select{width:100%;border:1px solid var(--line);border-radius:8px;padding:9px 12px; font:inherit;font-size:13.5px;background:var(--card);color:var(--ink);transition:.12s} input:focus,textarea:focus,select:focus{outline:none;border-color:var(--pri);box-shadow:0 0 0 3px var(--pri-soft)} input::placeholder,textarea::placeholder{color:var(--faint)} input[type=checkbox]{width:15px;height:15px;accent-color:var(--pri);cursor:pointer} /* Ô chọn kèm nhãn chữ: "Chỉ tài khoản bị khoá", "Site đang chạy", danh sách chuyên mục lúc soạn bài. Viết là label.sw chứ không phải .sw — trình soạn thảo có span.sw riêng (vệt màu dưới nút chọn màu chữ), hai thứ không liên quan gì nhau. */ label.sw{display:inline-flex;align-items:center;gap:8px;cursor:pointer; font-size:13px;color:var(--ink-2);user-select:none} label.sw:hover{color:var(--ink)} label.sw input[type=checkbox]{flex:0 0 15px;width:15px;height:15px;min-width:0;margin:0} /* ══════════ CÂY CHỌN CHUYÊN MỤC KHI SOẠN BÀI ══════════ Mỗi mục chiếm trọn một dòng. Trước đây dùng chung label.sw — mà label.sw là inline-flex — nên các mục chảy nối đuôi nhau rồi tự xuống dòng: "Hoạt động" và "Sản phẩm" nằm chung một hàng, thụt lề theo cấp thành ra vô nghĩa và không còn nhìn ra đâu là cha đâu là con. */ .cat-pick{max-height:240px;overflow:auto;margin:0 -6px} .cat-row{display:flex;align-items:stretch;gap:0;border-radius:7px; font-size:13px;color:var(--ink-2);user-select:none} .cat-row:hover{background:var(--line-2)} .cat-row.on{color:var(--ink)} /* Một vạch dọc cho mỗi cấp cha. Thụt lề trần thì mắt không có mốc để bám, nhất là khi tên chuyên mục dài ngắn khác nhau. */ .cat-row .ind{flex:0 0 18px;border-left:1px solid var(--line);margin:2px 0} .cat-row .ind:first-child{margin-left:6px} .cat-lb{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:8px; padding:6px 8px;cursor:pointer} .cat-lb input[type=checkbox]{flex:0 0 15px;width:15px;height:15px;min-width:0;margin:0} .cat-row .nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .cat-row.on .nm{font-weight:600} /* Nút này nằm NGOÀI thẻ label. Để bên trong thì bấm "đặt làm chính" sẽ kích hoạt luôn label và bỏ tick chuyên mục vừa chọn. */ .cat-set{flex:0 0 auto;align-self:center;margin-right:8px; font-size:11px;line-height:18px;padding:0 8px;border-radius:999px; background:transparent;border:1px solid transparent;color:var(--faint);cursor:pointer} .cat-row:hover .cat-set{color:var(--pri);border-color:var(--pri-line);background:var(--pri-soft)} .cat-set:disabled{cursor:default;opacity:.5} .cat-row > .chip{flex:0 0 auto;align-self:center;margin-right:8px} .fld{margin-bottom:16px} .fld:last-child{margin-bottom:0} .hint{font-size:12px;color:var(--faint);margin-top:5px;line-height:1.45} /* ══════════ THẺ THỐNG KÊ ══════════ */ .stat{padding:18px} .stat .row{display:flex;align-items:flex-start;justify-content:space-between} .stat .num{font-size:28px;font-weight:800;letter-spacing:-1px;line-height:1.1} .stat .lbl{font-size:12.5px;color:var(--mute);font-weight:600;margin-top:3px} .stat .ic{width:38px;height:38px;border-radius:9px;display:grid;place-items:center} .note{display:flex;gap:10px;border:1px solid var(--pri-line);background:var(--pri-soft); color:var(--pri);padding:12px 14px;border-radius:9px;font-size:12.5px;line-height:1.55} .note svg{width:17px;height:17px;margin-top:1px} .note.bad{border-color:var(--dang-line);background:var(--dang-soft);color:var(--dang)} .resume{display:flex;align-items:center;gap:13px;padding:13px 14px;border-radius:9px; border:1px solid var(--warn-line);background:var(--warn-soft);margin-bottom:10px} .resume:last-of-type{margin-bottom:0} .bolt{width:34px;height:34px;border-radius:8px;background:var(--warn);color:#fff; display:grid;place-items:center;flex:0 0 34px} /* ══════════ MÀN ĐĂNG NHẬP ══════════ */ .auth{min-height:100vh;display:grid;place-items:center;padding:24px; background:radial-gradient(1100px 520px at 50% -12%,var(--pri-soft),var(--bg))} .auth-box{width:100%;max-width:404px} .auth-brand{display:flex;align-items:center;gap:12px;justify-content:center;margin-bottom:22px} .auth-brand .logo{width:42px;height:42px;border-radius:11px;font-size:17px} .auth .card-b{padding:26px} .auth h1{font-size:19px;text-align:center;margin-bottom:5px} .auth .sub{text-align:center;margin-bottom:22px} .auth .btn{width:100%;padding:11px;font-size:14px} .auth-foot{text-align:center;color:var(--faint);font-size:12px;margin-top:18px} /* ══════════ LINH TINH ══════════ */ .spin{width:15px;height:15px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff; border-radius:99px;animation:sp .6s linear infinite;stroke:none} @keyframes sp{to{transform:rotate(360deg)}} .center-load{min-height:100vh;display:grid;place-items:center;color:var(--mute);gap:12px} .center-load .spin{width:26px;height:26px;border-color:var(--line);border-top-color:var(--pri)} .fade{animation:fi .18s ease} @keyframes fi{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}} #blazor-error-ui{background:#fef3c7;border-top:1px solid #fde68a;bottom:0;box-shadow:0 -1px 6px rgba(0,0,0,.1); display:none;left:0;padding:12px 18px;position:fixed;width:100%;z-index:1000;color:#78350f} #blazor-error-ui .dismiss{cursor:pointer;position:absolute;right:14px;top:10px} @media(max-width:1100px){.g2{grid-template-columns:1fr!important}.g4{grid-template-columns:repeat(2,1fr)!important}} /* ══════════════════════════════════════════════════════════ TOOLS — component dùng chung ══════════════════════════════════════════════════════════ */ /* ── Thông báo nổi ── */ .toast-wrap{position:fixed;top:16px;right:16px;z-index:9000;display:flex;flex-direction:column; gap:9px;max-width:390px} .toast-item{display:flex;gap:11px;align-items:flex-start;background:var(--card);border:1px solid var(--line); border-left:3px solid var(--pri);border-radius:10px;padding:12px 13px;box-shadow:0 10px 26px rgba(15,23,42,.16); animation:t-in .2s ease} @keyframes t-in{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}} .toast-item .t-ico{width:18px;height:18px;margin-top:1px} .toast-item .t-title{font-weight:600;font-size:13.5px;color:var(--ink)} .toast-item .t-msg{font-size:12.5px;color:var(--ink-2);line-height:1.45;word-break:break-word} .toast-item .t-x{background:none;border:0;color:var(--faint);cursor:pointer;font-size:13px; padding:0 2px;line-height:1;font-family:inherit} .toast-item .t-x:hover{color:var(--dang)} .t-success{border-left-color:var(--ok)} .t-success .t-ico{color:var(--ok)} .t-error {border-left-color:var(--dang)} .t-error .t-ico{color:var(--dang)} .t-warning{border-left-color:var(--warn)} .t-warning .t-ico{color:var(--warn)} .t-info {border-left-color:var(--pri)} .t-info .t-ico{color:var(--pri)} /* ── Hộp thông báo tại chỗ ── */ .alertmsg{display:flex;gap:10px;padding:12px 14px;border-radius:9px;border:1px solid; font-size:12.5px;line-height:1.55;margin-bottom:14px} .alertmsg svg{width:17px;height:17px;margin-top:1px} .a-success{background:var(--ok-soft); border-color:var(--ok-line); color:var(--ok)} .a-danger,.a-error{background:var(--dang-soft);border-color:var(--dang-line);color:var(--dang)} .a-warning{background:var(--warn-soft);border-color:var(--warn-line);color:var(--warn)} .a-info{background:var(--pri-soft);border-color:var(--pri-line);color:var(--pri)} /* ── Phân trang ── */ .paginate{display:flex;align-items:center;justify-content:space-between;gap:14px; padding:13px 16px;flex-wrap:wrap} .pg-range{font-size:12.5px;color:var(--mute)} .pg-pages{display:flex;gap:4px;align-items:center} .pg-btn{min-width:32px;height:32px;border:1px solid var(--line);background:var(--card);color:var(--ink-2); border-radius:7px;cursor:pointer;font-family:inherit;font-size:13px;font-weight:600;padding:0 8px} .pg-btn:hover:not(:disabled){background:var(--bg);border-color:#cbd5e1;color:var(--ink)} .pg-btn:disabled{opacity:.4;cursor:not-allowed} .pg-btn.active{background:var(--pri);border-color:var(--pri);color:#fff} .pg-gap{color:var(--faint);padding:0 3px;user-select:none} .pgsize{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--mute);white-space:nowrap} .pgsize select{width:auto;height:36px;padding:0 10px;font-size:13px} /* ── Hộp chọn có tìm kiếm ── */ .ss-wrap{position:relative;outline:none} .ss-control{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:8px; padding:9px 12px;background:var(--card);cursor:pointer;font-size:13.5px;min-height:38px} .ss-control:hover{border-color:#cbd5e1} .ss-control:focus{outline:none;border-color:var(--pri);box-shadow:0 0 0 3px var(--pri-soft)} .ss-control.dis{opacity:.6;cursor:not-allowed;background:var(--bg)} .ss-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ss-value.ph{color:var(--faint)} .ss-arrow{width:15px;height:15px;color:var(--faint)} .ss-drop{position:absolute;top:calc(100% + 5px);left:0;right:0;background:var(--card); border:1px solid var(--line);border-radius:9px;box-shadow:0 12px 28px rgba(15,23,42,.16); padding:6px;z-index:60} .ss-search{margin-bottom:5px;height:34px;font-size:13px} .ss-list{max-height:250px;overflow:auto} .ss-opt{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:7px;cursor:pointer;font-size:13.5px} .ss-opt:hover{background:var(--bg)} .ss-opt.on{background:var(--pri-soft);color:var(--pri);font-weight:600} .ss-opt.ph{color:var(--faint)} .ss-opt span:first-child{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ss-tick{color:var(--pri)} .ss-empty{padding:14px 10px;text-align:center;color:var(--faint);font-size:13px} .ss-opt svg{width:16px;height:16px;color:var(--faint);flex:0 0 16px} .ss-opt.dis{opacity:.45;cursor:not-allowed} .ss-opt.dis:hover{background:transparent} .ss-opt.danger{color:var(--dang)} .ss-opt.danger svg{color:var(--dang)} .ss-opt.danger:hover{background:var(--dang-soft)} .drop-hd{font-size:10.5px;text-transform:uppercase;letter-spacing:.7px;color:var(--faint); font-weight:700;padding:8px 11px 6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .drop-sep{height:1px;background:var(--line-2);margin:5px 8px} .me svg{transition:transform .12s} /* ── Hộp thoại xác nhận ── */ .modal-back{position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:8000; display:grid;place-items:center;padding:20px;animation:fi .14s ease} /* Hộp thoại cao hơn màn hình thì CHÍNH PHẦN RUỘT cuộn, không phải cả hộp. Trừ 40px là phần đệm của lớp nền ở trên và dưới. Xếp theo cột và cho ruột co giãn: tiêu đề và hàng nút luôn nhìn thấy, người dùng không phải cuộn xuống đáy mới bấm được Lưu. Thiếu đoạn này thì form dài như màn Menu bị cụt phần dưới và không cuộn tới được. */ .modal-box{width:100%;max-width:420px;background:var(--card);border:1px solid var(--line); border-radius:12px;box-shadow:0 24px 60px rgba(15,23,42,.3);animation:m-in .18s ease; max-height:calc(100vh - 40px);display:flex;flex-direction:column} @keyframes m-in{from{opacity:0;transform:scale(.97) translateY(6px)}to{opacity:1;transform:none}} .modal-h{display:flex;align-items:center;gap:11px;padding:18px 20px 0;flex:0 0 auto} .modal-h svg{width:22px;height:22px} .modal-h h2{font-size:16px} /* overscroll-behavior: cuộn hết ruột thì dừng, không đẩy tiếp trang nền phía sau */ .modal-b{padding:10px 20px 20px;color:var(--ink-2);font-size:13.5px;line-height:1.6; flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain} .modal-f{display:flex;gap:9px;justify-content:flex-end;padding:14px 20px 20px;flex:0 0 auto; border-top:1px solid var(--line)} /* ── Danh sách rỗng ── */ .empty{text-align:center;padding:52px 20px} .empty-ic{width:54px;height:54px;border-radius:14px;background:var(--line-2);color:var(--faint); display:grid;place-items:center;margin:0 auto 14px} .empty-ic svg{width:24px;height:24px} .empty-t{font-weight:600;font-size:14.5px;color:var(--ink)} .empty-m{font-size:13px;color:var(--mute);margin-top:5px;max-width:400px;margin-left:auto;margin-right:auto} /* ── Khối chờ ── */ .loadbox{display:flex;align-items:center;justify-content:center;gap:11px;padding:44px 20px; color:var(--mute);font-size:13px} .loadbox .spin{width:20px;height:20px;border-color:var(--line);border-top-color:var(--pri)} /* ── Cây chuyên mục ── */ .tree{list-style:none;margin:0;padding:0} .tree li{list-style:none;padding:10px 12px;border-radius:8px;display:flex;align-items:center; gap:11px;font-size:13.5px;border:1px solid transparent;margin-bottom:2px; transition:background .12s,border-color .12s} .tree li:hover{background:var(--bg);border-color:var(--line)} .tree li.sel{background:var(--pri-soft);border-color:var(--pri-line)} .tree li > svg{width:17px;height:17px;flex:0 0 17px} .tree .meta{margin-top:0} .grip{color:var(--faint);cursor:grab;letter-spacing:-2px;font-size:15px;user-select:none} /* ── Thanh lọc và tab ── */ .tabs{display:flex;gap:2px;background:var(--line-2);padding:4px;border-radius:9px; margin-bottom:18px;width:fit-content;flex-wrap:wrap} .tabs a{padding:7px 14px;color:var(--mute);font-weight:600;cursor:pointer;font-size:13px;border-radius:7px} .tabs a:hover{color:var(--ink)} .tabs a.on{background:var(--card);color:var(--ink);box-shadow:var(--sh)} .tabs a span{color:var(--faint);font-weight:600;margin-left:3px} .filters{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:16px;align-items:center} .filters input,.filters select{width:auto;min-width:150px;height:36px;padding:0 11px;font-size:13px} .filters .grow{flex:1;min-width:240px} /* Dòng .filters input ở trên đặt lại padding cho mọi ô lọc, nuốt luôn khoảng 35px mà .search input chừa sẵn cho kính lúp — hai luật cùng độ ưu tiên nên luật viết sau thắng, kết quả là icon đè lên chữ gợi ý. Luật này có 2 lớp nên thắng chắc, không phụ thuộc thứ tự dòng. */ .filters .search input{padding-left:35px} /* Cũng dòng đó kéo ô chọn thành khối 150×36 vì nó bắt MỌI thẻ input phải rộng tối thiểu 150px, cao 36px. Ô chọn và nút tròn phải giữ đúng kích thước thật. */ .filters input[type=checkbox],.filters input[type=radio]{ width:15px;height:15px;min-width:0;flex:0 0 auto} /* ── Thẻ nhỏ: chuyên mục, tag đã chọn ── */ .chip{display:inline-flex;align-items:center;gap:6px;background:var(--bg);border:1px solid var(--line); border-radius:7px;padding:5px 10px;font-size:12.5px;font-weight:600;margin:0 6px 6px 0} .chip .x{color:var(--faint);cursor:pointer;font-size:11px} .chip .x:hover{color:var(--dang)} .chip.main{background:var(--pri-soft);color:var(--pri);border-color:var(--pri-line)} .chip .n{background:var(--line);color:var(--mute);border-radius:99px;padding:0 6px;font-size:11px} /* ── Ảnh đại diện trong bảng ── */ .thumb{width:56px;height:40px;border-radius:7px;flex:0 0 56px;object-fit:cover; background:linear-gradient(135deg,var(--pri-soft),var(--vio-soft))} /* Ảnh và tiêu đề trong bảng bấm được để mở sửa. Giữ nguyên màu chữ, chỉ đổi khi rê chuột — nếu tô xanh như link thì bảng rối mắt. */ .row-link{display:block;color:inherit;text-decoration:none} .row-link:hover .ttl{color:var(--pri);text-decoration:underline} td > a[href] .thumb{cursor:pointer;transition:box-shadow .12s} td > a[href]:hover .thumb{box-shadow:0 0 0 2px var(--pri)} /* ── Xem trước kết quả Google ── */ .google{border:1px solid var(--line);border-radius:8px;padding:14px;background:var(--bg)} .google .g-url{color:var(--ink-2);font-size:12px;margin-bottom:3px} .google .g-ttl{color:#1a0dab;font-size:17px;line-height:1.3;margin-bottom:3px} .google .g-des{color:var(--mute);font-size:12.5px;line-height:1.5} @media (prefers-color-scheme:dark){.google .g-ttl{color:#8ab4f8}} /* ── Lưới thư viện ảnh ── */ .gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:13px} .gal figure{aspect-ratio:4/3;border-radius:9px;background:linear-gradient(135deg,var(--pri-soft),var(--vio-soft)); display:flex;align-items:flex-end;padding:9px;font-size:11px;color:var(--ink-2);cursor:pointer; border:2px solid transparent;font-weight:600;transition:.12s} .gal figure:hover{border-color:var(--pri);transform:translateY(-2px);box-shadow:var(--sh-2)} .stick{position:sticky;top:76px} .count{float:right;font-weight:500;color:var(--faint);font-size:11.5px} /* ══════════════════════════════════════════════════════════ TRÌNH SOẠN THẢO ══════════════════════════════════════════════════════════ */ .ck-tools{border:1px solid var(--line);border-bottom:0;border-radius:8px 8px 0 0; background:var(--line-2);padding:5px 6px;position:sticky;top:60px;z-index:8} .ck-row{display:flex;flex-wrap:wrap;align-items:center;gap:1px} .ck-row+.ck-row{margin-top:3px;padding-top:4px;border-top:1px solid var(--line)} .ck-b{min-width:28px;height:28px;border:0;background:transparent;border-radius:5px;color:var(--ink-2); cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:4px; font-family:inherit;font-size:12.5px;font-weight:600;padding:0 5px;position:relative;white-space:nowrap} .ck-b:hover{background:var(--card);box-shadow:var(--sh);color:var(--ink)} .ck-b.act{background:var(--pri-soft);color:var(--pri)} .ck-b svg{width:15px;height:15px} .ck-b .car{font-size:8px;color:var(--faint);margin-left:1px} .ck-b .sw{position:absolute;bottom:3px;left:6px;right:6px;height:3px;border-radius:2px} .ck-sep{width:1px;height:19px;background:var(--line);margin:0 4px;flex:0 0 1px} .ck-grp{font-size:10px;color:var(--faint);font-weight:700;text-transform:uppercase; letter-spacing:.5px;padding:0 6px 0 2px;user-select:none} .ck-swatch{width:22px;height:22px;border-radius:5px;border:1px solid rgba(0,0,0,.12);cursor:pointer;padding:0} .ck-swatch:hover{transform:scale(1.12)} /* Hộp thả xuống trên thanh công cụ */ .ck-wrap{position:relative;display:inline-flex} .ck-menu{position:absolute;top:calc(100% + 6px);left:0;min-width:250px;background:var(--card); border:1px solid var(--line);border-radius:10px;box-shadow:0 14px 32px rgba(15,23,42,.18); padding:5px;z-index:30;display:none} .ck-menu.open{display:block} .ck-menu .hd{font-size:10.5px;text-transform:uppercase;letter-spacing:.7px;color:var(--faint); font-weight:700;padding:8px 10px 5px} .ck-menu a{display:flex;align-items:center;gap:10px;padding:7px 11px;border-radius:7px;cursor:pointer; color:var(--ink);line-height:1.35} .ck-menu a:hover{background:var(--pri-soft)} .ck-menu a.on{background:var(--pri-soft);color:var(--pri)} .ck-menu a.dis{opacity:.45;cursor:not-allowed} .ck-menu a.dis:hover{background:transparent} .ck-menu .kb{margin-left:auto;font-size:11px;color:var(--faint);font-weight:600} .ck-menu .sepline{height:1px;background:var(--line-2);margin:5px 8px} .h-p{font-size:14px} .h-1{font-size:24px;font-weight:800;letter-spacing:-.5px} .h-2{font-size:20px;font-weight:700;letter-spacing:-.3px} .h-3{font-size:17px;font-weight:700;letter-spacing:-.2px} .h-4{font-size:15px;font-weight:700} .h-5{font-size:13.5px;font-weight:700} /* Vùng soạn thảo */ .ck-canvas{border:1px solid var(--line);border-radius:0 0 8px 8px;padding:20px 22px; min-height:360px;background:var(--card);outline:none;font-size:15px;line-height:1.75} .ck-canvas:focus{border-color:var(--pri);box-shadow:0 0 0 3px var(--pri-soft)} .ck-canvas p{margin-bottom:12px} .ck-canvas h2{font-size:22px;margin:20px 0 10px;letter-spacing:-.3px} .ck-canvas h3{font-size:18px;margin:18px 0 9px} .ck-canvas h4{font-size:16px;margin:16px 0 8px} .ck-canvas h5{font-size:14.5px;margin:14px 0 7px} .ck-canvas ul,.ck-canvas ol{padding-left:24px;margin-bottom:12px} .ck-canvas li{margin-bottom:5px} .ck-canvas a{color:var(--pri);text-decoration:underline} .ck-canvas img{max-width:100%;height:auto;border-radius:8px} .ck-canvas figure{margin:16px 0} .ck-canvas figcaption{font-size:12.5px;color:var(--faint);text-align:center;padding-top:8px} .ck-canvas blockquote{border-left:3px solid var(--pri);padding:4px 0 4px 16px;margin:14px 0; font-style:italic;color:var(--ink-2)} .ck-canvas pre{background:var(--nav);color:#a5f3fc;border-radius:8px;padding:14px 16px;margin:14px 0; font-family:ui-monospace,Consolas,monospace;font-size:13px;overflow:auto;white-space:pre-wrap} .ck-canvas hr{border:0;border-top:1px solid var(--line);margin:20px 0} .ck-canvas table{width:100%;border:1px solid var(--line);border-radius:8px;margin:14px 0;border-collapse:collapse} .ck-canvas th{background:var(--line-2);padding:9px 12px;font-size:13px;text-transform:none;letter-spacing:0;color:var(--ink)} .ck-canvas td{padding:9px 12px;font-size:14px;border-top:1px solid var(--line-2)} .ck-canvas .note-block{border:1px solid var(--warn-line);background:var(--warn-soft);color:var(--warn); border-radius:8px;padding:12px 14px;margin:14px 0} .ck-canvas .note-block p{margin:0} .ck-canvas:empty::before{content:"Bắt đầu viết nội dung bài…";color:var(--faint)} .ck-source{border-radius:0 0 8px 8px;font-family:ui-monospace,Consolas,monospace; font-size:13px;line-height:1.7;min-height:360px} /* ══════════ Cây có gập mở, kiểu màn Cấu hình trang ══════════ */ .ctree{list-style:none;margin:0;padding:0;display:block} /* display:block tường minh: nếu
  • bị đẩy về inline thì các hàng sẽ chảy cạnh nhau và đè lên nhau. */ .ctree li{display:block;list-style:none;margin:0;padding:0;width:100%} /* Chiều cao cố định. Trước đây dùng thẻ đệm có align-self:stretch để vẽ đường kẻ dẫn, nhưng nó phá chiều cao hàng — giờ thụt lề bằng padding-left. */ /* Flex, nhưng MỌI ô đều khoá cứng bề rộng bằng flex:none + width. Không khoá thì bề rộng phụ thuộc nội dung bên trong và cột bị lệch. */ .ctree .row{display:flex;align-items:center;gap:8px;height:38px;padding:0 10px; border-radius:6px;cursor:pointer;font-size:14.5px; box-sizing:border-box;overflow:hidden;transition:background .1s} .ctree .row:hover{background:var(--line-2)} .ctree .row.on{background:var(--pri);color:#fff} .ctree .row.on .arrow,.ctree .row.on .cnt2{color:rgba(255,255,255,.85)} .ctree .row.on svg{color:#fff} .ctree .row.off .name{color:var(--faint)} .ctree .row.off svg{color:var(--faint)} /* Chỉ vẽ khi chuyên mục có con. Hàng không con được bù bằng padding-left. */ .ctree .arrow{flex:0 0 16px;width:16px;max-width:16px;height:16px; display:flex;align-items:center;justify-content:center;overflow:hidden; color:var(--faint);font-size:9px;line-height:1;user-select:none} .ctree .row > svg{flex:none;width:18px;height:18px;color:var(--pri)} /* Ô tên là ô DUY NHẤT được co giãn, mọi ô khác cố định */ .ctree .name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* Số thứ tự hiển thị ngay trong cây, để nhìn là biết đang xếp thế nào */ .ctree .ord{flex:none;width:30px;font-size:11.5px;font-weight:700;color:var(--faint); background:var(--line-2);border-radius:5px;line-height:20px;height:20px;text-align:center} .ctree .row.on .ord{background:rgba(255,255,255,.22);color:#fff} .ctree .cnt2{flex:none;width:26px;font-size:12px;color:var(--faint);font-weight:600;text-align:right} .ctree .tagoff{flex:none;font-size:11px;color:var(--faint);font-weight:600; text-transform:uppercase;letter-spacing:.4px} .ctree .row.on .tagoff{color:rgba(255,255,255,.75)} /* Khung cây kéo dài xuống sát đáy màn hình, không co lại theo số dòng. Dùng height cố định chứ không max-height: max-height chỉ chặn trên, ít dòng thì khung teo lại thành một mẩu giữa vùng trống. 240px là tổng chiều cao thanh trên + tiêu đề trang + đầu thẻ + lề. */ .ctree-box{height:calc(100vh - 240px);min-height:300px;overflow:auto;padding:8px} /* Bảng thông báo bên phải cao bằng khung cây cho hai cột cân nhau */ .pane-empty{min-height:calc(100vh - 240px);display:grid;place-items:center} /* ══════════ Công tắc bật/tắt ══════════ */ .tgl{display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-size:13.5px; font-weight:600;color:var(--ink-2);margin:0} .tgl input{position:absolute;opacity:0;width:0;height:0} .tgl .track{width:38px;height:21px;border-radius:99px;background:#cbd5e1;position:relative; flex:0 0 38px;transition:background .15s} .tgl .track::after{content:"";position:absolute;top:2px;left:2px;width:17px;height:17px; border-radius:99px;background:#fff;transition:transform .15s; box-shadow:0 1px 3px rgba(0,0,0,.25)} .tgl input:checked + .track{background:var(--pri)} .tgl input:checked + .track::after{transform:translateX(17px)} .tgl input:disabled + .track{opacity:.5} @media (prefers-color-scheme:dark){.tgl .track{background:#334155}} /* ══════════ Lưới biểu mẫu hai cột ══════════ */ .fgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 20px} .fgrid .full{grid-column:1 / -1} .ro{background:var(--bg);color:var(--mute);font-weight:600} @media(max-width:1250px){.fgrid{grid-template-columns:1fr}} /* ══════════════════════════════════════════════════════════ THƯ VIỆN ẢNH Dùng chung cho trang Thư viện ảnh và khung chọn ảnh trong bài viết. ══════════════════════════════════════════════════════════ */ /* Nút tải lên: vẽ ra mặc định rất xấu và không đổi kiểu được, nên giấu nó đi rồi bọc trong