/* JK Blocks — chia cột chữ + đồng hồ đếm ngược. Dùng chung cho frontend lẫn editor. */

/* --- Chia CHỮ 2–3 cột (block style cho Group/Paragraph) ---
   Cùng hành vi với text_columns của Elementor: chữ TỰ CHẢY qua cột, xuống 1 cột trên
   điện thoại. column-gap 20px — ĐO trên trang sản phẩm gốc 13/08 (mọi khổ đều 20;
   con số 40 thời 1.8.0 là ước lượng chưa từng bị bài pilot nào kiểm chứng). */
.is-style-jk-cols-2 { columns: 2; column-gap: 20px; }
.is-style-jk-cols-3 { columns: 3; column-gap: 20px; }
/* CHỮ phải được bẻ qua cột (đó là mục đích) — chỉ ảnh/figure là không nên đứt đôi.
   Bản đầu cấm break trên MỌI con: một đoạn văn dài nằm lì cột 1, hai cột kia trống. */
.is-style-jk-cols-2 :is(figure, img), .is-style-jk-cols-3 :is(figure, img) { break-inside: avoid-column; }
@media (max-width: 1024px) {
	.is-style-jk-cols-3 { columns: 2; }
}
@media (max-width: 767px) {
	.is-style-jk-cols-2, .is-style-jk-cols-3 { columns: 1; }
}

/* --- Đồng hồ đếm ngược (jk/countdown) ---
   Số mono đậm trong ô trắng viền mảnh bo 12px — cùng ngôn ngữ chip/ô của site. */
.jk-cd {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
}
.jk-cd__box {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 96px;
	padding: 14px 10px 10px;
	background: #fff;
	border: 1px solid #E2E2E5;
	border-radius: 12px;
}
.jk-cd__n {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-variant-numeric: tabular-nums;
	font-size: 34px;
	font-weight: 700;
	line-height: 1.1;
	color: #111;
}
.jk-cd__l {
	margin-top: 2px;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .02em;
	color: #6A6A6A;
}
.jk-cd--ended {
	font-size: 17px;
	color: #6A6A6A;
	border: 1px dashed #E2E2E5;
	border-radius: 12px;
	padding: 16px 20px;
}
@media (max-width: 767px) {
	.jk-cd { gap: 8px; }
	.jk-cd__box { min-width: 72px; padding: 10px 8px 8px; }
	.jk-cd__n { font-size: 26px; }
}

/* --- Tỉ lệ ảnh gallery (jk/gallery, chọn trong panel) --- */
.jk-ratio-1-1 .uael-grid-img-thumbnail img { aspect-ratio: 1 / 1; object-fit: cover; }
.jk-ratio-4-3 .uael-grid-img-thumbnail img { aspect-ratio: 4 / 3; object-fit: cover; }
.jk-ratio-3-2 .uael-grid-img-thumbnail img { aspect-ratio: 3 / 2; object-fit: cover; }
.jk-ratio-16-9 .uael-grid-img-thumbnail img { aspect-ratio: 16 / 9; object-fit: cover; }

