/** * IDN Header — sao chép giao diện Printgo. * Mọi selector được scope dưới #idn-header để không ảnh hưởng phần còn lại của * theme Flatsome và để ghi đè CSS mặc định của Flatsome. */ /* ---------- Reset cục bộ ---------- */ #idn-header, #idn-header *, #idn-header *::before, #idn-header *::after { box-sizing: border-box; } #idn-header { background-color: #fff; position: relative; } #idn-header p { margin: 0 0 1em; } #idn-header ul { margin: 0 0 1em; padding: 0; list-style: none; } #idn-header ul ul { margin-bottom: 0; } #idn-header li { list-style: none; } #idn-header a { color: #1890ff; text-decoration: none; background: transparent; outline: none; cursor: pointer; transition: color .3s; } #idn-header a:hover { color: #40a9ff; } #idn-header img { vertical-align: middle; border-style: none; max-width: 100%; } #idn-header button { margin: 0; color: inherit; font: inherit; line-height: inherit; cursor: pointer; } #idn-header .container { max-width: 1500px; padding-left: 25px; padding-right: 25px; margin: auto; width: 100%; } /* ---------- Ant Design icon ---------- */ #idn-header .anticon { display: inline-flex; align-items: center; color: inherit; font-style: normal; line-height: 0; text-align: center; vertical-align: -.125em; } #idn-header .anticon > * { line-height: 1; } #idn-header .anticon svg { display: inline-block; } #idn-header .anticon::before { display: none; } /* ---------- Ant grid ---------- */ #idn-header .ant-row { display: flex; flex-flow: row wrap; min-width: 0; } #idn-header .ant-col { position: relative; max-width: 100%; min-height: 1px; } #idn-header .ant-col-24 { flex: 0 0 100%; max-width: 100%; } #idn-header .ant-col-19 { flex: 0 0 79.16666667%; max-width: 79.16666667%; } #idn-header .ant-col-18 { flex: 0 0 75%; max-width: 75%; } #idn-header .ant-col-14 { flex: 0 0 58.33333333%; max-width: 58.33333333%; } #idn-header .ant-col-6 { flex: 0 0 25%; max-width: 25%; } #idn-header .ant-col-5 { flex: 0 0 20.83333333%; max-width: 20.83333333%; } #idn-header .ant-col-4 { flex: 0 0 16.66666667%; max-width: 16.66666667%; } /* ---------- Ô input tìm kiếm ---------- */ #idn-header .ant-input { box-sizing: border-box; margin: 0; position: relative; display: inline-block; width: 100%; min-width: 0; padding: 4px 11px; color: rgba(0,0,0,.85); font-size: 14px; line-height: 1.5715; background-color: #fff; border: 1px solid #d9d9d9; border-radius: 2px; transition: all .3s; } #idn-header .ant-input::placeholder { color: #bfbfbf; } #idn-header .ant-input:hover, #idn-header .ant-input:focus { border-color: #dbdbdb !important; } #idn-header .ant-input:focus { box-shadow: none !important; outline: 0; } /* ---------- Thanh menu trên (cuộn theo trang) ---------- */ #idn-header .header_main_menu__cJOJo { position: relative; z-index: 999; box-shadow: 0 1px 3px rgba(0,0,0,.04), 0 1px 2px rgba(0,0,0,.08); background: #fff; height: 90px; transition: transform .5s, all .5s cubic-bezier(.4,0,.2,1); } #idn-header .header_main_menu__wrapper__DekAn { margin-top: 1rem; } /* ---------- Logo ---------- */ #idn-header .sh_logo img { height: 45px; width: auto; } /* Thẻ bọc logo desktop (h1 ở trang chủ, div ở trang khác): không tạo hộp layout để logo hiển thị y như thẻ cũ */ #idn-header .sh_logo .idn-logo-h1 { display: contents; margin: 0; padding: 0; font-size: inherit; font-weight: inherit; line-height: inherit; } /* ---------- Tìm kiếm ---------- */ #idn-header .header_search_bar__Msb_4 { position: relative; } #idn-header .header_search_bar__Msb_4 .header_input_group__HebHz { border-radius: 22px !important; height: 38px; background: #f5f5f5; } #idn-header .header_search_bar__Msb_4 .header_search_bar__btn__SABN2 { position: absolute; right: 52px; top: 9px; border: none !important; background: none !important; padding: 0; } #idn-header .header_search_bar__Msb_4 .header_search_button__nn_HH { margin: 3px; cursor: pointer; } /* ---------- Hotline + Đăng nhập ---------- */ #idn-header .fKoiI .menu_telephone { padding: 5px 0; border-radius: 18px; text-decoration: none; cursor: pointer; margin-top: 3px; display: flex; justify-content: space-between; align-items: center; gap: 5px; font-weight: bold; font-size: 15px; margin-left: 75px; white-space: nowrap; flex-shrink: 0; } #idn-header .fKoiI .menu_telephone a, #idn-header .fKoiI .menu_telephone span { white-space: nowrap; } #idn-header .fKoiI .login { font-weight: 600; display: flex; gap: 10px; margin-left: 33px; align-items: center; padding-top: 8px; font-size: 14px; width: 130px; color: #000; white-space: nowrap; flex-shrink: 0; } @media only screen and (max-width: 1200px) { #idn-header .fKoiI .menu_telephone { margin-left: 3px !important; } #idn-header .fKoiI .login { margin-left: 17px !important; } } /* ---------- Canh giữa theo chiều dọc cho thanh trên ---------- */ /* Đưa toàn bộ nội dung vào giữa thanh 70px (bỏ margin-top:1rem lệch) */ #idn-header .header_main_menu__cJOJo > .container { height: 100%; display: flex; align-items: center; } #idn-header .header_main_menu__cJOJo > .container > .header_main_menu__wrapper__DekAn { margin-top: 0; width: 100%; } /* Căn giữa các cột (logo / tìm kiếm / hotline / đăng nhập) cùng một trục */ #idn-header .header_main_menu__wrapper__DekAn .ant-row { align-items: center; } /* Bỏ nudge dọc thừa để hotline & đăng nhập cùng đường tâm */ #idn-header .header_main_menu__cJOJo .fKoiI .menu_telephone { margin-top: 0; } #idn-header .header_main_menu__cJOJo .fKoiI .login { padding-top: 0; } /* ---------- Giỏ hàng ---------- */ #idn-header .header_cart__GE0zI { text-align: center; position: absolute; width: 15px; height: 14px; font-size: 9px; top: -2px; right: -8px; color: #fff; border-radius: 10px; background-color: var(--primary-color, #2496ea); padding-left: 1px; line-height: 14px; } /* ---------- Thanh danh mục (teal) ---------- */ #idn-header .header_main_category___jiVL { background-color: var(--primary-color, #2496ea); height: 49px; z-index: 998; position: relative; } #idn-header .header_main_category___jiVL .header_category__gRI5z { background-color: #ffd800; max-width: 300px; height: 49px; cursor: pointer; margin: auto auto auto 1px; } #idn-header .header_main_category___jiVL .header_category__gRI5z p { color: #000; } /* Nới cột danh mục để chứa hộp 300px (cột menu thu lại cho cân) */ #idn-header .header_main_category___jiVL > .container > .ant-row > .ant-col-6 { flex: 0 0 27%; max-width: 27%; } #idn-header .header_main_category___jiVL > .container > .ant-row > .ant-col-18 { flex: 0 0 73%; max-width: 73%; } /* Vì .ant-col là flex (canh 49px) nên wrapper con bị co bằng nội dung -> ép full width để hộp vàng + dropdown nở đúng 300px theo cột. */ #idn-header .header_main_category___jiVL .ant-col-6 > .style__HoverMenu-sc-6segz8-2, #idn-header .header_main_category___jiVL .style__HoverMenu-sc-6segz8-2 > .header_hoverMenu__3CcP5 { width: 100%; } /* Đồng đều chiều cao 49px: ép các khối cấp 1 cao 49px và canh giữa theo chiều dọc */ #idn-header .header_main_category___jiVL > .container, #idn-header .header_main_category___jiVL > .container > .ant-row, #idn-header .header_main_category___jiVL > .container > .ant-row > .ant-col { height: 49px; } #idn-header .header_main_category___jiVL > .container > .ant-row, #idn-header .header_main_category___jiVL > .container > .ant-row > .ant-col { display: flex; align-items: center; } /* Cột menu ngang: lấp đầy 49px, canh giữa */ #idn-header .header_main_category___jiVL .main-navbar, #idn-header .header_main_category___jiVL .style__MenuStyle-sc-6segz8-7 { height: 49px; display: flex; align-items: center; width: 100%; } /* ---------- Dropdown danh mục ---------- */ #idn-header .style__HoverMenu-sc-6segz8-2 { position: relative; } #idn-header .menuhover:hover .cate { display: block; } #idn-header .cate { width: 100%; margin: auto; height: auto; position: absolute; z-index: 10; left: 0px; max-width: 300px; background-color: #fff; display: none; box-shadow: 0 6px 16px rgba(0,0,0,.12); overflow: hidden; } #idn-header .cate .cate_gory { margin: 0; } #idn-header .cate .spacing_menu { padding: 8px 5px 8px 10px; } #idn-header .cate ul li { text-align: start; margin-top: 3px; font-size: 13px; line-height: 22px; white-space: nowrap; display: flex; align-items: center; gap: 6px; font-weight: 500; } #idn-header .cate ul li a { display: flex; align-items: center; width: 100%; color: #000; } #idn-header .cate ul li:hover, #idn-header .cate ul li a:hover { color: var(--primary-color, #2496ea); } #idn-header .cate ul li:hover p { color: var(--primary-color, #2496ea); } #idn-header .cate .border { border-bottom: 1px solid rgba(184,184,184,.24); } #idn-header .cate .menu_all { display: flex; font-weight: bold; text-transform: uppercase; background: #fff7d5; padding: 7px; height: 45px; margin-top: 17px; justify-content: center; align-items: center; } #idn-header .cate .menu_all a { color: #000; } /* Menu con trong panel danh mục — flyout sang phải, hỗ trợ nhiều cấp */ #idn-header .cate { overflow: visible; } /* cho menu con tràn ra ngoài panel */ #idn-header .cate li { position: relative; } #idn-header .cate .has-sub > a { padding-right: 18px; } #idn-header .cate .has-sub > a:after { /* mũi tên chỉ sang phải */ content: ""; position: absolute; right: 10px; top: 50%; margin-top: -4px; width: 6px; height: 6px; border-right: 2px solid #888; border-top: 2px solid #888; transform: rotate(45deg); } #idn-header .cate ul.cate_sub { display: none; position: absolute; top: 0; left: 100%; min-width: 220px; margin: 0; padding: 8px 0; list-style: none; background: #fff; box-shadow: 0 6px 16px rgba(0,0,0,.12); border-bottom: 3px solid var(--primary-color, #2496ea); z-index: 30; } #idn-header .cate li:hover > ul.cate_sub { display: block; } /* ---------- Menu điều hướng chính ---------- */ #idn-header ul.list-level-01 { margin: 0; list-style: none; display: flex; align-items: center; height: 49px; padding-top: 0; padding-left: 0; } #idn-header ul.list-level-01 > li { position: relative; display: inline-block; padding: 0px 15px; } #idn-header li.parent a { color: #fff; display: inline-block; font-weight: 500; } #idn-header ul.list-level-01 > li > a { color: #fff; display: inline-block; white-space: nowrap; font-weight: 500; position: relative; } #idn-header ul.list-level-01 > li > a img { display: inline-block; vertical-align: middle; } #idn-header ul.list-level-01 > li > a span { vertical-align: middle; } #idn-header ul.list-level-01 > li > a:after { content: ""; position: absolute; left: 0; bottom: -5px; width: 0; height: 2px; background: #ecb930; transition: width .3s; } #idn-header ul.list-level-01 > li > a:hover:after { width: 100%; } /* Dropdown cấp 1 */ #idn-header .child, #idn-header .child_news { display: none; width: 240px; background: #fff; border-radius: 10px; border-bottom: 3px solid var(--primary-color, #2496ea); position: absolute; top: 100%; z-index: 999; } #idn-header .parent:hover > ul { display: block; position: absolute; } #idn-header ul.child li > a, #idn-header ul.child_news li > a { display: block; padding: 8px 18px 8px 12px; line-height: 22px; font-size: 13px; white-space: nowrap; color: #000; position: relative; } #idn-header ul.child li > a:hover, #idn-header ul.child_news li > a:hover { color: var(--primary-color, #2496ea); } #idn-header ul.child li, #idn-header ul.child_news li { text-align: start; position: relative; } #idn-header ul.child > li > a:after { left: 0; right: -31px; width: 70%; } #idn-header ul.child > li > a:after, #idn-header ul.child_news > li > a:after { border-bottom: 1px solid #dbdbdb; content: ""; position: absolute; bottom: 1px; margin: 0 auto; } #idn-header ul.child_news > li > a:after { left: -41px; right: -41px; width: 87%; } #idn-header ul.child > li > a:hover:after, #idn-header ul.child_news > li > a:hover:after { border-bottom: 1px solid var(--primary-color, #2496ea); } #idn-header .site_image { display: flex !important; align-items: center !important; } #idn-header .site_image img { margin-right: 8px; } /* Dropdown cấp 2 (active_menu) */ #idn-header .active_menu { width: 240px; display: none; position: absolute; top: 0; left: 100%; background: #fff; border-radius: 10px; border-bottom: 3px solid var(--primary-color, #2496ea); z-index: 1000; } #idn-header .parent ul li:hover > .active_menu, #idn-header li:hover > .active_menu { display: block; } #idn-header .active_menu .bt > a { display: block; padding: 8px 18px 8px 12px; line-height: 22px; font-size: 13px; white-space: nowrap; color: #000; position: relative; } #idn-header .active_menu .bt > a:hover { color: var(--primary-color, #2496ea); } #idn-header .bt a:after { border-bottom: 1px solid #dbdbdb; content: ""; position: absolute; left: -41px; right: -41px; width: 87%; bottom: 1px; margin: 0 auto; } /* ---------- Responsive desktop nhỏ ---------- */ @media screen and (max-width: 1182px) { #idn-header ul.list-level-01 { font-size: 12px; padding-top: 0; } #idn-header ul.list-level-01 > li { padding: 1px 4px; } } /* ========================================================================= MOBILE / TABLET (≤ 1024px) — thanh thu gọn + drawer accordion ========================================================================= */ /* Mặc định (desktop): ẩn toàn bộ phần mobile */ #idn-header .idn-mhead, #idn-header .idn-mdrawer, #idn-header .idn-mdrawer__overlay { display: none; } @media only screen and (max-width: 1024px) { /* Ẩn các thanh desktop */ #idn-header .header_main_menu__cJOJo, #idn-header .header_main_category___jiVL, #idn-header .idn-mega { display: none !important; } #idn-header { padding-top: 60px; } /* ----- Thanh mobile cố định ----- */ #idn-header .idn-mhead { display: flex; align-items: center; justify-content: space-between; position: fixed; top: 0; left: 0; right: 0; z-index: 1000; height: 60px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.08); padding: 0 14px; } #idn-header .idn-mhead__logo img { height: 38px; width: auto; } #idn-header .idn-mhead__actions { display: flex; align-items: center; gap: 20px; } #idn-header .idn-mhead__cart { position: relative; color: #000; font-size: 24px; line-height: 0; display: inline-flex; } /* Hamburger -> X */ #idn-header .idn-mhead__toggle { width: 30px; height: 26px; display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; background: none; border: 0; padding: 0; cursor: pointer; } #idn-header .idn-mhead__toggle span { display: block; height: 3px; width: 26px; border-radius: 3px; background: var(--primary-color, #2496ea); transition: transform .25s, opacity .2s; } #idn-header.idn-drawer-open .idn-mhead__toggle span:nth-child(1) { transform: translateY(8px) rotate(45deg); } #idn-header.idn-drawer-open .idn-mhead__toggle span:nth-child(2) { opacity: 0; } #idn-header.idn-drawer-open .idn-mhead__toggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } /* ----- Overlay ----- */ #idn-header .idn-mdrawer__overlay { display: block; position: fixed; top: 60px; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.4); z-index: 998; opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; } #idn-header.idn-drawer-open .idn-mdrawer__overlay { opacity: 1; visibility: visible; } /* ----- Drawer ----- */ #idn-header .idn-mdrawer { display: block; position: fixed; top: 60px; left: 0; right: 0; z-index: 999; background: #fff; max-height: calc(100vh - 60px); overflow-y: auto; box-shadow: 0 12px 22px rgba(0,0,0,.14); transform: translateY(-14px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .22s ease, transform .22s ease, visibility .22s; } #idn-header.idn-drawer-open .idn-mdrawer { transform: none; opacity: 1; visibility: visible; pointer-events: auto; } /* Tìm kiếm trong drawer */ #idn-header .idn-msearch { display: flex; gap: 8px; padding: 12px 16px; border-bottom: 1px solid #eee; } #idn-header .idn-msearch input { flex: 1; height: 40px; border-radius: 22px; background: #f5f5f5; border: 1px solid #e6e6e6; padding: 0 16px; font-size: 14px; outline: none; } #idn-header .idn-msearch button { flex: 0 0 40px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--primary-color, #2496ea); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; } /* Menu accordion */ #idn-header .idn-mnav__list, #idn-header .idn-mnav__sub { margin: 0; padding: 0; list-style: none; } #idn-header .idn-mnav__row { display: flex; align-items: stretch; justify-content: space-between; border-bottom: 1px solid #eee; } #idn-header .idn-mnav__link { flex: 1 1 auto; display: flex; align-items: center; gap: 12px; padding: 14px 16px; color: #333; font-weight: 600; text-transform: uppercase; font-size: 14px; min-width: 0; } #idn-header .idn-mnav__link span { overflow: hidden; text-overflow: ellipsis; } #idn-header .idn-mnav__icon { width: 22px; height: 22px; object-fit: contain; flex: 0 0 22px; } #idn-header .idn-mnav__toggle { flex: 0 0 auto; background: none; border: 0; padding: 0 18px; cursor: pointer; color: #9aa3ad; line-height: 0; border-left: 1px solid #f0f0f0; } #idn-header .idn-mnav__toggle svg { transition: transform .25s; } #idn-header .idn-mnav__item.is-open > .idn-mnav__row .idn-mnav__toggle svg { transform: rotate(180deg); } #idn-header .idn-mnav__item.is-open > .idn-mnav__row .idn-mnav__toggle { color: var(--primary-color, #2496ea); } /* Menu con */ #idn-header .idn-mnav__sub { display: none; background: #fafafa; } #idn-header .idn-mnav__item.is-open > .idn-mnav__sub { display: block; } #idn-header .idn-mnav__sub .idn-mnav__link { text-transform: none; font-weight: 500; font-size: 13px; padding-left: 30px; color: #444; } #idn-header .idn-mnav__sub .idn-mnav__sub .idn-mnav__link { padding-left: 48px; } #idn-header .idn-mnav__sub .idn-mnav__icon { width: 20px; height: 20px; flex-basis: 20px; } /* Chân drawer: đăng nhập + hotline */ #idn-header .idn-mdrawer__foot { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 20px; } #idn-header .idn-mdrawer__foot a { display: flex; align-items: center; gap: 10px; padding: 8px 0; color: #333; font-weight: 600; font-size: 14px; } #idn-header .idn-mdrawer__foot a .anticon { color: var(--primary-color, #2496ea); font-size: 18px; } } /* Khoá cuộn nền khi mở drawer (không scope để áp lên body) */ body.idn-noscroll { overflow: hidden; } /* Bù admin bar WordPress khi đăng nhập */ @media only screen and (max-width: 1024px) { .admin-bar #idn-header .idn-mhead { top: 32px; } .admin-bar #idn-header .idn-mdrawer, .admin-bar #idn-header .idn-mdrawer__overlay { top: 92px; } .admin-bar #idn-header .idn-mdrawer { max-height: calc(100vh - 92px); } } @media only screen and (max-width: 782px) { .admin-bar #idn-header .idn-mhead { top: 46px; } .admin-bar #idn-header .idn-mdrawer, .admin-bar #idn-header .idn-mdrawer__overlay { top: 106px; } .admin-bar #idn-header .idn-mdrawer { max-height: calc(100vh - 106px); } } #idn-header ul.list-level-01 { text-transform: uppercase; } #idn-header ul.list-level-01 > li { position: relative; display: inline-block; padding: 1px 15px; margin-bottom: 0px; } /* ========================================================================= MEGA MENU (desktop) — thanh menu ngang + panel thả xuống (giống ảnh mẫu) ========================================================================= */ #idn-header .idn-mega { background: #fff; border-bottom: 1px solid #ececec; position: relative; z-index: 997; } #idn-header .idn-mega__nav { margin: 0; padding: 0; list-style: none; display: flex; justify-content: center; flex-wrap: wrap; } #idn-header .idn-mega__top { position: static; } #idn-header .idn-mega__toplink { display: block; padding: 12px 18px; color: #222; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; font-weight: 600; white-space: nowrap; } #idn-header .idn-mega__top { margin-bottom: 0px; } #idn-header .idn-mega__toplink span { position: relative; padding-bottom: 5px; } #idn-header .idn-mega__toplink span:after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: #222; transform: scaleX(0); transition: transform .25s; } #idn-header .idn-mega__top:hover > .idn-mega__toplink span:after { transform: scaleX(1); } /* Panel mega — trải rộng cả chiều ngang, thả xuống dưới thanh */ #idn-header .idn-mega__panel { position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-top: 1px solid #ececec; box-shadow: 0 16px 24px rgba(0,0,0,.07); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .2s ease, transform .2s ease, visibility .2s; z-index: 996; } #idn-header .idn-mega__top.has-mega:hover > .idn-mega__panel { opacity: 1; visibility: visible; transform: none; } #idn-header .idn-mega__panelin { max-width: 1234px; margin: 0 auto; padding: 34px 25px 28px; } /* Tabs (TRAVEL / EDITS / INFO) */ #idn-header .idn-mega__tabs { display: flex; justify-content: center; gap: 28px; margin-bottom: 26px; } #idn-header .idn-mega__tab { background: none; border: 0; padding: 0 0 4px; cursor: pointer; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; font-weight: 600; color: #6b7280; border-bottom: 2px solid transparent; transition: color .2s, border-color .2s; } #idn-header .idn-mega__tab:hover { color: #1f2a44; } #idn-header .idn-mega__tab.is-active { color: #1f2a44; border-bottom-color: #1f2a44; } /* Views + thẻ ảnh */ #idn-header .idn-mega__view { display: none; } #idn-header .idn-mega__view.is-active { display: block; } #idn-header .idn-mega__cards { display: flex; justify-content: center; flex-wrap: wrap; gap: 26px; } #idn-header .idn-mega__card { display: block; width: 180px; color: #1f2a44; } #idn-header .idn-mega__card-img { display: block; width: 180px; height: 180px; overflow: hidden; background: #f4f1ec; } #idn-header .idn-mega__card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; } #idn-header .idn-mega__card:hover .idn-mega__card-img img { transform: scale(1.04); } #idn-header .idn-mega__card-title { display: block; margin-top: 12px; text-align: center; font-size: 13px; letter-spacing: .03em; text-transform: uppercase; color: #1f2a44; } #idn-header .idn-mega__card:hover .idn-mega__card-title { text-decoration: underline; } /* View All */ #idn-header .idn-mega__viewall { margin-top: 26px; border-top: 1px solid #ececec; padding-top: 18px; text-align: center; } #idn-header .idn-mega__viewall a { color: #1f2a44; font-size: 15px; } #idn-header .idn-mega__viewall a:hover { text-decoration: underline; } #idn-header .header_search_bar__Msb_4 { margin-bottom: 0px; } .box-phai { align-items: center; } #idn-header .header_search_bar__Msb_4 .header_search_bar__btn__SABN2 { top: 0; } /* ========================================================================= PANEL MEGA cho menu chính trong thanh teal (ant-col-18) Dùng lại toàn bộ giao diện .idn-mega__panel / __tabs / __cards (ở trên). ========================================================================= */ /* Lấy thanh teal làm khối chứa (đã position:relative) để panel trải hết bề ngang. Cho các tầng trung gian về position:static để left/right:0 bám vào thanh teal, KHÔNG đụng .style__HoverMenu (giữ relative cho dropdown danh mục .cate). */ /* Lưu ý: chỉ mục .has-mega mới về static (để panel bám thanh teal full-width). Mục cha thường giữ position:relative để dropdown