/* =========================================================================
   modern.css — Giao diện admin mới (Hướng A: thay áo, giữ nguyên backend)
   Namespace toàn bộ bằng tiền tố "uni-" để không phá vỡ default.css /
   global.css / content.css hiện có (vẫn đang được các skin_*.php khác
   dùng cho tới khi được migrate).
   ========================================================================= */

:root{
  --uni-bg:#f4f6f9;
  --uni-surface:#ffffff;
  --uni-border:#e5e9f0;
  --uni-text:#1a2233;
  --uni-text-muted:#6b7690;

  --uni-sidebar-bg:#0f1b3d;
  --uni-sidebar-bg-hover:#16264f;
  --uni-sidebar-text:#aab4d4;
  --uni-sidebar-text-active:#ffffff;

  --uni-primary:#2f5fe0;
  --uni-primary-dark:#2249b8;
  --uni-primary-soft:#e8eefd;

  --uni-radius:10px;
  --uni-shadow:0 1px 2px rgba(20,30,60,.04), 0 4px 16px rgba(20,30,60,.05);
}

.uni-app{
  display:flex;
  min-height:100vh;
  font-family:'Inter',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:var(--uni-text);
  background:var(--uni-bg);
}
.uni-app *{box-sizing:border-box;}
.uni-app a{text-decoration:none;color:inherit;}

