:root {
    --primary: #ff477e;
    --soft-pink: #fff0f3;
    --surface: #ffffff;
    --text-main: #2d3436;
    --shadow-sm: 0 2px 8px rgba(255, 71, 126, 0.06);
    --shadow-hover: 0 20px 40px rgba(255, 71, 126, 0.15), 0 10px 15px rgba(0, 0, 0, 0.03);
}

body {
    font-family: 'Lexend', sans-serif;
    background-color: #fcfcfc;
    color: var(--text-main);
    -webkit-tap-highlight-color: transparent;
}

/* --- Header & Nav --- */
.main-nav {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
    border-bottom: 2px solid rgba(255, 71, 126, 0.1);
    padding: 15px 0;
    z-index: 1050;
}

.navbar-nav {
    font-weight: 600;
}
/* Container menu - FIX CHUẨN HÀNG NGANG */
.nav-link-cx {
    display: flex !important;
    flex-direction: row !important; /* Ép nằm ngang */
    align-items: center !important;
    gap: 12px; /* Khoảng cách giữa icon và chữ */
    padding: 10px 22px !important;
    border-radius: 50px;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    font-weight: 600;
    color: #555 !important;
    white-space: nowrap; /* Không cho chữ nhảy xuống dòng */
}

    /* Hiệu ứng Hover chuyên nghiệp */
    .nav-link-cx:hover {
        transform: translateY(-3px);
    }

/* Box chứa Icon - Sleek & Clean */
.nav-icon {
    width: 36px; /* Tăng nhẹ kích thước cho cân đối */
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 1rem;
    flex-shrink: 0; /* Không cho icon bị bóp méo */
    transition: all 0.3s ease;
}

/* Màu sắc Brand theo chuẩn Pastel */
.bg-tips {
    background: #fff4e5;
    color: #ff9f43;
}
/* Cam */
.bg-voucher {
    background: #fff0f3;
    color: #ff477e;
}
/* Hồng */
.bg-about {
    background: #e3f2fd;
    color: #1e88e5;
}
/* Xanh */

/* Màu nền cho icon Danh mục (Màu tím nhạt cute) */
.bg-cat {
    background-color: #f3e5f5;
    color: #ab47bc;
}

/* Tinh chỉnh Dropdown cho Mobile để không bị tràn màn hình */
@media (max-width: 991.98px) {
    .dropdown-menu {
        border: none;
        background: transparent; /* Nền trong suốt để tiệp màu với nav */
        padding-left: 15px; /* Thụt vào đầu dòng */
        box-shadow: none;
        margin-top: 0;
    }

    .dropdown-item {
        color: #666; /* Màu chữ nhạt hơn chút trên mobile */
        padding: 8px 15px;
    }

        .dropdown-item:hover {
            background: rgba(0,0,0,0.03); /* Hover nhẹ nhàng */
            color: var(--primary);
        }
}

/* Đảm bảo Nav Link luôn căn giữa icon và chữ */
.nav-link-cx {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Chữ Menu */
.nav-text {
    font-size: 1rem;
    letter-spacing: -0.3px;
}

/* Hiệu ứng icon khi hover */
.nav-link-cx:hover .nav-icon {
    transform: rotate(-10deg) scale(1.1);
}

/* Responsive cho Mobile */
@media (max-width: 991px) {
    .nav-link-cx {
        justify-content: flex-start; /* Canh trái trên mobile */
        margin-bottom: 8px;
        background: #fdfdfd;
        border: 1px solid #f0f0f0;
    }
}

.brand-logo {
    font-weight: 700;
    font-size: 1.5rem !important;
    color: var(--primary) !important;
    letter-spacing: -1px;
}

.brand-logo-img {
    height: 36px;
    width: auto;
    transition: transform 0.3s ease-in-out;
    display: inline-block;
}

.brand-logo .brand-logo-img {
    animation: jump-shaking 0.6s ease-in-out infinite;
}

@keyframes jump-shaking {
    0% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-5px) rotate(-5deg); }
    50% { transform: translateY(0) rotate(0deg); }
    75% { transform: translateY(-3px) rotate(5deg); }
    100% { transform: translateY(0) rotate(0deg); }
}

