/*
Theme Name: Astra Child
Theme URI: https://wpastra.com/
Template: astra
Author: Brainstorm Force
Author URI: https://wpastra.com/about/?utm_source=theme_preview&utm_medium=author_link&utm_campaign=astra_theme
Description: The Astra WordPress theme is lightning-fast and highly customizable. It has over 1 million downloads and the only theme in the world with 6,000+ five-star reviews! It’s ideal for professional web designers, solopreneurs, small businesses, eCommerce, membership sites and any type of website. It offers special features and templates so it works perfectly with all page builders like Spectra, Elementor, Beaver Builder, etc. Fast performance, clean code, mobile-first design and schema markup are all built-in, making the theme exceptionally SEO-friendly. It’s fully compatible with WooCommerce, SureCart and other eCommerce plugins and comes with lots of store-friendly features and templates. Astra also provides expert support for free users. A dedicated team of fully trained WordPress experts are on hand to help with every aspect of the theme. Try the live demo of Astra: https://zipwp.org/themes/astra/
Tags: custom-menu,custom-logo,entertainment,one-column,two-columns,left-sidebar,e-commerce,right-sidebar,custom-colors,editor-style,featured-images,full-width-template,microformats,post-formats,rtl-language-support,theme-options,threaded-comments,translation-ready,blog
Version: 4.11.18.1767160279
Updated: 2025-12-31 05:51:19

*/
/* --- MEGA MENU CUSTOM STYLE CHUẨN HID --- */
/* --- MEGA MENU CUSTOM STYLE CHUẨN HID --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
:root {
    --hid-blue: #003da5;
    --hid-blue-hover: #00adef;
}

#hid-mega-products {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    background: #ffffff;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
    z-index: 999999;
    font-family: 'Inter', sans-serif !important; 
    border-top: 1px solid #e0e0e0;
}

.main-navigation a, 
.ast-primary-menu-links a,
.hid-products-link a {
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important; /* Độ đậm vừa phải cho sang */
    letter-spacing: -0.01em; /* Ép sát chữ một chút theo phong cách Apple/HID */
}

/* ÉP XÓA GẠCH CHÂN CHO TẤT CẢ LINK TRONG MEGA MENU */
#hid-mega-products a, 
#hid-mega-products a b, 
#hid-mega-products a:hover, 
#hid-mega-products a:active, 
#hid-mega-products a:focus {
    text-decoration: none !important; /* Xóa gạch chân dứt điểm */
    border-bottom: none !important;  /* Xóa đường kẻ dưới nếu có */
    outline: none !important;
    box-shadow: none !important;
    cursor: pointer !important;
    transition: color 0.2s ease-in-out;
}

.hid-mega-inner {
    display: flex;
    max-width: 1400px;
    margin: 0 auto;
    min-height: 480px;
}

/* Cột trái xám - Xóa đường kẻ dọc */
.hid-sidebar {
    width: 280px;
    background: #f7f7f7;
    padding: 25px 0;
    flex-shrink: 0;
    border-right: none !important;
}

.hid-tab-item {
    padding: 12px 35px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    color: #555;
    border-left: 4px solid transparent;
}

.hid-tab-item.active {
    background: #ffffff;
    color: var(--hid-blue);
    border-left-color: var(--hid-blue);
}

.hid-content {
    flex: 1;
    padding: 35px 50px;
    display: none;
}

.hid-content.active { display: block; }

/* Định dạng tiêu đề lớn màu xanh */
.hid-title-main {
    color: var(--hid-blue) !important;
    font-size: 20px !important;
    font-weight: 650 !important;
    display: block !important;
    margin-bottom: 8px !important;
}

/* Hiệu ứng Hover chuyển sang màu xanh sáng hơn */
.hid-title-main:hover,
.p-box a:hover b {
    color: var(--hid-blue-hover) !important;
}

.hid-desc { color: #777; font-size: 13px; margin-bottom: 25px; line-height: 1.5; }

.hid-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }

/* Nhãn cột: Hardware/Software */
.hid-col-label {
    text-transform: uppercase;
    font-size: 12px;
    border-bottom: 1px solid #eee;
    padding-bottom: 8px;
    margin-bottom: 15px;
    color: #333;
    font-weight: bold;
}

/* Tên sản phẩm màu xanh */
.p-box { margin-bottom: 20px; }

.p-box a b {
    color: var(--hid-blue);
    font-size: 14.5px !important;
    display: block;
    margin-bottom: 3px;
}

.p-box span { color: #555; font-size: 12.5px; line-height: 1.4; display: block; }

/* 1. Giữ màu xanh sáng cho mục Sản phẩm khi bảng Menu đang mở */
.hid-products-link.is-active > a {
    color: var(--hid-blue-hover) !important;
    position: relative;
    /* THÊM DÒNG NÀY: Xóa viền vuông khi click */
    outline: none !important; 
    box-shadow: none !important;
}

/* 2. Xóa viền vuông cho tất cả trạng thái của link sản phẩm */
.hid-products-link a:focus, 
.hid-products-link a:active {
    outline: none !important;
    box-shadow: none !important;
}

/* 3. Đường gạch dưới chân mục đang mở (giống HID) */
.hid-products-link.is-active > a::after {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--hid-blue-hover);
}