/* ---------- Sidebar ---------- */
.uni-sidebar{
  width:240px;
  flex-shrink:0;
  background:var(--uni-sidebar-bg);
  color:var(--uni-sidebar-text);
  display:flex;
  flex-direction:column;
  position:sticky;
  top:0;
  height:100vh;
  overflow-y:auto;
  z-index:30;
}
.uni-sidebar-brand{
  display:flex;
  align-items:center;
  gap:10px;
  padding:18px 16px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.uni-logo{
  width:34px;height:34px;border-radius:9px;flex-shrink:0;
  background:linear-gradient(135deg,var(--uni-primary),#7fa3ff);
  display:flex;align-items:center;justify-content:center;
  font-weight:800;color:#fff;font-size:14px;
}
.uni-brand-text{font-weight:700;color:#fff;font-size:13.5px;line-height:1.3;}
.uni-brand-text small{display:block;font-weight:400;color:var(--uni-sidebar-text);font-size:11px;margin-top:1px;}

.uni-nav{padding:12px 10px 24px;display:flex;flex-direction:column;gap:2px;}
.uni-nav-item{
  display:block;
  padding:9px 13px;
  border-radius:8px;
  font-size:13.5px;
  font-weight:500;
  color:var(--uni-sidebar-text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.uni-nav-item:hover{background:var(--uni-sidebar-bg-hover);color:#fff;}
/* $menu->getClassActive() của hệ thống trả về class "active" khi đang ở mục đó */
.uni-nav-item.active{background:var(--uni-primary);color:#fff;}

/* ---------- Topbar ---------- */
.uni-main{flex:1;min-width:0;display:flex;flex-direction:column;}
.uni-topbar{
  height:60px;flex-shrink:0;
  background:var(--uni-surface);
  border-bottom:1px solid var(--uni-border);
  display:flex;align-items:center;gap:14px;
  padding:0 20px;
  position:sticky;top:0;z-index:20;
}
.uni-burger{
  display:none;background:none;border:none;cursor:pointer;
  color:var(--uni-text-muted);font-size:18px;padding:6px;
}
.uni-page-info{min-width:0;}
.uni-crumb{font-size:11.5px;color:var(--uni-text-muted);}
.uni-page-title{font-size:15px;font-weight:700;display:flex;align-items:center;gap:8px;}
.uni-refresh{color:var(--uni-text-muted);font-size:14px;}
.uni-refresh:hover{color:var(--uni-primary);}

.uni-topbar-right{margin-left:auto;display:flex;align-items:center;gap:6px;}
.uni-icon-btn{
  width:36px;height:36px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  color:var(--uni-text-muted);font-size:16px;
}
.uni-icon-btn:hover{background:var(--uni-bg);color:var(--uni-text);}

.uni-user{display:flex;align-items:center;gap:9px;padding:5px 10px 5px 5px;border-radius:10px;margin-left:4px;}
.uni-user:hover{background:var(--uni-bg);}
.uni-avatar{width:30px;height:30px;border-radius:50%;object-fit:cover;background:var(--uni-primary-soft);}
.uni-user-meta{line-height:1.25;}
.uni-user-name{font-size:12.5px;font-weight:600;}
.uni-user-name b{font-weight:700;}
.uni-logout{font-size:11.5px;color:var(--uni-text-muted);}
.uni-logout:hover{color:var(--uni-primary);}

/* ---------- Content area ---------- */
.uni-content{padding:22px;}

/* ---------- Uploader (thay SWFUpload/Flash) ---------- */
.uni-uploader{
  position:relative;
  display:inline-block;
}
.uni-uploader-input{
  position:absolute;
  inset:0;
  width:100%;height:100%;
  opacity:0;
  cursor:pointer;
}
.uni-uploader-btn{
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 14px;
  border-radius:8px;
  background:var(--uni-primary);
  color:#fff;
  font-size:12.5px;
  font-weight:600;
  cursor:pointer;
  white-space:nowrap;
}
.uni-uploader:hover .uni-uploader-btn{background:var(--uni-primary-dark);}
.uni-uploader-icon{font-size:13px;}
.uni-uploader-hint{font-weight:400;opacity:.85;font-size:11px;}

.uni-upload-row{
  display:flex;align-items:center;gap:10px;
  padding:7px 10px;
  margin-top:6px;
  background:var(--uni-surface);
  border:1px solid var(--uni-border);
  border-radius:8px;
  font-size:12px;
}
.uni-upload-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--uni-text);}
.uni-upload-bar{width:110px;height:6px;border-radius:4px;background:var(--uni-bg);overflow:hidden;flex-shrink:0;}
.uni-upload-bar-fill{height:100%;background:var(--uni-primary);transition:width .15s ease;}
.uni-upload-status{width:52px;text-align:right;color:var(--uni-text-muted);flex-shrink:0;}
.uni-upload-row.done .uni-upload-bar-fill{background:#17a673;}
.uni-upload-row.done .uni-upload-status{color:#17a673;font-weight:600;}
.uni-upload-row.error .uni-upload-bar-fill{background:#e0466a;width:100% !important;}
.uni-upload-row.error .uni-upload-status{color:#e0466a;font-weight:600;}

/* ---------- Responsive: sidebar thu gọn trên mobile/tablet ---------- */
@media (max-width: 980px){
  .uni-sidebar{
    position:fixed;
    left:0;top:0;
    margin-left:-240px;
    transition:margin-left .18s ease;
    box-shadow:0 0 0 9999px rgba(0,0,0,0);
  }
  .uni-sidebar.open{
    margin-left:0;
    box-shadow:0 0 40px rgba(0,0,0,.3);
  }
  .uni-burger{display:flex;align-items:center;}
  .uni-content{padding:14px;}
}
/* ---------- Icon SVG dùng cho Dashboard (thẻ KPI + Thao tác nhanh) ---------- */
.uni-ic{display:inline-block;background-color:currentColor;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;}
.uni-ic-file{-webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTE0IDJINmEyIDIgMCAwIDAtMiAydjE2YTIgMiAwIDAgMCAyIDJoMTJhMiAyIDAgMCAwIDItMlY4WiIvPjxwb2x5bGluZSBwb2ludHM9IjE0IDIgMTQgOCAyMCA4Ii8+PGxpbmUgeDE9IjE2IiB5MT0iMTMiIHgyPSI4IiB5Mj0iMTMiLz48bGluZSB4MT0iMTYiIHkxPSIxNyIgeDI9IjgiIHkyPSIxNyIvPjwvc3ZnPg==");mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTE0IDJINmEyIDIgMCAwIDAtMiAydjE2YTIgMiAwIDAgMCAyIDJoMTJhMiAyIDAgMCAwIDItMlY4WiIvPjxwb2x5bGluZSBwb2ludHM9IjE0IDIgMTQgOCAyMCA4Ii8+PGxpbmUgeDE9IjE2IiB5MT0iMTMiIHgyPSI4IiB5Mj0iMTMiLz48bGluZSB4MT0iMTYiIHkxPSIxNyIgeDI9IjgiIHkyPSIxNyIvPjwvc3ZnPg==");}
.uni-ic-users{-webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTE3IDIxdi0yYTQgNCAwIDAgMC00LTRINWE0IDQgMCAwIDAtNCA0djIiLz48Y2lyY2xlIGN4PSI5IiBjeT0iNyIgcj0iNCIvPjxwYXRoIGQ9Ik0yMyAyMXYtMmE0IDQgMCAwIDAtMy0zLjg3Ii8+PHBhdGggZD0iTTE2IDMuMTNhNCA0IDAgMCAxIDAgNy43NSIvPjwvc3ZnPg==");mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTE3IDIxdi0yYTQgNCAwIDAgMC00LTRINWE0IDQgMCAwIDAtNCA0djIiLz48Y2lyY2xlIGN4PSI5IiBjeT0iNyIgcj0iNCIvPjxwYXRoIGQ9Ik0yMyAyMXYtMmE0IDQgMCAwIDAtMy0zLjg3Ii8+PHBhdGggZD0iTTE2IDMuMTNhNCA0IDAgMCAxIDAgNy43NSIvPjwvc3ZnPg==");}
.uni-ic-activity{-webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PGNpcmNsZSBjeD0iMTIiIGN5PSIxMiIgcj0iOCIvPjxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjMiLz48L3N2Zz4=");mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PGNpcmNsZSBjeD0iMTIiIGN5PSIxMiIgcj0iOCIvPjxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjMiLz48L3N2Zz4=");}
.uni-ic-mail{-webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTQgNGgxNmMxLjEgMCAyIC45IDIgMnYxMmMwIDEuMS0uOSAyLTIgMkg0Yy0xLjEgMC0yLS45LTItMlY2YzAtMS4xLjktMiAyLTJaIi8+PHBvbHlsaW5lIHBvaW50cz0iMjIgNiAxMiAxMyAyIDYiLz48L3N2Zz4=");mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTQgNGgxNmMxLjEgMCAyIC45IDIgMnYxMmMwIDEuMS0uOSAyLTIgMkg0Yy0xLjEgMC0yLS45LTItMlY2YzAtMS4xLjktMiAyLTJaIi8+PHBvbHlsaW5lIHBvaW50cz0iMjIgNiAxMiAxMyAyIDYiLz48L3N2Zz4=");}
.uni-ic-image{-webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHJlY3QgeD0iMyIgeT0iMyIgd2lkdGg9IjE4IiBoZWlnaHQ9IjE4IiByeD0iMiIvPjxjaXJjbGUgY3g9IjguNSIgY3k9IjguNSIgcj0iMS41Ii8+PHBvbHlsaW5lIHBvaW50cz0iMjEgMTUgMTYgMTAgNSAyMSIvPjwvc3ZnPg==");mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHJlY3QgeD0iMyIgeT0iMyIgd2lkdGg9IjE4IiBoZWlnaHQ9IjE4IiByeD0iMiIvPjxjaXJjbGUgY3g9IjguNSIgY3k9IjguNSIgcj0iMS41Ii8+PHBvbHlsaW5lIHBvaW50cz0iMjEgMTUgMTYgMTAgNSAyMSIvPjwvc3ZnPg==");}
.uni-ic-list{-webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PGxpbmUgeDE9IjgiIHkxPSI2IiB4Mj0iMjEiIHkyPSI2Ii8+PGxpbmUgeDE9IjgiIHkxPSIxMiIgeDI9IjIxIiB5Mj0iMTIiLz48bGluZSB4MT0iOCIgeTE9IjE4IiB4Mj0iMjEiIHkyPSIxOCIvPjxsaW5lIHgxPSIzIiB5MT0iNiIgeDI9IjMuMDEiIHkyPSI2Ii8+PGxpbmUgeDE9IjMiIHkxPSIxMiIgeDI9IjMuMDEiIHkyPSIxMiIvPjxsaW5lIHgxPSIzIiB5MT0iMTgiIHgyPSIzLjAxIiB5Mj0iMTgiLz48L3N2Zz4=");mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PGxpbmUgeDE9IjgiIHkxPSI2IiB4Mj0iMjEiIHkyPSI2Ii8+PGxpbmUgeDE9IjgiIHkxPSIxMiIgeDI9IjIxIiB5Mj0iMTIiLz48bGluZSB4MT0iOCIgeTE9IjE4IiB4Mj0iMjEiIHkyPSIxOCIvPjxsaW5lIHgxPSIzIiB5MT0iNiIgeDI9IjMuMDEiIHkyPSI2Ii8+PGxpbmUgeDE9IjMiIHkxPSIxMiIgeDI9IjMuMDEiIHkyPSIxMiIvPjxsaW5lIHgxPSIzIiB5MT0iMTgiIHgyPSIzLjAxIiB5Mj0iMTgiLz48L3N2Zz4=");}
.uni-ic-sliders{-webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PGxpbmUgeDE9IjQiIHkxPSIyMSIgeDI9IjQiIHkyPSIxNCIvPjxsaW5lIHgxPSI0IiB5MT0iMTAiIHgyPSI0IiB5Mj0iMyIvPjxsaW5lIHgxPSIxMiIgeTE9IjIxIiB4Mj0iMTIiIHkyPSIxMiIvPjxsaW5lIHgxPSIxMiIgeTE9IjgiIHgyPSIxMiIgeTI9IjMiLz48bGluZSB4MT0iMjAiIHkxPSIyMSIgeDI9IjIwIiB5Mj0iMTYiLz48bGluZSB4MT0iMjAiIHkxPSIxMiIgeDI9IjIwIiB5Mj0iMyIvPjxsaW5lIHgxPSIxIiB5MT0iMTQiIHgyPSI3IiB5Mj0iMTQiLz48bGluZSB4MT0iOSIgeTE9IjgiIHgyPSIxNSIgeTI9IjgiLz48bGluZSB4MT0iMTciIHkxPSIxNiIgeDI9IjIzIiB5Mj0iMTYiLz48L3N2Zz4=");mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PGxpbmUgeDE9IjQiIHkxPSIyMSIgeDI9IjQiIHkyPSIxNCIvPjxsaW5lIHgxPSI0IiB5MT0iMTAiIHgyPSI0IiB5Mj0iMyIvPjxsaW5lIHgxPSIxMiIgeTE9IjIxIiB4Mj0iMTIiIHkyPSIxMiIvPjxsaW5lIHgxPSIxMiIgeTE9IjgiIHgyPSIxMiIgeTI9IjMiLz48bGluZSB4MT0iMjAiIHkxPSIyMSIgeDI9IjIwIiB5Mj0iMTYiLz48bGluZSB4MT0iMjAiIHkxPSIxMiIgeDI9IjIwIiB5Mj0iMyIvPjxsaW5lIHgxPSIxIiB5MT0iMTQiIHgyPSI3IiB5Mj0iMTQiLz48bGluZSB4MT0iOSIgeTE9IjgiIHgyPSIxNSIgeTI9IjgiLz48bGluZSB4MT0iMTciIHkxPSIxNiIgeDI9IjIzIiB5Mj0iMTYiLz48L3N2Zz4=");}
.uni-ic-shield{-webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTEyIDNsNyAzdjZjMCA1LTMuNSA4LTcgOS0zLjUtMS03LTQtNy05VjZaIi8+PC9zdmc+");mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTEyIDNsNyAzdjZjMCA1LTMuNSA4LTcgOS0zLjUtMS03LTQtNy05VjZaIi8+PC9zdmc+");}

/* =========================================================================
   Dashboard (skin_home.php / MainHome) — Giai đoạn 1
   Thẻ KPI thật (thay placeholder "Welcome message here!" cũ), khối Thao
   tác nhanh (link thẳng, không phụ thuộc JS của trang khác), bảng Đăng
   nhập gần đây, badge trạng thái. Class có tiền tố "uni-" như phần khung,
   chỉ dùng trong skin_home.php nên không đụng tới các module khác.
   ========================================================================= */

.uni-stat-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:16px;
  margin-bottom:18px;
}
.uni-stat-card{
  display:flex;
  align-items:center;
  gap:14px;
  background:var(--uni-surface);
  border:1px solid var(--uni-border);
  border-radius:var(--uni-radius);
  box-shadow:var(--uni-shadow);
  padding:18px 18px;
}
.uni-stat-icon{
  flex-shrink:0;
  width:44px;height:44px;
  border-radius:11px;
  display:flex;align-items:center;justify-content:center;
}
.uni-stat-icon .uni-ic{width:21px;height:21px;}
.uni-stat-icon-blue{background:#e8eefd;color:#2f5fe0;}
.uni-stat-icon-green{background:#e4f7ee;color:#17a673;}
.uni-stat-icon-amber{background:#fef3e2;color:#d98a10;}
.uni-stat-icon-purple{background:#f2e9fd;color:#7c3fd6;}
.uni-stat-info{min-width:0;}
.uni-stat-value{font-size:22px;font-weight:800;line-height:1.2;color:var(--uni-text);}
.uni-stat-label{font-size:12.5px;font-weight:600;color:var(--uni-text-muted);margin-top:2px;}
.uni-stat-sub{font-weight:400;opacity:.85;}

.uni-dash-grid{
  display:grid;
  grid-template-columns:minmax(0,2fr) minmax(0,1fr);
  gap:18px;
  align-items:start;
}
.uni-dash-col{display:flex;flex-direction:column;gap:18px;min-width:0;}

.uni-quick-actions{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:10px;
  padding:18px 20px;
}
.uni-quick-action{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border:1px solid var(--uni-border);
  border-radius:9px;
  font-size:12.5px;
  font-weight:600;
  color:var(--uni-text);
}
.uni-quick-action:hover{
  border-color:var(--uni-primary);
  background:var(--uni-primary-soft);
  color:var(--uni-primary);
}
.uni-quick-action-icon{
  flex-shrink:0;
  width:30px;height:30px;
  border-radius:8px;
  background:var(--uni-bg);
  display:flex;align-items:center;justify-content:center;
  color:var(--uni-text-muted);
}
.uni-quick-action-icon .uni-ic{width:15px;height:15px;}
.uni-quick-action:hover .uni-quick-action-icon{background:#fff;color:var(--uni-primary);}

.uni-badge{
  display:inline-flex;
  align-items:center;
  padding:3px 10px;
  border-radius:999px;
  font-size:11.5px;
  font-weight:700;
}
.uni-badge-green{background:#e4f7ee;color:#17a673;}
.uni-badge-red{background:#fdeaef;color:#e0466a;}

@media (max-width: 1180px){
  .uni-stat-grid{grid-template-columns:repeat(2, minmax(0,1fr));}
  .uni-dash-grid{grid-template-columns:1fr;}
  .uni-quick-actions{grid-template-columns:repeat(2, minmax(0,1fr));}
}
@media (max-width: 640px){
  .uni-stat-grid{grid-template-columns:1fr;}
  .uni-quick-actions{grid-template-columns:1fr;}
}

/* =========================================================================
   Toast notifications (Giai đoạn 2) — thay alert()/confirm() mặc định của
   trình duyệt ở những chỗ chỉ cần báo tin, không cần chờ người dùng bấm OK.
   Gắn bởi javascripts/univinet/uni.toast.js, nạp toàn cục qua GlobalLoad.php
   nên dùng được ở mọi module, không riêng gì admins.
   ========================================================================= */
.uni-toast-container{
  position:fixed;
  top:20px;right:20px;
  z-index:99999;
  display:flex;
  flex-direction:column;
  gap:10px;
  max-width:360px;
  width:calc(100% - 40px);
  pointer-events:none;
}
.uni-toast{
  pointer-events:auto;
  display:flex;
  align-items:flex-start;
  gap:10px;
  background:var(--uni-surface);
  border:1px solid var(--uni-border);
  border-left:4px solid var(--uni-text-muted);
  border-radius:9px;
  box-shadow:0 8px 28px rgba(20,30,60,.16);
  padding:12px 12px 12px 13px;
  font-family:'Inter',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:13px;
  color:var(--uni-text);
  opacity:0;
  transform:translateX(16px);
  transition:opacity .18s ease, transform .18s ease;
}
.uni-toast.show{opacity:1;transform:translateX(0);}
.uni-toast.hide{opacity:0;transform:translateX(16px);}
.uni-toast-icon{
  flex-shrink:0;
  width:19px;height:19px;
  margin-top:1px;
  display:inline-block;
  background-color:currentColor;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;
}
.uni-toast-icon-success{-webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTIyIDExLjA4VjEyYTEwIDEwIDAgMSAxLTUuOTMtOS4xNCIvPjxwb2x5bGluZSBwb2ludHM9IjIyIDQgMTIgMTQuMDEgOSAxMS4wMSIvPjwvc3ZnPg==");mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTIyIDExLjA4VjEyYTEwIDEwIDAgMSAxLTUuOTMtOS4xNCIvPjxwb2x5bGluZSBwb2ludHM9IjIyIDQgMTIgMTQuMDEgOSAxMS4wMSIvPjwvc3ZnPg==");}
.uni-toast-icon-error{-webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PGNpcmNsZSBjeD0iMTIiIGN5PSIxMiIgcj0iMTAiLz48bGluZSB4MT0iMTUiIHkxPSI5IiB4Mj0iOSIgeTI9IjE1Ii8+PGxpbmUgeDE9IjkiIHkxPSI5IiB4Mj0iMTUiIHkyPSIxNSIvPjwvc3ZnPg==");mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PGNpcmNsZSBjeD0iMTIiIGN5PSIxMiIgcj0iMTAiLz48bGluZSB4MT0iMTUiIHkxPSI5IiB4Mj0iOSIgeTI9IjE1Ii8+PGxpbmUgeDE9IjkiIHkxPSI5IiB4Mj0iMTUiIHkyPSIxNSIvPjwvc3ZnPg==");}
.uni-toast-icon-warning{-webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTEwLjI5IDMuODYgMS44MiAxOGEyIDIgMCAwIDAgMS43MSAzaDE2Ljk0YTIgMiAwIDAgMCAxLjcxLTNMMTMuNzEgMy44NmEyIDIgMCAwIDAtMy40MiAwWiIvPjxsaW5lIHgxPSIxMiIgeTE9IjkiIHgyPSIxMiIgeTI9IjEzIi8+PGxpbmUgeDE9IjEyIiB5MT0iMTciIHgyPSIxMi4wMSIgeTI9IjE3Ii8+PC9zdmc+");mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTEwLjI5IDMuODYgMS44MiAxOGEyIDIgMCAwIDAgMS43MSAzaDE2Ljk0YTIgMiAwIDAgMCAxLjcxLTNMMTMuNzEgMy44NmEyIDIgMCAwIDAtMy40MiAwWiIvPjxsaW5lIHgxPSIxMiIgeTE9IjkiIHgyPSIxMiIgeTI9IjEzIi8+PGxpbmUgeDE9IjEyIiB5MT0iMTciIHgyPSIxMi4wMSIgeTI9IjE3Ii8+PC9zdmc+");}
.uni-toast-icon-info{-webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PGNpcmNsZSBjeD0iMTIiIGN5PSIxMiIgcj0iMTAiLz48bGluZSB4MT0iMTIiIHkxPSIxNiIgeDI9IjEyIiB5Mj0iMTIiLz48bGluZSB4MT0iMTIiIHkxPSI4IiB4Mj0iMTIuMDEiIHkyPSI4Ii8+PC9zdmc+");mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PGNpcmNsZSBjeD0iMTIiIGN5PSIxMiIgcj0iMTAiLz48bGluZSB4MT0iMTIiIHkxPSIxNiIgeDI9IjEyIiB5Mj0iMTIiLz48bGluZSB4MT0iMTIiIHkxPSI4IiB4Mj0iMTIuMDEiIHkyPSI4Ii8+PC9zdmc+");}

.uni-toast-success{border-left-color:#17a673;}
.uni-toast-success .uni-toast-icon{color:#17a673;}
.uni-toast-error{border-left-color:#e0466a;}
.uni-toast-error .uni-toast-icon{color:#e0466a;}
.uni-toast-warning{border-left-color:#d98a10;}
.uni-toast-warning .uni-toast-icon{color:#d98a10;}
.uni-toast-info{border-left-color:var(--uni-primary);}
.uni-toast-info .uni-toast-icon{color:var(--uni-primary);}

.uni-toast-msg{flex:1;min-width:0;line-height:1.45;padding-top:1px;word-break:break-word;}
.uni-toast-close{
  flex-shrink:0;
  background:none;border:none;cursor:pointer;
  font-size:16px;line-height:1;
  color:var(--uni-text-muted);
  padding:0 0 0 4px;
  margin-top:-1px;
}
.uni-toast-close:hover{color:var(--uni-text);}

@media (max-width:640px){
  .uni-toast-container{left:12px;right:12px;top:12px;max-width:none;width:auto;}
}

/* =========================================================================
   Trang "Thêm/chỉnh sửa quyền quản trị" (skin_admins.php) — Giai đoạn 2
   Thay 2 hộp <select multiple size=15> kiểu 2011 + bảng checkbox jQuery UI
   thô bằng bộ chọn dạng danh sách bấm-chọn (picker) + danh sách quyền dạng
   switch, cùng ngôn ngữ thiết kế với Dashboard ở Giai đoạn 1. Toàn bộ vẫn
   gọi đúng các endpoint admins/getpermission, admins/savepermission như cũ
   — chỉ đổi lớp áo HTML/CSS/JS ở phía trình duyệt.
   ========================================================================= */
.uni-perm-layout{
  display:grid;
  grid-template-columns:260px minmax(0,1fr);
  gap:18px;
  align-items:start;
}
@media (max-width:900px){
  .uni-perm-layout{grid-template-columns:1fr;}
}

.uni-picker{
  background:var(--uni-surface);
  border:1px solid var(--uni-border);
  border-radius:var(--uni-radius);
  box-shadow:var(--uni-shadow);
  overflow:hidden;
  transition:box-shadow .15s ease;
}
.uni-picker.uni-picker-error{box-shadow:0 0 0 2px #fdeaef inset;border-color:#e0466a;}
.uni-picker-head{
  padding:12px 14px;
  font-size:12.5px;
  font-weight:700;
  color:var(--uni-text);
  border-bottom:1px solid var(--uni-border);
  display:flex;align-items:center;gap:7px;
}
.uni-picker-head .uni-ic{width:14px;height:14px;color:var(--uni-text-muted);}
.uni-picker-list{
  max-height:360px;
  overflow-y:auto;
  padding:6px;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.uni-picker-item{
  padding:9px 10px;
  border-radius:7px;
  font-size:12.5px;
  font-weight:500;
  color:var(--uni-text);
  cursor:pointer;
  user-select:none;
  transition:background .12s ease, color .12s ease;
}
.uni-picker-item:hover{background:var(--uni-bg);}
.uni-picker-item.active{background:var(--uni-primary);color:#fff;font-weight:600;}
.uni-picker-empty{padding:16px 10px;text-align:center;font-size:12px;color:var(--uni-text-muted);}

.uni-perm-actions{padding:12px 14px;border-top:1px solid var(--uni-border);}

.uni-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:9px 16px;
  border:1px solid var(--uni-border);
  border-radius:8px;
  background:var(--uni-surface);
  color:var(--uni-text);
  font-size:12.5px;font-weight:600;
  cursor:pointer;
  transition:background .12s ease, border-color .12s ease, color .12s ease;
}
.uni-btn:hover{border-color:var(--uni-primary);color:var(--uni-primary);}
.uni-btn-primary{background:var(--uni-primary);border-color:var(--uni-primary);color:#fff;width:100%;}
.uni-btn-primary:hover{background:var(--uni-primary-dark);border-color:var(--uni-primary-dark);color:#fff;}
.uni-btn-ghost{background:none;border-color:transparent;color:var(--uni-text-muted);padding:4px 8px;font-size:11.5px;}
.uni-btn-ghost:hover{background:var(--uni-bg);color:var(--uni-text);border-color:transparent;}

.uni-permlist{
  background:var(--uni-surface);
  border:1px solid var(--uni-border);
  border-radius:var(--uni-radius);
  box-shadow:var(--uni-shadow);
  overflow:hidden;
}
.uni-permlist-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 14px;
  border-bottom:1px solid var(--uni-border);
}
.uni-permlist-title{font-size:12.5px;font-weight:700;color:var(--uni-text);}
.uni-permlist-body{
  max-height:360px;
  overflow-y:auto;
  padding:4px 6px;
}
.uni-permlist-item{
  display:flex;align-items:center;gap:10px;
  padding:10px 8px;
  border-radius:7px;
  cursor:pointer;
  font-size:12.5px;
  color:var(--uni-text);
}
.uni-permlist-item:hover{background:var(--uni-bg);}
.uni-permlist-item:not(:last-child){border-bottom:1px solid var(--uni-border);}
.uni-permlist-label{flex:1;min-width:0;}

/* Switch (thay checkbox mặc định trình duyệt) */
.uni-switch-input{position:absolute;opacity:0;width:1px;height:1px;}
.uni-switch{
  flex-shrink:0;
  position:relative;
  width:34px;height:20px;
  border-radius:999px;
  background:#d6dbe6;
  transition:background .15s ease;
}
.uni-switch::after{
  content:"";
  position:absolute;
  top:2px;left:2px;
  width:16px;height:16px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.25);
  transition:transform .15s ease;
}
.uni-switch-input:checked + .uni-switch{background:var(--uni-primary);}
.uni-switch-input:checked + .uni-switch::after{transform:translateX(14px);}
.uni-switch-input:focus-visible + .uni-switch{box-shadow:0 0 0 3px var(--uni-primary-soft);}

.uni-permlist-empty{padding:22px 14px;text-align:center;font-size:12.5px;color:var(--uni-text-muted);}
.uni-permlist-foot{padding:12px 14px;border-top:1px solid var(--uni-border);}

/* =========================================================================
   GIAI ĐOẠN 3 — Form Thêm/Sửa bài viết (skin_pages.php::displayEditPageForm)
   Dùng chung cho mọi module dựa trên "pages" (Tin tức, Dịch vụ, Giới thiệu,
   Đặt lịch khám...). Chỉ đổi lớp áo (HTML/CSS/JS bổ sung) — mọi name/id
   input, mọi action AJAX, mọi <if> điều kiện hệ thống (system key) giữ
   nguyên 100% so với bản gốc để không ảnh hưởng tới cách lưu dữ liệu.
   ========================================================================= */
.uni-editform{
  background:var(--uni-surface);
  border:1px solid var(--uni-border);
  border-radius:var(--uni-radius);
  box-shadow:var(--uni-shadow);
  overflow:hidden;
  max-width:900px;
}
/* QUAN TRỌNG: form này vẫn giữ class "add_form" (để không phải sửa nơi
   khác gọi tới), nhưng #maincontent .add_form{display:grid;
   grid-template-columns:180px minmax(0,1fr);...} ở modern-content.css /
   modern-content1.css (Giai đoạn 1) được thiết kế riêng cho các form kiểu
   bảng cũ (cặp .text-cell/.input-cell hoặc <table><td class="col1/col2">).
   Bố cục mới ở đây tự quản lý layout bằng .uni-field-row/.uni-field (flex)
   nên phải HUỶ grid đó, nếu không toàn bộ nội dung form bị dồn hết vào ô
   lưới đầu tiên rộng 180px (lỗi đã gặp: mọi thứ bị bó hẹp vào 1 cột hẹp
   bên trái, phần còn lại của form bỏ trống). Selector bên dưới có độ ưu
   tiên cao hơn (#maincontent .add_form.uni-editform > #maincontent
   .add_form) nên luôn thắng, không cần !important và không ảnh hưởng tới
   form nào khác vẫn dùng thuần class "add_form".) */
#maincontent .add_form.uni-editform{
  display:block;
  padding:0;
}
.uni-editform-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:16px 20px;
  border-bottom:1px solid var(--uni-border);
}
.uni-editform-title{font-size:15px;font-weight:700;color:var(--uni-text);}
.uni-editform-close{
  display:flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:8px;
  color:var(--uni-text-muted);cursor:pointer;font-size:13px;
  flex-shrink:0;
}
.uni-editform-close:hover{background:var(--uni-bg);color:var(--uni-text);}
.uni-editform-body{padding:20px;display:flex;flex-direction:column;gap:18px;}

.uni-editform-section{
  border:1px solid var(--uni-border);
  border-radius:8px;
  padding:16px;
  background:var(--uni-bg);
}
.uni-editform-section-title{
  font-size:11.5px;font-weight:700;letter-spacing:.02em;
  color:var(--uni-text-muted);text-transform:uppercase;
  margin-bottom:12px;display:block;
}

.uni-field-row{display:flex;gap:14px;flex-wrap:wrap;}
.uni-field{flex:1;min-width:180px;margin-bottom:12px;}
.uni-field:last-child{margin-bottom:0;}
.uni-field-label{display:block;font-size:12.5px;font-weight:600;color:var(--uni-text);margin-bottom:6px;}

.uni-input,.uni-textarea{
  width:100%;
  padding:9px 12px;
  border:1px solid var(--uni-border);
  border-radius:8px;
  background:var(--uni-surface);
  color:var(--uni-text);
  font-size:13px;
  font-family:inherit;
  transition:border-color .12s ease, box-shadow .12s ease;
}
.uni-input:focus,.uni-textarea:focus{outline:none;border-color:var(--uni-primary);box-shadow:0 0 0 3px var(--uni-primary-soft);}
.uni-input.ui-state-error,.uni-textarea.ui-state-error{border-color:#e0466a;box-shadow:0 0 0 3px #fdeaef;}
.uni-textarea{resize:vertical;min-height:110px;}

/* Segmented control (thay 2-3 radio rời rạc kiểu cũ) */
.uni-segmented{display:inline-flex;border:1px solid var(--uni-border);border-radius:8px;overflow:hidden;background:var(--uni-surface);}
.uni-segmented-opt{position:relative;}
.uni-segmented-input{position:absolute;opacity:0;width:1px;height:1px;}
.uni-segmented-label{
  display:flex;align-items:center;
  padding:8px 16px;
  font-size:12.5px;font-weight:600;
  color:var(--uni-text-muted);
  cursor:pointer;
  border-right:1px solid var(--uni-border);
  transition:background .12s ease, color .12s ease;
}
.uni-segmented-opt:last-child .uni-segmented-label{border-right:none;}
.uni-segmented-input:checked + .uni-segmented-label{background:var(--uni-primary);color:#fff;}
.uni-segmented-input:focus-visible + .uni-segmented-label{box-shadow:0 0 0 3px var(--uni-primary-soft) inset;}

/* Dropzone ảnh đại diện */
.uni-dropzone{
  position:relative;
  border:1.5px dashed var(--uni-border);
  border-radius:10px;
  background:var(--uni-surface);
  padding:22px 16px;
  text-align:center;
  transition:border-color .12s ease, background .12s ease;
}
.uni-dropzone.uni-dropzone-drag{border-color:var(--uni-primary);background:var(--uni-primary-soft);}
.uni-dropzone-icon{font-size:22px;color:var(--uni-text-muted);margin-bottom:6px;}
.uni-dropzone-text{font-size:12.5px;color:var(--uni-text-muted);}
.uni-dropzone-text b{color:var(--uni-primary);font-weight:700;}
.uni-dropzone-hint{font-size:11px;color:var(--uni-text-muted);opacity:.85;margin-top:2px;}
.uni-dropzone-preview{margin-top:12px;display:none;}
.uni-dropzone-preview img{max-width:140px;max-height:140px;border-radius:8px;border:1px solid var(--uni-border);object-fit:cover;}

/* Tên file đã chọn + nút "Lưu ảnh" ở khung upload thư viện ảnh — xem
   ImageLibraryUploadForm() trong skin_files.php. */
.uni-lib-upload-filename{
  margin-top:8px;font-size:12.5px;font-weight:600;color:var(--uni-primary);
  word-break:break-all;
}
/* Dùng flexbox thay vì chỉ text-align để canh giữa chắc chắn, không bị
   ảnh hưởng bởi các style display/float khác có thể áp lên button. */
.uni-lib-upload-actions{
  margin-top:12px;display:flex;justify-content:center;
}
.uni-image-source-toggle{display:flex;gap:16px;margin-bottom:12px;font-size:12.5px;color:var(--uni-text);align-items:center;flex-wrap:wrap;}
.uni-image-source-toggle label{display:flex;align-items:center;gap:5px;cursor:pointer;font-weight:500;}
.uni-current-image{
  display:flex;align-items:center;gap:10px;
  margin-top:12px;padding:8px 10px;
  border:1px solid var(--uni-border);border-radius:8px;
  background:var(--uni-surface);font-size:12px;color:var(--uni-text-muted);
}
.uni-current-image img{border-radius:6px;flex-shrink:0;}
.uni-current-image label{display:flex;align-items:center;gap:5px;cursor:pointer;color:#e0466a;font-weight:600;}

/* Tag chips (nội dung sinh ra bởi hàm taglist() có sẵn — chỉ đổi lớp áo) */
.uni-tag-input-row{display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap;}
.uni-tag-input-row input[type="text"]{flex:1;min-width:160px;}
.tagchecklist{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px;}
.tagchecklist:empty{display:none;}
.tagchecklist span{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 10px 5px 12px;
  background:var(--uni-primary-soft);
  color:var(--uni-primary-dark);
  border-radius:999px;
  font-size:12px;font-weight:600;
}
.tagchecklist .ntdelbutton{
  display:inline-flex;align-items:center;justify-content:center;
  width:15px;height:15px;border-radius:50%;
  background:rgba(47,95,224,.18);
  color:var(--uni-primary-dark);
  font-size:9.5px;font-weight:700;
  cursor:pointer;text-decoration:none;
}
.tagchecklist .ntdelbutton:hover{background:var(--uni-primary);color:#fff;}
.the-tagcloud{margin-top:8px;}
.the-tagcloud .tagLink{
  display:inline-block;
  padding:4px 10px;
  margin:0 6px 6px 0;
  background:var(--uni-bg);
  border:1px solid var(--uni-border);
  border-radius:999px;
  font-size:11.5px;color:var(--uni-text-muted);
}
.the-tagcloud .tagLink:hover{border-color:var(--uni-primary);color:var(--uni-primary);}
.the-tagcloud a[onclick*="slideToggle"]{font-size:12px;color:var(--uni-primary);font-weight:600;}

.uni-editform-foot{
  padding:16px 20px;
  border-top:1px solid var(--uni-border);
  background:var(--uni-bg);
  text-align:right;
}
.uni-editform-foot .uni-btn-primary{width:auto;padding:10px 28px;}

@media (max-width: 640px){
  .uni-editform{max-width:100%;}
  .uni-field{min-width:100%;}
}

/* Sửa lỗi (phát hiện khi khách hàng test tab "Nội dung"): 2 rule dùng
   chung cho form kiểu bảng cũ — "#maincontent .add_form table td" và
   "#maincontent .add_form table table td" (xem modern-content.css /
   modern-content1.css, Giai đoạn 1) — vốn chỉ định làm cho các bảng
   layout kiểu cũ (ví dụ bảng danh sách checkbox quyền), nhưng vì chọn
   theo "mọi <td> trong mọi <table> nằm trong .add_form" nên VÔ TÌNH áp
   luôn cả vào các bảng layout NỘI BỘ của trình soạn thảo TinyMCE (mỗi
   nút trên toolbar TinyMCE 3 cũng được dựng bằng <table><td>) — làm
   khoảng cách giữa các nút bị đôn lên nhiều lần so với thiết kế gốc,
   khiến toolbar bị vỡ dòng/tràn ra ngoài (đúng như ảnh lỗi khách gửi ở
   tab "Nội dung"). Reset lại padding=0 cho mọi bảng/ô do TinyMCE tự
   dựng (nhận diện qua các class riêng của TinyMCE: mceLayout, mceToolbar,
   mceStatusbar, mceMenu — không phải class do site này đặt ra nên không
   đụng tới bảng nào khác) để trả lại đúng khoảng cách gốc theo skin
   "cirkuit" của TinyMCE. */
#maincontent .add_form table.mceLayout td,
#maincontent .add_form table.mceLayout table td,
#maincontent .add_form .mceToolbar td,
#maincontent .add_form .mceStatusbar td,
#maincontent .add_form .mceMenu td,
#maincontent .add_form .mceMenu tr{
  padding:0 !important;
  vertical-align:middle !important;
}

/* Giai đoạn 3+ (nâng cấp trình soạn thảo lên TinyMCE 6): rule dùng chung
   "input[type=submit],input[type=button],button,.btn,.submit{background:
   var(--c-primary) !important;...}" ở content.css (có từ trước, dùng để
   sơn màu xanh cho MỌI nút bấm trên site) chọn theo tên thẻ <button> nói
   chung, nên vô tình sơn xanh luôn TOÀN BỘ nút trên toolbar của TinyMCE 6
   (mỗi nút toolbar giờ là 1 thẻ <button> thật — khác bản 3 cũ dùng <a>),
   biến cả toolbar thành 1 khối xanh dày đặc, mất hẳn phong cách gọn nhẹ
   vốn có. Reset lại đúng bằng giá trị gốc của skin "oxide" (TinyMCE 6) —
   liệt kê đủ các trạng thái hover/focus/active/disabled để nút vẫn có
   phản hồi khi rê chuột/bấm như thiết kế gốc, chỉ khác là không còn bị
   "sơn đè" màu xanh của site. */
#maincontent .tox .tox-tbtn{
  background:transparent !important;
  border:0 !important;
  border-radius:3px !important;
  box-shadow:none !important;
  color:#222f3e !important;
  padding:0 !important;
  font-weight:400 !important;
  font-size:14px !important;
}
#maincontent .tox .tox-tbtn:hover{
  background:#cce2fa !important;
  color:#222f3e !important;
}
#maincontent .tox .tox-tbtn:focus{
  background:#cce2fa !important;
  color:#222f3e !important;
}
#maincontent .tox .tox-tbtn:active{
  background:#a6ccf7 !important;
  color:#222f3e !important;
}
#maincontent .tox .tox-tbtn--enabled{
  background:#a6ccf7 !important;
  color:#222f3e !important;
}
#maincontent .tox .tox-tbtn:disabled{
  background:transparent !important;
  color:rgba(34,47,62,.5) !important;
}
/* Nút trong hộp thoại (chèn link/ảnh/bảng...) — giữ đúng phân cấp thị
   giác gốc: nút chính (Save/Ok) màu xanh, nút phụ (Cancel) màu xám —
   không để rule chung của site sơn cả 2 thành cùng 1 màu xanh. */
#maincontent .tox .tox-button{
  padding:4px 16px !important;
  border-radius:6px !important;
  font-weight:700 !important;
  font-size:14px !important;
}
#maincontent .tox .tox-button--secondary{
  background:#e9eaec !important;
  border-color:#e9eaec !important;
  color:#222f3e !important;
}
#maincontent .tox .tox-button--secondary:hover{
  background:#d1d3d6 !important;
  border-color:#d1d3d6 !important;
  color:#222f3e !important;
}

/* Thu nhỏ toolbar TinyMCE 6 cho gọn lại, đỡ chiếm nhiều chỗ theo chiều cao
   — kích thước gốc của skin "oxide" (nút 34x28px, icon 24x24px, margin
   6px/5px trên-dưới quanh mỗi nút) khá to/thưa so với mật độ toolbar dày
   của TinyMCE 3 cũ mà site đang quen dùng, đặc biệt rõ khi toolbar tự
   xuống dòng (dòng "fullscreen,bold,italic,underline,strikethrough,..."
   quá dài, không đủ chỗ nên TinyMCE tự tách thành 2 dòng hiển thị) làm
   tổng chiều cao toolbar bị đội lên khá nhiều. Chỉ chỉnh kích thước/khoảng
   cách hiển thị, không đổi danh sách nút hay hành vi. */
#maincontent .tox .tox-toolbar__group{
  padding:0 6px !important;
}
/* Chỉ áp dụng cho nút icon đơn (Đậm, Nghiêng, Chèn ảnh...) — loại trừ hẳn
   nút dạng "hộp chọn" (.tox-tbtn--select, dùng cho H2/Phông chữ/Cỡ chữ):
   nút chọn cần đủ rộng để hiện chữ nhãn ("Phông chữ hệ thống", "18pt"...),
   ép chung 1 chiều rộng nhỏ với nút icon sẽ làm mất luôn phần chữ đó. */
/* SỬA LỖI: "width:28px !important" (cứng, không co giãn) + "padding:0"
   ở trên làm 1 số nút — nút có thêm mũi tên nhỏ bên trong (dạng
   split-button, vd nút Danh sách/Bảng), hoặc icon không vuông — bị bó
   quá chặt, nhìn như icon bị "cắt" mất 1 phần bề rộng. Đổi width cứng
   thành min-width (chỉ quy định mức TỐI THIỂU, nút nào cần rộng hơn vẫn
   tự nới ra được) và thêm chút padding ngang để icon không bị ép sát viền. */
#maincontent .tox .tox-tbtn:not(.tox-tbtn--select){
  width:auto !important;
  height:28px !important;
  min-width:30px !important;
  padding:0 2px !important;
  margin:2px 1px !important;
}
#maincontent .tox .tox-tbtn:not(.tox-tbtn--select) svg{
  width:18px !important;
  height:18px !important;
}
#maincontent .tox .tox-tbtn--select{
  height:26px !important;
  margin:2px 1px !important;
  padding:0 4px !important;
}
#maincontent .tox .tox-tbtn--select .tox-tbtn__select-label{
  font-size:12px !important;
}

