/*
Theme Name: S Logistic - Công ty vận tải chuyên nghiệp
Theme URI: http://s-logistic.local/
Description: Child Theme cho Flatsome - Giao diện S Logistic chuẩn nguyên mẫu Bean Cargo.
Author: S Logistic (W2W co., JSC)
Template: flatsome
Version: 2.2.0
*/

:root {
	--mainColor: #113465;
	--subColor: #e31518;
	--textColor: #000000;
	--hover: #e31518;
	--colorContact: #113465;
	--price: #fc0000;
	--bgFoot: #f2f2f2;
	--rotate-letter: 8deg;
	--icon-size: 107px;
}

/* Đảm bảo ảnh và icon hiển thị sắc nét ngay lập tức, nền trong suốt, không bị che bởi lazyload */
.lazyload,
.lazyload.loaded,
img.lazyload,
img.lazyload:not(.loaded),
img.lazyloaded {
	opacity: 1 !important;
	background: transparent !important;
}

/* Chuẩn hóa hiển thị Icon Dịch vụ (vòng tròn đỏ + icon trắng cân giữa) */
.section_services .property-card8 .box-icon,
.page-dich-vu .property-card8 .box-icon,
.page-chi-tiet-du-an .property-card8 .box-icon {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 42px !important;
	height: 42px !important;
	padding: 8px !important;
	border-radius: 50% !important;
	background-color: var(--subColor) !important;
}

.section_services .property-card8 .box-icon img,
.page-dich-vu .property-card8 .box-icon img,
.page-chi-tiet-du-an .property-card8 .box-icon img {
	width: 24px !important;
	height: 24px !important;
	max-width: 24px !important;
	max-height: 24px !important;
	object-fit: contain !important;
	background: transparent !important;
	display: block !important;
}

/* Hiệu ứng clip-path cho ảnh khi cuộn tới */
.animation_image img {
	clip-path: inset(0 0 0 0) !important;
	-webkit-clip-path: inset(0 0 0 0) !important;
}

/* Hiển thị Tab sản phẩm mượt mà trên trang chủ */
.section_product_tab .tab-content {
	display: none;
}

.section_product_tab .tab-content.current {
	display: block;
}

/* Tối ưu hiển thị Logo S Logistic */
.header .header-logo .logo-wrapper img,
.footer .logo-footer img {
	max-height: 62px;
	width: auto;
	object-fit: contain;
}

/* Tương thích WP Admin Bar khi đăng nhập */
body.admin-bar header.header.hSticky .main-header-new {
	top: 32px;
}

@media (max-width: 782px) {
	body.admin-bar header.header.hSticky .main-header-new {
		top: 46px;
	}
}

/* Nút yêu thích đã chọn */
.setWishlist.active img {
	filter: drop-shadow(0 0 2px #e31518);
}

/* ==========================================================================
   CHUẨN HÓA LIGHTBOX XEM NHANH SẢN PHẨM (QUICKVIEW MODAL)
   ========================================================================== */
#quick-view-product .quick-view-product {
	opacity: 1 !important;
	animation: none !important;
	width: 840px;
	max-width: 94vw;
	border-radius: 12px;
	padding: 24px;
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
	z-index: 99999 !important;
}

#quick-view-product .quickview-overlay {
	z-index: 99990 !important;
	background-color: rgba(15, 23, 42, 0.65) !important;
	opacity: 1 !important;
}

#quick-view-product .quick-view-product .quickview-close {
	right: -10px;
	top: -10px;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--subColor);
	z-index: 20;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

#quick-view-product .large-image .img-product {
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	overflow: hidden;
	background: #fff;
}

#quick-view-product #thumblist_quickview {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 12px;
}

#quick-view-product #thumblist_quickview li.swiper-slide {
	width: 72px !important;
	height: 72px !important;
	flex: 0 0 72px;
}

#quick-view-product #thumblist_quickview li.swiper-slide a {
	border-radius: 8px;
	overflow: hidden;
	background: #fff;
}

#quick-view-product .product-info .title-product {
	font-size: 22px !important;
	line-height: 1.35 !important;
	font-weight: 700 !important;
	margin-bottom: 8px !important;
}

#quick-view-product .product-info .title-product a {
	color: var(--mainColor);
}

#quick-view-product .product-info .title-product a:hover {
	color: var(--subColor);
}

#quick-view-product .price-box .product-price {
	font-size: 24px !important;
	font-weight: 800 !important;
	color: var(--subColor) !important;
}

#quick-view-product .price-box .old-price {
	font-size: 16px !important;
	color: #94a3b8 !important;
	margin-left: 10px !important;
}

#quick-view-product .product-summary .rte {
	font-size: 14.5px;
	line-height: 1.6;
	color: #334155;
	margin: 12px 0 18px;
}

#quick-view-product .form_product_content .soluong1 .btn_num {
	width: 38px !important;
	height: 40px !important;
	font-size: 18px !important;
	line-height: 38px !important;
	align-items: center;
}

#quick-view-product .form_product_content .soluong1 #quantity-detail {
	width: 56px !important;
	height: 40px !important;
	font-size: 16px !important;
	font-weight: 600;
}

#quick-view-product .form_product_content .button_actions .btn_add_cart {
	height: 40px;
	padding: 0 22px;
	font-size: 15px;
	font-weight: 600;
	border-radius: 8px;
	background: var(--subColor);
	border: none;
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s ease;
}

#quick-view-product .form_product_content .button_actions .btn_add_cart:hover {
	background: var(--mainColor);
}

@media (max-width: 767px) {
	#quick-view-product .quick-view-product {
		top: 50%;
		padding: 16px;
		max-height: 88vh;
		overflow-y: auto;
	}

	#quick-view-product .product-left-column {
		margin-bottom: 14px;
	}

	#quick-view-product .product-info .title-product {
		font-size: 18px !important;
	}
}

/* ==========================================================================
   TƯƠNG THÍCH GIAO DIỆN CONTACT FORM 7 (LIÊN HỆ, BÁO GIÁ, ỨNG TUYỂN, NHẬN TIN)
   ========================================================================== */
.wpcf7 .wpcf7-form-control-wrap {
	display: block;
	width: 100%;
	position: relative;
}

.section_form .group_contact .box_cus_cont label,
.section_form .group_contact .box_cus_service .title-font-new {
	z-index: 5 !important;
}

/* Tùy chọn dịch vụ (Radio buttons) trong Form Yêu Cầu Báo Giá */
.section_form .group_contact .box_cus_service .group-radio-service .wpcf7-form-control-wrap,
.section_form .group_contact .box_cus_service .group-radio-service .wpcf7-radio {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	width: 100%;
	align-items: center;
	justify-content: space-between;
}

.section_form .group_contact .box_cus_service .group-radio-service .wpcf7-list-item {
	margin: 0 !important;
}

.section_form .group_contact .box_cus_service .group-radio-service .wpcf7-list-item label {
	position: static !important;
	display: flex !important;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	font-size: 14px;
	margin-bottom: 0;
	padding: 0 !important;
	background: transparent !important;
	color: var(--textColor) !important;
	line-height: 1;
}

.section_form .group_contact .box_cus_service .group-radio-service .wpcf7-list-item input[type="radio"] {
	width: 16px !important;
	height: 16px !important;
	margin: 0 !important;
	padding: 0 !important;
	display: inline-block !important;
	accent-color: var(--subColor);
	cursor: pointer;
}

/* Form Ứng Tuyển Nhân Sự trên 4 trang Tuyển dụng chi tiết */
.article-tuyen-dung .form_tuyen_dung {
	padding: 25px;
	border-radius: 12px;
	background-color: #e8f2ff;
	margin-top: 25px;
	border: 1px solid #cfe2ff;
}

.slogistic-apply-box .apply-box-header {
	margin-bottom: 20px;
	border-bottom: 2px solid rgba(17, 52, 101, 0.12);
	padding-bottom: 12px;
}

.slogistic-apply-box .apply-box-title {
	color: var(--mainColor);
	font-size: 20px;
	font-weight: 700;
	margin: 0 0 6px;
	text-transform: uppercase;
}

.slogistic-apply-box .apply-box-desc {
	color: #334155;
	font-size: 14px;
	margin: 0;
}

.slogistic-apply-box .apply-label {
	display: block;
	font-size: 14px;
	font-weight: 600;
	color: var(--mainColor);
	margin-bottom: 6px;
}

.slogistic-apply-box .apply-label span {
	color: var(--subColor);
}

.slogistic-apply-box .form-control {
	width: 100%;
	height: 46px;
	padding: 8px 14px;
	font-size: 14px;
	border-radius: 6px;
	border: 1px solid #cbd5e1;
	background-color: #fff;
	color: #0f172a;
}

.slogistic-apply-box input[type="file"].form-control {
	padding: 7px 12px;
	line-height: 1.6;
}

.slogistic-apply-box textarea.form-control {
	height: auto;
	padding: 12px 14px;
}

/* Thông báo phản hồi & lỗi của Contact Form 7 */
.wpcf7-not-valid-tip {
	font-size: 12px !important;
	color: #dc2626 !important;
	margin-top: -12px;
	margin-bottom: 10px;
	display: block;
}

