/* Khung chứa toàn bộ thanh thông tin */
.header-contact-bar {
	display: flex;
	align-items: center;
	justify-content: flex-start; /* Thay đổi thành center nếu muốn căn giữa */
	flex-wrap: wrap; /* Tự động xuống dòng khi màn hình nhỏ */
	font-size: 14px;
	line-height: 1.5;
	padding: 10px 0;
}

/* Định dạng cho từng cụm chi nhánh */
.contact-item {
	display: flex;
	align-items: center;
	color: #1a4870; /* Màu xanh đậm của chữ */
}

/* Định dạng biểu tượng Font Awesome */
.contact-icon {
	color: #1a4870;
	margin-right: 6px;
	font-size: 14px;
}

/* Định dạng phần tên thành phố */
.contact-label {
	font-weight: 700; /* Chữ đậm */
	margin-right: 5px;
}

/* Định dạng phần số điện thoại */
.contact-number {
	color: var(--primary-color) !important;
	text-decoration: none; /* Bỏ gạch chân mặc định của link */
	transition: color 0.2s ease;
}

/* Hiệu ứng khi rê chuột vào số điện thoại */
.contact-number:hover {
	color: #002c54;
}

/* Định dạng thanh dọc ngăn cách */
.contact-separator {
	color: #a5bccc; /* Màu xanh nhạt cho thanh dọc */
	margin: 0 12px;
	font-weight: 300;
}

/* Tối ưu hiển thị trên thiết bị di động (Mobile) */
@media (max-width: 768px) {
	.header-contact-bar {
		justify-content: center; /* Căn giữa trên điện thoại */
	}
	.contact-separator {
		display: none; /* Ẩn các thanh dọc khi xuống dòng */
	}
	.contact-item {
		margin: 6px 12px; /* Tạo khoảng cách thông thoáng hơn trên điện thoại */
	}
}

.nav-dark .form-flat input:not([type=submit]) {
	border: 1px solid var(--primary-color) !important;
}

.icon-search:before {
	color: var(--primary-color) !important
}

#woocommerce-product-search-field-0::placeholder {
	color: #9e9c9c !important;
	opacity: 1;
}
.nav-dark .social-icons {
	color: var(--primary-color) !important
}


#logo img {
	position: absolute;
	max-height: 80px !important;
	top: -35px;
}
.header-top {
	z-index: 9 !important;
}

.header-main .nav > li > a {
	color: var(--primary-color);
	text-transform: uppercase;
	font-size: 1rem;
}
.header-main .nav > li > a:hover, 
.header-main .nav > li.active > a {
	color: var(--fs-color-secondary);
}


#masthead .header-inner  .flex-col.hide-for-medium.flex-right {
	width: 70%;
}

#masthead .header-inner .header-nav.header-nav-main.nav-right  {
	justify-content: space-between;
}

.header-wrapper.stuck #logo img{
	position: unset;
}


/* CSS Giao diện tiêu đề danh mục shortcode */
.custom-cat-section {
	margin-bottom: 45px;
}
.cat-header-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid var(--primary-color);
	margin-bottom: 25px;
}
.cat-header-left {
	display: flex;
	align-items: center;
	background-color: #0c3b73; /* Màu xanh đậm của thanh tiêu đề */
	color: #ffffff;
	padding: 12px 20px; /* Điều chỉnh padding cân đối hai bên cho hình chữ nhật */
	font-weight: 700;
	font-size: 16px;
	text-transform: uppercase;
	border-radius: 0; /* Chuyển thành hình chữ nhật phẳng hoàn toàn */
	margin-bottom: -1px; /* Đè khít lên viền dưới */
	position: relative;
}
/* Icon menu màu cam ở góc trái tiêu đề */
.cat-header-left .cat-icon {
	color: var(--fs-color-secondary); /* Màu cam của icon */
	font-size: 18px;
	margin-right: 10px;
	line-height: 1;
}
.cat-header-right .btn-view-all {
	color: var(--fs-color-secondary) !important;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	transition: all 0.3s ease;
	display: inline-block;
}



/* CSS Giao diện thẻ sản phẩm tối giản */
.fs-gk-card {
	background: #ffffff;
	border: 1px solid #e5e5e5;
	overflow: hidden; /* Đảm bảo ảnh tràn viền không bị lòi ra ngoài góc bo */
	transition: all 0.3s ease;
	display: flex;
	flex-direction: column;
	height: 100%;
	box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.fs-gk-card:hover {
	box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.fs-gk-image-wrapper {
	position: relative;
	padding-top: 100%; /* Giữ tỉ lệ khung hình 1:1 vuông */
	overflow: hidden;
	background: #fdfdfd;
}
.fs-gk-prod-img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover; /* Sử dụng 'cover' để ảnh tràn viền đẹp mắt. Bạn có thể đổi sang 'contain' nếu muốn giữ nguyên tỉ lệ gốc của ảnh */
	padding: 0 !important; /* Loại bỏ hoàn toàn padding sản phẩm */
	transition: transform 0.3s ease;
}
.fs-gk-card:hover .fs-gk-prod-img {
	transform: scale(1.04);
}
.fs-gk-info {
	padding: 12px;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	justify-content: space-between;
}
.fs-gk-title-link {
	text-decoration: none !important;
	box-shadow: none !important;
}
.fs-gk-title-prod {
	font-size: 1rem;
	margin: 0 0 15px 0;
	line-height: 1.4;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

/* Thiết lập khung chứa nút tương tác */
.fs-gk-action-area {
	display: flex;
	flex-direction: row; /* Mặc định trên Máy tính sẽ xếp 2 nút nằm chung 1 hàng */
	gap: 8px; /* Khoảng cách giữa 2 nút */
}

/* Thiết lập các thuộc tính chung cho nút và giá để chúng cao bằng nhau */
.fs-gk-action-area > * {
	flex: 1; /* Chia đều chiều rộng 50% - 50% */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: .9rem;
	min-height: 38px; /* Chiều cao nút cố định đồng đều */
	padding: 6px 4px;
	font-weight: bold;
	border-radius: 50px;
	text-align: center;
	box-sizing: border-box;
	text-decoration: none !important;
	box-shadow: none !important;
	transition: all 0.2s ease;
}

/* CSS cho vùng Giá */
.fs-gk-price {
	color: #d2691e; /* Màu cam đậm */
	background: #fffcf8;
	border: 1px dashed #ffd59a;
}

/* CSS cho nút Liên hệ */
.fs-gk-btn-contact {
	background-color:var(--primary-color);
	color: #ffffff !important;
}
.fs-gk-btn-contact:hover {
	background-color: var(--fs-color-secondary) ;
}

/* CSS cho nút Xem chi tiết */
.fs-gk-btn-details {
	background-color: var(--fs-color-secondary); /* Sử dụng màu chủ đạo của Flatsome */
	color: #ffffff !important;
}
.fs-gk-btn-details:hover {
	background: var(--primary-color);
}

/* Thiết lập hiển thị cho thiết bị di động (Mobile) */
@media (max-width: 767px) {
	.fs-gk-action-area {
		flex-direction: column; /* Trên mobile sẽ đổi sang cấu trúc xếp dọc */
		gap: 6px;
	}
	.fs-gk-action-area > * {
		width: 100%;
		min-height: 36px;
		font-size: 14px; /* Tăng nhẹ cỡ chữ trên mobile để dễ nhìn */
	}
}

.portfolio-box ,
.portfolio-box .box-image {
	border-radius: 20px 0 20px 0;
}
.uppercase.portfolio-box-title {
	text-transform: capitalize;
	display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 1rem;
	opacity: 1;
	text-align: left;
}
.uppercase.portfolio-box-title::before {
	content: "\f07c";
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome";
    font-weight: 400;
    margin-right: 8px;
    display: inline-block;
    font-size: 0.9em;
}
.portfolio-box-category {
	display: none
}
@media (max-width: 849px) {
    #logo img {
        position: unset !important;
        max-height: 50px !important;
    }
}










/* Khung chứa viền xám toàn bộ */
.news-header-box {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	border-bottom: 1px solid #e1e7ee; /* Đường kẻ mờ kéo dài hết hàng */
	margin-bottom: 25px;
	width: 100%;
}

/* Thẻ h2 chống dãn */
.news-title {
	margin: 0 !important;
	padding: 0 !important;
	font-size: 24px;
	font-weight: 800;
	color: #174276; /* Màu xanh navy */
	text-transform: uppercase;
	line-height: 1.2;
	width: auto !important;
	flex: 0 1 auto !important; /* Không cho dãn chiếm chỗ */
}

/* Thẻ span bên trong - Chỉ ôm khít đúng độ dài chữ */
.news-title > span {
	display: inline-block;
	position: relative;
	padding-bottom: 8px; /* Khoảng cách từ chữ tới gạch chân */
}

/* Đường gạch đậm màu xanh - Chỉ dài đúng bằng chữ */
.news-title > span::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -1px; /* Đè khớp lên viền mờ */
	width: 100%;  /* 100% của span chữ, không lo bị tràn */
	height: 3px;
	background-color: #174276;
}

