/* ============================================================================
 * page-frame.css — "Vỏ trang" DÙNG CHUNG, đồng bộ kiểu vùng Cửa hàng:
 *   • nền trang tông xám-xanh nhạt (#f4f6f8)
 *   • dải header gradient (breadcrumb + tiêu đề + mô tả) có điểm nhấn đỏ
 *   • khung thẻ trắng nổi bọc nội dung chính
 * Tái sử dụng cho: Giỏ hàng, Thanh toán, Liên hệ, Blog/Tin tức & Sự Kiện, Chi tiết SP...
 * (CLAUDE.md 6.5 — CSS tái sử dụng). Responsive đầy đủ (6.4).
 * ========================================================================== */

/* Nền chung của trang */
.oe-page { background: #f4f6f8; }

/* ---- Dải header (gradient) -------------------------------------------- */
.oe-page-head {
    position: relative;
    overflow: hidden;
    padding: 20px 0 34px;
    background: linear-gradient(135deg, #f6f8fb 0%, #eceff4 100%);
}
/* Quầng màu thương hiệu mờ ở CẢ hai bên (trái + phải) cho cân đối, tạo chiều sâu (trang trí). */
.oe-page-head::after,
.oe-page-head::before {
    content: "";
    position: absolute;
    top: -110px;
    width: 320px; height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(228, 0, 43, .07), transparent 70%);
    pointer-events: none;
    z-index: 0;
}
.oe-page-head::after { right: -90px; }
.oe-page-head::before { left: -90px; }
.oe-page-head .container { position: relative; z-index: 1; }

/* Breadcrumb trong dải header */
.oe-page-head .pd-breadcrumb-list { text-align: left; }
.oe-page-head .pd-breadcrumb-list span,
.oe-page-head .pd-breadcrumb-list a { font-size: 13px; color: #8a8a8a; }
.oe-page-head .pd-breadcrumb-list a:hover { color: #111; }

/* Tiêu đề + mô tả */
.oe-page-title {
    position: relative;
    margin: 16px 0 0;
    padding-bottom: 14px;
    font-size: clamp(26px, 3.6vw, 40px);
    font-weight: 800;
    color: #111;
    letter-spacing: -.7px;
    line-height: 1.1;
}
.oe-page-title::after {
    content: "";
    position: absolute; left: 0; bottom: 0;
    width: 52px; height: 3px;
    border-radius: 999px;
    background: #e11d2a;
}
.oe-page-sub { color: #6b7280; margin: 12px 0 0; max-width: 640px; font-size: 15px; line-height: 1.65; }

/* Biến thể MẢNH: dùng khi dải header chỉ có breadcrumb (trang đã có h1 riêng ở dưới). */
.oe-page-head--slim { padding-top: 16px; padding-bottom: 16px; }

/* ---- Thân trang + khung thẻ ------------------------------------------- */
.oe-page-body { padding: 40px 0 80px; }
.oe-page-card {
    background: #fff;
    border: 1px solid #e7eaee;
    border-radius: 20px;
    padding: 24px 28px 28px;
    box-shadow: 0 10px 30px rgba(17, 17, 17, .05);
}

@media (max-width: 991px) {
    .oe-page-card { padding: 20px; border-radius: 16px; }
    .oe-page-body { padding: 32px 0 64px; }
}
@media (max-width: 575px) {
    .oe-page-head { padding-bottom: 26px; }
    .oe-page-card { padding: 16px 14px 20px; }
}