/* =========================================================
 *  Điều chỉnh theo phản hồi khách FB04 (23/10/2026)
 *  Mỗi mục khoá theo class body của đúng trang + đúng thiết bị
 *  (mobile: max-width 849px, PC: min-width 850px) để không ảnh hưởng
 *  trang/thiết bị khác. Nạp sau fb03-feedback.css.
 * ========================================================= */

/* ---------- Về chúng tôi (MOBILE) ---------- */
@media (max-width: 849px) {
    /* Khoảng cách với hình nhân viên bên dưới (đè margin -3.4rem của fb03) */
    .page-template-templatesabout-php section.about10 .title_section {
        position: relative;
        z-index: 2;
        margin-bottom: 1.25rem;
    }

    /* Chữ đậm 0–42%, mờ dần mượt đến trong suốt ở 92% */
    .page-template-templatesabout-php section.about10 .title_section svg {
        -webkit-mask-image: linear-gradient(to bottom,
            #000 0%, #000 42%,
            rgba(0,0,0,.93) 50%, rgba(0,0,0,.78) 58%, rgba(0,0,0,.56) 66%,
            rgba(0,0,0,.34) 74%, rgba(0,0,0,.16) 81%, rgba(0,0,0,.05) 87%,
            rgba(0,0,0,0) 92%);
                mask-image: linear-gradient(to bottom,
            #000 0%, #000 42%,
            rgba(0,0,0,.93) 50%, rgba(0,0,0,.78) 58%, rgba(0,0,0,.56) 66%,
            rgba(0,0,0,.34) 74%, rgba(0,0,0,.16) 81%, rgba(0,0,0,.05) 87%,
            rgba(0,0,0,0) 92%);
    }

    /* Màu chữ theo màu thương hiệu */
    .page-template-templatesabout-php #about10_fill_grad stop:nth-child(1) { stop-color: var(--sub-cl); }
    .page-template-templatesabout-php #about10_fill_grad stop:nth-child(2) { stop-color: #067EC6; }
    .page-template-templatesabout-php #about10_fill_grad stop:nth-child(3) { stop-color: var(--main-cl); }
}

/* ---------- Trang chủ (PC) — section "Câu chuyện thương hiệu" ---------- */
@media (min-width: 850px) {
    /* Khoảng cách phía trên cụm tiêu đề */
    .home section.home-3 { padding-top: 1.5rem; }

    /* Layout tablet: khoảng cách dưới dòng mô tả */
    .home section.home-3 .home-content-3 { padding-top: 0.9375rem; }

    /* Layout desktop (khối cuộn ngang): nội dung bám lên trên thay vì căn giữa */
    .home section.home-3 .scroll_layout_wrap {
        align-items: flex-start;
        padding-top: calc(9vw + 1.25rem);
    }
}

/* ---------- Danh mục sản phẩm (PC) ---------- */
@media (min-width: 850px) {
    .tax-product-category .container-product-list > .inner-list {
        margin-top: 2rem;   /* cũ: chưa đặt */
        row-gap: 2rem;      /* cũ: 0.5rem */
    }
    .tax-product-category .product_box .box_img {
        margin-bottom: -0.5rem; /* cũ: 0.5rem */
    }
}

/* ---------- Danh mục sản phẩm (MOBILE): chạm vào ảnh bị thu nhỏ ----------
 * Trên cảm ứng, chạm = :hover -> ảnh chính mờ đi, ảnh hover (background-size
 * 60%) hiện lên nên trông như ảnh bị zoom nhỏ. Mobile không có rê chuột nên
 * giữ nguyên ảnh chính, không đổi ảnh khi chạm. */
@media (max-width: 849px) {
    .tax-product-category .product_box:hover .box_img img {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    .tax-product-category .product_box .hover-img { display: none; }
}

/* ---------- Chi tiết sản phẩm (PC): sản phẩm liên quan đứng trên kệ ----------
 * Theo mẫu khách gửi: hộp cao bằng nhau, đáy hộp nằm trên mặt kệ (không lơ lửng,
 * không lọt xuống), tên sản phẩm sát ngay dưới kệ (giữ hiệu ứng cũ: hover mới hiện).
 * Kệ (ảnh nền) cố định chiều cao theo rem để khớp với hộp ở mọi màn hình:
 * mặt trên kệ ≈ 60% chiều cao ảnh (~1.33rem); đặt kệ sao cho chân hộp nằm gọn
 * trong mặt kệ (~70% chiều sâu), không chạm mép sau hay mép trước. */
@media (min-width: 850px) {
    .single-product .pd-variants-swiper {
        background-position: center top 4.65rem;
        background-size: 100% 2.2rem;
    }
    .single-product .pd-variant-img {
        width: 8rem;
        height: 6rem;
        align-items: flex-end;
        border-radius: 0;
        margin-bottom: 0;
        overflow: visible;
    }
    .single-product .pd-variant-img img {
        width: auto;
        height: 100%;
        max-width: 100%;
        object-fit: contain;
        object-position: center bottom;
    }
    .single-product .pd-variant-title {
        margin-top: 1.3rem; /* phần kệ còn lại dưới đáy hộp + khoảng hở nhỏ */
        font-size: 0.85rem;
        color: #034EA2;
    }
}

/* ---------- Thẻ bài blog (mọi khu vực, PC + mobile) ----------
 * Thống nhất: tiêu đề 2 dòng, mô tả 3 dòng. Đè các limit-4 trong
 * item-post.php và các -webkit-line-clamp theo breakpoint của frontend.css.
 * min-height giữ đúng 2 dòng để các thẻ trong slider vẫn thẳng hàng. */
.post-item .cont-wrap .title,
.post-item-2 .title,
.home-blog .item-large .title {
    -webkit-line-clamp: 2 !important;
}
.post-item .cont-wrap .title,
.search-tabs .post-item .title {
    min-height: 2lh !important;
}
.post-item .desc,
.post-item-2 .desc {
    -webkit-line-clamp: 3 !important;
}

/* ---------- Header 2 (PC) — logo, search, nút ngôn ngữ nhỏ đi 10% ---------- */
@media (min-width: 850px) {
    #header-2 .header2-logo img { height: 2.7rem; }   /* 3rem × 0.9 */
    #header-2 .header2-action .box-search,
    #header-2 .lang-switch { zoom: 0.9; }
}