@charset "UTF-8";
/* ==============================================================
   BIO MINH LONG - HOME PAGE STYLES
   Chỉ tải khi truy cập Trang Chủ (Front Page / Home)
   ============================================================== */

/* ==============================================================
   1. KẾ THỪA THUỘC TÍNH DÙNG CHUNG CHO CÁC SECTION TRANG CHỦ
   ============================================================== */
.hero-section-01,
.section-01,
.section-02,
.section-03,
.section-04,
.section-05,
.section-06 {
	font-family: var(--bml-font);
}

/* Tiêu đề chính các section */
.hero-section-01 h3,
.section.section-01 .row:first-of-type h3,
.section.section-02 .row:first-of-type h2,
.section.section-03 h3,
.section.section-04 .row:first-of-type h3,
.section.section-05 h3 {}

/* Hover nổi card & zoom ảnh dùng chung */
.section.section-01 .banner:hover,
.section.section-02 .tab-panels .col.medium-4:hover>.col-inner,
.section.section-04 .row.row-small .col-inner:hover {}

.section.section-01 .banner:hover .banner-bg img,
.section.section-02 .tab-panels .col.medium-4:hover .box-image img,
.section.section-04 .row.row-small .col-inner:hover .banner .banner-bg img {}

/* ==============================================================
   2. HERO SECTION STYLING (.hero-section-01)
   ============================================================== */
.hero-section-01 {
	position: relative !important;
	min-height: 560px !important;
	display: flex !important;
	align-items: center !important;
	overflow: hidden !important;
	padding: 0 !important;
	margin: 0 !important;
}

.hero-section-01 .section-bg {
	position: absolute !important;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;
}

.hero-section-01 .section-bg img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	object-position: center right !important;
}

.hero-section-01 .section-bg::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg,
			rgba(7, 40, 29, 0.96) 0%,
			rgba(7, 40, 29, 0.93) 26%,
			rgba(7, 40, 29, 0.82) 40%,
			rgba(7, 40, 29, 0.45) 52%,
			rgba(7, 40, 29, 0.10) 64%,
			transparent 75%);
	z-index: 1;
	pointer-events: none;
}

.hero-section-01 .section-content {
	position: relative !important;
	z-index: 2 !important;
	width: 100% !important;
	padding: 75px 0 85px !important;
}

.hero-section-01 .row {
	max-width: 1220px !important;
	margin: 0 auto !important;
	align-items: center !important;
}

.hero-section-01 h2.uppercase {
	font-family: var(--bml-font) !important;
	font-size: 13.5px !important;
	font-weight: 700 !important;
	color: var(--bml-lime) !important;
	text-transform: uppercase !important;
	letter-spacing: 2.5px !important;
	margin: 0 0 14px 0 !important;
	line-height: 1.4 !important;
	opacity: 0.95;
}

.hero-section-01 h3 {
	font-size: clamp(38px, 4.6vw, 62px) !important;
	line-height: 1.08 !important;
	color: #ffffff !important;
	letter-spacing: -1px !important;
	margin: 0 0 2px 0 !important;
	padding: 0 !important;
	text-shadow: 0 2px 14px rgba(0, 0, 0, 0.25);
}

.hero-section-01 p {
	font-family: var(--bml-font) !important;
	font-size: 19px !important;
	font-weight: 400 !important;
	color: rgba(255, 255, 255, 0.90) !important;
	margin-top: 20px !important;
	margin-bottom: 34px !important;
	line-height: 1.5 !important;
}

.hero-section-01 .row .row .col {
	max-width: 100% !important;
	flex-basis: 100% !important;
	padding: 0 !important;
}

.hero-section-01 .row .row .col-inner {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap !important;
	gap: 16px !important;
	align-items: center !important;
}

.hero-section-01 a.button {
	height: 52px !important;
	min-height: 52px !important;
	border-radius: var(--bml-radius-btn) !important;
	font-family: var(--bml-font) !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	text-transform: none !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0 24px 0 20px !important;
	/* margin: 0 !important; */
	box-shadow: var(--bml-shadow-btn) !important;
	transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
	cursor: pointer;
	text-decoration: none !important;
}

.hero-section-01 a.button i {
	display: none !important;
}

/* Nút 1 Hero */
.hero-section-01 a.button:first-of-type {
	background: rgba(9, 39, 28, 0.72) !important;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border: 1px solid rgba(255, 255, 255, 0.35) !important;
	color: #ffffff !important;
}

.hero-section-01 a.button:first-of-type::before {
	content: "01";
	font-size: 13px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.65);
	margin-right: 14px;
	padding-right: 14px;
	border-right: 1px solid rgba(255, 255, 255, 0.28);
	line-height: 1;
}

.hero-section-01 a.button:first-of-type::after {
	content: "↗";
	font-size: 18px;
	font-weight: 700;
	margin-left: 10px;
	color: #ffffff;
	display: inline-block;
	transition: transform 0.2s ease;
}

.hero-section-01 a.button:first-of-type:hover {
	background: rgba(14, 56, 42, 0.92) !important;
	border-color: rgba(255, 255, 255, 0.7) !important;
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25) !important;
}

.hero-section-01 a.button:first-of-type:hover::after {
	transform: translate(2px, -2px);
}

/* Nút 2 Hero */
.hero-section-01 a.button:nth-of-type(2) {
	background: var(--bml-lime-vibrant) !important;
	border: 1px solid var(--bml-lime-vibrant) !important;
	color: #0e3625 !important;
}

.hero-section-01 a.button:nth-of-type(2):before {
	content: "02";
	font-size: 13px;
	font-weight: 700;
	color: rgba(14, 54, 37, 0.55);
	margin-right: 14px;
	padding-right: 14px;
	border-right: 1px solid rgba(14, 54, 37, 0.22);
	line-height: 1;
}

.hero-section-01 a.button:nth-of-type(2)::after {
	content: "↗";
	font-size: 18px;
	font-weight: 700;
	margin-left: 10px;
	color: #0e3625;
	display: inline-block;
	transition: transform 0.2s ease;
}

.hero-section-01 a.button:nth-of-type(2):hover {
	background: #d4f572 !important;
	border-color: #d4f572 !important;
	transform: translateY(-2px);
	box-shadow: 0 8px 22px rgba(200, 234, 102, 0.4) !important;
}

.hero-section-01 a.button:nth-of-type(2):hover::after {
	transform: translate(2px, -2px);
}

@media (max-width: 849px) {
	.hero-section-01 {
		min-height: 480px !important;
	}

	.hero-section-01 .section-bg::after {
		background: linear-gradient(180deg,
				rgba(7, 40, 29, 0.95) 0%,
				rgba(7, 40, 29, 0.88) 60%,
				rgba(7, 40, 29, 0.75) 100%) !important;
	}

	.hero-section-01 .section-content {
		padding: 50px 20px 60px !important;
	}

	.hero-section-01 h3 {
		font-size: 34px !important;
	}

	.hero-section-01 p {
		font-size: 16px !important;
		margin-bottom: 24px !important;
	}

	.hero-section-01 .row .row .col-inner {
		flex-direction: column !important;
		align-items: stretch !important;
	}

	.hero-section-01 a.button {
		width: 100% !important;
	}
}

/* ==============================================================
   3. SECTION-01 (HAI LĨNH VỰC - MỘT CAM KẾT)
   ============================================================== */
.section.section-01 {
	padding-top: 55px !important;
	padding-bottom: 65px !important;
}

.section.section-01 .row:first-of-type {
	max-width: 1220px !important;
	margin: 0 auto 30px auto !important;
	display: flex !important;
	align-items: flex-start !important;
	justify-content: space-between !important;
}

.section.section-01 .row:first-of-type>.col:first-child {
	flex: 1 1 auto !important;
}

.section.section-01 .row:first-of-type>.col:first-child h3 {
	font-size: clamp(30px, 3.2vw, 42px) !important;
	color: var(--bml-dark) !important;
	line-height: 1.15 !important;
	letter-spacing: -0.6px !important;
	margin: 0 0 2px 0 !important;
	padding: 0 !important;
}

