/* Đảm bảo body có đủ padding dưới cùng TRÊN MOBILE để nội dung không bị che */
@media (max-width: 849px) { /* Áp dụng cho màn hình có chiều rộng tối đa 849px (breakpoint của Flatsome) */
    body {
        /* Thêm khoảng trống dưới cùng bằng chiều cao của thanh nav + một chút */
        padding-bottom: 70px !important; /* Dùng !important để ghi đè các style khác có thể ảnh hưởng */
    }
}

/* --- Thanh điều hướng dưới cùng --- */
.xuanmedia_bottom-nav {
    display: none; /* **Ẩn thanh nav mặc định trên màn hình lớn (desktop/tablet)** */
    position: fixed; /* Cố định vị trí ở cuối màn hình */
    bottom: 0;       /* Sát cạnh dưới */
    left: 0;         /* Sát cạnh trái */
    right: 0;        /* Sát cạnh phải (chiếm toàn bộ chiều rộng) */
    background-color: white; /* Màu nền trắng */
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); /* Đổ bóng nhẹ phía trên */
    z-index: 1000;   /* Đảm bảo nằm trên các phần tử khác */
    height: 65px;    /* Chiều cao cố định */
    font-family: 'Inter', sans-serif; /* Áp dụng font Inter */
}

/* **Hiển thị thanh nav trên mobile** */
@media (max-width: 849px) { /* Áp dụng cho màn hình có chiều rộng tối đa 849px */
    .xuanmedia_bottom-nav {
        display: block; /* Hiển thị lại thanh nav */
    }
}

/* Container chứa các mục nav */
.xuanmedia_nav-container {
    display: flex;             /* Sử dụng Flexbox để sắp xếp các mục */
    justify-content: space-around; /* Phân bố đều các mục theo chiều ngang */
    align-items: stretch;      /* Kéo dài các mục để lấp đầy chiều cao của container */
    max-width: 768px;          /* Giới hạn chiều rộng tối đa trên màn hình lớn hơn (nếu hiển thị) */
    margin: 0 auto;            /* Căn giữa container */
    height: 100%;              /* Chiều cao bằng thanh nav */
}

/* Từng mục link trong thanh nav */
.xuanmedia_nav-link {
    display: flex;             /* Sử dụng Flexbox */
    flex-direction: column;    /* Sắp xếp icon và text theo chiều dọc */
    align-items: center;       /* Căn giữa theo chiều ngang */
    justify-content: center;   /* Căn giữa theo chiều dọc */
    text-align: center;        /* Căn giữa chữ */
    color: #4b5563;            /* Màu chữ xám mặc định */
    text-decoration: none;     /* Bỏ gạch chân link */
    padding: 8px 5px;          /* Khoảng đệm bên trong */
    flex-grow: 1;              /* Cho phép các mục co giãn để lấp đầy không gian */
    transition: color 0.2s ease; /* Hiệu ứng chuyển màu chữ mượt mà */
    border-top: 3px solid transparent; /* Tạo đường viền ẩn phía trên để giữ layout ổn định khi active */
    cursor: pointer;           /* Đổi con trỏ thành hình bàn tay */
}

/* Icon SVG bên trong link */
.xuanmedia_nav-link svg {
    width: 24px;               /* Chiều rộng icon */
    height: 24px;              /* Chiều cao icon */
    margin-bottom: 4px;        /* Khoảng cách giữa icon và text */
    transition: fill 0.2s ease, stroke 0.2s ease; /* Hiệu ứng chuyển màu icon mượt mà */
}

/* Màu mặc định cho các path SVG bên trong link chưa active */
/* Ghi đè màu fill gốc của SVG để đảm bảo màu đồng nhất */
.xuanmedia_nav-link:not(.xuanmedia_active) svg path[fill="#100F0F"],
.xuanmedia_nav-link:not(.xuanmedia_active) svg path[fill="#F77404"] {
     fill: currentColor; /* Sử dụng màu chữ hiện tại của thẻ <a> (là màu xám) */
}
/* Màu mặc định cho stroke SVG (dùng cho icon Liên hệ) */
 .xuanmedia_nav-link:not(.xuanmedia_active) svg {
     stroke: currentColor; /* Sử dụng màu chữ hiện tại của thẻ <a> */
 }

/* Text (nhãn) bên dưới icon */
.xuanmedia_nav-link span {
    font-size: 11px;           /* Cỡ chữ nhỏ */
    font-weight: 500;          /* Độ đậm vừa phải */
}

/* --- Trạng thái Active của mục nav --- */
.xuanmedia_nav-link.xuanmedia_active {
    color: #ee2e24;            /* Đổi màu chữ thành màu chủ đạo */
    border-top-color: #ee2e24; /* Hiển thị đường viền trên với màu chủ đạo */
}

