/**
 * ICD Design Tokens — global foundation
 * Primary brand: #034EA1 (UET / ICD institutional blue)
 *
 * Use these variables across widgets. Component-scoped aliases may remap
 * but should not introduce new blue hex values.
 */

:root {
	/* Brand */
	--icd-color-primary: #034ea1;
	--icd-color-primary-hover: #023a7a;
	--icd-color-primary-soft: #e8f1fb;
	--icd-color-primary-soft-hover: #d4e5f7;
	--icd-color-primary-rgb: 3, 78, 161;

	/* Text */
	--icd-color-text: #0f172a;
	--icd-color-text-secondary: #334155;
	--icd-color-muted: #64748b;
	/* Quieter than muted — meta/placeholders/icons (not body copy) */
	--icd-color-subtle: #94a3b8;

	/* Surfaces */
	--icd-color-surface: #ffffff;
	--icd-color-surface-muted: #f8fafc;
	--icd-color-surface-subtle: #eef2f7;
	--icd-color-border: #e2e8f0;
	--icd-color-border-strong: #cbd5e1;

	/* Status */
	--icd-color-success: #15803d;
	--icd-color-success-soft: #dcfce7;
	--icd-color-warning: #c2410c;
	--icd-color-warning-soft: #ffedd5;
	--icd-color-danger: #b91c1c;
	--icd-color-danger-soft: #fee2e2;

	/* Typography */
	--icd-font-sans: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
	--icd-font-xs: 0.75rem; /* 12 */
	--icd-font-sm: 0.875rem; /* 14 */
	--icd-font-md: 1rem; /* 16 */
	--icd-font-lg: 1.125rem; /* 18 */
	--icd-font-xl: 1.25rem; /* 20 */
	--icd-font-2xl: 1.5rem; /* 24 */
	--icd-font-3xl: 2rem; /* 32 */
	--icd-leading-tight: 1.25;
	--icd-leading-snug: 1.35;
	--icd-leading-normal: 1.5;
	--icd-leading-relaxed: 1.6;
	--icd-weight-regular: 400;
	--icd-weight-medium: 500;
	--icd-weight-semibold: 600;
	--icd-weight-bold: 700;

	/* Spacing (4px base) */
	--icd-space-1: 4px;
	--icd-space-2: 8px;
	--icd-space-3: 12px;
	--icd-space-4: 16px;
	--icd-space-5: 24px;
	--icd-space-6: 32px;
	--icd-space-7: 40px;
	--icd-space-8: 48px;
	--icd-space-9: 64px;
	--icd-space-10: 80px;

	/* Radius */
	--icd-radius-sm: 6px;
	--icd-radius-md: 10px;
	--icd-radius-lg: 16px;
	--icd-radius-pill: 999px;

	/* Shadow — border-first; elevation as exception */
	--icd-shadow-none: none;
	--icd-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
	--icd-shadow-md: 0 2px 12px rgba(15, 23, 42, 0.06);
	--icd-shadow-lg: 0 8px 24px rgba(15, 23, 42, 0.1);
	--icd-shadow-focus: 0 0 0 3px rgba(var(--icd-color-primary-rgb), 0.2);

	/* Motion */
	--icd-duration-fast: 150ms;
	--icd-duration-normal: 200ms;
	--icd-ease: ease;
	--icd-lift: 2px;

	/* Hit target */
	--icd-hit: 44px;

	/* Icons — only two glyph sizes + one box */
	--icd-icon-sm: 20px;
	--icd-icon-md: 24px;
	--icd-icon-box: 44px;

	/* Layout */
	--icd-container: 1360px;
	--icd-container-pad: 16px;

	/* Breakpoints (documentation for authors — use these widths in media queries)
	 * --icd-bp-lg: 1024px
	 * --icd-bp-md: 768px
	 * --icd-bp-sm: 480px
	 */
	--icd-bp-lg: 1024px;
	--icd-bp-md: 768px;
	--icd-bp-sm: 480px;
	/*
	 * Section rhythm — mặc định sát (home); chỉ thêm khoảng khi dùng
	 * icd-rhythm-lg / icd-rhythm-sm.
	 */
	--icd-section-y: 0px;
	--icd-section-y-lg: 80px;
	--icd-section-y-sm: 40px;
	--icd-section-y-xs: 32px;
	--icd-stack-gap: 24px;

	/* Disabled */
	--icd-color-disabled: #94a3b8;
	--icd-color-disabled-bg: #f1f5f9;
}