.section.section-01 .row:first-of-type>.col:last-child {
	display: flex !important;
	justify-content: flex-end !important;
	align-items: flex-start !important;
}

.section.section-01 .row:first-of-type>.col:last-child p {
	font-family: var(--bml-font) !important;
	font-size: 16px !important;
	font-weight: 500 !important;
	color: var(--bml-text-muted) !important;
	line-height: 1.5 !important;
	margin: 8px 0 0 0 !important;
	text-align: right !important;
	white-space: nowrap !important;
}

@media (max-width: 849px) {
	.section.section-01 .row:first-of-type {
		flex-direction: column !important;
		align-items: flex-start !important;
		margin-bottom: 24px !important;
	}

	.section.section-01 .row:first-of-type>.col:last-child {
		justify-content: flex-start !important;
	}

	.section.section-01 .row:first-of-type>.col:last-child p {
		text-align: left !important;
		margin-top: 10px !important;
		white-space: normal !important;
	}
}

.section.section-01 .row:nth-of-type(2),
.section.section-01 .row:last-of-type {
	max-width: 1220px !important;
	margin: 0 auto !important;
}

.section.section-01 .banner {
	border-radius: var(--bml-radius-card) !important;
	overflow: hidden !important;
	isolation: isolate !important;
	-webkit-mask-image: -webkit-radial-gradient(white, black) !important;
	mask-image: radial-gradient(white, black) !important;
	box-shadow: 0 8px 24px rgba(10, 45, 30, 0.08) !important;
	transition: transform 0.35s ease, box-shadow 0.35s ease !important;
	background: var(--bml-dark) !important;
	position: relative !important;
}

.section.section-01 .banner:hover {
	box-shadow: 0 16px 36px rgba(10, 45, 30, 0.16) !important;
}

.section.section-01 .banner .banner-inner {
	border-radius: var(--bml-radius-card) !important;
	overflow: hidden !important;
}

.section.section-01 .banner .banner-bg img {
	transition: transform 0.65s cubic-bezier(0.25, 1, 0.5, 1) !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
}

.section.section-01 .banner .overlay,
.section.section-01 .banner .banner-bg .overlay,
.section.section-01 .banner-bg .overlay,
.section.section-01 div[id*="banner-"] .overlay {
	background: linear-gradient(to top,
			rgba(7, 36, 28, 0.96) 0%,
			rgba(7, 36, 28, 0.88) 28%,
			rgba(7, 36, 28, 0.50) 52%,
			rgba(7, 36, 28, 0.12) 72%,
			transparent 100%) !important;
	opacity: 1 !important;
	z-index: 1 !important;
}

.section.section-01 .banner .banner-layers {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
}

.section.section-01 .banner .text-box,
.section.section-01 .banner .banner-layer,
.section.section-01 div[id*="text-box-"] {
	position: absolute !important;
	top: auto !important;
	bottom: 22px !important;
	left: 24px !important;
	right: 80px !important;
	width: calc(100% - 104px) !important;
	max-width: none !important;
	transform: none !important;
	margin: 0 !important;
	padding: 0 !important;
	z-index: 2 !important;
	text-align: left !important;
}

.section.section-01 .banner .text-box-content,
.section.section-01 .banner .text-inner {
	padding: 0 !important;
	margin: 0 !important;
}

.section.section-01 .banner .text-box h3 {
	font-family: var(--bml-font) !important;
	font-size: clamp(26px, 2.3vw, 32px) !important;
	font-weight: 800 !important;
	color: #ffffff !important;
	margin: 0 0 6px 0 !important;
	line-height: 1.15 !important;
	letter-spacing: -0.3px !important;
	text-transform: capitalize !important;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35) !important;
}

.section.section-01 .banner .text-box ul {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 0 !important;
}

.section.section-01 .banner .text-box ul li {
	display: inline-flex !important;
	align-items: center !important;
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	color: rgba(255, 255, 255, 0.90) !important;
	font-family: var(--bml-font) !important;
	font-size: 14.5px !important;
	font-weight: 500 !important;
	padding: 0 !important;
	margin: 0 !important;
	line-height: 1.4 !important;
	white-space: nowrap !important;
}

.section.section-01 .banner .text-box ul li:not(:last-child)::after {
	content: "•";
	color: rgba(255, 255, 255, 0.7);
	margin: 0 8px;
	font-size: 13px;
	font-weight: bold;
}

.section.section-01 .banner .text-box ul li::before,
.section.section-01 .banner .banner-inner::after {
	display: none !important;
}

.section.section-01 .banner::after {
	content: "↗" !important;
	position: absolute !important;
	right: 24px !important;
	bottom: 22px !important;
	width: 44px !important;
	height: 44px !important;
	border-radius: 50% !important;
	border: 1.5px solid rgba(255, 255, 255, 0.85) !important;
	color: #ffffff !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	font-size: 19px !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	background: rgba(0, 0, 0, 0.20) !important;
	backdrop-filter: blur(4px) !important;
	-webkit-backdrop-filter: blur(4px) !important;
	z-index: 10 !important;
	pointer-events: none !important;
	transition: all 0.3s ease !important;
	box-sizing: border-box !important;
}

.section.section-01 .banner:hover::after {
	background: #ffffff !important;
	color: var(--bml-dark) !important;
	border-color: #ffffff !important;
	transform: scale(1.08) !important;
}

@media (max-width: 849px) {
	.section.section-01 {
		padding-top: 45px !important;
		padding-bottom: 50px !important;
	}

	.section.section-01 .banner .text-box,
	.section.section-01 .banner .banner-layer,
	.section.section-01 div[id*="text-box-"] {
		bottom: 16px !important;
		left: 16px !important;
		right: 60px !important;
		width: calc(100% - 76px) !important;
	}

	.section.section-01 .banner .text-box h3 {
		font-size: 22px !important;
		margin-bottom: 4px !important;
	}

	.section.section-01 .banner .text-box ul li {
		font-size: 12.5px !important;
	}

	.section.section-01 .banner .text-box ul li:not(:last-child)::after {
		margin: 0 5px;
	}

	.section.section-01 .banner::after {
		right: 16px !important;
		bottom: 16px !important;
		width: 36px !important;
		height: 36px !important;
		font-size: 15px !important;
	}
}

/* ==============================================================
   4. SECTION-02 (TÌM ĐÚNG SẢN PHẨM THEO NHU CẦU)
   ============================================================== */
.section.section-02 {
	padding-top: 50px !important;
	padding-bottom: 75px !important;
}

.section.section-02 .row:first-of-type {
	max-width: 1220px !important;
	margin: 0 auto 12px auto !important;
	display: flex !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	justify-content: space-between !important;
	padding-left: 15px !important;
	padding-right: 15px !important;
}

.section.section-02 .row:first-of-type>.col:first-child {
	flex: 1 1 auto !important;
	max-width: none !important;
	width: auto !important;
	padding: 0 !important;
}

.section.section-02 .row:first-of-type>.col:first-child .col-inner {
	padding: 0 !important;
	margin: 0 !important;
}

.section.section-02 .row:first-of-type>.col:first-child h2 {
	font-size: clamp(24px, 2.6vw, 35px) !important;
	color: var(--bml-dark) !important;
	line-height: 1.2 !important;
	letter-spacing: -0.5px !important;
	margin: 0 !important;
	white-space: nowrap !important;
}

.section.section-02 .row:first-of-type>.col:last-child {
	flex: 0 0 auto !important;
	max-width: none !important;
	width: auto !important;
	padding: 0 !important;
	display: flex !important;
	justify-content: flex-end !important;
}

.section.section-02 .row:first-of-type>.col:last-child .col-inner {
	padding: 0 !important;
	margin: 0 !important;
}

