/**
 * =========================================================================
 * PINK PASTEL AESTHETIC THEME (Tone Hồng Nhạt Sang Trọng & Dịu Mắt)
 * =========================================================================
 */

:root,
[data-pc-preset="preset-1"],
body {
    --bs-primary: #f472b6 !important;
    --bs-primary-rgb: 244, 114, 182 !important;
    --bs-primary-hover: #db2777 !important;
    --bs-primary-light: #fdf2f8 !important;
    --bs-link-color: #ec4899 !important;
    --bs-link-hover-color: #be185d !important;
    --dh-primary-color: #f472b6 !important;
    --dh-dark-main-color: #ec4899 !important;
    --pc-sidebar-active-color: #ec4899 !important;
    --pc-sidebar-hover-color: #db2777 !important;
}

/* 1. Body & Nền toàn website (Trắng tinh khiết) */
body {
    background-color: #ffffff !important;
}

.pc-container {
    background-color: #ffffff !important;
}

/* 2. Text & Links */
a {
    color: #ec4899;
    transition: color 0.2s ease;
}

a:hover {
    color: #be185d;
}

.text-primary {
    color: #ec4899 !important;
}

.link-primary {
    color: #ec4899 !important;
}

.link-primary:hover,
.link-primary:focus {
    color: #be185d !important;
}

