/* =========================================================================
   SKIN DARK GAMING cho SHOPCLONE7 (client)
   - Chỉ là lớp CSS đè lên theme gốc, KHÔNG đổi HTML/PHP.
   - Màu nhấn lấy từ Admin > Cài đặt > Giao diện: --primary / --primary1
   - Nạp sau mod/css/main.css trong views/client/header.php
   ========================================================================= */

:root {
    /* nền */
    --sk-bg: #0a0e17;
    --sk-bg2: #0f1523;
    --sk-card: #141b2b;
    --sk-card2: #1a2336;
    --sk-card3: #212c44;
    --sk-border: rgba(148, 163, 184, 0.14);
    --sk-border2: rgba(148, 163, 184, 0.26);
    /* chữ */
    --sk-heading: #f3f6fb;
    --sk-text: #c3cbd8;
    --sk-muted: #8a97ad;
    /* nhấn */
    --sk-accent: var(--primary, #007ea8);
    --sk-accent2: var(--primary1, #1a5e75);
    --sk-glow: 0 0 0 1px color-mix(in srgb, var(--sk-accent) 45%, transparent), 0 10px 30px rgba(0, 0, 0, 0.45), 0 0 24px color-mix(in srgb, var(--sk-accent) 22%, transparent);
    --sk-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    --sk-radius: 12px;
    --sk-grad: linear-gradient(135deg, var(--sk-accent) 0%, var(--sk-accent2) 100%);

    /* ghi đè biến theme gốc ở mức an toàn */
    --body: var(--sk-bg);
    --chalk: var(--sk-card2);
    --border: var(--sk-border);
    --heading: var(--sk-heading);
    --sub-heading: var(--sk-text);
    --text: var(--sk-text);
    --gray: var(--sk-muted);
    --primary-bshadow: var(--sk-shadow);
}

/* ---------- nền & chữ chung ---------- */
html {
    background: var(--sk-bg);
}

body {
    color: var(--sk-text);
    background:
        radial-gradient(1200px 600px at 10% -10%, color-mix(in srgb, var(--sk-accent) 18%, transparent), transparent 60%),
        radial-gradient(900px 500px at 100% 0%, color-mix(in srgb, var(--sk-accent2) 16%, transparent), transparent 55%),
        var(--sk-bg) !important;
    background-attachment: fixed;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--sk-heading);
}

p, li, span, label, td, th, small {
    color: inherit;
}

a {
    color: var(--sk-text);
}

a:hover {
    color: var(--sk-accent);
}

::selection {
    background: var(--sk-accent);
    color: #fff;
}

/* thanh cuộn */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--sk-bg2);
}

::-webkit-scrollbar-thumb {
    background: var(--sk-card3);
    border-radius: 10px;
    border: 2px solid var(--sk-bg2);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--sk-accent);
}

/* ---------- thanh chào mừng trên cùng ---------- */
.header-top {
    background: var(--sk-bg2);
    border-bottom: 1px solid var(--sk-border);
}

.header-top-welcome p,
.header-top-list li a {
    color: var(--sk-muted);
}

.header-top-list li a:hover {
    color: var(--sk-heading);
}

.header-select .nice-select,
.header-select i {
    color: var(--sk-muted) !important;
    background: transparent;
}

/* ---------- header: logo, tìm kiếm, ví ---------- */
.header-part,
.header-part.active {
    background: rgba(15, 21, 35, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--sk-border);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
}

.header-form,
.header-part.active .header-form {
    background: var(--sk-card);
    border: 1px solid var(--sk-border2);
    border-radius: 999px;
    overflow: hidden;
}

.header-form:focus-within {
    border-color: var(--sk-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--sk-accent) 25%, transparent);
}

.header-form input {
    background: transparent;
    color: var(--sk-heading);
}

.header-form input::placeholder {
    color: var(--sk-muted);
}

.header-form button i {
    color: var(--sk-muted);
}

.header-form button:hover i {
    color: var(--sk-accent);
}

.header-widget,
.header-part.active .header-widget {
    color: var(--sk-text);
}

.header-widget span,
.header-widget span small,
.header-widget i {
    color: var(--sk-text) !important;
}

.header-widget:hover span,
.header-widget:hover i {
    color: var(--sk-accent) !important;
}

.header-widget img,
.header-user img {
    border: 2px solid var(--sk-border2);
    border-radius: 50%;
}

.header-widget sup,
.header-part.active .header-widget sup {
    background: var(--sk-accent);
    color: #fff;
    box-shadow: 0 0 10px color-mix(in srgb, var(--sk-accent) 60%, transparent);
}

.header-user i,
.header-src i {
    color: var(--sk-text);
}

/* ---------- menu chính ---------- */
.navbar-part {
    background: var(--sk-bg2);
    border-bottom: 1px solid var(--sk-border);
}

.navbar-link {
    color: var(--sk-text);
    font-weight: 600;
    letter-spacing: 0.2px;
    position: relative;
}

.navbar-link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 12px;
    height: 2px;
    border-radius: 2px;
    background: var(--sk-grad);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s ease;
}

.navbar-link:hover,
.navbar-link.active {
    color: var(--sk-heading);
}

.navbar-link:hover::after,
.navbar-link.active::after {
    transform: scaleX(1);
}

.navbar-info i {
    background: var(--sk-card2);
    color: var(--sk-accent);
    border: 1px solid var(--sk-border);
}

.navbar-info p,
.navbar-info p small,
.navbar-info p span {
    color: var(--sk-text);
}

/* megamenu + dropdown */
.megamenu,
.dropdown-position-list {
    background: var(--sk-card);
    border: 1px solid var(--sk-border2);
    box-shadow: var(--sk-shadow);
}

.megamenu-wrap h5,
.megamenu-list li a,
.dropdown-position-list li a {
    color: var(--sk-text);
}

.megamenu-list li a:hover,
.dropdown-position-list li a:hover {
    color: var(--sk-heading);
    background: var(--sk-card3);
}

.skeleton-menu-title,
.skeleton-menu-item {
    background: var(--sk-card3);
}

/* sidebar mobile / danh mục / giỏ */
.nav-sidebar,
.category-sidebar,
.cart-sidebar {
    background: var(--sk-bg2);
    border-right: 1px solid var(--sk-border);
    box-shadow: 15px 0 40px rgba(0, 0, 0, 0.6);
}

.cart-sidebar {
    border-left: 1px solid var(--sk-border);
    border-right: none;
}

.nav-header,
.category-header,
.cart-header {
    border-bottom: 1px solid var(--sk-border);
}

.nav-link,
.category-link,
.nav-list li a,
.category-list li a,
.dropdown-list li a {
    color: var(--sk-text);
}

.nav-link:hover,
.category-link:hover,
.nav-link.active {
    color: var(--sk-accent);
}

.nav-close,
.cart-close,
.category-close {
    background: var(--sk-card3);
    color: var(--sk-heading);
}

.nav-select-group .nice-select,
.nav-select-group .nice-select .current {
    background: var(--sk-card);
    color: var(--sk-text);
    border-color: var(--sk-border);
}

.backdrop {
    background: rgba(2, 6, 14, 0.7);
    backdrop-filter: blur(2px);
}

.mobile-menu {
    background: rgba(15, 21, 35, 0.96);
    border-top: 1px solid var(--sk-border);
    backdrop-filter: blur(10px);
}

.mobile-menu a,
.mobile-menu button,
.mobile-menu i,
.mobile-menu span {
    color: var(--sk-text) !important;
}

.mobile-menu a.active,
.mobile-menu a:hover i,
.mobile-menu a:hover span {
    color: var(--sk-accent) !important;
}

