html {
    scroll-padding-top: 200px;
}

@media (min-width: 992px) {
    .masthead-sticky-placeholder {
        display: none;
        width: 100%;
        height: 0;
    }

    header#masthead.is-sticky {
        position: fixed !important;
        left: 0;
        right: 0;
        width: 100%;
        z-index: 99999;
        animation: mastheadStickyIn 0.25s ease;
    }
}

@keyframes mastheadStickyIn {
    from {
        transform: translateY(-100%);
    }

    to {
        transform: translateY(0);
    }
}

@media (max-width: 991px) {
    html {
        scroll-padding-top: 130px;
    }
}

header#masthead.is-sticky section.elementor-top-section.elementor-element-aca32e9 {
    display: none !important;
}

/* The Medilazar section-sticky script injects this spacer into the header. */
header#masthead .h-animate {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.scrollup.activate {
    display: none !important;
}

#form-dang-ky-tu-van {
    scroll-margin-top: 240px;
}

@media (max-width: 991px) {
    #form-dang-ky-tu-van {
        scroll-margin-top: 150px;
    }
}

/* Mobile horizontal scroll utility for Elementor container/section */
@media (max-width: 767px) {
    .scroll-snap {
        --snap-gap: 12px;
        --snap-item-width: calc((100% - var(--snap-gap)) / 1.5); /* 1.5 items with gap */
    }

    .scroll-snap > .e-con,
    .scroll-snap > .elementor-container {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: var(--snap-gap);
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 4px;
    }

    .scroll-snap > .e-con::-webkit-scrollbar,
    .scroll-snap > .elementor-container::-webkit-scrollbar {
        display: none;
    }

    .scroll-snap > .e-con > .elementor-element,
    .scroll-snap > .elementor-container > .elementor-column {
        flex: 0 0 var(--snap-item-width);
        width: var(--snap-item-width);
        max-width: var(--snap-item-width);
        scroll-snap-align: start;
    }

    /* When direct child is a grid container, convert it to horizontal cards */
    .scroll-snap > .e-con.e-grid {
        grid-template-columns: none !important;
    }
}

/* ==========================================================================
   BREADCRUMB - đổi dấu phân cách > thành /
   Theme cha hardcode ' > ' trong template-parts/common/page-title.php
   (không có filter), nên override bằng CSS.
   ========================================================================== */
/* .breadcrumbs .list-inline-item:not(:last-child) {
    margin-right: 0 !important;
} */

.breadcrumbs .list-inline-item {
    vertical-align: middle;
}

/* font-size:0 vừa ẩn chữ '>' vừa xóa khoảng trắng thừa trong markup */
.breadcrumbs .list-inline-item.separator {
    display: inline-block !important;
    font-size: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    vertical-align: middle;
}

.breadcrumbs .list-inline-item.separator::before {
    content: "/" !important;
    display: inline-block !important;
    flex: none !important;
    border: 0 !important;
    font-size: 14px;
    line-height: 1;
    color: #657384;
    margin: 0 4px !important;
    vertical-align: middle;
}

/* Vô hiệu ::after của rule .separator dùng cho component khác */
.breadcrumbs .list-inline-item.separator::after {
    content: none !important;
    border: 0 !important;
}

.breadcrumbs .list-inline-item.item a {
    color: var(--e-global-color-primary);
    text-decoration: none;
}

.breadcrumbs .list-inline-item.item a:hover,
.breadcrumbs .list-inline-item.item a:focus {
    color: var(--e-global-color-primary);
    text-decoration: underline;
}

/* Ẩn mục cuối (tên trang/sản phẩm hiện tại) và dấu '/' ngay trước nó */
.breadcrumbs .list-inline-item.item.current,
.breadcrumbs .list-inline-item.item.current + .list-inline-item.separator {
    display: none !important;
}

.breadcrumbs .list-inline-item.separator:has(+ .list-inline-item.item.current) {
    display: none !important;
}

.breadcrumbs .list-inline-item.separator:last-child {
    display: none !important;
}

