/*
Theme Name: S-Paper - Bao Bì Công Nghiệp B2B
Theme URI: http://s-paper.local/
Description: Child Theme Flatsome chuẩn UX Builder dành cho Công ty Sản xuất Bao bì Công nghiệp & Thùng Carton S-Paper Corporate (Thiết kế theo nguyên mẫu S2 Corporate, tối ưu DOM & Core Web Vitals).
Author: S-Paper Corporate (W2W)
Template: flatsome
Version: 3.0.0
Text Domain: s-pager
*/

/* ==========================================================================
   1. DESIGN TOKENS & BIẾN HỆ THỐNG (CHUẨN MẪU S2 CORPORATE)
   ========================================================================== */
:root {
	--sp-primary: #0B2545;
	--sp-primary-hover: #133B6E;
	--sp-secondary: #E07A1F;
	--sp-secondary-hover: #C96B16;
	--sp-bg: #F6F8FB;
	--sp-paper: #FFFFFF;
	--sp-surface-alt: #EDF2F7;
	--sp-warm: #F8F6F2;
	--sp-text: #0B2545;
	--sp-muted: #475569;
	--sp-on-dark: #FFFFFF;
	--sp-on-dark-muted: rgba(255, 255, 255, 0.78);
	--sp-line: #E2E8F0;
	--sp-line-strong: #CBD5E1;
	--sp-line-on-dark: rgba(255, 255, 255, 0.14);
	--sp-price: #B42318;
	--sp-success: #1F7A4C;
	--sp-warning: #B45309;
	--sp-error: #B42318;
	--sp-font: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--sp-radius-sm: 4px;
	--sp-radius: 6px;
	--sp-radius-lg: 8px;
	--sp-radius-pill: 9999px;
	--sp-shadow-xs: 0 1px 2px rgba(11, 37, 69, 0.05);
	--sp-shadow-sm: 0 2px 8px rgba(11, 37, 69, 0.06);
	--sp-shadow-md: 0 8px 24px rgba(11, 37, 69, 0.10);
	--sp-shadow-lg: 0 16px 40px rgba(11, 37, 69, 0.16);
	--sp-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--fs-color-primary: #0B2545;
	--fs-color-secondary: #E07A1F;
	--fs-color-success: #1F7A4C;
	--fs-color-alert: #B42318;
}

/* ==========================================================================
   2. RESET TYPOGRAPHY & KHUNG LƯỚI FLATSOME (1320PX)
   ========================================================================== */
body,
h1, h2, h3, h4, h5, h6,
.nav > li > a,
.button,
button,
input,
select,
textarea {
	font-family: var(--sp-font) !important;
}

body {
	color: var(--sp-text);
	background-color: var(--sp-paper);
	font-size: 15px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
	color: var(--sp-primary);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.015em;
}

.container,
.row,
.row.row-small,
.row.row-large,
.row.row-collapse,
.gallery-row,
.slider-nav-reveal .flickity-prev-next-button {
	max-width: 1320px !important;
}

/* Đảm bảo các .row lồng bên trong .col-inner hoặc [tabgroup] trải rộng 100% khung 1320px, không bị lệch trái */
.col-inner > .row,
.col-inner > .row.row-small,
.col-inner > .row.row-large,
.tab-panels .row,
.tab-panels .row.row-small,
.tab-panels .row.row-large {
	max-width: none !important;
	width: auto !important;
}

/* Eyebrow / Kicker dùng chung cho các Section */
.sp-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--sp-secondary);
	margin-bottom: 6px;
}

.sp-eyebrow::before {
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: var(--sp-secondary);
}

.sp-section-head {
	margin-bottom: 28px;
}

.sp-section-head h2 {
	font-size: clamp(1.5rem, 1.15rem + 1.2vw, 2.125rem);
	font-weight: 700;
	color: var(--sp-primary);
	margin-bottom: 8px;
}

.sp-section-head p {
	font-size: 15px;
	color: var(--sp-muted);
	max-width: 660px;
	margin-bottom: 0;
}

.text-center .sp-section-head p,
.sp-section-head.text-center p {
	margin-left: auto;
	margin-right: auto;
}

/* Chuẩn hóa Button Flatsome theo phong cách công nghiệp S2 Corporate */
.button,
button.button,
a.button {
	border-radius: var(--sp-radius) !important;
	font-weight: 600 !important;
	font-size: 14px !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 0 20px !important;
	margin-bottom: 0;
	transition: all 0.2s var(--sp-ease) !important;
	box-shadow: none !important;
}

.button.primary:not(.is-outline) {
	background-color: var(--sp-primary) !important;
	border-color: var(--sp-primary) !important;
	color: #fff !important;
}

.button.primary:not(.is-outline):hover {
	background-color: var(--sp-primary-hover) !important;
	border-color: var(--sp-primary-hover) !important;
	transform: translateY(-1px);
}

.button.secondary:not(.is-outline) {
	background-color: var(--sp-secondary) !important;
	border-color: var(--sp-secondary) !important;
	color: var(--sp-primary) !important;
	font-weight: 700 !important;
}

.button.secondary:not(.is-outline):hover {
	background-color: var(--sp-secondary-hover) !important;
	border-color: var(--sp-secondary-hover) !important;
	color: var(--sp-primary) !important;
	transform: translateY(-1px);
}

.button.is-outline {
	border-width: 1px !important;
	border-color: var(--sp-line-strong) !important;
	color: var(--sp-primary) !important;
	background-color: var(--sp-paper) !important;
}

.button.is-outline:hover {
	background-color: var(--sp-primary) !important;
	border-color: var(--sp-primary) !important;
	color: #fff !important;
}

.dark .button.is-outline,
.button.white.is-outline {
	background-color: rgba(255, 255, 255, 0.08) !important;
	border-color: rgba(255, 255, 255, 0.35) !important;
	color: #fff !important;
}

.dark .button.is-outline:hover,
.button.white.is-outline:hover {
	background-color: #fff !important;
	border-color: #fff !important;
	color: var(--sp-primary) !important;
}

/* ==========================================================================
   3. HEADER 3 TẦNG CHUẨN S2 CORPORATE (TOPBAR + MAIN BAR + MEGA MENU BAR)
   ========================================================================== */

/* 3.1. Topbar Ribbon (#top-bar) */
#top-bar {
	background-color: var(--sp-primary) !important;
	border-bottom: 1px solid var(--sp-line-on-dark);
	min-height: 36px !important;
	font-size: 12px;
	color: #fff;
}

#top-bar .nav > li.html {
	font-size: 12px;
	padding: 0;
}

.sp-topbar-wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
}

.sp-topbar-notice {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #fff;
	font-size: 12px;
	line-height: 1.35;
}

.sp-topbar-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background-color: var(--sp-secondary);
	flex-shrink: 0;
}

.sp-topbar-badge {
	display: inline-flex;
	align-items: center;
	padding: 2px 8px;
	background-color: var(--sp-secondary);
	color: var(--sp-primary);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.06em;
	border-radius: 4px;
	text-transform: uppercase;
}

.sp-topbar-text {
	color: rgba(255, 255, 255, 0.92);
}

.sp-topbar-cta {
	color: var(--sp-secondary) !important;
	font-weight: 700;
	text-decoration: underline !important;
	text-underline-offset: 3px;
	margin-left: 4px;
}

.sp-topbar-cta:hover {
	color: #fff !important;
}

.sp-topbar-contacts {
	display: inline-flex;
	align-items: center;
	gap: 18px;
	font-size: 12px;
}

.sp-topbar-contacts a {
	color: rgba(255, 255, 255, 0.85) !important;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-weight: 500;
	text-decoration: none;
}

.sp-topbar-contacts a strong {
	color: #fff;
	font-weight: 700;
}

.sp-topbar-contacts a:hover {
	color: var(--sp-secondary) !important;
}

/* 3.2. Header Main (#masthead) */
#masthead {
	background-color: var(--sp-paper) !important;
	border-bottom: 1px solid var(--sp-line);
	height: 76px !important;
}

#masthead .header-inner {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 20px;
}

#logo {
	width: 220px !important;
	margin-right: 12px !important;
	flex-shrink: 0;
}

#logo img {
	max-height: 46px !important;
	width: auto !important;
}

/* Ô tìm kiếm trên Header Main (mở rộng cân đối ở giữa Logo và Cụm công cụ phải) */
#masthead .flex-left {
	flex: 1 1 auto !important;
	max-width: 520px;
}

#masthead .flex-left > .header-nav {
	width: 100% !important;
	display: flex !important;
}

#masthead .header-search-form {
	width: 100% !important;
	flex: 1 1 100% !important;
}

#masthead .header-search-form-wrapper {
	max-width: 520px;
	width: 100% !important;
}

#masthead .searchform-wrapper,
#masthead .searchform-wrapper form {
	width: 100% !important;
	margin-bottom: 0;
}

#masthead .searchform .flex-row {
	background-color: var(--sp-bg);
	border: 1px solid var(--sp-line-strong);
	border-radius: var(--sp-radius);
	overflow: hidden;
	height: 42px;
	align-items: center;
	width: 100% !important;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#masthead .searchform .flex-row:focus-within {
	background-color: var(--sp-paper);
	border-color: var(--sp-primary);
	box-shadow: 0 0 0 3px rgba(11, 37, 69, 0.08);
}

#masthead .searchform input.search-field {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	height: 40px !important;
	padding: 0 14px !important;
	font-size: 13.5px !important;
	color: var(--sp-text) !important;
}

#masthead .searchform .submit-button {
	background-color: var(--sp-primary) !important;
	color: #fff !important;
	border: none !important;
	height: 42px !important;
	min-height: 42px !important;
	width: 44px !important;
	padding: 0 !important;
	border-radius: 0 !important;
}

#masthead .searchform .submit-button:hover {
	background-color: var(--sp-secondary) !important;
	color: var(--sp-primary) !important;
}

/* Cụm công cụ Header bên phải (Yêu thích, Tài khoản, Giỏ báo giá, CTA Yêu cầu báo giá) */
.sp-header-tools {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.sp-header-tool {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 40px;
	padding: 0 10px;
	border-radius: var(--sp-radius);
	color: var(--sp-text) !important;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none !important;
	transition: background-color 0.2s ease, color 0.2s ease;
	position: relative;
}

.sp-header-tool:hover {
	background-color: var(--sp-surface-alt);
	color: var(--sp-primary) !important;
}

.sp-header-tool svg {
	width: 18px;
	height: 18px;
	stroke: currentColor;
	flex-shrink: 0;
}

.sp-quote-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 19px;
	height: 19px;
	padding: 0 5px;
	border-radius: 999px;
	background-color: var(--sp-secondary);
	color: var(--sp-primary);
	font-size: 11px;
	font-weight: 800;
	line-height: 1;
}

.sp-header-cta-btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 42px;
	padding: 0 16px;
	background-color: var(--sp-secondary);
	color: var(--sp-primary) !important;
	font-size: 13.5px;
	font-weight: 700;
	border-radius: var(--sp-radius);
	text-decoration: none !important;
	transition: background-color 0.2s ease, transform 0.2s ease;
	margin-left: 4px;
}

.sp-header-cta-btn:hover {
	background-color: var(--sp-secondary-hover);
	color: var(--sp-primary) !important;
	transform: translateY(-1px);
}

.sp-header-cta-btn svg {
	width: 16px;
	height: 16px;
}

/* 3.3. Header Bottom Navigation (#wide-nav) */
#wide-nav {
	background-color: var(--sp-paper) !important;
	border-bottom: 1px solid var(--sp-line);
	box-shadow: var(--sp-shadow-xs);
	min-height: 46px !important;
}

#wide-nav .header-nav > li > a {
	font-size: 14px !important;
	font-weight: 600 !important;
	color: var(--sp-text) !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	padding: 11px 14px !important;
	position: relative;
}

#wide-nav .header-nav > li:first-child > a {
	padding-left: 0 !important;
}

#wide-nav .header-nav > li > a:hover,
#wide-nav .header-nav > li.current-menu-item > a,
#wide-nav .header-nav > li.active > a {
	color: var(--sp-secondary) !important;
}

#wide-nav .header-nav > li.current-menu-item > a::after,
#wide-nav .header-nav > li.active > a::after {
	content: "";
	position: absolute;
	left: 14px;
	right: 14px;
	bottom: 0;
	height: 2.5px;
	background-color: var(--sp-secondary);
	border-radius: 2px;
}

#wide-nav .header-nav > li:first-child.current-menu-item > a::after {
	left: 0;
}

/* Dropdown tiêu chuẩn & UX Block Mega Menu của Flatsome */
.nav-dropdown {
	border: 1px solid var(--sp-line) !important;
	border-top: 2px solid var(--sp-secondary) !important;
	border-radius: 0 0 var(--sp-radius-lg) var(--sp-radius-lg) !important;
	box-shadow: var(--sp-shadow-lg) !important;
	padding: 18px !important;
	background-color: var(--sp-paper) !important;
}

.header-nav > li:not(.menu-item-has-block) .nav-dropdown li > a {
	font-size: 13.5px !important;
	font-weight: 500 !important;
	color: var(--sp-muted) !important;
	padding: 7px 6px !important;
	transition: color 0.15s ease, transform 0.15s ease;
}

.header-nav > li:not(.menu-item-has-block) .nav-dropdown li > a:hover {
	color: var(--sp-secondary) !important;
	transform: translateX(3px);
}

/* Mega Menu Sản phẩm (Flatsome UX Block: megamenu-san-pham) */
.header-nav > li.menu-item-has-block > .nav-dropdown {
	padding: 0 !important;
	border: none !important;
	border-top: 1px solid var(--sp-line) !important;
	border-bottom: 1px solid var(--sp-line) !important;
	border-radius: 0 !important;
	box-shadow: 0 18px 40px -12px rgba(11, 37, 69, 0.16) !important;
	background-color: #fff !important;
}

.sp-megamenu-section {
	padding-top: 24px !important;
	padding-bottom: 20px !important;
	background-color: #fff !important;
}

.sp-megamenu-section .row {
	max-width: var(--sp-container) !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

.sp-mm-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding-bottom: 14px;
	margin-bottom: 20px;
	border-bottom: 1px solid var(--sp-line);
	flex-wrap: wrap;
}

.sp-mm-head-left {
	display: flex;
	align-items: baseline;
	gap: 12px;
	flex-wrap: wrap;
}

.sp-mm-title {
	font-size: 18px;
	font-weight: 800;
	color: var(--sp-primary);
	letter-spacing: -0.01em;
}

.sp-mm-subtitle {
	font-size: 13px;
	color: var(--sp-muted);
	font-weight: 400;
}

.sp-mm-view-all {
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
	font-size: 13px !important;
	font-weight: 700 !important;
	color: var(--sp-primary) !important;
	text-decoration: none !important;
	padding: 0 !important;
	transition: color 0.2s ease, transform 0.2s ease;
}

.sp-mm-view-all:hover {
	color: var(--sp-secondary) !important;
	transform: translateX(2px);
}

.sp-mm-group {
	display: flex;
	flex-direction: column;
}

.sp-mm-group-title {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	font-size: 13.5px !important;
	font-weight: 700 !important;
	color: var(--sp-primary) !important;
	padding: 0 0 10px 0 !important;
	margin: 0 0 10px 0 !important;
	border-bottom: 1px solid var(--sp-line) !important;
	text-decoration: none !important;
	transition: color 0.15s ease;
}

.sp-mm-group-title:hover {
	color: var(--sp-secondary) !important;
}

.sp-mm-arrow {
	font-size: 13px;
	color: var(--sp-muted);
	transition: transform 0.15s ease, color 0.15s ease;
}

.sp-mm-group-title:hover .sp-mm-arrow {
	color: var(--sp-secondary);
	transform: translateX(2px);
}

.sp-mm-links {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.sp-mm-links li {
	margin: 0 !important;
	padding: 0 !important;
}

.sp-mm-links li a {
	display: inline-block !important;
	font-size: 13.5px !important;
	font-weight: 500 !important;
	color: var(--sp-muted) !important;
	padding: 3px 0 !important;
	text-decoration: none !important;
	transition: color 0.15s ease, transform 0.15s ease;
}

.sp-mm-links li a:hover {
	color: var(--sp-primary) !important;
	transform: translateX(3px);
}

.sp-mm-promo-card {
	display: flex !important;
	flex-direction: column;
	border: 1px solid var(--sp-line);
	border-radius: var(--sp-radius-lg);
	overflow: hidden;
	background-color: var(--sp-bg);
	text-decoration: none !important;
	padding: 0 !important;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.sp-mm-promo-card:hover {
	border-color: var(--sp-line-strong);
	box-shadow: var(--sp-shadow-sm);
	transform: translateY(-2px);
}

.sp-mm-promo-img {
	aspect-ratio: 4 / 3;
	width: 100%;
	overflow: hidden;
	background-color: var(--sp-surface-alt);
}

.sp-mm-promo-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.sp-mm-promo-body {
	padding: 12px 14px;
	background-color: #fff;
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.sp-mm-promo-eyebrow {
	font-size: 11.5px;
	font-weight: 600;
	color: var(--sp-muted);
}

.sp-mm-promo-title {
	font-size: 13.5px;
	font-weight: 700;
	color: var(--sp-primary);
	line-height: 1.35;
}

.sp-mm-foot {
	display: flex;
	align-items: center;
	gap: 28px;
	margin-top: 20px;
	padding-top: 14px;
	border-top: 1px solid var(--sp-line);
	flex-wrap: wrap;
}

.sp-mm-foot-item {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 12.5px;
	color: var(--sp-muted);
	font-weight: 500;
}

.sp-mm-foot-item svg {
	color: var(--sp-secondary);
	flex-shrink: 0;
}

/* ==========================================================================
   4. SECTION 1: HERO SLIDER (.sp-hero-slider - DÙNG [ux_slider] + [ux_banner])
   ========================================================================== */
.sp-hero-slider .banner {
	background-color: var(--sp-primary);
}

.sp-hero-slider .banner .overlay {
	display: none !important;
}

.sp-hero-slider .banner-bg {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.sp-hero-slider .banner-bg::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(
		90deg,
		rgba(11, 37, 69, 0.94) 0%,
		rgba(11, 37, 69, 0.80) 44%,
		rgba(11, 37, 69, 0.24) 76%,
		rgba(11, 37, 69, 0.04) 100%
	) !important;
}

.sp-hero-slider .banner-layers {
	position: relative;
	z-index: 2 !important;
}

.sp-hero-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 5px 14px;
	background-color: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.24);
	border-radius: 999px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.03em;
	color: #fff;
	margin-bottom: 14px;
	backdrop-filter: blur(4px);
}

.sp-hero-badge::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: var(--sp-secondary);
	box-shadow: 0 0 0 3px rgba(224, 122, 31, 0.28);
}

.sp-hero-slider .text-box h1,
.sp-hero-slider .text-box h2 {
	font-size: clamp(1.85rem, 3vw, 2.75rem) !important;
	font-weight: 800 !important;
	line-height: 1.18 !important;
	color: #fff !important;
	margin-bottom: 14px !important;
	text-shadow: 0 2px 14px rgba(7, 25, 47, 0.35);
}

.sp-hero-slider .text-box p.sp-hero-desc {
	font-size: 15.5px;
	line-height: 1.62;
	color: rgba(255, 255, 255, 0.88);
	margin-bottom: 22px;
	max-width: 580px;
}

.sp-hero-btns {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-top: 4px;
}

.sp-hero-btns br,
.sp-hero-metrics br {
	display: none !important;
}

.sp-hero-btns p,
.sp-hero-metrics p {
	display: contents;
}

.sp-hero-btns .button {
	margin: 0 !important;
	min-height: 44px !important;
	padding: 0 22px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	border-radius: var(--sp-radius) !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
}

.sp-hero-btns .button.white.is-outline {
	border: 1.5px solid rgba(255, 255, 255, 0.55) !important;
	color: #ffffff !important;
	background-color: rgba(255, 255, 255, 0.08) !important;
}

