/* WP SkinMan Core — MENU ĐIỆN THOẠI (owner 13/10/2026 20:59)
   Menu mở ngay dưới thanh đầu trang chính (logo, tìm kiếm, nút menu), rộng hết màn hình, nền sáng.
   Nút 3 gạch chuyển thành chữ X để đóng. Khi mở: khung trượt xuống từ mép dưới thanh đầu trang, từng mục hiện nối tiếp.
   Chỉnh nhanh bằng các biến ngay dưới đây. Module "mobile-menu" (modules/layout/mobile-menu.php). */
:root {
	--skm-mm-bg: var(--theme-palette-color-6, var(--skm-tint-1));   /* màu 6 của bảng màu = nền nhạt của trang (owner chose 13/10 21:21); không có thì màu chính pha trắng */
	--skm-mm-text: #1f2933;          /* chữ */
	--skm-mm-accent: var(--skm-accent);  /* mục đang xem, mũi tên = màu 1 của bảng màu */
	--skm-mm-line: rgba(16, 24, 40, .08);                     /* đường kẻ giữa các mục */
	--skm-mm-dim: rgba(16, 24, 40, .4);                       /* phần trang bên dưới menu bị làm tối */
	--skm-mm-speed: 320ms;           /* thời gian khung trượt xuống */
	--skm-mm-step: 35ms;             /* độ trễ giữa hai mục liền nhau */
}
@media (max-width: 999.98px) {
	/* Khung menu nằm dưới thanh đầu trang chính; thanh đầu trang (z-index 50) luôn nổi trên để bấm được nút X */
	#offcanvas[data-behaviour] {
		inset: var(--skm-mm-top, 0px) 0 0 0 !important;
		z-index: 49 !important;
		background: var(--skm-mm-dim) !important;
		transition: opacity .2s ease !important;
	}
	#offcanvas[data-behaviour] .ct-panel-inner {
		position: relative !important;
		inset: auto !important;
		width: 100% !important;
		max-width: none !important;
		height: auto !important;
		max-height: 100% !important;
		margin: 0 !important;
		border-radius: 0 !important;
		align-self: stretch !important;
		transform: none !important;
		background: var(--skm-mm-bg) !important;
		box-shadow: 0 12px 24px rgba(16, 24, 40, .14) !important;
		overflow-y: auto;
		--panel-padding: 0px;
	}
	#offcanvas.active .ct-panel-inner { animation: skm-mm-drop var(--skm-mm-speed) cubic-bezier(.2, .7, .2, 1) both; }
	/* Nút đóng riêng của Blocksy không cần nữa (nút menu đã thành X) */
	#offcanvas .ct-panel-actions { display: none !important; }
	#offcanvas .ct-panel-content-inner { padding: 4px 0 12px !important; }

	/* Các mục menu */
	#offcanvas .mobile-menu ul { margin: 0; padding: 0; }
	#offcanvas .mobile-menu > ul > li { border-bottom: 1px solid var(--skm-mm-line); }
	#offcanvas .mobile-menu a,
	#offcanvas .mobile-menu .ct-menu-link {
		color: var(--skm-mm-text) !important;
		font-size: 17px !important;
		font-weight: 600 !important;
		line-height: 1.35 !important;
		padding-block: 14px !important;
		padding-inline: var(--skm-edge, 16px) !important;
	}
	#offcanvas .mobile-menu .ct-sub-menu-parent { padding-inline-end: var(--skm-edge, 16px) !important; }   /* mũi tên thẳng hàng với nút X */
	#offcanvas .mobile-menu .ct-sub-menu-parent > a { padding-inline-end: 8px !important; }
	#offcanvas .mobile-menu .sub-menu a { font-weight: 500 !important; font-size: 16px !important; padding-block: 10px !important; padding-inline-start: calc(var(--skm-edge, 16px) + 16px) !important; }
	#offcanvas .mobile-menu :is(.current-menu-item, .current-menu-ancestor) > :is(a, .ct-sub-menu-parent) > a,
	#offcanvas .mobile-menu :is(.current-menu-item, .current-menu-ancestor) > a { color: var(--skm-mm-accent) !important; }
	#offcanvas .mobile-menu .ct-toggle-dropdown-mobile,
	#offcanvas .mobile-menu .ct-toggle-dropdown-mobile svg { color: var(--skm-mm-accent) !important; fill: currentColor; }
	#offcanvas.active .mobile-menu > ul > li { animation: skm-mm-item 240ms ease both; animation-delay: calc(80ms + var(--skm-i, 0) * var(--skm-mm-step)); }

	/* Nút 3 gạch → X */
	.ct-header-trigger .ct-icon rect { transform-box: fill-box; transform-origin: center; transition: transform 250ms ease, opacity 200ms ease; }
	.ct-header-trigger[aria-expanded="true"] .ct-icon rect:nth-child(1) { transform: translateY(6.15px) rotate(45deg); }
	.ct-header-trigger[aria-expanded="true"] .ct-icon rect:nth-child(2) { opacity: 0; }
	.ct-header-trigger[aria-expanded="true"] .ct-icon rect:nth-child(3) { transform: translateY(-6.15px) rotate(-45deg); }
}
@keyframes skm-mm-drop { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes skm-mm-item { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
	#offcanvas.active .ct-panel-inner, #offcanvas.active .mobile-menu > ul > li { animation: none !important; }
	.ct-header-trigger .ct-icon rect { transition: none !important; }
}