/* =====================================================================
   OnMeeting – nền tảng giao diện: token, glassmorphism sáng/tối, nút, tiện ích
   Theo thiết kế "OnMeeting – Glassmorphism" (accent / radius / blur chỉnh ở Customizer → OnMeeting).
   ===================================================================== */

:root {
	/* Có thể ghi đè từ Customizer (inc/customizer.php) */
	--om-accent: #FF7A2F;
	--om-on-accent: #0A0E1A;
	--om-radius: 26px;
	--om-blur: 22px;

	--om-font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--om-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

	/* Cỡ chữ tiêu đề dùng chung cho mọi trang */
	--om-h1: clamp(34px, 3.9vw, 52px);
	--om-h2: clamp(26px, 2.6vw, 36px);
	--om-h3: 19px;

	/* Nhịp khoảng cách dùng chung */
	--om-sec-space: clamp(64px, 7vw, 96px);   /* giữa các section + trước footer */
	--om-sec-first: 32px;                     /* section ngay dưới hero / breadcrumb */
	--om-pad-card: clamp(24px, 3.4vw, 40px);  /* padding thẻ lớn */
	--om-pad-item: 24px;                      /* padding thẻ con */
	--om-card-gap: 24px;                      /* khoảng cách nội dung trong thẻ lớn */
	--om-grid-gap: 16px;                      /* khoảng cách giữa các thẻ */
	--om-tile-gap: 10px;                      /* khoảng cách giữa các ô nhỏ */

	--om-max: 1280px;
	--om-gutter: 24px;
	--om-header-h: 132px; /* JS cập nhật theo chiều cao thật của header */

	--om-r-xl: calc(var(--om-radius) + 8px);  /* thẻ kính lớn */
	--om-r-lg: var(--om-radius);
	--om-r-md: 18px;
	--om-r-sm: 12px;
	--om-pill: 999px;

	--om-blue: #3B6CFF;
	--om-violet: #8B5CF6;
}

