/**
 * VIN Theme Polish - frontend optimization layer
 * Chứa CSS sửa giao diện mobile/footer/menu/search và các tinh chỉnh mượt hơn.
 */

:root {
    --vin-primary: var(--primary-color, #0b84ff);
    --vin-text: #1d1d1f;
    --vin-muted: #6b7280;
    --vin-border: #e5e7eb;
    --vin-bg: #f5f7fb;
    --vin-card: #ffffff;
    --vin-radius: 12px;
    --vin-shadow: 0 8px 24px rgba(15, 23, 42, .08);
}

html {
    scroll-behavior: smooth;
}

body {
    background: var(--vin-bg);
    overflow-x: hidden;
}

body:not(.has-off-canvas) {
    overflow-y: auto;
}

img {
    max-width: 100%;
    height: auto;
}

.button,
button,
input[type="submit"],
.ux-menu-link a,
.product-small,
.vn-post-card,
.vn-product-card,
.footer-wrapper a,
.footer-menu-mobile a {
    transition: color .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.product-small:hover,
.vn-post-card:hover,
.vn-product-card:hover {
    transform: translateY(-2px);
}

.header-wrapper,
.menu-mobile-section,
.footer-menu-mobile,
.footer-wrapper {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Search icon: tránh trùng màu trắng trên mobile */
.menu-mobile-section .icon-search,
.menu-mobile-header .icon-search,
.search-mobile-header .icon-search,
.vn-header-2-search .icon-search,
.search-pro2 .icon-search,
.searchform .icon-search {
    color: var(--vin-primary) !important;
    opacity: 1 !important;
}

.menu-mobile-section .searchform,
.search-mobile-header .searchform,
.vn-header-2-search .searchform,
.search-pro2 {
    background: #fff;
    border-radius: 999px;
}

/* Mobile header */
@media (max-width: 849px) {
    body {
        padding-bottom: 64px;
    }

    .menu-mobile-section {
        position: sticky;
        top: 0;
        z-index: 1001;
        background: var(--vin-primary);
        box-shadow: 0 4px 18px rgba(15, 23, 42, .14);
    }

    .menu-mobile-header {
        min-height: 44px;
        padding: 6px 10px;
        gap: 8px;
        align-items: center;
    }

    .menu-mobile-header .logo img {
        max-height: 28px;
        width: auto;
    }

    .search-mobile-header {
        flex: 1 1 auto;
    }

    .search-mobile-header form,
    .search-mobile-header .searchform-wrapper,
    .search-mobile-header .searchform {
        width: 100%;
        margin: 0;
    }

    .search-mobile-header input[type="search"],
    .search-mobile-header input.search-field {
        min-height: 32px;
        border: 0 !important;
        background: #fff !important;
        color: var(--vin-text) !important;
        border-radius: 999px !important;
        padding-left: 12px !important;
        box-shadow: none !important;
    }

    .cart-mobile-header a,
    .cart-mobile-header i,
    .cart-mobile-header .cart-icon strong {
        color: #fff !important;
    }

    /* Footer mobile hiển thị cố định, không cần bấm Xem thêm */
    .footer-menu-mobile {
        display: block !important;
        position: fixed !important;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1002;
        background: #fff;
        border-top: 1px solid var(--vin-border);
        box-shadow: 0 -8px 24px rgba(15, 23, 42, .10);
        min-height: 58px;
    }

    .footer-menu-mobile > ul,
    .footer-menu-mobile .menu,
    .footer-menu-mobile ul.menu {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        align-items: stretch;
        gap: 0;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }

    .footer-menu-mobile li {
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
        position: static !important;
    }

    .footer-menu-mobile a {
        min-height: 56px;
        padding: 5px 2px 4px;
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        color: #222 !important;
        font-size: 10px;
        line-height: 1.15;
        text-align: center;
        white-space: normal;
    }

    .footer-menu-mobile img.ux-menu-icon,
    .footer-menu-mobile .ux-menu-icon {
        width: 20px !important;
        height: 20px !important;
        object-fit: contain;
        margin: 0 !important;
    }

    .footer-menu-mobile li.current-menu-item > a,
    .footer-menu-mobile a:hover,
    .footer-menu-mobile a:focus {
        color: var(--vin-primary) !important;
        background: rgba(11, 132, 255, .06);
    }

    /* Footer thật luôn hiện dưới nội dung, không còn kiểu popup/overlay */
    .footer-wrapper,
    footer#footer,
    #footer {
        display: block !important;
        position: static !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: none !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        margin-bottom: 58px;
    }

    /* Menu danh mục mobile: ép về list UL/LI dọc, bỏ tab trái/phải */
    .list-menu-mobile,
    .main-menu-mobile,
    .nav-menu-mobile,
    .menu-mobile-section .sub-menu,
    .footer-menu-mobile .sub-menu {
        position: static !important;
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: none !important;
        overflow: visible !important;
    }

    .list-menu-mobile {
        background: #fff;
        border-top: 1px solid rgba(255,255,255,.16);
        box-shadow: 0 8px 20px rgba(15, 23, 42, .08);
    }

    .nav-menu-mobile,
    .nav-menu-mobile ul,
    .menu-mobile-section ul.sub-menu {
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .nav-menu-mobile li,
    .menu-mobile-section .sub-menu li {
        display: block !important;
        width: 100% !important;
        background: #fff !important;
        border-bottom: 1px solid var(--vin-border);
        position: static !important;
    }

    .nav-menu-mobile > li > a,
    .menu-mobile-section .sub-menu a,
    .list-menu-mobile a {
        display: flex !important;
        align-items: center;
        justify-content: flex-start;
        min-height: 42px;
        width: 100%;
        padding: 10px 14px !important;
        color: var(--vin-text) !important;
        background: #fff !important;
        font-size: 14px;
        font-weight: 600;
        line-height: 1.35;
        text-align: left;
    }

    .menu-mobile-section .sub-menu a {
        padding-left: 28px !important;
        color: #374151 !important;
        font-weight: 500;
        font-size: 13px;
    }

    .nav-menu-mobile > li > a:hover,
    .nav-menu-mobile > li > a:focus,
    .menu-mobile-section .sub-menu a:hover,
    .menu-mobile-section .sub-menu a:focus {
        background: #f4f8ff !important;
        color: var(--vin-primary) !important;
    }

    .nav-menu-mobile .icon-angle-down,
    .menu-mobile-section .icon-angle-down {
        display: none !important;
    }

    /* Product / post card mobile: bớt rời rạc */
    .product-small,
    .box,
    .vn-post-wrap,
    .vn-sp-wrap,
    .ux-cat-wrap {
        border-radius: var(--vin-radius);
    }

    .product-small .box-text,
    .box-text-products {
        padding: 8px 7px 10px;
    }

    .product-title,
    .name.product-title,
    h1.product-title,
    .entry-title {
        color: var(--vin-text);
        letter-spacing: -.01em;
    }

    h1.product-title,
    .entry-title {
        font-size: clamp(22px, 5vw, 32px);
        line-height: 1.25;
    }

    .single-product .product-main,
    .single-post .entry-content,
    .page-wrapper {
        background: var(--vin-card);
    }
}

@media (min-width: 850px) {
    .footer-menu-mobile {
        display: none !important;
    }
}

/* Footer desktop/mobile tổng thể */
.footer-wrapper {
    background: #fff;
    border-top: 1px solid var(--vin-border);
}

.footer-wrapper a:hover,
.footer-wrapper a:focus {
    color: var(--vin-primary);
}

/* Comment/rating area mượt hơn */
.comment-respond,
.vn-post-rating,
.vn-post-rating-summary,
.woocommerce-Reviews,
.ux-cat-reviews {
    border-radius: var(--vin-radius);
}

.comment-form input,
.comment-form textarea,
.woocommerce-Reviews input,
.woocommerce-Reviews textarea {
    border-radius: 10px !important;
}

.comment-form input:focus,
.comment-form textarea:focus,
.woocommerce-Reviews input:focus,
.woocommerce-Reviews textarea:focus {
    border-color: var(--vin-primary) !important;
    box-shadow: 0 0 0 3px rgba(11, 132, 255, .12) !important;
}

/* Home Swiper: giữ lại layout gốc của theme cũ, chỉ sửa nhẹ để Swiper khởi tạo ổn định */
.banner-home .swiper-container {
    width: 100%;
    height: 100% !important;
    position: relative;
    overflow: hidden;
}

.banner-home .mySwiper2 {
    height: 80% !important;
    width: 100%;
}

.banner-home .mySwiper {
    height: 20% !important;
    box-sizing: border-box;
    background: #fff;
}

.banner-home .mySwiper .swiper-slide {
    width: 25%;
    height: 100%;
    min-height: 0;
    padding: 0 4px;
    font-size: 12px;
    line-height: 1.35;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
}

.banner-home .mySwiper2 .swiper-slide,
.banner-home .mySwiper2 .swiper-slide a {
    display: flex;
    align-items: stretch;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.banner-home .mySwiper2 .swiper-slide img {
    display: block;
    width: 100%;
    height: 100% !important;
    object-fit: cover;
}

.banner-home .swiper-button-next,
.banner-home .swiper-button-prev {
    z-index: 5;
}

@media (max-width: 849px) {
    .banner-home .box_center,
    .banner-home .slider-top {
        padding-left: 10px;
        padding-right: 10px;
    }

    .banner-home .mySwiper {
        height: 1% !important;
    }

    .banner-home .mySwiper2 {
        height: 99% !important;
    }

    .banner-home .mySwiper .swiper-slide {
        font-size: 0 !important;
        padding: 0;
    }

    .banner-home .swiper-button-next,
    .banner-home .swiper-button-prev {
        width: 36px !important;
        height: 36px !important;
    }

    .banner-home .swiper-button-next:after,
    .banner-home .swiper-button-prev:after {
        font-size: 18px !important;
    }
}

/* VN FIX 2026-05-14: Nút "Danh mục" ở footer mobile mở lại menu danh mục */
@media (max-width: 849px) {
    body.vin-mobile-menu-open {
        overflow: hidden !important;
    }

    .menu-mobile-section {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        z-index: 100001 !important;
        width: 100% !important;
        height: 100vh !important;
        display: none !important;
        background: #fff !important;
        overflow: hidden !important;
        box-shadow: none !important;
    }

    .menu-mobile-section.active {
        display: block !important;
    }

    .menu-mobile-section .menu-mobile-header {
        position: sticky !important;
        top: 0 !important;
        z-index: 2 !important;
        background: var(--vin-primary, var(--primary-color, #007aff)) !important;
    }

    .menu-mobile-section .list-menu-mobile,
    .menu-mobile-section .main-menu-mobile {
        height: calc(100vh - 50px) !important;
        max-height: calc(100vh - 50px) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        background: #fff !important;
        padding-bottom: 78px !important;
    }

    .footer-menu-mobile a[href="#"] {
        cursor: pointer;
    }
}