/* _super-root/design-meridian/template.css
   Tên chính thức: "PTL Style Meridian" (đặt bởi user 2026-09-18) — dựng lại từ token THẬT
   lấy trực tiếp từ DOM/CSS của cPanel theme "Meridian" (v138.0.7,
   https://phucthienlang.vn:2083) user đã đăng nhập cho xem 2026-09-18 (đọc :root custom
   properties + computed style qua DevTools, không đoán từ ảnh chụp màn hình nữa — xem log
   phiên làm việc). Đây là NGUỒN GỐC dùng chung
   cho ~90 site *.phucthienlang.vn — mỗi site copy file này (+ template.js) vào assets
   riêng (như cách cpanel.css hiện đang copy riêng từng site, vì browser không gọi CSS
   xuyên domain được). Sửa luật ở ĐÂY trước, rồi đồng bộ lại từng site.

   PHỤ THUỘC 2 THỨ NGOÀI HỆ SINH THÁI (lệch quy ước cũ — xem design-meridian-draft.md
   mục "đánh đổi"):
     1. Font "Plus Jakarta Sans" — hệ sinh thái trước giờ CHỈ dùng font hệ thống
        (design-typography-favicon.md). ĐÃ TỰ HOST 2026-09-18 (xem @font-face bên dưới) —
        KHÔNG còn phụ thuộc Google Fonts CDN nữa, file .woff2 nằm trên CDN riêng
        cdn.phucthienlang.io.vn (Cloudflare R2 "ptl-shared-assets", namespace
        design-assets/fonts/), không cần <link> Google Fonts trong <head>.
     2. Icon font RemixIcon — thay cho emoji/text cũ, vì cPanel Meridian dùng bộ icon
        `ri-*` nhất quán mà emoji không tái tạo được. ĐÃ TỰ HOST 2026-09-18 — file
        remixicon.min.css/.woff2/.woff nằm trên CDN riêng cùng chỗ trên (namespace
        design-assets/icons/), <head> của site chỉ cần 1 <link rel="stylesheet"
        href="https://cdn.phucthienlang.io.vn/design-assets/icons/remixicon.min.css">
        thay cho cdnjs.

   Markup contract (xem preview.html để có ví dụ đầy đủ) — SỬA 2026-09-18: logo giờ nằm trong
   1 HEADER NGANG full-width riêng (KHÔNG còn nằm trong sidebar) — user chỉ ra "cpanel là line
   ngang, để text title dài ra" — nhét logo vào cột sidebar 260px khiến title dài bị tràn/cắt.
   Đúng cấu trúc thật: header (logo + topbar) TRÊN CÙNG full-width, rồi mới tới hàng
   sidebar+main bên dưới. Class "sidebar-collapsed" đặt trên CHÍNH .ptl-meridian-app (id
   "ptlMeridianApp", KHÔNG phải trên .ptl-meridian-sidebar) để logo-box và sidebar thu/giãn
   ĐỒNG BỘ dù khác nhánh DOM:
     <div class="ptl-meridian-app" id="ptlMeridianApp">
       <header class="ptl-meridian-header">
         <a class="ptl-meridian-logo" href="index.php"><img src="favicon.svg"><span>Tên site</span></a>
         <div class="ptl-meridian-topbar">
           <button class="ptl-meridian-hamburger" id="ptlMeridianHamburger"><i class="ri-menu-line"></i></button>
           <div class="ptl-meridian-topbar-center"><label class="ptl-meridian-search">...</label></div>
           <div class="ptl-meridian-topbar-right">...<div class="ptl-meridian-avatar">N</div></div>
         </div>
       </header>
       <div class="ptl-meridian-body">
         <aside class="ptl-meridian-sidebar" id="ptlMeridianSidebar">
           <nav class="ptl-meridian-nav">
             <a class="ptl-meridian-nav-item [active]" href="#"><i class="ri-dashboard-line"></i><span class="ptl-meridian-nav-label">Nhãn</span></a>
           </nav>
           <button class="ptl-meridian-sidebar-collapse" id="ptlMeridianCollapseBtn"><i class="ri-menu-fold-line" id="ptlMeridianCollapseIcon"></i><span class="ptl-meridian-nav-label">Thu gọn</span></button>
         </aside>
         <div class="ptl-meridian-backdrop" id="ptlMeridianBackdrop"></div>
         <div class="ptl-meridian-main">
           <main class="ptl-meridian-content">...</main>
         </div>
       </div>
       <button class="ptl-meridian-fab"><i class="ri-robot-2-line"></i> Trợ lý AI</button>
     </div> */