/* ---------- Giao diện TỐI (mặc định) ---------- */
:root,
html[data-om-theme="dark"] {
	color-scheme: dark;
	--om-bg: #0A0E1A;
	--om-bg-rgb: 10, 14, 26;
	--om-ink: #FFFFFF;
	--om-ink-2: rgba(255, 255, 255, .84);
	--om-ink-3: rgba(255, 255, 255, .72);
	--om-ink-4: rgba(255, 255, 255, .56);
	--om-accent-text: var(--om-accent);
	--om-link-hover: color-mix(in srgb, var(--om-accent) 55%, #fff);

	--om-glass-1: rgba(255, 255, 255, .10);   /* thanh nav, thẻ hero */
	--om-glass-2: rgba(255, 255, 255, .06);   /* thẻ section */
	--om-glass-3: rgba(255, 255, 255, .08);   /* chip, nút kính */
	--om-glass-4: rgba(255, 255, 255, .12);   /* thẻ kính đậm (banner, điện thoại) */
	--om-tile: rgba(255, 255, 255, .06);      /* ô con bên trong thẻ */
	--om-tile-hover: rgba(255, 255, 255, .10);

	--om-line-1: rgba(255, 255, 255, .22);
	--om-line-2: rgba(255, 255, 255, .16);
	--om-line-3: rgba(255, 255, 255, .12);
	--om-divider: rgba(255, 255, 255, .14);
	--om-edge: transparent;
	--om-hi-1: rgba(255, 255, 255, .24);
	--om-hi-2: rgba(255, 255, 255, .18);

	--om-shadow-1: 0 20px 50px -20px rgba(0, 0, 0, .6);
	--om-shadow-2: 0 40px 80px -30px rgba(0, 0, 0, .6);
	--om-shadow-3: 0 40px 80px -30px rgba(0, 0, 0, .7);
	--om-shadow-pop: 0 24px 48px -16px rgba(0, 0, 0, .6);

	--om-menu-bg: rgba(20, 26, 44, .72);
	--om-menu-strong: rgba(18, 24, 42, .94);
	--om-active-bg: rgba(255, 255, 255, .92);
	--om-active-ink: #0A0E1A;
	--om-scrim: linear-gradient(90deg, rgba(10, 14, 26, .82) 0%, rgba(10, 14, 26, .35) 60%, rgba(10, 14, 26, .1) 100%);
	--om-fade: #0A0E1A;
	--om-blob-k: 1;
	--om-note-bg: color-mix(in srgb, var(--om-accent) 10%, transparent);
	--om-note-line: color-mix(in srgb, var(--om-accent) 35%, transparent);
}

/* ---------- Giao diện SÁNG (glass trên nền sáng) ---------- */
html[data-om-theme="light"] {
	color-scheme: light;
	--om-bg: #EDF0F8;
	--om-bg-rgb: 237, 240, 248;
	--om-ink: #0A0E1A;
	--om-ink-2: rgba(10, 14, 26, .84);
	--om-ink-3: rgba(10, 14, 26, .68);
	--om-ink-4: rgba(10, 14, 26, .52);
	--om-accent-text: color-mix(in srgb, var(--om-accent) 58%, #000);
	--om-link-hover: color-mix(in srgb, var(--om-accent) 70%, #000);

	--om-glass-1: rgba(255, 255, 255, .66);
	--om-glass-2: rgba(255, 255, 255, .55);
	--om-glass-3: rgba(255, 255, 255, .62);
	--om-glass-4: rgba(255, 255, 255, .74);
	--om-tile: rgba(255, 255, 255, .55);
	--om-tile-hover: rgba(255, 255, 255, .85);

	--om-line-1: rgba(255, 255, 255, .95);
	--om-line-2: rgba(255, 255, 255, .85);
	--om-line-3: rgba(255, 255, 255, .8);
	--om-divider: rgba(10, 14, 26, .10);
	--om-edge: rgba(10, 14, 26, .07);
	--om-hi-1: rgba(255, 255, 255, .95);
	--om-hi-2: rgba(255, 255, 255, .85);

	--om-shadow-1: 0 18px 44px -22px rgba(36, 52, 110, .38);
	--om-shadow-2: 0 34px 70px -34px rgba(36, 52, 110, .42);
	--om-shadow-3: 0 40px 80px -36px rgba(36, 52, 110, .5);
	--om-shadow-pop: 0 24px 48px -18px rgba(36, 52, 110, .38);

	--om-menu-bg: rgba(255, 255, 255, .86);
	--om-menu-strong: rgba(255, 255, 255, .96);
	--om-active-bg: #0A0E1A;
	--om-active-ink: #FFFFFF;
	--om-scrim: linear-gradient(90deg, rgba(237, 240, 248, .88) 0%, rgba(237, 240, 248, .5) 60%, rgba(237, 240, 248, .16) 100%);
	--om-fade: #EDF0F8;
	--om-blob-k: .55;
	--om-note-bg: color-mix(in srgb, var(--om-accent) 14%, #fff);
	--om-note-line: color-mix(in srgb, var(--om-accent) 45%, transparent);
}

/* ---------- Nền trang + các đốm sáng ---------- */
body.om-theme {
	margin: 0;
	background: var(--om-bg);
	color: var(--om-ink);
	font-family: var(--om-font);
	-webkit-font-smoothing: antialiased;
}
body.om-theme *, body.om-theme *::before, body.om-theme *::after { box-sizing: border-box; }
html:has(body.om-theme), body.om-theme #wrapper, body.om-theme #main { background: var(--om-bg); }
body.om-theme #wrapper { position: relative; overflow-x: clip; }
body.om-theme #main { position: relative; z-index: 1; background: transparent; }

/* đốm sáng: lặp theo trục dọc mỗi 7600px */
.om-blobs {
	position: absolute; inset: 0; z-index: 0; pointer-events: none;
	background-repeat: repeat-y; background-size: 100% 7600px;
	background-image:
		radial-gradient(circle 580px at 150px 1210px, color-mix(in srgb, var(--om-accent) calc(55% * var(--om-blob-k)), transparent) 0%, transparent 68%),
		radial-gradient(circle 636px at calc(100% - 150px) 1950px, color-mix(in srgb, var(--om-blue) calc(50% * var(--om-blob-k)), transparent) 0%, transparent 68%),
		radial-gradient(circle 608px at calc(15% + 430px) 3030px, color-mix(in srgb, var(--om-violet) calc(42% * var(--om-blob-k)), transparent) 0%, transparent 68%),
		radial-gradient(circle 537px at calc(100% - 180px) 3980px, color-mix(in srgb, var(--om-accent) calc(45% * var(--om-blob-k)), transparent) 0%, transparent 68%),
		radial-gradient(circle 636px at 210px 5050px, color-mix(in srgb, var(--om-blue) calc(45% * var(--om-blob-k)), transparent) 0%, transparent 68%),
		radial-gradient(circle 580px at calc(90% - 410px) 6010px, color-mix(in srgb, var(--om-violet) calc(40% * var(--om-blob-k)), transparent) 0%, transparent 68%),
		radial-gradient(circle 580px at 290px 6910px, color-mix(in srgb, var(--om-accent) calc(45% * var(--om-blob-k)), transparent) 0%, transparent 68%);
}

/* ---------- Chữ & liên kết ---------- */
body.om-theme h1, body.om-theme h2, body.om-theme h3, body.om-theme h4, body.om-theme h5, body.om-theme h6 {
	font-family: var(--om-font);
	color: var(--om-ink);
	text-transform: none;
	letter-spacing: -.03em;
	font-weight: 800;
	text-wrap: pretty;
}
body.om-theme p { text-wrap: pretty; }
body.om-theme h1, body.om-theme h2, body.om-theme h3, body.om-theme h4, body.om-theme h5, body.om-theme h6 { width: auto; margin-top: 0; }
body.om-theme a { color: var(--om-ink); }
body.om-theme a:hover { color: var(--om-link-hover); }
body.om-theme summary { list-style: none; }
body.om-theme summary::-webkit-details-marker { display: none; }
.om em { font-style: normal; color: var(--om-accent-text); }

.om-wrap { position: relative; max-width: var(--om-max); width: 100%; margin: 0 auto; padding-left: var(--om-gutter); padding-right: var(--om-gutter); }
.om-eyebrow { margin: 0; font-family: var(--om-mono); font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--om-accent-text); }
.om-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; white-space: nowrap; }
.om-icon { flex: none; }

/* ---------- Glass ---------- */
.om-glass,
.om-card,
.om-chip {
	-webkit-backdrop-filter: blur(var(--om-blur)) saturate(160%);
	backdrop-filter: blur(var(--om-blur)) saturate(160%);
}
/* thanh nav / thẻ hero */
.om-glass {
	background: var(--om-glass-1);
	border: 1px solid var(--om-line-1);
	box-shadow: 0 0 0 1px var(--om-edge), inset 0 1px 0 var(--om-hi-1), var(--om-shadow-1);
}
/* thẻ section lớn */
.om-card {
	border-radius: var(--om-r-xl);
	background: var(--om-glass-2);
	border: 1px solid var(--om-line-2);
	box-shadow: 0 0 0 1px var(--om-edge), inset 0 1px 0 var(--om-hi-2), var(--om-shadow-2);
}
/* chip / pill nhỏ */
.om-chip {
	background: var(--om-glass-3);
	border: 1px solid var(--om-line-2);
	box-shadow: 0 0 0 1px var(--om-edge);
}
/* ô con bên trong thẻ */
.om-tile {
	border-radius: var(--om-r-md);
	background: var(--om-tile);
	border: 1px solid var(--om-line-3);
	box-shadow: 0 0 0 1px var(--om-edge);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.om-glass, .om-card, .om-chip { background: color-mix(in srgb, var(--om-bg) 82%, var(--om-ink) 8%); }
}

/* ---------- Nút ---------- */
.om-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	border-radius: var(--om-pill); font-family: var(--om-font); font-weight: 700; line-height: 1.2;
	text-decoration: none !important; cursor: pointer; border: 1px solid transparent; white-space: nowrap; text-transform: none; letter-spacing: 0; margin: 0;
	transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease;
}
.om-btn:active { transform: translateY(1px); }
.om-btn--md { padding: 16px 28px; font-size: 16px; }
.om-btn--sm { padding: 12px 20px; font-size: 14px; }
.om-btn--lg { padding: 18px 34px; font-size: 17px; }
.om-btn--block { display: flex; width: 100%; }
body.om-theme .om-btn--primary,
body.om-theme .om-btn--primary:hover { background: var(--om-accent); color: var(--om-on-accent); box-shadow: 0 16px 40px -12px color-mix(in srgb, var(--om-accent) 70%, transparent); }
body.om-theme .om-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 20px 44px -12px color-mix(in srgb, var(--om-accent) 80%, transparent); }
body.om-theme .om-btn--glass { background: var(--om-glass-1); color: var(--om-ink); border-color: var(--om-line-1); -webkit-backdrop-filter: blur(var(--om-blur)) saturate(160%); backdrop-filter: blur(var(--om-blur)) saturate(160%); box-shadow: 0 0 0 1px var(--om-edge); }
body.om-theme .om-btn--glass:hover { background: var(--om-tile-hover); color: var(--om-ink); }
body.om-theme .om-btn--ghost { background: transparent; color: var(--om-ink); }
body.om-theme .om-btn--ghost:hover { background: var(--om-glass-3); color: var(--om-ink); }

/* ---------- Focus ---------- */
body.om-theme :focus-visible { outline: 2px solid var(--om-accent); outline-offset: 3px; border-radius: 6px; }

/* ---------- Giảm chuyển động ---------- */
@media (prefers-reduced-motion: reduce) {
	.om *, .om *::before, .om *::after { animation: none !important; transition: none !important; }
}

/* ---------- Mobile ---------- */
@media (max-width: 549px) {
	:root { --om-gutter: 16px; }
	.om-btn--md { padding: 14px 22px; font-size: 15px; }
}