/* Nút Xem tất cả bên phải */
.news-view-all {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 13px;
	font-weight: 700;
	color: #111111 !important;
	text-decoration: none !important;
	padding-bottom: 8px; /* Khớp đáy với gạch chân */
	white-space: nowrap;
	flex-shrink: 0; /* Không bao giờ bị co rúm trên mobile */
	transition: color 0.2s ease;
}

/* Icon Font Awesome */
.news-view-all i {
	font-size: 12px;
	transition: transform 0.2s ease;
}

.news-view-all:hover {
	color: #174276 !important;
}

.news-view-all:hover i {
	transform: translateX(3px);
}

.news-header-box p {
	margin-bottom: 0;
}

/* Responsive Mobile */
@media (max-width: 576px) {
	.news-title {
		font-size: 19px;
	}
	.news-title > span,
	.news-view-all {
		padding-bottom: 6px;
	}
	.news-view-all {
		font-size: 12px;
	}

	.custom-categories-wrapper .row-small>.flickity-viewport>.flickity-slider>.col {
		padding: 0 4.8px 19.6px;
	}
}

.project-homepage .box-image .image-cover .overlay{
	background-color: rgba(0, 0, 0, .01) !important;
}
.project-homepage .box-text-inner .is-divider {
	display: none
}
.project-homepage .box-text {
	border-radius: 0 0 20px 0;
}
.project-homepage .box-text {
	background: linear-gradient(
		to bottom,
		rgba(14, 30, 54, 0) 0%,    /* Ở trên nhạt/gần như trong suốt */
		rgba(11, 24, 43, 0.75) 50%,   /* Ở giữa đậm dần */
		rgba(7, 16, 29, 0.98) 100%    /* Dưới cùng xanh đen đậm */
	) !important;
}

.project-homepage .box-text .post-title a::before {
	content: "\f07c"; /* Mã unicode của icon folder-open */
	font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome";
	font-weight: 400; /* Dùng 400 cho nét viền (Regular), hoặc 900 cho bản đặc (Solid) */
	margin-right: 8px; /* Khoảng cách giữa icon và chữ */
	display: inline-block;
	font-size: 0.9em;
}

@media(max-width: 549px){
	.project-homepage .row-small>.col, .row-small>.flickity-viewport>.flickity-slider>.col {
		padding: 0 4.8px 19.6px !important;
	}
}






/* ================= KHỐI TIN TỨC HIỆN ĐẠI ================= */
/* ================= KHỐI TIN TỨC CHUẨN ĐẸP ================= */
.custom-news-box {
	margin: 15px 0 25px;
}
.custom-news-box a {
	color: #1a1a1a;
	text-decoration: none;
	transition: color 0.2s ease;
}
.custom-news-box a:hover {
	color: var(--primary-color, #c01a1a);
}
.custom-news-box .news-meta {
	font-size: 0.78rem;
	color: #888;
	display: flex;
	align-items: center;
	margin-top: 4px;
}

/* --- DESKTOP: BÀI TO BÊN TRÁI --- */
.news-card-big {
	height: 100%;
}
.news-card-big .news-thumb {
	width: 100%;
	aspect-ratio: 16 / 10;
	border-radius: 10px;
	overflow: hidden;
	margin-bottom: 12px;
}
.news-card-big .news-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}
.news-card-big:hover .news-thumb img {
	transform: scale(1.04);
}
.news-title-big {
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.4;
	margin-bottom: 6px;
	text-transform: uppercase;
}
.news-desc {
	font-size: 0.9rem;
	color: #555;
	line-height: 1.55;
	margin-top: 8px;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* --- DESKTOP: 4 BÀI NHỎ BÊN PHẢI --- */
.news-list-right {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 12px;
}
.news-card-small {
	display: flex;
	align-items: center;
	gap: 12px;
	border-radius: 8px;
	transition: background 0.2s, transform 0.2s;
}
.news-card-small:hover {
	background: #f7f7f7;
	transform: translateX(4px);
}
.news-thumb-small {
	flex: 0 0 130px;
	width: 130px;
	height: 82px;
	border-radius: 8px;
	overflow: hidden;
}
.news-thumb-small img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.3s;
}
.news-card-small:hover .news-thumb-small img {
	transform: scale(1.06);
}
.news-content-small {
	flex: 1;
}
.news-title-small {
	font-size: 0.92rem;
	font-weight: 600;
	line-height: 1.35;
	margin-bottom: 3px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ================= MOBILE: 2 CỘT CÓ KHOẢNG CÁCH, BO GÓC ================= */
.custom-news-mobile {
	padding-top: 5px;
}
.custom-news-mobile .col {
	margin-bottom: 12px;
}
.news-card-mob {
	background: #fff;
	border-radius: 8px;
	overflow: hidden;
	border: 1px solid #eaeaea;
	box-shadow: 0 2px 8px rgba(0,0,0,0.03);
	height: 100%;
	display: flex;
	flex-direction: column;
}
.news-thumb-mob {
	width: 100%;
	aspect-ratio: 16 / 13;
	overflow: hidden;
}
.news-thumb-mob img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.news-body-mob {
	padding: 8px;
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.news-title-mob {
	font-size: 0.82rem;
	font-weight: 600;
	line-height: 1.35;
	margin-bottom: 5px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.2em; /* Giúp 2 thẻ ngang nhau luôn bằng chiều cao */
}













/* Khung bọc toàn bộ form */
.support-contact-form {
	background-color: #152b47;
	padding: 35px 30px;
	border-radius: 12px;
	max-width: 750px;
	margin: 0 auto;
	box-sizing: border-box;
}

/* Tiêu đề */
.support-contact-form .form-heading {
	color: #ffffff;
	font-size: 22px;
	font-weight: 700;
	text-transform: uppercase;
	margin-bottom: 25px;
	letter-spacing: 0.5px;
}

/* Bố cục lưới 2 cột */
.support-contact-form .form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 15px 30px;
}

.support-contact-form .form-group.full-width {
	grid-column: 1 / -1;
}

/* Tùy biến ô input và textarea kiểu gạch chân */
.support-contact-form input[type="text"],
.support-contact-form input[type="email"],
.support-contact-form input[type="tel"],
.support-contact-form textarea {
	background: transparent !important;
	border: none !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.25) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	color: #ffffff !important;
	padding: 10px 0 !important;
	margin-bottom: 0 !important;
	font-size: 15px;
	width: 100%;
}