/* =========================================================================
   uni-lightbox — lightbox xem ảnh hiện đại, thay cho Thickbox trong module
   Thư viện ảnh (xem javascripts/univinet/uni.lightbox.js). Không phụ thuộc
   jQuery/jQuery UI, nạp toàn cục qua GlobalLoad.php.
   ========================================================================= */
.uni-lightbox-overlay{
  position:fixed;inset:0;
  z-index:100000;
  display:flex;align-items:center;justify-content:center;
  background:rgba(15,20,35,.82);
  opacity:0;visibility:hidden;
  transition:opacity .18s ease;
  padding:32px;
  box-sizing:border-box;
}
.uni-lightbox-overlay.open{opacity:1;visibility:visible;}
body.uni-lightbox-lock{overflow:hidden;}

.uni-lightbox-inner{
  position:relative;
  max-width:min(1100px, 100%);
  max-height:100%;
  display:flex;flex-direction:column;align-items:center;
}
.uni-lightbox-media{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  max-width:100%;
  max-height:calc(100vh - 120px);
  min-width:120px;min-height:120px;
  border-radius:var(--uni-radius);
  overflow:hidden;
  background:rgba(255,255,255,.04);
}
.uni-lightbox-img{
  display:block;
  max-width:100%;
  max-height:calc(100vh - 120px);
  border-radius:var(--uni-radius);
  box-shadow:0 20px 60px rgba(0,0,0,.35);
  opacity:0;
  transition:opacity .15s ease;
}
.uni-lightbox-media.loaded .uni-lightbox-img{opacity:1;}
.uni-lightbox-media.error .uni-lightbox-img{display:none;}
.uni-lightbox-spinner{
  position:absolute;
  width:34px;height:34px;
  border-radius:50%;
  border:3px solid rgba(255,255,255,.25);
  border-top-color:#fff;
  animation:uni-lightbox-spin .8s linear infinite;
}
.uni-lightbox-media.loaded .uni-lightbox-spinner{display:none;}
@keyframes uni-lightbox-spin{to{transform:rotate(360deg);}}

