/* 
Theme Name:		 Jokaso Việt Nam
Theme URI:		 http://childtheme-generator.com/
Description:	 Jokaso Việt Nam is a child theme of Twenty Twenty-Five, created by ChildTheme-Generator.com
Author:			 Nam Digital
Author URI:		 http://childtheme-generator.com/
Template:		 twentytwentyfive
Version:		 1.2.1
Text Domain:	 jokaso
*/


/*
    Add your custom styles here
*/

/* =========================================================
   Hiệu ứng hover THỐNG NHẤT: NỔI LÊN + PHÓNG TO nhẹ + đổ bóng.
   Áp cho MỌI khối card:
   - card trong Query Loop (sản phẩm, dự án, tin tức, video)
   - swiper slide, card "bài viết liên quan"
   - card TĨNH được plugin nam-block-aos đánh dấu (.nam-hover-*) gồm
     Hộ gia đình / Chủ đầu tư / Bằng sáng chế ... ở đầu trang.
   ========================================================= */
.wp-block-query .wp-block-post,
.wp-block-post-template>li,
.my-filtered-loop .wp-block-post,
.nam-related-card,
.nam-hover-float-up,
.nam-hover-float-up-shadow,
.nam-hover-float-up-subtle,
.nam-hover-zoom-in {
	transition: transform .3s cubic-bezier(.2, .7, .3, 1), box-shadow .3s ease !important;
}

/* Khi hover: nâng lên + phóng to nhẹ + đổ bóng */
.wp-block-query .wp-block-post:hover,
.wp-block-post-template>li:hover,
.my-filtered-loop .wp-block-post:hover,
.nam-related-card:hover,
.nam-hover-float-up:hover,
.nam-hover-float-up-shadow:hover,
.nam-hover-float-up-subtle:hover,
.nam-hover-zoom-in:hover {
	transform: translateY(-8px) scale(1.02) !important;
	box-shadow: 0 16px 32px rgba(0, 0, 0, 0.16) !important;
	position: relative;
	z-index: 2;
	border-radius: 8px;
}

/* Card trong Query Loop: đổ bóng lên group con (giữ bo góc đẹp) */
.wp-block-query .wp-block-post:hover>.wp-block-group,
.wp-block-post-template>li:hover>.wp-block-group,
.my-filtered-loop .wp-block-post:hover>.wp-block-group {
	box-shadow: 0 16px 32px rgba(0, 0, 0, 0.16) !important;
	border-radius: 8px;
}

/* CHỐNG "nổi/bóng 2 lần": nếu khối .nam-hover-* NẰM TRONG .wp-block-post
   thì để .wp-block-post lo việc nâng — vô hiệu transform của khối con. */
.wp-block-post .nam-hover-float-up:hover,
.wp-block-post .nam-hover-float-up-shadow:hover,
.wp-block-post .nam-hover-float-up-subtle:hover,
.wp-block-post .nam-hover-zoom-in:hover {
	transform: none !important;
	box-shadow: none !important;
}

/* (A) KHÔNG hover cho WRAPPER chứa nhiều card (tránh phóng to cả hàng/khối).
   Dùng class kết hợp để đủ độ ưu tiên thắng quy tắc chung .nam-hover-*. */
.wp-block-post-template:hover,
.wp-block-post-template.nam-hover-zoom-in:hover,
.wp-block-post-template.nam-hover-float-up:hover,
.wp-block-post-template.nam-hover-float-up-shadow:hover,
.wp-block-post-template.nam-hover-float-up-subtle:hover,
.wp-block-query.nam-hover-zoom-in:hover,
.wp-block-columns.nam-hover-zoom-in:hover,
.nam-carousel:hover,
.nam-carousel__viewport:hover,
.nam-carousel__track:hover {
	transform: none !important;
	box-shadow: none !important;
	z-index: auto !important;
}

/* (B1) Slider hero là slider TĨNH -> KHÔNG hover bất kỳ khối nào bên trong. */
.nam-swiper-slider:hover,
.nam-swiper-slider .swiper-slide:hover,
.nam-swiper-slider .nam-hover-zoom-in:hover,
.nam-swiper-slider .nam-hover-float-up:hover,
.nam-swiper-slider .nam-hover-float-up-shadow:hover,
.nam-swiper-slider .nam-hover-float-up-subtle:hover {
	transform: none !important;
	box-shadow: none !important;
	z-index: auto !important;
}

/* (C) KHỐI TRANG TRÍ không cần hover/shadow: khối ảnh "Về chúng tôi"
   (.relative-class), logo đối tác, và ảnh tĩnh. Dùng class kết hợp để
   đủ ưu tiên thắng quy tắc .nam-hover-* chung. */
.relative-class.nam-hover-zoom-in:hover,
.relative-class.nam-hover-float-up:hover,
.relative-class .nam-hover-zoom-in:hover,
.nam-partners-slider-wrapper:hover,
.nam-partner-logo:hover,
.nam-partners-slider-wrapper .swiper-slide:hover,
.nam-partners-slider-wrapper [class*="nam-hover"]:hover,
.wp-block-image.nam-hover-zoom-in:hover,
.wp-block-image.nam-hover-float-up:hover,
.wp-block-image .nam-hover-zoom-in:hover {
	transform: none !important;
	box-shadow: none !important;
	z-index: auto !important;
}

/* =========================================================
   MOBILE: chống vỡ giao diện
   ========================================================= */
@media (max-width: 781px) {

	/* Chặn tràn ngang (AOS hướng ngang / khối rộng) gây cuộn ngang & vỡ layout */
	html,
	body {
		overflow-x: hidden;
		max-width: 100%;
	}

	/* Khối "Bằng sáng chế" (.s3): dùng CSS GRID 2 cột đều -> không còn cột trống,
	   không phụ thuộc flex-basis (tránh bị CSS khác đè). */
	.s3 .wp-block-columns {
		display: grid !important;
		grid-template-columns: 1fr 1fr !important;
		gap: 14px 14px !important;
		padding-left: 12px !important;
		padding-right: 12px !important;
		align-items: stretch !important;
	}

	.s3 .wp-block-columns>.wp-block-column {
		width: auto !important;
		max-width: none !important;
		min-width: 0 !important;
		flex: initial !important;
		margin: 0 !important;
	}

	/* Card patent cao bằng nhau */
	.s3 .wp-block-columns>.wp-block-column,
	.s3 .wp-block-columns>.wp-block-column>.wp-block-group {
		height: 100%;
	}

	/* HEADER mobile gọn lại: logo nhỏ + giảm padding dọc */
	header.wp-block-template-part .wp-block-site-logo,
	header.wp-block-template-part .custom-logo-link {
		width: 60px !important;
	}

	header.wp-block-template-part .wp-block-site-logo img,
	header.wp-block-template-part .custom-logo {
		width: 60px !important;
		height: auto !important;
	}

	header.wp-block-template-part .wp-block-group {
		padding-top: 6px !important;
		padding-bottom: 6px !important;
	}

	/* Hàng tiêu đề section (heading + nút "Xem tất cả"): đẩy nút về GÓC PHẢI
	   trên mobile thay vì rớt xuống trái để trống bên phải, + khoảng cách dọc
	   để nút không dính sát tiêu đề khi xuống dòng. */
	.wp-block-group.alignwide.is-content-justification-space-between:not(.menu) {
		row-gap: 14px !important;
	}

	.wp-block-group.alignwide.is-content-justification-space-between:not(.menu)>.wp-block-buttons {
		margin-left: auto !important;
		margin-top: 4px !important;
	}
}

/* =========================================================
   UI FIXES: Cards alignment, navigation, contact form & responsive tables
   ========================================================= */

/* 1. Card Layout & Button Alignment */
.wp-block-post-template,
.wp-block-query ul {
	display: grid !important;
	align-items: stretch !important;
}

.wp-block-post-template>li,
.wp-block-query .wp-block-post,
.my-filtered-loop .wp-block-post {
	display: flex !important;
	flex-direction: column !important;
	height: 100% !important;
	align-self: stretch !important;
}

/* Ensure the wrapper group inside each card occupies full height */
.wp-block-post-template>li>.wp-block-group,
.wp-block-query .wp-block-post>.wp-block-group,
.my-filtered-loop .wp-block-post>.wp-block-group,
.wp-block-post-template>li>div,
.wp-block-query .wp-block-post>div {
	display: flex !important;
	flex-direction: column !important;
	flex: 1 1 auto !important;
	height: 100% !important;
}

/* Push the buttons block to the bottom of the card */
.wp-block-post-template>li>.wp-block-group>.wp-block-buttons,
.wp-block-query .wp-block-post>.wp-block-group>.wp-block-buttons,
.my-filtered-loop .wp-block-post>.wp-block-group>.wp-block-buttons,
.wp-block-post-template>li>.wp-block-group .wp-block-buttons:last-child,
.wp-block-query .wp-block-post>.wp-block-group .wp-block-buttons:last-child,
.my-filtered-loop .wp-block-post>.wp-block-group .wp-block-buttons:last-child,
.wp-block-post-template>li>.wp-block-group>.wp-block-button,
.wp-block-query .wp-block-post>.wp-block-group>.wp-block-button,
.my-filtered-loop .wp-block-post>.wp-block-group>.wp-block-button,
.wp-block-post-template>li>.wp-block-group .wp-block-button:last-child,
.wp-block-query .wp-block-post>.wp-block-group .wp-block-button:last-child,
.my-filtered-loop .wp-block-post>.wp-block-group .wp-block-button:last-child,
/* Nút "Xem thêm" / "Liên hệ ngay" dạng link (wp-block-read-more / nam-more-btn) — cũng đẩy xuống đáy card */
.wp-block-post-template>li>.wp-block-group>.wp-block-read-more,
.wp-block-query .wp-block-post>.wp-block-group>.wp-block-read-more,
.my-filtered-loop .wp-block-post>.wp-block-group>.wp-block-read-more,
.wp-block-post-template>li .nam-more-btn,
.wp-block-query .wp-block-post .nam-more-btn,
.my-filtered-loop .wp-block-post .nam-more-btn,
.nam-related-card .nam-more-btn {
	margin-top: auto !important;
	padding-top: 15px !important;
}

