/*
    Bảng màu của trang quản trị — chế độ sáng / tối.

    Mỗi màu là 3 số "R G B" (không có dấu phẩy) để Tailwind ghép được độ trong suốt:
        bg-primary/20  ->  rgb(var(--c-primary) / 0.2)

    - Màu trung tính (nền, chữ, viền...) khai báo ở đây: :root là sáng, html.dark là tối.
    - Màu chủ đạo (primary, tertiary, subtle, sidebar...) do wwwroot/js/theme.js tính từ màu khách chọn
      rồi gán thẳng lên <html>, nên KHÔNG khai báo ở đây (chỉ có giá trị dự phòng khi JS chưa chạy).
    - Nền chế độ sáng không dùng trắng tinh, nền chế độ tối không dùng đen tuyền (chủ dự án yêu cầu).
*/

:root {
    color-scheme: light;

    /* dự phòng khi theme.js chưa chạy: xanh logo CV & Blog */
    --c-primary: 58 105 226;
    --c-primary-container: 45 82 176;
    --c-on-primary: 255 255 255;
    --c-on-primary-container: 255 255 255;
    --c-tertiary: 109 102 218;
    --c-tertiary-container: 85 80 170;
    --c-on-tertiary: 255 255 255;
    --c-on-tertiary-container: 255 255 255;
    --c-inverse-primary: 184 200 245;
    --c-surface-tint: 58 105 226;
    --c-navy-hover: 45 82 176;
    --c-green-subtle: 238 243 253;
    --c-blue-subtle: 242 241 252;
    --c-side-from: 38 66 150;
    --c-side-to: 56 52 130;

    /* nền */
    --c-background: 244 246 250;
    --c-surface-bg: 244 246 250;
    --c-surface: 251 252 254;
    --c-surface-bright: 251 252 254;
    --c-surface-container-lowest: 251 252 254;
    --c-surface-container-low: 247 249 252;
    --c-surface-container: 238 241 246;
    --c-surface-container-high: 232 235 241;
    --c-surface-container-highest: 224 228 235;
    --c-surface-variant: 238 241 246;
    --c-surface-dim: 224 228 235;

    /* chữ */
    --c-on-background: 31 41 55;
    --c-on-surface: 31 41 55;
    --c-on-surface-variant: 75 85 99;
    --c-text-muted: 107 114 128;

    /* viền */
    --c-border-gray: 224 228 235;
    --c-outline: 156 163 175;
    --c-outline-variant: 224 228 235;

    --c-secondary: 107 114 128;
    --c-on-secondary: 255 255 255;

    --c-inverse-surface: 38 43 54;
    --c-inverse-on-surface: 244 246 250;

    /* trạng thái */
    --c-error: 185 28 28;
    --c-on-error: 255 255 255;
    --c-error-container: 254 242 242;
    --c-on-error-container: 185 28 28;
    --c-red-subtle: 254 242 242;
    --c-red-danger: 185 28 28;
    --c-amber-subtle: 255 251 235;
    --c-amber-warning: 180 83 9;
}

html.dark {
    color-scheme: dark;

    --c-background: 18 21 28;
    --c-surface-bg: 18 21 28;
    --c-surface: 26 30 39;
    --c-surface-bright: 38 44 55;
    --c-surface-container-lowest: 26 30 39;
    --c-surface-container-low: 22 26 34;
    --c-surface-container: 33 38 48;
    --c-surface-container-high: 40 46 58;
    --c-surface-container-highest: 48 55 68;
    --c-surface-variant: 40 46 58;
    --c-surface-dim: 14 17 23;

    --c-on-background: 229 231 235;
    --c-on-surface: 229 231 235;
    --c-on-surface-variant: 163 170 182;
    --c-text-muted: 148 155 168;

    --c-border-gray: 48 55 68;
    --c-outline: 107 114 128;
    --c-outline-variant: 48 55 68;

    --c-secondary: 148 155 168;
    --c-on-secondary: 18 21 28;

    --c-inverse-surface: 229 231 235;
    --c-inverse-on-surface: 26 30 39;

    --c-error: 248 113 113;
    --c-on-error: 69 10 10;
    --c-error-container: 69 26 30;
    --c-on-error-container: 252 165 165;
    --c-red-subtle: 61 25 30;
    --c-red-danger: 248 113 113;
    --c-amber-subtle: 58 45 16;
    --c-amber-warning: 217 119 6;
}

body {
    background-color: rgb(var(--c-surface-bg));
    color: rgb(var(--c-on-surface));
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
}

/* Chuyển màu mượt khi đổi sáng/tối (không áp lúc mới tải trang, tránh nháy) */
html.theme-ready body,
html.theme-ready body * {
    transition-property: background-color, border-color, color, fill, stroke;
    transition-duration: 150ms;
    transition-timing-function: ease;
}