/* --------------------------------------------------------------------------
 * Button / CTA system
 * -------------------------------------------------------------------------- */
.icd-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--icd-space-2);
	min-height: var(--icd-hit);
	padding: 10px 18px;
	border: 1.5px solid transparent;
	border-radius: var(--icd-radius-sm);
	font-family: var(--icd-font-sans);
	font-size: var(--icd-font-sm);
	font-weight: var(--icd-weight-semibold);
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition:
		background-color var(--icd-duration-fast) var(--icd-ease),
		color var(--icd-duration-fast) var(--icd-ease),
		border-color var(--icd-duration-fast) var(--icd-ease),
		box-shadow var(--icd-duration-fast) var(--icd-ease);
}

.icd-btn:focus {
	outline: none;
}

.icd-btn:focus-visible {
	box-shadow: var(--icd-shadow-focus);
}

.icd-btn:disabled,
.icd-btn.is-disabled {
	color: var(--icd-color-disabled);
	background: var(--icd-color-disabled-bg);
	border-color: var(--icd-color-border);
	cursor: not-allowed;
	pointer-events: none;
}

.icd-btn--primary {
	background: var(--icd-color-primary);
	border-color: var(--icd-color-primary);
	color: #fff;
}

.icd-btn--primary:hover {
	background: var(--icd-color-primary-hover);
	border-color: var(--icd-color-primary-hover);
	color: #fff;
}

.icd-btn--secondary {
	background: var(--icd-color-surface);
	border-color: var(--icd-color-border-strong);
	color: var(--icd-color-primary);
}

.icd-btn--secondary:hover {
	background: var(--icd-color-primary-soft);
	border-color: var(--icd-color-primary);
	color: var(--icd-color-primary);
}

.icd-btn--ghost {
	background: transparent;
	border-color: transparent;
	color: var(--icd-color-primary);
	min-height: auto;
	padding: 4px 0;
}

.icd-btn--ghost:hover {
	color: var(--icd-color-primary-hover);
	text-decoration: underline;
}

.icd-btn--danger {
	background: var(--icd-color-danger-soft);
	border-color: transparent;
	color: var(--icd-color-danger);
}

.icd-btn--danger:hover {
	background: #fecaca;
	color: var(--icd-color-danger);
}

/* Link-style CTA used inside cards (“Xem thêm”) */
.icd-btn--link,
:where(.jw-posts--icd-card) .icd-post-card .jw-more,
.thim-list-event .icd-event-card__more,
.thim-list-event .view-all,
.icd-pe-slider__view-all {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	color: var(--icd-color-primary);
	font-family: var(--icd-font-sans);
	font-size: var(--icd-font-sm);
	font-weight: var(--icd-weight-semibold);
	line-height: 1.4;
	text-decoration: none;
	cursor: pointer;
	transition: color var(--icd-duration-fast) var(--icd-ease);
}

.icd-btn--link:hover,
:where(.jw-posts--icd-card) .icd-post-card .jw-more:hover,
:where(.jw-posts--icd-card) .icd-post-card .jw-more:focus,
.thim-list-event .icd-event-card__more:hover,
.thim-list-event .view-all:hover,
.icd-pe-slider__view-all:hover {
	color: var(--icd-color-primary-hover);
	background: transparent;
	text-decoration: none;
}

.icd-btn--link:focus-visible,
:where(.jw-posts--icd-card) .icd-post-card .jw-more:focus-visible,
.thim-list-event .icd-event-card__more:focus-visible,
.thim-list-event .view-all:focus-visible,
.icd-pe-slider__view-all:focus-visible {
	outline: none;
	box-shadow: var(--icd-shadow-focus);
	border-radius: var(--icd-radius-sm);
}

/* --------------------------------------------------------------------------
 * Global focus — keyboard only
 * -------------------------------------------------------------------------- */
