/*
Theme Name: IAUMReview
Theme URI: https://www.iaumreview.com
Author: JoJhoAI
Author URI: https://jojho.ai
Description: ธีมเว็บ IAUMReview — รีวิวมือถือ แกดเจ็ต EV และไอทีไลฟ์สไตล์ · child theme บนฐาน Hello Elementor · IA 7 หมวด · รองรับ embed คลิป YouTube + content-to-commerce + schema (Review/VideoObject/Product/Breadcrumb) · by JoJhoAI
Template: hello-elementor
Version: 1.4.55
Requires at least: 6.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
Text Domain: iaumreview
*/

/* =========================================================
   Design tokens — ถอดจาก Claude Design (IAUMReview Home.dc)
   ========================================================= */
:root {
  --iaum-bg:        #fdfdfd;
  --iaum-surface:   #ffffff;
  --iaum-muted:     #f4f5f7;   /* บล็อกพื้นเทา (เช็คเครื่อง / ไลฟ์สไตล์) */
  --iaum-chip:      #f1f2f4;   /* ชิปแบรนด์ / placeholder */
  --iaum-ink:       #1c1f24;   /* ตัวอักษรหลัก + พื้นดำ */
  --iaum-ink-2:     #6b7280;   /* ตัวอักษรรอง */
  --iaum-ink-3:     #9ca3af;   /* eyebrow / label */
  --iaum-ink-4:     #a1a8b0;   /* meta mono */
  --iaum-ink-5:     #b6bcc4;   /* ตัวเลขใน mega menu */
  --iaum-line:      rgba(0,0,0,0.08);
  --iaum-line-soft: rgba(0,0,0,0.06);
  --iaum-link:      #0a84ff;

  /* สีประจำหมวด */
  --iaum-green:     #00a94f;   --iaum-green-ink:  #2f7f57;
  --iaum-yellow:    #ffc20e;   --iaum-yellow-ink: #a37600;
  --iaum-blue:      #4cc3ef;   --iaum-blue-ink:   #1e6a8c;
  --iaum-red:       #e5342a;   --iaum-red-ink:    #c22b22;

  --iaum-wrap:      1280px;
  --iaum-gutter:    28px;
  --iaum-header-h:  60px;

  /* ฟอนต์ทั้งเว็บอยู่ที่ตัวแปรนี้ตัวเดียว — สวิตช์เทียบฟอนต์เขียนทับที่ :root
     🔴 ห้ามย้ายไปนิยามที่ body: custom property ที่ตั้งบน body จะบังค่าที่ inherit
        มาจาก html ทำให้สวิตช์ไม่มีผล (playbooks/font-switcher.md กับดัก #1) */
  --iaum-sans: "Google Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --iaum-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* =========================================================
   Base
   ========================================================= */
html { -webkit-text-size-adjust: 100%; }
body.iaum {
  margin: 0;
  background: var(--iaum-bg);
  color: var(--iaum-ink);
  font-family: var(--iaum-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
body.iaum * { box-sizing: border-box; }
body.iaum a { color: inherit; text-decoration: none; }
body.iaum a:hover { color: var(--iaum-link); }
body.iaum img { max-width: 100%; height: auto; }
body.iaum ::selection { background: #ffe17a; }
.iaum-wrap { max-width: var(--iaum-wrap); margin: 0 auto; padding-left: var(--iaum-gutter); padding-right: var(--iaum-gutter); }
.iaum-scroll::-webkit-scrollbar { height: 0; width: 0; }
.iaum-scroll { scrollbar-width: none; }
.screen-reader-text { position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap; }

/* eyebrow / meta แบบ mono */
.iaum-eyebrow {
  font-family: var(--iaum-mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--iaum-ink-3); display: inline-block;
}
.iaum-meta { font-family: var(--iaum-mono); font-size: 11.5px; color: var(--iaum-ink-4); }
.c-green  { color: var(--iaum-green); }  .c-green-ink  { color: var(--iaum-green-ink); }
.c-yellow { color: var(--iaum-yellow-ink); }
.c-blue   { color: var(--iaum-blue-ink); }
.c-red    { color: var(--iaum-red-ink); }

/* placeholder ลายทแยง (ใช้เมื่อบทความไม่มีรูป) */
.iaum-ph { display: grid; place-items: center; background-color: var(--iaum-chip);
  background-image: repeating-linear-gradient(45deg, rgba(0,0,0,.06) 0 9px, transparent 9px 18px); }
.iaum-ph span { font-family: var(--iaum-mono); font-size: 10.5px; white-space: nowrap; color: #7a828c; }
.iaum-ph--green  { background-color:#e8f6ee; background-image: repeating-linear-gradient(45deg, rgba(0,169,79,.16) 0 9px, transparent 9px 18px); }
.iaum-ph--yellow { background-color:#fff6dd; background-image: repeating-linear-gradient(45deg, rgba(255,194,14,.26) 0 9px, transparent 9px 18px); }
.iaum-ph--blue   { background-color:#eaf6fd; background-image: repeating-linear-gradient(45deg, rgba(76,195,239,.28) 0 9px, transparent 9px 18px); }
.iaum-ph--red    { background-color:#fdecea; background-image: repeating-linear-gradient(45deg, rgba(229,52,42,.18) 0 9px, transparent 9px 18px); }
.iaum-thumb { display:block; width:100%; height:100%; object-fit: cover; }

/* =========================================================
   Header
   ========================================================= */
.iaum-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(253,253,253,.82);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--iaum-line-soft);
}
.iaum-header__bar { max-width: var(--iaum-wrap); margin: 0 auto; padding: 0 var(--iaum-gutter);
  height: var(--iaum-header-h); display: flex; align-items: center; gap: 28px; }
.iaum-logo { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; margin-right: 4px; }
body.iaum .iaum-logo img { height: 34px; width: auto; max-width: none; display: block; }
.iaum-logo__text { font-size: 19px; font-weight: 700; letter-spacing: -.03em; }

.iaum-nav { display: flex; align-items: center; gap: 2px; flex: 1 1 auto; }
.iaum-nav__item > a { padding: 8px 11px; font-size: 14px; font-weight: 500; border-radius: 8px; display: block; white-space: nowrap; }
.iaum-nav__item > a:hover, .iaum-nav__item.is-open > a { background: rgba(0,0,0,.05); color: inherit; }

.iaum-header__cta { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.iaum-btn-store { padding: 7px 15px; font-size: 13px; font-weight: 600; border-radius: 999px;
  background: var(--iaum-ink); color: #fff !important; white-space: nowrap; letter-spacing: .01em; }
.iaum-btn-store:hover { background: var(--iaum-red); color: #fff !important; }
.iaum-btn-search { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 999px;
  font-size: 14px; color: var(--iaum-ink-2); background: none; border: 0; cursor: pointer; }
.iaum-btn-search:hover { background: rgba(0,0,0,.05); }

/* mega menu */
.iaum-mega { position: absolute; left: 0; right: 0; top: var(--iaum-header-h); background: #fff;
  border-bottom: 1px solid var(--iaum-line-soft); box-shadow: 0 24px 48px -24px rgba(0,0,0,.18);
  display: none; }
.iaum-nav__item.is-open .iaum-mega { display: block; }
.iaum-mega__inner { max-width: var(--iaum-wrap); margin: 0 auto; padding: 26px var(--iaum-gutter) 30px;
  display: flex; gap: 56px; flex-wrap: wrap; }
.iaum-mega__col { min-width: 190px; }
.iaum-mega__head { font-family: var(--iaum-mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--iaum-ink-3); margin-bottom: 12px; }
.iaum-mega__list { display: flex; flex-direction: column; gap: 9px; }
.iaum-mega__list a { display: flex; align-items: baseline; gap: 8px; font-size: 14.5px; font-weight: 500; }
.iaum-mega__list a:hover { color: var(--iaum-link); }
.iaum-mega__list a span:first-child { white-space: nowrap; }
.iaum-mega__n { font-family: var(--iaum-mono); font-size: 11px; color: var(--iaum-ink-5); }

/* search overlay */
/* .iaum-search เดิม (แถบกางใต้เฮดเดอร์) ถูกแทนด้วย popup — ดูบล็อกท้ายไฟล์ */

/* mobile */
.iaum-burger { display: none; width: 34px; height: 34px; border: 0; border-radius: 999px;
  background: rgba(0,0,0,.05); cursor: pointer; padding: 0; place-items: center; }
.iaum-burger i { display: block; width: 15px; height: 1.6px; background: var(--iaum-ink); border-radius: 2px; margin: 3.5px auto; }
.iaum-chips { display: none; gap: 8px; overflow-x: auto; padding: 12px var(--iaum-gutter) 14px;
  border-bottom: 1px solid var(--iaum-line-soft); }
.iaum-chips a { padding: 7px 14px; border-radius: 999px; background: var(--iaum-chip);
  font-size: 13.5px; font-weight: 500; white-space: nowrap; }
.iaum-chips a.is-active { background: var(--iaum-ink); color: #fff; }

/* =========================================================
   Hero
   ========================================================= */
.iaum-hero { max-width: var(--iaum-wrap); margin: 0 auto; padding: 64px var(--iaum-gutter) 8px; }
.iaum-hero__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.iaum-bubble { position: relative; display: inline-block; background: #fff; border: 1.5px solid var(--iaum-ink);
  border-radius: 30px; padding: 26px 34px 28px; box-shadow: 6px 6px 0 rgba(28,31,36,.08); }
.iaum-bubble h1 { margin: 0; font-size: clamp(27px, 3.6vw, 46px); line-height: 1.26; letter-spacing: -.035em;
  font-weight: 700; max-width: 15ch; text-wrap: balance; }
.iaum-bubble__tail { position: absolute; left: 46px; bottom: -13px; width: 22px; height: 22px; background: #fff;
  border-right: 1.5px solid var(--iaum-ink); border-bottom: 1.5px solid var(--iaum-ink);
  transform: rotate(56deg) skewX(-12deg); border-radius: 0 0 5px 0; display: block; }
.iaum-hero__sig { margin: 22px 0 0 52px; font-family: var(--iaum-mono); font-size: 12px; letter-spacing: .1em; color: var(--iaum-ink-4); }
.iaum-hero__side { margin: 0 0 8px; max-width: 36ch; }
.iaum-hero__side p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--iaum-ink-2); }
.iaum-icons { display: flex; gap: 26px; align-items: flex-end; margin-bottom: 20px; opacity: .9; }
.iaum-icons span { display: block; position: relative; }
.iaum-icons i { position: absolute; display: block; border-color: #aab0b8; }

/* =========================================================
   Featured carousel
   ========================================================= */
.iaum-feat { padding: 30px 0 8px; }
.iaum-feat__track { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 4px var(--iaum-gutter) 26px; }
.iaum-feat__pad { flex: 0 0 auto; width: 8px; }
.iaum-card { flex: 0 0 auto; scroll-snap-align: center; border-radius: 24px; overflow: hidden; background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.05);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s; }
.iaum-card:hover { transform: translateY(-4px); box-shadow: 0 26px 48px -22px rgba(0,0,0,.28); color: inherit; }
.iaum-card--lead { width: min(560px, 78vw); }
.iaum-card--sub  { width: min(420px, 72vw); }
.iaum-card__img { aspect-ratio: 16 / 10; overflow: hidden; }
.iaum-card__body { padding: 20px 22px 24px; }
.iaum-card--lead .iaum-card__body { padding: 22px 24px 26px; }
.iaum-card h2 { margin: 10px 0 0; font-size: 22px; line-height: 1.25; letter-spacing: -.015em; font-weight: 600; text-wrap: pretty; }
.iaum-card--lead h2 { font-size: 28px; line-height: 1.2; letter-spacing: -.02em; }
.iaum-card p { margin: 10px 0 0; font-size: 14px; color: var(--iaum-ink-2); }
.iaum-card--lead p { margin-top: 12px; font-size: 14.5px; }

/* =========================================================
   เช็คเครื่อง (SEO engine)
   ========================================================= */
.iaum-check { max-width: var(--iaum-wrap); margin: 0 auto; padding: 44px var(--iaum-gutter) 8px; }
.iaum-check__box { border-radius: 28px; background: var(--iaum-muted); padding: 40px 40px 34px; }
.iaum-check__head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
  flex-wrap: wrap; margin-bottom: 26px; }
.iaum-check__head .iaum-eyebrow { letter-spacing: .16em; margin-bottom: 8px; display: block; }
.iaum-check__head h2 { margin: 0; font-size: clamp(26px, 3vw, 36px); line-height: 1.15; letter-spacing: -.028em; font-weight: 700; }
.iaum-check__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.iaum-check__card { background: #fff; border-radius: 18px; padding: 22px 22px 20px; display: flex;
  flex-direction: column; gap: 10px; transition: transform .25s ease; }
.iaum-check__card:hover { transform: translateY(-3px); color: inherit; }
.iaum-check__bar { width: 26px; height: 6px; border-radius: 99px; display: block; }
.iaum-check__card b { font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.iaum-check__card small { font-size: 14px; color: var(--iaum-ink-2); line-height: 1.5; }

/* =========================================================
   Section heading + รายการล่าสุด
   ========================================================= */
.iaum-sec { max-width: var(--iaum-wrap); margin: 0 auto; padding: 64px var(--iaum-gutter) 0; }
.iaum-sec__head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
  border-bottom: 1px solid var(--iaum-line); padding-bottom: 18px; margin-bottom: 26px; }
.iaum-sec__head h2 { margin: 0; font-size: clamp(24px, 2.6vw, 32px); letter-spacing: -.028em; font-weight: 700; }
.iaum-more { font-size: 14.5px; font-weight: 500; color: var(--iaum-link); white-space: nowrap; }

.iaum-row { display: grid; grid-template-columns: 260px minmax(0,1fr); gap: 28px; align-items: center;
  padding: 26px 0; border-bottom: 1px solid rgba(0,0,0,.07); }
.iaum-row:hover { background: rgba(0,0,0,.015); color: inherit; }
.iaum-row__img { aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; }
.iaum-row h3 { margin: 9px 0 0; font-size: 24px; line-height: 1.28; letter-spacing: -.018em; font-weight: 600; text-wrap: pretty; }
.iaum-row p { margin: 10px 0 0; font-size: 15px; line-height: 1.6; color: var(--iaum-ink-2); max-width: 62ch; }
.iaum-row .iaum-meta { margin-top: 12px; display: block; }
.iaum-loadmore { display: flex; justify-content: center; padding: 34px 0 0; }
.iaum-loadmore a { padding: 12px 26px; border-radius: 999px; border: 1px solid rgba(0,0,0,.14);
  font-size: 14.5px; font-weight: 500; white-space: nowrap; }
.iaum-loadmore a:hover { background: var(--iaum-ink); color: #fff; border-color: var(--iaum-ink); }

/* =========================================================
   กริดการ์ด (รีวิวตามหมวด / EV / ไลฟ์สไตล์)
   ========================================================= */
.iaum-grid { display: grid; gap: 22px; }
.iaum-grid--4 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.iaum-grid--3 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
/* 2 คอลัมน์ตายตัว — ใช้ repeat(2,1fr) ไม่ใช้ auto-fit
   เพราะ auto-fit + minmax จะยุบเหลือคอลัมน์เดียวทันทีที่กรอบแคบกว่า minmax*2 (ใน .iaum-single กว้าง 720px) */
.iaum-grid--2 { grid-template-columns: repeat(2, 1fr); }
.iaum-tile__img { aspect-ratio: 3 / 2; border-radius: 18px; overflow: hidden; margin-bottom: 14px; }
.iaum-tile--wide .iaum-tile__img { aspect-ratio: 16 / 9; }
.iaum-tile h3 { margin: 8px 0 0; font-size: 19px; line-height: 1.3; letter-spacing: -.012em; font-weight: 600; text-wrap: pretty; }
.iaum-tile--wide h3 { margin: 0; font-size: 20px; letter-spacing: -.014em; }
.iaum-tile:hover { opacity: .92; color: inherit; }

/* =========================================================
   สเปก CTA (dark)
   ========================================================= */
.iaum-spec { border-radius: 28px; background: var(--iaum-ink); color: #fff; padding: 44px 40px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 34px; align-items: center; }
.iaum-spec .iaum-eyebrow { color: var(--iaum-yellow); letter-spacing: .16em; margin-bottom: 12px; display: block; }
.iaum-spec h2 { margin: 0 0 14px; font-size: clamp(26px, 3vw, 38px); line-height: 1.12; letter-spacing: -.03em; font-weight: 700; }
.iaum-spec p { margin: 0 0 22px; font-size: 15.5px; line-height: 1.65; color: rgba(255,255,255,.72); max-width: 42ch; }
.iaum-spec__btn { display: inline-block; padding: 12px 24px; border-radius: 999px; background: #fff;
  color: var(--iaum-ink); font-size: 14.5px; font-weight: 600; white-space: nowrap; }
.iaum-spec__btn:hover { background: var(--iaum-yellow); color: var(--iaum-ink); }
.iaum-spec__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.iaum-spec__slot { background: rgba(255,255,255,.07); border-radius: 16px; padding: 20px;
  display: flex; flex-direction: column; gap: 12px; }
.iaum-spec__slot .box { aspect-ratio: 1 / 1; border-radius: 10px; overflow: hidden;
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.1) 0 8px, transparent 8px 16px);
  display: grid; place-items: center; }
.iaum-spec__slot span.n { font-size: 14px; font-weight: 500; }

/* =========================================================
   แถบพื้นเทา (ไลฟ์สไตล์)
   ========================================================= */
.iaum-band { padding: 76px 0 0; }
.iaum-band__inner { background: var(--iaum-muted); padding: 56px 0 60px; }
.iaum-band__head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: 28px; }
.iaum-band__head h2 { margin: 0; font-size: clamp(24px, 2.6vw, 32px); letter-spacing: -.028em; font-weight: 700; }
.iaum-band__head .iaum-eyebrow { letter-spacing: .16em; margin-bottom: 8px; display: block; }
.iaum-grid--life { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; }
.iaum-lcard { background: #fff; border-radius: 20px; overflow: hidden; display: block; transition: transform .25s ease; }
.iaum-lcard:hover { transform: translateY(-3px); color: inherit; }
.iaum-lcard__img { aspect-ratio: 4 / 3; overflow: hidden; }
.iaum-lcard__body { padding: 18px 18px 20px; }
.iaum-lcard h3 { margin: 8px 0 0; font-size: 17.5px; line-height: 1.32; font-weight: 600; text-wrap: pretty; }

/* =========================================================
   ชิปแบรนด์
   ========================================================= */
.iaum-brands { display: flex; flex-wrap: wrap; gap: 10px; }
.iaum-brands a { padding: 9px 16px; border-radius: 999px; background: var(--iaum-chip); font-size: 14px;
  font-weight: 500; display: flex; gap: 8px; align-items: baseline; }
.iaum-brands a:hover { background: var(--iaum-ink); color: #fff; }
.iaum-brands .n { font-family: var(--iaum-mono); font-size: 11px; opacity: .55; }

/* =========================================================
   Cover + ติดต่องาน
   ========================================================= */
.iaum-cover { max-width: var(--iaum-wrap); margin: 0 auto; padding: 72px var(--iaum-gutter) 0; }
.iaum-cover__frame { border-radius: 28px; overflow: hidden; background: #7fd3f5; }
.iaum-cover__frame img { width: 100%; height: auto; display: block; }
.iaum-cover__line { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; padding: 20px 4px 0; }
.iaum-cover__line span { font-size: 16px; color: var(--iaum-ink-2); }
.iaum-cover__line a { font-size: 16px; font-weight: 600; color: var(--iaum-link); white-space: nowrap; }

/* =========================================================
   Footer
   ========================================================= */
.iaum-footer { margin-top: 84px; border-top: 1px solid var(--iaum-line); background: var(--iaum-bg); }
.iaum-footer__cols { max-width: var(--iaum-wrap); margin: 0 auto; padding: 48px var(--iaum-gutter) 56px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 36px; }
body.iaum .iaum-footer__brand img { height: 52px; width: auto; max-width: none; display: block; margin-bottom: 18px; }
.iaum-footer__brand p { margin: 0; font-size: 14px; line-height: 1.65; color: var(--iaum-ink-2); max-width: 34ch; }
.iaum-footer__h { font-family: var(--iaum-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--iaum-ink-3); margin-bottom: 14px; }
.iaum-footer__list { display: flex; flex-direction: column; gap: 9px; font-size: 14px; }
.iaum-footer__bar { border-top: 1px solid var(--iaum-line-soft); }
.iaum-footer__bar div { max-width: var(--iaum-wrap); margin: 0 auto; padding: 18px var(--iaum-gutter) 26px;
  font-family: var(--iaum-mono); font-size: 11.5px; color: var(--iaum-ink-4); }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1024px) {
  .iaum-check__box { padding: 32px 26px 28px; }
  .iaum-spec { padding: 36px 28px; }
}
@media (max-width: 860px) {
  :root { --iaum-gutter: 18px; }
  .iaum-nav, .iaum-header__cta .iaum-btn-store { display: none; }
  .iaum-burger { display: grid; }
  .iaum-chips { display: flex; }
  .iaum-header__bar { gap: 14px; }
  .iaum-hero { padding-top: 22px; }
  .iaum-bubble { border-radius: 24px; padding: 18px 22px 20px; box-shadow: 5px 5px 0 rgba(28,31,36,.08); }
  .iaum-bubble h1 { font-size: 25px; line-height: 1.3; letter-spacing: -.03em; }
  .iaum-bubble__tail { left: 32px; bottom: -11px; width: 18px; height: 18px; border-radius: 0 0 4px 0; }
  .iaum-hero__sig { margin: 16px 0 0 36px; font-size: 11.5px; }
  .iaum-icons { transform: scale(.78); transform-origin: right bottom; gap: 9px; }
  .iaum-hero__side p { font-size: 14.5px; }
  .iaum-card--lead, .iaum-card--sub { width: 300px; border-radius: 20px; }
  .iaum-card__img { aspect-ratio: 3 / 1; }
  .iaum-card--lead h2, .iaum-card h2 { font-size: 19px; line-height: 1.28; letter-spacing: -.015em; }
  .iaum-card__body, .iaum-card--lead .iaum-card__body { padding: 16px 16px 18px; }
  .iaum-check__box { border-radius: 22px; padding: 20px 18px 22px; }
  .iaum-check__grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .iaum-check__card { border-radius: 14px; padding: 14px 14px 16px; min-height: 92px; gap: 8px; }
  .iaum-check__card b { font-size: 15px; }
  .iaum-check__card small { font-size: 12.5px; line-height: 1.45; }
  .iaum-check__head h2 { font-size: 24px; }
  .iaum-sec, .iaum-cover { padding-top: 40px; }
  .iaum-row { grid-template-columns: 96px minmax(0,1fr); gap: 14px; padding: 18px 0; align-items: start; }
  .iaum-row h3 { font-size: 17px; margin-top: 6px; }
  .iaum-row p { display: none; }
  .iaum-spec { padding: 28px 22px; border-radius: 22px; }
  .iaum-band { padding-top: 44px; }
  .iaum-band__inner { padding: 36px 0 40px; }
  .iaum-footer { margin-top: 52px; }
}
@media (max-width: 420px) {
  .iaum-check__grid { grid-template-columns: 1fr 1fr; }
  .iaum-grid--4, .iaum-grid--3, .iaum-grid--2, .iaum-grid--life { grid-template-columns: 1fr; }
}

/* =========================================================
   Archive / Search / 404
   ========================================================= */
.iaum-archive { padding-top: 44px; }
.iaum-archive__head { border-bottom: 1px solid var(--iaum-line); padding-bottom: 22px; margin-bottom: 8px; }
.iaum-archive__head .iaum-eyebrow { display: block; margin-bottom: 10px; }
.iaum-archive__head h1 { margin: 0; font-size: clamp(28px, 3.4vw, 42px); line-height: 1.15;
  letter-spacing: -.032em; font-weight: 700; text-wrap: balance; }
.iaum-archive__head p { margin: 12px 0 0; font-size: 15.5px; line-height: 1.6; color: var(--iaum-ink-2); max-width: 62ch; }

.iaum-subnav { display: flex; flex-wrap: wrap; gap: 10px; padding: 22px 0 4px; }
.iaum-subnav a { padding: 9px 16px; border-radius: 999px; background: var(--iaum-chip); font-size: 14px;
  font-weight: 500; display: flex; gap: 8px; align-items: baseline; }
.iaum-subnav a:hover { background: var(--iaum-ink); color: #fff; }
.iaum-subnav .n { font-family: var(--iaum-mono); font-size: 11px; opacity: .55; }

.iaum-list { margin-top: 6px; }
.iaum-empty { padding: 64px 0 40px; text-align: center; }
.iaum-empty p { margin: 0 0 20px; font-size: 16px; color: var(--iaum-ink-2); }

.iaum-pag { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; padding: 40px 0 8px; }
.iaum-pag .page-numbers { min-width: 42px; height: 42px; padding: 0 14px; display: grid; place-items: center;
  border-radius: 999px; border: 1px solid rgba(0,0,0,.12); font-size: 14.5px; font-weight: 500; }
.iaum-pag .page-numbers:hover { background: var(--iaum-ink); color: #fff; border-color: var(--iaum-ink); }
.iaum-pag .page-numbers.current { background: var(--iaum-ink); color: #fff; border-color: var(--iaum-ink); }
.iaum-pag .dots { border: 0; }

.iaum-404form { display: flex; gap: 10px; max-width: 560px; margin: 30px 0 0; }
.iaum-404form input { flex: 1; font-family: var(--iaum-sans); font-size: 16px; padding: 13px 16px;
  border: 1px solid var(--iaum-line); border-radius: 12px; background: #fff; }
.iaum-404form button { padding: 13px 24px; border: 0; border-radius: 999px; background: var(--iaum-ink);
  color: #fff; font-family: var(--iaum-sans); font-size: 14.5px; font-weight: 500; cursor: pointer; }

/* =========================================================
   Single post
   ========================================================= */
.iaum-single { max-width: 760px; margin: 0 auto; padding: 34px var(--iaum-gutter) 0; }
.iaum-crumb { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--iaum-ink-2); margin-bottom: 20px; flex-wrap: wrap; }
.iaum-crumb span { color: var(--iaum-ink-5); }

.iaum-single__head h1 { margin: 10px 0 0; font-size: clamp(28px, 4vw, 44px); line-height: 1.2;
  letter-spacing: -.032em; font-weight: 700; text-wrap: balance; }
.iaum-single__lead { margin: 16px 0 0; font-size: 17.5px; line-height: 1.65; color: var(--iaum-ink-2); }
.iaum-single__meta { display: flex; gap: 18px; flex-wrap: wrap; margin: 18px 0 0;
  padding-bottom: 22px; border-bottom: 1px solid var(--iaum-line); }
.iaum-single__hero { margin: 26px 0 0; border-radius: 20px; overflow: hidden; }
.iaum-single__hero img { display: block; width: 100%; height: auto; }

/* เนื้อหาบทความ */
.iaum-prose { font-size: 17.5px; line-height: 1.78; color: #24282e; padding: 26px 0 0; }
.iaum-prose > * { max-width: 100%; }
.iaum-prose p { margin: 0 0 1.15em; }
.iaum-prose h2 { margin: 1.9em 0 .55em; font-size: 27px; line-height: 1.28; letter-spacing: -.022em; font-weight: 700; }
.iaum-prose h3 { margin: 1.6em 0 .5em; font-size: 21px; line-height: 1.3; letter-spacing: -.015em; font-weight: 600; }
.iaum-prose h4 { margin: 1.4em 0 .45em; font-size: 18px; font-weight: 600; }
.iaum-prose a { color: var(--iaum-link); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.iaum-prose ul, .iaum-prose ol { margin: 0 0 1.15em; padding-left: 1.4em; }
.iaum-prose li { margin: .4em 0; }
.iaum-prose img { border-radius: 14px; height: auto; }
.iaum-prose figure { margin: 1.6em 0; }
.iaum-prose figcaption { margin-top: 10px; font-size: 13.5px; color: var(--iaum-ink-2); text-align: center; }
.iaum-prose blockquote { margin: 1.6em 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--iaum-yellow);
  font-size: 19px; line-height: 1.6; color: #33383f; }
.iaum-prose table { width: 100%; border-collapse: collapse; margin: 1.5em 0; font-size: 15.5px; display: block; overflow-x: auto; }
.iaum-prose th, .iaum-prose td { padding: 11px 14px; border-bottom: 1px solid var(--iaum-line); text-align: left; }
.iaum-prose th { font-weight: 600; background: var(--iaum-muted); }
.iaum-prose pre { background: var(--iaum-ink); color: #f4f5f7; padding: 18px 20px; border-radius: 14px;
  overflow-x: auto; font-family: var(--iaum-mono); font-size: 14px; line-height: 1.6; }
.iaum-prose code { font-family: var(--iaum-mono); font-size: .92em; background: var(--iaum-chip); padding: 2px 6px; border-radius: 5px; }
.iaum-prose pre code { background: none; padding: 0; }
.iaum-prose hr { border: 0; border-top: 1px solid var(--iaum-line); margin: 2.2em 0; }

/* embed คลิป — 16:9 เต็มความกว้างเสมอ (เว็บนี้ = ช่องนำเสนออีกแบบของคลิป) */
.iaum-prose iframe,
.iaum-prose .wp-block-embed__wrapper iframe,
.iaum-prose .wp-video, .iaum-prose video {
  display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: 16px; margin: 1.6em 0;
}
.iaum-prose .wp-block-embed { margin: 1.6em 0; }

.iaum-single__tags { padding: 34px 0 0; border-top: 1px solid var(--iaum-line); margin-top: 34px; }
.iaum-single__tags .iaum-eyebrow { display: block; margin-bottom: 12px; }

/* CTA ท้ายบทความ */
.iaum-cta { margin: 34px 0 0; border-radius: 22px; background: var(--iaum-ink); color: #fff;
  padding: 26px 28px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.iaum-cta .iaum-eyebrow { color: var(--iaum-yellow); display: block; margin-bottom: 6px; }
.iaum-cta b { font-size: 19px; font-weight: 600; letter-spacing: -.015em; }
.iaum-cta__btns { display: flex; gap: 10px; flex-wrap: wrap; }
.iaum-cta__b1, .iaum-cta__b2 { padding: 11px 22px; border-radius: 999px; font-size: 14.5px; font-weight: 600; white-space: nowrap; }
.iaum-cta__b1 { background: #fff; color: var(--iaum-ink); }
.iaum-cta__b1:hover { background: var(--iaum-yellow); color: var(--iaum-ink); }
.iaum-cta__b2 { border: 1px solid rgba(255,255,255,.35); color: #fff; }
.iaum-cta__b2:hover { background: rgba(255,255,255,.12); color: #fff; }

.iaum-rel { margin-top: 56px; }
.iaum-rel .iaum-sec__head { margin-bottom: 22px; }

@media (max-width: 860px) {
  .iaum-single { padding-top: 20px; }
  .iaum-prose { font-size: 17px; line-height: 1.75; }
  .iaum-prose h2 { font-size: 22px; }
  .iaum-prose h3 { font-size: 19px; }
  .iaum-single__lead { font-size: 16px; }
  .iaum-cta { padding: 20px; }
  .iaum-404form { flex-direction: column; }
}

/* =========================================================
   Tap targets ≥ 44px บนมือถือ (กฎห้อง: mobile-first)
   — ดีไซน์ต้นทางออกแบบมาบน desktop จึงมีลิงก์เตี้ยหลายจุด
     ขยายเฉพาะ ≤860px เพื่อไม่ให้หน้าตา desktop เปลี่ยน
   ========================================================= */
@media (max-width: 860px) {
  .iaum-btn-search, .iaum-burger { width: 44px; height: 44px; }
  .iaum-logo { min-height: 44px; }
  .iaum-chips a { padding: 10px 16px; min-height: 40px; display: flex; align-items: center; }
  .iaum-more { min-height: 44px; display: inline-flex; align-items: center; }
  .iaum-footer__list { gap: 0; }
  .iaum-footer__list a { min-height: 44px; display: flex; align-items: center; }
  .iaum-cover__line a, .iaum-cover__line span { min-height: 44px; display: inline-flex; align-items: center; }
  .iaum-crumb a { min-height: 40px; display: inline-flex; align-items: center; }
  .iaum-brands a, .iaum-subnav a { min-height: 40px; align-items: center; }
  .iaum-single__tags .iaum-brands a { min-height: 40px; }
}


/* =========================================================
   Specificity guard  (แก้ 2026-09-09)
   ---------------------------------------------------------
   hello-elementor/css/reset.css มีกฎ `a { color:#cc3366 }` (0,0,1)
   เราจึงต้องใช้ `body.iaum a { color: inherit }` (0,1,1) ทับ
   → แต่ทำให้ class ของ component (0,1,0) แพ้ตามไปด้วย
   ⇒ บล็อกนี้ยกทุกกฎที่ "กำหนดสีให้ลิงก์" ขึ้นเป็น (0,2,1) ให้ชนะทั้งคู่
   🔴 เพิ่มปุ่ม/ลิงก์ที่มีสีเองเมื่อไหร่ ต้องมาเติมที่นี่ด้วย
   ========================================================= */
body.iaum a.iaum-btn-store            { color: #fff; }
body.iaum a.iaum-btn-store:hover      { color: #fff; }
body.iaum a.iaum-more                 { color: var(--iaum-link); }
body.iaum a.iaum-more:hover           { color: var(--iaum-link); }
body.iaum .iaum-mega__list a:hover    { color: var(--iaum-link); }
body.iaum a.iaum-spec__btn            { color: var(--iaum-ink); }
body.iaum a.iaum-spec__btn:hover      { color: var(--iaum-ink); }
body.iaum a.iaum-cta__b1              { color: var(--iaum-ink); }
body.iaum a.iaum-cta__b1:hover        { color: var(--iaum-ink); }
body.iaum a.iaum-cta__b2,
body.iaum a.iaum-cta__b2:hover        { color: #fff; }
body.iaum .iaum-brands a:hover,
body.iaum .iaum-subnav a:hover,
body.iaum .iaum-loadmore a:hover      { color: #fff; }
body.iaum .iaum-pag a.page-numbers:hover,
body.iaum .iaum-pag .page-numbers.current { color: #fff; }
body.iaum .iaum-prose a               { color: var(--iaum-link); }
body.iaum .iaum-cover__line a         { color: var(--iaum-link); }
/* การ์ดทั้งใบเป็นลิงก์ → ห้ามเปลี่ยนสีตัวอักษรตอน hover */
body.iaum a.iaum-card:hover,
body.iaum a.iaum-card:hover *,
body.iaum a.iaum-row:hover,
body.iaum a.iaum-row:hover *,
body.iaum a.iaum-tile:hover,
body.iaum a.iaum-tile:hover *,
body.iaum a.iaum-lcard:hover,
body.iaum a.iaum-lcard:hover *,
body.iaum a.iaum-check__card:hover,
body.iaum a.iaum-check__card:hover *,
body.iaum .iaum-footer__list a:hover  { color: inherit; }
body.iaum .iaum-crumb a:hover         { color: var(--iaum-link); }


/* =========================================================
   Mobile drawer — ถอดจาก Claude Design (Mobile.dc artboard "02 — เมนู")
   ========================================================= */
.iaum-drawer { display: none; position: fixed; inset: 0; z-index: 200; background: var(--iaum-bg);
  overflow-y: auto; -webkit-overflow-scrolling: touch; }
.iaum-drawer.is-open { display: block; }

.iaum-drawer__top { padding: 16px 18px 12px; display: flex; align-items: center; gap: 14px;
  border-bottom: 1px solid var(--iaum-line-soft); }
body.iaum .iaum-drawer__top img { height: 26px; width: auto; max-width: none; display: block; }
.iaum-drawer__sp { flex: 1; }
.iaum-drawer__close { width: 44px; height: 44px; border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(0,0,0,.05); display: grid; place-items: center; font-size: 17px; color: #4b5158;
  font-family: var(--iaum-sans); }
.iaum-drawer__close:hover { background: rgba(0,0,0,.09); }

.iaum-drawer__search { margin: 18px 18px 10px; display: flex; align-items: center; gap: 10px;
  background: var(--iaum-chip); border-radius: 14px; padding: 12px 14px; }
.iaum-drawer__search span { font-size: 15px; color: #8b9199; }
.iaum-drawer__search input { flex: 1; border: 0; background: none; outline: none;
  font-family: var(--iaum-sans); font-size: 15px; color: var(--iaum-ink); min-width: 0; }
.iaum-drawer__search input::placeholder { color: #8b9199; }

.iaum-drawer__list { padding: 8px 18px 0; display: flex; flex-direction: column; }
.iaum-drawer__row { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 17px 0; border-bottom: 1px solid rgba(0,0,0,.07); min-height: 56px; }
.iaum-drawer__row.is-hot { background: rgba(0,169,79,.05); border-radius: 12px; padding-left: 10px; padding-right: 10px; }
.iaum-drawer__left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.iaum-drawer__bar { width: 6px; height: 22px; border-radius: 99px; display: block; flex: 0 0 auto; }
.iaum-bar--green { background: var(--iaum-green); }
.iaum-bar--yellow { background: var(--iaum-yellow); }
.iaum-bar--blue { background: var(--iaum-blue); }
.iaum-bar--red { background: var(--iaum-red); }
.iaum-bar--ink { background: var(--iaum-ink); }
.iaum-drawer__label { font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
.iaum-drawer__chev { font-size: 15px; color: var(--iaum-ink-5); }
.iaum-drawer__n { font-family: var(--iaum-mono); font-size: 11.5px; color: var(--iaum-ink-5); }
.iaum-drawer__badge { font-family: var(--iaum-mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--iaum-red-ink); white-space: nowrap; }

.iaum-drawer__brands { padding: 26px 18px 0; }
.iaum-drawer__h { font-family: var(--iaum-mono); font-size: 9.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--iaum-ink-3); margin-bottom: 12px; }
.iaum-drawer__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.iaum-drawer__chips a { padding: 10px 14px; border-radius: 999px; background: var(--iaum-chip);
  font-size: 13.5px; font-weight: 500; white-space: nowrap; min-height: 40px; display: flex; align-items: center; }
body.iaum .iaum-drawer__chips a:hover { background: var(--iaum-ink); color: #fff; }

.iaum-drawer__social { padding: 26px 18px 60px; display: flex; gap: 18px; font-size: 13.5px; color: var(--iaum-ink-2); }
.iaum-drawer__social a { min-height: 44px; display: inline-flex; align-items: center; }

/* header มือถือ: โลโก้ 26px ตามดีไซน์ */
@media (max-width: 860px) {
  body.iaum .iaum-logo img { height: 26px; }
}

/* =========================================================
   Mobile polish (≤860px)
   ---------------------------------------------------------
   ส่วนที่ mock ทำมา (หน้าแรก + drawer) = จูนตามสเปกเป๊ะ
   ส่วนที่ mock ไม่ได้ทำ (archive/single/search/404/footer)
   = ต่อยอดภาษาดีไซน์เดียวกัน (สัดส่วน · ขนาดอักษร · ระยะห่าง)
   ========================================================= */
@media (max-width: 860px) {

  /* --- แถวรายการ: ตามสเปก Mobile.dc (108px · 16px title · mono 10.5px) --- */
  .iaum-row { grid-template-columns: 108px minmax(0,1fr); gap: 14px; padding: 16px 0; }
  .iaum-row__img { border-radius: 12px; }
  .iaum-row h3 { font-size: 16px; line-height: 1.3; margin-top: 7px; }
  .iaum-row .iaum-eyebrow { font-size: 9.5px; }
  .iaum-row .iaum-meta { font-size: 10.5px; margin-top: 7px; }

  /* --- หัวเซกชัน --- */
  .iaum-sec__head { padding-bottom: 12px; margin-bottom: 6px; }
  .iaum-sec__head h2 { font-size: 22px; letter-spacing: -.025em; }
  .iaum-more { font-size: 13.5px; }
  .iaum-loadmore { padding-top: 20px; }
  .iaum-loadmore a { padding: 11px 24px; font-size: 14px; }

  /* --- Archive / Search / 404 --- */
  .iaum-archive { padding-top: 22px; }
  .iaum-archive__head { padding-bottom: 16px; }
  .iaum-archive__head h1 { font-size: 26px; letter-spacing: -.028em; }
  .iaum-archive__head p { font-size: 14.5px; margin-top: 10px; }
  .iaum-subnav { padding: 16px 0 2px; gap: 8px; }
  .iaum-subnav a { padding: 10px 14px; font-size: 13.5px; }
  .iaum-pag { padding-top: 28px; gap: 6px; }
  .iaum-pag .page-numbers { min-width: 44px; height: 44px; padding: 0 12px; font-size: 14px; }

  /* --- บทความ --- */
  .iaum-crumb { font-size: 13px; margin-bottom: 12px; gap: 6px; }
  .iaum-single__head h1 { font-size: 27px; line-height: 1.24; letter-spacing: -.03em; }
  .iaum-single__lead { font-size: 15.5px; margin-top: 12px; }
  .iaum-single__meta { gap: 12px; margin-top: 14px; padding-bottom: 16px; }
  .iaum-single__hero { border-radius: 14px; margin-top: 18px; }
  .iaum-prose { padding-top: 20px; }
  .iaum-prose img, .iaum-prose iframe { border-radius: 12px; }
  .iaum-prose blockquote { font-size: 17px; padding-left: 16px; }
  .iaum-single__tags { padding-top: 26px; margin-top: 26px; }
  .iaum-cta { border-radius: 18px; gap: 16px; }
  .iaum-cta b { font-size: 17px; }
  .iaum-cta__btns { width: 100%; }
  .iaum-cta__b1, .iaum-cta__b2 { flex: 1; text-align: center; justify-content: center;
    display: inline-flex; align-items: center; min-height: 44px; }
  .iaum-rel { margin-top: 40px; }

  /* --- Cover --- */
  .iaum-cover__frame { border-radius: 18px; }
  .iaum-cover__line { flex-direction: column; align-items: flex-start; gap: 2px; padding-top: 12px; }
  .iaum-cover__line span { font-size: 14px; }
  .iaum-cover__line a { font-size: 14px; }

  /* --- Footer: 2 คอลัมน์ (4 คอลัมน์แคบเกินบนมือถือ) --- */
  .iaum-footer__cols { grid-template-columns: 1fr 1fr; gap: 26px 18px; padding: 34px var(--iaum-gutter) 34px; }
  .iaum-footer__brand { grid-column: 1 / -1; }
  body.iaum .iaum-footer__brand img { height: 40px; }
  .iaum-footer__brand p { font-size: 13.5px; }
  .iaum-footer__list { font-size: 13.5px; }
  .iaum-footer__bar div { padding: 14px var(--iaum-gutter) 22px; font-size: 11px; }
}

@media (max-width: 420px) {
  .iaum-check__head h2 { font-size: 22px; }
  .iaum-single__head h1 { font-size: 25px; }
  .iaum-cta { flex-direction: column; align-items: flex-start; }
}

/* =========================================================
   Header buttons — แก้ 3 อาการ (2026-09-09)
   1) พื้นชมพู: hello-elementor reset ตั้งสไตล์ให้ <button>/:focus
      → ประกาศทับให้ครบทุก state ด้วย body.iaum (0,2,1)
   2) ไม่ชิดขวา: บนมือถือ .iaum-nav ถูกซ่อน (flex:1 หายไป)
      → ไม่มีอะไรดัน CTA ไปขวา ⇒ ใส่ margin-left:auto
   3) ใหญ่ไป: ดีไซน์กำหนด 34px แต่กฎห้องต้องแตะได้ ≥44px
      → วงกลม 34px ตามดีไซน์ + ขยาย "พื้นที่กด" ที่มองไม่เห็นด้วย ::after
   ========================================================= */
body.iaum .iaum-btn-search,
body.iaum .iaum-burger {
  width: 34px; height: 34px; padding: 0; position: relative;
  border: 0; border-radius: 999px; cursor: pointer; box-shadow: none; outline: none;
  background: rgba(0,0,0,.05); color: var(--iaum-ink-2);
  -webkit-appearance: none; appearance: none;
}
body.iaum .iaum-btn-search { display: grid; place-items: center; font-size: 14px; }
body.iaum .iaum-burger     { display: none; }
body.iaum .iaum-btn-search:hover,
body.iaum .iaum-burger:hover   { background: rgba(0,0,0,.09); color: var(--iaum-ink); }
body.iaum .iaum-btn-search:focus,
body.iaum .iaum-burger:focus,
body.iaum .iaum-btn-search:active,
body.iaum .iaum-burger:active  { background: rgba(0,0,0,.09); box-shadow: none; outline: none; }
body.iaum .iaum-btn-search:focus-visible,
body.iaum .iaum-burger:focus-visible { outline: 2px solid var(--iaum-link); outline-offset: 2px; }

/* พื้นที่กดขยายเป็น 44×44 โดยหน้าตายังเป็นวงกลม 34px */
body.iaum .iaum-btn-search::after,
body.iaum .iaum-burger::after { content: ''; position: absolute; inset: -5px; border-radius: inherit; }

body.iaum .iaum-burger i { width: 15px; height: 1.6px; background: var(--iaum-ink); border-radius: 2px; margin: 3.5px auto; display: block; }

@media (max-width: 860px) {
  body.iaum .iaum-header__cta { margin-left: auto; gap: 8px; }
  body.iaum .iaum-burger { display: grid; place-items: center; }
  body.iaum .iaum-drawer__close { width: 34px; height: 34px; position: relative; }
  body.iaum .iaum-drawer__close::after { content: ''; position: absolute; inset: -5px; border-radius: inherit; }
}

/* ขีดแฮมเบอร์เกอร์: ดีไซน์ใช้ gap 3.5px — เดิมผมใช้ margin 3.5px ทุกขีด = ห่างจริง 7px (เบิ้ล) */
body.iaum .iaum-burger { display: none; }
body.iaum .iaum-burger i { margin: 0; }
@media (max-width: 860px) {
  body.iaum .iaum-burger {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3.5px;
  }
}

/* ไอคอนโซเชียลใน drawer — วงกลมเทาแบบเดียวกับปุ่ม ⌕ / ☰ */
.iaum-drawer__social { padding: 26px 18px 60px; display: block; }
.iaum-drawer__icons { display: flex; flex-wrap: wrap; gap: 10px; }
body.iaum .iaum-drawer__icons a {
  width: 44px; height: 44px; border-radius: 999px; background: var(--iaum-chip);
  display: grid; place-items: center; color: var(--iaum-ink-2); flex: 0 0 auto;
}
body.iaum .iaum-drawer__icons a:hover { background: var(--iaum-ink); color: #fff; }
body.iaum .iaum-drawer__icons svg { display: block; }

/* เมนูหลัก desktop: 14px → 15px (JoJho ขอใหญ่ขึ้นนิดนึง 9 ก.ย.) */
body.iaum .iaum-nav__item > a { font-size: 15px; padding: 8px 12px; }
body.iaum .iaum-mega__list a { font-size: 15px; }

/* ปุ่ม Shop: 13px → 15px ให้สมดุลกับเมนู 15px (JoJho 9 ก.ย.) */
body.iaum a.iaum-btn-store { font-size: 15px; padding: 8px 18px; }

/* =========================================================
   Store landing (ANTIMONSTER) — page-store.php
   ========================================================= */
.iaum-store-hero { max-width: var(--iaum-wrap); margin: 0 auto; padding: 40px var(--iaum-gutter) 0; }
.iaum-store-hero__box { border-radius: 28px; background: var(--iaum-muted); padding: 44px 44px 0;
  display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 24px; align-items: end; overflow: hidden; }
.iaum-store-hero__text { padding-bottom: 44px; }
.iaum-store-hero h1 { margin: 10px 0 0; font-size: clamp(34px, 5vw, 58px); line-height: 1.05;
  letter-spacing: -.04em; font-weight: 700; }
.iaum-store-hero__lead { margin: 16px 0 0; font-size: 18px; line-height: 1.6; color: var(--iaum-ink-2); max-width: 46ch; }
.iaum-store-hero__lead strong { color: var(--iaum-ink); font-weight: 600; }
.iaum-store-note { margin: 14px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--iaum-ink-3);
  max-width: 52ch; padding-left: 12px; border-left: 3px solid var(--iaum-yellow); }
.iaum-store-hero__btns { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; }
.iaum-store-hero__mascot { align-self: end; text-align: center; }
body.iaum .iaum-store-hero__mascot img { display: block; width: 100%; max-width: 300px; height: auto; margin: 0 auto -4px; }

body.iaum a.iaum-store-btn { display: inline-flex; align-items: center; min-height: 44px; padding: 12px 24px;
  border-radius: 999px; background: var(--iaum-ink); color: #fff; font-size: 15px; font-weight: 600; white-space: nowrap; }
body.iaum a.iaum-store-btn:hover { background: var(--iaum-red); color: #fff; }
body.iaum a.iaum-store-btn2 { display: inline-flex; align-items: center; min-height: 44px; padding: 12px 22px;
  border-radius: 999px; border: 1px solid rgba(0,0,0,.14); font-size: 15px; font-weight: 500; color: var(--iaum-ink); }
body.iaum a.iaum-store-btn2:hover { background: var(--iaum-ink); color: #fff; border-color: var(--iaum-ink); }

.iaum-series__card { background: var(--iaum-muted); border-radius: 18px; padding: 22px 22px 20px;
  display: flex; flex-direction: column; gap: 10px; transition: transform .25s ease; }
body.iaum a.iaum-series__card:hover { transform: translateY(-3px); background: #eef0f3; color: inherit; }
.iaum-series__card b { font-size: 19px; font-weight: 600; letter-spacing: -.012em; }
.iaum-series__card small { font-size: 14px; color: var(--iaum-ink-2); line-height: 1.5; }
.iaum-series__n { font-family: var(--iaum-mono); font-size: 11.5px; color: var(--iaum-ink-4); margin-top: 2px; }

.iaum-store-model { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 40px; align-items: start; }
.iaum-store-model h2 { margin: 10px 0 14px; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.18;
  letter-spacing: -.028em; font-weight: 700; }
.iaum-store-model p { margin: 0 0 22px; font-size: 15.5px; line-height: 1.65; color: var(--iaum-ink-2); max-width: 44ch; }
.iaum-store-model__list .iaum-row { grid-template-columns: 120px minmax(0,1fr); padding: 14px 0; }
.iaum-store-model__list .iaum-row h3 { font-size: 17px; margin-top: 0; }
.iaum-store-body { max-width: 760px; margin: 0 auto; }

@media (max-width: 860px) {
  .iaum-store-hero { padding-top: 20px; }
  .iaum-store-hero__box { grid-template-columns: 1fr; border-radius: 22px; padding: 28px 20px 0; gap: 0; }
  .iaum-store-hero__text { padding-bottom: 24px; }
  .iaum-store-hero__lead { font-size: 16px; }
  body.iaum .iaum-store-hero__mascot img { max-width: 200px; }
  .iaum-store-model { grid-template-columns: 1fr; gap: 24px; }
  .iaum-store-model__list .iaum-row { grid-template-columns: 108px minmax(0,1fr); }
}

/* รีวิวจากลูกค้า (FB embed) — เลื่อนแนวนอนแบบเดียวกับการ์ดเด่นหน้าแรก */
.iaum-proof__note { margin: -14px 0 20px; font-size: 14px; color: var(--iaum-ink-2); }
.iaum-proof { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
.iaum-proof__item { flex: 0 0 auto; width: min(500px, 86vw); scroll-snap-align: start;
  background: #fff; border: 1px solid var(--iaum-line); border-radius: 18px; overflow: hidden; }
.iaum-proof__item iframe { display: block; width: 100%; height: 620px; border: 0; }
.iaum-store-model--slim { grid-template-columns: minmax(0,1.4fr) minmax(0,1fr); align-items: center; }
.iaum-store-model__cta { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 860px) {
  .iaum-proof__item { width: 88vw; }
  .iaum-proof__item iframe { height: 560px; }
  .iaum-store-model--slim { grid-template-columns: 1fr; }
  .iaum-store-model__cta { justify-content: flex-start; }
}

/* ตัวอย่างสินค้า — แถบเลื่อนแนวนอน ระหว่าง hero กับ ซีรีส์ */
.iaum-samples { padding: 28px 0 4px; }
.iaum-samples__track { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x proximity;
  padding: 4px var(--iaum-gutter) 10px; }
.iaum-samples__pad { flex: 0 0 auto; width: 2px; }
.iaum-samples__item { flex: 0 0 auto; width: 168px; scroll-snap-align: start; display: block; }
.iaum-samples__img { display: block; aspect-ratio: 1 / 1; border-radius: 16px; overflow: hidden;
  background: var(--iaum-chip); transition: transform .25s ease; }
.iaum-samples__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
body.iaum a.iaum-samples__item:hover .iaum-samples__img { transform: translateY(-3px); }
.iaum-samples__name { display: block; margin-top: 10px; font-size: 13.5px; line-height: 1.35;
  font-weight: 500; color: var(--iaum-ink-2); }
body.iaum a.iaum-samples__item:hover .iaum-samples__name { color: var(--iaum-ink); }
@media (max-width: 860px) { .iaum-samples { padding-top: 18px; } .iaum-samples__item { width: 140px; } }

/* =========================================================
   MOSAIC hero — ตารางฐาน "สี่เหลี่ยมจัตุรัส" (JoJho 9 ก.ย.)
   ---------------------------------------------------------
   6 คอลัมน์ × 2 แถว · ทุกช่อง aspect-ratio 1/1
     [ T1 T1 ][ T2 ][ T3 ][ T6 T6 ]
     [ T1 T1 ][ T4 ][ T5 ][ T6 T6 ]
   ⇒ รูปจัตุรัส (1:1) พอดีช่องโดยไม่ต้องครอป · รูปอัตราส่วนอื่นใช้ object-fit
   ========================================================= */
.iaum-mosaic-wrap { max-width: var(--iaum-wrap); margin: 0 auto; padding: 24px var(--iaum-gutter) 0; }
.iaum-mosaic { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 1fr; gap: 12px; }
.iaum-mosaic > * { aspect-ratio: 1 / 1; }

.iaum-tile-m--1 { grid-column: span 2; grid-row: span 2; aspect-ratio: 1 / 1; }
.iaum-tile-m--6 { grid-column: span 2; grid-row: span 2; aspect-ratio: 1 / 1; }
.iaum-tile-m--1, .iaum-tile-m--6 { aspect-ratio: auto; }

.iaum-tile-m { position: relative; display: block; overflow: hidden; border-radius: 18px;
  background: var(--iaum-chip); isolation: isolate; }
.iaum-tile-m__bg { position: absolute; inset: 0; display: block; }
.iaum-tile-m__bg img, .iaum-tile-m__bg .iaum-ph {
  width: 100%; height: 100%; object-fit: cover; display: block; }
.iaum-tile-m__shade { position: absolute; inset: 0; display: block; z-index: 1;
  background: linear-gradient(180deg, rgba(12,14,17,.30) 0%, rgba(12,14,17,.05) 34%, rgba(12,14,17,.62) 78%, rgba(12,14,17,.86) 100%); }
.iaum-tile-m__body { position: absolute; inset: auto 0 0 0; z-index: 2; padding: 16px 16px 16px;
  display: flex; flex-direction: column; gap: 7px; }
.iaum-tile-m__cat { align-self: flex-start; font-family: var(--iaum-mono); font-size: 9.5px;
  letter-spacing: .14em; text-transform: uppercase; color: #fff; background: rgba(0,0,0,.5);
  padding: 4px 8px; border-radius: 6px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.iaum-tile-m__title { font-size: 15.5px; line-height: 1.3; font-weight: 600; letter-spacing: -.012em;
  color: #fff; text-wrap: pretty;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.iaum-tile-m__meta { font-family: var(--iaum-mono); font-size: 10px; color: rgba(255,255,255,.72); }
body.iaum a.iaum-tile-m:hover .iaum-tile-m__title,
body.iaum a.iaum-tile-m:hover .iaum-tile-m__meta { color: #fff; }
.iaum-tile-m__bg img { transition: transform .5s cubic-bezier(.2,.8,.2,1); }
body.iaum a.iaum-tile-m:hover .iaum-tile-m__bg img { transform: scale(1.05); }

/* ไทล์ใหญ่ = ตัวหนังสือใหญ่ขึ้น */
.iaum-tile-m--1 .iaum-tile-m__title,
.iaum-tile-m--6 .iaum-tile-m__title { font-size: clamp(19px, 1.9vw, 26px); -webkit-line-clamp: 4; letter-spacing: -.02em; }
.iaum-tile-m--1 .iaum-tile-m__body,
.iaum-tile-m--6 .iaum-tile-m__body { padding: 22px 22px 22px; gap: 9px; }
.iaum-tile-m--1 .iaum-tile-m__cat,
.iaum-tile-m--6 .iaum-tile-m__cat { font-size: 10px; padding: 5px 10px; }

/* สีประจำหมวด — เจือลงบนเงาด้านล่างให้แยกหมวดออกจากกัน */
.iaum-tile-m.tone-green  .iaum-tile-m__shade { background-image: linear-gradient(180deg, rgba(12,14,17,.28) 0%, rgba(12,14,17,.04) 34%, rgba(0,105,52,.66) 80%, rgba(0,74,37,.9) 100%); }
.iaum-tile-m.tone-yellow .iaum-tile-m__shade { background-image: linear-gradient(180deg, rgba(12,14,17,.28) 0%, rgba(12,14,17,.04) 34%, rgba(122,86,0,.68) 80%, rgba(84,59,0,.92) 100%); }
.iaum-tile-m.tone-blue   .iaum-tile-m__shade { background-image: linear-gradient(180deg, rgba(12,14,17,.28) 0%, rgba(12,14,17,.04) 34%, rgba(16,84,113,.68) 80%, rgba(10,58,79,.92) 100%); }
.iaum-tile-m.tone-red    .iaum-tile-m__shade { background-image: linear-gradient(180deg, rgba(12,14,17,.28) 0%, rgba(12,14,17,.04) 34%, rgba(140,26,20,.66) 80%, rgba(97,18,14,.9) 100%); }

@media (max-width: 900px) {
  .iaum-mosaic { grid-template-columns: repeat(4, 1fr); gap: 10px; }
  .iaum-tile-m--1, .iaum-tile-m--6 { grid-column: span 2; grid-row: span 2; }
  .iaum-tile-m--1 .iaum-tile-m__title, .iaum-tile-m--6 .iaum-tile-m__title { font-size: 18px; }
}
@media (max-width: 560px) {
  .iaum-mosaic-wrap { padding-top: 16px; }
  .iaum-mosaic { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .iaum-tile-m--1, .iaum-tile-m--6 { grid-column: span 2; grid-row: span 2; }
  .iaum-tile-m__title { font-size: 14px; -webkit-line-clamp: 3; }
  .iaum-tile-m--1 .iaum-tile-m__title, .iaum-tile-m--6 .iaum-tile-m__title { font-size: 20px; }
  .iaum-tile-m__body { padding: 12px; gap: 6px; }
}

/* วางตำแหน่ง mosaic แบบระบุชัด (auto-placement จัดไม่สมมาตร)
     [ T1 T1 ][ T2 ][ T3 ][ T6 T6 ]
     [ T1 T1 ][ T4 ][ T5 ][ T6 T6 ]                                    */
.iaum-mosaic { grid-template-rows: repeat(2, auto); }
.iaum-tile-m--1 { grid-column: 1 / span 2; grid-row: 1 / span 2; }
.iaum-tile-m--2 { grid-column: 3;          grid-row: 1; }
.iaum-tile-m--3 { grid-column: 4;          grid-row: 1; }
.iaum-tile-m--4 { grid-column: 3;          grid-row: 2; }
.iaum-tile-m--5 { grid-column: 4;          grid-row: 2; }
.iaum-tile-m--6 { grid-column: 5 / span 2; grid-row: 1 / span 2; }

@media (max-width: 900px) {
  /* 4 คอลัมน์:  [T1 T1][T2][T3]  /  [T1 T1][T4][T5]  /  [T6 T6 T6 T6] */
  .iaum-mosaic { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, auto); }
  .iaum-tile-m--1 { grid-column: 1 / span 2; grid-row: 1 / span 2; }
  .iaum-tile-m--2 { grid-column: 3; grid-row: 1; }
  .iaum-tile-m--3 { grid-column: 4; grid-row: 1; }
  .iaum-tile-m--4 { grid-column: 3; grid-row: 2; }
  .iaum-tile-m--5 { grid-column: 4; grid-row: 2; }
  .iaum-tile-m--6 { grid-column: 1 / span 4; grid-row: 3; aspect-ratio: 2 / 1; }
}
@media (max-width: 560px) {
  /* 2 คอลัมน์: ใหญ่ 1 → เล็ก 4 → ใหญ่ 1 */
  .iaum-mosaic { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(5, auto); }
  .iaum-tile-m--1 { grid-column: 1 / span 2; grid-row: 1; aspect-ratio: 1 / 1; }
  .iaum-tile-m--2 { grid-column: 1; grid-row: 2; }
  .iaum-tile-m--3 { grid-column: 2; grid-row: 2; }
  .iaum-tile-m--4 { grid-column: 1; grid-row: 3; }
  .iaum-tile-m--5 { grid-column: 2; grid-row: 3; }
  .iaum-tile-m--6 { grid-column: 1 / span 2; grid-row: 4; aspect-ratio: 1 / 1; }
}

/* แท็บเล็ต: 4 คอลัมน์ × 3 แถว = 12 ช่อง เต็มพอดี ทุกไทล์เป็นจัตุรัส
     [ T1 T1 ][ T2 ][ T3 ]
     [ T1 T1 ][ T6 T6 ]
     [ T4 ][ T5 ][ T6 T6 ]                                              */
@media (max-width: 900px) {
  .iaum-mosaic { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, auto); }
  .iaum-tile-m--1 { grid-column: 1 / span 2; grid-row: 1 / span 2; }
  .iaum-tile-m--2 { grid-column: 3; grid-row: 1; }
  .iaum-tile-m--3 { grid-column: 4; grid-row: 1; }
  .iaum-tile-m--6 { grid-column: 3 / span 2; grid-row: 2 / span 2; aspect-ratio: 1 / 1; }
  .iaum-tile-m--4 { grid-column: 1; grid-row: 3; }
  .iaum-tile-m--5 { grid-column: 2; grid-row: 3; }
}

/* =========================================================
   Product mosaic (หน้า /store/) — เดิมเป็น carousel
   6 คอลัมน์ × 3 แถว = 18 ช่องจัตุรัส เต็มพอดี (ใหญ่ 2 + เล็ก 10)
     [ P1 P1 ][ P2 ][ P3 ][ P4 ][ P5 ]
     [ P1 P1 ][ P6 ][ P7 ][ P12 P12 ]
     [ P8 ][ P9 ][ P10 ][ P11 ][ P12 P12 ]
   ========================================================= */
.iaum-pmosaic { display: grid; grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(3, auto); gap: 12px;
  max-width: var(--iaum-wrap); margin: 0 auto; padding: 0 var(--iaum-gutter); }
.iaum-ptile { position: relative; display: block; border-radius: 16px; overflow: hidden;
  background: var(--iaum-chip); aspect-ratio: 1 / 1; }
.iaum-ptile__img { position: absolute; inset: 0; display: block; }
.iaum-ptile__img img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .45s cubic-bezier(.2,.8,.2,1); }
body.iaum a.iaum-ptile:hover .iaum-ptile__img img { transform: scale(1.06); }
.iaum-ptile__name { position: absolute; inset: auto 0 0 0; z-index: 2; padding: 26px 12px 11px;
  font-size: 12.5px; line-height: 1.3; font-weight: 500; color: #fff;
  background: linear-gradient(180deg, rgba(12,14,17,0) 0%, rgba(12,14,17,.72) 55%, rgba(12,14,17,.88) 100%);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
body.iaum a.iaum-ptile:hover .iaum-ptile__name { color: #fff; }

.iaum-ptile--1  { grid-column: 1 / span 2; grid-row: 1 / span 2; }
.iaum-ptile--2  { grid-column: 3; grid-row: 1; }
.iaum-ptile--3  { grid-column: 4; grid-row: 1; }
.iaum-ptile--4  { grid-column: 5; grid-row: 1; }
.iaum-ptile--5  { grid-column: 6; grid-row: 1; }
.iaum-ptile--6  { grid-column: 3; grid-row: 2; }
.iaum-ptile--7  { grid-column: 4; grid-row: 2; }
.iaum-ptile--12 { grid-column: 5 / span 2; grid-row: 2 / span 2; }
.iaum-ptile--8  { grid-column: 1; grid-row: 3; }
.iaum-ptile--9  { grid-column: 2; grid-row: 3; }
.iaum-ptile--10 { grid-column: 3; grid-row: 3; }
.iaum-ptile--11 { grid-column: 4; grid-row: 3; }
.iaum-ptile--1 .iaum-ptile__name,
.iaum-ptile--12 .iaum-ptile__name { font-size: 15px; padding: 34px 18px 16px; -webkit-line-clamp: 2; }

/* แท็บเล็ต: 4 คอลัมน์ × 4 แถว = 16 ช่อง (ใหญ่ 2 + เล็ก 8 = 12 ชิ้น) */
@media (max-width: 900px) {
  .iaum-pmosaic { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, auto); gap: 10px; }
  .iaum-ptile--1  { grid-column: 1 / span 2; grid-row: 1 / span 2; }
  .iaum-ptile--2  { grid-column: 3; grid-row: 1; }
  .iaum-ptile--3  { grid-column: 4; grid-row: 1; }
  .iaum-ptile--4  { grid-column: 3; grid-row: 2; }
  .iaum-ptile--5  { grid-column: 4; grid-row: 2; }
  .iaum-ptile--6  { grid-column: 1; grid-row: 3; }
  .iaum-ptile--7  { grid-column: 2; grid-row: 3; }
  .iaum-ptile--12 { grid-column: 3 / span 2; grid-row: 3 / span 2; }
  .iaum-ptile--8  { grid-column: 1; grid-row: 4; }
  .iaum-ptile--9  { grid-column: 2; grid-row: 4; }
  .iaum-ptile--10, .iaum-ptile--11 { display: none; }
}
/* มือถือ: 2 คอลัมน์ — ใหญ่ 1 → เล็ก 4 → ใหญ่ 1 → เล็ก 4 */
@media (max-width: 560px) {
  .iaum-pmosaic { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(6, auto); gap: 8px; }
  .iaum-ptile--1  { grid-column: 1 / span 2; grid-row: 1; }
  .iaum-ptile--2  { grid-column: 1; grid-row: 2; }
  .iaum-ptile--3  { grid-column: 2; grid-row: 2; }
  .iaum-ptile--4  { grid-column: 1; grid-row: 3; }
  .iaum-ptile--5  { grid-column: 2; grid-row: 3; }
  .iaum-ptile--12 { grid-column: 1 / span 2; grid-row: 4; }
  .iaum-ptile--6  { grid-column: 1; grid-row: 5; }
  .iaum-ptile--7  { grid-column: 2; grid-row: 5; }
  .iaum-ptile--8  { grid-column: 1; grid-row: 6; }
  .iaum-ptile--9  { grid-column: 2; grid-row: 6; }
  .iaum-ptile--10, .iaum-ptile--11 { display: none; }
  .iaum-ptile--1 .iaum-ptile__name, .iaum-ptile--12 .iaum-ptile__name { font-size: 14px; }
}

/* แถบสินค้าเต็มความกว้าง — แยก section ให้ชัด + เว้นระยะหายใจ (JoJho 9 ก.ย.) */
.iaum-band--products { padding-top: 56px; }
.iaum-band--products .iaum-band__inner { background: var(--iaum-muted); padding: 52px 0 60px; }
.iaum-band--products .iaum-band__head { margin-bottom: 26px; }
/* mosaic อยู่ใน .iaum-wrap แล้ว → ไม่ต้องมี padding/แม็กซ์วิดท์ของตัวเองซ้ำ */
.iaum-band--products .iaum-pmosaic { max-width: none; margin: 0; padding: 0; }
/* เว้นช่องระหว่าง hero → แถบสินค้า → ซีรีส์ */
.iaum-store-hero { padding-bottom: 8px; }
.iaum-band--products + .iaum-sec { padding-top: 56px; }

@media (max-width: 860px) {
  .iaum-band--products { padding-top: 34px; }
  .iaum-band--products .iaum-band__inner { padding: 32px 0 38px; }
  .iaum-band--products .iaum-band__head { margin-bottom: 18px; }
  .iaum-band--products + .iaum-sec { padding-top: 36px; }
}

/* โลโก้ footer ใหญ่ขึ้น (JoJho 9 ก.ย.) 52 → 68px */
body.iaum .iaum-footer__brand img { height: 68px; margin-bottom: 20px; }
@media (max-width: 860px) { body.iaum .iaum-footer__brand img { height: 54px; } }

/* โลโก้ footer ใหญ่ขึ้นอีก (JoJho 9 ก.ย. รอบ 2) 68 → 88px */
body.iaum .iaum-footer__brand img { height: 88px; margin-bottom: 22px; }
@media (max-width: 860px) { body.iaum .iaum-footer__brand img { height: 66px; } }

/* =========================================================
   รูปในการ์ดต้องเต็มกรอบเสมอ (JoJho 9 ก.ย.)
   ---------------------------------------------------------
   บั๊กตระกูลเดียวกับโลโก้: `body.iaum img { height:auto }` (0,1,2)
   ทับ `.iaum-thumb { height:100% }` (0,1,0)
   ⇒ รูปที่อัตราส่วนไม่ตรงกรอบจะไม่เต็ม เหลือพื้นขาว = สูงไม่เท่ากัน
   แก้ด้วยการยก specificity เป็น (0,2,1) — เข้าชุดกับบล็อก Specificity guard
   ========================================================= */
body.iaum .iaum-thumb {
  width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: center; display: block;
}
/* กรอบรูปทุกแบบ: กันรูปล้น + พื้นรองตอนรูปยังโหลดไม่เสร็จ */
body.iaum .iaum-lcard__img,
body.iaum .iaum-tile__img,
body.iaum .iaum-row__img,
body.iaum .iaum-card__img { overflow: hidden; background: var(--iaum-chip); }

/* โลโก้ footer เต็มคอลัมน์บน desktop (JoJho 9 ก.ย.) */
body.iaum .iaum-footer__brand img {
  width: 100%; height: auto; max-width: 300px; margin-bottom: 20px;
}
@media (max-width: 860px) {
  body.iaum .iaum-footer__brand img { width: auto; height: 66px; max-width: none; }
}

/* โลโก้ footer: 279px (เต็มคอลัมน์) ใหญ่ไป → 200px (JoJho 9 ก.ย.) */
body.iaum .iaum-footer__brand img { max-width: 200px; }

/* =========================================================
   Footer — accordion บนมือถือ / กางเต็มบน desktop (JoJho 9 ก.ย.)
   ปัญหาเดิม: ลิสต์ยาวมาก (ตามเรา 5 ลิงก์ × 44px = 220px เปล่า)
   แก้: social เป็นไอคอนแถวเดียว + คอลัมน์ลิงก์เป็น <details>
   ========================================================= */
.iaum-footer__acc { border: 0; }
.iaum-footer__acc > summary { list-style: none; cursor: pointer; }
.iaum-footer__acc > summary::-webkit-details-marker { display: none; }
.iaum-footer__mail { font-size: 14px; color: var(--iaum-ink-2); display: inline-flex; align-items: center; min-height: 44px; }
body.iaum a.iaum-footer__mail:hover { color: var(--iaum-link); }

.iaum-footer__icons { display: flex; flex-wrap: wrap; gap: 10px; }
body.iaum .iaum-footer__icons a {
  width: 44px; height: 44px; border-radius: 999px; background: var(--iaum-chip);
  display: grid; place-items: center; color: var(--iaum-ink-2); flex: 0 0 auto;
}
body.iaum .iaum-footer__icons a:hover { background: var(--iaum-ink); color: #fff; }
body.iaum .iaum-footer__icons svg { display: block; }

/* desktop: กางเสมอ ไม่มีลูกศร กดไม่ได้ */
@media (min-width: 861px) {
  .iaum-footer__acc > summary { pointer-events: none; }
}

/* มือถือ: 1 คอลัมน์ · accordion พับ · ลูกศรขวา */
@media (max-width: 860px) {
  .iaum-footer__cols { grid-template-columns: 1fr; gap: 0; padding: 28px var(--iaum-gutter) 26px; }
  .iaum-footer__brand { margin-bottom: 22px; }
  .iaum-footer__brand p { font-size: 13.5px; }

  .iaum-footer__acc { border-top: 1px solid var(--iaum-line-soft); }
  .iaum-footer__acc > summary {
    display: flex; align-items: center; justify-content: space-between;
    min-height: 52px; margin: 0; font-size: 13px; letter-spacing: .1em; }
  .iaum-footer__acc > summary::after {
    content: '＋'; font-family: var(--iaum-sans); font-size: 15px; color: var(--iaum-ink-3); }
  .iaum-footer__acc[open] > summary::after { content: '－'; }
  .iaum-footer__acc .iaum-footer__list { padding: 2px 0 14px; gap: 0; }
  .iaum-footer__acc .iaum-footer__list a { min-height: 42px; font-size: 15px; }

  .iaum-footer__mail { border-top: 1px solid var(--iaum-line-soft); width: 100%; min-height: 52px; font-size: 14.5px; }
  .iaum-footer__social { border-top: 1px solid var(--iaum-line-soft); padding-top: 18px; margin-top: 2px; }
  .iaum-footer__social .iaum-footer__h { margin-bottom: 12px; }
  .iaum-footer { margin-top: 44px; }
  .iaum-footer__bar div { padding: 14px var(--iaum-gutter) 24px; }
}

/* Footer มือถือ: จัดกึ่งกลางทั้งหมด (JoJho 9 ก.ย.) */
@media (max-width: 860px) {
  .iaum-footer__cols { text-align: center; justify-items: center; }
  .iaum-footer__brand { display: flex; flex-direction: column; align-items: center; }
  body.iaum .iaum-footer__brand img { margin-left: auto; margin-right: auto; }
  .iaum-footer__brand p { max-width: 34ch; margin-left: auto; margin-right: auto; }

  .iaum-footer__acc { width: 100%; }
  .iaum-footer__acc > summary { justify-content: center; gap: 10px; }
  .iaum-footer__acc > summary::after { margin-left: 2px; }
  .iaum-footer__acc .iaum-footer__list { align-items: center; }
  .iaum-footer__acc .iaum-footer__list a { justify-content: center; width: 100%; }

  .iaum-footer__mail { justify-content: center; text-align: center; }
  .iaum-footer__social { width: 100%; display: flex; flex-direction: column; align-items: center; }
  .iaum-footer__icons { justify-content: center; }
  .iaum-footer__bar div { text-align: center; }
}

/* ยกเว้น dropdown — ชิดซ้าย (＋ อยู่ขวา) ที่เหลือ center (JoJho 9 ก.ย.) */
@media (max-width: 860px) {
  .iaum-footer__acc { text-align: left; }
  .iaum-footer__acc > summary { justify-content: space-between; gap: 12px; }
  .iaum-footer__acc .iaum-footer__list { align-items: stretch; }
  .iaum-footer__acc .iaum-footer__list a { justify-content: flex-start; text-align: left; }
}

/* =========================================================
   Footer desktop — จัดกริดใหม่ (JoJho 9 ก.ย.)
   ปัญหาเดิม: อีเมลถูกแยกออกมาเป็น grid item ของตัวเอง → ลอยกลางหน้า
              และคอลัมน์ social แคบ ไอคอนตกบรรทัดเป็น 4+1
   แก้: กำหนดคอลัมน์ชัดเจน 4 ช่อง · อีเมลไปอยู่ใต้ "เกี่ยวกับเรา" ·
        คอลัมน์ social กว้าง 280px พอให้ไอคอน 5 อันอยู่แถวเดียว
     [ โลโก้+คำโปรย ] [ หมวดหลัก ] [ เกี่ยวกับเรา ] [ ตามเรา ]
                                    [   อีเมล    ]
   ========================================================= */
@media (min-width: 861px) {
  .iaum-footer__cols {
    grid-template-columns: 1.25fr 0.9fr 1.15fr 280px;
    grid-template-rows: auto auto;
    align-items: start;
    column-gap: 40px;
    row-gap: 14px;
  }
  .iaum-footer__brand              { grid-column: 1; grid-row: 1 / span 2; }
  .iaum-footer__acc:nth-of-type(1) { grid-column: 2; grid-row: 1; }
  .iaum-footer__acc:nth-of-type(2) { grid-column: 3; grid-row: 1; }
  .iaum-footer__mail               { grid-column: 3; grid-row: 2; min-height: 0; padding-top: 2px; }
  .iaum-footer__social             { grid-column: 4; grid-row: 1 / span 2; }
  .iaum-footer__icons              { flex-wrap: nowrap; }
}

/* =========================================================
   Footer: "ติดต่องาน" ชิดขึ้นมาใต้ลิงก์ + มีเส้นคั่น (JoJho 9 ก.ย.)
   เดิมอีเมลเป็น grid item แถว 2 → ถูกดันลงตามคอลัมน์ที่ยาวที่สุด
   แก้: ห่อรวมกับ "เกี่ยวกับเรา" เป็นคอลัมน์เดียว
   ========================================================= */
.iaum-footer__about { display: flex; flex-direction: column; }
body.iaum a.iaum-footer__mail {
  border-top: 1px solid var(--iaum-line-soft);
  margin-top: 14px; padding-top: 14px;
}

@media (min-width: 861px) {
  .iaum-footer__cols { grid-template-columns: 1.25fr 0.9fr 1.15fr 280px; grid-template-rows: auto; }
  .iaum-footer__brand              { grid-column: 1; grid-row: 1; }
  .iaum-footer__acc:nth-of-type(1) { grid-column: 2; grid-row: 1; }
  .iaum-footer__about              { grid-column: 3; grid-row: 1; }
  .iaum-footer__social             { grid-column: 4; grid-row: 1; }
  body.iaum a.iaum-footer__mail { min-height: 0; align-self: flex-start; }
}

@media (max-width: 860px) {
  .iaum-footer__about { width: 100%; }
  body.iaum a.iaum-footer__mail { margin-top: 0; padding-top: 0; min-height: 52px; }
}

/* มือถือ: จัด dropdown ให้ center ด้วย (JoJho 9 ก.ย. — กลับจาก "ยกเว้น dropdown")
   หัวข้ออยู่กึ่งกลาง · ปุ่ม ＋ ตรึงขวาไว้ให้ตำแหน่งคงที่ กดง่าย */
@media (max-width: 860px) {
  .iaum-footer__acc { text-align: center; }
  .iaum-footer__acc > summary { position: relative; justify-content: center; text-align: center; padding: 0 28px; }
  .iaum-footer__acc > summary::after {
    position: absolute; right: 0; top: 50%; transform: translateY(-50%); margin: 0; }
  .iaum-footer__acc .iaum-footer__list a { justify-content: center; text-align: center; }
}

/* =========================================================
   Drawer มือถือ — เมนูย่อย (JoJho 9 ก.ย.)
   แถว = ลิงก์ไปหมวดแม่ · ปุ่ม › แยกต่างหาก = กางเมนูย่อย
   (ไม่รวมสองอย่างไว้ปุ่มเดียว เพราะผู้ใช้จะเดาไม่ถูกว่ากดแล้วได้อะไร)
   ========================================================= */
.iaum-drawer__group { position: relative; border-bottom: 1px solid rgba(0,0,0,.07); }
.iaum-drawer__group .iaum-drawer__row { border-bottom: 0; }
.iaum-drawer__group.has-sub .iaum-drawer__row { padding-right: 52px; }

.iaum-drawer__toggle {
  position: absolute; right: -10px; top: 0; width: 52px; height: 56px;
  border: 0; background: none; cursor: pointer; padding: 0;
  font-family: var(--iaum-sans); font-size: 20px; line-height: 1; color: var(--iaum-ink-5);
  display: grid; place-items: center; transition: transform .22s ease, color .22s ease;
}
.iaum-drawer__toggle:hover { color: var(--iaum-ink); }
.iaum-drawer__toggle[aria-expanded="true"] { transform: rotate(90deg); color: var(--iaum-ink); }
.iaum-drawer__toggle:focus-visible { outline: 2px solid var(--iaum-link); outline-offset: -4px; border-radius: 10px; }

.iaum-drawer__sub { display: none; padding: 2px 0 12px 18px; }
.iaum-drawer__group.is-open .iaum-drawer__sub { display: block; }
.iaum-drawer__sub a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 44px; padding: 0 2px; font-size: 15.5px; color: var(--iaum-ink-2);
}
body.iaum .iaum-drawer__sub a:hover { color: var(--iaum-ink); }
.iaum-drawer__sub .iaum-drawer__n { font-size: 11px; }

/* หน้า hub แบรนด์ — ชิปใหญ่ขึ้นนิดเพราะเป็นเนื้อหาหลักของหน้า */
.iaum-brands-hub { padding-top: 26px; gap: 12px; }
.iaum-brands-hub a { padding: 12px 20px; font-size: 15px; min-height: 46px; }
.iaum-brands-hub .n { font-family: var(--iaum-mono); font-size: 11.5px; opacity: .55; }

/* ชิปนำทางพี่น้อง — ไฮไลต์ตัวที่กำลังดู */
body.iaum .iaum-subnav a.is-active { background: var(--iaum-ink); color: #fff; }
body.iaum .iaum-subnav a.is-active .n { opacity: .7; }
body.iaum .iaum-subnav a.iaum-subnav__all { background: none; border: 1px solid rgba(0,0,0,.14); color: var(--iaum-ink-2); }
body.iaum .iaum-subnav a.iaum-subnav__all:hover { background: var(--iaum-ink); color: #fff; border-color: var(--iaum-ink); }

/* หัวข้อของแถบชิปนำทาง (เล็กกว่าหัวข้อ section ปกติ) */
.iaum-subnav__head { margin-top: 30px; margin-bottom: 0; padding-bottom: 14px; }
.iaum-subnav__head h2 { font-size: clamp(19px, 2vw, 22px); letter-spacing: -.02em; }
@media (max-width: 860px) { .iaum-subnav__head { margin-top: 22px; padding-bottom: 12px; } }

/* =========================================================
   บทความ: ตัวหนังสือแคบ–รูปกว้าง (JoJho 9 ก.ย.)
   ---------------------------------------------------------
   วัดจริง: คอลัมน์ 760px = 92 ตัวอักษร/บรรทัด — กว้างกว่าเกณฑ์อ่านสบาย (55-75)
   ⇒ ไม่ขยายตัวหนังสือ แต่ปล่อย "สื่อ" ทะลุกรอบออกไปให้เต็มตา
      (เทคนิค breakout: margin-left 50% + translateX(-50%))
   ========================================================= */
.iaum-single { max-width: 720px; }

.iaum-single__hero,
.iaum-prose > figure,
.iaum-prose > p > img,
.iaum-prose > img,
.iaum-prose > table,
.iaum-prose > .wp-block-table {
  width: min(1080px, calc(100vw - 2 * var(--iaum-gutter)));
  max-width: none;
  margin-left: 50%;
  transform: translateX(-50%);
}
.iaum-prose > figure img { width: 100%; height: auto; }
.iaum-prose figcaption { max-width: 720px; margin-left: auto; margin-right: auto; }

/* 🔴 บั๊ก 9 ก.ย.: iframe ที่อยู่ใน <p> เคยถูกใส่ breakout "ซ้อนสองชั้น"
   (ทั้งที่ตัว <p> พ่อ และที่ตัว iframe เอง) → พอถึงมือถือ media query
   รีเซ็ตแค่ <p> ตัว iframe เลยยัง translateX(-50%) ค้าง = คลิปเบี้ยวไปทางซ้าย
   ⇒ ตัด iframe ออกจากลิสต์ breakout (ให้พ่อคุมชั้นเดียว) + รีเซ็ต transform ทุกที่ */
@media (max-width: 1180px) {
  .iaum-single__hero,
  .iaum-prose > figure,
  .iaum-prose > img,
  .iaum-prose > p > img,
  .iaum-prose .wp-block-embed,
  .iaum-prose > iframe,
  .iaum-prose > p:has(> iframe),
  .iaum-prose > p > iframe,
  .iaum-prose iframe,
  .iaum-prose > table,
  .iaum-prose > .wp-block-table {
    width: 100%; margin-left: 0; transform: none;
  }
}

/* ============================================================
   แชร์บทความ — ไอคอนกลมแบบ Apple Newsroom (JoJho 9 ก.ย. 2026)
   หัวข้อเล็กกว่า h2 ปกติ เพราะเป็น "ป้ายกำกับ" ไม่ใช่หัวข้อเนื้อหา
   ปุ่ม 44px = ตามกติกาห้อง tap target ≥ 40px (Apple ใช้ 36px เล็กไป)
   ============================================================ */
.iaum-share { margin: 44px 0 8px; }
.iaum-share__head {
  font-size: 19px; font-weight: 700; letter-spacing: -.01em;
  color: var(--iaum-ink); margin: 0 0 14px;
}
.iaum-share__row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.iaum-share__btn {
  width: 44px; height: 44px; flex: 0 0 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; padding: 0; cursor: pointer;
  border-radius: 50%; background: var(--iaum-chip);
  color: var(--iaum-ink-2);
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.iaum-share__btn svg { width: 20px; height: 20px; display: block; }
.iaum-share__btn:hover { background: var(--iaum-ink); color: #fff; transform: translateY(-1px); }
.iaum-share__btn:focus-visible { outline: 2px solid var(--iaum-link); outline-offset: 3px; }
.iaum-share__ok {
  font-family: var(--iaum-mono); font-size: 12px; letter-spacing: .02em;
  color: var(--iaum-green);
}

/* Specificity guard — reset.css ของ hello-elementor ตั้ง a{color:#cc3366}
   ⇒ ต้องยก selector ขึ้น (0,2,1) เหมือนบล็อกอื่นในไฟล์นี้ */
body.iaum a.iaum-share__btn { color: var(--iaum-ink-2); }
body.iaum a.iaum-share__btn:hover { color: #fff; }

/* ============================================================
   overflow-x บนมือถือ — 2 ต้นเหตุที่เจอตอนตรวจ 375px (9 ก.ย. 2026)
   1) แถบคุกกี้ของปลั๊กอิน cookie-law-info กว้าง 429px ที่ vw 375
      → ล้น 54px "ทุกหน้า" (ไม่ใช่ของธีม แต่ธีมต้องคุมให้อยู่)
   2) URL ดิบยาว ๆ ในบทความเก่า (เช่น aisplay.ais.co.th/portal/...)
      ลิงก์ไม่ตัดบรรทัด → ดัน viewport ออกไป
   ============================================================ */
.cli-bar-container, .cli-bar-message, #cookie-law-info-bar {
  max-width: 100% !important;
  box-sizing: border-box !important;
}
.iaum-prose a, .iaum-prose li, .iaum-prose p { overflow-wrap: anywhere; }

/* ============================================================
   "อ่านต่อ" บนมือถือ = รายการ ไม่ใช่การ์ดใหญ่ (JoJho 9 ก.ย. 2026)
   เหตุผล: การ์ดภาพเต็มความกว้าง 2 ใบซ้อนกัน "เด่นกว่าเนื้อหาหลัก"
   ทั้งที่มันเป็นแค่ทางเดินต่อ ⇒ ย่อเป็นแถวรูปเล็กซ้าย–หัวข้อขวา
   ใช้ breakpoint 420px ให้ตรงกับจุดที่กริดยุบเป็น 1 คอลัมน์
   ============================================================ */
@media (max-width: 420px) {
  .iaum-rel .iaum-grid { gap: 0; }
  .iaum-rel .iaum-tile {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    padding: 14px 0;
    border-top: 1px solid var(--iaum-line);
  }
  .iaum-rel .iaum-tile:first-child { border-top: 0; padding-top: 0; }
  .iaum-rel .iaum-tile__img {
    aspect-ratio: 4 / 3;
    border-radius: 10px;
    margin-bottom: 0;
  }
  .iaum-rel .iaum-tile h3 {
    margin: 0;
    font-size: 15.5px;
    line-height: 1.35;
    letter-spacing: -.008em;
    font-weight: 600;
  }
}

/* ============================================================
   คลิปวิดีโอ = พอดีคอลัมน์เนื้อหา ไม่ breakout (JoJho 9 ก.ย. 2026)
   "ใน desktop youtube หรือ video clip มันไม่ควรเกิน content"
   ⇒ ถอด .wp-block-embed / > iframe / p:has(> iframe) ออกจากลิสต์ breakout
   เหลือแค่ .iaum-prose iframe { width:100%; aspect-ratio:16/9 } ที่มีอยู่แล้ว
   → คลิปกว้าง 664px เท่าตัวหนังสือ · รูป/ตาราง/hero ยัง breakout 1080px เหมือนเดิม
   ============================================================ */
.iaum-prose .wp-block-embed,
.iaum-prose > iframe,
.iaum-prose > p:has(> iframe) {
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  transform: none;
}

/* ============================================================
   การ์ดเทียบรุ่น (บล็อกสเปกดำ) — ชื่อรุ่นเต็ม (JoJho 9 ก.ย. 2026)
   🔴 บั๊ก: เดิมใช้ wp_trim_words($title, 4) แล้วได้ "Sams"
      เพราะ WordPress สลับ word-count เป็น "characters_excluding_spaces"
      อัตโนมัติเมื่อ locale เป็นภาษาไทย ⇒ 4 = 4 "ตัวอักษร" ไม่ใช่ 4 คำ
   ⇒ เลิกตัดใน PHP ใช้ชื่อเต็มแล้วคุมด้วย line-clamp 2 บรรทัดแทน
      (กันพลาดซ้ำกับชื่อรุ่นทุกภาษา + ยังอ่านได้ว่าเป็นรุ่นอะไร)
   ============================================================ */
.iaum-spec__slot span.n {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.35;
  min-height: calc(2 * 1.35em);
}
/* hover: ยกการ์ดทั้งใบ ไม่ให้ตัวหนังสือเปลี่ยนเป็นสีลิงก์บนพื้นดำ
   (body.iaum a:hover ตั้ง color:var(--iaum-link) ไว้ = ฟ้าบนพื้นดำ อ่านยาก) */
body.iaum a.iaum-spec__slot:hover { color: #fff; background: rgba(255,255,255,.12); }
.iaum-spec__slot { transition: background .18s ease; }

/* ============================================================
   ปุ่มลอย "เทียบรุ่น (N)" — แทนแท็บ 40px ของ APS Products
   (JoJho 10 ก.ย. 2026 — "แท็บเดิมพลาดง่ายมาก")
   ============================================================ */
.iaum-cmp-fab {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 100000;          /* พาเนลปลั๊กอินใช้ 99999 → ต้องอยู่เหนือ */
  display: none;
  align-items: center;
  gap: 9px;
  padding: 12px 18px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  background: var(--iaum-ink);
  color: #fff;
  font-family: var(--iaum-sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1;
  min-height: 44px;         /* กติกาห้อง: tap target ≥ 40px */
  box-shadow: 0 8px 24px rgba(0,0,0,.22);
  transition: transform .28s cubic-bezier(.4,0,.2,1), background .18s ease;
}
.iaum-cmp-fab.is-on { display: inline-flex; }
.iaum-cmp-fab:hover { background: #000; }
.iaum-cmp-fab:focus-visible { outline: 2px solid var(--iaum-link); outline-offset: 3px; }
.iaum-cmp-fab svg { display: block; flex: 0 0 auto; }
.iaum-cmp-fab__n {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--iaum-yellow);
  color: var(--iaum-ink);
  font-family: var(--iaum-mono);
  font-size: 12px;
  font-weight: 500;
}
/* sheet เปิดแล้วบังมุมขวาล่างพอดี → ซ่อนปุ่มลอย (sheet มีปุ่ม ✕ ของตัวเอง จึงไม่ตัน) */
.iaum-cmp-fab.is-open { opacity: 0; pointer-events: none; transform: translateY(8px); }

/* แท็บ 40px เดิมของปลั๊กอินถูกแปลงร่างเป็น "ปุ่มปิด" ของ bottom sheet ด้านล่าง
   (ไม่ซ่อนทิ้ง เพราะมันคือตัวที่ถือ state `opened` ของปลั๊กอิน) */

@media (max-width: 620px) {
  .iaum-cmp-fab { right: 14px; bottom: 14px; padding: 11px 16px; font-size: 14.5px; }
  /* จอแคบ: เลื่อนซ้าย 268px จะหลุดจอ และถ้าซ่อนปุ่มไป ผู้ใช้จะ "ปิดพาเนลไม่ได้"
     เพราะแท็บเดิมของปลั๊กอินก็ถูกซ่อนไว้ ⇒ ย้ายไปจอดชิดซ้ายแทน ให้ยังกดปิดได้ */
  /* (สถานะเปิดจัดการรวมที่บล็อก bottom sheet — ไม่ต้องแยกจอแล้ว) */
}

/* หน้า APS (/all/, /spec/…): .aps-row มี margin -10px ทั้งสองข้าง แต่ .aps-container
   ไม่มี padding แนวนอนมาหักล้าง → กริดล้นออกนอกกรอบข้างละ 10px
   ที่จอกว้าง gutter ของธีมกลบไว้ แต่ที่ ~768px ทำ overflow-x 9px (ผิดกติกา mobile-first) */
.aps-container { padding-left: 10px; padding-right: 10px; }

/* ============================================================
   พาเนลเทียบรุ่น → การ์ด/bottom sheet (JoJho 10 ก.ย. 2026)
   ------------------------------------------------------------
   ของเดิม: drawer สไลด์จากขวา กว้าง 260px · ปุ่มลบเป็น ✕ ขนาด 18px
   สีเทาอ่อน #c7c8c9 ชิดมุม top:3px right:3px ⇒ "กดยากมาก มองไม่เห็นเลย"
   ใหม่: การ์ดลอยมุมขวาล่างบน desktop · เต็มความกว้างแบบ bottom sheet บนมือถือ
        หัวข้อ + ปุ่ม ✕ กลม · รายการเป็นแถวการ์ด · ปุ่ม Compare Now เต็มความกว้าง

   ⚠️ ไม่แตะ JS ปลั๊กอิน — มันแค่ toggle คลาส `opened` ที่ .aps-comps-handle
      เราจึงขับ transform ด้วย :has() แล้ว override ค่า right/width ที่ jQuery
      animate ใส่มาด้วย !important (การ animate ของเดิมกลายเป็น no-op)
   ============================================================ */
.aps-comps-overlay {
  position: fixed !important;
  left: auto !important;
  right: 20px !important;
  top: auto !important;
  bottom: 20px !important;
  width: min(400px, calc(100vw - 40px)) !important;
  height: auto !important;
  padding: 0 !important;
  background: var(--iaum-bg);
  border: 1px solid var(--iaum-line);
  border-radius: 20px;
  box-shadow: 0 18px 50px rgba(0,0,0,.22);
  overflow: hidden;
  z-index: 99999;
  opacity: 0;
  transform: translateY(calc(100% + 30px));
  transition: transform .32s cubic-bezier(.4,0,.2,1), opacity .2s ease;
}
.aps-comps-overlay:has(.aps-comps-handle.opened) { opacity: 1; transform: translateY(0); }

/* ปุ่มปิด — เดิมคือแท็บไอคอนตาชั่ง 40px ที่ยื่นออกนอกพาเนล */
.aps-comps-handle {
  position: absolute !important;
  top: 13px !important;
  right: 14px !important;
  left: auto !important;
  width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: var(--iaum-chip) !important;
  display: grid;
  place-items: center;
  font-size: 0 !important;
  z-index: 99;
}
.aps-comps-handle::before {
  content: "✕" !important;
  font-family: var(--iaum-sans) !important;
  font-size: 15px;
  color: var(--iaum-ink);
}
.aps-comps-handle::after { content: ""; position: absolute; inset: -5px; }  /* พื้นที่กด 46px */
.aps-comps-handle:hover { background: var(--iaum-ink) !important; }
.aps-comps-handle:hover::before { color: #fff; }

.aps-comps-wrap { position: relative; height: min(56vh, 430px); }
.aps-comps-list {
  position: absolute !important;
  top: 0; width: 100% !important; height: 100% !important;
  max-height: none !important;
  padding: 0 !important;
  overflow: hidden !important;
  display: flex;
  flex-direction: column;
}
/* หัวข้อหมวด + จำนวน */
.aps-comps-list h4 {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 9px;
  margin: 0; padding: 17px 62px 14px 20px;
  font-family: var(--iaum-sans); font-size: 17px; font-weight: 700;
  letter-spacing: -.015em; color: var(--iaum-ink);
  border-bottom: 1px solid var(--iaum-line);
}
.aps-comps-list h4 .aps-comps-num {
  display: inline-grid; place-items: center;
  min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: 999px; background: var(--iaum-ink) !important; color: #fff;
  font-family: var(--iaum-mono); font-size: 12px; font-weight: 500;
}
.aps-comps-list ul {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column; gap: 8px;
  margin: 0; padding: 12px; list-style: none;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
/* แถวสินค้า */
.aps-comps-list li {
  position: relative;
  background: var(--iaum-muted);
  border-radius: 14px;
  padding: 10px 48px 10px 10px;
}
.aps-comps-list li a {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  column-gap: 12px;
  align-items: center;
  text-decoration: none;
}
.aps-comps-list li a img {
  grid-column: 1; grid-row: 1 / span 2;
  width: 52px; height: 52px; flex: 0 0 52px;
  object-fit: cover; border-radius: 10px; background: #fff;
}
.aps-comps-list .aps-comp-item-title {
  grid-column: 2; grid-row: 1;
  font-size: 13.5px; font-weight: 600; line-height: 1.35; color: var(--iaum-ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.aps-comps-list .aps-price-value {
  grid-column: 2; grid-row: 2;
  margin-top: 3px;
  font-family: var(--iaum-mono); font-size: 12px; color: var(--iaum-green) !important;
}
/* 🔴 ปุ่มลบ — ของเดิม 18px สีเทาอ่อนชิดมุม กดแทบไม่โดน */
.aps-comps-list .aps-close-icon {
  position: absolute; top: 50%; right: 9px;
  transform: translateY(-50%);
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 50%; border: 1px solid var(--iaum-line);
  background: #fff;
  color: var(--iaum-ink-2) !important;
  font-size: 13px; line-height: 1;
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.aps-comps-list .aps-close-icon::after { content: ""; position: absolute; inset: -6px; }  /* พื้นที่กด 44px */
.aps-comps-list .aps-close-icon:hover {
  background: var(--iaum-red); border-color: var(--iaum-red); color: #fff !important;
}
/* ปุ่ม Compare Now — เกาะล่างเสมอแม้เลื่อนรายการ */
.aps-comps-list .aps-comp-lb {
  position: sticky; bottom: -12px;
  margin-top: auto; padding: 12px 0 0;
  background: var(--iaum-bg);
  border-radius: 0;
}
.aps-comps-list .aps-compare-now {
  display: flex !important; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 48px; padding: 0 20px;
  border: 0 !important; border-radius: 999px;
  background: var(--iaum-ink) !important; color: #fff !important;
  font-family: var(--iaum-sans); font-size: 15px; font-weight: 600; letter-spacing: -.01em;
}
.aps-comps-list .aps-compare-now:hover { background: #000 !important; }
/* ลูกศรสลับหมวด (มีเมื่อเทียบหลายหมวด) */
.aps-comps-nav { top: 18px !important; right: 60px !important; display: flex; gap: 4px; }
.aps-comps-nav span {
  width: 26px; height: 26px; display: grid; place-items: center;
  border-radius: 50%; background: var(--iaum-chip) !important; color: var(--iaum-ink) !important;
  opacity: 1 !important; font-size: 13px;
}

@media (max-width: 620px) {
  .aps-comps-overlay {
    left: 0 !important; right: 0 !important; bottom: 0 !important;
    width: 100% !important;
    border-radius: 20px 20px 0 0;
    border-left: 0; border-right: 0; border-bottom: 0;
  }
  /* แถบจับแบบ bottom sheet */
  .aps-comps-overlay::before {
    content: ""; position: absolute; top: 8px; left: 50%;
    width: 38px; height: 4px; margin-left: -19px;
    border-radius: 99px; background: var(--iaum-ink-5); z-index: 100;
  }
  .aps-comps-list h4 { padding-top: 22px; }
  .aps-comps-handle { top: 17px !important; }
  .aps-comps-wrap { height: min(64vh, 460px); }
}

/* ============================================================
   แผงค้นหาแบบ popup (JoJho 10 ก.ย. 2026 — "คลิกแล้วมี panel เด้งขึ้นมา")
   ใช้ภาษาเดียวกับ bottom sheet เทียบรุ่น: desktop = การ์ดลอย · มือถือ = sheet
   หน้านี้จะมี popup 2 ตัวคนละมุม — ค้นหา (บนขวา) · เทียบรุ่น (ล่างขวา)
   ============================================================ */
.iaum-search { position: fixed; inset: 0; z-index: 100001; visibility: hidden; }
.iaum-search.is-open { visibility: visible; }
.iaum-search__scrim {
  position: absolute; inset: 0;
  background: rgba(15, 18, 22, .38);
  opacity: 0; transition: opacity .22s ease;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.iaum-search.is-open .iaum-search__scrim { opacity: 1; }
.iaum-search__card {
  position: absolute;
  top: calc(var(--iaum-header-h) + 12px);
  right: 20px;
  width: min(420px, calc(100vw - 40px));
  background: var(--iaum-bg);
  border: 1px solid var(--iaum-line);
  border-radius: 20px;
  box-shadow: 0 18px 50px rgba(0,0,0,.22);
  padding: 18px 20px 20px;
  opacity: 0; transform: translateY(-14px);
  transition: opacity .2s ease, transform .28s cubic-bezier(.4,0,.2,1);
}
.iaum-search.is-open .iaum-search__card { opacity: 1; transform: translateY(0); }
.iaum-search__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.iaum-search__head b { font-size: 17px; font-weight: 700; letter-spacing: -.015em; color: var(--iaum-ink); }
.iaum-search__x {
  width: 36px; height: 36px; flex: 0 0 36px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%; cursor: pointer;
  background: var(--iaum-chip); color: var(--iaum-ink);
  font-family: var(--iaum-sans); font-size: 15px; line-height: 1;
  position: relative;
}
.iaum-search__x::after { content: ""; position: absolute; inset: -5px; }   /* พื้นที่กด 46px */
.iaum-search__x:hover { background: var(--iaum-ink); color: #fff; }
.iaum-search__lbl {
  display: block; margin: 0 0 7px;
  font-family: var(--iaum-mono); font-size: 11px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--iaum-ink-3);
}
.iaum-search input[type=search] {
  width: 100%; margin-bottom: 16px;
  font-family: var(--iaum-sans); font-size: 16px;   /* 16px = iOS ไม่ซูมเองตอนโฟกัส */
  padding: 13px 16px; min-height: 48px;
  border: 1px solid var(--iaum-line); border-radius: 14px;
  background: #fff; color: var(--iaum-ink);
}
.iaum-search input[type=search]:focus { outline: 2px solid var(--iaum-link); outline-offset: 1px; border-color: transparent; }
.iaum-search__chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 18px; }
.iaum-search__chips button {
  padding: 9px 14px; min-height: 40px;
  border: 1px solid var(--iaum-line); border-radius: 999px; cursor: pointer;
  background: #fff; color: var(--iaum-ink);
  font-family: var(--iaum-sans); font-size: 13.5px; font-weight: 500; line-height: 1;
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.iaum-search__chips button:hover { border-color: var(--iaum-ink-4); }
.iaum-search__chips button.is-active { background: var(--iaum-ink); border-color: var(--iaum-ink); color: #fff; }
.iaum-search__go {
  width: 100%; min-height: 50px;
  border: 0; border-radius: 999px; cursor: pointer;
  background: var(--iaum-ink); color: #fff;
  font-family: var(--iaum-sans); font-size: 15.5px; font-weight: 600; letter-spacing: -.01em;
}
.iaum-search__go:hover { background: #000; }

/* ล็อกการเลื่อนพื้นหลังตอน popup เปิด */
html.iaum-lock, html.iaum-lock body { overflow: hidden; }

@media (max-width: 620px) {
  .iaum-search__card {
    top: auto; bottom: 0; right: 0; left: 0;
    width: 100%;
    border-radius: 20px 20px 0 0;
    border-left: 0; border-right: 0; border-bottom: 0;
    padding: 22px 16px calc(20px + env(safe-area-inset-bottom));
    transform: translateY(100%);
  }
  /* ต้องประกาศซ้ำในนี้ — กฎ .is-open ด้านบนอยู่ก่อน media query จึงถูกทับ */
  .iaum-search.is-open .iaum-search__card { transform: translateY(0); }
  .iaum-search__card::before {
    content: ""; position: absolute; top: 8px; left: 50%;
    width: 38px; height: 4px; margin-left: -19px;
    border-radius: 99px; background: var(--iaum-ink-5);
  }
}

/* พาเนลเทียบรุ่นของปลั๊กอินถูกต่อเข้า <body> ทุกหน้า → กั้นให้โผล่แค่โซนสเปก */
body:not(.iaum-spec-ctx) .aps-comps-overlay,
body:not(.iaum-spec-ctx) .iaum-cmp-fab { display: none !important; }

/* ============================================================
   การ์ดสินค้าในหน้าสเปก — ทำให้สูงเท่ากัน (JoJho 10 ก.ย. 2026)
   ------------------------------------------------------------
   ของเดิมปลั๊กอินใช้ float + width:% ⇒ การ์ดสูงตามเนื้อหา
   ชื่อรุ่น 1-3 บรรทัด + บางรุ่นไม่มีราคา ⇒ แถว Add to Compare เยื้องกันทั้งแถว
   ⇒ เปลี่ยนเป็น CSS Grid + การ์ดเป็น flex column สูง 100%
      ชื่อ clamp 2 บรรทัด · เว้นที่ราคาไว้เสมอ · ปุ่มดันลงล่างด้วย margin-top:auto
   (แตะแค่โหมด grid — โหมด list ของปุ่มสลับมุมมองยังเป็นรายการเหมือนเดิม)
   ============================================================ */
ul.aps-products.aps-products-grid {
  display: grid !important;
  width: 100%;              /* พ่อเป็น float — ไม่ระบุแล้ว grid ยุบเป็น 0 (วัดได้ 0px) */
  box-sizing: border-box;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: 20px;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}
.aps-products-grid > li {
  width: auto !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.aps-products-grid .aps-product-box {
  float: none !important;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border: 1px solid var(--iaum-line);
  border-radius: 16px;
  overflow: hidden;
  transition: box-shadow .18s ease, border-color .18s ease;
}
.aps-products-grid .aps-product-box:hover {
  border-color: transparent;
  box-shadow: 0 10px 28px rgba(0,0,0,.10);
}
.aps-products-grid .aps-product-thumb { aspect-ratio: 1 / 1; overflow: hidden; }
.aps-products-grid .aps-product-thumb a { display: block; width: 100%; height: 100%; }
.aps-products-grid .aps-product-thumb img {
  width: 100% !important; height: 100% !important;
  max-width: none; object-fit: cover; display: block;
}
.aps-products-grid .aps-item-meta {
  display: block !important;
  flex: 1 1 auto;
  padding: 13px 13px 11px !important;
  text-align: center;
}
.aps-products-grid .aps-product-title {
  margin: 0 !important;
  font-family: var(--iaum-sans);
  font-size: 14px; font-weight: 600; line-height: 1.35;
  min-height: 2.7em;                    /* กันเว้น 2 บรรทัด ให้ราคาอยู่แนวเดียวกัน */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.aps-products-grid .aps-product-title a { color: var(--iaum-ink); }
.aps-products-grid .aps-product-price {
  min-height: 26px;                     /* บางรุ่นไม่มีราคา — เว้นที่ไว้เท่ากัน */
  margin-top: 6px;
  font-family: var(--iaum-mono); font-size: 14px;
}
.aps-products-grid .aps-item-buttons {
  position: static !important;
  margin-top: auto;                     /* ดันลงล่างสุดของการ์ด */
  padding: 10px 12px !important;
  background: var(--iaum-muted);
  border-top: 1px solid var(--iaum-line);
  text-align: center;
}
.aps-products-grid .aps-compare-btn {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 24px;
  font-family: var(--iaum-sans); font-size: 12.5px; font-weight: 500;
  color: var(--iaum-ink-2);
}
.aps-products-grid .aps-compare-btn:hover { color: var(--iaum-ink); }

@media (max-width: 620px) {
  ul.aps-products.aps-products-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .aps-products-grid .aps-item-meta { padding: 11px 10px 9px !important; }
  .aps-products-grid .aps-product-title { font-size: 13px; }
  .aps-products-grid .aps-compare-btn { font-size: 11.5px; }
}

/* ============================================================
   วิดเจ็ต "มือถือมาใหม่" / "ยอดนิยม" ในไซด์บาร์ → รายการ ไม่ใช่กริด
   (JoJho 10 ก.ย. 2026 — "อยากทำให้ดูแตกต่าง ไม่ใช่ grid")
   ของเดิม 3 ช่องต่อแถว inline-block ⇒ การ์ดเล็กจิ๋ว สูงไม่เท่ากัน
   ⇒ ใช้ภาษาเดียวกับแถวใน bottom sheet เทียบรุ่น: รูปซ้าย 56px + ข้อความขวา
      ต่างจากกริดหลักชัดเจน และอ่านง่ายกว่าในคอลัมน์แคบ
   ============================================================ */
ul.aps-wd-products {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}
.aps-wd-products > li {
  display: block !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border-top: 1px solid var(--iaum-line);
}
.aps-wd-products > li:first-child { border-top: 0; }
.aps-wd-products > li > a {
  display: grid !important;
  grid-template-columns: 56px minmax(0, 1fr);
  column-gap: 12px;
  align-items: center;
  padding: 11px 0 !important;
  background: transparent !important;
}
.aps-wd-products > li > a:hover .aps-wd-title { color: var(--iaum-link); }
.aps-wd-products .aps-wd-thumb {
  grid-column: 1; grid-row: 1 / span 2;
  display: block; width: 56px; height: 56px;
  border-radius: 10px; overflow: hidden; background: var(--iaum-muted);
}
.aps-wd-products .aps-wd-thumb img {
  width: 100% !important; height: 100% !important;
  max-width: none; object-fit: cover; display: block;
}
.aps-wd-products .aps-wd-title {
  grid-column: 2; grid-row: 1;
  padding: 0 !important;
  text-align: left !important;
  font-family: var(--iaum-sans);
  font-size: 13.5px; font-weight: 600; line-height: 1.35;
  color: var(--iaum-ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.aps-wd-products .aps-wd-price {
  grid-column: 2; grid-row: 2;
  margin-top: 3px;
  text-align: left !important;
  font-family: var(--iaum-mono); font-size: 12.5px;
}
/* กันไม่ให้เอฟเฟกต์ zoom ของกริดหลักมาโดนรูปเล็กในวิดเจ็ต */
.aps-wd-products .aps-wd-thumb img { transform: none !important; }

/* จำนวนคอลัมน์ตามที่ตั้งไว้ในปลั๊กอิน (.aps-grid-col4 = 4 ช่อง) แล้วค่อยลดตามจอ */
.aps-products-grid.aps-grid-col4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
@media (max-width: 1180px) {
  .aps-products-grid.aps-grid-col4 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
/* 🔴 หน้า APS ไม่ยุบคอลัมน์บนมือถือ — เนื้อหายังกิน 70% ไซด์บาร์ 30% ที่จอ 375px
   ทำให้การ์ดเหลือกว้าง ~134px (วัดจริง) ⇒ บังคับให้ซ้อนกันตั้งแต่ ≤900px */
@media (max-width: 900px) {
  .aps-content, .aps-content-left, .aps-content-right, .aps-sidebar {
    float: none !important;
    width: 100% !important;
  }
  .aps-sidebar { margin-top: 26px; }
  /* 🔴 .aps-container ของปลั๊กอินล็อก max-width แบบ Bootstrap เก่า (300/460/750/960/1170)
     ที่จอ 375px จึงได้กรอบแค่ 300px = เสียพื้นที่ 75px ⇒ ปล่อยให้เต็มความกว้าง
     แล้วให้ gutter ของธีมเป็นตัวคุมระยะขอบแทน */
  .aps-container { max-width: 100% !important; }
  .aps-products-grid.aps-grid-col4 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 620px) {
  .aps-products-grid.aps-grid-col4 { grid-template-columns: 1fr 1fr !important; }
}

/* 🔴 ช่องว่างแหว่งกลางกริด — ต้นเหตุคือ clearfix hack ของปลั๊กอิน
   `.clearfix:before, .clearfix:after {content:""; display:table}`
   ใน grid container **pseudo-element นับเป็น grid item** ⇒ ::before ยึดช่องที่ 1
   ทำให้สินค้าชิ้นแรกเลื่อนไปคอลัมน์ 2 (วัดได้ x=342 แทน 138 = เยื้อง 1 ช่องพอดี)
   และ ::after ไปกินอีกช่องท้ายกริด
   ⇒ ปิดทั้งคู่ · ไม่ต้องใช้ clearfix อยู่แล้วเพราะ grid ไม่มี float ให้ clear */
ul.aps-products.aps-products-grid::before,
ul.aps-products.aps-products-grid::after,
ul.aps-wd-products::before,
ul.aps-wd-products::after { display: none !important; content: none !important; }

/* สโลแกนหน้า /store/ (JoJho 11 ต.ค. 2026) — แทนคำบรรยายยาว + หมายเหตุเดิม */
.iaum-store-hero__tagline { font-size: clamp(20px, 2.2vw, 26px); font-weight: 600; letter-spacing: -.01em; color: var(--iaum-ink); }