/*
 * CSS riêng cho plugin "Phan Đình - Sản Phẩm".
 * Mọi rule đóng khung trong .pdp-shop-scope để KHÔNG rò rỉ ra ảnh hưởng phần
 * còn lại của site (menu/footer/widget của theme đang active, dù là Flatsome
 * hay theme bất kỳ) - và ngược lại, không bị theme khác ghi đè do trùng tên
 * class phổ biến (.btn, .container, .section...).
 */

.pdp-shop-scope {
    --primary-color:    #0b3d91;
    --primary-light:    #1652b5;
    --secondary-color:  #d63638;
    --text-color:       #1a1a1a;
    --text-muted:       #555555;
    --text-light:       #888888;
    --bg-color:         #ffffff;
    --bg-gray:          #f5f7fa;
    --bg-card:          #ffffff;
    --gray-border:      #e0e0e0;
    --shadow-sm:        0 1px 3px rgba(0,0,0,0.1);
    --shadow-md:        0 2px 8px rgba(0,0,0,0.12);
    --shadow-lg:        0 4px 16px rgba(0,0,0,0.15);
    --shadow-xl:        0 8px 32px rgba(0,0,0,0.18);
    --border-radius:    4px;
    --border-radius-lg: 8px;
    --transition:       all 0.3s ease;
    --transition-fast:  all 0.15s ease;

    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 16px;
    line-height: 1.7;
    color: var(--text-color);
}

.pdp-shop-scope *, .pdp-shop-scope *::before, .pdp-shop-scope *::after {
    box-sizing: border-box;
}

.pdp-shop-scope img { max-width: 100%; height: auto; display: block; }

.pdp-shop-scope a { color: var(--primary-color); text-decoration: none; transition: var(--transition-fast); }
.pdp-shop-scope a:hover { color: var(--primary-light); }

.pdp-shop-scope h1, .pdp-shop-scope h2, .pdp-shop-scope h3,
.pdp-shop-scope h4, .pdp-shop-scope h5, .pdp-shop-scope h6 {
    line-height: 1.3;
    font-weight: 700;
    color: var(--text-color);
}

.pdp-shop-scope p { margin-bottom: 1rem; }
.pdp-shop-scope p:last-child { margin-bottom: 0; }

/*
 * QUAN TRỌNG: "display" ép !important cho .container/.section vì site đang
 * chạy có 1 rule (từ theme/child-theme đang active) tự ý đặt display:flex
 * cho class ".section" - trùng tên với class của mình - khiến tiêu đề, bộ
 * lọc danh mục, thanh sắp xếp và lưới sản phẩm bị xếp NGANG thay vì xếp dọc
 * (mỗi phần tử co lại theo kiểu flex-item). Ép display:block !important để
 * luôn thắng bất kể theme nào đang chạy hay rule đó nằm ở đâu.
 */
.pdp-shop-scope .container {
    display: block !important;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
.pdp-shop-scope .section { display: block !important; padding: 50px 0; }
.pdp-shop-scope .text-center { text-align: center; }
.pdp-shop-scope .mt-4 { margin-top: 2rem; }
.pdp-shop-scope .mb-4, .pdp-shop-scope .mb-5 { margin-bottom: 2rem; }

.pdp-shop-scope .page-header { margin-bottom: 40px; }
.pdp-shop-scope .section-title {
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 800;
    color: var(--primary-color);
    margin-bottom: 10px;
    line-height: 1.2;
}
.pdp-shop-scope .section-subtitle {
    color: var(--text-muted);
    font-size: 1.02rem;
    max-width: 600px;
    margin: 0 auto;
}

/* ---- Buttons ---- */
.pdp-shop-scope .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: var(--border-radius);
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    transition: var(--transition);
    cursor: pointer;
    border: 2px solid transparent;
    white-space: nowrap;
    line-height: 1.4;
}
.pdp-shop-scope .btn-primary {
    background: var(--primary-color);
    color: #fff !important;
    border-color: var(--primary-color);
    box-shadow: 0 4px 14px rgba(11, 61, 145, 0.3);
}
.pdp-shop-scope .btn-primary:hover {
    background: var(--primary-light);
    border-color: var(--primary-light);
    transform: translateY(-2px);
    color: #fff !important;
}
.pdp-shop-scope .btn-outline {
    background: transparent;
    color: var(--primary-color);
    border-color: var(--primary-color);
}
.pdp-shop-scope .btn-outline:hover { background: var(--primary-color); color: #fff !important; }
.pdp-shop-scope .btn-secondary {
    background: var(--secondary-color);
    color: #fff !important;
    border-color: var(--secondary-color);
}
.pdp-shop-scope .btn-secondary:hover { filter: brightness(0.92); transform: translateY(-2px); }
.pdp-shop-scope .btn-sm { padding: 8px 18px; font-size: 0.9rem; }

/* ---- Product grid/card (dùng ở trang danh mục, cửa hàng, liên quan...) ---- */
.pdp-shop-scope .product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 24px;
}
.pdp-shop-scope .product-card {
    background: var(--bg-card);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    border: 1px solid var(--gray-border);
    display: flex;
    flex-direction: column;
}
.pdp-shop-scope .product-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-xl);
    border-color: rgba(11,61,145,0.15);
}
.pdp-shop-scope .product-thumb img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.pdp-shop-scope .product-card:hover .product-thumb img { transform: scale(1.06); }
.pdp-shop-scope .product-info {
    padding: 18px;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.pdp-shop-scope .product-title {
    font-size: 1.02rem;
    margin-bottom: 8px;
    font-weight: 600;
    line-height: 1.4;
}
.pdp-shop-scope .product-title a { color: var(--text-color); }
.pdp-shop-scope .product-title a:hover { color: var(--primary-color); }
.pdp-shop-scope .product-price {
    font-weight: 700;
    color: var(--secondary-color);
    font-size: 1.05rem;
    margin-top: auto;
}
.pdp-shop-scope .contact-price {
    color: var(--primary-color);
    font-size: 0.92rem;
    font-weight: 600;
}

/* ---- Breadcrumb (dùng ở trang chi tiết) ---- */
.pdp-shop-scope .breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-bottom: 20px;
}
.pdp-shop-scope .breadcrumb a { color: var(--text-muted); }
.pdp-shop-scope .breadcrumb a:hover { color: var(--primary-color); }
.pdp-shop-scope .bc-sep { color: var(--text-light); }

/* ---- Fallback header/footer container spacing ---- */
.pdp-fb-main .container.section,
.pdp-fb-main > .pd-wrap {
    padding-top: 30px;
}