:root {
    --primary-700: #2859a4;
    --primary-600: #336ac1;
    --primary-500: #3b82f6;
    --primary-400: #60a5fa;
    --surface: #ffffff;
    --surface-muted: #f6f9ff;
    --border: #e2e8f0;
    --text: #262626;
    --text-muted: #6b7280;
    --shadow-sm: 0 1px 3px rgba(2, 8, 23, 0.08);
    --shadow-md: 0 6px 16px rgba(2, 8, 23, 0.1);
}
/* ------------------------ LINK / LINK-LIKE ---------------------------- */
/* Link, .btn-link: màu chữ link chung */
a,
.btn-link {
  color: #0071c1; /* Màu link chính (navbar, nội dung, footer) */
}

/* ----------------------------- BUTTONS -------------------------------- */
/* Nút chính (Primary) */
.btn-primary {
    background-color: linear-gradient(135deg, var(--primary-600), var(--primary-700)) !important; /* Màu nền nút chính (Submit/Lưu) */
    border: none !important; /* Bỏ viền mặc định */
    color: #ffffff !important; /* Màu chữ nút chính */
    font-size: 16px !important; /* Kích thước chữ nút chính */
    font-weight: 600 !important; /* Đậm chữ nút chính */
}

    .btn-primary:hover {
        background: linear-gradient(135deg, var(--primary-700), var(--primary-600));
        transform: translateY(-1px);
    }

.warehouse-theme .btn-second {
    background: #007bff;
    border: none;
    color: #fff;
    box-shadow: var(--shadow-sm);
    padding: 0.4rem 0.8rem;
    font-size: 0.875rem;
    border-radius: 5px;
}
/* Nút phụ (Secondary – do dự án dùng class .btn-second cho nút phụ) */
.btn-second {
    background-color: #007bff !important; /* Màu nền nút phụ (Hủy/Phụ) */
    border: none !important;
    color: #ffffff !important; /* Màu chữ nút phụ */
    font-size: 16px !important; /* Kích thước chữ nút chính */
    font-weight: 600 !important;
}

/* Nút Secondary mặc định (nếu sử dụng) – chủ yếu bỏ viền */
.btn-secondary {
  border: none !important; /* Ẩn viền nút secondary */
}

.text-form .register-text {
  color: #2859a4 !important; /* Màu chữ thành công (nút, thông báo) */
}
/* ------------------------------ ACCENT -------------------------------- */
/* Màu nhấn (accent) dùng cho hiệu ứng hover/click, border của nút tròn, v.v. */
.btn-circle {
  border-color: #20c997; /* Viền nút tròn accent (VD: action nhanh) */
  color: #20c997; /* Màu icon/chữ nút tròn */
}
.btn-circle:hover {
  background-color: #20c997; /* Nền khi hover nút tròn */
  color: #ffffff !important; /* Chữ/icon khi hover nút tròn */
}

/* Các nút tăng/giảm số lượng (trong POS) khi hover */
.button-minus:hover,
.button-plus:hover {
  background-color: #20c997; /* Nền khi hover +/- */
  color: #ffffff !important; /* Chữ/icon khi hover +/- */
}

/* Hiệu ứng click chung cho các phần tử có .click-effect */
.click-effect:active {
  background-color: rgba(32, 201, 151, 0.2) !important; /* Nền khi click */
}

/* Hiệu ứng hover chung cho các phần tử có .hover-effect và nhóm tương tự */
.hover-effect:hover,
.btn-hover:hover,
.card-hover:hover,
.product-card-hover:hover,
.small-box-hover:hover,
.nav-link-hover:hover {
  background-color: rgba(32, 201, 151, 0.1) !important; /* Nền khi hover */
}

/* ------------------------- PRODUCT/VISUALS ---------------------------- */
/* Giá sản phẩm hiển thị trong thẻ product */
.product-card-price {
  color: #e53935; /* Màu giá bán nổi bật */
}