.sp-hero-btns .button.white.is-outline:hover {
	background-color: #ffffff !important;
	color: var(--sp-primary) !important;
	border-color: #ffffff !important;
}

.sp-hero-metrics {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	max-width: 600px;
	margin-top: 24px;
	padding-top: 18px;
	border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.sp-hero-metric {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.sp-hero-metric strong {
	display: block;
	font-size: 16.5px;
	font-weight: 800;
	line-height: 1.25;
	color: #ffffff;
}

.sp-hero-metric span {
	display: block;
	font-size: 12.5px;
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.8);
}

.sp-hero-caption {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 18px;
	padding-top: 12px;
	border-top: 1px solid rgba(255, 255, 255, 0.16);
	font-size: 12.5px;
	color: rgba(255, 255, 255, 0.78);
}

.sp-hero-caption strong {
	color: var(--sp-secondary);
}

/* Flickity Dots & Arrows của [ux_slider] */
.sp-hero-slider .flickity-page-dots {
	bottom: 58px !important;
}

.sp-hero-slider .flickity-page-dots .dot {
	width: 34px !important;
	height: 4px !important;
	border-radius: 99px !important;
	background-color: rgba(255, 255, 255, 0.35) !important;
	border: none !important;
	opacity: 1 !important;
	margin: 0 4px !important;
	transition: width 0.25s ease, background-color 0.25s ease;
}

.sp-hero-slider .flickity-page-dots .dot.is-selected {
	width: 46px !important;
	background-color: var(--sp-secondary) !important;
}

/* ==========================================================================
   5. SECTION 2: THANH 4 CAM KẾT KỸ THUẬT (.sp-usp-section - CHUẨN MẪU GỐC)
   ========================================================================== */
.sp-usp-section {
	margin-top: -42px;
	z-index: 12;
	position: relative;
	padding-top: 0 !important;
	padding-bottom: 16px !important;
}

.sp-usp-bar {
	background-color: var(--sp-paper);
	border: 1px solid var(--sp-line);
	border-radius: var(--sp-radius-lg);
	box-shadow: var(--sp-shadow-md);
	overflow: hidden;
}

.sp-usp-bar > .col {
	padding: 0 !important;
	border-right: 1px solid var(--sp-line);
}

.sp-usp-bar > .col:last-child {
	border-right: none;
}

.sp-usp-bar .col-inner {
	padding: 20px 22px !important;
	height: 100%;
}

.sp-usp-bar .icon-box {
	display: flex;
	align-items: flex-start;
	gap: 14px;
}

.sp-usp-bar .icon-box .icon-box-img {
	width: 42px !important;
	height: 42px !important;
	min-width: 42px;
	margin: 0 !important;
	border-radius: 10px;
	background-color: rgba(224, 122, 31, 0.12);
	border: 1px solid rgba(224, 122, 31, 0.22);
	color: var(--sp-primary);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 !important;
	flex-shrink: 0;
}

/* Ghi đè triệt để rule .icon-box-img svg { fill: currentColor } của Flatsome */
.sp-usp-bar .icon-box .icon-box-img svg,
.icon-box-img svg[fill="none"] {
	width: 22px !important;
	height: 22px !important;
	padding: 0 !important;
	fill: none !important;
	stroke: currentColor !important;
	stroke-width: 1.8 !important;
	stroke-linecap: round !important;
	stroke-linejoin: round !important;
}

.sp-usp-bar .icon-box .icon-box-img svg *,
.icon-box-img svg[fill="none"] * {
	fill: none !important;
	stroke: currentColor !important;
}

.sp-usp-bar .icon-box .icon-box-text {
	padding: 0 !important;
}

.sp-usp-bar .icon-box h4,
.sp-usp-bar .icon-box h5 {
	font-size: 14px !important;
	font-weight: 700 !important;
	color: var(--sp-primary) !important;
	margin: 0 0 4px 0 !important;
	line-height: 1.3 !important;
}

.sp-usp-bar .icon-box p {
	font-size: 12.5px !important;
	line-height: 1.45 !important;
	color: var(--sp-muted) !important;
	margin-bottom: 0 !important;
}

/* ==========================================================================
   6. SECTION 3: SẢN PHẨM BAO BÌ THEO NGÀNH (.sp-solutions-section)
   ========================================================================== */
.sp-solutions-section .product-category .col-inner,
.sp-solutions-section .box-Category,
.sp-solutions-section .box-overlay {
	border-radius: var(--sp-radius-lg);
	overflow: hidden;
	border: 1px solid var(--sp-line);
	background-color: var(--sp-primary);
	transition: transform 0.3s var(--sp-ease), box-shadow 0.3s var(--sp-ease);
}

.sp-solutions-section .product-category:hover .col-inner,
.sp-solutions-section .box-overlay:hover {
	transform: translateY(-4px);
	box-shadow: var(--sp-shadow-md);
}

.sp-solutions-section .box-image {
	position: relative !important;
	width: 100% !important;
	aspect-ratio: 1 / 1 !important;
	background-color: var(--sp-paper);
	overflow: hidden !important;
}

.sp-solutions-section .box-image img {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block !important;
}

.sp-solutions-section .box-image::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(11, 37, 69, 0) 52%,
		rgba(11, 37, 69, 0.62) 78%,
		rgba(11, 37, 69, 0.90) 100%
	);
	pointer-events: none;
	z-index: 1;
}

.sp-solutions-section .box-text {
	position: absolute !important;
	left: 0;
	right: 0;
	bottom: 0 !important;
	top: auto !important;
	transform: none !important;
	z-index: 2;
	padding: 14px 16px !important;
	text-align: left !important;
	background: transparent !important;
}

.sp-solutions-section .box-text-inner {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 8px;
	width: 100%;
}

.sp-solutions-section .header-title,
.sp-solutions-section .box-text h4,
.sp-solutions-section .box-text h5 {
	font-size: 15.5px !important;
	font-weight: 700 !important;
	color: #fff !important;
	text-transform: none !important;
	line-height: 1.3 !important;
	margin: 0 !important;
}

.sp-solutions-section .box-text p.count {
	margin: 0 !important;
	padding: 0 !important;
	background: none !important;
	border: none !important;
	opacity: 1 !important;
}

.sp-cat-count,
.sp-solutions-section .box-text mark.count {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px 10px;
	font-size: 11px !important;
	font-weight: 600 !important;
	color: #fff !important;
	background-color: rgba(11, 37, 69, 0.88) !important;
	border: 1px solid rgba(255, 255, 255, 0.24);
	border-radius: 999px;
	text-transform: lowercase !important;
	white-space: nowrap;
	margin: 0 !important;
	line-height: 1.35;
}

.sp-solutions-foot {
	margin-top: 28px;
	text-align: center;
}

/* ==========================================================================
   7. SECTION 4: VỀ CHÚNG TÔI - NHÀ MÁY BAO BÌ S-PAPER (.sp-about-section)
   ========================================================================== */
.sp-about-section .img-inner {
	border-radius: var(--sp-radius-lg);
	border: 1px solid var(--sp-line);
	box-shadow: var(--sp-shadow-sm);
	overflow: hidden;
}

.sp-about-main-img .img-inner img {
	aspect-ratio: 16 / 10;
	width: 100%;
	object-fit: cover;
}

.sp-about-sub-gallery .col {
	padding-bottom: 0 !important;
}

.sp-about-sub-gallery .img-inner img {
	aspect-ratio: 3 / 2;
	width: 100%;
	object-fit: cover;
}

.sp-about-lead {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.55;
	color: var(--sp-primary);
	margin-bottom: 10px;
}

.sp-about-desc {
	font-size: 14.5px;
	color: var(--sp-muted);
	margin-bottom: 16px;
}

.sp-about-checks {
	list-style: none;
	margin: 0 0 22px 0;
	padding: 16px 20px;
	background-color: var(--sp-paper);
	border: 1px solid var(--sp-line);
	border-radius: var(--sp-radius-lg);
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.sp-about-checks li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	font-size: 14px;
	font-weight: 500;
	color: var(--sp-text);
	line-height: 1.5;
}

.sp-check-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background-color: rgba(224, 122, 31, 0.16);
	color: var(--sp-primary);
	font-weight: 800;
	font-size: 12px;
	flex-shrink: 0;
	margin-top: 1px;
}

/* ==========================================================================
   8. SECTION 5: QUY TRÌNH SẢN XUẤT 6 BƯỚC (.sp-process-section)
   ========================================================================== */
.sp-process-head-row {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	border-bottom: 1px solid var(--sp-line);
	padding-bottom: 18px;
	margin-bottom: 28px;
	flex-wrap: wrap;
}

.sp-process-head-row .sp-section-head {
	margin-bottom: 0;
}

.sp-process-more-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	font-weight: 700;
	color: var(--sp-primary) !important;
	text-decoration: none !important;
	white-space: nowrap;
	padding-bottom: 4px;
	transition: color 0.2s ease, transform 0.2s ease;
}

.sp-process-more-link:hover {
	color: var(--sp-secondary) !important;
	transform: translateX(2px);
}

.sp-process-step {
	display: flex;
	flex-direction: column;
	gap: 10px;
	height: 100%;
	padding-top: 6px;
}

.sp-process-top {
	display: flex;
	align-items: center;
	gap: 12px;
}

.sp-process-code {
	font-size: 34px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.03em;
	color: rgba(11, 37, 69, 0.78);
	flex-shrink: 0;
}

.sp-process-line {
	flex: 1 1 auto;
	height: 2px;
	background-color: var(--sp-line-strong);
	transition: background-color 0.25s ease;
}

.sp-process-step:hover .sp-process-line {
	background-color: var(--sp-secondary);
}

.sp-process-step:hover .sp-process-code {
	color: var(--sp-secondary);
}

.sp-process-step h3 {
	font-size: 15.5px;
	font-weight: 700;
	color: var(--sp-primary);
	margin: 0 0 4px 0;
}

.sp-process-step p {
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--sp-muted);
	margin: 0;
}

/* ==========================================================================
   9. SECTION 6 & WOOCOMMERCE: THẺ SẢN PHẨM B2B (.sp-products-section & SHOP)
   ========================================================================== */

/* Pills Tabs của Flatsome [tabgroup style="pills"] */
.sp-products-section .nav-pills,
.sp-projects-section .nav-pills {
	gap: 8px;
	margin-bottom: 26px;
	justify-content: center;
}

.sp-products-section .nav-pills > li > a,
.sp-projects-section .nav-pills > li > a {
	min-height: 42px;
	padding: 0 18px !important;
	font-size: 13.5px !important;
	font-weight: 600 !important;
	color: var(--sp-text) !important;
	background-color: var(--sp-paper) !important;
	border: 1px solid var(--sp-line-strong) !important;
	border-radius: 999px !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	line-height: 40px !important;
	transition: all 0.2s ease !important;
}

.sp-products-section .nav-pills > li > a:hover,
.sp-projects-section .nav-pills > li > a:hover {
	border-color: var(--sp-primary) !important;
	color: var(--sp-primary) !important;
}

.sp-products-section .nav-pills > li.active > a,
.sp-projects-section .nav-pills > li.active > a {
	background-color: var(--sp-primary) !important;
	border-color: var(--sp-primary) !important;
	color: #fff !important;
	font-weight: 700 !important;
}

/* Thẻ sản phẩm WooCommerce (Flatsome .product-small.box - Đồng bộ trên mọi lưới & Mobile) */
.products .product-small.col .col-inner,
.sp-pdp-related__grid .product-small .col-inner,
.sp-article__shop-grid .product-small .col-inner,
.product-small.col > .col-inner {
	height: 100%;
	display: flex;
	flex-direction: column;
}

.products .product-small.box,
.sp-pdp-related__grid .product-small.box,
.sp-article__shop-grid .product-small.box,
.product-small.box {
	display: flex;
	flex-direction: column;
	height: 100%;
	width: 100%;
	background-color: var(--sp-paper);
	border: 1px solid var(--sp-line);
	border-radius: var(--sp-radius);
	overflow: hidden;
	transition: transform 0.25s var(--sp-ease), box-shadow 0.25s var(--sp-ease), border-color 0.25s var(--sp-ease);
}

.products .product-small.box:hover,
.sp-pdp-related__grid .product-small.box:hover,
.sp-article__shop-grid .product-small.box:hover,
.product-small.box:hover {
	transform: translateY(-4px);
	border-color: var(--sp-line-strong);
	box-shadow: var(--sp-shadow-md);
}

.products .product-small .box-image,
.sp-pdp-related__grid .product-small .box-image,
.sp-article__shop-grid .product-small .box-image,
.product-small.box > .box-image {
	position: relative !important;
	width: 100% !important;
	aspect-ratio: 1 / 1 !important;
	flex-shrink: 0 !important;
	margin: 0 !important;
	background-color: var(--sp-bg);
	border-bottom: 1px solid var(--sp-line);
	overflow: hidden !important;
}

.product-small .box-image > .image-fade_in_back,
.product-small .box-image > .image-fade_in_back > a,
.product-small .box-image > a {
	position: relative !important;
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	aspect-ratio: 1 / 1 !important;
	overflow: hidden !important;
}

.products .product-small .box-image img,
.sp-pdp-related__grid .product-small .box-image img,
.sp-article__shop-grid .product-small .box-image img,
.product-small.box > .box-image img {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	max-height: 100% !important;
	object-fit: cover !important;
	object-position: center center !important;
	display: block !important;
	margin: 0 !important;
}

/* Tắt ảnh hover thứ 2 (.back-image) trên màn hình cảm ứng & Mobile/Tablet để tránh nhấp nháy khi cuộn */
@media (hover: none), (pointer: coarse), (max-width: 849px) {
	.product-small .box-image img.back-image,
	.product-small .box-image .show-on-hover.back-image {
		display: none !important;
		opacity: 0 !important;
		pointer-events: none !important;
	}

	.product-small.box:hover {
		transform: none !important;
	}
}

.products .product-small .box-text,
.sp-pdp-related__grid .product-small .box-text,
.sp-article__shop-grid .product-small .box-text,
.product-small.box > .box-text {
	padding: 14px 16px 16px !important;
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	text-align: left !important;
}

.products .product-small .box-text .title-wrapper,
.product-small.box .box-text .title-wrapper {
	margin-bottom: 8px;
}

.products .product-small .box-text .product-title a,
.product-small.box .box-text .product-title a {
	font-size: 15px !important;
	font-weight: 600 !important;
	line-height: 1.4 !important;
	color: var(--sp-primary) !important;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.8em;
}