/* Thanh cuộn theo chế độ */
html.dark ::-webkit-scrollbar { width: 10px; height: 10px; }
html.dark ::-webkit-scrollbar-track { background: rgb(var(--c-surface-container-low)); }
html.dark ::-webkit-scrollbar-thumb { background: rgb(var(--c-outline)); border-radius: 6px; }

/* Blazor <FocusOnNavigate> tự đưa focus vào <h1> (kèm tabindex="-1") mỗi lần chuyển trang:
   tắt viền focus của riêng phần tử này để vào trang không bị khung viền quanh tiêu đề.
   Nút/liên kết/ô nhập không dùng tabindex="-1" nên viền focus của chúng (phím Tab) giữ nguyên. */
h1:focus, [tabindex="-1"]:focus { outline: none; }

/* Ô nhập: màu gợi ý (placeholder) và vùng chọn */
::placeholder { color: rgb(var(--c-text-muted) / 0.7); }
::selection { background: rgb(var(--c-primary) / 0.28); }

/* ===== Thanh bên (sidebar): gradient theo màu chủ đạo, chữ sáng ở cả chế độ sáng và tối ===== */
.vlog-sidebar {
    background-image: linear-gradient(165deg, rgb(var(--c-side-from)) 0%, rgb(var(--c-side-to)) 100%);
    background-color: rgb(var(--c-side-from));
    color: rgb(255 255 255 / 0.78);
    border-right: 1px solid rgb(255 255 255 / 0.08);
    box-shadow: 2px 0 12px rgb(0 0 0 / 0.12);
}

/* logo gốc màu xanh trên nền trong suốt -> đổi thành trắng cho nổi trên nền gradient */
.vlog-sidebar-logo { filter: brightness(0) invert(1); }

.vlog-nav-item { color: rgb(255 255 255 / 0.78); }
.vlog-nav-item:hover { background-color: rgb(255 255 255 / 0.10); color: #fff; }
.vlog-nav-item.vlog-nav-active {
    background-color: rgb(255 255 255 / 0.16);
    color: #fff;
    font-weight: 600;
}
.vlog-nav-item.vlog-nav-active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 7px;
    bottom: 7px;
    width: 3px;
    background: #fff;
    border-radius: 0 3px 3px 0;
}

/* thanh cuộn của sidebar: mảnh, sáng mờ */
.vlog-sidebar-nav::-webkit-scrollbar { width: 6px; }
.vlog-sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.vlog-sidebar-nav::-webkit-scrollbar-thumb { background: rgb(255 255 255 / 0.25); border-radius: 6px; }

/* ===== CKEditor 5: ánh xạ biến của editor vào bảng màu (tự theo sáng/tối và màu chủ đạo) ===== */
:root {
    --ck-color-base-foreground: rgb(var(--c-surface-container));
    --ck-color-base-background: rgb(var(--c-surface));
    --ck-color-base-border: rgb(var(--c-border-gray));
    --ck-color-base-text: rgb(var(--c-on-surface));
    --ck-color-base-active: rgb(var(--c-primary));
    --ck-color-base-active-focus: rgb(var(--c-primary-container));
    --ck-color-focus-border: rgb(var(--c-primary));
    --ck-color-toolbar-background: rgb(var(--c-surface-container-low));
    --ck-color-toolbar-border: rgb(var(--c-border-gray));
    --ck-color-button-default-hover-background: rgb(var(--c-surface-container-high));
    --ck-color-button-default-active-background: rgb(var(--c-surface-container-highest));
    --ck-color-button-on-background: rgb(var(--c-primary) / 0.14);
    --ck-color-button-on-hover-background: rgb(var(--c-primary) / 0.22);
    --ck-color-button-on-color: rgb(var(--c-primary));
    --ck-color-panel-background: rgb(var(--c-surface));
    --ck-color-panel-border: rgb(var(--c-border-gray));
    --ck-color-dropdown-panel-background: rgb(var(--c-surface));
    --ck-color-dropdown-panel-border: rgb(var(--c-border-gray));
    --ck-color-input-background: rgb(var(--c-surface));
    --ck-color-input-border: rgb(var(--c-border-gray));
    --ck-color-input-text: rgb(var(--c-on-surface));
    --ck-color-list-background: rgb(var(--c-surface));
    --ck-color-list-button-hover-background: rgb(var(--c-surface-container-high));
    --ck-color-list-button-on-background: rgb(var(--c-primary));
    --ck-color-list-button-on-text: rgb(var(--c-on-primary));
}

.ck.ck-editor__editable:not(.ck-editor__nested-editable) {
    background-color: rgb(var(--c-surface));
    color: rgb(var(--c-on-surface));
}