.section.section-02 .row:first-of-type>.col:last-child ul {
	display: inline-flex !important;
	background: #eaeee3 !important;
	padding: 5px !important;
	border-radius: var(--bml-radius-pill) !important;
	list-style: none !important;
	margin: 0 !important;
	gap: 0 !important;
	box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

.section.section-02 .row:first-of-type>.col:last-child ul li {
	margin: 0 !important;
	padding: 0 !important;
	display: inline-block !important;
}

.section.section-02 .row:first-of-type>.col:last-child ul li a {
	display: inline-block !important;
	padding: 10px 32px !important;
	border-radius: 40px !important;
	font-family: var(--bml-font) !important;
	font-size: 15.5px !important;
	font-weight: 700 !important;
	color: var(--bml-dark) !important;
	text-decoration: none !important;
	transition: all 0.25s ease !important;
	line-height: 1.25 !important;
	text-transform: capitalize !important;
}

.section.section-02 .row:first-of-type>.col:last-child ul li a.active,
.section.section-02 .row:first-of-type>.col:last-child ul li a:hover {
	background-color: var(--bml-dark) !important;
	color: #ffffff !important;
	box-shadow: var(--bml-shadow-pill) !important;
}

.section.section-02 .row.thuy-san,
.section.section-02 .row.cay-trong {
	max-width: 1220px !important;
	margin: 0 auto !important;
	padding-left: 15px !important;
	padding-right: 15px !important;
}

.section.section-02 .row.thuy-san>.col,
.section.section-02 .row.cay-trong>.col {
	padding: 0 !important;
}

.section.section-02 .tabbed-content ul.nav {
	border-bottom: none !important;
	display: flex !important;
	justify-content: flex-end !important;
	align-items: center !important;
	gap: 10px !important;
	margin: 0 0 32px 0 !important;
	padding: 0 !important;
}

.section.section-02 .tabbed-content ul.nav li.tab {
	margin: 0 !important;
	border: none !important;
}

.section.section-02 .tabbed-content ul.nav li.tab a {
	padding: 8px 22px !important;
	border-radius: 30px !important;
	font-family: var(--bml-font) !important;
	font-size: 13.5px !important;
	font-weight: 600 !important;
	text-transform: capitalize !important;
	background: #edf1e6 !important;
	color: #234436 !important;
	border: none !important;
	transition: all 0.25s ease !important;
	line-height: 1.35 !important;
	letter-spacing: normal !important;
}

.section.section-02 .tabbed-content ul.nav li.tab a:hover,
.section.section-02 .tabbed-content ul.nav li.tab.active a {
	background: var(--bml-dark) !important;
	color: #ffffff !important;
	box-shadow: 0 3px 10px rgba(14, 56, 43, 0.18) !important;
}

.section.section-02 .tabbed-content ul.nav li.tab a::before,
.section.section-02 .tabbed-content ul.nav li.tab a::after,
.section.section-02 .tabbed-content ul.nav li.tab::before,
.section.section-02 .tabbed-content ul.nav li.tab::after,
.section.section-02 .tabbed-content ul.nav-line>li>a::before,
.section.section-02 .tabbed-content ul.nav-line>li.active>a::before {
	display: none !important;
	content: none !important;
	opacity: 0 !important;
	height: 0 !important;
	width: 0 !important;
}

.section.section-02 .gap-element {
	display: none !important;
}

/* Product Cards Grid */
.section.section-02 .tab-panels .row {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	gap: 24px !important;
	max-width: 1220px !important;
	margin: 0 auto !important;
	padding: 0 !important;
	justify-content: start !important;
	align-items: stretch !important;
}

.section.section-02 .tab-panels .row::before,
.section.section-02 .tab-panels .row::after {
	display: none !important;
	content: none !important;
}

.section.section-02 .tab-panels .col.medium-4 {
	width: 100% !important;
	max-width: 100% !important;
	flex: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

.section.section-02 .tab-panels .col.medium-4>.col-inner {
	background: #ffffff !important;
	border-radius: var(--bml-radius-card) !important;
	overflow: hidden !important;
	box-shadow: var(--bml-shadow-card) !important;
	border: 1px solid var(--bml-border-subtle) !important;
	transition: transform 0.35s ease, box-shadow 0.35s ease !important;
	display: flex !important;
	flex-direction: column !important;
	height: 100% !important;
	position: relative !important;
	padding: 0 !important;
}

.section.section-02 .tab-panels .col.medium-4:hover>.col-inner {
	box-shadow: 0 12px 28px rgba(10, 45, 30, 0.11) !important;
}

.section.section-02 .box {
	display: flex !important;
	flex-direction: column !important;
	flex: 1 1 auto !important;
	height: 100% !important;
	margin: 0 !important;
	position: relative !important;
}

.section.section-02 .box-image {
	width: 100% !important;
	height: 250px !important;
	overflow: hidden !important;
	background: #eaeee3 !important;
	border-radius: var(--bml-radius-card) var(--bml-radius-card) 0 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	flex: 0 0 250px !important;
}

.section.section-02 .box-image a {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
}

.section.section-02 .box-image img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	border-radius: var(--bml-radius-card) var(--bml-radius-card) 0 0 !important;
	transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.section.section-02 .box-text {
	padding: 18px 20px 20px 20px !important;
	text-align: left !important;
	position: static !important;
	background: transparent !important;
	display: flex !important;
	flex-direction: column !important;
	flex: 1 1 auto !important;
	justify-content: space-between !important;
}

.section.section-02 .box-text-inner,
.section.section-02 .box-text .text,
.section.section-02 .box-text,
.section.section-02 .box-text h4,
.section.section-02 .box-text * {
	color: var(--bml-dark) !important;
	text-align: left !important;
}

.section.section-02 .box-text-inner,
.section.section-02 .box-text .text {
	position: static !important;
	display: flex !important;
	flex-direction: column !important;
	flex: 1 1 auto !important;
	justify-content: space-between !important;
}

.section.section-02 .box-text h4 {
	font-family: var(--bml-font) !important;
	font-size: 16px !important;
	font-weight: 800 !important;
	line-height: 1.35 !important;
	margin: 0 0 14px 0 !important;
	letter-spacing: -0.2px !important;
	min-height: 44px !important;
	display: block !important;
}

.section.section-02 .tab-panels .col.medium-4>.col-inner::before {
	display: none !important;
	content: none !important;
}

.section.section-02 .box-text p:has(a),
.section.section-02 .box-text p:last-of-type,
.section.section-02 .box-text p:last-child {
	position: static !important;
	margin: auto 0 0 0 !important;
	padding: 6px 0 0 0 !important;
	line-height: 1.4 !important;
	display: block !important;
	z-index: 5 !important;
}

.section.section-02 .box-text p a,
.section.section-02 .box-text a {
	font-family: var(--bml-font) !important;
	font-size: 13.5px !important;
	font-weight: 700 !important;
	color: var(--bml-dark) !important;
	text-decoration: underline !important;
	text-underline-offset: 3px !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 4px !important;
	transition: color 0.2s ease !important;
}

.section.section-02 .box-text p a::after,
.section.section-02 .box-text a::after {
	content: "↗" !important;
	font-size: 14px !important;
	font-weight: 800 !important;
	text-decoration: none !important;
	display: inline-block !important;
	transition: transform 0.2s ease !important;
}

.section.section-02 .box-text p a:hover,
.section.section-02 .box-text a:hover {
	color: var(--bml-primary-light) !important;
}

.section.section-02 .box-text p a:hover::after,
.section.section-02 .box-text a:hover::after {
	transform: translate(2px, -2px) !important;
}

.section.section-02 .tab-panels .col.medium-4>.col-inner>.row,
.section.section-02 a.button {
	display: none !important;
}

@media (max-width: 991px) and (min-width: 550px) {
	.section.section-02 .tab-panels .row {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 18px !important;
	}
}

@media (max-width: 549px) {
	.section.section-02 .tab-panels .row {
		grid-template-columns: 1fr !important;
		gap: 16px !important;
	}
}

@media (max-width: 991px) {
	.section.section-02 .row:first-of-type {
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 16px !important;
	}

	.section.section-02 .row:first-of-type>.col:first-child h2 {
		white-space: normal !important;
	}

	.section.section-02 .row:first-of-type>.col:last-child {
		justify-content: flex-start !important;
		width: 100% !important;
	}

	.section.section-02 .tabbed-content ul.nav {
		justify-content: flex-start !important;
		flex-wrap: wrap !important;
		gap: 8px !important;
		margin-bottom: 24px !important;
	}

	.section.section-02 .box-image {
		height: 200px !important;
	}
}

/* ==============================================================
   5. TƯƠNG THÍCH CHO TRÌNH SOẠN THẢO FLATSOME UX BUILDER
   ============================================================== */
:is(body.ux-builder-iframe, html[ng-app="uxBuilder"], .uxb-iframe, body:has(app-tools)) .section.section-02 :is(.tab-panels, .tabbed-content .panel) .row {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	gap: 24px !important;
	max-width: 1220px !important;
	margin: 0 auto !important;
	padding: 0 !important;
	justify-content: start !important;
	align-items: stretch !important;
}

:is(body.ux-builder-iframe, html[ng-app="uxBuilder"], .uxb-iframe, body:has(app-tools)) .section.section-02 :is(.tab-panels, .tabbed-content .panel) .col {
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	flex: none !important;
	padding: 0 !important;
	margin: 0 !important;
	box-sizing: border-box !important;
}

:is(body.ux-builder-iframe, html[ng-app="uxBuilder"], .uxb-iframe, body:has(app-tools)) .section.section-02 :is(.tab-panels, .tabbed-content .panel) .col-inner {
	background: #ffffff !important;
	border-radius: var(--bml-radius-card) !important;
	overflow: hidden !important;
	box-shadow: var(--bml-shadow-card) !important;
	border: 1px solid var(--bml-border-subtle) !important;
	display: flex !important;
	flex-direction: column !important;
	height: 100% !important;
	position: relative !important;
	padding: 0 0 24px 0 !important;
	box-sizing: border-box !important;
}

:is(body.ux-builder-iframe, html[ng-app="uxBuilder"], body:has(app-tools)) .section.section-02 .tab-panels .box {
	display: flex !important;
	flex-direction: column !important;
	flex: 1 1 auto !important;
	height: 100% !important;
	margin: 0 !important;
	position: static !important;
}

:is(body.ux-builder-iframe, html[ng-app="uxBuilder"], body:has(app-tools)) .section.section-02 .tab-panels .box-image {
	width: 100% !important;
	height: 250px !important;
	overflow: hidden !important;
	background: #eaeee3 !important;
	border-radius: var(--bml-radius-card) var(--bml-radius-card) 0 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	flex: 0 0 250px !important;
}

:is(body.ux-builder-iframe, html[ng-app="uxBuilder"], body:has(app-tools)) .section.section-02 .tab-panels .box-image img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	border-radius: var(--bml-radius-card) var(--bml-radius-card) 0 0 !important;
}

:is(body.ux-builder-iframe, html[ng-app="uxBuilder"], body:has(app-tools)) .section.section-02 .tab-panels .box-text {
	padding: 18px 20px 0 20px !important;
	text-align: left !important;
	position: static !important;
	background: transparent !important;
}

:is(body.ux-builder-iframe, html[ng-app="uxBuilder"], body:has(app-tools)) .section.section-02 .tab-panels .box-text h4 {
	font-family: var(--bml-font) !important;
	font-size: 16px !important;
	font-weight: 800 !important;
	line-height: 1.35 !important;
	margin: 0 0 10px 0 !important;
	letter-spacing: -0.2px !important;
	min-height: 44px !important;
	display: block !important;
	color: var(--bml-dark) !important;
}

:is(body.ux-builder-iframe, html[ng-app="uxBuilder"], body:has(app-tools)) .section.section-02 .tab-panels .box-text :is(p:has(a), p:last-of-type, p:last-child) {
	position: static !important;
	left: auto !important;
	bottom: auto !important;
	top: auto !important;
	right: auto !important;
	margin: 12px 0 0 0 !important;
	padding: 0 !important;
	line-height: 1.4 !important;
	display: block !important;
	z-index: 5 !important;
}

:is(body.ux-builder-iframe, html[ng-app="uxBuilder"], .uxb-iframe, body:has(app-tools)) .section.section-02 :is(ul:has(a[href*="thuy-san"]), ul:has(a[href*="cay-trong"])) {
	display: inline-flex !important;
	background: #eaeee3 !important;
	padding: 5px !important;
	border-radius: var(--bml-radius-pill) !important;
	list-style: none !important;
	margin: 0 !important;
	gap: 0 !important;
}

:is(body.ux-builder-iframe, html[ng-app="uxBuilder"], .uxb-iframe, body:has(app-tools)) .section.section-02 :is(ul:has(a[href*="thuy-san"]), ul:has(a[href*="cay-trong"])) li {
	margin: 0 !important;
	padding: 0 !important;
	display: inline-block !important;
	list-style: none !important;
}

:is(body.ux-builder-iframe, html[ng-app="uxBuilder"], .uxb-iframe, body:has(app-tools)) .section.section-02 :is(ul:has(a[href*="thuy-san"]), ul:has(a[href*="cay-trong"])) li a {
	display: inline-block !important;
	padding: 10px 32px !important;
	border-radius: 40px !important;
	font-family: var(--bml-font) !important;
	font-size: 15.5px !important;
	font-weight: 700 !important;
	color: var(--bml-dark) !important;
	text-decoration: none !important;
	line-height: 1.25 !important;
	text-transform: capitalize !important;
}

:is(body.ux-builder-iframe, html[ng-app="uxBuilder"], .uxb-iframe, body:has(app-tools)) .section.section-02 :is(ul:has(a[href*="thuy-san"]), ul:has(a[href*="cay-trong"])) li a:is(.active, :hover) {
	background-color: var(--bml-dark) !important;
	color: #ffffff !important;
	box-shadow: var(--bml-shadow-pill) !important;
}

:is(body.ux-builder-iframe, html[ng-app="uxBuilder"], .uxb-iframe, body:has(app-tools)) .section.section-02 .tabbed-content :is(.nav, .nav-line, ul.nav) :is(li, li a, a):is(::before, ::after) {
	display: none !important;
	content: none !important;
	opacity: 0 !important;
	height: 0 !important;
	width: 0 !important;
}

/* ==============================================================
   6. SECTION 03 - BANNER ĐỒNG HÀNH LÂU DÀI
   ============================================================== */
.section.section-03 {
	position: relative !important;
	overflow: hidden !important;
	background-color: var(--bml-dark-banner) !important;
	padding: 0 !important;
}

.section.section-03 .section-bg {
	position: absolute !important;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100% !important;
	height: 100% !important;
	z-index: 1 !important;
}

.section.section-03 .section-bg img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	object-position: center left !important;
	display: block !important;
}

