/**
 * Connector Flatsome: Header dropdown và mega menu.
 *
 * Chỉ chứa selector và hành vi phụ thuộc cấu trúc Header của Flatsome.
 * Màu sắc, bố cục và liên hệ riêng Tranh Shop Việt nằm trong lớp Website/Theme.
 *
 * File: modules/header/connectors/flatsome/assets/css/tsv-header-flatsome.css
 */

/* =====================================================
   01. DROPDOWN HEADER FLATSOME
===================================================== */

/* Menu dropdown */
.nav-dropdown.nav-dropdown-default .nav-dropdown-col:after {
    content: '➤';
    position: absolute;
    right: 0;
    padding: 8px 0;
}

.nav-dropdown > li.nav-dropdown-col {
    display: block;
    width: 100%;
    border-right: 0;
}

.nav-dropdown {
    border: 1px solid #ddd;
    padding: 0;
}

.nav-dropdown .nav-dropdown-col > a,
.nav-dropdown li a {
    font-weight: 500 !important;
    text-transform: none !important;
    font-size: 15px;
}

.nav-dropdown .nav-dropdown-col > ul li:hover {
    background: #ccc;
}

.nav-dropdown-default > li:hover > a,
.nav-dropdown .nav-dropdown-col > ul li:hover > a {
    color: #EA1515;
}

.nav-dropdown-default > li:hover {
    background: #f1f1f1;
}

.nav-dropdown-default > li > a {
    border-bottom: 0 !important;
}

.nav-dropdown-has-arrow li.has-dropdown:before {
    border-width: 10px;
    margin-left: -10px;
}

.nav-dropdown .nav-dropdown-col > ul {
    border: 1px solid #d2d2d2;
    box-shadow: 2px 2px 5px #828282;
    display: none;
    position: absolute;
    left: 100%;
    z-index: 9;
    background: white;
    min-width: 240px;
}

.nav-dropdown .nav-dropdown-col > ul li a {
    padding: 10px;
    text-transform: none;
    color: black;
}

.header-nav li.nav-dropdown-col:hover > ul {
    display: block !important;
}


/* =====================================================
   TSV - HEADER: Mega menu Danh mục desktop
   File: modules/header/connectors/flatsome/assets/css/tsv-header-flatsome.css

   Menu DANH MỤC hiển thị dạng mega menu ngang:
   - Dùng class riêng .tsv-mega-menu
   - Không phụ thuộc ID menu tự sinh của WordPress
   - Tự ôm nội dung theo số cột
   - Hỗ trợ đẹp khoảng 3 đến 5 cột
   - Căn giữa dưới nút DANH MỤC
   - Không để nền menu dư quá nhiều
===================================================== */