.uni-lightbox-caption{
  color:#fff;
  font-family:'Inter',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:13.5px;
  margin-top:14px;
  text-align:center;
  max-width:100%;
  word-break:break-word;
  opacity:.85;
  min-height:1px;
}

.uni-lightbox-btn{
  position:absolute;
  border:none;
  background:rgba(255,255,255,.12);
  color:#fff;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  border-radius:999px;
  transition:background .15s ease;
}
.uni-lightbox-btn:hover{background:rgba(255,255,255,.24);}
.uni-lightbox-close{
  top:-46px;right:0;
  width:36px;height:36px;
  font-size:22px;line-height:1;
}
.uni-lightbox-prev,
.uni-lightbox-next{
  top:50%;
  width:44px;height:44px;
  font-size:28px;line-height:1;
  transform:translateY(-50%);
}
.uni-lightbox-prev{left:-56px;}
.uni-lightbox-next{right:-56px;}

@media (max-width:760px){
  .uni-lightbox-overlay{padding:16px;}
  .uni-lightbox-close{top:auto;bottom:calc(100% - 40px);right:-4px;}
  .uni-lightbox-prev{left:4px;}
  .uni-lightbox-next{right:4px;}
  .uni-lightbox-prev,.uni-lightbox-next{width:38px;height:38px;font-size:24px;background:rgba(0,0,0,.35);}
}

