/**
 * Phusa inner page layout — nền, khoảng cách, tiêu đề thống nhất mọi trang nội dung.
 */

/* ===== Page shell ===== */
.page-wrapper {
    position: relative;
    width: 100%;
    margin-top: -85px;
    padding-top: 85px;
    padding-bottom: 0;
    box-sizing: border-box;
    background-color: #eef4fb;
    background-image: linear-gradient(180deg, #f0f6fc 0%, #eef4fb 72%, #cfdeff 100%);
    background-attachment: fixed;
    background-size: 100% 100vh;
    background-repeat: no-repeat;
}

@media (max-width: 1200px) {
    .page-wrapper {
        margin-top: -95px;
        padding-top: 95px;
    }
}

@media (max-width: 768px) {
    .page-wrapper {
        padding-top: 102px;
    }

    .page-wrapper .page-breadcrumb,
    .main-wrapper .page-breadcrumb.background {
        position: relative;
        z-index: 3;
        margin-top: 10px !important;
        margin-bottom: 8px !important;
        padding: 0 !important;
        min-height: 0;
    }

    .page-wrapper .page-breadcrumb .uk-container,
    .main-wrapper .page-breadcrumb.background .uk-container,
    .page-wrapper [class*='-catalogue-body'].uk-container {
        padding-left: 25px;
        padding-right: 25px;
    }

    .page-wrapper .page-breadcrumb + .uk-container,
    .page-wrapper .page-breadcrumb + [class*='-catalogue-body'],
    .page-wrapper .page-breadcrumb + .page-agency,
    .page-wrapper .page-breadcrumb + [class*='-detail-body'] {
        position: relative;
        z-index: 1;
        clear: both;
    }
}

@media (max-width: 480px) {
    .page-wrapper {
        margin-top: -88px;
        padding-top: 88px;
    }
}

@media (max-width: 360px) {
    .page-wrapper {
        margin-top: -80px;
        padding-top: 80px;
    }
}

.page-wrapper::before,
.page-wrapper::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

.page-wrapper::before {
    width: 480px;
    height: 480px;
    top: -160px;
    right: -100px;
    background: radial-gradient(circle, rgba(114, 172, 214, 0.2) 0%, rgba(114, 172, 214, 0) 70%);
}

.page-wrapper::after {
    width: 360px;
    height: 360px;
    bottom: 120px;
    left: -80px;
    background: radial-gradient(circle, rgba(0, 49, 154, 0.07) 0%, rgba(0, 49, 154, 0) 70%);
}

/* Ghi đè margin thừa từ phusa-header.css / responsive.css */
.page-wrapper .page-breadcrumb,
.main-wrapper .page-breadcrumb.background {
    margin-top: 10px !important;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    background: transparent !important;
    position: relative;
    z-index: 3;
}

.page-wrapper .page-breadcrumb .uk-container,
.main-wrapper .page-breadcrumb.background .uk-container {
    margin-top: 0 !important;
}

.page-wrapper .page-breadcrumb li:not(:last-child)::before,
.main-wrapper .page-breadcrumb.background li:not(:last-child)::before {
    color: #000 !important;
}

.page-wrapper > .uk-container,
.page-wrapper .uk-container-center,
.page-wrapper .panel-body,
.page-wrapper [class*='-catalogue-body'],
.page-wrapper [class*='-detail-body'],
.page-wrapper [class*='-area-body'] {
    margin-top: 0 !important;
    padding-top: 0;
}

.page-wrapper .panel-body > .uk-grid,
.page-wrapper .panel-body > .uk-grid-medium {
    align-items: flex-start;
}

.page-wrapper .panel-body > .uk-grid > [class*='uk-width-'],
.page-wrapper .panel-body > .uk-grid-medium > [class*='uk-width-'] {
    align-self: flex-start;
}

.page-wrapper .uk-container,
.page-wrapper [class*='-catalogue-body'].uk-container {
    position: relative;
    z-index: 1;
    padding-bottom: 32px;
}

.main-wrapper .page-agency .uk-container-center,
.main-wrapper .panel-agency,
.main-wrapper .cart-container > .uk-container-center,
.main-wrapper .distribution-page.page-wrapper .page-agency,
.main-wrapper .distribution-page.page-wrapper .panel-agency {
    margin-top: 0 !important;
}

/* ===== White content card ===== */
.page-content-card,
.post-main,
.product-catalogue-main {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 14px;
    padding: 22px 22px 18px;
    box-shadow: 0 8px 32px rgba(0, 49, 154, 0.07);
}

/* ===== List page header (title | sort, count) ===== */
.page-list-header,
.post-main-header,
.product-catalogue-main-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 20px;
}

