/*!
 * Custom fixes - Viet Anh Handicrafts
 *
 * File CSS ghi đè, nạp sau style.min.css.
 * Không viết vào assets/scss/** vì theme nạp bản .min.css đã biên dịch sẵn
 * và repo không có công cụ build Sass.
 */

/* ==========================================================================
   1. Mũi tên điều hướng slider
   Yêu cầu: nền trong suốt, không đè lên ảnh, căn giữa theo chiều dọc của ảnh.
   Chuẩn tham chiếu: trang Catalog (dnetor-swiper-navigation-outside).
   ========================================================================== */

/* Vị trí mũi tên theo chiều dọc. Ghi đè cho từng section ở mục 1.3 nếu cần. */
:root {
    --va-arrow-top: 50%;
    --va-arrow-offset: 40px;
    --va-arrow-color: #85482a;
}

/* JetWooBuilder (slick): carousel sản phẩm và carousel danh mục */
.jet-woo-carousel .jet-arrow,
.elementor-slick-slider .jet-arrow {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--va-arrow-color) !important;
    width: 34px !important;
    height: 34px !important;
    line-height: 34px !important;
    font-size: 26px !important;
    text-align: center;
    top: var(--va-arrow-top) !important;
    transform: translateY(-50%) !important;
    opacity: 1;
    z-index: 5;
}

.jet-woo-carousel .jet-arrow:hover,
.elementor-slick-slider .jet-arrow:hover {
    background: transparent !important;
    background-color: transparent !important;
    opacity: .7;
}

/* Đẩy mũi tên ra ngoài khung ảnh */
.jet-woo-carousel .prev-arrow,
.elementor-slick-slider .prev-arrow {
    left: calc(var(--va-arrow-offset) * -1) !important;
    right: auto !important;
}

.jet-woo-carousel .next-arrow,
.elementor-slick-slider .next-arrow {
    right: calc(var(--va-arrow-offset) * -1) !important;
    left: auto !important;
}

/* Cho mũi tên nằm ngoài mà không bị cắt.
   Chỉ mở overflow ở container ngoài - KHÔNG đụng .slick-list vì slick dựa vào
   overflow:hidden của nó để che các slide kế bên. */
.jet-woo-carousel,
.jet-woo-categories {
    overflow: visible;
}

/* Devnex swiper (hero, Catalog, slider tin tức):
   khách nói vị trí "oke rồi", chỉ cần bỏ nền cho trong suốt. */
.custom-navigation.dnetor-icons,
.custom-navigation.dnetor-icons.navigation-type1 {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--va-arrow-color) !important;
}

.custom-navigation.dnetor-icons:hover {
    background: transparent !important;
    background-color: transparent !important;
    opacity: .7;
}

/* 1.3 Tinh chỉnh theo loại slider
   Cả 2 widget Jet đều dùng chung class .jet-woo-carousel, phân biệt bằng
   class bọc ngoài của widget Elementor.
   Card sản phẩm có tên + "Contact Supplier" phía dưới nên giữa card thấp hơn
   giữa ảnh -> kéo mũi tên lên. Card danh mục gần như toàn ảnh nên giữ 50%. */
.elementor-widget-jet-woo-widgets-products .jet-woo-carousel {
    --va-arrow-top: 36%;
}

.elementor-widget-jet-woo-widgets-categories .jet-woo-carousel {
    --va-arrow-top: 50%;
}

/* Màn hẹp: kéo mũi tên vào trong để không bị cắt khỏi viewport */
@media (max-width: 1280px) {
    .jet-woo-carousel .prev-arrow,
    .elementor-slick-slider .prev-arrow {
        left: 4px !important;
    }

    .jet-woo-carousel .next-arrow,
    .elementor-slick-slider .next-arrow {
        right: 4px !important;
    }

    .jet-woo-carousel,
    .jet-woo-categories {
        overflow: hidden;
    }
}

/* ==========================================================================
   2. Ẩn tên tác giả "admin"
   .dnetor-post-date là anh em của .dnetor-post-author (không lồng trong),
   nên ẩn cả khối author vẫn giữ nguyên ngày đăng.
   ========================================================================== */

.dnetor-post-meta .dnetor-post-author {
    display: none !important;
}

/* ==========================================================================
   3. Card bài viết: bo góc + khoảng cách
   ========================================================================== */

.elementor-posts .elementor-post,
.dnetor-post-grid .dnetor-post-grid-item {
    border-radius: 12px;
    overflow: hidden;
}

.elementor-posts .elementor-post__thumbnail,
.elementor-posts .elementor-post__thumbnail__link,
.dnetor-post-grid .dnetor-post-thumbnail {
    border-radius: 12px 12px 0 0;
    overflow: hidden;
}

/* Đảm bảo có khoảng cách giữa các card kể cả khi widget chưa set gap */
.elementor-posts-container.elementor-posts {
    --grid-column-gap: 30px;
    --grid-row-gap: 35px;
}

/* ==========================================================================
   4. Sidebar "Featured news" - chống vỡ chữ mỗi dòng 1 từ
   ========================================================================== */

.ele-template-sidebar,
.ele-list-post-siidebar {
    min-width: 260px;
}

.ele-template-sidebar .dnetor-post-title,
.ele-list-post-siidebar .dnetor-post-title,
.ele-template-sidebar .dnetor-post-title a,
.ele-list-post-siidebar .dnetor-post-title a {
    font-size: 15px;
    line-height: 1.4;
    word-break: normal;
    overflow-wrap: anywhere;
}

.ele-template-sidebar .dnetor-post-title a,
.ele-list-post-siidebar .dnetor-post-title a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}