/* ================= CSS CHUNG CHO TẤT CẢ TRANG DANH MỤC ================= */

/* --- Category Menu --- */
/* --- Category Menu (Đã thêm hiệu ứng hào quang rực rỡ) --- */
.category-section { 
    padding: 60px 20px; 
    background-color: #fcfaf8; /* Nền kem nhẹ */
    text-align: center; 
    position: relative; /* Cần thiết để neo hiệu ứng ánh sáng */
    z-index: 1; 
    overflow: hidden; /* Giữ cho vệt sáng không bị tràn ra ngoài */
}

/* Dải màu pastel tỏa sáng phía sau */
.category-section::before {
    content: ""; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    width: 100%; 
    max-width: 1100px; 
    height: 100%; 
    background: linear-gradient(90deg, rgba(167, 255, 235, 0.65) 0%, rgba(189, 224, 254, 0.65) 35%, rgba(235, 211, 255, 0.65) 65%, rgba(255, 209, 201, 0.65) 100%); 
    filter: blur(55px); /* Độ nhòe tạo cảm giác mây mờ ảo */
    z-index: -1; /* Đẩy xuống dưới cùng để không đè lên chữ và menu */
    border-radius: 50%; 
    pointer-events: none;
}
.category-title { margin-bottom: 40px; font-size: 28px; font-weight: 400; }
.menu-grid { display: flex; justify-content: center; flex-wrap: wrap; gap: 40px; max-width: 1200px; margin: 0 auto; }
.menu-item { display: flex; flex-direction: column; align-items: center; cursor: pointer; transition: transform 0.3s ease; }
.menu-item:hover { transform: translateY(-5px); }
.icon-circle { width: 70px; height: 70px; background-color: #fff; border-radius: 50%; display: flex; justify-content: center; align-items: center; box-shadow: 0 4px 15px rgba(0,0,0,0.04); margin-bottom: 15px; font-size: 24px; color: #222; border: 1px solid rgba(0,0,0,0.02); }
.menu-text { font-size: 13px; letter-spacing: 1px; text-transform: uppercase; font-weight: 600; }

/* --- Cấu Trúc Lưới Sản Phẩm --- */
.products-section { padding: 20px 50px 20px; max-width: 1400px; margin: 0 auto; }
.product-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 25px; align-items: start; }
.product-card-container:nth-child(even) { margin-top: 60px; }