.page-list-title,
.post-main-title,
.product-catalogue-main-title {
    margin-bottom: 0;
    width: 100%;
    text-align: left !important;
}

.page-list-title > *,
.post-main-title > *,
.product-catalogue-main-title > * {
    text-align: left !important;
    font-size: 22px;
    line-height: 1.3;
}

@media (max-width: 768px) {
    .page-list-title > *,
    .post-main-title > *,
    .product-catalogue-main-title > * {
        font-size: 18px;
    }
}

.page-list-count,
.post-main-count,
.product-catalogue-main-count {
    margin: 0;
    font-size: 13px;
    color: #64748b;
    width: 100%;
    text-align: left;
}

.page-list-toolbar,
.post-main-header-toolbar,
.product-catalogue-main-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.page-sort-form,
.post-sort-form {
    flex: 1;
    min-width: 0;
}

.page-sort-select,
.post-sort-select,
.product-catalogue-sort-select {
    width: 100%;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 13px;
    color: #334155;
    background: #fff;
    min-width: 0;
    cursor: pointer;
}

.product-catalogue-sort-select {
    flex: 1;
}

@media (min-width: 768px) {
    .page-list-header,
    .post-main-header,
    .product-catalogue-main-header {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto;
        column-gap: 12px;
        row-gap: 4px;
        align-items: center;
    }

    .page-list-title,
    .post-main-title,
    .product-catalogue-main-title {
        grid-column: 1;
        grid-row: 1;
        justify-self: start;
    }

    .page-list-toolbar,
    .post-main-header-toolbar,
    .product-catalogue-main-toolbar {
        grid-column: 2;
        grid-row: 1;
        width: auto;
        justify-self: end;
        justify-content: flex-end;
    }

    .page-list-count,
    .post-main-count,
    .product-catalogue-main-count {
        grid-column: 1;
        grid-row: 2;
        justify-self: start;
    }

    .page-sort-form,
    .post-sort-form {
        flex: none;
    }

    .page-sort-select,
    .post-sort-select,
    .product-catalogue-sort-select {
        width: auto;
        min-width: 140px;
    }

    .product-catalogue-sort-select {
        min-width: 180px;
        flex: none;
    }
}

/* Tiêu đề section căn trái trong trang nội dung */
.page-wrapper .heading-1,
.page-wrapper .heading-2,
.page-wrapper .heading-3,
.page-wrapper .cart-heading,
.page-wrapper .panel-head .heading,
.customer-area-page .heading-1,
.customer-area-page .heading-2,
.customer-area-page .cart-heading {
    text-align: left !important;
}

.page-wrapper .heading-1 > *,
.page-wrapper .heading-2 > *,
.page-wrapper .heading-3 > *,
.page-wrapper .cart-heading > *,
.page-wrapper .panel-head .heading,
.customer-area-page .heading-1 > *,
.customer-area-page .heading-2 > *,
.customer-area-page .cart-heading > * {
    text-align: left !important;
}

.page-wrapper .forum-wrap {
    margin-top: 0 !important;
}