.products .product-small .box-text .product-title a:hover,
.product-small.box .box-text .product-title a:hover {
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Ẩn phần giá mặc định của WC vì đã hiển thị trong cụm chân thẻ B2B (.sp-card-foot) */
.products .product-small .box-text > .price-wrapper,
.product-small.box .box-text > .price-wrapper {
	display: none !important;
}

/* Bảng 3 thông số kỹ thuật trên thẻ sản phẩm (.sp-product-specs) */
.sp-product-specs {
	width: 100%;
	background-color: var(--sp-bg);
	border-radius: var(--sp-radius-sm);
	padding: 7px 10px;
	margin: 2px 0 10px 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.sp-spec-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	font-size: 12px;
	line-height: 1.35;
}

.sp-spec-key {
	color: var(--sp-muted);
	font-weight: 400;
	flex-shrink: 0;
	max-width: 48%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.sp-spec-val {
	color: var(--sp-text);
	font-weight: 600;
	text-align: right;
	flex: 1 1 auto;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Chân thẻ sản phẩm B2B: Giá + Nút Thêm báo giá + Nút Yêu cầu báo giá */
.sp-card-foot {
	margin-top: auto;
	padding-top: 10px;
	border-top: 1px solid var(--sp-line);
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 8px;
}

.sp-card-price {
	grid-column: 1;
	grid-row: 1;
	display: flex;
	align-items: baseline;
	gap: 5px;
	line-height: 1.3;
}

.sp-price-from {
	font-size: 12px;
	font-weight: 500;
	color: var(--sp-muted);
}

.sp-price-amount {
	font-size: 16px;
	font-weight: 700;
	color: var(--sp-price);
}

.sp-price-contact {
	font-size: 14px;
	font-weight: 700;
	color: var(--sp-primary);
}

button.sp-add-quote-icon-btn,
.sp-add-quote-icon-btn {
	grid-column: 2;
	grid-row: 1;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 38px !important;
	height: 38px !important;
	min-height: 38px !important;
	padding: 0 !important;
	margin: 0 !important;
	line-height: 1 !important;
	border: 1px solid var(--sp-line-strong) !important;
	border-radius: var(--sp-radius) !important;
	background-color: var(--sp-bg) !important;
	color: var(--sp-primary) !important;
	cursor: pointer;
	transition: all 0.2s ease;
}

button.sp-add-quote-icon-btn:hover,
button.sp-add-quote-icon-btn.is-added,
.sp-add-quote-icon-btn:hover,
.sp-add-quote-icon-btn.is-added {
	background-color: var(--sp-primary) !important;
	border-color: var(--sp-primary) !important;
	color: #fff !important;
}

.box .box-text a.sp-card-quote-btn,
.products .product-small .box-text a.sp-card-quote-btn,
a.sp-card-quote-btn,
.sp-card-quote-btn {
	grid-column: 1 / -1;
	grid-row: 2;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	text-align: center !important;
	width: 100% !important;
	height: 40px !important;
	min-height: 40px !important;
	padding: 0 14px !important;
	margin: 0 !important;
	font-size: 13.5px !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	color: var(--sp-primary) !important;
	background-color: var(--sp-surface-alt) !important;
	border: 1px solid var(--sp-line-strong) !important;
	border-radius: var(--sp-radius) !important;
	text-decoration: none !important;
	transition: all 0.2s ease;
}

.products .product-small.box:hover .box-text a.sp-card-quote-btn,
.box .box-text a.sp-card-quote-btn:hover,
a.sp-card-quote-btn:hover,
.sp-card-quote-btn:hover {
	background-color: var(--sp-primary) !important;
	border-color: var(--sp-primary) !important;
	color: #fff !important;
}

/* ==========================================================================
   10. SECTION 7: MÔ HÌNH 3D CẤU TẠO THÙNG CARTON (.sp-spotlight-section)
   ========================================================================== */
.sp-spotlight-stage {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.sp-spotlight-viewport {
	position: relative;
	border-radius: var(--sp-radius-lg);
	overflow: hidden;
	border: 1px solid var(--sp-line);
	background-color: var(--sp-paper);
	box-shadow: var(--sp-shadow-sm);
	aspect-ratio: 16 / 9;
	display: flex;
	align-items: center;
	justify-content: center;
}

.sp-spotlight-fallback {
	width: 100%;
	height: 100%;
}

.sp-spotlight-fallback img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.sp-spotlight-scene {
	display: none;
	width: 100%;
	height: 100%;
	align-items: center;
	justify-content: center;
	perspective: 900px;
	cursor: grab;
	user-select: none;
	background: radial-gradient(circle at center, #FFFFFF 0%, #EDF2F7 100%);
}

.sp-spotlight-stage[data-view-mode="iso"] .sp-spotlight-scene,
.sp-spotlight-stage[data-view-mode="flat"] .sp-spotlight-scene {
	display: flex;
}

.sp-spotlight-stage[data-view-mode="iso"] .sp-spotlight-fallback,
.sp-spotlight-stage[data-view-mode="flat"] .sp-spotlight-fallback {
	display: none;
}

.sp-spotlight-carton {
	position: relative;
	width: 184px;
	height: 140px;
	transform-style: preserve-3d;
	transform: rotateX(-22deg) rotateY(-34deg);
	transition: transform 0.4s var(--sp-ease);
}

.sp-spotlight-stage[data-view-mode="flat"] .sp-spotlight-carton {
	transform: rotateX(-58deg) rotateY(-12deg) scale(0.92);
}

.sp-carton-face {
	position: absolute;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 8px;
	text-align: center;
	background-color: #EBD5B3;
	border: 2px solid var(--sp-primary);
	color: var(--sp-primary);
	backface-visibility: visible;
	box-shadow: inset 0 0 20px rgba(180, 130, 70, 0.25);
}

.sp-carton-face--front {
	width: 184px;
	height: 140px;
	transform: translateZ(70px);
}

.sp-carton-face--back {
	width: 184px;
	height: 140px;
	transform: rotateY(180deg) translateZ(70px);
}

.sp-carton-face--right {
	width: 140px;
	height: 140px;
	left: 22px;
	transform: rotateY(90deg) translateZ(92px);
	background-color: var(--sp-primary);
	color: #fff;
	box-shadow: none;
}

.sp-carton-face--left {
	width: 140px;
	height: 140px;
	left: 22px;
	transform: rotateY(-90deg) translateZ(92px);
}

.sp-carton-face--bottom {
	width: 184px;
	height: 140px;
	transform: rotateX(-90deg) translateZ(70px);
}

.sp-carton-flap {
	position: absolute;
	width: 184px;
	height: 56px;
	top: -56px;
	background-color: #DFC39D;
	border: 1.5px solid var(--sp-primary);
	transform-origin: bottom center;
	transition: transform 0.35s var(--sp-ease);
}

.sp-carton-flap--front {
	transform: translateZ(70px) rotateX(38deg);
}

.sp-carton-flap--back {
	transform: translateZ(-70px) rotateX(-38deg);
}

.sp-spotlight-stage[data-view-mode="flat"] .sp-carton-flap--front {
	transform: translateZ(70px) rotateX(85deg);
}

.sp-spotlight-stage[data-view-mode="flat"] .sp-carton-flap--back {
	transform: translateZ(-70px) rotateX(-85deg);
}

.sp-carton-code {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.sp-carton-mark {
	font-size: 15px;
	font-weight: 800;
}

.sp-carton-dim {
	font-size: 11px;
	font-weight: 600;
	padding: 2px 6px;
	background: rgba(11, 37, 69, 0.1);
	border-radius: 4px;
}

.sp-flute-wave {
	width: 80%;
	height: 12px;
	border-top: 2px dashed var(--sp-secondary);
	border-bottom: 2px solid #fff;
	margin-top: 4px;
}

.sp-spotlight-controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 8px 12px;
	background-color: var(--sp-paper);
	border: 1px solid var(--sp-line);
	border-radius: var(--sp-radius);
}

.sp-spotlight-views {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.sp-spotlight-btn {
	min-height: 36px;
	padding: 0 12px;
	margin: 0 !important;
	font-size: 12px;
	font-weight: 600;
	color: var(--sp-text);
	background-color: var(--sp-surface-alt);
	border: 1px solid var(--sp-line-strong);
	border-radius: var(--sp-radius-sm);
	cursor: pointer;
	transition: all 0.2s ease;
}

.sp-spotlight-btn.is-active,
.sp-spotlight-btn:hover {
	background-color: var(--sp-primary);
	border-color: var(--sp-primary);
	color: #fff;
}

.sp-spotlight-hint {
	font-size: 12px;
	color: var(--sp-muted);
	margin: 0;
}

/* 3 Lớp giấy ở cột phải (.sp-layer-card) */
.sp-layer-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 16px 0 22px 0;
}

.sp-layer-card {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 14px 18px;
	background-color: var(--sp-paper);
	border: 1px solid var(--sp-line);
	border-radius: var(--sp-radius);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.sp-layer-card:hover {
	border-color: var(--sp-secondary);
	box-shadow: var(--sp-shadow-xs);
}

.sp-layer-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 4px 8px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.04em;
	color: #fff;
	background-color: var(--sp-primary);
	border-radius: var(--sp-radius-sm);
	flex-shrink: 0;
}

.sp-layer-body h3 {
	font-size: 15px;
	font-weight: 700;
	color: var(--sp-primary);
	margin: 0 0 4px 0;
}

.sp-layer-body p {
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--sp-muted);
	margin: 0;
}

/* ==========================================================================
   11. SECTION 8: DỰ ÁN ĐÃ THỰC HIỆN (.sp-projects-section - DÙNG [blog_posts])
   ========================================================================== */
.sp-projects-section .post-item .col-inner {
	position: relative;
	border-radius: var(--sp-radius-lg);
	overflow: hidden;
	border: 1px solid var(--sp-line);
	background-color: var(--sp-primary);
	transition: transform 0.3s var(--sp-ease), box-shadow 0.3s var(--sp-ease);
}

.sp-projects-section .post-item:hover .col-inner {
	transform: translateY(-4px);
	box-shadow: var(--sp-shadow-md);
}

.sp-projects-section .box-image {
	aspect-ratio: 16 / 9;
}

.sp-projects-section .box-image::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(11, 37, 69, 0.05) 35%,
		rgba(11, 37, 69, 0.65) 75%,
		rgba(11, 37, 69, 0.92) 100%
	);
	pointer-events: none;
}

.sp-projects-section .box-text {
	position: absolute !important;
	inset: 0 !important;
	transform: none !important;
	padding: 18px 20px !important;
	text-align: left !important;
	background: transparent !important;
	z-index: 3;
	display: flex !important;
	flex-direction: column;
	justify-content: flex-end;
	pointer-events: none;
}

.sp-projects-section .box-text a {
	pointer-events: auto;
}

.sp-projects-section .box-text .post-title {
	font-size: 16px !important;
	font-weight: 700 !important;
	line-height: 1.35 !important;
	color: #fff !important;
	margin-bottom: 6px !important;
}

.sp-projects-section .box-text .post-title a {
	color: #fff !important;
}

.sp-projects-section .box-text .post-title a:hover {
	color: var(--sp-secondary) !important;
}

.sp-projects-section .box-text .is-divider {
	display: none !important;
}

.sp-project-sector-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 4;
	padding: 4px 10px;
	font-size: 11px;
	font-weight: 700;
	color: var(--sp-primary);
	background-color: var(--sp-paper);
	border-radius: 999px;
	box-shadow: var(--sp-shadow-xs);
}

.sp-project-more-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--sp-secondary) !important;
	margin-top: 4px;
}

/* ==========================================================================
   12. SECTION 9: TIN TỨC KỸ THUẬT & TUYỂN DỤNG (.sp-news-section)
   ========================================================================== */
.sp-col-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px;
	padding-bottom: 14px;
	margin-bottom: 20px;
	border-bottom: 2px solid var(--sp-primary);
}

.sp-col-head h2 {
	font-size: 24px;
	margin: 0 0 4px 0;
}

.sp-col-head p {
	font-size: 14px;
	color: var(--sp-muted);
	margin: 0;
}

/* Danh sách bài viết Tin tức bên trái (Flatsome [blog_posts style="vertical"]) */
.sp-news-section .post-item {
	padding-bottom: 14px !important;
}

.sp-news-section .post-item .box-vertical {
	background-color: var(--sp-paper);
	border: 1px solid var(--sp-line);
	border-radius: var(--sp-radius-lg);
	padding: 14px;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.sp-news-section .post-item .box-vertical:hover {
	border-color: var(--sp-primary);
	box-shadow: var(--sp-shadow-sm);
	transform: translateY(-2px);
}

.sp-news-section .post-item .box-vertical .box-image {
	border-radius: var(--sp-radius);
	overflow: hidden;
}

.sp-news-section .post-item .box-vertical .box-text {
	padding: 4px 8px 4px 16px !important;
	text-align: left !important;
}

.sp-news-section .post-item .post-title {
	font-size: 15.5px !important;
	font-weight: 700 !important;
	line-height: 1.38 !important;
	margin-bottom: 6px !important;
}

.sp-news-section .post-item .post-title a:hover {
	color: var(--sp-secondary) !important;
}

.sp-news-section .post-item .is-divider {
	display: none !important;
}

.sp-news-section .post-item .from_the_blog_excerpt {
	font-size: 13px !important;
	color: var(--sp-muted) !important;
	line-height: 1.5 !important;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Cột Tuyển dụng bên phải (.sp-careers-box) */
.sp-careers-box {
	background-color: var(--sp-paper);
	border: 1px solid var(--sp-line);
	border-top: 3px solid var(--sp-primary);
	border-radius: var(--sp-radius-lg);
	padding: 24px;
	box-shadow: var(--sp-shadow-xs);
}

.sp-careers-box .sp-col-head {
	border-bottom: 1px solid var(--sp-line);
}

.sp-job-items {
	display: flex;
	flex-direction: column;
}

.sp-job-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 14px 0;
	border-bottom: 1px solid var(--sp-line);
}

.sp-job-item:first-child {
	padding-top: 0;
}

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

.sp-job-idx {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	font-size: 12px;
	font-weight: 700;
	color: var(--sp-primary);
	background-color: var(--sp-surface-alt);
	border-radius: var(--sp-radius-sm);
	flex-shrink: 0;
}

.sp-job-main {
	flex: 1 1 auto;
	min-width: 0;
}

.sp-job-title {
	font-size: 14px;
	font-weight: 700;
	line-height: 1.35;
	margin: 0 0 4px 0;
}

.sp-job-title a {
	color: var(--sp-text);
	text-decoration: none;
}

.sp-job-title a:hover {
	color: var(--sp-secondary);
}

.sp-job-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	color: var(--sp-muted);
}

.sp-job-badge {
	padding: 2px 8px;
	font-weight: 600;
	color: var(--sp-primary);
	background-color: var(--sp-surface-alt);
	border-radius: var(--sp-radius-sm);
}

.sp-job-cta {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 12px;
	font-weight: 700;
	color: var(--sp-primary) !important;
	white-space: nowrap;
	text-decoration: none;
}

.sp-job-cta:hover {
	color: var(--sp-secondary) !important;
	text-decoration: underline;
}

/* ==========================================================================
   13. SECTION 10: GỬI YÊU CẦU BÁO GIÁ B2B (.sp-quote-section)
   ========================================================================== */
.sp-quote-section h2 {
	color: #fff !important;
	font-size: clamp(1.6rem, 2.4vw, 2.25rem);
}

.sp-quote-points {
	list-style: none;
	margin: 18px 0 24px 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.sp-quote-points li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0;
	font-size: 14.5px;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.92);
}

.sp-quote-points li .sp-q-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background-color: rgba(224, 122, 31, 0.22);
	color: var(--sp-secondary);
	font-weight: 800;
	font-size: 13px;
	flex-shrink: 0;
	margin-top: 2px;
}

.sp-quote-card {
	background-color: var(--sp-paper);
	color: var(--sp-text);
	border: 1px solid var(--sp-line);
	border-radius: var(--sp-radius-lg);
	padding: 32px;
	box-shadow: var(--sp-shadow-lg);
}

.sp-quote-card h3 {
	font-size: 20px;
	font-weight: 700;
	color: var(--sp-primary);
	margin: 0 0 20px 0;
}

.sp-form-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}

.sp-form-field {
	display: flex;
	flex-direction: column;
	gap: 5px;
	margin-bottom: 14px;
}

.sp-form-field label {
	font-size: 12.5px;
	font-weight: 700;
	color: var(--sp-text);
	margin: 0;
}

.sp-form-field input,
.sp-form-field select,
.sp-form-field textarea {
	width: 100%;
	min-height: 44px;
	padding: 8px 12px !important;
	margin: 0 !important;
	font-size: 14px !important;
	color: var(--sp-text) !important;
	background-color: var(--sp-surface-alt) !important;
	border: 1px solid var(--sp-line-strong) !important;
	border-radius: var(--sp-radius) !important;
	box-shadow: none !important;
}

.sp-form-field textarea {
	min-height: 96px;
}

.sp-form-field input:focus,
.sp-form-field select:focus,
.sp-form-field textarea:focus {
	background-color: var(--sp-paper) !important;
	border-color: var(--sp-primary) !important;
}

.sp-form-submit {
	width: 100%;
	min-height: 46px;
	background-color: var(--sp-secondary) !important;
	border-color: var(--sp-secondary) !important;
	color: var(--sp-primary) !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	border-radius: var(--sp-radius) !important;
	cursor: pointer;
	margin-top: 4px !important;
}

.sp-form-submit:hover {
	background-color: var(--sp-secondary-hover) !important;
	border-color: var(--sp-secondary-hover) !important;
}

.sp-form-privacy {
	font-size: 12px;
	color: var(--sp-muted);
	text-align: center;
	margin: 10px 0 0 0;
}

.sp-form-response {
	display: none;
	margin-top: 12px;
	padding: 12px 16px;
	border-radius: var(--sp-radius);
	background-color: #DCFCE7;
	border: 1px solid #16A34A;
	color: #15803D;
	font-size: 13.5px;
	font-weight: 600;
}

/* ==========================================================================
   14. FOOTER UX BLOCK (.sp-footer-section)
   ========================================================================== */
.sp-footer-section {
	border-top: 3px solid var(--sp-secondary) !important;
	background-color: var(--sp-primary) !important;
}

.sp-footer-brand {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	text-decoration: none !important;
	margin-bottom: 16px;
}

.sp-footer-monogram {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 8px;
	background-color: var(--sp-secondary);
	color: var(--sp-primary);
	font-size: 15px;
	font-weight: 800;
	letter-spacing: -0.02em;
	flex-shrink: 0;
}

.sp-footer-brand-stack {
	display: flex;
	flex-direction: column;
	line-height: 1.25;
}

.sp-footer-brand-name {
	font-size: 17px;
	font-weight: 800;
	color: #fff;
	letter-spacing: 0.02em;
}

.sp-footer-brand-sub {
	font-size: 11.5px;
	font-weight: 700;
	color: var(--sp-secondary);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-top: 2px;
}

.sp-footer-about {
	font-size: 14px;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.78);
	margin: 0;
	max-width: 280px;
}

.sp-footer-heading,
.sp-footer-section h4 {
	font-size: 15px !important;
	font-weight: 700 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	color: #fff !important;
	position: relative;
	padding-bottom: 10px;
	margin: 0 0 16px 0 !important;
}

.sp-footer-heading::after,
.sp-footer-section h4::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 24px;
	height: 2px;
	background-color: var(--sp-secondary);
	border-radius: 2px;
}

.sp-footer-links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.sp-footer-links li {
	margin: 0;
}

.sp-footer-links a {
	font-size: 14px;
	color: rgba(255, 255, 255, 0.78) !important;
	text-decoration: none !important;
	transition: color 0.2s ease;
}

.sp-footer-links a:hover {
	color: var(--sp-secondary) !important;
}

.sp-footer-newsletter-card {
	background-color: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 10px;
	padding: 20px;
}

.sp-footer-newsletter-title {
	font-size: 15px !important;
	font-weight: 700 !important;
	color: #fff !important;
	margin: 0 0 8px 0 !important;
}

.sp-footer-newsletter-desc {
	font-size: 13px;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.74);
	margin: 0 0 14px 0;
}

.sp-footer-newsletter {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
}

.sp-footer-newsletter .wpcf7-form-control-wrap {
	flex: 1 1 auto;
	display: block;
	margin: 0 !important;
}

.sp-footer-newsletter input {
	width: 100% !important;
	height: 42px !important;
	margin: 0 !important;
	padding: 0 12px !important;
	border-radius: 6px !important;
	background-color: #fff !important;
	border: 1px solid rgba(255, 255, 255, 0.9) !important;
	color: var(--sp-text) !important;
	font-size: 13.5px !important;
	box-shadow: none !important;
}

.sp-footer-newsletter input::placeholder {
	color: #6B7C90;
}

.sp-footer-newsletter button,
.sp-footer-newsletter .sp-newsletter-btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	height: 42px !important;
	min-height: 42px !important;
	padding: 0 18px !important;
	margin: 0 !important;
	background-color: var(--sp-secondary) !important;
	color: var(--sp-primary) !important;
	font-weight: 700 !important;
	font-size: 14px !important;
	line-height: 1 !important;
	border-radius: 6px !important;
	border: none !important;
	cursor: pointer;
	flex-shrink: 0;
}

.sp-footer-newsletter button:hover,
.sp-footer-newsletter .sp-newsletter-btn:hover {
	background-color: var(--sp-secondary-hover) !important;
}

.sp-footer-newsletter-card .wpcf7-spinner {
	display: none !important;
}

.sp-footer-newsletter-card .wpcf7-response-output {
	margin: 10px 0 0 0 !important;
	padding: 8px 10px !important;
	font-size: 12px !important;
	border-radius: 6px !important;
	color: #fff !important;
	border-color: rgba(255, 255, 255, 0.35) !important;
}

/* Chuẩn hóa hiển thị Contact Form 7 trong .sp-quote-card */
.sp-quote-card .wpcf7-form {
	margin: 0 !important;
}

.sp-quote-card .wpcf7-form-control-wrap {
	display: block;
	width: 100%;
	margin: 0 !important;
}

.sp-quote-card .wpcf7-not-valid-tip {
	font-size: 12px;
	font-weight: 600;
	color: #dc2626;
	margin-top: 4px;
}

.sp-quote-card .wpcf7-response-output {
	margin: 14px 0 0 0 !important;
	padding: 12px 16px !important;
	border-radius: var(--sp-radius) !important;
	font-size: 13.5px !important;
	font-weight: 600 !important;
}

.sp-quote-card .wpcf7-form.sent .wpcf7-response-output {
	background-color: rgba(46, 107, 78, 0.1) !important;
	border-color: var(--sp-accent) !important;
	color: var(--sp-accent) !important;
}

.sp-footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	margin-top: 28px;
	padding-top: 20px;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.65);
}

.absolute-footer {
	display: none !important;
}

/* ==========================================================================
   15. TRANG CON B2B, GIỎ BÁO GIÁ DRAWER & CHI TIẾT SẢN PHẨM WOOCOMMERCE
   ========================================================================== */
.sp-page-hero h1 {
	color: #fff !important;
	font-size: clamp(1.75rem, 2.6vw, 2.5rem);
	margin-bottom: 10px;
}

.sp-spec-table {
	width: 100%;
	border-collapse: collapse;
	background: var(--sp-paper);
	border: 1px solid var(--sp-line);
	border-radius: var(--sp-radius);
	overflow: hidden;
	margin-bottom: 20px;
}

.sp-spec-table th,
.sp-spec-table td {
	padding: 12px 16px;
	border-bottom: 1px solid var(--sp-line);
	font-size: 14px;
	text-align: left;
}

.sp-spec-table th {
	background-color: var(--sp-surface-alt);
	color: var(--sp-primary);
	font-weight: 700;
	width: 36%;
}

.sp-info-card {
	background-color: var(--sp-paper);
	border: 1px solid var(--sp-line);
	border-radius: var(--sp-radius-lg);
	padding: 24px;
	height: 100%;
	box-shadow: var(--sp-shadow-xs);
}

.sp-info-card h3 {
	font-size: 17px;
	color: var(--sp-primary);
	margin-bottom: 8px;
}

/* Bảng danh sách báo giá trên trang /bao-gia/ */
.sp-table-remove-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 32px;
	padding: 0 12px !important;
	margin: 0 !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	color: #dc2626 !important;
	background-color: rgba(220, 38, 38, 0.06) !important;
	border: 1px solid rgba(220, 38, 38, 0.25) !important;
	border-radius: 6px !important;
	cursor: pointer;
}

.sp-table-remove-btn:hover {
	background-color: #dc2626 !important;
	color: #fff !important;
}

/* ==========================================================================
   15.1. GIỎ HÀNG B2B DRAWER (#sp-quote-drawer - CHUẨN MẪU GỐC S2 CORPORATE)
   ========================================================================== */
.sp-quote-drawer {
	position: fixed;
	inset: 0;
	z-index: 99998;
	pointer-events: none;
	visibility: hidden;
}

.sp-quote-drawer.is-open {
	pointer-events: auto;
	visibility: visible;
}

.sp-drawer-overlay {
	position: absolute;
	inset: 0;
	background-color: rgba(11, 37, 69, 0.56);
	backdrop-filter: blur(2px);
	opacity: 0;
	transition: opacity 0.28s ease;
}