@media only screen and (min-width: 850px) {

	   /* Khung dropdown chính của menu SẢN PHẨM */
	.header-bottom .tsv-mega-menu > ul.sub-menu.nav-dropdown {
	    display: flex !important;
	    align-items: flex-start !important;
	    justify-content: center !important;
	    flex-wrap: nowrap !important;
	    gap: 0 !important;
	
	    width: max-content !important;
	    min-width: 0 !important;
	    max-width: calc(100vw - 60px) !important;
	
	    left: 50% !important;
	    right: auto !important;
	    transform: translateX(-50%) !important;
	
	    padding: 18px 22px !important;
	    margin: 0 !important;
	
	    background: #ffffff !important;
	    border: 1px solid #dddddd !important;
	    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14) !important;
	
	    z-index: 99999 !important;
	    overflow: visible !important;
	
	    opacity: 0 !important;
	    visibility: hidden !important;
	    pointer-events: none !important;
	}
	
    /*
     * Trạng thái mở mega menu:
     * - Chuột: dùng :hover theo hành vi gốc của Flatsome.
     * - Bàn phím: chỉ mở khi có phần tử :focus-visible bên trong.
     *
     * Không dùng :focus-within vì thao tác nhấn/giữ chuột cũng tạo focus,
     * khiến Flatsome mất trạng thái hover nhưng dropdown vẫn bị ép hiện với
     * chiều cao ẩn của theme, làm nền trắng co lại và nội dung tràn lên banner.
     */
    .header-bottom .tsv-mega-menu:hover > ul.sub-menu.nav-dropdown {
        height: auto !important;
        max-height: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    /*
     * Tách :has() khỏi selector hover để trình duyệt cũ không hỗ trợ :has()
     * vẫn giữ nguyên hành vi chuột, thay vì vô hiệu hóa cả danh sách selector.
     */
    @supports selector(.tsv-mega-menu:has(:focus-visible)) {
        .header-bottom .tsv-mega-menu:has(:focus-visible) > ul.sub-menu.nav-dropdown {
            height: auto !important;
            max-height: none !important;
            opacity: 1 !important;
            visibility: visible !important;
            pointer-events: auto !important;
        }
    }

    /* Giữ dấu focus rõ ràng cho người điều hướng bằng bàn phím. */
    .header-bottom .tsv-mega-menu > a:focus-visible,
    .header-bottom .tsv-mega-menu ul.sub-menu a:focus-visible {
        outline: 2px solid currentColor !important;
        outline-offset: 2px !important;
    }

    /* Mỗi cột lớn */
    .header-bottom .tsv-mega-menu > ul.sub-menu.nav-dropdown > li.nav-dropdown-col {
        position: relative !important;

        display: block !important;
        flex: 0 0 auto !important;

        width: auto !important;
        min-width: 155px !important;
        max-width: 210px !important;

        padding: 0 18px !important;
        margin: 0 !important;

        border: none !important;
        background: transparent !important;
    }

    /* Vạch chia nhẹ giữa các cột */
    .header-bottom .tsv-mega-menu > ul.sub-menu.nav-dropdown > li.nav-dropdown-col:not(:last-child) {
        border-right: 1px solid #e3e9f2 !important;
    }

    /* Tiêu đề cột lớn */
    .header-bottom .tsv-mega-menu > ul.sub-menu.nav-dropdown > li.nav-dropdown-col > a {
        display: block !important;

        width: 100% !important;
        min-width: 0 !important;

        padding: 10px 0 12px 0 !important;
        margin: 0 0 4px 0 !important;

        color: #111111 !important;
        background: transparent !important;

        font-size: 14px !important;
        font-weight: 700 !important;
        line-height: 1.35 !important;
        text-transform: uppercase !important;
        text-decoration: none !important;

        white-space: nowrap !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
    }

    /* Hover tiêu đề cột */
    .header-bottom .tsv-mega-menu > ul.sub-menu.nav-dropdown > li.nav-dropdown-col:hover > a {
        color: #1e7be8 !important;
        background: transparent !important;
    }

    /* Ẩn mũi tên / tam giác dư trong mega menu */
    .header-bottom .tsv-mega-menu > ul.sub-menu.nav-dropdown > li.nav-dropdown-col > a::after {
        display: none !important;
        content: none !important;
        border: none !important;
    }

    /* Submenu con nằm trong từng cột, không xổ sang phải */
    .header-bottom .tsv-mega-menu > ul.sub-menu.nav-dropdown > li.nav-dropdown-col > ul.sub-menu {
        position: static !important;
        left: auto !important;
        top: auto !important;

        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        padding: 0 !important;
        margin: 0 !important;

        background: transparent !important;
        border: none !important;
        box-shadow: none !important;

        transform: none !important;
    }

    /* Item con */
    .header-bottom .tsv-mega-menu > ul.sub-menu.nav-dropdown > li.nav-dropdown-col > ul.sub-menu > li {
        display: block !important;
        width: 100% !important;

        padding: 0 !important;
        margin: 0 !important;

        border: none !important;
        background: transparent !important;
    }

    /* Link danh mục con */
    .header-bottom .tsv-mega-menu > ul.sub-menu.nav-dropdown > li.nav-dropdown-col > ul.sub-menu > li > a {
        display: block !important;

        width: 100% !important;
        min-width: 0 !important;

        padding: 8px 0 !important;
        margin: 0 !important;

        color: #111111 !important;
        background: transparent !important;

        font-size: 14px !important;
        line-height: 1.35 !important;
        text-transform: none !important;
        text-decoration: none !important;

        white-space: nowrap !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
    }

    /* Hover link danh mục con */
    .header-bottom .tsv-mega-menu > ul.sub-menu.nav-dropdown > li.nav-dropdown-col > ul.sub-menu > li > a:hover {
        color: #1e7be8 !important;
        background: transparent !important;
        padding-left: 4px !important;
    }

    /* Ẩn mũi tên / tam giác dư trong mega menu desktop. */
    .header-bottom .tsv-mega-menu > ul.sub-menu.nav-dropdown > li.nav-dropdown-col::after {
        display: none !important;
        content: none !important;
        border: none !important;
        box-shadow: none !important;
        background: none !important;
    }
}