/* static/css/custom.css */

/* 1. ĐỊNH NGHĨA BIẾN MÀU (BRANDING) */
:root {
    --wn-primary: #198754; /* Màu xanh lá (Success) */
    --wn-primary-dark: #126b43;
    --wn-shadow: rgba(0, 0, 0, 0.08);
}

/* 2. HIỆU ỨNG TẠO CHIỀU SÂU VÀ TRANSITION */
.card, .shadow-sm {
    /* Sử dụng cubic-bezier cho chuyển động mượt mà hơn và chuyên nghiệp hơn */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    border: none;
    box-shadow: 0 1px 3px var(--wn-shadow) !important; /* Đổ bóng nhẹ ban đầu */
}

/* Nâng cấp hiệu ứng Hover cho Cards */
.card:hover, .card-guide:hover {
    transform: translateY(-4px); /* Nâng cao hơn */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1) !important; /* Đổ bóng mạnh hơn khi hover */
}

/* 3. HIỆU ỨNG SINH ĐỘNG CHO NÚT (BTN) */
.btn-success {
    background-color: var(--wn-primary) !important;
    border-color: var(--wn-primary) !important;
    box-shadow: 0 2px 4px rgba(25, 135, 84, 0.4); /* Thêm shadow cho nút */
}

.btn-success:hover {
    background-color: var(--wn-primary-dark) !important;
    border-color: var(--wn-primary-dark) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(25, 135, 84, 0.5);
}

/* 4. CẢI THIỆN ẢNH ĐẠI DIỆN TRÒN */
.rounded-circle {
    border: 3px solid var(--wn-primary); /* Thêm viền màu thương hiệu */
    object-fit: cover;
    transition: all 0.3s ease;
}

.rounded-circle:hover {
    box-shadow: 0 0 15px rgba(25, 135, 84, 0.5); /* Ánh sáng bao quanh khi hover */
    transform: scale(1.03); /* Phóng to nhẹ, tạo cảm giác 3D */
}

/* 5. TẠO CÁ TÍNH RIÊNG: GRADIENT CHO TIÊU ĐỀ */
/* Sử dụng cho các tiêu đề quan trọng (ví dụ: HDV Hàng Đầu, Album Trải nghiệm) */
.text-gradient-success {
    /* Tạo màu nền chuyển sắc (gradient) từ màu xanh lá sang màu xanh đậm hơn */
    background: linear-gradient(90deg, var(--wn-primary), var(--wn-primary-dark));
    /* Cắt gradient theo chữ */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    font-weight: 700;
}

/* Áp dụng hiệu ứng phụ cho tiêu đề (Đã có sẵn trong base.html, nhưng đây là tối ưu CSS) */
h2.text-success, h3.text-info {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}


/* 6. FIX CSS CŨ (Đã chuyển từ base.html) */
/* Vui lòng giữ nguyên khối này để đảm bảo chức năng Autocomplete hoạt động */
#autocomplete-results {
    position: absolute; 
    z-index: 1050; 
    width: 100%;
    max-height: 250px;
    overflow-y: auto;
    border: 1px solid #ccc;
    border-top: none;
    border-radius: 0 0 .375rem .375rem; 
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    background-color: white;
    transform: translateY(-5px); 
}
.autocomplete-item {
    padding: 10px 15px;
    cursor: pointer;
    font-size: 0.95rem;
}
.autocomplete-item:hover {
    background-color: #f0f0f0;
}
.autocomplete-container {
    position: relative;
}
.navbar-nav .nav-link {
    transition: color 0.3s ease;
    font-weight: 500; 
}
.navbar-nav .nav-link:hover {
    color: var(--wn-primary) !important; 
}
.alert-dismissible {
    position: relative;
    padding-right: 3rem;
}
.alert-dismissible .btn-close {
    position: absolute;
    top: 0;
    right: 0;
    padding: 0.8rem 1rem;
}