/* ---------------------------- SUMMARY --------------------------------- */
/* Summary box: màu nhấn cho tổng tiền, nhãn phụ */
.summary-box .total {
  color: #20c997; /* Màu tổng tiền */
}
.summary-box .tax-label {
  color: #20c997; /* Màu nhãn thuế/phí */
}

/* ----------------------------- OLIVE ---------------------------------- */
/* Nhóm tone olive dùng cho trạng thái active/nhấn (nếu dùng trong màn hình) */
.text-olive-active {
  color: #2ecc71 !important; /* Text trạng thái active */
}

.bg-olive-2 {
  background-color: #0d503c !important; /* Nền nhấn olive đậm */
}
.bg-olive-active {
  background-color: #dee8f7 !important; /* Nền khối active olive nhạt */
  border-left: 2px solid #2859a4 !important;
}

/* -------------------------- MISCELLANEOUS ----------------------------- */
/* Navbar mobile: giữ nguyên cấu trúc app.css, chỉ chỉnh khi cần màu nền/viền */
/* .navbar-expand { background-color: ...; border-bottom: ...; } */

/* DataTables nút export bị ẩn theo mặc định – không đổi màu ở đây */
/* .dt-buttons { display: none !important; } */

/* Thương hiệu/logo – chỉ chỉnh kích thước/khung viền ở app.css */
/* .brand-link .brand-image { ... } */

/* ----------------------------- CAMPAIGNS ---------------------------------- */
/* Nút màu xanh thương hiệu (sử dụng cho các nút làm mới, xem...) */
.btn-brand-primary {
  background-color: #007bff !important; /* Nền nút xanh thương hiệu */
  border-color: #007bff !important; /* Viền nút xanh thương hiệu */
  color: #ffffff !important; /* Chữ nút */
}

.table-scroll-wrapper {
  max-height: 60vh;
  overflow-y: auto;
}

  .table-scroll-wrapper table {
    margin-bottom: 0;
  }

/* Nút accent xanh ngọc (Copy, hành động phụ nổi bật) */
.btn-accent {
  background-color: #20c997 !important; /* Nền nút accent */
  border-color: #20c997 !important; /* Viền nút accent */
  color: #ffffff !important; /* Chữ nút accent */
}

/* Modal backdrop (overlay mờ phía sau modal) */
.modal-backdrop-inset {
  background-color: rgba(0, 0, 0, 0.5) !important; /* Nền overlay modal */
}

/* Card header trong voucher grid: trong suốt, bỏ viền, padding tùy chỉnh */
.card-header-transparent {
  background-color: transparent !important; /* Nền trong suốt header */
  border-bottom: none !important; /* Ẩn viền dưới header */
  padding: 12px 20px !important; /* Khoảng cách trong header */
}

/* Chỉ đặt màu nền header trong suốt (dùng khi cần giữ nguyên padding/viền inline) */
.card-header-bg-transparent {
  background-color: transparent !important; /* Nền trong suốt header */
}

/* Voucher image styles (di chuyển từ internal style trong Voucher.razor) */
.voucher-image-container {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto;
  border: 1px solid #ddd; /* Viền khung ảnh voucher */
}

.voucher-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ----------------------------- CATEGORIES ---------------------------------- */
/* Nút cảnh báo/xóa (đỏ) rõ ràng */
.btn-danger-solid {
  background-color: #dc3545 !important; /* Nền nút đỏ (xóa, cảnh báo) */
  border-color: #dc3545 !important; /* Viền nút đỏ */
  color: #ffffff !important; /* Chữ nút đỏ */
}

/* Card footer nền trắng */
.card-footer-white {
  background-color: #ffffff !important; /* Nền trắng footer thẻ */
}

/* ---------------- FINANCIALS: DEBT CREDITOR REPAYMENT (COLOR ONLY) --------------- */
.debt-repayment-modal .debt-total-amount {
  color: #007bff !important; /* Màu số tổng nợ (xanh dương) */
}