.icd-tool-button:focus,
.icd-tool-button:focus-visible,
.icd-lang-menu a:focus,
.icd-lang-menu a:focus-visible,
.icd-search-modal__close:focus,
.icd-search-modal__close:focus-visible,
.icd-person-cards__item:focus,
.icd-person-cards__item:focus-visible,
.icd-icon-cards__item:focus,
.icd-icon-cards__item:focus-visible,
.icd-quick-links__item:focus,
.icd-quick-links__item:focus-visible,
.icd-faq-card:focus,
.icd-faq-card:focus-visible,
.icd-proc-cards__btn:focus,
.icd-proc-cards__btn:focus-visible,
.icd-proc-cards__card:focus-within,
.icd-vtabs__tab:focus,
.icd-vtabs__tab:focus-visible,
.icd-mg__item:focus,
.icd-mg__item:focus-visible,
.category-tab:focus,
.category-tab:focus-visible {
	outline: none;
}

.icd-tool-button:focus-visible,
.icd-lang-menu a:focus-visible,
.icd-search-modal__close:focus-visible,
.icd-person-cards__item:focus-visible,
.icd-icon-cards__item:focus-visible,
.icd-feature-cards__item:focus-visible,
.icd-quick-links__item:focus-visible,
.icd-faq-card:focus-visible,
.icd-proc-cards__btn:focus-visible,
.icd-vtabs__tab:focus-visible,
.icd-mg__item:focus-visible,
.category-tab:focus-visible {
	box-shadow: var(--icd-shadow-focus);
}

/* --------------------------------------------------------------------------
 * Reduced motion — sitewide for ICD surfaces
 * -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.icd-person-cards__item,
	.icd-icon-cards__item,
	.icd-feature-cards__item,
	.icd-quick-links__item,
	.icd-faq-card,
	.icd-proc-cards__card,
	.icd-proc-cards__btn,
	.category-tab,
	.icd-ensnn__tab,
	.icd-ensnn__period-btn,
	.icd-estatus__tab,
	.icd-vtabs__tab,
	.icd-sfilter__btn,
	.icd-sfilter__input,
	.icd-sfilter__select {
		transition: none !important;
		animation: none !important;
	}

	.icd-person-cards--lift .icd-person-cards__item:hover,
	.icd-icon-cards--lift .icd-icon-cards__item:hover,
	.icd-feature-cards--lift .icd-feature-cards__item:hover,
	.icd-quick-links__item:hover,
	.icd-faq-card:hover,
	.icd-proc-cards__card:hover {
		transform: none !important;
	}
}

/* --------------------------------------------------------------------------
 * Shared section heading — sentence case, semibold
 * -------------------------------------------------------------------------- */
.icd-section-heading,
.icd-person-cards__heading,
.icd-icon-cards__heading,
.icd-quick-links__title,
.icd-feature-cards__heading,
.icd-vtabs__nav-title,
.icd-sfilter__title,
.e-n-tabs-heading > .icd-tabs-title {
	font-family: var(--icd-font-sans);
	font-size: var(--icd-font-lg);
	font-weight: var(--icd-weight-semibold);
	line-height: var(--icd-leading-snug);
	letter-spacing: -0.01em;
	text-transform: none;
	color: var(--icd-color-text);
}

/* --------------------------------------------------------------------------
 * Section rhythm utilities (Elementor CSS Classes)
 * Add to section Advanced → CSS Classes:
 *   icd-rhythm | icd-rhythm-lg | icd-rhythm-sm | icd-stack
 * -------------------------------------------------------------------------- */
.elementor-section.icd-rhythm,
.icd-rhythm.e-con,
.icd-rhythm {
	padding-block: var(--icd-section-y);
}

.elementor-section.icd-rhythm-lg,
.icd-rhythm-lg.e-con,
.icd-rhythm-lg {
	padding-block: var(--icd-section-y-lg);
}

.elementor-section.icd-rhythm-sm,
.icd-rhythm-sm.e-con,
.icd-rhythm-sm {
	padding-block: var(--icd-section-y-sm);
}

.icd-stack > .elementor-element:not(:last-child),
.icd-stack > .elementor-widget:not(:last-child) {
	margin-bottom: var(--icd-stack-gap);
}

/* Soft default: consecutive top sections without custom class still breathe */
.elementor-top-section + .elementor-top-section:not([class*="icd-rhythm"]) {
	margin-top: 0;
}

