.section{
    width: 100%;
    padding: 2rem;
}

.row {
    width: 80%;                     /* Điều chỉnh width để căn chỉnh vị trí */
    text-align: left;               /* Căn chỉnh text: left, center, right */
    margin: 0 auto;                 /* Căn giữa box row */
}

/* Container cho các box sản phẩm */
.products-container {
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Thay đổi từ center sang flex-start */
    flex-wrap: wrap;
    gap: 2rem;
    margin-top: 2rem;
    margin-bottom: 3rem; /* Thêm margin bottom */
    width: 100%;
    padding: 1rem 0; /* Thêm padding để tạo không gian */
    overflow: hidden; /* Ngăn elements tràn ra ngoài */
}

/* Container cho sản phẩm nổi bật */
.featured-products-container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 2rem;
    margin-top: 2rem;
    margin-bottom: 3rem;
    width: 100%;
    padding: 1rem 0;
    overflow: hidden; /* Ngăn elements tràn ra ngoài */
}

/* Sản phẩm lớn (bằng với 2 ô sản phẩm nhỏ) */
.featured-large {
    flex: 2; /* Giữ nguyên flex: 2 */
    max-width: 600px; /* Tăng max-width để bằng 2 ô sản phẩm */
    min-width: 500px; /* Thêm min-width để đảm bảo kích thước */
    min-height: 480px;
    padding: 2rem;
}

.featured-large img {
    height: 280px !important;
}

.featured-large .ten {
    font-size: 1.4rem !important;
    margin-bottom: 1.2rem !important;
}

.featured-large .gia {
    font-size: 1.3rem !important;
    margin-bottom: 1.5rem !important;
    display: flex !important; /* Hiển thị theo hàng ngang */
    align-items: center !important; /* Căn giữa theo chiều dọc */
    justify-content: center !important; /* Căn giữa theo chiều ngang */
    gap: 0.8rem !important; /* Khoảng cách giữa giá cũ và giá mới */
    color: #e74c3c !important; /* Màu đỏ cho giá hiện tại */
}

/* Ẩn thẻ br trong featured large */
.featured-large .gia br {
    display: none;
}

.featured-large .gia del {
    font-size: 1.1rem !important; /* Tăng font size cho featured large */
}

.featured-large .product-btn {
    padding: 0.8rem 1.2rem !important;
    font-size: 1rem !important;
}

/* Sản phẩm nhỏ (mỗi cái chiếm 1 phần) */
.featured-small {
    flex: 1;
    max-width: 280px; /* Giảm max-width để cân bằng với sản phẩm lớn */
    min-width: 250px; /* Thêm min-width để đảm bảo kích thước */
    min-height: 480px;
    padding: 1.5rem;
    margin-top: 5.9rem; /* Thêm margin-top cho 2 sản phẩm nhỏ */
}

.featured-small img {
    height: 200px !important;
}

.featured-small .ten {
    font-size: 1.1rem !important;
    margin-bottom: 1rem !important;
}

.featured-small .gia {
    font-size: 1rem !important;
    margin-bottom: 1.2rem !important;
    display: flex !important; /* Hiển thị theo hàng ngang */
    align-items: center !important; /* Căn giữa theo chiều dọc */
    justify-content: center !important; /* Căn giữa theo chiều ngang */
    gap: 0.6rem !important; /* Khoảng cách nhỏ hơn cho featured small */
    color: #e74c3c !important; /* Màu đỏ cho giá hiện tại */
}

/* Ẩn thẻ br trong featured small */
.featured-small .gia br {
    display: none;
}

.featured-small .product-btn {
    padding: 0.7rem 1rem !important;
    font-size: 0.9rem !important;
}

/* Box sản phẩm mới */
.sanpham {
    background-color: var(--secondary-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.2rem; /* Giảm padding từ 1.5rem */
    width: 280px;
    min-height: 420px; /* Tăng min-height từ 380px */
    box-shadow: 0 4px 12px var(--shadow-color);
    transition: all 0.3s ease;
    text-align: center;
    position: relative;
    overflow: visible; /* Thay đổi từ hidden sang visible */
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Phân bố đều nội dung */
}

.sanpham:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px var(--shadow-color);
    z-index: 5; /* Tăng z-index khi hover */
}