/* Màu chữ placeholder */
.support-contact-form ::placeholder {
	color: rgba(255, 255, 255, 0.7) !important;
}

/* Hiệu ứng khi bấm vào ô nhập */
.support-contact-form input:focus,
.support-contact-form textarea:focus {
	border-bottom-color: #cca371 !important;
	outline: none !important;
}

.support-contact-form textarea {
	resize: vertical;
	min-height: 70px;
}

/* Căn nút ra CHÍNH GIỮA */
.support-contact-form .form-actions {
	display: flex;
	justify-content: center;
	margin-top: 30px;
}

/* Nút Gửi ngay */
.support-contact-form .btn-send {
	background-color: var(--fs-color-secondary) !important;
	color: #ffffff !important;
	border: none !important;
	border-radius: 30px !important;
	padding: 12px 40px !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
	min-height: auto;
	line-height: normal;
	text-transform: uppercase;
}

.support-contact-form .btn-send:hover {
	background-color: var(--fs-color-secondary) !important;
	transform: translateY(-2px);
}

/* Responsive trên điện thoại */
@media (max-width: 600px) {
	.support-contact-form {
		padding: 20px 15px;
	}
	.support-contact-form .form-grid {
		grid-template-columns: 1fr;
		gap: 10px 0;
	}
}

/* .icon-facebook::before,
.icon-instagram:before,
.icon-youtube:before{
	color: #fff;
} */


.footer-company-info {
	margin-top: 30px;
}
/* Tên công ty tiêu đề chính */
.footer-company-info .footer-company-title {
	color: #ffffff !important;
	font-size: 22px;
	font-weight: 700;
	text-transform: uppercase;
	line-height: 1.4;
	margin-bottom: 20px;
	letter-spacing: 0.5px;
}

/* Từng khối thông tin */
.footer-company-info .footer-company-item {
	margin-bottom: 18px;
}

.footer-company-info .footer-company-item:last-child {
	margin-bottom: 0;
}

/* Nhãn: Trụ sở chính, Hotline, Email */
.footer-company-info .footer-company-label {
	display: block;
	color: #bda485; /* Màu vàng nâu nhạt như trong ảnh */
	font-size: 15px;
	font-weight: 400;
	margin-bottom: 5px;
}

/* Nội dung giá trị bên dưới nhãn */
.footer-company-info .footer-company-value {
	color: #ffffff;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
	margin: 0;
}


/* Định dạng thẻ liên kết số điện thoại & email */
.footer-company-info .footer-company-value a {
	color: #ffffff;
	text-decoration: none;
	transition: color 0.2s ease;
}

.footer-company-info .footer-company-value a:hover {
	color: #cca371; /* Đổi màu khi rê chuột */
}

@media(max-width: 849px){
	#masthead .icon-search:before {
		color: #fff !important
	}
}

@media (max-width: 549px){
	.footer-company-info {
		margin-top: 0
	}
	#top-bar {
		display: none
	}
	#logo img {
		position: unset !important;
		max-height: 60px !important;

	}
	#masthead .icon-search:before {
		color: #fff !important;
	}
}


#respond {
	display: none
}

.article-inner .entry-title {
	font-size: 40px;
	color: var(--primary-color);
	margin-bottom: 0;
}

.article-inner .entry-divider {
	display: none
}

.article-inner .entry-header-text {
	padding-bottom: 0
}
.article-inner h2,
.article-inner h3,
.article-inner h4,
.article-inner h5,
.article-inner h6{
	color: var(--primary-color)
}

.article-inner p {
	text-align: justify
}

.bv-box {
	background: #fff;
	border-radius: 10px;
	border: 1px solid var(--primary-color);
	overflow: hidden;
}

/* Header */
.bv-header {
	padding: 12px 16px;
	font-weight: 700;
	border-bottom: 1px solid var(--primary-color);
	font-size: 15px;
	color: var(--color-black);
}

/* Row */
.bv-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	text-decoration: none;
	border-bottom: 1px solid #f1f1f1;
	transition: background 0.25s;
}

.bv-row:last-child {
	border-bottom: none;
}

/* Image */
.bv-img {
	position: relative;
	width: 60px;
	height: 60px;
	flex-shrink: 0;
}

.bv-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 6px;
}

/* Number on image */
.bv-number {
	position: absolute;
	top: -6px;
	left: -6px;
	width: 22px;
	height: 22px;
	background: var(--primary-color);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
	box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}

/* Content */
.bv-info {
	flex: 1;
}

.bv-title-post {
	font-size: 14px;
	font-weight: 600;
	color: #000;
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}

.bv-row:hover .bv-title-post {
	color: var(--primary-color);
}

.bv-date {
	font-size: 12px;
	color: #888;
	margin-top: 4px;
}
.icon-feed:before {
	display: none
}





.single-product-1 .product-gallery-slider img {
	border-radius: 20px;
	border: 1px solid var(--primary-color);
}
.single-product-1 .product-thumbnails a {
	border-radius: 10px;
}

.single-product-1 .title-product .col-inner,
.single-product-1 .tab-products .col-inner{
	padding: 20px;
	border: 1px solid var(--primary-color);
	border-radius: 20px;
	box-shadow: 0 4px 10px rgba(196, 150, 70, 0.25);
}