.section.section-03 .section-bg::after {
	content: '' !important;
	position: absolute !important;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100% !important;
	height: 100% !important;
	background: linear-gradient(to right,
			rgba(8, 56, 36, 0) 0%,
			rgba(8, 56, 36, 0) 38%,
			rgba(8, 56, 36, 0.45) 45%,
			rgba(8, 56, 36, 0.85) 52%,
			#083824 58%,
			#083824 100%) !important;
	z-index: 2 !important;
	pointer-events: none !important;
}

.section.section-03 .section-content {
	position: relative !important;
	z-index: 3 !important;
	width: 100% !important;
}

.section.section-03 .row {
	max-width: 1240px !important;
	margin: 0 auto !important;
	min-height: 540px !important;
	display: flex !important;
	align-items: center !important;
	padding: 60px 20px !important;
	box-sizing: border-box !important;
}

/* Cột 1 giữ min-height: 1px để không bị xẹp trên flexbox */
.section.section-03 .row>.col:first-child {
	width: 50% !important;
	flex: 0 0 50% !important;
	max-width: 50% !important;
	min-height: 1px !important;
}

.section.section-03 .row>.col:last-child {
	width: 50% !important;
	flex: 0 0 50% !important;
	max-width: 50% !important;
	box-sizing: border-box !important;
}

.section.section-03 .row>.col:last-child .col-inner {
	max-width: 520px !important;
	margin-left: auto !important;
	margin-right: 0 !important;
	padding: 0 0 0 20px !important;
	box-sizing: border-box !important;
}

.section.section-03 h3 {
	font-size: clamp(32px, 3.2vw, 44px) !important;
	color: #ffffff !important;
	line-height: 1.15 !important;
	letter-spacing: -0.5px !important;
	margin: 0 0 4px 0 !important;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.25) !important;
}

