/* =========================================================================
   99 — LEGACY OVERRIDES  (loads LAST)
   Neutralises old site-specific CSS that was hand-added to the parent theme's
   style.css (flatsome/style.css) and clashes with this design system.
   We override here instead of editing the theme file, so it stays reversible
   (deactivate the plugin) and survives theme updates.
   ========================================================================= */

/* --- Header auth buttons --------------------------------------------------
   Old CSS gave .header-button-1 a cut-corner "ticket" shape via :before/:after
   gradients + a coloured inner <span> (clip-path), which fought our pill CTA.
   We strip the old shape, keep our clean pill button, and repurpose :after as
   a continuous diagonal light sweep so the CTAs really stand out. */
.header-button-1 a,
.header-button-2 a {
	padding: 0 !important;
	display: inline-block;
	position: relative;
	overflow: hidden;
}
.header-button-1 a span,
.header-button-2 a span {
	background: transparent !important;
	clip-path: none !important;
	height: auto !important;
	line-height: normal !important;
	padding: 0 !important;
	color: inherit !important;
	font-size: inherit !important;
	font-weight: inherit !important;
	position: relative;
	z-index: 1;
}
/* Remove the old gold cut-corner layer (:before) */
.header-button-1 a:before,
.header-button-2 a:before {
	display: none !important;
	content: none !important;
	background: none !important;
	clip-path: none !important;
}
/* Repurpose :after as a subtle diagonal gloss sweep that glints once on hover
   (on the register CTA only — no continuous motion). */
.header-button-1 a:after {
	content: "" !important;
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 42% !important;
	height: 100% !important;
	background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.5) 50%, transparent 100%) !important;
	transform: translateX(-220%) skewX(-20deg) !important;
	clip-path: none !important;
	border: 0 !important;
	pointer-events: none !important;
	z-index: 2 !important;
	/* Periodic light sweep to draw attention: a quick glint, then a pause. */
	animation: s67-shine-loop 3.6s var(--s67-ease) infinite !important;
}
/* No glint on the outline login button */
.header-button-2 a:after { display: none !important; }

@keyframes s67-shine-loop {
	0%   { transform: translateX(-220%) skewX(-20deg); }
	22%  { transform: translateX(320%)  skewX(-20deg); }
	100% { transform: translateX(320%)  skewX(-20deg); }
}

@media (prefers-reduced-motion: reduce) {
	.header-button-1 a:after { display: none !important; }
}

/* --- Page backgrounds -----------------------------------------------------
   Old style.css has:  #main, #wrapper, #main.dark, .absolute-footer, html
   { background: transparent !important; }  — which knocked out our dark base
   (and let body's .bg-default-900 navy show). Re-assert the Arena dark base
   with matching/higher specificity + !important so it wins. */
html { background-color: var(--s67-bg) !important; }
/* Ambient page background: gold light patches spread DOWN the page + a gold
   grid. The background scrolls with the document (not fixed) so each content
   block passes through a bright patch as you scroll — highlighting it. */
body {
	background-color: var(--s67-bg) !important;
	background-image:
		radial-gradient(1000px 520px at 50% 0%,  rgba(241, 194, 51, 0.14), transparent 55%),
		radial-gradient(720px 520px at 88% 16%,  rgba(241, 194, 51, 0.08), transparent 50%),
		radial-gradient(720px 520px at 10% 34%,  rgba(212, 160, 31, 0.08), transparent 50%),
		radial-gradient(820px 560px at 78% 54%,  rgba(241, 194, 51, 0.07), transparent 52%),
		radial-gradient(780px 540px at 18% 74%,  rgba(241, 194, 51, 0.07), transparent 52%),
		radial-gradient(880px 580px at 60% 94%,  rgba(241, 194, 51, 0.06), transparent 55%),
		linear-gradient(rgba(241, 194, 51, 0.04) 1px, transparent 1px),
		linear-gradient(90deg, rgba(241, 194, 51, 0.04) 1px, transparent 1px) !important;
	background-size: auto, auto, auto, auto, auto, auto, 58px 58px, 58px 58px !important;
	background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat, repeat !important;
	background-position: center top !important;
	background-attachment: scroll !important;
}
/* Wrappers transparent so the ambient body background shows through. */
#wrapper,
#main,
#main.dark,
.page-wrapper {
	background: transparent !important;
}

/* --- Footer surfaces ------------------------------------------------------
   Old rule forced .absolute-footer to transparent; re-assert our dark strip. */
.absolute-footer {
	background-color: var(--s67-bg-deepest) !important;
}

/* --- Cards inside .dark .has-shadow --------------------------------------
   Old rule restyled .box surfaces; keep our premium card look authoritative. */
.dark .has-shadow .box.box-blog-post:not(.box-overlay):not(.box-shade) {
	background: var(--s67-bg-elev-1) !important;
	border: 1px solid var(--s67-border) !important;
}

