/* ===== BIẾN MÀU CHỮ ===== */
:root {
    --text-h: 0;
    --text-s: 0%;
    --text-l: 100%;
    --base-h: 0;
    --base-s: 0%;
    --base-l: 100%;
    --base: 0 0% 100%;
    
    /* Màu contrast tự động */
    --contrast-h: 0;
    --contrast-s: 0%;
    --contrast-l: 0%;
    
    /* Màu đen cho nền sáng */
    --dark-text-h: 0;
    --dark-text-s: 0%;
    --dark-text-l: 0%;
    
    --black: 0 0% 0%;
    --border: 45 100% 50%;
}

/* ===== MÀU CHỮ TOÀN CỤC - NỀN TỐI ===== */
body,
body *,
p, span, div, label, a,
h1, h2, h3, h4, h5, h6 {
    color: hsl(var(--text-h), var(--text-s), var(--text-l)) !important;
}

/* ===== MÀU CHỮ CHO NỀN SÁNG/TRẮNG ===== */
/* Card có nền trắng */
.product-card .product-info,
.product-card .product-details,
.card-body,
.card-content,
[style*="background: white"],
[style*="background: #fff"],
[style*="background: #ffffff"],
[style*="background-color: white"],
[style*="background-color: #fff"],
[style*="background-color: #ffffff"],
.bg-white,
.bg-light {
    color: #000000 !important;
}

.product-card .product-info *,
.product-card .product-details *,
.card-body *,
.card-content *,
.bg-white *,
.bg-light * {
    color: #000000 !important;
}

/* Ticket/Support có nền trắng */
.ticket,
.ticket *,
.support-ticket,
.support-ticket *,
.ticket-item,
.ticket-item *,
.ticket-card,
.ticket-card * {
    color: #000000 !important;
}

/* Form trắng */
.form-white,
.form-white *,
.form-light,
.form-light * {
    color: #000000 !important;
}

/* Modal/Popup trắng */
.modal-content,
.modal-content *,
.modal-body,
.modal-body *,
.popup-white,
.popup-white * {
    color: #000000 !important;
}

/* Table trắng */
.table-white,
.table-white *,
.table-light,
.table-light * {
    color: #000000 !important;
}

/* Alert/Notice trắng */
.alert-light,
.alert-light *,
.notice-white,
.notice-white * {
    color: #000000 !important;
}

/* ===== OVERRIDE CHO CÁC PHẦN TỬ NỀN SÁNG CỤ THỂ ===== */
/* Nếu có class hoặc style background sáng */
[class*="white"] *,
[class*="light"] *,
[class*="bg-white"] *,
[class*="bg-light"] * {
    color: #000000 !important;
}

/* ===== ĐẶC BIỆT: TÊN SẢN PHẨM & GIÁ TRÊN NỀN TRẮNG ===== */
.product-card .product-info .product-title,
.product-card .product-details .product-title {
    color: #000000 !important;
    background: transparent !important;
}

.product-card .product-info .product-price,
.product-card .product-details .product-price {
    color: #000000 !important;
    background: transparent !important;
}

/* Button trên nền trắng - giữ màu button gốc */
.bg-white .btn,
.bg-light .btn,
.product-card .product-info .btn,
.product-card .product-details .btn {
    color: #FFFFFF !important;
}

/* ===== MÀU CHỮ NAVIGATION - NỀN TỐI ===== */
.nav,
.nav *,
.navigation,
.navigation *,
.menu,
.menu * {
    color: hsl(var(--text-h), var(--text-s), var(--text-l)) !important;
}

/* ===== MÀU CHỮ HEADER - NỀN TỐI ===== */
.header,
.header *,
.logo,
.logo * {
    color: hsl(var(--text-h), var(--text-s), var(--text-l)) !important;
}

/* ===== MÀU CHỮ INPUT/FORM - NỀN TỐI ===== */
.input,
.input *,
input,
textarea,
select,
option {
    color: hsl(var(--text-h), var(--text-s), var(--text-l)) !important;
}

input::placeholder,
textarea::placeholder {
    color: hsla(var(--text-h), var(--text-s), var(--text-l), 0.6) !important;
}

/* Input trên nền sáng */
.bg-white input,
.bg-white textarea,
.bg-white select,
.bg-light input,
.bg-light textarea,
.bg-light select {
    color: #000000 !important;
}

/* ===== MÀU CHỮ ADDRESS/CHECKOUT - KIỂM TRA NỀN ===== */
.address-wrapper,
.address-wrapper *,
.address-item-label,
.address-item-value,
.delivery-type,
.delivery-type *,
.delivery-type-content,
.delivery-type-content *,
.payment-option-item,
.payment-option-item * {
    color: hsl(var(--text-h), var(--text-s), var(--text-l)) !important;
}

/* Nếu address có nền sáng */
.address-wrapper.bg-white,
.address-wrapper.bg-white *,
.delivery-type.bg-white,
.delivery-type.bg-white *,
.payment-option-item.bg-white,
.payment-option-item.bg-white * {
    color: #000000 !important;
}

/* ===== MÀU CHỮ BADGE - NỀN TỐI ===== */
.badge,
.badge *,
.tag,
.tag * {
    color: hsl(var(--text-h), var(--text-s), var(--text-l)) !important;
}

/* ===== MÀU CHỮ FOOTER - NỀN TỐI ===== */
.footer,
.footer * {
    color: hsl(var(--text-h), var(--text-s), var(--text-l)) !important;
}

/* ===== ĐẢM BẢO TEXT SHADOW DỄ ĐỌC ===== */
/* Text shadow cho nền tối */
body *:not(.bg-white *):not(.bg-light *),
.section *:not(.bg-white *):not(.bg-light *),
.btn * {
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.8) !important;
}

/* Text shadow cho nền sáng - đổi sang shadow sáng */
.bg-white *,
.bg-light *,
.product-card .product-info *,
.product-card .product-details *,
.ticket *,
.support-ticket * {
    text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.5) !important;
}

/* Tiêu đề trên nền tối */
h1:not(.bg-white *):not(.bg-light *), 
h2:not(.bg-white *):not(.bg-light *), 
h3:not(.bg-white *):not(.bg-light *), 
h4:not(.bg-white *):not(.bg-light *), 
h5:not(.bg-white *):not(.bg-light *), 
h6:not(.bg-white *):not(.bg-light *),
.section-title:not(.bg-white *):not(.bg-light *) {
    text-shadow: 3px 3px 8px rgba(0, 0, 0, 1) !important;
}

/* Tiêu đề trên nền sáng */
.bg-white h1,
.bg-white h2,
.bg-white h3,
.bg-white h4,
.bg-white h5,
.bg-white h6,
.bg-light h1,
.bg-light h2,
.bg-light h3,
.bg-light h4,
.bg-light h5,
.bg-light h6 {
    text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.5) !important;
}

/* ===== UTILITIES ===== */
.text-white {
    color: hsl(0, 0%, 100%) !important;
}

.text-black {
    color: hsl(0, 0%, 0%) !important;
}

.text-auto {
    color: hsl(var(--contrast-h), var(--contrast-s), var(--contrast-l)) !important;
}