/* ─── Font "Plus Jakarta Sans" — TỰ HOST qua CDN riêng (2026-09-18) ─────────
   2 file .woff2 (variable font, mỗi file gánh đủ dải weight 400-800 — y hệt cách Google
   Fonts phục vụ, chỉ đổi domain) tải 1 lần từ fonts.gstatic.com rồi PUT thẳng lên R2 bucket
   "ptl-shared-assets" qua Worker "ptl-materials" (namespace design-assets/fonts/), xem
   history_deploy.json để biết chi tiết. Giữ đúng cấu trúc 2 subset (latin/vietnamese) x 5
   khối font-weight như CSS gốc Google trả về — KHÔNG gộp lại vì trình duyệt cần đủ số khối
   @font-face để chọn đúng variation instance theo unicode-range + font-weight khai báo. */
@font-face {
  font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(https://cdn.phucthienlang.io.vn/design-assets/fonts/plus-jakarta-sans-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(https://cdn.phucthienlang.io.vn/design-assets/fonts/plus-jakarta-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(https://cdn.phucthienlang.io.vn/design-assets/fonts/plus-jakarta-sans-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(https://cdn.phucthienlang.io.vn/design-assets/fonts/plus-jakarta-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 600; font-display: swap;
  src: url(https://cdn.phucthienlang.io.vn/design-assets/fonts/plus-jakarta-sans-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 600; font-display: swap;
  src: url(https://cdn.phucthienlang.io.vn/design-assets/fonts/plus-jakarta-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(https://cdn.phucthienlang.io.vn/design-assets/fonts/plus-jakarta-sans-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(https://cdn.phucthienlang.io.vn/design-assets/fonts/plus-jakarta-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 800; font-display: swap;
  src: url(https://cdn.phucthienlang.io.vn/design-assets/fonts/plus-jakarta-sans-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 800; font-display: swap;
  src: url(https://cdn.phucthienlang.io.vn/design-assets/fonts/plus-jakarta-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Bảng màu gốc — copy NGUYÊN VĂN từ :root thật của cPanel Meridian (đọc qua
     document.styleSheets, không phải đoán/getComputedStyle từng phần tử — lấy được
     TOÀN BỘ 128 custom property gốc ngày 2026-09-18, xem history_deploy.json). */
  --slate-25: #fcfcfd; --slate-50: #f8fafc; --slate-100: #f1f5f9; --slate-200: #e2e8f0;
  --slate-300: #cbd5e1; --slate-400: #94a3b8; --slate-500: #64748b; --slate-600: #475569;
  --slate-700: #334155; --slate-800: #1e293b; --slate-850: #172033; --slate-900: #0f172a;
  --slate-950: #020617;

  --orange-50: #fff7ed; --orange-100: #ffedd5; --orange-200: #fed7aa; --orange-300: #fdba74;
  --orange-400: #fb923c; --orange-500: #f97316; --orange-600: #ea580c; --orange-700: #c2410c;
  --orange-800: #9a3412; --orange-900: #7c2d12;

  --teal-50: #f0fdfa; --teal-100: #ccfbf1; --teal-200: #99f6e4; --teal-300: #5eead4;
  --teal-400: #2dd4bf; --teal-500: #14b8a6; --teal-600: #0d9488; --teal-700: #0f766e;
  --amber-50: #fffbeb; --amber-100: #fef3c7; --amber-200: #fde68a; --amber-300: #fcd34d;
  --amber-400: #fbbf24; --amber-500: #f59e0b; --amber-600: #d97706; --amber-700: #b45309;
  --rose-50: #fff1f2; --rose-100: #ffe4e6; --rose-200: #fecdd3; --rose-300: #fda4af;
  --rose-400: #fb7185; --rose-500: #f43f5e; --rose-600: #e11d48; --rose-700: #be123c;
  --sky-50: #f0f9ff; --sky-100: #e0f2fe; --sky-200: #bae6fd; --sky-300: #7dd3fc;
  --sky-400: #38bdf8; --sky-500: #0ea5e9; --sky-600: #0284c7; --sky-700: #0369a1;

  /* Token vai trò — mặc định LIGHT ([data-theme="light"] thật, xem dark override bên dưới
     ĐỔI TÊN đúng như biến thật để dễ đối chiếu khi cPanel cập nhật (giữ tiền tố
     ptl-meridian- theo yêu cầu user, chỉ đổi phần sau cho khớp) */
  --ptl-meridian-bg-root: var(--slate-100);
  --ptl-meridian-bg-surface: #fff;
  --ptl-meridian-bg-raised: #fff;
  --ptl-meridian-bg-muted: #00000008;
  --ptl-meridian-bg-hover: #0000000a;
  --ptl-meridian-bg-active: #00000012;
  --ptl-meridian-surface-raised: #fff;

  --ptl-meridian-border-subtle: var(--slate-200);
  --ptl-meridian-border-default: #0000001a;
  --ptl-meridian-border-strong: var(--slate-400);
  --ptl-meridian-border-focus: var(--orange-500);

  --ptl-meridian-text-primary: var(--slate-900);
  --ptl-meridian-text-secondary: var(--slate-600);
  --ptl-meridian-text-disabled: var(--slate-300);
  --ptl-meridian-text-brand: var(--orange-700);

  --ptl-meridian-brand: var(--orange-500);
  --ptl-meridian-brand-hover: var(--orange-600);
  --ptl-meridian-brand-subtle: #ea580c1f;
  --ptl-meridian-brand-bg-subtle: var(--orange-50);
  --ptl-meridian-brand-strong: var(--orange-800);

  --ptl-meridian-status-success: var(--teal-500); --ptl-meridian-status-success-bg: var(--teal-100); --ptl-meridian-status-success-text: var(--teal-700);
  --ptl-meridian-status-warning: var(--amber-500); --ptl-meridian-status-warning-bg: var(--amber-100); --ptl-meridian-status-warning-text: var(--amber-700);
  --ptl-meridian-status-error:   var(--rose-500);  --ptl-meridian-status-error-bg:   var(--rose-100);  --ptl-meridian-status-error-text:   var(--rose-700);
  --ptl-meridian-status-info:    var(--sky-500);   --ptl-meridian-status-info-bg:    var(--sky-100);   --ptl-meridian-status-info-text:    var(--sky-700);

  --ptl-meridian-font-body: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;
  --ptl-meridian-font-mono: 'JetBrains Mono', 'Courier New', monospace;
  --ptl-meridian-radius: 8px;
  --ptl-meridian-radius-full: 9999px;
  --ptl-meridian-ease-out: cubic-bezier(.16,1,.3,1);
  --ptl-meridian-duration-fast: .18s;
  --ptl-meridian-duration-normal: .28s;

  --ptl-meridian-sidebar-w: 260px;
  --ptl-meridian-sidebar-w-collapsed: 68px;
  --ptl-meridian-header-h: 60px;
  --ptl-meridian-content-max: 1280px;
}

/* ─── Dark mode — 3 trạng thái thật (không chỉ đổi UI nút) ──────────────────
   <html data-theme="light|dark|system"> được gán bởi 1 script inline nhỏ ở đầu
   <head> của từng trang (đọc localStorage TRƯỚC khi CSS này load, tránh nháy
   sáng->tối) rồi đồng bộ lại bởi template.js khi bấm nút .ptl-meridian-theme-btn[data-theme].
   "system" tự theo prefers-color-scheme của hệ điều hành qua @media bên dưới -
   không cần JS lắng nghe thay đổi, CSS tự phản ứng khi user đổi theme OS lúc
   đang mở trang. TOKEN DARK THẬT (không còn tự đoán) — cPanel Meridian mặc định
   [data-theme="dark"] chính là selector ":root, [data-theme=\"dark\"]" thật (dark
   là theme GỐC của họ, light mới là override) — đọc qua document.styleSheets lúc
   user bật dark mode 2026-09-18, xem history_deploy.json. */
html[data-theme="dark"] {
  color-scheme: dark;
  --ptl-meridian-bg-root: var(--slate-950);
  --ptl-meridian-bg-surface: var(--slate-900);
  --ptl-meridian-bg-raised: var(--slate-850);
  --ptl-meridian-bg-muted: #ffffff0a;
  --ptl-meridian-bg-hover: #ffffff0f;
  --ptl-meridian-bg-active: #ffffff17;
  --ptl-meridian-surface-raised: var(--slate-850);

  --ptl-meridian-border-subtle: var(--slate-800);
  --ptl-meridian-border-default: #ffffff1a;
  --ptl-meridian-border-strong: var(--slate-600);

  --ptl-meridian-text-primary: #f1f5f9;
  --ptl-meridian-text-secondary: #94a3b8;
  --ptl-meridian-text-disabled: #475569;
  --ptl-meridian-text-brand: var(--orange-500);

  --ptl-meridian-brand-subtle: #f9731626;
  --ptl-meridian-brand-bg-subtle: #f9731614;
  --ptl-meridian-brand-strong: var(--orange-300);

  --ptl-meridian-status-success-bg: #ccfbf126; --ptl-meridian-status-success-text: var(--teal-400);
  --ptl-meridian-status-warning-bg: #fef3c726; --ptl-meridian-status-warning-text: var(--amber-400);
  --ptl-meridian-status-error-bg:   #ffe4e626; --ptl-meridian-status-error-text:   var(--rose-400);
  --ptl-meridian-status-info-bg:    #e0f2fe26; --ptl-meridian-status-info-text:    var(--sky-400);
}
@media (prefers-color-scheme: dark) {
  html[data-theme="system"] {
    color-scheme: dark;
    --ptl-meridian-bg-root: var(--slate-950);
    --ptl-meridian-bg-surface: var(--slate-900);
    --ptl-meridian-bg-raised: var(--slate-850);
    --ptl-meridian-bg-muted: #ffffff0a;
    --ptl-meridian-bg-hover: #ffffff0f;
    --ptl-meridian-bg-active: #ffffff17;
    --ptl-meridian-surface-raised: var(--slate-850);

    --ptl-meridian-border-subtle: var(--slate-800);
    --ptl-meridian-border-default: #ffffff1a;
    --ptl-meridian-border-strong: var(--slate-600);

    --ptl-meridian-text-primary: #f1f5f9;
    --ptl-meridian-text-secondary: #94a3b8;
    --ptl-meridian-text-disabled: #475569;
    --ptl-meridian-text-brand: var(--orange-500);

    --ptl-meridian-brand-subtle: #f9731626;
    --ptl-meridian-brand-bg-subtle: #f9731614;
    --ptl-meridian-brand-strong: var(--orange-300);

    --ptl-meridian-status-success-bg: #ccfbf126; --ptl-meridian-status-success-text: var(--teal-400);
    --ptl-meridian-status-warning-bg: #fef3c726; --ptl-meridian-status-warning-text: var(--amber-400);
    --ptl-meridian-status-error-bg:   #ffe4e626; --ptl-meridian-status-error-text:   var(--rose-400);
    --ptl-meridian-status-info-bg:    #e0f2fe26; --ptl-meridian-status-info-text:    var(--sky-400);
  }
}

.ptl-meridian-app, .ptl-meridian-app * { box-sizing: border-box; }
/* ─── Khung tổng: 1 header NGANG full-width trên cùng (logo + topbar), rồi mới tới hàng
   sidebar+main bên dưới — ĐÚNG cấu trúc thật cPanel Meridian (soi qua DOM 2026-09-18, user chỉ
   ra bản trước đó SAI: nhét logo vào bên trong cột sidebar 260px khiến title dài bị tràn/cắt,
   vì "cpanel là line ngang" — logo cần nằm trên 1 hàng full-width, không bị bó hẹp theo
   sidebar-width). Class "sidebar-collapsed" đặt trên CHÍNH .ptl-meridian-app (không phải trên
   .ptl-meridian-sidebar) — đúng y hệt DOM thật (div.layout-shell.sidebar-collapsed) — để logo-box
   trong header VÀ sidebar bên dưới thu/giãn ĐỒNG BỘ cùng lúc dù chúng nằm khác nhánh DOM. */
.ptl-meridian-app {
  font-family: var(--ptl-meridian-font-body);
  color: var(--ptl-meridian-text-primary);
  background: var(--ptl-meridian-bg-root);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-size: 14px;
  line-height: 1.55;
}
.ptl-meridian-app a { text-decoration: none; color: inherit; }
.ptl-meridian-app button { font-family: inherit; }
.ptl-meridian-app i[class^="ri-"] { display: inline-flex; line-height: 1; }

/* ─── Header ngang full-width (logo-box + topbar) ───────────────────────────── */
.ptl-meridian-header {
  height: var(--ptl-meridian-header-h); flex-shrink: 0;
  background: var(--ptl-meridian-bg-surface); border-bottom: 1px solid var(--ptl-meridian-border-subtle);
  display: flex; align-items: stretch;
  position: sticky; top: 0; z-index: 970;
}
/* min-width (KHÔNG phải width cố định) = sidebar-w — thẳng cột với sidebar bên dưới trong
   trường hợp tên site ngắn (đa số), nhưng vẫn CHO PHÉP DÀI RA tự nhiên theo nội dung khi tên
   dài hơn 260px (user chỉ ra: "cpanel là line ngang, để text title có thể dài ra" — trước đó
   dùng width cố định vẫn cắt/tràn y hệt lỗi cũ, chỉ khác chỗ đặt). flex-shrink:0 để nó không
   bị bóp lại khi topbar bên cạnh cần chỗ. */
.ptl-meridian-logo {
  display: flex; align-items: center; gap: 10px;
  min-width: var(--ptl-meridian-sidebar-w); flex: 0 0 auto; padding: 0 20px;
  font-weight: 700; font-size: 15px; color: var(--ptl-meridian-text-brand); white-space: nowrap;
  transition: min-width var(--ptl-meridian-duration-normal) var(--ptl-meridian-ease-out);
}
.ptl-meridian-logo img { width: 36px; height: 36px; flex-shrink: 0; }
.ptl-meridian-app.sidebar-collapsed .ptl-meridian-logo { min-width: var(--ptl-meridian-sidebar-w-collapsed); justify-content: center; padding: 0; }
.ptl-meridian-app.sidebar-collapsed .ptl-meridian-logo span { display: none; }

/* ─── Hàng dưới header: sidebar + main cạnh nhau ─────────────────────────────── */
.ptl-meridian-body { flex: 1 1 auto; display: flex; align-items: stretch; min-height: 0; }

/* ─── Sidebar ────────────────────────────────────────────────────────────── */
.ptl-meridian-sidebar {
  flex: none; width: var(--ptl-meridian-sidebar-w);
  background: var(--ptl-meridian-bg-surface); border-right: 1px solid var(--ptl-meridian-border-subtle);
  display: flex; flex-direction: column;
  position: sticky; top: var(--ptl-meridian-header-h); height: calc(100vh - var(--ptl-meridian-header-h));
  overflow-y: auto; overflow-x: hidden;
  transition: width var(--ptl-meridian-duration-normal) var(--ptl-meridian-ease-out);
  z-index: 950;
}
.ptl-meridian-app.sidebar-collapsed .ptl-meridian-sidebar { width: var(--ptl-meridian-sidebar-w-collapsed); }

.ptl-meridian-nav { flex: 1 1 auto; padding: 12px; display: flex; flex-direction: column; gap: 2px; }
.ptl-meridian-nav-group-label {
  font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ptl-meridian-text-disabled); padding: 14px 12px 6px; white-space: nowrap;
}
.ptl-meridian-nav-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-radius: var(--ptl-meridian-radius);
  font-size: 14px; font-weight: 500; color: var(--ptl-meridian-text-secondary);
  transition: background-color var(--ptl-meridian-duration-fast), color var(--ptl-meridian-duration-fast);
  white-space: nowrap; min-height: 44px;
}
.ptl-meridian-nav-item i { font-size: 18px; flex-shrink: 0; }
.ptl-meridian-nav-item:hover { background: var(--ptl-meridian-bg-hover); color: var(--ptl-meridian-text-primary); }
.ptl-meridian-nav-item.active { background: var(--ptl-meridian-brand-subtle); color: var(--ptl-meridian-text-brand); font-weight: 600; }
.ptl-meridian-nav-label { overflow: hidden; text-overflow: ellipsis; }
.ptl-meridian-nav-divider { height: 1px; background: var(--ptl-meridian-border-subtle); margin: 8px 12px; flex-shrink: 0; }
.ptl-meridian-app.sidebar-collapsed .ptl-meridian-nav-label,
.ptl-meridian-app.sidebar-collapsed .ptl-meridian-nav-group-label,
.ptl-meridian-app.sidebar-collapsed .ptl-meridian-sidebar-collapse .ptl-meridian-nav-label { display: none; }
.ptl-meridian-app.sidebar-collapsed .ptl-meridian-nav-item { justify-content: center; }

.ptl-meridian-sidebar-collapse {
  display: flex; align-items: center; gap: 12px;
  margin: 8px 12px 12px; padding: 12px 16px;
  border-radius: var(--ptl-meridian-radius); border: none; background: transparent;
  color: var(--ptl-meridian-text-secondary); font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background-color var(--ptl-meridian-duration-fast); flex-shrink: 0;
}
.ptl-meridian-sidebar-collapse i { font-size: 18px; }
.ptl-meridian-sidebar-collapse:hover { background: var(--ptl-meridian-bg-hover); color: var(--ptl-meridian-text-primary); }
.ptl-meridian-app.sidebar-collapsed .ptl-meridian-sidebar-collapse { justify-content: center; }

/* ─── Main column ────────────────────────────────────────────────────────── */
.ptl-meridian-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

/* ─── Topbar — giờ là PHẦN BÊN PHẢI LOGO trong .ptl-meridian-header (không còn tự
   sticky/border/background riêng, header cha đã lo) ─────────────────────────── */
.ptl-meridian-topbar {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; gap: 12px; padding: 0 20px;
}
/* Bọc ngoài .ptl-meridian-search — chiếm hết khoảng trống linh hoạt CÒN LẠI giữa 2 cụm cố định
   (hamburger/logo bên trái, icon/avatar bên phải) rồi tự canh giữa nội dung bên trong bằng
   justify-content, ĐÚNG cấu trúc DOM thật của cPanel Meridian (div "hidden md:flex justify-center
   min-w-0" bao ngoài search) — soi qua getComputedStyle 2026-09-18. KHÔNG dùng chung với
   .ptl-meridian-topbar-spacer (trang không có search, như admin.php, vẫn dùng spacer như cũ). */
.ptl-meridian-topbar-center { flex: 1 1 auto; display: flex; justify-content: center; min-width: 0; }
.ptl-meridian-search {
  width: 100%; max-width: 480px; height: 40px; position: relative;
  display: flex; align-items: center;
  background: var(--ptl-meridian-bg-muted); border: 1px solid transparent; border-radius: var(--ptl-meridian-radius-full);
  padding: 0 8px 0 40px; transition: background-color var(--ptl-meridian-duration-fast), border-color var(--ptl-meridian-duration-fast);
}
.ptl-meridian-search i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--ptl-meridian-text-secondary); font-size: 16px; pointer-events: none; }
.ptl-meridian-search:hover { background: var(--ptl-meridian-bg-surface); border-color: var(--ptl-meridian-border-subtle); }
.ptl-meridian-search:focus-within { background: var(--ptl-meridian-bg-surface); border-color: var(--ptl-meridian-border-focus); box-shadow: 0 0 0 3px var(--ptl-meridian-brand-subtle); }
.ptl-meridian-search input {
  flex: 1 1 auto; border: none; outline: none; background: transparent;
  font-size: 14px; color: var(--ptl-meridian-text-primary); font-family: inherit; height: 100%;
}
.ptl-meridian-search input::placeholder { color: var(--ptl-meridian-text-secondary); }
.ptl-meridian-kbd {
  flex-shrink: 0; font-size: 12px; font-weight: 400; color: var(--ptl-meridian-text-primary);
  font-family: var(--ptl-meridian-font-mono);
  background: var(--ptl-meridian-bg-surface); border: 1px solid var(--ptl-meridian-border-subtle);
  border-radius: 8px; padding: 2px 6px; margin-left: 8px;
}
.ptl-meridian-topbar-spacer { flex: 1 1 auto; }
.ptl-meridian-topbar-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.ptl-meridian-pill-btn {
  display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px;
  border: 1px solid var(--ptl-meridian-border-default); border-radius: var(--ptl-meridian-radius);
  background: var(--ptl-meridian-bg-root); color: var(--ptl-meridian-text-primary); font-size: 12px; font-weight: 600; cursor: pointer;
  transition: background-color var(--ptl-meridian-duration-fast); white-space: nowrap;
}
.ptl-meridian-pill-btn i { font-size: 14px; }
.ptl-meridian-pill-btn:hover { background: var(--ptl-meridian-bg-active); }