.slogistic-apply-box .wpcf7-not-valid-tip,
.form-coment .wpcf7-not-valid-tip {
	margin-top: 4px;
	margin-bottom: 4px;
}

.wpcf7 form .wpcf7-response-output {
	margin: 15px 0 0 !important;
	padding: 10px 15px !important;
	border-radius: 6px !important;
	font-size: 14px !important;
	font-weight: 600 !important;
}

.wpcf7 form.sent .wpcf7-response-output {
	border-color: #16a34a !important;
	background-color: #dcfce7 !important;
	color: #15803d !important;
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
	border-color: #f59e0b !important;
	background-color: #fef3c7 !important;
	color: #b45309 !important;
}

.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
	border-color: #dc2626 !important;
	background-color: #fee2e2 !important;
	color: #b91c1c !important;
}

footer.footer .block-payment .wpcf7 form .wpcf7-response-output {
	margin: 8px 0 0 !important;
	padding: 6px 10px !important;
	font-size: 12px !important;
}

/* ==========================================================================
   TỐI ƯU GIAO DIỆN MOBILE & MENU HAMBURGER (RESPONSIVE OPTIMIZATION)
   ========================================================================== */

/* Mặc định ẩn hoàn toàn lớp phủ nền đen (.mobile-nav-overflow) trên mọi thiết bị khi chưa mở menu */
.mobile-nav-overflow,
header.header .mobile-nav-overflow {
	display: none !important;
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
	z-index: -1 !important;
}

/* Ẩn menu mobile trên màn hình Desktop (>= 992px) khi giữ nguyên DOM */
@media (min-width: 992px) {

	.header-menu-mobile,
	header.header .header-menu-mobile,
	.mobile-nav-overflow,
	header.header .mobile-nav-overflow {
		display: none !important;
	}
}

/* Màn hình Tablet & Mobile (<= 991px) */
@media (max-width: 991px) {
	html,
	body,
	.bodywrap {
		max-width: 100vw !important;
		overflow-x: hidden !important;
	}

	body.menu-mobile-open {
		overflow: hidden !important;
	}

	/* Đảm bảo Header và Sticky Header không bao giờ tràn khỏi khung màn hình mobile */
	header.header,
	header.header .main-header,
	header.header.hSticky .main-header {
		width: 100% !important;
		max-width: 100vw !important;
		left: 0 !important;
		right: 0 !important;
		box-sizing: border-box !important;
	}

	header.header .main-header {
		padding: 10px 0 !important;
	}

	header.header .main-header .container {
		width: 100% !important;
		max-width: 100% !important;
		padding-left: 12px !important;
		padding-right: 12px !important;
		box-sizing: border-box !important;
	}

	/* Ẩn thanh menu ngang desktop (.header-menu) và cột thông tin giữa để Logo + Icon nằm gọn trên 1 hàng */
	header.header .header-menu,
	header.header .main-header-new,
	header.header .main-header .box-hearder>.row>.col-lg-6,
	header.header .main-header .box-hearder>.row>.d-none.d-lg-block {
		display: none !important;
	}

	header.header .main-header .box-hearder>.row.align-items-center {
		display: flex !important;
		flex-wrap: nowrap !important;
		align-items: center !important;
		justify-content: space-between !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		width: 100% !important;
	}

	/* Cột Logo bên trái trên Mobile/Tablet */
	header.header .main-header .align-items-center .header-logo {
		flex: 0 0 auto !important;
		width: auto !important;
		max-width: 44% !important;
		padding: 0 !important;
		margin: 0 !important;
		order: 1 !important;
		text-align: left !important;
	}

	header.header .main-header .align-items-center .header-logo a,
	header.header .main-header .align-items-center .header-logo .logo-wrapper {
		width: auto !important;
		max-width: 145px !important;
		height: auto !important;
		aspect-ratio: auto !important;
		margin: 0 !important;
		display: inline-flex !important;
		align-items: center !important;
	}

	header.header .main-header .header-logo .logo-wrapper img {
		max-height: 40px !important;
		width: auto !important;
		max-width: 100% !important;
		height: auto !important;
		object-fit: contain !important;
	}

	/* Cụm Icon chức năng & Nút Hamburger bên phải trên Mobile/Tablet */
	header.header .main-header .align-items-center .header-right {
		flex: 1 1 auto !important;
		width: auto !important;
		max-width: 56% !important;
		padding: 0 !important;
		margin: 0 !important;
		order: 2 !important;
		display: flex !important;
		align-items: center !important;
		justify-content: flex-end !important;
		flex-wrap: nowrap !important;
		gap: 6px !important;
	}

	header.header .main-header .align-items-center .header-right>div,
	header.header .main-header .align-items-center .header-right>button {
		margin: 0 !important;
		padding: 0 !important;
		flex-shrink: 0 !important;
	}

	header.header .main-header .align-items-center .header-right .sudes-header-search a,
	header.header .main-header .align-items-center .header-right .sudes-header-account>a,
	header.header .main-header .align-items-center .header-right .sudes-header-iwish a,
	header.header .main-header .align-items-center .header-right .sudes-header-cart>a {
		width: 34px !important;
		height: 34px !important;
		padding: 0 !important;
		margin: 0 !important;
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
	}

	header.header .main-header .align-items-center .header-right .box-icon {
		width: 34px !important;
		height: 34px !important;
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
	}

	header.header .main-header .align-items-center .header-right .box-icon svg {
		width: 17px !important;
		height: 17px !important;
	}

	/* Nút Hamburger Menu (#btn-menu-mobile) */
	header.header #btn-menu-mobile,
	#btn-menu-mobile {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		width: 34px !important;
		height: 34px !important;
		padding: 0 !important;
		margin: 0 !important;
		border-radius: 6px !important;
		border: 1px solid #d4dde7 !important;
		background: #fff !important;
		color: var(--mainColor) !important;
		cursor: pointer !important;
		flex-shrink: 0 !important;
		transition: all 0.2s ease !important;
	}

	header.header #btn-menu-mobile:hover,
	header.header #btn-menu-mobile:active,
	#btn-menu-mobile:hover,
	#btn-menu-mobile:active {
		background: var(--mainColor) !important;
		color: #fff !important;
		border-color: var(--mainColor) !important;
	}

	header.header #btn-menu-mobile svg,
	#btn-menu-mobile svg {
		width: 20px !important;
		height: 20px !important;
	}

	/* Ngăn kéo Menu Mobile (.header-menu-mobile) */
	header.header .header-menu-mobile,
	.header-menu-mobile {
		position: fixed !important;
		top: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		left: auto !important;
		width: 300px !important;
		max-width: 82vw !important;
		height: 100vh !important;
		z-index: 99999 !important;
		background: #fff !important;
		transform: translateX(115%) !important;
		visibility: hidden !important;
		pointer-events: none !important;
		transition: transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1), visibility 0.35s !important;
		box-shadow: none !important;
		overflow: visible !important;
	}

	header.header .header-menu-mobile.current,
	.header-menu-mobile.current {
		transform: translateX(0) !important;
		visibility: visible !important;
		pointer-events: auto !important;
		box-shadow: -4px 0 24px rgba(0, 0, 0, 0.18) !important;
	}

	header.header .header-menu-mobile:not(.current) .close-mb-menu,
	.header-menu-mobile:not(.current) .close-mb-menu {
		display: none !important;
	}

	.header-menu-mobile>.container,
	.header-menu-mobile .navigation-horizontal-mobile {
		padding: 0 !important;
		height: 100% !important;
		overflow: visible !important;
		display: flex;
		flex-direction: column;
	}

	.header-menu-mobile .title_menu {
		position: relative;
		flex-shrink: 0;
	}

	.header-menu-mobile.current .title_menu .close-mb-menu {
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		position: absolute !important;
		top: 0 !important;
		right: 100% !important;
		width: 38px !important;
		height: 39px !important;
		background-color: var(--subColor) !important;
		border-radius: 6px 0 0 6px;
		cursor: pointer;
		z-index: 10;
		box-shadow: -3px 2px 8px rgba(0, 0, 0, 0.2);
	}

	.header-menu-mobile .navigation-horizontal-mobile>.row {
		margin: 0 !important;
		flex: 1 1 auto;
		overflow-y: auto;
	}

	.header-menu-mobile #tab-menu-1.tab-content-mb {
		display: block !important;
		padding: 0 !important;
		max-height: calc(100vh - 140px);
		overflow-y: auto;
	}

	.header-menu-mobile .nav_new_menu {
		padding: 6px 0;
		margin: 0;
		list-style: none;
	}

	.header-menu-mobile .nav_new_menu>li {
		position: relative;
		border-bottom: 1px solid #f1f5f9;
	}

	.header-menu-mobile .nav_new_menu>li>a {
		display: block;
		padding: 11px 44px 11px 16px !important;
		font-size: 15px;
		font-weight: 600;
		color: #1e293b;
		line-height: 1.4;
	}

	.header-menu-mobile .nav_new_menu>li.active>a,
	.header-menu-mobile .nav_new_menu>li.current>a {
		color: var(--subColor) !important;
	}

	.header-menu-mobile .nav_new_menu li>.open_mnu {
		position: absolute;
		top: 0;
		right: 0;
		width: 42px;
		height: 42px;
		display: flex !important;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		z-index: 2;
	}

	.header-menu-mobile .nav_new_menu li>.dropdown-menu {
		position: static !important;
		float: none !important;
		width: 100% !important;
		border: none !important;
		box-shadow: none !important;
		background: #f8fafc !important;
		padding: 4px 0 4px 16px !important;
		margin: 0 !important;
	}

	.header-menu-mobile .list-menu-account {
		margin-top: auto;
		flex-shrink: 0;
		background: #fff;
	}

	/* Chỉ hiển thị lớp phủ nền đen mờ (.mobile-nav-overflow.open) KHI mở menu hoặc bộ lọc trên mobile */
	header.header .mobile-nav-overflow.open,
	.mobile-nav-overflow.open {
		display: block !important;
		position: fixed !important;
		inset: 0 !important;
		width: 100vw !important;
		height: 100vh !important;
		background: rgba(15, 23, 42, 0.55) !important;
		opacity: 1 !important;
		visibility: visible !important;
		pointer-events: auto !important;
		z-index: 99990 !important;
	}

	/* Sửa lỗi cắt thẻ thống kê ở trang chủ trên Mobile/Tablet */
	.section_video_thongke .box_thongke .col-lg-6:nth-child(odd),
	.section_video_thongke .box_thongke .col-lg-6:nth-child(even) {
		transform: none !important;
		margin-bottom: 16px;
	}

	.section_video_thongke .box_thongke .item {
		height: 100%;
		padding: 20px 15px;
	}

	/* Tối ưu thẻ sản phẩm trên màn hình cảm ứng (hiển thị nút thao tác trực tiếp) */
	.item_product_main {
		padding-bottom: 12px !important;
	}

	.item_product_main .product-info .product-button {
		position: static !important;
		opacity: 1 !important;
		visibility: visible !important;
		transform: none !important;
		display: block !important;
		margin-top: 8px;
	}

	.item_product_main .product-info .product-button .btn-views {
		padding: 7px 10px;
		font-size: 13px;
		border-radius: 6px;
	}

	/* Tối ưu Bộ lọc & Sắp xếp trên trang Sản phẩm (<= 991px) */
	aside.dqdt-sidebar.active {
		overflow: visible !important;
		z-index: 99995 !important;
	}

	aside.dqdt-sidebar .filter-content {
		max-height: 100vh;
		overflow-y: auto;
		padding-bottom: 40px;
	}

	.sort-cate .sort-cate-right ul.open-sort-mb {
		display: block !important;
		z-index: 999;
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
		border-radius: 6px;
	}
}