.section.section-03 h3:last-of-type {
	margin-bottom: 34px !important;
}

.section.section-03 ul {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
	max-width: 480px !important;
}

.section.section-03 ul li {
	display: flex !important;
	align-items: center !important;
	padding: 16px 0 !important;
	margin: 0 !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.22) !important;
	color: #ffffff !important;
	font-family: var(--bml-font) !important;
	font-size: clamp(15.5px, 1.3vw, 17.5px) !important;
	font-weight: 600 !important;
	line-height: 1.4 !important;
	letter-spacing: -0.1px !important;
	list-style: none !important;
}

.section.section-03 ul li:last-child {
	border-bottom: none !important;
}

.section.section-03 ul li::before {
	content: '' !important;
	display: inline-flex !important;
	flex: 0 0 48px !important;
	width: 48px !important;
	height: 48px !important;
	border-radius: 50% !important;
	border: 1.5px solid var(--bml-lime-icon) !important;
	margin-right: 20px !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	background-size: 22px 22px !important;
	box-sizing: border-box !important;
}

.section.section-03 ul li:nth-child(1)::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a4dc6c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z'/%3E%3Cline x1='8' y1='10' x2='16' y2='10'/%3E%3Cline x1='8' y1='14' x2='13' y2='14'/%3E%3C/svg%3E") !important;
}

.section.section-03 ul li:nth-child(2)::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a4dc6c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='9' y1='12' x2='15' y2='12'/%3E%3Cline x1='9' y1='16' x2='13' y2='16'/%3E%3C/svg%3E") !important;
}

.section.section-03 ul li:nth-child(3)::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a4dc6c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E") !important;
}

@media (max-width: 849px) {
	.section.section-03 .section-bg::after {
		background: linear-gradient(135deg, rgba(8, 55, 36, 0.72) 0%, rgba(8, 55, 36, 0.95) 100%) !important;
	}

	.section.section-03 .row {
		flex-direction: column !important;
		min-height: auto !important;
		padding: 45px 15px !important;
	}

	.section.section-03 .row>.col:first-child {
		display: none !important;
	}

	.section.section-03 .row>.col:last-child {
		width: 100% !important;
		flex: 0 0 100% !important;
		max-width: 100% !important;
	}

	.section.section-03 .row>.col:last-child .col-inner {
		max-width: 100% !important;
		padding: 0 !important;
	}

	.section.section-03 h3 {
		font-size: 28px !important;
	}

	.section.section-03 h3:last-of-type {
		margin-bottom: 24px !important;
	}
}

/* ==============================================================
   7. SECTION 04 - KIẾN THỨC TỪ THỰC TIỄN
   ============================================================== */
.section.section-04 {
	background-color: var(--bml-bg-cream-alt) !important;
	padding: 60px 0 !important;
}

.section.section-04 .row:first-of-type {
	max-width: 1240px !important;
	margin: 0 auto 28px auto !important;
	padding: 0 15px !important;
}

.section.section-04 .row:first-of-type h3 {
	font-size: clamp(28px, 2.8vw, 38px) !important;
	color: var(--bml-dark) !important;
	line-height: 1.2 !important;
	letter-spacing: -0.5px !important;
	margin: 0 !important;
	text-align: left !important;
}

.section.section-04 .row.row-small {
	max-width: 1240px !important;
	margin: 0 auto !important;
	padding: 0 15px !important;
	display: flex !important;
	flex-flow: row wrap !important;
	gap: 24px !important;
}

.section.section-04 .row.row-small>.col {
	width: calc(50% - 12px) !important;
	flex: 0 0 calc(50% - 12px) !important;
	max-width: calc(50% - 12px) !important;
	padding: 0 !important;
	margin: 0 !important;
	box-sizing: border-box !important;
}

.section.section-04 .row.row-small .col-inner {
	background: var(--bml-bg-card) !important;
	border-radius: var(--bml-radius-card) !important;
	overflow: hidden !important;
	box-shadow: var(--bml-shadow-card) !important;
	border: 1px solid var(--bml-border-subtle) !important;
	display: flex !important;
	flex-direction: column !important;
	height: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
	transition: transform 0.35s ease, box-shadow 0.35s ease !important;
	box-sizing: border-box !important;
}

.section.section-04 .row.row-small .col-inner:hover {
	box-shadow: var(--bml-shadow-card-hover) !important;
}

.section.section-04 .banner {
	margin: 0 !important;
	padding: 0 !important;
	height: 250px !important;
	overflow: hidden !important;
	position: relative !important;
	border-radius: var(--bml-radius-card) var(--bml-radius-card) 0 0 !important;
}

.section.section-04 .banner .height-fix {
	display: none !important;
}

.section.section-04 .banner .banner-inner {
	height: 100% !important;
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
}

.section.section-04 .banner .banner-bg img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.section.section-04 .banner .overlay {
	background-color: transparent !important;
	opacity: 0 !important;
}

.section.section-04 .banner-layers {
	height: 100% !important;
	width: 100% !important;
	max-width: 100% !important;
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	padding: 0 !important;
	pointer-events: none !important;
}

.section.section-04 .banner-layers a.fill {
	pointer-events: auto !important;
}

.section.section-04 .banner .text-box {
	position: absolute !important;
	bottom: 18px !important;
	left: 18px !important;
	top: auto !important;
	right: auto !important;
	transform: none !important;
	width: auto !important;
	padding: 0 !important;
	margin: 0 !important;
	z-index: 5 !important;
}

.section.section-04 .banner .text-box .text-box-content {
	background: transparent !important;
	padding: 0 !important;
	margin: 0 !important;
}

.section.section-04 .banner .text-box h3 {
	display: inline-flex !important;
	align-items: center !important;
	background: #ffffff !important;
	color: var(--bml-dark) !important;
	font-family: var(--bml-font) !important;
	font-size: 13px !important;
	font-weight: 800 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.5px !important;
	padding: 6px 18px !important;
	border-radius: 40px !important;
	margin: 0 !important;
	box-shadow: 0 3px 12px rgba(0, 0, 0, 0.16) !important;
	line-height: 1.4 !important;
}