/* ---------- khối / card chung ---------- */
.account-card,
.profile-card,
.blog-card,
.product-card,
.user-form-card,
.sidebar_profile,
.wallet-card,
.details-content,
.product-details-frame,
.feature-card {
    background: var(--sk-card);
    border: 1px solid var(--sk-border);
    box-shadow: var(--sk-shadow);
    border-radius: var(--sk-radius);
    color: var(--sk-text);
}

.account-card,
.user-form-card {
    background: linear-gradient(180deg, var(--sk-card2) 0%, var(--sk-card) 100%);
}

.sidebar_profile.active,
.sidebar_profile:hover,
.profile-card:hover {
    border-color: var(--sk-accent);
    box-shadow: var(--sk-glow);
}

.sidebar_profile a,
.sidebar_profile span,
.sidebar_profile i {
    color: var(--sk-text);
}

.sidebar_profile.active a,
.sidebar_profile.active i {
    color: var(--sk-accent);
}

/* ---------- ô công cụ miễn phí (widget_tools) ---------- */
.box-product-main {
    border-radius: var(--sk-radius);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45) !important;
    transition: transform .2s ease, box-shadow .2s ease;
    overflow: hidden;
    position: relative;
}

.box-product-main::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.35) 100%);
    pointer-events: none;
}

.box-product-main:hover {
    transform: translateY(-3px);
    box-shadow: var(--sk-glow) !important;
}

.box-product-main a {
    position: relative;
    z-index: 1;
}

/* ---------- nút chuyên mục trang chủ ---------- */
.btn-category-home {
    background: var(--sk-card);
    color: var(--sk-text);
    border: 1px solid var(--sk-border2);
    border-radius: 999px;
    padding: 9px 18px;
    font-weight: 600;
    transition: all .2s ease;
}

.btn-category-home:hover {
    color: var(--sk-heading);
    border-color: var(--sk-accent);
    background: var(--sk-card3);
}

.btn-category-home.active {
    color: #fff;
    background: var(--sk-grad);
    border-color: transparent;
    box-shadow: 0 0 18px color-mix(in srgb, var(--sk-accent) 45%, transparent);
}

.skeleton-category-btn {
    background: var(--sk-card3);
    border-radius: 999px;
}

/* ---------- tiêu đề nhóm sản phẩm ---------- */
.home-heading h3:not(.no-bg) {
    background: var(--sk-grad) !important;
    color: #fff;
    border-radius: 10px;
    box-shadow: 0 6px 20px color-mix(in srgb, var(--sk-accent) 35%, transparent);
    font-size: 17px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.home-heading h3 img {
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.15);
    padding: 2px;
}

/* ---------- dòng sản phẩm (kiểu LIST) ---------- */
.feature-card {
    padding: 14px 16px;
    margin-bottom: 12px;
    border: 1px solid var(--sk-border);
    background: linear-gradient(180deg, var(--sk-card2) 0%, var(--sk-card) 100%);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.feature-card:hover {
    border: 1px solid var(--sk-accent);
    box-shadow: var(--sk-glow);
    transform: translateY(-2px);
}

.feature-content {
    border-left: none;
}

.feature-name a {
    color: var(--sk-heading);
    font-weight: 600;
    font-size: 15px;
}

.feature-name a:hover {
    color: var(--sk-accent);
}

.feature-desc {
    color: var(--sk-muted);
}

.feature-desc i {
    color: var(--sk-accent);
}

.feature-rating i {
    color: var(--sk-muted);
}

.feature-rating i.active {
    color: #ffab10;
}

.label-text {
    display: inline-block;
    font-size: 12px;
    padding: 3px 10px;
    border-radius: 999px;
    margin: 4px 6px 0 0;
    background: var(--sk-card3);
    color: var(--sk-text);
    border: 1px solid var(--sk-border);
}

.label-text b {
    color: var(--sk-heading);
}

.label-text.feat {
    border-color: color-mix(in srgb, var(--sk-accent) 50%, transparent);
}

.label-text.off {
    background: color-mix(in srgb, #ff3838 20%, var(--sk-card3));
    color: #ff7b7b;
    border-color: rgba(255, 56, 56, 0.4);
}

.card-price-product-list {
    background: var(--sk-bg2);
    border: 1px dashed color-mix(in srgb, var(--sk-accent) 60%, transparent);
    border-radius: 10px;
}

.feature-price span,
.feature-price,
.price-box4 strong,
.details-price span {
    color: var(--sk-accent);
    font-weight: 700;
    text-shadow: 0 0 12px color-mix(in srgb, var(--sk-accent) 40%, transparent);
}

.feature-price del,
.proce-box4-not-discount,
.details-price del {
    color: var(--sk-muted);
}

/* nút mua */
.btn-buy,
.buy-btn-box4,
.btn-custom-available,
.btn-inline,
.wallet-form button,
button.btn-primary,
a.btn-primary,
.btn-primary {
    background: var(--sk-grad) !important;
    border: none !important;
    color: #fff !important;
    border-radius: 10px;
    font-weight: 700;
    letter-spacing: 0.4px;
    box-shadow: 0 6px 18px color-mix(in srgb, var(--sk-accent) 35%, transparent);
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

.btn-buy {
    width: 100%;
    padding: 10px 12px;
    text-transform: uppercase;
}

.btn-buy:hover,
.buy-btn-box4:hover,
.btn-inline:hover,
.btn-primary:hover {
    filter: brightness(1.12);
    transform: translateY(-1px);
    box-shadow: 0 10px 26px color-mix(in srgb, var(--sk-accent) 50%, transparent);
}

.btn-outline {
    color: var(--sk-accent);
    border-color: var(--sk-accent);
    background: transparent;
}

.btn-outline:hover {
    background: var(--sk-accent);
    color: #fff;
}

.btn-custom-sold,
.buy-btn-box4.disabled,
.btn-secondary {
    background: var(--sk-card3) !important;
    color: var(--sk-muted) !important;
}

/* hết hàng */
.product-disable {
    opacity: 0.75;
}

.product-disable::before {
    background: rgba(255, 56, 56, 0.85);
    border-radius: 0 0 var(--sk-radius) var(--sk-radius);
    font-weight: 700;
    letter-spacing: 1px;
}

/* ---------- sản phẩm dạng lưới (box4) nếu admin đổi kiểu hiển thị ---------- */
.product-box4 {
    background: var(--sk-card);
    border: 1px solid var(--sk-border);
    box-shadow: var(--sk-shadow);
    border-radius: var(--sk-radius);
}

.product-box4:hover {
    border-color: var(--sk-accent);
    box-shadow: var(--sk-glow);
}

.product-head-box4 {
    background: var(--sk-card2);
    border-bottom: 1px solid var(--sk-border);
}

.product-head-box4 h4,
.product-body-box4 p,
.product-footer-box4 strong,
.product-footer-box4 span {
    color: var(--sk-text);
}

.product-footer-box4 {
    border-bottom: 1px solid var(--sk-border);
}

.border-end-box4 {
    border-color: var(--sk-border) !important;
}

/* ---------- cột ví bên phải ---------- */
.card-wallet-home {
    background: linear-gradient(160deg, var(--sk-card2) 0%, var(--sk-card) 60%, color-mix(in srgb, var(--sk-accent) 12%, var(--sk-card)) 100%);
}

.my-wallet p {
    color: var(--sk-muted);
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.6px;
}

.my-wallet h3 {
    color: var(--sk-heading);
    text-shadow: 0 0 18px color-mix(in srgb, var(--sk-accent) 50%, transparent);
}

.wallet-card {
    background: var(--sk-bg2);
    border: 1px solid var(--sk-border);
    padding: 18px 20px;
}

.wallet-card p {
    color: var(--sk-muted);
    font-size: 13px;
}

.wallet-card h3 {
    color: var(--sk-heading);
    font-size: 22px;
}

.wallet-card:hover {
    background: var(--sk-card3);
    border-color: var(--sk-accent);
}

.wallet-card:hover p,
.wallet-card:hover h3 {
    color: var(--sk-heading);
}

.user-form-social li a {
    border-radius: 10px;
    font-weight: 700;
}

/* ---------- đơn hàng / nạp tiền gần đây ---------- */
.badge.bg-primary {
    background: var(--sk-grad) !important;
    border-radius: 999px;
    font-weight: 600;
}

.badge.bg-success {
    background: #11b76b !important;
}

.badge.bg-danger {
    background: #ff3838 !important;
}

/* ---------- menu nổi bên phải (top-menu) ---------- */
#top-menu-right li a,
#top-menu-left li a {
    background: var(--sk-card);
    border: 1px solid var(--sk-border2);
    color: var(--sk-text);
}

#top-menu-right li a.active,
#top-menu-left li a.active,
#top-menu-right li a:hover,
#top-menu-left li a:hover {
    background: var(--sk-grad);
    color: #fff;
}

#top-menu-right i,
#top-menu-left i {
    background-color: rgba(255, 255, 255, 0.08);
}