.single-product-1 .product-section {
	border-top: 0px;
}
#tab-title-reviews {
	display:none
}
.single-product-1 .product-short-description p,
.single-product-1 .tab-panels p{
	text-align: justify;
}
.single-product-1 button {
	border-radius: 5px;
}
@media (max-width: 549px){
	.single-product-1 button {
		width: 100%;
	}
	.single-product-1 button {
		padding: 5px;
	}
	.single-product-1  .row-small>.flickity-viewport>.flickity-slider>.col {
		padding: 0 4.8px 19.6px;
	}
}

.single-product-1 .product-title{
	color: var(--primary-color)
}












.marquee-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 40px 0;
  background-color: #f7f9fa; /* Màu nền tuỳ chọn */
  overflow: hidden;
}

.marquee-wrapper {
  display: flex;
  overflow: hidden;
  width: 100%;
  user-select: none;
  /* Tạo hiệu ứng mờ dần (fade) ở 2 mép biên trái & phải */
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.marquee-track {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-shrink: 0;
  will-change: transform;
}

/* Thẻ chứa từng Logo */
.partner-item {
  width: 170px;
  height: 95px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px 25px;
  flex-shrink: 0;
  transition: transform 0.25s ease;
}

.partner-item:hover {
  transform: translateY(-3px);
}

.partner-item img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: filter 0.3s ease;
}

.partner-item:hover img {
  filter: grayscale(0%);
}

/* Animation chạy từ Phải -> Trái */
@keyframes runToLeft {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* Animation chạy từ Trái -> Phải */
@keyframes runToRight {
  from {
    transform: translateX(-50%);
  }
  to {
    transform: translateX(0);
  }
}

.marquee-to-left .marquee-track {
  animation: runToLeft var(--speed, 25s) linear infinite;
}

.marquee-to-right .marquee-track {
  animation: runToRight var(--speed, 25s) linear infinite;
}

/* Tạm dừng khi rê chuột vào */
.marquee-wrapper:hover .marquee-track {
  animation-play-state: paused;
}






#shop-sidebar .widget_product_categories {
	background: #ffffff;
	padding: 20px;
	border: 1px solid #eef1f5;
	border-radius: 8px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

/* 2. Tiêu đề danh mục */
#shop-sidebar .widget-title.shop-sidebar {
	font-size: 16px;
	font-weight: 700;
	text-transform: uppercase;
	color: #222;
	letter-spacing: 0.5px;
	margin-bottom: 8px;
	display: block;
}

#shop-sidebar .is-divider.small {
	height: 3px;
	background-color: var(--primary-color, #446084); /* Tự động lấy màu chủ đạo của web */
	margin-top: 0;
	margin-bottom: 20px;
	width: 45px;
	border-radius: 2px;
}

/* 3. Danh mục cha (Cấp 1) */
#shop-sidebar ul.product-categories {
	list-style: none;
	padding: 0;
	margin: 0;
}

#shop-sidebar ul.product-categories > li.cat-item {
	position: relative;
	border-bottom: 1px solid #f0f0f0;
	margin: 0;
}

#shop-sidebar ul.product-categories > li.cat-item:last-child {
	border-bottom: none;
}

#shop-sidebar ul.product-categories li.cat-item a {
	display: inline-block;
	padding: 12px 40px 12px 0; 
	color: #000;
	font-weight: 600;
	transition: all 0.25s ease;
	width: 100%;
	text-decoration: none;
	box-sizing: border-box;
}

/* Hiệu ứng hover cho danh mục cha */
#shop-sidebar ul.product-categories li.cat-item a:hover {
	color: var(--primary-color, #446084);
	padding-left: 6px;
}

/* Trạng thái danh mục đang hoạt động (Đang xem) */
#shop-sidebar ul.product-categories li.cat-item.current-cat > a {
	color: var(--primary-color, #446084);
	font-weight: 700;
}

/* Tạo một vạch màu nhỏ bên trái khi danh mục đang được active */
#shop-sidebar ul.product-categories li.cat-item.current-cat::before {
	content: "";
	position: absolute;
	left: -20px; /* Căn chỉnh sát viền trái của widget */
	top: 12px;
	bottom: 12px;
	width: 3px;
	background-color: var(--primary-color, #446084);
	border-radius: 0 4px 4px 0;
}

/* 4. Nút bấm Đóng/Mở (Toggle button) */
#shop-sidebar ul.product-categories li.cat-item .toggle {
	position: absolute;
	right: 0;
	top: 6px;
	width: 32px;
	height: 32px;
	background: transparent;
	border: none;
	color: #8c8c8c;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.2s ease;
	border-radius: 50%;
	outline: none;
}

#shop-sidebar ul.product-categories li.cat-item .toggle:hover {
	color: var(--primary-color, #446084);
	background-color: #f5f7fa;
}

/* Hiệu ứng xoay icon mũi tên mượt mà khi mở danh mục con */
#shop-sidebar ul.product-categories li.cat-item .toggle i {
	transition: transform 0.25s ease;
}

#shop-sidebar ul.product-categories li.cat-item[aria-expanded="true"] > .toggle i {
	transform: rotate(180deg);
}

/* 5. Danh mục con (Cấp 2) */
#shop-sidebar ul.product-categories ul.children {
	list-style: none;
	padding: 0 0 10px 15px; /* Thụt lề cho danh mục con */
	margin: 0 0 0 5px;
	border-left: 1px dashed #dcdcdc; /* Đường kẻ dọc dạng nhánh cây */
}

#shop-sidebar ul.product-categories ul.children li.cat-item {
	border-bottom: none;
	position: relative;
}

/* Đường kẻ ngang phụ nối vào chữ của danh mục con */
#shop-sidebar ul.product-categories ul.children li.cat-item::before {
	content: "";
	position: absolute;
	left: -15px;
	top: 18px;
	width: 8px;
	height: 1px;
	background-color: #dcdcdc;
}

#shop-sidebar ul.product-categories ul.children li.cat-item a {
	padding: 7px 0;
	font-size: 13px;
	font-weight: 400;
	color: #666;
}

#shop-sidebar ul.product-categories ul.children li.cat-item a:hover {
	color: var(--primary-color, #446084);
	padding-left: 4px;
}

#shop-sidebar ul.product-categories ul.children li.cat-item.current-cat > a {
	color: var(--primary-color, #446084);
	font-weight: 600;
}


@media(max-width: 549px){
	.category-page-row .row-small>.col{
		padding: 0 4.8px 19.6px;
	}
	.category-page-row {
		padding-top: 0 !important;
	}
}
.post-item .col-inner,
.post-item .col-inner .box{
	border-radius: 12px;
}
 .post-item .col-inner .box .box-image {
	border-radius: 12px 12px 0 0;
}
.post-item .col-inner .box .post-title a, .post-item .col-inner .box .from_the_blog_excerpt {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: 1rem;
}

.post-item .post-title:hover a {
	color: var(--primary-color) !important
}

.post-item .is-divider {
	background: #fff
}
.post-item .post-meta {
	color: var(--primary-color)
}
@media (max-width: 549px){
	.bao-gia-page .row-small>.col{
		padding: 0 4.8px 19.6px;
	}
}


.blog-wrapper .archive-page-header .page-title span {
	font-size: 2rem;
	color: var(--primary-color);
}