/* Đảm bảo danh sách menu là một khối Flex tràn 100% chiều rộng */
.main-header-menu, 
.ast-primary-menu-links, 
#ast-hf-menu-1 {
    display: flex !important;
    width: 100% !important;
    align-items: center !important;
}

/* Ép menu Primary dàn trải để margin-left hoạt động */
.main-header-menu, #ast-hf-menu-1 {
    display: flex !important;
    width: 100% !important;
    align-items: center !important;
}


/* ===== PRIMARY MENU FLEX FIX ===== */
.ast-primary-header-bar
.main-header-menu,
.ast-primary-header-bar
.ast-nav-menu {
    display: flex !important;
    align-items: center;
    width: 100%;
    flex-wrap: nowrap;
}


.hid-menu-spacer {
    flex: 1 1 auto;
}

/* Search + Contact */
.hid-secondary-item a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
	color: #00adef;
    text-decoration: none !important;
    font-family: 'Inter', sans-serif;
    transition: color .2s ease;
}

.hid-secondary-item a:hover {
    color: #003da5;
}

.hid-secondary-item a {
    display: inline-flex;
    align-items: center;
    gap: 6px;                 /* KHOẢNG CÁCH ICON + TEXT */
    white-space: nowrap;
    font-weight: 600;
    color: #003da5;
    text-decoration: none !important;
}

/* Khoảng cách giữa Search và Contact */
.hid-contact-item {
    margin-left: 24px;
}

.hid-secondary-item .dashicons {
    font-size: 16px;
    line-height: 1;
}

/* ===== FORCE MENU FULL WIDTH ===== */
.ast-primary-header-bar {
    display: flex;
}

.ast-primary-header-bar .ast-container {
    max-width: 100% !important;
    width: 100%;
}

.ast-primary-header-bar .main-header-bar-navigation {
    flex: 1;
}

/* Menu UL */
.ast-primary-header-bar .main-header-menu {
    display: flex !important;
    align-items: center;
    width: 100%;
}

/* ===== FIX MENU ALIGNMENT ===== */

/* ===== FORCE ASTRA MENU LAYOUT ===== */

/* Trả menu về flex hàng ngang */
#ast-hf-menu-1 {
  display: flex !important;
  align-items: center;
}

/* ÉP tất cả menu item về row */
#ast-hf-menu-1 > li.menu-item {
  flex-direction: row !important;
  justify-content: flex-start !important;
}

/* Spacer thực sự hoạt động */
#ast-hf-menu-1 > li.hid-menu-spacer {
  flex: 1 1 auto !important;
}

/* Nhóm item bên phải */
#ast-hf-menu-1 > li.hid-secondary-item {
  flex-direction: row !important;
  align-items: center;
}

/* Khoảng cách giữa Search & Contact */
#ast-hf-menu-1 > li.hid-search-trigger {
  margin-right: 20px;
}

/* Style chữ */
#ast-hf-menu-1 > li.hid-secondary-item > a {
  color: #003087;
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

/* Icon search */
#ast-hf-menu-1 > li.hid-search-trigger > a::before {
  content: "🔍";
  margin-right: 6px;
  font-size: 14px;
}

/* ========================================================= */
/* === GLOBAL STICKY HEADER (Dùng cho toàn bộ website) === */
/* ========================================================= */

/* 1. Dán dính thanh Header chính (Logo + Menu) */
#masthead, .site-header, .ast-main-header-wrap {
    position: sticky !important;        
    position: -webkit-sticky !important; 
    top: 0;                   
    z-index: 999999 !important; /* Lớp cao nhất để đè mọi nội dung */
    
    background-color: #ffffff !important; /* Nền trắng đục để không bị lộ chữ khi cuộn */
    width: 100%;             
    box-shadow: 0 4px 10px rgba(0,0,0,0.05); /* Bóng mờ nhẹ tách biệt nội dung */
    transition: top 0.3s ease;
}

/* 2. Fix lỗi Admin Bar che mất menu (Khi bạn đang đăng nhập) */
.admin-bar #masthead, .admin-bar .site-header, .admin-bar .ast-main-header-wrap {
    top: 32px; 
}
@media screen and (max-width: 782px) {
    .admin-bar #masthead, .admin-bar .site-header, .admin-bar .ast-main-header-wrap {
        top: 46px;
    }
}

/* 3. Đảm bảo Mega Menu (Dropdown) bám theo Header */
#hid-mega-products {
    /* Nếu HTML của Mega menu nằm trong Header thì dùng absolute, nếu nằm ngoài thì dùng fixed */
    /* Ở đây ta set mặc định để nó bám theo cha */
    z-index: 999998; 
}