/* =============================================================
   Theme: Xanh Lục Tài Chính (finance_emerald)
   Dùng CSS variables để dễ đổi theme sau này
   ============================================================= */

/* Thuộc tính [hidden] phải LUÔN ẩn: nếu không, .btn{display:inline-flex} (origin
   tác giả) sẽ đè quy tắc UA [hidden]{display:none}, khiến nút có hidden vẫn hiện. */
[hidden] { display: none !important; }

:root {
    /* Màu chủ đạo — xanh lục tài chính */
    --primary:          #059669;
    --primary-hover:    #047857;
    --primary-light:    rgba(5, 150, 105, 0.12);
    --primary-text:     #fff;

    /* Sidebar */
    --sidebar-bg:       #1E293B;
    --sidebar-width:    240px;
    --sidebar-text:     rgba(255, 255, 255, 0.65);
    --sidebar-text-active: #fff;
    --sidebar-border:   rgba(255, 255, 255, 0.08);
    --sidebar-hover:    rgba(255, 255, 255, 0.07);
    --sidebar-active:   rgba(5, 150, 105, 0.2);

    /* Topbar */
    --topbar-bg:        #fff;
    --topbar-border:    #e2e8f0;
    --topbar-text:      #1E293B;
    /* Chiều cao topbar. Topbar là position:sticky nên MỌI liên kết #mốc đều bị nó che 56px đầu —
       chỗ nào có mốc thì đặt scroll-margin-top theo biến này thay vì viết cứng lại con số. */
    --topbar-h:         56px;

    /* Nội dung */
    --content-bg:       #F1F5F9;
    --card-bg:          #fff;
    --card-border:      #e2e8f0;
    --card-shadow:      0 1px 6px rgba(0,0,0,0.07);
    --card-radius:      12px;

    /* Chữ */
    --text-dark:        #1E293B;
    --text-muted:       #64748B;
    --text-light:       #94A3B8;

    /* Trạng thái */
    --success:          #16A34A;
    --danger:           #DC2626;
    --warning:          #D97706;
    --info:             #0284C7;
}

/* ── Reset & Base ── */
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    background: var(--content-bg);
    color: var(--text-dark);
    font-size: 14px;
}

/* ── Sidebar ── */
.admin-sidebar {
    position: fixed;
    top: 0; left: 0;
    width: var(--sidebar-width);
    height: 100vh;
    background: var(--sidebar-bg);
    display: flex;
    flex-direction: column;
    z-index: 1000;
    overflow-y: auto;
}

.sidebar-brand {
    padding: 20px 20px 16px;
    border-bottom: 1px solid var(--sidebar-border);
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}
.sidebar-brand .brand-icon {
    width: 30px; height: 28px;
    flex-shrink: 0;
}
.sidebar-brand .brand-name {
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.2;
}
.sidebar-brand .brand-sub {
    color: var(--sidebar-text);
    font-size: 11px;
}

/* Menu nhóm */
.sidebar-group-label {
    padding: 16px 20px 6px;
    color: var(--text-light);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Từng menu item */
.sidebar-nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 20px;
    color: var(--sidebar-text);
    text-decoration: none;
    font-size: 13.5px;
    border-left: 3px solid transparent;
    transition: all 0.15s;
}
.sidebar-nav a:hover {
    background: var(--sidebar-hover);
    color: var(--sidebar-text-active);
}
.sidebar-nav a.active {
    background: var(--sidebar-active);
    color: var(--primary);
    border-left-color: var(--primary);
    font-weight: 600;
}
.sidebar-nav a i { width: 18px; font-size: 15px; flex-shrink: 0; }

/* Badge thông báo trên sidebar (số đăng ký khách hàng mới) */
.sidebar-badge {
    margin-left: auto;
    background: #EF4444;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    padding: 3px 7px;
    border-radius: 10px;
    flex-shrink: 0;
}

/* Item cha của submenu — cùng style với a thông thường */
.sidebar-nav .sidebar-parent {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 20px;
    color: var(--sidebar-text);
    font-size: 13.5px;
    border-left: 3px solid transparent;
    cursor: pointer;
    user-select: none;
    transition: all 0.15s;
}
.sidebar-nav .sidebar-parent:hover { background: var(--sidebar-hover); color: var(--sidebar-text-active); }
.sidebar-nav .sidebar-parent.open  { color: var(--sidebar-text-active); }
.sidebar-nav .sidebar-parent i     { width: 18px; font-size: 15px; flex-shrink: 0; }
.sidebar-parent .chevron           { margin-left: auto; font-size: 12px; transition: transform 0.2s; }
.sidebar-parent.open .chevron      { transform: rotate(90deg); }

/* Danh sách submenu — ẩn mặc định, thụt lề nhẹ */
.sidebar-submenu { display: none; flex-direction: column; background: rgba(0,0,0,0.12); }
.sidebar-submenu.open { display: flex; }
.sidebar-submenu a {
    padding: 8px 20px 8px 34px;
    font-size: 13px;
    border-left: 3px solid transparent;
    color: var(--sidebar-text);
}
.sidebar-submenu a:hover { background: var(--sidebar-hover); color: var(--sidebar-text-active); }
.sidebar-submenu a.active {
    background: var(--sidebar-active);
    color: var(--primary);
    border-left-color: var(--primary);
    font-weight: 600;
}