.sp-quote-drawer.is-open .sp-drawer-overlay {
	opacity: 1;
}

.sp-drawer-panel {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(440px, 94vw);
	background-color: #ffffff;
	box-shadow: -14px 0 40px rgba(11, 37, 69, 0.22);
	display: flex;
	flex-direction: column;
	transform: translateX(100%);
	transition: transform 0.3s var(--sp-ease);
}

.sp-quote-drawer.is-open .sp-drawer-panel {
	transform: translateX(0);
}

/* Header sáng chuẩn S2 Corporate */
.sp-cart-modal__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 18px 22px;
	background-color: #ffffff;
	border-bottom: 1px solid var(--sp-line);
}

.sp-cart-modal__header-main {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.sp-cart-modal__header-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--sp-primary);
}

.sp-cart-modal__title {
	font-size: 18px !important;
	font-weight: 800 !important;
	color: var(--sp-primary) !important;
	margin: 0 !important;
	line-height: 1.2 !important;
}

.sp-cart-modal__badge {
	font-size: 15px;
	font-weight: 700;
	color: var(--sp-muted);
}

.sp-cart-modal__close {
	width: 34px !important;
	height: 34px !important;
	min-height: 34px !important;
	padding: 0 !important;
	margin: 0 !important;
	border: none !important;
	background: transparent !important;
	color: var(--sp-muted) !important;
	border-radius: 6px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.sp-cart-modal__close:hover {
	background-color: var(--sp-surface-alt) !important;
	color: var(--sp-primary) !important;
}

/* Thanh tiến trình Freeship nội thành */
.sp-cart-modal__shipping {
	padding: 14px 22px;
	background-color: #f8fafc;
	border-bottom: 1px solid var(--sp-line);
}

.sp-cart-modal__shipping-top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 8px;
}

.sp-cart-modal__shipping-copy {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 13px;
	line-height: 1.45;
	color: var(--sp-text);
}

.sp-cart-modal__shipping-icon {
	color: var(--sp-secondary);
	flex-shrink: 0;
	margin-top: 2px;
}

.sp-cart-modal__shipping-text strong {
	color: var(--sp-primary);
	font-weight: 800;
}

.sp-cart-modal__shipping-pct {
	font-size: 12.5px;
	font-weight: 800;
	color: var(--sp-primary);
	flex-shrink: 0;
}

.sp-cart-modal__shipping-track {
	width: 100%;
	height: 6px;
	background-color: #e2e8f0;
	border-radius: 999px;
	overflow: hidden;
	margin-bottom: 8px;
}

.sp-cart-modal__shipping-bar {
	height: 100%;
	background: linear-gradient(90deg, var(--sp-secondary) 0%, #f59e0b 100%);
	border-radius: 999px;
	transition: width 0.35s ease;
}

.sp-cart-modal__shipping-note {
	font-size: 12px;
	color: var(--sp-muted);
	margin: 0 !important;
	line-height: 1.4;
}

/* Body của Giỏ hàng B2B */
.sp-cart-modal__body {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 20px 22px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 20px;
}

.sp-cart-empty-state {
	text-align: center;
	padding: 36px 12px 24px;
}

.sp-cart-empty-state__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #94a3b8;
	margin-bottom: 12px;
}

.sp-cart-empty-state__title {
	font-size: 18px !important;
	font-weight: 800 !important;
	color: var(--sp-primary) !important;
	margin: 0 0 8px 0 !important;
}

.sp-cart-empty-state__desc {
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--sp-muted);
	margin: 0 0 18px 0 !important;
}

.sp-cart-empty-state__cta {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	height: 40px !important;
	padding: 0 20px !important;
	background-color: var(--sp-primary) !important;
	color: #ffffff !important;
	font-size: 13.5px !important;
	font-weight: 700 !important;
	border-radius: 8px !important;
	text-decoration: none !important;
	transition: background-color 0.2s ease;
}

.sp-cart-empty-state__cta:hover {
	background-color: var(--sp-primary-hover) !important;
	color: #ffffff !important;
}

/* Danh sách sản phẩm trong Giỏ hàng B2B */
.sp-cart-items-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.sp-cart-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 12px;
	background-color: #f8fafc;
	border: 1px solid var(--sp-line);
	border-radius: 10px;
}

.sp-cart-item__media {
	width: 64px;
	height: 64px;
	border-radius: 8px;
	overflow: hidden;
	border: 1px solid var(--sp-line);
	background-color: #fff;
	flex-shrink: 0;
}

.sp-cart-item__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.sp-cart-item__main {
	flex: 1 1 auto;
	min-width: 0;
}

.sp-cart-item__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 8px;
}

.sp-cart-item__title {
	font-size: 13.5px;
	font-weight: 700;
	color: var(--sp-primary) !important;
	text-decoration: none !important;
	line-height: 1.35;
}

.sp-cart-item__title:hover {
	color: var(--sp-secondary) !important;
}

.sp-cart-item__remove {
	width: 24px !important;
	height: 24px !important;
	min-height: 24px !important;
	padding: 0 !important;
	margin: 0 !important;
	border: none !important;
	background: transparent !important;
	color: #94a3b8 !important;
	font-size: 13px !important;
	cursor: pointer;
	flex-shrink: 0;
}

.sp-cart-item__remove:hover {
	color: #dc2626 !important;
}

.sp-cart-item__spec {
	font-size: 11.5px;
	color: var(--sp-muted);
	margin: 4px 0 8px 0;
	line-height: 1.4;
}

.sp-cart-item__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.sp-cart-item__qty {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--sp-line-strong);
	border-radius: 6px;
	background-color: #fff;
	overflow: hidden;
}

.sp-cart-item__qty-btn {
	width: 28px !important;
	height: 28px !important;
	min-height: 28px !important;
	padding: 0 !important;
	margin: 0 !important;
	border: none !important;
	background: transparent !important;
	color: var(--sp-primary) !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	cursor: pointer;
}

.sp-cart-item__qty-btn:hover {
	background-color: var(--sp-surface-alt) !important;
}

.sp-cart-item__qty-input {
	width: 48px !important;
	height: 28px !important;
	margin: 0 !important;
	padding: 0 4px !important;
	border: none !important;
	border-left: 1px solid var(--sp-line) !important;
	border-right: 1px solid var(--sp-line) !important;
	text-align: center !important;
	font-size: 12.5px !important;
	font-weight: 700 !important;
	color: var(--sp-primary) !important;
	box-shadow: none !important;
}

.sp-cart-item__price {
	font-size: 13.5px;
	font-weight: 800;
	color: var(--sp-price);
}

/* Upsell Vật tư đóng gói đi kèm */
.sp-cart-modal__upsell {
	border-top: 1px solid var(--sp-line);
	padding-top: 16px;
	margin-top: auto;
}

.sp-cart-modal__upsell-title {
	font-size: 13.5px !important;
	font-weight: 700 !important;
	color: var(--sp-primary) !important;
	margin: 0 0 12px 0 !important;
}

.sp-cart-modal__upsell-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.sp-cart-modal__upsell-card {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	background-color: #ffffff;
	border: 1px solid var(--sp-line);
	border-radius: 10px;
}

.sp-cart-modal__upsell-media {
	width: 52px;
	height: 52px;
	border-radius: 8px;
	overflow: hidden;
	background-color: #f1f5f9;
	flex-shrink: 0;
}

.sp-cart-modal__upsell-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.sp-cart-modal__upsell-info {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.sp-cart-modal__upsell-name {
	font-size: 13.5px;
	font-weight: 700;
	color: var(--sp-primary) !important;
	text-decoration: none !important;
	line-height: 1.3;
}

.sp-cart-modal__upsell-name:hover {
	color: var(--sp-secondary) !important;
}

.sp-cart-modal__upsell-price {
	font-size: 13px;
	font-weight: 700;
	color: var(--sp-price);
}

.sp-cart-modal__upsell-btn {
	height: 34px !important;
	min-height: 34px !important;
	padding: 0 12px !important;
	margin: 0 !important;
	font-size: 12.5px !important;
	font-weight: 700 !important;
	color: var(--sp-primary) !important;
	background-color: #ffffff !important;
	border: 1px solid var(--sp-line-strong) !important;
	border-radius: 7px !important;
	cursor: pointer;
	flex-shrink: 0;
	transition: all 0.2s ease;
}

.sp-cart-modal__upsell-btn:hover {
	background-color: var(--sp-primary) !important;
	border-color: var(--sp-primary) !important;
	color: #ffffff !important;
}

/* Footer của Giỏ hàng B2B */
.sp-cart-modal__footer {
	padding: 16px 22px 18px;
	background-color: #ffffff;
	border-top: 1px solid var(--sp-line);
}

.sp-cart-modal__summary-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 14px;
}

.sp-cart-modal__summary-label {
	font-size: 14.5px;
	font-weight: 800;
	color: var(--sp-primary);
}

.sp-cart-modal__vat-note {
	font-size: 12px;
	color: var(--sp-muted);
	margin-left: 4px;
}

.sp-cart-modal__total {
	font-size: 17px;
	font-weight: 800;
	color: var(--sp-price);
}

.sp-cart-modal__actions {
	display: grid;
	grid-template-columns: 1fr 1.35fr;
	gap: 10px;
	margin-bottom: 12px;
}

.sp-cart-modal__btn-view,
.sp-cart-modal__btn-checkout {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 6px;
	height: 42px !important;
	padding: 0 14px !important;
	font-size: 13.5px !important;
	font-weight: 700 !important;
	border-radius: 8px !important;
	text-decoration: none !important;
	transition: all 0.2s ease;
}

.sp-cart-modal__btn-view {
	background-color: #ffffff !important;
	color: var(--sp-primary) !important;
	border: 1px solid var(--sp-line-strong) !important;
}

.sp-cart-modal__btn-view:hover {
	background-color: var(--sp-surface-alt) !important;
	border-color: var(--sp-primary) !important;
}

.sp-cart-modal__btn-checkout {
	background-color: var(--sp-primary) !important;
	color: #ffffff !important;
	border: 1px solid var(--sp-primary) !important;
}

.sp-cart-modal__btn-checkout:hover {
	background-color: var(--sp-primary-hover) !important;
}

.sp-cart-modal__trust {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding-top: 10px;
	border-top: 1px dashed var(--sp-line);
	font-size: 11.5px;
	color: var(--sp-muted);
}

.sp-cart-modal__trust-item {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.sp-cart-modal__trust-item svg {
	color: var(--sp-accent);
	flex-shrink: 0;
}

.sp-drawer-clear-btn {
	background: none !important;
	border: none !important;
	color: var(--sp-muted) !important;
	font-size: 12.5px !important;
	font-weight: 600 !important;
	padding: 4px !important;
	margin: 0 !important;
	min-height: 0 !important;
	cursor: pointer;
	text-decoration: underline;
}

.sp-drawer-clear-btn:hover {
	color: #dc2626 !important;
}

/* ==========================================================================
   15.2. TRANG SẢN PHẨM & BỘ LỌC THÔNG SỐ KỸ THUẬT ([sp_product_catalog])
   ========================================================================== */
.sp-breadcrumb {
	padding: 16px 0 12px;
	background-color: var(--sp-bg);
}

.sp-breadcrumb__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	font-size: 13px;
}

.sp-breadcrumb__item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 !important;
}

.sp-breadcrumb__link {
	color: var(--sp-muted) !important;
	text-decoration: none !important;
	font-weight: 500;
}

.sp-breadcrumb__link:hover {
	color: var(--sp-primary) !important;
}

.sp-breadcrumb__sep {
	color: #94a3b8;
}

.sp-breadcrumb__current {
	color: var(--sp-primary);
	font-weight: 700;
}

.sp-catalog-page {
	background-color: var(--sp-bg);
	padding-bottom: 64px;
}

.sp-catalog-head {
	margin-bottom: 24px;
}

.sp-catalog-head__panel {
	display: grid;
	grid-template-columns: 1fr 290px;
	align-items: center;
	gap: 32px;
	padding: 26px 32px;
	background: linear-gradient(135deg, #eef3f9 0%, #f8fafc 100%);
	border: 1px solid var(--sp-line);
	border-radius: 16px;
}

.sp-catalog-head__title {
	font-size: clamp(1.65rem, 2.3vw, 2.2rem) !important;
	font-weight: 800 !important;
	color: var(--sp-primary) !important;
	margin: 0 0 10px 0 !important;
	line-height: 1.2 !important;
}

.sp-catalog-head__desc {
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--sp-muted);
	margin: 0 !important;
	max-width: 720px;
}

.sp-catalog-head__media {
	border-radius: 12px;
	overflow: hidden;
	border: 1px solid rgba(11, 37, 69, 0.1);
	box-shadow: var(--sp-shadow-sm);
	aspect-ratio: 16 / 10;
	background-color: #fff;
}

.sp-catalog-head__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Layout 2 Cột: Sidebar Bộ lọc + Lưới sản phẩm */
.sp-catalog-layout {
	display: grid;
	grid-template-columns: 276px minmax(0, 1fr);
	gap: 24px;
	align-items: start;
}

.sp-catalog-overlay,
.sp-filter-drawer__header,
.sp-filter-drawer__footer {
	display: none;
}

.sp-catalog-sidebar {
	background-color: #ffffff;
	border: 1px solid var(--sp-line);
	border-radius: 14px;
	padding: 20px;
	position: sticky;
	top: 88px;
	max-height: calc(100vh - 108px);
	overflow-y: auto;
	box-shadow: var(--sp-shadow-xs);
}

.sp-facets__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--sp-line);
	margin-bottom: 14px;
}

.sp-facets__heading {
	font-size: 15.5px !important;
	font-weight: 800 !important;
	line-height: 1.3 !important;
	color: var(--sp-primary) !important;
	margin: 0 !important;
	white-space: nowrap;
}

.sp-facets__clear {
	display: inline-flex !important;
	align-items: center !important;
	background: none !important;
	border: none !important;
	padding: 0 !important;
	margin: 0 !important;
	min-height: 0 !important;
	height: auto !important;
	line-height: 1.2 !important;
	font-family: inherit !important;
	font-size: 12.5px !important;
	font-weight: 600 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	white-space: nowrap !important;
	flex-shrink: 0 !important;
	color: var(--sp-secondary) !important;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.sp-facets__clear:hover {
	color: var(--sp-primary) !important;
}

.sp-facets__clear[disabled] {
	display: none !important;
}

.sp-facet-block {
	border-bottom: 1px solid var(--sp-line);
	padding-bottom: 16px;
	margin-bottom: 16px;
}

.sp-facet-block:last-child {
	border-bottom: none;
	padding-bottom: 0;
	margin-bottom: 0;
}

.sp-facet-block__header {
	width: 100% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	background: none !important;
	border: none !important;
	padding: 0 !important;
	margin: 0 0 12px 0 !important;
	min-height: 0 !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	color: var(--sp-primary) !important;
	cursor: pointer;
	text-align: left;
}

.sp-facet-block.is-collapsed .sp-facet-block__header {
	margin-bottom: 0 !important;
}

.sp-facet-block.is-collapsed .sp-facet-block__body {
	display: none;
}

.sp-facet-block__chevron {
	color: var(--sp-muted);
	transition: transform 0.2s ease;
}

.sp-facet-block.is-collapsed .sp-facet-block__chevron {
	transform: rotate(-90deg);
}

.sp-facet-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.sp-facet-item__label {
	display: flex !important;
	align-items: center !important;
	gap: 10px;
	font-size: 13.5px !important;
	font-weight: 500 !important;
	color: var(--sp-text) !important;
	margin: 0 !important;
	cursor: pointer;
	user-select: none;
}

.sp-facet-item__input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.sp-facet-item__box {
	width: 17px;
	height: 17px;
	border-radius: 4px;
	border: 1.5px solid #cbd5e1;
	background-color: #ffffff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: all 0.15s ease;
}

.sp-facet-item__input:checked + .sp-facet-item__box {
	background-color: var(--sp-primary);
	border-color: var(--sp-primary);
}

.sp-facet-item__input:checked + .sp-facet-item__box::after {
	content: "";
	width: 5px;
	height: 9px;
	border: solid #ffffff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
	margin-top: -1px;
}

.sp-facet-item__input:checked ~ .sp-facet-item__text {
	font-weight: 700;
	color: var(--sp-primary);
}

/* Pill boxes cho Quy cách & Lớp sóng */
.sp-facet-sizes {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.sp-facet-size__label {
	margin: 0 !important;
	cursor: pointer;
}

.sp-facet-size__input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.sp-facet-size__box {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 6px 12px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--sp-text);
	background-color: #f8fafc;
	border: 1px solid var(--sp-line-strong);
	border-radius: 7px;
	transition: all 0.18s ease;
}

.sp-facet-size__label:hover .sp-facet-size__box {
	border-color: var(--sp-primary);
}

.sp-facet-size__input:checked + .sp-facet-size__box {
	background-color: var(--sp-primary);
	border-color: var(--sp-primary);
	color: #ffffff;
}

/* Toolbar phía trên lưới sản phẩm */
.sp-catalog-toolbar {
	background-color: #ffffff;
	border: 1px solid var(--sp-line);
	border-radius: 12px;
	padding: 12px 18px;
	margin-bottom: 18px;
	box-shadow: var(--sp-shadow-xs);
}

.sp-catalog-toolbar__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

.sp-catalog-toolbar__left {
	display: flex;
	align-items: center;
	gap: 12px;
}

.sp-catalog-toolbar__filter-btn {
	display: none;
	align-items: center;
	gap: 6px;
	height: 36px !important;
	min-height: 36px !important;
	padding: 0 12px !important;
	margin: 0 !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	color: var(--sp-primary) !important;
	background-color: #fff !important;
	border: 1px solid var(--sp-line-strong) !important;
	border-radius: 8px !important;
}

.sp-catalog-toolbar__summary {
	font-size: 13.5px;
	color: var(--sp-muted);
	margin: 0 !important;
}

.sp-catalog-toolbar__summary strong {
	color: var(--sp-primary);
	font-weight: 800;
}

.sp-catalog-toolbar__right {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}

.sp-catalog-sort {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.sp-catalog-sort__label {
	font-size: 13px !important;
	font-weight: 600 !important;
	color: var(--sp-muted) !important;
	margin: 0 !important;
	white-space: nowrap;
}

.sp-catalog-sort__select {
	height: 36px !important;
	min-width: 170px;
	padding: 0 30px 0 12px !important;
	margin: 0 !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: var(--sp-primary) !important;
	background-color: #ffffff !important;
	border: 1px solid var(--sp-line-strong) !important;
	border-radius: 8px !important;
	box-shadow: none !important;
}

/* Grid Density Switcher (2 | 3 | 4 | List) */
.sp-layout-switcher {
	display: inline-flex;
	align-items: center;
	padding: 3px;
	background-color: #f1f5f9;
	border: 1px solid var(--sp-line);
	border-radius: 8px;
	gap: 2px;
}

.sp-layout-switcher__btn {
	width: 32px !important;
	height: 30px !important;
	min-height: 30px !important;
	padding: 0 !important;
	margin: 0 !important;
	border: none !important;
	border-radius: 6px !important;
	background: transparent !important;
	color: var(--sp-muted) !important;
	font-size: 12.5px !important;
	font-weight: 700 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	cursor: pointer;
	transition: all 0.15s ease;
}

.sp-layout-switcher__btn.is-active {
	background-color: #ffffff !important;
	color: var(--sp-primary) !important;
	box-shadow: 0 1px 2px rgba(11, 37, 69, 0.1);
}

/* Active filter chips */
.sp-active-filters {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px dashed var(--sp-line);
}

.sp-active-filters__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.sp-active-filter-chip {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px;
	height: 28px !important;
	min-height: 28px !important;
	padding: 0 10px !important;
	margin: 0 !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	color: var(--sp-primary) !important;
	background-color: #eef3f9 !important;
	border: 1px solid #cbd5e1 !important;
	border-radius: 999px !important;
	cursor: pointer;
}

.sp-active-filter-chip:hover {
	background-color: var(--sp-primary) !important;
	border-color: var(--sp-primary) !important;
	color: #fff !important;
}

.sp-active-filters__clear,
.sp-filter-drawer__reset {
	display: inline-flex !important;
	align-items: center !important;
	background: none !important;
	border: none !important;
	padding: 0 !important;
	margin: 0 !important;
	min-height: 0 !important;
	height: auto !important;
	line-height: 1.2 !important;
	font-family: inherit !important;
	font-size: 12.5px !important;
	font-weight: 700 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	white-space: nowrap !important;
	flex-shrink: 0 !important;
	color: #dc2626 !important;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Mã SKU trên thẻ sản phẩm */
.sp-product-card-meta {
	margin-bottom: 4px;
}

.sp-product-sku {
	font-size: 11.5px;
	font-weight: 600;
	color: #64748b;
	letter-spacing: 0.01em;
}

/* Chế độ hiển thị List (is-density-list) */
.sp-catalog-grid.is-density-list .product-small.box {
	display: grid;
	grid-template-columns: 220px minmax(0, 1fr);
	align-items: stretch;
}

.sp-catalog-grid.is-density-list .box-image {
	border-bottom: none;
	border-right: 1px solid var(--sp-line);
}

.sp-catalog-grid.is-density-list .box-text-products {
	padding: 20px 24px !important;
}

@media (max-width: 640px) {
	.sp-catalog-grid.is-density-list .product-small.box {
		grid-template-columns: 124px minmax(0, 1fr);
	}

	.sp-catalog-grid.is-density-list .box-text-products {
		padding: 12px 14px !important;
	}
}

@media (max-width: 549px) {
	.product-small.box > .box-text {
		padding: 10px 12px 12px !important;
	}

	.product-small.box .box-text .product-title a {
		font-size: 13.5px !important;
	}

	.sp-product-specs {
		padding: 6px 8px;
	}

	.sp-spec-row {
		font-size: 11px;
	}

	.sp-price-amount {
		font-size: 14px;
	}

	.sp-price-contact {
		font-size: 12.5px;
	}

	button.sp-add-quote-icon-btn,
	.sp-add-quote-icon-btn {
		width: 34px !important;
		height: 34px !important;
		min-height: 34px !important;
	}
}

.sp-catalog-empty {
	text-align: center;
	padding: 56px 24px;
	background-color: #ffffff;
	border: 1px solid var(--sp-line);
	border-radius: 14px;
}

.sp-catalog-empty svg {
	color: #94a3b8;
	margin-bottom: 12px;
}

.sp-catalog-empty h3 {
	font-size: 18px;
	color: var(--sp-primary);
	margin-bottom: 6px;
}

.sp-catalog-empty p {
	font-size: 14px;
	color: var(--sp-muted);
	margin-bottom: 16px;
}

/* ==========================================================================
   15.3. TRANG DỰ ÁN, TIN TỨC & TUYỂN DỤNG (archive.php - CHUẨN S2 CORPORATE)
   ========================================================================== */
.sp-blog-archive {
	background-color: var(--sp-bg);
	padding-bottom: 64px;
}

.sp-blog__hero {
	margin-bottom: 28px;
}

.sp-blog__hero-inner {
	background: linear-gradient(135deg, #eef3f9 0%, #f8fafc 100%);
	border: 1px solid var(--sp-line);
	border-radius: 16px;
	padding: 28px 32px;
}

.sp-blog__title {
	font-size: clamp(1.75rem, 2.5vw, 2.35rem) !important;
	font-weight: 800 !important;
	color: var(--sp-primary) !important;
	margin: 0 0 8px 0 !important;
}

.sp-blog__desc {
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--sp-muted);
	max-width: 780px;
	margin: 0 0 20px 0 !important;
}

.sp-blog__toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	padding-top: 16px;
	border-top: 1px solid var(--sp-line);
}

.sp-blog__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	flex: 1 1 auto;
}

.sp-blog__tag {
	height: 34px !important;
	min-height: 34px !important;
	padding: 0 14px !important;
	margin: 0 !important;
	font-size: 12.5px !important;
	font-weight: 600 !important;
	color: var(--sp-text) !important;
	background-color: #ffffff !important;
	border: 1px solid var(--sp-line-strong) !important;
	border-radius: 999px !important;
	cursor: pointer;
	transition: all 0.18s ease;
}

.sp-blog__tag:hover {
	border-color: var(--sp-primary) !important;
	color: var(--sp-primary) !important;
}

.sp-blog__tag.is-active {
	background-color: var(--sp-primary) !important;
	border-color: var(--sp-primary) !important;
	color: #ffffff !important;
}

.sp-blog__counter {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	background-color: #ffffff;
	border: 1px solid var(--sp-line);
	border-radius: 999px;
	font-size: 13px;
	color: var(--sp-muted);
	flex-shrink: 0;
}

.sp-blog__counter-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: var(--sp-secondary);
}

