/* Nam Carousel — query loop dạng cuộn ngang + nút mũi tên (task 71 & bài viết liên quan) */
.nam-carousel .nam-carousel__viewport {
	position: relative;
}

/* AOS (animate-on-scroll) KHÔNG tương thích cuộn ngang: track/card nằm ngoài
   tầm nhìn theo chiều ngang nên AOS giữ opacity:0 -> card biến mất (rõ nhất ở mobile).
   Ép nội dung trong carousel luôn hiển thị, vô hiệu AOS. */
.nam-carousel [data-aos],
.nam-carousel .wp-block-post-template,
.nam-carousel .wp-block-post {
	opacity: 1 !important;
}
.nam-carousel .wp-block-post-template[data-aos],
.nam-carousel [data-aos] {
	transform: none !important;
	transition: none !important;
}
/* nhưng vẫn giữ hiệu ứng hover nổi của card */
.nam-carousel .wp-block-post:hover {
	transform: translateY(-8px) scale(1.02) !important;
	transition: transform .3s cubic-bezier(.2, .7, .3, 1), box-shadow .3s ease !important;
}

.nam-carousel .nam-carousel__track {
	/* BẮT BUỘC: track phải là khối định vị. Nếu không, các phần tử con
	   position:absolute (ví dụ span.screen-reader-text trong thẻ video) sẽ lấy
	   .nam-carousel__viewport làm gốc, thoát khỏi vùng overflow của track và
	   kéo giãn chiều rộng cả trang (thấy rõ ở tablet, bị overflow-x:hidden che ở mobile). */
	position: relative;
	display: flex !important;
	flex-wrap: nowrap !important;
	grid-template-columns: none !important; /* huỷ layout grid của query loop */
	/* Nếu post-template lỡ mang class alignfull -> ép về đúng bề rộng container
	   để track không "phá khung", giúp mũi tên ngoài định vị chuẩn cho mọi slider */
	max-width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	gap: var(--wp--preset--spacing--30, 24px);
	/* Chừa khoảng trên/dưới để hiệu ứng nổi + đổ bóng không bị viewport cắt cụt */
	padding: 24px 6px 36px;
	/* Card CAO BẰNG NHAU */
	align-items: stretch;
	-ms-overflow-style: none;
	scrollbar-width: none;
}
.nam-carousel .nam-carousel__track::-webkit-scrollbar {
	display: none;
}
/* Kéo bằng chuột: con trỏ nắm + chặn bôi đen khi đang kéo */
.nam-carousel .nam-carousel__track { cursor: grab; }
.nam-carousel .nam-carousel__track.is-dragging {
	cursor: grabbing;
	user-select: none;
	scroll-snap-type: none !important;
	scroll-behavior: auto !important;
}
.nam-carousel .nam-carousel__track.is-dragging a,
.nam-carousel .nam-carousel__track.is-dragging img {
	pointer-events: none;
}

/* Mỗi card: 4 cột desktop, 2 tablet, 1.15 mobile */
.nam-carousel .nam-carousel__track > .wp-block-post {
	flex: 0 0 calc((100% - 3 * var(--wp--preset--spacing--30, 24px)) / 4);
	scroll-snap-align: start;
	margin: 0 !important;
	/* card con lấp đầy chiều cao ô (cao bằng nhau, bóng nằm sát đáy, không "lửng") */
	display: flex;
	flex-direction: column;
	/* BẮT BUỘC: flex item mặc định min-width:auto -> thẻ KHÔNG co xuống dưới bề rộng
	   min-content của nội dung. Thẻ có nhãn danh mục dài (vd "Công trình cải tạo") vì thế
	   phình rộng hơn các thẻ khác (178px thay vì 162px) -> ảnh cao hơn, chữ lệch hàng,
	   bước cuộn sai. min-width:0 ép mọi thẻ đúng bằng flex-basis. */
	min-width: 0;
}
.nam-carousel .nam-carousel__track > .wp-block-post > .wp-block-group {
	flex: 1 1 auto;
	width: 100%;
	height: 100%;
	min-width: 0;
}
/* Hàng "sao + danh mục" dưới tiêu đề: cho phép xuống dòng và cắt gọn thay vì
   nong rộng thẻ (đây là thứ đã đẩy min-content của card lên). */
.nam-carousel .nam-carousel__track .taxonomy-product_category {
	min-width: 0;
	overflow-wrap: anywhere;
}

