/* ============================================================
   ADMIN SHARED STYLESHEET — dùng chung cho tất cả trang admin
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght@0,400;0,500;0,600;0,700;0,900;1,400&display=swap');

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: 'Be Vietnam Pro', sans-serif;
    font-size: 13px;
    display: flex;
    height: 100vh;
    overflow: hidden;
    background: #f4f6f9;
    color: #333;
    -webkit-font-smoothing: antialiased;
}

/* ===== SIDEBAR ===== */
.cot-menu {
    width: 250px;
    background: #343a40;
    color: white;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    transition: transform 0.3s ease;
    z-index: 1000;
    overflow-y: auto;
}
.thuong-hieu-admin {
    padding: 16px;
    background: #212529;
    text-align: center;
    font-size: 15px;
    font-weight: bold;
    border-bottom: 1px solid #4b545c;
    position: relative;
}
.nut-dong-menu {
    display: none;
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #aaa;
    font-size: 18px;
    cursor: pointer;
    line-height: 1;
    padding: 4px;
}
.nut-dong-menu:hover { color: white; }
.danh-sach-menu { list-style: none; padding: 0; margin: 0; flex: 1; }
.danh-sach-menu li a {
    display: block;
    padding: 11px 18px;
    font-size: 13px;
    color: #c2c7d0;
    text-decoration: none;
    border-bottom: 1px solid #4b545c;
}
.danh-sach-menu li a:hover,
.danh-sach-menu li a.dang-chon { background: #007bff; color: white; }
.nut-thoat-admin {
    background: #dc3545;
    color: white;
    text-align: center;
    padding: 11px;
    font-size: 13px;
    text-decoration: none;
    font-weight: bold;
    display: block;
    flex-shrink: 0;
}

/* Hamburger & overlay */
.nut-hamburger {
    display: none;
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 1100;
    background: #343a40;
    color: white;
    border: none;
    border-radius: 6px;
    width: 42px;
    height: 42px;
    font-size: 20px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    align-items: center;
    justify-content: center;
}
.overlay-sidebar {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 999;
}

/* ===== KHU VỰC NỘI DUNG ===== */
.khu-vuc-du-lieu {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    min-width: 0;
}
.thanh-tren {
    background: #fff;
    padding: 11px 18px;
    box-shadow: 0 1px 5px rgba(0,0,0,0.1);
    font-size: 13px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}
.noi-dung-chinh { padding: 20px; }

/* ===== THỐNG KÊ ===== */
.luoi-thong-ke,
.luoi-tai-chinh {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 25px;
}
.hop-thong-ke,
.hop-tai-chinh {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.hop-thong-ke { text-align: center; border-top: 4px solid #007bff; }
.hop-thong-ke h3 { margin: 0 0 8px 0; font-size: 20px; color: #333; }
.hop-thong-ke p { margin: 0; color: #666; font-size: 12px; }
.hop-tai-chinh { display: flex; align-items: center; }
.hop-tai-chinh .icon { font-size: 28px; margin-right: 12px; opacity: 0.85; }
.hop-tai-chinh .so-lieu h3 { margin: 0; font-size: 16px; color: #333; }
.hop-tai-chinh .so-lieu p { margin: 3px 0 0; color: #666; font-size: 12px; }

/* ===== BẢNG DỮ LIỆU ===== */
.khung-bang {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.khung-bang-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
    flex-wrap: wrap;
    gap: 10px;
}
.khung-bang-header h3 { margin: 0; color: #0056b3; }
.bang-cuon { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.bang-du-lieu { width: 100%; border-collapse: collapse; text-align: left; font-size: 12px; }
.bang-du-lieu th {
    background: #f8f9fa;
    padding: 9px 10px;
    border-bottom: 2px solid #dee2e6;
    color: #495057;
    font-weight: bold;
    white-space: nowrap;
}
.bang-du-lieu td { padding: 9px 10px; border-bottom: 1px solid #e9ecef; vertical-align: middle; }
.bang-du-lieu tbody tr:hover { background: #f8f9fa; }
.bang-du-lieu td img.anh-bia-nho { width: 60px; height: 40px; object-fit: cover; border-radius: 4px; }

/* ===== NÚT BẤM ===== */
.nut-xem, .nut-hanh-dong {
    background: #007bff;
    color: white;
    padding: 6px 12px;
    text-decoration: none;
    border-radius: 4px;
    font-size: 12px;
    display: inline-block;
    border: none;
    cursor: pointer;
    white-space: nowrap;
}
.nut-xem:hover, .nut-hanh-dong:hover { background: #0056b3; }
.nut-xoa { color: #dc3545; text-decoration: none; font-weight: bold; font-size: 13px; }
.nut-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; font-size: 18px; border-radius: 4px; background: #f0f0f0; text-decoration: none; cursor: pointer; transition: 0.2s; border: 1px solid #ddd; }
.nut-icon:hover { background: #e0e0e0; transform: scale(1.1); }
.nut-icon[title*="Sửa"] { color: #007bff; }
.nut-icon[title*="Ẩn"], .nut-icon[title*="Hiện"] { color: #ffc107; }
.nut-icon[title*="Gỡ"] { color: #dc3545; }
.nut-luu, .nut-tao {
    background: #28a745;
    color: white;
    border: none;
    padding: 9px 18px;
    font-size: 13px;
    font-weight: bold;
    border-radius: 4px;
    cursor: pointer;
    width: 100%;
}
.nut-luu:hover, .nut-tao:hover { background: #218838; }
.nut-duyet {
    background: #28a745;
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    font-size: 12px;
}
.nut-duyet:hover { background: #218838; }

/* ===== BADGE / NHÃN ===== */
.the-vai-tro { padding: 4px 8px; border-radius: 4px; font-size: 12px; font-weight: bold; display: inline-block; }
.the-ca-nhan { background: #e2e3e5; color: #383d41; }
.the-to-chuc { background: #cce5ff; color: #004085; border: 1px solid #b8daff; }
.the-admin { background: #f8d7da; color: #721c24; }
.trang-thai-mo { background: #e2e3e5; color: #383d41; padding: 4px 8px; border-radius: 4px; font-size: 12px; font-weight: bold; }
.trang-thai-chot { background: #cce5ff; color: #004085; padding: 4px 8px; border-radius: 4px; font-size: 12px; font-weight: bold; }
.trang-thai-cho { background: #ffeeba; color: #856404; padding: 4px 8px; border-radius: 4px; font-size: 12px; font-weight: bold; }
.trang-thai-xong { background: #d4edda; color: #155724; padding: 4px 8px; border-radius: 4px; font-size: 12px; font-weight: bold; }
.diem-uy-tin { color: #28a745; font-weight: bold; font-size: 13px; }
.so-tien { color: #28a745; font-weight: bold; }
.badge-cho { background: #ffeeba; color: #856404; padding: 3px 10px; border-radius: 4px; font-size: 11px; font-weight: bold; }

/* ===== FORM ===== */
.khung-tao-moi {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    margin-bottom: 20px;
    border-left: 5px solid #007bff;
}
.luoi-form { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 20px; margin-bottom: 15px; }
.luoi-form-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; align-items: end; }
.nhom-input, .nhom-nhap { margin-bottom: 15px; }
.nhom-input label, .nhom-nhap label {
    display: block;
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 5px;
    color: #555;
}
.nhom-input input, .nhom-input select, .nhom-input textarea,
.nhom-nhap input, .nhom-nhap select {
    width: 100%;
    padding: 8px 10px;
    font-size: 13px;
    border: 1px solid #ced4da;
    border-radius: 6px;
}
.khung-chi-tiet {
    background: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    max-width: 700px;
    margin: 0 auto;
    border-top: 4px solid #007bff;
}
.khung-chi-tiet h2 { color: #0056b3; margin-top: 0; }
.hang-thong-tin {
    display: grid;
    grid-template-columns: 150px 1fr;
    margin-bottom: 15px;
    border-bottom: 1px dashed #eee;
    padding-bottom: 10px;
}
.hang-thong-tin strong { color: #555; }
.form-cap-nhat {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    margin-top: 20px;
    border: 1px solid #e9ecef;
}
.form-cap-nhat label { display: block; font-weight: bold; margin-bottom: 6px; font-size: 12px; color: #333; }
.form-cap-nhat select, .form-cap-nhat input {
    width: 100%;
    padding: 8px 10px;
    font-size: 13px;
    margin-bottom: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
}
.noi-dung-khach-gui {
    background: #f8f9fa;
    padding: 15px;
    border-left: 4px solid #007bff;
    font-style: italic;
    margin-bottom: 20px;
}
.filter-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.filter-tabs button {
    padding: 4px 12px;
    border-radius: 4px;
    border: 1px solid #dee2e6;
    background: #f8f9fa;
    font-size: 12px;
    cursor: pointer;
    font-weight: bold;
    color: #555;
}
.filter-tabs button.active,
.filter-tabs button:hover { background: #007bff; color: #fff; border-color: #007bff; }

/* ===== QUẢN LÝ NỘI DUNG (admin.php) ===== */
.thanh-menu-nd { display: flex; gap: 10px; margin-bottom: 20px; border-bottom: 2px solid #ddd; padding-bottom: 10px; flex-wrap: wrap; }
.nut-tab-nd { background: none; border: none; font-size: 13px; font-weight: bold; color: #6c757d; padding: 8px 13px; cursor: pointer; border-radius: 6px; transition: 0.2s; }
.nut-tab-nd:hover { background: #e9ecef; }
.nut-tab-nd.dang-chon { background: #007bff; color: white; }
.khoi-noi-dung { display: none; background: white; padding: 25px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
.tox-tinymce { border-radius: 6px !important; border: 1px solid #ced4da !important; }
.khung-preview-anh { width: 100%; height: 180px; border: 2px dashed #ced4da; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: #f8f9fa; cursor: pointer; overflow: hidden; position: relative; transition: border-color 0.2s; }
.khung-preview-anh:hover { border-color: #007bff; }
.khung-preview-anh img { width: 100%; height: 100%; object-fit: cover; }
.khung-preview-anh .chu-huong-dan { color: #aaa; font-size: 13px; text-align: center; pointer-events: none; }
.input-file-an { display: none; }
.nhom-checkbox { display: flex; gap: 6px; flex-wrap: wrap; padding: 4px 0; }
.nhom-checkbox label { display: inline-flex; align-items: center; gap: 4px; font-weight: normal; cursor: pointer; font-size: 12px; padding: 4px 8px; border: 1px solid #ced4da; border-radius: 4px; transition: 0.2s; white-space: nowrap; }
.nhom-checkbox label:hover { border-color: #007bff; background: #f0f7ff; }
.nhom-checkbox input[type=checkbox]:checked + span { color: #007bff; font-weight: bold; }
.nhom-checkbox label:has(input:checked) { border-color: #007bff; background: #e8f0fe; }
.nhom-vi-tri { margin-top: 8px; margin-bottom: 15px; }
.nhom-vi-tri .nhom-checkbox { width: 100%; }
.nhom-hanh-dong { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; white-space: nowrap; min-width: 0; }
.nhom-hanh-dong a { flex-shrink: 0; }

@media (max-width: 768px) {
    .nhom-hanh-dong { display: flex; gap: 4px; }
    .nhom-hanh-dong a { padding: 6px 10px; font-size: 11px; }
}
.alert-success { background: #d4edda; color: #155724; padding: 10px; border-radius: 5px; margin-bottom: 15px; font-weight: bold; }

/* ===== TRANG QUẢN LÝ KHO CƠ SỞ ===== */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 18px;
}
.stat-card {
    background: #fff;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 6px 18px rgba(2, 6, 23, 0.06);
    border-left: 4px solid #2563eb;
}
.stat-label {
    font-size: 12px;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
}
.stat-value {
    font-size: 24px;
    font-weight: 700;
    color: #0f172a;
    margin-top: 4px;
}
.page-shell {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.page-title {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    color: #0f172a;
}
.page-subtitle {
    margin: 4px 0 0;
    color: #64748b;
    font-size: 13px;
}
.wrap {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
}
.card {
    background: #fff;
    border-radius: 12px;
    padding: 18px;
    box-shadow: 0 6px 18px rgba(2, 6, 23, 0.06);
    margin-bottom: 18px;
    border: 1px solid #e2e8f0;
}
.tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}
.tabs a {
    text-decoration: none;
    padding: 10px 14px;
    border-radius: 999px;
    background: #e2e8f0;
    color: #0f172a;
    font-weight: 600;
}
.tabs a.active {
    background: #2563eb;
    color: #fff;
}
.grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}
.card-full {
    grid-column: 1 / -1;
}
.product-thumb {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
}
.product-thumb-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.row > div {
    flex: 1;
    min-width: 220px;
}
label {
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
    color: #334155;
}
input, select, textarea {
    width: 100%;
    padding: 9px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    box-sizing: border-box;
    margin-bottom: 10px;
    font-size: 13px;
}
textarea { min-height: 80px; }
.btn {
    display: inline-block;
    border: none;
    padding: 9px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 700;
    text-decoration: none;
}
.btn-primary { background: #2563eb; color: #fff; }
.btn-success { background: #10b981; color: #fff; }
.btn-danger { background: #dc2626; color: #fff; }
.btn-secondary { background: #e2e8f0; color: #0f172a; }
.alert {
    padding: 10px 12px;
    border-radius: 6px;
    margin-bottom: 14px;
    font-weight: 600;
}
.alert-success { background: #dcfce7; color: #166534; }
.alert-danger { background: #fee2e2; color: #991b1b; }
.table-admin {
    width: 100%;
    border-collapse: collapse;
}
.table-admin th, .table-admin td {
    border-bottom: 1px solid #e2e8f0;
    padding: 8px 6px;
    text-align: left;
    vertical-align: top;
}
.table-admin th {
    background: #f8fafc;
    font-size: 12px;
    color: #475569;
}
.muted { color: #64748b; font-size: 13px; }
.pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    background: #e0f2fe;
    color: #0369a1;
    font-weight: 700;
}
.order-item {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* ===== RESPONSIVE TABLET (≤ 1024px) ===== */
@media (max-width: 1024px) {
    .luoi-thong-ke,
    .luoi-tai-chinh { grid-template-columns: repeat(2, 1fr); }
    .luoi-form-3 { grid-template-columns: repeat(2, 1fr); }
    .grid { grid-template-columns: 1fr; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .stats-grid { grid-template-columns: 1fr; }
}

/* ===== RESPONSIVE MOBILE (≤ 768px) ===== */
@media (max-width: 768px) {
    body { overflow: auto; }

    /* Sidebar ẩn, hiện qua hamburger */
    .nut-hamburger { display: flex; }
    .nut-dong-menu { display: block; }
    .cot-menu {
        position: fixed;
        top: 0; left: 0;
        height: 100%;
        transform: translateX(-100%);
    }
    .cot-menu.mo { transform: translateX(0); }

    /* Nội dung chiếm toàn màn hình */
    .khu-vuc-du-lieu { width: 100%; height: auto; min-height: 100vh; }
    .thanh-tren { padding: 10px 15px 10px 60px; font-size: 12px; }
    .noi-dung-chinh { padding: 12px; }

    /* Thống kê 2 cột */
    .luoi-thong-ke,
    .luoi-tai-chinh { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .hop-thong-ke { padding: 15px 10px; }
    .hop-thong-ke h3 { font-size: 16px; }
    .hop-tai-chinh { padding: 12px; }
    .hop-tai-chinh .icon { font-size: 22px; margin-right: 8px; }
    .hop-tai-chinh .so-lieu h3 { font-size: 14px; }

    /* Form stack dọc */
    .luoi-form,
    .luoi-form-3 { grid-template-columns: 1fr; gap: 0; }
    .luoi-form-3 [style*="grid-column: span 3"] { grid-column: span 1 !important; }

    /* Chi tiết */
    .khung-chi-tiet { padding: 15px; }
    .hang-thong-tin { grid-template-columns: 100px 1fr; }
    .khoi-noi-dung { padding: 15px; }
    .nut-tab-nd { font-size: 13px; padding: 8px 10px; }
    .khung-bang-header { flex-direction: column; align-items: flex-start; }
    .nhom-vi-tri .nhom-checkbox { display: flex; flex-wrap: wrap; overflow-x: visible; gap: 6px; }
    .nhom-vi-tri .nhom-checkbox label {
        display: flex;
        flex: 0 0 calc(33.333% - 5px);
        justify-content: center;
        width: calc(33.333% - 5px);
        white-space: nowrap;
        text-align: center;
        font-size: 11px;
        padding: 3px 4px;
    }
    
    .bang-du-lieu td span[style*="background"] {
        display: block;
        margin-bottom: 4px;
    }
}

/* ===== RESPONSIVE MOBILE NHỎ (≤ 480px) ===== */
@media (max-width: 480px) {
    .luoi-thong-ke,
    .luoi-tai-chinh { grid-template-columns: 1fr 1fr; gap: 8px; }
    .hop-thong-ke h3 { font-size: 16px; }
    .hop-thong-ke p { font-size: 11px; }
    .hop-tai-chinh .so-lieu h3 { font-size: 14px; }
    .bang-du-lieu th,
    .bang-du-lieu td { padding: 7px 6px; font-size: 11px; }
    .khung-chi-tiet { padding: 12px; }
    .hang-thong-tin { grid-template-columns: 1fr; }
    .hang-thong-tin strong { margin-bottom: 2px; }
}
