/*!
Theme Name: chaovietnam
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: chaovietnam
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

chaovietnam is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
}

/* Sections
	 ========================================================================== */

/**
 * Remove the margin in all browsers.
 */
body {
	margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
	display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
	font-size: 2em;
	margin: 0.67em 0;
}

/* Grouping content
	 ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
	box-sizing: content-box;
	height: 0;
	overflow: visible;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
	font-family: monospace, monospace;
	font-size: 1em;
}

/* Text-level semantics
	 ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */
a {
	background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
	border-bottom: none;
	text-decoration: underline;
	text-decoration: underline dotted;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
	font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
	font-family: monospace, monospace;
	font-size: 1em;
}

/**
 * Add the correct font size in all browsers.
 */
small {
	font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

/* Embedded content
	 ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */
img {
	border-style: none;
}

/* Forms
	 ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
	font-family: inherit;
	font-size: 100%;
	line-height: 1.15;
	margin: 0;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
	overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
	text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
	-webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
	border-style: none;
	padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
	outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
	padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *		`fieldset` elements in all browsers.
 */
legend {
	box-sizing: border-box;
	color: inherit;
	display: table;
	max-width: 100%;
	padding: 0;
	white-space: normal;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
	vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
	overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type="checkbox"],
[type="radio"] {
	box-sizing: border-box;
	padding: 0;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
	height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
	-webkit-appearance: textfield;
	outline-offset: -2px;
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit;
}

/* Interactive
	 ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
	display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
	display: list-item;
}

/* Misc
	 ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */
template {
	display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
	display: none;
}

/* Box sizing
--------------------------------------------- */

/* Inherit box-sizing to more easily change it's value on a component level.
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
*,
*::before,
*::after {
	box-sizing: inherit;
}

html {
	box-sizing: border-box;
}

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/

/* Typography
--------------------------------------------- */
body,
button,
input,
select,
optgroup,
textarea {
	color: #404040;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	font-size: 1rem;
	line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
}

p {
	margin-bottom: 1.5em;
}

dfn,
cite,
em,
i {
	font-style: italic;
}

blockquote {
	margin: 0 1.5em;
}

address {
	margin: 0 0 1.5em;
}

pre {
	background: #eee;
	font-family: "Courier 10 Pitch", courier, monospace;
	line-height: 1.6;
	margin-bottom: 1.6em;
	max-width: 100%;
	overflow: auto;
	padding: 1.6em;
}

code,
kbd,
tt,
var {
	font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}

abbr,
acronym {
	border-bottom: 1px dotted #666;
	cursor: help;
}

mark,
ins {
	background: #fff9c0;
	text-decoration: none;
}

big {
	font-size: 125%;
}

/* Elements
--------------------------------------------- */
body {
	background: #fff;
}

hr {
	background-color: #ccc;
	border: 0;
	height: 1px;
	margin-bottom: 1.5em;
}

ul,
ol {
	margin: 0 0 1.5em 3em;
}

ul {
	list-style: disc;
}

ol {
	list-style: decimal;
}

li > ul,
li > ol {
	margin-bottom: 0;
	margin-left: 1.5em;
}

dt {
	font-weight: 700;
}

dd {
	margin: 0 1.5em 1.5em;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
	max-width: 100%;
}

img {
	height: auto;
	max-width: 100%;
}

figure {
	margin: 1em 0;
}

table {
	margin: 0 0 1.5em;
	width: 100%;
}

/* Links
--------------------------------------------- */
a {
	color: #4169e1;
}

a:visited {
	color: #800080;
}

a:hover,
a:focus,
a:active {
	color: #191970;
}

a:focus {
	outline: thin dotted;
}

a:hover,
a:active {
	outline: 0;
}

/* Forms
--------------------------------------------- */
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	border: 1px solid;
	border-color: #ccc #ccc #bbb;
	border-radius: 3px;
	background: #e6e6e6;
	color: rgba(0, 0, 0, 0.8);
	line-height: 1;
	padding: 0.6em 1em 0.4em;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	border-color: #ccc #bbb #aaa;
}

button:active,
button:focus,
input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:active,
input[type="submit"]:focus {
	border-color: #aaa #bbb #bbb;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
	color: #666;
	border: 1px solid #ccc;
	border-radius: 3px;
	padding: 3px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
	color: #111;
}

select {
	border: 1px solid #ccc;
}

textarea {
	width: 100%;
}

/*--------------------------------------------------------------
# Layouts
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/

/* Navigation
--------------------------------------------- */
.main-navigation {
	display: block;
	width: 100%;
}

.main-navigation ul {
	display: none;
	list-style: none;
	margin: 0;
	padding-left: 0;
}

.main-navigation ul ul {
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 99999;
	display: none;
	flex-direction: column;
}

.main-navigation ul ul ul {
	left: 100%;
	top: 0;
}

.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
	display: flex;
	flex-direction: column !important;
	left: 100%;
}

.main-navigation ul ul a {
	width: auto;
}

.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
	display: flex;
	flex-direction: column !important;
	left: 0;
}

.main-navigation li {
	position: relative;
}

.main-navigation a {
	display: block;
	text-decoration: none;
}

/* Small menu. */
.menu-toggle,
.main-navigation.toggled ul {
	display: block;
}

@media screen and (min-width: 37.5em) {

	.menu-toggle {
		display: none;
	}

	.main-navigation > ul,
	.main-navigation .main-nav-menu {
		display: flex;
	}
}

.site-main .comment-navigation,
.site-main
.posts-navigation,
.site-main
.post-navigation {
	margin: 0 0 1.5em;
}

.comment-navigation .nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
	display: flex;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
	flex: 1 0 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
	text-align: end;
	flex: 1 0 50%;
}

/* Posts and pages
--------------------------------------------- */
.sticky {
	display: block;
}

.post,
.page {
	margin: 0 0 1.5em;
}

.updated:not(.published) {
	display: none;
}

.page-content,
.entry-content,
.entry-summary {
	margin: 1.5em 0 0;
}

.page-links {
	clear: both;
	margin: 0 0 1.5em;
}

/* Comments
--------------------------------------------- */
.comment-content a {
	word-wrap: break-word;
}

.bypostauthor {
	display: block;
}

/* Widgets
--------------------------------------------- */
.widget {
	margin: 0 0 1.5em;
}

.widget select {
	max-width: 100%;
}

/* Media
--------------------------------------------- */
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
	border: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}

/* Make sure logo link wraps around logo image. */
.custom-logo-link {
	display: inline-block;
}

/* Captions
--------------------------------------------- */
.wp-caption {
	margin-bottom: 1.5em;
	max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption .wp-caption-text {
	margin: 0.8075em 0;
}

.wp-caption-text {
	text-align: center;
}

/* Galleries
--------------------------------------------- */
.gallery {
	margin-bottom: 1.5em;
	display: grid;
	grid-gap: 1.5em;
}

.gallery-item {
	display: inline-block;
	text-align: center;
	width: 100%;
}

.gallery-columns-2 {
	grid-template-columns: repeat(2, 1fr);
}

.gallery-columns-3 {
	grid-template-columns: repeat(3, 1fr);
}

.gallery-columns-4 {
	grid-template-columns: repeat(4, 1fr);
}

.gallery-columns-5 {
	grid-template-columns: repeat(5, 1fr);
}

.gallery-columns-6 {
	grid-template-columns: repeat(6, 1fr);
}

.gallery-columns-7 {
	grid-template-columns: repeat(7, 1fr);
}

.gallery-columns-8 {
	grid-template-columns: repeat(8, 1fr);
}

.gallery-columns-9 {
	grid-template-columns: repeat(9, 1fr);
}

.gallery-caption {
	display: block;
}

/*--------------------------------------------------------------
# Plugins
--------------------------------------------------------------*/

/* Jetpack infinite scroll
--------------------------------------------- */

/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
	display: none;
}

/* Re-display the Theme Footer when Infinite Scroll has reached its end. */
.infinity-end.neverending .site-footer {
	display: block;
}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/

/* Accessibility
--------------------------------------------- */

/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
	outline: 0;
}

/* Alignments
--------------------------------------------- */
.alignleft {

	/*rtl:ignore*/
	float: left;

	/*rtl:ignore*/
	margin-right: 1.5em;
	margin-bottom: 1.5em;
}

.alignright {

	/*rtl:ignore*/
	float: right;

	/*rtl:ignore*/
	margin-left: 1.5em;
	margin-bottom: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1.5em;
}


/* ==========================================================================
   CHAOBIETNAM CUSTOM MODERN POST & ARCHIVE STYLES
   ========================================================================== */

:root {
	--cvn-primary: #2c6738;
	--cvn-primary-hover: #1f4927;
	--cvn-accent: #f99b1c;
	--cvn-text: #2d3748;
	--cvn-text-muted: #718096;
	--cvn-bg-light: #f7fafc;
	--cvn-border: #e2e8f0;
	--cvn-card-bg: #ffffff;
	--cvn-radius: 12px;
	--cvn-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
	--cvn-shadow-hover: 0 12px 24px -4px rgba(0, 0, 0, 0.12), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
	--cvn-transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

body {
	color: var(--cvn-text);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	background-color: #fcfcfc;
}

/* Site Container */
.cvn-site-container {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 40px 20px;
	box-sizing: border-box;
}

/* Breadcrumbs */
.cvn-breadcrumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	color: var(--cvn-text-muted);
	margin-bottom: 30px;
}
.cvn-breadcrumbs a {
	color: var(--cvn-text-muted);
	text-decoration: none;
	transition: var(--cvn-transition);
}
.cvn-breadcrumbs a:hover {
	color: var(--cvn-primary);
}
.cvn-bc-sep {
	color: #cbd5e0;
}
.cvn-bc-current {
	color: var(--cvn-text);
	font-weight: 500;
}

/* Archive Layout Breadcrumbs */
.cvn-archive-layout .cvn-breadcrumbs {
	justify-content: center;
	margin-bottom: 16px;
}

/* Archive Header */
.cvn-archive-header {
	margin-bottom: 40px;
	padding-bottom: 24px;
	border-bottom: 2px solid var(--cvn-border);
	text-align: center;
}
.cvn-archive-title {
	font-size: 32px;
	font-weight: 700;
	color: var(--cvn-primary);
	margin: 0 auto 12px;
	text-align: center;
}
.cvn-archive-description {
	font-size: 16px;
	color: var(--cvn-text-muted);
	line-height: 1.6;
	max-width: 720px;
	margin: 0 auto;
	text-align: center;
}

/* Posts Grid - Fixed 3 columns on desktop, 2 on tablet, 1 on mobile */
.cvn-posts-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
	margin-bottom: 50px;
}

@media screen and (max-width: 991px) {
	.cvn-posts-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20px;
	}
}

@media screen and (max-width: 600px) {
	.cvn-posts-grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}
}

/* Post Card */
.cvn-post-card {
	background: var(--cvn-card-bg);
	border-radius: var(--cvn-radius);
	overflow: hidden;
	box-shadow: var(--cvn-shadow);
	transition: var(--cvn-transition);
	display: flex;
	flex-direction: column;
	border: 1px solid var(--cvn-border);
}
.cvn-post-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--cvn-shadow-hover);
}

.cvn-card-thumb-wrap {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #edf2f7;
}
.cvn-card-thumb-link {
	display: block;
	width: 100%;
	height: 100%;
}
.cvn-card-thumb {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}
.cvn-post-card:hover .cvn-card-thumb {
	transform: scale(1.05);
}
.cvn-card-thumb-placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #2c6738 0%, #1f4927 100%);
	color: #ffffff;
	font-weight: 700;
	font-size: 18px;
	letter-spacing: 1px;
}

.cvn-card-badge {
	display: none !important;
}