/* ---------- form ---------- */
.form-control,
.form-select,
.wallet-form input,
textarea.form-control,
.user-form input,
.input-group-text {
    background: var(--sk-bg2) !important;
    color: var(--sk-heading) !important;
    border: 1px solid var(--sk-border2) !important;
    border-radius: 10px;
}

.form-control::placeholder,
.user-form input::placeholder {
    color: var(--sk-muted);
}

.form-control:focus,
.form-select:focus,
.user-form input:focus {
    border-color: var(--sk-accent) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--sk-accent) 25%, transparent) !important;
    outline: none;
}

.form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%238a97ad' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
}

.form-select option {
    background: var(--sk-card);
    color: var(--sk-text);
}

.nice-select,
.nice-select .list {
    background: var(--sk-bg2);
    color: var(--sk-text);
    border-color: var(--sk-border2);
}

.nice-select .option:hover,
.nice-select .option.selected {
    background: var(--sk-card3);
    color: var(--sk-heading);
}

.form-label,
.form-group label,
.user-form label {
    color: var(--sk-text);
}

.form-check-input {
    background-color: var(--sk-bg2);
    border-color: var(--sk-border2);
}

.form-check-input:checked {
    background-color: var(--sk-accent);
    border-color: var(--sk-accent);
}

.user-form-title h3,
.user-form-title h2,
.user-form-title p {
    color: var(--sk-heading);
}

.user-form-remind a,
.user-form-remind p,
.user-form-remind span {
    color: var(--sk-muted);
}

.user-form-remind a:hover {
    color: var(--sk-accent);
}

/* ---------- bảng ---------- */
.table {
    color: var(--sk-text);
    --bs-table-bg: transparent;
    --bs-table-striped-bg: rgba(255, 255, 255, 0.025);
    --bs-table-hover-bg: rgba(255, 255, 255, 0.05);
    --bs-table-color: var(--sk-text);
    --bs-table-striped-color: var(--sk-text);
    --bs-table-hover-color: var(--sk-heading);
    border-color: var(--sk-border);
}

.table thead tr,
.table thead th {
    background: var(--sk-card2) !important;
    color: var(--sk-heading) !important;
    border-color: var(--sk-border) !important;
}

.table tbody tr th,
.table tbody tr td {
    color: var(--sk-text);
    border-color: var(--sk-border);
}

.table-responsive,
.table-padded {
    border-radius: var(--sk-radius);
    overflow: hidden;
    border: 1px solid var(--sk-border);
}

/* phân trang */
.page-link {
    background: var(--sk-card);
    color: var(--sk-text);
    border: 1px solid var(--sk-border);
}

.page-link:hover,
.page-item.active .page-link,
.page-link.active {
    background: var(--sk-grad);
    color: #fff;
    border-color: transparent;
}

.page-info,
.bottom-paginate p {
    color: var(--sk-muted);
}

/* ---------- modal / popup ---------- */
.modal-content {
    background: var(--sk-card) !important;
    border: 1px solid var(--sk-border2);
    color: var(--sk-text);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7);
}

.modal-header,
.modal-footer {
    border-color: var(--sk-border);
    background: var(--sk-card2);
}

.modal-title {
    color: var(--sk-heading);
}

.btn-close {
    filter: invert(1) grayscale(1) brightness(1.6);
    opacity: 0.8;
}

.lb-modal,
.lb-header,
.lb-body {
    background: var(--sk-card) !important;
    color: var(--sk-text);
}

/* ---------- alert ---------- */
.alert {
    border-radius: 10px;
    border: 1px solid var(--sk-border2);
}

.alert-danger {
    background: rgba(255, 56, 56, 0.12);
    color: #ffb4b4;
    border-color: rgba(255, 56, 56, 0.35);
}

.alert-warning {
    background: rgba(255, 171, 16, 0.12);
    color: #ffd58a;
    border-color: rgba(255, 171, 16, 0.35);
}

.alert-info,
.alert-primary {
    background: color-mix(in srgb, var(--sk-accent) 15%, transparent);
    color: var(--sk-heading);
    border-color: color-mix(in srgb, var(--sk-accent) 40%, transparent);
}

.alert-success {
    background: rgba(17, 183, 107, 0.12);
    color: #9ff0c9;
    border-color: rgba(17, 183, 107, 0.35);
}

/* ---------- trang chi tiết sản phẩm ---------- */
.details-gallery,
.details-preview img {
    border-radius: var(--sk-radius);
    border: 1px solid var(--sk-border);
    background: var(--sk-card);
}

.details-name,
.details-name a,
.details-content h3,
.details-content h4 {
    color: var(--sk-heading);
}

.details-meta p,
.details-meta a,
.details-list-group li,
.details-list-group li a,
.details-list-group li span {
    color: var(--sk-text);
}

.details-list-group li a:hover {
    color: var(--sk-accent);
}

.details-content {
    padding: 22px;
}

.product-details-frame {
    padding: 20px;
}

.details-desc,
.content_html,
.content_html p,
.content_html li {
    color: var(--sk-text);
}

.details-label-group .details-label {
    border-radius: 999px;
}

.nav-tabs {
    border-bottom: 1px solid var(--sk-border);
}