/* ----------------------------- SALES: ATTRIBUTE ORDERS ---------------------- */
.attribute-orders-page .attribute-orders-row-highlight {
  background-color: #e3f2fd !important; /* Nền hàng thêm mới (nhấn nhạt xanh) */
}
.attribute-orders-page .btn-light-custom {
  background-color: #f0fff8 !important; /* Nền badge nhẹ */
  color: #05805f !important; /* Chữ badge */
}
.attribute-orders-page .delete-x {
  color: #05805f !important; /* Màu icon X mặc định */
}
.attribute-orders-page .delete-x:hover {
  color: #dc3545 !important; /* Màu icon X khi hover (đỏ) */
}

/* ---------------- SALES: ORDER CREATE F&B (COLOR ONLY) ------------------------ */
.order-create-fnb .attribute-label-chip {
  background-color: #39cccc !important; /* Nền label thuộc tính */
  color: #ffffff !important; /* Chữ label thuộc tính */
}
.order-create-fnb .attribute-field-highlight {
  background-color: #39cccc !important; /* Nền field kiểu Date đã nhấn */
  color: #ffffff !important; /* Chữ field */
}
.order-create-fnb .btn-attr-highlight {
  background-color: #39cccc !important; /* Nền nút thông tin KH */
}
.order-create-fnb .order-tab-link {
  color: #2859a4 !important; /* Màu text tabs trên */
}
.order-create-fnb .order-products-head {
  background-color: #dee8f7 !important; /* Nền header bảng sản phẩm */
}
.order-create-fnb .order-summary-bg {
  background-color: #dee8f7 !important; /* Nền khối tổng kết */
}
.order-create-fnb .area-name-emphasis {
  color: #eab10a !important; /* Màu tên khu vực */
}
.order-create-fnb .order-status-paid {
  color: #39cccc !important; /* Màu trạng thái Đã thanh toán */
}
.order-create-fnb .order-status-printed {
  color: #dc3545 !important; /* Màu trạng thái Đã in tạm tính */
}
.order-create-fnb .order-status-serving {
  color: #28a745 !important; /* Màu trạng thái Đang phục vụ */
}
.order-create-fnb .order-status-new {
  color: #007bff !important; /* Màu trạng thái Đơn mới nhận */
}
.order-create-fnb .order-total-text,
.order-create-fnb .order-total-value {
  color: #0d503c !important; /* Màu chữ tổng cộng */
}
.order-create-fnb .btn-print-processing {
  background-color: #5271ff !important; /* Màu nút In chế biến */
}

/* ---------------- SALES: ORDER CREATE RETAIL (COLOR ONLY) -------------------- */
.order-create-retail .retail-tab-active {
  border-bottom: 2px solid #20c997 !important; /* Gạch chân tab active */
}
.order-create-retail .retail-status-returned {
  color: #fd7e14 !important; /* Trạng thái Đã trả hàng */
}
.order-create-retail .retail-status-received {
  color: #39cccc !important; /* Trạng thái Đã nhận hàng */
}
.order-create-retail .retail-status-sent {
  color: #dc3545 !important; /* Trạng thái Đã gửi (tạm tính) */
}
.order-create-retail .retail-status-rejected {
  color: #fd7e14 !important; /* Trạng thái Bị từ chối */
}
.order-create-retail .retail-status-new {
  color: #007bff !important; /* Trạng thái Đơn mới nhận */
}
.order-create-retail .retail-barcode-label {
  color: #000000 !important; /* Nhãn Barcode/mã sản phẩm (màu chữ) */
}
.order-create-retail .retail-barcode-input {
  color: #000000 !important; /* Ô nhập Barcode/mã sản phẩm (màu chữ) */
}

/* ---------------- SALES: AREAS AND TABLES (COLOR ONLY) ----------------------- */
.areas-and-tables .table-area-name {
  color: #000 !important; /* Tên khu vực (text phụ) */
}
.areas-and-tables .table-meta-icon {
  color: #000 !important; /* Icon meta (màu xám) */
}
.areas-and-tables .table-meta-text {
  color: #000 !important; /* Dòng thông tin phụ (giờ vào, ngày) */
}
.areas-and-tables .areas-status-printed {
  color: #dc3545 !important; /* Trạng thái Đã in tạm tính (đỏ) */
}
.areas-and-tables .areas-status-serving {
  color: #28a745 !important; /* Trạng thái Đang phục vụ (xanh) */
}
.areas-and-tables .areas-amount-text {
  color: #198754 !important; /* Tổng tiền khu vực/bàn (xanh đậm) */
}