.cvn-card-content {
	padding: 24px;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

.cvn-card-meta {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 13px;
	color: var(--cvn-text-muted);
	margin-bottom: 12px;
}
.cvn-card-date {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.cvn-card-title {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.4;
	margin: 0 0 12px 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.cvn-card-title a {
	color: var(--cvn-text);
	text-decoration: none;
	transition: var(--cvn-transition);
}
.cvn-card-title a:hover {
	color: var(--cvn-primary);
}

.cvn-card-excerpt {
	font-size: 14px;
	line-height: 1.6;
	color: var(--cvn-text-muted);
	margin-bottom: 20px;
	flex-grow: 1;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.cvn-card-excerpt:empty {
	display: none;
	margin-bottom: 0;
}

.cvn-card-footer {
	margin-top: auto;
	padding-top: 14px;
	border-top: 1px solid var(--cvn-border);
}
.cvn-card-readmore {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	font-weight: 600;
	color: var(--cvn-primary);
	text-decoration: none;
	transition: var(--cvn-transition);
}
.cvn-card-readmore:hover {
	color: var(--cvn-accent);
	gap: 10px;
}

/* Video Card Overlay & Badges */
.cvn-play-btn-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.2);
	transition: background 0.3s ease;
	z-index: 2;
}

.cvn-card-thumb-wrap:hover .cvn-play-btn-overlay {
	background: rgba(0, 0, 0, 0.35);
}

.cvn-play-btn-circle {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: rgba(255, 0, 0, 0.9);
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-left: 3px;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
	transition: transform 0.3s ease, background 0.3s ease;
}

.cvn-card-thumb-wrap:hover .cvn-play-btn-circle {
	transform: scale(1.15);
	background: #ff0000;
}

.cvn-video-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-weight: 600;
	color: #dc2626;
	font-size: 12px;
}

.cvn-btn-yt {
	color: #dc2626;
	font-weight: 700;
}

.cvn-btn-yt:hover {
	color: #991b1b;
}

/* Responsive Video Embed on Single/Page */
.cvn-video-embed-box {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	margin-bottom: 30px;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
	background: #000;
}

.cvn-video-embed-box iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Pagination */
.cvn-pagination-wrap {
	display: flex;
	justify-content: center;
	margin-top: 30px;
}
.cvn-pagination-wrap .nav-links {
	display: flex;
	gap: 8px;
	align-items: center;
}
.cvn-pagination-wrap a,
.cvn-pagination-wrap .current {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 14px;
	border-radius: 8px;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	border: 1px solid var(--cvn-border);
	background: #ffffff;
	color: var(--cvn-text);
	transition: var(--cvn-transition);
}
.cvn-pagination-wrap a:hover {
	background: var(--cvn-bg-light);
	border-color: var(--cvn-primary);
	color: var(--cvn-primary);
}
.cvn-pagination-wrap .current {
	background: var(--cvn-primary);
	color: #ffffff;
	border-color: var(--cvn-primary);
}

/* ==========================================================================
   SINGLE ARTICLE & FULL-WIDTH PAGE STYLES
   ========================================================================== */
.cvn-single-layout {
	max-width: 860px;
	margin: 0 auto;
}

.cvn-page-full-layout {
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
}

.cvn-page-full-layout .cvn-single-article {
	width: 100%;
	padding: 40px;
}

.cvn-single-article {
	background: #ffffff;
	border-radius: var(--cvn-radius);
	padding: 40px;
	box-shadow: var(--cvn-shadow);
	border: 1px solid var(--cvn-border);
	margin-bottom: 50px;
}

.cvn-article-header {
	margin-bottom: 30px;
}
.cvn-article-categories {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 16px;
}
.cvn-badge,
.cvn-article-category-badge {
	background: #e8f5e9;
	color: var(--cvn-primary) !important;
	padding: 4px 12px;
	border-radius: 16px;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	transition: var(--cvn-transition);
	display: inline-block;
}
.cvn-badge:hover,
.cvn-article-category-badge:hover {
	background: var(--cvn-primary);
	color: #ffffff !important;
}

.cvn-article-title {
	font-size: 32px;
	font-weight: 800;
	line-height: 1.35;
	color: #1a202c;
	margin: 0 0 16px 0;
}

.cvn-article-meta {
	display: flex;
	align-items: center;
	gap: 20px;
	font-size: 14px;
	color: var(--cvn-text-muted);
	padding-bottom: 20px;
	border-bottom: 1px solid var(--cvn-border);
}
.cvn-meta-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.cvn-article-featured-image {
	margin: 0 0 35px 0;
	border-radius: 8px;
	overflow: hidden;
}
.cvn-article-featured-image img {
	width: 100%;
	height: auto;
	display: block;
}

/* Article Body Typography */
.cvn-article-body {
	font-size: 17px;
	line-height: 1.8;
	color: #2d3748;
}
.cvn-article-body p {
	margin-bottom: 20px;
}
.cvn-article-body h2 {
	font-size: 24px;
	font-weight: 700;
	color: #1a202c;
	margin: 36px 0 16px 0;
	padding-left: 12px;
	border-left: 4px solid var(--cvn-primary);
}
.cvn-article-body h3 {
	font-size: 20px;
	font-weight: 700;
	color: var(--cvn-primary);
	margin: 28px 0 14px 0;
}
.cvn-article-body h4 {
	font-size: 18px;
	font-weight: 600;
	margin: 20px 0 12px 0;
}
.cvn-article-body ul,
.cvn-article-body ol {
	padding-left: 24px;
	margin-bottom: 24px;
}
.cvn-article-body li {
	margin-bottom: 8px;
}
.cvn-article-body img {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
	margin: 16px auto;
	display: block;
}
.cvn-article-body blockquote {
	margin: 24px 0;
	padding: 18px 24px;
	background: #f0f7f2;
	border-left: 4px solid var(--cvn-primary);
	border-radius: 0 8px 8px 0;
	font-style: italic;
	color: #2e6b3f;
}
.cvn-article-body table {
	display: block;
	width: 100%;
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border-collapse: collapse;
	margin: 24px 0;
	font-size: 15px;
}
.cvn-article-body iframe,
.cvn-article-body embed,
.cvn-article-body object,
.cvn-article-body video {
	max-width: 100% !important;
}
.cvn-article-body th,
.cvn-article-body td {
	padding: 12px 16px;
	border: 1px solid var(--cvn-border);
}
.cvn-article-body th {
	background: #edf2f7;
	font-weight: 700;
	color: #1a202c;
}
.cvn-article-body tr:nth-child(even) td {
	background: #f7fafc;
}

/* Article Tags */
.cvn-article-footer {
	margin-top: 40px;
	padding-top: 20px;
	border-top: 1px solid var(--cvn-border);
}
.cvn-article-tags {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}
.cvn-tags-label {
	font-weight: 600;
	font-size: 14px;
	color: var(--cvn-text-muted);
}
.cvn-tag-link {
	font-size: 13px;
	color: var(--cvn-text-muted);
	background: #f1f5f9;
	padding: 3px 10px;
	border-radius: 6px;
	text-decoration: none;
	transition: var(--cvn-transition);
}
.cvn-tag-link:hover {
	color: #ffffff;
	background: var(--cvn-primary);
}

/* Related Posts */
.cvn-related-posts-section {
	margin-top: 50px;
	padding-top: 40px;
	border-top: 2px solid var(--cvn-border);
}
.cvn-section-title {
	font-size: 22px;
	font-weight: 700;
	color: var(--cvn-primary);
	margin-bottom: 24px;
}
.cvn-related-grid {
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 20px;
	margin-bottom: 0;
}

/* Post Navigation (Prev/Next) */
.post-navigation {
	margin-top: 40px;
	padding: 20px 0;
	border-top: 1px solid var(--cvn-border);
}
.post-navigation .nav-links {
	display: flex;
	justify-content: space-between;
	gap: 20px;
}
.post-navigation a {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: var(--cvn-text);
	transition: var(--cvn-transition);
}
.post-navigation a:hover {
	color: var(--cvn-primary);
}
.post-navigation .nav-subtitle {
	font-size: 12px;
	color: var(--cvn-text-muted);
	text-transform: uppercase;
	margin-bottom: 4px;
}
.post-navigation .nav-title {
	font-size: 15px;
	font-weight: 600;
}

/* ==========================================================================
   Detail Layout with Sidebar (Content Left, Sidebar Right)
   ========================================================================== */
.cvn-detail-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 36px;
	align-items: start;
	margin-top: 10px;
	margin-bottom: 60px;
}

.cvn-detail-content {
	min-width: 0;
}

.cvn-detail-sidebar {
	width: 100%;
}

.cvn-sidebar.sticky {
	position: -webkit-sticky;
	position: sticky;
	top: 90px;
	z-index: 10;
}

/* Sidebar Widgets */
.cvn-widget {
	background: #ffffff;
	border: 1px solid #edf2f7;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
	margin-bottom: 24px;
}

.cvn-widget.mt-20 {
	margin-top: 20px;
}

/* Widget Title (matching old theme col-main / sibar-title) */
.cvn-widget .widget-title,
.widget-title.sibar-title.col-main {
	background-color: #006838 !important;
	color: #ffffff !important;
	font-size: 15px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	padding: 12px 18px;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	border: none;
}

.cvn-widget .widget-title span,
.widget-title.sibar-title.col-main span {
	color: #ffffff !important;
}

.cvn-widget-body {
	padding: 16px 18px;
}

.cvn-widget-body-list {
	padding: 6px 0;
}

/* Search Form in Sidebar (matching old theme relative border-b border-black) */
.cvn-sidebar-search-form {
	width: 100%;
}

.cvn-search-input-wrap {
	position: relative;
	display: flex;
	align-items: center;
	border-bottom: 2px solid #006838;
	padding-bottom: 4px;
}

.cvn-search-input-wrap input#keyword,
.cvn-search-input-wrap input {
	width: 100%;
	border: none;
	background: transparent;
	padding: 8px 36px 8px 0;
	font-size: 14px;
	color: #1e293b;
	outline: none;
	box-shadow: none;
}

.cvn-search-input-wrap input::placeholder {
	color: #94a3b8;
}

.cvn-search-input-wrap button {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	background: transparent;
	border: none;
	cursor: pointer;
	color: #006838;
	padding: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: color 0.2s ease, transform 0.2s ease;
}

.cvn-search-input-wrap button:hover {
	color: #2c6738;
	transform: translateY(-50%) scale(1.1);
}

/* Related Posts List (ul.lienquan matching old theme) */
ul.lienquan {
	list-style: none;
	padding: 0 16px;
	margin: 0;
}

ul.lienquan > li {
	padding: 9px 0;
	border-bottom: 1px dashed #e2e8f0;
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 8px;
}

ul.lienquan > li:last-child {
	border-bottom: none;
}

ul.lienquan > li::before {
	content: "\2022";
	color: #006838;
	font-size: 18px;
	line-height: 1.2;
	flex-shrink: 0;
}

ul.lienquan a {
	font-size: 13.5px;
	color: #2d3748 !important;
	line-height: 1.45;
	text-decoration: none;
	transition: all 0.2s ease;
	display: inline-block;
}

ul.lienquan a:hover {
	color: #006838 !important;
	padding-left: 3px;
}

/* Support Box in Sidebar */
.cvn-support-body {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 16px 18px;
}

.sidebar-support-item {
	display: flex;
	align-items: center;
	gap: 12px;
}

.supp-icon {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.supp-call { background: #e6f4ea; color: #2c6738; }
.supp-zalo { background: #e0f2fe; color: #0284c7; }

.supp-text {
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.supp-label {
	font-size: 11.5px;
	color: #64748b;
	font-weight: 500;
	white-space: nowrap !important;
}

.supp-link {
	font-size: 14px;
	font-weight: 700;
	color: #1e293b;
	text-decoration: none;
	white-space: nowrap !important;
}

.supp-link:hover {
	color: #006838;
}

.btn-sidebar-cta {
	display: block;
	text-align: center;
	background: linear-gradient(135deg, #f99b1c 0%, #e0850c 100%);
	color: #ffffff !important;
	font-size: 13.5px;
	font-weight: 700;
	padding: 10px 16px;
	border-radius: 8px;
	text-decoration: none;
	margin-top: 6px;
	box-shadow: 0 4px 12px rgba(249, 155, 28, 0.3);
	transition: all 0.2s ease;
}

.btn-sidebar-cta:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(249, 155, 28, 0.4);
}

@media screen and (max-width: 991px) {
	.cvn-detail-layout {
		grid-template-columns: 1fr;
		gap: 30px;
	}
	.cvn-sidebar.sticky {
		position: static;
	}
}

/* Responsive adjustments */
@media screen and (max-width: 768px) {
	.cvn-site-container {
		padding: 24px 16px;
	}
	.cvn-single-article {
		padding: 20px 16px;
	}
	.cvn-article-title {
		font-size: 24px;
	}
	.cvn-posts-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20px;
	}
}

@media screen and (max-width: 600px) {
	.cvn-posts-grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}
}


/* ==========================================================================
   HANITA EDUCATION CUSTOM THEME STYLES (HEADER, FOOTER, HOMEPAGE)
   ========================================================================== */

:root {
	--cvn-primary: #2c6738;
	--cvn-primary-dark: #1e4926;
	--cvn-accent: #f99b1c;
	--cvn-accent-hover: #e0850c;
	--cvn-text: #2d3748;
	--cvn-text-muted: #718096;
	--cvn-border: #e2e8f0;
	--cvn-bg-light: #f8fafc;
	--cvn-radius: 10px;
	--cvn-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
	--cvn-shadow-hover: 0 10px 25px rgba(0, 0, 0, 0.12);
	--cvn-transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.text-center {
	text-align: center !important;
}
.text-left {
	text-align: left !important;
}
.text-right {
	text-align: right !important;
}

html {
	margin: 0;
	padding: 0;
	height: 100%;
	overflow-x: hidden;
}

body {
	font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	color: var(--cvn-text);
	background-color: var(--cvn-primary-dark);
	line-height: 1.6;
	margin: 0;
	padding: 0;
	min-height: 100%;
	overflow-x: hidden;
	display: flex;
	flex-direction: column;
}

#page.site {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	width: 100%;
	background-color: #ffffff;
	position: relative;
	overflow-x: hidden;
	margin: 0;
	padding: 0;
}

.site-main {
	flex: 1 0 auto;
}

.site-container {
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 20px;
	box-sizing: border-box;
}

/* ==========================================================================
   TOPBAR
   ========================================================================== */
.site-topbar {
	background-color: #f8f9fa;
	border-bottom: 1px solid #edf2f7;
	font-size: 13px;
	color: #4a5568;
	padding: 8px 0;
}

.topbar-inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
}

.topbar-left, .topbar-right {
	display: flex;
	align-items: center;
	gap: 16px;
}

.topbar-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: #4a5568;
	text-decoration: none;
	transition: var(--cvn-transition);
}

.topbar-hotline {
	color: #e53e3e;
	font-weight: 600;
}

.topbar-hotline:hover {
	color: #c53030;
}

.topbar-divider {
	color: #cbd5e0;
}

.topbar-lang-switcher .lang-switcher-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 12px;
}

.topbar-lang-switcher .lang-switcher-list li {
	display: inline-flex;
	align-items: center;
	margin: 0;
}

.topbar-lang-switcher a {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: #4a5568;
	text-decoration: none;
	font-size: 12px;
	font-weight: 500;
	padding: 2px 6px;
	border-radius: 4px;
	transition: var(--cvn-transition);
}

.topbar-lang-switcher li.current-lang a,
.topbar-lang-switcher a:hover {
	background: #edf2f7;
	color: var(--cvn-primary);
	font-weight: 600;
}

/* ==========================================================================
   MAIN HEADER & NAVIGATION
   ========================================================================== */
.site-header {
	background: #ffffff;
	border-bottom: 1px solid #edf2f7;
	position: sticky;
	top: 0;
	z-index: 1000;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

body.admin-bar .site-header {
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar .site-header {
		top: 46px;
	}
}

.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 10px 20px;
}

.site-branding {
	flex-shrink: 0;
}

.site-branding .site-logo-img {
	height: 54px;
	width: auto;
	max-width: 220px;
	object-fit: contain;
	display: block;
}

.main-navigation {
	display: flex;
	align-items: center;
	flex: 1 1 auto;
	justify-content: flex-end;
}

.main-nav-menu {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 20px;
	flex-wrap: nowrap;
}

/* English Header Menu spacing */
html[lang*="en"] .main-nav-menu {
	gap: clamp(6px, 0.9vw, 13px);
}

html[lang*="en"] .main-nav-menu > li > a {
	font-size: clamp(10.5px, 0.85vw, 12px);
	letter-spacing: 0.1px;
	padding: 8px 2px;
	gap: 3px;
}

.main-nav-menu > li {
	position: relative;
	margin: 0;
	flex-shrink: 0;
}

.main-nav-menu > li > a {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 8px 3px;
	color: #1a202c;
	text-decoration: none;
	font-size: 13.5px;
	font-weight: 700;
	letter-spacing: 0.2px;
	text-transform: uppercase;
	white-space: nowrap;
	position: relative;
	transition: var(--cvn-transition);
}

.cvn-submenu-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	opacity: 0.65;
	line-height: 0;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.cvn-submenu-arrow svg {
	display: block;
}

.main-nav-menu > li.menu-item-has-children:hover > a .cvn-submenu-arrow,
.main-nav-menu > li.menu-item-has-children:focus-within > a .cvn-submenu-arrow {
	opacity: 1;
	transform: rotate(180deg);
}

.main-nav-menu > li > a:hover,
.main-nav-menu > li.current-menu-item > a {
	color: var(--cvn-primary);
}

.main-nav-menu > li > a::after {
	content: '';
	position: absolute;
	bottom: 2px;
	left: 0;
	width: 0;
	height: 2px;
	background: var(--cvn-primary);
	transition: width 0.3s ease;
}