.sp-blog__counter strong {
	color: var(--sp-primary);
	font-weight: 800;
}

/* Thẻ Tiêu điểm kỹ thuật (Featured Card 2 cột) */
.sp-blog__featured {
	margin-bottom: 36px;
}

.sp-blog__featured-card {
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	background-color: #ffffff;
	border: 1px solid var(--sp-line);
	border-radius: 16px;
	overflow: hidden;
	box-shadow: var(--sp-shadow-sm);
}

.sp-blog__featured-media {
	position: relative;
	display: block;
	min-height: 320px;
	background-color: #e2e8f0;
	overflow: hidden;
}

.sp-blog__featured-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}

.sp-blog__featured-card:hover .sp-blog__featured-image {
	transform: scale(1.03);
}

.sp-blog__featured-badge {
	position: absolute;
	top: 16px;
	left: 16px;
	padding: 6px 12px;
	font-size: 12px;
	font-weight: 700;
	color: #ffffff;
	background-color: var(--sp-primary);
	border-radius: 999px;
}

.sp-blog__featured-body {
	padding: 32px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.sp-blog__featured-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--sp-muted);
	margin-bottom: 12px;
}

.sp-blog__featured-tag {
	padding: 3px 10px;
	background-color: #eef3f9;
	color: var(--sp-primary);
	font-weight: 700;
	border-radius: 6px;
}

.sp-blog__featured-read {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.sp-blog__featured-title {
	font-size: clamp(1.35rem, 2vw, 1.7rem) !important;
	font-weight: 800 !important;
	line-height: 1.3 !important;
	margin: 0 0 12px 0 !important;
}

.sp-blog__featured-title a {
	color: var(--sp-primary) !important;
	text-decoration: none !important;
}

.sp-blog__featured-title a:hover {
	color: var(--sp-secondary) !important;
}

.sp-blog__featured-excerpt {
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--sp-muted);
	margin: 0 0 22px 0 !important;
}

.sp-blog__featured-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-top: 18px;
	border-top: 1px solid var(--sp-line);
	margin-top: auto;
}

.sp-blog__featured-author {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.sp-blog__featured-avatar {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background-color: var(--sp-primary);
	color: #ffffff;
	font-size: 14px;
	font-weight: 800;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.sp-blog__featured-author-name {
	font-size: 13.5px;
	font-weight: 700;
	color: var(--sp-primary);
}

.sp-blog__featured-cta {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px;
	height: 40px !important;
	padding: 0 18px !important;
	background-color: var(--sp-primary) !important;
	color: #ffffff !important;
	font-size: 13.5px !important;
	font-weight: 700 !important;
	border-radius: 8px !important;
	text-decoration: none !important;
	transition: background-color 0.2s ease;
}

.sp-blog__featured-cta:hover {
	background-color: var(--sp-primary-hover) !important;
	color: #ffffff !important;
}

/* Listing Header */
.sp-blog__listing-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 20px;
}

.sp-blog__listing-title {
	font-size: 20px !important;
	font-weight: 800 !important;
	color: var(--sp-primary) !important;
	margin: 0 !important;
}

.sp-blog__careers-head-link {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px;
	height: 38px !important;
	padding: 0 16px !important;
	background-color: #ffffff !important;
	color: var(--sp-primary) !important;
	border: 1px solid var(--sp-line-strong) !important;
	border-radius: 8px !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	text-decoration: none !important;
	transition: all 0.2s ease;
}

.sp-blog__careers-head-link:hover {
	border-color: var(--sp-primary) !important;
	background-color: var(--sp-primary) !important;
	color: #ffffff !important;
}

/* 1. Lưới Dự án (.sp-blog__projects-grid) */
.sp-blog__projects-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
}

.sp-blog__project-card {
	background-color: #ffffff;
	border: 1px solid var(--sp-line);
	border-radius: 14px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: var(--sp-shadow-xs);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.sp-blog__project-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--sp-shadow-md);
}

.sp-blog__project-media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 10;
	background-color: #e2e8f0;
	overflow: hidden;
}

.sp-blog__project-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.35s ease;
}

.sp-blog__project-card:hover .sp-blog__project-img {
	transform: scale(1.04);
}

.sp-blog__project-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	padding: 5px 11px;
	font-size: 11.5px;
	font-weight: 700;
	color: #ffffff;
	background-color: rgba(11, 37, 69, 0.88);
	backdrop-filter: blur(4px);
	border-radius: 999px;
}

.sp-blog__project-body {
	padding: 20px;
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

.sp-blog__project-meta {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12.5px;
	color: var(--sp-muted);
	margin-bottom: 8px;
}

.sp-blog__project-meta svg {
	color: var(--sp-secondary);
	flex-shrink: 0;
}

.sp-blog__project-client {
	color: var(--sp-primary);
	font-weight: 700;
}

.sp-blog__project-title {
	font-size: 16.5px !important;
	font-weight: 800 !important;
	line-height: 1.38 !important;
	margin: 0 0 10px 0 !important;
}

.sp-blog__project-title a {
	color: var(--sp-primary) !important;
	text-decoration: none !important;
}

.sp-blog__project-title a:hover {
	color: var(--sp-secondary) !important;
}

.sp-blog__project-excerpt {
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--sp-muted);
	margin: 0 0 14px 0 !important;
}

.sp-blog__project-result {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	padding: 10px 12px;
	background-color: #f0fdf4;
	border: 1px solid #bbf7d0;
	border-radius: 8px;
	margin-bottom: 16px;
	margin-top: auto;
}

.sp-blog__project-result svg {
	color: #16a34a;
	flex-shrink: 0;
	margin-top: 2px;
}

.sp-blog__project-result-copy {
	font-size: 12.5px;
	line-height: 1.4;
}

.sp-blog__project-result-label {
	color: var(--sp-muted);
	margin-right: 4px;
}

.sp-blog__project-result-val {
	font-weight: 700;
	color: #15803d;
}

.sp-blog__project-actions {
	padding-top: 12px;
	border-top: 1px solid var(--sp-line);
}

.sp-blog__project-cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--sp-primary) !important;
	text-decoration: none !important;
}

.sp-blog__project-cta:hover {
	color: var(--sp-secondary) !important;
}

/* 2. Lưới Tin tức Kỹ thuật (.sp-blog__grid & .sp-article-card) */
.sp-blog__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
}

.sp-article-card {
	background-color: #ffffff;
	border: 1px solid var(--sp-line);
	border-radius: 14px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: var(--sp-shadow-xs);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.sp-article-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--sp-shadow-md);
}

.sp-article-card__media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	background-color: #e2e8f0;
	overflow: hidden;
}

.sp-article-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.35s ease;
}

.sp-article-card:hover .sp-article-card__image {
	transform: scale(1.04);
}

.sp-article-card__badge {
	position: absolute;
	top: 12px;
	left: 12px;
	padding: 4px 10px;
	font-size: 11.5px;
	font-weight: 700;
	color: #ffffff;
	background-color: rgba(11, 37, 69, 0.88);
	border-radius: 999px;
}

.sp-article-card__body {
	padding: 20px;
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

.sp-article-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: var(--sp-muted);
	margin-bottom: 8px;
}

.sp-article-card__title {
	font-size: 16px !important;
	font-weight: 800 !important;
	line-height: 1.4 !important;
	margin: 0 0 10px 0 !important;
}

.sp-article-card__title a {
	color: var(--sp-primary) !important;
	text-decoration: none !important;
}

.sp-article-card__title a:hover {
	color: var(--sp-secondary) !important;
}

.sp-article-card__excerpt {
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--sp-muted);
	margin: 0 0 16px 0 !important;
	flex: 1 1 auto;
}

.sp-article-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--sp-primary) !important;
	text-decoration: none !important;
	margin-top: auto;
}

.sp-article-card__cta:hover {
	color: var(--sp-secondary) !important;
}

/* 3. Danh sách Tuyển dụng (.sp-blog__careers-list & .sp-blog__job-card) */
.sp-blog__careers-list {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.sp-blog__job-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 24px 28px;
	background-color: #ffffff;
	border: 1px solid var(--sp-line);
	border-radius: 14px;
	box-shadow: var(--sp-shadow-xs);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.sp-blog__job-card:hover {
	border-color: var(--sp-primary);
	box-shadow: var(--sp-shadow-sm);
}

.sp-blog__job-main {
	flex: 1 1 auto;
	min-width: 0;
}

.sp-blog__job-title {
	font-size: 18px !important;
	font-weight: 800 !important;
	margin: 0 0 10px 0 !important;
	line-height: 1.3 !important;
}

.sp-blog__job-title a {
	color: var(--sp-primary) !important;
	text-decoration: none !important;
}

.sp-blog__job-title a:hover {
	color: var(--sp-secondary) !important;
}

.sp-blog__job-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	font-size: 13px;
	color: var(--sp-muted);
	margin-bottom: 10px;
}

.sp-blog__job-spec,
.sp-blog__job-date {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.sp-blog__job-spec strong {
	color: var(--sp-primary);
}

.sp-blog__job-spec--dept {
	padding: 3px 10px;
	background-color: #eef3f9;
	color: var(--sp-primary);
	font-weight: 700;
	font-size: 12px;
	border-radius: 999px;
}

.sp-blog__job-excerpt {
	font-size: 14px;
	line-height: 1.55;
	color: var(--sp-muted);
	margin: 0 !important;
}

.sp-blog__job-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
}

.sp-blog__job-detail,
.sp-blog__job-apply {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 6px;
	height: 40px !important;
	min-height: 40px !important;
	padding: 0 16px !important;
	margin: 0 !important;
	font-family: inherit !important;
	font-size: 13.5px !important;
	font-weight: 700 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	border-radius: 8px !important;
	text-decoration: none !important;
	white-space: nowrap;
	cursor: pointer;
	transition: all 0.2s ease;
}

.sp-blog__job-detail {
	background-color: #ffffff !important;
	color: var(--sp-primary) !important;
	border: 1px solid var(--sp-line-strong) !important;
}

.sp-blog__job-detail:hover {
	background-color: var(--sp-surface-alt) !important;
	border-color: var(--sp-primary) !important;
}

.sp-blog__job-apply {
	background-color: var(--sp-primary) !important;
	color: #ffffff !important;
	border: 1px solid var(--sp-primary) !important;
}

.sp-blog__job-apply:hover {
	background-color: var(--sp-primary-hover) !important;
}

/* 4. Khối Nhận tài liệu kỹ thuật & bản tin nhà máy ở đáy trang Blog */
.sp-blog__newsletter {
	margin-top: 48px;
}

.sp-blog__newsletter-card {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	align-items: center;
	gap: 32px;
	padding: 32px 36px;
	background-color: var(--sp-primary);
	color: #ffffff;
	border-radius: 16px;
	box-shadow: var(--sp-shadow-md);
}

.sp-blog__newsletter-title {
	font-size: clamp(1.35rem, 2vw, 1.65rem) !important;
	font-weight: 800 !important;
	color: #ffffff !important;
	margin: 0 0 8px 0 !important;
}

.sp-blog__newsletter-desc {
	font-size: 14px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.8);
	margin: 0 !important;
}

.sp-blog__newsletter-note {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.65);
	margin: 10px 0 0 0 !important;
}

@media (max-width: 991px) {
	.sp-catalog-head__panel,
	.sp-blog__featured-card,
	.sp-blog__newsletter-card {
		grid-template-columns: 1fr;
	}

	.sp-catalog-layout {
		grid-template-columns: 1fr;
	}

	.sp-catalog-toolbar__filter-btn {
		display: inline-flex !important;
	}

	.sp-catalog-sidebar {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		width: min(320px, 88vw);
		max-height: 100vh;
		z-index: 99995;
		border-radius: 0;
		transform: translateX(-105%);
		transition: transform 0.28s ease;
	}

	.sp-catalog-page.is-filter-open .sp-catalog-sidebar {
		transform: translateX(0);
	}

	.sp-catalog-page.is-filter-open .sp-catalog-overlay {
		display: block;
		position: fixed;
		inset: 0;
		background: rgba(11, 37, 69, 0.5);
		z-index: 99990;
	}

	.sp-blog__projects-grid,
	.sp-blog__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.sp-blog__job-card {
		flex-direction: column;
		align-items: flex-start;
	}

	.sp-blog__job-actions {
		width: 100%;
	}
}

@media (max-width: 640px) {
	.sp-blog__projects-grid,
	.sp-blog__grid {
		grid-template-columns: 1fr;
	}
}

/* Toast thông báo Thêm báo giá B2B */
.sp-toast {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 99999;
	background-color: var(--sp-primary);
	color: #fff;
	border-left: 4px solid var(--sp-secondary);
	padding: 14px 18px;
	border-radius: var(--sp-radius);
	box-shadow: var(--sp-shadow-lg);
	font-size: 13.5px;
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 14px;
	transform: translateY(120%);
	opacity: 0;
	transition: transform 0.3s var(--sp-ease), opacity 0.3s var(--sp-ease);
}

.sp-toast.is-visible {
	transform: translateY(0);
	opacity: 1;
}