/* Màu thẻ bàn theo trạng thái (AreasAndTables) */
.areas-and-tables .areas-card-selected {
  background-color: #fde6b9 !important; /* Bàn đang chọn (vàng nhạt) */
}
.areas-and-tables .areas-card-printed {
  background-color: #ffedf3 !important; /* Bàn đã in tạm tính (hồng nhạt) */
}
.areas-and-tables .areas-card-serving {
  background-color: #dae5f6 !important; /* Bàn đang phục vụ (xanh ngọc nhạt) */
}

/* Nút chọn tất cả khu vực (AreasAndTables) */
.areas-and-tables .areas-selectall-bg {
  background-color: #f7a406 !important; /* Nền nút "Tất cả khu vực" */
}

.areas-and-tables .areas-no-selectall-bg {
  background-color: #2859a4 !important; /* Nền nút "Không phải chọn tất cả khu vực" */
}

/* --------------- SALES: CATEGORIES AND PRODUCTS (COLOR ONLY) ----------------- */
.categories-and-products .categories-filter-header {
  background-color: #5271ff !important; /* Nền tiêu đề lọc thuộc tính */
  color: #ffffff !important; /* Chữ tiêu đề lọc thuộc tính */
}
.categories-and-products .categories-filter-header i {
  color: #ffffff !important;
}

/* ---------------- SALES: ORDER LIST (COLOR ONLY) ---------------------------- */
.order-list .badge-status-new {
  background-color: #007bff !important;
  color: #ffffff !important; /* Badge Đơn mới nhận */
}
.order-list .badge-status-confirm {
  background-color: #28a745 !important;
  color: #ffffff !important; /* Badge Đang phục vụ */
}
.order-list .badge-status-send {
  background-color: #ffedf3 !important;
  color: #dc3545 !important; /* Badge Đã in tạm tính */
}
.order-list .badge-status-receive {
  background-color: #39cccc !important;
  color: #ffffff !important; /* Badge Đã thanh toán */
}
.order-list .badge-status-return {
  background-color: #6c757d !important;
  color: #ffffff !important; /* Badge Khách trả */
}
.order-list .order-list-meta-text {
  color: #555 !important; /* Chữ mô tả phụ (thời gian/khu vực) */
}

/* ---------------- SALES: ORDER LIST RETAIL (COLOR ONLY) --------------------- */
.order-list-retail .retail-paid-indicator {
  color: #28a745 !important; /* Nhãn "Đã thanh toán" */
}
.order-list-retail .retail-badge-new {
  background-color: #007bff !important;
  color: #ffffff !important; /* Badge Mới tạo */
}
.order-list-retail .retail-badge-send {
  background-color: #28a745 !important;
  color: #ffffff !important; /* Badge Đã gửi */
}
.order-list-retail .retail-badge-reject {
  background-color: #dc3545 !important;
  color: #ffffff !important; /* Badge Bị từ chối */
}
.order-list-retail .retail-badge-receive {
  background-color: #39cccc !important;
  color: #ffffff !important; /* Badge Đã nhận */
}
.order-list-retail .retail-badge-return {
  background-color: #6c757d !important;
  color: #ffffff !important; /* Badge Đã trả hàng */
}
.order-list-retail .retail-list-meta-text {
  color: #555 !important; /* Chữ mô tả phụ (thời gian/khu vực) */
}
.order-list-retail .retail-reject-text {
  color: #dc3545 !important; /* Màu dòng lý do từ chối */
}