.main-nav-menu > li:hover > a::after,
.main-nav-menu > li.current-menu-item > a::after {
	width: 100%;
}

/* Dropdown Sub-menu */
.main-nav-menu .sub-menu,
.main-nav-menu li.mega-menu .sub-menu,
.main-navigation ul ul,
.main-navigation ul li ul {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 220px !important;
	width: max-content;
	background: #ffffff;
	border-radius: 8px;
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
	border: 1px solid #edf2f7;
	list-style: none;
	padding: 8px 0;
	margin: 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: all 0.25s ease;
	z-index: 1000;
	display: flex !important;
	flex-direction: column !important;
	float: none !important;
}

.main-nav-menu li:hover > .sub-menu,
.main-nav-menu li.mega-menu:hover > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	display: flex !important;
	flex-direction: column !important;
}

.main-nav-menu .sub-menu li,
.main-nav-menu li.mega-menu .sub-menu li {
	display: block !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	position: relative;
	float: none !important;
	flex: 0 0 100% !important;
}

.main-nav-menu .sub-menu a {
	display: block !important;
	width: 100% !important;
	padding: 10px 20px !important;
	color: #2d3748 !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	white-space: nowrap !important;
	border-bottom: 1px solid #f8fafc;
	transition: all 0.2s ease !important;
	box-sizing: border-box;
}

.main-nav-menu .sub-menu li:last-child a {
	border-bottom: none;
}

.main-nav-menu .sub-menu a:hover {
	background-color: #f0fdf4 !important;
	color: var(--cvn-primary) !important;
	padding-left: 24px !important;
}

.main-nav-menu .sub-menu a::after {
	display: none !important;
}

.main-nav-menu .sub-menu li.menu-item-has-children > a {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.main-nav-menu .sub-menu li.menu-item-has-children > a .cvn-submenu-arrow {
	transform: rotate(-90deg);
}

.main-nav-menu .sub-menu li.menu-item-has-children:hover > a .cvn-submenu-arrow,
.main-nav-menu .sub-menu li.menu-item-has-children:focus-within > a .cvn-submenu-arrow {
	opacity: 1;
	transform: rotate(-90deg) translateY(2px);
}

.main-nav-menu .sub-menu .sub-menu {
	left: 100% !important;
	top: 0 !important;
}

/* Header Actions */
.header-actions {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-shrink: 0;
}

@media screen and (min-width: 1025px) {
	.header-actions {
		display: none;
	}
}

.btn-header-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: linear-gradient(135deg, #f99b1c 0%, #ff8300 100%);
	color: #ffffff !important;
	height: 40px;
	padding: 0 20px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.3px;
	border-radius: 20px;
	text-decoration: none;
	white-space: nowrap;
	flex-shrink: 0;
	line-height: 1;
	box-shadow: 0 4px 14px rgba(249, 155, 28, 0.35);
	transition: var(--cvn-transition);
}

.btn-header-cta:hover {
	background: linear-gradient(135deg, #e0850c 0%, #e67600 100%);
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(249, 155, 28, 0.45);
}

.btn-cta-icon {
	flex-shrink: 0;
	display: block;
}

.btn-cta-text {
	white-space: nowrap;
	display: inline-block;
	line-height: 1;
}

.mobile-menu-toggle {
	display: none;
	background: transparent;
	border: none;
	cursor: pointer;
	padding: 8px;
}

.hamburger-box {
	display: block;
	width: 24px;
	height: 18px;
	position: relative;
}

.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
	display: block;
	width: 24px;
	height: 2.5px;
	background-color: #1a202c;
	border-radius: 3px;
	position: absolute;
	transition: all 0.3s ease;
}

.hamburger-inner {
	top: 8px;
}
.hamburger-inner::before {
	content: '';
	top: -7px;
}
.hamburger-inner::after {
	content: '';
	top: 7px;
}

/* Mobile Drawer */
.mobile-drawer-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s ease;
	z-index: 1998;
}

.mobile-drawer-overlay.active {
	opacity: 1;
	visibility: visible;
}

.mobile-drawer {
	position: fixed;
	top: 0;
	right: -320px;
	width: min(300px, 85vw);
	height: 100%;
	background: #ffffff;
	box-shadow: -5px 0 25px rgba(0, 0, 0, 0.15);
	z-index: 1999;
	display: flex;
	flex-direction: column;
	transition: right 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.mobile-drawer.active {
	right: 0;
}

.mobile-drawer-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	border-bottom: 1px solid #edf2f7;
}

.mobile-drawer-logo {
	height: 42px;
	width: auto;
}

.mobile-drawer-close {
	background: none;
	border: none;
	font-size: 32px;
	line-height: 1;
	color: #a0aec0;
	cursor: pointer;
}

.mobile-drawer-body {
	flex-grow: 1;
	overflow-y: auto;
	padding: 20px;
}

.mobile-nav-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mobile-nav-menu li {
	margin: 0 0 10px 0;
}

.mobile-nav-menu a {
	display: block;
	padding: 10px 0;
	color: #2d3748;
	font-weight: 600;
	font-size: 15px;
	text-decoration: none;
	border-bottom: 1px solid #f7fafc;
}

.mobile-nav-menu li.menu-item-has-children > a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.mobile-nav-menu .sub-menu {
	list-style: none;
	padding-left: 15px;
	margin: 5px 0 10px 0;
}

.mobile-nav-menu .sub-menu a {
	font-size: 14px;
	font-weight: normal;
	color: #4a5568;
}

.mobile-drawer-footer {
	margin-top: 30px;
	padding-top: 20px;
	border-top: 1px solid #edf2f7;
}

.mobile-lang-list {
	margin-bottom: 15px;
}

.mobile-lang-ul {
	list-style: none;
	padding: 0;
	margin: 8px 0 0 0;
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

/* ==========================================================================
   HOMEPAGE SECTION 1: HERO SLIDER
   ========================================================================== */
.section-hero-slider {
	position: relative;
	overflow: hidden;
	width: 100%;
	background: #000000;
}

.hero-slider-container {
	position: relative;
	width: 100%;
	aspect-ratio: 2048 / 781;
	overflow: hidden;
}

.hero-slides-track {
	position: relative;
	width: 100%;
	height: 100%;
}

.hero-slide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.8s ease-in-out, visibility 0.8s ease-in-out;
}

.hero-slide.active {
	opacity: 1;
	visibility: visible;
}

.hero-slide-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

.slider-btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: rgba(0, 0, 0, 0.35);
	color: #ffffff;
	border: none;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	cursor: pointer;
	transition: var(--cvn-transition);
	z-index: 10;
}

.slider-btn:hover {
	background: var(--cvn-primary);
}

.slider-prev {
	left: 48px;
}

.slider-next {
	right: 20px;
}

.slider-dots {
	position: absolute;
	bottom: 18px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 8px;
	z-index: 10;
}

.slider-dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.5);
	cursor: pointer;
	transition: var(--cvn-transition);
}

.slider-dot.active {
	width: 28px;
	border-radius: 6px;
	background: var(--cvn-accent);
}

/* ==========================================================================
   HOMEPAGE SECTION 1B: PROMO HIGHLIGHT CARDS
   ========================================================================== */
.section-promo-highlights {
	padding: 28px 0 8px 0;
	background-color: #ffffff;
}

.promo-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
	border: 1px solid #d5e4f3;
}

.promo-grid[data-count="1"] {
	grid-template-columns: 1fr;
}

.promo-grid[data-count="2"] {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.promo-grid[data-count="4"] {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.promo-card {
	padding: 30px 22px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	transition: var(--cvn-transition);
}

.promo-card:hover {
	filter: brightness(0.98);
}

.promo-card.promo-blue {
	background-color: #aec6de;
}

.promo-card.promo-sky {
	background-color: #c1ddf9;
}

.promo-card.promo-warm {
	background-color: #fff3d6;
}

.promo-card.promo-mint {
	background-color: #ddf3e2;
}

.promo-title {
	font-size: 19px;
	font-weight: 800;
	color: var(--cvn-primary);
	margin: 0 0 12px 0;
	line-height: 1.3;
	text-transform: uppercase;
}

.promo-line1 {
	font-size: 16px;
	font-weight: 700;
	color: #111827;
	margin: 0 0 8px 0;
	line-height: 1.45;
}

.promo-line2 {
	font-size: 15.5px;
	font-weight: 500;
	color: #1f2937;
	margin: 0 0 16px 0;
}

.promo-link {
	display: inline-block;
	margin-top: auto;
	padding-top: 6px;
	font-size: 13.5px;
	font-weight: 700;
	color: #9c4221;
	text-decoration: underline;
	text-underline-offset: 4px;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	transition: var(--cvn-transition);
}

.promo-link:hover {
	color: var(--cvn-primary);
	transform: translateY(-1px);
}

/* ==========================================================================
   HOMEPAGE SECTION 2: VÌ SAO NÊN CHỌN DU HỌC HÀN QUỐC TẠI HANITA
   ========================================================================== */
.section-why-hanita {
	padding: 65px 0;
	background-color: #ffffff;
}

.why-hanita-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 45px;
	align-items: center;
}

.why-hanita-title {
	font-size: 26px;
	font-weight: 800;
	color: var(--cvn-primary);
	line-height: 1.35;
	margin: 0 0 25px 0;
}

.why-hanita-title .highlight-brand {
	color: var(--cvn-accent);
}

.why-features-list {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.why-feature-item {
	display: flex;
	align-items: center;
	gap: 16px;
	background: #fbfdfa;
	border: 1px solid #eef5ed;
	padding: 12px 18px;
	border-radius: 10px;
	transition: var(--cvn-transition);
}

.why-feature-item:hover {
	transform: translateX(6px);
	background: #ffffff;
	box-shadow: 0 4px 12px rgba(44, 103, 56, 0.08);
	border-color: #c9e2cb;
}

.feature-icon-wrapper {
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.feature-icon {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.why-feature-item .feature-text p {
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	color: #2d3748;
}

.why-hanita-video {
	display: flex;
	justify-content: center;
}

.video-container-wrapper {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
}

.video-container-wrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* ==========================================================================
   HOMEPAGE SECTION 3: CÁC DỊCH VỤ TẠI HANITA
   ========================================================================== */
.section-services {
	padding: 70px 0;
	background-color: #f7faf5;
}

.section-header {
	margin-bottom: 45px;
}

.section-title {
	font-size: 30px;
	font-weight: 800;
	color: var(--cvn-primary);
	margin: 0 0 10px 0;
	text-transform: uppercase;
}

.section-subtitle {
	font-size: 16px;
	color: var(--cvn-text-muted);
	margin: 0;
}

.header-line {
	width: 60px;
	height: 3px;
	background: var(--cvn-accent);
	margin: 15px auto 0 auto;
	border-radius: 2px;
}

.services-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

.service-card {
	border-radius: 14px;
	padding: 30px 24px;
	transition: var(--cvn-transition);
	display: flex;
	flex-direction: column;
	text-align: center;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
}

.service-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1);
}

.service-card-inner {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

.service-card-inner .service-link {
	margin-top: auto;
	padding-top: 8px;
}

.service-card.card-yellow {
	background: #fff8e8;
	border: 1px solid #fde7b2;
}

.service-card.card-blue {
	background: #edf5ff;
	border: 1px solid #d2e4ff;
}

.service-card.card-purple {
	background: #f8f1f7;
	border: 1px solid #edd3ea;
}

.service-card.card-green {
	background: #edf8ee;
	border: 1px solid #ceeccc;
}

.service-icon-box {
	width: 75px;
	height: 75px;
	margin: 0 auto 20px auto;
	display: flex;
	align-items: center;
	justify-content: center;
}

.service-icon {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.service-name {
	font-size: 18px;
	font-weight: 800;
	color: var(--cvn-primary);
	margin: 0 0 12px 0;
	text-transform: uppercase;
}

.service-desc {
	font-size: 14px;
	color: #4a5568;
	line-height: 1.55;
	margin: 0 0 20px 0;
	flex-grow: 1;
}

.service-link {
	font-size: 14px;
	font-weight: 700;
	color: var(--cvn-accent);
	text-decoration: none;
	display: inline-block;
	transition: var(--cvn-transition);
}

.service-link:hover {
	color: var(--cvn-accent-hover);
	transform: translateX(4px);
}

/* ==========================================================================
   HOMEPAGE SECTION 4: CHUYỆN NHÀ HANITA
   ========================================================================== */
.section-hanita-stories {
	padding: 70px 0;
	background-color: #ffffff;
}

.stories-banner-wrapper {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto 35px auto;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
	border: 1px solid #edf2f7;
}

.stories-panorama-banner {
	width: 100%;
	height: auto;
	max-height: 400px;
	object-fit: cover;
	display: block;
}

.stories-header {
	margin-bottom: 35px;
}

.stories-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
}

.story-card {
	background: #ffffff;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: var(--cvn-shadow);
	border: 1px solid #edf2f7;
	transition: var(--cvn-transition);
	display: flex;
	flex-direction: column;
}

.story-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--cvn-shadow-hover);
}

.story-img-wrapper {
	width: 100%;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: #f0f4f8;
}

.story-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.story-card:hover .story-img {
	transform: scale(1.06);
}

.story-content {
	padding: 24px;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	text-align: center;
}

.story-title {
	font-size: 17px;
	font-weight: 700;
	color: #1a202c;
	margin: 0 0 10px 0;
	text-transform: uppercase;
}

.story-desc {
	font-size: 14px;
	color: var(--cvn-text-muted);
	line-height: 1.6;
	margin: 0 0 20px 0;
	flex-grow: 1;
}

.btn-story-link {
	display: inline-block;
	margin-top: auto;
	padding-top: 6px;
	color: var(--cvn-primary);
	font-size: 13.5px;
	font-weight: 700;
	text-decoration: underline;
	transition: var(--cvn-transition);
}

.btn-story-link:hover {
	color: var(--cvn-accent);
}

/* ==========================================================================
   HOMEPAGE SECTION 4B: VIETNAM SPOTLIGHT / DESTINATIONS
   ========================================================================== */
.section-vietnam-spotlight {
	padding: 60px 0;
	background-color: #f4f5f7;
}

.spotlight-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
}

.spotlight-card {
	background: #ffffff;
	border-radius: 12px;
	overflow: hidden;
	border: 1px solid #e2e8f0;
	box-shadow: var(--cvn-shadow);
	display: flex;
	flex-direction: column;
	transition: var(--cvn-transition);
}

.spotlight-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--cvn-shadow-hover);
}

.spotlight-img-wrapper {
	width: 100%;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: #edf2f7;
}

.spotlight-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.spotlight-card:hover .spotlight-img {
	transform: scale(1.06);
}

.spotlight-body {
	padding: 22px 24px 24px;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	text-align: center;
}