.section.section-04 .col-inner>h2 {
	margin: 0 !important;
	padding: 0 !important;
	background: var(--bml-bg-card) !important;
	display: block !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

.section.section-04 .col-inner>h2 a {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	padding: 22px 24px !important;
	font-family: var(--bml-font) !important;
	font-size: clamp(18px, 1.6vw, 21px) !important;
	font-weight: 800 !important;
	color: var(--bml-dark) !important;
	text-decoration: none !important;
	line-height: 1.3 !important;
	letter-spacing: -0.2px !important;
	width: 100% !important;
	box-sizing: border-box !important;
	transition: color 0.25s ease !important;
}

.section.section-04 .col-inner:hover>h2 a {
	color: var(--bml-primary-light) !important;
}

.section.section-04 .col-inner>h2 a::after {
	content: '→' !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex: 0 0 40px !important;
	width: 40px !important;
	height: 40px !important;
	border-radius: 50% !important;
	border: 1.5px solid var(--bml-dark) !important;
	color: var(--bml-dark) !important;
	font-size: 20px !important;
	font-weight: 400 !important;
	line-height: 1 !important;
	margin-left: 16px !important;
	transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
	box-sizing: border-box !important;
}

.section.section-04 .col-inner:hover>h2 a::after {
	background-color: var(--bml-dark) !important;
	color: #ffffff !important;
	transform: translateX(4px) !important;
}

@media (max-width: 767px) {
	.section.section-04 {
		padding: 40px 0 !important;
	}

	.section.section-04 .row.row-small>.col {
		width: 100% !important;
		flex: 0 0 100% !important;
		max-width: 100% !important;
	}

	.section.section-04 .banner {
		height: 200px !important;
	}

	.section.section-04 .col-inner>h2 a {
		padding: 18px 20px !important;
		font-size: 18px !important;
	}
}

/* ==============================================================
   8. SECTION 05 - CÙNG TÌM GIẢI PHÁP PHÙ HỢP (CTA BANNER)
   ============================================================== */
.section.section-05 {
	background-color: var(--bml-lime-bg) !important;
	padding: 34px 0 !important;
	min-height: auto !important;
}

.section.section-05 .section-content {
	padding: 0 !important;
	margin: 0 !important;
}

.section.section-05 .row {
	max-width: 1240px !important;
	margin: 0 auto !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	padding: 0 15px !important;
	box-sizing: border-box !important;
}

.section.section-05 .row>.col {
	padding: 0 !important;
	margin: 0 !important;
	display: flex !important;
	align-items: center !important;
}

.section.section-05 .row>.col:first-child {
	flex: 1 1 auto !important;
	max-width: none !important;
	width: auto !important;
	justify-content: flex-start !important;
}

.section.section-05 .row>.col:first-child .col-inner,
.section.section-05 .row>.col:first-child .text {
	padding: 0 !important;
	margin: 0 !important;
	text-align: left !important;
	display: flex !important;
	align-items: center !important;
}

.section.section-05 .row>.col:first-child h3 {
	font-size: clamp(26px, 2.7vw, 38px) !important;
	color: #0b3b29 !important;
	line-height: 1.2 !important;
	letter-spacing: -0.5px !important;
	margin: 0 !important;
	padding: 0 !important;
	white-space: nowrap !important;
}

.section.section-05 .row>.col:last-child {
	flex: 0 0 auto !important;
	max-width: none !important;
	width: auto !important;
	margin-left: auto !important;
	justify-content: flex-end !important;
}

.section.section-05 .row>.col:last-child .col-inner {
	display: flex !important;
	justify-content: flex-end !important;
	align-items: center !important;
	padding: 0 !important;
	margin: 0 !important;
}

.section.section-05 a.button {
	background-color: var(--bml-dark-forest) !important;
	color: #ffffff !important;
	border: none !important;
	border-radius: var(--bml-radius-pill) !important;
	padding: 13px 30px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 10px !important;
	font-family: var(--bml-font) !important;
	font-size: 15.5px !important;
	font-weight: 700 !important;
	letter-spacing: -0.1px !important;
	text-transform: none !important;
	text-decoration: none !important;
	box-shadow: 0 4px 14px rgba(7, 53, 35, 0.25) !important;
	transition: all 0.25s ease !important;
	margin: 0 !important;
	min-height: 48px !important;
}

.section.section-05 a.button:hover {
	background-color: #0b452f !important;
	color: #ffffff !important;
	transform: translateY(-2px) !important;
	box-shadow: 0 6px 18px rgba(7, 53, 35, 0.35) !important;
}

.section.section-05 a.button span {
	font-family: var(--bml-font) !important;
	font-weight: 700 !important;
	color: #ffffff !important;
}

.section.section-05 a.button i {
	font-style: normal !important;
	display: inline-flex !important;
	align-items: center !important;
	margin-left: 2px !important;
	transition: transform 0.2s ease !important;
}

.section.section-05 a.button i::before {
	content: '→' !important;
	font-family: system-ui, -apple-system, sans-serif !important;
	font-size: 18px !important;
	font-weight: 500 !important;
	line-height: 1 !important;
}

.section.section-05 a.button:hover i {
	transform: translateX(4px) !important;
}

@media (max-width: 767px) {
	.section.section-05 {
		padding: 30px 15px !important;
	}

	.section.section-05 .row {
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 20px !important;
	}

	.section.section-05 .row>.col:first-child h3 {
		white-space: normal !important;
	}

	.section.section-05 .row>.col:last-child {
		width: 100% !important;
		margin-left: 0 !important;
	}

	.section.section-05 a.button {
		width: 100% !important;
	}
}

/* ==============================================================
   9. SECTION 06 - SLIDER SẢN PHẨM THỦY SẢN 4 CỘT
   Đồng bộ phong cách Slider Kiến Thức của thuy-san.css & cay-trong.css
   ============================================================== */

/* Section Container & Background */
.section.section-06 {
	position: relative !important;
	overflow: hidden !important;
	background-color: #eaf6fc !important;
	padding-top: 50px !important;
	padding-bottom: 65px !important;
}

.section.section-06 .section-bg {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	z-index: 1 !important;
}

.section.section-06 .section-bg img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	object-position: left bottom !important;
}

.section.section-06 .section-content {
	position: relative !important;
	z-index: 2 !important;
}

