/* ==========================================================================
   STC COMPUTER - OFFICIAL DESIGN SYSTEM & STYLESHEET
   Brand Colors: STC Royal Blue (#0052f5), Deep Charcoal Navy (#0e1e3e), Gold (#ffd400)
   ========================================================================== */

:root {
	--stc-font: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--stc-blue: #0060e6;
	--stc-blue-dark: #004ecc;
	--stc-blue-light: #f0f5ff;
	--stc-navy: #0e1e3e;
	--stc-navy-dark: #071228;
	--stc-navy-light: #f8fafc;
	--stc-yellow: #ffb800;
	--stc-yellow-dark: #e6a500;
	--stc-red: #d70018;
	--text-dark: #0f172a;
	--text-body: #334155;
	--text-muted: #64748b;
	--bg-page: #f4f6f8;
	--bg-card: #ffffff;
	--border-color: #e5e7eb;
	--border-color-dark: #d1d5db;
	--radius-sm: 4px;
	--radius-md: 6px;
	--radius-lg: 8px;
	--radius-full: 9999px;
	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
	--shadow-md: 0 2px 8px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
	--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.08);
	--shadow-red: 0 2px 8px rgba(215, 0, 24, 0.2);
	--transition: all 0.2s ease-in-out;
}

*, *::before, *::after {
	box-sizing: border-box;
}

html {
	overflow-x: hidden;
	width: 100%;
	max-width: 100%;
}

body {
	margin: 0;
	padding: 0;
	font-family: var(--stc-font);
	background-color: var(--bg-page);
	color: var(--text-body);
	font-size: 14px;
	line-height: 1.5;
	letter-spacing: -0.011em;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
	width: 100%;
	max-width: 100%;
}

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

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

ul, ol {
	list-style: none;
	margin: 0;
	padding: 0;
}

button, input, select, textarea {
	font-family: inherit;
	font-size: inherit;
}

button {
	cursor: pointer;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--stc-font);
	font-weight: 700;
	color: var(--text-dark);
	letter-spacing: -0.015em;
	margin-top: 0;
}

.container {
	max-width: 1320px;
	width: 100%;
	margin: 0 auto;
	padding: 0 15px;
	box-sizing: border-box;
}

/* Helper Utilities */
.text-red { color: var(--stc-red) !important; }
.text-blue { color: var(--stc-blue) !important; }
.text-green { color: #16a34a !important; }
.text-orange { color: #ea580c !important; }
.text-purple { color: #9333ea !important; }
.mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 16px; }

/* ==========================================================================
   HEADER & NAVIGATION
   ========================================================================== */

/* Top Promotional Banner */
.stc-top-banner {
	background: var(--stc-blue);
	color: #ffffff;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.3px;
	border-bottom: 1px solid rgba(255,255,255,0.15);
}

.top-banner-content a {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	padding: 8px 0;
	color: #fff;
}

.top-banner-content .top-tag {
	background: #ffffff;
	color: #0052f5;
	padding: 3px 10px;
	border-radius: var(--radius-sm);
	font-weight: 800;
	font-size: 11px;
}

.top-banner-content .top-hotline {
	background: rgba(0,0,0,0.25);
	padding: 3px 12px;
	border-radius: var(--radius-full);
	font-weight: 800;
}

/* Utility Bar */
.stc-utility-bar {
	background: #f8fafc;
	border-bottom: 1px solid var(--border-color);
	font-size: 12px;
	color: var(--text-muted);
}

.utility-bar-inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 38px;
}

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

.utility-item {
	display: flex;
	align-items: center;
	gap: 5px;
}

.utility-item:hover {
	color: var(--stc-blue);
}

.hotline-item strong {
	color: var(--stc-blue);
	font-size: 12.5px;
}

.highlight-link {
	font-weight: 700;
	color: var(--stc-blue);
}

/* Utility Dropdowns */
.utility-dropdown {
	position: relative;
}

.dropdown-trigger {
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 4px;
}

.dropdown-trigger:hover {
	color: var(--stc-blue);
}

.utility-dropdown .dropdown-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	background: #ffffff;
	min-width: 210px;
	box-shadow: var(--shadow-md);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-sm);
	padding: 6px 0;
	z-index: 1000;
}

.utility-dropdown:hover .dropdown-menu {
	display: block;
}

.dropdown-menu a {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	font-size: 12px;
	color: var(--text-dark);
}

.dropdown-menu a:hover {
	background: var(--stc-blue-light);
	color: var(--stc-blue);
}

.utility-socials {
	display: flex;
	gap: 6px;
}

.soc-icon {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 11px;
}

.soc-icon.fb { background: #1877f2; }
.soc-icon.yt { background: #ff0000; }
.soc-icon.tt { background: #000000; }
.soc-icon.zl { background: #0068ff; }

/* Main Header */
.stc-main-header {
	background: #ffffff;
	padding: 20px 0;
	border-bottom: 1px solid var(--border-color);
}

.main-header-container {
	display: flex;
	align-items: center;
	gap: 32px;
}

.stc-logo img {
	height: 52px;
	width: auto;
	display: block;
	object-fit: contain;
}

/* Search Bar */
.stc-search-wrapper {
	flex: 1;
	max-width: 620px;
	position: relative;
}

.stc-search-form {
	display: flex;
	align-items: center;
	border: 2px solid var(--stc-blue);
	border-radius: var(--radius-full);
	overflow: hidden;
	background: #ffffff;
	height: 44px;
	box-shadow: 0 2px 8px rgba(0, 82, 245, 0.08);
}

.search-category-select select {
	border: none;
	background: #f8fafc;
	padding: 0 12px 0 16px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--text-dark);
	height: 40px;
	outline: none;
	border-right: 1px solid var(--border-color);
	cursor: pointer;
}

.stc-search-form input[type="text"] {
	flex: 1;
	border: none;
	padding: 0 16px;
	font-size: 13.5px;
	outline: none;
	color: var(--text-dark);
}

.search-submit-btn {
	background: linear-gradient(135deg, var(--stc-blue), var(--stc-blue-dark));
	color: #ffffff;
	border: none;
	padding: 0 22px;
	height: 100%;
	font-weight: 700;
	font-size: 13.5px;
	display: flex;
	align-items: center;
	gap: 7px;
	transition: var(--transition);
}

.search-submit-btn:hover {
	background: var(--stc-blue-dark);
}

/* Search Suggest Dropdown */
.stc-suggest-dropdown {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	background: #ffffff;
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-lg);
	z-index: 1000;
	max-height: 440px;
	overflow-y: auto;
	display: none;
}

.suggest-header {
	padding: 10px 14px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--text-muted);
	background: #f8fafc;
	border-bottom: 1px solid var(--border-color);
}

.search-suggest-list .suggest-item a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 14px;
	border-bottom: 1px solid #f1f5f9;
}

.search-suggest-list .suggest-item a:hover {
	background: var(--stc-blue-light);
}

.s-thumb {
	position: relative;
	width: 50px;
	height: 50px;
	flex-shrink: 0;
}

.s-thumb img {
	width: 50px;
	height: 50px;
	object-fit: contain;
	border-radius: var(--radius-sm);
	border: 1px solid var(--border-color);
}

.s-thumb .s-badge {
	position: absolute;
	top: -4px;
	left: -4px;
	background: var(--stc-blue);
	color: #fff;
	font-size: 9px;
	font-weight: 800;
	padding: 1px 4px;
	border-radius: 4px;
}

.s-info {
	flex: 1;
	min-width: 0;
}

.s-title {
	margin: 0 0 3px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--text-dark);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.s-price {
	color: var(--stc-blue);
	font-weight: 800;
	font-size: 13px;
}

.s-reg-price {
	color: var(--text-muted);
	font-size: 11px;
	margin-left: 6px;
}

.search-view-all-btn {
	display: block;
	text-align: center;
	padding: 10px;
	background: var(--stc-blue-light);
	color: var(--stc-blue-dark);
	font-weight: 700;
	font-size: 12px;
	border-top: 1px solid var(--border-color);
}

.search-view-all-btn:hover {
	background: #ffe3e5;
}

.no-suggest-found {
	text-align: center;
	padding: 24px 15px;
	color: var(--text-muted);
}

.no-suggest-found i {
	font-size: 28px;
	margin-bottom: 6px;
}

/* Header CTA & Actions */
.stc-header-actions {
	display: flex;
	align-items: center;
	gap: 22px;
}

