/**
 * 123website Clean Theme Styles (Bootstrap-free)
 * Modern, Lightweight CSS System with Flexbox & Grid
 */

:root {
	--font-primary: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	--font-heading: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

	--color-bg: #f8fafc;
	--color-surface: #ffffff;
	--color-text: #1e293b;
	--color-text-muted: #64748b;

	/* Brand Colors (Phối chuẩn theo spec_dev_baoben.md) */
	--color-primary: #8fff21;
	/* Màu chính (Primary Color): #8fff21 xanh lá tươi */
	--color-primary-hover: #7ce612;
	/* Màu chính khi Hover */
	--color-accent: #279735;
	/* Màu nhấn (Accent Color): #279735 xanh lá đậm */
	--color-accent-dark: #17591F;
	/* Màu sẫm Topbar & Footer: #17591F */

	--color-border: #e2e8f0;
	--container-max-width: 1200px;
	--header-height: 70px;
	--radius: 8px;
	--transition: 0.2s ease-in-out;
	--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
	--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}


/* Box Sizing & Reset */
*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	padding: 0;
	font-family: var(--font-primary);
	font-size: 1rem;
	line-height: 1.6;
	color: var(--color-text);
	background-color: var(--color-bg);
	-webkit-font-smoothing: antialiased;
}

a {
	color: var(--color-primary);
	text-decoration: none;
	transition: color var(--transition);
}

a:hover,
a:focus {
	color: var(--color-primary-hover);
}

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

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--font-heading);
	color: var(--color-accent);
	font-weight: 700;
	line-height: 1.25;
	margin-top: 0;
	margin-bottom: 0.75rem;
}

p {
	margin-top: 0;
	margin-bottom: 1.25rem;
}

/* Screen Reader Utilities */
.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: var(--color-surface);
	clip: auto !important;
	clip-path: none;
	color: var(--color-primary);
	display: block;
	font-size: 0.875rem;
	font-weight: 600;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* Layout System */
.site-container {
	width: 100%;
	max-width: var(--container-max-width);
	margin-left: auto;
	margin-right: auto;
	padding-left: 1.5rem;
	padding-right: 1.5rem;
}

.wrapper {
	padding-top: 2rem;
	padding-bottom: 3rem;
}

.site-layout {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

@media (min-width: 992px) {
	.site-layout {
		display: grid;
		grid-template-columns: 1fr;
	}

	.site-layout:has(.sidebar-left) {
		grid-template-columns: 300px 1fr;
	}

	.site-layout:has(.sidebar-right) {
		grid-template-columns: 1fr 300px;
	}

	.site-layout:has(.sidebar-left):has(.sidebar-right) {
		grid-template-columns: 260px 1fr 260px;
	}
}

.content-area {
	min-width: 0;
}

.sidebar-area {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

/* Site Header & Navigation */
.site-header {
	background-color: var(--color-surface);
	border-bottom: 1px solid var(--color-border);
	position: sticky;
	top: 0;
	z-index: 1000;
	box-shadow: var(--shadow-sm);
}

.nav-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: var(--header-height);
}

.site-title {
	font-size: 1.4rem;
	font-weight: 800;
	color: var(--color-accent);
	margin: 0;
}

.menu-toggle {
	display: none;
	background: none;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	padding: 0.5rem 0.75rem;
	cursor: pointer;
}

.hamburger-icon::before,
.nav-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 1.75rem;
}

.nav-menu a {
	position: relative;
	color: #1e293b;
	font-weight: 700;
	font-size: 0.88rem;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	padding: 0.6rem 0;
	text-decoration: none;
	transition: color 0.2s ease;
}

.nav-menu a::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0;
	height: 3px;
	background-color: var(--color-primary, #68d61d);
	border-radius: 2px;
	transition: width 0.25s ease;
}

.nav-menu a:hover,
.nav-menu .current-menu-item>a,
.nav-menu .current_page_item>a {
	color: var(--color-accent, #279735);
}

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


/* Submenu Dropdowns */
.nav-menu .menu-item-has-children {
	position: relative;
}

.nav-menu .sub-menu {
	list-style: none;
	margin: 0;
	padding: 0.5rem 0;
	position: absolute;
	top: 100%;
	left: 0;
	background-color: var(--color-surface);
	min-width: 200px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	box-shadow: var(--shadow-md);
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: all var(--transition);
}

.nav-menu .menu-item-has-children:hover>.sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.nav-menu .sub-menu a {
	display: block;
	padding: 0.5rem 1rem;
}

@media (max-width: 991px) {
	.menu-toggle {
		display: block;
	}

	.main-menu-wrapper {
		display: none;
		position: absolute;
		top: var(--header-height);
		left: 0;
		right: 0;
		background-color: var(--color-surface);
		border-bottom: 1px solid var(--color-border);
		padding: 1rem 1.5rem;
		box-shadow: var(--shadow-md);
	}

	.main-menu-wrapper.is-open {
		display: block;
	}

	.nav-menu {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.75rem;
	}

	.nav-menu .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border: none;
		padding-left: 1rem;
	}
}

/* Post Cards & Articles */
article.post,
article.page {
	background-color: var(--color-surface);
	border-radius: var(--radius);
	border: 1px solid var(--color-border);
	padding: 2rem;
	margin-bottom: 2rem;
	box-shadow: var(--shadow-sm);
}

.entry-header {
	margin-bottom: 1.25rem;
}

.entry-title {
	font-size: 1.75rem;
	margin-bottom: 0.5rem;
}

.entry-meta {
	font-size: 0.875rem;
	color: var(--color-text-muted);
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
}

.entry-content {
	line-height: 1.7;
}

.entry-footer {
	margin-top: 1.5rem;
	padding-top: 1rem;
	border-top: 1px solid var(--color-border);
	font-size: 0.875rem;
	color: var(--color-text-muted);
}

/* Buttons & Inputs */
.button,
input[type="submit"],
button {
	display: inline-block;
	background-color: var(--color-primary);
	color: #ffffff;
	font-weight: 600;
	padding: 0.625rem 1.25rem;
	border-radius: var(--radius);
	border: none;
	cursor: pointer;
	transition: background-color var(--transition);
	font-size: 0.95rem;
}

.button:hover,
input[type="submit"]:hover,
button:hover {
	background-color: var(--color-primary-hover);
	color: #ffffff;
}

input[type="text"],
input[type="search"],
input[type="email"],
input[type="url"],
input[type="password"],
textarea,
select {
	width: 100%;
	padding: 0.625rem 0.875rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	background-color: var(--color-surface);
	font-family: inherit;
	font-size: 0.95rem;
	color: var(--color-text);
	transition: border-color var(--transition);
}

input:focus,
textarea:focus,
select:focus {
	outline: none;
	border-color: var(--color-primary);
}

.search-input-group {
	display: flex;
	gap: 0.5rem;
}

.search-input-group .search-field {
	flex: 1;
}

/* Pagination */
.pagination,
.nav-links {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	margin-top: 2rem;
}

.page-numbers {
	padding: 0.5rem 0.875rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	background-color: var(--color-surface);
	color: var(--color-text);
}

.page-numbers.current {
	background-color: var(--color-primary);
	color: #ffffff;
	border-color: var(--color-primary);
}

/* Widgets & Sidebar */
.widget {
	background-color: var(--color-surface);
	border-radius: var(--radius);
	border: 1px solid var(--color-border);
	padding: 1.5rem;
	margin-bottom: 1.5rem;
	box-shadow: var(--shadow-sm);
}

.widget-title {
	font-size: 1.15rem;
	margin-bottom: 1rem;
	padding-bottom: 0.5rem;
	border-bottom: 2px solid var(--color-border);
}

.widget ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.widget ul li {
	padding: 0.375rem 0;
	border-bottom: 1px dashed var(--color-border);
}

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

/* Footer */
.wrapper-footer {
	background-color: #1f1f1f;
	padding: 0;
	margin: 0;
}

@media (min-width: 576px) {
	.footer-top-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 992px) {
	.footer-top-grid {
		grid-template-columns: 1.1fr 0.9fr 1.2fr 2fr;
		gap: 2rem;
	}
}

.footer-heading {
	font-family: "Georgia", "Playfair Display", "Times New Roman", serif;
	color: #ffffff;
	font-size: 1.25rem;
	font-weight: 700;
	margin-bottom: 1.5rem;
	letter-spacing: 0.2px;
}

.footer-heading-spacer {
	visibility: hidden;
}

@media (max-width: 991px) {
	.footer-heading-spacer {
		display: none;
	}
}

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

.footer-links li {
	margin-bottom: 0.75rem;
}

.footer-links a {
	color: #a3a3a3;
	font-size: 0.88rem;
	text-decoration: none;
	transition: color 0.2s ease;
	display: inline-block;
}

.footer-links a:hover,
.footer-links a:focus {
	color: #ffffff;
}

.newsletter-desc {
	color: #888888;
	font-size: 0.85rem;
	line-height: 1.5;
	margin-bottom: 1.25rem;
	max-width: 420px;
}

/* Footer Divider */
.footer-divider {
	border: 0;
	border-top: 1px solid #2d2d2d;
	margin: 3rem 0 1.5rem 0;
}

/* Footer Bottom Bar */
.footer-legal-links a {
	color: #777777;
	text-decoration: none;
	transition: color 0.2s ease;
}

.footer-legal-links a:hover {
	color: #ffffff;
}

.legal-sep {
	margin: 0 0.5rem;
	color: #444444;
}

.footer-copyright {
	color: #777777;
}

/* Floating Back-To-Top Button */
.back-to-top-btn {
	position: fixed;
	bottom: 24px;
	right: 24px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: #8cc63f;
	color: #ffffff;
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease, background-color 0.2s ease;
	z-index: 9999;
}

.back-to-top-btn.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.back-to-top-btn:hover {
	background-color: #7bb532;
	transform: translateY(-2px);
}

/* ==========================================================================
   THỦY SẢN BA BẾN DESIGN SYSTEM
   ========================================================================== */