.ptl-meridian-icon-btn {
  display: flex; align-items: center; justify-content: center; width: 34px; height: 34px;
  border-radius: var(--ptl-meridian-radius); border: none; background: transparent; color: var(--ptl-meridian-text-secondary);
  cursor: pointer; transition: background-color var(--ptl-meridian-duration-fast); flex-shrink: 0; position: relative;
}
.ptl-meridian-icon-btn i { font-size: 18px; }
.ptl-meridian-icon-btn:hover { background: var(--ptl-meridian-bg-hover); color: var(--ptl-meridian-text-primary); }

.ptl-meridian-theme-toggle { display: inline-flex; align-items: center; background: var(--ptl-meridian-bg-root); border: 1px solid var(--ptl-meridian-border-subtle); border-radius: var(--ptl-meridian-radius); padding: 2px; flex-shrink: 0; }
.ptl-meridian-theme-btn {
  display: flex; align-items: center; justify-content: center; width: 30px; height: 28px;
  border-radius: var(--ptl-meridian-radius); border: none; background: transparent; color: var(--ptl-meridian-text-secondary);
  cursor: pointer; transition: background-color var(--ptl-meridian-duration-fast);
}
.ptl-meridian-theme-btn i { font-size: 15px; }
.ptl-meridian-theme-btn.active { background: var(--ptl-meridian-surface-raised); color: var(--ptl-meridian-text-primary); }
.ptl-meridian-theme-btn:hover:not(.active) { color: var(--ptl-meridian-text-primary); }