.spotlight-tag {
	display: inline-block;
	align-self: center;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.9px;
	text-transform: uppercase;
	color: var(--cvn-primary);
	background: #ecfdf5;
	border: 1px solid #ccebd9;
	padding: 3px 10px;
	border-radius: 999px;
	margin-bottom: 10px;
}

.spotlight-title {
	font-size: 17px;
	font-weight: 800;
	color: #1a202c;
	margin: 0 0 10px 0;
	line-height: 1.35;
}

.spotlight-desc {
	font-size: 14px;
	color: var(--cvn-text-muted);
	line-height: 1.6;
	margin: 0 0 18px 0;
	flex-grow: 1;
}

.spotlight-link {
	display: inline-block;
	align-self: center;
	margin-top: auto;
	padding: 8px 20px;
	border-radius: 999px;
	border: 1.5px solid var(--cvn-primary);
	color: var(--cvn-primary);
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
	transition: var(--cvn-transition);
}

.spotlight-link:hover {
	background: var(--cvn-primary);
	color: #ffffff;
}

/* ==========================================================================
   HOMEPAGE SUB-SECTION: HỌC NGÔN NGỮ - YÊU VĂN HÓA
   ========================================================================== */
.section-language-culture {
	padding: 60px 0;
	background: #fefaf6;
	border-top: 1px solid #faeedb;
	border-bottom: 1px solid #faeedb;
}

.lang-culture-grid {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: 40px;
	align-items: center;
}

.lang-culture-heading h2 {
	font-size: 32px;
	font-weight: 800;
	color: #1a202c;
	line-height: 1.3;
	margin: 0 0 10px 0;
}

.lang-culture-heading .highlight-green {
	color: var(--cvn-primary);
}

.lang-culture-heading .tagline {
	font-size: 15px;
	color: var(--cvn-text-muted);
	margin: 0;
}

.btn-culture-cta {
	display: inline-block;
	margin-top: 20px;
	padding: 12px 28px;
	border-radius: 999px;
	background: var(--cvn-accent);
	color: #ffffff !important;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	box-shadow: 0 6px 16px rgba(249, 155, 28, 0.35);
	transition: var(--cvn-transition);
}

.btn-culture-cta:hover {
	background: var(--cvn-accent-hover);
	transform: translateY(-2px);
	color: #ffffff !important;
}

.steps-list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

.step-item {
	display: flex;
	gap: 16px;
	background: #ffffff;
	padding: 18px;
	border-radius: 10px;
	border: 1px solid #f0e6dc;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.step-number {
	font-size: 26px;
	font-weight: 800;
	color: var(--cvn-accent);
	line-height: 1;
}

.step-content h4 {
	font-size: 15px;
	font-weight: 700;
	margin: 0 0 6px 0;
	color: #1a202c;
}

.step-content p {
	font-size: 13px;
	color: var(--cvn-text-muted);
	margin: 0;
	line-height: 1.5;
}

/* ==========================================================================
   HOMEPAGE SECTION 5: CẢM NHẬN HỌC VIÊN
   ========================================================================== */
.section-testimonials {
	padding: 70px 0;
	background-color: #f4f5f7;
}

.section-badge-orange {
	display: inline-block;
	color: #ff6600;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 1px;
	margin-bottom: 6px;
}

.testimonials-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

.testimonial-card {
	background: #ffffff;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: var(--cvn-shadow);
	display: flex;
	flex-direction: column;
	border: 1px solid #e2e8f0;
	transition: var(--cvn-transition);
}

.testimonial-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--cvn-shadow-hover);
}

.student-avatar-box {
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: #edf2f7;
}

.student-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
	transition: transform 0.4s ease;
}

.testimonial-card:hover .student-img {
	transform: scale(1.05);
}

.testimonial-body {
	padding: 20px;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	text-align: left;
}

.student-name {
	font-size: 16px;
	font-weight: 700;
	color: var(--cvn-primary);
	margin: 0 0 10px 0;
}

.testimonial-quote {
	font-size: 13.5px;
	color: #4a5568;
	line-height: 1.55;
	font-style: italic;
	margin: 0 0 16px 0;
	flex-grow: 1;
}

.student-link {
	font-size: 13px;
	font-weight: 700;
	color: var(--cvn-accent);
	text-decoration: underline;
	transition: var(--cvn-transition);
}

.student-link:hover {
	color: var(--cvn-accent-hover);
}

/* ==========================================================================
   HOMEPAGE SECTION 6: FORM ĐĂNG KÝ TƯ VẤN
   ========================================================================== */
.section-consultation-form {
	padding: 70px 0;
	background: linear-gradient(135deg, #f0f7f2 0%, #e6f2e8 100%);
}

.form-wrapper {
	max-width: 760px;
	margin: 0 auto;
	background: #ffffff;
	padding: 45px 50px;
	border-radius: 16px;
	box-shadow: 0 15px 35px rgba(44, 103, 56, 0.08);
	border: 1px solid #d5e8d8;
}

.form-header {
	margin-bottom: 30px;
}

.form-title {
	font-size: 24px;
	font-weight: 800;
	color: var(--cvn-primary);
	margin: 0 0 8px 0;
}

.form-subtitle {
	font-size: 15px;
	color: var(--cvn-text-muted);
	margin: 0;
}

.consultation-form .form-row {
	display: flex;
	gap: 20px;
	margin-bottom: 18px;
}

.col-half {
	flex: 1;
}

.consultation-form .form-group {
	margin-bottom: 18px;
}

.consultation-form label {
	display: block;
	font-size: 13.5px;
	font-weight: 600;
	color: #2d3748;
	margin-bottom: 6px;
}

.consultation-form .req {
	color: #e53e3e;
}

.consultation-form input,
.consultation-form select,
.consultation-form textarea {
	width: 100%;
	padding: 12px 16px;
	border: 1px solid #cbd5e0;
	border-radius: 8px;
	font-size: 14px;
	font-family: inherit;
	box-sizing: border-box;
	transition: var(--cvn-transition);
}

.consultation-form input:focus,
.consultation-form select:focus,
.consultation-form textarea:focus {
	outline: none;
	border-color: var(--cvn-primary);
	box-shadow: 0 0 0 3px rgba(44, 103, 56, 0.15);
}

.btn-submit {
	background: var(--cvn-accent);
	color: #ffffff;
	border: none;
	padding: 14px 40px;
	font-size: 15px;
	font-weight: 700;
	border-radius: 30px;
	cursor: pointer;
	box-shadow: 0 6px 16px rgba(249, 155, 28, 0.35);
	transition: var(--cvn-transition);
}

.btn-submit:hover {
	background: var(--cvn-accent-hover);
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(249, 155, 28, 0.45);
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer {
	background-color: var(--cvn-primary);
	color: #ffffff;
	padding-top: 60px;
	margin-top: auto;
	margin-bottom: 0;
	padding-bottom: 0;
}

.footer-grid {
	display: grid;
	grid-template-columns: 5fr 4fr 3fr;
	gap: 40px;
	margin-bottom: 50px;
}

.footer-company-name {
	font-size: 18px;
	font-weight: 800;
	color: #ffffff;
	margin: 0 0 20px 0;
	letter-spacing: 0.5px;
}

.footer-branch {
	margin-bottom: 20px;
}

.branch-title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14.5px;
	font-weight: 700;
	color: var(--cvn-accent);
	margin: 0 0 6px 0;
	letter-spacing: 0.3px;
}

.branch-icon-pin {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: rgba(249, 155, 28, 0.18);
	color: var(--cvn-accent);
	flex-shrink: 0;
}

.branch-icon-pin svg {
	display: block;
}

.branch-address {
	font-size: 13.5px;
	color: #e2e8f0;
	margin: 0 0 3px 0;
	line-height: 1.5;
}

.branch-contact {
	font-size: 13px;
	color: #cbd5e0;
	margin: 0;
	line-height: 1.5;
}

.branch-contact a {
	color: #ffffff;
	text-decoration: none;
	transition: var(--cvn-transition);
}

.branch-contact a:hover {
	color: var(--cvn-accent);
}

.footer-col-title {
	font-size: 16px;
	font-weight: 700;
	color: #ffffff;
	margin: 0 0 20px 0;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	position: relative;
	padding-bottom: 8px;
}

.footer-col-title::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 35px;
	height: 2px;
	background: var(--cvn-accent);
}

.footer-links-list {
	list-style: none;
	padding: 0;
	margin: 0 0 25px 0;
}

.footer-links-list li {
	margin-bottom: 10px;
}

.footer-links-list a {
	color: #e2e8f0;
	text-decoration: none;
	font-size: 14px;
	transition: var(--cvn-transition);
	display: inline-block;
}

.footer-links-list a:hover {
	color: var(--cvn-accent);
	padding-left: 6px;
}

.footer-badge-mit img {
	max-width: 190px;
	height: auto;
	display: block;
}

.partner-banners {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.partner-item img {
	width: 100%;
	max-width: 280px;
	height: auto;
	border-radius: 8px;
	border: 1px solid rgba(255, 255, 255, 0.15);
	transition: var(--cvn-transition);
}

.partner-item:hover img {
	transform: scale(1.03);
	border-color: var(--cvn-accent);
}

/* Footer Bottom Bar */
.footer-bottom-bar {
	background-color: var(--cvn-primary-dark);
	padding: 18px 0;
	font-size: 13px;
	color: #a0aec0;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	margin: 0;
	width: 100%;
}

.footer-bottom-inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 15px;
}

.footer-nav-menu {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
}

.footer-nav-menu a {
	color: #e2e8f0;
	text-decoration: none;
	font-weight: 600;
	font-size: 13px;
	transition: var(--cvn-transition);
}

.footer-nav-menu a:hover {
	color: var(--cvn-accent);
}

.footer-copyright {
	color: #cbd5e0;
	margin: 0;
	padding: 0;
}

.footer-copyright strong {
	color: #ffffff;
}

/* ==========================================================================
   FLOATING ACTION BUTTONS
   ========================================================================== */
.floating-cta-badge {
	position: fixed;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	z-index: 998;
	contain: layout paint;
}

.floating-btn-register {
	display: block;
	background: var(--cvn-accent);
	color: #ffffff !important;
	text-decoration: none;
	padding: 14px 10px;
	font-weight: 800;
	font-size: 12.5px;
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	letter-spacing: 1.5px;
	border-radius: 0 10px 10px 0;
	box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.2);
	transition: var(--cvn-transition);
}

.floating-btn-register,
.floating-btn-register:link,
.floating-btn-register:visited,
.floating-btn-register:hover,
.floating-btn-register:active,
.floating-btn-register span {
	color: #ffffff !important;
}

.floating-btn-register:hover {
	background: var(--cvn-accent-hover);
	padding-right: 16px;
	color: #ffffff !important;
}

/* Compact bottom-right stack positioned above Google reCAPTCHA v3 badge (.grecaptcha-badge: bottom 14px..74px) */
.floating-contact-pills {
	position: fixed;
	right: 16px;
	bottom: 92px;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 8px;
	z-index: 999;
}

.floating-contact-pills .pill-item {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border-radius: 50%;
	text-decoration: none;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.floating-contact-pills .pill-item,
.floating-contact-pills .pill-item:link,
.floating-contact-pills .pill-item:visited,
.floating-contact-pills .pill-item:hover,
.floating-contact-pills .pill-item:focus-visible {
	color: #ffffff;
	text-decoration: none;
}

.floating-contact-pills .pill-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	line-height: 0;
}

.floating-contact-pills .pill-text {
	position: absolute;
	right: calc(100% + 10px);
	top: 50%;
	transform: translateY(-50%) translateX(6px);
	background: rgba(15, 23, 42, 0.92);
	color: #ffffff;
	white-space: nowrap;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.3;
	padding: 5px 10px;
	border-radius: 6px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
}

@media (hover: hover) and (pointer: fine) {
	.floating-contact-pills .pill-item:hover,
	.floating-contact-pills .pill-item:focus-visible {
		transform: translateY(-2px) scale(1.06);
		box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
	}

	.floating-contact-pills .pill-item:hover .pill-text,
	.floating-contact-pills .pill-item:focus-visible .pill-text {
		opacity: 1;
		visibility: visible;
		transform: translateY(-50%) translateX(0);
	}
}

.floating-contact-pills .pill-kakao,
.floating-contact-pills .pill-kakao:link,
.floating-contact-pills .pill-kakao:visited,
.floating-contact-pills .pill-kakao:hover,
.floating-contact-pills .pill-kakao:focus-visible {
	background: #fee500;
	color: #3c1e1e;
}

.floating-contact-pills .pill-zalo {
	background: #0068ff;
}

.floating-contact-pills .pill-messenger {
	background: #0084ff;
}

.floating-contact-pills .pill-phone {
	background: #28a745;
}

.floating-contact-pills .pill-totop {
	background: #4a5568;
}

/* ==========================================================================
   RESPONSIVE DESIGN (TABLET & MOBILE)
   ========================================================================== */
@media screen and (min-width: 1025px) and (max-width: 1260px) {
	.header-inner {
		gap: 12px;
		padding: 8px 15px;
	}

	.site-branding .site-logo-img {
		height: 46px;
		max-width: 160px;
	}

	.main-nav-menu {
		gap: 10px;
	}

	.main-nav-menu > li > a {
		font-size: 12.5px;
		padding: 6px 2px;
	}

	html[lang*="en"] .main-nav-menu {
		gap: 6px;
	}

	html[lang*="en"] .main-nav-menu > li > a {
		font-size: 10.2px;
		letter-spacing: 0;
		padding: 6px 1px;
		gap: 2.5px;
	}

	.btn-header-cta {
		height: 36px;
		padding: 0 14px;
		font-size: 12px;
		gap: 6px;
	}
}

