/* ============================================================
    Product Card — thẻ sản phẩm dạng overlay
    Dùng chung bởi khối "Sản phẩm liên quan" trên trang sản phẩm
    và block "Danh sách sản phẩm" chèn trong nội dung Page.
    Tách khỏi product-detail.css vì file đó chỉ nạp khi
    is_singular('product'), còn block thì chạy trên Page.
    ============================================================ */

.product-detail-related {
    display: grid;
    gap: 24px;
}

.product-detail-related-title {
    margin: 0;
    font-size: clamp(1.3rem, 2.2vw, 1.9rem);
    color: var(--text);
}

.product-related-card {
    position: relative;
    display: flex;
    min-height: 260px;

    /* .entry-content dat line-height: 1.85 va no ke thua xuong the khi block
        nam trong noi dung trang Page. Trang san pham khong co lop do, nen
        phai chot lai o day thi hai noi moi bang nhau. */
    line-height: normal;
    overflow: hidden;
    isolation: isolate;
    background: linear-gradient(
        140deg,
        rgba(0, 108, 172, 0.92),
        rgba(9, 46, 78, 0.88)
    );
    border: 1px solid rgba(255, 255, 255, 0.9);
    cursor: pointer;
    transition: transform var(--motion-base) ease;
}

.product-related-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--related-card-image);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    transform: scale(1.01);
    transition: transform var(--motion-slow) ease;
    z-index: -2;
}

.product-related-card:hover::before {
    transform: scale(1.06);
}

.product-related-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(6, 17, 25, 0.22),
        rgba(6, 17, 25, 0.6)
    );
    z-index: -1;
}

.product-related-card-inner {
    position: relative;
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 32px 28px 28px;
    color: #fff;
    text-align: center;
    z-index: 1;
}

/* Tu day tro xuong, moi selector cua phan chu deu duoc them
    .product-related-card o dau. Ly do: block "Danh sach san pham" nam trong
    .entry-content cua trang Page, ma content.css dat `.entry-content ul {
    list-style: initial }` va solution.css dat `.solution-content p, ul {
    color: var(--text-soft) }`. Hai selector do co do uu tien 0,1,1, cao hon
    0,1,0 cua the, nen chu bi doi ra xam va dau cham goc cua trinh duyet hien
    de len dau ::before cua the — thanh ra hai dot. Them mot class nua dua the
    len 0,2,0 de thang lai. */

.product-related-card .product-related-card-highlights {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.88rem;
    line-height: 1.35;
}

.product-related-card .product-related-card-highlights li {
    position: relative;

    /* Khoang cach giua cac dong do `gap` cua <ul> lo, nen margin phai bang 0.
        Neu khong, .solution-content li (margin-bottom: 8px) se cong them. */
    margin: 0;
    padding-left: 14px;
}

.product-related-card .product-related-card-highlights li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.72em;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.88);
    transform: translateY(-50%);
}

.product-related-card .product-related-card-eyebrow {
    margin: 0;

    /* .solution-content p dat line-height 1.85 thang len chinh the <p> nay,
        khong phai qua ke thua, nen chot lai o day moi chan duoc. */
    line-height: normal;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.product-related-card .product-related-card-title {
    margin: 0;
    color: #fff;
    font-size: clamp(1.05rem, 1.6vw, 1.5rem);
    line-height: 1.2;
}

.product-related-card .product-related-card-button {
    display: inline-flex;
    align-items: center;
    padding: 7px 18px;
    border: 1.5px solid rgba(255, 255, 255, 0.65);
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition:
        background var(--motion-fast) ease,
        border-color var(--motion-fast) ease,
        color var(--motion-fast) ease;
    margin-top: 4px;
}

.product-related-card:hover .product-related-card-button {
    background: rgba(255, 255, 255, 0.18);
    border-color: #fff;
    color: #fff;
}

.product-related-card-link {
    position: absolute;
    inset: 0;
    z-index: 2;
}

/* ============================================================
    Hàng thẻ cuộn ngang (template-parts/product/card-carousel.php)
    Dùng chung bởi khối "Sản phẩm liên quan" và block "Danh sách
    sản phẩm", nên hai nơi luôn cuộn giống hệt nhau.
    ============================================================ */

.product-carousel {
    /* So the nhin thay tren mot man. Block cho phep doi 2/3/4 tren desktop;
        tablet va mobile bi media query o cuoi file ep ve 2 va 1. */
    --carousel-visible: 3;

    position: relative;
}

.product-carousel-cols-2 {
    --carousel-visible: 2;
}

.product-carousel-cols-4 {
    --carousel-visible: 4;
}

.product-carousel-track {
    display: flex;
    gap: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;

    /* An thanh cuon he thong: da co hai nut mui ten lam tin hieu roi. */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.product-carousel-track::-webkit-scrollbar {
    display: none;
}

.product-carousel-track > .product-related-card {
    flex: 0 0 calc(100% / var(--carousel-visible));
    scroll-snap-align: start;
}

.product-carousel-nav {
    position: absolute;
    top: 50%;

    /* The co isolation: isolate va link ben trong o z-index 2, nhung do the
        khong dat z-index nen chi can mot gia tri duong o day la nut noi len
        tren — khong the bo, vi nut prev dung truoc track trong DOM. */
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    transform: translateY(-50%);
    border: 1px solid rgba(0, 108, 172, 0.18);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.95);
    color: #006cac;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(6, 17, 25, 0.18);
    transition:
        background var(--motion-fast) ease,
        border-color var(--motion-fast) ease,
        color var(--motion-fast) ease;
}

/* Can thiet vi display: flex o tren de bep thuoc tinh hidden cua HTML. */
.product-carousel-nav[hidden] {
    display: none;
}

.product-carousel-nav-prev {
    left: 10px;
}

.product-carousel-nav-next {
    right: 10px;
}

.product-carousel-nav:hover,
.product-carousel-nav:focus-visible {
    background: #006cac;
    border-color: #006cac;
    color: #fff;
}

.product-carousel-nav svg {
    width: 18px;
    height: 18px;
}

@media (max-width: 860px) {
    .product-carousel,
    .product-carousel-cols-2,
    .product-carousel-cols-4 {
        --carousel-visible: 2;
    }
}

@media (max-width: 560px) {
    .product-carousel,
    .product-carousel-cols-2,
    .product-carousel-cols-4 {
        --carousel-visible: 1;
    }

    .product-carousel-nav {
        width: 38px;
        height: 38px;
    }
}

/* ============================================================
    Block "Danh sách sản phẩm" (inc/blocks/product-list.php)
    ============================================================ */

.pt-product-list {
    margin: 32px 0;
}

/* Selector hai class (0,2,0) de thang `.solution-content h2` (0,1,1) trong
    solution.css — cung ly do da bump specificity cho cac selector cua card. */
.pt-product-list .pt-product-list-heading {
    margin: 0 0 16px;
    color: var(--text);
    font-size: clamp(1.2rem, 2.2vw, 1.6rem);
    line-height: 1.3;
}