/* BigStar Menu v1 (05/10/2026) */
:root { --bs-blue: #022f93; --bs-blue2: #0a46c2; --bs-ink: #0f1b3d; --bs-mute: #6b7794; --bs-line: #e6ebf6; --bs-bg: #f4f7fd; }

/* ---------- SVG chung ---------- */
.bsm-i { width: 20px; height: 20px; flex: 0 0 20px; }
.bsm-i--c { width: 16px; height: 16px; flex-basis: 16px; color: #9aa6c3; }
.bsm-i--w { color: #fff; width: 22px; height: 22px; }

/* ================= MOBILE DRAWER ================= */
#main-menu.bsm-on { background: var(--bs-bg); }
#main-menu.bsm-on .sidebar-menu { padding: 0; background: var(--bs-bg); }
#main-menu.bsm-on .sidebar-menu > ul.nav-sidebar { display: none; }
@media (max-width: 849px) {
	#main-menu.bsm-on.mobile-sidebar { width: 100vw; max-width: 100vw; }
}
.bsm { padding: 14px 14px 20px; color: var(--bs-ink); font-size: 14px; line-height: 1.3; -webkit-tap-highlight-color: transparent; }
.bsm[hidden], .bsm [hidden] { display: none !important; }
.bsm * { box-sizing: border-box; }
.bsm a { text-decoration: none; text-transform: none; }

.bsm-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bsm-hero__a { display: flex; align-items: center; gap: 8px; padding: 12px 12px; min-height: 52px; border-radius: 12px; color: #fff !important; font-weight: 700; font-size: 13.5px; line-height: 1.2; box-shadow: 0 4px 12px rgba(2, 47, 147, .18); }
.bsm-hero__a svg { color: #fff; }
.bsm-hero__a--hot { background: linear-gradient(135deg, #e11d2e, #ff6a00); }
.bsm-hero__a--online { background: linear-gradient(135deg, var(--bs-blue), #2f6df6); }

.bsm-h { margin: 20px 2px 10px; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--bs-mute); }

.bsm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bsm-card { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 58px; margin: 0; padding: 8px 9px; text-align: left; background: #fff; border: 1px solid var(--bs-line); border-radius: 12px; box-shadow: 0 1px 2px rgba(2, 47, 147, .05); color: var(--bs-ink); cursor: pointer; font: inherit; text-transform: none; }
.bsm-card:active { background: #eaf0ff; border-color: #c9d7f7; }
.bsm-card__ic { flex: 0 0 34px; height: 34px; border-radius: 9px; background: var(--bs-blue); display: flex; align-items: center; justify-content: center; }
.bsm-card__ic img { width: 20px; height: 20px; object-fit: contain; display: block; }
.bsm-card__tx { display: flex; flex-direction: column; min-width: 0; }
.bsm-card__tx b { font-size: 12.5px; font-weight: 600; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 4; word-break: normal; overflow-wrap: anywhere; -webkit-box-orient: vertical; overflow: hidden; }

.bsm-links { background: #fff; border: 1px solid var(--bs-line); border-radius: 12px; overflow: hidden; }
.bsm-link { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 14px; color: var(--bs-ink) !important; font-weight: 600; font-size: 14px; border-top: 1px solid var(--bs-line); }
.bsm-link:first-child { border-top: 0; }
.bsm-link > svg:first-child { color: var(--bs-blue); }
.bsm-link span { flex: 1; }

.bsm-call { display: flex; align-items: center; gap: 12px; margin-top: 16px; margin-bottom: 4px; padding: 12px 14px; border-radius: 14px; background: linear-gradient(135deg, #d9141f, #ff4d2e); color: #fff !important; box-shadow: 0 6px 16px rgba(217, 20, 31, .35); }
.bsm-call svg { width: 26px; height: 26px; flex-basis: 26px; }
.bsm-call span { display: flex; flex-direction: column; }
.bsm-call b { font-size: 15px; font-weight: 700; }
.bsm-call small { font-size: 11px; opacity: .92; margin-top: 2px; }

/* --- màn hình con --- */
.bsm-sub { animation: bsmIn .18s ease-out; }
@keyframes bsmIn { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
.bsm-sub__head { position: sticky; top: -14px; z-index: 2; margin: -14px -14px 12px; padding: 10px 14px 10px; background: var(--bs-blue); color: #fff; }
.bsm-back { display: inline-flex; align-items: center; gap: 4px; min-height: 40px; margin: 0 0 10px; padding: 0 16px 0 8px; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.45); border-radius: 22px; color: #fff; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; text-transform: none; }
.bsm-back:active { background: rgba(255,255,255,.28); }
.bsm-back2 { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 48px; margin: 14px 0 6px; padding: 0 14px; background: #fff; border: 1px solid #c9d7f7; border-radius: 12px; color: var(--bs-blue); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; text-transform: none; }
.bsm-back2 svg { width: 18px; height: 18px; }
.bsm-back svg { color: #fff; }
.bsm-sub__title { font-size: 17px; font-weight: 700; line-height: 1.25; }
.bsm-all { display: flex; align-items: center; justify-content: space-between; min-height: 46px; padding: 0 14px; margin-bottom: 10px; border-radius: 12px; background: #eaf0ff; border: 1px solid #c9d7f7; color: var(--bs-blue) !important; font-weight: 700; }
.bsm-sub__list { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--bs-line); border: 1px solid var(--bs-line); border-radius: 12px; overflow: hidden; }
.bsm-sub__a { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 48px; padding: 8px 12px; background: #fff; color: var(--bs-ink) !important; font-weight: 500; font-size: 14px; }
.bsm-sub__a:active { background: #f1f5ff; }

/* nút ☰ đủ lớn + viền focus (giữ từ đợt trước) */
.header .mobile-nav .nav-icon > a, .header .nav-icon > a[data-open="#main-menu"] { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
#header a:focus-visible, #header button:focus-visible, #main-menu a:focus-visible, #main-menu button:focus-visible, .header-vertical-menu a:focus-visible { outline: 2px solid var(--bs-blue) !important; outline-offset: 2px; }
#header input.search-field:focus, #header .searchform input[type=search]:focus, #header .searchform input[type=text]:focus { outline: 2px solid var(--bs-blue); outline-offset: 1px; border-color: var(--bs-blue); }

/* ================= DESKTOP ================= */
@media (min-width: 850px) {
	/* thanh danh mục: nền đặc, không xuyên thấu */
	.header-vertical-menu__fly-out { z-index: 999 !important; }
	.header-vertical-menu__fly-out .nav-top-link { padding: 11px 16px !important; font-size: 14px !important; transition: background .15s, color .15s; }
	.header-vertical-menu__fly-out > div > ul > li:hover > .nav-top-link,
	.header-vertical-menu__fly-out > div > ul > li.active > .nav-top-link { background: var(--bs-blue2) !important; color: #ffe14d !important; }

	.header-vertical-menu__fly-out .menu-mega-menu-san-pham-container { background: var(--bs-blue) !important; border-radius: 0 0 10px 10px; box-shadow: 0 10px 28px rgba(2, 20, 70, .28); }
	/* bảng mega: gọn, nền trắng đặc, không còn khoảng trống */
	.header-vertical-menu__fly-out .nav-dropdown { width: min(960px, calc(100vw - 340px)) !important; min-height: 0 !important; padding: 0 0 18px !important; background: #fff !important; border: 0 !important; border-radius: 0 10px 10px 10px; box-shadow: 0 14px 34px rgba(2, 20, 70, .22) !important; }
	.header-vertical-menu__fly-out .nav-dropdown .row { margin: 0 !important; padding: 8px 14px 0; }
	.header-vertical-menu__fly-out .nav-dropdown .col { padding-bottom: 0 !important; }
	.header-vertical-menu__fly-out .nav-dropdown .col-inner { padding: 0 !important; }
	.bsm-mega-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 22px 12px; border-bottom: 1px solid var(--bs-line); background: linear-gradient(180deg, #f4f7fd, #fff); border-radius: 0 10px 0 0; }
	.bsm-mega-head__t { font-size: 16px; font-weight: 700; color: var(--bs-blue); }
	.bsm-mega-head__all { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: var(--bs-blue2) !important; text-decoration: none; }
	.bsm-mega-head__all:hover { text-decoration: underline; }
	.header-vertical-menu__fly-out .ux-menu-link { border: 0 !important; margin: 0; }
	.header-vertical-menu__fly-out .ux-menu--divider-solid > .ux-menu-link:not(:last-child) { border-bottom: 0 !important; }
	.header-vertical-menu__fly-out .ux-menu-link__link { padding: 8px 12px !important; margin: 1px 0; border-radius: 8px; font-size: 14.5px !important; line-height: 1.3; color: #1b2a4e !important; transition: background .12s, color .12s; }
	.header-vertical-menu__fly-out .ux-menu-link__link:hover { background: #eaf0ff; color: var(--bs-blue) !important; }

	/* thanh menu ngang */
	#wide-nav .header-nav-main > li > a { font-weight: 600; transition: color .15s; }
	#wide-nav .header-nav-main > li > a:hover { color: var(--bs-blue2); }
}
@media (max-width: 360px) { .bsm-card__tx b { font-size: 12px; } .bsm-hero__a { font-size: 12.5px; padding: 10px; } }
@media (min-width: 850px) {
	.header-vertical-menu__fly-out .menu-mega-menu-san-pham-container { padding-bottom: 6px; }
}
/* máy tính bảng ngang: tránh chồng chữ ở thanh đầu trang */
@media (min-width: 850px) and (max-width: 1180px) {
	#header .html_topbar_right { display: none !important; }
}

/* danh mục con 2 cột, danh mục chính 3 cột khi ngăn kéo đủ rộng */
.bsm-sub__a { line-height: 1.25; }
@media (min-width: 360px) {
	.bsm-sub__list { grid-template-columns: 1fr 1fr; }
	.bsm-sub__a:last-child:nth-child(odd) { grid-column: 1 / -1; }
	.bsm-sub__a .bsm-i--c { width: 14px; height: 14px; flex-basis: 14px; }
}
@media (min-width: 600px) {
	.bsm-grid { grid-template-columns: 1fr 1fr 1fr; }
	.bsm-sub__list { grid-template-columns: 1fr 1fr 1fr; }
	.bsm-hero { max-width: 520px; }
}
/* máy tính: phân biệt rõ từng danh mục */
@media (min-width: 850px) {
	.header-vertical-menu__fly-out .menu-mega-menu-san-pham-container > ul > li { border-bottom: 1px solid rgba(255, 255, 255, .13); }
	.header-vertical-menu__fly-out .menu-mega-menu-san-pham-container > ul > li:last-child { border-bottom: 0; }
	.header-vertical-menu__fly-out > div > ul > li > .nav-top-link { border-left: 3px solid transparent; font-weight: 500; }
	.header-vertical-menu__fly-out > div > ul > li:hover > .nav-top-link { border-left-color: #ffe14d; }
	.header-vertical-menu__fly-out .nav-dropdown .col + .col .col-inner { border-left: 1px solid var(--bs-line); padding-left: 10px !important; }
	.header-vertical-menu__fly-out .ux-menu--divider-solid > .ux-menu-link { border-bottom: 1px solid #eef1f8 !important; }
	.header-vertical-menu__fly-out .ux-menu--divider-solid > .ux-menu-link:last-child { border-bottom: 0 !important; }
	.header-vertical-menu__fly-out .ux-menu-link__link { position: relative; padding-left: 22px !important; }
	.header-vertical-menu__fly-out .ux-menu-link__link::before { content: ""; position: absolute; left: 9px; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: #9db4ec; transition: background .12s, transform .12s; }
	.header-vertical-menu__fly-out .ux-menu-link__link:hover::before { background: var(--bs-blue); transform: scale(1.4); }
}

/* ngăn kéo tối đa chiều rộng: chừa chỗ cho nút đóng (X) ở góc phải trên */
.bsm-main::before { content: "Menu BigStar"; display: block; margin: 0 0 12px; padding: 6px 0 2px; min-height: 36px; font-size: 18px; font-weight: 800; color: var(--bs-blue); }
.bsm-sub__head { padding-right: 64px; }
.bsm-sub__a .bsm-i--c { display: none; }
.bsm-sub__a { padding: 8px 14px; }

@media (min-width: 600px) { #main-menu.bsm-on.mobile-sidebar { max-width: 560px; } .bsm-grid, .bsm-sub__list { grid-template-columns: 1fr 1fr; } }

@media (min-width: 850px) {
	/* khung danh mục tự giãn theo số mục (trước bị cắt mất mục cuối) */
	.header-vertical-menu__fly-out .menu-mega-menu-san-pham-container { height: auto !important; min-height: 0 !important; overflow: visible !important; }
	.header-vertical-menu__fly-out .nav-top-link { padding-top: 10px !important; padding-bottom: 10px !important; }
}

@media (min-width: 850px) {
	/* mở/đóng panel do JS điều khiển (có độ trễ), chỉ bật khi JS chạy */
	.header-vertical-menu__fly-out[data-bsm="1"] li.has-dropdown:not(.bsm-open) > .nav-dropdown { left: -99999px !important; opacity: 0 !important; visibility: hidden !important; }
	.header-vertical-menu__fly-out[data-bsm="1"] li.has-dropdown.bsm-open > .nav-dropdown { left: 100% !important; top: 0 !important; opacity: 1 !important; visibility: visible !important; }
	.header-vertical-menu__fly-out[data-bsm="1"] li.bsm-open > .nav-top-link { background: var(--bs-blue2) !important; color: #ffe14d !important; border-left-color: #ffe14d !important; }
	.header-vertical-menu__fly-out[data-bsm="1"] li:hover:not(.bsm-open) > .nav-top-link { background: transparent !important; color: #fff !important; border-left-color: transparent !important; }
}