@media screen and (max-width: 1024px) {
	.main-navigation {
		display: none !important;
	}

	.mobile-menu-toggle {
		display: block !important;
	}

	.promo-grid[data-count="4"] {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.services-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.testimonials-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.footer-grid {
		grid-template-columns: 1fr 1fr;
	}

	.footer-col-partners {
		grid-column: span 2;
	}

	.partner-banners {
		flex-direction: row;
		flex-wrap: wrap;
	}
}

@media screen and (max-width: 768px) {
	.site-topbar {
		display: none !important;
	}

	.header-inner {
		padding: 8px 15px;
		gap: 10px;
	}

	.site-branding .site-logo-img {
		height: 42px;
		max-width: 145px;
	}

	.btn-header-cta {
		height: 36px;
		padding: 0 12px;
		font-size: 12px;
	}

	.hero-slider-container {
		aspect-ratio: 16 / 9;
		min-height: 220px;
	}

	.hero-slide-img {
		height: 100%;
		object-fit: cover;
	}

	.section-title {
		font-size: 22px;
	}

	.section-subtitle {
		font-size: 14px;
	}

	.section-intro,
	.section-why-hanita,
	.section-services,
	.section-hanita-stories,
	.section-vietnam-spotlight,
	.section-language-culture,
	.section-lang-culture,
	.section-testimonials,
	.section-consultation-form {
		padding: 35px 0;
	}

	.section-promo-highlights {
		padding: 16px 0 6px 0;
	}

	.promo-grid,
	.promo-grid[data-count="2"],
	.promo-grid[data-count="4"] {
		grid-template-columns: 1fr;
	}

	.promo-card {
		padding: 24px 18px;
		border-bottom: 1px solid rgba(255, 255, 255, 0.45);
	}

	.promo-card:last-child {
		border-bottom: 0;
	}

	.spotlight-grid {
		grid-template-columns: 1fr;
	}

	.lang-culture-heading {
		text-align: center;
	}

	.why-hanita-grid {
		grid-template-columns: 1fr;
		gap: 30px;
	}

	.why-hanita-title {
		font-size: 22px;
		text-align: center;
	}

	.lang-culture-grid {
		grid-template-columns: 1fr;
		gap: 25px;
	}

	.steps-list {
		grid-template-columns: 1fr;
	}

	.stories-grid {
		grid-template-columns: 1fr;
	}

	.services-grid {
		grid-template-columns: 1fr;
	}

	.testimonials-grid {
		grid-template-columns: 1fr;
	}

	.footer-grid {
		grid-template-columns: 1fr;
		gap: 30px;
	}

	.footer-col-partners {
		grid-column: span 1;
	}

	.consultation-form .form-row {
		flex-direction: column;
		gap: 0;
	}

	.form-wrapper {
		padding: 30px 20px;
	}

	.footer-bottom-inner {
		flex-direction: column;
		text-align: center;
	}

	.footer-nav-menu {
		justify-content: center;
	}

	.floating-cta-badge {
		display: none !important;
	}

	.floating-contact-pills {
		right: 12px;
		bottom: 88px;
		gap: 7px;
	}

	.floating-contact-pills .pill-text {
		display: none;
	}

	.floating-contact-pills .pill-item {
		width: 38px;
		height: 38px;
	}

	.slider-btn {
		width: 32px;
		height: 32px;
		font-size: 14px;
	}

	.slider-prev {
		left: 8px;
	}

	.slider-next {
		right: 8px;
	}

	.slider-dots {
		bottom: 8px;
		gap: 6px;
	}

	.slider-dot {
		width: 7px;
		height: 7px;
	}

	.slider-dot.active {
		width: 16px;
	}
}

@media screen and (max-width: 480px) {
	.header-inner {
		padding: 6px 12px;
		gap: 8px;
	}

	.site-branding .site-logo-img {
		height: 34px;
		max-width: 110px;
	}

	.btn-header-cta .btn-cta-text {
		display: none !important;
	}

	.btn-header-cta {
		width: 36px;
		height: 36px;
		padding: 0 !important;
		border-radius: 50% !important;
		justify-content: center !important;
		flex-shrink: 0;
	}

	.mobile-menu-toggle {
		padding: 6px;
		flex-shrink: 0;
	}

	.hero-slider-container {
		min-height: 190px;
		aspect-ratio: 4 / 3;
	}

	.form-title {
		font-size: 20px;
	}

	.cvn-breadcrumbs {
		font-size: 13px;
	}

	.cvn-archive-title {
		font-size: 24px;
	}
}

/* ==========================================================================
   FLATSOME UX BUILDER COMPATIBILITY & FAITHFUL LEGACY STYLES
   ========================================================================== */
.cvn-ux-scope,
.cvn-ux-scope *,
.cvn-ux-scope *::before,
.cvn-ux-scope *::after {
	box-sizing: border-box;
}

.cvn-ux-scope {
	font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: 16px;
	line-height: 1.6;
	color: #0a0a0a;
}

.cvn-ux-blank-scope {
	background-color: #ffffff;
}

.cvn-ux-scope .entry-content {
	margin: 0;
	padding: 0;
}

.cvn-ux-scope h1,
.cvn-ux-scope h2,
.cvn-ux-scope h3,
.cvn-ux-scope h4,
.cvn-ux-scope h5,
.cvn-ux-scope h6 {
	color: #2c6738;
	font-weight: 700;
	line-height: 1.25;
	margin-top: 0;
	margin-bottom: 0.5em;
}

.cvn-ux-scope h1 { font-size: 1.7em; }
.cvn-ux-scope h2 { font-size: 1.6em; }
.cvn-ux-scope h3 { font-size: 1.25em; }
.cvn-ux-scope h4 { font-size: 1.125em; }
.cvn-ux-scope h5 { font-size: 1em; }
.cvn-ux-scope h6 { font-size: 0.85em; }

.cvn-ux-scope p {
	margin-top: 0;
	margin-bottom: 1.3em;
}

.cvn-ux-scope .cvn-text-box p:last-child,
.cvn-ux-scope .cvn-ux-text p:last-child,
.cvn-ux-scope .icon-box-text p:last-child,
.cvn-ux-scope .box-text-inner p:last-child {
	margin-bottom: 0;
}

.cvn-ux-scope a {
	color: #334862;
	text-decoration: none;
	transition: color 0.2s ease, opacity 0.2s ease;
}

.cvn-ux-scope a:hover {
	color: #2c6738;
}

.cvn-ux-scope h1 a,
.cvn-ux-scope h2 a,
.cvn-ux-scope h3 a,
.cvn-ux-scope h4 a,
.cvn-ux-scope h5 a,
.cvn-ux-scope h6 a {
	color: inherit;
}

.cvn-ux-scope pre {
	font-family: inherit;
	white-space: pre-wrap;
	margin: 0 0 0.8em;
	background: transparent;
	border: none;
	padding: 0;
	overflow-wrap: break-word;
}

.cvn-ux-scope img {
	max-width: 100%;
	height: auto;
	display: inline-block;
	vertical-align: middle;
}

.cvn-ux-scope ul,
.cvn-ux-scope ol {
	margin-top: 0;
	margin-bottom: 1.3em;
	padding-left: 1.4em;
}

.cvn-ux-scope li {
	margin-bottom: 0.5em;
}

/* Customizer Legacy Utility Classes */
.cvn-ux-scope .ux-col-light,
.cvn-ux-scope .cvn-ux-section.dark {
	color: #f1f1f1;
}

.cvn-ux-scope .about-top > .cvn-ux-col-inner {
	background-color: #2e6b3f;
	padding: 20px !important;
	color: #ffffff;
}

.cvn-ux-scope .about-top h3,
.cvn-ux-scope .mtht h3 {
	color: #ffffff;
}

.cvn-ux-scope .about-top h3 {
	font-size: 25px;
}

.cvn-ux-scope .section-2 h3 {
	font-size: 22px;
	text-transform: uppercase;
}

.cvn-ux-scope .section-2 p {
	font-size: 18px;
}

/* Page Wrapper / Paper Container (dev/page-none.php & custom_css) */
.cvn-ux-page-wrapper.khoa-hoc {
	background-color: #f3f3f3;
	padding-top: 0;
	padding-bottom: 30px;
	position: relative;
}

.cvn-ux-top-banner.img-ct {
	width: 100%;
	position: relative;
	z-index: 1;
	line-height: 0;
}

.cvn-ux-top-banner.img-ct img {
	width: 100%;
	height: auto;
	display: block;
}

.cvn-ux-main.row-main {
	max-width: 1200px;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	background-color: #ffffff;
	box-shadow: 0 0 30px 0 rgba(50, 70, 70, 0.35);
	padding: 0 30px 30px;
	position: relative;
	z-index: 2;
}

.cvn-ux-main > .cvn-ux-main-inner {
	width: 100%;
	padding: 0 15px;
}

.cvn-ux-title-center-main {
	padding-top: 30px;
}

.cvn-ux-entry-header {
	margin-bottom: 1.5em;
}

.cvn-ux-row.ct-gt {
	max-width: 1200px !important;
	width: 100%;
	margin-left: auto !important;
	margin-right: auto !important;
	padding: 15px 30px 30px !important;
	background-color: #ffffff;
	box-shadow: 0 0 30px 0 rgba(50, 70, 70, 0.35);
	position: relative;
	z-index: 2;
}

.cvn-ux-main p,
.cvn-ux-scope .ct-gt p {
	text-align: justify;
}

.cvn-ux-scope .text-center,
.cvn-ux-scope .text-center p {
	text-align: center;
}

.cvn-ux-scope .text-left,
.cvn-ux-scope .text-left p {
	text-align: left;
}

.cvn-ux-scope .text-right,
.cvn-ux-scope .text-right p {
	text-align: right;
}

/* Global Section System (safe in both UX scope & sidebar detail layouts) */
.cvn-ux-section {
	padding: 30px 0;
	position: relative;
	min-height: auto;
	width: 100%;
	display: flex;
	flex-flow: row wrap;
	align-items: center;
}

.cvn-ux-main .cvn-ux-section,
.cvn-ux-scope .ct-gt .cvn-ux-section,
.cvn-detail-content .cvn-ux-section {
	padding-left: 30px;
	padding-right: 30px;
}

.cvn-ux-section.is-full-height {
	min-height: 100vh;
}

.cvn-ux-section-bg {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-size: cover !important;
	background-repeat: no-repeat !important;
	background-position: 50% 50%;
	pointer-events: none;
	overflow: hidden;
}

.cvn-ux-section-overlay,
.cvn-ux-border {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	pointer-events: none;
}

.cvn-ux-section-content {
	position: relative;
	z-index: 1;
	width: 100%;
}

/* Flatsome-Compatible 12-Column Responsive Grid */
.cvn-ux-row {
	width: 100%;
	display: flex;
	flex-flow: row wrap;
	max-width: 1170px;
	margin-left: auto;
	margin-right: auto;
}

.cvn-ux-row.row-full-width {
	max-width: 100% !important;
}

/* Preserve legacy custom_css #30 precedence so boxed teacher rows (.ct-gt) are not stretched by .row-full-width on page-blank pages */
.cvn-ux-scope .cvn-ux-row.ct-gt,
.cvn-ux-scope .cvn-ux-row.row-full-width.ct-gt {
	max-width: 1200px !important;
}

.cvn-ux-row[style*="max-width"] {
	margin-left: auto !important;
	margin-right: auto !important;
}

.cvn-ux-col > .cvn-ux-col-inner > .cvn-ux-row:not(.row-collapse),
.cvn-ux-main-inner > .cvn-ux-row:not(.row-collapse) {
	width: auto;
	max-width: none;
	margin-left: -15px;
	margin-right: -15px;
}

.cvn-ux-col > .cvn-ux-col-inner > .cvn-ux-row.row-small,
.cvn-ux-main-inner > .cvn-ux-row.row-small {
	margin-left: -10px;
	margin-right: -10px;
}

.cvn-ux-col > .cvn-ux-col-inner > .cvn-ux-row.row-large,
.cvn-ux-main-inner > .cvn-ux-row.row-large {
	margin-left: -30px;
	margin-right: -30px;
}

.cvn-ux-col > .cvn-ux-col-inner > .cvn-ux-row.row-collapse,
.cvn-ux-main-inner > .cvn-ux-row.row-collapse {
	margin-left: 0;
	margin-right: 0;
}

.cvn-ux-row.align-center { justify-content: center; }
.cvn-ux-row.align-right { justify-content: flex-end; }
.cvn-ux-row.align-top { align-items: flex-start; }
.cvn-ux-row.align-middle { align-items: center; }
.cvn-ux-row.align-bottom { align-items: flex-end; }
.cvn-ux-row.align-equal { align-items: stretch; }
.cvn-ux-row.align-equal > .cvn-ux-col,
.cvn-ux-row.row-collapse > .cvn-ux-col {
	display: flex;
	flex-direction: column;
}
.cvn-ux-row.align-equal > .cvn-ux-col > .cvn-ux-col-inner,
.cvn-ux-row.row-collapse > .cvn-ux-col > .cvn-ux-col-inner {
	width: 100%;
	flex: 1 0 auto;
}

.cvn-ux-col {
	position: relative;
	margin: 0;
	padding: 0 15px 30px;
	width: 100%;
	flex-basis: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

.cvn-ux-row.row-collapse > .cvn-ux-col {
	padding: 0;
}

.cvn-ux-row.row-small > .cvn-ux-col {
	padding: 0 10px 20px;
}

.cvn-ux-row.row-large > .cvn-ux-col {
	padding: 0 30px 30px;
}

.cvn-ux-col-inner {
	position: relative;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	background-position: 50% 50%;
	background-size: cover;
	background-repeat: no-repeat;
	flex: 1 0 auto;
}

.cvn-ux-has-neg-margin {
	position: relative;
	z-index: 2;
}

.cvn-ux-row.row-dashed {
	overflow: hidden;
}

.cvn-ux-row.row-dashed > .cvn-ux-col > .cvn-ux-col-inner {
	border: 1px dashed rgba(0, 0, 0, 0.12);
}

/* Column Spans (Flatsome breakpoints: <550px, 550px+, 850px+) */
.cvn-sm-1  { max-width: 8.333333%; flex-basis: 8.333333%; }
.cvn-sm-2  { max-width: 16.666667%; flex-basis: 16.666667%; }
.cvn-sm-3  { max-width: 25%; flex-basis: 25%; }
.cvn-sm-4  { max-width: 33.333333%; flex-basis: 33.333333%; }
.cvn-sm-5  { max-width: 41.666667%; flex-basis: 41.666667%; }
.cvn-sm-6  { max-width: 50%; flex-basis: 50%; }
.cvn-sm-7  { max-width: 58.333333%; flex-basis: 58.333333%; }
.cvn-sm-8  { max-width: 66.666667%; flex-basis: 66.666667%; }
.cvn-sm-9  { max-width: 75%; flex-basis: 75%; }
.cvn-sm-10 { max-width: 83.333333%; flex-basis: 83.333333%; }
.cvn-sm-11 { max-width: 91.666667%; flex-basis: 91.666667%; }
.cvn-sm-12 { max-width: 100%; flex-basis: 100%; }

.small-col-first { order: -1; }

@media (min-width: 550px) {
	.small-col-first { order: 0; }
	.cvn-md-1  { max-width: 8.333333%; flex-basis: 8.333333%; }
	.cvn-md-2  { max-width: 16.666667%; flex-basis: 16.666667%; }
	.cvn-md-3  { max-width: 25%; flex-basis: 25%; }
	.cvn-md-4  { max-width: 33.333333%; flex-basis: 33.333333%; }
	.cvn-md-5  { max-width: 41.666667%; flex-basis: 41.666667%; }
	.cvn-md-6  { max-width: 50%; flex-basis: 50%; }
	.cvn-md-7  { max-width: 58.333333%; flex-basis: 58.333333%; }
	.cvn-md-8  { max-width: 66.666667%; flex-basis: 66.666667%; }
	.cvn-md-9  { max-width: 75%; flex-basis: 75%; }
	.cvn-md-10 { max-width: 83.333333%; flex-basis: 83.333333%; }
	.cvn-md-11 { max-width: 91.666667%; flex-basis: 91.666667%; }
	.cvn-md-12 { max-width: 100%; flex-basis: 100%; }
}

@media (min-width: 550px) and (max-width: 849px) {
	.medium-col-first { order: -1; }
}

@media (min-width: 850px) {
	.cvn-lg-1  { max-width: 8.333333%; flex-basis: 8.333333%; }
	.cvn-lg-2  { max-width: 16.666667%; flex-basis: 16.666667%; }
	.cvn-lg-3  { max-width: 25%; flex-basis: 25%; }
	.cvn-lg-4  { max-width: 33.333333%; flex-basis: 33.333333%; }
	.cvn-lg-5  { max-width: 41.666667%; flex-basis: 41.666667%; }
	.cvn-lg-6  { max-width: 50%; flex-basis: 50%; }
	.cvn-lg-7  { max-width: 58.333333%; flex-basis: 58.333333%; }
	.cvn-lg-8  { max-width: 66.666667%; flex-basis: 66.666667%; }
	.cvn-lg-9  { max-width: 75%; flex-basis: 75%; }
	.cvn-lg-10 { max-width: 83.333333%; flex-basis: 83.333333%; }
	.cvn-lg-11 { max-width: 91.666667%; flex-basis: 91.666667%; }
	.cvn-lg-12 { max-width: 100%; flex-basis: 100%; }
}

/* Visibility Helpers */
@media (max-width: 549px) {
	.cvn-ux-scope .hide-for-small { display: none !important; }
}
@media (min-width: 550px) {
	.cvn-ux-scope .show-for-small { display: none !important; }
}
@media (max-width: 849px) {
	.cvn-ux-scope .hide-for-medium { display: none !important; }
}
@media (min-width: 850px) {
	.cvn-ux-scope .show-for-medium { display: none !important; }
}

/* UX Banner & Text Box */
.cvn-ux-banner {
	position: relative;
	width: 100%;
	min-height: 30px;
	overflow: hidden;
	background-color: transparent;
}

.cvn-ux-banner.is-full-height {
	min-height: 100vh;
}

.cvn-ux-banner .fill {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	height: 100%;
	margin: 0 !important;
	padding: 0 !important;
}

.cvn-ux-banner .banner-bg {
	overflow: hidden;
}

.cvn-ux-banner .bg-fill {
	background-size: cover !important;
	background-repeat: no-repeat !important;
	background-position: 50% 50%;
	transition: transform 0.6s ease, opacity 0.5s ease;
}

.cvn-ux-banner.bg-fade-out:hover .bg {
	opacity: 0.7;
}

.cvn-ux-banner.bg-zoom:hover .bg {
	transform: scale(1.06);
}

.cvn-ux-banner .banner-layers {
	position: relative;
	max-height: 100%;
	height: 100%;
	z-index: 2;
}

.cvn-ux-banner .banner-link {
	pointer-events: none;
}

.cvn-ux-banner .height-fix {
	position: relative;
}

.cvn-ux-banner .height-fix img {
	width: 100%;
	height: auto;
	display: block;
}

.cvn-ux-banner .is-invisible {
	opacity: 0;
	visibility: hidden;
}

.cvn-text-box {
	z-index: 5;
	font-size: 16px;
	max-width: 100%;
}

/* UX Image & Image Box */
.cvn-ux-img {
	position: relative;
	margin: 0;
}

.text-center .cvn-ux-img {
	margin-left: auto;
	margin-right: auto;
}

.cvn-ux-img .img-inner {
	position: relative;
	overflow: hidden;
}

.cvn-ux-img img {
	width: 100%;
	height: auto;
	display: block;
}

.cvn-img-responsive {
	max-width: 100%;
	height: auto;
	display: block;
}

.cvn-image-box {
	width: 100%;
	position: relative;
}

.cvn-image-box .box-image {
	position: relative;
	height: auto;
	margin: 0 auto;
	overflow: hidden;
}

.cvn-image-box .box-image img {
	max-width: 100%;
	width: 100%;
	height: auto;
	margin: 0 auto;
	display: block;
	border-radius: 10px 10px 0 0;
	transition: transform 0.6s ease, opacity 0.5s ease;
}

.cvn-ux-scope .image-zoom:hover img {
	transform: scale(1.06);
}

.cvn-ux-scope .image-cover {
	position: relative;
	height: auto;
	overflow: hidden;
	padding-top: 100%;
	background-position: 50% 50%;
	background-size: cover;
}

.cvn-ux-scope .image-cover img {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
	margin: 0 !important;
}

.cvn-image-box .box-text {
	padding-top: 0.7em;
	padding-bottom: 1.4em;
	position: relative;
	width: 100%;
	font-size: 0.9em;
}

.cvn-image-box.box-push .box-text {
	background-color: rgba(255, 255, 255, 0.96);
	max-width: 85%;
	margin: -15% auto 0;
	position: relative;
	z-index: 2;
	border-radius: 10px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

/* Featured Box (Icon Box) */
.cvn-featured-box {
	display: flex;
	flex-flow: row nowrap;
	align-items: flex-start;
	margin-bottom: 20px;
}

.cvn-featured-box.icon-box-left {
	flex-direction: row;
	align-items: center;
	text-align: left;
}

.cvn-featured-box.icon-box-center {
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.cvn-featured-box.icon-box-right {
	flex-direction: row-reverse;
	align-items: center;
	text-align: right;
}

.cvn-featured-box .icon-box-img {
	flex: 0 0 auto;
	max-width: 100%;
}

.cvn-featured-box.icon-box-left .icon-box-img {
	margin-right: 1em;
}

.cvn-featured-box.icon-box-center .icon-box-img {
	margin: 0 auto 1em;
}

.cvn-featured-box.icon-box-right .icon-box-img {
	margin-left: 1em;
}

.cvn-featured-box .icon-box-img img {
	width: 100%;
	height: auto;
	display: block;
}

.cvn-featured-box .icon-box-text {
	flex: 1 1 auto;
	min-width: 0;
}

/* Divider, Gap, Stack */
.cvn-ux-scope .is-divider {
	height: 3px;
	display: block;
	background-color: rgba(0, 0, 0, 0.1);
	margin: 1em 0;
	width: 100%;
	max-width: 30px;
}

.cvn-ux-scope .text-center .is-divider {
	margin-left: auto;
	margin-right: auto;
}

.cvn-ux-scope .text-right .is-divider {
	margin-left: auto;
	margin-right: 0;
}

.cvn-gap {
	display: block;
	height: auto;
}

.cvn-ux-stack {
	display: flex;
	width: 100%;
}

.cvn-ux-stack > .cvn-ux-section {
	width: 100%;
	flex: 1 1 auto;
}

/* Flatsome-Compatible Buttons */
.cvn-ux-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	position: relative;
	background-color: #2c6738;
	color: #ffffff !important;
	border: 1px solid transparent;
	font-size: 0.97em;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	text-decoration: none !important;
	cursor: pointer;
	padding: 0.55em 1.2em;
	line-height: 1.4;
	transition: all 0.25s ease;
	margin-bottom: 0.5em;
}

.cvn-ux-btn:hover {
	filter: brightness(0.92);
}

.cvn-ux-btn.primary {
	background-color: #ffa500;
}

.cvn-ux-btn.secondary {
	background-color: #d26e4b;
}

.cvn-ux-btn.white {
	background-color: #ffffff;
	color: #2c6738 !important;
}

.cvn-ux-btn.success {
	background-color: #7a9c59;
}

.cvn-ux-btn.alert {
	background-color: #b20000;
}

.cvn-ux-btn.is-shade {
	box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.16);
}

.cvn-ux-btn.is-outline {
	background-color: transparent !important;
	border: 2px solid currentColor;
	color: #2c6738 !important;
}

.cvn-ux-btn.is-outline.secondary {
	color: #d26e4b !important;
}

.cvn-ux-btn.is-outline.white {
	color: #ffffff !important;
}

.cvn-ux-btn.is-outline:hover {
	background-color: #2c6738 !important;
	border-color: #2c6738;
	color: #ffffff !important;
}

.cvn-ux-btn.is-outline.secondary:hover {
	background-color: #d26e4b !important;
	border-color: #d26e4b;
	color: #ffffff !important;
}

.cvn-ux-btn.is-link {
	background-color: transparent !important;
	border-color: transparent !important;
	color: #2c6738 !important;
	padding: 0.25em 0 !important;
	box-shadow: none !important;
}

.cvn-ux-btn.is-link.secondary {
	color: #d26e4b !important;
}

.cvn-ux-btn.is-underline {
	background-color: transparent !important;
	border: none;
	border-bottom: 2px solid currentColor;
	border-radius: 0 !important;
	color: #2c6738 !important;
	padding: 0.2em 0 0.35em !important;
	box-shadow: none !important;
}

.cvn-ux-btn.is-underline.secondary {
	color: #d26e4b !important;
}

.cvn-ux-btn.lowercase {
	text-transform: none;
}

.cvn-ux-btn.is-small {
	font-size: 0.8em;
}

.cvn-ux-btn.is-large {
	font-size: 1.15em;
}

.cvn-ux-btn.is-larger {
	font-size: 1.3em;
}

.cvn-ux-btn.expand {
	width: 100%;
}

.cvn-btn-icon {
	flex-shrink: 0;
}

/* Box Shadows (Col-inner, Buttons, Images, Rows) */
.cvn-ux-scope .box-shadow-1,
.cvn-ux-scope .row-box-shadow-1 > .cvn-ux-col > .cvn-ux-col-inner {
	box-shadow: 0 1px 3px -2px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
.cvn-ux-scope .box-shadow-2,
.cvn-ux-scope .row-box-shadow-2 > .cvn-ux-col > .cvn-ux-col-inner {
	box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}
.cvn-ux-scope .box-shadow-3,
.cvn-ux-scope .row-box-shadow-3 > .cvn-ux-col > .cvn-ux-col-inner {
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.22);
}
.cvn-ux-scope .box-shadow-4,
.cvn-ux-scope .row-box-shadow-4 > .cvn-ux-col > .cvn-ux-col-inner {
	box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.1);
}
.cvn-ux-scope .box-shadow-5,
.cvn-ux-scope .row-box-shadow-5 > .cvn-ux-col > .cvn-ux-col-inner {
	box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
}
.cvn-ux-scope .box-shadow-2-hover:hover,
.cvn-ux-scope .row-box-shadow-2-hover > .cvn-ux-col > .cvn-ux-col-inner:hover,
.cvn-ux-scope .box-shadow-3-hover:hover,
.cvn-ux-scope .row-box-shadow-3-hover > .cvn-ux-col > .cvn-ux-col-inner:hover,
.cvn-ux-scope .box-shadow-5-hover:hover {
	box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.12);
	transition: box-shadow 0.3s ease;
}