/* PC Builder CTA Button */
.btn-pc-builder-cta {
	display: flex;
	align-items: center;
	gap: 12px;
	background: linear-gradient(135deg, #1e293b, var(--stc-navy));
	padding: 8px 16px;
	border-radius: var(--radius-md);
	color: #ffffff;
	box-shadow: 0 3px 8px rgba(36,58,118,0.25);
	transition: var(--transition);
	border: 1px solid rgba(255,255,255,0.1);
}

.btn-pc-builder-cta:hover {
	transform: translateY(-2px);
	background: linear-gradient(135deg, var(--stc-blue), var(--stc-blue-dark));
	box-shadow: var(--shadow-red);
}

.cta-icon-wrap {
	width: 32px;
	height: 32px;
	background: rgba(255,255,255,0.15);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
}

.cta-text-wrap {
	display: flex;
	flex-direction: column;
	text-align: left;
}

.cta-title {
	font-size: 9.5px;
	font-weight: 800;
	letter-spacing: 0.8px;
	color: var(--stc-yellow);
}

.cta-subtitle {
	font-size: 12.5px;
	font-weight: 900;
	letter-spacing: -0.2px;
}

/* Account & Cart Box */
.header-action-item {
	position: relative;
}

.action-btn {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 5px 8px;
}

.action-icon {
	font-size: 26px;
	color: var(--stc-navy);
}

.action-labels {
	display: flex;
	flex-direction: column;
	line-height: 1.2;
}

.sub-label {
	font-size: 10.5px;
	color: var(--text-muted);
}

.main-label {
	font-size: 12.5px;
	font-weight: 700;
	color: var(--text-dark);
}

.cart-icon-wrap {
	position: relative;
}

.cart-count {
	position: absolute;
	top: -6px;
	right: -8px;
	background: var(--stc-blue);
	color: #fff;
	font-size: 10px;
	font-weight: 800;
	min-width: 17px;
	height: 17px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1.5px solid #fff;
}

/* Account Dropdown */
.user-account-dropdown {
	display: none;
	position: absolute;
	top: 100%;
	right: 0;
	background: #ffffff;
	min-width: 230px;
	border: 1px solid var(--border-color, #e2e8f0);
	border-radius: 10px;
	box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.14), 0 8px 10px -6px rgba(15, 23, 42, 0.08);
	padding: 8px;
	z-index: 1000;
}

.user-account-dropdown::before {
	content: '';
	position: absolute;
	top: -10px;
	left: 0;
	right: 0;
	height: 10px;
}

.user-account-box:hover .user-account-dropdown {
	display: block;
}

/* User Greeting Header */
.user-dropdown-header {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 8px 8px 8px;
}

.user-avatar-circle {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #eff6ff;
	color: var(--stc-blue, #0060e6);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	flex-shrink: 0;
}

.user-info-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.user-display-name {
	font-size: 13.5px;
	font-weight: 700;
	color: #0f172a;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 1.3;
}

.user-role-badge {
	font-size: 11px;
	font-weight: 500;
	color: #64748b;
	line-height: 1.2;
}

.user-dropdown-divider {
	height: 1px;
	background: #f1f5f9;
	margin: 6px 0;
}

/* Menu items */
.user-dropdown-menu {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.user-account-dropdown a,
.user-dropdown-link {
	display: flex !important;
	align-items: center;
	gap: 10px;
	width: 100%;
	box-sizing: border-box;
	padding: 9px 12px;
	border-radius: 6px;
	font-size: 13px;
	font-weight: 600;
	color: #334155;
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease;
}

.user-account-dropdown a i,
.user-dropdown-link i {
	font-size: 14px;
	width: 18px;
	text-align: center;
	color: #64748b;
	transition: color 0.15s ease;
	flex-shrink: 0;
}

.user-account-dropdown a:hover,
.user-dropdown-link:hover {
	background: #f1f5f9;
	color: var(--stc-blue, #0060e6);
}

.user-account-dropdown a:hover i,
.user-dropdown-link:hover i {
	color: var(--stc-blue, #0060e6);
}

.user-dropdown-link.user-dropdown-admin:hover {
	background: #ecfdf5;
	color: #059669;
}
.user-dropdown-link.user-dropdown-admin:hover i {
	color: #059669;
}

.user-account-dropdown a.user-dropdown-logout,
.user-dropdown-logout {
	color: #dc2626 !important;
}

.user-account-dropdown a.user-dropdown-logout i,
.user-dropdown-logout i {
	color: #dc2626 !important;
}

.user-account-dropdown a.user-dropdown-logout:hover,
.user-dropdown-logout:hover {
	background: #fef2f2 !important;
	color: #b91c1c !important;
}

.user-account-dropdown a.user-dropdown-logout:hover i,
.user-dropdown-logout:hover i {
	color: #b91c1c !important;
}

.auth-buttons {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 4px;
}

.btn-login-modal {
	background: var(--stc-blue);
	color: #fff !important;
	text-align: center;
	padding: 9px;
	border-radius: var(--radius-sm);
	font-weight: 700;
	font-size: 13px;
	justify-content: center;
}

.btn-login-modal:hover {
	background: #004ecc !important;
	color: #fff !important;
}

.btn-register-modal {
	background: var(--stc-yellow);
	color: #1e293b !important;
	text-align: center;
	padding: 9px;
	border-radius: var(--radius-sm);
	font-weight: 700;
	font-size: 13px;
	justify-content: center;
}

.btn-register-modal:hover {
	background: #eab308 !important;
	color: #0f172a !important;
}

.social-login-note {
	margin-top: 8px;
	font-size: 11px;
	color: var(--text-muted);
	text-align: center;
	border-top: 1px solid #f1f5f9;
	padding: 8px 4px 4px;
	line-height: 1.4;
}

/* Mini Cart Dropdown */
.mini-cart-dropdown {
	display: none;
	position: absolute;
	top: 100%;
	right: 0;
	background: #ffffff;
	width: 320px;
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-lg);
	padding: 14px;
	z-index: 1000;
}

.cart-action-box:hover .mini-cart-dropdown {
	display: block;
}

.mini-cart-items-list {
	max-height: 250px;
	overflow-y: auto;
}

.mini-cart-item {
	display: flex;
	gap: 10px;
	padding: 8px 0;
	border-bottom: 1px solid #f1f5f9;
}

.mini-cart-img img {
	width: 44px;
	height: 44px;
	object-fit: cover;
	border-radius: var(--radius-sm);
	border: 1px solid var(--border-color);
}

.mini-cart-info {
	flex: 1;
}

.mini-cart-title {
	font-size: 12px;
	font-weight: 600;
	color: var(--text-dark);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.mini-cart-price {
	font-size: 12px;
	color: var(--stc-blue);
	font-weight: 700;
	margin-top: 3px;
}

.mini-cart-footer {
	margin-top: 10px;
}

.mini-cart-total {
	display: flex;
	justify-content: space-between;
	font-size: 13px;
	margin-bottom: 10px;
}

.mini-cart-total strong {
	color: var(--stc-blue);
	font-size: 15px;
}

.mini-cart-actions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}

.btn-view-cart {
	background: #f1f5f9;
	color: var(--text-dark);
	text-align: center;
	padding: 8px;
	border-radius: var(--radius-sm);
	font-weight: 700;
	font-size: 12px;
}

.btn-checkout {
	background: var(--stc-blue);
	color: #fff;
	text-align: center;
	padding: 8px;
	border-radius: var(--radius-sm);
	font-weight: 700;
	font-size: 12px;
}

.mini-cart-empty {
	text-align: center;
	padding: 20px 0;
	color: var(--text-muted);
}

.mini-cart-empty i {
	font-size: 32px;
	margin-bottom: 6px;
}

.btn-start-shopping {
	display: inline-block;
	background: var(--stc-blue);
	color: #fff;
	padding: 6px 14px;
	border-radius: var(--radius-sm);
	font-size: 12px;
	font-weight: 700;
	margin-top: 8px;
}

/* ==========================================================================
   NAVIGATION BAR & MEGA MENU
   ========================================================================== */
.stc-main-nav {
	background: var(--stc-navy);
	color: #ffffff;
	position: relative;
	z-index: 500;
}

.nav-inner {
	display: flex;
	align-items: center;
}

/* Category Mega Trigger Button */
.category-mega-wrapper {
	position: relative;
	width: 250px;
	flex-shrink: 0;
}

.category-mega-trigger {
	background: var(--stc-blue);
	color: #ffffff;
	height: 46px;
	display: flex;
	align-items: center;
	padding: 0 18px;
	gap: 10px;
	font-weight: 800;
	font-size: 13.5px;
	cursor: pointer;
	letter-spacing: 0.3px;
	user-select: none;
}

.category-mega-trigger .arrow-indicator {
	margin-left: auto;
}

/* Mega Menu Dropdown */
.category-mega-menu {
	position: absolute;
	top: 100%;
	left: 0;
	width: 250px;
	height: 410px;
	background: #ffffff;
	border: 1px solid var(--border-color);
	border-top: none;
	box-shadow: 0 4px 15px rgba(0,0,0,0.08);
	display: none;
	z-index: 1000;
	overflow: visible !important;
	box-sizing: border-box;
}

/* On Homepage Desktop, show mega menu by default */
@media (min-width: 992px) {
	.category-mega-wrapper.homepage-active .category-mega-menu {
		display: block;
	}
}

.mega-menu-list {
	height: 100%;
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

.mega-menu-list > .mega-menu-item {
	flex: 1 1 0%;
	min-height: 0;
	display: flex;
	align-items: stretch;
	position: static;
}

.mega-menu-list > .mega-menu-item > a {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0 12px;
	width: 100%;
	font-size: 12px;
	font-weight: 600;
	color: var(--text-dark);
	border-bottom: 1px solid #f1f5f9;
	transition: all 0.15s ease;
	box-sizing: border-box;
	white-space: nowrap;
}

.mega-menu-list > .mega-menu-item:last-child > a {
	border-bottom: none;
}

.mega-menu-list > .mega-menu-item:hover > a {
	background: #edf4ff;
	color: var(--stc-blue);
	padding-left: 15px;
	font-weight: 700;
}

.mega-menu-list > .mega-menu-item > a .cat-icon {
	width: 18px;
	text-align: center;
	color: var(--stc-navy);
	font-size: 13px;
	flex-shrink: 0;
	transition: color 0.15s ease;
}

.mega-menu-list > .mega-menu-item:hover > a .cat-icon {
	color: var(--stc-blue);
}

.mega-menu-list > .mega-menu-item > a span {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	flex: 1;
	line-height: 1.2;
}

.mega-menu-list > .mega-menu-item > a .sub-arrow {
	margin-left: auto;
	font-size: 10px;
	color: #94a3b8;
	flex-shrink: 0;
	transition: transform 0.15s ease;
}

.mega-menu-list > .mega-menu-item:hover > a .sub-arrow {
	color: var(--stc-blue);
	transform: translateX(3px);
}

.highlight-cat-item {
	background: #f4f8ff !important;
	font-weight: 700 !important;
	color: var(--stc-blue) !important;
}

/* Sub-panel Flyout with Drilldown */
.mega-sub-panel {
	display: none;
	position: absolute;
	top: 0;
	left: 100%;
	width: 860px;
	height: 410px;
	min-height: 410px;
	background: #ffffff;
	border: 1px solid var(--border-color);
	border-left: 3px solid var(--stc-blue);
	border-radius: 0 10px 10px 0;
	box-shadow: 10px 15px 35px rgba(0, 0, 0, 0.15);
	padding: 0;
	z-index: 1050;
	box-sizing: border-box;
	animation: megaPanelIn 0.16s ease-out;
	overflow: hidden;
}

.mega-menu-item.has-sub:hover .mega-sub-panel {
	display: flex;
}

@keyframes megaPanelIn {
	from {
		opacity: 0;
		transform: translateX(8px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

/* Cột Trái: Danh Mục Chi Tiết Cấp 2 */
.drilldown-nav-col {
	width: 250px;
	flex-shrink: 0;
	background: #f8fafc;
	border-right: 1px solid #e2e8f0;
	display: flex;
	flex-direction: column;
	padding: 12px 0;
	box-sizing: border-box;
	overflow-y: auto;
}

.drilldown-nav-header {
	padding: 0 16px 10px;
	font-size: 11.5px;
	font-weight: 800;
	color: #0e1e3e;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	border-bottom: 1px solid #e2e8f0;
	margin-bottom: 6px;
	display: flex;
	align-items: center;
	gap: 6px;
}

.drilldown-nav-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.drilldown-nav-item {
	display: block;
}

.drilldown-nav-item > a {
	display: flex;
	align-items: center;
	padding: 9px 16px;
	font-size: 12.5px;
	font-weight: 600;
	color: #334155;
	gap: 10px;
	transition: all 0.15s ease;
	position: relative;
}

.drilldown-nav-item > a .s-icon {
	width: 16px;
	text-align: center;
	color: #64748b;
	font-size: 12px;
	transition: color 0.15s;
}

.drilldown-nav-item > a .s-title {
	flex: 1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.drilldown-nav-item > a .nav-arrow {
	font-size: 10px;
	color: #cbd5e1;
	transition: transform 0.15s;
}

/* Hover & Active State cho mục cấp 2 */
.drilldown-nav-item:hover > a,
.drilldown-nav-item.active > a {
	background: #edf4ff;
	color: var(--stc-blue);
	font-weight: 700;
	padding-left: 20px;
}

.drilldown-nav-item:hover > a .s-icon,
.drilldown-nav-item.active > a .s-icon {
	color: var(--stc-blue);
}

.drilldown-nav-item:hover > a .nav-arrow,
.drilldown-nav-item.active > a .nav-arrow {
	color: var(--stc-blue);
	transform: translateX(3px);
}

/* Cột Phải: Nội Dung Chi Tiết Cấp 3 */
.drilldown-content-col {
	flex: 1;
	background: #ffffff;
	padding: 22px 24px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	position: relative;
	overflow-y: auto;
}


/* Subpane tương ứng của từng mục */
.drilldown-subpane {
	display: none;
	animation: paneFadeIn 0.15s ease-out;
}

.drilldown-subpane.active {
	display: block;
}

@keyframes paneFadeIn {
	from {
		opacity: 0;
		transform: translateY(4px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.subpane-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 12px;
	margin-bottom: 16px;
	border-bottom: 2px solid #e2e8f0;
}

.subpane-title {
	margin: 0;
	font-size: 15px;
	font-weight: 800;
	color: #0e1e3e;
	display: flex;
	align-items: center;
	gap: 8px;
}

.subpane-title a {
	color: #0e1e3e;
	transition: color 0.15s;
}

.subpane-title a:hover {
	color: var(--stc-blue);
}

.subpane-view-all {
	font-size: 12.5px;
	font-weight: 700;
	color: var(--stc-blue);
	display: flex;
	align-items: center;
	gap: 6px;
	transition: gap 0.15s;
}

.subpane-view-all:hover {
	gap: 9px;
}

.subpane-body-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 210px;
	gap: 24px;
	align-items: start;
}

.subpane-col {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.subpane-group-title {
	margin: 0 0 8px;
	font-size: 13px;
	font-weight: 800;
	color: #0e1e3e;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	padding-bottom: 6px;
	border-bottom: 2px solid #e2e8f0;
}

.subpane-links-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
	gap: 6px 14px;
}

.subpane-item-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 5px 8px;
	font-size: 12.5px;
	color: #334155;
	border-radius: var(--radius-sm);
	transition: all 0.15s ease;
}

.subpane-item-link:hover {
	background: #edf4ff;
	color: var(--stc-blue);
	font-weight: 600;
	padding-left: 12px;
}

.subpane-promo-col {
	grid-column: span 1;
}

.mini-brand-card {
	background: linear-gradient(145deg, #0e1e3e, #1e293b);
	color: #ffffff;
	border-radius: var(--radius-md);
	padding: 14px;
	display: flex;
	flex-direction: column;
	box-shadow: 0 4px 12px rgba(14, 30, 62, 0.2);
}

.mini-brand-card .card-tag {
	align-self: flex-start;
	background: var(--stc-blue);
	color: #fff;
	font-size: 9px;
	font-weight: 800;
	padding: 2px 6px;
	border-radius: 4px;
	margin-bottom: 6px;
}

.mini-brand-card h6 {
	margin: 0 0 10px;
	font-size: 13.5px;
	font-weight: 800;
	color: var(--stc-yellow);
}

.mini-perks {
	list-style: none;
	margin: 0 0 12px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 11px;
	color: #e2e8f0;
}

.mini-perks li {
	display: flex;
	align-items: center;
	gap: 6px;
}

.btn-subpane-action {
	align-self: flex-start;
	background: #ffffff;
	color: var(--stc-blue) !important;
	font-size: 11px;
	font-weight: 800;
	padding: 5px 12px;
	border-radius: 4px;
	transition: all 0.15s;
}

.btn-subpane-action:hover {
	background: var(--stc-yellow);
	color: #0e1e3e !important;
}

.mega-sub-badge {
	font-size: 9.5px;
	font-weight: 800;
	padding: 1px 6px;
	border-radius: 9999px;
	text-transform: uppercase;
	letter-spacing: 0.3px;
}
.mega-sub-badge.hot { background: #fee2e2; color: #ef4444; }
.mega-sub-badge.new { background: #e0f2fe; color: #0284c7; }
.mega-sub-badge.sale { background: #fef3c7; color: #d97706; }

/* Horizontal Nav Links */
.horizontal-nav-links {
	display: flex;
	align-items: center;
	flex: 1;
	overflow-x: auto;
}

.horizontal-nav-links .h-link {
	padding: 13px 18px;
	font-size: 12.5px;
	font-weight: 700;
	white-space: nowrap;
	color: #ffffff;
	display: flex;
	align-items: center;
	gap: 7px;
}

.horizontal-nav-links .h-link:hover {
	background: var(--stc-navy-dark);
	color: var(--stc-yellow);
}

.horizontal-nav-links .flash-link {
	color: var(--stc-yellow);
}

.horizontal-nav-links .build-link {
	background: rgba(0, 82, 245, 0.35);
}

/* Breadcrumb */
.stc-breadcrumb {
	padding: 12px 0;
	font-size: 12px;
	color: var(--text-muted);
}

.breadcrumb-inner {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}

.stc-breadcrumb a {
	color: var(--stc-navy);
}

.stc-breadcrumb a:hover {
	color: var(--stc-blue);
}

.stc-breadcrumb .sep {
	color: #cbd5e1;
}

/* ==========================================================================
   HOMEPAGE MODULES & HERO SECTION
   ========================================================================== */
.home-hero-section {
	margin-top: 0;
	margin-bottom: 16px;
}

.hero-grid-layout {
	display: grid;
	grid-template-columns: 250px 1fr 280px;
	gap: 14px;
	height: 410px;
	align-items: stretch;
	box-sizing: border-box;
}

@media (max-width: 1200px) {
	.category-mega-wrapper {
		width: 240px;
	}
	.category-mega-menu {
		width: 240px;
	}
	.hero-mega-spacer {
		width: 240px;
	}
	.hero-grid-layout {
		grid-template-columns: 240px 1fr 260px;
		gap: 12px;
	}
}

@media (max-width: 991px) {
	.hero-grid-layout {
		grid-template-columns: 1fr;
		height: auto;
	}
	.hero-mega-spacer {
		display: none;
	}
}

.hero-mega-spacer {
	width: 250px;
	height: 410px;
	flex-shrink: 0;
}

/* Center Slider */
.hero-slider-wrap {
	min-width: 0;
	height: 410px !important;
	max-height: 410px !important;
	padding-top: 10px;
	box-sizing: border-box;
	overflow: hidden !important;
}

.home-slider {
	position: relative;
	border-radius: var(--radius-md);
	overflow: hidden !important;
	box-shadow: var(--shadow-sm);
	height: 400px !important;
	max-height: 400px !important;
	width: 100% !important;
	background: #1e293b;
}

.slider-track {
	position: relative;
	width: 100% !important;
	height: 100% !important;
	overflow: hidden !important;
}

.home-slider .slide {
	display: none;
	width: 100% !important;
	height: 100% !important;
	max-height: 400px !important;
	overflow: hidden !important;
}

.home-slider .slide.active {
	display: block;
}

.home-slider .slide a {
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-height: 400px !important;
	overflow: hidden !important;
}

.home-slider .slide img {
	width: 100% !important;
	height: 100% !important;
	max-height: 400px !important;
	object-fit: cover !important;
	object-position: center !important;
	display: block !important;
}

.slider-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: rgba(0,0,0,0.45);
	color: #fff;
	border: none;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	transition: var(--transition);
	z-index: 10;
}

.slider-arrow:hover {
	background: var(--stc-blue);
	transform: translateY(-50%) scale(1.08);
}

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

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

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

.slider-dots .dot.active {
	background: var(--stc-blue);
	width: 24px;
	border-radius: var(--radius-full);
}

/* Sub-banners */
.hero-sub-banners {
	display: flex;
	flex-direction: column;
	gap: 10px;
	height: 410px !important;
	max-height: 410px !important;
	min-width: 0;
	padding-top: 10px;
	box-sizing: border-box;
	overflow: hidden !important;
}

.sub-banner-card {
	flex: 1 1 0 !important;
	border-radius: var(--radius-md);
	overflow: hidden !important;
	box-shadow: var(--shadow-sm);
	transition: var(--transition);
	display: block;
	position: relative;
	background: #1e293b;
	height: 195px !important;
	max-height: 195px !important;
	width: 100% !important;
	box-sizing: border-box;
}

.sub-banner-card img {
	width: 100% !important;
	height: 100% !important;
	max-height: 195px !important;
	object-fit: cover !important;
	object-position: center !important;
	display: block !important;
	transition: transform 0.3s ease;
}

.sub-banner-card:hover img {
	transform: scale(1.03);
}

.sub-banner-card:hover {
	box-shadow: var(--shadow-md);
}

/* Trust Bar */
.home-trust-bar {
	margin: 0 0 24px;
	width: 100%;
}

.trust-pill-list {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 12px;
	width: 100%;
	box-sizing: border-box;
}

@media (max-width: 991px) {
	.trust-pill-list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.trust-pill-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 6px;
	}
}

.trust-pill {
	background: #ffffff;
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md);
	padding: 9px 12px;
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	font-weight: 700;
	color: var(--text-dark);
	box-shadow: var(--shadow-sm);
	min-width: 0;
	overflow: hidden;
	box-sizing: border-box;
}

.trust-pill span {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
}

.trust-pill i {
	font-size: 16px;
	flex-shrink: 0;
}

/* ==========================================================================
   FLASH SALE SECTION
   ========================================================================== */
.home-flash-sale-section {
	background: linear-gradient(135deg, #f0f6ff, #e3eeff);
	border: 2px solid #b9d5ff;
	border-radius: var(--radius-lg);
	padding: 16px 18px 20px;
	margin-bottom: 30px;
	box-shadow: var(--shadow-md);
	width: 100%;
	box-sizing: border-box;
	overflow: hidden;
}

.flash-sale-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px;
	flex-wrap: wrap;
	gap: 10px;
}

.flash-title-wrap {
	display: flex;
	align-items: center;
	gap: 10px;
}

.flash-badge {
	background: var(--stc-blue);
	color: #fff;
	padding: 4px 9px;
	border-radius: var(--radius-sm);
	font-size: 11.5px;
	font-weight: 900;
	letter-spacing: 0.5px;
	animation: pulseRed 2s infinite;
	white-space: nowrap;
}

@keyframes pulseRed {
	0% { box-shadow: 0 0 0 0 rgba(0, 82, 245, 0.6); }
	70% { box-shadow: 0 0 0 10px rgba(0, 82, 245, 0); }
	100% { box-shadow: 0 0 0 0 rgba(0, 82, 245, 0); }
}

.flash-title {
	margin: 0;
	font-size: 17px;
	font-weight: 900;
	color: var(--stc-blue-dark);
	letter-spacing: -0.3px;
	white-space: nowrap;
}

.flash-countdown-wrap {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--text-dark);
	white-space: nowrap;
	margin-left: auto;
}

.countdown-timer {
	display: flex;
	align-items: center;
	gap: 3px;
}

.timer-box {
	background: #1e293b;
	color: #ffd400;
	font-size: 13px;
	font-weight: 900;
	min-width: 24px;
	padding: 2px 5px;
	border-radius: 4px;
	text-align: center;
}

.timer-sep {
	font-weight: 900;
	color: #1e293b;
}

.view-all-link {
	font-size: 12.5px;
	font-weight: 700;
	color: var(--stc-navy);
	white-space: nowrap;
}

.view-all-link:hover {
	color: var(--stc-blue);
}

/* Flash Carousel Wrapper */
.flash-carousel-wrapper {
	position: relative;
	width: 100%;
}

.flash-carousel-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #ffffff;
	color: var(--text-dark);
	border: 1px solid #cbd5e1;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.2s ease;
	outline: none;
}

.flash-carousel-nav:hover {
	background: var(--stc-blue);
	color: #ffffff;
	border-color: var(--stc-blue);
	transform: translateY(-50%) scale(1.08);
	box-shadow: 0 6px 16px rgba(0, 82, 245, 0.25);
}

.flash-carousel-nav.prev {
	left: -14px;
}

.flash-carousel-nav.next {
	right: -14px;
}

/* Products Carousel Grid / Horizontal Slider Track */
.products-carousel-grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 12px;
	width: 100%;
	box-sizing: border-box;
}

/* Flash Sale Card Specific Compact & Balanced Proportions */
.home-flash-sale-section .stc-product-card {
	padding: 12px 12px 14px;
	background: #ffffff;
	border-radius: var(--radius-md);
	border: 1px solid rgba(0, 82, 245, 0.15);
	box-shadow: 0 2px 8px rgba(0, 82, 245, 0.04);
}

.home-flash-sale-section .stc-product-card:hover {
	border-color: var(--stc-blue);
	box-shadow: 0 6px 20px rgba(0, 82, 245, 0.12);
}

.home-flash-sale-section .thumb-wrapper {
	height: 160px;
	max-height: 160px;
	min-height: 150px;
	padding: 6px;
}

.home-flash-sale-section .thumb-wrapper .product-img {
	max-height: 145px;
	font-size: 0;
	color: transparent;
}

.home-flash-sale-section .card-title {
	font-size: 13.5px;
	line-height: 1.35;
	min-height: 36px;
	max-height: 38px;
	margin-bottom: 6px;
}

.home-flash-sale-section .card-specs-chip {
	font-size: 11px;
	padding: 2px 7px;
	margin-bottom: 6px;
}

.home-flash-sale-section .current-price {
	font-size: 16.5px;
	font-weight: 800;
	color: var(--stc-red);
}

.home-flash-sale-section .card-gift-box {
	font-size: 11px;
	padding: 3px 6px;
	margin-bottom: 6px;
}

.home-flash-sale-section .card-meta-bar {
	font-size: 11px;
	margin-bottom: 8px;
}

@media (max-width: 1240px) {
	.products-carousel-grid {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		overflow-x: auto !important;
		overflow-y: hidden !important;
		scroll-behavior: smooth;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		gap: 12px;
		padding-bottom: 6px;
		scrollbar-width: none;
	}
	.products-carousel-grid::-webkit-scrollbar {
		display: none;
	}
	.products-carousel-grid .stc-product-card {
		flex: 0 0 calc((100% - 3 * 12px) / 4) !important;
		min-width: 220px !important;
		scroll-snap-align: start;
	}
}

@media (max-width: 991px) {
	.flash-carousel-nav {
		display: none;
	}
	.products-carousel-grid .stc-product-card {
		flex: 0 0 calc((100% - 2 * 12px) / 3) !important;
		min-width: 200px !important;
	}
}

@media (max-width: 640px) {
	.products-carousel-grid {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		overflow-x: auto !important;
		overflow-y: hidden !important;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		gap: 8px !important;
		padding: 4px 2px 10px 2px !important;
		margin: 0 !important;
	}
	/* Exactly 2 cards per row on mobile */
	.products-carousel-grid .stc-product-card {
		flex: 0 0 calc((100% - 8px) / 2) !important;
		max-width: calc(50% - 4px) !important;
		min-width: 135px !important;
		scroll-snap-align: start;
		padding: 8px 8px 10px !important;
	}
	.home-flash-sale-section .thumb-wrapper {
		height: 120px !important;
		max-height: 120px !important;
		min-height: 120px !important;
	}
	.home-flash-sale-section .thumb-wrapper .product-img {
		max-height: 112px !important;
	}
}

@media (max-width: 380px) {
	.products-carousel-grid,
	.home-category-showcase .products-grid {
		gap: 6px !important;
	}
	.products-carousel-grid .stc-product-card,
	.home-category-showcase .products-grid .stc-product-card {
		flex: 0 0 calc((100% - 6px) / 2) !important;
		max-width: calc(50% - 3px) !important;
		min-width: 130px !important;
	}
}

/* ==========================================================================
   CATEGORY SHOWCASE SECTION
   ========================================================================== */
.home-category-showcase {
	background: #ffffff;
	border-radius: var(--radius-lg);
	padding: 22px;
	margin-bottom: 28px;
	box-shadow: var(--shadow-sm);
	border: 1px solid var(--border-color);
}

.showcase-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 2px solid #f1f5f9;
	padding-bottom: 14px;
	margin-bottom: 18px;
	flex-wrap: wrap;
	gap: 14px;
}

.showcase-title-wrap {
	display: flex;
	align-items: center;
	gap: 10px;
}

.showcase-icon {
	color: var(--stc-blue);
	font-size: 20px;
}

.showcase-title {
	margin: 0;
	font-size: 18px;
	font-weight: 900;
	color: var(--stc-navy);
	letter-spacing: -0.3px;
}

.showcase-tabs {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.showcase-tabs .tab-link {
	padding: 5px 12px;
	border-radius: var(--radius-full);
	background: #f1f5f9;
	font-size: 12px;
	font-weight: 700;
	color: var(--text-muted);
}

.showcase-tabs .tab-link:hover,
.showcase-tabs .tab-link.active {
	background: var(--stc-blue);
	color: #ffffff;
}

.showcase-header-top {
	display: contents;
}

.view-all-full {
	display: inline;
}

.view-all-short {
	display: none;
}

.showcase-view-all {
	font-size: 13px;
	font-weight: 700;
	color: var(--stc-navy);
	display: inline-flex;
	align-items: center;
	gap: 4px;
	white-space: nowrap;
}

.showcase-view-all:hover {
	color: var(--stc-blue);
}

/* Product Grid */
.products-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
	width: 100%;
	box-sizing: border-box;
}

@media (max-width: 1024px) {
	.products-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 10px;
	}
}

@media (max-width: 640px) {
	.products-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px;
	}
}

/* ==========================================================================
   PRODUCT CARD (AUTHENTIC STC STYLE - ENLARGED & HIGH CLARITY)
   ========================================================================== */
.stc-product-card {
	background: #ffffff;
	border: 1px solid var(--border-color);
	border-radius: var(--radius-lg);
	padding: 14px 14px 16px;
	display: flex;
	flex-direction: column;
	position: relative;
	transition: all 0.2s ease;
	min-width: 0; /* CRITICAL: prevents CSS grid blowout */
	box-sizing: border-box;
	overflow: hidden;
	box-shadow: var(--shadow-sm);
}

.stc-product-card:hover {
	border-color: var(--stc-blue);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
	transform: translateY(-2px);
}

/* Badges */
.card-badges {
	position: absolute;
	top: 10px;
	left: 10px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	z-index: 2;
}

.badge-discount {
	background: var(--stc-red);
	color: #ffffff;
	font-size: 11px;
	font-weight: 700;
	padding: 2px 7px;
	border-radius: var(--radius-sm);
}

.badge-installment {
	background: #f59e0b;
	color: #ffffff;
	font-size: 10.5px;
	font-weight: 700;
	padding: 2px 6px;
	border-radius: var(--radius-sm);
}

/* Thumbnail - Generous height, crisp scaling matching modern e-commerce */
.card-thumb-link {
	display: block;
	margin-bottom: 12px;
	text-align: center;
}

.thumb-wrapper {
	height: 220px;
	max-height: 220px;
	min-height: 200px;
	width: 100%;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #ffffff;
	border-radius: var(--radius-md);
	padding: 8px;
	box-sizing: border-box;
}

.thumb-wrapper .product-img {
	max-height: 205px;
	max-width: 100%;
	width: auto !important;
	height: auto !important;
	object-fit: contain;
	transition: transform 0.35s ease;
	display: block;
	margin: 0 auto;
}

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

@media (max-width: 640px) {
	.stc-product-card {
		padding: 10px 10px 12px;
	}
	.thumb-wrapper {
		height: 160px;
		max-height: 160px;
		min-height: 150px;
	}
	.thumb-wrapper .product-img {
		max-height: 145px;
	}
	.card-title {
		font-size: 13px;
		line-height: 1.35;
		min-height: 36px;
	}
	.current-price {
		font-size: 15px;
	}
	.card-actions .btn-add-cart-ajax,
	.card-actions .btn-buy-now,
	.woocommerce .stc-product-card .card-actions .btn-add-cart-ajax,
	.woocommerce .stc-product-card .card-actions .btn-buy-now {
		height: 34px !important;
		min-height: 34px !important;
		font-size: 11.5px !important;
	}
}

/* Product Info */
.card-content {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-width: 0; /* CRITICAL for flex truncation */
	overflow: hidden;
}

.card-brand {
	font-size: 11.5px;
	font-weight: 700;
	color: var(--text-muted);
	text-transform: uppercase;
	margin-bottom: 4px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.card-title {
	margin: 0 0 8px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	min-height: 40px;
	max-height: 42px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	word-break: break-word;
	letter-spacing: -0.01em;
}

.card-title a {
	color: var(--text-dark);
	transition: color 0.15s ease;
}

.card-title a:hover {
	color: var(--stc-blue);
}

.card-specs-chip {
	background: #f1f5f9;
	padding: 4px 8px;
	border-radius: var(--radius-sm);
	font-size: 11.5px;
	font-weight: 500;
	color: var(--text-body);
	margin-bottom: 8px;
	height: 26px;
	min-width: 0;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	display: flex;
	align-items: center;
	box-sizing: border-box;
}

.card-specs-chip span {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Pricing */
.card-pricing {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin-bottom: 8px;
	flex-wrap: wrap;
	min-width: 0;
}

.current-price {
	color: var(--stc-red);
	font-size: 17px;
	font-weight: 700;
	white-space: nowrap;
	letter-spacing: -0.01em;
}

.original-price {
	color: #94a3b8;
	font-size: 13px;
	font-weight: 500;
	text-decoration: line-through;
	white-space: nowrap;
}

/* Gift Box */
.card-gift-box {
	background: #fffdf0;
	border: 1px dashed #f59e0b;
	padding: 5px 8px;
	border-radius: 5px;
	font-size: 12px;
	font-weight: 600;
	color: #92400e;
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 10px;
	min-width: 0;
	max-width: 100%;
	overflow: hidden;
	box-sizing: border-box;
}

.card-gift-box i {
	color: #d97706;
	flex-shrink: 0;
}

.card-gift-box span {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
}

/* Meta */
.card-meta-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 12px;
	font-weight: 600;
	color: #64748b;
	margin-bottom: 12px;
	margin-top: auto;
	white-space: nowrap;
	gap: 6px;
	min-width: 0;
}

.meta-stock.in-stock {
	color: #16a34a;
	font-weight: 700;
}

.meta-warranty {
	color: #475569;
}

/* Actions */
.card-actions,
.woocommerce .stc-product-card .card-actions,
.stc-product-card .card-actions {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 8px !important;
	width: 100% !important;
	margin-top: auto !important;
	box-sizing: border-box !important;
	min-width: 0 !important;
}

.card-actions .btn-add-cart-ajax,
.card-actions .btn-buy-now,
.woocommerce .stc-product-card .card-actions .btn-add-cart-ajax,
.woocommerce .stc-product-card .card-actions .btn-buy-now,
.woocommerce .stc-product-card .card-actions a.button {
	border-radius: 6px !important;
	height: 38px !important;
	min-height: 38px !important;
	line-height: 38px !important;
	padding: 0 8px !important;
	margin: 0 !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	text-align: center !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 6px !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	text-decoration: none !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	transition: all 0.2s ease !important;
	min-width: 0 !important;
	width: 100% !important;
	box-sizing: border-box !important;
	cursor: pointer !important;
}

.card-actions .btn-add-cart-ajax i {
	font-size: 13.5px !important;
	flex-shrink: 0 !important;
}

.card-actions .btn-add-cart-ajax span,
.card-actions .btn-buy-now span {
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
}

/* Nút Trái: Thêm vào giỏ (Nền nhẹ sang trọng, viền xanh STC) */
.card-actions .btn-add-cart-ajax,
.woocommerce .stc-product-card .card-actions .btn-add-cart-ajax {
	background: var(--stc-blue-light) !important;
	color: var(--stc-blue) !important;
	border: 1px solid #bfdbfe !important;
	box-shadow: none !important;
}

.card-actions .btn-add-cart-ajax:hover,
.woocommerce .stc-product-card .card-actions .btn-add-cart-ajax:hover {
	background: var(--stc-blue) !important;
	color: #ffffff !important;
	border-color: var(--stc-blue) !important;
}

/* Nút Phải: Mua ngay (Nền xanh đậm STC Royal Blue) */
.card-actions .btn-buy-now,
.woocommerce .stc-product-card .card-actions .btn-buy-now {
	background: var(--stc-blue) !important;
	color: #ffffff !important;
	border: 1px solid var(--stc-blue) !important;
	box-shadow: none !important;
}

.card-actions .btn-buy-now:hover,
.woocommerce .stc-product-card .card-actions .btn-buy-now:hover {
	background: var(--stc-blue-dark) !important;
	border-color: var(--stc-blue-dark) !important;
}

/* Ngăn WooCommerce chèn icon sau button gây lệch vỡ layout */
.woocommerce .stc-product-card .card-actions a.added::after,
.woocommerce .stc-product-card .card-actions a.loading::after {
	display: none !important;
}

/* ==========================================================================
   INTERACTIVE PC BUILDER BANNER CALLOUT
   ========================================================================== */
.home-builder-callout {
	background: linear-gradient(135deg, #1e293b 0%, var(--stc-navy) 60%, #0f172a 100%);
	color: #ffffff;
	border-radius: var(--radius-lg);
	padding: 34px 40px;
	margin-bottom: 30px;
	box-shadow: var(--shadow-lg);
	position: relative;
	overflow: hidden;
}

.home-builder-callout::before {
	content: '';
	position: absolute;
	top: -50px;
	right: -50px;
	width: 300px;
	height: 300px;
	background: radial-gradient(circle, rgba(0, 82, 245, 0.2) 0%, transparent 70%);
	pointer-events: none;
}

.builder-callout-inner {
	display: grid;
	grid-template-columns: 1.2fr 0.8fr;
	gap: 30px;
	align-items: center;
	position: relative;
	z-index: 2;
}

@media (max-width: 900px) {
	.builder-callout-inner {
		grid-template-columns: 1fr;
	}
}

.callout-pill {
	background: var(--stc-blue);
	font-size: 11px;
	font-weight: 800;
	padding: 4px 10px;
	border-radius: var(--radius-sm);
	display: inline-block;
	margin-bottom: 10px;
	letter-spacing: 0.5px;
}

.builder-callout-content h2 {
	margin: 0 0 10px;
	font-size: 26px;
	font-weight: 900;
	letter-spacing: -0.5px;
}

.builder-callout-content p {
	color: #cbd5e1;
	font-size: 13.5px;
	margin: 0 0 16px;
	max-width: 580px;
}

.callout-features {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px 16px;
	margin-bottom: 22px;
	font-size: 12.5px;
	color: #e2e8f0;
}

.callout-features i {
	color: #4ade80;
	margin-right: 6px;
}

.btn-callout-build {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--stc-yellow);
	color: #1e293b;
	padding: 12px 26px;
	border-radius: var(--radius-full);
	font-weight: 900;
	font-size: 14px;
	box-shadow: 0 4px 12px rgba(255,212,0,0.3);
	transition: var(--transition);
}

.btn-callout-build:hover {
	background: #ffffff;
	transform: translateY(-2px);
}

.builder-callout-art {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.art-card {
	background: rgba(255,255,255,0.08);
	border: 1px solid rgba(255,255,255,0.12);
	border-radius: var(--radius-md);
	padding: 14px 18px;
	display: flex;
	align-items: center;
	gap: 16px;
	backdrop-filter: blur(6px);
}

.art-icon {
	width: 44px;
	height: 44px;
	background: rgba(0, 82, 245, 0.35);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	color: var(--stc-yellow);
}

.art-card h4 {
	margin: 0 0 2px;
	font-size: 14px;
	font-weight: 800;
}

.art-card p {
	margin: 0;
	font-size: 11.5px;
	color: #94a3b8;
}

/* ==========================================================================
   TECH NEWS SECTION
   ========================================================================== */
.home-tech-news {
	background: #ffffff;
	border-radius: var(--radius-lg);
	padding: 22px;
	margin-bottom: 28px;
	box-shadow: var(--shadow-sm);
	border: 1px solid var(--border-color);
}

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

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

.news-card {
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md);
	overflow: hidden;
	transition: var(--transition);
}

.news-card:hover {
	box-shadow: var(--shadow-md);
	border-color: var(--stc-blue);
}

.news-thumb {
	position: relative;
	height: 160px;
	overflow: hidden;
}

.news-placeholder-img {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ffffff;
	font-size: 40px;
}

.grad-1 { background: linear-gradient(135deg, #1e3a8a, #3b82f6); }
.grad-2 { background: linear-gradient(135deg, #701a75, #ec4899); }
.grad-3 { background: linear-gradient(135deg, #14532d, #22c55e); }

.news-date {
	position: absolute;
	bottom: 8px;
	left: 8px;
	background: rgba(0,0,0,0.6);
	color: #fff;
	font-size: 10.5px;
	padding: 2px 8px;
	border-radius: 4px;
}

.news-body {
	padding: 14px;
}

.news-cat {
	font-size: 11px;
	font-weight: 800;
	color: var(--stc-blue);
	text-transform: uppercase;
}

.news-title {
	margin: 4px 0 8px;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
}

.news-title a {
	color: var(--text-dark);
}

.news-title a:hover {
	color: var(--stc-blue);
}

.news-excerpt {
	margin: 0;
	font-size: 12px;
	color: var(--text-muted);
	line-height: 1.5;
}

/* ==========================================================================
   PC BUILDER TOOL (ADVANCED STC WORKBENCH)
   ========================================================================== */
.stc-builder-container {
	margin-bottom: 50px;
}

.builder-header-bar {
	background: #ffffff;
	border: 1px solid var(--border-color);
	border-radius: var(--radius-lg);
	padding: 20px 24px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 16px;
	box-shadow: var(--shadow-sm);
	flex-wrap: wrap;
	gap: 16px;
}

.builder-title {
	margin: 0 0 4px;
	font-size: 22px;
	font-weight: 900;
	color: var(--stc-navy);
}

.builder-title i {
	color: var(--stc-blue);
}

.builder-desc {
	margin: 0;
	color: var(--text-muted);
	font-size: 13px;
}

.builder-header-right {
	display: flex;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
}

.builder-price-box {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}

.price-label {
	font-size: 11.5px;
	color: var(--text-muted);
	font-weight: 600;
}

.price-value {
	color: var(--stc-blue);
	font-size: 26px;
	font-weight: 900;
	line-height: 1.1;
}

.builder-actions-top {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.btn-builder-primary {
	background: var(--stc-blue);
	color: #fff;
	border: none;
	padding: 10px 18px;
	border-radius: var(--radius-sm);
	font-weight: 800;
	font-size: 13px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transition: var(--transition);
}

.btn-builder-primary:hover {
	background: var(--stc-blue-dark);
}

.btn-builder-secondary {
	background: #ffffff;
	color: var(--stc-navy);
	border: 1px solid var(--border-color);
	padding: 10px 14px;
	border-radius: var(--radius-sm);
	font-weight: 700;
	font-size: 12.5px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transition: var(--transition);
}

.btn-builder-secondary:hover {
	background: #f8fafc;
	border-color: var(--stc-navy);
}

.btn-builder-danger {
	background: #ffffff;
	color: #dc2626;
	border: 1px solid #fecaca;
	padding: 10px 14px;
	border-radius: var(--radius-sm);
	font-weight: 700;
	font-size: 12.5px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transition: var(--transition);
}

.btn-builder-danger:hover {
	background: #fef2f2;
}

/* Warning alert */
.builder-warning-alert {
	background: #fffbeb;
	border: 1px solid #fde68a;
	color: #92400e;
	padding: 12px 18px;
	border-radius: var(--radius-md);
	font-size: 13px;
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 16px;
}

.builder-warning-alert i {
	font-size: 18px;
	color: #f59e0b;
}

/* Rows List */
.builder-rows-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.builder-row {
	background: #ffffff;
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md);
	padding: 12px 18px;
	display: flex;
	align-items: center;
	gap: 16px;
	transition: var(--transition);
}

.builder-row:hover {
	border-color: var(--border-color-dark);
}

.builder-row.has-product {
	border-color: #cbd5e1;
	background: #fafcff;
}

.row-num {
	width: 24px;
	height: 24px;
	background: #f1f5f9;
	color: var(--text-muted);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 800;
	flex-shrink: 0;
}

.row-info {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 260px;
	flex-shrink: 0;
}

.row-icon {
	width: 38px;
	height: 38px;
	background: var(--stc-navy-light);
	color: var(--stc-navy);
	border-radius: var(--radius-sm);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	flex-shrink: 0;
}

.row-name strong {
	font-size: 13px;
	color: var(--text-dark);
}

.badge-req {
	color: var(--stc-blue);
	font-weight: 900;
	margin-left: 2px;
}

.row-hint {
	display: block;
	font-size: 11px;
	color: var(--text-muted);
}

/* Empty State */
.row-selection-empty {
	flex: 1;
}

.btn-choose-part {
	background: #f8fafc;
	border: 1.5px dashed var(--stc-blue);
	color: var(--stc-blue);
	padding: 9px 18px;
	border-radius: var(--radius-sm);
	font-weight: 700;
	font-size: 12.5px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	transition: var(--transition);
}

.btn-choose-part:hover {
	background: var(--stc-blue);
	color: #ffffff;
}

/* Filled State */
.row-selection-filled {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.part-main-info {
	display: flex;
	align-items: center;
	gap: 16px;
	flex: 1;
	min-width: 0;
}

.part-controls-wrap {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-shrink: 0;
}

.summary-actions-mobile-row {
	display: flex;
	align-items: center;
	gap: 8px;
}

.part-thumb img {
	width: 50px;
	height: 50px;
	object-fit: contain;
	border-radius: var(--radius-sm);
	border: 1px solid var(--border-color);
}

.part-details {
	flex: 1;
	min-width: 0;
}

.part-title {
	font-size: 13px;
	font-weight: 700;
	color: var(--text-dark);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.part-title:hover {
	color: var(--stc-blue);
}

.part-meta {
	font-size: 11px;
	color: var(--text-muted);
	display: flex;
	gap: 12px;
	margin-top: 3px;
}

.part-stock {
	color: #16a34a;
	font-weight: 700;
}

.part-qty-box {
	display: flex;
	align-items: center;
	border: 1px solid var(--border-color);
	border-radius: var(--radius-sm);
	overflow: hidden;
}

.qty-btn {
	background: #f8fafc;
	border: none;
	width: 26px;
	height: 28px;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
}

.qty-btn:hover {
	background: #e2e8f0;
}

.qty-input {
	width: 32px;
	height: 28px;
	border: none;
	text-align: center;
	font-weight: 800;
	font-size: 12px;
	background: #fff;
}

.part-pricing {
	width: 140px;
	text-align: right;
}

.unit-price {
	font-size: 11px;
	color: var(--text-muted);
}

.total-row-price {
	font-size: 14px;
	font-weight: 900;
	color: var(--stc-blue);
}

.part-actions {
	display: flex;
	gap: 6px;
}

.btn-change-part, .btn-remove-part {
	background: #f1f5f9;
	border: none;
	width: 32px;
	height: 32px;
	border-radius: var(--radius-sm);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	color: var(--text-muted);
	transition: var(--transition);
}

.btn-change-part:hover {
	background: var(--stc-navy);
	color: #fff;
}

.btn-remove-part:hover {
	background: #ef4444;
	color: #fff;
}

/* Bottom summary bar */
.builder-bottom-summary {
	background: #ffffff;
	border: 2px solid var(--stc-blue);
	border-radius: var(--radius-lg);
	padding: 16px 24px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 18px;
	box-shadow: var(--shadow-md);
	flex-wrap: wrap;
	gap: 16px;
}

.summary-left {
	font-size: 14px;
	color: var(--text-dark);
}

.summary-right {
	display: flex;
	align-items: center;
	gap: 18px;
}

.summary-total-label {
	font-size: 14px;
	font-weight: 700;
}

.summary-total-val {
	font-size: 26px;
	font-weight: 900;
	color: var(--stc-blue);
}

.btn-large {
	padding: 12px 24px;
	font-size: 14px;
}

/* MODAL: Pick Component Popup */
.builder-modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: 99999;
}

.builder-modal-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.6);
	backdrop-filter: blur(4px);
}

.builder-modal-content {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 95%;
	max-width: 980px;
	max-height: 85vh;
	background: #ffffff;
	border-radius: var(--radius-lg);
	box-shadow: 0 20px 50px rgba(0,0,0,0.3);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.modal-header {
	background: var(--stc-navy);
	color: #fff;
	padding: 14px 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.modal-title {
	margin: 0;
	font-size: 16px;
	font-weight: 800;
}

.modal-close {
	background: none;
	border: none;
	color: #fff;
	font-size: 24px;
	line-height: 1;
}

.modal-toolbar {
	padding: 12px 20px;
	background: #f8fafc;
	border-bottom: 1px solid var(--border-color);
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.modal-search {
	flex: 1;
	min-width: 220px;
	position: relative;
}

.modal-search i {
	position: absolute;
	top: 50%;
	left: 12px;
	transform: translateY(-50%);
	color: var(--text-muted);
}

.modal-search input {
	width: 100%;
	padding: 8px 12px 8px 34px;
	border: 1px solid var(--border-color);
	border-radius: var(--radius-sm);
	outline: none;
	font-size: 13px;
}

.modal-filter-brands {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}

.modal-brand-tag {
	background: #ffffff;
	border: 1px solid var(--border-color);
	border-radius: var(--radius-sm);
	padding: 6px 10px;
	font-size: 12px;
	font-weight: 700;
	color: var(--text-dark);
}

.modal-brand-tag.active {
	background: var(--stc-blue);
	color: #fff;
	border-color: var(--stc-blue);
}

.modal-sort select {
	padding: 8px 10px;
	border: 1px solid var(--border-color);
	border-radius: var(--radius-sm);
	font-size: 12px;
	outline: none;
}

.modal-body {
	flex: 1;
	overflow-y: auto;
	padding: 20px;
}

.modal-loading, .modal-empty {
	text-align: center;
	padding: 40px;
	color: var(--text-muted);
	font-size: 14px;
}

.modal-products-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	align-items: stretch;
}

@media (max-width: 992px) {
	.modal-products-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

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

.modal-product-card {
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	padding: 14px;
	display: flex;
	flex-direction: column;
	background: #ffffff;
	transition: all 0.2s ease;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
	position: relative;
	height: 100%;
	box-sizing: border-box;
}

.modal-product-card:hover {
	border-color: #0052f5;
	box-shadow: 0 8px 20px rgba(0, 82, 245, 0.12);
}

.card-thumb {
	position: relative;
	width: 100%;
	height: 175px;
	min-height: 175px;
	max-height: 175px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f8fafc;
	border-radius: 8px;
	margin-bottom: 12px;
	overflow: hidden;
	box-sizing: border-box;
}

.card-thumb img {
	max-width: 100%;
	max-height: 155px;
	width: auto;
	height: auto;
	object-fit: contain;
	padding: 6px;
	box-sizing: border-box;
	transition: transform 0.25s ease;
}

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

.modal-product-card .card-body {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-width: 0;
}

.card-top-meta {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
	margin-bottom: 6px;
	min-height: 22px;
}

.modal-product-card .card-brand {
	font-size: 11.5px;
	font-weight: 800;
	color: #475569;
	text-transform: uppercase;
}

.modal-product-card .card-title {
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.4;
	color: #0f172a;
	margin: 2px 0 6px 0;
	height: 38px;
	min-height: 38px;
	max-height: 38px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}

.modal-product-card .card-specs {
	font-size: 12px;
	color: #64748b;
	line-height: 1.35;
	height: 33px;
	min-height: 33px;
	max-height: 33px;
	margin-bottom: 6px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}

.modal-product-card .card-warranty {
	font-size: 12px;
	color: #475569;
	font-weight: 600;
	height: 18px;
	line-height: 18px;
	margin-bottom: 8px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.modal-product-card .card-meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: auto;
	padding-top: 10px;
	border-top: 1px dashed #e2e8f0;
	margin-bottom: 10px;
}

.stock-badge.in-stock {
	color: #16a34a;
	font-size: 12px;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.stock-badge.out-stock {
	color: #dc2626;
	font-size: 12px;
	font-weight: 700;
}

.card-price {
	font-size: 17px;
	font-weight: 900;
	color: #dc2626;
	letter-spacing: -0.2px;
	white-space: nowrap;
}

.btn-select-product {
	background: #0052f5;
	color: #fff;
	border: none;
	width: 100%;
	height: 38px;
	padding: 8px;
	border-radius: 6px;
	font-weight: 800;
	font-size: 13px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	transition: all 0.2s ease;
	cursor: pointer;
	flex-shrink: 0;
}

.btn-select-product:hover {
	background: #0040c4;
	transform: translateY(-1px);
}

/* ==========================================================================
   PC BUILDER HARDWARE COMPATIBILITY ENGINE
   ========================================================================== */

/* Main Builder Page Compatibility Status Box */
.builder-compat-status-box {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 18px;
	border-radius: var(--radius-md);
	margin-bottom: 14px;
	font-size: 13px;
	transition: var(--transition);
}

.builder-compat-status-box.compat-all-good {
	background: #f0fdf4;
	border: 1.5px solid #22c55e;
	color: #15803d;
}

.builder-compat-status-box.compat-conflict {
	background: #fef2f2;
	border: 1.5px solid #ef4444;
	color: #b91c1c;
	animation: shakeConflict 0.4s ease;
}

.builder-compat-status-box.compat-warning {
	background: #fffbeb;
	border: 1.5px solid #f59e0b;
	color: #b45309;
}

@keyframes shakeConflict {
	0%, 100% { transform: translateX(0); }
	20%, 60% { transform: translateX(-4px); }
	40%, 80% { transform: translateX(4px); }
}

.builder-compat-status-box .compat-status-icon {
	font-size: 22px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.builder-compat-status-box.compat-all-good .compat-status-icon {
	color: #16a34a;
}

.builder-compat-status-box.compat-conflict .compat-status-icon {
	color: #dc2626;
}

.builder-compat-status-box.compat-warning .compat-status-icon {
	color: #d97706;
}

.compat-status-content {
	flex: 1;
}

.compat-status-title {
	font-size: 13.5px;
	margin-bottom: 2px;
}

.compat-status-title strong.text-success {
	color: #16a34a;
}

.compat-status-title strong.text-danger {
	color: #dc2626;
}

.compat-status-desc {
	font-size: 12px;
	opacity: 0.92;
}

.compat-status-wattage {
	background: rgba(255,255,255,0.9);
	padding: 6px 12px;
	border-radius: 20px;
	font-weight: 700;
	font-size: 12px;
	white-space: nowrap;
	box-shadow: 0 1px 3px rgba(0,0,0,0.06);
	color: #1e293b;
	display: flex;
	align-items: center;
	gap: 6px;
}

.compat-status-wattage i {
	color: #f59e0b;
}

.builder-row.has-conflict {
	border-color: #ef4444 !important;
	background: #fff5f5 !important;
	box-shadow: 0 0 0 1px #ef4444;
}

/* Modal Compatibility Notice Bar */
.modal-compat-notice-bar {
	background: linear-gradient(135deg, #eff6ff 0%, #f0fdf4 100%);
	border-bottom: 1px solid #bfdbfe;
	padding: 10px 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

.compat-notice-left {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1;
	min-width: 250px;
}

.compat-shield-icon {
	font-size: 20px;
	color: var(--stc-blue);
	flex-shrink: 0;
}

.compat-notice-text {
	display: flex;
	flex-direction: column;
	font-size: 12px;
	line-height: 1.4;
}

.compat-notice-text .compat-label {
	font-weight: 800;
	color: #1e293b;
	text-transform: uppercase;
	font-size: 10.5px;
	letter-spacing: 0.5px;
}

.compat-notice-text .compat-rule-desc {
	color: var(--stc-blue);
	font-weight: 700;
	font-size: 12.5px;
}

/* Toggle Switch */
.compat-notice-right {
	flex-shrink: 0;
}

.compat-switch-label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	user-select: none;
	margin: 0;
}

.compat-switch-label input {
	display: none;
}

.compat-switch-slider {
	width: 36px;
	height: 20px;
	background-color: #cbd5e1;
	border-radius: 20px;
	position: relative;
	transition: 0.25s;
}

.compat-switch-slider::before {
	content: "";
	position: absolute;
	width: 14px;
	height: 14px;
	left: 3px;
	top: 3px;
	background-color: #ffffff;
	border-radius: 50%;
	transition: 0.25s;
	box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.compat-switch-label input:checked + .compat-switch-slider {
	background-color: var(--stc-blue);
}

.compat-switch-label input:checked + .compat-switch-slider::before {
	transform: translateX(16px);
}

.compat-switch-title {
	font-size: 12px;
	font-weight: 700;
	color: #334155;
}

/* Modal Product Card Compatibility Badges & Tags */
.compat-badge-pill {
	position: absolute;
	top: 6px;
	left: 6px;
	right: 6px;
	padding: 4px 8px;
	border-radius: 4px;
	font-size: 10.5px;
	font-weight: 800;
	text-align: center;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	z-index: 2;
}

.compat-badge-pill.pill-success {
	background: rgba(22, 163, 74, 0.92);
	color: #fff;
	backdrop-filter: blur(2px);
}

.compat-badge-pill.pill-danger {
	background: rgba(220, 38, 38, 0.94);
	color: #fff;
	backdrop-filter: blur(2px);
	font-size: 10px;
	line-height: 1.2;
}

.modal-product-card.card-incompatible {
	border-color: #fca5a5;
	background: #fffafa;
	opacity: 0.88;
}

.modal-product-card.card-incompatible:hover {
	opacity: 1;
	border-color: #ef4444;
}

.part-spec-tag {
	background: #e0f2fe;
	color: #0369a1;
	font-size: 11px;
	font-weight: 800;
	padding: 2px 7px;
	border-radius: 4px;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.btn-incompatible-action {
	background: #dc2626 !important;
	color: #fff !important;
}

.btn-incompatible-action:hover {
	background: #b91c1c !important;
}

.modal-empty-compat {
	text-align: center;
	padding: 50px 20px;
	color: #64748b;
}

.modal-empty-compat i {
	font-size: 38px;
	color: #f59e0b;
	margin-bottom: 12px;
}

.modal-empty-compat p {
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 16px;
}

.btn-toggle-compat-off {
	background: var(--stc-blue);
	color: #fff;
	border: none;
	padding: 8px 18px;
	border-radius: var(--radius-sm);
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	transition: var(--transition);
}

.btn-toggle-compat-off:hover {
	background: #b91c1c;
}

/* ==========================================================================
   PRINTABLE QUOTATION
   ========================================================================== */
/* Quotation Customer Info Modal */
.quotation-modal-box {
	max-width: 600px;
}

.quote-modal-body {
	padding: 24px 28px;
}

.quote-modal-intro {
	font-size: 13.5px;
	color: var(--text-dark);
	margin-bottom: 20px;
	line-height: 1.5;
}

.quote-form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	margin-bottom: 24px;
}

.quote-form-group.full-width {
	grid-column: span 2;
}

.quote-form-group label {
	display: block;
	font-size: 12px;
	font-weight: 700;
	color: #334155;
	margin-bottom: 6px;
}

.quote-form-group label i {
	color: var(--stc-blue);
	margin-right: 4px;
}

.quote-form-group input {
	width: 100%;
	padding: 9px 12px;
	border: 1px solid var(--border-color);
	border-radius: var(--radius-sm);
	font-size: 13px;
	outline: none;
	transition: var(--transition);
}

.quote-form-group input:focus {
	border-color: var(--stc-blue);
	box-shadow: 0 0 0 3px rgba(224, 32, 32, 0.1);
}

.quote-admin-notice {
	background: #eff6ff;
	border-left: 3px solid #0052f5;
	padding: 10px 14px;
	border-radius: 0 6px 6px 0;
	font-size: 12.5px;
	color: #1e40af;
	margin-bottom: 18px;
	line-height: 1.45;
}

.btn-admin-badge {
	background: linear-gradient(135deg, #f59e0b, #d97706) !important;
	color: #ffffff !important;
	border-color: #d97706 !important;
}
.btn-admin-badge:hover {
	background: linear-gradient(135deg, #d97706, #b45309) !important;
}

.quote-modal-actions {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.btn-quote-action {
	flex: 1;
	min-width: 160px;
	padding: 11px 16px;
	border: none;
	border-radius: var(--radius-sm);
	font-size: 13px;
	font-weight: 800;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	transition: var(--transition);
}

.btn-print-action {
	background: var(--stc-navy);
	color: #ffffff;
}

.btn-print-action:hover {
	background: var(--stc-navy-dark);
}

.btn-excel-action {
	background: #16a34a;
	color: #ffffff;
}

.btn-excel-action:hover {
	background: #15803d;
}

.btn-xls-action {
	background: #0284c7;
	color: #ffffff;
}

.btn-xls-action:hover {
	background: #0369a1;
}

/* ==========================================================================
   PRINTABLE QUOTATION (CHUẨN MẪU MÁY TÍNH STC)
   ========================================================================== */
.print-only {
	display: none;
}

/* Base styling for quote sheet (Used by both Print and Image capture) */
.stc-quote-sheet {
	max-width: 820px;
	margin: 0 auto;
	background: #ffffff;
	color: #1e293b;
	padding: 25px 30px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	box-sizing: border-box;
}

.quote-top-header {
	margin-bottom: 16px;
}

.quote-header-brand {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	margin-bottom: 12px;
	padding-bottom: 12px;
	border-bottom: 2px solid #e2e8f0;
}

.quote-brand-logo {
	width: 75px;
	height: 75px;
	object-fit: contain;
	flex-shrink: 0;
}

.quote-brand-info {
	text-align: left;
}

.quote-company-title {
	font-size: 18px;
	font-weight: 800;
	color: #0052f5;
	margin: 0 0 3px 0;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.quote-company-sub {
	font-size: 11.5px;
	color: #64748b;
	font-style: italic;
	margin: 0 0 3px 0;
}

.quote-company-contact {
	font-size: 11.5px;
	color: #334155;
	font-weight: 600;
	margin: 0;
}

.quote-title-banner {
	text-align: center;
	margin-top: 6px;
}

.quote-main-title {
	font-size: 22px;
	font-weight: 900;
	text-transform: uppercase;
	margin: 0 0 3px 0;
	color: #d90429;
	letter-spacing: 0.5px;
}

.quote-title-sub {
	font-size: 11px;
	font-style: italic;
	color: #64748b;
	margin: 0;
}

.quote-meta-table {
	margin-bottom: 14px;
	font-size: 12.5px;
}

.quote-meta-row {
	display: flex;
	justify-content: space-between;
	margin-bottom: 4px;
}

.quote-meta-col {
	width: 48%;
}

.quote-meta-col .meta-label {
	font-weight: 700;
	display: inline-block;
	color: #0f172a;
	margin-right: 6px;
}

.quote-meta-col .meta-val {
	font-weight: 600;
	color: #334155;
}

.stc-print-table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 14px;
}

.stc-print-table th, .stc-print-table td {
	border: 1px solid #cbd5e1;
	padding: 6px 8px;
	font-size: 12px;
}

.stc-print-table th {
	background: #0052f5 !important;
	color: #ffffff !important;
	font-weight: 700;
	text-transform: uppercase;
	-webkit-print-color-adjust: exact;
	print-color-adjust: exact;
}

.stc-print-table tfoot td {
	font-weight: 700;
	border: 1px solid #cbd5e1;
}

.stc-print-table tfoot .lbl-calc {
	text-align: right;
	padding-right: 12px;
	background: #f8fafc;
}

.stc-print-table tfoot .val-calc {
	text-align: right;
	font-weight: 800;
}

.stc-print-table tfoot .val-calc.highlight {
	font-size: 13px;
	color: #d90429;
}

.quote-date-box {
	text-align: right;
	font-style: italic;
	font-size: 12px;
	margin-top: 10px;
	margin-bottom: 8px;
	padding-right: 25px;
	color: #475569;
}

.quote-signatures-box {
	display: flex;
	justify-content: space-between;
	margin-top: 8px;
	margin-bottom: 20px;
	padding: 0 40px;
}

.sign-block {
	text-align: center;
	width: 220px;
}

.sign-heading {
	display: block;
	font-size: 12.5px;
	font-weight: 800;
	color: #0f172a;
}

.sign-note {
	display: block;
	font-size: 11px;
	font-style: italic;
	color: #64748b;
}

.sign-space {
	height: 55px;
}

.sign-name {
	font-size: 13px;
	font-weight: 800;
	color: #0052f5;
}

.quote-warranty-box {
	border: 1px dashed #94a3b8;
	background: #f8fafc;
	padding: 10px 14px;
	font-size: 11px;
	line-height: 1.5;
	color: #334155;
	margin-top: 15px;
	border-radius: 4px;
}

.warranty-heading {
	font-weight: 800;
	margin-bottom: 4px;
	color: #0f172a;
}

.warranty-text p {
	margin: 2px 0;
}

.btn-image-action {
	background: linear-gradient(135deg, #0284c7, #0369a1);
	color: #fff !important;
}
.btn-image-action:hover {
	background: linear-gradient(135deg, #0369a1, #075985);
}

@media print {
	body * {
		visibility: hidden;
	}
	#builder-print-area, #builder-print-area * {
		visibility: visible;
	}
	#builder-print-area {
		display: block !important;
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		padding: 20px 30px;
		background: #fff;
		color: #000;
		font-family: Arial, Helvetica, sans-serif;
	}
}

/* ==========================================================================
   SHOP ARCHIVE & SIDEBAR FILTERS
   ========================================================================== */
.stc-archive-container {
	margin-bottom: 50px;
}

.archive-header-banner {
	background: linear-gradient(135deg, var(--stc-navy), var(--stc-navy-dark));
	color: #ffffff;
	border-radius: var(--radius-lg);
	padding: 24px 30px;
	margin-bottom: 24px;
	box-shadow: var(--shadow-sm);
}

.archive-main-title {
	margin: 0 0 6px;
	font-size: 24px;
	font-weight: 900;
}

.archive-desc {
	margin: 0;
	color: #cbd5e1;
	font-size: 13px;
	max-width: 750px;
}

.stc-shop-layout {
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: 24px;
}

@media (max-width: 991px) {
	.stc-shop-layout {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   STC-STYLE ADVANCED PRODUCT FILTERS (CHUYÊN SÂU CHUẨN STC.VN)
   ========================================================================== */

/* Quick Filter Chips Bar (Thanh lọc nhanh trên đầu sản phẩm) */
.stc-quick-filter-bar {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 12px;
	background: #ffffff;
	padding: 10px 14px;
	border-radius: var(--radius-md);
	border: 1px solid var(--border-color);
	box-shadow: 0 1px 4px rgba(0,0,0,0.03);
	overflow-x: auto;
}

.quick-filter-label {
	font-size: 12px;
	font-weight: 800;
	color: var(--stc-blue);
	white-space: nowrap;
	display: flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
	text-transform: uppercase;
	letter-spacing: 0.3px;
}

.quick-filter-track {
	display: flex;
	align-items: center;
	gap: 7px;
	overflow-x: auto;
	scrollbar-width: none;
}

.quick-filter-track::-webkit-scrollbar {
	display: none;
}

.filter-chip {
	background: #f8fafc;
	color: var(--text-dark);
	border: 1px solid var(--border-color);
	padding: 5px 13px;
	border-radius: var(--radius-full);
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
	cursor: pointer;
	transition: all 0.16s ease;
	outline: none;
}

.filter-chip:hover {
	border-color: var(--stc-blue);
	color: var(--stc-blue);
	background: #edf4ff;
}

.filter-chip.active {
	background: var(--stc-blue) !important;
	color: #ffffff !important;
	border-color: var(--stc-blue) !important;
	box-shadow: 0 2px 6px rgba(0, 82, 245, 0.25);
}

/* Active Filter Tags Bar (Đang lọc theo) */
.stc-active-filters-bar {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 14px;
	background: #fffdf5;
	border: 1px dashed #f59e0b;
	padding: 8px 14px;
	border-radius: var(--radius-sm);
}

.active-label {
	font-size: 11.5px;
	font-weight: 700;
	color: #92400e;
	display: flex;
	align-items: center;
	gap: 5px;
}

.active-tags-list {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
}

.active-tag {
	background: #ffffff;
	border: 1px solid #fbbf24;
	color: #78350f;
	padding: 3px 8px;
	border-radius: var(--radius-sm);
	font-size: 11.5px;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.active-tag .btn-remove-tag {
	cursor: pointer;
	color: #dc2626;
	font-size: 11px;
	transition: transform 0.15s ease;
}

.active-tag .btn-remove-tag:hover {
	transform: scale(1.2);
}

.btn-clear-all-tags {
	background: none;
	border: none;
	color: #dc2626;
	font-size: 11.5px;
	font-weight: 700;
	cursor: pointer;
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 4px;
}

.btn-clear-all-tags:hover {
	text-decoration: underline;
}

/* Sidebar Category Detail Widget (Exact match to screenshot) */
.sidebar-category-detail-box {
	background: #ffffff;
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md);
	margin-bottom: 14px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.04);
	overflow: hidden;
}

.sidebar-cat-detail-header {
	display: flex;
	align-items: center;
	padding: 12px 16px;
	background: #ffffff;
	border-left: 4px solid var(--stc-blue);
	border-bottom: 1px solid #f1f5f9;
}

.sidebar-cat-detail-header h3 {
	margin: 0;
	font-size: 13.5px;
	font-weight: 800;
	color: var(--stc-navy);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	display: flex;
	align-items: center;
	gap: 8px;
}

.sidebar-cat-detail-header h3 i {
	color: var(--stc-blue);
	font-size: 15px;
}

.sidebar-cat-detail-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sidebar-cat-detail-list li {
	border-bottom: 1px solid #f1f5f9;
}

.sidebar-cat-detail-list li:last-child {
	border-bottom: none;
}

.sidebar-cat-detail-list li a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 11px 16px;
	color: #2d3748;
	font-size: 13.5px;
	font-weight: 600;
	text-decoration: none;
	transition: var(--transition);
}

.sidebar-cat-detail-list li a .cat-ico {
	width: 24px;
	font-size: 14px;
	color: #64748b;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	transition: var(--transition);
	flex-shrink: 0;
}

.sidebar-cat-detail-list li a .cat-txt {
	flex: 1;
	padding-right: 6px;
	line-height: 1.35;
}

.sidebar-cat-detail-list li a .cat-arr {
	font-size: 12px;
	color: #cbd5e1;
	transition: transform 0.2s ease, color 0.2s ease;
	flex-shrink: 0;
}

.sidebar-cat-detail-list li a:hover {
	background: #f0f6ff;
	color: var(--stc-blue);
	padding-left: 19px;
}

.sidebar-cat-detail-list li a:hover .cat-ico {
	color: var(--stc-blue);
}

.sidebar-cat-detail-list li a:hover .cat-arr {
	color: var(--stc-blue);
	transform: translateX(3px);
}

/* Sidebar Filter Box */
.sidebar-filter-wrapper {
	background: #ffffff;
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md);
	padding: 16px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.04);
	position: sticky;
	top: 15px;
}

.sidebar-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 10px;
	margin-bottom: 6px;
	border-bottom: 2px solid var(--stc-blue);
}

.sidebar-header h3 {
	margin: 0;
	font-size: 13px;
	font-weight: 900;
	color: var(--stc-navy);
	text-transform: uppercase;
	letter-spacing: 0.4px;
	display: flex;
	align-items: center;
	gap: 7px;
}

/* Filter Group & Accordion */
.filter-group {
	border-bottom: 1px solid #f1f5f9;
	padding-bottom: 10px;
	margin-bottom: 6px;
}

.filter-group:last-child {
	border-bottom: none;
	padding-bottom: 0;
	margin-bottom: 0;
}

.filter-group-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 0;
	cursor: pointer;
	user-select: none;
}

.filter-group-title {
	margin: 0;
	font-size: 11.5px;
	font-weight: 800;
	color: var(--text-dark);
	display: flex;
	align-items: center;
	gap: 6px;
	text-transform: uppercase;
	letter-spacing: 0.3px;
}

.filter-group-title i {
	color: var(--stc-blue);
	font-size: 11px;
}

.group-toggle-icon {
	font-size: 10px;
	color: #94a3b8;
	transition: transform 0.2s ease;
}

.filter-group.accordion-open .group-toggle-icon {
	transform: rotate(180deg);
}

.filter-group-body {
	padding: 4px 0 6px;
}

/* Search Box Inside Filter Group */
.filter-search-box {
	display: flex;
	align-items: center;
	gap: 6px;
	background: #f8fafc;
	border: 1px solid var(--border-color);
	border-radius: var(--radius-sm);
	padding: 4px 8px;
	margin-bottom: 8px;
}

.filter-search-box i {
	font-size: 11px;
	color: #94a3b8;
}

.filter-search-input {
	border: none;
	background: transparent;
	font-size: 11px;
	width: 100%;
	outline: none;
	color: var(--text-dark);
}

/* Checkbox & Radio Lists */
.filter-quick-price-list,
.filter-checkbox-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.scrollable-list {
	max-height: 195px;
	overflow-y: auto;
	padding-right: 4px;
	scrollbar-width: thin;
	scrollbar-color: #cbd5e1 transparent;
}

.scrollable-list::-webkit-scrollbar {
	width: 4px;
}

.scrollable-list::-webkit-scrollbar-thumb {
	background: #cbd5e1;
	border-radius: 4px;
}

.filter-quick-price-list label,
.filter-checkbox-list label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	color: #334155;
	cursor: pointer;
	padding: 3px 6px;
	border-radius: 4px;
	transition: background 0.15s ease, color 0.15s ease;
}

.filter-quick-price-list label:hover,
.filter-checkbox-list label:hover {
	background: #edf4ff;
	color: var(--stc-blue);
}

.filter-checkbox-list input[type="checkbox"],
.filter-quick-price-list input[type="radio"] {
	accent-color: var(--stc-blue);
	width: 14px;
	height: 14px;
	cursor: pointer;
	flex-shrink: 0;
}

.filter-checkbox-list .chk-label {
	flex: 1;
	min-width: 0;
}

.filter-checkbox-list .count {
	margin-left: auto;
	color: #94a3b8;
	font-size: 10.5px;
	font-weight: 700;
}

/* Custom Price Min-Max Inputs */
.custom-price-inputs {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 8px;
	padding-top: 6px;
	border-top: 1px dashed #f1f5f9;
}

.custom-price-inputs input {
	width: 100%;
	padding: 5px 8px;
	border: 1px solid var(--border-color);
	border-radius: var(--radius-sm);
	font-size: 11px;
	color: var(--text-dark);
	outline: none;
	background: #f8fafc;
	transition: border-color 0.15s;
}

.custom-price-inputs input:focus {
	border-color: var(--stc-blue);
	background: #ffffff;
}

.sep-dash {
	color: #94a3b8;
	font-weight: 700;
}

/* Filter Action Buttons */
.filter-action-buttons {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 16px;
	padding-top: 12px;
	border-top: 1px solid var(--border-color);
}

.btn-filter-apply {
	background: linear-gradient(135deg, var(--stc-blue), var(--stc-blue-dark));
	color: #ffffff;
	border: none;
	padding: 9px;
	border-radius: var(--radius-sm);
	font-weight: 800;
	font-size: 12px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	box-shadow: 0 2px 6px rgba(0, 82, 245, 0.2);
	transition: var(--transition);
}

.btn-filter-apply:hover {
	box-shadow: 0 4px 12px rgba(0, 82, 245, 0.35);
	transform: translateY(-1px);
}

.btn-filter-reset {
	background: #f1f5f9;
	color: var(--text-muted);
	border: 1px solid var(--border-color);
	padding: 7px;
	border-radius: var(--radius-sm);
	font-weight: 700;
	font-size: 11.5px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	transition: var(--transition);
}

.btn-filter-reset:hover {
	background: #e2e8f0;
	color: #0f172a;
}

/* Toolbar */
.shop-toolbar-bar {
	background: #ffffff;
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md);
	padding: 10px 16px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 18px;
	box-shadow: var(--shadow-sm);
}

.result-counter {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 700;
	color: var(--stc-navy);
}

.result-counter p.woocommerce-result-count,
.woocommerce .woocommerce-result-count {
	margin: 0 !important;
	padding: 0 !important;
	display: inline !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	color: inherit !important;
}

.toolbar-right {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12.5px;
}

.stc-sort-select {
	padding: 6px 12px;
	border: 1px solid var(--border-color);
	border-radius: var(--radius-sm);
	outline: none;
}

/* Pagination */
.stc-pagination {
	text-align: center;
	margin-top: 30px;
}

.stc-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 8px;
	margin: 0 4px;
	border: 1px solid var(--border-color);
	background: #fff;
	border-radius: var(--radius-sm);
	font-weight: 700;
	font-size: 13px;
	color: var(--text-dark);
}

.stc-pagination .page-numbers.current,
.stc-pagination .page-numbers:hover {
	background: var(--stc-blue);
	color: #fff;
	border-color: var(--stc-blue);
}

/* No products found */
.no-products-found {
	text-align: center;
	padding: 60px 20px;
	background: #fff;
	border-radius: var(--radius-lg);
	border: 1px solid var(--border-color);
}

.no-products-found i {
	font-size: 48px;
	color: #cbd5e1;
	margin-bottom: 12px;
}

/* ==========================================================================
   FOOTER SECTION
   ========================================================================== */
.stc-footer {
	background: #ffffff;
	border-top: 1px solid var(--border-color);
	margin-top: 50px;
}

.footer-trust-banner {
	background: #f8fafc;
	border-bottom: 1px solid var(--border-color);
	padding: 24px 0;
}

.trust-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 16px;
}

@media (max-width: 900px) {
	.trust-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

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

.trust-icon {
	width: 44px;
	height: 44px;
	background: var(--stc-blue-light);
	color: var(--stc-blue);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	flex-shrink: 0;
}

.trust-text strong {
	display: block;
	font-size: 12px;
	color: var(--text-dark);
}

.trust-text span {
	font-size: 11px;
	color: var(--text-muted);
}

/* Main Footer Content */
.footer-main-content {
	padding: 40px 0;
}

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

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

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

.footer-col-title {
	margin: 0 0 14px;
	font-size: 13.5px;
	font-weight: 800;
	color: var(--stc-navy);
	text-transform: uppercase;
}

.footer-logo img {
	height: 46px;
	width: auto;
	object-fit: contain;
	display: block;
}

.company-name {
	font-size: 13px;
	margin: 10px 0 6px;
	color: var(--text-dark);
}

.company-desc {
	font-size: 12px;
	color: var(--text-muted);
	margin-bottom: 16px;
}

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

.hotline-box {
	background: #f8fafc;
	border: 1px solid var(--border-color);
	border-radius: var(--radius-sm);
	padding: 8px 12px;
}

.hotline-lbl {
	display: block;
	font-size: 11px;
	color: var(--text-muted);
}

.hotline-num {
	font-size: 16px;
	font-weight: 900;
	color: var(--stc-blue);
}

.showroom-list .showroom-item {
	margin-bottom: 8px;
	font-size: 12px;
}

.showroom-item strong {
	display: block;
	color: var(--text-dark);
}

.showroom-item span {
	color: var(--text-muted);
}

.btn-all-showrooms {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	color: var(--stc-blue);
	margin-top: 6px;
}

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

.footer-links a {
	font-size: 12.5px;
	color: var(--text-muted);
}

.footer-links a:hover {
	color: var(--stc-blue);
	padding-left: 4px;
}

/* Col 4: Payments, Certifications & Social */
.col-payments {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.footer-subgroup {
	display: flex;
	flex-direction: column;
}

.footer-subgroup .footer-col-title {
	margin: 0 0 12px 0;
	display: flex;
	align-items: center;
	gap: 8px;
}

.payment-badges {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.pay-tag {
	background: #ffffff;
	border: 1px solid #e2e8f0;
	padding: 5px 10px;
	border-radius: var(--radius-sm);
	font-size: 11.5px;
	font-weight: 700;
	color: var(--text-dark);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
	transition: all 0.2s ease;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.pay-tag:hover {
	background: #f8fafc;
	border-color: #cbd5e1;
	transform: translateY(-1px);
}

.cert-badges {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

.cert-box {
	padding: 8px 14px;
	border-radius: var(--radius-sm);
	font-size: 10.5px;
	font-weight: 900;
	letter-spacing: 0.3px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.cert-box.bct {
	background: #fef2f2;
	color: #991b1b;
	border: 1px solid #fecaca;
}

.cert-box.dmca {
	background: #f0f9ff;
	color: #0369a1;
	border: 1px solid #bae6fd;
}

.footer-social-follow {
	margin-top: 2px;
}

.social-follow-label {
	display: block;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--text-dark);
	margin-bottom: 10px;
}

.footer-social-icons {
	display: flex;
	gap: 10px;
	align-items: center;
}

.soc-icon {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #ffffff !important;
	font-size: 15px;
	text-decoration: none;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.soc-icon:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.18);
}

.soc-icon.fb {
	background: #1877f2;
}

.soc-icon.yt {
	background: #ff0000;
}

.soc-icon.tt {
	background: #000000;
}

.soc-icon.zl {
	background: #0068ff;
}

/* Bottom copyright */
.footer-bottom-bar {
	background: #1e293b;
	color: #94a3b8;
	padding: 16px 0;
	font-size: 11.5px;
	text-align: center;
}

.footer-bottom-inner p {
	margin: 2px 0;
}

/* Mobile Bottom Navigation */
.mobile-bottom-nav {
	display: none;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: #ffffff;
	border-top: 1px solid var(--border-color);
	box-shadow: 0 -4px 12px rgba(0,0,0,0.06);
	z-index: 9999;
	height: 56px;
}

@media (max-width: 768px) {
	.mobile-bottom-nav {
		display: flex;
	}
	body {
		padding-bottom: 56px;
	}
}

.mobile-nav-tab {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-size: 10px;
	font-weight: 700;
	color: var(--text-muted);
}

.mobile-nav-tab i {
	font-size: 17px;
	margin-bottom: 2px;
}

.mobile-nav-tab.active,
.mobile-nav-tab:hover {
	color: var(--stc-blue);
}

.mobile-build-badge {
	width: 32px;
	height: 32px;
	background: var(--stc-blue);
	color: #fff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: -16px;
	box-shadow: var(--shadow-red);
}

.mobile-cart-badge {
	position: relative;
}

/* ==========================================================================
   SINGLE PRODUCT PAGE STYLES (AUTHENTIC STC.VN)
   ========================================================================== */
.stc-single-product-page {
	background: #ffffff;
	border-radius: var(--radius-lg);
	padding: 24px;
	margin-bottom: 40px;
	box-shadow: var(--shadow-sm);
	border: 1px solid var(--border-color);
}

.product-top-header {
	border-bottom: 1px solid var(--border-color);
	padding-bottom: 14px;
	margin-bottom: 20px;
}

.single-product-title {
	margin: 0 0 8px;
	font-size: 22px;
	font-weight: 800;
	color: var(--text-dark);
	line-height: 1.35;
}

.single-product-submeta {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 12.5px;
	color: var(--text-muted);
	flex-wrap: wrap;
}

.submeta-sep {
	color: #cbd5e1;
}

.rating-stars {
	display: flex;
	align-items: center;
	gap: 3px;
}

.product-detail-grid {
	display: grid;
	grid-template-columns: 380px 1fr 280px;
	gap: 24px;
	margin-bottom: 30px;
}

@media (max-width: 1200px) {
	.product-detail-grid {
		grid-template-columns: 340px 1fr;
	}
	.product-col-sidebar {
		grid-column: span 2;
	}
}

@media (max-width: 768px) {
	.product-detail-grid {
		grid-template-columns: 1fr;
	}
	.product-col-sidebar {
		grid-column: span 1;
	}
}

/* Gallery */
.main-gallery-image {
	position: relative;
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md);
	overflow: hidden;
	background: #ffffff;
	margin-bottom: 12px;
}

.gallery-badge-sale {
	position: absolute;
	top: 12px;
	left: 12px;
	background: var(--stc-blue);
	color: #fff;
	font-size: 12px;
	font-weight: 800;
	padding: 3px 10px;
	border-radius: var(--radius-sm);
	z-index: 2;
}

.gallery-counter {
	position: absolute;
	top: 12px;
	right: 12px;
	background: rgba(15, 23, 42, 0.7);
	color: #ffffff;
	font-size: 11px;
	font-weight: 700;
	padding: 3px 10px;
	border-radius: 20px;
	z-index: 2;
	backdrop-filter: blur(4px);
	letter-spacing: 0.5px;
}

.gallery-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.95);
	border: 1px solid rgba(0, 0, 0, 0.08);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
	color: #334155;
	font-size: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 5;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s ease, background 0.2s ease, transform 0.2s ease, color 0.2s ease;
}

.main-gallery-image:hover .gallery-arrow {
	opacity: 1;
	pointer-events: auto;
}

.gallery-arrow:hover {
	background: var(--stc-blue);
	color: #ffffff;
	transform: translateY(-50%) scale(1.08);
}

.gallery-arrow-prev {
	left: 12px;
}

.gallery-arrow-next {
	right: 12px;
}

.gallery-image-wrapper {
	max-height: 380px;
	height: 380px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: #ffffff;
}

.featured-zoom-img {
	max-width: 100%;
	max-height: 340px;
	width: auto !important;
	height: auto !important;
	object-fit: contain;
	transition: transform 0.3s ease, opacity 0.2s ease;
}

.gallery-image-wrapper:hover .featured-zoom-img {
	transform: scale(1.08);
}

/* Gallery Album Thumbs */
.product-gallery-album {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 14px;
	position: relative;
}

.product-gallery-thumbs {
	display: flex;
	align-items: center;
	gap: 10px;
	overflow-x: auto;
	scroll-behavior: smooth;
	padding: 4px 2px;
	scrollbar-width: thin;
	scrollbar-color: #cbd5e1 transparent;
	flex: 1;
}

.product-gallery-thumbs::-webkit-scrollbar {
	height: 4px;
}

.product-gallery-thumbs::-webkit-scrollbar-track {
	background: transparent;
}

.product-gallery-thumbs::-webkit-scrollbar-thumb {
	background: #cbd5e1;
	border-radius: 4px;
}

.gallery-thumb-item {
	flex: 0 0 64px;
	width: 64px;
	height: 64px;
	border-radius: 8px;
	border: 2px solid #e2e8f0;
	background: #ffffff;
	padding: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
	box-sizing: border-box;
}

.gallery-thumb-item img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	display: block;
	pointer-events: none;
	border-radius: 4px;
}

.gallery-thumb-item:hover {
	border-color: #94a3b8;
	transform: translateY(-2px);
}

.gallery-thumb-item.is-active {
	border-color: var(--stc-blue);
	box-shadow: 0 0 0 2px rgba(0, 82, 245, 0.25);
	transform: translateY(-2px);
}

.thumb-nav-btn {
	width: 28px;
	height: 28px;
	min-width: 28px;
	border-radius: 50%;
	border: 1px solid #e2e8f0;
	background: #f8fafc;
	color: #64748b;
	font-size: 11px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.2s ease;
}

.thumb-nav-btn:hover {
	background: #e2e8f0;
	color: var(--stc-blue);
	border-color: #cbd5e1;
}

.gallery-policies-box {
	background: #f8fafc;
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md);
	padding: 12px 16px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.policy-bullet {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	font-weight: 600;
	color: var(--text-dark);
}

/* Center Column */
.single-price-box {
	background: #f4f8ff;
	border: 1px solid #cce0ff;
	border-radius: var(--radius-md);
	padding: 16px 20px;
	margin-bottom: 18px;
}

.price-row-main {
	display: flex;
	align-items: baseline;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 6px;
}

.single-sale-price {
	font-size: 28px;
	font-weight: 900;
	color: var(--stc-blue);
}

.single-reg-price {
	font-size: 16px;
	color: var(--text-muted);
	text-decoration: line-through;
}

.single-discount-tag {
	background: #e0edff;
	color: #0043c2;
	font-size: 12px;
	font-weight: 800;
	padding: 2px 8px;
	border-radius: var(--radius-sm);
}

.vat-note {
	display: block;
	font-size: 11.5px;
	color: var(--text-muted);
}

/* Gifts Box (Matching STCPC Theme) */
.single-gifts-box {
	border: 2px solid #ffd400;
	border-radius: var(--radius-md);
	overflow: hidden;
	margin-bottom: 20px;
	box-shadow: 0 2px 8px rgba(255, 212, 0, 0.12);
}

.gifts-box-header {
	background: #ffd400;
	color: #0f172a;
	padding: 9px 14px;
	display: flex;
	align-items: center;
	gap: 8px;
}

.gifts-box-header i {
	font-size: 15px;
	color: #0f172a;
}

.gifts-box-header h4 {
	margin: 0;
	font-size: 13.5px;
	font-weight: 900;
	letter-spacing: 0.3px;
	color: #0f172a;
}

.gifts-list {
	padding: 12px 14px;
	background: #fffdf5;
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	list-style: none;
}

.gifts-list li {
	font-size: 12.5px;
	color: #1e293b;
	display: flex;
	align-items: flex-start;
	gap: 8px;
	line-height: 1.45;
}

.gifts-list li i {
	margin-top: 2px;
	color: #0052f5;
	font-size: 14px;
	flex-shrink: 0;
}

.gifts-list li strong {
	font-weight: 800;
	color: #000000;
}

/* Quantity & Buttons */
.quantity-row {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 18px;
}

.qty-label {
	font-weight: 700;
	font-size: 13px;
}

.qty-stepper {
	display: flex;
	align-items: center;
	border: 1px solid var(--border-color);
	border-radius: var(--radius-sm);
	overflow: hidden;
}

.qty-stepper button {
	background: #f8fafc;
	border: none;
	width: 32px;
	height: 34px;
	font-weight: 800;
	font-size: 16px;
}

.qty-stepper input {
	width: 44px;
	height: 34px;
	border: none;
	text-align: center;
	font-weight: 800;
	font-size: 14px;
}

.stock-status-tag {
	font-size: 12px;
	font-weight: 700;
	color: #16a34a;
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.stock-status-tag.stock-status-outofstock {
	color: #dc2626;
}

.btn-contact-stock {
	background: linear-gradient(135deg, #64748b, #475569) !important;
	text-decoration: none;
	box-shadow: 0 4px 12px rgba(100, 116, 139, 0.25) !important;
}

.btn-contact-stock:hover {
	background: #334155 !important;
	color: #fff !important;
}

.single-action-buttons {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.btn-buy-instant {
	background: linear-gradient(135deg, var(--stc-blue), var(--stc-blue-dark));
	color: #fff;
	border: none;
	border-radius: var(--radius-md);
	padding: 12px;
	text-align: center;
	display: flex;
	flex-direction: column;
	cursor: pointer;
	box-shadow: var(--shadow-red);
	transition: var(--transition);
}

.btn-buy-instant:hover {
	background: var(--stc-blue-dark);
	transform: translateY(-2px);
}

.btn-buy-instant strong {
	font-size: 16px;
	letter-spacing: 0.5px;
}

.btn-buy-instant span {
	font-size: 11.5px;
	opacity: 0.9;
}

.secondary-actions-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

.btn-add-cart-outline {
	background: var(--stc-blue-light);
	color: var(--stc-blue-dark);
	border: 1.5px solid var(--stc-blue);
	border-radius: var(--radius-md);
	padding: 10px;
	font-weight: 800;
	font-size: 12.5px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	cursor: pointer;
	transition: var(--transition);
}

.btn-add-cart-outline:hover {
	background: var(--stc-blue);
	color: #fff;
}

.btn-installment {
	background: linear-gradient(135deg, var(--stc-navy), #0f172a);
	color: #fff;
	border-radius: var(--radius-md);
	padding: 8px 10px;
	text-align: center;
	display: flex;
	flex-direction: column;
	transition: var(--transition);
}

.btn-installment:hover {
	background: #0f172a;
	transform: translateY(-2px);
}

.btn-installment strong {
	font-size: 13px;
	color: var(--stc-yellow);
}

.btn-installment span {
	font-size: 11px;
	opacity: 0.85;
}

/* Sidebar Column */
.showroom-avail-box, .stc-assurances-box {
	background: #f8fafc;
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md);
	padding: 16px;
	margin-bottom: 16px;
}

.showroom-avail-box h4, .stc-assurances-box h4 {
	margin: 0 0 12px;
	font-size: 13px;
	font-weight: 800;
	color: var(--text-dark);
	border-bottom: 1px solid var(--border-color);
	padding-bottom: 6px;
}

.showroom-avail-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.showroom-avail-list li {
	margin-bottom: 6px;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--text-dark);
	display: flex;
	align-items: flex-start;
	gap: 7px;
}

.showroom-avail-list li i {
	margin-top: 2px;
	font-size: 13px;
	flex-shrink: 0;
}

.showroom-out-of-stock-notice {
	font-size: 12px;
	color: #dc2626;
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 8px 10px;
	background: #fef2f2;
	border: 1px dashed #fca5a5;
	border-radius: var(--radius-sm);
	font-weight: 600;
	line-height: 1.4;
}

.link-view-all-sr {
	display: inline-block;
	margin-top: 6px;
	font-size: 12px;
	font-weight: 700;
	color: var(--stc-blue);
}

.assurance-item {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
}

.assurance-item i {
	font-size: 18px;
	color: var(--stc-navy);
}

.assurance-item strong {
	display: block;
	font-size: 12px;
	color: var(--text-dark);
}

.assurance-item span {
	font-size: 11px;
	color: var(--text-muted);
}

/* Specifications Table & Description */
.product-specs-section {
	display: grid;
	grid-template-columns: 440px minmax(0, 1fr);
	gap: 24px;
	border-top: 1px solid var(--border-color);
	padding-top: 24px;
	margin-bottom: 30px;
	width: 100%;
	box-sizing: border-box;
}

@media (max-width: 991px) {
	.product-specs-section {
		grid-template-columns: 100%;
	}
}

.specs-box,
.description-box {
	background: #ffffff;
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md);
	padding: 22px 24px;
	box-shadow: var(--shadow-sm);
	box-sizing: border-box;
	min-width: 0;
	max-width: 100%;
	overflow: hidden;
}

.description-box {
	position: relative;
}

.specs-title {
	margin: 0 0 16px;
	font-size: 15px;
	font-weight: 800;
	color: var(--stc-navy);
	display: flex;
	align-items: center;
	gap: 8px;
	padding-bottom: 10px;
	border-bottom: 2px solid #edf4ff;
}

.specs-table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--border-color);
	border-radius: var(--radius-sm);
	overflow: hidden;
}

.specs-table td {
	padding: 10px 12px;
	border-bottom: 1px solid var(--border-color);
	font-size: 12.5px;
	word-break: break-word;
}

.specs-table tr:nth-child(odd) td {
	background: #f8fafc;
}

.specs-table td:first-child {
	width: 130px;
	font-weight: 700;
	color: var(--text-muted);
}

.product-desc-wrapper {
	position: relative;
	min-width: 0;
	max-width: 100%;
	width: 100%;
	box-sizing: border-box;
	transition: max-height 0.35s ease;
}

.product-desc-wrapper.is-collapsed {
	max-height: 480px;
	overflow: hidden;
}

.product-desc-wrapper.is-expanded {
	max-height: none;
	overflow: visible;
}

.desc-gradient-fade {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 140px;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, #ffffff 100%);
	pointer-events: none;
	z-index: 2;
	transition: opacity 0.25s ease;
}

.product-desc-wrapper.is-expanded .desc-gradient-fade {
	display: none !important;
	opacity: 0;
}

.desc-toggle-wrap {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	margin-top: 18px;
	position: relative;
	z-index: 5;
	box-sizing: border-box;
}

.btn-toggle-desc {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: #ffffff;
	color: var(--stc-blue);
	border: 1.5px solid var(--stc-blue);
	border-radius: var(--radius-sm);
	padding: 9px 28px;
	font-size: 13.5px;
	font-weight: 700;
	cursor: pointer;
	transition: all 0.2s ease;
	box-shadow: 0 2px 8px rgba(0, 82, 245, 0.12);
	margin: 0 auto;
}

.btn-toggle-desc:hover {
	background: var(--stc-blue);
	color: #ffffff;
	box-shadow: 0 4px 14px rgba(0, 82, 245, 0.25);
	transform: translateY(-1px);
}

.btn-toggle-desc .toggle-icon {
	font-size: 12px;
	transition: transform 0.2s ease;
}

.product-desc-content {
	min-width: 0;
	max-width: 100%;
	width: 100%;
	box-sizing: border-box;
	word-wrap: break-word;
	overflow-wrap: break-word;
	word-break: break-word;
	font-size: 14px;
	line-height: 1.75;
	color: #334155;
	overflow: hidden;
}

.product-desc-content * {
	max-width: 100% !important;
	box-sizing: border-box;
}

.product-desc-content p {
	margin-bottom: 14px;
	word-break: break-word;
	overflow-wrap: break-word;
}

.product-desc-content img {
	max-width: 100% !important;
	height: auto !important;
	border-radius: var(--radius-sm);
	margin: 14px auto;
	display: block;
	object-fit: contain;
}

.product-desc-content h2,
.product-desc-content h3,
.product-desc-content h4,
.product-desc-content h5 {
	color: #0e1e3e;
	font-weight: 800;
	margin: 20px 0 10px;
	word-break: break-word;
}

.related-products-section {
	border-top: 1px solid var(--border-color);
	padding-top: 24px;
}

/* ==========================================================================
   STANDARD PAGE CONTAINER & WOOCOMMERCE CART / CHECKOUT
   ========================================================================== */
.stc-page-container {
	margin: 20px 0 50px;
}

.page-entry-header {
	margin-bottom: 24px;
	padding-bottom: 12px;
	border-bottom: 2px solid var(--stc-blue);
}

.page-entry-title {
	margin: 0;
	font-size: 24px;
	font-weight: 900;
	color: var(--stc-navy);
	display: flex;
	align-items: center;
	gap: 12px;
}

.page-entry-title i {
	color: var(--stc-blue);
}

/* ==========================================================================
   WOOCOMMERCE MY ACCOUNT - STC MODERN REDESIGN
   ========================================================================== */
.woocommerce-account .stc-page-container {
	margin-top: 15px;
	margin-bottom: 60px;
}

.woocommerce-account .page-entry-header {
	display: none !important;
}

/* Fix WooCommerce layout overrides: Force 2-column grid and reset float/widths */
.woocommerce-account .woocommerce {
	display: grid !important;
	grid-template-columns: 280px 1fr !important;
	gap: 28px !important;
	align-items: start !important;
	width: 100% !important;
	max-width: 100% !important;
}

.woocommerce-account .woocommerce::before,
.woocommerce-account .woocommerce::after {
	display: none !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .stc-myaccount-sidebar {
	float: none !important;
	width: 100% !important;
	min-width: 0 !important;
	max-width: 100% !important;
	margin: 0 !important;
	box-sizing: border-box !important;
}

.woocommerce-account .woocommerce-MyAccount-content {
	float: none !important;
	width: 100% !important;
	min-width: 0 !important;
	max-width: 100% !important;
	margin: 0 !important;
	box-sizing: border-box !important;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 16px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
	padding: 28px;
	min-height: 480px;
}

.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-info,
.woocommerce-account .woocommerce-error {
	grid-column: 1 / -1 !important;
	border-radius: 10px !important;
	margin-bottom: 20px !important;
	font-size: 13.5px !important;
	font-weight: 600 !important;
}

/* Sidebar Navigation Card */
.stc-myaccount-sidebar {
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 16px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
	overflow: hidden;
	position: sticky;
	top: 85px;
}

.stc-account-user-card {
	padding: 20px 18px;
	background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
	border-bottom: 1px solid #f1f5f9;
	display: flex;
	align-items: center;
	gap: 14px;
}

.stc-account-avatar {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	overflow: hidden;
	flex-shrink: 0;
	border: 2px solid #0060e6;
	background: #eff6ff;
	box-shadow: 0 3px 10px rgba(0, 96, 230, 0.2);
	display: flex;
	align-items: center;
	justify-content: center;
}

.stc-account-avatar .avatar-img,
.stc-account-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.avatar-fallback-icon {
	font-size: 32px;
	color: #0060e6;
}

.stc-account-user-meta {
	min-width: 0;
	flex: 1;
	display: flex;
	flex-direction: column;
}

.stc-account-greeting {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	color: #94a3b8;
	letter-spacing: 0.5px;
	line-height: 1;
}

.stc-account-name {
	font-size: 16px;
	font-weight: 800;
	color: #0f172a;
	margin: 3px 0 5px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 1.2;
}

.stc-account-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 11px;
	font-weight: 700;
	padding: 2px 9px;
	border-radius: 20px;
	width: fit-content;
}

.stc-account-badge.badge-admin {
	background: #ecfdf5;
	color: #059669;
	border: 1px solid #a7f3d0;
}

.stc-account-badge.badge-member {
	background: #eff6ff;
	color: #0060e6;
	border: 1px solid #bfdbfe;
}

/* Nav Menu Items */
.stc-account-menu-list {
	list-style: none !important;
	margin: 0 !important;
	padding: 10px !important;
}

.stc-account-menu-list li {
	margin-bottom: 4px !important;
	list-style: none !important;
}

.stc-account-menu-list li a.stc-nav-link,
.woocommerce-MyAccount-navigation ul li a {
	display: flex !important;
	align-items: center !important;
	padding: 11px 14px !important;
	border-radius: 10px !important;
	color: #475569 !important;
	font-size: 13.5px !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
	position: relative !important;
	white-space: nowrap !important;
}

.stc-nav-icon {
	width: 32px;
	height: 32px;
	border-radius: 8px;
	background: #f1f5f9;
	color: #64748b;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-right: 12px;
	font-size: 13.5px;
	flex-shrink: 0;
	transition: all 0.2s ease;
}

.stc-nav-label {
	flex: 1;
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
}

.stc-nav-arrow {
	font-size: 11px;
	color: #cbd5e1;
	transition: transform 0.2s ease, color 0.2s ease;
	margin-left: 6px;
}

.stc-account-menu-list li:hover a.stc-nav-link,
.woocommerce-MyAccount-navigation ul li:hover a {
	background: #f8fafc !important;
	color: #0060e6 !important;
	transform: translateX(2px);
}

.stc-account-menu-list li:hover .stc-nav-icon {
	background: #eff6ff !important;
	color: #0060e6 !important;
}

.stc-account-menu-list li:hover .stc-nav-arrow {
	color: #0060e6;
	transform: translateX(2px);
}

/* Active Nav Item */
.stc-account-menu-list li.is-active a.stc-nav-link,
.woocommerce-MyAccount-navigation ul li.is-active a {
	background: linear-gradient(135deg, #0060e6 0%, #004ecc 100%) !important;
	color: #ffffff !important;
	box-shadow: 0 4px 14px rgba(0, 96, 230, 0.3) !important;
	transform: none !important;
}

.stc-account-menu-list li.is-active .stc-nav-icon {
	background: rgba(255, 255, 255, 0.2) !important;
	color: #ffffff !important;
}

.stc-account-menu-list li.is-active .stc-nav-label {
	color: #ffffff !important;
	font-weight: 700 !important;
}

.stc-account-menu-list li.is-active .stc-nav-arrow {
	color: #ffffff !important;
}

/* Logout link */
.stc-account-menu-list li.is-logout {
	margin-top: 10px !important;
	border-top: 1px dashed #e2e8f0 !important;
	padding-top: 10px !important;
}

.stc-account-menu-list li.is-logout a {
	color: #ef4444 !important;
}

.stc-account-menu-list li.is-logout .stc-nav-icon {
	color: #ef4444 !important;
	background: #fef2f2 !important;
}

.stc-account-menu-list li.is-logout:hover a {
	background: #fef2f2 !important;
	color: #dc2626 !important;
}

.stc-account-admin-shortcut {
	padding: 12px 14px;
	background: #f8fafc;
	border-top: 1px solid #f1f5f9;
}

.btn-admin-shortcut {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 14px;
	background: #ecfdf5;
	border: 1px solid #a7f3d0;
	color: #059669;
	font-size: 12.5px;
	font-weight: 700;
	border-radius: 8px;
	text-decoration: none;
	transition: all 0.2s ease;
	text-align: center;
	line-height: 1.3;
}

.btn-admin-shortcut:hover {
	background: #059669;
	color: #ffffff;
}

/* Content Container */
.woocommerce-MyAccount-content {
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 14px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
	padding: 28px;
	min-height: 480px;
	width: 100%;
	box-sizing: border-box;
}

/* Dashboard Hero */
.stc-dashboard-hero {
	background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
	border-radius: 14px;
	padding: 26px 28px;
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 24px;
	position: relative;
	overflow: hidden;
	box-shadow: 0 8px 24px rgba(15, 23, 42, 0.15);
}

.stc-dashboard-hero::after {
	content: '';
	position: absolute;
	right: -30px;
	bottom: -30px;
	width: 180px;
	height: 180px;
	background: radial-gradient(circle, rgba(0, 96, 230, 0.3) 0%, transparent 70%);
	pointer-events: none;
}

.stc-hero-content {
	max-width: 600px;
	position: relative;
	z-index: 1;
}

.stc-hero-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: rgba(255, 255, 255, 0.12);
	color: #38bdf8;
	font-size: 11.5px;
	font-weight: 700;
	padding: 4px 10px;
	border-radius: 20px;
	margin-bottom: 10px;
	backdrop-filter: blur(4px);
}

.stc-hero-title {
	font-size: 22px;
	font-weight: 900;
	color: #ffffff;
	margin: 0 0 8px;
	line-height: 1.3;
}

.stc-hero-title .highlight {
	color: #38bdf8;
}

.stc-hero-subtitle {
	font-size: 13.5px;
	color: #94a3b8;
	margin: 0;
	line-height: 1.6;
}

.btn-hero-shop {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #0060e6;
	color: #ffffff;
	font-size: 13.5px;
	font-weight: 700;
	padding: 12px 22px;
	border-radius: 10px;
	text-decoration: none;
	white-space: nowrap;
	box-shadow: 0 4px 14px rgba(0, 96, 230, 0.4);
	transition: all 0.2s ease;
	position: relative;
	z-index: 1;
}

.btn-hero-shop:hover {
	background: #004ecc;
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(0, 96, 230, 0.5);
	color: #ffffff;
}

/* Stats Grid */
.stc-dashboard-stats-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	margin-bottom: 28px;
}

.stc-stat-card {
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	padding: 18px 16px;
	display: flex;
	align-items: center;
	gap: 14px;
	text-decoration: none;
	transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

.stc-stat-card:hover {
	transform: translateY(-2px);
	border-color: #cbd5e1;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
}

.stat-icon-wrap {
	width: 44px;
	height: 44px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	flex-shrink: 0;
}

.stat-total .stat-icon-wrap { background: #eff6ff; color: #0060e6; }
.stat-processing .stat-icon-wrap { background: #fff7ed; color: #ea580c; }
.stat-completed .stat-icon-wrap { background: #ecfdf5; color: #059669; }
.stat-support .stat-icon-wrap { background: #f5f3ff; color: #7c3aed; }

.stat-info {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.stat-value {
	font-size: 18px;
	font-weight: 900;
	color: #0f172a;
	line-height: 1.2;
}

.stat-label {
	font-size: 11.5px;
	font-weight: 600;
	color: #64748b;
	margin-top: 2px;
}

/* Shortcuts Grid */
.stc-dashboard-shortcuts {
	margin-top: 10px;
}

.stc-section-title {
	font-size: 16px;
	font-weight: 800;
	color: #0f172a;
	margin: 0 0 16px;
	display: flex;
	align-items: center;
	gap: 8px;
}

.stc-section-title i {
	color: #0060e6;
}

.stc-shortcuts-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}

.stc-shortcut-card {
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	padding: 18px;
	display: flex;
	align-items: center;
	gap: 14px;
	text-decoration: none;
	transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
	position: relative;
}

.stc-shortcut-card:hover {
	border-color: #0060e6;
	background: #f8fafc;
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(0, 96, 230, 0.08);
}

.shortcut-icon {
	width: 48px;
	height: 48px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	flex-shrink: 0;
}

.shortcut-icon.icon-blue { background: #eff6ff; color: #0060e6; }
.shortcut-icon.icon-green { background: #ecfdf5; color: #059669; }
.shortcut-icon.icon-purple { background: #f5f3ff; color: #7c3aed; }
.shortcut-icon.icon-orange { background: #fff7ed; color: #ea580c; }

.shortcut-meta {
	flex: 1;
	min-width: 0;
}

.shortcut-meta h4 {
	font-size: 14.5px;
	font-weight: 700;
	color: #0f172a;
	margin: 0 0 4px;
}

.shortcut-meta p {
	font-size: 12px;
	color: #64748b;
	margin: 0;
	line-height: 1.4;
}

.shortcut-arrow {
	font-size: 13px;
	color: #cbd5e1;
	transition: transform 0.2s ease, color 0.2s ease;
	flex-shrink: 0;
}

.stc-shortcut-card:hover .shortcut-arrow {
	color: #0060e6;
	transform: translateX(4px);
}

/* Orders Table */
/* Orders Table & Order Cards */
.stc-account-orders-page {
	width: 100%;
}

.stc-orders-page-header {
	margin-bottom: 24px;
	padding-bottom: 16px;
	border-bottom: 1px solid #f1f5f9;
}

.stc-orders-cards-list {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.stc-order-card {
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
	transition: all 0.2s ease;
}

.stc-order-card:hover {
	border-color: #cbd5e1;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
}

.stc-order-card-header {
	padding: 16px 20px;
	background: #f8fafc;
	border-bottom: 1px solid #f1f5f9;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
}

.order-identity {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}

.order-code {
	font-size: 15px;
	font-weight: 800;
	color: #0060e6;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.order-code:hover {
	color: #004ecc;
	text-decoration: underline;
}

.order-date {
	font-size: 12.5px;
	color: #64748b;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

/* Status Badges */
.order-status-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 700;
	padding: 4px 12px;
	border-radius: 20px;
}

.order-status-badge.status-processing {
	background: #eff6ff;
	color: #0060e6;
	border: 1px solid #bfdbfe;
}

.order-status-badge.status-completed {
	background: #ecfdf5;
	color: #059669;
	border: 1px solid #a7f3d0;
}

.order-status-badge.status-cancelled {
	background: #fef2f2;
	color: #dc2626;
	border: 1px solid #fecaca;
}

.order-status-badge.status-pending {
	background: #fffbeb;
	color: #d97706;
	border: 1px solid #fde68a;
}

.order-status-badge.status-default {
	background: #f1f5f9;
	color: #475569;
	border: 1px solid #e2e8f0;
}

/* Order Items Preview */
.stc-order-items-preview {
	padding: 14px 20px;
}

.stc-order-item-row {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 10px 0;
	border-bottom: 1px solid #f8fafc;
}

.stc-order-item-row:last-child {
	border-bottom: none;
}

.item-thumb {
	width: 52px;
	height: 52px;
	border-radius: 8px;
	overflow: hidden;
	background: #f1f5f9;
	border: 1px solid #e2e8f0;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.item-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.item-info {
	flex: 1;
	min-width: 0;
}

.item-name {
	font-size: 13.5px;
	font-weight: 600;
	color: #1e293b;
	margin: 0 0 4px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.item-meta {
	font-size: 12px;
	color: #64748b;
}

.item-subtotal {
	font-size: 14px;
	font-weight: 700;
	color: #0f172a;
	white-space: nowrap;
	padding-left: 10px;
}

.stc-order-more-items {
	padding: 8px 0 2px;
	font-size: 12px;
	font-weight: 600;
	color: #64748b;
	text-align: center;
}

/* Order Footer */
.stc-order-card-footer {
	padding: 14px 20px;
	background: #ffffff;
	border-top: 1px solid #f1f5f9;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

.order-total-summary {
	display: flex;
	align-items: baseline;
	gap: 8px;
}

.total-label {
	font-size: 13px;
	color: #64748b;
}

.total-value {
	font-size: 17px;
	font-weight: 900;
	color: #d70018;
}

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

.btn-order-view {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: #eff6ff;
	color: #0060e6;
	border: 1px solid #bfdbfe;
	font-size: 12.5px;
	font-weight: 700;
	padding: 8px 16px;
	border-radius: 8px;
	text-decoration: none;
	transition: all 0.2s ease;
}

.btn-order-view:hover {
	background: #0060e6;
	color: #ffffff;
	border-color: #0060e6;
	box-shadow: 0 3px 10px rgba(0, 96, 230, 0.25);
}

.btn-order-pay {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: #d70018;
	color: #ffffff;
	font-size: 12.5px;
	font-weight: 700;
	padding: 8px 16px;
	border-radius: 8px;
	text-decoration: none;
	transition: all 0.2s ease;
}

.btn-order-pay:hover {
	background: #b90014;
}

/* Empty Orders State */
.stc-orders-empty-state {
	padding: 48px 24px;
	text-align: center;
	background: #f8fafc;
	border: 1.5px dashed #cbd5e1;
	border-radius: 14px;
	margin-top: 10px;
}

.stc-orders-empty-state .empty-icon-wrap {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: #eff6ff;
	color: #0060e6;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 26px;
	margin-bottom: 16px;
}

.stc-orders-empty-state h3 {
	font-size: 18px;
	font-weight: 800;
	color: #0f172a;
	margin: 0 0 8px;
}

.stc-orders-empty-state p {
	font-size: 13.5px;
	color: #64748b;
	max-width: 480px;
	margin: 0 auto 20px;
	line-height: 1.5;
}

.btn-start-shopping {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #0060e6;
	color: #ffffff !important;
	font-size: 13.5px;
	font-weight: 700;
	padding: 10px 22px;
	border-radius: 8px;
	text-decoration: none;
	box-shadow: 0 4px 12px rgba(0, 96, 230, 0.3);
	transition: all 0.2s ease;
}

.btn-start-shopping:hover {
	background: #004ecc;
	box-shadow: 0 6px 16px rgba(0, 96, 230, 0.4);
}

.woocommerce-orders-table {
	width: 100%;
	border-collapse: collapse;
	margin: 0;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	overflow: hidden;
}

.woocommerce-orders-table thead th {
	background: #f8fafc;
	color: #1e293b;
	font-weight: 800;
	font-size: 13px;
	padding: 14px 16px;
	text-align: left;
	border-bottom: 2px solid #e2e8f0;
}

.woocommerce-orders-table tbody tr {
	border-bottom: 1px solid #f1f5f9;
	transition: background 0.15s ease;
}

.woocommerce-orders-table tbody tr:hover {
	background: #f8fafc;
}

.woocommerce-orders-table td {
	padding: 14px 16px;
	font-size: 13.5px;
	color: #334155;
	vertical-align: middle;
}

.woocommerce-orders-table td a {
	color: #0060e6;
	font-weight: 700;
	text-decoration: none;
}

.woocommerce-orders-table .woocommerce-button.view,
.woocommerce-orders-table .button.view {
	background: #eff6ff !important;
	color: #0060e6 !important;
	border: 1px solid #bfdbfe !important;
	padding: 6px 14px !important;
	border-radius: 6px !important;
	font-weight: 700 !important;
	font-size: 12px !important;
	display: inline-block !important;
	transition: all 0.15s ease !important;
}

.woocommerce-orders-table .woocommerce-button.view:hover,
.woocommerce-orders-table .button.view:hover {
	background: #0060e6 !important;
	color: #ffffff !important;
}

/* ==========================================================================
   MY ADDRESSES PAGE REDESIGN
   ========================================================================== */
.stc-addresses-page {
	width: 100%;
}

.stc-page-intro {
	margin-bottom: 24px;
	padding-bottom: 16px;
	border-bottom: 1px solid #f1f5f9;
}

.stc-section-heading {
	font-size: 18px;
	font-weight: 800;
	color: #0f172a;
	margin: 0 0 6px;
	display: flex;
	align-items: center;
	gap: 10px;
}

.stc-section-heading i {
	color: #0060e6;
}

.stc-section-sub {
	font-size: 13.5px;
	color: #64748b;
	margin: 0;
	line-height: 1.5;
}

/* Force 2 equal columns grid & kill all floats from WooCommerce core */
.woocommerce .woocommerce-Addresses.col2-set,
.woocommerce-Addresses,
.stc-addresses-grid {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	gap: 22px !important;
	float: none !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}

.woocommerce .woocommerce-Addresses.col2-set::before,
.woocommerce .woocommerce-Addresses.col2-set::after,
.stc-addresses-grid::before,
.stc-addresses-grid::after {
	display: none !important;
}

.woocommerce .col2-set .col-1,
.woocommerce .col2-set .col-2,
.woocommerce-Address,
.stc-address-card {
	float: none !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	box-sizing: border-box !important;
	background: #ffffff !important;
	border: 1px solid #e2e8f0 !important;
	border-radius: 14px !important;
	padding: 22px !important;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03) !important;
	display: flex !important;
	flex-direction: column !important;
	justify-content: space-between !important;
	transition: all 0.2s ease !important;
}

.stc-address-card:hover {
	border-color: #cbd5e1 !important;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06) !important;
}

.stc-address-card-header {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 12px !important;
	padding-bottom: 14px !important;
	border-bottom: 1px solid #f1f5f9 !important;
	margin-bottom: 14px !important;
}

.stc-address-type {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	min-width: 0 !important;
}

.stc-address-icon {
	width: 36px !important;
	height: 36px !important;
	border-radius: 10px !important;
	background: #eff6ff !important;
	color: #0060e6 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	font-size: 15px !important;
	flex-shrink: 0 !important;
}

.shipping-address .stc-address-icon {
	background: #ecfdf5 !important;
	color: #059669 !important;
}

.stc-address-title,
.woocommerce-Address-title h2,
.woocommerce-Address-title h3 {
	font-size: 15px !important;
	font-weight: 700 !important;
	color: #0f172a !important;
	margin: 0 !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
}

.btn-edit-address,
.woocommerce-Address-title a.edit {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	background: #eff6ff !important;
	color: #0060e6 !important;
	border: 1px solid #bfdbfe !important;
	font-size: 12.5px !important;
	font-weight: 700 !important;
	padding: 7px 14px !important;
	border-radius: 8px !important;
	text-decoration: none !important;
	white-space: nowrap !important;
	transition: all 0.2s ease !important;
	flex-shrink: 0 !important;
}

.btn-edit-address:hover,
.woocommerce-Address-title a.edit:hover {
	background: #0060e6 !important;
	color: #ffffff !important;
	border-color: #0060e6 !important;
	transform: translateY(-1px) !important;
	box-shadow: 0 3px 8px rgba(0, 96, 230, 0.25) !important;
}

.stc-address-card-body {
	flex: 1 !important;
	display: flex !important;
	flex-direction: column !important;
	justify-content: center !important;
}

.stc-formatted-address,
.woocommerce-Address address {
	font-style: normal !important;
	font-size: 13.5px !important;
	line-height: 1.7 !important;
	color: #334155 !important;
	margin: 0 !important;
}

.stc-address-empty {
	background: #f8fafc !important;
	border: 1px dashed #cbd5e1 !important;
	border-radius: 10px !important;
	padding: 16px !important;
	display: flex !important;
	align-items: flex-start !important;
	gap: 10px !important;
	color: #64748b !important;
	font-size: 13px !important;
	line-height: 1.5 !important;
}

.stc-address-empty i {
	color: #94a3b8 !important;
	font-size: 16px !important;
	margin-top: 2px !important;
	flex-shrink: 0 !important;
}

/* Account Details & Address Edit Forms */
.woocommerce-EditAccountForm,
.woocommerce-address-fields {
	max-width: 680px;
}

.woocommerce-form-row label {
	font-size: 13px;
	font-weight: 700;
	color: #1e293b;
	margin-bottom: 6px;
	display: block;
}

.woocommerce-input-wrapper input,
.woocommerce-EditAccountForm input.input-text,
.woocommerce-address-fields input.input-text,
.woocommerce-address-fields select {
	width: 100%;
	padding: 10px 14px;
	border: 1px solid #cbd5e1;
	border-radius: 8px;
	font-size: 14px;
	color: #0f172a;
	background: #ffffff;
	box-sizing: border-box;
	transition: all 0.15s ease;
}

.woocommerce-input-wrapper input:focus,
.woocommerce-EditAccountForm input.input-text:focus,
.woocommerce-address-fields input.input-text:focus,
.woocommerce-address-fields select:focus {
	border-color: #0060e6;
	box-shadow: 0 0 0 3px rgba(0, 96, 230, 0.12);
	outline: none;
}

.woocommerce-EditAccountForm button.button,
.woocommerce-address-fields button.button {
	background: #0060e6 !important;
	color: #ffffff !important;
	font-size: 14px !important;
	font-weight: 800 !important;
	padding: 12px 28px !important;
	border-radius: 8px !important;
	border: none !important;
	box-shadow: 0 4px 14px rgba(0, 96, 230, 0.3) !important;
	cursor: pointer !important;
	transition: all 0.2s ease !important;
	margin-top: 10px !important;
}

.woocommerce-EditAccountForm button.button:hover,
.woocommerce-address-fields button.button:hover {
	background: #004ecc !important;
	box-shadow: 0 6px 18px rgba(0, 96, 230, 0.45) !important;
}

/* View Order Details */
.woocommerce-view-order .woocommerce-MyAccount-content h2 {
	font-size: 18px;
	font-weight: 800;
	color: #0f172a;
	margin: 24px 0 14px;
}

.woocommerce-table--order-details {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	overflow: hidden;
	margin-bottom: 24px;
}

.woocommerce-table--order-details th,
.woocommerce-table--order-details td {
	padding: 12px 16px;
	border-bottom: 1px solid #f1f5f9;
	font-size: 13.5px;
}

.woocommerce-table--order-details thead th {
	background: #f8fafc;
	font-weight: 800;
	color: #1e293b;
}

.woocommerce-table--order-details tfoot th {
	font-weight: 700;
	color: #475569;
	background: #fafafa;
}

.woocommerce-table--order-details tfoot td {
	font-weight: 800;
	color: #0f172a;
	background: #fafafa;
}

.woocommerce-customer-details {
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	padding: 20px;
	margin-top: 20px;
}

.woocommerce-customer-details address {
	font-style: normal;
	line-height: 1.6;
	color: #475569;
	font-size: 13.5px;
}

/* Customer Login / Register Forms */
#customer_login {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 30px;
	max-width: 960px;
	margin: 20px auto 40px;
}

#customer_login .col-1,
#customer_login .col-2 {
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 14px;
	padding: 28px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

#customer_login h2 {
	font-size: 20px;
	font-weight: 900;
	color: #0f172a;
	margin: 0 0 20px;
	padding-bottom: 12px;
	border-bottom: 2px solid #eff6ff;
}

#customer_login form {
	border: none;
	padding: 0;
	margin: 0;
}

#customer_login .woocommerce-button.button {
	background: #0060e6 !important;
	color: #ffffff !important;
	font-size: 14px !important;
	font-weight: 800 !important;
	padding: 12px 24px !important;
	border-radius: 8px !important;
	width: 100% !important;
	text-align: center !important;
	cursor: pointer !important;
	box-shadow: 0 4px 14px rgba(0, 96, 230, 0.3) !important;
	transition: all 0.2s ease !important;
	margin-top: 10px !important;
}

#customer_login .woocommerce-button.button:hover {
	background: #004ecc !important;
	box-shadow: 0 6px 18px rgba(0, 96, 230, 0.45) !important;
}

/* Responsive Account Area */
@media (max-width: 991px) {
	.woocommerce-account .woocommerce {
		grid-template-columns: 1fr !important;
		gap: 20px !important;
	}

	.stc-myaccount-sidebar {
		position: static !important;
	}

	.stc-dashboard-stats-grid {
		grid-template-columns: repeat(2, 1fr) !important;
	}

	.stc-shortcuts-grid {
		grid-template-columns: 1fr !important;
	}

	.woocommerce-Addresses {
		grid-template-columns: 1fr !important;
	}

	#customer_login {
		grid-template-columns: 1fr !important;
	}
}

@media (max-width: 600px) {
	.stc-dashboard-hero {
		flex-direction: column !important;
		align-items: flex-start !important;
		padding: 20px !important;
	}

	.stc-dashboard-stats-grid {
		grid-template-columns: 1fr !important;
	}

	.woocommerce-account .woocommerce-MyAccount-content {
		padding: 18px !important;
	}
}

.woocommerce-cart .woocommerce,
.woocommerce-checkout .woocommerce {
	background: #ffffff;
	border: 1px solid var(--border-color);
	border-radius: var(--radius-lg);
	padding: 24px;
	box-shadow: var(--shadow-sm);
	margin-bottom: 40px;
}

/* Empty Cart State */
.wc-empty-cart-message,
.cart-empty.woocommerce-info {
	background: #f8fafc !important;
	border: 1.5px dashed #cbd5e1 !important;
	border-radius: var(--radius-lg) !important;
	padding: 50px 24px !important;
	text-align: center !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	color: var(--text-dark) !important;
	margin-bottom: 24px !important;
	list-style: none !important;
}

.cart-empty.woocommerce-info::before {
	display: none !important;
}

.return-to-shop {
	text-align: center;
	margin-bottom: 20px;
}

.return-to-shop .button {
	background: linear-gradient(135deg, var(--stc-blue) 0%, var(--stc-blue-dark) 100%) !important;
	color: #ffffff !important;
	padding: 12px 30px !important;
	font-weight: 800 !important;
	font-size: 14px !important;
	border-radius: var(--radius-md) !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	text-transform: uppercase !important;
	box-shadow: 0 4px 14px rgba(0, 82, 245, 0.3) !important;
	transition: var(--transition) !important;
}

.return-to-shop .button:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(0, 82, 245, 0.45) !important;
}

/* ==========================================================================
   CART TABLE & ACTIONS (STC COMPUTER LUXURY REDESIGN)
   ========================================================================== */
.cart-table-card {
	background: #ffffff;
	border: 1px solid var(--border-color);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
	margin-bottom: 28px;
}

table.shop_table.cart {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 0;
	border: none;
}

table.shop_table.cart thead th {
	background: #f8fafc;
	color: var(--stc-navy);
	font-weight: 800;
	font-size: 13px;
	padding: 14px 18px;
	text-align: left;
	border-bottom: 2px solid var(--border-color);
	letter-spacing: 0.3px;
}

table.shop_table.cart tbody tr:not(.cart-actions-row) {
	border-bottom: 1px solid var(--border-color);
	transition: background 0.15s ease;
}

table.shop_table.cart tbody tr:not(.cart-actions-row):hover {
	background: #fafcff;
}

table.shop_table.cart td {
	padding: 16px 18px;
	vertical-align: middle;
	font-size: 13.5px;
}

/* Product Remove */
table.shop_table.cart .product-remove {
	width: 48px;
	text-align: center;
}

table.shop_table.cart .product-remove a.remove {
	color: #94a3b8;
	font-size: 14px;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #f1f5f9;
	transition: all 0.2s ease;
	border: none;
}

table.shop_table.cart .product-remove a.remove:hover {
	background: #fee2e2;
	color: #dc2626;
	transform: scale(1.08);
}

/* Product Thumbnail */
table.shop_table.cart .product-thumbnail {
	width: 90px;
}

table.shop_table.cart .product-thumbnail img {
	width: 75px;
	height: 75px;
	object-fit: contain;
	border-radius: var(--radius-sm);
	border: 1px solid var(--border-color);
	background: #ffffff;
	padding: 4px;
}

/* Product Title */
table.shop_table.cart .product-name a.cart-product-title,
table.shop_table.cart .product-name a {
	color: var(--text-dark);
	font-weight: 700;
	font-size: 14px;
	line-height: 1.45;
	display: block;
	transition: color 0.2s ease;
}

table.shop_table.cart .product-name a:hover {
	color: var(--stc-blue);
}

/* Prices */
table.shop_table.cart .product-price {
	font-weight: 700;
	color: var(--text-body);
	font-size: 14px;
	white-space: nowrap;
}

table.shop_table.cart .product-subtotal {
	font-weight: 900;
	color: #dc2626;
	font-size: 15.5px;
	white-space: nowrap;
}

/* Quantity input */
table.shop_table.cart .product-quantity .quantity input.qty {
	width: 60px;
	height: 38px;
	padding: 4px 8px;
	border: 1.5px solid var(--border-color);
	border-radius: var(--radius-sm);
	text-align: center;
	font-weight: 800;
	font-size: 13.5px;
	outline: none;
	transition: border-color 0.2s;
}

table.shop_table.cart .product-quantity .quantity input.qty:focus {
	border-color: var(--stc-blue);
	box-shadow: 0 0 0 3px rgba(0, 82, 245, 0.1);
}

/* Cart Actions Row (Coupon & Update Cart) */
table.shop_table.cart .cart-actions-row td.actions {
	padding: 16px 20px;
	background: #f8fafc;
	border-top: 2px solid var(--border-color);
}

.cart-actions-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
}

.coupon-box {
	display: flex;
	align-items: center;
}

.coupon-input-group {
	display: flex;
	align-items: stretch;
	height: 42px;
	border: 1.5px solid #cbd5e1;
	border-radius: var(--radius-md);
	overflow: hidden;
	background: #ffffff;
	box-shadow: 0 1px 3px rgba(0,0,0,0.04);
	transition: border-color 0.2s, box-shadow 0.2s;
}

.coupon-input-group:focus-within {
	border-color: var(--stc-blue);
	box-shadow: 0 0 0 3px rgba(0, 82, 245, 0.15);
}

.coupon-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 12px;
	background: #eff6ff;
	color: var(--stc-blue);
	font-size: 16px;
	border-right: 1px solid #e2e8f0;
}

.coupon-input-group input[type="text"] {
	border: none;
	padding: 0 14px;
	font-size: 13.5px;
	width: 240px;
	outline: none;
	color: var(--text-dark);
}

.coupon-input-group .btn-apply-coupon {
	background: linear-gradient(135deg, var(--stc-blue) 0%, var(--stc-blue-dark) 100%);
	color: #ffffff;
	border: none;
	padding: 0 20px;
	font-weight: 800;
	font-size: 12.5px;
	letter-spacing: 0.5px;
	cursor: pointer;
	transition: opacity 0.2s;
	white-space: nowrap;
}

.coupon-input-group .btn-apply-coupon:hover {
	opacity: 0.92;
}

.btn-update-cart {
	height: 42px;
	padding: 0 20px;
	border-radius: var(--radius-md);
	background: #ffffff;
	color: var(--stc-navy);
	border: 1.5px solid #cbd5e1;
	font-weight: 800;
	font-size: 12.5px;
	letter-spacing: 0.3px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	transition: all 0.2s ease;
	white-space: nowrap;
}

.btn-update-cart:hover:not(:disabled) {
	border-color: var(--stc-blue);
	color: var(--stc-blue);
	background: #eff6ff;
	transform: translateY(-1px);
}

.btn-update-cart:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* ==========================================================================
   CART COLLATERALS (TWO COLUMN BALANCED WORKBENCH)
   ========================================================================== */
.woocommerce-cart .woocommerce .cart-collaterals,
.woocommerce-cart .cart-collaterals {
	width: 100% !important;
	float: none !important;
	clear: both !important;
	margin-top: 24px !important;
	display: block !important;
}

.woocommerce-cart .woocommerce .cart-collaterals::before,
.woocommerce-cart .woocommerce .cart-collaterals::after,
.woocommerce-cart .cart-collaterals::before,
.woocommerce-cart .cart-collaterals::after,
.stc-cart-collaterals-grid::before,
.stc-cart-collaterals-grid::after {
	display: none !important;
	content: none !important;
	clear: none !important;
}

.stc-cart-collaterals-grid {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) 460px !important;
	gap: 24px !important;
	align-items: stretch !important;
	width: 100% !important;
	margin: 0 !important;
	box-sizing: border-box !important;
}

@media (max-width: 991px) {
	.stc-cart-collaterals-grid {
		grid-template-columns: 1fr !important;
		gap: 20px !important;
	}

	.stc-cart-collaterals-grid .cart_totals {
		order: 1 !important;
	}

	.stc-cart-collaterals-grid .stc-cart-benefits-card {
		order: 2 !important;
	}
}

/* Left Column: Benefits Card */
.stc-cart-benefits-card {
	background: #ffffff !important;
	border: 1px solid var(--border-color) !important;
	border-radius: var(--radius-lg) !important;
	padding: 24px !important;
	box-shadow: var(--shadow-sm) !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 16px !important;
	width: 100% !important;
	float: none !important;
	margin: 0 !important;
	box-sizing: border-box !important;
}

.benefits-header {
	display: flex;
	align-items: center;
	gap: 10px;
	padding-bottom: 12px;
	border-bottom: 2px solid var(--stc-blue);
}

.benefits-header h4 {
	margin: 0;
	font-size: 15px;
	font-weight: 900;
	color: var(--stc-navy);
	letter-spacing: 0.3px;
}

.benefits-header i {
	font-size: 18px;
	color: var(--stc-blue);
}

.benefits-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.benefit-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding-bottom: 12px;
	border-bottom: 1px dashed var(--border-color);
}

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

.benefit-icon {
	width: 36px;
	height: 36px;
	border-radius: var(--radius-sm);
	background: #f8fafc;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	flex-shrink: 0;
	border: 1px solid var(--border-color);
}

.benefit-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-size: 12.5px;
	line-height: 1.4;
}

.benefit-text strong {
	color: var(--stc-navy);
	font-size: 13px;
}

.benefit-text span {
	color: var(--text-muted);
}

.cart-hotline-strip {
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: var(--radius-md);
	padding: 10px 14px;
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 12.5px;
	color: var(--text-body);
}

.cart-hotline-strip i {
	color: var(--stc-blue);
	font-size: 16px;
}

.cart-hotline-strip a {
	color: var(--stc-blue);
	font-weight: 800;
}

.cart-nav-buttons {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: auto !important;
	padding-top: 6px;
}

.btn-cart-continue,
.btn-cart-builder {
	padding: 10px 16px;
	border-radius: var(--radius-sm);
	font-weight: 800;
	font-size: 12.5px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	transition: all 0.2s ease;
}

.btn-cart-continue {
	background: #f1f5f9;
	color: var(--stc-navy);
	border: 1px solid var(--border-color);
}

.btn-cart-continue:hover {
	background: #e2e8f0;
	color: var(--stc-blue);
}

.btn-cart-builder {
	background: #eff6ff;
	color: var(--stc-blue);
	border: 1px solid #bfdbfe;
}

.btn-cart-builder:hover {
	background: var(--stc-blue);
	color: #ffffff;
}

/* Right Column: Cart Totals Box */
.woocommerce-cart .woocommerce .cart-collaterals .cart_totals,
.woocommerce-cart .cart-collaterals .cart_totals,
.woocommerce-cart div.cart_totals,
.cart_totals {
	background: #ffffff !important;
	border: 1px solid var(--border-color) !important;
	border-radius: var(--radius-lg) !important;
	padding: 24px !important;
	box-shadow: var(--shadow-sm) !important;
	display: flex !important;
	flex-direction: column !important;
	width: 100% !important;
	float: none !important;
	margin: 0 !important;
	box-sizing: border-box !important;
	text-align: left !important;
}

.cart-totals-header {
	display: flex;
	align-items: center;
	gap: 10px;
	padding-bottom: 12px;
	border-bottom: 2px solid var(--stc-blue);
	margin-bottom: 12px;
}

.cart-totals-header h3 {
	margin: 0;
	font-size: 16px;
	font-weight: 900;
	color: var(--stc-navy);
	letter-spacing: 0.3px;
}

.cart-totals-header i {
	font-size: 18px;
	color: var(--stc-blue);
}

.cart_totals h2 {
	display: none !important; /* Replaced by stylish cart-totals-header */
}

/* Totals Table */
.cart-totals-table,
.cart_totals table.shop_table {
	width: 100% !important;
	border-collapse: collapse !important;
	background: transparent !important;
	border: none !important;
	margin-bottom: 14px !important;
}

.cart_totals table.shop_table tr {
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
	padding: 12px 0 !important;
	border-bottom: 1px dashed var(--border-color) !important;
}

.cart_totals table.shop_table tr.shipping {
	align-items: flex-start !important;
}

.cart_totals table.shop_table th {
	background: transparent !important;
	border: none !important;
	color: var(--text-muted) !important;
	font-weight: 700 !important;
	font-size: 13.5px !important;
	padding: 0 !important;
	text-align: left !important;
	width: 130px !important;
	flex-shrink: 0 !important;
}

.cart_totals table.shop_table td {
	background: transparent !important;
	border: none !important;
	color: var(--text-dark) !important;
	font-weight: 700 !important;
	font-size: 14px !important;
	padding: 0 !important;
	text-align: right !important;
	flex: 1 !important;
}

/* Shipping methods & Free Shipping Badge */
ul#shipping_method {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-end !important;
}

ul#shipping_method li {
	display: flex !important;
	align-items: center !important;
	gap: 6px !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	color: #16a34a !important;
}

ul#shipping_method li input {
	display: none;
}

.woocommerce-shipping-destination,
p.woocommerce-shipping-destination {
	font-size: 11.5px !important;
	color: var(--text-muted) !important;
	margin: 4px 0 0 !important;
	text-align: right !important;
	font-weight: normal !important;
}

.woocommerce-shipping-calculator {
	margin-top: 6px !important;
	text-align: right !important;
}

.shipping-calculator-button {
	font-size: 12px !important;
	color: var(--stc-blue) !important;
	font-weight: 700 !important;
}

/* Highlighted Total Row */
.cart_totals table.shop_table tr.order-total,
.cart_totals table.shop_table tr.highlight-total-row {
	background: #f8fafc !important;
	border: 1.5px solid #e2e8f0 !important;
	border-radius: var(--radius-md) !important;
	padding: 16px !important;
	margin-top: 14px !important;
	flex-direction: row !important;
}

.cart_totals table.shop_table tr.order-total th,
.cart_totals table.shop_table tr.highlight-total-row th {
	font-size: 15px !important;
	font-weight: 900 !important;
	color: var(--stc-navy) !important;
	width: 140px !important;
}

.order-total-amount,
.cart_totals table.shop_table tr.order-total td strong,
.cart_totals table.shop_table tr.order-total td .amount {
	font-size: 22px !important;
	font-weight: 900 !important;
	color: #dc2626 !important;
	letter-spacing: -0.3px !important;
	display: block !important;
}

.total-vat-note {
	display: block;
	font-size: 11px;
	color: var(--text-muted);
	font-weight: normal;
	margin-top: 2px;
}

/* Big Checkout Button */
.wc-proceed-to-checkout {
	margin-top: auto !important;
	padding-top: 16px !important;
	width: 100% !important;
}

.btn-stc-checkout,
.wc-proceed-to-checkout .checkout-button,
a.checkout-button {
	height: 52px !important;
	width: 100% !important;
	border-radius: var(--radius-md) !important;
	background: linear-gradient(135deg, var(--stc-blue) 0%, var(--stc-blue-dark) 100%) !important;
	color: #ffffff !important;
	font-size: 15px !important;
	font-weight: 900 !important;
	letter-spacing: 0.5px !important;
	text-transform: uppercase !important;
	box-shadow: 0 6px 20px rgba(0, 82, 245, 0.4) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 10px !important;
	transition: all 0.25s ease !important;
	text-decoration: none !important;
	border: none !important;
	box-sizing: border-box !important;
}

.btn-stc-checkout:hover,
.wc-proceed-to-checkout .checkout-button:hover,
a.checkout-button:hover {
	transform: translateY(-2px) !important;
	box-shadow: 0 8px 26px rgba(0, 82, 245, 0.5) !important;
	background: linear-gradient(135deg, #0046de 0%, #002e99 100%) !important;
}

/* Checkout Page */
.woocommerce-checkout #customer_details {
	margin-bottom: 30px;
}

.woocommerce-checkout h3 {
	font-size: 16px;
	font-weight: 800;
	color: var(--stc-navy);
	margin-bottom: 16px;
	padding-bottom: 8px;
	border-bottom: 2px solid var(--stc-blue);
}

.woocommerce-billing-fields input[type="text"],
.woocommerce-billing-fields input[type="email"],
.woocommerce-billing-fields input[type="tel"],
.woocommerce-billing-fields select,
.woocommerce-billing-fields textarea,
.woocommerce-shipping-fields input,
.woocommerce-shipping-fields select,
.woocommerce-shipping-fields textarea {
	width: 100%;
	padding: 10px 14px;
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md);
	font-size: 13.5px;
	outline: none;
	transition: border-color 0.2s;
	box-sizing: border-box;
}

.woocommerce-billing-fields input:focus,
.woocommerce-billing-fields select:focus,
.woocommerce-billing-fields textarea:focus {
	border-color: var(--stc-blue);
	box-shadow: 0 0 0 3px rgba(0, 82, 245, 0.1);
}

#order_review_heading {
	font-size: 16px;
	font-weight: 800;
	color: var(--stc-navy);
	margin-top: 30px;
	margin-bottom: 16px;
}

#order_review {
	background: #f8fafc;
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md);
	padding: 20px;
}

#place_order {
	width: 100% !important;
	padding: 14px !important;
	font-size: 16px !important;
	margin-top: 16px !important;
}

/* ==========================================================================
   SHOWROOM PAGE STYLES
   ========================================================================== */
.showroom-header-intro {
	text-align: center;
	margin-bottom: 36px;
	padding: 24px;
	background: #ffffff;
	border-radius: var(--radius-lg);
	border: 1px solid var(--border-color);
	box-shadow: var(--shadow-sm);
}

.showroom-header-intro h1 {
	color: var(--stc-blue);
	font-size: 26px;
	font-weight: 800;
	margin: 0 0 8px;
}

.showroom-header-intro p {
	color: var(--text-muted);
	font-size: 14px;
	margin: 0;
}

.showroom-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
	gap: 20px;
	margin-bottom: 50px;
}

