/**
 * Bổ sung cho trang sản phẩm.
 *
 * Menu dùng lại markup và CSS gốc của liveacademy.vn (menu/default.css) nên
 * phần quy tắc menu tự viết trước đây đã bỏ.
 */

/* Menu con "Khóa học": lưới cứng ba cột nên khi một nhóm chỉ có vài khóa, ô
   viền đen co lại bằng một phần ba, nhìn hụt so với cột nhóm bên trái. Cho cột
   tự co giãn để ô luôn trải hết chỗ trống. */
.menu .menu-cat .jj-grid {
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/* Viền 1px màu #171717 nhìn nhạt và mảnh; đậm lên cho thấy rõ khung. */
.menu ul .menu-cat_item {
	border: 2px solid #000;
}

/* ==========================================================================
   Ô chứa logo trên hàng menu
   ==========================================================================
   Lớp `jj-w-[calc(270/1300*100%)]` trong markup KHÔNG tồn tại trong bộ CSS
   dựng sẵn (assets/css/tailwind/layout.css là bản build một dòng, không có
   cấu hình để dựng lại). Lâu nay ô logo lấy bề ngang từ thuộc tính width của
   thẻ ảnh — tình cờ đúng. Khai hẳn ra đây cho chắc, nhất là sau khi bản ảnh
   cho màn hẹp đổi từ 10px thành 216px.
   -------------------------------------------------------------------------- */
.menu ul.menu-main > li:has(> .logo) {
	flex: 0 0 auto;
	width: clamp(180px, calc(270 / 1300 * var(--max-width)), 270px);
}

.menu ul.menu-main > li > .logo { width: 100%; }

/* ==========================================================================
   Panel menu đổ xuống
   ==========================================================================
   Trước đây mỗi menu một kiểu: "Giới thiệu" và "Blog" chạy băng chuyền thẻ ảnh,
   còn "Khóa học" và "Dịch vụ" là danh sách trái cộng lưới phải. Nay gộp làm một:
   cột chữ bên trái, đúng một thẻ ảnh nổi bật bên phải dẫn về trang cha.
   Menu desktop chỉ hiện từ 1200px nên phần này không cần lo màn hẹp.
   -------------------------------------------------------------------------- */

/* Panel neo theo chính mục menu đang rê chuột, không còn trải hết hàng.
   Trước đây khai w-100 nên khung rộng 1300px trong khi ruột chỉ 106px chữ —
   cụm chữ dạt hẳn sang trái, thẻ ảnh dạt hẳn sang phải, giữa trống hoác. */
.menu ul.menu-main > li { position: relative; }

/* Panel căn giữa mục.

   Không dùng được translateX(-50%): Alpine ghi transform: scale() NỘI TUYẾN
   cho hiệu ứng hiện, mà style nội tuyến luôn thắng lớp CSS nên phần dịch
   ngang bị nuốt mất. Thay bằng một hộp bọc rộng 0 đặt đúng tâm mục — hộp căn
   giữa con của nó nên panel tự chia đều hai bên, không cần transform. */
.menu .mn-xo-boc {
	left: 50%;
	right: auto;
	width: 0;
	display: flex;
	justify-content: center;
}

/* Mục sát mép màn thì panel nép vào trong, nếu không sẽ tràn ra ngoài.
   Hai lớp này do Alpine gắn khi rê chuột, tính từ tâm mục và bề rộng thật
   của panel. */
.menu .mn-xo-boc--trai { left: 0; right: auto; justify-content: flex-start; }
.menu .mn-xo-boc--phai { left: auto; right: 0; justify-content: flex-end; }

/* Hộp bọc rộng 0 nên panel phải cấm co lại, nếu không nó bị ép về 0. */
.menu .mn-xo {
	flex: 0 0 auto;
	width: max-content;
	max-width: min(640px, calc(100vw - 2rem));
}

.mn-xo__trong {
	display: grid;
	grid-template-columns: minmax(215px, 250px) minmax(0, 1fr);
	align-items: start;
	gap: 1.5rem;
	padding: 1.5rem;
}

/* Danh mục chỉ có một mục thì cột trái trông trống trải; cho nó hẹp lại. */
.mn-xo__cot {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	min-width: 0;
}

/* ---- nút danh mục bên trái ---- */

.menu a.mn-pill {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	padding: .85rem .9rem;
	border-radius: 12px;
	color: var(--secondary-color, #171717);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.4;
	text-decoration: none;
	transition: background .2s ease, color .2s ease;
}

.menu a.mn-pill:hover,
.menu a.mn-pill--chon {
	background: #fff1e6;
	color: var(--primary-color, #f36f21);
}

.mn-pill__mt {
	flex: none;
	opacity: 0;
	transform: translateX(-4px);
	transition: opacity .2s ease, transform .2s ease;
}

.menu a.mn-pill:hover .mn-pill__mt,
.menu a.mn-pill--chon .mn-pill__mt {
	opacity: 1;
	transform: none;
}

/* ---- cột khóa học bên phải ---- */

/* Vạch ngăn hai cột. Nhiều khóa thì cột này dài ra, panel cao theo — tới một
   mức thì tự cuộn trong panel chứ không đẩy khỏi màn hình. */
.mn-xo__khoa {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	min-width: 0;
	padding-left: 1.5rem;
	border-left: 1px solid rgb(0 0 0 / 8%);
	max-height: min(72vh, 620px);
	overflow-y: auto;
	scrollbar-width: thin;
}

.menu a.mn-kh {
	display: block;
	min-width: 0;
	color: var(--secondary-color, #171717);
	text-decoration: none;
}

.mn-kh__anh {
	display: block;
	overflow: hidden;
	border-radius: 12px;
	background: #f7f8f9;
}

.mn-kh__anh img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	height: auto;
	object-fit: cover;
	transition: transform .35s ease;
}

.menu a.mn-kh:hover .mn-kh__anh img { transform: scale(1.04); }

.mn-kh__ten {
	display: block;
	margin-top: .7rem;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.5;
	transition: color .2s ease;
}

.menu a.mn-kh:hover .mn-kh__ten { color: var(--primary-color, #f36f21); }

@media screen and (max-width: 1320px) {
	.mn-xo__trong { grid-template-columns: minmax(195px, 225px) minmax(0, 1fr); gap: 1.15rem; padding: 1.15rem; }
	.mn-xo__khoa { padding-left: 1.15rem; }
	.mn-kh__anh img { aspect-ratio: 1 / 1; }
}