/* =========================================================
   1. CÀI ĐẶT CƠ BẢN (BASE STYLES)
========================================================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Roboto', sans-serif;
    color: #333;
    background-color: #f9f9f9;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* =========================================================
   2. UI SẢN PHẨM (PRODUCT CARDS)
========================================================= */
.product-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-decoration: none !important;
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.12) !important;
}

.product-link {
    text-decoration: none;
    color: inherit;
}

.product-link:hover .card-title {
    color: #007bff;
}

/* 
   3. UI THANH TÌM KIẾM & DANH SÁCH GỢI Ý (SEARCH BOX)
 */
.search-box {
    position: relative; /* Gốc tọa độ cho danh sách xổ xuống */
}

.search-input {
    transition: background-color 0.3s, color 0.3s;
}

.suggestion-container {  /* goi y tim kiem' */
    position: absolute;
    top: calc(100% + 5px);
    left: 0;    
    width: 100%;
    min-width: 350px;   
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.15);
    z-index: 1050;
    max-height: 350px;
    overflow-y: auto;
    padding: 5px 0;
    display: none; /* Mặc định ẩn */
}

.suggestion-item {
    padding: 10px 15px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #f5f5f5;
    transition: background-color 0.2s ease-in-out;
}

.suggestion-item:last-child {
    border-bottom: none;
}

.suggestion-item:hover {
    background-color: #f0f8ff;
}

.suggestion-item .item-name {
    font-size: 14px;
    color: #333;
    font-weight: 500;
    flex: 1;
    margin-right: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;    
}

.suggestion-item .item-price {
    font-size: 14px;
    color: #d70018;
    font-weight: bold;
    white-space: nowrap;
}

/* 
   4. CHẾ ĐỘ TỐI (DARK THEME)
 */

/* Nền và màu chữ cơ bản */
body.dark-theme {
    background-color: #121212 !important;
    color: #e0e0e0 !important;
}

/* Header & Menu */
body.dark-theme .header {
    background-color: #1f1f1f !important;
    border-bottom: 1px solid #333 !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.5) !important;
}

body.dark-theme .menu > li > a {
    color: #ffffff !important;
}

body.dark-theme .menu > li > a:hover {
    color: #ff6b6b !important;
}

/* Menu Dropdown (Sub-menu) */
body.dark-theme .sub-menu {
    background-color: #252525 !important;
    border: 1px solid #444 !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.5) !important;
}

body.dark-theme .sub-menu li a {
    color: #e0e0e0 !important;
    border-bottom: 1px solid #333 !important;
}

body.dark-theme .sub-menu li a:hover {
    background-color: #333 !important;
    color: #ff6b6b !important;
}

/* Sidebar & Khung Card chung (Tối ưu gộp nhóm) */
body.dark-theme .card,
body.dark-theme .card-header,
body.dark-theme .list-group-item {
    background-color: #252525 !important;
    color: #ffffff !important;
    border-color: #444 !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.5) !important;
}

body.dark-theme .list-group-item a {
    color: #ddd !important;
}

body.dark-theme .list-group-item a:hover {
    color: #fff !important;
}

/* Elements bên trong Card */
body.dark-theme .card-title,
body.dark-theme h5 {
    color: #ffffff !important;
}

body.dark-theme .text-danger {
    color: #ff6b6b !important;
}

body.dark-theme .home-product-item-img {
    background-color: #ffffff !important;
}

/* Nút bấm (Buttons) */
body.dark-theme .btn-outline-primary {
    color: #8bb9fe !important;
    border-color: #8bb9fe !important;
}

body.dark-theme .btn-outline-primary:hover {
    background-color: #8bb9fe !important;
    color: #000 !important;
}

/* Icons Header */
body.dark-theme .header-icons i,
body.dark-theme .header-icons a,
body.dark-theme .header-icons button {
    color: #ffffff !important;
}
body.dark-theme .header-icons .pn-user-trigger span {
    color: #ffffff !important;
}
body.dark-theme .header-icons .badge {
    color: #ffffff !important;
}
/* --- UI TÌM KIẾM TRONG DARK MODE --- */
body.dark-theme .search-box {
    background-color: #333 !important;
    border: 1px solid #555 !important;
    border-radius: 50px; /* Thêm bo góc để giữ dáng viên thuốc nếu cần */
}

/* 2. Làm cho ô nhập chữ bên trong trở nên TRONG SUỐT để ăn theo màu viền */
body.dark-theme .search-box .search-input {
    background-color: transparent !important; /* Quan trọng: Đổi thành trong suốt */
    color: #fff !important;
    border: none !important; /* Xóa viền thừa của input */
    box-shadow: none !important; /* Xóa bóng nếu có */
}

/* Đổi màu chữ gợi ý (placeholder) */
body.dark-theme .search-input::placeholder {
    color: #aaa !important;
}

/* Giữ nguyên phần hộp thoại gợi ý xổ xuống bên dưới */
body.dark-theme .suggestion-container {
    background-color: #252525 !important;
    border-color: #444 !important;
    box-shadow: 0 8px 16px rgba(0,0,0,0.6) !important;
}

body.dark-theme .suggestion-item {
    border-bottom-color: #3a3a3a !important;
}

body.dark-theme .suggestion-item:hover {
    background-color: #333 !important;
}

body.dark-theme .suggestion-item .item-name {
    color: #e0e0e0 !important;
}

body.dark-theme .suggestion-item .item-price {
    color: #ff6b6b !important;
}