/* Màn hình Điện thoại (<= 767px) */
@media (max-width: 767px) {

	/* Hero Video Banner trang chủ */
	.section_slider .iframe-video,
	.section_slider .iframe-video .thumb-slider-video {
		min-height: 300px !important;
		height: 300px !important;
	}

	.section_slider .iframe-video video {
		min-height: 300px !important;
		height: 300px !important;
		object-fit: cover !important;
	}

	.section_slider .slider-text {
		padding: 16px 12px !important;
		width: 100% !important;
		box-sizing: border-box !important;
	}

	.section_slider .slider-text .title {
		font-size: 13px !important;
		margin-bottom: 6px !important;
	}

	.section_slider .slider-text .content {
		font-size: 20px !important;
		line-height: 1.35 !important;
		margin-bottom: 8px !important;
	}

	.section_slider .slider-text .content_2 {
		font-size: 13px !important;
		line-height: 1.5 !important;
		margin-bottom: 14px !important;
		display: -webkit-box !important;
		-webkit-line-clamp: 3 !important;
		-webkit-box-orient: vertical !important;
		overflow: hidden !important;
	}

	.section_slider .slider-text .slider-one_button a {
		padding: 8px 18px !important;
		font-size: 13px !important;
	}

	/* Form yêu cầu báo giá trang chủ */
	.section_form .box_form_contact {
		padding: 24px 16px !important;
	}

	.section_form .box_form_contact .arrow-up {
		display: none !important;
	}

	.section_form .box_form_contact .group-radio-service {
		padding: 36px 12px 10px !important;
	}

	.section_form .box_form_contact .group-radio-service .title-font-new {
		top: 8px !important;
		left: 12px !important;
		font-size: 14px;
	}

	.section_form .box_form_contact .group-radio-service .service-check {
		margin-bottom: 6px;
		display: inline-flex;
		align-items: center;
	}
}

/* Màn hình Điện thoại nhỏ (<= 575px) */
@media (max-width: 575px) {
	header.header .main-header .align-items-center .header-logo a,
	header.header .main-header .align-items-center .header-logo .logo-wrapper {
		max-width: 120px !important;
	}

	header.header .main-header .header-logo .logo-wrapper img {
		max-height: 36px !important;
	}

	header.header .main-header .align-items-center .header-right {
		gap: 5px !important;
	}

	header.header .main-header .align-items-center .header-right .sudes-header-search a,
	header.header .main-header .align-items-center .header-right .sudes-header-account>a,
	header.header .main-header .align-items-center .header-right .sudes-header-iwish a,
	header.header .main-header .align-items-center .header-right .sudes-header-cart>a,
	header.header .main-header .align-items-center .header-right .box-icon,
	header.header #btn-menu-mobile,
	#btn-menu-mobile {
		width: 32px !important;
		height: 32px !important;
	}
}

/* Màn hình Điện thoại siêu nhỏ (<= 380px) */
@media (max-width: 380px) {
	header.header .main-header .align-items-center .header-logo a,
	header.header .main-header .align-items-center .header-logo .logo-wrapper {
		max-width: 102px !important;
	}

	header.header .main-header .align-items-center .header-right {
		gap: 4px !important;
	}

	header.header .main-header .align-items-center .header-right .sudes-header-search a,
	header.header .main-header .align-items-center .header-right .sudes-header-account>a,
	header.header .main-header .align-items-center .header-right .sudes-header-iwish a,
	header.header .main-header .align-items-center .header-right .sudes-header-cart>a,
	header.header .main-header .align-items-center .header-right .box-icon,
	header.header #btn-menu-mobile,
	#btn-menu-mobile {
		width: 30px !important;
		height: 30px !important;
	}
}

/* ==========================================================================
   WOOCOMMERCE / FLATSOME NATIVE PRODUCT GALLERY (FLEXSLIDER + PHOTOSWIPE + ZOOM)
   ========================================================================== */
.product-image-block .product-gallery-default {
	position: relative;
	width: 100%;
}

.product-image-block .product-gallery-default>.badge-container,
.product-image-block .product-gallery-default>.image-tools {
	display: none !important;
}

.woocommerce-product-gallery {
	position: relative;
	width: 100%;
	margin-bottom: 16px;
}

.woocommerce-product-gallery .woocommerce-product-gallery__wrapper {
	margin: 0;
	padding: 0;
}

.woocommerce-product-gallery .flex-viewport,
.woocommerce-product-gallery:not(.flexslider) .woocommerce-product-gallery__wrapper {
	border: 1px solid #eaebf3;
	border-radius: 10px;
	background: #fff;
	overflow: hidden;
	margin-bottom: 12px;
}

.woocommerce-product-gallery .woocommerce-product-gallery__image {
	position: relative;
	overflow: hidden;
	background: #fff;
	text-align: center;
	margin: 0;
}

.woocommerce-product-gallery .woocommerce-product-gallery__image a {
	display: block;
	width: 100%;
}

.woocommerce-product-gallery .woocommerce-product-gallery__image img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 400px;
	object-fit: contain;
	margin: 0 auto;
}

/* Nút phóng to Lightbox mặc định của WooCommerce (PhotoSwipe Trigger) */
.woocommerce-product-gallery__trigger {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 9;
	width: 38px;
	height: 38px;
	background-color: #fff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23113465' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3Cline x1='11' y1='8' x2='11' y2='14'/%3E%3Cline x1='8' y1='11' x2='14' y2='11'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	border: 1px solid #e2e8f0;
	border-radius: 50%;
	display: block;
	font-size: 0 !important;
	line-height: 0;
	color: transparent !important;
	text-indent: -9999px;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
	transition: all 0.2s ease;
}

.woocommerce-product-gallery__trigger:hover {
	border-color: var(--mainColor);
	transform: scale(1.06);
	box-shadow: 0 4px 12px rgba(17, 52, 101, 0.2);
}

/* Dải ảnh Thumbnail bên dưới của FlexSlider (.flex-control-thumbs) */
.woocommerce-product-gallery ol.flex-control-nav.flex-control-thumbs {
	list-style: none !important;
	margin: 12px 0 0 !important;
	padding: 0 !important;
	display: grid !important;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
}