/* --- Badges Sàn Thương Mại (Gộp từ brand.css) --- */
.badge-platform {
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    padding: 4px 12px; border-radius: 50px; display: inline-flex;
    align-items: center; gap: 4px; margin-bottom: 8px; letter-spacing: 0.5px;
}
.platform-shopee { background-color: #fff2ee; color: #ee4d2d; border: 1px solid #ffdbd1; }
.platform-lazada { background-color: #eff0ff; color: #4044ff; border: 1px solid #dbe0ff; }
.platform-tiki { background-color: #ecf7ff; color: #0088ff; border: 1px solid #d6eeff; }
.platform-tiktok { background: #f1f1f1; color: #000; border: 1px solid #e0e0e0; }
.platform-x { background-color: var(--soft-pink); color: var(--primary); border: 1px solid #ffd1dc; }

/* --- Hiệu ứng thả tim & nổ hạt (Floating & Particles) --- */
.floating-heart {
    position: fixed; z-index: 9999; pointer-events: none;
    color: var(--primary); font-size: 20px; animation: flyUp 1s ease-out forwards;
}

@keyframes flyUp {
    0% { transform: translateY(0) scale(1) rotate(0deg); opacity: 1; }
    100% { transform: translateY(-100px) scale(1.5) rotate(20deg); opacity: 0; }
}

#fab-love {
    position: fixed; bottom: 30px; right: 30px; width: 60px; height: 60px;
    border-radius: 50%; background: var(--primary); color: white;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 10px 25px rgba(255, 71, 126, 0.4); z-index: 1000;
    cursor: pointer; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
#fab-love:hover { transform: scale(1.1) translateY(-5px); }

.heart-particle {
    position: fixed; width: 8px; height: 8px; background: var(--primary);
    border-radius: 50%; pointer-events: none; z-index: 9999;
    animation: explode 0.6s ease-out forwards;
}

@keyframes explode {
    0% { transform: translate(0, 0) scale(1); opacity: 1; }
    100% { transform: translate(var(--x), var(--y)) scale(0); opacity: 0; }
}

/* --- Danh sách yêu thích (Sidebar) --- */
.badge-count {
    position: absolute; top: -2px; right: -2px; background: #2d3436;
    color: white; width: 22px; height: 22px; border-radius: 50%;
    font-size: 12px; display: flex; align-items: center; justify-content: center;
    border: 2px solid white;
}

#fav-list-container::-webkit-scrollbar { width: 4px; }
#fav-list-container::-webkit-scrollbar-thumb { background: var(--soft-pink); border-radius: 10px; }

.fav-item {
    display: flex; align-items: center; background: #fff;
    border-radius: 20px; padding: 15px; margin-bottom: 15px;
    transition: all 0.3s ease; border: 1px solid #f0f0f0;
}
.fav-item:hover { transform: translateX(5px); border-color: var(--soft-pink); background: var(--soft-pink); }

.fav-img { width: 80px; height: 80px; border-radius: 15px; object-fit: cover; margin-right: 12px; box-shadow: var(--shadow-sm); }
.fav-info .title { font-size: 1rem; font-weight: 600; color: var(--text-main); margin-bottom: 5px; }
.fav-info .price { font-size: 0.9rem; color: var(--primary); font-weight: 700; }
.fav-btn-buy {
    background: var(--primary); color: white; padding: 6px 15px; border-radius: 12px;
    font-size: 0.75rem; font-weight: 700; text-decoration: none; transition: 0.3s;
}
.fav-btn-buy:hover { color: white; box-shadow: 0 4px 12px rgba(255, 71, 126, 0.3); }

/* --- Global Utilities (site.css) --- */
.fw-800 { font-weight: 800; }
.text-pink { color: var(--primary) !important; }
.rounded-4-5 { border-radius: 35px; }

/* Animation dùng cho icon play hoặc các thành phần khác */
@keyframes heartBeat {
    0% { transform: scale(1); }
    14% { transform: scale(1.1); }
    28% { transform: scale(1); }
    42% { transform: scale(1.1); }
    70% { transform: scale(1); }
}

/* Footer Style */
.footer-cute {
    background-color: white;
    border-radius: 60px 60px 0 0; /* Bo tròn góc trên rất lớn */
    border-top: 1px solid rgba(255, 71, 126, 0.1);
    box-shadow: 0 -10px 40px rgba(255, 71, 126, 0.05);
}

.footer-brand span {
    font-weight: 700;
    font-size: 1.3rem;
    color: var(--primary);
}

.footer-desc {
    font-size: 0.9rem;
    line-height: 1.6;
}

.footer-links li {
    margin-bottom: 12px;
}

.footer-links a {
    text-decoration: none;
    color: #666;
    font-size: 0.95rem;
    transition: 0.3s;
}

    .footer-links a:hover {
        color: var(--primary);
        padding-left: 5px; /* Hiệu ứng đẩy nhẹ sang phải */
    }

/* Social Icons */
.social-icon {
    width: 40px;
    height: 40px;
    background: var(--soft-pink);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

    .social-icon:hover {
        background: var(--primary);
        color: white;
        transform: scale(1.15) rotate(10deg);
    }

/* Newsletter Box */
.newsletter-box {
    background: #f8f9fa;
    padding: 6px;
    border-radius: 50px;
    display: flex;
    border: 1px solid #eee;
}

    .newsletter-box .form-control {
        background: transparent;
        padding-left: 20px;
        box-shadow: none;
    }

        .newsletter-box .form-control:focus {
            background: transparent;
        }

.btn-pink-round {
    background: var(--primary);
    color: white;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: none;
    transition: 0.3s;
}

    .btn-pink-round:hover {
        background: #ff1f66;
        transform: rotate(15deg);
    }

/* Responsive */
@media (max-width: 768px) {
    .footer-cute {
        border-radius: 40px 40px 0 0;
    }

    .footer-top {
        padding: 40px 20px !important;
    }
}

.text-pink {
    color: var(--primary) !important;
}

.fa-spin {
    animation: fa-spin 2s infinite linear;
}

@keyframes fa-spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}