/* JK Forms — contact / giveaway / raffle (ô đăng ký một dòng dùng subscribe.css riêng).
   Chép công thức form đăng nhập / thanh toán của theme: thẻ tile nền --jk-tile viền
   --jk-tile-line bo --jk-r-card; ô nhập TRẮNG bên trong, viền #DCDCDC, bo --jk-r-ctl, cao
   52; nút nền mực chữ mono. Không tiêu đề trong khung, đệm và khe rút gọn: bản đầu đo ra
   form contact cao 560px cho ba ô, gần một nửa là không khí.

   Mọi selector ô nhập viết dạng `.jkf .jkf__input` (0,2,0): CSS Astra đóng băng có luật
   `input[type=text]` (0,1,1) cho bo 2px + chữ #666, một class đơn thua nó.
   Không dùng :has() — Safari từng treo rồi sập tiến trình dựng trang vì nó. */

.jkf { margin: 0; max-width: 100%; box-sizing: border-box; }
.jkf__hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.jkf--panel {
	padding: 22px 24px 24px;
	background: var(--jk-tile, #fff);
	border: 0;
	border-radius: var(--jk-r-card, 32px);
	box-shadow: var(--jk-nm-raise);
}
.jkf--contact  { max-width: 560px; }
/* Trong một cột thì bề ngang là việc của CỘT (24/09/2026). Trang Contact đặt form ở cột 56%:
   trần 560 làm khung form dừng cách mép phải của trang 98px ở 1440 và 168px ở 768, trong khi
   thanh đầu, chân trang và mọi khối khác đều chạm mép. Trần 560 vẫn giữ cho form đứng một mình
   trên nền trang rộng. */
.wp-block-column > .jkf--contact { max-width: none; }
.jkf--giveaway { max-width: 420px; }
.jkf--raffle   { max-width: none; }
@media (max-width: 768px) { .jkf--panel { padding: 18px 16px 18px; } }

/* Đã đóng */
.jkf--closed { padding: 18px 24px; }
.jkf__closed { margin: 0; font-size: var(--jk-fs-body, 17px); color: var(--jk-muted, #6A6A6A); }

/* Lưới trường: hai cột, khe 14/20 */
.jkf__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; align-items: start; }
.jkf__field--wide { grid-column: 1 / -1; }
.jkf--giveaway .jkf__grid { grid-template-columns: 1fr; }
@media (max-width: 768px) { .jkf__grid { grid-template-columns: 1fr; gap: 14px; } }

.jkf__label {
	display: block; margin: 0 0 6px; padding-left: 30px;   /* canh theo mép chữ trong ô */
	font-size: var(--jk-fs-sm, 15px); font-weight: 600; color: var(--jk-ink, #111); line-height: 1.3;
}
.jkf__req { color: var(--jk-red, #D42027); margin-left: 3px; font-weight: 400; }
.jkf__help { margin: 5px 0 0; font-size: 13px; color: var(--jk-muted, #6A6A6A); line-height: 1.4; }
.jkf__help a { color: var(--jk-ink, #111); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.jkf__help a:hover { text-decoration: none; }
.jkf__help--warn { color: var(--jk-red, #D42027); }

/* Ô nhập: input · textarea · select cùng một công thức.
   2026-09-07 vòng 10 — về đúng công thức ô nhập của theme (chốt 07/09, khối JK-VONG9 §3):
   viên thuốc, không viền, nền xám rất nhạt, đệm ngang 30, chữ 15. Trước vòng này biểu mẫu
   là chỗ DUY NHẤT của site còn ô nhập bo 12 + viền 1px + nền trắng, vì hai đợt chuốt 06 và
   07/09 chỉ đi qua theme, không với tới plugin.
   Đệm 30 không phải số đẹp tuỳ chọn: cung của bo 999 trên ô cao 52 ăn sâu 26px mỗi đầu,
   30 là số nhỏ nhất đưa chữ ra khỏi phần cung. */
.jkf .jkf__input {
	display: block; width: 100%; box-sizing: border-box;
	min-height: 52px; height: 52px; padding: 0 30px; margin: 0;
	font: inherit; font-size: var(--jk-fs-sm, 15px); line-height: 1.4; color: var(--jk-ink, #111);
	background: var(--jk-field-face, #FAFBFC); border: 0;
	border-radius: var(--jk-r-pill, 999px);
	box-shadow: var(--jk-field, inset 0 1px 1.5px rgba(17,17,17,.07));
	-webkit-appearance: none; appearance: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.jkf .jkf__input::placeholder { color: #A8A8A8; }
/* 05/09: bỏ quầng đỏ, dùng nét lõm sâu của theme (--jk-focus). Một ô mà vừa viền đen vừa
   bóng đỏ là hai tín hiệu chồng nhau. Giá trị dự phòng phải KHỚP token của theme. */
.jkf .jkf__input:focus, .jkf .jkf__input:focus-visible {
	outline: 0 !important;
	box-shadow: var(--jk-focus, inset 0 2px 3px rgba(17,17,17,.13));
}
/* 🛑 Ô NHIỀU DÒNG KHÔNG tròn hẳn: bo 999 trên ô cao 120 bào hai đầu thành viên thuốc nằm
   dọc. Nó lấy bo của khối con — cùng ngoại lệ đã ghi ở JK-VONG9 §3 cho textarea của
   thanh toán. */
.jkf textarea.jkf__input {
	height: auto; min-height: 120px; padding: 14px 24px; resize: vertical;
	border-radius: var(--jk-r-panel, 24px);
}
.jkf select.jkf__input {
	padding-right: 44px; cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 12px center; background-size: 18px;
}

/* Ô quốc gia = selectWoo (select2 của Woo), chép đúng luật ô "Country / Region" ở thanh
   toán / sổ địa chỉ trong style.css của theme (khối "Ô CHỌN QUỐC GIA"). Theme chỉ scope
   mấy luật đó vào body thanh toán/giỏ/tài khoản nên ở trang raffle phải khai lại, scope
   `.jkf` (khung danh sách được gắn vào chính form qua dropdownParent). */
/* Thẻ <select> gốc phải BIẾN MẤT sau khi select2 thay nó: luật `.jkf .jkf__input` (0,2,0)
   mạnh hơn `.select2-hidden-accessible` (0,1,0) của select2, nên bản đầu cái select gốc vẫn
   chiếm 52px — mũi tên lệch 25px, danh sách rơi cách ô 114px. Khai lại cách giấu, mạnh hơn. */
.jkf select.select2-hidden-accessible {
	position: absolute !important; width: 1px !important; height: 1px !important; min-height: 0 !important;
	padding: 0 !important; margin: -1px !important; border: 0 !important; overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important;
}
.jkf .select2-container { width: 100% !important; display: block; }
.jkf .select2-container .select2-selection--single {
	height: 52px; padding: 0;
	background: var(--jk-field-face, #FAFBFC); border: 0;
	border-radius: var(--jk-r-pill, 999px);
	box-shadow: var(--jk-field, inset 0 1px 1.5px rgba(17,17,17,.07));
	transition: border-color .15s ease, box-shadow .15s ease;
}
/* Lúc mở, select2.css của Woo vuông hai góc để "dán" ô vào danh sách (selector 4 class,
   thắng scope 3 class của plugin) — danh sách đã tách rời 6px nên góc vuông là thừa.
   Theme cũng phải dùng !important đúng chỗ này. */
.jkf .select2-container--open .select2-selection--single,
.jkf .select2-container--focus .select2-selection--single {
	border: 0 !important; border-radius: var(--jk-r-pill, 999px) !important;
	box-shadow: var(--jk-focus, inset 0 2px 3px rgba(17,17,17,.13)); outline: 0;
}
.jkf .select2-container .select2-selection--single .select2-selection__rendered {
	padding: 0 44px 0 30px; line-height: 52px; font-size: var(--jk-fs-sm, 15px); color: var(--jk-ink, #111);
}
.jkf .select2-container .select2-selection--single .select2-selection__placeholder { color: #A8A8A8; }
/* CSS Woo đóng băng đặt transform: translateY(-50%) cho ô mũi tên; với top:0 thì cả ô 50px
   bị đẩy lên 25px, chevron ló ở mép trên. Neo top:50% + translate cho khớp cả hai luật. */
.jkf .select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 50px; width: 42px; right: 2px; top: 50% !important; transform: translateY(-50%) !important; margin: 0 !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23111111' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: center; background-size: 12px 8px;
}
.jkf .select2-container .select2-selection--single .select2-selection__arrow b { display: none; }
/* MỘT KHỐI khi mở: ô chọn biến mất, khung danh sách kéo lên đè đúng chỗ ô, ô tìm cao 52
   không viền riêng làm mặt trên của khối, danh sách nằm dưới sau một nét mảnh. Bản đầu để
   ô tìm nằm trong khung danh sách dưới ô chọn → hai khung chồng nhau.
   Khung danh sách mang class jkf-dd (dropdownCssClass), nằm ở cuối <body>. Mấy chỗ
   !important là vì select2.css của Woo dùng selector 3-4 class. */
.jkf .select2-container--open .select2-selection--single { visibility: hidden; }
.select2-dropdown.jkf-dd {
	padding: 0 !important; border: 0 !important; border-radius: var(--jk-r-panel, 24px) !important;
	background: #fff !important; overflow: hidden;
	/* Khoi NOI: tam so xuong la mot tam noi, cung cach voi tam so xuong cua menu. */
	box-shadow: var(--jk-nm-raise) !important;
	font-family: inherit;
}
/* Kéo lên đúng vị trí ô: select2 đặt top = đáy ô, ô cao 52 → lùi 52. */
.jkf-dd.select2-dropdown--below { margin-top: -52px; }
/* Gần đáy màn hình select2 lật khung lên trên ô; khi đó giữ hai khối tách 6px, ô tìm vẫn ở
   trên cùng của khung. Hiếm, chấp nhận. */
.jkf-dd.select2-dropdown--above { margin-bottom: 6px; }
.jkf-dd .select2-results__options { list-style: none !important; padding: 6px !important; margin: 0 !important; max-height: 264px !important; }
.jkf-dd .select2-results__option { list-style: none !important; margin: 0 !important; padding: 9px 12px !important; border-radius: var(--jk-r-sm, 6px) !important; font-size: 16px !important; line-height: 1.4; color: var(--jk-ink, #111) !important; background: transparent !important; }
.jkf-dd .select2-results__option::marker { content: ""; }
/* Rê tới: XÁM, không xanh #5897fb của select2. Đang chọn: đậm chữ, không tô nền.
   selectWoo (bản select2 của Woo) dùng aria-selected cho mục ĐANG RÊ TỚI và data-selected
   cho mục ĐÃ CHỌN — ngược với select2 gốc; gộp aria-selected vào luật "đã chọn" là mục
   đang rê bị xoá nền (đo ra transparent). */
.jkf-dd .select2-results__option--highlighted,
.jkf-dd .select2-results__option[aria-selected="true"] { background: var(--jk-soft, #F7F7F7) !important; color: var(--jk-ink, #111) !important; }
.jkf-dd .select2-results__option[data-selected="true"] { font-weight: 600 !important; color: var(--jk-ink, #111) !important; }
.jkf-dd .select2-search--dropdown { padding: 0 !important; border-bottom: 1px solid var(--jk-line, #CFCFD6); }
.jkf-dd .select2-search--dropdown .select2-search__field {
	width: 100%; box-sizing: border-box; height: 52px; padding: 0 44px 0 14px !important; margin: 0;
	border: 0 !important; border-radius: 0 !important; font: inherit; font-size: 16px !important; color: var(--jk-ink, #111);
	background: #fff; box-shadow: none !important;
	/* cùng chevron với ô chọn, để lúc mở vẫn đọc ra "đây là ô xổ" */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M11 6.5L6 1.5L1 6.5' stroke='%23111111' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 17px center; background-size: 12px 8px;
}
.jkf-dd .select2-search--dropdown .select2-search__field::placeholder { color: #A8A8A8; }
.jkf-dd .select2-search--dropdown .select2-search__field:focus { outline: 0 !important; }
.jkf-dd .select2-results__message { padding: 10px 12px !important; font-size: 15px !important; color: var(--jk-muted, #6A6A6A) !important; }

/* Nút chọn số lượng: nhóm viên thuốc, cái được chọn nền mực */
.jkf__qty { display: flex; flex-wrap: wrap; gap: 8px; }
.jkf__qty-btn { position: relative; cursor: pointer; margin: 0; }
.jkf__qty-btn input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
.jkf__qty-btn span {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 52px; height: 52px; padding: 0 16px;
	font-family: var(--jk-font-mono, ui-monospace, monospace); font-size: 16px; font-weight: 600;
	color: var(--jk-ink, #111); background: var(--jk-nm-face, #F5F6F8);
	border: 0; border-radius: var(--jk-r-pill, 999px);
	box-shadow: var(--jk-nm-raise);
	transition: color .12s ease, box-shadow .12s ease;
}
.jkf__qty-btn:hover span { box-shadow: var(--jk-nm-raise-hover); }
/* Da chon = LOM SAU + chu do tram, dung cap trang thai voi nut luc bam. Ban cu do day nen
   muc: mot o 52px den dac hut mat manh hon ca nut gui ben duoi. */
.jkf__qty-btn input:checked + span { background: var(--jk-nm-face, #F5F6F8); color: var(--jk-red-dark, #B31B21); box-shadow: var(--jk-nm-sunk-deep); }
.jkf__qty-btn input:focus-visible + span { box-shadow: var(--jk-focus, inset 0 2px 3px rgba(17,17,17,.13)); }

/* Thẻ ảnh chọn mẫu: 5 cột trên máy tính, tên gọn, ô tick góc trên phải */
.jkf__cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1100px) { .jkf__cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 860px)  { .jkf__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .jkf__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
.jkf__card {
	display: block; cursor: pointer; margin: 0; padding: 10px;
	background: var(--jk-nm-face, #F5F6F8); border: 0;
	border-radius: var(--jk-r-media, 16px);
	box-shadow: var(--jk-nm-raise);
	transition: box-shadow .12s ease;
}
.jkf__card:hover { box-shadow: var(--jk-nm-raise-hover); }
.jkf__card.is-selected { box-shadow: var(--jk-nm-sunk-deep); }
.jkf__card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 8px; min-height: 36px; }
.jkf__card-title { font-size: 14px; font-weight: 600; color: var(--jk-ink, #111); line-height: 1.3; }
.jkf__card input[type="checkbox"] {
	flex: 0 0 auto; -webkit-appearance: none; appearance: none; margin: 0;
	width: 20px; height: 20px; border: 0; border-radius: var(--jk-r-sm, 6px);
	background: #fff; cursor: pointer; display: inline-grid; place-items: center;
	box-shadow: var(--jk-nm-sunk);
}
.jkf__card input[type="checkbox"]:checked { box-shadow: var(--jk-nm-sunk-deep); }
.jkf__card input[type="checkbox"]::after {
	content: ""; width: 10px; height: 10px; border-radius: 2px;
	background: var(--jk-red, #D42027); transform: scale(0); transition: transform .12s ease;
}
.jkf__card input[type="checkbox"]:checked::after { transform: scale(1); }
.jkf__card input[type="checkbox"]:focus-visible { outline: 0; box-shadow: var(--jk-focus, inset 0 2px 3px rgba(17,17,17,.13)); }
.jkf__card-img { display: block; aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--jk-r-thumb, 12px); background: var(--jk-soft, #F7F7F7); }
.jkf__card-img img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Chân form: nút + hạn đóng cùng hàng */
/* margin-top 18 -> 16 (12/09/2026). Khe TREN nut la 18 con khe DUOI nut (toi .jkf__msg) la 16,
   va o captcha ngay tren no cung 16 (.jkf__turnstile). Ba khe canh nhau ma mot cai le 2px; 16
   la mot nac cua thang (--jk-sp-4), 18 khong nam tren thang nao. */
.jkf__foot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: var(--jk-sp-4, 16px); }
/* 2026-09-04: nen MUC -> DO. Nut nay la hanh dong chinh cua trang no dung (gui lien he,
   ghi danh giveaway, gui luot raffle), va he thong mau cua site danh do cho dung hai viec:
   hanh dong chinh va loi. Moi nut gui khac cua site da do — Log in, Track, Place order,
   Add to cart — de mot minh no mau muc la hai kieu cho cung mot viec.
   Nut "Sign up" o o dang ky mot dong GIU nguyen muc: no la hanh dong phu trong chan trang.
   Bong: ba net day du (giong --jk-key-dark cua theme) vi nut nay khong nam trong vo
   `overflow:hidden`, net ke duoi day khong bi cat. */
.jkf .jkf__submit {
	display: inline-flex; align-items: center; justify-content: center;
	width: auto; min-width: 180px; height: 52px; padding: 0 30px; margin: 0; cursor: pointer;
	background: var(--jk-red, #D42027); color: #fff; border: 0; border-radius: var(--jk-r-pill, 999px);
	font-family: var(--jk-font-mono, ui-monospace, monospace); font-size: var(--jk-fs-btn, 16px); font-weight: 700; letter-spacing: 0;
	box-shadow: var(--jk-key-dark, inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(0,0,0,.20), 0 1px 0 rgba(17,17,17,.22));
	transition: var(--jk-tr-press, background-color .12s ease, box-shadow .12s ease, transform .12s ease);
}
.jkf--giveaway .jkf__submit, .jkf--contact .jkf__submit { width: 100%; }
.jkf .jkf__submit:hover { background: var(--jk-red-dark, #B31B21); }
.jkf .jkf__submit:active { transition-duration: 0s; transform: translateY(1px); box-shadow: var(--jk-press-dark, inset 0 2px 3px rgba(0,0,0,.38)); }
.jkf .jkf__submit:disabled { opacity: .6; cursor: default; transform: none; }
.jkf__deadline { font-family: var(--jk-font-mono, ui-monospace, monospace); font-size: 13px; color: var(--jk-muted, #6A6A6A); }

/* Canh giua, giu kho nho 300px: khung cua Cloudflare goc vuong va nam trong iframe cua ho
   nen minh khong bo duoc. Keo rong bang o nhap thi thanh hinh chu nhat vuong goc kep giua
   cac o bo tron (da thu va gat 12/09/2026). Khe tren 16 = khe duoi 16 (.jkf__foot). */
.jkf__turnstile { display: flex; justify-content: center; margin-top: 16px; }
.jkf__turnstile .cf-turnstile { margin: 0 !important; }

/* 2026-09-04: khe nut -> dong tra loi tu 10px len mot nac cua thang. 10px la khe TRONG mot
   khoi; day la hai vai khac nhau (nut bam / cau tra loi cua may) nen phai la mot nac. */
/* `.jkf__msg` don (0,1,0) THUA luat `.entry-content p` cua theme (0,1,1) — do duoc:
   marginTop giai ra 0px du khai 16px. Dung `.jkf .jkf__msg` (0,2,0) nhu quy uoc ghi o dau tep. */
.jkf .jkf__msg { margin: var(--jk-sp-4, 16px) 0 0; font-size: var(--jk-fs-sm, 15px); color: var(--jk-muted, #6A6A6A); line-height: 1.5; }
.jkf .jkf__msg:empty { display: none; }
.jkf .jkf__msg.is-ok { color: var(--jk-ink, #111); }
.jkf .jkf__msg.is-err { color: var(--jk-red, #D42027); }

/* 🛑 Ô nhập ở khổ nhỏ phải ≥16px, nếu không Safari trên iOS tự phóng cả trang khi chạm vào
   và sau đó không thu lại — khách đang điền form thì trang nhảy một nấc. Máy bàn không có
   chuyện đó nên 15px chỉ áp cho màn hình lớn. Cùng luật đã ghi ở JK-VONG9 §3 của theme. */
@media (max-width: 767px) {
	.jkf .jkf__input,
	.jkf .select2-container .select2-selection--single .select2-selection__rendered { font-size: 16px; }
	.jkf .jkf__input::placeholder { font-size: 16px; }
}