.blv-form-wrapper {
	background-color: #ffffff;
	border: 1px solid #eef2f5;
	border-radius: 20px;
	padding: 35px 30px;
	max-width: 750px;
	width: 100%;
	margin: 0 auto;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	box-sizing: border-box;
}

/* Tiêu đề */
.blv-form-title {
	font-size: 22px;
	font-weight: 700;
	color: var(--primary-color);
	margin-bottom: 8px;
	line-height: 1.3;
}

/* Mô tả phụ bên dưới tiêu đề */
.blv-form-subtitle {
	font-size: 14.5px;
	color: #666666;
	margin-bottom: 30px;
	line-height: 1.5;
}

/* Thiết lập cấu trúc dòng cột cho Form */
.blv-form-row {
	display: flex;
	gap: 20px;
}

.blv-form-col {
	flex: 1;
	min-width: calc(50% - 10px);
}

/* Định dạng nhãn text của từng ô */
.blv-form-label {
	display: block;
	font-size: 14px;
	font-weight: 700;
	color: #222222;
	margin-bottom: 8px;
}

/* Đảm bảo khung bọc của Contact Form 7 nhận 100% chiều rộng */
.blv-form-wrapper .wpcf7-form-control-wrap {
	display: block;
	width: 100%;
}

/* Định dạng các ô nhập liệu (Input & Textarea) */
.blv-form-wrapper input[type="text"],
.blv-form-wrapper input[type="tel"],
.blv-form-wrapper input[type="email"],
.blv-form-wrapper textarea {
	width: 100%;
	background-color: #f7f9fa;
	border: 1px solid #dcdfe4;
	border-radius: 5px;
	padding: 25px 16px;
	font-size: 14px;
	color: #333333;
	outline: none;
	transition: all 0.3s ease;
	box-sizing: border-box;
	box-shadow: unset;
}

/* Thiết lập chiều cao riêng cho khung ghi chú */
.blv-form-wrapper textarea {
	height: 120px;
	resize: vertical;
}

/* Hiệu ứng focus khi nhấp vào ô nhập */
.blv-form-wrapper input[type="text"]:focus,
.blv-form-wrapper input[type="tel"]:focus,
.blv-form-wrapper input[type="email"]:focus,
.blv-form-wrapper textarea:focus {
	border-color: var(--primary-color);
	background-color: #ffffff;
	box-shadow: 0 0 0 3px #1f49800d;
}

/* Thiết lập placeholder (chữ mờ gợi ý) */
.blv-form-wrapper ::placeholder {
	color: #9ea8b6;
	opacity: 1;
}

/* Nút bấm gửi liên hệ */
.blv-form-submit {
	background-color: var(--primary-color); /* Màu đỏ nổi bật */
	color: #ffffff;
	width: 100%;
	padding: 15px;
	border-radius: 5px;
	font-size: 15px;
	font-weight: 700;
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	transition: background-color 0.2s ease, transform 0.1s ease;
	box-sizing: border-box;
	margin-top: 10px;
}

/* Hiệu ứng khi rê chuột vào nút gửi */
.blv-form-submit:hover {
	background-color: var(--primary-color);
}

.blv-form-submit:active {
	transform: scale(0.99);
}

.blv-form-submit i {
	font-size: 14px;
}
#post-list .col.post-item {
    padding: 0 9.8px 19.5px;	
}
/* Tự động tối ưu chuyển đổi sang 1 cột trên điện thoại di động */
@media (max-width: 600px) {
	.blv-form-row {
		flex-direction: column;
		gap: 0px;
	}
	.blv-form-col {
		min-width: 100%;
	}
	.blv-form-wrapper {
		padding: 20px;
		border-radius: 10px;
	}
	h2 {
		font-size: 25px !important
	}
	.about-custom-section {
		padding: 30px 0 !important;
	}
	
}










/* Khung chứa chính */
.blv-office-box {
	background-color: #ffffff;
	width: 100%;
	border-radius: 20px;
	padding: 30px 25px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
	border: 1px solid #eceff1;
}

/* Tiêu đề chính */
.blv-office-title-row {
	display: flex;
	align-items: center;
	padding-bottom: 15px;
	border-bottom: 1px solid #f0f0f0;
	margin-bottom: 25px;
}

.blv-office-title-row i.blv-office-red-dot {
	color: var(--primary-color);
	font-size: 10px;
	margin-right: 10px;
}

.blv-office-title-row h2 {
	font-size: 22px;
	font-weight: 700;
	color: var(--primary-color);
	line-height: 1.2;
	margin: 0;
}