/* Đổi màu fill SVG khi mục nav active */
.xuanmedia_nav-link.xuanmedia_active svg path {
    fill: #ee2e24;
}
/* Đổi màu stroke SVG khi mục nav active */
.xuanmedia_nav-link.xuanmedia_active svg {
    stroke: #ee2e24;
}

/* --- Lớp phủ Overlay --- */
#xuanmedia_overlay {
    position: fixed;           /* Cố định vị trí */
    top: 0;
    left: 0;
    width: 100%;               /* Chiếm toàn bộ chiều rộng */
    height: 100%;              /* Chiếm toàn bộ chiều cao */
    background-color: rgba(0, 0, 0, 0.6); /* Màu đen trong suốt 60% */
    z-index: 1010;             /* Nằm trên thanh nav nhưng dưới popup */
    display: none;             /* Ẩn đi mặc định */
    opacity: 0;                /* Độ mờ ban đầu là 0 */
    transition: opacity 0.3s ease; /* Hiệu ứng xuất hiện/biến mất mượt mà */
}
/* Class để hiển thị overlay */
#xuanmedia_overlay.xuanmedia_visible {
    display: block;            /* Hiển thị */
    opacity: 1;                /* Hiện rõ */
}

/* --- Popup Danh mục --- */
#xuanmedia_category-popup {
    position: fixed;           /* Cố định vị trí */
    bottom: 0;                 /* Sát cạnh dưới */
    left: 0;
    right: 0;
    height: 90vh;              /* Chiều cao bằng 85% chiều cao màn hình */
    /* max-height: 600px;         Giới hạn chiều cao tối đa */
    background-color: #f9fafb; /* Màu nền trắng xám nhạt */
    z-index: 9999999;             /* Nằm trên cùng (trên cả overlay) */
    border-top-left-radius: 16px;  /* Bo tròn góc trên trái */
    border-top-right-radius: 16px; /* Bo tròn góc trên phải */
    box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.15); /* Đổ bóng mạnh hơn */
    display: flex;             /* Sử dụng Flexbox */
    flex-direction: column;    /* Sắp xếp header và content theo chiều dọc */
    transform: translateY(100%); /* Ẩn popup xuống dưới màn hình ban đầu */
    transition: transform 0.3s ease-out; /* Hiệu ứng trượt lên/xuống mượt mà */
    overflow: hidden;          /* Ẩn các phần tử con tràn ra ngoài */
    font-family: 'Inter', sans-serif; /* Áp dụng font */
}

/* Class để hiển thị popup */
#xuanmedia_category-popup.xuanmedia_visible {
    transform: translateY(0); /* Trượt popup lên để hiển thị */
}

/* Header của Popup */
.xuanmedia_popup-header {
    display: flex;             /* Sử dụng Flexbox */
    justify-content: space-between; /* Đẩy tiêu đề và nút đóng ra hai bên */
    align-items: center;       /* Căn giữa theo chiều dọc */
    padding: 12px 16px;        /* Khoảng đệm */
    background-color: #ee2e24; /* Màu nền là màu chủ đạo */
    color: white;              /* Màu chữ trắng */
    flex-shrink: 0;            /* Không cho phép header co lại khi nội dung dài */
}

.xuanmedia_popup-header h3 {
    font-size: 16px;           /* Cỡ chữ tiêu đề */
    font-weight: 600;          /* Độ đậm */
    margin: 0;                 /* Bỏ margin mặc định của thẻ h3 */
    color: #fff;
    text-transform: uppercase;
}

/* Nút đóng Popup (dấu X) */
.xuanmedia_popup-close-btn {
    background: none;          /* Không có nền */
    border: none;              /* Không có viền */
    color: white;              /* Màu trắng */
    font-size: 24px;           /* Cỡ chữ lớn */
    font-weight: bold;         /* In đậm */
    cursor: pointer;           /* Con trỏ bàn tay */
    padding: 5px;              /* Thêm chút đệm để dễ click */
    line-height: 1;            /* Đảm bảo chiều cao vừa khít */
    margin: 0;
}

/* Phần nội dung chính của Popup (chứa sidebar và main content) */
.xuanmedia_popup-content {
    display: flex;             /* Sử dụng Flexbox để xếp sidebar và content ngang nhau */
    flex-grow: 1;              /* Cho phép phần này chiếm hết không gian dọc còn lại */
    overflow: hidden;          /* Quan trọng: Ngăn scroll toàn bộ popup, chỉ scroll bên trong sidebar/content */
}

/* Sidebar bên trái của Popup */
.xuanmedia_popup-sidebar {
    width: 100px;              /* Chiều rộng cố định */
    background-color: #e5e7eb; /* Màu nền xám nhạt */
    overflow-y: auto;          /* Cho phép scroll theo chiều dọc nếu nội dung dài */
    flex-shrink: 0;            /* Không cho phép sidebar co lại */
    padding: 8px 0;            /* Đệm trên dưới */
}

