/* ============================================================
   สกิน 8-bit ทั้งเว็บ — ให้ลูกค้าเห็นว่า "หน้าอื่น" จะออกมาแบบไหนถ้าเลือก v3
   (JoJho 9 ต.ค. 2026: "อันนี้เฉพาะหน้า HOME ไม่แน่ใจหน้าอื่นจะออกมาประมาณไหน?"
                        "font อาจจะต้องแก้ที่ header/footer ด้วย")
   ------------------------------------------------------------
   เปิดเมื่อ <html data-iaum-skin="8bit"> เท่านั้น — ไม่มี attribute = ไฟล์นี้ไม่มีผลกับอะไรเลย
   attribute ตั้งจาก inc/home-variants.php: เข้า /home-v3/ → เปิด · เข้าหน้าแรกปกติ/v2 → ปิด
   ⇒ ลูกค้าเข้าจาก v3 แล้วกดเข้าบทความ/หมวด จะเห็นทั้งเว็บในภาษาเดียวกัน

   🔴 Press Start 2P ไม่มีภาษาไทย — ใช้เฉพาะจุดที่ "เป็นอังกฤษ/ตัวเลขแน่ ๆ" เท่านั้น:
      ปุ่ม Shop · หัวคอลัมน์ footer (CATEGORIES/ABOUT/FOLLOW US) · ลิขสิทธิ์ · ตัวเลขนับ
      ข้อความไทยทั้งหมดใช้ Kanit ผ่าน --iaum-sans
   🔴 ชั่วคราว — ลบพร้อม inc/home-variants.php ตอน go-live ถ้าลูกค้าไม่เลือก v3
   ============================================================ */