.nav-tabs .nav-link {
    color: var(--sk-muted);
    border: none;
    border-bottom: 2px solid transparent;
    background: transparent;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-link:hover {
    color: var(--sk-heading);
    background: transparent;
    border-bottom-color: var(--sk-accent);
}

/* ---------- footer ---------- */
.footer-part {
    background: var(--sk-bg2);
    border-top: 1px solid var(--sk-border);
    padding-top: 50px;
}

.footer-title {
    color: var(--sk-heading);
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.footer-title::after,
.footer-widget h3::after {
    background: var(--sk-grad);
}

.footer-widget p,
.footer-contact li p,
.footer-contact li a,
.footer-links a,
.footer-links li a,
.footer-widget li a,
.footer-widget a {
    color: var(--sk-muted);
}

.footer-contact li i {
    background: var(--sk-card);
    color: var(--sk-accent);
    border: 1px solid var(--sk-border);
}

.footer-links a:hover,
.footer-widget a:hover {
    color: var(--sk-accent);
}

.footer-bottom {
    background: var(--sk-card);
    border: 1px solid var(--sk-border);
    border-bottom: none;
    margin-top: 40px;
}

.footer-copytext,
.footer-copytext a {
    color: var(--sk-muted);
}

.footer-copytext a:hover {
    color: var(--sk-accent);
}

.footer-card img {
    filter: brightness(0.9);
    border-radius: 6px;
}

.backtop {
    background: var(--sk-grad);
    box-shadow: 0 0 18px color-mix(in srgb, var(--sk-accent) 50%, transparent);
}

/* ---------- các trang bên trong (profile, đơn hàng, nạp tiền) ---------- */
.inner-section .section-heading h2,
.inner-section .section-heading h3,
.page-title,
.profile-part h2,
.profile-part h3,
.profile-part h4 {
    color: var(--sk-heading);
}

.section-heading p,
.text-muted {
    color: var(--sk-muted) !important;
}

.card,
.card-body {
    background: var(--sk-card);
    color: var(--sk-text);
    border-color: var(--sk-border);
    border-radius: var(--sk-radius);
}

.card-header,
.card-footer {
    background: var(--sk-card2);
    border-color: var(--sk-border);
    color: var(--sk-heading);
}

.list-group-item {
    background: var(--sk-card);
    color: var(--sk-text);
    border-color: var(--sk-border);
}

.text-dark {
    color: var(--sk-heading) !important;
}

.bg-white,
.bg-light {
    background: var(--sk-card) !important;
    color: var(--sk-text);
}

.border,
.border-top,
.border-bottom,
.border-start,
.border-end {
    border-color: var(--sk-border) !important;
}

hr {
    border-color: var(--sk-border);
    opacity: 1;
}

/* các khối inline có màu nền trắng cứng trong PHP */
[style*="background: white"],
[style*="background:#fff"],
[style*="background: #fff"],
[style*="background-color: white"],
[style*="background-color:#fff"],
[style*="background-color: #fff"] {
    background: var(--sk-card) !important;
    color: var(--sk-text);
}

/* ảnh QR / logo thanh toán cần nền sáng để quét */
img[src*="qr"],
img[src*="QR"],
.qr-code img,
.qrcode img {
    background: #fff;
    padding: 6px;
    border-radius: 8px;
}

/* skeleton loading */
.skeleton-card,
.skeleton-image,
.skeleton-title,
.skeleton-text,
.skeleton-stock,
.skeleton-sales,
.skeleton-price,
.skeleton-button {
    background: var(--sk-card3);
}

.skeleton-card {
    background: var(--sk-card);
    border: 1px solid var(--sk-border);
}

.loading-text {
    color: var(--sk-muted);
}

/* ---------- responsive nhẹ ---------- */
@media (max-width: 767px) {
    .btn-category-home {
        padding: 8px 14px;
        font-size: 13px;
    }

    .feature-card {
        padding: 12px;
    }
}

/* ---------- bổ sung sau khi soi trang ---------- */
/* chữ màu cứng trong nội dung "giao dịch gần đây" (admin nhập inline style) */
.feature-card [style*="color:blue"],
.feature-card [style*="color: blue"],
.feature-card [style*="#0000ff"] {
    color: #6cc4ff !important;
}

.feature-card [style*="color:red"],
.feature-card [style*="color: red"] {
    color: #ff7b7b !important;
}

.feature-card [style*="color:green"],
.feature-card [style*="color: green"] {
    color: #4ade80 !important;
}

/* hộp "Bạn chưa có tài khoản?" dưới form đăng nhập */
.user-form-remind {
    background: var(--sk-card) !important;
    border: 1px solid var(--sk-border);
    border-radius: var(--sk-radius);
    color: var(--sk-muted);
}

/* chữ mờ dễ đọc hơn */
:root {
    --sk-muted: #9aa7bb;
}

/* logo: giới hạn chiều cao, nền tối vẫn rõ */
.header-logo img {
    max-height: 64px;
    width: auto;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.12));
}

/* tiêu đề chuyên mục có icon */
.home-heading h3 img {
    width: 28px;
    height: 28px;
    object-fit: cover;
}

/* ô số dư trong header */
.header-widget span small {
    color: var(--sk-muted) !important;
}

/* card ví: đường viền nhấn */
.card-wallet-home {
    border-color: color-mix(in srgb, var(--sk-accent) 35%, var(--sk-border));
}

/* ---------- bổ sung 2: tab sản phẩm, trang blog ---------- */
.nav-tabs {
    background: var(--sk-card) !important;
    border: 1px solid var(--sk-border) !important;
    border-radius: var(--sk-radius);
}

.nav-tabs .nav-link,
.nav-tabs .nav-item .nav-link {
    color: var(--sk-muted);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-link:hover {
    color: var(--sk-heading);
    border-bottom-color: var(--sk-accent);
}

.tab-content,
.tab-pane {
    color: var(--sk-text);
}

/* banner đầu trang blog / trang con: bỏ ảnh nền sáng */
.single-banner,
.inner-section.single-banner {
    background: linear-gradient(135deg, color-mix(in srgb, var(--sk-accent) 25%, var(--sk-bg2)), var(--sk-bg2)) !important;
    border-bottom: 1px solid var(--sk-border);
    padding: 34px 0;
}

.single-banner h2,
.single-banner h3,
.single-banner p,
.single-banner .breadcrumb-item,
.single-banner .breadcrumb-item a {
    color: var(--sk-heading);
}

.blog-widget {
    background: var(--sk-card);
    border: 1px solid var(--sk-border);
    box-shadow: var(--sk-shadow);
    color: var(--sk-text);
}

.blog-widget h3,
.blog-widget h4,
.blog-widget h5,
.blog-widget-title {
    color: var(--sk-heading);
}

.blog-widget-form {
    background: var(--sk-bg2);
    border: 1px solid var(--sk-border2);
    border-radius: 10px;
    overflow: hidden;
}

.blog-widget-form input {
    background: transparent;
    color: var(--sk-heading);
}

.blog-widget-form button {
    background: var(--sk-grad);
    color: #fff;
}

.blog-widget-feed li a,
.blog-widget-category li a,
.blog-widget-feed li h6,
.blog-widget-feed li p,
.blog-meta li,
.blog-meta li a,
.blog-content p {
    color: var(--sk-text);
}

.blog-widget-feed li a:hover,
.blog-widget-category li a:hover,
.blog-title a:hover {
    color: var(--sk-accent);
}

.blog-title a,
.blog-title {
    color: var(--sk-heading);
}

.blog-media img {
    border-radius: 10px;
}

.top-filter,
.filter-show,
.filter-action {
    color: var(--sk-text);
}

.filter-show .nice-select,
.filter-action .nice-select {
    background: var(--sk-bg2);
    color: var(--sk-text);
    border-color: var(--sk-border2);
}

/* icon liên hệ ở footer */
.footer-contact li i {
    background: var(--sk-card) !important;
    color: var(--sk-accent) !important;
    border: 1px solid var(--sk-border) !important;
    border-radius: 10px;
}

/* nút đăng nhập / đăng ký / form-button */
.form-button button,
.form-button .btn,
.user-form button[type="submit"],
.user-form button[type="button"] {
    background: var(--sk-grad) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 10px;
    font-weight: 700;
    box-shadow: 0 6px 18px color-mix(in srgb, var(--sk-accent) 35%, transparent);
}

/* ô mã đơn / input-group ở tài liệu API */
.input-group .btn {
    border-radius: 0 10px 10px 0;
}

/* ---------- bổ sung 3: phối màu chuẩn ---------- */
/* Bộ màu khuyên dùng trong Admin > Cài đặt > Giao diện:
   Màu chính  (theme_color)  : #ff2e4c  (đỏ hồng, hợp logo)
   Màu phụ    (theme_color1) : #ff7a2f  (cam)  -> gradient đỏ -> cam
   Nền tối navy + chữ xám sáng, KHÔNG dùng màu chính = #000000 vì nút và giá sẽ mất màu. */
:root {
    --sk-bg: #0b0f19;
    --sk-bg2: #101627;
    --sk-card: #151c2e;
    --sk-card2: #1b2338;
    --sk-card3: #232d46;
    --sk-heading: #f5f7fb;
    --sk-text: #c9d1de;
    --sk-muted: #94a0b5;
}

/* dải banner blog: bỏ gradient xanh lá của theme gốc */
.single-banner::before {
    background: linear-gradient(to right, color-mix(in srgb, var(--sk-accent) 45%, var(--sk-bg2)), rgba(11, 15, 25, 0.9)) !important;
}

/* giá: nhấn đỏ rõ, có viền sáng nhẹ */
.feature-price span,
.feature-price,
.price-box4 strong,
.details-price span {
    color: #ff5c73;
    text-shadow: 0 0 14px rgba(255, 46, 76, 0.45);
}

/* nhãn kho / đã bán: 2 màu dễ phân biệt */
.label-text.feat {
    background: rgba(255, 46, 76, 0.14);
    color: #ffb3bf;
    border-color: rgba(255, 46, 76, 0.45);
}

.label-text.order {
    background: rgba(56, 189, 248, 0.12);
    color: #a5dcff;
    border-color: rgba(56, 189, 248, 0.4);
}

/* nút chi tiết (nút phụ) */
.btn-custom-sold,
.btn-secondary,
.more-btn-box4,
a.btn-dark,
.btn-dark {
    background: var(--sk-card3) !important;
    color: var(--sk-heading) !important;
    border: 1px solid var(--sk-border2) !important;
    border-radius: 10px;
}

.btn-custom-sold:hover,
.more-btn-box4:hover,
.btn-dark:hover {
    border-color: var(--sk-accent) !important;
    color: var(--sk-heading) !important;
}

/* số dư nổi bật */
.my-wallet h3 {
    color: #ff5c73;
    text-shadow: 0 0 20px rgba(255, 46, 76, 0.5);
}

/* =========================================================================
   V2 - LỚP ẤN TƯỢNG (neon gaming): nền lưới, viền gradient động, banner nghiêng,
   huy hiệu giá, hiệu ứng ánh sáng quét, card hiện dần. Chỉ CSS, không đổi HTML.
   ========================================================================= */

@keyframes sk-gradient-move {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

@keyframes sk-spin {
    to { transform: rotate(360deg); }
}

@keyframes sk-rise {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes sk-pulse {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--sk-accent) 55%, transparent); }
    70% { box-shadow: 0 0 0 8px transparent; }
}

