/* =========================================================
   DARK MODE THEME — ugcheap.store
   Cơ chế: theme dùng biến CSS (--white, --chalk, --body, --text,
   --heading, --border...) ở hầu hết mọi nơi, nên chỉ cần override
   lại giá trị các biến này là gần như toàn bộ site tự đổi màu.
   ========================================================= */

html[data-theme="dark"] {
    --white: #1b2338;
    --chalk: #26304a;
    --body: #0f1320;
    --text: #aab2c9;
    --heading: #eef1f8;
    --sub-heading: #c3c9dc;
    --border: rgba(255, 255, 255, 0.08);
    --gray: #8b93ac;
}

html[data-theme="dark"] body {
    background: var(--body);
}

/* Mượt khi chuyển theme */
body,
.header-top,
.header-part,
.header-form,
.header-widget i,
.navbar-part,
.navbar-link,
.megamenu,
.nav-sidebar,
.cart-sidebar,
.category-sidebar,
.mobile-menu,
.card-hot-deal,
.card-price-product-list,
#top-menu li a,
a, input, select, textarea {
    transition: background-color .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease !important;
}

/* Vài chỗ hardcode màu trắng chứ không dùng biến, sửa riêng cho dark */
html[data-theme="dark"] .card-hot-deal,
html[data-theme="dark"] .card-price-product-list {
    background: var(--white);
}
html[data-theme="dark"] #top-menu li a {
    background: var(--chalk);
    color: var(--heading);
}

/* Bóng đổ dịu lại trong dark mode cho đỡ chói */
html[data-theme="dark"] .header-part.active,
html[data-theme="dark"] .nav-sidebar,
html[data-theme="dark"] .cart-sidebar,
html[data-theme="dark"] .category-sidebar,
html[data-theme="dark"] .mobile-menu {
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5) !important;
}

/* Scrollbar dark cho đẹp đồng bộ */
html[data-theme="dark"] ::-webkit-scrollbar-track { background: #0f1320; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #333f5c; border-radius: 10px; }

/* =========================================================
   NÚT CHUYỂN SÁNG / TỐI — nút tròn đơn (không phải công tắc)
   Bấm 1 phát: icon mặt trời mờ+xoay đi, mặt trăng mờ+xoay vào
   ========================================================= */
.theme-icon-btn {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    padding: 0;
    cursor: pointer;
    background: var(--chalk, #f5f5f5);
    flex: none;
    transition: background-color .3s ease, box-shadow .3s ease;
}
.theme-icon-btn .icon-sun,
.theme-icon-btn .icon-moon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity .45s ease, transform .5s cubic-bezier(.4,0,.2,1);
}
.theme-icon-btn .icon-sun {
    color: #ff9d1f;
    opacity: 1;
    transform: rotate(0deg) scale(1);
}
.theme-icon-btn .icon-moon {
    color: #8b93c9;
    opacity: 0;
    transform: rotate(-70deg) scale(.4);
}
html[data-theme="dark"] .theme-icon-btn .icon-sun {
    opacity: 0;
    transform: rotate(70deg) scale(.4);
}
html[data-theme="dark"] .theme-icon-btn .icon-moon {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}
.theme-icon-btn:hover { box-shadow: 0 0 0 5px rgba(255, 157, 31, .15); }
html[data-theme="dark"] .theme-icon-btn:hover { box-shadow: 0 0 0 5px rgba(139, 147, 201, .18); }
.theme-icon-btn:active { transform: scale(.92); }

/* Nhóm icon bên phải header mobile (search + toggle đứng cạnh nhau) */
.header-media-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}