/* Safari/WebKit: <figure> ảnh đại diện là flex-item của group card. Group nào KHÔNG
   stretch (vd thẻ tin tức) thì figure co theo nội dung, mà nội dung là <img width:100%>
   -> phần trăm tính trên bề rộng chưa xác định = 0 -> figure 0x0, thẻ mất ảnh (Chrome
   vẫn ra 162x101). Ép figure luôn rộng bằng thẻ để mọi card cao bằng nhau trên mọi engine. */
.nam-carousel .nam-carousel__track .wp-block-post-featured-image {
	width: 100%;
	align-self: stretch;
}
.nam-carousel .nam-carousel__track .wp-block-post-featured-image > a {
	display: block;
	width: 100%;
}

/* Thẻ video: các clip khổ dọc nhưng tỉ lệ lệch nhau (1440x2560 vs 480x848) -> thẻ cao
   chênh 2px, tiêu đề không thẳng hàng. Ép chung 9:16, phần thừa cắt gọn.
   Cần !important vì từng thẻ <video> mang inline style aspect-ratio theo kích thước gốc. */
.nam-carousel .nam-carousel__track .wp-block-video video {
	width: 100%;
	height: auto !important;
	aspect-ratio: 9 / 16 !important;
	object-fit: cover;
	display: block;
}
@media (max-width: 1024px) {
	.nam-carousel .nam-carousel__track > .wp-block-post {
		flex-basis: calc((100% - var(--wp--preset--spacing--30, 24px)) / 2);
	}
}
/* Mobile (feedback 10/07/2026 – B86): hiện ÍT NHẤT 2 thẻ / màn, có mũi tên 2 bên
   và tự trượt ngang (JS initAutoplay). Desktop giữ nguyên 4 thẻ. */
@media (max-width: 781px) {
	.nam-carousel .nam-carousel__track {
		gap: 10px;
		padding: 12px 4px 20px;
	}
	.nam-carousel .nam-carousel__track > .wp-block-post {
		flex-basis: calc((100% - 10px) / 2);
	}
	/* Card gọn hơn cho vừa nửa màn hình */
	.nam-carousel .nam-carousel__track .wp-block-post-title,
	.nam-carousel .nam-carousel__track .nam-related-card__title {
		font-size: 0.85rem !important;
	}
	.nam-carousel .nam-carousel__track .wp-block-post-excerpt,
	.nam-carousel .nam-carousel__track .nam-related-card__excerpt {
		font-size: 0.75rem !important;
	}
	.nam-carousel .nam-carousel__track .nam-more-btn {
		font-size: 0.7rem;
		padding: 7px 14px;
	}
	/* Hàng "sao + danh mục": thẻ chỉ rộng ~162px nên nhãn dài ("Công trình cải tạo")
	   không đủ chỗ, bị cắt cụt. Xếp nhãn xuống dưới hàng sao -> hiện đủ chữ, và vì
	   MỌI thẻ đều xuống dòng nên nút "Liên hệ ngay" vẫn thẳng hàng. */
	.nam-carousel .nam-carousel__track .wp-block-group:has(> .nam-product-star-rating-container) {
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
	}
	.nam-carousel .nam-carousel__track .taxonomy-product_category {
		font-size: 0.72rem;
	}
}