@keyframes sk-shine {
    0% { transform: translateX(-130%) skewX(-20deg); }
    100% { transform: translateX(230%) skewX(-20deg); }
}

/* ---- nền: lưới mờ + quầng sáng ---- */
body {
    background:
        radial-gradient(900px 500px at 8% -5%, color-mix(in srgb, var(--sk-accent) 24%, transparent), transparent 60%),
        radial-gradient(800px 480px at 95% 5%, color-mix(in srgb, var(--sk-accent2) 22%, transparent), transparent 60%),
        radial-gradient(700px 500px at 50% 110%, color-mix(in srgb, var(--sk-accent) 12%, transparent), transparent 60%),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 44px),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 44px),
        var(--sk-bg) !important;
}

/* ---- header: đường neon chạy dưới thanh menu ---- */
.navbar-part {
    position: relative;
}

.navbar-part::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--sk-accent), var(--sk-accent2), transparent);
    background-size: 200% 100%;
    animation: sk-gradient-move 6s linear infinite;
}

.navbar-link {
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 0.8px;
}

.header-logo img {
    filter: drop-shadow(0 0 14px color-mix(in srgb, var(--sk-accent) 55%, transparent));
}

/* ---- thông báo đầu trang: viền neon trái + nền gradient ---- */
.account-card.pt-3 {
    position: relative;
    padding: 18px 22px 18px 26px !important;
    background: linear-gradient(90deg, color-mix(in srgb, var(--sk-accent) 16%, var(--sk-card)) 0%, var(--sk-card) 60%);
    border-left: 4px solid var(--sk-accent);
    overflow: hidden;
}

.account-card.pt-3::after {
    content: "";
    position: absolute;
    right: -60px;
    top: -60px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--sk-accent2) 40%, transparent), transparent 70%);
    pointer-events: none;
}

.account-card.pt-3 h4,
.account-card.pt-3 p {
    color: var(--sk-heading);
    font-size: 15px;
    margin: 0;
}

/* ---- ô công cụ: kính mờ + viền gradient ---- */
.box-product-main {
    border-radius: 16px;
    border: 1px solid transparent;
    background-clip: padding-box;
}

.box-product-main::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: 17px;
    padding: 1px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.05) 40%, color-mix(in srgb, var(--sk-accent) 60%, transparent));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.box-product-main:hover {
    transform: translateY(-4px) scale(1.01);
}

/* ---- nút chuyên mục: chip kính, active phát sáng nhịp ---- */
ul.custom-button-list {
    gap: 8px;
}

.btn-category-home {
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(6px);
    text-transform: uppercase;
    font-size: 12.5px;
    letter-spacing: 0.5px;
}

.btn-category-home img {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    object-fit: cover;
}

.btn-category-home.active {
    animation: sk-pulse 2.2s ease-out infinite;
}

/* ---- tiêu đề chuyên mục: banner nghiêng ---- */
.home-heading {
    position: relative;
    margin: 26px 0 16px !important;
}

.home-heading h3:not(.no-bg) {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    border-radius: 10px 0 0 10px;
    clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 100%, 0 100%);
    box-shadow: 0 8px 26px color-mix(in srgb, var(--sk-accent) 40%, transparent);
    background: linear-gradient(90deg, var(--sk-accent), var(--sk-accent2)) !important;
    background-size: 200% 100% !important;
    animation: sk-gradient-move 5s linear infinite;
}

.home-heading::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -6px;
    height: 1px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--sk-accent) 70%, transparent), transparent 70%);
}

.home-heading h3 img {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.25);
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.35);
}

/* ---- card sản phẩm: viền gradient chạy khi hover + hiện dần ---- */
.prod-item .product-box4,
.feature-card {
    position: relative;
    isolation: isolate;
    animation: sk-rise .45s ease both;
}

.prod-item:nth-child(2) .product-box4, .row > div:nth-child(2) > .feature-card { animation-delay: .06s; }
.prod-item:nth-child(3) .product-box4, .row > div:nth-child(3) > .feature-card { animation-delay: .12s; }
.prod-item:nth-child(4) .product-box4, .row > div:nth-child(4) > .feature-card { animation-delay: .18s; }
.prod-item:nth-child(5) .product-box4, .row > div:nth-child(5) > .feature-card { animation-delay: .24s; }
.prod-item:nth-child(6) .product-box4, .row > div:nth-child(6) > .feature-card { animation-delay: .30s; }

.prod-item .product-box4::before,
.feature-card::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: conic-gradient(from 0deg, transparent 0 70%, var(--sk-accent) 85%, var(--sk-accent2) 95%, transparent 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity .25s ease;
    z-index: -1;
    pointer-events: none;
}

.prod-item .product-box4:hover::before,
.feature-card:hover::before {
    opacity: 1;
    animation: sk-spin 2.4s linear infinite;
}

.prod-item .product-box4:hover,
.feature-card:hover {
    border-color: transparent;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55), 0 0 30px color-mix(in srgb, var(--sk-accent) 30%, transparent);
}

.product-head-box4 {
    background: linear-gradient(90deg, color-mix(in srgb, var(--sk-accent) 14%, transparent), transparent 70%);
}

.product-head-box4 h4 {
    text-transform: uppercase;
    letter-spacing: 0.3px;
    font-size: 13px;
}