.woocommerce-product-gallery ol.flex-control-nav.flex-control-thumbs li {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.woocommerce-product-gallery ol.flex-control-nav.flex-control-thumbs li img {
	width: 100%;
	height: 82px;
	object-fit: contain;
	background: #fff;
	border: 1px solid #eaebf3;
	border-radius: 8px;
	padding: 4px;
	cursor: pointer;
	opacity: 0.6;
	transition: all 0.2s ease;
	display: block;
}

.woocommerce-product-gallery ol.flex-control-nav.flex-control-thumbs li img.flex-active,
.woocommerce-product-gallery ol.flex-control-nav.flex-control-thumbs li img:hover {
	opacity: 1;
	border-color: var(--mainColor);
	box-shadow: 0 0 0 1px var(--mainColor);
}

/* Đảm bảo PhotoSwipe Lightbox luôn hiển thị trên cùng */
.pswp {
	z-index: 100000 !important;
}

/* ==========================================================================
   CHUẨN HÓA SLIDER & THUMBNAIL TRANG CHI TIẾT DỊCH VỤ (.page-chi-tiet-du-an)
   ========================================================================== */
.page-chi-tiet-du-an .gallery-top,
.slogistic-gallery-wrap .gallery-top {
	position: relative;
	display: block;
	width: 100%;
	margin-bottom: 12px !important;
	border-radius: 10px;
	overflow: hidden;
}

.page-chi-tiet-du-an .gallery-top .swiper-slide,
.slogistic-gallery-wrap .gallery-top .swiper-slide {
	position: relative;
	width: 100%;
	padding-bottom: 56.25% !important;
	height: 0 !important;
	overflow: hidden;
	border-radius: 10px;
}

.page-chi-tiet-du-an .gallery-top .swiper-slide img,
.slogistic-gallery-wrap .gallery-top .swiper-slide img {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	transform: none !important;
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	max-height: 100% !important;
	object-fit: cover !important;
	border-radius: 10px;
	display: block;
}

.page-chi-tiet-du-an .gallery-thumbs,
.slogistic-gallery-wrap .gallery-thumbs {
	margin-top: 10px;
	width: 100%;
}

.page-chi-tiet-du-an .gallery-thumbs .swiper-slide,
.slogistic-gallery-wrap .gallery-thumbs .swiper-slide {
	border: 1.5px solid #e2e8f0;
	cursor: pointer;
	background: #fff;
	overflow: hidden;
	height: auto !important;
	border-radius: 8px;
	padding: 2px;
	opacity: 0.65;
	transition: all 0.2s ease;
}

.page-chi-tiet-du-an .gallery-thumbs .swiper-slide.swiper-slide-thumb-active,
.page-chi-tiet-du-an .gallery-thumbs .swiper-slide:hover,
.slogistic-gallery-wrap .gallery-thumbs .swiper-slide.swiper-slide-thumb-active,
.slogistic-gallery-wrap .gallery-thumbs .swiper-slide:hover {
	border-color: var(--mainColor);
	opacity: 1;
}

.page-chi-tiet-du-an .gallery-thumbs .swiper-slide .p-100,
.slogistic-gallery-wrap .gallery-thumbs .swiper-slide .p-100 {
	position: relative !important;
	display: block !important;
	width: 100% !important;
	height: 0 !important;
	padding: 0 0 56.25% 0 !important;
	aspect-ratio: auto !important;
	border-radius: 6px !important;
	overflow: hidden;
}

.page-chi-tiet-du-an .gallery-thumbs .swiper-slide .p-100 img,
.slogistic-gallery-wrap .gallery-thumbs .swiper-slide .p-100 img {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	transform: none !important;
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	max-height: 100% !important;
	object-fit: cover !important;
	border-radius: 6px !important;
	display: block;
}

/* Mũi tên điều hướng Previous / Next cho Slider các trang Dịch vụ & Thư viện ảnh */
.page-dich-vu .swiper-container .swiper-button-next,
.page-dich-vu .swiper-container .swiper-button-prev,
.page-chi-tiet-du-an .swiper-container .swiper-button-next,
.page-chi-tiet-du-an .swiper-container .swiper-button-prev,
.slogistic-gallery-wrap .swiper-container .swiper-button-next,
.slogistic-gallery-wrap .swiper-container .swiper-button-prev {
	background-image: none !important;
	background-color: var(--mainColor);
	border-radius: 50%;
	width: 50px;
	height: 50px;
	margin: 0 !important;
	top: 50% !important;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9;
	transition: background-color 0.25s ease, opacity 0.25s ease, transform 0.25s ease;
}

.page-dich-vu .swiper-container .swiper-button-next:after,
.page-dich-vu .swiper-container .swiper-button-prev:after,
.page-chi-tiet-du-an .swiper-container .swiper-button-next:after,
.page-chi-tiet-du-an .swiper-container .swiper-button-prev:after,
.slogistic-gallery-wrap .swiper-container .swiper-button-next:after,
.slogistic-gallery-wrap .swiper-container .swiper-button-prev:after {
	display: none !important;
	content: none !important;
}

.page-dich-vu .swiper-container .swiper-button-next,
.page-chi-tiet-du-an .swiper-container .swiper-button-next,
.slogistic-gallery-wrap .swiper-container .swiper-button-next {
	right: 15px;
	transform: translateY(-50%) !important;
}

.page-dich-vu .swiper-container .swiper-button-prev,
.page-chi-tiet-du-an .swiper-container .swiper-button-prev,
.slogistic-gallery-wrap .swiper-container .swiper-button-prev {
	left: 15px;
	transform: translateY(-50%) rotate(180deg) !important;
}

.page-dich-vu .swiper-container .swiper-button-next svg,
.page-dich-vu .swiper-container .swiper-button-prev svg,
.page-chi-tiet-du-an .swiper-container .swiper-button-next svg,
.page-chi-tiet-du-an .swiper-container .swiper-button-prev svg,
.slogistic-gallery-wrap .swiper-container .swiper-button-next svg,
.slogistic-gallery-wrap .swiper-container .swiper-button-prev svg {
	width: 100% !important;
	height: 100% !important;
	display: block !important;
	flex-shrink: 0;
}

.page-dich-vu .swiper-container .swiper-button-next svg path,
.page-dich-vu .swiper-container .swiper-button-prev svg path,
.page-chi-tiet-du-an .swiper-container .swiper-button-next svg path,
.page-chi-tiet-du-an .swiper-container .swiper-button-prev svg path,
.slogistic-gallery-wrap .swiper-container .swiper-button-next svg path,
.slogistic-gallery-wrap .swiper-container .swiper-button-prev svg path {
	stroke: #ffffff !important;
}

.page-dich-vu .swiper-container .swiper-button-next:not(.swiper-button-disabled):hover,
.page-dich-vu .swiper-container .swiper-button-prev:not(.swiper-button-disabled):hover,
.page-chi-tiet-du-an .swiper-container .swiper-button-next:not(.swiper-button-disabled):hover,
.page-chi-tiet-du-an .swiper-container .swiper-button-prev:not(.swiper-button-disabled):hover,
.slogistic-gallery-wrap .swiper-container .swiper-button-next:not(.swiper-button-disabled):hover,
.slogistic-gallery-wrap .swiper-container .swiper-button-prev:not(.swiper-button-disabled):hover {
	background-color: var(--subColor);
}

/* Khi hết slide: Vô hiệu hóa nút (giữ pointer-events để không xuyên chuột xuống ảnh bên dưới) */
.page-dich-vu .swiper-container .swiper-button-next.swiper-button-disabled,
.page-dich-vu .swiper-container .swiper-button-prev.swiper-button-disabled,
.page-chi-tiet-du-an .swiper-container .swiper-button-next.swiper-button-disabled,
.page-chi-tiet-du-an .swiper-container .swiper-button-prev.swiper-button-disabled,
.slogistic-gallery-wrap .gallery-top .swiper-button-next.swiper-button-disabled,
.slogistic-gallery-wrap .gallery-top .swiper-button-prev.swiper-button-disabled {
	opacity: 0.35 !important;
	cursor: not-allowed !important;
	pointer-events: auto !important;
	background-color: var(--mainColor) !important;
}

.slogistic-gallery-wrap .gallery-thumbs .swiper-button-next,
.slogistic-gallery-wrap .gallery-thumbs .swiper-button-prev {
	width: 30px;
	height: 30px;
}

.slogistic-gallery-wrap .gallery-thumbs .swiper-button-next.swiper-button-disabled,
.slogistic-gallery-wrap .gallery-thumbs .swiper-button-prev.swiper-button-disabled {
	display: none !important;
}

@media (max-width: 1025px) {
	.page-dich-vu .swiper-container .swiper-button-next,
	.page-dich-vu .swiper-container .swiper-button-prev,
	.page-chi-tiet-du-an .swiper-container .swiper-button-next,
	.page-chi-tiet-du-an .swiper-container .swiper-button-prev,
	.slogistic-gallery-wrap .gallery-top .swiper-button-next,
	.slogistic-gallery-wrap .gallery-top .swiper-button-prev {
		width: 38px;
		height: 38px;
	}
}

/* ==========================================================================
   FLATSOME NATIVE UX BUILDER ELEMENTS COMPATIBILITY & STYLING (v2.1.0)
   ========================================================================== */

/* 1. Section & Background Fill */
section.section {
	position: relative;
	width: 100%;
	display: block;
}

section.section>.section-bg.fill {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
}

section.section>.section-bg.fill img.bg {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
	display: block;
}

section.section>.section-content.relative {
	position: relative;
	z-index: 1;
	width: 100%;
}

/* 2. Flatsome 12-Column Responsive Grid Mapped to S Logistic Container (1310px) */
section.section>.section-content>.row:not(.row-full-width),
#content>.row:not(.row-full-width) {
	max-width: 1310px;
	width: 100%;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: 5px;
	padding-right: 5px;
}

