/*
Theme Name:           Flatsome
Theme URI:            http://flatsome.uxthemes.com
Author:               UX-Themes
Author URI:           https://uxthemes.com
Description:          Multi-Purpose Responsive WooCommerce Theme
Version:              3.20.5
Requires at least:    6.4
Requires PHP:         7.4
WC requires at least: 8.3
Text Domain:          flatsome
License:              https://themeforest.net/licenses
License URI:          https://themeforest.net/licenses
*/


/***************
All custom CSS should be added to Flatsome > Advanced > Custom CSS,
or in the style.css of a Child Theme.
***************/
/* ==========================================================================
   TỔNG HỢP TOÀN BỘ CSS PREMIUM CHO VERTICAL MEGA MENU (FULL TÍNH NĂNG)
   ========================================================================== */

/* 1. KHUNG MENU CHA NGOÀI CÙNG (.header-vertical-menu__fly-out) */
.header-vertical-menu__fly-out.has-shadow {
    background-color: #ffffff !important;
    border: 1px solid #eef2f6 !important;
    border-radius: 0 0 12px 12px !important; /* Bo góc đáy mịn màng */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important; /* Đổ bóng có chiều sâu */
    padding: 8px 0 !important;
    margin-top: 0 !important;
    
    /* Bắt buộc giữ hiển thị visible để menu con bung sang phải không bị cắt */
    overflow: visible !important; 
    position: absolute !important; 
}


/* 2. CẤU HÌNH THANH CUỘN DỌC TRÊN DANH SÁCH MENU CHA (SỬA LỖI MẤT HOVER) */
ul.ux-nav-vertical-menu {
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    
    /* Giới hạn chiều cao menu cha theo màn hình và tạo cuộn dọc */
    max-height: calc(100vh - 200px) !important; 
    overflow-y: auto !important;
    
    /* Mẹo giải phóng để menu con không bị khóa trong vùng cuộn */
    position: static !important; 
    scrollbar-width: thin !important;
    scrollbar-color: #cbd5e1 transparent !important;
}

/* Phá bỏ định vị của li để menu con căn chuẩn theo khung lớn ngoài cùng */
ul.ux-nav-vertical-menu > li.menu-item {
    position: static !important; 
    border: none !important;
    padding: 0 8px !important;
    margin-bottom: 2px !important;
}


/* 3. ĐỘ THANH CUỘN (SCROLLBAR) SIÊU MẢNH CHO MENU CHA */
ul.ux-nav-vertical-menu::-webkit-scrollbar {
    width: 5px !important; /* Độ rộng thanh cuộn chỉ 5px cực tinh tế */
}
ul.ux-nav-vertical-menu::-webkit-scrollbar-track {
    background: transparent !important;
}
ul.ux-nav-vertical-menu::-webkit-scrollbar-thumb {
    background-color: #cbd5e1 !important; /* Màu thanh cuộn mặc định */
    border-radius: 10px !important;
    transition: background-color 0.2s ease !important;
}
ul.ux-nav-vertical-menu::-webkit-scrollbar-thumb:hover {
    background-color: #09680C !important; /* Đổi sang màu xanh công nghệ khi tương tác */
}