.sp-toast-content {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.sp-toast-content svg {
	color: var(--sp-secondary);
	flex-shrink: 0;
}

.sp-toast-link {
	background: none !important;
	border: none !important;
	padding: 0 !important;
	margin: 0 !important;
	min-height: 0 !important;
	font-size: 13px !important;
	color: var(--sp-secondary) !important;
	text-decoration: underline !important;
	font-weight: 700 !important;
	cursor: pointer;
	white-space: nowrap;
}

/* ==========================================================================
   16. TỐI ƯU RESPONSIVE (TABLET & MOBILE)
   ========================================================================== */
@media (max-width: 849px) {
	.sp-usp-section {
		margin-top: 16px;
	}

	.sp-usp-bar > .col {
		border-bottom: 1px solid var(--sp-line);
	}

	.sp-form-grid {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.sp-quote-card {
		padding: 20px;
	}

	.sp-topbar-contacts,
	.sp-topbar-text {
		display: none;
	}

	.sp-hero-metrics {
		grid-template-columns: 1fr;
		gap: 10px;
	}
}

/* ==========================================================================
   17. LIGHTBOX YÊU CẦU BÁO GIÁ B2B (#sp-quote-modal - CHUẨN 100% MẪU GỐC S2)
   ========================================================================== */
body.sp-modal-open {
	overflow: hidden;
}

.sp-quote-modal {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: grid;
	place-items: center;
	padding: 16px;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.24s ease, visibility 0.24s ease;
}

.sp-quote-modal.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.sp-quote-modal__overlay {
	position: fixed;
	inset: 0;
	border: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	background: rgba(11, 37, 69, 0.62) !important;
	backdrop-filter: blur(4px);
	cursor: pointer;
}

.sp-quote-modal__panel {
	position: relative;
	z-index: 1;
	width: min(920px, calc(100vw - 32px));
	max-height: calc(100vh - 32px);
	border-radius: 12px;
	background: #ffffff;
	border: 1px solid rgba(255, 255, 255, 0.22);
	box-shadow: 0 24px 60px rgba(7, 25, 47, 0.36);
	overflow-x: hidden;
	overflow-y: auto;
	transform: translateY(12px) scale(0.985);
	transition: transform 0.26s cubic-bezier(0.22, 1, 0.36, 1);
}

.sp-quote-modal.is-open .sp-quote-modal__panel {
	transform: translateY(0) scale(1);
}

.sp-quote-modal__close {
	position: absolute !important;
	top: 14px !important;
	right: 14px !important;
	z-index: 3 !important;
	width: 34px !important;
	height: 34px !important;
	min-height: 34px !important;
	padding: 0 !important;
	margin: 0 !important;
	border-radius: 8px !important;
	border: 1px solid var(--sp-line) !important;
	background: #ffffff !important;
	color: var(--sp-primary) !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	cursor: pointer;
	box-shadow: 0 2px 6px rgba(11, 37, 69, 0.08);
	transition: background-color 0.2s ease, color 0.2s ease;
}

.sp-quote-modal__close:hover {
	background: var(--sp-surface-alt) !important;
	color: var(--sp-secondary) !important;
}

.sp-quote-modal__grid {
	display: grid;
	grid-template-columns: 0.82fr 1.18fr;
	min-height: 100%;
}

/* Cột trái: Aside thông tin kỹ thuật & cam kết nhà máy */
.sp-quote-modal__aside {
	background: linear-gradient(165deg, #0b2545 0%, #07192f 100%);
	color: #ffffff;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.sp-quote-modal__visual {
	position: relative;
	min-height: 195px;
	overflow: hidden;
	background: #091e38;
}

.sp-quote-modal__visual-img {
	width: 100%;
	height: 100%;
	min-height: 195px;
	max-height: 220px;
	object-fit: cover;
	display: block;
	opacity: 0.58;
}

.sp-quote-modal__visual-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(7, 25, 47, 0.22) 0%, rgba(7, 25, 47, 0.72) 65%, #091e38 100%);
	padding: 18px 20px 14px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.sp-quote-modal__badge {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	padding: 4px 10px;
	border-radius: 4px;
	background: var(--sp-secondary);
	color: #ffffff;
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.sp-quote-modal__aside-meta {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.sp-quote-modal__aside-sub {
	font-size: 11.5px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.78);
}

.sp-quote-modal__aside-title {
	font-size: 18.5px;
	font-weight: 800;
	line-height: 1.28;
	color: #ffffff;
}

.sp-quote-modal__aside-copy {
	padding: 14px 20px 22px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	flex: 1;
}

.sp-quote-modal__pledge {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 12px 14px;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.12);
}

.sp-quote-modal__pledge-icon {
	color: #f4a259;
	flex-shrink: 0;
	margin-top: 2px;
}

.sp-quote-modal__pledge-title {
	display: block;
	font-size: 13px;
	font-weight: 700;
	color: #ffffff;
	margin-bottom: 4px;
}

.sp-quote-modal__pledge-desc {
	margin: 0 !important;
	font-size: 12px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.78);
}

.sp-quote-modal__perks {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.sp-quote-modal__perk {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 0 !important;
	font-size: 12.5px;
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.88);
}

.sp-quote-modal__perk-check {
	color: #f4a259;
	flex-shrink: 0;
	margin-top: 2px;
}

/* Cột phải: Main Form Contact Form 7 */
.sp-quote-modal__main {
	padding: 22px 26px 20px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	background: #ffffff;
}

.sp-quote-modal__header {
	padding-right: 34px;
}

.sp-quote-modal__eyebrow {
	display: block;
	font-size: 12px;
	font-weight: 600;
	color: var(--sp-muted);
	margin-bottom: 3px;
}

.sp-quote-modal__title {
	margin: 0 0 5px 0 !important;
	font-size: 21px !important;
	font-weight: 800 !important;
	line-height: 1.22 !important;
	color: var(--sp-primary) !important;
}

.sp-quote-modal__desc {
	margin: 0 !important;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--sp-muted);
}

.sp-quote-modal__body .wpcf7,
.sp-quote-modal__body .wpcf7-form {
	margin: 0 !important;
}

.sp-quote-modal__form {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.sp-quote-modal__form p {
	margin: 0 !important;
}

.sp-quote-modal__form br {
	display: none !important;
}

.sp-quote-modal__row--2col {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin: 0 !important;
}

.sp-quote-modal__field {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0 !important;
}

.sp-quote-modal__label {
	font-size: 12px !important;
	font-weight: 700 !important;
	line-height: 1.35 !important;
	color: var(--sp-primary) !important;
	margin: 0 !important;
}

.sp-quote-modal__label span {
	color: var(--sp-secondary);
}

.sp-quote-modal__field .wpcf7-form-control-wrap {
	display: block;
	width: 100%;
	margin: 0 !important;
}

.sp-quote-modal__main input.sp-input,
.sp-quote-modal__main input[type="text"],
.sp-quote-modal__main input[type="tel"],
.sp-quote-modal__main input[type="email"] {
	width: 100% !important;
	height: 38px !important;
	min-height: 38px !important;
	padding: 0 12px !important;
	margin: 0 !important;
	border-radius: 6px !important;
	border: 1px solid var(--sp-line-strong) !important;
	background-color: #f8fafc !important;
	color: var(--sp-text) !important;
	font-size: 13px !important;
	box-shadow: none !important;
	transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.sp-quote-modal__main textarea.sp-textarea,
.sp-quote-modal__main .sp-quote-modal__textarea {
	width: 100% !important;
	min-height: 62px !important;
	max-height: 110px;
	padding: 8px 12px !important;
	margin: 0 !important;
	border-radius: 6px !important;
	border: 1px solid var(--sp-line-strong) !important;
	background-color: #f8fafc !important;
	color: var(--sp-text) !important;
	font-size: 13px !important;
	line-height: 1.45 !important;
	box-shadow: none !important;
	resize: vertical;
}

.sp-quote-modal__main input.sp-input:focus,
.sp-quote-modal__main textarea.sp-textarea:focus {
	background-color: #ffffff !important;
	border-color: var(--sp-primary) !important;
	box-shadow: 0 0 0 3px rgba(11, 37, 69, 0.1) !important;
	outline: none !important;
}

.sp-quote-modal__submit {
	width: 100% !important;
	height: 44px !important;
	min-height: 44px !important;
	margin: 4px 0 0 0 !important;
	padding: 0 20px !important;
	border-radius: 6px !important;
	border: none !important;
	background-color: var(--sp-primary) !important;
	color: #ffffff !important;
	font-size: 13.5px !important;
	font-weight: 700 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.15s ease;
}

.sp-quote-modal__submit:hover {
	background-color: var(--sp-primary-hover) !important;
	color: #ffffff !important;
}

.sp-quote-modal__submit svg {
	flex-shrink: 0;
}

.sp-quote-modal__footnote {
	margin: 2px 0 0 0 !important;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	font-size: 11.5px;
	line-height: 1.4;
	color: var(--sp-muted);
	text-align: center;
}

.sp-quote-modal__footnote svg {
	color: var(--sp-muted);
	flex-shrink: 0;
}

.sp-quote-modal__main .wpcf7-spinner {
	display: none !important;
}

.sp-quote-modal__main .wpcf7-not-valid-tip {
	font-size: 11.5px;
	font-weight: 600;
	color: #dc2626;
	margin-top: 2px;
}

.sp-quote-modal__main .wpcf7-response-output {
	margin: 8px 0 0 0 !important;
	padding: 10px 14px !important;
	border-radius: 6px !important;
	font-size: 12.5px !important;
	font-weight: 600 !important;
}

@media (max-width: 849px) {
	.sp-quote-modal__grid {
		grid-template-columns: 1fr;
	}

	.sp-quote-modal__visual {
		min-height: 140px;
	}

	.sp-quote-modal__aside-copy {
		display: none;
	}

	.sp-quote-modal__row--2col {
		grid-template-columns: 1fr;
		gap: 10px;
	}

	.sp-quote-modal__main {
		padding: 18px;
	}
}

/* ==========================================================================
   18. CHI TIẾT BÀI VIẾT B2B: DỰ ÁN, TIN TỨC & TUYỂN DỤNG (.sp-article)
   Chuẩn 100% theo mẫu gốc S2 Corporate (article.css / sc-article)
   ========================================================================== */
.sp-article {
	background-color: #ffffff;
	color: var(--sp-text);
	padding-bottom: 72px;
}

.sp-article .sp-breadcrumb {
	padding: 14px 0;
	border-bottom: 1px solid var(--sp-line);
	background-color: var(--sp-surface);
}

.sp-article__hero {
	padding-top: clamp(28px, 3.5vw, 44px);
	padding-bottom: clamp(24px, 3vw, 38px);
	background-color: #ffffff;
}

.sp-article__hero-inner {
	max-width: 896px;
}

.sp-article__badges {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 14px;
}

.sp-article__category {
	display: inline-flex;
	align-items: center;
	padding: 4px 12px;
	font-size: 12px;
	font-weight: 600;
	color: var(--sp-primary) !important;
	background-color: var(--sp-surface);
	border: 1px solid var(--sp-line);
	border-radius: 4px;
	text-decoration: none !important;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.sp-article__category:hover {
	border-color: var(--sp-primary);
}

.sp-article__category--sub {
	color: #ffffff !important;
	background-color: var(--sp-primary);
	border-color: var(--sp-primary);
}

.sp-article__title {
	font-size: clamp(1.75rem, 2.8vw, 2.45rem) !important;
	font-weight: 800 !important;
	line-height: 1.22 !important;
	letter-spacing: -0.015em;
	color: var(--sp-primary) !important;
	margin: 0 0 20px 0 !important;
	text-wrap: balance;
}

.sp-article__meta-bar {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px 20px;
	padding: 14px 0;
	border-top: 1px solid var(--sp-line);
	border-bottom: 1px solid var(--sp-line);
	font-size: 13.5px;
	color: var(--sp-muted);
}

.sp-article__author {
	display: inline-flex;
	align-items: center;
	gap: 12px;
}

.sp-article__author-avatar {
	width: 36px;
	height: 36px;
	border-radius: 999px;
	background-color: var(--sp-primary);
	color: #ffffff;
	font-size: 13.5px;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.sp-article__author-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
	line-height: 1.25;
}

.sp-article__author-name {
	font-size: 13.5px;
	font-weight: 700;
	color: var(--sp-primary);
}

.sp-article__author-role {
	font-size: 12px;
	color: var(--sp-muted);
}

.sp-article__meta-dot {
	color: var(--sp-line-strong);
}

.sp-article__date,
.sp-article__reading-time {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--sp-muted);
}

.sp-article__spec-bar {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
	gap: 1px;
	margin-top: 20px;
	background-color: var(--sp-line);
	border: 1px solid var(--sp-line);
	border-radius: 8px;
	overflow: hidden;
}

.sp-article__spec-cell {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 14px 16px;
	background-color: var(--sp-surface);
}

.sp-article__spec-key {
	font-size: 12px;
	font-weight: 700;
	color: var(--sp-muted);
}

.sp-article__spec-val {
	font-size: 14px;
	font-weight: 800;
	color: var(--sp-primary);
}

/* Bố cục 2 cột: Sidebar Mục lục bên trái + Nội dung chính bên phải */
.sp-article__body {
	padding-top: 28px;
	padding-bottom: 48px;
}

.sp-article__layout {
	display: grid;
	grid-template-columns: minmax(264px, 310px) minmax(0, 1fr);
	align-items: start;
	gap: clamp(32px, 4vw, 56px);
}

.sp-article__sidebar {
	position: sticky;
	top: 108px;
}

.sp-article__sidebar-sticky {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* Mục lục hồ sơ kỹ thuật (.sp-toc) */
.sp-toc {
	background-color: var(--sp-surface);
	border: 1px solid var(--sp-line);
	border-radius: 8px;
	padding: 20px 22px;
}

.sp-toc__title {
	width: 100% !important;
	min-height: 0 !important;
	padding: 0 0 10px 0 !important;
	margin: 0 0 14px 0 !important;
	background: transparent !important;
	border: none !important;
	border-bottom: 1px solid var(--sp-line) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	font-size: 13px !important;
	font-weight: 800 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	color: var(--sp-primary) !important;
	cursor: pointer;
}

.sp-toc__chevron {
	width: 7px;
	height: 7px;
	border-right: 1.8px solid currentColor;
	border-bottom: 1.8px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.2s ease;
	margin-right: 2px;
}

.sp-toc.is-collapsed .sp-toc__title {
	margin-bottom: 0 !important;
	padding-bottom: 0 !important;
	border-bottom-color: transparent !important;
}

.sp-toc.is-collapsed .sp-toc__chevron {
	transform: rotate(-45deg);
}

.sp-toc.is-collapsed .sp-toc__list {
	display: none;
}

.sp-toc__list {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.sp-toc__item {
	margin: 0 !important;
}

.sp-toc__item--h3 {
	padding-left: 12px;
}

.sp-toc__link {
	display: block;
	padding: 4px 0 4px 12px;
	font-size: 13.5px;
	line-height: 1.45;
	color: var(--sp-muted) !important;
	text-decoration: none !important;
	border-left: 2px solid transparent;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.sp-toc__link:hover,
.sp-toc__item.is-active .sp-toc__link {
	color: var(--sp-primary) !important;
	font-weight: 700;
	border-left-color: var(--sp-primary);
}

/* Box Chia sẻ tài liệu */
.sp-article__share-card {
	background-color: #ffffff;
	border: 1px solid var(--sp-line);
	border-radius: 8px;
	padding: 18px 22px;
}

.sp-article__share-title {
	display: block;
	font-size: 13px;
	font-weight: 700;
	color: var(--sp-primary);
	margin-bottom: 12px;
}

.sp-share-buttons {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.sp-share-buttons__link {
	width: 36px !important;
	height: 36px !important;
	min-height: 36px !important;
	padding: 0 !important;
	margin: 0 !important;
	border-radius: 6px !important;
	border: 1px solid var(--sp-line) !important;
	background-color: var(--sp-surface) !important;
	color: var(--sp-primary) !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	cursor: pointer;
	text-decoration: none !important;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.sp-share-buttons__link:hover {
	background-color: var(--sp-primary) !important;
	border-color: var(--sp-primary) !important;
	color: #ffffff !important;
}

/* Box Tư vấn kết cấu sóng & báo giá sản xuất B2B */
.sp-article__consult-card {
	background-color: var(--sp-primary);
	color: #ffffff;
	padding: 22px;
	border-radius: 10px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.sp-article__consult-icon {
	color: var(--sp-secondary);
}

.sp-article__consult-title {
	font-size: 17px !important;
	font-weight: 800 !important;
	line-height: 1.35 !important;
	color: #ffffff !important;
	margin: 0 !important;
}

.sp-article__consult-desc {
	font-size: 13px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.8);
	margin: 0 0 6px 0 !important;
}

.sp-article__consult-btn {
	width: 100% !important;
	height: 42px !important;
	min-height: 42px !important;
	padding: 0 18px !important;
	margin: 0 !important;
	border-radius: 6px !important;
	border: none !important;
	background-color: var(--sp-secondary) !important;
	color: #ffffff !important;
	font-size: 13.5px !important;
	font-weight: 700 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.sp-article__consult-btn:hover {
	background-color: var(--sp-secondary-hover) !important;
	color: #ffffff !important;
}

/* Cột phải: Nội dung chính (.sp-article__main) */
.sp-article__main {
	min-width: 0;
	max-width: 780px;
	width: 100%;
}

.sp-article__featured-media {
	margin: 0 0 28px 0;
	background-color: var(--sp-surface);
	border: 1px solid var(--sp-line);
	border-radius: 10px;
	overflow: hidden;
}

.sp-article__featured-img {
	width: 100%;
	height: auto;
	max-height: 520px;
	display: block;
	object-fit: cover;
}

.sp-article__content {
	font-size: 15.5px;
	line-height: 1.8;
	color: var(--sp-text);
}

.sp-article__content h2,
.sp-article__content h3,
.sp-article__content h4 {
	scroll-margin-top: 118px;
	font-weight: 700 !important;
	line-height: 1.28 !important;
	color: var(--sp-primary) !important;
}

.sp-article__content h2 {
	font-size: clamp(1.4rem, 2.2vw, 1.8rem) !important;
	margin: 34px 0 14px 0 !important;
}

.sp-article__content h3 {
	font-size: clamp(1.15rem, 1.6vw, 1.38rem) !important;
	margin: 26px 0 10px 0 !important;
}

.sp-article__content p {
	margin: 0 0 18px 0;
}

.sp-article__content ul {
	list-style: disc;
	padding-left: 1.4em;
	margin: 0 0 18px 0;
}

.sp-article__content ol {
	list-style: decimal;
	padding-left: 1.4em;
	margin: 0 0 18px 0;
}

.sp-article__content li {
	margin-bottom: 6px;
}

.sp-article__content a {
	color: var(--sp-primary);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.sp-article__content a:hover {
	color: var(--sp-secondary);
}

.sp-article__table-wrap {
	width: 100%;
	overflow-x: auto;
	margin: 22px 0;
	border: 1px solid var(--sp-line);
	border-radius: 8px;
}

.sp-article__content table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
	margin: 0 !important;
}

.sp-article__content th,
.sp-article__content td {
	padding: 13px 16px;
	border: 1px solid var(--sp-line);
	text-align: left;
	vertical-align: top;
}

.sp-article__content th {
	background-color: var(--sp-surface);
	font-size: 12.5px;
	font-weight: 700;
	color: var(--sp-primary);
}

/* Box Ứng tuyển vị trí này (cho trang chi tiết Tuyển dụng) */
.sp-article__careers-box {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 20px;
	margin-top: 32px;
	padding: 24px 26px;
	background-color: var(--sp-surface);
	border: 1px solid var(--sp-line-strong);
	border-left: 4px solid var(--sp-secondary);
	border-radius: 10px;
}

.sp-article__careers-box-copy {
	display: flex;
	flex-direction: column;
	gap: 6px;
	max-width: 520px;
}

.sp-article__careers-box-head {
	display: flex;
	align-items: center;
	gap: 10px;
}

.sp-article__careers-box-icon {
	color: var(--sp-secondary);
	display: inline-flex;
	align-items: center;
}

.sp-article__careers-box-title {
	font-size: 17px !important;
	font-weight: 800 !important;
	color: var(--sp-primary) !important;
	margin: 0 !important;
}

.sp-article__careers-box-desc {
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--sp-muted);
	margin: 0 !important;
}

.sp-article__careers-box-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
}

.sp-article__careers-btn-primary {
	height: 42px !important;
	min-height: 42px !important;
	padding: 0 18px !important;
	margin: 0 !important;
	border-radius: 6px !important;
	border: none !important;
	background-color: var(--sp-primary) !important;
	color: #ffffff !important;
	font-size: 13.5px !important;
	font-weight: 700 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	cursor: pointer;
}

.sp-article__careers-btn-primary:hover {
	background-color: var(--sp-primary-hover) !important;
}

.sp-article__careers-btn-outline {
	height: 42px;
	padding: 0 18px;
	border-radius: 6px;
	border: 1px solid var(--sp-line-strong);
	background-color: #ffffff;
	color: var(--sp-primary) !important;
	font-size: 13.5px;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	text-decoration: none !important;
}

.sp-article__careers-btn-outline:hover {
	border-color: var(--sp-primary);
}

/* Footer Chủ đề & Chia sẻ của bài viết */
.sp-article__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 36px;
	padding: 18px 0;
	border-top: 1px solid var(--sp-line);
	border-bottom: 1px solid var(--sp-line);
}

.sp-article__tags {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}

.sp-article__tags-label,
.sp-article__share-label {
	font-size: 13px;
	font-weight: 700;
	color: var(--sp-primary);
}

.sp-article__tag {
	display: inline-flex;
	align-items: center;
	padding: 4px 12px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--sp-text) !important;
	background-color: var(--sp-surface);
	border: 1px solid var(--sp-line);
	border-radius: 4px;
	text-decoration: none !important;
	transition: border-color 0.2s ease, color 0.2s ease;
}

.sp-article__tag:hover {
	color: var(--sp-primary) !important;
	border-color: var(--sp-primary);
}

.sp-article__share-inline {
	display: flex;
	align-items: center;
	gap: 10px;
}

/* Điều hướng Bài viết trước / Bài viết tiếp theo */
.sp-article__nav {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	margin-top: 24px;
}

.sp-article__nav-item {
	display: flex;
}

.sp-article__nav-link {
	display: flex;
	flex-direction: column;
	gap: 6px;
	width: 100%;
	padding: 18px 20px;
	background-color: #ffffff;
	border: 1px solid var(--sp-line);
	border-radius: 8px;
	text-decoration: none !important;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.sp-article__nav-link:hover {
	border-color: var(--sp-primary);
	background-color: var(--sp-surface);
}

.sp-article__nav-item--next .sp-article__nav-link {
	align-items: flex-end;
	text-align: right;
}

.sp-article__nav-dir {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 700;
	color: var(--sp-muted);
}

.sp-article__nav-title {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.38;
	color: var(--sp-primary);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Section Sản phẩm & quy cách bao bì ứng dụng trong bài viết */
.sp-article__shop {
	margin-top: 40px;
	padding-top: 36px;
	border-top: 1px solid var(--sp-line);
}

.sp-article__section-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 24px;
}

.sp-article__section-title {
	font-size: clamp(1.35rem, 2vw, 1.65rem) !important;
	font-weight: 800 !important;
	color: var(--sp-primary) !important;
	margin: 0 !important;
}

.sp-article__section-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--sp-primary) !important;
	text-decoration: none !important;
}

.sp-article__section-link:hover {
	color: var(--sp-secondary) !important;
}

.sp-article__shop-grid {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	gap: 24px !important;
	margin: 0 !important;
	width: 100% !important;
}

.sp-article__shop-grid::before,
.sp-article__shop-grid::after {
	display: none !important;
}

.sp-article__shop-item,
.sp-pdp-related__card {
	width: 100% !important;
	max-width: 100% !important;
	flex: none !important;
	padding: 0 !important;
	margin: 0 !important;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.sp-article__shop-item > .col-inner,
.sp-pdp-related__card > .col-inner {
	height: 100%;
	display: flex;
	flex-direction: column;
	width: 100%;
}

@media (max-width: 639px) {
	.sp-article__shop-grid {
		grid-template-columns: 1fr !important;
		gap: 16px !important;
	}
}

/* Section Bài viết liên quan dưới cùng */
.sp-article__related {
	padding-top: 44px;
	border-top: 1px solid var(--sp-line);
}

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

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

.sp-article-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--sp-shadow-md);
}

.sp-article-card__media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background-color: var(--sp-surface);
}

.sp-article-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.35s ease;
}

.sp-article-card:hover .sp-article-card__image {
	transform: scale(1.04);
}

.sp-article-card__badge {
	position: absolute;
	top: 12px;
	left: 12px;
	padding: 4px 10px;
	font-size: 11.5px;
	font-weight: 700;
	color: #ffffff;
	background-color: rgba(11, 37, 69, 0.88);
	backdrop-filter: blur(4px);
	border-radius: 4px;
}

.sp-article-card__body {
	padding: 18px 20px 20px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.sp-article-card__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	font-size: 12px;
	color: var(--sp-muted);
	margin-bottom: 8px;
}

.sp-article-card__title {
	font-size: 16px !important;
	font-weight: 800 !important;
	line-height: 1.38 !important;
	margin: 0 0 8px 0 !important;
}

.sp-article-card__title a {
	color: var(--sp-primary) !important;
	text-decoration: none !important;
}

.sp-article-card__title a:hover {
	color: var(--sp-secondary) !important;
}

.sp-article-card__excerpt {
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--sp-muted);
	margin: 0 0 14px 0 !important;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	flex: 1;
}