/* UX Slider Carousel */
.cvn-ux-slider {
	position: relative;
	width: 100%;
	overflow: hidden;
}

.cvn-ux-slider-viewport {
	width: 100%;
	overflow: hidden;
}

.cvn-ux-slider-track {
	display: flex;
	flex-wrap: nowrap;
	width: 100%;
	transition: transform 0.55s cubic-bezier(0.25, 0.8, 0.25, 1);
	align-items: stretch;
}

.cvn-ux-slider-track > * {
	flex: 0 0 100%;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

.cvn-ux-slider.is-single-slide .cvn-ux-slider-btn,
.cvn-ux-slider.is-single-slide .cvn-ux-slider-dots {
	display: none;
}

.cvn-ux-slider-btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: none;
	background: rgba(255, 255, 255, 0.88);
	color: #2c6738;
	font-size: 16px;
	cursor: pointer;
	z-index: 6;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.cvn-ux-slider-btn:hover {
	background-color: #ffffff;
	transform: translateY(-50%) scale(1.06);
}

.cvn-ux-slider-prev { left: 12px; }
.cvn-ux-slider-next { right: 12px; }

.cvn-ux-slider-dots {
	position: absolute;
	bottom: 12px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 8px;
	z-index: 6;
}

.cvn-ux-slider-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	border: 2px solid #ffffff;
	background: rgba(0, 0, 0, 0.3);
	padding: 0;
	cursor: pointer;
	transition: all 0.2s ease;
}

.cvn-ux-slider.slider-nav-dots-dashes .cvn-ux-slider-dot {
	width: 22px;
	height: 4px;
	border-radius: 2px;
	border: none;
	background: rgba(0, 0, 0, 0.25);
}

.cvn-ux-slider-dot.is-selected {
	background: #2c6738;
	border-color: #ffffff;
	transform: scale(1.1);
}

.cvn-ux-slider.slider-nav-dots-dashes .cvn-ux-slider-dot.is-selected {
	background: #2c6738;
	transform: none;
}

/* Video, Embeds, Testimonials, Message Box, Social Follow */
.cvn-video-wrapper {
	position: relative;
	width: 100%;
	height: 0;
	overflow: hidden;
	background: #000000;
}

.cvn-video-wrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.cvn-ux-html iframe {
	max-width: 100%;
}

.cvn-testimonial {
	padding: 15px 0;
}

.cvn-testimonial .testimonial-image.circle {
	margin: 0 auto 14px;
	overflow: hidden;
	border-radius: 50%;
}

.cvn-testimonial .testimonial-image img {
	width: 100%;
	height: auto;
	border-radius: 50%;
	display: block;
}

.cvn-testimonial .testimonial-meta {
	margin-top: 8px;
	color: #555555;
}

.cvn-message-box {
	width: 100%;
	display: block;
	position: relative;
}

.cvn-social-follow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 8px;
}

.cvn-follow-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	color: #ffffff !important;
	background-color: #2c6738;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.cvn-follow-link:hover {
	transform: translateY(-2px);
	opacity: 0.9;
}

