/**
 * Vietnamese overrides on top of the ported origin CSS.
 *
 * The origin sets Ubuntu on headings, the main menu and button/label text.
 * Google's Ubuntu covers only U+1EF2-1EFF of the Vietnamese block, so
 * accented characters would fall back to a system font mid-word. Be Vietnam
 * Pro is a Vietnamese-first face with a similar geometric-humanist tone, so
 * the selectors below are repointed at it. Body copy stays on Roboto, which
 * already ships a full vietnamese subset.
 *
 * Selector list is generated from every rule declaring Ubuntu in
 * assets/css/lib — regenerate it if those files are ever re-ported.
 */

.about-text span,
.award-box .date,
.blog-btn a,
.btn,
.button-group button,
.choose-btn a,
.comment-form .submit,
.conterdown span,
.count,
.course-meta .author a,
.course-meta2 .author a,
.courses-content a,
.event-content .date,
.event-content .time,
.experience-text span,
.features-area .nav-pills .nav-link,
.header-three .main-menu ul li a,
.main-menu ul li a,
.project-detail .project-info li strong,
.right-menu .text strong,
.s-video-content p,
.second-about p,
.service-details-three .sbox div .services-box a,
.services-07 .user-box .text h2,
.services-07 .user-box .text h3,
.services-box a,
.services-box07 .sr-contner .text a,
.services-categories li a,
.services-hover a,
.services-sidebar .sidebar-widget .widget-title,
.sinature-box h2,
.sinature-box h3,
.skill-name,
.slider-four .slider-bg .text2 h5,
.step-box .date-box,
.testimonial-active3.testimonial-area3 .single-testimonial p,
code,
h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
	font-family: 'Be Vietnam Pro', 'Roboto', sans-serif;
}

/**
 * Be Vietnam Pro runs optically lighter than Ubuntu at the same numeric
 * weight, so headings set at 500 in the origin looked thinner than the
 * original. Nudging the display sizes one step restores the origin's heft
 * without touching the ported CSS.
 */
.slider-content h2,
.section-title h2,
h1, h2, h3 {
	font-weight: 600;
}

/**
 * Home hero text panel.
 *
 * The origin bakes a translucent panel straight into banner2.jpg and leaves
 * banner4.jpg with none, so the overlaid text sits by the centred container
 * while the baked panel is anchored to the image and cropped by
 * background-size:cover — the two drift apart at every viewport width and the
 * text falls outside the light area. A CSS panel rides with the text instead,
 * so every captioned slide keeps its copy on an even, readable backdrop
 * regardless of the image behind it. Scoped to #home so inner-page banners,
 * which reuse .s-slider-content, are untouched.
 */
#home .slider-content.banner_bg {
	background: rgba(255, 255, 255, 0.85);
	padding: 40px 45px;
	border-radius: 10px;
	backdrop-filter: blur(2px);
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
}

/* Origin sizes the hero title at 45px, which reads oversized inside the panel.
 * Drop it 30% to 31.5px. */
#home .slider-content h2 {
	font-size: 31.5px;
}

@media (max-width: 767px) {
	#home .slider-content.banner_bg {
		padding: 24px 26px;
	}
}

/* The accent rule before the subtitle is white in the origin — invisible on
 * the panel — so repoint it to the brand navy. */
#home .slider-content h5::before {
	background: #323368;
}

/**
 * "Gửi tin nhắn" block — the origin's `contact-form-section`.
 *
 * The origin's form is the WordPress comment form and carries the classes its
 * CSS styles: `.form_group`, `.form_control`, `.main-btn` (lib/my-style2.css
 * around line 7043). This site posts through Fluent Forms instead — a
 * deliberate difference, docs/ban-giao.md §7 item 2 — so none of that CSS
 * matches and the block falls back to the plugin's default skin: labels above
 * every field, rounded bordered inputs, one column, a small blue button.
 *
 * The rules below re-point the origin's own values at the Fluent Forms markup.
 * Values are copied from lib/my-style2.css, not re-invented; the field order
 * and the `sp-field-half` / `sp-ico-*` wrapper classes come from
 * tools/forms/seed-fluent-forms.php.
 *
 * Scope covers two wrappers that render the same send-message form: the
 * `.contact-form-section` block (reproduced by the send-message-form template
 * part, e.g. the Giới thiệu page) and the Liên hệ page's own `.contact_from_box`
 * two-column card. Both carry the `sp-field-half` name/phone fields, so sharing
 * these rules keeps the Liên hệ form matching — name and phone side by side.
 * The footer popup is a separate origin design and is left alone.
 */