/* ==========================================================================
   Mini-cart: căn popup vào GIỮA icon giỏ hàng

   VẤN ĐỀ: woocommerce.css chỉ đặt cho .site-header-cart .shopping_cart
   { position:absolute; top:100% } — KHÔNG có left/right. Popup vì thế lấy mép
   trái của .site-header-cart (rộng 21px, đúng bằng icon) rồi tràn sang phải,
   nên vị trí phụ thuộc chiều rộng popup chứ không neo vào icon.

   CÁCH SỬA: đẩy popup sang mốc 50% của container (tức tâm icon) rồi kéo ngược
   lại nửa chiều rộng chính nó bằng translateX(-50%). Cách này không cần biết
   popup rộng bao nhiêu, nên đổi nội dung giỏ hàng vẫn luôn cân giữa.

   Mũi tên .widget_shopping_cart:before neo bằng var(--right, 50%); giữ đúng
   50% thì nó tự nằm giữa popup, tức cũng nằm giữa icon.
   ========================================================================== */

/* Neo mép phải (giữ nguyên bề rộng popup — dùng left:50% sẽ làm popup co theo
   container 21px, chỉ còn 11px), rồi dịch sang phải bằng:
       nửa popup (50%) − nửa icon (10.5px)
   Kết quả: tâm popup trùng tâm icon, không phụ thuộc popup rộng bao nhiêu. */
.site-header-cart .shopping_cart {
    right: 0;
    left: auto;
    transform: translateX(calc(50% - 10.5px));
}

/* Mũi tên nằm giữa popup -> cũng chính là giữa icon. */
.site-header-cart .widget_shopping_cart::before {
    right: calc(50% - 6px);
    left: auto;
}

/* Bỏ dòng "Tổng số phụ" — thông tin này đã có ở trang giỏ hàng, popup chỉ cần
   danh sách sản phẩm và hai nút. */
.site-header-cart .woocommerce-mini-cart__total {
    display: none !important;
}

/* Nới popup rộng hơn để hai nút đủ chỗ nằm cùng một dòng. */
.site-header-cart .widget_shopping_cart,
.site-header-cart .shopping_cart {
    width: 340px;
    min-width: 340px;
}

/* Nút: thu nhỏ chữ và padding cho vừa một hàng.
   Trước khi sửa, hai nút 135+127=262px trong popup 300px nên chữ xuống dòng,
   nút cao tới 60px. */
.site-header-cart .woocommerce-mini-cart__buttons {
    display: flex;
    gap: 8px;
    margin: 0;
    padding: 14px 16px;
}

.site-header-cart .woocommerce-mini-cart__buttons a.button {
    flex: 1 1 0;
    min-width: 0;
    margin: 0 !important;
    padding: 10px 8px !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
    white-space: nowrap;
    text-align: center;
}

/* Popup rộng 300px, căn giữa icon nằm sát mép phải màn hình sẽ tràn ra ngoài.
   Giới hạn lại trên màn hình hẹp. */
@media (max-width: 480px) {
    .site-header-cart .shopping_cart {
        left: auto;
        right: 0;
        transform: none;
    }


    .site-header-cart .widget_shopping_cart::before {
        right: 4px;
    }
}
.woocommerce-pagination{text-align:center}
ins, mark {
    background-color: transparent;
    color: inherit;
}

/* ==========================================================================
   PHÂN TRANG — dùng màu primary thay vì teal của theme cha

   Phân trang đang ăn màu #0770ae (xanh nhạt của Customizer) trong khi phần
   còn lại của site dùng primary #0040C3 — nên nhìn lạc màu.

   Màu đó KHÔNG nằm trong file nào sửa được: medilazar-core sinh CSS từ
   Customizer rồi ghi ra uploads/medilazar-custom-css/custom-<hash>.css
   (xem inc/custom-css-to-file.php). File này tự sinh lại theo hash nội dung,
   sửa tay sẽ mất. Theme cha còn có sẵn bản hardcode teal #24aeb1 trong
   assets/css/color.css nhưng file đó không hề được enqueue.

   Vì vậy override ở đây. Selector chép đúng bản gốc (giữ nguyên chuỗi
   :not(...)) nên độ đặc hiệu bằng nhau, và custom.css load sau file sinh ra
   đó nên thắng — không cần !important.
   ========================================================================== */

.page-numbers:not(ul),
.page-numbers.next:not(ul):hover,
.page-numbers.prev:not(ul):hover {
    color: var(--e-global-color-primary, #0040C3);
}

.page-numbers.current:not(ul):not(.dots):not(.next):not(.prev),
.page-numbers:not(ul):not(.dots):not(.next):not(.prev):hover,
.page-numbers:not(ul):not(.dots):not(.next):not(.prev):focus {
    background-color: var(--e-global-color-primary, #0040C3);
    color: #fff;
}