/* Hot Deal Label */
.top-right {
    position: absolute;
    top: 10px;
    right: 10px;
    background: linear-gradient(135deg, #ff4757, #ff3838);
    color: white;
    padding: 6px 12px;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 6px;
    box-shadow: 0 3px 10px rgba(255, 71, 87, 0.4);
    z-index: 15;
    transform: none; /* Bỏ rotate */
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 1px solid rgba(255,255,255,0.2);
    transition: all 0.3s ease;
}

.sanpham:hover .top-right {
    transform: scale(1.05);
    box-shadow: 0 5px 15px rgba(255, 71, 87, 0.6);
    background: linear-gradient(135deg, #ff3838, #ff2f2f);
}

/* Link container */
.sanpham a {
    text-decoration: none;
    color: inherit;
    display: block;
    margin-bottom: 1rem;
}

/* Hình ảnh sản phẩm */
.sanpham img {
    width: 100%;
    height: 240px; /* Tăng từ 220px */
    object-fit: contain;
    border-radius: 8px;
    margin-bottom: 0.8rem; /* Giảm từ 1rem */
    transition: transform 0.3s ease;
    background-color: #fafafa;
    padding: 8px; /* Giảm từ 10px */
    flex-shrink: 0; /* Không cho phép co lại */
}

.sanpham:hover img {
    transform: scale(1.05);
}

/* Tên sản phẩm */
.sanpham .ten {
    color: var(--text-primary);
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 0.8rem; /* Giảm từ 1rem */
    line-height: 1.3;
    flex-shrink: 0; /* Không cho phép co lại */
}

/* Thông số kỹ thuật sản phẩm */
.product-specs {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.8rem;
    padding: 0.5rem;
    background-color: rgba(var(--accent-color-rgb, 0, 122, 255), 0.1);
    border-radius: 6px;
    border: 1px solid rgba(var(--accent-color-rgb, 0, 122, 255), 0.2);
}

.spec-item {
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-weight: 500;
    text-align: center;
    flex: 1;
}

/* Giá sản phẩm */
.sanpham .gia {
    color: #e74c3c; /* Màu đỏ cho giá hiện tại */
    font-size: 1.1rem;
    font-weight: bold;
    line-height: 1.4;
    margin-bottom: 0.8rem; /* Giảm từ 1rem */
    flex-shrink: 0; /* Không cho phép co lại */
    display: flex; /* Hiển thị theo hàng ngang */
    align-items: center; /* Căn giữa theo chiều dọc */
    justify-content: center; /* Căn giữa theo chiều ngang */
    gap: 0.8rem; /* Khoảng cách giữa giá cũ và giá mới */
    flex-wrap: wrap; /* Cho phép xuống dòng nếu không đủ chỗ */
}

/* Ẩn thẻ br trong phần giá */
.sanpham .gia br {
    display: none;
}

.sanpham .gia del {
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: normal;
    text-decoration: line-through;
    opacity: 0.7;
    margin-right: 0.5rem; /* Thêm khoảng cách bên phải */
}

.sanpham .gia .current-price {
    color: var(--accent-color);
    font-size: 1.1rem;
    font-weight: bold;
}

/* Container cho các nút */
.product-buttons {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    align-items: stretch; /* Đảm bảo tất cả nút có cùng chiều cao */
    margin-top: auto; /* Đẩy buttons xuống dưới */
    position: relative;
    overflow: hidden; /* Chặn hiệu ứng tràn ra ngoài */
    padding: 8px; /* Tăng padding để tạo không gian cho hiệu ứng */
    transition: all 0.3s ease;
    z-index: 10; /* Z-index cao để luôn ở trên */
    flex-shrink: 0; /* Không cho phép co lại */
    height: auto; /* Chiều cao tự động nhưng cố định */
    min-height: 50px; /* Chiều cao tối thiểu cố định */
}

.product-buttons:hover {
    transform: translateY(-2px);
    z-index: 15; /* Tăng z-index khi hover */
}

/* Nút chung */
.product-btn {
    padding: 0.7rem 1rem;
    border: none;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.5s ease;
    text-decoration: none;
    display: flex; /* Thay đổi từ inline-block sang flex */
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    flex: 1;
    text-align: center;
    z-index: 1;
    font-family: 'Roboto', Arial, sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    height: 42px; /* Chiều cao cố định */
    min-height: 42px; /* Chiều cao tối thiểu */
    max-height: 42px; /* Chiều cao tối đa */
}

/* Nút giỏ hàng */
.btn-cart {
    background-color: transparent;
    color: var(--accent-color);
    border: 2px solid var(--accent-color);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    position: relative;
}

.btn-cart:hover {
    background-color: var(--accent-color);
    color: var(--secondary-color);
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 4px 15px rgba(0, 122, 255, 0.3), 0 2px 6px rgba(0, 0, 0, 0.1);
    border-color: var(--primary-color);
}

/* Style cho biểu tượng trong nút giỏ hàng */
.btn-cart::before {
    content: "";
    margin-right: 0;
    font-weight: bold;
    font-size: 1em;
    transition: transform 0.3s ease;
}

.btn-cart:hover::before {
    transform: scale(1.1) rotate(-5deg);
}

/* Hiệu ứng khi hover nút mua - nút giỏ hàng được cải thiện */
.btn-buy:hover + .btn-cart {
    flex: 0.7; /* Thu nhỏ để chừa chỗ cho icon */
    opacity: 0.8; /* Mờ nhẹ */
    transform: scale(0.9); /* Thu nhỏ vừa đủ */
    filter: grayscale(10%); /* Grayscale rất nhẹ */
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    border-color: rgba(var(--accent-color-rgb, 0, 122, 255), 0.8); /* Làm mờ viền nhẹ */
    margin-left: -5px; /* Đưa sát lại gần nút mua */
}

/* Hiển thị icon khi nút giỏ hàng thu nhỏ - Đã tắt để tránh nhầm lẫn */
.btn-buy:hover + .btn-cart::before {
    content: ""; /* Không hiển thị biểu tượng nào */
    position: static;
    top: auto;
    left: auto;
    transform: none;
    font-size: 1em;
    z-index: auto;
    opacity: 1;
}

/* Nút mua ngay */
.btn-buy {
    background-color: #e74c3c;
    color: var(--secondary-color);
    border: 2px solid #e74c3c;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 2;
    position: relative;
    overflow: hidden;
}

/* Style cho biểu tượng trong nút mua hàng */
.btn-buy::before {
    content: "";
    margin-right: 0;
    font-size: 1em;
    transition: all 0.3s ease;
}

/* Hiệu ứng shimmer */
.btn-buy::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transition: left 0.6s ease;
}

.btn-buy:hover::after {
    left: 100%;
}

.btn-buy:hover {
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 50%, #a93226 100%);
    border-color: #a93226;
    transform: translateY(-3px) scale(1.02);
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
    font-weight: 600;
    letter-spacing: 0.8px;
    border-radius: 12px;
    z-index: 20;
    position: relative;
    box-shadow: 0 6px 20px rgba(231, 76, 60, 0.4), 0 2px 8px rgba(0, 0, 0, 0.2);
    /* Giãn nhẹ sang phải để chừa chỗ cho icon giỏ hàng */
    flex: 1.3;
    margin-right: -5px; /* Giãn sang phải một chút */
}

@keyframes pulse {
    0% { 
        box-shadow: 0 6px 20px rgba(231, 76, 60, 0.4), 0 2px 8px rgba(0, 0, 0, 0.2);
        transform: translateY(-3px) scale(1.02);
    }
    50% { 
        box-shadow: 0 8px 25px rgba(231, 76, 60, 0.6), 0 4px 12px rgba(0, 0, 0, 0.3);
        transform: translateY(-4px) scale(1.03);
    }
    100% { 
        box-shadow: 0 6px 20px rgba(231, 76, 60, 0.4), 0 2px 8px rgba(0, 0, 0, 0.2);
        transform: translateY(-3px) scale(1.02);
    }
}


/* Nút mua hàng */
.product-box .btn {
    background-color: var(--accent-color);
    color: var(--secondary-color);
    border: none;
    padding: 0.8rem 1.5rem;
    border-radius: 6px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}

.product-box .btn:hover {
    background-color: var(--primary-color);
    transform: translateY(-2px);
}

/* Responsive cho mobile */
@media (max-width: 768px) {
    .products-container {
        justify-content: center;
        gap: 1.5rem;
    }
    
    .sanpham {
        width: 250px;
        min-height: 350px;
        padding: 1rem;
    }
    
    .sanpham img {
        height: 200px;
    }
    
    .top-right {
        font-size: 0.65rem;
        padding: 4px 8px;
        top: 8px;
        right: 8px;
    }
    
    .product-buttons {
        flex-direction: column;
        gap: 0.7rem;
    }
    
    .product-btn {
        padding: 0.8rem;
        font-size: 0.85rem;
    }
    
    /* Tắt hiệu ứng hover phức tạp trên mobile */
    .product-buttons:hover {
        transform: none;
    }
    
    .btn-buy:hover + .btn-cart {
        flex: 0.85; /* Giữ tỷ lệ tốt hơn trên mobile */
        opacity: 0.9; /* Ít mờ hơn trên mobile */
        transform: scale(0.95); /* Thu nhỏ nhẹ hơn */
        filter: none; /* Bỏ filter trên mobile */
        border-color: var(--accent-color); /* Khôi phục màu viền */
        margin-left: 0; /* Bỏ margin âm trên mobile */
    }
    
    /* Giữ biểu tượng giỏ hàng trên mobile - Đã tắt */
    .btn-buy:hover + .btn-cart::before {
        content: ""; /* Không hiển thị biểu tượng */
        position: static; /* Vị trí bình thường */
        transform: none; /* Không transform */
        opacity: 1; /* Hiển thị rõ */
        margin-right: 0; /* Không cần margin */
    }
    
    .btn-buy:hover {
        flex: 1.15; /* Giãn nhẹ trên mobile */
        transform: translateY(-1px) scale(1.01); /* Hiệu ứng nhẹ hơn trên mobile */
        box-shadow: 0 2px 8px rgba(231, 76, 60, 0.3); /* Đổ bóng nhẹ hơn */
        font-weight: 600; /* Giữ font weight moderate */
        letter-spacing: normal; /* Letter spacing bình thường */
        margin-right: 0; /* Bỏ margin âm trên mobile */
        /* Tắt animation phức tạp trên mobile */
    }
    
    .btn-buy::after {
        display: none; /* Tắt shimmer effect trên mobile */
    }
    
    .btn-cart:hover {
        transform: translateY(-1px); /* Hiệu ứng nhẹ hơn trên mobile */
        box-shadow: 0 2px 8px rgba(0, 122, 255, 0.2); /* Đổ bóng nhẹ hơn */
    }
    
    .btn-cart:hover::before {
        transform: none; /* Tắt animation phức tạp cho icon */
    }
    
    /* Featured products responsive */
    .featured-products-container {
        flex-direction: column;
        gap: 1.5rem;
    }
    
    .featured-large {
        max-width: 100%;
        min-width: 100%; /* Reset min-width trên mobile */
        min-height: 400px;
        padding: 1.5rem;
        margin-top: 0; /* Reset margin-top */
    }
    
    .featured-large img {
        height: 220px !important;
    }
    
    .featured-small {
        max-width: 100%;
        min-width: 100%; /* Reset min-width trên mobile */
        min-height: 350px;
        padding: 1rem;
        margin-top: 0; /* Reset margin-top cho mobile */
    }
    
    .featured-small img {
        height: 200px !important;
    }
    
    /* Cart link mobile optimization - Tối ưu hiển thị cart trên mobile */
    .nav-right .cart-link {
        padding: 0.5rem 0.8rem; /* Giảm padding trên mobile */
        gap: 0.3rem;            /* Giảm khoảng cách */
        border-radius: 6px;     /* Bo góc nhỏ hơn trên mobile */
    }
    
    .cart-text {
        font-size: 0.9rem;      /* Giảm kích thước chữ */
    }
    
    .cart-icon {
        font-size: 1rem;        /* Giảm kích thước icon */
    }
    
    .cart-count {
        width: 14px;            /* Giảm kích thước badge trên mobile để sát hơn */
        height: 14px;
        font-size: 0.6rem;      /* Giảm kích thước chữ trong badge */
        top: -1px;              /* Vị trí sát hơn nữa trên mobile */
        right: -1px;
        min-width: 14px;        /* Chiều rộng tối thiểu nhỏ hơn */
        border-width: 1px;      /* Viền rất mỏng trên mobile */
        box-shadow: 0 1px 4px rgba(0, 122, 255, 0.3); /* Đổ bóng nhẹ hơn nữa */
    }
    
    /* Tắt hiệu ứng phức tạp trên mobile */
    .nav-right .cart-link:hover .cart-count {
        transform: scale(1.1);  /* Hiệu ứng hover nhẹ hơn trên mobile */
        animation: none;        /* Tắt animation phức tạp */
        background: linear-gradient(135deg, var(--accent-color) 0%, #0066cc 100%); /* Giữ màu gốc */
    }
}

/* Hover hiệu ứng nổi lên */

.sanpham a:hover .ten {
    color: var(--accent-color);
    font-weight: 600;
}

/* ==================== CART PAGE STYLES ==================== */

/* ============== CART PAGE LAYOUT - MAIN CONTENT AREA ============== */
/* Layout chính cho cart page giữa header và footer */

/* Body layout cho cart page */
.cart-page {
    min-height: 100vh;           /* Chiều cao tối thiểu bằng viewport */
    display: flex;               /* Flexbox layout */
    flex-direction: column;      /* Sắp xếp theo cột dọc */
    background-color: var(--background-color); /* Nền từ color scheme */
}

.cart-page header {
    flex-shrink: 0;              /* Header không co lại */
}

.cart-page main {
    flex: 1;                     /* Main content chiếm phần còn lại */
    padding: 2rem 0;             /* Padding trên dưới */
    background-color: var(--background-color); /* Nền nhất quán */
}

.cart-page footer {
    flex-shrink: 0;              /* Footer không co lại */
    margin-top: auto;            /* Đẩy footer xuống dưới */
}

/* Container cho nội dung cart */
.container {
    max-width: 1200px;           /* Chiều rộng tối đa */
    margin: 0 auto;              /* Căn giữa */
    padding: 0 1rem;             /* Padding hai bên */
}

/* Breadcrumb styling cho cart page */
.breadcrumb {
    background: linear-gradient(135deg, rgba(248,249,250,0.8) 0%, rgba(255,255,255,0.8) 100%);
    backdrop-filter: blur(10px); /* Hiệu ứng mờ nền */
    border-bottom: 1px solid rgba(0,0,0,0.05); /* Viền dưới nhẹ */
    padding: 1.5rem 0;           /* Padding trên dưới */
    flex-shrink: 0;              /* Không co lại */
}

.breadcrumb .container {
    display: flex;               /* Flexbox layout */
    align-items: center;         /* Căn giữa theo chiều dọc */
    gap: 0.5rem;                /* Khoảng cách giữa các element */
    font-size: 0.9rem;          /* Kích thước chữ nhỏ hơn */
}

.breadcrumb a {
    color: var(--accent-color);  /* Màu link */
    text-decoration: none;       /* Bỏ gạch chân */
    transition: color 0.3s ease; /* Hiệu ứng chuyển màu */
}

.breadcrumb a:hover {
    color: var(--primary-color); /* Màu hover */
}

.breadcrumb span {
    color: var(--text-secondary); /* Màu text phụ */
}

.breadcrumb .current {
    color: var(--text-primary);  /* Màu text chính cho trang hiện tại */
    font-weight: 500;            /* Chữ medium weight */
}

/* Cart Count Badge - Badge hiển thị số lượng sản phẩm trong giỏ hàng */
.cart-count {
    position: absolute;          /* Định vị tuyệt đối so với element cha */
    top: -2px;                  /* Giảm từ -4px xuống -2px để sát hơn nữa */
    right: -2px;                /* Giảm từ -4px xuống -2px để sát hơn nữa */
    background: linear-gradient(135deg, var(--accent-color) 0%, #0066cc 100%);  /* Gradient nền đẹp hơn */
    color: white;               /* Chữ màu trắng */
    border-radius: 50%;         /* Bo tròn thành hình tròn */
    width: 16px;                /* Giảm từ 18px xuống 16px để gọn hơn */
    height: 16px;               /* Giảm từ 18px xuống 16px để gọn hơn */
    display: flex;              /* Flexbox để căn giữa */
    align-items: center;        /* Căn giữa theo chiều dọc */
    justify-content: center;    /* Căn giữa theo chiều ngang */
    font-size: 0.65rem;         /* Giảm từ 0.7rem xuống 0.65rem */
    font-weight: bold;          /* Chữ đậm */
    border: 1.5px solid white;  /* Viền mỏng hơn từ 2px xuống 1.5px */
    box-shadow: 0 2px 8px rgba(0, 122, 255, 0.4), 0 1px 2px rgba(0, 0, 0, 0.2); /* Đổ bóng nhẹ hơn */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);  /* Hiệu ứng transition mượt hơn */
    min-width: 16px;            /* Giảm từ 18px xuống 16px */
    text-align: center;         /* Căn giữa text */
    z-index: 10000;             /* Z-index cao nhất để luôn hiển thị trên cùng */
    font-family: 'Arial', sans-serif; /* Font rõ ràng cho số */
    letter-spacing: 0;          /* Không có khoảng cách chữ */
    animation: fadeInBounce 0.4s ease-out; /* Animation xuất hiện */
}

/* Animation fadeInBounce cho cart count */
@keyframes fadeInBounce {
    0% {
        opacity: 0;
        transform: scale(0.3) rotate(-10deg);
    }
    50% {
        opacity: 1;
        transform: scale(1.2) rotate(5deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

/* Hiệu ứng hover cho cart link */
.nav-right a[href="cart.html"]:hover .cart-count,
.nav-right .cart-link:hover .cart-count {
    transform: scale(1.3);      /* Phóng to badge khi hover */
    background: linear-gradient(135deg, #ff4757 0%, #ff3838 100%); /* Đổi màu nền khi hover */
    box-shadow: 0 5px 20px rgba(255, 71, 87, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3); /* Tăng đổ bóng */
    animation: cartCountPulse 1s ease-in-out infinite; /* Thêm animation pulse liên tục */
    border-color: #fff;         /* Giữ viền trắng */
}

/* Animation cartCountPulse cho cart count khi hover */
@keyframes cartCountPulse {
    0%, 100% { 
        transform: scale(1.3); 
        box-shadow: 0 5px 20px rgba(255, 71, 87, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);
    }
    50% { 
        transform: scale(1.4); 
        box-shadow: 0 6px 25px rgba(255, 71, 87, 0.7), 0 3px 10px rgba(0, 0, 0, 0.4);
    }
}

/* Animation pulse cũ được cập nhật */
@keyframes pulse {
    0% { transform: scale(1.2); }
    50% { transform: scale(1.4); }
    100% { transform: scale(1.2); }
}

/* ============== CART LINK SPECIFIC STYLES ============== */
/* Chỉ styles cho cart link, không ảnh hưởng đến navigation khác */



/* Animation cho cart icon */
@keyframes cartBounce {
    0%, 100% { transform: scale(1.1); }
    50% { transform: scale(1.3); }
}

/* Cart Content Styles */
.cart-content {
    max-width: 1200px;
    margin: 2rem auto;
    padding: 0 1rem;
}

/* Cart Items Styles */
.cart-items {
    background: var(--secondary-color);
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* Cart Item Individual Product */
.cart-item {
    display: flex;
    align-items: center;
    padding: 1.5rem;
    background: white;
    border-radius: 12px;
    margin-bottom: 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.cart-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.item-image {
    width: 100px;
    height: 100px;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
    margin-right: 1.5rem;
}

.item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.item-details {
    flex: 1;
}

.item-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.item-specs {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

.item-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.quantity-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.qty-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    transition: all 0.3s ease;
}

.qty-btn:hover {
    background: var(--accent-color);
    color: white;
    border-color: var(--accent-color);
}

.quantity {
    padding: 0.5rem 1rem;
    background: var(--background-color);
    border-radius: 6px;
    font-weight: 500;
    min-width: 40px;
    text-align: center;
}

.item-price {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--accent-color);
}

.remove-item {
    background: none;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.remove-item:hover {
    background: #fee;
    color: #e53e3e;
}

.btn-continue {
    display: inline-block;
    background: var(--accent-color);
    color: white;
    padding: 0.75rem 2rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    font-family: inherit;
    position: relative;
    overflow: hidden;
}

.btn-continue:hover {
    background: var(--primary-color);
    box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3);
    color: white;
    text-decoration: none;
}

.btn-continue:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0, 122, 255, 0.3);
}

.btn-continue:focus {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

.cart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-top: 2px solid var(--border-color);
    padding-top: 1.5rem;
    margin-top: 1.5rem;
}

.btn-clear {
    background: #ef4444;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    transition: background 0.3s ease;
}

.btn-clear:hover {
    background: #dc2626;
}

/* Cart Summary */
.cart-summary {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 2px solid var(--border-color);
}

.summary-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1rem;
    padding: 0.5rem 0;
}

.summary-row.total {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--accent-color);
    border-top: 2px solid var(--border-color);
    padding-top: 1rem;
    margin-top: 1rem;
}

.cart-actions {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
    justify-content: center;
}

.cart-actions .btn-continue,
.cart-actions .btn-checkout {
    flex: 1;
    text-align: center;
    max-width: 200px;
}

/* Responsive Design cho Cart */
@media (max-width: 768px) {
    .cart-item {
        flex-direction: column;
        text-align: center;
    }
    
    .item-image {
        margin-right: 0;
        margin-bottom: 1rem;
    }
    
    .item-controls {
        flex-direction: column;
        gap: 1rem;
    }
    
    .cart-actions {
        flex-direction: column;
    }
    
    .cart-actions .btn-continue,
    .cart-actions .btn-checkout {
        max-width: none;
    }
}

.btn-checkout {
    flex: 1;
    background: var(--accent-color);
    color: white;
    border: none;
    padding: 1rem 2rem;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-checkout:hover {
    background: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3);
}

/* Checkout Form */
.checkout-form {
    background: var(--secondary-color);
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    margin-top: 2rem;
}

.checkout-form h2 {
    color: var(--text-primary);
    margin-bottom: 2rem;
    text-align: center;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    color: var(--text-primary);
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 0.75rem;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    font-size: 1rem;
    transition: border-color 0.3s ease;
    background: var(--background-light);
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--accent-color);
}

.form-actions {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
}

.btn-back {
    background: var(--border-color);
    color: var(--text-primary);
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.3s ease;
}

.btn-back:hover {
    background: var(--text-secondary);
    color: white;
}

.btn-order {
    flex: 1;
    background: var(--accent-color);
    color: white;
    border: none;
    padding: 0.75rem 2rem;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-order:hover {
    background: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3);
}

/* ============== CART PAGE AUTH SECTIONS ============== */
/* Login và Register sections cho cart page */

.cart-page .auth-section {
    position: fixed;             /* Vị trí cố định để tạo modal */
    top: 0;                      /* Vị trí từ trên */
    left: 0;                     /* Vị trí từ trái */
    width: 100%;                 /* Chiều rộng full */
    height: 100%;                /* Chiều cao full */
    background-color: rgba(0, 0, 0, 0.7); /* Nền mờ đen */
    display: flex;               /* Flexbox layout */
    align-items: center;         /* Căn giữa theo chiều dọc */
    justify-content: center;     /* Căn giữa theo chiều ngang */
    z-index: 10000;              /* Z-index cao nhất */
    opacity: 0;                  /* Ẩn ban đầu */
    visibility: hidden;          /* Ẩn hoàn toàn */
    transition: all 0.3s ease;   /* Hiệu ứng chuyển đổi */
}

/* Hiển thị auth section khi có target */
.cart-page .auth-section:target {
    opacity: 1;                  /* Hiển thị */
    visibility: visible;         /* Hiển thị hoàn toàn */
}

/* Close button */
.cart-page .auth-close {
    position: absolute;          /* Vị trí tuyệt đối */
    top: 1rem;                   /* Cách top 1rem */
    right: 1rem;                 /* Cách right 1rem */
    width: 3rem;                 /* Chiều rộng */
    height: 3rem;                /* Chiều cao */
    background-color: rgba(255, 255, 255, 0.9); /* Nền trắng mờ */
    color: var(--text-primary);  /* Màu chữ */
    text-decoration: none;       /* Bỏ gạch chân */
    display: flex;               /* Flexbox layout */
    align-items: center;         /* Căn giữa theo chiều dọc */
    justify-content: center;     /* Căn giữa theo chiều ngang */
    border-radius: 50%;          /* Bo tròn thành hình tròn */
    font-size: 1.5rem;          /* Kích thước chữ */
    font-weight: bold;           /* Chữ đậm */
    transition: all 0.3s ease;   /* Hiệu ứng chuyển đổi */
    z-index: 10001;              /* Z-index cao hơn auth section */
}

.cart-page .auth-close:hover {
    background-color: var(--accent-color); /* Nền accent color */
    color: white;                /* Chữ trắng */
    transform: scale(1.1);       /* Phóng to nhẹ */
}

/* Auth form container */
.cart-page .auth-form {
    background-color: var(--secondary-color); /* Nền trắng */
    padding: 3rem;               /* Padding lớn */
    border-radius: 12px;         /* Bo góc */
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2); /* Đổ bóng */
    max-width: 400px;            /* Chiều rộng tối đa */
    width: 90%;                  /* Chiều rộng responsive */
    max-height: 80vh;            /* Chiều cao tối đa */
    overflow-y: auto;            /* Scroll dọc nếu cần */
}

/* Form title */
.cart-page .auth-form h2 {
    color: var(--text-primary);  /* Màu chữ chính */
    text-align: center;          /* Căn giữa */
    margin-bottom: 2rem;         /* Margin dưới */
    font-size: 1.8rem;          /* Kích thước chữ */
}

/* Form groups */
.cart-page .auth-form .form-group {
    margin-bottom: 1.5rem;       /* Margin dưới */
}

.cart-page .auth-form .form-group label {
    display: block;              /* Hiển thị block */
    margin-bottom: 0.5rem;       /* Margin dưới */
    color: var(--text-primary);  /* Màu chữ */
    font-weight: 500;            /* Chữ medium weight */
}

.cart-page .auth-form .form-group input {
    width: 100%;                 /* Chiều rộng full */
    padding: 0.8rem;             /* Padding */
    border: 2px solid var(--border-color); /* Viền */
    border-radius: 8px;          /* Bo góc */
    font-size: 1rem;            /* Kích thước chữ */
    transition: all 0.3s ease;   /* Hiệu ứng chuyển đổi */
    background-color: var(--background-color); /* Nền */
}

.cart-page .auth-form .form-group input:focus {
    outline: none;               /* Bỏ outline */
    border-color: var(--accent-color); /* Màu viền focus */
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1); /* Shadow focus */
}