/* Thanh bên trượt/co giãn mượt khi thu gọn hoặc mở ngăn kéo trên điện thoại (thắng quy tắc chuyển màu chung phía trên) */
html.theme-ready body .vlog-sidebar {
    transition-property: width, transform, background-color, border-color;
    transition-duration: 200ms;
    transition-timing-function: ease;
}

/* ===== Hiệu ứng đóng/mở thanh bên mượt (thắng quy tắc chuyển màu chung phía trên nhờ độ ưu tiên cao hơn) ===== */
:root { --vlog-ease: cubic-bezier(0.4, 0, 0.2, 1); }

html.theme-ready body .vlog-sidebar {
    transition-property: width, transform, background-color, border-color;
    transition-duration: 350ms;
    transition-timing-function: var(--vlog-ease);
}
html.theme-ready body .vlog-shell-content {
    transition: padding-left 350ms var(--vlog-ease);
}
html.theme-ready body .vlog-shell-header {
    transition: left 350ms var(--vlog-ease), background-color 150ms ease, border-color 150ms ease;
}
html.theme-ready body .vlog-fade {
    transition: opacity 250ms ease;
}
html.theme-ready body .vlog-label {
    transition: max-width 350ms var(--vlog-ease), opacity 200ms ease, margin-left 350ms var(--vlog-ease);
}
html.theme-ready body .vlog-nav-item {
    transition: padding 350ms var(--vlog-ease), background-color 150ms ease, color 150ms ease;
}
html.theme-ready body .vlog-group {
    transition: max-height 350ms var(--vlog-ease), opacity 200ms ease, padding 350ms var(--vlog-ease);
}
html.theme-ready body .vlog-divider {
    transition: opacity 300ms ease, margin 350ms var(--vlog-ease);
}

/* Trạng thái mặc định (đang mở rộng / điện thoại): hiện đầy đủ */
.vlog-sidebar-nav { overflow-x: hidden; }
.vlog-label { display: inline-block; max-width: 220px; white-space: nowrap; overflow: hidden; opacity: 1; }
.vlog-group { max-height: 44px; overflow: hidden; opacity: 1; }
.vlog-divider { height: 1px; margin: 0 0.5rem; opacity: 0; background: rgb(255 255 255 / 0.12); }
.vlog-fade { opacity: 1; }

/* Trạng thái thu gọn: CHỈ áp dụng từ màn hình lớn; trên điện thoại ngăn kéo luôn đủ chữ */
@media (min-width: 1024px) {
    .vlog-fade.is-hidden { opacity: 0; pointer-events: none; }
    .vlog-label.is-collapsed { max-width: 0; opacity: 0; margin-left: -0.75rem; }
    .vlog-nav-item.is-collapsed { padding-left: 1.25rem; padding-right: 0; }
    .vlog-group.is-collapsed { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; }
    .vlog-divider.is-visible { opacity: 1; margin: 0.75rem 0.5rem; }
}

/* Thanh bên thu gọn thì khung nội dung rộng thêm đúng phần thanh bên nhường lại (1448 -> 1656px), có hiệu ứng mượt */
html.theme-ready body .vlog-shell-container {
    transition: max-width 350ms var(--vlog-ease);
}

/* Thanh cố định đáy trang (vd thanh lưu bài viết): từ màn hình lớn chừa chỗ cho thanh bên (theo biến do MainLayout đặt), điện thoại phủ hết chiều ngang */
@media (min-width: 1024px) {
    .vlog-fixed-offset { left: var(--vlog-sidebar-w, 18rem); }
}
html.theme-ready body .vlog-fixed-offset {
    transition: left 350ms var(--vlog-ease), background-color 150ms ease, border-color 150ms ease;
}

/* =====================================================================
   ADMIN CLIENT v2 — "Studio viết blog" (Bản 1 đã chọn 2026-10-12)
   Bản vẽ gốc: UI-Vlog/Admin Client v2/ban-1/index.html
   Mọi màu lấy từ biến --c-* nên tự theo sáng/tối và màu chủ đạo của website.
   Tiền tố .wa-* để không đụng các lớp vlog-* cũ.
   ===================================================================== */
:root {
    --wa-grad: linear-gradient(135deg, rgb(var(--c-primary)), rgb(var(--c-tertiary)));
    --wa-shadow-card: 0 1px 2px rgb(16 24 40 / 0.04), 0 10px 28px -16px rgb(16 24 40 / 0.20);
    --wa-glow: 0 10px 26px -10px rgb(var(--c-primary) / 0.55);
}
html.dark {
    --wa-shadow-card: 0 1px 2px rgb(0 0 0 / 0.35), 0 12px 30px -16px rgb(0 0 0 / 0.65);
    --wa-glow: 0 10px 26px -10px rgb(var(--c-primary) / 0.40);
}