.ptl-meridian-avatar {
  width: 32px; height: 32px; border-radius: 50%; background: var(--ptl-meridian-brand); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px;
  flex-shrink: 0; cursor: pointer; border: none;
}

/* ─── Content ────────────────────────────────────────────────────────────── */
.ptl-meridian-content { flex: 1 1 auto; padding: 24px 24px 48px; max-width: var(--ptl-meridian-content-max); width: 100%; margin: 0 auto; }

.ptl-meridian-greeting { margin: 0 0 20px; }
.ptl-meridian-greeting h1 { font-size: 24px; font-weight: 700; letter-spacing: -.025em; margin: 0; color: var(--ptl-meridian-text-primary); }
.ptl-meridian-greeting p { margin: 2px 0 0; color: var(--ptl-meridian-text-secondary); font-size: 14px; }

.ptl-meridian-section-label {
  font-size: 12px; font-weight: 600; letter-spacing: .035em; text-transform: uppercase;
  color: var(--ptl-meridian-text-secondary); margin: 24px 0 12px;
}
.ptl-meridian-content > .ptl-meridian-section-label:first-child { margin-top: 0; }

/* ─── Suggested action cards ─────────────────────────────────────────────── */
.ptl-meridian-action-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.ptl-meridian-action-card {
  position: relative; display: block; width: 100%; text-align: left;
  background: var(--ptl-meridian-bg-surface); border: 1px solid var(--ptl-meridian-border-subtle);
  border-radius: var(--ptl-meridian-radius); padding: 16px 16px 44px; cursor: pointer;
  transition: transform var(--ptl-meridian-duration-normal) var(--ptl-meridian-ease-out), box-shadow var(--ptl-meridian-duration-normal) var(--ptl-meridian-ease-out);
}
.ptl-meridian-action-card:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(234,88,12,.30); }
.ptl-meridian-action-card .ptl-meridian-badge { width: 36px; height: 36px; border-radius: var(--ptl-meridian-radius); display: flex; align-items: center; justify-content: center; margin-bottom: 12px; font-size: 17px; }
.ptl-meridian-action-card h3 { margin: 0 0 4px; font-size: 14px; font-weight: 700; }
.ptl-meridian-action-card p { margin: 0; font-size: 13px; color: var(--ptl-meridian-text-secondary); line-height: 1.5; }
.ptl-meridian-action-card .ptl-meridian-link { position: absolute; left: 16px; right: 16px; bottom: 14px; font-size: 12px; font-weight: 600; color: var(--ptl-meridian-text-brand); display: inline-flex; align-items: center; gap: 2px; }
.ptl-meridian-action-card:hover .ptl-meridian-link i { transform: translateX(2px); }
.ptl-meridian-action-card .ptl-meridian-link i { font-size: 15px; transition: transform var(--ptl-meridian-duration-fast); }
.ptl-meridian-action-card .ptl-meridian-dismiss {
  position: absolute; top: 12px; right: 12px; width: 22px; height: 22px; border: none; background: none;
  color: var(--ptl-meridian-text-disabled); cursor: pointer; display: flex; align-items: center; justify-content: center; border-radius: 6px; z-index: 2;
}
.ptl-meridian-action-card .ptl-meridian-dismiss i { font-size: 14px; }
.ptl-meridian-action-card .ptl-meridian-dismiss:hover { background: var(--ptl-meridian-bg-hover); color: var(--ptl-meridian-text-secondary); }