.showroom-card {
	background: #ffffff;
	border: 1px solid var(--border-color);
	border-radius: var(--radius-lg);
	padding: 20px;
	box-shadow: var(--shadow-sm);
	transition: all 0.25s;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.showroom-card:hover {
	border-color: var(--stc-blue);
	transform: translateY(-3px);
	box-shadow: var(--shadow-md);
}

.showroom-card h3 {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	color: var(--stc-navy);
}

.showroom-card .showroom-address {
	font-size: 13.5px;
	color: var(--text-body);
	display: flex;
	gap: 8px;
	line-height: 1.5;
}

.showroom-card .showroom-address i {
	color: var(--stc-blue);
	margin-top: 3px;
}

.showroom-card .showroom-meta {
	font-size: 12.5px;
	color: var(--text-muted);
	display: flex;
	flex-direction: column;
	gap: 4px;
	border-top: 1px dashed var(--border-color);
	padding-top: 10px;
	margin-top: 4px;
}

.showroom-card .showroom-phone {
	color: var(--stc-blue);
	font-weight: 700;
}

/* ==========================================================================
   MOBILE DESIGN SYSTEM & RESPONSIVE WORKBENCH (STC COMPUTER)
   Supports Screens: Desktop, Tablet (<= 991px), Mobile (<= 768px, <= 480px)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. BASE MOBILE ELEMENTS (Hidden on Desktop)
   -------------------------------------------------------------------------- */
.btn-mobile-menu-toggle {
	display: none;
}

.mobile-bottom-nav {
	display: none;
}

.mobile-nav-drawer {
	position: fixed;
	top: 0;
	left: 0;
	width: 325px;
	max-width: 88vw;
	height: 100vh;
	height: 100dvh;
	background: #ffffff;
	z-index: 999999;
	transform: translateX(-100%);
	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
	box-shadow: 6px 0 30px rgba(0, 0, 0, 0.2);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	touch-action: pan-y;
}

.mobile-nav-drawer.is-open {
	transform: translateX(0);
}

.mobile-drawer-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: rgba(15, 23, 42, 0.65);
	backdrop-filter: blur(3px);
	z-index: 999998;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease, visibility 0.25s ease;
}

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