/* Phần footer sidebar (đăng xuất) */
/* ── Vùng nội dung chính ── */
.admin-main {
    margin-left: var(--sidebar-width);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Topbar */
.admin-topbar {
    background: var(--topbar-bg);
    border-bottom: 1px solid var(--topbar-border);
    padding: 0 24px;
    height: var(--topbar-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 100;
}
.topbar-title { font-weight: 600; color: var(--text-muted); font-size: 14px; }
.topbar-right { display: flex; align-items: center; gap: 6px; }

/* Chuông thông báo trên topbar */
.notif-wrap { position: relative; }
.notif-btn {
    position: relative;
    width: 38px; height: 38px;
    border: none; background: none;
    border-radius: 50%;
    color: var(--text-dark);
    font-size: 17px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s;
}
.notif-btn:hover, .notif-btn.open { background: var(--content-bg); }
.notif-badge {
    position: absolute;
    top: 1px; right: -1px;
    background: #EF4444;
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1;
    padding: 3px 5.5px;
    border-radius: 10px;
    border: 2px solid #fff;
}
@keyframes bellRing {
    0%, 100% { transform: rotate(0); }
    15% { transform: rotate(14deg); }
    30% { transform: rotate(-12deg); }
    45% { transform: rotate(9deg); }
    60% { transform: rotate(-7deg); }
    75% { transform: rotate(4deg); }
}
.notif-btn.ring i { display: inline-block; transform-origin: top center; animation: bellRing 0.9s ease; }

/* Panel danh sách thông báo */
.notif-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 320px;
    background: #fff;
    border: 1px solid var(--card-border);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14);
    z-index: 200;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
}
.notif-dropdown.open { opacity: 1; visibility: visible; transform: translateY(0); }
.notif-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid var(--card-border);
    font-weight: 700;
    font-size: 14px;
    color: var(--text-dark);
}
.notif-count {
    font-size: 12px; font-weight: 600;
    color: var(--danger);
    background: #fef2f2;
    padding: 2px 8px;
    border-radius: 10px;
}
/* Hàng bật/tắt tiếng chuông với nút gạt kiểu iOS */
.notif-sound-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 9px 14px;
    border-bottom: 1px solid var(--card-border);
    font-size: 13px;
    color: var(--text-dark);
    background: var(--content-bg);
}
.notif-sound-row > span { display: flex; align-items: center; gap: 7px; }
.notif-sound-row i { color: var(--text-muted); font-size: 14px; }
.ios-switch {
    position: relative;
    display: inline-block;
    width: 44px; height: 26px;
    flex-shrink: 0;
}
.ios-switch input { opacity: 0; width: 0; height: 0; }
.ios-slider {
    position: absolute;
    inset: 0;
    background: #D1D5DB;
    border-radius: 26px;
    cursor: pointer;
    transition: background 0.25s;
}
.ios-slider::before {
    content: '';
    position: absolute;
    width: 22px; height: 22px;
    left: 2px; top: 2px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
    transition: transform 0.25s;
}
.ios-switch input:checked + .ios-slider { background: #34C759; }
.ios-switch input:checked + .ios-slider::before { transform: translateX(18px); }

.notif-list { max-height: 320px; overflow-y: auto; }
.notif-item {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 11px 14px;
    text-decoration: none;
    border-bottom: 1px solid var(--card-border);
    transition: background 0.12s;
}
.notif-item:hover { background: var(--content-bg); }
.notif-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #F59E0B;
    margin-top: 5px;
    flex-shrink: 0;
}
.notif-body { min-width: 0; }
.notif-text { display: block; font-size: 13px; color: var(--text-dark); }
.notif-meta { display: block; font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.notif-empty {
    padding: 32px 14px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
}
.notif-empty i { display: block; font-size: 28px; margin-bottom: 6px; color: var(--text-light); }
.notif-footer {
    display: block;
    text-align: center;
    padding: 11px;
    font-size: 13px;
    font-weight: 600;
    color: var(--primary);
    text-decoration: none;
}
.notif-footer:hover { background: var(--content-bg); }

.topbar-user-wrap { position: relative; }
.topbar-user {
    display: flex; align-items: center; gap: 8px;
    color: var(--text-dark);
    font-size: 13.5px;
    font-weight: 500;
    background: none;
    border: none;
    font-family: inherit;
    cursor: pointer;
    padding: 5px 10px;
    border-radius: 8px;
    transition: background 0.15s;
}
.topbar-user:hover, .topbar-user.open { background: var(--content-bg); }
.topbar-user .avatar {
    width: 32px; height: 32px;
    background: var(--primary-light);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: var(--primary);
    font-weight: 700;
    font-size: 13px;
}
/* Ảnh đại diện thật (nếu có) phủ kín khung tròn thay cho chữ cái */
.topbar-user .avatar img,
.user-dd-header .avatar img {
    width: 100%; height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.topbar-user .avatar, .user-dd-header .avatar { overflow: hidden; }

.user-caret { font-size: 11px; color: var(--text-muted); transition: transform 0.2s; }
.topbar-user.open .user-caret { transform: rotate(180deg); }

/* Dropdown tài khoản — xổ xuống dưới nút tên admin */
.user-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 240px;
    background: #fff;
    border: 1px solid var(--card-border);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14);
    padding: 6px;
    z-index: 200;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
}
.user-dropdown.open { opacity: 1; visibility: visible; transform: translateY(0); }
.user-dd-header {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 10px 12px;
    border-bottom: 1px solid var(--card-border);
    margin-bottom: 6px;
}
.user-dd-header .avatar {
    width: 38px; height: 38px;
    background: var(--primary-light);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: var(--primary);
    font-weight: 700;
    font-size: 15px;
    flex-shrink: 0;
}
.user-dd-name { font-size: 13.5px; font-weight: 700; color: var(--text-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-dd-role { font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-dropdown a {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 13.5px;
    color: var(--text-dark);
    text-decoration: none;
    transition: background 0.12s;
}
.user-dropdown a:hover { background: var(--content-bg); }
.user-dropdown a i { width: 18px; font-size: 14px; color: var(--text-muted); }
.user-dropdown a.danger { color: var(--danger); }
.user-dropdown a.danger i { color: var(--danger); }
.user-dropdown a.danger:hover { background: #fef2f2; }
.user-dd-divider { height: 1px; background: var(--card-border); margin: 6px 0; }

/* Nội dung trang */
.admin-content { padding: 28px 24px; flex: 1; }

/* ── Card ── */
.admin-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    padding: 20px;
}
/* Tiêu đề bên trong card (vd: "Giao dịch gần đây") — to & rõ hơn cỡ h6 mặc định */
.admin-card h6 { font-size: 16px; line-height: 1.3; }

/* ── Stat card (dashboard) ── */
.stat-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: transform 0.15s, box-shadow 0.15s;
}
.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.1);
}
/* Card thống kê BẤM ĐƯỢC (thẻ <a>): giữ nguyên màu chữ của card, chỉ đổi con trỏ + viền khi rê chuột */
a.stat-card {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}
a.stat-card:hover {
    border-color: var(--primary);
}
.stat-icon {
    width: 52px; height: 52px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}
.stat-icon.primary   { background: var(--primary-light);         color: var(--primary); }
.stat-icon.success   { background: rgba(22,163,74,0.1);          color: var(--success); }
.stat-icon.warning   { background: rgba(217,119,6,0.1);          color: var(--warning); }
.stat-icon.danger    { background: rgba(220,38,38,0.1);          color: var(--danger); }
.stat-label { font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }
.stat-value { font-size: 22px; font-weight: 700; color: var(--text-dark); }