section.section>.section-content>.text {
	max-width: 1310px;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding-left: 15px;
	padding-right: 15px;
}

.col-inner>.row,
.panel>.row {
	margin-left: -10px !important;
	margin-right: -10px !important;
	width: auto !important;
}

.row>.col {
	position: relative;
	width: 100%;
	padding-left: 10px;
	padding-right: 10px;
	margin-bottom: 0;
	box-sizing: border-box;
}

.row>.col>.col-inner {
	position: relative;
	width: 100%;
}

/* Small (Mobile default) */
.row>.col.small-1 {
	flex: 0 0 8.333333%;
	max-width: 8.333333%;
}

.row>.col.small-2 {
	flex: 0 0 16.666667%;
	max-width: 16.666667%;
}

.row>.col.small-3 {
	flex: 0 0 25%;
	max-width: 25%;
}

.row>.col.small-4 {
	flex: 0 0 33.333333%;
	max-width: 33.333333%;
}

.row>.col.small-5 {
	flex: 0 0 41.666667%;
	max-width: 41.666667%;
}

.row>.col.small-6 {
	flex: 0 0 50%;
	max-width: 50%;
}

.row>.col.small-7 {
	flex: 0 0 58.333333%;
	max-width: 58.333333%;
}

.row>.col.small-8 {
	flex: 0 0 66.666667%;
	max-width: 66.666667%;
}

.row>.col.small-9 {
	flex: 0 0 75%;
	max-width: 75%;
}

.row>.col.small-10 {
	flex: 0 0 83.333333%;
	max-width: 83.333333%;
}

.row>.col.small-11 {
	flex: 0 0 91.666667%;
	max-width: 91.666667%;
}

.row>.col.small-12 {
	flex: 0 0 100%;
	max-width: 100%;
}

/* Medium (Tablet >= 550px) */
@media (min-width: 550px) {
	.row>.col.medium-1 {
		flex: 0 0 8.333333%;
		max-width: 8.333333%;
	}

	.row>.col.medium-2 {
		flex: 0 0 16.666667%;
		max-width: 16.666667%;
	}

	.row>.col.medium-3 {
		flex: 0 0 25%;
		max-width: 25%;
	}

	.row>.col.medium-4 {
		flex: 0 0 33.333333%;
		max-width: 33.333333%;
	}

	.row>.col.medium-5 {
		flex: 0 0 41.666667%;
		max-width: 41.666667%;
	}

	.row>.col.medium-6 {
		flex: 0 0 50%;
		max-width: 50%;
	}

	.row>.col.medium-7 {
		flex: 0 0 58.333333%;
		max-width: 58.333333%;
	}

	.row>.col.medium-8 {
		flex: 0 0 66.666667%;
		max-width: 66.666667%;
	}

	.row>.col.medium-9 {
		flex: 0 0 75%;
		max-width: 75%;
	}

	.row>.col.medium-10 {
		flex: 0 0 83.333333%;
		max-width: 83.333333%;
	}

	.row>.col.medium-11 {
		flex: 0 0 91.666667%;
		max-width: 91.666667%;
	}

	.row>.col.medium-12 {
		flex: 0 0 100%;
		max-width: 100%;
	}
}

/* Large (Desktop >= 850px) */
@media (min-width: 850px) {
	.row>.col.large-1 {
		flex: 0 0 8.333333%;
		max-width: 8.333333%;
	}

	.row>.col.large-2 {
		flex: 0 0 16.666667%;
		max-width: 16.666667%;
	}

	.row>.col.large-3 {
		flex: 0 0 25%;
		max-width: 25%;
	}

	.row>.col.large-4 {
		flex: 0 0 33.333333%;
		max-width: 33.333333%;
	}

	.row>.col.large-5 {
		flex: 0 0 41.666667%;
		max-width: 41.666667%;
	}

	.row>.col.large-6 {
		flex: 0 0 50%;
		max-width: 50%;
	}

	.row>.col.large-7 {
		flex: 0 0 58.333333%;
		max-width: 58.333333%;
	}

	.row>.col.large-8 {
		flex: 0 0 66.666667%;
		max-width: 66.666667%;
	}

	.row>.col.large-9 {
		flex: 0 0 75%;
		max-width: 75%;
	}

	.row>.col.large-10 {
		flex: 0 0 83.333333%;
		max-width: 83.333333%;
	}

	.row>.col.large-11 {
		flex: 0 0 91.666667%;
		max-width: 91.666667%;
	}

	.row>.col.large-12 {
		flex: 0 0 100%;
		max-width: 100%;
	}
}

/* 3. Flatsome Native [ux_image] & S Logistic Component Bridging */
.img .img-inner {
	position: relative;
	overflow: hidden;
	border-radius: 10px;
}

.img .img-inner img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 10px;
	object-fit: cover;
}

/* Flatsome [button class="bnt_about_seemore"] Arrow Icon */
a.button.bnt_about_seemore>span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

a.button.bnt_about_seemore>span::after {
	content: "";
	display: inline-block;
	width: 16px;
	height: 16px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23ffffff' d='M30.71,15.29l-7-7a1,1,0,0,0-1.42,1.42L27.59,15H2a1,1,0,0,0,0,2H27.59l-5.3,5.29a1,1,0,0,0,0,1.42,1,1,0,0,0,1.42,0l7-7A1,1,0,0,0,30.71,15.29Z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
}

/* Homepage Section About: 2-Column Info Cards */
.section_about .row.box_info_about {
	gap: 0 !important;
}

.section_about .row.box_info_about>.col.item_info_about {
	background: transparent !important;
	box-shadow: none !important;
	padding: 0 15px !important;
}

@media (max-width: 767px) {
	.section_about .row.box_info_about>.col.item_info_about:first-child {
		margin-bottom: 15px;
	}
}

.section_about .row.box_info_about>.col.item_info_about>.col-inner {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 15px;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0px 1px 18px 0px rgba(0, 0, 0, 0.05);
	height: 100%;
}