body.mobile-drawer-open {
	overflow: hidden !important;
}

/* Drawer Internal Layout */
.mobile-drawer-header {
	padding: 14px 16px;
	background: var(--stc-navy);
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 2px solid var(--stc-blue);
	flex-shrink: 0;
}

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

.mobile-drawer-close {
	background: rgba(255, 255, 255, 0.12);
	border: none;
	color: #ffffff;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	cursor: pointer;
	transition: var(--transition);
}

.mobile-drawer-close:hover {
	background: #dc2626;
}

.mobile-drawer-body {
	flex: 1 1 0% !important;
	min-height: 0 !important;
	height: 100% !important;
	max-height: calc(100vh - 65px) !important;
	max-height: calc(100dvh - 65px) !important;
	overflow-y: auto !important;
	overflow-x: hidden !important;
	-webkit-overflow-scrolling: touch !important;
	overscroll-behavior: contain !important;
	touch-action: pan-y !important;
	padding: 14px 16px 90px !important;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* User Account Quick Link */
.mobile-drawer-user {
	background: #f8fafc;
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md);
	padding: 10px 14px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.drawer-user-info {
	display: flex;
	align-items: center;
	gap: 10px;
}

.drawer-avatar {
	font-size: 28px;
	color: var(--stc-blue);
}

.drawer-user-text {
	display: flex;
	flex-direction: column;
	font-size: 12px;
}

.drawer-user-text .user-hello {
	color: var(--text-muted);
	font-size: 11px;
}

.drawer-user-text strong {
	color: var(--stc-navy);
	font-size: 13px;
}

.btn-drawer-account {
	background: var(--stc-blue);
	color: #fff;
	padding: 6px 12px;
	border-radius: var(--radius-sm);
	font-weight: 700;
	font-size: 12px;
}

.drawer-auth-btn {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--stc-blue);
	font-weight: 700;
	font-size: 13px;
	width: 100%;
}