/* Nút mũi tên — kiểu Sơn Hà: nền trắng bo góc, đổ bóng, mũi tên đỏ, NẰM NGOÀI hàng card */
.nam-carousel .nam-carousel__arrow {
	position: absolute;
	top: 42%;
	transform: translateY(-50%);
	z-index: 5;
	width: 50px;
	height: 50px;
	padding: 0;
	border: 1px solid #f0f0f0;
	border-radius: 12px;
	background: #fff;
	color: var(--wp--preset--color--primary, #398D42); /* mũi tên màu thương hiệu Jokaso */
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .25s ease, color .25s ease, box-shadow .25s ease, transform .15s ease, opacity .25s ease;
}
.nam-carousel .nam-carousel__arrow svg {
	width: 26px;
	height: 26px;
}
.nam-carousel .nam-carousel__arrow:hover {
	background: var(--wp--preset--color--primary, #398D42);
	color: #fff;
	box-shadow: 0 10px 24px rgba(57, 141, 66, 0.32);
}
.nam-carousel .nam-carousel__arrow:active {
	transform: translateY(-50%) scale(.94);
}
/* Đưa nút RA NGOÀI hàng card, nhưng không bao giờ vượt mép màn hình (tránh sinh cuộn ngang) */
.nam-carousel .nam-carousel__arrow--prev {
	left: calc(-1 * clamp(0px, (100vw - 1200px) / 2, 58px));
}
.nam-carousel .nam-carousel__arrow--next {
	right: calc(-1 * clamp(0px, (100vw - 1200px) / 2, 58px));
}
/* Ở đầu/cuối dải: mũi tên xám mờ (giống mẫu Sơn Hà) thay vì biến mất hẳn */
.nam-carousel .nam-carousel__arrow.is-disabled {
	color: #c4c4c4;
	background: #fff;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
	cursor: default;
	pointer-events: none;
}
/* Không đủ nội dung để cuộn -> ẩn mũi tên */
.nam-carousel--static .nam-carousel__arrow {
	display: none;
}

/* Tablet: thu nhỏ nút và kéo về sát mép trong cho gọn */
@media (min-width: 782px) and (max-width: 1024px) {
	.nam-carousel .nam-carousel__arrow { width: 42px; height: 42px; border-radius: 10px; }
	.nam-carousel .nam-carousel__arrow svg { width: 22px; height: 22px; }
	.nam-carousel .nam-carousel__arrow--prev { left: 2px; }
	.nam-carousel .nam-carousel__arrow--next { right: 2px; }
}

/* ===== Chấm phân trang ===== */
.nam-carousel__dots {
	display: none;
	justify-content: center;
	align-items: center;
	gap: 8px;
	margin: 4px 0 8px;
}
.nam-carousel__dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: #cfd8d2;
	cursor: pointer;
	transition: background .25s ease, width .25s ease;
}
.nam-carousel__dot.is-active {
	width: 22px;
	border-radius: 5px;
	background: var(--wp--preset--color--primary, #398D42);
}
.nam-carousel--static .nam-carousel__dots { display: none !important; }

/* Mobile: BỎ mũi tên (đè lên nội dung thẻ) -> dùng chấm phân trang + vuốt ngang */
@media (max-width: 781px) {
	.nam-carousel .nam-carousel__arrow { display: none !important; }
	.nam-carousel__dots { display: flex; }
}

/* ===== Mục lục bài viết (TOC) ===== */
.nam-toc {
	background: #f4f9f4;
	border: 1px solid #d8ebd9;
	border-left: 4px solid var(--wp--preset--color--primary, #398D42);
	border-radius: 8px;
	padding: 14px 20px;
	margin: 0 0 28px;
}
.nam-toc__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	font: inherit;
	color: inherit;
}
.nam-toc__title {
	font-weight: 700;
	font-size: 1.05rem;
	text-transform: uppercase;
	letter-spacing: 0.3px;
}
.nam-toc__caret {
	width: 10px;
	height: 10px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.2s ease;
}
.nam-toc.is-collapsed .nam-toc__caret { transform: rotate(-135deg); }
.nam-toc__list {
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
	counter-reset: nam-toc;
}
.nam-toc.is-collapsed .nam-toc__list { display: none; }
.nam-toc__item { margin: 6px 0; line-height: 1.5; }
.nam-toc__item.level-h3 { padding-left: 18px; }
.nam-toc__item a {
	color: #1d4d3e;
	text-decoration: none;
	transition: color 0.2s ease;
}
.nam-toc__item.level-h2 > a { counter-increment: nam-toc; }
.nam-toc__item.level-h2 > a::before {
	content: counter(nam-toc) ". ";
	font-weight: 700;
	color: var(--wp--preset--color--primary, #398D42);
}
.nam-toc__item a:hover { color: var(--wp--preset--color--primary, #398D42); text-decoration: underline; }

/* ===== Card "Bài viết liên quan" ===== */
.nam-related-section { margin-top: 40px; }
.nam-related-card {
	background: #fff;
	border-radius: 8px;
	box-shadow: var(--wp--preset--shadow--natural, 0 2px 8px rgba(0,0,0,.08));
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
.nam-related-card__thumb { display: block; aspect-ratio: 16/10; overflow: hidden; }
.nam-related-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nam-related-card__noimg { display: block; width: 100%; height: 100%; background: #e9f1e9; }
/* Thân card co giãn đầy chiều cao -> mọi card cao bằng nhau, ngày tháng canh đáy */
.nam-related-card__body { padding: 14px 16px 18px; display: flex; flex-direction: column; flex: 1 1 auto; }
.nam-related-card__title {
	/* Cắt gọn còn 3 dòng + chừa sẵn chiều cao 3 dòng -> tiêu đề dài/ngắn không làm lệch hàng */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-weight: 700;
	color: var(--wp--preset--color--contrast, #1a1a1a);
	text-decoration: none;
	line-height: 1.4;
	min-height: calc(1.4em * 3);
}
.nam-related-card__title:hover { color: var(--wp--preset--color--primary, #398D42); }
.nam-related-card__date { margin-top: 8px; font-size: 0.85rem; color: #6b7a6e; }
.nam-related-card__excerpt {
	margin-top: 10px;
	font-size: 0.9rem;
	line-height: 1.5;
	color: #555;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: calc(1.5em * 2);
}

/* ===== Nút CTA đồng bộ toàn site: "Liên hệ ngay" (sản phẩm) & "Xem thêm →"
   (bài viết / video / dự án / bài liên quan). Màu VÀNG thương hiệu + mũi tên trượt
   + nút nhún khi bấm cho cảm giác "mượt". */
.nam-more-btn {
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
	align-self: flex-start;
	width: -moz-fit-content;
	width: fit-content;
	background: #398D42;
	color: #ffffff !important;
	text-decoration: none !important;
	font-weight: 600;
	/* Cố định cỡ chữ = preset "small" (0.875rem) để nút bài-viết-liên-quan
	   (dùng thẻ <a> thường, không có class has-small-font-size) không bị to hơn các nút khác. */
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	line-height: 1.2;
	padding: 10px 22px;
	border: none;
	border-radius: 30px;
	box-shadow: 0 4px 12px rgba(57, 141, 66, 0.3);
	cursor: pointer;
	transition: background .25s ease, transform .18s cubic-bezier(.2, .7, .3, 1), box-shadow .25s ease;
}
.nam-more-btn::after {
	content: "";
	width: 15px;
	height: 15px;
	flex: 0 0 auto;
	background-color: currentColor;
	-webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M8.59 16.59 13.17 12 8.59 7.41 10 6l6 6-6 6z"/></svg>') center / contain no-repeat;
	mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M8.59 16.59 13.17 12 8.59 7.41 10 6l6 6-6 6z"/></svg>') center / contain no-repeat;
	transition: transform .25s cubic-bezier(.2, .7, .3, 1);
}
.nam-more-btn:hover {
	background: #2e7536;
	transform: translateY(-2px);
	box-shadow: 0 9px 20px rgba(57, 141, 66, 0.45);
}
.nam-more-btn:hover::after { transform: translateX(4px); }
.nam-more-btn:active {
	transform: translateY(0) scale(.96);
	box-shadow: 0 3px 8px rgba(57, 141, 66, 0.35);
}
/* Khoảng cách với nội dung phía trên trong các card query loop */
.wp-block-post .nam-more-btn { margin-top: 14px; }
/* Card video không có padding -> lùi nút vào cho cân */
.wp-block-post:has(.wp-block-video) .nam-more-btn { margin-left: 20px; margin-right: 20px; margin-bottom: 20px; }
/* Bài viết liên quan: khoảng cách rõ giữa ngày tháng và nút (tránh dính nhau).
   Các card có cùng chiều cao nội dung (tiêu đề cố định 3 dòng) nên nút vẫn thẳng hàng. */
.nam-related-card .nam-more-btn { margin-top: 16px; }

/* ===== Banner nhỏ đầu trang danh mục sản phẩm ===== */
.nam-archive-banner {
	margin: 0 0 28px;
	border-radius: 12px;
	overflow: hidden;
	line-height: 0;
}
.nam-archive-banner__link { display: block; }
.nam-archive-banner__img {
	width: 100%;
	height: auto;
	display: block;
	max-height: 320px;
	object-fit: cover;
}
.nam-archive-banner__fallback {
	line-height: 1.4;
	padding: 28px 32px;
	background: var(--wp--preset--color--primary, #398D42);
	color: #fff;
}
.nam-archive-banner__title { margin: 0 0 8px; color: #fff; font-size: 1.4rem; font-weight: 700; }
.nam-archive-banner__text { margin: 0; opacity: 0.95; }

/* ===== Trang video đơn (single-video): video gọn – canh giữa – không dàn trải dài =====
   Bố cục dùng layout "constrained" (contentSize 800px) nên tiêu đề/nội dung tự canh giữa;
   ở đây chỉ giới hạn kích thước phần tử <video> để không bị to & kéo dài quá. */
.single-video .wp-block-video { margin-left: auto; margin-right: auto; }
.single-video .wp-block-video video {
	width: 100%;
	height: auto;
	max-height: 78vh;
	object-fit: contain;
	display: block;
	margin: 0 auto;
	border-radius: 10px;
	background: #000;
}
.single-video .nam-video-detail { margin-top: 40px; }
.single-video .nam-video-detail .wp-block-post-excerpt__excerpt { line-height: 1.75; margin: 0; }