/* Nền khung: hai vệt sáng nhẹ ở góc */
.wa-shell {
    background-image:
        radial-gradient(900px 420px at 0% -80px, rgb(var(--c-primary) / 0.10), transparent 70%),
        radial-gradient(700px 360px at 100% -60px, rgb(var(--c-tertiary) / 0.09), transparent 70%);
    background-attachment: fixed;
}

/* ---------- Thẻ ---------- */
.wa-card {
    background-color: rgb(var(--c-surface-container-lowest));
    border: 1px solid rgb(var(--c-border-gray));
    border-radius: 1rem;
    box-shadow: var(--wa-shadow-card);
}
.wa-card-h {
    display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
    padding: 0.8rem 1rem; border-bottom: 1px solid rgb(var(--c-border-gray));
}
.wa-card-title { display: flex; align-items: center; gap: 0.55rem; font-size: 0.875rem; font-weight: 700; color: rgb(var(--c-on-surface)); }
.wa-card-title::before { content: ""; width: 4px; height: 15px; border-radius: 2px; background-image: var(--wa-grad); flex: none; }
.wa-link { color: rgb(var(--c-primary)); font-weight: 600; font-size: 0.8rem; }
.wa-link:hover { text-decoration: underline; }

.wa-btn-grad {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
    background-image: var(--wa-grad); color: rgb(var(--c-on-primary)); box-shadow: var(--wa-glow);
    border-radius: 0.65rem; font-weight: 600; height: 2.25rem; padding: 0 0.95rem; font-size: 0.8125rem; cursor: pointer; border: 0;
    transition: filter 150ms ease;
}
.wa-btn-grad:hover:not(:disabled) { filter: brightness(1.08); }
.wa-btn-grad:disabled { opacity: 0.55; cursor: not-allowed; box-shadow: none; }

.wa-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; height: 2.25rem; padding: 0 0.9rem;
    border-radius: 0.65rem; border: 1px solid rgb(var(--c-border-gray)); background-color: rgb(var(--c-surface-container-lowest));
    color: rgb(var(--c-on-surface-variant)); font-size: 0.8125rem; font-weight: 600; white-space: nowrap; cursor: pointer;
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}
.wa-btn:hover:not(:disabled) { background-color: rgb(var(--c-surface-container)); }
.wa-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.wa-btn.is-sm { height: 1.9rem; padding: 0 0.65rem; font-size: 0.75rem; border-radius: 0.55rem; }
.wa-btn.is-danger { border-color: rgb(var(--c-red-danger) / 0.35); color: rgb(var(--c-red-danger)); }
.wa-btn.is-danger:hover:not(:disabled) { background-color: rgb(var(--c-red-subtle)); }
.wa-btn.is-warn { border-color: rgb(var(--c-amber-warning) / 0.4); background-color: rgb(var(--c-amber-subtle)); color: rgb(var(--c-amber-warning)); }

.wa-input {
    width: 100%; height: 2.5rem; padding: 0 0.8rem; border-radius: 0.65rem;
    border: 1px solid rgb(var(--c-border-gray)); background-color: rgb(var(--c-surface-container-lowest));
    color: rgb(var(--c-on-surface)); font-size: 0.875rem; outline: none;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}
.wa-input:focus { border-color: rgb(var(--c-primary)); box-shadow: 0 0 0 4px rgb(var(--c-primary) / 0.12); }
textarea.wa-input { height: auto; padding: 0.55rem 0.8rem; }
select.wa-input { width: auto; padding-right: 1.75rem; }