/* 3. Nút bấm (Buttons) */
.btn-primary {
    background: linear-gradient(135deg, #f472b6 0%, #fb7185 100%) !important;
    border-color: #f472b6 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(244, 114, 182, 0.35) !important;
    transition: all 0.25s ease !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background: linear-gradient(135deg, #ec4899 0%, #f43f5e 100%) !important;
    border-color: #ec4899 !important;
    color: #ffffff !important;
    box-shadow: 0 6px 20px rgba(236, 72, 153, 0.45) !important;
    transform: translateY(-1px);
}

.btn-outline-primary {
    border-color: #f472b6 !important;
    color: #db2777 !important;
    background: transparent !important;
    transition: all 0.25s ease !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
    background: linear-gradient(135deg, #f472b6 0%, #fb7185 100%) !important;
    border-color: #f472b6 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(244, 114, 182, 0.35) !important;
}

.btn-light-primary,
.bg-light-primary {
    background-color: #fdf2f8 !important;
    color: #db2777 !important;
}

.btn-light-primary:hover {
    background-color: #fce7f3 !important;
    color: #be185d !important;
}

/* 4. Badges (Huy hiệu) */
.badge.bg-primary {
    background: linear-gradient(135deg, #f472b6 0%, #fb7185 100%) !important;
    color: #ffffff !important;
}

.badge.bg-light-primary {
    background-color: #fdf2f8 !important;
    color: #db2777 !important;
    border: 1px solid #fbcfe8 !important;
}

/* 5. Menu Sidebar */
.pc-sidebar {
    background-color: #ffffff !important;
    border-right: 1px solid #fce7f3 !important;
}

.pc-sidebar .pc-link:hover,
.pc-sidebar .navbar-content .pc-navbar > .pc-item:not(.active) > .pc-link:not(.active):hover,
.pc-sidebar .navbar-content .pc-navbar > .pc-item.pc-hasmenu:hover > .pc-link {
    background: #fdf2f8 !important;
    color: #db2777 !important;
}

.pc-sidebar .navbar-content .pc-navbar > .pc-item:not(.active) > .pc-link:not(.active):hover .pc-mtext,
.pc-sidebar .navbar-content .pc-navbar > .pc-item:not(.active) > .pc-link:not(.active):hover .pc-micon,
.pc-sidebar .navbar-content .pc-navbar > .pc-item:not(.active) > .pc-link:not(.active):hover .pc-micon iconify-icon,
.pc-sidebar .navbar-content .pc-navbar > .pc-item:not(.active) > .pc-link:not(.active):hover .pc-micon i {
    color: #db2777 !important;
}

/* Sidebar Item Active */
body[data-pc-layout] .pc-sidebar .navbar-content .pc-navbar > .pc-item.active > .pc-link,
body[data-pc-layout] .pc-sidebar .navbar-content .pc-navbar > .pc-item > .pc-link.active,
.pc-sidebar .navbar-content .pc-navbar > .pc-item.active > .pc-link,
.pc-sidebar .navbar-content .pc-navbar > .pc-item > .pc-link.active,
.pc-sidebar .pc-link.active {
    background: linear-gradient(135deg, #fdf2f8 0%, #fce7f3 100%) !important;
    color: #db2777 !important;
    box-shadow: 0 2px 8px rgba(244, 114, 182, 0.15) !important;
}

body[data-pc-layout] .pc-sidebar .navbar-content .pc-navbar > .pc-item.active > .pc-link .pc-mtext,
body[data-pc-layout] .pc-sidebar .navbar-content .pc-navbar > .pc-item > .pc-link.active .pc-mtext,
.pc-sidebar .navbar-content .pc-navbar > .pc-item.active > .pc-link .pc-mtext,
.pc-sidebar .navbar-content .pc-navbar > .pc-item > .pc-link.active .pc-mtext,
.pc-sidebar .pc-link.active .pc-mtext {
    color: #db2777 !important;
    font-weight: 700 !important;
}

body[data-pc-layout] .pc-sidebar .navbar-content .pc-navbar > .pc-item.active > .pc-link .pc-micon,
body[data-pc-layout] .pc-sidebar .navbar-content .pc-navbar > .pc-item > .pc-link.active .pc-micon,
.pc-sidebar .navbar-content .pc-navbar > .pc-item.active > .pc-link .pc-micon,
.pc-sidebar .navbar-content .pc-navbar > .pc-item > .pc-link.active .pc-micon,
.pc-sidebar .pc-link.active .pc-micon,
.pc-sidebar .pc-link.active .pc-micon iconify-icon,
.pc-sidebar .pc-link.active .pc-micon i {
    color: #ec4899 !important;
}

/* 6. Header */
.pc-header {
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(10px) !important;
    border-bottom: 1px solid #fce7f3 !important;
}

.pc-header .pc-head-link:hover {
    color: #db2777 !important;
    background: #fdf2f8 !important;
}

/* 7. Cards & Boxes */
.card {
    border: 1px solid #fce7f3 !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 20px rgba(244, 114, 182, 0.06) !important;
    background-color: #ffffff !important;
}

.card:hover {
    box-shadow: 0 8px 28px rgba(244, 114, 182, 0.12) !important;
}

.card-header {
    background-color: #ffffff !important;
    border-bottom: 1px solid #fce7f3 !important;
}

/* 8. Form Controls (Input, Select, Focus Rings) */
.form-control:focus,
.form-select:focus,
.alpine-select-toggle:focus {
    border-color: #f472b6 !important;
    box-shadow: 0 0 0 0.25rem rgba(244, 114, 182, 0.22) !important;
}

.form-check-input:checked {
    background-color: #f472b6 !important;
    border-color: #f472b6 !important;
    box-shadow: 0 2px 6px rgba(244, 114, 182, 0.3) !important;
}

.form-switch .form-check-input:checked {
    background-color: #f472b6 !important;
    border-color: #f472b6 !important;
}

/* 9. Tabs & Nav-Pills */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background: linear-gradient(135deg, #f472b6 0%, #fb7185 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(244, 114, 182, 0.35) !important;
}

.nav-tabs .nav-link.active {
    color: #db2777 !important;
    border-bottom: 2px solid #f472b6 !important;
    background: transparent !important;
}

.nav-tabs .nav-link:hover {
    color: #ec4899 !important;
}

/* 10. Pagination */
.pagination .page-item.active .page-link {
    background: linear-gradient(135deg, #f472b6 0%, #fb7185 100%) !important;
    border-color: #f472b6 !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(244, 114, 182, 0.3) !important;
}

.pagination .page-link {
    color: #db2777 !important;
}

.pagination .page-link:hover {
    background-color: #fdf2f8 !important;
    color: #be185d !important;
}

/* 11. Progress bar & Loaders */
.progress-bar {
    background: linear-gradient(90deg, #f472b6 0%, #fb7185 100%) !important;
}

.loader-fill {
    background: linear-gradient(90deg, #f472b6 0%, #fb7185 100%) !important;
}

/* 12. Icon Boxes & Avatars */
.avtar.btn-light-primary {
    background-color: #fdf2f8 !important;
    color: #db2777 !important;
}

.stat-icon-box.bg-light-primary {
    background-color: #fdf2f8 !important;
    color: #db2777 !important;
}

/* 13. SweetAlert2 Theme Override */
.swal2-styled.swal2-confirm {
    background: linear-gradient(135deg, #f472b6 0%, #fb7185 100%) !important;
    border-color: #f472b6 !important;
    box-shadow: 0 4px 14px rgba(244, 114, 182, 0.35) !important;
}

.swal2-styled.swal2-confirm:hover {
    background: linear-gradient(135deg, #ec4899 0%, #f43f5e 100%) !important;
}

/* 14. Bảng (Tables) */
.table-hover > tbody > tr:hover > * {
    background-color: #fdf6f8 !important;
}

/* 15. Dropdowns */
.dropdown-item.active,
.dropdown-item:active {
    background: linear-gradient(135deg, #f472b6 0%, #fb7185 100%) !important;
    color: #ffffff !important;
}

.dropdown-item:hover {
    background-color: #fdf2f8 !important;
    color: #db2777 !important;
}

/* 16. Accent Elements (Border Left highlights, etc.) */
.border-primary {
    border-color: #f472b6 !important;
}

/* 17. Bảng Tin & Thông Báo Trang Chủ Client (Bulletin Board Pink Theme) */
.stat-notice-avatar {
    border: 2.5px solid #ffffff !important;
    box-shadow: 0 2px 10px rgba(244, 114, 182, 0.3) !important;
}

.stat-notice-avatar-ring {
    background: conic-gradient(from 0deg, #f472b6, #fb7185, #f43f5e, #fbcfe8, #f472b6) !important;
}

.stat-author-badge {
    color: #db2777 !important;
    background: #fdf2f8 !important;
    border: 1px solid #fbcfe8 !important;
}

.stat-author-badge i,
.stat-author-badge .ti {
    color: #ec4899 !important;
}

.stat-notice-author .badge,
.stat-notice-item .badge.bg-danger-subtle {
    background: #fff1f2 !important;
    color: #e11d48 !important;
    border: 1px solid #fecdd3 !important;
}

.stat-notice-author .badge i,
.stat-notice-item .badge.bg-danger-subtle i {
    color: #fb7185 !important;
}

.stat-notice-entry {
    background: #fff8fa !important;
    border: 1px solid #fce7f3 !important;
}

.stat-notice-entry:hover {
    background: #fdf2f8 !important;
    border-color: #fbcfe8 !important;
    transform: translateY(-1px);
}

.stat-entry-link {
    color: #db2777 !important;
    background: #fdf2f8 !important;
    border: 1px solid #fbcfe8 !important;
}

.stat-entry-link:hover {
    background: linear-gradient(135deg, #f472b6, #fb7185) !important;
    border-color: #f472b6 !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(244, 114, 182, 0.35) !important;
}

.stat-entry-brand {
    background: linear-gradient(135deg, #f472b6, #ec4899) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

.stat-notice-badge-icon {
    background: #fdf2f8 !important;
    color: #ec4899 !important;
}

.stat-notice-card .badge,
.stat-announcement-card .card-header .badge {
    background: #fdf2f8 !important;
    color: #db2777 !important;
    border: 1px solid #fbcfe8 !important;
}

.stat-notice-card .badge iconify-icon,
.stat-announcement-card .card-header .badge iconify-icon {
    color: #ec4899 !important;
}

/* 18. Mobile Optimization (2 thẻ 1 hàng, gọn gàng và đẹp mắt) */
@media (max-width: 575.98px) {
    .stat-card .card-body {
        padding: 8px 10px !important;
    }
    .stat-card {
        border-radius: 12px !important;
    }
    .stat-card .stat-icon-box {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        border-radius: 8px !important;
    }
    .stat-card .stat-icon-box iconify-icon,
    .stat-card .stat-icon-box i {
        font-size: 16px !important;
    }
    .stat-card .stat-value {
        font-size: 13.5px !important;
        line-height: 1.25 !important;
    }
    .stat-card p {
        font-size: 9.5px !important;
        letter-spacing: 0.2px !important;
        margin-bottom: 2px !important;
    }

    /* Tối ưu phần tác giả thông báo trên mobile */
    .stat-notice-item {
        padding: 12px 10px !important;
    }
    .stat-notice-avatar-wrap {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        margin-right: 0 !important;
    }
    .stat-notice-author-info {
        gap: 1px !important;
    }
    .stat-author-name {
        font-size: 13px !important;
        white-space: nowrap !important;
    }
    .stat-author-verified {
        font-size: 13px !important;
    }
    .stat-author-badge {
        font-size: 9.5px !important;
        padding: 1px 5px !important;
        border-radius: 4px !important;
        white-space: nowrap !important;
        height: 18px !important;
        line-height: 1 !important;
    }
    .stat-author-badge i,
    .stat-author-badge .ti {
        font-size: 10px !important;
        margin-right: 2px !important;
    }
    .stat-author-time {
        font-size: 10.5px !important;
        white-space: nowrap !important;
    }
    .stat-author-time iconify-icon {
        font-size: 11px !important;
    }
    .stat-notice-tag {
        font-size: 9.5px !important;
        padding: 2px 6px !important;
        white-space: nowrap !important;
    }
}

/* ========================================================
   19. Custom Stat Cards (Thiết kế phong cách mới theo mẫu ảnh)
   ======================================================== */
.stat-showcase-card {
    background: #ffffff !important;
    border: 1px solid #f1f5f9 !important;
    border-radius: 16px !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03) !important;
    transition: all 0.25s ease !important;
    overflow: hidden !important;
    position: relative !important;
}

.stat-showcase-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(244, 114, 182, 0.12) !important;
    border-color: #fbcfe8 !important;
}

.stat-card-wave {
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 80px;
    height: 52px;
    pointer-events: none;
    z-index: 1;
}

.stat-card-wave svg {
    width: 100%;
    height: 100%;
    display: block;
}

.stat-showcase-body {
    position: relative;
    z-index: 2;
    padding: 16px 18px !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.stat-item-label {
    font-size: 12px;
    font-weight: 600;
    color: #8c9ba5;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    margin-bottom: 6px;
    font-family: inherit;
}

.stat-item-value {
    font-size: 19px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.2px;
    font-family: inherit;
}

/* Dashed Icon Box & Custom Image Wrap */
.stat-dashed-box {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    transition: transform 0.25s ease;
}

.stat-img-wrap {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    overflow: hidden;
    transition: transform 0.25s ease;
}

.stat-card-custom-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    border-radius: 12px;
    mix-blend-mode: multiply;
}

/* Ẩn khi chưa có src để không hiện icon ảnh gãy */
.stat-card-custom-img:not([src]),
.stat-card-custom-img[src=""] {
    visibility: hidden;
}

.stat-showcase-card:hover .stat-dashed-box,
.stat-showcase-card:hover .stat-img-wrap {
    transform: scale(1.08);
}

.stat-dashed-box iconify-icon,
.stat-dashed-box svg {
    font-size: 22px;
}

/* Màu xanh ngọc (Tổng nạp) */
.stat-val-teal {
    color: #00a884 !important;
}
.stat-dashed-teal {
    border: 1.5px dashed #00a884 !important;
    color: #00a884 !important;
}

/* Màu cam / hổ phách (Số dư) */
.stat-val-amber {
    color: #f59e0b !important;
}
.stat-dashed-amber {
    border: 1.5px dashed #f59e0b !important;
    color: #f59e0b !important;
}

/* Màu hồng đỏ / coral (Cấp bậc) */
.stat-val-coral {
    color: #f43f5e !important;
}
.stat-dashed-coral {
    border: 1.5px dashed #f43f5e !important;
    color: #f43f5e !important;
}

/* Màu tím indigo (Tổng đơn hàng) */
.stat-val-indigo {
    color: #6366f1 !important;
}
.stat-dashed-indigo {
    border: 1.5px dashed #6366f1 !important;
    color: #6366f1 !important;
}

/* Mobile responsive cho stat-showcase-card */
@media (max-width: 575.98px) {
    .stat-showcase-card {
        border-radius: 14px !important;
    }
    .stat-showcase-body {
        padding: 12px 10px !important;
    }
    .stat-card-wave {
        width: 58px;
        height: 38px;
    }
    .stat-item-label {
        font-size: 10px !important;
        letter-spacing: 0.3px !important;
        margin-bottom: 3px !important;
    }
    .stat-item-value {
        font-size: 13.5px !important;
    }
    .stat-dashed-box,
    .stat-img-wrap {
        width: 35px !important;
        height: 35px !important;
        min-width: 35px !important;
        border-radius: 9px !important;
        border-width: 1.2px !important;
    }
    .stat-card-custom-img {
        border-radius: 9px !important;
    }
    .stat-dashed-box iconify-icon,
    .stat-dashed-box svg {
        font-size: 17px !important;
        width: 17px !important;
        height: 17px !important;
    }
}

/* ========================================================
   20. Mobile Bottom Nav (Thanh điều hướng dưới mobile)
   ======================================================== */
.mobile-bottom-nav .nav-item.active {
    color: #db2777 !important;
}

.mobile-bottom-nav .nav-item.active iconify-icon,
.mobile-bottom-nav .nav-item.active span {
    color: #db2777 !important;
}

.nav-item-center {
    background: linear-gradient(135deg, #f472b6, #fb7185) !important;
    box-shadow: 0 10px 25px rgba(244, 114, 182, 0.45) !important;
    color: #ffffff !important;
}

.nav-item-center.active {
    box-shadow: 0 12px 30px rgba(244, 114, 182, 0.6) !important;
}

.nav-label-center.active,
.nav-item-center.active + .nav-label-center,
.nav-item-center.active ~ .nav-label-center {
    color: #db2777 !important;
}