/* Mega menu "Thiết bị" — panel 10 nhóm trong dropdown Flatsome.
Dựng bởi modules/frontend/48-mega-menu-thiet-bi.php
------------------------------------------------------------------------- */
/* --- Khung xổ: rộng đúng bằng khung chứa, thẳng hàng với ảnh hero ----------
Mặc định Flatsome neo dropdown vào chính thẻ `` của mục menu, nên nó bám
theo vị trí chữ "Thiết bị" — lệch hẳn so với hero.
Cách sửa: bỏ neo ở `` (`position: static`) để dropdown neo lên phần tử
được định vị gần nhất là `.header-inner`, vốn chính là `.container` mà hero
cũng nằm trong. Từ đó `left/right: 15px` cho ra đúng mép nội dung của khung —
trùng khít mép ảnh hero.
`position: relative` viết lại cho `.header-inner` là lưới an toàn: nếu theme
đã đặt sẵn thì không đổi gì, còn nếu chưa thì dropdown vẫn neo đúng chỗ thay
vì trôi lên tận ``.
⚠️ Chỉ áp cho mục có gắn UX Block. Các mục menu khác giữ nguyên `` định
vị nên dropdown của chúng vẫn bám theo chữ như cũ. */
#masthead .header-inner {
position: relative;
}
#masthead li.menu-item-has-block {
position: static;
}
#masthead li.menu-item-has-block > .nav-dropdown {
/* Flatsome để `display: table` cho dropdown co theo nội dung. Panel này cần
trải hết khung nên phải đổi sang block. */
display: block;
left: 15px; /* = padding-left của .container */
right: 15px;
width: auto;
min-width: 0;
max-width: none;
/* --- Tách khung xổ khỏi hero ------------------------------------------
Site đang đặt `dropdown_shadow = false` và `dropdown_border = #ffffff`,
nên hai cơ chế tách lớp sẵn có của Flatsome đều bị vô hiệu: khung trắng
nằm trên nền trắng, không bóng, không viền — chìm hẳn vào hero.
Bóng đổ là tín hiệu đúng, vì khung xổ là lớp NỔI BÊN TRÊN trang chứ
không phải một khu vực của trang. Màu nền chỉ nói "khác khu vực"; bóng
mới nói "khác tầng".
Viết riêng ở đây thay vì bật lại theme mod, vì `dropdown_shadow` áp cho
MỌI dropdown toàn site — đổi nó là đổi cả các menu khác. */
/* Bóng ĐẬM và bán kính VỪA. Bán kính lớn (28px) tán bóng ra quá loãng, trên
ranh giới trắng-trên-trắng thì mắt không bắt được. */
box-shadow: 0 10px 24px rgba(0, 0, 0, .22);
/* Viền đủ đậm để tự nó đã là một đường phân giới, không phụ thuộc vào bóng.
Mép dưới quan trọng nhất: nó rơi vào giữa thẻ hero trắng. */
border: 1px solid #d6d8dc;
border-top: none; /* mép trên đã liền với thanh menu đỏ */
border-radius: 0 0 8px 8px;
}
.ht-mega {
display: block;
padding: 18px 0 22px;
}
/* Cột trái: 10 tên nhóm.
Dùng lưới 1 cột chứ không phải danh sách trôi, để panel bên phải neo được
theo đúng chiều cao cột. */
.ht-mega__cot {
position: relative;
display: grid;
grid-template-columns: 260px;
gap: 1px;
margin: 0;
list-style: none;
min-height: 340px;
/* Nền xám nhạt: tách danh sách nhóm khỏi các ô bên phải rõ hơn hẳn một
đường kẻ mảnh. Đặt màu ở ĐÂY chứ không phải cả khung xổ — khung xổ giữ
nền trắng để tên sản phẩm bên phải vẫn sắc nét. */
background: #eef0f3;
border-radius: 8px;
padding: 6px;
}
.ht-mega__muc {
position: static; /* panel neo theo .ht-mega__cot, không theo từng mục */
margin: 0;
}
.ht-mega__ten {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 9px 14px;
border-radius: 6px;
color: var(--ht-chu, #111);
font-size: 14px;
line-height: 1.35;
text-decoration: none;
transition: background-color .12s ease, color .12s ease;
}
/* Rê chuột: ĐẢO NGƯỢC sang nền trắng, không phải xám đậm hơn.
Cột trái giờ đã là nền xám, nên trạng thái rê cũ (xám nhạt `#f5f5f5`) sẽ
gần như tàng hình. Nền trắng nổi bật trên xám, và tạo cảm giác mục đang mở
"ăn liền" với panel trắng bên phải — đúng với việc nó đang điều khiển panel đó. */
.ht-mega__muc:hover > .ht-mega__ten,
.ht-mega__muc:focus-within > .ht-mega__ten {
background: #fff;
color: var(--ht-do, #e92326);
box-shadow: 0 1px 3px rgba(0, 0, 0, .07);
}
/* Số sản phẩm — chữ nhỏ, mờ, không tranh chỗ với tên nhóm. */
.ht-mega__so {
flex: none;
color: var(--ht-chu-mo, #8a8a8a);
font-size: 12px;
font-variant-numeric: tabular-nums;
}
/* --- Panel bên phải -------------------------------------------------------
Neo theo .ht-mega__cot (phần tử `position: relative` gần nhất), nên mọi
panel đều bắt đầu ở cùng một toạ độ — bất kể đang mở nhóm thứ mấy.
-------------------------------------------------------------------------- */
.ht-mega__panel {
position: absolute;
top: 0;
left: 296px; /* 260px cột + 12px padding cột + 24px thở */
right: 0;
display: none;
grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
align-content: start;
gap: 2px 18px;
padding-left: 4px;
min-height: 340px;
/* Bỏ `border-left`: nền xám của cột trái đã làm việc ngăn cách, thêm kẻ
nữa là thừa. */
}
.ht-mega__muc:hover > .ht-mega__panel,
.ht-mega__muc:focus-within > .ht-mega__panel {
display: grid;
}
/* Khi chưa rê vào nhóm nào thì hiện sẵn nhóm đầu tiên — panel không bao giờ
trống, và khách thấy ngay đây là menu có nội dung. */
.ht-mega__cot:not(:hover):not(:focus-within) .ht-mega__muc:first-child > .ht-mega__panel {
display: grid;
}
.ht-mega__o {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 8px;
padding: 7px 10px;
border-radius: 5px;
color: var(--ht-chu, #111);
font-size: 13.5px;
line-height: 1.4;
text-decoration: none;
transition: background-color .12s ease, color .12s ease;
}
.ht-mega__o:hover,
.ht-mega__o:focus-visible {
background: var(--ht-nen-nhat, #f5f5f5);
color: var(--ht-do, #e92326);
}
.ht-mega__o-so {
flex: none;
color: var(--ht-chu-mo, #8a8a8a);
font-size: 11.5px;
font-variant-numeric: tabular-nums;
}
/* --- Cột "Theo thương hiệu" -----------------------------------------------
Mục thứ 11 của cột trái, tách khỏi 10 nhóm thiết bị bằng một đường kẻ —
đây là trục điều hướng KHÁC (theo hãng, không theo loại thiết bị), nên nó
cần đọc ra là khác chứ không phải nhóm thứ 11.
-------------------------------------------------------------------------- */
.ht-mega__muc--th {
margin-top: 6px;
padding-top: 7px;
border-top: 1px solid #dcdee2;
}
/* Panel thương hiệu chia theo 6 lĩnh vực, mỗi lĩnh vực một cột có tiêu đề —
khác panel thiết bị vốn là lưới ô phẳng. Cột hẹp hơn (160px) vì tên hãng
ngắn hơn tên danh mục, và cần đủ chỗ cho 6 cột. */
.ht-mega__panel--th {
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 0 14px;
align-content: start;
}
.ht-mega__th-cot {
display: flex;
flex-direction: column;
min-width: 0;
}
.ht-mega__th-dau {
padding: 0 10px 5px;
margin-bottom: 3px;
border-bottom: 1px solid #e6e8eb;
color: var(--ht-chu-mo, #6b6b6b);
font-size: 11.5px;
font-weight: 600;
line-height: 1.3;
text-transform: uppercase;
letter-spacing: .03em;
}
/* Tên hãng dài hơn ô danh mục nên cho phép cắt bằng dấu ba chấm thay vì xuống
dòng — cột 160px mà xuống dòng là các cột lệch nhau chiều cao. */
.ht-mega__panel--th .ht-mega__o {
padding: 5px 10px;
font-size: 13px;
}
.ht-mega__panel--th .ht-mega__o > :first-child,
.ht-mega__th-cot .ht-mega__o {
min-width: 0;
}
.ht-mega__th-them {
padding: 5px 10px;
color: var(--ht-chu-mo, #8a8a8a);
font-size: 11.5px;
font-style: italic;
text-decoration: none;
}
.ht-mega__th-them:hover,
.ht-mega__th-them:focus-visible {
color: var(--ht-do, #e92326);
}
/* --- Màn hẹp --------------------------------------------------------------
Dưới 1100px, đặt panel cạnh cột trái sẽ bóp cả hai đến mức không đọc được.
Chuyển sang xếp dọc: nhóm nào đang mở thì panel nằm ngay dưới nó.
Đây chỉ là lưới an toàn cho tablet. Menu di động KHÔNG dùng khối này — xem
cảnh báo trong 48-mega-menu-thiet-bi.php: Flatsome xoá mục con của mục có
gắn UX Block, nên `primary_mobile` phải trỏ vào một menu riêng.
-------------------------------------------------------------------------- */
@media (max-width: 1100px) {
.ht-mega__cot {
grid-template-columns: 1fr;
min-height: 0;
/* Xếp dọc thì panel nằm BÊN TRONG cột, nên giữ nền xám là tô luôn cả
các ô sản phẩm. Trả về trong suốt, để đường kẻ bên dưới lo việc phân cấp. */
background: none;
padding: 0;
}
.ht-mega__muc {
position: relative;
}
.ht-mega__panel {
position: static;
left: auto;
min-height: 0;
padding: 4px 0 10px 14px;
border-left: 2px solid var(--ht-vien, #e5e5e5);
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
/* Panel thương hiệu xếp dọc: 6 lĩnh vực thành 2–3 cột thay vì 6, kẻo mỗi
cột chỉ còn vài chục pixel. */
.ht-mega__panel--th {
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.ht-mega__cot:not(:hover):not(:focus-within) .ht-mega__muc:first-child > .ht-mega__panel {
display: none; /* xếp dọc thì mở sẵn một nhóm là đẩy các nhóm khác xuống */
}
}