/* ============================================================
   Ngăn kéo điều hướng (drawer menu) — header.php
   ------------------------------------------------------------
   CSS thuần cho riêng khối drawer, enqueue SAU output.css nên mọi khai báo
   ở đây thắng utility cùng specificity.

   RANH GIỚI: những gì thuộc về *bản thân mục menu* (cỡ chữ, căn lề, gạch
   chân) nằm ở `.quiz-menu-link` trong ../../input.css — ĐỪNG ghi đè lại ở
   đây. File này chỉ giữ 3 thứ không tiện diễn đạt bằng utility: nền mờ,
   kích thước khung, và toạ độ từng chiếc lá.
   ============================================================ */

/* --- Tấm nền mờ ---------------------------------------------------- */
.site-menu-overlay {
	position: fixed;
	inset: 0;
	z-index: 55; /* dưới .site-menu (z-60), trên header (z-50) */
	background-color: #000;
	opacity: 0;
	visibility: hidden;
	transition: opacity .5s var(--ease-brand), visibility .5s var(--ease-brand);
}

/* Bám theo state có sẵn của JS (aria-hidden) — không cần thêm class mới.
   Overlay là sibling ĐỨNG SAU <aside data-menu> trong header.php. */
[data-menu][aria-hidden="false"] ~ .site-menu-overlay {
	opacity: .5;
	visibility: visible;
}

/* --- Khung ngăn kéo ------------------------------------------------ */
.site-menu {
	max-width: 400px;
	box-shadow: 0 0 2.5rem rgb(51 85 152 / .18);
}

/* --- Hoạ tiết lá --------------------------------------------------- */
/* Giữ nguyên bộ ảnh + animation cũ, chỉ đổi kích thước/vị trí cho vừa khung
   400px và tránh đè lên danh sách link.

   --menu-list-end = mép DƯỚI của danh sách link, tính từ đỉnh khung:
       chiều cao logo-bar + padding-top của <nav> + N link + (N-1) khoảng gap
     base: 7rem + 2rem + N×2.0625rem + (N-1)×1.25rem
     md  : 8rem + 2rem + N×2.375rem  + (N-1)×1.75rem
   (cao 1 link = py-2xs ×2 + cỡ chữ × leading-tight 1.25; trước 2026-09-04 là
    leading-none nên 2 số đó là 1.75rem / 2rem)

   HAI SỐ DƯỚI ĐÂY CHỈ LÀ MẶC ĐỊNH CHO N = 5. Số mục menu giờ do admin nhập ở
   trang quản trị "Header & Footer", nên giá trị THẬT được tính lúc chạy và
   nhồi vào bằng wp_add_inline_style() ngay sau file này — xem
   Site_Options::menu_list_end() + menu_inline_css() và chỗ enqueue
   'vezaconslt-landing-menu' trong child/functions.php.

   VÀ CẢ CÔNG THỨC PHP ĐÓ CŨNG CHỈ LÀ GIÁ TRỊ BAN ĐẦU: nó giả định mỗi mục đúng
   một dòng, trong khi nhãn dài do admin nhập sẽ xuống dòng (hiện có 2 mục như
   vậy). `syncListEnd()` trong assets/theme/js/site.js đo mép dưới THẬT của danh
   sách rồi ghi đè --menu-list-end bằng px ngay trên phần tử .site-menu.
   ĐỔI h-28/md:h-32, py-3xl, cỡ chữ hay gap-lg/md:gap-2xl ở header.php THÌ PHẢI
   SỬA CÔNG THỨC Ở CẢ 2 CHỖ (menu_list_end() và 2 số mặc định dưới đây).
   (py-3xl = 2rem, gap-lg = 1.25rem, md:gap-2xl = 1.75rem — thang khoảng cách
   trong tokens.css; tên cũ py-8/gap-5/md:gap-7 đã đổi ngày 2026-09-03, GIÁ TRỊ
   không đổi nên 2 số mặc định dưới đây giữ nguyên.)

   Dùng max(<dưới danh sách>, <%>) chứ không dùng riêng % hay riêng rem:
     - riêng %  → màn thấp, lá leo lên đè chữ (danh sách link cao CỐ ĐỊNH
       theo px, không co theo chiều cao màn — từ khi đổi sang justify-start
       thì nó luôn bám ở trên, không còn tự giãn ra giữa nữa);
     - riêng rem → màn cao, lá dồn cục ở giữa, nửa dưới trống hoác.
   Lá số 1 không cần max(): nó nằm hẳn mép phải, không giao ngang với chữ. */
.site-menu {
	--menu-list-end: 24.3125rem;
}

.site-menu-leaf {
	position: absolute;
	user-select: none;
}

.site-menu-leaf--1 { top: 11%; right: -2rem; width: 7.5rem; }
.site-menu-leaf--2 { top: max(calc(var(--menu-list-end) + 3.5rem), 56%); left: 1.5rem;   width: 3.25rem; }
.site-menu-leaf--3 { top: max(calc(var(--menu-list-end) + 9rem),   64%); right: -1.5rem; width: 6.5rem; }
.site-menu-leaf--4 { top: max(calc(var(--menu-list-end) + 12rem),  82%); left: 1.25rem;  width: 3.5rem; }
.site-menu-leaf--5 { top: max(calc(var(--menu-list-end) + 1rem),   48%); right: 22%;     width: 2.5rem; }

@media (min-width: 48rem) {
	.site-menu {
		--menu-list-end: 28.875rem;
	}

	.site-menu-leaf--1 { top: 10%; right: -2.25rem; width: 9rem; }
	.site-menu-leaf--2 { left: 1.75rem; width: 3.75rem; }
	.site-menu-leaf--3 { right: -2rem;  width: 8rem; }
	.site-menu-leaf--4 { left: 1.5rem;  width: 4.5rem; }
	.site-menu-leaf--5 { right: 24%;    width: 3rem; }
}