/* Quick Actions Grid */
.mobile-drawer-quick-actions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}

.drawer-quick-link {
	background: #ffffff;
	border: 1px solid var(--border-color);
	border-radius: var(--radius-sm);
	padding: 10px 8px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	font-size: 11px;
	font-weight: 800;
	color: var(--stc-navy);
	text-align: center;
	transition: var(--transition);
}

.drawer-quick-link i {
	font-size: 18px;
}

.drawer-quick-link.build-cta {
	background: #eff6ff;
	border-color: #bfdbfe;
	color: var(--stc-blue);
}

.drawer-quick-link.promo-cta {
	background: #fffbeb;
	border-color: #fde68a;
	color: #d97706;
}

.drawer-quick-link:hover {
	border-color: var(--stc-blue);
	color: var(--stc-blue);
}

/* Section Title */
.drawer-section-heading {
	font-size: 12px;
	font-weight: 900;
	color: var(--stc-navy);
	letter-spacing: 0.5px;
	padding-bottom: 6px;
	border-bottom: 2px solid var(--stc-blue);
	display: flex;
	align-items: center;
	gap: 6px;
}

/* Category Accordion */
.mobile-cat-accordion {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md);
	background: #ffffff;
}

.mobile-cat-item {
	border-bottom: 1px solid var(--border-color);
}