/* 2. Hide specific navigation menu items */
.wp-block-navigation-item:has(a[href*="tam-nhin"]),
.wp-block-navigation-item:has(a[href*="truyen-thong"]),
.menu-item:has(a[href*="tam-nhin"]),
.menu-item:has(a[href*="truyen-thong"]),
a[href*="tam-nhin-su-menh"],
a[href*="truyen-thong-doanh-nghiep"] {
	display: none !important;
}

/* 3. Style cover contact form to be a centered container with border-radius */
.wp-block-cover:has(.wpcf7),
.single .wp-block-cover,
.single-post .wp-block-cover,
.single-project .wp-block-cover,
.single-tuyen_dung .wp-block-cover {
	max-width: var(--wp--style--global--wide-size, 1200px) !important;
	width: calc(100% - 32px) !important;
	margin-left: auto !important;
	margin-right: auto !important;
	border-radius: 20px !important;
	overflow: hidden !important;
}

@media (min-width: 1232px) {

	.wp-block-cover:has(.wpcf7),
	.single .wp-block-cover,
	.single-post .wp-block-cover,
	.single-project .wp-block-cover,
	.single-tuyen_dung .wp-block-cover {
		width: 100% !important;
	}
}

/* Cover container for CF7 form — removed dark override, user controls via block editor */
/* .wp-block-cover:has(.wpcf7) .wp-block-cover__inner-container { ... } */

/* =========================================================
   CONTACT FORM 7 — .form-jokaso clean light style
   ========================================================= */

.form-container.form-jokaso {
	padding: 20px;
}

.form-jokaso p {
	margin: 0;
	padding: 0;
	width: 100%;
}

.form-jokaso {
	background-color: #ffffff;
	padding: 16px 0;
}

.form-jokaso .row {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-bottom: 16px;
}