/* ─── Stat cards ─────────────────────────────────────────────────────────── */
.ptl-meridian-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.ptl-meridian-stat-card { background: var(--ptl-meridian-bg-surface); border: 1px solid var(--ptl-meridian-border-subtle); border-radius: var(--ptl-meridian-radius); padding: 24px; display: flex; flex-direction: column; gap: 8px; }
.ptl-meridian-stat-card .ptl-meridian-stat-label { font-size: 12px; font-weight: 600; color: var(--ptl-meridian-text-primary); }
.ptl-meridian-stat-card .ptl-meridian-stat-value { font-size: 16px; font-weight: 700; letter-spacing: -.025em; color: var(--ptl-meridian-text-primary); }
.ptl-meridian-stat-card .ptl-meridian-stat-value .ptl-meridian-stat-unit { font-size: 12px; font-weight: 400; color: var(--ptl-meridian-text-secondary); }
.ptl-meridian-stat-card .ptl-meridian-stat-sub { font-size: 12px; font-weight: 400; color: var(--ptl-meridian-text-secondary); }
.ptl-meridian-progress { height: 8px; border-radius: var(--ptl-meridian-radius-full); background: var(--ptl-meridian-border-subtle); overflow: hidden; }
.ptl-meridian-progress > span { display: block; height: 100%; background: var(--ptl-meridian-brand); transition: width var(--ptl-meridian-duration-normal); }
.ptl-meridian-stat-card .ptl-meridian-link { font-size: 12px; font-weight: 600; color: var(--ptl-meridian-text-brand); align-self: flex-start; margin-top: 2px; }
.ptl-meridian-stat-card .ptl-meridian-link:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ─── Overview card ──────────────────────────────────────────────────────── */
.ptl-meridian-overview-card { background: var(--ptl-meridian-bg-surface); border: 1px solid var(--ptl-meridian-border-subtle); border-radius: var(--ptl-meridian-radius); padding: 20px 24px; display: flex; flex-wrap: wrap; gap: 28px; }
.ptl-meridian-overview-item { display: flex; align-items: center; gap: 12px; }
.ptl-meridian-overview-item .ptl-meridian-badge { width: 32px; height: 32px; border-radius: var(--ptl-meridian-radius); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 15px; }
.ptl-meridian-overview-item .ptl-meridian-label { font-size: 12px; font-weight: 400; color: var(--ptl-meridian-text-secondary); display: block; }
.ptl-meridian-overview-item .ptl-meridian-value { font-size: 12px; font-weight: 600; color: var(--ptl-meridian-text-primary); display: block; }