.section_about .item_info_about .text {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.section_about .item_info_about .img_about img {
	border-radius: 10px;
	width: 100%;
	height: auto;
	object-fit: cover;
}

/* Homepage Section Video Thong Ke */
.section_video_thongke .col.box_left_thongke {
	background: transparent !important;
	padding: 0 10px !important;
}

.section_video_thongke .col.box_left_thongke>.col-inner {
	background-color: #fff;
	padding: 20px;
	border-radius: 10px;
}

.section_video_thongke .box_thongke>.col>.col-inner,
.section_video_thongke .box_thongke>.col>.col-inner>.text {
	height: 100%;
}

.section_video_thongke .box_thongke>.col:nth-child(odd) {
	transform: translateY(30px);
}

.section_video_thongke .box_thongke>.col:nth-child(odd) .item_thong_ke {
	margin-bottom: 30px;
}

.section_video_thongke .box_thongke>.col:nth-child(even) {
	transform: translateY(80px);
}

@media (max-width: 992px) {
	.section_video_thongke .box_thongke>.col:nth-child(even) {
		transform: translateY(30px);
	}
}

@media (max-width: 767px) {

	.section_video_thongke .box_thongke>.col:nth-child(odd),
	.section_video_thongke .box_thongke>.col:nth-child(even) {
		transform: translateY(20px);
	}

	.section_video_thongke .box_thongke>.col:nth-child(odd) .item_thong_ke,
	.section_video_thongke .box_thongke>.col:nth-child(even) .item_thong_ke {
		margin-bottom: 20px;
	}
}

/* Homepage Section FAQ Sticky Left Column & 4 Process Steps */
.section_faq .col.box_sticky_faq {
	position: relative !important;
	top: auto !important;
}

.section_faq .col.box_sticky_faq>.col-inner {
	position: sticky;
	top: 90px;
}

.section_faq .box_info_inner {
	flex: 1;
}

/* Homepage Section Feedback */
.section_feedback .row>.col>.col-inner {
	height: 100%;
}

.section_feedback .banner_feedback .img-inner,
.section_feedback .banner_feedback .img-inner img {
	height: 100%;
	width: 100%;
	object-fit: cover;
}

/* Homepage Section About 2: Vertical Timeline */
.section_about_2 .col.page-about__timeline--wrap {
	position: relative;
}

.section_about_2 .row.page-about__timeline--item {
	margin-left: 0 !important;
	margin-right: 0 !important;
	align-items: center;
	margin-bottom: 30px;
	position: relative;
}

.section_about_2 .row.page-about__timeline--item:last-child {
	margin-bottom: 0;
}

.section_about_2 .row.page-about__timeline--item:nth-child(2n),
.section_about_2 .row.page-about__timeline--item.reverse {
	flex-direction: row-reverse;
}

@media (min-width: 768px) {

	.section_about_2 .row.page-about__timeline--item>.col.page-about__timeline--image,
	.section_about_2 .row.page-about__timeline--item>.col.page-about__timeline--image>.col-inner {
		position: static !important;
	}

	.section_about_2 .row.page-about__timeline--item>.col.page-about__timeline--image {
		padding-left: 0 !important;
		padding-right: 100px !important;
	}

	.section_about_2 .row.page-about__timeline--item:nth-child(2n)>.col.page-about__timeline--image,
	.section_about_2 .row.page-about__timeline--item.reverse>.col.page-about__timeline--image {
		padding-right: 0 !important;
		padding-left: 100px !important;
	}

	.section_about_2 .row.page-about__timeline--item>.col.page-about__timeline--content {
		padding-right: 0 !important;
		padding-left: 100px !important;
	}

	.section_about_2 .row.page-about__timeline--item:nth-child(2n)>.col.page-about__timeline--content,
	.section_about_2 .row.page-about__timeline--item.reverse>.col.page-about__timeline--content {
		padding-left: 0 !important;
		padding-right: 100px !important;
		text-align: right;
	}
}

.section_about_2 .page-about__timeline--image .img {
	position: relative;
	z-index: 9;
}

.section_about_2 .page-about__timeline--image .img .img-inner img {
	width: 100%;
	height: 300px;
	object-fit: cover;
	border-radius: 10px;
}

/* Section Form (Yêu Cầu Báo Giá on Homepage & Dịch Vụ) */
.section_form>.section-content>.row.box_info_form {
	max-width: 1290px;
	background-color: #fff;
	border-radius: 10px;
	border: 1px solid #E8E8EE;
	overflow: hidden;
	padding: 0;
	align-items: stretch;
}

.section_form .col.box_form_contact {
	background: transparent !important;
	padding: 0 !important;
}

.section_form .col.box_form_contact>.col-inner {
	background-color: #fff;
	border-radius: 20px;
	padding: 30px;
	position: relative;
	height: 100%;
}

@media (max-width: 767px) {
	.section_form .col.box_form_contact>.col-inner {
		padding: 15px;
	}
}

.section_form .col.box_form_contact .text {
	position: static;
}

.section_form .col.box_info_form_right_col {
	padding: 0 !important;
}

.section_form .col.box_info_form_right_col>.col-inner,
.section_form .col.box_info_form_right_col .img,
.section_form .col.box_info_form_right_col .img-inner {
	height: 100%;
	border-radius: 0;
}

.section_form .col.box_info_form_right_col .img-inner img {
	width: 100%;
	height: 100%;
	min-height: 460px;
	object-fit: cover;
	border-radius: 0;
}

/* Service Detail Pages (.page-chi-tiet-du-an) */
.page-chi-tiet-du-an .col.dom_live_content {
	background: transparent !important;
	padding: 0 10px !important;
	margin-bottom: 0 !important;
}

.page-chi-tiet-du-an .col.dom_live_content>.col-inner {
	padding: 20px;
	border-radius: 10px;
	background: #f3f5f7;
	margin-bottom: 20px;
}

/* Tuyển Dụng (.layout-blog-tuyen-dung) Benefit Timeline */
.layout-blog-tuyen-dung .col.list_benefit>.col-inner {
	position: relative;
}

@media (min-width: 992px) {
	.layout-blog-tuyen-dung .col.list_benefit>.col-inner::before {
		content: "";
		position: absolute;
		width: 4px;
		background-color: #D9D9D9;
		top: 0;
		bottom: 0;
		left: 50%;
		margin-left: -2px;
	}
}

.layout-blog-tuyen-dung .row.item_benefit {
	margin-left: 0 !important;
	margin-right: 0 !important;
	justify-content: space-between;
	align-items: center;
}

.layout-blog-tuyen-dung .row.item_benefit:nth-child(even) {
	flex-direction: row-reverse;
}

/* FAQ Page (.page-faq) Sticky Left Box */
.page-faq .col.box_right_faq_col>.col-inner {
	background: #efefef;
	padding: 15px;
	border-radius: 10px;
	position: sticky;
	top: 10px;
}

/* Contact Page (.layout-contact) Form Box */
.layout-contact .col.form-contact-col>.col-inner {
	background-color: #efefef;
	padding: 20px;
	border-radius: 10px;
	height: 100%;
}

/* 4. Flatsome Native [button] Styled as S Logistic Signature Button (.bnt_about_seemore) */
a.button.bnt_about_seemore>span {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

a.button.bnt_about_seemore>span svg {
	width: 23px;
	height: 15px;
	fill: currentColor;
}

.slogistic-anchor-bar .col-inner {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 15px;
	margin-bottom: 30px;
}

/* 5. Flatsome Native [tabgroup] & [tab] Styled as S Logistic Service Tabs */
.tabbed-content.slogistic-service-tabs {
	margin: 0;
}

.tabbed-content.slogistic-service-tabs>ul.nav {
	display: flex !important;
	flex-wrap: wrap;
	justify-content: center;
	gap: 15px;
	list-style: none !important;
	padding: 0 !important;
	margin: 0 0 30px 0 !important;
	border: 0 !important;
}

.tabbed-content.slogistic-service-tabs>ul.nav>li.tab {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.tabbed-content.slogistic-service-tabs>ul.nav>li.tab>a {
	display: inline-block;
	padding: 8px 20px;
	border-radius: 30px;
	border: 1px solid var(--mainColor);
	background: transparent;
	color: var(--mainColor) !important;
	font-weight: 600;
	font-size: 1.6rem;
	text-decoration: none !important;
	transition: all 0.25s ease;
}

.tabbed-content.slogistic-service-tabs>ul.nav>li.tab.active>a,
.tabbed-content.slogistic-service-tabs>ul.nav>li.tab>a:hover {
	background: var(--subColor) !important;
	border-color: var(--subColor) !important;
	color: #fff !important;
}

.tabbed-content.slogistic-service-tabs>.tab-panels>.panel {
	display: none;
}

.tabbed-content.slogistic-service-tabs>.tab-panels>.panel.active {
	display: block;
}

/* 6. Flatsome Native [accordion] & [accordion-item] Styled as S Logistic FAQ */
.accordion.slogistic-faq-accordion {
	width: 100%;
	padding-top: 10px;
	margin-bottom: 20px;
}

.accordion.slogistic-faq-accordion .accordion-item {
	margin-bottom: 20px;
	border-radius: 10px;
	overflow: hidden;
	background-color: #fff;
}

.page-faq .accordion.slogistic-faq-accordion .accordion-item {
	background-color: #efefef;
}

.accordion.slogistic-faq-accordion .accordion-title {
	display: block !important;
	position: relative;
	padding: 15px 55px 15px 15px;
	background-color: #000;
	color: #fff !important;
	font-weight: 700;
	font-size: 16px;
	line-height: 22px;
	border-radius: 10px;
	text-decoration: none !important;
	cursor: pointer;
	transition: all 0.25s ease;
}

.accordion.slogistic-faq-accordion .accordion-item.active .accordion-title,
.accordion.slogistic-faq-accordion .accordion-title.active,
.accordion.slogistic-faq-accordion .accordion-title:hover {
	background-color: var(--mainColor);
	color: #fff !important;
}

.accordion.slogistic-faq-accordion .accordion-title .toggle {
	position: absolute;
	right: 5px;
	top: 50%;
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	border-radius: 5px;
	background: var(--subColor);
	border: 0;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	cursor: pointer;
}

.accordion.slogistic-faq-accordion .accordion-title .toggle i {
	display: none;
}

.accordion.slogistic-faq-accordion .accordion-title .toggle::after {
	content: "";
	width: 9px;
	height: 9px;
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: rotate(-45deg);
	transition: transform 0.25s ease;
}

.accordion.slogistic-faq-accordion .accordion-item.active .accordion-title .toggle::after,
.accordion.slogistic-faq-accordion .accordion-title.active .toggle::after {
	transform: rotate(45deg);
}

.accordion.slogistic-faq-accordion .accordion-inner {
	display: none;
	padding: 15px 20px;
	color: #333;
	font-size: 16px;
	line-height: 1.6;
}

.accordion.slogistic-faq-accordion .accordion-inner p:last-child {
	margin-bottom: 0;
}

.accordion.slogistic-faq-accordion .accordion-item.active .accordion-inner {
	display: block;
}

/* ==========================================================================
   11. S LOGISTIC CART, MINI-CART, CHECKOUT & COMPARE UI ENHANCEMENTS
   ========================================================================== */

/* Header Mini-Cart Delete Item & Dual Buttons */
.cartheader .cart_body .ajaxcart__row {
	position: relative;
}

.cartheader .cart_body .js-remove-cart-item {
	position: absolute;
	top: 0;
	right: 0;
	width: 20px;
	height: 20px;
	line-height: 18px;
	text-align: center;
	font-size: 16px;
	font-weight: 700;
	color: #94a3b8;
	background: #f8fafc;
	border-radius: 50%;
	text-decoration: none !important;
	transition: all 0.2s ease;
}

.cartheader .cart_body .js-remove-cart-item:hover {
	color: #fff;
	background: var(--subColor);
}

.cartheader .ajaxcart__footer {
	flex-direction: column;
	align-items: stretch !important;
	gap: 10px;
}

.cartheader .ajaxcart__footer .cart__subtotal {
	justify-content: space-between;
	align-items: center;
	margin-bottom: 4px !important;
}

.cartheader .ajaxcart__footer .cart__subtotal .cart__col-6,
.cartheader .ajaxcart__footer .cart__subtotal .cart__totle {
	width: auto !important;
	margin-bottom: 0 !important;
}

.cartheader .ajaxcart__footer .cart__btn-proceed-checkout-dt {
	display: flex !important;
	gap: 8px;
	width: 100%;
}

.cartheader .ajaxcart__footer .cart__btn-proceed-checkout-dt .btn {
	flex: 1;
	height: 38px;
	line-height: 36px;
	font-size: 1.3rem;
	font-weight: 600;
	border-radius: 6px;
	padding: 0 8px;
	text-align: center;
}

.cartheader .ajaxcart__footer .cart__btn-proceed-checkout-dt .btn-view-cart {
	background: #fff !important;
	color: var(--mainColor) !important;
	border: 1px solid var(--mainColor) !important;
}

.cartheader .ajaxcart__footer .cart__btn-proceed-checkout-dt .btn-view-cart:hover {
	background: #f1f5f9 !important;
}

.cartheader .ajaxcart__footer .cart__btn-proceed-checkout-dt .btn-go-checkout {
	background: var(--mainColor) !important;
	color: #fff !important;
	border: 1px solid var(--mainColor) !important;
}

.cartheader .ajaxcart__footer .cart__btn-proceed-checkout-dt .btn-go-checkout:hover {
	background: var(--subColor) !important;
	border-color: var(--subColor) !important;
}

/* Cart Page Empty Message */
.cart--empty-message {
	padding: 40px 20px;
	text-align: center;
}

.cart--empty-message svg {
	width: 72px;
	height: 72px;
	margin: 0 auto 15px;
	display: block;
	color: var(--mainColor);
	opacity: 0.75;
}

.cart--empty-message p {
	font-size: 1.6rem;
	color: #475569;
	margin-bottom: 18px;
}

.cart--empty-message .btn-continue-shopping {
	display: inline-block;
	background: var(--mainColor);
	color: #fff !important;
	padding: 10px 26px;
	border-radius: 6px;
	font-weight: 600;
	font-size: 1.4rem;
	text-transform: uppercase;
	transition: background 0.25s ease;
}

.cart--empty-message .btn-continue-shopping:hover {
	background: var(--subColor);
}

/* ==========================================================================
   CHECKOUT PAGE (/checkout) - CLEAN 2-COLUMN GRID & FORM STYLING
   ========================================================================== */
.slogistic-checkout-section {
	padding: 35px 0 60px;
	background: #f8fafc;
}

#slogistic-checkout-form {
	margin-bottom: 0 !important;
}

.slogistic-checkout-main-grid {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: 24px;
	align-items: start;
}

@media (max-width: 991px) {
	.slogistic-checkout-main-grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}
}

.slogistic-checkout-col-left {
	display: flex;
	flex-direction: column;
	gap: 24px;
	min-width: 0;
}

.slogistic-checkout-col-right {
	min-width: 0;
}

.slogistic-checkout-card {
	background: #fff;
	border-radius: 12px;
	padding: 24px;
	box-shadow: 0 2px 16px rgba(17, 52, 101, 0.06);
	border: 1px solid #e2e8f0;
}

.slogistic-checkout-summary-card {
	position: sticky;
	top: 85px;
}

.slogistic-checkout-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 14px;
	margin-bottom: 20px;
	border-bottom: 2px solid #f1f5f9;
}