/* ---- giá: huy hiệu gradient ---- */
.price-box4 strong,
.card-price-product-list .feature-price span,
.feature-price span {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 15px;
    color: #fff;
    background: linear-gradient(90deg, var(--sk-accent), var(--sk-accent2));
    box-shadow: 0 6px 18px color-mix(in srgb, var(--sk-accent) 45%, transparent);
    text-shadow: none;
}

.card-price-product-list {
    background: transparent;
    border: none;
}

/* ---- tồn kho: chấm nhịp ---- */
.product-footer-box4 .badge.bg-primary::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #4ade80;
    margin-right: 6px;
    box-shadow: 0 0 8px #4ade80;
    vertical-align: middle;
}

/* ---- nút: ánh sáng quét khi hover ---- */
.btn-buy,
.buy-btn-box4,
.btn-inline,
.form-button button,
.btn-category-home.active,
.user-form-social li a {
    position: relative;
    overflow: hidden;
}

.btn-buy::after,
.buy-btn-box4::after,
.btn-inline::after,
.form-button button::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 40%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
    transform: translateX(-130%) skewX(-20deg);
    pointer-events: none;
}

.btn-buy:hover::after,
.buy-btn-box4:hover::after,
.btn-inline:hover::after,
.form-button button:hover::after {
    animation: sk-shine .8s ease;
}

/* ---- ví: viền conic xoay chậm, số dư to phát sáng ---- */
.card-wallet-home {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border: 1px solid transparent;
}

.card-wallet-home::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1.5px;
    background: conic-gradient(from 0deg, var(--sk-accent), transparent 30%, var(--sk-accent2) 55%, transparent 80%, var(--sk-accent));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: sk-spin 8s linear infinite;
    z-index: -1;
    pointer-events: none;
}

.my-wallet h3 {
    font-size: 40px;
    letter-spacing: -0.5px;
    background: linear-gradient(90deg, #fff, color-mix(in srgb, var(--sk-accent) 70%, #fff));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: none;
    filter: drop-shadow(0 0 16px color-mix(in srgb, var(--sk-accent) 55%, transparent));
}

.wallet-card {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(6px);
}

/* ---- giao dịch gần đây: dạng feed ---- */
.home-heading + div .feature-card {
    padding: 10px 14px;
    margin-bottom: 8px;
    border-left: 3px solid var(--sk-accent2);
    animation: none;
}

.home-heading + div .feature-card::before {
    display: none;
}

/* ---- footer: viền gradient trên ---- */
.footer-part {
    position: relative;
    background: linear-gradient(180deg, var(--sk-bg2), #080b13);
}

.footer-part::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--sk-accent), var(--sk-accent2), transparent);
}

.footer-bottom {
    background: rgba(255, 255, 255, 0.03);
}

/* ---- menu nổi bên phải: chip kính ---- */
#top-menu-right li a,
#top-menu-left li a {
    backdrop-filter: blur(8px);
    background: rgba(20, 27, 43, 0.85);
}

/* ---- giảm chuyển động nếu người dùng tắt animation ---- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* =========================================================================
   V4 - THIẾT KẾ LẠI NHÓM ĐIỀU KHIỂN
   Dropdown menu, ô select (nice-select), thanh lọc, ô tìm kiếm, banner trang con.
   Theme gốc gán background: var(--white) cứng cho các phần này nên phải đè riêng.
   ========================================================================= */

/* ---------- DROPDOWN MENU TRÊN THANH ĐIỀU HƯỚNG ---------- */
.dropdown-position-list {
    padding: 8px;
    min-width: 230px;
    width: auto;
    background: rgba(21, 28, 46, 0.98) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--sk-border2);
    border-radius: 14px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.03) inset;
}

/* mũi tên tam giác phía trên: đổi từ trắng sang nền tối */
.dropdown-position-list::before,
.megamenu::before {
    background: rgba(21, 28, 46, 0.98) !important;
    border-top: 1px solid var(--sk-border2) !important;
    border-left: 1px solid var(--sk-border2) !important;
}

.dropdown-position-list li {
    margin: 1px 0;
}

.dropdown-position-list li a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    font-size: 13.5px;
    font-weight: 500;
    border-radius: 10px;
    color: var(--sk-text) !important;
    background: transparent !important;
    border: 1px solid transparent;
    position: relative;
}

.dropdown-position-list li a img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.08);
    padding: 2px;
    flex: 0 0 22px;
}

.dropdown-position-list li a:hover {
    color: #fff !important;
    background: linear-gradient(90deg, color-mix(in srgb, var(--sk-accent) 28%, transparent), transparent) !important;
    border-color: color-mix(in srgb, var(--sk-accent) 45%, transparent);
    transform: translateX(2px);
}

/* ---------- MEGAMENU (SẢN PHẨM) ---------- */
.megamenu {
    background: rgba(21, 28, 46, 0.98) !important;
    backdrop-filter: blur(14px);
    border: 1px solid var(--sk-border2);
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7);
}

.megamenu-title,
.megamenu-wrap h5 {
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--sk-heading) !important;
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--sk-border);
    position: relative;
}

.megamenu-title::after,
.megamenu-wrap h5::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 42px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--sk-accent), var(--sk-accent2));
}

.megamenu-list li a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px !important;
    border-radius: 8px;
    font-size: 13px;
    color: var(--sk-text) !important;
    background: transparent !important;
}

.megamenu-list li a img {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    object-fit: cover;
}

.megamenu-list li a:hover {
    color: #fff !important;
    background: color-mix(in srgb, var(--sk-accent) 22%, transparent) !important;
}

/* ---------- Ô SELECT (nice-select) ---------- */
.nice-select {
    height: 40px;
    line-height: 38px;
    padding: 0 38px 0 14px;
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--sk-text) !important;
    background: var(--sk-card) !important;
    border: 1px solid var(--sk-border2) !important;
    float: none;
    display: inline-block;
}

.nice-select:hover,
.nice-select.open,
.nice-select:focus {
    border-color: var(--sk-accent) !important;
    color: var(--sk-heading) !important;
}

.nice-select::after {
    width: 7px;
    height: 7px;
    right: 15px;
    margin-top: -5px;
    border-bottom: 2px solid var(--sk-muted) !important;
    border-right: 2px solid var(--sk-muted) !important;
}

.nice-select.open::after {
    border-color: var(--sk-accent) !important;
}

.nice-select .current {
    color: inherit !important;
}

.nice-select .list {
    min-width: 100%;
    width: max-content;
    margin-top: 6px;
    padding: 6px;
    border-radius: 12px;
    background: rgba(21, 28, 46, 0.99) !important;
    border: 1px solid var(--sk-border2);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.6);
    max-height: 320px;
    overflow-y: auto;
}

.nice-select .option {
    min-height: 34px;
    line-height: 34px;
    padding: 0 14px;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--sk-text) !important;
    background: transparent !important;
}

.nice-select .option:hover,
.nice-select .option.focus,
.nice-select .option.selected.focus {
    color: #fff !important;
    background: color-mix(in srgb, var(--sk-accent) 30%, transparent) !important;
}

.nice-select .option.selected {
    font-weight: 700;
    color: var(--sk-heading) !important;
}

/* select ở thanh trên cùng (ngôn ngữ / tiền tệ): nền trong suốt */
.header-select .nice-select {
    height: auto;
    line-height: 20px;
    padding: 0 18px 0 0;
    background: transparent !important;
    border: none !important;
    font-weight: 500;
}

.header-select .nice-select::after {
    right: 2px;
    border-bottom-color: var(--sk-muted) !important;
    border-right-color: var(--sk-muted) !important;
}

.header-select .nice-select .current {
    color: var(--sk-text) !important;
}

.header-select i {
    color: var(--sk-muted) !important;
}

/* ---------- THANH LỌC (SHOW / SHORT BY) ---------- */
.top-filter {
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 16px;
    margin-bottom: 16px;
    border-radius: 14px;
    background: var(--sk-card);
    border: 1px solid var(--sk-border);
    box-shadow: var(--sk-shadow);
}