@media (max-width: 767px) {
	.elementor-section.icd-rhythm,
	.icd-rhythm.e-con,
	.icd-rhythm {
		padding-block: var(--icd-section-y);
	}

	.elementor-section.icd-rhythm-lg,
	.icd-rhythm-lg.e-con,
	.icd-rhythm-lg {
		padding-block: var(--icd-space-9, 64px);
	}

	.elementor-section.icd-rhythm-sm,
	.icd-rhythm-sm.e-con,
	.icd-rhythm-sm {
		padding-block: var(--icd-section-y-xs);
	}

	.icd-stack > .elementor-element:not(:last-child),
	.icd-stack > .elementor-widget:not(:last-child) {
		margin-bottom: var(--icd-space-4);
	}
}

/* Icon glyph helpers */
.icd-icon-sm {
	width: var(--icd-icon-sm);
	height: var(--icd-icon-sm);
	font-size: var(--icd-icon-sm);
}

.icd-icon-md {
	width: var(--icd-icon-md);
	height: var(--icd-icon-md);
	font-size: var(--icd-icon-md);
}

.icd-icon-box {
	width: var(--icd-icon-box);
	height: var(--icd-icon-box);
	min-width: var(--icd-icon-box);
	min-height: var(--icd-icon-box);
}

/* --------------------------------------------------------------------------
 * Skip link + smooth scroll
 * -------------------------------------------------------------------------- */
html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

.icd-skip-link {
	position: absolute;
	left: var(--icd-space-4, 16px);
	top: -100px;
	z-index: 100001;
	padding: 10px 16px;
	border-radius: var(--icd-radius-sm, 6px);
	background: var(--icd-color-primary, #034ea1);
	color: #fff;
	font-family: var(--icd-font-sans);
	font-size: var(--icd-font-sm);
	font-weight: var(--icd-weight-semibold);
	text-decoration: none;
	box-shadow: var(--icd-shadow-md);
}

.icd-skip-link:focus,
.icd-skip-link:focus-visible {
	top: var(--icd-space-4, 16px);
	outline: none;
	box-shadow: var(--icd-shadow-focus);
	color: #fff;
}

#main-content:focus {
	outline: none;
}

#main-content:focus-visible {
	box-shadow: inset 0 0 0 3px rgba(var(--icd-color-primary-rgb), 0.35);
}

/* --------------------------------------------------------------------------
 * Theme bridge — Eduma / Thim Customizer → ICD tokens
 * Remap theme CSS variables so brand/sample stays coherent sitewide.
 * Load via icd-design-tokens (before child style) + late child reload.
 * -------------------------------------------------------------------------- */
:root {
	--thim-font-body-font-family: var(--icd-font-sans);
	--thim-font-title-font-family: var(--icd-font-sans);
	--thim-font-button-text-transform: none;
	--thim-border-radius-button: var(--icd-radius-sm);
	--thim-border-radius-item: var(--icd-radius-md);
	--thim-border-radius-item-big: var(--icd-radius-lg);
	--thim-body-secondary-color: var(--icd-color-primary);
	--thim-button-hover-color: var(--icd-color-primary-hover);
	--thim-footer-color-hover: var(--icd-color-primary);
	--thim-font-body-color: var(--icd-color-text-secondary);
	--thim-footer-font-title-text-transform: none;
	--thim-top-heading-title-font-text-transform: none;
}

/* RevSlider demo purple overlay → brand blue (institutional sample) */
.thim_overlay_gradient .rev_slider li .slotholder:before,
.thim_overlay_gradient_2 .rev_slider li .slotholder:before,
.thim_overlay_gradient rs-sbg-px > rs-sbg-wrap > rs-sbg.thim-slider-background:before,
.thim_overlay_gradient_2 rs-sbg-px > rs-sbg-wrap > rs-sbg.thim-slider-background:before {
	background: linear-gradient(
		to right,
		rgba(var(--icd-color-primary-rgb), 0.46) 0%,
		rgba(2, 58, 122, 0.46) 100%
	);
}

.thim_overlay_gradient .rev_slider li .thim-slider-button:hover,
.thim_overlay_gradient_2 .rev_slider li .thim-slider-button:hover {
	color: #fff !important;
	background: var(--icd-color-primary) !important;
}

/* Elementor / theme buttons — sentence case + ICD radius when not explicitly branded */
body .elementor-button,
body .elementor-button-link,
body input[type="submit"],
body .thim-ekits-button {
	text-transform: none;
	border-radius: var(--icd-radius-sm);
}

/* Prefer ICD font on chrome that still inherits Inter from Customizer */
body,
button,
input,
select,
textarea {
	font-family: var(--icd-font-sans);
}