/* =========================================================
 *  Điều chỉnh theo phản hồi khách FB03 (13/10/2026).
 *  File riêng, enqueue sau cùng — KHÔNG sửa frontend.css.
 *  Web dùng 1rem = 20px (desktop), 16px (mobile).
 * ========================================================= */

/* ---------- Header 2 (PC): nút ngôn ngữ bị ẩn + ô tìm kiếm lệch hàng ---------- */
#header-2 .lang-switch {
    background: #034EA21A;
    border-color: rgb(16 62 96 / 0.45);
}
#header-2 .switch-label > span {
    color: var(--main-cl);
}
#header-2 .switch-icon img {
    border-color: var(--main-cl);
}
#header-2 .header2-action .box-search {
    display: flex;
    align-items: center;
    line-height: 0;
}

/* ---------- Danh mục sản phẩm: tên danh mục + tên SP cùng màu/độ đậm/font ---------- */
.product_box .box_content .cat {
    font-family: 'Momo Trust Display';
    font-weight: 400;
    /*color: #09AEEA;*/
    font-size: 0.8em;
}
.product_box .box_content h3 {
    font-family: 'Momo Trust Display';
    font-weight: 400;
    color: #034EA2;
}

/* ---------- Blog: bo góc card 1.625rem, tag dạng chữ như menu danh mục SP ---------- */
.post-item-2 > .inner,
.post-item > .inner {
    border-radius: 1.625rem;
}
.post-footer .tags-wrap ul {
    gap: 0.4rem 1.6rem;
}
.post-footer .tags-wrap ul a {
    border: none !important;
    border-radius: 0 !important;
    background: none !important;
    padding: 0 !important;
    font-family: 'Momo Trust Display';
    color: #034EA2;
    transition: color .3s;
}
.post-footer .tags-wrap ul a:hover {
    color: #09AEEA;
}

/* ---------- Dấu "+" cạnh số: thống nhất đặt bên dưới (giống "01+") ---------- */
.about1_item .number .don_vi.is-plus,
.about3_item .title .don_vi.is-plus,
.office1_item .number .don_vi.is-plus {
    font-size: 0.55em;
    line-height: 1;
    align-self: flex-end;
    margin-left: 0.05em;
    padding-bottom: 0.08em;
    white-space: nowrap;
}
.about3_item .title .don_vi.is-plus {
    margin-left: -0.3rem;
}
.office1_item .number .don_vi.is-plus {
    font-size: 0.75em;
}
.office1_item .number:has(.don_vi.is-plus) {
    display: flex;
    align-items: flex-end;
}