/* =========================================================================
   Bolder header CTAs — make the auth buttons the eye-catchers they should be.
   ========================================================================= */
/* Equalise + vertically centre the two CTAs — fixes uneven padding and the
   buttons sitting at different heights (Flatsome .button has a stray bottom
   margin + line-height-based height that broke alignment in the nav row). */
.header-nav li.header-button-1,
.header-nav li.header-button-2,
.mobile-nav li.header-button-1,
.mobile-nav li.header-button-2 {
	display: flex !important;
	align-items: center !important;
	margin: 0 !important;
	padding: 0 !important;
}
.header-nav li.header-button-1 { margin-left: 10px !important; }
.header-button { margin: 0 !important; line-height: 0; }
.header-button .button {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	height: 40px !important;
	min-width: 116px;
	margin: 0 !important;
	padding: 0 22px !important;
	line-height: 1 !important;
	font-size: 14px !important;
	letter-spacing: 0.02em !important;
	border-radius: 999px !important;
	vertical-align: middle;
	white-space: nowrap;
}
.header-button .button > span { line-height: 1 !important; display: inline-block; }
/* Đăng ký (primary): clean gold fill. Depth comes from a neutral drop shadow
   + a thin gloss highlight on the top edge — NO gold glow. */
.header-button .button.primary {
	animation: none !important;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.4),
		inset 0 -1px 0 rgba(0, 0, 0, 0.18),
		0 4px 12px -5px rgba(0, 0, 0, 0.6) !important;
}
.header-button .button.primary:hover {
	transform: translateY(-1px);
	filter: brightness(1.05);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.48),
		0 9px 22px -8px rgba(0, 0, 0, 0.65) !important;
}
/* Đăng nhập (alert): refined gold outline — understated so the fill leads. */
.header-button .button.alert {
	background: transparent !important;
	border-color: rgba(241, 194, 51, 0.5) !important;
	color: var(--s67-gold-100) !important;
	box-shadow: none !important;
}
.header-button .button.alert:hover {
	background: rgba(241, 194, 51, 0.07) !important;
	border-color: var(--s67-gold-300) !important;
	color: var(--s67-gold-50) !important;
	transform: translateY(-1px);
}

/* =========================================================================
   Override admin / Customizer "Custom CSS" that targets header IDs on mobile.
   Flatsome's admin Custom CSS sets `div#wide-nav` to a purple gradient (and a
   purple top border) at <=549px. Because it uses an ID selector + the
   `background` shorthand (which includes background-image), our class-based
   background-color did not cover it. Here we match the ID specificity, reset
   the gradient image, and re-assert our dark header — all with !important so
   we win regardless of source order, WITHOUT editing the admin settings.
   ========================================================================= */
@media (max-width: 549px) {
	div#wide-nav,
	#wide-nav.header-bottom {
		background: #0c0c12 !important;        /* shorthand resets their gradient */
		background-image: none !important;
		border-image: none !important;
		border-style: solid !important;
		border-width: 0 0 1px 0 !important;
		border-color: var(--s67-border-gold) !important;
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
	}
}

/* =========================================================================
   Mobile header CTAs — give the two buttons breathing room (they were touching)
   and keep them compact enough to fit the bar.
   ========================================================================= */
@media (max-width: 549px) {
	/* gap between the buttons regardless of their order in the bar */
	ul.mobile-nav.nav-right,
	.header-mobile-right ul.nav,
	.mobile-nav.nav-right { gap: 8px !important; }
	.mobile-nav li.header-button-1 { margin-left: 8px !important; }

	.header-button .button {
		min-width: 0 !important;
		height: 38px !important;
		padding: 0 16px !important;
		font-size: 13px !important;
	}
}

/* =========================================================================
   Faint film-grain texture over the whole page (chosen "mờ mờ" direction).
   Inline SVG fractal-noise, desaturated, very low opacity. Fixed + pinned,
   pointer-events:none so it never blocks interaction or hurts legibility.
   ========================================================================= */
body::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 9999;
	pointer-events: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='s67n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s67n)'/%3E%3C/svg%3E");
	background-size: 200px 200px;
	background-repeat: repeat;
	opacity: 0.06;
}

/* =========================================================================
   Mobile body ambient — the large gold glows flood a narrow screen. Drop them
   on mobile: keep only the subtle grid + a soft vignette. The single gold
   "light from the header" lives on the hero section (06-livestream), so the
   page no longer feels washed in gold.
   ========================================================================= */
@media (max-width: 549px) {
	body {
		background-image:
			radial-gradient(150% 130% at 50% 24%, transparent 38%, rgba(0, 0, 0, 0.6) 100%),
			linear-gradient(rgba(241, 194, 51, 0.035) 1px, transparent 1px),
			linear-gradient(90deg, rgba(241, 194, 51, 0.035) 1px, transparent 1px) !important;
		background-size: auto, 56px 56px, 56px 56px !important;
		background-repeat: no-repeat, repeat, repeat !important;
		background-position: center top !important;
	}
}