/* ============================================================================
   COCKPIT DESIGN SYSTEM v0 — token + component dùng chung cho cockpit nội bộ.
   Tài liệu: COCKPIT_DESIGN.md (token · 2 khuôn · component · cách dùng · migrate).
   ----------------------------------------------------------------------------
   v0 = PILOT màn 🏗️ Dự án: HIỆN scope dưới #viewProjects, class pj-*, token --pj-*.
   KHI migrate màn #2 (Sản phẩm/Media): nâng scope #viewProjects → .ck-screen +
   đổi pj-→ck- (mechanical) để dùng lại nhiều màn. Xem COCKPIT_DESIGN.md §Migrate.
   Giữ thương hiệu website: cam #F2541B + Archivo/Be Vietnam Pro. KHÔNG đụng styles.css.
   ============================================================================ */
#viewProjects{--pj-accent:#F2541B;--pj-accent-hi:#FF6A33;--pj-accent-soft:#FFE8DC;--pj-ink:#14181C;--pj-bg:#EEF1F4;--pj-card:#FFFFFF;--pj-line:#E2E6EA;--pj-line2:#D2D8DE;--pj-text:#14181C;--pj-muted:#69727C;--pj-muted2:#97A0AA;--pj-ok:#0E9F6E;--pj-ok-bg:#E6F6EF;--pj-danger:#E02424;--pj-danger-bg:#FDECEC;--pj-warn:#B7791F;--pj-warn-bg:#FEF3D7;--pj-r-sm:5px;--pj-r-md:8px;--pj-r-lg:12px;--pj-fd:'Archivo',system-ui,sans-serif;--pj-fb:'Be Vietnam Pro',system-ui,sans-serif;--pj-shadow:0 6px 22px rgba(20,24,28,.10);--pj-shadow-sm:0 2px 8px rgba(20,24,28,.07);font-family:var(--pj-fb);color:var(--pj-text)}
#viewProjects *{box-sizing:border-box}
#viewProjects .pj-wrap{max-width:1240px;margin:0 auto;padding:18px}
#viewProjects .pj-toolbar{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}
#viewProjects .pj-toolbar h1{font-family:var(--pj-fd);font-weight:800;font-size:21px;margin:0}
#viewProjects .pj-toolbar h1 .c{color:var(--pj-muted);font-weight:600;font-size:15px}
#viewProjects .pj-search{display:flex;align-items:center;gap:8px;background:var(--pj-card);border:1px solid var(--pj-line);border-radius:var(--pj-r-md);padding:0 12px;height:38px;min-width:220px}
#viewProjects .pj-search input{border:none;background:none;outline:none;width:100%;font-size:14px;color:var(--pj-text)}
#viewProjects .pj-chips{display:flex;gap:6px}
#viewProjects .pj-chip{border:1px solid var(--pj-line);background:var(--pj-card);color:var(--pj-muted);font-size:12.5px;font-weight:600;padding:6px 13px;border-radius:20px;cursor:pointer}
#viewProjects .pj-chip.on{background:var(--pj-ink);color:#fff;border-color:var(--pj-ink)}
#viewProjects .pj-spacer{flex:1}
#viewProjects .pj-seg{display:inline-flex;border:1px solid var(--pj-line);border-radius:var(--pj-r-md);overflow:hidden;height:38px}
#viewProjects .pj-seg button{border:none;background:var(--pj-card);color:var(--pj-muted);font-weight:600;font-size:12.5px;padding:0 13px;cursor:pointer}
#viewProjects .pj-seg button+button{border-left:1px solid var(--pj-line)}
#viewProjects .pj-seg button.on{background:var(--pj-ink);color:#fff}
#viewProjects .pj-btn{border:1px solid var(--pj-line2);background:var(--pj-card);color:var(--pj-text);font-weight:600;font-size:13.5px;height:38px;padding:0 15px;border-radius:var(--pj-r-md);display:inline-flex;align-items:center;gap:7px;cursor:pointer}
#viewProjects .pj-btn:hover{background:var(--pj-bg)}
#viewProjects .pj-btn-primary{background:var(--pj-accent);border-color:var(--pj-accent);color:#fff}
#viewProjects .pj-btn-primary:hover{background:var(--pj-accent-hi)}
#viewProjects .pj-btn-ok{background:var(--pj-ok);border-color:var(--pj-ok);color:#fff}
#viewProjects .pj-btn-danger{color:var(--pj-danger);border-color:#F3C0C0}
#viewProjects .pj-btn-danger:hover{background:var(--pj-danger-bg)}
#viewProjects .pj-cardgrid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(380px,1fr))}
#viewProjects .pj-cardgrid.pj-sz-s{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
#viewProjects .pj-cardgrid.pj-sz-m{grid-template-columns:repeat(auto-fill,minmax(380px,1fr))}
#viewProjects .pj-cardgrid.pj-sz-l{grid-template-columns:repeat(auto-fill,minmax(560px,1fr))}
#viewProjects .pj-card{background:var(--pj-card);border:1px solid var(--pj-line);border-radius:var(--pj-r-md);overflow:hidden;box-shadow:var(--pj-shadow-sm);cursor:pointer;transition:transform .14s,box-shadow .14s;display:flex;flex-direction:row;align-items:stretch;height:96px}
#viewProjects .pj-card:hover{transform:translateY(-2px);box-shadow:var(--pj-shadow)}
#viewProjects .pj-cover{width:142px;flex:none;background:#E7EBEF center/cover;position:relative}
#viewProjects .pj-cover img{width:100%;height:100%;object-fit:cover;display:block}
#viewProjects .pj-cover .pj-ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#A8B2BC;font-size:12px}
#viewProjects .pj-edov{position:absolute;inset:0;background:rgba(20,24,28,.42);color:#fff;font-weight:700;font-size:12px;display:flex;align-items:center;justify-content:center;gap:5px;opacity:0;transition:opacity .15s}
#viewProjects .pj-card:hover .pj-edov{opacity:1}
#viewProjects .pj-photn{position:absolute;bottom:6px;right:6px;background:rgba(20,24,28,.6);color:#fff;font-size:10px;font-weight:600;padding:1px 7px;border-radius:20px}
#viewProjects .pj-pb{flex:1;min-width:0;padding:10px 14px;display:flex;flex-direction:column;justify-content:center;gap:3px}
#viewProjects .pj-loc{font-size:10px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--pj-accent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#viewProjects .pj-nm{font-family:var(--pj-fd);font-weight:700;font-size:14.5px;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#viewProjects .pj-cmeta{display:flex;align-items:center;gap:9px;font-size:11px;color:var(--pj-muted);margin-top:2px;white-space:nowrap;overflow:hidden}
#viewProjects .pj-pill{font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px;display:inline-flex;align-items:center;gap:4px;line-height:1}
#viewProjects .pj-pill.draft{background:#EEF1F4;color:var(--pj-muted)}
#viewProjects .pj-pill.pub{background:var(--pj-ok-bg);color:var(--pj-ok)}
#viewProjects .pj-newcard{border:2px dashed var(--pj-line2);background:var(--pj-card);border-radius:var(--pj-r-md);display:flex;align-items:center;justify-content:center;gap:8px;color:var(--pj-accent);font-weight:700;font-size:13px;height:96px;cursor:pointer}
#viewProjects .pj-newcard:hover{background:var(--pj-accent-soft);border-color:var(--pj-accent)}
#viewProjects .pj-newcard .pl{font-size:22px}
#viewProjects .pj-edhd{background:var(--pj-card);border-bottom:1px solid var(--pj-line);position:sticky;top:0;z-index:6}
#viewProjects .pj-edhd-in{max-width:1240px;margin:0 auto;padding:11px 18px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
#viewProjects .pj-back{border:none;background:var(--pj-bg);color:var(--pj-text);font-weight:600;height:38px;padding:0 13px;border-radius:var(--pj-r-md);cursor:pointer;display:inline-flex;align-items:center;gap:6px}
#viewProjects .pj-back:hover{background:var(--pj-line)}
#viewProjects .pj-edtitle{font-family:var(--pj-fd);font-weight:800;font-size:18px;min-width:140px}
#viewProjects .pj-acts{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
#viewProjects .pj-edcols{display:grid;grid-template-columns:1.25fr 1fr;gap:20px;align-items:start;margin-top:6px}
#viewProjects .pj-panel{background:var(--pj-card);border:1px solid var(--pj-line);border-radius:var(--pj-r-lg);box-shadow:var(--pj-shadow-sm);padding:20px}
#viewProjects .pj-rcol{position:sticky;top:74px;display:flex;flex-direction:column;gap:16px}
#viewProjects .pj-statusline{font-size:12.5px;margin-bottom:18px}
#viewProjects .pj-statusline .ok{color:var(--pj-ok);margin-left:8px}
#viewProjects .pj-statusline span:not(.ok):not(.pj-pill){color:var(--pj-muted);margin-left:8px}
#viewProjects .pj-fsec{margin-bottom:26px}
#viewProjects .pj-fsec:last-child{margin-bottom:0}
#viewProjects .pj-fsec-h{font-family:var(--pj-fd);font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--pj-muted);margin:0 0 12px;display:flex;align-items:center;gap:8px}
#viewProjects .pj-fsec-h::after{content:"";flex:1;height:1px;background:var(--pj-line)}
#viewProjects .pj-fgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
#viewProjects .pj-f{display:flex;flex-direction:column;gap:6px}
#viewProjects .pj-f.full{grid-column:1/-1}
#viewProjects .pj-f label{font-size:12.5px;font-weight:600}
#viewProjects .pj-f label .req{color:var(--pj-danger)}
#viewProjects .pj-f label .hint{font-size:11.5px;color:var(--pj-muted2);font-weight:400}
#viewProjects .pj-ctl{border:1px solid var(--pj-line2);background:var(--pj-card);border-radius:var(--pj-r-md);padding:10px 12px;outline:none;width:100%;font-size:14px;color:var(--pj-text);transition:border-color .15s,box-shadow .15s}
#viewProjects .pj-ctl:focus{border-color:var(--pj-accent);box-shadow:0 0 0 3px var(--pj-accent-soft)}
#viewProjects textarea.pj-ctl{resize:vertical;line-height:1.6;font-family:var(--pj-fb)}
#viewProjects .pj-ctl[readonly]{background:var(--pj-bg);color:var(--pj-muted)}
#viewProjects .pj-slug{display:flex;align-items:center;gap:8px}
#viewProjects .pj-slug .pre{color:var(--pj-muted2);font-size:13px;white-space:nowrap}
#viewProjects .pj-note{background:#FAFBFC;border:1px dashed var(--pj-line2);border-radius:var(--pj-r-md);padding:10px 13px;font-size:12.5px;color:var(--pj-muted);margin-bottom:8px}
#viewProjects .pj-note b{color:var(--pj-text)}
#viewProjects .pj-eqrow{display:flex;gap:8px;align-items:center;margin-bottom:8px}
#viewProjects .pj-eqrow .pj-ctl{flex:1}
#viewProjects .pj-eqsku{border:1px solid var(--pj-line2);background:var(--pj-bg);border-radius:var(--pj-r-md);height:42px;padding:0 12px;font-weight:600;font-size:13px;color:var(--pj-text);display:inline-flex;align-items:center;gap:7px;white-space:nowrap;cursor:pointer}
#viewProjects .pj-eqsku.has{background:var(--pj-accent-soft);border-color:#F6C7B2;color:var(--pj-ink)}
#viewProjects .pj-eqdel{border:1px solid var(--pj-line);background:var(--pj-card);color:var(--pj-muted);width:42px;height:42px;border-radius:var(--pj-r-md);flex:none;font-size:16px;cursor:pointer}
#viewProjects .pj-eqdel:hover{background:var(--pj-danger-bg);color:var(--pj-danger);border-color:#F3C0C0}
#viewProjects .pj-addbtn{border:1px dashed var(--pj-line2);background:var(--pj-card);color:var(--pj-accent);font-weight:700;font-size:13px;border-radius:var(--pj-r-md);height:40px;padding:0 14px;display:inline-flex;align-items:center;gap:6px;cursor:pointer}
#viewProjects .pj-addbtn:hover{background:var(--pj-accent-soft);border-color:var(--pj-accent)}
#viewProjects .pj-photohd{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
#viewProjects .pj-photohd .t{font-family:var(--pj-fd);font-weight:700;font-size:14px}
#viewProjects .pj-photohd .hint{font-size:11.5px;color:var(--pj-muted2)}
#viewProjects .pj-pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
#viewProjects .pj-pimg{aspect-ratio:1;border-radius:var(--pj-r-md);background:#E7EBEF center/cover;position:relative;overflow:hidden;border:1px solid var(--pj-line)}
#viewProjects .pj-pimg img{width:100%;height:100%;object-fit:cover}
#viewProjects .pj-pimg.cover{outline:2px solid var(--pj-accent);outline-offset:-2px}
#viewProjects .pj-pimg .star{position:absolute;top:5px;left:5px;background:var(--pj-accent);color:#fff;font-size:10px;font-weight:700;padding:2px 7px;border-radius:20px}
#viewProjects .pj-pimg .pj-itools{position:absolute;top:5px;right:5px;display:flex;gap:4px;opacity:0;transition:opacity .15s}
#viewProjects .pj-pimg:hover .pj-itools{opacity:1}
#viewProjects .pj-it{border:none;width:24px;height:24px;border-radius:6px;background:rgba(20,24,28,.72);color:#fff;font-size:12px;cursor:pointer;display:flex;align-items:center;justify-content:center}
#viewProjects .pj-it:hover{background:var(--pj-accent)}
#viewProjects .pj-it.del:hover{background:var(--pj-danger)}
#viewProjects .pj-drop{grid-column:1/-1;border:2px dashed var(--pj-line2);border-radius:var(--pj-r-md);background:var(--pj-bg);padding:16px;text-align:center;color:var(--pj-muted);font-size:13px;display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;transition:border-color .15s,background .15s}
#viewProjects .pj-drop:hover{border-color:var(--pj-accent);color:var(--pj-accent)}
#viewProjects .pj-drop.drag{border-color:var(--pj-accent);background:var(--pj-accent-soft)}
#viewProjects .pj-drop .big{font-size:22px}
#viewProjects .pj-drop .hint2{font-size:10.5px;color:var(--pj-muted2);margin-top:2px}
#viewProjects .pj-photonote{margin-top:10px;font-size:12px;color:var(--pj-muted);background:var(--pj-warn-bg);border-radius:var(--pj-r-sm);padding:8px 10px}
#viewProjects .pj-pvlabel{font-size:11.5px;color:var(--pj-muted);margin-bottom:8px}
#viewProjects .pj-prevcard{border:1px solid var(--pj-line);border-radius:var(--pj-r-md);overflow:hidden;background:var(--pj-ink);color:#fff}
#viewProjects .pj-prevcard .pv-img{aspect-ratio:16/9;background:#222 center/cover}
#viewProjects .pj-prevcard .pv-img img{width:100%;height:100%;object-fit:cover}
#viewProjects .pj-prevcard .pv-b{padding:12px 14px}
#viewProjects .pj-prevcard .pv-loc{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--pj-accent-hi)}
#viewProjects .pj-prevcard .pv-nm{font-family:var(--pj-fd);font-weight:800;font-size:16px;margin:3px 0 6px;line-height:1.2}
#viewProjects .pj-prevcard .pv-meta{font-size:11px;color:#9AA6B2}
#viewProjects .pj-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:70px 24px;color:var(--pj-muted)}
#viewProjects .pj-empty .pj-ebig{font-size:42px;margin-bottom:10px;opacity:.7}
#viewProjects .pj-empty h3{font-family:var(--pj-fd);margin:0 0 6px;color:var(--pj-text)}
#viewProjects .pj-spin{width:30px;height:30px;border:3px solid var(--pj-line);border-top-color:var(--pj-accent);border-radius:50%;animation:pjspin .8s linear infinite;margin-bottom:10px}
@keyframes pjspin{to{transform:rotate(360deg)}}
#viewProjects .pj-pickmask{position:fixed;inset:0;background:rgba(10,14,18,.5);opacity:0;visibility:hidden;transition:opacity .15s;z-index:150}
#viewProjects .pj-pickmask.open{opacity:1;visibility:visible}
#viewProjects .pj-pickbox{position:fixed;top:50%;left:50%;transform:translate(-50%,-46%);width:min(560px,92vw);max-height:80vh;background:var(--pj-card);border-radius:var(--pj-r-lg);box-shadow:0 20px 60px rgba(0,0,0,.3);opacity:0;visibility:hidden;transition:.15s;z-index:151;display:flex;flex-direction:column;overflow:hidden}
#viewProjects .pj-pickbox.open{opacity:1;visibility:visible;transform:translate(-50%,-50%)}
#viewProjects .pj-pkhd{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--pj-line);font-size:15px}
#viewProjects .pj-pkx{border:none;background:var(--pj-bg);width:30px;height:30px;border-radius:50%;cursor:pointer;color:var(--pj-muted);font-size:14px}
#viewProjects .pj-pksearch{display:flex;align-items:center;gap:8px;margin:12px 16px;background:var(--pj-bg);border:1px solid var(--pj-line);border-radius:var(--pj-r-md);padding:0 12px;height:40px}
#viewProjects .pj-pksearch input{border:none;background:none;outline:none;width:100%;font-size:14px}
#viewProjects .pj-pklist{overflow:auto;padding:0 8px 12px}
#viewProjects .pj-pkrow{display:flex;align-items:center;gap:11px;padding:8px;border-radius:var(--pj-r-md);cursor:pointer}
#viewProjects .pj-pkrow:hover{background:var(--pj-bg)}
#viewProjects .pj-pkthumb{width:46px;height:46px;border-radius:var(--pj-r-sm);background:#E7EBEF center/cover;flex:none;overflow:hidden}
#viewProjects .pj-pkthumb img{width:100%;height:100%;object-fit:cover}
#viewProjects .pj-pkinfo{flex:1;min-width:0}
#viewProjects .pj-pknm{font-weight:600;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#viewProjects .pj-pksku{font-size:11.5px;color:var(--pj-muted);margin-top:2px}
#viewProjects .pj-pkadd{font-size:12px;font-weight:700;color:var(--pj-accent);background:var(--pj-accent-soft);padding:4px 10px;border-radius:20px;flex:none}
#viewProjects .pj-pkempty{text-align:center;color:var(--pj-muted2);padding:30px 16px;font-size:13px}
#viewProjects .pj-toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);background:var(--pj-ink);color:#fff;font-size:13.5px;font-weight:500;padding:11px 18px;border-radius:var(--pj-r-md);box-shadow:var(--pj-shadow);opacity:0;visibility:hidden;transition:.2s;z-index:200}
#viewProjects .pj-toast.show{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
#viewProjects .pj-toast.ok{background:#0E7A55}
#viewProjects .pj-toast.err{background:#B91C1C}
#viewProjects .pj-toast.warn{background:#92660F}
#viewProjects .pj-pager{display:flex;justify-content:center;gap:6px;margin-top:18px;flex-wrap:wrap}
#viewProjects .pj-pgbtn{min-width:34px;height:34px;border:1px solid var(--pj-line);background:var(--pj-card);color:var(--pj-text);font-weight:600;font-size:13px;border-radius:var(--pj-r-sm);cursor:pointer;padding:0 8px}
#viewProjects .pj-pgbtn:hover:not(:disabled):not(.on){background:var(--pj-bg)}
#viewProjects .pj-pgbtn.on{background:var(--pj-accent);border-color:var(--pj-accent);color:#fff}
#viewProjects .pj-pgbtn:disabled{opacity:.4;cursor:default}
@media(max-width:900px){#viewProjects .pj-edcols{grid-template-columns:1fr}#viewProjects .pj-rcol{position:static}#viewProjects .pj-fgrid{grid-template-columns:1fr}#viewProjects .pj-cardgrid,#viewProjects .pj-cardgrid.pj-sz-s,#viewProjects .pj-cardgrid.pj-sz-m,#viewProjects .pj-cardgrid.pj-sz-l{grid-template-columns:1fr}}