.ptl-meridian-badge-success { background: var(--ptl-meridian-status-success-bg); color: var(--ptl-meridian-status-success-text); }
.ptl-meridian-badge-warning { background: var(--ptl-meridian-status-warning-bg); color: var(--ptl-meridian-status-warning-text); }
.ptl-meridian-badge-error   { background: var(--ptl-meridian-status-error-bg);   color: var(--ptl-meridian-status-error-text); }
.ptl-meridian-badge-info    { background: var(--ptl-meridian-status-info-bg);    color: var(--ptl-meridian-status-info-text); }
.ptl-meridian-badge-brand   { background: var(--ptl-meridian-brand-bg-subtle);   color: var(--ptl-meridian-text-brand); }

/* ─── Generic surface card (bảng, form...) ───────────────────────────────── */
.ptl-meridian-card { background: var(--ptl-meridian-bg-surface); border: 1px solid var(--ptl-meridian-border-subtle); border-radius: var(--ptl-meridian-radius); padding: 20px; }

/* ─── Floating action button ─────────────────────────────────────────────── */
.ptl-meridian-fab {
  position: fixed; right: 24px; bottom: 24px; z-index: 500;
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--ptl-meridian-bg-surface); border: 1px solid var(--ptl-meridian-border-subtle); border-radius: var(--ptl-meridian-radius-full);
  padding: 8px 18px 8px 8px; box-shadow: 0 8px 30px rgba(0,0,0,.10); cursor: pointer;
  font-size: 14px; font-weight: 700; color: var(--ptl-meridian-text-primary); transition: border-color var(--ptl-meridian-duration-fast);
}
.ptl-meridian-fab:hover { border-color: var(--ptl-meridian-brand); }
/* Nhiều FAB cùng lúc (render_fabs.php): xếp dọc trong 1 khung nổi, FAB con hết tự định vị. */
.ptl-meridian-fab-stack { position: fixed; right: 24px; bottom: 24px; z-index: 500; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.ptl-meridian-fab-stack .ptl-meridian-fab { position: static; font-family: inherit; }
.ptl-meridian-fab.is-icon { padding: 6px; }
.ptl-meridian-fab.is-icon img { display: block; width: 36px; height: 36px; }
.ptl-meridian-fab .ptl-meridian-fab-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: linear-gradient(135deg, var(--ptl-meridian-brand), var(--ptl-meridian-brand-hover));
  color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 15px;
}