/* ===== Hiệu ứng tương tác (breadcrumb, sidebar, card, toolbar) ===== */
.page-wrapper .page-breadcrumb li > a,
.main-wrapper .page-breadcrumb.background li > a {
    transition: color 0.15s ease;
}

.page-wrapper .page-breadcrumb li > a:hover,
.main-wrapper .page-breadcrumb.background li > a:hover {
    color: #00319a !important;
    text-decoration: underline;
}

/* ===== Category tree — đồng bộ sidebar bài viết + sản phẩm ===== */
/* Không gắn .page-wrapper: drawer mobile được portal ra body */
.category-tree,
.post-category-tree {
    list-style: none;
    padding: 0;
    margin: 0;
}

.category-tree .category-item,
.post-category-tree .category-item {
    margin: 0;
    padding: 0;
    list-style: none;
    position: relative;
}

.category-tree .category-link-wrapper,
.post-category-tree .category-link-wrapper {
    display: flex;
    align-items: center;
    gap: 4px;
    position: relative;
}

.category-tree .category-link,
.post-category-tree .category-link,
.post-category-tree .post-category-link {
    flex: 1;
    min-width: 0;
    display: block;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 14px;
    line-height: 1.4;
    color: #334155;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.category-tree .category-level-1 > .category-link-wrapper > .category-link,
.post-category-tree .category-level-1 > .category-link-wrapper > .category-link,
.post-category-tree .category-level-1 > .category-link-wrapper > .post-category-link {
    font-weight: 600;
    color: #0d0c55;
}

.category-tree .category-link:hover,
.category-tree .category-item.is-active > .category-link-wrapper > .category-link,
.post-category-tree .post-category-link:hover,
.post-category-tree .category-item.is-active > .category-link-wrapper > .post-category-link,
.post-category-tree .category-item.is-active > .category-link-wrapper > .category-link {
    background: #f0f5ff;
    color: #00319a;
    font-weight: 600;
}

.category-tree .category-children,
.post-category-tree .category-children,
.post-category-tree .post-category-children {
    list-style: none;
    padding: 0;
    margin: 2px 0 4px 16px;
}

.category-tree .category-toggle,
.post-category-tree .category-toggle {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #fff;
    color: #64748b;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.category-tree .category-toggle i,
.post-category-tree .category-toggle i {
    font-size: 11px;
    transition: transform 0.2s ease;
}

.category-tree .category-toggle:hover,
.category-tree .category-toggle:focus-visible,
.post-category-tree .category-toggle:hover,
.post-category-tree .category-toggle:focus-visible {
    background: #f0f5ff;
    color: #00319a;
    outline: none;
}

.category-tree .category-item.is-expanded > .category-link-wrapper .category-toggle,
.category-tree .category-hover-item.is-expanded > .category-hover-row .category-toggle,
.post-category-tree .category-item.is-expanded > .category-link-wrapper .category-toggle {
    color: #00319a;
    border-color: #c7d8f5;
    background: #f0f5ff;
}

.category-tree .category-item.is-expanded > .category-link-wrapper .category-toggle i,
.category-tree .category-hover-item.is-expanded > .category-hover-row .category-toggle i,
.post-category-tree .category-item.is-expanded > .category-link-wrapper .category-toggle i {
    transform: rotate(180deg);
}

@media (max-width: 767px) {
    .category-tree .category-link,
    .post-category-tree .category-link,
    .post-category-tree .post-category-link {
        font-size: 13px;
        padding: 7px 10px;
    }

    .category-tree .category-children,
    .post-category-tree .category-children,
    .post-category-tree .post-category-children {
        margin: 4px 0 6px;
        padding: 0 0 0 14px;
        border-left: 2px solid #e2e8f0;
    }

    .category-tree .category-toggle,
    .post-category-tree .category-toggle {
        display: inline-flex;
    }

    /* Cấp 1: không mũi tên, luôn hiện con */
    .category-tree .category-item.category-level-1 > .category-link-wrapper .category-toggle,
    .post-category-tree .category-item.category-level-1 > .category-link-wrapper .category-toggle {
        display: none !important;
    }

    .category-tree .category-item.category-level-1 > .category-children,
    .post-category-tree .category-item.category-level-1 > .category-children {
        display: block;
    }

    .post-category-tree .category-item.has-children > .category-children {
        display: none;
    }

    .post-category-tree .category-item.has-children.is-expanded > .category-children {
        display: block;
    }
}

.category-tree .category-hover-link,
.category-tree .category-hover-sublink {
    transition: background-color 0.15s ease, color 0.15s ease;
}

.category-tree .category-hover-link:hover,
.category-tree .category-hover-sublink:hover {
    background: #f0f5ff;
    color: #00319a;
}

.page-wrapper .product-list .product-item {
    padding-top: 0;
    background: #fff;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.page-wrapper .product-list .product-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 49, 154, 0.12);
}

.page-wrapper .product-list .product-item .image img,
.page-wrapper .product-list .product-item a.image img {
    transition: transform 0.3s ease;
}

.page-wrapper .product-list .product-item:hover .image:not(.image--placeholder) img,
.page-wrapper .product-list .product-item:hover a.image:not(.image--placeholder) img {
    transform: scale(1.05);
}

.page-wrapper .product-list .product-item .title > * {
    transition: color 0.15s ease;
}

.page-wrapper .product-list .product-item .title > *:hover {
    color: #00319a;
}

.page-wrapper .post-item-readmore {
    transition: color 0.15s ease;
}

.page-wrapper .post-item-readmore:hover {
    color: #f4763e;
}

.page-wrapper .post-item-readmore i {
    display: inline-block;
    transition: transform 0.15s ease;
}

.page-wrapper .post-item-readmore:hover i {
    transform: translateX(3px);
}

.page-wrapper .page-sort-select,
.page-wrapper .post-sort-select,
.page-wrapper .product-catalogue-sort-select {
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.page-wrapper .page-sort-select:hover,
.page-wrapper .post-sort-select:hover,
.page-wrapper .product-catalogue-sort-select:hover {
    border-color: #94a3b8;
}

.page-wrapper .page-sort-select:focus,
.page-wrapper .post-sort-select:focus,
.page-wrapper .product-catalogue-sort-select:focus {
    outline: none;
    border-color: #00319a;
    box-shadow: 0 0 0 2px rgba(0, 49, 154, 0.12);
}

.page-wrapper .post-search-btn,
.page-wrapper .product-search-btn {
    transition: background-color 0.15s ease, transform 0.15s ease;
}

.page-wrapper .post-search-btn:hover,
.page-wrapper .product-search-btn:hover {
    background: #1a4fad;
}

.page-wrapper .post-search-clear {
    transition: color 0.15s ease;
}

.page-wrapper .post-search-clear:hover {
    color: #f4763e;
}

.page-wrapper .post-mobile-sidebar-btn,
.page-wrapper .product-mobile-filter-btn {
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.page-wrapper .post-mobile-sidebar-btn:hover,
.page-wrapper .product-mobile-filter-btn:hover {
    background: #f0f5ff;
    border-color: #00319a;
    color: #00319a;
}

.page-wrapper .aside-featured-item,
.page-wrapper .aside-post-featured-item {
    transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.page-wrapper .aside-featured-item:hover,
.page-wrapper .aside-post-featured-item:hover {
    border-color: #00319a;
    background: #f7faff;
    transform: translateX(2px);
    box-shadow: 0 4px 12px rgba(0, 49, 154, 0.1);
}

.page-wrapper .aside-featured-item:hover .aside-featured-name,
.page-wrapper .aside-post-featured-item:hover .aside-post-featured-name {
    color: #00319a;
}

.page-wrapper .aside-featured-item:hover .aside-featured-arrow,
.page-wrapper .aside-post-featured-item:hover .aside-post-featured-arrow {
    color: #00319a;
    transform: translateX(2px);
}