/* 4. CÁC MỤC DANH MỤC CHÍNH (Tivi, Máy lạnh, Tủ lạnh,...) */
ul.ux-nav-vertical-menu > li.menu-item > a.nav-top-link {
    color: #334155 !important; /* Màu chữ xám tối sang trọng */
    font-size: 14px !important;
    font-weight: 600 !important;
    padding: 10px 15px !important; /* Co gọn padding để menu thông thoáng */
    border-radius: 8px !important; /* Bo góc vệt sáng khi hover */
    letter-spacing: 0.3px !important;
    transition: all 0.25s ease-in-out !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

/* Hiệu ứng HOVER danh mục chính */
ul.ux-nav-vertical-menu > li.menu-item:hover > a.nav-top-link {
    background-color: #f0f7ff !important; /* Nền xanh nhạt hiện đại */
    color: #09680C !important; /* Chuyển chữ sang màu xanh thương hiệu */
    padding-left: 18px !important; /* Đẩy chữ nhẹ nhàng sang phải */
}

/* Tinh chỉnh xoay ngang mũi tên chỉ hướng sang phải */
ul.ux-nav-vertical-menu > li.menu-item > a .icon-angle-down {
    transform: rotate(-90deg) !important; 
    font-size: 11px !important;
    opacity: 0.6 !important;
    transition: all 0.25s ease !important;
}
ul.ux-nav-vertical-menu > li.menu-item:hover > a .icon-angle-down {
    opacity: 1 !important;
    color: #09680C !important;
}


/* 5. KHUNG DROPDOWN MEGA MENU BUNG SANG PHẢI */
.header-vertical-menu__fly-out .nav-dropdown {
    background-color: #ffffff !important;
    border: 1px solid #eef2f6 !important;
    border-radius: 12px !important; /* Đồng bộ bo góc với menu cha */
    box-shadow: 15px 15px 40px rgba(0, 0, 0, 0.08) !important; /* Đổ bóng rộng cao cấp */
    padding: 25px 10px !important;
    
    /* Cố định vị trí: Luôn bằng đỉnh menu cha và nằm sát cạnh phải */
    top: 0 !important;
    left: 100% !important; 
    margin-left: 5px !important; /* Khoảng hở nhỏ tinh tế */
}

/* Tối ưu hóa các cột bên trong Mega Menu */
.cl-col-mega-menu {
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
}
@media (min-width: 850px) {
    .cl-col-mega-menu:not(:last-child):not(.large-12) {
        border-right: 1px solid #f1f5f9 !important; /* Vách ngăn mờ giữa các cột */
    }
}
.cl-col-mega-menu .col-inner { padding: 0 !important; }


/* 6. TIÊU ĐỀ KHỐI NỔI BẬT (Loại màn hình:, Kích thước:, Các hãng:) */
.cl-col-mega-menu .text p,
.cl-col-mega-menu .text p span,
.cl-col-mega-menu .text p span strong {
    font-size: 13.5px !important;
    color: #0f172a !important; /* Đen Slate đậm */
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important; /* Giãn chữ chuẩn UI */
    
    /* Thanh màu đứng nhận diện thương hiệu bên trái tiêu đề */
    border-left: 3px solid #09680C !important; 
    padding-left: 10px !important;
    
    margin-top: 10px !important;
    margin-bottom: 16px !important; /* Khoảng cách thông thoáng với nội dung dưới */
    display: block !important;
    line-height: 1 !important;
}


/* 7. BIẾN LIÊN KẾT LIÊN TIẾP THÀNH HỘP CHIPS (LED, QLED, KÍCH THƯỚC) */
.cl-col-mega-menu .text ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 25px 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
}
.cl-col-mega-menu .text ul li {
    font-size: 0 !important; /* Ẩn hoàn toàn dấu gạch đứng " | " thô kệch */
    margin: 0 !important;
    padding: 0 !important;
}
.cl-col-mega-menu .text ul li a {
    display: inline-block !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #475569 !important;
    background-color: #f8fafc !important; /* Nền xám nhẹ dạng tag */
    border: 1px solid #e2e8f0 !important;
    padding: 5px 10px !important;
    border-radius: 6px !important;
    text-decoration: none !important;
    transition: all 0.15s ease-in-out !important;
}
.cl-col-mega-menu .text ul li a:hover {
    background-color: #09680C !important; /* Nền xanh khi hover */
    color: #ffffff !important; /* Chữ trắng */
    border-color: #09680C !important;
    box-shadow: 0 4px 12px rgba(42, 131, 233, 0.15) !important;
}


/* 8. DANH SÁCH HÃNG THEO DÒNG MƯỢT MÀ (DẠNG LIST DỌC) */
.cl-col-cell-mega-menu, 
.cl-col-cell-mega-menu.ux-menu--divider-solid, 
.cl-col-cell-mega-menu .ux-menu-link {
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.cl-col-cell-mega-menu a.ux-menu-link__link {
    padding: 8px 12px !important;
    color: #475569 !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    align-items: center;
}
.cl-col-cell-mega-menu a.ux-menu-link__link:hover {
    background-color: #f1f5f9 !important;
    color: #09680C !important;
    padding-left: 18px !important; /* Hiệu ứng trượt nhẹ sang phải */
}
.cl-col-cell-mega-menu a.ux-menu-link__link i { display: none !important; }

/* ==========================================================================
   BỘ CSS BANNER TRANG CHỦ HOÀN CHỈNH - CÓ VÁCH ĐỐI XỨNG HAI BÊN TIÊU ĐỀ
   ========================================================================== */

/* 1. KHUNG HÀNG TỔNG (.cl-row-title-homepage) */
.cl-row-title-homepage {
    display: flex !important;
    align-items: center !important;
    
    background-color: #09680C !important; /* MÀU NỀN CHÍNH WEBSITE (Thay đổi tùy ý) */
    
    padding: 12px 20px !important; 
    border-radius: 8px !important; 
    margin-bottom: 25px !important;
    border: none !important;
}


/* 2. CỘT TIÊU ĐỀ TRÁI - CÓ VÁCH ĐÔI HAI BÊN (.cl-col-title-homepage) */
.cl-col-title-homepage {
    padding: 0 !important;
}

/* Ép cụm tiêu đề dạt về sát cạnh phải của cột */
.cl-col-title-homepage .col-inner {
    display: flex !important;
    justify-content: flex-end !important; /* CĂN LỀ PHẢI */
    width: 100% !important;
}

.cl-cell-title-homepage p {
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    
    /* 🛠️ MẸO QUAN TRỌNG: Ẩn dấu gạch | gõ tay trong UX Builder để không bị lỗi font lệch hàng */
    font-size: 0 !important; 
}

/* [VÁCH TRÁI] - Thanh màu trắng trước chữ tiêu đề */
.cl-cell-title-homepage p::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 20px;
    background-color: #ffffff !important;
    border-radius: 4px !important;
    margin-right: 12px !important; /* Cách chữ 12px về bên phải */
    flex-shrink: 0 !important;
}