.section.section-06 > .section-content > .row {
	max-width: 1260px !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* --------------------------------------------------------------
   ROW 1: TIÊU ĐỀ SECTION
   -------------------------------------------------------------- */
.section.section-06 .row:first-of-type {
	margin-bottom: 24px !important;
}

.section.section-06 .section-title-container {
	border-bottom: none !important;
	margin-bottom: 0 !important;
	padding: 0 !important;
}

.section.section-06 .section-title {
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
}

.section.section-06 .section-title b {
	display: none !important;
}

.section.section-06 .section-title-main {
	font-family: var(--bml-font, 'Mulish', sans-serif) !important;
	font-size: clamp(22px, 2.2vw, 30px) !important;
	font-weight: 900 !important;
	color: #0e382b !important;
	letter-spacing: -0.4px !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 12px !important;
	text-transform: none !important;
}


/* --------------------------------------------------------------
   ROW 2: CỘT TRÁI (THỦY SẢN INTRO)
   -------------------------------------------------------------- */
.section.section-06 .row:nth-of-type(2)>.col:first-child .col-inner {
	display: flex !important;
	flex-direction: column !important;
	justify-content: flex-start !important;
	padding: 0 15px 0 0 !important;
}


/* Tiêu đề cột trái */
.section.section-06 .row:nth-of-type(2)>.col:first-child h5,
.section.section-06 .row:nth-of-type(2)>.col:first-child h2,
.section.section-06 .row:nth-of-type(2)>.col:first-child h3 {
	font-family: var(--bml-font, 'Mulish', sans-serif) !important;
	font-size: clamp(22px, 2.1vw, 30px) !important;
	font-weight: 900 !important;
	line-height: 1.25 !important;
	color: #0e382b !important;
	text-transform: none !important;
	margin: 0 0 14px 0 !important;
	letter-spacing: -0.3px !important;
}

/* Đoạn mô tả cột trái */
.section.section-06 .row:nth-of-type(2)>.col:first-child p {
	font-family: var(--bml-font, 'Mulish', sans-serif) !important;
	font-size: 14.5px !important;
	line-height: 1.6 !important;
	color: #385547 !important;
	margin: 0 !important;
	font-weight: 500 !important;
}

/* --------------------------------------------------------------
   SLIDER 4 CỘT: STYLE THẺ CARD CHUẨN NHƯ TRANG THỦY SẢN
   -------------------------------------------------------------- */
.section.section-06 .slider-wrapper,
.section.section-06 .slider,
.section.section-06 .row-slider,
.section.section-06 .slider-nav-reveal {
	position: relative !important;
	overflow: visible !important;
}

.section.section-06 .flickity-viewport {
	overflow: hidden !important;
}

/* Col item trong slider: giữ padding nhẹ để tạo khoảng cách giữa các card */
.section.section-06 .product-small.col {
	padding: 0 8px 15px !important;
}

.section.section-06 .product-small.col .col-inner {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	padding: 0 !important;
	height: 100% !important;
}

/* Card Box bao ngoài */
.section.section-06 .product-small .box {
	border-radius: 16px !important;
	overflow: hidden !important;
	border: 1px solid rgba(14, 56, 43, 0.08) !important;
	box-shadow: 0 4px 16px rgba(14, 56, 43, 0.04) !important;
	transition: all 0.3s ease !important;
	background: #ffffff !important;
	display: flex !important;
	flex-direction: column !important;
	height: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
	text-align: left !important;
}

.section.section-06 .product-small.col:hover .box {
	transform: translateY(-4px) !important;
	box-shadow: 0 12px 28px rgba(14, 56, 43, 0.10) !important;
	border-color: rgba(14, 56, 43, 0.16) !important;
}

/* Ảnh sản phẩm full 100% chiều ngang card, hiển thị đúng tỷ lệ ảnh gốc */
.section.section-06 .product-small .box-image {
	width: 100% !important;
	height: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	border-radius: 0 !important;
	overflow: hidden !important;
	position: relative !important;
	background: #f1f7f4 !important;
}

.section.section-06 .product-small .box-image .image-none,
.section.section-06 .product-small .box-image a {
	width: 100% !important;
	height: auto !important;
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
}

.section.section-06 .product-small .box-image img {
	width: 100% !important;
	height: auto !important;
	object-fit: contain !important;
	object-position: center !important;
	border-radius: 0 !important;
	transition: transform 0.4s ease !important;
	display: block !important;
}

.section.section-06 .product-small.col:hover .box-image img {
	transform: scale(1.05) !important;
}

/* Phần text: Tuyệt đối không có border bao bọc bên trong */
.section.section-06 .product-small .box-text {
	padding: 16px 18px 20px !important;
	text-align: left !important;
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	flex-grow: 1 !important;
	justify-content: space-between !important;
	position: relative !important;
	width: 100% !important;
}

.section.section-06 .product-small .title-wrapper {
	margin: 0 0 12px 0 !important;
	padding: 0 !important;
}

/* Tiêu đề sản phẩm */
.section.section-06 .product-small .product-title {
	font-family: var(--bml-font, 'Mulish', sans-serif) !important;
	font-size: 15px !important;
	font-weight: 800 !important;
	color: #1e293b !important;
	line-height: 1.4 !important;
	margin: 0 !important;
	text-align: left !important;
	display: -webkit-box !important;
	-webkit-line-clamp: 2 !important;
	line-clamp: 2 !important;
	-webkit-box-orient: vertical !important;
	overflow: hidden !important;
	min-height: 42px !important;
}

.section.section-06 .product-small .product-title a {
	color: #1e293b !important;
	text-decoration: none !important;
	transition: color 0.2s ease !important;
}

.section.section-06 .product-small.col:hover .product-title a {
	color: #0e382b !important;
}

/* Toàn bộ thẻ card có thể click vào để mở sản phẩm */
.section.section-06 .product-small .product-title a::before {
	content: "" !important;
	position: absolute !important;
	inset: 0 !important;
	z-index: 2 !important;
}

/* --------------------------------------------------------------
   GIÁ BÁN SẢN PHẨM (.price-wrapper)
   -------------------------------------------------------------- */
.section.section-06 .product-small .price-wrapper {
	display: flex !important;
	align-items: baseline !important;
	gap: 6px !important;
	flex-wrap: wrap !important;
	margin: 4px 0 12px 0 !important;
	min-height: 24px !important;
	line-height: 1.2 !important;
}

.section.section-06 .product-small .price-wrapper .price {
	display: inline-flex !important;
	align-items: baseline !important;
	gap: 6px !important;
	flex-wrap: wrap !important;
}

/* Giá hiện tại / Giá khuyến mãi */
.section.section-06 .product-small .price-wrapper ins,
.section.section-06 .product-small .price-wrapper .amount {
	color: #0e382b !important;
	font-family: var(--bml-font, 'Mulish', sans-serif) !important;
	font-size: 16px !important;
	font-weight: 900 !important;
	text-decoration: none !important;
	letter-spacing: -0.2px !important;
}

/* Giá gốc khi có khuyến mãi */
.section.section-06 .product-small .price-wrapper del,
.section.section-06 .product-small .price-wrapper del .amount {
	color: #94a3b8 !important;
	font-family: var(--bml-font, 'Mulish', sans-serif) !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	text-decoration: line-through !important;
}

.section.section-06 .product-small .price-wrapper .screen-reader-text {
	display: none !important;
}

/* Trường hợp sản phẩm chưa set giá */
.section.section-06 .product-small .price-wrapper:empty::before,
.section.section-06 .product-small .price-wrapper:not(:has(.amount))::before {
	content: "Giá: Liên hệ" !important;
	font-family: var(--bml-font, 'Mulish', sans-serif) !important;
	font-size: 13.5px !important;
	font-weight: 700 !important;
	color: #476857 !important;
	line-height: 1.2 !important;
}

/* --------------------------------------------------------------
   NÚT MUA HÀNG / THÊM VÀO GIỎ (.add-to-cart-button)
   -------------------------------------------------------------- */
.section.section-06 .product-small .add-to-cart-button {
	display: block !important;
	position: relative !important;
	z-index: 5 !important;
	width: 100% !important;
	margin-top: auto !important;
	padding: 0 !important;
}

.section.section-06 .product-small .add-to-cart-button a.button {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	width: 100% !important;
	height: 38px !important;
	min-height: 38px !important;
	padding: 0 16px !important;
	margin: 0 !important;
	border-radius: var(--bml-radius-pill, 30px) !important;
	background-color: #0e382b !important;
	border: 1.5px solid #0e382b !important;
	color: #ffffff !important;
	font-family: var(--bml-font, 'Mulish', sans-serif) !important;
	font-size: 13.5px !important;
	font-weight: 700 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	box-shadow: 0 3px 10px rgba(14, 56, 43, 0.16) !important;
	transition: all 0.25s ease !important;
	cursor: pointer !important;
	text-decoration: none !important;
}

.section.section-06 .product-small .add-to-cart-button a.button:hover {
	background-color: #14532d !important;
	border-color: #14532d !important;
	color: #cae88d !important;
	transform: translateY(-2px) !important;
	box-shadow: 0 6px 16px rgba(14, 56, 43, 0.25) !important;
}

/* Icon Giỏ Hàng cho nút Thêm vào giỏ */
.section.section-06 .product-small .add-to-cart-button a.add_to_cart_button::before {
	content: "" !important;
	display: inline-block !important;
	width: 15px !important;
	height: 15px !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	background-size: contain !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E") !important;
	transition: transform 0.2s ease !important;
}

.section.section-06 .product-small .add-to-cart-button a.add_to_cart_button:hover::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cae88d' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E") !important;
	transform: scale(1.1) !important;
}

/* Nút phụ đối với sản phẩm chưa đặt giá mua trực tiếp */
.section.section-06 .product-small .add-to-cart-button a.button:not(.add_to_cart_button) {
	background-color: #f1f7f4 !important;
	border-color: rgba(14, 56, 43, 0.16) !important;
	color: #0e382b !important;
	box-shadow: none !important;
}

.section.section-06 .product-small .add-to-cart-button a.button:not(.add_to_cart_button):hover {
	background-color: #0e382b !important;
	border-color: #0e382b !important;
	color: #ffffff !important;
}

/* --------------------------------------------------------------
   HUY HIỆU GIẢM GIÁ (.badge-container)
   -------------------------------------------------------------- */
