/*
Theme Name: Woodmart Child
Theme URI: https://woodmart.xtemos.com/
Template: woodmart
Author: XTemos
Author URI: http://themeforest.net/user/xtemos
Description: ThemeForest Premium Theme
Tags: one-column,two-columns,right-sidebar,custom-header,custom-menu,editor-style,featured-images,microformats,post-formats,sticky-post,translation-ready
Version: 6.5.0.1729226792
Updated: 2024-10-18 11:46:32

*/
/* ===== Horizontal Scroll Menu (Mobile) ===== */

/* Container bao bọc menu */
.horizontal-scroll-menu-container {
    display: none; /* Mặc định sẽ ẩn trên máy tính */
    position: fixed;
    top: 110px; /* Căn chỉnh khoảng cách này cho phù hợp với chiều cao header của bạn */
    left: 0;
    right: 0;
    width: 100%;
    z-index: 100;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.08); /* Thêm bóng mờ nhẹ để thanh menu nổi bật hơn */
}

/* Chỉ hiển thị menu này trên thiết bị di động (màn hình nhỏ hơn 768px) */
@media (max-width: 767.98px) {
    .horizontal-scroll-menu-container {
        display: block; /* Hiển thị trên di động */
    }
    
    /* QUAN TRỌNG: Thêm một khoảng đệm cho nội dung chính của trang 
       để nó không bị thanh menu trượt ngang che khuất.
       Bạn có thể cần điều chỉnh giá trị 50px này. */
    body .main-page-wrapper {
        padding-top: 50px; 
    }
}

/* Định dạng cho chính menu */
.horizontal-scroll-menu {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    padding: 10px 15px;
    margin: 0;
    list-style: none;
}

/* Ẩn thanh cuộn trên các trình duyệt Webkit (Chrome, Safari) */
.horizontal-scroll-menu::-webkit-scrollbar {
    display: none;
}

/* Các mục trong menu */
.horizontal-scroll-menu .menu-item {
    margin-right: 20px; /* Khoảng cách giữa các mục */
}

.horizontal-scroll-menu .menu-item:last-child {
    margin-right: 0;
}

/* Các liên kết trong menu */
.horizontal-scroll-menu .menu-item a {
    text-decoration: none;
    color: #666;
    font-weight: bold;
    font-size: 16px;
    padding-bottom: 5px; /* Thêm khoảng đệm dưới để gạch chân không quá sát chữ */
}

/* Định dạng cho mục menu đang được chọn (active) */
.horizontal-scroll-menu .menu-item a.active {
    color: #0058bf;
    border-bottom: 2px solid #0058bf;
}


/* ===== Modal Styles ===== */
/* Đây là CSS cho modal mà chúng ta đã tách ra từ header.php */
.modal {
  display: none; 
  position: fixed;
  z-index: 99999;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.5);
}

.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 90%;
  max-width: 600px; /* Thêm chiều rộng tối đa cho màn hình lớn */
  position: relative;
  border-radius: 5px;
}

.modal .close {
  color: #aaaaaa;
  position: absolute;
  top: 5px;
  right: 15px;
  font-size: 38px;
  font-weight: bold;
  cursor: pointer;
}

.modal .close:hover,
.modal .close:focus {
  color: #000;
}
/* ===== BỔ SUNG SỬA LỖI LAYOUT & SLIDER ===== */

/* 1. Xóa khoảng trống padding-top trên toàn trang */
body .main-page-wrapper {
    padding-top: 0 !important;
}

/* 2. Chỉ tạo khoảng trống trên trang chủ có menu ngang */
.home .main-page-wrapper {
    padding-top: 50px !important;
}

/* 3. Chỉnh banner slide tràn viền trên di động */
@media (max-width: 767.98px) {
    .home .elementor-widget-wd_slider .wd-slider-wrapper {
        width: 100vw;
        margin-left: calc(-50vw + 50%);
    }
}

/* 4. Sửa lỗi slider đè lên thanh ngang bên dưới */
.home .elementor-section.elementor-top-section {
    position: relative;
    z-index: 1; /* Đảm bảo các section khác không bị slider đè lên */
}