.cvn-follow-link.follow-facebook { background-color: #3a589d; }
.cvn-follow-link.follow-instagram { background-color: #3b6994; }
.cvn-follow-link.follow-twitter { background-color: #2478ba; }
.cvn-follow-link.follow-linkedin { background-color: #0072b7; }
.cvn-follow-link.follow-youtube { background-color: #c33223; }

/* Tablet & Mobile Refinements for UX Pages */
@media (max-width: 849px) {
	.cvn-ux-main.row-main {
		padding: 0 15px 25px;
	}
	.cvn-ux-main > .cvn-ux-main-inner {
		padding: 0 5px;
	}
	.cvn-ux-row.ct-gt {
		padding: 15px 15px 25px !important;
	}
}

@media (max-width: 549px) {
	.cvn-ux-main .cvn-ux-section,
	.cvn-ux-scope .ct-gt .cvn-ux-section,
	.cvn-detail-content .cvn-ux-section {
		padding-left: 15px;
		padding-right: 15px;
	}
	.cvn-text-box {
		width: 88% !important;
		left: 50% !important;
		top: 50% !important;
		transform: translate(-50%, -50%) !important;
		font-size: 14px;
	}
}

/* ==========================================================================
   CONTACT PAGE (PAGE-LIEN-HE.PHP) STYLES
   ========================================================================== */
.contact-page-main {
	background-color: #f8fafc;
	min-height: 100vh;
}

/* Hero Section */
.contact-hero-section {
	background: linear-gradient(135deg, #1e4926 0%, #2c6738 100%);
	color: #ffffff;
	padding: 50px 20px 45px;
	position: relative;
}

.contact-hero-content {
	max-width: 800px;
	margin: 0 auto;
}

.contact-hero-section .cvn-breadcrumbs {
	justify-content: center;
	margin-bottom: 15px;
	font-size: 14px;
}

.contact-hero-section .cvn-breadcrumbs a {
	color: rgba(255, 255, 255, 0.8);
	text-decoration: none;
}

.contact-hero-section .cvn-breadcrumbs a:hover {
	color: #ffffff;
	text-decoration: underline;
}

.contact-hero-section .cvn-bc-sep {
	color: rgba(255, 255, 255, 0.5);
	margin: 0 8px;
}

.contact-hero-section .cvn-bc-current {
	color: #f99b1c;
	font-weight: 600;
}

.contact-hero-title {
	font-size: 34px;
	font-weight: 800;
	margin: 0 0 12px;
	letter-spacing: -0.5px;
}

.contact-hero-subtitle {
	font-size: 16px;
	color: rgba(255, 255, 255, 0.9);
	line-height: 1.6;
	margin: 0;
}

.contact-container {
	max-width: 1200px;
	margin: -30px auto 60px;
	padding: 0 20px;
	position: relative;
	z-index: 10;
}

/* Branch Cards Grid */
.contact-branches-section {
	margin-bottom: 50px;
}

.contact-branches-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 25px;
}

.contact-branches-grid[data-count="1"] {
	grid-template-columns: minmax(0, 440px);
	justify-content: center;
}

.contact-branches-grid[data-count="2"] {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	max-width: 860px;
	margin: 0 auto;
}

.contact-branches-grid[data-count="4"] {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.branch-card {
	background: #ffffff;
	border-radius: 16px;
	padding: 30px 25px;
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
	border: 1px solid #edf2f7;
	display: flex;
	flex-direction: column;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.branch-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
}

.branch-card-featured {
	border: 2px solid #2c6738;
	position: relative;
}

.branch-card-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 18px;
}

.branch-badge {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	padding: 4px 10px;
	border-radius: 20px;
	background: #e2e8f0;
	color: #4a5568;
}

.branch-badge-primary {
	background: #e6f4ea;
	color: #2c6738;
}

.branch-icon-box {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #f7fafc;
	color: #2c6738;
	display: flex;
	align-items: center;
	justify-content: center;
}

.branch-city {
	font-size: 20px;
	font-weight: 800;
	color: #1a202c;
	margin: 0 0 5px;
}

.branch-subtitle {
	font-size: 13px;
	color: #718096;
	margin: 0 0 20px;
}

.branch-info-list {
	list-style: none;
	padding: 0;
	margin: 0 0 25px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	font-size: 14px;
	line-height: 1.5;
	color: #4a5568;
}

.branch-info-item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.branch-info-item .info-icon {
	flex-shrink: 0;
	margin-top: 2px;
	color: #f99b1c;
}

.branch-info-item a {
	color: #2c6738;
	text-decoration: none;
	font-weight: 600;
}

.branch-info-item a:hover {
	text-decoration: underline;
}

.branch-action {
	margin-top: auto;
}

.btn-branch-map, .btn-branch-zalo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 10px 16px;
	border-radius: 10px;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: background 0.3s ease, color 0.3s ease;
	text-align: center;
}

.btn-branch-map,
.btn-branch-map:visited {
	background: #f0fdf4;
	color: #2c6738;
	border: 1px solid #bbf7d0;
}

.btn-branch-map:hover,
.btn-branch-map:focus {
	background: #2c6738;
	color: #ffffff;
}

.btn-branch-zalo,
.btn-branch-zalo:visited {
	background: #0068ff;
	color: #ffffff;
}

.btn-branch-zalo:hover,
.btn-branch-zalo:focus {
	background: #0052cc;
	color: #ffffff;
}

/* Two Columns: Form & Maps */
.contact-form-map-section {
	margin-bottom: 60px;
}

.contact-two-cols {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	gap: 30px;
}

.contact-form-column,
.contact-map-column,
.branch-card,
.faq-item {
	min-width: 0;
}

.contact-form-card {
	background: #ffffff;
	border-radius: 16px;
	padding: 35px 30px;
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
	border: 1px solid #edf2f7;
}

.sub-badge {
	display: inline-block;
	background: #fff3e0;
	color: #d97706;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: 12px;
	margin-bottom: 8px;
}

.form-heading-title {
	font-size: 22px;
	font-weight: 800;
	color: #1a202c;
	margin: 0 0 8px;
}

.form-heading-desc {
	font-size: 14px;
	color: #718096;
	margin: 0 0 25px;
	line-height: 1.5;
}

.contact-alert {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 16px;
	border-radius: 10px;
	margin-bottom: 20px;
	font-size: 14px;
	line-height: 1.5;
}

.contact-alert-success {
	background: #f0fdf4;
	color: #166534;
	border: 1px solid #bbf7d0;
}

.contact-alert-success h4 {
	margin: 0 0 4px;
	font-size: 16px;
	font-weight: 700;
}

.contact-alert-danger {
	background: #fef2f2;
	color: #991b1b;
	border: 1px solid #fecaca;
}

.contact-main-form .form-row {
	display: flex;
	gap: 15px;
	margin-bottom: 16px;
}

.contact-main-form .form-group {
	margin-bottom: 16px;
	display: flex;
	flex-direction: column;
}

.contact-main-form .col-half {
	flex: 1;
}

.contact-main-form label {
	font-size: 13px;
	font-weight: 600;
	color: #4a5568;
	margin-bottom: 6px;
}

.contact-main-form .req {
	color: #e53e3e;
}

.contact-main-form .form-control {
	width: 100%;
	padding: 10px 14px;
	border: 1px solid #cbd5e0;
	border-radius: 8px;
	font-size: 14px;
	background: #ffffff;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
	box-sizing: border-box;
}

.contact-main-form .form-control:focus {
	outline: none;
	border-color: #2c6738;
	box-shadow: 0 0 0 3px rgba(44, 103, 56, 0.15);
}

.btn-submit-contact {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	background: linear-gradient(135deg, #f99b1c 0%, #e0850c 100%);
	color: #ffffff;
	font-size: 15px;
	font-weight: 700;
	padding: 13px 20px;
	border: none;
	border-radius: 10px;
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	box-shadow: 0 4px 15px rgba(249, 155, 28, 0.35);
}

.btn-submit-contact:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(249, 155, 28, 0.45);
}

/* Map Column */
.map-card-wrapper {
	background: #ffffff;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
	border: 1px solid #edf2f7;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.map-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 20px;
	background: #ffffff;
	border-bottom: 1px solid #edf2f7;
}

.map-header-left {
	display: flex;
	align-items: center;
	gap: 8px;
	color: #2c6738;
}

.map-header-left h3 {
	font-size: 15px;
	font-weight: 700;
	color: #1a202c;
	margin: 0;
}

.map-ext-link {
	font-size: 13px;
	color: #2c6738;
	font-weight: 600;
	text-decoration: none;
}

.map-ext-link:hover {
	text-decoration: underline;
}

.map-iframe-container {
	flex: 1;
	min-height: 380px;
	position: relative;
}

.map-iframe-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.map-quick-contacts {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 16px 20px;
	background: #ffffff;
	border-top: 1px solid #edf2f7;
}

.quick-contact-box {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 10px 14px;
	background: #f8fafc;
	border-radius: 10px;
	border: 1px solid #edf2f7;
	text-decoration: none;
	transition: all 0.2s ease;
}

.quick-contact-box:hover {
	background: #f0fdf4;
	border-color: #bbf7d0;
	transform: translateX(3px);
}

.qc-icon {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: transform 0.2s ease;
}

.quick-contact-box:hover .qc-icon {
	transform: scale(1.08);
}

.qc-icon-call { background: #e6f4ea; color: #2c6738; }
.qc-icon-zalo { background: #e0f2fe; color: #0284c7; }
.qc-icon-mail { background: #fff3e0; color: #d97706; }

.qc-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	flex: 1;
}

.qc-label {
	font-size: 12px;
	color: #64748b;
	font-weight: 500;
	white-space: nowrap !important;
}

.qc-value {
	font-size: 14px;
	font-weight: 700;
	color: #1e293b;
	text-decoration: none;
	white-space: nowrap !important;
	overflow: hidden;
	text-overflow: ellipsis;
}

.quick-contact-box:hover .qc-value {
	color: #2c6738;
}

/* FAQ Section */
.contact-faq-section {
	background: #ffffff;
	border-radius: 16px;
	padding: 40px 30px;
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
	border: 1px solid #edf2f7;
}

.contact-faq-header {
	margin-bottom: 30px;
}

.faq-title {
	font-size: 24px;
	font-weight: 800;
	color: #1a202c;
	margin: 0 0 8px;
}

.faq-subtitle {
	font-size: 14px;
	color: #718096;
	margin: 0;
}

.faq-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 25px;
}

.faq-grid[data-count="1"] {
	grid-template-columns: minmax(0, 560px);
	justify-content: center;
}

.faq-grid[data-count="2"],
.faq-grid[data-count="4"] {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.faq-item {
	background: #f8fafc;
	padding: 22px 20px;
	border-radius: 12px;
	border: 1px solid #edf2f7;
}

.faq-question {
	font-size: 15px;
	font-weight: 700;
	color: #2c6738;
	margin: 0 0 10px;
	line-height: 1.4;
}

.faq-answer {
	font-size: 14px;
	color: #4a5568;
	line-height: 1.6;
	margin: 0;
}

/* Responsive */
@media screen and (max-width: 992px) {
	.contact-branches-grid,
	.contact-branches-grid[data-count="1"],
	.contact-branches-grid[data-count="2"],
	.contact-branches-grid[data-count="4"] {
		grid-template-columns: minmax(0, 1fr);
		max-width: none;
	}
	.contact-two-cols {
		grid-template-columns: minmax(0, 1fr);
	}
	.map-iframe-container {
		min-height: 320px;
	}
	.faq-grid,
	.faq-grid[data-count="1"],
	.faq-grid[data-count="2"],
	.faq-grid[data-count="4"] {
		grid-template-columns: minmax(0, 1fr);
	}
	.map-quick-contacts {
		gap: 10px;
	}
}

@media screen and (max-width: 600px) {
	.contact-hero-title {
		font-size: 26px;
	}
	.contact-main-form .form-row {
		flex-direction: column;
		gap: 0;
	}
	.contact-form-card {
		padding: 25px 18px;
	}
	.qc-label,
	.qc-value {
		white-space: normal !important;
		overflow-wrap: anywhere;
	}
	.qc-value {
		font-size: 13px;
	}
}

/* ==========================================================================
   Course Registration Page (dang-ky-khoa-hoc)
   ========================================================================== */
.cvn-reg-page-wrapper {
	background: #f8fafc;
	padding-bottom: 70px;
}

.cvn-reg-hero {
	background: linear-gradient(135deg, #f0f7f2 0%, #e6f4ea 100%);
	padding: 40px 0 50px 0;
	border-bottom: 1px solid #e2e8f0;
	margin-bottom: 40px;
	text-align: center;
}

.cvn-reg-breadcrumbs {
	justify-content: center;
	margin-bottom: 18px;
}

.cvn-reg-hero-content {
	text-align: center !important;
	max-width: 900px;
	margin: 0 auto;
}

.cvn-reg-hero-title {
	font-size: 32px;
	font-weight: 800;
	color: var(--cvn-primary);
	margin: 0 auto 14px;
	text-align: center !important;
	text-transform: uppercase;
}

.cvn-reg-hero-subtitle {
	font-size: 16px;
	color: #4a5568;
	max-width: 780px;
	margin: 0 auto;
	text-align: center !important;
	line-height: 1.6;
}

.cvn-reg-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 360px;
	gap: 36px;
	align-items: start;
}

.cvn-reg-card {
	background: #ffffff;
	border-radius: 16px;
	padding: 40px 36px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
	border: 1px solid #edf2f7;
}

.cvn-part-title {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 20px;
	font-weight: 700;
	color: #1a202c;
	margin-bottom: 24px;
	padding-bottom: 12px;
	border-bottom: 2px solid #edf2f7;
}

.part-num {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--cvn-primary);
	color: #ffffff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	font-weight: 800;
	flex-shrink: 0;
}

.cvn-reg-form .form-row {
	display: flex;
	gap: 20px;
	margin-bottom: 18px;
}

.cvn-reg-form .col-half {
	flex: 1;
	min-width: 0;
}

.cvn-reg-form .form-group {
	margin-bottom: 18px;
}

.cvn-reg-form label {
	display: block;
	font-size: 13.5px;
	font-weight: 600;
	color: #334155;
	margin-bottom: 6px;
}

.cvn-reg-form .req {
	color: #e53e3e;
}

.cvn-reg-form .form-control {
	width: 100%;
	padding: 11px 14px;
	border: 1px solid #cbd5e0;
	border-radius: 8px;
	font-size: 14px;
	color: #1e293b;
	background: #ffffff;
	transition: border-color 0.2s, box-shadow 0.2s;
	box-sizing: border-box;
}

.cvn-reg-form .form-control:focus {
	outline: none;
	border-color: var(--cvn-primary);
	box-shadow: 0 0 0 3px rgba(44, 103, 56, 0.15);
}

.btn-submit-reg {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	background: linear-gradient(135deg, #f99b1c 0%, #e0850c 100%);
	color: #ffffff;
	font-size: 16px;
	font-weight: 800;
	padding: 15px 24px;
	border: none;
	border-radius: 10px;
	cursor: pointer;
	box-shadow: 0 4px 15px rgba(249, 155, 28, 0.35);
	transition: transform 0.2s, box-shadow 0.2s;
}

.btn-submit-reg:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(249, 155, 28, 0.45);
}

/* Sidebar info cards */
.reg-benefit-card,
.reg-contact-card {
	background: #ffffff;
	border-radius: 16px;
	padding: 28px 24px;
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.04);
	border: 1px solid #edf2f7;
	margin-bottom: 24px;
}

.benefit-card-title,
.contact-card-title {
	font-size: 18px;
	font-weight: 700;
	color: var(--cvn-primary);
	margin: 0 0 16px 0;
	padding-bottom: 10px;
	border-bottom: 2px solid #e2e8f0;
}

.benefit-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.benefit-list li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.benefit-icon {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: #e6f4ea;
	color: #16a34a;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 800;
	flex-shrink: 0;
	margin-top: 2px;
}

.benefit-list strong {
	display: block;
	font-size: 14px;
	color: #1e293b;
	margin-bottom: 3px;
}

.benefit-list p {
	font-size: 13px;
	color: #64748b;
	margin: 0;
	line-height: 1.5;
}

.contact-card-desc {
	font-size: 13.5px;
	color: #64748b;
	margin-bottom: 16px;
	line-height: 1.5;
}

.reg-quick-hotlines {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.hotline-pill {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 14px;
	background: #f8fafc;
	border: 1px solid #edf2f7;
	border-radius: 10px;
	text-decoration: none;
	transition: all 0.2s;
}

.hotline-pill:hover {
	background: #f0fdf4;
	border-color: #bbf7d0;
	transform: translateX(3px);
}

.hotline-zalo:hover {
	background: #e0f2fe;
	border-color: #bae6fd;
}

.hp-icon {
	font-size: 18px;
}

.hp-info {
	display: flex;
	flex-direction: column;
}

.hp-label {
	font-size: 11.5px;
	color: #64748b;
}

.hp-val {
	font-size: 14px;
	font-weight: 700;
	color: #1e293b;
}

.hotline-pill:hover .hp-val {
	color: var(--cvn-primary);
}

.hotline-zalo:hover .hp-val {
	color: #0284c7;
}

/* Registration Form Alerts */
.cvn-alert {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 20px 22px;
	border-radius: 12px;
	margin-bottom: 24px;
	font-size: 14.5px;
	line-height: 1.6;
}

.cvn-alert-success {
	background: #f0fdf4;
	color: #166534;
	border: 1px solid #bbf7d0;
}

.cvn-alert-success .alert-icon {
	flex-shrink: 0;
	margin-top: 2px;
}

.cvn-alert-success h3 {
	margin: 0 0 8px 0;
	font-size: 18px;
	font-weight: 800;
	color: #15803d;
}

.cvn-alert-success p {
	margin: 0 0 8px 0;
}

.cvn-alert-success .alert-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 18px;
}

.cvn-alert-success .alert-actions .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 20px;
	border-radius: 8px;
	font-weight: 700;
	font-size: 14px;
	text-decoration: none;
}

.cvn-alert-success .alert-actions .cvn-btn-zalo {
	background: #0284c7;
	color: #ffffff;
}

.cvn-alert-success .alert-actions .cvn-btn-zalo:hover {
	background: #0369a1;
}

.cvn-alert-danger {
	background: #fef2f2;
	color: #991b1b;
	border: 1px solid #fecaca;
	gap: 8px;
	padding: 14px 18px;
}

@media screen and (max-width: 991px) {
	.cvn-reg-grid {
		grid-template-columns: 1fr;
	}
	.cvn-reg-card {
		padding: 28px 20px;
	}
}

@media screen and (max-width: 600px) {
	.cvn-reg-form .form-row {
		flex-direction: column;
		gap: 0;
	}
	.cvn-reg-hero-title {
		font-size: 24px;
	}
	.cvn-alert {
		flex-direction: column;
		padding: 16px;
		gap: 10px;
	}
	.cvn-alert-success .alert-actions .btn {
		width: 100%;
	}
}

/* ==========================================================================
   404 ERROR PAGE
   ========================================================================== */

.cvn-404-section {
	position: relative;
	overflow: hidden;
	min-height: 520px;
	display: flex;
	align-items: center;
	padding: 40px 0 56px;
	background: linear-gradient(135deg, #f3f8f4 0%, #ffffff 52%, #fffaf2 100%);
}

.cvn-404-decor {
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
	z-index: 1;
}

.cvn-404-decor-1 {
	width: 440px;
	height: 440px;
	top: -150px;
	left: -130px;
	background: radial-gradient(circle, rgba(44, 103, 56, 0.11) 0%, rgba(44, 103, 56, 0) 70%);
}

.cvn-404-decor-2 {
	width: 420px;
	height: 420px;
	bottom: -160px;
	right: -120px;
	background: radial-gradient(circle, rgba(249, 155, 28, 0.13) 0%, rgba(249, 155, 28, 0) 70%);
}

.cvn-404-container {
	position: relative;
	z-index: 2;
	width: 100%;
	padding-top: 0;
	padding-bottom: 0;
}

.cvn-404-card {
	position: relative;
	overflow: hidden;
	max-width: 960px;
	margin: 0 auto;
	background: rgba(255, 255, 255, 0.96);
	backdrop-filter: blur(8px);
	border: 1px solid #e2e8f0;
	border-radius: 24px;
	padding: 40px 42px 30px;
	box-shadow: 0 24px 60px -12px rgba(15, 23, 42, 0.08), 0 4px 16px -4px rgba(44, 103, 56, 0.05);
	text-align: center;
}

.cvn-404-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg, var(--cvn-primary) 0%, #3d8b4e 58%, var(--cvn-accent) 100%);
}

.cvn-404-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 16px;
	border-radius: 999px;
	background: #f0fdf4;
	border: 1px solid #bbf7d0;
	color: var(--cvn-primary-hover);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.01em;
	margin-bottom: 18px;
}

.cvn-404-badge-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--cvn-accent);
	box-shadow: 0 0 0 4px rgba(249, 155, 28, 0.22);
	flex-shrink: 0;
	animation: cvnBadgePulse 2.4s ease-in-out infinite;
}