/* Header Top Bar - Matches Reference Screenshot */
.header-topbar {
	background-color: var(--color-accent-dark, #17591F);
	color: #ffffff;
	font-size: 0.85rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.topbar-left {
	display: flex;
	align-items: center;
	gap: 1.75rem;
}

.topbar-item:hover svg,
.topbar-socials {
	display: flex;
	align-items: center;
	gap: 1.25rem;
}


@media (max-width: 768px) {
	.topbar-left {
		gap: 0.85rem;
		font-size: 0.75rem;
	}

	.topbar-socials {
		gap: 0.85rem;
	}
}

/* Header / Navigation logo constraints live in section 11 at the end of this
   file, so a square logo keeps its aspect ratio. */

.baben-brand-logo {
	font-size: 1.35rem;
	font-weight: 800;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
}

.brand-text-green {
	color: var(--color-accent, #279735);
}

.brand-text-dark {
	color: #0f172a;
}

.header-right-actions {
	display: flex;
	align-items: center;
	gap: 1.25rem;
}

.lang-switch {
	font-size: 0.85rem;
	font-weight: 600;
	color: #475569;
	cursor: pointer;
}

.btn-header-rfq {
	background-color: var(--color-primary, #8fff21);
	color: #17591F;
	font-size: 0.82rem;
	font-weight: 800;
	padding: 0.55rem 1.2rem;
	border-radius: 4px;
	text-decoration: none;
	transition: background-color 0.2s ease, transform 0.2s ease;
	letter-spacing: 0.3px;
	display: inline-block;
}

.btn-header-rfq:hover {
	background-color: var(--color-primary-hover, #7ce612);
	color: #17591F;
	transform: translateY(-1px);
}

.nav-menu a {
	position: relative;
	transition: color 0.2s ease;
	text-decoration: none !important;
}

.nav-menu a::after {
	content: '';
	position: absolute;
	bottom: -4px;
	left: 0;
	width: 0;
	height: 3px;
	background-color: var(--color-primary, #8fff21);
	border-radius: 2px;
	transition: width 0.25s ease;
}

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



/* Homepage Ba Bến Wrapper */
.homepage-baben {
	width: 100%;
	background-color: #f8fafc;
}

/* 1. Hero Section — nội dung căn giữa trên ảnh nền tối (theo design) */
.baben-hero-section {
	position: relative;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	padding: 7rem 0;
	color: #ffffff;
}

.hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(23, 89, 31, 0.72) 0%, rgba(23, 89, 31, 0.62) 50%, rgba(23, 89, 31, 0.78) 100%);
	z-index: 1;
}

.hero-content {
	position: relative;
	z-index: 2;
	max-width: 780px;
	margin: 0 auto;
	text-align: center;
}

/* Badge dùng chung cho hero trang chủ và hero các trang trong.
   Trước đây có 2 định nghĩa xung đột khiến badge hiển thị khác nhau giữa các trang. */
.hero-badge {
	display: inline-block;
	font-size: 0.72rem;
	font-weight: 800;
	color: var(--color-primary, #8fff21);
	background: rgba(143, 255, 33, 0.15);
	border: 1px solid rgba(143, 255, 33, 0.35);
	padding: 0.4rem 0.9rem;
	border-radius: 999px;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	margin-bottom: 1.25rem;
}

.hero-main-title {
	font-size: 3rem;
	font-weight: 800;
	color: #ffffff;
	text-transform: uppercase;
	line-height: 1.2;
	margin-bottom: 1.25rem;
}

.hero-subtext {
	font-size: 1.05rem;
	color: rgba(255, 255, 255, 0.88);
	line-height: 1.7;
	margin: 0 auto 2rem;
	max-width: 620px;
}

.hero-actions {
	display: flex;
	justify-content: center;
}

.btn-arrow {
	margin-left: 0.4rem;
}

.btn-baben-primary {
	background-color: var(--color-primary, #8fff21);
	color: #17591F;
	font-size: 0.88rem;
	font-weight: 800;
	padding: 0.9rem 2.2rem;
	border-radius: 4px;
	text-decoration: none;
	display: inline-block;
	transition: all 0.25s ease;
	letter-spacing: 0.5px;
	box-shadow: 0 4px 14px rgba(143, 255, 33, 0.4);
}

.btn-baben-primary:hover {
	background-color: var(--color-primary-hover, #7ce612);
	color: #17591F;
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(143, 255, 33, 0.5);
}


/* 2. About & Experience Section */
.baben-about-section {
	padding: 5rem 0;
	background-color: #ffffff;
}

.about-grid {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 3.5rem;
	align-items: center;
}

@media (max-width: 991px) {
	.about-grid {
		grid-template-columns: 1fr;
		gap: 2.5rem;
	}
}

.section-title {
	font-size: 2.1rem;
	font-weight: 800;
	color: #0f172a;
	margin-bottom: 1.25rem;
}

.about-desc {
	font-size: 1rem;
	color: #475569;
	line-height: 1.7;
	margin-bottom: 2.5rem;
}

.stats-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.5rem;
	max-width: 480px;
}

.stat-card {
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	padding: 1.75rem 1.5rem;
	background-color: #ffffff;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.stat-number {
	display: block;
	font-size: 2.5rem;
	font-weight: 800;
	color: var(--color-accent, #279735);
	line-height: 1;
	margin-bottom: 0.5rem;
}

.stat-label {
	font-size: 0.75rem;
	font-weight: 700;
	color: #64748b;
	letter-spacing: 0.5px;
}

.about-image-col .image-wrapper {
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
}

.about-image-col img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: cover;
}

/* 3. Featured Products Section */
.baben-products-section {
	padding: 5rem 0;
	background-color: #f8fafc;
}

.section-header {
	margin-bottom: 3rem;
}

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

.section-subtitle {
	font-size: 1rem;
	color: #64748b;
	margin-top: 0.4rem;
}

.products-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 2rem;
}

@media (max-width: 768px) {
	.products-grid {
		grid-template-columns: 1fr;
	}
}

.product-card {
	background-color: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	display: flex;
	flex-direction: column;
}

.product-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
}

.product-thumb {
	height: 240px;
	overflow: hidden;
	background-color: #f1f5f9;
}

.product-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.product-card:hover .product-thumb img {
	transform: scale(1.04);
}

.product-body {
	padding: 1.75rem;
	flex: 1;
	display: flex;
	flex-direction: column;
}

.product-tag {
	display: inline-block;
	font-size: 0.72rem;
	font-weight: 700;
	color: var(--color-accent, #279735);
	letter-spacing: 0.5px;
	margin-bottom: 0.6rem;
}

.product-name {
	font-size: 1.4rem;
	font-weight: 800;
	color: #0f172a;
	margin-bottom: 0.75rem;
}

.product-desc {
	font-size: 0.92rem;
	color: #64748b;
	line-height: 1.6;
	margin-bottom: 1.5rem;
	flex: 1;
}

.btn-product-outline {
	display: inline-block;
	border: 1px solid #cbd5e1;
	color: #334155;
	font-size: 0.8rem;
	font-weight: 700;
	padding: 0.6rem 1.4rem;
	border-radius: 4px;
	text-decoration: none;
	transition: all 0.2s ease;
	letter-spacing: 0.3px;
}

.btn-product-outline:hover {
	border-color: var(--color-accent, #279735);
	color: var(--color-accent, #279735);
	background-color: rgba(98, 208, 23, 0.05);
}

/* 4. Certifications Section */
.baben-cert-section {
	padding: 4rem 0 5rem 0;
	background-color: #ffffff;
}

.cert-badges-wrapper {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 3rem;
	flex-wrap: wrap;
	margin-top: 2.5rem;
}

.cert-badge-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
}

.cert-seal {
	width: 100px;
	height: 100px;
	border-radius: 50%;
	border: 2px solid #e2e8f0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: #0f172a;
	background-color: #f8fafc;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04);
	transition: transform 0.3s ease, border-color 0.3s ease;
}

.cert-seal:hover {
	transform: translateY(-3px);
	border-color: var(--color-accent, #279735);
	color: var(--color-accent, #279735);
}

.seal-title {
	font-size: 0.75rem;
	font-weight: 800;
	margin-top: 0.25rem;
}

.cert-name {
	font-size: 0.82rem;
	font-weight: 700;
	color: #64748b;
}

/* 5. RFQ Form Section */
.baben-rfq-section {
	padding: 5rem 0 6rem 0;
	background-color: #f1f5f9;
}

.rfq-card {
	max-width: 760px;
	margin: 0 auto;
	background-color: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	padding: 3rem 2.5rem;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

@media (max-width: 575px) {
	.rfq-card {
		padding: 2rem 1.5rem;
	}
}

.rfq-title {
	font-size: 2rem;
	font-weight: 800;
	color: #0f172a;
	margin-bottom: 0.5rem;
}

.rfq-subtitle {
	font-size: 0.95rem;
	color: #64748b;
	margin-bottom: 2.25rem;
}

@media (max-width: 575px) {
	.rfq-form .form-row.two-cols {
		grid-template-columns: 1fr;
	}
}

.form-group label {
	display: block;
	font-size: 0.85rem;
	font-weight: 600;
	color: #334155;
	margin-bottom: 0.5rem;
}

.form-group label .required {
	color: #ef4444;
}

.form-group input,
.form-group select,
.form-group textarea {
	width: 100%;
	padding: 0.75rem 1rem;
	border: 1px solid #cbd5e1;
	border-radius: 6px;
	background-color: #f8fafc;
	font-size: 0.92rem;
	color: #0f172a;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
	outline: none;
	border-color: var(--color-accent, #279735);
	background-color: #ffffff;
	box-shadow: 0 0 0 3px rgba(98, 208, 23, 0.15);
}

.btn-baben-submit {
	width: 100%;
	background-color: var(--color-accent, #279735);
	color: #ffffff;
	font-size: 0.95rem;
	font-weight: 700;
	padding: 0.9rem;
	border: none;
	border-radius: 6px;
	cursor: pointer;
	transition: background-color 0.25s ease, transform 0.2s ease;
	letter-spacing: 0.5px;
	margin-top: 0.5rem;
}

.btn-baben-submit:hover {
	background-color: var(--color-accent-dark, #17591F);
	transform: translateY(-1px);
	box-shadow: 0 4px 14px rgba(98, 208, 23, 0.35);
}

/* 6. Footer (Light B2B Style) */
.site-footer-baben {
	background-color: #e2e8f0;
	color: #475569;
	padding: 3rem 0;
	font-size: 0.88rem;
}

.footer-baben-grid {
	display: grid;
	grid-template-columns: 2fr repeat(3, 1fr);
	gap: 2rem;
	align-items: start;
}


@media (max-width: 768px) {
	.footer-baben-grid {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}
}

.footer-brand-title {
	font-size: 1.2rem;
	font-weight: 800;
	color: #0f172a;
	margin-bottom: 0.5rem;
}

.footer-copyright-text {
	color: #64748b;
	font-size: 0.82rem;
	margin: 0;
}

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

.footer-baben-links li {
	margin-bottom: 0.4rem;
}

.footer-baben-links a {
	color: #475569;
	text-decoration: none;
	font-weight: 600;
	transition: color 0.2s ease;
}

.footer-baben-links a:hover {
	color: var(--color-accent, #279735);
}

/* Floating Back to Top Button */
.back-to-top-btn {
	position: fixed;
	bottom: 24px;
	right: 24px;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background-color: var(--color-accent, #279735);
	color: #ffffff;
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 4px 12px rgba(98, 208, 23, 0.4);
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease, background-color 0.2s ease;
	z-index: 9999;
}

.back-to-top-btn.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.back-to-top-btn:hover {
	background-color: var(--color-accent-dark, #17591F);
	transform: translateY(-2px);
}

/* ==========================================================================
   MOBILE & TABLET RESPONSIVE STYLES
   ========================================================================== */

@media (max-width: 991px) {

	/* Header Navigation Bar */
	.site-navigation {
		position: relative;
	}

	.nav-container {
		height: 64px;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	/* Mobile logo sizing lives in section 11 at the end of this file. */

	/* Hamburger Mobile Toggle */
	.menu-toggle {
		display: flex !important;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		background: #f8fafc;
		border: 1px solid #cbd5e1;
		border-radius: 6px;
		padding: 0;
		cursor: pointer;
		outline: none;
	}

	/* Off-canvas Mobile Menu Dropdown */
	.main-menu-wrapper {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background-color: #ffffff;
		border-bottom: 3px solid var(--color-primary, #68d61d);
		padding: 1.25rem 1.5rem;
		box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
		z-index: 9999;
	}

	.main-menu-wrapper.is-open {
		display: block !important;
	}

	.nav-menu {
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
		width: 100%;
	}

	.nav-menu li {
		width: 100%;
	}

	.nav-menu a {
		display: block;
		width: 100%;
		padding: 0.75rem 0;
		font-size: 1.05rem;
		font-weight: 600;
		color: #1e293b;
		border-bottom: 1px solid #f1f5f9;
	}

	.header-right-actions {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 1rem;
		padding-top: 1rem;
		border-top: 1px dashed #cbd5e1;
	}

	/* Ghi chú: hero, about-grid, products-grid, cert, RFQ và footer đã được xử lý
	   ở mục 15.6 cuối file theo bố cục mới — không lặp lại ở đây để tránh
	   hai nguồn sự thật. Phần dưới chỉ giữ những thứ mục 15.6 không đụng tới. */

	.section-title {
		font-size: 1.75rem;
	}

	.stats-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 1rem;
		max-width: 100%;
		margin: 0 auto;
	}

	.stat-card {
		padding: 1.25rem 1rem;
	}

	.stat-number {
		font-size: 2.1rem;
	}

	.product-thumb {
		height: 200px;
	}

	/* Dùng ở trang Năng Lực */
	.cert-badges-wrapper {
		flex-direction: row;
		justify-content: center;
		gap: 1.5rem;
	}

	.rfq-card {
		padding: 2rem 1.25rem;
	}

	.rfq-title {
		font-size: 1.65rem;
	}
}

@media (max-width: 576px) {
	.header-topbar {
		font-size: 0.72rem;
	}

	.topbar-left {
		gap: 0.65rem;
	}

	.topbar-socials {
		gap: 0.65rem;
	}

	.hero-main-title {
		font-size: 1.75rem;
	}

	.cert-badges-wrapper {
		gap: 1.25rem;
	}

	.cert-seal {
		width: 80px;
		height: 80px;
		font-size: 0.7rem;
	}
}

/* ==========================================================================
   BA BẾN — HEADER, PAGE TEMPLATES & RESPONSIVE SYSTEM
   Authoritative styles. Loaded last so they win over earlier duplicates.
   Breakpoints: <576 phone · <768 large phone · <992 tablet · >=992 desktop
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Base helpers
   -------------------------------------------------------------------------- */
.text-center {
	text-align: center;
}

.btn-block {
	display: block;
	width: 100%;
	text-align: center;
}

/* Never let a long word / URL blow out the mobile viewport. */
body {
	overflow-wrap: break-word;
}

/* Lock background scroll while the mobile menu is open. */
body.menu-is-open {
	overflow: hidden;
}

/* --------------------------------------------------------------------------
   2. Top bar
   -------------------------------------------------------------------------- */
.header-topbar {
	background-color: var(--color-accent-dark, #17591F);
	color: #ffffff;
	font-size: 0.82rem;
	font-weight: 600;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.topbar-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: 40px;
	padding-top: 0.4rem;
	padding-bottom: 0.4rem;
}

.topbar-left {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	min-width: 0;
}

.topbar-contact-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: #ffffff;
	text-decoration: none;
	min-width: 0;
}

.topbar-contact-link span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.topbar-contact-link:hover,
.topbar-contact-link:focus,
.topbar-social-link:hover,
.topbar-social-link:focus {
	color: var(--color-primary, #8fff21);
}

.topbar-icon {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

.topbar-socials {
	display: flex;
	align-items: center;
	gap: 0.35rem;
}

.topbar-social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	color: #ffffff;
	border-radius: 4px;
	transition: color 0.2s ease, background-color 0.2s ease;
}

.topbar-social-link:hover {
	background-color: rgba(255, 255, 255, 0.1);
}

/* --------------------------------------------------------------------------
   3. Sticky navbar
   -------------------------------------------------------------------------- */
.site-header-wrapper {
	position: sticky;
	top: 0;
	z-index: 1000;
	background-color: #ffffff;
}

.site-navigation {
	position: relative;
	background-color: #ffffff;
	border-bottom: 1px solid var(--color-border, #e2e8f0);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.nav-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	height: 72px;
}

.site-branding {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
}

.baben-brand-logo {
	font-size: 1.3rem;
	font-weight: 800;
	line-height: 1.1;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	white-space: nowrap;
}

.brand-part-primary {
	color: var(--color-accent, #279735);
}

.brand-part-dark {
	color: #0f172a;
}

/* Hamburger */
.menu-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	padding: 0;
	background: #f8fafc;
	border: 1px solid #cbd5e1;
	border-radius: 8px;
	cursor: pointer;
}

.menu-toggle-bars {
	display: block;
	position: relative;
	width: 20px;
	height: 14px;
}

.menu-toggle-bars span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	border-radius: 2px;
	background-color: var(--color-accent, #279735);
	transition: transform 0.25s ease, opacity 0.2s ease;
}

.menu-toggle-bars span:nth-child(1) {
	top: 0;
}

.menu-toggle-bars span:nth-child(2) {
	top: 6px;
}

.menu-toggle-bars span:nth-child(3) {
	top: 12px;
}

.menu-toggle.is-active .menu-toggle-bars span:nth-child(1) {
	transform: translateY(6px) rotate(45deg);
}

.menu-toggle.is-active .menu-toggle-bars span:nth-child(2) {
	opacity: 0;
}

.menu-toggle.is-active .menu-toggle-bars span:nth-child(3) {
	transform: translateY(-6px) rotate(-45deg);
}

.menu-toggle:focus-visible,
.btn-filter-tab:focus-visible,
.nav-menu a:focus-visible,
.topbar-contact-link:focus-visible,
.topbar-social-link:focus-visible {
	outline: 2px solid var(--color-accent, #279735);
	outline-offset: 2px;
}

/* Desktop menu layout */
.main-menu-wrapper {
	display: flex;
	align-items: center;
	gap: 2rem;
	margin-left: auto;
}

.nav-menu {
	display: flex;
	align-items: center;
	gap: 1.75rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.nav-menu a {
	display: inline-block;
	color: #1e293b;
	font-size: 0.8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	text-decoration: none;
	padding: 0.5rem 0;
}

.header-right-actions {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-shrink: 0;
}

.btn-header-rfq {
	display: inline-block;
	background-color: var(--color-primary, #8fff21);
	color: #17591F;
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: 0.4px;
	padding: 0.7rem 1.25rem;
	border-radius: 6px;
	text-decoration: none;
	white-space: nowrap;
	box-shadow: 0 2px 6px rgba(39, 151, 53, 0.15);
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.btn-header-rfq:hover {
	background-color: var(--color-primary-hover, #7ce612);
	color: #17591F;
	transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
   4. Inner page hero header
   -------------------------------------------------------------------------- */
.page-hero-header {
	background: linear-gradient(135deg, var(--color-accent-dark, #17591F) 0%, var(--color-accent, #279735) 100%);
	color: #ffffff;
	padding: 4rem 0;
	text-align: center;
}

.page-hero-header .hero-badge {
	display: inline-block;
	background-color: rgba(143, 255, 33, 0.15);
	color: var(--color-primary, #8fff21);
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 1.2px;
	padding: 0.4rem 0.9rem;
	border-radius: 999px;
	margin-bottom: 1rem;
}

.page-title {
	color: #ffffff;
	font-size: 2.5rem;
	font-weight: 800;
	line-height: 1.15;
	margin: 0 0 0.75rem;
}

.page-subtitle {
	color: rgba(255, 255, 255, 0.85);
	font-size: 1.05rem;
	max-width: 720px;
	margin: 0 auto;
}

/* --------------------------------------------------------------------------
   5. Product catalog page
   -------------------------------------------------------------------------- */
.product-category-filters {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem;
	margin-bottom: 3rem;
}

.btn-filter-tab {
	background: #ffffff;
	border: 1px solid var(--color-border, #e2e8f0);
	color: #475569;
	font-family: inherit;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.4px;
	padding: 0.7rem 1.25rem;
	min-height: 44px;
	border-radius: 999px;
	cursor: pointer;
	transition: all 0.2s ease;
}

.btn-filter-tab:hover {
	border-color: var(--color-accent, #279735);
	color: var(--color-accent, #279735);
}

.btn-filter-tab.active {
	background-color: var(--color-accent, #279735);
	border-color: var(--color-accent, #279735);
	color: #ffffff;
}

.product-card[hidden] {
	display: none;
}

.product-specs-box {
	background: #f8fafc;
	border-radius: 6px;
	padding: 0.75rem 1rem;
	margin-bottom: 1.25rem;
	font-size: 0.82rem;
	color: #475569;
	line-height: 1.6;
}

.baben-commitment-section {
	background: #ffffff;
	padding: 4rem 0;
}

/* --------------------------------------------------------------------------
   6. Process steps / highlights (About & Products)
   -------------------------------------------------------------------------- */
.process-steps-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.5rem;
}

.baben-commitment-section .process-steps-grid {
	grid-template-columns: repeat(3, 1fr);
}

.process-step-card {
	background: #ffffff;
	border: 1px solid var(--color-border, #e2e8f0);
	border-radius: 10px;
	padding: 1.75rem 1.5rem;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.process-step-card h3 {
	font-size: 1.05rem;
	margin-bottom: 0.5rem;
}

.process-step-card p {
	font-size: 0.9rem;
	color: var(--color-text-muted, #64748b);
	margin-bottom: 0;
}

.process-step-card .step-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 10px;
	background-color: rgba(39, 151, 53, 0.08);
	color: var(--color-accent, #279735);
	font-size: 1.1rem;
	font-weight: 800;
	margin-bottom: 1rem;
}

.commitment-icon {
	font-size: 2.5rem;
	line-height: 1;
	margin-bottom: 0.75rem;
}

.about-highlights {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	margin: 1.75rem 0;
}

.highlight-item {
	display: flex;
	gap: 0.85rem;
	align-items: flex-start;
	text-align: left;
}

.highlight-item h4 {
	font-size: 1rem;
	margin-bottom: 0.25rem;
}

.highlight-item p {
	font-size: 0.9rem;
	color: var(--color-text-muted, #64748b);
	margin-bottom: 0;
}

.hl-icon {
	flex-shrink: 0;
}

.about-main-img {
	width: 100%;
	border-radius: 12px;
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1);
}

.baben-cta-section {
	background: linear-gradient(135deg, var(--color-accent, #279735) 0%, var(--color-accent-dark, #17591F) 100%);
	color: #ffffff;
	padding: 4rem 0;
}

.baben-cta-section h2 {
	color: #ffffff;
}

.baben-cta-section p {
	color: rgba(255, 255, 255, 0.85);
	max-width: 640px;
	margin: 0 auto 1.75rem;
}

/* --------------------------------------------------------------------------
   7. Contact page
   -------------------------------------------------------------------------- */
.baben-contact-section {
	padding: 4rem 0 5rem;
}

.contact-main-grid {
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	gap: 3.5rem;
	align-items: start;
}

.contact-col-title {
	font-size: 1.8rem;
	margin-bottom: 1.5rem;
}

.contact-cards-stack {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	margin-bottom: 2rem;
}

.c-info-card {
	display: flex;
	gap: 1rem;
	background: #ffffff;
	border: 1px solid var(--color-border, #e2e8f0);
	border-radius: 8px;
	padding: 1.25rem;
}

.c-info-icon {
	font-size: 1.6rem;
	line-height: 1.2;
	flex-shrink: 0;
}

.c-info-body {
	min-width: 0;
}

.c-info-body h4 {
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--color-accent, #279735);
	margin-bottom: 0.25rem;
}

.c-info-value {
	margin: 0;
	font-size: 1.05rem;
	font-weight: 700;
	color: #0f172a;
	overflow-wrap: anywhere;
}

.c-info-value a {
	color: #0f172a;
}

.c-info-value a:hover {
	color: var(--color-accent, #279735);
}

.c-info-address {
	margin: 0;
	font-size: 0.92rem;
	color: #475569;
}

.gmaps-box {
	border-radius: 10px;
	overflow: hidden;
	border: 1px solid var(--color-border, #e2e8f0);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
	line-height: 0;
}

.gmaps-box iframe {
	display: block;
	width: 100%;
	border: 0;
}

/* --------------------------------------------------------------------------
   8. News & careers page
   -------------------------------------------------------------------------- */
.baben-news-section {
	padding: 4rem 0;
}

.news-main-grid {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 3rem;
	align-items: start;
}

.news-col-title {
	font-size: 1.6rem;
	margin-bottom: 1.75rem;
}

.news-cards-list {
	display: flex;
	flex-direction: column;
	gap: 1.75rem;
}

.news-card-item {
	display: grid;
	grid-template-columns: 220px 1fr;
	gap: 1.5rem;
	background: #ffffff;
	border: 1px solid var(--color-border, #e2e8f0);
	border-radius: 10px;
	padding: 1.25rem;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
	margin-bottom: 0;
}

.news-thumb {
	display: block;
	height: 160px;
	border-radius: 8px;
	overflow: hidden;
}

.news-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.news-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.5rem;
}

.news-category {
	font-size: 0.7rem;
	font-weight: 700;
	color: var(--color-accent, #279735);
	background: rgba(39, 151, 53, 0.08);
	padding: 0.2rem 0.6rem;
	border-radius: 4px;
}

.news-date {
	font-size: 0.8rem;
	color: #94a3b8;
}

.news-title {
	font-size: 1.15rem;
	font-weight: 700;
	margin: 0 0 0.5rem;
}

.news-title a {
	color: #0f172a;
}

.news-title a:hover {
	color: var(--color-accent, #279735);
}

.news-excerpt {
	font-size: 0.9rem;
	color: var(--color-text-muted, #64748b);
	line-height: 1.6;
	margin-bottom: 0.75rem;
}

.news-readmore {
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--color-accent, #279735);
}

.news-empty {
	background: #ffffff;
	border: 1px dashed var(--color-border, #e2e8f0);
	border-radius: 10px;
	padding: 2.5rem 1.5rem;
	text-align: center;
	color: var(--color-text-muted, #64748b);
}

.careers-widget-box {
	background: #ffffff;
	border: 1px solid var(--color-border, #e2e8f0);
	border-top: 4px solid var(--color-primary, #8fff21);
	border-radius: 10px;
	padding: 1.75rem;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
}

.careers-title {
	font-size: 1.3rem;
	font-weight: 800;
	margin-bottom: 1rem;
}

.careers-intro {
	font-size: 0.88rem;
	color: var(--color-text-muted, #64748b);
	margin-bottom: 1.5rem;
}

.job-positions-list {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.job-item {
	padding-bottom: 1rem;
	border-bottom: 1px solid #f1f5f9;
}

.job-item:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.job-position {
	font-size: 0.98rem;
	font-weight: 700;
	color: #0f172a;
	margin-bottom: 0.35rem;
}

.job-meta,
.job-salary,
.job-deadline {
	font-size: 0.8rem;
	line-height: 1.6;
}

.job-meta {
	color: var(--color-text-muted, #64748b);
}

.job-salary {
	color: var(--color-accent, #279735);
	font-weight: 600;
}

.job-deadline {
	color: #94a3b8;
	font-size: 0.75rem;
}

.careers-cta {
	margin-top: 1.5rem;
}

/* Pagination */
.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 0.75rem;
	margin: 0 0.2rem;
	border: 1px solid var(--color-border, #e2e8f0);
	border-radius: 6px;
	background: #ffffff;
	color: #475569;
	font-weight: 600;
	text-decoration: none;
}

.page-numbers.current,
.page-numbers:hover {
	background: var(--color-accent, #279735);
	border-color: var(--color-accent, #279735);
	color: #ffffff;
}

/* --------------------------------------------------------------------------
   9. RFQ form (Fluent Forms) + fallbacks
   -------------------------------------------------------------------------- */
.baben-form-notice {
	background: #fffbeb;
	border: 1px solid #fcd34d;
	border-left: 4px solid #f59e0b;
	border-radius: 6px;
	padding: 1rem 1.25rem;
	margin-bottom: 1.5rem;
	font-size: 0.9rem;
	color: #78350f;
	line-height: 1.6;
}

.baben-form-fallback {
	text-align: center;
}

.baben-form-fallback .fallback-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem;
}

/* Match Fluent Forms controls to the theme. */
.baben-fluent-form-wrap .ff-el-input--label label {
	font-size: 0.88rem;
	font-weight: 700;
	color: #0f172a;
	margin-bottom: 0.4rem;
}

.baben-fluent-form-wrap .ff-el-form-control {
	width: 100%;
	font-family: inherit;
	font-size: 1rem;
	/* >=16px keeps iOS Safari from zooming on focus. */
	padding: 0.8rem 1rem;
	min-height: 48px;
	border: 1px solid var(--color-border, #e2e8f0);
	border-radius: 8px;
	background: #ffffff;
	color: var(--color-text, #1e293b);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.baben-fluent-form-wrap .ff-el-form-control:focus {
	border-color: var(--color-accent, #279735);
	box-shadow: 0 0 0 3px rgba(39, 151, 53, 0.12);
	outline: none;
}

.baben-fluent-form-wrap .ff-btn-submit {
	background-color: var(--color-primary, #8fff21);
	color: #17591F;
	font-family: inherit;
	font-size: 0.9rem;
	font-weight: 800;
	letter-spacing: 0.5px;
	padding: 0.9rem 2rem;
	min-height: 48px;
	border: 0;
	border-radius: 8px;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.baben-fluent-form-wrap .ff-btn-submit:hover {
	background-color: var(--color-primary-hover, #7ce612);
}

/* Theme-owned form controls (search, comments, …). */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="number"],
select,
textarea {
	font-size: 1rem;
	/* >=16px prevents the iOS focus zoom. */
	max-width: 100%;
}

/* --------------------------------------------------------------------------
   10. Footer
   -------------------------------------------------------------------------- */
.footer-col-title {
	color: #ffffff;
	font-size: 0.95rem;
	font-weight: 800;
	letter-spacing: 0.4px;
	margin-bottom: 0.9rem;
}

.footer-baben-links a,
.footer-baben-links span {
	display: inline-block;
	padding: 0.3rem 0;
	overflow-wrap: anywhere;
}

/* Back-to-top */
.back-to-top-btn {
	position: fixed;
	right: 1rem;
	bottom: 1rem;
	z-index: 900;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background-color: var(--color-accent, #279735);
	color: #ffffff;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

.back-to-top-btn.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* ---------- Tablet & below (<992px) ---------- */
@media (max-width: 991.98px) {

	.nav-container {
		height: 64px;
		gap: 1rem;
	}

	.menu-toggle {
		display: inline-flex;
		order: 3;
	}

	/* Collapsible panel */
	.main-menu-wrapper {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		margin-left: 0;
		padding: 0.5rem 1.5rem 1.5rem;
		background-color: #ffffff;
		border-bottom: 3px solid var(--color-primary, #8fff21);
		box-shadow: 0 14px 30px rgba(0, 0, 0, 0.14);
		max-height: calc(100vh - 64px);
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	.main-menu-wrapper.is-open {
		display: flex !important;
	}

	.nav-menu {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		width: 100%;
	}

	.nav-menu li {
		width: 100%;
	}

	.nav-menu a {
		display: flex;
		align-items: center;
		width: 100%;
		min-height: 48px;
		padding: 0.6rem 0;
		font-size: 0.95rem;
		letter-spacing: 0.3px;
		border-bottom: 1px solid #f1f5f9;
	}

	.nav-menu a::after {
		display: none;
	}

	/* Sub-menus expand inline instead of hovering. */
	.nav-menu .sub-menu {
		position: static;
		display: none;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border: 0;
		padding: 0 0 0 1rem;
		min-width: 0;
	}

	.nav-menu .menu-item-has-children.is-expanded>.sub-menu {
		display: block;
	}

	.header-right-actions {
		display: block;
		margin-top: 1.25rem;
	}

	.btn-header-rfq {
		display: block;
		width: 100%;
		text-align: center;
		padding: 0.95rem 1.25rem;
		font-size: 0.85rem;
	}

	/* Page hero */
	.page-hero-header {
		padding: 3rem 0;
	}

	.page-title {
		font-size: 2rem;
	}

	.page-subtitle {
		font-size: 0.98rem;
	}

	/* Stacked layouts */
	.contact-main-grid,
	.news-main-grid {
		grid-template-columns: 1fr;
		gap: 2.5rem;
	}

	.baben-contact-section {
		padding: 3rem 0 4rem;
	}

	.baben-news-section {
		padding: 3rem 0;
	}

	.process-steps-grid,
	.baben-commitment-section .process-steps-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 1.25rem;
	}

	.baben-cta-section {
		padding: 3rem 0;
	}
}

/* ---------- Large phone (<768px) ---------- */
@media (max-width: 767.98px) {

	.site-container {
		padding-left: 1rem;
		padding-right: 1rem;
	}

	/* Topbar: keep the tap-to-call, drop the long email. */
	.header-topbar {
		font-size: 0.78rem;
	}

	.topbar-inner {
		gap: 0.5rem;
		min-height: 38px;
	}

	.topbar-left {
		gap: 0.85rem;
	}

	.topbar-email {
		display: none;
	}

	.topbar-social-link {
		width: 30px;
		height: 30px;
	}

	.baben-brand-logo {
		font-size: 1.1rem;
	}

	/* News cards stack image over text. */
	.news-card-item {
		grid-template-columns: 1fr;
		gap: 1rem;
	}

	.news-thumb {
		height: 200px;
	}

	.process-steps-grid,
	.baben-commitment-section .process-steps-grid {
		grid-template-columns: 1fr;
	}

	.baben-commitment-section {
		padding: 3rem 0;
	}

	.careers-widget-box {
		padding: 1.5rem 1.25rem;
	}

	.baben-form-fallback .fallback-actions {
		flex-direction: column;
	}

	.baben-form-fallback .fallback-actions .btn {
		width: 100%;
	}

	.footer-baben-grid {
		text-align: left;
	}

	.back-to-top-btn {
		right: 0.75rem;
		bottom: 0.75rem;
	}
}

/* ---------- Small phone (<576px) ---------- */
@media (max-width: 575.98px) {

	.page-hero-header {
		padding: 2.5rem 0;
	}

	.page-title {
		font-size: 1.65rem;
	}

	.page-subtitle {
		font-size: 0.92rem;
	}

	.product-category-filters {
		gap: 0.5rem;
		margin-bottom: 2rem;
	}

	.btn-filter-tab {
		font-size: 0.72rem;
		padding: 0.6rem 0.9rem;
	}

	.contact-col-title,
	.news-col-title {
		font-size: 1.4rem;
	}

	.c-info-card {
		padding: 1rem;
	}

	.c-info-value {
		font-size: 0.98rem;
	}

	.news-thumb {
		height: 170px;
	}

	.news-title {
		font-size: 1.05rem;
	}

	.gmaps-box iframe {
		height: 240px;
	}
}

/* ---------- Accessibility ---------- */
@media (prefers-reduced-motion: reduce) {

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* Footer logo */
.footer-logo-img {
	max-height: 48px;
	width: auto;
	margin-bottom: 0.75rem;
}

/* --------------------------------------------------------------------------
   11. Header logo sizing (authoritative)
   The brand mark is a square, stacked lockup (icon over wordmark), so it needs
   more vertical room than a horizontal wordmark. Earlier rules pinned it to a
   rigid `height: 48px !important`, which rendered a square logo far too small
   and left it visually unbalanced against the menu. These rules cap the height
   and let the intrinsic aspect ratio drive the width.
   -------------------------------------------------------------------------- */
.nav-container {
	height: 80px;
}

.site-branding {
	display: inline-flex;
	align-items: center;
	max-height: none;
	height: 100%;
	flex-shrink: 0;
}

.custom-logo-link,
.site-branding .custom-logo-link {
	display: inline-flex;
	align-items: center;
	height: 100%;
	max-height: none !important;
	max-width: none !important;
}

.site-branding img,
.custom-logo,
.custom-logo-link img {
	height: auto !important;
	width: auto !important;
	max-height: 56px !important;
	max-width: 200px !important;
	object-fit: contain;
	display: block;
}

@media (max-width: 991.98px) {
	.nav-container {
		height: 68px;
	}

	.main-menu-wrapper {
		max-height: calc(100vh - 68px);
	}

	.site-branding img,
	.custom-logo,
	.custom-logo-link img {
		max-height: 48px !important;
		max-width: 160px !important;
	}
}

@media (max-width: 575.98px) {
	.nav-container {
		height: 62px;
	}

	.main-menu-wrapper {
		max-height: calc(100vh - 62px);
	}

	.site-branding img,
	.custom-logo,
	.custom-logo-link img {
		max-height: 44px !important;
		max-width: 140px !important;
	}
}

/* --------------------------------------------------------------------------
   12. Language switcher (top bar)
   -------------------------------------------------------------------------- */
.topbar-right {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	flex-shrink: 0;
}

.topbar-lang {
	display: flex;
	align-items: center;
}

.lang-switch-list {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	list-style: none;
	margin: 0;
	padding: 0.15rem;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 999px;
}

.lang-switch-item {
	display: flex;
}

.lang-switch-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	padding: 0.3rem 0.55rem;
	border-radius: 999px;
	color: rgba(255, 255, 255, 0.75);
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.5px;
	line-height: 1.4;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.lang-switch-link:hover,
.lang-switch-link:focus-visible {
	background-color: rgba(255, 255, 255, 0.14);
	color: #ffffff;
}

.lang-switch-link.is-active {
	background-color: var(--color-primary, #8fff21);
	color: var(--color-accent-dark, #17591F);
	cursor: default;
}

.lang-switch-link.is-disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.topbar-lang--placeholder {
	opacity: 0.85;
}

/* When TranslatePress' own shortcode markup is used, keep it on-brand. */
.topbar-lang--plugin .trp-language-switcher {
	display: inline-block;
	min-width: 0;
}

.topbar-lang--plugin select,
.topbar-lang--plugin .trp-ls-shortcode-current-language {
	font-size: 0.75rem;
	font-weight: 700;
}

/* --------------------------------------------------------------------------
   13. Mobile overflow guards
   The page must never scroll sideways on a phone. Grids that declare a pixel
   minimum (product cards, news cards) would otherwise force the body wider than
   the viewport once the screen is narrower than that minimum.
   -------------------------------------------------------------------------- */
/* NOTE: deliberately no `overflow-x: hidden` on html/body — it turns the root
   into a scroll container and breaks `position: sticky` on the header in
   Chrome and Safari. The min-width guards below prevent the overflow instead. */

.products-grid,
.stats-grid,
.process-steps-grid,
.cert-badges-wrapper,
.contact-main-grid,
.news-main-grid,
.footer-baben-grid,
.about-grid {
	min-width: 0;
}

.products-grid>*,
.process-steps-grid>*,
.contact-main-grid>*,
.news-main-grid>*,
.about-grid>*,
.news-card-item>* {
	min-width: 0;
}

/* Media and embeds stay inside their column. */
img,
iframe,
video,
table {
	max-width: 100%;
}

@media (max-width: 991.98px) {

	/* Any grid still asking for a pixel minimum collapses to one column. */
	.products-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 767.98px) {

	/* Top bar: keep phone + language, drop the socials to save the row. */
	.topbar-socials {
		display: none;
	}

	.topbar-right {
		gap: 0.5rem;
	}

	.lang-switch-link {
		min-width: 32px;
		padding: 0.28rem 0.5rem;
		font-size: 0.7rem;
	}
}

/* --------------------------------------------------------------------------
   14. Fluent Forms — RFQ form skin
   Fluent Forms ships its own base styles; these override them so the embedded
   form matches the theme. Scoped to .baben-fluent-form-wrap so other forms on
   the site are left alone.
   -------------------------------------------------------------------------- */
.baben-fluent-form-wrap .frm-fluent-form {
	margin: 0;
}

.baben-fluent-form-wrap .ff-el-group {
	margin-bottom: 1.15rem;
}

.baben-fluent-form-wrap .ff-el-input--label label {
	display: inline-block;
	font-size: 0.88rem;
	font-weight: 700;
	color: #0f172a;
	margin-bottom: 0.4rem;
}

.baben-fluent-form-wrap .ff-el-is-required.asterisk-right label:after,
.baben-fluent-form-wrap .ff-el-is-required.asterisk-left label:before {
	color: #dc2626;
}

.baben-fluent-form-wrap textarea.ff-el-form-control {
	min-height: 120px;
	line-height: 1.6;
}

.baben-fluent-form-wrap select.ff-el-form-control {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.9rem center;
	padding-right: 2.5rem;
}

.baben-fluent-form-wrap .ff-el-form-control::placeholder {
	color: #94a3b8;
}

/* Submit button: full width on phones so it is an easy tap target. */
.baben-fluent-form-wrap .ff_submit_btn_wrapper,
.baben-fluent-form-wrap .ff-el-group.ff-text-left {
	margin-bottom: 0;
}

/* Validation + response messages */
.baben-fluent-form-wrap .error.text-danger,
.baben-fluent-form-wrap .ff-el-is-error .text-danger {
	font-size: 0.82rem;
	color: #dc2626;
	margin-top: 0.3rem;
}

.baben-fluent-form-wrap .ff-el-is-error .ff-el-form-control {
	border-color: #dc2626;
}

.baben-fluent-form-wrap .ff-message-success {
	background: #f0fdf4;
	border: 1px solid #86efac;
	border-left: 4px solid #16a34a;
	border-radius: 8px;
	padding: 1rem 1.25rem;
	color: #14532d;
	font-weight: 600;
}

@media (max-width: 767.98px) {

	/* Stack Fluent Forms' multi-column rows on phones. */
	.baben-fluent-form-wrap .ff-t-container {
		display: block;
	}

	.baben-fluent-form-wrap .ff-t-cell {
		width: 100%;
		padding-left: 0;
		padding-right: 0;
	}

	.baben-fluent-form-wrap .ff-btn-submit {
		display: block;
		width: 100%;
	}
}


/* ==========================================================================
   15. BỐ CỤC THEO DESIGN STITCH — TRANG CHỦ & FOOTER
   Khối này viết sau cùng nên thắng các khai báo trùng ở phần trên.
   ========================================================================== */

.site-content {
	display: block;
}

/* --------------------------------------------------------------------------
   15.1 Khối "Di sản" — 2 cột, gạch đầu dòng có icon, 2 ảnh lệch tầng
   -------------------------------------------------------------------------- */
.baben-about-section {
	background-color: #ffffff;
	padding: 5rem 0;
}

.about-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4rem;
	align-items: center;
}

.about-desc {
	font-size: 1rem;
	color: var(--color-text-muted, #64748b);
	line-height: 1.8;
	margin-bottom: 1.75rem;
}

.about-points {
	list-style: none;
	margin: 0 0 1.75rem;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.about-point-item {
	display: flex;
	align-items: flex-start;
	gap: 0.85rem;
	font-size: 0.92rem;
	color: #475569;
	line-height: 1.65;
}

.about-point-icon {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	margin-top: 0.1rem;
	border-radius: 6px;
	background: rgba(39, 151, 53, 0.1);
	color: var(--color-accent, #279735);
}

.about-point-icon svg {
	width: 14px;
	height: 14px;
}

/* Link mũi tên dùng lại nhiều nơi */
.link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.9rem;
	font-weight: 700;
	color: var(--color-accent, #279735);
	text-decoration: none;
}

.link-arrow:hover {
	color: var(--color-accent-dark, #17591F);
	gap: 0.6rem;
}

/* Hai ảnh lệch tầng */
.about-image-stack {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
	align-items: start;
}

.about-image-stack img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.about-img-1 {
	aspect-ratio: 4 / 3;
}

.about-img-2 {
	aspect-ratio: 3 / 4;
	margin-top: 2.5rem;
}

/* Khi chỉ có 1 ảnh thì cho tràn hết chiều ngang */
.about-image-stack img:only-child {
	grid-column: 1 / -1;
	margin-top: 0;
	aspect-ratio: 16 / 10;
}

/* --------------------------------------------------------------------------
   15.2 Sản phẩm — grid 3 cột, badge Best Seller, chip thông số
   -------------------------------------------------------------------------- */
.baben-products-section {
	background-color: var(--color-bg, #f8fafc);
	padding: 5rem 0;
}

.products-grid-3 {
	grid-template-columns: repeat(3, 1fr);
	gap: 1.75rem;
}

.section-footer {
	margin-top: 2.5rem;
}

.product-card {
	display: flex;
	flex-direction: column;
	background: #ffffff;
	border: 1px solid var(--color-border, #e2e8f0);
	border-radius: 10px;
	overflow: hidden;
	margin-bottom: 0;
	transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.product-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.09);
}

.product-thumb {
	position: relative;
	display: block;
	height: 220px;
	overflow: hidden;
	background: #f1f5f9;
}

.product-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.product-card:hover .product-thumb img {
	transform: scale(1.04);
}

.product-thumb-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: #cbd5e1;
}

.product-thumb-placeholder svg {
	width: 42px;
	height: 42px;
}

.product-badge-best {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	z-index: 2;
	background: var(--color-primary, #8fff21);
	color: var(--color-accent-dark, #17591F);
	font-size: 0.68rem;
	font-weight: 800;
	letter-spacing: 0.4px;
	padding: 0.3rem 0.6rem;
	border-radius: 4px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.product-body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 1.35rem;
}

.product-name {
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.4;
	margin: 0 0 0.5rem;
}

.product-name a {
	color: #0f172a;
	text-decoration: none;
}

.product-name a:hover {
	color: var(--color-accent, #279735);
}

.product-desc {
	font-size: 0.88rem;
	color: var(--color-text-muted, #64748b);
	line-height: 1.65;
	margin-bottom: 1rem;
}

/* Bảng thông số dạng chip 2 cột */
.product-spec-chips {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.5rem;
	margin-bottom: 1.25rem;
}

.spec-chip {
	background: #f8fafc;
	border: 1px solid #eef2f6;
	border-radius: 6px;
	padding: 0.5rem 0.65rem;
	min-width: 0;
}

/* Quy cách / Cung ứng thường dài hơn nên cho chiếm cả hàng */
.spec-chip:nth-child(n+3) {
	grid-column: 1 / -1;
}

.spec-chip-label {
	display: block;
	font-size: 0.66rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	color: #94a3b8;
	margin-bottom: 0.15rem;
}

.spec-chip-value {
	display: block;
	font-size: 0.8rem;
	font-weight: 600;
	color: #334155;
	overflow-wrap: anywhere;
}

.product-body .btn-product-outline {
	margin-top: auto;
}

/* Bản trong danh mục: mã SP + tình trạng */
.product-code {
	font-size: 0.82rem;
	font-weight: 600;
	color: #64748b;
	letter-spacing: 0.5px;
	margin: 0 0 1rem;
}

.product-code span {
	color: #334155;
}

.product-card-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	flex-wrap: wrap;
	margin-top: auto;
	padding-top: 1rem;
	border-top: 1px solid #f1f5f9;
}

.product-stock {
	display: inline-block;
	font-size: 0.76rem;
	font-weight: 700;
	padding: 0.35rem 0.7rem;
	border-radius: 4px;
}

.product-stock--con-hang {
	background: rgba(143, 255, 33, 0.22);
	color: var(--color-accent-dark, #17591F);
}

.product-stock--lien-he {
	background: #f1f5f9;
	color: #64748b;
}

/* --------------------------------------------------------------------------
   15.3 Chứng nhận — 4 icon hàng ngang + 2 ảnh lớn
   -------------------------------------------------------------------------- */
.baben-cert-section {
	background-color: #ffffff;
	padding: 5rem 0;
}

.cert-row {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.5rem;
	margin-bottom: 3rem;
}

.cert-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0.85rem;
}

.cert-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	color: var(--color-accent, #279735);
}

.cert-icon svg {
	width: 40px;
	height: 40px;
}

.cert-label {
	font-size: 0.85rem;
	font-weight: 600;
	color: #475569;
}

.cert-gallery {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.5rem;
}

.cert-gallery img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 10px;
}

/* --------------------------------------------------------------------------
   15.4 RFQ — 2 cột: card xanh đậm + form
   -------------------------------------------------------------------------- */
.baben-rfq-section {
	background-color: #eef8ef;
	padding: 5rem 0;
}

.rfq-grid {
	display: grid;
	grid-template-columns: 0.85fr 1.15fr;
	align-items: stretch;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.07);
}

.rfq-intro-card {
	background: linear-gradient(160deg, var(--color-accent, #279735) 0%, var(--color-accent-dark, #17591F) 100%);
	color: #ffffff;
	padding: 3rem 2.5rem;
}

.rfq-intro-card .rfq-title {
	color: #ffffff;
	font-size: 1.9rem;
	margin-bottom: 1rem;
}

.rfq-intro-card .rfq-subtitle {
	color: rgba(255, 255, 255, 0.82);
	font-size: 0.95rem;
	line-height: 1.7;
	margin-bottom: 2.25rem;
}

.rfq-contact-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.rfq-contact-list li {
	display: flex;
	align-items: center;
	gap: 0.9rem;
}

.rfq-contact-icon {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.12);
	color: var(--color-primary, #8fff21);
}

.rfq-contact-icon svg {
	width: 18px;
	height: 18px;
}

.rfq-contact-body {
	min-width: 0;
}

.rfq-contact-label {
	display: block;
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	color: rgba(255, 255, 255, 0.6);
	margin-bottom: 0.1rem;
}

.rfq-contact-body a {
	color: #ffffff;
	font-weight: 700;
	font-size: 0.98rem;
	overflow-wrap: anywhere;
}

.rfq-contact-body a:hover {
	color: var(--color-primary, #8fff21);
}

.rfq-form-card {
	background: #ffffff;
	padding: 3rem 2.5rem;
}

/* --------------------------------------------------------------------------
   15.5 Footer — 4 cột đánh số
   -------------------------------------------------------------------------- */
.site-footer-baben {
	background-color: var(--color-accent-dark, #17591F);
	color: rgba(255, 255, 255, 0.75);
	padding: 4rem 0 2rem;
}

.footer-baben-grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: 2.5rem;
	align-items: start !important;
	text-align: left;
	padding-bottom: 3rem;
}

.footer-baben-col {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	margin: 0;
	padding: 0;
}

.footer-col-num {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-size: 0.8rem;
	font-weight: 800;
	color: var(--color-primary, #8fff21);
	margin-top: 0;
	margin-bottom: 0.75rem;
	line-height: 1;
}

.footer-col-num::after {
	content: '';
	display: inline-block;
	width: 28px;
	height: 2px;
	background: var(--color-primary, #8fff21);
	opacity: 0.6;
}

.footer-col-title {
	color: #ffffff;
	font-size: 0.98rem;
	font-weight: 800;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	margin-top: 0;
	margin-bottom: 1rem;
	line-height: 1.3;
}


.footer-baben-links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.footer-baben-links a,
.footer-baben-links span {
	display: inline-block;
	font-size: 0.88rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.75);
	text-decoration: none;
	overflow-wrap: anywhere;
	padding: 0.1rem 0;
}

.footer-baben-links a:hover {
	color: var(--color-primary, #8fff21);
}

.footer-company-name {
	color: #ffffff;
	font-size: 0.95rem;
	font-weight: 700;
}

.footer-links-arrow a::before {
	content: '\203A';
	margin-right: 0.45rem;
	color: var(--color-primary, #8fff21);
}

.footer-cert-list span {
	color: rgba(255, 255, 255, 0.75);
}

.footer-social-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}

.footer-social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 8px;
	color: #ffffff;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.footer-social-link svg {
	width: 18px;
	height: 18px;
}

.footer-social-link:hover {
	background: var(--color-primary, #8fff21);
	border-color: var(--color-primary, #8fff21);
	color: var(--color-accent-dark, #17591F);
}

.footer-baben-bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	padding-top: 2rem;
	text-align: center;
}

.footer-brand-title {
	color: var(--color-primary, #8fff21);
	font-size: 1.15rem;
	font-weight: 800;
	margin-bottom: 0.5rem;
}

.footer-baben-bottom .footer-logo-link {
	display: inline-block;
	margin-bottom: 0.75rem;
}

.footer-copyright-text {
	font-size: 0.82rem;
	color: rgba(255, 255, 255, 0.6);
	margin: 0;
}

/* ==========================================================================
   15.6 RESPONSIVE cho bố cục mới
   ========================================================================== */

@media (max-width: 991.98px) {
	.baben-hero-section {
		padding: 4.5rem 0;
	}

	.hero-main-title {
		font-size: 2.25rem;
	}

	.baben-about-section,
	.baben-products-section,
	.baben-cert-section,
	.baben-rfq-section {
		padding: 3.5rem 0;
	}

	.about-grid {
		grid-template-columns: 1fr;
		gap: 2.5rem;
	}

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

	.cert-row {
		grid-template-columns: repeat(2, 1fr);
		gap: 2rem;
	}

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

	.rfq-intro-card,
	.rfq-form-card {
		padding: 2.5rem 2rem;
	}

	.footer-baben-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 2rem;
	}
}

@media (max-width: 767.98px) {
	.baben-hero-section {
		padding: 3.5rem 0;
	}

	.hero-main-title {
		font-size: 1.9rem;
	}

	.hero-subtext {
		font-size: 0.95rem;
	}

	.hero-actions .btn {
		width: 100%;
		text-align: center;
	}

	.products-grid-3 {
		grid-template-columns: 1fr;
	}

	.about-image-stack {
		gap: 0.75rem;
	}

	.about-img-2 {
		margin-top: 1.25rem;
	}

	.cert-gallery {
		grid-template-columns: 1fr;
	}

	.rfq-intro-card,
	.rfq-form-card {
		padding: 2rem 1.25rem;
	}

	.rfq-intro-card .rfq-title {
		font-size: 1.5rem;
	}

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

	.site-footer-baben {
		padding: 3rem 0 1.5rem;
	}
}

@media (max-width: 575.98px) {
	.hero-main-title {
		font-size: 1.7rem;
	}

	.hero-badge {
		font-size: 0.66rem;
	}

	.cert-row {
		gap: 1.5rem;
	}

	.cert-icon {
		width: 48px;
		height: 48px;
	}

	.cert-icon svg {
		width: 32px;
		height: 32px;
	}

	.cert-label {
		font-size: 0.78rem;
	}

	.product-spec-chips {
		grid-template-columns: 1fr;
	}

	.spec-chip:nth-child(n+3) {
		grid-column: auto;
	}
}


/* ==========================================================================
   16. TRANG SẢN PHẨM — DANH MỤC & CHI TIẾT
   ========================================================================== */

/* --------------------------------------------------------------------------
   16.2 Danh mục: sidebar + lưới
   -------------------------------------------------------------------------- */
.baben-catalog-section {
	background: var(--color-bg, #f8fafc);
	padding: 4rem 0 5rem;
}

.catalog-grid {
	display: grid;
	grid-template-columns: 250px 1fr;
	gap: 2.5rem;
	align-items: start;
}

.catalog-sidebar {
	min-width: 0;
}

.catalog-cat-box {
	background: #ffffff;
	border: 1px solid var(--color-border, #e2e8f0);
	border-radius: 10px;
	padding: 1.5rem 1.25rem;
	position: sticky;
	top: 100px;
}

.catalog-cat-title {
	font-size: 1rem;
	font-weight: 700;
	color: #0f172a;
	padding-bottom: 0.85rem;
	margin-bottom: 0.85rem;
	border-bottom: 1px solid var(--color-border, #e2e8f0);
}

.catalog-cat-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

.catalog-cat-list a {
	display: block;
	padding: 0.6rem 0.5rem;
	margin: 0 -0.5rem;
	border-radius: 6px;
	font-size: 0.92rem;
	color: #475569;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.catalog-cat-list a:hover {
	background: #f1f5f9;
	color: var(--color-accent, #279735);
}

.catalog-cat-list a.is-active {
	color: var(--color-accent, #279735);
	font-weight: 700;
}

.catalog-main {
	min-width: 0;
}

/* Phân trang */
.catalog-pagination {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-top: 3rem;
}

.catalog-pagination .page-numbers {
	margin: 0;
}

/* --------------------------------------------------------------------------
   16.3 Chi tiết sản phẩm
   -------------------------------------------------------------------------- */
.product-breadcrumb {
	background: #ffffff;
	border-bottom: 1px solid var(--color-border, #e2e8f0);
	padding: 1rem 0;
	font-size: 0.88rem;
}

.product-breadcrumb a {
	color: var(--color-text-muted, #64748b);
	text-decoration: none;
}

.product-breadcrumb a:hover {
	color: var(--color-accent, #279735);
}

.crumb-sep {
	margin: 0 0.5rem;
	color: #cbd5e1;
}

.crumb-current {
	color: var(--color-accent, #279735);
	font-weight: 600;
}

.product-single-section {
	background: #ffffff;
	padding: 3rem 0 4rem;
}

.product-single-grid {
	display: grid;
	grid-template-columns: 1fr 1.05fr;
	gap: 3.5rem;
	align-items: start;
}

/* Ảnh */
.product-media {
	min-width: 0;
}

.product-media-main {
	position: relative;
	border-radius: 12px;
	overflow: hidden;
	background: #f1f5f9;
	aspect-ratio: 4 / 3;
}

.product-media-main img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.product-media-badges {
	position: absolute;
	top: 1rem;
	left: 1rem;
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.product-badge-export {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	background: rgba(255, 255, 255, 0.92);
	color: #334155;
	border: 1px solid rgba(0, 0, 0, 0.08);
	font-size: 0.76rem;
	font-weight: 700;
	padding: 0.35rem 0.7rem;
	border-radius: 4px;
}

.product-media-thumbs {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
	margin-top: 1rem;
}

.product-media-thumb {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 0.35rem;
	aspect-ratio: 3 / 2;
	border-radius: 8px;
	overflow: hidden;
	background: #f1f5f9;
	border: 1px solid var(--color-border, #e2e8f0);
}

.product-media-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.product-media-video {
	color: #475569;
	text-decoration: none;
	font-size: 0.8rem;
	font-weight: 600;
	transition: border-color 0.2s ease, color 0.2s ease;
}

.product-media-video:hover {
	border-color: var(--color-accent, #279735);
	color: var(--color-accent, #279735);
}

.video-play-icon svg {
	width: 26px;
	height: 26px;
}

/* Thông tin */
.product-info {
	min-width: 0;
}

.product-single-title {
	font-size: 2.4rem;
	font-weight: 800;
	color: #0f172a;
	line-height: 1.2;
	margin-bottom: 1rem;
}

.product-single-desc {
	font-size: 1rem;
	line-height: 1.8;
	color: var(--color-text-muted, #64748b);
	padding-bottom: 1.75rem;
	margin-bottom: 1.75rem;
	border-bottom: 1px solid var(--color-border, #e2e8f0);
}

/* Lưới thông số 2×2 */
.product-spec-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
	margin-bottom: 2rem;
}

.spec-box {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	background: #ffffff;
	border: 1px solid var(--color-border, #e2e8f0);
	border-radius: 10px;
	padding: 1.1rem 1.25rem;
	min-width: 0;
}

.spec-box-head {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.spec-box-icon {
	display: inline-flex;
	color: var(--color-accent, #279735);
}

.spec-box-icon svg {
	width: 16px;
	height: 16px;
}

.spec-box-label {
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.7px;
	color: #94a3b8;
}

.spec-box-value {
	font-size: 1.3rem;
	font-weight: 700;
	color: #0f172a;
	line-height: 1.3;
	overflow-wrap: anywhere;
}

.spec-box-note {
	font-size: 0.78rem;
	color: #94a3b8;
}

/* Hộp yêu cầu báo giá */
.product-rfq-box {
	background: #f8fafc;
	border: 1px solid var(--color-border, #e2e8f0);
	border-radius: 12px;
	padding: 1.75rem;
}

.product-rfq-title {
	font-size: 1.25rem;
	font-weight: 700;
	color: #0f172a;
	margin-bottom: 0.5rem;
}

.product-rfq-desc {
	font-size: 0.9rem;
	line-height: 1.65;
	color: var(--color-text-muted, #64748b);
	margin-bottom: 1.25rem;
}

.product-rfq-fields {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
	margin-bottom: 1.25rem;
}

.form-field label {
	display: block;
	font-size: 0.85rem;
	font-weight: 600;
	color: #334155;
	margin-bottom: 0.4rem;
}

.form-field input {
	width: 100%;
	font-family: inherit;
	font-size: 1rem;
	/* >=16px để iOS không tự zoom khi focus */
	padding: 0.75rem 0.9rem;
	min-height: 46px;
	background: #ffffff;
	border: 1px solid var(--color-border, #e2e8f0);
	border-radius: 8px;
	color: var(--color-text, #1e293b);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-field input:focus {
	outline: none;
	border-color: var(--color-accent, #279735);
	box-shadow: 0 0 0 3px rgba(39, 151, 53, 0.12);
}

.product-rfq-box .btn-baben-primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
}

.btn-send-icon svg {
	width: 17px;
	height: 17px;
}

.product-longdesc {
	max-width: 820px;
	margin: 3rem auto 0;
	line-height: 1.8;
	color: #334155;
}

/* --------------------------------------------------------------------------
   16.4 Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
	.catalog-grid {
		grid-template-columns: 1fr;
		gap: 2rem;
	}

	/* Sidebar thành hàng chip cuộn ngang cho gọn màn nhỏ */
	.catalog-cat-box {
		position: static;
		padding: 1.25rem;
	}

	.catalog-cat-list {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 0.5rem;
	}

	.catalog-cat-list a {
		margin: 0;
		padding: 0.55rem 0.9rem;
		border: 1px solid var(--color-border, #e2e8f0);
		border-radius: 999px;
		font-size: 0.85rem;
	}

	.catalog-cat-list a.is-active {
		background: var(--color-accent, #279735);
		border-color: var(--color-accent, #279735);
		color: #ffffff;
	}

	.baben-catalog-section {
		padding: 2.5rem 0 3.5rem;
	}

	.product-single-grid {
		grid-template-columns: 1fr;
		gap: 2.5rem;
	}

	.product-single-title {
		font-size: 1.9rem;
	}
}

@media (max-width: 767.98px) {
	.catalog-intro {
		padding: 2.5rem 0;
	}

	.catalog-intro-text {
		font-size: 0.92rem;
	}

	.catalog-term-title {
		font-size: 1.6rem;
	}

	.product-single-section {
		padding: 2rem 0 3rem;
	}

	.product-single-title {
		font-size: 1.6rem;
	}

	.product-single-desc {
		font-size: 0.94rem;
	}

	.product-rfq-box {
		padding: 1.25rem;
	}

	.product-rfq-fields {
		grid-template-columns: 1fr;
	}

	.spec-box-value {
		font-size: 1.15rem;
	}

	.product-breadcrumb {
		font-size: 0.8rem;
	}
}

@media (max-width: 575.98px) {
	.product-spec-grid {
		grid-template-columns: 1fr;
	}

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


/* ==========================================================================
   17. DANH MỤC SẢN PHẨM — BẢN THEO MẪU MỚI
   Tiêu đề + sắp xếp, sidebar có số đếm và lọc tình trạng, nhãn tình trạng đè
   góc phải ảnh. Viết sau cùng nên thắng các khai báo ở mục 16.
   ========================================================================== */

.baben-catalog-section {
	background: var(--color-bg, #f8fafc);
	padding: 2.5rem 0 4rem;
}

.catalog-grid {
	grid-template-columns: 260px 1fr;
	gap: 2rem;
}

/* --------------------------------------------------------------------------
   17.1 Đầu cột nội dung: tiêu đề + sắp xếp
   -------------------------------------------------------------------------- */
.catalog-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem;
	flex-wrap: wrap;
	margin-bottom: 1.75rem;
}

.catalog-title {
	font-size: 2.1rem;
	font-weight: 800;
	color: #0f172a;
	margin: 0;
}

.catalog-sort {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	background: #ffffff;
	border: 1px solid var(--color-border, #e2e8f0);
	border-radius: 8px;
	padding: 0.35rem 0.75rem;
	min-height: 44px;
}

.catalog-sort-icon {
	display: inline-flex;
	color: #94a3b8;
}

.catalog-sort-icon svg {
	width: 16px;
	height: 16px;
}

.catalog-sort select {
	border: 0;
	background: transparent;
	font-family: inherit;
	font-size: 0.9rem;
	font-weight: 600;
	color: #334155;
	padding: 0.25rem 0.25rem;
	cursor: pointer;
	min-height: 36px;
}

.catalog-sort select:focus {
	outline: none;
}

/* Nút submit chỉ dành cho trường hợp không có JS; JS sẽ ẩn đi và tự gửi form. */
.catalog-sort-submit,
.catalog-filter-submit {
	font-family: inherit;
	font-size: 0.82rem;
	font-weight: 700;
	cursor: pointer;
}

.catalog-sort-submit {
	background: transparent;
	border: 0;
	color: var(--color-accent, #279735);
	padding: 0.25rem 0.4rem;
}

.js-enabled .catalog-sort-submit,
.js-enabled .catalog-filter-submit {
	display: none;
}

/* --------------------------------------------------------------------------
   17.2 Sidebar
   -------------------------------------------------------------------------- */
.catalog-cat-box {
	padding: 1.5rem 1.35rem;
	border-radius: 12px;
}

.catalog-cat-title {
	font-size: 1.15rem;
	font-weight: 800;
	color: var(--color-accent, #279735);
}

.catalog-cat-list a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.6rem 0.75rem;
	margin: 0 -0.25rem;
	border-radius: 6px;
	font-size: 0.92rem;
}

.catalog-cat-list a.is-active {
	background: rgba(143, 255, 33, 0.18);
	color: var(--color-accent, #279735);
	font-weight: 700;
}

.cat-count {
	flex-shrink: 0;
	font-size: 0.76rem;
	font-weight: 700;
	color: #94a3b8;
	background: #f1f5f9;
	padding: 0.1rem 0.45rem;
	border-radius: 4px;
}

.catalog-cat-list a.is-active .cat-count {
	background: rgba(39, 151, 53, 0.12);
	color: var(--color-accent, #279735);
}

/* Lọc theo tình trạng */
.catalog-filter-form {
	margin-top: 1.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--color-border, #e2e8f0);
}

.catalog-filter-title {
	font-size: 0.72rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	color: #94a3b8;
	margin-bottom: 0.85rem;
}

.catalog-filter-list {
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.filter-check {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-size: 0.9rem;
	color: #475569;
	cursor: pointer;
	min-height: 28px;
}

.filter-check input[type="checkbox"] {
	width: 18px;
	height: 18px;
	accent-color: var(--color-accent, #279735);
	cursor: pointer;
	flex-shrink: 0;
	margin: 0;
}

/* --------------------------------------------------------------------------
   17.3 Thẻ sản phẩm bản danh mục
   -------------------------------------------------------------------------- */
.product-card--catalog .product-thumb {
	height: 200px;
}

/* Nhãn tình trạng: đè góc phải ảnh, chữ in hoa (theo mẫu) */
.product-thumb .product-stock {
	position: absolute;
	top: 0.65rem;
	right: 0.65rem;
	z-index: 2;
	font-size: 0.66rem;
	font-weight: 800;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	padding: 0.3rem 0.6rem;
	border-radius: 4px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.product-thumb .product-stock--con-hang {
	background: var(--color-accent, #279735);
	color: #ffffff;
}

.product-thumb .product-stock--sap-ve {
	background: #64748b;
	color: #ffffff;
}

.product-thumb .product-stock--lien-he {
	background: #ffffff;
	color: #475569;
}

.product-card--catalog .product-body {
	padding: 1.15rem 1.25rem 1.25rem;
}

.product-card--catalog .product-code {
	font-size: 0.74rem;
	font-weight: 600;
	color: #94a3b8;
	letter-spacing: 0.4px;
	margin: 0 0 0.35rem;
}

.product-card--catalog .product-name {
	font-size: 1.08rem;
	font-weight: 800;
	margin-bottom: 0.5rem;
}

/* Mô tả gói gọn 2 dòng để các thẻ cao bằng nhau */
.product-card--catalog .product-desc {
	font-size: 0.85rem;
	line-height: 1.6;
	margin-bottom: 1.1rem;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.product-card--catalog .product-card-footer {
	border-top: 0;
	padding-top: 0;
}

.product-quote-link {
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--color-accent, #279735);
	text-decoration: none;
}

.product-quote-link:hover {
	text-decoration: underline;
}

.btn-detail {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.82rem;
	padding: 0.5rem 0.9rem;
	border-radius: 6px;
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   17.4 Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
	.catalog-grid {
		grid-template-columns: 1fr;
	}

	.catalog-header {
		margin-bottom: 1.25rem;
	}

	.catalog-title {
		font-size: 1.7rem;
	}

	/* Danh mục thành hàng chip; số đếm ẩn đi cho gọn */
	.catalog-cat-list a {
		justify-content: center;
		margin: 0;
	}

	.catalog-cat-list .cat-count {
		display: none;
	}

	.catalog-filter-list {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 1rem;
	}
}

@media (max-width: 767.98px) {
	.baben-catalog-section {
		padding: 1.5rem 0 3rem;
	}

	.catalog-header {
		flex-direction: column;
		align-items: stretch;
		gap: 0.85rem;
	}

	.catalog-title {
		font-size: 1.5rem;
	}

	.catalog-sort {
		justify-content: space-between;
	}

	.catalog-sort select {
		flex: 1;
	}

	.product-card--catalog .product-thumb {
		height: 190px;
	}

	.product-card--catalog .product-card-footer {
		flex-direction: column;
		align-items: stretch;
		gap: 0.65rem;
	}

	.product-quote-link {
		text-align: center;
	}

	.btn-detail {
		justify-content: center;
	}
}

/* Trang chi tiết dùng lại .product-stock nhưng nằm trong hàng badge riêng,
   không đè góc ảnh — trả lại vị trí tĩnh cho nó. */
.product-media-badges .product-stock {
	position: static;
	box-shadow: none;
	font-size: 0.76rem;
	padding: 0.35rem 0.7rem;
}

.product-media-badges .product-stock--con-hang {
	background: var(--color-accent, #279735);
	color: #ffffff;
}

/* Thông báo chưa có nhóm sản phẩm (chỉ quản trị viên thấy) */
.catalog-cat-empty {
	margin: 0.75rem 0 0;
	font-size: 0.82rem;
	line-height: 1.6;
	color: #78350f;
	background: #fffbeb;
	border: 1px solid #fcd34d;
	border-radius: 6px;
	padding: 0.75rem 0.85rem;
}

.catalog-cat-empty a {
	color: var(--color-accent, #279735);
	font-weight: 700;
}


/* ==========================================================================
   18. TRANG TIN TỨC & HOẠT ĐỘNG
   ========================================================================== */

/* Banner đầu trang dùng chung cho các trang có ảnh nền */
.page-hero-banner {
	position: relative;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	padding: 5rem 0;
	color: #ffffff;
	text-align: center;
}

.page-banner-title {
	color: #ffffff;
	font-size: 2.6rem;
	font-weight: 800;
	line-height: 1.2;
	margin-bottom: 0.85rem;
}

.page-banner-subtitle {
	color: rgba(255, 255, 255, 0.85);
	font-size: 1rem;
	line-height: 1.7;
	max-width: 640px;
	margin: 0 auto;
}

.baben-news-section {
	background: var(--color-bg, #f8fafc);
	padding: 3.5rem 0 4.5rem;
}

.news-main-grid {
	display: grid;
	grid-template-columns: 1fr 320px;
	gap: 2.5rem;
	align-items: start;
}

.news-list-col {
	min-width: 0;
}

/* Tiêu đề khối */
.news-block-title {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 1.25rem;
	font-weight: 800;
	color: var(--color-accent, #279735);
	margin-bottom: 1.25rem;
}

.news-block-icon {
	display: inline-flex;
	color: var(--color-primary, #8fff21);
}

.news-block-icon svg {
	width: 20px;
	height: 20px;
}

.news-block-title--underline {
	padding-bottom: 0.85rem;
	border-bottom: 1px solid var(--color-border, #e2e8f0);
	margin-top: 2.5rem;
}

/* Tin nổi bật: ảnh trái, nội dung phải */
.news-featured-card {
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	gap: 0;
	background: #ffffff;
	border: 1px solid var(--color-border, #e2e8f0);
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
	margin-bottom: 0;
}

.news-featured-thumb {
	position: relative;
	display: block;
	min-height: 240px;
	background: #f1f5f9;
}

.news-featured-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.news-featured-body {
	padding: 1.75rem;
	display: flex;
	flex-direction: column;
}

.news-featured-title {
	font-size: 1.35rem;
	font-weight: 800;
	line-height: 1.35;
	margin: 0.6rem 0 0.75rem;
}

.news-featured-title a {
	color: #0f172a;
	text-decoration: none;
}

.news-featured-title a:hover {
	color: var(--color-accent, #279735);
}

/* Nhãn chuyên mục đè lên ảnh */
.news-category-badge {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	z-index: 2;
	background: var(--color-accent, #279735);
	color: #ffffff;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	padding: 0.3rem 0.6rem;
	border-radius: 4px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* Ngày đăng */
.news-date {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.8rem;
	color: #94a3b8;
}

.news-date-icon {
	display: inline-flex;
}

.news-date-icon svg {
	width: 14px;
	height: 14px;
}

/* Lưới tin mới 2 cột */
.news-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.5rem;
	margin-top: 1.5rem;
}

.news-card {
	display: flex;
	flex-direction: column;
	background: #ffffff;
	border: 1px solid var(--color-border, #e2e8f0);
	border-radius: 10px;
	overflow: hidden;
	margin-bottom: 0;
	transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.news-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}

.news-card-thumb {
	position: relative;
	display: block;
	height: 175px;
	background: #f1f5f9;
}

.news-card-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.news-card-body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 1.25rem;
}

.news-card-title {
	font-size: 1.02rem;
	font-weight: 800;
	line-height: 1.45;
	margin: 0.5rem 0 0.6rem;
}

.news-card-title a {
	color: #0f172a;
	text-decoration: none;
}

.news-card-title a:hover {
	color: var(--color-accent, #279735);
}

.news-excerpt {
	font-size: 0.88rem;
	line-height: 1.65;
	color: var(--color-text-muted, #64748b);
	margin-bottom: 0.85rem;
}

/* --------------------------------------------------------------------------
   18.1 Sidebar tin tức
   -------------------------------------------------------------------------- */
.news-sidebar {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	min-width: 0;
}

.news-widget {
	background: #ffffff;
	border: 1px solid var(--color-border, #e2e8f0);
	border-radius: 10px;
	padding: 1.5rem 1.35rem;
}

.news-widget-title {
	font-size: 1.15rem;
	font-weight: 800;
	color: var(--color-accent, #279735);
	padding-bottom: 0.85rem;
	margin-bottom: 0.5rem;
	border-bottom: 1px solid var(--color-border, #e2e8f0);
}

.news-cat-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

.news-cat-list a {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.6rem 0.4rem;
	margin: 0 -0.4rem;
	border-radius: 6px;
	font-size: 0.9rem;
	color: #475569;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.news-cat-list a:hover {
	background: #f8fafc;
	color: var(--color-accent, #279735);
}

.news-cat-icon {
	display: inline-flex;
	flex-shrink: 0;
	color: #94a3b8;
}

.news-cat-icon svg {
	width: 16px;
	height: 16px;
}

.news-cat-name {
	flex: 1;
	min-width: 0;
}

/* Đăng ký bản tin */
.newsletter-widget {
	background: linear-gradient(150deg, var(--color-accent, #279735) 0%, var(--color-accent-dark, #17591F) 100%);
	border-color: transparent;
	color: #ffffff;
}

.newsletter-title {
	color: #ffffff;
	font-size: 1.15rem;
	font-weight: 800;
	margin-bottom: 0.5rem;
}

.newsletter-desc {
	font-size: 0.86rem;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.82);
	margin-bottom: 1.1rem;
}

.newsletter-widget--setup {
	background: #fffbeb;
	border: 1px solid #fcd34d;
	border-left: 4px solid #f59e0b;
}

.newsletter-widget--setup .newsletter-title {
	color: #78350f;
}

.newsletter-widget--setup .newsletter-desc {
	color: #78350f;
	margin-bottom: 0;
}

/* Form đăng ký trên nền xanh */
.newsletter-form-wrap .ff-el-form-control {
	background: rgba(255, 255, 255, 0.95);
	border-color: transparent;
	min-height: 44px;
}

.newsletter-form-wrap .ff-el-input--label label {
	color: #ffffff;
}

.newsletter-form-wrap .ff-btn-submit {
	width: 100%;
	background: var(--color-primary, #8fff21);
	color: var(--color-accent-dark, #17591F);
}

/* --------------------------------------------------------------------------
   18.2 Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
	.page-hero-banner {
		padding: 3.5rem 0;
	}

	.page-banner-title {
		font-size: 2rem;
	}

	.news-main-grid {
		grid-template-columns: 1fr;
		gap: 2rem;
	}

	.baben-news-section {
		padding: 2.5rem 0 3.5rem;
	}
}

@media (max-width: 767.98px) {
	.page-hero-banner {
		padding: 2.75rem 0;
	}

	.page-banner-title {
		font-size: 1.65rem;
	}

	.page-banner-subtitle {
		font-size: 0.92rem;
	}

	.news-featured-card {
		grid-template-columns: 1fr;
	}

	.news-featured-thumb {
		min-height: 200px;
	}

	.news-featured-body {
		padding: 1.25rem;
	}

	.news-featured-title {
		font-size: 1.15rem;
	}

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

	.news-block-title--underline {
		margin-top: 2rem;
	}
}


/* ==========================================================================
   19. SECTION BÁO GIÁ (RFQ) TRANG CHỦ — BẢN THEO MẪU MỚI
   Card nổi trên ảnh nền, panel trái xanh đậm, nút gửi căn phải.
   ========================================================================== */

.baben-rfq-section {
	position: relative;
	background-color: #eef8ef;
	padding: 5rem 0;
}

/* Khi có ảnh nền */
.baben-rfq-section.has-bg {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.rfq-bg-overlay {
	position: absolute;
	inset: 0;
	background: rgba(248, 250, 252, 0.82);
	backdrop-filter: blur(3px);
	z-index: 1;
}

.baben-rfq-section .site-container {
	position: relative;
	z-index: 2;
}

.rfq-grid {
	display: grid;
	grid-template-columns: 0.8fr 1.2fr;
	align-items: stretch;
	border-radius: 4px;
	overflow: hidden;
	box-shadow: 0 18px 44px rgba(23, 89, 31, 0.18);
}

.rfq-intro-card {
	background: var(--color-accent, #279735);
	color: #ffffff;
	padding: 3rem 2.5rem;
	display: flex;
	flex-direction: column;
}

.rfq-eyebrow {
	display: block;
	font-size: 0.7rem;
	font-weight: 800;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: var(--color-primary, #8fff21);
	margin-bottom: 1rem;
}

.rfq-intro-card .rfq-title {
	color: #ffffff;
	font-size: 2.1rem;
	font-weight: 800;
	line-height: 1.25;
	margin-bottom: 1rem;
}

.rfq-intro-card .rfq-subtitle {
	color: rgba(255, 255, 255, 0.8);
	font-size: 0.92rem;
	line-height: 1.75;
	margin-bottom: 2.5rem;
}

.rfq-contact-list {
	margin-top: auto;
	gap: 1.5rem;
}

.rfq-contact-list li {
	align-items: flex-start;
	gap: 0.85rem;
}

.rfq-contact-icon {
	width: 34px;
	height: 34px;
	background: transparent;
	border: 1px solid rgba(143, 255, 33, 0.4);
	border-radius: 6px;
}

.rfq-contact-label {
	font-size: 0.64rem;
	font-weight: 800;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--color-primary, #8fff21);
	margin-bottom: 0.2rem;
}

.rfq-contact-value {
	display: block;
	font-size: 1.15rem;
	font-weight: 800;
	color: #ffffff;
	line-height: 1.35;
}

.rfq-form-card {
	background: #ffffff;
	padding: 2.75rem 2.5rem;
}

/* --------------------------------------------------------------------------
   19.1 Form Fluent Forms trong khối này
   -------------------------------------------------------------------------- */
.rfq-form-card .ff-el-group {
	margin-bottom: 1.1rem;
}

.rfq-form-card .ff-el-form-control {
	background: #ffffff;
	border-color: #cbd5e1;
	border-radius: 4px;
}

/* Nút gửi căn phải theo mẫu, dùng xanh đậm cho hợp nền trắng */
.rfq-form-card .ff_submit_btn_wrapper,
.rfq-form-card .ff-el-group.ff-text-left,
.rfq-form-card .ff-el-group:last-child {
	text-align: right;
}

.rfq-form-card .ff-btn-submit {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	width: auto;
	background: var(--color-accent, #279735);
	color: #ffffff;
	border-radius: 4px;
	padding: 0.85rem 1.75rem;
}

.rfq-form-card .ff-btn-submit:hover {
	background: var(--color-accent-dark, #17591F);
}

/* --------------------------------------------------------------------------
   19.2 Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
	.baben-rfq-section {
		padding: 3.5rem 0;
	}

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

	.rfq-intro-card,
	.rfq-form-card {
		padding: 2.5rem 2rem;
	}

	.rfq-intro-card .rfq-title {
		font-size: 1.8rem;
	}

	.rfq-contact-list {
		margin-top: 0;
	}
}

@media (max-width: 767.98px) {

	.rfq-intro-card,
	.rfq-form-card {
		padding: 1.75rem 1.25rem;
	}

	.rfq-intro-card .rfq-title {
		font-size: 1.5rem;
	}

	.rfq-intro-card .rfq-subtitle {
		margin-bottom: 1.75rem;
	}

	.rfq-contact-value {
		font-size: 1.02rem;
	}

	/* Trên điện thoại nút full width dễ bấm hơn là căn phải */
	.rfq-form-card .ff_submit_btn_wrapper,
	.rfq-form-card .ff-el-group.ff-text-left,
	.rfq-form-card .ff-el-group:last-child {
		text-align: left;
	}

	.rfq-form-card .ff-btn-submit {
		display: flex;
		width: 100%;
		justify-content: center;
	}
}

/* ==========================================================================
   20. TƯƠNG PHẢN CHỮ NHỎ TRÊN NỀN SÁNG
   Màu nhấn #279735 chỉ đạt 3.77:1 trên nền trắng — đủ cho tiêu đề lớn (ngưỡng
   3:1) nhưng KHÔNG đủ cho chữ nhỏ (ngưỡng WCAG AA là 4.5:1). Các selector dưới
   đây là chữ cỡ nhỏ nên dùng sắc đậm hơn cùng tông (#17591F ≈ 6.6:1).
   Nền tối (topbar, footer, card xanh) giữ nguyên vì chữ ở đó là trắng/lime.
   ========================================================================== */

.link-arrow,
.product-quote-link,
.news-readmore,
.catalog-eyebrow,
.crumb-current,
.product-breadcrumb a:hover,
.news-cat-list a:hover,
.catalog-cat-list a:hover,
.catalog-cat-list a.is-active,
.catalog-cat-list a.is-active .cat-count,
.catalog-sort-submit,
.c-info-body h4,
.c-info-value a:hover,
.news-title a:hover,
.news-card-title a:hover,
.news-featured-title a:hover,
.product-name a:hover,
.spec-box-icon,
.about-point-icon,
.career-hr-body a,
.news-empty a,
.catalog-cat-empty a,
.footer-baben-links a:hover {
	color: var(--color-accent-dark, #17591F);
}

.link-arrow:hover,
.product-quote-link:hover,
.news-readmore:hover {
	color: #0f3d14;
}

/* Nút viền: chữ và viền đậm hơn khi hover cho rõ */
.btn-product-outline:hover {
	border-color: var(--color-accent-dark, #17591F);
	color: var(--color-accent-dark, #17591F);
}

/* Ô nhập đang focus: viền đậm để nhìn rõ trên nền trắng */
.form-field input:focus,
.baben-fluent-form-wrap .ff-el-form-control:focus {
	border-color: var(--color-accent-dark, #17591F);
	box-shadow: 0 0 0 3px rgba(39, 151, 53, 0.18);
}

/* Mã SP ở trang chi tiết */
.product-single-code {
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.5px;
	color: #94a3b8;
	margin: 0 0 0.85rem;
}

.product-single-code span {
	color: #334155;
}

/* Hết hàng: nhãn đỏ nhạt cho phân biệt rõ với Sắp về */
.product-thumb .product-stock--het-hang {
	background: #dc2626;
	color: #ffffff;
}

.product-media-badges .product-stock--het-hang {
	background: #dc2626;
	color: #ffffff;
}

/* ==========================================================================
   21. KHỐI TIN TỨC TRANG CHỦ
   Dùng lại .news-card của trang Tin Tức, chỉ đổi số cột và nền section.
   ========================================================================== */

.baben-home-news-section {
	background: var(--color-bg, #f8fafc);
	padding: 5rem 0;
}

.news-grid-3 {
	grid-template-columns: repeat(3, 1fr);
	margin-top: 0;
}

@media (max-width: 991.98px) {
	.baben-home-news-section { padding: 3.5rem 0; }

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

@media (max-width: 767.98px) {
	.news-grid-3 { grid-template-columns: 1fr; }
}