/* Origin lays the fields out on a Bootstrap row: name and phone at col-lg-6,
 * the rest full width. Fluent Forms renders one flat stack of `.ff-el-group`
 * inside a <fieldset>, so the grid goes there. The <legend> is the plugin's
 * screen-reader title and is already sized to zero. */
:is(.contact-form-section, .contact_from_box) .fluentform fieldset {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	column-gap: 30px;
}

:is(.contact-form-section, .contact_from_box) .fluentform legend,
:is(.contact-form-section, .contact_from_box) .fluentform .ff-el-group {
	grid-column: 1 / -1;
	margin-bottom: 0;
}

:is(.contact-form-section, .contact_from_box) .fluentform .ff-el-group.sp-field-half {
	grid-column: span 1;
}

@media (max-width: 991px) {
	:is(.contact-form-section, .contact_from_box) .fluentform fieldset {
		grid-template-columns: 1fr;
	}

	:is(.contact-form-section, .contact_from_box) .fluentform .ff-el-group.sp-field-half {
		grid-column: 1 / -1;
	}
}

/* The origin labels its fields by placeholder only. Keep the plugin's <label>
 * in the accessibility tree rather than hiding it outright — the placeholder
 * disappears as soon as the field has content. */
:is(.contact-form-section, .contact_from_box) .fluentform .ff-el-input--label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* .form_control + .contact-respond .form_control from the origin. The gap
 * between fields is the control's own bottom margin there, so `.ff-el-group`
 * above carries none. */
:is(.contact-form-section, .contact_from_box) .fluentform .ff-el-form-control {
	width: 100%;
	height: 60px;
	padding: 0 30px;
	margin-bottom: 15px;
	background-color: #f7f7f7;
	border: none;
	border-radius: 0;
	box-shadow: none;
	color: #555555;
	font-size: 14px;
}

/* Fluent Forms flips the background to white on focus; the origin has no focus
 * state at all, so hold the field colour. */
:is(.contact-form-section, .contact_from_box) .fluentform .ff-el-form-control:focus {
	background-color: #f7f7f7;
	outline: none;
}

:is(.contact-form-section, .contact_from_box) .fluentform .ff-el-form-control::placeholder {
	color: #555555;
	font-size: 14px;
	opacity: 1;
}

/* `.contact-wrapper textarea{text-transform:capitalize}` comes over from the
 * origin, where it is invisible against an already title-cased "Write
 * Message". In Vietnamese it title-cases both the placeholder and every word
 * the visitor types into the box. */
:is(.contact-form-section, .contact_from_box) .fluentform textarea.ff-el-form-control {
	height: 140px;
	min-height: 140px;
	padding: 15px;
	line-height: 1.6;
	text-transform: none;
}

/* The origin puts an iconfont <i> in each field's right gutter. Fluent Forms
 * emits no such element, so the glyph rides on the input wrapper instead.
 * Codepoints are the ones the origin's markup asks for: icon-yuangong,
 * icon-31dianhua, icon-185078emailmailstreamline, icon-feedback. */
:is(.contact-form-section, .contact_from_box) .fluentform .ff-el-group[class*="sp-ico-"] .ff-el-input--content {
	position: relative;
}

:is(.contact-form-section, .contact_from_box) .fluentform .ff-el-group[class*="sp-ico-"] .ff-el-input--content::after {
	position: absolute;
	top: 15px;
	right: 20px;
	color: #009a44;
	font-family: "iconfont";
	font-size: 25px;
	line-height: 1;
	pointer-events: none;
}

:is(.contact-form-section, .contact_from_box) .fluentform .sp-ico-user .ff-el-input--content::after {
	content: "\e617";
}

:is(.contact-form-section, .contact_from_box) .fluentform .sp-ico-phone .ff-el-input--content::after {
	content: "\e601";
}

:is(.contact-form-section, .contact_from_box) .fluentform .sp-ico-email .ff-el-input--content::after {
	content: "\e643";
}

:is(.contact-form-section, .contact_from_box) .fluentform .sp-ico-message .ff-el-input--content::after {
	content: "\e721";
}

/* .main-btn, stretched to the full row the way the origin's
 * `.form_group .main-btn` does. Four classes so it outranks the inline
 * <style> Fluent Forms prints for the button's own colours.
 * `text-transform` is dropped: the origin capitalises "Send Reply", which is a
 * no-op in English but would title-case the Vietnamese label. */
:is(.contact-form-section, .contact_from_box) .fluentform .ff-btn.ff-btn-submit {
	display: block;
	width: 100%;
	padding: 19px 50px;
	border: none;
	border-radius: 0;
	background-color: #192f59;
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	line-height: 27px;
	text-align: center;
	text-transform: none;
	transition: all 0.3s ease-out 0s;
}