.slogistic-checkout-header h2 {
	font-size: 1.75rem;
	font-weight: 700;
	color: var(--mainColor);
	margin: 0;
	display: flex;
	align-items: center;
	gap: 8px;
	text-transform: uppercase;
}

.slogistic-login-prompt {
	font-size: 1.4rem;
	font-weight: 600;
	color: var(--mainColor);
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.slogistic-login-prompt:hover {
	color: var(--subColor);
}

/* 2-Column Form Grid inside Customer Info Card */
.slogistic-form-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px 20px;
}

.slogistic-form-grid .slogistic-field-full {
	grid-column: 1 / -1;
}

@media (max-width: 767px) {
	.slogistic-form-grid {
		grid-template-columns: 1fr;
		gap: 14px;
	}
}

.slogistic-field {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.slogistic-field label {
	font-size: 1.4rem;
	font-weight: 600;
	color: #1e293b;
	margin: 0 0 6px 0 !important;
	display: block !important;
}

.slogistic-field label .text-danger {
	color: var(--subColor);
}

.slogistic-checkout-card input.form-control,
.slogistic-checkout-card select.form-control,
.slogistic-checkout-card textarea.form-control {
	width: 100% !important;
	height: 44px !important;
	min-height: 44px !important;
	margin: 0 !important;
	padding: 8px 14px !important;
	font-size: 1.4rem !important;
	line-height: 1.5 !important;
	color: #0f172a !important;
	background-color: #fff !important;
	border: 1px solid #cbd5e1 !important;
	border-radius: 8px !important;
	box-shadow: none !important;
	display: block !important;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.slogistic-checkout-card select.form-control {
	padding-right: 34px !important;
}

.slogistic-checkout-card textarea.form-control {
	height: auto !important;
	min-height: 88px !important;
	padding: 10px 14px !important;
}

.slogistic-checkout-card input.form-control:focus,
.slogistic-checkout-card select.form-control:focus,
.slogistic-checkout-card textarea.form-control:focus {
	border-color: var(--mainColor) !important;
	box-shadow: 0 0 0 3px rgba(17, 52, 101, 0.1) !important;
	outline: none !important;
}

/* Payment Methods */
.slogistic-payment-methods {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

label.slogistic-payment-option {
	display: flex !important;
	align-items: flex-start !important;
	gap: 12px !important;
	width: 100% !important;
	padding: 15px 18px !important;
	border: 1.5px solid #cbd5e1 !important;
	border-radius: 10px !important;
	cursor: pointer;
	margin: 0 !important;
	transition: all 0.2s ease;
	background: #fff;
}

label.slogistic-payment-option:hover {
	border-color: #94a3b8 !important;
}

label.slogistic-payment-option.active {
	border-color: var(--mainColor) !important;
	background: #f8fafc !important;
	box-shadow: 0 0 0 1px var(--mainColor);
}

label.slogistic-payment-option input[type="radio"] {
	width: 18px !important;
	height: 18px !important;
	min-height: 18px !important;
	margin: 3px 0 0 0 !important;
	padding: 0 !important;
	flex-shrink: 0 !important;
	accent-color: var(--mainColor);
	cursor: pointer;
	display: inline-block !important;
}

label.slogistic-payment-option .payment-info {
	flex: 1;
	min-width: 0;
}

label.slogistic-payment-option .payment-info strong {
	display: block;
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--mainColor);
	margin-bottom: 3px;
	line-height: 1.35;
}

label.slogistic-payment-option .payment-info span {
	display: block;
	font-size: 1.35rem;
	color: #475569;
	line-height: 1.5;
}

.slogistic-bank-box {
	margin-top: 12px;
	padding: 12px 15px;
	background: #fff;
	border: 1px dashed var(--mainColor);
	border-radius: 8px;
	font-size: 1.35rem;
	color: #1e293b;
}

.slogistic-bank-box p {
	margin: 0 0 5px 0;
}

.slogistic-bank-box p:last-child {
	margin-bottom: 0;
}

.slogistic-bank-box code {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--subColor);
	background: #fef2f2;
	padding: 2px 8px;
	border-radius: 4px;
}

/* Checkout Order Items */
.slogistic-checkout-items {
	max-height: 320px;
	overflow-y: auto;
	margin-bottom: 16px;
	padding-right: 4px;
}

.slogistic-checkout-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid #f1f5f9;
}

.slogistic-checkout-item:last-child {
	border-bottom: none;
}

.slogistic-checkout-item .item-thumb {
	position: relative;
	width: 58px;
	height: 58px;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	flex-shrink: 0;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
}

.slogistic-checkout-item .item-thumb img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	border-radius: 6px;
}

.slogistic-checkout-item .item-qty-badge {
	position: absolute;
	top: -7px;
	right: -7px;
	background: var(--mainColor);
	color: #fff;
	font-size: 1.1rem;
	font-weight: 700;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.slogistic-checkout-item .item-meta {
	flex: 1;
	min-width: 0;
}

.slogistic-checkout-item .item-meta h4 {
	font-size: 1.4rem;
	font-weight: 600;
	color: #1e293b;
	margin: 0 0 3px;
	line-height: 1.35;
}

.slogistic-checkout-item .item-meta span {
	font-size: 1.25rem;
	color: #64748b;
}

.slogistic-checkout-item .item-line-price {
	font-size: 1.45rem;
	font-weight: 700;
	color: var(--subColor);
	white-space: nowrap;
}

/* Coupon Box in Checkout Right Column */
.slogistic-coupon-box {
	padding: 16px 0;
	border-top: 1px solid #e2e8f0;
	border-bottom: 1px solid #e2e8f0;
	margin-bottom: 16px;
}

.slogistic-coupon-box .slogistic-coupon-label {
	display: block !important;
	font-size: 1.4rem;
	font-weight: 700;
	color: #1e293b;
	margin: 0 0 8px 0 !important;
}

.slogistic-coupon-input-row {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	width: 100% !important;
	margin-bottom: 10px !important;
}

.slogistic-coupon-input-row input#ck_coupon_input {
	flex: 1 1 auto !important;
	width: auto !important;
	min-width: 0 !important;
	height: 42px !important;
	min-height: 42px !important;
	margin: 0 !important;
	padding: 0 14px !important;
	font-size: 1.4rem !important;
	font-weight: 600;
	color: #0f172a !important;
	border: 1px solid #cbd5e1 !important;
	border-radius: 8px !important;
	background: #fff !important;
}