/* --- Countdown tối / tuỳ chỉnh --- */
.jk-cd--dark .jk-cd__box { background: #111; border-color: #2a2a2a; }
.jk-cd--dark .jk-cd__n { color: #fff; }
.jk-cd--dark .jk-cd__l { color: rgba(255, 255, 255, .6); }
.jk-cd--custom .jk-cd__n, .jk-cd--custom .jk-cd__l { color: inherit; }
.jk-cd--dark.jk-cd--ended, .jk-cd--custom.jk-cd--ended { background: none; }

/* --- Cột theo màn hình do NGƯỜI SOẠN đặt (panel "JK — hiển thị theo màn hình")
   jk-tc-* = khối CHỮ chia cột (CSS columns) · jk-cc-* = block Columns (flex).
   !important vì core Columns tự ép flex-basis 100% ở khổ hẹp. --- */
/* 🛑 Chuỗi chọn phải là div.wp-block-columns.jk-cc-* (0,3,1): luật xếp chồng của core là
   `.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column` — :not() mang theo
   specificity nên (0,3,0) + !important; bản đầu (0,2,0) thua im lặng (đo 13/08). */
/* Gap phải chốt TƯỜNG MINH cùng chỗ với flex-basis: gap mặc định của core là biến
   (~2em) — basis 50%-8px + gap 34px là tràn hàng, hai cột lại rơi về xếp chồng dù basis
   đã ăn (đo 13/08: basis áp rồi mà cột vẫn nằm dọc, mỗi cột 180px). */
@media (max-width: 1024px) {
	div.wp-block-group.jk-tc-t-1 { columns: 1 !important; } div.wp-block-group.jk-tc-t-2 { columns: 2 !important; } div.wp-block-group.jk-tc-t-3 { columns: 3 !important; }
	div.wp-block-columns.jk-cc-t-1 > .wp-block-column { flex-basis: 100% !important; flex-grow: 0; }
	div.wp-block-columns.jk-cc-t-2, div.wp-block-columns.jk-cc-t-3 { flex-wrap: wrap !important; gap: 20px !important; }
	div.wp-block-columns.jk-cc-t-2 > .wp-block-column { flex-basis: calc(50% - 10px) !important; flex-grow: 0; }
	div.wp-block-columns.jk-cc-t-3 > .wp-block-column { flex-basis: calc(33.33% - 14px) !important; flex-grow: 0; }
}
@media (max-width: 767px) {
	div.wp-block-group.jk-tc-m-1 { columns: 1 !important; } div.wp-block-group.jk-tc-m-2 { columns: 2 !important; } div.wp-block-group.jk-tc-m-3 { columns: 3 !important; }
	/* jk-cc-m-1 cần wrap tường minh: đi kèm is-not-stacked-on-mobile (nowrap của core) để
	   tái tạo container Elementor — NGANG ở tablet, CHỒNG ở mobile (đo prod 13/08) */
	div.wp-block-columns.jk-cc-m-1 { flex-wrap: wrap !important; }
	div.wp-block-columns.jk-cc-m-1 > .wp-block-column { flex-basis: 100% !important; flex-grow: 0; }
	div.wp-block-columns.jk-cc-m-2 { flex-wrap: wrap !important; gap: 16px !important; }
	div.wp-block-columns.jk-cc-m-2 > .wp-block-column { flex-basis: calc(50% - 8px) !important; flex-grow: 0; }
}

/* Cột sinh từ SECTION đời cũ: Elementor cũ xếp chồng NGAY TẠI 768px (media query
   max-width:768 tính cả 768) — khác container đời mới (chồng ≤767). Đo prod 13/08:
   zephyr/what-new-june ở đúng 768 đã chồng. */
@media (max-width: 768px) {
	div.wp-block-columns.jk-cc-s-1 { flex-wrap: wrap !important; }
	div.wp-block-columns.jk-cc-s-1 > .wp-block-column { flex-basis: 100% !important; flex-grow: 0; }
}

/* Lề ngang tự đặt (panel JK): chỉ áp từ tablet trở lên — 80px mỗi bên trên màn 375px là
   nuốt nửa khung; mobile về lề chuẩn của site. Giá trị đi bằng biến --jk-padx. */
@media (min-width: 768px) {
	.jk-padx { padding-left: var(--jk-padx, 0px) !important; padding-right: var(--jk-padx, 0px) !important; }
}

/* --- Nhóm spacing của bộ chuyển: CHẶN GỘP LỀ (chỉ trên TRANG) ---
   Container Elementor là flex nên lề của widget và lề của thẻ <p> bên trong CỘNG vào nhau.
   Bên block, nhóm bọc không có viền/đệm nên lề dưới của nó GỘP với lề dưới của phần tử con
   cuối — lấy số lớn hơn, số nhỏ biến mất. Hậu quả đo được trên /artisan-keycaps/ 14/08:
   widget chữ khai lề dưới 10px, đoạn văn trong nó đã có 24,3px → 10px bốc hơi, khe trước
   MỖI lưới hụt đúng 10px (34 → 24). `flow-root` dựng lại ranh giới, lề cộng vào nhau như
   Elementor.
   🛑 Khoanh trong `.page` có chủ đích: 201 bài blog + 157 sản phẩm đã duyệt và đang chạy
   prod với hành vi gộp lề cũ — mở rộng luật này ra cho chúng là dịch bố cục hàng loạt
   ngoài phạm vi việc đang làm. Khi nào chuyển tới chúng thì tính tiếp. */
.page .entry-content .wp-block-group[class*="jk-sp-"] { display: flow-root; }

/* --- Lưới sản phẩm (jk/products) ---
   Thay widget `posts` skin classic của Elementor Pro. Điểm ngắt PHẢI trùng Elementor,
   đã đo trên trang thật 14/08: tablet `max-width:1024`, mobile `max-width:767`
   (.elementor-grid-tablet-N / .elementor-grid-mobile-N nằm đúng hai media đó).
   Mọi con số đi bằng biến --jk-pg-* do PHP in ra, nên CSS này KHÔNG cần biết panel chọn gì. */
.jk-pg {
	display: grid;
	grid-template-columns: repeat(var(--jk-pg-c, 4), minmax(0, 1fr));
	column-gap: var(--jk-pg-gx, 40px);
	row-gap: var(--jk-pg-gy, 40px);
}
.jk-pg__i {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0;
	text-align: center;
}
/* Bo góc ở KHUNG chứ không ở ảnh — ảnh bị khung cắt (object-fit: cover), bo ở ảnh thì bốn
   góc nằm ngoài khung và khách thấy góc vuông. Cùng bẫy với gallery và lưới Elementor,
   đã ghi trong khối JK-ELEMENTOR của style.css. */
.jk-pg__t {
	display: block;
	width: 100%;
	overflow: hidden;
	border-radius: var(--jk-r-media);
	line-height: 0;
}
.jk-pg__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.jk-ratio-1-1 .jk-pg__t { aspect-ratio: 1 / 1; }
.jk-ratio-4-3 .jk-pg__t { aspect-ratio: 4 / 3; }
.jk-ratio-3-2 .jk-pg__t { aspect-ratio: 3 / 2; }
.jk-ratio-16-9 .jk-pg__t { aspect-ratio: 16 / 9; }
/* 🛑 Lề của tên/ngày PHẢI viết dưới dạng hai class (0,2,0). Bản đầu viết `.jk-pg__n`
   (0,1,0) và thua `.entry-content p` (0,1,1) của theme mà KHÔNG BÁO GÌ: khoảng cách ảnh→tên
   10px biến mất, đổi lại 24,3px lề dưới mọc ra, mỗi thẻ không có ngày cao thêm 14px — cả
   trang dài thêm 55px. Đo được là nhờ bóc chiều cao thẻ ra từng phần; nhìn ảnh không thấy.
   Đặt 10px ở ẢNH chứ không phải ở tên, giống hệt Elementor (margin-bottom của
   .elementor-post__thumbnail__link) — thẻ nào thiếu ảnh thì không lòi khoảng trắng thừa. */
.jk-pg .jk-pg__t { margin-bottom: var(--jk-pg-is, 10px); }
.jk-pg .jk-pg__n {
	margin: 0;
	font-size: var(--jk-pg-ts, 18px);
	font-weight: 400;
	line-height: var(--jk-pg-lh, 1.7);
}
/* Chốt màu + bỏ gạch chân TƯỜNG MINH: trên trang Elementor, frontend.min.css của Elementor
   reset `a{text-decoration:none}` và Astra ghi đè hover về đen — trang block không nạp file
   đó nên tên sản phẩm sẽ nhận luật link chung của theme (gạch chân khi rê chuột) và lưới
   trông khác bản cũ. Đo 14/08: chữ #000, không gạch chân, hover không đổi. */
.jk-pg__n a,
.jk-pg__n a:hover,
.jk-pg__n a:focus {
	color: inherit;
	text-decoration: none;
}
/* 13px dưới dòng ngày là của widget-posts.min.css (.elementor-post__meta-data), không phải
   thiết lập ai chọn — nhưng nó nằm TRONG chiều cao thẻ nên bỏ đi là lệch bố cục. */
.jk-pg .jk-pg__d {
	display: block;
	margin: 0 0 13px;
	font-size: 15px;
	line-height: 2.2;
	color: #ADADAD;
}
/* Luật trong media query cũng phải HAI CLASS. Bản trước để `.jk-pg__n` (0,1,0) ở đây trong
   khi luật nền đã lên (0,2,0) — cỡ chữ mobile 17px im lặng không ăn, media query vẫn khớp
   nhưng thua specificity. Media query KHÔNG cộng specificity, đây là bẫy dễ vấp lần hai. */
@media (max-width: 1024px) {
	.jk-pg.jk-pg {
		grid-template-columns: repeat(var(--jk-pg-ct, 4), minmax(0, 1fr));
		column-gap: var(--jk-pg-gs, 20px);
		row-gap: var(--jk-pg-gs, 20px);
	}
}
@media (max-width: 767px) {
	.jk-pg.jk-pg { grid-template-columns: repeat(var(--jk-pg-cm, 2), minmax(0, 1fr)); }
	.jk-pg .jk-pg__n { font-size: var(--jk-pg-tsm, 18px); }
}

/* Parity lề trong CỘT với Elementor: Elementor xoá lề sau đoạn cuối MỖI widget
   (.elementor-widget-text-editor p:last-child { margin-bottom: 0 }) nên sau phần tử
   cuối của cột không còn lề; bên block, lề 20px của phần tử cuối lọt ra làm MỖI CỘT
   dư 20px — bài sản phẩm nhiều cột cộng dồn +300..630px (đo 13/08/2026:
   arousal +323, sphincter +470, coral-odyssey +627). Bỏ lề theo chuỗi last-child,
   phủ 3 tầng bọc group của bộ chuyển (jk-sp/jk-al lồng nhau). */
.entry-content .wp-block-column > :is(p, ul, ol, figure, h1, h2, h3, h4, h5, h6):last-child,
.entry-content .wp-block-column > .wp-block-group:last-child > .wp-block-group__inner-container > :is(p, ul, ol, figure, h1, h2, h3, h4, h5, h6):last-child,
.entry-content .wp-block-column > .wp-block-group:last-child > .wp-block-group__inner-container > .wp-block-group:last-child > .wp-block-group__inner-container > :is(p, ul, ol, figure, h1, h2, h3, h4, h5, h6):last-child {
	margin-bottom: 0;
}