/* ฟอนต์ไทยของดีไซน์ = Kanit (สวิตช์เทียบฟอนต์ถอดออกแล้ว 11 ต.ค. 2026) */
:root[data-iaum-skin="8bit"] {
	--iaum-sans: "Kanit", system-ui, -apple-system, "Segoe UI", sans-serif;
}
:root[data-iaum-skin="8bit"] {
	--px-pixel: "Press Start 2P", ui-monospace, monospace;
	--px-ink: #14161c;
	--px-night: #13163a;
	--px-paper: #f7f2e3;
	--px-shadow: 6px 6px 0 #14161c;

	& body.iaum {
		background-color: var(--px-paper);
		background-image:
			linear-gradient(rgba(20,22,28,.045) 1px, transparent 1px),
			linear-gradient(90deg, rgba(20,22,28,.045) 1px, transparent 1px);
		background-size: 16px 16px;
	}


	/* ---------- header ---------- */
	& .iaum-header {
		background: var(--px-paper);
		border-bottom: 4px solid var(--px-ink);
		-webkit-backdrop-filter: none; backdrop-filter: none;
	}
	& .iaum-nav__item > a { font-weight: 600; border-radius: 0; }
	& .iaum-nav__item > a:hover { background: var(--iaum-yellow); color: var(--px-ink); }
	& body.iaum a.iaum-btn-store {
		font-family: var(--px-pixel); font-size: 11px; line-height: 1;
		padding: 10px 13px; border-radius: 0;
		background: var(--iaum-yellow); color: var(--px-ink);
		border: 3px solid var(--px-ink); box-shadow: 3px 3px 0 var(--px-ink);
	}
	& body.iaum a.iaum-btn-store:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--px-ink); }
	& .iaum-btn-search, & .iaum-burger { border-radius: 0; border: 3px solid var(--px-ink); background: #fff; }
	& .iaum-chips a { border-radius: 0; background: #fff; border: 3px solid var(--px-ink); font-weight: 600; }
	& .iaum-mega { background: #fff; border-top: 4px solid var(--px-ink); border-bottom: 4px solid var(--px-ink); box-shadow: 0 6px 0 var(--px-ink); }
	& .iaum-mega__head { font-weight: 700; color: var(--px-ink); }
	& .iaum-mega__n { font-family: var(--px-pixel); font-size: 9px; }
	& .iaum-drawer { background: var(--px-paper); }
	& .iaum-drawer__row { border-radius: 0; }

	/* ---------- ป้ายหมวด (eyebrow) → แถบดำแบบป้ายเกม ---------- */
	& .iaum-eyebrow {
		display: inline-block; padding: 5px 8px; background: var(--px-ink); color: #fff;
		font-family: var(--iaum-sans); font-size: 11.5px; font-weight: 600; letter-spacing: 0; text-transform: none;
	}

	/* ---------- หน้าหมวด / ค้นหา ---------- */
	& .iaum-archive__head h1, & .iaum-single__head h1 { font-weight: 800; }
	& .iaum-subnav a { border-radius: 0; background: #fff; border: 3px solid var(--px-ink); font-weight: 600; }
	& .iaum-subnav a.is-active { background: var(--iaum-yellow); color: var(--px-ink); box-shadow: 3px 3px 0 var(--px-ink); }
	& .iaum-subnav .n { font-family: var(--px-pixel); font-size: 9px; }
	& .iaum-row {
		background: #fff; border: 4px solid var(--px-ink); box-shadow: var(--px-shadow);
		padding: 16px; margin-bottom: 24px;
		transition: transform .08s steps(2), box-shadow .08s steps(2);
	}
	& .iaum-row:hover { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 var(--px-ink); }
	& .iaum-row__img { border-radius: 0; border: 3px solid var(--px-ink); }
	& .iaum-row h3 { font-weight: 700; }
	& .iaum-pag a, & .iaum-pag span { border-radius: 0; border: 3px solid var(--px-ink); background: #fff; font-weight: 700; }
	& .iaum-pag .current { background: var(--iaum-yellow); }

	/* ---------- หน้าบทความ ---------- */
	& .iaum-single__hero { border-radius: 0; border: 4px solid var(--px-ink); box-shadow: var(--px-shadow); }
	& .iaum-prose img { border-radius: 0; }
	& .iaum-prose iframe { border-radius: 0; border: 4px solid var(--px-ink); }
	& .iaum-share__btn { border-radius: 0; border: 3px solid var(--px-ink); background: #fff; }
	& .iaum-tile__img { border-radius: 0; border: 4px solid var(--px-ink); }
	& .iaum-tile h3 { font-weight: 700; }
	& .iaum-cta { border-radius: 0; border: 4px solid var(--px-ink); box-shadow: 8px 8px 0 var(--iaum-red); }
	& .iaum-cta__b1, & .iaum-cta__b2 { border-radius: 0; }
	& .iaum-sec__head { border-bottom: 4px solid var(--px-ink); }
	& .iaum-sec__head h2 { font-weight: 800; }

	/* ---------- ป๊อปอัปค้นหา / เทียบรุ่น ---------- */
	& .iaum-search__card, & .aps-comps-overlay { border-radius: 0; border: 4px solid var(--px-ink); box-shadow: var(--px-shadow); }
	& .iaum-search input[type=search], & .iaum-search__chips button, & .iaum-search__go, & .iaum-search__x { border-radius: 0; }
	& .iaum-search__chips button { border: 3px solid var(--px-ink); }
	& .iaum-search__chips button.is-active { background: var(--iaum-yellow); color: var(--px-ink); }
	& .iaum-cmp-fab { border-radius: 0; border: 3px solid #000; box-shadow: 4px 4px 0 #000; }

	/* ---------- footer = จอกลางคืนแบบหน้าเริ่มเกม ---------- */
	& .iaum-footer { background: var(--px-night); color: #fff; border-top: 4px solid var(--px-ink); }
	& .iaum-footer__h { font-family: var(--px-pixel); font-size: 10px; letter-spacing: .04em; color: var(--iaum-yellow); }
	& body.iaum .iaum-footer a { color: rgba(255,255,255,.88); }
	& body.iaum .iaum-footer a:hover { color: var(--iaum-yellow); }
	& .iaum-footer p { color: rgba(255,255,255,.7); }
	& .iaum-footer__icons a { border-radius: 0; background: transparent; border: 3px solid rgba(255,255,255,.85); color: #fff; }
	& .iaum-footer__icons a:hover { background: var(--iaum-yellow); border-color: var(--iaum-yellow); color: var(--px-ink); }
	& .iaum-footer__mail, & .iaum-footer__about { border-color: rgba(255,255,255,.18); }
	& .iaum-footer__bar { font-family: var(--px-pixel); font-size: 9px; line-height: 1.8; color: rgba(255,255,255,.55); border-color: rgba(255,255,255,.15); }
	& .iaum-footer__acc summary { color: #fff; }
}

/* ============================================================
   hover ของปุ่มกรอบหนา — แก้ "hover แล้วไอคอน/ตัวหนังสือจม" (JoJho 11 ต.ค. 2026: ปุ่มแชร์ · FOLLOW US)
   ต้นเหตุ: style.css ตั้ง hover = พื้นหมึก + ตัวขาว แต่สกินนี้ตั้งพื้น #fff ด้วย selector ที่แรงกว่า
            → พื้นยังขาว ตัวกลายเป็นขาว = หาย (แชร์ · หมวดย่อย · เลขหน้า)
            footer: ลิงก์ footer hover เป็นเหลือง (แรงกว่ากฎไอคอน) → ไอคอนเหลืองบนพื้นเหลือง
   ⇒ ภาษาเดียวทั้งเว็บ: hover = พื้นเหลือง + ตัวหมึก + ยกขึ้นมีเงาแข็ง
   ============================================================ */
:root[data-iaum-skin="8bit"] {
	& .iaum-share__btn,
	& .iaum-subnav a,
	& .iaum-pag a { transition: transform .08s steps(2), box-shadow .08s steps(2); }

	& body.iaum .iaum-share__btn:hover,
	& body.iaum a.iaum-share__btn:hover,
	& body.iaum .iaum-share__btn:focus-visible,
	& body.iaum .iaum-subnav a:not(.is-active):hover,
	& body.iaum .iaum-pag a.page-numbers:hover {
		background: var(--iaum-yellow); color: var(--px-ink); border-color: var(--px-ink);
		transform: translate(-2px, -2px); box-shadow: 3px 3px 0 var(--px-ink);
	}

	& body.iaum .iaum-footer .iaum-footer__icons a:hover,
	& body.iaum .iaum-footer .iaum-footer__icons a:focus-visible {
		background: var(--iaum-yellow); border-color: var(--iaum-yellow); color: var(--px-ink);
	}
}

/* ============================================================
   มือถือ: header กินที่น้อยลง (JoJho 11 ต.ค. 2026: "sticky แล้วกินพื้นที่ · ในมือถือ")
   1) แถวหมวดเพรียวลง — ปุ่มสูง 48 → 40px (ขั้นต่ำ tap target) · padding แถวน้อยลง
   2) header หลบตอนเลื่อนลง (class .is-tucked จาก main.js) — เลื่อนแบบ steps ให้เข้าธีมเกม
   ============================================================ */
@media (max-width: 860px) {
	:root[data-iaum-skin="8bit"] {
		& .iaum-chips { gap: 8px; padding-top: 6px; padding-bottom: 10px; }
		& .iaum-chips a { min-height: 40px; padding: 0 13px; font-size: 14.5px; line-height: 1; }
		& .iaum-header { transition: transform .18s steps(4); will-change: transform; }
		& .iaum-header.is-tucked { transform: translateY(-100%); }
	}
}
@media (max-width: 860px) and (prefers-reduced-motion: reduce) {
	:root[data-iaum-skin="8bit"] .iaum-header { transition: none; }
}

/* ============================================================
   แถบเมนูล่างแบบแอป (มือถือ ≤860px) — inc/mobile-tabbar.php
   JoJho 11 ต.ค. 2026: "เป็น web blog แต่มี menu mobile แบบ app มือถือ และมีความ 8bit"
   - ติดล่างตลอด · พื้นกระดาษ + เส้นหมึกหนา · ไอคอน pixel art · ป้ายไทย Kanit
   - ปุ่มที่อยู่ = บล็อกเหลืองกรอบหมึก (เหมือนเลือกไอเท็มในเกม) · กดแล้ว "จม"
   - ด้านบนเหลือแถวเดียว (โลโก้ + ค้นหา): ซ่อนแถวหมวด + ☰ เพราะย้ายมาอยู่ที่แถบล่างแล้ว
   ============================================================ */
.iaum-tabbar { display: none; }
@media (max-width: 860px) {
	:root[data-iaum-skin="8bit"] {
		& .iaum-tabbar {
			display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
			position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
			padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
			background: var(--px-paper); border-top: 4px solid var(--px-ink);
			box-shadow: 0 -4px 0 rgba(20,22,28,.08);
		}
		& .iaum-tab {
			display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
			height: 54px; padding: 4px 2px; margin: 0; cursor: pointer;
			background: transparent; border: 0; border-radius: 0; color: #5d6170;
			font: 600 11.5px/1.15 var(--iaum-sans); text-decoration: none; -webkit-tap-highlight-color: transparent;
		}
		& .iaum-tab__i { width: 24px; height: 24px; display: block; }
		& .iaum-tab__t { white-space: nowrap; }
		& body.iaum a.iaum-tab:hover, & .iaum-tab:hover { color: var(--px-ink); }
		/* ปุ่มที่อยู่: บล็อกเหลืองกรอบหมึก + เงาแข็ง */
		& .iaum-tab.is-on { color: var(--px-ink); font-weight: 700; }
		& .iaum-tab.is-on .iaum-tab__i {
			box-sizing: content-box; padding: 3px 9px; margin-top: -4px;
			background: var(--iaum-yellow); border: 2px solid var(--px-ink); box-shadow: 2px 2px 0 var(--px-ink);
		}
		& .iaum-tab:active .iaum-tab__i { transform: translate(2px, 2px); }
		& .iaum-tab.is-on:active .iaum-tab__i { box-shadow: 0 0 0 var(--px-ink); }
		& .iaum-tab:focus-visible { outline: 3px solid var(--px-ink); outline-offset: -3px; }

		/* เว้นที่ท้ายหน้าให้แถบ · ปุ่มลอย "เทียบรุ่น" ยกขึ้นเหนือแถบ */
		& body.iaum { padding-bottom: calc(74px + env(safe-area-inset-bottom, 0px)); }
		& .iaum-cmp-fab { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }

		/* ด้านบนเหลือแถวเดียว */
		& .iaum-chips, & .iaum-burger { display: none; }

		/* พิมพ์ (คีย์บอร์ดขึ้น) → ซ่อนแถบ ไม่ให้ลอยทับช่องกรอก */
		& body:has(input:focus, textarea:focus, select:focus) .iaum-tabbar { display: none; }
		& body:has(input:focus, textarea:focus, select:focus) { padding-bottom: 0; }
	}
}
@media print { .iaum-tabbar { display: none !important; } }

/* ============================================================
   หน้ารายการสเปก APS (/product-cat/… · /all/ · /brand/…) — ภาษา 8-bit
   JoJho 12 ต.ค. 2026: "redesign ตรงนี้ใหม่ ให้เข้ากับ 8 bit"
   - แตะแค่ CSS (ไม่แก้ไฟล์ปลั๊กอิน) → อัปเดต APS ต่อไปไม่ทับ
   - โครงกริดการ์ดเดิม (สูงเท่ากัน · clamp ชื่อ 2 บรรทัด) อยู่ใน style.css — ที่นี่เปลี่ยนแค่หน้าตา
   - การ์ด = ตลับเกม: กรอบหมึก 4px + เงาแข็ง + แถบสีด้านบน 4 สีโลโก้วนกัน
   - ราคามี "฿" (ไม่มีในฟอนต์พิกเซล) → ใช้ Kanit ไม่ใช่ Press Start 2P
   ============================================================ */
:root[data-iaum-skin="8bit"] {
	/* breadcrumb + หัวเรื่อง */
	& .apscrumbs { font-size: 13px; }
	& .apscrumbs a { color: var(--px-ink); font-weight: 600; }
	& h1.aps-main-title {
		display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
		font-family: var(--iaum-sans); font-weight: 800; font-size: clamp(30px, 3.4vw, 42px); line-height: 1.15;
		padding-bottom: 14px; margin-bottom: 22px; border-bottom: 4px solid var(--px-ink);
	}
	& h1.aps-main-title::before {
		content: "SPEC"; font-family: var(--px-pixel); font-size: 11px; line-height: 1;
		padding: 7px 9px; background: var(--px-ink); color: #fff;
	}

	/* ปุ่มมุมมอง กริด/รายการ + dropdown เรียง/หมวด */
	& .aps-display-controls span { font-weight: 700; line-height: 40px; }
	& .aps-display-controls ul li a {
		display: grid; place-items: center; width: 40px; height: 40px; padding: 0;
		background: #fff; color: var(--px-ink); border: 3px solid var(--px-ink); border-radius: 0;
	}
	& .aps-display-controls ul li a.selected { background: var(--iaum-yellow); color: var(--px-ink); box-shadow: 3px 3px 0 var(--px-ink); }
	& .aps-current-dp {
		height: 40px; display: flex; align-items: center; padding: 0 38px 0 12px;
		font-family: var(--iaum-sans); font-size: 14px; font-weight: 700; color: var(--px-ink);
		background: #fff; border: 3px solid var(--px-ink); border-radius: 0; box-shadow: 3px 3px 0 var(--px-ink);
	}
	& .aps-dropdown:hover .aps-current-dp { background: var(--iaum-yellow); color: var(--px-ink); }
	& .aps-select-icon { top: 9px; right: 9px; color: var(--px-ink); }
	& .aps-dropdown:hover .aps-select-icon { color: var(--px-ink); }
	& .aps-dropdown ul { border: 3px solid var(--px-ink); border-top: 0; border-radius: 0; box-shadow: 4px 4px 0 var(--px-ink); min-width: 100%; }
	& .aps-dropdown ul li { border-bottom: 2px solid var(--px-paper); }
	& .aps-dropdown ul li a { display: block; padding: 10px 12px; font-weight: 600; color: var(--px-ink); }
	& .aps-dropdown ul li a:hover { background: var(--iaum-yellow); }

	/* การ์ดสินค้า */
	& .aps-products .aps-product-box {
		border: 4px solid var(--px-ink); border-radius: 0;
		box-shadow: var(--px-shadow); background: #fff;
		transition: transform .08s steps(2), box-shadow .08s steps(2);
	}
	/* แถบสีบนการ์ด = แถบแยก (::before) — ถ้าใช้ border-top หนา มุมจะเฉียงตรงที่ชนขอบข้าง */
	& .aps-products .aps-product-box::before {
		content: ""; display: block; flex: none; height: 12px;
		background: var(--px-bar, var(--iaum-green)); border-bottom: 4px solid var(--px-ink);
	}
	& .aps-products > li:nth-child(4n+1) { --px-bar: var(--iaum-green); }
	& .aps-products > li:nth-child(4n+2) { --px-bar: #1c8fb8; }
	& .aps-products > li:nth-child(4n+3) { --px-bar: var(--iaum-red); }
	& .aps-products > li:nth-child(4n+4) { --px-bar: #e0a800; }
	& .aps-products-grid .aps-product-box:hover { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 var(--px-ink); }
	/* ปลั๊กอินใส่กรอบขาว 5px รอบรูป → รูปเต็มกรอบแบบภาพในตลับเกม */
	& .aps-products .aps-product-thumb {
		border: 0 !important; border-bottom: 4px solid var(--px-ink) !important; padding: 0 !important;
		background: var(--px-paper);
	}
	& .aps-products .aps-product-thumb a { margin: 0 !important; width: 100%; }
	/* 🔴 ปลั๊กอินใส่ padding-bottom 5px ให้ชื่อ → line-clamp รั่วบรรทัดที่ 3 (ขีด "-" ใต้ชื่อ OPPO) */
	& .aps-products .aps-product-title { font-family: var(--iaum-sans); font-weight: 700; font-size: 15px; padding: 0 !important; }
	& .aps-products .aps-product-title a { color: var(--px-ink); }
	& .aps-products .aps-product-price, & .aps-products .aps-price-value {
		font-family: var(--iaum-sans); font-weight: 800; font-size: 16px; color: #138a3e;
	}

	/* แถว "เพิ่มเพื่อเทียบ" — ติ๊กแล้วทั้งแถวเป็นเหลือง */
	& .aps-products .aps-item-buttons { background: var(--px-paper); border-top: 4px solid var(--px-ink); }
	& .aps-products .aps-compare-btn { min-height: 32px; font-weight: 700; color: var(--px-ink); cursor: pointer; }
	& .aps-compare-stat {
		width: 22px; height: 22px; display: inline-grid; place-items: center;
		background: #fff; border: 3px solid var(--px-ink) !important; border-radius: 0 !important; color: transparent;
	}
	& .aps-item-buttons:has(.aps-compare-cb:checked) { background: var(--iaum-yellow); }
	& .aps-compare-btn:has(.aps-compare-cb:checked) .aps-compare-stat { background: var(--px-ink) !important; color: var(--iaum-yellow) !important; }

	/* ไซด์บาร์ */
	& .aps-widget { margin-bottom: 30px; }
	& .aps-widget-title {
		font-family: var(--iaum-sans); font-weight: 800; font-size: 22px; color: var(--px-ink);
		padding-bottom: 10px; margin-bottom: 16px; border-bottom: 4px solid var(--px-ink);
	}
	& .aps-search-field { display: flex; }
	& .aps-search-field input.aps-search {
		flex: 1; height: 44px; border: 3px solid var(--px-ink); border-radius: 0; background: #fff; font-family: var(--iaum-sans);
	}
	& .aps-search-btn {
		display: grid; place-items: center; width: 44px; height: 44px; position: static;
		background: var(--iaum-yellow); color: var(--px-ink); border: 3px solid var(--px-ink); border-left: 0; border-radius: 0;
	}
	& .aps-brands-list li a {
		display: block; background: #fff; border: 3px solid var(--px-ink); border-radius: 0; box-shadow: 3px 3px 0 var(--px-ink);
		transition: transform .08s steps(2), box-shadow .08s steps(2);
	}
	& .aps-brands-list li a:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--px-ink); }
	& .aps-brands-load {
		display: block; margin-top: 12px; padding: 10px; text-align: center; cursor: pointer;
		font-family: var(--iaum-sans); font-weight: 700; color: var(--px-ink);
		background: #fff; border: 3px solid var(--px-ink); box-shadow: 3px 3px 0 var(--px-ink);
	}
	& .aps-brands-load:hover { background: var(--iaum-yellow); }
	& .aps-wd-products > li { border-top: 2px dashed rgba(20,22,28,.25); }
	& .aps-wd-products .aps-wd-thumb { border-radius: 0; border: 3px solid var(--px-ink); }
	& .aps-wd-products .aps-wd-title { font-weight: 700; color: var(--px-ink); }
	& .aps-wd-products .aps-wd-price { font-family: var(--iaum-sans); font-weight: 800; color: #138a3e; }
	& .aps-wd-products > li > a:hover .aps-wd-title { color: var(--px-ink); text-decoration: underline; text-decoration-thickness: 2px; }

	/* เลขหน้า */
	& .aps-pagination .page-numbers {
		display: inline-grid; place-items: center; min-width: 42px; height: 42px; padding: 0 10px; margin: 0 6px 6px 0;
		font-family: var(--iaum-sans); font-weight: 700; color: var(--px-ink);
		background: #fff; border: 3px solid var(--px-ink); border-radius: 0;
	}
	& .aps-pagination .page-numbers.current { background: var(--iaum-yellow); box-shadow: 3px 3px 0 var(--px-ink); }
	& .aps-pagination a.page-numbers:hover { background: var(--iaum-yellow); color: var(--px-ink); box-shadow: 3px 3px 0 var(--px-ink); }
}
@media (max-width: 620px) {
	:root[data-iaum-skin="8bit"] {
		& .aps-products .aps-product-box { border-width: 3px; box-shadow: 4px 4px 0 var(--px-ink); }
		& .aps-products .aps-product-box::before { height: 10px; border-bottom-width: 3px; }
		& .aps-products .aps-product-thumb { border-bottom-width: 3px !important; }
		& .aps-products .aps-product-title { font-size: 13.5px; }
		& .aps-products .aps-product-price, & .aps-products .aps-price-value { font-size: 14px; }
	}
}

/* แถวปุ่มควบคุม (Display + dropdown เรียง/ยี่ห้อ/หมวด) — JoJho 12 ต.ค. 2026: "มันตกบรรทัด" (หน้า /all/)
   ปลั๊กอินล็อก dropdown กว้าง 210px + float + margin 20px → 3 ตัว + Display = 842px > คอลัมน์ 799px
   ⇒ flex: Display ขนาดตามเนื้อหา · dropdown แบ่งที่ที่เหลือเท่า ๆ กัน (ขั้นต่ำ 150px) → desktop แถวเดียว / มือถือ 2 ต่อแถว */
:root[data-iaum-skin="8bit"] {
	& .aps-column:has(> .aps-display-controls) {
		display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
		float: none; width: 100%; margin-bottom: 22px;
	}
	& .aps-column:has(> .aps-display-controls)::before,
	& .aps-column:has(> .aps-display-controls)::after { display: none; }
	& .aps-column > .aps-display-controls { flex: none; float: none; margin: 0; padding: 0; display: flex; align-items: center; }
	& .aps-column > .aps-display-controls ul { display: flex; gap: 8px; margin: 0; }
	& .aps-column > .aps-display-controls ul li { margin: 0; }
	& .aps-column > .aps-dropdown { flex: 1 1 0; min-width: 150px; max-width: 320px; float: none; margin: 0; }
	& .aps-column > .aps-dropdown .aps-current-dp,
	& .aps-column > .aps-dropdown ul { width: 100%; box-sizing: border-box; }
	/* text-overflow ไม่ทำงานกับ display:flex (ข้อความเป็น text node) → block + line-height · เว้นขวา 38px ให้ลูกศร (JoJho เห็น "Date (default)" ทับลูกศร) */
	& .aps-column > .aps-dropdown .aps-current-dp { display: block; float: none; line-height: 34px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
}
@media (max-width: 620px) {
	/* มือถือ: ตัดคำว่า "Display:" (ปุ่มกริด/รายการยังอยู่) → ปุ่ม + dropdown เรียง อยู่แถวเดียวกัน · ยี่ห้อ/หมวด แถวถัดไป 50/50 */
	:root[data-iaum-skin="8bit"] .aps-column > .aps-display-controls > span { display: none; }
	:root[data-iaum-skin="8bit"] .aps-column > .aps-dropdown { flex-basis: calc(50% - 6px); min-width: 120px; max-width: none; }
	:root[data-iaum-skin="8bit"] .aps-column > .aps-sort-controls { flex: 1 1 calc(100% - 112px); }
}

/* ซ่อนตัวเลือก "หมวด" ของ APS ไปก่อน — JoJho 12 ต.ค. 2026: "เอาแค่มือถือ และซ่อน Categories ไปก่อน"
   ตอนนี้มีแค่ มือถือ (18) + หูฟังไร้สาย (1 · ยังไม่มีโครงสเปกของหูฟัง) → dropdown หมวดไม่มีประโยชน์
   ปลั๊กอินใช้ class ต่างกันต่อหน้า (/all/ = .aps-cats-controls · /product-cat/ = .aps-brands-controls)
   ⇒ ซ่อนจาก "ลิงก์ข้างใน": dropdown ที่ลิงก์ไป /product-cat/ = ตัวเลือกหมวดเสมอ
   เปิดกลับ: ลบบล็อกนี้ เมื่อมีหมวดที่ 2 ที่มีโครงสเปกของตัวเอง (เช่น แท็บเล็ต) */
:root[data-iaum-skin="8bit"] .aps-column > .aps-dropdown:not(.aps-sort-controls):has(a[href*="/product-cat/"]) { display: none; }  /* ยกเว้นปุ่มเรียง — ลิงก์ ?sort= ก็อยู่ใต้ /product-cat/ */

/* กล่อง "ภาพรวม" หน้าสเปก (inc/spec-overview.php · 12 ต.ค. 2026) — วันเปิดตัว / วันวางจำหน่าย / ราคาเปิดตัว */
:root[data-iaum-skin="8bit"] .iaum-spec-overview {
	clear: both;   /* รูป + 6 ช่องเด่นด้านบนเป็น float — ไม่ clear กล่องจะไปซ้อนข้างหลัง */
	margin: 24px 0 28px; padding: 18px 20px 6px;
	background: #fff; border: 3px solid var(--px-ink); box-shadow: var(--px-shadow);
	font-family: var(--iaum-sans);
}
:root[data-iaum-skin="8bit"] .iaum-spec-overview__title {
	margin: 0 0 6px; font-size: 20px; font-weight: 700; color: var(--px-ink); line-height: 1.3;
}
:root[data-iaum-skin="8bit"] .iaum-spec-overview__list { margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 24px; }
:root[data-iaum-skin="8bit"] .iaum-spec-overview__row { padding: 12px 0 14px; border-top: 2px dashed rgba(20, 22, 28, .18); }
:root[data-iaum-skin="8bit"] .iaum-spec-overview__row dt { margin: 0 0 2px; font-size: 14px; color: #5b5f6b; font-weight: 400; }
:root[data-iaum-skin="8bit"] .iaum-spec-overview__row dd { margin: 0; font-size: 18px; font-weight: 600; color: var(--px-ink); }
:root[data-iaum-skin="8bit"] .iaum-spec-overview__row.is-na dd { color: #9a9ea8; font-weight: 400; }
@media (max-width: 767px) {
	:root[data-iaum-skin="8bit"] .iaum-spec-overview { padding: 14px 16px 4px; }
	:root[data-iaum-skin="8bit"] .iaum-spec-overview__list { grid-template-columns: 1fr; }
	:root[data-iaum-skin="8bit"] .iaum-spec-overview__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 11px 0; }
	:root[data-iaum-skin="8bit"] .iaum-spec-overview__row dd { font-size: 16px; text-align: right; }
}

/* วิดเจ็ตยี่ห้อ: 5 คอลัมน์ (เดิม 3 · โลโก้ใหญ่เกินบนมือถือ) — คู่กับ filter widget_display_callback (10 โลโก้ = 5×2) */
:root[data-iaum-skin="8bit"] .aps-brands-list.aps-brands-v-grid-logo {
	display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none;
}
:root[data-iaum-skin="8bit"] .aps-brands-list.aps-brands-v-grid-logo::before,
:root[data-iaum-skin="8bit"] .aps-brands-list.aps-brands-v-grid-logo::after { content: none; }
:root[data-iaum-skin="8bit"] .aps-brands-list.aps-brands-v-grid-logo li { float: none; width: auto; padding: 0; min-width: 0; list-style: none; }
:root[data-iaum-skin="8bit"] .aps-brands-list.aps-brands-v-grid-logo li::marker { content: none; }
:root[data-iaum-skin="8bit"] .aps-brands-list.aps-brands-v-grid-logo li a { padding: 3px; border-width: 2px; box-shadow: 2px 2px 0 var(--px-ink); }
:root[data-iaum-skin="8bit"] .aps-brands-list.aps-brands-v-grid-logo li a:hover { box-shadow: 4px 4px 0 var(--px-ink); }

/* "รอประกาศราคา" (inc/spec-no-price.php) — แทนราคาสีเขียว เมื่อยังไม่มีราคาไทย */
:root[data-iaum-skin="8bit"] .iaum-no-price {
	color: #6b6f7a; font-family: var(--iaum-sans); font-weight: 600; font-size: .78em; letter-spacing: 0;
}

/* "วิเคราะห์จากสเปก (AI)" (inc/spec-analysis.php · 14 ต.ค. 2026) — ตามตัวอย่าง claude.ai/artifact/RUS2sEBSy2kZicS7Q4bCrm */
:root[data-iaum-skin="8bit"] .iaum-sa {
	clear: both; margin: 0 0 28px; background: #fff; border: 3px solid var(--px-ink); box-shadow: var(--px-shadow);
	font-family: var(--iaum-sans); color: var(--px-ink);
	--sa-g1: #a8d5b5; --sa-g2: #5fb37a; --sa-g3: #1f8f4a; --sa-g4: #0b5e2e; --sa-cell: #e6e1d2;   /* เขียวอ่อน→เข้ม (JoJho: ไม่เอาแดง/เหลือง) */
}
:root[data-iaum-skin="8bit"] .iaum-sa__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 18px; background: var(--iaum-yellow, #ffc20e); border-bottom: 3px solid var(--px-ink); }
:root[data-iaum-skin="8bit"] .iaum-sa__head h2 { margin: 0; font-size: 20px; font-weight: 800; line-height: 1.3; color: var(--px-ink); }
:root[data-iaum-skin="8bit"] .iaum-sa__ai { font: 9px var(--px-pixel); background: var(--px-ink); color: var(--iaum-yellow, #ffc20e); padding: 6px 7px 5px; }
:root[data-iaum-skin="8bit"] .iaum-sa__seg { margin-left: auto; font-size: 13px; font-weight: 600; }
:root[data-iaum-skin="8bit"] .iaum-sa__disc { margin: 0; padding: 9px 18px; font-size: 13px; color: #5b5f6b; border-bottom: 2px dashed rgba(20, 22, 28, .18); }
:root[data-iaum-skin="8bit"] .iaum-sa__row { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 6px 14px; align-items: center; padding: 11px 18px; border-bottom: 2px dashed rgba(20, 22, 28, .12); }
:root[data-iaum-skin="8bit"] .iaum-sa__row.is-g1 { --c: var(--sa-g1); }
:root[data-iaum-skin="8bit"] .iaum-sa__row.is-g2 { --c: var(--sa-g2); }
:root[data-iaum-skin="8bit"] .iaum-sa__row.is-g3 { --c: var(--sa-g3); }
:root[data-iaum-skin="8bit"] .iaum-sa__row.is-g4 { --c: var(--sa-g4); }
:root[data-iaum-skin="8bit"] .iaum-sa__k { font-weight: 700; }
:root[data-iaum-skin="8bit"] .iaum-sa__cells { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; height: 16px; }
:root[data-iaum-skin="8bit"] .iaum-sa__cells i { background: var(--sa-cell); }
:root[data-iaum-skin="8bit"] .iaum-sa__cells i.on { background: var(--c); }
:root[data-iaum-skin="8bit"] .iaum-sa__cells i.half { background: linear-gradient(90deg, var(--c) 50%, var(--sa-cell) 50%); }
:root[data-iaum-skin="8bit"] .iaum-sa__row p { grid-column: 2 / -1; margin: 0; font-size: 14px; line-height: 1.55; color: #2b2f38; }
@media (max-width: 640px) {
	:root[data-iaum-skin="8bit"] .iaum-sa__row { grid-template-columns: 88px minmax(0, 1fr); padding: 11px 14px; }
	:root[data-iaum-skin="8bit"] .iaum-sa__row p { grid-column: 1 / -1; }
	:root[data-iaum-skin="8bit"] .iaum-sa__seg { margin-left: 0; flex-basis: 100%; }
}

/* คลิปรีวิวหน้าสเปก — เต็มกว้าง container · กดเล่นในที่ (inc/spec-videos.php · v1.4.28 · 16 ต.ค. 2026) */
:root[data-iaum-skin="8bit"] .iaum-vids { display: grid; gap: 24px; margin: 0 0 28px; }
:root[data-iaum-skin="8bit"] .iaum-vid { margin: 0; background: #fff; border: 3px solid var(--px-ink); box-shadow: var(--px-shadow); }
:root[data-iaum-skin="8bit"] .iaum-vid__btn,
:root[data-iaum-skin="8bit"] .iaum-vid__frame { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; margin: 0; padding: 0; border: 0; background: #000; cursor: pointer; }
:root[data-iaum-skin="8bit"] .iaum-vid__btn img { display: block; width: 100%; height: 100%; object-fit: cover; }
:root[data-iaum-skin="8bit"] .iaum-vid__play { position: absolute; left: 50%; top: 50%; width: 76px; height: 54px; transform: translate(-50%, -50%); background: #e62117; border: 3px solid var(--px-ink); box-shadow: 4px 4px 0 var(--px-ink); transition: transform .12s; }
:root[data-iaum-skin="8bit"] .iaum-vid__play::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-35%, -50%); border-style: solid; border-width: 11px 0 11px 18px; border-color: transparent transparent transparent #fff; }
:root[data-iaum-skin="8bit"] .iaum-vid__btn:hover .iaum-vid__play,
:root[data-iaum-skin="8bit"] .iaum-vid__btn:focus-visible .iaum-vid__play { transform: translate(-50%, -50%) scale(1.08); }
:root[data-iaum-skin="8bit"] .iaum-vid__btn:focus-visible { outline: 3px solid var(--iaum-yellow, #ffc20e); outline-offset: -3px; }
:root[data-iaum-skin="8bit"] .iaum-vid figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 12px 16px; border-top: 3px solid var(--px-ink); font: 600 15px/1.45 var(--iaum-sans); color: var(--px-ink); }
:root[data-iaum-skin="8bit"] .iaum-vid figcaption span { flex: 1 1 260px; }
:root[data-iaum-skin="8bit"] .iaum-vid figcaption a { display: inline-flex; align-items: center; min-height: 40px; font-weight: 700; color: #c4302b; text-decoration: none; white-space: nowrap; }
:root[data-iaum-skin="8bit"] .iaum-vid figcaption a:hover { text-decoration: underline; }
@media (max-width: 600px) {
	:root[data-iaum-skin="8bit"] .iaum-vid__play { width: 60px; height: 42px; }
	:root[data-iaum-skin="8bit"] .iaum-vid figcaption { font-size: 14px; padding: 10px 12px; }
}
/* Shorts — การ์ดแนวตั้ง 9:16 เรียงเป็นแถวใต้คลิปยาว (v1.4.29) */
:root[data-iaum-skin="8bit"] .iaum-shorts__h { margin: 0 0 12px; font: 800 20px/1.3 var(--iaum-sans); color: var(--px-ink); }
:root[data-iaum-skin="8bit"] .iaum-shorts { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 18px; margin: 0 0 28px; }
:root[data-iaum-skin="8bit"] .iaum-vid.is-short .iaum-vid__btn,
:root[data-iaum-skin="8bit"] .iaum-vid.is-short .iaum-vid__frame { aspect-ratio: 9 / 16; }
:root[data-iaum-skin="8bit"] .iaum-vid.is-short .iaum-vid__play { width: 54px; height: 38px; }
:root[data-iaum-skin="8bit"] .iaum-vid.is-short .iaum-vid__play::after { border-width: 8px 0 8px 13px; }
:root[data-iaum-skin="8bit"] .iaum-vid.is-short figcaption { flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px; font-size: 14px; }
:root[data-iaum-skin="8bit"] .iaum-vid.is-short figcaption span { flex: none; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
:root[data-iaum-skin="8bit"] .iaum-vid.is-short figcaption a { min-height: 32px; font-size: 13px; }
/* มือถือ: Shorts = carousel ปัดซ้าย-ขวา (scroll-snap) · โชว์ใบถัดไปโผล่ขอบให้รู้ว่าปัดได้ · JoJho 16 ต.ค. (v1.4.30) */
@media (max-width: 600px) {
	:root[data-iaum-skin="8bit"] .iaum-shorts { display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
		margin: 0 -10px 24px; padding: 0 10px 12px; scroll-padding: 0 10px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
	:root[data-iaum-skin="8bit"] .iaum-shorts::-webkit-scrollbar { display: none; }
	:root[data-iaum-skin="8bit"] .iaum-shorts > .iaum-vid { flex: 0 0 62%; scroll-snap-align: start; }
	:root[data-iaum-skin="8bit"] .iaum-shorts > .iaum-vid:only-child { flex-basis: 70%; }
}

/* วิดเจ็ตยี่ห้อ: โชว์ทุกยี่ห้อ ไม่มีปุ่ม "Show More Brands" (ปลั๊กอินพิมพ์ปุ่มเสมอ) · v1.4.32 · 16 ต.ค. 2026 */
.aps-brands-load { display: none !important; }

/* หน้ายี่ห้อ (/brand/<slug>/): ไม่แสดงโลโก้ข้างหัวข้อ — JoJho 16 ต.ค. 2026 "ไม่ต้องแสดง logo" (v1.4.34) */
.tax-aps-brands .aps-main-title > img { display: none; }

/* ---------- หน้าแบรนด์ (/brands/): ล่าสุดของแต่ละแบรนด์ (JoJho 26 ต.ค. 2026 · แทนรายการ "บทความล่าสุด" 4 เรื่องที่ดูเหมือนถูกตัด) ---------- */
.iaum-brandbox-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.iaum-brandbox { background: #fff; border: 4px solid var(--px-ink); box-shadow: var(--px-shadow); display: flex; flex-direction: column; }
.iaum-brandbox__h {
	display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px;
	padding: 8px 14px; background: var(--px-ink); color: #fff !important; font-weight: 800; font-size: 18px;
}
.iaum-brandbox__h span { font-size: 13px; font-weight: 600; color: var(--iaum-yellow); white-space: nowrap; }
.iaum-brandbox__h:hover span { text-decoration: underline; }
.iaum-brandbox ul { list-style: none; margin: 0; padding: 4px 14px 10px; }
/* แถว = รูปเล็กซ้าย (96x72 · 4:3 แบบรูปบทความ) + หัวข้อ/วันที่ขวา (thumbnail เล็ก · JoJho 26 ต.ค.) */
.iaum-brandbox li {
	padding: 10px 0; border-bottom: 2px dashed #d8d2c4;
	display: grid; grid-template-columns: 96px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; row-gap: 3px; align-items: start;
}
.iaum-brandbox li:last-child { border-bottom: 0; }
.iaum-brandbox__img { grid-row: 1 / 3; display: block; width: 96px; aspect-ratio: 4 / 3; overflow: hidden; border: 2px solid var(--px-ink); background: #f4efe3; }
.iaum-brandbox__img img, .iaum-brandbox__img .iaum-ph { width: 100%; height: 100%; object-fit: cover; display: block; }
.iaum-brandbox__t { font-weight: 600; font-size: 14.5px; line-height: 1.42; color: var(--px-ink);
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.iaum-brandbox__t:hover { text-decoration: underline; }
.iaum-brandbox .iaum-meta { font-size: 12px; }
@media (max-width: 1024px) { .iaum-brandbox-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px)  { .iaum-brandbox-grid { grid-template-columns: 1fr; gap: 18px; } }
.iaum-brands-hub__lbl { margin: 26px 0 10px; font-weight: 800; font-size: 16px; }   /* หัวแถว "ซีรีส์ & ประเภทสินค้า" หน้า /brands/ (26 ต.ค. 2026) */

/* ---------- AdSense ในบทความ (inc/ads.php · 1 พ.ย. 2026) — ป้าย "โฆษณา" + เว้นระยะไม่ชิดเนื้อหา · กล่องตัวอย่าง ?iaum_ads=preview ---------- */
.iaum-ad { margin: 28px auto; text-align: center; min-height: 100px; clear: both; }
.iaum-ad__lbl { display: block; margin-bottom: 6px; font-size: 11px; letter-spacing: .08em; color: #8a8579; }
.iaum-ad--preview { display: flex; align-items: center; justify-content: center; min-height: 250px; border: 3px dashed #c9c1ad; background: repeating-linear-gradient(45deg, #fbf7ee 0 12px, #f4eedf 12px 24px); }
.iaum-ad--preview span { font-family: var(--px-pixel, monospace); font-size: 11px; color: #6b665a; }
.iaum-ad--top.iaum-ad--preview, .iaum-ad--bottom.iaum-ad--preview { min-height: 120px; }

/* ---------- a11y contrast (Lighthouse 3 พ.ย. 2026) ----------
   ปุ่ม Store: style.css บังคับตัวอักษรขาวบนพื้นเหลือง (1.6:1) → ดำบนเหลือง · hover คงพื้นเหลือง (ขยับแบบ 8-bit แทนเปลี่ยนสี)
   ป้าย "โฆษณา" #8a8579 → #6b665a */
body.iaum a.iaum-btn-store, body.iaum a.iaum-btn-store:hover { color: var(--px-ink, #14161c) !important; background: var(--iaum-yellow); }
.iaum-ad__lbl { color: #6b665a; }
/* ทั้งเว็บ — สแกน contrast ทุกหน้าหลัก (หน้าแรก · บทความ · สเปก · /all/ · หมวด) ให้ ≥ 4.5:1 */
body.iaum { --iaum-ink-4: #6b7280; }                                   /* วันที่/meta เทาอ่อน #a1a8b0 (2.4) → 4.8 */
body.iaum .iaum-footer { --iaum-ink-4: #a1a8b0; }                      /* footer พื้นกรมท่า → คงเทาอ่อน (7:1) */
body.iaum .px-tag--r, body.iaum .px-title__now .px-tag { background: #cf2e25; }            /* NOW PLAYING / NEW ITEM 4.3 → 5.2 */
body.iaum .px-tag--g { background: #007f3b; }                                     /* RACE 3.1 → 5.1 */
body.iaum .px-boss h2 { color: #fff; }                                  /* หัวข้อในกล่องดำถูกสีเทาทับ (2.4) */
body.iaum .px-boss__p:last-child { color: #ff6b61; }                              /* P2 แดงบนดำ 4.2 → 6+ (ขอบคงสีแดงเดิม) */
.iaum-subnav .n, .iaum-brands .n, .iaum-brands-hub .n { opacity: .75; }
body.iaum .iaum-subnav a.is-active .n { opacity: 1; }                   /* ตัวเลขบนชิปเหลือง 3.8 → 11 */
body.iaum .iaum-pag .page-numbers.current { color: var(--px-ink, #14161c); }  /* เลขหน้าขาวบนเหลือง 1.6 */
/* APS (หน้าสเปก / /all/) */
body.iaum .aps-attr-title strong.aps-term, body.iaum .aps-1co { color: #5e5f61; }
body.iaum .aps-rd-price, body.iaum .aps-price-value { color: #16702f !important; }
/* CookieYes ปุ่ม "ยอมรับทั้งหมด" (ปลั๊กอินใส่สีเขียว #61a229 = 3.1) */
#cookie-law-info-bar .wt-cli-accept-all-btn, .cli-modal .wt-cli-accept-all-btn { background-color: #007f3b !important; color: #fff !important; }
/* WP Rocket "Automatic Lazy Rendering" ใส่ [data-wpr-lazyrender]{content-visibility:auto} ให้ section ใต้จอแรก
   → กล่องพื้นเข้ม (BOSS VS · footer) ตอนยังไม่ render ถูก axe/Lighthouse อ่านพื้นเป็นสีครีมของหน้า = contrast ตก (3 พ.ย. 2026)
   ยกเว้นเฉพาะ 2 กล่องพื้นเข้ม · section อื่นยัง lazy render ได้ตามเดิม */
body.iaum .px-boss[data-wpr-lazyrender], body.iaum .iaum-footer[data-wpr-lazyrender] { content-visibility: visible !important; }

/* คำทับศัพท์ไทยห้ามขาดกลางคำ (inc/thai-nobr.php · 3 พ.ย. 2026) */
.nobr { white-space: nowrap; }