.slogistic-coupon-input-row .btn-apply-coupon {
	flex: 0 0 auto !important;
	height: 42px !important;
	line-height: 42px !important;
	padding: 0 20px !important;
	margin: 0 !important;
	background: var(--mainColor) !important;
	color: #fff !important;
	font-weight: 600 !important;
	font-size: 1.4rem !important;
	border-radius: 8px !important;
	border: none !important;
	white-space: nowrap !important;
	cursor: pointer;
	transition: background 0.2s ease;
}

.slogistic-coupon-input-row .btn-apply-coupon:hover {
	background: var(--subColor) !important;
}

.slogistic-quick-coupons {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.quick-coupon-tag {
	display: inline-block;
	font-size: 1.2rem;
	font-weight: 600;
	color: var(--mainColor);
	background: #eff6ff;
	border: 1px dashed var(--mainColor);
	padding: 4px 10px;
	border-radius: 6px;
	cursor: pointer;
	transition: all 0.2s ease;
}

.quick-coupon-tag:hover,
.quick-coupon-tag.active {
	background: var(--mainColor);
	color: #fff;
}

.slogistic-coupon-msg {
	margin-top: 8px;
	font-size: 1.3rem;
}

/* Totals & Place Order Button */
.slogistic-checkout-totals .total-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 6px 0;
	font-size: 1.45rem;
	color: #334155;
}

.slogistic-checkout-totals .grand-total-row {
	margin-top: 8px;
	padding-top: 12px;
	border-top: 2px solid #e2e8f0;
	font-size: 1.65rem;
	font-weight: 700;
	color: #0f172a;
}

.slogistic-checkout-totals .grand-total-price {
	font-size: 2.1rem;
	color: var(--subColor);
	font-weight: 800;
}

.slogistic-checkout-actions {
	margin-top: 16px;
}

.btn-place-order {
	width: 100%;
	height: 48px;
	background: var(--subColor);
	color: #fff;
	border: none;
	border-radius: 8px;
	font-size: 1.6rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	cursor: pointer;
	transition: background 0.25s ease, transform 0.15s ease;
}

.btn-place-order:hover {
	background: var(--mainColor);
}

.btn-place-order:disabled {
	opacity: 0.65;
	cursor: not-allowed;
}

.back-to-cart-link {
	display: block;
	text-align: center;
	margin-top: 12px;
	font-size: 1.4rem;
	font-weight: 600;
	color: var(--mainColor);
}

.back-to-cart-link:hover {
	color: var(--subColor);
}

/* Order Success Screen */
.slogistic-order-success-card {
	max-width: 720px;
	margin: 15px auto;
	background: #fff;
	border-radius: 14px;
	padding: 35px 30px;
	box-shadow: 0 4px 24px rgba(17, 52, 101, 0.08);
	border: 1px solid #dcfce7;
	text-align: center;
}

.slogistic-order-success-card .success-icon {
	width: 68px;
	height: 68px;
	border-radius: 50%;
	background: #dcfce7;
	color: #16a34a;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 16px;
}

/* ==========================================================================
   12. HỆ THỐNG CỬA HÀNG (/he-thong-cua-hang) - STORE LOCATOR & MAP UI
   ========================================================================== */
.page-he-thong .slogistic-store-wrapper {
	background: #fff;
	border-radius: 12px;
	padding: 25px;
	box-shadow: 0 2px 18px rgba(17, 52, 101, 0.06);
	border: 1px solid #f1f5f9;
}

.page-he-thong .hethong-info {
	padding: 20px 24px;
	margin-bottom: 24px;
	background-color: #f4f8fd;
	border: 1px solid #e2ecfa;
	border-radius: 12px;
}

.page-he-thong .hethong-info .item {
	display: flex !important;
	align-items: center !important;
	justify-content: flex-start !important;
	gap: 14px;
}

.page-he-thong .hethong-info .item .thump {
	width: 56px;
	height: 56px;
	flex-shrink: 0;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 0 !important;
}

.page-he-thong .hethong-info .item .thump img {
	width: 56px;
	height: 56px;
	object-fit: contain;
}

.page-he-thong .hethong-info .item span {
	font-size: 1.45rem;
	line-height: 1.45;
	color: #475569;
}

.page-he-thong .hethong-info .item span b {
	font-size: 1.65rem;
	font-weight: 700;
	color: var(--mainColor);
	display: inline-block;
	margin-bottom: 2px;
}

.page-he-thong .option-chos {
	background: #f8fbff;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	padding: 16px;
	display: flex;
	flex-direction: column;
	height: 620px;
}

.page-he-thong .option-chos .group-option {
	display: grid !important;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin: 0 0 12px 0 !important;
}

.page-he-thong .option-chos .group-option .group-city,
.page-he-thong .option-chos .group-option .group-district {
	max-width: 100% !important;
	flex: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

.page-he-thong .option-chos .group-option select {
	height: 40px !important;
	border-radius: 8px !important;
	font-size: 1.35rem !important;
	font-weight: 600 !important;
	padding: 0 28px 0 12px !important;
	margin: 0 !important;
	border: 1px solid var(--mainColor) !important;
}

.page-he-thong .option-chos .info-store {
	flex: 1;
	overflow-y: auto;
	margin-top: 2px !important;
	padding-right: 6px;
	max-height: none !important;
}

.page-he-thong .option-chos .info-store .store-list {
	padding: 14px 16px !important;
	border: 1.5px solid #e2e8f0 !important;
	border-radius: 10px !important;
	background: #fff !important;
	margin-bottom: 12px !important;
	cursor: pointer;
	transition: all 0.2s ease;
}

.page-he-thong .option-chos .info-store .store-list:last-child {
	margin-bottom: 0 !important;
}

.page-he-thong .option-chos .info-store .store-list:hover,
.page-he-thong .option-chos .info-store .store-list.active {
	border-color: var(--mainColor) !important;
	box-shadow: 0 4px 14px rgba(17, 52, 101, 0.08);
}

.page-he-thong .option-chos .info-store .store-list .name-cuahang {
	font-size: 1.55rem;
	font-weight: 700;
	color: var(--mainColor);
	margin-bottom: 10px;
	line-height: 1.35;
	display: block;
}

.page-he-thong .option-chos .info-store .store-list.active .name-cuahang {
	color: var(--subColor);
}

.page-he-thong .option-chos .info-store .store-list .store-name,
.page-he-thong .option-chos .info-store .store-list .store-phone {
	display: flex !important;
	align-items: flex-start !important;
	gap: 10px;
	width: 100%;
	margin-bottom: 8px !important;
	font-size: 1.35rem;
	line-height: 1.45;
	color: #334155;
}

.page-he-thong .option-chos .info-store .store-list .store-phone {
	margin-bottom: 0 !important;
	align-items: center !important;
}

.page-he-thong .option-chos .info-store .store-list .store-name b,
.page-he-thong .option-chos .info-store .store-list .store-phone b {
	min-width: 30px !important;
	width: 30px !important;
	height: 30px !important;
	border-radius: 50% !important;
	border: 1px solid #cbd5e1 !important;
	background: #f8fafc;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	margin-right: 0 !important;
	padding: 0 !important;
	flex-shrink: 0;
	transition: all 0.2s ease;
}

.page-he-thong .option-chos .info-store .store-list .store-name b svg,
.page-he-thong .option-chos .info-store .store-list .store-phone b svg {
	width: 13px;
	height: 13px;
}

.page-he-thong .option-chos .info-store .store-list .store-name b path,
.page-he-thong .option-chos .info-store .store-list .store-phone b path {
	fill: var(--mainColor);
}

.page-he-thong .option-chos .info-store .store-list.active .store-name b,
.page-he-thong .option-chos .info-store .store-list.active .store-phone b {
	background: var(--mainColor);
	border-color: var(--mainColor) !important;
}

.page-he-thong .option-chos .info-store .store-list.active .store-name b path,
.page-he-thong .option-chos .info-store .store-list.active .store-phone b path {
	fill: #fff !important;
}

.page-he-thong .option-chos .info-store .store-list .store-addr-text,
.page-he-thong .option-chos .info-store .store-list .store-phone-text {
	flex: 1;
	min-width: 0;
}

.page-he-thong .option-chos .info-store .store-list .phone-url {
	font-weight: 700;
	color: var(--subColor) !important;
	margin-right: 0 !important;
}

.page-he-thong .pagebody {
	height: 620px !important;
	border-radius: 12px !important;
	overflow: hidden;
	border: 1px solid #e2e8f0;
	position: relative !important;
	top: 0 !important;
}

.page-he-thong .pagebody #map,
.page-he-thong .pagebody iframe {
	width: 100% !important;
	height: 100% !important;
	border: none !important;
	display: block;
}

@media (max-width: 991px) {
	.page-he-thong .option-chos {
		height: 440px;
	}

	.page-he-thong .pagebody {
		height: 420px !important;
	}
}

@media (max-width: 767px) {
	.page-he-thong .slogistic-store-wrapper {
		padding: 15px;
	}

	.page-he-thong .option-chos .group-option {
		grid-template-columns: 1fr;
	}
}