/* ---------------- SALES: PAYMENT MODAL (COLOR ONLY) ------------------------- */
.payment-modal {
  background-color: #f8f9fa !important; /* Nền nhạt của body modal thanh toán */
}
.payment-modal .payment-change-amount {
  color: #dc3545 !important; /* Màu tiền thối lại (đỏ) */
}
.payment-modal .payment-quick-sum {
  background-color: #4dd4ac !important;
  border-color: #4dd4ac !important; /* Nút điền nhanh = Tổng phải thu (xanh ngọc) */
}
.payment-modal .payment-money-choice {
  background-color: #a6e9d5 !important; /* Nút chọn mệnh giá (nền xanh ngọc nhạt) */
}
.payment-modal .payment-money-counter {
  background: #e53935 !important;
  color: #ffffff !important; /* Huy hiệu số tờ tiền đã chọn (đỏ) */
}

/* ---------------- SALES: PRODUCT ADD ON (COLOR ONLY) ------------------------ */
.product-addon {
  background-color: #f8f9fa !important; /* Nền modal chỉnh món kèm theo */
}
.product-addon .product-addon-total {
  color: #2859a4 !important; /* Màu tổng tiền (xanh đậm) */
}
/* Chỉ override màu sắc; giữ nguyên layout/spacing từ internal style */
/* ---------------- SCHEDULES: CALENDAR/DATE FILTER (COLOR ONLY) ------------------- */
.schedules-calendar .calendar-header {
  background-color: #f8f9fa !important; /* Nền header lịch */
}
.schedules-calendar .calendar-weekdays {
  background-color: #f8f9fa !important; /* Nền hàng thứ trong tuần */
}
.schedules-calendar .weekday {
  color: #495057 !important; /* Màu chữ thứ trong tuần */
}
.schedules-calendar .time-header {
  background-color: #f8f9fa !important; /* Nền header khung giờ */
}
.schedules-calendar .timezone-label {
  color: #6c757d !important; /* Màu chữ timezone */
}
.schedules-calendar .timezone-header {
  color: #495057 !important; /* Màu chữ cột timezone */
}
.schedules-calendar .time-label-cell {
  background-color: #f8f9fa !important;
  color: #6c757d !important; /* Ô nhãn giờ */
}
.schedules-calendar .grid-cell:hover {
  background-color: #f8f9fa !important; /* Hover ô grid */
}
.schedules-calendar .grid-cell.today {
  background-color: #e3f2fd !important; /* Ô giờ hôm nay */
}
.schedules-calendar .calendar-day:hover {
  background-color: #f8f9fa !important; /* Hover ngày */
}
.schedules-calendar .calendar-day.other-month {
  background-color: #f8f9fa !important;
  color: #6c757d !important; /* Ngày tháng khác */
}
.schedules-calendar .calendar-day.today {
  background-color: #e3f2fd !important;
  border-color: #2196f3 !important; /* Ngày hôm nay */
}
.schedules-calendar .calendar-day.today .day-number {
  background-color: #2196f3 !important;
  color: #ffffff !important; /* Chấm ngày hôm nay */
}
.schedules-calendar .calendar-day.selected {
  background-color: #e3f2fd !important;
  border-color: #2196f3 !important; /* Ngày được chọn */
}
.schedules-calendar .calendar-day.selected .day-number {
  background-color: #2196f3 !important;
  color: #ffffff !important; /* Chấm ngày được chọn */
}
.schedules-calendar .time-event.published {
  background-color: rgba(40, 167, 69, 0.1) !important;
  color: #28a745 !important; /* Event public */
}
.schedules-calendar .time-event.private {
  background-color: rgba(255, 193, 7, 0.1) !important;
  color: #ffc107 !important; /* Event private */
}
.schedules-calendar .time-event.note {
  background-color: rgba(228, 196, 65, 0.2) !important;
  color: #b8860b !important; /* Event ghi chú */
}
.schedules-calendar .time-event.booking {
  background-color: rgba(40, 167, 69, 0.1) !important;
  color: #28a745 !important; /* Event đặt lịch */
}

.schedules-date-filter .selected-date-display {
  background-color: #e3f2fd !important; /* Khung ngày đã chọn */
}
.schedules-date-filter .selected-date-label {
  color: #495057 !important; /* Nhãn ngày chọn */
}
.schedules-date-filter .selected-date-value {
  color: #2196f3 !important; /* Giá trị ngày chọn */
}