/* Form actions */
.cart-page .auth-form .form-actions {
    display: flex;               /* Flexbox layout */
    flex-direction: column;      /* Sắp xếp theo cột */
    gap: 1rem;                   /* Khoảng cách */
    margin-top: 2rem;            /* Margin trên */
}

.cart-page .auth-form .btn-login,
.cart-page .auth-form .btn-register {
    background-color: var(--accent-color); /* Nền accent color */
    color: white;                /* Chữ trắng */
    border: none;                /* Bỏ viền */
    padding: 1rem;               /* Padding */
    border-radius: 8px;          /* Bo góc */
    font-size: 1.1rem;          /* Kích thước chữ */
    font-weight: 600;            /* Chữ đậm */
    cursor: pointer;             /* Con trỏ pointer */
    transition: all 0.3s ease;   /* Hiệu ứng chuyển đổi */
}

.cart-page .auth-form .btn-login:hover,
.cart-page .auth-form .btn-register:hover {
    background-color: var(--primary-color); /* Nền hover */
    transform: translateY(-2px); /* Nâng lên */
    box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3); /* Đổ bóng */
}

.cart-page .auth-form .form-actions a {
    text-align: center;          /* Căn giữa */
    color: var(--accent-color);  /* Màu accent color */
    text-decoration: none;       /* Bỏ gạch chân */
    font-size: 0.95rem;         /* Kích thước chữ nhỏ hơn */
    transition: color 0.3s ease; /* Hiệu ứng chuyển màu */
}

.cart-page .auth-form .form-actions a:hover {
    color: var(--primary-color); /* Màu hover */
}