/* =========================================================================
   "Quản lý thư viện ảnh" (files_admin.php::displayImageLibrary() /
   skin_files.php::ImageLibraryPage()) — toolbar + chế độ xem lưới/danh
   sách + ô chọn nhiều ảnh để xóa cùng lúc.
   ========================================================================= */
.uni-lib-toolbar{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:10px 0 14px;
  border-bottom:1px solid var(--uni-border);
  margin-bottom:14px;
}
.uni-lib-checkall{
  display:flex;align-items:center;gap:6px;
  font-size:12.5px;color:var(--uni-text-muted);cursor:pointer;
}
.uni-lib-toolbar button{
  font-size:12.5px;padding:7px 14px;
  border:1px solid var(--uni-border);border-radius:8px;
  background:var(--uni-surface);color:var(--uni-text);
  cursor:pointer;transition:background .12s ease,border-color .12s ease;
}
.uni-lib-toolbar button:hover{border-color:var(--uni-primary);color:var(--uni-primary);}
.uni-lib-view-toggle{display:flex;gap:6px;margin-left:auto;}
.uni-lib-view-toggle button.uni-view-btn-active{
  background:var(--uni-primary);border-color:var(--uni-primary);color:#fff;
}

.uni-lib-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  gap:14px;
}
.uni-lib-item{
  position:relative;
  background:var(--uni-surface);
  border:1px solid var(--uni-border);
  border-radius:var(--uni-radius);
  padding:8px;
  transition:border-color .12s ease,box-shadow .12s ease;
}
.uni-lib-item:hover{border-color:var(--uni-primary);box-shadow:var(--uni-shadow);}
.uni-lib-item-check{
  position:absolute;top:10px;left:10px;z-index:2;
  width:20px;height:20px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.9);border-radius:5px;
  cursor:pointer;
}
.uni-lib-item-check input{margin:0;cursor:pointer;}
.uni-lib-item-thumb{
  width:100%;aspect-ratio:1/1;
  border-radius:7px;overflow:hidden;
  background:var(--uni-bg);
  cursor:pointer;
}
.uni-lib-item-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.uni-lib-item-name{
  margin-top:6px;font-size:11.5px;color:var(--uni-text-muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.uni-lib-item-actions{
  display:flex;justify-content:center;gap:14px;
  margin-top:6px;
  opacity:0;transition:opacity .12s ease;
}
.uni-lib-item:hover .uni-lib-item-actions{opacity:1;}
.uni-lib-item-actions a{
  color:var(--uni-text-muted);text-decoration:none;font-size:14px;
  cursor:pointer;
}
.uni-lib-item-actions a:hover{color:var(--uni-primary);}
.uni-lib-empty{
  grid-column:1/-1;text-align:center;color:var(--uni-text-muted);
  padding:48px 0;font-size:13px;
}
.uni-lib-paging{margin-top:14px;text-align:center;}

/* Icon Sửa/Xóa trên mỗi ảnh trong chế độ Lưới chỉ hiện khi ":hover"
   (opacity:0 mặc định) — trên điện thoại/máy tính bảng (màn cảm ứng)
   KHÔNG có trạng thái hover, nên 2 icon này gần như vô hình và không bấm
   được, chỉ còn cách xóa hàng loạt qua ô chọn. "(hover: none)" là cách
   trình duyệt tự báo "thiết bị này không có con trỏ chuột thật" — dùng
   để luôn hiện sẵn 2 icon trên màn cảm ứng, không cần đợi hover. */
@media (hover: none){
  .uni-lib-item-actions{opacity:1;}
}