/* Từng mục trong Sidebar */
.xuanmedia_popup-sidebar-item {
    display: flex;             /* Sử dụng Flexbox */
    flex-direction: column;    /* Sắp xếp icon và text theo chiều dọc */
    align-items: center;       /* Căn giữa ngang */
    padding: 10px 5px;         /* Khoảng đệm */
    cursor: pointer;           /* Con trỏ bàn tay */
    border-left: 4px solid transparent; /* Viền trái ẩn để giữ layout khi active */
    transition: background-color 0.2s ease, border-color 0.2s ease; /* Hiệu ứng chuyển màu */
}
/* Hiệu ứng khi di chuột qua mục sidebar */
 .xuanmedia_popup-sidebar-item:hover {
     background-color: #d1d5db; /* Đổi màu nền đậm hơn chút */
 }

/* Trạng thái Active của mục sidebar */
.xuanmedia_popup-sidebar-item.xuanmedia_active {
    background-color: #f9fafb; /* Màu nền giống khu vực nội dung chính */
    border-left-color: #ee2e24; /* Hiển thị viền trái màu chủ đạo */
    font-weight: 600;          /* In đậm chữ */
}
/* Đổi màu chữ của mục sidebar active */
.xuanmedia_popup-sidebar-item.xuanmedia_active span {
     color: #ee2e24;
}

/* Icon SVG trong mục sidebar */
.xuanmedia_popup-sidebar-item svg {
    width: 24px;
    height: 24px;
    margin-bottom: 4px;
    color: #4b5563;            /* Màu icon mặc định */
}
/* Đổi màu icon khi mục sidebar active */
 .xuanmedia_popup-sidebar-item.xuanmedia_active svg {
     color: #ee2e24;
 }

/* Text trong mục sidebar */
.xuanmedia_popup-sidebar-item span {
    font-size: 11px;           /* Cỡ chữ nhỏ */
    text-align: center;        /* Căn giữa */
    color: #374151;            /* Màu chữ */
}

/* Khu vực nội dung chính bên phải của Popup */
.xuanmedia_popup-main-content {
    flex-grow: 1;              /* Chiếm hết không gian ngang còn lại */
    padding: 16px;             /* Khoảng đệm */
    overflow-y: auto;          /* Cho phép scroll dọc nếu nội dung dài */
    background-color: #f9fafb; /* Màu nền */
}

/* Tiêu đề của mỗi khu vực danh mục con */
.xuanmedia_category-section h4 {
    font-size: 15px;           /* Cỡ chữ */
    font-weight: 600;          /* Độ đậm */
    margin-top: 0;             /* Bỏ margin top mặc định */
    margin-bottom: 12px;       /* Khoảng cách dưới */
    color: #1f2937;            /* Màu chữ */
}
/* Thêm khoảng cách trên cho các tiêu đề không phải đầu tiên */
.xuanmedia_category-section + .xuanmedia_category-section h4, /* Tiêu đề đầu tiên của section thứ 2 trở đi */
.xuanmedia_category-section h4 + h4 { /* Tiêu đề thứ 2 trở đi trong cùng section (nếu có) */
     margin-top: 16px;
}

/* Container chứa các link danh mục con */
.xuanmedia_category-links {
    display: flex;             /* Sử dụng Flexbox */
    flex-wrap: wrap;           /* Cho phép các link xuống dòng nếu không đủ chỗ */
    gap: 8px;                  /* Khoảng cách giữa các link */
}

/* Từng link danh mục con */
.xuanmedia_category-links a {
    background-color: #e5e7eb; /* Màu nền xám */
    color: #374151;            /* Màu chữ */
    padding: 6px 12px;         /* Đệm bên trong */
    border-radius: 16px;       /* Bo tròn các góc */
    font-size: 12px;           /* Cỡ chữ */
    text-decoration: none;     /* Bỏ gạch chân */
    transition: background-color 0.2s ease, color 0.2s ease; /* Hiệu ứng chuyển màu */
}
/* Hiệu ứng khi di chuột qua link danh mục con */
.xuanmedia_category-links a:hover {
    background-color: #d1d5db; /* Đổi màu nền */
    color: #1f2937;            /* Đổi màu chữ */
}

/* Custom checkout */
.checkout.woocommerce-checkout .row .large-7.col {
    order: 1;
}

/* Hide search icon default */
.mobile-nav .header-search.header-search-lightbox{
	display: none;
}
#button-contact-vr {
	right: 0;
	bottom: 70px !important;
	z-index: 999 !important;
}
#payment #place_order {
	width: 100%;
}