.top-filter p,
.filter-show p,
.filter-show span,
.top-filter > span {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--sk-muted) !important;
    margin-right: 8px;
    white-space: nowrap;
}

.filter-show {
    width: auto;
    gap: 8px;
    justify-content: flex-start;
}

.filter-action {
    gap: 6px;
}

.filter-action a i {
    color: var(--sk-muted);
    background: var(--sk-card2);
    border: 1px solid var(--sk-border);
    border-radius: 10px;
}

.filter-action a i:hover {
    color: var(--sk-heading);
    border-color: var(--sk-accent);
}

.filter-action .active i {
    color: #fff;
    background: linear-gradient(135deg, var(--sk-accent), var(--sk-accent2));
    border-color: transparent;
}

/* ---------- Ô TÌM KIẾM Ở SIDEBAR BLOG ---------- */
.blog-widget-form {
    display: flex;
    align-items: center;
    height: 46px;
    border-radius: 12px;
    overflow: hidden;
    background: var(--sk-bg2);
    border: 1px solid var(--sk-border2);
}

.blog-widget-form:focus-within {
    border-color: var(--sk-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--sk-accent) 22%, transparent);
}

.blog-widget-form input {
    flex: 1 1 auto;
    height: 100%;
    padding: 0 14px;
    border: none;
    background: transparent;
    color: var(--sk-heading);
    order: 1;
}

.blog-widget-form button {
    order: 2;
    width: 46px;
    height: 100%;
    flex: 0 0 46px;
    border: none;
    border-radius: 0;
    color: #fff;
    background: linear-gradient(135deg, var(--sk-accent), var(--sk-accent2));
}

/* tiêu đề widget sidebar: gạch chân gradient thay vì đỏ cứng */
.blog-widget h3,
.blog-widget h4,
.blog-widget .blog-widget-title {
    position: relative;
    padding-bottom: 10px;
    margin-bottom: 14px;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.blog-widget h3::after,
.blog-widget h4::after,
.blog-widget .blog-widget-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 46px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--sk-accent), var(--sk-accent2));
}

/* ---------- BANNER ĐẦU TRANG CON ---------- */
.single-banner,
.inner-section.single-banner {
    padding: 26px 0;
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--sk-accent) 30%, var(--sk-bg2)), var(--sk-bg2) 60%),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 40px) !important;
}

.single-banner::before {
    background: none !important;
}

.single-banner h2 {
    font-size: 22px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ---------- PHÂN TRANG / DÒNG KẾT QUẢ ---------- */
.bottom-paginate {
    margin-top: 14px;
    padding: 12px 16px;
    border-top: none;
    border-radius: 12px;
    background: var(--sk-card);
    border: 1px solid var(--sk-border);
}

.page-info {
    font-size: 13px;
}

/* ---------- CÁC HỘP CÒN LẠI DÙNG NỀN TRẮNG CỨNG ---------- */
.blog-widget,
.blog-card,
.faq-card,
.contact-card,
.policy-card {
    background: var(--sk-card) !important;
}

/* =========================================================================
   V5 - SỬA LỖI HIỂN THỊ ĐIỀU KHIỂN
   1. select: mũi tên SVG bị lặp vì thiếu no-repeat  2. nút tìm kiếm bị đẩy sang trái
   3. dải banner rỗng vẫn chiếm chỗ                  4. nhãn bộ lọc
   ========================================================================= */

/* ---- 1. SELECT: một mũi tên duy nhất, canh phải ---- */
select,
.form-select,
.filter-select,
select.form-control {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    height: 40px;
    padding: 0 36px 0 14px !important;
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--sk-heading) !important;
    background-color: var(--sk-card) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2394a0b5' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 13px center !important;
    background-size: 12px 12px !important;
    border: 1px solid var(--sk-border2) !important;
    cursor: pointer;
}

select:hover,
.form-select:hover,
.filter-select:hover {
    border-color: var(--sk-accent) !important;
}

select:focus,
.form-select:focus,
.filter-select:focus {
    border-color: var(--sk-accent) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--sk-accent) 22%, transparent) !important;
    outline: none;
}

select option,
.form-select option {
    background: #151c2e;
    color: var(--sk-text);
    padding: 8px;
}

/* textarea và input date giữ nguyên chiều cao tự nhiên */
textarea.form-control {
    height: auto;
    background-image: none !important;
    padding: 12px 14px !important;
}

/* ---- 2. NÚT TÌM KIẾM TRONG Ô SEARCH: về bên phải, trong khung ---- */
.blog-widget-form {
    position: relative;
    padding: 0;
}

.blog-widget-form button {
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    order: 2;
    flex: 0 0 48px;
    width: 48px;
    height: 100%;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.blog-widget-form input[type="text"] {
    order: 1;
    flex: 1 1 auto;
    width: auto;
    height: 100%;
    padding: 0 14px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* ---- 3. BANNER TRANG CON RỖNG: ẩn hẳn ---- */
.single-banner:not(:has(h2:not(:empty))) {
    display: none !important;
}

.single-banner {
    background-image: none !important;
}

.single-banner:has(h2:not(:empty)) {
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--sk-accent) 32%, var(--sk-bg2)), var(--sk-bg2) 65%),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 40px) !important;
    border-bottom: 1px solid var(--sk-border);
}

/* ---- 4. NHÃN BỘ LỌC ---- */
.filter-label,
.top-filter label {
    font-size: 11.5px !important;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--sk-muted) !important;
    margin: 0 8px 0 0;
    white-space: nowrap;
}

.filter-show,
.filter-action {
    display: flex;
    align-items: center;
    gap: 0;
    width: auto;
}

.top-filter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

/* ---- 5. Ô TÌM KIẾM Ở HEADER: nút nằm gọn bên phải ---- */
.header-form button {
    flex: 0 0 auto;
    padding: 0 16px;
}

/* ---- 6. Ô NHẬP NGÀY / INPUT GROUP ---- */
.input-group > .form-control,
.input-group > .form-select {
    border-radius: 10px 0 0 10px !important;
}

.input-group > .btn:last-child,
.input-group > .input-group-text:last-child {
    border-radius: 0 10px 10px 0 !important;
}

/* =========================================================================
   V6 - SỬA BẢNG: chính thẻ thead/tfoot có nền trắng cứng trong theme gốc
   ========================================================================= */

thead,
tfoot,
.table > thead,
.table > tfoot,
.table thead,
.table tfoot {
    background: var(--sk-card2) !important;
    color: var(--sk-heading) !important;
}

.table > thead th,
.table > thead tr,
.table thead th,
.table thead tr {
    background: transparent !important;
    color: var(--sk-heading) !important;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border-color: var(--sk-border) !important;
    padding: 12px 14px;
    white-space: nowrap;
}

.table > tfoot td,
.table > tfoot th,
.table tfoot td,
.table tfoot th {
    background: transparent !important;
    color: var(--sk-text) !important;
    border-color: var(--sk-border) !important;
}

.table tbody,
.table > tbody {
    background: transparent !important;
}

.table tbody tr {
    background: transparent !important;
}

.table tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.02) !important;
}

.table tbody tr:hover {
    background: color-mix(in srgb, var(--sk-accent) 10%, transparent) !important;
}

.table tbody td,
.table tbody th {
    background: transparent !important;
    color: var(--sk-text) !important;
    border-color: var(--sk-border) !important;
    padding: 12px 14px;
    vertical-align: middle;
}

/* khung bảng bo góc */
.table-scroll,
.table-wrapper {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--sk-border);
    background: var(--sk-card) !important;
}

.table {
    margin-bottom: 0 !important;
    border-color: var(--sk-border) !important;
}