/* [VÁCH PHẢI NGAY TRÊN CSS] - Thanh màu trắng sau chữ tiêu đề */
.cl-cell-title-homepage p::after {
    content: "";
    display: inline-block;
    width: 4px;
    height: 20px;
    background-color: #ffffff !important;
    border-radius: 4px !important;
    margin-left: 12px !important; /* Cách chữ 12px về bên trái */
    flex-shrink: 0 !important;
}

/* Định dạng chữ danh mục (TIVI THÔNG MINH, MÁY LẠNH...) */
.cl-cell-title-homepage p a {
    color: #ffffff !important; /* Chữ trắng hoàn toàn */
    font-size: 18px !important; /* Khôi phục lại kích thước chữ chuẩn */
    font-weight: 800 !important; /* Siêu đậm */
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    text-decoration: none !important;
    transition: opacity 0.2s ease !important;
}
.cl-cell-title-homepage p a:hover {
    opacity: 0.85 !important;
}


/* 3. VÙNG BỘ LỌC PHẢI - CĂN LỀ TRÁI & XỬ LÝ DẤU "|" (.cl-cell-filter-homepage) */
.cl-col-title-homepage-right {
    padding: 0 !important;
}

/* Ép toàn bộ vùng nội dung dạt về sát cạnh trái của cột */
.cl-col-title-homepage-right .col-inner {
    display: flex !important;
    justify-content: flex-start !important; /* CĂN LỀ TRÁI */
    flex-direction: column !important; 
    width: 100% !important;
    padding-left: 20px !important; /* Khoảng cách an toàn giữa Tiêu đề và Bộ lọc */
}

.cl-cell-filter-homepage {
    width: 100% !important;
}

.cl-cell-filter-homepage p {
    margin: 0 0 6px 0 !important; 
    padding: 0 !important;
    line-height: normal !important;
    font-size: 0 !important; /* Ẩn dấu | gõ tay của phần bộ lọc */
    display: block !important; 
    word-wrap: break-word !important;
}
.cl-cell-filter-homepage p:last-child {
    margin-bottom: 0 !important;
}

/* Trả định dạng chữ cho các nhãn tiêu đề phụ (SẤY:, KẾT NỐI DI ĐỘNG:) */
.cl-cell-filter-homepage p strong,
.cl-cell-filter-homepage p span {
    font-size: 13px !important; 
    color: #ffffff !important; 
    margin-right: 6px !important;
    display: inline-block !important;
    vertical-align: middle !important;
    text-transform: uppercase !important;
}

/* Định dạng các đường link bộ lọc thành nút bấm trắng chữ xanh */
.cl-cell-filter-homepage a {
    display: inline-block !important;
    vertical-align: middle !important;
    padding: 5px 12px !important; 
    margin: 3px 4px !important; 
    
    background-color: #ffffff !important; 
    color: #09680C !important; /* ĐỔI KHỚP MÀU NỀN CHÍNH WEB BẠN */
    
    font-size: 12px !important; 
    font-weight: 700 !important; 
    border-radius: 4px !important; 
    border: 1px solid #ffffff !important;
    text-decoration: none !important;
    white-space: nowrap !important; 
    transition: all 0.25s ease-in-out !important;
}

/* Hiệu ứng tương tác rê chuột vào nút bộ lọc */
.cl-cell-filter-homepage a:hover {
    background-color: rgba(255, 255, 255, 0.2) !important; 
    color: #ffffff !important; 
    border-color: #ffffff !important; 
    transform: translateY(-1px) !important; 
}

/* [ĐIỆN THOẠI] - làm rung lắc */
/* 1. Hiệu ứng rung lắc dữ dội */
@keyframes shake-intense {
  0%, 100% { transform: rotate(0deg); }
  10%, 30%, 50%, 70%, 90% { transform: rotate(-25deg); }
  20%, 40%, 60%, 80% { transform: rotate(25deg); }
}

/* 2. Hiệu ứng tỏa hào quang (Pulse) */
@keyframes pulse-red {
  0% { box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7); }
  70% { box-shadow: 0 0 0 15px rgba(255, 0, 0, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 0, 0, 0); }
}

/* Áp dụng cho icon */
.mobile-hotline-icon {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
  background-color: #ffffff; /* Nền đỏ để icon trắng nổi bật */
  border-radius: 50%;
  color: #ff0000 !important; /* Icon màu trắng */
  font-size: 22px;
  
  /* Gọi hiệu ứng */
  animation: shake-intense 1.5s ease-in-out infinite, pulse-red 1.5s infinite;
}