/* ─── Responsive ─────────────────────────────────────────────────────────── */
/* Không tự ép collapsed theo bề rộng màn hình ở mức "tablet" — trạng thái
   collapsed CHỈ do người dùng chủ động bấm nút (nhớ qua localStorage), y hệt
   hành vi thật của cPanel Meridian. Dưới 640px chuyển hẳn sang drawer mobile. */
@media (max-width: 640px) {
  .ptl-meridian-sidebar { position: fixed; left: 0; top: var(--ptl-meridian-header-h); width: 240px !important; transform: translateX(-100%); box-shadow: 0 8px 30px rgba(0,0,0,.15); }
  .ptl-meridian-sidebar.mobile-open { transform: translateX(0); }
  .ptl-meridian-sidebar.mobile-open .ptl-meridian-nav-label,
  .ptl-meridian-sidebar.mobile-open .ptl-meridian-nav-group-label, .ptl-meridian-sidebar.mobile-open .ptl-meridian-sidebar-collapse .ptl-meridian-nav-label { display: inline; }
  .ptl-meridian-sidebar.mobile-open .ptl-meridian-nav-item, .ptl-meridian-sidebar.mobile-open .ptl-meridian-sidebar-collapse { justify-content: flex-start; }
  .ptl-meridian-sidebar-collapse { display: none; }
  .ptl-meridian-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 900; display: none; }
  .ptl-meridian-backdrop.show { display: block; }
  .ptl-meridian-hamburger { display: flex !important; }
  .ptl-meridian-search { max-width: none; }
  .ptl-meridian-content { padding: 18px 14px 40px; }
  .ptl-meridian-topbar { padding: 0 12px; gap: 8px; }
  .ptl-meridian-pill-btn span.ptl-meridian-pill-text { display: none; }
  /* Logo trên mobile không cần chiếm đúng sidebar-w (260px, quá rộng cho màn hẹp) - tự co lại
     theo nội dung, nhường chỗ cho search/icon bên phải. */
  .ptl-meridian-logo { min-width: 0; flex: 0 1 auto; border-right: none; padding: 0 12px; }
  .ptl-meridian-logo span { overflow: hidden; text-overflow: ellipsis; }
  .ptl-meridian-kbd { display: none; }
}
@media (max-width: 480px) {
  .ptl-meridian-logo span { display: none; }
}
.ptl-meridian-hamburger { display: none; align-items: center; justify-content: center; width: 34px; height: 34px; border: none; background: transparent; color: var(--ptl-meridian-text-primary); border-radius: var(--ptl-meridian-radius); cursor: pointer; flex-shrink: 0; }
.ptl-meridian-hamburger i { font-size: 18px; }
.ptl-meridian-hamburger:hover { background: var(--ptl-meridian-bg-hover); }