/* ── Nút chủ đạo ── */
.btn-primary-custom {
    background: var(--primary);
    color: #fff;
    border: none;
    padding: 8px 20px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 13.5px;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
    display: inline-flex; align-items: center; gap: 6px;
    text-decoration: none;
}
.btn-primary-custom:hover  { background: var(--primary-hover); color: #fff; }
.btn-primary-custom:active { transform: scale(0.98); }

/* ── Alert ── */
.alert-custom {
    border-radius: 8px;
    padding: 10px 16px;
    font-size: 13.5px;
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 20px;
}
.alert-success { background: #f0fdf4; border: 1px solid #bbf7d0; color: #15803d; }
.alert-danger  { background: #fef2f2; border: 1px solid #fecaca; color: #dc2626; }

/* ── Table ── */
/* Đặt background trực tiếp trên <th> thay vì <tr> vì CSS table model vẽ cell đè lên row */
.admin-card table thead th {
    background: var(--card-bg);
}

/* =============================================================
   COMPONENTS bổ sung cho các trang quản lý thu chi
   (ví, giao dịch, xe, vay nợ, báo cáo)
   ============================================================= */

/* ── Header trang: tiêu đề bên trái, nút thao tác bên phải ── */
.page-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 16px; margin-bottom: 20px; flex-wrap: wrap;
}
/* min-width:0 cho cột chữ bên trái: mặc định flex item không co dưới bề rộng nội dung,
   khiến cụm nút bị đẩy xuống dòng khi tiêu đề/mô tả dài */
.page-head > :first-child { min-width: 0; }
/* Biến thể: cụm nút nằm CÙNG HÀNG với tiêu đề, phần mô tả tụt xuống dưới chiếm trọn
   bề ngang (thay vì mô tả đẩy nút ra khỏi hàng tiêu đề) */
.page-head.page-head-stack { display: block; }
/* align-items:flex-start -> MÉP TRÊN của nút trùng mép trên tiêu đề (không canh giữa) */
.page-head.page-head-stack .page-head-row {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
}
.page-head h5 { font-weight: 700; margin: 0; font-size: 18px; }
.page-head .page-sub { color: var(--text-muted); font-size: 13px; margin: 2px 0 0; }
/* margin-left:auto để cụm nút LUÔN dính mép phải, kể cả khi .page-head xuống dòng
   (lúc wrap thì justify-content không còn tác dụng, nút sẽ tụt về trái) */
.page-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; }

/* ── Nút phụ ── */
.btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px; border-radius: 8px;
    font-weight: 600; font-size: 13.5px; font-family: inherit;
    cursor: pointer; border: 1.5px solid transparent;
    text-decoration: none; transition: all 0.15s; background: none;
}
.btn-sm { padding: 5px 11px; font-size: 12.5px; border-radius: 7px; }
.btn-outline { border-color: var(--card-border); color: var(--text-dark); background: #fff; }
.btn-outline:hover { background: var(--content-bg); color: var(--text-dark); }
.btn-outline.active { border-color: var(--primary); color: var(--primary); background: var(--primary-light); }
.btn-danger-soft { color: var(--danger); background: #fef2f2; }
.btn-danger-soft:hover { background: #fee2e2; }
.btn-success-soft { color: #15803d; background: #f0fdf4; }
.btn-success-soft:hover { background: #dcfce7; }
.btn-icon {
    /* inline-flex để dùng được cho cả <button> lẫn <a> (thẻ inline sẽ bỏ qua
       width/height nếu không có display flex/inline-block) */
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; padding: 0;
    border-radius: 8px; cursor: pointer; border: 1px solid transparent;
    text-decoration: none; line-height: 1; vertical-align: middle;
    /* Nền màu nhạt để nút luôn nổi trên nền trắng lẫn nền xám khi hover hàng */
    background: var(--primary-light); color: var(--primary);
    transition: filter 0.12s, background 0.12s;
}
.btn-icon + .btn-icon, .btn-icon + form, form + .btn-icon, form + form { margin-left: 4px; }
.btn-icon:hover { filter: brightness(0.95); }
.btn-icon.danger { background: #fef2f2; color: var(--danger); }
.btn-icon.danger:hover { background: #fde0e0; filter: none; }
.btn-icon.neutral { background: var(--content-bg); color: var(--text-muted); border-color: var(--card-border); }
.btn-icon.neutral:hover { background: #fff; color: var(--text-dark); }

/* ── Bảng dữ liệu ── */
.data-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.data-table th {
    text-align: left; font-weight: 600; color: var(--text-muted);
    font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em;
    padding: 10px 12px; border-bottom: 2px solid var(--card-border); background: var(--card-bg);
    white-space: nowrap;
}
.data-table td { padding: 11px 12px; border-bottom: 1px solid var(--card-border); vertical-align: middle; }
.data-table tbody tr:hover { background: var(--content-bg); }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table .col-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.table-wrap { overflow-x: auto; }
tfoot.table-foot td { padding: 11px 12px; border-top: 2px solid var(--card-border); font-weight: 700; }

/* ── Badge nhãn trạng thái ── */
.badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 9px; border-radius: 20px; font-size: 12px; font-weight: 600; line-height: 1.4;
}
.badge-success { background: #f0fdf4; color: #15803d; }
.badge-danger  { background: #fef2f2; color: #dc2626; }
.badge-warning { background: #fffbeb; color: #b45309; }
.badge-info    { background: #eff6ff; color: #1d4ed8; }
.badge-primary { background: var(--primary-light); color: var(--primary); }
.badge-muted   { background: var(--content-bg); color: var(--text-muted); }
/* Badge TAG của mẫu: tô theo màu tag trong registry (tags.json) qua biến --sample-tag-color.
   Đặt ở theme.css (nạp trong <head>) để mọi trang dùng chung một định nghĩa và không nháy màu
   ở lần sơn đầu. Dùng kèm .badge .badge-muted, đứng sau nên ghi đè màu của badge-muted. */
.sample-tag-badge {
    --sample-tag-color: #64748b;
    color: var(--sample-tag-color);
    border-color: color-mix(in srgb, var(--sample-tag-color) 45%, #fff);
    background: color-mix(in srgb, var(--sample-tag-color) 10%, #fff);
}

/* ── Form ── */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
.form-group { margin-bottom: 0; }
.form-group.full { grid-column: 1 / -1; }
.form-label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.form-label .req { color: var(--danger); }
.form-control {
    width: 100%; padding: 9px 12px; font-size: 13.5px; font-family: inherit;
    border: 1.5px solid var(--card-border); border-radius: 8px; outline: none;
    background: #fff; color: var(--text-dark); transition: border-color 0.15s;
}
.form-control:focus { border-color: var(--primary); }
textarea.form-control { resize: vertical; min-height: 70px; }
.form-hint { font-size: 12px; color: var(--text-muted); margin-top: 4px; }

/* ── Vùng chọn / kéo-thả file (thay input[type=file] thô cho hợp giao diện) ── */
.file-drop {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px; border: 1.5px dashed var(--card-border); border-radius: 10px;
    background: var(--content-bg); cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.file-drop:hover, .file-drop.is-dragover { border-color: var(--primary); background: var(--primary-light); }
.file-drop.has-file { border-style: solid; border-color: var(--primary); background: #fff; }
.file-drop input[type=file] { display: none; }     /* ẩn input gốc, kích hoạt qua label */
.file-drop-icon {
    flex: none; width: 40px; height: 40px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    background: var(--primary-light); color: var(--primary); font-size: 20px;
}
.file-drop-body { min-width: 0; line-height: 1.45; }
.file-drop-title { font-weight: 600; font-size: 13.5px; color: var(--text-dark); }
.file-drop-title .file-drop-pick { color: var(--primary); text-decoration: underline; }
.file-drop-hint { font-size: 12px; color: var(--text-muted); }
.file-drop-hint.has-file { color: var(--text-dark); font-weight: 600; word-break: break-all; }

/* ── Bộ lọc ── */
.filter-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.filter-bar .form-control { width: auto; min-width: 150px; }
/* Ô lọc TAG và NGÀNH: width:auto khiến <select> giãn theo OPTION DÀI NHẤT (61 tag, 43 ngành —
   vd "máy móc & thiết bị công nghiệp") -> cố định bề rộng gọn. Tên dài khi được chọn cắt bằng "…";
   danh sách xổ ra vẫn hiện đủ tên. Chỉ áp desktop (>768px) để không đè rule full-width của mobile. */
@media (min-width: 769px) {
    .filter-bar select[name="tag"],
    .filter-bar select[name="industry"] {
        width: 150px; min-width: 0; max-width: 150px;
        text-overflow: ellipsis; overflow: hidden;
    }
}

/* ── Bảng PHÂN BỐ MẪU THEO NGÀNH (trang Tất cả mẫu, hiện khi đã chọn ngành) ──
   CSS phải nằm ở ĐÂY (theme.css nạp trong <head>) chứ không phải trong <style> cuối view: đặt ở
   cuối view thì lần sơn đầu các ô phân bố còn là link thô xếp dọc, CSS vào sau mới thành ô lưới
   — người dùng thấy trang "nháy" một nhịp. */
.dist-panel {
    background: var(--card-bg); border: 1px solid var(--card-border);
    border-radius: var(--card-radius); box-shadow: var(--card-shadow);
    padding: 16px 18px; margin-bottom: 16px;
}
.dist-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.dist-title { font-size: 15px; font-weight: 700; color: var(--text-dark); }
.dist-sub { display: block; margin-top: 3px; font-size: 12.5px; color: var(--text-muted); }
.dist-note { margin: 8px 0 0; font-size: 12px; line-height: 1.6; color: var(--text-muted); }
.dist-group { margin-top: 14px; }
.dist-group-label {
    font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: var(--text-muted); margin-bottom: 8px;
}
.dist-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; align-items: stretch; }
.dist-item {
    display: flex; align-items: center; gap: 8px; height: 100%;
    padding: 9px 11px; border: 1px solid var(--card-border); border-radius: 8px;
    background: #fff; color: var(--text-dark); text-decoration: none; font-size: 13px;
    transition: border-color .15s, background .15s;
}
.dist-item:hover { border-color: var(--primary); background: var(--primary-light); }
.dist-item i { flex: none; color: var(--primary); }
.dist-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dist-count {
    flex: none; min-width: 26px; padding: 1px 7px; border-radius: 999px;
    background: var(--primary-light); color: var(--primary);
    font-weight: 700; font-size: 12px; text-align: center;
}
.dist-item.is-active { border-color: var(--primary); background: var(--primary-light); }
.dist-item.is-empty { background: #fafafa; color: var(--text-muted); border-style: dashed; }
.dist-item.is-empty i, .dist-item.is-empty .dist-count { color: var(--text-muted); background: transparent; }
.dist-extra { font-size: 9px; opacity: .55; }
.dist-item.is-extra { border-color: #e8e8e8; }
@media (max-width: 560px) { .dist-grid { grid-template-columns: 1fr 1fr; } }

/* ── Tab phụ (theo phạm vi/trạng thái) ── */
.sub-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.sub-tabs a {
    padding: 6px 14px; border-radius: 20px; font-size: 13px; font-weight: 600;
    text-decoration: none; color: var(--text-muted); background: #fff; border: 1.5px solid var(--card-border);
}
.sub-tabs a:hover { color: var(--text-dark); }
.sub-tabs a.active { background: var(--primary); color: #fff; border-color: var(--primary); }

/* ── Modal ── */
.modal-overlay {
    position: fixed; inset: 0; background: rgba(15, 23, 42, 0.5);
    display: none; align-items: flex-start; justify-content: center;
    z-index: 2000; padding: 40px 16px; overflow-y: auto;
}
.modal-overlay.open { display: flex; }
.modal {
    background: #fff; border-radius: 14px; width: 100%; max-width: 560px;
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.25); margin: auto;
}
/* Modal rộng — dùng khi nội dung là LƯỚI (vd thư viện ảnh của loại khối) */
.modal-lg { max-width: 900px; }
.modal-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px; border-bottom: 1px solid var(--card-border);
}
.modal-title { font-weight: 700; font-size: 16px; margin: 0; }
.modal-close { background: none; border: none; font-size: 20px; cursor: pointer; color: var(--text-muted); line-height: 1; }
.modal-close:hover { color: var(--text-dark); }
.modal-body { padding: 20px; }
.modal-foot {
    display: flex; justify-content: flex-end; gap: 10px;
    padding: 14px 20px; border-top: 1px solid var(--card-border);
}

/* ── Hàng nút Lưu/Hủy ở cuối form (nội dung chính) ──
   Quy ước TẬP TRUNG: nút Lưu/Hủy luôn nằm bên PHẢI. Mọi form dùng class này
   thay cho div flex tự đặt, để căn phải nhất quán toàn admin. */
.form-actions {
    display: flex; justify-content: flex-end; align-items: center;
    gap: 10px; flex-wrap: wrap; margin-top: 18px;
}

/* ── Dropzone chọn/kéo-thả file (tab Thư viện ảnh + modal Thư viện của loại khối) ── */
.dropzone { border: 2px dashed var(--card-border, #e2e8f0); border-radius: 12px; padding: 22px; text-align: center; cursor: pointer; transition: border-color .15s, background .15s; }
.dropzone:hover, .dropzone.drag { border-color: var(--primary, #4f46e5); background: var(--primary-light, #eef2ff); }
.dropzone.disabled { opacity: .55; pointer-events: none; }
.dropzone i { font-size: 26px; color: var(--primary, #4f46e5); }
.dropzone p { margin: 6px 0 2px; font-size: 13.5px; }
.dz-link { color: var(--primary, #4f46e5); font-weight: 700; text-decoration: underline; }

/* ── Preview từng ảnh đang tải lên + thanh tiến trình RIÊNG dưới mỗi ảnh ── */
.preview-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; margin-top: 14px; }
.preview-grid:empty { display: none; }
.preview-cell { position: relative; border: 1px solid var(--card-border, #e2e8f0); border-radius: 10px; overflow: hidden; background: var(--surface, #fff); }
.preview-thumb { aspect-ratio: 4 / 3; background: repeating-conic-gradient(#f1f5f9 0% 25%, #fff 0% 50%) 50% / 16px 16px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.preview-thumb img { width: 100%; height: 100%; object-fit: contain; }
.preview-meta { padding: 6px 8px 2px; display: flex; flex-direction: column; gap: 2px; }
.preview-name { font-size: 11.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.preview-size { font-size: 11px; color: var(--text-muted, #64748b); }
.preview-prog { display: flex; align-items: center; gap: 6px; padding: 4px 8px 9px; }
.preview-prog-track { flex: 1; height: 6px; background: var(--bg, #f1f5f9); border-radius: 999px; overflow: hidden; }
.preview-prog-fill { height: 100%; width: 0; background: var(--primary, #4f46e5); border-radius: 999px; transition: width .2s ease; }
.preview-prog-pct { font-size: 10.5px; font-weight: 700; color: var(--text-muted, #64748b); min-width: 30px; text-align: right; }
.preview-cell.done .preview-prog-fill { background: var(--success, #16a34a); }
.preview-cell.done .preview-prog-pct { color: var(--success, #16a34a); }
.preview-cell.failed .preview-prog-fill { background: var(--danger, #dc2626); width: 100%; }
.preview-cell.failed .preview-prog-pct { color: var(--danger, #dc2626); }

/* ── Trạng thái rỗng ── */
.empty-state { text-align: center; padding: 48px 0; color: var(--text-muted); }
.empty-state i { font-size: 42px; display: block; margin-bottom: 12px; color: var(--text-light); }

/* ── Tiện ích chữ ── */
.text-success { color: var(--success) !important; }
.text-danger  { color: var(--danger)  !important; }
.text-warning { color: var(--warning) !important; }
.text-muted   { color: var(--text-muted) !important; }
.text-right   { text-align: right; }
.text-center  { text-align: center; }
.fw-700 { font-weight: 700; }
.mb-0 { margin-bottom: 0 !important; }
.nowrap { white-space: nowrap; }

/* ── Lưới thẻ KPI co giãn ── */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 24px; }
.stat-icon.info { background: rgba(2,132,199,0.1); color: var(--info); }

/* ── Lưới 2 cột dùng chung (dashboard, chi tiết xe/nợ, tài khoản).
   Đặt thành class để media query gộp về 1 cột trên mobile — inline style
   không thể bị media query ghi đè nên buộc phải tách ra class. ── */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: stretch; }

/* ── Card cùng HÀNG cao BẰNG NHAU (= card cao nhất của hàng) ──
   Quy ước TOÀN SITE: mọi container xếp card theo HÀNG (grid/flex) căn
   align-items: stretch để các card trong cùng hàng tự kéo cao bằng nhau;
   card đặt height:100% để lấp đầy ô (kể cả khi lồng trong wrapper của ô lưới).
   Card đứng MỘT MÌNH full-width thì 100% = auto nên vô hại.
   Hàng card MỚI: dùng class .cards-row (lưới co giãn, đã stretch sẵn). */
.two-col,
.kpi-grid,
.pubchat-grid,
.sample-grid,
.cards-row { align-items: stretch; }

.cards-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }

.two-col > *,
.kpi-grid > *,
.pubchat-grid > *,
.sample-grid > *,
.cards-row > * { height: 100%; }

/* ── Bảng tóm tắt 2 cột (chi tiết xe, tiến độ nợ) ── */
.kv-list { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; font-size: 13.5px; }
.kv-list dt { color: var(--text-muted); }
.kv-list dd { margin: 0; font-weight: 600; }

/* ── Fix: khi nút có cả .btn lẫn .btn-primary-custom thì .btn (khai báo sau)
   vô tình xóa nền xanh, khiến nút chỉ nổi màu lúc hover. Tăng độ ưu tiên để
   nền xanh hiện thường trực. ── */
.btn.btn-primary-custom { background: var(--primary); color: #fff; border-color: transparent; }
.btn.btn-primary-custom:hover { background: var(--primary-hover); color: #fff; }

/* ── Cột thao tác: các nút căn giữa + cách đều nhau bằng GAP. Cột hẹp thì nút tự
   xuống hàng (xếp DỌC) NHƯNG vẫn giữ khoảng cách, KHÔNG dính vào nhau. ── */
.data-table th.col-act { text-align: center; }
.data-table td.col-act { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; }
.data-table td.col-act form { display: inline-flex; margin: 0; }

/* ── Dòng được nhảy tới qua neo (#cp-.. / #thu-..): chừa chỗ cho topbar dính
   và nháy nền vàng để dễ nhận ra ── */
.data-table tr[id]:target { scroll-margin-top: 76px; animation: rowHighlight 2.2s ease; }
@keyframes rowHighlight {
    0%   { background: #fde68a; }
    65%  { background: #fef3c7; }
    100% { background: transparent; }
}

/* ── Bảng căn giữa: mọi cột (tiêu đề + giá trị) căn giữa, riêng cột đầu
   (vd: tên Xe) giữ căn trái ── */
.data-table.table-center th,
.data-table.table-center td { text-align: center; }
.data-table.table-center th:first-child,
.data-table.table-center td:first-child { text-align: left; }

/* =============================================================
   RESPONSIVE — tương thích máy tính bảng & điện thoại
   Trên màn nhỏ: sidebar biến thành ngăn kéo (drawer) trượt từ trái,
   mở bằng nút hamburger trên topbar, có lớp nền mờ để bấm đóng.
   ============================================================= */

/* Nút mở menu (hamburger) và lớp nền mờ: ẩn trên desktop, chỉ hiện ở mobile */
.sidebar-toggle { display: none; }
.sidebar-backdrop { display: none; }

/* ── Máy tính bảng nhỏ & điện thoại (≤ 992px): sidebar thành drawer ── */
@media (max-width: 992px) {
    /* Sidebar trượt khỏi màn hình, chỉ hiện khi thêm class .open.
       100dvh thay cho 100vh: trên mobile 100vh bị thanh địa chỉ trình duyệt che mất
       phần đáy nên menu dài không cuộn tới cuối được; overscroll-behavior giữ cuộn
       nằm trong sidebar, không lan ra trang nền phía sau. */
    .admin-sidebar {
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        box-shadow: 0 0 40px rgba(0, 0, 0, 0.35);
        height: 100dvh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }
    .admin-sidebar.open { transform: translateX(0); }

    /* Nội dung chính chiếm toàn bộ chiều rộng (không chừa chỗ cho sidebar) */
    .admin-main { margin-left: 0; }

    /* Nút hamburger hiện ra ở mép trái topbar */
    .sidebar-toggle {
        display: inline-flex; align-items: center; justify-content: center;
        width: 38px; height: 38px; margin-right: 6px;
        border: none; background: none; border-radius: 8px;
        color: var(--text-dark); font-size: 22px; cursor: pointer;
        flex-shrink: 0;
    }
    .sidebar-toggle:hover { background: var(--content-bg); }

    /* Lớp nền mờ phủ toàn màn khi mở sidebar — bấm vào để đóng */
    .sidebar-backdrop {
        position: fixed; inset: 0;
        background: rgba(15, 23, 42, 0.5);
        z-index: 999; /* dưới sidebar (1000), trên nội dung */
        display: block;
        opacity: 0; visibility: hidden;
        transition: opacity 0.25s, visibility 0.25s;
    }
    .sidebar-backdrop.open { opacity: 1; visibility: visible; }

    /* Khóa cuộn nền khi drawer đang mở */
    body.sidebar-open { overflow: hidden; }
}

/* ── Điện thoại (≤ 768px): tinh chỉnh khoảng cách & lưới cho gọn ── */
@media (max-width: 768px) {
    /* Topbar gọn lại; ẩn tên + mũi tên của nút tài khoản, chỉ giữ avatar */
    .admin-topbar { padding: 0 12px; }
    .topbar-title { font-size: 13px; }
    .topbar-user { padding: 5px; gap: 0; }
    .topbar-user > span,
    .topbar-user .user-caret { display: none; }

    /* Giảm padding vùng nội dung trên màn nhỏ */
    .admin-content { padding: 16px 12px; }

    /* Form 2 cột trong modal và lưới 2 cột dùng chung -> gộp 1 cột */
    .form-grid { grid-template-columns: 1fr; }
    .two-col   { grid-template-columns: 1fr; }

    /* Bộ lọc: mỗi ô input giãn full hàng cho dễ chạm */
    .filter-bar { flex-direction: column; align-items: stretch; }
    .filter-bar .form-control { width: 100%; min-width: 0; }

    /* Header trang: nút thao tác xuống hàng và giãn đều */
    .page-actions { width: 100%; }
    .page-actions > .btn,
    .page-actions > .btn-primary-custom { flex: 1; justify-content: center; }

    /* Modal sát mép màn hình hơn để có thêm chỗ */
    .modal-overlay { padding: 16px 10px; }

    /* Dropdown tài khoản/thông báo không tràn mép phải màn hình */
    .user-dropdown { width: min(240px, calc(100vw - 24px)); }
    .notif-dropdown { width: min(320px, calc(100vw - 24px)); }
}

/* ── Điện thoại nhỏ (≤ 480px): bảng KPI 1 cột, dropdown bám mép trái ── */
@media (max-width: 480px) {
    .kpi-grid { grid-template-columns: 1fr; gap: 12px; }
    .stat-card { padding: 16px; gap: 12px; }
    .stat-icon { width: 44px; height: 44px; font-size: 18px; }
    .stat-value { font-size: 19px; }
    .admin-card { padding: 16px; }
}

/* =============================================================
   THƯ VIỆN TRANG MẪU — sidebar count, tile loại trang, lưới mẫu
   ============================================================= */

/* Badge đếm số mẫu trên sidebar (tông trung tính, không đỏ như cảnh báo) */
.sidebar-count {
    margin-left: auto;
    background: rgba(255,255,255,0.12);
    color: var(--sidebar-text-active);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    padding: 3px 7px;
    border-radius: 10px;
    flex-shrink: 0;
}
.sidebar-nav a.active .sidebar-count { background: var(--primary); color: #fff; }

/* Nhóm sidebar thu gọn được (accordion) */
.sidebar-group-toggle {
    width: 100%; display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px 6px; background: none; border: none; cursor: pointer;
    color: var(--text-light); font-size: 11px; font-weight: 600; letter-spacing: 0.08em;
    text-transform: uppercase; font-family: inherit; text-align: left;
}
.sidebar-group-toggle:hover { color: var(--sidebar-text-active); }
.sidebar-group-toggle .chev { font-size: 11px; opacity: 0.7; transition: transform 0.2s; }
.sidebar-group.collapsed .sidebar-group-items { display: none; }
.sidebar-group.collapsed .sidebar-group-toggle .chev { transform: rotate(-90deg); }

/* Tile loại trang ở dashboard */
.type-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.type-tile {
    display: flex; flex-direction: column; gap: 4px;
    padding: 14px 16px;
    border: 1px solid var(--card-border);
    border-radius: 10px;
    background: #fff;
    text-decoration: none;
    color: var(--text-dark);
    transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.type-tile:hover { border-color: var(--primary); background: var(--primary-light); transform: translateY(-2px); }
.type-tile i { font-size: 20px; color: var(--primary); }
.type-tile-name { font-weight: 600; font-size: 13.5px; }
.type-tile-count { font-size: 12px; color: var(--text-muted); }

/* ===== Trang Blocks/Pages: thanh tìm kiếm + lọc thể loại ===== */
/* Thanh công cụ: ô tìm kiếm bên trái, hàng chip thể loại bên phải */
.tg-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 16px; }
.tg-search { position: relative; flex: 0 0 auto; min-width: 240px; }
.tg-search i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 14px; }
.tg-search input {
    width: 100%; padding: 9px 12px 9px 34px; font-size: 13.5px;
    border: 1px solid var(--card-border); border-radius: 9px; background: #fff; color: var(--text-dark);
}
.tg-search input:focus { outline: none; border-color: var(--primary); }

/* Hàng chip lọc thể loại — --gc = màu thể loại (đặt inline trên từng chip) */
.genre-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.genre-chip {
    --gc: #64748b;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; font-size: 12.5px; font-weight: 600; line-height: 1;
    border: 1px solid var(--card-border); border-radius: 999px; background: #fff; color: var(--text-dark);
    cursor: pointer; transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.genre-chip:hover { border-color: var(--gc); }
.genre-chip.active { background: var(--gc); border-color: var(--gc); color: #fff; }
.genre-chip i { font-size: 13px; }
.genre-chip-count { font-size: 11px; opacity: 0.7; font-variant-numeric: tabular-nums; }

/* Section mỗi thể loại */
.tg-section { margin-bottom: 22px; }
.tg-section-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.tg-section-count { font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* Huy hiệu thể loại — dùng cho badge trên tile, đầu section, và bộ chọn ở modal */
.genre-badge {
    --gc: #64748b;
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 9px; font-size: 12px; font-weight: 600; line-height: 1.4;
    border-radius: 999px; color: #fff; background: var(--gc); white-space: nowrap;
}
.genre-badge.sm { padding: 1px 7px; font-size: 10.5px; }
.type-tile-genres { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }

/* Bộ chọn thể loại (checkbox) trong modal Loại trang */
.genre-pick { display: flex; flex-wrap: wrap; gap: 8px; }
.genre-pick-item { cursor: pointer; user-select: none; }
.genre-pick-item input { position: absolute; opacity: 0; pointer-events: none; }
.genre-pick-item .genre-badge { opacity: 0.45; filter: grayscale(0.4); transition: opacity 0.15s, filter 0.15s, box-shadow 0.15s; }
.genre-pick-item input:checked + .genre-badge { opacity: 1; filter: none; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--gc); }

/* Lưới các mẫu của một loại trang */
.sample-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
.sample-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    overflow: hidden;
    display: flex; flex-direction: column;
    transition: transform 0.15s, box-shadow 0.15s;
}
.sample-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.10); }

/* Preview thu nhỏ: iframe render ở kích thước desktop (400% khung) rồi scale 0.25
   để luôn vừa khung dù khung co giãn — giữ tỉ lệ qua aspect-ratio */
.sample-preview {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #fff;
    border-bottom: 1px solid var(--card-border);
}
.sample-preview iframe {
    width: 400%; height: 400%;
    border: 0;
    transform: scale(0.25);
    transform-origin: top left;
    pointer-events: none;
}
/* Lớp phủ MỞ XEM MẪU: phủ KÍN ảnh preview -> bấm phần ẢNH hoặc nút giữa đều mở trang xem mẫu.
   Nút phóng to nằm CHÍNH GIỮA ảnh, chỉ hiện khi hover vào card (mặc định trong suốt, không che ảnh). */
.sample-preview-open {
    position: absolute; inset: 0; z-index: 3;
    display: flex; align-items: center; justify-content: center;
    text-decoration: none; color: #fff;
    background: rgba(15, 23, 42, 0);
    transition: background 0.15s;
}
.sample-preview-open .sample-preview-zoom {
    width: 46px; height: 46px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.62);
    font-size: 18px;
    opacity: 0; transform: scale(0.9);
    transition: opacity 0.15s, transform 0.15s;
}
.sample-card:hover .sample-preview-open { background: rgba(15, 23, 42, 0.32); }
.sample-card:hover .sample-preview-open .sample-preview-zoom { opacity: 1; transform: scale(1); }

/* Badge HẠNG GIAO DIỆN (Cơ bản/Đẹp) đè GÓC DƯỚI TRÁI khung preview — luôn hiện */
.sample-tier-badge {
    position: absolute; left: 8px; bottom: 8px; z-index: 2;
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 9px; border-radius: 999px;
    font-size: 11px; font-weight: 700; line-height: 1.4;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.18);
    pointer-events: none;
}
/* Cùng ngôn ngữ thị giác với chip gói trên navbar khu /m: chữ tối, icon vàng;
   gói Cao cấp nền gradient vàng + viền vàng (như .ai-credit.premium). */
.sample-tier-badge.is-basic   { background: rgba(255, 255, 255, 0.92); color: var(--text-dark); border: 1px solid var(--card-border); }
.sample-tier-badge.is-basic i { color: #f5b50a; }
.sample-tier-badge.is-premium { background: linear-gradient(135deg, #fffbeb, #fef3c7); color: var(--text-dark); border: 1px solid #fcd34d; }
.sample-tier-badge.is-premium i { color: #d97706; }

/* Gộp badge hạng + badge PHÍ MỞ KHÓA thành MỘT hàng ở góc dưới-trái khung preview.
   Bọc trong wrapper -> badge hạng bỏ định vị tuyệt đối để hai badge nằm cạnh nhau. */
.sample-badges { position: absolute; left: 8px; bottom: 8px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; }
.sample-badges .sample-tier-badge { position: static; left: auto; bottom: auto; }
/* Badge PHÍ MỞ KHÓA — số điểm AI khách phải chi để mua mẫu; chỉ hiện khi credit_cost > 0 */
.sample-cost-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 9px; border-radius: 999px;
    font-size: 11px; font-weight: 700; line-height: 1.4;
    color: #fff; background: linear-gradient(135deg, #7c3aed, #6d28d9); border: 1px solid #6d28d9;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.18); pointer-events: none;
}
.sample-cost-badge i { color: #fde68a; }

.sample-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.sample-title { font-weight: 700; font-size: 14.5px; color: var(--text-dark); }
.sample-ref {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 12px; color: var(--text-muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.sample-desc { font-size: 12.5px; color: var(--text-muted); line-height: 1.5; }
.sample-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.sample-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: auto; padding-top: 4px; }

/* Chấm màu đại diện cho tag trong bảng quản lý tag */
.tag-swatch {
    display: inline-block;
    width: 12px; height: 12px;
    border-radius: 50%;
    margin-right: 7px;
    vertical-align: middle;
    border: 1px solid rgba(0,0,0,0.12);
}

/* Card mã nguồn của mẫu — cao tối thiểu 460px, textarea lấp đầy phần còn lại */
.code-card { min-height: 460px; display: flex; flex-direction: column; }
.code-card .code-editor { flex: 1 1 auto; }
.code-editor {
    width: 100%; min-height: 240px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12.5px; line-height: 1.55;
    white-space: pre; overflow: auto; tab-size: 2;
    resize: vertical;
}
/* Phân trang */
.pager { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 22px; align-items: center; justify-content: center; }
.pager .btn { min-width: 34px; justify-content: center; }
.pager .is-disabled { opacity: 0.45; pointer-events: none; }
/* Dấu "…" ngăn cách khi phân trang rút gọn (vd 1 … 4 5 6 … 36) */
.pager-gap { color: var(--text-muted, #94a3b8); padding: 0 2px; align-self: center; }

/* Lưới thư viện icon (tab Icons) */
.icon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.icon-cell {
    display: flex; flex-direction: column; align-items: center; gap: 9px;
    padding: 18px 10px;
    border: 1px solid var(--card-border);
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    font-family: inherit;
    color: var(--text-dark);
    overflow: hidden;
    transition: border-color 0.12s, background 0.12s, transform 0.08s;
}
.icon-cell:hover { border-color: var(--primary); background: var(--primary-light); }
.icon-cell:active { transform: scale(0.96); }
.icon-cell i { font-size: 30px; line-height: 1; }
.icon-cell span {
    font-size: 11.5px; color: var(--text-muted);
    width: 100%; text-align: center;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.icon-cell.copied { border-color: var(--success); background: #f0fdf4; }
.icon-cell.copied i, .icon-cell.copied span { color: var(--success); }

/* Giỏ component — nút trên topbar */
.topbar-cart {
    position: relative;
    width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    color: var(--text-dark); font-size: 17px; text-decoration: none;
    transition: background 0.15s;
}
.topbar-cart:hover { background: var(--content-bg); color: var(--text-dark); }
/* Nhích glyph giỏ lên 1px: icon "bag" của Bootstrap nặng đáy nên trông thấp hơn
   icon chuông cùng hàng — kéo lên để hai icon thẳng hàng quang học (badge không đổi). */
.topbar-cart i { position: relative; top: -1px; }
.topbar-cart-badge {
    position: absolute; top: 1px; right: -1px;
    background: var(--primary); color: #fff;
    font-size: 10.5px; font-weight: 700; line-height: 1;
    padding: 3px 5.5px; border-radius: 10px; border: 2px solid #fff;
}

/* Giỏ component — danh sách item */
.cart-list { display: flex; flex-direction: column; gap: 12px; }
.cart-item {
    display: flex; gap: 14px; align-items: flex-start;
    border: 1px solid var(--card-border); border-radius: 10px;
    padding: 12px; background: #fff;
}
.cart-thumb {
    width: 180px; flex-shrink: 0; aspect-ratio: 16 / 10;
    border: 1px solid var(--card-border); border-radius: 8px;
    overflow: hidden; background: #fff; position: relative;
}
.cart-thumb iframe { width: 400%; height: 400%; transform: scale(0.25); transform-origin: top left; border: 0; pointer-events: none; }
.cart-thumb-missing { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--danger); font-size: 24px; background: #fef2f2; }
.cart-body { flex: 1; min-width: 0; }
@media (max-width: 640px) { .cart-item { flex-direction: column; } .cart-thumb { width: 100%; } }

/* Toast: góc DƯỚI–PHẢI màn hình, cỡ bản gốc 1× (quy ước dự án — xem CLAUDE.md) */
.toast-wrap { position: fixed; top: auto; bottom: 16px; right: 16px; z-index: 4000; display: flex; flex-direction: column; gap: 8px; }
.toast {
    display: flex; align-items: center; gap: 10px;
    background: #fff; border: 1px solid var(--card-border); border-left: 5px solid var(--primary);
    border-radius: 10px; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14);
    padding: 10px 14px; font-size: 14px; color: var(--text-dark);
    min-width: 200px; max-width: 340px;
    animation: toastIn 0.2s ease;
}
.toast.success { border-left-color: var(--success); }
.toast.success i { color: var(--success); }
.toast.danger { border-left-color: var(--danger); }
.toast.danger i { color: var(--danger); }
.toast.out { opacity: 0; transform: translateX(20px); transition: opacity 0.25s, transform 0.25s; }
.toast span { flex: 1; }
.toast-close {
    flex: 0 0 auto; margin-left: 4px; background: none; border: 0; padding: 0 2px;
    font-size: 18px; line-height: 1; cursor: pointer; color: var(--text-muted); opacity: 0.7;
}
.toast-close:hover { opacity: 1; color: var(--text-dark); }
@keyframes toastIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } }

/* Bộ chọn tag GOM THEO 3 NHÓM (form thêm/sửa mẫu) — chip bấm để chọn/bỏ */
.tag-groups { display: flex; flex-direction: column; gap: 14px; }
.tag-group-label { font-size: 12.5px; font-weight: 600; color: var(--text-dark); margin-bottom: 7px; }
.tag-group-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-pick {
    border: 1.5px solid var(--card-border); background: #fff; color: var(--text-dark);
    border-radius: 999px; padding: 5px 13px; font-size: 13px; line-height: 1.2;
    font-family: inherit; cursor: pointer; transition: background .12s, border-color .12s, color .12s;
}
.tag-pick:hover { border-color: var(--tag-color); }
.tag-pick.on { background: var(--tag-color); border-color: var(--tag-color); color: #fff; }

/* Ô nhập tags dạng chip + gợi ý */
.tag-input {
    display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
    width: 100%; min-height: 42px; padding: 6px 8px;
    border: 1.5px solid var(--card-border); border-radius: 8px; background: #fff;
    position: relative; cursor: text;
}
.tag-input:focus-within { border-color: var(--primary); }
.tag-chip {
    display: inline-flex; align-items: center; gap: 5px;
    background: var(--primary-light); color: var(--primary);
    border-radius: 6px; padding: 3px 6px 3px 9px;
    font-size: 12.5px; font-weight: 600;
}
.tag-chip button { border: none; background: none; color: inherit; cursor: pointer; font-size: 15px; line-height: 1; padding: 0; opacity: 0.7; }
.tag-chip button:hover { opacity: 1; }
.tag-input-field { border: none; outline: none; flex: 1; min-width: 120px; font-size: 13.5px; font-family: inherit; padding: 4px; background: transparent; color: var(--text-dark); }
.tag-suggest {
    position: absolute; top: calc(100% + 4px); left: 0; right: 0;
    background: #fff; border: 1px solid var(--card-border); border-radius: 8px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
    z-index: 50; max-height: 220px; overflow-y: auto; padding: 4px;
}
.tag-suggest-item { padding: 7px 10px; border-radius: 6px; font-size: 13.5px; cursor: pointer; }
.tag-suggest-item:hover { background: var(--content-bg); }

/* Trang Giao diện — editor design tokens */
.token-group-label { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-light); margin: 18px 0 8px; }
.token-row { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.token-name { flex: 0 0 170px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.token-controls { flex: 1; display: flex; align-items: center; gap: 8px; }
.token-color { width: 38px; height: 34px; padding: 2px; border: 1px solid var(--card-border); border-radius: 6px; background: #fff; cursor: pointer; flex-shrink: 0; }
.token-text { flex: 1; }

/* Khung xem trước token (nền ô caro để thấy nền trong suốt) */
.theme-preview { background: repeating-conic-gradient(#eef2f7 0% 25%, #fff 0% 50%) 50% / 16px 16px; border: 1px solid var(--card-border); border-radius: 10px; padding: 20px; }
.theme-preview .tp-card {
    font-family: var(--font, sans-serif);
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: var(--radius, 12px);
    box-shadow: var(--shadow, 0 1px 6px rgba(0,0,0,.07));
    padding: 20px;
}
.tp-logo { width: 48px; height: 48px; border-radius: var(--radius, 12px); background: var(--color-primary, #4f46e5); color: var(--color-on-primary, #fff); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 22px; margin-bottom: 14px; }
.tp-title { font-family: var(--font-heading, var(--font, sans-serif)); font-size: 18px; font-weight: 700; color: var(--color-text, #0f172a); margin-bottom: 4px; }
.tp-text { font-size: 13.5px; color: var(--color-text-muted, #64748b); margin-bottom: 14px; }
.tp-input { width: 100%; padding: 10px 12px; border: 1.5px solid var(--color-border, #e2e8f0); border-radius: var(--radius-sm, 8px); background: var(--color-bg, #f8fafc); color: var(--color-input-text, #0f172a); margin-bottom: 12px; outline: none; font-family: inherit; }
.tp-input::placeholder { color: var(--color-input-placeholder, #94a3b8); }

/* Trình xem đa thiết bị */
.viewer { display: flex; flex-direction: column; gap: 12px; }
.viewer-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.device-switch { display: inline-flex; gap: 4px; background: #fff; border: 1px solid var(--card-border); border-radius: 9px; padding: 4px; }
.device-btn { display: inline-flex; align-items: center; gap: 6px; border: none; background: none; padding: 6px 12px; border-radius: 7px; font-family: inherit; font-size: 13px; font-weight: 600; color: var(--text-muted); cursor: pointer; transition: background 0.12s, color 0.12s; }
.device-btn:hover { color: var(--text-dark); }
.device-btn.active { background: var(--primary); color: #fff; }
.viewer-size { font-size: 13px; }
.viewer-stage {
    background: repeating-conic-gradient(#eef2f7 0% 25%, #fff 0% 50%) 50% / 18px 18px;
    border: 1px solid var(--card-border); border-radius: 12px;
    padding: 18px; height: calc(100vh - 240px); min-height: 440px;
    overflow: auto; display: flex; justify-content: center;
}
.device-frame { width: 100%; height: 100%; background: #fff; transition: width 0.2s ease; }
.device-frame.framed { border: 1px solid var(--card-border); border-radius: 16px; box-shadow: 0 12px 40px rgba(15, 23, 42, 0.18); overflow: hidden; flex-shrink: 0; }
.device-frame iframe { width: 100%; height: 100%; border: 0; display: block; background: #fff; }

/* Trang xem trước toàn màn hình (.e-wrap: /preview/, /e/, xem mẫu admin) trên ĐIỆN THOẠI:
   khu xem phải tràn SÁT MÉP. Trước đây đệm 6px + viền 1px của .viewer-stage + viền/bóng của
   .framed ăn mất ~7px mỗi bên, nên nội dung không bao giờ rộng bằng màn hình thật.
   Chỉ khu xem phá lề (margin âm) — thanh công cụ vẫn giữ đệm để nút không dính mép.
   Bỏ đệm dưới để iframe chạm đáy, lấy thêm chiều cao.
   Bám tiền tố `body` để thắng luật `.e-wrap { padding: 8px 10px }` viết trong style của từng view:
   @media KHÔNG cộng độ ưu tiên, mà style đứng sau link nên nếu để trần thì view thắng. */
@media (max-width: 640px) {
    body .e-wrap { padding: 6px 6px 0; }
    body .e-wrap .viewer-stage { margin: 0 -6px; border-left: 0; border-right: 0; border-radius: 0; }
    body .e-wrap .device-frame.framed { border: 0; box-shadow: none; }
}

/* Phóng to khu vực xem/sửa ra toàn màn hình (overlay phủ kín cửa sổ trình duyệt) */
/* Cụm nút sửa + Toàn màn hình dồn về phải: margin-left:auto đặt ở nút "Chỉnh sửa
   trực quan" (đầu cụm) trong viewer-toolbar, nên .viewer-fs-btn không cần đẩy nữa. */
.viewer.viewer-fullscreen {
    position: fixed; inset: 0; z-index: 3000;
    margin: 0; padding: 14px 16px; gap: 10px;
    background: var(--content-bg); overflow: hidden;
}
.viewer.viewer-fullscreen .viewer-stage { height: calc(100vh - 88px); min-height: 0; }
.tp-btn { padding: 10px 18px; border: none; border-radius: var(--radius-sm, 8px); background: var(--color-primary, #4f46e5); color: var(--color-on-primary, #fff); font-weight: 700; cursor: pointer; font-family: inherit; }

/* ──────────────────────────────────────────────────────────────────────────
   THẺ "BẢN TÓM TẮT NHU CẦU" trong khung chat tư vấn (trang chủ + khu thiết kế).
   Bong bóng trợ lý chứa card dùng class .msg-summary để phá khung bong bóng
   thường (nền/viền/bo) và cho card chiếm trọn bề ngang. Dùng specificity 3 lớp
   (.msg.assistant.msg-summary) để THẮNG khối .msg.assistant khai báo inline ở
   từng view (nạp SAU file này).
   ────────────────────────────────────────────────────────────────────────── */
.msg.assistant.msg-summary {
    max-width: 100%; width: 100%;
    background: transparent; border: 0; box-shadow: none; padding: 0;
}
.sum-card {
    position: relative; overflow: hidden;
    border: 1px solid var(--card-border, #e2e8f0); border-radius: 16px;
    background: #fff; padding: 18px 18px 16px;
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.05);
}
.sum-card::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
    background: linear-gradient(180deg, #34d399, #059669);
}
.sum-card-head { font-weight: 800; font-size: 15px; color: var(--text-dark, #0f172a); margin: 0 0 14px 8px; }
.sum-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.sum-item {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px; border: 1px solid #eef2f7; border-radius: 12px; background: #fbfdfe;
}
.sum-ico {
    flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    background: #ecfdf5; color: #059669;
}
.sum-ico i { font-size: 17px; }
.sum-tx { min-width: 0; }
.sum-lb { font-size: 12px; color: var(--text-muted, #64748b); margin-bottom: 2px; }
.sum-vl { font-size: 14px; font-weight: 700; color: var(--text-dark, #0f172a); line-height: 1.35; word-wrap: break-word; overflow-wrap: anywhere; }
/* Giá trị nhiều dòng (gạch đầu dòng / đánh số) -> danh sách xuống dòng cho dễ nhìn */
.sum-vl-list { margin: 2px 0 0; padding: 0 0 0 16px; list-style: disc; }
.sum-vl-list li { margin-bottom: 3px; }
.sum-vl-list li::marker { color: #059669; }
.sum-card-foot { margin: 14px 0 0 8px; font-size: 13px; color: var(--text-muted, #64748b); }
@media (max-width: 720px) { .sum-card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .sum-card-grid { grid-template-columns: 1fr; } }