/* ô trống "không có dữ liệu" */
.table tbody tr td[colspan] {
    text-align: center;
    color: var(--sk-muted) !important;
    padding: 26px 14px;
}

/* checkbox trong bảng */
.table .form-check-input {
    background-color: var(--sk-bg2);
    border-color: var(--sk-border2);
}

.table .form-check-input:checked {
    background-color: var(--sk-accent);
    border-color: var(--sk-accent);
}

/* nút nhỏ trong bảng */
.table .btn-sm,
.table .btn {
    border-radius: 8px;
    font-size: 12px;
    padding: 6px 12px;
}

/* =========================================================================
   V7 - MÀU PHONG PHÚ + THANH CHUYÊN MỤC DÀI + TÊN SẢN PHẨM TO HƠN
   ========================================================================= */

:root {
    /* bảng màu phụ dùng cho các vai trò khác nhau, không chỉ 1 màu chính */
    --sk-cyan: #22d3ee;
    --sk-violet: #a855f7;
    --sk-green: #34d399;
    --sk-amber: #fbbf24;
    --sk-pink: #f472b6;
    --sk-blue: #60a5fa;
}

/* ---------- THANH CHUYÊN MỤC: KÉO DÀI HẾT HÀNG ---------- */
.home-heading h3:not(.no-bg) {
    display: flex !important;
    width: 100%;
    align-items: center;
    gap: 12px;
    border-radius: 12px 0 0 12px;
    clip-path: polygon(0 0, 100% 0, calc(100% - 22px) 100%, 0 100%);
    position: relative;
    overflow: hidden;
}

/* vệt sáng chéo chạy trên thanh */
.home-heading h3:not(.no-bg)::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 90px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
    transform: skewX(-20deg);
    animation: sk-headshine 4.5s ease-in-out infinite;
}

@keyframes sk-headshine {
    0%, 60% { transform: translateX(-140px) skewX(-20deg); }
    100% { transform: translateX(1400px) skewX(-20deg); }
}

/* mỗi chuyên mục một tông màu khác nhau cho đỡ đơn điệu */
#products-container .row > div:nth-of-type(6n+1) .home-heading h3:not(.no-bg) {
    background: linear-gradient(90deg, var(--sk-accent), var(--sk-accent2)) !important;
}

#products-container .row > div:nth-of-type(6n+2) .home-heading h3:not(.no-bg) {
    background: linear-gradient(90deg, var(--sk-violet), var(--sk-pink)) !important;
}

#products-container .row > div:nth-of-type(6n+3) .home-heading h3:not(.no-bg) {
    background: linear-gradient(90deg, var(--sk-blue), var(--sk-cyan)) !important;
}

#products-container .row > div:nth-of-type(6n+4) .home-heading h3:not(.no-bg) {
    background: linear-gradient(90deg, var(--sk-green), var(--sk-cyan)) !important;
}

#products-container .row > div:nth-of-type(6n+5) .home-heading h3:not(.no-bg) {
    background: linear-gradient(90deg, var(--sk-amber), var(--sk-accent2)) !important;
}

#products-container .row > div:nth-of-type(6n+6) .home-heading h3:not(.no-bg) {
    background: linear-gradient(90deg, var(--sk-pink), var(--sk-violet)) !important;
}

.home-heading h3 img {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    position: relative;
    z-index: 1;
}

/* ---------- NHÃN: MỖI LOẠI MỘT MÀU ---------- */
#products-container .label-text.feat,
.label-text.feat {
    background: rgba(34, 211, 238, 0.14);
    color: #a5f3fc;
    border-color: rgba(34, 211, 238, 0.45);
}

#products-container .label-text.order,
.label-text.order {
    background: rgba(168, 85, 247, 0.16);
    color: #ddd0fe;
    border-color: rgba(168, 85, 247, 0.45);
}

.label-text.off {
    background: rgba(251, 191, 36, 0.16);
    color: #fde68a;
    border-color: rgba(251, 191, 36, 0.5);
}

/* ---------- GIÁ: HUY HIỆU VÀNG CAM NỔI TRÊN NỀN TỐI ---------- */
#products-container .feature-price span,
.price-box4 strong,
.feature-price span {
    background: linear-gradient(135deg, var(--sk-amber), var(--sk-accent)) !important;
    box-shadow: 0 6px 20px rgba(251, 191, 36, 0.28);
}

.details-price span {
    color: var(--sk-amber);
}

/* ---------- CARD: VIỀN TRÁI ĐỔI MÀU THEO NHÓM ---------- */
#products-container .feature-card {
    border-left: 3px solid color-mix(in srgb, var(--sk-accent) 60%, transparent);
}

#products-container .row > div:nth-of-type(6n+2) .feature-card { border-left-color: color-mix(in srgb, var(--sk-violet) 70%, transparent); }
#products-container .row > div:nth-of-type(6n+3) .feature-card { border-left-color: color-mix(in srgb, var(--sk-cyan) 70%, transparent); }
#products-container .row > div:nth-of-type(6n+4) .feature-card { border-left-color: color-mix(in srgb, var(--sk-green) 70%, transparent); }
#products-container .row > div:nth-of-type(6n+5) .feature-card { border-left-color: color-mix(in srgb, var(--sk-amber) 70%, transparent); }
#products-container .row > div:nth-of-type(6n+6) .feature-card { border-left-color: color-mix(in srgb, var(--sk-pink) 70%, transparent); }

/* ---------- CHIP CHUYÊN MỤC: ACTIVE NHIỀU MÀU ---------- */
.btn-category-home.active {
    background: linear-gradient(135deg, var(--sk-accent), var(--sk-violet)) !important;
}

/* ---------- Ô CÔNG CỤ & VÍ: ĐIỂM MÀU KHÁC NHAU ---------- */
.wallet-card:nth-of-type(1) { border-left: 3px solid var(--sk-cyan); }
.wallet-card:nth-of-type(2) { border-left: 3px solid var(--sk-violet); }
.wallet-card:nth-of-type(3) { border-left: 3px solid var(--sk-amber); }

/* ---------- MÔ TẢ: MŨI TÊN THEO MÀU XANH ---------- */
#products-container .feature-desc i,
.feature-desc i {
    color: var(--sk-cyan);
}

/* ---------- GIAO DỊCH GẦN ĐÂY: 2 TÔNG KHÁC NHAU ---------- */
.row > .col-lg-6:nth-of-type(1) .home-heading h3:not(.no-bg) {
    background: linear-gradient(90deg, var(--sk-green), var(--sk-cyan)) !important;
}

.row > .col-lg-6:nth-of-type(2) .home-heading h3:not(.no-bg) {
    background: linear-gradient(90deg, var(--sk-blue), var(--sk-violet)) !important;
}

.row > .col-lg-6:nth-of-type(1) .home-heading + div .feature-card {
    border-left-color: var(--sk-green);
}

.row > .col-lg-6:nth-of-type(2) .home-heading + div .feature-card {
    border-left-color: var(--sk-blue);
}

/* ---------- SỐ DƯ: GRADIENT 3 MÀU ---------- */
.my-wallet h3 {
    background: linear-gradient(90deg, #fff, var(--sk-amber) 55%, var(--sk-accent));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ---------- NÚT MUA: GIỮ MÀU CHÍNH, VIỀN SÁNG ---------- */
#products-container .btn-buy {
    background: linear-gradient(135deg, var(--sk-accent), var(--sk-accent2)) !important;
}

#products-container .btn-more {
    border-color: color-mix(in srgb, var(--sk-cyan) 35%, var(--sk-border2));
}

#products-container .btn-more:hover {
    border-color: var(--sk-cyan);
    background: color-mix(in srgb, var(--sk-cyan) 14%, var(--sk-card3));
}