/* The origin's global `.page` rule (lib/my-style2.css) puts margin-bottom:60px
 * on every WordPress page body. On the static front page that margin lands
 * below the footer as an empty gap. WordPress tags the front page with both
 * `home` and `page`, so drop the margin on `body.home` only and leave the
 * spacing the inner pages rely on untouched. */
body.home {
	margin-bottom: 0;
}

/* Liên hệ page: the form card (`.contact_from_box`) and the navy info panel
 * (`.content-info-area`) sit side by side in a Bootstrap `.row`, so the two
 * columns already stretch to equal height — but each inner box only grows to
 * its own content, leaving the shorter one's background short. Make each column
 * a flex container and let its single box fill the column, so the white and
 * navy backgrounds end at the same height. */
.contact-us .row > div {
	display: flex;
}

.contact-us .contact_from_box,
.contact-us .content-info-area {
	width: 100%;
}

/* The origin's 122px top/bottom padding (lib/style.css:14097) is desktop-scale;
 * on a phone it pushes the form most of a screen down. */
@media (max-width: 767px) {
	.contact-us {
		padding: 40px 0;
	}
}

/* Casterfind embed: the SPA is hosted in China and its 1.8 MB uncompressed
 * bundle took 44–46s when measured 2026-07-28. Until it paints, the iframe is a
 * blank 1300px gap that reads as a broken page. Overlay a notice inside the
 * iframe's own box — the wrapper adds no height, so the embed still starts
 * directly under the header the way the origin does.
 *
 * The notice sits near the top rather than centred, because centring 1300px
 * would push it below the fold on a laptop. */
.sp-caster {
	position: relative;
}

.sp-caster__status {
	position: absolute;
	top: 140px;
	left: 0;
	right: 0;
	margin: 0;
	font-family: var(--sp-font-body);
	font-size: 15px;
	color: var(--sp-text);
	text-align: center;
}

.sp-caster__label,
.sp-caster__slow {
	display: block;
}

.sp-caster__spinner {
	display: block;
	width: 34px;
	height: 34px;
	margin: 0 auto 16px;
	border: 3px solid var(--sp-primary-tint);
	border-top-color: var(--sp-primary);
	border-radius: 50%;
	animation: sp-caster-spin 0.8s linear infinite;
}

/* The extra line only earns its place once the wait is clearly abnormal, so it
 * fades in after 12s instead of shipping with the first paint. Pure CSS keeps it
 * out of the JS: no timer to clear when the iframe wins the race, because the
 * whole notice is removed on load. */
.sp-caster__slow {
	margin-top: 8px;
	font-size: 13px;
	color: var(--sp-text-muted);
	opacity: 0;
	animation: sp-caster-fade-in 0.4s ease-out 12s forwards;
}

/* Nothing to announce once the SPA has painted. */
.sp-caster.is-loaded .sp-caster__status {
	display: none;
}

@keyframes sp-caster-spin {
	to {
		transform: rotate(360deg);
	}
}

@keyframes sp-caster-fade-in {
	to {
		opacity: 1;
	}
}

/* Respect reduced-motion: keep the notice, drop the spin. */
@media (prefers-reduced-motion: reduce) {
	.sp-caster__spinner {
		animation: none;
	}

	.sp-caster__slow {
		animation-duration: 0.01s;
	}
}

/* "Khách hàng tiêu biểu": the origin packs eight logos into one non-wrapping
 * flex row, so on a phone each logo is squeezed to roughly a fingernail. Wrap
 * the row to two logos per line — `.brand-img` keeps its 10px side margins, so
 * half the row minus those margins is the width that fits exactly two. */
@media (max-width: 767px) {
	.brand {
		flex-wrap: wrap;
		row-gap: 20px;
	}

	.brand-img {
		width: calc(50% - 20px);
	}
}

/* The origin leaves `.services-box .icon` as an empty rule (lib/style.css:2676),
 * so the icon sits flush against the heading below it. Give it breathing room. */
.services-box .icon {
	margin-bottom: 15px;
}

/* Quick-link cards: the origin comments out `#index-pro`'s padding
 * (lib/style.css:13918), so on a phone the band butts straight against the
 * sections around it and the three stacked cards run together. */
@media (max-width: 767px) {
	#index-pro {
		padding-top: 20px;
		padding-bottom: 20px;
	}

	#index-pro .row > [class*="col-"] {
		margin-top: 10px;
		margin-bottom: 10px;
	}
}