@import "../hero-section/assets/styles.css";
@import "../featured-section/assets/styles.css";
@import "../list-section/assets/styles.css";

:root {
   /* Colors */
   --color-primary: #680103;
   --color-primary-light: rgba(104, 1, 3, 0.04);
   --color-on-primary: #f7f4ec; /* Chữ trên nền đỏ */
   --color-text-main: #1d1d1d;
   --color-text-muted: rgba(29, 29, 29, 0.4);
   --color-white: #ffffff;
   --shadow-light: 0px 0px 30px rgba(0, 0, 0, 0.12);
   --font-main: "SF Pro Display", -apple-system, BlinkMacSystemFont, sans-serif;
}

main {
    background: #f7f4ec;
    position: relative;
    background-image: url(/wp-content/uploads/2026/04/Chi-tiet-san-pham.webp);
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.img-zoom-on-hover img.zoom-image {
   transition: all 400ms cubic-bezier(0.4, -0.01, 0, 1);
}

@media (min-width: 1024px) {
    .img-zoom-on-hover:hover img.zoom-image {
        transform: scale(1.1);
    }
}

.btn-hover-gradient {
    overflow: hidden;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6.25rem;
    background: #FFF;
    box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.12);
}

.btn-hover-gradient::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(
        50% 169.61% at 50% 50%,
        #cb5140 46.54%,
        #d8a061 91.01%
    );

    opacity: 0;
    transition: opacity 400ms cubic-bezier(0.41, 0.02, 0, 1.01);
}

.btn-hover-gradient:hover::before {
    opacity: 1;
}

.btn-hover-gradient svg {
    position: relative;
    transition: opacity 400ms cubic-bezier(0.41, 0.02, 0, 1.01);
    width: 1.25rem;
    height: 1.25rem;
}

.btn-hover-gradient:hover svg path {
    fill: #ffffff !important;
    stroke: #ffffff !important;
}

.category-filter__list {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    white-space: nowrap;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.category-filter__list::-webkit-scrollbar {
    display: none;
}

@media (max-width: 638px) {
    main {
        background-image: url(/wp-content/uploads/2026/04/MB-Chi-tiet-bai-viet.webp);
    }
}