.sp-article-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 700;
	color: var(--sp-primary) !important;
	text-decoration: none !important;
	margin-top: auto;
}

.sp-article-card__cta:hover {
	color: var(--sp-secondary) !important;
}

@media (max-width: 1023px) {
	.sp-article__layout {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.sp-article__sidebar {
		position: static;
	}

	.sp-article__related-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.sp-article__footer {
		flex-direction: column;
		align-items: flex-start;
	}

	.sp-article__nav,
	.sp-article__related-grid {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   25. TRANG CHI TIẾT SẢN PHẨM BAO BÌ B2B (.sp-pdp) - CHUẨN 100% S2 CORPORATE
   ========================================================================== */

.sp-pdp {
	display: block;
	padding-top: 28px;
	padding-bottom: 72px;
	background-color: var(--sp-surface);
	color: var(--sp-text);
}

/* Bảo vệ tất cả SVG dạng stroke bên trong .sp-pdp khỏi fill:currentColor của Flatsome */
.sp-pdp svg[fill="none"],
.sp-pdp svg[fill="none"] * {
	fill: none !important;
	stroke: currentColor !important;
}

.sp-pdp__hero {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	gap: 36px;
	align-items: start;
}

.sp-pdp__gallery {
	position: sticky;
	top: 112px;
	min-width: 0;
}

.sp-pdp__media {
	display: grid;
	grid-template-columns: 80px minmax(0, 1fr);
	gap: 14px;
	align-items: start;
}

.sp-pdp__thumbs {
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-height: 540px;
	overflow-y: auto;
	scrollbar-width: thin;
}

.sp-pdp__thumb {
	position: relative;
	width: 80px;
	height: 80px;
	aspect-ratio: 1 / 1;
	padding: 0 !important;
	margin: 0 !important;
	border: 1.5px solid var(--sp-line) !important;
	border-radius: 6px !important;
	background-color: #ffffff !important;
	overflow: hidden;
	cursor: pointer;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
	flex: 0 0 80px;
	min-height: 0 !important;
}

.sp-pdp__thumb:hover {
	border-color: var(--sp-line-strong) !important;
}

.sp-pdp__thumb.is-active {
	border-color: var(--sp-primary) !important;
	box-shadow: 0 0 0 1px var(--sp-primary);
}

.sp-pdp__thumb-img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block !important;
}

.sp-pdp__stage {
	position: relative;
	min-width: 0;
	background-color: #ffffff;
	border: 1px solid var(--sp-line);
	border-radius: 8px;
	overflow: hidden;
}

.sp-pdp__zoom-btn {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 3;
	width: 40px;
	height: 40px;
	min-height: 40px !important;
	padding: 0 !important;
	margin: 0 !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--sp-line) !important;
	border-radius: 6px !important;
	background-color: #ffffff !important;
	color: var(--sp-primary) !important;
	box-shadow: 0 2px 8px rgba(15, 29, 51, 0.08);
	cursor: pointer;
	transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.sp-pdp__zoom-btn:hover {
	background-color: var(--sp-primary) !important;
	border-color: var(--sp-primary) !important;
	color: #ffffff !important;
}

.sp-pdp__swiper {
	position: relative;
	width: 100%;
}

.sp-pdp__frame {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	background-color: #f8fafc;
	overflow: hidden;
}

.sp-pdp__image {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	max-height: 100% !important;
	object-fit: cover !important;
	display: block !important;
	transition: opacity 0.18s ease;
}

.sp-pdp__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 40px;
	height: 40px;
	min-height: 40px !important;
	padding: 0 !important;
	margin: 0 !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--sp-line) !important;
	border-radius: 6px !important;
	background-color: #ffffff !important;
	color: var(--sp-primary) !important;
	box-shadow: 0 2px 8px rgba(15, 29, 51, 0.08);
	cursor: pointer;
	transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.sp-pdp__nav:hover {
	background-color: var(--sp-primary) !important;
	border-color: var(--sp-primary) !important;
	color: #ffffff !important;
}

.sp-pdp__nav--prev {
	left: 14px;
}

.sp-pdp__nav--next {
	right: 14px;
}

/* Cột phải Summary Card */
.sp-pdp__summary {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 28px;
	background-color: #ffffff;
	border: 1px solid var(--sp-line);
	border-radius: 8px;
	min-width: 0;
}

.sp-pdp__head-row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
}

.sp-pdp__title {
	margin: 0 !important;
	font-size: clamp(1.5rem, 2.3vw, 2rem) !important;
	font-weight: 800 !important;
	line-height: 1.25 !important;
	color: var(--sp-primary) !important;
}

.sp-pdp__tools {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}

.sp-pdp__tool-btn {
	width: 40px;
	height: 40px;
	min-height: 40px !important;
	padding: 0 !important;
	margin: 0 !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--sp-line) !important;
	border-radius: 6px !important;
	background-color: #ffffff !important;
	color: var(--sp-primary) !important;
	cursor: pointer;
	transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.sp-pdp__tool-btn:hover,
.sp-pdp__tool-btn.is-active {
	border-color: var(--sp-secondary) !important;
	color: var(--sp-secondary) !important;
	background-color: #fff7ed !important;
}

.sp-pdp__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px 14px;
	font-size: 13.5px;
	color: var(--sp-muted);
}

.sp-pdp__meta-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.sp-pdp__sku {
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-weight: 700;
	color: var(--sp-primary);
}

.sp-pdp__stock {
	font-weight: 700;
	color: #15803d;
}

.sp-pdp__meta-sep {
	width: 1px;
	height: 14px;
	background-color: var(--sp-line-strong);
}

/* Price Panel */
.sp-pdp__price-panel {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px 16px;
	padding: 16px 20px;
	background-color: var(--sp-surface);
	border: 1px solid var(--sp-line);
	border-left: 4px solid var(--sp-primary);
	border-radius: 8px;
}

.sp-pdp__price-main {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 10px;
}

.sp-pdp__price-current {
	font-size: clamp(1.375rem, 2vw, 1.75rem);
	font-weight: 800;
	line-height: 1.2;
	color: #dc2626;
}

.sp-pdp__price-current--quote {
	color: var(--sp-primary);
}

.sp-pdp__price-unit {
	font-size: 12.5px;
	color: var(--sp-muted);
}

/* Technical Datasheet Box */
.sp-datasheet {
	border: 1px solid var(--sp-line);
	border-radius: 8px;
	background-color: #ffffff;
	overflow: hidden;
}

.sp-datasheet__head {
	padding: 11px 16px;
	background-color: var(--sp-surface);
	border-bottom: 1px solid var(--sp-line);
}

.sp-datasheet__title {
	margin: 0 !important;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--sp-primary);
}

.sp-datasheet__grid {
	margin: 0 !important;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}

.sp-datasheet__row {
	display: grid;
	grid-template-columns: 40% minmax(0, 1fr);
	gap: 10px;
	padding: 10px 16px;
	border-bottom: 1px solid var(--sp-line);
	font-size: 13.5px;
}

.sp-datasheet__row:last-child {
	border-bottom: 0;
}

.sp-datasheet__label {
	margin: 0 !important;
	font-weight: 600;
	color: var(--sp-muted);
}

.sp-datasheet__value {
	margin: 0 !important;
	font-weight: 700;
	color: var(--sp-primary);
}

.sp-datasheet__note {
	margin: 0 !important;
	padding: 10px 16px;
	border-top: 1px dashed var(--sp-line);
	background-color: var(--sp-surface);
	font-size: 12.5px;
	color: var(--sp-muted);
}

/* Variant Picker Chips */
.sp-pdp-variants {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.sp-pdp-variants__group {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.sp-pdp-variants__head {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13.5px;
}

.sp-pdp-variants__label {
	font-weight: 600;
	color: var(--sp-muted);
}

.sp-pdp-variants__current {
	font-weight: 700;
	color: var(--sp-primary);
}

.sp-pdp-variants__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.sp-pdp-variants__item {
	position: relative;
}

.sp-pdp-variants__input.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.sp-pdp-variants__chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 38px;
	padding: 6px 14px;
	margin: 0 !important;
	border: 1px solid var(--sp-line-strong);
	border-radius: 6px;
	background-color: #ffffff;
	color: var(--sp-text);
	font-size: 13.5px;
	font-weight: 600;
	cursor: pointer;
	user-select: none;
	transition: border-color 0.16s ease, background-color 0.16s ease, color 0.16s ease;
}

.sp-pdp-variants__chip:hover {
	border-color: var(--sp-primary);
	color: var(--sp-primary);
}

.sp-pdp-variants__input:checked + .sp-pdp-variants__chip {
	border-color: var(--sp-primary);
	background-color: var(--sp-primary);
	color: #ffffff;
}

/* Order Box */
.sp-pdp__order-box {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--sp-line);
}

.sp-pdp__qty-row {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 14px;
}

.sp-pdp__qty-control {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.sp-pdp__qty-label {
	font-size: 12px;
	font-weight: 700;
	color: var(--sp-muted);
}

.sp-qty {
	display: inline-flex;
	align-items: stretch;
	height: 44px;
	border: 1px solid var(--sp-line-strong);
	border-radius: 6px;
	background-color: #ffffff;
	overflow: hidden;
}

.sp-qty__btn {
	width: 40px;
	height: 100%;
	min-height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	background: transparent !important;
	color: var(--sp-primary) !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.sp-qty__btn:hover {
	background-color: var(--sp-surface) !important;
}

.sp-qty__input {
	width: 68px !important;
	height: 100% !important;
	margin: 0 !important;
	padding: 0 4px !important;
	border: 0 !important;
	border-left: 1px solid var(--sp-line) !important;
	border-right: 1px solid var(--sp-line) !important;
	background: transparent !important;
	box-shadow: none !important;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-size: 15px !important;
	font-weight: 700 !important;
	color: var(--sp-primary) !important;
	text-align: center !important;
	-moz-appearance: textfield;
}

.sp-qty__input::-webkit-outer-spin-button,
.sp-qty__input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.sp-pdp__moq-hint {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 12px;
	border-radius: 6px;
	background-color: var(--sp-surface);
	border: 1px solid var(--sp-line);
	font-size: 12.5px;
	color: var(--sp-muted);
}

.sp-pdp__moq-hint svg {
	flex-shrink: 0;
	color: var(--sp-secondary);
}

/* Coupon / Discount Policy Preview */
.sp-coupon-preview {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 12px 16px;
	background-color: var(--sp-surface);
	border: 1px dashed var(--sp-line-strong);
	border-radius: 8px;
}

.sp-coupon-preview__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.sp-coupon-preview__label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--sp-primary);
}

.sp-coupon-preview__label svg {
	color: var(--sp-secondary);
	flex-shrink: 0;
}

.sp-coupon-preview__more {
	display: inline-flex !important;
	align-items: center;
	gap: 4px;
	padding: 0 !important;
	margin: 0 !important;
	min-height: 0 !important;
	border: 0 !important;
	background: transparent !important;
	font-size: 12.5px !important;
	font-weight: 700 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	color: var(--sp-secondary) !important;
	cursor: pointer;
}

.sp-coupon-preview__more:hover {
	color: var(--sp-primary) !important;
}

.sp-coupon-preview__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.sp-coupon-preview__badge {
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
	min-height: 28px !important;
	padding: 4px 10px !important;
	margin: 0 !important;
	border: 1px solid var(--sp-secondary) !important;
	border-radius: 6px !important;
	background-color: #ffffff !important;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	color: var(--sp-primary) !important;
	cursor: pointer;
	transition: background-color 0.16s ease, color 0.16s ease;
}

.sp-coupon-preview__badge:hover {
	background-color: var(--sp-secondary) !important;
	color: #ffffff !important;
}

/* CTA Buttons */
.sp-pdp__cta-group {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.sp-pdp__cta-secondary {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

.sp-pdp__cta-secondary--single {
	grid-template-columns: minmax(0, 1fr);
}

.sp-pdp__btn {
	width: 100%;
	min-height: 48px !important;
	padding: 0 18px !important;
	margin: 0 !important;
	border-radius: 6px !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-size: 14.5px !important;
	font-weight: 700 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	cursor: pointer;
	transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.sp-pdp__btn--quote {
	background-color: var(--sp-secondary) !important;
	border: 1.5px solid var(--sp-secondary) !important;
	color: #ffffff !important;
	box-shadow: 0 4px 12px rgba(217, 119, 6, 0.2);
}

.sp-pdp__btn--quote:hover {
	background-color: var(--sp-secondary-hover) !important;
	border-color: var(--sp-secondary-hover) !important;
	color: #ffffff !important;
}

.sp-pdp__btn--quote-list {
	background-color: #ffffff !important;
	border: 1.5px solid var(--sp-line-strong) !important;
	color: var(--sp-primary) !important;
}

.sp-pdp__btn--quote-list:hover {
	border-color: var(--sp-primary) !important;
	background-color: var(--sp-surface) !important;
}

.sp-pdp__btn--atc {
	background-color: var(--sp-primary) !important;
	border: 1.5px solid var(--sp-primary) !important;
	color: #ffffff !important;
}

.sp-pdp__btn--atc:hover {
	background-color: var(--sp-primary-hover) !important;
	border-color: var(--sp-primary-hover) !important;
}

/* 4 Commitments Grid */
.sp-pdp__commitments {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	padding-top: 16px;
	border-top: 1px solid var(--sp-line);
}

.sp-pdp__commitment {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 12px;
	border-radius: 6px;
	background-color: var(--sp-surface);
	border: 1px solid var(--sp-line);
}

.sp-pdp__commitment-icon {
	width: 32px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 6px;
	background-color: #ffffff;
	border: 1px solid var(--sp-line);
	color: var(--sp-secondary);
	flex-shrink: 0;
}

.sp-pdp__commitment-body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.sp-pdp__commitment-title {
	font-size: 12.5px;
	font-weight: 700;
	color: var(--sp-primary);
}

.sp-pdp__commitment-text {
	font-size: 12px;
	line-height: 1.45;
	color: var(--sp-muted);
}

/* Share Row */
.sp-pdp__share {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--sp-line);
}

.sp-pdp__share-label {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--sp-muted);
}

.sp-pdp__share-btns {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.sp-pdp__share-btn {
	width: 36px;
	height: 36px;
	min-height: 36px !important;
	padding: 0 !important;
	margin: 0 !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--sp-line) !important;
	border-radius: 6px !important;
	background-color: var(--sp-surface) !important;
	color: var(--sp-primary) !important;
	text-decoration: none !important;
	cursor: pointer;
	transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

.sp-pdp__share-btn:hover {
	background-color: var(--sp-primary) !important;
	border-color: var(--sp-primary) !important;
	color: #ffffff !important;
}

/* 3 Tabs Technical Section */
.sp-pdp__tabs {
	margin-top: 48px;
	background-color: #ffffff;
	border: 1px solid var(--sp-line);
	border-radius: 8px;
	overflow: hidden;
}

.sp-pdp__tab-nav {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 0 24px;
	background-color: var(--sp-surface);
	border-bottom: 1px solid var(--sp-line);
	overflow-x: auto;
	scrollbar-width: none;
}

.sp-pdp__tab-nav::-webkit-scrollbar {
	display: none;
}

.sp-pdp__tab-btn {
	position: relative;
	flex-shrink: 0;
	min-height: 52px !important;
	padding: 12px 16px !important;
	margin: 0 !important;
	border: 0 !important;
	border-bottom: 2.5px solid transparent !important;
	border-radius: 0 !important;
	background: transparent !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	color: var(--sp-muted) !important;
	white-space: nowrap;
	cursor: pointer;
	transition: color 0.16s ease, border-color 0.16s ease;
}

.sp-pdp__tab-btn:hover {
	color: var(--sp-primary) !important;
}

.sp-pdp__tab-btn.is-active,
.sp-pdp__tab-btn[aria-selected="true"] {
	color: var(--sp-primary) !important;
	border-bottom-color: var(--sp-secondary) !important;
}

.sp-pdp__tab-panels {
	padding: 28px 32px;
}

.sp-pdp__tab-panel[hidden] {
	display: none !important;
}

.sp-pdp__rte {
	font-size: 15px;
	line-height: 1.75;
	color: var(--sp-text);
}

.sp-pdp__rte h2,
.sp-pdp__rte h3,
.sp-pdp__rte h4 {
	font-weight: 700 !important;
	line-height: 1.3 !important;
	color: var(--sp-primary) !important;
	margin: 24px 0 10px 0 !important;
}

.sp-pdp__rte h2:first-child,
.sp-pdp__rte h3:first-child {
	margin-top: 0 !important;
}

.sp-pdp__rte h2 {
	font-size: 21px !important;
}

.sp-pdp__rte h3 {
	font-size: 17px !important;
}

.sp-pdp__rte p {
	margin: 0 0 16px 0;
}

.sp-pdp__rte ul {
	list-style: disc;
	padding-left: 1.4em;
	margin: 0 0 16px 0;
}

.sp-pdp__rte li {
	margin-bottom: 6px;
}

.sp-pdp__rte table {
	width: 100%;
	border-collapse: collapse;
	margin: 12px 0 20px 0;
	font-size: 14px;
}

.sp-pdp__rte th,
.sp-pdp__rte td {
	padding: 10px 14px;
	border: 1px solid var(--sp-line);
	text-align: left;
}

.sp-pdp__rte th {
	width: 34%;
	font-weight: 700;
	color: var(--sp-primary);
	background-color: var(--sp-surface);
}

/* Vật tư đóng gói dùng kèm (Bought Together) */
.sp-bought-together {
	margin-top: 48px;
	padding: 28px;
	background-color: #ffffff;
	border: 1px solid var(--sp-line);
	border-radius: 8px;
}

.sp-bought-together__inner {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.sp-bought-together__head {
	padding-bottom: 14px;
	border-bottom: 1px solid var(--sp-line);
}

.sp-bought-together__title {
	margin: 0 !important;
	font-size: clamp(1.35rem, 2vw, 1.65rem) !important;
	font-weight: 800 !important;
	line-height: 1.3 !important;
	color: var(--sp-primary) !important;
}

.sp-bought-together__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 24px;
	align-items: center;
}

.sp-bought-together__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
}

.sp-bought-together__item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px;
	border: 1px solid var(--sp-line);
	border-radius: 8px;
	background-color: var(--sp-surface);
}