/* ---------------- SCHEDULES: MINI CALENDAR (COLOR ONLY) ---------------------- */
.schedules-mini-calendar .mini-day:hover {
  background-color: #f8f9fa !important;
}
.schedules-mini-calendar .mini-day.other-month {
  background-color: #f8f9fa !important;
}
.schedules-mini-calendar .mini-day.today {
  background-color: #e3f2fd !important;
  border-color: #2196f3 !important;
}
.schedules-mini-calendar .mini-day.selected {
  background-color: #2196f3 !important;
  color: #ffffff !important;
}
.schedules-mini-calendar .mini-day.has-events:not(.selected) {
  background-color: #fff3cd !important;
  border-color: #ffc107 !important;
}
.schedules-mini-calendar .mini-event-indicator {
  background-color: #28a745 !important;
}
.schedules-mini-calendar .mini-day.selected .mini-event-indicator {
  background-color: #ffffff !important;
}

/* ---------------- SCHEDULES: SCHEDULE FILTER (COLOR ONLY) -------------------- */
.schedules-filter .filter-title {
  color: #495057 !important;
}
.schedules-filter .filter-header button {
  color: #6c757d !important;
}
.schedules-filter .filter-header button:hover {
  color: #495057 !important;
}
.schedules-filter .filter-label {
  color: #495057 !important;
}
.schedules-filter .filter-option label {
  color: #495057 !important;
}
.schedules-filter .filter-option input[type="checkbox"] {
  accent-color: #6c757d !important;
}
.schedules-filter .filter-option input[type="checkbox"]:checked {
  accent-color: #495057 !important;
}
.schedules-filter
  .filter-option
  input[type="checkbox"][id*="type-note"]:checked {
  accent-color: #b09133 !important;
}
.schedules-filter
  .filter-option
  input[type="checkbox"][id*="type-booking"]:checked {
  accent-color: #0b8043 !important;
}
.schedules-filter
  .filter-option
  input[type="checkbox"][id*="status-open"]:checked {
  accent-color: #28a745 !important;
}
.schedules-filter
  .filter-option
  input[type="checkbox"][id*="status-checkin"]:checked {
  accent-color: #17a2b8 !important;
}
.schedules-filter
  .filter-option
  input[type="checkbox"][id*="status-close"]:checked {
  accent-color: #6c757d !important;
}

/* ---------------- SCHEDULES: SCHEDULE MODAL (COLOR ONLY) --------------------- */
.scrollable.modal-body {
  scrollbar-color: #6c757d #f8f9fa !important;
}
.scrollable.modal-body::-webkit-scrollbar-track {
  background: #f8f9fa !important;
}
.scrollable.modal-body::-webkit-scrollbar-thumb {
  background: #6c757d !important;
}
.scrollable.modal-body::-webkit-scrollbar-thumb:hover {
  background: #495057 !important;
}
.selected-employees-list {
  background-color: #f8f9fa !important;
}

/* ---------------- WAREHOUSE PRODUCT DETAIL POPUP (COLOR OVERRIDES) ---------------- */
.product-detail-container .product-image-card {
  background: linear-gradient(
    135deg,
    #f8f9fa 0%,
    #e9ecef 100%
  ) !important; /* Nền card ảnh */
  border-color: #e9ecef !important; /* Viền card ảnh */
}

.product-detail-container .product-image {
  border-color: #ffffff !important; /* Viền ảnh sản phẩm */
}

.product-detail-container .product-title {
  color: #2c3e50 !important; /* Màu tiêu đề sản phẩm */
}

.product-detail-container .product-basic-info > div {
  border-bottom-color: #eef2f7 !important; /* Gạch phân cách info */
}

.product-detail-container .price-value {
  color: #28a745 !important; /* Giá bán màu xanh */
}

.product-detail-container .inventory-value {
  color: #17a2b8 !important; /* Tồn kho màu info */
}

.product-detail-container .info-section {
  background-color: #ffffff !important; /* Nền khối thông tin */
  border-color: #eef2f7 !important; /* Viền khối thông tin */
}