.section.section-06 .badge-container {
	display: block !important;
	position: absolute !important;
	top: 10px !important;
	left: 10px !important;
	z-index: 4 !important;
	pointer-events: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.section.section-06 .badge-container .badge {
	background: transparent !important;
	border: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

.section.section-06 .badge-container .badge-inner {
	background: #dc2626 !important;
	color: #ffffff !important;
	font-family: var(--bml-font, 'Mulish', sans-serif) !important;
	font-size: 11px !important;
	font-weight: 800 !important;
	padding: 3px 8px !important;
	border-radius: 6px !important;
	line-height: 1.2 !important;
	letter-spacing: 0.3px !important;
	box-shadow: 0 2px 6px rgba(220, 38, 38, 0.3) !important;
}

/* Ẩn các thành phần không cần thiết */
.section.section-06 .image-tools,
.section.section-06 .is-divider {
	display: none !important;
}

/* --------------------------------------------------------------
   NÚT ĐIỀU HƯỚNG SLIDER HÌNH TRÒN CHUẨN MỰC
   -------------------------------------------------------------- */
.section.section-06 .flickity-prev-next-button {
	width: 44px !important;
	height: 44px !important;
	min-width: 44px !important;
	min-height: 44px !important;
	max-width: 44px !important;
	max-height: 44px !important;
	border-radius: 50% !important;
	background: #ffffff !important;
	background-color: #ffffff !important;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12) !important;
	border: 1px solid rgba(14, 56, 43, 0.12) !important;
	top: 50% !important;
	bottom: auto !important;
	margin: 0 !important;
	transform: translateY(-50%) !important;
	opacity: 0.95 !important;
	transition: all 0.25s ease !important;
	z-index: 9999 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	cursor: pointer !important;
	padding: 0 !important;
}

.section.section-06 .flickity-prev-next-button.previous {
	left: -16px !important;
	right: auto !important;
}

.section.section-06 .flickity-prev-next-button.next {
	right: -16px !important;
	left: auto !important;
}

.section.section-06 .flickity-prev-next-button svg {
	width: 18px !important;
	height: 18px !important;
	max-width: 18px !important;
	max-height: 18px !important;
	position: static !important;
	transform: none !important;
	margin: 0 !important;
	padding: 0 !important;
	fill: #0e382b !important;
	transition: fill 0.2s ease !important;
	border: none !important;
	background: transparent !important;
}

.section.section-06 .flickity-prev-next-button:hover {
	background: #0e382b !important;
	background-color: #0e382b !important;
	border-color: #0e382b !important;
	transform: translateY(-50%) scale(1.08) !important;
	box-shadow: 0 6px 20px rgba(14, 56, 43, 0.3) !important;
	opacity: 1 !important;
}

.section.section-06 .flickity-prev-next-button:hover svg {
	fill: #ffffff !important;
}

.section.section-06 .flickity-prev-next-button:disabled {
	opacity: 0 !important;
	pointer-events: none !important;
}

/* Dots phân trang bên dưới */
.section.section-06 .flickity-page-dots {
	bottom: -25px !important;
	position: relative !important;
	margin-top: 10px !important;
}

.section.section-06 .flickity-page-dots .dot {
	background: #0e382b !important;
	opacity: 0.25 !important;
	width: 8px !important;
	height: 8px !important;
	transition: all 0.25s ease !important;
}

.section.section-06 .flickity-page-dots .dot.is-selected {
	opacity: 1 !important;
	background: #0e382b !important;
}

/* Responsive Mobile & Tablet cho Section 06 */
@media (max-width: 767px) {
	.section.section-06 {
		padding-top: 24px !important;
		padding-bottom: 35px !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	.section.section-06 .section-content {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	/* Row 1: Tiêu đề Section */
	.section.section-06 .row:first-of-type {
		padding-left: 10px !important;
		padding-right: 10px !important;
		margin-bottom: 12px !important;
	}

	/* Row 2: Nội dung chính - Chỉ chừa đúng 10px mép ngoài màn hình */
	.section.section-06 .row:nth-of-type(2) {
		padding-left: 10px !important;
		padding-right: 10px !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
	}

	/* Cột 1: Dinh dưỡng tối ưu... */
	.section.section-06 .row:nth-of-type(2)>.col:first-child {
		padding: 0 !important;
		margin-bottom: 14px !important;
	}

	.section.section-06 .row:nth-of-type(2)>.col:first-child .col-inner {
		padding: 0 !important;
		margin: 0 !important;
	}

	.section.section-06 .row:nth-of-type(2)>.col:first-child h5,
	.section.section-06 .row:nth-of-type(2)>.col:first-child h2,
	.section.section-06 .row:nth-of-type(2)>.col:first-child h3 {
		font-size: 21px !important;
		line-height: 1.25 !important;
		margin: 0 0 6px 0 !important;
	}

	.section.section-06 .row:nth-of-type(2)>.col:first-child p {
		font-size: 13.5px !important;
		line-height: 1.45 !important;
	}

	/* Cột 2 chứa Slider: Triệt tiêu padding cột Flatsome */
	.section.section-06 .row:nth-of-type(2)>.col:last-child {
		padding: 0 !important;
		margin: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
	}

	.section.section-06 .row:nth-of-type(2)>.col:last-child .col-inner {
		padding: 0 !important;
		margin: 0 !important;
	}

	/* Row danh sách sản phẩm bên trong: mở rộng bù trừ lề col card để card sát mép 10px */
	.section.section-06 .row:nth-of-type(2) > .col:last-child .row,
	.section.section-06 .row:nth-of-type(2) :is(.slider.row, .products.row, .row.products, .row-small, .row-full-width) {
		padding: 0 !important;
		margin-left: -4px !important;
		margin-right: -4px !important;
		width: calc(100% + 8px) !important;
		max-width: calc(100% + 8px) !important;
	}

	/* Mỗi card col trong slider: mép ngoài cách đúng 10px, giữa 2 card chỉ cách 8px */
	.section.section-06 .product-small.col {
		padding: 0 4px 10px !important;
	}

	.section.section-06 .product-small .box {
		border-radius: 14px !important;
	}

	/* Chiều cao ảnh sản phẩm trên mobile theo tỷ lệ ảnh gốc */
	.section.section-06 .product-small .box-image {
		height: auto !important;
	}

	/* Padding hộp chữ gọn gàng */
	.section.section-06 .product-small .box-text {
		padding: 10px 10px 12px !important;
	}

	.section.section-06 .product-small .title-wrapper {
		margin: 0 0 6px 0 !important;
	}

	/* Font tiêu đề gọn gàng vừa vặn */
	.section.section-06 .product-small .product-title {
		font-size: 13.5px !important;
		line-height: 1.35 !important;
		min-height: 38px !important;
	}

	/* Giá bán & Nút mua hàng trên Mobile */
	.section.section-06 .product-small .price-wrapper {
		margin: 2px 0 8px 0 !important;
		min-height: 20px !important;
		gap: 4px !important;
	}

	.section.section-06 .product-small .price-wrapper ins,
	.section.section-06 .product-small .price-wrapper .amount {
		font-size: 13.5px !important;
	}

	.section.section-06 .product-small .price-wrapper del,
	.section.section-06 .product-small .price-wrapper del .amount {
		font-size: 11px !important;
	}

	.section.section-06 .product-small .price-wrapper:empty::before,
	.section.section-06 .product-small .price-wrapper:not(:has(.amount))::before {
		font-size: 12px !important;
	}

	/* Nút bấm mua hàng trên mobile: chữ nằm gọn gàng trên 1 dòng */
	.section.section-06 .product-small .add-to-cart-button a.button {
		height: 34px !important;
		min-height: 34px !important;
		font-size: 12.5px !important;
		padding: 0 8px !important;
		letter-spacing: -0.2px !important;
		white-space: nowrap !important;
		gap: 4px !important;
	}

	.section.section-06 .product-small .add-to-cart-button a.add_to_cart_button::before {
		width: 13px !important;
		height: 13px !important;
	}

	.section.section-06 .flickity-prev-next-button {
		display: none !important;
	}

	.section.section-06 .flickity-page-dots {
		bottom: -15px !important;
		margin-top: 6px !important;
	}
}