.sp-bought-together__item.is-current {
	border-color: var(--sp-primary);
	background-color: #ffffff;
}

.sp-bought-together__check {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	margin: 0 !important;
	cursor: pointer;
	flex-shrink: 0;
}

.sp-bought-together__checkbox {
	position: absolute;
	opacity: 0;
	width: 100%;
	height: 100%;
	margin: 0 !important;
	cursor: pointer;
}

.sp-bought-together__box {
	width: 20px;
	height: 20px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1.5px solid var(--sp-line-strong);
	border-radius: 4px;
	background-color: #ffffff;
	color: transparent;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.sp-bought-together__checkbox:checked + .sp-bought-together__box {
	background-color: var(--sp-primary);
	border-color: var(--sp-primary);
	color: #ffffff;
}

.sp-bought-together__thumb-wrap {
	width: 68px;
	height: 68px;
	border-radius: 6px;
	overflow: hidden;
	background-color: #ffffff;
	border: 1px solid var(--sp-line);
	flex-shrink: 0;
	display: block;
}

.sp-bought-together__thumb {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.sp-bought-together__details {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.sp-bought-together__badge,
.sp-bought-together__vendor {
	font-size: 11.5px;
	font-weight: 600;
	color: var(--sp-muted);
}

.sp-bought-together__item-title {
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--sp-primary) !important;
	text-decoration: none !important;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.sp-bought-together__item-title:hover {
	color: var(--sp-secondary) !important;
}

.sp-bought-together__price {
	font-size: 13.5px;
	font-weight: 800;
	color: #dc2626;
}

.sp-bought-together__price--quote {
	color: var(--sp-primary);
}

.sp-bought-together__summary {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 18px;
	background-color: var(--sp-surface);
	border: 1px solid var(--sp-line);
	border-radius: 8px;
}

.sp-bought-together__total-block {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.sp-bought-together__total-label {
	font-size: 12.5px;
	color: var(--sp-muted);
}

.sp-bought-together__total-price {
	font-size: 20px;
	font-weight: 800;
	color: #dc2626;
}

.sp-bought-together__submit {
	width: 100%;
	min-height: 44px !important;
	padding: 0 14px !important;
	margin: 0 !important;
	border-radius: 6px !important;
	border: none !important;
	background-color: var(--sp-primary) !important;
	color: #ffffff !important;
	font-size: 13.5px !important;
	font-weight: 700 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	cursor: pointer;
	transition: background-color 0.18s ease;
}

.sp-bought-together__submit:hover {
	background-color: var(--sp-primary-hover) !important;
}

.sp-bought-together__submit-inner {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Sản phẩm bao bì cùng nhóm ngành (.sp-pdp-related) */
.sp-pdp-related {
	margin-top: 48px;
}

.sp-pdp-section-head {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 24px;
}

.sp-pdp-section-head--center {
	align-items: center;
	text-align: center;
}

.sp-pdp-section-head__title {
	margin: 0 !important;
	font-size: clamp(1.45rem, 2.2vw, 1.85rem) !important;
	font-weight: 800 !important;
	line-height: 1.3 !important;
	color: var(--sp-primary) !important;
}

.sp-pdp-related__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
}

.sp-pdp-related__item {
	min-width: 0;
}

/* Sticky Bottom Add Bar (.sp-sticky-add) */
.sp-sticky-add {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 990;
	background-color: #ffffff;
	border-top: 1px solid var(--sp-line-strong);
	box-shadow: 0 -4px 20px rgba(15, 29, 51, 0.08);
	transform: translateY(100%);
	visibility: hidden;
	transition: transform 0.22s ease, visibility 0.22s ease;
}

.sp-sticky-add.is-visible {
	transform: translateY(0);
	visibility: visible;
}

.sp-sticky-add__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 10px 0;
}

.sp-sticky-add__product {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

.sp-sticky-add__image {
	width: 48px;
	height: 48px;
	border-radius: 6px;
	object-fit: cover;
	border: 1px solid var(--sp-line);
	flex-shrink: 0;
}

.sp-sticky-add__info {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.sp-sticky-add__title {
	margin: 0 !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	color: var(--sp-primary) !important;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.sp-sticky-add__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
}

.sp-sticky-add__variant {
	font-size: 12.5px;
	color: var(--sp-muted);
}

.sp-sticky-add__price-current {
	font-size: 13.5px;
	font-weight: 800;
	color: #dc2626;
}

.sp-sticky-add__price-current--quote {
	color: var(--sp-primary);
}

.sp-sticky-add__actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
}

.sp-sticky-add__btn {
	min-height: 42px !important;
	padding: 0 16px !important;
	margin: 0 !important;
	border-radius: 6px !important;
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	font-size: 13.5px !important;
	font-weight: 700 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	cursor: pointer;
	white-space: nowrap;
}

.sp-sticky-add__btn--list {
	background-color: #ffffff !important;
	border: 1.5px solid var(--sp-line-strong) !important;
	color: var(--sp-primary) !important;
}

.sp-sticky-add__btn--list:hover {
	border-color: var(--sp-primary) !important;
	background-color: var(--sp-surface) !important;
}

.sp-sticky-add__btn--quote {
	background-color: var(--sp-secondary) !important;
	border: 1.5px solid var(--sp-secondary) !important;
	color: #ffffff !important;
}

.sp-sticky-add__btn--quote:hover {
	background-color: var(--sp-secondary-hover) !important;
}

/* Modal Chính sách Chiết khấu MOQ (#sp-coupon-modal) */
.sp-coupon-modal {
	position: fixed;
	inset: 0;
	z-index: 10050;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.2s ease, visibility 0.2s ease;
}

.sp-coupon-modal.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.sp-coupon-modal__backdrop {
	position: absolute;
	inset: 0;
	background-color: rgba(15, 29, 51, 0.6);
	backdrop-filter: blur(2px);
}

.sp-coupon-modal__panel {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 560px;
	background-color: #ffffff;
	border-radius: 10px;
	border: 1px solid var(--sp-line);
	box-shadow: 0 20px 50px rgba(15, 29, 51, 0.25);
	overflow: hidden;
}

.sp-coupon-modal__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 18px 22px;
	border-bottom: 1px solid var(--sp-line);
	background-color: var(--sp-surface);
}

.sp-coupon-modal__title {
	margin: 0 !important;
	font-size: 16.5px !important;
	font-weight: 800 !important;
	color: var(--sp-primary) !important;
}

.sp-coupon-modal__close {
	width: 34px;
	height: 34px;
	min-height: 34px !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 1px solid var(--sp-line) !important;
	border-radius: 6px !important;
	background-color: #ffffff !important;
	color: var(--sp-primary) !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.sp-coupon-modal__body {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 22px;
}

.sp-coupon-card {
	display: grid;
	grid-template-columns: 120px minmax(0, 1fr);
	border: 1px solid var(--sp-line-strong);
	border-radius: 8px;
	overflow: hidden;
	background-color: #ffffff;
}

.sp-coupon-card__left {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 14px;
	background-color: var(--sp-primary);
	color: #ffffff;
	text-align: center;
}

.sp-coupon-card__tag {
	color: var(--sp-secondary);
	display: inline-flex;
}

.sp-coupon-card__code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-size: 14px;
	font-weight: 800;
	color: #ffffff;
}

.sp-coupon-card__right {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 16px;
}

.sp-coupon-card__info {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.sp-coupon-card__title {
	margin: 0 !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	color: var(--sp-primary) !important;
}

.sp-coupon-card__desc {
	margin: 0 !important;
	font-size: 12.5px;
	color: var(--sp-text);
}

.sp-coupon-card__expiry {
	font-size: 11.5px;
	color: var(--sp-muted);
}

.sp-coupon-card__copy {
	min-height: 34px !important;
	padding: 0 14px !important;
	margin: 0 !important;
	border-radius: 6px !important;
	border: none !important;
	background-color: var(--sp-primary) !important;
	color: #ffffff !important;
	font-size: 12.5px !important;
	font-weight: 700 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	cursor: pointer;
	flex-shrink: 0;
}

.sp-coupon-card__copy:hover {
	background-color: var(--sp-secondary) !important;
}

/* Lightbox Phóng to Ảnh Kỹ thuật (#sp-pdp-lightbox) */
.sp-pdp-lightbox {
	position: fixed;
	inset: 0;
	z-index: 10060;
	display: none;
}

.sp-pdp-lightbox.is-open {
	display: block;
}

.sp-pdp-lightbox__backdrop {
	position: absolute;
	inset: 0;
	background-color: rgba(10, 20, 36, 0.88);
}

.sp-pdp-lightbox__container {
	position: relative;
	z-index: 1;
	width: 100%;
	height: 100dvh;
	display: flex;
	flex-direction: column;
	padding: 20px;
}

.sp-pdp-lightbox__close {
	align-self: flex-end;
	width: 44px;
	height: 44px;
	min-height: 44px !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 1px solid rgba(255, 255, 255, 0.25) !important;
	border-radius: 6px !important;
	background-color: var(--sp-primary) !important;
	color: #ffffff !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.sp-pdp-lightbox__stage {
	position: relative;
	flex: 1;
	min-height: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.sp-pdp-lightbox__image-wrap {
	max-width: 88vw;
	max-height: 82dvh;
	display: flex;
	align-items: center;
	justify-content: center;
}

.sp-pdp-lightbox__image {
	max-width: 100%;
	max-height: 82dvh;
	object-fit: contain;
	border-radius: 8px;
	background-color: #ffffff;
}

.sp-pdp-lightbox__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	min-height: 44px !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 1px solid rgba(255, 255, 255, 0.25) !important;
	border-radius: 6px !important;
	background-color: var(--sp-primary) !important;
	color: #ffffff !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.sp-pdp-lightbox__nav--prev {
	left: 16px;
}

.sp-pdp-lightbox__nav--next {
	right: 16px;
}

/* Responsive .sp-pdp */
@media (max-width: 1024px) {
	.sp-pdp__hero {
		grid-template-columns: minmax(0, 1fr);
	}

	.sp-pdp__gallery {
		position: static;
	}

	.sp-bought-together__body {
		grid-template-columns: minmax(0, 1fr);
	}

	.sp-bought-together__list {
		grid-template-columns: minmax(0, 1fr);
	}

	.sp-pdp-related__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.sp-pdp__media {
		grid-template-columns: minmax(0, 1fr);
	}

	.sp-pdp__thumbs {
		order: 2;
		flex-direction: row;
		max-height: none;
		overflow-x: auto;
		overflow-y: hidden;
	}

	.sp-pdp__thumb {
		width: 68px;
		height: 68px;
		flex: 0 0 68px;
	}

	.sp-pdp__summary,
	.sp-pdp__tab-panels,
	.sp-bought-together {
		padding: 18px;
	}

	.sp-pdp__commitments,
	.sp-pdp__cta-secondary {
		grid-template-columns: minmax(0, 1fr);
	}

	.sp-pdp-related__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.sp-sticky-add__btn--list span {
		display: none;
	}
}

/* ==========================================================================
   TRANG LIÊN HỆ (.sp-corp-contact) - CHUẨN 100% MẪU S2 CORPORATE
   ========================================================================== */
.sp-contact-breadcrumb-sec {
	border-bottom: 1px solid #e2e8f0;
}

.sp-breadcrumb--inline {
	padding: 12px 0;
	border-bottom: 0 !important;
}

.sp-corp-band--hero {
	background-color: #0b2545 !important;
	color: #ffffff;
	border-bottom: 3px solid #e07a1f;
}

.sp-corp-contact__head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	min-width: 0;
}

.sp-corp-contact__title {
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-size: clamp(1.75rem, 2.8vw, 2.5rem) !important;
	font-weight: 700 !important;
	line-height: 1.22 !important;
	letter-spacing: -0.015em !important;
	text-transform: none !important;
	color: #ffffff !important;
	margin: 0 !important;
	text-wrap: balance;
}

.sp-corp-contact__lead {
	max-width: 44rem;
	font-size: 1.125rem;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.78) !important;
	margin: 0 !important;
}

.sp-corp-contact__row {
	margin-top: 32px !important;
}

.sp-corp-contact__sidebar,
.sp-corp-contact__form-col {
	padding-bottom: 0 !important;
}

.sp-corp-contact__panel,
.sp-corp-contact__form-card {
	padding: 24px;
	color: #0f172a;
	background-color: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 6px;
	min-width: 0;
}

.sp-corp-contact__form-card {
	padding: clamp(1.25rem, 3vw, 2rem);
}

.sp-corp-contact__media {
	margin-bottom: 16px;
	overflow: hidden;
	border-radius: 4px;
	border: 1px solid #e2e8f0;
	background-color: #f1f5f9;
}

.sp-corp-contact__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.sp-corp-contact__panel-title,
.sp-corp-contact__form-title {
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-size: 1.25rem !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	color: #0f172a !important;
	margin: 0 0 16px !important;
}

.sp-corp-contact__sla {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	padding: 24px;
	background-color: #0b2545;
	color: #ffffff;
	border-top: 1px solid rgba(255, 255, 255, 0.16);
	border-right: 1px solid rgba(255, 255, 255, 0.16);
	border-bottom: 1px solid rgba(255, 255, 255, 0.16);
	border-left: 4px solid #e07a1f;
	border-radius: 6px;
}

.sp-corp-contact__sla-head {
	display: flex;
	align-items: center;
	gap: 12px;
}

.sp-corp-contact__sla-head p {
	margin: 0 !important;
	display: contents;
}

.sp-corp-contact__sla-icon {
	display: inline-flex;
	color: #e07a1f;
	flex-shrink: 0;
}

.sp-corp-contact__sla-title {
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-size: 1.125rem !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	color: #ffffff !important;
	margin: 0 !important;
}

.sp-corp-contact__sla-desc {
	font-size: 0.875rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.78) !important;
	margin: 0 !important;
}

.sp-corp-contact__sla-btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px;
	min-height: 38px !important;
	padding: 0 16px !important;
	margin: 4px 0 0 !important;
	font-family: inherit !important;
	font-size: 0.875rem !important;
	font-weight: 600 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	color: #ffffff !important;
	background-color: transparent !important;
	border: 1px solid rgba(255, 255, 255, 0.28) !important;
	border-radius: 4px !important;
	cursor: pointer;
	transition: all 0.2s ease;
}

.sp-corp-contact__sla-btn:hover {
	color: #0b2545 !important;
	background-color: #ffffff !important;
	border-color: #ffffff !important;
}

.sp-corp-contact__form-head {
	margin-bottom: 24px;
}

.sp-corp-contact__form-head .sp-corp-contact__form-title {
	margin-bottom: 6px !important;
}

.sp-corp-contact__form-desc {
	font-size: 0.875rem;
	line-height: 1.6;
	color: #475569 !important;
	margin: 0 !important;
}

.sp-corp-contact__fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

.sp-corp-contact__field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.sp-corp-contact__field--full {
	grid-column: 1 / -1;
}

.sp-corp-contact__label {
	font-size: 0.8125rem;
	font-weight: 700;
	line-height: 1.4;
	color: #0f172a;
	margin: 0 !important;
}

.sp-corp-contact__label span {
	color: #dc2626;
}

.sp-corp-contact__field .wpcf7-form-control-wrap {
	display: block;
	width: 100%;
}

.sp-corp-contact__field .sp-field__input,
.sp-corp-contact__field .sp-field__select {
	width: 100%;
	height: 44px !important;
	margin: 0 !important;
	padding: 0 14px !important;
	font-family: inherit !important;
	font-size: 0.9375rem !important;
	color: #0f172a !important;
	background-color: #ffffff !important;
	border: 1px solid #cbd5e1 !important;
	border-radius: 4px !important;
	box-shadow: none !important;
	transition: border-color 0.2s ease;
}

.sp-corp-contact__field .sp-field__textarea {
	width: 100%;
	min-height: 120px !important;
	margin: 0 !important;
	padding: 12px 14px !important;
	font-family: inherit !important;
	font-size: 0.9375rem !important;
	line-height: 1.5 !important;
	color: #0f172a !important;
	background-color: #ffffff !important;
	border: 1px solid #cbd5e1 !important;
	border-radius: 4px !important;
	box-shadow: none !important;
	resize: vertical;
	transition: border-color 0.2s ease;
}

.sp-corp-contact__field .sp-field__input:focus,
.sp-corp-contact__field .sp-field__select:focus,
.sp-corp-contact__field .sp-field__textarea:focus {
	border-color: #0b2545 !important;
	outline: none;
}

.sp-corp-contact__submit-row {
	margin-top: 24px;
}

.sp-corp-contact__submit-btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px;
	min-height: 48px !important;
	padding: 0 24px !important;
	margin: 0 !important;
	font-family: inherit !important;
	font-size: 0.9375rem !important;
	font-weight: 600 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	color: #0b2545 !important;
	background-color: #e07a1f !important;
	border: 1px solid #e07a1f !important;
	border-radius: 4px !important;
	cursor: pointer;
	transition: all 0.2s ease;
}

.sp-corp-contact__submit-btn:hover {
	background-color: #c86714 !important;
	border-color: #c86714 !important;
	color: #ffffff !important;
}

.sp-corp-doc__section {
	border-top: 1px solid #e2e8f0;
}

.sp-corp-doc__prose {
	max-width: none;
	padding: clamp(1.5rem, 3vw, 2.5rem);
	background-color: #ffffff;
	border: 1px solid #e2e8f0;
	border-left: 4px solid #e07a1f;
	border-radius: 6px;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.sp-corp-doc__prose p {
	max-width: 72ch;
	font-size: 1rem;
	line-height: 1.75;
	color: #475569;
	margin: 0;
}

@media (max-width: 849px) {
	.sp-corp-contact__sidebar {
		margin-bottom: 24px;
	}
}

@media (max-width: 767px) {
	.sp-corp-contact__fields {
		grid-template-columns: minmax(0, 1fr);
	}
}