/* Trang chủ: tiêu đề "Nhãn hiệu Interbos" gắn link xem tất cả sản phẩm */
.title-home-5 .title-sec a { color: inherit; }
.title-home-5 .title-sec a:hover { color: #09AEEA; }

/* =================== DESKTOP =================== */
@media (min-width: 850px) {
    /* Trang chủ: section "Câu chuyện thương hiệu" — rút 1/2, chữ nằm giữa 2 khoảng trống */
    .home-1 { padding-bottom: 1.5rem; }
    .home-3 { padding-top: 1rem; }

    /* "Nhãn hiệu Interbos" — rút 1/2, bỏ nút "Tất cả sản phẩm" */
    .home-5 { padding-top: 3.4rem; padding-bottom: 0; }

    /* Về chúng tôi: rút khoảng cách còn 1/2 */
    section.about-banner + section.about1 .about1_items { margin-top: 1rem; }
    /* Khối icon 20+/20 năm/1000+ -> "Hành trình thương hiệu": ảnh giọt sữa kéo lên 1/2 */
    section.about1 .row { position: relative; z-index: 2; }
    section.about1 .about1_nen { margin-top: -9.8rem; position: relative; z-index: 1; }
    /* Ảnh toà nhà -> "5.000m2 / Nhà máy hiện đại": rút 1/2 */
    section.about3 { margin-top: -4rem; z-index: 2; }
    section.about3 { padding-bottom: 2rem; }
    section.about4 { padding-top: 2rem; padding-bottom: 4rem; }
    section.about5 { padding-top: 2rem; padding-bottom: 3.5rem; }
    section.about6 { padding-top: 2rem; }
    section.about7 { padding-top: 3rem; padding-bottom: 2.5rem; }
    section.about8 { padding-top: 2rem; }
    section.about5 h2.title-sec.mb-0,
    section.about6 h2.title-sec.mb-0 { padding-top: 1.5rem; }
    section.about5 h2.title-sec.mb-0:before,
    section.about6 h2.title-sec.mb-0:before,
    section.about7 h2.title-sec.mb-0:before { height: 5.5rem; }
    /* Đối tác công nghệ: nằm giữa 2 khoảng trắng */
    section.about13 { padding-top: 3.1rem; }
    .page-template-about footer { margin-top: 2.4rem; }

    /* Chi tiết sản phẩm: khoảng cách khối trên -> "Mô tả sản phẩm" còn 1/3 */
    .pd-detail_top { padding-bottom: 2.3rem; }
    .pd-detail_top:before { height: 8rem; }
}

@media (min-width: 1200px) {
    /* Câu chuyện thương hiệu -> Khởi nguồn: kéo khối cuộn ngang lên */
    .home-3 .title-home-3 {
        position: relative;
        z-index: 3;
    }
    .home-3 .scroll_horizon_wrap { margin-top: -9rem; }

    /* Slogan -> thanh "Scroll ngang" -> Chứng nhận: rút 1/2 */
    .home-3 .manual-scroll-wrap { padding-bottom: 5.2rem; }
    .home-4 {
        margin-top: -4.65rem;
        position: relative;
        z-index: 3;
    }

    /* Bản đồ trang chủ: to lại theo tỉ lệ bản thiết kế ban đầu */
    .home-6 .box-mapping .inner > img {
        width: 33.5rem;
        max-width: none;
        height: auto;
    }
    .home-6 .box-mapping { margin-left: -2.5rem; }
}

/* =================== MOBILE =================== */
@media (max-width: 849px) {
    /* Header: nút ngôn ngữ nhỏ gọn lại */
    #header .switch-label {
        padding: 0.4rem 0.5rem;
        gap: 1.15rem;
    }
    #header .switch-label > span { font-size: 0.7rem; }
    #header .switch-icon {
        width: 1.65rem;
        height: 1.2rem;
    }

    /* Trang chủ: khoảng cách đã đánh dấu còn 1/2 */
    .home-1 { padding-bottom: 1.5rem; }
    .home-3 { padding-top: 1.67rem; }
    .home-3 .home-content-3 { padding-top: 1rem; }
    .home-3 .slide-home-3 .heading { padding-top: 0.5rem; padding-bottom: 0.5rem; }
    .home-5 { padding-top: 2rem; padding-bottom: 1rem; }
    .home-7 { padding-top: 2rem; }
    .home-8 { padding-top: 2rem; }
    /* Bỏ mũi tên tròn, chỉ giữ chấm phân trang */
    .home .slide-nav-mobile .arrow-slide { display: none !important; }
    .home .slide-nav-mobile { justify-content: center; }
    /* Ẩn mũi tên slider trên mobile toàn site */
    .slide-nav-mobile .arrow-slide {
        display: none;
    }

    /* Về chúng tôi: khoảng cách còn 1/2 */
    section.about3 { padding-bottom: 2rem; }
    section.about4 { padding-top: 2rem; padding-bottom: 2.5rem; }
    .about4_num.flex { margin-top: .5rem; }
    /* about10: chữ Interbos mobile fill gradient xanh đậm dần xuống, bỏ lớp viền + mờ dần */
    section.about10 .title_section svg > g { mask: none; }
    section.about10 .title_section svg g > path[mask] { display: none; }
    section.about5 { padding-top: 2rem; padding-bottom: 2rem; }
    section.about7 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
    section.about8 { padding-top: 2rem; }
    section.about10 { padding-bottom: 2rem; }
    section.about12 { padding-top: 2.5rem; }
    /* "Con người Interbos" -> chữ Interbos: còn 1/3 */
    section.about10 .title_section { margin: -4.5rem 0 -3.4rem; }
    /* Chữ dưới chứng nhận nhỏ lại như bản PC */
    .about12_item h3 { font-size: 1rem; }
    .text-center.about11_content {
        margin-top: 1.5rem;
    }
    /* Đối tác công nghệ ở giữa 2 khoảng trắng */
    section.about13 { padding-top: 2.8rem; }
    .page-template-about footer { margin-top: 2rem; }

    /* Hệ thống phân phối: logo đối tác -> form đăng ký còn 1/2 */
    .page-template-office section.home-7 { padding-top: 2.5rem; }

    /* Công bố: cố định cột Sản phẩm, các cột khác kéo ngang */
    .table-custom ul > li > span:nth-child(2) {
        position: sticky;
        left: 0;
        z-index: 2;
        background: #fff;
        box-shadow: 0.4rem 0 0.6rem -0.5rem rgb(16 62 96 / 0.25);
        padding-left: 0.5rem;
    }
    .table-custom .table-header li > span:nth-child(2) { background: #D7EAFF; }

    /* Danh mục sản phẩm: logo hãng nhỏ lại, cân giữa logo header và ô chọn */
    .tax-product-category .product-page {
        padding-top: 0;
        margin-top: -1.125rem;
    }
    .tax-product-category .logo_tax img {
        height: 3rem;
    }
    .product_menu {
        margin: 1rem 0;
    }
    .container-product-list > .inner-list {
        margin-top: 1rem;
    }
    /* Ảnh -> tên danh mục còn 1/2; các hàng gọn và đều nhau */
    .tax-product-category .product_box .box_img { margin-bottom: 0.2rem; }
    .tax-product-category .inner-list { row-gap: 1rem !important; }
}