/* ---------- Khối chào đầu Trang chủ ---------- */
.wa-hero {
    position: relative; overflow: hidden; border-radius: 1.25rem; padding: 1.6rem 1.75rem; color: #fff;
    background-image: linear-gradient(118deg, rgb(var(--c-side-from)) 0%, rgb(var(--c-primary-container)) 52%, rgb(var(--c-tertiary-container)) 100%);
    box-shadow: 0 18px 40px -22px rgb(var(--c-primary) / 0.7);
}
.wa-hero::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image: radial-gradient(rgb(255 255 255 / 0.18) 1px, transparent 1.4px); background-size: 18px 18px;
    -webkit-mask-image: linear-gradient(100deg, transparent 35%, #000 100%);
    mask-image: linear-gradient(100deg, transparent 35%, #000 100%);
}
.wa-hero > * { position: relative; z-index: 1; }
.wa-hero-date {
    display: inline-flex; align-items: center; gap: 0.4rem; height: 1.5rem; padding: 0 0.7rem;
    border-radius: 0.75rem; background: rgb(255 255 255 / 0.16); font-size: 0.75rem; font-weight: 600;
}
.wa-hero-stat {
    min-width: 14rem; padding: 0.85rem 1rem; border-radius: 0.9rem;
    background: rgb(255 255 255 / 0.14); border: 1px solid rgb(255 255 255 / 0.28); backdrop-filter: blur(6px);
}
.wa-hbtn {
    display: inline-flex; align-items: center; gap: 0.5rem; height: 2.25rem; padding: 0 0.95rem;
    border-radius: 0.65rem; font-weight: 600; font-size: 0.82rem; color: #fff;
    border: 1px solid rgb(255 255 255 / 0.4); background: rgb(255 255 255 / 0.1); cursor: pointer;
    transition: background-color 150ms ease, transform 150ms ease;
}
.wa-hbtn:hover { background: rgb(255 255 255 / 0.2); transform: translateY(-1px); }
.wa-hbtn.is-solid { background: #fff; color: rgb(var(--c-primary-container)); border-color: #fff; }
.wa-hbtn.is-solid:hover { background: rgb(255 255 255 / 0.92); }
.wa-hbtn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

/* ---------- Thẻ "Việc nên làm" ---------- */
.wa-queue {
    --wa-tint: var(--c-outline);
    position: relative; display: flex; align-items: center; gap: 0.9rem; padding: 1rem;
    border-radius: 1rem; border: 1px solid rgb(var(--c-border-gray)); box-shadow: var(--wa-shadow-card);
    background-image: linear-gradient(100deg, color-mix(in srgb, rgb(var(--wa-tint)) 11%, rgb(var(--c-surface-container-lowest))), rgb(var(--c-surface-container-lowest)) 62%);
    transition: transform 160ms ease, box-shadow 160ms ease;
}
.wa-queue.is-warn { --wa-tint: var(--c-amber-warning); border-color: color-mix(in srgb, rgb(var(--c-amber-warning)) 35%, rgb(var(--c-border-gray))); }
.wa-queue.is-calm { --wa-tint: var(--c-primary); }
.wa-queue:hover { transform: translateY(-3px); box-shadow: 0 18px 34px -18px rgb(16 24 40 / 0.35); }
.wa-queue-num {
    display: grid; place-items: center; width: 3.5rem; height: 3.5rem; min-width: 3.5rem; border-radius: 0.95rem;
    font-size: 1.5rem; font-weight: 800; font-variant-numeric: tabular-nums; color: rgb(var(--wa-tint));
    background-color: color-mix(in srgb, rgb(var(--wa-tint)) 15%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, rgb(var(--wa-tint)) 28%, transparent);
}

/* ---------- Số liệu ---------- */
.wa-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.wa-kpi { position: relative; padding: 1rem 1.15rem; border-right: 1px solid rgb(var(--c-border-gray)); }
.wa-kpi:last-child { border-right: 0; }
.wa-kpi-icon { width: 1.9rem; height: 1.9rem; border-radius: 0.65rem; display: grid; place-items: center; color: #fff; box-shadow: 0 8px 16px -8px rgb(0 0 0 / 0.35); }
.wa-kpi-icon.t1 { background-image: var(--wa-grad); }
.wa-kpi-icon.t2 { background-image: linear-gradient(135deg, #f59e0b, #f97316); }
.wa-kpi-icon.t3 { background-image: linear-gradient(135deg, #16a34a, #4ade80); }
.wa-kpi-icon.t4 { background-image: linear-gradient(135deg, #0ea5a4, #22c1c3); }
@media (max-width: 1180px) {
    .wa-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .wa-kpi:nth-child(2) { border-right: 0; }
    .wa-kpi:nth-child(-n+2) { border-bottom: 1px solid rgb(var(--c-border-gray)); }
}
@media (max-width: 560px) {
    .wa-kpis { grid-template-columns: 1fr; }
    .wa-kpi { border-right: 0; border-bottom: 1px solid rgb(var(--c-border-gray)); }
    .wa-kpi:last-child { border-bottom: 0; }
}

/* ---------- Thanh tiến độ ---------- */
.wa-prog { height: 0.5rem; border-radius: 0.25rem; background-color: rgb(var(--c-surface-container-high)); overflow: hidden; }
.wa-prog > i { display: block; height: 100%; border-radius: 0.25rem; background-image: linear-gradient(90deg, rgb(var(--c-primary)), rgb(var(--c-tertiary))); }

/* ---------- Avatar màu theo tên ---------- */
.wa-avatar {
    display: grid; place-items: center; flex: none; border-radius: 9999px; color: #fff; font-weight: 700; overflow: hidden;
    background-image: linear-gradient(135deg, hsl(var(--ah, 215) 72% 56%), hsl(calc(var(--ah, 215) + 42) 70% 46%));
    box-shadow: 0 6px 14px -6px hsl(var(--ah, 215) 70% 40% / 0.7);
}

/* ---------- Ảnh bìa bài viết (không có ảnh thì dùng nền màu theo mã bài) ---------- */
.wa-thumb {
    position: relative; flex: none; overflow: hidden; border-radius: 0.65rem; display: grid; place-items: center; color: rgb(255 255 255 / 0.92);
    background-image: linear-gradient(135deg, hsl(var(--ah, 215) 62% 60%), hsl(calc(var(--ah, 215) + 36) 58% 48%));
}
.wa-thumb > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wa-thumb.is-none {
    background-image: none; background-color: rgb(var(--c-surface-container)); color: rgb(var(--c-text-muted));
    border: 1px dashed rgb(var(--c-outline-variant));
}

/* ---------- Bảng ---------- */
.wa-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.wa-table thead th {
    text-align: left; background-color: rgb(var(--c-surface-container-low)); color: rgb(var(--c-text-muted));
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
    padding: 0 0.9rem; height: 2.4rem; border-bottom: 1px solid rgb(var(--c-border-gray)); white-space: nowrap;
}
.wa-table tbody td { padding: 0.65rem 0.9rem; border-bottom: 1px solid rgb(var(--c-border-gray)); vertical-align: middle; }
.wa-table tbody tr:last-child td { border-bottom: 0; }

/* Trang danh sách vừa khít màn hình (từ màn hình lớn): tiêu đề, tab, bộ lọc và phân trang đứng yên,
   chỉ danh sách cuộn bên trong khung (thanh cuộn nằm ở danh sách, không phải ở rìa trang). 7rem = thanh trên 4rem + lề trên/dưới 1.5rem. */
@media (min-width: 1024px) {
    .wa-fit { height: calc(100vh - 7rem); height: calc(100dvh - 7rem); }
    .wa-fit > .wa-card { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
    /* Tab, bộ lọc, phân trang giữ nguyên chiều cao (không bị ép bẹp); chỉ vùng danh sách co giãn và cuộn */
    .wa-fit > .wa-card > * { flex-shrink: 0; }
    .wa-fit > .wa-card > .wa-fit-scroll { flex: 1 1 0; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
    .wa-fit-scroll .wa-table thead th { position: sticky; top: 0; z-index: 2; }
    .wa-gallery.wa-fit-scroll { align-content: start; grid-auto-rows: max-content; }
    /* Bảng bài viết: chia cột theo tỉ lệ, cột Bài viết không giãn thừa chỗ trống, không bị thanh cuộn ngang */
    .wa-table.wa-cols-article { table-layout: fixed; min-width: 0; }
    .wa-table.wa-cols-article th:nth-child(1) { width: 29%; }
    .wa-table.wa-cols-article th:nth-child(2) { width: 15%; }
    .wa-table.wa-cols-article th:nth-child(3) { width: 10%; }
    .wa-table.wa-cols-article th:nth-child(4) { width: 8%; }
    .wa-table.wa-cols-article th:nth-child(5) { width: 7%; }
    .wa-table.wa-cols-article th:nth-child(6) { width: 11%; }
    .wa-table.wa-cols-article th:nth-child(7) { width: 20%; }
    .wa-table.wa-cols-article .wa-input { max-width: 100%; }
}
/* Chú thích hiện NGAY khi rê chuột (thay thuộc tính title của trình duyệt vì title phải chờ khoảng 1,5 giây mới hiện).
   Hiện phía TRÊN nút, canh phải (nút thao tác nằm sát mép phải bảng nên canh giữa sẽ bị cắt). Dùng: class "wa-tip" + data-tip="Nội dung". */
.wa-tip { position: relative; }
.wa-tip::after {
    content: attr(data-tip); position: absolute; bottom: calc(100% + 6px); right: 0; z-index: 60;
    padding: 4px 9px; border-radius: 6px; background: #1f2937; color: #fff; font-size: 12px; font-weight: 500; line-height: 1.35;
    white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 60ms ease;
}
.wa-tip:hover::after, .wa-tip:focus-visible::after { opacity: 1; }

/* Thao tác ngoài dòng (danh sách bài viết): màn lớn hiện cả hàng nút, màn nhỏ (<= 900px, cùng ngưỡng chế độ thẻ) chỉ còn nút ba chấm dọc. */
.wa-act-inline { display: inline-flex; align-items: center; justify-content: flex-end; gap: 2px; flex-wrap: nowrap; }
.wa-act-menu { display: none; }
@media (max-width: 900px) {
    .wa-act-inline { display: none; }
    .wa-act-menu { display: inline-flex; }
}
.wa-table tbody tr:hover td { background-color: rgb(var(--c-primary) / 0.06); }
.wa-table tbody tr:hover td:first-child { box-shadow: inset 3px 0 0 rgb(var(--c-primary)); }
@media (max-width: 900px) {
    .wa-table.is-cards thead { display: none; }
    .wa-table.is-cards tbody tr { display: block; position: relative; padding: 0.75rem 0.9rem; border-bottom: 1px solid rgb(var(--c-border-gray)); }
    .wa-table.is-cards tbody td { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; height: auto; padding: 0.25rem 0; border: 0; }
    .wa-table.is-cards tbody td::before { content: attr(data-l); color: rgb(var(--c-text-muted)); font-weight: 600; flex: none; }
    .wa-table.is-cards tbody td.is-first { display: block; padding: 0 2.5rem 0.4rem 0; }
    .wa-table.is-cards tbody td.is-first::before, .wa-table.is-cards tbody td.is-actions::before { display: none; }
    .wa-table.is-cards tbody td.is-actions { position: absolute; right: 0.5rem; top: 0.5rem; padding: 0; }
    .wa-table.is-cards tbody td.is-hide-m { display: none; }
    .wa-table.is-cards tbody tr:hover td { background-color: transparent; box-shadow: none; }
}

/* ---------- Tab lọc ---------- */
.wa-tabs { display: flex; gap: 0.15rem; padding: 0 0.6rem; border-bottom: 1px solid rgb(var(--c-border-gray)); overflow-x: auto; overflow-y: hidden; }
.wa-tab {
    display: flex; align-items: center; gap: 0.45rem; height: 2.75rem; padding: 0 0.8rem; background: none;
    color: rgb(var(--c-text-muted)); font-weight: 600; white-space: nowrap;
    border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer;
}
.wa-tab:hover { color: rgb(var(--c-on-surface)); }
.wa-tab.is-on { color: rgb(var(--c-primary)); border-image: linear-gradient(90deg, rgb(var(--c-primary)), rgb(var(--c-tertiary))) 1; }
.wa-tab-n { font-size: 0.72rem; padding: 0.05rem 0.45rem; border-radius: 0.6rem; background-color: rgb(var(--c-surface-container)); color: rgb(var(--c-on-surface-variant)); }
.wa-tab.is-on .wa-tab-n { background-color: rgb(var(--c-primary) / 0.12); color: rgb(var(--c-primary)); }

/* ---------- Chuyển kiểu xem (danh sách / thẻ) ---------- */
.wa-seg { display: inline-flex; border: 1px solid rgb(var(--c-border-gray)); border-radius: 0.65rem; overflow: hidden; }
.wa-seg > button { width: 2.5rem; height: 2.4rem; display: grid; place-items: center; color: rgb(var(--c-text-muted)); background: none; }
.wa-seg > button.is-on { background-color: rgb(var(--c-primary) / 0.1); color: rgb(var(--c-primary)); }

/* ---------- Lưới thẻ bài viết ---------- */
.wa-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); gap: 1rem; padding: 1rem; }
.wa-pcard {
    display: flex; flex-direction: column; overflow: hidden; border-radius: 0.9rem; border: 1px solid rgb(var(--c-border-gray));
    background-color: rgb(var(--c-surface-container-lowest)); transition: transform 160ms ease, box-shadow 160ms ease;
}
.wa-pcard:hover { transform: translateY(-3px); box-shadow: var(--wa-shadow-card); }

/* ---------- Thanh bên dạng icon: rê chuột bung tên, nổi lên trên nội dung ---------- */
.wa-nav-dot {
    display: none; position: absolute; top: 0.35rem; left: 2.1rem; width: 0.5rem; height: 0.5rem;
    border-radius: 9999px; background: #ffd166; border: 2px solid rgb(var(--c-side-from)); box-sizing: content-box;
}
.wa-nav-badge {
    margin-left: auto; min-width: 1.25rem; height: 1.25rem; padding: 0 0.4rem; border-radius: 0.65rem;
    background: #fff; color: rgb(var(--c-side-from)); font-size: 0.7rem; font-weight: 700; display: grid; place-items: center;
}
@media (min-width: 1024px) {
    .wa-nav-dot.is-collapsed { display: block; }
    .wa-nav-badge.is-collapsed { display: none; }

    .vlog-sidebar.wa-rail:hover { width: 18rem; box-shadow: 0 18px 40px -12px rgb(0 0 0 / 0.45); }
    .vlog-sidebar.wa-rail:hover .vlog-label.is-collapsed { max-width: 220px; opacity: 1; margin-left: 0; }
    .vlog-sidebar.wa-rail:hover .vlog-nav-item.is-collapsed { padding-left: 0.75rem; padding-right: 0.75rem; }
    .vlog-sidebar.wa-rail:hover .vlog-group.is-collapsed { max-height: 44px; opacity: 1; padding-top: 1rem; padding-bottom: 0.25rem; }
    .vlog-sidebar.wa-rail:hover .vlog-divider.is-visible { opacity: 0; }
    .vlog-sidebar.wa-rail:hover .vlog-fade.is-hidden { opacity: 1; pointer-events: auto; }
    .vlog-sidebar.wa-rail:hover img.vlog-fade:not(.is-hidden) { opacity: 0; }
    .vlog-sidebar.wa-rail:hover .wa-nav-dot.is-collapsed { display: none; }
    .vlog-sidebar.wa-rail:hover .wa-nav-badge.is-collapsed { display: grid; }
}

/* ---------- Tiến trình kết nối tên miền (trang Tên miền): 4 bước nối nhau bằng một đường kẻ ---------- */
.wa-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 1.35rem 1rem 1.2rem; }
.wa-step { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.55rem; padding: 0 0.35rem; }
.wa-step::before {
    content: ""; position: absolute; top: 1.1rem; right: 50%; width: 100%; height: 2px;
    background-color: rgb(var(--c-border-gray));
}
.wa-step:first-child::before { display: none; }
.wa-step.is-done::before, .wa-step.is-now::before { background-image: linear-gradient(90deg, rgb(var(--c-primary)), rgb(var(--c-tertiary))); }
.wa-step-dot {
    position: relative; z-index: 1; width: 2.3rem; height: 2.3rem; border-radius: 9999px; display: grid; place-items: center;
    background-color: rgb(var(--c-surface-container-high)); color: rgb(var(--c-text-muted));
}
.wa-step.is-done .wa-step-dot { background-image: var(--wa-grad); color: rgb(var(--c-on-primary)); box-shadow: var(--wa-glow); }
.wa-step.is-now .wa-step-dot {
    background-color: rgb(var(--c-surface-container-lowest)); color: rgb(var(--c-primary));
    box-shadow: inset 0 0 0 2px rgb(var(--c-primary)), 0 0 0 5px rgb(var(--c-primary) / 0.14);
}
.wa-step.is-bad .wa-step-dot {
    background-color: rgb(var(--c-red-subtle)); color: rgb(var(--c-red-danger));
    box-shadow: inset 0 0 0 2px rgb(var(--c-red-danger));
}
.wa-step-t { font-size: 0.8125rem; font-weight: 700; color: rgb(var(--c-on-surface)); }
.wa-step.is-todo .wa-step-t { color: rgb(var(--c-text-muted)); font-weight: 600; }
.wa-step-h { font-size: 0.75rem; line-height: 1.35; color: rgb(var(--c-text-muted)); }
@media (max-width: 560px) {
    .wa-steps { grid-template-columns: 1fr; gap: 0.9rem; }
    .wa-step { flex-direction: row; align-items: flex-start; text-align: left; gap: 0.75rem; }
    .wa-step::before { display: none; }
}

/* ---------- Biểu đồ cột lượt xem theo ngày (Trang chủ) ---------- */
.wa-seg.is-text > button { width: auto; height: 2rem; padding: 0 0.8rem; font-size: 0.8125rem; font-weight: 600; white-space: nowrap; }
.wa-bars {
    position: relative; display: flex; align-items: flex-end; gap: 2px; height: 10rem;
    background-image: linear-gradient(to top, rgb(var(--c-border-gray)) 1px, transparent 1px);
    background-size: 100% 25%;
}
/* min-width: 0 để 90 cột vẫn co vừa khung trên điện thoại (không tràn ra ngoài); nhiều cột thì khe hẹp lại. */
.wa-bars.is-dense { gap: 1px; }
.wa-bar {
    flex: 1 1 0; min-width: 0; border-radius: 2px 2px 0 0;
    background-color: rgb(var(--c-primary) / 0.55); transition: background-color 120ms ease;
}
.wa-bar:hover { background-color: rgb(var(--c-primary)); }
.wa-bar.is-today { background-image: var(--wa-grad); }
.wa-bar.is-zero { background-color: rgb(var(--c-border-gray)); }

/* ---------- Chuyển trang: khối trồi lên lần lượt ---------- */
.wa-rise { animation: wa-rise 420ms cubic-bezier(0.2, 0.7, 0.2, 1) both; animation-delay: calc(var(--d, 0) * 40ms); }
@keyframes wa-rise { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) {
    .wa-rise { animation: none; }
    .wa-queue, .wa-hbtn, .wa-pcard { transition: none; }
}