.product-card { background-color: #fff; border-radius: 16px; padding: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.03); text-align: center; transition: transform 0.3s ease, box-shadow 0.3s ease; display: flex; flex-direction: column; height: 100%; width: 100%; }
.product-card:hover { transform: translateY(-5px); box-shadow: 0 15px 40px rgba(0,0,0,0.06); }

/* CHỐNG TRÀN HÌNH ẢNH */
.product-image-wrapper { background-color: #f7f7f7; border-radius: 12px; overflow: hidden; position: relative; aspect-ratio: 1/1; margin-bottom: 20px; width: 100%; display: flex; align-items: center; justify-content: center; }
.product-image { max-width: 100%; max-height: 100%; object-fit: contain; transition: transform 0.5s ease; }
.product-card:hover .product-image { transform: scale(1.03); }

/* Nhãn giảm giá & Tên, Giá sản phẩm */
.discount-badge, .sold-out-badge { position: absolute; top: 10px; left: 10px; color: white; font-size: 11px !important; font-weight: 700; padding: 4px 8px; border-radius: 4px; z-index: 2; text-transform: uppercase; }
.discount-badge { background-color: #ff4d4f; }
.sold-out-badge { background-color: #333; }
.product-title { font-size: 15px !important; font-weight: 700 !important; margin: 0 0 10px; text-transform: uppercase; letter-spacing: 0.5px; flex-grow: 1; word-break: break-word; color: #222 !important;}
.product-price-wrap { margin-bottom: 15px; display: flex; justify-content: center; align-items: center; gap: 10px; flex-wrap: wrap; }
.old-price { font-size: 13px !important; color: #888 !important; text-decoration: line-through; }
.current-price { font-size: 16px !important; font-weight: 700 !important; color: #222 !important; }

/* --- Pagination --- */
.pagination-container { display: flex; justify-content: center; align-items: center; margin: 40px 0 60px; gap: 10px; flex-wrap: wrap; }
.page-link { display: inline-flex; justify-content: center; align-items: center; width: 40px; height: 40px; border-radius: 50%; background-color: #fff; color: #222; text-decoration: none; font-weight: 600; font-size: 14px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); transition: all 0.3s ease; border: 1px solid #eaeaea; }
.page-link:hover { background-color: #f0f0f0; transform: translateY(-2px); }
.page-link.active { background-color: #222; color: #fff; border-color: #222; }

/* --- SEO ACCORDION CONTENT --- */
.seo-accordion-container { max-width: 900px; margin: 0 auto 80px; padding: 0 20px; }
.seo-main-title { text-align: center; color: #c29c5b !important; font-size: 26px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 2px !important; margin-bottom: 40px !important; }
.seo-accordion-item { background-color: #fff; border: 1px solid #c29c5b !important; border-radius: 40px; margin-bottom: 15px; overflow: hidden; transition: all 0.3s ease; }
.seo-accordion-header { display: flex; align-items: center; padding: 15px 30px; cursor: pointer; user-select: none; }
.seo-acc-num { font-size: 32px !important; font-weight: 500 !important; color: #c29c5b !important; margin-right: 25px; min-width: 45px; }
.seo-acc-title { flex-grow: 1; font-size: 18px !important; color: #222 !important; line-height: 1.5; font-weight: 600 !important; text-transform: none !important;}
.seo-acc-icon { font-size: 18px; color: #c29c5b !important; margin-left: 15px; transition: transform 0.3s ease; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex-shrink: 0; }
.seo-accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding 0.4s ease; }
.seo-accordion-content p { margin: 0 0 10px 0; padding: 0 30px 0 100px !important; color: #444 !important; font-size: 16px !important; line-height: 1.7 !important; }
.seo-accordion-content p:last-child { padding-bottom: 25px !important; }
.seo-accordion-content strong { color: #222 !important; font-weight: 600 !important; }

.seo-accordion-item.active { border-radius: 30px; box-shadow: 0 5px 20px rgba(194, 156, 91, 0.1); }
.seo-accordion-item.active .seo-accordion-content { max-height: 1200px; }

/* ================= CSS RIÊNG CHO TRANG ACCESSORIES (CŨNG NẰM CHUNG Ở ĐÂY LUÔN) ================= */
.page-header { max-width: 1300px; margin: 40px auto 20px; padding: 0 20px; }
.page-title { font-size: 32px; font-weight: 700; margin-bottom: 15px; color: #111; text-transform: uppercase; }
.page-desc { font-size: 16px; color: #555; line-height: 1.6; margin-bottom: 30px; }

/* Thanh Filter & Sort */
.toolbar { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #eaeaea; border-bottom: 1px solid #eaeaea; padding: 15px 0; margin-bottom: 40px; }
.filter-btn { background: #fff; border: 2px solid #222; padding: 8px 25px; font-size: 14px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 10px; transition: 0.3s; }
.filter-btn:hover { background: #222; color: #fff; }
.sort-select { padding: 8px 15px; border: 1px solid #ccc; border-radius: 4px; font-size: 14px; font-family: 'Quicksand', sans-serif; color: #222; min-width: 200px; font-weight: 600; }

/* ================= RESPONSIVE HOÀN CHỈNH ================= */
@media (max-width: 1024px) {
    .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
    .product-card-container { margin-top: 0 !important; } 
    .product-card-container:nth-child(3n+2) { margin-top: 50px !important; } 
}

@media (max-width: 768px) {
    .category-section { padding: 40px 15px !important; }
    .menu-grid { gap: 20px !important; }
    .products-section { padding: 20px 15px 40px !important; width: 100%; }
    .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 15px !important; width: 100%; align-items: start !important; }
    
    .product-card-container { margin-top: 0 !important; } 
    .product-card-container:nth-child(even) { margin-top: 40px !important; }
    
    .seo-accordion-container { padding: 0 15px !important; }
    .seo-main-title { font-size: 24px !important; }
    .seo-accordion-header { padding: 15px !important; }
    .seo-acc-num { font-size: 22px !important; margin-right: 15px !important; min-width: 30px !important; }
    .seo-acc-title { font-size: 16px !important; }
    .seo-accordion-content p { padding: 0 15px 10px 60px !important; font-size: 14.5px !important; }
    .seo-accordion-content p:last-child { padding-bottom: 20px !important; }
    
    /* Responsive cho Accessories */
    .page-header { padding: 0 15px; margin-top: 20px; }
    .page-title { font-size: 24px; }
    .page-desc { font-size: 14.5px; }
    .toolbar { flex-direction: column; gap: 15px; align-items: stretch; }
    .sort-select { width: 100%; }
}
/* --- Fix text mô tả bị over màn hình --- */
.category-desc {
    max-width: 1000px;
    margin: 0 auto;
    font-size: 15.5px;
    color: #555;
    line-height: 1.6;
    padding: 0 15px;
}