.cvn-404-code-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin: 0 auto 14px;
	line-height: 1;
	user-select: none;
}

.cvn-404-digit {
	font-size: clamp(64px, 10vw, 104px);
	font-weight: 800;
	letter-spacing: -0.04em;
	background: linear-gradient(160deg, #2c6738 20%, #17381e 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.cvn-404-compass {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: clamp(60px, 8.5vw, 84px);
	height: clamp(60px, 8.5vw, 84px);
	filter: drop-shadow(0 10px 18px rgba(44, 103, 56, 0.16));
	animation: cvnCompassFloat 4.5s ease-in-out infinite;
}

.cvn-404-compass svg {
	width: 100%;
	height: 100%;
	display: block;
}

.cvn-404-title {
	font-size: clamp(24px, 3.2vw, 34px);
	font-weight: 800;
	line-height: 1.28;
	color: #0f172a;
	margin: 0 auto 12px;
	max-width: 680px;
	letter-spacing: -0.015em;
}

.cvn-404-subtitle {
	font-size: 15.5px;
	line-height: 1.66;
	color: #475569;
	margin: 0 auto 22px;
	max-width: 580px;
}

.cvn-404-search-form {
	max-width: 580px;
	margin: 0 auto 20px;
}

.cvn-404-search-box {
	display: flex;
	align-items: center;
	gap: 10px;
	background: #f8fafc;
	border: 1.5px solid #cbd5e1;
	border-radius: 999px;
	padding: 5px 5px 5px 18px;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.cvn-404-search-box:focus-within {
	background: #ffffff;
	border-color: var(--cvn-primary);
	box-shadow: 0 0 0 4px rgba(44, 103, 56, 0.12);
}

.cvn-404-search-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #64748b;
	flex-shrink: 0;
	transition: color 0.2s ease;
}

.cvn-404-search-box:focus-within .cvn-404-search-icon {
	color: var(--cvn-primary);
}

.cvn-404-search-input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	padding: 9px 4px;
	font-size: 15px;
	color: #0f172a;
	box-shadow: none;
	appearance: none;
	-webkit-appearance: none;
}

.cvn-404-search-input[type="search"]:focus {
	outline: none;
	color: #0f172a;
}

.cvn-404-search-input[type="search"]::placeholder {
	color: #94a3b8;
}

.cvn-404-search-box button.cvn-404-search-submit {
	flex-shrink: 0;
	border: 0;
	border-radius: 999px;
	background: var(--cvn-primary);
	color: #ffffff;
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1;
	padding: 13px 24px;
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
	box-shadow: 0 6px 14px -3px rgba(44, 103, 56, 0.35);
	white-space: nowrap;
}

.cvn-404-search-box button.cvn-404-search-submit:hover,
.cvn-404-search-box button.cvn-404-search-submit:focus-visible {
	background: var(--cvn-primary-hover);
	border-color: transparent;
	transform: translateY(-1px);
	box-shadow: 0 8px 18px -3px rgba(44, 103, 56, 0.42);
	outline: none;
}

.cvn-404-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin-bottom: 26px;
}

.cvn-404-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 24px;
	border-radius: 12px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	transition: all 0.2s ease;
	box-sizing: border-box;
}

.cvn-404-btn-primary,
.cvn-404-btn-primary:visited {
	background: var(--cvn-primary);
	border: 1.5px solid var(--cvn-primary);
	color: #ffffff;
	box-shadow: 0 8px 20px -6px rgba(44, 103, 56, 0.45);
}

.cvn-404-btn-primary:hover,
.cvn-404-btn-primary:focus {
	background: var(--cvn-primary-hover);
	border-color: var(--cvn-primary-hover);
	color: #ffffff;
	transform: translateY(-2px);
}

.cvn-404-btn-outline,
.cvn-404-btn-outline:visited {
	background: #fffbeb;
	border: 1.5px solid #f59e0b;
	color: #92400e;
}

.cvn-404-btn-outline:hover,
.cvn-404-btn-outline:focus {
	background: var(--cvn-accent);
	border-color: var(--cvn-accent);
	color: #ffffff;
	transform: translateY(-2px);
	box-shadow: 0 8px 20px -6px rgba(249, 155, 28, 0.45);
}

.cvn-404-quick-wrap {
	border-top: 1px solid #eef2f6;
	padding-top: 24px;
	margin-bottom: 20px;
}

.cvn-404-quick-heading {
	font-size: 12.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #64748b;
	margin-bottom: 16px;
}

.cvn-404-quick-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
	text-align: left;
}

.cvn-404-quick-grid[data-count="1"] {
	grid-template-columns: minmax(0, 420px);
	justify-content: center;
}

.cvn-404-quick-grid[data-count="2"],
.cvn-404-quick-grid[data-count="4"] {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cvn-404-quick-grid[data-count="2"] {
	max-width: 680px;
	margin: 0 auto;
}

.cvn-404-quick-item,
.cvn-404-quick-item:visited {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 16px;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 14px;
	text-decoration: none;
	color: #1e293b;
	transition: all 0.22s ease;
	min-width: 0;
}

.cvn-404-quick-item:hover,
.cvn-404-quick-item:focus {
	background: #ffffff;
	border-color: #86efac;
	box-shadow: 0 12px 24px -8px rgba(44, 103, 56, 0.14);
	transform: translateY(-2px);
	color: #1e293b;
}

.cvn-404-quick-icon {
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: #ecfdf5;
	border: 1px solid #d1fae5;
	color: var(--cvn-primary);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: all 0.22s ease;
}

.cvn-404-quick-item:hover .cvn-404-quick-icon {
	background: var(--cvn-primary);
	border-color: var(--cvn-primary);
	color: #ffffff;
}

.cvn-404-quick-body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.cvn-404-quick-title {
	font-size: 14.5px;
	font-weight: 700;
	color: #0f172a;
	line-height: 1.35;
	transition: color 0.2s ease;
}

.cvn-404-quick-item:hover .cvn-404-quick-title {
	color: var(--cvn-primary);
}

.cvn-404-quick-desc {
	font-size: 12.8px;
	color: #64748b;
	line-height: 1.48;
}

.cvn-404-quick-arrow {
	font-size: 16px;
	font-weight: 700;
	color: #94a3b8;
	align-self: center;
	flex-shrink: 0;
	transition: transform 0.2s ease, color 0.2s ease;
}

.cvn-404-quick-item:hover .cvn-404-quick-arrow {
	color: var(--cvn-primary);
	transform: translateX(3px);
}

.cvn-404-support-bar {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 10px 18px;
	border-radius: 999px;
	background: #f8fafc;
	border: 1px solid #eef2f6;
	font-size: 13.5px;
	color: #475569;
}

.cvn-404-hotline-link,
.cvn-404-hotline-link:visited {
	font-weight: 800;
	color: var(--cvn-primary);
	text-decoration: none;
}

.cvn-404-hotline-link:hover,
.cvn-404-hotline-link:focus {
	color: #d97706;
	text-decoration: underline;
}

@keyframes cvnCompassFloat {
	0%, 100% {
		transform: translateY(0) rotate(0deg);
	}
	50% {
		transform: translateY(-5px) rotate(6deg);
	}
}

@keyframes cvnBadgePulse {
	0%, 100% {
		box-shadow: 0 0 0 4px rgba(249, 155, 28, 0.22);
	}
	50% {
		box-shadow: 0 0 0 7px rgba(249, 155, 28, 0.08);
	}
}

@media (prefers-reduced-motion: reduce) {
	.cvn-404-compass,
	.cvn-404-badge-dot {
		animation: none;
	}
}

@media screen and (max-width: 849px) {
	.cvn-404-section {
		min-height: auto;
		padding: 36px 0 52px;
	}

	.cvn-404-card {
		padding: 36px 26px 28px;
	}

	.cvn-404-quick-grid,
	.cvn-404-quick-grid[data-count="1"],
	.cvn-404-quick-grid[data-count="2"],
	.cvn-404-quick-grid[data-count="4"] {
		grid-template-columns: 1fr;
		max-width: 100%;
	}
}

@media screen and (max-width: 549px) {
	.cvn-404-section {
		padding: 24px 0 40px;
	}

	.cvn-404-container {
		padding-left: 14px;
		padding-right: 14px;
	}

	.cvn-404-card {
		padding: 30px 18px 24px;
		border-radius: 18px;
	}

	.cvn-404-badge {
		font-size: 12px;
		padding: 5px 12px;
	}

	.cvn-404-subtitle {
		font-size: 14.5px;
		margin-bottom: 22px;
	}

	.cvn-404-search-box {
		padding: 4px 4px 4px 12px;
		gap: 6px;
	}

	.cvn-404-search-icon {
		display: none;
	}

	.cvn-404-search-input[type="search"] {
		font-size: 14px;
		padding: 8px 2px;
	}

	.cvn-404-search-box button.cvn-404-search-submit {
		padding: 11px 16px;
		font-size: 13.5px;
	}

	.cvn-404-actions {
		flex-direction: column;
		align-items: stretch;
		margin-bottom: 26px;
	}

	.cvn-404-btn {
		width: 100%;
	}

	.cvn-404-support-bar {
		border-radius: 14px;
		padding: 10px 14px;
		font-size: 13px;
	}
}