.mobile-cat-item:first-child,
.mobile-cat-item:first-child .mobile-cat-row {
	border-top-left-radius: var(--radius-md);
	border-top-right-radius: var(--radius-md);
}

.mobile-cat-item:last-child {
	border-bottom: none;
	border-bottom-left-radius: var(--radius-md);
	border-bottom-right-radius: var(--radius-md);
}

.mobile-cat-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.mobile-cat-link {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 11px 14px;
	flex: 1;
	font-size: 13px;
	font-weight: 700;
	color: var(--text-dark);
}

.mobile-cat-link .cat-icon {
	width: 20px;
	text-align: center;
	color: var(--stc-blue);
	font-size: 15px;
}

.mobile-accordion-toggle {
	background: none;
	border: none;
	padding: 10px 14px;
	color: var(--text-muted);
	font-size: 12px;
	cursor: pointer;
	transition: transform 0.2s ease;
}

.mobile-cat-item.is-expanded > .mobile-cat-row .mobile-accordion-toggle {
	transform: rotate(180deg);
	color: var(--stc-blue);
}

.mobile-subcat-list {
	background: #f8fafc;
	border-top: 1px solid var(--border-color);
	padding: 6px 0 6px 24px;
}

.mobile-subcat-item {
	border-bottom: 1px dashed rgba(203, 213, 225, 0.6);
}

.mobile-subcat-item:last-child {
	border-bottom: none;
}

.mobile-subcat-link {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 9px 12px;
	font-size: 12.5px;
	color: var(--text-body);
	font-weight: 600;
}

.mobile-subcat-link i {
	font-size: 12px;
	color: var(--text-muted);
}

.mobile-subcat-link:hover {
	color: var(--stc-blue);
}

/* Drawer Contact Box */
.mobile-drawer-contact {
	background: #f8fafc;
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md);
	padding: 12px 14px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: auto;
}

.drawer-contact-item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 12px;
}

.drawer-contact-item i {
	color: var(--stc-blue);
	font-size: 16px;
	margin-top: 2px;
}

.contact-details {
	display: flex;
	flex-direction: column;
}

.contact-lbl {
	color: var(--text-muted);
	font-size: 11px;
}

.contact-val {
	color: var(--stc-blue);
	font-weight: 800;
	font-size: 13.5px;
}

.contact-address {
	color: var(--text-dark);
	font-size: 11.5px;
	line-height: 1.4;
}

/* --------------------------------------------------------------------------
   2. MOBILE FLOATING BOTTOM NAVIGATION BAR
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
	body {
		padding-bottom: 64px !important;
	}

	.mobile-bottom-nav {
		display: flex !important;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 60px;
		background: #ffffff;
		border-top: 1px solid var(--border-color);
		box-shadow: 0 -3px 14px rgba(0, 0, 0, 0.08);
		z-index: 99990;
		align-items: center;
		justify-content: space-around;
	}

	.mobile-nav-tab {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		flex: 1;
		height: 100%;
		font-size: 10.5px;
		font-weight: 700;
		color: var(--text-muted);
		gap: 3px;
		transition: var(--transition);
		position: relative;
	}

	.mobile-nav-tab i {
		font-size: 18px;
	}

	.mobile-nav-tab.active,
	.mobile-nav-tab:hover {
		color: var(--stc-blue);
	}

	/* Raised Build PC Center Action */
	.mobile-nav-tab.highlight-build {
		position: relative;
	}

	.mobile-build-badge {
		width: 44px;
		height: 44px;
		border-radius: 50%;
		background: linear-gradient(135deg, #0052f5, #003ec7);
		color: #ffffff;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: -20px;
		box-shadow: 0 4px 14px rgba(0, 82, 245, 0.45);
		border: 3px solid #ffffff;
		transition: transform 0.2s ease;
	}

	.mobile-build-badge i {
		font-size: 18px;
	}

	.mobile-nav-tab.highlight-build:active .mobile-build-badge {
		transform: scale(0.92);
	}

	.mobile-nav-tab.highlight-build span {
		color: var(--stc-blue);
		font-weight: 800;
	}

	/* Cart Badge */
	.mobile-cart-badge {
		position: relative;
		display: inline-flex;
	}

	.mobile-cart-badge .cart-count {
		position: absolute;
		top: -6px;
		right: -10px;
		background: #dc2626;
		color: #fff;
		border-radius: var(--radius-full);
		font-size: 10px;
		font-weight: 900;
		padding: 1px 5px;
		line-height: 1.2;
		border: 1.5px solid #fff;
	}
}

/* --------------------------------------------------------------------------
   3. SITE HEADER & NAVIGATION ON TABLET & MOBILE (<= 991px)
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
	.container {
		padding: 0 12px;
		max-width: 100%;
	}

	/* Hide clutter */
	.stc-utility-bar {
		display: none !important;
	}

	.stc-main-nav {
		display: none !important;
	}

	.btn-pc-builder-cta {
		display: none !important;
	}

	.user-account-box {
		display: none !important;
	}

	.mini-cart-dropdown {
		display: none !important;
	}

	/* Top Banner */
	.stc-top-banner {
		padding: 6px 0;
		font-size: 11px;
	}

	.top-banner-content a {
		padding: 0;
		gap: 8px;
	}

	.top-banner-content .top-hotline {
		display: none;
	}

	.top-banner-content .top-text {
		font-size: 10.5px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		max-width: 250px;
	}

	/* Main Header */
	.stc-main-header {
		padding: 8px 0;
		position: sticky;
		top: 0;
		z-index: 1000;
		background: #ffffff;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
	}

	.main-header-container {
		display: grid;
		grid-template-columns: auto 1fr auto;
		grid-template-rows: auto auto;
		gap: 8px 12px;
		align-items: center;
	}

	.btn-mobile-menu-toggle {
		display: flex !important;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		background: #f1f5f9;
		border: 1px solid var(--border-color);
		border-radius: var(--radius-sm);
		font-size: 18px;
		color: var(--stc-navy);
		grid-column: 1;
		grid-row: 1;
		cursor: pointer;
	}

	.stc-logo {
		grid-column: 2;
		grid-row: 1;
		display: flex;
		align-items: center;
	}

	.stc-logo img {
		max-height: 38px;
		width: auto;
	}

	.stc-header-actions {
		grid-column: 3;
		grid-row: 1;
		display: flex;
		align-items: center;
		gap: 8px;
	}

	.cart-action-box .action-labels {
		display: none !important;
	}

	.cart-action-box .cart-btn {
		padding: 8px 10px;
		background: #f1f5f9;
		border: 1px solid var(--border-color);
		border-radius: var(--radius-sm);
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.cart-action-box .cart-icon-wrap {
		position: relative;
	}

	.cart-action-box .cart-count {
		position: absolute;
		top: -8px;
		right: -10px;
		background: #dc2626;
		color: #fff;
		border-radius: var(--radius-full);
		font-size: 10px;
		font-weight: 800;
		padding: 1px 5px;
	}

	/* Search Row */
	.stc-search-wrapper {
		grid-column: 1 / span 3;
		grid-row: 2;
		width: 100%;
		margin: 0;
	}

	.search-category-select {
		display: none !important;
	}

	.stc-search-form {
		width: 100%;
		display: flex;
		align-items: center;
		border: 1.5px solid var(--stc-blue);
		border-radius: 20px;
		background: #fff;
		overflow: hidden;
		height: 38px;
	}

	.stc-search-form input[type="text"] {
		flex: 1;
		padding: 8px 14px;
		border: none;
		outline: none;
		font-size: 13px;
	}

	.search-submit-btn {
		background: var(--stc-blue);
		color: #fff;
		border: none;
		padding: 0 16px;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.search-submit-btn span {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   4. HOMEPAGE RESPONSIVE STYLING (<= 991px & <= 768px)
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
	/* Hero Section */
	.home-hero-section {
		margin-bottom: 16px;
	}

	.hero-grid-layout {
		display: flex;
		flex-direction: column;
		gap: 10px;
	}

	.hero-mega-spacer {
		display: none !important;
	}

	.hero-slider-wrap {
		width: 100% !important;
		height: auto !important;
		max-height: none !important;
		padding-top: 0 !important;
	}

	.home-slider {
		border-radius: var(--radius-md) !important;
		overflow: hidden !important;
		width: 100% !important;
		height: auto !important;
		aspect-ratio: 16 / 8 !important;
		max-height: 250px !important;
	}

	.home-slider .slide,
	.home-slider .slide a {
		width: 100% !important;
		height: 100% !important;
	}

	.home-slider .slide img {
		width: 100% !important;
		height: 100% !important;
		aspect-ratio: 16 / 8 !important;
		object-fit: cover !important;
		object-position: center !important;
	}

	.hero-sub-banners {
		display: grid !important;
		grid-template-columns: 1fr 1fr !important;
		gap: 8px !important;
		height: auto !important;
		max-height: none !important;
		padding-top: 0 !important;
	}

	.sub-banner-card {
		height: auto !important;
		max-height: none !important;
		aspect-ratio: 16 / 10 !important;
		overflow: hidden !important;
		border-radius: var(--radius-md) !important;
	}

	.sub-banner-card img {
		width: 100% !important;
		height: 100% !important;
		aspect-ratio: 16 / 10 !important;
		object-fit: cover !important;
		object-position: center !important;
	}

	/* Trust Pills */
	.home-trust-bar {
		margin-bottom: 20px;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.trust-pill-list {
		display: flex;
		flex-wrap: nowrap;
		gap: 8px;
		padding-bottom: 4px;
	}

	.trust-pill {
		flex-shrink: 0;
		padding: 8px 12px;
		font-size: 11.5px;
	}

	/* Flash Sale Mobile Optimization: 1 Single Row Horizontal Swipe */
	.home-flash-sale-section {
		padding: 12px 10px 16px;
		border-radius: var(--radius-lg);
		margin-bottom: 20px;
		overflow: hidden;
	}

	.flash-sale-header {
		display: grid !important;
		grid-template-columns: 1fr auto !important;
		align-items: center !important;
		row-gap: 8px !important;
		column-gap: 10px !important;
		margin-bottom: 12px !important;
		position: static !important;
	}

	.flash-title-wrap {
		grid-column: 1 / 2 !important;
		grid-row: 1 / 2 !important;
		display: flex !important;
		align-items: center !important;
		gap: 6px !important;
		flex-wrap: wrap !important;
		padding-right: 0 !important;
	}

	.flash-title {
		font-size: 13.5px !important;
		white-space: normal !important;
		line-height: 1.3 !important;
	}

	.flash-badge {
		font-size: 10.5px !important;
		padding: 3px 7px !important;
	}

	.flash-sale-header .view-all-link {
		position: static !important;
		grid-column: 2 / 3 !important;
		grid-row: 1 / 2 !important;
		font-size: 12px !important;
		font-weight: 700 !important;
		white-space: nowrap !important;
		align-self: center !important;
	}

	.flash-countdown-wrap {
		grid-column: 1 / 3 !important;
		grid-row: 2 / 3 !important;
		display: flex !important;
		align-items: center !important;
		gap: 6px !important;
		font-size: 11.5px !important;
		margin: 0 !important;
	}

	.timer-box {
		min-width: 22px !important;
		padding: 2px 4px !important;
		font-size: 12px !important;
	}

	/* Flash Sale: ONLY 1 Row, Horizontal Touch Swipe (At least 2 products per row) */
	.products-carousel-grid {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		overflow-x: auto !important;
		overflow-y: hidden !important;
		scroll-snap-type: x mandatory !important;
		-webkit-overflow-scrolling: touch !important;
		gap: 8px !important;
		padding: 2px 2px 10px 2px !important;
		margin: 0 !important;
		scrollbar-width: none !important;
	}
	.products-carousel-grid::-webkit-scrollbar {
		display: none !important;
	}

	/* Display at least 2 products per row */
	.products-carousel-grid .stc-product-card {
		flex: 0 0 calc((100% - 8px) / 2) !important;
		max-width: calc(50% - 4px) !important;
		min-width: 135px !important;
		scroll-snap-align: start !important;
		padding: 8px 8px 10px !important;
		border-radius: 8px !important;
		box-sizing: border-box !important;
		background: #ffffff !important;
	}

	.home-flash-sale-section .thumb-wrapper {
		height: 120px !important;
		max-height: 120px !important;
		min-height: 120px !important;
		padding: 4px !important;
	}

	.home-flash-sale-section .thumb-wrapper .product-img,
	.home-category-showcase .thumb-wrapper .product-img {
		max-height: 112px !important;
		object-fit: contain !important;
	}

	.home-flash-sale-section .card-brand,
	.home-category-showcase .card-brand {
		font-size: 10px !important;
		margin-bottom: 2px !important;
	}

	.home-flash-sale-section .card-title,
	.home-category-showcase .card-title {
		font-size: 11.5px !important;
		line-height: 1.3 !important;
		min-height: 30px !important;
		max-height: 30px !important;
		margin-bottom: 4px !important;
		-webkit-line-clamp: 2 !important;
		font-weight: 600 !important;
	}

	.home-flash-sale-section .card-specs-chip,
	.home-category-showcase .card-specs-chip {
		display: none !important;
	}

	.home-flash-sale-section .card-pricing,
	.home-category-showcase .card-pricing {
		display: flex !important;
		flex-wrap: wrap !important;
		align-items: baseline !important;
		gap: 4px !important;
		margin-bottom: 4px !important;
	}

	.home-flash-sale-section .current-price,
	.home-category-showcase .current-price {
		font-size: 13.5px !important;
		font-weight: 800 !important;
	}

	.home-flash-sale-section .original-price,
	.home-category-showcase .original-price {
		font-size: 10.5px !important;
	}

	.home-flash-sale-section .card-gift-box,
	.home-category-showcase .card-gift-box {
		font-size: 9.5px !important;
		padding: 2px 4px !important;
		margin-bottom: 4px !important;
		white-space: nowrap !important;
		overflow: hidden !important;
		text-overflow: ellipsis !important;
	}

	.home-flash-sale-section .card-meta-bar,
	.home-category-showcase .card-meta-bar {
		font-size: 9.5px !important;
		margin-bottom: 6px !important;
	}

	.home-flash-sale-section .card-actions,
	.home-category-showcase .card-actions {
		display: flex !important;
		gap: 4px !important;
		width: 100% !important;
		margin-top: auto !important;
	}

	.home-flash-sale-section .card-actions .btn-add-cart-ajax,
	.home-category-showcase .card-actions .btn-add-cart-ajax {
		flex: 0 0 32px !important;
		width: 32px !important;
		min-width: 32px !important;
		height: 28px !important;
		min-height: 28px !important;
		padding: 0 !important;
		border-radius: 4px !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
	}

	.home-flash-sale-section .card-actions .btn-add-cart-ajax .btn-cart-text,
	.home-category-showcase .card-actions .btn-add-cart-ajax .btn-cart-text {
		display: none !important;
	}

	.home-flash-sale-section .card-actions .btn-buy-now,
	.home-category-showcase .card-actions .btn-buy-now {
		flex: 1 !important;
		height: 28px !important;
		min-height: 28px !important;
		line-height: 28px !important;
		font-size: 11px !important;
		font-weight: 700 !important;
		padding: 0 4px !important;
		border-radius: 4px !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
	}

	/* Other Catalog Grids (Shop, Search, Archive) remain standard 2 columns on mobile */
	.products-grid {
		display: grid !important;
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 8px !important;
	}

	/* Product Card Mobile Optimization */
	.product-card,
	.product-grid-item {
		padding: 10px !important;
		border-radius: var(--radius-md) !important;
	}

	.product-card .product-title,
	.product-grid-item .product-title {
		font-size: 12.5px !important;
		line-height: 1.35 !important;
		height: 34px !important;
		margin-bottom: 6px !important;
	}

	.product-card .price-current,
	.product-grid-item .price-current {
		font-size: 15px !important;
	}

	/* Home Category Showcases Mobile Layout (Matching Flash Sale: 1 Row Swipe, 2 Products Visible) */
	.home-category-showcase {
		margin-bottom: 20px !important;
		padding: 14px 12px 16px !important;
		border-radius: 12px !important;
	}

	.home-category-showcase .showcase-header {
		display: flex !important;
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 8px !important;
		margin-bottom: 12px !important;
		position: static !important;
	}

	.home-category-showcase .showcase-header-top {
		display: flex !important;
		align-items: center !important;
		justify-content: space-between !important;
		width: 100% !important;
		gap: 10px !important;
	}

	.home-category-showcase .showcase-title-wrap {
		padding-right: 0 !important;
		display: flex !important;
		align-items: center !important;
		gap: 7px !important;
		flex: 1 !important;
		min-width: 0 !important;
	}

	.home-category-showcase .showcase-title {
		font-size: 13.5px !important;
		line-height: 1.3 !important;
		margin: 0 !important;
		word-break: break-word !important;
	}

	.home-category-showcase .showcase-icon {
		font-size: 15px !important;
		flex-shrink: 0 !important;
	}

	.home-category-showcase .showcase-view-all {
		position: static !important;
		flex-shrink: 0 !important;
		display: inline-flex !important;
		align-items: center !important;
		gap: 3px !important;
		font-size: 12px !important;
		font-weight: 700 !important;
		color: var(--stc-navy) !important;
		white-space: nowrap !important;
		padding: 2px 0 !important;
	}

	.home-category-showcase .showcase-view-all .view-all-full {
		display: none !important;
	}

	.home-category-showcase .showcase-view-all .view-all-short {
		display: inline !important;
	}

	.home-category-showcase .showcase-view-all:hover {
		color: var(--stc-blue) !important;
	}

	.home-category-showcase .showcase-tabs {
		width: 100% !important;
		display: flex !important;
		flex-wrap: nowrap !important;
		overflow-x: auto !important;
		-webkit-overflow-scrolling: touch !important;
		gap: 6px !important;
		padding-bottom: 4px !important;
		scrollbar-width: none !important;
	}

	.home-category-showcase .showcase-tabs::-webkit-scrollbar {
		display: none !important;
	}

	.home-category-showcase .showcase-tabs .tab-link {
		flex-shrink: 0 !important;
		padding: 4px 10px !important;
		font-size: 11.5px !important;
		border-radius: 14px !important;
	}

	/* Show at least 2 products in 1 row, horizontal touch swipe */
	.home-category-showcase .products-grid {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		overflow-x: auto !important;
		overflow-y: hidden !important;
		scroll-snap-type: x mandatory !important;
		-webkit-overflow-scrolling: touch !important;
		gap: 8px !important;
		padding: 2px 2px 10px 2px !important;
		margin: 0 !important;
		scrollbar-width: none !important;
	}

	.home-category-showcase .products-grid::-webkit-scrollbar {
		display: none !important;
	}

	.home-category-showcase .products-grid .stc-product-card {
		flex: 0 0 calc((100% - 8px) / 2) !important;
		max-width: calc(50% - 4px) !important;
		min-width: 135px !important;
		scroll-snap-align: start !important;
		padding: 8px 8px 10px !important;
		border-radius: 8px !important;
		box-sizing: border-box !important;
		background: #ffffff !important;
	}

	/* Footer */
	.footer-trust-banner .trust-grid {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 12px;
	}

	.footer-columns-grid {
		grid-template-columns: 1fr !important;
		gap: 24px;
	}

	.footer-bottom-inner {
		text-align: center;
		padding-bottom: 20px;
	}
}

/* --------------------------------------------------------------------------
   5. ARCHIVE & PRODUCT DETAIL RESPONSIVE STYLING (<= 991px)
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
	/* Archive Shop */
	.stc-shop-layout {
		display: flex;
		flex-direction: column;
		gap: 16px;
	}

	.stc-shop-sidebar {
		width: 100%;
	}

	.archive-header-banner {
		padding: 16px;
		margin-bottom: 16px;
	}

	.archive-main-title {
		font-size: 20px;
	}

	/* Single Product Page */
	.product-detail-grid {
		display: flex !important;
		flex-direction: column !important;
		gap: 18px !important;
	}

	.single-product-title {
		font-size: 18px !important;
	}

	.product-col-gallery,
	.product-col-center,
	.product-col-sidebar {
		width: 100% !important;
	}

	.product-actions-group {
		display: flex;
		flex-direction: column;
		gap: 10px;
	}

	.btn-buy-now,
	.btn-add-cart-single {
		width: 100% !important;
		height: 46px !important;
		justify-content: center;
	}

	/* Cart & Checkout Mobile Optimization */
	.woocommerce-cart .woocommerce,
	.woocommerce-checkout .woocommerce {
		padding: 14px !important;
	}

	.woocommerce-cart table.shop_table_responsive thead {
		display: none !important;
	}

	.woocommerce-cart table.shop_table_responsive tbody tr:not(.cart-subtotal):not(.order-total) {
		display: flex !important;
		flex-direction: column !important;
		background: #ffffff !important;
		border: 1px solid var(--border-color) !important;
		border-radius: var(--radius-md) !important;
		margin-bottom: 14px !important;
		padding: 14px !important;
		position: relative !important;
	}

	.woocommerce-cart table.shop_table_responsive tbody tr td {
		display: flex !important;
		justify-content: space-between !important;
		align-items: center !important;
		border: none !important;
		padding: 8px 0 !important;
		font-size: 13px !important;
	}

	.woocommerce-cart table.shop_table_responsive tbody tr td::before {
		content: attr(data-title);
		font-weight: 700;
		color: var(--text-muted);
		font-size: 12px;
	}

	.woocommerce-cart table.shop_table_responsive tbody tr td.product-remove {
		position: absolute !important;
		top: 10px !important;
		right: 10px !important;
		padding: 0 !important;
	}

	.woocommerce-cart table.shop_table_responsive tbody tr td.product-remove::before {
		display: none !important;
	}

	.woocommerce-cart table.shop_table_responsive tbody tr td.product-thumbnail {
		justify-content: center !important;
		padding-bottom: 12px !important;
		border-bottom: 1px dashed var(--border-color) !important;
	}

	.woocommerce-cart table.shop_table_responsive tbody tr td.product-thumbnail::before {
		display: none !important;
	}

	.woocommerce-cart table.shop_table_responsive tbody tr td.product-thumbnail img {
		width: 70px !important;
		height: 70px !important;
	}

	.woocommerce-cart table.shop_table_responsive tbody tr td.actions {
		display: flex !important;
		flex-direction: column !important;
		gap: 10px !important;
		padding-top: 12px !important;
	}

	.woocommerce-cart table.shop_table_responsive tbody tr td.actions::before {
		display: none !important;
	}

	.woocommerce-cart table.shop_table_responsive tbody tr td.actions .coupon {
		width: 100% !important;
		display: flex !important;
		gap: 8px !important;
	}

	.woocommerce-cart table.shop_table_responsive tbody tr td.actions .coupon input {
		flex: 1 !important;
		width: auto !important;
	}

	.woocommerce-cart table.shop_table_responsive tbody tr td.actions button[name="update_cart"] {
		width: 100% !important;
	}

	.stc-cart-collaterals-grid {
		grid-template-columns: 1fr !important;
		margin-top: 20px !important;
	}
}

/* ==========================================================================
   6. ADVANCED PC BUILDER WORKBENCH - DEDICATED MOBILE INTERFACE
   Breakpoints: <= 768px (Mobile & Phablet), <= 480px (Compact Mobile)
   ========================================================================== */
@media (max-width: 768px) {
	.stc-builder-container {
		margin-bottom: 20px;
		padding: 0;
	}

	/* Top Header Bar */
	.builder-header-bar {
		flex-direction: column;
		align-items: stretch;
		padding: 14px 12px;
		gap: 12px;
		border-radius: var(--radius-md);
	}

	.builder-header-left {
		text-align: center;
	}

	.builder-title {
		font-size: 17px;
		margin-bottom: 4px;
	}

	.builder-desc {
		font-size: 12px;
		line-height: 1.4;
	}

	.builder-header-right {
		flex-direction: column;
		width: 100%;
		gap: 10px;
	}

	.builder-price-box {
		width: 100%;
		align-items: center;
		justify-content: center;
		background: #f8fafc;
		border: 1.5px solid #e2e8f0;
		padding: 10px;
		border-radius: var(--radius-md);
	}

	.price-label {
		font-size: 11px;
	}

	.price-value {
		font-size: 22px;
	}

	/* Top Action Buttons Grid */
	.builder-actions-top {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 8px;
		width: 100%;
	}

	#btn-add-all-cart {
		grid-column: 1 / span 2;
		height: 42px;
		justify-content: center;
		font-size: 13.5px;
	}

	.builder-actions-top .btn-builder-secondary,
	.builder-actions-top .btn-builder-danger {
		justify-content: center;
		padding: 8px 6px;
		font-size: 12px;
		height: 38px;
	}

	/* Compatibility Alert Box */
	.builder-compat-status-box {
		flex-direction: column;
		text-align: center;
		padding: 12px;
		gap: 6px;
	}

	.compat-status-content {
		text-align: center;
	}

	.compat-status-wattage {
		margin-top: 4px;
		font-size: 12px;
	}

	.builder-warning-alert {
		font-size: 12px;
		padding: 10px 12px;
	}

	/* Component Rows List */
	.builder-rows-list {
		gap: 10px;
	}

	.builder-row {
		flex-direction: column;
		align-items: stretch;
		padding: 12px;
		gap: 10px;
		border-radius: var(--radius-md);
		position: relative;
	}

	.row-info {
		width: 100%;
		display: flex;
		align-items: center;
		gap: 10px;
	}

	.row-num {
		width: 22px;
		height: 22px;
		font-size: 11px;
	}

	.row-icon {
		width: 32px;
		height: 32px;
		font-size: 14px;
	}

	.row-name {
		flex: 1;
	}

	.row-name strong {
		font-size: 13px;
	}

	.row-hint {
		font-size: 11px;
	}

	/* Empty State: Choose Part Button */
	.row-selection-empty {
		width: 100%;
	}

	.btn-choose-part {
		width: 100%;
		height: 42px;
		justify-content: center;
		font-size: 13px;
		font-weight: 700;
	}

	/* Filled State: Selected Part */
	.row-selection-filled {
		display: flex;
		flex-direction: column;
		gap: 10px;
		width: 100%;
		background: #ffffff;
		border: 1px solid var(--border-color);
		border-radius: var(--radius-sm);
		padding: 10px;
	}

	.row-selection-filled .part-thumb {
		display: flex;
		align-items: center;
		gap: 10px;
	}

	.row-selection-filled .part-thumb img {
		width: 52px;
		height: 52px;
		border-radius: var(--radius-sm);
		object-fit: contain;
	}

	.row-selection-filled .part-details {
		width: 100%;
	}

	.part-title {
		font-size: 12.5px;
		line-height: 1.35;
	}

	.part-meta {
		font-size: 11px;
		gap: 10px;
		margin-top: 4px;
	}

	/* Lower Row inside Filled State */
	.filled-bottom-row,
	.row-selection-filled {
		position: relative;
	}

	.part-qty-box {
		align-self: flex-start;
	}

	.part-pricing {
		width: auto;
		text-align: left;
		display: flex;
		flex-direction: column;
	}

	.unit-price {
		font-size: 11px;
	}

	.total-row-price {
		font-size: 15px;
	}

	/* Mobile Flex Controls for Part Row */
	.builder-row.has-product .row-selection-filled {
		display: grid;
		grid-template-columns: 52px 1fr;
		grid-template-rows: auto auto;
		gap: 8px 10px;
	}

	.builder-row.has-product .part-thumb {
		grid-column: 1;
		grid-row: 1;
	}

	.builder-row.has-product .part-details {
		grid-column: 2;
		grid-row: 1;
	}

	.builder-row.has-product .part-controls-mobile-wrap {
		grid-column: 1 / span 2;
		grid-row: 2;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-top: 8px;
		border-top: 1px dashed var(--border-color);
	}

	/* Fallback if controls aren't wrapped */
	.part-actions {
		display: flex;
		gap: 6px;
	}

	.btn-change-part,
	.btn-remove-part {
		width: 36px;
		height: 36px;
		font-size: 14px;
	}

	/* Sticky Bottom Summary Bar */
	.builder-bottom-summary {
		position: sticky;
		bottom: 60px; /* Above mobile bottom nav */
		z-index: 999;
		flex-direction: column;
		align-items: stretch;
		padding: 12px 14px;
		gap: 10px;
		border-radius: var(--radius-md) var(--radius-md) 0 0;
		background: rgba(255, 255, 255, 0.98);
		backdrop-filter: blur(8px);
		box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.14);
		border: 2px solid var(--stc-blue);
		margin-top: 12px;
	}

	.summary-left {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 13px;
	}

	.summary-right {
		flex-direction: column;
		width: 100%;
		gap: 8px;
	}

	.summary-total-label {
		display: none;
	}

	.summary-total-val {
		font-size: 22px;
		text-align: right;
	}

	#btn-add-all-cart-bottom {
		width: 100%;
		height: 44px;
		justify-content: center;
		font-size: 14px;
		order: 1;
	}

	.btn-print-build-bottom,
	.btn-export-image-bottom,
	.btn-export-excel-bottom {
		font-size: 11.5px;
		padding: 7px 6px;
		justify-content: center;
		flex: 1;
	}

	.builder-bottom-summary .summary-actions-mobile-row {
		display: flex;
		gap: 6px;
		width: 100%;
		order: 2;
	}

	/* -----------------------------------------------------------------------
	   Component Picker Modal on Mobile (Full Screen Experience)
	   ----------------------------------------------------------------------- */
	.builder-modal-content {
		position: fixed !important;
		top: 0 !important;
		left: 0 !important;
		width: 100vw !important;
		height: 100vh !important;
		max-width: 100vw !important;
		max-height: 100vh !important;
		border-radius: 0 !important;
		transform: none !important;
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}

	.modal-header {
		padding: 12px 14px;
		flex-shrink: 0;
	}

	.modal-title {
		font-size: 15px;
	}

	.modal-close {
		font-size: 26px;
		padding: 4px;
	}

	.modal-compat-notice-bar {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
		padding: 10px 14px;
	}

	.modal-toolbar {
		padding: 10px 12px;
		gap: 8px;
		flex-direction: column;
		align-items: stretch;
		flex-shrink: 0;
	}

	.modal-search {
		width: 100%;
		min-width: 100%;
	}

	.modal-search input {
		height: 38px;
		font-size: 13px;
	}

	.modal-filter-brands {
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		gap: 6px;
		padding: 4px 0;
	}

	.modal-brand-tag {
		flex-shrink: 0;
		padding: 5px 10px;
		font-size: 11.5px;
	}

	.modal-sort {
		width: 100%;
	}

	.modal-sort select {
		width: 100%;
		height: 36px;
	}

	.modal-body {
		padding: 10px;
		flex: 1;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	.modal-products-grid {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 8px !important;
	}

	.modal-product-card {
		padding: 8px;
	}

	.modal-product-card .card-thumb img {
		height: 110px;
		max-height: 110px;
	}

	.modal-product-card .card-title {
		font-size: 12px;
		height: 32px;
		line-height: 1.35;
	}

	.modal-product-card .card-specs {
		font-size: 10.5px;
		display: none;
	}

	.modal-product-card .card-price {
		font-size: 14px;
	}

	.modal-product-card .btn-select-product {
		height: 34px;
		font-size: 12px;
		padding: 4px 8px;
	}

	/* Quotation Modal */
	.quotation-modal-box {
		position: fixed !important;
		top: 0 !important;
		left: 0 !important;
		width: 100vw !important;
		height: 100vh !important;
		max-width: 100vw !important;
		max-height: 100vh !important;
		border-radius: 0 !important;
		transform: none !important;
		overflow-y: auto;
	}

	.quote-form-grid {
		grid-template-columns: 1fr !important;
		gap: 10px;
	}

	.quote-form-group input {
		font-size: 16px !important; /* Prevents iOS auto-zoom on input */
		height: 42px;
	}

	.quote-modal-actions {
		display: grid !important;
		grid-template-columns: 1fr !important;
		gap: 8px !important;
	}

	.btn-quote-action {
		width: 100%;
		height: 42px;
		justify-content: center;
	}
}