.product-detail-container .section-title {
  color: #05805f !important; /* Màu tiêu đề section */
  border-bottom-color: #05805f !important; /* Gạch dưới tiêu đề */
}

.product-detail-container .attributes-table .attribute-row:hover {
  background-color: #f8f9fa !important; /* Hover dòng thuộc tính */
}

.product-detail-container .attribute-label-cell {
  background-color: #f8f9fa !important; /* Nền ô nhãn */
  color: #495057 !important; /* Chữ ô nhãn */
  border-right-color: #05805f !important; /* Gạch dọc nhấn */
}

.product-detail-container .attribute-value-cell {
  background-color: #ffffff !important; /* Nền ô giá trị */
  color: #2c3e50 !important; /* Chữ ô giá trị */
}

.product-detail-container .attribute-image-thumb {
  border-color: #dee2e6 !important; /* Viền ảnh thuộc tính */
}

.product-detail-container .color-preview {
  border-color: #ffffff !important; /* Viền ô màu */
}

.product-detail-container .no-attributes-message {
  background-color: #f8f9fa !important; /* Nền thông báo không có thuộc tính */
  border-color: #dee2e6 !important; /* Viền dashed */
}

.product-detail-container .no-attributes-message .text-center {
  color: #6c757d !important; /* Màu chữ mô tả */
}

.product-detail-container .description-content {
  background-color: #f8f9fa !important; /* Nền mô tả */
  border-left-color: #007bff !important; /* Gạch nhấn trái */
  color: #495057 !important; /* Màu chữ mô tả */
}

/* Scrollbar màu cho phần mô tả */
.product-detail-container .description-content::-webkit-scrollbar-track {
  background: #f1f1f1 !important;
}
.product-detail-container .description-content::-webkit-scrollbar-thumb {
  background: #007bff !important;
}
.product-detail-container .description-content::-webkit-scrollbar-thumb:hover {
  background: #0056b3 !important;
}

/* ----------------------------- LOGIN PAGE (COLOR ONLY) ----------------------------- */
/* Chỉ định màu sắc cho trang login theo palette VISNAM (xanh dương) */
.login-left-panel {
  background: linear-gradient(
    135deg,
    #2859a4 0%,
    #5271ff 100%
  ) !important; /* VISNAM: Gradient xanh dương */
}

.login-left-panel::before {
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.08) 0%,
    transparent 70%
  ) !important;
}

.brand-title {
  color: #ffffff !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

.brand-subtitle {
  color: rgba(255, 255, 255, 0.9) !important;
}

.feature-item {
  color: #ffffff !important;
}

.feature-icon {
  background: rgba(255, 255, 255, 0.18) !important;
}

.feature-content h4 {
  color: #ffffff !important;
}

.feature-content p {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* Form login màu sắc */
.login-title {
  color: #22324d !important;
}

.login-subtitle {
  color: #6b7a90 !important;
}

.form-label {
  color: #22324d !important;
}

.form-control:focus {
  border-color: #2859a4 !important;
  box-shadow: 0 0 0 3px rgba(40, 89, 164, 0.12) !important;
}

.password-toggle:hover {
  color: #2859a4 !important;
}

.btn-reset:hover {
  border-color: #2859a4 !important;
  color: #2859a4 !important;
}

.btn-login {
  background: linear-gradient(135deg, #2859a4 0%, #5271ff 100%) !important;
  box-shadow: 0 4px 15px rgba(40, 89, 164, 0.3) !important;
}

.btn-login:hover {
  box-shadow: 0 8px 25px rgba(40, 89, 164, 0.4) !important;
}

.login-links a {
  color: #2859a4 !important;
}

.login-links a:hover {
  color: #5271ff !important;
}

.qr-title {
  color: #22324d !important;
}

.login-footer {
  color: #6c757d !important;
}

.login-footer a {
  color: #2859a4 !important;
}

.login-footer a:hover {
  color: #5271ff !important;
}

.alert-danger {
  background: #f8d7da !important;
  color: #721c24 !important;
  border: 1px solid #f5c6cb !important;
}