.form-jokaso .column {
	flex: 1;
	min-width: 220px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.form-jokaso .row .wpcf7-form-control-wrap {
	width: 100%;
}

.form-jokaso .row.justify-center {
	justify-content: center;
}

.form-jokaso .flex-column {
	flex-direction: column;
}

/* Inputs & Textarea */


.form-jokaso .wpcf7-form-control:not(.wpcf7-submit) {
	width: 100% !important;
	background-color: #ffffff !important;
	color: #1a1a1a !important;
	border: none !important;
	border-bottom: 2px solid #e0e0e0 !important;
	border-radius: 0 !important;
	padding: 10px 2px !important;
	font-size: 15px !important;
	box-sizing: border-box !important;
	transition: border-color 0.25s ease !important;
	outline: none !important;
	box-shadow: none !important;
}

.form-jokaso .wpcf7-form-control:not(.wpcf7-submit):focus {
	border-bottom-color: #398D42 !important;
	background-color: #ffffff !important;
	outline: none !important;
	box-shadow: none !important;
}

.form-jokaso .wpcf7-form-control::placeholder {
	color: #999 !important;
	font-size: 14px !important;
	opacity: 1 !important;
}

.form-jokaso textarea.wpcf7-textarea {
	height: auto !important;
	min-height: 90px !important;
	resize: vertical !important;
	border: 1px solid #e0e0e0 !important;
	border-radius: 6px !important;
	padding: 10px 12px !important;
}

.form-jokaso textarea.wpcf7-textarea:focus {
	border-color: #398D42 !important;
}

/* Submit button */
.form-jokaso .wpcf7-submit {
	background: #398D42 !important;
	color: #ffffff !important;
	border: none !important;
	padding: 13px 40px !important;
	border-radius: 6px !important;
	font-weight: 700 !important;
	font-size: 15px !important;
	letter-spacing: 0.5px !important;
	cursor: pointer !important;
	transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important;
	width: auto !important;
}

.form-jokaso .wpcf7-submit:hover {
	background: #2d7535 !important;
	transform: translateY(-2px) !important;
	box-shadow: 0 6px 18px rgba(57, 141, 66, 0.35) !important;
}

/* Validation errors */
.form-jokaso .wpcf7-not-valid-tip {
	font-size: 12px !important;
	color: #e53935 !important;
	margin-top: 4px !important;
}

.form-jokaso .wpcf7-not-valid {
	border-bottom-color: #e53935 !important;
}

/* Response output */
.form-jokaso .wpcf7-response-output {
	margin: 16px 0 0 0 !important;
	border-radius: 6px !important;
	padding: 12px 16px !important;
	font-size: 14px !important;
	border: 1px solid #c8e6c9 !important;
	background-color: #f1f8f2 !important;
	color: #2d7535 !important;
}

/* Responsive: stack columns on mobile */
@media (max-width: 600px) {
	.form-jokaso .column {
		min-width: 100% !important;
	}
}

/* 4. Responsive Table */
.wp-block-table {
	display: block !important;
	width: 100% !important;
	overflow-x: auto !important;
	-webkit-overflow-scrolling: touch !important;
	/* Thanh cuộn mỏng, gọn hơn */
	scrollbar-width: thin;
	scrollbar-color: #c0c0c0 #f0f0f0;
}

.wp-block-table::-webkit-scrollbar {
	height: 6px;
}

.wp-block-table::-webkit-scrollbar-track {
	background: #f0f0f0;
	border-radius: 3px;
}

.wp-block-table::-webkit-scrollbar-thumb {
	background: #c0c0c0;
	border-radius: 3px;
}

.wp-block-table table {
	width: 100% !important;
	/* Bỏ min-width cứng — dùng table-layout: auto để trình duyệt tự
       phân bổ độ rộng cột. Nếu bảng quá hẹp thì wrapper sẽ cuộn ngang. */
	min-width: 480px !important;
	border-collapse: collapse !important;
	table-layout: auto !important;
}

.wp-block-table th,
.wp-block-table td {
	/* Cho phép xuống dòng để tránh cột đè lên nhau */
	word-break: break-word !important;
	overflow-wrap: break-word !important;
	white-space: normal !important;
	/* Padding gọn hơn khi không gian hẹp */
	padding: 10px 12px !important;
	vertical-align: middle !important;
}

/* Desktop: font chuẩn */
@media (min-width: 768px) {

	.wp-block-table th,
	.wp-block-table td {
		font-size: 0.9375rem !important;
		/* 15px */
	}
}

/* Tablet / màn hình hẹp: thu nhỏ chữ + padding để dữ liệu vừa ô */
@media (max-width: 767px) {
	.wp-block-table table {
		min-width: 360px !important;
	}

	.wp-block-table th,
	.wp-block-table td {
		font-size: 0.75rem !important;
		/* 12px */
		padding: 7px 8px !important;
		line-height: 1.35 !important;
	}
}

/* Mobile nhỏ: co chữ xuống 11px để dữ liệu kỹ thuật (như kích thước) không bị chèn nhau */
@media (max-width: 480px) {

	.wp-block-table th,
	.wp-block-table td {
		font-size: 0.6875rem !important;
		/* 11px */
		padding: 5px 6px !important;
	}
}

/* 5. Disable heading gradients and force solid primary color #398D42 (Son Ha concept) */
.has-text-gradient,
.has-nam-text-gradient,
.has-nam-text-gradient .editor-rich-text__editable {
	background: none !important;
	background-clip: unset !important;
	-webkit-background-clip: unset !important;
	-webkit-text-fill-color: var(--wp--preset--color--primary, #398D42) !important;
	color: var(--wp--preset--color--primary, #398D42) !important;
}

/* =========================================================
   FIX: Nền trắng CHỈ cho body và card bên trong Query Loop.
   KHÔNG ép background lên .wp-block-group / .wp-block-columns
   vì chúng có thể là section footer, CTA, hero… có nền tối/màu.
   ========================================================= */
body {
	background-color: #ffffff;
}

/* Card bên trong query loop / carousel — nền trắng cho card */
.wp-block-post-template>li>.wp-block-group,
.wp-block-query .wp-block-post>.wp-block-group,
.my-filtered-loop .wp-block-post>.wp-block-group {
	background-color: #fff;
}

/* =========================================================
   FIX: Card cao bằng nhau — clamp tiêu đề bài viết 3 dòng.
   Áp dụng cho tất cả post title trong Query Loop, carousel,
   và bài viết liên quan.
   ========================================================= */

/* Tiêu đề bài viết trong Query Loop: cắt gọn 3 dòng, tự co giãn tự nhiên */
.wp-block-post-template .wp-block-post-title,
.wp-block-query .wp-block-post-title,
.my-filtered-loop .wp-block-post-title,
.wp-block-post-template .wp-block-post-title a,
.wp-block-query .wp-block-post-title a,
.my-filtered-loop .wp-block-post-title a {
	display: -webkit-box !important;
	-webkit-line-clamp: 3 !important;
	-webkit-box-orient: vertical !important;
	overflow: hidden !important;
	line-height: 1.4 !important;
	margin-top: 0 !important;
	margin-bottom: 10px !important;
	min-height: auto !important;
	/* Bỏ min-height cứng để tránh khoảng trống thừa */
}

/* Tiêu đề trong carousel: cùng quy tắc */
.nam-carousel .wp-block-post-title,
.nam-carousel .wp-block-post-title a {
	display: -webkit-box !important;
	-webkit-line-clamp: 3 !important;
	-webkit-box-orient: vertical !important;
	overflow: hidden !important;
	line-height: 1.4 !important;
	margin-top: 0 !important;
	margin-bottom: 10px !important;
	min-height: auto !important;
}

/* Định dạng ngày tháng gọn gàng */
.wp-block-post-template .wp-block-post-date,
.wp-block-query .wp-block-post-date,
.my-filtered-loop .wp-block-post-date,
.nam-carousel .wp-block-post-date {
	font-size: 0.85rem !important;
	color: #777777 !important;
	margin-top: 0 !important;
	margin-bottom: 10px !important;
	display: block !important;
	font-weight: 500 !important;
}

/* Post excerpt trong card: giới hạn 2 dòng để card không bị kéo dài */
.wp-block-post-template .wp-block-post-excerpt,
.wp-block-query .wp-block-post-excerpt,
.my-filtered-loop .wp-block-post-excerpt,
.nam-carousel .wp-block-post-excerpt,
.wp-block-post-template .wp-block-post-excerpt__excerpt,
.wp-block-query .wp-block-post-excerpt__excerpt,
.my-filtered-loop .wp-block-post-excerpt__excerpt,
.nam-carousel .wp-block-post-excerpt__excerpt {
	display: -webkit-box !important;
	-webkit-line-clamp: 2 !important;
	-webkit-box-orient: vertical !important;
	overflow: hidden !important;
	margin-top: 0 !important;
	margin-bottom: 15px !important;
	line-height: 1.5 !important;
}

/* Ảnh thumbnail trong card: tỷ lệ đồng nhất */
.wp-block-post-template .wp-block-post-featured-image,
.wp-block-query .wp-block-post-featured-image,
.my-filtered-loop .wp-block-post-featured-image,
.nam-carousel .wp-block-post-featured-image,
.wp-block-post-template .wp-block-image,
.wp-block-query .wp-block-image,
.nam-related-card__thumb {
	aspect-ratio: 16 / 10 !important;
	overflow: hidden !important;
}

.wp-block-post-template .wp-block-post-featured-image img,
.wp-block-query .wp-block-post-featured-image img,
.my-filtered-loop .wp-block-post-featured-image img,
.nam-carousel .wp-block-post-featured-image img,
.wp-block-post-template .wp-block-image img,
.wp-block-query .wp-block-image img,
.nam-related-card__thumb img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
}

/* =========================================================
   HEADER & NAVIGATION STYLE (Son Ha Concept)
   ========================================================= */

/* Outer header wrapper: must sit above the hero slider (z-index:1) */
header.wp-block-template-part,
header.wp-block-group.alignfull {
	position: relative !important;
	z-index: 500 !important;
}

/* Main Navigation Bar Container */
header.wp-block-group>.wp-block-group:last-child {
	background-color: #ffffff !important;
	border-bottom: 1px solid #eeeeee !important;
	position: sticky !important;
	top: 0 !important;
	z-index: 1000 !important;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03) !important;
}

/* Ensure columns layout matches Son Ha (Logo Left, Menu Center/Right, Search Right) */
header.wp-block-group .wp-block-columns.alignwide {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	justify-content: space-between !important;
	align-items: center !important;
	width: 100% !important;
	max-width: 1200px !important;
	margin: 0 auto !important;
	padding: 12px 20px !important;
	box-sizing: border-box !important;
}

/* Position columns using Flex Order */
/* Column 1 (Left Navigation Block in HTML) -> move to Center/Right */
header.wp-block-group .wp-block-columns.alignwide>.wp-block-column:nth-child(1) {
	order: 2 !important;
	flex: 1 1 auto !important;
	flex-basis: auto !important;
	display: flex !important;
	justify-content: flex-end !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Column 2 (Logo Block in HTML) -> move to Left */
header.wp-block-group .wp-block-columns.alignwide>.wp-block-column:nth-child(2) {
	order: 1 !important;
	flex: 0 0 auto !important;
	flex-basis: auto !important;
	margin: 0 35px 0 0 !important;
	padding: 0 !important;
}

/* Column 3 (Right Navigation & Search Block in HTML) -> move to Far Right */
header.wp-block-group .wp-block-columns.alignwide>.wp-block-column:nth-child(3) {
	order: 3 !important;
	flex: 0 0 auto !important;
	flex-basis: auto !important;
	display: flex !important;
	align-items: center !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Clean up individual columns for flexbox rendering */
header.wp-block-group .wp-block-column {
	width: auto !important;
	max-width: none !important;
	min-width: 0 !important;
}

/* Align Nav items and Search inside Column 3 */
header.wp-block-group .wp-block-columns.alignwide>.wp-block-column:nth-child(3) .wp-block-group {
	display: flex !important;
	align-items: center !important;
	gap: 20px !important;
}

/* Style Navigation menus */
.wp-block-navigation {
	padding: 0 !important;
}

.wp-block-navigation ul.wp-block-navigation__container {
	gap: 32px !important;
	/* Spacing between menu items (Hình số 2) */
}

/* Link items styling */
.wp-block-navigation .wp-block-navigation-item a,
.wp-block-navigation .wp-block-navigation-submenu a {
	font-weight: 600 !important;
	font-size: 0.875rem !important;
	/* 14px */
	letter-spacing: 0.5px !important;
	text-transform: uppercase !important;
	color: #1a1a1a !important;
	padding: 8px 0 !important;
	position: relative !important;
	transition: color 0.25s ease !important;
	text-decoration: none !important;
}

/* Hover and Active Underline Effect */
.wp-block-navigation .wp-block-navigation-item a::after,
.wp-block-navigation .wp-block-navigation-submenu>a::after {
	content: "" !important;
	position: absolute !important;
	bottom: -4px !important;
	left: 0 !important;
	width: 100% !important;
	height: 3px !important;
	background-color: var(--wp--preset--color--primary, #398D42) !important;
	border-radius: 2px !important;
	transform: scaleX(0) !important;
	transform-origin: bottom right !important;
	transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Hover underline trigger */
.wp-block-navigation .wp-block-navigation-item a:hover,
.wp-block-navigation .wp-block-navigation-submenu>a:hover {
	color: var(--wp--preset--color--primary, #398D42) !important;
}

.wp-block-navigation .wp-block-navigation-item a:hover::after,
.wp-block-navigation .wp-block-navigation-submenu>a:hover::after {
	transform: scaleX(1) !important;
	transform-origin: bottom left !important;
}

/* Active Page Underline */
.wp-block-navigation .wp-block-navigation-item.current-menu-item>a,
.wp-block-navigation .wp-block-navigation-item.current-menu-ancestor>a,
.wp-block-navigation .wp-block-navigation-item.current_page_item>a,
.wp-block-navigation .wp-block-navigation-item.current-menu-parent>a,
.wp-block-navigation .wp-block-navigation-submenu.current-menu-item>a,
.wp-block-navigation .wp-block-navigation-submenu.current-menu-ancestor>a {
	color: var(--wp--preset--color--primary, #398D42) !important;
}

.wp-block-navigation .wp-block-navigation-item.current-menu-item>a::after,
.wp-block-navigation .wp-block-navigation-item.current-menu-ancestor>a::after,
.wp-block-navigation .wp-block-navigation-item.current_page_item>a::after,
.wp-block-navigation .wp-block-navigation-item.current-menu-parent>a::after,
.wp-block-navigation .wp-block-navigation-submenu.current-menu-item>a::after,
.wp-block-navigation .wp-block-navigation-submenu.current-menu-ancestor>a::after {
	transform: scaleX(1) !important;
	transform-origin: bottom left !important;
}

/* Style search block */
header.wp-block-group .wp-block-search {
	margin: 0 !important;
	display: flex !important;
	align-items: center !important;
}

header.wp-block-group .wp-block-search .wp-block-search__inside-wrapper {
	border: 1px solid #cccccc !important;
	border-radius: 20px !important;
	padding: 2px 8px 2px 14px !important;
	background-color: #ffffff !important;
	display: flex !important;
	align-items: center !important;
	transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

header.wp-block-group .wp-block-search .wp-block-search__inside-wrapper:focus-within {
	border-color: var(--wp--preset--color--primary, #398D42) !important;
	box-shadow: 0 0 0 3px rgba(57, 141, 66, 0.12) !important;
}

header.wp-block-group .wp-block-search__input {
	border: none !important;
	padding: 4px 0 !important;
	margin: 0 !important;
	font-size: 0.85rem !important;
	background: transparent !important;
	outline: none !important;
	color: #333333 !important;
	width: 140px !important;
}

header.wp-block-group .wp-block-search__button {
	background: none !important;
	color: #555555 !important;
	border: none !important;
	padding: 0 4px !important;
	margin: 0 !important;
	cursor: pointer !important;
	transition: color 0.25s ease !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

header.wp-block-group .wp-block-search__button:hover {
	color: var(--wp--preset--color--primary, #398D42) !important;
}

header.wp-block-group .wp-block-search__button svg {
	width: 18px !important;
	height: 18px !important;
}

/* 9. Prevent text cursor on headings and static text */
h1,
h2,
h3,
h4,
h5,
h6,
.wp-block-heading {
	cursor: default !important;
}

/* ---------------------------------------------------------
   Dropdown Submenu Custom Styling (Hình số 3)
   --------------------------------------------------------- */
@media (min-width: 1025px) {
	.wp-block-navigation .wp-block-navigation__submenu-container {
		position: absolute !important;
		background-color: #ffffff !important;
		border: 1px solid #eeeeee !important;
		box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
		border-radius: 8px !important;
		padding: 6px 0 !important;
		min-width: 230px !important;
		margin-top: 10px !important;
		z-index: 1000 !important;
	}

	.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item a,
	.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-submenu a {
		font-weight: 500 !important;
		font-size: 0.9rem !important;
		/* 14.5px */
		/* Khách yêu cầu 13/07/2026: mọi mục trong dropdown đều VIẾT HOA, kể cả mục
		   được gõ chữ thường trong menu (vd "Về chúng tôi") -> ép ở CSS thay vì sửa từng mục. */
		text-transform: uppercase !important;
		letter-spacing: 0.3px !important;
		color: #333333 !important;
		padding: 12px 20px !important;
		display: block !important;
		border-bottom: 1px solid #f5f5f5 !important;
		transition: all 0.2s ease !important;
		text-align: left !important;
	}

	/* Remove bottom border on last child of submenu */
	.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item:last-child a,
	.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-submenu:last-child a {
		border-bottom: none !important;
	}

	/* Hover effect on Submenu Items (Text Green + background gray tint) */
	.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item a:hover,
	.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-submenu a:hover {
		background-color: #f9f9f9 !important;
		color: var(--wp--preset--color--primary, #398D42) !important;
		padding-left: 24px !important;
		/* minor shift right */
	}

	/* Current active item inside submenu */
	.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item.current-menu-item>a {
		color: var(--wp--preset--color--primary, #398D42) !important;
		font-weight: 600 !important;
	}

	/* Hide hover underline bars inside dropdown lists */
	.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item a::after,
	.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-submenu>a::after {
		display: none !important;
	}
}

/* ---------------------------------------------------------
   Custom Mobile Header & Drawer Overlay Styles
   --------------------------------------------------------- */
.nam-mobile-drawer {
	display: none !important;
}

@media (min-width: 1025px) {
	.nam-header-desktop {
		display: block !important;
	}

	.nam-header-mobile {
		display: none !important;
	}
}

@media (max-width: 1024px) {
	.nam-header-desktop {
		display: none !important;
	}

	.nam-header-mobile {
		display: block !important;
		width: 100% !important;
		/* Do NOT use CSS sticky here — parent height constraint breaks it.
           JS (initStickyHeader) will add .is-sticky class for fixed positioning. */
		position: relative !important;
		z-index: 1000 !important;
		background-color: #ffffff !important;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
		transition: box-shadow 0.3s ease;
	}

	/* JS-driven sticky for mobile header (mirrors desktop #site-header.is-sticky) */
	.nam-header-mobile.is-sticky {
		position: fixed !important;
		top: 0 !important;
		left: 0 !important;
		right: 0 !important;
		z-index: 10000 !important;
		background-color: #ffffff !important;
		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10) !important;
		animation: stickySlideDown 0.3s ease forwards;
	}

	/* Compensate body for fixed mobile header */
	body:has(.nam-header-mobile.is-sticky) {
		padding-top: var(--sticky-header-height, 0px);
	}

	/* Admin bar offset for mobile sticky */
	.admin-bar .nam-header-mobile.is-sticky {
		top: 46px !important;
	}

	.nam-mobile-header-bar {
		display: flex !important;
		justify-content: space-between !important;
		align-items: center !important;
		padding: 12px 20px !important;
		background-color: #ffffff !important;
		box-sizing: border-box !important;
		width: 100% !important;
	}

	.nam-mobile-logo img,
	.nam-mobile-logo .custom-logo-link img,
	.nam-mobile-logo .custom-logo {
		height: 38px !important;
		width: auto !important;
		display: block !important;
	}

	/* Remove default link styling from get_custom_logo() output */
	.nam-mobile-logo .custom-logo-link {
		display: inline-flex !important;
		align-items: center !important;
		line-height: 0 !important;
	}

	.nam-mobile-header-actions {
		display: flex !important;
		align-items: center !important;
		gap: 15px !important;
	}

	/* Hamburger Toggle Button */
	.nam-mobile-menu-toggle {
		background: none !important;
		border: none !important;
		cursor: pointer !important;
		display: flex !important;
		flex-direction: column !important;
		gap: 5px !important;
		padding: 8px !important;
		margin: 0 !important;
	}

	.nam-mobile-menu-toggle .hamburger-bar {
		display: block !important;
		width: 22px !important;
		height: 2px !important;
		background-color: #333333 !important;
		transition: all 0.25s ease !important;
	}

	/* Toggle X Animation */
	.nam-mobile-menu-toggle.is-active .hamburger-bar:nth-child(1) {
		transform: translateY(7px) rotate(45deg) !important;
	}

	.nam-mobile-menu-toggle.is-active .hamburger-bar:nth-child(2) {
		opacity: 0 !important;
	}

	.nam-mobile-menu-toggle.is-active .hamburger-bar:nth-child(3) {
		transform: translateY(-7px) rotate(-45deg) !important;
	}

	/* Mobile Drawer Panel */
	.nam-mobile-drawer {
		position: fixed !important;
		top: 0 !important;
		left: 0 !important;
		width: 100% !important;
		height: 100% !important;
		z-index: 999999999 !important;
		/* extremely high to overlap all floating buttons */
		visibility: hidden !important;
		pointer-events: none !important;
		display: block !important;
	}

	.nam-mobile-drawer.is-active {
		visibility: visible !important;
		pointer-events: auto !important;
	}

	.nam-mobile-drawer__overlay {
		position: absolute !important;
		top: 0 !important;
		left: 0 !important;
		width: 100% !important;
		height: 100% !important;
		background-color: rgba(0, 0, 0, 0.45) !important;
		opacity: 0 !important;
		transition: opacity 0.3s ease !important;
	}

	.nam-mobile-drawer.is-active .nam-mobile-drawer__overlay {
		opacity: 1 !important;
	}

	.nam-mobile-drawer__wrapper {
		position: absolute !important;
		top: 0 !important;
		right: -320px !important;
		width: 85% !important;
		max-width: 310px !important;
		height: 100vh !important;
		background-color: #ffffff !important;
		box-shadow: -5px 0 25px rgba(0, 0, 0, 0.15) !important;
		display: flex !important;
		flex-direction: column !important;
		transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
		box-sizing: border-box !important;
	}

	/* Push mobile drawer wrapper down when WordPress Admin Bar is active */
	.admin-bar .nam-mobile-drawer__wrapper {
		top: 32px !important;
		height: calc(100vh - 32px) !important;
	}

	@media (max-width: 782px) {
		.admin-bar .nam-mobile-drawer__wrapper {
			top: 46px !important;
			height: calc(100vh - 46px) !important;
		}
	}

	.nam-mobile-drawer.is-active .nam-mobile-drawer__wrapper {
		right: 0 !important;
	}

	/* Drawer Header */
	.nam-mobile-drawer__header {
		display: flex !important;
		justify-content: space-between !important;
		align-items: center !important;
		padding: 15px 20px !important;
		border-bottom: 1px solid #eeeeee !important;
		background-color: #ffffff !important;
		width: 100% !important;
		box-sizing: border-box !important;
	}

	.nam-mobile-drawer__logo img {
		height: 35px !important;
		width: auto !important;
		display: block !important;
	}

	.nam-mobile-drawer__close {
		background: none !important;
		border: none !important;
		font-size: 2rem !important;
		line-height: 1 !important;
		color: #555555 !important;
		cursor: pointer !important;
		padding: 0 5px !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
	}

	/* Content Area */
	.nam-mobile-drawer__content {
		flex: 1 1 auto !important;
		overflow-y: auto !important;
		display: flex !important;
		flex-direction: column !important;
		width: 100% !important;
	}

	/* Mobile Menu List */
	.nam-mobile-menu {
		list-style: none !important;
		padding: 0 !important;
		margin: 0 !important;
		width: 100% !important;
	}

	.nam-mobile-menu li {
		border-bottom: 1px solid #eeeeee !important;
		position: relative !important;
		display: block !important;
		width: 100% !important;
	}

	.nam-mobile-menu li a {
		display: block !important;
		padding: 15px 20px !important;
		font-size: 0.95rem !important;
		font-weight: 500 !important;
		color: #333333 !important;
		text-decoration: none !important;
		box-sizing: border-box !important;
		width: 100% !important;
	}

	.nam-mobile-menu li.nam-mobile-menu__has-children>a {
		padding-right: 50px !important;
	}

	/* Submenu Toggle Arrow Button */
	.nam-mobile-submenu-toggle {
		position: absolute !important;
		right: 0 !important;
		top: 0 !important;
		width: 50px !important;
		height: 50px !important;
		background: none !important;
		border: none !important;
		cursor: pointer !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		color: #888888 !important;
		z-index: 5 !important;
		padding: 0 !important;
		margin: 0 !important;
	}

	.nam-mobile-submenu-toggle::before {
		content: "\203A" !important;
		font-size: 1.5rem !important;
		font-weight: bold !important;
		transition: transform 0.25s ease !important;
		display: inline-block !important;
	}

	.nam-mobile-menu__has-children.is-open>.nam-mobile-submenu-toggle::before {
		transform: rotate(90deg) !important;
		color: var(--wp--preset--color--primary, #398D42) !important;
	}

	/* Mobile Submenu List */
	.nam-mobile-submenu {
		list-style: none !important;
		padding: 0 !important;
		margin: 0 !important;
		background-color: #fcfcfc !important;
		display: none !important;
		width: 100% !important;
	}

	.nam-mobile-menu__has-children.is-open>.nam-mobile-submenu {
		display: block !important;
	}

	.nam-mobile-submenu li {
		border-bottom: 1px solid #f0f0f0 !important;
	}

	.nam-mobile-submenu li:last-child {
		border-bottom: none !important;
	}

	.nam-mobile-submenu li a {
		padding: 12px 20px 12px 35px !important;
		font-size: 0.9rem !important;
		color: #555555 !important;
	}

	/* Footer buttons */
	.nam-mobile-drawer__footer {
		margin-top: auto !important;
		background-color: #ffffff !important;
		width: 100% !important;
		box-sizing: border-box !important;
	}

	.nam-mobile-drawer__buttons {
		display: flex !important;
		gap: 10px !important;
		padding: 15px 20px !important;
		background-color: #ffffff !important;
		width: 100% !important;
		box-sizing: border-box !important;
	}

	.nam-drawer-btn {
		flex: 1 1 50% !important;
		height: 42px !important;
		border-radius: 20px !important;
		background-color: #ff6f00 !important;
		color: #ffffff !important;
		font-weight: 600 !important;
		font-size: 0.9rem !important;
		text-align: center !important;
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		text-decoration: none !important;
		box-shadow: 0 2px 8px rgba(255, 111, 0, 0.2) !important;
		transition: all 0.2s ease !important;
		box-sizing: border-box !important;
	}

	.nam-drawer-btn:hover {
		background-color: #e65100 !important;
		color: #ffffff !important;
	}

	.nam-drawer-btn--phone::before {
		content: "📞" !important;
		margin-right: 6px !important;
		font-size: 0.85rem !important;
	}

	/* Hotline block */
	.nam-drawer-hotline {
		background-color: var(--wp--preset--color--primary, #398D42) !important;
		width: 100% !important;
		box-sizing: border-box !important;
	}

	.nam-drawer-hotline a {
		display: block !important;
		padding: 15px 20px !important;
		color: #ffffff !important;
		font-weight: 600 !important;
		text-align: center !important;
		font-size: 1rem !important;
		text-decoration: none !important;
		letter-spacing: 0.5px !important;
		width: 100% !important;
		box-sizing: border-box !important;
	}

	.nam-drawer-hotline .phone-icon {
		margin-right: 6px !important;
	}
}

/* ---------------------------------------------------------
   6. Global Focus Border Removal (Twenty Twenty-Five override)
   --------------------------------------------------------- */
a:focus,
a:active,
button:focus,
button:active,
input:focus,
.wp-block-navigation-item a:focus,
.wp-block-navigation-item a:active,
.wp-block-navigation-submenu a:focus,
.wp-block-navigation-submenu a:active,
.wp-block-navigation-item a:focus-visible,
.wp-block-navigation-submenu a:focus-visible,
.wp-block-button__link:focus,
.wp-block-button__link:active,
.nam-more-btn:focus,
.nam-more-btn:active {
	outline: none !important;
	box-shadow: none !important;
	border-color: transparent !important;
}





/* ---------------------------------------------------------
   8. Custom NAO Technology Section Background (Gray & Texture)
   --------------------------------------------------------- */
.wp-block-group.nam-nao-section {
	background-color: #f7f9fa !important;
	background-image:
		radial-gradient(#e2e8f0 1.5px, transparent 1.5px),
		radial-gradient(#e2e8f0 1.5px, #f7f9fa 1.5px) !important;
	background-size: 24px 24px !important;
	background-position: 0 0, 12px 12px !important;
	padding-top: 50px !important;
	padding-bottom: 50px !important;
	border-top: 1.5px solid #eaeaea !important;
	border-bottom: 1.5px solid #eaeaea !important;
}

/* Headings and paragraphs inside this section should be black */
.nam-nao-section h2,
.nam-nao-section p,
.nam-nao-section p mark,
.nam-nao-section span {
	color: #1a1a1a !important;
}

.nam-nao-section h2 strong {
	color: #111111 !important;
	font-weight: 700 !important;
}

/* Subtitle mark tags should be pure dark and transparent background */
.nam-nao-section p mark {
	background-color: transparent !important;
}

/* Ensure the white cards inside stand out beautifully with crisp drop shadows */
.nam-nao-section .wp-block-group.has-base-background-color {
	background-color: #ffffff !important;
	border: 1px solid #eef1f4 !important;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04) !important;
	transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

.nam-nao-section .wp-block-group.has-base-background-color:hover {
	transform: translateY(-4px) !important;
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08) !important;
}

/* ---------------------------------------------------------
   9. Sticky Header
   --------------------------------------------------------- */
#site-header {
	transition: box-shadow 0.3s ease, transform 0.3s ease;
	will-change: transform;
}

#site-header.is-sticky {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	z-index: 10000 !important;
	background-color: #ffffff !important;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12) !important;
	animation: stickySlideDown 0.3s ease forwards;
}

/* Offset admin bar if logged in */
.admin-bar #site-header.is-sticky {
	top: 32px !important;
}

@media (max-width: 782px) {
	.admin-bar #site-header.is-sticky {
		top: 46px !important;
	}
}

@keyframes stickySlideDown {
	from {
		transform: translateY(-100%);
		opacity: 0.8;
	}

	to {
		transform: translateY(0);
		opacity: 1;
	}
}

/* Compensate page for fixed header height so content doesn't jump under it */
body:has(#site-header.is-sticky) {
	padding-top: var(--sticky-header-height, 0px);
}

/* ---------------------------------------------------------
   10. Swiper Hero: white arrows (small, Sơn Hà style) + hide pagination
   --------------------------------------------------------- */

/* Small slim arrows - transparent bg, white icon only */
.nam-swiper-slider .swiper-button-next,
.nam-swiper-slider .swiper-button-prev {
	width: 32px !important;
	height: 32px !important;
	border-radius: 50% !important;
	background: rgba(255, 255, 255, 0.15) !important;
	border: 1.5px solid rgba(255, 255, 255, 0.5) !important;
	color: #ffffff !important;
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	transition: background 0.2s ease, transform 0.2s ease !important;
	--swiper-navigation-size: 16px;
}

.nam-swiper-slider .swiper-button-next:hover,
.nam-swiper-slider .swiper-button-prev:hover {
	background: rgba(255, 255, 255, 0.3) !important;
	transform: scale(1.1) !important;
}

.nam-swiper-slider .swiper-button-next:after,
.nam-swiper-slider .swiper-button-prev:after {
	color: #ffffff !important;
	font-size: 14px !important;
	font-weight: 900 !important;
}

/* Hide swiper pagination dots */
.nam-swiper-slider .swiper-pagination {
	display: none !important;
}

/* ---------------------------------------------------------
   11. Sticky header: keep dropdown submenus visible above hero
   --------------------------------------------------------- */

/* The whole sticky header must not clip its children */
#site-header.is-sticky,
#site-header.is-sticky .wp-block-group,
#site-header.is-sticky .wp-block-columns,
#site-header.is-sticky .wp-block-column {
	overflow: visible !important;
}

/* Submenus must render above everything */
#site-header.is-sticky .wp-block-navigation__submenu-container {
	z-index: 100010 !important;
	position: absolute !important;
	overflow: visible !important;
}

/* Ensure sticky header navigation creates correct stacking context */
#site-header.is-sticky .wp-block-navigation {
	position: relative !important;
	z-index: 100005 !important;
	overflow: visible !important;
}

/* ---------------------------------------------------------
   12. Product page thumbnail scrollbar - styled thin & subtle
   --------------------------------------------------------- */
.woocommerce-product-gallery .flex-control-thumbs,
.woocommerce-product-gallery .woocommerce-product-gallery__wrapper,
.woocommerce-product-gallery__thumbs,
[class*="product-gallery"] ol,
[class*="product-gallery"] ul {
	scrollbar-width: thin !important;
	scrollbar-color: #398D42 #f1f1f1 !important;
}

.woocommerce-product-gallery .flex-control-thumbs::-webkit-scrollbar,
.woocommerce-product-gallery .woocommerce-product-gallery__wrapper::-webkit-scrollbar,
[class*="product-gallery"] ol::-webkit-scrollbar,
[class*="product-gallery"] ul::-webkit-scrollbar {
	height: 4px !important;
	width: 4px !important;
}

.woocommerce-product-gallery .flex-control-thumbs::-webkit-scrollbar-track,
[class*="product-gallery"] ol::-webkit-scrollbar-track {
	background: #f1f1f1 !important;
	border-radius: 2px !important;
}

.woocommerce-product-gallery .flex-control-thumbs::-webkit-scrollbar-thumb,
[class*="product-gallery"] ol::-webkit-scrollbar-thumb {
	background: #398D42 !important;
	border-radius: 2px !important;
}

/* Global thin scrollbar for all horizontal overflow elements */
.woocommerce *::-webkit-scrollbar {
	height: 4px;
	width: 4px;
}

.woocommerce *::-webkit-scrollbar-track {
	background: #f5f5f5;
	border-radius: 2px;
}

.woocommerce *::-webkit-scrollbar-thumb {
	background: #c8c8c8;
	border-radius: 2px;
}

.woocommerce *::-webkit-scrollbar-thumb:hover {
	background: #398D42;
}

/* ---------------------------------------------------------
   13. Remove mark highlight background — keep color accent only
   --------------------------------------------------------- */

/* Strip yellow/default highlight background from all mark tags globally.
   The text color (set in the block editor) will remain as the accent. */
h1 mark,
h2 mark,
h3 mark,
h4 mark,
h5 mark,
h6 mark,
.wp-block-heading mark {
	background: none !important;
	background-color: transparent !important;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	padding: 0 !important;
	border-radius: 0 !important;
}

/* ---------------------------------------------------------
   14. Gutenberg Buttons Styling (Green background, white text)
   --------------------------------------------------------- */
.wp-block-button__link,
.wp-block-button__link.wp-element-button {
	/*background-color: var(--wp--preset--color--primary, #398D42) !important;
	color: var(--wp--preset--color--base, #ffffff) !important;*/
	border-radius: 30px !important;
	border: none !important;
	transition: background-color .25s ease, transform .18s ease !important;
}

.wp-block-button__link:hover,
.wp-block-button__link.wp-element-button:hover {
	/*background-color: #2e7536 !important; */
	color: #ffffff !important;
	transform: translateY(-2px) !important;
}

.wp-block-button__link:active,
.wp-block-button__link.wp-element-button:active {
	transform: translateY(0) scale(.96) !important;
}

/* ---------------------------------------------------------
   15. Center Bottom Consultation Form
   --------------------------------------------------------- */
.wp-block-columns.is-layout-flex:has(.wp-block-contact-form-7-contact-form-selector) {
	justify-content: center !important;
}

.wp-block-columns.is-layout-flex:has(.wp-block-contact-form-7-contact-form-selector) .wp-block-column {
	margin-left: auto !important;
	margin-right: auto !important;
}

/* =========================================================
   16. BẢN MOBILE — feedback Jokaso 10/07/2026 (dòng B78–B93)
   Toàn bộ nằm trong media query: BẢN DESKTOP GIỮ NGUYÊN.
   ========================================================= */

/* ---------- 16.1 Header mobile/tablet (<=1024px) ----------
   B78: bỏ thanh chữ trên cùng; logo to ở giữa, tìm kiếm bên trái,
   nút menu bên phải (theo mẫu Tân Á Đại Thành). */
@media (max-width: 1024px) {

	/* Thanh "JOKASO VIETNAM - THIẾT BỊ XỬ LÝ NƯỚC THẢI TẠI CHỖ..." */
	.nam-header-topbar {
		display: none !important;
	}

	.nam-mobile-header-bar {
		display: grid !important;
		grid-template-columns: 1fr auto 1fr !important;
		align-items: center !important;
		gap: 8px !important;
		padding: 8px 14px !important;
	}

	.nam-mobile-header-search {
		justify-self: start !important;
		display: flex !important;
		align-items: center !important;
	}

	.nam-mobile-logo {
		justify-self: center !important;
		display: inline-flex !important;
		align-items: center !important;
		line-height: 0 !important;
	}

	.nam-mobile-header-actions {
		justify-self: end !important;
	}

	/* Logo to, rõ — thắng quy tắc thu nhỏ logo chung của header */
	.nam-header-mobile .nam-mobile-logo img,
	.nam-header-mobile .nam-mobile-logo img.custom-logo {
		width: auto !important;
		height: 54px !important;
		max-width: 200px !important;
		object-fit: contain !important;
		display: block !important;
	}

	.nam-mobile-search-toggle {
		background: none !important;
		border: none !important;
		padding: 6px !important;
		margin: 0 !important;
		cursor: pointer !important;
		color: #333333 !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
	}

	.nam-mobile-search-toggle.is-active,
	.nam-mobile-search-toggle:hover {
		color: var(--wp--preset--color--primary, #398D42) !important;
	}

	.nam-mobile-search-panel {
		padding: 0 14px 12px !important;
		background: #ffffff !important;
	}

	.nam-mobile-search-panel[hidden] {
		display: none !important;
	}

	.nam-mobile-search-form {
		display: flex !important;
		align-items: center !important;
		border: 1px solid #dcdcdc !important;
		border-radius: 22px !important;
		padding: 2px 6px 2px 14px !important;
	}

	.nam-mobile-search-form input[type="search"] {
		flex: 1 1 auto !important;
		border: none !important;
		outline: none !important;
		background: transparent !important;
		font-size: 0.9rem !important;
		padding: 8px 0 !important;
	}

	.nam-mobile-search-form button {
		background: none !important;
		border: none !important;
		color: var(--wp--preset--color--primary, #398D42) !important;
		cursor: pointer !important;
		display: flex !important;
		padding: 6px !important;
	}

	/* B79 + B91: chữ menu đồng bộ — mọi cấp đều IN HOA và cùng độ đậm.
	   Tên mục trong menu đang lẫn lộn hoa/thường ("Về chúng tôi", "CÔNG NGHỆ NAO"…)
	   nên ép text-transform thay vì sửa từng mục. Cấp con chỉ khác ở thụt lề + cỡ chữ. */
	.nam-mobile-menu>li>a,
	.nam-mobile-submenu li a {
		text-transform: uppercase !important;
		font-weight: 600 !important;
		letter-spacing: 0.3px !important;
	}

	/* B91: ẩn hẳn mục "Tầm nhìn sứ mệnh" & "Truyền thống doanh nghiệp"
	   (ẩn cả thẻ <li> để không còn đường kẻ trống) */
	.nam-mobile-menu li:has(> a[href*="tam-nhin"]),
	.nam-mobile-menu li:has(> a[href*="truyen-thong"]) {
		display: none !important;
	}
}

/* Hàng icon mạng xã hội ở chân trang: cho phép xuống dòng thay vì thò ra ngoài
   khung (gây cuộn ngang ở khổ tablet). */
@media (max-width: 1024px) {
	.wp-block-social-links {
		flex-wrap: wrap !important;
	}
}

/* ---------- 16.2 Thu gọn khoảng cách toàn trang (B80) ---------- */
@media (max-width: 781px) {
	:root {
		--wp--preset--spacing--20: 6px !important;
		--wp--preset--spacing--30: 12px !important;
		--wp--preset--spacing--40: 18px !important;
		--wp--preset--spacing--50: 24px !important;
		--wp--preset--spacing--60: 28px !important;
		--wp--preset--spacing--70: 34px !important;
		--wp--preset--spacing--80: 40px !important;
	}

	/* Tiêu đề section gọn hơn, bớt khoảng trắng dọc */
	.wp-block-heading.has-x-large-font-size {
		font-size: 1.5rem !important;
		line-height: 1.3 !important;
	}

	.wp-block-heading.has-large-font-size {
		font-size: 1.25rem !important;
		line-height: 1.3 !important;
	}

	.nam-nao-section {
		padding-top: 26px !important;
		padding-bottom: 26px !important;
	}
}

/* ---------- 16.3 Hàng tiêu đề + nút "Xem tất cả" (B86, B87) ----------
   Đề mục và nút nằm CÙNG 1 HÀNG, nút nhỏ lại. */
@media (max-width: 781px) {

	/* Chỉ nhắm đúng hàng "tiêu đề section + nút Xem tất cả" */
	.wp-block-group.is-content-justification-space-between:not(.menu):has(> .wp-block-heading):has(> .wp-block-buttons) {
		flex-wrap: nowrap !important;
		align-items: center !important;
		row-gap: 0 !important;
		column-gap: 10px !important;
	}

	.wp-block-group.is-content-justification-space-between:not(.menu):has(> .wp-block-heading)>.wp-block-buttons {
		margin-top: 0 !important;
		flex: 0 0 auto !important;
	}

	.wp-block-group.is-content-justification-space-between:not(.menu):has(> .wp-block-heading)>.wp-block-buttons .wp-block-button__link {
		font-size: 0.7rem !important;
		padding: 6px 12px !important;
		white-space: nowrap !important;
	}

	.wp-block-group.is-content-justification-space-between:not(.menu):has(> .wp-block-buttons)>.wp-block-heading {
		font-size: 1.15rem !important;
		line-height: 1.25 !important;
		margin: 0 !important;
	}
}

/* ---------- 16.4 Hai ô "Hộ gia đình" / "Chủ đầu tư" (B82) ----------
   Song song 1 hàng ngang thay vì xếp chồng. */
@media (max-width: 781px) {
	.nam-cta-duo {
		display: grid !important;
		grid-template-columns: 1fr 1fr !important;
		gap: 10px !important;
	}

	.nam-cta-duo>.wp-block-column {
		width: auto !important;
		max-width: none !important;
		min-width: 0 !important;
		flex: initial !important;
		margin: 0 !important;
	}

	.nam-cta-duo .wp-block-group[style*="contentSize"],
	.nam-cta-duo .wp-block-group {
		padding-left: 10px !important;
		padding-right: 10px !important;
	}

	.nam-cta-duo h2 {
		font-size: 0.95rem !important;
	}

	.nam-cta-duo p {
		font-size: 0.75rem !important;
		line-height: 1.45 !important;
	}
}

/* ---------- 16.5 Khối "Về chúng tôi" (B83) ----------
   Text lên trên, hình ảnh xuống dưới, gọn trong 1 màn. */
@media (max-width: 781px) {
	.wp-block-columns:has(> .wp-block-column > .relative-class) {
		display: flex !important;
		flex-direction: column !important;
		gap: 14px !important;
	}

	.wp-block-columns:has(> .wp-block-column > .relative-class)>.wp-block-column:has(.relative-class) {
		order: 2 !important;
	}

	.wp-block-columns:has(> .wp-block-column > .relative-class)>.wp-block-column:not(:has(.relative-class)) {
		order: 1 !important;
	}

	/* Ảnh minh hoạ: to hơn cho cân với phần chữ (bù lại bằng cách rút khoảng cách phần chữ) */
	.relative-class .wp-block-image img {
		max-height: 245px !important;
		width: auto !important;
		margin: 0 auto !important;
	}

	/* Rút khoảng cách dọc trong cột chữ thay vì bóp nhỏ ảnh */
	.wp-block-columns:has(> .wp-block-column > .relative-class)>.wp-block-column:not(:has(.relative-class))>.wp-block-group {
		row-gap: 10px !important;
	}

	/* Nhóm "badge + tiêu đề" */
	.wp-block-columns:has(> .wp-block-column > .relative-class) .wp-block-group.is-vertical {
		row-gap: 8px !important;
	}

	/* Lưới các dòng gạch đầu dòng + khoảng cách icon <-> chữ */
	.wp-block-columns:has(> .wp-block-column > .relative-class) .wp-block-group.is-layout-grid {
		gap: 8px !important;
	}

	.wp-block-columns:has(> .wp-block-column > .relative-class) .wp-block-group.is-layout-grid>.wp-block-group {
		gap: 10px !important;
	}

	/* Thu gọn phần chữ (tiêu đề, mô tả, gạch đầu dòng, nút) */
	.wp-block-columns:has(> .wp-block-column > .relative-class) .wp-block-heading {
		font-size: 1.2rem !important;
		line-height: 1.3 !important;
		margin-bottom: 8px !important;
	}

	.wp-block-columns:has(> .wp-block-column > .relative-class) p {
		font-size: 0.8rem !important;
		line-height: 1.45 !important;
		margin-bottom: 6px !important;
	}

	.wp-block-columns:has(> .wp-block-column > .relative-class) li {
		font-size: 0.78rem !important;
		line-height: 1.4 !important;
	}

	.wp-block-columns:has(> .wp-block-column > .relative-class) .wp-block-buttons {
		margin-top: 6px !important;
	}

	.wp-block-columns:has(> .wp-block-column > .relative-class) .wp-block-button__link {
		font-size: 0.75rem !important;
		padding: 8px 18px !important;
	}

	/* Icon dấu tích trước mỗi gạch đầu dòng — chỉ trong cột chữ, không đụng ảnh minh hoạ */
	.wp-block-columns:has(> .wp-block-column > .relative-class)>.wp-block-column:not(:has(.relative-class)) .wp-block-image img {
		max-height: 26px !important;
	}
}

/* ---------- 16.6 Công nghệ NAO + form đăng ký tư vấn (B84) ----------
   Thu nhỏ ~1/2; 4 ô phụ xếp thành 1 hàng ngang. */
@media (max-width: 781px) {

	/* 4 ô: Thuần sinh học / Nước đầu ra chuẩn A / Tiết kiệm năng lượng / Bền bỉ.
	   Giữ lưới 2x2 (CSS bổ sung trong Global Styles đã ép 2 cột ở <=767px và
	   4 ô/hàng thì chữ bé không đọc nổi), nhưng kéo khối rộng hết khung + phóng to.

	   Nhóm cha là flex cột căn giữa nên tự co về max-content (273px) -> ép stretch. */
	.nam-nao-section .wp-block-group:has(> .class-responsive) {
		width: 100% !important;
		align-self: stretch !important;
	}

	.nam-nao-section .class-responsive {
		display: grid !important;
		gap: 12px !important;
		padding-left: 4px !important;
		padding-right: 4px !important;
	}

	.nam-nao-section .class-responsive>.wp-block-group {
		margin: 0 !important;
		padding: 18px 10px !important;
		min-width: 0 !important;
	}

	.nam-nao-section .class-responsive h2,
	.nam-nao-section .class-responsive h3,
	.nam-nao-section .class-responsive h4 {
		font-size: 0.95rem !important;
		line-height: 1.3 !important;
		margin: 8px 0 0 !important;
	}

	.nam-nao-section .class-responsive p {
		font-size: 0.8rem !important;
		line-height: 1.4 !important;
	}

	.nam-nao-section .class-responsive img {
		max-width: 46px !important;
		height: auto !important;
	}

	.nam-nao-section .class-responsive .wp-block-spacer {
		height: 8px !important;
	}

	/* Form "Đăng ký nhận tư vấn": bằng ~1/2 chiều cao cũ */
	.wp-block-cover:has(.wpcf7) {
		min-height: 0 !important;
		padding-top: 18px !important;
		padding-bottom: 18px !important;
	}

	.wp-block-cover:has(.wpcf7) .wp-block-heading {
		font-size: 1.05rem !important;
		margin-bottom: 6px !important;
	}

	.form-container.form-jokaso,
	.form-jokaso {
		padding: 8px !important;
	}

	.form-jokaso .row {
		gap: 8px !important;
		margin-bottom: 8px !important;
	}

	.form-jokaso .wpcf7-form-control:not(.wpcf7-submit) {
		padding: 7px 2px !important;
		font-size: 14px !important;
	}

	.form-jokaso textarea.wpcf7-textarea {
		min-height: 60px !important;
	}

	.form-jokaso .wpcf7-submit {
		padding: 10px 28px !important;
	}
}

/* ---------- 16.7 Slider "Bằng sáng chế" (CPT patent) ----------
   Query Loop .nam-carousel--patent: 3 thẻ desktop, 2 tablet, 1 thẻ mobile (B85).
   Ảnh bằng sáng chế hiển thị nguyên khung (contain), không bị cắt như thẻ tin tức. */
.nam-carousel--patent .nam-carousel__track>.wp-block-post {
	flex-basis: calc((100% - 2 * var(--wp--preset--spacing--30, 24px)) / 3) !important;
}

.nam-carousel--patent .wp-block-post-featured-image {
	aspect-ratio: auto !important;
	overflow: visible !important;
	margin: 0 auto !important;
	text-align: center !important;
}

.nam-carousel--patent .wp-block-post-featured-image img {
	width: auto !important;
	max-width: 100% !important;
	height: 170px !important;
	object-fit: contain !important;
	margin: 0 auto !important;
	display: block !important;
}

.nam-carousel--patent .wp-block-post-date {
	color: #d80000 !important;
	font-size: var(--wp--preset--font-size--medium, 1.125rem) !important;
	font-weight: 700 !important;
	text-align: center !important;
	margin-bottom: 6px !important;
}

.nam-carousel--patent .wp-block-post-title,
.nam-carousel--patent .wp-block-post-title a {
	text-align: center !important;
	text-transform: uppercase !important;
	font-weight: 600 !important;
	margin-bottom: 0 !important;
}

@media (max-width: 1024px) {
	.nam-carousel--patent .nam-carousel__track>.wp-block-post {
		flex-basis: calc((100% - var(--wp--preset--spacing--30, 24px)) / 2) !important;
	}
}

/* Mobile — 2 bằng sáng chế / 1 khung, đồng bộ với các slider còn lại */
@media (max-width: 781px) {
	.nam-carousel--patent .nam-carousel__track>.wp-block-post {
		flex-basis: calc((100% - 10px) / 2) !important;
	}

	.nam-carousel--patent .wp-block-post-featured-image img {
		height: 150px !important;
	}

	.nam-carousel--patent .nam-carousel__track>.wp-block-post>.wp-block-group {
		padding: 10px 8px !important;
	}

	.nam-carousel--patent .wp-block-post-date {
		font-size: 0.95rem !important;
		margin-bottom: 4px !important;
	}

	.nam-carousel--patent .wp-block-post-title,
	.nam-carousel--patent .wp-block-post-title a {
		font-size: 0.72rem !important;
		line-height: 1.35 !important;
	}
}

/* ---------- 16.8 "Đối tác - Khách hàng" gọn lại (B88) ---------- */
@media (max-width: 781px) {
	.nam-partners-slider-wrapper {
		padding-top: 4px !important;
		padding-bottom: 4px !important;
	}

	.nam-partners-slider-wrapper .nam-partner-logo img {
		max-height: 46px !important;
		width: auto !important;
		object-fit: contain !important;
	}
}

/* ---------- 16.9 Trang danh mục sản phẩm (B89) ----------
   Banner khung ngang dài + 2 sản phẩm / 1 hàng. */
@media (max-width: 781px) {
	.nam-archive-banner__img {
		aspect-ratio: 16 / 6 !important;
		max-height: 150px !important;
		object-fit: cover !important;
	}

	.post-type-archive-product .wp-block-post-template:not(.nam-carousel__track),
.tax-product_category .wp-block-post-template:not(.nam-carousel__track),
.post-type-archive-project .wp-block-post-template:not(.nam-carousel__track),
.blog .wp-block-post-template:not(.nam-carousel__track),
.archive .wp-block-post-template:not(.nam-carousel__track) {
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	gap: 10px !important;
}

.wp-block-post-template>li>.wp-block-group {
	align-items: stretch !important;
}

.wp-block-post-template>li>.wp-block-group>* {
	min-width: 0 !important;
	max-width: 100% !important;
}


	.post-type-archive-product .wp-block-post-title,
	.tax-product_category .wp-block-post-title {
		font-size: 0.85rem !important;
	}
}

/* ---------- 16.10 Trang bài viết / Công nghệ NAO (B90, B92) ---------- */
@media (max-width: 781px) {

	/* B90: cột "Sản phẩm" (sản phẩm liên quan) trong bài viết — chỉ 3 sản phẩm */
	.nam-sidebar-products .wp-block-post-template>li:nth-child(n + 4),
	.nam-sidebar-products .wp-block-post:nth-child(n + 4) {
		display: none !important;
	}

	/* Khoảng cách các khối trong trang thông tin gọn lại */
	.nam-related-section {
		margin-top: 22px !important;
	}

	/* Trang "Bằng sáng chế": khung rộng hết chiều ngang, khoảng cách ngắn lại */
	.page-id-639 .wp-block-media-text {
		grid-template-columns: 1fr !important;
		gap: 10px !important;
	}

	.page-id-639 .wp-block-group {
		padding-left: 10px !important;
		padding-right: 10px !important;
	}

	.page-id-639 .wp-block-media-text__content {
		padding: 10px !important;
	}

	.page-id-639 .wp-block-media-text__media img {
		width: 100% !important;
		height: auto !important;
	}
}

/* ---------- 16.10b Thẻ bài viết / sản phẩm gọn lại trên mobile ----------
   Thẻ đang quá cao (tiêu đề 3 dòng + nút CTA chiếm nhiều chỗ) — thấy rõ ở
   "Tin tức - Sự kiện" ngoài trang chủ và ở trang danh mục sản phẩm. */
@media (max-width: 781px) {

	/* Tiêu đề rút còn 2 dòng */
	.wp-block-query .wp-block-post-title,
	.wp-block-query .wp-block-post-title a,
	.nam-carousel .wp-block-post-title,
	.nam-carousel .wp-block-post-title a,
	.wp-block-post-template .wp-block-post-title,
	.wp-block-post-template .wp-block-post-title a {
		-webkit-line-clamp: 2 !important;
		margin-bottom: 6px !important;
	}

	/* Ngày đăng + mô tả ngắn gọn hơn (trừ slider bằng sáng chế — ở đó ngày là NĂM, cỡ to) */
	.wp-block-query:not(.nam-carousel--patent) .wp-block-post-date,
	.nam-carousel:not(.nam-carousel--patent) .wp-block-post-date {
		font-size: 0.72rem !important;
		margin-bottom: 6px !important;
	}

	.wp-block-query .wp-block-post-excerpt,
	.wp-block-query .wp-block-post-excerpt__excerpt,
	.nam-carousel .wp-block-post-excerpt,
	.nam-carousel .wp-block-post-excerpt__excerpt,
	.nam-related-card__excerpt {
		font-size: 0.75rem !important;
		line-height: 1.4 !important;
		/* Khoảng hở tối thiểu với nút CTA bên dưới: nút dùng margin-top:auto nên khi
		   thẻ không dư chỗ, nếu không có margin này nút sẽ dính sát chữ. */
		margin-bottom: 16px !important;
	}

	/* Nút CTA trong thẻ: gọn, không xuống dòng */
	.wp-block-query .wp-block-post .nam-more-btn,
	.wp-block-post-template>li .nam-more-btn,
	.my-filtered-loop .wp-block-post .nam-more-btn,
	.nam-related-card .nam-more-btn {
		margin-top: auto !important;
		padding: 8px 14px !important;
		font-size: 0.7rem !important;
		white-space: nowrap !important;
	}

	/* Bớt padding trong thân thẻ */
	.wp-block-post-template>li>.wp-block-group>.wp-block-group,
	.wp-block-query .wp-block-post>.wp-block-group>.wp-block-group {
		padding-top: 8px !important;
		padding-bottom: 8px !important;
	}

	/* Thẻ "Tin tức - Sự kiện" bị đặt cứng min-height:400px (nhóm con 200px) ngay trong block.
	   Trên mobile bỏ ràng buộc đó để thẻ co theo nội dung thật. */
	.wp-block-query .wp-block-post .wp-block-group[style*="min-height"],
	.nam-carousel .wp-block-post .wp-block-group[style*="min-height"],
	.wp-block-post-template>li .wp-block-group[style*="min-height"] {
		min-height: 0 !important;
	}
}

/* ---------- 16.10c Trang danh mục sản phẩm + chân trang gọn lại trên mobile ----------
   Đo trên /loai-san-pham/che-tao-san/ ở 390px: tổng trang 3582px, trong đó riêng
   chân trang đã 1198px vì 4 cột bị xếp chồng lên nhau. */
@media (max-width: 781px) {

	/* Thẻ sản phẩm ở LƯỚI CHÍNH: bỏ mô tả ngắn (đã có tiêu đề, đánh giá, danh mục, nút CTA).
	   Không đụng các khối query khác ở cuối trang (sản phẩm/dự án liên quan). */
	.post-type-archive-product .wp-block-query:not(.my-filtered-loop):not(.nam-carousel) .wp-block-post-excerpt,
	.tax-product_category .wp-block-query:not(.my-filtered-loop):not(.nam-carousel) .wp-block-post-excerpt {
		display: none !important;
	}

	/* Hàng "đánh giá sao + tên danh mục" là flex space-between: ở khổ hẹp nó bị
	   xuống 2 dòng nên cao tới 59px. Ép về 1 dòng và thu nhỏ ngôi sao. */
	.wp-block-post .wp-block-group:has(> .nam-product-star-rating-container) {
		flex-wrap: nowrap !important;
		column-gap: 8px !important;
		row-gap: 0 !important;
		margin-top: 6px !important;
		/* Khoảng hở tối thiểu với nút CTA bên dưới (nút dùng margin-top:auto) */
		margin-bottom: 12px !important;
	}

	.nam-star-item {
		font-size: 13px !important;
		line-height: 1 !important;
	}

	.nam-product-star-rating-container,
	.nam-star-rating-stars {
		line-height: 1 !important;
	}

	.wp-block-post .taxonomy-product_category {
		font-size: 0.68rem !important;
		line-height: 1.2 !important;
		white-space: nowrap !important;
		overflow: hidden !important;
		text-overflow: ellipsis !important;
	}

	/* Chân trang: 4 cột -> lưới 2 cột, chữ và khoảng cách gọn lại */
	footer.wp-block-template-part .wp-block-columns {
		display: grid !important;
		grid-template-columns: 1fr 1fr !important;
		gap: 14px 16px !important;
		padding-left: 12px !important;
		padding-right: 12px !important;
	}

	footer.wp-block-template-part .wp-block-column {
		width: auto !important;
		max-width: none !important;
		min-width: 0 !important;
		flex-basis: auto !important;
		margin: 0 !important;
	}

	footer.wp-block-template-part>footer>.wp-block-group {
		padding-top: 24px !important;
		padding-bottom: 8px !important;
	}

	footer.wp-block-template-part h2 {
		font-size: 0.8rem !important;
		line-height: 1.3 !important;
		margin: 0 0 4px !important;
	}

	footer.wp-block-template-part p {
		font-size: 0.75rem !important;
		line-height: 1.5 !important;
		margin: 2px 0 !important;
	}

	footer.wp-block-template-part .wp-block-separator {
		margin: 4px 0 8px !important;
	}

	footer.wp-block-template-part .wp-block-site-logo img,
	footer.wp-block-template-part .custom-logo {
		width: 92px !important;
		height: auto !important;
	}

	footer.wp-block-template-part .wp-block-social-links {
		margin-top: 6px !important;
		margin-bottom: 6px !important;
	}
}

/* ---------- 16.11 Phân trang dạng nút số (B93) ----------
   Nút vuông bo góc: 1, 2, …, 39, › — trang hiện tại nền xanh thương hiệu.
   Áp dụng cho mọi kích thước màn hình (mobile + desktop). */
.wp-block-query-pagination {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	margin-top: 28px !important;
}

.wp-block-query-pagination .wp-block-query-pagination-numbers {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
}

.wp-block-query-pagination .page-numbers,
.wp-block-query-pagination-previous,
.wp-block-query-pagination-next {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-width: 40px !important;
	height: 40px !important;
	padding: 0 10px !important;
	border-radius: 10px !important;
	background: #eef1f4 !important;
	color: #4a5560 !important;
	font-weight: 700 !important;
	font-size: 0.9rem !important;
	text-decoration: none !important;
	transition: background .2s ease, color .2s ease !important;
}

.wp-block-query-pagination .page-numbers.current {
	background: var(--wp--preset--color--primary, #398D42) !important;
	color: #ffffff !important;
}

.wp-block-query-pagination .page-numbers.dots {
	background: transparent !important;
	min-width: 26px !important;
	padding: 0 !important;
}

.wp-block-query-pagination .page-numbers:hover:not(.current):not(.dots),
.wp-block-query-pagination-previous:hover,
.wp-block-query-pagination-next:hover {
	background: #dbe3e8 !important;
	color: #1a1a1a !important;
}

/* Mũi tên trước/sau: bỏ chữ, chỉ để ký hiệu cho gọn như mẫu */
@media (max-width: 781px) {

	.wp-block-query-pagination-previous,
	.wp-block-query-pagination-next {
		font-size: 0 !important;
	}

	.wp-block-query-pagination-previous::before {
		content: "‹";
		font-size: 1.35rem;
		line-height: 1;
	}

	.wp-block-query-pagination-next::after {
		content: "›";
		font-size: 1.35rem;
		line-height: 1;
	}
}

/* ---------------------------------------------------------
   17. Safari/WebKit: ảnh đại diện của thẻ bị co về 0 (13/07/2026)

   Card của query loop là group flex; <figure> ảnh là flex-item. Khi group không
   stretch ngang, figure co theo nội dung — mà nội dung là <img style="width:100%">,
   tức phần trăm tính trên bề rộng CHƯA xác định. WebKit trả 0 => figure 0x0, thẻ mất
   ảnh hoàn toàn (Chrome tự suy ra bề rộng nên vẫn hiện). Đo được: archive sản phẩm
   trên WebKit desktop mất 4/4 ảnh, Chromium 0/4.

   Ép figure luôn rộng bằng thẻ -> ảnh hiện đúng và mọi thẻ cao bằng nhau ở mọi engine.
   --------------------------------------------------------- */
.wp-block-post .wp-block-post-featured-image {
	width: 100%;
	align-self: stretch;
}

.wp-block-post .wp-block-post-featured-image>a {
	display: block;
	width: 100%;
}
/* =========================================================
   18. HERO BANNER TRANG CHỦ — SLIDER THU GỌN CÓ LỀ HAI BÊN
   (feedback 25/07/2026 + 28/07/2026)

   25/07: "cái banner cho bé lại để vào web thấy sản phẩm luôn ở trang đầu".
   28/07: "làm giống Thế Giới Di Động — slider nhỏ hơn, có lề hai bên để hiển thị
          ĐẦY ĐỦ nội dung ảnh".

   Cách cũ (cắt ảnh bằng object-fit:cover để hạ chiều cao) làm mất phần trên của
   banner — tiêu đề "CÔNG NGHỆ NAO TIÊN TIẾN" bị cụt. Cách mới: KHÔNG cắt ảnh nữa,
   thay vào đó thu bề rộng slider lại và chừa lề hai bên; ảnh tỉ lệ 1905x600 (3.175:1)
   nên hẹp lại là tự thấp xuống:
        rộng 1200px -> cao 378px   (thấp hơn cả mức 400px đang chặn trước đây)
   Vừa thấy trọn ảnh, vừa giữ được hàng sản phẩm trong màn hình đầu.

   Muốn banner to/nhỏ hơn: chỉnh --nam-hero-width bên dưới.
   ========================================================= */

.nam-swiper-slider {
	/* Bề rộng tối đa của slider — đặt bằng đúng bề rộng lưới nội dung (1200px)
	   để mép banner thẳng hàng với khối "Sản phẩm nổi bật" ngay bên dưới.
	   1200 / 3.175 = 378px chiều cao, hàng sản phẩm vẫn lọt màn hình đầu. */
	--nam-hero-width: 1200px;
	--nam-hero-gutter: 0px;

	max-width: min(100%, var(--nam-hero-width));
	margin-inline: auto !important;
	padding-inline: var(--nam-hero-gutter);
	border-radius: 14px;
	background: transparent;
}

/* Ảnh hiện TRỌN VẸN, không cắt xén */
.nam-swiper-slider .swiper-slide img,
.nam-swiper-slider .wp-block-image img {
	width: 100%;
	height: auto;
	max-height: none;
	object-fit: contain;
	border-radius: 14px;
}

/* Bỏ khoảng trắng thừa quanh figure trong slide */
.nam-swiper-slider .wp-block-image {
	margin: 0;
	line-height: 0;
}

/* Dải nền hai bên slider: trắng, tách hero khỏi khối sản phẩm phía dưới */
.nam-swiper-slider.alignfull {
	background: #FFFFFF;
	padding-block: 14px;
}

/* ---------- Mũi tên trước/sau nằm sát mép ảnh ---------- */

.nam-swiper-slider .swiper-button-prev,
.nam-swiper-slider .swiper-button-next {
	width: 40px !important;
	height: 40px !important;
	margin-top: 0 !important;
	transform: translateY(-50%);
	top: 50% !important;
	background: rgba(255, 255, 255, .92);
	border-radius: 50%;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
	color: #1F2A24;
	transition: background-color .2s ease;
}

.nam-swiper-slider .swiper-button-prev { left: 10px !important; }
.nam-swiper-slider .swiper-button-next { right: 10px !important; }

.nam-swiper-slider .swiper-button-prev:hover,
.nam-swiper-slider .swiper-button-next:hover {
	background: #fff;
}

.nam-swiper-slider .swiper-button-prev::after,
.nam-swiper-slider .swiper-button-next::after {
	font-size: 15px !important;
	font-weight: 800;
}

/* ---------- Chấm phân trang ---------- */

.nam-swiper-slider .swiper-pagination {
	bottom: 10px !important;
}

.nam-swiper-slider .swiper-pagination-bullet {
	width: 8px;
	height: 8px;
	opacity: .55;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}

.nam-swiper-slider .swiper-pagination-bullet-active {
	width: 20px;
	border-radius: 5px;
	opacity: 1;
	background: var(--wp--preset--color--primary, #398D42);
}

/* ---------- Máy tính bảng / điện thoại ---------- */

@media (max-width: 1280px) {
	.nam-swiper-slider {
		--nam-hero-width: 100%;
		--nam-hero-gutter: 16px;
	}
}

@media (max-width: 767px) {
	.nam-swiper-slider {
		--nam-hero-gutter: 10px;
	}

	.nam-swiper-slider.alignfull {
		padding-block: 8px;
	}

	.nam-swiper-slider .swiper-slide img,
	.nam-swiper-slider .wp-block-image img {
		border-radius: 10px;
	}

	.nam-swiper-slider .swiper-button-prev,
	.nam-swiper-slider .swiper-button-next {
		width: 32px !important;
		height: 32px !important;
	}

	.nam-swiper-slider .swiper-button-prev::after,
	.nam-swiper-slider .swiper-button-next::after {
		font-size: 12px !important;
	}
}