@media (max-width: 480px) {
	.modal-products-grid {
		grid-template-columns: 1fr !important;
	}

	.modal-product-card {
		flex-direction: row;
		gap: 10px;
		align-items: center;
	}

	.modal-product-card .card-thumb {
		width: 90px;
		flex-shrink: 0;
	}

	.modal-product-card .card-thumb img {
		height: 80px;
		max-height: 80px;
	}

	.modal-product-card .card-body {
		flex: 1;
		min-width: 0;
	}
}

/* ==========================================================================
   EMPTY CART STATE (STC COMPUTER LUXURY REDESIGN)
   ========================================================================== */
.stc-empty-cart-wrapper {
	max-width: 960px;
	margin: 20px auto 40px;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.empty-cart-card {
	background: #ffffff;
	border: 1px solid var(--border-color);
	border-radius: var(--radius-lg);
	padding: 50px 30px;
	text-align: center;
	box-shadow: var(--shadow-sm);
	display: flex;
	flex-direction: column;
	align-items: center;
}

.empty-cart-icon-circle {
	width: 86px;
	height: 86px;
	border-radius: 50%;
	background: #eff6ff;
	color: var(--stc-blue);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 38px;
	margin-bottom: 20px;
	border: 2px dashed #bfdbfe;
}

.empty-cart-title {
	font-size: 22px;
	font-weight: 900;
	color: var(--stc-navy);
	margin: 0 0 10px;
}

.empty-cart-desc {
	font-size: 14px;
	color: var(--text-muted);
	max-width: 520px;
	margin: 0 0 26px;
	line-height: 1.5;
}

.empty-cart-cta-group {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	justify-content: center;
}

.btn-empty-shop-now,
.btn-empty-build-pc {
	padding: 12px 26px;
	border-radius: var(--radius-md);
	font-weight: 800;
	font-size: 13.5px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	transition: all 0.25s ease;
	text-decoration: none;
}

.btn-empty-shop-now {
	background: linear-gradient(135deg, var(--stc-blue) 0%, var(--stc-blue-dark) 100%);
	color: #ffffff;
	box-shadow: 0 4px 14px rgba(0, 82, 245, 0.35);
}

.btn-empty-shop-now:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(0, 82, 245, 0.45);
}

.btn-empty-build-pc {
	background: #ffffff;
	color: var(--stc-navy);
	border: 1.5px solid var(--border-color);
}

.btn-empty-build-pc:hover {
	border-color: var(--stc-blue);
	color: var(--stc-blue);
	background: #f8fafc;
	transform: translateY(-2px);
}

.empty-cart-trust-row {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
}

@media (max-width: 900px) {
	.empty-cart-trust-row {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px) {
	.empty-cart-trust-row {
		grid-template-columns: 1fr;
	}
}

.trust-mini-card {
	background: #ffffff;
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md);
	padding: 14px 16px;
	display: flex;
	align-items: center;
	gap: 12px;
	box-shadow: var(--shadow-sm);
}

.trust-mini-card i {
	font-size: 24px;
	flex-shrink: 0;
}

.trust-mini-card div {
	display: flex;
	flex-direction: column;
	font-size: 12px;
	line-height: 1.35;
}

.trust-mini-card strong {
	color: var(--stc-navy);
	font-size: 13px;
}

.trust-mini-card span {
	color: var(--text-muted);
}

/* ==========================================================================
   LINH KIỆN MÁY TÍNH HUB PAGE (8 CATEGORIES)
   ========================================================================== */

.linh-kien-breadcrumb-wrap {
	background: #ffffff;
	border-bottom: 1px solid var(--border-color);
	margin-bottom: 16px;
}

.linh-kien-page-wrapper {
	padding-bottom: 50px;
}

/* Hero Banner */
.linh-kien-hero-banner {
	background: linear-gradient(135deg, #0e1e3e 0%, #152952 45%, #0052f5 100%);
	border-radius: var(--radius-lg);
	color: #ffffff;
	padding: 28px 32px;
	margin-bottom: 24px;
	box-shadow: 0 8px 24px rgba(0, 82, 245, 0.18);
	position: relative;
	overflow: hidden;
}

.linh-kien-hero-banner::before {
	content: '';
	position: absolute;
	top: -50px;
	right: -50px;
	width: 250px;
	height: 250px;
	background: radial-gradient(circle, rgba(255, 212, 0, 0.2) 0%, rgba(255, 212, 0, 0) 70%);
	pointer-events: none;
}

.hero-banner-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
	position: relative;
	z-index: 1;
}

.linh-kien-hero-banner .hero-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: rgba(255, 255, 255, 0.15);
	backdrop-filter: blur(4px);
	padding: 4px 12px;
	border-radius: 20px;
	font-size: 12px;
	font-weight: 700;
	color: #ffd400;
	margin-bottom: 10px;
	text-transform: uppercase;
	letter-spacing: -0.01em;
}

.hero-banner-title {
	font-family: var(--stc-font);
	font-size: 26px;
	font-weight: 700;
	color: #ffffff;
	margin: 0 0 10px 0;
	letter-spacing: -0.02em;
}

.hero-banner-desc {
	font-size: 14px;
	line-height: 1.6;
	color: #cbd5e1;
	max-width: 650px;
	margin: 0 0 16px 0;
}

.hero-features-list {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

.hero-features-list .feature-item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 500;
	background: rgba(255, 255, 255, 0.1);
	padding: 6px 12px;
	border-radius: var(--radius-sm);
	border: 1px solid rgba(255, 255, 255, 0.15);
}

.hero-features-list .feature-item i {
	color: #ffd400;
}

.hero-banner-action {
	flex-shrink: 0;
}

.hero-cta-box {
	background: rgba(14, 30, 62, 0.5);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: var(--radius-md);
	padding: 18px 20px;
	text-align: center;
	max-width: 280px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}

.hero-cta-box .cta-icon {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #ffd400;
	color: #0e1e3e;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
}

.hero-cta-box .cta-text strong {
	display: block;
	font-size: 14px;
	color: #ffffff;
	margin-bottom: 2px;
}

.hero-cta-box .cta-text span {
	display: block;
	font-size: 11.5px;
	color: #e2e8f0;
	line-height: 1.4;
}

.btn-hero-build-pc {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: #ffd400;
	color: #0e1e3e;
	font-weight: 700;
	font-size: 13px;
	padding: 10px 18px;
	border-radius: 6px;
	text-transform: uppercase;
	box-shadow: 0 4px 12px rgba(255, 212, 0, 0.35);
	transition: var(--transition);
	width: 100%;
}

.btn-hero-build-pc:hover {
	background: #ffffff;
	color: #0052f5;
	transform: translateY(-2px);
}

/* 2-Column Layout */
.linh-kien-layout {
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: 24px;
	align-items: start;
}

/* Sticky Sidebar */
.linh-kien-sidebar {
	position: sticky;
	top: 80px;
}

.linh-kien-sidebar-inner {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

/* CARD DANH MỤC CHI TIẾT (EXACT MATCH SCREENSHOT) */
.linh-kien-cats-card {
	background: #ffffff;
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
}

.cats-card-header {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 18px;
	background: #ffffff;
	border-left: 4px solid var(--stc-blue);
	border-bottom: 1px solid #f1f5f9;
}

.cats-card-header .header-icon {
	font-size: 16px;
	color: var(--stc-blue);
}

.cats-card-header .header-title {
	font-family: var(--stc-font);
	font-size: 14px;
	font-weight: 700;
	color: var(--stc-navy);
	margin: 0;
	text-transform: uppercase;
	letter-spacing: -0.01em;
}

.linh-kien-cats-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cat-nav-item {
	border-bottom: 1px solid #f1f5f9;
	transition: var(--transition);
}

.cat-nav-item:last-child {
	border-bottom: none;
}

.cat-nav-link {
	display: flex;
	align-items: center;
	padding: 12px 16px;
	color: #2d3748;
	font-size: 13.5px;
	font-weight: 600;
	text-decoration: none;
	transition: var(--transition);
	position: relative;
}

.cat-nav-icon {
	width: 26px;
	font-size: 15px;
	color: #64748b;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	transition: var(--transition);
	flex-shrink: 0;
}

.cat-nav-title {
	flex: 1;
	line-height: 1.35;
	padding-right: 8px;
}

.cat-nav-count {
	font-size: 11px;
	color: var(--text-muted);
	background: #f1f5f9;
	padding: 2px 7px;
	border-radius: 10px;
	margin-right: 8px;
	font-weight: 600;
	transition: var(--transition);
}

.cat-nav-arrow {
	font-size: 12px;
	color: #cbd5e1;
	transition: transform 0.2s ease, color 0.2s ease;
	flex-shrink: 0;
}

/* Hover State */
.cat-nav-item:hover .cat-nav-link {
	background: #f0f6ff;
	color: var(--stc-blue);
}

.cat-nav-item:hover .cat-nav-icon {
	color: var(--stc-blue);
}

.cat-nav-item:hover .cat-nav-count {
	background: var(--stc-blue);
	color: #ffffff;
}

.cat-nav-item:hover .cat-nav-arrow {
	color: var(--stc-blue);
	transform: translateX(3px);
}

/* Active State */
.cat-nav-item.active {
	background: #edf4ff;
	border-left: 3px solid var(--stc-blue);
}

.cat-nav-item.active .cat-nav-link {
	color: var(--stc-blue);
	font-weight: 700;
}

.cat-nav-item.active .cat-nav-icon {
	color: var(--stc-blue);
}

.cat-nav-item.active .cat-nav-count {
	background: var(--stc-blue);
	color: #ffffff;
}

.cat-nav-item.active .cat-nav-arrow {
	color: var(--stc-blue);
}

/* Sidebar Support Widget */
.linh-kien-support-widget {
	background: #ffffff;
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md);
	padding: 18px;
	box-shadow: var(--shadow-sm);
}

.support-widget-header {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
}

.support-widget-header i {
	color: #16a34a;
	font-size: 18px;
}

.support-widget-header h4 {
	font-size: 14px;
	font-weight: 700;
	color: var(--stc-navy);
	margin: 0;
}

.support-widget-desc {
	font-size: 12.5px;
	color: var(--text-muted);
	line-height: 1.45;
	margin: 0 0 14px 0;
}

.support-hotline-btn {
	display: flex;
	align-items: center;
	gap: 12px;
	background: #f0fdf4;
	border: 1px solid #bbf7d0;
	border-radius: var(--radius-sm);
	padding: 10px 12px;
}

.support-hotline-btn i {
	font-size: 20px;
	color: #16a34a;
}

.support-hotline-btn .hotline-label {
	display: block;
	font-size: 11px;
	color: #64748b;
}

.support-hotline-btn .hotline-number {
	display: block;
	font-size: 15px;
	font-weight: 800;
	color: #16a34a;
}

/* Sidebar Mini Builder Card */
.linh-kien-builder-mini-card {
	background: linear-gradient(135deg, #0e1e3e 0%, #173266 100%);
	border-radius: var(--radius-md);
	padding: 20px;
	color: #ffffff;
	text-align: center;
	box-shadow: var(--shadow-sm);
}

.mini-card-icon {
	width: 44px;
	height: 44px;
	background: rgba(255, 255, 255, 0.12);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 10px auto;
	color: #ffd400;
	font-size: 20px;
}

.linh-kien-builder-mini-card h5 {
	font-size: 14px;
	font-weight: 700;
	margin: 0 0 6px 0;
}

.linh-kien-builder-mini-card p {
	font-size: 12px;
	color: #cbd5e1;
	line-height: 1.45;
	margin: 0 0 14px 0;
}

.btn-mini-build {
	display: inline-block;
	background: #ffd400;
	color: #0e1e3e;
	font-weight: 700;
	font-size: 12.5px;
	padding: 8px 16px;
	border-radius: 6px;
	transition: var(--transition);
}

.btn-mini-build:hover {
	background: #ffffff;
	color: #0052f5;
}

/* Main Area - Quick Category Grid (8 Cards) */
.linh-kien-quick-grid-section {
	background: #ffffff;
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md);
	padding: 20px;
	margin-bottom: 22px;
	box-shadow: var(--shadow-sm);
}

.section-top-bar {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 16px;
	border-bottom: 1.5px solid #f1f5f9;
	padding-bottom: 12px;
}

.section-top-bar .section-title {
	font-family: var(--stc-font);
	font-size: 16px;
	font-weight: 700;
	color: var(--stc-navy);
	margin: 0;
	display: flex;
	align-items: center;
	gap: 8px;
	letter-spacing: -0.01em;
}

.section-top-bar .section-title i {
	color: var(--stc-blue);
}

.section-top-bar .section-sub {
	font-size: 12.5px;
	color: var(--text-muted);
}

.cat-quick-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
}

.cat-quick-card {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	background: #f8fafc;
	border: 1px solid var(--border-color);
	border-radius: var(--radius-sm);
	transition: var(--transition);
	position: relative;
	text-decoration: none;
}

.quick-card-icon-wrap {
	width: 40px;
	height: 40px;
	border-radius: 8px;
	background: #edf4ff;
	color: var(--stc-blue);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	flex-shrink: 0;
	transition: var(--transition);
}

.quick-card-body {
	flex: 1;
	min-width: 0;
}

.quick-card-name {
	font-size: 13px;
	font-weight: 700;
	color: var(--stc-navy);
	margin: 0 0 2px 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: var(--transition);
}

.quick-card-count {
	font-size: 11.5px;
	color: var(--text-muted);
	display: block;
}

.quick-card-hover-arrow {
	font-size: 12px;
	color: #cbd5e1;
	transition: var(--transition);
}

.cat-quick-card:hover {
	background: #ffffff;
	border-color: var(--stc-blue);
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 82, 245, 0.12);
}

.cat-quick-card:hover .quick-card-icon-wrap {
	background: var(--stc-blue);
	color: #ffffff;
}

.cat-quick-card:hover .quick-card-name {
	color: var(--stc-blue);
}

.cat-quick-card:hover .quick-card-hover-arrow {
	color: var(--stc-blue);
	transform: translateX(3px);
}

/* Horizontal Filter Tabs Bar */
.linh-kien-tabs-bar {
	display: flex;
	align-items: center;
	gap: 8px;
	overflow-x: auto;
	white-space: nowrap;
	padding: 10px 0;
	margin-bottom: 22px;
	scrollbar-width: none;
}

.linh-kien-tabs-bar::-webkit-scrollbar {
	display: none;
}

.linh-kien-tabs-bar .tab-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 16px;
	background: #ffffff;
	border: 1px solid var(--border-color);
	border-radius: 20px;
	font-size: 13px;
	font-weight: 600;
	color: var(--text-body);
	cursor: pointer;
	transition: var(--transition);
	box-shadow: var(--shadow-sm);
}

.linh-kien-tabs-bar .tab-btn i {
	font-size: 13px;
	color: #64748b;
	transition: var(--transition);
}

.linh-kien-tabs-bar .tab-btn:hover {
	border-color: var(--stc-blue);
	color: var(--stc-blue);
}

.linh-kien-tabs-bar .tab-btn:hover i {
	color: var(--stc-blue);
}

.linh-kien-tabs-bar .tab-btn.active {
	background: var(--stc-blue);
	border-color: var(--stc-blue);
	color: #ffffff;
	box-shadow: 0 4px 10px rgba(0, 82, 245, 0.25);
}

.linh-kien-tabs-bar .tab-btn.active i {
	color: #ffd400;
}

/* Categorized Sections */
.linh-kien-cat-section {
	background: #ffffff;
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md);
	padding: 20px;
	margin-bottom: 24px;
	box-shadow: var(--shadow-sm);
	scroll-margin-top: 90px;
	transition: var(--transition);
}

.cat-section-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 16px;
	border-bottom: 1.5px solid #f1f5f9;
	margin-bottom: 18px;
	gap: 16px;
}

.cat-header-left {
	display: flex;
	align-items: center;
	gap: 12px;
}

.cat-section-icon {
	width: 44px;
	height: 44px;
	border-radius: 10px;
	background: #edf4ff;
	color: var(--stc-blue);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	flex-shrink: 0;
}

.cat-section-title {
	font-family: var(--stc-font);
	font-size: 18px;
	font-weight: 700;
	color: var(--stc-navy);
	margin: 0 0 3px 0;
	letter-spacing: -0.01em;
}

.cat-section-title a {
	color: var(--stc-navy);
}

.cat-section-title a:hover {
	color: var(--stc-blue);
}

.cat-section-desc {
	font-size: 12.5px;
	color: var(--text-muted);
	display: block;
}

.btn-view-all-cat {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 700;
	color: var(--stc-blue);
	background: #edf4ff;
	padding: 8px 14px;
	border-radius: 6px;
	transition: var(--transition);
	white-space: nowrap;
}

.btn-view-all-cat:hover {
	background: var(--stc-blue);
	color: #ffffff;
}

.cat-empty-msg {
	text-align: center;
	padding: 40px 20px;
	color: var(--text-muted);
}

.cat-empty-msg i {
	font-size: 36px;
	margin-bottom: 10px;
	color: #cbd5e1;
}

/* Bottom Callout Banner */
.linh-kien-bottom-banner {
	background: linear-gradient(135deg, #0e1e3e 0%, #152952 100%);
	border-radius: var(--radius-lg);
	padding: 28px 32px;
	color: #ffffff;
	margin-top: 10px;
	box-shadow: var(--shadow-md);
	position: relative;
	overflow: hidden;
}

.bottom-banner-content {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.bottom-banner-text .sub-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	font-weight: 700;
	color: #ffd400;
	letter-spacing: 0.5px;
	margin-bottom: 8px;
}

.bottom-banner-text h3 {
	font-family: var(--stc-font);
	font-size: 20px;
	font-weight: 700;
	color: #ffffff;
	margin: 0 0 8px 0;
	letter-spacing: -0.01em;
}

.bottom-banner-text p {
	font-size: 13px;
	color: #cbd5e1;
	line-height: 1.5;
	margin: 0;
	max-width: 600px;
}

.btn-banner-build {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #ffd400;
	color: #0e1e3e;
	font-weight: 800;
	font-size: 13.5px;
	padding: 12px 24px;
	border-radius: 8px;
	text-transform: uppercase;
	box-shadow: 0 4px 14px rgba(255, 212, 0, 0.4);
	transition: var(--transition);
	white-space: nowrap;
}

.btn-banner-build:hover {
	background: #ffffff;
	color: #0052f5;
	transform: translateY(-2px);
}

/* Responsive Media Queries */
@media (max-width: 1024px) {
	.linh-kien-layout {
		grid-template-columns: 240px 1fr;
		gap: 16px;
	}
	.cat-quick-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.hero-banner-inner {
		flex-direction: column;
		align-items: flex-start;
	}
	.hero-cta-box {
		max-width: 100%;
		width: 100%;
	}
	.bottom-banner-content {
		flex-direction: column;
		align-items: flex-start;
	}
}

@media (max-width: 768px) {
	.linh-kien-layout {
		grid-template-columns: 1fr;
	}
	.linh-kien-sidebar {
		position: static;
	}
	.cat-quick-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.cat-section-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}
	.cat-header-right {
		width: 100%;
	}
	.btn-view-all-cat {
		width: 100%;
		justify-content: center;
	}
	.hero-banner-title {
		font-size: 20px;
	}
}

@media (max-width: 480px) {
	.cat-quick-grid {
		grid-template-columns: 1fr;
	}
	.linh-kien-hero-banner {
		padding: 20px 16px;
	}
	.bottom-banner-content {
		padding: 0;
	}
}

/* ===================================================
 * 30. WARRANTY LOOKUP PAGE (TRA CỨU BẢO HÀNH)
 * =================================================== */
.stc-warranty-page-wrap {
	background: #f1f5f9;
	padding: 24px 0 60px;
	min-height: 70vh;
}

.stc-breadcrumbs-simple {
	font-size: 13px;
	color: #64748b;
	margin-bottom: 20px;
	display: flex;
	align-items: center;
	gap: 8px;
}

.stc-breadcrumbs-simple a {
	color: #334155;
	text-decoration: none;
	font-weight: 500;
}

.stc-breadcrumbs-simple a:hover {
	color: var(--stc-blue);
}

.stc-breadcrumbs-simple .sep {
	color: #94a3b8;
	font-size: 12px;
}

.stc-breadcrumbs-simple .current {
	color: #0f172a;
	font-weight: 600;
}

.warranty-search-card {
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	padding: 36px 32px;
	max-width: 860px;
	margin: 0 auto;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

.warranty-card-title {
	font-size: 21px;
	font-weight: 800;
	text-align: center;
	color: #0f172a;
	margin: 0 0 24px;
	letter-spacing: -0.3px;
}

.warranty-input-wrapper {
	display: flex;
	max-width: 620px;
	margin: 0 auto;
	border: 1px solid #cbd5e1;
	border-radius: 6px;
	overflow: hidden;
	background: #fff;
	transition: border-color 0.2s, box-shadow 0.2s;
}

.warranty-input-wrapper:focus-within {
	border-color: #c8102e;
	box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.12);
}

.warranty-input {
	flex: 1;
	border: none;
	padding: 12px 16px;
	font-size: 15px;
	outline: none;
	color: #0f172a;
	background: transparent;
}

.warranty-input::placeholder {
	color: #94a3b8;
}

.warranty-submit-btn {
	background: #c8102e;
	color: #ffffff;
	border: none;
	padding: 0 28px;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 8px;
	transition: background 0.2s, transform 0.1s;
	flex-shrink: 0;
}

.warranty-submit-btn:hover {
	background: #a00c22;
}

.warranty-submit-btn:active {
	transform: scale(0.98);
}

.warranty-quick-samples {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 18px 0 24px;
	font-size: 12.5px;
}

.warranty-quick-samples .hint-label {
	color: #64748b;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.btn-sample-chip {
	background: #f8fafc;
	border: 1px solid #cbd5e1;
	color: #0369a1;
	padding: 4px 10px;
	border-radius: 20px;
	font-size: 12px;
	font-family: inherit;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.15s;
}

.btn-sample-chip:hover {
	background: #e0f2fe;
	border-color: #38bdf8;
	color: #0284c7;
	transform: translateY(-1px);
}

/* Result Area */
.warranty-result-container {
	margin-top: 24px;
}

.warranty-loading {
	text-align: center;
	padding: 32px;
	color: #64748b;
}

.warranty-loading p {
	margin-top: 10px;
	font-size: 14px;
	color: #475569;
}

.warranty-result-card.is-success {
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
	animation: fadeIn 0.3s ease;
}

.warranty-result-card .result-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 16px 20px;
	background: #f8fafc;
	border-bottom: 1px solid #e2e8f0;
}

.warranty-result-card .header-left {
	display: flex;
	align-items: center;
	gap: 10px;
}

.warranty-result-card .header-left i {
	font-size: 20px;
	color: #16a34a;
}

.warranty-result-card .header-left h3 {
	margin: 0;
	font-size: 15px;
	font-weight: 800;
	color: #0f172a;
	letter-spacing: 0.2px;
}