/* Khung chứa các dòng thông tin */
.blv-office-body {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

/* Từng dòng thông tin */
.blv-office-item-row {
	display: flex;
	align-items: flex-start;
}

/* Định dạng icon */
.blv-office-icon-wrap {
	color: var(--primary-color);
	font-size: 18px;
	width: 24px;
	margin-right: 15px;
	text-align: center;
	margin-top: 2px; /* Căn chỉnh icon thẳng hàng với dòng chữ đầu tiên */
}

/* Phần nội dung chữ */
.blv-office-text-wrap {
	flex: 1;
	font-size: 14.5px;
	line-height: 1.5;
}

.blv-office-text-wrap strong {
	display: block;
	color: #111111;
	font-weight: 700;
	margin-bottom: 4px;
}

.blv-office-text-wrap p {
	color: #4a4a4a;
	margin: 0;
}

/* Định dạng riêng cho Email link */
.blv-office-text-wrap a {
	color: var(--primary-color);
	text-decoration: none;
	font-weight: 500;
}

.blv-office-text-wrap a:hover {
	text-decoration: underline;
	color: var(--fs-color-secondary)
}



/* Khung chứa chính (màu nền hồng nhạt, viền bo tròn) */
.blv-hotline-container {
	background-color: #1f498005;
	border: 1px solid var(--primary-color);
	border-radius: 20px;
	padding: 25px 30px;
	width: 100%;
}

/* Tiêu đề hỗ trợ */
.blv-hotline-header {
	display: flex;
	align-items: center;
	margin-bottom: 20px;
	color: var(--primary-color); /* Màu đỏ đậm */
}

/* Định dạng biểu tượng điện thoại */
.blv-hotline-header i {
	font-size: 20px;
	margin-right: 12px;
	transform: rotate(-15deg); /* Xoay nhẹ icon điện thoại giống hình mẫu */
}

.blv-hotline-title {
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.5px;
	margin: 0;
	text-transform: uppercase;
}

/* Khu vực chứa nút bấm */
.blv-hotline-body {
	display: flex;
	flex-direction: column;
}

/* Thiết kế ô Hotline/Zalo dạng nút bấm */
.blv-hotline-pill {
	background-color: #ffffff;
	border: 1px solid #1f498094;
	border-radius: 12px;
	padding: 14px 20px;
	text-decoration: none;
	transition: all 0.2s ease-in-out;
}

/* Hiệu ứng khi rê chuột vào */
.blv-hotline-pill:hover {
	border-color: var(--primaryc-color);
	box-shadow: 0 4px 12px rgba(211, 47, 47, 0.08);
}

.blv-hotline-label {
	font-size: 15px;
	color: #111111;
	font-weight: 700;
}

.blv-hotline-number {
	font-size: 16px;
	color: var(--primary-color);
	font-weight: 700;
	letter-spacing: 0.5px;
}

.blv-hotline-body br {
	display: none
}






/* Danh sách bài viết thêm bên dưới */
.news-extra-item {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    height: 100%;
}

.news-extra-thumb {
    width: 140px;
    min-width: 140px;
    height: 95px;
    overflow: hidden;
    border-radius: 4px;
}

.news-extra-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.news-extra-item:hover .news-extra-thumb img {
    transform: scale(1.05);
}

.news-extra-body {
    flex: 1;
    min-width: 0;
}

.news-extra-title {
    font-size: 15px;
    line-height: 1.35;
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-extra-desc {
    font-size: 13px;
    color: #666;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Mobile: Card tự đổi sang dạng dọc để hiển thị đẹp trong lưới 2 cột */
/* ================= GIAO DIỆN THẺ BÀI VIẾT TRÊN MOBILE ================= */
@media (max-width: 549px) {
    /* Khung card: Nền trắng, viền xám nhẹ, bo góc, bóng mờ */
    .news-card-mob,
    .news-extra-item {
        display: flex;
        flex-direction: column;
        background: #ffffff;
        border: 1px solid #e8e8e8; /* Viền bao quanh thẻ */
        border-radius: 8px;        /* Bo tròn góc ngoài */
        overflow: hidden;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
        margin-bottom: 12px;
        height: 100%;
    }

    /* Khung ảnh cao ôm trọn phía trên */
    .news-thumb-mob,
    .news-extra-thumb {
        width: 100% !important;
        min-width: 100% !important;
        height: 150px !important;    /* Chiều cao ảnh, bạn có thể chỉnh 140px-160px tùy ý */
        aspect-ratio: 4 / 3;         /* Giữ tỷ lệ ảnh đứng cao như mẫu */
        overflow: hidden;
        border-radius: 0 !important;
        margin: 0 !important;
    }

    .news-thumb-mob img,
    .news-extra-thumb img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block;
    }

    /* Phần chứa chữ: Có đệm (padding) cách lề */
    .news-body-mob,
    .news-extra-body {
        padding: 10px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        flex-grow: 1;
    }

    /* Tiêu đề chữ đậm, màu tối, tối đa 2 dòng */
    .news-title-mob,
    .news-extra-title {
        font-size: 13.5px !important;
        font-weight: 700 !important;
        line-height: 1.35 !important;
        margin: 0 0 8px 0 !important;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .news-title-mob a,
    .news-extra-title a {
        color: #222 !important;
    }

    /* Dòng ngày tháng kèm icon lịch xám */
    .news-body-mob .news-meta,
    .news-extra-body .news-meta {
        font-size: 11.5px !important;
        color: #888 !important;
        margin: 0 !important;
        display: flex;
        align-items: center;
    }
	.custom-news-box .row-small>.col {
		padding: 0 4.8px 19.6px;
	}
	.off-canvas-left.mfp-ready .mfp-content {
		background: var(--primary-color);
	}
	.off-canvas:not(.off-canvas-center) .nav-vertical li>a {
		color: #fff;
	}
	.icon-angle-down:before {
		color: #fff;
	}
}

/* ================= THẺ BÀI VIẾT DESKTOP CÓ ĐỔ BÓNG (BOX-SHADOW) ================= */
@media (min-width: 550px) {
    .news-extra-item {
        display: flex !important;
        align-items: stretch !important; /* Bắt buộc 2 cột cao bằng nhau */
        background: #ffffff;
        border: 1px solid #f0f0f0;
        border-radius: 10px;
        overflow: hidden;
        margin-bottom: 24px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        height: 100%;
		height: 145px !important; 
    }

    .news-extra-item:hover {
        transform: translateY(-4px);
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
        border-color: #e2e2e2;
    }

    /* 1. KHUNG BÊN TRÁI: Chiếm trọn chiều cao 100% của thẻ cha */
    .news-extra-thumb {
        width: 210px !important;
        min-width: 210px !important;
        max-width: 210px !important;
        height: auto !important;         /* Tự động kéo chạm đáy theo thẻ cha */
        align-self: stretch !important;
        flex-shrink: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
        overflow: hidden;
        background-color: #f4f4f4;
        display: flex !important;        /* Biến thumb thành flex để ép thẻ <a> giãn */
    }

    /* 2. THẺ LINK: Kéo giãn hết cỡ */
    .news-extra-thumb a {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        flex: 1 1 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* 3. THẺ HÌNH ẢNH: Phủ kín 100% diện tích và tự căn giữa cắt cúp */
    .news-extra-thumb img {
        width: 100% !important;
        height: 100% !important;
        min-height: 100% !important;
        max-height: none !important;
        object-fit: cover !important;     /* Cắt ảnh không méo hình */
        object-position: center !important;
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;     /* Xóa bỏ bo góc riêng của ảnh nếu có */
        transition: transform 0.4s ease;
    }

    .news-extra-item:hover .news-extra-thumb img {
        transform: scale(1.06);
    }

    /* Khung nội dung chữ bên phải */
    .news-extra-body {
        flex: 1;
        min-width: 0;
        padding: 16px 18px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .news-extra-title {
        font-size: 16.5px !important;
        font-weight: 700 !important;
        line-height: 1.4 !important;
        margin: 0 0 6px 0 !important;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .news-extra-title a {
        color: #222;
        transition: color 0.2s ease;
    }

    .news-extra-title a:hover {
        color: #d26e4b;
    }

    .news-extra-body .news-meta {
        font-size: 12.5px;
        color: #888;
        margin-bottom: 8px;
    }

    .news-extra-desc {
        font-size: 13.5px;
        color: #555;
        line-height: 1.5;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        margin: 0;
    }
}














.header-nav .has-dropdown > .nav-dropdown{
	display: table;               
	left: -99999px;
	opacity: 0;
	visibility: hidden;
	max-height: 0;
	overflow: visible !important;   
	padding: 5px 0;
	transition: opacity .25s, visibility .25s, transform .3s;
	transform-origin: 50% 0;
	transform: scaleY(0);
	z-index: 9;
	min-width: 220px !important
}

.header-nav .has-dropdown:hover > .nav-dropdown,
.header-nav .has-dropdown:focus-within > .nav-dropdown{
	left: 0;                        
	opacity: 1;
	visibility: visible;
	max-height: 1000px;             
	transform: scaleY(1);
}

.header-nav .nav-dropdown-col{
	position: relative !important;
}


.header-nav .nav-dropdown-col > ul.sub-menu.nav-column{
	position: absolute !important;
	top: 0 !important;
	left: -99999px !important;
	opacity: 0 !important;
	visibility: hidden !important;
	display: block !important;
	min-width: 260px;
	background: #fff;
	transform-origin: 0 0;
	transform: scaleY(0);
	transition: transform .25s ease, opacity .2s ease, visibility .2s ease;
	z-index: 99;
}

.header-nav .nav-dropdown-col:hover > ul.sub-menu.nav-column,
.header-nav .nav-dropdown-col:focus-within > ul.sub-menu.nav-column{
	left: 100% !important;
	opacity: 1 !important;
	visibility: visible !important;
	transform: scaleY(1);
}


.header-nav>li:hover>a,
.header-nav>li.active>a{
	color: var(--fs-color-secondary)!important
}

.nav-dropdown-has-arrow li.has-dropdown:after,
.nav-dropdown-has-arrow.nav-dropdown-has-border li.has-dropdown:before{
	display: none
}

.nav-dropdown-has-border .nav-dropdown {
	border: 0px !important;
}


.sub-menu.nav-dropdown.nav-dropdown-default > li:hover {
	background: #fff7ed
}


.nav-dropdown.nav-dropdown-default>li>a {
	border-bottom: 0px !important;
	color: var(--primary-color) ;
}

.nav.header-nav.header-bottom-nav.nav-left {
	gap: 30px;
}

.header-nav>li>a {
	font-size: 1rem !important;
}


@media(max-width: 549px){
	.off-canvas:not(.off-canvas-center) .nav-vertical li>a {
		font-size: 1.1rem;
	}
}






/* Danh sách icon mạng xã hội hình tròn */
.custom-social-list ul {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
	gap: 12px;
}

.custom-social-list li {
    margin-left: 0 !important;
    padding: 0;
}

.custom-social-list a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;              /* Chiều rộng vòng tròn */
    height: 44px;             /* Chiều cao vòng tròn */
    background-color: #ffffff; /* Nền trắng */
    border-radius: 50%;       /* Bo tròn 100% */
    transition: all 0.3s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.custom-social-list a img {
    max-width: 20px;          /* Giới hạn kích thước icon bên trong */
    max-height: 20px;
    object-fit: contain;
    display: block;
}

/* Hiệu ứng khi rê chuột vào nút */
.custom-social-list a:hover {
    transform: translateY(-3px); /* Nhấc nhẹ lên trên */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
    background-color: #f2f2f2;
}


/* Khung bao ngoài của thẻ sản phẩm */
.fs-gk-card {
    border: 1px solid #e5e5e5; /* Viền xám bao quanh thẻ như hình */
    background: #ffffff;
    overflow: hidden;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.fs-gk-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* Đổ bóng nhẹ khi rê chuột */
}

/* Khung bọc ảnh */
.fs-gk-image-wrapper {
    width: 100%;
    aspect-ratio: 1 / 1; /* Tỷ lệ ảnh vuông hoặc điều chỉnh 4/3 tùy ý */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fafafa;
}

.fs-gk-prod-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Đảm bảo ảnh lấp đầy khung */
    display: block;
    transition: transform 0.3s ease;
}

.fs-gk-card:hover .fs-gk-prod-img {
    transform: scale(1.2); /* Phóng to ảnh nhẹ khi hover */
}

/* Phần Text Info bên dưới */
.fs-gk-info {
    padding: 15px 12px 18px 12px;
    text-align: center; /* Căn giữa toàn bộ chữ */
    background: #ffffff;
}

/* Tên sản phẩm */
.fs-gk-title-prod {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    margin: 0 0 8px 0;
    text-transform: uppercase; /* Chữ in hoa giống ảnh */
}

.fs-gk-title-prod a {
    color: #333333;
    text-decoration: none;
    transition: color 0.2s ease;
}

.fs-gk-title-prod a:hover {
    color: var(--primary-color); /* Đổi màu khi hover */
}

/* Dòng giá */
.fs-gk-price-row {
    font-size: 15px;
    line-height: 1.3;
}

.fs-gk-price-row .fs-price-label {
    color: #444444;
    margin-right: 4px;
}

/* Chữ "Liên hệ" màu cam đậm nét */
.fs-gk-price-row .fs-price-contact {
    color: #e67e22; /* Màu cam giống hình */
    font-weight: 700;
    text-decoration: none;
}

.fs-gk-price-row .fs-price-contact:hover {
    text-decoration: underline;
}

/* Nếu sản phẩm có giá tiền cụ thể */
.fs-gk-price-row .fs-price-val {
    color: #e67e22;
    font-weight: 700;
}


/* Khung chứa hiệu ứng kính quẹt */
.hover-glass {
    position: relative;
    overflow: hidden; /* Cắt phần vệt sáng tràn ra ngoài khung ảnh */
}

/* Lớp vệt sáng ban đầu (nằm ẩn bên trái) */
.hover-glass::before {
    position: absolute;
    top: 0;
    left: -100%;             /* Nằm lùi hẳn về phía bên trái */
    z-index: 2;
    display: block;
    content: "";
    width: 60%;
    height: 100%;
    transform: skewX(-25deg); /* Làm nghiêng vệt sáng 25 độ */
    background: linear-gradient(
        to right, 
        rgba(255, 255, 255, 0) 0%, 
        rgba(255, 255, 255, 0.4) 50%, 
        rgba(255, 255, 255, 0) 100%
    );
    pointer-events: none;    /* Tránh cản trở thao tác click */
}

/* Kích hoạt vệt sáng quẹt qua phải khi hover vào thẻ sản phẩm */
.fs-gk-card:hover .hover-glass::before {
    left: 140%;              /* Chạy vụt qua mép bên phải */
    transition: left 0.55s ease-in-out; /* Thời gian quẹt sáng (0.75 giây) */
}




.tvq-modal {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    z-index: 999999;
    align-items: center; justify-content: center;
    box-sizing: border-box;
}
.tvq-modal.is-active {
    display: flex !important;
}
.tvq-modal-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(2px);
}
.tvq-modal-dialog {
    position: relative;
    z-index: 10;
    background: #fff;
    width: 92%; max-width: 500px;
    max-height: 88vh;
    overflow-y: auto;
    border-radius: 20px;
    padding: 26px 20px 18px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.25);
    animation: tvqZoomIn 0.25s ease-out;
}
.tvq-modal-dialog button {
	margin: 0;
}
@keyframes tvqZoomIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}
.tvq-modal-dialog {
    overflow-x: hidden !important; /* Chặn tuyệt đối cuộn ngang */
}
/* NÚT TẮT X GÓC FORM */
.tvq-close-btn {
    position: absolute;
    top: 10px; right: -10px;
    background: transparent; border: none;
    font-size: 30px; line-height: 1;
    color: #888; cursor: pointer;
    z-index: 20;
}
.tvq-close-btn:hover { color: #000; }

/* HỘP NỔI BẬT TÊN SẢN PHẨM TRÊN FORM */
.tvq-product-badge {
    background: #f0f4f9;
    border-left: 4px solid #004b91;
    padding: 10px 14px;
    margin-bottom: 16px;
    border-radius: 6px;
    text-align: left;
}
.tvq-badge-label {
    display: block;
    font-size: 12px;
    color: #666;
    text-transform: uppercase;
}
.tvq-badge-title {
    font-size: 15px;
    color: #004b91;
    font-weight: 700;
}

/* TỐI ƯU MOBILE */
@media (max-width: 767px) {
    .tvq-modal-dialog {
        width: 95%;
        padding: 22px 15px 15px;
        max-height: 85vh;
    }
}

.nav-dark .form-flat input:not([type=submit]) {
	color: var(--primary-color) !important;
}
td {
    color: #000000 !important;
}








/* 1. Ép khung bao ngoài cố định vuông 1:1 */
.woocommerce-product-gallery .flickity-viewport {
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  overflow: hidden !important;
}

/* 2. Ép các slide con và thẻ liên kết chiếm 100% diện tích */
.woocommerce-product-gallery .woocommerce-product-gallery__image,
.woocommerce-product-gallery .woocommerce-product-gallery__image a {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 3. Cho ảnh full tràn viền toàn bộ khung vuông */
.woocommerce-product-gallery .woocommerce-product-gallery__image img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important; /* Lấp đầy 100% khung vuông, không chừa viền trống */
  object-position: center !important; /* Luôn giữ trọng tâm ảnh ở giữa */
  display: block !important;
}




/* =======================================================
   GIAO DIỆN THẺ SẢN PHẨM OVERLAY TINH TẾ (sp-thep-home)
======================================================= */

/* 1. Tổng thể thẻ card (ĐÃ BỎ HOÀN TOÀN BORDER) */
.sp-thep-home .product-small.box.box-overlay {
    border-radius: 14px !important;
    overflow: hidden !important;
    background: #0b1320;
    border: none !important; /* Bỏ viền thẻ */
    
    /* Bóng đổ đa tầng tạo khối 3D */
    box-shadow: 
        0 8px 24px -4px rgba(0, 0, 0, 0.25),
        0 3px 8px -2px rgba(0, 0, 0, 0.15) !important;
        
    transition: transform 0.35s cubic-bezier(0.165, 0.84, 0.44, 1), 
                box-shadow 0.35s ease !important;
}

/* Hiệu ứng nhấc thẻ khi hover */
.sp-thep-home .product-small.box.box-overlay:hover {
    transform: translateY(-7px) !important;
    border: none !important; /* Bỏ viền khi hover */
    box-shadow: 
        0 20px 38px -10px rgba(0, 0, 0, 0.42),
        0 8px 16px -4px rgba(0, 0, 0, 0.22) !important;
}

/* 2. Ảnh zoom nhẹ khi hover */
.sp-thep-home .product-small.box.box-overlay .image-cover img {
    transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

.sp-thep-home .product-small.box.box-overlay:hover .image-cover img {
    transform: scale(1.06);
}

/* 3. Lớp gradient trong suốt, giữ ảnh sáng rõ nét */
.sp-thep-home .product-small.box.box-overlay .overlay {
    background: linear-gradient(
        to bottom, 
        rgba(0, 0, 0, 0) 0%, 
        rgba(0, 0, 0, 0) 60%,           /* 60% phía trên trong suốt giữ nguyên độ sáng ảnh */
        rgba(0, 0, 0, 0.45) 80%, 
        rgba(0, 0, 0, 0.78) 100%        /* Đáy thẻ chỉ tối nhẹ để nổi chữ */
    ) !important;
    opacity: 1 !important;
    transition: background 0.35s ease;
}

.sp-thep-home .product-small.box.box-overlay:hover .overlay {
    background: linear-gradient(
        to bottom, 
        rgba(0, 0, 0, 0) 0%, 
        rgba(0, 0, 0, 0) 55%, 
        rgba(0, 0, 0, 0.5) 75%, 
        rgba(0, 0, 0, 0.82) 100%
    ) !important;
}

/* 4. Khung chữ nội dung dưới đáy */
.sp-thep-home .product-small.box.box-overlay .box-text {
    padding: 18px 16px !important;
    z-index: 2;
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/* Nhãn nhỏ SẢN PHẨM */
.sp-thep-home .title-wrapper::before {
    content: "SẢN PHẨM";
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--fs-color-secondary, #e67e22);
    margin-bottom: 5px;
}

/* Tiêu đề sản phẩm */
.sp-thep-home .product-title {
    margin: 0 !important;
}

.sp-thep-home .product-title a {
    color: #ffffff !important;
    font-size: 1.5rem !important; /* Cỡ chữ 1.5rem của bạn */
    font-weight: 700 !important;
    line-height: 1.35 !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 5. Khung 2 nút: Căn trái tự nhiên */
.sp-thep-home .fs-home-actions {
    display: flex !important;
    flex-direction: row !important; /* Luôn giữ 1 hàng */
    justify-content: flex-start !important;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    width: auto !important;
}

/* 6. Kiểu dáng 2 nút bấm kính mờ */
.sp-thep-home .fs-home-actions > a {
    flex: 0 0 auto !important; /* Ôm gọn theo chữ */
    width: auto !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 14px !important;
    font-size: 15px !important; /* Cỡ chữ nút 15px của bạn */
    font-weight: 500;
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: 30px !important;
    text-decoration: none !important;
    box-shadow: none !important;
    white-space: nowrap;
    transition: all 0.25s ease;
}

/* Hiệu ứng khi rê chuột vào nút */
.sp-thep-home .fs-home-actions > a.fs-btn-contact:hover {
    background: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    transform: translateY(-2px);
}

.sp-thep-home .fs-home-actions > a.fs-btn-details:hover {
    background: rgba(255, 255, 255, 0.28) !important;
    border-color: #ffffff !important;
    transform: translateY(-2px);
}

/* Xóa nút xem chi tiết cũ thừa */
.sp-thep-home .overlay-tools::after {
    display: none !important;
    content: none !important;
}

/* 7. Tối ưu trên điện thoại (Mobile) */
@media (max-width: 767px) {
    .sp-thep-home .product-small.box.box-overlay .box-text {
        padding: 14px 12px !important;
    }

    .sp-thep-home .fs-home-actions {
        gap: 6px;
        margin-top: 8px;
    }
}

.portfolio-element-wrapper  ul li a {
	font-size: 1rem;
	color: #000;
}


#portfolio-content p {
	text-align: justify
}








/* Ép khung ảnh gallery về cùng tỉ lệ 300x188 */
.gallery-col .box-image {
    aspect-ratio: 300 / 188;
    overflow: hidden;
}

/* Đảm bảo ảnh luôn phủ đầy khung và không bị méo hình */
.gallery-col .box-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center;
}

.vu-quyen-steel .button {
	display: block;
	margin: 0 auto;
	width: max-content;
}

.flickity-prev-next-button svg {
	fill: var(--primary-color) !important
}
.slider-nav-circle .flickity-prev-next-button svg  {
	border-color: var(--primary-color) !important;
	opacity: 1 !important;
}

.flickity-prev-next-button .arrow {
	fill: var(--primary-color) !important
}