/* ---------- Trang chủ .home-3: nút "Bỏ qua" đoạn cuộn ngang (PC) ---------- */
.home3-skip {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    flex-shrink: 0;
    margin: 0 0 0 2rem;
    padding: 0.55rem 0.7rem 0.55rem 1.25rem;
    min-height: 0;
    border: 1px solid rgb(3 78 162 / 0.35);
    border-radius: 99rem;
    background: rgb(255 255 255 / 0.7);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 0.4rem 1.2rem rgb(3 78 162 / 0.1);
    font-family: 'Momo Trust Display';
    font-size: 0.8rem;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.02em;
    text-transform: none;
    color: #034EA2;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(0.6rem);
    transition: opacity .4s, visibility .4s, transform .4s, background .3s, color .3s, border-color .3s, box-shadow .3s;
}
.scroll_horizon_wrap.is-pinned .home3-skip {
    opacity: 1;
    visibility: visible;
    transform: none;
}
.home3-skip_icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: #034EA2;
    color: #fff;
}
.home3-skip_icon svg {
    width: 0.7rem;
    height: 0.7rem;
    animation: home3_skip_bounce 1.8s ease-in-out infinite;
}
.home3-skip:hover {
    background: #034EA2;
    border-color: #034EA2;
    color: #fff;
    box-shadow: 0 0.6rem 1.6rem rgb(3 78 162 / 0.3);
}
.home3-skip:hover .home3-skip_icon {
    background: #fff;
    color: #034EA2;
}
.home3-skip:focus-visible {
    outline: 2px solid #034EA2;
    outline-offset: 3px;
}
@keyframes home3_skip_bounce {
    0%, 100% { transform: translateY(-1px); }
    50% { transform: translateY(2px); }
}
@media (prefers-reduced-motion: reduce) {
    .home3-skip_icon svg { animation: none; }
}

/* =========================================================
 *  PM test sau khi chỉnh (20/10/2026)
 * ========================================================= */

/* Chi tiết SP > "Sản phẩm liên quan": tên danh mục + tên SP giống thẻ ở trang danh mục
 * (cùng font/màu/độ đậm, danh mục nhỏ hơn = 0.8 lần tên SP) */
.pd-rel-card .pd-rel-cat {
    font-family: 'Momo Trust Display';
    font-weight: 400;
    /*color: #09AEEA;*/
    font-size: 0.88rem;
}
.pd-rel-card .pd-rel-name {
    font-weight: 400;
}

@media (max-width: 849px) {
    /* Danh mục SP (mobile): tên SP gọn lại, xuống dòng cân đối (không để 1 chữ lẻ ở dòng dưới) */
    .product_box .box_content h3 {
        font-size: 0.875rem;
        line-height: 1.2;
        text-wrap: balance;
    }
    .product_box .box_content .cat {
        display: block;
        font-size: 0.7rem;
        margin-bottom: 0.2rem;
    }
}

/* Trang chủ > khối thống kê: dấu "+" căn sát chân số (01+, 100+) */
.home-6 .number-wrap:has(> .unit.is-plus) {
    align-items: baseline;
}
.home-6 .number-wrap span.unit.is-plus {
    line-height: 1;
    position: relative;
    top: 0.03em; /* hạ dấu + từ baseline xuống sát chân số, theo cỡ chữ ở mọi màn hình */
}

/* Mobile > trang chủ home-1: giọt sữa lúc đầu nằm 1 nửa trên mép xanh như PC (hạ xuống, trả về vị trí cũ khi hiệu ứng đã active) */
@media (max-width: 766px) {
    .content-home-1 .graphic-main {
        transition: top 0.3s;
    }
    .content-home-1:not(.active) .graphic-main {
        top: 1.8rem;
    }
}

/* Mobile > trang chủ home-6: khối thống kê đầu hạ lên (frontend.css dòng 9281 đặt 21rem) */
@media only screen and (max-width: 767px) {
    section.home-6 .home-content-6 {
        top: 17rem;
    }
    .pd-related-sec {
        padding-bottom: 1rem;
    }
}

/* Về chúng tôi > about4: màn 1920 */
@media (min-width: 1920px) {
    section.about4 {
        padding-bottom: 6rem;
    }
}

/* Sản phẩm: khoảng cách dưới ảnh .box_img (override frontend.css dòng 7704) */
.product_box .box_img {
    margin-bottom: .5rem;
}

/* Danh sách sản phẩm: row-gap (override frontend.css dòng 4701) */
.container-product-list > .inner-list {
    row-gap: .5rem;
}

/* about10: lớp fill chữ SVG chỉ hiện trên mobile (từ 850px trở lên ẩn, giữ chữ viền) */
@media (min-width: 850px) {
    section.about10 .title_section svg .about10-fill { display: none; }
}