.warranty-status-badge {
	font-size: 12.5px;
	font-weight: 700;
	padding: 5px 12px;
	border-radius: 20px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.warranty-status-badge.badge-valid {
	background: #dcfce7;
	color: #15803d;
	border: 1px solid #86efac;
}

.warranty-status-badge.badge-expired {
	background: #fee2e2;
	color: #b91c1c;
	border: 1px solid #fca5a5;
}

.warranty-info-grid {
	padding: 20px;
}

.warranty-info-grid .info-row {
	display: flex;
	padding: 12px 0;
	border-bottom: 1px dashed #e2e8f0;
	font-size: 14px;
	align-items: flex-start;
}

.warranty-info-grid .info-row:last-child {
	border-bottom: none;
}

.warranty-info-grid .info-label {
	width: 260px;
	flex-shrink: 0;
	color: #475569;
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 8px;
}

.warranty-info-grid .info-label i {
	width: 16px;
	text-align: center;
	color: #64748b;
}

.warranty-info-grid .info-val {
	flex: 1;
	color: #0f172a;
}

.warranty-info-grid .highlight-product .product-name-val {
	font-weight: 700;
	color: #0284c7;
	font-size: 15px;
	line-height: 1.4;
}

.warranty-info-grid .serial-code code {
	background: #f1f5f9;
	border: 1px solid #cbd5e1;
	padding: 3px 8px;
	border-radius: 4px;
	font-size: 13.5px;
	color: #0f172a;
	font-weight: 700;
}

.expire-date-tag {
	margin-left: 8px;
	color: #64748b;
	font-size: 13px;
}

.warranty-support-footer {
	background: #f8fafc;
	padding: 16px 20px;
	border-top: 1px solid #e2e8f0;
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: 16px;
}

.support-item {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	font-size: 12.5px;
}

.support-item i {
	font-size: 16px;
	margin-top: 2px;
	flex-shrink: 0;
}

.support-item strong {
	display: block;
	color: #0f172a;
	font-size: 12.5px;
	margin-bottom: 2px;
}

.support-item span {
	color: #64748b;
	line-height: 1.4;
}

.support-item .hotline-link {
	color: #c8102e;
	font-size: 14px;
	text-decoration: none;
}

.support-item .hotline-link:hover {
	text-decoration: underline;
}

/* Error Result */
.warranty-result-card.is-error {
	background: #fff5f5;
	border: 1px solid #fecaca;
	border-radius: 8px;
	padding: 20px;
	display: flex;
	gap: 16px;
	align-items: center;
	animation: fadeIn 0.3s ease;
}

.warranty-result-card.is-error .error-icon {
	font-size: 32px;
	color: #dc2626;
	flex-shrink: 0;
}

.warranty-result-card.is-error h4 {
	margin: 0 0 6px;
	color: #991b1b;
	font-size: 15px;
	font-weight: 700;
}

.warranty-result-card.is-error p {
	margin: 0;
	color: #7f1d1d;
	font-size: 13.5px;
	line-height: 1.4;
}

@keyframes fadeIn {
	from { opacity: 0; transform: translateY(6px); }
	to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 768px) {
	.warranty-search-card {
		padding: 24px 16px;
	}
	.warranty-card-title {
		font-size: 18px;
	}
	.warranty-input-wrapper {
		flex-direction: column;
	}
	.warranty-submit-btn {
		padding: 12px;
		justify-content: center;
	}
	.warranty-info-grid .info-row {
		flex-direction: column;
		gap: 4px;
	}
	.warranty-info-grid .info-label {
		width: 100%;
	}
	.warranty-support-footer {
		grid-template-columns: 1fr;
	}
}

/* ===================================================
 * SINGLE POST & BLOG ARCHIVE STYLES
 * =================================================== */
.stc-single-post-page,
.stc-archive-post-page {
	padding: 24px 0 50px;
	background: #f8fafc;
}

.post-layout-grid {
	display: grid;
	grid-template-columns: 1fr 340px;
	gap: 30px;
	align-items: start;
}

@media (max-width: 991px) {
	.post-layout-grid {
		grid-template-columns: 1fr;
	}
}

.single-article-body {
	background: #ffffff;
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md);
	padding: 32px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.article-cat-badge {
	display: inline-block;
	background: #e0edff;
	color: var(--stc-blue);
	font-size: 11.5px;
	font-weight: 800;
	padding: 4px 12px;
	border-radius: 4px;
	text-transform: uppercase;
	margin-bottom: 12px;
	text-decoration: none;
}

.article-title {
	font-size: 26px;
	font-weight: 800;
	color: var(--text-dark);
	line-height: 1.35;
	margin: 0 0 14px;
}

.article-meta-bar {
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--text-muted);
	font-size: 12.5px;
	padding-bottom: 20px;
	margin-bottom: 24px;
	border-bottom: 1px solid #f1f5f9;
}

.article-meta-bar .meta-dot {
	color: #cbd5e1;
}

.article-lead-box {
	background: #f8fafc;
	border-left: 4px solid var(--stc-blue);
	padding: 16px 20px;
	border-radius: 0 8px 8px 0;
	margin-bottom: 28px;
	position: relative;
}

.article-lead-box p {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: #334155;
	font-weight: 500;
}

.lead-quote-icon {
	color: #cbd5e1;
	font-size: 24px;
	margin-bottom: 8px;
	display: block;
}

.article-content-body {
	font-size: 15px;
	line-height: 1.8;
	color: #1e293b;
}

.article-content-body h2 {
	font-size: 20px;
	font-weight: 800;
	color: var(--stc-navy);
	margin: 32px 0 14px;
	padding-bottom: 8px;
	border-bottom: 2px solid #e2e8f0;
}

.article-content-body h3 {
	font-size: 17px;
	font-weight: 700;
	color: var(--text-dark);
	margin: 24px 0 10px;
}

.article-content-body p {
	margin: 0 0 16px;
}

.article-content-body ul,
.article-content-body ol {
	margin: 0 0 20px 20px;
	padding: 0;
}

.article-content-body li {
	margin-bottom: 8px;
	line-height: 1.7;
}

.specs-table-post {
	width: 100%;
	border-collapse: collapse;
	margin: 20px 0 28px;
	background: #ffffff;
	border-radius: 8px;
	overflow: hidden;
	border: 1px solid #e2e8f0;
}

.specs-table-post th,
.specs-table-post td {
	padding: 12px 16px;
	text-align: left;
	font-size: 13.5px;
	border-bottom: 1px solid #f1f5f9;
}

.specs-table-post th {
	background: #f1f5f9;
	color: var(--stc-navy);
	font-weight: 800;
}

.specs-table-post tr:hover td {
	background: #f8fafc;
}

/* Article CTA Box */
.article-cta-box {
	background: linear-gradient(135deg, #0052f5 0%, #003bb0 100%);
	color: #ffffff;
	border-radius: 12px;
	padding: 28px;
	margin: 36px 0;
	display: flex;
	gap: 20px;
	align-items: center;
	box-shadow: 0 8px 24px rgba(0, 82, 245, 0.25);
}

.cta-icon-side {
	font-size: 44px;
	color: #93c5fd;
	flex-shrink: 0;
}

.cta-text-side h3 {
	margin: 0 0 8px;
	font-size: 17px;
	font-weight: 800;
	color: #ffffff;
}

.cta-text-side p {
	margin: 0 0 16px;
	font-size: 13.5px;
	color: #e0edff;
	line-height: 1.5;
}

.cta-btn-wrap {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

.btn-cta-builder {
	background: #ffffff;
	color: #0052f5 !important;
	padding: 10px 20px;
	border-radius: 6px;
	font-weight: 800;
	font-size: 13px;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	transition: transform 0.2s;
}

.btn-cta-builder:hover {
	transform: translateY(-2px);
}

.btn-cta-hotline {
	background: rgba(255,255,255,0.15);
	color: #ffffff !important;
	border: 1px solid rgba(255,255,255,0.3);
	padding: 10px 20px;
	border-radius: 6px;
	font-weight: 700;
	font-size: 13px;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.btn-cta-hotline:hover {
	background: rgba(255,255,255,0.25);
}

/* Article bottom share */
.article-bottom-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
	padding-top: 24px;
	margin-top: 24px;
	border-top: 1px solid #f1f5f9;
}

.article-tags {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.tag-label {
	font-size: 13px;
	font-weight: 700;
	color: var(--text-dark);
}

.post-tag-item {
	background: #f1f5f9;
	color: #475569;
	padding: 4px 10px;
	border-radius: 4px;
	font-size: 12px;
	text-decoration: none;
}

.article-share {
	display: flex;
	align-items: center;
	gap: 10px;
}

.share-btn {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #ffffff;
	border: none;
	cursor: pointer;
	font-size: 13px;
	text-decoration: none;
}

.share-btn.fb { background: #1877f2; }
.share-btn.copy { background: #475569; }

/* Sidebar Cards */
.post-sidebar-col {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.sidebar-widget-card {
	background: #ffffff;
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md);
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.support-widget-header {
	background: #0052f5;
	color: #ffffff;
	padding: 14px 18px;
	display: flex;
	align-items: center;
	gap: 10px;
}

.support-widget-header h4 {
	margin: 0;
	font-size: 13.5px;
	font-weight: 800;
	color: #ffffff;
}

.support-widget-body {
	padding: 18px;
}

.support-desc {
	margin: 0 0 14px;
	font-size: 12.5px;
	color: var(--text-muted);
	line-height: 1.5;
}

.sidebar-hotline-btn {
	display: block;
	background: #fee2e2;
	color: #dc2626 !important;
	border: 1px solid #fca5a5;
	text-align: center;
	padding: 10px 14px;
	border-radius: 6px;
	font-size: 16px;
	font-weight: 900;
	text-decoration: none;
	margin-bottom: 12px;
	transition: background 0.2s;
}

.sidebar-hotline-btn:hover {
	background: #fecaca;
}

.sidebar-showroom-addr {
	display: flex;
	gap: 8px;
	font-size: 11.5px;
	color: var(--text-muted);
	line-height: 1.4;
}

.builder-banner-widget {
	background: linear-gradient(135deg, #1e293b, #0f172a);
	color: #ffffff;
	padding: 20px;
}

.bb-badge {
	background: #dc2626;
	color: #ffffff;
	font-size: 10px;
	font-weight: 800;
	padding: 2px 8px;
	border-radius: 3px;
	display: inline-block;
	margin-bottom: 8px;
}

.builder-banner-widget h4 {
	margin: 0 0 8px;
	font-size: 14px;
	font-weight: 800;
	color: #ffffff;
}

.builder-banner-widget p {
	margin: 0 0 14px;
	font-size: 12px;
	color: #94a3b8;
	line-height: 1.5;
}

.btn-bb-start {
	background: #0052f5;
	color: #ffffff !important;
	display: block;
	text-align: center;
	padding: 10px;
	border-radius: 6px;
	font-size: 12px;
	font-weight: 800;
	text-decoration: none;
	transition: background 0.2s;
}

.btn-bb-start:hover {
	background: #003bb0;
}

.warranty-banner-widget {
	padding: 18px;
	background: #f0fdf4;
	border-color: #bbf7d0;
}

.warranty-banner-widget h4 {
	margin: 0 0 6px;
	font-size: 13.5px;
	color: #166534;
	font-weight: 800;
}

.warranty-banner-widget p {
	margin: 0 0 12px;
	font-size: 12px;
	color: #15803d;
	line-height: 1.4;
}

.btn-wb-link {
	display: inline-block;
	color: #166534;
	font-size: 12.5px;
	font-weight: 700;
	text-decoration: none;
}

/* Related News */
.related-news-section {
	margin-top: 36px;
}

.related-section-title {
	font-size: 16px;
	font-weight: 800;
	color: var(--text-dark);
	margin-bottom: 16px;
	display: flex;
	align-items: center;
	gap: 8px;
}

.related-news-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}

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

.related-card {
	background: #ffffff;
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform 0.2s;
}

.related-card:hover {
	transform: translateY(-2px);
	border-color: var(--stc-blue);
}

.related-placeholder-img {
	height: 120px;
	background: linear-gradient(135deg, #1e3a8a, #3b82f6);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ffffff;
	font-size: 28px;
}

.related-info {
	padding: 12px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.related-cat {
	font-size: 10.5px;
	font-weight: 700;
	color: var(--stc-blue);
	text-transform: uppercase;
}

.related-title {
	margin: 0;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.4;
}

.related-title a {
	color: var(--text-dark);
	text-decoration: none;
}

.related-title a:hover {
	color: var(--stc-blue);
}

.related-date {
	font-size: 11px;
	color: var(--text-muted);
	margin-top: 4px;
}

/* Archive page */
.archive-header-box {
	background: linear-gradient(135deg, var(--stc-blue) 0%, var(--stc-navy) 100%);
	color: #ffffff;
	border-radius: var(--radius-lg);
	padding: 28px 32px;
	margin-bottom: 28px;
}

.archive-badge {
	font-size: 11px;
	font-weight: 700;
	background: rgba(255,255,255,0.18);
	padding: 3px 9px;
	border-radius: var(--radius-sm);
	display: inline-block;
	margin-bottom: 10px;
}

.archive-page-title {
	margin: 0 0 8px;
	font-size: 28px;
	font-weight: 800;
	color: #ffffff;
}

.archive-page-desc {
	margin: 0;
	font-size: 14px;
	color: #e0edff;
	max-width: 700px;
	line-height: 1.6;
}

.archive-posts-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-bottom: 30px;
}

@media (max-width: 991px) {
	.archive-posts-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.archive-posts-grid {
		grid-template-columns: 1fr;
	}
}

.news-read-more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--stc-blue);
	font-size: 12px;
	font-weight: 700;
	margin-top: 10px;
	text-decoration: none;
}

.news-read-more:hover {
	text-decoration: underline;
}

/* ==========================================================================
   STC FLOATING FACEBOOK MESSENGER CHAT BUBBLE
   ========================================================================== */
.stc-floating-chat {
	position: fixed;
	bottom: 25px;
	right: 25px;
	z-index: 9999;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	pointer-events: none;
}
.stc-floating-chat * {
	pointer-events: auto;
	box-sizing: border-box;
}

/* Chat Bubble Action Button */
.stc-chat-bubble-btn {
	position: relative;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: linear-gradient(135deg, #0084FF 0%, #0099FF 45%, #8A3FFC 100%);
	color: #ffffff !important;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8px 24px rgba(0, 132, 255, 0.42), 0 3px 8px rgba(0, 0, 0, 0.12);
	cursor: pointer;
	text-decoration: none !important;
	transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
	outline: none;
	user-select: none;
}
.stc-chat-bubble-btn:hover {
	transform: scale(1.08) translateY(-3px);
	box-shadow: 0 14px 32px rgba(0, 132, 255, 0.55), 0 4px 12px rgba(0, 0, 0, 0.18);
	color: #ffffff !important;
}
.stc-chat-bubble-btn:active {
	transform: scale(0.96);
}
.stc-chat-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
	transition: transform 0.3s ease;
}
.stc-chat-bubble-btn:hover .stc-chat-icon {
	transform: scale(1.08) rotate(-6deg);
}

/* Pulsing Ripples */
.stc-chat-ripple {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	border-radius: 50%;
	border: 2px solid #0084FF;
	animation: stcMessengerPulse 2.6s infinite cubic-bezier(0.25, 1, 0.5, 1);
	pointer-events: none;
	z-index: 1;
}
.stc-chat-ripple.ripple-2 {
	animation-delay: 1.3s;
}

@keyframes stcMessengerPulse {
	0% {
		transform: scale(0.95);
		opacity: 0.85;
	}
	70% {
		transform: scale(1.58);
		opacity: 0;
	}
	100% {
		transform: scale(1.58);
		opacity: 0;
	}
}

/* Notification Badge (Number 1) */
.stc-chat-badge {
	position: absolute;
	top: -2px;
	right: -2px;
	width: 20px;
	height: 20px;
	background: #EF4444;
	color: #ffffff;
	font-size: 11px;
	font-weight: 800;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px solid #ffffff;
	box-shadow: 0 2px 8px rgba(239, 68, 68, 0.5);
	z-index: 3;
	animation: stcBadgeBounce 3.5s infinite ease-in-out;
}

@keyframes stcBadgeBounce {
	0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
	40% { transform: translateY(-4px); }
	60% { transform: translateY(-2px); }
}

/* Tooltip / Greeting Popover */
.stc-chat-tooltip {
	position: relative;
	width: 285px;
	background: #ffffff;
	border-radius: 16px;
	padding: 14px 16px;
	box-shadow: 0 14px 35px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.05);
	border: 1px solid rgba(0, 132, 255, 0.18);
	margin-bottom: 14px;
	transform-origin: bottom right;
	animation: stcTooltipSlideIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
	transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
}

/* Little speech pointer arrow */
.stc-chat-tooltip::after {
	content: '';
	position: absolute;
	bottom: -8px;
	right: 22px;
	width: 14px;
	height: 14px;
	background: #ffffff;
	border-bottom: 1px solid rgba(0, 132, 255, 0.18);
	border-right: 1px solid rgba(0, 132, 255, 0.18);
	transform: rotate(45deg);
	border-radius: 2px;
}

.stc-chat-tooltip.is-closed {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: scale(0.85) translateY(12px);
}

@keyframes stcTooltipSlideIn {
	from {
		opacity: 0;
		transform: scale(0.85) translateY(15px);
	}
	to {
		opacity: 1;
		transform: scale(1) translateY(0);
	}
}

.stc-chat-tooltip-close {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 22px;
	height: 22px;
	border: none;
	background: #F1F5F9;
	color: #64748B;
	border-radius: 50%;
	font-size: 15px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.2s ease;
	z-index: 2;
}
.stc-chat-tooltip-close:hover {
	background: #E2E8F0;
	color: #0F172A;
}

.stc-chat-tooltip-header {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 8px;
	padding-right: 20px;
}
.stc-agent-avatar {
	position: relative;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #0084FF;
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 700;
	flex-shrink: 0;
	box-shadow: 0 2px 6px rgba(0, 132, 255, 0.3);
}
.stc-agent-status-dot {
	position: absolute;
	bottom: -1px;
	right: -1px;
	width: 10px;
	height: 10px;
	background: #10B981;
	border: 2px solid #ffffff;
	border-radius: 50%;
	box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.4);
}
.stc-agent-info {
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.stc-agent-name {
	font-size: 13px;
	font-weight: 700;
	color: #0F172A;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.stc-agent-time {
	font-size: 11px;
	color: #10B981;
	display: flex;
	align-items: center;
	gap: 4px;
	font-weight: 600;
}

.stc-chat-tooltip-body {
	font-size: 12.5px;
	color: #334155;
	line-height: 1.45;
	margin-bottom: 12px;
}
.stc-chat-tooltip-body p {
	margin: 0;
}

.stc-chat-tooltip-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	width: 100%;
	padding: 8px 12px;
	background: linear-gradient(135deg, #0084FF 0%, #006CE0 100%);
	color: #ffffff !important;
	font-size: 12.5px;
	font-weight: 600;
	border-radius: 10px;
	text-decoration: none !important;
	transition: all 0.2s ease;
	box-shadow: 0 4px 12px rgba(0, 132, 255, 0.28);
}
.stc-chat-tooltip-btn:hover {
	background: linear-gradient(135deg, #0073E6 0%, #0059B8 100%);
	transform: translateY(-1px);
	box-shadow: 0 6px 16px rgba(0, 132, 255, 0.38);
	color: #ffffff !important;
}

/* Mobile responsive positioning */
@media (max-width: 768px) {
	.stc-floating-chat {
		bottom: 82px; /* Positioned directly above .mobile-bottom-nav */
		right: 16px;
	}
	.stc-chat-bubble-btn {
		width: 52px;
		height: 52px;
	}
	.stc-chat-bubble-btn svg {
		width: 25px;
		height: 25px;
	}
	.stc-chat-tooltip {
		width: calc(100vw - 32px);
		max-width: 280px;
	}
}

/* LIVE IN-PAGE CHAT WINDOW */
.stc-live-chat-window {
	position: absolute;
	bottom: 74px;
	right: 0;
	width: 360px;
	height: 520px;
	background: #ffffff;
	border-radius: 20px;
	box-shadow: 0 16px 45px rgba(0, 0, 0, 0.2), 0 4px 14px rgba(0, 0, 0, 0.08);
	border: 1px solid rgba(0, 132, 255, 0.22);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transform-origin: bottom right;
	transform: scale(0.7) translateY(20px);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
	z-index: 10000;
}
.stc-live-chat-window.is-open {
	transform: scale(1) translateY(0);
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

/* Header */
.stc-live-chat-header {
	background: linear-gradient(135deg, #0084FF 0%, #0066E0 100%);
	color: #ffffff;
	padding: 12px 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-shadow: 0 2px 8px rgba(0, 100, 220, 0.2);
	flex-shrink: 0;
}
.stc-live-chat-brand {
	display: flex;
	align-items: center;
	gap: 10px;
}
.stc-live-avatar {
	position: relative;
	width: 36px;
	height: 36px;
	background: rgba(255, 255, 255, 0.22);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ffffff;
	backdrop-filter: blur(4px);
}
.stc-live-dot {
	position: absolute;
	bottom: -1px;
	right: -1px;
	width: 10px;
	height: 10px;
	background: #10B981;
	border: 2px solid #0084FF;
	border-radius: 50%;
}
.stc-live-title-box {
	display: flex;
	flex-direction: column;
}
.stc-live-title {
	font-size: 13.5px;
	font-weight: 700;
	color: #ffffff;
	line-height: 1.2;
}
.stc-live-subtitle {
	font-size: 11px;
	color: rgba(255, 255, 255, 0.88);
	margin-top: 2px;
	display: flex;
	align-items: center;
	gap: 4px;
}
.stc-live-actions {
	display: flex;
	align-items: center;
	gap: 6px;
}
.stc-live-btn-icon {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.18);
	border: none;
	color: #ffffff !important;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-size: 13px;
	text-decoration: none !important;
	transition: all 0.2s ease;
}
.stc-live-btn-icon:hover {
	background: rgba(255, 255, 255, 0.35);
	transform: scale(1.08);
}

/* Body */
/* Body & Content */
.stc-live-chat-body {
	flex: 1;
	position: relative;
	background: #F8FAFC;
	overflow-y: auto;
	padding: 14px 16px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

/* Fanpage Verified Badge */
.stc-chat-fanpage-badge {
	display: flex;
	align-items: center;
	gap: 10px;
	background: #ffffff;
	padding: 10px 12px;
	border-radius: 12px;
	border: 1px solid #E2E8F0;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}
.stc-chat-badge-logo {
	width: 40px;
	height: 40px;
	border-radius: 10px;
	object-fit: cover;
	border: 1px solid #CBD5E1;
	background: #ffffff;
	flex-shrink: 0;
}
.stc-chat-badge-info {
	min-width: 0;
}
.stc-chat-badge-name {
	font-size: 13px;
	font-weight: 700;
	color: #0F172A;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	display: flex;
	align-items: center;
	gap: 4px;
}
.stc-chat-badge-sub {
	font-size: 11px;
	color: #64748B;
	margin-top: 2px;
}

/* Message Stream */
.stc-chat-stream {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.stc-msg-item {
	display: flex;
	gap: 8px;
	align-items: flex-start;
}
.stc-msg-avatar {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: #0084FF;
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	flex-shrink: 0;
	margin-top: 2px;
}
.stc-msg-bubble {
	background: #ffffff;
	border: 1px solid #E2E8F0;
	border-radius: 4px 14px 14px 14px;
	padding: 10px 12px;
	font-size: 12.5px;
	color: #1E293B;
	line-height: 1.45;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
	max-width: 88%;
}
.stc-msg-bubble p {
	margin: 0;
}
.stc-msg-time {
	display: block;
	font-size: 10px;
	color: #94A3B8;
	margin-top: 4px;
	text-align: right;
}

/* Quick topic suggestions */
.stc-chat-suggestions {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding-left: 36px;
}
.stc-chat-pill {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: #EFF6FF;
	color: #0060E6;
	border: 1px solid #BFDBFE;
	padding: 5px 10px;
	border-radius: 20px;
	font-size: 11.5px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s ease;
	user-select: none;
}
.stc-chat-pill:hover {
	background: #0084FF;
	color: #ffffff;
	border-color: #0084FF;
	transform: translateY(-1px);
	box-shadow: 0 2px 6px rgba(0, 132, 255, 0.3);
}

/* Big Messenger CTA Button */
.stc-chat-cta-box {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: 4px;
}
.stc-btn-launch-messenger {
	width: 100%;
	padding: 12px 14px;
	background: linear-gradient(135deg, #0084FF 0%, #0066E0 50%, #7B2CBF 100%);
	color: #ffffff !important;
	border: none;
	border-radius: 12px;
	font-size: 13px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	cursor: pointer;
	box-shadow: 0 4px 15px rgba(0, 132, 255, 0.4);
	transition: all 0.25s ease;
	text-decoration: none !important;
	outline: none;
}
.stc-btn-launch-messenger:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 22px rgba(0, 132, 255, 0.55);
	background: linear-gradient(135deg, #0073E6 0%, #0052B8 50%, #6A21A8 100%);
	color: #ffffff !important;
}
.stc-cta-hint {
	font-size: 11px;
	color: #64748B;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
}

/* Quick Callback Form */
.stc-chat-quick-contact {
	background: #ffffff;
	border: 1px solid #E2E8F0;
	border-radius: 12px;
	padding: 10px 12px;
}
.stc-quick-contact-title {
	font-size: 11.5px;
	font-weight: 700;
	color: #334155;
	margin-bottom: 8px;
	display: flex;
	align-items: center;
	gap: 5px;
}
.stc-quick-contact-form {
	display: flex;
	gap: 6px;
}
.stc-quick-contact-form input {
	flex: 1;
	height: 36px;
	border: 1px solid #CBD5E1;
	border-radius: 8px;
	padding: 0 10px;
	font-size: 12px;
	color: #0F172A;
	outline: none;
}
.stc-quick-contact-form input:focus {
	border-color: #0084FF;
	box-shadow: 0 0 0 2px rgba(0, 132, 255, 0.15);
}
.stc-quick-contact-form button {
	width: 36px;
	height: 36px;
	border: none;
	background: #0084FF;
	color: #ffffff;
	border-radius: 8px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	transition: background 0.2s ease;
}
.stc-quick-contact-form button:hover {
	background: #0066E0;
}
.stc-callback-success {
	font-size: 12px;
	color: #059669;
	font-weight: 600;
	margin-top: 6px;
}

/* Footer */
.stc-live-chat-footer {
	padding: 9px 14px;
	background: #ffffff;
	border-top: 1px solid #E2E8F0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 11px;
	color: #64748B;
	flex-shrink: 0;
}
.stc-chat-footer-call {
	color: #D97706 !important;
	font-weight: 700;
	text-decoration: none !important;
	display: flex;
	align-items: center;
	gap: 4px;
}
.stc-chat-footer-call:hover {
	text-decoration: underline !important;
}
.stc-chat-footer-link {
	color: #0084FF !important;
	font-weight: 600;
	text-decoration: none !important;
	display: flex;
	align-items: center;
	gap: 4px;
}
.stc-chat-footer-link:hover {
	text-decoration: underline !important;
}

@media (max-width: 768px) {
	.stc-live-chat-window {
		width: calc(100vw - 32px);
		max-width: 360px;
		height: calc(100vh - 160px);
		max-height: 520px;
		bottom: 68px;
	}
}

/* Outgoing messages */
.stc-msg-item.outgoing {
	justify-content: flex-end;
}
.stc-msg-item.outgoing .stc-msg-bubble {
	background: linear-gradient(135deg, #0084FF 0%, #0066E0 100%);
	color: #ffffff !important;
	border: none;
	border-radius: 14px 14px 4px 14px;
	box-shadow: 0 2px 8px rgba(0, 132, 255, 0.25);
}
.stc-msg-item.outgoing .stc-msg-bubble p {
	color: #ffffff !important;
}
.stc-msg-item.outgoing .stc-msg-time {
	color: rgba(255, 255, 255, 0.75);
}

/* Typing Indicator */
.stc-typing-indicator {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 8px 12px;
	background: #ffffff;
	border: 1px solid #E2E8F0;
	border-radius: 14px;
	width: fit-content;
}
.stc-typing-dot {
	width: 6px;
	height: 6px;
	background: #94A3B8;
	border-radius: 50%;
	animation: stcTypingBounce 1.4s infinite ease-in-out;
}
.stc-typing-dot:nth-child(2) { animation-delay: 0.2s; }
.stc-typing-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes stcTypingBounce {
	0%, 60%, 100% { transform: translateY(0); }
	30% { transform: translateY(-4px); }
}

/* Live Chat Input Bar pinned at bottom of window */
.stc-live-chat-input-bar {
	padding: 10px 14px;
	background: #ffffff;
	border-top: 1px solid #E2E8F0;
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}
.stc-chat-input-field {
	flex: 1;
	height: 38px;
	border: 1px solid #CBD5E1;
	border-radius: 20px;
	padding: 0 14px;
	font-size: 13px;
	color: #0F172A;
	background: #F8FAFC;
	outline: none;
	transition: all 0.2s ease;
}
.stc-chat-input-field:focus {
	background: #ffffff;
	border-color: #0084FF;
	box-shadow: 0 0 0 2px rgba(0, 132, 255, 0.15);
}
.stc-chat-send-btn {
	width: 38px;
	height: 38px;
	border: none;
	border-radius: 50%;
	background: linear-gradient(135deg, #0084FF 0%, #0060E6 100%);
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-size: 14px;
	flex-shrink: 0;
	transition: all 0.2s ease;
	box-shadow: 0 2px 6px rgba(0, 132, 255, 0.35);
}
.stc-chat-send-btn:hover {
	transform: scale(1.06);
	background: linear-gradient(135deg, #0073E6 0%, #0050C8 100%);
	box-shadow: 0 4px 10px rgba(0, 132, 255, 0.45);
}
.stc-chat-send-btn:active {
	transform: scale(0.94);
}

/* Zalo Official Brand Button & Popover */
.stc-zalo-bubble-btn {
	background: linear-gradient(135deg, #0068FF 0%, #0084FF 40%, #0052CC 100%) !important;
	box-shadow: 0 8px 24px rgba(0, 104, 255, 0.45), 0 3px 8px rgba(0, 0, 0, 0.12) !important;
}
.stc-zalo-bubble-btn:hover {
	box-shadow: 0 14px 32px rgba(0, 104, 255, 0.6), 0 4px 12px rgba(0, 0, 0, 0.2) !important;
	transform: scale(1.08) translateY(-3px);
}
.stc-zalo-ripple {
	border-color: #0068FF !important;
}
.stc-zalo-icon-badge {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	color: #ffffff;
	line-height: 1;
}
.stc-zalo-icon-badge svg {
	width: 26px;
	height: 26px;
	display: block;
}
.stc-zalo-text {
	font-size: 12px;
	font-weight: 900;
	letter-spacing: -0.2px;
	color: #ffffff;
	font-family: 'Inter', sans-serif;
	margin-top: 1px;
	text-transform: uppercase;
}
.stc-zalo-avatar {
	background: #0068FF !important;
	box-shadow: 0 2px 6px rgba(0, 104, 255, 0.35) !important;
	font-size: 15px;
}
.stc-zalo-actions {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: 4px;
}
.stc-btn-zalo-direct {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	padding: 10px 14px;
	background: linear-gradient(135deg, #0068FF 0%, #0052CC 100%) !important;
	color: #ffffff !important;
	font-size: 13px;
	font-weight: 700;
	border-radius: 10px;
	text-decoration: none !important;
	box-shadow: 0 4px 12px rgba(0, 104, 255, 0.35);
	transition: all 0.2s ease;
}
.stc-btn-zalo-direct:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(0, 104, 255, 0.5);
	background: linear-gradient(135deg, #005ce6 0%, #0047b3 100%) !important;
	color: #ffffff !important;
}
.stc-zalo-call-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	padding: 7px 12px;
	background: #F1F5F9;
	color: #0F172A !important;
	font-size: 12px;
	font-weight: 600;
	border-radius: 8px;
	text-decoration: none !important;
	transition: all 0.2s ease;
}
.stc-zalo-call-btn:hover {
	background: #E2E8F0;
	color: #D97706 !important;
}